refactor(catalog): simplify product action panel

app/components/catalog/CatalogConfigurator.vue

@@ -303,6 +303,10 @@ function selectionDescription(group: ProductGroup) {
   return 'Разверните весь список, если нужна ручная проверка вариантов.';
 }
 
+function addButtonLabel(group: ProductGroup) {
+  return selectedProduct(group) ? 'В корзину' : 'Выбрать параметры';
+}
+
 function boxQuantityLabel(group: ProductGroup) {
   const product = selectedProduct(group);
   if (product?.quantityPerBoxOptions.length) {
@@ -425,18 +429,23 @@ function decrementSelected(group: ProductGroup) {
         :key="group.key"
         class="surface-card rounded-3xl p-4 md:p-5"
       >
-        <div class="grid gap-4 xl:grid-cols-6 xl:items-stretch">
+        <div class="grid gap-4 xl:grid-cols-6 xl:items-start">
           <div class="rounded-[28px] bg-base-100 p-3 xl:col-span-1">
             <img
               :src="createProductCover(group.typeLabel, group.key)"
               :alt="`Превью группы ${group.typeLabel}`"
-              class="h-full min-h-[220px] w-full rounded-[24px] object-cover"
+              class="aspect-square w-full rounded-[24px] object-cover"
               loading="lazy"
             >
           </div>
 
           <div class="rounded-[28px] bg-base-100 p-4 md:p-5 xl:col-span-4">
-            <div class="grid h-full gap-4 md:grid-cols-2">
+            <div class="mb-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-base-content/45">Тип товара</p>
+              <h2 class="mt-2 text-2xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
+            </div>
+
+            <div class="grid gap-4 md:grid-cols-2">
               <fieldset
                 v-for="field in visibleFields(group)"
                 :key="`${group.key}-${field.key}`"
@@ -485,23 +494,22 @@ function decrementSelected(group: ProductGroup) {
           <aside class="rounded-[28px] bg-base-100 p-4 md:p-5 xl:col-span-1">
             <div class="flex h-full flex-col justify-between gap-4">
               <div class="space-y-3">
-                <div>
-                  <p class="text-xs font-semibold uppercase tracking-[0.18em] text-base-content/45">Тип товара</p>
-                  <h2 class="mt-2 text-xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
-                </div>
-
-                <div class="flex flex-wrap gap-2">
-                  <span class="badge badge-outline">{{ group.products.length }} вариантов</span>
-                  <span class="badge badge-outline">Короб: {{ boxQuantityLabel(group) }}</span>
-                </div>
-
                 <div class="rounded-[22px] bg-base-200/70 p-3">
-                  <p class="text-sm font-semibold text-[#163624]">{{ selectionHeadline(group) }}</p>
+                  <p v-if="selectedProduct(group)" class="text-sm font-semibold text-[#163624]">{{ selectionHeadline(group) }}</p>
-                  <p class="mt-1 text-xs leading-5 text-base-content/65">{{ selectionDescription(group) }}</p>
+                  <p class="text-xs leading-5 text-base-content/65">{{ selectionDescription(group) }}</p>
+                  <p class="mt-2 text-xs leading-5 text-base-content/65">Короб: {{ boxQuantityLabel(group) }}</p>
                 </div>
               </div>
 
               <div class="space-y-3">
+                <button
+                  class="btn btn-neutral h-11 w-full rounded-full text-sm font-semibold"
+                  :disabled="!selectedProduct(group)"
+                  @click="incrementSelected(group)"
+                >
+                  {{ addButtonLabel(group) }}
+                </button>
+
                 <div class="rounded-[22px] border border-base-300 bg-base-100 px-2 py-1">
                   <div class="flex items-center justify-between gap-2">
                     <button
@@ -515,11 +523,7 @@ function decrementSelected(group: ProductGroup) {
                       <div class="text-[11px] uppercase tracking-[0.16em] text-base-content/45">В корзине</div>
                       <div class="text-lg font-semibold text-[#163624]">{{ selectedQty(group) }}</div>
                     </div>
-                    <button
+                    <button class="btn btn-square btn-sm" :disabled="!selectedProduct(group)" @click="incrementSelected(group)">
-                      class="btn btn-square btn-sm"
-                      :disabled="!selectedProduct(group)"
-                      @click="incrementSelected(group)"
-                    >
                       +
                     </button>
                   </div>