From 9202b80ee25925ff4981518227f9fa58cfcadf6c Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Tue, 30 Dec 2025 22:04:37 -0800
Subject: [PATCH] Inset border, default dropIndicator for LoadImage

---
 .../extensions/linearMode/DropZone.vue        |  9 +++++++--
 src/views/LinearView.vue                      | 20 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/renderer/extensions/linearMode/DropZone.vue b/src/renderer/extensions/linearMode/DropZone.vue
index 8bcf93ee7..771481fa3 100644
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -14,7 +14,12 @@ const canAcceptDrop = ref(false)
 <template>
   <drop-wrapper
     v-if="onDragOver && onDragDrop"
-    :class="cn(canAcceptDrop && 'ring-1 ring-primary-500 bg-primary-500/10')"
+    :class="
+      cn(
+        'rounded-lg ring-inset ring-primary-500',
+        canAcceptDrop && 'ring-4 bg-primary-500/10'
+      )
+    "
     @dragover.prevent="(e: DragEvent) => (canAcceptDrop = onDragOver!(e))"
     @dragleave="canAcceptDrop = false"
     @drop.stop.prevent="
@@ -27,7 +32,7 @@ const canAcceptDrop = ref(false)
     <slot />
     <div
       v-if="dropIndicator"
-      class="flex flex-col items-center align-center border-dashed rounded-lg border grow-1 w-full border-border-subtle my-3"
+      class="flex flex-col items-center align-center border-dashed rounded-lg border grow-1 w-full border-border-subtle my-3 py-2"
     >
       <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
       <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 04d6b29f4..73ede4503 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -77,17 +77,26 @@ const nodeDatas = computed(() => {
   function nodeToNodeData(node: LGraphNode) {
     const mapper = safeWidgetMapper(node, new Map())
     const widgets = node.widgets?.map(mapper) ?? []
+    const dropIndicator =
+      node.type !== 'LoadImage'
+        ? undefined
+        : {
+            iconClass: 'icon-[lucide--image]',
+            label: t('Click to browse or drag an image')
+          }
     //Only widgets is actually used
     return {
+      executing: false,
       id: `${node.id}`,
-      title: node.title,
-      type: node.type,
       mode: 0,
       selected: false,
-      executing: false,
+      title: node.title,
+      type: node.type,
       widgets,
-      onDragOver: node.onDragOver,
-      onDragDrop: node.onDragDrop
+
+      dropIndicator,
+      onDragDrop: node.onDragDrop,
+      onDragOver: node.onDragOver
     }
   }
   return graphNodes.value
@@ -581,6 +590,7 @@ onKeyStroke('ArrowUp', gotoPreviousOutput)
               :key="nodeData.id"
               :on-drag-over="nodeData.onDragOver"
               :on-drag-drop="nodeData.onDragDrop"
+              :drop-indicator="nodeData.dropIndicator"
             >
               <NodeWidgets
                 :node-data