[Refactor] Move tree logic to setting composable (#3491)

src/composables/setting/useSettingUI.ts

@@ -1,16 +1,45 @@
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { SettingTreeNode } from '@/stores/settingStore'
+import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
+import type { SettingParams } from '@/types/settingTypes'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
+import { buildTree } from '@/utils/treeUtil'
 
 export function useSettingUI(
   defaultPanel?: 'about' | 'keybinding' | 'extension' | 'server-config'
 ) {
   const { t } = useI18n()
+  const settingStore = useSettingStore()
   const activeCategory = ref<SettingTreeNode | null>(null)
 
+  const settingRoot = computed<SettingTreeNode>(() => {
+    const root = buildTree(
+      Object.values(settingStore.settingsById).filter(
+        (setting: SettingParams) => setting.type !== 'hidden'
+      ),
+      (setting: SettingParams) => setting.category || setting.id.split('.')
+    )
+
+    const floatingSettings = (root.children ?? []).filter((node) => node.leaf)
+    if (floatingSettings.length) {
+      root.children = (root.children ?? []).filter((node) => !node.leaf)
+      root.children.push({
+        key: 'Other',
+        label: 'Other',
+        leaf: false,
+        children: floatingSettings
+      })
+    }
+
+    return root
+  })
+
+  const settingCategories = computed<SettingTreeNode[]>(
+    () => settingRoot.value.children ?? []
+  )
+
   // Define panel nodes
   const aboutPanelNode: SettingTreeNode = {
     key: 'about',
@@ -44,20 +73,21 @@ export function useSettingUI(
   })
 
   /**
-   * Get the default category to show when the dialog is opened.
+   * The default category to show when the dialog is opened.
    */
-  const getDefaultCategory = (categories: SettingTreeNode[]) => {
+  const defaultCategory = computed<SettingTreeNode>(() => {
     return defaultPanel
-      ? categories.find((x) => x.key === defaultPanel) ?? categories[0]
-      : categories[0]
-  }
+      ? settingCategories.value.find((x) => x.key === defaultPanel) ??
+          settingCategories.value[0]
+      : settingCategories.value[0]
+  })
 
   /**
-   * Create translated categories with labels
+   * Translated all categories with labels
    */
-  const createTranslatedCategories = (settingCategories: SettingTreeNode[]) => {
+  const translatedCategories = computed<SettingTreeNode[]>(() => {
     return [
-      ...settingCategories,
+      ...settingCategories.value,
       keybindingPanelNode,
       extensionPanelNode,
       ...serverConfigPanelNodeList.value,
@@ -69,11 +99,16 @@ export function useSettingUI(
         node.label
       )
     }))
-  }
+  })
+
+  onMounted(() => {
+    activeCategory.value = defaultCategory.value
+  })
 
   return {
     activeCategory,
-    getDefaultCategory,
-    createTranslatedCategories
+    defaultCategory,
+    allCategories: translatedCategories,
+    settingCategories
   }
 }