Manage searchbox imp setting in Vue app (#282)

* Manage searchbox setting in vue

* nit

Author: huchenlei

src/components/graph/GraphCanvas.vue

@@ -14,7 +14,7 @@
 import SideToolBar from '@/components/sidebar/SideToolBar.vue'
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import NodeSearchboxPopover from '@/components/NodeSearchBoxPopover.vue'
-import { ref, onMounted, computed, onUnmounted } from 'vue'
+import { ref, computed, onUnmounted, watch, onMounted } from 'vue'
 import { app as comfyApp } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
@@ -32,6 +32,9 @@ const betaMenuEnabled = computed(
 const nodeSearchEnabled = computed<boolean>(
   () => settingStore.get('Comfy.NodeSearchBoxImpl') === 'default'
 )
+watch(nodeSearchEnabled, (newVal) => {
+  comfyApp.canvas.allow_searchbox = !newVal
+})
 
 let dropTargetCleanup = () => {}
 
@@ -40,6 +43,7 @@ onMounted(async () => {
 
   workspaceStore.spinner = true
   await comfyApp.setup(canvasRef.value)
+  comfyApp.canvas.allow_searchbox = !nodeSearchEnabled.value
   workspaceStore.spinner = false
 
   window['app'] = comfyApp

src/scripts/app.ts

@@ -1881,7 +1881,6 @@ export class ComfyApp {
     this.#addAfterConfigureHandler()
 
     this.canvas = new LGraphCanvas(canvasEl, this.graph)
-    this.ui.settings.refreshSetting('Comfy.NodeSearchBoxImpl')
     this.ctx = canvasEl.getContext('2d')
 
     LiteGraph.release_link_on_empty_shows_menu = true

src/scripts/ui.ts

@@ -425,14 +425,7 @@ export class ComfyUI {
       name: 'Node Search box implementation',
       type: 'combo',
       options: ['default', 'litegraph (legacy)'],
-      defaultValue: 'default',
-      onChange: (value?: string) => {
-        if (!app.canvas) return
-
-        value = value || 'default'
-        const useLitegraphSearch = value === 'litegraph (legacy)'
-        app.canvas.allow_searchbox = useLitegraphSearch
-      }
+      defaultValue: 'default'
     })
 
     const fileInput = $el('input', {