@hienlh/ppm 0.17.56 → 0.18.0

package/src/web/components/explorer/file-tree.tsx

@@ -16,7 +16,10 @@ import {
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { copyToClipboard } from "@/lib/clipboard";
 import { useShallow } from "zustand/react/shallow";
-import { useFileStore, loadPersistedExpanded, savePersistedExpanded, type FileNode } from "@/stores/file-store";
+import {
+  useFileStore, loadPersistedExpanded, savePersistedExpanded,
+  absoluteProjectPath, relativeProjectPath, type FileNode,
+} from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { useCompareStore } from "@/stores/compare-store";
@@ -37,12 +40,23 @@ import { InlineTreeInput } from "./inline-tree-input";
 import { flattenVisibleTree, type InputRow } from "./flatten-visible-tree";
 import { downloadFile, downloadFolder } from "@/lib/file-download";
 import { api, projectUrl } from "@/lib/api-client";
+import { openExplorer } from "@/components/os-explorer/open-explorer";
+import { fsChanged, onFsChanged } from "@/components/os-explorer/explorer-store";
+import { dirnameOf } from "@/components/os-explorer/format-file-meta";
+import { useDragAutoScroll } from "@/components/os-explorer/dnd/use-drag-auto-scroll";
+import { useDropTransfer } from "@/components/os-explorer/dnd/use-drop-transfer";
+import { usePathDropTarget } from "@/components/os-explorer/dnd/use-path-drop-target";
 import { useFileUploadDrag } from "./use-file-upload-drag";
 import { useTreeKeyboardNav } from "./use-tree-keyboard-nav";
 
 /** Synthetic root node for creating files/folders at project root */
 const ROOT_NODE: FileNode = { name: "", path: "", type: "directory" };
 
+/** Parent directory of a project-relative path; "" is the project root. */
+function parentDirOfRelative(path: string): string {
+  return path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
+}
+
 interface FileTreeProps {
   onFileOpen?: () => void;
 }
@@ -116,26 +130,58 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     setFocusedPath(filePath);
   }, [activeProject, setExpanded, loadChildren, setFocusedPath]);
 
-  /** Paste clipboard files into a target directory */
+  /**
+   * Paste clipboard entries into a target directory.
+   *
+   * The clipboard holds absolute paths and may have been filled by an explorer window, so
+   * the source decides the route: entries that live inside this project keep the
+   * project-scoped endpoints (relative paths, gitignore-aware), anything else goes through
+   * the host filesystem API with a fully-composed destination.
+   */
   const pasteFiles = useCallback(async (targetDir: string) => {
     if (!activeProject || !clipboard) return;
     const projectName = activeProject.name;
+    const root = activeProject.path;
+    // Every source path is an absolute host path (the clipboard is shared with explorer
+    // windows), so the host separator implied by the project root also splits them correctly.
+    const sep = root.includes("\\") ? "\\" : "/";
     const endpoint = clipboard.operation === "cut" ? "move" : "copy";
+    const touched = new Set<string>([absoluteProjectPath(root, targetDir)]);
     for (const source of clipboard.paths) {
-      const name = source.includes("/") ? source.slice(source.lastIndexOf("/") + 1) : source;
-      const destination = targetDir ? `${targetDir}/${name}` : name;
+      const name = source.split(/[/\\]/).filter(Boolean).pop() ?? source;
+      const relativeSource = relativeProjectPath(root, source);
+      touched.add(dirnameOf(source, sep));
       try {
-        await api.post(`${projectUrl(projectName)}/files/${endpoint}`, { source, destination });
+        if (relativeSource != null) {
+          const destination = targetDir ? `${targetDir}/${name}` : name;
+          await api.post(`${projectUrl(projectName)}/files/${endpoint}`, { source: relativeSource, destination });
+        } else {
+          const destination = absoluteProjectPath(root, targetDir ? `${targetDir}/${name}` : name);
+          await api.post(`/api/fs/${endpoint}`, { source, destination });
+        }
       } catch (err) {
         toast.error(err instanceof Error ? err.message : `Failed to ${endpoint}`);
       }
     }
     if (clipboard.operation === "cut") setClipboard(null);
+    // Any explorer window showing the source or destination directory must refresh too.
+    fsChanged(...touched);
     reloadTree();
   }, [activeProject, clipboard, setClipboard, reloadTree]);
 
   const treeContainerRef = useRef<HTMLDivElement>(null);
 
+  /** Absolutise before publishing: the clipboard is shared with the explorer windows. */
+  const copyToTreeClipboard = useCallback((relativePaths: string[], operation: "cut" | "copy") => {
+    if (!activeProject) return;
+    const root = activeProject.path;
+    setClipboard({
+      paths: relativePaths.map((p) => absoluteProjectPath(root, p)),
+      operation,
+      origin: { projectName: activeProject.name, root },
+    });
+  }, [activeProject, setClipboard]);
+
   /** Ctrl+X / Ctrl+C / Ctrl+V — scoped to file tree container focus */
   const handleClipboardKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (!activeProject) return;
@@ -145,12 +191,9 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
 
-    if (e.key === "x" && selectedFiles.length > 0) {
-      e.preventDefault();
-      setClipboard({ paths: [...selectedFiles], operation: "cut" });
-    } else if (e.key === "c" && selectedFiles.length > 0) {
+    if ((e.key === "x" || e.key === "c") && selectedFiles.length > 0) {
       e.preventDefault();
-      setClipboard({ paths: [...selectedFiles], operation: "copy" });
+      copyToTreeClipboard(selectedFiles, e.key === "x" ? "cut" : "copy");
     } else if (e.key === "v" && clipboard) {
       e.preventDefault();
       pasteFiles("");
@@ -221,17 +264,46 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     };
   }, [activeProject]);
 
+  // Symmetric with the fsChanged(...) calls this file emits after its own mutations: an
+  // explorer window mutating a directory inside this project must invalidate the matching
+  // tree node too.
+  useEffect(() => {
+    if (!activeProject) return;
+    const projectName = activeProject.name;
+    const root = activeProject.path;
+    return onFsChanged((absoluteDir) => {
+      const relative = relativeProjectPath(root, absoluteDir);
+      if (relative == null) return; // outside this project — not the tree's concern
+      const store = useFileStore.getState();
+      store.invalidateIndex();
+      store.loadIndex(projectName);
+      store.invalidateFolder(projectName, relative);
+    });
+  }, [activeProject]);
+
   const {
     uploadFiles, isRootDragOver,
     handleRootDragEnter, handleRootDragLeave, handleRootDragOver, handleRootDrop,
   } = useFileUploadDrag({ projectName: activeProject?.name, setExpanded });
 
+  // Cross-surface entry drops (from an explorer window, or another project's tree) onto the
+  // tree's own empty background — the project root. Uses the same collision-prompt transfer
+  // as a paste; separate from `useFileUploadDrag` above, which only ever reacts to OS files.
+  const treeRootSep = activeProject?.path.includes("\\") ? "\\" : "/";
+  const { run: transferRun, prompts: transferPrompts } = useDropTransfer(treeRootSep);
+  const backgroundDrop = usePathDropTarget({
+    targetDir: activeProject?.path ?? null,
+    run: transferRun,
+    disabled: !activeProject,
+  });
+
   // Virtualized flat rows: only visible rows are mounted (large dirs stay cheap)
   const rows = useMemo(
     () => flattenVisibleTree(tree, expandedPaths, inlineAction),
     [tree, expandedPaths, inlineAction],
   );
   const scrollRef = useRef<HTMLDivElement>(null);
+  useDragAutoScroll(scrollRef);
   const isMobile = useIsMobile();
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
@@ -265,6 +337,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       store.invalidateIndex();
       store.loadIndex(projectName);
       store.invalidateFolder(projectName, parentPath);
+      fsChanged(absoluteProjectPath(activeProject!.path, parentPath));
     } else {
       const type = row.inline.type === "new-file" ? "file" : "directory";
       const fullPath = row.targetPath ? `${row.targetPath}/${value}` : value;
@@ -273,6 +346,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       store.invalidateIndex();
       store.loadIndex(projectName);
       store.invalidateFolder(projectName, row.targetPath);
+      fsChanged(absoluteProjectPath(activeProject!.path, row.targetPath));
     }
   }, [activeProject, clearInlineAction]);
 
@@ -294,14 +368,14 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       onFileOpen?.();
       return;
     }
-    if (action === "cut") {
+    if (action === "cut" || action === "copy-file") {
       const paths = selectedFiles.length > 0 && selectedFiles.includes(node.path) ? [...selectedFiles] : [node.path];
-      setClipboard({ paths, operation: "cut" });
+      copyToTreeClipboard(paths, action === "cut" ? "cut" : "copy");
       return;
     }
-    if (action === "copy-file") {
-      const paths = selectedFiles.length > 0 && selectedFiles.includes(node.path) ? [...selectedFiles] : [node.path];
-      setClipboard({ paths, operation: "copy" });
+    if (action === "open-in-file-explorer") {
+      const target = node.type === "directory" ? node.path : parentDirOfRelative(node.path);
+      void openExplorer(absoluteProjectPath(activeProject!.path, target));
       return;
     }
     if (action === "paste" && node.type === "directory") {
@@ -417,13 +491,16 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
   return (
     <div
       ref={treeContainerRef}
-      className={cn("flex flex-col h-full outline-none", isRootDragOver && "bg-primary/5")}
+      className={cn("flex flex-col h-full outline-none", (isRootDragOver || backgroundDrop.isOver) && "bg-primary/5")}
       tabIndex={0}
       onKeyDown={(e) => { handleClipboardKeyDown(e); handleTreeKeyDown(e); }}
-      onDragEnter={handleRootDragEnter}
-      onDragLeave={handleRootDragLeave}
-      onDragOver={handleRootDragOver}
-      onDrop={handleRootDrop}
+      // Two independent drags share this background: OS files (handleRoot*, unchanged) and
+      // a cross-surface entry drag (backgroundDrop, gated on its own MIME) — each ignores
+      // the other's kind, so calling both in sequence is safe.
+      onDragEnter={(e) => { handleRootDragEnter(e); backgroundDrop.handlers.onDragEnter(e); }}
+      onDragLeave={(e) => { handleRootDragLeave(e); backgroundDrop.handlers.onDragLeave(e); }}
+      onDragOver={(e) => { handleRootDragOver(e); backgroundDrop.handlers.onDragOver(e); }}
+      onDrop={(e) => { handleRootDrop(e); backgroundDrop.handlers.onDrop(e); }}
     >
       <SidebarHeader icon={FolderOpen} title="Explorer">
         <button onClick={() => handleAction("new-file", ROOT_NODE)} title="New File" className={toolbarBtnClass}>
@@ -481,6 +558,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
                         onAction={handleAction}
                         onFileDrop={uploadFiles}
                         onFileOpen={onFileOpen}
+                        transferRun={transferRun}
                       />
                     )}
                   </div>
@@ -514,9 +592,13 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
           node={actionState.node}
           projectName={activeProject.name}
           onClose={() => setActionState(null)}
-          onRefresh={reloadTree}
+          onRefresh={() => {
+            fsChanged(absoluteProjectPath(activeProject.path, parentDirOfRelative(actionState.node.path)));
+            reloadTree();
+          }}
         />
       )}
+      {transferPrompts}
     </div>
   );
 }

package/src/web/components/explorer/tree-node-context-menu.tsx

@@ -1,7 +1,7 @@
 /**
  * Context menu items for a tree node (file or folder).
  */
-import { Download } from "lucide-react";
+import { Download, FolderOpen } from "lucide-react";
 import type { FileNode, ClipboardState } from "@/stores/file-store";
 import {
   ContextMenuContent,
@@ -39,6 +39,11 @@ export function TreeNodeContextMenu({
             New Folder
           </ContextMenuItem>
           <ContextMenuSeparator />
+          <ContextMenuItem onClick={() => onAction("open-in-file-explorer", node)}>
+            <FolderOpen className="size-3.5 mr-2" />
+            Open in File Explorer
+          </ContextMenuItem>
+          <ContextMenuSeparator />
         </>
       )}
       <ContextMenuItem onClick={() => onAction("cut", node)}>

package/src/web/components/explorer/tree-node.tsx

@@ -3,7 +3,7 @@
  * Rows are flat siblings (no recursion); visible order comes from flatten-visible-tree.ts.
  * Handles click, drag/drop, context menu for individual tree items.
  */
-import { useState, useRef, useEffect, memo } from "react";
+import { useRef, useEffect, memo } from "react";
 import {
   Folder,
   FolderOpen,
@@ -12,39 +12,35 @@ import {
   Loader2,
 } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
-import { useFileStore, getVisiblePaths, type FileNode } from "@/stores/file-store";
+import { useFileStore, getVisiblePaths, absoluteProjectPath, type FileNode } from "@/stores/file-store";
+import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { useCompareStore } from "@/stores/compare-store";
 import { useGitStatusStore, GIT_STATUS_COLORS, type GitFileStatus } from "@/stores/git-status-store";
-import { api, projectUrl } from "@/lib/api-client";
 import { cn } from "@/lib/utils";
-import { toast } from "sonner";
 import {
   ContextMenu,
   ContextMenuTrigger,
 } from "@/components/ui/adaptive-context-menu";
+import { DROP_TARGET_CLASS } from "@/components/os-explorer/dnd/drop-target-style";
+import type { DropRunner } from "@/components/os-explorer/dnd/entry-drop-executor";
 import { getFileIcon } from "./file-icon-map";
 import { TreeNodeContextMenu } from "./tree-node-context-menu";
+import { useTreeRowDnd } from "./use-tree-row-dnd";
 import type { NodeRow } from "./flatten-visible-tree";
 
-/** Check if drag event is from OS files (not internal PPM drag) */
-export function isExternalFileDrag(e: React.DragEvent): boolean {
-  return e.dataTransfer.types.includes("Files") && !e.dataTransfer.types.includes("application/x-ppm-path");
-}
-
-function parentDirOf(path: string): string {
-  return path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
-}
-
 export interface TreeRowProps {
   row: NodeRow;
   projectName: string;
   onAction: (action: string, node: FileNode) => void;
   onFileDrop: (targetDir: string, files: FileList) => void;
   onFileOpen?: () => void;
+  /** Runs a cross-surface entry drop (from an explorer window, another project's tree, or
+   *  this same tree) through the shared collision-prompt transfer — see `use-drop-transfer`. */
+  transferRun: DropRunner;
 }
 
-export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFileDrop, onFileOpen }: TreeRowProps) {
+export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFileDrop, onFileOpen, transferRun }: TreeRowProps) {
   const { node, effectiveNode, displayName, depth } = row;
   const { expandedPaths, loadedPaths, inflight, toggleExpand, selectedFiles, toggleFileSelect, clipboard, focusedPath, setFocusedPath } = useFileStore(
     useShallow((s) => ({
@@ -60,6 +56,7 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
     })),
   );
   const openTab = useTabStore((s) => s.openTab);
+  const projectRoot = useProjectStore((s) => s.activeProject?.path);
   const compareSelection = useCompareStore((s) => s.selection);
   const isDir = node.type === "directory";
   // Git decoration: per-file and per-folder status
@@ -71,11 +68,14 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
   const isExpanded = expandedPaths.has(node.path);
   const isSelected = selectedFiles.includes(node.path);
   const isIgnored = node.ignored === true;
-  const isCut = clipboard?.operation === "cut" && clipboard.paths.includes(node.path);
+  // The clipboard is shared with the explorer windows and therefore absolute; compare in
+  // that space so a tree cut still greys its own row out.
+  const isCut =
+    clipboard?.operation === "cut" &&
+    projectRoot != null &&
+    clipboard.paths.includes(absoluteProjectPath(projectRoot, node.path));
   const isFocused = focusedPath === node.path || focusedPath === effectiveNode.path;
   const isLoadingChildren = isDir && isExpanded && !loadedPaths.has(effectiveNode.path) && inflight.has(effectiveNode.path);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const dragCounter = useRef(0);
   const rowRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -122,91 +122,32 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
     onFileOpen?.();
   }
 
-  function handleDragStart(e: React.DragEvent) {
-    const pathValue = isDir ? `${node.path}/` : node.path;
-    e.dataTransfer.setData("application/x-ppm-path", pathValue);
-    e.dataTransfer.setData("text/plain", node.name);
-    e.dataTransfer.effectAllowed = "copyMove";
-  }
-
-  // Flat rows: dropping on a file targets its parent directory
-  const dropTargetDir = isDir ? effectiveNode.path : parentDirOf(node.path);
-
-  function canAcceptDrop(e: React.DragEvent): boolean {
-    return isExternalFileDrag(e) || e.dataTransfer.types.includes("application/x-ppm-path");
-  }
-
-  function handleNodeDragEnter(e: React.DragEvent) {
-    if (!canAcceptDrop(e)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    dragCounter.current++;
-    if (dragCounter.current === 1) setIsDragOver(true);
-  }
-  function handleNodeDragLeave(e: React.DragEvent) {
-    e.stopPropagation();
-    dragCounter.current--;
-    if (dragCounter.current === 0) setIsDragOver(false);
-  }
-  function handleNodeDragOver(e: React.DragEvent) {
-    if (!canAcceptDrop(e)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    e.dataTransfer.dropEffect = isExternalFileDrag(e) ? "copy" : "move";
-  }
-  function handleNodeDrop(e: React.DragEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    dragCounter.current = 0;
-    setIsDragOver(false);
-
-    // External file upload
-    if (isExternalFileDrag(e)) {
-      if (e.dataTransfer.files.length > 0) onFileDrop(dropTargetDir, e.dataTransfer.files);
-      return;
-    }
-
-    // Internal tree move
-    const sourcePath = e.dataTransfer.getData("application/x-ppm-path").replace(/\/$/, "");
-    if (!sourcePath) return;
-    // Prevent dropping into self or descendant
-    if (sourcePath === dropTargetDir || dropTargetDir.startsWith(`${sourcePath}/`)) return;
-    // Prevent no-op (already in this folder)
-    const sourceParent = parentDirOf(sourcePath);
-    if (sourceParent === dropTargetDir) return;
-
-    const sourceName = sourcePath.includes("/") ? sourcePath.slice(sourcePath.lastIndexOf("/") + 1) : sourcePath;
-    const destination = dropTargetDir ? `${dropTargetDir}/${sourceName}` : sourceName;
-    api.post(`${projectUrl(projectName)}/files/move`, { source: sourcePath, destination })
-      .then(() => {
-        const store = useFileStore.getState();
-        store.invalidateIndex();
-        store.loadIndex(projectName);
-        store.invalidateFolder(projectName, sourceParent);
-        store.invalidateFolder(projectName, dropTargetDir);
-      })
-      .catch((err) => {
-        toast.error(err instanceof Error ? err.message : "Move failed");
-      });
-  }
+  const dnd = useTreeRowDnd({
+    path: node.path,
+    name: node.name,
+    isDir,
+    effectivePath: effectiveNode.path,
+    isSelected,
+    selectedFiles,
+    isExpanded,
+    projectName,
+    projectRoot,
+    toggleExpand,
+    onFileDrop,
+    transferRun,
+  });
 
   const { icon: FileIcon, color: fileIconColor } = isDir
     ? { icon: isExpanded ? FolderOpen : Folder, color: isExpanded ? "text-primary" : "text-text-3" }
     : getFileIcon(node.name);
 
   return (
-    <div
-      onDragEnter={handleNodeDragEnter}
-      onDragLeave={handleNodeDragLeave}
-      onDragOver={handleNodeDragOver}
-      onDrop={handleNodeDrop}
-    >
+    <div {...dnd.containerHandlers}>
       <ContextMenu>
         <ContextMenuTrigger asChild>
           <button
             ref={rowRef}
-            draggable
-            onDragStart={handleDragStart}
+            {...dnd.entrySource}
             onClick={handleClick}
             className={cn(
               "flex items-center w-full gap-1.5 px-2 py-1 rounded-[var(--rad-sm)] text-[13px]",
@@ -215,7 +156,7 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
               (isIgnored || isCut) && "opacity-40",
               isFocused && "bg-surface-elevated",
               isSelected && "bg-accent-wash",
-              isDragOver && "ring-1 ring-dashed ring-primary bg-primary/10",
+              dnd.isDragOver && DROP_TARGET_CLASS,
             )}
             style={{ paddingLeft: `${depth * 16 + 8}px` }}
           >

package/src/web/components/explorer/use-file-upload-drag.ts

@@ -4,7 +4,8 @@
 import { useCallback, useState, useRef } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { getAuthToken, projectUrl } from "@/lib/api-client";
-import { isExternalFileDrag } from "./tree-node";
+import { enterDragDepth, leaveDragDepth, resetDragDepth, type DragDepthCounter } from "@/components/os-explorer/dnd/drag-depth-counter";
+import { isExternalFileDrag } from "./use-tree-row-dnd";
 import { toast } from "sonner";
 
 interface UseFileUploadDragOptions {
@@ -14,7 +15,8 @@ interface UseFileUploadDragOptions {
 
 export function useFileUploadDrag({ projectName, setExpanded }: UseFileUploadDragOptions) {
   const [isRootDragOver, setIsRootDragOver] = useState(false);
-  const rootDragCounter = useRef(0);
+  // `useRef<number>`'s `{ current }` shape already matches `DragDepthCounter` structurally.
+  const rootDragCounter: DragDepthCounter = useRef(0);
 
   const uploadFiles = useCallback(async (targetDir: string, files: FileList) => {
     if (!projectName) return;
@@ -51,14 +53,17 @@ export function useFileUploadDrag({ projectName, setExpanded }: UseFileUploadDra
   }, [projectName, setExpanded]);
 
   function handleRootDragEnter(e: React.DragEvent) {
-    if (!isExternalFileDrag(e)) return;
+    const accepted = isExternalFileDrag(e);
+    if (!accepted) return;
     e.preventDefault();
-    rootDragCounter.current++;
-    if (rootDragCounter.current === 1) setIsRootDragOver(true);
+    if (enterDragDepth(rootDragCounter, accepted)) setIsRootDragOver(true);
   }
-  function handleRootDragLeave() {
-    rootDragCounter.current--;
-    if (rootDragCounter.current === 0) setIsRootDragOver(false);
+  function handleRootDragLeave(e: React.DragEvent) {
+    // `leaveDragDepth` takes the *same* gate `handleRootDragEnter` used — an entry drag
+    // never incremented this counter, so letting every entry-drag leave decrement it
+    // unconditionally drove it negative, after which the OS-file-upload highlight could
+    // never reach a positive count again.
+    if (leaveDragDepth(rootDragCounter, isExternalFileDrag(e))) setIsRootDragOver(false);
   }
   function handleRootDragOver(e: React.DragEvent) {
     if (!isExternalFileDrag(e)) return;
@@ -68,7 +73,7 @@ export function useFileUploadDrag({ projectName, setExpanded }: UseFileUploadDra
   function handleRootDrop(e: React.DragEvent) {
     if (!isExternalFileDrag(e)) return;
     e.preventDefault();
-    rootDragCounter.current = 0;
+    resetDragDepth(rootDragCounter);
     setIsRootDragOver(false);
     if (e.dataTransfer.files.length > 0) uploadFiles("", e.dataTransfer.files);
   }