[SettingUI] Group setting menu items (#3510)

Author: huchenlei

src/components/dialog/content/SettingDialogContent.vue

@@ -10,15 +10,21 @@
       />
       <Listbox
         v-model="activeCategory"
-        :options="allCategories"
+        :options="groupedMenuTreeNodes"
         option-label="translatedLabel"
+        option-group-label="label"
+        option-group-children="children"
         scroll-height="100%"
         :option-disabled="
           (option: SettingTreeNode) =>
             !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
         "
         class="border-none w-full"
-      />
+      >
+        <template #optiongroup>
+          <Divider class="my-0" />
+        </template>
+      </Listbox>
     </ScrollPanel>
     <Divider layout="vertical" class="mx-1 2xl:mx-4 hidden md:flex" />
     <Divider layout="horizontal" class="flex md:hidden" />
@@ -103,8 +109,12 @@ const ServerConfigPanel = defineAsyncComponent(
   () => import('./setting/ServerConfigPanel.vue')
 )
 
-const { activeCategory, defaultCategory, allCategories, settingCategories } =
-  useSettingUI(defaultPanel)
+const {
+  activeCategory,
+  defaultCategory,
+  settingCategories,
+  groupedMenuTreeNodes
+} = useSettingUI(defaultPanel)
 
 const {
   searchQuery,
@@ -183,14 +193,8 @@ watch(activeCategory, (_, oldValue) => {
   }
 }
 
-/* Show a separator line above the Keybinding tab */
-/* This indicates the start of custom setting panels */
-.settings-sidebar :deep(.p-listbox-option[aria-label='Keybinding']) {
-  position: relative;
-}
-
-.settings-sidebar :deep(.p-listbox-option[aria-label='Keybinding'])::before {
-  @apply content-[''] top-0 left-0 absolute w-full;
-  border-top: 1px solid var(--p-divider-border-color);
+/* Hide the first group separator */
+.settings-sidebar :deep(.p-listbox-option-group:nth-child(1)) {
+  display: none;
 }
 </style>

src/composables/setting/useSettingUI.ts

@@ -82,33 +82,42 @@ export function useSettingUI(
       : settingCategories.value[0]
   })
 
-  /**
-   * Translated all categories with labels
-   */
-  const translatedCategories = computed<SettingTreeNode[]>(() => {
-    return [
-      ...settingCategories.value,
-      keybindingPanelNode,
-      extensionPanelNode,
-      ...serverConfigPanelNodeList.value,
-      aboutPanelNode
-    ].map((node) => ({
-      ...node,
-      translatedLabel: t(
-        `settingsCategories.${normalizeI18nKey(node.label)}`,
-        node.label
-      )
-    }))
+  const translateCategory = (node: SettingTreeNode) => ({
+    ...node,
+    translatedLabel: t(
+      `settingsCategories.${normalizeI18nKey(node.label)}`,
+      node.label
+    )
   })
 
+  const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() => [
+    // Normal settings stored in the settingStore
+    {
+      key: 'settings',
+      label: 'Application Settings',
+      children: settingCategories.value.map(translateCategory)
+    },
+    // Special settings such as about, keybinding, extension, server-config
+    {
+      key: 'specialSettings',
+      label: 'Special Settings',
+      children: [
+        keybindingPanelNode,
+        extensionPanelNode,
+        aboutPanelNode,
+        ...serverConfigPanelNodeList.value
+      ].map(translateCategory)
+    }
+  ])
+
   onMounted(() => {
     activeCategory.value = defaultCategory.value
   })
 
   return {
     activeCategory,
     defaultCategory,
-    allCategories: translatedCategories,
+    groupedMenuTreeNodes,
     settingCategories
   }
 }