Collapse catalog settings list

app/pages/catalog-settings.vue

@@ -165,6 +165,18 @@ function parseTextOptionList(values: string[]) {
   return normalizeOptionList(values, 'text');
 }
 
+function enabledCustomizationCount(form: CatalogSettingForm) {
+  return [
+    form.allowCustomLength,
+    form.allowCustomSleeveBrand,
+    form.allowCustomLabel,
+  ].filter(Boolean).length;
+}
+
+function filledParameterGroupCount(form: CatalogSettingForm) {
+  return OPTION_GROUPS.filter((group) => form[group.key].length > 0).length;
+}
+
 watch(
   settings,
   (items) => {
@@ -235,15 +247,31 @@ async function saveAllSettings() {
       Типы товаров пока не появились в каталоге.
     </div>
 
-    <div v-else class="space-y-4">
-      <article
+    <div v-else class="space-y-3">
+      <details
         v-for="item in settings"
         :key="item.productType"
-        class="rounded-[28px] bg-white p-5 shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
+        class="group rounded-[28px] bg-white shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
       >
-        <div class="space-y-5">
-          <h2 class="text-xl font-bold text-[#123824]">{{ item.productType }}</h2>
+        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 p-5">
+          <div class="min-w-0 space-y-1">
+            <h2 class="text-xl font-bold text-[#123824]">{{ item.productType }}</h2>
+            <p class="text-sm text-[#5a7667]">
+              {{ filledParameterGroupCount(formFor(item)) }} параметров, {{ enabledCustomizationCount(formFor(item)) }} кастомные возможности
+            </p>
+          </div>
 
+          <div class="flex items-center gap-3">
+            <span class="hidden text-sm font-semibold text-[#6a8a78] md:inline">Открыть</span>
+            <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[#eef7f1] text-[#1d5a3c] transition group-open:rotate-180">
+              <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
+                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.512a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
+              </svg>
+            </span>
+          </div>
+        </summary>
+
+        <div class="space-y-5 border-t border-[#edf4ef] p-5">
           <div class="space-y-3">
             <label class="surface-card flex items-center gap-3 rounded-[22px] p-4">
               <input v-model="formFor(item).allowCustomLength" type="checkbox" class="checkbox checkbox-success">
@@ -345,7 +373,7 @@ async function saveAllSettings() {
             </div>
           </div>
         </div>
-      </article>
+      </details>
     </div>
 
     <div v-if="saveSuccess || saveError" class="space-y-2 text-sm">