Fix: Search Box Implementation for keyboard shortcut (#5140)

* refactor: Move searchbox preference to the searchboxstore

* fix: Ensure that the search box uses the preferred implementation.

* polish: Open at current mouse location.

* [test] add basic unit tests for searchBoxStore

* types/testing: Tweak the types and setup for the searchBoxStore tests

---------

Co-authored-by: Arjan Singh <arjan@comfy.org>

tests-ui/tests/store/searchBoxStore.test.ts

@@ -0,0 +1,137 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type NodeSearchBoxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
+import type { useSettingStore } from '@/stores/settingStore'
+import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
+
+// Mock dependencies
+vi.mock('@vueuse/core', () => ({
+  useMouse: vi.fn(() => ({
+    x: { value: 100 },
+    y: { value: 200 }
+  }))
+}))
+
+const mockSettingStore = createMockSettingStore()
+vi.mock('@/stores/settingStore', () => ({
+  useSettingStore: vi.fn(() => mockSettingStore)
+}))
+
+function createMockPopover(): InstanceType<typeof NodeSearchBoxPopover> {
+  return { showSearchBox: vi.fn() } satisfies Partial<
+    InstanceType<typeof NodeSearchBoxPopover>
+  > as unknown as InstanceType<typeof NodeSearchBoxPopover>
+}
+
+function createMockSettingStore(): ReturnType<typeof useSettingStore> {
+  return {
+    get: vi.fn()
+  } satisfies Partial<
+    ReturnType<typeof useSettingStore>
+  > as unknown as ReturnType<typeof useSettingStore>
+}
+
+describe('useSearchBoxStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+
+    vi.restoreAllMocks()
+  })
+
+  describe('when user has new search box enabled', () => {
+    beforeEach(() => {
+      vi.mocked(mockSettingStore.get).mockReturnValue('default')
+    })
+
+    it('should show new search box is enabled', () => {
+      const store = useSearchBoxStore()
+      expect(store.newSearchBoxEnabled).toBe(true)
+    })
+
+    it('should toggle search box visibility when user presses shortcut', () => {
+      const store = useSearchBoxStore()
+
+      expect(store.visible).toBe(false)
+
+      store.toggleVisible()
+      expect(store.visible).toBe(true)
+
+      store.toggleVisible()
+      expect(store.visible).toBe(false)
+    })
+  })
+
+  describe('when user has legacy search box enabled', () => {
+    beforeEach(() => {
+      vi.mocked(mockSettingStore.get).mockReturnValue('legacy')
+    })
+
+    it('should show new search box is disabled', () => {
+      const store = useSearchBoxStore()
+      expect(store.newSearchBoxEnabled).toBe(false)
+    })
+
+    it('should open legacy search box at mouse position when user presses shortcut', () => {
+      const store = useSearchBoxStore()
+      const mockPopover = createMockPopover()
+      store.setPopoverRef(mockPopover)
+
+      expect(vi.mocked(store.visible)).toBe(false)
+
+      store.toggleVisible()
+
+      expect(vi.mocked(store.visible)).toBe(false) // Doesn't become visible in legacy mode.
+
+      expect(vi.mocked(mockPopover.showSearchBox)).toHaveBeenCalledWith(
+        expect.objectContaining({
+          clientX: 100,
+          clientY: 200
+        })
+      )
+    })
+
+    it('should do nothing when user presses shortcut but popover is not ready', () => {
+      const store = useSearchBoxStore()
+      store.setPopoverRef(null)
+
+      store.toggleVisible()
+
+      expect(store.visible).toBe(false)
+    })
+  })
+
+  describe('when user configures popover reference', () => {
+    beforeEach(() => {
+      vi.mocked(mockSettingStore.get).mockReturnValue('legacy')
+    })
+
+    it('should enable legacy search when popover is set', () => {
+      const store = useSearchBoxStore()
+      const mockPopover = createMockPopover()
+      store.setPopoverRef(mockPopover)
+
+      store.toggleVisible()
+
+      expect(vi.mocked(mockPopover.showSearchBox)).toHaveBeenCalled()
+    })
+
+    it('should disable legacy search when popover is cleared', () => {
+      const store = useSearchBoxStore()
+      const mockPopover = createMockPopover()
+      store.setPopoverRef(mockPopover)
+      store.setPopoverRef(null)
+
+      store.toggleVisible()
+
+      expect(vi.mocked(mockPopover.showSearchBox)).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('when user first loads the application', () => {
+    it('should have search box hidden by default', () => {
+      const store = useSearchBoxStore()
+      expect(store.visible).toBe(false)
+    })
+  })
+})