feat(settings): improve search to include nav items and show all results (#9195)

## Summary
- Settings search now matches sidebar navigation items (Keybinding,
About, Extension, etc.) and navigates to the corresponding panel
- Search results show all matching settings across all categories
instead of filtering to only the first matching category
- Search result group headers display parent category prefix (e.g.
"LiteGraph › Node") for clarity

## Test plan
- [x] Search "Keybinding" → sidebar highlights and navigates to
Keybinding panel
- [x] Search "badge" → shows all 4 badge settings (3 LiteGraph + 1
Comfy)
- [x] Search "canvas" → shows results from all categories
- [x] Clear search → returns to default category
- [x] Unit tests pass (`pnpm test:unit`)
<img width="1425" height="682" alt="스크린샷 2026-02-25 오후 3 01 05"
src="https://github.com/user-attachments/assets/956c4635-b140-4dff-8145-db312d295160"
/>



🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9195-feat-settings-improve-search-to-include-nav-items-and-show-all-results-3126d73d3650814dbf3ce1d59ad962cf)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>

src/platform/settings/components/SettingDialog.vue

@@ -44,17 +44,7 @@
     <template #header />
 
     <template #content>
-      <template v-if="inSearch">
-        <SettingsPanel :setting-groups="searchResults" />
-      </template>
-      <template v-else-if="activeSettingCategory">
-        <CurrentUserMessage v-if="activeSettingCategory.label === 'Comfy'" />
-        <ColorPaletteMessage
-          v-if="activeSettingCategory.label === 'Appearance'"
-        />
-        <SettingsPanel :setting-groups="sortedGroups(activeSettingCategory)" />
-      </template>
-      <template v-else-if="activePanel">
+      <template v-if="activePanel">
         <Suspense>
           <component :is="activePanel.component" v-bind="activePanel.props" />
           <template #fallback>
@@ -64,6 +54,16 @@
           </template>
         </Suspense>
       </template>
+      <template v-else-if="inSearch">
+        <SettingsPanel :setting-groups="searchResults" />
+      </template>
+      <template v-else-if="activeSettingCategory">
+        <CurrentUserMessage v-if="activeSettingCategory.label === 'Comfy'" />
+        <ColorPaletteMessage
+          v-if="activeSettingCategory.label === 'Appearance'"
+        />
+        <SettingsPanel :setting-groups="sortedGroups(activeSettingCategory)" />
+      </template>
     </template>
   </BaseModalLayout>
 </template>
@@ -110,6 +110,7 @@ const {
   searchQuery,
   inSearch,
   searchResultsCategories,
+  matchedNavItemKeys,
   handleSearch: handleSearchBase,
   getSearchResults
 } = useSettingSearch()
@@ -119,16 +120,29 @@ const authActions = useFirebaseAuthActions()
 const navRef = ref<HTMLElement | null>(null)
 const activeCategoryKey = ref<string | null>(defaultCategory.value?.key ?? null)
 
-watch(searchResultsCategories, (categories) => {
-  if (!inSearch.value || categories.size === 0) return
-  const firstMatch = navGroups.value
-    .flatMap((g) => g.items)
-    .find((item) => {
-      const node = findCategoryByKey(item.id)
-      return node && categories.has(node.label)
-    })
-  activeCategoryKey.value = firstMatch?.id ?? null
-})
+const searchableNavItems = computed(() =>
+  navGroups.value.flatMap((g) =>
+    g.items.map((item) => ({
+      key: item.id,
+      label: item.label
+    }))
+  )
+)
+
+watch(
+  [searchResultsCategories, matchedNavItemKeys],
+  ([categories, navKeys]) => {
+    if (!inSearch.value || (categories.size === 0 && navKeys.size === 0)) return
+    const firstMatch = navGroups.value
+      .flatMap((g) => g.items)
+      .find((item) => {
+        if (navKeys.has(item.id)) return true
+        const node = findCategoryByKey(item.id)
+        return node && categories.has(node.label)
+      })
+    activeCategoryKey.value = firstMatch?.id ?? null
+  }
+)
 
 const activeSettingCategory = computed<SettingTreeNode | null>(() => {
   if (!activeCategoryKey.value) return null
@@ -163,7 +177,7 @@ function sortedGroups(category: SettingTreeNode): ISettingGroup[] {
 }
 
 function handleSearch(query: string) {
-  handleSearchBase(query.trim())
+  handleSearchBase(query.trim(), searchableNavItems.value)
   if (query) {
     activeCategoryKey.value = null
   } else if (!activeCategoryKey.value) {
@@ -175,12 +189,7 @@ function onNavItemClick(id: string) {
   activeCategoryKey.value = id
 }
 
-const searchResults = computed<ISettingGroup[]>(() => {
-  const category = activeCategoryKey.value
-    ? findCategoryByKey(activeCategoryKey.value)
-    : null
-  return getSearchResults(category)
-})
+const searchResults = computed<ISettingGroup[]>(() => getSearchResults(null))
 
 // Scroll to and highlight the target setting once the correct category renders.
 if (scrollToSettingId) {