From f0eecdfdfa2d5641a529b69323a2e3861b3b5a37 Mon Sep 17 00:00:00 2001
From: Kelly Yang <124ykl@gmail.com>
Date: Tue, 27 Jan 2026 17:25:58 -0800
Subject: [PATCH] Refactor DropZone to use VueUse useDropZone (#8174)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Refactor DropZone to use VueUse useDropZone. (#7971, #7734)

## Changes

- **What**: Replaced `@dragover`, `@dragleave`, and `@drop` bindings
with `useDropZone`.

## Review Focus

## Screenshots

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8174-Refactor-DropZone-to-use-VueUse-useDropZone-2ee6d73d365081ed9d31d68f7cf42263)
by [Unito](https://www.unito.io)
---
 .../extensions/linearMode/DropZone.vue        | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/renderer/extensions/linearMode/DropZone.vue b/src/renderer/extensions/linearMode/DropZone.vue
index ca6330aef..c8fd3b9c1 100644
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { useDropZone } from '@vueuse/core'
 import { ref } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-defineProps<{
+const props = defineProps<{
   onDragOver?: (e: DragEvent) => boolean
   onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
   dropIndicator?: {
@@ -14,25 +15,39 @@ defineProps<{
   }
 }>()
 
+const dropZoneRef = ref<HTMLElement | null>(null)
 const canAcceptDrop = ref(false)
+
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+  onDrop: (_files, event) => {
+    // Stop propagation to prevent global handlers from creating a new node
+    event?.stopPropagation()
+
+    if (props.onDragDrop && event) {
+      props.onDragDrop(event)
+    }
+    canAcceptDrop.value = false
+  },
+  onOver: (_, event) => {
+    if (props.onDragOver && event) {
+      canAcceptDrop.value = props.onDragOver(event)
+    }
+  },
+  onLeave: () => {
+    canAcceptDrop.value = false
+  }
+})
 </script>
 <template>
   <div
     v-if="onDragOver && onDragDrop"
+    ref="dropZoneRef"
     :class="
       cn(
         'rounded-lg ring-inset ring-primary-500',
-        canAcceptDrop && 'ring-4 bg-primary-500/10'
+        canAcceptDrop && isOverDropZone && 'ring-4 bg-primary-500/10'
       )
     "
-    @dragover.prevent="canAcceptDrop = onDragOver?.($event)"
-    @dragleave="canAcceptDrop = false"
-    @drop.stop.prevent="
-      (e: DragEvent) => {
-        onDragDrop!(e)
-        canAcceptDrop = false
-      }
-    "
   >
     <slot />
     <div