fixsome changes

src/pages/menuPages/configuration/index.vue

@@ -63,7 +63,35 @@
               </div>
             </template>
 
-            <a-row :gutter="[16, 16]" class="settings-grid">
+            <template v-if="group.subsections?.length">
+              <div
+                v-for="block in subsectionBlocks(group)"
+                :key="block.id"
+                class="settings-subsection"
+              >
+                <h3 class="settings-subsection__title">{{ block.title }}</h3>
+                <a-row :gutter="[16, 16]" class="settings-grid">
+                  <a-col
+                    v-for="row in block.rows"
+                    :key="row.id"
+                    :xs="24"
+                    :sm="12"
+                    :lg="rowColSpan(row)"
+                  >
+                    <SettingCard
+                      :row="row"
+                      :model-value="draftValue(row)"
+                      :readonly="isReadonly(row)"
+                      :saving="isSaving(row.id)"
+                      :saved-flash="isSavedFlash(row.id)"
+                      @update:value="onValueChange(row, $event)"
+                      @blur="onFieldBlur(row)"
+                    />
+                  </a-col>
+                </a-row>
+              </div>
+            </template>
+            <a-row v-else :gutter="[16, 16]" class="settings-grid">
               <a-col
                 v-for="row in groupedFiltered[group.id]"
                 :key="row.id"
@@ -178,7 +206,8 @@ import { applyBannerEnabledFromRows, applyTrackingSystemsEnabledFromRows, applyC
 import {
   EDITABLE_SETTING_GROUPS,
   SYSTEM_SETTING_GROUPS,
-  getSettingGroupId
+  getSettingGroupId,
+  type SettingGroupDef
 } from './settingGroups'
 import {
   SETTING_TYPE_OPTIONS,
@@ -318,6 +347,32 @@ const visibleSettingGroups = computed(() =>
   settingGroups.value.filter((g) => (groupedFiltered.value[g.id]?.length ?? 0) > 0)
 )
 
+function subsectionBlocks(group: SettingGroupDef) {
+  const rows = groupedFiltered.value[group.id] ?? []
+  if (!group.subsections?.length) {
+    return [{ id: 'all', title: group.title, rows }]
+  }
+
+  const used = new Set<number>()
+  const blocks = group.subsections
+    .map((sub) => {
+      const subRows = rows.filter((row) => {
+        if (row.id == null || used.has(row.id)) return false
+        if (!sub.match(row.key || '')) return false
+        used.add(row.id)
+        return true
+      })
+      return { id: sub.id, title: sub.title, rows: subRows }
+    })
+    .filter((b) => b.rows.length > 0)
+
+  const leftovers = rows.filter((row) => row.id != null && !used.has(row.id))
+  if (leftovers.length) {
+    blocks.push({ id: `${group.id}-other`, title: 'سایر', rows: leftovers })
+  }
+  return blocks
+}
+
 const defaultOpenGroupId = computed(() => {
   const visibleIds = visibleSettingGroups.value.map((g) => g.id)
   const preferred = isSystemMode.value
@@ -740,6 +795,21 @@ async function ok() {
   margin-bottom: 8px;
 }
 
+.settings-subsection {
+  & + & {
+    margin-top: 1.25rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--admin-border);
+  }
+
+  &__title {
+    margin: 0 0 0.75rem;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--admin-text-primary);
+  }
+}
+
 :deep(.ant-form-item-extra) {
   font-size: 12px;
   color: rgba(0, 0, 0, 0.45);