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/package.json
+++ b/webui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@govoplan/files-webui",
-  "version": "0.1.1",
+  "version": "0.1.2",
  "private": true,
  "type": "module",
  "main": "src/index.ts",
@@ -21,7 +21,7 @@
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.1",
    "lucide-react": "^0.555.0",
-    "@govoplan/core-webui": "^0.1.1"
+    "@govoplan/core-webui": "^0.1.2"
  },
  "peerDependenciesMeta": {
    "@govoplan/core-webui": {
--- a/webui/src/api/files.ts
+++ b/webui/src/api/files.ts
@@ -1,4 +1,4 @@
-import { apiFetch, apiUrl, authHeaders, csrfToken, type ApiSettings } from "@govoplan/core-webui";
+import { ApiError, apiFetch, apiUrl, authHeaders, csrfToken, type ApiSettings } from "@govoplan/core-webui";

 export type FileSpace = {
  id: string;
@@ -40,6 +40,7 @@ export type ManagedFile = {
 export type FileListResponse = { files: ManagedFile[] };
 export type FileSpacesResponse = { spaces: FileSpace[] };
 export type FileUploadResponse = { files: ManagedFile[] };
+export type FileUploadProgress = { loaded: number; total?: number; percentage: number | null };
 export type FileFolder = {
  id: string;
  tenant_id: string;
@@ -102,7 +103,16 @@ export function listFiles(settings: ApiSettings, params: { owner_type?: string;
 export async function uploadFiles(
  settings: ApiSettings,
  files: File[],
-  options: { owner_type: "user" | "group"; owner_id: string; path?: string; campaign_id?: string; unpack_zip?: boolean; conflict_strategy?: ConflictStrategy; conflict_resolutions?: ConflictResolution[] }
+  options: {
+    owner_type: "user" | "group";
+    owner_id: string;
+    path?: string;
+    campaign_id?: string;
+    unpack_zip?: boolean;
+    conflict_strategy?: ConflictStrategy;
+    conflict_resolutions?: ConflictResolution[];
+    onProgress?: (progress: FileUploadProgress) => void;
+  }
 ): Promise<FileUploadResponse> {
  const form = new FormData();
  files.forEach((file) => form.append("files", file));
@@ -113,9 +123,54 @@ export async function uploadFiles(
  if (options.unpack_zip) form.append("unpack_zip", "true");
  if (options.conflict_strategy) form.append("conflict_strategy", options.conflict_strategy);
  if (options.conflict_resolutions?.length) form.append("conflict_resolutions_json", JSON.stringify(options.conflict_resolutions));
+  if (options.onProgress) return uploadFilesWithProgress(settings, form, options.onProgress);
  return apiFetch<FileUploadResponse>(settings, "/api/v1/files/upload", { method: "POST", body: form });
 }

+function uploadFilesWithProgress(
+  settings: ApiSettings,
+  form: FormData,
+  onProgress: (progress: FileUploadProgress) => void
+): Promise<FileUploadResponse> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", apiUrl(settings, "/api/v1/files/upload"));
+    xhr.withCredentials = true;
+    for (const [key, value] of authHeaders(settings)) xhr.setRequestHeader(key, value);
+    const csrf = csrfToken();
+    if (csrf) xhr.setRequestHeader("X-CSRF-Token", csrf);
+
+    xhr.upload.onprogress = (event) => {
+      const total = event.lengthComputable ? event.total : undefined;
+      onProgress({
+        loaded: event.loaded,
+        total,
+        percentage: total && total > 0 ? Math.round((event.loaded / total) * 100) : null
+      });
+    };
+
+    xhr.onerror = () => reject(new Error("Upload failed because the network request could not be completed."));
+    xhr.onabort = () => reject(new Error("Upload was cancelled."));
+    xhr.onload = () => {
+      const responseText = xhr.responseText || "";
+      if (xhr.status < 200 || xhr.status >= 300) {
+        reject(new ApiError(xhr.status, xhr.statusText, responseText));
+        return;
+      }
+      onProgress({ loaded: 1, total: 1, percentage: 100 });
+      if (xhr.status === 204 || !responseText) {
+        resolve({ files: [] });
+        return;
+      }
+      const contentType = xhr.getResponseHeader("content-type") || "";
+      resolve(contentType.includes("application/json") ? JSON.parse(responseText) as FileUploadResponse : { files: [] });
+    };
+
+    onProgress({ loaded: 0, total: undefined, percentage: 0 });
+    xhr.send(form);
+  });
+}
+
 export function deleteFile(settings: ApiSettings, fileId: string): Promise<BulkDeleteResponse> {
  return apiFetch<BulkDeleteResponse>(settings, `/api/v1/files/${fileId}`, { method: "DELETE" });
 }
@@ -124,13 +179,22 @@ export function bulkDeleteFiles(settings: ApiSettings, fileIds: string[]): Promi
  return apiFetch<BulkDeleteResponse>(settings, "/api/v1/files/bulk-delete", { method: "POST", body: JSON.stringify({ file_ids: fileIds }) });
 }

-export function shareFileWithCampaign(settings: ApiSettings, fileId: string, campaignId: string): Promise<FileShare> {
-  return apiFetch<FileShare>(settings, `/api/v1/files/${fileId}/shares`, {
+export type FileBulkShareResponse = { shares: FileShare[]; shared_count: number };
+
+export function shareFilesWithCampaign(settings: ApiSettings, fileIds: string[], campaignId: string): Promise<FileBulkShareResponse> {
+  return apiFetch<FileBulkShareResponse>(settings, "/api/v1/files/bulk-shares", {
    method: "POST",
-    body: JSON.stringify({ target_type: "campaign", target_id: campaignId, permission: "read" })
+    body: JSON.stringify({ file_ids: fileIds, target_type: "campaign", target_id: campaignId, permission: "read" })
  });
 }

+export async function shareFileWithCampaign(settings: ApiSettings, fileId: string, campaignId: string): Promise<FileShare> {
+  const response = await shareFilesWithCampaign(settings, [fileId], campaignId);
+  const share = response.shares[0];
+  if (!share) throw new Error("File share was not created.");
+  return share;
+}
+
 export function bulkRenameFiles(
  settings: ApiSettings,
  payload: { file_ids: string[]; folder_paths?: string[]; owner_type?: "user" | "group"; owner_id?: string; mode: "direct" | "prefix" | "suffix" | "replace"; new_name?: string; find?: string; replacement?: string; prefix?: string; suffix?: string; recursive?: boolean; dry_run?: boolean }
--- 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(", ");
+}
--- a/webui/src/styles/file-manager.css
+++ b/webui/src/styles/file-manager.css
@@ -356,6 +356,16 @@
  font-size: 12px;
 }

+.file-linkage-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.file-linkage-status.is-linked {
+  color: var(--text-strong);
+}
+
 .file-row-icon {
  color: var(--muted);
  flex: 0 0 auto;
@@ -473,37 +483,6 @@
  padding: 18px;
 }

-.file-upload-drop-zone {
-  display: grid;
-  place-items: center;
-  gap: 8px;
-  min-height: 170px;
-  border: 1px dashed var(--line-dark);
-  border-radius: 14px;
-  background: var(--panel-soft);
-  color: var(--muted);
-  text-align: center;
-  cursor: pointer;
-  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
-}
-
-.file-upload-drop-zone:hover,
-.file-upload-drop-zone:focus-visible,
-.file-upload-drop-zone.is-active {
-  border-color: #0d6efd;
-  background: rgba(13, 110, 253, .08);
-}
-
-.file-upload-drop-zone:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(13, 110, 253, .18);
-}
-
-.file-upload-drop-zone[aria-disabled="true"] {
-  cursor: not-allowed;
-  opacity: .65;
-}
-
 .field-error {
  color: var(--danger-text);
  font-weight: 700;