Release v0.1.3

2026-06-26 01:39:18 +02:00
parent 189e950589
commit a7895ad394
9 changed files with 356 additions and 91 deletions
--- a/webui/src/features/files/FilesPage.tsx
+++ b/webui/src/features/files/FilesPage.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useRef, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
-import { ChevronRight, Copy, Download, File, Folder, Home, MoveRight, Plus, Search, Trash2, UploadCloud } from "lucide-react";
+import { useEffect, useMemo, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
+import { ChevronRight, Copy, Download, File, Folder, Home, Link2, MoveRight, Plus, Search, Trash2, UploadCloud } from "lucide-react";
 import {
  Button,
  ConfirmDialog,
  DismissibleAlert,
  FieldLabel,
+  FileDropZone,
  FormField,
  LoadingIndicator,
  ToggleSwitch,
@@ -75,6 +76,8 @@ import { useFileTreeState } from "./hooks/useFileTreeState";
 import { useFileDialogs } from "./hooks/useFileDialogs";
 import { useFileDragDropState } from "./hooks/useFileDragDropState";

+type UploadPhase = "idle" | "uploading" | "unpacking" | "finalizing";
+
 export default function FilesPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
  const canDownload = hasScope(auth, "files:download");
  const canUpload = hasScope(auth, "files:upload");
@@ -98,9 +101,12 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
  const [unmatchedCount, setUnmatchedCount] = useState<number | null>(null);
  const [unpackZip, setUnpackZip] = useState(false);
  const [busy, setBusy] = useState(false);
+  const [uploadActive, setUploadActive] = useState(false);
+  const [uploadPhase, setUploadPhase] = useState<UploadPhase>("idle");
+  const [uploadProgress, setUploadProgress] = useState<number | null>(null);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
-  const { dragActive, setDragActive, internalDrag, setInternalDrag, dropTargetKey, setDropTargetKey, clearDropState: clearDragDropState } = useFileDragDropState();
+  const { setDragActive, internalDrag, setInternalDrag, dropTargetKey, setDropTargetKey, clearDropState: clearDragDropState } = useFileDragDropState();
  const {
    dialog,
    setDialog,
@@ -130,8 +136,6 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
  const [renameSuffix, setRenameSuffix] = useState("");
  const [renameRecursive, setRenameRecursive] = useState(false);
  const [renamePreview, setRenamePreview] = useState<RenameResponse | null>(null);
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-
  const visibleFiles = searchActive && searchResults ? searchResults : files;
  const explorerEntries = useMemo(() => {
    const entries = buildExplorerEntries(visibleFiles, folders, currentFolder, searchActive);
@@ -275,6 +279,9 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
  function closeDialog() {
    closeRawDialog();
    setNewFolderError("");
+    setUploadActive(false);
+    setUploadPhase("idle");
+    setUploadProgress(null);
  }

  function updateActiveDialogFolder(spaceId: string, folderPath: string) {
@@ -309,7 +316,11 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
        return;
      }
    }
+    const uploadsZipArchive = unpackZip && selected.some((file) => file.name.toLowerCase().endsWith(".zip"));
    setBusy(true);
+    setUploadActive(true);
+    setUploadPhase("uploading");
+    setUploadProgress(0);
    setError("");
    setMessage(`Uploading ${selected.length} file(s)…`);
    try {
@@ -319,8 +330,17 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
        path: target.folderPath,
        unpack_zip: unpackZip,
        conflict_strategy: options.conflictStrategy ?? "reject",
-        conflict_resolutions: options.conflictResolutions
+        conflict_resolutions: options.conflictResolutions,
+        onProgress: ({ percentage }) => {
+          setUploadProgress(percentage);
+          if (percentage !== null && percentage >= 100) {
+            setUploadPhase(uploadsZipArchive ? "unpacking" : "finalizing");
+            setMessage(uploadsZipArchive ? "Unpacking ZIP upload…" : "Finalizing upload…");
+          }
+        }
      });
+      setUploadPhase("finalizing");
+      setUploadProgress(100);
      setMessage(`Uploaded ${response.files.length} file(s) into ${target.folderPath || "Root"}.`);
      closeDialog();
      setConflictDialog(null);
@@ -331,7 +351,9 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
      setMessage("");
    } finally {
      setBusy(false);
-      if (fileInputRef.current) fileInputRef.current.value = "";
+      setUploadActive(false);
+      setUploadPhase("idle");
+      setUploadProgress(null);
    }
  }

@@ -386,25 +408,29 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
    }
  }

-  async function runPatternSearch() {
-    if (!activeSpace || !searchPattern.trim()) {
+  async function runPatternSearch(patternOverride = searchPattern, caseSensitiveOverride = searchCaseSensitive) {
+    const trimmedPattern = patternOverride.trim();
+    if (!activeSpace || !trimmedPattern) {
      await clearSearch();
      return;
    }
+    const caseSensitive = caseSensitiveOverride;
    setBusy(true);
    setError("");
    setMessage("");
    try {
      const response = await resolveFilePatterns(settings, {
-        patterns: [searchPattern.trim()],
+        patterns: [trimmedPattern],
        owner_type: activeSpace.owner_type,
        owner_id: activeSpace.owner_id,
        path_prefix: currentFolder,
        include_unmatched: true,
-        case_sensitive: searchCaseSensitive
+        case_sensitive: caseSensitive
      });
      setSearchResults(response.patterns.flatMap((pattern) => pattern.matches));
      setSearchActive(true);
+      setSearchPattern(trimmedPattern);
+      setSearchCaseSensitive(caseSensitive);
      setUnmatchedCount(response.unmatched.length);
      setSelectedFileIds(new Set());
      setSelectedFolderPaths(new Set());
@@ -1127,6 +1153,14 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
    </div>
  );

+  const uploadBusyLabel = uploadPhase === "unpacking" ? "Unpacking ZIP archive" : "Uploading files";
+  const uploadProgressLabel = uploadPhase === "unpacking"
+    ? "Extracting files on the server…"
+    : uploadProgress !== null && uploadProgress >= 100
+      ? "Finalizing upload…"
+      : undefined;
+  const visibleUploadProgress = uploadPhase === "unpacking" ? null : uploadProgress;
+
  return (
    <div className="workspace-data-page module-entry-page file-manager-page file-manager-fullscreen">
      {error && (
@@ -1199,13 +1233,15 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
                </span>
              ))}
            </nav>
-            <div className="file-search-row">
-              <Search size={17} aria-hidden="true" />
-              <input value={searchPattern} placeholder="Search this folder: *.pdf, **/*.pdf or 2026-??-*.pdf" onChange={(event) => setSearchPattern(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") void runPatternSearch(); }} />
-              <ToggleSwitch label="Case sensitive" checked={searchCaseSensitive} onChange={setSearchCaseSensitive} disabled={busy} />
-              <Button onClick={() => void runPatternSearch()} disabled={busy || !activeSpace}>Search</Button>
-              {searchActive && <Button onClick={() => void clearSearch()} disabled={busy}>Clear</Button>}
-            </div>
+            <FileSearchRow
+              value={searchPattern}
+              caseSensitive={searchCaseSensitive}
+              busy={busy}
+              searchActive={searchActive}
+              disabled={!activeSpace}
+              onSearch={(patternValue, caseSensitiveValue) => void runPatternSearch(patternValue, caseSensitiveValue)}
+              onClear={() => void clearSearch()}
+            />
            <div className="file-list-meta">
              <span>{selectedSummary}</span>
              <span>{explorerEntries.filter((entry) => entry.kind === "folder").length} folder(s) · {explorerEntries.filter((entry) => entry.kind === "file").length} file(s)</span>
@@ -1313,7 +1349,16 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
                    <div className="file-list-name-cell">
                      <div className="file-list-name">
                        <File className="file-row-icon" size={20} aria-hidden="true" />
-                        <span><strong>{searchActive ? entry.file.display_path : entry.file.filename}</strong></span>
+                        <span>
+                          <strong>{searchActive ? entry.file.display_path : entry.file.filename}</strong>
+                          <small
+                            className={`file-linkage-status ${activeCampaignShareCount(entry.file) > 0 ? "is-linked" : ""}`}
+                            title={campaignShareTitle(entry.file)}
+                          >
+                            {activeCampaignShareCount(entry.file) > 0 && <Link2 size={12} aria-hidden="true" />}
+                            {campaignShareLabel(entry.file)}
+                          </small>
+                        </span>
                      </div>
                    </div>
                    <span>{formatBytes(entry.file.size_bytes)}</span>
@@ -1378,34 +1423,15 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a

      {dialog === "upload" && (
        <FileDialog title={`Upload to ${activeDialogSpace?.label || "Files"} / ${activeDialogTarget?.folderPath || "Root"}`} onClose={closeDialog}>
-          <div
-            className={`file-upload-drop-zone ${dragActive ? "is-active" : ""}`}
-            role="button"
-            tabIndex={busy || !activeDialogSpace || !canUpload ? -1 : 0}
-            aria-label="Drop files here or click to select files"
-            aria-disabled={busy || !activeDialogSpace || !canUpload}
-            onClick={() => {
-              if (!busy && activeDialogSpace && canUpload) fileInputRef.current?.click();
-            }}
-            onKeyDown={(event) => {
-              if ((event.key === "Enter" || event.key === " ") && !busy && activeDialogSpace && canUpload) {
-                event.preventDefault();
-                fileInputRef.current?.click();
-              }
-            }}
-            onDragOver={(event) => { event.preventDefault(); setDragActive(true); }}
-            onDragLeave={() => setDragActive(false)}
-            onDrop={(event) => {
-              event.preventDefault();
-              setDragActive(false);
-              void handleFilesUpload(event.dataTransfer.files);
-            }}
-          >
-            <UploadCloud size={28} aria-hidden="true" />
-            <strong>Drop files here</strong>
-            <span>or click to select files</span>
-            <span className="muted small-text">Files are uploaded into {activeDialogTarget?.folderPath || "Root"}.</span>
-          </div>
+          <FileDropZone
+            disabled={busy || !activeDialogSpace || !canUpload}
+            busy={uploadActive}
+            progress={visibleUploadProgress}
+            busyLabel={uploadBusyLabel}
+            progressLabel={uploadProgressLabel}
+            note={`Files are uploaded into ${activeDialogTarget?.folderPath || "Root"}.`}
+            onFiles={(files) => handleFilesUpload(files)}
+          />
          <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>
@@ -1417,10 +1443,8 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
              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>
-            <Button variant="primary" onClick={() => fileInputRef.current?.click()} disabled={busy || !activeDialogSpace || !canUpload}>Select files…</Button>
          </div>
        </FileDialog>
      )}
@@ -1527,3 +1551,72 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
  );
 }

+function FileSearchRow({
+  value,
+  caseSensitive,
+  busy,
+  searchActive,
+  disabled,
+  onSearch,
+  onClear
+}: {
+  value: string;
+  caseSensitive: boolean;
+  busy: boolean;
+  searchActive: boolean;
+  disabled: boolean;
+  onSearch: (value: string, caseSensitive: boolean) => void;
+  onClear: () => void;
+}) {
+  const [draft, setDraft] = useState(value);
+  const [caseSensitiveDraft, setCaseSensitiveDraft] = useState(caseSensitive);
+
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+
+  useEffect(() => {
+    setCaseSensitiveDraft(caseSensitive);
+  }, [caseSensitive]);
+
+  function clear() {
+    setDraft("");
+    onClear();
+  }
+
+  return (
+    <div className="file-search-row">
+      <Search size={17} aria-hidden="true" />
+      <input
+        value={draft}
+        placeholder="Search this folder: *.pdf, **/*.pdf or 2026-??-*.pdf"
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={(event) => { if (event.key === "Enter") onSearch(draft, caseSensitiveDraft); }}
+      />
+      <ToggleSwitch label="Case sensitive" checked={caseSensitiveDraft} onChange={setCaseSensitiveDraft} disabled={busy || disabled} />
+      <Button onClick={() => onSearch(draft, caseSensitiveDraft)} disabled={busy || disabled}>Search</Button>
+      {searchActive && <Button onClick={clear} disabled={busy}>Clear</Button>}
+    </div>
+  );
+}
+
+function activeCampaignShares(file: ManagedFile) {
+  return (file.shares ?? []).filter((share) => share.target_type === "campaign" && !share.revoked_at);
+}
+
+function activeCampaignShareCount(file: ManagedFile): number {
+  return activeCampaignShares(file).length;
+}
+
+function campaignShareLabel(file: ManagedFile): string {
+  const count = activeCampaignShareCount(file);
+  if (count === 0) return "No campaign links";
+  if (count === 1) return "Linked to 1 campaign";
+  return `Linked to ${count} campaigns`;
+}
+
+function campaignShareTitle(file: ManagedFile): string | undefined {
+  const shares = activeCampaignShares(file);
+  if (shares.length === 0) return undefined;
+  return shares.map((share) => share.target_id).join(", ");
+}