From 73adbb76c72e560325220ff8cac0dc4b3cabb75e Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 9 Apr 2026 19:14:14 +0700
Subject: [PATCH] Refine catalog detail layout

---
 .../catalog/CatalogConfigurator.vue           | 348 ++++++++++--------
 1 file changed, 196 insertions(+), 152 deletions(-)

diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue
index 398c418..eec64dc 100644
--- a/app/components/catalog/CatalogConfigurator.vue
+++ b/app/components/catalog/CatalogConfigurator.vue
@@ -263,6 +263,21 @@ function visibleFields(group: ProductGroup) {
 }
 
 const selectedGroup = computed(() => productGroups.value.find((group) => group.key === props.productTypeSlug) ?? null);
+const currentGroupIndex = computed(() => productGroups.value.findIndex((group) => group.key === props.productTypeSlug));
+const previousGroup = computed(() => {
+  if (currentGroupIndex.value <= 0) {
+    return null;
+  }
+
+  return productGroups.value[currentGroupIndex.value - 1] ?? null;
+});
+const nextGroup = computed(() => {
+  if (currentGroupIndex.value < 0 || currentGroupIndex.value >= productGroups.value.length - 1) {
+    return null;
+  }
+
+  return productGroups.value[currentGroupIndex.value + 1] ?? null;
+});
 
 function requiredKeys(group: ProductGroup) {
   return visibleFields(group).map((field) => field.key);
@@ -564,177 +579,206 @@ function decrementSelected(group: ProductGroup) {
     decrementProduct(product.id);
   }
 }
+
+function productDetailPath(group: ProductGroup) {
+  return `/products/${group.key}`;
+}
 </script>
 
 <template>
   <section class="space-y-5">
-    <div class="flex items-center gap-3">
-      <NuxtLink to="/products" class="btn btn-ghost rounded-full px-3">
-        ← Назад к каталогу
-      </NuxtLink>
-    </div>
-
     <div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
     <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
     <div v-else-if="selectedGroup" class="space-y-4">
-      <article class="surface-card rounded-3xl p-4 md:p-5">
-        <div class="grid gap-4 xl:grid-cols-6 xl:items-start">
-          <div class="p-3 xl:col-span-1">
-            <img
-              :src="createProductCover(selectedGroup.typeLabel, selectedGroup.key)"
-              :alt="`Превью группы ${selectedGroup.typeLabel}`"
-              class="aspect-square w-full rounded-[24px] object-cover"
-              loading="lazy"
+      <NuxtLink
+        v-if="previousGroup"
+        :to="productDetailPath(previousGroup)"
+        class="fixed left-6 top-1/2 z-10 hidden h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full border border-[#dce9e1] bg-white text-xl text-[#163624] shadow-[0_12px_28px_rgba(18,56,36,0.08)] 2xl:flex"
+        aria-label="Предыдущий товар"
+      >
+        ←
+      </NuxtLink>
+
+      <NuxtLink
+        v-if="nextGroup"
+        :to="productDetailPath(nextGroup)"
+        class="fixed right-6 top-1/2 z-10 hidden h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full border border-[#dce9e1] bg-white text-xl text-[#163624] shadow-[0_12px_28px_rgba(18,56,36,0.08)] 2xl:flex"
+        aria-label="Следующий товар"
+      >
+        →
+      </NuxtLink>
+
+      <div class="flex items-center justify-between gap-3">
+        <NuxtLink to="/products" class="btn btn-ghost rounded-full px-3 text-[#163624]">
+          ← Назад
+        </NuxtLink>
+
+        <div class="flex items-center gap-2">
+          <NuxtLink
+            v-if="previousGroup"
+            :to="productDetailPath(previousGroup)"
+            class="btn btn-ghost btn-circle"
+            aria-label="Предыдущий товар"
+          >
+            ←
+          </NuxtLink>
+          <NuxtLink
+            v-if="nextGroup"
+            :to="productDetailPath(nextGroup)"
+            class="btn btn-ghost btn-circle"
+            aria-label="Следующий товар"
+          >
+            →
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div class="space-y-4">
+        <div class="rounded-[28px] border border-[#e6efe9] bg-white p-5 md:p-7">
+          <h1 class="text-3xl font-bold text-[#163624]">{{ selectedGroup.typeLabel }}</h1>
+
+          <div v-if="customizationDetails(selectedGroup).length" class="mt-4 flex flex-wrap gap-2">
+            <span
+              v-for="note in customizationDetails(selectedGroup)"
+              :key="`${selectedGroup.key}-${note}`"
+              class="rounded-full border border-[#dce9e1] bg-white px-3 py-1 text-xs font-semibold text-[#355947]"
             >
+              {{ note }}
+            </span>
           </div>
+        </div>
 
-          <div class="p-4 md:p-5 xl:col-span-4">
-            <div class="mb-4">
-              <h2 class="text-2xl font-bold text-[#163624]">{{ selectedGroup.typeLabel }}</h2>
-              <p class="mt-2 max-w-3xl text-sm leading-6 text-[#5d7468]">
-                Выберите параметры внутри карточки, сразу посмотрите ограничения и ниже изучите полный список вариантов по этой позиции.
-              </p>
-
-              <div v-if="customizationDetails(selectedGroup).length" class="mt-4 rounded-[24px] bg-[#eef8f1] p-4">
-                <p class="text-xs font-bold uppercase tracking-[0.12em] text-[#15613d]">Под заказ</p>
-                <div class="mt-3 flex flex-wrap gap-2">
-                  <span
-                    v-for="note in customizationDetails(selectedGroup)"
-                    :key="`${selectedGroup.key}-${note}`"
-                    class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#15613d]"
-                  >
-                    {{ note }}
-                  </span>
-                </div>
+        <div class="space-y-3">
+          <article
+            v-for="field in visibleFields(selectedGroup)"
+            :key="`${selectedGroup.key}-${field.key}`"
+            class="rounded-[24px] border border-[#e6efe9] bg-white p-5"
+          >
+            <div class="space-y-4">
+              <div class="space-y-2">
+                <h2 class="text-lg font-semibold text-[#163624]">{{ field.label }}</h2>
+                <p class="text-sm leading-6 text-[#5d7468]">{{ fieldHelperText(selectedGroup, field.key) }}</p>
               </div>
-            </div>
 
-            <div class="space-y-3">
-              <div
-                v-for="field in visibleFields(selectedGroup)"
-                :key="`${selectedGroup.key}-${field.key}`"
-                class="rounded-[22px] border border-base-200 bg-[#fbfcfb] p-4"
-              >
-                <div class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_260px] xl:items-start">
-                  <div>
-                    <p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
-
-                    <div class="mt-3 flex flex-wrap gap-2">
-                      <label
-                        v-for="option in getAllFieldOptions(selectedGroup, field.key)"
-                        :key="`${selectedGroup.key}-${field.key}-${option}`"
-                        class="btn btn-sm rounded-full text-sm normal-case shadow-none transition"
-                        :class="[
-                          getGroupState(selectedGroup)[field.key] === option
-                            ? 'bg-neutral text-neutral-content'
-                            : isOptionAvailable(selectedGroup, field.key, option)
-                              ? 'bg-base-100 text-base-content hover:bg-base-200'
-                              : 'bg-[#eef1f4] text-[#7b8591] hover:bg-[#e3e7eb]',
-                          'cursor-pointer',
-                        ]"
-                      >
-                        <input
-                          type="radio"
-                          class="sr-only"
-                          :name="`${selectedGroup.key}-${field.key}`"
-                          :checked="getGroupState(selectedGroup)[field.key] === option"
-                          @change="updateField(selectedGroup, field.key, option)"
-                        >
-                        <span>{{ formatOptionLabel(field.key, option) }}</span>
-                      </label>
-                    </div>
-                  </div>
-
-                  <div class="rounded-[18px] bg-white p-3 text-sm leading-6 text-[#5d7468]">
-                    {{ fieldHelperText(selectedGroup, field.key) }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <aside class="p-4 md:p-5 xl:col-span-1">
-            <div class="flex h-full flex-col justify-between gap-4">
-              <div />
-
-              <div class="space-y-3">
-                <div class="rounded-[22px] bg-[#f5faf7] px-4 py-3 text-center text-sm font-medium text-[#4c6a5a]">
-                  Артикул: <span class="font-semibold text-[#163624]">{{ articleLabel(selectedGroup) }}</span>
-                </div>
-
-                <button
-                  v-if="selectedQty(selectedGroup) === 0"
-                  class="btn h-11 w-full rounded-full border-0 bg-[#139957] text-sm font-semibold text-white hover:bg-[#0d854a]"
-                  :disabled="!selectedProduct(selectedGroup)"
-                  @click="incrementSelected(selectedGroup)"
+              <div class="flex flex-wrap gap-2">
+                <label
+                  v-for="option in getAllFieldOptions(selectedGroup, field.key)"
+                  :key="`${selectedGroup.key}-${field.key}-${option}`"
+                  class="btn btn-sm rounded-full text-sm normal-case shadow-none transition"
+                  :class="[
+                    getGroupState(selectedGroup)[field.key] === option
+                      ? 'bg-neutral text-neutral-content'
+                      : isOptionAvailable(selectedGroup, field.key, option)
+                        ? 'bg-base-100 text-base-content hover:bg-base-200'
+                        : 'bg-[#eef1f4] text-[#7b8591] hover:bg-[#e3e7eb]',
+                    'cursor-pointer',
+                  ]"
                 >
-                  В корзину
-                </button>
+                  <input
+                    type="radio"
+                    class="sr-only"
+                    :name="`${selectedGroup.key}-${field.key}`"
+                    :checked="getGroupState(selectedGroup)[field.key] === option"
+                    @change="updateField(selectedGroup, field.key, option)"
+                  >
+                  <span>{{ formatOptionLabel(field.key, option) }}</span>
+                </label>
+              </div>
+            </div>
+          </article>
 
-                <div v-else class="rounded-[22px] border border-base-300 bg-base-100 px-2 py-1">
-                  <div class="flex items-center justify-between gap-2">
-                    <button
-                      class="btn btn-square btn-sm"
-                      :disabled="selectedQty(selectedGroup) === 0"
-                      @click="decrementSelected(selectedGroup)"
-                    >
-                      -
-                    </button>
-                    <div class="min-w-10 text-center text-lg font-semibold text-[#163624]">{{ selectedQty(selectedGroup) }}</div>
-                    <button class="btn btn-square btn-sm" :disabled="!selectedProduct(selectedGroup)" @click="incrementSelected(selectedGroup)">
-                      +
-                    </button>
-                  </div>
+          <article class="rounded-[24px] border border-[#e6efe9] bg-white p-5">
+            <div class="space-y-4">
+              <div class="space-y-1">
+                <h2 class="text-lg font-semibold text-[#163624]">В корзину</h2>
+                <p class="text-sm leading-6 text-[#5d7468]">
+                  Артикул: <span class="font-semibold text-[#163624]">{{ articleLabel(selectedGroup) }}</span>
+                </p>
+              </div>
+
+              <button
+                v-if="selectedQty(selectedGroup) === 0"
+                class="btn h-11 rounded-full border-0 bg-[#139957] px-6 text-sm font-semibold text-white hover:bg-[#0d854a]"
+                :disabled="!selectedProduct(selectedGroup)"
+                @click="incrementSelected(selectedGroup)"
+              >
+                В корзину
+              </button>
+
+              <div v-else class="inline-flex rounded-[22px] border border-base-300 bg-base-100 px-2 py-1">
+                <div class="flex items-center justify-between gap-2">
+                  <button
+                    class="btn btn-square btn-sm"
+                    :disabled="selectedQty(selectedGroup) === 0"
+                    @click="decrementSelected(selectedGroup)"
+                  >
+                    -
+                  </button>
+                  <div class="min-w-10 text-center text-lg font-semibold text-[#163624]">{{ selectedQty(selectedGroup) }}</div>
+                  <button class="btn btn-square btn-sm" :disabled="!selectedProduct(selectedGroup)" @click="incrementSelected(selectedGroup)">
+                    +
+                  </button>
                 </div>
               </div>
             </div>
-          </aside>
-        </div>
+          </article>
 
-        <div class="mt-4 overflow-x-auto rounded-[28px] bg-white">
-          <table class="table border-separate border-spacing-0 bg-white [&_tbody_tr:hover]:bg-white [&_tbody_tr]:bg-white [&_td]:bg-white [&_th]:bg-white [&_thead_tr]:bg-white">
-            <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>
-                <th class="border-b border-base-300">Втулка</th>
-                <th class="border-b border-base-300 text-right">Действие</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="product in selectedGroup.products" :key="`${selectedGroup.key}-${product.id}`">
-                <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>
-                <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 text-right">
-                  <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"
-                      @click="decrementProduct(product.id)"
-                    >
-                      -
-                    </button>
-                    <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>
-              </tr>
-            </tbody>
-          </table>
+          <article class="rounded-[24px] border border-[#e6efe9] bg-white p-5">
+            <div class="space-y-4">
+              <div class="space-y-1">
+                <h2 class="text-lg font-semibold text-[#163624]">Товар в наличии</h2>
+                <p class="text-sm leading-6 text-[#5d7468]">
+                  Все доступные варианты по этому типу товара.
+                </p>
+              </div>
+
+              <div class="overflow-x-auto rounded-[20px] border border-[#edf4ef] bg-white">
+                <table class="table border-separate border-spacing-0 bg-white [&_tbody_tr:hover]:bg-white [&_tbody_tr]:bg-white [&_td]:bg-white [&_th]:bg-white [&_thead_tr]:bg-white">
+                  <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>
+                      <th class="border-b border-base-300">Втулка</th>
+                      <th class="border-b border-base-300 text-right">Действие</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="product in selectedGroup.products" :key="`${selectedGroup.key}-${product.id}`">
+                      <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>
+                      <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 text-right">
+                        <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"
+                            @click="decrementProduct(product.id)"
+                          >
+                            -
+                          </button>
+                          <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>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </article>
         </div>
-      </article>
+      </div>
     </div>
     <div v-else class="alert surface-card border-0">Такой тип товара не найден.</div>
   </section>