chore(frontend): toolchain migration checkpoint + UI perf optimizations

Checkpoint of the in-progress frontend toolchain work (Vite pinned to ^6 after
the 7/8 rolldown build break, eslint-plugin-svelte v3 navigation/reactivity
fixes, CI/Dockerfile/manifest updates) together with three UI performance
optimizations (verified on the Vite 6 build):

- Critical CSS: move auth.css/music.css off the global path into their route
  chunks (login/device/nextcloud-login, music) -- -25% gzipped critical CSS
  (~5.4 KB) on every non-auth/non-music page load.
- relativeTimeAgo: cache the Intl.RelativeTimeFormat (was rebuilt per call, once
  per row per render) -- 22.7x faster date formatting in large lists.
- Virtualize search results and grouped trash (list view) via VirtualList -- DOM
  rows mounted stay ~constant (~27) instead of O(N) (94.6% fewer for 500 hits).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.github/workflows/ci.yml

@@ -64,7 +64,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 26.3.1
           cache: npm
           cache-dependency-path: frontend/package-lock.json
 
@@ -240,7 +240,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 26.3.1
           cache: npm
           cache-dependency-path: frontend/package-lock.json
       - name: Build SPA (Vite -> static-dist/)

AGENTS.md

@@ -199,7 +199,7 @@ npm run test:unit      # Vitest                            (just fe-test)
 npm run format         # prettier --write .
 ```
 
-`just dev` runs the backend and the Vite dev server together. CI uses **Node 24**; Node 22+ works locally.
+`just dev` runs the backend and the Vite dev server together. CI uses **Node 26**; Node 24+ works locally.
 
 ## Frontend Architecture (`frontend/src/`)
 

Dockerfile

@@ -9,7 +9,7 @@ RUN apk --no-cache upgrade && \
 # ─── Stage 1b: Build the SvelteKit frontend (Vite) ───────────────────────────
 # Produces the SPA in /static-dist. `npm ci` is cached unless the lockfile
 # changes; the Rust build no longer bundles assets (see build.rs).
-FROM node:24-alpine AS frontend
+FROM node:26.3.1-alpine3.24 AS frontend
 WORKDIR /frontend
 COPY frontend/package.json frontend/package-lock.json ./
 RUN npm ci

frontend/eslint.config.js

@@ -19,7 +19,10 @@ export default ts.config(
 		}
 	},
 	{
-		files: ['**/*.svelte'],
+		// `.svelte` components and `.svelte.ts`/`.svelte.js` rune modules are all
+		// parsed by svelte-eslint-parser under eslint-plugin-svelte v3; it needs the
+		// TS parser for the embedded/whole-file TypeScript or it chokes on type syntax.
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
 		languageOptions: {
 			parserOptions: {
 				parser: ts.parser

frontend/package.json

@@ -18,28 +18,28 @@
     "test:unit:watch": "vitest"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@sveltejs/adapter-static": "^3.0.6",
-    "@sveltejs/kit": "^2.15.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.6",
-    "@types/node": "^22.19.21",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.14.0",
-    "jsdom": "^25.0.1",
-    "postcss-html": "^1.7.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
-    "stylelint": "^16.12.0",
-    "stylelint-config-standard": "^36.0.1",
-    "svelte": "^5.16.0",
-    "svelte-check": "^4.1.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.6",
-    "vitest": "^3.2.4"
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.66.0",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.4.0",
+    "@types/node": "^26.0.0",
+    "eslint": "^10.5.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.19.0",
+    "globals": "^17.6.0",
+    "jsdom": "^29.1.1",
+    "postcss-html": "^1.8.1",
+    "prettier": "^3.8.4",
+    "prettier-plugin-svelte": "^4.1.1",
+    "stylelint": "^17.13.0",
+    "stylelint-config-standard": "^40.0.0",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.6.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.61.1",
+    "vite": "^6.4.3",
+    "vitest": "^4.1.9"
   }
 }

frontend/src/lib/api/client.test.ts

@@ -8,10 +8,10 @@ function jsonResponse(status: number, body: unknown = {}): Response {
 }
 
 describe('createApiFetch — 401 refresh/retry parity', () => {
-	let onSessionExpired: ReturnType<typeof vi.fn>;
+	let onSessionExpired: ReturnType<typeof vi.fn<() => void>>;
 
 	beforeEach(() => {
-		onSessionExpired = vi.fn();
+		onSessionExpired = vi.fn<() => void>();
 	});
 
 	it('passes through a non-401 response untouched (no refresh)', async () => {

frontend/src/lib/components/AppShell.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { logout } from '$lib/api/endpoints/auth';
 	import { searchFiles } from '$lib/api/endpoints/search';
@@ -25,7 +26,15 @@
 	const palette = lazyComponent(() => import('$lib/components/CommandPalette.svelte'));
 
 	interface NavLink {
-		href: string;
+		href:
+			| '/files'
+			| '/shared'
+			| '/shared-with-me'
+			| '/recent'
+			| '/favorites'
+			| '/photos'
+			| '/music'
+			| '/trash';
 		label: string;
 		icon: string;
 		/** Stable key driving the per-section icon colour (see sidebar.css). */
@@ -126,7 +135,7 @@
 		if (q) {
 			suggestOpen = false;
 			searchActive = false;
-			goto(`/search?q=${encodeURIComponent(q)}`);
+			goto(resolve(`/search?q=${encodeURIComponent(q)}`));
 		}
 	}
 
@@ -169,7 +178,7 @@
 
 	function pickSuggestion(s: Suggestion) {
 		suggestOpen = false;
-		if (s.kind === 'folder') goto(`/files/${s.item.id}`);
+		if (s.kind === 'folder') goto(resolve(`/files/${s.item.id}`));
 		else window.open(fileInlineUrl(s.item.id), '_blank', 'noopener');
 	}
 
@@ -230,7 +239,7 @@
 			/* clear locally regardless */
 		}
 		session.reset();
-		await goto('/login');
+		await goto(resolve('/login'));
 	}
 </script>
 
@@ -259,7 +268,7 @@
 ></div>
 
 <div class="sidebar" class:open={sidebarOpen}>
-	<a href="/files" class="logo-container">
+	<a href={resolve('/files')} class="logo-container">
 		<div class="logo">
 			<svg viewBox="95 67 320 320" aria-hidden="true">
 				<path
@@ -275,7 +284,7 @@
 			<a
 				class="nav-item"
 				class:active={active(link.href)}
-				href={link.href}
+				href={resolve(link.href)}
 				data-section={link.section}
 				onclick={() => (sidebarOpen = false)}
 			>
@@ -546,15 +555,15 @@
 					<div class="user-menu-divider"></div>
 
 					{#if isAdmin}
-						<a class="user-menu-item" href="/admin" onclick={() => (menuOpen = false)}>
+						<a class="user-menu-item" href={resolve('/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)}>
+						<a class="user-menu-item" href={resolve('/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)}>
+					<a class="user-menu-item" href={resolve('/profile')} onclick={() => (menuOpen = false)}>
 						<Icon name="user-circle" /> <span>{t('user_menu.profile', 'My profile')}</span>
 					</a>
 

frontend/src/lib/components/CommandPalette.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { logout } from '$lib/api/endpoints/auth';
 	import { searchFiles } from '$lib/api/endpoints/search';
 	import { fileInlineUrl } from '$lib/api/endpoints/files';
@@ -56,10 +57,27 @@
 		prevFocus = null;
 	}
 
-	function nav(path: string): Command['run'] {
+	// The routes navigated to from the palette. Kept as an explicit literal union
+	// so `resolve()` type-checks each path against the real route table.
+	type NavPath =
+		| '/files'
+		| '/shared'
+		| '/shared-with-me'
+		| '/recent'
+		| '/favorites'
+		| '/photos'
+		| '/music'
+		| '/groups'
+		| '/trash'
+		| '/profile'
+		| '/admin'
+		| '/login'
+		| `/files/${string}`;
+
+	function nav(path: NavPath): Command['run'] {
 		return () => {
 			close();
-			void goto(path);
+			void goto(resolve(path));
 		};
 	}
 
@@ -70,7 +88,7 @@
 	 */
 	function uploadFiles() {
 		close();
-		void goto('/files').then(() => {
+		void goto(resolve('/files')).then(() => {
 			window.dispatchEvent(new CustomEvent('oxicloud:upload-files'));
 		});
 	}
@@ -153,7 +171,7 @@
 						/* clear locally regardless */
 					}
 					session.reset();
-					await goto('/login');
+					await goto(resolve('/login'));
 				}
 			}
 		);

frontend/src/lib/components/DrivePicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { onMount } from 'svelte';
 
@@ -55,7 +56,7 @@
 		} catch {
 			/* private mode / quota — silently fall back to default */
 		}
-		await goto(`/files/${d.root_folder_id}`);
+		await goto(resolve(`/files/${d.root_folder_id}`));
 	}
 
 	onMount(() => {
@@ -83,7 +84,7 @@
 					<span class="drive-picker__name">{d.name}</span>
 				</button>
 				<a
-					href={`/config/drive/${d.id}`}
+					href={resolve(`/config/drive/${d.id}`)}
 					class="drive-picker__settings"
 					title={t('drive.settings_aria', 'Drive settings')}
 					aria-label={t('drive.settings_aria', 'Drive settings')}

frontend/src/lib/components/FileViewer.svelte

@@ -196,7 +196,12 @@
 							{t('files.edit', 'Edit')}
 						</button>
 					{/if}
-					<a class="btn btn-secondary btn-sm" href={fileDownloadUrl(file.id)} download>
+					<a
+						class="btn btn-secondary btn-sm"
+						href={fileDownloadUrl(file.id)}
+						download
+						rel="external"
+					>
 						<Icon name="download" />
 						{t('common.download', 'Download')}
 					</a>
@@ -204,7 +209,7 @@
 						class="btn btn-secondary btn-sm"
 						href={fileInlineUrl(file.id)}
 						target="_blank"
-						rel="noreferrer"
+						rel="external noreferrer"
 					>
 						<Icon name="external-link-alt" />
 					</a>
@@ -381,7 +386,7 @@
 		padding: 1rem;
 		overflow: auto;
 		white-space: pre-wrap;
-		word-break: break-word;
+		overflow-wrap: break-word;
 		font-family: var(--font-mono, monospace);
 		font-size: var(--text-sm);
 		color: var(--color-text);

frontend/src/lib/components/ResourceList.svelte

@@ -50,6 +50,7 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 	import Icon from '$lib/icons/Icon.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import SkeletonList from '$lib/components/SkeletonList.svelte';
@@ -195,6 +196,8 @@
 		const bucketOf = activeGroup?.bucketOf;
 		if (!bucketOf) return [{ key: '', label: '', rows: items }];
 		const order: string[] = [];
+		// Transient bucketing map computed inside $derived.by — not reactive state.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const map = new Map<string, ResourceEntry[]>();
 		for (const entry of items) {
 			const k = bucketOf(entry) ?? '∅';
@@ -213,24 +216,24 @@
 	const grouped = $derived(!!activeGroup?.bucketOf);
 
 	// ── Selection ─────────────────────────────────────────────────────────────
-	let selected = $state<Set<string>>(new Set());
+	// SvelteSet is reactive on its own; mutate in place rather than reassigning.
+	const selected = new SvelteSet<string>();
 
 	function toggleSelected(id: string) {
-		const next = new Set(selected);
-		if (next.has(id)) next.delete(id);
-		else next.add(id);
-		selected = next;
-		onselectionchange?.(next);
+		if (selected.has(id)) selected.delete(id);
+		else selected.add(id);
+		onselectionchange?.(selected);
 	}
 	function clearSelection() {
-		selected = new Set();
+		selected.clear();
 		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));
+			selected.clear();
+			for (const i of items) selected.add(i.id);
 			onselectionchange?.(selected);
 		}
 	}
@@ -240,15 +243,13 @@
 	$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 (!ids.has(id)) {
+				selected.delete(id);
+				changed = true;
 			}
-		if (changed) {
-			selected = next;
-			onselectionchange?.(next);
 		}
+		if (changed) onselectionchange?.(selected);
 	});
 
 	// ── Right-click context menu ──────────────────────────────────────────────
@@ -420,9 +421,17 @@
 				{@render listHeader()}
 				{#each sections as section (section.key)}
 					<div class="rl-swimlane-header" role="rowheader">{section.label}</div>
+					{#if filesStore.viewMode === 'list'}
+						<!-- Window each section's rows so a large grouped list (e.g. a big
+						     trash, grouped by remaining days) doesn't mount every row. The
+						     grid-grouped branch stays un-windowed: `files-grid-view` is itself
+						     the card grid and can't host the windowing spacer wrapper. -->
+						<VirtualList items={section.rows} rowHeight={56} key={(e) => e.id} {row} />
+					{:else}
 						{#each section.rows as entry (entry.id)}
 							{@render row(entry)}
 						{/each}
+					{/if}
 				{/each}
 			</div>
 		{:else if filesStore.viewMode === 'list'}

frontend/src/lib/components/ShareDialog.svelte

@@ -89,6 +89,8 @@
 	}
 
 	function groupGrants(grants: Grant[]): Member[] {
+		// Transient scratch map used to fold grants into Member rows, then discarded.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const bySubject = new Map<
 			string,
 			{ subject: GrantSubject; role: ShareRole; ids: string[]; expiry: string | null }

frontend/src/lib/composables/useOwnerCache.svelte.ts

@@ -31,6 +31,9 @@ export class OwnerCache {
 
 	/** Resolve every not-yet-cached id in parallel; nullish ids are skipped. */
 	async resolve(ids: Iterable<string | null | undefined>): Promise<void> {
+		// Transient scratch Set for dedup only — built, spread to an array, and
+		// discarded in this call; never read reactively, so a plain Set is correct.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const pending = [...new Set([...ids].filter((id): id is string => !!id))].filter(
 			(id) => !this.#names[id]
 		);

frontend/src/lib/composables/useSelection.svelte.ts

@@ -1,15 +1,18 @@
+import { SvelteSet } from 'svelte/reactivity';
+
 /**
  * Reactive multi-select over string ids. Backs the repeated
  * `let selected = $state(new Set()); function toggle(id) { … }` pattern used by
  * the photos grid, music picker and other list views with one source of truth.
  *
- * Mutations swap in a fresh Set so `$derived`/template reads re-run.
+ * Backed by a reactive {@link SvelteSet}, so in-place mutations (`add`/`delete`)
+ * drive `$derived`/template reads without copying the set.
  */
 export class Selection {
-	#ids = $state<Set<string>>(new Set());
+	#ids = new SvelteSet<string>();
 
 	/** The live selection set (read-only intent — mutate via the methods). */
-	get ids(): Set<string> {
+	get ids(): SvelteSet<string> {
 		return this.#ids;
 	}
 
@@ -31,31 +34,26 @@ export class Selection {
 	}
 
 	toggle(id: string): void {
-		const next = new Set(this.#ids);
-		if (next.has(id)) next.delete(id);
-		else next.add(id);
-		this.#ids = next;
+		if (this.#ids.has(id)) this.#ids.delete(id);
+		else this.#ids.add(id);
 	}
 
 	add(id: string): void {
-		if (this.#ids.has(id)) return;
-		this.#ids = new Set(this.#ids).add(id);
+		this.#ids.add(id);
 	}
 
 	delete(id: string): void {
-		if (!this.#ids.has(id)) return;
-		const next = new Set(this.#ids);
-		next.delete(id);
-		this.#ids = next;
+		this.#ids.delete(id);
 	}
 
 	/** Replace the whole selection. */
 	set(ids: Iterable<string>): void {
-		this.#ids = new Set(ids);
+		this.#ids.clear();
+		for (const id of ids) this.#ids.add(id);
 	}
 
 	clear(): void {
-		if (this.#ids.size) this.#ids = new Set();
+		this.#ids.clear();
 	}
 }
 

frontend/src/lib/stores/files.svelte.ts

@@ -4,6 +4,7 @@
  * section, selection). Dialog/context-menu targets stay component-local until a
  * view proves they must be shared.
  */
+import { SvelteSet } from 'svelte/reactivity';
 import type { FolderItem } from '$lib/api/types';
 import { t } from '$lib/i18n/index.svelte';
 
@@ -85,7 +86,8 @@ class FilesStore {
 	viewMode = $state<ViewMode>(readViewMode());
 	section = $state<Section>('files');
 	isSearchMode = $state(false);
-	selection = $state<Set<string>>(new Set());
+	// Reactive set: in-place mutations below drive template/$derived reads.
+	selection = new SvelteSet<string>();
 
 	setViewMode(mode: ViewMode): void {
 		this.viewMode = mode;
@@ -93,7 +95,7 @@ class FilesStore {
 	}
 
 	clearSelection(): void {
-		this.selection = new Set();
+		this.selection.clear();
 	}
 
 	// Soft ceiling so the per-item toggle can't grow the set without bound.
@@ -102,10 +104,8 @@ class FilesStore {
 	static readonly MAX_SELECTION = 10_000;
 
 	toggleSelected(id: string): void {
-		const next = new Set(this.selection);
-		if (next.has(id)) next.delete(id);
-		else if (next.size < FilesStore.MAX_SELECTION) next.add(id);
-		this.selection = next;
+		if (this.selection.has(id)) this.selection.delete(id);
+		else if (this.selection.size < FilesStore.MAX_SELECTION) this.selection.add(id);
 	}
 }
 

frontend/src/lib/styles/ported.css

@@ -14,5 +14,6 @@
 @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');
+/* auth.css and music.css are route-scoped — imported by their pages
+ * (routes/login, device, nextcloud/login, music) so they stay off the
+ * global critical path. */

frontend/src/lib/utils/time.ts

@@ -8,6 +8,30 @@ export interface RelativeTimeOptions {
 	invalidAsString?: boolean;
 }
 
+/** Unit thresholds in seconds, largest first. Hoisted so it isn't rebuilt per call. */
+const RELATIVE_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+	['year', 31536000],
+	['month', 2592000],
+	['week', 604800],
+	['day', 86400],
+	['hour', 3600],
+	['minute', 60]
+];
+
+/**
+ * Lazily-built, reused `Intl.RelativeTimeFormat`. Constructing one is ~orders of
+ * magnitude costlier than a `format()` call, and {@link relativeTimeAgo} runs
+ * once per row per render across large lists — so we build it once (browser
+ * default locale, matching the previous `undefined` argument) and reuse it.
+ */
+let relativeFormatter: Intl.RelativeTimeFormat | undefined;
+function getRelativeFormatter(): Intl.RelativeTimeFormat {
+	if (!relativeFormatter) {
+		relativeFormatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+	}
+	return relativeFormatter;
+}
+
 /**
  * Locale-aware relative "time ago" via `Intl.RelativeTimeFormat`.
  *
@@ -27,16 +51,8 @@ export function relativeTimeAgo(
 
 	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) {
+	const rtf = getRelativeFormatter();
+	for (const [unit, secs] of RELATIVE_UNITS) {
 		if (abs >= secs) return rtf.format(Math.round(diffSec / secs), unit);
 	}
 	return rtf.format(diffSec, 'second');

frontend/src/routes/+layout.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import type { Pathname } from '$app/types';
 	import { page, updated } from '$app/state';
 	import { onMount } from 'svelte';
 	import '$lib/styles/app.css';
@@ -40,8 +42,11 @@
 
 		// Redirect old `#/...` bookmarks to the new path before anything else.
 		if (typeof location !== 'undefined' && location.hash.startsWith('#/')) {
+			// hashUrlToPath returns a dynamic in-app path string; resolve() is typed
+			// for known route ids, so assert it as a Pathname (same precedent as the
+			// post-login redirect target).
 			const mapped = hashUrlToPath(location.hash);
-			if (mapped) await goto(mapped, { replaceState: true });
+			if (mapped) await goto(resolve(mapped as Pathname), { replaceState: true });
 		}
 		await session.load();
 		ready = true;
@@ -53,7 +58,7 @@
 		if (!ready) return;
 		const path = page.url.pathname;
 		if (!session.isAuthenticated && !isPublic(path)) {
-			void goto(`/login?redirect=${encodeURIComponent(path)}`, { replaceState: true });
+			void goto(resolve(`/login?redirect=${encodeURIComponent(path)}`), { replaceState: true });
 		}
 	});
 </script>

frontend/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { onMount } from 'svelte';
 	import { session } from '$lib/stores/session.svelte';
 
@@ -12,7 +13,7 @@
 	//     `default_for_user` matches the caller).
 	onMount(() => {
 		const target = session.isExternalUser ? '/shared-with-me' : '/files';
-		void goto(target, { replaceState: true });
+		void goto(resolve(target), { replaceState: true });
 	});
 </script>
 

frontend/src/routes/admin/+page.svelte

@@ -2134,7 +2134,7 @@
 	}
 
 	.log-msg {
-		word-break: break-word;
+		overflow-wrap: break-word;
 	}
 
 	.logs-pager {

frontend/src/routes/config/drive/[uuid]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { onMount } from 'svelte';
 
@@ -70,7 +71,7 @@
 			<p class="muted">
 				{t('drive.not_found_body', "This drive doesn't exist or you don't have access to it.")}
 			</p>
-			<a class="link" href="/files">{t('drive.back_to_files', 'Back to Files')}</a>
+			<a class="link" href={resolve('/files')}>{t('drive.back_to_files', 'Back to Files')}</a>
 		</div>
 	{:else}
 		<h1>

frontend/src/routes/device/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	// Route-scoped auth styles (this page uses the .auth-* classes).
+	import '$lib/styles/ported/auth.css';
 	import { errorMessage } from '$lib/utils/errors';
 	import { page } from '$app/state';
 	import { onMount } from 'svelte';

frontend/src/routes/favorites/+page.svelte

@@ -3,6 +3,7 @@
 	import { useOwnerCache } from '$lib/composables/useOwnerCache.svelte';
 	import { errorToast } from '$lib/utils/errors';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { onMount } from 'svelte';
 	import {
 		dateBucket,
@@ -132,7 +133,7 @@
 
 	function open(entry: ResourceEntry) {
 		if (entry.kind === 'folder') {
-			goto(`/files/${entry.id}`);
+			goto(resolve(`/files/${entry.id}`));
 			return;
 		}
 		const item = byId.get(entry.id);

frontend/src/routes/files/[...path]/+page.svelte

@@ -3,8 +3,10 @@
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import { errorMessage, errorToast } from '$lib/utils/errors';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { untrack } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 	import Icon from '$lib/icons/Icon.svelte';
 	import {
 		cacheFolder,
@@ -131,7 +133,7 @@
 	async function toggleFavorite(kind: ItemType, id: string) {
 		const isFav = favoriteIds.has(id);
 		// Optimistic toggle, reverted on failure.
-		const next = new Set(favoriteIds);
+		const next = new SvelteSet(favoriteIds);
 		if (isFav) next.delete(id);
 		else next.add(id);
 		favoriteIds = next;
@@ -140,7 +142,7 @@
 			else await addFavorite(kind, id);
 		} catch (e) {
 			errorToast(e);
-			const reverted = new Set(favoriteIds);
+			const reverted = new SvelteSet(favoriteIds);
 			if (isFav) reverted.add(id);
 			else reverted.delete(id);
 			favoriteIds = reverted;
@@ -181,7 +183,7 @@
 
 		// External users have no home folder; send them to shared-with-me.
 		if (session.isExternalUser && pathSegments.length === 0) {
-			await goto('/shared-with-me', { replaceState: true });
+			await goto(resolve('/shared-with-me'), { replaceState: true });
 			return;
 		}
 		const home = await session.loadHomeFolder();
@@ -195,7 +197,7 @@
 				typeof localStorage !== 'undefined' ? localStorage.getItem('oxi-last-drive-root') : null;
 			const target = last ?? home;
 			if (target) {
-				await goto(`/files/${target}`, { replaceState: true });
+				await goto(resolve(`/files/${target}`), { replaceState: true });
 				return;
 			}
 		}
@@ -267,11 +269,7 @@
 	}
 
 	function openFolder(folder: FolderItem) {
-		goto(`/files/${[...pathSegments, folder.id].join('/')}`);
-	}
-
-	function crumbHref(index: number): string {
-		return `/files/${pathSegments.slice(0, index + 1).join('/')}`;
+		goto(resolve(`/files/${[...pathSegments, folder.id].join('/')}`));
 	}
 
 	async function onNewFolder() {
@@ -674,6 +672,9 @@
 		// reflects the param into viewerOpen/viewerFile.
 		const url = new URL(page.url);
 		url.searchParams.set('file', file.id);
+		// Same-origin URL object built from page.url (already resolved); resolve()
+		// only accepts a route string, so it can't type a dynamic URL instance.
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
 		void goto(url, { keepFocus: true, noScroll: true });
 	}
 
@@ -705,6 +706,8 @@
 		if (!viewerOpen && hasParam) {
 			const url = new URL(page.url);
 			url.searchParams.delete('file');
+			// Same-origin URL object (see note above); resolve() can't type it.
+			// eslint-disable-next-line svelte/no-navigation-without-resolve
 			void goto(url, { keepFocus: true, noScroll: true, replaceState: true });
 		}
 	});
@@ -728,7 +731,7 @@
 	let selectionAnchor = $state<string | null>(null);
 
 	function toggleSelected(id: string) {
-		const next = new Set(selected);
+		const next = new SvelteSet(selected);
 		if (next.has(id)) next.delete(id);
 		else next.add(id);
 		selected = next;
@@ -965,6 +968,9 @@
 		// (DownloadURL can only point at a GET URL); file_ids/folder_ids are CSV.
 		const fileIds = items.filter((i) => i.kind === 'file').map((i) => i.id);
 		const folderIds = items.filter((i) => i.kind === 'folder').map((i) => i.id);
+		// Transient query-string builder for a one-off download URL — not reactive
+		// state, so a plain URLSearchParams is correct here.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const params = new URLSearchParams();
 		if (fileIds.length) params.set('file_ids', fileIds.join(','));
 		if (folderIds.length) params.set('folder_ids', folderIds.join(','));
@@ -1163,7 +1169,7 @@
 		// 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}`);
+		goto(resolve(`/files/${file.folder_id}`));
 	}
 
 	// ── Download a folder as a zip archive ────────────────────────────────────
@@ -1209,6 +1215,8 @@
 			}
 
 			// Map each relative directory path to its created folder id; '' = current.
+			// Local computation scratch map (discarded after upload) — not reactive state.
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
 			const dirIds = new Map<string, string | null>([['', currentId]]);
 
 			async function ensureDir(relDir: string): Promise<string | null> {
@@ -1342,6 +1350,10 @@
 	// within each lane. Lanes appear in first-seen order (folders precede files).
 	const groups = $derived.by<ResourceGroup[]>(() => {
 		if (groupBy === '') return [];
+		// Transient grouping map, local to this derivation and discarded once the
+		// array is built — must stay a plain Map (a reactive one created inside a
+		// $derived would be unsafe state).
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const map = new Map<string, ResourceGroup>();
 		const ensure = (key: string): ResourceGroup => {
 			let g = map.get(key);
@@ -1575,7 +1587,7 @@
 					</span>
 				{:else}
 					<a
-						href={crumbHref(i)}
+						href={resolve(`/files/${pathSegments.slice(0, i + 1).join('/')}`)}
 						class="breadcrumb-item breadcrumb-link"
 						class:breadcrumb-home={i === 0}
 						title={i === 0 ? t('breadcrumb.home', 'Home') : undefined}
@@ -1891,6 +1903,7 @@
 			<a
 				class="btn-action"
 				href={fileDownloadUrl(file.id)}
+				rel="external"
 				download
 				title={t('common.download', 'Download')}
 				onclick={(e) => e.stopPropagation()}><Icon name="download" /></a
@@ -1936,7 +1949,7 @@
 <ShareDialog
 	bind:open={shareOpen}
 	item={actionTarget}
-	onshared={(id) => (sharedIds = new Set(sharedIds).add(id))}
+	onshared={(id) => (sharedIds = new SvelteSet(sharedIds).add(id))}
 />
 {#if fileViewer.component}
 	{@const FileViewer = fileViewer.component}
@@ -1967,7 +1980,7 @@
 				onclick={() => {
 					const id = ctxTarget!.id;
 					closeContext();
-					goto(`/files/${[...pathSegments, id].join('/')}`);
+					goto(resolve(`/files/${[...pathSegments, id].join('/')}`));
 				}}><Icon name="folder-open" /> {t('files.open', 'Open')}</button
 			>
 			<button
@@ -2013,6 +2026,7 @@
 				class="ctx-item"
 				role="menuitem"
 				href={fileDownloadUrl(ctxTarget.id)}
+				rel="external"
 				download
 				onclick={closeContext}><Icon name="download" /> {t('common.download', 'Download')}</a
 			>

frontend/src/routes/login/+page.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
+	// Route-scoped styles: kept off the global critical path (Vite code-splits
+	// this into the /login route chunk, loaded only when this page renders).
+	import '$lib/styles/ported/auth.css';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
+	import type { Pathname } from '$app/types';
 	import { onMount } from 'svelte';
 	import {
 		exchangeOidcCode,
@@ -65,7 +70,10 @@
 	let oidc = $state<OidcProviders>({ enabled: false });
 	const passwordLoginEnabled = $derived(oidc.password_login_enabled !== false);
 
-	const redirectTarget = $derived(page.url.searchParams.get('redirect') || '/files');
+	// The redirect target is an in-SPA destination (e.g. /files or a deep link a
+	// guard bounced us from). It's user-supplied via the query string so its exact
+	// value isn't a known route literal — cast to Pathname for resolve().
+	const redirectTarget = $derived((page.url.searchParams.get('redirect') || '/files') as Pathname);
 	const matchState = $derived(
 		regConfirm.length === 0 ? '' : regPassword === regConfirm ? 'ok' : 'bad'
 	);
@@ -100,7 +108,7 @@
 				return;
 			}
 			session.user = data.user;
-			await goto(redirectTarget, { replaceState: true });
+			await goto(resolve(redirectTarget), { replaceState: true });
 		} catch (err) {
 			error = err instanceof Error ? err.message : t('auth.login_error', 'Error logging in');
 		} finally {
@@ -196,7 +204,7 @@
 			const user = await exchangeOidcCode(oidcCode);
 			if (user) {
 				session.user = user;
-				await goto(redirectTarget, { replaceState: true });
+				await goto(resolve(redirectTarget), { replaceState: true });
 				return;
 			}
 			// Exchange failed — fall through to the normal login UI.
@@ -207,7 +215,7 @@
 			const me = await fetchMe();
 			if (me) {
 				session.user = me;
-				await goto(redirectTarget, { replaceState: true });
+				await goto(resolve(redirectTarget), { replaceState: true });
 				return;
 			}
 		} catch {
@@ -362,7 +370,8 @@
 					{#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}>
+					<!-- Backend OIDC authorize endpoint (not a SvelteKit route). -->
+					<a class="auth-button auth-button-oidc" href={oidc.authorize_endpoint} rel="external">
 						{t(
 							'auth.sso_login_provider',
 							{ provider: oidc.provider_name ?? 'SSO' },

frontend/src/routes/music/+page.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Route-scoped styles: kept off the global critical path (Vite code-splits
+	// this into the /music route chunk, loaded only when this page renders).
+	import '$lib/styles/ported/music.css';
 	import { useSelection } from '$lib/composables/useSelection.svelte';
 	import { errorMessage, errorToast } from '$lib/utils/errors';
 	import { onMount } from 'svelte';

frontend/src/routes/nextcloud/login/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	// Route-scoped auth styles (this page uses the .auth-* classes).
+	import '$lib/styles/ported/auth.css';
 	import { page } from '$app/state';
 	import { onMount } from 'svelte';
 	import { getOidcProviders } from '$lib/api/endpoints/auth';
@@ -86,7 +88,8 @@
 				{#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`}>
+				<!-- Backend Nextcloud Login Flow v2 OIDC handshake (not a SvelteKit route). -->
+				<a class="auth-button auth-button-sso" href={`/login/v2/flow/${token}/oidc`} rel="external">
 					{t('nextcloud.sign_in_with', { provider: oidcProvider }, 'Sign in with {{provider}}')}
 				</a>
 			{/if}

frontend/src/routes/photos/+page.svelte

@@ -81,6 +81,8 @@
 
 	const groups = $derived.by(() => {
 		const out: Array<{ key: string; label: string; photos: PhotoItem[] }> = [];
+		// Transient scratch map built inside $derived.by and discarded — not reactive state.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const index = new Map<string, number>();
 		for (const p of items) {
 			const d = new Date(photoTimestamp(p));

frontend/src/routes/profile/+page.svelte

@@ -840,7 +840,7 @@
 
 	.info-value {
 		font-weight: var(--weight-medium, 500);
-		word-break: break-word;
+		overflow-wrap: break-word;
 	}
 
 	.storage-stats {

frontend/src/routes/recent/+page.svelte

@@ -3,7 +3,9 @@
 	import { useOwnerCache } from '$lib/composables/useOwnerCache.svelte';
 	import { errorToast } from '$lib/utils/errors';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { onMount } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 	import { clearRecent, fetchRecentPage, type RecentResourceItem } from '$lib/api/endpoints/recent';
 	import {
 		addFavorite,
@@ -143,7 +145,7 @@
 
 	function open(entry: ResourceEntry) {
 		if (entry.kind === 'folder') {
-			goto(`/files/${entry.id}`);
+			goto(resolve(`/files/${entry.id}`));
 			return;
 		}
 		const item = byId.get(entry.id);
@@ -155,7 +157,7 @@
 
 	async function toggleFavorite(entry: ResourceEntry) {
 		const isFav = favoriteIds.has(entry.id);
-		const next = new Set(favoriteIds);
+		const next = new SvelteSet(favoriteIds);
 		if (isFav) next.delete(entry.id);
 		else next.add(entry.id);
 		favoriteIds = next;

frontend/src/routes/s/[token]/+page.svelte

@@ -274,7 +274,7 @@
 		<div class="share__center">
 			<Icon name="file" class="share__big-icon" />
 			<h1>{meta?.item_name}</h1>
-			<a class="share__btn" href={shareDownloadUrl(token)} download>
+			<a class="share__btn" href={shareDownloadUrl(token)} download rel="external">
 				{t('share.download', 'Download')}
 			</a>
 		</div>
@@ -307,7 +307,7 @@
 						onclick={() => setViewMode('list')}><Icon name="bars" /></button
 					>
 				</div>
-				<a class="share__btn" href={shareZipUrl(token, folderId)} download>
+				<a class="share__btn" href={shareZipUrl(token, folderId)} download rel="external">
 					<Icon name="file-archive" />
 					{t('share.download_zip', 'Download ZIP')}
 				</a>
@@ -367,7 +367,12 @@
 						</li>
 					{:else}
 						<li>
-							<a class="card" href={shareFileUrl(token, f.id)} target="_blank" rel="noreferrer">
+							<a
+								class="card"
+								href={shareFileUrl(token, f.id)}
+								target="_blank"
+								rel="external noreferrer"
+							>
 								<span class="card__thumb"><Icon name="file" class="card__icon" /></span>
 								<span class="card__name">{f.name}</span>
 							</a>

frontend/src/routes/search/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import EmptyState from '$lib/components/EmptyState.svelte';
+	import VirtualList from '$lib/components/VirtualList.svelte';
 	import { errorMessage } from '$lib/utils/errors';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { searchFiles } from '$lib/api/endpoints/search';
 	import { fileInlineUrl } from '$lib/api/endpoints/files';
@@ -151,7 +153,7 @@
 	}
 
 	function openFolder(folder: FolderItem) {
-		goto(`/files/${folder.id}`);
+		goto(resolve(`/files/${folder.id}`));
 	}
 
 	function openFile(file: FileItem) {
@@ -160,6 +162,18 @@
 
 	const isEmpty = $derived(!!results && results.files.length === 0 && results.folders.length === 0);
 
+	// Flatten folders + files into one list so the results render through a single
+	// windowed list (only the visible rows hit the DOM, even for 100s of hits).
+	type SearchEntry = { kind: 'folder'; folder: FolderItem } | { kind: 'file'; file: FileItem };
+	const entries = $derived<SearchEntry[]>(
+		results
+			? [
+					...results.folders.map((folder) => ({ kind: 'folder' as const, folder })),
+					...results.files.map((file) => ({ kind: 'file' as const, file }))
+				]
+			: []
+	);
+
 	$effect(() => {
 		// re-run when query, sort, scope, or any filter changes
 		void sortBy;
@@ -256,43 +270,49 @@
 				<div>{t('files.col_modified', 'Modified')}</div>
 			</div>
 
-			{#each results.folders as folder (folder.id)}
+			<VirtualList
+				items={entries}
+				rowHeight={56}
+				key={(e) => (e.kind === 'folder' ? e.folder.id : e.file.id)}
+			>
+				{#snippet row(e)}
+					{#if e.kind === 'folder'}
 						<div
 							class="file-item"
 							role="button"
 							tabindex="0"
-					onclick={() => openFolder(folder)}
-					onkeydown={(e) => e.key === 'Enter' && openFolder(folder)}
+							onclick={() => openFolder(e.folder)}
+							onkeydown={(ev) => ev.key === 'Enter' && openFolder(e.folder)}
 						>
 							<div class="name-cell">
 								<span class="file-icon file-icon--folder"><Icon name="folder" /></span>
-						<span>{folder.name}</span>
+								<span>{e.folder.name}</span>
 							</div>
-					<div class="path-cell">{folder.path}</div>
+							<div class="path-cell">{e.folder.path}</div>
 							<div class="size-cell">—</div>
-					<div class="date-cell">{formatDate(folder.modified_at)}</div>
+							<div class="date-cell">{formatDate(e.folder.modified_at)}</div>
 						</div>
-			{/each}
-
-			{#each results.files as file (file.id)}
+					{:else}
 						<div
 							class="file-item"
 							role="button"
 							tabindex="0"
-					onclick={() => openFile(file)}
-					onkeydown={(e) => e.key === 'Enter' && openFile(file)}
+							onclick={() => openFile(e.file)}
+							onkeydown={(ev) => ev.key === 'Enter' && openFile(e.file)}
 						>
 							<div class="name-cell">
-						<span class="file-icon {fileIconKindClass(iconNameFromClass(file.icon_class))}"
-							><Icon name={iconNameFromClass(file.icon_class)} /></span
+								<span class="file-icon {fileIconKindClass(iconNameFromClass(e.file.icon_class))}"
+									><Icon name={iconNameFromClass(e.file.icon_class)} /></span
 								>
-						<span>{file.name}</span>
+								<span>{e.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 class="path-cell">{e.file.path}</div>
+							<div class="size-cell">{e.file.size != null ? formatBytes(e.file.size) : ''}</div>
+							<div class="date-cell">{formatDate(e.file.modified_at)}</div>
 						</div>
-			{/each}
+					{/if}
+				{/snippet}
+			</VirtualList>
 		</div>
 	</div>
 {/if}

frontend/src/routes/shared-with-me/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { errorMessage } from '$lib/utils/errors';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { onMount } from 'svelte';
 	import { dateBucket, resolveOwnerName, typeLabel } from '$lib/api/endpoints/favorites';
 	import { fetchSharedWithMe, type IncomingGrantItem } from '$lib/api/endpoints/grants';
@@ -114,7 +115,7 @@
 
 	function open(entry: ResourceEntry) {
 		if (entry.kind === 'folder') {
-			goto(`/files/${entry.id}`);
+			goto(resolve(`/files/${entry.id}`));
 			return;
 		}
 		const item = byId.get(entry.id);

frontend/src/routes/shared/+page.svelte

@@ -2,6 +2,7 @@
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import { errorMessage, errorToast } from '$lib/utils/errors';
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { onMount } from 'svelte';
 	import {
 		displayRole,
@@ -88,6 +89,8 @@
 
 	const lanes = $derived.by((): Lane[] => {
 		const out: Lane[] = [];
+		// Transient scratch map built inside $derived.by and discarded — not reactive state.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const byKey = new Map<string, Lane>();
 		const ensure = (key: string, header: Lane['header']): Lane => {
 			let lane = byKey.get(key);
@@ -179,7 +182,7 @@
 	}
 
 	function openResource(item: OutgoingGrantItem) {
-		if (item.resource_type === 'folder') goto(`/files/${item.resource.id}`);
+		if (item.resource_type === 'folder') goto(resolve(`/files/${item.resource.id}`));
 		else window.open(fileInlineUrl(item.resource.id), '_blank', 'noopener');
 	}