diff --git a/frontend/src/components/dms/SourceTree.tsx b/frontend/src/components/dms/SourceTree.tsx index 228c4d2..835a283 100644 --- a/frontend/src/components/dms/SourceTree.tsx +++ b/frontend/src/components/dms/SourceTree.tsx @@ -4,6 +4,8 @@ * ▼ Meine Dateien (local folders) * ▼ Geteilte Ordner (shared files from other users) * ▼ Externe Speicher (placeholder for future plugins) + * + * Folders are drop targets (accept files) and draggable (for reparenting). */ import React, { useState } from 'react'; @@ -16,6 +18,8 @@ interface SourceTreeFolderItemProps { level: number; selectedFolderId: string | null; onSelect: (folderId: string) => void; + onDropFiles: (fileIds: string[], targetFolderId: string) => void; + onDropFolder: (sourceFolderId: string, targetFolderId: string) => void; } function SourceTreeFolderItem({ @@ -23,20 +27,60 @@ function SourceTreeFolderItem({ level, selectedFolderId, onSelect, + onDropFiles, + onDropFolder, }: SourceTreeFolderItemProps) { const { t } = useTranslation(); const [expanded, setExpanded] = useState(true); + const [isDropTarget, setIsDropTarget] = useState(false); const hasChildren = folder.children && folder.children.length > 0; const isSelected = selectedFolderId === folder.id; + function handleDragOver(e: React.DragEvent) { + e.preventDefault(); + e.stopPropagation(); + e.dataTransfer.dropEffect = 'move'; + if (!isDropTarget) setIsDropTarget(true); + } + + function handleDragLeave(e: React.DragEvent) { + e.stopPropagation(); + setIsDropTarget(false); + } + + function handleDrop(e: React.DragEvent) { + e.preventDefault(); + e.stopPropagation(); + setIsDropTarget(false); + try { + const data = JSON.parse(e.dataTransfer.getData('application/json')); + if (data.type === 'files' && data.ids) { + onDropFiles(data.ids, folder.id); + } else if (data.type === 'folder' && data.id) { + if (data.id !== folder.id) { + onDropFolder(data.id, folder.id); + } + } + } catch { + // ignore invalid drop data + } + } + + function handleFolderDragStart(e: React.DragEvent) { + e.stopPropagation(); + e.dataTransfer.setData('application/json', JSON.stringify({ type: 'folder', id: folder.id })); + e.dataTransfer.effectAllowed = 'move'; + } + return (