Release v0.1.4

2026-07-02 14:59:52 +02:00
parent a7895ad394
commit ee5b06b1e7
18 changed files with 1953 additions and 139 deletions
--- a/webui/src/features/files/FilesPage.tsx
+++ b/webui/src/features/files/FilesPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
+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, Link2, MoveRight, Plus, Search, Trash2, UploadCloud } from "lucide-react";
 import {
  Button,
@@ -78,6 +78,9 @@ import { useFileDragDropState } from "./hooks/useFileDragDropState";

 type UploadPhase = "idle" | "uploading" | "unpacking" | "finalizing";

+const DEFAULT_FILE_LIST_ROW_HEIGHT = 58;
+const FILE_LIST_OVERSCAN_ROWS = 8;
+
 export default function FilesPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
  const canDownload = hasScope(auth, "files:download");
  const canUpload = hasScope(auth, "files:upload");
@@ -141,6 +144,28 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
    const entries = buildExplorerEntries(visibleFiles, folders, currentFolder, searchActive);
    return sortExplorerEntries(entries, sortColumn, sortDirection);
  }, [visibleFiles, folders, currentFolder, searchActive, sortColumn, sortDirection]);
+  const fileListViewportRef = useRef<HTMLDivElement | null>(null);
+  const fileListMeasureRowRef = useRef<HTMLDivElement | null>(null);
+  const [fileListViewportHeight, setFileListViewportHeight] = useState(0);
+  const [fileListScrollTop, setFileListScrollTop] = useState(0);
+  const [fileListRowHeight, setFileListRowHeight] = useState(DEFAULT_FILE_LIST_ROW_HEIGHT);
+  const virtualExplorerRows = useMemo(() => {
+    const rowHeight = Math.max(1, fileListRowHeight);
+    const entryScrollTop = Math.max(0, fileListScrollTop - rowHeight);
+    const viewportHeight = Math.max(fileListViewportHeight, rowHeight * FILE_LIST_OVERSCAN_ROWS);
+    const startIndex = Math.max(0, Math.floor(entryScrollTop / rowHeight) - FILE_LIST_OVERSCAN_ROWS);
+    const endIndex = Math.min(
+      explorerEntries.length,
+      Math.ceil((entryScrollTop + viewportHeight) / rowHeight) + FILE_LIST_OVERSCAN_ROWS
+    );
+
+    return {
+      startIndex,
+      topSpacerHeight: startIndex * rowHeight,
+      bottomSpacerHeight: Math.max(0, (explorerEntries.length - endIndex) * rowHeight),
+      entries: explorerEntries.slice(startIndex, endIndex)
+    };
+  }, [explorerEntries, fileListRowHeight, fileListScrollTop, fileListViewportHeight]);
  const visibleEntryKeys = useMemo(() => explorerEntries.map(entrySelectionKey), [explorerEntries]);
  const {
    selectedFileIds,
@@ -172,6 +197,47 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
  const activeDialogSpace = activeDialogTarget ? spaces.find((space) => space.id === activeDialogTarget.spaceId) ?? null : null;
  const downloadLabel = selectedDownloadFileIds.length > 1 ? "Download ZIP" : "Download";

+  useEffect(() => {
+    const viewport = fileListViewportRef.current;
+    if (!viewport) return undefined;
+
+    const updateViewportHeight = () => {
+      setFileListViewportHeight(viewport.clientHeight);
+      setFileListScrollTop(viewport.scrollTop);
+    };
+
+    updateViewportHeight();
+    if (typeof ResizeObserver === "undefined") return undefined;
+
+    const observer = new ResizeObserver(updateViewportHeight);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const row = fileListMeasureRowRef.current;
+    if (!row) return undefined;
+
+    const updateRowHeight = () => {
+      const measuredHeight = row.getBoundingClientRect().height;
+      if (measuredHeight > 0) setFileListRowHeight(Math.round(measuredHeight));
+    };
+
+    updateRowHeight();
+    if (typeof ResizeObserver === "undefined") return undefined;
+
+    const observer = new ResizeObserver(updateRowHeight);
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [activeSpaceId, currentFolder]);
+
+  useEffect(() => {
+    const viewport = fileListViewportRef.current;
+    if (!viewport) return;
+    viewport.scrollTop = 0;
+    setFileListScrollTop(0);
+  }, [activeSpaceId, currentFolder, searchActive, searchResults, sortColumn, sortDirection]);
+
  async function loadSpaces() {
    setBusy(true);
    setError("");
@@ -1161,6 +1227,75 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
      : undefined;
  const visibleUploadProgress = uploadPhase === "unpacking" ? null : uploadProgress;

+  function renderExplorerEntry(entry: ExplorerEntry, rowIndex: number) {
+    const entryDropTarget = entry.kind === "folder" && activeSpace ? { spaceId: activeSpace.id, folderPath: entry.path } : null;
+    const isDropTarget = entryDropTarget ? dropTargetKey === dropTargetId(entryDropTarget) : false;
+
+    return entry.kind === "folder" ? (
+      <div
+        key={entry.id}
+        className={`file-list-row folder-row ${isEntrySelected(entry) ? "is-selected" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
+        role="row"
+        aria-rowindex={rowIndex}
+        tabIndex={0}
+        draggable
+        onDragStart={(event) => handleInternalDragStart(entry, event)}
+        onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
+        onDragOver={(event) => entryDropTarget && handleDropTargetDragOver(event, entryDropTarget)}
+        onDragLeave={clearDropState}
+        onDrop={(event) => entryDropTarget && void handleDropOnTarget(event, entryDropTarget)}
+        onMouseDown={preventTextSelectionOnShift}
+        onClick={(event) => handleEntrySelection(entry, event)}
+        onDoubleClick={() => { if (!busy && activeSpace) openFolder(activeSpace.id, entry.path); }}
+        onContextMenu={(event) => openContextMenu(event, "folder", entry)}
+        onKeyDown={(event) => handleEntryKeyDown(entry, event)}
+      >
+        <div className="file-list-name-cell">
+          <div className="file-list-name">
+            <Folder className="file-row-icon" size={20} aria-hidden="true" />
+            <span><strong>{entry.name}</strong><small>{folderContentLabel(entry)}</small></span>
+          </div>
+        </div>
+        <span>{formatBytes(entry.totalSize)}</span>
+        <span className="file-row-tail"><span>{formatDate(entry.updatedAt)}</span></span>
+      </div>
+    ) : (
+      <div
+        key={entry.id}
+        className={`file-list-row file-row ${isEntrySelected(entry) ? "is-selected" : ""}`}
+        role="row"
+        aria-rowindex={rowIndex}
+        tabIndex={0}
+        draggable
+        onDragStart={(event) => handleInternalDragStart(entry, event)}
+        onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
+        onMouseDown={preventTextSelectionOnShift}
+        onClick={(event) => handleEntrySelection(entry, event)}
+        onDoubleClick={() => { if (!busy) void downloadFile(settings, entry.file); }}
+        onContextMenu={(event) => openContextMenu(event, "file", entry)}
+        onKeyDown={(event) => handleEntryKeyDown(entry, event)}
+      >
+        <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>
+              <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>
+        <span className="file-row-tail"><span>{formatDate(entry.file.updated_at)}</span></span>
+      </div>
+    );
+  }
+
  return (
    <div className="workspace-data-page module-entry-page file-manager-page file-manager-fullscreen">
      {error && (
@@ -1258,20 +1393,24 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a

          <div
            className="file-list-drop-target"
+            ref={fileListViewportRef}
+            onScroll={(event) => setFileListScrollTop(event.currentTarget.scrollTop)}
            onContextMenu={(event) => openContextMenu(event, "empty")}
            onClick={(event) => {
              if (event.target === event.currentTarget) applySelectionKeys(new Set<EntrySelectionKey>());
            }}
          >
-            <div className="file-list-table" role="table" aria-label="Managed files">
+            <div className="file-list-table" role="table" aria-label="Managed files" aria-rowcount={explorerEntries.length + 1}>
              {(() => {
                const normalizedCurrentFolder = normalizeFolder(currentFolder);
                const canOpenParent = Boolean(normalizedCurrentFolder && activeSpace);
                const targetParentFolder = parentFolderPath(normalizedCurrentFolder);
                return (
                  <div
+                    ref={fileListMeasureRowRef}
                    className={`file-list-row folder-row file-parent-row ${canOpenParent ? "" : "is-disabled"}`}
                    role="row"
+                    aria-rowindex={1}
                    tabIndex={canOpenParent ? 0 : -1}
                    aria-disabled={!canOpenParent}
                    aria-label={canOpenParent ? `Open parent folder ${targetParentFolder || activeSpace?.label || "root"}` : "Already at the root folder"}
@@ -1301,71 +1440,13 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
              {explorerEntries.length === 0 && (
                <div className="file-list-empty">This folder is empty. Use Upload or Create Folder to add content.</div>
              )}
-              {explorerEntries.map((entry) => {
-                const entryDropTarget = entry.kind === "folder" && activeSpace ? { spaceId: activeSpace.id, folderPath: entry.path } : null;
-                const isDropTarget = entryDropTarget ? dropTargetKey === dropTargetId(entryDropTarget) : false;
-                return entry.kind === "folder" ? (
-                  <div
-                    key={entry.id}
-                    className={`file-list-row folder-row ${isEntrySelected(entry) ? "is-selected" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
-                    role="row"
-                    tabIndex={0}
-                    draggable
-                    onDragStart={(event) => handleInternalDragStart(entry, event)}
-                    onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
-                    onDragOver={(event) => entryDropTarget && handleDropTargetDragOver(event, entryDropTarget)}
-                    onDragLeave={clearDropState}
-                    onDrop={(event) => entryDropTarget && void handleDropOnTarget(event, entryDropTarget)}
-                    onMouseDown={preventTextSelectionOnShift}
-                    onClick={(event) => handleEntrySelection(entry, event)}
-                    onDoubleClick={() => { if (!busy && activeSpace) openFolder(activeSpace.id, entry.path); }}
-                    onContextMenu={(event) => openContextMenu(event, "folder", entry)}
-                    onKeyDown={(event) => handleEntryKeyDown(entry, event)}
-                  >
-                    <div className="file-list-name-cell">
-                      <div className="file-list-name">
-                        <Folder className="file-row-icon" size={20} aria-hidden="true" />
-                        <span><strong>{entry.name}</strong><small>{folderContentLabel(entry)}</small></span>
-                      </div>
-                    </div>
-                    <span>{formatBytes(entry.totalSize)}</span>
-                    <span className="file-row-tail"><span>{formatDate(entry.updatedAt)}</span></span>
-                  </div>
-                ) : (
-                  <div
-                    key={entry.id}
-                    className={`file-list-row file-row ${isEntrySelected(entry) ? "is-selected" : ""}`}
-                    role="row"
-                    tabIndex={0}
-                    draggable
-                    onDragStart={(event) => handleInternalDragStart(entry, event)}
-                    onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
-                    onMouseDown={preventTextSelectionOnShift}
-                    onClick={(event) => handleEntrySelection(entry, event)}
-                    onDoubleClick={() => { if (!busy) void downloadFile(settings, entry.file); }}
-                    onContextMenu={(event) => openContextMenu(event, "file", entry)}
-                    onKeyDown={(event) => handleEntryKeyDown(entry, event)}
-                  >
-                    <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>
-                          <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>
-                    <span className="file-row-tail"><span>{formatDate(entry.file.updated_at)}</span></span>
-                  </div>
-                );
-              })}
+              {virtualExplorerRows.topSpacerHeight > 0 && (
+                <div className="file-list-virtual-spacer" style={{ height: virtualExplorerRows.topSpacerHeight }} aria-hidden="true" />
+              )}
+              {virtualExplorerRows.entries.map((entry, index) => renderExplorerEntry(entry, virtualExplorerRows.startIndex + index + 2))}
+              {virtualExplorerRows.bottomSpacerHeight > 0 && (
+                <div className="file-list-virtual-spacer" style={{ height: virtualExplorerRows.bottomSpacerHeight }} aria-hidden="true" />
+              )}
            </div>
          </div>
        </section>
--- a/webui/src/features/files/components/ManagedFileChooser.tsx
+++ b/webui/src/features/files/components/ManagedFileChooser.tsx
--- a/webui/src/features/files/utils/fileManagerUtils.ts
+++ b/webui/src/features/files/utils/fileManagerUtils.ts
@@ -2,6 +2,13 @@ import { formatDateTime as formatPlatformDateTime } from "@govoplan/core-webui";
 import type { FileFolder, ManagedFile } from "../../../api/files";
 import type { DragSelectionState, EntrySelectionKey, ExplorerEntry, FileEntry, FolderEntry, FolderNode, SortColumn, SortDirection } from "../types";

+type FolderStats = {
+  directFiles: number;
+  childFolders: Set<string>;
+  totalSize: number;
+  updatedAt: string;
+};
+
 export function buildFolderTree(files: ManagedFile[], folders: FileFolder[]): FolderNode[] {
  const byPath = new Map<string, FolderNode>();
  const ensureNode = (path: string, persisted: boolean): FolderNode | null => {
@@ -71,21 +78,23 @@ export function buildExplorerEntries(files: ManagedFile[], folders: FileFolder[]
  const prefix = folder ? `${folder}/` : "";
  const folderMap = new Map<string, FolderEntry>();
  const directFiles: FileEntry[] = [];
+  const folderStats = buildFolderStats(files, folders);

  for (const persisted of folders) {
    const path = normalizeFolder(persisted.path);
    if (!path.startsWith(prefix) || path === folder) continue;
    const relative = prefix ? path.slice(prefix.length) : path;
    if (!relative || relative.includes("/")) continue;
+    const stats = folderStats.get(path);
    folderMap.set(path, {
      kind: "folder",
      id: `folder:${path}`,
      name: relative,
      path,
-      fileCount: 0,
-      folderCount: 0,
-      totalSize: 0,
-      updatedAt: persisted.updated_at,
+      fileCount: stats?.directFiles ?? 0,
+      folderCount: stats?.childFolders.size ?? 0,
+      totalSize: stats?.totalSize ?? 0,
+      updatedAt: latestTimestamp(persisted.updated_at, stats?.updatedAt),
      persisted: true
    });
  }
@@ -102,31 +111,22 @@ export function buildExplorerEntries(files: ManagedFile[], folders: FileFolder[]
    }
    const folderName = relativePath.slice(0, slashIndex);
    const folderPath = prefix ? `${folder}/${folderName}` : folderName;
-    const existing = folderMap.get(folderPath);
-    if (existing) {
-      existing.totalSize += file.size_bytes;
-      if (file.updated_at > existing.updatedAt) existing.updatedAt = file.updated_at;
-    } else {
+    if (!folderMap.has(folderPath)) {
+      const stats = folderStats.get(folderPath);
      folderMap.set(folderPath, {
        kind: "folder",
        id: `folder:${folderPath}`,
        name: folderName,
        path: folderPath,
-        fileCount: 0,
-        folderCount: 0,
-        totalSize: file.size_bytes,
-        updatedAt: file.updated_at,
+        fileCount: stats?.directFiles ?? 0,
+        folderCount: stats?.childFolders.size ?? 0,
+        totalSize: stats?.totalSize ?? file.size_bytes,
+        updatedAt: stats?.updatedAt || file.updated_at,
        persisted: false
      });
    }
  }

-  for (const entry of folderMap.values()) {
-    const counts = directFolderCounts(files, folders, entry.path);
-    entry.fileCount = counts.files;
-    entry.folderCount = counts.folders;
-  }
-
  return [...Array.from(folderMap.values()), ...directFiles];
 }

@@ -164,25 +164,55 @@ export function entryModifiedTime(entry: ExplorerEntry): number {
 }

 export function directFolderCounts(files: ManagedFile[], folders: FileFolder[], folderPath: string): { files: number; folders: number } {
-  const normalized = normalizeFolder(folderPath);
-  const prefix = normalized ? `${normalized}/` : "";
-  const directFiles = files.filter((file) => parentFolderPath(file.display_path) === normalized).length;
-  const childFolders = new Set<string>();
+  const stats = buildFolderStats(files, folders).get(normalizeFolder(folderPath));
+  return { files: stats?.directFiles ?? 0, folders: stats?.childFolders.size ?? 0 };
+}
+
+function buildFolderStats(files: ManagedFile[], folders: FileFolder[]): Map<string, FolderStats> {
+  const statsByPath = new Map<string, FolderStats>();
+  const ensureStats = (path: string): FolderStats => {
+    const normalized = normalizeFolder(path);
+    const existing = statsByPath.get(normalized);
+    if (existing) return existing;
+    const stats: FolderStats = { directFiles: 0, childFolders: new Set(), totalSize: 0, updatedAt: "" };
+    statsByPath.set(normalized, stats);
+    return stats;
+  };
+
  for (const folder of folders) {
    const path = normalizeFolder(folder.path);
-    if (!path.startsWith(prefix) || path === normalized) continue;
-    const relative = prefix ? path.slice(prefix.length) : path;
-    if (!relative) continue;
-    childFolders.add(relative.split("/")[0]);
+    if (!path) continue;
+    const parts = path.split("/");
+    const parentPath = normalizeFolder(parts.slice(0, -1).join("/"));
+    const name = parts[parts.length - 1];
+    if (name) ensureStats(parentPath).childFolders.add(name);
+    ensureStats(path);
  }
+
  for (const file of files) {
-    const path = normalizeFilePath(file.display_path);
-    if (!path.startsWith(prefix)) continue;
-    const relative = prefix ? path.slice(prefix.length) : path;
-    if (!relative || !relative.includes("/")) continue;
-    childFolders.add(relative.split("/")[0]);
+    const parts = normalizeFilePath(file.display_path || file.filename).split("/").filter(Boolean);
+    if (parts.length === 0) continue;
+    const directParentPath = normalizeFolder(parts.slice(0, -1).join("/"));
+    ensureStats(directParentPath).directFiles += 1;
+
+    for (let index = 0; index < parts.length - 1; index += 1) {
+      const folderPath = parts.slice(0, index + 1).join("/");
+      const stats = ensureStats(folderPath);
+      stats.totalSize += file.size_bytes;
+      stats.updatedAt = latestTimestamp(stats.updatedAt, file.updated_at);
+
+      const parentPath = normalizeFolder(parts.slice(0, index).join("/"));
+      ensureStats(parentPath).childFolders.add(parts[index]);
+    }
  }
-  return { files: directFiles, folders: childFolders.size };
+
+  return statsByPath;
+}
+
+function latestTimestamp(current: string, candidate?: string): string {
+  if (!candidate) return current;
+  if (!current) return candidate;
+  return candidate > current ? candidate : current;
 }

 export function folderContentLabel(entry: FolderEntry): string {
@@ -209,13 +239,14 @@ export function buildFolderEntryFromSources(files: ManagedFile[], folders: FileF
  const sortedDates = childFiles.map((file) => file.updated_at).sort();
  const latestFileDate = sortedDates.length > 0 ? sortedDates[sortedDates.length - 1] : undefined;
  const updatedAt = latestFileDate || persistedFolder?.updated_at || new Date().toISOString();
+  const counts = directFolderCounts(files, folders, normalizedPath);
  return {
    kind: "folder",
    id: `folder:${normalizedPath}`,
    name: lastPathSegment(normalizedPath) || "Root",
    path: normalizedPath,
-    fileCount: directFolderCounts(files, folders, normalizedPath).files,
-    folderCount: directFolderCounts(files, folders, normalizedPath).folders,
+    fileCount: counts.files,
+    folderCount: counts.folders,
    totalSize: childFiles.reduce((total, file) => total + file.size_bytes, 0),
    updatedAt,
    persisted: Boolean(persistedFolder)