[Refactor] Extract SettingsPanel (#1673)

* [Refactor] Extract SettingsPanel

* nit

src/components/dialog/content/SettingDialogContent.vue

@@ -22,35 +22,14 @@
         <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
         <TabPanels class="settings-tab-panels">
           <TabPanel key="search-results" value="Search Results">
-            <div v-if="searchResults.length > 0">
+            <SettingsPanel :settingGroups="searchResults" />
-              <SettingGroup
-                v-for="(group, i) in searchResults"
-                :key="group.label"
-                :divider="i !== 0"
-                :group="group"
-              />
-            </div>
-            <NoResultsPlaceholder
-              v-else
-              icon="pi pi-search"
-              :title="$t('noResultsFound')"
-              :message="$t('searchFailedMessage')"
-            />
           </TabPanel>
           <TabPanel
-            v-for="category in categories"
+            v-for="category in settingCategories"
             :key="category.key"
             :value="category.label"
           >
-            <SettingGroup
+            <SettingsPanel :settingGroups="sortedGroups(category)" />
-              v-for="(group, i) in sortedGroups(category)"
-              :key="group.label"
-              :divider="i !== 0"
-              :group="{
-                label: group.label,
-                settings: flattenTree<SettingParams>(group)
-              }"
-            />
           </TabPanel>
           <TabPanel key="about" value="About">
             <AboutPanel />
@@ -94,10 +73,9 @@ import TabPanel from 'primevue/tabpanel'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
 import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
-import { SettingParams } from '@/types/settingTypes'
+import { ISettingGroup, SettingParams } from '@/types/settingTypes'
-import SettingGroup from './setting/SettingGroup.vue'
+import SettingsPanel from './setting/SettingsPanel.vue'
 import SearchBox from '@/components/common/SearchBox.vue'
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { flattenTree } from '@/utils/treeUtil'
 import AboutPanel from './setting/AboutPanel.vue'
 import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
@@ -113,11 +91,6 @@ const ServerConfigPanel = defineAsyncComponent(
   () => import('./setting/ServerConfigPanel.vue')
 )
 
-interface ISettingGroup {
-  label: string
-  settings: SettingParams[]
-}
-
 const aboutPanelNode: SettingTreeNode = {
   key: 'about',
   label: 'About',
@@ -158,8 +131,11 @@ const serverConfigPanelNodeList = computed<SettingTreeNode[]>(() => {
 
 const settingStore = useSettingStore()
 const settingRoot = computed<SettingTreeNode>(() => settingStore.settingTree)
+const settingCategories = computed<SettingTreeNode[]>(
+  () => settingRoot.value.children ?? []
+)
 const categories = computed<SettingTreeNode[]>(() => [
-  ...(settingRoot.value.children || []),
+  ...settingCategories.value,
   keybindingPanelNode,
   ...extensionPanelNodeList.value,
   ...serverConfigPanelNodeList.value,
@@ -178,10 +154,13 @@ onMounted(() => {
   activeCategory.value = categories.value[0]
 })
 
-const sortedGroups = (category: SettingTreeNode) => {
+const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
-  return [...(category.children || [])].sort((a, b) =>
+  return [...(category.children ?? [])]
-    a.label.localeCompare(b.label)
+    .sort((a, b) => a.label.localeCompare(b.label))
-  )
+    .map((group) => ({
+      label: group.label,
+      settings: flattenTree<SettingParams>(group)
+    }))
 }
 
 const searchQuery = ref<string>('')

src/components/dialog/content/setting/SettingsPanel.vue

@@ -0,0 +1,26 @@
+<template>
+  <div v-if="props.settingGroups.length > 0">
+    <SettingGroup
+      v-for="(group, i) in props.settingGroups"
+      :key="group.label"
+      :divider="i !== 0"
+      :group="group"
+    />
+  </div>
+  <NoResultsPlaceholder
+    v-else
+    icon="pi pi-search"
+    :title="$t('noResultsFound')"
+    :message="$t('searchFailedMessage')"
+  />
+</template>
+
+<script setup lang="ts">
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import SettingGroup from './SettingGroup.vue'
+import { ISettingGroup } from '@/types/settingTypes'
+
+const props = defineProps<{
+  settingGroups: ISettingGroup[]
+}>()
+</script>

src/types/settingTypes.ts

@@ -58,3 +58,8 @@ export interface FormItem {
   attrs?: Record<string, any>
   options?: Array<string | SettingOption> | ((value: any) => SettingOption[])
 }
+
+export interface ISettingGroup {
+  label: string
+  settings: SettingParams[]
+}