diff --git a/app/src/components/files/FileTree.tsx b/app/src/components/files/FileTree.tsx index f940016..90c6572 100644 --- a/app/src/components/files/FileTree.tsx +++ b/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; style: React.CSSProperties; dragHandle?: React.Ref; onNodeClick?: (node: NodeApi) => void; -} & Record) { +}) { const handleClick = () => { if (node.isInternal) { node.toggle(); @@ -69,37 +68,40 @@ function Node({ }; return ( - -
+ + - - - {node.data.name} - -
-
+ {node.data.name} + + ); } @@ -205,41 +207,46 @@ export const FileTree: React.FC = ({ // 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) => { - e.preventDefault(); - e.stopPropagation(); + // Only handle if it's an external file drag + if (e.dataTransfer.types.includes('Files')) { + e.preventDefault(); + e.stopPropagation(); - // Only hide overlay when leaving the container itself - if (e.currentTarget === e.target) { - setIsDragOver(false); + // Only hide overlay when leaving the container itself + if (e.currentTarget === e.target) { + setIsDragOver(false); + } } }, []); const handleDragOver = useCallback((e: React.DragEvent) => { - e.preventDefault(); - e.stopPropagation(); - // Set the drop effect to indicate this is a valid drop target - e.dataTransfer.dropEffect = 'copy'; + // 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) => { - e.preventDefault(); - e.stopPropagation(); - - setIsDragOver(false); - 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 uploadFiles = async () => { try { const success = await handleUpload(files); @@ -305,7 +312,10 @@ export const FileTree: React.FC = ({ height={size.height} indent={24} rowHeight={28} + idAccessor="id" onMove={handleTreeMove} + disableDrag={() => false} + disableDrop={() => false} onActivate={(node) => { const fileNode = node.data; if (!node.isInternal) {