From 681c3550c9afef5fc37f598a60053765e55d462e Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Fri, 27 Dec 2024 17:35:18 -0500
Subject: [PATCH 1/3] Allow categories with search result

---
 .../dialog/content/SettingDialogContent.vue   | 61 +++++++++++++------
 src/stores/settingStore.ts                    |  9 +++
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
index 13afc222f..24ba59834 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/components/dialog/content/SettingDialogContent.vue
@@ -12,7 +12,10 @@
         :options="categories"
         optionLabel="translatedLabel"
         scrollHeight="100%"
-        :disabled="inSearch"
+        :optionDisabled="
+          (option: SettingTreeNode) =>
+            inSearch && !searchResultsCategories.has(option.label)
+        "
         class="border-none w-full"
       />
     </ScrollPanel>
@@ -70,7 +73,11 @@ import Tabs from 'primevue/tabs'
 import TabPanels from 'primevue/tabpanels'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
-import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
+import {
+  getSettingInfo,
+  SettingTreeNode,
+  useSettingStore
+} from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import SearchBox from '@/components/common/SearchBox.vue'
 import SettingsPanel from './setting/SettingsPanel.vue'
@@ -153,8 +160,6 @@ const categories = computed<SettingTreeNode[]>(() =>
 )
 
 const activeCategory = ref<SettingTreeNode | null>(null)
-const searchResults = ref<ISettingGroup[]>([])
-
 watch(activeCategory, (newCategory, oldCategory) => {
   if (newCategory === null) {
     activeCategory.value = oldCategory
@@ -178,12 +183,42 @@ const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
 }
 
 const searchQuery = ref<string>('')
+const filteredSettingIds = ref<string[]>([])
 const searchInProgress = ref<boolean>(false)
 watch(searchQuery, () => (searchInProgress.value = true))
 
+const searchResults = computed<ISettingGroup[]>(() => {
+  const groupedSettings: { [key: string]: SettingParams[] } = {}
+
+  filteredSettingIds.value.forEach((id) => {
+    const setting = settingStore.settings[id]
+    const groupLabel = getSettingInfo(setting).subCategory
+    if (!groupedSettings[groupLabel]) {
+      groupedSettings[groupLabel] = []
+    }
+    groupedSettings[groupLabel].push(setting)
+  })
+
+  return Object.entries(groupedSettings).map(([label, settings]) => ({
+    label,
+    settings
+  }))
+})
+
+/**
+ * Settings categories that contains at least one setting in search results.
+ */
+const searchResultsCategories = computed<Set<string>>(() => {
+  return new Set(
+    filteredSettingIds.value.map(
+      (id) => getSettingInfo(settingStore.settings[id]).category
+    )
+  )
+})
+
 const handleSearch = (query: string) => {
   if (!query) {
-    searchResults.value = []
+    filteredSettingIds.value = []
     return
   }
 
@@ -203,21 +238,7 @@ const handleSearch = (query: string) => {
     )
   })
 
-  const groupedSettings: { [key: string]: SettingParams[] } = {}
-  filteredSettings.forEach((setting) => {
-    const groupLabel = setting.id.split('.')[1]
-    if (!groupedSettings[groupLabel]) {
-      groupedSettings[groupLabel] = []
-    }
-    groupedSettings[groupLabel].push(setting)
-  })
-
-  searchResults.value = Object.entries(groupedSettings).map(
-    ([label, settings]) => ({
-      label,
-      settings
-    })
-  )
+  filteredSettingIds.value = filteredSettings.map((x) => x.id)
   searchInProgress.value = false
 }
 
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 5b67d9945..8844375dd 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -18,6 +18,15 @@ import type { ComfyExtension } from '@/types/comfy'
 import { buildTree } from '@/utils/treeUtil'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 
+export const getSettingInfo = (setting: SettingParams) => {
+  const parts = setting.category || setting.id.split('.')
+  return {
+    category: parts[0],
+    subCategory: parts[1],
+    name: parts.slice(2).join('.')
+  }
+}
+
 export interface SettingTreeNode extends TreeNode {
   data?: SettingParams
 }

From 5783ea097029bff4e2003f6bf42d06e1ecbe7f53 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Fri, 27 Dec 2024 17:44:46 -0500
Subject: [PATCH 2/3] Restore default category

---
 .../dialog/content/SettingDialogContent.vue   | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
index 24ba59834..d93ab1fe3 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/components/dialog/content/SettingDialogContent.vue
@@ -6,6 +6,7 @@
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         :placeholder="$t('g.searchSettings') + '...'"
+        :debounceTime="100"
       />
       <Listbox
         v-model="activeCategory"
@@ -67,7 +68,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, defineAsyncComponent } from 'vue'
+import {
+  ref,
+  computed,
+  onMounted,
+  watch,
+  defineAsyncComponent
+} from 'vue'
 import Listbox from 'primevue/listbox'
 import Tabs from 'primevue/tabs'
 import TabPanels from 'primevue/tabpanels'
@@ -160,17 +167,14 @@ const categories = computed<SettingTreeNode[]>(() =>
 )
 
 const activeCategory = ref<SettingTreeNode | null>(null)
-watch(activeCategory, (newCategory, oldCategory) => {
-  if (newCategory === null) {
-    activeCategory.value = oldCategory
-  }
-})
-
-onMounted(() => {
-  activeCategory.value = props.defaultPanel
+const getDefaultCategory = () => {
+  return props.defaultPanel
     ? categories.value.find((x) => x.key === props.defaultPanel) ??
-      categories.value[0]
+        categories.value[0]
     : categories.value[0]
+}
+onMounted(() => {
+  activeCategory.value = getDefaultCategory()
 })
 
 const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
@@ -219,6 +223,7 @@ const searchResultsCategories = computed<Set<string>>(() => {
 const handleSearch = (query: string) => {
   if (!query) {
     filteredSettingIds.value = []
+    activeCategory.value = getDefaultCategory()
     return
   }
 
@@ -240,6 +245,7 @@ const handleSearch = (query: string) => {
 
   filteredSettingIds.value = filteredSettings.map((x) => x.id)
   searchInProgress.value = false
+  activeCategory.value = null
 }
 
 const inSearch = computed(

From 1329a3a73c30290c7b9b212c018d3b4619e62873 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Fri, 27 Dec 2024 17:57:35 -0500
Subject: [PATCH 3/3] Filter search result by category

---
 .../dialog/content/SettingDialogContent.vue   | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
index d93ab1fe3..2e0c93b26 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/components/dialog/content/SettingDialogContent.vue
@@ -6,7 +6,6 @@
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         :placeholder="$t('g.searchSettings') + '...'"
-        :debounceTime="100"
       />
       <Listbox
         v-model="activeCategory"
@@ -68,13 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  onMounted,
-  watch,
-  defineAsyncComponent
-} from 'vue'
+import { ref, computed, onMounted, watch, defineAsyncComponent } from 'vue'
 import Listbox from 'primevue/listbox'
 import Tabs from 'primevue/tabs'
 import TabPanels from 'primevue/tabpanels'
@@ -196,11 +189,18 @@ const searchResults = computed<ISettingGroup[]>(() => {
 
   filteredSettingIds.value.forEach((id) => {
     const setting = settingStore.settings[id]
-    const groupLabel = getSettingInfo(setting).subCategory
-    if (!groupedSettings[groupLabel]) {
-      groupedSettings[groupLabel] = []
+    const info = getSettingInfo(setting)
+    const groupLabel = info.subCategory
+
+    if (
+      activeCategory.value === null ||
+      activeCategory.value.label === info.category
+    ) {
+      if (!groupedSettings[groupLabel]) {
+        groupedSettings[groupLabel] = []
+      }
+      groupedSettings[groupLabel].push(setting)
     }
-    groupedSettings[groupLabel].push(setting)
   })
 
   return Object.entries(groupedSettings).map(([label, settings]) => ({
@@ -223,7 +223,7 @@ const searchResultsCategories = computed<Set<string>>(() => {
 const handleSearch = (query: string) => {
   if (!query) {
     filteredSettingIds.value = []
-    activeCategory.value = getDefaultCategory()
+    activeCategory.value ??= getDefaultCategory()
     return
   }
 
@@ -254,6 +254,13 @@ const inSearch = computed(
 const tabValue = computed(() =>
   inSearch.value ? 'Search Results' : activeCategory.value?.label
 )
+// Don't allow null category to be set outside of search.
+// In search mode, the active category can be null to show all search results.
+watch(activeCategory, (_, oldValue) => {
+  if (!tabValue.value) {
+    activeCategory.value = oldValue
+  }
+})
 </script>
 
 <style>