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>

src/stores/workspace/searchBoxStore.ts

@@ -1,14 +1,50 @@
+import { useMouse } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
+
+import type NodeSearchBoxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/stores/settingStore'
 
 export const useSearchBoxStore = defineStore('searchBox', () => {
+  const settingStore = useSettingStore()
+  const { x, y } = useMouse()
+
+  const newSearchBoxEnabled = computed(
+    () => settingStore.get('Comfy.NodeSearchBoxImpl') === 'default'
+  )
+
+  const popoverRef = shallowRef<InstanceType<
+    typeof NodeSearchBoxPopover
+  > | null>(null)
+
+  function setPopoverRef(
+    popover: InstanceType<typeof NodeSearchBoxPopover> | null
+  ) {
+    popoverRef.value = popover
+  }
+
   const visible = ref(false)
   function toggleVisible() {
-    visible.value = !visible.value
+    if (newSearchBoxEnabled.value) {
+      visible.value = !visible.value
+      return
+    }
+    if (!popoverRef.value) return
+    popoverRef.value.showSearchBox(
+      new MouseEvent('click', {
+        clientX: x.value,
+        clientY: y.value,
+        // @ts-expect-error layerY is a nonstandard property
+        layerY: y.value
+      }) as unknown as CanvasPointerEvent
+    )
   }
 
   return {
-    visible,
-    toggleVisible
+    newSearchBoxEnabled,
+    setPopoverRef,
+    toggleVisible,
+    visible
   }
 })