Widget border cleanup

src/renderer/extensions/linearMode/DropZone.vue

@@ -16,38 +16,36 @@ defineProps<{
 const canAcceptDrop = ref(false)
 </script>
 <template>
-  <drop-wrapper v-if="onDragOver && onDragDrop">
+  <drop-wrapper
+    v-if="onDragOver && onDragDrop"
+    :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="
+      (e: DragEvent) => {
+        onDragDrop!(e)
+        canAcceptDrop = false
+      }
+    "
+  >
+    <slot />
     <div
+      v-if="dropIndicator"
       :class="
         cn(
-          'rounded-lg ring-inset ring-primary-500',
+          'flex flex-col items-center justify-center gap-2 border-dashed rounded-lg border h-25 w-full border-border-subtle my-3 py-2',
-          canAcceptDrop && 'ring-4 bg-primary-500/10'
+          dropIndicator?.onClick && 'cursor-pointer'
         )
       "
-      @dragover.prevent="(e: DragEvent) => (canAcceptDrop = onDragOver!(e))"
+      @click.prevent="(e: MouseEvent) => dropIndicator!.onClick?.(e)"
-      @dragleave="canAcceptDrop = false"
-      @drop.stop.prevent="
-        (e: DragEvent) => {
-          onDragDrop!(e)
-          canAcceptDrop = false
-        }
-      "
     >
-      <!--Slot is wrapped to ensure it's last and doesn't have border-->
+      <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
-      <div><slot /></div>
+      <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
-      <div
-        v-if="dropIndicator"
-        :class="
-          cn(
-            'flex flex-col items-center justify-center gap-2 border-dashed rounded-lg border h-25 w-full border-border-subtle my-3 py-2',
-            dropIndicator?.onClick && 'cursor-pointer'
-          )
-        "
-        @click.prevent="(e: MouseEvent) => dropIndicator!.onClick?.(e)"
-      >
-        <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
-        <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
-      </div>
     </div>
   </drop-wrapper>
   <slot v-else />

src/views/LinearView.vue

@@ -612,19 +612,23 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
           <linear-widgets
             class="grow-1 justify-start flex-col overflow-y-auto contain-size *:max-h-100 flex"
           >
-            <DropZone
+            <template v-for="(nodeData, index) of nodeDatas" :key="nodeData.id">
-              v-for="nodeData of nodeDatas"
+              <div
-              :key="nodeData.id"
+                v-if="index !== 0"
-              :on-drag-over="nodeData.onDragOver"
+                class="w-full border-t-1 border-node-component-border"
-              :on-drag-drop="nodeData.onDragDrop"
-              :drop-indicator="nodeData.dropIndicator"
-              class="border-b-1 border-node-component-border last:border-none text-muted-foreground"
-            >
-              <NodeWidgets
-                :node-data
-                class="border-b-1 border-node-component-border py-3 last:border-none **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 gap-y-3"
               />
-            </DropZone>
+              <DropZone
+                :on-drag-over="nodeData.onDragOver"
+                :on-drag-drop="nodeData.onDragDrop"
+                :drop-indicator="nodeData.dropIndicator"
+                class="text-muted-foreground"
+              >
+                <NodeWidgets
+                  :node-data
+                  class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0"
+                />
+              </DropZone>
+            </template>
           </linear-widgets>
           <linear-run-button
             class="p-4 pb-6 border-t border-node-component-border"