V2 Node Search (+ hidden Node Library changes) (#8987)

## Summary Redesigned node search with categories ## Changes - **What**: Adds a v2 search component, leaving the existing implementation untouched - It also brings onboard the incomplete node library & preview changes, disabled and behind a hidden setting - **Breaking**: Changes the 'default' value of the node search setting to v2, adding v1 (legacy) as an option ## Screenshots (if applicable) https://github.com/user-attachments/assets/2ab797df-58f0-48e8-8b20-2a1809e3735f ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8987-V2-Node-Search-hidden-Node-Library-changes-30c6d73d36508160902bcb92553f147c) by [Unito](https://www.unito.io) --------- Co-authored-by: Yourz <crazilou@vip.qq.com> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org>
2026-05-05 21:54:50 +00:00 · 2026-02-20 09:10:03 +00:00
parent 8f5cdead73
commit 6902e38e6a
183 changed files with 7972 additions and 127 deletions
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="flex min-h-0 flex-col overflow-y-auto py-2.5">
+    <!-- Preset categories -->
+    <div class="flex flex-col px-1">
+      <button
+        v-for="preset in topCategories"
+        :key="preset.id"
+        type="button"
+        :data-testid="`category-${preset.id}`"
+        :aria-current="selectedCategory === preset.id || undefined"
+        :class="categoryBtnClass(preset.id)"
+        @click="selectCategory(preset.id)"
+      >
+        {{ preset.label }}
+      </button>
+    </div>
+
+    <!-- Source categories -->
+    <div class="my-2 flex flex-col border-y border-border-subtle px-1 py-2">
+      <button
+        v-for="preset in sourceCategories"
+        :key="preset.id"
+        type="button"
+        :data-testid="`category-${preset.id}`"
+        :aria-current="selectedCategory === preset.id || undefined"
+        :class="categoryBtnClass(preset.id)"
+        @click="selectCategory(preset.id)"
+      >
+        {{ preset.label }}
+      </button>
+    </div>
+
+    <!-- Category tree -->
+    <div class="flex flex-col px-1">
+      <NodeSearchCategoryTreeNode
+        v-for="category in categoryTree"
+        :key="category.key"
+        :node="category"
+        :selected-category="selectedCategory"
+        :selected-collapsed="selectedCollapsed"
+        @select="selectCategory"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import NodeSearchCategoryTreeNode, {
+  CATEGORY_SELECTED_CLASS,
+  CATEGORY_UNSELECTED_CLASS
+} from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
+import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
+import { nodeOrganizationService } from '@/services/nodeOrganizationService'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+import type { TreeNode } from '@/types/treeExplorerTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+const selectedCategory = defineModel<string>('selectedCategory', {
+  required: true
+})
+
+const { t } = useI18n()
+const nodeDefStore = useNodeDefStore()
+
+const topCategories = computed(() => [
+  { id: 'most-relevant', label: t('g.mostRelevant') },
+  { id: 'favorites', label: t('g.favorites') }
+])
+
+const hasEssentialNodes = computed(() =>
+  nodeDefStore.visibleNodeDefs.some(
+    (n) => n.nodeSource.type === NodeSourceType.Essentials
+  )
+)
+
+const sourceCategories = computed(() => {
+  const categories = []
+  if (hasEssentialNodes.value) {
+    categories.push({ id: 'essentials', label: t('g.essentials') })
+  }
+  categories.push({ id: 'custom', label: t('g.custom') })
+  return categories
+})
+
+const categoryTree = computed<CategoryNode[]>(() => {
+  const tree = nodeOrganizationService.organizeNodes(
+    nodeDefStore.visibleNodeDefs,
+    { groupBy: 'category' }
+  )
+
+  const stripRootPrefix = (key: string) => key.replace(/^root\//, '')
+
+  function mapNode(node: TreeNode): CategoryNode {
+    const children = node.children
+      ?.filter((child): child is TreeNode => !child.leaf)
+      .map(mapNode)
+    return {
+      key: stripRootPrefix(node.key as string),
+      label: node.label,
+      ...(children?.length ? { children } : {})
+    }
+  }
+
+  return (tree.children ?? [])
+    .filter((node): node is TreeNode => !node.leaf)
+    .map(mapNode)
+})
+
+function categoryBtnClass(id: string) {
+  return cn(
+    'cursor-pointer border-none bg-transparent rounded px-3 py-2.5 text-left text-sm transition-colors',
+    selectedCategory.value === id
+      ? CATEGORY_SELECTED_CLASS
+      : CATEGORY_UNSELECTED_CLASS
+  )
+}
+
+const selectedCollapsed = ref(false)
+
+function selectCategory(categoryId: string) {
+  if (selectedCategory.value === categoryId) {
+    selectedCollapsed.value = !selectedCollapsed.value
+  } else {
+    selectedCollapsed.value = false
+    selectedCategory.value = categoryId
+  }
+}
+</script>