From 2f77d7489147c2cfe429e128e24e1166f75c76d1 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 17 Apr 2025 16:34:42 -0400
Subject: [PATCH] [Refactor] Move tree logic to setting composable (#3491)

---
 .../dialog/content/SettingDialogContent.vue   | 28 ++-------
 src/composables/setting/useSettingSearch.ts   |  5 +-
 src/composables/setting/useSettingUI.ts       | 61 +++++++++++++++----
 src/stores/settingStore.ts                    | 26 +-------
 tests-ui/tests/store/settingStore.test.ts     |  1 -
 5 files changed, 57 insertions(+), 64 deletions(-)

diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
index 81cd578a7..c1f5e7526 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/components/dialog/content/SettingDialogContent.vue
@@ -10,7 +10,7 @@
       />
       <Listbox
         v-model="activeCategory"
-        :options="categories"
+        :options="allCategories"
         option-label="translatedLabel"
         scroll-height="100%"
         :option-disabled="
@@ -73,12 +73,12 @@ import Listbox from 'primevue/listbox'
 import ScrollPanel from 'primevue/scrollpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import { computed, defineAsyncComponent, onMounted, watch } from 'vue'
+import { computed, defineAsyncComponent, watch } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useSettingSearch } from '@/composables/setting/useSettingSearch'
 import { useSettingUI } from '@/composables/setting/useSettingUI'
-import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
+import { SettingTreeNode } from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import { flattenTree } from '@/utils/treeUtil'
 
@@ -103,13 +103,7 @@ const ServerConfigPanel = defineAsyncComponent(
   () => import('./setting/ServerConfigPanel.vue')
 )
 
-const settingStore = useSettingStore()
-const settingRoot = computed<SettingTreeNode>(() => settingStore.settingTree)
-const settingCategories = computed<SettingTreeNode[]>(
-  () => settingRoot.value.children ?? []
-)
-
-const { activeCategory, getDefaultCategory, createTranslatedCategories } =
+const { activeCategory, defaultCategory, allCategories, settingCategories } =
   useSettingUI(defaultPanel)
 
 const {
@@ -121,16 +115,6 @@ const {
   getSearchResults
 } = useSettingSearch()
 
-// Create categories with translated labels
-const categories = computed<SettingTreeNode[]>(() =>
-  createTranslatedCategories(settingCategories.value)
-)
-
-// Initialize active category on mount
-onMounted(() => {
-  activeCategory.value = getDefaultCategory(categories.value)
-})
-
 // Sort groups for a category
 const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
   return [...(category.children ?? [])]
@@ -142,8 +126,8 @@ const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
 }
 
 const handleSearch = (query: string) => {
-  handleSearchBase(query, settingRoot.value)
-  activeCategory.value = query ? null : getDefaultCategory(categories.value)
+  handleSearchBase(query)
+  activeCategory.value = query ? null : defaultCategory.value
 }
 
 // Get search results
diff --git a/src/composables/setting/useSettingSearch.ts b/src/composables/setting/useSettingSearch.ts
index 3cc601dd4..e3e51890d 100644
--- a/src/composables/setting/useSettingSearch.ts
+++ b/src/composables/setting/useSettingSearch.ts
@@ -8,7 +8,6 @@ import {
 } from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'
-import { flattenTree } from '@/utils/treeUtil'
 
 export function useSettingSearch() {
   const settingStore = useSettingStore()
@@ -45,14 +44,14 @@ export function useSettingSearch() {
   /**
    * Handle search functionality
    */
-  const handleSearch = (query: string, settingRoot: SettingTreeNode) => {
+  const handleSearch = (query: string) => {
     if (!query) {
       filteredSettingIds.value = []
       return
     }
 
     const queryLower = query.toLocaleLowerCase()
-    const allSettings = flattenTree<SettingParams>(settingRoot)
+    const allSettings = Object.values(settingStore.settingsById)
     const filteredSettings = allSettings.filter((setting) => {
       const idLower = setting.id.toLowerCase()
       const nameLower = setting.name.toLowerCase()
diff --git a/src/composables/setting/useSettingUI.ts b/src/composables/setting/useSettingUI.ts
index cdd17650f..0bbb7fb1f 100644
--- a/src/composables/setting/useSettingUI.ts
+++ b/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
   }
 }
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index fb6f0240c..1247e6919 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -1,13 +1,12 @@
 import _ from 'lodash'
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import type { Settings } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { SettingParams } from '@/types/settingTypes'
 import type { TreeNode } from '@/types/treeExplorerTypes'
-import { buildTree } from '@/utils/treeUtil'
 
 export const getSettingInfo = (setting: SettingParams) => {
   const parts = setting.category || setting.id.split('.')
@@ -38,28 +37,6 @@ export const useSettingStore = defineStore('setting', () => {
   const settingValues = ref<Record<string, any>>({})
   const settingsById = ref<Record<string, SettingParams>>({})
 
-  const settingTree = computed<SettingTreeNode>(() => {
-    const root = buildTree(
-      Object.values(settingsById.value).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
-  })
-
   /**
    * Check if a setting's value exists, i.e. if the user has set it manually.
    * @param key - The key of the setting to check.
@@ -150,7 +127,6 @@ export const useSettingStore = defineStore('setting', () => {
   return {
     settingValues,
     settingsById,
-    settingTree,
     addSetting,
     loadSettingValues,
     set,
diff --git a/tests-ui/tests/store/settingStore.test.ts b/tests-ui/tests/store/settingStore.test.ts
index c9de09ec3..a217cfeb6 100644
--- a/tests-ui/tests/store/settingStore.test.ts
+++ b/tests-ui/tests/store/settingStore.test.ts
@@ -37,7 +37,6 @@ describe('useSettingStore', () => {
   it('should initialize with empty settings', () => {
     expect(store.settingValues).toEqual({})
     expect(store.settingsById).toEqual({})
-    expect(store.settingTree.children).toEqual([])
   })
 
   describe('loadSettingValues', () => {