diff --git a/Dockerfile b/Dockerfile
index 1f34c157..311638e8 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -50,7 +50,7 @@ COPY templates templates
 ARG DATABASE_URL="postgres://postgres:postgres@localhost/oxicloud"
 RUN DATABASE_URL="${DATABASE_URL}" cargo build --release
 # The SPA is built by the frontend stage; bring it in for the runtime copy below.
-# (build.rs no longer generates static-dist unless OXICLOUD_LEGACY_ASSETS=1.)
+# (build.rs no longer generates static-dist unless OXICLOUD_RUST_ASSETS=1.)
 COPY --from=frontend /static-dist ./static-dist
 
 # ─── Stage 4: Minimal runtime image ──────────────────────────────────────────
diff --git a/build.rs b/build.rs
index 1ae891bb..64333458 100644
--- a/build.rs
+++ b/build.rs
@@ -40,15 +40,15 @@ fn main() {
 
     println!("cargo:rerun-if-changed=static");
     println!("cargo:rerun-if-changed=build.rs");
-    println!("cargo:rerun-if-env-changed=OXICLOUD_LEGACY_ASSETS");
+    println!("cargo:rerun-if-env-changed=OXICLOUD_RUST_ASSETS");
 
     git_status();
 
-    // Post-cutover (Svelte/Vite): the frontend is built by Vite into
-    // `static-dist/` and the Rust web layer serves it directly — no `include_str!`
-    // HTML, no Rust-side bundling. The legacy pure-Rust asset pipeline below is
-    // retained, behind `OXICLOUD_LEGACY_ASSETS=1`, for one-release rollback only.
-    if env_or("OXICLOUD_LEGACY_ASSETS", "0") != "1" {
+    // The frontend is built by Vite into `static-dist/` and the Rust web layer
+    // serves it directly — no `include_str!` HTML, no Rust-side bundling. The
+    // pure-Rust asset pipeline below is retained, behind `OXICLOUD_RUST_ASSETS=1`,
+    // for one-release rollback only.
+    if env_or("OXICLOUD_RUST_ASSETS", "0") != "1" {
         return;
     }
 
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
index 1ddced4a..45415cfe 100644
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -7,7 +7,9 @@ package-lock.json
 src/lib/i18n/locales/
 # vendored / generated — kept byte-faithful to their source
 src/lib/styles/base/
-src/lib/styles/legacy/
-src/lib/styles/legacy.css
+src/lib/styles/ported/
+src/lib/styles/ported.css
 src/lib/icons/registry.ts
 static/locales/
+static/vendors/
+static/workers/
diff --git a/frontend/.stylelintignore b/frontend/.stylelintignore
index 7020a179..8c2dc071 100644
--- a/frontend/.stylelintignore
+++ b/frontend/.stylelintignore
@@ -4,5 +4,5 @@ node_modules/
 # Ported verbatim from static/css/base — treated as vendored design tokens.
 # New component styles (Svelte <style> + app.css) still get the full ruleset.
 src/lib/styles/base/
-src/lib/styles/legacy/
-src/lib/styles/legacy.css
+src/lib/styles/ported/
+src/lib/styles/ported.css
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index b7b6abb7..3d882973 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -27,6 +27,8 @@ export default ts.config(
 		}
 	},
 	{
-		ignores: ['build/', '.svelte-kit/', 'package/']
+		// `static/` holds vendored, verbatim assets (the delta-upload worker and
+		// the wasm-bindgen hash glue) — lint them as the upstream ships them.
+		ignores: ['build/', '.svelte-kit/', 'package/', 'static/']
 	}
 );
diff --git a/frontend/src/lib/api/client.ts b/frontend/src/lib/api/client.ts
index 4eba2357..370c91ed 100644
--- a/frontend/src/lib/api/client.ts
+++ b/frontend/src/lib/api/client.ts
@@ -1,8 +1,8 @@
 /**
  * Typed API client with transparent 401 → token-refresh → retry.
  *
- * Ported from static/js/core/fetchWrapper.js. Unlike the legacy version this
- * does NOT monkeypatch `window.fetch`; every endpoint module calls `apiFetch`
+ * Ported from static/js/core/fetchWrapper.js. Unlike that wrapper, this does
+ * NOT monkeypatch `window.fetch`; every endpoint module calls `apiFetch`
  * explicitly. The behavioural invariants are preserved exactly:
  *
  *  - A captured raw `fetch` is used for the real network calls so the refresh
diff --git a/frontend/src/lib/api/endpoints/admin.ts b/frontend/src/lib/api/endpoints/admin.ts
index a0f81a01..29f80ff7 100644
--- a/frontend/src/lib/api/endpoints/admin.ts
+++ b/frontend/src/lib/api/endpoints/admin.ts
@@ -1,7 +1,7 @@
 /**
- * Admin endpoints — ported from views/admin/admin.js. Covers users + plugins
- * (the core management surfaces). Settings (OIDC/storage/SMTP), storage
- * migration, and plugin logs/retention are not yet ported — see the admin route.
+ * Admin endpoints — ported from views/admin/admin.js. Covers users, plugins
+ * (incl. logs/retention/live SSE tail), dashboard, settings (OIDC/storage/SMTP),
+ * and storage migration (incl. the verify integrity check).
  */
 import { apiFetch, apiJson } from '$lib/api/client';
 import { getCsrfHeaders } from '$lib/api/csrf';
@@ -38,7 +38,8 @@ export function listUsers(limit: number, offset: number): Promise<AdminUsersPage
 export interface CreateUserInput {
 	username: string;
 	password: string;
-	email: string;
+	/** Optional — the backend auto-generates an address when null/empty. */
+	email: string | null;
 	role: string;
 	quota_bytes: number;
 }
@@ -67,6 +68,207 @@ export function deleteUser(userId: string): Promise<void> {
 	return mutate(`/api/admin/users/${userId}`, 'DELETE');
 }
 
+// ── Dashboard ───────────────────────────────────────────────────────────
+
+export interface AdminDashboard {
+	total_users: number;
+	active_users: number;
+	admin_users: number;
+	server_version: string;
+	total_used_bytes: number;
+	total_quota_bytes: number;
+	storage_usage_percent: number;
+	auth_enabled: boolean;
+	oidc_configured: boolean;
+	quotas_enabled: boolean;
+	registration_enabled?: boolean;
+	users_over_80_percent: number;
+	users_over_quota: number;
+}
+
+export function getDashboard(): Promise<AdminDashboard> {
+	return apiJson<AdminDashboard>('/api/admin/dashboard', { credentials: 'same-origin' });
+}
+
+export function setRegistrationEnabled(enabled: boolean): Promise<void> {
+	return mutate('/api/admin/settings/registration', 'PUT', { registration_enabled: enabled });
+}
+
+// ── SMTP ────────────────────────────────────────────────────────────────
+
+export interface SmtpInfo {
+	enabled: boolean;
+	host: string;
+	port: number;
+	tls: string;
+	from: string;
+	user_state: string;
+}
+
+export function getSmtpInfo(): Promise<SmtpInfo> {
+	return apiJson<SmtpInfo>('/api/admin/smtp/info', { credentials: 'same-origin' });
+}
+
+export interface SmtpTestResult {
+	success: boolean;
+	code?: string | number;
+	message?: string;
+	error?: string;
+}
+
+/** Result of POST .../settings/storage/test — the S3 connection probe. */
+export interface StorageTestResult {
+	connected?: boolean;
+	success?: boolean;
+	backend_type?: string;
+	available_bytes?: number | null;
+	message?: string;
+}
+
+export async function sendSmtpTest(to: string): Promise<SmtpTestResult> {
+	const res = await apiFetch('/api/admin/smtp/test', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ to })
+	});
+	if (res.status === 503)
+		return { success: false, message: 'SMTP is not configured on this server.' };
+	return (await res.json().catch(() => ({ success: false }))) as SmtpTestResult;
+}
+
+// ── OIDC settings ─────────────────────────────────────────────────────────
+
+export interface OidcSettings {
+	enabled: boolean;
+	issuer_url: string;
+	client_id: string;
+	scopes: string | null;
+	auto_provision: boolean;
+	admin_groups: string | null;
+	disable_password_login: boolean;
+	provider_name: string | null;
+	callback_url?: string;
+	client_secret_set?: boolean;
+	env_overrides?: string[];
+}
+
+export interface OidcTestResult {
+	success: boolean;
+	message: string;
+	issuer?: string;
+	authorization_endpoint?: string;
+	provider_name_suggestion?: string;
+}
+
+export function getOidcSettings(): Promise<OidcSettings> {
+	return apiJson<OidcSettings>('/api/admin/settings/oidc', { credentials: 'same-origin' });
+}
+
+export async function testOidc(issuerUrl: string): Promise<OidcTestResult> {
+	const res = await apiFetch('/api/admin/settings/oidc/test', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ issuer_url: issuerUrl })
+	});
+	return (await res
+		.json()
+		.catch(() => ({ success: false, message: 'Request failed' }))) as OidcTestResult;
+}
+
+export function saveOidc(body: Record<string, unknown>): Promise<void> {
+	return mutate('/api/admin/settings/oidc', 'PUT', body);
+}
+
+// ── Storage settings + migration ───────────────────────────────────────────
+
+export interface StorageSettings {
+	backend: string;
+	s3_endpoint_url?: string | null;
+	s3_bucket?: string | null;
+	s3_region?: string | null;
+	s3_access_key_set?: boolean;
+	s3_secret_key_set?: boolean;
+	s3_force_path_style?: boolean;
+	env_overrides?: string[];
+	current_backend?: string;
+	total_blobs?: number;
+	total_bytes_stored?: number;
+	dedup_ratio?: number;
+}
+
+export function getStorageSettings(): Promise<StorageSettings> {
+	return apiJson<StorageSettings>('/api/admin/settings/storage', { credentials: 'same-origin' });
+}
+
+export function saveStorage(body: Record<string, unknown>): Promise<void> {
+	return mutate('/api/admin/settings/storage', 'PUT', body);
+}
+
+export async function testStorage(body: Record<string, unknown>): Promise<StorageTestResult> {
+	const res = await apiFetch('/api/admin/settings/storage/test', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify(body)
+	});
+	return (await res.json().catch(() => ({ connected: false }))) as StorageTestResult;
+}
+
+export interface MigrationStatus {
+	status: 'idle' | 'running' | 'paused' | 'completed' | 'failed';
+	total_blobs: number;
+	migrated_blobs: number;
+	migrated_bytes: number;
+	throughput_bytes_per_sec?: number;
+	failed_blobs?: string[];
+}
+
+export function getMigration(): Promise<MigrationStatus> {
+	return apiJson<MigrationStatus>('/api/admin/storage/migration', { credentials: 'same-origin' });
+}
+
+export function migrationAction(action: 'start' | 'pause' | 'resume' | 'complete'): Promise<void> {
+	const body = action === 'start' ? { concurrency: 4 } : {};
+	return mutate(`/api/admin/storage/migration/${action}`, 'POST', body);
+}
+
+/** Result of a `verify` integrity check (POST .../migration/verify). */
+export interface MigrationVerifyResult {
+	passed: boolean;
+	sample_checked: number;
+	pg_blob_count: number;
+	missing_in_target: string[];
+	size_mismatches: string[];
+}
+
+/**
+ * Run an integrity verification pass over a sample of migrated blobs. Unlike
+ * the other migration actions this returns a structured result that the caller
+ * renders (passed / sample-checked / missing / size-mismatch counts).
+ */
+export async function verifyMigration(sampleSize = 100): Promise<MigrationVerifyResult> {
+	const res = await apiFetch('/api/admin/storage/migration/verify', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ sample_size: sampleSize })
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { message?: string };
+		throw new Error(e.message || `verify failed: ${res.status}`);
+	}
+	const r = (await res.json()) as Partial<MigrationVerifyResult>;
+	return {
+		passed: r.passed ?? false,
+		sample_checked: r.sample_checked ?? 0,
+		pg_blob_count: r.pg_blob_count ?? 0,
+		missing_in_target: r.missing_in_target ?? [],
+		size_mismatches: r.size_mismatches ?? []
+	};
+}
+
 // ── Plugins ─────────────────────────────────────────────────────────────
 
 export interface PluginInfo {
@@ -75,6 +277,49 @@ export interface PluginInfo {
 	version?: string;
 	enabled: boolean;
 	description?: string;
+	abi?: string | number;
+	subscriptions?: string[];
+}
+
+export interface PluginRetention {
+	retention_days: number;
+	max_bytes: number;
+}
+
+/**
+ * Install a plugin from a .zip bundle. The browser sets the multipart
+ * Content-Type (with boundary) — do not override it here.
+ */
+export async function installPlugin(bundle: File): Promise<PluginInfo> {
+	const form = new FormData();
+	form.append('bundle', bundle);
+	const res = await apiFetch('/api/admin/plugins', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...getCsrfHeaders() },
+		body: form
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { message?: string };
+		throw new Error(e.message || `install failed: ${res.status}`);
+	}
+	return (await res.json()) as PluginInfo;
+}
+
+export async function getPluginRetention(id: string): Promise<PluginRetention | null> {
+	const res = await apiFetch(`/api/admin/plugins/${encodeURIComponent(id)}/retention`, {
+		credentials: 'same-origin'
+	});
+	if (!res.ok) return null;
+	return (await res.json()) as PluginRetention;
+}
+
+export function savePluginRetention(id: string, r: PluginRetention): Promise<void> {
+	return mutate(`/api/admin/plugins/${encodeURIComponent(id)}/retention`, 'PUT', r);
+}
+
+export function clearPluginLogs(id: string): Promise<void> {
+	return mutate(`/api/admin/plugins/${encodeURIComponent(id)}/logs`, 'DELETE');
 }
 
 export interface PluginsResult {
@@ -99,3 +344,36 @@ export function setPluginEnabled(id: string, enabled: boolean): Promise<void> {
 export function deletePlugin(id: string): Promise<void> {
 	return mutate(`/api/admin/plugins/${encodeURIComponent(id)}`, 'DELETE');
 }
+
+export interface PluginLogEntry {
+	timestamp?: string;
+	ts?: string;
+	level?: string;
+	message?: string;
+	/** Streamed-entry message field (SSE / persisted logs use `msg`). */
+	msg?: string;
+	/** "outcome" | "log" — outcome entries carry a `reason`. */
+	kind?: string;
+	reason?: string;
+	invocation_id?: string;
+	[k: string]: unknown;
+}
+
+export interface PluginLogPage {
+	total: number;
+	entries: PluginLogEntry[];
+}
+
+export function getPluginLogs(
+	id: string,
+	opts: { limit?: number; offset?: number; level?: string; search?: string } = {}
+): Promise<PluginLogPage> {
+	const params = new URLSearchParams();
+	params.set('limit', String(opts.limit ?? 50));
+	params.set('offset', String(opts.offset ?? 0));
+	if (opts.level) params.set('level', opts.level);
+	if (opts.search) params.set('search', opts.search);
+	return apiJson<PluginLogPage>(`/api/admin/plugins/${encodeURIComponent(id)}/logs?${params}`, {
+		credentials: 'same-origin'
+	});
+}
diff --git a/frontend/src/lib/api/endpoints/auth.ts b/frontend/src/lib/api/endpoints/auth.ts
index 99da0e69..1714f449 100644
--- a/frontend/src/lib/api/endpoints/auth.ts
+++ b/frontend/src/lib/api/endpoints/auth.ts
@@ -52,6 +52,127 @@ export async function login(emailOrUsername: string, password: string): Promise<
 	return (await res.json()) as AuthResponse;
 }
 
+export interface OidcProviders {
+	enabled: boolean;
+	provider_name?: string;
+	password_login_enabled?: boolean;
+	authorize_endpoint?: string;
+}
+
+/** Public OIDC provider info for the login page. */
+export async function getOidcProviders(): Promise<OidcProviders> {
+	try {
+		const res = await fetch('/api/auth/oidc/providers');
+		if (!res.ok) return { enabled: false };
+		return (await res.json()) as OidcProviders;
+	} catch {
+		return { enabled: false };
+	}
+}
+
+export interface AuthStatus {
+	initialized: boolean;
+	admin_count: number;
+	registration_allowed: boolean;
+}
+
+/**
+ * System bootstrap probe. When `initialized === false` no admin exists yet and
+ * the login page must offer the first-run admin-setup flow. Raw `fetch` (NOT
+ * apiFetch): this is unauthenticated and a non-2xx must not bounce through the
+ * refresh interceptor. Defaults to "initialized" on any failure so a transient
+ * error never strands operators on the setup wizard.
+ */
+export async function getAuthStatus(): Promise<AuthStatus> {
+	try {
+		const res = await fetch('/api/auth/status', { credentials: 'same-origin' });
+		if (!res.ok) return { initialized: true, admin_count: 1, registration_allowed: true };
+		return (await res.json()) as AuthStatus;
+	} catch {
+		return { initialized: true, admin_count: 1, registration_allowed: true };
+	}
+}
+
+/**
+ * First-run admin bootstrap. POSTs to `/api/setup`, which creates the admin
+ * user and marks the system initialized. Raw `fetch` (NOT apiFetch) so a 401
+ * surfaces as a genuine failure instead of triggering the refresh-and-redirect.
+ */
+export async function setupAdmin(email: string, password: string): Promise<void> {
+	const res = await fetch('/api/setup', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ username: 'admin', email, password })
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { error?: string; message?: string };
+		throw new Error(e.error || e.message || `setup failed: ${res.status}`);
+	}
+}
+
+/**
+ * OIDC code-exchange fallback. When the IdP round-trip lands back on the login
+ * page with `?oidc_code=`, exchange it for a session (cookies are set
+ * server-side). Raw `fetch` (NOT apiFetch) — a 401 here is a genuine exchange
+ * failure, not an expired access token. Returns the user on success, null on
+ * any failure so the caller can fall through to the normal login UI.
+ */
+export async function exchangeOidcCode(code: string): Promise<User | null> {
+	try {
+		const res = await fetch('/api/auth/oidc/exchange', {
+			method: 'POST',
+			credentials: 'same-origin',
+			headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+			body: JSON.stringify({ code })
+		});
+		if (!res.ok) return null;
+		const data = (await res.json()) as { user?: User };
+		return data.user ?? null;
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Register a new user. Raw `fetch` (NOT apiFetch) so a 401/validation failure
+ * surfaces to the caller instead of tripping the global refresh-and-redirect
+ * interceptor — mirrors the login primitive.
+ */
+export async function register(username: string, email: string, password: string): Promise<void> {
+	const res = await fetch('/api/auth/register', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ username, email, password, role: 'user' })
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { error?: string; message?: string };
+		throw new Error(e.error || e.message || `register failed: ${res.status}`);
+	}
+}
+
+export type MagicLinkResult = 'sent' | 'unavailable';
+
+/**
+ * Anti-enumeration sign-in by email. Any 2xx resolves to `sent` with a uniform
+ * message regardless of whether the email maps to an account. 503 means SMTP
+ * isn't configured (`unavailable`) — operators need to see that. Other non-2xx
+ * throw so the caller can show a generic error. Raw `fetch` (NOT apiFetch):
+ * unauthenticated, must not enter the refresh interceptor.
+ */
+export async function sendMagicLink(email: string): Promise<MagicLinkResult> {
+	const res = await fetch('/api/auth/magic-link/send', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ email })
+	});
+	if (res.status === 503) return 'unavailable';
+	if (!res.ok) throw new Error(`magic-link failed: ${res.status}`);
+	return 'sent';
+}
+
 export async function logout(): Promise<void> {
 	await apiFetch('/api/auth/logout', {
 		method: 'POST',
diff --git a/frontend/src/lib/api/endpoints/batch.ts b/frontend/src/lib/api/endpoints/batch.ts
new file mode 100644
index 00000000..9591815e
--- /dev/null
+++ b/frontend/src/lib/api/endpoints/batch.ts
@@ -0,0 +1,35 @@
+/**
+ * Batch operations (/api/batch/*). Used for multi-item copy — move and delete
+ * already have per-item endpoints the files view loops over, but copy only
+ * exists as a batch endpoint on the backend.
+ */
+import { apiFetch } from '$lib/api/client';
+import { getCsrfHeaders } from '$lib/api/csrf';
+
+const JSON_HEADERS = { 'Content-Type': 'application/json' };
+
+async function post(url: string, body: unknown): Promise<void> {
+	const res = await apiFetch(url, {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify(body)
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { error?: string; message?: string };
+		throw new Error(e.error || e.message || `${url} failed: ${res.status}`);
+	}
+}
+
+export function copyFiles(fileIds: string[], targetFolderId: string | null): Promise<void> {
+	if (fileIds.length === 0) return Promise.resolve();
+	return post('/api/batch/files/copy', { file_ids: fileIds, target_folder_id: targetFolderId });
+}
+
+export function copyFolders(folderIds: string[], targetFolderId: string | null): Promise<void> {
+	if (folderIds.length === 0) return Promise.resolve();
+	return post('/api/batch/folders/copy', {
+		folder_ids: folderIds,
+		target_folder_id: targetFolderId
+	});
+}
diff --git a/frontend/src/lib/api/endpoints/deltaUpload.ts b/frontend/src/lib/api/endpoints/deltaUpload.ts
new file mode 100644
index 00000000..5250a90c
--- /dev/null
+++ b/frontend/src/lib/api/endpoints/deltaUpload.ts
@@ -0,0 +1,130 @@
+/**
+ * Delta upload ("upload only what changed") — ported from
+ * features/files/deltaUpload.js. Main-thread orchestrator for
+ * `/static/workers/deltaWorker.js`, which runs FastCDC chunking + BLAKE3
+ * (the same WASM crate/params as the server) off the UI thread, negotiates
+ * which chunks the server already has, uploads only the missing ones, and
+ * commits. Any failure resolves `null` so the caller falls back to a plain
+ * byte upload — delta is an optimization, never a gate.
+ */
+import { getCsrfToken } from '$lib/api/csrf';
+
+/** Files smaller than this skip delta: the round-trips cost more than the bytes. */
+export const DELTA_UPLOAD_MIN_SIZE = 8 * 1024 * 1024;
+
+const DELTA_WORKER_URL = '/workers/deltaWorker.js';
+const DELTA_TIMEOUT_BASE_MS = 120_000;
+const DELTA_TIMEOUT_PER_GB_MS = 90_000;
+
+export interface DeltaUploadAnswer {
+	ok: boolean;
+	data?: unknown;
+	errorMsg?: string;
+	isQuotaError?: boolean;
+	/** Bytes NOT transferred thanks to dedup. */
+	savedBytes?: number;
+}
+
+/** `false` once the environment proved unable to run the worker/WASM. */
+let usable: boolean | null = null;
+
+interface ProgressMsg {
+	type: 'progress';
+	reusedBytes: number;
+	uploadedBytes: number;
+	totalBytes: number;
+}
+interface FallbackMsg {
+	type: 'fallback';
+	reason?: string;
+}
+interface DoneMsg {
+	type: 'done';
+	status: number;
+	body?: { message?: string; error?: string; still_missing?: unknown };
+}
+type WorkerMsg = ProgressMsg | FallbackMsg | DoneMsg;
+
+/**
+ * Try to upload `file` through the delta protocol. Resolves `null` whenever
+ * the plain byte upload should proceed (too small, environment unusable, any
+ * transport/protocol failure). `onProgress` receives 0–99 while transferring.
+ */
+export function tryDeltaUpload(
+	file: File,
+	folderId: string | null | undefined,
+	onProgress?: (pct: number) => void
+): Promise<DeltaUploadAnswer | null> {
+	if (
+		!folderId ||
+		file.size < DELTA_UPLOAD_MIN_SIZE ||
+		usable === false ||
+		typeof Worker === 'undefined'
+	) {
+		return Promise.resolve(null);
+	}
+
+	return new Promise((resolve) => {
+		let worker: Worker;
+		try {
+			worker = new Worker(DELTA_WORKER_URL, { type: 'module' });
+		} catch {
+			usable = false;
+			resolve(null);
+			return;
+		}
+
+		const sizeGB = file.size / (1024 * 1024 * 1024);
+		const timeoutMs = DELTA_TIMEOUT_BASE_MS + Math.ceil(sizeGB) * DELTA_TIMEOUT_PER_GB_MS;
+		let savedBytes = 0;
+
+		const settle = (answer: DeltaUploadAnswer | null) => {
+			clearTimeout(timer);
+			worker.terminate();
+			resolve(answer);
+		};
+		const timer = setTimeout(() => settle(null), timeoutMs);
+
+		worker.onmessage = (event: MessageEvent<WorkerMsg>) => {
+			const msg = event.data;
+			if (msg.type === 'progress') {
+				savedBytes = msg.reusedBytes;
+				if (onProgress && msg.totalBytes > 0) {
+					const pct = Math.min(
+						99,
+						Math.round((100 * (msg.reusedBytes + msg.uploadedBytes)) / msg.totalBytes)
+					);
+					onProgress(pct);
+				}
+				return;
+			}
+			if (msg.type === 'fallback') {
+				settle(null);
+				return;
+			}
+			if (msg.type === 'done') {
+				if (msg.status === 201 || msg.status === 200) {
+					settle({ ok: true, data: msg.body, savedBytes });
+					return;
+				}
+				const errorMsg =
+					msg.body?.message || msg.body?.error || `Delta upload failed (HTTP ${msg.status})`;
+				if (msg.status === 507) {
+					settle({ ok: false, isQuotaError: true, errorMsg });
+					return;
+				}
+				if (msg.status === 409 && !msg.body?.still_missing) {
+					settle({ ok: false, errorMsg });
+					return;
+				}
+				settle(null);
+			}
+		};
+		worker.onerror = () => {
+			usable = false;
+			settle(null);
+		};
+
+		worker.postMessage({ file, folderId, name: file.name, csrfToken: getCsrfToken() || '' });
+	});
+}
diff --git a/frontend/src/lib/api/endpoints/device.ts b/frontend/src/lib/api/endpoints/device.ts
index d26efa7e..d820af3d 100644
--- a/frontend/src/lib/api/endpoints/device.ts
+++ b/frontend/src/lib/api/endpoints/device.ts
@@ -7,12 +7,32 @@ export interface DeviceInfo {
 	scopes?: string;
 }
 
+/** Distinguishable failure modes the verify page renders differently. */
+export type DeviceLookupError = 'unauthorized' | 'not-found' | 'failed';
+
+/** Thrown by lookupDeviceCode so the page can show a tailored message. */
+export class DeviceLookupFailure extends Error {
+	constructor(readonly kind: DeviceLookupError) {
+		super(kind);
+		this.name = 'DeviceLookupFailure';
+	}
+}
+
+/**
+ * Look up a device user-code. The backend returns HTTP 200 with `{valid:false}`
+ * for unknown/expired codes (NOT a non-2xx), so the body must be inspected — a
+ * 2xx alone does not mean the code is good. A 401 means the caller isn't signed
+ * in and must authenticate before authorizing a device.
+ */
 export async function lookupDeviceCode(code: string): Promise<DeviceInfo> {
 	const res = await apiFetch(`/api/auth/device/verify?code=${encodeURIComponent(code)}`, {
 		credentials: 'same-origin'
 	});
-	if (!res.ok) throw new Error(`device lookup failed: ${res.status}`);
-	return (await res.json()) as DeviceInfo;
+	if (res.status === 401) throw new DeviceLookupFailure('unauthorized');
+	if (!res.ok) throw new DeviceLookupFailure('failed');
+	const data = (await res.json()) as DeviceInfo & { valid?: boolean };
+	if (data.valid === false) throw new DeviceLookupFailure('not-found');
+	return data;
 }
 
 export async function decideDevice(userCode: string, action: 'approve' | 'deny'): Promise<void> {
diff --git a/frontend/src/lib/api/endpoints/favorites.ts b/frontend/src/lib/api/endpoints/favorites.ts
index 65ff880a..d19bbf54 100644
--- a/frontend/src/lib/api/endpoints/favorites.ts
+++ b/frontend/src/lib/api/endpoints/favorites.ts
@@ -1,6 +1,7 @@
 /** Favorites endpoints — ported from favoritesModel.js + features/library. */
 import { apiFetch } from '$lib/api/client';
 import { getCsrfHeaders } from '$lib/api/csrf';
+import { t } from '$lib/i18n/index.svelte';
 import {
 	fetchResourcePage,
 	type ResourceBody,
@@ -9,12 +10,111 @@ import {
 } from './resources';
 import type { ItemType } from '$lib/api/types';
 
+/**
+ * Coarse "how long ago" bucket for date group-bys (favorited/accessed/modified)
+ * — ported from `normalizeDateBucket` in static/js/core/formatters.js.
+ */
+export function dateBucket(value: number | string | null | undefined): string | null {
+	if (value === null || value === undefined) return null;
+	let date: Date;
+	if (typeof value === 'number') date = new Date(value < 1e12 ? value * 1000 : value);
+	else date = new Date(value);
+	if (Number.isNaN(date.getTime())) return null;
+	const diffDays = Math.floor((Date.now() - date.getTime()) / 86_400_000);
+	if (diffDays <= 0) return t('dateBucket.today', 'Today');
+	if (diffDays <= 7) return t('dateBucket.last7days', 'Last 7 days');
+	if (diffDays <= 30) return t('dateBucket.last30days', 'Last 30 days');
+	return String(date.getFullYear());
+}
+
+/**
+ * Coarse size bucket label — ported from `sizeBucket`. Pass `null` for folders
+ * (they receive the "Folders" label).
+ */
+export function sizeBucket(bytes: number | null | undefined): string {
+	if (bytes === null || bytes === undefined) return t('sizeBucket.folders', 'Folders');
+	if (bytes === 0) return t('sizeBucket.empty', 'Empty (0 B)');
+	if (bytes < 1_048_576) return t('sizeBucket.tiny', '< 1 MB');
+	if (bytes < 104_857_600) return t('sizeBucket.small', '1 – 100 MB');
+	if (bytes < 1_073_741_824) return t('sizeBucket.medium', '100 MB – 1 GB');
+	if (bytes < 5 * 1_073_741_824) return t('sizeBucket.large', '1 – 5 GB');
+	return t('sizeBucket.huge', '> 5 GB');
+}
+
+/** Human label for a resource `category` / type group-by bucket. */
+export function typeLabel(category: string): string {
+	const labels: Record<string, string> = {
+		Folder: t('groupby.type.folders', 'Folders'),
+		Image: t('category.images', 'Images'),
+		Video: t('category.videos', 'Videos'),
+		Audio: t('category.audio', 'Audio'),
+		PDF: 'PDF',
+		Document: t('category.documents', 'Documents'),
+		Spreadsheet: t('category.spreadsheets', 'Spreadsheets'),
+		Presentation: t('category.presentations', 'Presentations'),
+		Archive: t('category.archives', 'Archives'),
+		Code: t('category.code', 'Code'),
+		Markdown: t('category.markdown', 'Markdown'),
+		Text: t('category.text', 'Text'),
+		Installer: t('category.installers', 'Installers')
+	};
+	return labels[category] ?? category;
+}
+
 export interface FavoritesResourceItem {
 	resource_type: ItemType;
 	favorited_at: string;
 	resource: ResourceBody;
 }
 
+/** userId → resolved display name (best-effort, cached across the session). */
+const ownerNameCache = new Map<string, string>();
+const ownerInflight = new Map<string, Promise<string>>();
+
+function shortId(id: string): string {
+	return id.length > 8 ? `${id.slice(0, 8)}…` : id;
+}
+
+/**
+ * Best-effort owner display-name lookup via `/api/users/{id}`, de-duplicated
+ * and cached. Falls back to a shortened UUID on any failure. Ported from the
+ * `systemUsers` resolver in the legacy frontend.
+ */
+export async function resolveOwnerName(ownerId: string): Promise<string> {
+	if (!ownerId) return '';
+	const cached = ownerNameCache.get(ownerId);
+	if (cached) return cached;
+	const pending = ownerInflight.get(ownerId);
+	if (pending) return pending;
+
+	const promise = (async () => {
+		let name = shortId(ownerId);
+		try {
+			const res = await apiFetch(`/api/users/${encodeURIComponent(ownerId)}`, {
+				credentials: 'same-origin'
+			});
+			if (res.ok) {
+				const u = (await res.json()) as {
+					username?: string;
+					given_name?: string;
+					family_name?: string;
+					email?: string;
+				};
+				const full = [u.given_name, u.family_name].filter(Boolean).join(' ').trim();
+				name = u.username || full || u.email || name;
+			}
+		} catch {
+			// keep the UUID fallback
+		} finally {
+			ownerInflight.delete(ownerId);
+		}
+		ownerNameCache.set(ownerId, name);
+		return name;
+	})();
+	ownerInflight.set(ownerId, promise);
+	return promise;
+}
+
 export function fetchFavoritesPage(
 	opts?: ResourcePageOpts
 ): Promise<ResourcePage<FavoritesResourceItem>> {
diff --git a/frontend/src/lib/api/endpoints/files.ts b/frontend/src/lib/api/endpoints/files.ts
index e62599ca..3d641968 100644
--- a/frontend/src/lib/api/endpoints/files.ts
+++ b/frontend/src/lib/api/endpoints/files.ts
@@ -18,6 +18,36 @@ export async function uploadFile(folderId: string | null, file: File): Promise<v
 	if (!res.ok) throw new Error(`upload failed: ${res.status}`);
 }
 
+/**
+ * Upload with progress reporting. `fetch` can't surface upload progress, so this
+ * uses XHR; CSRF headers are attached the same way as {@link uploadFile}.
+ * `onProgress` receives a fraction in [0, 1] (or NaN when length is unknown).
+ */
+export function uploadFileWithProgress(
+	folderId: string | null,
+	file: File,
+	onProgress: (fraction: number) => void
+): Promise<void> {
+	return new Promise((resolve, reject) => {
+		const form = new FormData();
+		if (folderId) form.append('folder_id', folderId);
+		form.append('file', file);
+		const xhr = new XMLHttpRequest();
+		xhr.open('POST', '/api/files/upload');
+		xhr.withCredentials = true;
+		for (const [k, v] of Object.entries(getCsrfHeaders())) xhr.setRequestHeader(k, v);
+		xhr.upload.onprogress = (e) => {
+			onProgress(e.lengthComputable ? e.loaded / e.total : NaN);
+		};
+		xhr.onload = () => {
+			if (xhr.status >= 200 && xhr.status < 300) resolve();
+			else reject(new Error(`upload failed: ${xhr.status}`));
+		};
+		xhr.onerror = () => reject(new Error('upload failed: network error'));
+		xhr.send(form);
+	});
+}
+
 export async function renameFile(fileId: string, name: string): Promise<void> {
 	const res = await apiFetch(`/api/files/${fileId}/rename`, {
 		method: 'PUT',
diff --git a/frontend/src/lib/api/endpoints/grants.ts b/frontend/src/lib/api/endpoints/grants.ts
index e2099571..6c880e8a 100644
--- a/frontend/src/lib/api/endpoints/grants.ts
+++ b/frontend/src/lib/api/endpoints/grants.ts
@@ -1,8 +1,140 @@
 /** Sharing (ReBAC grants) endpoints — ported from model/grants.js. */
-import { apiFetch } from '$lib/api/client';
+import { apiFetch, apiJson } from '$lib/api/client';
+import { getCsrfHeaders } from '$lib/api/csrf';
 import type { ItemType } from '$lib/api/types';
 import type { ResourceBody, ResourcePage } from './resources';
 
+const JSON_HEADERS = { 'Content-Type': 'application/json' };
+
+export type SubjectType = 'user' | 'group' | 'email' | 'token';
+export type ShareRole = 'viewer' | 'editor' | 'admin';
+
+export interface GrantSubject {
+	type: SubjectType;
+	id: string;
+}
+
+/**
+ * Subject shape accepted by `POST /api/grants`. The `email` variant feeds the
+ * invite-by-email flow — the server resolves it to (or provisions) an external
+ * user. Mirrors the backend `SubjectInputDto`.
+ */
+export type GrantSubjectInput =
+	| { type: 'user'; id: string }
+	| { type: 'group'; id: string }
+	| { type: 'token'; id: string }
+	| { type: 'email'; email: string };
+
+/** One grant carries a single permission; a subject's role is derived from all of theirs. */
+export interface Grant {
+	id: string;
+	granted_at?: string;
+	granted_by?: string;
+	subject: GrantSubject;
+	permission: string;
+	resource: { type: ItemType; id: string };
+	expires_at?: string | null;
+}
+
+// ── Notification outcomes (PR N1/N2) ─────────────────────────────────────────
+
+export interface NotifyOutcome {
+	kind: 'sent' | 'coalesced' | 'rate_limited' | 'not_applicable';
+	detail?: string;
+	last_sent_at?: string;
+	retry_after_secs?: number;
+	reason?: string;
+}
+
+export interface NotifyOutcomeSet {
+	total_recipients: number;
+	outcomes: NotifyOutcome[];
+}
+
+export interface CreateGrantResponse {
+	grants: Grant[];
+	notification: NotifyOutcomeSet;
+}
+
+export function roleFromPermissions(perms: Iterable<string>): ShareRole {
+	const set = new Set(perms);
+	if (set.has('delete') || set.has('share')) return 'admin';
+	if (set.has('create') || set.has('update')) return 'editor';
+	return 'viewer';
+}
+
+/** Convert a YYYY-MM-DD date (or null) to an ISO-8601 datetime at midnight UTC. */
+export function expiryToIso(date: string | null | undefined): string | null {
+	return date ? new Date(`${date}T00:00:00Z`).toISOString() : null;
+}
+
+export function fetchGrantsForResource(type: ItemType, id: string): Promise<Grant[]> {
+	const params = new URLSearchParams({ resource_type: type, resource_id: id });
+	return apiJson<Grant[]>(`/api/grants?${params}`, { credentials: 'same-origin' });
+}
+
+export async function createGrant(
+	subject: GrantSubjectInput,
+	resource: { type: ItemType; id: string },
+	role: ShareRole,
+	expiresAt?: string | null
+): Promise<CreateGrantResponse> {
+	const res = await apiFetch('/api/grants', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ subject, resource, role, expires_at: expiresAt ?? null })
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { error?: string };
+		throw new Error(e.error || `create grant failed: ${res.status}`);
+	}
+	return (await res.json()) as CreateGrantResponse;
+}
+
+export async function updateGrantRole(
+	subject: GrantSubject,
+	resource: { type: ItemType; id: string },
+	role: ShareRole,
+	expiresAt?: string | null
+): Promise<void> {
+	const res = await apiFetch('/api/grants/role', {
+		method: 'PUT',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ subject, resource, role, expires_at: expiresAt ?? null })
+	});
+	if (!res.ok) throw new Error(`update role failed: ${res.status}`);
+}
+
+export async function revokeGrant(grantId: string): Promise<void> {
+	const res = await apiFetch(`/api/grants/${encodeURIComponent(grantId)}`, {
+		method: 'DELETE',
+		credentials: 'same-origin',
+		headers: getCsrfHeaders()
+	});
+	if (!res.ok) throw new Error(`revoke grant failed: ${res.status}`);
+}
+
+/**
+ * Resend / send a share notification for a single grant.
+ * `POST /api/grants/{id}/notify`. Returns the aggregated outcome set, or a
+ * `rate_limited` summary when the whole call was rate-limited (HTTP 429).
+ */
+export async function notifyGrantRecipient(grantId: string): Promise<NotifyOutcomeSet> {
+	const res = await apiFetch(`/api/grants/${encodeURIComponent(grantId)}/notify`, {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: getCsrfHeaders()
+	});
+	if (res.status === 204) return { total_recipients: 0, outcomes: [] };
+	if (res.status === 429) {
+		return { total_recipients: 1, outcomes: [{ kind: 'rate_limited' }] };
+	}
+	if (res.ok) return (await res.json()) as NotifyOutcomeSet;
+	throw new Error(`notify failed: ${res.status}`);
+}
+
 export interface IncomingGrantItem {
 	resource_type: ItemType;
 	resource: ResourceBody;
@@ -11,12 +143,25 @@ export interface IncomingGrantItem {
 	role?: string;
 }
 
+/** One (subject, permissions) entry within an outgoing resource item. */
+export interface OutgoingResourceGrant {
+	grant_id: string;
+	subject_type: 'user' | 'group' | 'token';
+	subject_id: string;
+	subject_display: string;
+	role: ShareRole;
+	granted_at: string;
+	expires_at?: string | null;
+	has_password: boolean;
+	is_external: boolean;
+}
+
 export interface OutgoingGrantItem {
 	resource_type: ItemType;
 	resource: ResourceBody;
-	subject?: string;
 	first_shared_at?: string;
-	role?: string;
+	/** One entry per (subject, permissions) pair. */
+	grants: OutgoingResourceGrant[];
 }
 
 interface GrantsPageOpts {
diff --git a/frontend/src/lib/api/endpoints/groups.ts b/frontend/src/lib/api/endpoints/groups.ts
index 2ae38102..cf7569d4 100644
--- a/frontend/src/lib/api/endpoints/groups.ts
+++ b/frontend/src/lib/api/endpoints/groups.ts
@@ -1,22 +1,40 @@
 /** Group (ReBAC) endpoints — ported from model/groups.js. */
 import { apiFetch, apiJson } from '$lib/api/client';
 import { getCsrfHeaders } from '$lib/api/csrf';
+import { t } from '$lib/i18n/index.svelte';
 
 const JSON_HEADERS = { 'Content-Type': 'application/json' };
 const enc = encodeURIComponent;
 
+/**
+ * Well-known UUID of the predefined "Internal" virtual group (matches the
+ * Rust constant `INTERNAL_GROUP_ID` in `src/domain/entities/subject_group.rs`
+ * and the legacy `model/groups.js`).
+ */
+export const INTERNAL_GROUP_ID = '00000000-0000-0000-0000-000000000001';
+
+/**
+ * Map of well-known virtual-group UUIDs → i18n key for the human-readable
+ * display name. Anything not in this map falls back to `group.name`. Ported
+ * from `components/groupDisplay.js`.
+ */
+const VIRTUAL_NAME_KEYS: Record<string, string> = {
+	[INTERNAL_GROUP_ID]: 'groups.virtual_internal_name'
+};
+
 export interface GroupItem {
 	id: string;
 	name: string;
 	description?: string | null;
 	member_count?: number;
+	is_virtual?: boolean;
+	can_manage?: boolean;
 }
 
+/** The members endpoint returns a tagged union: `{ kind: 'user' | 'group', id }`. */
 export interface GroupMember {
-	user_id?: string;
-	group_id?: string;
-	email?: string;
-	name?: string;
+	kind: 'user' | 'group';
+	id: string;
 }
 
 async function mutate(url: string, method: string, body?: unknown): Promise<void> {
@@ -29,16 +47,53 @@ async function mutate(url: string, method: string, body?: unknown): Promise<void
 	if (!res.ok) throw new Error(`${method} ${url} failed: ${res.status}`);
 }
 
-/** The list endpoint may return an array or `{ groups | items, total }`. */
-export async function listGroups(limit = 50, offset = 0, q?: string): Promise<GroupItem[]> {
+/** A single page of groups plus the server-reported total (for "Load more"). */
+export interface GroupPage {
+	items: GroupItem[];
+	total: number;
+}
+
+/**
+ * Fetch one page of groups. The list endpoint may return an array or
+ * `{ groups | items, total }`. When no total is provided we fall back to the
+ * page length so pagination collapses gracefully to a single page.
+ */
+export async function listGroupsPage(limit = 50, offset = 0, q?: string): Promise<GroupPage> {
 	const params = new URLSearchParams({ limit: String(limit), offset: String(offset) });
 	if (q) params.set('q', q);
-	const data = await apiJson<GroupItem[] | { groups?: GroupItem[]; items?: GroupItem[] }>(
-		`/api/groups?${params}`,
-		{ credentials: 'same-origin' }
-	);
-	if (Array.isArray(data)) return data;
-	return data.groups ?? data.items ?? [];
+	const data = await apiJson<
+		GroupItem[] | { groups?: GroupItem[]; items?: GroupItem[]; total?: number }
+	>(`/api/groups?${params}`, { credentials: 'same-origin' });
+	if (Array.isArray(data)) return { items: data, total: offset + data.length };
+	const items = data.groups ?? data.items ?? [];
+	return { items, total: data.total ?? offset + items.length };
+}
+
+/** Convenience wrapper returning just the items of the first page. */
+export async function listGroups(limit = 50, offset = 0, q?: string): Promise<GroupItem[]> {
+	return (await listGroupsPage(limit, offset, q)).items;
+}
+
+/**
+ * Human-readable display name for a group. Virtual groups get a translated
+ * label via the well-known UUID mapping; user-defined groups display their
+ * raw name. Ported from `components/groupDisplay.js`.
+ */
+export function groupDisplayName(group: GroupItem): string {
+	if (group.is_virtual) {
+		const key = VIRTUAL_NAME_KEYS[group.id];
+		if (key) return t(key, group.name);
+	}
+	return group.name;
+}
+
+/**
+ * Pick the icon registry name for a group avatar. Virtual (system-wide)
+ * groups use `people-roof`; user-defined groups use `user-group`. Ported from
+ * `components/groupDisplay.js`.
+ */
+export function groupIconName(group: Pick<GroupItem, 'is_virtual'>): string {
+	return group.is_virtual ? 'people-roof' : 'user-group';
 }
 
 export function createGroup(name: string, description?: string | null): Promise<void> {
@@ -61,6 +116,11 @@ export function addUserMember(groupId: string, userId: string): Promise<void> {
 	return mutate(`/api/groups/${enc(groupId)}/members`, 'POST', { user_id: userId });
 }
 
+/** Add another group as a nested member. Backend enforces cycle + depth limits. */
+export function addGroupMember(groupId: string, memberGroupId: string): Promise<void> {
+	return mutate(`/api/groups/${enc(groupId)}/members`, 'POST', { group_id: memberGroupId });
+}
+
 export function removeUserMember(groupId: string, userId: string): Promise<void> {
 	return mutate(`/api/groups/${enc(groupId)}/members/user/${enc(userId)}`, 'DELETE');
 }
diff --git a/frontend/src/lib/api/endpoints/music.ts b/frontend/src/lib/api/endpoints/music.ts
index 942a3c4c..e493e9a8 100644
--- a/frontend/src/lib/api/endpoints/music.ts
+++ b/frontend/src/lib/api/endpoints/music.ts
@@ -32,6 +32,20 @@ export interface PlaylistItem {
 	duration_secs: number | null;
 }
 
+/** A user a playlist is shared with (`/api/playlists/{id}/shares`). */
+export interface MusicShare {
+	user_id: string;
+	can_write: boolean | null;
+}
+
+/** Fields that can be patched on a playlist via PUT. */
+export interface PlaylistUpdate {
+	name?: string;
+	description?: string | null;
+	is_public?: boolean;
+	cover_file_id?: string | null;
+}
+
 export function listPlaylists(): Promise<Playlist[]> {
 	return apiJson<Playlist[]>('/api/playlists', { credentials: 'same-origin' });
 }
@@ -53,14 +67,19 @@ export async function createPlaylist(name: string): Promise<Playlist> {
 	return (await res.json()) as Playlist;
 }
 
-export async function renamePlaylist(playlistId: string, name: string): Promise<void> {
+/** Patch one or more playlist fields (name, description, public flag, cover). */
+export async function updatePlaylist(playlistId: string, patch: PlaylistUpdate): Promise<void> {
 	const res = await apiFetch(`/api/playlists/${playlistId}`, {
 		method: 'PUT',
 		credentials: 'same-origin',
 		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
-		body: JSON.stringify({ name })
+		body: JSON.stringify(patch)
 	});
-	if (!res.ok) throw new Error(`rename playlist failed: ${res.status}`);
+	if (!res.ok) throw new Error(`update playlist failed: ${res.status}`);
+}
+
+export function renamePlaylist(playlistId: string, name: string): Promise<void> {
+	return updatePlaylist(playlistId, { name });
 }
 
 export async function deletePlaylist(playlistId: string): Promise<void> {
@@ -101,3 +120,49 @@ export async function reorderTracks(playlistId: string, itemIds: string[]): Prom
 	});
 	if (!res.ok) throw new Error(`reorder failed: ${res.status}`);
 }
+
+export function listShares(playlistId: string): Promise<MusicShare[]> {
+	return apiJson<MusicShare[]>(`/api/playlists/${playlistId}/shares`, {
+		credentials: 'same-origin'
+	});
+}
+
+export async function sharePlaylist(
+	playlistId: string,
+	userId: string,
+	canWrite = false
+): Promise<void> {
+	const res = await apiFetch(`/api/playlists/${playlistId}/share`, {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ user_id: userId, can_write: canWrite })
+	});
+	if (!res.ok) throw new Error(`share playlist failed: ${res.status}`);
+}
+
+export async function removeShare(playlistId: string, userId: string): Promise<void> {
+	const res = await apiFetch(`/api/playlists/${playlistId}/share/${encodeURIComponent(userId)}`, {
+		method: 'DELETE',
+		credentials: 'same-origin',
+		headers: getCsrfHeaders()
+	});
+	if (!res.ok) throw new Error(`remove share failed: ${res.status}`);
+}
+
+/** Upload an image and return its new file id (used to set a playlist cover). */
+export async function uploadCoverImage(file: File, folderId = ''): Promise<string> {
+	const form = new FormData();
+	form.append('file', file);
+	form.append('folder_id', folderId);
+	const res = await apiFetch('/api/files/upload', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: getCsrfHeaders(),
+		body: form
+	});
+	if (!res.ok) throw new Error(`cover upload failed: ${res.status}`);
+	const uploaded = (await res.json()) as { id?: string };
+	if (!uploaded.id) throw new Error('cover upload returned no file id');
+	return uploaded.id;
+}
diff --git a/frontend/src/lib/api/endpoints/photos.ts b/frontend/src/lib/api/endpoints/photos.ts
index bd578cf5..64df2b7a 100644
--- a/frontend/src/lib/api/endpoints/photos.ts
+++ b/frontend/src/lib/api/endpoints/photos.ts
@@ -1,5 +1,6 @@
 /** Photos timeline endpoint — ported from features/library/photos.js. */
 import { apiFetch } from '$lib/api/client';
+import { getCsrfHeaders } from '$lib/api/csrf';
 import type { FileItem } from '$lib/api/types';
 
 export interface PhotoPage {
@@ -7,6 +8,28 @@ export interface PhotoPage {
 	nextCursor: string | null;
 }
 
+/** EXIF metadata returned by `/api/files/{id}/metadata` (subset used by the lightbox). */
+export interface FileMetadata {
+	file_id: string;
+	captured_at?: number;
+	latitude?: number | null;
+	longitude?: number | null;
+	camera_make?: string | null;
+	camera_model?: string | null;
+	orientation?: number | null;
+	width?: number | null;
+	height?: number | null;
+}
+
+/** Result of a batch trash request (200 = all, 206 = partial success). */
+export interface BatchTrashResult {
+	successful: string[];
+	failed: string[];
+}
+
+/** Backend `MAX_BATCH_SIZE` — chunk larger selections into separate requests. */
+const BATCH_CHUNK_SIZE = 1000;
+
 /**
  * Fetch one page of the photo timeline. The next-page cursor is returned in the
  * `X-Next-Cursor` response header; the page is the last one when fewer than
@@ -24,3 +47,56 @@ export async function fetchPhotos(limit = 60, before?: string | null): Promise<P
 		nextCursor: cursor && items && items.length >= limit ? cursor : null
 	};
 }
+
+/** Fetch EXIF metadata for a file. Returns `null` on any error (non-critical). */
+export async function fetchFileMetadata(fileId: string): Promise<FileMetadata | null> {
+	try {
+		const res = await apiFetch(`/api/files/${fileId}/metadata`, { credentials: 'same-origin' });
+		if (!res.ok) return null;
+		return (await res.json()) as FileMetadata;
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Move files to trash in batches via `POST /api/batch/trash`. One request per
+ * chunk (up to {@link BATCH_CHUNK_SIZE} ids); 200 = all trashed, 206 = partial.
+ * Returns the set of ids that were actually trashed across all chunks.
+ */
+export async function batchTrash(fileIds: string[]): Promise<Set<string>> {
+	const trashed = new Set<string>();
+	for (let i = 0; i < fileIds.length; i += BATCH_CHUNK_SIZE) {
+		const chunk = fileIds.slice(i, i + BATCH_CHUNK_SIZE);
+		const res = await apiFetch('/api/batch/trash', {
+			method: 'POST',
+			credentials: 'same-origin',
+			headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
+			body: JSON.stringify({ file_ids: chunk, folder_ids: [] })
+		});
+		// 200 = all trashed, 206 = partial; both carry `successful`.
+		if (!res.ok && res.status !== 206) continue;
+		const data = (await res.json().catch(() => ({}))) as Partial<BatchTrashResult>;
+		const ok = Array.isArray(data?.successful) ? data.successful : chunk;
+		for (const id of ok) trashed.add(id);
+	}
+	return trashed;
+}
+
+/**
+ * Upload a generated thumbnail blob for a file at a given size. Used by the
+ * photos grid to persist client-generated video frames server-side.
+ */
+export async function uploadThumbnail(
+	fileId: string,
+	size: 'icon' | 'preview' | 'large',
+	blob: Blob,
+	contentType = 'image/jpeg'
+): Promise<void> {
+	await apiFetch(`/api/files/${fileId}/thumbnail/${size}`, {
+		method: 'PUT',
+		credentials: 'same-origin',
+		headers: { ...getCsrfHeaders(), 'Content-Type': contentType },
+		body: blob
+	});
+}
diff --git a/frontend/src/lib/api/endpoints/profile.ts b/frontend/src/lib/api/endpoints/profile.ts
index 8ca88152..b5e21cdb 100644
--- a/frontend/src/lib/api/endpoints/profile.ts
+++ b/frontend/src/lib/api/endpoints/profile.ts
@@ -2,6 +2,7 @@
 import { apiFetch } from '$lib/api/client';
 import { getCsrfHeaders } from '$lib/api/csrf';
 import type { User } from '$lib/api/types';
+import { t } from '$lib/i18n/index.svelte';
 
 const JSON_HEADERS = { 'Content-Type': 'application/json' };
 
@@ -20,7 +21,32 @@ export async function updateProfile(patch: ProfilePatch): Promise<User> {
 		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
 		body: JSON.stringify(patch)
 	});
-	if (!res.ok) throw new Error(`profile update failed: ${res.status}`);
+	if (!res.ok) {
+		const err = (await res.json().catch(() => ({}))) as { message?: string; error?: string };
+		// 409 covers two distinct conflicts that share the same status. The
+		// server's audit log carries the structured `reason`; the JSON body
+		// only exposes a human-readable message, so we branch on that.
+		if (res.status === 409) {
+			const msg = (err.message || err.error || '').toLowerCase();
+			const key = msg.includes('already claimed')
+				? 'profile.username_immutable_error'
+				: 'profile.username_taken_error';
+			const fallback = msg.includes('already claimed')
+				? "Your username has already been set and can't be changed."
+				: 'That username is already taken.';
+			throw new Error(t(key, fallback));
+		}
+		// 403 here means the field is governed by the identity provider.
+		if (res.status === 403) {
+			throw new Error(
+				t(
+					'profile.edit_oidc_managed',
+					'Your profile is managed by your identity provider. Update it there; changes appear on your next sign-in.'
+				)
+			);
+		}
+		throw new Error(err.message || err.error || `profile update failed: ${res.status}`);
+	}
 	return (await res.json()) as User;
 }
 
@@ -34,7 +60,7 @@ export async function changePassword(currentPw: string, newPw: string): Promise<
 	if (!res.ok) throw new Error(`password change failed: ${res.status}`);
 }
 
-export async function updateAvatar(image: string): Promise<void> {
+export async function updateAvatar(image: string | null): Promise<void> {
 	const res = await apiFetch('/api/auth/me/image', {
 		method: 'PUT',
 		credentials: 'same-origin',
@@ -43,3 +69,55 @@ export async function updateAvatar(image: string): Promise<void> {
 	});
 	if (!res.ok) throw new Error(`avatar update failed: ${res.status}`);
 }
+
+export interface AppPassword {
+	id: string;
+	label: string;
+	active?: boolean;
+	created_at: string;
+	last_used_at?: string;
+}
+
+/**
+ * Labels the server uses for sessions auto-generated when a Nextcloud-style
+ * client authenticates (vs. user-created app passwords). Ported from
+ * `views/profile/profile.js`'s `AUTO_LABELS`.
+ */
+const AUTO_LABELS = ['Nextcloud', 'Nextcloud (OIDC)'];
+
+/** True when an app password was auto-generated by a client session login. */
+export function isAutoAppPassword(pw: Pick<AppPassword, 'label'>): boolean {
+	return AUTO_LABELS.includes(pw.label);
+}
+
+export async function listAppPasswords(): Promise<AppPassword[]> {
+	const res = await apiFetch('/api/auth/app-passwords', { credentials: 'same-origin' });
+	if (!res.ok) return [];
+	const data = (await res.json()) as AppPassword[] | { app_passwords?: AppPassword[] };
+	return Array.isArray(data) ? data : (data.app_passwords ?? []);
+}
+
+/** Returns the one-time generated password (shown once). */
+export async function createAppPassword(label: string): Promise<string> {
+	const res = await apiFetch('/api/auth/app-passwords', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify({ label })
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { error?: string; message?: string };
+		throw new Error(e.error || e.message || `create app password failed: ${res.status}`);
+	}
+	const data = (await res.json()) as { password: string };
+	return data.password;
+}
+
+export async function revokeAppPassword(id: string): Promise<void> {
+	const res = await apiFetch(`/api/auth/app-passwords/${encodeURIComponent(id)}`, {
+		method: 'DELETE',
+		credentials: 'same-origin',
+		headers: getCsrfHeaders()
+	});
+	if (!res.ok) throw new Error(`revoke app password failed: ${res.status}`);
+}
diff --git a/frontend/src/lib/api/endpoints/recipients.ts b/frontend/src/lib/api/endpoints/recipients.ts
new file mode 100644
index 00000000..5a5451ff
--- /dev/null
+++ b/frontend/src/lib/api/endpoints/recipients.ts
@@ -0,0 +1,166 @@
+/**
+ * Recipient search for the share People tab — system users (via the system
+ * address book) + groups (via /api/groups/search) + a synthesized "invite by
+ * email" suggestion when the query parses as an email. Ported from the original
+ * shareModal recipient autocomplete (addressBook.searchContacts + _searchGroups
+ * + _looksLikeEmail).
+ */
+import { apiFetch } from '$lib/api/client';
+import { session } from '$lib/stores/session.svelte';
+import type { SubjectType } from './grants';
+
+export interface Recipient {
+	type: Extract<SubjectType, 'user' | 'group' | 'email'>;
+	/** For email recipients this is the normalised email; for users/groups, the UUID. */
+	id: string;
+	label: string;
+	sublabel?: string;
+}
+
+interface Contact {
+	id: string;
+	first_name?: string;
+	last_name?: string;
+	full_name?: string;
+	email?: Array<{ email: string; is_primary?: boolean }>;
+}
+
+interface GroupResult {
+	id: string;
+	name: string;
+}
+
+/**
+ * Permissive client-side email check — matches a non-whitespace local part, an
+ * `@`, and a domain with a dot. The server's `normalize_email` is authoritative;
+ * this just decides whether to surface the synthetic invite-by-email row.
+ */
+function looksLikeEmail(q: string): boolean {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(q);
+}
+
+// The system book lists all users; we filter client-side (matches the original).
+let contactCache: Contact[] | null = null;
+/** `false` once we confirm the system address book is unavailable. */
+let directoryAvailable: boolean | null = null;
+
+async function systemContacts(): Promise<Contact[]> {
+	if (contactCache) return contactCache;
+	try {
+		const res = await apiFetch('/api/address-books/system/contacts', {
+			credentials: 'same-origin'
+		});
+		if (!res.ok) {
+			directoryAvailable = false;
+			contactCache = [];
+			return contactCache;
+		}
+		directoryAvailable = true;
+		contactCache = (await res.json()) as Contact[];
+	} catch {
+		directoryAvailable = false;
+		contactCache = [];
+	}
+	return contactCache;
+}
+
+/**
+ * Whether the system user directory is reachable. Returns `true` until proven
+ * otherwise so callers degrade gracefully; call `ensureResolvers()` first to
+ * get an accurate answer.
+ */
+export function isDirectoryAvailable(): boolean {
+	return directoryAvailable !== false;
+}
+
+function contactLabel(c: Contact): { label: string; email: string } {
+	const name = [c.first_name, c.last_name].filter(Boolean).join(' ') || c.full_name || '';
+	const email = c.email?.find((e) => e.is_primary)?.email ?? c.email?.[0]?.email ?? '';
+	return { label: name || email || c.id, email };
+}
+
+async function searchGroups(q: string): Promise<Recipient[]> {
+	try {
+		const res = await apiFetch(`/api/groups/search?q=${encodeURIComponent(q)}&limit=8`, {
+			credentials: 'same-origin'
+		});
+		if (!res.ok) return [];
+		const groups = (await res.json()) as GroupResult[];
+		return groups.map((g) => ({ type: 'group' as const, id: g.id, label: g.name }));
+	} catch {
+		return [];
+	}
+}
+
+// ── Label resolution for existing grants (subject id → display name) ────────
+let groupCache: Map<string, string> | null = null;
+
+async function loadGroups(): Promise<Map<string, string>> {
+	if (groupCache) return groupCache;
+	groupCache = new Map();
+	try {
+		const res = await apiFetch('/api/groups/search?q=&limit=200', { credentials: 'same-origin' });
+		if (res.ok) {
+			for (const g of (await res.json()) as GroupResult[]) groupCache.set(g.id, g.name);
+		}
+	} catch {
+		/* leave empty */
+	}
+	return groupCache;
+}
+
+/** Preload the user + group caches so grant rows can show names. */
+export async function ensureResolvers(): Promise<void> {
+	await Promise.all([systemContacts(), loadGroups()]);
+}
+
+/** Resolve a subject id to a display label using the preloaded caches. */
+export function resolveLabel(type: 'user' | 'group', id: string): string {
+	if (type === 'group') return groupCache?.get(id) ?? id;
+	const c = contactCache?.find((x) => x.id === id);
+	return c ? contactLabel(c).label : id;
+}
+
+/** Resolve a subject id to a label + sublabel (email) for member vignettes. */
+export function resolveRecipient(type: 'user' | 'group', id: string): Recipient {
+	if (type === 'group') {
+		return { type: 'group', id, label: groupCache?.get(id) ?? id };
+	}
+	const c = contactCache?.find((x) => x.id === id);
+	if (!c) return { type: 'user', id, label: id };
+	const { label, email } = contactLabel(c);
+	return { type: 'user', id, label, sublabel: email };
+}
+
+/**
+ * Combined user + group results matching the query (case-insensitive), plus a
+ * synthetic invite-by-email suggestion when the query is an email that no
+ * contact already owns. The current logged-in user is excluded — you can't
+ * share with yourself. Capped at 8 combined (groups, then users, then email).
+ */
+export async function searchRecipients(query: string): Promise<Recipient[]> {
+	const q = query.toLowerCase().trim();
+	if (!q) return [];
+	const currentUserId = session.user?.id ?? null;
+	const [contacts, groups] = await Promise.all([systemContacts(), searchGroups(q)]);
+	const matched = contacts
+		.filter((c) => c.id !== currentUserId)
+		.map((c) => ({ c, ...contactLabel(c) }))
+		.filter(
+			({ label, email }) => label.toLowerCase().includes(q) || email.toLowerCase().includes(q)
+		);
+	const users: Recipient[] = matched.map(({ c, label, email }) => ({
+		type: 'user' as const,
+		id: c.id,
+		label,
+		sublabel: email
+	}));
+
+	const emailItems: Recipient[] = [];
+	if (looksLikeEmail(q)) {
+		const exists = matched.some(({ email }) => email.toLowerCase() === q);
+		if (!exists) emailItems.push({ type: 'email', id: q, label: q });
+	}
+
+	return [...groups, ...users, ...emailItems].slice(0, 8);
+}
diff --git a/frontend/src/lib/api/endpoints/resources.ts b/frontend/src/lib/api/endpoints/resources.ts
index 22e0daab..1262a761 100644
--- a/frontend/src/lib/api/endpoints/resources.ts
+++ b/frontend/src/lib/api/endpoints/resources.ts
@@ -1,6 +1,6 @@
 /**
  * Shared cursor-pagination helper for the favorites/recent/trash "resources"
- * endpoints, which all take the same query params. Ported from the legacy
+ * endpoints, which all take the same query params. Ported from the original
  * favoritesModel/recentModel/trashModel.
  */
 import { apiFetch } from '$lib/api/client';
diff --git a/frontend/src/lib/api/endpoints/search.ts b/frontend/src/lib/api/endpoints/search.ts
new file mode 100644
index 00000000..62983ae8
--- /dev/null
+++ b/frontend/src/lib/api/endpoints/search.ts
@@ -0,0 +1,77 @@
+/** Search endpoint — ported from features/files/search.js. */
+import { apiFetch, apiJson } from '$lib/api/client';
+import type { SearchResults, SortBy } from '$lib/api/types';
+
+export interface SearchOptions {
+	folderId?: string;
+	recursive?: boolean;
+	fileTypes?: string[];
+	minSize?: number;
+	maxSize?: number;
+	/** Unix-seconds lower bound on created time. */
+	createdAfter?: number;
+	/** Unix-seconds upper bound on created time. */
+	createdBefore?: number;
+	/** Unix-seconds lower bound on modified time. */
+	modifiedAfter?: number;
+	/** Unix-seconds upper bound on modified time. */
+	modifiedBefore?: number;
+	limit?: number;
+	offset?: number;
+	sortBy?: SortBy;
+}
+
+export function searchFiles(query: string, opts: SearchOptions = {}): Promise<SearchResults> {
+	const params = new URLSearchParams();
+	params.append('query', query);
+	if (opts.folderId) params.append('folder_id', opts.folderId);
+	if (opts.recursive !== undefined) params.append('recursive', String(opts.recursive));
+	for (const ft of opts.fileTypes ?? []) params.append('type', ft);
+	if (opts.minSize != null) params.append('min_size', String(opts.minSize));
+	if (opts.maxSize != null) params.append('max_size', String(opts.maxSize));
+	if (opts.createdAfter != null) params.append('created_after', String(opts.createdAfter));
+	if (opts.createdBefore != null) params.append('created_before', String(opts.createdBefore));
+	if (opts.modifiedAfter != null) params.append('modified_after', String(opts.modifiedAfter));
+	if (opts.modifiedBefore != null) params.append('modified_before', String(opts.modifiedBefore));
+	params.append('limit', String(opts.limit ?? 100));
+	params.append('offset', String(opts.offset ?? 0));
+	params.append('sort_by', opts.sortBy ?? 'relevance');
+	return apiJson<SearchResults>(`/api/search?${params.toString()}`, { credentials: 'same-origin' });
+}
+
+/** A single autocomplete suggestion returned by the lightweight suggest endpoint. */
+export interface SearchSuggestions {
+	suggestions: string[];
+	query_time_ms: number;
+}
+
+export interface SuggestOptions {
+	folderId?: string;
+	limit?: number;
+}
+
+/**
+ * Lightweight autocomplete suggestions from the backend `GET /api/search/suggest`
+ * endpoint — name-only hints without the full search overhead.
+ */
+export function searchSuggest(
+	query: string,
+	opts: SuggestOptions = {}
+): Promise<SearchSuggestions> {
+	const params = new URLSearchParams();
+	params.append('query', query);
+	if (opts.folderId) params.append('folder_id', opts.folderId);
+	if (opts.limit != null) params.append('limit', String(opts.limit));
+	return apiJson<SearchSuggestions>(`/api/search/suggest?${params.toString()}`, {
+		credentials: 'same-origin'
+	});
+}
+
+/** Clear the server-side search cache (`DELETE /api/search/cache`). */
+export async function clearSearchCache(): Promise<void> {
+	const res = await apiFetch('/api/search/cache', {
+		method: 'DELETE',
+		credentials: 'same-origin'
+	});
+	if (!res.ok) throw new Error(`Failed to clear search cache: ${res.status} ${res.statusText}`);
+}
diff --git a/frontend/src/lib/api/endpoints/share.ts b/frontend/src/lib/api/endpoints/share.ts
index d240b694..1b69f68a 100644
--- a/frontend/src/lib/api/endpoints/share.ts
+++ b/frontend/src/lib/api/endpoints/share.ts
@@ -31,7 +31,8 @@ export interface ShareListing {
 export type ShareMetaResult =
 	| { status: 'ok'; data: ShareMeta }
 	| { status: 'password' }
-	| { status: 'expired' };
+	| { status: 'expired' }
+	| { status: 'invalid' };
 
 const enc = encodeURIComponent;
 
@@ -44,6 +45,8 @@ export async function getShareMeta(token: string): Promise<ShareMetaResult> {
 		throw new Error('Unauthorized');
 	}
 	if (res.status === 410) return { status: 'expired' };
+	// 404 means the token doesn't resolve to any share — a bad/typo'd link.
+	if (res.status === 404) return { status: 'invalid' };
 	throw new Error(`HTTP ${res.status}`);
 }
 
diff --git a/frontend/src/lib/api/endpoints/shares.ts b/frontend/src/lib/api/endpoints/shares.ts
new file mode 100644
index 00000000..ca5ccec3
--- /dev/null
+++ b/frontend/src/lib/api/endpoints/shares.ts
@@ -0,0 +1,110 @@
+/** Public share-link endpoints (/api/shares) — ported from features/sharing. */
+import { apiFetch } from '$lib/api/client';
+import { getCsrfHeaders } from '$lib/api/csrf';
+import type { ItemType, ShareItem } from '$lib/api/types';
+
+const JSON_HEADERS = { 'Content-Type': 'application/json' };
+
+export interface CreateShareInput {
+	itemId: string;
+	/** Optional human-readable link name (stored as `item_name`). */
+	itemName?: string | null;
+	itemType: ItemType;
+	password?: string | null;
+	/** ISO date string or null; converted to epoch seconds for the wire. */
+	expiresAt?: string | null;
+}
+
+export async function createShare(input: CreateShareInput): Promise<ShareItem> {
+	const body = {
+		item_id: input.itemId,
+		item_name: input.itemName ?? null,
+		item_type: input.itemType,
+		password: input.password || null,
+		expires_at: input.expiresAt ? Math.floor(new Date(input.expiresAt).getTime() / 1000) : null
+	};
+	const res = await apiFetch('/api/shares', {
+		method: 'POST',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify(body)
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { error?: string };
+		throw new Error(e.error || `create share failed: ${res.status}`);
+	}
+	return (await res.json()) as ShareItem;
+}
+
+export async function listSharesForItem(itemId: string, itemType: ItemType): Promise<ShareItem[]> {
+	const params = new URLSearchParams({ item_id: itemId, item_type: itemType });
+	const res = await apiFetch(`/api/shares?${params}`, { credentials: 'same-origin' });
+	if (!res.ok) return [];
+	const data = (await res.json()) as ShareItem[] | { items?: ShareItem[] };
+	return Array.isArray(data) ? data : (data.items ?? []);
+}
+
+/** Fetch a single share by its UUID (used to resolve a token's URL on demand). */
+export async function getShareById(shareId: string): Promise<ShareItem> {
+	const res = await apiFetch(`/api/shares/${encodeURIComponent(shareId)}`, {
+		credentials: 'same-origin'
+	});
+	if (!res.ok) throw new Error(`get share failed: ${res.status}`);
+	return (await res.json()) as ShareItem;
+}
+
+export interface UpdateShareInput {
+	/** `null` clears the password; omit to leave it unchanged. */
+	password?: string | null;
+	/** ISO date string clears/sets; converted to epoch seconds. `null` clears. */
+	expiresAt?: string | null;
+}
+
+/**
+ * Edit an existing public link's password and/or expiry.
+ * `PUT /api/shares/{id}` with `{ password, expires_at }`.
+ */
+export async function updateShare(shareId: string, input: UpdateShareInput): Promise<ShareItem> {
+	const body: { password?: string | null; expires_at?: number | null } = {};
+	if (input.password !== undefined) body.password = input.password;
+	if (input.expiresAt !== undefined) {
+		body.expires_at = input.expiresAt
+			? Math.floor(new Date(input.expiresAt).getTime() / 1000)
+			: null;
+	}
+	const res = await apiFetch(`/api/shares/${encodeURIComponent(shareId)}`, {
+		method: 'PUT',
+		credentials: 'same-origin',
+		headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
+		body: JSON.stringify(body)
+	});
+	if (!res.ok) {
+		const e = (await res.json().catch(() => ({}))) as { error?: string };
+		throw new Error(e.error || `update share failed: ${res.status}`);
+	}
+	return (await res.json()) as ShareItem;
+}
+
+export async function deleteShare(shareId: string): Promise<void> {
+	const res = await apiFetch(`/api/shares/${shareId}`, {
+		method: 'DELETE',
+		credentials: 'same-origin',
+		headers: getCsrfHeaders()
+	});
+	if (!res.ok && res.status !== 204) throw new Error(`delete share failed: ${res.status}`);
+}
+
+/**
+ * Copy a share URL to the clipboard, resolving it against the current origin.
+ * Shared by the dialog and My Shares so copy-link logic lives in one place.
+ * Returns `true` on success.
+ */
+export async function copyShareLink(url: string): Promise<boolean> {
+	try {
+		const absolute = typeof location !== 'undefined' ? new URL(url, location.origin).href : url;
+		await navigator.clipboard.writeText(absolute);
+		return true;
+	} catch {
+		return false;
+	}
+}
diff --git a/frontend/src/lib/api/endpoints/trash.ts b/frontend/src/lib/api/endpoints/trash.ts
index 714c67fc..8a49d5a1 100644
--- a/frontend/src/lib/api/endpoints/trash.ts
+++ b/frontend/src/lib/api/endpoints/trash.ts
@@ -1,6 +1,7 @@
 /** Trash endpoints — ported from trashModel.js + views/trash. */
 import { apiFetch } from '$lib/api/client';
 import { getCsrfHeaders } from '$lib/api/csrf';
+import { t } from '$lib/i18n/index.svelte';
 import { fetchResourcePage, type ResourcePage, type ResourcePageOpts } from './resources';
 import type { TrashResourceItem } from '$lib/api/types';
 
@@ -8,6 +9,81 @@ export function fetchTrashPage(opts?: ResourcePageOpts): Promise<ResourcePage<Tr
 	return fetchResourcePage<TrashResourceItem>('/api/trash/resources', 'deletion_date', opts);
 }
 
+/** Days from now until `value` (negative when already past). */
+function daysUntil(value: number | string | Date | null | undefined): number | null {
+	if (value === null || value === undefined) return null;
+	let date: Date;
+	if (value instanceof Date) date = value;
+	else if (typeof value === 'number') date = new Date(value < 1e12 ? value * 1000 : value);
+	else date = new Date(value);
+	if (Number.isNaN(date.getTime())) return null;
+	return Math.floor((date.getTime() - Date.now()) / 86_400_000);
+}
+
+export type ExpiryTier = 'never' | 'normal' | 'caution' | 'soon' | 'urgent' | 'expired';
+
+export interface ExpiryChip {
+	tier: ExpiryTier;
+	icon: string;
+	label: string;
+}
+
+/**
+ * Tiered "remaining lifetime" chip for a trash deletion date — ported from
+ * `formatExpiryChip` in static/js/core/formatters.js. `null` means "Never".
+ */
+export function expiryChip(value: number | string | null | undefined): ExpiryChip {
+	if (value === null || value === undefined) {
+		return { tier: 'never', icon: 'infinity', label: t('expiryChip.never', 'Never expires') };
+	}
+	const days = daysUntil(value);
+	if (days === null) {
+		return { tier: 'normal', icon: 'calendar', label: String(value) };
+	}
+	if (days < 0)
+		return {
+			tier: 'expired',
+			icon: 'exclamation-triangle',
+			label: t('expiryChip.expired', 'Expired')
+		};
+	if (days === 0)
+		return { tier: 'urgent', icon: 'clock', label: t('expiryChip.today', 'Expires today') };
+	if (days === 1)
+		return { tier: 'urgent', icon: 'clock', label: t('expiryChip.tomorrow', 'Expires tomorrow') };
+	if (days <= 7)
+		return {
+			tier: 'soon',
+			icon: 'calendar',
+			label: t('expiryChip.inDays', { count: days }, 'Expires in {{count}} days')
+		};
+	if (days <= 30)
+		return {
+			tier: 'caution',
+			icon: 'calendar',
+			label: t('expiryChip.inDays', { count: days }, 'Expires in {{count}} days')
+		};
+	return {
+		tier: 'normal',
+		icon: 'calendar',
+		label: t('expiryChip.onDate', { count: days }, 'Expires in {{count}} days')
+	};
+}
+
+/**
+ * Coarse "remaining days" bucket label for the trash group-by swimlanes —
+ * ported from `normalizeExpiryBucket`.
+ */
+export function remainingDaysBucket(value: number | string | null | undefined): string {
+	const days = daysUntil(value);
+	if (days === null) return t('expiryBucket.noExpiry', 'No expiration');
+	if (days < 0) return t('expiryBucket.expired', 'Expired');
+	if (days === 0) return t('expiryBucket.today', 'Today');
+	if (days === 1) return t('expiryBucket.tomorrow', 'Tomorrow');
+	if (days <= 7) return t('expiryBucket.week', 'In less than 7 days');
+	if (days <= 30) return t('expiryBucket.month', 'In less than 30 days');
+	return t('expiryBucket.later', 'Later');
+}
+
 export async function restoreTrashItem(trashId: string): Promise<void> {
 	const res = await apiFetch(`/api/trash/${trashId}/restore`, {
 		method: 'POST',
diff --git a/frontend/src/lib/api/endpoints/wopi.ts b/frontend/src/lib/api/endpoints/wopi.ts
new file mode 100644
index 00000000..e5408fed
--- /dev/null
+++ b/frontend/src/lib/api/endpoints/wopi.ts
@@ -0,0 +1,85 @@
+/**
+ * WOPI (Collabora / OnlyOffice) integration — ported from features/files/wopiEditor.js.
+ * `getEditorUrl` returns the iframe action URL + access token; the office editor
+ * is launched by POST-ing the token to that URL (see WopiEditor.svelte).
+ */
+import { apiFetch } from '$lib/api/client';
+
+export interface WopiEditorData {
+	editor_url: string;
+	access_token: string;
+	access_token_ttl: string | number;
+}
+
+const FALLBACK_EXTS = [
+	'docx',
+	'doc',
+	'odt',
+	'rtf',
+	'txt',
+	'xlsx',
+	'xls',
+	'ods',
+	'csv',
+	'pptx',
+	'ppt',
+	'odp'
+];
+
+let cachedExts: string[] | null = null;
+
+export async function getSupportedExtensions(): Promise<string[]> {
+	if (cachedExts) return cachedExts;
+	try {
+		const res = await fetch('/wopi/supported-extensions');
+		if (res.ok) {
+			const exts = (await res.json()) as string[];
+			if (Array.isArray(exts) && exts.length > 0) {
+				cachedExts = exts;
+				return exts;
+			}
+		}
+	} catch {
+		/* fall through to the hardcoded list */
+	}
+	cachedExts = FALLBACK_EXTS;
+	return cachedExts;
+}
+
+export async function canEditWithWopi(filename: string): Promise<boolean> {
+	const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+	return (await getSupportedExtensions()).includes(ext);
+}
+
+export async function getEditorUrl(
+	fileId: string,
+	action: 'edit' | 'view' = 'edit'
+): Promise<WopiEditorData> {
+	const res = await apiFetch(
+		`/api/wopi/editor-url?file_id=${encodeURIComponent(fileId)}&action=${encodeURIComponent(action)}`,
+		{ credentials: 'same-origin' }
+	);
+	if (!res.ok) {
+		const text = await res.text().catch(() => '');
+		throw new Error(`Editor URL request failed: ${res.status} ${text}`);
+	}
+	return (await res.json()) as WopiEditorData;
+}
+
+/** PDFs are view-only in WOPI: an edit request returns 422 → retry as view. */
+export async function getEditorUrlWithFallback(
+	fileId: string,
+	filename: string,
+	action: 'edit' | 'view' = 'edit'
+): Promise<WopiEditorData> {
+	try {
+		return await getEditorUrl(fileId, action);
+	} catch (e) {
+		const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+		const msg = e instanceof Error ? e.message : '';
+		if (action === 'edit' && ext === 'pdf' && msg.includes('422')) {
+			return getEditorUrl(fileId, 'view');
+		}
+		throw e;
+	}
+}
diff --git a/frontend/src/lib/components/AppShell.svelte b/frontend/src/lib/components/AppShell.svelte
index ffce5adb..3cea2a0a 100644
--- a/frontend/src/lib/components/AppShell.svelte
+++ b/frontend/src/lib/components/AppShell.svelte
@@ -3,10 +3,17 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { logout } from '$lib/api/endpoints/auth';
+	import { searchFiles } from '$lib/api/endpoints/search';
+	import { fileInlineUrl } from '$lib/api/endpoints/files';
+	import type { FileItem, FolderItem } from '$lib/api/types';
+	import CommandPalette from '$lib/components/CommandPalette.svelte';
 	import Icon from '$lib/icons/Icon.svelte';
-	import { i18n, SUPPORTED_LOCALES, setLocale, t, type Locale } from '$lib/i18n/index.svelte';
+	import { iconNameFromClass } from '$lib/utils/display';
+	import { i18n, LANGUAGES, setLocale, t, type Locale } from '$lib/i18n/index.svelte';
+	import { apiFetch } from '$lib/api/client';
 	import { session } from '$lib/stores/session.svelte';
 	import { theme, type Theme } from '$lib/stores/theme.svelte';
+	import { ui } from '$lib/stores/ui.svelte';
 	import { formatBytes } from '$lib/utils/format';
 
 	let { children }: { children: Snippet } = $props();
@@ -20,31 +27,143 @@
 
 	const LINKS: NavLink[] = [
 		{ href: '/files', label: t('nav.files', 'Files'), icon: 'folder' },
-		{ href: '/shared', label: t('nav.shared', 'Shared'), icon: 'globe' },
+		{ href: '/shared', label: t('nav.shared', 'Shared'), icon: 'oxiexport' },
 		{
 			href: '/shared-with-me',
 			label: t('nav.shared_with_me', 'Shared with me'),
-			icon: 'user-group'
+			icon: 'oxiimport'
 		},
 		{ href: '/recent', label: t('nav.recent', 'Recent'), icon: 'clock' },
 		{ href: '/favorites', label: t('nav.favorites', 'Favorites'), icon: 'star' },
 		{ href: '/photos', label: t('nav.photos', 'Photos'), icon: 'images' },
 		{ href: '/music', label: t('nav.music', 'Music'), icon: 'music' },
-		{ href: '/trash', label: t('nav.trash', 'Trash'), icon: 'trash' },
-		{ href: '/groups', label: t('nav.groups', 'Groups'), icon: 'users', admin: true },
-		{ href: '/admin', label: t('admin.title', 'Admin'), icon: 'cog', admin: true }
+		{ href: '/trash', label: t('nav.trash', 'Trash'), icon: 'trash' }
 	];
 
 	const isAdmin = $derived(session.user?.role === 'admin');
-	const visibleLinks = $derived(LINKS.filter((l) => !l.admin || isAdmin));
 
 	function active(href: string): boolean {
 		return page.url.pathname === href || page.url.pathname.startsWith(`${href}/`);
 	}
 
 	let sidebarOpen = $state(false);
+	let notifOpen = $state(false);
+	let menuOpen = $state(false);
+	let searchQuery = $state('');
+	/** Mobile collapsible-search overlay state (toggles .top-bar--search-active). */
+	let searchActive = $state(false);
+	let langOpen = $state(false);
+	let aboutOpen = $state(false);
+	let appVersion = $state('');
+	let searchInputEl = $state<HTMLInputElement | null>(null);
 
-	const THEMES: Theme[] = ['light', 'auto', 'dark'];
+	// Bell ring/auto-open: react to the store's bellPing token (bumped on upload
+	// start etc.). Open the panel and replay the ring animation.
+	let bellRinging = $state(false);
+	let lastPing = 0;
+	$effect(() => {
+		const p = ui.bellPing;
+		if (p === lastPing) return;
+		lastPing = p;
+		if (p === 0) return;
+		notifOpen = true;
+		menuOpen = false;
+		bellRinging = false;
+		// Force a reflow gap before re-adding so the CSS animation restarts.
+		requestAnimationFrame(() => (bellRinging = true));
+		setTimeout(() => (bellRinging = false), 900);
+	});
+
+	function openMobileSearch() {
+		searchActive = true;
+		requestAnimationFrame(() => searchInputEl?.focus());
+	}
+
+	function closeMobileSearch() {
+		searchActive = false;
+		clearSearch();
+	}
+
+	async function openAbout() {
+		menuOpen = false;
+		aboutOpen = true;
+		if (!appVersion) {
+			try {
+				const r = await apiFetch('/api/version', { credentials: 'same-origin' });
+				if (r.ok) {
+					const data = (await r.json()) as { version?: string };
+					if (data.version) appVersion = `v${data.version}`;
+				}
+			} catch {
+				/* version stays blank — non-critical */
+			}
+		}
+	}
+
+	// Top-bar autocomplete
+	type Suggestion = { kind: 'folder'; item: FolderItem } | { kind: 'file'; item: FileItem };
+	let suggestions = $state<Suggestion[]>([]);
+	let suggestOpen = $state(false);
+	let suggestBusy = $state(false);
+	let suggestTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function goToResults() {
+		const q = searchQuery.trim();
+		if (q) {
+			suggestOpen = false;
+			searchActive = false;
+			goto(`/search?q=${encodeURIComponent(q)}`);
+		}
+	}
+
+	function onSearch(e: SubmitEvent) {
+		e.preventDefault();
+		goToResults();
+	}
+
+	function onSearchInput() {
+		if (suggestTimer) clearTimeout(suggestTimer);
+		const q = searchQuery.trim();
+		if (q.length < 2) {
+			suggestions = [];
+			suggestOpen = false;
+			return;
+		}
+		suggestTimer = setTimeout(async () => {
+			suggestBusy = true;
+			try {
+				const r = await searchFiles(q, { recursive: true, limit: 6 });
+				suggestions = [
+					...r.folders.slice(0, 3).map((item) => ({ kind: 'folder' as const, item })),
+					...r.files.slice(0, 6).map((item) => ({ kind: 'file' as const, item }))
+				];
+				suggestOpen = suggestions.length > 0;
+			} catch {
+				suggestions = [];
+				suggestOpen = false;
+			} finally {
+				suggestBusy = false;
+			}
+		}, 250);
+	}
+
+	function clearSearch() {
+		searchQuery = '';
+		suggestions = [];
+		suggestOpen = false;
+	}
+
+	function pickSuggestion(s: Suggestion) {
+		suggestOpen = false;
+		if (s.kind === 'folder') goto(`/files/${s.item.id}`);
+		else window.open(fileInlineUrl(s.item.id), '_blank', 'noopener');
+	}
+
+	const THEMES: { mode: Theme; icon: string; label: string }[] = [
+		{ mode: 'light', icon: 'sun', label: t('user_menu.theme.light', 'Light') },
+		{ mode: 'auto', icon: 'desktop', label: t('user_menu.theme.auto', 'Like OS') },
+		{ mode: 'dark', icon: 'moon', label: t('user_menu.theme.dark', 'Dark') }
+	];
 
 	const storagePct = $derived(
 		session.user && session.user.storage_quota_bytes > 0
@@ -52,6 +171,59 @@
 			: 0
 	);
 
+	const initials = $derived.by(() => {
+		const u = session.user;
+		if (!u) return '?';
+		const base = u.username || u.email || '?';
+		const parts = base.trim().split(/\s+/);
+		if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+		return base.slice(0, 2).toUpperCase();
+	});
+
+	/** Uploaded avatar photo URL, if any. */
+	const avatarPhoto = $derived(session.user?.image ?? null);
+
+	/**
+	 * Deterministic colour bucket 0–4 from the user id (matches the original
+	 * userVignette `_colorIndex`) so the same user always gets the same colour.
+	 */
+	const avatarColor = $derived.by(() => {
+		const id = session.user?.id ?? '';
+		let hash = 0;
+		for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) | 0;
+		return Math.abs(hash) % 5;
+	});
+
+	function closeMenus() {
+		notifOpen = false;
+		menuOpen = false;
+		langOpen = false;
+	}
+
+	async function chooseLocale(loc: Locale) {
+		langOpen = false;
+		await setLocale(loc);
+	}
+
+	const currentLang = $derived(LANGUAGES.find((l) => l.code === i18n.locale) ?? LANGUAGES[0]);
+
+	function formatTime(ms: number): string {
+		return new Date(ms).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+	}
+
+	function notifIcon(kind: string): string {
+		switch (kind) {
+			case 'success':
+				return 'check';
+			case 'error':
+				return 'exclamation-circle';
+			case 'warning':
+				return 'exclamation-triangle';
+			default:
+				return 'info-circle';
+		}
+	}
+
 	async function onLogout() {
 		try {
 			await logout();
@@ -63,6 +235,16 @@
 	}
 </script>
 
+<svelte:window
+	onclick={closeMenus}
+	onkeydown={(e) => {
+		if (e.key !== 'Escape') return;
+		if (aboutOpen) aboutOpen = false;
+		else if (searchActive) closeMobileSearch();
+		else closeMenus();
+	}}
+/>
+
 <div
 	class="sidebar-overlay"
 	class:active={sidebarOpen}
@@ -83,7 +265,7 @@
 	</a>
 
 	<nav class="nav-menu" aria-label={t('nav.primary', 'Primary')}>
-		{#each visibleLinks as link (link.href)}
+		{#each LINKS as link (link.href)}
 			<a
 				class="nav-item"
 				class:active={active(link.href)}
@@ -106,7 +288,7 @@
 			</div>
 			<div class="storage-info">
 				{#if session.user.storage_quota_bytes > 0}
-					{formatBytes(session.user.storage_used_bytes)} / {formatBytes(
+					{Math.round(storagePct)}% · {formatBytes(session.user.storage_used_bytes)} / {formatBytes(
 						session.user.storage_quota_bytes
 					)}
 				{:else}
@@ -118,7 +300,7 @@
 </div>
 
 <div class="main-content">
-	<div class="top-bar">
+	<div class="top-bar" class:top-bar--search-active={searchActive}>
 		<button
 			class="sidebar-toggle"
 			aria-label="Toggle navigation menu"
@@ -128,39 +310,319 @@
 			<Icon name="bars" />
 		</button>
 
-		<div class="user-controls">
-			<div class="seg" role="group" aria-label={t('settings.theme', 'Theme')}>
-				{#each THEMES as th (th)}
+		<!-- Mobile: icon-only button that expands the full-width search overlay. -->
+		<button
+			class="search-toggle-btn"
+			id="search-toggle-btn"
+			aria-label={t('actions.search_btn', 'Search')}
+			onclick={openMobileSearch}
+		>
+			<Icon name="search" />
+		</button>
+
+		<!-- Mobile: back arrow shown while the search overlay is expanded. -->
+		<button
+			class="search-back-btn"
+			aria-label={t('common.close', 'Close')}
+			onclick={closeMobileSearch}
+		>
+			<Icon name="arrow-left" />
+		</button>
+
+		<div class="search-slot">
+			<form class="search-container" onsubmit={onSearch}>
+				<Icon name="search" class="search-icon" />
+				<input
+					type="text"
+					bind:this={searchInputEl}
+					bind:value={searchQuery}
+					oninput={onSearchInput}
+					onfocus={() => (suggestOpen = suggestions.length > 0)}
+					onblur={() => setTimeout(() => (suggestOpen = false), 150)}
+					placeholder={t('actions.search', 'Search files, folders...')}
+					autocomplete="off"
+				/>
+				{#if searchQuery}
 					<button
-						class="seg__btn"
-						aria-pressed={theme.current === th}
-						onclick={() => theme.set(th)}
+						class="search-clear"
+						type="button"
+						title={t('common.clear', 'Clear')}
+						aria-label={t('common.clear', 'Clear')}
+						onclick={clearSearch}
 					>
-						{#if th === 'light'}<Icon name="sun" />{:else if th === 'dark'}<Icon
-								name="moon"
-							/>{:else}A{/if}
+						<Icon name="times" />
 					</button>
-				{/each}
+				{/if}
+				<button
+					class="search-button"
+					type="submit"
+					title={t('actions.search_btn', 'Search')}
+					aria-label="Search"
+				>
+					<Icon name="search" />
+				</button>
+
+				{#if suggestOpen}
+					<ul class="suggest">
+						{#each suggestions as s (s.kind + s.item.id)}
+							<li>
+								<button class="suggest__item" type="button" onmousedown={() => pickSuggestion(s)}>
+									<span class="suggest__icon">
+										{#if s.kind === 'folder'}
+											<Icon name="folder" />
+										{:else}
+											<Icon name={iconNameFromClass(s.item.icon_class)} />
+										{/if}
+									</span>
+									<span class="suggest__name">{s.item.name}</span>
+								</button>
+							</li>
+						{/each}
+						<li>
+							<button class="suggest__all" type="button" onmousedown={goToResults}>
+								{t('search.see_all', 'See all results')}
+							</button>
+						</li>
+					</ul>
+				{:else if suggestBusy}
+					<ul class="suggest"><li class="suggest__busy">{t('common.loading', 'Loading…')}</li></ul>
+				{/if}
+			</form>
+		</div>
+
+		<div class="user-controls">
+			<!-- Notifications -->
+			<div class="notif-wrapper" class:open={notifOpen}>
+				<button
+					class="notif-bell-btn"
+					class:active={notifOpen}
+					class:ring={bellRinging}
+					aria-label={t('notifications.title', 'Notifications')}
+					aria-haspopup="true"
+					onclick={(e) => {
+						e.stopPropagation();
+						notifOpen = !notifOpen;
+						menuOpen = false;
+						if (notifOpen) ui.markNotificationsRead();
+					}}
+				>
+					<Icon name="bell" />
+					{#if ui.unread > 0}<span class="notif-badge">{ui.unreadBadge}</span>{/if}
+				</button>
+				<div class="notif-panel">
+					<div class="notif-panel-header">
+						<span class="notif-panel-title">{t('notifications.title', 'Notifications')}</span>
+						{#if ui.notifications.length > 0}
+							<button
+								class="notif-clear-btn"
+								title={t('notifications.clear', 'Clear all')}
+								aria-label={t('notifications.clear', 'Clear all')}
+								onclick={(e) => {
+									e.stopPropagation();
+									ui.clearNotifications();
+								}}
+							>
+								<Icon name="trash-alt" />
+							</button>
+						{/if}
+					</div>
+					<div class="notif-panel-body">
+						{#if ui.notifications.length === 0}
+							<div class="notif-empty">
+								<Icon name="bell-slash" />
+								<span>{t('notifications.empty', 'No notifications')}</span>
+							</div>
+						{:else}
+							{#each ui.notifications as n (n.id)}
+								<div class="notif-item notif-item--{n.kind}">
+									<span class="notif-item-icon"><Icon name={n.icon ?? notifIcon(n.kind)} /></span>
+									<div class="notif-item-body">
+										<div class="notif-item-text">{n.message}</div>
+										{#if n.currentFile}
+											<div class="notif-item-current" title={n.currentFile}>{n.currentFile}</div>
+										{/if}
+										{#if n.progress !== undefined}
+											<div
+												class="notif-progress"
+												role="progressbar"
+												aria-valuenow={n.progress}
+												aria-valuemin="0"
+												aria-valuemax="100"
+											>
+												<div class="notif-progress__fill" style:width="{n.progress}%"></div>
+											</div>
+											<div class="notif-progress-detail">
+												<span>{n.progress}%</span>
+												{#if n.total !== undefined}
+													<span>
+														{t(
+															'upload.files_counter',
+															{ done: n.completed ?? 0, total: n.total },
+															`${n.completed ?? 0} / ${n.total} files`
+														)}
+													</span>
+												{/if}
+											</div>
+										{:else}
+											<div class="notif-item-time">{formatTime(n.at)}</div>
+										{/if}
+									</div>
+								</div>
+							{/each}
+						{/if}
+					</div>
+				</div>
 			</div>
 
-			<select
-				class="locale-select"
-				aria-label={t('settings.language', 'Language')}
-				value={i18n.locale}
-				onchange={(e) => setLocale(e.currentTarget.value as Locale)}
-			>
-				{#each SUPPORTED_LOCALES as loc (loc)}
-					<option value={loc}>{loc}</option>
-				{/each}
-			</select>
+			<!-- User menu -->
+			<div class="user-menu-wrapper" class:open={menuOpen}>
+				<button
+					class="user-avatar-btn"
+					aria-label={t('user_menu.title', 'User menu')}
+					aria-haspopup="true"
+					onclick={(e) => {
+						e.stopPropagation();
+						menuOpen = !menuOpen;
+						notifOpen = false;
+					}}
+				>
+					{@render avatar(false)}
+				</button>
 
-			{#if session.user}
-				<span class="user-name" title={session.user.email}>
-					<Icon name="user" />
-					{session.user.username || session.user.email}
-				</span>
-				<button class="logout" onclick={onLogout}>{t('nav.logout', 'Log out')}</button>
-			{/if}
+				<div class="user-menu">
+					{#if session.user}
+						<div class="user-menu-header">
+							{@render avatar(true)}
+							<div class="user-menu-id">
+								<div class="user-menu-name">{session.user.username || session.user.email}</div>
+								<div class="user-menu-email">{session.user.email}</div>
+							</div>
+						</div>
+
+						{#if isAdmin}
+							<div class="user-menu-role-badge">
+								<span class="role-badge role-badge-admin">
+									<Icon name="shield-alt" />
+									{t('user_menu.admin', 'Admin')}
+								</span>
+							</div>
+						{/if}
+
+						<div class="user-menu-storage">
+							<div class="user-menu-storage-label">
+								<Icon name="database" /> <span>{t('storage.title', 'Storage')}</span>
+							</div>
+							<div class="user-menu-storage-bar">
+								<div class="user-menu-storage-fill" style:width="{storagePct}%"></div>
+							</div>
+							<div class="user-menu-storage-text">
+								{Math.round(storagePct)}% {t('storage.used', 'used')}
+							</div>
+						</div>
+					{/if}
+
+					<div class="user-menu-divider"></div>
+
+					{#if isAdmin}
+						<a class="user-menu-item" href="/admin" onclick={() => (menuOpen = false)}>
+							<Icon name="cogs" /> <span>{t('user_menu.admin_panel', 'Admin panel')}</span>
+						</a>
+						<a class="user-menu-item" href="/groups" onclick={() => (menuOpen = false)}>
+							<Icon name="user-group" />
+							<span>{t('user_menu.manage_groups', 'Manage groups')}</span>
+						</a>
+					{/if}
+					<a class="user-menu-item" href="/profile" onclick={() => (menuOpen = false)}>
+						<Icon name="user-circle" /> <span>{t('user_menu.profile', 'My profile')}</span>
+					</a>
+
+					<div class="user-menu-divider"></div>
+
+					<div class="user-menu-item user-menu-item--lang">
+						<Icon name="globe" />
+						<span>{t('settings.language', 'Language')}</span>
+						<div class="lang-selector" class:lang-selector--open={langOpen}>
+							<button
+								type="button"
+								class="lang-selector__toggle"
+								aria-haspopup="listbox"
+								aria-expanded={langOpen}
+								onclick={(e) => {
+									e.stopPropagation();
+									langOpen = !langOpen;
+								}}
+							>
+								<span class="lang-selector__code">{(currentLang.code as string).toUpperCase()}</span
+								>
+								<Icon name="chevron-down" class="lang-selector__arrow" />
+							</button>
+							{#if langOpen}
+								<ul class="lang-selector__dropdown" role="listbox">
+									{#each LANGUAGES as lang (lang.code)}
+										<li>
+											<button
+												type="button"
+												class="lang-option"
+												class:lang-option--active={lang.code === i18n.locale}
+												role="option"
+												aria-selected={lang.code === i18n.locale}
+												onclick={(e) => {
+													e.stopPropagation();
+													chooseLocale(lang.code);
+												}}
+											>
+												<span class="lang-option__flag">{lang.flag}</span>
+												<span class="lang-option__name">{lang.name}</span>
+												{#if lang.code === i18n.locale}
+													<Icon name="check" class="lang-option__check" />
+												{/if}
+											</button>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</div>
+					</div>
+
+					<div class="user-menu-item user-menu-item--theme">
+						<Icon name="adjust" />
+						<span>{t('user_menu.appearance', 'Appearance')}</span>
+						<div
+							class="theme-segmented"
+							role="radiogroup"
+							aria-label={t('user_menu.appearance', 'Appearance')}
+						>
+							{#each THEMES as th (th.mode)}
+								<button
+									type="button"
+									class="theme-segmented__opt"
+									class:theme-segmented__opt--active={theme.current === th.mode}
+									role="radio"
+									aria-checked={theme.current === th.mode}
+									title={th.label}
+									aria-label={th.label}
+									onclick={(e) => {
+										e.stopPropagation();
+										theme.set(th.mode);
+									}}
+								>
+									<Icon name={th.icon} />
+								</button>
+							{/each}
+						</div>
+					</div>
+
+					<button class="user-menu-item" onclick={openAbout}>
+						<Icon name="info-circle" /> <span>{t('user_menu.about', 'About OxiCloud')}</span>
+					</button>
+
+					<div class="user-menu-divider"></div>
+
+					<button class="user-menu-item user-menu-logout" onclick={onLogout}>
+						<Icon name="sign-out-alt" /> <span>{t('actions.logout', 'Log out')}</span>
+					</button>
+				</div>
+			</div>
 		</div>
 	</div>
 
@@ -169,64 +631,529 @@
 	</div>
 </div>
 
+{#snippet avatar(large: boolean)}
+	{#if avatarPhoto}
+		<img
+			class="avatar avatar--photo"
+			class:avatar--lg={large}
+			src={avatarPhoto}
+			alt={t('user_menu.title', 'User menu')}
+		/>
+	{:else}
+		<span class="avatar avatar--c{avatarColor}" class:avatar--lg={large}>{initials}</span>
+	{/if}
+{/snippet}
+
+{#if aboutOpen}
+	<!-- About OxiCloud modal -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="about-overlay" onclick={(e) => e.target === e.currentTarget && (aboutOpen = false)}>
+		<div class="about-modal" role="dialog" aria-modal="true" aria-labelledby="about-modal-title">
+			<div class="about-modal__logo">
+				<svg viewBox="120 120 280 280" aria-hidden="true">
+					<path
+						d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"
+					/>
+				</svg>
+			</div>
+			<h2 id="about-modal-title" class="about-modal__title">OxiCloud</h2>
+			<div class="about-modal__version">{appVersion || 'v…'}</div>
+			<p class="about-modal__desc">
+				{t(
+					'user_menu.about_description',
+					'Cloud storage platform built with Rust & Clean Architecture. Fast, secure, and private.'
+				)}
+			</p>
+			<div class="about-modal__tech">
+				<span class="about-modal__badge">Rust</span>
+				<span class="about-modal__badge">Axum</span>
+				<span class="about-modal__badge">PostgreSQL</span>
+				<span class="about-modal__badge">Clean Architecture</span>
+			</div>
+			<div class="about-modal__links">
+				<a
+					class="about-modal__link"
+					href="https://github.com/AtalayaLabs/OxiCloud/"
+					target="_blank"
+					rel="noopener"
+				>
+					<Icon name="github" /> GitHub
+				</a>
+				<a
+					class="about-modal__link"
+					href="https://github.com/AtalayaLabs/OxiCloud/blob/main/LICENSE"
+					target="_blank"
+					rel="noopener"
+				>
+					<Icon name="file-alt" />
+					{t('user_menu.mit_license', 'MIT License')}
+				</a>
+			</div>
+			<button class="about-modal__close" onclick={() => (aboutOpen = false)}>
+				{t('actions.close', 'Close')}
+			</button>
+		</div>
+	</div>
+{/if}
+
+<CommandPalette />
+
 <style>
-	/* The app shell relies on the global layout CSS (sidebar/topbar/content);
-	   these scoped rules cover only the controls unique to the rewrite. */
+	/* Body becomes the sidebar+main flex row only while the shell is mounted. */
 	:global(body) {
 		display: flex;
 	}
 
-	.user-controls {
-		margin-left: auto;
-	}
-
-	.seg {
-		display: flex;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md);
-		overflow: hidden;
-	}
-
-	.seg__btn {
-		padding: 0.3rem 0.5rem;
+	/* Clear (×) button sits left of the submit button inside the search field. */
+	.search-clear {
+		position: absolute;
+		right: 44px;
+		display: grid;
+		place-items: center;
+		width: 28px;
+		height: 28px;
 		border: none;
-		background: var(--color-bg-surface);
+		border-radius: 50%;
+		background: none;
 		color: var(--color-text-muted);
 		cursor: pointer;
-		min-width: 2rem;
 	}
 
-	.seg__btn[aria-pressed='true'] {
-		background: var(--color-accent);
-		color: var(--color-on-accent);
-	}
-
-	.locale-select {
-		padding: 0.3rem 0.4rem;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md);
-		background: var(--color-bg-input);
+	.search-clear:hover {
+		background: var(--color-bg-hover);
 		color: var(--color-text);
 	}
 
-	.user-name {
-		display: inline-flex;
+	.suggest {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		right: 0;
+		z-index: 50;
+		list-style: none;
+		margin: 0;
+		padding: 0.25rem;
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg, var(--radius-md));
+		box-shadow: var(--shadow-lg, 0 10px 30px var(--color-overlay-shadow));
+		max-height: 24rem;
+		overflow: auto;
+	}
+
+	.suggest__item,
+	.suggest__all {
+		display: flex;
 		align-items: center;
-		gap: 0.375rem;
-		color: var(--color-text-secondary);
-		font-size: var(--text-sm);
-		max-width: 12rem;
+		gap: 0.6rem;
+		width: 100%;
+		padding: 0.5rem 0.6rem;
+		border: none;
+		background: none;
+		color: var(--color-text);
+		cursor: pointer;
+		text-align: left;
+		border-radius: var(--radius-sm);
+	}
+
+	.suggest__item:hover,
+	.suggest__all:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.suggest__all {
+		justify-content: center;
+		color: var(--color-primary);
+		border-top: 1px solid var(--color-border);
+		margin-top: 0.25rem;
+	}
+
+	.suggest__icon {
+		color: var(--color-text-muted);
+	}
+
+	.suggest__name {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
-	.logout {
-		padding: 0.4rem 0.75rem;
+	.suggest__busy {
+		padding: 0.6rem;
+		color: var(--color-text-muted);
+		text-align: center;
+	}
+
+	.notif-progress {
+		height: 6px;
+		margin-top: 0.35rem;
+		border-radius: var(--radius-pill, 999px);
+		background: var(--color-bg-muted);
+		overflow: hidden;
+	}
+
+	.notif-progress__fill {
+		height: 100%;
+		background: var(--color-accent);
+		transition: width 0.2s ease;
+	}
+
+	.notif-progress-detail {
+		display: flex;
+		justify-content: space-between;
+		gap: 0.5rem;
+		margin-top: 0.25rem;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted);
+	}
+
+	.notif-item-current {
+		margin-top: 0.15rem;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* Bell "ring" animation, replayed when bellRinging toggles on. */
+	.notif-bell-btn.ring :global(svg),
+	.notif-bell-btn.ring :global(i) {
+		transform-origin: top center;
+		animation: bell-ring 0.9s ease;
+	}
+
+	@keyframes bell-ring {
+		0%,
+		100% {
+			transform: rotate(0);
+		}
+
+		10%,
+		30%,
+		50% {
+			transform: rotate(12deg);
+		}
+
+		20%,
+		40%,
+		60% {
+			transform: rotate(-12deg);
+		}
+
+		70% {
+			transform: rotate(6deg);
+		}
+
+		80% {
+			transform: rotate(-6deg);
+		}
+	}
+
+	/* Avatar: deterministic coloured-initials vignette, or the uploaded photo. */
+	.avatar {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		border-radius: 50%;
+		background: var(--color-accent-gradient, var(--color-accent));
+		color: var(--color-on-accent);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-bold);
+		flex-shrink: 0;
+		overflow: hidden;
+	}
+
+	.avatar--photo {
+		object-fit: cover;
+	}
+
+	/* Colour buckets mirror userVignette's .uv-color-0..4 shared palette. */
+	.avatar--c0 {
+		background: var(--color-badge-indigo-bg);
+		color: var(--color-badge-indigo-text);
+	}
+
+	.avatar--c1 {
+		background: var(--color-badge-green-bg);
+		color: var(--color-badge-green-text);
+	}
+
+	.avatar--c2 {
+		background: var(--color-badge-orange-bg);
+		color: var(--color-badge-orange-text);
+	}
+
+	.avatar--c3 {
+		background: var(--color-badge-blue-bg);
+		color: var(--color-badge-blue-text);
+	}
+
+	.avatar--c4 {
+		background: var(--color-badge-amber-bg);
+		color: var(--color-badge-amber-text);
+	}
+
+	.avatar--lg {
+		width: 44px;
+		height: 44px;
+		font-size: var(--text-base);
+	}
+
+	.user-menu-header {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		padding: var(--space-4);
+	}
+
+	.user-menu-id {
+		min-width: 0;
+	}
+
+	.user-menu-name {
+		font-weight: var(--weight-semibold);
+		color: var(--color-text-heading);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.user-menu-email {
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.user-menu-item--lang,
+	.user-menu-item--theme {
+		cursor: default;
+	}
+
+	/* Custom language selector — flag + native name + active checkmark. */
+	.lang-selector {
+		position: relative;
+		margin-left: auto;
+	}
+
+	.lang-selector__toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		padding: var(--space-1) var(--space-2);
 		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		background: var(--color-bg-surface);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
 		color: var(--color-text);
 		cursor: pointer;
+		font-size: var(--text-sm);
+	}
+
+	.lang-selector__toggle:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.lang-selector__code {
+		font-weight: var(--weight-semibold);
+	}
+
+	:global(.lang-selector__arrow) {
+		font-size: var(--text-xs, 0.7rem);
+		transition: transform 0.15s ease;
+	}
+
+	.lang-selector--open :global(.lang-selector__arrow) {
+		transform: rotate(180deg);
+	}
+
+	.lang-selector__dropdown {
+		position: absolute;
+		bottom: calc(100% + 4px);
+		right: 0;
+		z-index: 60;
+		min-width: 12rem;
+		max-height: 18rem;
+		overflow: auto;
+		list-style: none;
+		margin: 0;
+		padding: 0.25rem;
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg, var(--radius-md));
+		box-shadow: var(--shadow-lg, 0 10px 30px var(--color-overlay-shadow));
+	}
+
+	:global([dir='rtl']) .lang-selector__dropdown {
+		right: auto;
+		left: 0;
+	}
+
+	.lang-option {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		width: 100%;
+		padding: 0.45rem 0.55rem;
+		border: none;
+		background: none;
+		color: var(--color-text);
+		cursor: pointer;
+		text-align: left;
+		border-radius: var(--radius-sm);
+		font-size: var(--text-sm);
+	}
+
+	.lang-option:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.lang-option--active {
+		color: var(--color-primary);
+		font-weight: var(--weight-semibold);
+	}
+
+	.lang-option__name {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	:global(.lang-option__check) {
+		color: var(--color-primary);
+		flex-shrink: 0;
+	}
+
+	/* About OxiCloud modal. */
+	.about-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 1200;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+		background: var(--color-overlay);
+		animation: about-fade 0.18s ease;
+	}
+
+	.about-modal {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-3);
+		width: min(92vw, 26rem);
+		padding: var(--space-6) var(--space-5);
+		background: var(--color-bg-surface);
+		color: var(--color-text);
+		border-radius: var(--radius-lg);
+		box-shadow: var(--shadow-xl);
+		text-align: center;
+		animation: about-pop 0.2s ease;
+	}
+
+	.about-modal__logo {
+		width: 64px;
+		height: 64px;
+		color: var(--color-accent);
+	}
+
+	.about-modal__logo svg {
+		width: 100%;
+		height: 100%;
+		fill: currentColor;
+	}
+
+	.about-modal__title {
+		margin: 0;
+		font-size: var(--text-xl, 1.5rem);
+		color: var(--color-text-heading);
+	}
+
+	.about-modal__version {
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+	}
+
+	.about-modal__desc {
+		margin: 0;
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+		line-height: 1.5;
+	}
+
+	.about-modal__tech {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: var(--space-2);
+	}
+
+	.about-modal__badge {
+		padding: var(--space-1) var(--space-2);
+		border-radius: var(--radius-pill, 999px);
+		background: var(--color-bg-muted);
+		color: var(--color-text-secondary, var(--color-text-muted));
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.about-modal__links {
+		display: flex;
+		gap: var(--space-4);
+	}
+
+	.about-modal__link {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		color: var(--color-primary);
+		text-decoration: none;
+		font-size: var(--text-sm);
+	}
+
+	.about-modal__link:hover {
+		text-decoration: underline;
+	}
+
+	.about-modal__close {
+		margin-top: var(--space-2);
+		padding: var(--space-2) var(--space-5);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+		cursor: pointer;
+		font-size: var(--text-sm);
+	}
+
+	.about-modal__close:hover {
+		background: var(--color-bg-hover);
+	}
+
+	@keyframes about-fade {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes about-pop {
+		from {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
 	}
 </style>
diff --git a/frontend/src/lib/components/CommandPalette.svelte b/frontend/src/lib/components/CommandPalette.svelte
new file mode 100644
index 00000000..43958019
--- /dev/null
+++ b/frontend/src/lib/components/CommandPalette.svelte
@@ -0,0 +1,384 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { logout } from '$lib/api/endpoints/auth';
+	import { searchFiles } from '$lib/api/endpoints/search';
+	import { fileInlineUrl } from '$lib/api/endpoints/files';
+	import Icon from '$lib/icons/Icon.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+	import { confirmDialog } from '$lib/stores/dialogs.svelte';
+	import { session } from '$lib/stores/session.svelte';
+	import { theme } from '$lib/stores/theme.svelte';
+
+	interface Command {
+		id: string;
+		label: string;
+		icon: string;
+		hint?: string;
+		run: () => void;
+	}
+
+	let open = $state(false);
+	// Drives the enter animation: flipped on after mount so the overlay/panel
+	// transition from their initial (faded/offset) state.
+	let entered = $state(false);
+	let query = $state('');
+	let index = $state(0);
+	let input = $state<HTMLInputElement | null>(null);
+	let listEl = $state<HTMLUListElement | null>(null);
+	let fileMatches = $state<Command[]>([]);
+	let searchTimer: ReturnType<typeof setTimeout> | null = null;
+	// Element focused before the palette opened, restored on close.
+	let prevFocus: HTMLElement | null = null;
+
+	function close() {
+		open = false;
+		entered = false;
+		query = '';
+		fileMatches = [];
+		index = 0;
+		prevFocus?.focus?.();
+		prevFocus = null;
+	}
+
+	function nav(path: string): Command['run'] {
+		return () => {
+			close();
+			void goto(path);
+		};
+	}
+
+	/**
+	 * Trigger the file picker in the files view. The input lives in the files
+	 * route, so we navigate there first and broadcast an event the page listens
+	 * for. (Follow-up: wire `oxicloud:upload-files` in the files route page.)
+	 */
+	function uploadFiles() {
+		close();
+		void goto('/files').then(() => {
+			window.dispatchEvent(new CustomEvent('oxicloud:upload-files'));
+		});
+	}
+
+	async function showAbout() {
+		close();
+		await confirmDialog({
+			title: t('user_menu.about', 'About OxiCloud'),
+			message: t(
+				'about.description',
+				'OxiCloud — a fast, self-hosted file storage and sync server.'
+			),
+			confirmText: t('common.ok', 'OK'),
+			cancelText: t('common.close', 'Close')
+		});
+	}
+
+	const baseCommands = $derived.by<Command[]>(() => {
+		const cmds: Command[] = [
+			{ id: 'files', label: t('nav.files', 'Files'), icon: 'folder', run: nav('/files') },
+			{ id: 'shared', label: t('nav.shared', 'Shared'), icon: 'oxiexport', run: nav('/shared') },
+			{
+				id: 'swm',
+				label: t('nav.shared_with_me', 'Shared with me'),
+				icon: 'oxiimport',
+				run: nav('/shared-with-me')
+			},
+			{ id: 'recent', label: t('nav.recent', 'Recent'), icon: 'clock', run: nav('/recent') },
+			{ id: 'fav', label: t('nav.favorites', 'Favorites'), icon: 'star', run: nav('/favorites') },
+			{ id: 'photos', label: t('nav.photos', 'Photos'), icon: 'images', run: nav('/photos') },
+			{ id: 'music', label: t('nav.music', 'Music'), icon: 'music', run: nav('/music') },
+			{ id: 'groups', label: t('nav.groups', 'Groups'), icon: 'users', run: nav('/groups') },
+			{ id: 'trash', label: t('nav.trash', 'Trash'), icon: 'trash', run: nav('/trash') },
+			{
+				id: 'upload',
+				label: t('actions.upload_files', 'Upload files'),
+				icon: 'cloud-upload-alt',
+				run: uploadFiles
+			},
+			{
+				id: 'profile',
+				label: t('user_menu.profile', 'Profile'),
+				icon: 'user',
+				run: nav('/profile')
+			}
+		];
+		if (session.user?.role === 'admin') {
+			cmds.push({
+				id: 'admin',
+				label: t('user_menu.admin_panel', 'Admin'),
+				icon: 'shield-alt',
+				run: nav('/admin')
+			});
+		}
+		cmds.push(
+			{
+				id: 'theme',
+				label: t('cmdk.toggle_theme', 'Toggle theme'),
+				icon: 'moon',
+				run: () => {
+					theme.set(theme.current === 'dark' ? 'light' : 'dark');
+					close();
+				}
+			},
+			{
+				id: 'about',
+				label: t('user_menu.about', 'About'),
+				icon: 'info-circle',
+				run: showAbout
+			},
+			{
+				id: 'logout',
+				label: t('actions.logout', 'Log out'),
+				icon: 'sign-out-alt',
+				run: async () => {
+					close();
+					try {
+						await logout();
+					} catch {
+						/* clear locally regardless */
+					}
+					session.reset();
+					await goto('/login');
+				}
+			}
+		);
+		return cmds;
+	});
+
+	const filtered = $derived.by<Command[]>(() => {
+		const q = query.trim().toLowerCase();
+		const base = q ? baseCommands.filter((c) => c.label.toLowerCase().includes(q)) : baseCommands;
+		return [...base, ...fileMatches];
+	});
+
+	function runFileSearch() {
+		if (searchTimer) clearTimeout(searchTimer);
+		const q = query.trim();
+		if (q.length < 2) {
+			fileMatches = [];
+			return;
+		}
+		searchTimer = setTimeout(async () => {
+			try {
+				const r = await searchFiles(q, { recursive: true, limit: 5 });
+				const folders: Command[] = r.folders.slice(0, 3).map((f) => ({
+					id: `fld-${f.id}`,
+					label: f.name,
+					icon: 'folder',
+					hint: t('files.folder', 'Folder'),
+					run: nav(`/files/${f.id}`)
+				}));
+				const files: Command[] = r.files.slice(0, 5).map((f) => ({
+					id: `fil-${f.id}`,
+					label: f.name,
+					icon: 'file',
+					hint: t('files.file', 'File'),
+					run: () => {
+						close();
+						window.open(fileInlineUrl(f.id), '_blank', 'noopener');
+					}
+				}));
+				fileMatches = [...folders, ...files];
+			} catch {
+				fileMatches = [];
+			}
+		}, 250);
+	}
+
+	function scrollActiveIntoView() {
+		queueMicrotask(() => {
+			listEl?.querySelector('.cmdk__item.active')?.scrollIntoView({ block: 'nearest' });
+		});
+	}
+
+	function onGlobalKey(e: KeyboardEvent) {
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+			e.preventDefault();
+			if (open) {
+				close();
+			} else {
+				prevFocus = document.activeElement as HTMLElement | null;
+				open = true;
+				requestAnimationFrame(() => (entered = true));
+				queueMicrotask(() => input?.focus());
+			}
+		} else if (open && e.key === 'Escape') {
+			close();
+		}
+	}
+
+	function onListKey(e: KeyboardEvent) {
+		const items = filtered;
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			index = Math.min(index + 1, items.length - 1);
+			scrollActiveIntoView();
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			index = Math.max(index - 1, 0);
+			scrollActiveIntoView();
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			items[index]?.run();
+		}
+	}
+
+	$effect(() => {
+		void query;
+		index = 0;
+		runFileSearch();
+	});
+</script>
+
+<svelte:window onkeydown={onGlobalKey} />
+
+{#if open}
+	<div
+		class="cmdk"
+		class:active={entered}
+		role="presentation"
+		onclick={(e) => e.target === e.currentTarget && close()}
+	>
+		<div
+			class="cmdk__panel"
+			role="dialog"
+			aria-modal="true"
+			aria-label={t('cmdk.title', 'Command palette')}
+		>
+			<div class="cmdk__search">
+				<Icon name="search" />
+				<!-- svelte-ignore a11y_autofocus -->
+				<input
+					bind:this={input}
+					bind:value={query}
+					onkeydown={onListKey}
+					placeholder={t('cmdk.placeholder', 'Type a command or search…')}
+					autocomplete="off"
+					autofocus
+				/>
+			</div>
+			{#if filtered.length === 0}
+				<p class="cmdk__empty">{t('cmdk.no_results', 'No matching commands')}</p>
+			{:else}
+				<ul class="cmdk__list" role="listbox" bind:this={listEl}>
+					{#each filtered as cmd, i (cmd.id)}
+						<li>
+							<button
+								class="cmdk__item"
+								class:active={i === index}
+								role="option"
+								aria-selected={i === index}
+								onmouseenter={() => (index = i)}
+								onclick={cmd.run}
+							>
+								<Icon name={cmd.icon} />
+								<span class="cmdk__label">{cmd.label}</span>
+								{#if cmd.hint}<span class="cmdk__hint">{cmd.hint}</span>{/if}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.cmdk {
+		position: fixed;
+		inset: 0;
+		z-index: 1200;
+		background: var(--color-overlay, var(--color-overlay-light));
+		backdrop-filter: blur(2px);
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		padding-top: 12vh;
+		opacity: 0;
+		transition: opacity var(--motion-base) var(--ease-standard);
+	}
+
+	.cmdk.active {
+		opacity: 1;
+	}
+
+	.cmdk__panel {
+		width: min(560px, 92vw);
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-3xl);
+		box-shadow: var(--shadow-2xl);
+		overflow: hidden;
+		transform: translateY(-8px) scale(0.98);
+		transition: transform var(--motion-base) var(--ease-standard);
+	}
+
+	.cmdk.active .cmdk__panel {
+		transform: none;
+	}
+
+	.cmdk__search {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--color-border);
+		color: var(--color-text-muted);
+	}
+
+	.cmdk__search input {
+		flex: 1;
+		border: none;
+		background: none;
+		color: var(--color-text);
+		font-size: 1rem;
+		outline: none;
+	}
+
+	.cmdk__list {
+		list-style: none;
+		margin: 0;
+		padding: 0.25rem;
+		max-height: 50vh;
+		overflow: auto;
+	}
+
+	.cmdk__item {
+		display: flex;
+		align-items: center;
+		gap: 0.7rem;
+		width: 100%;
+		padding: 0.55rem 0.7rem;
+		border: none;
+		background: none;
+		color: var(--color-text);
+		cursor: pointer;
+		text-align: left;
+		border-radius: var(--radius-sm);
+	}
+
+	.cmdk__item.active {
+		background: var(--color-accent-bg-sm);
+	}
+
+	.cmdk__item.active :global(.oxi-icon) {
+		color: var(--color-accent);
+	}
+
+	.cmdk__label {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.cmdk__hint {
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted);
+	}
+
+	.cmdk__empty {
+		padding: 1.5rem;
+		text-align: center;
+		color: var(--color-text-muted);
+	}
+</style>
diff --git a/frontend/src/lib/components/DialogHost.svelte b/frontend/src/lib/components/DialogHost.svelte
new file mode 100644
index 00000000..c92a9a9a
--- /dev/null
+++ b/frontend/src/lib/components/DialogHost.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+	import Modal from '$lib/components/Modal.svelte';
+	import { dialogs } from '$lib/stores/dialogs.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+
+	// Local input value for prompt dialogs; reset whenever a new prompt opens.
+	let value = $state('');
+	let lastId: object | null = null;
+	let inputEl = $state<HTMLInputElement | null>(null);
+
+	$effect(() => {
+		const c = dialogs.current;
+		if (c && c !== lastId) {
+			lastId = c;
+			value = c.kind === 'prompt' ? (c.opts.defaultValue ?? '') : '';
+			if (c.kind === 'prompt' && c.opts.selectOnOpen) {
+				const select = c.opts.selectOnOpen;
+				requestAnimationFrame(() => {
+					const el = inputEl;
+					if (!el) return;
+					el.focus();
+					if (select === 'name') {
+						// Select the filename stem only — leave the extension
+						// untouched so a rename replaces just the name.
+						const dot = value.lastIndexOf('.');
+						const end = dot > 0 ? dot : value.length;
+						el.setSelectionRange(0, end);
+					} else {
+						el.select();
+					}
+				});
+			}
+		}
+	});
+
+	const open = $derived(dialogs.current !== null);
+
+	function submit(e?: SubmitEvent) {
+		e?.preventDefault();
+		const c = dialogs.current;
+		if (!c || dialogs.busy) return;
+		// `resolve` runs any async action and keeps the dialog open on failure.
+		if (c.kind === 'prompt') void dialogs.resolve(value);
+		else void dialogs.resolve(true);
+	}
+</script>
+
+{#if dialogs.current}
+	{@const c = dialogs.current}
+	<Modal {open} title={c.opts.title} onclose={() => dialogs.cancel()}>
+		{#if c.kind === 'prompt'}
+			<form id="dialog-form" onsubmit={submit}>
+				{#if c.opts.message}<p class="dlg-msg">{c.opts.message}</p>{/if}
+				<input
+					class="dlg-input"
+					type="text"
+					bind:this={inputEl}
+					bind:value
+					placeholder={c.opts.placeholder ?? ''}
+					autocomplete="off"
+					disabled={dialogs.busy}
+				/>
+			</form>
+		{:else if c.opts.message}
+			<p class="dlg-msg">{c.opts.message}</p>
+		{/if}
+
+		{#if dialogs.error}
+			<p class="dlg-error" role="alert">{dialogs.error}</p>
+		{/if}
+
+		{#snippet footer()}
+			<button class="btn btn-secondary" disabled={dialogs.busy} onclick={() => dialogs.cancel()}>
+				{c.opts.cancelText ?? t('common.cancel', 'Cancel')}
+			</button>
+			{#if c.kind === 'prompt'}
+				<button class="btn btn-primary" type="submit" form="dialog-form" disabled={dialogs.busy}>
+					{dialogs.busy
+						? t('common.loading', 'Loading…')
+						: (c.opts.confirmText ?? t('common.ok', 'OK'))}
+				</button>
+			{:else}
+				<button
+					class="btn {c.opts.danger ? 'btn-danger' : 'btn-primary'}"
+					disabled={dialogs.busy}
+					onclick={() => dialogs.resolve(true)}
+				>
+					{dialogs.busy
+						? t('common.loading', 'Loading…')
+						: (c.opts.confirmText ?? t('common.ok', 'OK'))}
+				</button>
+			{/if}
+		{/snippet}
+	</Modal>
+{/if}
+
+<style>
+	.dlg-msg {
+		margin: 0 0 var(--space-3);
+		color: var(--color-text);
+	}
+
+	.dlg-input {
+		width: 100%;
+		padding: var(--space-2-5) var(--space-3);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+		font-size: var(--text-base);
+	}
+
+	.dlg-error {
+		margin: var(--space-3) 0 0;
+		color: var(--color-danger-text);
+		font-size: var(--text-sm);
+	}
+</style>
diff --git a/frontend/src/lib/components/FileRow.svelte b/frontend/src/lib/components/FileRow.svelte
deleted file mode 100644
index 1a153aac..00000000
--- a/frontend/src/lib/components/FileRow.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Icon from '$lib/icons/Icon.svelte';
-	import { iconNameFromClass } from '$lib/utils/display';
-
-	interface Props {
-		name: string;
-		iconClass?: string;
-		subtitle?: string;
-		date?: string;
-		actions?: Snippet;
-	}
-
-	let { name, iconClass, subtitle, date, actions }: Props = $props();
-</script>
-
-<li class="row">
-	<span class="row__icon"><Icon name={iconNameFromClass(iconClass)} /></span>
-	<span class="row__main">
-		<span class="row__name" title={name}>{name}</span>
-		{#if subtitle}<span class="row__sub" title={subtitle}>{subtitle}</span>{/if}
-	</span>
-	{#if date}<span class="row__date">{date}</span>{/if}
-	{#if actions}<span class="row__actions">{@render actions()}</span>{/if}
-</li>
-
-<style>
-	.row {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0.5rem 0.75rem;
-		border-radius: var(--radius-md);
-	}
-
-	.row:hover {
-		background: var(--color-bg-hover);
-	}
-
-	.row__icon {
-		font-size: 1.25rem;
-		color: var(--color-text-muted);
-		flex: none;
-	}
-
-	.row__main {
-		display: flex;
-		flex-direction: column;
-		min-width: 0;
-		flex: 1;
-	}
-
-	.row__name {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		color: var(--color-text);
-	}
-
-	.row__sub {
-		font-size: 0.8125rem;
-		color: var(--color-text-muted);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.row__date {
-		font-size: 0.8125rem;
-		color: var(--color-text-muted);
-		flex: none;
-	}
-
-	.row__actions {
-		display: flex;
-		gap: 0.25rem;
-		flex: none;
-	}
-</style>
diff --git a/frontend/src/lib/components/FileViewer.svelte b/frontend/src/lib/components/FileViewer.svelte
new file mode 100644
index 00000000..1821e41b
--- /dev/null
+++ b/frontend/src/lib/components/FileViewer.svelte
@@ -0,0 +1,401 @@
+<script lang="ts">
+	import { apiFetch } from '$lib/api/client';
+	import { fileDownloadUrl, fileInlineUrl } from '$lib/api/endpoints/files';
+	import { canEditWithWopi } from '$lib/api/endpoints/wopi';
+	import type { FileItem } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import WopiEditor from '$lib/components/WopiEditor.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+
+	interface Props {
+		open: boolean;
+		file: FileItem | null;
+		/** Emitted when the viewer (or its embedded editor) closes, so the
+		 *  consumer can refresh the file list to pick up saves. */
+		onrefresh?: () => void;
+	}
+
+	let { open = $bindable(false), file, onrefresh }: Props = $props();
+
+	type Kind = 'image' | 'video' | 'audio' | 'pdf' | 'text' | 'other';
+
+	const IMAGE_EXTS = [
+		'jpg',
+		'jpeg',
+		'png',
+		'gif',
+		'svg',
+		'webp',
+		'bmp',
+		'ico',
+		'heic',
+		'heif',
+		'avif',
+		'tiff'
+	];
+
+	let textContent = $state('');
+	let textLoading = $state(false);
+	let wopiOpen = $state(false);
+	let canEdit = $state(false);
+	/** Image zoom factor (1 = fit). */
+	let zoom = $state(1);
+	/** PDF embed fallback engaged when the <object> stays blank ~2s. */
+	let pdfFallback = $state(false);
+	let pdfObjectEl = $state<HTMLObjectElement | null>(null);
+
+	function isImage(f: FileItem): boolean {
+		const m = (f.mime_type ?? '').toLowerCase();
+		const ext = (f.name || '').split('.').pop()?.toLowerCase() ?? '';
+		return m.startsWith('image/') || IMAGE_EXTS.includes(ext);
+	}
+
+	function kindOf(f: FileItem): Kind {
+		const m = (f.mime_type ?? '').toLowerCase();
+		if (isImage(f)) return 'image';
+		if (m.startsWith('video/')) return 'video';
+		if (m.startsWith('audio/')) return 'audio';
+		if (m === 'application/pdf') return 'pdf';
+		if (
+			m.startsWith('text/') ||
+			m === 'application/json' ||
+			m === 'application/xml' ||
+			m === 'application/javascript'
+		)
+			return 'text';
+		return 'other';
+	}
+
+	const kind = $derived(file ? kindOf(file) : 'other');
+
+	function close() {
+		open = false;
+		textContent = '';
+		zoom = 1;
+		pdfFallback = false;
+		onrefresh?.();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (open && !wopiOpen && e.key === 'Escape') close();
+	}
+
+	function zoomBy(factor: number) {
+		zoom = Math.max(0.1, Math.min(5, zoom * factor));
+	}
+
+	function resetZoom() {
+		zoom = 1;
+	}
+
+	// Load text content + decide editability/auto-open whenever the file changes.
+	$effect(() => {
+		if (!open || !file) return;
+		const f = file;
+		canEdit = false;
+		zoom = 1;
+		pdfFallback = false;
+		const k = kindOf(f);
+
+		// Office docs (WOPI-editable, non-image) open straight in the editor
+		// rather than showing "No preview available" with an extra Edit click.
+		// Images never route through WOPI even if an editor claims the ext.
+		if (k === 'other' && !isImage(f)) {
+			void canEditWithWopi(f.name).then((v) => {
+				canEdit = v;
+				if (v && file === f && open) wopiOpen = true;
+			});
+		} else {
+			void canEditWithWopi(f.name).then((v) => (canEdit = v));
+		}
+
+		if (k === 'text') {
+			textLoading = true;
+			textContent = '';
+			apiFetch(fileInlineUrl(f.id), { credentials: 'same-origin' })
+				.then((r) => (r.ok ? r.text() : Promise.reject(new Error(`HTTP ${r.status}`))))
+				.then((txt) => (textContent = txt.slice(0, 500_000)))
+				.catch(() => (textContent = t('files.preview_failed', 'Could not load preview.')))
+				.finally(() => (textLoading = false));
+		}
+
+		// PDF blank-render guard: if the <object> shows nothing after ~2s,
+		// fall back to an <embed> (some browsers refuse <object> for PDFs).
+		if (k === 'pdf') {
+			const timer = setTimeout(() => {
+				const el = pdfObjectEl;
+				let blank = false;
+				try {
+					const doc = el?.contentDocument;
+					blank = !doc || doc.body?.innerHTML === '';
+				} catch {
+					blank = false; // cross-origin: assume it rendered
+				}
+				if (blank) pdfFallback = true;
+			}, 2000);
+			return () => clearTimeout(timer);
+		}
+	});
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+{#if open && file}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class="fv"
+		role="dialog"
+		aria-modal="true"
+		aria-label={file.name}
+		tabindex="-1"
+		onclick={(e) => e.target === e.currentTarget && close()}
+	>
+		<div class="fv__panel">
+			<header class="fv__bar">
+				<span class="fv__title">{file.name}</span>
+				<div class="fv__actions">
+					{#if kind === 'image'}
+						<div class="fv__zoom" role="group" aria-label={t('viewer.zoom', 'Zoom')}>
+							<button
+								class="fv__zoom-btn"
+								title={t('viewer.zoom_out', 'Zoom out')}
+								aria-label={t('viewer.zoom_out', 'Zoom out')}
+								onclick={() => zoomBy(0.8)}
+							>
+								<Icon name="search-minus" />
+							</button>
+							<button
+								class="fv__zoom-btn"
+								title={t('viewer.zoom_reset', 'Reset zoom')}
+								aria-label={t('viewer.zoom_reset', 'Reset zoom')}
+								onclick={resetZoom}
+							>
+								<Icon name="expand" />
+							</button>
+							<button
+								class="fv__zoom-btn"
+								title={t('viewer.zoom_in', 'Zoom in')}
+								aria-label={t('viewer.zoom_in', 'Zoom in')}
+								onclick={() => zoomBy(1.2)}
+							>
+								<Icon name="search-plus" />
+							</button>
+						</div>
+					{/if}
+					{#if canEdit}
+						<button class="btn btn-primary btn-sm" onclick={() => (wopiOpen = true)}>
+							<Icon name="pen" />
+							{t('files.edit', 'Edit')}
+						</button>
+					{/if}
+					<a class="btn btn-secondary btn-sm" href={fileDownloadUrl(file.id)} download>
+						<Icon name="download" />
+						{t('common.download', 'Download')}
+					</a>
+					<a
+						class="btn btn-secondary btn-sm"
+						href={fileInlineUrl(file.id)}
+						target="_blank"
+						rel="noreferrer"
+					>
+						<Icon name="external-link-alt" />
+					</a>
+					<button class="fv__close" aria-label={t('common.close', 'Close')} onclick={close}>
+						<Icon name="times" />
+					</button>
+				</div>
+			</header>
+
+			<div class="fv__body">
+				{#if kind === 'image'}
+					<img
+						class="fv__media fv__image"
+						src={fileInlineUrl(file.id)}
+						alt={file.name}
+						style:transform="scale({zoom})"
+					/>
+				{:else if kind === 'video'}
+					<!-- svelte-ignore a11y_media_has_caption -->
+					<video class="fv__media" src={fileInlineUrl(file.id)} controls preload="metadata"></video>
+				{:else if kind === 'audio'}
+					<audio class="fv__audio" src={fileInlineUrl(file.id)} controls></audio>
+				{:else if kind === 'pdf'}
+					{#if pdfFallback}
+						<embed class="fv__pdf" src={fileInlineUrl(file.id)} type="application/pdf" />
+					{:else}
+						<object
+							bind:this={pdfObjectEl}
+							class="fv__pdf"
+							data={fileInlineUrl(file.id)}
+							type="application/pdf"
+							title={file.name}
+						>
+							<p>{t('files.preview_failed', 'Could not load preview.')}</p>
+						</object>
+					{/if}
+				{:else if kind === 'text'}
+					{#if textLoading}
+						<p class="fv__status">{t('common.loading', 'Loading…')}</p>
+					{:else}
+						<pre class="fv__text">{textContent}</pre>
+					{/if}
+				{:else}
+					<div class="fv__status fv__status--center">
+						<Icon name="file" class="fv__big-icon" />
+						<p>{t('files.no_preview', 'No preview available for this file type.')}</p>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<WopiEditor
+		bind:open={wopiOpen}
+		fileId={file.id}
+		fileName={file.name}
+		action="edit"
+		onclose={() => {
+			onrefresh?.();
+			// If the editor was auto-opened for an Office doc, closing it should
+			// dismiss the whole viewer (there's nothing to preview behind it).
+			if (kind === 'other') close();
+		}}
+	/>
+{/if}
+
+<style>
+	.fv {
+		position: fixed;
+		inset: 0;
+		z-index: 1000;
+		background: var(--color-overlay, var(--color-overlay-heavy));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 2rem;
+	}
+
+	.fv__panel {
+		display: flex;
+		flex-direction: column;
+		width: min(1100px, 100%);
+		height: min(90vh, 100%);
+		background: var(--color-bg-surface);
+		border-radius: var(--radius-lg, var(--radius-md));
+		overflow: hidden;
+	}
+
+	.fv__bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0.6rem 0.9rem;
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	.fv__title {
+		font-weight: var(--weight-semibold, 600);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--color-text-heading);
+	}
+
+	.fv__actions {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		flex-shrink: 0;
+	}
+
+	.fv__close {
+		background: none;
+		border: none;
+		color: var(--color-text);
+		cursor: pointer;
+		font-size: 1.1rem;
+		padding: 0.25rem 0.5rem;
+	}
+
+	.fv__zoom {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.15rem;
+		margin-right: 0.3rem;
+	}
+
+	.fv__zoom-btn {
+		display: grid;
+		place-items: center;
+		width: 30px;
+		height: 30px;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-surface);
+		color: var(--color-text);
+		cursor: pointer;
+	}
+
+	.fv__zoom-btn:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.fv__image {
+		transition: transform 0.12s ease;
+	}
+
+	.fv__body {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: auto;
+		background: var(--color-bg-muted);
+	}
+
+	.fv__media {
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: contain;
+	}
+
+	.fv__audio {
+		width: min(600px, 90%);
+	}
+
+	.fv__pdf {
+		width: 100%;
+		height: 100%;
+	}
+
+	.fv__text {
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		padding: 1rem;
+		overflow: auto;
+		white-space: pre-wrap;
+		word-break: break-word;
+		font-family: var(--font-mono, monospace);
+		font-size: var(--text-sm);
+		color: var(--color-text);
+		background: var(--color-bg-surface);
+	}
+
+	.fv__status {
+		color: var(--color-text-muted);
+	}
+
+	.fv__status--center {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	:global(.fv__big-icon) {
+		font-size: 3rem;
+		color: var(--color-text-muted);
+	}
+</style>
diff --git a/frontend/src/lib/components/ListToolbar.svelte b/frontend/src/lib/components/ListToolbar.svelte
new file mode 100644
index 00000000..0a1d9254
--- /dev/null
+++ b/frontend/src/lib/components/ListToolbar.svelte
@@ -0,0 +1,125 @@
+<script lang="ts" module>
+	/** A group-by dimension shown in the toolbar's popup menu. */
+	export interface GroupOption {
+		key: string;
+		label: string;
+		/** Optional glyph for the menu option (defaults to the group glyph). */
+		icon?: string;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '$lib/icons/Icon.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+	import { files as filesStore } from '$lib/stores/files.svelte';
+
+	interface Props {
+		/** Group-by dimensions; omit/empty to hide the group-by control. */
+		groups?: GroupOption[];
+		/** Active group-by key (controlled by the parent). */
+		groupBy?: string;
+		/** Whether the sort direction is reversed (controlled by the parent). */
+		reversed?: boolean;
+		/** Fired when a group-by dimension is chosen. */
+		ongroup?: (key: string) => void;
+		/** Fired when the sort-direction toggle is clicked. */
+		ondirection?: () => void;
+		/** Show the grid/list view toggle (default true). */
+		showViewToggle?: boolean;
+		/** Left-hand actions (upload/new-folder/empty-trash/batch bar, …). */
+		start?: Snippet;
+	}
+
+	let {
+		groups,
+		groupBy = '',
+		reversed = false,
+		ongroup,
+		ondirection,
+		showViewToggle = true,
+		start
+	}: Props = $props();
+
+	// The group-by button always reflects the active dimension (default = first).
+	const active = $derived(groups?.find((g) => g.key === groupBy) ?? groups?.[0]);
+	let menuOpen = $state(false);
+
+	// Close the popup on outside click.
+	$effect(() => {
+		if (!menuOpen) return;
+		const onDown = (e: MouseEvent) => {
+			if (!(e.target as HTMLElement).closest('.group-by-selector')) menuOpen = false;
+		};
+		window.addEventListener('pointerdown', onDown);
+		return () => window.removeEventListener('pointerdown', onDown);
+	});
+
+	function pick(key: string) {
+		menuOpen = false;
+		ongroup?.(key);
+	}
+</script>
+
+<div class="actions-bar">
+	{#if start}{@render start()}{:else}<div class="action-buttons"></div>{/if}
+
+	{#if groups?.length || showViewToggle}
+		<div class="view-toggle" role="group" aria-label={t('view.label', 'View options')}>
+			{#if groups?.length}
+				<div class="group-by-selector">
+					<button
+						class="toggle-btn group-by-btn active"
+						title={t('groupby.title', 'Group by')}
+						aria-haspopup="true"
+						aria-expanded={menuOpen}
+						onclick={() => (menuOpen = !menuOpen)}
+					>
+						<Icon name={active?.icon ?? 'layer-group'} />
+						<span class="group-by-label">{active?.label ?? ''}</span>
+					</button>
+					<button
+						class="toggle-btn sort-dir-btn"
+						class:active={reversed}
+						title={t('sortdir.title', 'Sort direction')}
+						aria-label={t('sort.direction', 'Sort direction')}
+						onclick={() => ondirection?.()}
+					>
+						<Icon name="arrow-up" />
+					</button>
+					{#if menuOpen}
+						<div class="group-by-menu">
+							{#each groups as g (g.key)}
+								<button
+									class="group-by-option"
+									class:active={groupBy === g.key}
+									onclick={() => pick(g.key)}
+								>
+									<Icon name={g.icon ?? 'layer-group'} />
+									{g.label}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+				{#if showViewToggle}<span class="view-toggle-separator"></span>{/if}
+			{/if}
+			{#if showViewToggle}
+				<button
+					class="toggle-btn"
+					class:active={filesStore.viewMode === 'grid'}
+					title={t('view.grid', 'Grid view')}
+					aria-pressed={filesStore.viewMode === 'grid'}
+					onclick={() => filesStore.setViewMode('grid')}><Icon name="th" /></button
+				>
+				<button
+					class="toggle-btn"
+					class:active={filesStore.viewMode === 'list'}
+					title={t('view.list', 'List view')}
+					aria-pressed={filesStore.viewMode === 'list'}
+					onclick={() => filesStore.setViewMode('list')}><Icon name="list" /></button
+				>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index 0402b4cf..eb1bb642 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -12,14 +12,60 @@
 
 	let { open = $bindable(false), title, onclose, children, footer }: Props = $props();
 
+	let dialogEl = $state<HTMLElement | null>(null);
+	let prevFocus: HTMLElement | null = null;
+
 	function close() {
 		open = false;
 		onclose?.();
 	}
 
-	function onkeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') close();
+	const FOCUSABLE =
+		'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
+
+	function focusables(): HTMLElement[] {
+		if (!dialogEl) return [];
+		return Array.from(dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+			(el) => el.offsetParent !== null || el === document.activeElement
+		);
 	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			close();
+			return;
+		}
+		// Focus trap: keep Tab cycling inside the dialog.
+		if (e.key === 'Tab') {
+			const items = focusables();
+			if (items.length === 0) return;
+			const first = items[0];
+			const last = items[items.length - 1];
+			const active = document.activeElement as HTMLElement | null;
+			if (e.shiftKey && active === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && active === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		}
+	}
+
+	// On open: remember the previously focused element and move focus into the
+	// dialog. On close: restore focus so keyboard users aren't dumped at <body>.
+	$effect(() => {
+		if (open) {
+			prevFocus = (document.activeElement as HTMLElement | null) ?? null;
+			requestAnimationFrame(() => {
+				const items = focusables();
+				(items[0] ?? dialogEl)?.focus();
+			});
+		} else if (prevFocus) {
+			prevFocus.focus();
+			prevFocus = null;
+		}
+	});
 </script>
 
 <svelte:window onkeydown={open ? onkeydown : undefined} />
@@ -33,7 +79,14 @@
 			if (e.target === e.currentTarget) close();
 		}}
 	>
-		<div class="modal" role="dialog" aria-modal="true" aria-label={title}>
+		<div
+			class="modal"
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			tabindex="-1"
+			bind:this={dialogEl}
+		>
 			{#if title}
 				<header class="modal__header">
 					<h2 class="modal__title">{title}</h2>
@@ -62,6 +115,7 @@
 		justify-content: center;
 		z-index: 900;
 		padding: 1rem;
+		animation: modal-fade 0.16s ease;
 	}
 
 	.modal {
@@ -74,6 +128,7 @@
 		overflow: auto;
 		display: flex;
 		flex-direction: column;
+		animation: modal-pop 0.18s ease;
 	}
 
 	.modal__header {
@@ -109,4 +164,33 @@
 		padding: 1rem 1.25rem;
 		border-top: 1px solid var(--color-border);
 	}
+
+	@keyframes modal-fade {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes modal-pop {
+		from {
+			opacity: 0;
+			transform: translateY(8px) scale(0.98);
+		}
+
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.modal__backdrop,
+		.modal {
+			animation: none;
+		}
+	}
 </style>
diff --git a/frontend/src/lib/components/MoveDialog.svelte b/frontend/src/lib/components/MoveDialog.svelte
new file mode 100644
index 00000000..41579cd0
--- /dev/null
+++ b/frontend/src/lib/components/MoveDialog.svelte
@@ -0,0 +1,273 @@
+<script lang="ts">
+	import { listFolder, moveFolder } from '$lib/api/endpoints/folders';
+	import { moveFile } from '$lib/api/endpoints/files';
+	import { copyFiles, copyFolders } from '$lib/api/endpoints/batch';
+	import type { FolderItem } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+	import { session } from '$lib/stores/session.svelte';
+	import { ui } from '$lib/stores/ui.svelte';
+
+	interface Target {
+		id: string;
+		name: string;
+		kind: 'file' | 'folder';
+	}
+
+	interface Props {
+		open: boolean;
+		item: Target | null;
+		/** Optional multi-item batch; takes precedence over `item`. */
+		items?: Target[] | null;
+		/** 'move' (default) relocates; 'copy' duplicates into the picked folder. */
+		mode?: 'move' | 'copy';
+		onmoved?: () => void;
+	}
+
+	let { open = $bindable(false), item, items = null, mode = 'move', onmoved }: Props = $props();
+
+	const targets = $derived(items && items.length ? items : item ? [item] : []);
+	const targetIds = $derived(new Set(targets.map((x) => x.id)));
+
+	let crumbs = $state<Array<{ id: string; name: string }>>([]);
+	let folders = $state<FolderItem[]>([]);
+	let currentId = $state<string | null>(null);
+	let loading = $state(false);
+	let working = $state(false);
+
+	async function loadInto(id: string) {
+		loading = true;
+		try {
+			currentId = id;
+			folders = (await listFolder(id)).folders;
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function init() {
+		const home = await session.loadHomeFolder();
+		if (!home) return;
+		crumbs = [{ id: home, name: session.homeFolderName ?? t('nav.files', 'Files') }];
+		await loadInto(home);
+	}
+
+	function enter(f: FolderItem) {
+		crumbs = [...crumbs, { id: f.id, name: f.name }];
+		void loadInto(f.id);
+	}
+
+	function gotoCrumb(index: number) {
+		crumbs = crumbs.slice(0, index + 1);
+		void loadInto(crumbs[index].id);
+	}
+
+	/** Jump to the home (root) folder — the first crumb. */
+	function goHome() {
+		if (crumbs.length) gotoCrumb(0);
+	}
+
+	/** Step up one level to the parent folder (no-op at home). */
+	function goParent() {
+		if (crumbs.length > 1) gotoCrumb(crumbs.length - 2);
+	}
+
+	const atHome = $derived(crumbs.length <= 1);
+
+	async function confirmMove() {
+		if (!targets.length || !currentId) return;
+		working = true;
+		try {
+			if (mode === 'copy') {
+				const fileIds = targets.filter((x) => x.kind === 'file').map((x) => x.id);
+				const folderIds = targets.filter((x) => x.kind === 'folder').map((x) => x.id);
+				await copyFiles(fileIds, currentId);
+				await copyFolders(folderIds, currentId);
+				ui.notify(t('files.copied', 'Copied'), 'success');
+			} else {
+				for (const tgt of targets) {
+					if (tgt.id === currentId) continue;
+					if (tgt.kind === 'file') await moveFile(tgt.id, currentId);
+					else await moveFolder(tgt.id, currentId);
+				}
+				ui.notify(t('files.moved', 'Moved'), 'success');
+			}
+			open = false;
+			onmoved?.();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		} finally {
+			working = false;
+		}
+	}
+
+	// (Re)initialise the picker each time it opens.
+	$effect(() => {
+		if (open && targets.length) void init();
+	});
+
+	const moveTitle = $derived.by(() => {
+		if (mode === 'copy') {
+			return targets.length > 1
+				? t('files.copy_n', { n: targets.length }, 'Copy {{n}} items')
+				: t('files.copy_title', { name: targets[0]?.name ?? '' }, 'Copy “{{name}}”');
+		}
+		return targets.length > 1
+			? t('files.move_n', { n: targets.length }, 'Move {{n}} items')
+			: t('files.move_title', { name: targets[0]?.name ?? '' }, 'Move “{{name}}”');
+	});
+</script>
+
+<Modal bind:open title={moveTitle}>
+	<div class="mv-nav">
+		<button
+			class="mv-nav-btn"
+			title={t('breadcrumb.home', 'Home')}
+			aria-label={t('breadcrumb.home', 'Home')}
+			disabled={atHome}
+			onclick={goHome}><Icon name="home" /></button
+		>
+		<button
+			class="mv-nav-btn"
+			title={t('dialogs.go_to_parent', 'Go to parent')}
+			aria-label={t('dialogs.go_to_parent', 'Go to parent')}
+			disabled={atHome}
+			onclick={goParent}><Icon name="level-up-alt" /></button
+		>
+		<nav class="mv-crumbs" aria-label="Breadcrumb">
+			{#each crumbs as c, i (c.id)}
+				{#if i > 0}<span class="mv-sep">/</span>{/if}
+				<button class="mv-crumb" onclick={() => gotoCrumb(i)}>{c.name}</button>
+			{/each}
+		</nav>
+	</div>
+
+	{#if loading}
+		<p class="mv-status">{t('common.loading', 'Loading…')}</p>
+	{:else if folders.length === 0}
+		<p class="mv-status">{t('files.no_subfolders', 'No subfolders here.')}</p>
+	{:else}
+		<ul class="mv-list">
+			{#each folders as f (f.id)}
+				<li>
+					<button class="mv-folder" disabled={targetIds.has(f.id)} onclick={() => enter(f)}>
+						<Icon name="folder" /> <span>{f.name}</span>
+						<Icon name="chevron-right" class="mv-enter" />
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#snippet footer()}
+		<button class="btn btn-secondary" onclick={() => (open = false)}>
+			{t('common.cancel', 'Cancel')}
+		</button>
+		<button class="btn btn-primary" disabled={working || !currentId} onclick={confirmMove}>
+			{mode === 'copy' ? t('files.copy_here', 'Copy here') : t('files.move_here', 'Move here')}
+		</button>
+	{/snippet}
+</Modal>
+
+<style>
+	.mv-nav {
+		display: flex;
+		align-items: center;
+		gap: var(--space-1);
+		margin-bottom: var(--space-3);
+	}
+
+	.mv-nav-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+		cursor: pointer;
+		flex: none;
+	}
+
+	.mv-nav-btn:hover:not(:disabled) {
+		background: var(--color-bg-hover);
+	}
+
+	.mv-nav-btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.mv-crumbs {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem;
+		min-width: 0;
+	}
+
+	.mv-crumb {
+		background: none;
+		border: none;
+		color: var(--color-accent-text, var(--color-primary));
+		cursor: pointer;
+		padding: 0.125rem 0.25rem;
+	}
+
+	.mv-sep {
+		color: var(--color-text-muted);
+	}
+
+	.mv-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		max-height: 50vh;
+		overflow: auto;
+	}
+
+	.mv-folder {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.625rem;
+		border: none;
+		background: none;
+		color: var(--color-text);
+		cursor: pointer;
+		border-radius: var(--radius-md);
+		text-align: left;
+	}
+
+	.mv-folder:hover:not(:disabled) {
+		background: var(--color-bg-hover);
+	}
+
+	.mv-folder:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.mv-folder span {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	:global(.mv-enter) {
+		color: var(--color-text-muted);
+	}
+
+	.mv-status {
+		color: var(--color-text-muted);
+		padding: 1rem 0;
+		text-align: center;
+	}
+</style>
diff --git a/frontend/src/lib/components/ResourceList.svelte b/frontend/src/lib/components/ResourceList.svelte
new file mode 100644
index 00000000..4f4b4da3
--- /dev/null
+++ b/frontend/src/lib/components/ResourceList.svelte
@@ -0,0 +1,709 @@
+<script lang="ts" module>
+	import type { ItemType } from '$lib/api/types';
+
+	/** Normalised row passed to ResourceList; views map their items to this. */
+	export interface ResourceEntry {
+		id: string;
+		name: string;
+		kind: ItemType;
+		iconClass?: string;
+		path?: string | null;
+		size?: number | null;
+		date?: number | string | null;
+		typeLabel?: string;
+		/** Owner user id — enables the owner column + vignette when `showOwner`. */
+		ownerId?: string | null;
+		/** Owner display name (resolved by the page). */
+		ownerName?: string | null;
+		/** Per-entry favorite state for the star-toggle widget. */
+		isFavorite?: boolean;
+		/** Stable category key (Folder / Image / …) used by the `type` group-by. */
+		category?: string;
+		/** Modified timestamp (epoch seconds/ms or ISO) for the `modifiedAt` group-by. */
+		modifiedAt?: number | string | null;
+	}
+
+	/**
+	 * A group-by ("swimlane") dimension a page can offer. `orderBy` is sent to the
+	 * API; the optional `bucketOf` maps an entry to a section key, and `labelOf`
+	 * maps that key to a header label. Omitting `bucketOf` means a flat list.
+	 */
+	export interface GroupByDef {
+		key: string;
+		label: string;
+		orderBy: string;
+		/** Optional icon for the dropdown option (defaults to the group glyph). */
+		icon?: string;
+		bucketOf?: (entry: ResourceEntry) => string | null;
+		labelOf?: (bucketKey: string) => string;
+	}
+
+	/** A right-click / overflow context-menu action. */
+	export interface ContextAction {
+		key: string;
+		label: string;
+		icon: string;
+		danger?: boolean;
+		run: (entry: ResourceEntry) => void;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '$lib/icons/Icon.svelte';
+	import ListToolbar from '$lib/components/ListToolbar.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+	import { files as filesStore } from '$lib/stores/files.svelte';
+	import { formatBytes } from '$lib/utils/format';
+	import { formatDate, iconNameFromClass } from '$lib/utils/display';
+
+	interface Props {
+		title: string;
+		items: ResourceEntry[];
+		loading?: boolean;
+		error?: string | null;
+		/** Empty-state primary line. */
+		emptyText?: string;
+		/** Empty-state secondary hint line. */
+		emptyHint?: string;
+		/** Empty-state icon-registry name (e.g. "star", "clock", "trash"). */
+		emptyIcon?: string;
+		hasMore?: boolean;
+		onloadmore?: () => void;
+		/** Show the path/location column (list view only). */
+		showPath?: boolean;
+		/** Override the path column header label (e.g. trash → "Original location"). */
+		pathLabel?: string;
+		showSize?: boolean;
+		showType?: boolean;
+		showDate?: boolean;
+		/** Override the date column header label (e.g. trash → "Remaining"). */
+		dateLabel?: string;
+		/** Custom renderer for the date cell (e.g. trash expiry chip). */
+		dateCell?: Snippet<[ResourceEntry]>;
+		/** Show the owner column + vignette (list view) and hover tooltip. */
+		showOwner?: boolean;
+		/** Allow grid/list toggle (shares the app-wide view mode). */
+		showViewToggle?: boolean;
+		/** Multi-select checkboxes + selection model. */
+		selectable?: boolean;
+		/** Right-click / overflow context-menu actions. */
+		contextActions?: ContextAction[];
+		/** Group-by dimensions; when provided, a swimlane selector is shown. */
+		groupBys?: GroupByDef[];
+		/** Active group-by key (bind:groupBy from the page). */
+		groupBy?: string;
+		/** Reverse sort toggle state (bind:reversed from the page). */
+		reversed?: boolean;
+		/** Called when group-by or direction changes; page should reload page 1. */
+		onreload?: (orderBy: string, reversed: boolean) => void;
+		onopen?: (entry: ResourceEntry) => void;
+		/** Per-entry favorite star toggle. */
+		onfavorite?: (entry: ResourceEntry) => void;
+		/** Selection changed (set of selected entry ids). */
+		onselectionchange?: (ids: Set<string>) => void;
+		actions?: Snippet<[ResourceEntry]>;
+		toolbar?: Snippet;
+		/** Batch toolbar shown when items are selected; receives selected entries. */
+		batchToolbar?: Snippet<[ResourceEntry[]]>;
+	}
+
+	let {
+		title,
+		items,
+		loading = false,
+		error = null,
+		emptyText,
+		emptyHint,
+		emptyIcon,
+		hasMore = false,
+		onloadmore,
+		showPath = true,
+		pathLabel,
+		showSize = true,
+		showType = false,
+		showDate = true,
+		dateLabel,
+		dateCell,
+		showOwner = false,
+		showViewToggle = true,
+		selectable = false,
+		contextActions,
+		groupBys,
+		groupBy = $bindable(''),
+		reversed = $bindable(false),
+		onreload,
+		onopen,
+		onfavorite,
+		onselectionchange,
+		actions,
+		toolbar,
+		batchToolbar
+	}: Props = $props();
+
+	const isEmpty = $derived(items.length === 0);
+	const viewClass = $derived(
+		filesStore.viewMode === 'grid' ? 'files-grid-view' : 'files-list-view'
+	);
+
+	// Build the list-view column track from the enabled cells.
+	const columns = $derived(
+		[
+			selectable ? '36px' : '',
+			'minmax(200px, 2fr)',
+			showOwner ? 'minmax(120px, 1fr)' : '',
+			showPath ? 'minmax(140px, 1.5fr)' : '',
+			showType ? '120px' : '',
+			showSize ? '110px' : '',
+			showDate ? '160px' : '',
+			actions ? '120px' : ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const SKELETON = [0, 1, 2, 3, 4, 5];
+
+	// ── Group-by / direction ──────────────────────────────────────────────────
+	const activeGroup = $derived(groupBys?.find((g) => g.key === groupBy));
+
+	function selectGroup(key: string) {
+		if (groupBy === key) return;
+		groupBy = key;
+		const def = groupBys?.find((g) => g.key === key);
+		onreload?.(def?.orderBy ?? 'name', reversed);
+	}
+
+	function toggleDirection() {
+		reversed = !reversed;
+		onreload?.(activeGroup?.orderBy ?? 'name', reversed);
+	}
+
+	/**
+	 * Partition the visible items into grouped sections when a `bucketOf` is
+	 * active. Server order is preserved within and across buckets (first-seen).
+	 */
+	const sections = $derived.by((): Array<{ key: string; label: string; rows: ResourceEntry[] }> => {
+		const bucketOf = activeGroup?.bucketOf;
+		if (!bucketOf) return [{ key: '', label: '', rows: items }];
+		const order: string[] = [];
+		const map = new Map<string, ResourceEntry[]>();
+		for (const entry of items) {
+			const k = bucketOf(entry) ?? '∅';
+			if (!map.has(k)) {
+				map.set(k, []);
+				order.push(k);
+			}
+			map.get(k)!.push(entry);
+		}
+		return order.map((k) => ({
+			key: k,
+			label: activeGroup?.labelOf?.(k) ?? k,
+			rows: map.get(k)!
+		}));
+	});
+	const grouped = $derived(!!activeGroup?.bucketOf);
+
+	// ── Selection ─────────────────────────────────────────────────────────────
+	let selected = $state<Set<string>>(new Set());
+
+	function toggleSelected(id: string) {
+		const next = new Set(selected);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		selected = next;
+		onselectionchange?.(next);
+	}
+	function clearSelection() {
+		selected = new Set();
+		onselectionchange?.(selected);
+	}
+	const allSelected = $derived(items.length > 0 && selected.size === items.length);
+	function toggleSelectAll() {
+		if (allSelected) clearSelection();
+		else {
+			selected = new Set(items.map((i) => i.id));
+			onselectionchange?.(selected);
+		}
+	}
+	const selectedEntries = $derived(items.filter((i) => selected.has(i.id)));
+
+	// Drop selection ids that are no longer present after a reload.
+	$effect(() => {
+		const ids = new Set(items.map((i) => i.id));
+		let changed = false;
+		const next = new Set<string>();
+		for (const id of selected) {
+			if (ids.has(id)) next.add(id);
+			else changed = true;
+		}
+		if (changed) {
+			selected = next;
+			onselectionchange?.(next);
+		}
+	});
+
+	// ── Right-click context menu ──────────────────────────────────────────────
+	let ctxOpen = $state(false);
+	let ctxX = $state(0);
+	let ctxY = $state(0);
+	let ctxEntry = $state<ResourceEntry | null>(null);
+
+	function openContext(e: MouseEvent, entry: ResourceEntry) {
+		if (!contextActions?.length) return;
+		e.preventDefault();
+		e.stopPropagation();
+		ctxEntry = entry;
+		ctxX = Math.min(e.clientX, window.innerWidth - 220);
+		ctxY = Math.min(e.clientY, window.innerHeight - (contextActions.length * 44 + 24));
+		ctxOpen = true;
+	}
+	function closeContext() {
+		ctxOpen = false;
+		ctxEntry = null;
+	}
+
+	// ── Infinite scroll (IntersectionObserver) ────────────────────────────────
+	let sentinel = $state<HTMLElement | null>(null);
+	$effect(() => {
+		const el = sentinel;
+		if (!el || typeof IntersectionObserver === 'undefined') return;
+		const obs = new IntersectionObserver(
+			(entries) => {
+				for (const en of entries) {
+					if (en.isIntersecting && hasMore && !loading) onloadmore?.();
+				}
+			},
+			{ rootMargin: '200px' }
+		);
+		obs.observe(el);
+		return () => obs.disconnect();
+	});
+
+	function ownerTitle(entry: ResourceEntry): string {
+		const owner = entry.ownerName ?? entry.ownerId ?? '';
+		const path = entry.path ?? '';
+		return [
+			owner && `${t('files.col_owner', 'Owner')}: ${owner}`,
+			path && `${t('files.col_path', 'Location')}: ${path}`
+		]
+			.filter(Boolean)
+			.join('\n');
+	}
+</script>
+
+{#snippet row(entry: ResourceEntry)}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		class="file-item"
+		class:file-item--selected={selectable && selected.has(entry.id)}
+		role={onopen ? 'button' : undefined}
+		tabindex={onopen ? 0 : undefined}
+		title={showOwner ? ownerTitle(entry) : undefined}
+		onclick={onopen ? () => onopen(entry) : undefined}
+		onkeydown={onopen ? (e) => e.key === 'Enter' && onopen(entry) : undefined}
+		oncontextmenu={contextActions?.length ? (e) => openContext(e, entry) : undefined}
+	>
+		{#if selectable}
+			<div class="select-cell" role="presentation" onclick={(e) => e.stopPropagation()}>
+				<input
+					type="checkbox"
+					aria-label={t('common.select', 'Select')}
+					checked={selected.has(entry.id)}
+					onchange={() => toggleSelected(entry.id)}
+				/>
+			</div>
+		{/if}
+		<div class="name-cell">
+			<span class="file-icon">
+				<Icon name={entry.kind === 'folder' ? 'folder' : iconNameFromClass(entry.iconClass)} />
+			</span>
+			<span class="name-cell__text">{entry.name}</span>
+		</div>
+		{#if showOwner}
+			<div class="owner-cell">
+				<span class="rl-vignette">
+					<span class="rl-vignette__avatar" aria-hidden="true"
+						>{(entry.ownerName ?? '?').slice(0, 1).toUpperCase()}</span
+					>
+					<span class="rl-vignette__name">{entry.ownerName ?? entry.ownerId ?? ''}</span>
+				</span>
+			</div>
+		{/if}
+		{#if showPath}<div class="path-cell">{entry.path ?? ''}</div>{/if}
+		{#if showType}<div class="type-cell">{entry.typeLabel ?? ''}</div>{/if}
+		{#if showSize}
+			<div class="size-cell">{entry.size != null ? formatBytes(entry.size) : '—'}</div>
+		{/if}
+		{#if showDate}
+			<div class="date-cell">
+				{#if dateCell}{@render dateCell(entry)}{:else}{formatDate(entry.date)}{/if}
+			</div>
+		{/if}
+		<div class="grid-meta">
+			{#if showDate && dateCell}<span class="grid-meta__chip">{@render dateCell(entry)}</span>{/if}
+			<span class="grid-meta__line">
+				{#if entry.size != null}<span class="grid-meta__size">{formatBytes(entry.size)}</span>{/if}
+				{#if entry.date != null}<span class="grid-meta__date">{formatDate(entry.date)}</span>{/if}
+			</span>
+		</div>
+		{#if onfavorite}
+			<button
+				class="rl-star"
+				class:rl-star--on={entry.isFavorite}
+				title={entry.isFavorite
+					? t('files.unfavorite', 'Remove favorite')
+					: t('files.favorite', 'Add favorite')}
+				aria-pressed={!!entry.isFavorite}
+				onclick={(e) => {
+					e.stopPropagation();
+					onfavorite(entry);
+				}}><Icon name={entry.isFavorite ? 'star' : 'star-outline'} /></button
+			>
+		{/if}
+		{#if actions}
+			<div class="action-cell">{@render actions(entry)}</div>
+		{/if}
+	</div>
+{/snippet}
+
+<div class="page-sticky-header">
+	<h1 class="page-title">{title}</h1>
+	<ListToolbar
+		groups={groupBys}
+		{groupBy}
+		{reversed}
+		ongroup={selectGroup}
+		ondirection={toggleDirection}
+		{showViewToggle}
+	>
+		{#snippet start()}
+			<div class="action-buttons">{@render toolbar?.()}</div>
+		{/snippet}
+	</ListToolbar>
+</div>
+
+{#if selectable && selected.size > 0 && batchToolbar}
+	<div class="rl-batch" role="region" aria-label={t('files.selection', 'Selection')}>
+		<button class="rl-batch__close" title={t('common.clear', 'Clear')} onclick={clearSelection}>
+			<Icon name="times" />
+		</button>
+		<span class="rl-batch__count"
+			>{t('files.selected_count', { count: selected.size }, '{{count}} selected')}</span
+		>
+		<div class="rl-batch__actions">{@render batchToolbar(selectedEntries)}</div>
+	</div>
+{/if}
+
+{#if error}
+	<div class="empty-state">
+		<Icon name="exclamation-circle" class="empty-state-icon empty-state-icon--error" />
+		<p>{error}</p>
+	</div>
+{:else if loading && isEmpty}
+	<div class="files-container">
+		<div
+			class={filesStore.viewMode === 'grid' ? 'files-grid-view files-skeleton' : 'files-skeleton'}
+		>
+			{#each SKELETON as i (i)}
+				{#if filesStore.viewMode === 'grid'}
+					<div class="skeleton-card">
+						<div class="skeleton skeleton-thumb"></div>
+						<div class="skeleton skeleton-line skeleton-line--medium"></div>
+					</div>
+				{:else}
+					<div class="skeleton-row">
+						<div class="skeleton skeleton-icon"></div>
+						<div class="skeleton skeleton-line skeleton-line--medium"></div>
+						<div class="skeleton skeleton-line skeleton-line--short"></div>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	</div>
+{:else if isEmpty}
+	<div class="empty-state">
+		{#if emptyIcon}<Icon name={emptyIcon} class="empty-state-icon" />{/if}
+		<p>{emptyText ?? t('common.empty', 'Nothing here yet.')}</p>
+		{#if emptyHint}<p class="empty-state__hint">{emptyHint}</p>{/if}
+	</div>
+{:else}
+	<div class="files-container">
+		<div class={viewClass} style="--files-list-columns: {columns}">
+			<div class="list-header">
+				{#if selectable}
+					<div class="select-cell">
+						<input
+							type="checkbox"
+							aria-label={t('common.select_all', 'Select all')}
+							checked={allSelected}
+							onchange={toggleSelectAll}
+						/>
+					</div>
+				{/if}
+				<div>{t('files.col_name', 'Name')}</div>
+				{#if showOwner}<div>{t('files.col_owner', 'Owner')}</div>{/if}
+				{#if showPath}<div>{pathLabel ?? t('files.col_path', 'Location')}</div>{/if}
+				{#if showType}<div>{t('files.col_type', 'Type')}</div>{/if}
+				{#if showSize}<div>{t('files.col_size', 'Size')}</div>{/if}
+				{#if showDate}<div>{dateLabel ?? t('files.col_modified', 'Date')}</div>{/if}
+				{#if onfavorite || actions}<div></div>{/if}
+			</div>
+
+			{#if grouped}
+				{#each sections as section (section.key)}
+					<div class="rl-swimlane-header" role="rowheader">{section.label}</div>
+					{#each section.rows as entry (entry.id)}
+						{@render row(entry)}
+					{/each}
+				{/each}
+			{:else}
+				{#each items as entry (entry.id)}
+					{@render row(entry)}
+				{/each}
+			{/if}
+		</div>
+
+		{#if hasMore}
+			<button class="btn btn-secondary rl-more" onclick={onloadmore} disabled={loading}>
+				{loading ? t('common.loading', 'Loading…') : t('common.load_more', 'Load more')}
+			</button>
+		{/if}
+		<!-- Infinite-scroll sentinel: auto-loads the next page as it nears the viewport. -->
+		<div bind:this={sentinel} class="rl-sentinel" aria-hidden="true"></div>
+	</div>
+{/if}
+
+{#if ctxOpen && ctxEntry && contextActions}
+	<div
+		class="rl-ctx-scrim"
+		role="presentation"
+		onclick={closeContext}
+		oncontextmenu={(e) => e.preventDefault()}
+	></div>
+	<div class="rl-ctx-menu" style:left="{ctxX}px" style:top="{ctxY}px" role="menu">
+		{#each contextActions as action (action.key)}
+			<button
+				class="rl-ctx-item"
+				class:rl-ctx-item--danger={action.danger}
+				role="menuitem"
+				onclick={() => {
+					const e = ctxEntry!;
+					closeContext();
+					action.run(e);
+				}}
+			>
+				<Icon name={action.icon} />
+				{action.label}
+			</button>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.rl-more {
+		margin: var(--space-4) auto 0;
+	}
+
+	.rl-sentinel {
+		height: 1px;
+		width: 100%;
+	}
+
+	/* ── Batch toolbar ── */
+	.rl-batch {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		padding: var(--space-2) var(--space-4);
+		margin-bottom: var(--space-3);
+		background: var(--color-accent-bg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+	}
+
+	.rl-batch__close {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+	}
+
+	.rl-batch__close:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.rl-batch__count {
+		font-weight: var(--weight-semibold);
+		color: var(--color-text);
+	}
+
+	.rl-batch__actions {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		margin-left: auto;
+	}
+
+	/* ── Selection column ── */
+	.select-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.file-item--selected {
+		background: var(--color-accent-bg);
+	}
+
+	/* ── Owner vignette ── */
+	.owner-cell {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+	}
+
+	.rl-vignette {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-2);
+		min-width: 0;
+	}
+
+	.rl-vignette__avatar {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		background: var(--color-accent-bg-sm);
+		color: var(--color-accent-text);
+		font-size: var(--text-xs);
+		font-weight: var(--weight-semibold);
+		flex: none;
+	}
+
+	.rl-vignette__name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--color-text-secondary);
+	}
+
+	.name-cell__text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* ── Favorite star ── */
+	.rl-star {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--color-text-faint);
+		cursor: pointer;
+	}
+
+	.rl-star:hover {
+		background: var(--color-bg-hover);
+		color: var(--color-text-secondary);
+	}
+
+	.rl-star--on {
+		color: var(--color-warning-text-amber);
+	}
+
+	/* ── Swimlane section header ── */
+	.rl-swimlane-header {
+		grid-column: 1 / -1;
+		padding: var(--space-3) var(--space-1) var(--space-1);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		color: var(--color-text-secondary);
+		border-bottom: 1px solid var(--color-border-faint);
+	}
+
+	/* Grid view date meta line. */
+	.grid-meta__line {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	/* Grid view: overlay a custom date chip (e.g. trash expiry) on the card corner. */
+	:global(.files-grid-view) .grid-meta__chip {
+		position: absolute;
+		top: var(--space-2);
+		right: var(--space-2);
+		z-index: 1;
+	}
+
+	/* ── Context menu ── */
+	.rl-ctx-scrim {
+		position: fixed;
+		inset: 0;
+		z-index: 1000;
+	}
+
+	.rl-ctx-menu {
+		position: fixed;
+		z-index: 1001;
+		min-width: 200px;
+		padding: var(--space-1);
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		box-shadow: var(--shadow-lg);
+	}
+
+	.rl-ctx-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		width: 100%;
+		padding: var(--space-2) var(--space-3);
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--color-text);
+		text-align: left;
+		cursor: pointer;
+	}
+
+	.rl-ctx-item:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.rl-ctx-item--danger {
+		color: var(--color-danger-text);
+	}
+
+	.empty-state__hint {
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+	}
+
+	/* Empty/error icon lives inside the <Icon> child component's <svg>. */
+	.empty-state :global(.empty-state-icon) {
+		font-size: var(--text-5xl);
+		color: var(--color-text-faint);
+		margin-bottom: var(--space-2);
+	}
+
+	.empty-state :global(.empty-state-icon--error) {
+		color: var(--color-danger-text);
+	}
+</style>
diff --git a/frontend/src/lib/components/ResourceListShell.svelte b/frontend/src/lib/components/ResourceListShell.svelte
deleted file mode 100644
index a357d88d..00000000
--- a/frontend/src/lib/components/ResourceListShell.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { t } from '$lib/i18n/index.svelte';
-
-	interface Props {
-		loading: boolean;
-		error?: string | null;
-		empty: boolean;
-		emptyText?: string;
-		hasMore?: boolean;
-		onloadmore?: () => void;
-		toolbar?: Snippet;
-		children: Snippet;
-	}
-
-	let {
-		loading,
-		error = null,
-		empty,
-		emptyText,
-		hasMore = false,
-		onloadmore,
-		toolbar,
-		children
-	}: Props = $props();
-</script>
-
-<section class="rl">
-	{#if toolbar}
-		<div class="rl__toolbar">{@render toolbar()}</div>
-	{/if}
-
-	{#if error}
-		<p class="rl__error" role="alert">{error}</p>
-	{:else if loading && empty}
-		<p class="rl__status">{t('common.loading', 'Loading…')}</p>
-	{:else if empty}
-		<p class="rl__status">{emptyText ?? t('common.empty', 'Nothing here yet.')}</p>
-	{:else}
-		<ul class="rl__list">
-			{@render children()}
-		</ul>
-		{#if hasMore}
-			<button class="rl__more" onclick={onloadmore} disabled={loading}>
-				{loading ? t('common.loading', 'Loading…') : t('common.load_more', 'Load more')}
-			</button>
-		{/if}
-	{/if}
-</section>
-
-<style>
-	.rl {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		padding: 1rem;
-	}
-
-	.rl__toolbar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.5rem;
-	}
-
-	.rl__list {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-
-	.rl__status,
-	.rl__error {
-		color: var(--color-text-muted);
-		padding: 2rem 0;
-		text-align: center;
-	}
-
-	.rl__error {
-		color: var(--color-danger-text);
-	}
-
-	.rl__more {
-		align-self: center;
-		padding: 0.5rem 1rem;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md);
-		background: var(--color-bg-surface);
-		color: var(--color-text);
-		cursor: pointer;
-	}
-</style>
diff --git a/frontend/src/lib/components/ShareDialog.svelte b/frontend/src/lib/components/ShareDialog.svelte
new file mode 100644
index 00000000..e3602d21
--- /dev/null
+++ b/frontend/src/lib/components/ShareDialog.svelte
@@ -0,0 +1,846 @@
+<script lang="ts">
+	import {
+		copyShareLink,
+		createShare,
+		deleteShare,
+		listSharesForItem,
+		updateShare
+	} from '$lib/api/endpoints/shares';
+	import {
+		createGrant,
+		expiryToIso,
+		fetchGrantsForResource,
+		notifyGrantRecipient,
+		revokeGrant,
+		roleFromPermissions,
+		updateGrantRole,
+		type Grant,
+		type GrantSubject,
+		type GrantSubjectInput,
+		type NotifyOutcome,
+		type ShareRole
+	} from '$lib/api/endpoints/grants';
+	import {
+		ensureResolvers,
+		isDirectoryAvailable,
+		resolveRecipient,
+		searchRecipients,
+		type Recipient
+	} from '$lib/api/endpoints/recipients';
+	import type { ItemType, ShareItem } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+	import { ui } from '$lib/stores/ui.svelte';
+
+	interface Target {
+		id: string;
+		name: string;
+		kind: ItemType;
+	}
+
+	interface Props {
+		open: boolean;
+		item: Target | null;
+	}
+
+	let { open = $bindable(false), item }: Props = $props();
+
+	let tab = $state<'people' | 'link'>('people');
+	let directoryAvailable = $state(true);
+
+	const ROLES: { v: ShareRole; l: string; icon: string }[] = [
+		{ v: 'admin', l: t('share.role.canManage', 'Can manage'), icon: 'crown' },
+		{ v: 'editor', l: t('share.role.canEdit', 'Can edit'), icon: 'pencil-alt' },
+		{ v: 'viewer', l: t('share.role.canView', 'Can view'), icon: 'eye' }
+	];
+	const ROLE_ORDER: ShareRole[] = ['admin', 'editor', 'viewer'];
+	function roleLabel(r: ShareRole): string {
+		return ROLES.find((x) => x.v === r)?.l ?? r;
+	}
+	function roleIcon(r: ShareRole): string {
+		return ROLES.find((x) => x.v === r)?.icon ?? 'eye';
+	}
+
+	// ── People / grants ──────────────────────────────────────────────────────
+	interface Member {
+		subject: GrantSubject;
+		recipient: Recipient;
+		role: ShareRole;
+		grantIds: string[];
+		/** Representative grant id for notify (any grant on this subject). */
+		notifyGrantId?: string;
+		expiry: string | null; // YYYY-MM-DD or null
+		isExternal: boolean;
+	}
+	let members = $state<Member[]>([]);
+	let grantsLoading = $state(false);
+	let query = $state('');
+	let results = $state<Recipient[]>([]);
+	let newRole = $state<ShareRole>('viewer');
+	let newExpiry = $state<string | null>(null);
+	let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function isoToDate(iso: string | null | undefined): string | null {
+		return iso ? String(iso).slice(0, 10) : null;
+	}
+
+	function groupGrants(grants: Grant[]): Member[] {
+		const bySubject = new Map<
+			string,
+			{ subject: GrantSubject; perms: string[]; ids: string[]; expiry: string | null }
+		>();
+		for (const g of grants) {
+			if (g.subject.type === 'token') continue;
+			const key = `${g.subject.type}:${g.subject.id}`;
+			const entry = bySubject.get(key) ?? { subject: g.subject, perms: [], ids: [], expiry: null };
+			entry.perms.push(g.permission);
+			entry.ids.push(g.id);
+			if (g.expires_at && !entry.expiry) entry.expiry = isoToDate(g.expires_at);
+			bySubject.set(key, entry);
+		}
+		return [...bySubject.values()].map((e) => ({
+			subject: e.subject,
+			recipient: resolveRecipient(e.subject.type as 'user' | 'group', e.subject.id),
+			role: roleFromPermissions(e.perms),
+			grantIds: e.ids,
+			notifyGrantId: e.ids[0],
+			expiry: e.expiry,
+			isExternal: false
+		}));
+	}
+
+	async function loadGrants() {
+		if (!item) return;
+		grantsLoading = true;
+		try {
+			await ensureResolvers();
+			directoryAvailable = isDirectoryAvailable();
+			members = groupGrants(await fetchGrantsForResource(item.kind, item.id));
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		} finally {
+			grantsLoading = false;
+		}
+	}
+
+	function onQueryInput() {
+		if (searchTimer) clearTimeout(searchTimer);
+		searchTimer = setTimeout(async () => {
+			const existing = new Set(members.map((m) => `${m.subject.type}:${m.subject.id}`));
+			results = (await searchRecipients(query)).filter(
+				(r) => !existing.has(`${r.type === 'email' ? 'user' : r.type}:${r.id}`)
+			);
+		}, 200);
+	}
+
+	function subjectInput(r: Recipient): GrantSubjectInput {
+		if (r.type === 'email') return { type: 'email', email: r.id };
+		return { type: r.type, id: r.id };
+	}
+
+	async function addRecipient(r: Recipient) {
+		if (!item) return;
+		try {
+			const res = await createGrant(
+				subjectInput(r),
+				{ type: item.kind, id: item.id },
+				newRole,
+				expiryToIso(newExpiry)
+			);
+			query = '';
+			results = [];
+			summarizeNotifications(res.notification.outcomes);
+			await loadGrants();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function changeRole(m: Member, role: ShareRole) {
+		if (!item || role === m.role) return;
+		try {
+			await updateGrantRole(
+				m.subject,
+				{ type: item.kind, id: item.id },
+				role,
+				expiryToIso(m.expiry)
+			);
+			await loadGrants();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function changeMemberExpiry(m: Member, expiry: string | null) {
+		if (!item) return;
+		try {
+			await updateGrantRole(
+				m.subject,
+				{ type: item.kind, id: item.id },
+				m.role,
+				expiryToIso(expiry)
+			);
+			await loadGrants();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function removeMember(m: Member) {
+		try {
+			for (const id of m.grantIds) await revokeGrant(id);
+			await loadGrants();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function notifyMember(m: Member) {
+		if (!m.notifyGrantId) return;
+		try {
+			const set = await notifyGrantRecipient(m.notifyGrantId);
+			summarizeNotifications(set.outcomes);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	/** Aggregate notification outcomes into a single toast (mirrors OLD _surfaceNotifySummary). */
+	function summarizeNotifications(outcomes: NotifyOutcome[]) {
+		if (!outcomes || outcomes.length === 0) return;
+		const sent = outcomes.filter((o) => o.kind === 'sent').length;
+		const coalesced = outcomes.filter((o) => o.kind === 'coalesced').length;
+		const rateLimited = outcomes.filter((o) => o.kind === 'rate_limited').length;
+		const skipped = outcomes.filter((o) => o.kind === 'not_applicable').length;
+		const lines: string[] = [];
+		if (sent > 0) lines.push(t('share.notify.sent', { n: sent }, '{{n}} notified by email.'));
+		if (coalesced > 0)
+			lines.push(t('share.notify.coalesced', { n: coalesced }, '{{n}} already notified recently.'));
+		if (rateLimited > 0)
+			lines.push(
+				t('share.notify.rateLimited', { n: rateLimited }, '{{n}} hit the rate limit — try later.')
+			);
+		if (skipped > 0)
+			lines.push(
+				t('share.notify.skipped', { n: skipped }, '{{n}} skipped (no email / opted out).')
+			);
+		if (lines.length === 0) return;
+		const onlySent = coalesced === 0 && rateLimited === 0 && skipped === 0;
+		ui.notify(lines.join(' '), onlySent ? 'success' : 'info');
+	}
+
+	// Members grouped by role, highest privilege first.
+	const memberGroups = $derived(
+		ROLE_ORDER.map((role) => ({
+			role,
+			members: members.filter((m) => m.role === role)
+		})).filter((g) => g.members.length > 0)
+	);
+
+	// ── Public link ──────────────────────────────────────────────────────────
+	let shares = $state<ShareItem[]>([]);
+	let linkLoading = $state(false);
+	let creating = $state(false);
+	let newLinkName = $state('');
+	let password = $state('');
+	let expiresAt = $state<string | null>(null);
+
+	async function loadShares() {
+		if (!item) return;
+		linkLoading = true;
+		try {
+			shares = await listSharesForItem(item.id, item.kind);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		} finally {
+			linkLoading = false;
+		}
+	}
+
+	async function createLink() {
+		if (!item) return;
+		creating = true;
+		try {
+			await createShare({
+				itemId: item.id,
+				itemName: newLinkName.trim() || item.name,
+				itemType: item.kind,
+				password: password || null,
+				expiresAt: expiresAt || null
+			});
+			newLinkName = '';
+			password = '';
+			expiresAt = null;
+			await loadShares();
+			ui.notify(t('share.created', 'Public link created'), 'success');
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		} finally {
+			creating = false;
+		}
+	}
+
+	async function editLinkExpiry(share: ShareItem, expiry: string | null) {
+		try {
+			await updateShare(share.id, { expiresAt: expiry });
+			await loadShares();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function editLinkPassword(share: ShareItem, pw: string | null) {
+		try {
+			await updateShare(share.id, { password: pw });
+			await loadShares();
+			ui.notify(
+				pw
+					? t('share.password_set', 'Password updated')
+					: t('share.password_cleared', 'Password removed'),
+				'success'
+			);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function removeLink(share: ShareItem) {
+		try {
+			await deleteShare(share.id);
+			shares = shares.filter((s) => s.id !== share.id);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function copy(url: string) {
+		if (await copyShareLink(url)) ui.notify(t('share.copied', 'Link copied'), 'success');
+		else ui.notify(t('share.copy_failed', 'Could not copy link'), 'error');
+	}
+
+	function shareExpiryIso(s: ShareItem): string | null {
+		return s.expires_at ? new Date(s.expires_at * 1000).toISOString().slice(0, 10) : null;
+	}
+
+	$effect(() => {
+		if (open && item) {
+			void loadGrants();
+			void loadShares();
+		}
+	});
+</script>
+
+<!-- ── Reusable expiry chip ─────────────────────────────────────────────── -->
+{#snippet expiryChip(value: string | null, onchange: (v: string | null) => void)}
+	<span class="chip-edit">
+		{#if value}
+			<input
+				class="chip-edit__date"
+				type="date"
+				value={value ?? ''}
+				onchange={(e) => onchange((e.currentTarget as HTMLInputElement).value || null)}
+				aria-label={t('share.expiry', 'Expiry')}
+			/>
+			<button
+				class="chip-edit__clear"
+				title={t('actions.clear', 'Clear')}
+				onclick={() => onchange(null)}
+				aria-label={t('actions.clear', 'Clear')}>×</button
+			>
+		{:else}
+			<label class="chip chip--ghost">
+				<Icon name="infinity" />
+				<span>{t('share.noExpiry', 'No expiry')}</span>
+				<input
+					class="chip-edit__date chip-edit__date--hidden"
+					type="date"
+					onchange={(e) => onchange((e.currentTarget as HTMLInputElement).value || null)}
+					aria-label={t('share.set_expiry', 'Set expiry')}
+				/>
+			</label>
+		{/if}
+	</span>
+{/snippet}
+
+<Modal bind:open title={t('share.dialog_title', { name: item?.name ?? '' }, 'Share “{{name}}”')}>
+	<div class="tabs" role="tablist">
+		<button role="tab" aria-selected={tab === 'people'} onclick={() => (tab = 'people')}>
+			{t('share.people', 'People')}
+		</button>
+		<button role="tab" aria-selected={tab === 'link'} onclick={() => (tab = 'link')}>
+			{t('share.public_link', 'Public link')}
+		</button>
+	</div>
+
+	{#if tab === 'people'}
+		{#if !directoryAvailable && !grantsLoading}
+			<p class="status status--note">
+				{t('share.directoryUnavailable', 'User directory unavailable')}
+			</p>
+		{:else}
+			<div class="add-row">
+				<div class="search">
+					<input
+						placeholder={t('share.add_people', 'Add people, groups, or email…')}
+						bind:value={query}
+						oninput={onQueryInput}
+						autocomplete="off"
+					/>
+					{#if results.length > 0}
+						<ul class="results">
+							{#each results as r (r.type + r.id)}
+								<li>
+									<button class="result" onclick={() => addRecipient(r)}>
+										<Icon
+											name={r.type === 'group'
+												? 'user-group'
+												: r.type === 'email'
+													? 'envelope'
+													: 'user'}
+										/>
+										<span class="result__label">{r.label}</span>
+										{#if r.type === 'email'}
+											<span class="result__sub">{t('share.inviteByEmail', 'Invite by email')}</span>
+										{:else if r.sublabel}
+											<span class="result__sub">{r.sublabel}</span>
+										{/if}
+									</button>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</div>
+				<select class="role-select" bind:value={newRole} aria-label={t('share.role', 'Role')}>
+					{#each ROLES as r (r.v)}<option value={r.v}>{r.l}</option>{/each}
+				</select>
+				{@render expiryChip(newExpiry, (v) => (newExpiry = v))}
+			</div>
+		{/if}
+
+		{#if grantsLoading}
+			<div class="skeleton" aria-hidden="true">
+				<div class="skeleton__line skeleton__line--short"></div>
+				<div class="skeleton__line skeleton__line--medium"></div>
+				<div class="skeleton__line"></div>
+			</div>
+		{:else if members.length === 0}
+			<p class="status">{t('share.no_people', 'Not shared with anyone yet.')}</p>
+		{:else}
+			{#each memberGroups as group (group.role)}
+				<div class="member-group">
+					<div class="member-group__header">
+						<Icon name={roleIcon(group.role)} />
+						<span>{roleLabel(group.role)}</span>
+						<span class="member-group__badge">{group.members.length}</span>
+					</div>
+					<ul class="members">
+						{#each group.members as m (m.subject.type + m.subject.id)}
+							<li
+								class="member"
+								class:member--expired={m.expiry && new Date(m.expiry) < new Date()}
+							>
+								<Icon name={m.subject.type === 'group' ? 'user-group' : 'user'} />
+								<span class="member__label">
+									{m.recipient.label}
+									{#if m.recipient.sublabel}<span class="member__sub">{m.recipient.sublabel}</span
+										>{/if}
+								</span>
+								{@render expiryChip(m.expiry, (v) => changeMemberExpiry(m, v))}
+								<select
+									class="role-select"
+									value={m.role}
+									onchange={(e) => changeRole(m, e.currentTarget.value as ShareRole)}
+								>
+									{#each ROLES as r (r.v)}<option value={r.v}>{r.l}</option>{/each}
+								</select>
+								<button
+									class="btn-action"
+									title={t('share.notifyByEmail', 'Notify by email')}
+									onclick={() => notifyMember(m)}><Icon name="paper-plane" /></button
+								>
+								<button
+									class="btn-action btn-action--delete"
+									title={t('share.revoke', 'Remove')}
+									onclick={() => removeMember(m)}><Icon name="user-xmark" /></button
+								>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		{/if}
+	{:else}
+		<section class="sh-create">
+			<div class="sh-fields">
+				<label>
+					<span>{t('share.link_name', 'Link name (optional)')}</span>
+					<input type="text" bind:value={newLinkName} autocomplete="off" />
+				</label>
+				<label>
+					<span>{t('share.password_optional', 'Password (optional)')}</span>
+					<input type="text" bind:value={password} autocomplete="off" />
+				</label>
+				<label>
+					<span>{t('share.expires_optional', 'Expires (optional)')}</span>
+					<input
+						type="date"
+						value={expiresAt ?? ''}
+						onchange={(e) => (expiresAt = e.currentTarget.value || null)}
+					/>
+				</label>
+			</div>
+			<button class="btn btn-primary" disabled={creating} onclick={createLink}>
+				{t('share.create_link', 'Create link')}
+			</button>
+		</section>
+
+		{#if linkLoading}
+			<div class="skeleton" aria-hidden="true">
+				<div class="skeleton__line skeleton__line--medium"></div>
+				<div class="skeleton__line"></div>
+			</div>
+		{:else if shares.length === 0}
+			<p class="status">{t('share.none', 'No public links yet.')}</p>
+		{:else}
+			<ul class="links">
+				{#each shares as s (s.id)}
+					<li class="link-row">
+						<span class="link-row__title">
+							<Icon name={s.has_password ? 'lock' : 'link'} />
+							<span class="link-row__name"
+								>{s.item_name || t('share.sharedLink', 'Shared link')}</span
+							>
+						</span>
+						{@render expiryChip(shareExpiryIso(s), (v) => editLinkExpiry(s, v))}
+						<button
+							class="btn-action"
+							class:btn-action--on={s.has_password}
+							title={s.has_password
+								? t('share.changePassword', 'Change password')
+								: t('share.addPassword', 'Add password')}
+							onclick={() => {
+								const pw = window.prompt(
+									s.has_password
+										? t('share.passwordPrompt_clear', 'New password (blank to remove):')
+										: t('share.passwordPrompt', 'Set a password:')
+								);
+								if (pw !== null) editLinkPassword(s, pw || null);
+							}}><Icon name={s.has_password ? 'lock' : 'lock-open'} /></button
+						>
+						<button class="btn-action" title={t('share.copy', 'Copy')} onclick={() => copy(s.url)}>
+							<Icon name="copy" />
+						</button>
+						<button
+							class="btn-action btn-action--delete"
+							title={t('common.delete', 'Delete')}
+							onclick={() => removeLink(s)}><Icon name="trash" /></button
+						>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{/if}
+
+	{#snippet footer()}
+		<button class="btn btn-secondary" onclick={() => (open = false)}>
+			{t('common.close', 'Close')}
+		</button>
+	{/snippet}
+</Modal>
+
+<style>
+	.tabs {
+		display: flex;
+		gap: var(--space-1);
+		border-bottom: 1px solid var(--color-border);
+		margin-bottom: var(--space-4);
+	}
+
+	.tabs button {
+		padding: var(--space-2) var(--space-3);
+		border: none;
+		background: none;
+		color: var(--color-text-muted);
+		cursor: pointer;
+		border-bottom: 2px solid transparent;
+	}
+
+	.tabs button[aria-selected='true'] {
+		color: var(--color-text);
+		border-bottom-color: var(--color-accent);
+	}
+
+	.add-row {
+		display: flex;
+		gap: var(--space-2);
+		margin-bottom: var(--space-3);
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.search {
+		position: relative;
+		flex: 1;
+		min-width: 12rem;
+	}
+
+	.search input,
+	.role-select,
+	.sh-fields input {
+		padding: var(--space-2) var(--space-3);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+	}
+
+	.search input {
+		width: 100%;
+	}
+
+	.results {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 100%;
+		z-index: 10;
+		list-style: none;
+		margin: var(--space-1) 0 0;
+		padding: var(--space-1);
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		box-shadow: var(--shadow-lg);
+		max-height: 14rem;
+		overflow: auto;
+	}
+
+	.result {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		width: 100%;
+		padding: var(--space-2);
+		border: none;
+		background: none;
+		color: var(--color-text);
+		cursor: pointer;
+		border-radius: var(--radius-sm);
+		text-align: left;
+	}
+
+	.result:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.result__label {
+		flex: 1;
+	}
+
+	.result__sub {
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+	}
+
+	.member-group {
+		margin-bottom: var(--space-3);
+	}
+
+	.member-group__header {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold, 600);
+		color: var(--color-text-muted);
+		margin-bottom: var(--space-2);
+	}
+
+	.member-group__badge {
+		min-width: 1.25rem;
+		text-align: center;
+		padding: 0 var(--space-1);
+		border-radius: var(--radius-pill, 999px);
+		background: var(--color-bg-muted);
+		color: var(--color-text-muted);
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.members,
+	.links {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	.member {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	.member--expired {
+		opacity: 0.6;
+	}
+
+	.member__label {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.member__sub {
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sh-fields {
+		display: flex;
+		gap: var(--space-3);
+		margin-bottom: var(--space-3);
+		flex-wrap: wrap;
+	}
+
+	.sh-fields label {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		flex: 1;
+		min-width: 8rem;
+		font-size: var(--text-sm);
+	}
+
+	.link-row {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	.link-row__title {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.link-row__name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.status {
+		color: var(--color-text-muted);
+		padding: var(--space-3) 0;
+	}
+
+	.status--note {
+		font-style: italic;
+	}
+
+	.btn-action--delete:hover {
+		color: var(--color-danger-text);
+	}
+
+	.btn-action--on {
+		color: var(--color-accent);
+	}
+
+	/* ── Expiry chip ─────────────────────────────────────────────────────── */
+	.chip-edit {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+	}
+
+	.chip {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		padding: var(--space-1) var(--space-2);
+		border-radius: var(--radius-pill, 999px);
+		border: 1px solid var(--color-border);
+		font-size: var(--text-sm);
+		color: var(--color-text);
+		cursor: pointer;
+		position: relative;
+	}
+
+	.chip--ghost {
+		border-style: dashed;
+		color: var(--color-text-muted);
+	}
+
+	.chip-edit__date {
+		padding: var(--space-1) var(--space-2);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+		font-size: var(--text-sm);
+	}
+
+	.chip-edit__date--hidden {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+
+	.chip-edit__clear {
+		border: none;
+		background: none;
+		color: var(--color-text-muted);
+		cursor: pointer;
+		font-size: var(--text-md, 1rem);
+		line-height: 1;
+	}
+
+	/* ── Loading skeleton ────────────────────────────────────────────────── */
+	.skeleton {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		padding: var(--space-3) 0;
+	}
+
+	.skeleton__line {
+		height: 1rem;
+		border-radius: var(--radius-sm);
+		background: linear-gradient(
+			90deg,
+			var(--color-bg-muted) 25%,
+			var(--color-bg-hover) 37%,
+			var(--color-bg-muted) 63%
+		);
+		background-size: 400% 100%;
+		animation: shimmer 1.4s ease infinite;
+	}
+
+	.skeleton__line--short {
+		width: 40%;
+	}
+
+	.skeleton__line--medium {
+		width: 65%;
+	}
+
+	@keyframes shimmer {
+		0% {
+			background-position: 100% 0;
+		}
+
+		100% {
+			background-position: 0 0;
+		}
+	}
+</style>
diff --git a/frontend/src/lib/components/Toaster.svelte b/frontend/src/lib/components/Toaster.svelte
index a0954178..d7bb5ad7 100644
--- a/frontend/src/lib/components/Toaster.svelte
+++ b/frontend/src/lib/components/Toaster.svelte
@@ -16,13 +16,17 @@
 <style>
 	.toaster {
 		position: fixed;
-		bottom: 1rem;
+		/* Offset clears any bottom-right FAB the file view may mount; the
+		   --toaster-offset hook lets a page lift the stack further if needed. */
+		bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--toaster-offset, 0px));
 		right: 1rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
-		z-index: 1000;
+		z-index: 1200;
 		max-width: min(92vw, 24rem);
+		/* Let clicks pass through the gaps; individual toasts re-enable below. */
+		pointer-events: none;
 	}
 
 	.toast {
@@ -35,6 +39,7 @@
 		color: var(--color-text);
 		box-shadow: var(--shadow-md);
 		border-left: 4px solid var(--color-border);
+		pointer-events: auto;
 	}
 
 	.toast--success {
diff --git a/frontend/src/lib/components/WopiEditor.svelte b/frontend/src/lib/components/WopiEditor.svelte
new file mode 100644
index 00000000..f60338e4
--- /dev/null
+++ b/frontend/src/lib/components/WopiEditor.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { getEditorUrlWithFallback } from '$lib/api/endpoints/wopi';
+	import Icon from '$lib/icons/Icon.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+	import { ui } from '$lib/stores/ui.svelte';
+
+	interface Props {
+		open: boolean;
+		fileId: string | null;
+		fileName: string;
+		action?: 'edit' | 'view';
+		onclose?: () => void;
+	}
+
+	let { open = $bindable(false), fileId, fileName, action = 'edit', onclose }: Props = $props();
+
+	let form = $state<HTMLFormElement | null>(null);
+	let editorUrl = $state('');
+	let token = $state('');
+	let tokenTtl = $state('');
+	let loading = $state(false);
+
+	function close() {
+		open = false;
+		editorUrl = '';
+		onclose?.();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (open && e.key === 'Escape') close();
+	}
+
+	// The editor iframe posts status messages (Collabora / OnlyOffice WOPI
+	// protocol). We drop the spinner once it loads, and close the host modal
+	// when the editor's own close button fires UI_Close / Document close.
+	function onMessage(e: MessageEvent) {
+		if (!open) return;
+		let data: Record<string, unknown>;
+		try {
+			data = JSON.parse(typeof e.data === 'string' ? e.data : '') as Record<string, unknown>;
+		} catch {
+			return; // not a JSON message — ignore
+		}
+		const msgId = String(data.MessageId ?? data.messageId ?? '');
+		if (msgId === 'UI_Close' || msgId === 'close') {
+			close();
+		} else if (msgId === 'App_LoadingStatus') {
+			const values = data.Values as { Status?: string } | undefined;
+			const status = values?.Status;
+			if (status === 'Document_Loaded' || status === 'Frame_Ready') {
+				loading = false;
+			}
+		}
+	}
+
+	// When opened, fetch the editor URL + token, then submit the (hidden) form
+	// into the iframe — this is the WOPI host-page POST handshake.
+	$effect(() => {
+		if (!open || !fileId) return;
+		loading = true;
+		editorUrl = '';
+		getEditorUrlWithFallback(fileId, fileName, action)
+			.then((data) => {
+				editorUrl = data.editor_url;
+				token = data.access_token;
+				tokenTtl = String(data.access_token_ttl);
+				// Submit on the next microtask once the form has the values bound.
+				queueMicrotask(() => form?.submit());
+			})
+			.catch((e) => {
+				ui.notify(e instanceof Error ? e.message : String(e), 'error');
+				close();
+			})
+			.finally(() => (loading = false));
+	});
+</script>
+
+<svelte:window onkeydown={onKeydown} onmessage={onMessage} />
+
+{#if open}
+	<div class="wopi" role="dialog" aria-modal="true" aria-label={fileName}>
+		<header class="wopi__bar">
+			<span class="wopi__title">{fileName}</span>
+			<button class="wopi__close" aria-label={t('common.close', 'Close')} onclick={close}>
+				<Icon name="times" />
+			</button>
+		</header>
+		<div class="wopi__frame-wrap">
+			{#if loading}
+				<p class="wopi__status">{t('common.loading', 'Loading…')}</p>
+			{/if}
+			{#if editorUrl}
+				<form
+					bind:this={form}
+					action={editorUrl}
+					method="post"
+					target="wopi_frame"
+					class="wopi__form"
+				>
+					<input type="hidden" name="access_token" value={token} />
+					<input type="hidden" name="access_token_ttl" value={tokenTtl} />
+				</form>
+			{/if}
+			<iframe
+				name="wopi_frame"
+				title={t('files.editor', 'Document editor')}
+				class="wopi__frame"
+				allow="clipboard-read; clipboard-write"
+				allowfullscreen
+				sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox"
+			></iframe>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.wopi {
+		position: fixed;
+		inset: 0;
+		z-index: 1100;
+		display: flex;
+		flex-direction: column;
+		background: var(--color-bg-base, var(--color-bg-surface));
+	}
+
+	.wopi__bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 40px;
+		padding: 0 1rem;
+		background: var(--color-bg-elevated, var(--color-bg-surface));
+		border-bottom: 1px solid var(--color-border);
+		color: var(--color-text-heading);
+	}
+
+	.wopi__title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.wopi__close {
+		background: none;
+		border: none;
+		color: var(--color-text);
+		cursor: pointer;
+		font-size: 1.1rem;
+	}
+
+	.wopi__frame-wrap {
+		position: relative;
+		flex: 1;
+	}
+
+	.wopi__form {
+		display: none;
+	}
+
+	.wopi__frame {
+		width: 100%;
+		height: 100%;
+		border: none;
+	}
+
+	.wopi__status {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		color: var(--color-text-muted);
+	}
+</style>
diff --git a/frontend/src/lib/i18n/index.svelte.ts b/frontend/src/lib/i18n/index.svelte.ts
index 2ab2089c..a15b8a50 100644
--- a/frontend/src/lib/i18n/index.svelte.ts
+++ b/frontend/src/lib/i18n/index.svelte.ts
@@ -14,7 +14,7 @@ import { apiFetch } from '$lib/api/client';
 import { getCsrfHeaders } from '$lib/api/csrf';
 
 // Keep in sync with the locale files in static/locales (and, post-cutover,
-// frontend/static/locales). Mirrors AVAILABLE_LOCALES in the legacy selector.
+// frontend/static/locales). Mirrors AVAILABLE_LOCALES in the language selector.
 export const SUPPORTED_LOCALES = [
 	'en',
 	'es',
@@ -36,8 +36,54 @@ export const SUPPORTED_LOCALES = [
 
 export type Locale = (typeof SUPPORTED_LOCALES)[number];
 
+/** Locales that render right-to-left. */
+const RTL_LOCALES: readonly Locale[] = ['fa', 'ar'];
+
+export interface LanguageMeta {
+	code: Locale;
+	/** Endonym (native language name). */
+	name: string;
+	/** Flag emoji. */
+	flag: string;
+}
+
+/**
+ * Display metadata for the language selector — native names + flags, ported
+ * from ALL_LANGUAGES in static/js/features/auth/auth.js. Order matches
+ * SUPPORTED_LOCALES so the rich dropdown lists the same set as `t()` resolves.
+ */
+export const LANGUAGES: readonly LanguageMeta[] = [
+	{ code: 'en', name: 'English', flag: '🇬🇧' },
+	{ code: 'es', name: 'Español', flag: '🇪🇸' },
+	{ code: 'zh', name: '简体中文', flag: '🇨🇳' },
+	{ code: 'zh-TW', name: '繁體中文', flag: '🇹🇼' },
+	{ code: 'fa', name: 'فارسی', flag: '🇮🇷' },
+	{ code: 'fr', name: 'Français', flag: '🇫🇷' },
+	{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
+	{ code: 'pt', name: 'Português', flag: '🇧🇷' },
+	{ code: 'nl', name: 'Nederlands', flag: '🇳🇱' },
+	{ code: 'it', name: 'Italiano', flag: '🇮🇹' },
+	{ code: 'hi', name: 'हिन्दी', flag: '🇮🇳' },
+	{ code: 'ar', name: 'العربية', flag: '🇸🇦' },
+	{ code: 'ru', name: 'Русский', flag: '🇷🇺' },
+	{ code: 'ja', name: '日本語', flag: '🇯🇵' },
+	{ code: 'ko', name: '한국어', flag: '🇰🇷' },
+	{ code: 'pl', name: 'Polski', flag: '🇵🇱' }
+];
+
 const STORAGE_KEY = 'oxicloud-locale';
 
+/**
+ * Reflect the active locale on `<html>`: sets `lang` and flips `dir` to `rtl`
+ * for Farsi/Arabic (and `ltr` otherwise) so the ported [dir="rtl"] CSS engages.
+ */
+function applyHtmlLang(locale: string): void {
+	if (typeof document === 'undefined') return;
+	const html = document.documentElement;
+	html.setAttribute('lang', locale);
+	html.setAttribute('dir', (RTL_LOCALES as readonly string[]).includes(locale) ? 'rtl' : 'ltr');
+}
+
 type Dict = Record<string, unknown>;
 
 /**
@@ -162,6 +208,7 @@ export async function initI18n(): Promise<void> {
 	}
 	await loadDict(store.locale);
 	if (store.locale !== 'en') await loadDict('en');
+	applyHtmlLang(store.locale);
 	store.loaded = true;
 }
 
@@ -172,6 +219,7 @@ export async function setLocale(locale: Locale): Promise<boolean> {
 	}
 	await loadDict(locale);
 	store.locale = locale;
+	applyHtmlLang(locale);
 	if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, locale);
 	persistLocaleToServer(locale);
 	return true;
diff --git a/frontend/src/lib/stores/dialogs.svelte.ts b/frontend/src/lib/stores/dialogs.svelte.ts
new file mode 100644
index 00000000..452f7aa8
--- /dev/null
+++ b/frontend/src/lib/stores/dialogs.svelte.ts
@@ -0,0 +1,113 @@
+/**
+ * Promise-based confirm/prompt dialogs, rendered by <DialogHost> in the root
+ * layout. Replaces the browser's native `confirm()`/`prompt()` with in-app
+ * modals that match the rest of the UI. One dialog at a time (queued).
+ *
+ * Dialogs can carry an async `action`: when present the host runs it on submit
+ * and only closes the dialog if it resolves. A rejection keeps the dialog open
+ * and surfaces an inline error, so failed renames/deletes don't silently vanish.
+ */
+export interface ConfirmOptions {
+	title: string;
+	message?: string;
+	confirmText?: string;
+	cancelText?: string;
+	danger?: boolean;
+	/** Optional async action run on confirm; rejection keeps the dialog open. */
+	action?: () => Promise<void> | void;
+}
+
+export interface PromptOptions {
+	title: string;
+	message?: string;
+	defaultValue?: string;
+	placeholder?: string;
+	confirmText?: string;
+	cancelText?: string;
+	/**
+	 * Pre-select the input text on open. `'name'` selects the filename portion
+	 * (excluding the extension) — used by rename so typing replaces just the
+	 * stem. `true` selects everything; omit/`false` to leave the caret at end.
+	 */
+	selectOnOpen?: boolean | 'name';
+	/** Optional async action run with the entered value; rejection keeps it open. */
+	action?: (value: string) => Promise<void> | void;
+}
+
+type Pending =
+	| { kind: 'confirm'; opts: ConfirmOptions; resolve: (v: boolean) => void }
+	| { kind: 'prompt'; opts: PromptOptions; resolve: (v: string | null) => void };
+
+class DialogStore {
+	current = $state<Pending | null>(null);
+	/** Inline error message for the current dialog (from a failed action). */
+	error = $state<string | null>(null);
+	/** True while the current dialog's async action is running. */
+	busy = $state(false);
+	#queue: Pending[] = [];
+
+	#enqueue(p: Pending) {
+		if (this.current) this.#queue.push(p);
+		else {
+			this.current = p;
+			this.error = null;
+			this.busy = false;
+		}
+	}
+
+	#next() {
+		this.error = null;
+		this.busy = false;
+		this.current = this.#queue.shift() ?? null;
+	}
+
+	confirm(opts: ConfirmOptions): Promise<boolean> {
+		return new Promise((resolve) => this.#enqueue({ kind: 'confirm', opts, resolve }));
+	}
+
+	prompt(opts: PromptOptions): Promise<string | null> {
+		return new Promise((resolve) => this.#enqueue({ kind: 'prompt', opts, resolve }));
+	}
+
+	/**
+	 * Called by the host when the user confirms (with a value for prompts).
+	 * When the dialog carries an `action`, runs it first: on success the dialog
+	 * closes and the promise resolves; on failure the dialog stays open with an
+	 * inline error and the promise does NOT resolve yet.
+	 */
+	async resolve(value: boolean | string | null) {
+		const c = this.current;
+		if (!c) return;
+		const action = c.kind === 'confirm' ? c.opts.action : (c.opts as PromptOptions).action;
+		if (action) {
+			this.busy = true;
+			this.error = null;
+			try {
+				if (c.kind === 'confirm') await (action as () => Promise<void> | void)();
+				else await (action as (v: string) => Promise<void> | void)(value as string);
+			} catch (err) {
+				this.busy = false;
+				this.error = err instanceof Error ? err.message : String(err);
+				return; // keep the dialog open
+			}
+		}
+		if (c.kind === 'confirm') c.resolve(value as boolean);
+		else c.resolve(value as string | null);
+		this.#next();
+	}
+
+	/** Cancel/dismiss the current dialog. */
+	cancel() {
+		const c = this.current;
+		if (!c || this.busy) return;
+		if (c.kind === 'confirm') c.resolve(false);
+		else c.resolve(null);
+		this.#next();
+	}
+}
+
+export const dialogs = new DialogStore();
+
+/** Convenience wrappers. */
+export const confirmDialog = (opts: ConfirmOptions) => dialogs.confirm(opts);
+export const promptDialog = (opts: PromptOptions) => dialogs.prompt(opts);
diff --git a/frontend/src/lib/stores/files.svelte.ts b/frontend/src/lib/stores/files.svelte.ts
index e539da98..1883ded4 100644
--- a/frontend/src/lib/stores/files.svelte.ts
+++ b/frontend/src/lib/stores/files.svelte.ts
@@ -1,12 +1,84 @@
 /**
- * Files view state — replaces the navigation-related fields of the legacy `app`
+ * Files view state — replaces the navigation-related fields of the original `app`
  * state object (currentFolder, currentFolderInfo, breadcrumbPath, view mode,
  * section, selection). Dialog/context-menu targets stay component-local until a
  * view proves they must be shared.
  */
 import type { FolderItem } from '$lib/api/types';
+import { t } from '$lib/i18n/index.svelte';
 
 export type ViewMode = 'grid' | 'list';
+
+// ── Group-by / display helpers ───────────────────────────────────────────────
+// Ported from static/js/core/formatters.js (sizeBucket, normalizeDateBucket,
+// formatRelativeTime) and static/js/components/resourceList.js (type label,
+// owner label). Pure functions, shared by the files view's swimlane grouping
+// and cell rendering so the same bucketing logic isn't duplicated per call site.
+
+/** Normalise an epoch (seconds or ms) into a Date. */
+function toDate(value: number): Date {
+	return new Date(value < 1e12 ? value * 1000 : value);
+}
+
+/** Coarse size bucket label. `bytes < 0` is the "Folders" sentinel. */
+export function sizeBucket(bytes: number): string {
+	if (bytes < 0) return t('sizeBucket.folders', 'Folders');
+	if (bytes === 0) return t('sizeBucket.empty', 'Empty (0 B)');
+	if (bytes < 1_048_576) return t('sizeBucket.tiny', '< 1 MB');
+	if (bytes < 104_857_600) return t('sizeBucket.small', '1 – 100 MB');
+	if (bytes < 1_073_741_824) return t('sizeBucket.medium', '100 MB – 1 GB');
+	if (bytes < 5 * 1_073_741_824) return t('sizeBucket.large', '1 – 5 GB');
+	return t('sizeBucket.huge', '> 5 GB');
+}
+
+/** Coarse date bucket: Today | Last 7 days | Last 30 days | <YYYY>. */
+export function dateBucket(value: number | null | undefined): string {
+	if (!value) return t('dateBucket.unknown', 'Unknown');
+	const diffDays = Math.floor((Date.now() - toDate(value).getTime()) / 86_400_000);
+	if (diffDays <= 0) return t('dateBucket.today', 'Today');
+	if (diffDays <= 7) return t('dateBucket.last7days', 'Last 7 days');
+	if (diffDays <= 30) return t('dateBucket.last30days', 'Last 30 days');
+	return String(toDate(value).getFullYear());
+}
+
+/** Locale-aware relative "time ago" for grid-card metadata lines. */
+export function relativeTimeAgo(value: number | null | undefined): string {
+	if (!value) return '';
+	const date = toDate(value);
+	if (Number.isNaN(date.getTime())) return '';
+	const diffSec = Math.round((date.getTime() - Date.now()) / 1000);
+	const abs = Math.abs(diffSec);
+	const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+	const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+		['year', 31536000],
+		['month', 2592000],
+		['week', 604800],
+		['day', 86400],
+		['hour', 3600],
+		['minute', 60]
+	];
+	for (const [unit, secs] of units) {
+		if (abs >= secs) return rtf.format(Math.round(diffSec / secs), unit);
+	}
+	return rtf.format(diffSec, 'second');
+}
+
+/** Localise a file `category` (e.g. "Image") via files.file_types.* keys. */
+export function typeLabel(category: string | null | undefined): string {
+	if (!category) return t('files.file_types.document', 'Document');
+	return t(`files.file_types.${category.toLowerCase()}`, category);
+}
+
+/** Owner display: "Me" for the current user, else a short id fallback. */
+export function ownerLabel(
+	ownerId: string | null | undefined,
+	currentUserId: string | null
+): string {
+	if (!ownerId) return '';
+	if (currentUserId && ownerId === currentUserId) return t('files.owner_me', 'Me');
+	return ownerId.slice(0, 8);
+}
+
 export type Section =
 	| 'files'
 	| 'shared'
diff --git a/frontend/src/lib/stores/session.svelte.ts b/frontend/src/lib/stores/session.svelte.ts
index 0be554aa..c702c882 100644
--- a/frontend/src/lib/stores/session.svelte.ts
+++ b/frontend/src/lib/stores/session.svelte.ts
@@ -1,7 +1,7 @@
 /**
  * Session store — the authenticated user and derived flags.
  *
- * Replaces the user-related fields of the legacy `app` state object
+ * Replaces the user-related fields of the original `app` state object
  * (isExternalUser, userHomeFolderId/Name). `isExternalUser` drives default
  * routing: externals (magic-link / OIDC-only / OCM recipients) have no home
  * folder and land on the shared-with-me view.
diff --git a/frontend/src/lib/stores/theme.svelte.ts b/frontend/src/lib/stores/theme.svelte.ts
index 93af4c8e..3ec36cb4 100644
--- a/frontend/src/lib/stores/theme.svelte.ts
+++ b/frontend/src/lib/stores/theme.svelte.ts
@@ -1,7 +1,7 @@
 /**
  * Theme store — light / dark / auto.
  *
- * Mirrors the legacy behaviour: persists to the `oxicloud_theme` localStorage
+ * Mirrors the established behaviour: persists to the `oxicloud_theme` localStorage
  * key and reflects the choice on `<html data-color-scheme>`. `auto` removes the
  * attribute so the OS `prefers-color-scheme` takes over. The anti-FOUC inline
  * script in app.html applies the stored value before first paint; this store
diff --git a/frontend/src/lib/stores/ui.svelte.ts b/frontend/src/lib/stores/ui.svelte.ts
index f20c3b19..6e4b619e 100644
--- a/frontend/src/lib/stores/ui.svelte.ts
+++ b/frontend/src/lib/stores/ui.svelte.ts
@@ -1,7 +1,8 @@
 /**
- * Transient UI state — toasts now; cross-component dialog targets are added as
- * the views that need them land (Phases 2–4). Component-local state is preferred;
- * only state that must cross component boundaries belongs here.
+ * Transient UI state — toasts plus the persistent notification feed shown in the
+ * top-bar bell. `notify()` raises a transient toast and records a notification
+ * entry (so uploads, errors and successes accumulate in the bell). Component-local
+ * state is preferred; only state that must cross component boundaries lives here.
  */
 export type ToastKind = 'info' | 'success' | 'error' | 'warning';
 
@@ -11,13 +12,79 @@ export interface Toast {
 	kind: ToastKind;
 }
 
+export interface Notification {
+	id: number;
+	message: string;
+	kind: ToastKind;
+	at: number;
+	read: boolean;
+	/** 0–100 while an operation is in progress; undefined for plain notifications. */
+	progress?: number;
+	/** Optional icon-registry name override (defaults derived from kind). */
+	icon?: string;
+	/** Current per-file label (e.g. the filename being uploaded). */
+	currentFile?: string;
+	/** Files finished so far in the batch (for the "N / M files" counter). */
+	completed?: number;
+	/** Total files in the batch (for the "N / M files" counter). */
+	total?: number;
+}
+
+/** Announce a message to the matching ARIA live region (errors are assertive). */
+function announce(message: string, assertive = false): void {
+	const msg = message.trim();
+	if (!msg || typeof document === 'undefined' || !document.body) return;
+	const id = assertive ? 'a11y-live-assertive' : 'a11y-live-polite';
+	let region = document.getElementById(id);
+	if (!region) {
+		region = document.createElement('div');
+		region.id = id;
+		region.className = 'sr-only';
+		region.setAttribute('aria-live', assertive ? 'assertive' : 'polite');
+		region.setAttribute('aria-atomic', 'true');
+		region.setAttribute('role', assertive ? 'alert' : 'status');
+		document.body.appendChild(region);
+	}
+	// Clear first, then set next frame so repeats register as a change.
+	region.textContent = '';
+	const target = region;
+	if (typeof requestAnimationFrame !== 'undefined') {
+		requestAnimationFrame(() => (target.textContent = msg));
+	} else {
+		target.textContent = msg;
+	}
+}
+
 class UiStore {
 	toasts = $state<Toast[]>([]);
+	notifications = $state<Notification[]>([]);
 	#seq = 0;
 
-	notify(message: string, kind: ToastKind = 'info', timeoutMs = 4000): number {
+	/**
+	 * Bumped to request the bell panel auto-open (e.g. on upload start) and to
+	 * trigger the bell "ring" animation. AppShell watches this token.
+	 */
+	bellPing = $state(0);
+
+	unread = $derived(this.notifications.filter((n) => !n.read).length);
+
+	/** Unread count clamped for the badge — caps at "99+" like the original. */
+	unreadBadge = $derived(this.unread > 99 ? '99+' : String(this.unread));
+
+	/**
+	 * Raise a toast and record a notification. `at` is stamped from the clock at
+	 * call time; pass `record: false` for purely transient messages.
+	 */
+	notify(message: string, kind: ToastKind = 'info', timeoutMs = 4000, record = true): number {
 		const id = ++this.#seq;
 		this.toasts = [...this.toasts, { id, message, kind }];
+		if (record) {
+			this.notifications = [
+				{ id, message, kind, at: Date.now(), read: false },
+				...this.notifications
+			];
+		}
+		announce(message, kind === 'error');
 		if (timeoutMs > 0 && typeof setTimeout !== 'undefined') {
 			setTimeout(() => this.dismiss(id), timeoutMs);
 		}
@@ -27,6 +94,83 @@ class UiStore {
 	dismiss(id: number): void {
 		this.toasts = this.toasts.filter((t) => t.id !== id);
 	}
+
+	/** Request the bell panel to open and play its ring animation. */
+	ringBell(): void {
+		this.bellPing++;
+	}
+
+	/**
+	 * Begin a progress notification (e.g. an upload). Pass `total` to show the
+	 * "N / M files" counter. Opens the bell, rings it, and announces the start.
+	 */
+	startProgress(message: string, icon = 'cloud-upload-alt', total?: number): number {
+		const id = ++this.#seq;
+		this.notifications = [
+			{
+				id,
+				message,
+				kind: 'info',
+				at: Date.now(),
+				read: false,
+				progress: 0,
+				icon,
+				...(total !== undefined ? { total, completed: 0 } : {})
+			},
+			...this.notifications
+		];
+		this.ringBell();
+		announce(message);
+		return id;
+	}
+
+	/** Update the percentage (0–100) of an in-flight progress notification. */
+	updateProgress(
+		id: number,
+		progress: number,
+		message?: string,
+		extra?: { currentFile?: string; completed?: number }
+	): void {
+		this.notifications = this.notifications.map((n) =>
+			n.id === id
+				? {
+						...n,
+						progress,
+						...(message ? { message } : {}),
+						...(extra?.currentFile !== undefined ? { currentFile: extra.currentFile } : {}),
+						...(extra?.completed !== undefined ? { completed: extra.completed } : {})
+					}
+				: n
+		);
+	}
+
+	/** Resolve a progress notification into a final success/error entry. */
+	finishProgress(id: number, message: string, kind: ToastKind = 'success'): void {
+		this.notifications = this.notifications.map((n) =>
+			n.id === id
+				? {
+						...n,
+						message,
+						kind,
+						progress: undefined,
+						currentFile: undefined,
+						at: Date.now()
+					}
+				: n
+		);
+		this.toasts = [...this.toasts, { id: ++this.#seq, message, kind }];
+		announce(message, kind === 'error');
+		const tid = this.#seq;
+		if (typeof setTimeout !== 'undefined') setTimeout(() => this.dismiss(tid), 4000);
+	}
+
+	markNotificationsRead(): void {
+		this.notifications = this.notifications.map((n) => (n.read ? n : { ...n, read: true }));
+	}
+
+	clearNotifications(): void {
+		this.notifications = [];
+	}
 }
 
 export const ui = new UiStore();
diff --git a/frontend/src/lib/styles/app.css b/frontend/src/lib/styles/app.css
index ccdc6a98..7977b103 100644
--- a/frontend/src/lib/styles/app.css
+++ b/frontend/src/lib/styles/app.css
@@ -7,4 +7,4 @@
 @import url('./base/forms.css');
 @import url('./base/animations.css');
 @import url('./base/a11y.css');
-@import url('./legacy.css');
+@import url('./ported.css');
diff --git a/frontend/src/lib/styles/legacy.css b/frontend/src/lib/styles/legacy.css
deleted file mode 100644
index bf290228..00000000
--- a/frontend/src/lib/styles/legacy.css
+++ /dev/null
@@ -1,13 +0,0 @@
-/* Vendored layout/component CSS ported verbatim from the original static/css.
- * These are token-based and global; the Svelte components emit the same class
- * names and DOM so the new app matches the original look. Kept byte-faithful
- * (linters ignore this dir) — restyle via tokens in variables.css, not here. */
-@import url('./legacy/sidebar.css');
-@import url('./legacy/topbar.css');
-@import url('./legacy/content.css');
-@import url('./legacy/buttons.css');
-@import url('./legacy/breadcrumb.css');
-@import url('./legacy/fileManager.css');
-@import url('./legacy/resourceList.css');
-@import url('./legacy/skeleton.css');
-@import url('./legacy/auth.css');
diff --git a/frontend/src/lib/styles/ported.css b/frontend/src/lib/styles/ported.css
new file mode 100644
index 00000000..aa39d1b7
--- /dev/null
+++ b/frontend/src/lib/styles/ported.css
@@ -0,0 +1,18 @@
+/* Layout/component CSS ported verbatim from the OxiCloud frontend's static/css.
+ * These are token-based and global; the Svelte components emit the same class
+ * names and DOM so the rewrite matches the established design. Kept byte-faithful
+ * (linters ignore this dir) — restyle via tokens in variables.css, not here. */
+@import url('./ported/sidebar.css');
+@import url('./ported/topbar.css');
+@import url('./ported/content.css');
+@import url('./ported/buttons.css');
+@import url('./ported/uploadDropdown.css');
+@import url('./ported/breadcrumb.css');
+@import url('./ported/fileManager.css');
+@import url('./ported/resourceList.css');
+@import url('./ported/batchToolbar.css');
+@import url('./ported/skeleton.css');
+@import url('./ported/notifications.css');
+@import url('./ported/userMenu.css');
+@import url('./ported/auth.css');
+@import url('./ported/music.css');
diff --git a/frontend/src/lib/styles/legacy/auth.css b/frontend/src/lib/styles/ported/auth.css
similarity index 100%
rename from frontend/src/lib/styles/legacy/auth.css
rename to frontend/src/lib/styles/ported/auth.css
diff --git a/frontend/src/lib/styles/ported/batchToolbar.css b/frontend/src/lib/styles/ported/batchToolbar.css
new file mode 100644
index 00000000..1f56c462
--- /dev/null
+++ b/frontend/src/lib/styles/ported/batchToolbar.css
@@ -0,0 +1,101 @@
+/* Multi-Select – batch action toolbar
+ * Per-item checkbox styles (.file-item .checkbox-cell, .list-header.selection-mode)
+ * live in resourceList.css alongside the item renderer. */
+
+.batch-selection-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    min-width: 0;
+}
+
+.batch-selection-bar {
+    display: flex;
+    align-items: center;
+    background: var(--color-multiselect-bg);
+    color: var(--color-multiselect-text);
+    padding: var(--space-2-5) var(--space-5);
+    border-radius: var(--radius-2xl);
+    overflow: hidden;
+    margin-right: var(--space-3);
+    height: 60px;
+    transform: translateY(-8px);
+    transition:
+        opacity 0.2s,
+        max-height 0.25s,
+        transform 0.2s,
+        margin 0.2s,
+        padding 0.2s;
+    pointer-events: auto;
+}
+
+.batch-bar-close {
+    background: none;
+    border: none;
+    color: var(--color-multiselect-text-faint);
+    cursor: pointer;
+    font-size: var(--text-base);
+    padding: var(--space-1) var(--space-1-5);
+    border-radius: var(--radius-md);
+    transition:
+        background 0.15s,
+        color 0.15s;
+}
+
+.batch-bar-close:hover {
+    background: var(--color-multiselect-hover-bg);
+    color: var(--color-multiselect-text);
+}
+
+.batch-bar-count {
+    font-size: var(--text-base);
+    font-weight: var(--weight-semibold);
+    white-space: nowrap;
+}
+
+.batch-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1-5);
+}
+
+.batch-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5);
+    padding: 7px var(--space-3-5);
+    border: none;
+    border-radius: var(--radius-lg);
+    background: var(--color-multiselect-hover-bg);
+    color: var(--color-multiselect-action-text);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    cursor: pointer;
+    transition: background 0.15s;
+    white-space: nowrap;
+}
+
+.batch-btn:hover {
+    background: var(--color-multiselect-action-hover);
+}
+
+.batch-btn-danger {
+    background: var(--color-multiselect-danger-bg);
+    color: var(--color-multiselect-danger-text);
+}
+
+.batch-btn-danger:hover {
+    background: var(--color-multiselect-danger-active);
+    color: var(--color-multiselect-danger-text-active);
+}
+
+@media (max-width: 640px) {
+    .batch-btn span {
+        display: none;
+    }
+
+    .batch-btn {
+        padding: 7px var(--space-2-5);
+    }
+}
diff --git a/frontend/src/lib/styles/legacy/breadcrumb.css b/frontend/src/lib/styles/ported/breadcrumb.css
similarity index 100%
rename from frontend/src/lib/styles/legacy/breadcrumb.css
rename to frontend/src/lib/styles/ported/breadcrumb.css
diff --git a/frontend/src/lib/styles/legacy/buttons.css b/frontend/src/lib/styles/ported/buttons.css
similarity index 100%
rename from frontend/src/lib/styles/legacy/buttons.css
rename to frontend/src/lib/styles/ported/buttons.css
diff --git a/frontend/src/lib/styles/legacy/content.css b/frontend/src/lib/styles/ported/content.css
similarity index 100%
rename from frontend/src/lib/styles/legacy/content.css
rename to frontend/src/lib/styles/ported/content.css
diff --git a/frontend/src/lib/styles/legacy/fileManager.css b/frontend/src/lib/styles/ported/fileManager.css
similarity index 100%
rename from frontend/src/lib/styles/legacy/fileManager.css
rename to frontend/src/lib/styles/ported/fileManager.css
diff --git a/frontend/src/lib/styles/ported/music.css b/frontend/src/lib/styles/ported/music.css
new file mode 100644
index 00000000..4a7e1420
--- /dev/null
+++ b/frontend/src/lib/styles/ported/music.css
@@ -0,0 +1,1435 @@
+/* Music library view — ported from static/css/views/music.css.
+ * Font Awesome `<i>` icons are emitted as `<svg class="oxi-icon">` by Icon.svelte,
+ * so the icon selectors target `.oxi-icon` instead of (or alongside) `i`. */
+
+/* The Svelte page is always mounted on its own route, so the `display:none`
+   show/hide toggle from the old SPA is not needed; the container is shown. */
+.music-container {
+    padding: 0;
+}
+
+/* ========= Full-width empty state (zero playlists) ========== */
+.music-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--space-20) var(--space-10);
+    min-height: calc(100dvh - 260px);
+}
+
+.music-empty-state-icon {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    background: var(--color-music-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--space-6);
+    box-shadow: 0 8px 32px var(--color-shadow-2xl);
+}
+
+.music-empty-state-icon i,
+.music-empty-state-icon .oxi-icon {
+    font-size: var(--text-5xl);
+    color: var(--color-danger-text);
+}
+
+.music-empty-state-title {
+    margin: 0 0 var(--space-2);
+    font-size: var(--text-xl);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text);
+}
+
+.music-empty-state-desc {
+    margin: 0 0 var(--space-7);
+    font-size: var(--text-base);
+    color: var(--color-text-muted);
+    max-width: 360px;
+    line-height: var(--leading-normal);
+}
+
+/* ========= Toolbar (when playlists exist) ========== */
+.music-toolbar {
+    display: none;
+}
+
+.music-content {
+    display: flex;
+    gap: 0;
+    height: calc(100dvh - 200px);
+    min-height: 400px;
+    transition: height 0.3s ease;
+}
+
+.music-player-active .music-content {
+    height: calc(100dvh - 290px);
+}
+
+.music-sidebar {
+    width: 280px;
+    min-width: 280px;
+    border-right: 1px solid var(--color-border);
+    display: flex;
+    flex-direction: column;
+    background: var(--color-bg-surface);
+}
+
+.music-sidebar-header {
+    padding: var(--space-3-5) var(--space-4);
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.music-sidebar-header h3 {
+    margin: 0;
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.music-sidebar-add-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-md);
+    border: none;
+    background: var(--color-accent-gradient);
+    color: var(--color-danger-text);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+        transform 0.15s,
+        box-shadow 0.15s;
+    box-shadow: 0 2px 8px var(--color-accent-shadow);
+}
+
+.music-sidebar-add-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px var(--color-accent-shadow);
+}
+
+.music-playlist-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-2);
+}
+
+.music-playlist-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2-5) var(--space-3);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.music-playlist-item:hover {
+    background: var(--color-bg-hover);
+}
+
+.music-playlist-item.active {
+    background: var(--color-bg-alt);
+}
+
+.music-playlist-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-lg);
+    background: var(--color-music-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-danger-text);
+    font-size: var(--text-base);
+    flex-shrink: 0;
+}
+
+.music-playlist-item-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.music-playlist-item-name {
+    display: block;
+    font-weight: var(--weight-medium);
+    color: var(--color-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.music-playlist-item-count {
+    display: block;
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+}
+
+.music-main {
+    flex: 1;
+    padding: var(--space-6);
+    overflow-y: auto;
+}
+
+.music-welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: var(--color-text-secondary);
+}
+
+.music-welcome i,
+.music-welcome .oxi-icon {
+    font-size: 64px;
+    margin-bottom: var(--space-5);
+    color: var(--color-text-muted);
+}
+
+.music-welcome h3 {
+    margin: 0 0 var(--space-2);
+    font-size: var(--text-xl);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text);
+}
+
+.music-welcome p {
+    margin: 0;
+    font-size: var(--text-base);
+}
+
+.music-playlist-detail {
+    max-width: 900px;
+}
+
+.music-playlist-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    margin-bottom: var(--space-6);
+}
+
+.music-playlist-cover {
+    width: 140px;
+    height: 140px;
+    min-width: 140px;
+    border-radius: var(--radius-2xl);
+    background: var(--color-music-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-danger-text);
+    font-size: var(--text-6xl);
+    box-shadow: 0 8px 24px var(--color-shadow-3xl);
+}
+
+.music-playlist-info {
+    flex: 1;
+}
+
+.music-playlist-info h2 {
+    margin: 0 0 var(--space-2);
+    font-size: var(--text-3xl);
+    font-weight: var(--weight-bold);
+    color: var(--color-text);
+}
+
+.music-playlist-info p {
+    margin: 0;
+    font-size: var(--text-base);
+    color: var(--color-text-secondary);
+}
+
+.music-playlist-actions {
+    display: flex;
+    gap: var(--space-2);
+    margin-bottom: var(--space-6);
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.music-playlist-actions .btn {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-sm);
+    border-radius: var(--radius-lg);
+}
+
+.music-playlist-actions .btn i,
+.music-playlist-actions .btn .oxi-icon {
+    font-size: var(--text-sm);
+}
+
+/* Icon-only action buttons (no text label) */
+.music-playlist-actions .btn:not(:has(span)) {
+    padding: var(--space-2) var(--space-3);
+    min-width: 36px;
+    justify-content: center;
+}
+
+.music-track-list {
+    background: var(--color-item);
+    border-radius: var(--radius-2xl);
+    overflow: hidden;
+}
+
+.music-track-header {
+    display: flex;
+    align-items: center;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.music-track {
+    display: flex;
+    align-items: center;
+    padding: var(--space-2-5) var(--space-4);
+    border-bottom: 1px solid var(--color-border);
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.music-track:last-child {
+    border-bottom: none;
+}
+
+.music-track:hover {
+    background: var(--color-item-hover);
+}
+
+.music-track.selected {
+    background: var(--color-item-selected);
+}
+
+.music-track-col {
+    padding: 0 var(--space-2);
+}
+
+.music-track-num {
+    width: 40px;
+    text-align: center;
+    color: var(--color-text-secondary);
+    font-size: var(--text-base);
+}
+
+.music-track-title {
+    flex: 2;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-width: 0;
+}
+
+.music-track-icon {
+    color: var(--color-text-secondary);
+    font-size: var(--text-base);
+}
+
+.music-track-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: var(--weight-medium);
+    color: var(--color-text);
+}
+
+.music-track-artist {
+    flex: 1;
+    color: var(--color-text-secondary);
+    font-size: var(--text-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.music-track-album {
+    flex: 1;
+    color: var(--color-text-secondary);
+    font-size: var(--text-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.music-track-duration {
+    width: 60px;
+    text-align: right;
+    color: var(--color-text-secondary);
+    font-size: var(--text-base);
+    font-variant-numeric: tabular-nums;
+}
+
+.music-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px var(--space-5);
+    text-align: center;
+    color: var(--color-text-secondary);
+}
+
+.music-empty i,
+.music-empty .oxi-icon {
+    font-size: var(--text-6xl);
+    margin-bottom: var(--space-4);
+    color: var(--color-text-muted);
+}
+
+.music-empty p {
+    margin: 0;
+    font-size: var(--text-base);
+}
+
+.music-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-10);
+    color: var(--color-text-secondary);
+    font-size: var(--text-base);
+    gap: var(--space-2);
+}
+
+.music-loading i,
+.music-loading .oxi-icon {
+    animation: spin 1s linear infinite;
+}
+
+.music-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-10);
+    text-align: center;
+    color: var(--color-error-text);
+}
+
+.music-error i,
+.music-error .oxi-icon {
+    font-size: var(--text-6xl);
+    margin-bottom: var(--space-4);
+}
+
+.music-error p {
+    margin: 0;
+    font-size: var(--text-base);
+}
+
+/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
+
+/* Responsive */
+@media (max-width: 768px) {
+    .music-content {
+        flex-direction: column;
+        height: auto;
+    }
+
+    .music-sidebar {
+        width: 100%;
+        min-width: 100%;
+        border-right: none;
+        border-bottom: 1px solid var(--color-border);
+        max-height: 200px;
+    }
+
+    .music-playlist-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .music-playlist-cover {
+        width: 120px;
+        height: 120px;
+        font-size: var(--text-4xl);
+    }
+
+    .music-playlist-info h2 {
+        font-size: var(--text-xl);
+    }
+
+    .music-track-album {
+        display: none;
+    }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   MUSIC PLAYER
+   ═══════════════════════════════════════════════════════════════ */
+
+.music-player {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 90px;
+    background: var(--color-music-background);
+    border-top: 1px solid var(--color-border);
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-4);
+    gap: var(--space-4);
+    z-index: 1000;
+    box-shadow: 0 -4px 20px var(--color-shadow);
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+}
+
+.music-player.has-track {
+    transform: translateY(0);
+}
+
+.music-player.hidden {
+    display: none;
+}
+
+/* Track Info */
+.player-track-info {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-width: 180px;
+    max-width: 240px;
+}
+
+.player-album-art {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--radius-lg);
+    background: var(--color-music-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-danger-text);
+    font-size: var(--text-xl);
+    flex-shrink: 0;
+    overflow: hidden;
+}
+
+.player-album-art img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+}
+
+.player-track-details {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.player-track-name {
+    font-weight: var(--weight-medium);
+    color: var(--color-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+}
+
+.player-track-artist {
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+}
+
+/* Player Controls */
+.player-controls {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    max-width: 600px;
+}
+
+.player-buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.player-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--space-2);
+    border-radius: 50%;
+    color: var(--color-text-secondary);
+    font-size: var(--text-md);
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.player-btn:hover {
+    color: var(--color-text);
+    background: var(--color-bg-hover);
+}
+
+.player-btn.active {
+    color: var(--color-text);
+}
+
+.player-btn-main {
+    background: var(--color-text);
+    color: var(--color-danger-text) !important;
+    font-size: 21px;
+}
+
+.player-btn-main:hover {
+    background: var(--color-text-dark);
+    transform: scale(1.05);
+}
+
+.player-btn-small {
+    padding: var(--space-1-5);
+    font-size: var(--text-base);
+}
+
+/* Progress Bar */
+.player-progress {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+}
+
+.player-time {
+    font-size: var(--text-2xs);
+    color: var(--color-text-secondary);
+    font-variant-numeric: tabular-nums;
+    min-width: 40px;
+}
+
+.player-time-current {
+    text-align: right;
+}
+
+.player-time-total {
+    text-align: left;
+}
+
+.player-progress-bar {
+    flex: 1;
+    height: 4px;
+    background: var(--color-border);
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+    position: relative;
+    overflow: visible;
+}
+
+.player-progress-fill {
+    height: 100%;
+    background: var(--color-text);
+    border-radius: var(--radius-xs);
+    transition: width 0.1s linear;
+    width: 0;
+}
+
+.player-progress-handle {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    background: var(--color-text);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    box-shadow: 0 2px 4px var(--color-shadow-xl);
+}
+
+.player-progress-bar:hover .player-progress-handle {
+    opacity: 1;
+}
+
+.player-progress-bar:hover .player-progress-fill {
+    height: 6px;
+    margin-top: -1px;
+}
+
+/* The Svelte port uses a native range input for the seek bar; style it to
+   match the slim progress-bar look of the old custom bar. */
+.player-progress-range {
+    flex: 1;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--color-border);
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+}
+
+.player-progress-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    background: var(--color-text);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.player-progress-range::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    background: var(--color-text);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+}
+
+/* Volume Controls */
+.player-extra {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 160px;
+    justify-content: flex-end;
+}
+
+.player-close-btn {
+    opacity: 0.5;
+    transition: opacity 0.15s ease;
+    margin-left: var(--space-1);
+}
+
+.player-close-btn:hover {
+    opacity: 1;
+}
+
+.player-volume-slider {
+    width: 80px;
+    display: flex;
+    align-items: center;
+}
+
+#player-volume-input {
+    width: 100%;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--color-border);
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+}
+
+#player-volume-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    background: var(--color-text);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+#player-volume-input::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    background: var(--color-text);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+}
+
+/* Queue Panel */
+.player-queue {
+    position: fixed;
+    bottom: 100px;
+    right: 16px;
+    width: 320px;
+    max-height: 400px;
+    background: var(--color-music-background);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-2xl);
+    box-shadow: 0 8px 30px var(--color-shadow-md);
+    display: flex;
+    flex-direction: column;
+    z-index: 1001;
+    overflow: hidden;
+}
+
+.player-queue::after {
+    content: "";
+    position: absolute;
+    bottom: -8px;
+    right: 60px;
+    width: 14px;
+    height: 14px;
+    background: var(--color-music-background);
+    border-right: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    transform: rotate(45deg);
+    z-index: -1;
+}
+
+.player-queue.hidden {
+    display: none;
+}
+
+.player-queue-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.player-queue-header h3 {
+    margin: 0;
+    font-size: var(--text-base);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text);
+}
+
+.player-queue-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-2);
+}
+
+.player-queue-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.player-queue-item:hover {
+    background: var(--color-bg-hover);
+}
+
+.player-queue-item.active {
+    background: var(--color-bg-alt);
+}
+
+.queue-item-num {
+    width: 20px;
+    text-align: center;
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+}
+
+.player-queue-item.active .queue-item-num {
+    color: var(--color-text);
+    font-weight: var(--weight-semibold);
+}
+
+.queue-item-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.queue-item-name {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    color: var(--color-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.queue-item-artist {
+    font-size: var(--text-2xs);
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.queue-item-duration {
+    font-size: var(--text-2xs);
+    color: var(--color-text-secondary);
+}
+
+.queue-item-remove {
+    background: none;
+    border: none;
+    padding: var(--space-1);
+    cursor: pointer;
+    color: var(--color-text-secondary);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.player-queue-item:hover .queue-item-remove {
+    opacity: 1;
+}
+
+.queue-item-remove:hover {
+    color: var(--color-error-text);
+}
+
+.player-queue-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-10) var(--space-5);
+    text-align: center;
+    color: var(--color-text-secondary);
+}
+
+.player-queue-empty i,
+.player-queue-empty .oxi-icon {
+    font-size: var(--text-4xl);
+    margin-bottom: var(--space-3);
+    color: var(--color-text-muted);
+}
+
+/* Track playing indicator */
+.music-track.playing {
+    background: var(--color-item-active);
+}
+
+.music-track.playing.selected {
+    background: var(--color-item-selected);
+}
+
+.music-track.playing .music-track-name {
+    color: var(--color-text);
+}
+
+.track-num-text.hidden {
+    display: none;
+}
+
+.track-play-icon {
+    display: none;
+    color: var(--color-text);
+}
+
+/* Repeat one icon */
+.player-btn.repeat-one i,
+.player-btn.repeat-one .oxi-icon {
+    position: relative;
+}
+
+.player-btn.repeat-one i::after,
+.player-btn.repeat-one .oxi-icon::after {
+    content: "1";
+    font-size: 8px;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+/* Repeat-one numeral badge (Svelte port renders the "1" as a sibling span). */
+.player-btn .repeat-one-badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    font-size: 8px;
+    font-weight: var(--weight-bold);
+    line-height: 1;
+}
+
+.player-btn {
+    position: relative;
+}
+
+/* Mobile player adjustments */
+@media (max-width: 768px) {
+    .music-player {
+        height: 70px;
+        padding: 0 var(--space-2);
+        gap: var(--space-2);
+    }
+
+    .music-player-active .music-content {
+        height: calc(100dvh - 270px);
+    }
+
+    .player-track-info {
+        min-width: auto;
+        max-width: 120px;
+    }
+
+    .player-album-art {
+        width: 44px;
+        height: 44px;
+        font-size: var(--text-md);
+    }
+
+    .player-track-name {
+        max-width: 70px;
+        font-size: var(--text-xs);
+    }
+
+    .player-track-artist {
+        max-width: 70px;
+        font-size: 10px;
+    }
+
+    .player-controls {
+        max-width: none;
+    }
+
+    .player-buttons {
+        gap: var(--space-1);
+    }
+
+    .player-btn {
+        padding: var(--space-1-5);
+        font-size: var(--text-base);
+    }
+
+    .player-btn-main {
+        width: 36px;
+        height: 36px;
+        font-size: var(--text-md);
+    }
+
+    .player-extra {
+        min-width: auto;
+    }
+
+    .player-volume-slider {
+        display: none;
+    }
+
+    .player-queue {
+        right: 8px;
+        left: 8px;
+        width: auto;
+    }
+}
+
+/* ========== Drag handle column ========== */
+.music-track-drag {
+    width: 28px;
+    flex: 0 0 28px;
+    cursor: grab;
+    color: var(--color-text-secondary);
+    opacity: 0;
+    transition: opacity 0.15s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.music-track-header .music-track-drag {
+    cursor: default;
+}
+.music-track:hover .music-track-drag {
+    opacity: 0.6;
+}
+.music-track-drag:active {
+    cursor: grabbing;
+}
+.music-track.dragging {
+    opacity: 0.35;
+    background: var(--color-bg-hover);
+}
+.music-track.drag-over {
+    border-top: 2px solid var(--color-accent-hover);
+    margin-top: -2px;
+}
+
+/* ========== Track actions column ========== */
+.music-track-actions {
+    width: 36px;
+    flex: 0 0 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.music-track-remove-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    padding: var(--space-1) var(--space-1-5);
+    border-radius: var(--radius-sm);
+    opacity: 0;
+    transition:
+        opacity 0.15s,
+        color 0.15s;
+    font-size: 0.85rem;
+}
+.music-track:hover .music-track-remove-btn {
+    opacity: 1;
+}
+.music-track-remove-btn:hover {
+    color: var(--color-danger-text);
+    background: var(--color-danger-bg);
+}
+
+/* ========== Cover art ========== */
+.music-playlist-cover {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+.music-cover-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+}
+.music-cover-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-shadow-4xl);
+    color: var(--color-danger-text);
+    font-size: 1.1rem;
+    opacity: 0;
+    transition: opacity 0.2s;
+    border-radius: inherit;
+}
+.music-playlist-cover:hover .music-cover-overlay {
+    opacity: 1;
+}
+
+/* ========== Public badge ========== */
+.music-public-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-0-5) var(--space-2);
+    font-size: 0.72rem;
+    background: var(--color-music-public-bg);
+    color: var(--color-text);
+    border-radius: var(--radius-2xl);
+    margin-top: var(--space-1);
+}
+.music-public-badge.hidden {
+    display: none;
+}
+#music-toggle-public-btn.active {
+    color: var(--color-text);
+    background: var(--color-item-active);
+}
+
+/* ========== Shares management dialog ========== */
+.music-shares-overlay {
+    position: fixed;
+    inset: 0;
+    background: var(--color-shadow-4xl);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+}
+.music-shares-panel {
+    background: var(--color-music-background);
+    border-radius: var(--radius-2xl);
+    width: 420px;
+    max-width: 90vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px var(--color-shadow-md);
+}
+.music-shares-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3-5) var(--space-5);
+    border-bottom: 1px solid var(--color-border);
+}
+.music-shares-header h3 {
+    margin: 0;
+    font-size: 0.95rem;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+.music-shares-close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text-secondary);
+    padding: var(--space-1);
+    font-size: var(--text-md);
+}
+.music-shares-close-btn:hover {
+    color: var(--color-text);
+}
+.music-shares-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-3) var(--space-5);
+    min-height: 60px;
+}
+.music-shares-loading {
+    text-align: center;
+    padding: var(--space-5);
+    color: var(--color-text-secondary);
+}
+.music-shares-empty {
+    text-align: center;
+    color: var(--color-text-secondary);
+    padding: var(--space-4) 0;
+    margin: 0;
+}
+.music-share-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2-5);
+    padding: var(--space-2) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+.music-share-item:last-child {
+    border-bottom: none;
+}
+.music-share-user {
+    flex: 1;
+    font-size: 0.88rem;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1-5);
+}
+.music-share-perm {
+    font-size: 0.78rem;
+    color: var(--color-text-secondary);
+}
+.music-share-remove-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text-secondary);
+    padding: var(--space-1);
+    transition: color 0.15s;
+}
+.music-share-remove-btn:hover {
+    color: var(--color-danger-text);
+}
+.music-shares-add {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-5);
+    border-top: 1px solid var(--color-border);
+    flex-wrap: wrap;
+}
+.music-shares-input {
+    flex: 1;
+    min-width: 120px;
+    padding: var(--space-1-5) var(--space-2-5);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    font-size: 0.88rem;
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+}
+.music-shares-input:focus {
+    outline: none;
+    /* Harmonised with every other text input: accent border + accent ring
+       (was a faint border-only change — weaker and off-palette). */
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 3px var(--color-accent-ring);
+}
+.music-shares-write-label {
+    font-size: 0.78rem;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+}
+
+/* ═══════════════ Audio file picker modal ═══════════════ */
+
+.music-picker-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-shadow-4xl);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+.music-picker-overlay.active {
+    opacity: 1;
+}
+
+.music-picker-modal {
+    display: flex;
+    flex-direction: column;
+    width: min(560px, 94vw);
+    max-height: min(620px, 85vh);
+    background: var(--color-music-background);
+    border-radius: var(--radius-2xl);
+    box-shadow: 0 12px 40px var(--color-shadow-xl);
+    overflow: hidden;
+    transform: translateY(12px);
+    transition: transform 0.2s ease;
+}
+.music-picker-overlay.active .music-picker-modal {
+    transform: translateY(0);
+}
+
+/* ── header ── */
+.music-picker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-4) var(--space-5);
+    border-bottom: 1px solid var(--color-border);
+}
+.music-picker-header h3 {
+    margin: 0;
+    font-size: var(--text-md);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text);
+}
+.music-picker-header h3 i,
+.music-picker-header h3 .oxi-icon {
+    margin-right: var(--space-2);
+    color: var(--color-primary);
+}
+.music-picker-close {
+    background: none;
+    border: none;
+    font-size: 22px;
+    cursor: pointer;
+    color: var(--color-text-muted);
+    padding: 0 var(--space-1);
+    line-height: var(--leading-none);
+}
+.music-picker-close:hover {
+    color: var(--color-text);
+}
+
+/* ── search bar ── */
+.music-picker-search {
+    position: relative;
+    padding: var(--space-3) var(--space-5);
+    border-bottom: 1px solid var(--color-border);
+}
+.music-picker-search i,
+.music-picker-search > .oxi-icon {
+    position: absolute;
+    left: 32px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-text-muted);
+    font-size: var(--text-sm);
+}
+.music-picker-search input {
+    width: 100%;
+    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    outline: none;
+}
+.music-picker-search input:focus {
+    border-color: var(--color-accent);
+}
+
+/* ── file list ── */
+.music-picker-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-1) 0;
+    min-height: 200px;
+}
+.music-picker-loading,
+.music-picker-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-10) var(--space-5);
+    color: var(--color-text-muted);
+    font-size: var(--text-sm);
+}
+
+.music-picker-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2-5);
+    padding: var(--space-2) var(--space-5);
+    cursor: pointer;
+    transition: background 0.1s;
+    font-size: var(--text-sm);
+    color: var(--color-text);
+}
+.music-picker-item:hover {
+    background: var(--color-item-hover);
+}
+.music-picker-item.selected {
+    background: var(--color-item-selected);
+}
+
+.music-picker-item input[type="checkbox"] {
+    accent-color: var(--color-primary);
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+.music-picker-item i.fa-file-audio,
+.music-picker-item .oxi-icon {
+    color: var(--color-primary);
+    font-size: var(--text-base);
+    flex-shrink: 0;
+}
+.music-picker-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.music-picker-size {
+    flex-shrink: 0;
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+/* ── footer ── */
+.music-picker-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3) var(--space-5);
+    border-top: 1px solid var(--color-border);
+}
+.music-picker-selected-count {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    font-weight: var(--weight-medium);
+}
+.music-picker-actions {
+    display: flex;
+    gap: var(--space-2);
+}
diff --git a/frontend/src/lib/styles/ported/notifications.css b/frontend/src/lib/styles/ported/notifications.css
new file mode 100644
index 00000000..ba165898
--- /dev/null
+++ b/frontend/src/lib/styles/ported/notifications.css
@@ -0,0 +1,371 @@
+/* Notification */
+.notification {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+    background-color: var(--color-notification-bg);
+    width: 250px;
+    border-radius: var(--radius-lg);
+    box-shadow: 0 5px 15px var(--color-shadow);
+    padding: 15px;
+    border-left: 4px solid var(--color-accent);
+    z-index: 1000;
+    display: none;
+
+    [dir="rtl"] & {
+        left: 20px;
+        border-right: 4px solid var(--color-accent);
+        right: unset;
+        border-left: unset;
+    }
+}
+
+.notification-title {
+    font-weight: var(--weight-bold);
+    font-size: var(--text-base);
+    margin-bottom: 5px;
+    color: var(--color-text);
+}
+
+.notification-message {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+/* Notification banner */
+.notification-banner {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 15px var(--space-5);
+    background-color: var(--color-notification-bg);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 4px 12px var(--color-shadow);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 400px;
+    z-index: 2000;
+    transform: translateY(-100px);
+    opacity: 0;
+    transition:
+        transform 0.3s,
+        opacity 0.3s;
+}
+
+.notification-banner.active {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.notification-banner.success {
+    border-left: 4px solid var(--color-success-border);
+}
+
+.notification-banner.error {
+    border-left: 4px solid var(--color-danger-bg);
+}
+
+.close-notification-btn {
+    background: none;
+    border: none;
+    font-size: var(--text-lg);
+    cursor: pointer;
+    color: var(--color-text-placeholder);
+    margin-left: var(--space-2-5);
+}
+
+/* Notification Bell */
+.notif-wrapper {
+    position: relative;
+}
+
+.notif-bell-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: var(--text-lg);
+    color: var(--color-text-subtle);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.notif-bell-btn:hover {
+    background: var(--color-accent-bg-sm);
+    color: var(--color-accent);
+}
+
+.notif-bell-btn.active {
+    color: var(--color-accent);
+    background: var(--color-accent-ring);
+}
+
+.notif-badge {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    min-width: 16px;
+    height: 16px;
+    line-height: 16px;
+    border-radius: var(--radius-lg);
+    background: var(--color-notification-badge);
+    color: var(--color-notification-bg);
+    font-size: 10px;
+    font-weight: var(--weight-bold);
+    text-align: center;
+    padding: 0 var(--space-1);
+    pointer-events: none;
+}
+
+@keyframes bellRing {
+    0%,
+    100% {
+        transform: rotate(0deg);
+    }
+    13% {
+        transform: rotate(22deg);
+    }
+    26% {
+        transform: rotate(-22deg);
+    }
+    39% {
+        transform: rotate(14deg);
+    }
+    52% {
+        transform: rotate(-14deg);
+    }
+    65% {
+        transform: rotate(8deg);
+    }
+    78% {
+        transform: rotate(-8deg);
+    }
+    91% {
+        transform: rotate(3deg);
+    }
+}
+
+.notif-bell-btn.ring {
+    animation: bellRing 1s ease;
+}
+
+.notif-panel {
+    display: none;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: -40px;
+    width: 380px;
+    max-height: 480px;
+    background: var(--color-notification-bg);
+    border-radius: var(--radius-3xl);
+    box-shadow:
+        0 12px 40px var(--color-shadow-md),
+        0 0 0 1px var(--color-shadow-xs);
+    z-index: 2000;
+    overflow: hidden;
+    animation: notifPanelIn 0.2s ease-out;
+}
+
+.notif-wrapper.open .notif-panel {
+    display: flex;
+    flex-direction: column;
+}
+
+@keyframes notifPanelIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.notif-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3-5) var(--space-4);
+    border-bottom: 1px solid var(--color-border-xfaint);
+}
+
+.notif-panel-title {
+    font-weight: var(--weight-semibold);
+    font-size: 15px;
+    color: var(--color-text-heading);
+}
+
+.notif-clear-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text-faint);
+    font-size: var(--text-base);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-md);
+    transition: all 0.15s;
+}
+
+.notif-clear-btn:hover {
+    color: var(--color-accent);
+    background: var(--color-accent-bg-sm);
+}
+
+.notif-panel-body {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 400px;
+    /* Thin, neutral scrollbar — replaces the heavy global accent bar that read
+       as amateur in the panel. */
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border-medium) transparent;
+}
+
+.notif-panel-body::-webkit-scrollbar {
+    width: 6px;
+}
+
+.notif-panel-body::-webkit-scrollbar-thumb {
+    background: var(--color-border-medium);
+    border-radius: var(--radius-full);
+}
+
+.notif-panel-body::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.notif-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-10) var(--space-5);
+    color: var(--color-text-faint);
+    gap: var(--space-2);
+}
+
+.notif-empty i {
+    font-size: var(--text-3xl);
+    opacity: 0.5;
+}
+
+.notif-empty span {
+    font-size: var(--text-base);
+}
+
+.notif-item {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--space-3) var(--space-4);
+    gap: var(--space-3);
+    border-bottom: 1px solid var(--color-bg-subtle);
+    transition: background 0.15s;
+    cursor: default;
+}
+
+.notif-item:last-child {
+    border-bottom: none;
+}
+
+.notif-item:hover {
+    background: var(--color-bg-hover);
+}
+
+.notif-item-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: var(--text-base);
+}
+
+.notif-item-icon.upload {
+    background: var(--color-accent-ring);
+    color: var(--color-accent);
+}
+
+.notif-item-icon.success {
+    background: var(--color-success-ring);
+    color: var(--color-notification-success);
+}
+
+.notif-item-icon.error {
+    background: var(--color-notification-error-ring);
+    color: var(--color-notification-error);
+}
+
+.notif-item-body {
+    flex: 1;
+    min-width: 0;
+}
+
+.notif-item-title {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text-heading);
+    margin-bottom: var(--space-0-5);
+}
+
+.notif-item-text {
+    font-size: var(--text-xs);
+    color: var(--color-text-subtle);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.notif-item-time {
+    font-size: var(--text-2xs);
+    color: var(--color-text-faint);
+    margin-top: 3px;
+}
+
+.notif-upload-progress {
+    margin-top: var(--space-1-5);
+}
+
+.notif-upload-bar {
+    height: 3px;
+    background: var(--color-bg-empty);
+    border-radius: var(--radius-xs);
+    overflow: hidden;
+}
+
+.notif-upload-fill {
+    height: 100%;
+    background: var(--color-accent);
+    width: 0%;
+    transition: width 0.2s ease;
+    border-radius: var(--radius-xs);
+}
+
+.notif-upload-fill.done {
+    background: var(--color-notification-success);
+}
+
+.notif-upload-fill.error {
+    background: var(--color-notification-error);
+}
+
+.notif-upload-detail {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 3px;
+}
+
+.notif-upload-pct,
+.notif-upload-stats {
+    font-size: var(--text-2xs);
+    color: var(--color-text-faint);
+}
diff --git a/frontend/src/lib/styles/legacy/resourceList.css b/frontend/src/lib/styles/ported/resourceList.css
similarity index 97%
rename from frontend/src/lib/styles/legacy/resourceList.css
rename to frontend/src/lib/styles/ported/resourceList.css
index dc374a65..8418f4f8 100644
--- a/frontend/src/lib/styles/legacy/resourceList.css
+++ b/frontend/src/lib/styles/ported/resourceList.css
@@ -392,6 +392,12 @@
     text-align: right;
 }
 
+/* List rows expose the individual action buttons inline (on hover), so the
+   corner kebab is redundant here — it's the grid view's affordance. */
+.files-list-view .file-item .action-cell .file-actions {
+    display: none;
+}
+
 /* Styles for the built-in action-cell buttons (favorite-star, kebab).
  * `.btn-action` is excluded — it owns its own colors via the generic
  * `.btn-action` rule + variant modifiers (e.g. `.btn-action--delete`). */
@@ -639,6 +645,20 @@
 }
 
 /* More actions button (three dots) — top-right of the thumbnail on a scrim. */
+/* Grid cards surface actions through the corner kebab (.file-actions) + the
+   favorite star, both absolutely positioned below. The inline per-row action
+   buttons (share/move/rename/delete) belong to the list view only — hide them
+   here so they don't stack up along the bottom edge of the card. */
+.files-grid-view .file-item .action-cell .btn-action {
+    display: none;
+}
+
+/* The favorite state is already shown by the corner star button, so the inline
+   name-cell favorite badge is redundant on grid cards. */
+.files-grid-view .file-item .name-cell .item-badge {
+    display: none;
+}
+
 .files-grid-view .file-item .file-actions {
     position: absolute;
     top: calc(var(--space-3) + 8px);
diff --git a/frontend/src/lib/styles/legacy/sidebar.css b/frontend/src/lib/styles/ported/sidebar.css
similarity index 100%
rename from frontend/src/lib/styles/legacy/sidebar.css
rename to frontend/src/lib/styles/ported/sidebar.css
diff --git a/frontend/src/lib/styles/legacy/skeleton.css b/frontend/src/lib/styles/ported/skeleton.css
similarity index 100%
rename from frontend/src/lib/styles/legacy/skeleton.css
rename to frontend/src/lib/styles/ported/skeleton.css
diff --git a/frontend/src/lib/styles/legacy/topbar.css b/frontend/src/lib/styles/ported/topbar.css
similarity index 100%
rename from frontend/src/lib/styles/legacy/topbar.css
rename to frontend/src/lib/styles/ported/topbar.css
diff --git a/frontend/src/lib/styles/ported/uploadDropdown.css b/frontend/src/lib/styles/ported/uploadDropdown.css
new file mode 100644
index 00000000..c75db668
--- /dev/null
+++ b/frontend/src/lib/styles/ported/uploadDropdown.css
@@ -0,0 +1,78 @@
+/* Upload Dropdown — ported from static/css/components/uploadDropdown.css.
+ * Font Awesome `<i>` icons are emitted as `<svg class="oxi-icon">` by Icon.svelte,
+ * so the icon selectors target `.oxi-icon` instead of `i`. */
+.upload-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.upload-dropdown .btn-primary {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1-5);
+}
+
+.upload-dropdown-menu {
+    display: block;
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    min-width: 200px;
+    background: var(--color-bg-surface);
+    border-radius: var(--radius-2xl);
+    box-shadow: 0 8px 30px var(--color-shadow-md);
+    border: 1px solid var(--color-border);
+    z-index: 1000;
+    overflow: hidden;
+    animation: dropdownFadeIn 0.15s ease-out;
+}
+
+@keyframes dropdownFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.upload-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    width: 100%;
+    padding: var(--space-3) var(--space-4);
+    border: none;
+    background: none;
+    color: var(--color-text-dark);
+    font-size: var(--text-base);
+    cursor: pointer;
+    transition: background 0.15s ease;
+    text-align: left;
+}
+
+.upload-dropdown-item:hover {
+    background: var(--color-border-light);
+}
+
+.upload-dropdown-item:active {
+    background: var(--color-border);
+}
+
+.upload-dropdown-item .oxi-icon {
+    width: 20px;
+    text-align: center;
+    color: var(--color-text-subtle);
+    font-size: 15px;
+}
+
+.upload-dropdown-item:first-child {
+    border-bottom: 1px solid var(--color-border-light);
+}
+
+.upload-caret {
+    margin-left: var(--space-1);
+    font-size: var(--text-xs);
+}
diff --git a/frontend/src/lib/styles/ported/userMenu.css b/frontend/src/lib/styles/ported/userMenu.css
new file mode 100644
index 00000000..6f1bd2d8
--- /dev/null
+++ b/frontend/src/lib/styles/ported/userMenu.css
@@ -0,0 +1,294 @@
+/* User Menu */
+.user-menu-wrapper {
+    position: relative;
+}
+
+.user-avatar-btn {
+    background: none;
+    border: none;
+    border-radius: 50%;
+    padding: 0;
+    cursor: pointer;
+    transition: transform var(--motion-base) var(--ease-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Premium hover: ONE soft accent ring hugging the avatar + a gentle warm glow
+   + a subtle pop — replaces the old heavy double halo (button border ring with
+   a gap + a second avatar ring). */
+.user-avatar-btn:hover {
+    transform: scale(1.05);
+}
+
+.user-avatar-btn:hover .user-vignette__avatar {
+    box-shadow:
+        0 0 0 3px var(--color-accent-ring),
+        0 3px 12px -2px var(--color-accent-shadow);
+}
+
+/* Menu open: a slightly firmer ring (same clean single-ring language). */
+.user-menu-wrapper.open .user-avatar-btn .user-vignette__avatar {
+    box-shadow: 0 0 0 3px var(--color-accent-ring-strong);
+}
+
+/* ── Avatar vignette overrides ────────────────────────────────────────────── */
+
+/* The toolbar button and dropdown header mount avatar-only userVignette
+   components.  Sizing is owned by userVignette.css (--menu / --xl variants);
+   the rules below add the decoration that is specific to this context. */
+
+.user-avatar-btn .user-vignette__avatar {
+    letter-spacing: 0.5px;
+    user-select: none;
+    /* Animate the ring/glow smoothly in AND out (transition on the base, not
+       :hover). */
+    transition: box-shadow var(--motion-base) var(--ease-standard);
+}
+
+.user-menu-header .user-vignette__avatar {
+    letter-spacing: 0.5px;
+    box-shadow: 0 4px 12px var(--color-accent-shadow);
+}
+
+.user-menu {
+    display: none;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    left: auto;
+    width: 300px;
+    background: var(--color-bg-surface);
+    border-radius: var(--radius-3xl);
+    box-shadow:
+        0 12px 40px var(--color-shadow-md),
+        0 0 0 1px var(--color-shadow-xs);
+    z-index: 2000;
+    overflow: hidden;
+    animation: userMenuIn 0.2s ease-out;
+}
+
+.user-menu-wrapper.open .user-menu {
+    display: block;
+}
+
+[dir="rtl"] .user-menu {
+    right: auto;
+    left: 0;
+}
+
+@keyframes userMenuIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.user-menu-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3-5);
+    padding: var(--space-5) var(--space-5) var(--space-4);
+    background: var(--color-user-menu-header-bg);
+    border-bottom: 1px solid var(--color-user-menu-header-border);
+}
+
+/* The header vignette (xl, name + email) fills the available width. */
+.user-menu-header .user-vignette {
+    flex: 1;
+    min-width: 0;
+}
+
+/* Increase name prominence relative to the base vignette style. */
+.user-menu-header .user-vignette__name {
+    font-size: 15px;
+    font-weight: var(--weight-semibold);
+    color: var(--color-text-heading);
+}
+
+.user-menu-header .user-vignette__email {
+    font-size: 12.5px;
+    margin-top: 1px;
+}
+
+.user-menu-storage {
+    padding: var(--space-3-5) var(--space-5);
+}
+
+.user-menu-storage-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text-subtle);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: var(--space-2);
+}
+
+.user-menu-storage-label i {
+    font-size: var(--text-2xs);
+    color: var(--color-text-faint);
+}
+
+.user-menu-storage-bar {
+    height: 6px;
+    background: var(--color-border-light);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: var(--space-1-5);
+}
+
+.user-menu-storage-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-second));
+    border-radius: 3px;
+    width: 0%;
+    transition: width 0.5s ease;
+}
+
+.user-menu-storage-text {
+    font-size: 11.5px;
+    color: var(--color-text-faint);
+}
+
+.user-menu-divider {
+    height: 1px;
+    background: var(--color-border-light);
+    margin: var(--space-1) 0;
+}
+
+.user-menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    width: 100%;
+    padding: var(--space-3) var(--space-5);
+    border: none;
+    background: none;
+    color: var(--color-text-dark);
+    font-size: var(--text-base);
+    cursor: pointer;
+    transition: background 0.15s ease;
+    text-align: left;
+}
+
+.user-menu-item:hover,
+.user-menu-item:focus-visible {
+    background: var(--color-bg-hover);
+}
+
+.user-menu-item i {
+    width: 20px;
+    text-align: center;
+    font-size: 15px;
+    color: var(--color-text-subtle);
+}
+
+/* The appearance row is a plain container, not a button — the inner
+ * segmented control captures the clicks. Match the height of other
+ * .user-menu-item rows so the row reads as part of the same list. */
+.user-menu-item--theme {
+    cursor: default;
+}
+
+.user-menu-item--theme:hover {
+    background: transparent;
+}
+
+/* Light / Like OS / Dark — three-option pill, active option highlighted
+ * with the accent colour. Sits at the right edge of the row. */
+.theme-segmented {
+    margin-left: auto;
+    display: inline-flex;
+    background: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    padding: var(--space-0-5);
+    gap: var(--space-0-5);
+}
+
+.theme-segmented__opt {
+    width: 28px;
+    height: 22px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--color-text-subtle);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    font-size: var(--text-2xs);
+    padding: 0;
+    transition:
+        background 0.15s ease,
+        color 0.15s ease;
+}
+
+.theme-segmented__opt:hover {
+    color: var(--color-text);
+}
+
+.theme-segmented__opt--active {
+    background: var(--color-accent);
+    color: var(--color-danger-text);
+}
+
+.theme-segmented__opt--active:hover {
+    color: var(--color-danger-text);
+}
+
+.user-menu-admin {
+    color: var(--color-primary);
+}
+
+.user-menu-admin i {
+    color: var(--color-info-blue);
+}
+
+.user-menu-admin:hover {
+    background: var(--color-info-bg-alt);
+}
+
+.user-menu-role-badge {
+    padding: 0 var(--space-5) var(--space-1);
+}
+
+.role-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--text-2xs);
+    font-weight: var(--weight-semibold);
+    padding: var(--space-0-5) var(--space-2-5);
+    border-radius: var(--radius-xl);
+}
+
+.role-badge-admin {
+    background: var(--color-info-surface);
+    color: var(--color-primary);
+}
+
+.role-badge i {
+    font-size: 10px;
+}
+
+.user-menu-logout {
+    color: var(--color-danger-alt);
+    margin-bottom: var(--space-1);
+}
+
+.user-menu-logout i {
+    color: var(--color-danger-alt);
+}
+
+.user-menu-logout:hover {
+    background: var(--color-danger-lighter);
+}
diff --git a/frontend/src/lib/utils/display.ts b/frontend/src/lib/utils/display.ts
index a8ee89a8..8c6b6b2a 100644
--- a/frontend/src/lib/utils/display.ts
+++ b/frontend/src/lib/utils/display.ts
@@ -1,7 +1,7 @@
 /** Display helpers shared across list views. */
 
 /**
- * Map a legacy `icon_class` (e.g. "fas fa-folder", "fa-file-pdf") to an icon
+ * Map an `icon_class` (e.g. "fas fa-folder", "fa-file-pdf") to an icon
  * registry name (the FA token without the `fa-` prefix).
  */
 export function iconNameFromClass(iconClass: string | undefined | null): string {
diff --git a/frontend/src/lib/utils/hashRedirect.test.ts b/frontend/src/lib/utils/hashRedirect.test.ts
new file mode 100644
index 00000000..5d1d1789
--- /dev/null
+++ b/frontend/src/lib/utils/hashRedirect.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { hashUrlToPath } from './hashRedirect';
+
+describe('hashUrlToPath', () => {
+	it('maps root and files', () => {
+		expect(hashUrlToPath('#/')).toBe('/files');
+		expect(hashUrlToPath('#/files')).toBe('/files');
+	});
+
+	it('maps folder deep links to the new path', () => {
+		expect(hashUrlToPath('#/files/folder/abc')).toBe('/files/abc');
+		expect(hashUrlToPath('#/files/folder/abc/def')).toBe('/files/abc/def');
+	});
+
+	it('maps the named sections', () => {
+		expect(hashUrlToPath('#/shared')).toBe('/shared');
+		expect(hashUrlToPath('#/sharedwithme')).toBe('/shared-with-me');
+		expect(hashUrlToPath('#/recent')).toBe('/recent');
+		expect(hashUrlToPath('#/favorites')).toBe('/favorites');
+		expect(hashUrlToPath('#/trash')).toBe('/trash');
+		expect(hashUrlToPath('#/photos')).toBe('/photos');
+		expect(hashUrlToPath('#/music')).toBe('/music');
+	});
+
+	it('ignores query strings in the hash', () => {
+		expect(hashUrlToPath('#/recent?foo=bar')).toBe('/recent');
+	});
+
+	it('returns null for non-legacy or unknown hashes', () => {
+		expect(hashUrlToPath('')).toBeNull();
+		expect(hashUrlToPath('#section')).toBeNull();
+		expect(hashUrlToPath('#/unknown')).toBeNull();
+	});
+});
diff --git a/frontend/src/lib/utils/legacyHash.ts b/frontend/src/lib/utils/hashRedirect.ts
similarity index 71%
rename from frontend/src/lib/utils/legacyHash.ts
rename to frontend/src/lib/utils/hashRedirect.ts
index beef751b..5ff7de22 100644
--- a/frontend/src/lib/utils/legacyHash.ts
+++ b/frontend/src/lib/utils/hashRedirect.ts
@@ -1,10 +1,10 @@
 /**
- * Translate a legacy hash route (`#/...` from the vanilla app) into the new
- * SvelteKit path, so old bookmarks and external links keep working.
+ * Translate an old hash route (`#/...` from the vanilla frontend) into the new
+ * SvelteKit path, so existing bookmarks and external links keep working.
  *
- * Returns the new pathname, or null when the hash isn't a legacy route.
+ * Returns the new pathname, or null when the hash isn't a recognised route.
  */
-export function legacyHashToPath(hash: string): string | null {
+export function hashUrlToPath(hash: string): string | null {
 	if (!hash.startsWith('#/')) return null;
 	const raw = hash.slice(1); // drop the '#'
 	const [pathPart] = raw.split('?');
diff --git a/frontend/src/lib/utils/imageResize.ts b/frontend/src/lib/utils/imageResize.ts
new file mode 100644
index 00000000..fc7776e5
--- /dev/null
+++ b/frontend/src/lib/utils/imageResize.ts
@@ -0,0 +1,38 @@
+/**
+ * Downscale an image File to a data URI for avatar upload. Ported from the
+ * original utils/imageResize.js: never upscales, caps the longest edge at
+ * `maxDim`, prefers WebP with a JPEG fallback.
+ */
+function readAsDataUrl(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const fr = new FileReader();
+		fr.onload = () => resolve(fr.result as string);
+		fr.onerror = () => reject(fr.error);
+		fr.readAsDataURL(file);
+	});
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		img.onload = () => resolve(img);
+		img.onerror = () => reject(new Error('image load failed'));
+		img.src = src;
+	});
+}
+
+export async function resizeImageToDataUrl(file: File, maxDim = 512): Promise<string> {
+	const dataUrl = await readAsDataUrl(file);
+	const img = await loadImage(dataUrl);
+	const scale = Math.min(1, maxDim / Math.max(img.width, img.height));
+	const w = Math.round(img.width * scale);
+	const h = Math.round(img.height * scale);
+	const canvas = document.createElement('canvas');
+	canvas.width = w;
+	canvas.height = h;
+	const ctx = canvas.getContext('2d');
+	if (!ctx) return dataUrl;
+	ctx.drawImage(img, 0, 0, w, h);
+	const webp = canvas.toDataURL('image/webp', 0.85);
+	return webp.startsWith('data:image/webp') ? webp : canvas.toDataURL('image/jpeg', 0.85);
+}
diff --git a/frontend/src/lib/utils/legacyHash.test.ts b/frontend/src/lib/utils/legacyHash.test.ts
deleted file mode 100644
index 8477d7a5..00000000
--- a/frontend/src/lib/utils/legacyHash.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { legacyHashToPath } from './legacyHash';
-
-describe('legacyHashToPath', () => {
-	it('maps root and files', () => {
-		expect(legacyHashToPath('#/')).toBe('/files');
-		expect(legacyHashToPath('#/files')).toBe('/files');
-	});
-
-	it('maps folder deep links to the new path', () => {
-		expect(legacyHashToPath('#/files/folder/abc')).toBe('/files/abc');
-		expect(legacyHashToPath('#/files/folder/abc/def')).toBe('/files/abc/def');
-	});
-
-	it('maps the named sections', () => {
-		expect(legacyHashToPath('#/shared')).toBe('/shared');
-		expect(legacyHashToPath('#/sharedwithme')).toBe('/shared-with-me');
-		expect(legacyHashToPath('#/recent')).toBe('/recent');
-		expect(legacyHashToPath('#/favorites')).toBe('/favorites');
-		expect(legacyHashToPath('#/trash')).toBe('/trash');
-		expect(legacyHashToPath('#/photos')).toBe('/photos');
-		expect(legacyHashToPath('#/music')).toBe('/music');
-	});
-
-	it('ignores query strings in the hash', () => {
-		expect(legacyHashToPath('#/recent?foo=bar')).toBe('/recent');
-	});
-
-	it('returns null for non-legacy or unknown hashes', () => {
-		expect(legacyHashToPath('')).toBeNull();
-		expect(legacyHashToPath('#section')).toBeNull();
-		expect(legacyHashToPath('#/unknown')).toBeNull();
-	});
-});
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index a7dd86d8..7f037227 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,9 +4,10 @@
 	import { onMount } from 'svelte';
 	import '$lib/styles/app.css';
 	import AppShell from '$lib/components/AppShell.svelte';
+	import DialogHost from '$lib/components/DialogHost.svelte';
 	import Toaster from '$lib/components/Toaster.svelte';
 	import { session } from '$lib/stores/session.svelte';
-	import { legacyHashToPath } from '$lib/utils/legacyHash';
+	import { hashUrlToPath } from '$lib/utils/hashRedirect';
 
 	let { children } = $props();
 
@@ -20,9 +21,9 @@
 	let ready = $state(false);
 
 	onMount(async () => {
-		// Redirect legacy `#/...` bookmarks to the new path before anything else.
+		// Redirect old `#/...` bookmarks to the new path before anything else.
 		if (typeof location !== 'undefined' && location.hash.startsWith('#/')) {
-			const mapped = legacyHashToPath(location.hash);
+			const mapped = hashUrlToPath(location.hash);
 			if (mapped) await goto(mapped, { replaceState: true });
 		}
 		await session.load();
@@ -51,6 +52,7 @@
 {/if}
 
 <Toaster />
+<DialogHost />
 
 <style>
 	.app-loading {
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 8edc1b7a..164a06a7 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -1,27 +1,570 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import {
+		clearPluginLogs,
 		createUser,
 		deletePlugin,
 		deleteUser,
+		getDashboard,
+		getMigration,
+		getOidcSettings,
+		getPluginLogs,
+		getPluginRetention,
+		getSmtpInfo,
+		getStorageSettings,
+		installPlugin,
 		listPlugins,
 		listUsers,
+		migrationAction,
 		resetUserPassword,
+		saveOidc,
+		savePluginRetention,
+		saveStorage,
+		sendSmtpTest,
 		setPluginEnabled,
+		setRegistrationEnabled,
 		setUserActive,
 		setUserQuota,
 		setUserRole,
-		type PluginInfo
+		testOidc,
+		testStorage,
+		verifyMigration,
+		type AdminDashboard,
+		type MigrationStatus,
+		type MigrationVerifyResult,
+		type OidcSettings,
+		type OidcTestResult,
+		type PluginInfo,
+		type PluginLogEntry,
+		type PluginRetention,
+		type SmtpInfo,
+		type SmtpTestResult,
+		type StorageSettings,
+		type StorageTestResult
 	} from '$lib/api/endpoints/admin';
 	import type { User } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import { t } from '$lib/i18n/index.svelte';
+	import { session } from '$lib/stores/session.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
 	import { formatBytes } from '$lib/utils/format';
 
 	const PAGE_SIZE = 25;
+	const LOGS_PAGE_SIZE = 50;
 
-	let tab = $state<'users' | 'plugins'>('users');
+	/** The signed-in admin's id — used to disable destructive actions on self. */
+	const currentAdminId = $derived(session.user?.id ?? '');
+
+	/**
+	 * Render an ISO timestamp as a coarse relative time ("3 min ago"). Ported
+	 * from formatRelativeTime in static/js/core/formatters.js; an empty/missing
+	 * value reads as "Never" (matching the OLD admin user table).
+	 */
+	function timeAgo(dateStr?: string | null): string {
+		if (!dateStr) return t('admin.never', 'Never');
+		const then = new Date(dateStr).getTime();
+		if (!Number.isFinite(then)) return t('admin.never', 'Never');
+		const secs = Math.round((Date.now() - then) / 1000);
+		if (secs < 60) return t('admin.time_just_now', 'just now');
+		const mins = Math.round(secs / 60);
+		if (mins < 60) return t('admin.time_min_ago', { n: mins }, '{{n}} min ago');
+		const hours = Math.round(mins / 60);
+		if (hours < 24) return t('admin.time_hour_ago', { n: hours }, '{{n}} h ago');
+		const days = Math.round(hours / 24);
+		if (days < 30) return t('admin.time_day_ago', { n: days }, '{{n}} d ago');
+		return new Date(dateStr).toLocaleDateString();
+	}
+
+	/** Quota unit options (bytes per unit) for the quota/create modals. */
+	const QUOTA_UNITS = [
+		{ value: 1024 ** 2, label: 'MB' },
+		{ value: 1024 ** 3, label: 'GB' },
+		{ value: 1024 ** 4, label: 'TB' }
+	] as const;
+
+	/* ── Styled confirm modal (replaces native confirm) ── */
+	let confirmState = $state<{ message: string; resolve: (ok: boolean) => void } | null>(null);
+	function showConfirm(message: string): Promise<boolean> {
+		return new Promise((resolve) => {
+			confirmState = { message, resolve };
+		});
+	}
+	function resolveConfirm(ok: boolean) {
+		confirmState?.resolve(ok);
+		confirmState = null;
+	}
+
+	type Tab = 'dashboard' | 'users' | 'plugins' | 'oidc' | 'storage' | 'smtp';
+	let tab = $state<Tab>('dashboard');
+
+	// Dashboard
+	let dashboard = $state<AdminDashboard | null>(null);
+	let dashboardError = $state<string | null>(null);
+
+	// SMTP
+	let smtp = $state<SmtpInfo | null>(null);
+	let smtpTo = $state('');
+	let smtpResult = $state<SmtpTestResult | null>(null);
+	let smtpSending = $state(false);
+
+	async function loadDashboard() {
+		dashboardError = null;
+		try {
+			dashboard = await getDashboard();
+		} catch (e) {
+			dashboardError = e instanceof Error ? e.message : String(e);
+		}
+	}
+
+	async function toggleRegistration(enabled: boolean) {
+		try {
+			await setRegistrationEnabled(enabled);
+			if (dashboard) dashboard.registration_enabled = enabled;
+		} catch (e) {
+			reportError(e);
+			await loadDashboard();
+		}
+	}
+
+	async function loadSmtp() {
+		try {
+			smtp = await getSmtpInfo();
+		} catch (e) {
+			reportError(e);
+		}
+	}
+
+	async function runSmtpTest() {
+		if (!smtpTo.trim()) return;
+		smtpSending = true;
+		smtpResult = null;
+		try {
+			smtpResult = await sendSmtpTest(smtpTo.trim());
+		} catch (e) {
+			smtpResult = { success: false, message: e instanceof Error ? e.message : String(e) };
+		} finally {
+			smtpSending = false;
+		}
+	}
+
+	// OIDC
+	let oidc = $state<(OidcSettings & { client_secret?: string }) | null>(null);
+	let oidcTest = $state<OidcTestResult | null>(null);
+	let oidcMsg = $state<{ text: string; ok: boolean } | null>(null);
+	let oidcSaving = $state(false);
+
+	async function loadOidc() {
+		try {
+			oidc = await getOidcSettings();
+		} catch (e) {
+			oidcMsg = { text: e instanceof Error ? e.message : String(e), ok: false };
+		}
+	}
+	async function runOidcTest() {
+		if (!oidc?.issuer_url) return;
+		oidcTest = await testOidc(oidc.issuer_url);
+		if (oidcTest.success && oidcTest.provider_name_suggestion && !oidc.provider_name) {
+			oidc.provider_name = oidcTest.provider_name_suggestion;
+		}
+	}
+	async function doSaveOidc() {
+		if (!oidc) return;
+		oidcSaving = true;
+		oidcMsg = null;
+		try {
+			await saveOidc({
+				enabled: oidc.enabled,
+				issuer_url: oidc.issuer_url.trim(),
+				client_id: oidc.client_id.trim(),
+				client_secret: oidc.client_secret || null,
+				scopes: oidc.scopes || null,
+				auto_provision: oidc.auto_provision,
+				admin_groups: oidc.admin_groups || null,
+				disable_password_login: oidc.disable_password_login,
+				provider_name: oidc.provider_name || null
+			});
+			oidcMsg = { text: t('admin.settings_saved_ok', 'Settings saved.'), ok: true };
+		} catch (e) {
+			oidcMsg = { text: e instanceof Error ? e.message : String(e), ok: false };
+		} finally {
+			oidcSaving = false;
+		}
+	}
+
+	// Storage
+	const STORAGE_PRESETS: Record<string, { endpoint: string; region: string; pathStyle: boolean }> =
+		{
+			custom: { endpoint: '', region: '', pathStyle: false },
+			aws: { endpoint: '', region: 'us-east-1', pathStyle: false },
+			backblaze: {
+				endpoint: 'https://s3.{region}.backblazeb2.com',
+				region: 'us-west-004',
+				pathStyle: false
+			},
+			'cloudflare-r2': {
+				endpoint: 'https://{accountId}.r2.cloudflarestorage.com',
+				region: 'auto',
+				pathStyle: true
+			},
+			minio: { endpoint: 'http://localhost:9000', region: 'us-east-1', pathStyle: true },
+			digitalocean: {
+				endpoint: 'https://{region}.digitaloceanspaces.com',
+				region: 'nyc3',
+				pathStyle: false
+			},
+			wasabi: {
+				endpoint: 'https://s3.{region}.wasabisys.com',
+				region: 'us-east-1',
+				pathStyle: false
+			}
+		};
+	let storage = $state<StorageSettings | null>(null);
+	let sForm = $state({
+		backend: 'local',
+		preset: 'custom',
+		endpoint: '',
+		bucket: '',
+		region: '',
+		accessKey: '',
+		secretKey: '',
+		pathStyle: false
+	});
+	let storageMsg = $state<{ text: string; ok: boolean } | null>(null);
+	let storageBusy = $state(false);
+
+	async function loadStorage() {
+		try {
+			storage = await getStorageSettings();
+			sForm = {
+				backend: storage.backend ?? 'local',
+				preset: 'custom',
+				endpoint: storage.s3_endpoint_url ?? '',
+				bucket: storage.s3_bucket ?? '',
+				region: storage.s3_region ?? '',
+				accessKey: '',
+				secretKey: '',
+				pathStyle: storage.s3_force_path_style ?? false
+			};
+		} catch (e) {
+			storageMsg = { text: e instanceof Error ? e.message : String(e), ok: false };
+		}
+	}
+	function applyPreset() {
+		const p = STORAGE_PRESETS[sForm.preset];
+		if (!p) return;
+		if (p.endpoint) sForm.endpoint = p.endpoint;
+		if (p.region) sForm.region = p.region;
+		sForm.pathStyle = p.pathStyle;
+	}
+	function storageBody() {
+		return {
+			backend: sForm.backend,
+			s3_endpoint_url: sForm.endpoint.trim() || null,
+			s3_bucket: sForm.bucket.trim() || null,
+			s3_region: sForm.region.trim() || null,
+			s3_access_key: sForm.accessKey || null,
+			s3_secret_key: sForm.secretKey || null,
+			s3_force_path_style: sForm.pathStyle
+		};
+	}
+	async function doSaveStorage() {
+		storageBusy = true;
+		storageMsg = null;
+		try {
+			await saveStorage(storageBody());
+			storageMsg = { text: t('admin.storage_saved', 'Storage settings saved.'), ok: true };
+			await loadStorage();
+		} catch (e) {
+			storageMsg = { text: e instanceof Error ? e.message : String(e), ok: false };
+		} finally {
+			storageBusy = false;
+		}
+	}
+	async function doTestStorage() {
+		storageBusy = true;
+		storageMsg = null;
+		try {
+			const r: StorageTestResult = await testStorage(storageBody());
+			const ok = r.connected ?? r.success ?? false;
+			if (ok) {
+				let text = t('admin.storage_test_success', 'Connection successful');
+				if (r.backend_type) text += ` (${r.backend_type})`;
+				if (r.available_bytes != null)
+					text += ` — ${formatBytes(r.available_bytes)} ${t('admin.available', 'available')}`;
+				storageMsg = { text, ok: true };
+			} else {
+				storageMsg = {
+					text: `${t('admin.storage_test_failure', 'Connection failed')}: ${r.message ?? ''}`,
+					ok: false
+				};
+			}
+		} catch (e) {
+			storageMsg = { text: e instanceof Error ? e.message : String(e), ok: false };
+		} finally {
+			storageBusy = false;
+		}
+	}
+
+	// Migration
+	let migration = $state<MigrationStatus | null>(null);
+	let migrationTimer: ReturnType<typeof setInterval> | null = null;
+
+	function stopMigrationPoll() {
+		if (migrationTimer) {
+			clearInterval(migrationTimer);
+			migrationTimer = null;
+		}
+	}
+	async function loadMigration() {
+		try {
+			migration = await getMigration();
+			if (migration.status === 'running') {
+				if (!migrationTimer) migrationTimer = setInterval(loadMigration, 2000);
+			} else {
+				stopMigrationPoll();
+			}
+		} catch {
+			stopMigrationPoll();
+		}
+	}
+	async function doMigration(action: 'start' | 'pause' | 'resume' | 'complete') {
+		try {
+			await migrationAction(action);
+			await loadMigration();
+		} catch (e) {
+			reportError(e);
+		}
+	}
+
+	// Migration integrity verification (separate result panel).
+	let verifyResult = $state<MigrationVerifyResult | null>(null);
+	let verifyError = $state<string | null>(null);
+	let verifying = $state(false);
+	async function doVerify() {
+		verifying = true;
+		verifyResult = null;
+		verifyError = null;
+		try {
+			verifyResult = await verifyMigration(100);
+		} catch (e) {
+			verifyError = e instanceof Error ? e.message : String(e);
+		} finally {
+			verifying = false;
+		}
+	}
+	const migrationPct = $derived(
+		migration && migration.total_blobs > 0
+			? Math.round((migration.migrated_blobs / migration.total_blobs) * 100)
+			: 0
+	);
+	/** Estimated minutes remaining, derived from throughput + average blob size. */
+	const migrationEtaMin = $derived.by(() => {
+		const m = migration;
+		if (!m || m.status !== 'running' || !m.throughput_bytes_per_sec) return null;
+		const remaining = m.total_blobs - m.migrated_blobs;
+		if (remaining <= 0 || m.migrated_blobs <= 0) return null;
+		const avgBlobSize = m.migrated_bytes / m.migrated_blobs;
+		const etaSecs = (remaining * avgBlobSize) / m.throughput_bytes_per_sec;
+		return Math.ceil(etaSecs / 60);
+	});
+
+	// Plugin logs
+	let logsPlugin = $state<PluginInfo | null>(null);
+	let logs = $state<PluginLogEntry[]>([]);
+	let logsLevel = $state('');
+	let logsSearch = $state('');
+	let logsLoading = $state(false);
+	let logsPage = $state(0);
+	let logsTotal = $state(0);
+	let logsLive = $state(true);
+	let logStream: EventSource | null = null;
+
+	/** Best-effort message text across the persisted (`msg`) and legacy shapes. */
+	function logMsg(e: PluginLogEntry): string {
+		return e.msg ?? e.message ?? '';
+	}
+	/** Kind column: outcome entries surface their reason, others read "log". */
+	function logKind(e: PluginLogEntry): string {
+		return e.kind === 'outcome' ? (e.reason ?? 'outcome') : 'log';
+	}
+
+	function stopLogStream() {
+		if (logStream) {
+			logStream.close();
+			logStream = null;
+		}
+	}
+
+	/** Open the SSE live tail for the current plugin (no-op when Live is off). */
+	function startLogStream() {
+		stopLogStream();
+		if (!logsPlugin || !logsLive) return;
+		const es = new EventSource(
+			`/api/admin/plugins/${encodeURIComponent(logsPlugin.id)}/logs/stream`,
+			{ withCredentials: true }
+		);
+		es.onmessage = (ev) => {
+			try {
+				onLiveLogEntry(JSON.parse(ev.data) as PluginLogEntry);
+			} catch {
+				/* ignore malformed frames */
+			}
+		};
+		// Fell behind the broadcast buffer — resync from the server.
+		es.addEventListener('lagged', () => void loadLogs());
+		logStream = es;
+	}
+
+	/**
+	 * Prepend a streamed entry, but only on the newest page and when it passes
+	 * the active filter — so the live tail never fights pagination.
+	 */
+	function onLiveLogEntry(entry: PluginLogEntry) {
+		if (logsPage !== 0) return;
+		if (logsLevel && (entry.level ?? '').toLowerCase() !== logsLevel.toLowerCase()) return;
+		if (logsSearch && !logMsg(entry).toLowerCase().includes(logsSearch.toLowerCase())) return;
+		logs = [entry, ...logs].slice(0, LOGS_PAGE_SIZE);
+		logsTotal += 1;
+	}
+
+	function toggleLive() {
+		if (logsLive) startLogStream();
+		else stopLogStream();
+	}
+
+	function logsPrev() {
+		if (logsPage > 0) {
+			logsPage--;
+			void loadLogs();
+		}
+	}
+	function logsNext() {
+		if ((logsPage + 1) * LOGS_PAGE_SIZE < logsTotal) {
+			logsPage++;
+			void loadLogs();
+		}
+	}
+
+	// Plugin detail (metadata + retention) — opened alongside logs
+	let retention = $state<PluginRetention | null>(null);
+	let retentionDays = $state(0);
+	let retentionMb = $state(0);
+	let retentionMsg = $state<string | null>(null);
+
+	async function openLogs(p: PluginInfo) {
+		logsPlugin = p;
+		retention = null;
+		retentionMsg = null;
+		logsPage = 0;
+		logsLevel = '';
+		logsSearch = '';
+		await Promise.all([loadLogs(), loadRetention(p.id)]);
+		startLogStream();
+	}
+
+	function closeLogs() {
+		stopLogStream();
+		logsPlugin = null;
+		logs = [];
+		logsTotal = 0;
+		logsPage = 0;
+	}
+
+	/** Reset to the first page (filter changed) then reload. */
+	function reloadLogsFromStart() {
+		logsPage = 0;
+		void loadLogs();
+	}
+	async function loadRetention(id: string) {
+		try {
+			retention = await getPluginRetention(id);
+			if (retention) {
+				retentionDays = retention.retention_days;
+				retentionMb = Math.round(retention.max_bytes / (1024 * 1024));
+			}
+		} catch {
+			/* retention is optional — leave unset on error */
+		}
+	}
+	async function saveRetention() {
+		if (!logsPlugin) return;
+		retentionMsg = null;
+		if (
+			!Number.isFinite(retentionDays) ||
+			retentionDays < 0 ||
+			!Number.isFinite(retentionMb) ||
+			retentionMb < 0
+		) {
+			retentionMsg = t('admin.plugins_retention_invalid', 'Enter non-negative numbers.');
+			return;
+		}
+		try {
+			await savePluginRetention(logsPlugin.id, {
+				retention_days: Math.round(retentionDays),
+				max_bytes: Math.round(retentionMb) * 1024 * 1024
+			});
+			retentionMsg = t('admin.plugins_retention_saved', 'Retention saved.');
+		} catch (e) {
+			retentionMsg = e instanceof Error ? e.message : String(e);
+		}
+	}
+	async function purgeLogs() {
+		if (!logsPlugin) return;
+		if (
+			!(await showConfirm(t('admin.plugins_logs_confirm_clear', 'Clear all logs for this plugin?')))
+		)
+			return;
+		try {
+			await clearPluginLogs(logsPlugin.id);
+			logsPage = 0;
+			await loadLogs();
+		} catch (e) {
+			reportError(e);
+		}
+	}
+
+	// Plugin install (.zip upload)
+	let installing = $state(false);
+	let installMsg = $state<{ ok: boolean; text: string } | null>(null);
+
+	async function onInstallPlugin(e: Event) {
+		const input = e.currentTarget as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+		installing = true;
+		installMsg = null;
+		try {
+			const info = await installPlugin(file);
+			installMsg = {
+				ok: true,
+				text: t('admin.plugins_installed', { name: info.name }, `Installed ${info.name}.`)
+			};
+			await loadPlugins();
+		} catch (err) {
+			installMsg = { ok: false, text: err instanceof Error ? err.message : String(err) };
+		} finally {
+			installing = false;
+			input.value = '';
+		}
+	}
+	async function loadLogs() {
+		if (!logsPlugin) return;
+		logsLoading = true;
+		try {
+			const page = await getPluginLogs(logsPlugin.id, {
+				level: logsLevel,
+				search: logsSearch,
+				limit: LOGS_PAGE_SIZE,
+				offset: logsPage * LOGS_PAGE_SIZE
+			});
+			logs = page.entries;
+			logsTotal = page.total;
+		} catch (e) {
+			reportError(e);
+		} finally {
+			logsLoading = false;
+		}
+	}
 
 	// Users
 	let users = $state<User[]>([]);
@@ -29,7 +572,30 @@
 	let pageIndex = $state(0);
 	let usersError = $state<string | null>(null);
 	let createOpen = $state(false);
-	let newUser = $state({ username: '', email: '', password: '', role: 'user', quotaGb: 5 });
+	let createError = $state<string | null>(null);
+	let creating = $state(false);
+	let newUser = $state({
+		username: '',
+		email: '',
+		password: '',
+		role: 'user',
+		quotaValue: 5,
+		quotaUnit: (1024 ** 3) as number
+	});
+
+	// Quota edit modal
+	let quotaModal = $state<{
+		userId: string;
+		username: string;
+		value: number;
+		unit: number;
+	} | null>(null);
+
+	// Reset-password modal
+	let resetModal = $state<{ userId: string; username: string } | null>(null);
+	let resetPassword = $state('');
+	let resetError = $state<string | null>(null);
+	let resetting = $state(false);
 
 	// Plugins
 	let plugins = $state<PluginInfo[]>([]);
@@ -62,9 +628,37 @@
 		ui.notify(e instanceof Error ? e.message : String(e), 'error');
 	}
 
+	async function copyText(text: string) {
+		try {
+			await navigator.clipboard.writeText(text);
+			ui.notify(t('common.copied', 'Copied to clipboard'), 'success');
+		} catch {
+			ui.notify(t('common.copy_failed', 'Copy failed'), 'error');
+		}
+	}
+
+	/** True when a settings field is locked by an OXICLOUD_* env var. */
+	function isEnvLocked(overrides: string[] | undefined, field: string): boolean {
+		return Array.isArray(overrides) && overrides.includes(field);
+	}
+
+	/** True for the signed-in admin's own row — guards self-destructive actions. */
+	function isSelf(u: User): boolean {
+		return u.id === currentAdminId;
+	}
+	/** OIDC/SSO-provisioned account (no local password to reset). */
+	function isOidcUser(u: User): boolean {
+		return !!u.auth_provider && u.auth_provider !== 'local';
+	}
+	/** Used-quota percentage (0 when unlimited) for the per-user progress bar. */
+	function quotaPct(u: User): number {
+		return u.storage_quota_bytes > 0 ? (u.storage_used_bytes / u.storage_quota_bytes) * 100 : 0;
+	}
+
 	async function toggleRole(u: User) {
+		if (isSelf(u)) return;
 		const role = u.role === 'admin' ? 'user' : 'admin';
-		if (!confirm(t('admin.confirm_role', { role }, 'Change role to {{role}}?'))) return;
+		if (!(await showConfirm(t('admin.confirm_role', { role }, 'Change role to {{role}}?')))) return;
 		try {
 			await setUserRole(u.id, role);
 			await loadUsers();
@@ -74,6 +668,11 @@
 	}
 
 	async function toggleActive(u: User) {
+		if (isSelf(u) && u.active) return;
+		const msg = u.active
+			? t('admin.confirm_deactivate', 'Deactivate this user?')
+			: t('admin.confirm_activate', 'Activate this user?');
+		if (!(await showConfirm(msg))) return;
 		try {
 			await setUserActive(u.id, !u.active);
 			await loadUsers();
@@ -82,30 +681,58 @@
 		}
 	}
 
-	async function changeQuota(u: User) {
-		const gb = prompt(t('admin.quota_prompt', 'Quota in GB (0 = unlimited)'));
-		if (gb === null) return;
+	function openQuota(u: User) {
+		quotaModal = {
+			userId: u.id,
+			username: u.username || u.email,
+			value:
+				u.storage_quota_bytes > 0 ? Math.round((u.storage_quota_bytes / 1024 ** 3) * 10) / 10 : 0,
+			unit: 1024 ** 3
+		};
+	}
+	async function saveQuota() {
+		if (!quotaModal) return;
 		try {
-			await setUserQuota(u.id, Math.round(Number(gb) * 1024 ** 3));
+			await setUserQuota(quotaModal.userId, Math.round(quotaModal.value * quotaModal.unit));
+			quotaModal = null;
 			await loadUsers();
 		} catch (e) {
 			reportError(e);
 		}
 	}
 
-	async function resetPw(u: User) {
-		const pw = prompt(t('admin.new_password_prompt', 'New password'));
-		if (!pw) return;
+	function openReset(u: User) {
+		resetModal = { userId: u.id, username: u.username || u.email };
+		resetPassword = '';
+		resetError = null;
+	}
+	async function submitReset(e: SubmitEvent) {
+		e.preventDefault();
+		if (!resetModal) return;
+		if (resetPassword.length < 8) {
+			resetError = t('admin.error_password_short', 'Password must be at least 8 characters.');
+			return;
+		}
+		resetting = true;
+		resetError = null;
 		try {
-			await resetUserPassword(u.id, pw);
+			await resetUserPassword(resetModal.userId, resetPassword);
+			resetModal = null;
 			ui.notify(t('admin.password_reset', 'Password reset'), 'success');
-		} catch (e) {
-			reportError(e);
+		} catch (err) {
+			resetError = err instanceof Error ? err.message : String(err);
+		} finally {
+			resetting = false;
 		}
 	}
 
 	async function removeUser(u: User) {
-		if (!confirm(t('admin.confirm_delete_user', { name: u.email }, 'Delete user {{name}}?')))
+		if (isSelf(u)) return;
+		if (
+			!(await showConfirm(
+				t('admin.confirm_delete_user', { name: u.username || u.email }, 'Delete user {{name}}?')
+			))
+		)
 			return;
 		try {
 			await deleteUser(u.id);
@@ -117,19 +744,41 @@
 
 	async function submitCreate(e: SubmitEvent) {
 		e.preventDefault();
+		const username = newUser.username.trim();
+		const email = newUser.email.trim();
+		if (username.length < 3) {
+			createError = t('admin.error_username_short', 'Username must be at least 3 characters.');
+			return;
+		}
+		if (newUser.password.length < 8) {
+			createError = t('admin.error_password_short', 'Password must be at least 8 characters.');
+			return;
+		}
+		creating = true;
+		createError = null;
 		try {
 			await createUser({
-				username: newUser.username,
-				email: newUser.email,
+				username,
+				// Email is optional — the backend auto-generates one when blank.
+				email: email || null,
 				password: newUser.password,
 				role: newUser.role,
-				quota_bytes: Math.round(newUser.quotaGb * 1024 ** 3)
+				quota_bytes: Math.round(newUser.quotaValue * newUser.quotaUnit)
 			});
 			createOpen = false;
-			newUser = { username: '', email: '', password: '', role: 'user', quotaGb: 5 };
+			newUser = {
+				username: '',
+				email: '',
+				password: '',
+				role: 'user',
+				quotaValue: 5,
+				quotaUnit: 1024 ** 3
+			};
 			await loadUsers();
 		} catch (err) {
-			reportError(err);
+			createError = err instanceof Error ? err.message : String(err);
+		} finally {
+			creating = false;
 		}
 	}
 
@@ -143,7 +792,11 @@
 	}
 
 	async function removePlugin(p: PluginInfo) {
-		if (!confirm(t('admin.confirm_delete_plugin', { name: p.name }, 'Delete plugin {{name}}?')))
+		if (
+			!(await showConfirm(
+				t('admin.confirm_delete_plugin', { name: p.name }, 'Delete plugin {{name}}?')
+			))
+		)
 			return;
 		try {
 			await deletePlugin(p.id);
@@ -160,29 +813,625 @@
 		void loadUsers();
 	}
 
-	onMount(() => {
-		void loadUsers();
-		void loadPlugins();
+	// Lazy-load each tab's data on first visit.
+	let loaded = $state<Record<Tab, boolean>>({
+		dashboard: false,
+		users: false,
+		plugins: false,
+		oidc: false,
+		storage: false,
+		smtp: false
+	});
+
+	$effect(() => {
+		if (loaded[tab]) return;
+		loaded[tab] = true;
+		if (tab === 'dashboard') void loadDashboard();
+		else if (tab === 'users') void loadUsers();
+		else if (tab === 'plugins') void loadPlugins();
+		else if (tab === 'oidc') void loadOidc();
+		else if (tab === 'storage') {
+			void loadStorage();
+			void loadMigration();
+		} else if (tab === 'smtp') void loadSmtp();
+	});
+
+	// Stop polling when leaving the storage tab / unmounting.
+	$effect(() => {
+		if (tab !== 'storage') stopMigrationPoll();
+		return () => stopMigrationPoll();
+	});
+
+	// Tear down the live log stream when leaving plugins / unmounting.
+	$effect(() => {
+		if (tab !== 'plugins') stopLogStream();
+		return () => stopLogStream();
 	});
 </script>
 
 <svelte:head><title>{t('admin.title', 'Admin')} · OxiCloud</title></svelte:head>
 
+{#snippet envBadge(on: boolean)}
+	{#if on}
+		<span class="badge badge--env" title={t('admin.env_locked', 'Set by an environment variable')}
+			>ENV</span
+		>
+	{/if}
+{/snippet}
+
 <main class="admin">
 	<h1>{t('admin.title', 'Admin')}</h1>
 
 	<div class="tabs" role="tablist">
+		<button role="tab" aria-selected={tab === 'dashboard'} onclick={() => (tab = 'dashboard')}>
+			<Icon name="chart-pie" />
+			{t('admin.dashboard', 'Dashboard')}
+		</button>
 		<button role="tab" aria-selected={tab === 'users'} onclick={() => (tab = 'users')}>
+			<Icon name="users" />
 			{t('admin.users', 'Users')}
 		</button>
+		<button role="tab" aria-selected={tab === 'oidc'} onclick={() => (tab = 'oidc')}>
+			<Icon name="key" />
+			{t('admin.oidc', 'OIDC / SSO')}
+		</button>
+		<button role="tab" aria-selected={tab === 'storage'} onclick={() => (tab = 'storage')}>
+			<Icon name="database" />
+			{t('admin.storage_tab', 'Storage')}
+		</button>
+		<button role="tab" aria-selected={tab === 'smtp'} onclick={() => (tab = 'smtp')}>
+			<Icon name="envelope" />
+			{t('admin.smtp', 'Email (SMTP)')}
+		</button>
 		<button role="tab" aria-selected={tab === 'plugins'} onclick={() => (tab = 'plugins')}>
+			<Icon name="layer-group" />
 			{t('admin.plugins', 'Plugins')}
 		</button>
 	</div>
 
-	{#if tab === 'users'}
+	{#if tab === 'dashboard'}
+		{#if dashboardError}
+			<p class="status status--error">{dashboardError}</p>
+		{:else if !dashboard}
+			<p class="status">{t('common.loading', 'Loading…')}</p>
+		{:else}
+			<div class="ds-grid">
+				<div class="ds-card">
+					<span class="ds-num">{dashboard.total_users}</span>{t('admin.total_users', 'Total users')}
+				</div>
+				<div class="ds-card">
+					<span class="ds-num">{dashboard.active_users}</span>{t('admin.active_users', 'Active')}
+				</div>
+				<div class="ds-card">
+					<span class="ds-num">{dashboard.admin_users}</span>{t('admin.admin_users', 'Admins')}
+				</div>
+				<div class="ds-card">
+					<span class="ds-num">v{dashboard.server_version}</span>{t('admin.version', 'Version')}
+				</div>
+			</div>
+
+			<div class="ds-grid">
+				<div class="ds-card">
+					<span class="ds-flag" class:ds-flag--on={dashboard.auth_enabled}>
+						{dashboard.auth_enabled
+							? t('admin.enabled', 'Enabled')
+							: t('admin.disabled', 'Disabled')}
+					</span>
+					{t('admin.auth', 'Authentication')}
+				</div>
+				<div class="ds-card">
+					<span class="ds-flag" class:ds-flag--on={dashboard.oidc_configured}>
+						{dashboard.oidc_configured ? t('admin.active', 'Active') : t('admin.off', 'Off')}
+					</span>
+					{t('admin.oidc', 'OIDC / SSO')}
+				</div>
+				<div class="ds-card">
+					<span class="ds-flag" class:ds-flag--on={dashboard.quotas_enabled}>
+						{dashboard.quotas_enabled
+							? t('admin.enabled', 'Enabled')
+							: t('admin.disabled', 'Disabled')}
+					</span>
+					{t('admin.quotas', 'Quotas')}
+				</div>
+			</div>
+
+			{#if dashboard.users_over_quota > 0}
+				<div class="card warn-card warn-card--danger">
+					<Icon name="exclamation-circle" />
+					<div>
+						<strong class="ds-num">{dashboard.users_over_quota}</strong>
+						{t('admin.over_quota', { n: dashboard.users_over_quota }, '{{n}} users over quota')}
+					</div>
+				</div>
+			{/if}
+			{#if dashboard.users_over_80_percent > 0}
+				<div class="card warn-card warn-card--warn">
+					<Icon name="exclamation-triangle" />
+					<div>
+						<strong class="ds-num">{dashboard.users_over_80_percent}</strong>
+						{t(
+							'admin.over_80',
+							{ n: dashboard.users_over_80_percent },
+							'{{n}} users over 80% quota'
+						)}
+					</div>
+				</div>
+			{/if}
+
+			<div class="card">
+				<h2>{t('admin.storage', 'Storage')}</h2>
+				<div class="ds-bar">
+					<div
+						class="ds-fill"
+						class:ds-fill--warn={dashboard.storage_usage_percent > 70}
+						class:ds-fill--danger={dashboard.storage_usage_percent > 90}
+						style:width="{Math.min(dashboard.storage_usage_percent, 100)}%"
+					></div>
+				</div>
+				<p class="muted">
+					{formatBytes(dashboard.total_used_bytes)} / {formatBytes(dashboard.total_quota_bytes)}
+					({dashboard.storage_usage_percent.toFixed(1)}%)
+				</p>
+			</div>
+
+			{#if dashboard.registration_enabled !== undefined}
+				<div class="card">
+					<h2>{t('admin.registration', 'Registration')}</h2>
+					<label class="checkbox">
+						<input
+							type="checkbox"
+							checked={dashboard.registration_enabled}
+							onchange={(e) => toggleRegistration(e.currentTarget.checked)}
+						/>
+						<span>{t('admin.allow_registration', 'Allow public user registration')}</span>
+					</label>
+					{#if !dashboard.registration_enabled}
+						<p class="alert alert--warn registration-warning">
+							<Icon name="exclamation-triangle" />
+							{t(
+								'admin.registration_disabled_warning',
+								'Public registration is disabled. Only admins can create new accounts.'
+							)}
+						</p>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	{:else if tab === 'oidc'}
+		<div class="card">
+			<h2>{t('admin.oidc', 'OIDC / SSO')}</h2>
+			{#if !oidc}
+				<p class="status">{t('common.loading', 'Loading…')}</p>
+			{:else}
+				<form class="form" onsubmit={(e) => (e.preventDefault(), doSaveOidc())}>
+					<label class="checkbox">
+						<input type="checkbox" bind:checked={oidc.enabled} />
+						<span>{t('admin.oidc_enabled', 'Enable OIDC login')}</span>
+					</label>
+					<label
+						><span
+							>{t('admin.oidc_issuer', 'Issuer URL')}{@render envBadge(
+								isEnvLocked(oidc.env_overrides, 'issuer_url')
+							)}</span
+						>
+						<input
+							bind:value={oidc.issuer_url}
+							placeholder="https://idp.example.com"
+							disabled={isEnvLocked(oidc.env_overrides, 'issuer_url')}
+						/></label
+					>
+					<button type="button" class="btn btn-secondary" onclick={runOidcTest}>
+						<Icon name="search" />
+						{t('admin.oidc_discover', 'Test / discover')}
+					</button>
+					{#if oidcTest}
+						<div
+							class="discovery-result {oidcTest.success
+								? 'discovery-result--ok'
+								: 'discovery-result--fail'}"
+						>
+							<strong>
+								<Icon name={oidcTest.success ? 'check-circle' : 'times-circle'} />
+								{oidcTest.message}
+							</strong>
+							{#if oidcTest.success}
+								<dl class="kv">
+									<dt>{t('admin.oidc_issuer', 'Issuer URL')}</dt>
+									<dd>{oidcTest.issuer || '—'}</dd>
+									<dt>{t('admin.oidc_auth_endpoint', 'Auth endpoint')}</dt>
+									<dd>{oidcTest.authorization_endpoint || '—'}</dd>
+								</dl>
+							{/if}
+						</div>
+					{/if}
+					<label
+						><span
+							>{t('admin.oidc_client_id', 'Client ID')}{@render envBadge(
+								isEnvLocked(oidc.env_overrides, 'client_id')
+							)}</span
+						>
+						<input
+							bind:value={oidc.client_id}
+							disabled={isEnvLocked(oidc.env_overrides, 'client_id')}
+						/></label
+					>
+					<label
+						><span
+							>{t('admin.oidc_client_secret', 'Client secret')}{@render envBadge(
+								isEnvLocked(oidc.env_overrides, 'client_secret')
+							)}</span
+						>
+						<input
+							type="password"
+							bind:value={oidc.client_secret}
+							disabled={isEnvLocked(oidc.env_overrides, 'client_secret')}
+							placeholder={oidc.client_secret_set
+								? t('admin.unchanged', 'Leave blank to keep current')
+								: ''}
+						/>
+						{#if oidc.client_secret_set}
+							<span class="secret-hint">
+								<Icon name="check-circle" />
+								{t('admin.oidc_secret_set', 'A client secret is already configured.')}
+							</span>
+						{/if}</label
+					>
+					<label
+						><span
+							>{t('admin.oidc_scopes', 'Scopes')}{@render envBadge(
+								isEnvLocked(oidc.env_overrides, 'scopes')
+							)}</span
+						>
+						<input
+							bind:value={oidc.scopes}
+							placeholder="openid profile email"
+							disabled={isEnvLocked(oidc.env_overrides, 'scopes')}
+						/></label
+					>
+					<label
+						><span
+							>{t('admin.oidc_provider_name', 'Provider name')}{@render envBadge(
+								isEnvLocked(oidc.env_overrides, 'provider_name')
+							)}</span
+						>
+						<input
+							bind:value={oidc.provider_name}
+							disabled={isEnvLocked(oidc.env_overrides, 'provider_name')}
+						/></label
+					>
+					<label
+						><span
+							>{t('admin.oidc_admin_groups', 'Admin groups')}{@render envBadge(
+								isEnvLocked(oidc.env_overrides, 'admin_groups')
+							)}</span
+						>
+						<input
+							bind:value={oidc.admin_groups}
+							disabled={isEnvLocked(oidc.env_overrides, 'admin_groups')}
+						/></label
+					>
+					<label class="checkbox">
+						<input type="checkbox" bind:checked={oidc.auto_provision} />
+						<span>{t('admin.oidc_auto_provision', 'Auto-provision users on first login')}</span>
+					</label>
+					<label class="checkbox">
+						<input type="checkbox" bind:checked={oidc.disable_password_login} />
+						<span>{t('admin.oidc_disable_pw', 'Disable password login (OIDC only)')}</span>
+					</label>
+					{#if oidc.callback_url}
+						<p class="muted callback-row">
+							{t('admin.oidc_callback', 'Callback URL')}: <code>{oidc.callback_url}</code>
+							<button
+								type="button"
+								class="btn btn-sm btn-secondary"
+								onclick={() => copyText(oidc?.callback_url ?? '')}
+							>
+								<Icon name="copy" />
+								{t('common.copy', 'Copy')}
+							</button>
+						</p>
+					{/if}
+					{#if oidcMsg}<p class={oidcMsg.ok ? 'status--ok' : 'status--error'}>
+							{oidcMsg.text}
+						</p>{/if}
+					<button class="btn btn-primary" type="submit" disabled={oidcSaving}>
+						{t('common.save', 'Save')}
+					</button>
+				</form>
+			{/if}
+		</div>
+	{:else if tab === 'storage'}
+		<div class="card">
+			<h2>{t('admin.storage_tab', 'Storage')}</h2>
+			{#if !storage}
+				<p class="status">{t('common.loading', 'Loading…')}</p>
+			{:else}
+				<form class="form" onsubmit={(e) => (e.preventDefault(), doSaveStorage())}>
+					<label
+						><span>{t('admin.storage_backend', 'Backend')}</span>
+						<select bind:value={sForm.backend}>
+							<option value="local">local</option>
+							<option value="s3">S3</option>
+						</select></label
+					>
+					{#if sForm.backend === 's3'}
+						<label
+							><span>{t('admin.storage_preset', 'Preset')}</span>
+							<select bind:value={sForm.preset} onchange={applyPreset}>
+								{#each Object.keys(STORAGE_PRESETS) as p (p)}<option value={p}>{p}</option>{/each}
+							</select></label
+						>
+						<label
+							><span
+								>{t('admin.storage_endpoint', 'Endpoint URL')}{@render envBadge(
+									isEnvLocked(storage.env_overrides, 's3_endpoint_url')
+								)}</span
+							>
+							<input
+								bind:value={sForm.endpoint}
+								disabled={isEnvLocked(storage.env_overrides, 's3_endpoint_url')}
+							/></label
+						>
+						<label
+							><span
+								>{t('admin.storage_bucket', 'Bucket')}{@render envBadge(
+									isEnvLocked(storage.env_overrides, 's3_bucket')
+								)}</span
+							>
+							<input
+								bind:value={sForm.bucket}
+								disabled={isEnvLocked(storage.env_overrides, 's3_bucket')}
+							/></label
+						>
+						<label
+							><span
+								>{t('admin.storage_region', 'Region')}{@render envBadge(
+									isEnvLocked(storage.env_overrides, 's3_region')
+								)}</span
+							>
+							<input
+								bind:value={sForm.region}
+								disabled={isEnvLocked(storage.env_overrides, 's3_region')}
+							/></label
+						>
+						<label
+							><span
+								>{t('admin.storage_access_key', 'Access key')}{@render envBadge(
+									isEnvLocked(storage.env_overrides, 's3_access_key')
+								)}</span
+							>
+							<input
+								bind:value={sForm.accessKey}
+								disabled={isEnvLocked(storage.env_overrides, 's3_access_key')}
+								placeholder={storage.s3_access_key_set
+									? t('admin.unchanged', 'Leave blank to keep current')
+									: ''}
+							/></label
+						>
+						<label
+							><span
+								>{t('admin.storage_secret_key', 'Secret key')}{@render envBadge(
+									isEnvLocked(storage.env_overrides, 's3_secret_key')
+								)}</span
+							>
+							<input
+								type="password"
+								bind:value={sForm.secretKey}
+								disabled={isEnvLocked(storage.env_overrides, 's3_secret_key')}
+								placeholder={storage.s3_secret_key_set
+									? t('admin.unchanged', 'Leave blank to keep current')
+									: ''}
+							/></label
+						>
+						<label class="checkbox">
+							<input type="checkbox" bind:checked={sForm.pathStyle} />
+							<span>{t('admin.storage_path_style', 'Force path-style URLs')}</span>
+						</label>
+					{/if}
+					{#if storageMsg}<p class={storageMsg.ok ? 'status--ok' : 'status--error'}>
+							{storageMsg.text}
+						</p>{/if}
+					<div class="smtp-test">
+						<button class="btn btn-primary" type="submit" disabled={storageBusy}
+							>{t('common.save', 'Save')}</button
+						>
+						{#if sForm.backend === 's3'}
+							<button
+								type="button"
+								class="btn btn-secondary"
+								disabled={storageBusy}
+								onclick={doTestStorage}
+							>
+								{t('admin.storage_test', 'Test connection')}
+							</button>
+						{/if}
+					</div>
+				</form>
+				<dl class="kv">
+					<dt>{t('admin.storage_current', 'Current backend')}</dt>
+					<dd>{storage.current_backend ?? '—'}</dd>
+					<dt>{t('admin.storage_blobs', 'Blobs')}</dt>
+					<dd>{storage.total_blobs ?? '—'}</dd>
+					<dt>{t('admin.storage_size', 'Stored')}</dt>
+					<dd>
+						{storage.total_bytes_stored != null ? formatBytes(storage.total_bytes_stored) : '—'}
+					</dd>
+					<dt>{t('admin.storage_dedup', 'Dedup ratio')}</dt>
+					<dd>{storage.dedup_ratio != null ? `${storage.dedup_ratio.toFixed(2)}x` : '—'}</dd>
+				</dl>
+			{/if}
+		</div>
+
+		<div class="card">
+			<h2>{t('admin.migration', 'Storage migration')}</h2>
+			{#if !migration}
+				<p class="status">{t('common.loading', 'Loading…')}</p>
+			{:else}
+				<p class="muted">{t('admin.status', 'Status')}: <strong>{migration.status}</strong></p>
+				{#if migration.total_blobs > 0}
+					<div class="ds-bar">
+						<div class="ds-fill" style:width="{migrationPct}%"></div>
+					</div>
+					<p class="muted">
+						{migration.migrated_blobs} / {migration.total_blobs} ({migrationPct}%) ·
+						{formatBytes(migration.migrated_bytes)}
+						{#if migration.throughput_bytes_per_sec && migration.status === 'running'}
+							· {formatBytes(Math.round(migration.throughput_bytes_per_sec))}/s
+						{/if}
+						{#if migrationEtaMin != null}
+							· {t('admin.mig_eta', { min: migrationEtaMin }, `~${migrationEtaMin} min remaining`)}
+						{/if}
+					</p>
+				{/if}
+				{#if migration.failed_blobs && migration.failed_blobs.length > 0}
+					<details class="mig-failed">
+						<summary>
+							{t(
+								'admin.mig_failed',
+								{ n: migration.failed_blobs.length },
+								`${migration.failed_blobs.length} failed blobs`
+							)}
+						</summary>
+						<pre class="mig-failed__list">{migration.failed_blobs.join('\n')}</pre>
+					</details>
+				{/if}
+				<div class="smtp-test">
+					<!-- Start: only when no migration is active (running/paused) or completed. -->
+					{#if migration.status !== 'running' && migration.status !== 'paused' && migration.status !== 'completed'}
+						<button class="btn btn-primary" onclick={() => doMigration('start')}
+							>{t('admin.mig_start', 'Start')}</button
+						>
+					{/if}
+					{#if migration.status === 'running'}
+						<button class="btn btn-secondary" onclick={() => doMigration('pause')}
+							>{t('admin.mig_pause', 'Pause')}</button
+						>
+					{/if}
+					{#if migration.status === 'paused'}
+						<button class="btn btn-primary" onclick={() => doMigration('resume')}
+							>{t('admin.mig_resume', 'Resume')}</button
+						>
+					{/if}
+					<!-- Verify + Finalize: only once the copy phase has completed. -->
+					{#if migration.status === 'completed'}
+						<button class="btn btn-secondary" disabled={verifying} onclick={doVerify}>
+							<Icon name="check-double" />
+							{verifying
+								? t('admin.mig_verifying', 'Verifying…')
+								: t('admin.mig_verify', 'Verify integrity')}
+						</button>
+						<button class="btn btn-secondary" onclick={() => doMigration('complete')}
+							>{t('admin.mig_complete', 'Finalize')}</button
+						>
+					{/if}
+				</div>
+
+				{#if verifyError}
+					<div class="discovery-result discovery-result--fail">
+						<strong><Icon name="times-circle" /> {verifyError}</strong>
+					</div>
+				{:else if verifyResult}
+					<div
+						class="discovery-result {verifyResult.passed
+							? 'discovery-result--ok'
+							: 'discovery-result--fail'}"
+					>
+						<strong>
+							<Icon name={verifyResult.passed ? 'check-circle' : 'times-circle'} />
+							{verifyResult.passed
+								? t('admin.mig_verify_passed', 'Verification passed')
+								: t('admin.mig_verify_failed', 'Verification failed')}
+						</strong>
+						{#if verifyResult.passed}
+							<p class="muted">
+								{t(
+									'admin.mig_verify_summary',
+									{ checked: verifyResult.sample_checked, total: verifyResult.pg_blob_count },
+									'{{checked}} blobs checked, {{total}} total in database'
+								)}
+							</p>
+						{:else}
+							<p class="muted">
+								{[
+									verifyResult.missing_in_target.length
+										? t(
+												'admin.mig_verify_missing',
+												{ n: verifyResult.missing_in_target.length },
+												'{{n}} missing'
+											)
+										: '',
+									verifyResult.size_mismatches.length
+										? t(
+												'admin.mig_verify_mismatch',
+												{ n: verifyResult.size_mismatches.length },
+												'{{n}} size mismatches'
+											)
+										: ''
+								]
+									.filter(Boolean)
+									.join(', ')}
+							</p>
+						{/if}
+					</div>
+				{/if}
+			{/if}
+		</div>
+	{:else if tab === 'smtp'}
+		<div class="card">
+			<h2>{t('admin.smtp_status', 'SMTP status')}</h2>
+			{#if !smtp}
+				<p class="status">{t('common.loading', 'Loading…')}</p>
+			{:else}
+				<dl class="kv">
+					<dt>{t('admin.smtp_enabled', 'Enabled')}</dt>
+					<dd>{smtp.enabled ? t('common.yes', 'Yes') : t('common.no', 'No')}</dd>
+					<dt>{t('admin.smtp_host', 'Host')}</dt>
+					<dd>{smtp.host || '—'}</dd>
+					<dt>{t('admin.smtp_port', 'Port')}</dt>
+					<dd>{smtp.port || '—'}</dd>
+					<dt>TLS</dt>
+					<dd>{smtp.tls || '—'}</dd>
+					<dt>{t('admin.smtp_from', 'From')}</dt>
+					<dd>{smtp.from || '—'}</dd>
+					<dt>{t('admin.smtp_user_state', 'Auth')}</dt>
+					<dd>{smtp.user_state || '—'}</dd>
+				</dl>
+			{/if}
+		</div>
+		<div class="card">
+			<h2>{t('admin.smtp_test', 'Send test email')}</h2>
+			<div class="smtp-test">
+				<input
+					type="email"
+					bind:value={smtpTo}
+					placeholder={t('admin.smtp_to', 'recipient@example.com')}
+				/>
+				<button class="btn btn-primary" disabled={smtpSending} onclick={runSmtpTest}>
+					<Icon name="paper-plane" />
+					{smtpSending ? t('admin.smtp_sending', 'Sending…') : t('admin.smtp_send', 'Send')}
+				</button>
+			</div>
+			{#if smtpResult}
+				{#if smtpResult.success}
+					<p class="status--ok">
+						<strong>{t('admin.smtp_sent', 'Test email sent.')}</strong><br />
+						{t('admin.smtp_server_code', 'Server replied')}:
+						<code>{smtpResult.code ?? ''} {smtpResult.message ?? ''}</code>
+					</p>
+				{:else}
+					<p class="status--error">
+						<strong>{t('admin.smtp_fail', 'Send failed.')}</strong><br />
+						<code
+							>{smtpResult.error || smtpResult.message || t('common.error', 'unknown error')}</code
+						>
+					</p>
+				{/if}
+			{/if}
+		</div>
+	{:else if tab === 'users'}
 		<div class="bar">
 			<button class="btn btn--primary" onclick={() => (createOpen = true)}>
+				<Icon name="user-plus" />
 				{t('admin.create_user', 'Create user')}
 			</button>
 		</div>
@@ -194,40 +1443,116 @@
 					<tr>
 						<th>{t('admin.user', 'User')}</th>
 						<th>{t('admin.role', 'Role')}</th>
+						<th>{t('admin.auth', 'Auth')}</th>
 						<th>{t('admin.status', 'Status')}</th>
-						<th>{t('admin.quota', 'Quota')}</th>
+						<th>{t('admin.quota', 'Storage usage')}</th>
+						<th>{t('admin.last_login', 'Last login')}</th>
 						<th></th>
 					</tr>
 				</thead>
 				<tbody>
 					{#each users as u (u.id)}
+						{@const pct = quotaPct(u)}
 						<tr>
 							<td>
 								<div class="user-cell">
-									<strong>{u.username || u.email}</strong>
+									<strong>
+										{u.username || u.email}
+										{#if isSelf(u)}
+											<span class="badge badge--self">{t('admin.you_badge', 'you')}</span>
+										{/if}
+									</strong>
 									<span class="muted">{u.email}</span>
 								</div>
 							</td>
-							<td>{u.role}</td>
-							<td>{u.active ? t('admin.active', 'Active') : t('admin.inactive', 'Inactive')}</td>
 							<td>
-								{u.storage_quota_bytes > 0 ? formatBytes(u.storage_quota_bytes) : '∞'}
+								<span class="badge badge--{u.role === 'admin' ? 'admin' : 'user'}">
+									{#if u.role === 'admin'}<Icon name="shield-alt" />{/if}
+									{u.role}
+								</span>
 							</td>
+							<td>
+								{#if isOidcUser(u)}
+									<span class="badge badge--oidc" title={u.auth_provider}>
+										<Icon name="key" />
+										{u.auth_provider}
+									</span>
+								{:else}
+									<span class="badge badge--local">{t('admin.local', 'local')}</span>
+								{/if}
+							</td>
+							<td>
+								<span class="badge badge--{u.active ? 'active' : 'inactive'}">
+									{u.active ? t('admin.active', 'Active') : t('admin.inactive', 'Inactive')}
+								</span>
+							</td>
+							<td>
+								<div class="quota-cell">
+									<div class="quota-bar">
+										<div
+											class="quota-fill"
+											class:quota-fill--warn={pct > 70}
+											class:quota-fill--danger={pct > 90}
+											style:width="{Math.min(pct, 100)}%"
+										></div>
+									</div>
+									<span class="muted">
+										{formatBytes(u.storage_used_bytes)} / {u.storage_quota_bytes > 0
+											? formatBytes(u.storage_quota_bytes)
+											: '∞'}
+									</span>
+								</div>
+							</td>
+							<td class="muted">{timeAgo(u.last_login_at)}</td>
 							<td class="actions">
-								<button class="link-btn" onclick={() => toggleRole(u)}
-									>{t('admin.role', 'Role')}</button
+								<button
+									class="icon-btn"
+									title={t('admin.edit_quota_title', 'Edit quota')}
+									aria-label={t('admin.edit_quota_title', 'Edit quota')}
+									onclick={() => openQuota(u)}
 								>
-								<button class="link-btn" onclick={() => toggleActive(u)}>
-									{u.active ? t('admin.deactivate', 'Deactivate') : t('admin.activate', 'Activate')}
+									<Icon name="box" />
 								</button>
-								<button class="link-btn" onclick={() => changeQuota(u)}
-									>{t('admin.quota', 'Quota')}</button
+								{#if !isOidcUser(u)}
+									<button
+										class="icon-btn"
+										title={t('admin.reset_password_title', 'Reset password')}
+										aria-label={t('admin.reset_password_title', 'Reset password')}
+										onclick={() => openReset(u)}
+									>
+										<Icon name="key" />
+									</button>
+								{/if}
+								<button
+									class="icon-btn"
+									title={t('admin.toggle_role_title', 'Toggle admin role')}
+									aria-label={t('admin.toggle_role_title', 'Toggle admin role')}
+									disabled={isSelf(u)}
+									onclick={() => toggleRole(u)}
 								>
-								<button class="link-btn" onclick={() => resetPw(u)}
-									>{t('admin.reset_pw', 'Reset pw')}</button
+									<Icon name={u.role === 'admin' ? 'user' : 'crown'} />
+								</button>
+								<button
+									class="icon-btn {u.active ? 'icon-btn--danger' : 'icon-btn--success'}"
+									title={u.active
+										? t('admin.deactivate_title', 'Deactivate')
+										: t('admin.activate_title', 'Activate')}
+									aria-label={u.active
+										? t('admin.deactivate_title', 'Deactivate')
+										: t('admin.activate_title', 'Activate')}
+									disabled={isSelf(u) && u.active}
+									onclick={() => toggleActive(u)}
 								>
-								<button class="link-btn link-btn--danger" onclick={() => removeUser(u)}>
-									{t('common.delete', 'Delete')}
+									<Icon name={u.active ? 'ban' : 'check'} />
+								</button>
+								<button
+									class="icon-btn icon-btn--danger"
+									title={t('admin.delete_title', 'Delete user')}
+									aria-label={t('admin.delete_title', 'Delete user')}
+									disabled={isSelf(u)}
+									onclick={() => removeUser(u)}
+								>
+									<Icon name="trash-alt" />
 								</button>
 							</td>
 						</tr>
@@ -248,41 +1573,101 @@
 		<p class="status">{t('admin.plugins_disabled', 'The plugin subsystem is disabled.')}</p>
 	{:else if pluginsError}
 		<p class="status status--error">{pluginsError}</p>
-	{:else if plugins.length === 0}
-		<p class="status">{t('admin.no_plugins', 'No plugins installed.')}</p>
 	{:else}
-		<table class="table">
-			<thead>
-				<tr>
-					<th>{t('admin.plugin', 'Plugin')}</th>
-					<th>{t('admin.version', 'Version')}</th>
-					<th>{t('admin.status', 'Status')}</th>
-					<th></th>
-				</tr>
-			</thead>
-			<tbody>
-				{#each plugins as p (p.id)}
+		<div class="install-bar">
+			<div>
+				<strong>{t('admin.plugins_install', 'Install plugin')}</strong>
+				<span class="muted"
+					>{t('admin.plugins_install_hint', 'Upload a plugin bundle (.zip).')}</span
+				>
+			</div>
+			<label class="btn btn-primary" class:disabled={installing}>
+				<Icon name="cloud-upload-alt" />
+				{installing
+					? t('admin.plugins_installing', 'Installing…')
+					: t('admin.plugins_upload', 'Upload .zip')}
+				<input
+					type="file"
+					accept=".zip,application/zip"
+					hidden
+					disabled={installing}
+					onchange={onInstallPlugin}
+				/>
+			</label>
+		</div>
+		{#if installMsg}
+			<p class={installMsg.ok ? 'status--ok' : 'status--error'}>{installMsg.text}</p>
+		{/if}
+		{#if plugins.length === 0}
+			<p class="status">{t('admin.no_plugins', 'No plugins installed.')}</p>
+		{:else}
+			<table class="table">
+				<thead>
 					<tr>
-						<td>
-							<div class="user-cell">
-								<strong>{p.name}</strong>
-								{#if p.description}<span class="muted">{p.description}</span>{/if}
-							</div>
-						</td>
-						<td>{p.version ?? '—'}</td>
-						<td>{p.enabled ? t('admin.enabled', 'Enabled') : t('admin.disabled', 'Disabled')}</td>
-						<td class="actions">
-							<button class="link-btn" onclick={() => togglePlugin(p)}>
-								{p.enabled ? t('admin.disable', 'Disable') : t('admin.enable', 'Enable')}
-							</button>
-							<button class="link-btn link-btn--danger" onclick={() => removePlugin(p)}>
-								{t('common.delete', 'Delete')}
-							</button>
-						</td>
+						<th>{t('admin.plugin', 'Plugin')}</th>
+						<th>{t('admin.plugins_col_id', 'ID')}</th>
+						<th>{t('admin.version', 'Version')}</th>
+						<th>{t('admin.plugins_col_events', 'Events')}</th>
+						<th>{t('admin.status', 'Status')}</th>
+						<th></th>
 					</tr>
-				{/each}
-			</tbody>
-		</table>
+				</thead>
+				<tbody>
+					{#each plugins as p (p.id)}
+						<tr>
+							<td>
+								<div class="user-cell">
+									<strong>{p.name}</strong>
+									{#if p.description}<span class="muted">{p.description}</span>{/if}
+								</div>
+							</td>
+							<td><code>{p.id}</code></td>
+							<td>{p.version ?? '—'}</td>
+							<td>
+								{#if p.subscriptions && p.subscriptions.length > 0}
+									<span class="events">{p.subscriptions.length}</span>
+								{:else}
+									—
+								{/if}
+							</td>
+							<td>
+								<span class="badge badge--{p.enabled ? 'active' : 'inactive'}">
+									{p.enabled ? t('admin.enabled', 'Enabled') : t('admin.disabled', 'Disabled')}
+								</span>
+							</td>
+							<td class="actions">
+								<button
+									class="icon-btn"
+									title={t('admin.plugins_details', 'Logs & details')}
+									aria-label={t('admin.plugins_details', 'Logs & details')}
+									onclick={() => openLogs(p)}
+								>
+									<Icon name="list" />
+								</button>
+								<button
+									class="icon-btn {p.enabled ? '' : 'icon-btn--success'}"
+									title={p.enabled ? t('admin.disable', 'Disable') : t('admin.enable', 'Enable')}
+									aria-label={p.enabled
+										? t('admin.disable', 'Disable')
+										: t('admin.enable', 'Enable')}
+									onclick={() => togglePlugin(p)}
+								>
+									<Icon name={p.enabled ? 'pause' : 'play'} />
+								</button>
+								<button
+									class="icon-btn icon-btn--danger"
+									title={t('common.delete', 'Delete')}
+									aria-label={t('common.delete', 'Delete')}
+									onclick={() => removePlugin(p)}
+								>
+									<Icon name="trash-alt" />
+								</button>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
 	{/if}
 </main>
 
@@ -290,15 +1675,22 @@
 	<form id="create-user-form" onsubmit={submitCreate} class="form">
 		<label
 			><span>{t('admin.username', 'Username')}</span>
-			<input bind:value={newUser.username} required /></label
+			<input bind:value={newUser.username} minlength="3" required /></label
 		>
 		<label
-			><span>{t('admin.email', 'Email')}</span>
-			<input type="email" bind:value={newUser.email} required /></label
+			><span
+				>{t('admin.email', 'Email')}
+				<span class="muted">({t('common.optional', 'optional')})</span></span
+			>
+			<input
+				type="email"
+				bind:value={newUser.email}
+				placeholder={t('admin.email_auto', 'Auto-generated if left blank')}
+			/></label
 		>
 		<label
 			><span>{t('admin.password', 'Password')}</span>
-			<input type="password" bind:value={newUser.password} required /></label
+			<input type="password" bind:value={newUser.password} minlength="8" required /></label
 		>
 		<label
 			><span>{t('admin.role', 'Role')}</span>
@@ -308,19 +1700,690 @@
 			</select></label
 		>
 		<label
-			><span>{t('admin.quota_gb', 'Quota (GB)')}</span>
-			<input type="number" min="0" bind:value={newUser.quotaGb} /></label
+			><span>{t('admin.quota', 'Quota')}</span>
+			<div class="quota-input">
+				<input type="number" min="0" step="0.1" bind:value={newUser.quotaValue} />
+				<select bind:value={newUser.quotaUnit}>
+					{#each QUOTA_UNITS as unit (unit.label)}<option value={unit.value}>{unit.label}</option
+						>{/each}
+				</select>
+			</div>
+			<span class="muted">{t('admin.quota_unlimited_hint', '0 = unlimited')}</span></label
 		>
+		{#if createError}<p class="status--error">{createError}</p>{/if}
 	</form>
 	{#snippet footer()}
 		<button class="btn" onclick={() => (createOpen = false)}>{t('common.cancel', 'Cancel')}</button>
-		<button class="btn btn--primary" type="submit" form="create-user-form">
-			{t('common.create', 'Create')}
+		<button class="btn btn--primary" type="submit" form="create-user-form" disabled={creating}>
+			{creating ? t('admin.creating', 'Creating…') : t('common.create', 'Create')}
+		</button>
+	{/snippet}
+</Modal>
+
+<!-- Quota edit modal -->
+<Modal
+	open={quotaModal !== null}
+	title={t('admin.edit_quota_title', 'Edit quota')}
+	onclose={() => (quotaModal = null)}
+>
+	{#if quotaModal}
+		<form
+			id="quota-form"
+			class="form"
+			onsubmit={(e) => {
+				e.preventDefault();
+				void saveQuota();
+			}}
+		>
+			<p class="muted">
+				{t('admin.quota_for', 'Quota for')} <strong>{quotaModal.username}</strong>
+			</p>
+			<label
+				><span>{t('admin.quota', 'Quota')}</span>
+				<div class="quota-input">
+					<input type="number" min="0" step="0.1" bind:value={quotaModal.value} />
+					<select bind:value={quotaModal.unit}>
+						{#each QUOTA_UNITS as unit (unit.label)}<option value={unit.value}>{unit.label}</option
+							>{/each}
+					</select>
+				</div>
+				<span class="muted">{t('admin.quota_unlimited_hint', '0 = unlimited')}</span></label
+			>
+		</form>
+	{/if}
+	{#snippet footer()}
+		<button class="btn" onclick={() => (quotaModal = null)}>{t('common.cancel', 'Cancel')}</button>
+		<button class="btn btn--primary" type="submit" form="quota-form">
+			{t('common.save', 'Save')}
+		</button>
+	{/snippet}
+</Modal>
+
+<!-- Reset-password modal -->
+<Modal
+	open={resetModal !== null}
+	title={t('admin.reset_password_title', 'Reset password')}
+	onclose={() => (resetModal = null)}
+>
+	{#if resetModal}
+		<form id="reset-pw-form" class="form" onsubmit={submitReset}>
+			<p class="muted">
+				{t('admin.reset_pw_for', 'New password for')} <strong>{resetModal.username}</strong>
+			</p>
+			<label
+				><span>{t('admin.new_password', 'New password')}</span>
+				<input type="password" bind:value={resetPassword} minlength="8" required /></label
+			>
+			{#if resetError}<p class="status--error">{resetError}</p>{/if}
+		</form>
+	{/if}
+	{#snippet footer()}
+		<button class="btn" onclick={() => (resetModal = null)}>{t('common.cancel', 'Cancel')}</button>
+		<button class="btn btn--primary" type="submit" form="reset-pw-form" disabled={resetting}>
+			{resetting ? t('admin.resetting', 'Resetting…') : t('admin.reset_btn', 'Reset')}
+		</button>
+	{/snippet}
+</Modal>
+
+<!-- Styled confirm modal (replaces native confirm) -->
+<Modal
+	open={confirmState !== null}
+	title={t('common.confirm', 'Confirm')}
+	onclose={() => resolveConfirm(false)}
+>
+	<p>{confirmState?.message}</p>
+	{#snippet footer()}
+		<button class="btn" onclick={() => resolveConfirm(false)}>{t('common.cancel', 'Cancel')}</button
+		>
+		<button class="btn btn--primary" onclick={() => resolveConfirm(true)}>
+			{t('common.confirm', 'Confirm')}
+		</button>
+	{/snippet}
+</Modal>
+
+<Modal
+	open={logsPlugin !== null}
+	title={logsPlugin?.name ?? t('admin.plugin_logs', 'Plugin logs')}
+	onclose={closeLogs}
+>
+	{#if logsPlugin}
+		<dl class="kv plugin-meta">
+			<dt>{t('admin.plugins_col_id', 'ID')}</dt>
+			<dd><code>{logsPlugin.id}</code></dd>
+			<dt>{t('admin.version', 'Version')}</dt>
+			<dd>{logsPlugin.version ?? '—'}</dd>
+			{#if logsPlugin.abi != null}
+				<dt>ABI</dt>
+				<dd>{logsPlugin.abi}</dd>
+			{/if}
+			<dt>{t('admin.plugins_col_events', 'Events')}</dt>
+			<dd>
+				{#if logsPlugin.subscriptions && logsPlugin.subscriptions.length > 0}
+					{#each logsPlugin.subscriptions as ev (ev)}<code class="event-tag">{ev}</code>
+					{/each}
+				{:else}
+					—
+				{/if}
+			</dd>
+			<dt>{t('admin.status', 'Status')}</dt>
+			<dd>
+				<span class="badge badge--{logsPlugin.enabled ? 'active' : 'inactive'}">
+					{logsPlugin.enabled ? t('admin.enabled', 'Enabled') : t('admin.disabled', 'Disabled')}
+				</span>
+			</dd>
+		</dl>
+	{/if}
+
+	{#if retention}
+		<form class="form retention-form" onsubmit={(e) => (e.preventDefault(), saveRetention())}>
+			<h3>{t('admin.plugins_retention', 'Log retention')}</h3>
+			<label
+				><span>{t('admin.plugins_retention_days', 'Keep for (days)')}</span>
+				<input type="number" min="0" bind:value={retentionDays} /></label
+			>
+			<label
+				><span>{t('admin.plugins_retention_max', 'Max size (MB)')}</span>
+				<input type="number" min="0" bind:value={retentionMb} /></label
+			>
+			{#if retentionMsg}<p class="muted">{retentionMsg}</p>{/if}
+			<button class="btn btn-secondary" type="submit"
+				>{t('admin.plugins_retention_save', 'Save retention')}</button
+			>
+		</form>
+	{/if}
+
+	<div class="logs-toolbar">
+		<select bind:value={logsLevel} onchange={reloadLogsFromStart}>
+			<option value="">{t('admin.logs_all', 'All levels')}</option>
+			<option value="info">info</option>
+			<option value="warn">warn</option>
+			<option value="error">error</option>
+		</select>
+		<input
+			placeholder={t('admin.logs_search', 'Search…')}
+			bind:value={logsSearch}
+			onkeydown={(e) => e.key === 'Enter' && reloadLogsFromStart()}
+		/>
+		<button class="btn btn-secondary" onclick={reloadLogsFromStart}
+			>{t('common.search', 'Search')}</button
+		>
+		<label class="live-toggle">
+			<input type="checkbox" bind:checked={logsLive} onchange={toggleLive} />
+			<span>{t('admin.logs_live', 'Live')}</span>
+		</label>
+	</div>
+	{#if logsLoading}
+		<p class="status">{t('common.loading', 'Loading…')}</p>
+	{:else if logs.length === 0}
+		<p class="status">{t('admin.logs_empty', 'No log entries.')}</p>
+	{:else}
+		<div class="logs-table-wrap">
+			<table class="table logs-table">
+				<thead>
+					<tr>
+						<th>{t('admin.logs_time', 'Time')}</th>
+						<th>{t('admin.logs_level', 'Level')}</th>
+						<th>{t('admin.logs_kind', 'Kind')}</th>
+						<th>{t('admin.logs_invocation', 'Invocation')}</th>
+						<th>{t('admin.logs_message', 'Message')}</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each logs as entry, i (i)}
+						<tr class="log-row log-row--{(entry.level ?? 'info').toLowerCase()}">
+							<td class="log-time">{timeAgo(entry.ts ?? entry.timestamp)}</td>
+							<td>
+								<span class="log-level log-level--{(entry.level ?? 'info').toLowerCase()}"
+									>{entry.level ?? 'info'}</span
+								>
+							</td>
+							<td><code>{logKind(entry)}</code></td>
+							<td><code class="log-inv">{entry.invocation_id ?? '—'}</code></td>
+							<td class="log-msg">{logMsg(entry)}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+	<div class="pager logs-pager">
+		<button class="btn" disabled={logsPage === 0} onclick={logsPrev}>‹</button>
+		<span>
+			{#if logsTotal === 0}
+				{t('admin.logs_empty', 'No log entries.')}
+			{:else}
+				{t(
+					'admin.logs_showing',
+					{
+						from: logsPage * LOGS_PAGE_SIZE + 1,
+						to: Math.min((logsPage + 1) * LOGS_PAGE_SIZE, logsTotal),
+						total: logsTotal
+					},
+					'Showing {{from}}–{{to}} of {{total}}'
+				)}
+			{/if}
+		</span>
+		<button class="btn" disabled={(logsPage + 1) * LOGS_PAGE_SIZE >= logsTotal} onclick={logsNext}
+			>›</button
+		>
+	</div>
+	{#snippet footer()}
+		<button class="btn btn-danger" onclick={purgeLogs}
+			>{t('admin.plugins_clear_logs', 'Clear logs')}</button
+		>
+		<button class="btn btn-secondary" onclick={closeLogs}>
+			{t('common.close', 'Close')}
 		</button>
 	{/snippet}
 </Modal>
 
 <style>
+	.logs-toolbar {
+		display: flex;
+		gap: var(--space-2);
+		margin-bottom: var(--space-3);
+	}
+
+	.logs-toolbar input {
+		flex: 1;
+		padding: var(--space-2) var(--space-3);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+	}
+
+	.live-toggle {
+		display: flex;
+		align-items: center;
+		gap: var(--space-1);
+		white-space: nowrap;
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+	}
+
+	.logs-table-wrap {
+		max-height: 50vh;
+		overflow: auto;
+	}
+
+	.logs-table {
+		font-family: var(--font-mono, monospace);
+		font-size: var(--text-sm);
+	}
+
+	.log-time {
+		color: var(--color-text-muted);
+		white-space: nowrap;
+	}
+
+	.log-inv {
+		font-size: var(--text-xs, 0.7rem);
+		color: var(--color-text-muted);
+	}
+
+	.log-level {
+		text-transform: uppercase;
+		font-size: var(--text-xs, 0.7rem);
+		font-weight: var(--weight-semibold, 600);
+	}
+
+	.log-level--error {
+		color: var(--color-danger-text);
+	}
+
+	.log-level--warn {
+		color: var(--color-warning-text);
+	}
+
+	.log-msg {
+		word-break: break-word;
+	}
+
+	.logs-pager {
+		margin-top: var(--space-3);
+	}
+
+	.card {
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg);
+		padding: var(--space-5);
+		margin-bottom: var(--space-4);
+	}
+
+	.card h2 {
+		margin: 0 0 var(--space-3);
+		font-size: 1.125rem;
+	}
+
+	.checkbox {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	.ds-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+		gap: var(--space-3);
+		margin-bottom: var(--space-4);
+	}
+
+	.ds-card {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+		padding: var(--space-4);
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg);
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+	}
+
+	.ds-num {
+		font-size: 1.5rem;
+		font-weight: var(--weight-bold);
+		color: var(--color-text-heading);
+	}
+
+	.ds-bar {
+		height: 8px;
+		background: var(--color-bg-muted);
+		border-radius: var(--radius-full);
+		overflow: hidden;
+		margin-bottom: var(--space-2);
+	}
+
+	.ds-fill {
+		height: 100%;
+		background: var(--color-success-text);
+	}
+
+	.ds-fill--warn {
+		background: var(--color-warning-text);
+	}
+
+	.ds-fill--danger {
+		background: var(--color-danger-text);
+	}
+
+	.kv {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: var(--space-1) var(--space-4);
+		margin: 0;
+	}
+
+	.kv dt {
+		color: var(--color-text-muted);
+	}
+
+	.kv dd {
+		margin: 0;
+	}
+
+	.badge {
+		display: inline-block;
+		padding: 0.05rem 0.4rem;
+		border-radius: var(--radius-sm);
+		font-size: var(--text-xs, 0.7rem);
+		font-weight: var(--weight-semibold, 600);
+		line-height: 1.4;
+		vertical-align: middle;
+	}
+
+	.badge--env {
+		margin-left: var(--space-2);
+		background: var(--color-warning-bg);
+		color: var(--color-warning-text);
+	}
+
+	.badge--oidc {
+		background: var(--color-info-bg);
+		color: var(--color-info-text);
+		text-transform: uppercase;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.badge--local {
+		background: var(--color-bg-muted);
+		color: var(--color-text-muted);
+		text-transform: uppercase;
+	}
+
+	.badge--active {
+		background: var(--color-success-bg);
+		color: var(--color-success-text);
+	}
+
+	.badge--inactive {
+		background: var(--color-bg-muted);
+		color: var(--color-text-muted);
+	}
+
+	.badge--admin {
+		background: var(--color-info-bg);
+		color: var(--color-info-text);
+		text-transform: uppercase;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.badge--user {
+		background: var(--color-bg-muted);
+		color: var(--color-text-muted);
+		text-transform: uppercase;
+	}
+
+	.badge--self {
+		margin-left: var(--space-1);
+		background: var(--color-warning-bg);
+		color: var(--color-warning-text);
+		text-transform: uppercase;
+	}
+
+	/* Enabled/disabled feature flag indicator on the dashboard cards. */
+	.ds-flag {
+		font-size: 1.125rem;
+		font-weight: var(--weight-bold);
+		color: var(--color-text-muted);
+	}
+
+	.ds-flag--on {
+		color: var(--color-success-text);
+	}
+
+	.warn-card {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+	}
+
+	.warn-card--warn {
+		border-color: var(--color-warning-text);
+		color: var(--color-warning-text);
+	}
+
+	.warn-card--danger {
+		border-color: var(--color-danger-text);
+		color: var(--color-danger-text);
+	}
+
+	/* Per-user storage-usage progress bar in the users table. */
+	.quota-cell {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+		min-width: 9rem;
+	}
+
+	.quota-bar {
+		height: 6px;
+		background: var(--color-bg-muted);
+		border-radius: var(--radius-full);
+		overflow: hidden;
+	}
+
+	.quota-fill {
+		height: 100%;
+		background: var(--color-success-text);
+	}
+
+	.quota-fill--warn {
+		background: var(--color-warning-text);
+	}
+
+	.quota-fill--danger {
+		background: var(--color-danger-text);
+	}
+
+	.quota-input {
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	.quota-input input {
+		flex: 1;
+	}
+
+	/* Icon-only row actions with hover tooltips (title attr). */
+	.icon-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-surface);
+		color: var(--color-text);
+		cursor: pointer;
+	}
+
+	.icon-btn:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+
+	.icon-btn--danger {
+		color: var(--color-danger-text);
+	}
+
+	.icon-btn--success {
+		color: var(--color-success-text);
+	}
+
+	.secret-hint {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		margin-top: var(--space-1);
+		font-size: var(--text-sm);
+		color: var(--color-success-text);
+	}
+
+	.registration-warning {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		margin-top: var(--space-3);
+	}
+
+	.alert--warn {
+		padding: var(--space-2) var(--space-3);
+		border-radius: var(--radius-md);
+		background: var(--color-warning-bg);
+		color: var(--color-warning-text);
+	}
+
+	/* Discovery / verify result panels. */
+	.discovery-result {
+		margin-top: var(--space-2);
+		padding: var(--space-3);
+		border-radius: var(--radius-md);
+		border: 1px solid var(--color-border);
+	}
+
+	.discovery-result strong {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	.discovery-result--ok {
+		border-color: var(--color-success-text);
+		color: var(--color-success-text);
+	}
+
+	.discovery-result--fail {
+		border-color: var(--color-danger-text);
+		color: var(--color-danger-text);
+	}
+
+	.discovery-result .kv {
+		margin-top: var(--space-2);
+		color: var(--color-text);
+	}
+
+	.callback-row {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		flex-wrap: wrap;
+	}
+
+	.install-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-3);
+		padding: var(--space-3);
+		border: 1px dashed var(--color-border);
+		border-radius: var(--radius-md);
+		margin-bottom: var(--space-3);
+	}
+
+	.install-bar .muted {
+		display: block;
+		font-size: var(--text-sm);
+	}
+
+	.install-bar .btn.disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+
+	.events {
+		display: inline-block;
+		min-width: 1.4rem;
+		text-align: center;
+		padding: 0 0.35rem;
+		border-radius: var(--radius-pill, 999px);
+		background: var(--color-bg-muted);
+		color: var(--color-text-muted);
+	}
+
+	.plugin-meta {
+		margin-bottom: var(--space-4);
+	}
+
+	.event-tag {
+		display: inline-block;
+		margin: 0 0.15rem 0.15rem 0;
+		padding: 0.05rem 0.35rem;
+		border-radius: var(--radius-sm);
+		background: var(--color-bg-muted);
+	}
+
+	.retention-form {
+		border-top: 1px solid var(--color-border);
+		padding-top: var(--space-3);
+		margin-bottom: var(--space-3);
+	}
+
+	.retention-form h3 {
+		margin: 0 0 var(--space-2);
+		font-size: 1rem;
+	}
+
+	.mig-failed {
+		margin-top: var(--space-2);
+	}
+
+	.mig-failed__list {
+		max-height: 12rem;
+		overflow: auto;
+		padding: var(--space-2);
+		background: var(--color-bg-muted);
+		border-radius: var(--radius-sm);
+		font-size: var(--text-xs, 0.75rem);
+		white-space: pre-wrap;
+		word-break: break-all;
+	}
+
+	.smtp-test {
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	.smtp-test input {
+		flex: 1;
+		padding: var(--space-2) var(--space-3);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+	}
+
+	.status--ok {
+		color: var(--color-success-text);
+	}
+
 	.admin {
 		max-width: 64rem;
 		margin: 0 auto;
diff --git a/frontend/src/routes/device/+page.svelte b/frontend/src/routes/device/+page.svelte
index 34c07d41..018f2e03 100644
--- a/frontend/src/routes/device/+page.svelte
+++ b/frontend/src/routes/device/+page.svelte
@@ -1,17 +1,45 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { onMount } from 'svelte';
-	import { decideDevice, lookupDeviceCode, type DeviceInfo } from '$lib/api/endpoints/device';
+	import {
+		decideDevice,
+		DeviceLookupFailure,
+		lookupDeviceCode,
+		type DeviceInfo
+	} from '$lib/api/endpoints/device';
 	import { t } from '$lib/i18n/index.svelte';
 
 	type Step = 'code' | 'loading' | 'review' | 'approved' | 'denied' | 'error';
 
+	// A complete user-code is 8 chars + a hyphen (e.g. ABCD-1234) → length 9.
+	const FULL_CODE_LENGTH = 9;
+
 	let code = $state(page.url.searchParams.get('code') ?? '');
 	let step = $state<Step>('code');
 	let info = $state<DeviceInfo | null>(null);
 	let errorText = $state('');
 	let busy = $state(false);
 
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+	let codeInput = $state<HTMLInputElement | null>(null);
+
+	function failureMessage(err: unknown): string {
+		if (err instanceof DeviceLookupFailure) {
+			switch (err.kind) {
+				case 'unauthorized':
+					return t(
+						'device.unauthorized',
+						'You must be logged in to authorize a device. Please log in first.'
+					);
+				case 'not-found':
+					return t('device.not_found', 'Code not found or expired. Please check and try again.');
+				default:
+					return t('device.lookup_failed', 'Failed to verify code. Please try again.');
+			}
+		}
+		return err instanceof Error ? err.message : String(err);
+	}
+
 	async function lookup(e?: SubmitEvent) {
 		e?.preventDefault();
 		if (!code) return;
@@ -21,11 +49,34 @@
 			info = await lookupDeviceCode(code);
 			step = 'review';
 		} catch (err) {
-			errorText = err instanceof Error ? err.message : String(err);
+			errorText = failureMessage(err);
 			step = 'error';
 		}
 	}
 
+	/**
+	 * Normalise the code field as the user types: uppercase, strip anything
+	 * that isn't [A-Z0-9-], auto-insert the hyphen after the first 4 chars,
+	 * then debounce a lookup once a full code is present.
+	 */
+	function onCodeInput(e: Event) {
+		const target = e.currentTarget as HTMLInputElement;
+		let val = target.value.toUpperCase().replace(/[^A-Z0-9-]/g, '');
+		if (val.length === 4 && !val.includes('-')) val = `${val}-`;
+		code = val;
+		// Reflect the normalised value back into the input.
+		target.value = val;
+		if (step === 'error') {
+			step = 'code';
+			errorText = '';
+		}
+
+		clearTimeout(debounceTimer);
+		if (val.length >= FULL_CODE_LENGTH) {
+			debounceTimer = setTimeout(() => void lookup(), 300);
+		}
+	}
+
 	async function decide(action: 'approve' | 'deny') {
 		busy = true;
 		try {
@@ -39,8 +90,16 @@
 		}
 	}
 
+	function backToCode() {
+		step = 'code';
+		errorText = '';
+		// Re-focus so the user can correct the code immediately.
+		queueMicrotask(() => codeInput?.focus());
+	}
+
 	onMount(() => {
 		if (code) void lookup();
+		else codeInput?.focus();
 	});
 </script>
 
@@ -48,13 +107,32 @@
 
 <main class="device">
 	<div class="device__card">
+		<div class="auth-logo">
+			<div class="auth-logo-icon">
+				<svg viewBox="120 120 280 280" aria-hidden="true">
+					<path
+						d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"
+					/>
+				</svg>
+			</div>
+			<div class="auth-logo-text"><span class="brand-oxi">Oxi</span>Cloud</div>
+		</div>
 		<h1>{t('device.title', 'Device verification')}</h1>
 
 		{#if step === 'code'}
 			<form onsubmit={lookup}>
 				<label class="device__field">
 					<span>{t('device.enter_code', 'Enter the code shown on your device')}</span>
-					<input bind:value={code} autocomplete="off" inputmode="text" />
+					<input
+						bind:this={codeInput}
+						value={code}
+						oninput={onCodeInput}
+						autocomplete="off"
+						autocapitalize="characters"
+						spellcheck="false"
+						inputmode="text"
+						maxlength={FULL_CODE_LENGTH}
+					/>
 				</label>
 				<button type="submit" disabled={!code}>{t('device.continue', 'Continue')}</button>
 			</form>
@@ -83,7 +161,7 @@
 			<p>{t('device.denied', 'Device access denied.')}</p>
 		{:else if step === 'error'}
 			<p class="device__error" role="alert">{errorText}</p>
-			<button onclick={() => (step = 'code')}>{t('common.retry', 'Try again')}</button>
+			<button onclick={backToCode}>{t('common.retry', 'Try again')}</button>
 		{/if}
 	</div>
 </main>
diff --git a/frontend/src/routes/favorites/+page.svelte b/frontend/src/routes/favorites/+page.svelte
index 79bb078d..4851810f 100644
--- a/frontend/src/routes/favorites/+page.svelte
+++ b/frontend/src/routes/favorites/+page.svelte
@@ -1,39 +1,272 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import FileRow from '$lib/components/FileRow.svelte';
-	import ResourceListShell from '$lib/components/ResourceListShell.svelte';
 	import {
+		dateBucket,
 		fetchFavoritesPage,
 		removeFavorite,
+		resolveOwnerName,
+		sizeBucket,
+		typeLabel,
 		type FavoritesResourceItem
 	} from '$lib/api/endpoints/favorites';
+	import { fileDownloadUrl } from '$lib/api/endpoints/files';
+	import { renameFile, deleteFile } from '$lib/api/endpoints/files';
+	import { renameFolder, deleteFolder } from '$lib/api/endpoints/folders';
+	import type { FileItem } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import FileViewer from '$lib/components/FileViewer.svelte';
+	import MoveDialog from '$lib/components/MoveDialog.svelte';
+	import ShareDialog from '$lib/components/ShareDialog.svelte';
+	import ResourceList, {
+		type ContextAction,
+		type GroupByDef,
+		type ResourceEntry
+	} from '$lib/components/ResourceList.svelte';
+	import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
-	import { formatDate } from '$lib/utils/display';
 
-	let items = $state<FavoritesResourceItem[]>([]);
+	let raw = $state<FavoritesResourceItem[]>([]);
 	let cursor = $state<string | undefined>(undefined);
 	let loading = $state(false);
 	let error = $state<string | null>(null);
+	let groupBy = $state('');
+	let reversed = $state(false);
+	let ownerNames = $state<Record<string, string>>({});
 
-	async function load(reset = false) {
+	const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
+
+	const entries = $derived(
+		raw.map((it): ResourceEntry => {
+			const isFile = it.resource_type === 'file';
+			const ownerId = it.resource.owner_id ?? null;
+			return {
+				id: it.resource.id,
+				name: it.resource.name,
+				kind: it.resource_type,
+				iconClass: it.resource.icon_class,
+				path: it.resource.path,
+				size: isFile ? (it.resource as FileItem).size : null,
+				date: it.favorited_at,
+				ownerId,
+				ownerName: ownerId ? (ownerNames[ownerId] ?? null) : null,
+				isFavorite: true,
+				category: isFile ? it.resource.category : 'Folder',
+				modifiedAt: it.resource.modified_at
+			};
+		})
+	);
+
+	const groupBys: GroupByDef[] = [
+		{ key: '', label: t('files.name', 'Name'), orderBy: 'name' },
+		{
+			key: 'owner',
+			label: t('groupby.owner', 'Owner'),
+			orderBy: 'owner',
+			bucketOf: (e) => e.ownerId ?? null,
+			labelOf: (id) => ownerNames[id] ?? id
+		},
+		{
+			key: 'type',
+			label: t('groupby.type', 'Type'),
+			orderBy: 'type',
+			bucketOf: (e) => e.category ?? 'other',
+			labelOf: (k) => typeLabel(k)
+		},
+		{
+			key: 'size',
+			label: t('groupby.size', 'Size'),
+			orderBy: 'size',
+			bucketOf: (e) => sizeBucket(e.kind === 'folder' ? null : e.size)
+		},
+		{
+			key: 'favoriteDate',
+			label: t('groupby.favoriteDate', 'Favorite date'),
+			orderBy: 'favorited_at',
+			bucketOf: (e) => dateBucket(e.date)
+		},
+		{
+			key: 'modifiedAt',
+			label: t('groupby.modifiedAt', 'Modified date'),
+			orderBy: 'modified_at',
+			bucketOf: (e) => dateBucket(e.modifiedAt)
+		}
+	];
+
+	async function resolveOwners(items: FavoritesResourceItem[]) {
+		const ids = [
+			...new Set(items.map((i) => i.resource.owner_id).filter((id): id is string => !!id))
+		];
+		await Promise.all(
+			ids.map(async (id) => {
+				if (ownerNames[id]) return;
+				const name = await resolveOwnerName(id);
+				ownerNames = { ...ownerNames, [id]: name };
+			})
+		);
+	}
+
+	async function load(reset = false, orderBy = 'name', rev = reversed) {
 		loading = true;
 		error = null;
 		try {
-			const page = await fetchFavoritesPage({ cursor: reset ? undefined : cursor });
-			items = reset ? page.items : [...items, ...page.items];
+			const page = await fetchFavoritesPage({
+				cursor: reset ? undefined : cursor,
+				orderBy,
+				reverse: rev,
+				resourceTypes: ['file', 'folder']
+			});
+			raw = reset ? page.items : [...raw, ...page.items];
 			cursor = page.next_cursor;
+			void resolveOwners(page.items);
 		} catch (e) {
-			error = e instanceof Error ? e.message : String(e);
+			console.error('favorites: load error', e);
+			error = t('errors_loadFailed', 'Failed to load items');
 		} finally {
 			loading = false;
 		}
 	}
 
-	async function unfavorite(item: FavoritesResourceItem) {
+	function orderByForGroup(): string {
+		return groupBys.find((g) => g.key === groupBy)?.orderBy ?? 'name';
+	}
+
+	let viewerOpen = $state(false);
+	let viewerFile = $state<FileItem | null>(null);
+
+	function open(entry: ResourceEntry) {
+		if (entry.kind === 'folder') {
+			goto(`/files/${entry.id}`);
+			return;
+		}
+		const item = byId.get(entry.id);
+		if (item) {
+			viewerFile = item.resource as FileItem;
+			viewerOpen = true;
+		}
+	}
+
+	async function unfavorite(entry: ResourceEntry) {
 		try {
-			await removeFavorite(item.resource_type, item.resource.id);
-			items = items.filter((i) => i.resource.id !== item.resource.id);
+			await removeFavorite(entry.kind, entry.id);
+			raw = raw.filter((i) => i.resource.id !== entry.id);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	// ── Context-menu actions ──────────────────────────────────────────────────
+	let moveOpen = $state(false);
+	let moveTarget = $state<{ id: string; name: string; kind: 'file' | 'folder' } | null>(null);
+	let moveItems = $state<{ id: string; name: string; kind: 'file' | 'folder' }[] | null>(null);
+	let shareOpen = $state(false);
+	let shareTarget = $state<{ id: string; name: string; kind: 'file' | 'folder' } | null>(null);
+
+	async function rename(entry: ResourceEntry) {
+		const name = await promptDialog({
+			title: t('common.rename', 'Rename'),
+			defaultValue: entry.name,
+			confirmText: t('common.rename', 'Rename')
+		});
+		if (!name || name === entry.name) return;
+		try {
+			if (entry.kind === 'file') await renameFile(entry.id, name);
+			else await renameFolder(entry.id, name);
+			await load(true, orderByForGroup());
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function remove(entry: ResourceEntry) {
+		const ok = await confirmDialog({
+			title: t('common.delete', 'Delete'),
+			message: t('files.confirm_delete', { name: entry.name }, 'Delete "{{name}}"?'),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
+		try {
+			if (entry.kind === 'file') await deleteFile(entry.id);
+			else await deleteFolder(entry.id);
+			raw = raw.filter((i) => i.resource.id !== entry.id);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	function downloadEntry(entry: ResourceEntry) {
+		if (entry.kind !== 'file') return;
+		const a = document.createElement('a');
+		a.href = fileDownloadUrl(entry.id);
+		a.download = entry.name;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+	}
+
+	const contextActions: ContextAction[] = [
+		{
+			key: 'download',
+			label: t('common.download', 'Download'),
+			icon: 'download',
+			run: downloadEntry
+		},
+		{
+			key: 'share',
+			label: t('files.share', 'Share'),
+			icon: 'share-alt',
+			run: (e) => {
+				shareTarget = { id: e.id, name: e.name, kind: e.kind };
+				shareOpen = true;
+			}
+		},
+		{
+			key: 'move',
+			label: t('files.move', 'Move'),
+			icon: 'arrows-alt',
+			run: (e) => {
+				moveItems = null;
+				moveTarget = { id: e.id, name: e.name, kind: e.kind };
+				moveOpen = true;
+			}
+		},
+		{ key: 'rename', label: t('common.rename', 'Rename'), icon: 'pen', run: rename },
+		{ key: 'delete', label: t('common.delete', 'Delete'), icon: 'trash', danger: true, run: remove }
+	];
+
+	// ── Selection + batch ─────────────────────────────────────────────────────
+	let selectedIds = $state<Set<string>>(new Set());
+	const selectedEntries = $derived(entries.filter((e) => selectedIds.has(e.id)));
+
+	function batchTargets() {
+		return selectedEntries.map((e) => ({ id: e.id, name: e.name, kind: e.kind }));
+	}
+
+	function batchDownload() {
+		for (const e of selectedEntries) downloadEntry(e);
+	}
+
+	async function batchDelete() {
+		const ok = await confirmDialog({
+			title: t('common.delete', 'Delete'),
+			message: t(
+				'files.confirm_delete_n',
+				{ count: selectedEntries.length },
+				'Delete {{count}} item(s)?'
+			),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
+		try {
+			await Promise.all(
+				selectedEntries.map((e) => (e.kind === 'file' ? deleteFile(e.id) : deleteFolder(e.id)))
+			);
+			const removed = new Set(selectedEntries.map((e) => e.id));
+			raw = raw.filter((i) => !removed.has(i.resource.id));
+			selectedIds = new Set();
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
 		}
@@ -44,45 +277,58 @@
 
 <svelte:head><title>{t('nav.favorites', 'Favorites')} · OxiCloud</title></svelte:head>
 
-<h1 class="page-title">{t('nav.favorites', 'Favorites')}</h1>
-
-<ResourceListShell
+<ResourceList
+	title={t('nav.favorites', 'Favorites')}
+	items={entries}
 	{loading}
 	{error}
-	empty={items.length === 0}
-	emptyText={t('favorites.empty', 'No favorites yet.')}
+	emptyIcon="star"
+	emptyText={t('favorites.empty_state', 'No favorites yet')}
+	emptyHint={t('favorites.empty_hint', 'Star files and folders to find them here quickly')}
 	hasMore={!!cursor}
-	onloadmore={() => load(false)}
+	onloadmore={() => load(false, orderByForGroup())}
+	onopen={open}
+	onfavorite={unfavorite}
+	showOwner
+	selectable
+	{contextActions}
+	{groupBys}
+	bind:groupBy
+	bind:reversed
+	onreload={(orderBy, rev) => {
+		cursor = undefined;
+		load(true, orderBy, rev);
+	}}
+	onselectionchange={(ids) => (selectedIds = ids)}
 >
-	{#each items as item (item.resource.id)}
-		<FileRow
-			name={item.resource.name}
-			iconClass={item.resource.icon_class}
-			subtitle={item.resource.path}
-			date={formatDate(item.favorited_at)}
+	{#snippet batchToolbar()}
+		<button class="btn btn-secondary" onclick={batchDownload}>
+			<Icon name="download" />
+			{t('common.download', 'Download')}
+		</button>
+		<button
+			class="btn btn-secondary"
+			onclick={() => {
+				moveTarget = null;
+				moveItems = batchTargets();
+				moveOpen = true;
+			}}><Icon name="arrows-alt" /> {t('files.move', 'Move')}</button
 		>
-			{#snippet actions()}
-				<button class="link-btn" onclick={() => unfavorite(item)}>
-					{t('favorites.remove', 'Remove')}
-				</button>
-			{/snippet}
-		</FileRow>
-	{/each}
-</ResourceListShell>
+		<button class="btn btn-danger" onclick={batchDelete}>
+			<Icon name="trash" />
+			{t('common.delete', 'Delete')}
+		</button>
+	{/snippet}
+</ResourceList>
 
-<style>
-	.page-title {
-		margin: 0;
-		padding: 1rem 1rem 0;
-		font-size: 1.5rem;
-		color: var(--color-text-heading);
-	}
-
-	.link-btn {
-		background: none;
-		border: none;
-		color: var(--color-primary);
-		cursor: pointer;
-		font-size: 0.875rem;
-	}
-</style>
+<FileViewer bind:open={viewerOpen} file={viewerFile} />
+<MoveDialog
+	bind:open={moveOpen}
+	item={moveTarget}
+	items={moveItems}
+	onmoved={() => {
+		selectedIds = new Set();
+		load(true, orderByForGroup());
+	}}
+/>
+<ShareDialog bind:open={shareOpen} item={shareTarget} />
diff --git a/frontend/src/routes/files/[...path]/+page.svelte b/frontend/src/routes/files/[...path]/+page.svelte
index 37798b71..8421f538 100644
--- a/frontend/src/routes/files/[...path]/+page.svelte
+++ b/frontend/src/routes/files/[...path]/+page.svelte
@@ -7,21 +7,45 @@
 		deleteFolder,
 		getFolder,
 		listFolder,
+		moveFolder,
 		renameFolder,
 		type FolderListing
 	} from '$lib/api/endpoints/folders';
 	import {
 		deleteFile,
 		fileDownloadUrl,
-		fileInlineUrl,
+		fileThumbnailUrl,
+		moveFile,
 		renameFile,
-		uploadFile
+		uploadFile,
+		uploadFileWithProgress
 	} from '$lib/api/endpoints/files';
-	import type { FileItem, FolderItem } from '$lib/api/types';
+	import { folderZipUrl } from '$lib/api/endpoints/folders';
+	import { tryDeltaUpload } from '$lib/api/endpoints/deltaUpload';
+	import { addFavorite, fetchFavoritesPage, removeFavorite } from '$lib/api/endpoints/favorites';
+	import { fetchMyShares } from '$lib/api/endpoints/grants';
+	import { canEditWithWopi, getEditorUrlWithFallback } from '$lib/api/endpoints/wopi';
+	import { addTracks, createPlaylist, listPlaylists } from '$lib/api/endpoints/music';
+	import { apiFetch } from '$lib/api/client';
+	import { getCsrfHeaders } from '$lib/api/csrf';
+	import type { FileItem, FolderItem, ItemType } from '$lib/api/types';
+	import FileViewer from '$lib/components/FileViewer.svelte';
+	import ListToolbar from '$lib/components/ListToolbar.svelte';
+	import MoveDialog from '$lib/components/MoveDialog.svelte';
+	import ShareDialog from '$lib/components/ShareDialog.svelte';
+	import WopiEditor from '$lib/components/WopiEditor.svelte';
 	import { t } from '$lib/i18n/index.svelte';
+	import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
 	import { files as filesStore } from '$lib/stores/files.svelte';
 	import { session } from '$lib/stores/session.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
+	import {
+		dateBucket,
+		ownerLabel,
+		relativeTimeAgo,
+		sizeBucket,
+		typeLabel
+	} from '$lib/stores/files.svelte';
 	import { formatBytes } from '$lib/utils/format';
 	import { formatDate, iconNameFromClass } from '$lib/utils/display';
 
@@ -33,11 +57,75 @@
 	let crumbs = $state<Array<{ id: string; name: string }>>([]);
 	let currentId = $state<string | null>(null);
 	let loading = $state(false);
+	// Skeleton is delayed ~100ms behind `loading` so fast loads don't flash it.
+	let showSkeleton = $state(false);
 	let error = $state<string | null>(null);
 	let fileInput = $state<HTMLInputElement | null>(null);
 	let uploading = $state(false);
 	let dragOver = $state(false);
 
+	interface ActionTarget {
+		id: string;
+		name: string;
+		kind: ItemType;
+	}
+	let moveOpen = $state(false);
+	let moveMode = $state<'move' | 'copy'>('move');
+	let shareOpen = $state(false);
+	let actionTarget = $state<ActionTarget | null>(null);
+	let moveItems = $state<ActionTarget[] | null>(null);
+
+	// Favorite + shared badges for items in the current folder.
+	let favoriteIds = $state<Set<string>>(new Set());
+	let sharedIds = $state<Set<string>>(new Set());
+
+	function openMove(kind: ItemType, id: string, name: string) {
+		actionTarget = { id, name, kind };
+		moveItems = null;
+		moveMode = 'move';
+		moveOpen = true;
+	}
+	function openCopy(kind: ItemType, id: string, name: string) {
+		actionTarget = { id, name, kind };
+		moveItems = null;
+		moveMode = 'copy';
+		moveOpen = true;
+	}
+	function openShare(kind: ItemType, id: string, name: string) {
+		actionTarget = { id, name, kind };
+		shareOpen = true;
+	}
+
+	/** Load favorite + outgoing-share id sets so items can show badges. */
+	async function loadBadges() {
+		try {
+			const [favs, shares] = await Promise.all([
+				fetchFavoritesPage({ limit: 200 }).catch(() => null),
+				fetchMyShares({ limit: 200 }).catch(() => null)
+			]);
+			favoriteIds = new Set((favs?.items ?? []).map((f) => f.resource.id));
+			sharedIds = new Set((shares?.items ?? []).map((s) => s.resource.id));
+		} catch {
+			/* badges are best-effort */
+		}
+	}
+
+	async function toggleFavorite(kind: ItemType, id: string) {
+		const isFav = favoriteIds.has(id);
+		// Optimistic toggle, reconcile on failure.
+		const next = new Set(favoriteIds);
+		if (isFav) next.delete(id);
+		else next.add(id);
+		favoriteIds = next;
+		try {
+			if (isFav) await removeFavorite(kind, id);
+			else await addFavorite(kind, id);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+			await loadBadges();
+		}
+	}
+
 	async function buildCrumbs(segments: string[]): Promise<Array<{ id: string; name: string }>> {
 		// Names for each id in the trail; tolerate failures with a fallback label.
 		const metas = await Promise.all(
@@ -53,6 +141,11 @@
 	async function load() {
 		loading = true;
 		error = null;
+		// Arm the delayed skeleton; cancel it the moment the load settles so fast
+		// loads never flash placeholders (mirrors filesView.js' 100ms timer).
+		const skeletonTimer = setTimeout(() => {
+			if (loading) showSkeleton = true;
+		}, 100);
 		try {
 			// External users have no home folder; send them to shared-with-me.
 			if (session.isExternalUser && pathSegments.length === 0) {
@@ -70,13 +163,37 @@
 			const [data, trail] = await Promise.all([listFolder(folderId), buildCrumbs(pathSegments)]);
 			listing = data;
 			crumbs = trail;
+			void loadBadges();
+			maybeOpenDeepLink();
 		} catch (e) {
-			error = e instanceof Error ? e.message : String(e);
+			// 403 → friendly message rather than the raw "Forbidden" error string.
+			const status = (e as { status?: number })?.status;
+			error =
+				status === 403
+					? t('errors.forbidden', 'Could not load files')
+					: e instanceof Error
+						? e.message
+						: String(e);
 		} finally {
+			clearTimeout(skeletonTimer);
 			loading = false;
+			showSkeleton = false;
 		}
 	}
 
+	/**
+	 * Deep-link auto-open: when the URL carries `?file=<id>` and that file is in
+	 * the freshly loaded listing, open it in the viewer (ported from
+	 * filesView.js' `app.viewFile` handling). Best-effort — a missing/unlisted
+	 * file is silently ignored.
+	 */
+	function maybeOpenDeepLink() {
+		const fileId = page.url.searchParams.get('file');
+		if (!fileId) return;
+		const file = listing.files.find((f) => f.id === fileId);
+		if (file) openFile(file);
+	}
+
 	function openFolder(folder: FolderItem) {
 		goto(`/files/${[...pathSegments, folder.id].join('/')}`);
 	}
@@ -86,7 +203,11 @@
 	}
 
 	async function onNewFolder() {
-		const name = prompt(t('files.new_folder_prompt', 'New folder name'));
+		const name = await promptDialog({
+			title: t('files.new_folder', 'New folder'),
+			placeholder: t('files.new_folder_prompt', 'New folder name'),
+			confirmText: t('common.create', 'Create')
+		});
 		if (!name) return;
 		try {
 			await createFolder(name, currentId);
@@ -96,22 +217,59 @@
 		}
 	}
 
+	/**
+	 * Upload a batch of files into the current folder, reporting aggregate
+	 * progress through a single bell notification with a progress bar.
+	 */
+	async function uploadBatch(files: File[]) {
+		if (files.length === 0) return;
+		uploading = true;
+		const total = files.length;
+		const label = (done: number) =>
+			total === 1
+				? t('files.uploading_file', { name: files[0].name }, `Uploading ${files[0].name}…`)
+				: t('files.uploading_n', { done, total }, `Uploading ${done}/${total} files…`);
+		const nid = ui.startProgress(label(0));
+		let savedBytes = 0;
+		try {
+			for (let i = 0; i < files.length; i++) {
+				const report = (frac: number) => {
+					const base = i / total;
+					const step = Number.isNaN(frac) ? 0 : frac / total;
+					ui.updateProgress(nid, Math.round((base + step) * 100), label(i));
+				};
+				// Delta upload for large files (dedup); transparently falls back.
+				const delta = await tryDeltaUpload(files[i], currentId, (pct) => report(pct / 100));
+				if (delta) {
+					if (!delta.ok) throw new Error(delta.errorMsg ?? 'upload failed');
+					savedBytes += delta.savedBytes ?? 0;
+				} else {
+					await uploadFileWithProgress(currentId, files[i], report);
+				}
+				ui.updateProgress(nid, Math.round(((i + 1) / total) * 100), label(i + 1));
+			}
+			const done =
+				savedBytes > 0
+					? t(
+							'files.uploaded_saved',
+							{ mb: (savedBytes / (1024 * 1024)).toFixed(1) },
+							`Upload complete — ${(savedBytes / (1024 * 1024)).toFixed(1)} MB deduplicated`
+						)
+					: t('files.uploaded', 'Upload complete');
+			ui.finishProgress(nid, done, 'success');
+			await load();
+		} catch (err) {
+			ui.finishProgress(nid, err instanceof Error ? err.message : String(err), 'error');
+		} finally {
+			uploading = false;
+		}
+	}
+
 	async function onUpload(e: Event) {
 		const input = e.target as HTMLInputElement;
 		if (!input.files?.length) return;
-		uploading = true;
-		try {
-			for (const file of Array.from(input.files)) {
-				await uploadFile(currentId, file);
-			}
-			ui.notify(t('files.uploaded', 'Upload complete'), 'success');
-			await load();
-		} catch (err) {
-			ui.notify(err instanceof Error ? err.message : String(err), 'error');
-		} finally {
-			uploading = false;
-			input.value = '';
-		}
+		await uploadBatch(Array.from(input.files));
+		input.value = '';
 	}
 
 	async function onDrop(e: DragEvent) {
@@ -119,20 +277,15 @@
 		dragOver = false;
 		const dropped = e.dataTransfer?.files;
 		if (!dropped?.length) return;
-		uploading = true;
-		try {
-			for (const file of Array.from(dropped)) await uploadFile(currentId, file);
-			ui.notify(t('files.uploaded', 'Upload complete'), 'success');
-			await load();
-		} catch (err) {
-			ui.notify(err instanceof Error ? err.message : String(err), 'error');
-		} finally {
-			uploading = false;
-		}
+		await uploadBatch(Array.from(dropped));
 	}
 
 	async function renameItem(kind: 'file' | 'folder', id: string, current: string) {
-		const name = prompt(t('files.rename_prompt', 'New name'), current);
+		const name = await promptDialog({
+			title: t('common.rename', 'Rename'),
+			defaultValue: current,
+			confirmText: t('common.save', 'Save')
+		});
 		if (!name || name === current) return;
 		try {
 			if (kind === 'file') await renameFile(id, name);
@@ -144,7 +297,13 @@
 	}
 
 	async function deleteItem(kind: 'file' | 'folder', id: string, name: string) {
-		if (!confirm(t('files.confirm_delete', { name }, 'Move "{{name}}" to trash?'))) return;
+		const ok = await confirmDialog({
+			title: t('common.delete', 'Delete'),
+			message: t('files.confirm_delete', { name }, 'Move "{{name}}" to trash?'),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
 		try {
 			if (kind === 'file') await deleteFile(id);
 			else await deleteFolder(id);
@@ -154,8 +313,443 @@
 		}
 	}
 
+	let viewerOpen = $state(false);
+	let viewerFile = $state<FileItem | null>(null);
+
 	function openFile(file: FileItem) {
-		window.open(fileInlineUrl(file.id), '_blank', 'noopener');
+		viewerFile = file;
+		viewerOpen = true;
+	}
+
+	/**
+	 * Whether the server can render a thumbnail preview for this file. Images and
+	 * videos always have one; PDFs (and other thumbnail-capable docs) do too, so
+	 * surface those rather than a generic icon. A failed <img> load falls back to
+	 * the icon via onerror, so being permissive here is safe.
+	 */
+	function canThumbnail(file: FileItem): boolean {
+		const m = file.mime_type ?? '';
+		if (m.startsWith('image/') || m.startsWith('video/')) return true;
+		if (m === 'application/pdf') return true;
+		return /\.pdf$/i.test(file.name);
+	}
+
+	// ── Multi-select + batch ────────────────────────────────────────────────
+	let selected = $state<Set<string>>(new Set());
+	// Anchor row id for shift-click range selection.
+	let selectionAnchor = $state<string | null>(null);
+
+	function toggleSelected(id: string) {
+		const next = new Set(selected);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		selected = next;
+		selectionAnchor = id;
+	}
+	function clearSelection() {
+		selected = new Set();
+		selectionAnchor = null;
+	}
+
+	/**
+	 * Row click selection mirroring static/js/components/resourceList.js:
+	 *  - Shift+click selects the contiguous range from the anchor to this row.
+	 *  - Ctrl/Cmd+click toggles this row without clearing the rest.
+	 *  - A plain click (no modifier) opens the item — handled by the caller.
+	 * Returns true when the click was consumed as a selection gesture.
+	 */
+	function handleSelectionClick(e: MouseEvent, id: string): boolean {
+		if (e.shiftKey && selectionAnchor) {
+			e.preventDefault();
+			const a = orderedIds.indexOf(selectionAnchor);
+			const b = orderedIds.indexOf(id);
+			if (a !== -1 && b !== -1) {
+				const [lo, hi] = a < b ? [a, b] : [b, a];
+				selected = new Set([...selected, ...orderedIds.slice(lo, hi + 1)]);
+			}
+			return true;
+		}
+		if (e.ctrlKey || e.metaKey) {
+			e.preventDefault();
+			toggleSelected(id);
+			return true;
+		}
+		return false;
+	}
+
+	const selectedCount = $derived(selected.size);
+	const totalCount = $derived(listing.folders.length + listing.files.length);
+
+	function toggleSelectAll() {
+		if (selected.size === totalCount) clearSelection();
+		else selected = new Set([...listing.folders, ...listing.files].map((i) => i.id));
+	}
+
+	/**
+	 * Download the whole selection as a single zip via POST /api/batch/download —
+	 * folders are included (the old per-item loop silently skipped them). A lone
+	 * file still streams directly so it keeps its original name/extension.
+	 */
+	async function batchDownload() {
+		const fileIds: string[] = [];
+		const folderIds: string[] = [];
+		for (const id of selected) {
+			if (listing.folders.some((f) => f.id === id)) folderIds.push(id);
+			else if (listing.files.some((f) => f.id === id)) fileIds.push(id);
+		}
+		if (fileIds.length === 0 && folderIds.length === 0) return;
+
+		// Single file, no folders → direct download (preserves the real name).
+		if (fileIds.length === 1 && folderIds.length === 0) {
+			const file = listing.files.find((f) => f.id === fileIds[0]);
+			if (file) {
+				const a = document.createElement('a');
+				a.href = fileDownloadUrl(file.id);
+				a.download = file.name;
+				document.body.appendChild(a);
+				a.click();
+				a.remove();
+			}
+			return;
+		}
+
+		const stamp = new Date().toISOString().replace('T', ' ').replace(/\..*/, '').replace(/:/g, '-');
+		const zipName = `oxicloud ${stamp}.zip`;
+		try {
+			const res = await apiFetch('/api/batch/download', {
+				method: 'POST',
+				credentials: 'same-origin',
+				headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
+				body: JSON.stringify({ file_ids: fileIds, folder_ids: folderIds })
+			});
+			if (!res.ok) throw new Error(`Server returned ${res.status}`);
+			const blob = await res.blob();
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = zipName;
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+			URL.revokeObjectURL(url);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	/** Batch add the selection to favorites — single /api/favorites/batch call. */
+	async function batchFavorites() {
+		const items = selectionTargets().filter((it) => !favoriteIds.has(it.id));
+		if (items.length === 0) {
+			ui.notify(t('files.already_favorites', 'All selected items are already favorites'), 'info');
+			clearSelection();
+			return;
+		}
+		try {
+			const res = await apiFetch('/api/favorites/batch', {
+				method: 'POST',
+				credentials: 'same-origin',
+				headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
+				body: JSON.stringify({
+					items: items.map((it) => ({ item_id: it.id, item_type: it.kind }))
+				})
+			});
+			if (!res.ok) throw new Error(`Server returned ${res.status}`);
+			favoriteIds = new Set([...favoriteIds, ...items.map((it) => it.id)]);
+			ui.notify(t('files.added_favorites', 'Added to favorites'), 'success');
+			clearSelection();
+			void loadBadges();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	function selectionTargets(): ActionTarget[] {
+		return [...selected]
+			.map((id) => {
+				const folder = listing.folders.find((f) => f.id === id);
+				if (folder) return { id, name: folder.name, kind: 'folder' as ItemType };
+				const file = listing.files.find((f) => f.id === id);
+				return file ? { id, name: file.name, kind: 'file' as ItemType } : null;
+			})
+			.filter((x): x is ActionTarget => x !== null);
+	}
+
+	function batchMove() {
+		const items = selectionTargets();
+		if (items.length) {
+			moveItems = items;
+			moveMode = 'move';
+			moveOpen = true;
+		}
+	}
+
+	function batchCopy() {
+		const items = selectionTargets();
+		if (items.length) {
+			moveItems = items;
+			moveMode = 'copy';
+			moveOpen = true;
+		}
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		const tag = (e.target as HTMLElement)?.tagName;
+		if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+		if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
+			e.preventDefault();
+			toggleSelectAll();
+		} else if (e.key === 'Escape' && selected.size) {
+			clearSelection();
+		} else if (e.key === 'Delete' && selected.size) {
+			// Delete only — Backspace was dropped: it triggered accidental deletes.
+			e.preventDefault();
+			void batchDelete();
+		}
+	}
+
+	async function batchDelete() {
+		const ids = [...selected];
+		const ok = await confirmDialog({
+			title: t('files.batch_delete', 'Delete selected'),
+			message: t('files.confirm_batch_delete', { n: ids.length }, 'Move {{n}} items to trash?'),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
+		for (const id of ids) {
+			const folder = listing.folders.find((f) => f.id === id);
+			try {
+				if (folder) await deleteFolder(id);
+				else await deleteFile(id);
+			} catch (e) {
+				ui.notify(e instanceof Error ? e.message : String(e), 'error');
+			}
+		}
+		clearSelection();
+		await load();
+	}
+
+	// ── Drag-to-move ─────────────────────────────────────────────────────────
+	const DRAG_TYPE = 'application/x-oxi-item';
+	let dropFolderId = $state<string | null>(null);
+
+	/**
+	 * Begin dragging an item. When the dragged row is part of the current
+	 * selection, the whole selection travels (mirrors ui.js' multi-item drag);
+	 * otherwise just the single item moves.
+	 */
+	function onItemDragStart(e: DragEvent, kind: ItemType, id: string, name: string) {
+		const items: ActionTarget[] =
+			selected.has(id) && selected.size > 1 ? selectionTargets() : [{ id, name, kind }];
+		e.dataTransfer?.setData(DRAG_TYPE, JSON.stringify(items));
+		if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';
+	}
+
+	function dragPayload(e: DragEvent): ActionTarget[] {
+		const raw = e.dataTransfer?.getData(DRAG_TYPE);
+		if (!raw) return [];
+		try {
+			const parsed = JSON.parse(raw);
+			return Array.isArray(parsed) ? parsed : [parsed];
+		} catch {
+			return [];
+		}
+	}
+
+	async function moveInto(targetFolderId: string, e: DragEvent) {
+		const items = dragPayload(e).filter((it) => it.id !== targetFolderId);
+		if (items.length === 0) return;
+		try {
+			for (const it of items) {
+				if (it.kind === 'file') await moveFile(it.id, targetFolderId);
+				else await moveFolder(it.id, targetFolderId);
+			}
+			clearSelection();
+			await load();
+		} catch (err) {
+			ui.notify(err instanceof Error ? err.message : String(err), 'error');
+		}
+	}
+
+	function onFolderDrop(e: DragEvent, folder: FolderItem) {
+		if (!e.dataTransfer?.types.includes(DRAG_TYPE)) return; // external file drop → page dropzone
+		e.preventDefault();
+		e.stopPropagation();
+		dropFolderId = null;
+		void moveInto(folder.id, e);
+	}
+
+	function onCrumbDrop(e: DragEvent, folderId: string) {
+		if (!e.dataTransfer?.types.includes(DRAG_TYPE)) return;
+		e.preventDefault();
+		void moveInto(folderId, e);
+	}
+
+	// ── Right-click context menu ─────────────────────────────────────────────
+	let ctxOpen = $state(false);
+	let ctxX = $state(0);
+	let ctxY = $state(0);
+	let ctxTarget = $state<ActionTarget | null>(null);
+
+	function openContext(e: MouseEvent, kind: ItemType, id: string, name: string) {
+		e.preventDefault();
+		e.stopPropagation();
+		ctxTarget = { id, name, kind };
+		// Clamp to viewport so the menu never overflows offscreen.
+		ctxX = Math.min(e.clientX, window.innerWidth - 200);
+		ctxY = Math.min(e.clientY, window.innerHeight - 320);
+		ctxOpen = true;
+	}
+	function closeContext() {
+		ctxOpen = false;
+		ctxTarget = null;
+	}
+
+	// ── WOPI office editor (context-menu entries) ────────────────────────────
+	let wopiOpen = $state(false);
+	let wopiAction = $state<'edit' | 'view'>('edit');
+	let wopiFile = $state<{ id: string; name: string } | null>(null);
+	// Editability of the current context-menu target file, resolved async.
+	let ctxCanEditWopi = $state(false);
+
+	// Probe WOPI editability whenever the context target changes to a file. Image
+	// files use the inline viewer, so they never show the editor entries.
+	$effect(() => {
+		const tg = ctxTarget;
+		ctxCanEditWopi = false;
+		if (!tg || tg.kind !== 'file') return;
+		const f = listing.files.find((x) => x.id === tg.id);
+		if (!f || (f.mime_type ?? '').startsWith('image/')) return;
+		void canEditWithWopi(tg.name).then((ok) => {
+			// Guard against a stale resolve after the menu moved to another target.
+			if (ctxTarget?.id === tg.id) ctxCanEditWopi = ok;
+		});
+	});
+
+	function openWopi(id: string, name: string, action: 'edit' | 'view') {
+		wopiFile = { id, name };
+		wopiAction = action;
+		wopiOpen = true;
+	}
+
+	async function openWopiTab(id: string, name: string) {
+		// New-tab editing posts the token to /wopi/edit; open a blank tab first so
+		// the editor URL fetch (async) isn't treated as a popup by the browser.
+		const win = window.open('', '_blank');
+		try {
+			const data = await getEditorUrlWithFallback(id, name, 'edit');
+			const url = `/wopi/edit/${encodeURIComponent(id)}?access_token=${encodeURIComponent(data.access_token)}`;
+			if (win) win.location.href = url;
+			else window.open(url, '_blank');
+		} catch (e) {
+			win?.close();
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	// ── Add audio file to a playlist ──────────────────────────────────────────
+	function isAudio(file: FileItem | undefined): boolean {
+		return (file?.mime_type ?? '').startsWith('audio/');
+	}
+
+	/**
+	 * Prompt for a playlist (by name) and add the file to it; an unknown name
+	 * creates a new playlist. Mirrors contextMenus.showPlaylistDialog without the
+	 * bespoke modal — kept lightweight via the shared prompt dialog.
+	 */
+	async function addToPlaylist(file: FileItem) {
+		let playlists: Awaited<ReturnType<typeof listPlaylists>>;
+		try {
+			playlists = await listPlaylists();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+			return;
+		}
+		const existing = playlists.map((p) => p.name).join(', ');
+		const name = await promptDialog({
+			title: t('music.add_to_playlist', 'Add to playlist'),
+			message: existing
+				? t(
+						'music.pick_or_create',
+						{ list: existing },
+						'Existing: {{list}}. Type a name to add or create.'
+					)
+				: t('music.create_playlist_hint', 'Type a playlist name to create one.'),
+			placeholder: t('music.playlist_name', 'Playlist name'),
+			confirmText: t('common.add', 'Add')
+		});
+		if (!name) return;
+		try {
+			const match = playlists.find((p) => p.name.toLowerCase() === name.toLowerCase());
+			const playlist = match ?? (await createPlaylist(name));
+			await addTracks(playlist.id, [file.id]);
+			ui.notify(t('music.added_to_playlist', 'Added to playlist'), 'success');
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	// ── Open the parent folder of a file ──────────────────────────────────────
+	function openParentFolder(file: FileItem) {
+		// The current view already lists files inside their folder; navigate to the
+		// file's own folder id (handles deep-link / search contexts where the file's
+		// folder differs from the current path).
+		goto(`/files/${file.folder_id}`);
+	}
+
+	// ── Download a folder as a zip archive ────────────────────────────────────
+	function downloadFolderZip(folder: { id: string; name: string }) {
+		const a = document.createElement('a');
+		a.href = folderZipUrl(folder.id);
+		a.download = `${folder.name}.zip`;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+	}
+
+	// ── Recursive folder upload ──────────────────────────────────────────────
+	let folderInput = $state<HTMLInputElement | null>(null);
+
+	async function onUploadFolder(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const files = input.files ? Array.from(input.files) : [];
+		if (files.length === 0) return;
+		uploading = true;
+		try {
+			// Map each relative directory path to its created folder id, so files
+			// land in the right place. The root maps to the current folder.
+			const dirIds = new Map<string, string | null>([['', currentId]]);
+
+			async function ensureDir(relDir: string): Promise<string | null> {
+				if (dirIds.has(relDir)) return dirIds.get(relDir) ?? null;
+				const parts = relDir.split('/');
+				const name = parts.pop() as string;
+				const parentRel = parts.join('/');
+				const parentId = await ensureDir(parentRel);
+				const created = await createFolder(name, parentId);
+				dirIds.set(relDir, created.id);
+				return created.id;
+			}
+
+			for (const file of files) {
+				// webkitRelativePath: "chosenDir/sub/.../file.ext" — recreate the whole
+				// tree (including the chosen folder) under the current folder.
+				const rel =
+					(file as File & { webkitRelativePath?: string }).webkitRelativePath ?? file.name;
+				const segs = rel.split('/');
+				segs.pop(); // drop the filename, keep the directory trail
+				const dirId = await ensureDir(segs.join('/'));
+				await uploadFile(dirId, file);
+			}
+			ui.notify(t('files.uploaded', 'Upload complete'), 'success');
+			await load();
+		} catch (err) {
+			ui.notify(err instanceof Error ? err.message : String(err), 'error');
+		} finally {
+			uploading = false;
+			input.value = '';
+		}
 	}
 
 	const isEmpty = $derived(listing.folders.length === 0 && listing.files.length === 0);
@@ -163,16 +757,162 @@
 		filesStore.viewMode === 'grid' ? 'files-grid-view' : 'files-list-view'
 	);
 
+	// Client-side sort (flat, Drive-style). The listing endpoint returns the
+	// folder contents unsorted; sorting here avoids a refetch per column click.
+	type SortField = 'name' | 'type' | 'size' | 'modified_at' | 'created_at';
+	let sortField = $state<SortField>('name');
+	let sortDir = $state<1 | -1>(1);
+
+	function toggleSort(field: SortField) {
+		if (sortField === field) sortDir = (sortDir * -1) as 1 | -1;
+		else {
+			sortField = field;
+			sortDir = 1;
+		}
+	}
+
+	function cmpFolders(a: FolderItem, b: FolderItem): number {
+		let v: number;
+		if (sortField === 'modified_at') v = a.modified_at - b.modified_at;
+		else if (sortField === 'created_at') v = a.created_at - b.created_at;
+		// Folders have no size; fall back to name for size/type so they stay stable.
+		else v = a.name.localeCompare(b.name);
+		return v * sortDir;
+	}
+	function cmpFiles(a: FileItem, b: FileItem): number {
+		let v: number;
+		if (sortField === 'size') v = (a.size ?? 0) - (b.size ?? 0);
+		else if (sortField === 'modified_at') v = a.modified_at - b.modified_at;
+		else if (sortField === 'created_at') v = a.created_at - b.created_at;
+		else if (sortField === 'type') v = (a.category ?? '').localeCompare(b.category ?? '');
+		else v = a.name.localeCompare(b.name);
+		return v * sortDir;
+	}
+
+	const sortedFolders = $derived([...listing.folders].sort(cmpFolders));
+	const sortedFiles = $derived([...listing.files].sort(cmpFiles));
+
+	/** Flat id order matching how rows are displayed (folders then files). */
+	const orderedIds = $derived([...sortedFolders.map((f) => f.id), ...sortedFiles.map((f) => f.id)]);
+
+	// ── Group-by / swimlanes ─────────────────────────────────────────────────
+	// Mirrors GROUP_BY_DEFS in static/js/app/filesView.js: a flat list ('') plus
+	// Type / Size / Modified date / Created date dimensions. Folders always group
+	// into their own lane (Folder / "Folders" size sentinel) ahead of the files.
+	type GroupBy = '' | 'type' | 'size' | 'modifiedAt' | 'createdAt';
+	let groupBy = $state<GroupBy>('');
+
+	interface ResourceGroup {
+		key: string;
+		label: string;
+		folders: FolderItem[];
+		files: FileItem[];
+	}
+
+	function folderGroupKey(folder: FolderItem): string {
+		if (groupBy === 'type') return t('files.file_types.folder', 'Folders');
+		if (groupBy === 'size') return sizeBucket(-1);
+		if (groupBy === 'modifiedAt') return dateBucket(folder.modified_at);
+		if (groupBy === 'createdAt') return dateBucket(folder.created_at);
+		return '';
+	}
+	function fileGroupKey(file: FileItem): string {
+		if (groupBy === 'type') return typeLabel(file.category);
+		if (groupBy === 'size') return sizeBucket(file.size ?? 0);
+		if (groupBy === 'modifiedAt') return dateBucket(file.modified_at);
+		if (groupBy === 'createdAt') return dateBucket(file.created_at);
+		return '';
+	}
+
+	// Grouped rendering: ordered lanes preserving the sorted folder-then-file order
+	// within each lane. Lanes appear in first-seen order (folders precede files).
+	const groups = $derived.by<ResourceGroup[]>(() => {
+		if (groupBy === '') return [];
+		const map = new Map<string, ResourceGroup>();
+		const ensure = (key: string): ResourceGroup => {
+			let g = map.get(key);
+			if (!g) {
+				g = { key, label: key, folders: [], files: [] };
+				map.set(key, g);
+			}
+			return g;
+		};
+		for (const folder of sortedFolders) ensure(folderGroupKey(folder)).folders.push(folder);
+		for (const file of sortedFiles) ensure(fileGroupKey(file)).files.push(file);
+		return [...map.values()];
+	});
+
+	// ── Toolbar controls (upload split-button + group-by popup menu) ─────────
+	// The group-by popup + sort-direction + view toggle live in the shared
+	// <ListToolbar>; this page only owns the upload split-button dropdown.
+	let uploadMenuOpen = $state(false);
+
+	interface GroupByDef {
+		key: GroupBy;
+		label: string;
+		icon: string;
+		/** Sort field implied by this dimension (the old group-by drove order_by). */
+		sort?: SortField;
+	}
+	// Mirrors the old GROUP_BY_DEFS: "Name" is the default (flat, sorted by name)
+	// entry — there is no "None" option — followed by the swimlane dimensions.
+	const GROUP_BYS = $derived<GroupByDef[]>([
+		{ key: '', label: t('files.name', 'Name'), icon: 'arrow-up-a-z', sort: 'name' },
+		{ key: 'type', label: t('groupby.type', 'Type'), icon: 'layer-group', sort: 'type' },
+		{ key: 'size', label: t('groupby.size', 'Size'), icon: 'layer-group', sort: 'size' },
+		{
+			key: 'modifiedAt',
+			label: t('groupby.modifiedAt', 'Modified date'),
+			icon: 'layer-group',
+			sort: 'modified_at'
+		},
+		{
+			key: 'createdAt',
+			label: t('groupby.createdAt', 'Created date'),
+			icon: 'layer-group',
+			sort: 'created_at'
+		}
+	]);
+
+	/** Group-by chosen in the toolbar — also sets the matching sort field. */
+	function onPickGroup(key: string) {
+		groupBy = key as GroupBy;
+		const def = GROUP_BYS.find((g) => g.key === key);
+		if (def?.sort) sortField = def.sort;
+	}
+
+	// Close the upload popup when clicking outside of it.
+	$effect(() => {
+		if (!uploadMenuOpen) return;
+		const onDown = (e: MouseEvent) => {
+			if (!(e.target as HTMLElement).closest('.upload-dropdown')) uploadMenuOpen = false;
+		};
+		window.addEventListener('pointerdown', onDown);
+		return () => window.removeEventListener('pointerdown', onDown);
+	});
+
+	const SKELETON = [0, 1, 2, 3, 4, 5, 6, 7];
+
 	// Reload whenever the route path changes.
 	$effect(() => {
 		// reference pathSegments so the effect re-runs on navigation
 		void pathSegments;
 		void load();
 	});
+
+	// The command palette's "Upload files" action navigates here then dispatches
+	// this event so the hidden file picker opens (the input lives on this page).
+	$effect(() => {
+		const open = () => fileInput?.click();
+		window.addEventListener('oxicloud:upload-files', open);
+		return () => window.removeEventListener('oxicloud:upload-files', open);
+	});
 </script>
 
 <svelte:head><title>{t('nav.files', 'Files')} · OxiCloud</title></svelte:head>
 
+<svelte:window onkeydown={onKeydown} />
+
 <div
 	class="files-page"
 	class:dropzone-active={dragOver}
@@ -186,55 +926,181 @@
 	ondrop={onDrop}
 >
 	<div class="page-sticky-header">
+		<!-- Hidden upload inputs stay mounted even while the batch bar is shown. -->
+		<input bind:this={fileInput} type="file" multiple hidden onchange={onUpload} />
+		<input
+			bind:this={folderInput}
+			type="file"
+			multiple
+			hidden
+			webkitdirectory
+			onchange={onUploadFolder}
+		/>
+
+		<ListToolbar
+			groups={GROUP_BYS}
+			{groupBy}
+			reversed={sortDir === -1}
+			ongroup={onPickGroup}
+			ondirection={() => (sortDir = (sortDir * -1) as 1 | -1)}
+		>
+			{#snippet start()}
+				{#if selectedCount > 0}
+					<div class="action-buttons batch-selection-bar">
+						<div class="list-header-checkbox">
+							<button
+								class="batch-bar-close"
+								title={t('files.cancel_selection', 'Cancel selection')}
+								aria-label={t('files.cancel_selection', 'Cancel selection')}
+								onclick={clearSelection}
+							>
+								<Icon name="times" />
+							</button>
+							<span class="batch-bar-count"
+								>{t('files.selected_count', { n: selectedCount }, '{{n}} selected')}</span
+							>
+						</div>
+						<div class="batch-selection-info">
+							<div class="batch-bar-actions">
+								<button
+									class="batch-btn"
+									title={t('files.add_favorites', 'Add to favorites')}
+									onclick={() => void batchFavorites()}
+								>
+									<Icon name="star" />
+									<span>{t('files.add_favorites', 'Add to favorites')}</span>
+								</button>
+								<button class="batch-btn" title={t('files.move', 'Move')} onclick={batchMove}>
+									<Icon name="arrows-alt" />
+									<span>{t('files.move', 'Move')}</span>
+								</button>
+								<button class="batch-btn" title={t('files.copy', 'Copy')} onclick={batchCopy}>
+									<Icon name="copy" />
+									<span>{t('files.copy', 'Copy')}</span>
+								</button>
+								<button
+									class="batch-btn"
+									title={t('common.download', 'Download')}
+									onclick={() => void batchDownload()}
+								>
+									<Icon name="download" />
+									<span>{t('common.download', 'Download')}</span>
+								</button>
+								<button
+									class="batch-btn batch-btn-danger"
+									title={t('common.delete', 'Delete')}
+									onclick={batchDelete}
+								>
+									<Icon name="trash" />
+									<span>{t('common.delete', 'Delete')}</span>
+								</button>
+							</div>
+						</div>
+					</div>
+				{:else}
+					<div class="action-buttons">
+						<div class="upload-dropdown">
+							<button
+								class="btn btn-primary"
+								onclick={() => (uploadMenuOpen = !uploadMenuOpen)}
+								disabled={uploading}
+								aria-haspopup="true"
+								aria-expanded={uploadMenuOpen}
+							>
+								<Icon name="cloud-upload-alt" class="icon-mr" />
+								<span
+									>{uploading
+										? t('files.uploading', 'Uploading…')
+										: t('actions.upload', 'Upload')}</span
+								>
+								<Icon name="caret-down" class="upload-caret" />
+							</button>
+							{#if uploadMenuOpen}
+								<div class="upload-dropdown-menu">
+									<button
+										class="upload-dropdown-item"
+										onclick={() => {
+											uploadMenuOpen = false;
+											fileInput?.click();
+										}}
+									>
+										<Icon name="file" />
+										<span>{t('actions.upload_files', 'Upload files')}</span>
+									</button>
+									<button
+										class="upload-dropdown-item"
+										onclick={() => {
+											uploadMenuOpen = false;
+											folderInput?.click();
+										}}
+									>
+										<Icon name="folder-open" />
+										<span>{t('actions.upload_folder', 'Upload folder')}</span>
+									</button>
+								</div>
+							{/if}
+						</div>
+						<button class="btn btn-secondary" onclick={onNewFolder}>
+							<Icon name="folder-plus" class="icon-mr" />
+							<span>{t('actions.new_folder', 'New folder')}</span>
+						</button>
+					</div>
+				{/if}
+			{/snippet}
+		</ListToolbar>
+
 		<nav class="breadcrumb" aria-label="Breadcrumb">
-			<a href="/files" class="breadcrumb-item">
-				<Icon name="folder" />
-				{session.homeFolderName ?? t('nav.files', 'Files')}
+			<a
+				href="/files"
+				class="breadcrumb-item breadcrumb-home breadcrumb-link"
+				title={t('breadcrumb.home', 'Home')}
+				ondragover={(e) => e.dataTransfer?.types.includes(DRAG_TYPE) && e.preventDefault()}
+				ondrop={(e) => session.homeFolderId && onCrumbDrop(e, session.homeFolderId)}
+			>
+				<Icon name="home" />
 			</a>
 			{#each crumbs as c, i (c.id)}
-				<span class="breadcrumb-separator">/</span>
-				<a href={crumbHref(i)} class="breadcrumb-item">{c.name}</a>
+				<span class="breadcrumb-separator">&gt;</span>
+				{#if i === crumbs.length - 1}
+					<span class="breadcrumb-item breadcrumb-current">{c.name}</span>
+				{:else}
+					<a
+						href={crumbHref(i)}
+						class="breadcrumb-item breadcrumb-link"
+						ondragover={(e) => e.dataTransfer?.types.includes(DRAG_TYPE) && e.preventDefault()}
+						ondrop={(e) => onCrumbDrop(e, c.id)}>{c.name}</a
+					>
+				{/if}
 			{/each}
 		</nav>
-
-		<div class="actions-bar">
-			<div class="action-buttons">
-				<button class="btn btn-secondary" onclick={onNewFolder}>
-					<Icon name="folder-plus" />
-					{t('files.new_folder', 'New folder')}
-				</button>
-				<button class="btn btn-primary" onclick={() => fileInput?.click()} disabled={uploading}>
-					<Icon name="arrow-up" />
-					{uploading ? t('files.uploading', 'Uploading…') : t('files.upload', 'Upload')}
-				</button>
-				<input bind:this={fileInput} type="file" multiple hidden onchange={onUpload} />
-			</div>
-
-			<div class="view-toggle" role="group" aria-label="View mode">
-				<button
-					class="view-toggle-btn"
-					class:active={filesStore.viewMode === 'grid'}
-					aria-pressed={filesStore.viewMode === 'grid'}
-					onclick={() => filesStore.setViewMode('grid')}
-				>
-					<Icon name="th" />
-				</button>
-				<button
-					class="view-toggle-btn"
-					class:active={filesStore.viewMode === 'list'}
-					aria-pressed={filesStore.viewMode === 'list'}
-					onclick={() => filesStore.setViewMode('list')}
-				>
-					<Icon name="list" />
-				</button>
-			</div>
-		</div>
 	</div>
 
 	{#if error}
 		<div class="empty-state"><p>{error}</p></div>
-	{:else if loading && isEmpty}
-		<div class="empty-state"><p>{t('common.loading', 'Loading…')}</p></div>
+	{:else if showSkeleton && isEmpty}
+		<div class="files-container">
+			<div
+				class={viewClass === 'files-grid-view'
+					? 'files-grid-view files-skeleton'
+					: 'files-skeleton'}
+			>
+				{#each SKELETON as i (i)}
+					{#if filesStore.viewMode === 'grid'}
+						<div class="skeleton-card">
+							<div class="skeleton skeleton-thumb"></div>
+							<div class="skeleton skeleton-line skeleton-line--medium"></div>
+							<div class="skeleton skeleton-line skeleton-line--short"></div>
+						</div>
+					{:else}
+						<div class="skeleton-row">
+							<div class="skeleton skeleton-icon"></div>
+							<div class="skeleton skeleton-line skeleton-line--medium"></div>
+							<div class="skeleton skeleton-line skeleton-line--short"></div>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</div>
 	{:else if isEmpty}
 		<div class="empty-state">
 			<p>{t('files.empty_title', 'This folder is empty')}</p>
@@ -242,108 +1108,472 @@
 		</div>
 	{:else}
 		<div class="files-container">
-			<div
-				class={viewClass}
-				style="--files-list-columns: minmax(200px, 2fr) 120px 110px 140px 110px"
-			>
+			<div class={viewClass}>
 				<div class="list-header">
-					<div>{t('files.col_name', 'Name')}</div>
-					<div>{t('files.col_type', 'Type')}</div>
-					<div>{t('files.col_size', 'Size')}</div>
-					<div>{t('files.col_modified', 'Modified')}</div>
+					<div class="list-header-checkbox">
+						<input
+							type="checkbox"
+							aria-label={t('files.select_all', 'Select all')}
+							checked={selectedCount > 0 && selectedCount === totalCount}
+							indeterminate={selectedCount > 0 && selectedCount < totalCount}
+							onchange={toggleSelectAll}
+						/>
+					</div>
+					{#each [{ f: 'name', l: t('files.col_name', 'Name') }, { f: 'owner', l: t('files.col_owner', 'Owner') }, { f: 'type', l: t('files.col_type', 'Type') }, { f: 'size', l: t('files.col_size', 'Size') }, { f: 'modified_at', l: t('files.col_modified', 'Modified') }] as col (col.f)}
+						{#if col.f === 'owner'}
+							<div class="list-header-owner">{col.l}</div>
+						{:else}
+							<button
+								class="list-header-sort"
+								class:is-active={sortField === col.f}
+								data-sort-field={col.f}
+								onclick={() => toggleSort(col.f as SortField)}
+							>
+								{col.l}
+								{#if sortField === col.f}
+									<Icon
+										name={sortDir === 1 ? 'arrow-down' : 'arrow-up'}
+										class="list-header-sort__arrow"
+									/>
+								{/if}
+							</button>
+						{/if}
+					{/each}
 					<div></div>
 				</div>
 
-				{#each listing.folders as folder (folder.id)}
-					<div
-						class="file-item"
-						role="button"
-						tabindex="0"
-						ondblclick={() => openFolder(folder)}
-						onclick={() => openFolder(folder)}
-						onkeydown={(e) => e.key === 'Enter' && openFolder(folder)}
-					>
-						<div class="name-cell">
-							<span class="file-icon"><Icon name="folder" /></span>
-							<span>{folder.name}</span>
-						</div>
-						<div class="type-cell">{t('files.folder', 'Folder')}</div>
-						<div class="size-cell">—</div>
-						<div class="date-cell">{formatDate(folder.modified_at)}</div>
-						<div class="grid-meta"></div>
-						<div class="action-cell">
-							<button
-								class="btn-action"
-								title={t('common.rename', 'Rename')}
-								onclick={(e) => {
-									e.stopPropagation();
-									renameItem('folder', folder.id, folder.name);
-								}}><Icon name="pen" /></button
-							>
-							<button
-								class="btn-action btn-action--delete"
-								title={t('common.delete', 'Delete')}
-								onclick={(e) => {
-									e.stopPropagation();
-									deleteItem('folder', folder.id, folder.name);
-								}}><Icon name="trash" /></button
-							>
-						</div>
-					</div>
-				{/each}
-
-				{#each listing.files as file (file.id)}
-					<div
-						class="file-item"
-						role="button"
-						tabindex="0"
-						ondblclick={() => openFile(file)}
-						onclick={() => openFile(file)}
-						onkeydown={(e) => e.key === 'Enter' && openFile(file)}
-					>
-						<div class="name-cell">
-							<span class="file-icon"><Icon name={iconNameFromClass(file.icon_class)} /></span>
-							<span>{file.name}</span>
-						</div>
-						<div class="type-cell">{file.category || t('files.file', 'File')}</div>
-						<div class="size-cell">{file.size != null ? formatBytes(file.size) : ''}</div>
-						<div class="date-cell">{formatDate(file.modified_at)}</div>
-						<div class="grid-meta">
-							{#if file.size != null}<span class="grid-meta__size">{formatBytes(file.size)}</span
-								>{/if}
-						</div>
-						<div class="action-cell">
-							<a
-								class="btn-action"
-								href={fileDownloadUrl(file.id)}
-								download
-								title={t('common.download', 'Download')}
-								onclick={(e) => e.stopPropagation()}><Icon name="download" /></a
-							>
-							<button
-								class="btn-action"
-								title={t('common.rename', 'Rename')}
-								onclick={(e) => {
-									e.stopPropagation();
-									renameItem('file', file.id, file.name);
-								}}><Icon name="pen" /></button
-							>
-							<button
-								class="btn-action btn-action--delete"
-								title={t('common.delete', 'Delete')}
-								onclick={(e) => {
-									e.stopPropagation();
-									deleteItem('file', file.id, file.name);
-								}}><Icon name="trash" /></button
-							>
-						</div>
-					</div>
-				{/each}
+				{#if groupBy === ''}
+					{#each sortedFolders as folder (folder.id)}
+						{@render folderRow(folder)}
+					{/each}
+					{#each sortedFiles as file (file.id)}
+						{@render fileRow(file)}
+					{/each}
+				{:else}
+					{#each groups as group (group.key)}
+						<div class="resource-list__swimlane-header">{group.label}</div>
+						{#each group.folders as folder (folder.id)}
+							{@render folderRow(folder)}
+						{/each}
+						{#each group.files as file (file.id)}
+							{@render fileRow(file)}
+						{/each}
+					{/each}
+				{/if}
 			</div>
 		</div>
 	{/if}
 </div>
 
+{#snippet folderRow(folder: FolderItem)}
+	<div
+		class="file-item"
+		class:selected={selected.has(folder.id)}
+		class:drop-target={dropFolderId === folder.id}
+		role="button"
+		tabindex="0"
+		draggable="true"
+		ondragstart={(e) => onItemDragStart(e, 'folder', folder.id, folder.name)}
+		ondragover={(e) => {
+			if (e.dataTransfer?.types.includes(DRAG_TYPE)) {
+				e.preventDefault();
+				dropFolderId = folder.id;
+			}
+		}}
+		ondragleave={() => {
+			if (dropFolderId === folder.id) dropFolderId = null;
+		}}
+		ondrop={(e) => onFolderDrop(e, folder)}
+		ondblclick={() => openFolder(folder)}
+		onclick={(e) => {
+			if (!handleSelectionClick(e, folder.id)) openFolder(folder);
+		}}
+		oncontextmenu={(e) => openContext(e, 'folder', folder.id, folder.name)}
+		onkeydown={(e) => e.key === 'Enter' && openFolder(folder)}
+	>
+		<div class="checkbox-cell">
+			<input
+				type="checkbox"
+				checked={selected.has(folder.id)}
+				aria-label={folder.name}
+				onclick={(e) => {
+					e.stopPropagation();
+					toggleSelected(folder.id);
+				}}
+			/>
+		</div>
+		<div class="name-cell">
+			<div class="file-icon"><Icon name="folder" /></div>
+			<span title={folder.name}>{folder.name}</span>
+			{#if favoriteIds.has(folder.id)}<div
+					class="item-badge item-badge--fav"
+					title={t('files.favorited', 'Favorite')}
+				>
+					<Icon name="star" />
+				</div>{/if}
+			{#if sharedIds.has(folder.id)}<div
+					class="file-badge file-badge-shared"
+					title={t('files.shared', 'Shared')}
+				>
+					<Icon name="oxiexport" />
+				</div>{/if}
+		</div>
+		<div class="grid-meta">
+			<span class="grid-meta__date">{relativeTimeAgo(folder.modified_at)}</span>
+		</div>
+		<div class="owner-cell">{ownerLabel(folder.owner_id, session.user?.id ?? null)}</div>
+		<div class="type-cell">{t('files.file_types.folder', 'Folder')}</div>
+		<div class="size-cell">—</div>
+		<div class="date-cell">{formatDate(folder.modified_at)}</div>
+		<div class="action-cell">
+			<button
+				class="favorite-star"
+				class:active={favoriteIds.has(folder.id)}
+				title={favoriteIds.has(folder.id)
+					? t('files.unfavorite', 'Remove favorite')
+					: t('files.favorite', 'Add favorite')}
+				aria-pressed={favoriteIds.has(folder.id)}
+				onclick={(e) => {
+					e.stopPropagation();
+					void toggleFavorite('folder', folder.id);
+				}}><Icon name={favoriteIds.has(folder.id) ? 'star' : 'star-outline'} /></button
+			>
+			<button
+				class="btn-action"
+				title={t('files.share', 'Share')}
+				onclick={(e) => {
+					e.stopPropagation();
+					openShare('folder', folder.id, folder.name);
+				}}><Icon name="link" /></button
+			>
+			<button
+				class="btn-action"
+				title={t('files.move', 'Move')}
+				onclick={(e) => {
+					e.stopPropagation();
+					openMove('folder', folder.id, folder.name);
+				}}><Icon name="arrows-alt" /></button
+			>
+			<button
+				class="btn-action"
+				title={t('common.rename', 'Rename')}
+				onclick={(e) => {
+					e.stopPropagation();
+					renameItem('folder', folder.id, folder.name);
+				}}><Icon name="pen" /></button
+			>
+			<button
+				class="btn-action btn-action--delete"
+				title={t('common.delete', 'Delete')}
+				onclick={(e) => {
+					e.stopPropagation();
+					deleteItem('folder', folder.id, folder.name);
+				}}><Icon name="trash" /></button
+			>
+			<button
+				class="file-actions"
+				title={t('files.more_actions', 'More actions')}
+				aria-label={t('files.more_actions', 'More actions')}
+				aria-haspopup="menu"
+				onclick={(e) => openContext(e, 'folder', folder.id, folder.name)}
+				><Icon name="ellipsis-v" /></button
+			>
+		</div>
+	</div>
+{/snippet}
+
+{#snippet fileRow(file: FileItem)}
+	<div
+		class="file-item"
+		class:selected={selected.has(file.id)}
+		role="button"
+		tabindex="0"
+		draggable="true"
+		ondragstart={(e) => onItemDragStart(e, 'file', file.id, file.name)}
+		ondblclick={() => openFile(file)}
+		onclick={(e) => {
+			if (!handleSelectionClick(e, file.id)) openFile(file);
+		}}
+		oncontextmenu={(e) => openContext(e, 'file', file.id, file.name)}
+		onkeydown={(e) => e.key === 'Enter' && openFile(file)}
+	>
+		<div class="checkbox-cell">
+			<input
+				type="checkbox"
+				checked={selected.has(file.id)}
+				aria-label={file.name}
+				onclick={(e) => {
+					e.stopPropagation();
+					toggleSelected(file.id);
+				}}
+			/>
+		</div>
+		<div class="name-cell">
+			<div class="file-icon">
+				{#if canThumbnail(file)}
+					<img
+						class="file-thumb"
+						src={fileThumbnailUrl(file.id)}
+						alt=""
+						loading="lazy"
+						onerror={(e) => ((e.currentTarget as HTMLImageElement).style.display = 'none')}
+					/>
+				{:else}
+					<Icon name={iconNameFromClass(file.icon_class)} />
+				{/if}
+			</div>
+			<span title={file.name}>{file.name}</span>
+			{#if favoriteIds.has(file.id)}<div
+					class="item-badge item-badge--fav"
+					title={t('files.favorited', 'Favorite')}
+				>
+					<Icon name="star" />
+				</div>{/if}
+			{#if sharedIds.has(file.id)}<div
+					class="file-badge file-badge-shared"
+					title={t('files.shared', 'Shared')}
+				>
+					<Icon name="oxiexport" />
+				</div>{/if}
+		</div>
+		<div class="grid-meta">
+			<span class="grid-meta__date">{relativeTimeAgo(file.modified_at)}</span>
+			{#if file.size != null}<span class="grid-meta__size">{formatBytes(file.size)}</span>{/if}
+		</div>
+		<div class="owner-cell">{ownerLabel(file.owner_id, session.user?.id ?? null)}</div>
+		<div class="type-cell">{typeLabel(file.category)}</div>
+		<div class="size-cell">{file.size != null ? formatBytes(file.size) : ''}</div>
+		<div class="date-cell">{formatDate(file.modified_at)}</div>
+		<div class="action-cell">
+			<button
+				class="favorite-star"
+				class:active={favoriteIds.has(file.id)}
+				title={favoriteIds.has(file.id)
+					? t('files.unfavorite', 'Remove favorite')
+					: t('files.favorite', 'Add favorite')}
+				aria-pressed={favoriteIds.has(file.id)}
+				onclick={(e) => {
+					e.stopPropagation();
+					void toggleFavorite('file', file.id);
+				}}><Icon name={favoriteIds.has(file.id) ? 'star' : 'star-outline'} /></button
+			>
+			<button
+				class="btn-action"
+				title={t('files.share', 'Share')}
+				onclick={(e) => {
+					e.stopPropagation();
+					openShare('file', file.id, file.name);
+				}}><Icon name="link" /></button
+			>
+			<button
+				class="btn-action"
+				title={t('files.move', 'Move')}
+				onclick={(e) => {
+					e.stopPropagation();
+					openMove('file', file.id, file.name);
+				}}><Icon name="arrows-alt" /></button
+			>
+			<a
+				class="btn-action"
+				href={fileDownloadUrl(file.id)}
+				download
+				title={t('common.download', 'Download')}
+				onclick={(e) => e.stopPropagation()}><Icon name="download" /></a
+			>
+			<button
+				class="btn-action"
+				title={t('common.rename', 'Rename')}
+				onclick={(e) => {
+					e.stopPropagation();
+					renameItem('file', file.id, file.name);
+				}}><Icon name="pen" /></button
+			>
+			<button
+				class="btn-action btn-action--delete"
+				title={t('common.delete', 'Delete')}
+				onclick={(e) => {
+					e.stopPropagation();
+					deleteItem('file', file.id, file.name);
+				}}><Icon name="trash" /></button
+			>
+			<button
+				class="file-actions"
+				title={t('files.more_actions', 'More actions')}
+				aria-label={t('files.more_actions', 'More actions')}
+				aria-haspopup="menu"
+				onclick={(e) => openContext(e, 'file', file.id, file.name)}
+				><Icon name="ellipsis-v" /></button
+			>
+		</div>
+	</div>
+{/snippet}
+
+<MoveDialog
+	bind:open={moveOpen}
+	item={actionTarget}
+	items={moveItems}
+	mode={moveMode}
+	onmoved={() => {
+		clearSelection();
+		void load();
+	}}
+/>
+<ShareDialog bind:open={shareOpen} item={actionTarget} />
+<FileViewer bind:open={viewerOpen} file={viewerFile} />
+<WopiEditor
+	bind:open={wopiOpen}
+	fileId={wopiFile?.id ?? null}
+	fileName={wopiFile?.name ?? ''}
+	action={wopiAction}
+/>
+
+{#if ctxOpen && ctxTarget}
+	<div
+		class="ctx-scrim"
+		role="presentation"
+		onclick={closeContext}
+		oncontextmenu={(e) => e.preventDefault()}
+	></div>
+	<div class="ctx-menu" style:left="{ctxX}px" style:top="{ctxY}px" role="menu">
+		{#if ctxTarget.kind === 'folder'}
+			<button
+				class="ctx-item"
+				role="menuitem"
+				onclick={() => {
+					const id = ctxTarget!.id;
+					closeContext();
+					goto(`/files/${[...pathSegments, id].join('/')}`);
+				}}><Icon name="folder-open" /> {t('files.open', 'Open')}</button
+			>
+			<button
+				class="ctx-item"
+				role="menuitem"
+				onclick={() => {
+					const tg = ctxTarget!;
+					closeContext();
+					downloadFolderZip({ id: tg.id, name: tg.name });
+				}}><Icon name="download" /> {t('files.download_zip', 'Download as ZIP')}</button
+			>
+		{:else}
+			<button
+				class="ctx-item"
+				role="menuitem"
+				onclick={() => {
+					const f = listing.files.find((x) => x.id === ctxTarget!.id);
+					closeContext();
+					if (f) openFile(f);
+				}}><Icon name="eye" /> {t('files.open', 'Open')}</button
+			>
+			{#if ctxCanEditWopi}
+				<button
+					class="ctx-item"
+					role="menuitem"
+					onclick={() => {
+						const tg = ctxTarget!;
+						closeContext();
+						openWopi(tg.id, tg.name, 'edit');
+					}}><Icon name="pen" /> {t('files.edit', 'Edit')}</button
+				>
+				<button
+					class="ctx-item"
+					role="menuitem"
+					onclick={() => {
+						const tg = ctxTarget!;
+						closeContext();
+						void openWopiTab(tg.id, tg.name);
+					}}><Icon name="external-link-alt" /> {t('files.edit_new_tab', 'Edit in new tab')}</button
+				>
+			{/if}
+			<a
+				class="ctx-item"
+				role="menuitem"
+				href={fileDownloadUrl(ctxTarget.id)}
+				download
+				onclick={closeContext}><Icon name="download" /> {t('common.download', 'Download')}</a
+			>
+			<button
+				class="ctx-item"
+				role="menuitem"
+				onclick={() => {
+					const f = listing.files.find((x) => x.id === ctxTarget!.id);
+					closeContext();
+					if (f) openParentFolder(f);
+				}}><Icon name="folder-open" /> {t('files.open_parent', 'Open parent folder')}</button
+			>
+			{#if isAudio(listing.files.find((x) => x.id === ctxTarget!.id))}
+				<button
+					class="ctx-item"
+					role="menuitem"
+					onclick={() => {
+						const f = listing.files.find((x) => x.id === ctxTarget!.id);
+						closeContext();
+						if (f) void addToPlaylist(f);
+					}}><Icon name="music" /> {t('music.add_to_playlist', 'Add to playlist')}</button
+				>
+			{/if}
+		{/if}
+		<button
+			class="ctx-item"
+			role="menuitem"
+			onclick={() => {
+				const tg = ctxTarget!;
+				closeContext();
+				openShare(tg.kind, tg.id, tg.name);
+			}}><Icon name="link" /> {t('files.share', 'Share')}</button
+		>
+		<button
+			class="ctx-item"
+			role="menuitem"
+			onclick={() => {
+				const tg = ctxTarget!;
+				closeContext();
+				openMove(tg.kind, tg.id, tg.name);
+			}}><Icon name="arrows-alt" /> {t('files.move', 'Move')}</button
+		>
+		<button
+			class="ctx-item"
+			role="menuitem"
+			onclick={() => {
+				const tg = ctxTarget!;
+				closeContext();
+				openCopy(tg.kind, tg.id, tg.name);
+			}}><Icon name="copy" /> {t('files.copy', 'Copy')}</button
+		>
+		<button
+			class="ctx-item"
+			role="menuitem"
+			onclick={() => {
+				const tg = ctxTarget!;
+				closeContext();
+				void toggleFavorite(tg.kind, tg.id);
+			}}
+		>
+			<Icon name="star" />
+			{favoriteIds.has(ctxTarget.id)
+				? t('files.unfavorite', 'Remove favorite')
+				: t('files.favorite', 'Add favorite')}
+		</button>
+		<button
+			class="ctx-item"
+			role="menuitem"
+			onclick={() => {
+				const tg = ctxTarget!;
+				closeContext();
+				void renameItem(tg.kind, tg.id, tg.name);
+			}}><Icon name="pen" /> {t('common.rename', 'Rename')}</button
+		>
+		<button
+			class="ctx-item ctx-item--danger"
+			role="menuitem"
+			onclick={() => {
+				const tg = ctxTarget!;
+				closeContext();
+				void deleteItem(tg.kind, tg.id, tg.name);
+			}}><Icon name="trash" /> {t('common.delete', 'Delete')}</button
+		>
+	</div>
+{/if}
+
 <style>
 	.files-page {
 		min-height: 100%;
@@ -361,27 +1591,6 @@
 		gap: var(--space-3);
 	}
 
-	.view-toggle {
-		display: flex;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		overflow: hidden;
-		flex: none;
-	}
-
-	.view-toggle-btn {
-		padding: var(--space-2) var(--space-3);
-		border: none;
-		background: var(--color-bg-surface);
-		color: var(--color-text-muted);
-		cursor: pointer;
-	}
-
-	.view-toggle-btn.active {
-		background: var(--color-accent);
-		color: var(--color-on-accent);
-	}
-
 	.action-cell {
 		display: flex;
 		gap: var(--space-1);
@@ -395,4 +1604,66 @@
 	.btn-action {
 		text-decoration: none;
 	}
+
+	/* Owner column header — non-sortable, so it's a plain div rather than a
+	   sort button. Inherits the header row's weight/colour. */
+	.list-header-owner {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.item-badge {
+		display: inline-flex;
+		align-items: center;
+		margin-left: var(--space-1);
+		font-size: 0.75rem;
+		color: var(--color-text-muted);
+	}
+
+	.item-badge--fav {
+		color: var(--color-warning-text, var(--color-accent));
+	}
+
+	.ctx-scrim {
+		position: fixed;
+		inset: 0;
+		z-index: 90;
+	}
+
+	.ctx-menu {
+		position: fixed;
+		z-index: 100;
+		min-width: 12rem;
+		padding: var(--space-1);
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		box-shadow: var(--shadow-lg, 0 10px 30px var(--color-overlay-shadow));
+	}
+
+	.ctx-item {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		width: 100%;
+		padding: 0.5rem 0.6rem;
+		border: none;
+		background: none;
+		color: var(--color-text);
+		cursor: pointer;
+		text-align: left;
+		text-decoration: none;
+		border-radius: var(--radius-sm);
+		font-size: var(--text-sm);
+	}
+
+	.ctx-item:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.ctx-item--danger {
+		color: var(--color-danger-text);
+	}
 </style>
diff --git a/frontend/src/routes/groups/+page.svelte b/frontend/src/routes/groups/+page.svelte
index f4280cd9..92dfe1a6 100644
--- a/frontend/src/routes/groups/+page.svelte
+++ b/frontend/src/routes/groups/+page.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import {
+		addGroupMember,
 		addUserMember,
 		createGroup,
 		deleteGroup,
-		listGroups,
+		groupDisplayName,
+		groupIconName,
+		INTERNAL_GROUP_ID,
+		listGroupsPage,
 		listMembers,
 		removeGroupMember,
 		removeUserMember,
@@ -12,20 +16,43 @@
 		type GroupItem,
 		type GroupMember
 	} from '$lib/api/endpoints/groups';
+	import {
+		ensureResolvers,
+		resolveRecipient,
+		searchRecipients,
+		type Recipient
+	} from '$lib/api/endpoints/recipients';
+	import Icon from '$lib/icons/Icon.svelte';
 	import { t } from '$lib/i18n/index.svelte';
+	import { promptDialog } from '$lib/stores/dialogs.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
 
+	const PAGE_SIZE = 50;
+
 	let groups = $state<GroupItem[]>([]);
+	let total = $state(0);
 	let loading = $state(false);
+	let loadingMore = $state(false);
 	let error = $state<string | null>(null);
 	let expandedId = $state<string | null>(null);
 	let members = $state<GroupMember[]>([]);
+	let resolverReady = $state(false);
+
+	const hasMore = $derived(groups.length < total);
+
+	// Add-member combobox state (scoped to the expanded group)
+	let addQuery = $state('');
+	let addResults = $state<Recipient[]>([]);
+	let addBusy = $state(false);
+	let searchTimer: ReturnType<typeof setTimeout> | null = null;
 
 	async function load() {
 		loading = true;
 		error = null;
 		try {
-			groups = await listGroups();
+			const page = await listGroupsPage(PAGE_SIZE, 0);
+			groups = page.items;
+			total = page.total;
 		} catch (e) {
 			error = e instanceof Error ? e.message : String(e);
 		} finally {
@@ -33,11 +60,42 @@
 		}
 	}
 
+	async function loadMore() {
+		loadingMore = true;
+		try {
+			const page = await listGroupsPage(PAGE_SIZE, groups.length);
+			groups = [...groups, ...page.items];
+			total = page.total;
+		} catch (e) {
+			report(e);
+		} finally {
+			loadingMore = false;
+		}
+	}
+
 	function report(e: unknown) {
 		ui.notify(e instanceof Error ? e.message : String(e), 'error');
 	}
 
+	/** Localised "(N members)" label. Project i18n has no plural rules, so we
+	 *  branch on the three named forms ourselves. */
+	function memberCountLabel(count: number): string {
+		if (count === 0) return t('groups.member_count_zero', 'no members');
+		if (count === 1) return t('groups.member_count_one', '1 member');
+		return t('groups.member_count_other', { count }, '{{count}} members');
+	}
+
+	/** Display info for a member row; falls back to the raw id until caches load. */
+	function memberInfo(m: GroupMember): { label: string; sublabel?: string } {
+		// resolverReady gates re-resolution once the caches are populated.
+		void resolverReady;
+		const r = resolveRecipient(m.kind, m.id);
+		return { label: r.label, sublabel: r.sublabel };
+	}
+
 	async function expand(g: GroupItem) {
+		addQuery = '';
+		addResults = [];
 		if (expandedId === g.id) {
 			expandedId = null;
 			return;
@@ -52,10 +110,14 @@
 	}
 
 	async function onCreate() {
-		const name = prompt(t('groups.new_prompt', 'New group name'));
-		if (!name) return;
+		const name = await promptDialog({
+			title: t('groups.create_dialog_title', 'New group'),
+			placeholder: t('groups.name_placeholder', 'engineering'),
+			confirmText: t('actions.create', 'Create')
+		});
+		if (!name || !name.trim()) return;
 		try {
-			await createGroup(name);
+			await createGroup(name.trim());
 			await load();
 		} catch (e) {
 			report(e);
@@ -63,10 +125,15 @@
 	}
 
 	async function onRename(g: GroupItem) {
-		const name = prompt(t('groups.rename_prompt', 'New name'), g.name);
-		if (!name || name === g.name) return;
+		const name = await promptDialog({
+			title: t('groups.edit_dialog_title', 'Rename group'),
+			defaultValue: g.name,
+			placeholder: t('groups.name_placeholder', 'engineering'),
+			confirmText: t('actions.rename', 'Rename')
+		});
+		if (!name || !name.trim() || name.trim() === g.name) return;
 		try {
-			await renameGroup(g.id, name);
+			await renameGroup(g.id, name.trim());
 			await load();
 		} catch (e) {
 			report(e);
@@ -74,7 +141,25 @@
 	}
 
 	async function onDelete(g: GroupItem) {
-		if (!confirm(t('groups.confirm_delete', { name: g.name }, 'Delete group "{{name}}"?'))) return;
+		// Typed-name confirmation: the user must type the exact group name.
+		const typed = await promptDialog({
+			title: t('groups.delete_group', 'Delete group'),
+			message: t(
+				'groups.delete_confirm',
+				{ name: g.name },
+				'Delete the group "{{name}}"? Type the group name to confirm.'
+			),
+			placeholder: g.name,
+			confirmText: t('actions.delete', 'Delete')
+		});
+		if (typed === null) return;
+		if (typed !== g.name) {
+			ui.notify(
+				t('groups.delete_confirm_mismatch', 'Type the group name exactly to confirm.'),
+				'error'
+			);
+			return;
+		}
 		try {
 			await deleteGroup(g.id);
 			if (expandedId === g.id) expandedId = null;
@@ -84,11 +169,34 @@
 		}
 	}
 
-	async function onAddMember(g: GroupItem) {
-		const userId = prompt(t('groups.add_member_prompt', 'User ID to add'));
-		if (!userId) return;
+	function onAddQuery() {
+		if (searchTimer) clearTimeout(searchTimer);
+		const q = addQuery;
+		if (!q.trim()) {
+			addResults = [];
+			return;
+		}
+		searchTimer = setTimeout(async () => {
+			addBusy = true;
+			try {
+				const all = await searchRecipients(q);
+				// Don't offer the group as a member of itself, or current members.
+				const existing = new Set(members.map((m) => m.id));
+				addResults = all.filter((r) => r.id !== expandedId && !existing.has(r.id));
+			} catch (e) {
+				report(e);
+			} finally {
+				addBusy = false;
+			}
+		}, 200);
+	}
+
+	async function pickMember(g: GroupItem, r: Recipient) {
 		try {
-			await addUserMember(g.id, userId);
+			if (r.type === 'group') await addGroupMember(g.id, r.id);
+			else await addUserMember(g.id, r.id);
+			addQuery = '';
+			addResults = [];
 			members = await listMembers(g.id);
 		} catch (e) {
 			report(e);
@@ -97,15 +205,23 @@
 
 	async function onRemoveMember(groupId: string, m: GroupMember) {
 		try {
-			if (m.user_id) await removeUserMember(groupId, m.user_id);
-			else if (m.group_id) await removeGroupMember(groupId, m.group_id);
+			if (m.kind === 'user') await removeUserMember(groupId, m.id);
+			else await removeGroupMember(groupId, m.id);
 			members = await listMembers(groupId);
 		} catch (e) {
 			report(e);
 		}
 	}
 
-	onMount(load);
+	onMount(async () => {
+		await load();
+		try {
+			await ensureResolvers();
+			resolverReady = true;
+		} catch {
+			/* names fall back to ids */
+		}
+	});
 </script>
 
 <svelte:head><title>{t('nav.groups', 'Groups')} · OxiCloud</title></svelte:head>
@@ -129,40 +245,101 @@
 				<li class="group">
 					<div class="group__row">
 						<button class="group__name" onclick={() => expand(g)}>
-							{g.name}
-							{#if g.member_count != null}<span class="muted">({g.member_count})</span>{/if}
+							<span class="avatar"><Icon name={groupIconName(g)} /></span>
+							<span class="group__text">
+								<span class="group__title">
+									{groupDisplayName(g)}
+									{#if g.is_virtual}<span class="badge badge--system"
+											>{t('groups.virtual_badge', 'System')}</span
+										>{/if}
+								</span>
+								{#if g.description}<span class="muted">{g.description}</span>{/if}
+								{#if !g.is_virtual && g.member_count != null}
+									<span class="muted">{memberCountLabel(g.member_count)}</span>
+								{/if}
+							</span>
 						</button>
-						<div class="group__actions">
-							<button class="link-btn" onclick={() => onRename(g)}
-								>{t('common.rename', 'Rename')}</button
-							>
-							<button class="link-btn link-btn--danger" onclick={() => onDelete(g)}>
-								{t('common.delete', 'Delete')}
-							</button>
-						</div>
+						{#if g.can_manage !== false && !g.is_virtual}
+							<div class="group__actions">
+								<button class="link-btn" onclick={() => onRename(g)}
+									>{t('common.rename', 'Rename')}</button
+								>
+								<button class="link-btn link-btn--danger" onclick={() => onDelete(g)}>
+									{t('common.delete', 'Delete')}
+								</button>
+							</div>
+						{/if}
 					</div>
 
 					{#if expandedId === g.id}
 						<div class="members">
 							<div class="members__head">
 								<h2>{t('groups.members', 'Members')}</h2>
-								<button class="link-btn" onclick={() => onAddMember(g)}>
-									{t('groups.add_member', 'Add member')}
-								</button>
 							</div>
+
+							{#if g.can_manage !== false && !g.is_virtual}
+								<div class="add-member">
+									<input
+										class="add-member__input"
+										placeholder={t('groups.add_member_search', 'Search users or groups to add…')}
+										bind:value={addQuery}
+										oninput={onAddQuery}
+									/>
+									{#if addBusy}
+										<p class="muted">{t('common.loading', 'Loading…')}</p>
+									{:else if addResults.length > 0}
+										<ul class="add-member__results">
+											{#each addResults as r (r.type + r.id)}
+												<li>
+													<button class="add-member__opt" onclick={() => pickMember(g, r)}>
+														<span class="avatar avatar--sm">
+															<Icon name={r.type === 'group' ? 'user-group' : 'user'} />
+														</span>
+														<span class="vignette__text">
+															<span class="vignette__name">{r.label}</span>
+															{#if r.sublabel}<span class="muted">{r.sublabel}</span>{/if}
+														</span>
+													</button>
+												</li>
+											{/each}
+										</ul>
+									{/if}
+								</div>
+							{:else if g.id === INTERNAL_GROUP_ID}
+								<p class="muted">
+									{t('groups.virtual_internal_explanation', 'Every internal user on this server.')}
+								</p>
+							{/if}
+
 							{#if members.length === 0}
-								<p class="muted">{t('groups.no_members', 'No members.')}</p>
+								{#if !(g.id === INTERNAL_GROUP_ID)}
+									<p class="muted">{t('groups.no_members', 'No members.')}</p>
+								{/if}
 							{:else}
 								<ul class="members__list">
-									{#each members as m (m.user_id ?? m.group_id)}
-										<li>
-											<span>{m.email ?? m.name ?? m.user_id ?? m.group_id}</span>
-											<button
-												class="link-btn link-btn--danger"
-												onclick={() => onRemoveMember(g.id, m)}
-											>
-												{t('common.remove', 'Remove')}
-											</button>
+									{#each members as m (m.kind + m.id)}
+										{@const info = memberInfo(m)}
+										<li class="vignette">
+											<span class="avatar avatar--sm">
+												<Icon name={m.kind === 'group' ? 'user-group' : 'user'} />
+											</span>
+											<span class="vignette__text">
+												<span class="vignette__name">
+													{info.label}
+													{#if m.kind === 'group'}<span class="badge badge--nested"
+															>{t('groups.nested', 'Group')}</span
+														>{/if}
+												</span>
+												{#if info.sublabel}<span class="muted">{info.sublabel}</span>{/if}
+											</span>
+											{#if g.can_manage !== false && !g.is_virtual}
+												<button
+													class="link-btn link-btn--danger"
+													onclick={() => onRemoveMember(g.id, m)}
+												>
+													{t('common.remove', 'Remove')}
+												</button>
+											{/if}
 										</li>
 									{/each}
 								</ul>
@@ -172,6 +349,12 @@
 				</li>
 			{/each}
 		</ul>
+
+		{#if hasMore}
+			<button class="btn load-more" disabled={loadingMore} onclick={loadMore}>
+				{loadingMore ? t('common.loading', 'Loading…') : t('groups.load_more', 'Load more')}
+			</button>
+		{/if}
 	{/if}
 </main>
 
@@ -216,19 +399,40 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.75rem;
+		gap: 0.5rem;
 	}
 
 	.group__name {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
 		background: none;
 		border: none;
 		color: var(--color-text);
 		cursor: pointer;
 		font-size: 1rem;
+		text-align: left;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.group__text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+
+	.group__title {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
 	}
 
 	.group__actions {
 		display: flex;
 		gap: 0.5rem;
+		flex-shrink: 0;
 	}
 
 	.members {
@@ -262,6 +466,104 @@
 		justify-content: space-between;
 	}
 
+	.vignette {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		padding: var(--space-1) 0;
+	}
+
+	.vignette__text {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+		text-align: left;
+	}
+
+	.vignette__name {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	.avatar {
+		display: grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 50%;
+		background: var(--color-accent-bg, var(--color-bg-muted));
+		color: var(--color-accent-text, var(--color-text));
+		font-size: var(--text-xs, 0.75rem);
+		flex-shrink: 0;
+	}
+
+	.avatar--sm {
+		width: 1.6rem;
+		height: 1.6rem;
+	}
+
+	.badge {
+		display: inline-block;
+		padding: 0.05rem 0.4rem;
+		border-radius: var(--radius-sm);
+		font-size: var(--text-xs, 0.7rem);
+		font-weight: var(--weight-semibold, 600);
+	}
+
+	.badge--system {
+		background: var(--color-warning-bg);
+		color: var(--color-warning-text);
+	}
+
+	.badge--nested {
+		background: var(--color-info-bg);
+		color: var(--color-info-text);
+	}
+
+	.add-member {
+		position: relative;
+		margin: var(--space-2) 0;
+	}
+
+	.add-member__input {
+		width: 100%;
+		padding: var(--space-2) var(--space-3);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+	}
+
+	.add-member__results {
+		list-style: none;
+		margin: var(--space-1) 0 0;
+		padding: 0;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-surface);
+		max-height: 16rem;
+		overflow: auto;
+	}
+
+	.add-member__opt {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		width: 100%;
+		padding: var(--space-2) var(--space-3);
+		border: none;
+		background: none;
+		color: var(--color-text);
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.add-member__opt:hover {
+		background: var(--color-bg-hover);
+	}
+
 	.muted {
 		color: var(--color-text-muted);
 		font-size: 0.8125rem;
@@ -292,6 +594,10 @@
 		border-color: transparent;
 	}
 
+	.load-more {
+		align-self: center;
+	}
+
 	.link-btn {
 		background: none;
 		border: none;
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 17c36aa5..598caeea 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -1,29 +1,97 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import { login } from '$lib/api/endpoints/auth';
-	import { t } from '$lib/i18n/index.svelte';
+	import { onMount } from 'svelte';
+	import {
+		exchangeOidcCode,
+		fetchMe,
+		getAuthStatus,
+		getOidcProviders,
+		login,
+		register,
+		sendMagicLink,
+		setupAdmin,
+		type OidcProviders
+	} from '$lib/api/endpoints/auth';
+	import { i18n, SUPPORTED_LOCALES, setLocale, t, type Locale } from '$lib/i18n/index.svelte';
 	import { session } from '$lib/stores/session.svelte';
 
+	type Mode = 'login' | 'register' | 'setup';
+	let mode = $state<Mode>('login');
+	// First-run admin setup is only offered after the status probe confirms it.
+	let setupAvailable = $state(false);
+	// Suppress the auth UI until the onMount probes (session/oidc/status) settle,
+	// to avoid flashing the login form before a redirect or the setup wizard.
+	let booting = $state(true);
+
+	// Login
 	let username = $state('');
 	let password = $state('');
+	let showPassword = $state(false);
+	let capsOn = $state(false);
 	let error = $state('');
 	let busy = $state(false);
 
+	// Register
+	let regUsername = $state('');
+	let regEmail = $state('');
+	let regPassword = $state('');
+	let regConfirm = $state('');
+	let regError = $state('');
+	let regSuccess = $state('');
+	let regShowPassword = $state(false);
+	let regShowConfirm = $state(false);
+	let regCapsOn = $state(false);
+
+	// Admin setup (first run)
+	let setupEmail = $state('');
+	let setupPassword = $state('');
+	let setupConfirm = $state('');
+	let setupShowPassword = $state(false);
+	let setupShowConfirm = $state(false);
+	let setupCapsOn = $state(false);
+	let setupError = $state('');
+	let setupSuccess = $state('');
+	const setupMatchState = $derived(
+		setupConfirm.length === 0 ? '' : setupPassword === setupConfirm ? 'ok' : 'bad'
+	);
+
+	// Magic link
+	let magicOpen = $state(false);
+	let magicEmail = $state('');
+	let magicStatus = $state<{ text: string; ok: boolean } | null>(null);
+
+	// OIDC
+	let oidc = $state<OidcProviders>({ enabled: false });
+	const passwordLoginEnabled = $derived(oidc.password_login_enabled !== false);
+
 	const redirectTarget = $derived(page.url.searchParams.get('redirect') || '/files');
+	const matchState = $derived(
+		regConfirm.length === 0 ? '' : regPassword === regConfirm ? 'ok' : 'bad'
+	);
 
 	function csrfCookiePresent(): boolean {
 		return document.cookie.split('; ').some((c) => c.startsWith('oxicloud_csrf='));
 	}
 
-	async function onsubmit(e: SubmitEvent) {
+	function onPwKey(e: KeyboardEvent) {
+		capsOn = e.getModifierState?.('CapsLock') ?? false;
+	}
+
+	function onRegPwKey(e: KeyboardEvent) {
+		regCapsOn = e.getModifierState?.('CapsLock') ?? false;
+	}
+
+	function onSetupPwKey(e: KeyboardEvent) {
+		setupCapsOn = e.getModifierState?.('CapsLock') ?? false;
+	}
+
+	async function onLogin(e: SubmitEvent) {
 		e.preventDefault();
 		error = '';
 		busy = true;
 		try {
 			const data = await login(username, password);
-			// Tokens are HttpOnly cookies set by the server. Verify the browser
-			// actually accepted them: the non-HttpOnly CSRF cookie must be present.
 			if (!csrfCookiePresent()) {
 				error = t(
 					'auth.cookie_rejected',
@@ -39,6 +107,121 @@
 			busy = false;
 		}
 	}
+
+	async function onRegister(e: SubmitEvent) {
+		e.preventDefault();
+		regError = '';
+		regSuccess = '';
+		if (regPassword !== regConfirm) {
+			regError = t('auth.passwords_mismatch', 'Passwords do not match');
+			return;
+		}
+		busy = true;
+		try {
+			await register(regUsername, regEmail, regPassword);
+			regSuccess = t('auth.account_success', 'Account created. You can now sign in.');
+			regUsername = regEmail = regPassword = regConfirm = '';
+			setTimeout(() => (mode = 'login'), 2000);
+		} catch (err) {
+			regError =
+				err instanceof Error ? err.message : t('auth.register_error', 'Registration failed');
+		} finally {
+			busy = false;
+		}
+	}
+
+	async function onSetup(e: SubmitEvent) {
+		e.preventDefault();
+		setupError = '';
+		setupSuccess = '';
+		if (setupPassword !== setupConfirm) {
+			setupError = t('auth.passwords_mismatch', 'Passwords do not match');
+			return;
+		}
+		busy = true;
+		try {
+			await setupAdmin(setupEmail, setupPassword);
+			setupSuccess = t('auth.admin_success', 'Administrator created. You can now sign in.');
+			setupEmail = setupPassword = setupConfirm = '';
+			// Admin now exists — fold the setup affordance away and return to login.
+			setupAvailable = false;
+			setTimeout(() => {
+				mode = 'login';
+				setupSuccess = '';
+			}, 2000);
+		} catch (err) {
+			setupError =
+				err instanceof Error ? err.message : t('auth.admin_create_error', 'Setup failed');
+		} finally {
+			busy = false;
+		}
+	}
+
+	async function onMagicLink(e: SubmitEvent) {
+		e.preventDefault();
+		if (!magicEmail) return;
+		magicStatus = null;
+		busy = true;
+		try {
+			const result = await sendMagicLink(magicEmail);
+			magicStatus =
+				result === 'sent'
+					? {
+							text: t(
+								'auth.magic_sent',
+								'If an account exists, a sign-in link has been sent. Check your inbox.'
+							),
+							ok: true
+						}
+					: {
+							text: t(
+								'auth.magic_unavailable',
+								'Sign-in by email is not available on this server.'
+							),
+							ok: false
+						};
+			if (result === 'sent') magicEmail = '';
+		} catch {
+			magicStatus = { text: t('auth.magic_error', 'Something went wrong. Try again.'), ok: false };
+		} finally {
+			busy = false;
+		}
+	}
+
+	onMount(async () => {
+		// 1) OIDC code-exchange fallback: the IdP round-trip may land back here
+		//    with ?oidc_code=. Exchange it for a session and redirect into the app.
+		const oidcCode = page.url.searchParams.get('oidc_code');
+		if (oidcCode) {
+			const user = await exchangeOidcCode(oidcCode);
+			if (user) {
+				session.user = user;
+				await goto(redirectTarget, { replaceState: true });
+				return;
+			}
+			// Exchange failed — fall through to the normal login UI.
+		}
+
+		// 2) Existing-session probe: if already authenticated, skip the form.
+		try {
+			const me = await fetchMe();
+			if (me) {
+				session.user = me;
+				await goto(redirectTarget, { replaceState: true });
+				return;
+			}
+		} catch {
+			/* probe failed — show the login page */
+		}
+
+		// 3) Bootstrap probe: a fresh install (no admin) must be set up first.
+		const [providers, status] = await Promise.all([getOidcProviders(), getAuthStatus()]);
+		oidc = providers;
+		setupAvailable = !status.initialized;
+		if (setupAvailable) mode = 'setup';
+
+		booting = false;
+	});
 </script>
 
 <svelte:head>
@@ -55,53 +238,407 @@
 					/>
 				</svg>
 			</div>
-			<div class="auth-logo-text">OxiCloud</div>
+			<div class="auth-logo-text"><span class="brand-oxi">Oxi</span>Cloud</div>
 		</div>
 
-		<h1 class="auth-title">{t('auth.sign_in', 'Sign in')}</h1>
+		{#if booting}
+			<p class="auth-subtitle">{t('common.loading', 'Loading…')}</p>
+		{:else}
+			<h1 class="auth-title">
+				{#if mode === 'login'}
+					{t('auth.sign_in', 'Sign in')}
+				{:else if mode === 'register'}
+					{t('auth.register', 'Create account')}
+				{:else}
+					{t('auth.setup_title', 'Initial setup')}
+				{/if}
+			</h1>
 
-		{#if page.url.searchParams.get('source') === 'session_expired'}
-			<div class="auth-error" style="display: block">
-				{t('auth.session_expired', 'Your session expired. Please sign in again.')}
-			</div>
+			{#if page.url.searchParams.get('source') === 'session_expired'}
+				<div class="auth-error" style="display: block">
+					{t('auth.session_expired', 'Your session expired. Please sign in again.')}
+				</div>
+			{/if}
+
+			{#if mode === 'login'}
+				{#if passwordLoginEnabled}
+					{#if error}<div class="auth-error" style="display: block" role="alert">{error}</div>{/if}
+					<form class="auth-form" onsubmit={onLogin} novalidate>
+						<div class="auth-input-group">
+							<label class="auth-label" for="login-username">
+								{t('auth.username', 'Username or email')}
+							</label>
+							<div class="auth-input-wrap auth-input-wrap--user">
+								<input
+									id="login-username"
+									class="auth-input"
+									type="text"
+									bind:value={username}
+									autocomplete="username"
+									required
+									disabled={busy}
+								/>
+							</div>
+						</div>
+
+						<div class="auth-input-group">
+							<label class="auth-label" for="login-password">{t('auth.password', 'Password')}</label
+							>
+							<div class="auth-input-wrap auth-input-wrap--lock has-toggle">
+								<input
+									id="login-password"
+									class="auth-input"
+									type={showPassword ? 'text' : 'password'}
+									bind:value={password}
+									onkeydown={onPwKey}
+									onkeyup={onPwKey}
+									autocomplete="current-password"
+									required
+									disabled={busy}
+								/>
+								<button
+									type="button"
+									class="auth-pw-toggle"
+									aria-pressed={showPassword}
+									aria-label={t('auth.toggle_password', 'Show password')}
+									onclick={() => (showPassword = !showPassword)}
+								></button>
+							</div>
+							{#if capsOn}
+								<div class="auth-caps-warning">{t('auth.caps_lock', 'Caps Lock is on')}</div>
+							{/if}
+						</div>
+
+						<button class="auth-button" type="submit" disabled={busy} aria-busy={busy}>
+							{busy ? t('auth.signing_in', 'Signing in…') : t('auth.sign_in', 'Sign in')}
+						</button>
+					</form>
+
+					<button class="auth-magic-toggle" onclick={() => (magicOpen = !magicOpen)}>
+						{t('auth.magic_prompt', 'No password? Sign in with an email link')}
+					</button>
+					{#if magicOpen}
+						<div class="auth-magic-reveal">
+							<p class="auth-hint">
+								{t(
+									'auth.magic_hint',
+									"No password? Enter your email and we'll send you a one-time sign-in link."
+								)}
+							</p>
+							<form class="auth-form" onsubmit={onMagicLink}>
+								<div class="auth-input-group">
+									<label class="auth-label" for="magic-email">
+										{t('auth.magic_email_label', 'Email address')}
+									</label>
+									<div class="auth-input-wrap auth-input-wrap--mail">
+										<input
+											id="magic-email"
+											class="auth-input"
+											type="email"
+											bind:value={magicEmail}
+											autocomplete="email"
+											placeholder={t('auth.email', 'you@example.com')}
+										/>
+									</div>
+								</div>
+								<button class="auth-button auth-button-secondary" type="submit" disabled={busy}>
+									{t('auth.magic_send', 'Send link')}
+								</button>
+							</form>
+							{#if magicStatus}
+								<div
+									class={magicStatus.ok
+										? 'auth-status auth-status-success'
+										: 'auth-status auth-status-error'}
+								>
+									{magicStatus.text}
+								</div>
+							{/if}
+						</div>
+					{/if}
+				{/if}
+
+				{#if oidc.enabled}
+					{#if passwordLoginEnabled}
+						<div class="auth-divider"><span>{t('auth.or', 'or')}</span></div>
+					{/if}
+					<a class="auth-button auth-button-oidc" href={oidc.authorize_endpoint}>
+						{t(
+							'auth.sso_login_provider',
+							{ provider: oidc.provider_name ?? 'SSO' },
+							'Sign in with {{provider}}'
+						)}
+					</a>
+				{/if}
+
+				{#if passwordLoginEnabled}
+					<div class="auth-toggle">
+						{t('auth.no_account', 'No account?')}
+						<button class="auth-toggle-link" onclick={() => (mode = 'register')}>
+							{t('auth.register', 'Create one')}
+						</button>
+					</div>
+				{/if}
+
+				{#if setupAvailable}
+					<div class="auth-toggle">
+						{t('auth.admin_setup', 'First time?')}
+						<button class="auth-toggle-link" onclick={() => (mode = 'setup')}>
+							{t('auth.setup', 'Set up administrator')}
+						</button>
+					</div>
+				{/if}
+			{:else if mode === 'register'}
+				{#if regError}<div class="auth-error" style="display: block" role="alert">
+						{regError}
+					</div>{/if}
+				{#if regSuccess}<div class="auth-success" style="display: block">{regSuccess}</div>{/if}
+				<form class="auth-form" onsubmit={onRegister} novalidate>
+					<div class="auth-input-group">
+						<label class="auth-label" for="reg-username">{t('auth.username', 'Username')}</label>
+						<input
+							id="reg-username"
+							class="auth-input"
+							bind:value={regUsername}
+							required
+							disabled={busy}
+						/>
+					</div>
+					<div class="auth-input-group">
+						<label class="auth-label" for="reg-email">{t('auth.email', 'Email')}</label>
+						<input
+							id="reg-email"
+							class="auth-input"
+							type="email"
+							bind:value={regEmail}
+							required
+							disabled={busy}
+						/>
+					</div>
+					<div class="auth-input-group">
+						<label class="auth-label" for="reg-password">{t('auth.password', 'Password')}</label>
+						<div class="auth-input-wrap auth-input-wrap--lock has-toggle">
+							<input
+								id="reg-password"
+								class="auth-input"
+								type={regShowPassword ? 'text' : 'password'}
+								bind:value={regPassword}
+								onkeydown={onRegPwKey}
+								onkeyup={onRegPwKey}
+								autocomplete="new-password"
+								required
+								disabled={busy}
+							/>
+							<button
+								type="button"
+								class="auth-pw-toggle"
+								aria-pressed={regShowPassword}
+								aria-label={t('auth.toggle_password', 'Show password')}
+								onclick={() => (regShowPassword = !regShowPassword)}
+							></button>
+						</div>
+						{#if regCapsOn}
+							<div class="auth-caps-warning">{t('auth.caps_lock', 'Caps Lock is on')}</div>
+						{/if}
+					</div>
+					<div class="auth-input-group">
+						<label class="auth-label" for="reg-confirm"
+							>{t('auth.confirm_password', 'Confirm password')}</label
+						>
+						<div class="auth-input-wrap auth-input-wrap--lock has-toggle">
+							<input
+								id="reg-confirm"
+								class="auth-input"
+								type={regShowConfirm ? 'text' : 'password'}
+								bind:value={regConfirm}
+								onkeydown={onRegPwKey}
+								onkeyup={onRegPwKey}
+								autocomplete="new-password"
+								required
+								disabled={busy}
+							/>
+							<button
+								type="button"
+								class="auth-pw-toggle"
+								aria-pressed={regShowConfirm}
+								aria-label={t('auth.toggle_password', 'Show password')}
+								onclick={() => (regShowConfirm = !regShowConfirm)}
+							></button>
+						</div>
+						{#if matchState}
+							<div
+								class="auth-match show {matchState === 'ok' ? 'auth-match--ok' : 'auth-match--bad'}"
+							>
+								{matchState === 'ok'
+									? t('auth.passwords_match', 'Passwords match')
+									: t('auth.passwords_mismatch', "Passwords don't match")}
+							</div>
+						{/if}
+					</div>
+					<button class="auth-button" type="submit" disabled={busy} aria-busy={busy}>
+						{t('auth.register', 'Create account')}
+					</button>
+				</form>
+				<div class="auth-toggle">
+					{t('auth.have_account', 'Already have an account?')}
+					<button class="auth-toggle-link" onclick={() => (mode = 'login')}>
+						{t('auth.sign_in', 'Sign in')}
+					</button>
+				</div>
+			{:else}
+				<div class="setup-steps">
+					<div class="setup-step">
+						<div class="step-number active">1</div>
+						<div class="step-title active">{t('auth.setup_step1', 'Admin')}</div>
+					</div>
+					<div class="setup-step">
+						<div class="step-number">2</div>
+						<div class="step-title">{t('auth.setup_step2', 'System')}</div>
+					</div>
+					<div class="setup-step">
+						<div class="step-number">3</div>
+						<div class="step-title">{t('auth.setup_step3', 'Completed')}</div>
+					</div>
+				</div>
+
+				{#if setupError}<div class="auth-error" style="display: block" role="alert">
+						{setupError}
+					</div>{/if}
+				{#if setupSuccess}<div class="auth-success" style="display: block">{setupSuccess}</div>{/if}
+
+				<form class="auth-form" onsubmit={onSetup} novalidate>
+					<div class="auth-input-group">
+						<label class="auth-label" for="setup-username">
+							{t('auth.admin_username', 'Administrator username')}
+						</label>
+						<div class="auth-input-wrap auth-input-wrap--user">
+							<input id="setup-username" class="auth-input" type="text" value="admin" readonly />
+						</div>
+					</div>
+
+					<div class="auth-input-group">
+						<label class="auth-label" for="setup-email">
+							{t('auth.admin_email', 'Administrator email')}
+						</label>
+						<div class="auth-input-wrap auth-input-wrap--mail">
+							<input
+								id="setup-email"
+								class="auth-input"
+								type="email"
+								bind:value={setupEmail}
+								autocomplete="email"
+								required
+								disabled={busy}
+							/>
+						</div>
+					</div>
+
+					<div class="auth-input-group">
+						<label class="auth-label" for="setup-password">
+							{t('auth.admin_password', 'Administrator password')}
+						</label>
+						<div class="auth-input-wrap auth-input-wrap--lock has-toggle">
+							<input
+								id="setup-password"
+								class="auth-input"
+								type={setupShowPassword ? 'text' : 'password'}
+								bind:value={setupPassword}
+								onkeydown={onSetupPwKey}
+								onkeyup={onSetupPwKey}
+								autocomplete="new-password"
+								minlength="8"
+								required
+								disabled={busy}
+							/>
+							<button
+								type="button"
+								class="auth-pw-toggle"
+								aria-pressed={setupShowPassword}
+								aria-label={t('auth.toggle_password', 'Show password')}
+								onclick={() => (setupShowPassword = !setupShowPassword)}
+							></button>
+						</div>
+						{#if setupCapsOn}
+							<div class="auth-caps-warning">{t('auth.caps_lock', 'Caps Lock is on')}</div>
+						{/if}
+					</div>
+
+					<div class="auth-input-group">
+						<label class="auth-label" for="setup-confirm">
+							{t('auth.confirm_password', 'Confirm password')}
+						</label>
+						<div class="auth-input-wrap auth-input-wrap--lock has-toggle">
+							<input
+								id="setup-confirm"
+								class="auth-input"
+								type={setupShowConfirm ? 'text' : 'password'}
+								bind:value={setupConfirm}
+								onkeydown={onSetupPwKey}
+								onkeyup={onSetupPwKey}
+								autocomplete="new-password"
+								required
+								disabled={busy}
+							/>
+							<button
+								type="button"
+								class="auth-pw-toggle"
+								aria-pressed={setupShowConfirm}
+								aria-label={t('auth.toggle_password', 'Show password')}
+								onclick={() => (setupShowConfirm = !setupShowConfirm)}
+							></button>
+						</div>
+						{#if setupMatchState}
+							<div
+								class="auth-match show {setupMatchState === 'ok'
+									? 'auth-match--ok'
+									: 'auth-match--bad'}"
+							>
+								{setupMatchState === 'ok'
+									? t('auth.passwords_match', 'Passwords match')
+									: t('auth.passwords_mismatch', "Passwords don't match")}
+							</div>
+						{/if}
+					</div>
+
+					<button class="auth-button" type="submit" disabled={busy} aria-busy={busy}>
+						{t('auth.create_admin', 'Create administrator')}
+					</button>
+				</form>
+
+				<div class="auth-toggle">
+					{t('auth.back_to_login', 'Already configured?')}
+					<button class="auth-toggle-link" onclick={() => (mode = 'login')}>
+						{t('auth.sign_in', 'Sign in')}
+					</button>
+				</div>
+			{/if}
 		{/if}
 
-		{#if error}
-			<div class="auth-error" style="display: block" role="alert">{error}</div>
-		{/if}
-
-		<form class="auth-form" {onsubmit} novalidate>
-			<div class="auth-input-group">
-				<label class="auth-label" for="login-username">
-					{t('auth.username', 'Username or email')}
-				</label>
-				<input
-					id="login-username"
-					class="auth-input"
-					type="text"
-					bind:value={username}
-					autocomplete="username"
-					required
-					disabled={busy}
-				/>
-			</div>
-
-			<div class="auth-input-group">
-				<label class="auth-label" for="login-password">{t('auth.password', 'Password')}</label>
-				<input
-					id="login-password"
-					class="auth-input"
-					type="password"
-					bind:value={password}
-					autocomplete="current-password"
-					required
-					disabled={busy}
-				/>
-			</div>
-
-			<button class="auth-button" type="submit" disabled={busy} aria-busy={busy}>
-				{busy ? t('auth.signing_in', 'Signing in…') : t('auth.sign_in', 'Sign in')}
-			</button>
-		</form>
+		<div class="auth-lang">
+			<select
+				aria-label={t('settings.language', 'Language')}
+				value={i18n.locale}
+				onchange={(e) => setLocale(e.currentTarget.value as Locale)}
+			>
+				{#each SUPPORTED_LOCALES as loc (loc)}
+					<option value={loc}>{loc}</option>
+				{/each}
+			</select>
+		</div>
 	</div>
 </div>
+
+<style>
+	.auth-lang {
+		margin-top: var(--space-5);
+		text-align: center;
+	}
+
+	.auth-lang select {
+		padding: var(--space-1) var(--space-3);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text-muted);
+	}
+</style>
diff --git a/frontend/src/routes/music/+page.svelte b/frontend/src/routes/music/+page.svelte
index d2d3eb7c..c8536cf4 100644
--- a/frontend/src/routes/music/+page.svelte
+++ b/frontend/src/routes/music/+page.svelte
@@ -2,16 +2,27 @@
 	import { onMount } from 'svelte';
 	import { fileInlineUrl } from '$lib/api/endpoints/files';
 	import {
+		addTracks,
 		createPlaylist,
 		deletePlaylist,
 		listPlaylists,
+		listShares,
 		listTracks,
+		removeShare,
 		removeTrack,
+		renamePlaylist,
 		reorderTracks,
+		sharePlaylist,
+		updatePlaylist,
+		uploadCoverImage,
+		type MusicShare,
 		type Playlist,
 		type PlaylistItem
 	} from '$lib/api/endpoints/music';
+	import { searchFiles } from '$lib/api/endpoints/search';
+	import type { FileItem } from '$lib/api/types';
 	import Icon from '$lib/icons/Icon.svelte';
+	import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
 
@@ -20,11 +31,35 @@
 	let tracks = $state<PlaylistItem[]>([]);
 	let loading = $state(false);
 	let error = $state<string | null>(null);
-	let nowPlaying = $state<string | null>(null);
 
-	// native HTML5 drag-reorder state
 	let dragIndex = $state<number | null>(null);
 
+	// ── Player (independent global queue) ──────────────────────────────────────
+	let audio = $state<HTMLAudioElement | null>(null);
+	/** Playback queue — independent of the visible `tracks` list. */
+	let queue = $state<PlaylistItem[]>([]);
+	let currentIndex = $state(-1);
+	let playing = $state(false);
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let volume = $state(0.7);
+	let muted = $state(false);
+	let shuffle = $state(false);
+	let repeat = $state<'none' | 'all' | 'one'>('none');
+	let queueOpen = $state(false);
+
+	const currentTrack = $derived(currentIndex >= 0 ? (queue[currentIndex] ?? null) : null);
+
+	function fmtTime(s: number | null | undefined): string {
+		if (s == null || !Number.isFinite(s)) return '0:00';
+		const m = Math.floor(s / 60);
+		const sec = Math.floor(s % 60);
+		return `${m}:${sec.toString().padStart(2, '0')}`;
+	}
+	function fmtDuration(s: number | null | undefined): string {
+		return s ? fmtTime(s) : '-';
+	}
+
 	async function loadPlaylists() {
 		loading = true;
 		error = null;
@@ -40,6 +75,7 @@
 
 	async function select(p: Playlist) {
 		current = p;
+		// NOTE: do NOT touch the player here — browsing a playlist must not stop playback.
 		try {
 			tracks = await listTracks(p.id);
 		} catch (e) {
@@ -48,20 +84,65 @@
 	}
 
 	async function onCreate() {
-		const name = prompt(t('music.new_playlist', 'New playlist name'));
+		const name = await promptDialog({
+			title: t('music.new_playlist', 'New playlist'),
+			confirmText: t('common.create', 'Create')
+		});
 		if (!name) return;
 		try {
 			const p = await createPlaylist(name);
-			playlists = [...playlists, p];
+			playlists = [p, ...playlists];
 			await select(p);
+			ui.notify(t('music.created', { name: p.name }, 'Created “{{name}}”.'), 'success');
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function onRenamePlaylist() {
+		if (!current) return;
+		const name = await promptDialog({
+			title: t('music.rename_playlist', 'Rename playlist'),
+			defaultValue: current.name,
+			confirmText: t('common.save', 'Save')
+		});
+		if (!name || name === current.name) return;
+		try {
+			await renamePlaylist(current.id, name);
+			current.name = name;
+			playlists = playlists.map((p) => (p.id === current!.id ? { ...p, name } : p));
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function onEditDescription() {
+		if (!current) return;
+		const desc = await promptDialog({
+			title: t('music.edit_description', 'Edit description'),
+			defaultValue: current.description ?? '',
+			confirmText: t('common.save', 'Save')
+		});
+		if (desc === null) return;
+		try {
+			await updatePlaylist(current.id, { description: desc || null });
+			current.description = desc || null;
+			playlists = playlists.map((p) =>
+				p.id === current!.id ? { ...p, description: desc || null } : p
+			);
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
 		}
 	}
 
 	async function onDelete(p: Playlist) {
-		if (!confirm(t('music.confirm_delete', { name: p.name }, 'Delete playlist "{{name}}"?')))
-			return;
+		const ok = await confirmDialog({
+			title: t('music.delete_playlist', 'Delete playlist'),
+			message: t('music.confirm_delete', { name: p.name }, 'Delete playlist "{{name}}"?'),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
 		try {
 			await deletePlaylist(p.id);
 			playlists = playlists.filter((x) => x.id !== p.id);
@@ -69,6 +150,7 @@
 				current = playlists[0] ?? null;
 				tracks = current ? await listTracks(current.id) : [];
 			}
+			ui.notify(t('music.deleted', { name: p.name }, 'Deleted “{{name}}”.'), 'success');
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
 		}
@@ -79,6 +161,25 @@
 		try {
 			await removeTrack(current.id, track.file_id);
 			tracks = tracks.filter((x) => x.id !== track.id);
+			ui.notify(t('music.track_removed', 'Track removed.'), 'success');
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function onTogglePublic() {
+		if (!current) return;
+		const next = !current.is_public;
+		try {
+			await updatePlaylist(current.id, { is_public: next });
+			current.is_public = next;
+			playlists = playlists.map((p) => (p.id === current!.id ? { ...p, is_public: next } : p));
+			ui.notify(
+				next
+					? t('music.now_public', 'Playlist is now public.')
+					: t('music.now_private', 'Playlist is now private.'),
+				'success'
+			);
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
 		}
@@ -87,7 +188,6 @@
 	function onDragStart(i: number) {
 		dragIndex = i;
 	}
-
 	function onDragOver(e: DragEvent, i: number) {
 		e.preventDefault();
 		if (dragIndex === null || dragIndex === i) return;
@@ -97,7 +197,6 @@
 		dragIndex = i;
 		tracks = next;
 	}
-
 	async function onDrop() {
 		dragIndex = null;
 		if (!current) return;
@@ -106,9 +205,10 @@
 				current.id,
 				tracks.map((tr) => tr.id)
 			);
+			ui.notify(t('music.reordered', 'Playlist reordered.'), 'success');
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
-			await select(current); // reload server order on failure
+			await select(current);
 		}
 	}
 
@@ -116,245 +216,859 @@
 		return tr.title || tr.file_name || tr.file_id;
 	}
 
+	// ── Transport (operates on the independent queue) ──────────────────────────
+	/** Replace the queue (e.g. when starting playback of the visible playlist). */
+	function setQueue(list: PlaylistItem[]) {
+		queue = [...list];
+	}
+
+	function playIndex(i: number) {
+		if (i < 0 || i >= queue.length) return;
+		currentIndex = i;
+		// $effect swaps the src; ensure playback starts.
+		queueMicrotask(() => audio?.play().catch(() => {}));
+	}
+
+	/** Play the visible playlist from a given row, seeding the queue from it. */
+	function playFromTracks(i: number) {
+		if (i < 0 || i >= tracks.length) return;
+		setQueue(tracks);
+		playIndex(i);
+	}
+
+	function playAll() {
+		if (tracks.length) playFromTracks(0);
+	}
+
+	function shufflePlay() {
+		if (!tracks.length) return;
+		const shuffled = [...tracks];
+		for (let i = shuffled.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+		}
+		setQueue(shuffled);
+		playIndex(0);
+	}
+
+	function togglePlay() {
+		if (!audio) return;
+		if (currentIndex < 0 && queue.length) {
+			playIndex(0);
+			return;
+		}
+		if (playing) audio.pause();
+		else audio.play().catch(() => {});
+	}
+	function next() {
+		if (!queue.length) return;
+		if (shuffle) {
+			playIndex(Math.floor(Math.random() * queue.length));
+			return;
+		}
+		if (currentIndex + 1 < queue.length) playIndex(currentIndex + 1);
+		else if (repeat === 'all') playIndex(0);
+	}
+	function prev() {
+		if (!queue.length) return;
+		if (currentTime > 3 && audio) {
+			audio.currentTime = 0;
+			return;
+		}
+		// Wrap to the last track when at the start (OLD behavior).
+		playIndex(currentIndex > 0 ? currentIndex - 1 : queue.length - 1);
+	}
+	function onEnded() {
+		if (repeat === 'one') {
+			if (audio) audio.currentTime = 0;
+			audio?.play().catch(() => {});
+			return;
+		}
+		next();
+	}
+	function seek(e: Event) {
+		const v = Number((e.target as HTMLInputElement).value);
+		if (audio) audio.currentTime = v;
+	}
+	function applyVolume() {
+		if (audio) {
+			audio.volume = volume;
+			audio.muted = muted;
+		}
+	}
+	function setVolume(e: Event) {
+		volume = Number((e.target as HTMLInputElement).value);
+		muted = volume === 0;
+		applyVolume();
+	}
+	function toggleMute() {
+		muted = !muted;
+		applyVolume();
+	}
+	function cycleRepeat() {
+		repeat = repeat === 'none' ? 'all' : repeat === 'all' ? 'one' : 'none';
+	}
+
+	const volumeIcon = $derived(muted || volume === 0 ? 'volume' : 'volume-up');
+
+	function jumpQueue(i: number) {
+		playIndex(i);
+	}
+	function removeFromQueue(i: number) {
+		const next = [...queue];
+		next.splice(i, 1);
+		if (i === currentIndex) {
+			queue = next;
+			if (next.length === 0) {
+				audio?.pause();
+				currentIndex = -1;
+			} else {
+				playIndex(i >= next.length ? 0 : i);
+			}
+		} else {
+			if (i < currentIndex) currentIndex -= 1;
+			queue = next;
+		}
+	}
+
+	/** Live duration backfill: write the real duration into rows/queue lacking it. */
+	function onLoadedMetadata() {
+		duration = audio?.duration ?? 0;
+		const tr = currentTrack;
+		if (tr && audio?.duration && !tr.duration_secs) {
+			const secs = Math.round(audio.duration);
+			tr.duration_secs = secs;
+			queue = queue.map((q) => (q.id === tr.id ? { ...q, duration_secs: secs } : q));
+			tracks = tracks.map((q) => (q.id === tr.id ? { ...q, duration_secs: secs } : q));
+		}
+	}
+
+	function onAudioError() {
+		if (!currentTrack) return;
+		ui.notify(
+			t('music.playback_error', { name: trackLabel(currentTrack) }, 'Playback error: {{name}}'),
+			'error'
+		);
+		playing = false;
+	}
+
+	// Keep the <audio> src in sync with the current queued track.
+	$effect(() => {
+		if (audio && currentTrack) {
+			const url = fileInlineUrl(currentTrack.file_id);
+			if (audio.getAttribute('src') !== url) audio.src = url;
+		}
+	});
+
+	// ── Cover art picker ───────────────────────────────────────────────────────
+	let coverInput = $state<HTMLInputElement | null>(null);
+
+	function pickCover() {
+		coverInput?.click();
+	}
+	async function onCoverChosen(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		input.value = '';
+		if (!file || !current) return;
+		try {
+			const fileId = await uploadCoverImage(file);
+			await updatePlaylist(current.id, { cover_file_id: fileId });
+			current.cover_file_id = fileId;
+			playlists = playlists.map((p) =>
+				p.id === current!.id ? { ...p, cover_file_id: fileId } : p
+			);
+			ui.notify(t('music.cover_updated', 'Cover updated.'), 'success');
+		} catch (err) {
+			ui.notify(err instanceof Error ? err.message : String(err), 'error');
+		}
+	}
+
+	function coverUrl(p: Playlist | null): string | null {
+		return p?.cover_file_id ? `/api/files/${encodeURIComponent(p.cover_file_id)}` : null;
+	}
+
+	// ── Share dialog ───────────────────────────────────────────────────────────
+	let sharesOpen = $state(false);
+	let shares = $state<MusicShare[]>([]);
+	let shareUser = $state('');
+	let shareCanWrite = $state(false);
+	let sharesLoading = $state(false);
+
+	async function openShares() {
+		if (!current) return;
+		sharesOpen = true;
+		await loadShares();
+	}
+	async function loadShares() {
+		if (!current) return;
+		sharesLoading = true;
+		try {
+			shares = await listShares(current.id);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		} finally {
+			sharesLoading = false;
+		}
+	}
+	async function onAddShare() {
+		if (!current || !shareUser.trim()) return;
+		try {
+			await sharePlaylist(current.id, shareUser.trim(), shareCanWrite);
+			shareUser = '';
+			shareCanWrite = false;
+			await loadShares();
+			ui.notify(t('music.share_added', 'Shared.'), 'success');
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+	async function onRemoveShare(userId: string) {
+		if (!current) return;
+		try {
+			await removeShare(current.id, userId);
+			await loadShares();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	// ── Add tracks dialog ──────────────────────────────────────────────────────
+	const AUDIO_TYPES = ['mp3', 'ogg', 'flac', 'wav', 'aac', 'm4a', 'wma', 'opus', 'webm'];
+	let addOpen = $state(false);
+	let addQuery = $state('');
+	let addResults = $state<FileItem[]>([]);
+	let addSelected = $state<Set<string>>(new Set());
+	let addSearching = $state(false);
+	let addDebounce: ReturnType<typeof setTimeout> | null = null;
+
+	async function runAddSearch(query = '') {
+		addSearching = true;
+		try {
+			const res = await searchFiles(query.trim(), {
+				recursive: true,
+				fileTypes: AUDIO_TYPES,
+				limit: 200
+			});
+			// Belt-and-braces: keep only audio mime types.
+			addResults = res.files.filter(
+				(f) =>
+					(f.mime_type ?? '').startsWith('audio/') ||
+					AUDIO_TYPES.some((e) => f.name.toLowerCase().endsWith(`.${e}`))
+			);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+			addResults = [];
+		} finally {
+			addSearching = false;
+		}
+	}
+	function onAddQueryInput() {
+		if (addDebounce) clearTimeout(addDebounce);
+		addDebounce = setTimeout(() => runAddSearch(addQuery), 300);
+	}
+	function openAdd() {
+		addOpen = true;
+		addQuery = '';
+		addResults = [];
+		addSelected = new Set();
+		void runAddSearch(''); // show all audio files immediately
+	}
+	function toggleAdd(id: string) {
+		const n = new Set(addSelected);
+		if (n.has(id)) n.delete(id);
+		else n.add(id);
+		addSelected = n;
+	}
+	async function confirmAdd() {
+		if (!current || addSelected.size === 0) return;
+		const count = addSelected.size;
+		try {
+			await addTracks(current.id, [...addSelected]);
+			addOpen = false;
+			tracks = await listTracks(current.id);
+			ui.notify(t('music.tracks_added', { n: count }, 'Added {{n}} track(s).'), 'success');
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
 	onMount(loadPlaylists);
 </script>
 
 <svelte:head><title>{t('nav.music', 'Music')} · OxiCloud</title></svelte:head>
 
-<div class="music">
-	<aside class="music__sidebar">
-		<div class="music__sidebar-head">
-			<h1>{t('nav.music', 'Music')}</h1>
-			<button class="link-btn" onclick={onCreate}>+ {t('music.new', 'New')}</button>
+<div class="music-container active">
+	{#if error}
+		<div class="music-error">
+			<Icon name="exclamation-circle" />
+			<p>{error}</p>
 		</div>
-		{#if error}
-			<p class="status status--error">{error}</p>
-		{:else if loading && playlists.length === 0}
-			<p class="status">{t('common.loading', 'Loading…')}</p>
-		{:else if playlists.length === 0}
-			<p class="status">{t('music.no_playlists', 'No playlists yet.')}</p>
-		{:else}
-			<ul class="playlists">
-				{#each playlists as p (p.id)}
-					<li>
-						<button
-							class="playlists__item"
-							class:playlists__item--active={current?.id === p.id}
+	{:else if loading && playlists.length === 0}
+		<div class="music-loading"><Icon name="spinner" /></div>
+	{:else if playlists.length === 0}
+		<div class="music-empty-state">
+			<div class="music-empty-state-icon"><Icon name="music" /></div>
+			<h3 class="music-empty-state-title">{t('music.no_playlists', 'No playlists yet.')}</h3>
+			<p class="music-empty-state-desc">
+				{t('music.empty_hint', 'Create a playlist to start collecting your tracks.')}
+			</p>
+			<button class="btn btn-primary" onclick={onCreate}>
+				<Icon name="plus" />
+				<span>{t('music.create_playlist', 'Create playlist')}</span>
+			</button>
+		</div>
+	{:else}
+		<div class="music-content">
+			<div class="music-sidebar">
+				<div class="music-sidebar-header">
+					<h3>{t('music.playlists', 'Playlists')}</h3>
+					<button
+						class="music-sidebar-add-btn"
+						title={t('music.create_playlist', 'Create playlist')}
+						aria-label={t('music.create_playlist', 'Create playlist')}
+						onclick={onCreate}
+					>
+						<Icon name="plus" />
+					</button>
+				</div>
+				<div class="music-playlist-list">
+					{#each playlists as p (p.id)}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="music-playlist-item"
+							class:active={current?.id === p.id}
 							onclick={() => select(p)}
 						>
-							<Icon name="music" class="playlists__icon" />
-							<span class="playlists__name">{p.name}</span>
-							<span class="playlists__count">{p.track_count}</span>
-						</button>
-						<button
-							class="link-btn link-btn--danger"
-							aria-label={t('common.delete', 'Delete')}
-							onclick={() => onDelete(p)}>×</button
-						>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	</aside>
-
-	<section class="music__main">
-		{#if current}
-			<header class="music__main-head">
-				<h2>{current.name}</h2>
-			</header>
-			{#if tracks.length === 0}
-				<p class="status">{t('music.empty_playlist', 'This playlist has no tracks yet.')}</p>
-			{:else}
-				<ul class="tracks">
-					{#each tracks as track, i (track.id)}
-						<li
-							class="track"
-							draggable="true"
-							ondragstart={() => onDragStart(i)}
-							ondragover={(e) => onDragOver(e, i)}
-							ondrop={onDrop}
-							ondragend={() => (dragIndex = null)}
-						>
-							<span class="track__grip" aria-hidden="true"><Icon name="bars" /></span>
-							<button class="track__play" onclick={() => (nowPlaying = track.file_id)}>
-								<Icon name={nowPlaying === track.file_id ? 'pause' : 'play'} />
-							</button>
-							<span class="track__title">{trackLabel(track)}</span>
-							{#if track.artist}<span class="track__artist">{track.artist}</span>{/if}
-							<button class="link-btn link-btn--danger" onclick={() => onRemoveTrack(track)}>
-								{t('common.remove', 'Remove')}
-							</button>
-						</li>
+							<div class="music-playlist-icon"><Icon name="music" /></div>
+							<div class="music-playlist-item-info">
+								<span class="music-playlist-item-name">{p.name}</span>
+								<span class="music-playlist-item-count"
+									>{p.track_count}
+									{t('music.tracks', 'tracks')}</span
+								>
+							</div>
+						</div>
 					{/each}
-				</ul>
-			{/if}
+				</div>
+			</div>
 
-			{#if nowPlaying}
-				<audio class="music__player" src={fileInlineUrl(nowPlaying)} controls autoplay></audio>
-			{/if}
-		{:else}
-			<p class="status">{t('music.select_playlist', 'Select a playlist.')}</p>
-		{/if}
-	</section>
+			<div class="music-main">
+				{#if current}
+					<div class="music-playlist-detail">
+						<div class="music-playlist-header">
+							<button
+								class="music-playlist-cover"
+								title={t('music.set_cover', 'Set cover')}
+								aria-label={t('music.set_cover', 'Set cover')}
+								onclick={pickCover}
+							>
+								{#if coverUrl(current)}
+									<img class="music-cover-img" src={coverUrl(current)} alt="" />
+								{:else}
+									<Icon name="music" />
+								{/if}
+								<div class="music-cover-overlay"><Icon name="camera" /></div>
+							</button>
+							<div class="music-playlist-info">
+								<h2>{current.name}</h2>
+								<p>
+									{t('music.track_count', { n: current.track_count }, '{{n}} tracks')}
+									{#if current.description}· {current.description}{/if}
+								</p>
+								{#if current.is_public}
+									<span class="music-public-badge">
+										<Icon name="globe" /> <span>{t('music.public', 'Public')}</span>
+									</span>
+								{/if}
+							</div>
+						</div>
+
+						<div class="music-playlist-actions">
+							<button class="btn btn-secondary" onclick={playAll} disabled={tracks.length === 0}>
+								<Icon name="play" />
+								<span>{t('music.play_all', 'Play all')}</span>
+							</button>
+							<button
+								class="btn btn-secondary"
+								onclick={shufflePlay}
+								disabled={tracks.length === 0}
+								title={t('music.shuffle', 'Shuffle')}
+								aria-label={t('music.shuffle', 'Shuffle')}
+							>
+								<Icon name="shuffle" />
+							</button>
+							<button class="btn btn-secondary" onclick={openAdd}>
+								<Icon name="plus" />
+								<span>{t('music.add_tracks', 'Add tracks')}</span>
+							</button>
+							<button
+								class="btn btn-secondary"
+								onclick={onRenamePlaylist}
+								title={t('common.rename', 'Rename')}
+								aria-label={t('common.rename', 'Rename')}
+							>
+								<Icon name="pen" />
+							</button>
+							<button
+								class="btn btn-secondary"
+								onclick={onEditDescription}
+								title={t('music.edit_description', 'Edit description')}
+								aria-label={t('music.edit_description', 'Edit description')}
+							>
+								<Icon name="pencil-alt" />
+							</button>
+							<button
+								class="btn btn-secondary"
+								onclick={openShares}
+								title={t('music.manage_shares', 'Manage shares')}
+								aria-label={t('music.manage_shares', 'Manage shares')}
+							>
+								<Icon name="users" />
+							</button>
+							<button
+								class="btn btn-secondary"
+								class:active={current.is_public}
+								onclick={onTogglePublic}
+								title={current.is_public
+									? t('music.make_private', 'Make private')
+									: t('music.make_public', 'Make public')}
+								aria-label={current.is_public
+									? t('music.make_private', 'Make private')
+									: t('music.make_public', 'Make public')}
+							>
+								<Icon name="globe" />
+							</button>
+							<button
+								class="btn btn-secondary"
+								onclick={() => onDelete(current!)}
+								title={t('common.delete', 'Delete')}
+								aria-label={t('common.delete', 'Delete')}
+							>
+								<Icon name="trash" />
+							</button>
+						</div>
+
+						<div class="music-track-list">
+							{#if tracks.length === 0}
+								<div class="music-empty">
+									<Icon name="music" />
+									<p>{t('music.empty_playlist', 'This playlist has no tracks yet.')}</p>
+								</div>
+							{:else}
+								<div class="music-track-header">
+									<span class="music-track-col music-track-drag"></span>
+									<span class="music-track-col music-track-num">#</span>
+									<span class="music-track-col music-track-title">{t('music.title', 'Title')}</span>
+									<span class="music-track-col music-track-artist"
+										>{t('music.artist', 'Artist')}</span
+									>
+									<span class="music-track-col music-track-album">{t('music.album', 'Album')}</span>
+									<span class="music-track-col music-track-duration"><Icon name="clock" /></span>
+									<span class="music-track-col music-track-actions"></span>
+								</div>
+								{#each tracks as track, i (track.id)}
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<!-- svelte-ignore a11y_no_static_element_interactions -->
+									<div
+										class="music-track"
+										class:playing={currentTrack?.id === track.id && playing}
+										draggable="true"
+										ondblclick={() => playFromTracks(i)}
+										ondragstart={() => onDragStart(i)}
+										ondragover={(e) => onDragOver(e, i)}
+										ondrop={onDrop}
+										ondragend={() => (dragIndex = null)}
+									>
+										<span class="music-track-col music-track-drag" aria-hidden="true">
+											<Icon name="grip-vertical" />
+										</span>
+										<span class="music-track-col music-track-num">
+											<!-- svelte-ignore a11y_click_events_have_key_events -->
+											<!-- svelte-ignore a11y_no_static_element_interactions -->
+											<span
+												onclick={(e) => {
+													e.stopPropagation();
+													if (currentTrack?.id === track.id) togglePlay();
+													else playFromTracks(i);
+												}}
+											>
+												{#if currentTrack?.id === track.id}
+													<Icon name={playing ? 'pause' : 'play'} />
+												{:else}
+													<span class="track-num-text">{i + 1}</span>
+												{/if}
+											</span>
+										</span>
+										<span class="music-track-col music-track-title">
+											<Icon name="music" class="music-track-icon" />
+											<span class="music-track-name">{trackLabel(track)}</span>
+										</span>
+										<span class="music-track-col music-track-artist">{track.artist || '—'}</span>
+										<span class="music-track-col music-track-album">{track.album || '-'}</span>
+										<span class="music-track-col music-track-duration"
+											>{fmtDuration(track.duration_secs)}</span
+										>
+										<span class="music-track-col music-track-actions">
+											<button
+												class="music-track-remove-btn"
+												title={t('common.remove', 'Remove')}
+												aria-label={t('common.remove', 'Remove')}
+												onclick={(e) => {
+													e.stopPropagation();
+													onRemoveTrack(track);
+												}}
+											>
+												<Icon name="times" />
+											</button>
+										</span>
+									</div>
+								{/each}
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="music-welcome">
+						<Icon name="music" />
+						<h3>{t('music.select_playlist', 'Select a playlist.')}</h3>
+						<p>{t('music.select_hint', 'Pick a playlist to view its tracks.')}</p>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
 </div>
 
+<!-- Now-playing bar (persists while browsing) -->
+{#if currentTrack}
+	<div class="music-player has-track">
+		<div class="player-track-info">
+			<div class="player-album-art">
+				{#if coverUrl(current)}
+					<img src={coverUrl(current)} alt="" />
+				{:else}
+					<Icon name="music" />
+				{/if}
+			</div>
+			<div class="player-track-details">
+				<span class="player-track-name">{trackLabel(currentTrack)}</span>
+				<span class="player-track-artist">{currentTrack.artist ?? ''}</span>
+			</div>
+		</div>
+
+		<div class="player-controls">
+			<div class="player-buttons">
+				<button
+					class="player-btn"
+					class:active={shuffle}
+					title={t('music.shuffle', 'Shuffle')}
+					aria-label={t('music.shuffle', 'Shuffle')}
+					onclick={() => (shuffle = !shuffle)}
+				>
+					<Icon name="shuffle" />
+				</button>
+				<button
+					class="player-btn"
+					title={t('music.prev', 'Previous')}
+					aria-label={t('music.prev', 'Previous')}
+					onclick={prev}
+				>
+					<Icon name="backward" />
+				</button>
+				<button
+					class="player-btn player-btn-main"
+					title={t('music.play', 'Play')}
+					aria-label={t('music.play', 'Play')}
+					onclick={togglePlay}
+				>
+					<Icon name={playing ? 'pause' : 'play'} />
+				</button>
+				<button
+					class="player-btn"
+					title={t('music.next', 'Next')}
+					aria-label={t('music.next', 'Next')}
+					onclick={next}
+				>
+					<Icon name="forward" />
+				</button>
+				<button
+					class="player-btn"
+					class:active={repeat !== 'none'}
+					class:repeat-one={repeat === 'one'}
+					title={t('music.repeat', 'Repeat')}
+					aria-label={t('music.repeat', 'Repeat')}
+					onclick={cycleRepeat}
+				>
+					<Icon name="repeat" />
+					{#if repeat === 'one'}<span class="repeat-one-badge">1</span>{/if}
+				</button>
+			</div>
+			<div class="player-progress">
+				<span class="player-time player-time-current">{fmtTime(currentTime)}</span>
+				<input
+					class="player-progress-range"
+					type="range"
+					min="0"
+					max={duration || 0}
+					value={currentTime}
+					oninput={seek}
+					aria-label={t('music.seek', 'Seek')}
+				/>
+				<span class="player-time player-time-total">{fmtTime(duration)}</span>
+			</div>
+		</div>
+
+		<div class="player-extra">
+			<button
+				class="player-btn player-btn-small"
+				class:active={queueOpen}
+				title={t('music.queue', 'Queue')}
+				aria-label={t('music.queue', 'Queue')}
+				onclick={() => (queueOpen = !queueOpen)}
+			>
+				<Icon name="list" />
+			</button>
+			<button
+				class="player-btn player-btn-small"
+				title={t('music.mute', 'Mute')}
+				aria-label={t('music.mute', 'Mute')}
+				onclick={toggleMute}
+			>
+				<Icon name={volumeIcon} />
+			</button>
+			<div class="player-volume-slider">
+				<input
+					id="player-volume-input"
+					type="range"
+					min="0"
+					max="1"
+					step="0.05"
+					value={muted ? 0 : volume}
+					oninput={setVolume}
+					aria-label={t('music.volume', 'Volume')}
+				/>
+			</div>
+		</div>
+	</div>
+
+	{#if queueOpen}
+		<div class="player-queue">
+			<div class="player-queue-header">
+				<h3>{t('music.queue', 'Queue')}</h3>
+				<button
+					class="player-btn player-btn-small"
+					onclick={() => (queueOpen = false)}
+					aria-label={t('common.close', 'Close')}
+				>
+					<Icon name="times" />
+				</button>
+			</div>
+			<div class="player-queue-list">
+				{#if queue.length === 0}
+					<div class="player-queue-empty">
+						<Icon name="music" />
+						<p>{t('music.queue_empty', 'Queue is empty.')}</p>
+					</div>
+				{:else}
+					{#each queue as qt, i (qt.id)}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="player-queue-item"
+							class:active={i === currentIndex}
+							onclick={() => jumpQueue(i)}
+						>
+							<span class="queue-item-num">{i + 1}</span>
+							<span class="queue-item-info">
+								<span class="queue-item-name">{trackLabel(qt)}</span>
+								<span class="queue-item-artist">{qt.artist ?? ''}</span>
+							</span>
+							<span class="queue-item-duration">{fmtDuration(qt.duration_secs)}</span>
+							<button
+								class="queue-item-remove"
+								aria-label={t('common.remove', 'Remove')}
+								onclick={(e) => {
+									e.stopPropagation();
+									removeFromQueue(i);
+								}}
+							>
+								<Icon name="times" />
+							</button>
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+{/if}
+
+<audio
+	bind:this={audio}
+	onplay={() => (playing = true)}
+	onpause={() => (playing = false)}
+	ontimeupdate={() => (currentTime = audio?.currentTime ?? 0)}
+	onloadedmetadata={onLoadedMetadata}
+	onended={onEnded}
+	onerror={onAudioError}
+></audio>
+
+<input
+	bind:this={coverInput}
+	type="file"
+	accept="image/*"
+	class="hidden-input"
+	onchange={onCoverChosen}
+/>
+
+{#if addOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="music-picker-overlay active"
+		onclick={(e) => {
+			if (e.target === e.currentTarget) addOpen = false;
+		}}
+	>
+		<div class="music-picker-modal">
+			<div class="music-picker-header">
+				<h3><Icon name="music" /> {t('music.add_tracks', 'Add tracks')}</h3>
+				<button
+					class="music-picker-close"
+					aria-label={t('common.close', 'Close')}
+					onclick={() => (addOpen = false)}>&times;</button
+				>
+			</div>
+			<div class="music-picker-search">
+				<Icon name="search" />
+				<!-- svelte-ignore a11y_autofocus -->
+				<input
+					type="text"
+					placeholder={t('music.search_audio', 'Search audio files…')}
+					bind:value={addQuery}
+					oninput={onAddQueryInput}
+					autocomplete="off"
+					autofocus
+				/>
+			</div>
+			<div class="music-picker-list">
+				{#if addSearching}
+					<div class="music-picker-loading">
+						<Icon name="spinner" />
+						{t('common.loading', 'Loading…')}
+					</div>
+				{:else if addResults.length === 0}
+					<div class="music-picker-empty">
+						<Icon name="folder-open" />
+						{t('music.no_audio', 'No audio files found.')}
+					</div>
+				{:else}
+					{#each addResults as f (f.id)}
+						<label class="music-picker-item" class:selected={addSelected.has(f.id)}>
+							<input
+								type="checkbox"
+								checked={addSelected.has(f.id)}
+								onchange={() => toggleAdd(f.id)}
+							/>
+							<Icon name="file-audio" />
+							<span class="music-picker-name" title={f.name}>{f.name}</span>
+						</label>
+					{/each}
+				{/if}
+			</div>
+			<div class="music-picker-footer">
+				<span class="music-picker-selected-count">
+					{t('music.selected_count', { n: addSelected.size }, '{{n}} selected')}
+				</span>
+				<div class="music-picker-actions">
+					<button class="btn btn-secondary" onclick={() => (addOpen = false)}>
+						{t('common.cancel', 'Cancel')}
+					</button>
+					<button class="btn btn-primary" disabled={addSelected.size === 0} onclick={confirmAdd}>
+						<Icon name="plus" />
+						{t('music.add_selected', 'Add selected')}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+{#if sharesOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="music-shares-overlay"
+		onclick={(e) => {
+			if (e.target === e.currentTarget) sharesOpen = false;
+		}}
+	>
+		<div class="music-shares-panel">
+			<div class="music-shares-header">
+				<h3><Icon name="users" /> {t('music.manage_shares', 'Manage shares')}</h3>
+				<button
+					class="music-shares-close-btn"
+					aria-label={t('common.close', 'Close')}
+					onclick={() => (sharesOpen = false)}
+				>
+					<Icon name="times" />
+				</button>
+			</div>
+			<div class="music-shares-body">
+				{#if sharesLoading}
+					<div class="music-shares-loading"><Icon name="spinner" /></div>
+				{:else if shares.length === 0}
+					<p class="music-shares-empty">{t('music.no_shares', 'Not shared with anyone yet.')}</p>
+				{:else}
+					{#each shares as s (s.user_id)}
+						<div class="music-share-item">
+							<span class="music-share-user"><Icon name="user" /> {s.user_id}</span>
+							<span class="music-share-perm">
+								{s.can_write ? t('music.can_write', 'Can edit') : t('music.read_only', 'Read only')}
+							</span>
+							<button
+								class="music-share-remove-btn"
+								title={t('music.remove_share', 'Remove')}
+								aria-label={t('music.remove_share', 'Remove')}
+								onclick={() => onRemoveShare(s.user_id)}
+							>
+								<Icon name="times" />
+							</button>
+						</div>
+					{/each}
+				{/if}
+			</div>
+			<div class="music-shares-add">
+				<input
+					type="text"
+					class="music-shares-input"
+					placeholder={t('music.share_with_user', 'User ID or email')}
+					bind:value={shareUser}
+					autocomplete="off"
+				/>
+				<label class="music-shares-write-label">
+					<input type="checkbox" bind:checked={shareCanWrite} />
+					{t('music.can_write', 'Can edit')}
+				</label>
+				<button class="btn btn-primary btn-sm" disabled={!shareUser.trim()} onclick={onAddShare}>
+					<Icon name="plus" />
+					{t('music.share', 'Share')}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <style>
-	.music {
-		display: grid;
-		grid-template-columns: 16rem 1fr;
-		min-height: 100vh;
+	/* Almost all visuals come from the ported music.css (global, token-based).
+	   Only the off-screen file input and player spacing live here. */
+	.hidden-input {
+		display: none;
 	}
 
-	.music__sidebar {
-		border-right: 1px solid var(--color-border);
-		padding: 1rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.music__sidebar-head,
-	.music__main-head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.music__sidebar-head h1 {
-		font-size: 1.25rem;
-		margin: 0;
-	}
-
-	.playlists {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-	}
-
-	.playlists li {
-		display: flex;
-		align-items: center;
-	}
-
-	.playlists__item {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		flex: 1;
-		min-width: 0;
-		padding: 0.5rem;
-		border: none;
-		background: none;
-		color: var(--color-text);
-		cursor: pointer;
-		border-radius: var(--radius-md);
-		text-align: left;
-	}
-
-	.playlists__item:hover {
-		background: var(--color-bg-hover);
-	}
-
-	.playlists__item--active {
-		background: var(--color-bg-hover);
-		font-weight: 600;
-	}
-
-	.playlists__name {
-		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.playlists__count {
-		color: var(--color-text-muted);
-		font-size: 0.8125rem;
-	}
-
-	.music__main {
-		padding: 1rem;
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.tracks {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-	}
-
-	.track {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0.5rem 0.75rem;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md);
-		background: var(--color-bg-surface);
-	}
-
-	.track__grip {
-		cursor: grab;
-		color: var(--color-text-muted);
-	}
-
-	.track__play {
-		border: none;
-		background: none;
-		cursor: pointer;
-		color: var(--color-primary);
-	}
-
-	.track__title {
-		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.track__artist {
-		color: var(--color-text-muted);
-		font-size: 0.8125rem;
-	}
-
-	.music__player {
-		position: sticky;
-		bottom: 0;
-		width: 100%;
-	}
-
-	.status {
-		color: var(--color-text-muted);
-		padding: 1rem 0;
-	}
-
-	.status--error {
-		color: var(--color-danger-text);
-	}
-
-	.link-btn {
-		background: none;
-		border: none;
-		color: var(--color-primary);
-		cursor: pointer;
-		font-size: 0.8125rem;
-	}
-
-	.link-btn--danger {
-		color: var(--color-danger-text);
-	}
-
-	@media (width <= 48rem) {
-		.music {
-			grid-template-columns: 1fr;
-		}
+	/* Leave room above the OS chrome for the fixed player bar so the last
+	   tracks/sidebar content isn't hidden behind it while playing. */
+	:global(body:has(.music-player.has-track)) .music-container {
+		padding-bottom: 90px;
 	}
 </style>
diff --git a/frontend/src/routes/nextcloud/error/+page.svelte b/frontend/src/routes/nextcloud/error/+page.svelte
index 60c40da8..498161d1 100644
--- a/frontend/src/routes/nextcloud/error/+page.svelte
+++ b/frontend/src/routes/nextcloud/error/+page.svelte
@@ -3,23 +3,74 @@
 	import Icon from '$lib/icons/Icon.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 
-	const reason = $derived(page.url.searchParams.get('reason') ?? '');
+	type ErrorAction = 'retry' | 'close';
+	interface ErrorView {
+		title: string;
+		message: string;
+		actionLabel: string;
+		action: ErrorAction;
+	}
+
+	// Legacy used `?type=`; the rewrite briefly renamed it to `?reason=`. Read
+	// `type` first and fall back to `reason` so older links keep working.
+	const errorType = $derived(
+		page.url.searchParams.get('type') ?? page.url.searchParams.get('reason') ?? 'generic'
+	);
+
+	const view = $derived<ErrorView>(buildView(errorType));
+
+	function buildView(type: string): ErrorView {
+		switch (type) {
+			case 'invalid-credentials':
+				return {
+					title: t('nextcloud.error_invalid_title', 'Login Failed'),
+					message: t(
+						'nextcloud.error_invalid_body',
+						'Invalid username or password. Please check your credentials and try again.'
+					),
+					actionLabel: t('common.retry', 'Try Again'),
+					action: 'retry'
+				};
+			case 'session-expired':
+				return {
+					title: t('nextcloud.error_expired_title', 'Session Expired'),
+					message: t('nextcloud.error_expired_body', 'Your session has expired. Please try again.'),
+					actionLabel: t('nextcloud.close_window', 'Close Window'),
+					action: 'close'
+				};
+			case 'not-found':
+				return {
+					title: t('nextcloud.error_notfound_title', 'Not Found'),
+					message: t('nextcloud.error_notfound_body', 'The requested page was not found.'),
+					actionLabel: t('nextcloud.close_window', 'Close Window'),
+					action: 'close'
+				};
+			default:
+				return {
+					title: t('nextcloud.error_title', 'Error'),
+					message: t(
+						'nextcloud.error_generic_body',
+						'An unexpected error occurred. Please try again.'
+					),
+					actionLabel: t('nextcloud.close_window', 'Close Window'),
+					action: 'close'
+				};
+		}
+	}
+
+	function onAction() {
+		if (view.action === 'retry') history.back();
+		else window.close();
+	}
 </script>
 
-<svelte:head
-	><title>{t('nextcloud.error_title', 'Something went wrong')} · OxiCloud</title></svelte:head
->
+<svelte:head><title>{view.title} · OxiCloud</title></svelte:head>
 
 <main class="nc-status">
 	<Icon name="ban" class="nc-status__icon nc-status__icon--err" />
-	<h1>{t('nextcloud.error_title', 'Something went wrong')}</h1>
-	<p>
-		{t(
-			'nextcloud.error_body',
-			'The connection could not be completed. Please try again from your application.'
-		)}
-	</p>
-	{#if reason}<p class="nc-status__reason">{reason}</p>{/if}
+	<h1>{view.title}</h1>
+	<p>{view.message}</p>
+	<button type="button" class="nc-status__action" onclick={onAction}>{view.actionLabel}</button>
 </main>
 
 <style>
@@ -42,8 +93,13 @@
 		color: var(--color-danger-text);
 	}
 
-	.nc-status__reason {
-		color: var(--color-text-muted);
-		font-size: 0.875rem;
+	.nc-status__action {
+		margin-top: 0.5rem;
+		padding: 0.5rem 1.25rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-primary);
+		color: var(--color-text-light);
+		cursor: pointer;
 	}
 </style>
diff --git a/frontend/src/routes/nextcloud/login/+page.svelte b/frontend/src/routes/nextcloud/login/+page.svelte
index 53457a93..2e039f52 100644
--- a/frontend/src/routes/nextcloud/login/+page.svelte
+++ b/frontend/src/routes/nextcloud/login/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { onMount } from 'svelte';
-	import { apiFetch } from '$lib/api/client';
+	import { getOidcProviders } from '$lib/api/endpoints/auth';
 	import { t } from '$lib/i18n/index.svelte';
 
 	// Nextcloud Login Flow v2. The form does a NATIVE POST to the backend flow
@@ -16,114 +16,80 @@
 	let passwordLoginEnabled = $state(true);
 
 	onMount(async () => {
-		try {
-			const resp = await apiFetch('/api/auth/oidc/providers');
-			if (!resp.ok) return;
-			const info = (await resp.json()) as {
-				enabled?: boolean;
-				provider_name?: string;
-				password_login_enabled?: boolean;
-			};
-			if (!info.enabled) return;
-			oidcEnabled = true;
-			oidcProvider = info.provider_name || 'SSO';
-			passwordLoginEnabled = info.password_login_enabled !== false;
-		} catch {
-			/* OIDC not available — password-only */
-		}
+		const info = await getOidcProviders();
+		if (!info.enabled) return;
+		oidcEnabled = true;
+		oidcProvider = info.provider_name || 'SSO';
+		passwordLoginEnabled = info.password_login_enabled !== false;
 	});
 </script>
 
 <svelte:head><title>{t('app.title', 'OxiCloud')}</title></svelte:head>
 
-<main class="nc">
-	<div class="nc__card">
-		<h1>{t('nextcloud.grant_title', 'Grant access')}</h1>
+<div class="auth-container">
+	<div class="auth-panel">
+		<div class="auth-logo">
+			<div class="auth-logo-icon">
+				<svg viewBox="120 120 280 280" aria-hidden="true">
+					<path
+						d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"
+					/>
+				</svg>
+			</div>
+			<div class="auth-logo-text"><span class="brand-oxi">Oxi</span>Cloud</div>
+		</div>
+
+		<h1 class="auth-title">{t('nextcloud.grant_title', 'Grant access')}</h1>
+		<p class="auth-subtitle">
+			{t('nextcloud.grant_subtitle', 'A Nextcloud client is requesting access to your account.')}
+		</p>
 
 		{#if !validToken}
-			<p class="nc__error">{t('nextcloud.invalid_token', 'Invalid session token.')}</p>
+			<div class="auth-error" style="display: block" role="alert">
+				{t('nextcloud.invalid_token', 'Invalid session token.')}
+			</div>
 		{:else}
 			{#if passwordLoginEnabled}
-				<form method="post" action={formAction} class="nc__form">
-					<label>
-						<span>{t('auth.username', 'Username or email')}</span>
-						<input name="user" type="text" autocomplete="username" required />
-					</label>
-					<label>
-						<span>{t('auth.password', 'Password')}</span>
-						<input name="password" type="password" autocomplete="current-password" required />
-					</label>
-					<button type="submit">{t('nextcloud.grant', 'Grant access')}</button>
+				<form class="auth-form" method="post" action={formAction}>
+					<div class="auth-input-group">
+						<label class="auth-label" for="nc-user">{t('auth.username', 'Username or email')}</label
+						>
+						<div class="auth-input-wrap auth-input-wrap--user">
+							<input
+								id="nc-user"
+								class="auth-input"
+								name="user"
+								type="text"
+								autocomplete="username"
+								required
+							/>
+						</div>
+					</div>
+					<div class="auth-input-group">
+						<label class="auth-label" for="nc-password">{t('auth.password', 'Password')}</label>
+						<div class="auth-input-wrap auth-input-wrap--lock">
+							<input
+								id="nc-password"
+								class="auth-input"
+								name="password"
+								type="password"
+								autocomplete="current-password"
+								required
+							/>
+						</div>
+					</div>
+					<button class="auth-button" type="submit">{t('nextcloud.grant', 'Grant access')}</button>
 				</form>
 			{/if}
 
 			{#if oidcEnabled}
-				<div class="nc__oidc">
-					<a class="nc__sso" href={`/login/v2/flow/${token}/oidc`}>
-						{t('nextcloud.sign_in_with', { provider: oidcProvider }, 'Sign in with {{provider}}')}
-					</a>
-				</div>
+				{#if passwordLoginEnabled}
+					<div class="auth-divider"><span>{t('auth.or', 'or')}</span></div>
+				{/if}
+				<a class="auth-button auth-button-sso" href={`/login/v2/flow/${token}/oidc`}>
+					{t('nextcloud.sign_in_with', { provider: oidcProvider }, 'Sign in with {{provider}}')}
+				</a>
 			{/if}
 		{/if}
 	</div>
-</main>
-
-<style>
-	.nc {
-		min-height: 100vh;
-		display: grid;
-		place-items: center;
-		padding: 1rem;
-		background: var(--color-bg-page);
-	}
-
-	.nc__card {
-		width: min(92vw, 22rem);
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		padding: 2rem;
-		background: var(--color-bg-surface);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		box-shadow: var(--shadow-lg);
-	}
-
-	.nc__form {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	label {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-		font-size: 0.875rem;
-	}
-
-	input {
-		padding: 0.5rem 0.625rem;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md);
-		background: var(--color-bg-input);
-		color: var(--color-text);
-	}
-
-	button,
-	.nc__sso {
-		display: inline-block;
-		text-align: center;
-		padding: 0.5rem 1rem;
-		border: none;
-		border-radius: var(--radius-md);
-		background: var(--color-primary);
-		color: var(--color-text-light);
-		text-decoration: none;
-		cursor: pointer;
-	}
-
-	.nc__error {
-		color: var(--color-danger-text);
-	}
-</style>
+</div>
diff --git a/frontend/src/routes/nextcloud/success/+page.svelte b/frontend/src/routes/nextcloud/success/+page.svelte
index d6437217..ca662698 100644
--- a/frontend/src/routes/nextcloud/success/+page.svelte
+++ b/frontend/src/routes/nextcloud/success/+page.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import Icon from '$lib/icons/Icon.svelte';
 	import { t } from '$lib/i18n/index.svelte';
+
+	function closeWindow() {
+		window.close();
+	}
+
+	onMount(() => {
+		// Mirror the legacy flow: auto-close the popup shortly after success so
+		// the user is returned to their Nextcloud client without an extra click.
+		const timer = setTimeout(closeWindow, 3000);
+		return () => clearTimeout(timer);
+	});
 </script>
 
 <svelte:head><title>{t('nextcloud.success_title', 'Access granted')} · OxiCloud</title></svelte:head
@@ -10,6 +22,9 @@
 	<Icon name="check" class="nc-status__icon nc-status__icon--ok" />
 	<h1>{t('nextcloud.success_title', 'Access granted')}</h1>
 	<p>{t('nextcloud.success_body', 'You can now return to your application — it is connected.')}</p>
+	<button type="button" class="nc-status__action" onclick={closeWindow}>
+		{t('nextcloud.close_window', 'Close Window')}
+	</button>
 </main>
 
 <style>
@@ -31,4 +46,14 @@
 	:global(.nc-status__icon--ok) {
 		color: var(--color-success-text);
 	}
+
+	.nc-status__action {
+		margin-top: 0.5rem;
+		padding: 0.5rem 1.25rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-primary);
+		color: var(--color-text-light);
+		cursor: pointer;
+	}
 </style>
diff --git a/frontend/src/routes/photos/+page.svelte b/frontend/src/routes/photos/+page.svelte
index 67e8ad87..7f4f2b81 100644
--- a/frontend/src/routes/photos/+page.svelte
+++ b/frontend/src/routes/photos/+page.svelte
@@ -1,9 +1,19 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { fetchPhotos } from '$lib/api/endpoints/photos';
-	import { fileInlineUrl, fileThumbnailUrl } from '$lib/api/endpoints/files';
+	import {
+		batchTrash,
+		fetchFileMetadata,
+		fetchPhotos,
+		uploadThumbnail,
+		type FileMetadata
+	} from '$lib/api/endpoints/photos';
+	import { addFavorite } from '$lib/api/endpoints/favorites';
+	import { deleteFile, fileDownloadUrl, fileInlineUrl } from '$lib/api/endpoints/files';
 	import type { FileItem } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import { confirmDialog } from '$lib/stores/dialogs.svelte';
 	import { t } from '$lib/i18n/index.svelte';
+	import { ui } from '$lib/stores/ui.svelte';
 
 	let items = $state<FileItem[]>([]);
 	let cursor = $state<string | null>(null);
@@ -12,6 +22,72 @@
 	let error = $state<string | null>(null);
 	let sentinel = $state<HTMLElement | null>(null);
 
+	type GroupMode = 'day' | 'month' | 'year';
+	const GROUP_KEY = 'oxicloud-photos-group';
+	let groupMode = $state<GroupMode>('month');
+	let selected = $state<Set<string>>(new Set());
+	let lightbox = $state(-1); // index into `items`, -1 = closed
+
+	/** Client-generated video frame thumbnails (file id → data/URL). */
+	let videoThumbs = $state<Record<string, string>>({});
+
+	function isVideo(p: FileItem): boolean {
+		return (p.mime_type ?? '').startsWith('video/');
+	}
+
+	/** EXIF-aware timestamp (seconds → ms), matching the OLD grouping logic. */
+	function ts(p: FileItem): number {
+		const v = p.sort_date || p.created_at || 0;
+		return v < 1e12 ? v * 1000 : v;
+	}
+
+	function bucketKey(d: Date): string {
+		const y = d.getFullYear();
+		if (groupMode === 'year') return `${y}`;
+		const m = `${d.getMonth() + 1}`.padStart(2, '0');
+		if (groupMode === 'month') return `${y}-${m}`;
+		return `${y}-${m}-${`${d.getDate()}`.padStart(2, '0')}`;
+	}
+
+	function bucketLabel(d: Date): string {
+		if (groupMode === 'year') return `${d.getFullYear()}`;
+		if (groupMode === 'month')
+			return d.toLocaleDateString(undefined, { year: 'numeric', month: 'long' });
+		return d.toLocaleDateString(undefined, {
+			weekday: 'long',
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		});
+	}
+
+	const groups = $derived.by(() => {
+		const out: Array<{ key: string; label: string; photos: FileItem[] }> = [];
+		const index = new Map<string, number>();
+		for (const p of items) {
+			const d = new Date(ts(p));
+			const key = bucketKey(d);
+			let i = index.get(key);
+			if (i === undefined) {
+				i = out.length;
+				index.set(key, i);
+				out.push({ key, label: bucketLabel(d), photos: [] });
+			}
+			out[i].photos.push(p);
+		}
+		return out;
+	});
+
+	function iconUrl(id: string): string {
+		return `/api/files/${id}/thumbnail/icon`;
+	}
+	function previewUrl(id: string): string {
+		return `/api/files/${id}/thumbnail/preview`;
+	}
+	function largeUrl(id: string): string {
+		return `/api/files/${id}/thumbnail/large`;
+	}
+
 	async function loadMore() {
 		if (loading || exhausted) return;
 		loading = true;
@@ -29,7 +105,290 @@
 		}
 	}
 
+	function setGroupMode(m: GroupMode) {
+		if (groupMode === m) return;
+		groupMode = m;
+		if (typeof localStorage !== 'undefined') localStorage.setItem(GROUP_KEY, m);
+	}
+
+	function toggle(id: string) {
+		const n = new Set(selected);
+		if (n.has(id)) n.delete(id);
+		else n.add(id);
+		selected = n;
+	}
+
+	/** A plain tile click toggles selection once anything is selected, else opens the lightbox. */
+	function onTileClick(p: FileItem) {
+		if (selected.size > 0) toggle(p.id);
+		else openLightbox(p);
+	}
+
+	function downloadSelected() {
+		for (const id of selected) {
+			const a = document.createElement('a');
+			a.href = fileDownloadUrl(id);
+			a.download = '';
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+		}
+	}
+
+	async function trashSelected() {
+		const ids = [...selected];
+		const ok = await confirmDialog({
+			title: t('photos.delete', 'Delete photos'),
+			message: t('photos.confirm_delete', { n: ids.length }, 'Move {{n}} photos to trash?'),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
+		try {
+			const trashed = await batchTrash(ids);
+			if (trashed.size > 0) {
+				items = items.filter((p) => !trashed.has(p.id));
+				const n = new Set(selected);
+				for (const id of trashed) n.delete(id);
+				selected = n;
+			}
+			if (trashed.size < ids.length) {
+				ui.notify(
+					t(
+						'photos.trash_partial',
+						{ ok: trashed.size, total: ids.length },
+						'{{ok}} of {{total}} moved to trash.'
+					),
+					'warning'
+				);
+			} else {
+				ui.notify(t('photos.trashed', { n: trashed.size }, '{{n}} moved to trash.'), 'success');
+			}
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	// ── Client-side video thumbnail generation ──────────────────────────────
+	// When the server has no thumbnail for a video tile the <img> errors; we
+	// then extract a frame with the browser's native decoder and upload it.
+
+	async function generateVideoThumb(file: FileItem) {
+		if (videoThumbs[file.id]) return;
+		try {
+			const bitmap = await frameFromVideo(fileInlineUrl(file.id));
+			const SIZES: Array<['icon' | 'preview' | 'large', number, number]> = [
+				['icon', 150, 150],
+				['preview', 400, 400],
+				['large', 800, 800]
+			];
+			let previewData = '';
+			for (const [size, w, h] of SIZES) {
+				const blob = await bitmapToBlob(bitmap, w, h);
+				if (size === 'preview') previewData = await blobToDataUrl(blob);
+				await uploadThumbnail(file.id, size, blob).catch(() => {});
+			}
+			if (previewData) videoThumbs = { ...videoThumbs, [file.id]: previewData };
+		} catch {
+			// Keep the generic play badge on failure.
+		}
+	}
+
+	function frameFromVideo(src: string): Promise<ImageBitmap> {
+		return new Promise((resolve, reject) => {
+			const video = document.createElement('video');
+			video.src = src;
+			video.muted = true;
+			video.preload = 'metadata';
+			video.onloadedmetadata = () => {
+				video.currentTime = (video.duration || 3) / 3;
+			};
+			video.onseeked = async () => {
+				try {
+					const bitmap = await createImageBitmap(video);
+					video.removeAttribute('src');
+					video.load();
+					resolve(bitmap);
+				} catch (e) {
+					reject(e instanceof Error ? e : new Error(String(e)));
+				}
+			};
+			video.onerror = () => reject(new Error('video frame extraction failed'));
+		});
+	}
+
+	async function bitmapToBlob(bitmap: ImageBitmap, tw: number, th: number): Promise<Blob> {
+		const ratio = bitmap.width / bitmap.height;
+		const target = tw / th;
+		const w = ratio > target ? tw : Math.round(th * ratio);
+		const h = ratio > target ? Math.round(tw / ratio) : th;
+		const canvas = document.createElement('canvas');
+		canvas.width = w;
+		canvas.height = h;
+		canvas.getContext('2d')?.drawImage(bitmap, 0, 0, w, h);
+		return new Promise<Blob>((resolve, reject) => {
+			canvas.toBlob(
+				(b) => (b ? resolve(b) : reject(new Error('canvas toBlob failed'))),
+				'image/jpeg',
+				0.8
+			);
+		});
+	}
+
+	function blobToDataUrl(blob: Blob): Promise<string> {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = () => resolve(String(reader.result));
+			reader.onerror = () => reject(new Error('blob read failed'));
+			reader.readAsDataURL(blob);
+		});
+	}
+
+	// ── Lightbox ─────────────────────────────────────────────────────────────
+	let lbShowingOriginal = $state(false);
+	let lbFullResBusy = $state(false);
+	let lbMeta = $state('');
+	let lbFavorited = $state(false);
+	/** Token guarding against stale async loads during rapid prev/next. */
+	let lbGeneration = 0;
+
+	const lbItem = $derived(lightbox >= 0 ? (items[lightbox] ?? null) : null);
+
+	function baseMeta(p: FileItem): string {
+		const dateStr = new Date(ts(p)).toLocaleDateString(undefined, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+		return p.size_formatted ? `${dateStr} · ${p.size_formatted}` : dateStr;
+	}
+
+	function applyMetadata(p: FileItem, md: FileMetadata) {
+		const parts = [baseMeta(p)];
+		if (md.camera_make || md.camera_model) {
+			parts.push([md.camera_make, md.camera_model].filter(Boolean).join(' '));
+		}
+		if (md.width && md.height) parts.push(`${md.width}×${md.height}`);
+		lbMeta = parts.join(' · ');
+	}
+
+	function openLightbox(p: FileItem) {
+		lightbox = items.findIndex((x) => x.id === p.id);
+	}
+
+	/** Reset per-item lightbox state and kick off metadata + neighbour preload. */
+	function showLightboxItem(p: FileItem) {
+		const generation = ++lbGeneration;
+		lbShowingOriginal = p.mime_type === 'image/gif';
+		lbFullResBusy = false;
+		lbFavorited = false;
+		lbMeta = baseMeta(p);
+		preloadNeighbors();
+		void fetchFileMetadata(p.id).then((md) => {
+			if (md && generation === lbGeneration) applyMetadata(p, md);
+		});
+	}
+
+	// Re-run per-item setup whenever the visible lightbox item changes.
+	$effect(() => {
+		if (lbItem) showLightboxItem(lbItem);
+	});
+
+	function preloadNeighbors() {
+		for (const i of [lightbox - 1, lightbox + 1]) {
+			const it = items[i];
+			if (it && !isVideo(it)) {
+				const pre = new Image();
+				pre.src = largeUrl(it.id);
+			}
+		}
+	}
+
+	/** The image src to display: large thumbnail first, original on expand/GIF. */
+	const lbImgSrc = $derived(
+		lbItem ? (lbShowingOriginal ? fileInlineUrl(lbItem.id) : largeUrl(lbItem.id)) : ''
+	);
+
+	function onLbImgError() {
+		if (!lbItem) return;
+		// Thumbnail missing → fall back to the original; original failing is terminal.
+		if (!lbShowingOriginal) {
+			lbShowingOriginal = true;
+		}
+	}
+
+	function onLbImgLoad() {
+		lbFullResBusy = false;
+	}
+
+	function expandFullRes() {
+		if (!lbItem || lbShowingOriginal) return;
+		lbShowingOriginal = true;
+		lbFullResBusy = true;
+	}
+
+	function lbDownload() {
+		if (!lbItem) return;
+		const a = document.createElement('a');
+		a.href = fileDownloadUrl(lbItem.id);
+		a.download = lbItem.name;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+	}
+
+	async function lbToggleFavorite() {
+		if (!lbItem) return;
+		try {
+			await addFavorite('file', lbItem.id);
+			lbFavorited = !lbFavorited;
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function lbDelete() {
+		if (!lbItem) return;
+		const target = lbItem;
+		const ok = await confirmDialog({
+			title: t('photos.delete', 'Delete photo'),
+			message: t('photos.confirm_delete_one', { name: target.name }, 'Delete {{name}}?'),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
+		try {
+			await deleteFile(target.id);
+			const at = items.findIndex((x) => x.id === target.id);
+			items = items.filter((x) => x.id !== target.id);
+			if (items.length === 0) {
+				lightbox = -1;
+			} else {
+				lightbox = Math.min(at, items.length - 1);
+			}
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	function lbPrev() {
+		if (lightbox > 0) lightbox -= 1;
+	}
+	function lbNext() {
+		if (lightbox >= 0 && lightbox < items.length - 1) lightbox += 1;
+	}
+	function onKeydown(e: KeyboardEvent) {
+		if (lightbox < 0) return;
+		if (e.key === 'Escape') lightbox = -1;
+		else if (e.key === 'ArrowLeft') lbPrev();
+		else if (e.key === 'ArrowRight') lbNext();
+	}
+
 	onMount(() => {
+		const saved = typeof localStorage !== 'undefined' ? localStorage.getItem(GROUP_KEY) : null;
+		if (saved === 'day' || saved === 'month' || saved === 'year') groupMode = saved;
 		void loadMore();
 		if (!sentinel) return;
 		const obs = new IntersectionObserver(
@@ -41,62 +400,326 @@
 		obs.observe(sentinel);
 		return () => obs.disconnect();
 	});
+
+	const MODES: GroupMode[] = ['day', 'month', 'year'];
 </script>
 
 <svelte:head><title>{t('nav.photos', 'Photos')} · OxiCloud</title></svelte:head>
+<svelte:window onkeydown={onKeydown} />
 
-<h1 class="page-title">{t('nav.photos', 'Photos')}</h1>
+<div class="page-sticky-header photos-head">
+	<h1 class="page-title">{t('nav.photos', 'Photos')}</h1>
+	<div class="seg" role="group" aria-label={t('photos.group_by', 'Group by')}>
+		{#each MODES as m (m)}
+			<button class="seg__btn" class:active={groupMode === m} onclick={() => setGroupMode(m)}>
+				{t(`photos.${m}`, m)}
+			</button>
+		{/each}
+	</div>
+</div>
+
+{#if selected.size > 0}
+	<div class="batch-bar">
+		<span>{t('files.selected_count', { n: selected.size }, '{{n}} selected')}</span>
+		<div class="batch-bar__actions">
+			<button class="btn btn-secondary" onclick={downloadSelected}
+				>{t('common.download', 'Download')}</button
+			>
+			<button class="btn btn-secondary" onclick={() => (selected = new Set())}
+				>{t('common.clear', 'Clear')}</button
+			>
+			<button class="btn btn-danger" onclick={trashSelected}>{t('common.delete', 'Delete')}</button>
+		</div>
+	</div>
+{/if}
 
 {#if error}
 	<p class="status status--error" role="alert">{error}</p>
 {:else if items.length === 0 && exhausted}
-	<p class="status">{t('photos.empty', 'No photos yet.')}</p>
+	<div class="empty-state">
+		<Icon name="images" class="empty-state__icon" />
+		<p class="empty-state__title">{t('photos.empty', 'No photos yet.')}</p>
+		<p class="empty-state__hint">
+			{t('photos.empty_hint', 'Photos and videos you upload will appear here, grouped by date.')}
+		</p>
+	</div>
 {:else}
-	<ul class="photos">
-		{#each items as photo (photo.id)}
-			<li class="photos__cell">
-				<a href={fileInlineUrl(photo.id)} target="_blank" rel="noreferrer">
-					<img src={fileThumbnailUrl(photo.id)} alt={photo.name} loading="lazy" decoding="async" />
-				</a>
-			</li>
-		{/each}
-	</ul>
+	{#each groups as group (group.key)}
+		<h2 class="photos-group">
+			{group.label} <span class="photos-group__count">{group.photos.length}</span>
+		</h2>
+		<ul class="photos">
+			{#each group.photos as photo (photo.id)}
+				<li class="photos__cell" class:selected={selected.has(photo.id)}>
+					<button class="photos__open" onclick={() => onTileClick(photo)}>
+						{#if videoThumbs[photo.id]}
+							<img src={videoThumbs[photo.id]} alt={photo.name} loading="lazy" decoding="async" />
+						{:else}
+							<img
+								src={previewUrl(photo.id)}
+								srcset={`${iconUrl(photo.id)} 150w, ${previewUrl(photo.id)} 400w, ${largeUrl(photo.id)} 800w`}
+								sizes="(max-width: 768px) 33vw, 200px"
+								alt={photo.name}
+								loading="lazy"
+								decoding="async"
+								onerror={isVideo(photo) ? () => generateVideoThumb(photo) : undefined}
+							/>
+						{/if}
+						{#if isVideo(photo)}
+							<span class="photos__video-badge" aria-hidden="true"><Icon name="play" /></span>
+						{/if}
+					</button>
+					<button
+						class="photos__check"
+						class:on={selected.has(photo.id)}
+						aria-label={t('common.select', 'Select')}
+						onclick={() => toggle(photo.id)}
+					>
+						<Icon name="check" />
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/each}
 {/if}
 
 <div bind:this={sentinel} class="sentinel" aria-hidden="true"></div>
 {#if loading}<p class="status">{t('common.loading', 'Loading…')}</p>{/if}
 
+{#if lbItem}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class="lb"
+		role="dialog"
+		aria-modal="true"
+		aria-label={lbItem.name}
+		tabindex="-1"
+		onclick={(e) => e.target === e.currentTarget && (lightbox = -1)}
+	>
+		<div class="lb__info">
+			<div class="lb__filename">{lbItem.name}</div>
+			<div class="lb__meta">{lbMeta}</div>
+		</div>
+
+		<button
+			class="lb__close"
+			aria-label={t('common.close', 'Close')}
+			onclick={() => (lightbox = -1)}>×</button
+		>
+
+		<button
+			class="lb__nav lb__nav--prev"
+			aria-label={t('common.previous', 'Previous')}
+			disabled={lightbox === 0}
+			onclick={(e) => {
+				e.stopPropagation();
+				lbPrev();
+			}}><Icon name="chevron-left" /></button
+		>
+
+		<div class="lb__content">
+			{#if isVideo(lbItem)}
+				{#key lbItem.id}
+					<video class="lb__media" controls autoplay poster={largeUrl(lbItem.id)}>
+						<source src={fileInlineUrl(lbItem.id)} type={lbItem.mime_type} />
+					</video>
+				{/key}
+			{:else}
+				<img
+					class="lb__media"
+					src={lbImgSrc}
+					alt={lbItem.name}
+					onload={onLbImgLoad}
+					onerror={onLbImgError}
+				/>
+			{/if}
+		</div>
+
+		<button
+			class="lb__nav lb__nav--next"
+			aria-label={t('common.next', 'Next')}
+			disabled={lightbox === items.length - 1}
+			onclick={(e) => {
+				e.stopPropagation();
+				lbNext();
+			}}><Icon name="chevron-right" /></button
+		>
+
+		<div class="lb__toolbar">
+			{#if !isVideo(lbItem) && lbItem.mime_type !== 'image/gif' && !lbShowingOriginal}
+				<button
+					class="lb__tool"
+					title={t('photos.full_resolution', 'Full resolution')}
+					disabled={lbFullResBusy}
+					onclick={expandFullRes}><Icon name={lbFullResBusy ? 'spinner' : 'expand'} /></button
+				>
+			{/if}
+			<button class="lb__tool" title={t('common.download', 'Download')} onclick={lbDownload}
+				><Icon name="download" /></button
+			>
+			<button
+				class="lb__tool"
+				class:active={lbFavorited}
+				title={t('common.favorite', 'Favorite')}
+				onclick={lbToggleFavorite}><Icon name={lbFavorited ? 'star' : 'star-outline'} /></button
+			>
+			<button class="lb__tool" title={t('common.delete', 'Delete')} onclick={lbDelete}
+				><Icon name="trash" /></button
+			>
+		</div>
+
+		<div class="lb__counter">{lightbox + 1} / {items.length}</div>
+	</div>
+{/if}
+
 <style>
+	.photos-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-3);
+		padding: 1rem 1rem 0;
+	}
+
 	.page-title {
 		margin: 0;
-		padding: 1rem 1rem 0;
 		font-size: 1.5rem;
 		color: var(--color-text-heading);
 	}
 
+	.seg {
+		display: flex;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		overflow: hidden;
+	}
+
+	.seg__btn {
+		padding: var(--space-2) var(--space-3);
+		border: none;
+		background: var(--color-bg-surface);
+		color: var(--color-text-muted);
+		cursor: pointer;
+		text-transform: capitalize;
+	}
+
+	.seg__btn.active {
+		background: var(--color-accent);
+		color: var(--color-on-accent);
+	}
+
+	.batch-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-3);
+		margin: var(--space-3) 1rem 0;
+		padding: var(--space-2) var(--space-3);
+		background: var(--color-accent-tint, var(--color-bg-hover));
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+	}
+
+	.batch-bar__actions {
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	.photos-group {
+		margin: var(--space-4) 0 var(--space-2);
+		padding: 0 1rem;
+		font-size: 1rem;
+		color: var(--color-text-heading);
+	}
+
+	.photos-group__count {
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-normal);
+	}
+
 	.photos {
 		list-style: none;
 		margin: 0;
-		padding: 1rem;
+		padding: 0 1rem;
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
 		gap: 0.25rem;
 	}
 
 	.photos__cell {
+		position: relative;
 		aspect-ratio: 1;
 		overflow: hidden;
 		border-radius: var(--radius-sm);
 		background: var(--color-bg-muted);
 	}
 
-	.photos__cell img {
+	.photos__cell.selected {
+		outline: 3px solid var(--color-accent);
+		outline-offset: -3px;
+	}
+
+	.photos__open {
+		display: block;
+		width: 100%;
+		height: 100%;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		background: none;
+	}
+
+	.photos__open img {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
 		display: block;
 	}
 
+	.photos__video-badge {
+		position: absolute;
+		right: 6px;
+		bottom: 6px;
+		width: 26px;
+		height: 26px;
+		border-radius: 50%;
+		background: var(--color-scrim-control);
+		color: var(--color-on-accent);
+		display: grid;
+		place-items: center;
+		font-size: 0.7rem;
+		pointer-events: none;
+	}
+
+	.photos__check {
+		position: absolute;
+		top: 6px;
+		left: 6px;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		border: 2px solid var(--color-on-accent);
+		background: var(--color-scrim-control);
+		color: transparent;
+		display: grid;
+		place-items: center;
+		cursor: pointer;
+		opacity: 0;
+		transition: opacity 0.15s;
+	}
+
+	.photos__cell:hover .photos__check,
+	.photos__check.on {
+		opacity: 1;
+	}
+
+	.photos__check.on {
+		background: var(--color-accent);
+		color: var(--color-on-accent);
+		border-color: var(--color-accent);
+	}
+
 	.status {
 		text-align: center;
 		color: var(--color-text-muted);
@@ -107,7 +730,153 @@
 		color: var(--color-danger-text);
 	}
 
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-2);
+		text-align: center;
+		padding: 4rem 1rem;
+		color: var(--color-text-muted);
+	}
+
+	.empty-state :global(.empty-state__icon) {
+		font-size: 3rem;
+		color: var(--color-text-muted);
+	}
+
+	.empty-state__title {
+		margin: 0;
+		font-size: 1.1rem;
+		color: var(--color-text-heading);
+	}
+
+	.empty-state__hint {
+		margin: 0;
+		max-width: 28rem;
+	}
+
 	.sentinel {
 		height: 1px;
 	}
+
+	.lb {
+		position: fixed;
+		inset: 0;
+		z-index: 1000;
+		background: var(--color-lightbox-overlay);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.lb__content {
+		max-width: 92vw;
+		max-height: 88vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.lb__media {
+		max-width: 92vw;
+		max-height: 88vh;
+		object-fit: contain;
+	}
+
+	.lb__info {
+		position: absolute;
+		top: 1rem;
+		left: 1rem;
+		color: var(--color-on-accent);
+		max-width: 60vw;
+	}
+
+	.lb__filename {
+		font-weight: var(--weight-medium);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.lb__meta {
+		font-size: var(--text-sm);
+		opacity: 0.8;
+	}
+
+	.lb__close {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		font-size: 2rem;
+		line-height: 1;
+		background: none;
+		border: none;
+		color: var(--color-on-accent);
+		cursor: pointer;
+	}
+
+	.lb__nav {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 2rem;
+		background: none;
+		border: none;
+		color: var(--color-on-accent);
+		cursor: pointer;
+		padding: 1rem;
+	}
+
+	.lb__nav:disabled {
+		opacity: 0.3;
+		cursor: default;
+	}
+
+	.lb__nav--prev {
+		left: 0.5rem;
+	}
+
+	.lb__nav--next {
+		right: 0.5rem;
+	}
+
+	.lb__toolbar {
+		position: absolute;
+		bottom: 1rem;
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	.lb__tool {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		border: none;
+		background: var(--color-scrim-control);
+		color: var(--color-on-accent);
+		cursor: pointer;
+		display: grid;
+		place-items: center;
+	}
+
+	.lb__tool:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.lb__tool.active {
+		color: var(--color-accent);
+	}
+
+	.lb__counter {
+		position: absolute;
+		bottom: 1rem;
+		right: 1rem;
+		color: var(--color-on-accent);
+		font-size: var(--text-sm);
+		opacity: 0.8;
+	}
 </style>
diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index 64d77e65..bdbd77e1 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -1,9 +1,25 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { changePassword, updateProfile } from '$lib/api/endpoints/profile';
+	import {
+		changePassword,
+		createAppPassword,
+		isAutoAppPassword,
+		listAppPasswords,
+		revokeAppPassword,
+		updateAvatar,
+		updateProfile,
+		type AppPassword,
+		type ProfilePatch
+	} from '$lib/api/endpoints/profile';
+	import { getOidcProviders } from '$lib/api/endpoints/auth';
 	import { SUPPORTED_LOCALES, setLocale, t, type Locale } from '$lib/i18n/index.svelte';
+	import Icon from '$lib/icons/Icon.svelte';
+	import { confirmDialog } from '$lib/stores/dialogs.svelte';
 	import { session } from '$lib/stores/session.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
+	import { formatBytes } from '$lib/utils/format';
+	import { formatDate } from '$lib/utils/display';
+	import { resizeImageToDataUrl } from '$lib/utils/imageResize';
 
 	let givenName = $state('');
 	let familyName = $state('');
@@ -18,6 +34,71 @@
 	let savingProfile = $state(false);
 	let savingPassword = $state(false);
 
+	let avatarBusy = $state(false);
+	let passwordLoginEnabled = $state(true);
+
+	// Avatar edit panel.
+	let avatarEditOpen = $state(false);
+	let avatarTab = $state<'url' | 'upload'>('url');
+	let avatarUrl = $state('');
+	let avatarPreview = $state<string | null>(null);
+	let uploadedDataUrl = $state<string | null>(null);
+	let avatarImgFailed = $state(false);
+
+	let appPasswords = $state<AppPassword[]>([]);
+	let appPwLoadFailed = $state(false);
+	let generated = $state<{ label: string; password: string } | null>(null);
+	let newLabel = $state('');
+	let creatingPw = $state(false);
+	let autoExpanded = $state(false);
+
+	const isOidc = $derived(!!session.user?.auth_provider && session.user.auth_provider !== 'local');
+	const isLocal = $derived(!isOidc);
+	const usernameClaimed = $derived(!!session.user?.username);
+	const isAdmin = $derived(session.user?.role === 'admin');
+	const canEditImage = $derived(session.user?.can_edit_image === true && isLocal);
+	const showPasswordCard = $derived(isLocal && passwordLoginEnabled);
+
+	const storagePct = $derived(
+		session.user && session.user.storage_quota_bytes > 0
+			? Math.min(
+					100,
+					Math.round((session.user.storage_used_bytes / session.user.storage_quota_bytes) * 100)
+				)
+			: 0
+	);
+	const storageBarClass = $derived(
+		storagePct > 90 ? 'bar__fill--red' : storagePct > 70 ? 'bar__fill--orange' : 'bar__fill--green'
+	);
+	const initials = $derived(
+		(session.user?.username || session.user?.email || '?').slice(0, 2).toUpperCase()
+	);
+
+	const userPasswords = $derived(appPasswords.filter((p) => !isAutoAppPassword(p)));
+	const autoPasswords = $derived(appPasswords.filter((p) => isAutoAppPassword(p)));
+
+	/** Relative time (e.g. "3 days ago"); "Never" when absent. */
+	function timeAgo(value: string | null | undefined): string {
+		if (!value) return t('profile.never', 'Never');
+		const date = new Date(value);
+		if (Number.isNaN(date.getTime())) return String(value);
+		const diffSec = Math.round((date.getTime() - Date.now()) / 1000);
+		const abs = Math.abs(diffSec);
+		const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+		const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+			['year', 31536000],
+			['month', 2592000],
+			['week', 604800],
+			['day', 86400],
+			['hour', 3600],
+			['minute', 60]
+		];
+		for (const [unit, secs] of units) {
+			if (abs >= secs) return rtf.format(Math.round(diffSec / secs), unit);
+		}
+		return rtf.format(diffSec, 'second');
+	}
+
 	function hydrate() {
 		const u = session.user;
 		if (!u) return;
@@ -30,17 +111,32 @@
 
 	async function saveProfile(e: SubmitEvent) {
 		e.preventDefault();
+		const u = session.user;
+		if (!u) return;
+
+		// Build a sparse patch of only the fields the user actually changed.
+		// Sending empty strings the user never touched would 400 on the server.
+		const patch: ProfilePatch = {};
+		if (!usernameClaimed && username.trim() && username.trim() !== (u.username ?? '')) {
+			patch.username = username.trim();
+		}
+		if (givenName.trim() !== (u.given_name ?? '')) patch.given_name = givenName.trim();
+		if (familyName.trim() !== (u.family_name ?? '')) patch.family_name = familyName.trim();
+		if ((preferredLocale || '') !== (u.preferred_locale ?? '')) {
+			patch.preferred_locale = preferredLocale || undefined;
+		}
+		if (notifyOnShare !== u.notify_on_share) patch.notify_on_share = notifyOnShare;
+
+		if (Object.keys(patch).length === 0) {
+			ui.notify(t('profile.profile_no_changes', 'No changes to save.'), 'info');
+			return;
+		}
+
 		savingProfile = true;
 		try {
-			const updated = await updateProfile({
-				given_name: givenName,
-				family_name: familyName,
-				username: username || undefined,
-				preferred_locale: preferredLocale || undefined,
-				notify_on_share: notifyOnShare
-			});
+			const updated = await updateProfile(patch);
 			session.user = updated;
-			if (preferredLocale) await setLocale(preferredLocale as Locale);
+			if (patch.preferred_locale) await setLocale(patch.preferred_locale as Locale);
 			ui.notify(t('profile.saved', 'Profile saved'), 'success');
 		} catch (err) {
 			ui.notify(err instanceof Error ? err.message : String(err), 'error');
@@ -55,6 +151,13 @@
 			ui.notify(t('profile.password_mismatch', 'Passwords do not match'), 'error');
 			return;
 		}
+		if (newPw.length < 8) {
+			ui.notify(
+				t('profile.password_too_short', 'Password must be at least 8 characters.'),
+				'error'
+			);
+			return;
+		}
 		savingPassword = true;
 		try {
 			await changePassword(currentPw, newPw);
@@ -67,9 +170,132 @@
 		}
 	}
 
+	// ── Avatar edit panel ──────────────────────────────────────────────────
+	function openAvatarEdit() {
+		avatarEditOpen = true;
+		avatarTab = 'url';
+		avatarUrl = '';
+		avatarPreview = null;
+		uploadedDataUrl = null;
+	}
+
+	function closeAvatarEdit() {
+		avatarEditOpen = false;
+		uploadedDataUrl = null;
+		avatarPreview = null;
+	}
+
+	async function onAvatarFile(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+		try {
+			const dataUrl = await resizeImageToDataUrl(file);
+			uploadedDataUrl = dataUrl;
+			avatarPreview = dataUrl;
+		} catch (err) {
+			uploadedDataUrl = null;
+			avatarPreview = null;
+			ui.notify(err instanceof Error ? err.message : String(err), 'error');
+		} finally {
+			input.value = '';
+		}
+	}
+
+	async function commitAvatar(image: string | null) {
+		avatarBusy = true;
+		try {
+			await updateAvatar(image);
+			if (session.user) session.user = { ...session.user, image };
+			avatarImgFailed = false;
+			closeAvatarEdit();
+		} catch (err) {
+			ui.notify(err instanceof Error ? err.message : String(err), 'error');
+		} finally {
+			avatarBusy = false;
+		}
+	}
+
+	async function saveAvatar() {
+		if (avatarTab === 'url') {
+			await commitAvatar(avatarUrl.trim() || null);
+		} else {
+			if (!uploadedDataUrl) {
+				ui.notify(t('profile.photo_no_file', 'Choose a photo first.'), 'error');
+				return;
+			}
+			await commitAvatar(uploadedDataUrl);
+		}
+	}
+
+	// ── App passwords ──────────────────────────────────────────────────────
+	async function loadAppPasswords() {
+		try {
+			appPasswords = await listAppPasswords();
+			appPwLoadFailed = false;
+		} catch {
+			appPwLoadFailed = true;
+		}
+	}
+
+	async function createPw() {
+		const label = newLabel.trim();
+		if (!label) {
+			ui.notify(t('profile.error_label_required', 'Enter a label.'), 'error');
+			return;
+		}
+		creatingPw = true;
+		try {
+			const password = await createAppPassword(label);
+			generated = { label, password };
+			newLabel = '';
+			await loadAppPasswords();
+		} catch (err) {
+			ui.notify(err instanceof Error ? err.message : String(err), 'error');
+		} finally {
+			creatingPw = false;
+		}
+	}
+
+	async function revokePw(p: AppPassword) {
+		const ok = await confirmDialog({
+			title: t('profile.app_pw_revoke', 'Revoke app password'),
+			message: t('profile.confirm_revoke', { label: p.label }, 'Revoke "{{label}}"?'),
+			confirmText: t('profile.app_pw_revoke', 'Revoke'),
+			danger: true
+		});
+		if (!ok) return;
+		try {
+			await revokeAppPassword(p.id);
+			generated = null;
+			await loadAppPasswords();
+		} catch (err) {
+			ui.notify(err instanceof Error ? err.message : String(err), 'error');
+		}
+	}
+
+	async function copyGenerated() {
+		if (!generated) return;
+		try {
+			await navigator.clipboard.writeText(generated.password);
+			ui.notify(t('profile.copied', 'Copied'), 'success');
+		} catch {
+			ui.notify(t('profile.copy_failed', 'Could not copy'), 'error');
+		}
+	}
+
 	onMount(async () => {
 		if (!session.loaded) await session.load();
 		hydrate();
+		void loadAppPasswords();
+		try {
+			const providers = await getOidcProviders();
+			// Only an explicit `false` hides the password card; an absent flag
+			// (no OIDC configured) leaves local password login available.
+			if (providers.password_login_enabled === false) passwordLoginEnabled = false;
+		} catch {
+			/* leave password login enabled */
+		}
 	});
 </script>
 
@@ -79,57 +305,390 @@
 	<h1>{t('nav.profile', 'Profile')}</h1>
 
 	{#if session.user}
-		<p class="profile__email">{session.user.email}</p>
+		<!-- Avatar / identity -->
+		<div class="card avatar-card">
+			<div class="avatar-section">
+				{#if session.user.image && !avatarImgFailed}
+					<img
+						class="avatar-lg"
+						src={session.user.image}
+						alt={initials}
+						onerror={() => (avatarImgFailed = true)}
+					/>
+				{:else}
+					<span class="avatar-lg avatar-lg--initials">{initials}</span>
+				{/if}
+				<div class="avatar-info">
+					<h2>{session.user.username || session.user.email || '—'}</h2>
+					<div class="muted">{session.user.email}</div>
+					<span class="role-badge" class:role-badge--admin={isAdmin}>
+						<Icon name={isAdmin ? 'shield-alt' : 'user'} />
+						{isAdmin ? t('profile.role_admin', 'Administrator') : t('profile.role_user', 'User')}
+					</span>
+					{#if isOidc && session.user.image}
+						<p class="muted">
+							{t('profile.photo_managed_by_oidc', 'Photo managed by your identity provider.')}
+						</p>
+					{/if}
+				</div>
+				{#if canEditImage}
+					<button
+						class="btn btn-secondary avatar-edit-btn"
+						title={t('profile.edit_photo', 'Edit photo')}
+						onclick={openAvatarEdit}
+					>
+						<Icon name="pencil-alt" />
+					</button>
+				{/if}
+			</div>
 
-		<form class="card" onsubmit={saveProfile}>
-			<h2>{t('profile.details', 'Profile details')}</h2>
+			{#if canEditImage && avatarEditOpen}
+				<div class="avatar-edit">
+					<div class="avatar-tabs">
+						<button
+							class="avatar-tab"
+							class:avatar-tab--active={avatarTab === 'url'}
+							onclick={() => (avatarTab = 'url')}
+						>
+							{t('profile.photo_tab_url', 'URL')}
+						</button>
+						<button
+							class="avatar-tab"
+							class:avatar-tab--active={avatarTab === 'upload'}
+							onclick={() => (avatarTab = 'upload')}
+						>
+							{t('profile.photo_tab_upload', 'Upload')}
+						</button>
+					</div>
 
-			<label>
-				<span>{t('profile.username', 'Username')}</span>
-				<input bind:value={username} autocomplete="username" />
-			</label>
-			<label>
-				<span>{t('profile.given_name', 'Given name')}</span>
-				<input bind:value={givenName} autocomplete="given-name" />
-			</label>
-			<label>
-				<span>{t('profile.family_name', 'Family name')}</span>
-				<input bind:value={familyName} autocomplete="family-name" />
-			</label>
-			<label>
-				<span>{t('profile.language', 'Language')}</span>
-				<select bind:value={preferredLocale}>
-					<option value="">{t('profile.language_auto', 'Automatic')}</option>
-					{#each SUPPORTED_LOCALES as loc (loc)}
-						<option value={loc}>{loc}</option>
-					{/each}
-				</select>
-			</label>
-			<label class="checkbox">
-				<input type="checkbox" bind:checked={notifyOnShare} />
-				<span>{t('profile.notify_on_share', 'Email me when something is shared with me')}</span>
-			</label>
+					{#if avatarTab === 'url'}
+						<input type="url" bind:value={avatarUrl} placeholder="https://example.com/photo.jpg" />
+						<small class="muted">
+							{t('profile.photo_url_hint', 'https://, http://, or data:image/…;base64,… accepted')}
+						</small>
+					{:else}
+						<label class="avatar-file-label btn btn-secondary">
+							<Icon name="user-plus" />
+							<span>{t('profile.photo_choose_file', 'Choose a photo (PNG, JPEG, WebP)')}</span>
+							<input
+								type="file"
+								accept="image/png,image/jpeg,image/webp"
+								hidden
+								onchange={onAvatarFile}
+							/>
+						</label>
+						{#if avatarPreview}
+							<img class="avatar-preview" src={avatarPreview} alt={t('profile.avatar', 'Avatar')} />
+						{/if}
+						<small class="muted">
+							{t(
+								'profile.photo_resize_note',
+								'Images larger than 512 × 512 px are automatically resized.'
+							)}
+						</small>
+					{/if}
 
-			<button type="submit" disabled={savingProfile}>{t('common.save', 'Save')}</button>
-		</form>
+					<div class="avatar-edit-actions">
+						<button class="btn btn-primary" disabled={avatarBusy} onclick={saveAvatar}>
+							{t('profile.photo_save', 'Save')}
+						</button>
+						{#if session.user.image}
+							<button
+								class="btn link-btn link-btn--danger"
+								disabled={avatarBusy}
+								onclick={() => commitAvatar(null)}
+							>
+								{t('profile.photo_remove', 'Remove photo')}
+							</button>
+						{/if}
+						<button class="btn btn-secondary" disabled={avatarBusy} onclick={closeAvatarEdit}>
+							{t('common.cancel', 'Cancel')}
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
 
-		{#if session.user.can_edit_image !== false && session.user.auth_provider === 'local'}
+		<!-- Account details -->
+		<div class="card">
+			<h2><Icon name="id-card" /> {t('profile.account_details', 'Account Details')}</h2>
+			<div class="info-grid">
+				<div class="info-item">
+					<div class="info-label"><Icon name="user" /> {t('profile.username', 'Username')}</div>
+					<div class="info-value">{session.user.username || '—'}</div>
+				</div>
+				<div class="info-item">
+					<div class="info-label"><Icon name="envelope" /> {t('profile.email', 'Email')}</div>
+					<div class="info-value">{session.user.email}</div>
+				</div>
+				<div class="info-item">
+					<div class="info-label"><Icon name="shield-alt" /> {t('profile.role', 'Role')}</div>
+					<div class="info-value">
+						{isAdmin ? t('profile.role_admin', 'Administrator') : t('profile.role_user', 'User')}
+					</div>
+				</div>
+				<div class="info-item">
+					<div class="info-label">
+						<Icon name="clock" />
+						{t('profile.last_login', 'Last Login')}
+					</div>
+					<div class="info-value">{timeAgo(session.user.last_login_at)}</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Storage -->
+		<div class="card">
+			<h2><Icon name="hdd" /> {t('profile.storage', 'Storage')}</h2>
+			<div class="storage-stats">
+				<div class="storage-stat">
+					<div class="stat-value">{formatBytes(session.user.storage_used_bytes)}</div>
+					<div class="muted">{t('profile.used', 'Used')}</div>
+				</div>
+				<div class="storage-stat">
+					<div class="stat-value">
+						{session.user.storage_quota_bytes > 0
+							? formatBytes(session.user.storage_quota_bytes)
+							: '∞'}
+					</div>
+					<div class="muted">{t('profile.quota', 'Quota')}</div>
+				</div>
+				<div class="storage-stat">
+					<div class="stat-value">
+						{session.user.storage_quota_bytes > 0 ? `${storagePct}%` : '—'}
+					</div>
+					<div class="muted">{t('profile.usage', 'Usage')}</div>
+				</div>
+			</div>
+			<div class="bar">
+				<div class={`bar__fill ${storageBarClass}`} style:width="{storagePct}%"></div>
+			</div>
+		</div>
+
+		<!-- Edit profile (hidden for OIDC users) -->
+		<div class="card">
+			<h2><Icon name="id-badge" /> {t('profile.edit_profile', 'Edit Profile')}</h2>
+			{#if isOidc}
+				<div class="alert alert--info">
+					<Icon name="info-circle" />
+					<span>
+						{t(
+							'profile.edit_oidc_managed',
+							'To change your information (name, profile picture, …), please update it at your identity provider. Your changes will appear on your next sign-in.'
+						)}
+					</span>
+				</div>
+			{:else}
+				<form onsubmit={saveProfile}>
+					<label>
+						<span>{t('profile.username', 'Username')}</span>
+						<input
+							bind:value={username}
+							maxlength="64"
+							autocomplete="username"
+							disabled={usernameClaimed}
+						/>
+						<small class="muted">
+							{usernameClaimed
+								? t('profile.username_already_claimed', "Username can't be changed once set.")
+								: t(
+										'profile.username_claim_hint',
+										"2–64 characters. Once chosen, the username can't be changed."
+									)}
+						</small>
+					</label>
+					<label>
+						<span>{t('profile.given_name', 'First name')}</span>
+						<input bind:value={givenName} maxlength="128" autocomplete="given-name" />
+					</label>
+					<label>
+						<span>{t('profile.family_name', 'Last name')}</span>
+						<input bind:value={familyName} maxlength="128" autocomplete="family-name" />
+					</label>
+					<label>
+						<span>{t('profile.language', 'Language')}</span>
+						<select bind:value={preferredLocale}>
+							<option value="">{t('profile.language_auto', 'Automatic')}</option>
+							{#each SUPPORTED_LOCALES as loc (loc)}
+								<option value={loc}>{loc}</option>
+							{/each}
+						</select>
+					</label>
+					<label class="checkbox">
+						<input type="checkbox" bind:checked={notifyOnShare} />
+						<span>{t('profile.notify_on_share', 'Email me when someone shares with me')}</span>
+					</label>
+					<button type="submit" disabled={savingProfile}
+						>{t('profile.save_profile', 'Save changes')}</button
+					>
+				</form>
+			{/if}
+		</div>
+
+		<!-- App passwords -->
+		{#if !appPwLoadFailed}
+			<div class="card">
+				<h2><Icon name="key" /> {t('profile.app_passwords', 'App Passwords')}</h2>
+				<p class="muted">
+					{t(
+						'profile.app_pw_desc',
+						'Generate passwords for WebDAV, CalDAV, and CardDAV clients. Each password is shown only once.'
+					)}
+				</p>
+
+				<div class="app-pw-create">
+					<input
+						bind:value={newLabel}
+						maxlength="128"
+						placeholder={t('profile.app_pw_label_placeholder', 'Label (e.g. Thunderbird, macOS)')}
+					/>
+					<button class="btn btn-primary" disabled={creatingPw} onclick={createPw}>
+						<Icon name="user-plus" />
+						{t('profile.generate', 'Generate')}
+					</button>
+				</div>
+
+				{#if generated}
+					<div class="generated">
+						<div>
+							{t('profile.new_password_for', 'New password for')}
+							<strong>{generated.label}</strong>:
+						</div>
+						<div class="generated__value">
+							<code>{generated.password}</code>
+							<button
+								class="btn-action"
+								title={t('profile.copy_to_clipboard', 'Copy to clipboard')}
+								onclick={copyGenerated}
+							>
+								<Icon name="copy" />
+							</button>
+						</div>
+						<small class="muted">
+							{t(
+								'profile.copy_warning',
+								"Copy this password now. You won't be able to see it again."
+							)}
+						</small>
+					</div>
+				{/if}
+
+				{#if userPasswords.length === 0}
+					<p class="muted">{t('profile.no_app_passwords', 'No app passwords yet.')}</p>
+				{:else}
+					<table class="pw-table">
+						<thead>
+							<tr>
+								<th>{t('profile.col_label', 'Label')}</th>
+								<th>{t('profile.col_created', 'Created')}</th>
+								<th>{t('profile.col_last_used', 'Last Used')}</th>
+								<th>{t('profile.col_status', 'Status')}</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each userPasswords as p (p.id)}
+								<tr>
+									<td>{p.label}</td>
+									<td>{formatDate(p.created_at)}</td>
+									<td>{p.last_used_at ? timeAgo(p.last_used_at) : t('profile.never', 'Never')}</td>
+									<td>
+										{#if p.active !== false}
+											<span class="badge badge--active">{t('profile.active', 'Active')}</span>
+										{:else}
+											<span class="badge badge--revoked">{t('profile.revoked', 'Revoked')}</span>
+										{/if}
+									</td>
+									<td>
+										{#if p.active !== false}
+											<button
+												class="btn-action btn-action--danger"
+												title={t('profile.revoke_title', 'Revoke')}
+												onclick={() => revokePw(p)}
+											>
+												<Icon name="trash-alt" />
+											</button>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				{/if}
+
+				{#if autoPasswords.length > 0}
+					<div class="app-pw-auto">
+						<button class="app-pw-auto__toggle" onclick={() => (autoExpanded = !autoExpanded)}>
+							<Icon name={autoExpanded ? 'chevron-down' : 'chevron-right'} />
+							<span>{t('profile.client_sessions', 'Client sessions')}</span>
+							<span class="badge badge--count">{autoPasswords.length}</span>
+						</button>
+						{#if autoExpanded}
+							<p class="muted">
+								{t(
+									'profile.client_sessions_desc',
+									'Auto-generated when you connect a Nextcloud-compatible client.'
+								)}
+							</p>
+							<table class="pw-table">
+								<thead>
+									<tr>
+										<th>{t('profile.col_client', 'Client')}</th>
+										<th>{t('profile.col_created', 'Created')}</th>
+										<th>{t('profile.col_last_used', 'Last Used')}</th>
+										<th></th>
+									</tr>
+								</thead>
+								<tbody>
+									{#each autoPasswords as p (p.id)}
+										<tr>
+											<td>{p.label}</td>
+											<td>{formatDate(p.created_at)}</td>
+											<td
+												>{p.last_used_at
+													? timeAgo(p.last_used_at)
+													: t('profile.never', 'Never')}</td
+											>
+											<td>
+												{#if p.active !== false}
+													<button
+														class="btn-action btn-action--danger"
+														title={t('profile.revoke_title', 'Revoke')}
+														onclick={() => revokePw(p)}
+													>
+														<Icon name="trash-alt" />
+													</button>
+												{/if}
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Change password -->
+		{#if showPasswordCard}
 			<form class="card" onsubmit={savePassword}>
-				<h2>{t('profile.change_password', 'Change password')}</h2>
+				<h2><Icon name="key" /> {t('profile.change_password', 'Change Password')}</h2>
 				<label>
-					<span>{t('profile.current_password', 'Current password')}</span>
+					<span>{t('profile.current_password', 'Current Password')}</span>
 					<input type="password" bind:value={currentPw} autocomplete="current-password" />
 				</label>
 				<label>
-					<span>{t('profile.new_password', 'New password')}</span>
-					<input type="password" bind:value={newPw} autocomplete="new-password" />
+					<span>{t('profile.new_password', 'New Password')}</span>
+					<input type="password" bind:value={newPw} minlength="8" autocomplete="new-password" />
+					<small class="muted">{t('profile.min_8_chars', 'At least 8 characters')}</small>
 				</label>
 				<label>
-					<span>{t('profile.confirm_password', 'Confirm new password')}</span>
-					<input type="password" bind:value={confirmPw} autocomplete="new-password" />
+					<span>{t('profile.confirm_password', 'Confirm New Password')}</span>
+					<input type="password" bind:value={confirmPw} minlength="8" autocomplete="new-password" />
 				</label>
 				<button type="submit" disabled={savingPassword}>
-					{t('profile.update_password', 'Update password')}
+					{t('profile.update_password', 'Update Password')}
 				</button>
 			</form>
 		{/if}
@@ -140,7 +699,7 @@
 
 <style>
 	.profile {
-		max-width: 36rem;
+		max-width: 40rem;
 		margin: 0 auto;
 		padding: 1.5rem 1rem;
 		display: flex;
@@ -148,11 +707,6 @@
 		gap: 1.5rem;
 	}
 
-	.profile__email {
-		margin: -1rem 0 0;
-		color: var(--color-text-muted);
-	}
-
 	.card {
 		display: flex;
 		flex-direction: column;
@@ -166,6 +720,301 @@
 	.card h2 {
 		margin: 0 0 0.25rem;
 		font-size: 1.125rem;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.avatar-section {
+		display: flex;
+		align-items: center;
+		gap: 1.25rem;
+	}
+
+	.avatar-lg {
+		width: 72px;
+		height: 72px;
+		border-radius: 50%;
+		object-fit: cover;
+		flex: none;
+	}
+
+	.avatar-lg--initials {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--color-accent-gradient, var(--color-accent));
+		color: var(--color-on-accent);
+		font-size: 1.5rem;
+		font-weight: var(--weight-bold);
+	}
+
+	.avatar-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.avatar-info h2 {
+		margin: 0;
+		font-size: 1.25rem;
+	}
+
+	.avatar-edit-btn {
+		align-self: flex-start;
+		flex: none;
+	}
+
+	.role-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		align-self: flex-start;
+		padding: 0.1rem 0.55rem;
+		border-radius: var(--radius-full);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold, 600);
+		background: var(--color-bg-muted);
+		color: var(--color-text);
+	}
+
+	.role-badge--admin {
+		background: var(--color-warning-bg);
+		color: var(--color-warning-text);
+	}
+
+	.avatar-edit {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding-top: 1rem;
+		border-top: 1px solid var(--color-border);
+	}
+
+	.avatar-tabs {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.avatar-tab {
+		padding: 0.35rem 0.75rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-surface);
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+
+	.avatar-tab--active {
+		background: var(--color-bg-hover);
+		color: var(--color-text);
+	}
+
+	.avatar-file-label {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		align-self: flex-start;
+		cursor: pointer;
+	}
+
+	.avatar-preview {
+		width: 96px;
+		height: 96px;
+		border-radius: 50%;
+		object-fit: cover;
+	}
+
+	.avatar-edit-actions {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+
+	.info-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+	}
+
+	.info-item {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.info-label {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+	}
+
+	.info-value {
+		font-weight: var(--weight-medium, 500);
+		word-break: break-word;
+	}
+
+	.storage-stats {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 0.5rem;
+		text-align: center;
+	}
+
+	.storage-stat {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		padding: 0.75rem 0.5rem;
+		background: var(--color-bg-muted);
+		border-radius: var(--radius-md);
+	}
+
+	.stat-value {
+		font-size: 1.25rem;
+		font-weight: var(--weight-bold, 700);
+	}
+
+	.bar {
+		height: 8px;
+		background: var(--color-bg-muted);
+		border-radius: var(--radius-full);
+		overflow: hidden;
+	}
+
+	.bar__fill {
+		height: 100%;
+	}
+
+	.bar__fill--green {
+		background: var(--color-success-text, var(--color-accent));
+	}
+
+	.bar__fill--orange {
+		background: var(--color-warning-text);
+	}
+
+	.bar__fill--red {
+		background: var(--color-danger-text);
+	}
+
+	.muted {
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+		margin: 0;
+	}
+
+	.alert {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		border-radius: var(--radius-md);
+	}
+
+	.alert--info {
+		background: var(--color-info-bg);
+		color: var(--color-info-text);
+	}
+
+	.app-pw-create {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.app-pw-create input {
+		flex: 1;
+		min-width: 12rem;
+	}
+
+	.generated {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		padding: 0.75rem;
+		background: var(--color-bg-hover);
+		border-radius: var(--radius-md);
+	}
+
+	.generated__value {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.generated code {
+		font-family: var(--font-mono, monospace);
+	}
+
+	.pw-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: var(--text-sm);
+	}
+
+	.pw-table th,
+	.pw-table td {
+		text-align: left;
+		padding: 0.4rem 0.5rem;
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	.pw-table th {
+		color: var(--color-text-muted);
+		font-weight: var(--weight-semibold, 600);
+	}
+
+	.badge {
+		display: inline-block;
+		padding: 0.05rem 0.45rem;
+		border-radius: var(--radius-sm);
+		font-size: var(--text-xs, 0.7rem);
+		font-weight: var(--weight-semibold, 600);
+	}
+
+	.badge--active {
+		background: var(--color-success-bg, var(--color-bg-muted));
+		color: var(--color-success-text, var(--color-text));
+	}
+
+	.badge--revoked {
+		background: var(--color-bg-muted);
+		color: var(--color-text-muted);
+	}
+
+	.badge--count {
+		background: var(--color-bg-muted);
+		color: var(--color-text-muted);
+	}
+
+	.app-pw-auto {
+		padding-top: 0.5rem;
+		border-top: 1px solid var(--color-border);
+	}
+
+	.app-pw-auto__toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		background: none;
+		border: none;
+		color: var(--color-text);
+		cursor: pointer;
+		font-size: 1rem;
+		padding: 0.25rem 0;
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
 	}
 
 	label {
@@ -196,7 +1045,45 @@
 		width: auto;
 	}
 
-	button {
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.875rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-surface);
+		color: var(--color-text);
+		cursor: pointer;
+	}
+
+	.btn-secondary {
+		background: var(--color-bg-hover);
+	}
+
+	.btn-primary {
+		background: var(--color-primary);
+		color: var(--color-text-light);
+		border-color: transparent;
+	}
+
+	.btn-action {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.3rem;
+		border: none;
+		border-radius: var(--radius-md);
+		background: none;
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+
+	.btn-action--danger {
+		color: var(--color-danger-text);
+	}
+
+	button[type='submit'] {
 		align-self: flex-start;
 		padding: 0.5rem 1.25rem;
 		border: none;
@@ -206,7 +1093,21 @@
 		cursor: pointer;
 	}
 
-	button:disabled {
-		opacity: 0.6;
+	.link-btn {
+		background: none;
+		border: none;
+		color: var(--color-primary);
+		cursor: pointer;
+		font-size: 0.8125rem;
+	}
+
+	.link-btn--danger {
+		color: var(--color-danger-text);
+	}
+
+	@media (width <= 32rem) {
+		.info-grid {
+			grid-template-columns: 1fr;
+		}
 	}
 </style>
diff --git a/frontend/src/routes/recent/+page.svelte b/frontend/src/routes/recent/+page.svelte
index 2e442a56..9847f6e6 100644
--- a/frontend/src/routes/recent/+page.svelte
+++ b/frontend/src/routes/recent/+page.svelte
@@ -1,85 +1,381 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import FileRow from '$lib/components/FileRow.svelte';
-	import ResourceListShell from '$lib/components/ResourceListShell.svelte';
 	import { clearRecent, fetchRecentPage, type RecentResourceItem } from '$lib/api/endpoints/recent';
+	import {
+		addFavorite,
+		dateBucket,
+		fetchFavoritesPage,
+		removeFavorite,
+		resolveOwnerName,
+		sizeBucket,
+		typeLabel
+	} from '$lib/api/endpoints/favorites';
+	import { fileDownloadUrl, renameFile, deleteFile } from '$lib/api/endpoints/files';
+	import { renameFolder, deleteFolder } from '$lib/api/endpoints/folders';
+	import type { FileItem, ItemType } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import FileViewer from '$lib/components/FileViewer.svelte';
+	import MoveDialog from '$lib/components/MoveDialog.svelte';
+	import ShareDialog from '$lib/components/ShareDialog.svelte';
+	import ResourceList, {
+		type ContextAction,
+		type GroupByDef,
+		type ResourceEntry
+	} from '$lib/components/ResourceList.svelte';
+	import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
-	import { formatDate } from '$lib/utils/display';
 
-	let items = $state<RecentResourceItem[]>([]);
+	let raw = $state<RecentResourceItem[]>([]);
 	let cursor = $state<string | undefined>(undefined);
 	let loading = $state(false);
 	let error = $state<string | null>(null);
+	let groupBy = $state('');
+	let reversed = $state(false);
+	let ownerNames = $state<Record<string, string>>({});
+	let favoriteIds = $state<Set<string>>(new Set());
 
-	async function load(reset = false) {
+	const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
+
+	const entries = $derived(
+		raw.map((it): ResourceEntry => {
+			const isFile = it.resource_type === 'file';
+			const ownerId = it.resource.owner_id ?? null;
+			return {
+				id: it.resource.id,
+				name: it.resource.name,
+				kind: it.resource_type,
+				iconClass: it.resource.icon_class,
+				path: it.resource.path,
+				size: isFile ? (it.resource as FileItem).size : null,
+				date: it.accessed_at,
+				ownerId,
+				ownerName: ownerId ? (ownerNames[ownerId] ?? null) : null,
+				isFavorite: favoriteIds.has(it.resource.id),
+				category: isFile ? it.resource.category : 'Folder',
+				modifiedAt: it.resource.modified_at
+			};
+		})
+	);
+
+	const groupBys: GroupByDef[] = [
+		{ key: '', label: t('files.name', 'Name'), orderBy: 'name' },
+		{
+			key: 'owner',
+			label: t('groupby.owner', 'Owner'),
+			orderBy: 'owner',
+			bucketOf: (e) => e.ownerId ?? null,
+			labelOf: (id) => ownerNames[id] ?? id
+		},
+		{
+			key: 'type',
+			label: t('groupby.type', 'Type'),
+			orderBy: 'type',
+			bucketOf: (e) => e.category ?? 'other',
+			labelOf: (k) => typeLabel(k)
+		},
+		{
+			key: 'size',
+			label: t('groupby.size', 'Size'),
+			orderBy: 'size',
+			bucketOf: (e) => sizeBucket(e.kind === 'folder' ? null : e.size)
+		},
+		{
+			key: 'accessedAt',
+			label: t('groupby.accessedAt', 'Accessed date'),
+			orderBy: 'accessed_at',
+			bucketOf: (e) => dateBucket(e.date)
+		},
+		{
+			key: 'modifiedAt',
+			label: t('groupby.modifiedAt', 'Modified date'),
+			orderBy: 'modified_at',
+			bucketOf: (e) => dateBucket(e.modifiedAt)
+		}
+	];
+
+	async function resolveOwners(items: RecentResourceItem[]) {
+		const ids = [
+			...new Set(items.map((i) => i.resource.owner_id).filter((id): id is string => !!id))
+		];
+		await Promise.all(
+			ids.map(async (id) => {
+				if (ownerNames[id]) return;
+				const name = await resolveOwnerName(id);
+				ownerNames = { ...ownerNames, [id]: name };
+			})
+		);
+	}
+
+	async function loadFavoriteIds() {
+		try {
+			const favs = await fetchFavoritesPage({ resourceTypes: ['file', 'folder'] });
+			favoriteIds = new Set(favs.items.map((f) => f.resource.id));
+		} catch {
+			// non-fatal — stars just default to off
+		}
+	}
+
+	// Recent defaults to most-recently-accessed first (accessed_at DESC).
+	async function load(reset = false, orderBy = 'accessed_at', rev = reversed) {
 		loading = true;
 		error = null;
 		try {
-			const page = await fetchRecentPage({ cursor: reset ? undefined : cursor });
-			items = reset ? page.items : [...items, ...page.items];
+			const page = await fetchRecentPage({
+				cursor: reset ? undefined : cursor,
+				orderBy,
+				reverse: rev,
+				resourceTypes: ['file', 'folder']
+			});
+			raw = reset ? page.items : [...raw, ...page.items];
 			cursor = page.next_cursor;
+			void resolveOwners(page.items);
 		} catch (e) {
-			error = e instanceof Error ? e.message : String(e);
+			console.error('recent: load error', e);
+			error = t('errors_loadFailed', 'Failed to load items');
 		} finally {
 			loading = false;
 		}
 	}
 
+	function orderByForGroup(): string {
+		return groupBys.find((g) => g.key === groupBy)?.orderBy ?? 'accessed_at';
+	}
+
+	let viewerOpen = $state(false);
+	let viewerFile = $state<FileItem | null>(null);
+
+	function open(entry: ResourceEntry) {
+		if (entry.kind === 'folder') {
+			goto(`/files/${entry.id}`);
+			return;
+		}
+		const item = byId.get(entry.id);
+		if (item) {
+			viewerFile = item.resource as FileItem;
+			viewerOpen = true;
+		}
+	}
+
+	async function toggleFavorite(entry: ResourceEntry) {
+		const isFav = favoriteIds.has(entry.id);
+		const next = new Set(favoriteIds);
+		if (isFav) next.delete(entry.id);
+		else next.add(entry.id);
+		favoriteIds = next;
+		try {
+			if (isFav) await removeFavorite(entry.kind, entry.id);
+			else await addFavorite(entry.kind, entry.id);
+		} catch (e) {
+			// revert on failure
+			favoriteIds = isFav
+				? new Set([...favoriteIds, entry.id])
+				: new Set([...favoriteIds].filter((id) => id !== entry.id));
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
 	async function clearAll() {
+		const ok = await confirmDialog({
+			title: t('recent.clear', 'Clear recent'),
+			message: t('recent.confirm_clear', 'Clear your recent items?'),
+			confirmText: t('recent.clear', 'Clear recent')
+		});
+		if (!ok) return;
 		try {
 			await clearRecent();
-			items = [];
+			raw = [];
 			cursor = undefined;
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
 		}
 	}
 
-	onMount(() => load(true));
+	// ── Context-menu actions ──────────────────────────────────────────────────
+	let moveOpen = $state(false);
+	let moveTarget = $state<{ id: string; name: string; kind: ItemType } | null>(null);
+	let moveItems = $state<{ id: string; name: string; kind: ItemType }[] | null>(null);
+	let shareOpen = $state(false);
+	let shareTarget = $state<{ id: string; name: string; kind: ItemType } | null>(null);
+
+	async function rename(entry: ResourceEntry) {
+		const name = await promptDialog({
+			title: t('common.rename', 'Rename'),
+			defaultValue: entry.name,
+			confirmText: t('common.rename', 'Rename')
+		});
+		if (!name || name === entry.name) return;
+		try {
+			if (entry.kind === 'file') await renameFile(entry.id, name);
+			else await renameFolder(entry.id, name);
+			await load(true, orderByForGroup());
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function remove(entry: ResourceEntry) {
+		const ok = await confirmDialog({
+			title: t('common.delete', 'Delete'),
+			message: t('files.confirm_delete', { name: entry.name }, 'Delete "{{name}}"?'),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
+		try {
+			if (entry.kind === 'file') await deleteFile(entry.id);
+			else await deleteFolder(entry.id);
+			raw = raw.filter((i) => i.resource.id !== entry.id);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	function downloadEntry(entry: ResourceEntry) {
+		if (entry.kind !== 'file') return;
+		const a = document.createElement('a');
+		a.href = fileDownloadUrl(entry.id);
+		a.download = entry.name;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+	}
+
+	const contextActions: ContextAction[] = [
+		{
+			key: 'download',
+			label: t('common.download', 'Download'),
+			icon: 'download',
+			run: downloadEntry
+		},
+		{
+			key: 'share',
+			label: t('files.share', 'Share'),
+			icon: 'share-alt',
+			run: (e) => {
+				shareTarget = { id: e.id, name: e.name, kind: e.kind };
+				shareOpen = true;
+			}
+		},
+		{
+			key: 'move',
+			label: t('files.move', 'Move'),
+			icon: 'arrows-alt',
+			run: (e) => {
+				moveItems = null;
+				moveTarget = { id: e.id, name: e.name, kind: e.kind };
+				moveOpen = true;
+			}
+		},
+		{ key: 'rename', label: t('common.rename', 'Rename'), icon: 'pen', run: rename },
+		{ key: 'delete', label: t('common.delete', 'Delete'), icon: 'trash', danger: true, run: remove }
+	];
+
+	// ── Selection + batch ─────────────────────────────────────────────────────
+	let selectedIds = $state<Set<string>>(new Set());
+	const selectedEntries = $derived(entries.filter((e) => selectedIds.has(e.id)));
+
+	function batchTargets() {
+		return selectedEntries.map((e) => ({ id: e.id, name: e.name, kind: e.kind }));
+	}
+
+	function batchDownload() {
+		for (const e of selectedEntries) downloadEntry(e);
+	}
+
+	async function batchDelete() {
+		const ok = await confirmDialog({
+			title: t('common.delete', 'Delete'),
+			message: t(
+				'files.confirm_delete_n',
+				{ count: selectedEntries.length },
+				'Delete {{count}} item(s)?'
+			),
+			confirmText: t('common.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
+		try {
+			await Promise.all(
+				selectedEntries.map((e) => (e.kind === 'file' ? deleteFile(e.id) : deleteFolder(e.id)))
+			);
+			const removed = new Set(selectedEntries.map((e) => e.id));
+			raw = raw.filter((i) => !removed.has(i.resource.id));
+			selectedIds = new Set();
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	onMount(() => {
+		void loadFavoriteIds();
+		void load(true);
+	});
 </script>
 
 <svelte:head><title>{t('nav.recent', 'Recent')} · OxiCloud</title></svelte:head>
 
-<h1 class="page-title">{t('nav.recent', 'Recent')}</h1>
-
-<ResourceListShell
+<ResourceList
+	title={t('nav.recent', 'Recent')}
+	items={entries}
 	{loading}
 	{error}
-	empty={items.length === 0}
-	emptyText={t('recent.empty', 'No recent items.')}
+	emptyIcon="clock"
+	emptyText={t('recent.empty_state', 'No recent files')}
+	emptyHint={t('recent.empty_hint', 'Files you open will appear here')}
 	hasMore={!!cursor}
-	onloadmore={() => load(false)}
+	onloadmore={() => load(false, orderByForGroup())}
+	onopen={open}
+	onfavorite={toggleFavorite}
+	showOwner
+	selectable
+	{contextActions}
+	{groupBys}
+	bind:groupBy
+	bind:reversed
+	onreload={(orderBy, rev) => {
+		cursor = undefined;
+		load(true, orderBy, rev);
+	}}
+	onselectionchange={(ids) => (selectedIds = ids)}
 >
 	{#snippet toolbar()}
-		{#if items.length > 0}
-			<button class="link-btn" onclick={clearAll}>{t('recent.clear', 'Clear')}</button>
+		{#if entries.length > 0}
+			<button class="btn btn-secondary" onclick={clearAll}>
+				<Icon name="broom" />
+				{t('recent.clear', 'Clear recent')}
+			</button>
 		{/if}
 	{/snippet}
+	{#snippet batchToolbar()}
+		<button class="btn btn-secondary" onclick={batchDownload}>
+			<Icon name="download" />
+			{t('common.download', 'Download')}
+		</button>
+		<button
+			class="btn btn-secondary"
+			onclick={() => {
+				moveTarget = null;
+				moveItems = batchTargets();
+				moveOpen = true;
+			}}><Icon name="arrows-alt" /> {t('files.move', 'Move')}</button
+		>
+		<button class="btn btn-danger" onclick={batchDelete}>
+			<Icon name="trash" />
+			{t('common.delete', 'Delete')}
+		</button>
+	{/snippet}
+</ResourceList>
 
-	{#each items as item (item.resource.id + item.accessed_at)}
-		<FileRow
-			name={item.resource.name}
-			iconClass={item.resource.icon_class}
-			subtitle={item.resource.path}
-			date={formatDate(item.accessed_at)}
-		/>
-	{/each}
-</ResourceListShell>
-
-<style>
-	.page-title {
-		margin: 0;
-		padding: 1rem 1rem 0;
-		font-size: 1.5rem;
-		color: var(--color-text-heading);
-	}
-
-	.link-btn {
-		background: none;
-		border: none;
-		color: var(--color-primary);
-		cursor: pointer;
-		font-size: 0.875rem;
-	}
-</style>
+<FileViewer bind:open={viewerOpen} file={viewerFile} />
+<MoveDialog
+	bind:open={moveOpen}
+	item={moveTarget}
+	items={moveItems}
+	onmoved={() => {
+		selectedIds = new Set();
+		load(true, orderByForGroup());
+	}}
+/>
+<ShareDialog bind:open={shareOpen} item={shareTarget} />
diff --git a/frontend/src/routes/s/[token]/+page.svelte b/frontend/src/routes/s/[token]/+page.svelte
index 60820f7e..10e32e6e 100644
--- a/frontend/src/routes/s/[token]/+page.svelte
+++ b/frontend/src/routes/s/[token]/+page.svelte
@@ -14,38 +14,87 @@
 	} from '$lib/api/endpoints/share';
 	import { t } from '$lib/i18n/index.svelte';
 
-	type State = 'loading' | 'password' | 'expired' | 'file' | 'folder';
+	type State = 'loading' | 'password' | 'expired' | 'invalid' | 'file' | 'folder';
+	type Crumb = { id?: string; name: string };
+	type ViewMode = 'grid' | 'list';
 
+	const VIEW_KEY = 'oxicloud_share_view';
 	const token = $derived(page.params.token ?? '');
 
 	let view = $state<State>('loading');
 	let meta = $state<ShareMeta | null>(null);
 	let listing = $state<ShareListing | null>(null);
 	let folderId = $state<string | undefined>(undefined);
-	let folderName = $state<string>('');
+	let crumbs = $state<Crumb[]>([]);
 	let pwInput = $state('');
 	let pwError = $state('');
 	let busy = $state(false);
+	let viewMode = $state<ViewMode>('grid');
+
+	// Lightbox over the media files in the current folder
+	let lightbox = $state(-1);
+
+	function mediaKind(mime: string | undefined): 'image' | 'video' | null {
+		const m = (mime ?? '').toLowerCase();
+		if (m.startsWith('image/')) return 'image';
+		if (m.startsWith('video/')) return 'video';
+		return null;
+	}
+
+	const mediaFiles = $derived(
+		(listing?.files ?? []).filter((f) => mediaKind(f.mime_type) !== null)
+	);
+
+	function setViewMode(mode: ViewMode) {
+		viewMode = mode;
+		try {
+			localStorage.setItem(VIEW_KEY, mode);
+		} catch {
+			/* storage unavailable — keep in-memory only */
+		}
+	}
 
 	async function loadMeta() {
 		view = 'loading';
+		// Guard a missing/blank token before hitting the API.
+		if (!token) {
+			view = 'invalid';
+			return;
+		}
 		try {
 			const r = await getShareMeta(token);
 			if (r.status === 'password') {
 				view = 'password';
 			} else if (r.status === 'expired') {
 				view = 'expired';
+			} else if (r.status === 'invalid') {
+				view = 'invalid';
 			} else {
 				meta = r.data;
-				if (r.data.item_type === 'folder') await openFolder(undefined, r.data.item_name);
-				else view = 'file';
+				if (r.data.item_type === 'folder') {
+					crumbs = [{ name: r.data.item_name }];
+					// Deep-link support: honour an initial #folder=<id> hash.
+					await openFolder(hashFolderId(), undefined, false);
+				} else view = 'file';
 			}
 		} catch {
 			view = 'expired';
 		}
 	}
 
-	async function openFolder(id: string | undefined, name: string) {
+	/** Parse the `#folder=<id>` fragment from the URL, if present. */
+	function hashFolderId(): string | undefined {
+		if (typeof location === 'undefined') return undefined;
+		const m = location.hash.match(/[#&]folder=([A-Za-z0-9-]{1,64})/);
+		return m ? m[1] : undefined;
+	}
+
+	/**
+	 * Load a folder's contents. When `crumb` is given, push it onto the trail.
+	 * `pushHistory` controls whether we sync the URL hash + push a history entry
+	 * (true for user navigation, false when restoring from popstate / deep link).
+	 */
+	async function openFolder(id: string | undefined, crumb?: Crumb, pushHistory = false) {
 		const r = await getShareContents(token, id);
 		if (r.status === 'password') {
 			view = 'password';
@@ -57,8 +106,109 @@
 		}
 		listing = r.data;
 		folderId = id;
-		folderName = name;
+		if (crumb) crumbs = [...crumbs, crumb];
+		lightbox = -1;
 		view = 'folder';
+		if (pushHistory && typeof history !== 'undefined') {
+			const hash = id ? `#folder=${encodeURIComponent(id)}` : '';
+			history.pushState({ folderId: id }, '', location.pathname + location.search + hash);
+		}
+	}
+
+	/** Navigate to a breadcrumb at depth `index` (0 = share root). */
+	async function gotoCrumb(index: number) {
+		const target = crumbs[index];
+		crumbs = crumbs.slice(0, index + 1);
+		await openFolder(target.id, undefined, true);
+	}
+
+	/** Browser back/forward — re-resolve the folder from the popped state/hash. */
+	async function onPopState() {
+		if (view !== 'folder') return;
+		await openFolder(hashFolderId(), undefined, false);
+	}
+
+	/** Append a cache-busting query param to retry a failed media load once. */
+	function retrySrc(original: string): string {
+		const sep = original.indexOf('?') === -1 ? '?' : '&';
+		return `${original}${sep}_r=${Date.now()}`;
+	}
+
+	/**
+	 * Lazy video poster: defer loading until near the viewport, then seek a few
+	 * frames in to render a thumbnail. Retries once with cache-busting on error.
+	 * Ported from publicShare.js wireLazyVideos().
+	 */
+	function lazyVideo(node: HTMLVideoElement, src: string) {
+		let retried = false;
+		const start = () => {
+			node.addEventListener(
+				'loadedmetadata',
+				() => {
+					const at = Math.min(0.1, (node.duration || 1) * 0.1);
+					try {
+						node.currentTime = at;
+					} catch {
+						/* seeking unsupported */
+					}
+				},
+				{ once: true }
+			);
+			node.addEventListener(
+				'error',
+				() => {
+					if (retried) return;
+					retried = true;
+					setTimeout(() => (node.src = retrySrc(src)), 250);
+				},
+				{ once: true }
+			);
+			node.src = src;
+		};
+		let obs: IntersectionObserver | null = null;
+		if (typeof IntersectionObserver !== 'undefined') {
+			obs = new IntersectionObserver(
+				(entries) => {
+					for (const e of entries) {
+						if (e.isIntersecting) {
+							start();
+							obs?.unobserve(node);
+						}
+					}
+				},
+				{ rootMargin: '300px' }
+			);
+			obs.observe(node);
+		} else {
+			start();
+		}
+		return { destroy: () => obs?.disconnect() };
+	}
+
+	/** Retry a failed image load once with cache-busting. Ported from wireImageRetry(). */
+	function imageRetry(node: HTMLImageElement) {
+		let retried = false;
+		const onError = () => {
+			if (retried) return;
+			retried = true;
+			const original = node.src;
+			setTimeout(() => (node.src = retrySrc(original)), 250);
+		};
+		node.addEventListener('error', onError);
+		return { destroy: () => node.removeEventListener('error', onError) };
+	}
+
+	function lbPrev() {
+		if (lightbox > 0) lightbox -= 1;
+	}
+	function lbNext() {
+		if (lightbox >= 0 && lightbox < mediaFiles.length - 1) lightbox += 1;
+	}
+	function onKeydown(e: KeyboardEvent) {
+		if (lightbox < 0) return;
+		if (e.key === 'Escape') lightbox = -1;
+		else if (e.key === 'ArrowLeft') lbPrev();
+		else if (e.key === 'ArrowRight') lbNext();
 	}
 
 	async function submitPassword(e: SubmitEvent) {
@@ -80,14 +230,28 @@
 		}
 	}
 
-	onMount(loadMeta);
+	onMount(() => {
+		try {
+			const saved = localStorage.getItem(VIEW_KEY);
+			if (saved === 'list' || saved === 'grid') viewMode = saved;
+		} catch {
+			/* ignore */
+		}
+		void loadMeta();
+	});
 </script>
 
 <svelte:head><title>{meta?.item_name ?? t('share.title', 'Shared')} · OxiCloud</title></svelte:head>
+<svelte:window onkeydown={onKeydown} onpopstate={onPopState} />
 
 <main class="share">
 	{#if view === 'loading'}
 		<p class="share__status">{t('common.loading', 'Loading…')}</p>
+	{:else if view === 'invalid'}
+		<div class="share__center">
+			<Icon name="ban" class="share__big-icon" />
+			<p>{t('share.invalid', 'This share link is invalid.')}</p>
+		</div>
 	{:else if view === 'expired'}
 		<div class="share__center">
 			<Icon name="ban" class="share__big-icon" />
@@ -116,14 +280,35 @@
 		</div>
 	{:else if view === 'folder' && listing}
 		<header class="share__header">
-			<h1>{folderName}</h1>
+			<nav class="breadcrumb" aria-label={t('files.breadcrumb', 'Breadcrumb')}>
+				{#each crumbs as c, i (i)}
+					{#if i > 0}<Icon name="chevron-right" class="breadcrumb__sep" />{/if}
+					{#if i === crumbs.length - 1}
+						<span class="breadcrumb__current">{c.name}</span>
+					{:else}
+						<button class="breadcrumb__link" onclick={() => gotoCrumb(i)}>{c.name}</button>
+					{/if}
+				{/each}
+			</nav>
 			<div class="share__header-actions">
-				{#if folderId}
-					<button class="link-btn" onclick={() => openFolder(undefined, meta?.item_name ?? '')}>
-						← {t('share.back_to_root', 'Back to share root')}
-					</button>
-				{/if}
+				<div class="view-toggle" role="group" aria-label={t('files.view', 'View')}>
+					<button
+						type="button"
+						aria-pressed={viewMode === 'grid'}
+						class:active={viewMode === 'grid'}
+						title={t('files.grid', 'Grid')}
+						onclick={() => setViewMode('grid')}><Icon name="th" /></button
+					>
+					<button
+						type="button"
+						aria-pressed={viewMode === 'list'}
+						class:active={viewMode === 'list'}
+						title={t('files.list', 'List')}
+						onclick={() => setViewMode('list')}><Icon name="bars" /></button
+					>
+				</div>
 				<a class="share__btn" href={shareZipUrl(token, folderId)} download>
+					<Icon name="file-archive" />
 					{t('share.download_zip', 'Download ZIP')}
 				</a>
 			</div>
@@ -135,11 +320,11 @@
 
 		{#if listing.folders.length > 0}
 			<h2 class="share__section">{t('share.folders', 'Folders')}</h2>
-			<ul class="share__grid">
+			<ul class="share__grid" class:share__grid--list={viewMode === 'list'}>
 				{#each listing.folders as f (f.id)}
 					<li>
-						<button class="card" onclick={() => openFolder(f.id, f.name)}>
-							<Icon name="folder" class="card__icon" />
+						<button class="card" onclick={() => openFolder(f.id, { id: f.id, name: f.name }, true)}>
+							<span class="card__thumb"><Icon name="folder" class="card__icon" /></span>
 							<span class="card__name">{f.name}</span>
 						</button>
 					</li>
@@ -149,20 +334,94 @@
 
 		{#if listing.files.length > 0}
 			<h2 class="share__section">{t('share.files', 'Files')}</h2>
-			<ul class="share__grid">
+			<ul class="share__grid" class:share__grid--list={viewMode === 'list'}>
 				{#each listing.files as f (f.id)}
-					<li>
-						<a class="card" href={shareFileUrl(token, f.id)} target="_blank" rel="noreferrer">
-							<Icon name="file" class="card__icon" />
-							<span class="card__name">{f.name}</span>
-						</a>
-					</li>
+					{@const kind = mediaKind(f.mime_type)}
+					{#if kind}
+						<li>
+							<button
+								class="card"
+								onclick={() => (lightbox = mediaFiles.findIndex((m) => m.id === f.id))}
+							>
+								<span class="card__thumb">
+									{#if kind === 'image'}
+										<img
+											src={shareFileUrl(token, f.id)}
+											alt={f.name}
+											loading="lazy"
+											decoding="async"
+											use:imageRetry
+										/>
+									{:else}
+										<video
+											use:lazyVideo={shareFileUrl(token, f.id)}
+											preload="metadata"
+											muted
+											playsinline
+										></video>
+										<span class="card__play"><Icon name="play" /></span>
+									{/if}
+								</span>
+								<span class="card__name">{f.name}</span>
+							</button>
+						</li>
+					{:else}
+						<li>
+							<a class="card" href={shareFileUrl(token, f.id)} target="_blank" rel="noreferrer">
+								<span class="card__thumb"><Icon name="file" class="card__icon" /></span>
+								<span class="card__name">{f.name}</span>
+							</a>
+						</li>
+					{/if}
 				{/each}
 			</ul>
 		{/if}
 	{/if}
 </main>
 
+{#if lightbox >= 0 && mediaFiles[lightbox]}
+	{@const m = mediaFiles[lightbox]}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class="lb"
+		role="dialog"
+		aria-modal="true"
+		aria-label={m.name}
+		tabindex="-1"
+		onclick={(e) => e.target === e.currentTarget && (lightbox = -1)}
+	>
+		<button
+			class="lb__close"
+			aria-label={t('common.close', 'Close')}
+			onclick={() => (lightbox = -1)}>×</button
+		>
+		<button
+			class="lb__nav lb__nav--prev"
+			aria-label={t('common.previous', 'Previous')}
+			disabled={lightbox === 0}
+			onclick={(e) => {
+				e.stopPropagation();
+				lbPrev();
+			}}><Icon name="chevron-left" /></button
+		>
+		{#if mediaKind(m.mime_type) === 'image'}
+			<img class="lb__media" src={shareFileUrl(token, m.id)} alt={m.name} />
+		{:else}
+			<!-- svelte-ignore a11y_media_has_caption -->
+			<video class="lb__media" src={shareFileUrl(token, m.id)} controls autoplay></video>
+		{/if}
+		<button
+			class="lb__nav lb__nav--next"
+			aria-label={t('common.next', 'Next')}
+			disabled={lightbox === mediaFiles.length - 1}
+			onclick={(e) => {
+				e.stopPropagation();
+				lbNext();
+			}}><Icon name="chevron-right" /></button
+		>
+	</div>
+{/if}
+
 <style>
 	.share {
 		max-width: 60rem;
@@ -248,7 +507,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		width: 100%;
-		padding: 1rem 0.5rem;
+		padding: 0.5rem;
 		border: 1px solid var(--color-border);
 		border-radius: var(--radius-md);
 		background: var(--color-bg-surface);
@@ -261,6 +520,35 @@
 		background: var(--color-bg-hover);
 	}
 
+	.card__thumb {
+		position: relative;
+		display: grid;
+		place-items: center;
+		width: 100%;
+		aspect-ratio: 1;
+		overflow: hidden;
+		border-radius: var(--radius-sm);
+		background: var(--color-bg-muted);
+	}
+
+	.card__thumb img,
+	.card__thumb video {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.card__play {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		color: var(--color-on-accent);
+		font-size: 1.5rem;
+		background: var(--color-scrim-control, transparent);
+		opacity: 0.85;
+	}
+
 	:global(.card__icon) {
 		font-size: 2rem;
 		color: var(--color-text-muted);
@@ -275,7 +563,36 @@
 		max-width: 100%;
 	}
 
+	/* List mode: cards become single-row rows with a small leading thumb. */
+	.share__grid--list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.share__grid--list .card {
+		flex-direction: row;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.4rem 0.6rem;
+	}
+
+	.share__grid--list .card__thumb {
+		width: 2.5rem;
+		height: 2.5rem;
+		aspect-ratio: auto;
+		flex-shrink: 0;
+	}
+
+	.share__grid--list .card__name {
+		text-align: left;
+		flex: 1;
+	}
+
 	.share__btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
 		padding: 0.5rem 1rem;
 		border: none;
 		border-radius: var(--radius-md);
@@ -285,10 +602,101 @@
 		cursor: pointer;
 	}
 
-	.link-btn {
+	.breadcrumb {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		flex-wrap: wrap;
+	}
+
+	.breadcrumb__link {
 		background: none;
 		border: none;
 		color: var(--color-primary);
 		cursor: pointer;
+		font-size: 1rem;
+		padding: 0;
+	}
+
+	.breadcrumb__current {
+		font-weight: var(--weight-semibold, 600);
+	}
+
+	:global(.breadcrumb__sep) {
+		color: var(--color-text-muted);
+		font-size: 0.75rem;
+	}
+
+	.view-toggle {
+		display: flex;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		overflow: hidden;
+	}
+
+	.view-toggle button {
+		padding: 0.4rem 0.6rem;
+		border: none;
+		background: var(--color-bg-surface);
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+
+	.view-toggle button.active {
+		background: var(--color-accent);
+		color: var(--color-on-accent);
+	}
+
+	.lb {
+		position: fixed;
+		inset: 0;
+		z-index: 1000;
+		background: var(--color-lightbox-overlay);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.lb__media {
+		max-width: 92vw;
+		max-height: 88vh;
+		object-fit: contain;
+	}
+
+	.lb__close {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		font-size: 2rem;
+		line-height: 1;
+		background: none;
+		border: none;
+		color: var(--color-on-accent);
+		cursor: pointer;
+	}
+
+	.lb__nav {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 2rem;
+		background: none;
+		border: none;
+		color: var(--color-on-accent);
+		cursor: pointer;
+		padding: 1rem;
+	}
+
+	.lb__nav:disabled {
+		opacity: 0.3;
+		cursor: default;
+	}
+
+	.lb__nav--prev {
+		left: 0.5rem;
+	}
+
+	.lb__nav--next {
+		right: 0.5rem;
 	}
 </style>
diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte
new file mode 100644
index 00000000..7202c39f
--- /dev/null
+++ b/frontend/src/routes/search/+page.svelte
@@ -0,0 +1,398 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { searchFiles } from '$lib/api/endpoints/search';
+	import { fileInlineUrl } from '$lib/api/endpoints/files';
+	import type { FileItem, FolderItem, SearchResults, SortBy } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import { t } from '$lib/i18n/index.svelte';
+	import { files as filesStore } from '$lib/stores/files.svelte';
+	import { formatBytes } from '$lib/utils/format';
+	import { formatDate, iconNameFromClass } from '$lib/utils/display';
+
+	const query = $derived(page.url.searchParams.get('q') ?? '');
+
+	let results = $state<SearchResults | null>(null);
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let sortBy = $state<SortBy>('relevance');
+	// Scope: search everywhere, or within the folder last open in the files view.
+	// Default to the current folder when one is set (and we're not in the trash
+	// section), mirroring the legacy searchView behaviour.
+	let scope = $state<'all' | 'folder'>(
+		filesStore.currentFolder && filesStore.section !== 'trash' ? 'folder' : 'all'
+	);
+
+	// Filters
+	type TypeKey = 'all' | 'image' | 'video' | 'document' | 'audio' | 'archive';
+	type SizeKey = 'all' | 'small' | 'medium' | 'large';
+	type DateKey = 'all' | 'day' | 'week' | 'month' | 'year';
+	let typeFilter = $state<TypeKey>('all');
+	let sizeFilter = $state<SizeKey>('all');
+	let dateFilter = $state<DateKey>('all');
+
+	const TYPE_EXT: Record<Exclude<TypeKey, 'all'>, string[]> = {
+		image: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'heic', 'avif', 'tiff'],
+		video: ['mp4', 'mov', 'mkv', 'avi', 'webm', 'm4v', 'wmv', 'flv'],
+		document: [
+			'pdf',
+			'doc',
+			'docx',
+			'xls',
+			'xlsx',
+			'ppt',
+			'pptx',
+			'txt',
+			'md',
+			'odt',
+			'rtf',
+			'csv'
+		],
+		audio: ['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a', 'opus'],
+		archive: ['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz']
+	};
+	const TYPES: { v: TypeKey; l: string }[] = [
+		{ v: 'all', l: t('search.type.all', 'All types') },
+		{ v: 'image', l: t('search.type.image', 'Images') },
+		{ v: 'video', l: t('search.type.video', 'Videos') },
+		{ v: 'document', l: t('search.type.document', 'Documents') },
+		{ v: 'audio', l: t('search.type.audio', 'Audio') },
+		{ v: 'archive', l: t('search.type.archive', 'Archives') }
+	];
+	const SIZES: { v: SizeKey; l: string }[] = [
+		{ v: 'all', l: t('search.size.all', 'Any size') },
+		{ v: 'small', l: t('search.size.small', '< 1 MB') },
+		{ v: 'medium', l: t('search.size.medium', '1–100 MB') },
+		{ v: 'large', l: t('search.size.large', '> 100 MB') }
+	];
+	const DATES: { v: DateKey; l: string }[] = [
+		{ v: 'all', l: t('search.date.all', 'Any time') },
+		{ v: 'day', l: t('search.date.day', 'Past 24 hours') },
+		{ v: 'week', l: t('search.date.week', 'Past week') },
+		{ v: 'month', l: t('search.date.month', 'Past month') },
+		{ v: 'year', l: t('search.date.year', 'Past year') }
+	];
+
+	const MB = 1024 * 1024;
+	function sizeBounds(k: SizeKey): { minSize?: number; maxSize?: number } {
+		switch (k) {
+			case 'small':
+				return { maxSize: MB };
+			case 'medium':
+				return { minSize: MB, maxSize: 100 * MB };
+			case 'large':
+				return { minSize: 100 * MB };
+			default:
+				return {};
+		}
+	}
+	function dateBound(k: DateKey): number | undefined {
+		const day = 86400;
+		const now = Math.floor(Date.now() / 1000);
+		switch (k) {
+			case 'day':
+				return now - day;
+			case 'week':
+				return now - 7 * day;
+			case 'month':
+				return now - 30 * day;
+			case 'year':
+				return now - 365 * day;
+			default:
+				return undefined;
+		}
+	}
+
+	const hasFilters = $derived(typeFilter !== 'all' || sizeFilter !== 'all' || dateFilter !== 'all');
+	function clearFilters() {
+		typeFilter = 'all';
+		sizeFilter = 'all';
+		dateFilter = 'all';
+	}
+
+	const SORTS: { v: SortBy; l: string }[] = [
+		{ v: 'relevance', l: t('search.sort.relevance', 'Relevance') },
+		{ v: 'name', l: t('search.sort.name_asc', 'Name A-Z') },
+		{ v: 'name_desc', l: t('search.sort.name_desc', 'Name Z-A') },
+		{ v: 'date_desc', l: t('search.sort.newest', 'Newest') },
+		{ v: 'date', l: t('search.sort.oldest', 'Oldest') },
+		{ v: 'size_desc', l: t('search.sort.largest', 'Largest') },
+		{ v: 'size', l: t('search.sort.smallest', 'Smallest') }
+	];
+
+	async function run(q: string) {
+		if (!q) {
+			results = null;
+			return;
+		}
+		loading = true;
+		error = null;
+		try {
+			// Trash section searches are always global — there is no folder to scope to.
+			const folderId =
+				scope === 'folder' && filesStore.section !== 'trash'
+					? (filesStore.currentFolder ?? undefined)
+					: undefined;
+			results = await searchFiles(q, {
+				recursive: true,
+				sortBy,
+				folderId,
+				fileTypes: typeFilter === 'all' ? undefined : TYPE_EXT[typeFilter],
+				...sizeBounds(sizeFilter),
+				modifiedAfter: dateBound(dateFilter)
+			});
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function openFolder(folder: FolderItem) {
+		goto(`/files/${folder.id}`);
+	}
+
+	function openFile(file: FileItem) {
+		window.open(fileInlineUrl(file.id), '_blank', 'noopener');
+	}
+
+	const isEmpty = $derived(!!results && results.files.length === 0 && results.folders.length === 0);
+
+	$effect(() => {
+		// re-run when query, sort, scope, or any filter changes
+		void sortBy;
+		void scope;
+		void typeFilter;
+		void sizeFilter;
+		void dateFilter;
+		void run(query);
+	});
+</script>
+
+<svelte:head><title>{t('search.title', 'Search')} · OxiCloud</title></svelte:head>
+
+<div class="page-sticky-header search-head">
+	<h1 class="page-title">
+		{#if query}{t('search.results_for', { q: query }, 'Results for “{{q}}”')}{:else}{t(
+				'search.title',
+				'Search'
+			)}{/if}
+		{#if results?.query_time_ms != null}
+			<span class="search-time">({results.query_time_ms} ms)</span>
+		{/if}
+	</h1>
+	{#if query}
+		<div class="search-controls">
+			{#if filesStore.currentFolder}
+				<div class="seg" role="group" aria-label={t('search.scope', 'Scope')}>
+					<button class="seg__btn" class:active={scope === 'all'} onclick={() => (scope = 'all')}>
+						{t('search.everywhere', 'Everywhere')}
+					</button>
+					<button
+						class="seg__btn"
+						class:active={scope === 'folder'}
+						onclick={() => (scope = 'folder')}
+					>
+						{t('search.this_folder', 'This folder')}
+					</button>
+				</div>
+			{/if}
+			<select
+				class="sort-select"
+				bind:value={typeFilter}
+				aria-label={t('search.type_label', 'Type')}
+			>
+				{#each TYPES as o (o.v)}<option value={o.v}>{o.l}</option>{/each}
+			</select>
+			<select
+				class="sort-select"
+				bind:value={sizeFilter}
+				aria-label={t('search.size_label', 'Size')}
+			>
+				{#each SIZES as o (o.v)}<option value={o.v}>{o.l}</option>{/each}
+			</select>
+			<select
+				class="sort-select"
+				bind:value={dateFilter}
+				aria-label={t('search.date_label', 'Date')}
+			>
+				{#each DATES as o (o.v)}<option value={o.v}>{o.l}</option>{/each}
+			</select>
+			<select class="sort-select" bind:value={sortBy} aria-label={t('search.sort_by', 'Sort by')}>
+				{#each SORTS as s (s.v)}<option value={s.v}>{s.l}</option>{/each}
+			</select>
+			{#if hasFilters}
+				<button class="clear-filters" onclick={clearFilters}>
+					<Icon name="times" />
+					{t('search.clear_filters', 'Clear filters')}
+				</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+{#if loading}
+	<div class="search-loading">
+		<Icon name="spinner" class="search-loading__spinner" />
+		<h2 class="search-loading__text">
+			{t('search.searching_for', { q: query }, 'Searching for “{{q}}”…')}
+		</h2>
+	</div>
+{:else if error}
+	<div class="empty-state"><p>{error}</p></div>
+{:else if !query}
+	<div class="empty-state">
+		<p>{t('search.prompt', 'Type a query in the search bar above.')}</p>
+	</div>
+{:else if isEmpty}
+	<div class="empty-state search-empty">
+		<Icon name="search" />
+		<p>{t('search.no_results', 'No results found for this search')}</p>
+	</div>
+{:else if results}
+	<div class="files-container">
+		<div class="files-list-view" style="--files-list-columns: minmax(200px, 2fr) 1fr 110px 140px">
+			<div class="list-header">
+				<div>{t('files.col_name', 'Name')}</div>
+				<div>{t('files.col_path', 'Path')}</div>
+				<div>{t('files.col_size', 'Size')}</div>
+				<div>{t('files.col_modified', 'Modified')}</div>
+			</div>
+
+			{#each results.folders as folder (folder.id)}
+				<div
+					class="file-item"
+					role="button"
+					tabindex="0"
+					onclick={() => openFolder(folder)}
+					onkeydown={(e) => e.key === 'Enter' && openFolder(folder)}
+				>
+					<div class="name-cell">
+						<span class="file-icon"><Icon name="folder" /></span>
+						<span>{folder.name}</span>
+					</div>
+					<div class="path-cell">{folder.path}</div>
+					<div class="size-cell">—</div>
+					<div class="date-cell">{formatDate(folder.modified_at)}</div>
+				</div>
+			{/each}
+
+			{#each results.files as file (file.id)}
+				<div
+					class="file-item"
+					role="button"
+					tabindex="0"
+					onclick={() => openFile(file)}
+					onkeydown={(e) => e.key === 'Enter' && openFile(file)}
+				>
+					<div class="name-cell">
+						<span class="file-icon"><Icon name={iconNameFromClass(file.icon_class)} /></span>
+						<span>{file.name}</span>
+					</div>
+					<div class="path-cell">{file.path}</div>
+					<div class="size-cell">{file.size != null ? formatBytes(file.size) : ''}</div>
+					<div class="date-cell">{formatDate(file.modified_at)}</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.search-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-3);
+		flex-wrap: wrap;
+	}
+
+	.search-controls {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	.sort-select {
+		padding: var(--space-2) var(--space-2-5);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+	}
+
+	.seg {
+		display: flex;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		overflow: hidden;
+	}
+
+	.seg__btn {
+		padding: var(--space-2) var(--space-3);
+		border: none;
+		background: var(--color-bg-surface);
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+
+	.seg__btn.active {
+		background: var(--color-accent);
+		color: var(--color-on-accent);
+	}
+
+	.search-time {
+		font-size: var(--text-sm);
+		font-weight: var(--weight-normal);
+		color: var(--color-text-muted);
+	}
+
+	.clear-filters {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: var(--space-2) var(--space-3);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-surface);
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+
+	.clear-filters:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.search-loading {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		padding: var(--space-4) 0;
+		color: var(--color-text-muted);
+	}
+
+	.search-loading :global(.search-loading__spinner) {
+		font-size: var(--text-xl);
+		color: var(--color-accent);
+		animation: spin var(--spin-duration) linear infinite;
+	}
+
+	.search-loading__text {
+		margin: 0;
+		font-size: var(--text-lg);
+		font-weight: var(--weight-medium);
+		color: var(--color-text);
+	}
+
+	.search-empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-3);
+	}
+
+	.search-empty :global(.oxi-icon) {
+		font-size: var(--text-3xl);
+		color: var(--color-text-faint);
+	}
+</style>
diff --git a/frontend/src/routes/shared-with-me/+page.svelte b/frontend/src/routes/shared-with-me/+page.svelte
index c8900797..136af52a 100644
--- a/frontend/src/routes/shared-with-me/+page.svelte
+++ b/frontend/src/routes/shared-with-me/+page.svelte
@@ -1,22 +1,41 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import FileRow from '$lib/components/FileRow.svelte';
-	import ResourceListShell from '$lib/components/ResourceListShell.svelte';
 	import { fetchSharedWithMe, type IncomingGrantItem } from '$lib/api/endpoints/grants';
+	import type { FileItem } from '$lib/api/types';
+	import FileViewer from '$lib/components/FileViewer.svelte';
+	import ResourceList, { type ResourceEntry } from '$lib/components/ResourceList.svelte';
 	import { t } from '$lib/i18n/index.svelte';
-	import { formatDate } from '$lib/utils/display';
 
-	let items = $state<IncomingGrantItem[]>([]);
+	let raw = $state<IncomingGrantItem[]>([]);
 	let cursor = $state<string | undefined>(undefined);
 	let loading = $state(false);
 	let error = $state<string | null>(null);
 
+	const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
+
+	const entries = $derived(
+		raw.map(
+			(it): ResourceEntry => ({
+				id: it.resource.id,
+				name: it.resource.name,
+				kind: it.resource_type,
+				iconClass: it.resource.icon_class,
+				path: it.granted_by
+					? t('shared_with_me.from', { who: it.granted_by }, 'Shared by {{who}}')
+					: it.resource.path,
+				size: it.resource_type === 'file' ? (it.resource as FileItem).size : null,
+				date: it.granted_at
+			})
+		)
+	);
+
 	async function load(reset = false) {
 		loading = true;
 		error = null;
 		try {
 			const page = await fetchSharedWithMe({ cursor: reset ? undefined : cursor });
-			items = reset ? page.items : [...items, ...page.items];
+			raw = reset ? page.items : [...raw, ...page.items];
 			cursor = page.next_cursor;
 		} catch (e) {
 			error = e instanceof Error ? e.message : String(e);
@@ -25,38 +44,35 @@
 		}
 	}
 
+	let viewerOpen = $state(false);
+	let viewerFile = $state<FileItem | null>(null);
+
+	function open(entry: ResourceEntry) {
+		if (entry.kind === 'folder') {
+			goto(`/files/${entry.id}`);
+			return;
+		}
+		const item = byId.get(entry.id);
+		if (item) {
+			viewerFile = item.resource as FileItem;
+			viewerOpen = true;
+		}
+	}
+
 	onMount(() => load(true));
 </script>
 
 <svelte:head><title>{t('nav.shared_with_me', 'Shared with me')} · OxiCloud</title></svelte:head>
 
-<h1 class="page-title">{t('nav.shared_with_me', 'Shared with me')}</h1>
-
-<ResourceListShell
+<ResourceList
+	title={t('nav.shared_with_me', 'Shared with me')}
+	items={entries}
 	{loading}
 	{error}
-	empty={items.length === 0}
 	emptyText={t('shared_with_me.empty', 'Nothing has been shared with you yet.')}
 	hasMore={!!cursor}
 	onloadmore={() => load(false)}
->
-	{#each items as item (item.resource.id)}
-		<FileRow
-			name={item.resource.name}
-			iconClass={item.resource.icon_class}
-			subtitle={item.granted_by
-				? t('shared_with_me.from', { who: item.granted_by }, 'Shared by {{who}}')
-				: item.resource.path}
-			date={formatDate(item.granted_at)}
-		/>
-	{/each}
-</ResourceListShell>
+	onopen={open}
+/>
 
-<style>
-	.page-title {
-		margin: 0;
-		padding: 1rem 1rem 0;
-		font-size: 1.5rem;
-		color: var(--color-text-heading);
-	}
-</style>
+<FileViewer bind:open={viewerOpen} file={viewerFile} />
diff --git a/frontend/src/routes/shared/+page.svelte b/frontend/src/routes/shared/+page.svelte
index d0507a80..f92ddc4f 100644
--- a/frontend/src/routes/shared/+page.svelte
+++ b/frontend/src/routes/shared/+page.svelte
@@ -1,22 +1,155 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import FileRow from '$lib/components/FileRow.svelte';
-	import ResourceListShell from '$lib/components/ResourceListShell.svelte';
-	import { fetchMyShares, type OutgoingGrantItem } from '$lib/api/endpoints/grants';
+	import {
+		expiryToIso,
+		fetchMyShares,
+		notifyGrantRecipient,
+		revokeGrant,
+		updateGrantRole,
+		type NotifyOutcome,
+		type OutgoingGrantItem,
+		type OutgoingResourceGrant,
+		type ShareRole
+	} from '$lib/api/endpoints/grants';
+	import { copyShareLink, deleteShare, getShareById, updateShare } from '$lib/api/endpoints/shares';
+	import { ensureResolvers, resolveLabel } from '$lib/api/endpoints/recipients';
+	import { fileInlineUrl } from '$lib/api/endpoints/files';
+	import type { FileItem, FolderItem, ItemType } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import ListToolbar from '$lib/components/ListToolbar.svelte';
+	import ShareDialog from '$lib/components/ShareDialog.svelte';
 	import { t } from '$lib/i18n/index.svelte';
-	import { formatDate } from '$lib/utils/display';
+	import { ui } from '$lib/stores/ui.svelte';
+	import { iconNameFromClass } from '$lib/utils/display';
 
-	let items = $state<OutgoingGrantItem[]>([]);
+	type GroupBy = 'items' | 'sharedWith';
+
+	const GROUP_BYS: { key: GroupBy; label: string; orderBy: string }[] = [
+		{ key: 'items', label: t('groupby.byFiles', 'By files'), orderBy: 'type' },
+		{ key: 'sharedWith', label: t('groupby.sharedWith', 'Shared with'), orderBy: 'subject' }
+	];
+
+	const ROLES: { v: ShareRole; l: string; icon: string }[] = [
+		{ v: 'admin', l: t('share.role.canManage', 'Can manage'), icon: 'crown' },
+		{ v: 'editor', l: t('share.role.canEdit', 'Can edit'), icon: 'pencil-alt' },
+		{ v: 'viewer', l: t('share.role.canView', 'Can view'), icon: 'eye' }
+	];
+	function roleMeta(r: string) {
+		return ROLES.find((x) => x.v === r) ?? ROLES[2];
+	}
+
+	let raw = $state<OutgoingGrantItem[]>([]);
 	let cursor = $state<string | undefined>(undefined);
 	let loading = $state(false);
 	let error = $state<string | null>(null);
+	let groupBy = $state<GroupBy>('items');
+	let reversed = $state(false);
 
+	// Edit-sharing dialog
+	let dialogOpen = $state(false);
+	let dialogItem = $state<{ id: string; name: string; kind: ItemType } | null>(null);
+
+	// Open kebab menu, keyed by grant id.
+	let menuFor = $state<string | null>(null);
+
+	function expiryTier(iso: string | null | undefined): 'never' | 'active' | 'soon' | 'expired' {
+		if (!iso) return 'never';
+		const ms = new Date(iso).getTime() - Date.now();
+		if (ms < 0) return 'expired';
+		if (ms <= 30 * 86_400_000) return 'soon';
+		return 'active';
+	}
+	function expiryLabel(iso: string | null | undefined): string {
+		if (!iso) return t('share.noExpiry', 'No expiry');
+		const d = new Date(iso);
+		if (Number.isNaN(d.getTime())) return '';
+		return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+	}
+	function isoToDate(iso: string | null | undefined): string {
+		return iso ? String(iso).slice(0, 10) : '';
+	}
+
+	// ── Swimlane assembly ───────────────────────────────────────────────────
+	interface Lane {
+		key: string;
+		header:
+			| { kind: 'resource'; item: OutgoingGrantItem }
+			| { kind: 'user'; id: string }
+			| { kind: 'group'; id: string }
+			| { kind: 'linkPublic' }
+			| { kind: 'linkPassword' };
+		rows: { grant: OutgoingResourceGrant; item: OutgoingGrantItem }[];
+	}
+
+	const lanes = $derived.by((): Lane[] => {
+		const out: Lane[] = [];
+		const byKey = new Map<string, Lane>();
+		const ensure = (key: string, header: Lane['header']): Lane => {
+			let lane = byKey.get(key);
+			if (!lane) {
+				lane = { key, header, rows: [] };
+				byKey.set(key, lane);
+				out.push(lane);
+			}
+			return lane;
+		};
+		for (const item of raw) {
+			if (groupBy === 'items') {
+				const lane = ensure(`resource:${item.resource.id}`, { kind: 'resource', item });
+				for (const grant of item.grants) lane.rows.push({ grant, item });
+			} else {
+				for (const grant of item.grants) {
+					let key: string;
+					let header: Lane['header'];
+					if (grant.subject_type === 'user') {
+						key = `user:${grant.subject_id}`;
+						header = { kind: 'user', id: grant.subject_id };
+					} else if (grant.subject_type === 'group') {
+						key = `group:${grant.subject_id}`;
+						header = { kind: 'group', id: grant.subject_id };
+					} else if (grant.has_password) {
+						key = 'links:password';
+						header = { kind: 'linkPassword' };
+					} else {
+						key = 'links:public';
+						header = { kind: 'linkPublic' };
+					}
+					ensure(key, header).rows.push({ grant, item });
+				}
+			}
+		}
+		return out;
+	});
+
+	function laneTitle(header: Lane['header']): string {
+		switch (header.kind) {
+			case 'user':
+				return resolveLabel('user', header.id);
+			case 'group':
+				return resolveLabel('group', header.id);
+			case 'linkPublic':
+				return t('myshares.publicLinks', 'Public links');
+			case 'linkPassword':
+				return t('myshares.passwordLinks', 'Password-protected links');
+			case 'resource':
+				return header.item.resource.name;
+		}
+	}
+
+	// ── Data loading ────────────────────────────────────────────────────────
 	async function load(reset = false) {
 		loading = true;
 		error = null;
 		try {
-			const page = await fetchMyShares({ cursor: reset ? undefined : cursor });
-			items = reset ? page.items : [...items, ...page.items];
+			await ensureResolvers();
+			const order = GROUP_BYS.find((g) => g.key === groupBy)?.orderBy;
+			const page = await fetchMyShares({
+				cursor: reset ? undefined : cursor,
+				orderBy: order,
+				reverse: reversed
+			});
+			raw = reset ? page.items : [...raw, ...page.items];
 			cursor = page.next_cursor;
 		} catch (e) {
 			error = e instanceof Error ? e.message : String(e);
@@ -25,38 +158,693 @@
 		}
 	}
 
+	function reload() {
+		cursor = undefined;
+		raw = [];
+		void load(true);
+	}
+
+	function setGroupBy(key: GroupBy) {
+		if (groupBy === key) return;
+		groupBy = key;
+		reload();
+	}
+	function toggleDirection() {
+		reversed = !reversed;
+		reload();
+	}
+
+	function openResource(item: OutgoingGrantItem) {
+		if (item.resource_type === 'folder') goto(`/files/${item.resource.id}`);
+		else window.open(fileInlineUrl(item.resource.id), '_blank', 'noopener');
+	}
+
+	function editSharing(item: OutgoingGrantItem) {
+		dialogItem = { id: item.resource.id, name: item.resource.name, kind: item.resource_type };
+		dialogOpen = true;
+	}
+
+	function toggleMenu(grantId: string) {
+		menuFor = menuFor === grantId ? null : grantId;
+	}
+	function closeMenu() {
+		menuFor = null;
+	}
+
+	function summarize(outcomes: NotifyOutcome[]) {
+		if (!outcomes || outcomes.length === 0) {
+			ui.notify(t('myshares.notifySent', 'Notification sent.'), 'success');
+			return;
+		}
+		const sent = outcomes.filter((o) => o.kind === 'sent').length;
+		const coalesced = outcomes.filter((o) => o.kind === 'coalesced').length;
+		const rate = outcomes.filter((o) => o.kind === 'rate_limited').length;
+		const skipped = outcomes.filter((o) => o.kind === 'not_applicable').length;
+		const lines: string[] = [];
+		if (sent > 0) lines.push(t('share.notify.sent', { n: sent }, '{{n}} notified by email.'));
+		if (coalesced > 0)
+			lines.push(t('share.notify.coalesced', { n: coalesced }, '{{n}} already notified recently.'));
+		if (rate > 0)
+			lines.push(
+				t('share.notify.rateLimited', { n: rate }, '{{n}} hit the rate limit — try later.')
+			);
+		if (skipped > 0)
+			lines.push(
+				t('share.notify.skipped', { n: skipped }, '{{n}} skipped (no email / opted out).')
+			);
+		ui.notify(
+			lines.join(' ') || t('myshares.notifySent', 'Notification sent.'),
+			rate || skipped ? 'info' : 'success'
+		);
+	}
+
+	// ── Per-grant actions ───────────────────────────────────────────────────
+	async function changeRole(g: OutgoingResourceGrant, item: OutgoingGrantItem, role: ShareRole) {
+		closeMenu();
+		if (g.role === role) return;
+		try {
+			await updateGrantRole(
+				{ type: g.subject_type, id: g.subject_id },
+				{ type: item.resource_type, id: item.resource.id },
+				role,
+				expiryToIso(isoToDate(g.expires_at) || null)
+			);
+			g.role = role;
+			raw = [...raw];
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function changeExpiry(g: OutgoingResourceGrant, item: OutgoingGrantItem, date: string) {
+		try {
+			const iso = expiryToIso(date || null);
+			await updateGrantRole(
+				{ type: g.subject_type, id: g.subject_id },
+				{ type: item.resource_type, id: item.resource.id },
+				g.role,
+				iso
+			);
+			g.expires_at = iso;
+			raw = [...raw];
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function notify(g: OutgoingResourceGrant) {
+		closeMenu();
+		try {
+			summarize((await notifyGrantRecipient(g.grant_id)).outcomes);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function removeAccess(g: OutgoingResourceGrant) {
+		closeMenu();
+		try {
+			await revokeGrant(g.grant_id);
+			dropGrant(g.grant_id);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function copyLink(g: OutgoingResourceGrant) {
+		closeMenu();
+		try {
+			const share = await getShareById(g.subject_id);
+			if (await copyShareLink(share.url)) ui.notify(t('share.copied', 'Link copied'), 'success');
+			else ui.notify(t('share.copy_failed', 'Could not copy link'), 'error');
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function changeLinkExpiry(g: OutgoingResourceGrant, date: string) {
+		try {
+			await updateShare(g.subject_id, { expiresAt: date || null });
+			g.expires_at = expiryToIso(date || null);
+			raw = [...raw];
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function editLinkPassword(g: OutgoingResourceGrant) {
+		closeMenu();
+		const pw = window.prompt(
+			g.has_password
+				? t('share.passwordPrompt_clear', 'New password (blank to remove):')
+				: t('share.passwordPrompt', 'Set a password:')
+		);
+		if (pw === null) return;
+		try {
+			await updateShare(g.subject_id, { password: pw || null });
+			g.has_password = !!pw;
+			raw = [...raw];
+			ui.notify(
+				pw
+					? t('share.password_set', 'Password updated')
+					: t('share.password_cleared', 'Password removed'),
+				'success'
+			);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	async function deleteLink(g: OutgoingResourceGrant) {
+		closeMenu();
+		try {
+			await deleteShare(g.subject_id);
+			dropGrant(g.grant_id);
+		} catch (e) {
+			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+		}
+	}
+
+	/** Remove a grant locally, pruning now-empty resources. */
+	function dropGrant(grantId: string) {
+		raw = raw
+			.map((item) => ({ ...item, grants: item.grants.filter((g) => g.grant_id !== grantId) }))
+			.filter((item) => item.grants.length > 0);
+	}
+
+	function linkLabel(g: OutgoingResourceGrant): string {
+		return `${t('share.link', 'Link')} · …${g.subject_id.slice(-4)} · ${g.subject_display}`;
+	}
+
+	function resourceIcon(item: OutgoingGrantItem): string {
+		return item.resource_type === 'folder'
+			? 'folder'
+			: iconNameFromClass((item.resource as FileItem | FolderItem).icon_class);
+	}
+
+	const isEmpty = $derived(!loading && raw.length === 0 && !error);
+
 	onMount(() => load(true));
 </script>
 
 <svelte:head><title>{t('nav.shared', 'Shared')} · OxiCloud</title></svelte:head>
+<svelte:window onclick={() => menuFor && closeMenu()} />
 
-<h1 class="page-title">{t('nav.shared', 'Shared')}</h1>
+<div class="page-sticky-header">
+	<h1 class="page-title">{t('nav.shared', 'Shared')}</h1>
+	<ListToolbar
+		groups={GROUP_BYS}
+		{groupBy}
+		{reversed}
+		ongroup={(key) => setGroupBy(key as GroupBy)}
+		ondirection={toggleDirection}
+		showViewToggle={false}
+	/>
+</div>
 
-<ResourceListShell
-	{loading}
-	{error}
-	empty={items.length === 0}
-	emptyText={t('shared.empty', "You haven't shared anything yet.")}
-	hasMore={!!cursor}
-	onloadmore={() => load(false)}
->
-	{#each items as item (item.resource.id)}
-		<FileRow
-			name={item.resource.name}
-			iconClass={item.resource.icon_class}
-			subtitle={item.subject
-				? t('shared.with', { who: item.subject }, 'Shared with {{who}}')
-				: item.resource.path}
-			date={formatDate(item.first_shared_at)}
-		/>
-	{/each}
-</ResourceListShell>
+{#if error}
+	<div class="empty-state">
+		<Icon name="exclamation-circle" class="empty-state-icon empty-state-icon--error" />
+		<p>{error}</p>
+	</div>
+{:else if isEmpty}
+	<div class="empty-state">
+		<Icon name="share-alt" class="empty-state-icon" />
+		<p>{t('myshares.emptyStateTitle', "You haven't shared anything yet")}</p>
+		<p class="empty-state__hint">
+			{t('myshares.emptyStateDesc', 'Items you share with others will appear here')}
+		</p>
+	</div>
+{:else}
+	<div class="ms-lanes">
+		{#each lanes as lane (lane.key)}
+			<section class="ms-lane">
+				<header class="ms-lane__header">
+					{#if lane.header.kind === 'resource'}
+						{@const laneItem = lane.header.item}
+						<button class="ms-lane__resource" onclick={() => openResource(laneItem)}>
+							<Icon name={resourceIcon(laneItem)} />
+							<span class="ms-lane__name">{laneItem.resource.name}</span>
+						</button>
+						<button class="btn btn-secondary ms-lane__edit" onclick={() => editSharing(laneItem)}>
+							<Icon name="pencil-alt" />
+							{t('myshares.editSharing', 'Edit sharing')}
+						</button>
+					{:else}
+						<span class="ms-lane__subject">
+							<Icon
+								name={lane.header.kind === 'user'
+									? 'user'
+									: lane.header.kind === 'group'
+										? 'user-group'
+										: lane.header.kind === 'linkPassword'
+											? 'lock'
+											: 'link'}
+							/>
+							<span class="ms-lane__name">{laneTitle(lane.header)}</span>
+						</span>
+					{/if}
+				</header>
+
+				<ul class="ms-rows">
+					{#each lane.rows as { grant, item } (grant.grant_id)}
+						{@const tier = expiryTier(grant.expires_at)}
+						<li class="ms-row" class:ms-row--expired={tier === 'expired'}>
+							<!-- Identity -->
+							<span class="ms-row__identity">
+								{#if (grant.subject_type === 'user' || grant.subject_type === 'group') && groupBy === 'sharedWith'}
+									<button class="ms-link-btn" onclick={() => openResource(item)}>
+										<Icon name={resourceIcon(item)} />
+										<span class="ms-row__name">{item.resource.name}</span>
+									</button>
+								{:else if grant.subject_type === 'user'}
+									<Icon name="user" />
+									<span class="ms-row__name">{resolveLabel('user', grant.subject_id)}</span>
+								{:else if grant.subject_type === 'group'}
+									<Icon name="user-group" />
+									<span class="ms-row__name">{resolveLabel('group', grant.subject_id)}</span>
+								{:else}
+									<button
+										class="ms-chip ms-chip--link"
+										class:ms-chip--locked={grant.has_password}
+										onclick={() => copyLink(grant)}
+										title={t('share.copyLink', 'Copy link')}
+									>
+										<Icon name={grant.has_password ? 'lock' : 'link'} />
+										<span class="ms-row__name">{linkLabel(grant)}</span>
+									</button>
+									{#if groupBy === 'sharedWith'}
+										<span class="ms-arrow">→</span>
+										<button class="ms-link-btn" onclick={() => openResource(item)}>
+											<Icon name={resourceIcon(item)} />
+											<span>{item.resource.name}</span>
+										</button>
+									{/if}
+								{/if}
+							</span>
+
+							<!-- Role pill (not shown for token subjects) -->
+							{#if grant.subject_type !== 'token'}
+								<span class="ms-role ms-role--{roleMeta(grant.role).v}">
+									<Icon name={roleMeta(grant.role).icon} />
+									{roleMeta(grant.role).l}
+								</span>
+							{/if}
+
+							<!-- Expiry chip -->
+							<span class="ms-expiry ms-expiry--{tier}" title={expiryLabel(grant.expires_at)}>
+								<Icon name={grant.expires_at ? 'clock' : 'infinity'} />
+								{expiryLabel(grant.expires_at)}
+							</span>
+
+							<!-- Kebab -->
+							<div class="ms-kebab">
+								<button
+									class="btn-icon"
+									aria-label={t('myshares.manageAccess', 'Manage access')}
+									aria-haspopup="menu"
+									aria-expanded={menuFor === grant.grant_id}
+									onclick={(e) => {
+										e.stopPropagation();
+										toggleMenu(grant.grant_id);
+									}}><Icon name="ellipsis-v" /></button
+								>
+								{#if menuFor === grant.grant_id}
+									<div
+										class="ms-menu"
+										role="menu"
+										tabindex="-1"
+										onclick={(e) => e.stopPropagation()}
+										onkeydown={(e) => e.key === 'Escape' && closeMenu()}
+									>
+										{#if grant.subject_type === 'user' || grant.subject_type === 'group'}
+											<button class="ms-menu__item" role="menuitem" onclick={() => notify(grant)}>
+												<Icon name="paper-plane" />
+												{grant.subject_type === 'group'
+													? t('myshares.notifyGroupMembers', 'Notify group members')
+													: grant.is_external
+														? t('myshares.resendInvitation', 'Resend invitation email')
+														: t('myshares.notifyByEmail', 'Notify by email')}
+											</button>
+											<div class="ms-menu__sep"></div>
+											{#each ROLES as r (r.v)}
+												<button
+													class="ms-menu__item"
+													class:ms-menu__item--current={grant.role === r.v}
+													role="menuitem"
+													onclick={() => changeRole(grant, item, r.v)}
+												>
+													<Icon name={grant.role === r.v ? 'check' : r.icon} />
+													{r.l}
+												</button>
+											{/each}
+											<div class="ms-menu__sep"></div>
+											<div class="ms-menu__field">
+												<span class="ms-menu__label">{t('share.expiry', 'Expiry')}</span>
+												<input
+													type="date"
+													class="ms-menu__date"
+													value={isoToDate(grant.expires_at)}
+													onchange={(e) =>
+														changeExpiry(grant, item, (e.currentTarget as HTMLInputElement).value)}
+												/>
+											</div>
+											<div class="ms-menu__sep"></div>
+											<button
+												class="ms-menu__item ms-menu__item--danger"
+												role="menuitem"
+												onclick={() => removeAccess(grant)}
+											>
+												<Icon name="user-xmark" />
+												{t('myshares.removeAccess', 'Remove access')}
+											</button>
+										{:else}
+											<button class="ms-menu__item" role="menuitem" onclick={() => copyLink(grant)}>
+												<Icon name="copy" />
+												{t('myshares.copyLink', 'Copy link')}
+											</button>
+											<div class="ms-menu__sep"></div>
+											<div class="ms-menu__field">
+												<span class="ms-menu__label">{t('share.expiry', 'Expiry')}</span>
+												<input
+													type="date"
+													class="ms-menu__date"
+													value={isoToDate(grant.expires_at)}
+													onchange={(e) =>
+														changeLinkExpiry(grant, (e.currentTarget as HTMLInputElement).value)}
+												/>
+											</div>
+											<button
+												class="ms-menu__item"
+												role="menuitem"
+												onclick={() => editLinkPassword(grant)}
+											>
+												<Icon name={grant.has_password ? 'lock' : 'lock-open'} />
+												{grant.has_password
+													? t('share.changePassword', 'Change password')
+													: t('share.addPassword', 'Add password')}
+											</button>
+											<div class="ms-menu__sep"></div>
+											<button
+												class="ms-menu__item ms-menu__item--danger"
+												role="menuitem"
+												onclick={() => deleteLink(grant)}
+											>
+												<Icon name="trash" />
+												{t('myshares.deleteLink', 'Delete link')}
+											</button>
+										{/if}
+									</div>
+								{/if}
+							</div>
+						</li>
+					{/each}
+				</ul>
+			</section>
+		{/each}
+
+		{#if cursor}
+			<button class="btn btn-secondary ms-more" onclick={() => load(false)} disabled={loading}>
+				{loading ? t('common.loading', 'Loading…') : t('common.load_more', 'Load more')}
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<ShareDialog bind:open={dialogOpen} item={dialogItem} />
 
 <style>
-	.page-title {
+	.ms-lanes {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-4);
+		padding-top: var(--space-3);
+	}
+
+	.ms-lane {
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		overflow: visible;
+	}
+
+	.ms-lane__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-2);
+		padding: var(--space-2) var(--space-3);
+		border-bottom: 1px solid var(--color-border-faint, var(--color-border));
+		background: var(--color-bg-muted);
+	}
+
+	.ms-lane__resource,
+	.ms-lane__subject {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-2);
+		font-weight: var(--weight-semibold, 600);
+		color: var(--color-text);
+		background: none;
+		border: none;
+		cursor: pointer;
+		min-width: 0;
+	}
+
+	.ms-lane__subject {
+		cursor: default;
+	}
+
+	.ms-lane__name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ms-lane__edit {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		flex: none;
+	}
+
+	.ms-rows {
+		list-style: none;
 		margin: 0;
-		padding: 1rem 1rem 0;
-		font-size: 1.5rem;
-		color: var(--color-text-heading);
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.ms-row {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		padding: var(--space-2) var(--space-3);
+		border-top: 1px solid var(--color-border-faint, var(--color-border));
+	}
+
+	.ms-row:first-child {
+		border-top: none;
+	}
+
+	.ms-row--expired {
+		opacity: 0.6;
+	}
+
+	.ms-row__identity {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		flex: 1;
+		min-width: 0;
+	}
+
+	.ms-row__name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ms-link-btn,
+	.ms-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		background: none;
+		border: none;
+		color: var(--color-text);
+		cursor: pointer;
+		min-width: 0;
+		padding: 0;
+	}
+
+	.ms-chip--link {
+		padding: var(--space-1) var(--space-2);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-pill, 999px);
+	}
+
+	.ms-chip--locked {
+		color: var(--color-accent);
+	}
+
+	.ms-arrow {
+		color: var(--color-text-muted);
+	}
+
+	/* Role pill */
+	.ms-role {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		padding: var(--space-1) var(--space-2);
+		border-radius: var(--radius-pill, 999px);
+		font-size: var(--text-sm);
+		background: var(--color-bg-muted);
+		color: var(--color-text-secondary);
+		flex: none;
+	}
+
+	.ms-role--admin {
+		background: var(--color-warning-bg, var(--color-bg-muted));
+		color: var(--color-warning-text-amber, var(--color-text-secondary));
+	}
+
+	.ms-role--editor {
+		background: var(--color-accent-bg, var(--color-bg-muted));
+		color: var(--color-accent-text, var(--color-text-secondary));
+	}
+
+	/* Expiry chip tiers */
+	.ms-expiry {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		padding: var(--space-1) var(--space-2);
+		border-radius: var(--radius-pill, 999px);
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+		background: var(--color-bg-muted);
+		flex: none;
+	}
+
+	.ms-expiry--soon {
+		color: var(--color-warning-text-amber, var(--color-text-secondary));
+		background: var(--color-warning-bg, var(--color-bg-muted));
+	}
+
+	.ms-expiry--expired {
+		color: var(--color-danger-text);
+		background: var(--color-danger-bg, var(--color-bg-muted));
+	}
+
+	/* Kebab + menu */
+	.ms-kebab {
+		position: relative;
+		flex: none;
+	}
+
+	.btn-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+	}
+
+	.btn-icon:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.ms-menu {
+		position: absolute;
+		right: 0;
+		top: 100%;
+		z-index: 50;
+		min-width: 14rem;
+		margin-top: var(--space-1);
+		padding: var(--space-1);
+		background: var(--color-bg-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		box-shadow: var(--shadow-lg);
+	}
+
+	.ms-menu__item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		width: 100%;
+		padding: var(--space-2) var(--space-3);
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--color-text);
+		text-align: left;
+		cursor: pointer;
+	}
+
+	.ms-menu__item:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.ms-menu__item--current {
+		font-weight: var(--weight-semibold, 600);
+	}
+
+	.ms-menu__item--danger {
+		color: var(--color-danger-text);
+	}
+
+	.ms-menu__sep {
+		height: 1px;
+		margin: var(--space-1) 0;
+		background: var(--color-border);
+	}
+
+	.ms-menu__field {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-2);
+		padding: var(--space-2) var(--space-3);
+	}
+
+	.ms-menu__label {
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+	}
+
+	.ms-menu__date {
+		padding: var(--space-1) var(--space-2);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+		font-size: var(--text-sm);
+	}
+
+	.ms-more {
+		margin: var(--space-3) auto 0;
+	}
+
+	.empty-state__hint {
+		color: var(--color-text-muted);
+		font-size: var(--text-sm);
+	}
+
+	.empty-state :global(.empty-state-icon) {
+		font-size: var(--text-5xl);
+		color: var(--color-text-faint);
+		margin-bottom: var(--space-2);
+	}
+
+	.empty-state :global(.empty-state-icon--error) {
+		color: var(--color-danger-text);
 	}
 </style>
diff --git a/frontend/src/routes/trash/+page.svelte b/frontend/src/routes/trash/+page.svelte
index cb59a99a..a1d4f0c0 100644
--- a/frontend/src/routes/trash/+page.svelte
+++ b/frontend/src/routes/trash/+page.svelte
@@ -1,62 +1,146 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import FileRow from '$lib/components/FileRow.svelte';
-	import ResourceListShell from '$lib/components/ResourceListShell.svelte';
 	import {
 		deleteTrashItem,
 		emptyTrash,
+		expiryChip,
 		fetchTrashPage,
+		remainingDaysBucket,
 		restoreTrashItem
 	} from '$lib/api/endpoints/trash';
-	import type { TrashResourceItem } from '$lib/api/types';
+	import { dateBucket, sizeBucket, typeLabel } from '$lib/api/endpoints/favorites';
+	import type { FileItem, TrashResourceItem } from '$lib/api/types';
+	import Icon from '$lib/icons/Icon.svelte';
+	import ResourceList, {
+		type GroupByDef,
+		type ResourceEntry
+	} from '$lib/components/ResourceList.svelte';
+	import { confirmDialog } from '$lib/stores/dialogs.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
-	import { formatDate } from '$lib/utils/display';
 
-	let items = $state<TrashResourceItem[]>([]);
+	let raw = $state<TrashResourceItem[]>([]);
 	let cursor = $state<string | undefined>(undefined);
 	let loading = $state(false);
 	let error = $state<string | null>(null);
+	// Default: items expiring soonest first, grouped by remaining days.
+	let groupBy = $state('remainingDays');
+	let reversed = $state(false);
 
-	async function load(reset = false) {
+	const entries = $derived(
+		raw.map((it): ResourceEntry => {
+			const isFile = it.resource_type === 'file';
+			return {
+				id: it.resource.id,
+				name: it.resource.name,
+				kind: it.resource_type,
+				iconClass: it.resource.icon_class,
+				path: it.resource.path,
+				size: isFile ? (it.resource as FileItem).size : null,
+				// `date` carries the deletion date — rendered as an expiry chip.
+				date: it.deletion_date,
+				category: isFile ? it.resource.category : 'Folder',
+				modifiedAt: it.trashed_at
+			};
+		})
+	);
+
+	const groupBys: GroupByDef[] = [
+		{ key: '', label: t('files.name', 'Name'), orderBy: 'name' },
+		{
+			key: 'remainingDays',
+			label: t('trash.groupby.remaining_days', 'Remaining days'),
+			orderBy: 'deletion_date',
+			bucketOf: (e) => remainingDaysBucket(e.date)
+		},
+		{
+			key: 'type',
+			label: t('groupby.type', 'Type'),
+			orderBy: 'type',
+			bucketOf: (e) => e.category ?? 'other',
+			labelOf: (k) => typeLabel(k)
+		},
+		{
+			key: 'size',
+			label: t('groupby.size', 'Size'),
+			orderBy: 'size',
+			bucketOf: (e) => sizeBucket(e.kind === 'folder' ? null : e.size)
+		},
+		{
+			key: 'trashedTime',
+			label: t('trash.groupby.trashed_time', 'Trashed time'),
+			orderBy: 'trashed_at',
+			bucketOf: (e) => dateBucket(e.modifiedAt)
+		}
+	];
+
+	function orderByForGroup(): string {
+		return groupBys.find((g) => g.key === groupBy)?.orderBy ?? 'deletion_date';
+	}
+
+	async function load(reset = false, orderBy = 'deletion_date', rev = reversed) {
 		loading = true;
 		error = null;
 		try {
-			const page = await fetchTrashPage({ cursor: reset ? undefined : cursor });
-			items = reset ? page.items : [...items, ...page.items];
+			const page = await fetchTrashPage({
+				cursor: reset ? undefined : cursor,
+				orderBy,
+				reverse: rev,
+				resourceTypes: ['file', 'folder']
+			});
+			raw = reset ? page.items : [...raw, ...page.items];
 			cursor = page.next_cursor;
 		} catch (e) {
-			error = e instanceof Error ? e.message : String(e);
+			console.error('trash: load error', e);
+			error = t('errors_loadFailed', 'Failed to load items');
 		} finally {
 			loading = false;
 		}
 	}
 
-	async function restore(item: TrashResourceItem) {
+	/** Re-fetch from the top so pagination + grouping stay correct after a mutation. */
+	async function reloadFromTop() {
+		cursor = undefined;
+		await load(true, orderByForGroup());
+	}
+
+	async function restore(entry: ResourceEntry) {
 		try {
-			await restoreTrashItem(item.resource.id);
-			items = items.filter((i) => i.resource.id !== item.resource.id);
+			await restoreTrashItem(entry.id);
 			ui.notify(t('trash.restored', 'Restored'), 'success');
+			await reloadFromTop();
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
 		}
 	}
 
-	async function purge(item: TrashResourceItem) {
-		if (!confirm(t('trash.confirm_delete', 'Permanently delete this item?'))) return;
+	async function purge(entry: ResourceEntry) {
+		const ok = await confirmDialog({
+			title: t('trash.delete', 'Delete permanently'),
+			message: t('trash.confirm_delete', 'Permanently delete this item? This cannot be undone.'),
+			confirmText: t('trash.delete', 'Delete'),
+			danger: true
+		});
+		if (!ok) return;
 		try {
-			await deleteTrashItem(item.resource.id);
-			items = items.filter((i) => i.resource.id !== item.resource.id);
+			await deleteTrashItem(entry.id);
+			await reloadFromTop();
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
 		}
 	}
 
 	async function purgeAll() {
-		if (!confirm(t('trash.confirm_empty', 'Empty the trash? This cannot be undone.'))) return;
+		const ok = await confirmDialog({
+			title: t('trash.empty_action', 'Empty trash'),
+			message: t('trash.confirm_empty', 'Empty the trash? This cannot be undone.'),
+			confirmText: t('trash.empty_action', 'Empty trash'),
+			danger: true
+		});
+		if (!ok) return;
 		try {
 			await emptyTrash();
-			items = [];
+			raw = [];
 			cursor = undefined;
 		} catch (e) {
 			ui.notify(e instanceof Error ? e.message : String(e), 'error');
@@ -68,60 +152,96 @@
 
 <svelte:head><title>{t('nav.trash', 'Trash')} · OxiCloud</title></svelte:head>
 
-<h1 class="page-title">{t('nav.trash', 'Trash')}</h1>
-
-<ResourceListShell
+<ResourceList
+	title={t('nav.trash', 'Trash')}
+	items={entries}
 	{loading}
 	{error}
-	empty={items.length === 0}
-	emptyText={t('trash.empty', 'Trash is empty.')}
+	emptyIcon="trash"
+	emptyText={t('trash.empty_state', 'Trash is empty')}
 	hasMore={!!cursor}
-	onloadmore={() => load(false)}
+	onloadmore={() => load(false, orderByForGroup())}
+	pathLabel={t('trash.original_location', 'Original location')}
+	dateLabel={t('trash.remaining', 'Remaining')}
+	{groupBys}
+	bind:groupBy
+	bind:reversed
+	onreload={(orderBy, rev) => {
+		cursor = undefined;
+		load(true, orderBy, rev);
+	}}
 >
 	{#snippet toolbar()}
-		{#if items.length > 0}
-			<button class="link-btn link-btn--danger" onclick={purgeAll}>
+		{#if entries.length > 0}
+			<button class="btn btn-danger" onclick={purgeAll}>
+				<Icon name="trash" />
 				{t('trash.empty_action', 'Empty trash')}
 			</button>
 		{/if}
 	{/snippet}
-
-	{#each items as item (item.resource.id)}
-		<FileRow
-			name={item.resource.name}
-			iconClass={item.resource.icon_class}
-			subtitle={item.resource.path}
-			date={formatDate(item.deletion_date)}
+	{#snippet dateCell(entry)}
+		{@const chip = expiryChip(entry.date)}
+		<span class="expiry-chip expiry-chip--{chip.tier}">
+			<Icon name={chip.icon} class="expiry-chip__icon" />
+			{chip.label}
+		</span>
+	{/snippet}
+	{#snippet actions(entry)}
+		<button class="btn-action" title={t('trash.restore', 'Restore')} onclick={() => restore(entry)}>
+			<Icon name="undo" />
+		</button>
+		<button
+			class="btn-action btn-action--delete"
+			title={t('trash.delete', 'Delete permanently')}
+			onclick={() => purge(entry)}
 		>
-			{#snippet actions()}
-				<button class="link-btn" onclick={() => restore(item)}>
-					{t('trash.restore', 'Restore')}
-				</button>
-				<button class="link-btn link-btn--danger" onclick={() => purge(item)}>
-					{t('trash.delete', 'Delete')}
-				</button>
-			{/snippet}
-		</FileRow>
-	{/each}
-</ResourceListShell>
+			<Icon name="trash" />
+		</button>
+	{/snippet}
+</ResourceList>
 
 <style>
-	.page-title {
-		margin: 0;
-		padding: 1rem 1rem 0;
-		font-size: 1.5rem;
-		color: var(--color-text-heading);
+	/* Tiered expiry chip — ported from static/css expiryChip styles. */
+	.expiry-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		padding: var(--space-1) var(--space-2);
+		border-radius: var(--radius-pill, var(--radius-md));
+		font-size: var(--text-xs);
+		font-weight: var(--weight-medium, 500);
+		white-space: nowrap;
+		background: var(--color-bg-muted);
+		color: var(--color-text-secondary);
 	}
 
-	.link-btn {
-		background: none;
-		border: none;
-		color: var(--color-primary);
-		cursor: pointer;
-		font-size: 0.875rem;
+	.expiry-chip :global(.expiry-chip__icon) {
+		font-size: 0.85em;
 	}
 
-	.link-btn--danger {
+	.expiry-chip--never {
+		background: var(--color-bg-muted);
+		color: var(--color-text-faint);
+	}
+
+	.expiry-chip--caution {
+		background: var(--color-warning-bg);
+		color: var(--color-warning-text-amber);
+	}
+
+	.expiry-chip--soon {
+		background: var(--color-warning-orange-bg);
+		color: var(--color-warning-text-orange);
+	}
+
+	.expiry-chip--urgent {
+		background: var(--color-danger-bg);
 		color: var(--color-danger-text);
 	}
+
+	.expiry-chip--expired {
+		background: var(--color-danger-bg);
+		color: var(--color-danger-text);
+		font-weight: var(--weight-semibold);
+	}
 </style>
diff --git a/frontend/static/vendors/hash-wasm/oxicloud_hash_wasm.js b/frontend/static/vendors/hash-wasm/oxicloud_hash_wasm.js
new file mode 100644
index 00000000..b706d36b
--- /dev/null
+++ b/frontend/static/vendors/hash-wasm/oxicloud_hash_wasm.js
@@ -0,0 +1,343 @@
+/**
+ * Incremental BLAKE3 hasher.
+ *
+ * ```js
+ * const h = new Blake3Hasher();
+ * h.update(chunkBytes);   // repeat per slice
+ * const hex = h.finalizeHex();
+ * ```
+ */
+export class Blake3Hasher {
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        Blake3HasherFinalization.unregister(this);
+        return ptr;
+    }
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_blake3hasher_free(ptr, 0);
+    }
+    /**
+     * Bytes hashed so far — lets the worker report progress without
+     * tracking its own counter.
+     * @returns {number}
+     */
+    count() {
+        const ret = wasm.blake3hasher_count(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Finish and return the lowercase hex digest (64 chars). The hasher
+     * can keep receiving `update` calls afterwards (BLAKE3 finalization
+     * is non-destructive), but the frontend treats it as terminal.
+     * @returns {string}
+     */
+    finalizeHex() {
+        let deferred1_0;
+        let deferred1_1;
+        try {
+            const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+            wasm.blake3hasher_finalizeHex(retptr, this.__wbg_ptr);
+            var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
+            var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
+            deferred1_0 = r0;
+            deferred1_1 = r1;
+            return getStringFromWasm0(r0, r1);
+        } finally {
+            wasm.__wbindgen_add_to_stack_pointer(16);
+            wasm.__wbindgen_export2(deferred1_0, deferred1_1, 1);
+        }
+    }
+    /**
+     * Create a fresh hasher.
+     */
+    constructor() {
+        const ret = wasm.blake3hasher_new();
+        this.__wbg_ptr = ret;
+        Blake3HasherFinalization.register(this, this.__wbg_ptr, this);
+        return this;
+    }
+    /**
+     * Feed one slice of the file.
+     * @param {Uint8Array} data
+     */
+    update(data) {
+        const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_export);
+        const len0 = WASM_VECTOR_LEN;
+        wasm.blake3hasher_update(this.__wbg_ptr, ptr0, len0);
+    }
+}
+if (Symbol.dispose) Blake3Hasher.prototype[Symbol.dispose] = Blake3Hasher.prototype.free;
+
+/**
+ * Incremental FastCDC chunker + whole-file BLAKE3, for the delta-upload
+ * worker. Feed the file in slices; every call returns the chunks that
+ * became FINAL; `finish()` flushes the tail and returns the file hash.
+ *
+ * ```js
+ * const c = new DeltaChunker();
+ * for (const slice of slices) {
+ *     for (const [h, s] of JSON.parse(c.update(bytes))) { … }
+ * }
+ * const { chunks, file_hash } = JSON.parse(c.finish());
+ * ```
+ *
+ * Correctness of the incremental split: FastCDC decides each cut by
+ * scanning at most `CDC_MAX_CHUNK` bytes from the chunk's start. When
+ * the chunker runs over the buffered prefix of a longer file, every
+ * produced chunk except the LAST ended on a content/max-size condition
+ * — its decision window was fully available, so the full-file chunker
+ * makes the same cut. Only the last chunk (cut by "end of buffer") is
+ * provisional: it stays buffered and is re-examined when more bytes
+ * arrive. By induction the emitted boundaries equal a single FastCDC
+ * pass over the whole file — the mirror test below proves it.
+ */
+export class DeltaChunker {
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        DeltaChunkerFinalization.unregister(this);
+        return ptr;
+    }
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_deltachunker_free(ptr, 0);
+    }
+    /**
+     * Flush the provisional tail and return
+     * `{"chunks":[["<hex>",size]…],"file_hash":"<hex>","total":N}`.
+     * `chunks` holds at most one entry (the tail); an empty file has none
+     * and its `file_hash` is BLAKE3 of the empty input.
+     * @returns {string}
+     */
+    finish() {
+        let deferred1_0;
+        let deferred1_1;
+        try {
+            const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+            wasm.deltachunker_finish(retptr, this.__wbg_ptr);
+            var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
+            var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
+            deferred1_0 = r0;
+            deferred1_1 = r1;
+            return getStringFromWasm0(r0, r1);
+        } finally {
+            wasm.__wbindgen_add_to_stack_pointer(16);
+            wasm.__wbindgen_export2(deferred1_0, deferred1_1, 1);
+        }
+    }
+    /**
+     * Create a chunker with the server's CDC parameters.
+     */
+    constructor() {
+        const ret = wasm.deltachunker_new();
+        this.__wbg_ptr = ret;
+        DeltaChunkerFinalization.register(this, this.__wbg_ptr, this);
+        return this;
+    }
+    /**
+     * Feed one slice. Returns a JSON array of the chunks that became
+     * final: `[["<blake3-hex>", size], …]` (possibly empty).
+     * @param {Uint8Array} data
+     * @returns {string}
+     */
+    update(data) {
+        let deferred2_0;
+        let deferred2_1;
+        try {
+            const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+            const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_export);
+            const len0 = WASM_VECTOR_LEN;
+            wasm.deltachunker_update(retptr, this.__wbg_ptr, ptr0, len0);
+            var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
+            var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
+            deferred2_0 = r0;
+            deferred2_1 = r1;
+            return getStringFromWasm0(r0, r1);
+        } finally {
+            wasm.__wbindgen_add_to_stack_pointer(16);
+            wasm.__wbindgen_export2(deferred2_0, deferred2_1, 1);
+        }
+    }
+}
+if (Symbol.dispose) DeltaChunker.prototype[Symbol.dispose] = DeltaChunker.prototype.free;
+
+/**
+ * One-shot convenience for small buffers.
+ * @param {Uint8Array} data
+ * @returns {string}
+ */
+export function blake3Hex(data) {
+    let deferred2_0;
+    let deferred2_1;
+    try {
+        const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+        const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_export);
+        const len0 = WASM_VECTOR_LEN;
+        wasm.blake3Hex(retptr, ptr0, len0);
+        var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
+        var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
+        deferred2_0 = r0;
+        deferred2_1 = r1;
+        return getStringFromWasm0(r0, r1);
+    } finally {
+        wasm.__wbindgen_add_to_stack_pointer(16);
+        wasm.__wbindgen_export2(deferred2_0, deferred2_1, 1);
+    }
+}
+function __wbg_get_imports() {
+    const import0 = {
+        __proto__: null,
+        __wbg___wbindgen_throw_bbadd78c1bac3a77: function(arg0, arg1) {
+            throw new Error(getStringFromWasm0(arg0, arg1));
+        },
+    };
+    return {
+        __proto__: null,
+        "./oxicloud_hash_wasm_bg.js": import0,
+    };
+}
+
+const Blake3HasherFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_blake3hasher_free(ptr, 1));
+const DeltaChunkerFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_deltachunker_free(ptr, 1));
+
+let cachedDataViewMemory0 = null;
+function getDataViewMemory0() {
+    if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
+        cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+    }
+    return cachedDataViewMemory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    return decodeText(ptr >>> 0, len);
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1, 1) >>> 0;
+    getUint8ArrayMemory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+let WASM_VECTOR_LEN = 0;
+
+let wasmModule, wasmInstance, wasm;
+function __wbg_finalize_init(instance, module) {
+    wasmInstance = instance;
+    wasm = instance.exports;
+    wasmModule = module;
+    cachedDataViewMemory0 = null;
+    cachedUint8ArrayMemory0 = null;
+    return wasm;
+}
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+            } catch (e) {
+                const validResponse = module.ok && expectedResponseType(module.type);
+
+                if (validResponse && module.headers.get('Content-Type') !== 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else { throw e; }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+        } else {
+            return instance;
+        }
+    }
+
+    function expectedResponseType(type) {
+        switch (type) {
+            case 'basic': case 'cors': case 'default': return true;
+        }
+        return false;
+    }
+}
+
+function initSync(module) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (module !== undefined) {
+        if (Object.getPrototypeOf(module) === Object.prototype) {
+            ({module} = module)
+        } else {
+            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
+        }
+    }
+
+    const imports = __wbg_get_imports();
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+    const instance = new WebAssembly.Instance(module, imports);
+    return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(module_or_path) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (module_or_path !== undefined) {
+        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+            ({module_or_path} = module_or_path)
+        } else {
+            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
+        }
+    }
+
+    if (module_or_path === undefined) {
+        module_or_path = new URL('oxicloud_hash_wasm_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
+        module_or_path = fetch(module_or_path);
+    }
+
+    const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+export { initSync, __wbg_init as default };
diff --git a/frontend/static/vendors/hash-wasm/oxicloud_hash_wasm_bg.wasm b/frontend/static/vendors/hash-wasm/oxicloud_hash_wasm_bg.wasm
new file mode 100644
index 00000000..66b6097f
Binary files /dev/null and b/frontend/static/vendors/hash-wasm/oxicloud_hash_wasm_bg.wasm differ
diff --git a/frontend/static/workers/deltaWorker.js b/frontend/static/workers/deltaWorker.js
new file mode 100644
index 00000000..803194bd
--- /dev/null
+++ b/frontend/static/workers/deltaWorker.js
@@ -0,0 +1,330 @@
+/**
+ * OxiCloud — delta-upload worker ("upload only what changed").
+ *
+ * Runs the whole client side of the delta protocol off the main thread:
+ *
+ *   read 8 MiB slices ─► FastCDC chunk + BLAKE3 (WASM, same crate and
+ *   parameters as the server) ─► negotiate hash batches ─► upload only
+ *   the missing chunks (framed, bounded concurrency) ─► commit.
+ *
+ * The stages OVERLAP: negotiation of batch N and uploads of its missing
+ * chunks run while batch N+1 is still being hashed, so wall-clock time
+ * approaches max(hash time, upload time) instead of their sum. RAM stays
+ * flat: chunk bytes are re-sliced from the File at upload time, never
+ * hoarded.
+ *
+ * Protocol with the spawner:
+ *   in  : { file: File, folderId: string, name: string, csrfToken: string }
+ *   out : { type: 'progress', hashedBytes, reusedBytes, uploadedBytes, totalBytes }
+ *         { type: 'done', status, body }      — conclusive HTTP outcome
+ *         { type: 'fallback', reason }        — do a plain byte upload
+ */
+
+// Absolute URLs on purpose: vendors/workers are served verbatim in both
+// dev and the static build (served verbatim from /static).
+const WASM_GLUE_URL = '/vendors/hash-wasm/oxicloud_hash_wasm.js';
+
+/** File read granularity — large enough to amortize Blob→ArrayBuffer. */
+const SLICE_BYTES = 8 * 1024 * 1024;
+/** Negotiate after this many freshly hashed chunks (~64 MiB of content). */
+const NEGOTIATE_BATCH = 256;
+/** Group missing chunks into PUT bodies of at most this many bytes. */
+const UPLOAD_BATCH_BYTES = 8 * 1024 * 1024;
+/** Concurrent chunk-PUT requests. */
+const UPLOAD_CONCURRENCY = 2;
+/** Re-commit attempts when the server answers 409 still_missing. */
+const COMMIT_RETRIES = 2;
+
+/**
+ * Typed view of the dedicated-worker global scope (jsconfig targets the
+ * DOM lib, where `self` is a Window — cast to what this worker uses).
+ * @type {{ onmessage: ((event: MessageEvent) => void) | null,
+ *          postMessage: (message: unknown) => void }}
+ */
+const workerScope = /** @type {any} */ (self);
+
+/**
+ * One chunk occurrence, in file order.
+ * @typedef {{ h: string, s: number, offset: number }} WorkerChunk
+ */
+
+/** @returns {Promise<any>} the initialized WASM module */
+async function loadWasm() {
+    const mod = await import(WASM_GLUE_URL);
+    await mod.default();
+    return mod;
+}
+
+workerScope.onmessage = async (event) => {
+    const { file, folderId, name, csrfToken } = /** @type {{ file: File, folderId: string, name: string, csrfToken: string }} */ (event.data);
+
+    /** @param {string} reason */
+    const fallback = (reason) => workerScope.postMessage({ type: 'fallback', reason });
+
+    /** @type {Record<string, string>} */
+    const mutHeaders = { 'Content-Type': 'application/json' };
+    if (csrfToken) mutHeaders['X-CSRF-Token'] = csrfToken;
+
+    let wasm;
+    try {
+        wasm = await loadWasm();
+    } catch (err) {
+        fallback(`wasm unavailable: ${err instanceof Error ? err.message : String(err)}`);
+        return;
+    }
+
+    // ── Shared pipeline state ─────────────────────────────────────
+    /** @type {WorkerChunk[]} */
+    const chunks = []; // every occurrence, in file order
+    /** @type {Set<string>} */
+    const seenForNegotiate = new Set(); // distinct hashes already sent to negotiate
+    let reusedBytes = 0;
+    let uploadedBytes = 0;
+    let hashedBytes = 0;
+    let failed = /** @type {string | null} */ (null);
+
+    let lastProgress = 0;
+    const progress = (force = false) => {
+        const now = Date.now();
+        if (!force && now - lastProgress < 150) return;
+        lastProgress = now;
+        workerScope.postMessage({
+            type: 'progress',
+            hashedBytes,
+            reusedBytes,
+            uploadedBytes,
+            totalBytes: file.size
+        });
+    };
+
+    // ── Upload stage: bounded-concurrency drain of uploadByHash ──
+    /** @type {WorkerChunk[]} */
+    const uploadQueue = [];
+    /** @type {Promise<void>[]} */
+    const uploadWorkers = [];
+    let uploadsClosed = false;
+    /** @type {(() => void) | null} */
+    let wakeUploader = null;
+    const signalUploaders = () => {
+        if (wakeUploader) {
+            const w = wakeUploader;
+            wakeUploader = null;
+            w();
+        }
+    };
+
+    /** Encode a batch of chunks as [u32 BE len][bytes] frames. */
+    const encodeFrames = async (/** @type {WorkerChunk[]} */ batch) => {
+        const total = batch.reduce((n, c) => n + 4 + c.s, 0);
+        const wire = new Uint8Array(total);
+        const view = new DataView(wire.buffer);
+        let at = 0;
+        for (const c of batch) {
+            // eslint-disable-next-line no-await-in-loop -- sequential by design: constant RAM
+            const bytes = new Uint8Array(await file.slice(c.offset, c.offset + c.s).arrayBuffer());
+            view.setUint32(at, c.s, false);
+            wire.set(bytes, at + 4);
+            at += 4 + c.s;
+        }
+        return wire;
+    };
+
+    const uploadLoop = async () => {
+        while (!failed) {
+            // Take up to UPLOAD_BATCH_BYTES from the queue.
+            /** @type {WorkerChunk[]} */
+            const batch = [];
+            let bytes = 0;
+            while (uploadQueue.length > 0 && bytes < UPLOAD_BATCH_BYTES) {
+                const c = /** @type {WorkerChunk} */ (uploadQueue.shift());
+                batch.push(c);
+                bytes += c.s;
+            }
+            if (batch.length === 0) {
+                if (uploadsClosed) return;
+                // eslint-disable-next-line no-await-in-loop -- queue wait
+                await new Promise((resolve) => {
+                    wakeUploader = /** @type {() => void} */ (resolve);
+                });
+                continue;
+            }
+            try {
+                // eslint-disable-next-line no-await-in-loop -- bounded by pool size
+                const wire = await encodeFrames(batch);
+                // eslint-disable-next-line no-await-in-loop -- bounded by pool size
+                const response = await fetch('/api/files/delta/chunks', {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/octet-stream',
+                        ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {})
+                    },
+                    body: wire
+                });
+                if (!response.ok) {
+                    failed = `chunk PUT failed (HTTP ${response.status})`;
+                    return;
+                }
+                for (const c of batch) uploadedBytes += c.s;
+                progress();
+            } catch (err) {
+                failed = `chunk PUT failed: ${err instanceof Error ? err.message : String(err)}`;
+                return;
+            }
+        }
+    };
+    for (let i = 0; i < UPLOAD_CONCURRENCY; i++) uploadWorkers.push(uploadLoop());
+
+    // ── Negotiate stage ───────────────────────────────────────────
+    /** @type {Promise<void>[]} */
+    const negotiations = [];
+    const negotiate = (/** @type {WorkerChunk[]} */ fresh) => {
+        if (fresh.length === 0 || failed) return;
+        negotiations.push(
+            (async () => {
+                try {
+                    const response = await fetch('/api/files/delta/negotiate', {
+                        method: 'POST',
+                        headers: mutHeaders,
+                        body: JSON.stringify({ chunks: fresh.map(({ h, s }) => ({ h, s })) })
+                    });
+                    if (!response.ok) {
+                        failed = failed || `negotiate failed (HTTP ${response.status})`;
+                        return;
+                    }
+                    const missing = new Set(/** @type {{missing: string[]}} */ (await response.json()).missing);
+                    for (const c of fresh) {
+                        if (missing.has(c.h)) {
+                            uploadQueue.push(c);
+                        } else {
+                            reusedBytes += c.s;
+                        }
+                    }
+                    signalUploaders();
+                    progress();
+                } catch (err) {
+                    failed = failed || `negotiate failed: ${err instanceof Error ? err.message : String(err)}`;
+                }
+            })()
+        );
+    };
+
+    // ── Chunking stage (drives the other two) ────────────────────
+    try {
+        const chunker = new wasm.DeltaChunker();
+        /** @type {WorkerChunk[]} */
+        let freshBatch = [];
+        let offset = 0;
+
+        /** @param {[string, number][]} emitted */
+        const onChunks = (emitted) => {
+            for (const [h, s] of emitted) {
+                /** @type {WorkerChunk} */
+                const chunk = { h, s, offset };
+                offset += s;
+                chunks.push(chunk);
+                if (seenForNegotiate.has(h)) {
+                    // Repeated content inside the same file: the first
+                    // occurrence decides upload vs reuse; later ones are
+                    // pure reuse for accounting.
+                    reusedBytes += s;
+                } else {
+                    seenForNegotiate.add(h);
+                    freshBatch.push(chunk);
+                    if (freshBatch.length >= NEGOTIATE_BATCH) {
+                        negotiate(freshBatch);
+                        freshBatch = [];
+                    }
+                }
+            }
+        };
+
+        for (let read = 0; read < file.size && !failed; read += SLICE_BYTES) {
+            const end = Math.min(read + SLICE_BYTES, file.size);
+            // eslint-disable-next-line no-await-in-loop -- sequential by design: constant RAM
+            const slice = new Uint8Array(await file.slice(read, end).arrayBuffer());
+            onChunks(JSON.parse(chunker.update(slice)));
+            hashedBytes = end;
+            progress();
+        }
+        const fin = JSON.parse(chunker.finish());
+        chunker.free();
+        onChunks(fin.chunks);
+        negotiate(freshBatch);
+        const fileHash = /** @type {string} */ (fin.file_hash);
+        hashedBytes = file.size;
+        progress(true);
+
+        // ── Drain: negotiations → uploads → commit ───────────────
+        await Promise.all(negotiations);
+        uploadsClosed = true;
+        signalUploaders();
+        await Promise.all(uploadWorkers);
+        if (failed) {
+            fallback(failed);
+            return;
+        }
+
+        const commitBody = {
+            file_hash: fileHash,
+            chunks: chunks.map(({ h, s }) => ({ h, s })),
+            name,
+            folder_id: folderId
+        };
+        for (let attempt = 0; ; attempt++) {
+            // eslint-disable-next-line no-await-in-loop -- retry loop
+            const response = await fetch('/api/files/delta/commit', {
+                method: 'POST',
+                headers: mutHeaders,
+                body: JSON.stringify(commitBody)
+            });
+            /** @type {any} */
+            let body = null;
+            try {
+                // eslint-disable-next-line no-await-in-loop -- retry loop
+                body = await response.json();
+            } catch (_) {}
+
+            const stillMissing = response.status === 409 && Array.isArray(body?.still_missing);
+            if (stillMissing && attempt < COMMIT_RETRIES) {
+                // GC race or a chunk we wrongly assumed claimable: upload
+                // exactly what the server names and try again.
+                const byHash = new Map(chunks.map((c) => [c.h, c]));
+                /** @type {WorkerChunk[]} */
+                const retry = [];
+                for (const h of body.still_missing) {
+                    const c = byHash.get(h);
+                    if (!c) {
+                        fallback('server requested an unknown chunk');
+                        return;
+                    }
+                    retry.push(c);
+                }
+                const wire = await encodeFrames(retry);
+                // eslint-disable-next-line no-await-in-loop -- retry loop
+                const put = await fetch('/api/files/delta/chunks', {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/octet-stream',
+                        ...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {})
+                    },
+                    body: wire
+                });
+                if (!put.ok) {
+                    fallback(`retry chunk PUT failed (HTTP ${put.status})`);
+                    return;
+                }
+                for (const c of retry) uploadedBytes += c.s;
+                progress(true);
+                continue;
+            }
+
+            // Conclusive: 201 created, or a real error (quota, name
+            // conflict, validation). The spawner maps it to the uploaders'
+            // UploadAnswer contract.
+            workerScope.postMessage({ type: 'done', status: response.status, body });
+            return;
+        }
+    } catch (err) {
+        fallback(err instanceof Error ? err.message : String(err));
+    }
+};
diff --git a/justfile b/justfile
index b931dbf7..70c819b7 100644
--- a/justfile
+++ b/justfile
@@ -156,7 +156,7 @@ api-test:
     bash tests/webdav/run.sh
 
 # ---------------------------------------------------------------------------
-# New SvelteKit frontend (frontend/). The legacy vanilla frontend (static/)
+# New SvelteKit frontend (frontend/). The original vanilla frontend (static/)
 # and its `front-*` recipes remain until the Phase 5 cutover; these `fe-*`
 # recipes drive the rewrite in the meantime.
 # ---------------------------------------------------------------------------