Enable category-based narrowing and reset to default on search clear (#2071)

Co-authored-by: huchenlei <huchenlei@proton.me>

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,19 +160,14 @@ const categories = computed<SettingTreeNode[]>(() =>
 )
 
 const activeCategory = ref<SettingTreeNode | null>(null)
-const searchResults = ref<ISettingGroup[]>([])
-
-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[] => {
@@ -178,12 +180,50 @@ 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 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)
+    }
+  })
+
+  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 = []
+    activeCategory.value ??= getDefaultCategory()
     return
   }
 
@@ -203,22 +243,9 @@ 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
+  activeCategory.value = null
 }
 
 const inSearch = computed(
@@ -227,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>

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
 }