Move cart flow to catalog add and simplify checkout list

app/pages/products.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
-import { ClientProductsDocument } from '~/composables/graphql/generated';
+import { ClientProductsDocument, type ClientProductsQuery } from '~/composables/graphql/generated';
+import { useClientCart } from '~/composables/useClientCart';
 
 const { result, loading, error } = useQuery(ClientProductsDocument);
 const search = ref('');
 const stockFilter = ref<'ALL' | 'CUSTOM' | 'STANDARD'>('ALL');
+const cart = useClientCart();
 
 const coverPresets = [
   ['#e9fbe5', '#acfcd5', '#7be9aa'],
@@ -54,12 +56,30 @@ const filteredProducts = computed(() => {
     return matchSearch && matchType;
   });
 });
+
+function addProductToCart(product: ClientProductsQuery['clientProducts'][number]) {
+  cart.addProduct({
+    id: product.id,
+    name: product.name,
+    sku: product.sku,
+    isCustomizable: product.isCustomizable,
+  });
+}
 </script>
 
 <template>
   <section class="space-y-5">
     <h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
 
+    <div class="surface-card rounded-3xl p-4 md:p-5">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <p class="text-sm text-base-content/75">Добавляй позиции и оформляй заявку в корзине.</p>
+        <NuxtLink to="/cart" class="btn btn-outline btn-sm">
+          Корзина: {{ cart.totalItems }}
+        </NuxtLink>
+      </div>
+    </div>
+
     <div class="surface-card rounded-3xl p-4 md:p-5">
       <div class="grid gap-3 md:grid-cols-[1fr_auto]">
         <label class="form-control">
@@ -87,6 +107,19 @@ const filteredProducts = computed(() => {
     <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
 
     <div v-else-if="filteredProducts.length > 0" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      <article class="surface-card overflow-hidden rounded-3xl border border-dashed border-base-300 p-4">
+        <div class="flex h-full flex-col justify-between gap-4">
+          <div>
+            <div class="badge badge-outline">Кастом</div>
+            <h2 class="mt-3 text-lg font-bold text-[#133826]">Конструктор скотча</h2>
+            <p class="mt-1 text-sm text-base-content/75">
+              Отдельная карточка под индивидуальную конфигурацию. Параметры добавим следующим шагом.
+            </p>
+          </div>
+          <button class="btn btn-disabled w-full">Скоро</button>
+        </div>
+      </article>
+
       <article
         v-for="(product, index) in filteredProducts"
         :key="product.id"
@@ -103,6 +136,16 @@ const filteredProducts = computed(() => {
         </figure>
         <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">В корзине: {{ cart.getQuantity(product.id) }}</span>
+            <button
+              class="btn btn-circle btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
+              @click="addProductToCart(product)"
+            >
+              +
+            </button>
+          </div>
         </div>
       </article>
     </div>