Show product tags in catalog

app/components/catalog/CatalogConfigurator.vue

@@ -10,11 +10,13 @@ type ParamValue = number | string;
 type ParsedProduct = ProductNode & {
   productTypeLabel: string;
   quantityPerBoxOptions: string[];
+  normalizedTags: string[];
 };
 
 type ProductGroup = {
   key: string;
   typeLabel: string;
+  tags: string[];
   products: ParsedProduct[];
 };
 
@@ -89,6 +91,7 @@ function hydrateProduct(product: ProductNode): ParsedProduct {
     ...product,
     productTypeLabel: normalizeText(product.productType) || 'Без типа',
     quantityPerBoxOptions: splitBoxValues(product.quantityPerBox),
+    normalizedTags: product.tags.map((tag) => normalizeText(tag)).filter(Boolean).sort((a, b) => a.localeCompare(b, 'ru')),
   };
 }
 
@@ -140,6 +143,7 @@ const parsedProducts = computed<ParsedProduct[]>(() => {
         String(product.thicknessMicron ?? ''),
         normalizeText(product.sleeveBrand),
         normalizeText(product.quantityPerBox),
+        ...product.normalizedTags,
       ].some((part) => part.toLowerCase().includes(query));
     })
     .sort(compareProducts);
@@ -149,21 +153,43 @@ const productGroups = computed<ProductGroup[]>(() => {
   const map = new Map<string, ParsedProduct[]>();
 
   for (const product of parsedProducts.value) {
-    const existing = map.get(product.productTypeLabel);
+    const tagsKey = product.normalizedTags.join('|');
+    const groupKey = `${product.productTypeLabel}::${tagsKey}`;
+    const existing = map.get(groupKey);
     if (existing) {
       existing.push(product);
     } else {
-      map.set(product.productTypeLabel, [product]);
+      map.set(groupKey, [product]);
     }
   }
 
   return [...map.entries()]
-    .sort((a, b) => a[0].localeCompare(b[0], 'ru'))
-    .map(([typeLabel, products]) => ({
-      key: typeLabel.toLowerCase().replaceAll(/\s+/g, '-'),
-      typeLabel,
+    .sort((a, b) => {
+      const firstProduct = a[1][0];
+      const secondProduct = b[1][0];
+      const byType = firstProduct.productTypeLabel.localeCompare(secondProduct.productTypeLabel, 'ru');
+      if (byType !== 0) {
+        return byType;
+      }
+
+      return firstProduct.normalizedTags.join('|').localeCompare(secondProduct.normalizedTags.join('|'), 'ru');
+    })
+    .map(([groupSignature, products]) => {
+      const firstProduct = products[0];
+      const key = groupSignature
+        .toLowerCase()
+        .replaceAll(/[^a-z0-9а-яё|]+/gi, '-')
+        .replaceAll('|', '--')
+        .replaceAll(/-+/g, '-')
+        .replaceAll(/^-|-$/g, '');
+
+      return {
+        key,
+        typeLabel: firstProduct.productTypeLabel,
+        tags: firstProduct.normalizedTags,
       products: [...products].sort(compareProducts),
-    }));
+      };
+    });
 });
 
 function sortParamValues(values: ParamValue[]) {
@@ -461,6 +487,16 @@ function decrementSelected(group: ProductGroup) {
           <div class="p-4 md:p-5 xl:col-span-4">
             <div class="mb-4">
               <h2 class="text-2xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
+
+              <div v-if="group.tags.length" class="mt-3 flex flex-wrap gap-2">
+                <span
+                  v-for="tag in group.tags"
+                  :key="`${group.key}-${tag}`"
+                  class="rounded-full bg-[#eef8f1] px-3 py-1 text-xs font-semibold uppercase tracking-[0.06em] text-[#15613d]"
+                >
+                  {{ tag }}
+                </span>
+              </div>
             </div>
 
             <div class="grid gap-8 md:grid-cols-2">
@@ -585,6 +621,7 @@ function decrementSelected(group: ProductGroup) {
                 <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>
                 <th class="border-b border-base-300 text-right">Действие</th>
               </tr>
             </thead>
@@ -596,6 +633,18 @@ function decrementSelected(group: ProductGroup) {
                 <td class="border-b border-base-200">{{ product.thicknessMicron ?? '—' }}</td>
                 <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">
+                  <div v-if="product.normalizedTags.length" class="flex flex-wrap gap-2">
+                    <span
+                      v-for="tag in product.normalizedTags"
+                      :key="`${product.id}-${tag}`"
+                      class="rounded-full bg-[#eef8f1] px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.06em] text-[#15613d]"
+                    >
+                      {{ tag }}
+                    </span>
+                  </div>
+                  <span v-else>—</span>
+                </td>
                 <td class="border-b border-base-200 text-right">
                   <button
                     v-if="getQuantity(product.id) === 0"