DMS: SourceTree drop targets + draggable folders

2026-07-20 22:33:51 +00:00
parent d5a836c0c7
commit f08933a97c
1 changed files with 96 additions and 8 deletions
@@ -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 (
    <li role="treeitem" aria-expanded={hasChildren ? expanded : undefined} aria-selected={isSelected}>
      <div
        className={clsx(
-          'flex items-center gap-1 px-2 py-1.5 rounded-md text-sm cursor-pointer min-h-touch',
+          'flex items-center gap-1 px-2 py-1.5 rounded-md text-sm cursor-pointer',
          'hover:bg-secondary-100 motion-safe:transition-colors',
          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
          isSelected && 'bg-primary-50 text-primary-700 font-medium',
+          isDropTarget && 'ring-2 ring-primary-400 bg-primary-50',
        )}
        style={{ paddingLeft: `${level * 12 + 8}px` }}
        onClick={() => onSelect(folder.id)}
@@ -49,6 +93,11 @@ function SourceTreeFolderItem({
        tabIndex={0}
        role="button"
        aria-label={folder.name}
+        draggable
+        onDragStart={handleFolderDragStart}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
      >
        {hasChildren && (
          <button
@@ -66,7 +115,7 @@ function SourceTreeFolderItem({
          </button>
        )}
        {!hasChildren && <span className="w-4 flex-shrink-0" aria-hidden="true" />}
-        <svg className="w-4 h-4 text-warning-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+        <svg className={clsx('w-4 h-4 flex-shrink-0', isDropTarget ? 'text-primary-500' : 'text-warning-500')} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
        </svg>
        <span className="truncate">{folder.name}</span>
@@ -75,7 +124,7 @@ function SourceTreeFolderItem({
        )}
      </div>
      {hasChildren && expanded && (
-        <ul role="group" className="space-y-0.5">
+        <ul role="group" className="space-y-0">
          {folder.children!.map((child) => (
            <SourceTreeFolderItem
              key={child.id}
@@ -83,6 +132,8 @@ function SourceTreeFolderItem({
              level={level + 1}
              selectedFolderId={selectedFolderId}
              onSelect={onSelect}
+              onDropFiles={onDropFiles}
+              onDropFolder={onDropFolder}
            />
          ))}
        </ul>
@@ -107,7 +158,7 @@ function SourceSection({ title, icon, selected, onClick, children, defaultExpand
    <div className="mb-1">
      <div
        className={clsx(
-          'flex items-center gap-1 px-2 py-1.5 rounded-md text-sm font-semibold cursor-pointer min-h-touch',
+          'flex items-center gap-1 px-2 py-1.5 rounded-md text-sm font-semibold cursor-pointer',
          'hover:bg-secondary-100 motion-safe:transition-colors',
          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
          selected && 'bg-primary-50 text-primary-700',
@@ -144,7 +195,7 @@ function SourceSection({ title, icon, selected, onClick, children, defaultExpand
        <span className="truncate">{title}</span>
      </div>
      {expanded && children && (
-        <ul role="group" className="space-y-0.5 mt-0.5">
+        <ul role="group" className="space-y-0 mt-0.5">
          {children}
        </ul>
      )}
@@ -160,6 +211,8 @@ export interface SourceTreeProps {
  onSelectFolder: (folderId: string | null) => void;
  onSelectSource: (source: string) => void;
  loading?: boolean;
+  onDropFiles: (fileIds: string[], targetFolderId: string | null) => void;
+  onDropFolder: (sourceFolderId: string, targetFolderId: string | null) => void;
 }

 export function SourceTree({
@@ -170,8 +223,11 @@ export function SourceTree({
  onSelectFolder,
  onSelectSource,
  loading = false,
+  onDropFiles,
+  onDropFolder,
 }: SourceTreeProps) {
  const { t } = useTranslation();
+  const [isRootDropTarget, setIsRootDropTarget] = useState(false);

  if (loading) {
    return (
@@ -187,15 +243,42 @@ export function SourceTree({
  const sharedSelected = selectedSource === 'shared';
  const externalSelected = selectedSource === 'external';

+  function handleRootDragOver(e: React.DragEvent) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    if (!isRootDropTarget) setIsRootDropTarget(true);
+  }
+
+  function handleRootDragLeave(e: React.DragEvent) {
+    e.stopPropagation();
+    setIsRootDropTarget(false);
+  }
+
+  function handleRootDrop(e: React.DragEvent) {
+    e.preventDefault();
+    setIsRootDropTarget(false);
+    try {
+      const data = JSON.parse(e.dataTransfer.getData('application/json'));
+      if (data.type === 'files' && data.ids) {
+        onDropFiles(data.ids, null);
+      } else if (data.type === 'folder' && data.id) {
+        onDropFolder(data.id, null);
+      }
+    } catch {
+      // ignore invalid drop data
+    }
+  }
+
  return (
    <nav aria-label={t('dms.sources')} data-testid="source-tree" className="p-2">
-      {/* All Files entry */}
+      {/* All Files entry — also a drop target (move to root) */}
      <div
        className={clsx(
-          'flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer min-h-touch mb-1',
+          'flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer mb-1',
          'hover:bg-secondary-100 motion-safe:transition-colors',
          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
          selectedSource === null && selectedFolderId === null && 'bg-primary-50 text-primary-700 font-medium',
+          isRootDropTarget && 'ring-2 ring-primary-400 bg-primary-50',
        )}
        onClick={() => {
          onSelectFolder(null);
@@ -208,6 +291,9 @@ export function SourceTree({
            onSelectSource('local');
          }
        }}
+        onDragOver={handleRootDragOver}
+        onDragLeave={handleRootDragLeave}
+        onDrop={handleRootDrop}
        tabIndex={0}
        role="button"
        aria-label={t('dms.allFiles')}
@@ -244,6 +330,8 @@ export function SourceTree({
              level={0}
              selectedFolderId={selectedFolderId}
              onSelect={onSelectFolder}
+              onDropFiles={onDropFiles}
+              onDropFolder={onDropFolder}
            />
          ))
        )}
@@ -270,7 +358,7 @@ export function SourceTree({
            <li key={file.id} role="treeitem" aria-selected={false}>
              <div
                className={clsx(
-                  'flex items-center gap-1 px-2 py-1.5 rounded-md text-sm cursor-pointer min-h-touch',
+                  'flex items-center gap-1 px-2 py-1.5 rounded-md text-sm cursor-pointer',
                  'hover:bg-secondary-100 motion-safe:transition-colors',
                )}
                style={{ paddingLeft: '20px' }}