Refine catalog cart controls and show cart badge in header

app/components/ui/AppHeader.vue

@@ -6,6 +6,7 @@ type NavItem = {
 };
 
 const route = useRoute();
+const { totalItems } = useClientCart();
 
 const leftCapsule: NavItem[] = [
   { to: '/profile', label: 'Профиль', icon: 'user' },
@@ -83,6 +84,9 @@ function isActive(path: string) {
               <path d="M7 4h-2l-1 2v2h1l2.2 9h10.6l2.2-7H8.3L7.8 8H21V6h-12l-1-2Zm2 16a2 2 0 1 0 0 .01V20Zm8 0a2 2 0 1 0 0 .01V20Z" fill="currentColor" />
             </svg>
             {{ item.label }}
+            <span v-if="item.to === '/cart' && totalItems > 0" class="badge badge-sm border-0 bg-[#139957] text-white">
+              {{ totalItems }}
+            </span>
           </NuxtLink>
         </div>
       </div>

app/composables/useClientCart.ts

@@ -12,8 +12,8 @@ export type ClientCartItem = {
 };
 
 function normalizeQuantity(value: number) {
-  if (!Number.isFinite(value) || value < 1) {
-    return 1;
+  if (!Number.isFinite(value) || value < 0) {
+    return 0;
   }
 
   return Math.floor(value);
@@ -64,7 +64,13 @@ export function useClientCart() {
       return;
     }
 
-    existing.quantity = normalizeQuantity(quantity);
+    const normalizedQuantity = normalizeQuantity(quantity);
+    if (normalizedQuantity === 0) {
+      removeProduct(productId);
+      return;
+    }
+
+    existing.quantity = normalizedQuantity;
   }
 
   function incrementQuantity(productId: string) {
@@ -82,7 +88,13 @@ export function useClientCart() {
       return;
     }
 
-    existing.quantity = normalizeQuantity(existing.quantity - 1);
+    const normalizedQuantity = normalizeQuantity(existing.quantity - 1);
+    if (normalizedQuantity === 0) {
+      removeProduct(productId);
+      return;
+    }
+
+    existing.quantity = normalizedQuantity;
   }
 
   function removeProduct(productId: string) {

app/pages/products.vue

@@ -6,7 +6,7 @@ import { useClientCart } from '~/composables/useClientCart';
 const { result, loading, error } = useQuery(ClientProductsDocument);
 const search = ref('');
 const stockFilter = ref<'ALL' | 'CUSTOM' | 'STANDARD'>('ALL');
-const { addProduct, getQuantity, totalItems } = useClientCart();
+const { addProduct, getQuantity, totalItems, incrementQuantity, decrementQuantity } = useClientCart();
 
 const coverPresets = [
   ['#e9fbe5', '#acfcd5', '#7be9aa'],
@@ -65,6 +65,14 @@ function addProductToCart(product: ClientProductsQuery['clientProducts'][number]
     isCustomizable: product.isCustomizable,
   });
 }
+
+function incrementProduct(productId: string) {
+  incrementQuantity(productId);
+}
+
+function decrementProduct(productId: string) {
+  decrementQuantity(productId);
+}
 </script>
 
 <template>
@@ -137,14 +145,20 @@ function addProductToCart(product: ClientProductsQuery['clientProducts'][number]
         <div class="px-1 pb-2 pt-3">
           <h2 class="text-lg font-bold text-[#133826]">{{ product.name }}</h2>
           <p class="text-xs text-base-content/65">SKU: {{ product.sku }}</p>
-          <div class="mt-3 flex items-center justify-between">
-            <span class="badge badge-outline">В корзине: {{ getQuantity(product.id) }}</span>
+          <div class="mt-3">
             <button
-              class="btn btn-circle btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
+              v-if="getQuantity(product.id) === 0"
+              class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
               @click="addProductToCart(product)"
             >
-              +
+              В корзину
             </button>
+
+            <div v-else class="flex items-center justify-between rounded-2xl border border-base-300 bg-base-100 px-2 py-1">
+              <button class="btn btn-square btn-sm" @click="decrementProduct(product.id)">-</button>
+              <span class="min-w-8 text-center font-semibold">{{ getQuantity(product.id) }}</span>
+              <button class="btn btn-square btn-sm" @click="incrementProduct(product.id)">+</button>
+            </div>
           </div>
         </div>
       </article>