feat: Add cart store for catalog quantity sync

- Create Pinia cart store to manage cart state globally
- Sync quantity changes between catalog cards and cart sidebar
- Improve product card design with borders and hover effects
- Fix cart sync when updating quantity via minus button or input field

src/pages/catalog.vue

@@ -35,21 +35,32 @@ export default {
     Card,
     Cart
   },
+  setup() {
+    const cartStore = useCartStore();
+    return { cartStore };
+  },
   data() {
     return {
       api: inject('api'),
-      cartItems: [],
       items: [],
     };
   },
+  computed: {
+    cartItems: {
+      get() {
+        return this.cartStore.items;
+      },
+      set(value) {
+        this.cartStore.items = value;
+      }
+    },
+    cartCount() {
+      return this.cartStore.cartCount;
+    }
+  },
   created() {
     this.fetchProducts();
   },
-  computed: {
-    cartCount() {
-      return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
-    }
-  },
   methods: {
     fetchProducts() {
       this.api.getProducts()
@@ -85,35 +96,17 @@ export default {
     },
     addToCart(item) {
       if (item.quantity <= 0) return;
-      
-      const existingItem = this.cartItems.find(i => i.id === item.id);
-      if (existingItem) {
-        existingItem.quantity = item.quantity;
-      } else {
-        this.cartItems.push({
-          id: item.id,
-          name: item.name,
-          img: item.img,
-          price: item.price,
-          quantity: item.quantity
-        });
-      }
+      this.cartStore.addItem(item);
     },
     removeFromCart(itemId) {
-      const index = this.cartItems.findIndex(i => i.id === itemId);
-      if (index > -1) {
-        this.cartItems.splice(index, 1);
-      }
+      this.cartStore.removeItem(itemId);
       const item = this.items.find(i => i.id === itemId);
       if (item) {
         item.quantity = 0;
       }
     },
     updateCartQuantity({ itemId, quantity }) {
-      const cartItem = this.cartItems.find(i => i.id === itemId);
-      if (cartItem) {
-        cartItem.quantity = quantity;
-      }
+      this.cartStore.updateQuantity({ itemId, quantity });
       const productItem = this.items.find(i => i.id === itemId);
       if (productItem) {
         productItem.quantity = quantity;