Polish pane split drag and drop

src/features/file-explorer/hooks/use-file-explorer-drag-drop.ts

@@ -108,9 +108,22 @@ export function useFileExplorerDragDrop(
     }
   }, [dragState.mousePosition]);
 
+  const dragStateRef = useRef(dragState);
+  useEffect(() => {
+    dragStateRef.current = dragState;
+  }, [dragState]);
+
   useEffect(() => {
     if (!dragState.isDragging) return;
 
+    const handleAbort = () => {
+      setDragState(initialDragState);
+      clearAutoExpand();
+      clearEditorDropHover();
+    };
+
+    window.addEventListener("athas-drag-abort", handleAbort);
+
     const handleMouseMove = (e: MouseEvent) => {
       setDragState((prev) => ({
         ...prev,
@@ -125,11 +138,12 @@ export function useFileExplorerDragDrop(
         elementUnder?.closest("[data-pane-container]") ||
         elementUnder?.closest("[data-tab-bar-pane-id]");
 
+      const draggedItem = dragStateRef.current.draggedItem;
+
       if (fileTreeItem) {
         clearEditorDropHover();
         const path = fileTreeItem.getAttribute("data-file-path");
         const isDir = fileTreeItem.getAttribute("data-is-dir") === "true";
-        const draggedItem = dragState.draggedItem;
 
         if (path && draggedItem && path !== draggedItem.path) {
           const separator = getPathSeparator(draggedItem.path);
@@ -163,15 +177,15 @@ export function useFileExplorerDragDrop(
           dragOverIsDir: true,
         }));
         clearAutoExpand();
-      } else if (aiContextDropTarget && dragState.draggedItem) {
+      } else if (aiContextDropTarget && draggedItem) {
         clearEditorDropHover();
         setDragState((prev) => ({
           ...prev,
           dragOverPath: null,
           dragOverIsDir: false,
         }));
         clearAutoExpand();
-      } else if (editorDropTarget && dragState.draggedItem && !dragState.draggedItem.isDir) {
+      } else if (editorDropTarget && draggedItem && !draggedItem.isDir) {
         setInternalTabDragHover({ x: e.clientX, y: e.clientY });
         setDragState((prev) => ({
           ...prev,
@@ -191,34 +205,33 @@ export function useFileExplorerDragDrop(
     };
 
     const handleMouseUp = async (e: MouseEvent) => {
-      // Check if dropping on a pane container (outside file tree)
+      const live = dragStateRef.current;
       const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
       const isOverPane = elementUnder?.closest("[data-pane-container]") !== null;
       const isOverFileTree = elementUnder?.closest(".file-tree-container") !== null;
       const isOverAIContextDropTarget =
         elementUnder?.closest("[data-ai-context-drop-target]") !== null;
 
-      if (isOverAIContextDropTarget && dragState.draggedItem) {
+      if (isOverAIContextDropTarget && live.draggedItem) {
         dispatchSidebarResourceDropOnAI({
           type: "file",
-          path: dragState.draggedItem.path,
-          name: dragState.draggedItem.name,
-          isDir: dragState.draggedItem.isDir,
+          path: live.draggedItem.path,
+          name: live.draggedItem.name,
+          isDir: live.draggedItem.isDir,
         });
         setDragState(initialDragState);
         clearAutoExpand();
         clearEditorDropHover();
         return;
       }
 
-      // If dropping on a pane (not in file tree), dispatch event for pane to handle
-      if (isOverPane && !isOverFileTree && dragState.draggedItem && !dragState.draggedItem.isDir) {
+      if (isOverPane && !isOverFileTree && live.draggedItem && !live.draggedItem.isDir) {
         window.dispatchEvent(
           new CustomEvent("file-tree-drop-on-pane", {
             detail: {
-              path: dragState.draggedItem.path,
-              name: dragState.draggedItem.name,
-              isDir: dragState.draggedItem.isDir,
+              path: live.draggedItem.path,
+              name: live.draggedItem.name,
+              isDir: live.draggedItem.isDir,
               x: e.clientX,
               y: e.clientY,
             },
@@ -230,9 +243,9 @@ export function useFileExplorerDragDrop(
         return;
       }
 
-      if (dragState.dragOverPath && dragState.draggedItem) {
-        const { path: sourcePath, name: sourceName } = dragState.draggedItem;
-        let targetPath = dragState.dragOverPath;
+      if (live.dragOverPath && live.draggedItem) {
+        const { path: sourcePath, name: sourceName } = live.draggedItem;
+        let targetPath = live.dragOverPath;
 
         if (targetPath === "__ROOT__") {
           targetPath = rootFolderPath || "";
@@ -243,7 +256,7 @@ export function useFileExplorerDragDrop(
           }
         }
 
-        if (!dragState.dragOverIsDir && targetPath !== "__ROOT__") {
+        if (!live.dragOverIsDir && targetPath !== "__ROOT__") {
           targetPath = getDirName(targetPath) || rootFolderPath || "";
         }
 
@@ -272,13 +285,14 @@ export function useFileExplorerDragDrop(
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
       document.removeEventListener("mouseleave", handleMouseUp);
+      window.removeEventListener("athas-drag-abort", handleAbort);
       clearAutoExpand();
       clearEditorDropHover();
     };
   }, [
+    dragState.isDragging,
     clearAutoExpand,
     clearEditorDropHover,
-    dragState,
     onFileMove,
     onMoveError,
     rootFolderPath,
@@ -297,15 +311,13 @@ export function useFileExplorerDragDrop(
       mousePosition: { x: e.clientX, y: e.clientY },
     });
 
-    // Store drag data globally for pane containers to access
     window.__fileDragData = {
       path: file.path,
       name: file.name,
       isDir: file.isDir,
     };
   }, []);
 
-  // Clean up global drag data on drag end
   useEffect(() => {
     if (!dragState.isDragging) {
       delete window.__fileDragData;

src/features/layout/components/main-layout.tsx

@@ -23,6 +23,10 @@ import { SplitViewRoot } from "@/features/panes/components/split-view-root";
 import { usePaneKeyboard } from "@/features/panes/hooks/use-pane-keyboard";
 import QuickOpen from "@/features/quick-open/components/quick-open";
 import { useSettingsStore } from "@/features/settings/store";
+import {
+  attachDragKeyHandlers,
+  getInternalTabDragData,
+} from "@/features/tabs/utils/internal-tab-drag";
 import VimCommandBar from "@/features/vim/components/vim-command-bar";
 import { useVimKeyboard } from "@/features/vim/hooks/use-vim-keyboard";
 import { useVimStore } from "@/features/vim/stores/vim-store";
@@ -34,7 +38,6 @@ import { useUIState } from "@/features/window/stores/ui-state-store";
 import { ExtensionDialogs } from "@/extensions/ui/components/extension-dialog";
 import { toast } from "@/ui/toast";
 import { frontendTrace } from "@/utils/frontend-trace";
-import { getInternalTabDragData } from "@/features/tabs/utils/internal-tab-drag";
 import { VimSearchBar } from "../../vim/components/vim-search-bar";
 import CustomTitleBarWithSettings from "../../window/components/custom-title-bar";
 import { TerminalHost } from "@/features/terminal/components/terminal-host";
@@ -121,6 +124,10 @@ export function MainLayout() {
     void initializeDebuggerEventBridge();
   }, []);
 
+  useEffect(() => {
+    attachDragKeyHandlers();
+  }, []);
+
   useEffect(() => {
     if (!onboardingOpen || !onboardingContext) return;