From d7c9e87c40675e9c7875bd73980515e657580db3 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Sun, 1 Mar 2026 13:28:54 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20drag=20&=20drop=20=E2=80=94=20fix=20over?=
 =?UTF-8?q?lay=20position=20and=20root=20drop=20zone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use top positioning instead of transform for virtual items (fixes
  DragOverlay appearing at top instead of near cursor)
- Add spacer at bottom of tree for root drop target
- Highlight root drop zone during drag
---
 .../components/team/editor/EditorFileTree.tsx | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/team/editor/EditorFileTree.tsx b/src/renderer/components/team/editor/EditorFileTree.tsx
index 6beae5d1..ef31bb4c 100644
--- a/src/renderer/components/team/editor/EditorFileTree.tsx
+++ b/src/renderer/components/team/editor/EditorFileTree.tsx
@@ -344,7 +344,11 @@ export const EditorFileTree = ({
         onDragCancel={handleDragCancel}
         autoScroll={{ threshold: { x: 0, y: 0.15 } }}
       >
-        <RootDropZone ref={scrollRef} projectPath={projectPath}>
+        <RootDropZone
+          ref={scrollRef}
+          projectPath={projectPath}
+          isDropTarget={dropTargetPath === projectPath}
+        >
           <div
             style={{
               height: `${virtualizer.getTotalSize()}px`,
@@ -365,16 +369,19 @@ export const EditorFileTree = ({
                   onClick={handleNodeClick}
                   style={{
                     position: 'absolute',
-                    top: 0,
+                    top: `${virtualItem.start}px`,
                     left: 0,
                     width: '100%',
                     height: `${virtualItem.size}px`,
-                    transform: `translateY(${virtualItem.start}px)`,
                   }}
                 />
               );
             })}
           </div>
+          {/* Spacer at bottom — drop here to move to project root */}
+          {draggedItem && (
+            <div className="h-16 w-full shrink-0" aria-label="Drop here for project root" />
+          )}
         </RootDropZone>
         <DragOverlay dropAnimation={null}>
           {draggedItem && <DragOverlayFileItem item={draggedItem} />}
@@ -398,8 +405,8 @@ export const EditorFileTree = ({
 
 const RootDropZone = React.forwardRef<
   HTMLDivElement,
-  { projectPath: string | null; children: React.ReactNode }
->(({ projectPath, children }, ref) => {
+  { projectPath: string | null; isDropTarget: boolean; children: React.ReactNode }
+>(({ projectPath, isDropTarget, children }, ref) => {
   const { setNodeRef } = useDroppable({
     id: 'root-drop-zone',
     data: { isRoot: true, path: projectPath },
@@ -417,7 +424,13 @@ const RootDropZone = React.forwardRef<
   );
 
   return (
-    <div ref={combinedRef} className="h-full overflow-y-auto" role="tree">
+    <div
+      ref={combinedRef}
+      className={`h-full overflow-y-auto transition-colors ${
+        isDropTarget ? 'bg-blue-400/5 ring-1 ring-inset ring-blue-400/30' : ''
+      }`}
+      role="tree"
+    >
       {children}
     </div>
   );