DataGrid fix for column resizing

2026-06-12 19:32:03 +02:00
parent 2dfd905e31
commit cf36dfb20b
10 changed files with 849 additions and 1480 deletions
--- a/src/features/files/FilesPage.tsx
+++ b/src/features/files/FilesPage.tsx
@@ -272,6 +272,10 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
    setNewFolderError("");
  }

+  function updateActiveDialogFolder(spaceId: string, folderPath: string) {
+    setDialogTarget({ spaceId, folderPath: normalizeFolder(folderPath) });
+  }
+
  function findSpace(spaceId: string): FileSpace | null {
    return spaces.find((space) => space.id === spaceId) ?? null;
  }
@@ -714,6 +718,16 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
    event.dataTransfer.setData("text/plain", `${state.fileIds.length + state.folderPaths.length} item(s)`);
  }

+  function handleTreeFolderDragStart(spaceId: string, path: string, event: ReactDragEvent<HTMLElement>) {
+    const folderPath = normalizeFolder(path);
+    if (!folderPath) return;
+    const state = { sourceSpaceId: spaceId, fileIds: [], folderPaths: [folderPath] };
+    setInternalDrag(state);
+    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.setData(INTERNAL_DRAG_TYPE, JSON.stringify(state));
+    event.dataTransfer.setData("text/plain", folderPath);
+  }
+
  function isInternalDrag(event: ReactDragEvent<HTMLElement>): boolean {
    return event.dataTransfer.types.includes(INTERNAL_DRAG_TYPE) || Boolean(internalDrag);
  }
@@ -831,6 +845,20 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
    });
  }

+  function openTreeEmptyContextMenu(event: ReactMouseEvent<HTMLElement>) {
+    event.preventDefault();
+    const target = toolbarTarget();
+    if (!target) return;
+    setContextMenu({
+      x: event.clientX,
+      y: event.clientY,
+      target: "empty",
+      source: "tree",
+      spaceId: target.spaceId,
+      folderPath: target.folderPath
+    });
+  }
+
  function contextActionTarget(menu: ContextMenuState | null): FileActionTarget | null {
    const space = spaceForContext(menu);
    if (!space) return null;
@@ -1097,7 +1125,7 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
      <div className={`file-manager-shell ${busy ? "is-loading" : ""}`}>
        <aside className="file-tree-panel" aria-label="File spaces and folders">
          <div className="file-tree-heading">Spaces</div>
-          <div className="file-tree-list">
+          <div className="file-tree-list" onContextMenu={openTreeEmptyContextMenu}>
            {spaces.length === 0 && <p className="muted small-text">No file spaces available.</p>}
            {spaces.map((space) => {
              const isActiveRoot = activeSpaceId === space.id && currentFolder === "";
@@ -1133,6 +1161,8 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
                    onDropOnTarget={handleDropOnTarget}
                    onClearDropState={clearDropState}
                    onRequestDragExpand={scheduleTreeDragExpand}
+                    onDragStartFolder={handleTreeFolderDragStart}
+                    onDragEndFolder={() => { setInternalDrag(null); clearDropState(); }}
                    disabled={busy}
                  />
                </div>
@@ -1177,17 +1207,7 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
          </div>

          <div
-            className={`file-list-drop-target ${dragActive ? "is-active" : ""} ${dropTargetKey === dropTargetId(toolbarTarget() ?? { spaceId: "", folderPath: "" }) ? "is-drop-target" : ""}`}
-            onDragOver={(event) => {
-              const target = toolbarTarget();
-              if (target) handleDropTargetDragOver(event, target);
-              setDragActive(true);
-            }}
-            onDragLeave={clearDropState}
-            onDrop={(event) => {
-              const target = toolbarTarget();
-              if (target) void handleDropOnTarget(event, target);
-            }}
+            className="file-list-drop-target"
            onContextMenu={(event) => openContextMenu(event, "empty")}
            onClick={(event) => {
              if (event.target === event.currentTarget) applySelectionKeys(new Set<EntrySelectionKey>());
@@ -1318,6 +1338,16 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
            <span className="muted small-text">Files are uploaded into {activeDialogTarget?.folderPath || "Root"}.</span>
          </div>
          <ToggleSwitch label="Unpack ZIP uploads" checked={unpackZip} onChange={setUnpackZip} disabled={busy} />
+          <div className="field-block">
+            <FieldLabel className="form-label" help="Choose the destination folder before selecting or dropping files.">Destination folder</FieldLabel>
+            <TransferFolderSelector
+              space={activeDialogSpace}
+              nodes={activeDialogTarget ? buildFolderTree(filesBySpace[activeDialogTarget.spaceId] ?? EMPTY_FILES, foldersBySpace[activeDialogTarget.spaceId] ?? EMPTY_FOLDERS) : []}
+              selectedFolder={activeDialogTarget?.folderPath || ""}
+              disabled={busy || !activeDialogSpace}
+              onSelect={(folderPath) => activeDialogTarget && updateActiveDialogFolder(activeDialogTarget.spaceId, folderPath)}
+            />
+          </div>
          <input ref={fileInputRef} type="file" multiple hidden onChange={(event) => event.target.files && void handleFilesUpload(event.target.files)} />
          <div className="button-row compact-actions align-end">
            <Button onClick={closeDialog} disabled={busy}>Cancel</Button>
@@ -1333,6 +1363,16 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
            <small>Created inside {activeDialogTarget?.folderPath || "Root"}.</small>
            {newFolderError && <small className="field-error">{newFolderError}</small>}
          </FormField>
+          <div className="field-block">
+            <FieldLabel className="form-label" help="Choose the parent folder for the new subfolder.">Parent folder</FieldLabel>
+            <TransferFolderSelector
+              space={activeDialogSpace}
+              nodes={activeDialogTarget ? buildFolderTree(filesBySpace[activeDialogTarget.spaceId] ?? EMPTY_FILES, foldersBySpace[activeDialogTarget.spaceId] ?? EMPTY_FOLDERS) : []}
+              selectedFolder={activeDialogTarget?.folderPath || ""}
+              disabled={busy || !activeDialogSpace}
+              onSelect={(folderPath) => activeDialogTarget && updateActiveDialogFolder(activeDialogTarget.spaceId, folderPath)}
+            />
+          </div>
          <div className="button-row compact-actions align-end">
            <Button onClick={closeDialog} disabled={busy}>Cancel</Button>
            <Button variant="primary" onClick={() => void handleCreateFolder()} disabled={busy || !newFolderName.trim()}>Create Folder</Button>
--- a/src/features/files/components/FileManagerComponents.tsx
+++ b/src/features/files/components/FileManagerComponents.tsx
@@ -1,4 +1,4 @@
-import type { DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import type { CSSProperties, DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
 import { Copy, Download, Folder, FolderOpen, Home, MoveRight, Plus, Trash2, UploadCloud } from "lucide-react";
 import Button from "../../../components/Button";
 import Dialog from "../../../components/Dialog";
@@ -85,6 +85,8 @@ export function FolderTree({
  onDropOnTarget,
  onClearDropState,
  onRequestDragExpand,
+  onDragStartFolder,
+  onDragEndFolder,
  disabled,
  depth = 1
 }: {
@@ -101,6 +103,8 @@ export function FolderTree({
  onDropOnTarget: (event: ReactDragEvent<HTMLElement>, target: FileActionTarget) => Promise<void>;
  onClearDropState: () => void;
  onRequestDragExpand: (spaceId: string, path: string) => void;
+  onDragStartFolder: (spaceId: string, path: string, event: ReactDragEvent<HTMLElement>) => void;
+  onDragEndFolder: () => void;
  disabled?: boolean;
  depth?: number;
 }) {
@@ -118,6 +122,9 @@ export function FolderTree({
            <div
              className={`file-tree-node-wrap ${isActive ? "is-active" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
              style={{ paddingLeft: `${Math.min(depth * 14, 56)}px` }}
+              draggable={!disabled}
+              onDragStart={(event) => onDragStartFolder(spaceId, node.path, event)}
+              onDragEnd={onDragEndFolder}
              onContextMenu={(event) => onContextMenu(event, spaceId, node.path)}
              onDragOver={(event) => {
                onDragOverTarget(event, target);
@@ -163,6 +170,8 @@ export function FolderTree({
                onDropOnTarget={onDropOnTarget}
                onClearDropState={onClearDropState}
                onRequestDragExpand={onRequestDragExpand}
+                onDragStartFolder={onDragStartFolder}
+                onDragEndFolder={onDragEndFolder}
                disabled={disabled}
                depth={depth + 1}
              />
@@ -266,8 +275,17 @@ export function FileContextMenu({
 }) {
  const showNewFolder = true;
  const showDelete = menu.target !== "empty";
+  const viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth;
+  const viewportHeight = typeof window === "undefined" ? 768 : window.innerHeight;
+  const estimatedWidth = 220;
+  const estimatedHeight = 260;
+  const left = Math.max(8, Math.min(menu.x, viewportWidth - estimatedWidth - 8));
+  const openUp = menu.y + estimatedHeight > viewportHeight;
+  const style: CSSProperties = openUp
+    ? { left, bottom: Math.max(8, viewportHeight - menu.y) }
+    : { left, top: Math.max(8, menu.y) };
  return (
-    <div className="file-context-menu" style={{ left: menu.x, top: menu.y }} role="menu" onClick={(event) => event.stopPropagation()}>
+    <div className="file-context-menu" style={style} role="menu" onClick={(event) => event.stopPropagation()}>
      {showNewFolder && <button type="button" role="menuitem" onClick={onCreateFolder}><Plus size={15} aria-hidden="true" /> New folder</button>}
      <button type="button" role="menuitem" onClick={onUpload}><UploadCloud size={15} aria-hidden="true" /> Upload</button>
      {canDownload && <button type="button" role="menuitem" onClick={onDownload}><Download size={15} aria-hidden="true" /> {downloadLabel}</button>}