From 10424bdd00acb64fa5a6123f3dedfba89496a488 Mon Sep 17 00:00:00 2001
From: JakeSchroeder <jake@axiom.co>
Date: Tue, 23 Sep 2025 17:59:26 -0700
Subject: [PATCH] feat: vue node preivew when searchnig or using sidebar
 workbench

---
 src/components/node/NodePreview.vue           |   8 +-
 .../vueNodes/components/LGraphNodePreview.vue | 122 ++++++++++++++++++
 2 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue

diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index f55c93436..4fffeeaf8 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -1,9 +1,9 @@
 <!-- Reference:
 https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c683087a3e168db/app/js/functions/sb_fn.js#L149
 -->
-
 <template>
-  <div class="_sb_node_preview">
+  <LGraphNodePreview v-if="shouldRenderVueNodes" :node-def="nodeDef" />
+  <div v-else class="_sb_node_preview">
     <div class="_sb_table">
       <div
         class="node_header text-ellipsis mr-4"
@@ -85,6 +85,8 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 import _ from 'es-toolkit/compat'
 import { computed } from 'vue'
 
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
+import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -94,6 +96,8 @@ const { nodeDef } = defineProps<{
   nodeDef: ComfyNodeDefV2
 }>()
 
+const { shouldRenderVueNodes } = useVueFeatureFlags()
+
 const colorPaletteStore = useColorPaletteStore()
 const litegraphColors = computed(
   () => colorPaletteStore.completedActivePalette.colors.litegraph_base
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
new file mode 100644
index 000000000..ce59aabf1
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="scale-75">
+    <div
+      class="bg-white dark-theme:bg-charcoal-800 lg-node absolute rounded-2xl border border-solid border-sand-100 dark-theme:border-charcoal-600 outline-transparent -outline-offset-2 outline-2 pointer-events-none"
+    >
+      <div class="flex items-center">
+        <NodeHeader :node-data="nodeData" :readonly="readonly" />
+      </div>
+
+      <div class="mb-4 relative">
+        <div class="bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full" />
+      </div>
+
+      <div class="flex flex-col gap-4 pb-4">
+        <NodeSlots
+          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length]"
+          :node-data="nodeData"
+          :readonly="readonly"
+        />
+
+        <NodeWidgets
+          v-if="nodeData.widgets?.length"
+          v-memo="[nodeData.widgets?.length]"
+          :node-data="nodeData"
+          :readonly="readonly"
+        />
+
+        <NodeContent
+          v-if="hasCustomContent"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :image-urls="nodeImageUrls"
+        />
+        <!-- Live preview image -->
+        <!-- <div v-if="shouldShowPreviewImg" class="px-4">
+          <img
+            :src="latestPreviewUrl"
+            alt="preview"
+            class="w-full max-h-64 object-contain"
+          />
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import NodeContent from '@/renderer/extensions/vueNodes/components/NodeContent.vue'
+import NodeHeader from '@/renderer/extensions/vueNodes/components/NodeHeader.vue'
+import NodeSlots from '@/renderer/extensions/vueNodes/components/NodeSlots.vue'
+import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
+import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { useWidgetStore } from '@/stores/widgetStore'
+
+const { nodeDef } = defineProps<{
+  nodeDef: ComfyNodeDefV2
+}>()
+
+const widgetStore = useWidgetStore()
+
+// Convert nodeDef into VueNodeData
+const nodeData = computed<VueNodeData>(() => {
+  // Convert inputs to widgets (those that have widget constructors)
+  const widgets = Object.entries(nodeDef.inputs || {})
+    .filter(([_, input]) => widgetStore.inputIsWidget(input))
+    .map(([name, input]) => ({
+      name,
+      type: input.widgetType || input.type,
+      value:
+        input.default !== undefined
+          ? input.default
+          : input.type === 'COMBO' &&
+              Array.isArray(input.options) &&
+              input.options.length > 0
+            ? input.options[0]
+            : undefined,
+      options: {
+        ...input,
+        hidden: input.hidden,
+        advanced: input.advanced,
+        values: input.type === 'COMBO' ? input.options : undefined // For combo widgets
+      }
+    }))
+
+  // Filter non-widget inputs for slots
+  const inputs = Object.entries(nodeDef.inputs || {})
+    .filter(([_, input]) => !widgetStore.inputIsWidget(input))
+    .map(([name, input]) => ({
+      name,
+      type: input.type,
+      shape: input.isOptional ? 'HollowCircle' : undefined
+    }))
+
+  return {
+    id: `preview-${nodeDef.name}`,
+    title: nodeDef.display_name || nodeDef.name,
+    type: nodeDef.name,
+    mode: 0, // Normal mode
+    selected: false,
+    executing: false,
+    widgets,
+    inputs,
+    outputs: nodeDef.outputs || [],
+    flags: {
+      collapsed: false
+    }
+  }
+})
+
+const readonly = true
+
+const hasCustomContent = computed(() => {
+  return false
+})
+
+const nodeImageUrls = computed(() => {
+  return []
+})
+</script>