Fix FileTree drag and drop

app/src/components/files/FileTree.tsx

@@ -6,7 +6,7 @@ import {
   IconFolderOpen,
   IconUpload,
 } from '@tabler/icons-react';
-import { Tooltip, Text, Box } from '@mantine/core';
+import { Text, Box } from '@mantine/core';
 import useResizeObserver from '@react-hook/resize-observer';
 import { useFileOperations } from '../../hooks/useFileOperations';
 import type { FileNode } from '@/types/models';
@@ -53,13 +53,12 @@ function Node({
   style,
   dragHandle,
   onNodeClick,
-  ...rest
 }: {
   node: NodeApi<FileNode>;
   style: React.CSSProperties;
   dragHandle?: React.Ref<HTMLDivElement>;
   onNodeClick?: (node: NodeApi<FileNode>) => void;
-} & Record<string, unknown>) {
+}) {
   const handleClick = () => {
     if (node.isInternal) {
       node.toggle();
@@ -69,7 +68,6 @@ function Node({
   };
 
   return (
-    <Tooltip label={node.data.name} openDelay={500}>
     <div
       ref={dragHandle} // This enables dragging for the node
       style={{
@@ -82,9 +80,14 @@ function Node({
         overflow: 'hidden',
         // Add visual feedback when being dragged
         opacity: node.state?.isDragging ? 0.5 : 1,
+        // Highlight when this node will receive the drop
+        backgroundColor: node.state?.willReceiveDrop
+          ? 'rgba(0, 123, 255, 0.2)'
+          : 'transparent',
+        borderRadius: '4px',
       }}
       onClick={handleClick}
-        {...rest}
+      title={node.data.name}
     >
       <FileIcon node={node} />
       <span
@@ -99,7 +102,6 @@ function Node({
         {node.data.name}
       </span>
     </div>
-    </Tooltip>
   );
 }
 
@@ -205,16 +207,17 @@ export const FileTree: React.FC<FileTreeProps> = ({
 
   // External file drag and drop handlers
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
     // Check if drag contains files (not internal tree nodes)
     if (e.dataTransfer.types.includes('Files')) {
+      e.preventDefault();
+      e.stopPropagation();
       setIsDragOver(true);
     }
   }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
+    // Only handle if it's an external file drag
+    if (e.dataTransfer.types.includes('Files')) {
       e.preventDefault();
       e.stopPropagation();
 
@@ -222,24 +225,28 @@ export const FileTree: React.FC<FileTreeProps> = ({
       if (e.currentTarget === e.target) {
         setIsDragOver(false);
       }
+    }
   }, []);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
+    // Only handle external file drags
+    if (e.dataTransfer.types.includes('Files')) {
       e.preventDefault();
       e.stopPropagation();
       // Set the drop effect to indicate this is a valid drop target
       e.dataTransfer.dropEffect = 'copy';
+    }
   }, []);
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
+      const { files } = e.dataTransfer;
+      // Only handle if it's an external file drop
+      if (files && files.length > 0) {
         e.preventDefault();
         e.stopPropagation();
-
         setIsDragOver(false);
 
-      const { files } = e.dataTransfer;
-      if (files && files.length > 0) {
         const uploadFiles = async () => {
           try {
             const success = await handleUpload(files);
@@ -305,7 +312,10 @@ export const FileTree: React.FC<FileTreeProps> = ({
           height={size.height}
           indent={24}
           rowHeight={28}
+          idAccessor="id"
           onMove={handleTreeMove}
+          disableDrag={() => false}
+          disableDrop={() => false}
           onActivate={(node) => {
             const fileNode = node.data;
             if (!node.isInternal) {