fix(ui): show customer feature settings open, not collapsed

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/ProgramSettingsPage.vue

@@ -454,17 +454,33 @@ async function purgeNonOwned() {
   }
 }
 
+const collapsedSettingGroups = computed(() =>
+  visibleSettingGroups.value.filter((g) => g.id !== 'customer_features'),
+)
+
+const customerFeaturesGroup = computed(() =>
+  visibleSettingGroups.value.find((g) => g.id === 'customer_features') ?? null,
+)
+
+const customerFeaturesRows = computed(
+  () => groupedFiltered.value.customer_features ?? [],
+)
+
+const hasAnyVisibleSettings = computed(
+  () => visibleSettingGroups.value.length > 0,
+)
+
 const defaultOpenGroupId = computed(() => {
-  const visibleIds = visibleSettingGroups.value.map((g) => g.id)
+  const visibleIds = collapsedSettingGroups.value.map((g) => g.id)
-  const preferred = ['customer_features', 'chart', 'pricing', 'payping', 'store', 'general']
+  const preferred = ['chart', 'pricing', 'payping', 'store', 'general']
   return preferred.find((id) => visibleIds.includes(id)) ?? visibleIds[0]
 })
 
 watch(
-  visibleSettingGroups,
+  collapsedSettingGroups,
   (groups) => {
     const ids = new Set(groups.map((g) => g.id))
-    if (activeKey.value && !ids.has(activeKey.value)) {
+    if (activeKey.value && !ids.has(String(activeKey.value))) {
       activeKey.value = groups[0]?.id
     }
     if (!activeKey.value && groups.length) {
@@ -620,52 +636,19 @@ onMounted(load)
         </div>
       </div>
 
-      <a-collapse
+      <template v-if="hasAnyVisibleSettings">
-        v-if="visibleSettingGroups.length"
+        <section v-if="customerFeaturesGroup && customerFeaturesRows.length" class="features-open-section">
-        v-model:activeKey="activeKey"
+          <div class="features-open-section__head">
-        accordion
+            <component :is="GROUP_ICONS.customer_features || TeamOutlined" class="settings-collapse-icon" />
-        class="settings-collapse"
+            <span class="settings-collapse-title">{{ customerFeaturesGroup.title }}</span>
-        :bordered="false"
+            <a-badge
-      >
+              :count="customerFeaturesRows.length"
-        <a-collapse-panel v-for="group in visibleSettingGroups" :key="group.id">
+              :number-style="{ backgroundColor: '#d4af37', color: '#fff', fontSize: '11px' }"
-          <template #header>
+            />
-            <div class="settings-collapse-header">
+          </div>
-              <component :is="GROUP_ICONS[group.id] || EllipsisOutlined" class="settings-collapse-icon" />
+          <a-row :gutter="[16, 16]" class="settings-grid">
-              <span class="settings-collapse-title">{{ group.title }}</span>
-              <a-badge
-                :count="groupedFiltered[group.id].length"
-                :number-style="{ backgroundColor: '#d4af37', color: '#fff', fontSize: '11px' }"
-              />
-            </div>
-          </template>
-
-          <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="rowKey(row)"
-                  :xs="24"
-                  :sm="12"
-                  :lg="rowColSpan(row)"
-                >
-                  <SettingCard
-                    :row="row"
-                    :model-value="draftValue(row)"
-                    :disabled="!canWrite"
-                    :saving="isSaving(row)"
-                    :saved-flash="isSavedFlash(row)"
-                    @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]"
+              v-for="row in customerFeaturesRows"
               :key="rowKey(row)"
               :xs="24"
               :sm="12"
@@ -682,8 +665,73 @@ onMounted(load)
               />
             </a-col>
           </a-row>
-        </a-collapse-panel>
+        </section>
-      </a-collapse>
+
+        <a-collapse
+          v-if="collapsedSettingGroups.length"
+          v-model:activeKey="activeKey"
+          accordion
+          class="settings-collapse"
+          :bordered="false"
+        >
+          <a-collapse-panel v-for="group in collapsedSettingGroups" :key="group.id">
+            <template #header>
+              <div class="settings-collapse-header">
+                <component :is="GROUP_ICONS[group.id] || EllipsisOutlined" class="settings-collapse-icon" />
+                <span class="settings-collapse-title">{{ group.title }}</span>
+                <a-badge
+                  :count="groupedFiltered[group.id].length"
+                  :number-style="{ backgroundColor: '#d4af37', color: '#fff', fontSize: '11px' }"
+                />
+              </div>
+            </template>
+
+            <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="rowKey(row)"
+                    :xs="24"
+                    :sm="12"
+                    :lg="rowColSpan(row)"
+                  >
+                    <SettingCard
+                      :row="row"
+                      :model-value="draftValue(row)"
+                      :disabled="!canWrite"
+                      :saving="isSaving(row)"
+                      :saved-flash="isSavedFlash(row)"
+                      @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="rowKey(row)"
+                :xs="24"
+                :sm="12"
+                :lg="rowColSpan(row)"
+              >
+                <SettingCard
+                  :row="row"
+                  :model-value="draftValue(row)"
+                  :disabled="!canWrite"
+                  :saving="isSaving(row)"
+                  :saved-flash="isSavedFlash(row)"
+                  @update:value="onValueChange(row, $event)"
+                  @blur="onFieldBlur(row)"
+                />
+              </a-col>
+            </a-row>
+          </a-collapse-panel>
+        </a-collapse>
+      </template>
       <a-empty
         v-else
         :description="
@@ -787,6 +835,22 @@ onMounted(load)
 .settings-collapse {
   background: transparent;
 }
+.features-open-section {
+  margin-bottom: 16px;
+  padding: 16px 18px 8px;
+  background: var(--admin-bg-elevated);
+  border: 1px solid var(--admin-border);
+  border-radius: 10px;
+  box-shadow: 0 1px 3px var(--admin-shadow);
+}
+.features-open-section__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--admin-border);
+}
 .settings-collapse :deep(.ant-collapse-item) {
   margin-bottom: 12px;
   background: var(--admin-bg-elevated);