{
+ if (e.key === 'Escape') {
+ e.stopPropagation();
+ setOpen(false);
+ button.current?.focus();
+ }
+ }}
+ className="absolute left-0 top-full z-30 mt-1 min-w-48 rounded-md border border-border bg-card py-1 shadow-lg"
+ >
+ {crumbs.map((c) => (
+
+ ))}
+
+ )}
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/DeleteDialog.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/DeleteDialog.tsx
new file mode 100644
index 0000000..fd5b684
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/DeleteDialog.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import type { NcEntry } from '@/lib/nextcloud-files-api';
+import { Dialog } from './Dialog';
+
+/**
+ * Rueckfrage vor dem Loeschen (quick-261008-mzu): nennt den Namen bzw. die
+ * Anzahl und dass die Eintraege im Papierkorb der Nextcloud wiederherstellbar sind.
+ */
+export function DeleteDialog({
+ entries,
+ onConfirm,
+ onClose,
+}: {
+ entries: NcEntry[];
+ onConfirm: () => Promise {
+ if (e.target === e.currentTarget) onCloseRef.current();
+ }}
+ >
+ {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: Fokusfalle und Escape im Dialog */}
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/DropOverlay.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/DropOverlay.tsx
new file mode 100644
index 0000000..9551509
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/DropOverlay.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { UploadIcon } from './icons';
+
+/**
+ * Ablage-Markierung (quick-261008-mzu, L-09): das eine laute Element der
+ * Dateiansicht. Liegt ueber der Dateikarte, faengt keine Zeigerereignisse ab
+ * (die Ordnerzeilen darunter bleiben Ablageziele) und nennt das Ziel gross.
+ * Das Schild bleibt beim Scrollen im sichtbaren Bereich.
+ */
+export function DropOverlay({ targetName }: { targetName: string }) {
+ const t = useTranslations('nextcloudFiles.browser.drop');
+ return (
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/EntryMenu.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/EntryMenu.tsx
new file mode 100644
index 0000000..16f1826
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/EntryMenu.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface EntryAction {
+ id: string;
+ label: string;
+ icon: ReactNode;
+ /** Verweis statt Knopf (z. B. "In Nextcloud öffnen" im neuen Tab). */
+ href?: string;
+ onSelect?: () => void;
+ destructive?: boolean;
+ /** Trennlinie vor diesem Eintrag. */
+ separated?: boolean;
+}
+
+/**
+ * Menue eines Eintrags (quick-261008-mzu): dasselbe fuer den ⋯-Knopf und den
+ * Rechtsklick. Aus einer Aktionsliste gebaut, damit Etappe 2 "Teilen" ergaenzen
+ * kann. Pfeiltasten wandern, Escape schliesst, der Fokus kehrt zum Ausloeser zurueck.
+ */
+export function EntryMenu({
+ label,
+ actions,
+ x,
+ y,
+ onClose,
+ returnFocus,
+}: {
+ label: string;
+ actions: EntryAction[];
+ /** Bildschirmposition (Mauszeiger oder Unterkante des Knopfes). */
+ x: number;
+ y: number;
+ onClose: () => void;
+ returnFocus?: HTMLElement | null;
+}) {
+ const menu = useRef
+
+ + {title} +
+{children}
+ {footer && (
+
+ {footer}
+
+ )}
+ e.preventDefault()}
+ style={{ left: pos.left, top: pos.top }}
+ className="fixed z-50 min-w-52 rounded-lg border border-border bg-card py-1 shadow-lg motion-safe:animate-[nc-fade_100ms_ease-out]"
+ >
+ {actions.map((a) => (
+
,
+ document.body,
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileBrowser.test.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileBrowser.test.tsx
new file mode 100644
index 0000000..a5f898d
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileBrowser.test.tsx
@@ -0,0 +1,522 @@
+import {
+ act,
+ cleanup,
+ fireEvent,
+ render as rtlRender,
+ screen,
+ waitFor,
+ within,
+} from '@testing-library/react';
+import { NextIntlClientProvider } from 'next-intl';
+import type { ReactElement } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+ type NcEntry,
+ type NcListing,
+ NextcloudFilesRequestError,
+} from '@/lib/nextcloud-files-api';
+import { useAuthStore } from '@/lib/stores/auth-store';
+import de from '@/messages/de.json';
+import { FileBrowser } from './FileBrowser';
+
+const mockList = vi.fn();
+const mockCreate = vi.fn();
+const mockMove = vi.fn();
+const mockDelete = vi.fn();
+const mockUpload = vi.fn();
+
+vi.mock('@/lib/nextcloud-files-api', async (importOriginal) => {
+ const actual = await importOriginal
+ {a.separated &&
} + {a.href ? ( + onCloseRef.current()} + > + {a.icon} + {a.label} + + ) : ( + + )} +
+ ))}
+ } + {a.href ? ( + onCloseRef.current()} + > + {a.icon} + {a.label} + + ) : ( + + )} +
+ {[0, 1, 2, 3, 4].map((i) => (
+
+ );
+ } else if (loadError && !listing) {
+ const locked = loadError.code === 'nextcloudLocked';
+ const unreachable =
+ loadError.code === null ||
+ loadError.code === 'nextcloudUnavailable' ||
+ loadError.code === 'network' ||
+ loadError.code === 'nextcloudError';
+ body = (
+
+
+
+
+ ))}
+
+
+ );
+ } else if (entries.length === 0) {
+ // Die leere Flaeche ist selbst das Ablageziel: gestrichelt wie die Ablage-Markierung.
+ body = (
+ + {locked + ? errorText(tCodes, loadError, locale) + : unreachable + ? t('unreachable') + : errorText(tCodes, loadError, locale)} +
+ {unreachable &&{t('unreachableHint')}
} + +
+
+ );
+ } else if (effectiveView === 'grid') {
+ body =
+
+
+ {t('empty.title')}
+{t('empty.hint')}
+ +
+ {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: Tastenbelegung der Dateiansicht (Entf, F2, Strg+A …) gilt fuer alle Zeilen darin */}
+
+
+
+ void transfers.resolve(id, choice)}
+ onClearFinished={transfers.clearFinished}
+ />
+
+ {menu && (
+ setMenu(null)}
+ />
+ )}
+
+ {dialog?.kind === 'newFolder' && (
+ e.name),
+ )}
+ onSubmit={submitNewFolder}
+ onClose={() => setDialog(null)}
+ />
+ )}
+ {dialog?.kind === 'rename' && (
+ submitRename(dialog.entry, name)}
+ onClose={() => setDialog(null)}
+ />
+ )}
+ {dialog?.kind === 'move' && (
+ confirmMove(dialog.entries, target)}
+ onClose={() => setDialog(null)}
+ />
+ )}
+ {dialog?.kind === 'delete' && (
+ confirmDelete(dialog.entries)}
+ onClose={() => setDialog(null)}
+ />
+ )}
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileGrid.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileGrid.tsx
new file mode 100644
index 0000000..e8f3381
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileGrid.tsx
@@ -0,0 +1,181 @@
+'use client';
+
+import { useLocale, useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { formatAbsolute, formatSize } from '@/components/nextcloud-files/file-format';
+import { fileTypeOf } from '@/components/nextcloud-files/file-types';
+import { type NcEntry, previewUrl } from '@/lib/nextcloud-files-api';
+import type { EntryViewProps } from './FileList';
+import { CheckIcon, MoreIcon } from './icons';
+import { TypeTile } from './TypeTile';
+
+/** Vorschauflaeche: echtes Bild, wenn die Nextcloud eines liefert, sonst die grosse Typkachel. */
+function PreviewSurface({ entry }: { entry: NcEntry }) {
+ const [failed, setFailed] = useState(false);
+ // Echte Vorschauen fuer Bilder und Videos; Textvorschauen waeren nur ein fast leeres Blatt.
+ const family = fileTypeOf(entry).family;
+ const image =
+ (family === 'image' || family === 'media') && entry.hasPreview && entry.fileId && !failed;
+ return (
+
+ {selectedEntries.length > 0 ? (
+ downloadEntries(selectedEntries)}
+ onMove={() => setDialog({ kind: 'move', entries: selectedEntries })}
+ onDelete={() => setDialog({ kind: 'delete', entries: selectedEntries })}
+ onClear={() => dispatch({ type: 'clear' })}
+ />
+ ) : (
+ navigate(p)}
+ dropTarget={dropTarget}
+ onNewFolder={() => setDialog({ kind: 'newFolder' })}
+ onUploadClick={() => fileInput.current?.click()}
+ view={view}
+ onViewChange={changeView}
+ sort={sort}
+ onSortChange={setSort}
+ disabled={!listing}
+ />
+ )}
+
+ {
+ const files = e.target.files ? Array.from(e.target.files) : [];
+ e.target.value = '';
+ if (files.length > 0) uploadPicked(files);
+ }}
+ />
+ {(notice || listing?.truncated) && (
+
+ {notice && (
+
+ )}
+ {body}
+ {listing && (
+ + {notice} +
+ )} + {listing?.truncated && ( +{t('truncated')}
+ )} +
+
+ )}
+ {dropTarget !== null && + {status ? ( + {status} + ) : ( + t('count', { count: entries.length }) + )} +
+ {shownQuota &&
+ {image && entry.fileId ? (
+ // biome-ignore lint/performance/noImgElement: Vorschau kommt ueber den Tessera-Proxy
+ // biome-ignore lint/a11y/noNoninteractiveElementInteractions: onError ist ein Ladefehler-Rueckfall
+ 
setFailed(true)}
+ />
+ ) : (
+
+ );
+}
+
+/**
+ * Rasteransicht (quick-261008-mzu): Vorschauflaechen mit dem Namen darunter.
+ * Gleiches Auswahl-, Menue- und Tastaturmodell wie die Liste.
+ */
+export function FileGrid({
+ entries,
+ selected,
+ focusIndex,
+ dropTarget,
+ registerItem,
+ onItemClick,
+ onItemOpen,
+ onToggle,
+ onMenu,
+ onFocusItem,
+}: EntryViewProps) {
+ const t = useTranslations('nextcloudFiles.browser');
+ const locale = useLocale();
+ const count = selected.size;
+
+ return (
+ // biome-ignore lint/a11y/useSemanticElements: ARIA-Raster (Grid-Muster), keine Tabelle
+
+ {/* Eine einzige Zeile ohne eigene Box: das Raster ordnet die Zellen frei an. */}
+ {/* biome-ignore lint/a11y/useSemanticElements: Zeile des ARIA-Rasters */}
+ {/* biome-ignore lint/a11y/useFocusableInteractive: fokussierbar sind die Zellen (wandernder Tabindex) */}
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileList.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileList.tsx
new file mode 100644
index 0000000..78bd205
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/FileList.tsx
@@ -0,0 +1,250 @@
+'use client';
+
+import { useLocale, useTranslations } from 'next-intl';
+import { useEffect, useRef } from 'react';
+import {
+ formatAbsolute,
+ formatRelative,
+ formatSize,
+} from '@/components/nextcloud-files/file-format';
+import { downloadUrl, type NcEntry } from '@/lib/nextcloud-files-api';
+import { ChevronDownIcon, ChevronUpIcon, MoreIcon } from './icons';
+import type { SortDir, SortKey } from './Toolbar';
+import { TypeTile } from './TypeTile';
+
+/** Kopfzellen: klebt unter der App-Leiste, damit die Spalten beim Scrollen lesbar bleiben. */
+const TH =
+ 'sticky top-[calc(var(--header-height)+var(--nc-bar-h,0px))] z-10 h-9 border-b border-border bg-card p-0 font-medium';
+
+export interface EntryViewProps {
+ entries: NcEntry[];
+ selected: ReadonlySet
+ {entries.map((entry, index) => {
+ const isSelected = selected.has(entry.path);
+ const isFolder = entry.type === 'folder';
+ const isDrop = isFolder && dropTarget === entry.path;
+ return (
+ // biome-ignore lint/a11y/useSemanticElements: Zelle des ARIA-Rasters
+ // biome-ignore lint/a11y/useKeyWithClickEvents: Tastatur ist am Behaelter gebunden (Enter, Leertaste, Pfeile)
+
+ registerItem(index, el)}
+ role="gridcell"
+ aria-selected={isSelected}
+ aria-label={entry.name}
+ tabIndex={index === focusIndex ? 0 : -1}
+ data-drop-folder={isFolder ? entry.path : undefined}
+ data-entry-path={entry.path}
+ onFocus={(e) => {
+ if (e.target === e.currentTarget) onFocusItem(index);
+ }}
+ onClick={(e) => onItemClick(e, entry, index)}
+ onDoubleClick={() => onItemOpen(entry)}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ onMenu(entry, e.clientX, e.clientY, e.currentTarget);
+ }}
+ className={`group relative min-w-0 cursor-default rounded-lg p-1.5 outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+ isDrop
+ ? 'bg-primary/30 ring-2 ring-primary-strong'
+ : isSelected
+ ? 'bg-primary/12 ring-2 ring-primary-strong'
+ : 'hover:bg-accent/80'
+ }`}
+ >
+
+ );
+ })}
+
+ {isFolder ? (
+
+ ) : (
+
+ + {entry.name} +
+ )} ++ {formatSize(entry.size, locale)} +
+| + + onSelectAll(!all)} + className="h-4 w-4" + /> + + | + {header('name', t('columns.name'), 'pl-1')} + {header('size', t('columns.size'), 'pr-1', 'right')} + {header('modified', t('columns.modified'), 'hidden pl-1 sm:table-cell')} ++ {t('columns.actions')} + | +|||
|---|---|---|---|---|
| + + e.stopPropagation()} + onChange={() => onToggle(entry, index)} + className={`h-4 w-4 transition-opacity pointer-coarse:opacity-100 ${ + isSelected || count > 0 + ? 'opacity-100' + : 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100' + }`} + /> + + | +
+
+ |
+ + {formatSize(entry.size, locale)} + | ++ {entry.mtime ? formatRelative(entry.mtime, now, locale) : ''} + | ++ + | +
+ {percent !== null && (
+ // biome-ignore lint/a11y/useSemanticElements: laesst sich nicht einheitlich gestalten
+ ();
+ return {
+ ...actual,
+ listFolder: (...a: unknown[]) => mockList(...a),
+ createFolder: (...a: unknown[]) => mockCreate(...a),
+ };
+});
+
+const MB = 1024 * 1024;
+
+interface Call {
+ file: File;
+ path: string;
+ opts: UploadOptions;
+ resolve: () => void;
+ reject: (err: unknown) => void;
+}
+let calls: Call[] = [];
+
+function render(ui: ReactElement) {
+ return rtlRender(
+
+ {ui}
+ ,
+ );
+}
+
+let api: ReturnType;
+const onFolderChanged = vi.fn();
+
+function Harness({ quota = null }: { quota?: number | null }) {
+ api = useTransfers({ quotaAvailable: quota, onFolderChanged });
+ return (
+ void api.resolve(id, c)}
+ onClearFinished={api.clearFinished}
+ />
+ );
+}
+
+const file = (name: string, size = 3 * MB) => new File([new Uint8Array(size)], name);
+const queue = (list: File[], dir = '/', extra: Partial = {}) =>
+ act(() =>
+ api.enqueue(
+ list.map((f) => ({ file: f, relativeDir: '', ...extra })),
+ dir,
+ ),
+ );
+
+beforeEach(() => {
+ calls = [];
+ mockUpload.mockReset().mockImplementation(
+ (f: File, path: string, opts: UploadOptions) =>
+ new Promise<{ path: string; size: number }>((resolve, reject) => {
+ calls.push({
+ file: f,
+ path,
+ opts,
+ resolve: () => resolve({ path, size: f.size }),
+ reject,
+ });
+ opts.signal?.addEventListener('abort', () =>
+ reject(new NextcloudFilesRequestError(0, 'aborted', 'abgebrochen')),
+ );
+ }),
+ );
+ mockList.mockReset().mockResolvedValue({
+ path: '/',
+ entries: [{ name: 'Bericht.pdf' }, { name: 'Bericht (2).pdf' }],
+ quota: { used: 0, available: null },
+ truncated: false,
+ });
+ mockCreate.mockReset().mockResolvedValue({ path: '/x' });
+ onFolderChanged.mockReset();
+});
+
+afterEach(() => cleanup());
+
+describe('Uebertragungsleiste und Warteschlange', () => {
+ it('startet hoechstens zwei Uebertragungen gleichzeitig', async () => {
+ render(
+
+ );
+}
+
+function TransferRow({
+ transfer: x,
+ folderName,
+ locale,
+ t,
+ errorMessage,
+ onCancel,
+ onRetry,
+ onResolve,
+}: {
+ transfer: Transfer;
+ folderName: string;
+ locale: string;
+ t: ReturnType;
+ errorMessage: string;
+ onCancel: (id: string) => void;
+ onRetry: (id: string) => void;
+ onResolve: (id: string, choice: ConflictChoice) => void;
+}) {
+ const percent =
+ x.size > 0 ? Math.round((x.loaded / x.size) * 100) : x.status === 'done' ? 100 : 0;
+ const showBar = x.status === 'running' || x.status === 'assembling' || x.status === 'queued';
+
+ let line: React.ReactNode;
+ switch (x.status) {
+ case 'queued':
+ line = {t('queued')};
+ break;
+ case 'running':
+ line = (
+
+ {t('progress', {
+ loaded: formatSize(x.loaded, locale),
+ total: formatSize(x.size, locale),
+ })}
+
+ );
+ break;
+ case 'assembling':
+ line = {t('assembling')};
+ break;
+ case 'done':
+ line = (
+
+
+
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/TypeTile.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/TypeTile.tsx
new file mode 100644
index 0000000..b371217
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/TypeTile.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { useState } from 'react';
+import { FAMILY_CLASS, fileTypeOf } from '@/components/nextcloud-files/file-types';
+import { type NcEntry, previewUrl } from '@/lib/nextcloud-files-api';
+import { FileGlyph, FOLDER_PATH } from './icons';
+
+const SIZE = {
+ sm: { box: 'h-8 w-8 rounded-md', code: 'text-[10px] tracking-[0.03em]', glyph: 16 },
+ lg: { box: 'h-[72px] w-[72px] rounded-lg', code: 'text-[15px] tracking-[0.05em]', glyph: 32 },
+} as const;
+
+/** Ordnersymbol: Flaeche leicht gefuellt, Kontur in der Ordnerfarbe. */
+function FolderGlyph({ size }: { size: number }) {
+ return (
+
+ );
+}
+
+/**
+ * Typkachel (quick-261008-mzu, L-09): Mosaikstein in der Farbe der Dateifamilie
+ * mit dem Kurzzeichen ("PDF", "XLSX"); Ordner zeigen das Ordnersymbol im
+ * gedaempften Mosaik-Gelb. In der Liste zeigen Bilder mit Vorschau ihr echtes
+ * Vorschaubild; laedt es nicht, faellt die Kachel auf das Kurzzeichen zurueck.
+ */
+export function TypeTile({
+ entry,
+ size = 'sm',
+ preview = false,
+}: {
+ entry: Pick &
+ Partial>;
+ size?: 'sm' | 'lg';
+ /** Vorschaubild statt Kurzzeichen, wenn die Nextcloud eines liefert. */
+ preview?: boolean;
+}) {
+ const [failed, setFailed] = useState(false);
+ const { family, code } = fileTypeOf(entry);
+ const s = SIZE[size];
+ // Nur Bilder: Textvorschauen waeren bei 32 px nur ein weisses Blatt.
+ const showPreview =
+ preview && !failed && family === 'image' && entry.hasPreview === true && !!entry.fileId;
+
+ if (showPreview && entry.fileId) {
+ return (
+
+ {/* biome-ignore lint/performance/noImgElement: Vorschau kommt ueber den Tessera-Proxy, next/image passt nicht */}
+ {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: onError ist ein Ladefehler-Rueckfall */}
+ setFailed(true)}
+ />
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/icons.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/icons.tsx
new file mode 100644
index 0000000..1e80caf
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/icons.tsx
@@ -0,0 +1,157 @@
+import type { ReactNode, SVGProps } from 'react';
+
+/**
+ * Symbole der Dateiansicht (quick-261008-mzu). Pfade nach Lucide (ISC), wie im
+ * restlichen Portal inline — keine Symbolbibliothek als Abhaengigkeit.
+ */
+function Icon({
+ size = 16,
+ children,
+ ...rest
+}: SVGProps & { size?: number; children: ReactNode }) {
+ return (
+
+ );
+}
+
+type P = SVGProps & { size?: number };
+
+export const FOLDER_PATH =
+ 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z';
+
+export const FolderIcon = (p: P) => (
+
+
+);
+export const FolderPlusIcon = (p: P) => (
+
+
+);
+export const UploadIcon = (p: P) => (
+
+
+);
+export const DownloadIcon = (p: P) => (
+
+
+);
+export const ListIcon = (p: P) => (
+
+
+);
+export const GridIcon = (p: P) => (
+
+
+);
+export const ChevronRightIcon = (p: P) => (
+
+
+);
+export const ChevronDownIcon = (p: P) => (
+
+
+);
+export const ChevronUpIcon = (p: P) => (
+
+
+);
+export const CloseIcon = (p: P) => (
+
+
+);
+export const MoreIcon = (p: P) => (
+
+
+);
+export const PencilIcon = (p: P) => (
+
+
+);
+export const MoveIcon = (p: P) => (
+
+
+);
+export const TrashIcon = (p: P) => (
+
+
+);
+export const ExternalIcon = (p: P) => (
+
+
+);
+export const OpenIcon = (p: P) => (
+
+
+);
+export const CheckIcon = (p: P) => (
+
+
+);
+export const RetryIcon = (p: P) => (
+
+
+);
+export const FileGlyph = (p: P) => (
+
+
+);
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/nextcloud-files-page.test.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/nextcloud-files-page.test.tsx
index 7e58328..dc6337f 100644
--- a/apps/web/src/app/(portal)/modules/nextcloud-files/nextcloud-files-page.test.tsx
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/nextcloud-files-page.test.tsx
@@ -5,6 +5,7 @@ import {
render as rtlRender,
screen,
waitFor,
+ within,
} from '@testing-library/react';
import { NextIntlClientProvider } from 'next-intl';
import type { ReactElement } from 'react';
@@ -35,6 +36,7 @@ const mockStartFlow = vi.fn();
const mockPollFlow = vi.fn();
const mockCancelFlow = vi.fn();
const mockDisconnect = vi.fn();
+const mockListFolder = vi.fn();
vi.mock('@/lib/nextcloud-files-api', async (importOriginal) => {
const actual = await importOriginal();
@@ -49,6 +51,7 @@ vi.mock('@/lib/nextcloud-files-api', async (importOriginal) => {
pollLoginFlow: (...args: unknown[]) => mockPollFlow(...args),
cancelLoginFlow: (...args: unknown[]) => mockCancelFlow(...args),
disconnectNextcloud: (...args: unknown[]) => mockDisconnect(...args),
+ listFolder: (...args: unknown[]) => mockListFolder(...args),
};
});
@@ -82,6 +85,26 @@ beforeEach(() => {
mockPollFlow.mockReset();
mockCancelFlow.mockReset().mockResolvedValue({ cancelled: true });
mockDisconnect.mockReset();
+ mockListFolder.mockReset().mockResolvedValue({
+ path: '/',
+ entries: [
+ {
+ name: 'Projekte',
+ path: '/Projekte',
+ type: 'folder',
+ size: 0,
+ mime: null,
+ mtime: null,
+ etag: null,
+ fileId: '1',
+ permissions: 'RGDNVCK',
+ hasPreview: false,
+ favorite: false,
+ },
+ ],
+ quota: { used: 0, available: null },
+ truncated: false,
+ });
});
afterEach(() => cleanup());
@@ -466,3 +489,32 @@ describe('AccountBar', () => {
expect(screen.getByText('Angemeldet als Anna Müller')).toBeTruthy();
});
});
+
+// --- Aufgabe 5: Dateiansicht -------------------------------------------------------------
+
+describe('Dateiansicht auf der Seite', () => {
+ it('verbunden: die Dateiansicht laedt die Wurzel und zeigt die Eintraege', async () => {
+ mockGetStatus.mockResolvedValue(status({ account: account() }));
+ render(
{connected ? (
= 4,5:1 je Modus prueft
+ file-type-contrast.test.ts. */
+ --ft-folder-bg: oklch(0.94 0.09 100);
+ --ft-folder-fg: oklch(0.45 0.1 95);
+ --ft-doc-bg: oklch(0.93 0.035 255);
+ --ft-doc-fg: oklch(0.46 0.11 255);
+ --ft-sheet-bg: oklch(0.93 0.035 150);
+ --ft-sheet-fg: oklch(0.46 0.11 150);
+ --ft-slides-bg: oklch(0.93 0.035 45);
+ --ft-slides-fg: oklch(0.46 0.11 45);
+ --ft-pdf-bg: oklch(0.93 0.035 27);
+ --ft-pdf-fg: oklch(0.46 0.11 27);
+ --ft-image-bg: oklch(0.93 0.035 305);
+ --ft-image-fg: oklch(0.46 0.11 305);
+ --ft-media-bg: oklch(0.93 0.035 340);
+ --ft-media-fg: oklch(0.46 0.11 340);
+ --ft-archive-bg: oklch(0.93 0.0175 75);
+ --ft-archive-fg: oklch(0.46 0.055 75);
+ --ft-code-bg: oklch(0.93 0.035 200);
+ --ft-code-fg: oklch(0.46 0.11 200);
+ --ft-other-bg: oklch(0.93 0.01 260);
+ --ft-other-fg: oklch(0.46 0.01 260);
}
.dark {
@@ -212,6 +258,28 @@
--status-idle-fg: oklch(0.72 0.02 260);
--status-orphan-fg: oklch(0.70 0.01 260);
--well: oklch(0.215 0.01 260);
+
+ /* Nextcloud-Dateien: Typfarben je Dateifamilie, dunkler Modus. */
+ --ft-folder-bg: oklch(0.36 0.07 100);
+ --ft-folder-fg: oklch(0.88 0.14 100);
+ --ft-doc-bg: oklch(0.33 0.045 255);
+ --ft-doc-fg: oklch(0.84 0.09 255);
+ --ft-sheet-bg: oklch(0.33 0.045 150);
+ --ft-sheet-fg: oklch(0.84 0.09 150);
+ --ft-slides-bg: oklch(0.33 0.045 45);
+ --ft-slides-fg: oklch(0.84 0.09 45);
+ --ft-pdf-bg: oklch(0.33 0.045 27);
+ --ft-pdf-fg: oklch(0.84 0.09 27);
+ --ft-image-bg: oklch(0.33 0.045 305);
+ --ft-image-fg: oklch(0.84 0.09 305);
+ --ft-media-bg: oklch(0.33 0.045 340);
+ --ft-media-fg: oklch(0.84 0.09 340);
+ --ft-archive-bg: oklch(0.33 0.0225 75);
+ --ft-archive-fg: oklch(0.84 0.045 75);
+ --ft-code-bg: oklch(0.33 0.045 200);
+ --ft-code-fg: oklch(0.84 0.09 200);
+ --ft-other-bg: oklch(0.33 0.01 260);
+ --ft-other-fg: oklch(0.84 0.01 260);
}
body {
@@ -832,3 +900,30 @@ html[data-desktop-os="linux"] .animate-pulse {
padding-block: 0.125rem;
line-height: 1.5rem;
}
+
+/* ---------------------------------------------------------------------------
+ Nextcloud-Dateien: Ablage-Markierung beim Ziehen (quick-261008-mzu). Das
+ einzige laute Element der Dateiansicht: diagonale Streifen im Akzent mit
+ gestrichelter Kante, solange Dateien ueber dem Fenster schweben.
+ ------------------------------------------------------------------------- */
+.nc-drop-stripes {
+ background-image: repeating-linear-gradient(
+ 135deg,
+ color-mix(in oklab, var(--primary) 22%, transparent) 0 10px,
+ transparent 10px 20px
+ );
+ outline: 2px dashed var(--primary-strong);
+ outline-offset: -2px;
+}
+
+/* Bewegung der Dateiansicht nur als Antwort auf eine Handlung (Auswahl,
+ Ablegen, erste Uebertragung); `motion-safe:` schaltet sie bei reduzierter
+ Bewegung ganz ab. */
+@keyframes nc-fade {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+@keyframes nc-rise {
+ from { opacity: 0; transform: translateY(12px); }
+ to { opacity: 1; transform: translateY(0); }
+}
diff --git a/apps/web/src/components/nextcloud-files/drop-entries.ts b/apps/web/src/components/nextcloud-files/drop-entries.ts
new file mode 100644
index 0000000..4269612
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/drop-entries.ts
@@ -0,0 +1,125 @@
+/**
+ * Abgelegte Dateien einsammeln (quick-261008-mzu): einzelne Dateien und ganze
+ * Ordner (ueber `webkitGetAsEntry`, rekursiv). Ordner liefern ihre Dateien mit
+ * dem relativen Unterordner, damit die Warteschlange fehlende Ordner anlegen
+ * kann. Grenzen: hoechstens 2000 Dateien und 20 Ebenen — darueber bricht das
+ * Einsammeln mit einem klaren Grund ab, statt halb hochzuladen.
+ *
+ * WICHTIG: `webkitGetAsEntry` funktioniert nur synchron im `drop`-Ereignis.
+ * Deshalb liest `entriesFromDrop` die Eintraege sofort und erst danach wird
+ * asynchron weitergearbeitet.
+ */
+
+export const MAX_DROP_FILES = 2000;
+export const MAX_DROP_DEPTH = 20;
+
+export interface DroppedFile {
+ file: File;
+ /** Unterordner relativ zum Ziel ("" = direkt ins Ziel), ohne fuehrenden Schraegstrich. */
+ relativeDir: string;
+}
+
+export type DropProblem = 'tooMany' | 'tooDeep' | 'unreadable';
+
+export interface DropResult {
+ files: DroppedFile[];
+ /** Leere Ordner, die trotzdem angelegt werden sollen (relativ zum Ziel). */
+ folders: string[];
+ problem: DropProblem | null;
+}
+
+interface FsEntry {
+ isFile: boolean;
+ isDirectory: boolean;
+ name: string;
+}
+interface FsFileEntry extends FsEntry {
+ file(ok: (f: File) => void, fail: (e: unknown) => void): void;
+}
+interface FsDirEntry extends FsEntry {
+ createReader(): {
+ readEntries(ok: (entries: FsEntry[]) => void, fail: (e: unknown) => void): void;
+ };
+}
+
+/** Was im `drop`-Ereignis SOFORT gelesen werden muss. */
+export interface DropSnapshot {
+ entries: FsEntry[];
+ files: File[];
+}
+
+/** Nur ein Ziehen mit Dateien zaehlt (kein markierter Text, keine Verweise). */
+export function hasFiles(dt: Pick | null | undefined): boolean {
+ if (!dt?.types) return false;
+ return Array.from(dt.types as ArrayLike).includes('Files');
+}
+
+export function snapshotDrop(dt: DataTransfer): DropSnapshot {
+ const entries: FsEntry[] = [];
+ const items = dt.items ? Array.from(dt.items) : [];
+ for (const item of items) {
+ if (item.kind !== 'file') continue;
+ const getter = (item as DataTransferItem & { webkitGetAsEntry?: () => FsEntry | null })
+ .webkitGetAsEntry;
+ const entry = typeof getter === 'function' ? getter.call(item) : null;
+ if (entry) entries.push(entry);
+ }
+ return { entries, files: dt.files ? Array.from(dt.files) : [] };
+}
+
+class Stop extends Error {
+ constructor(readonly problem: DropProblem) {
+ super(problem);
+ }
+}
+
+function readFile(entry: FsFileEntry): Promise {
+ return new Promise((resolve, reject) => entry.file(resolve, reject));
+}
+
+async function readAll(entry: FsDirEntry): Promise {
+ const reader = entry.createReader();
+ const all: FsEntry[] = [];
+ // readEntries liefert in Portionen (Chrome: 100); leer = fertig.
+ for (;;) {
+ const batch = await new Promise((resolve, reject) =>
+ reader.readEntries(resolve, reject),
+ );
+ if (batch.length === 0) return all;
+ all.push(...batch);
+ }
+}
+
+export async function collectDrop(snapshot: DropSnapshot): Promise {
+ // Ohne Eintragsschnittstelle (alte Browser, Tests): nur die flachen Dateien.
+ if (snapshot.entries.length === 0) {
+ const files = snapshot.files.map((file) => ({ file, relativeDir: '' }));
+ if (files.length > MAX_DROP_FILES) return { files: [], folders: [], problem: 'tooMany' };
+ return { files, folders: [], problem: null };
+ }
+ const files: DroppedFile[] = [];
+ const folders: string[] = [];
+
+ const walk = async (entry: FsEntry, dir: string, depth: number): Promise => {
+ if (entry.isFile) {
+ if (files.length >= MAX_DROP_FILES) throw new Stop('tooMany');
+ files.push({ file: await readFile(entry as FsFileEntry), relativeDir: dir });
+ return;
+ }
+ if (!entry.isDirectory) return;
+ if (depth >= MAX_DROP_DEPTH) throw new Stop('tooDeep');
+ const sub = dir ? `${dir}/${entry.name}` : entry.name;
+ folders.push(sub);
+ for (const child of await readAll(entry as FsDirEntry)) {
+ await walk(child, sub, depth + 1);
+ }
+ };
+
+ try {
+ for (const entry of snapshot.entries) await walk(entry, '', 0);
+ } catch (err) {
+ const problem = err instanceof Stop ? err.problem : 'unreadable';
+ return { files: [], folders: [], problem };
+ }
+ return { files, folders, problem: null };
+}
diff --git a/apps/web/src/components/nextcloud-files/error-text.ts b/apps/web/src/components/nextcloud-files/error-text.ts
new file mode 100644
index 0000000..6bb1037
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/error-text.ts
@@ -0,0 +1,57 @@
+import { NextcloudFilesRequestError } from '@/lib/nextcloud-files-api';
+import { formatSize } from './file-format';
+
+/** Uebersetzer fuer den Namensraum `nextcloudFiles.codes`. */
+export type CodesTranslator = (key: string, values?: Record) => string;
+
+const KNOWN = new Set([
+ 'lengthRequired',
+ 'chunkTooLarge',
+ 'fileTooLarge',
+ 'changedMeanwhile',
+ 'nameTaken',
+ 'quotaExceeded',
+ 'nextcloudLocked',
+ 'connectionExpired',
+ 'aborted',
+ 'network',
+ 'notFound',
+ 'moveIntoItself',
+ 'invalidName',
+ 'invalidPath',
+ 'nextcloudUnavailable',
+]);
+
+export interface ErrorLike {
+ code: string | null;
+ message: string;
+ extra?: Record;
+}
+
+export function toErrorLike(err: unknown): ErrorLike {
+ if (err instanceof NextcloudFilesRequestError) {
+ return { code: err.code, message: err.message, extra: err.extra };
+ }
+ return { code: null, message: '' };
+}
+
+/**
+ * Klartext zu einer Fehlerkennung der API (quick-261008-mzu). Unbekannte
+ * Kennungen zeigen die deutsche Meldung des Servers, sonst einen allgemeinen Satz.
+ */
+export function errorText(t: CodesTranslator, error: ErrorLike, locale: string): string {
+ const code = error.code ?? '';
+ if (code === 'nextcloudLocked') {
+ const seconds = Number(error.extra?.retryAfterSeconds);
+ const minutes = Math.max(
+ 1,
+ Math.ceil((Number.isFinite(seconds) && seconds > 0 ? seconds : 60) / 60),
+ );
+ return t('nextcloudLocked', { minutes });
+ }
+ if (code === 'quotaExceeded' && typeof error.extra?.free === 'number') {
+ return t('quotaExceededFree', { free: formatSize(error.extra.free, locale) });
+ }
+ if (KNOWN.has(code)) return t(code);
+ return error.message?.trim() ? error.message : t('generic');
+}
diff --git a/apps/web/src/components/nextcloud-files/file-format.test.ts b/apps/web/src/components/nextcloud-files/file-format.test.ts
new file mode 100644
index 0000000..7dd84a3
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/file-format.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import { formatAbsolute, formatRelative, formatSize, quotaParts } from './file-format';
+
+const GB = 1024 ** 3;
+
+describe('formatSize', () => {
+ it('Basis 1024, hoechstens eine Nachkommastelle, je Sprache', () => {
+ expect(formatSize(0, 'de')).toBe('0 B');
+ expect(formatSize(512, 'de')).toBe('512 B');
+ expect(formatSize(1536, 'de')).toBe('1,5 KB');
+ expect(formatSize(1536, 'en')).toBe('1.5 KB');
+ expect(formatSize(12 * 1024 * 1024, 'de')).toBe('12 MB');
+ expect(formatSize(4.2 * GB, 'de')).toBe('4,2 GB');
+ expect(formatSize(3 * 1024 ** 4, 'de')).toBe('3 TB');
+ });
+
+ it('rundet an der Einheitsgrenze in die naechste Einheit', () => {
+ expect(formatSize(1024 * 1024 - 10, 'de')).toBe('1 MB');
+ });
+
+ it('negative oder ungueltige Werte ergeben 0 B', () => {
+ expect(formatSize(-5, 'de')).toBe('0 B');
+ expect(formatSize(Number.NaN, 'de')).toBe('0 B');
+ });
+});
+
+describe('formatRelative', () => {
+ const now = new Date(2026, 9, 8, 15, 0, 0);
+
+ it('unter einer Minute: gerade eben / just now', () => {
+ expect(formatRelative(new Date(now.getTime() - 30_000), now, 'de')).toBe('gerade eben');
+ expect(formatRelative(new Date(now.getTime() - 30_000), now, 'en')).toBe('just now');
+ });
+
+ it('Minuten und Stunden in Kurzform', () => {
+ expect(formatRelative(new Date(now.getTime() - 3 * 3600_000), now, 'de')).toBe('vor 3 Std.');
+ expect(formatRelative(new Date(now.getTime() - 12 * 60_000), now, 'de')).toBe('vor 12 Min.');
+ });
+
+ it('Tage nach Kalendertagen: gestern', () => {
+ expect(formatRelative(new Date(2026, 9, 7, 9, 0), now, 'de')).toBe('gestern');
+ expect(formatRelative(new Date(2026, 9, 3, 9, 0), now, 'de')).toBe('vor 5 Tagen');
+ });
+
+ it('aelter als 30 Tage: Datum', () => {
+ expect(formatRelative(new Date(2026, 8, 8, 10, 0), now, 'de')).toBe('08.09.2026');
+ });
+
+ it('ISO-Zeichenkette wird angenommen', () => {
+ expect(formatRelative(new Date(now.getTime() - 2 * 3600_000).toISOString(), now, 'de')).toBe(
+ 'vor 2 Std.',
+ );
+ });
+});
+
+describe('formatAbsolute', () => {
+ it('Datum und Uhrzeit', () => {
+ const text = formatAbsolute(new Date(2026, 9, 8, 14, 5), 'de');
+ expect(text).toContain('08.10.2026');
+ expect(text).toContain('14:05');
+ });
+});
+
+describe('quotaParts', () => {
+ it('belegt von gesamt', () => {
+ const p = quotaParts({ used: 4.2 * GB, available: 5.8 * GB }, 'de');
+ expect(p).toMatchObject({ used: '4,2 GB', total: '10 GB', free: '5,8 GB' });
+ expect(p.ratio).toBeCloseTo(0.42, 5);
+ });
+
+ it('unbegrenzt: nur belegt', () => {
+ expect(quotaParts({ used: 4.2 * GB, available: null }, 'de')).toEqual({
+ used: '4,2 GB',
+ total: null,
+ free: null,
+ ratio: null,
+ });
+ });
+});
diff --git a/apps/web/src/components/nextcloud-files/file-format.ts b/apps/web/src/components/nextcloud-files/file-format.ts
new file mode 100644
index 0000000..f503d6d
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/file-format.ts
@@ -0,0 +1,116 @@
+/**
+ * Anzeigeformate der Dateiansicht (quick-261008-mzu): Groessen, relative und
+ * absolute Zeitangaben, Speicherplatz. Reine Funktionen, keine React-Abhaengigkeit.
+ */
+
+const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;
+
+/** Groesse zur Basis 1024 mit hoechstens einer Nachkommastelle: 1536 → "1,5 KB" (de). */
+export function formatSize(bytes: number, locale: string): string {
+ const value = Number.isFinite(bytes) && bytes > 0 ? bytes : 0;
+ let unit = 0;
+ let scaled = value;
+ while (scaled >= 1024 && unit < UNITS.length - 1) {
+ scaled /= 1024;
+ unit++;
+ }
+ // Rundung auf eine Stelle kann 1023,96 KB zu "1.024 KB" machen — dann eine Einheit hoeher.
+ if (unit < UNITS.length - 1 && Math.round(scaled * 10) / 10 >= 1024) {
+ scaled /= 1024;
+ unit++;
+ }
+ const number = new Intl.NumberFormat(locale, {
+ maximumFractionDigits: unit === 0 ? 0 : 1,
+ }).format(scaled);
+ return `${number} ${UNITS[unit]}`;
+}
+
+const JUST_NOW: Record = { de: 'gerade eben', en: 'just now' };
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+function toTime(date: Date | string | number): number {
+ return date instanceof Date ? date.getTime() : new Date(date).getTime();
+}
+
+/** Nur das Datum, z. B. "08.09.2026" (de). */
+export function formatDate(date: Date | string | number, locale: string): string {
+ return new Intl.DateTimeFormat(locale, {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ }).format(new Date(toTime(date)));
+}
+
+/**
+ * Relative Zeitangabe: "gerade eben", "vor 12 Min.", "vor 3 Std.", "gestern",
+ * "vor 5 Tagen"; was aelter als 30 Tage ist, erscheint als Datum.
+ */
+export function formatRelative(
+ date: Date | string | number,
+ now: Date | number,
+ locale: string,
+): string {
+ const then = toTime(date);
+ const ref = now instanceof Date ? now.getTime() : now;
+ if (!Number.isFinite(then)) return '';
+ const diff = ref - then;
+ if (diff < 60_000 && diff > -60_000) {
+ return JUST_NOW[locale.slice(0, 2)] ?? JUST_NOW.en;
+ }
+ if (diff < 0 || diff > 30 * DAY) return formatDate(then, locale);
+ const rtf = new Intl.RelativeTimeFormat(locale, { style: 'short', numeric: 'auto' });
+ if (diff < HOUR) return rtf.format(-Math.floor(diff / MINUTE), 'minute');
+ if (diff < DAY) return rtf.format(-Math.floor(diff / HOUR), 'hour');
+ // Ganze Kalendertage, damit "gestern" auch um 00:30 fuer 23:50 des Vortags stimmt.
+ const a = new Date(then);
+ const b = new Date(ref);
+ const days = Math.round(
+ (Date.UTC(b.getFullYear(), b.getMonth(), b.getDate()) -
+ Date.UTC(a.getFullYear(), a.getMonth(), a.getDate())) /
+ DAY,
+ );
+ return rtf.format(-Math.max(1, days), 'day');
+}
+
+/** Datum und Uhrzeit fuer den Tooltip, z. B. "08.10.2026, 14:05". */
+export function formatAbsolute(date: Date | string | number, locale: string): string {
+ return new Intl.DateTimeFormat(locale, {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ }).format(new Date(toTime(date)));
+}
+
+export interface QuotaParts {
+ /** Belegter Platz, formatiert. */
+ used: string;
+ /** Gesamter Platz (belegt + frei), formatiert; null = unbegrenzt oder unbekannt. */
+ total: string | null;
+ /** Freier Platz, formatiert; null = unbegrenzt oder unbekannt. */
+ free: string | null;
+ /** Anteil belegt 0..1; null = unbegrenzt. */
+ ratio: number | null;
+}
+
+/** Bestandteile der Speicheranzeige; der Satz selbst kommt aus den Sprachdateien. */
+export function quotaParts(
+ quota: { used: number; available: number | null },
+ locale: string,
+): QuotaParts {
+ const used = Math.max(0, quota.used);
+ if (quota.available === null || quota.available < 0) {
+ return { used: formatSize(used, locale), total: null, free: null, ratio: null };
+ }
+ const total = used + quota.available;
+ return {
+ used: formatSize(used, locale),
+ total: formatSize(total, locale),
+ free: formatSize(quota.available, locale),
+ ratio: total > 0 ? Math.min(1, used / total) : 0,
+ };
+}
diff --git a/apps/web/src/components/nextcloud-files/file-type-contrast.test.ts b/apps/web/src/components/nextcloud-files/file-type-contrast.test.ts
new file mode 100644
index 0000000..2f6f5f6
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/file-type-contrast.test.ts
@@ -0,0 +1,68 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { FILE_FAMILIES } from './file-types';
+
+/**
+ * Kontrastpruefung der Typfarben (quick-261008-mzu, D-L): Kurzzeichen auf der
+ * Kachel >= 4,5:1 (WCAG AA) in beiden Modi, und die Kachel hebt sich von der
+ * Karte ab (>= 1,15:1). OKLCH → OKLab → lineares sRGB nach Bjoern Ottosson.
+ */
+
+const css = readFileSync(resolve(__dirname, '../../app/globals.css'), 'utf8');
+
+function block(selector: ':root' | '.dark'): string {
+ const re = selector === ':root' ? /^:root\s*\{([\s\S]*?)^\}/m : /^\.dark\s*\{([\s\S]*?)^\}/m;
+ const m = re.exec(css);
+ if (!m) throw new Error(`Block ${selector} fehlt`);
+ return m[1];
+}
+
+function oklch(source: string, name: string): [number, number, number] {
+ const m = new RegExp(`--${name}:\\s*oklch\\(([\\d.]+)\\s+([\\d.]+)\\s+([\\d.]+)\\)`).exec(source);
+ if (!m) throw new Error(`--${name} fehlt`);
+ return [Number(m[1]), Number(m[2]), Number(m[3])];
+}
+
+function luminance([l, c, h]: [number, number, number]): number {
+ const a = c * Math.cos((h * Math.PI) / 180);
+ const b = c * Math.sin((h * Math.PI) / 180);
+ const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+ const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+ const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+ const clamp = (v: number) => Math.min(1, Math.max(0, v));
+ const r = clamp(4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_);
+ const g = clamp(-1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_);
+ const bl = clamp(-0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_);
+ return 0.2126 * r + 0.7152 * g + 0.0722 * bl;
+}
+
+function contrast(x: number, y: number): number {
+ const [hi, lo] = x > y ? [x, y] : [y, x];
+ return (hi + 0.05) / (lo + 0.05);
+}
+
+describe('Typfarben der Dateiansicht', () => {
+ for (const [mode, selector, card] of [
+ ['hell', ':root', [1, 0, 0]],
+ ['dunkel', '.dark', [0.245, 0.01, 260]],
+ ] as const) {
+ describe(mode, () => {
+ const source = block(selector);
+ for (const family of FILE_FAMILIES) {
+ it(`${family}: Schrift >= 4,5:1, Kachel hebt sich von der Karte ab`, () => {
+ const bg = luminance(oklch(source, `ft-${family}-bg`));
+ const fg = luminance(oklch(source, `ft-${family}-fg`));
+ expect(contrast(fg, bg)).toBeGreaterThanOrEqual(4.5);
+ expect(
+ contrast(bg, luminance(card as unknown as [number, number, number])),
+ ).toBeGreaterThanOrEqual(1.15);
+ });
+ }
+ });
+ }
+
+ it('Karte im dunklen Modus entspricht dem Vergleichswert', () => {
+ expect(oklch(block('.dark'), 'card')).toEqual([0.245, 0.01, 260]);
+ });
+});
diff --git a/apps/web/src/components/nextcloud-files/file-types.test.ts b/apps/web/src/components/nextcloud-files/file-types.test.ts
new file mode 100644
index 0000000..2e7c14a
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/file-types.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+import { FAMILY_CLASS, FILE_FAMILIES, fileTypeOf } from './file-types';
+
+const file = (name: string, mime: string | null = null) => ({ name, type: 'file' as const, mime });
+
+describe('fileTypeOf', () => {
+ it.each([
+ ['Bericht.pdf', 'pdf', 'PDF'],
+ ['Tabelle.xlsx', 'sheet', 'XLSX'],
+ ['Folien.odp', 'slides', 'ODP'],
+ ['Foto.JPG', 'image', 'JPG'],
+ ['Film.mp4', 'media', 'MP4'],
+ ['Archiv.tar.gz', 'archive', 'GZ'],
+ ['skript.ts', 'code', 'TS'],
+ ['Notiz.md', 'doc', 'MD'],
+ ])('%s → %s %s', (name, family, code) => {
+ expect(fileTypeOf(file(name))).toEqual({ family, code });
+ });
+
+ it('ohne Endung entscheidet der MIME-Typ: README mit text/plain → doc TXT', () => {
+ expect(fileTypeOf(file('README', 'text/plain'))).toEqual({ family: 'doc', code: 'TXT' });
+ });
+
+ it('unbekannte Endung: other, Kurzzeichen auf vier Zeichen gekuerzt', () => {
+ expect(fileTypeOf(file('daten.xyz1234'))).toEqual({ family: 'other', code: 'XYZ1' });
+ });
+
+ it('bei unbekannter Endung hat der MIME-Typ Vorrang', () => {
+ expect(fileTypeOf(file('scan.dat', 'image/png'))).toEqual({ family: 'image', code: 'DAT' });
+ expect(fileTypeOf(file('auszug', 'application/pdf'))).toEqual({ family: 'pdf', code: 'PDF' });
+ });
+
+ it('bekannte Endung schlaegt einen abweichenden MIME-Typ', () => {
+ expect(fileTypeOf(file('liste.csv', 'text/plain')).family).toBe('sheet');
+ });
+
+ it('ein Ordner ist immer folder', () => {
+ expect(fileTypeOf({ name: 'Projekte.pdf', type: 'folder' })).toEqual({
+ family: 'folder',
+ code: '',
+ });
+ });
+
+ it('Name mit fuehrendem Punkt hat keine Endung', () => {
+ expect(fileTypeOf(file('.bashrc'))).toEqual({ family: 'other', code: '' });
+ });
+
+ it('jede Familie hat feste Tailwind-Klassen', () => {
+ for (const f of FILE_FAMILIES) {
+ expect(FAMILY_CLASS[f]).toBe(`bg-ft-${f}-bg text-ft-${f}-fg`);
+ }
+ });
+});
diff --git a/apps/web/src/components/nextcloud-files/file-types.ts b/apps/web/src/components/nextcloud-files/file-types.ts
new file mode 100644
index 0000000..f7ba48d
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/file-types.ts
@@ -0,0 +1,200 @@
+/**
+ * Dateifamilien fuer die Typkacheln der Dateiansicht (quick-261008-mzu, L-09).
+ * Jede Datei bekommt eine Familie (bestimmt die Farbe der Kachel) und ein
+ * Kurzzeichen aus hoechstens vier Zeichen ("PDF", "XLSX"). Die Kurzzeichen sind
+ * die einzige gewollte Ausnahme von der Regel "keine Grossbuchstaben-Beschriftung".
+ */
+
+export type FileFamily =
+ | 'folder'
+ | 'doc'
+ | 'sheet'
+ | 'slides'
+ | 'pdf'
+ | 'image'
+ | 'media'
+ | 'archive'
+ | 'code'
+ | 'other';
+
+export const FILE_FAMILIES: readonly FileFamily[] = [
+ 'folder',
+ 'doc',
+ 'sheet',
+ 'slides',
+ 'pdf',
+ 'image',
+ 'media',
+ 'archive',
+ 'code',
+ 'other',
+];
+
+export interface FileType {
+ family: FileFamily;
+ /** Kurzzeichen, hoechstens vier Zeichen, leer wenn nichts Sinnvolles vorliegt. */
+ code: string;
+}
+
+const EXTENSIONS: Record, readonly string[]> = {
+ doc: ['doc', 'docx', 'odt', 'rtf', 'txt', 'md', 'pages', 'dot', 'dotx', 'ott', 'tex', 'log'],
+ sheet: ['xls', 'xlsx', 'xlsm', 'ods', 'csv', 'tsv', 'numbers', 'xlt', 'xltx', 'ots'],
+ slides: ['ppt', 'pptx', 'odp', 'key', 'pps', 'ppsx', 'otp'],
+ pdf: ['pdf'],
+ image: [
+ 'jpg',
+ 'jpeg',
+ 'png',
+ 'gif',
+ 'webp',
+ 'heic',
+ 'heif',
+ 'bmp',
+ 'tif',
+ 'tiff',
+ 'svg',
+ 'avif',
+ 'ico',
+ 'raw',
+ 'cr2',
+ 'nef',
+ 'psd',
+ ],
+ media: [
+ 'mp3',
+ 'wav',
+ 'flac',
+ 'ogg',
+ 'oga',
+ 'm4a',
+ 'aac',
+ 'opus',
+ 'mp4',
+ 'm4v',
+ 'mov',
+ 'avi',
+ 'mkv',
+ 'webm',
+ 'wmv',
+ 'mpg',
+ 'mpeg',
+ ],
+ archive: ['zip', 'rar', '7z', 'tar', 'gz', 'tgz', 'bz2', 'xz', 'zst', 'iso', 'dmg', 'cab'],
+ code: [
+ 'js',
+ 'mjs',
+ 'cjs',
+ 'ts',
+ 'tsx',
+ 'jsx',
+ 'json',
+ 'xml',
+ 'html',
+ 'htm',
+ 'css',
+ 'scss',
+ 'py',
+ 'php',
+ 'java',
+ 'c',
+ 'h',
+ 'cpp',
+ 'cs',
+ 'go',
+ 'rs',
+ 'rb',
+ 'sh',
+ 'ps1',
+ 'bat',
+ 'sql',
+ 'yml',
+ 'yaml',
+ 'toml',
+ 'ini',
+ 'conf',
+ 'vue',
+ 'kt',
+ 'swift',
+ ],
+};
+
+const FAMILY_BY_EXT = new Map();
+for (const [family, exts] of Object.entries(EXTENSIONS)) {
+ for (const ext of exts) FAMILY_BY_EXT.set(ext, family as FileFamily);
+}
+
+/** Kurzzeichen fuer bekannte MIME-Typen, wenn die Datei keine (bekannte) Endung hat. */
+const CODE_BY_MIME: Record = {
+ 'text/plain': 'TXT',
+ 'text/markdown': 'MD',
+ 'text/csv': 'CSV',
+ 'application/pdf': 'PDF',
+ 'image/jpeg': 'JPG',
+ 'image/png': 'PNG',
+ 'image/gif': 'GIF',
+ 'image/webp': 'WEBP',
+ 'application/zip': 'ZIP',
+ 'application/json': 'JSON',
+};
+
+function familyFromMime(mime: string): FileFamily | null {
+ const m = mime.toLowerCase();
+ if (m === 'application/pdf') return 'pdf';
+ if (m.startsWith('image/')) return 'image';
+ if (m.startsWith('audio/') || m.startsWith('video/')) return 'media';
+ if (m.includes('spreadsheet') || m.includes('excel') || m === 'text/csv') return 'sheet';
+ if (m.includes('presentation') || m.includes('powerpoint')) return 'slides';
+ if (m.includes('wordprocessing') || m.includes('msword') || m.includes('opendocument.text')) {
+ return 'doc';
+ }
+ if (m.startsWith('text/')) return 'doc';
+ if (m.includes('zip') || m.includes('compressed') || m.includes('x-tar') || m.includes('gzip')) {
+ return 'archive';
+ }
+ if (m === 'application/json' || m === 'application/xml' || m.includes('javascript')) {
+ return 'code';
+ }
+ return null;
+}
+
+/** Endung ohne Punkt in Kleinbuchstaben; leer bei Namen ohne Endung oder mit fuehrendem Punkt. */
+export function extensionOf(name: string): string {
+ const dot = name.lastIndexOf('.');
+ if (dot <= 0 || dot === name.length - 1) return '';
+ return name.slice(dot + 1).toLowerCase();
+}
+
+export function fileTypeOf(entry: {
+ name: string;
+ type: 'folder' | 'file';
+ mime?: string | null;
+}): FileType {
+ if (entry.type === 'folder') return { family: 'folder', code: '' };
+ const ext = extensionOf(entry.name);
+ const known = ext ? FAMILY_BY_EXT.get(ext) : undefined;
+ const code = ext ? ext.toUpperCase().slice(0, 4) : '';
+ if (known) return { family: known, code };
+ const mime = entry.mime ?? '';
+ const byMime = mime ? familyFromMime(mime) : null;
+ if (byMime) {
+ return { family: byMime, code: code || CODE_BY_MIME[mime.toLowerCase()] || '' };
+ }
+ return { family: 'other', code };
+}
+
+/**
+ * Tailwind-Klassen je Familie als feste Zeichenketten, damit der Tailwind-Scanner
+ * sie findet (zusammengesetzte Klassennamen wuerden nicht erzeugt).
+ */
+export const FAMILY_CLASS: Record = {
+ folder: 'bg-ft-folder-bg text-ft-folder-fg',
+ doc: 'bg-ft-doc-bg text-ft-doc-fg',
+ sheet: 'bg-ft-sheet-bg text-ft-sheet-fg',
+ slides: 'bg-ft-slides-bg text-ft-slides-fg',
+ pdf: 'bg-ft-pdf-bg text-ft-pdf-fg',
+ image: 'bg-ft-image-bg text-ft-image-fg',
+ media: 'bg-ft-media-bg text-ft-media-fg',
+ archive: 'bg-ft-archive-bg text-ft-archive-fg',
+ code: 'bg-ft-code-bg text-ft-code-fg',
+ other: 'bg-ft-other-bg text-ft-other-fg',
+};
diff --git a/apps/web/src/components/nextcloud-files/paths.test.ts b/apps/web/src/components/nextcloud-files/paths.test.ts
new file mode 100644
index 0000000..ddefa3d
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/paths.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+import {
+ freeName,
+ isInside,
+ join,
+ nameProblem,
+ parent,
+ segments,
+ splitExtension,
+ validName,
+} from './paths';
+
+describe('paths', () => {
+ it('join und parent', () => {
+ expect(join('/', 'a')).toBe('/a');
+ expect(join('/a', 'b')).toBe('/a/b');
+ expect(parent('/a/b')).toBe('/a');
+ expect(parent('/a')).toBe('/');
+ expect(parent('/')).toBe('/');
+ });
+
+ it('segments', () => {
+ expect(segments('/')).toEqual([]);
+ expect(segments('/Projekte/Übergabe')).toEqual(['Projekte', 'Übergabe']);
+ });
+
+ it('validName', () => {
+ expect(validName('Bericht.pdf')).toBe(true);
+ expect(validName('')).toBe(false);
+ expect(validName(' ')).toBe(false);
+ expect(validName('.')).toBe(false);
+ expect(validName('..')).toBe(false);
+ expect(validName('a/b')).toBe(false);
+ expect(validName('a\\b')).toBe(false);
+ expect(validName('datei.part')).toBe(false);
+ expect(validName('x'.repeat(251))).toBe(false);
+ expect(validName('x'.repeat(250))).toBe(true);
+ expect(nameProblem('a/b')).toBe('slash');
+ });
+
+ it('splitExtension kennt Doppelendungen', () => {
+ expect(splitExtension('Bericht.pdf')).toEqual(['Bericht', '.pdf']);
+ expect(splitExtension('Archiv.tar.gz')).toEqual(['Archiv', '.tar.gz']);
+ expect(splitExtension('README')).toEqual(['README', '']);
+ expect(splitExtension('.bashrc')).toEqual(['.bashrc', '']);
+ });
+
+ it('freeName', () => {
+ expect(freeName('Bericht.pdf', ['Bericht.pdf', 'Bericht (2).pdf'])).toBe('Bericht (3).pdf');
+ expect(freeName('Archiv.tar.gz', ['Archiv.tar.gz'])).toBe('Archiv (2).tar.gz');
+ expect(freeName('Neu.txt', ['Alt.txt'])).toBe('Neu.txt');
+ });
+
+ it('isInside', () => {
+ expect(isInside('/a', '/a/b')).toBe(true);
+ expect(isInside('/a', '/ab')).toBe(false);
+ expect(isInside('/a', '/a')).toBe(false);
+ expect(isInside('/', '/a')).toBe(true);
+ });
+});
diff --git a/apps/web/src/components/nextcloud-files/paths.ts b/apps/web/src/components/nextcloud-files/paths.ts
new file mode 100644
index 0000000..741f29c
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/paths.ts
@@ -0,0 +1,84 @@
+/**
+ * Pfade der Dateiansicht (quick-261008-mzu). Pfade beginnen immer mit "/";
+ * die Wurzel ist "/". Die API prueft jeden Pfad noch einmal selbst (D-H) —
+ * diese Pruefungen dienen nur der verstaendlichen Rueckmeldung im Dialog.
+ */
+
+export const ROOT = '/';
+const MAX_NAME_LENGTH = 250;
+
+export function join(dir: string, name: string): string {
+ const base = dir.endsWith('/') ? dir.slice(0, -1) : dir;
+ return `${base}/${name}`;
+}
+
+export function parent(path: string): string {
+ if (path === ROOT || path === '') return ROOT;
+ const trimmed = path.endsWith('/') ? path.slice(0, -1) : path;
+ const i = trimmed.lastIndexOf('/');
+ return i <= 0 ? ROOT : trimmed.slice(0, i);
+}
+
+export function basename(path: string): string {
+ if (path === ROOT) return '';
+ const trimmed = path.endsWith('/') ? path.slice(0, -1) : path;
+ return trimmed.slice(trimmed.lastIndexOf('/') + 1);
+}
+
+/** Bestandteile eines Pfads: "/a/b" → ["a", "b"]; Wurzel → []. */
+export function segments(path: string): string[] {
+ return path.split('/').filter((s) => s !== '');
+}
+
+/** Pfad aus den ersten `count` Bestandteilen. */
+export function pathOf(parts: readonly string[], count = parts.length): string {
+ return count <= 0 ? ROOT : `/${parts.slice(0, count).join('/')}`;
+}
+
+export type NameProblem = 'empty' | 'dots' | 'slash' | 'part' | 'tooLong';
+
+/** null = gueltiger Name, sonst der Grund. */
+export function nameProblem(name: string): NameProblem | null {
+ if (name.trim() === '') return 'empty';
+ if (name === '.' || name === '..') return 'dots';
+ if (name.includes('/') || name.includes('\\')) return 'slash';
+ if (name.toLowerCase().endsWith('.part')) return 'part';
+ if (name.length > MAX_NAME_LENGTH) return 'tooLong';
+ return null;
+}
+
+export function validName(name: string): boolean {
+ return nameProblem(name) === null;
+}
+
+const DOUBLE_EXTENSIONS = ['.tar.gz', '.tar.bz2', '.tar.xz', '.tar.zst'];
+
+/** Name ohne und mit Endung trennen; "Archiv.tar.gz" → ["Archiv", ".tar.gz"]. */
+export function splitExtension(name: string): [string, string] {
+ const lower = name.toLowerCase();
+ for (const ext of DOUBLE_EXTENSIONS) {
+ if (lower.endsWith(ext) && name.length > ext.length) {
+ return [name.slice(0, -ext.length), name.slice(-ext.length)];
+ }
+ }
+ const dot = name.lastIndexOf('.');
+ if (dot <= 0) return [name, ''];
+ return [name.slice(0, dot), name.slice(dot)];
+}
+
+/** Freier Name nach dem Muster "Bericht (2).pdf", "Bericht (3).pdf" … */
+export function freeName(name: string, taken: readonly string[]): string {
+ const used = new Set(taken.map((n) => n.toLowerCase()));
+ if (!used.has(name.toLowerCase())) return name;
+ const [base, ext] = splitExtension(name);
+ for (let i = 2; ; i++) {
+ const candidate = `${base} (${i})${ext}`;
+ if (!used.has(candidate.toLowerCase())) return candidate;
+ }
+}
+
+/** Liegt `path` innerhalb von `folder` (echt darunter)? "/a" und "/ab" gelten nicht. */
+export function isInside(folder: string, path: string): boolean {
+ if (folder === ROOT) return path !== ROOT;
+ return path.startsWith(`${folder}/`);
+}
diff --git a/apps/web/src/components/nextcloud-files/selection.test.ts b/apps/web/src/components/nextcloud-files/selection.test.ts
new file mode 100644
index 0000000..495803b
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/selection.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import { EMPTY_SELECTION, type SelectionState, selectionReducer } from './selection';
+
+const order = ['/a', '/b', '/c', '/d', '/e'];
+
+describe('selectionReducer', () => {
+ it('Klick waehlt nur diesen Eintrag und setzt den Anker', () => {
+ const s = selectionReducer(
+ { selected: ['/a', '/b'], anchor: '/a' },
+ {
+ type: 'click',
+ key: '/c',
+ order,
+ },
+ );
+ expect(s).toEqual({ selected: ['/c'], anchor: '/c' });
+ });
+
+ it('Strg-Klick schaltet um', () => {
+ let s = selectionReducer(EMPTY_SELECTION, { type: 'click', key: '/a', order });
+ s = selectionReducer(s, { type: 'click', key: '/c', order, ctrl: true });
+ expect(s.selected).toEqual(['/a', '/c']);
+ s = selectionReducer(s, { type: 'click', key: '/a', order, ctrl: true });
+ expect(s.selected).toEqual(['/c']);
+ });
+
+ it('Umschalt-Klick waehlt den Bereich ab dem Anker in der aktuellen Sortierung', () => {
+ const s0 = selectionReducer(EMPTY_SELECTION, { type: 'click', key: '/b', order });
+ expect(selectionReducer(s0, { type: 'click', key: '/d', order, shift: true }).selected).toEqual(
+ ['/b', '/c', '/d'],
+ );
+ // Umgekehrte Sortierung: der Bereich folgt der neuen Reihenfolge.
+ const reversed = [...order].reverse();
+ expect(
+ selectionReducer(s0, { type: 'click', key: '/d', order: reversed, shift: true }).selected,
+ ).toEqual(['/d', '/c', '/b']);
+ // Rueckwaerts vom Anker
+ expect(selectionReducer(s0, { type: 'click', key: '/a', order, shift: true }).selected).toEqual(
+ ['/a', '/b'],
+ );
+ });
+
+ it('Kontrollkaestchen schaltet einzeln um', () => {
+ let s = selectionReducer(EMPTY_SELECTION, { type: 'toggle', key: '/b' });
+ s = selectionReducer(s, { type: 'toggle', key: '/c' });
+ expect(s.selected).toEqual(['/b', '/c']);
+ s = selectionReducer(s, { type: 'toggle', key: '/b' });
+ expect(s.selected).toEqual(['/c']);
+ });
+
+ it('alles waehlen und leeren', () => {
+ const all = selectionReducer(EMPTY_SELECTION, { type: 'selectAll', order });
+ expect(all.selected).toEqual(order);
+ expect(selectionReducer(all, { type: 'clear' })).toEqual(EMPTY_SELECTION);
+ });
+
+ it('verschwundene Eintraege fallen aus der Auswahl', () => {
+ const s = selectionReducer(
+ { selected: ['/a', '/c'], anchor: '/c' },
+ {
+ type: 'prune',
+ existing: ['/a', '/b'],
+ },
+ );
+ expect(s).toEqual({ selected: ['/a'], anchor: null });
+ });
+
+ it('veraendert die Eingaben nicht', () => {
+ const selected = Object.freeze(['/a']) as readonly string[];
+ const frozenOrder = Object.freeze([...order]) as readonly string[];
+ const state: SelectionState = Object.freeze({ selected, anchor: '/a' });
+ selectionReducer(state, { type: 'click', key: '/c', order: frozenOrder, ctrl: true });
+ selectionReducer(state, { type: 'click', key: '/c', order: frozenOrder, shift: true });
+ selectionReducer(state, { type: 'toggle', key: '/a' });
+ selectionReducer(state, { type: 'selectAll', order: frozenOrder });
+ expect(selected).toEqual(['/a']);
+ expect(frozenOrder).toEqual(order);
+ });
+});
diff --git a/apps/web/src/components/nextcloud-files/selection.ts b/apps/web/src/components/nextcloud-files/selection.ts
new file mode 100644
index 0000000..754dbed
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/selection.ts
@@ -0,0 +1,82 @@
+/**
+ * Auswahl in der Dateiansicht (quick-261008-mzu) als reiner Zustandsuebergang.
+ * Schluessel sind die Pfade der Eintraege. Bereichsauswahl (Umschalt-Klick)
+ * richtet sich nach der AKTUELLEN Sortierung, die der Aufrufer als `order`
+ * uebergibt. Eingaben werden nie veraendert.
+ */
+
+export interface SelectionState {
+ selected: readonly string[];
+ /** Ausgangspunkt fuer Umschalt-Klicks. */
+ anchor: string | null;
+}
+
+export const EMPTY_SELECTION: SelectionState = { selected: [], anchor: null };
+
+export type SelectionAction =
+ | {
+ type: 'click';
+ key: string;
+ order: readonly string[];
+ ctrl?: boolean;
+ shift?: boolean;
+ }
+ /** Kontrollkaestchen: schaltet genau diesen Eintrag um. */
+ | { type: 'toggle'; key: string }
+ | { type: 'selectAll'; order: readonly string[] }
+ | { type: 'clear' }
+ /** Eintraege, die nicht mehr in der Liste stehen, fallen heraus. */
+ | { type: 'prune'; existing: readonly string[] };
+
+function inOrder(keys: Iterable, order: readonly string[]): string[] {
+ const set = new Set(keys);
+ return order.filter((k) => set.has(k));
+}
+
+export function selectionReducer(state: SelectionState, action: SelectionAction): SelectionState {
+ switch (action.type) {
+ case 'click': {
+ const { key, order } = action;
+ if (action.shift && state.anchor !== null) {
+ const from = order.indexOf(state.anchor);
+ const to = order.indexOf(key);
+ if (from !== -1 && to !== -1) {
+ const [a, b] = from <= to ? [from, to] : [to, from];
+ const range = order.slice(a, b + 1);
+ const merged = action.ctrl ? inOrder([...state.selected, ...range], order) : range;
+ return { selected: merged, anchor: state.anchor };
+ }
+ }
+ if (action.ctrl) {
+ const has = state.selected.includes(key);
+ return {
+ selected: has ? state.selected.filter((k) => k !== key) : [...state.selected, key],
+ anchor: key,
+ };
+ }
+ return { selected: [key], anchor: key };
+ }
+ case 'toggle': {
+ const has = state.selected.includes(action.key);
+ return {
+ selected: has
+ ? state.selected.filter((k) => k !== action.key)
+ : [...state.selected, action.key],
+ anchor: action.key,
+ };
+ }
+ case 'selectAll':
+ return { selected: [...action.order], anchor: state.anchor };
+ case 'clear':
+ return EMPTY_SELECTION;
+ case 'prune': {
+ const existing = new Set(action.existing);
+ const selected = state.selected.filter((k) => existing.has(k));
+ const anchor = state.anchor !== null && existing.has(state.anchor) ? state.anchor : null;
+ if (selected.length === state.selected.length && anchor === state.anchor) return state;
+ return { selected, anchor };
+ }
+ default:
+ return state;
+ }
+}
diff --git a/apps/web/src/components/nextcloud-files/use-transfers.ts b/apps/web/src/components/nextcloud-files/use-transfers.ts
new file mode 100644
index 0000000..8fdf5be
--- /dev/null
+++ b/apps/web/src/components/nextcloud-files/use-transfers.ts
@@ -0,0 +1,323 @@
+'use client';
+
+import { NEXTCLOUD_FILES_CHUNK_SIZE } from '@tessera/shared';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createFolder, listFolder, NextcloudFilesRequestError } from '@/lib/nextcloud-files-api';
+import { uploadFile } from '@/lib/nextcloud-files-upload';
+import type { DroppedFile } from './drop-entries';
+import { freeName, join } from './paths';
+
+/**
+ * Warteschlange der Uebertragungen (quick-261008-mzu, L-06/L-09): hoechstens zwei
+ * Dateien gleichzeitig, jede mit eigenem Abbruch. Ein vergebener Name endet nicht
+ * als Fehler, sondern als Rueckfrage (Ersetzen, Beide behalten, Ueberspringen).
+ * Was nicht in den freien Speicher passt, wird gar nicht erst gesendet.
+ */
+
+export const MAX_PARALLEL = 2;
+/** Fortschritt hoechstens alle 100 ms in den Zustand schreiben (sonst rendert die Leiste dauernd). */
+const PROGRESS_INTERVAL_MS = 100;
+
+export type TransferStatus =
+ | 'queued'
+ | 'running'
+ | 'assembling'
+ | 'done'
+ | 'error'
+ | 'conflict'
+ | 'skipped';
+
+export interface TransferError {
+ code: string | null;
+ message: string;
+ extra: Record;
+}
+
+export interface ExistingFile {
+ etag: string | null;
+ size: number | null;
+ mtime: string | number | null;
+}
+
+export interface Transfer {
+ id: string;
+ /** Name, unter dem die Datei abgelegt wird (nach "Beide behalten" der freie Name). */
+ name: string;
+ size: number;
+ /** Zielordner der Datei. */
+ targetDir: string;
+ status: TransferStatus;
+ loaded: number;
+ error: TransferError | null;
+ existing: ExistingFile | null;
+}
+
+export type ConflictChoice = 'replace' | 'keepBoth' | 'skip';
+
+interface Internal {
+ file: File;
+ replaceEtag?: string;
+ controller?: AbortController;
+ /** Ordner, in den abgelegt wurde (fuer das Anlegen von Unterordnern). */
+ baseDir: string;
+ relativeDir: string;
+}
+
+export interface UseTransfersOptions {
+ /** Freier Speicher in Byte; null = unbegrenzt oder unbekannt. */
+ quotaAvailable: number | null;
+ /** Ein Ordner hat sich geaendert (Datei fertig hochgeladen oder Unterordner angelegt). */
+ onFolderChanged?: (dir: string) => void;
+}
+
+let counter = 0;
+function nextId(): string {
+ counter += 1;
+ return `t${Date.now().toString(36)}-${counter}`;
+}
+
+function toError(err: unknown): TransferError {
+ if (err instanceof NextcloudFilesRequestError) {
+ return { code: err.code, message: err.message, extra: err.extra };
+ }
+ return { code: null, message: err instanceof Error ? err.message : String(err), extra: {} };
+}
+
+function existingOf(err: NextcloudFilesRequestError): ExistingFile {
+ const raw = err.extra.existing as Partial | undefined;
+ return {
+ etag: typeof raw?.etag === 'string' ? raw.etag : null,
+ size: typeof raw?.size === 'number' ? raw.size : null,
+ mtime: raw?.mtime ?? null,
+ };
+}
+
+const ACTIVE: readonly TransferStatus[] = ['queued', 'running', 'assembling'];
+
+export function isActive(t: Pick): boolean {
+ return ACTIVE.includes(t.status);
+}
+
+export function useTransfers(options: UseTransfersOptions) {
+ const [transfers, setTransfers] = useState([]);
+ const internals = useRef(new Map());
+ const started = useRef(new Set());
+ const folders = useRef(new Map>());
+ const optsRef = useRef(options);
+ optsRef.current = options;
+ const listRef = useRef(transfers);
+ listRef.current = transfers;
+
+ const patch = useCallback((id: string, change: Partial) => {
+ setTransfers((list) => list.map((t) => (t.id === id ? { ...t, ...change } : t)));
+ }, []);
+
+ /** Legt `relativeDir` unter `baseDir` Stufe fuer Stufe an; "existiert schon" ist kein Fehler. */
+ const ensureFolders = useCallback((baseDir: string, relativeDir: string): Promise => {
+ const parts = relativeDir.split('/').filter(Boolean);
+ let chain: Promise = Promise.resolve();
+ let path = baseDir;
+ parts.forEach((part, index) => {
+ path = join(path, part);
+ const target = path;
+ const known = folders.current.get(target);
+ if (known) {
+ chain = chain.then(() => known);
+ return;
+ }
+ const created = chain.then(async () => {
+ try {
+ await createFolder(target);
+ } catch (err) {
+ if (!(err instanceof NextcloudFilesRequestError && err.code === 'nameTaken')) {
+ folders.current.delete(target);
+ throw err;
+ }
+ }
+ if (index === 0) optsRef.current.onFolderChanged?.(baseDir);
+ });
+ folders.current.set(target, created);
+ chain = created;
+ });
+ return chain;
+ }, []);
+
+ const run = useCallback(
+ async (id: string) => {
+ const it = internals.current.get(id);
+ const item = listRef.current.find((t) => t.id === id);
+ if (!it || !item) {
+ started.current.delete(id);
+ return;
+ }
+ const controller = new AbortController();
+ it.controller = controller;
+ patch(id, { status: 'running', loaded: 0, error: null });
+ const chunked = item.size > NEXTCLOUD_FILES_CHUNK_SIZE;
+ let lastReport = 0;
+ try {
+ if (it.relativeDir) await ensureFolders(it.baseDir, it.relativeDir);
+ await uploadFile(it.file, join(item.targetDir, item.name), {
+ signal: controller.signal,
+ ...(it.replaceEtag ? { replaceEtag: it.replaceEtag } : {}),
+ onProgress: (fraction, bytes) => {
+ const now = Date.now();
+ if (fraction >= 1) {
+ patch(id, { loaded: item.size, ...(chunked ? { status: 'assembling' } : {}) });
+ return;
+ }
+ if (now - lastReport < PROGRESS_INTERVAL_MS) return;
+ lastReport = now;
+ patch(id, { loaded: bytes });
+ },
+ });
+ patch(id, { status: 'done', loaded: item.size });
+ optsRef.current.onFolderChanged?.(item.targetDir);
+ } catch (err) {
+ if (controller.signal.aborted) {
+ // Abgebrochen: die Zeile ist bereits entfernt.
+ } else if (err instanceof NextcloudFilesRequestError && err.code === 'nameTaken') {
+ patch(id, { status: 'conflict', existing: existingOf(err), error: null });
+ } else {
+ patch(id, { status: 'error', error: toError(err) });
+ }
+ } finally {
+ it.controller = undefined;
+ started.current.delete(id);
+ }
+ },
+ [ensureFolders, patch],
+ );
+
+ // Die Warteschlange abarbeiten: wartende Eintraege starten, solange weniger als zwei laufen.
+ useEffect(() => {
+ const busy = transfers.filter(
+ (t) =>
+ t.status === 'running' ||
+ t.status === 'assembling' ||
+ (t.status === 'queued' && started.current.has(t.id)),
+ ).length;
+ let free = MAX_PARALLEL - busy;
+ for (const t of transfers) {
+ if (free <= 0) break;
+ if (t.status !== 'queued' || started.current.has(t.id)) continue;
+ started.current.add(t.id);
+ free -= 1;
+ void run(t.id);
+ }
+ }, [transfers, run]);
+
+ // Beim Verlassen der Ansicht laufende Uebertragungen abbrechen; der Hochlader raeumt bei Nextcloud auf.
+ useEffect(() => {
+ const map = internals.current;
+ return () => {
+ for (const it of map.values()) it.controller?.abort();
+ };
+ }, []);
+
+ const enqueue = useCallback(
+ (files: readonly DroppedFile[], baseDir: string, emptyFolders: readonly string[] = []) => {
+ for (const folder of emptyFolders) {
+ void ensureFolders(baseDir, folder).catch(() => undefined);
+ }
+ if (files.length === 0) return;
+ const available = optsRef.current.quotaAvailable;
+ let pending = listRef.current
+ .filter(isActive)
+ .reduce((sum, t) => sum + Math.max(0, t.size - t.loaded), 0);
+ const added: Transfer[] = [];
+ for (const { file, relativeDir } of files) {
+ const id = nextId();
+ const targetDir = relativeDir ? join(baseDir, relativeDir) : baseDir;
+ internals.current.set(id, { file, baseDir, relativeDir });
+ const tooBig = available !== null && pending + file.size > available;
+ if (!tooBig) pending += file.size;
+ added.push({
+ id,
+ name: file.name,
+ size: file.size,
+ targetDir,
+ status: tooBig ? 'error' : 'queued',
+ loaded: 0,
+ existing: null,
+ error: tooBig
+ ? {
+ code: 'quotaExceeded',
+ message: '',
+ extra: { free: Math.max(0, (available ?? 0) - pending) },
+ }
+ : null,
+ });
+ }
+ setTransfers((list) => [...list, ...added]);
+ },
+ [ensureFolders],
+ );
+
+ const cancel = useCallback((id: string) => {
+ const it = internals.current.get(id);
+ it?.controller?.abort();
+ internals.current.delete(id);
+ started.current.delete(id);
+ setTransfers((list) => list.filter((t) => t.id !== id));
+ }, []);
+
+ const retry = useCallback(
+ (id: string) => {
+ const it = internals.current.get(id);
+ const item = listRef.current.find((t) => t.id === id);
+ if (!it || !item) return;
+ // Nach "inzwischen geaendert" zuerst neu fragen, statt mit dem alten Stand zu ersetzen.
+ if (item.error?.code === 'changedMeanwhile') it.replaceEtag = undefined;
+ patch(id, { status: 'queued', error: null, loaded: 0 });
+ },
+ [patch],
+ );
+
+ const resolve = useCallback(
+ async (id: string, choice: ConflictChoice) => {
+ const it = internals.current.get(id);
+ const item = listRef.current.find((t) => t.id === id);
+ if (!it || !item) return;
+ if (choice === 'skip') {
+ patch(id, { status: 'skipped', existing: null });
+ return;
+ }
+ if (choice === 'replace') {
+ it.replaceEtag = item.existing?.etag ?? undefined;
+ patch(id, { status: 'queued', existing: null, loaded: 0 });
+ return;
+ }
+ try {
+ const listing = await listFolder(item.targetDir);
+ const taken = [
+ ...listing.entries.map((e) => e.name),
+ // Namen, die gerade in denselben Ordner unterwegs sind, gelten ebenfalls als vergeben.
+ ...listRef.current
+ .filter((t) => t.id !== id && t.targetDir === item.targetDir && isActive(t))
+ .map((t) => t.name),
+ ];
+ it.replaceEtag = undefined;
+ patch(id, {
+ name: freeName(item.name, taken),
+ status: 'queued',
+ existing: null,
+ loaded: 0,
+ });
+ } catch (err) {
+ patch(id, { status: 'error', error: toError(err), existing: null });
+ }
+ },
+ [patch],
+ );
+
+ const clearFinished = useCallback(() => {
+ setTransfers((list) => {
+ const keep = list.filter((t) => t.status !== 'done' && t.status !== 'skipped');
+ for (const t of list) if (!keep.includes(t)) internals.current.delete(t.id);
+ return keep;
+ });
+ }, []);
+
+ return { transfers, enqueue, cancel, retry, resolve, clearFinished };
+}
diff --git a/apps/web/src/messages/de.json b/apps/web/src/messages/de.json
index ee3b675..81af874 100644
--- a/apps/web/src/messages/de.json
+++ b/apps/web/src/messages/de.json
@@ -2334,9 +2334,6 @@
"userHint": "Bitte wenden Sie sich an einen Administrator oder an jemanden mit der Freigabestufe Verwalten.",
"goToSettings": "Zu den Einstellungen"
},
- "main": {
- "server": "Nextcloud: {host}"
- },
"connect": {
"title": "Mit Nextcloud verbinden",
"expiredNotice": "Ihre Verbindung zu Nextcloud ist abgelaufen oder wurde in Nextcloud widerrufen. Bitte melden Sie sich neu an.",
@@ -2407,6 +2404,169 @@
"trustedDomains": "Der Rechnername der Adresse muss in den vertrauenswürdigen Domains (trusted_domains) der Nextcloud stehen.",
"twoFactor": "Benutzer mit Zwei-Faktor-Anmeldung verbinden sich über den Browser, die Anmeldung mit Passwort genügt für sie nicht."
}
+ },
+ "browser": {
+ "rootName": "Alle Dateien",
+ "regionLabel": "Dateien",
+ "breadcrumb": {
+ "label": "Ordnerpfad",
+ "more": "Weitere Ordner"
+ },
+ "toolbar": {
+ "newFolder": "Neuer Ordner",
+ "upload": "Hochladen",
+ "view": "Ansicht",
+ "viewList": "Liste",
+ "viewGrid": "Raster",
+ "sortBy": "Sortieren nach",
+ "sortAscending": "Aufsteigend",
+ "sortDescending": "Absteigend",
+ "reload": "Neu laden"
+ },
+ "sort": {
+ "name": "Name",
+ "size": "Größe",
+ "modified": "Geändert"
+ },
+ "columns": {
+ "name": "Name",
+ "size": "Größe",
+ "modified": "Geändert",
+ "actions": "Aktionen",
+ "selectAll": "Alle auswählen",
+ "select": "„{name}“ auswählen"
+ },
+ "selection": {
+ "count": "{count} ausgewählt",
+ "download": "Herunterladen",
+ "move": "Verschieben",
+ "delete": "Löschen",
+ "clear": "Auswahl aufheben"
+ },
+ "menu": {
+ "label": "Aktionen für „{name}“",
+ "open": "Öffnen",
+ "download": "Herunterladen",
+ "downloadZip": "Als ZIP herunterladen",
+ "rename": "Umbenennen",
+ "move": "Verschieben",
+ "openInNextcloud": "In Nextcloud öffnen",
+ "delete": "Löschen"
+ },
+ "empty": {
+ "title": "Dieser Ordner ist leer.",
+ "hint": "Dateien hierher ziehen oder hochladen."
+ },
+ "loading": "Ordner wird geladen …",
+ "folderSize": "Ordner",
+ "unreachable": "Nextcloud ist gerade nicht erreichbar.",
+ "unreachableHint": "Prüfen Sie, ob die Nextcloud läuft, und versuchen Sie es dann erneut.",
+ "retry": "Erneut versuchen",
+ "folderGone": "Der Ordner existiert nicht mehr. Sie sehen wieder alle Dateien.",
+ "locked": "Nextcloud sperrt Anfragen vom Tessera-Server vorübergehend. Bitte versuchen Sie es in {minutes, plural, one {# Minute} other {# Minuten}} erneut.",
+ "truncated": "Es werden die ersten 5000 Einträge angezeigt.",
+ "count": "{count, plural, =0 {Keine Elemente} one {# Element} other {# Elemente}}",
+ "quota": {
+ "label": "Speicherplatz",
+ "ofTotal": "{used} von {total} belegt",
+ "usedOnly": "{used} belegt"
+ },
+ "drop": {
+ "target": "In „{name}“ ablegen",
+ "hint": "Ordner werden mit ihrem Inhalt übernommen.",
+ "tooMany": "Zu viele Dateien auf einmal. Legen Sie höchstens 2000 Dateien in einem Schritt ab.",
+ "tooDeep": "Die Ordner sind zu tief verschachtelt. Mehr als 20 Ebenen lassen sich nicht ablegen.",
+ "unreadable": "Die abgelegten Dateien ließen sich nicht lesen. Bitte versuchen Sie es erneut."
+ },
+ "status": {
+ "deleted": "{count, plural, one {„{name}“ ist im Papierkorb.} other {# Elemente in den Papierkorb verschoben.}}",
+ "moved": "{count, plural, one {„{name}“ nach „{target}“ verschoben.} other {# Elemente nach „{target}“ verschoben.}}",
+ "renamed": "Umbenannt in „{name}“.",
+ "folderCreated": "Ordner „{name}“ angelegt.",
+ "failed": "{failed, plural, one {Ein Element ließ sich nicht verarbeiten} other {# Elemente ließen sich nicht verarbeiten}}: {reason}"
+ }
+ },
+ "dialogs": {
+ "cancel": "Abbrechen",
+ "close": "Schließen",
+ "newFolder": {
+ "title": "Neuer Ordner",
+ "label": "Name des Ordners",
+ "submit": "Anlegen",
+ "defaultName": "Neuer Ordner"
+ },
+ "rename": {
+ "title": "Umbenennen",
+ "label": "Neuer Name",
+ "submit": "Umbenennen"
+ },
+ "busy": "Einen Moment …",
+ "nameProblems": {
+ "empty": "Bitte geben Sie einen Namen ein.",
+ "dots": "„.“ und „..“ sind als Name nicht erlaubt.",
+ "slash": "Der Name darf keinen Schrägstrich enthalten.",
+ "part": "Namen mit der Endung „.part“ verwendet Nextcloud selbst. Bitte wählen Sie einen anderen.",
+ "tooLong": "Der Name ist zu lang. Erlaubt sind höchstens 250 Zeichen."
+ },
+ "move": {
+ "title": "{count, plural, one {„{name}“ verschieben} other {# Elemente verschieben}}",
+ "hint": "Wählen Sie den Ordner, in den verschoben werden soll.",
+ "submit": "Hierher verschieben",
+ "noFolders": "Hier gibt es keine Unterordner.",
+ "sameFolder": "Die Auswahl liegt bereits in diesem Ordner.",
+ "intoItself": "Ein Ordner lässt sich nicht in sich selbst verschieben.",
+ "openFolder": "Ordner „{name}“ öffnen"
+ },
+ "delete": {
+ "titleOne": "„{name}“ löschen?",
+ "titleMany": "{count} Elemente löschen?",
+ "body": "Die Einträge kommen in den Papierkorb Ihrer Nextcloud und lassen sich dort wiederherstellen.",
+ "confirm": "In den Papierkorb verschieben"
+ }
+ },
+ "transfers": {
+ "title": "Übertragungen",
+ "active": "{count, plural, one {# läuft} other {# laufen}}",
+ "allDone": "Alles erledigt",
+ "waiting": "{count, plural, one {# Rückfrage offen} other {# Rückfragen offen}}",
+ "failed": "{count, plural, one {# fehlgeschlagen} other {# fehlgeschlagen}}",
+ "collapse": "Übertragungen einklappen",
+ "expand": "Übertragungen ausklappen",
+ "clearFinished": "Erledigte entfernen",
+ "progress": "{loaded} von {total}",
+ "queued": "Wartet",
+ "assembling": "Nextcloud setzt die Datei zusammen …",
+ "done": "Hochgeladen",
+ "skipped": "Übersprungen",
+ "cancel": "Abbrechen",
+ "cancelLabel": "Hochladen von „{name}“ abbrechen",
+ "retry": "Erneut versuchen",
+ "target": "Ziel: {folder}",
+ "conflict": {
+ "text": "Im Ordner gibt es „{name}“ schon.",
+ "replace": "Ersetzen",
+ "keepBoth": "Beide behalten",
+ "skip": "Überspringen"
+ }
+ },
+ "codes": {
+ "lengthRequired": "Die Größe der Datei ließ sich nicht bestimmen. Bitte versuchen Sie es erneut.",
+ "chunkTooLarge": "Ein Teilstück der Datei war zu groß. Bitte laden Sie die Seite neu und versuchen Sie es erneut.",
+ "fileTooLarge": "Die Datei ist größer, als die Nextcloud annimmt.",
+ "changedMeanwhile": "Die Datei wurde inzwischen in der Nextcloud geändert. Versuchen Sie es erneut, um neu zu entscheiden.",
+ "nameTaken": "Ein Eintrag mit diesem Namen existiert bereits.",
+ "quotaExceeded": "Nicht genug Speicherplatz in Ihrer Nextcloud.",
+ "quotaExceededFree": "Nicht genug Speicherplatz in Ihrer Nextcloud. Frei sind noch {free}.",
+ "nextcloudLocked": "Nextcloud sperrt Anfragen vom Tessera-Server vorübergehend. Bitte versuchen Sie es in {minutes, plural, one {# Minute} other {# Minuten}} erneut.",
+ "connectionExpired": "Die Verbindung zu Nextcloud ist abgelaufen. Bitte melden Sie sich neu an.",
+ "aborted": "Abgebrochen.",
+ "network": "Die Verbindung wurde unterbrochen. Bitte prüfen Sie Ihr Netzwerk und versuchen Sie es erneut.",
+ "notFound": "Der Eintrag existiert nicht mehr.",
+ "moveIntoItself": "Ein Ordner lässt sich nicht in sich selbst verschieben.",
+ "invalidName": "Dieser Name ist nicht erlaubt.",
+ "invalidPath": "Dieser Name ist nicht erlaubt.",
+ "nextcloudUnavailable": "Nextcloud ist nicht erreichbar oder antwortet nicht rechtzeitig.",
+ "generic": "Das hat nicht geklappt. Bitte versuchen Sie es erneut."
}
}
}
diff --git a/apps/web/src/messages/en.json b/apps/web/src/messages/en.json
index c22b389..da9c901 100644
--- a/apps/web/src/messages/en.json
+++ b/apps/web/src/messages/en.json
@@ -2334,9 +2334,6 @@
"userHint": "Please contact an administrator or someone with the Manage permission level.",
"goToSettings": "Go to settings"
},
- "main": {
- "server": "Nextcloud: {host}"
- },
"connect": {
"title": "Connect to Nextcloud",
"expiredNotice": "Your connection to Nextcloud has expired or was revoked in Nextcloud. Please sign in again.",
@@ -2407,6 +2404,169 @@
"trustedDomains": "The host name of the address has to be listed in the trusted domains (trusted_domains) of Nextcloud.",
"twoFactor": "Users with two-factor authentication connect through the browser; signing in with a password is not enough for them."
}
+ },
+ "browser": {
+ "rootName": "All files",
+ "regionLabel": "Files",
+ "breadcrumb": {
+ "label": "Folder path",
+ "more": "More folders"
+ },
+ "toolbar": {
+ "newFolder": "New folder",
+ "upload": "Upload",
+ "view": "View",
+ "viewList": "List",
+ "viewGrid": "Grid",
+ "sortBy": "Sort by",
+ "sortAscending": "Ascending",
+ "sortDescending": "Descending",
+ "reload": "Reload"
+ },
+ "sort": {
+ "name": "Name",
+ "size": "Size",
+ "modified": "Modified"
+ },
+ "columns": {
+ "name": "Name",
+ "size": "Size",
+ "modified": "Modified",
+ "actions": "Actions",
+ "selectAll": "Select all",
+ "select": "Select “{name}”"
+ },
+ "selection": {
+ "count": "{count} selected",
+ "download": "Download",
+ "move": "Move",
+ "delete": "Delete",
+ "clear": "Clear selection"
+ },
+ "menu": {
+ "label": "Actions for “{name}”",
+ "open": "Open",
+ "download": "Download",
+ "downloadZip": "Download as ZIP",
+ "rename": "Rename",
+ "move": "Move",
+ "openInNextcloud": "Open in Nextcloud",
+ "delete": "Delete"
+ },
+ "empty": {
+ "title": "This folder is empty.",
+ "hint": "Drag files here or upload them."
+ },
+ "loading": "Loading folder …",
+ "folderSize": "Folder",
+ "unreachable": "Nextcloud cannot be reached right now.",
+ "unreachableHint": "Check that Nextcloud is running, then try again.",
+ "retry": "Try again",
+ "folderGone": "The folder no longer exists. You are back at all files.",
+ "locked": "Nextcloud is temporarily blocking requests from the Tessera server. Please try again in {minutes, plural, one {# minute} other {# minutes}}.",
+ "truncated": "Showing the first 5000 entries.",
+ "count": "{count, plural, =0 {No items} one {# item} other {# items}}",
+ "quota": {
+ "label": "Storage",
+ "ofTotal": "{used} of {total} used",
+ "usedOnly": "{used} used"
+ },
+ "drop": {
+ "target": "Drop into “{name}”",
+ "hint": "Folders are uploaded with their contents.",
+ "tooMany": "Too many files at once. Drop at most 2000 files in one go.",
+ "tooDeep": "The folders are nested too deeply. More than 20 levels cannot be dropped.",
+ "unreadable": "The dropped files could not be read. Please try again."
+ },
+ "status": {
+ "deleted": "{count, plural, one {“{name}” is in the trash.} other {# items moved to the trash.}}",
+ "moved": "{count, plural, one {“{name}” moved to “{target}”.} other {# items moved to “{target}”.}}",
+ "renamed": "Renamed to “{name}”.",
+ "folderCreated": "Folder “{name}” created.",
+ "failed": "{failed, plural, one {One item could not be processed} other {# items could not be processed}}: {reason}"
+ }
+ },
+ "dialogs": {
+ "cancel": "Cancel",
+ "close": "Close",
+ "newFolder": {
+ "title": "New folder",
+ "label": "Folder name",
+ "submit": "Create",
+ "defaultName": "New folder"
+ },
+ "rename": {
+ "title": "Rename",
+ "label": "New name",
+ "submit": "Rename"
+ },
+ "busy": "One moment …",
+ "nameProblems": {
+ "empty": "Please enter a name.",
+ "dots": "“.” and “..” are not allowed as a name.",
+ "slash": "The name must not contain a slash.",
+ "part": "Nextcloud uses names ending in “.part” itself. Please choose another one.",
+ "tooLong": "The name is too long. At most 250 characters are allowed."
+ },
+ "move": {
+ "title": "{count, plural, one {Move “{name}”} other {Move # items}}",
+ "hint": "Choose the folder to move to.",
+ "submit": "Move here",
+ "noFolders": "There are no subfolders here.",
+ "sameFolder": "The selection is already in this folder.",
+ "intoItself": "A folder cannot be moved into itself.",
+ "openFolder": "Open folder “{name}”"
+ },
+ "delete": {
+ "titleOne": "Delete “{name}”?",
+ "titleMany": "Delete {count} items?",
+ "body": "The items go to the trash of your Nextcloud and can be restored there.",
+ "confirm": "Move to trash"
+ }
+ },
+ "transfers": {
+ "title": "Transfers",
+ "active": "{count, plural, one {# running} other {# running}}",
+ "allDone": "All done",
+ "waiting": "{count, plural, one {# question open} other {# questions open}}",
+ "failed": "{count, plural, one {# failed} other {# failed}}",
+ "collapse": "Collapse transfers",
+ "expand": "Expand transfers",
+ "clearFinished": "Remove finished",
+ "progress": "{loaded} of {total}",
+ "queued": "Waiting",
+ "assembling": "Nextcloud is assembling the file …",
+ "done": "Uploaded",
+ "skipped": "Skipped",
+ "cancel": "Cancel",
+ "cancelLabel": "Cancel uploading “{name}”",
+ "retry": "Try again",
+ "target": "Destination: {folder}",
+ "conflict": {
+ "text": "“{name}” already exists in the folder.",
+ "replace": "Replace",
+ "keepBoth": "Keep both",
+ "skip": "Skip"
+ }
+ },
+ "codes": {
+ "lengthRequired": "The size of the file could not be determined. Please try again.",
+ "chunkTooLarge": "A part of the file was too large. Please reload the page and try again.",
+ "fileTooLarge": "The file is larger than Nextcloud accepts.",
+ "changedMeanwhile": "The file was changed in Nextcloud in the meantime. Try again to decide anew.",
+ "nameTaken": "An item with this name already exists.",
+ "quotaExceeded": "Not enough storage in your Nextcloud.",
+ "quotaExceededFree": "Not enough storage in your Nextcloud. {free} are still free.",
+ "nextcloudLocked": "Nextcloud is temporarily blocking requests from the Tessera server. Please try again in {minutes, plural, one {# minute} other {# minutes}}.",
+ "connectionExpired": "The connection to Nextcloud has expired. Please sign in again.",
+ "aborted": "Cancelled.",
+ "network": "The connection was interrupted. Please check your network and try again.",
+ "notFound": "The item no longer exists.",
+ "moveIntoItself": "A folder cannot be moved into itself.",
+ "invalidName": "This name is not allowed.",
+ "invalidPath": "This name is not allowed.",
+ "nextcloudUnavailable": "Nextcloud cannot be reached or does not respond in time.",
+ "generic": "That did not work. Please try again."
}
}
}
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/SelectionBar.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/SelectionBar.tsx
new file mode 100644
index 0000000..d0f73aa
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/SelectionBar.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { CloseIcon, DownloadIcon, MoveIcon, TrashIcon } from './icons';
+
+/**
+ * Auswahlleiste (quick-261008-mzu): ersetzt die Werkzeugleiste, solange etwas
+ * ausgewaehlt ist — Anzahl links, Aktionen rechts, im Gelbton der Auswahl.
+ */
+export function SelectionBar({
+ count,
+ onDownload,
+ onMove,
+ onDelete,
+ onClear,
+}: {
+ count: number;
+ onDownload: () => void;
+ onMove: () => void;
+ onDelete: () => void;
+ onClear: () => void;
+}) {
+ const t = useTranslations('nextcloudFiles.browser.selection');
+ return (
+ 90 ? 'bg-status-warn' : 'bg-muted-foreground/70'}`}
+ style={{ width: `${Math.max(percent, 2)}%` }}
+ />
+
+ )}
+ {text}
+
+
+
+ {t('count', { count })}
+
+
+
+
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/Toolbar.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/Toolbar.tsx
new file mode 100644
index 0000000..0fe32a5
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/Toolbar.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Breadcrumb } from './Breadcrumb';
+import {
+ ChevronDownIcon,
+ ChevronUpIcon,
+ FolderPlusIcon,
+ GridIcon,
+ ListIcon,
+ UploadIcon,
+} from './icons';
+
+export type SortKey = 'name' | 'size' | 'modified';
+export type SortDir = 'asc' | 'desc';
+export type ViewMode = 'list' | 'grid';
+
+/**
+ * Werkzeugleiste der Dateiansicht (quick-261008-mzu): links der Ordnerpfad,
+ * rechts Neuer Ordner, Hochladen (die eine Hauptaktion), Ansicht und Sortierung.
+ */
+export function Toolbar({
+ path,
+ onNavigate,
+ dropTarget,
+ onNewFolder,
+ onUploadClick,
+ view,
+ onViewChange,
+ sort,
+ onSortChange,
+ disabled = false,
+}: {
+ path: string;
+ onNavigate: (path: string) => void;
+ dropTarget: string | null;
+ onNewFolder: () => void;
+ onUploadClick: () => void;
+ view: ViewMode;
+ onViewChange: (view: ViewMode) => void;
+ sort: { key: SortKey; dir: SortDir };
+ onSortChange: (sort: { key: SortKey; dir: SortDir }) => void;
+ disabled?: boolean;
+}) {
+ const t = useTranslations('nextcloudFiles.browser');
+
+ return (
+
+
+ );
+}
diff --git a/apps/web/src/app/(portal)/modules/nextcloud-files/components/TransferBar.test.tsx b/apps/web/src/app/(portal)/modules/nextcloud-files/components/TransferBar.test.tsx
new file mode 100644
index 0000000..ee70703
--- /dev/null
+++ b/apps/web/src/app/(portal)/modules/nextcloud-files/components/TransferBar.test.tsx
@@ -0,0 +1,278 @@
+import {
+ act,
+ cleanup,
+ fireEvent,
+ render as rtlRender,
+ screen,
+ waitFor,
+ within,
+} from '@testing-library/react';
+import { NextIntlClientProvider } from 'next-intl';
+import type { ReactElement } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { DroppedFile } from '@/components/nextcloud-files/drop-entries';
+import { useTransfers } from '@/components/nextcloud-files/use-transfers';
+import { NextcloudFilesRequestError } from '@/lib/nextcloud-files-api';
+import type { UploadOptions } from '@/lib/nextcloud-files-upload';
+import de from '@/messages/de.json';
+import { TransferBar } from './TransferBar';
+
+const mockUpload = vi.fn();
+const mockList = vi.fn();
+const mockCreate = vi.fn();
+
+vi.mock('@/lib/nextcloud-files-upload', () => ({
+ uploadFile: (...a: unknown[]) => mockUpload(...a),
+}));
+vi.mock('@/lib/nextcloud-files-api', async (importOriginal) => {
+ const actual = await importOriginal
+
+
+ {/* Sortierung: in der Liste ueber die Spaltenkoepfe, hier nur im Raster und auf schmalen
+ Bildschirmen (dort fehlt die Spalte Geaendert). */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!collapsed && (
+ {t('title')}
+ + {active.length > 0 + ? t('active', { count: active.length }) + : conflicts > 0 + ? t('waiting', { count: conflicts }) + : failed > 0 + ? t('failed', { count: failed }) + : t('allDone')} + + {active.length > 0 && ( + {overall} % + )} + + {finished && ( + + )} + + {active.length > 0 && ( + + )} +-
+ {transfers.map((x) => (
+
+
+ {(showBar || x.status === 'error' || x.status === 'conflict') && (
+
+ )}
+ + {x.name} +
+ {showBar && ( +
+
+
+ )}
+ {line}
+ {x.status === 'conflict' && ( +
+
+
+
+
+ )}
+ {x.status === 'error' && (
+
+ )}
+
- void reloadStatus()} />
) : (
- {t('main.server', { host: status.host ?? '' })} -
+