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 preferred = ['customer_features', 'chart', 'pricing', 'payping', 'store', 'general']
+  const visibleIds = collapsedSettingGroups.value.map((g) => g.id)
+  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,14 +636,45 @@ onMounted(load)
         </div>
       </div>
 
+      <template v-if="hasAnyVisibleSettings">
+        <section v-if="customerFeaturesGroup && customerFeaturesRows.length" class="features-open-section">
+          <div class="features-open-section__head">
+            <component :is="GROUP_ICONS.customer_features || TeamOutlined" class="settings-collapse-icon" />
+            <span class="settings-collapse-title">{{ customerFeaturesGroup.title }}</span>
+            <a-badge
+              :count="customerFeaturesRows.length"
+              :number-style="{ backgroundColor: '#d4af37', color: '#fff', fontSize: '11px' }"
+            />
+          </div>
+          <a-row :gutter="[16, 16]" class="settings-grid">
+            <a-col
+              v-for="row in customerFeaturesRows"
+              :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>
+        </section>
+
         <a-collapse
-        v-if="visibleSettingGroups.length"
+          v-if="collapsedSettingGroups.length"
           v-model:activeKey="activeKey"
           accordion
           class="settings-collapse"
           :bordered="false"
         >
-        <a-collapse-panel v-for="group in visibleSettingGroups" :key="group.id">
+          <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" />
@@ -684,6 +731,7 @@ onMounted(load)
             </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);