refactor(catalog): streamline search and table actions

app/components/catalog/CatalogConfigurator.vue

@@ -368,17 +368,35 @@ function decrementSelected(group: ProductGroup) {
   <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">
+    <label class="input input-bordered flex w-full items-center gap-3 rounded-full bg-white">
-      <label class="form-control">
+      <svg
-        <span class="label-text">Поиск</span>
+        class="h-4 w-4 shrink-0 text-base-content/45"
-        <input
+        viewBox="0 0 20 20"
-          v-model="search"
+        fill="none"
-          type="text"
+        xmlns="http://www.w3.org/2000/svg"
-          class="input input-bordered w-full"
+      >
-          placeholder="Тип товара, SKU или параметр"
+        <path
-        >
+          d="M14.1667 14.1667L17.5 17.5"
-      </label>
+          stroke="currentColor"
-    </div>
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <circle
+          cx="8.75"
+          cy="8.75"
+          r="5.83333"
+          stroke="currentColor"
+          stroke-width="1.6"
+        />
+      </svg>
+      <input
+        v-model="search"
+        type="text"
+        class="grow"
+        placeholder="Поиск по артикулу, типу товара или параметрам"
+      >
+    </label>
 
     <div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
     <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
@@ -484,7 +502,6 @@ function decrementSelected(group: ProductGroup) {
           <table class="table border-separate border-spacing-0">
             <thead>
               <tr>
-                <th class="border-b border-base-300">Фото</th>
                 <th class="border-b border-base-300">Артикул</th>
                 <th class="border-b border-base-300">Ширина</th>
                 <th class="border-b border-base-300">Длина</th>
@@ -496,14 +513,6 @@ function decrementSelected(group: ProductGroup) {
             </thead>
             <tbody>
               <tr v-for="product in group.products" :key="`${group.key}-${product.id}`">
-                <td class="border-b border-base-200">
-                  <img
-                    :src="createProductCover(product.name, product.sku)"
-                    :alt="`Превью ${product.sku}`"
-                    class="h-12 w-12 rounded-lg object-cover"
-                    loading="lazy"
-                  >
-                </td>
                 <td class="border-b border-base-200">{{ product.sku }}</td>
                 <td class="border-b border-base-200">{{ product.widthMm ?? '—' }}</td>
                 <td class="border-b border-base-200">{{ product.lengthM ?? '—' }}</td>
@@ -511,7 +520,14 @@ function decrementSelected(group: ProductGroup) {
                 <td class="border-b border-base-200">{{ product.sleeveBrand ?? '—' }}</td>
                 <td class="border-b border-base-200">{{ product.quantityPerBox ?? '—' }}</td>
                 <td class="border-b border-base-200 text-right">
-                  <div class="ml-auto flex w-28 items-center justify-between rounded-xl border border-base-300 px-1 py-1">
+                  <button
+                    v-if="getQuantity(product.id) === 0"
+                    class="btn h-9 rounded-full border-0 bg-[#139957] px-4 text-xs font-semibold text-white hover:bg-[#0d854a]"
+                    @click="incrementProduct(product)"
+                  >
+                    В корзину
+                  </button>
+                  <div v-else class="ml-auto flex w-28 items-center justify-between rounded-xl border border-base-300 px-1 py-1">
                     <button
                       class="btn btn-xs btn-square"
                       :disabled="getQuantity(product.id) === 0"
@@ -519,7 +535,7 @@ function decrementSelected(group: ProductGroup) {
                     >
                       -
                     </button>
-                    <span class="text-sm font-semibold">{{ getQuantity(product.id) }}</span>
+                    <span class="min-w-8 text-center text-sm font-semibold">{{ getQuantity(product.id) }}</span>
                     <button class="btn btn-xs btn-square" @click="incrementProduct(product)">+</button>
                   </div>
                 </td>