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>

src/components/searchbox/v2/NodeSearchInput.test.ts

@@ -0,0 +1,161 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import NodeSearchInput from '@/components/searchbox/v2/NodeSearchInput.vue'
+import {
+  setupTestPinia,
+  testI18n
+} from '@/components/searchbox/v2/__test__/testUtils'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  getLinkTypeColor: vi.fn((type: string) =>
+    type === 'IMAGE' ? '#64b5f6' : undefined
+  )
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn(),
+    set: vi.fn()
+  }))
+}))
+
+function createFilter(
+  id: string,
+  value: string
+): FuseFilterWithValue<ComfyNodeDefImpl, string> {
+  return {
+    filterDef: {
+      id,
+      matches: vi.fn(() => true)
+    } as unknown as FuseFilter<ComfyNodeDefImpl, string>,
+    value
+  }
+}
+
+function createActiveFilter(label: string): FilterChip {
+  return {
+    key: label.toLowerCase(),
+    label,
+    filter: {
+      id: label.toLowerCase(),
+      matches: vi.fn(() => true)
+    } as unknown as FuseFilter<ComfyNodeDefImpl, string>
+  }
+}
+
+describe('NodeSearchInput', () => {
+  beforeEach(() => {
+    setupTestPinia()
+    vi.restoreAllMocks()
+  })
+
+  function createWrapper(
+    props: Partial<{
+      filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
+      activeFilter: FilterChip | null
+      searchQuery: string
+      filterQuery: string
+    }> = {}
+  ) {
+    return mount(NodeSearchInput, {
+      props: {
+        filters: [],
+        activeFilter: null,
+        searchQuery: '',
+        filterQuery: '',
+        ...props
+      },
+      global: { plugins: [testI18n] }
+    })
+  }
+
+  it('should route input to searchQuery when no active filter', async () => {
+    const wrapper = createWrapper()
+    await wrapper.find('input').setValue('test search')
+
+    expect(wrapper.emitted('update:searchQuery')![0]).toEqual(['test search'])
+  })
+
+  it('should route input to filterQuery when active filter is set', async () => {
+    const wrapper = createWrapper({
+      activeFilter: createActiveFilter('Input')
+    })
+    await wrapper.find('input').setValue('IMAGE')
+
+    expect(wrapper.emitted('update:filterQuery')![0]).toEqual(['IMAGE'])
+    expect(wrapper.emitted('update:searchQuery')).toBeUndefined()
+  })
+
+  it('should show filter label placeholder when active filter is set', () => {
+    const wrapper = createWrapper({
+      activeFilter: createActiveFilter('Input')
+    })
+
+    expect(
+      (wrapper.find('input').element as HTMLInputElement).placeholder
+    ).toContain('input')
+  })
+
+  it('should show add node placeholder when no active filter', () => {
+    const wrapper = createWrapper()
+
+    expect(
+      (wrapper.find('input').element as HTMLInputElement).placeholder
+    ).toContain('Add a node')
+  })
+
+  it('should hide filter chips when active filter is set', () => {
+    const wrapper = createWrapper({
+      filters: [createFilter('input', 'IMAGE')],
+      activeFilter: createActiveFilter('Input')
+    })
+
+    expect(wrapper.findAll('[data-testid="filter-chip"]')).toHaveLength(0)
+  })
+
+  it('should show filter chips when no active filter', () => {
+    const wrapper = createWrapper({
+      filters: [createFilter('input', 'IMAGE')]
+    })
+
+    expect(wrapper.findAll('[data-testid="filter-chip"]')).toHaveLength(1)
+  })
+
+  it('should emit cancelFilter when cancel button is clicked', async () => {
+    const wrapper = createWrapper({
+      activeFilter: createActiveFilter('Input')
+    })
+
+    await wrapper.find('[data-testid="cancel-filter"]').trigger('click')
+
+    expect(wrapper.emitted('cancelFilter')).toHaveLength(1)
+  })
+
+  it('should emit selectCurrent on Enter', async () => {
+    const wrapper = createWrapper()
+
+    await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('selectCurrent')).toHaveLength(1)
+  })
+
+  it('should emit navigateDown on ArrowDown', async () => {
+    const wrapper = createWrapper()
+
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowDown' })
+
+    expect(wrapper.emitted('navigateDown')).toHaveLength(1)
+  })
+
+  it('should emit navigateUp on ArrowUp', async () => {
+    const wrapper = createWrapper()
+
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+
+    expect(wrapper.emitted('navigateUp')).toHaveLength(1)
+  })
+})