fix: vue nodes preview node to match lg and add node when clicked (#7146)

## Summary

Make the preview node match recent LGraphNode.vue look. Also add support
to click from search.

## Changes

- **What**: NodeSearchBox.vue, LGraphNodePreview.vue, nodeDefStore.ts

## Screenshots (if applicable)


https://github.com/user-attachments/assets/ed46d641-66bf-4e23-a207-9102609a7a4a


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7146-fix-vue-nodes-preview-node-to-match-lg-and-add-node-when-clicked-2bf6d73d3650814383b2c786e2ab4d02)
by [Unito](https://www.unito.io)

src/components/searchbox/NodeSearchBox.vue

@@ -3,11 +3,11 @@
     class="comfy-vue-node-search-container flex w-full min-w-96 items-center justify-center"
   >
     <div
-      v-if="enableNodePreview"
-      class="comfy-vue-node-preview-container absolute top-[50px] left-[-350px]"
+      v-if="enableNodePreview && hoveredSuggestion"
+      class="comfy-vue-node-preview-container absolute top-[50px] left-[-375px] z-50 cursor-pointer"
+      @mousedown.stop="onAddNode(hoveredSuggestion!)"
     >
       <NodePreview
-        v-if="hoveredSuggestion"
         :key="hoveredSuggestion?.name || ''"
         :node-def="hoveredSuggestion"
       />

src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue

@@ -1,23 +1,24 @@
 <template>
-  <div class="scale-75">
+  <div
+    :data-node-id="nodeData.id"
+    class="bg-component-node-background lg-node absolute pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border-1 border-solid outline-transparent outline-2 border-node-stroke"
+  >
     <div
-      class="lg-node pointer-events-none absolute rounded-2xl border border-solid border-node-component-border bg-node-component-surface outline-2 -outline-offset-2 outline-transparent"
+      class="flex flex-col justify-center items-center relative pointer-events-none"
     >
       <NodeHeader :node-data="nodeData" />
+    </div>
+    <div
+      class="flex flex-1 flex-col gap-1 pb-2 pointer-events-none"
+      :data-testid="`node-body-${nodeData.id}`"
+    >
+      <NodeSlots :node-data="nodeData" />
 
-      <div class="mx-0 mb-4 h-px w-full bg-node-component-border" />
-
-      <div class="flex flex-col gap-4 pb-4">
-        <NodeSlots :node-data="nodeData" />
-
-        <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
-
-        <NodeContent
-          v-if="hasCustomContent"
-          :node-data="nodeData"
-          :image-urls="nodeImageUrls"
-        />
-      </div>
+      <NodeWidgets
+        v-if="nodeData.widgets?.length"
+        :node-data="nodeData"
+        class="pointer-events-none"
+      />
     </div>
   </div>
 </template>
@@ -31,7 +32,6 @@ import type {
   INodeOutputSlot
 } from '@/lib/litegraph/src/interfaces'
 import { RenderShape } from '@/lib/litegraph/src/litegraph'
-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'
@@ -102,12 +102,10 @@ const nodeData = computed<VueNodeData>(() => {
     widgets,
     inputs,
     outputs,
+
     flags: {
       collapsed: false
     }
   }
 })
-
-const hasCustomContent = false
-const nodeImageUrls = ['']
 </script>

src/stores/nodeDefStore.ts

@@ -198,7 +198,10 @@ export const SYSTEM_NODE_DEFS: Record<string, ComfyNodeDefV1> = {
     name: 'Note',
     display_name: 'Note',
     category: 'utils',
-    input: { required: {}, optional: {} },
+    input: {
+      required: { text: ['STRING', { multiline: true }] },
+      optional: {}
+    },
     output: [],
     output_name: [],
     output_is_list: [],
@@ -210,7 +213,10 @@ export const SYSTEM_NODE_DEFS: Record<string, ComfyNodeDefV1> = {
     name: 'MarkdownNote',
     display_name: 'Markdown Note',
     category: 'utils',
-    input: { required: {}, optional: {} },
+    input: {
+      required: { text: ['STRING', { multiline: true }] },
+      optional: {}
+    },
     output: [],
     output_name: [],
     output_is_list: [],