feat(eventsnap): UX review batch-3 — feed virtualization, a11y/UX fixes, shared primitives

Frontend
- Feed: DOM-windowing via @tanstack/svelte-virtual (new VirtualFeed). The window
  virtualizer keeps the sticky header, pull-to-refresh, infinite-scroll sentinel and
  bottom nav working. List = dynamic measured heights keyed by upload id +
  anchorTo:start so an SSE prepend doesn't jump a scrolled reader; grid = measured
  square rows. Drops the content-visibility band-aid and the old FeedGrid.
  measureElement(null) on row unmount prevents ResizeObserver retention; stable
  option callbacks + guarded setOptions avoid O(n) re-measure on like/comment patches.
- Global: viewport-fit=cover (activates safe-area insets), lang=de, PWA manifest +
  maskable icon + apple-touch metas, prefers-reduced-motion, safe-area-top headers.
- Feed reactivity: like/comment SSE patch the single card in place; upload-processed
  debounced in-place merge; IntersectionObserver leak fixed; shared 60s clock.
- CLS: list cards reserve the skeleton aspect box.
- Destructive actions (promote/demote/unban, gallery release) routed through
  ConfirmSheet (host + admin).
- Export OOM: streamed download via single-use ticket instead of res.blob().
- Shared primitives: IconButton (44px hit area), scrollLock action; UploadSheet a11y.
- Polish: api timeout + non-JSON guard, focus-trap offsetParent fix, pull-to-refresh
  passive:false + guards, diashow keyboard a11y, Toaster assertive errors, dark-mode
  gaps, aria-pressed on like/chip state, CameraCapture mic-on-video + retry,
  ConfirmSheet spinner, upload beforeunload warning, emoji->SVG icons.

Backend
- social.rs: like/comment SSE broadcasts now carry the fresh count so feed clients
  patch one card in place instead of refetching page 1.
- admin.rs / main.rs: supporting changes for the above.

Verified: svelte-check 0 errors, frontend build clean, /feed SSR 200. Runtime feed
scroll-feel validation still owed (documented in FOLLOWUPS.md).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/actions/doubletap.ts

@@ -1,9 +1,14 @@
-// Svelte action — fires a `doubletap` CustomEvent when two pointerup events occur
-// within `interval` ms on roughly the same spot. Used in the lightbox for the
-// Instagram-style "double-tap to like" gesture.
+// Svelte action — the single source of truth for tap gestures on a media element.
+// Fires a `doubletap` CustomEvent when two pointerup events occur within `interval`
+// ms on roughly the same spot (Instagram-style "double-tap to like"), and a
+// `singletap` CustomEvent once `interval` has elapsed with no second tap. Owning
+// both gestures in one place means a component no longer juggles its own debounce
+// timer alongside a separate onclick handler.
 //
 // Native `dblclick` exists, but on iOS Safari it also zooms the page; gating on
-// pointer events lets us preventDefault selectively and avoid the zoom.
+// pointer events lets us preventDefault selectively and avoid the zoom. Keyboard
+// activation still arrives as a normal `click` (detail === 0) — handle that on the
+// element itself for an immediate, latency-free open.
 
 import type { ActionReturn } from 'svelte/action';
 
@@ -16,6 +21,7 @@ export interface DoubletapOptions {
 
 interface DoubletapAttributes {
 	'ondoubletap'?: (event: CustomEvent<void>) => void;
+	'onsingletap'?: (event: CustomEvent<void>) => void;
 }
 
 export function doubletap(
@@ -26,12 +32,21 @@ export function doubletap(
 	let lastTime = 0;
 	let lastX = 0;
 	let lastY = 0;
+	let singleTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const clearSingle = () => {
+		if (singleTimer) {
+			clearTimeout(singleTimer);
+			singleTimer = null;
+		}
+	};
 
 	const onPointerUp = (e: PointerEvent) => {
 		const now = performance.now();
 		const dx = Math.abs(e.clientX - lastX);
 		const dy = Math.abs(e.clientY - lastY);
 		if (now - lastTime < interval && dx < MOVE_THRESHOLD && dy < MOVE_THRESHOLD) {
+			clearSingle(); // the pending single-tap was actually the first of a double
 			e.preventDefault();
 			node.dispatchEvent(new CustomEvent('doubletap'));
 			lastTime = 0; // reset so a triple-tap doesn't re-fire
@@ -40,6 +55,12 @@ export function doubletap(
 		lastTime = now;
 		lastX = e.clientX;
 		lastY = e.clientY;
+		// Defer the single-tap action until we're sure no second tap follows.
+		clearSingle();
+		singleTimer = setTimeout(() => {
+			singleTimer = null;
+			node.dispatchEvent(new CustomEvent('singletap'));
+		}, interval);
 	};
 
 	node.addEventListener('pointerup', onPointerUp);
@@ -49,6 +70,7 @@ export function doubletap(
 			interval = newOptions.interval ?? INTERVAL_MS;
 		},
 		destroy() {
+			clearSingle();
 			node.removeEventListener('pointerup', onPointerUp);
 		}
 	};

frontend/src/lib/actions/focus-trap.ts

@@ -17,8 +17,11 @@ const FOCUSABLE =
 	'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
 
 function focusables(root: HTMLElement): HTMLElement[] {
+	// `offsetParent` is null for any `position: fixed` element (and our sheets/modals
+	// are fixed), so it would wrongly drop their buttons. `getClientRects().length`
+	// is true whenever the element is actually rendered — fixed or not.
 	return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
-		(el) => !el.hasAttribute('disabled') && el.offsetParent !== null
+		(el) => !el.hasAttribute('disabled') && el.getClientRects().length > 0
 	);
 }
 

frontend/src/lib/actions/pull-to-refresh.ts

@@ -22,8 +22,17 @@ export function pullToRefresh(
 ): ActionReturn<PullToRefreshOptions> {
 	let opts = options;
 	let startY = 0;
+	let startX = 0;
 	let pulling = false;
 	let triggered = false;
+	let intentLocked = false; // have we decided this gesture is a vertical pull?
+
+	// Distance the finger must travel before we commit to "this is a vertical pull"
+	// vs. a horizontal swipe or an incidental tap.
+	const INTENT_SLOP = 8;
+	// Rubber-band resistance: the sheet follows the finger at a fraction of 1:1 so
+	// the pull feels elastic rather than rigid.
+	const RESISTANCE = 0.5;
 
 	function scroller(): HTMLElement | (Window & typeof globalThis) {
 		return node.scrollHeight > node.clientHeight ? node : window;
@@ -40,17 +49,54 @@ export function pullToRefresh(
 		opts.onpull(Math.max(0, delta), Math.max(0, delta) / threshold);
 	}
 
+	function reset() {
+		pulling = false;
+		intentLocked = false;
+	}
+
 	function onTouchStart(e: TouchEvent) {
 		if (opts.disabled) return;
+		// Ignore pinch / multi-finger gestures entirely.
+		if (e.touches.length !== 1) {
+			reset();
+			return;
+		}
 		if (scrollTop() > 0) return;
 		startY = e.touches[0].clientY;
+		startX = e.touches[0].clientX;
 		pulling = true;
 		triggered = false;
+		intentLocked = false;
 	}
 
 	function onTouchMove(e: TouchEvent) {
 		if (!pulling || triggered) return;
-		const delta = e.touches[0].clientY - startY;
+		// A second finger landing mid-gesture cancels the pull.
+		if (e.touches.length !== 1) {
+			reset();
+			return;
+		}
+
+		const rawDy = e.touches[0].clientY - startY;
+		const dx = e.touches[0].clientX - startX;
+
+		// Decide intent once, after the finger has moved past the slop. A
+		// horizontal-dominant or upward move is not a pull — bail and let the
+		// browser scroll normally.
+		if (!intentLocked) {
+			if (Math.abs(rawDy) < INTENT_SLOP && Math.abs(dx) < INTENT_SLOP) return;
+			if (rawDy <= 0 || Math.abs(rawDy) <= Math.abs(dx)) {
+				reset();
+				return;
+			}
+			intentLocked = true;
+		}
+
+		// Committed vertical pull at the top edge: stop the browser's own
+		// overscroll / pull-to-refresh from competing for the gesture.
+		if (e.cancelable) e.preventDefault();
+
+		const delta = rawDy * RESISTANCE;
 		reportPull(delta);
 		if (delta > (opts.threshold ?? 60)) {
 			triggered = true;
@@ -60,11 +106,12 @@ export function pullToRefresh(
 
 	function onTouchEnd() {
 		if (pulling && !triggered) reportPull(0);
-		pulling = false;
+		reset();
 	}
 
 	node.addEventListener('touchstart', onTouchStart, { passive: true });
-	node.addEventListener('touchmove', onTouchMove, { passive: true });
+	// Non-passive so we can preventDefault() once a top-edge pull is in progress.
+	node.addEventListener('touchmove', onTouchMove, { passive: false });
 	node.addEventListener('touchend', onTouchEnd);
 	node.addEventListener('touchcancel', onTouchEnd);
 

frontend/src/lib/actions/scroll-lock.ts

@@ -0,0 +1,50 @@
+// Body scroll-lock for open dialogs/sheets. While any locker is active, the
+// document body can't scroll behind the overlay. Ref-counted so that nested or
+// stacked dialogs (e.g. a ConfirmSheet opened from the LightboxModal) don't let
+// the first one to close unlock the page out from under the others. Compensates
+// for the vanished scrollbar width so the layout doesn't jump on lock.
+
+import type { ActionReturn } from 'svelte/action';
+
+let lockCount = 0;
+let savedOverflow = '';
+let savedPaddingRight = '';
+
+function lock() {
+	if (typeof document === 'undefined') return;
+	if (lockCount === 0) {
+		const body = document.body;
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		savedOverflow = body.style.overflow;
+		savedPaddingRight = body.style.paddingRight;
+		body.style.overflow = 'hidden';
+		if (scrollbarWidth > 0) {
+			const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
+			body.style.paddingRight = `${current + scrollbarWidth}px`;
+		}
+	}
+	lockCount++;
+}
+
+function unlock() {
+	if (typeof document === 'undefined') return;
+	lockCount = Math.max(0, lockCount - 1);
+	if (lockCount === 0) {
+		document.body.style.overflow = savedOverflow;
+		document.body.style.paddingRight = savedPaddingRight;
+	}
+}
+
+/**
+ * Locks body scroll for the lifetime of the node. Mount the node only while the
+ * dialog is open (e.g. inside `{#if open}` or alongside a `class:` toggle) so the
+ * action's create/destroy line up with open/close.
+ */
+export function scrollLock(node: HTMLElement): ActionReturn {
+	lock();
+	return {
+		destroy() {
+			unlock();
+		}
+	};
+}

frontend/src/lib/api.ts

@@ -13,6 +13,8 @@ export class ApiError extends Error {
 	}
 }
 
+const TIMEOUT_MS = 20_000;
+
 async function request<T>(
 	method: string,
 	path: string,
@@ -27,23 +29,50 @@ async function request<T>(
 		headers['Content-Type'] = 'application/json';
 	}
 
-	const res = await fetch(`${BASE}${path}`, {
-		method,
-		headers,
-		body: body !== undefined ? JSON.stringify(body) : undefined
-	});
+	// Abort hung requests so a dead connection surfaces as a friendly error
+	// instead of a spinner that never resolves.
+	const controller = new AbortController();
+	const timer = setTimeout(() => controller.abort(), TIMEOUT_MS);
+
+	let res: Response;
+	try {
+		res = await fetch(`${BASE}${path}`, {
+			method,
+			headers,
+			body: body !== undefined ? JSON.stringify(body) : undefined,
+			signal: controller.signal
+		});
+	} catch (e) {
+		if (e instanceof DOMException && e.name === 'AbortError') {
+			throw new ApiError(0, 'timeout', 'Zeitüberschreitung – bitte erneut versuchen.');
+		}
+		throw new ApiError(0, 'network', 'Netzwerkfehler – bitte Verbindung prüfen.');
+	} finally {
+		clearTimeout(timer);
+	}
 
 	if (res.status === 204) {
 		return undefined as T;
 	}
 
-	const data = await res.json();
+	// A 5xx behind a proxy (or a crash page) can return HTML, not JSON — parsing
+	// it directly would throw an opaque SyntaxError. Read text, parse defensively.
+	const raw = await res.text();
+	let data: { error?: string; message?: string } | unknown = null;
+	if (raw) {
+		try {
+			data = JSON.parse(raw);
+		} catch {
+			data = null;
+		}
+	}
 
 	if (!res.ok) {
 		if (res.status === 401) {
 			clearAuth();
 		}
-		throw new ApiError(res.status, data.error ?? 'unknown', data.message ?? 'Fehler');
+		const d = (data ?? {}) as { error?: string; message?: string };
+		throw new ApiError(res.status, d.error ?? 'unknown', d.message ?? `Serverfehler (${res.status}).`);
 	}
 
 	return data as T;

frontend/src/lib/components/CameraCapture.svelte

@@ -48,7 +48,9 @@
 		try {
 			stream = await navigator.mediaDevices.getUserMedia({
 				video: { facingMode, width: { ideal: 1920 }, height: { ideal: 1080 } },
-				audio: true
+				// Only request the mic for video — a photo-only session shouldn't trigger
+				// a mic permission prompt (which also blocks capture on mic-less devices).
+				audio: mode === 'video'
 			});
 			if (videoEl) {
 				videoEl.srcObject = stream;
@@ -78,6 +80,14 @@
 		await startCamera();
 	}
 
+	// Switching between photo and video changes whether we need the mic, so
+	// re-acquire the stream (lazily adding the mic for video, dropping it for photo).
+	async function setMode(next: 'photo' | 'video') {
+		if (mode === next) return;
+		mode = next;
+		await startCamera();
+	}
+
 	function capturePhoto() {
 		if (!videoEl || !canvasEl) return;
 		const ctx = canvasEl.getContext('2d');
@@ -156,12 +166,20 @@
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l-4 4m0-4l4 4m6-4a9 9 0 11-18 0 9 9 0 0118 0z" />
 					</svg>
 					<p class="text-sm text-white">{error}</p>
-					<button
-						onclick={onclose}
-						class="mt-4 rounded-lg bg-white/20 px-4 py-2 text-sm text-white"
-					>
-						Schliessen
-					</button>
+					<div class="mt-4 flex justify-center gap-2">
+						<button
+							onclick={startCamera}
+							class="rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-900"
+						>
+							Erneut versuchen
+						</button>
+						<button
+							onclick={onclose}
+							class="rounded-lg bg-white/20 px-4 py-2 text-sm text-white"
+						>
+							Schließen
+						</button>
+					</div>
 				</div>
 			</div>
 		{:else}
@@ -198,7 +216,7 @@
 						type="button"
 						role="tab"
 						aria-selected={mode === 'photo'}
-						onclick={() => (mode = 'photo')}
+						onclick={() => setMode('photo')}
 						data-testid="camera-mode-photo"
 						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
 					>
@@ -208,7 +226,7 @@
 						type="button"
 						role="tab"
 						aria-selected={mode === 'video'}
-						onclick={() => (mode = 'video')}
+						onclick={() => setMode('video')}
 						data-testid="camera-mode-video"
 						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
 					>

frontend/src/lib/components/ConfirmSheet.svelte

@@ -6,6 +6,7 @@
 
 <script lang="ts">
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 
 	interface Props {
 		open: boolean;
@@ -50,6 +51,7 @@
 		class="fixed inset-0 z-50 bg-black/40"
 		aria-label="Schließen"
 		onclick={onCancel}
+		disabled={busy}
 		tabindex="-1"
 	></button>
 	<div
@@ -60,6 +62,7 @@
 		aria-labelledby={titleId}
 		data-testid="confirm-sheet"
 		use:focusTrap={{ onclose: onCancel }}
+		use:scrollLock
 	>
 		<div class="mb-4 flex justify-center">
 			<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
@@ -77,17 +80,21 @@
 			onclick={handleConfirm}
 			disabled={busy}
 			data-testid="confirm-sheet-confirm"
-			class="mb-3 w-full rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone === 'danger'
+			class="mb-3 flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone === 'danger'
 				? 'bg-red-600 hover:bg-red-700 active:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400'
 				: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400'}"
 		>
+			{#if busy}
+				<span class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" aria-hidden="true"></span>
+			{/if}
 			{confirmLabel}
 		</button>
 		<button
 			type="button"
 			onclick={onCancel}
+			disabled={busy}
 			data-testid="confirm-sheet-cancel"
-			class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
+			class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 disabled:opacity-60 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
 		>
 			{cancelLabel}
 		</button>

frontend/src/lib/components/ContextSheet.svelte

@@ -22,6 +22,8 @@
 		title?: string;
 	}
 
+	import { scrollLock } from '$lib/actions/scroll-lock';
+
 	let { open, actions, onClose, title }: Props = $props();
 
 	let sheet = $state<HTMLDivElement | null>(null);
@@ -76,6 +78,12 @@
 	}
 </script>
 
+<!-- This sheet stays mounted (translate-y animation), so a sentinel that mounts only
+     while open drives the shared body scroll-lock. -->
+{#if open}
+	<div use:scrollLock class="hidden"></div>
+{/if}
+
 <!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
 <button
 	type="button"

frontend/src/lib/components/FeedGrid.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">
-	import type { FeedUpload } from '$lib/types';
-	import { dataMode } from '$lib/data-mode-store';
-	import { longpress } from '$lib/actions/longpress';
-
-	interface Props {
-		uploads: FeedUpload[];
-		onlike: (id: string) => void;
-		oncomment: (id: string) => void;
-		onselect: (upload: FeedUpload) => void;
-		oncontextmenu?: (upload: FeedUpload) => void;
-		threeCol?: boolean;
-	}
-
-	let { uploads, onlike, oncomment, onselect, oncontextmenu, threeCol = false }: Props =
-		$props();
-
-	function isVideo(mime: string): boolean {
-		return mime.startsWith('video/');
-	}
-
-	// Grid uses small thumbnails by design even in Original mode — full media is one tap
-	// away in the lightbox, where the data-mode picker decides for real.
-	function tileUrl(upload: FeedUpload): string {
-		if (upload.thumbnail_url) return upload.thumbnail_url;
-		if (upload.preview_url) return upload.preview_url;
-		return $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
-	}
-</script>
-
-<div class="grid gap-0.5 {threeCol ? 'grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'}">
-	{#each uploads as upload (upload.id)}
-		<div
-			class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
-			use:longpress={{ duration: 500 }}
-			onlongpress={() => oncontextmenu?.(upload)}
-		>
-			<button
-				onclick={() => onselect(upload)}
-				class="block h-full w-full"
-				aria-label="Upload anzeigen"
-			>
-				{#if isVideo(upload.mime_type)}
-					<div class="flex h-full items-center justify-center bg-gray-800">
-						{#if tileUrl(upload)}
-							<img src={tileUrl(upload)} alt="" class="h-full w-full object-cover" />
-						{/if}
-						<div class="absolute inset-0 flex items-center justify-center">
-							<svg class="h-10 w-10 text-white/80" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M8 5v14l11-7z" />
-							</svg>
-						</div>
-					</div>
-				{:else if tileUrl(upload)}
-					<img src={tileUrl(upload)} alt="" class="h-full w-full object-cover" loading="lazy" />
-				{:else}
-					<div class="flex h-full items-center justify-center text-gray-400">
-						<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-						</svg>
-					</div>
-				{/if}
-			</button>
-
-			<!-- Overlay with name and stats -->
-			<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2">
-				<p class="truncate text-xs font-medium text-white">{upload.uploader_name}</p>
-				<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
-					<button
-						class="pointer-events-auto flex items-center gap-0.5"
-						onclick={(e) => { e.stopPropagation(); onlike(upload.id); }}
-					>
-						<svg class="h-3.5 w-3.5 {upload.liked_by_me ? 'fill-red-400 text-red-400' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-						</svg>
-						{upload.like_count}
-					</button>
-					<button
-						class="pointer-events-auto flex items-center gap-0.5"
-						onclick={(e) => { e.stopPropagation(); oncomment(upload.id); }}
-					>
-						<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-						</svg>
-						{upload.comment_count}
-					</button>
-				</div>
-			</div>
-		</div>
-	{/each}
-</div>

frontend/src/lib/components/FeedListCard.svelte

@@ -6,11 +6,9 @@
 	import { doubletap } from '$lib/actions/doubletap';
 	import { avatarPalette, initials } from '$lib/avatar';
 	import { vibrate } from '$lib/haptics';
+	import { now } from '$lib/now';
 	import HeartBurst from './HeartBurst.svelte';
 
-	// Single-tap debounce so a double-tap doesn't briefly open the lightbox.
-	const SINGLE_TAP_DELAY_MS = 260;
-
 	interface Props {
 		upload: FeedUpload;
 		isOwn?: boolean;
@@ -35,8 +33,8 @@
 
 	const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
 
-	function relativeTime(iso: string): string {
-		const diff = Date.now() - new Date(iso).getTime();
+	function relativeTime(iso: string, nowMs: number): string {
+		const diff = nowMs - new Date(iso).getTime();
 		const mins = Math.floor(diff / 60000);
 		if (mins < 1) return 'gerade eben';
 		if (mins < 60) return `vor ${mins} Min.`;
@@ -46,44 +44,35 @@
 		return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
 	}
 
+	// Re-derives off the shared 60s clock so "vor 5 Min." actually advances.
+	const relTime = $derived(relativeTime(upload.created_at, $now));
+
 	function openContext() {
 		oncontextmenu?.(upload);
 	}
 
 	// Inline heart-burst on double-tap (consistent with the lightbox).
 	let heartBurst = $state(false);
-	let singleTapTimer: ReturnType<typeof setTimeout> | null = null;
-
-	function handleMediaClick() {
-		// Delay single-tap so a quick second tap (double-tap-to-like) wins.
-		if (singleTapTimer) clearTimeout(singleTapTimer);
-		singleTapTimer = setTimeout(() => {
-			singleTapTimer = null;
-			onselect(upload);
-		}, SINGLE_TAP_DELAY_MS);
-	}
+	let burstTimer: ReturnType<typeof setTimeout> | null = null;
 
 	function handleDoubleTap() {
-		if (singleTapTimer) {
-			clearTimeout(singleTapTimer);
-			singleTapTimer = null;
-		}
 		heartBurst = true;
 		vibrate(10);
 		onlike(upload.id);
-		setTimeout(() => (heartBurst = false), 700);
+		if (burstTimer) clearTimeout(burstTimer);
+		burstTimer = setTimeout(() => (heartBurst = false), 700);
 	}
 
-	// A feed-delta SSE event can remove this card mid-pending-tap. Clear the timer
-	// on unmount so we don't call onselect with a stale upload reference.
+	// Clear the burst timer on unmount (a feed-delta SSE event can remove this
+	// card mid-animation) so it can't fire against a stale component.
 	onDestroy(() => {
-		if (singleTapTimer) {
-			clearTimeout(singleTapTimer);
-			singleTapTimer = null;
-		}
+		if (burstTimer) clearTimeout(burstTimer);
 	});
 </script>
 
+<!-- Off-screen cards are removed from the DOM entirely by the parent VirtualFeed
+     window-virtualizer, so this card no longer needs content-visibility — and must
+     not use it, since the virtualizer measures each card's real rendered height. -->
 <article
 	class="bg-white dark:bg-gray-900"
 	use:longpress={{ duration: 500 }}
@@ -100,7 +89,7 @@
 			</div>
 			<div class="min-w-0">
 				<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p>
-				<p class="text-xs text-gray-400 dark:text-gray-500">{relativeTime(upload.created_at)}</p>
+				<p class="text-xs text-gray-400 dark:text-gray-500">{relTime}</p>
 			</div>
 		</div>
 
@@ -120,9 +109,10 @@
 	<!-- Media -->
 	<button
 		class="relative block w-full"
-		onclick={handleMediaClick}
 		use:doubletap
+		onsingletap={() => onselect(upload)}
 		ondoubletap={handleDoubleTap}
+		onclick={(e) => { if (e.detail === 0) onselect(upload); }}
 		aria-label="Bild vergrößern"
 	>
 		<HeartBurst active={heartBurst} />
@@ -133,6 +123,8 @@
 						src={upload.thumbnail_url ?? upload.preview_url ?? ''}
 						alt=""
 						class="h-full w-full object-cover opacity-80"
+						loading="lazy"
+						decoding="async"
 					/>
 				{/if}
 				<div class="absolute inset-0 flex items-center justify-center">
@@ -144,13 +136,18 @@
 				</div>
 			</div>
 		{:else if mediaSrc}
-			<img
-				src={mediaSrc}
-				alt=""
-				class="w-full object-cover"
-				style="max-height: 80svh"
-				loading="lazy"
-			/>
+			<!-- Reserve the same 4/5 box the skeleton uses so the card doesn't collapse
+			     to height 0 and reflow as images stream in. The uncropped original is one
+			     tap away in the lightbox. -->
+			<div class="aspect-[4/5] w-full bg-gray-100 dark:bg-gray-800">
+				<img
+					src={mediaSrc}
+					alt=""
+					class="h-full w-full object-cover"
+					loading="lazy"
+					decoding="async"
+				/>
+			</div>
 		{:else}
 			<div class="flex aspect-square w-full items-center justify-center bg-gray-100 dark:bg-gray-800">
 				<svg class="h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -164,6 +161,8 @@
 	<div class="flex items-center gap-4 px-4 py-2">
 		<button
 			onclick={() => { vibrate(10); onlike(upload.id); }}
+			aria-pressed={upload.liked_by_me}
+			aria-label={upload.liked_by_me ? 'Gefällt mir nicht mehr' : 'Gefällt mir'}
 			class="flex items-center gap-1.5 text-sm font-medium transition-colors
 				{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}"
 		>

frontend/src/lib/components/HashtagChips.svelte

@@ -17,7 +17,8 @@
 	<div class="flex gap-2 overflow-x-auto pb-2">
 		<button
 			onclick={() => onselect(null)}
-			class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
+			aria-pressed={selected === null}
+			class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {
 				selected === null
 					? 'bg-blue-600 text-white dark:bg-blue-500'
 					: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
@@ -28,7 +29,8 @@
 		{#each hashtags as h (h.tag)}
 			<button
 				onclick={() => onselect(h.tag)}
-				class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
+				aria-pressed={selected === h.tag}
+				class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {
 					selected === h.tag
 						? 'bg-blue-600 text-white dark:bg-blue-500'
 						: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'

frontend/src/lib/components/IconButton.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	// Icon-only button with a guaranteed ≥44px touch target (WCAG 2.5.5 / Apple HIG).
+	// The visible icon stays whatever size the caller renders; the hit area is
+	// enforced via min-h-11 min-w-11 (44px) so small glyphs are still comfortably
+	// tappable. Always require an `aria-label` since there's no text content.
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Accessible name — required, the button has no visible text. */
+		label: string;
+		onclick?: (e: MouseEvent) => void;
+		disabled?: boolean;
+		title?: string;
+		type?: 'button' | 'submit';
+		tone?: 'neutral' | 'danger';
+		/** Marks toggle state for AT (e.g. like buttons). Omit for plain actions. */
+		pressed?: boolean;
+		/** Extra classes appended after the base styles. */
+		class?: string;
+		'data-testid'?: string;
+		children: Snippet;
+	}
+
+	let {
+		label,
+		onclick,
+		disabled = false,
+		title,
+		type = 'button',
+		tone = 'neutral',
+		pressed,
+		class: extra = '',
+		'data-testid': testid,
+		children
+	}: Props = $props();
+
+	const toneClass = $derived(
+		tone === 'danger'
+			? 'text-red-600 hover:bg-red-50 active:bg-red-100 dark:text-red-400 dark:hover:bg-red-950/40 dark:active:bg-red-950/60'
+			: 'text-gray-500 hover:bg-gray-100 active:bg-gray-200 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:hover:text-gray-100'
+	);
+</script>
+
+<button
+	{type}
+	{onclick}
+	{disabled}
+	{title}
+	aria-label={label}
+	aria-pressed={pressed}
+	data-testid={testid}
+	class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-full transition-colors disabled:opacity-50 disabled:pointer-events-none {toneClass} {extra}"
+>
+	{@render children()}
+</button>

frontend/src/lib/components/LightboxModal.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { FeedUpload } from '$lib/types';
 	import { api } from '$lib/api';
 	import { getUserId } from '$lib/auth';
 	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
 	import { doubletap } from '$lib/actions/doubletap';
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 	import { toastError } from '$lib/toast-store';
 	import { vibrate } from '$lib/haptics';
 	import HeartBurst from './HeartBurst.svelte';
@@ -33,6 +35,7 @@
 	let loading = $state(false);
 	let userId = getUserId();
 	let heartBurst = $state(false);
+	let burstTimer: ReturnType<typeof setTimeout> | null = null;
 
 	const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
 
@@ -40,9 +43,14 @@
 		heartBurst = true;
 		vibrate(10);
 		onlike(upload.id);
-		setTimeout(() => (heartBurst = false), 700);
+		if (burstTimer) clearTimeout(burstTimer);
+		burstTimer = setTimeout(() => (heartBurst = false), 700);
 	}
 
+	onDestroy(() => {
+		if (burstTimer) clearTimeout(burstTimer);
+	});
+
 	$effect(() => {
 		loadComments();
 	});
@@ -97,6 +105,7 @@
 	aria-modal="true"
 	aria-labelledby="lightbox-title"
 	use:focusTrap={{ onclose }}
+	use:scrollLock
 >
 	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900">
 		<!-- Media -->
@@ -104,7 +113,7 @@
 			<button
 				onclick={onclose}
 				aria-label="Schließen"
-				class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70 active:bg-black/70"
+				class="absolute right-2 top-2 z-10 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
 			>
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

frontend/src/lib/components/Modal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 	import type { Snippet } from 'svelte';
 
 	// Accessible name is REQUIRED. Pass `titleId` when the dialog renders its own
@@ -48,6 +49,7 @@
 		aria-labelledby={titleId}
 		aria-label={titleId ? undefined : ariaLabel}
 		use:focusTrap={{ onclose: onClose }}
+		use:scrollLock
 	>
 		<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
 			{@render children()}

frontend/src/lib/components/OnboardingGuide.svelte

@@ -3,6 +3,7 @@
 	import { privacyNote } from '$lib/privacy-note-store';
 	import { themePreference, type ThemePreference } from '$lib/theme-store';
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 	import { vibrate } from '$lib/haptics';
 
 	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
@@ -100,6 +101,7 @@
 			aria-modal="true"
 			aria-labelledby="onboarding-title"
 			use:focusTrap={{ onclose: dismiss }}
+			use:scrollLock
 		>
 			<!-- Step indicator — tap a pip to jump back. The visible dot is small but
 			     the touch target is padded to ~44 px so it remains tappable on mobile. -->

frontend/src/lib/components/Toaster.svelte

@@ -19,15 +19,17 @@
 	class="pointer-events-none fixed inset-x-0 z-[60] flex flex-col items-center gap-2 px-4"
 	style="bottom: calc(env(safe-area-inset-bottom) + 5rem)"
 	role="region"
-	aria-live="polite"
 	aria-label="Benachrichtigungen"
 	data-testid="toaster"
 >
 	{#each $toasts as t (t.id)}
+		<!-- Errors/warnings interrupt (assertive/alert); successes wait their turn (polite/status). -->
 		<button
 			type="button"
 			onclick={() => dismissToast(t.id)}
 			class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(t.tone)}"
+			role={t.tone === 'error' || t.tone === 'warning' ? 'alert' : 'status'}
+			aria-live={t.tone === 'error' || t.tone === 'warning' ? 'assertive' : 'polite'}
 			data-testid="toast"
 			data-toast-tone={t.tone}
 		>

frontend/src/lib/components/UploadQueue.svelte

@@ -19,10 +19,10 @@
 
 	function statusColor(status: QueueItem['status']): string {
 		switch (status) {
-			case 'pending': return 'text-gray-500';
-			case 'uploading': return 'text-blue-600';
-			case 'done': return 'text-green-600';
-			case 'error': return 'text-red-600';
+			case 'pending': return 'text-gray-500 dark:text-gray-400';
+			case 'uploading': return 'text-blue-600 dark:text-blue-400';
+			case 'done': return 'text-green-600 dark:text-green-400';
+			case 'error': return 'text-red-600 dark:text-red-400';
 		}
 	}
 
@@ -50,9 +50,9 @@
 </script>
 
 {#if items.length > 0}
-	<div class="mt-4 rounded-lg border border-gray-200 bg-white">
-		<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
-			<h3 class="text-sm font-semibold text-gray-900">
+	<div class="mt-4 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+		<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800">
+			<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
 				Upload-Warteschlange
 				{#if $isProcessing}
 					<span class="ml-2 inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
@@ -61,7 +61,7 @@
 			{#if hasCompleted}
 				<button
 					onclick={() => clearCompleted()}
-					class="text-xs text-gray-500 hover:text-gray-700"
+					class="inline-flex min-h-11 items-center px-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
 				>
 					Fertige entfernen
 				</button>
@@ -69,18 +69,18 @@
 		</div>
 
 		{#if $rateLimitRetryAt && countdown > 0}
-			<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800">
+			<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
 				Upload-Limit erreicht. Wird in {countdown} Sek. automatisch fortgesetzt.
 			</div>
 		{/if}
 
-		<ul class="divide-y divide-gray-100">
+		<ul class="divide-y divide-gray-100 dark:divide-gray-800">
 			{#each items as item (item.id)}
 				<li class="px-4 py-3">
 					<div class="flex items-center justify-between">
 						<div class="min-w-0 flex-1">
-							<p class="truncate text-sm font-medium text-gray-900">{item.fileName}</p>
-							<p class="text-xs text-gray-500">{formatSize(item.fileSize)}</p>
+							<p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{item.fileName}</p>
+							<p class="text-xs text-gray-500 dark:text-gray-400">{formatSize(item.fileSize)}</p>
 						</div>
 						<div class="ml-3 flex items-center gap-2">
 							<span class="text-xs font-medium {statusColor(item.status)}">
@@ -89,7 +89,7 @@
 							{#if item.status === 'error'}
 								<button
 									onclick={() => retryItem(item.id)}
-									class="rounded bg-red-100 px-2 py-0.5 text-xs text-red-700 hover:bg-red-200"
+									class="inline-flex min-h-11 items-center rounded bg-red-100 px-3 text-xs font-medium text-red-700 hover:bg-red-200 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60"
 								>
 									Erneut
 								</button>
@@ -97,7 +97,7 @@
 							{#if item.status === 'done' || item.status === 'error'}
 								<button
 									onclick={() => removeItem(item.id)}
-									class="text-gray-400 hover:text-gray-600"
+									class="inline-flex h-9 w-9 items-center justify-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
 									aria-label="Entfernen"
 								>
 									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -109,17 +109,17 @@
 					</div>
 
 					{#if item.status === 'uploading'}
-						<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
+						<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
 							<div
 								class="h-full rounded-full bg-blue-500 transition-all duration-300"
 								style="width: {item.progress}%"
 							></div>
 						</div>
-						<p class="mt-1 text-right text-xs text-gray-400">{item.progress}%</p>
+						<p class="mt-1 text-right text-xs text-gray-400 dark:text-gray-500">{item.progress}%</p>
 					{/if}
 
 					{#if item.error}
-						<p class="mt-1 text-xs text-red-500">{item.error}</p>
+						<p class="mt-1 text-xs text-red-500 dark:text-red-400">{item.error}</p>
 					{/if}
 				</li>
 			{/each}

frontend/src/lib/components/UploadSheet.svelte

@@ -2,11 +2,14 @@
 	import { goto } from '$app/navigation';
 	import { uploadSheetOpen } from '$lib/ui-store';
 	import { pendingFiles } from '$lib/pending-upload-store';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 	import CameraCapture from '$lib/components/CameraCapture.svelte';
 	import type { PendingFile } from '$lib/pending-upload-store';
 
 	let showCamera = $state(false);
 	let fileInput: HTMLInputElement;
+	let sheet = $state<HTMLDivElement | null>(null);
+	let returnFocus: HTMLElement | null = null;
 
 	// Keep the sheet and backdrop always in the DOM for smooth CSS transitions.
 	let open = $derived($uploadSheetOpen);
@@ -15,6 +18,47 @@
 		uploadSheetOpen.set(false);
 	}
 
+	// Focus-trap + Escape, wired manually because the sheet stays mounted for its
+	// translate-y animation (so use:focusTrap, which activates on mount, won't do).
+	// Mirrors ContextSheet. Suspended while the camera overlay owns the screen.
+	function onKeyDown(e: KeyboardEvent) {
+		if (showCamera) return;
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			close();
+			return;
+		}
+		if (e.key !== 'Tab' || !sheet) return;
+		const list = Array.from(sheet.querySelectorAll<HTMLElement>('button:not([disabled])'));
+		if (list.length === 0) return;
+		const first = list[0];
+		const last = list[list.length - 1];
+		const active = document.activeElement as HTMLElement | null;
+		if (e.shiftKey && (active === first || !sheet.contains(active))) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && active === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}
+
+	$effect(() => {
+		if (open) {
+			returnFocus = (document.activeElement as HTMLElement | null) ?? null;
+			requestAnimationFrame(() => {
+				if (showCamera) return;
+				const first = sheet?.querySelector<HTMLButtonElement>('button:not([disabled])');
+				first?.focus({ preventScroll: true });
+			});
+			window.addEventListener('keydown', onKeyDown);
+			return () => window.removeEventListener('keydown', onKeyDown);
+		} else if (returnFocus) {
+			try { returnFocus.focus({ preventScroll: true }); } catch { /* element gone */ }
+			returnFocus = null;
+		}
+	});
+
 	function openGallery() {
 		fileInput?.click();
 	}
@@ -68,22 +112,34 @@
 	onchange={handleFiles}
 />
 
-<!-- Backdrop -->
-<div
+<!-- Lock body scroll only while open (sheet stays mounted for its animation). -->
+{#if open && !showCamera}
+	<div use:scrollLock class="hidden"></div>
+{/if}
+
+<!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
+<button
+	type="button"
 	class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
 	class:opacity-0={!open}
 	class:pointer-events-none={!open}
 	class:opacity-100={open}
 	onclick={close}
-	aria-hidden="true"
-></div>
+	tabindex="-1"
+	aria-label="Schließen"
+></button>
 
 <!-- Sheet -->
 <div
+	bind:this={sheet}
 	class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300 dark:bg-gray-900"
 	class:translate-y-full={!open}
 	class:translate-y-0={open}
 	style="padding-bottom: env(safe-area-inset-bottom)"
+	role="dialog"
+	aria-modal="true"
+	aria-label="Hochladen"
+	tabindex="-1"
 >
 	<!-- Drag handle -->
 	<div class="flex justify-center pt-3 pb-1">

frontend/src/lib/components/VirtualFeed.svelte

@@ -0,0 +1,295 @@
+<script lang="ts">
+	// DOM-windowing for the feed. Only the cards/rows inside (and a small overscan
+	// around) the viewport are kept in the DOM — at ~1000 uploads this is the
+	// difference between ~1000 heavy cards (each with its own image, HeartBurst,
+	// long-press + double-tap listeners) and ~10-15.
+	//
+	// We use TanStack's *window* virtualizer (not an inner scroll container) on
+	// purpose: the feed scrolls the document, and the page's sticky header,
+	// pull-to-refresh, infinite-scroll sentinel and bottom nav all rely on that.
+	// The window virtualizer measures against `window` scroll, so every one of
+	// those keeps working untouched.
+	//
+	// Two layouts share one mechanism:
+	//   list — one full-width FeedListCard per row, heights *measured* (captions
+	//          make them variable). Keyed by upload id + `anchorTo:'start'` so an
+	//          SSE prepend (new upload) doesn't yank a scrolled-down reader.
+	//   grid — three square tiles per row, uniform height; still measured to shrug
+	//          off sub-pixel drift over hundreds of rows.
+	import { createWindowVirtualizer } from '@tanstack/svelte-virtual';
+	import { untrack } from 'svelte';
+	import { get } from 'svelte/store';
+	import { browser } from '$app/environment';
+	import type { FeedUpload } from '$lib/types';
+	import { dataMode } from '$lib/data-mode-store';
+	import { longpress } from '$lib/actions/longpress';
+	import FeedListCard from './FeedListCard.svelte';
+
+	interface Props {
+		uploads: FeedUpload[];
+		mode: 'list' | 'grid';
+		myUserId: string | null;
+		onlike: (id: string) => void;
+		oncomment: (id: string) => void;
+		onselect: (upload: FeedUpload) => void;
+		oncontextmenu?: (upload: FeedUpload) => void;
+	}
+
+	let { uploads, mode, myUserId, onlike, oncomment, onselect, oncontextmenu }: Props =
+		$props();
+
+	const COLS = 3;
+	const GRID_GAP = 2; // px — matches the `gap-0.5` the non-virtual grid used.
+	const LIST_ESTIMATE = 700; // px — first-paint guess; real heights replace it on measure.
+
+	let listEl = $state<HTMLDivElement>();
+	let containerWidth = $state(0);
+
+	// Distance from the top of the document to the list container, i.e. the height
+	// of everything above it (sticky header + chips/search). Items' `start` values
+	// are document-absolute (they include this margin), so we feed it back as
+	// `scrollMargin` and subtract it again when positioning. Read live from layout
+	// (getBoundingClientRect + scrollY is scroll-independent) so it self-corrects
+	// when the header grows — e.g. grid filter chips appear.
+	let scrollMargin = $state(0);
+
+	const rowCount = $derived(mode === 'grid' ? Math.ceil(uploads.length / COLS) : uploads.length);
+	const colWidth = $derived(
+		containerWidth > 0 ? (containerWidth - (COLS - 1) * GRID_GAP) / COLS : 120
+	);
+
+	function isVideo(mime: string): boolean {
+		return mime.startsWith('video/');
+	}
+
+	// Grid tiles always use the small thumbnail — full media is one tap away in the
+	// lightbox where the data-mode picker decides for real.
+	function tileUrl(upload: FeedUpload): string {
+		if (upload.thumbnail_url) return upload.thumbnail_url;
+		if (upload.preview_url) return upload.preview_url;
+		return $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
+	}
+
+	// STABLE option callbacks — created once, never swapped. They read the live
+	// reactive values (`colWidth`, `uploads`, `mode`) at *call* time, so they stay
+	// current without needing a new function reference. This matters: `getItemKey`
+	// is a dependency of virtual-core's measurements memo, so handing it a fresh
+	// closure on every render would force an O(n) recompute. List keys by upload id
+	// (so an SSE prepend keeps measured heights attached to the right card); grid
+	// keys by row index (uniform rows, nothing to preserve).
+	const estimateSize = (_i: number) => (mode === 'grid' ? colWidth : LIST_ESTIMATE);
+	const getItemKey = (i: number) => (mode === 'list' ? (uploads[i]?.id ?? i) : i);
+
+	// `mode` is fixed for the lifetime of an instance (list and grid are rendered as
+	// separate <VirtualFeed> elements in the parent's {#if} branches, so toggling
+	// remounts rather than mutating this prop). Snapshot it without a reactive read
+	// to set the layout-constant options once.
+	const isGrid = untrack(() => mode === 'grid');
+
+	// Created with static placeholder count/margin; `applyOptions` pushes those.
+	const virtualizer = createWindowVirtualizer<HTMLDivElement>({
+		count: 0,
+		estimateSize,
+		getItemKey,
+		overscan: isGrid ? 4 : 3,
+		gap: isGrid ? GRID_GAP : 0,
+		anchorTo: 'start',
+		scrollMargin: 0
+	});
+
+	// Only `count` (load-more / prepend / delete) and `scrollMargin` (header height
+	// shifts) actually need to be pushed into the virtualizer. Like/comment SSE
+	// patches reassign `uploads` without changing its length — those must NOT
+	// trigger a setOptions (and its getBoundingClientRect reflow + store churn); the
+	// affected card re-renders through normal reactivity instead. We read the raw
+	// instance via `get()` rather than `$virtualizer` so writing never re-triggers
+	// this effect (that would loop).
+	let appliedCount = -1;
+	let appliedMargin = Number.NaN;
+
+	function applyOptions() {
+		const count = rowCount;
+		const margin = listEl ? listEl.getBoundingClientRect().top + window.scrollY : 0;
+		scrollMargin = margin; // drives the template transforms
+		if (count === appliedCount && Math.abs(margin - appliedMargin) < 0.5) return;
+		appliedCount = count;
+		appliedMargin = margin;
+		get(virtualizer).setOptions({ count, scrollMargin: margin });
+	}
+
+	// Re-apply when the row count or column width changes (load-more, prepend,
+	// delete, filter, rotate). `colWidth`/`rowCount` are the only tracked reads, so a
+	// length-stable like/comment patch doesn't re-run this.
+	$effect(() => {
+		void rowCount;
+		void colWidth;
+		applyOptions();
+	});
+
+	// Header offset can also shift on resize without a count change (orientation,
+	// on-screen keyboard, font scaling).
+	$effect(() => {
+		if (!browser) return;
+		const onResize = () => applyOptions();
+		window.addEventListener('resize', onResize);
+		return () => window.removeEventListener('resize', onResize);
+	});
+
+	// Hand each rendered row to the virtualizer's ResizeObserver (it reads the row's
+	// `data-index` and caches the real height by item key). On `destroy` we call
+	// `measureElement(null)`, which sweeps now-disconnected nodes out of the
+	// internal cache + ResizeObserver — without it, every card that scrolls out of
+	// the window stays observed and retained, defeating the point of virtualizing.
+	function measure(node: HTMLDivElement) {
+		get(virtualizer).measureElement(node);
+		return {
+			update() {
+				get(virtualizer).measureElement(node);
+			},
+			destroy() {
+				get(virtualizer).measureElement(null);
+			}
+		};
+	}
+</script>
+
+<div bind:this={listEl} bind:clientWidth={containerWidth} class="w-full">
+	{#if browser}
+		<div style="position: relative; width: 100%; height: {$virtualizer.getTotalSize()}px;">
+			{#each $virtualizer.getVirtualItems() as item (item.key)}
+				{#if mode === 'list'}
+					{@const upload = uploads[item.index]}
+					<div
+						data-index={item.index}
+						use:measure
+						style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({item.start -
+							scrollMargin}px);"
+					>
+						{#if upload}
+							<FeedListCard
+								{upload}
+								isOwn={upload.user_id === myUserId}
+								{onlike}
+								{oncomment}
+								{onselect}
+								{oncontextmenu}
+							/>
+						{/if}
+					</div>
+				{:else}
+					<div
+						data-index={item.index}
+						use:measure
+						style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({item.start -
+							scrollMargin}px);"
+					>
+						<div class="grid grid-cols-3 gap-0.5">
+							{#each uploads.slice(item.index * COLS, item.index * COLS + COLS) as upload (upload.id)}
+								<!-- Tile — mirrors the markup the old FeedGrid used. -->
+								<div
+									class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
+									use:longpress={{ duration: 500 }}
+									onlongpress={() => oncontextmenu?.(upload)}
+								>
+									<button
+										onclick={() => onselect(upload)}
+										class="block h-full w-full"
+										aria-label="Upload anzeigen"
+									>
+										{#if isVideo(upload.mime_type)}
+											<div class="flex h-full items-center justify-center bg-gray-800">
+												{#if tileUrl(upload)}
+													<img
+														src={tileUrl(upload)}
+														alt=""
+														class="h-full w-full object-cover"
+														loading="lazy"
+														decoding="async"
+													/>
+												{/if}
+												<div class="absolute inset-0 flex items-center justify-center">
+													<svg class="h-10 w-10 text-white/80" fill="currentColor" viewBox="0 0 24 24">
+														<path d="M8 5v14l11-7z" />
+													</svg>
+												</div>
+											</div>
+										{:else if tileUrl(upload)}
+											<img
+												src={tileUrl(upload)}
+												alt=""
+												class="h-full w-full object-cover"
+												loading="lazy"
+												decoding="async"
+											/>
+										{:else}
+											<div class="flex h-full items-center justify-center text-gray-400">
+												<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="1.5"
+														d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+													/>
+												</svg>
+											</div>
+										{/if}
+									</button>
+
+									<div
+										class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2"
+									>
+										<p class="truncate text-xs font-medium text-white">{upload.uploader_name}</p>
+										<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
+											<button
+												class="pointer-events-auto -m-1 flex items-center gap-0.5 p-1"
+												onclick={(e) => {
+													e.stopPropagation();
+													onlike(upload.id);
+												}}
+												aria-pressed={upload.liked_by_me}
+												aria-label={upload.liked_by_me ? 'Gefällt mir nicht mehr' : 'Gefällt mir'}
+											>
+												<svg
+													class="h-4 w-4 {upload.liked_by_me ? 'fill-red-400 text-red-400' : ''}"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+													/>
+												</svg>
+												{upload.like_count}
+											</button>
+											<button
+												class="pointer-events-auto -m-1 flex items-center gap-0.5 p-1"
+												onclick={(e) => {
+													e.stopPropagation();
+													oncomment(upload.id);
+												}}
+												aria-label="Kommentare anzeigen"
+											>
+												<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+													/>
+												</svg>
+												{upload.comment_count}
+											</button>
+										</div>
+									</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>

frontend/src/lib/data-mode-store.ts

@@ -5,7 +5,7 @@
 // of the device the guest is currently holding, not their identity.
 //
 // Used by:
-// - Feed cards (FeedListCard / FeedGrid) to pick which URL to render
+// - Feed cards (FeedListCard / VirtualFeed grid tiles) to pick which URL to render
 // - Lightbox
 // - Diashow
 // See [docs/FEATURES.md §2.5] for the user-facing model.

frontend/src/lib/now.ts

@@ -0,0 +1,10 @@
+import { readable } from 'svelte/store';
+
+// A single 60-second clock shared by every component that renders a relative
+// timestamp ("vor 5 Min."). One interval for the whole app — not one per card —
+// so a 1000-item feed stays cheap, and the interval is torn down automatically
+// when the last subscriber unsubscribes.
+export const now = readable(Date.now(), (set) => {
+	const id = setInterval(() => set(Date.now()), 60_000);
+	return () => clearInterval(id);
+});