Merge feat/ux-review-followups: UX review batch fixes + shared primitives

FOLLOWUPS.md

@@ -0,0 +1,53 @@
+# Follow-ups
+
+Tracked work that was deferred during the multi-round UI/UX review pass.
+Each item has a clear acceptance criterion so a future pass can land it
+without re-deriving the context.
+
+## A11y — assistive-tech containment inside modals
+
+**Problem.** Open modals (LightboxModal, ConfirmSheet, Modal, OnboardingGuide,
+join PIN modal, account data-mode sheet, export HTML guide) trap keyboard Tab
+via `focusTrap`, but VoiceOver rotor / TalkBack arrow-key navigation can still
+escape into the page content behind the dialog. Screen-reader users hear the
+wrong context.
+
+**Why deferred.** A naive sibling-walk that sets `inert` on direct children of
+the modal's parent silences the global `<Toaster>` (`aria-live="polite"` region
+mounted in `+layout.svelte`) and the `<BottomNav>` while a modal is open —
+breaking toast announcements and the visible nav state. SvelteKit has no
+built-in portal mechanism, so dialogs render inside the route tree alongside
+the Toaster.
+
+**Acceptance criterion.** With any modal open:
+- VoiceOver rotor (iOS Safari) and TalkBack swipe navigation (Android Chrome)
+  cannot leave the dialog subtree.
+- Toasts that fire while a modal is open are still announced.
+- Nested modals (e.g. ConfirmSheet opened from inside ContextSheet) maintain
+  correct containment when the inner closes.
+
+**Sketch of an approach.** One of:
+1. **Portal pattern.** Render dialogs into a dedicated `<div id="modal-root">`
+   that's a sibling of the main app root in `app.html`. `focusTrap` then sets
+   `inert` on the main root, leaving the modal root and the toast region (also
+   moved to its own portal root) untouched.
+2. **Opt-out marker.** Walk siblings and inert them, but skip any node carrying
+   a `data-modal-passthrough` attribute. Mark `<Toaster>` with it. Document
+   the contract.
+3. **Stack-aware containment.** Maintain a module-level stack of open dialog
+   nodes; the topmost owns the inert state, popped dialogs restore the
+   previous layer. Avoids the nested-modal restoration bug.
+
+Approach 1 is the cleanest long-term but the highest blast radius. Approach 2
+is the smallest patch.
+
+**Files to touch.**
+- [frontend/src/lib/actions/focus-trap.ts](frontend/src/lib/actions/focus-trap.ts) — add inert logic
+- [frontend/src/lib/components/Toaster.svelte](frontend/src/lib/components/Toaster.svelte) — add passthrough marker (if approach 2) or move to a portal (if approach 1)
+- [frontend/src/app.html](frontend/src/app.html) — add `<div id="modal-root">` (if approach 1)
+
+## Smaller nits, optional
+
+- **Auto-submit on retried 4th digit.** [recover/+page.svelte](frontend/src/routes/recover/+page.svelte), [join/+page.svelte](frontend/src/routes/join/+page.svelte) — after a wrong PIN, deleting one digit and retyping triggers an immediate submit. Backend's 3-attempts/15-min lockout makes this safe; could feel hair-trigger after a typo. Consider gating the second auto-submit per input session behind an explicit button press.
+- **Onboarding pip tap target on the vertical axis.** [OnboardingGuide.svelte](frontend/src/lib/components/OnboardingGuide.svelte) — current `p-2.5` yields ~26 px height, meets WCAG 2.2 AA (≥24 px) but below iOS HIG / Material's 44 / 48 dp recommendation. Bumping to `p-3` is the easy improvement; further increases start crowding the row.
+- **Migrate bespoke focus-trapped dialogs to `<Modal>`.** Join PIN modal, OnboardingGuide, LightboxModal, HTML guide, account data-mode sheet — all currently roll their own shell with `focusTrap`. They're correct, just not using the canonical primitive. Migrate when `<Modal>` gains features (e.g. the inert work above) you'd want everywhere.

e2e/specs/01-auth/back-chevron.spec.ts

@@ -0,0 +1,28 @@
+/**
+ * UX polish — back chevrons on /recover and /export. Both pages used to be
+ * dead-ends for deep-linked users; the chevron mirrors the upload-composer
+ * header pattern and routes back to /feed.
+ */
+import { test, expect } from '../../fixtures/test';
+
+test.describe('Navigation — back chevrons', () => {
+  test('/recover back chevron navigates to /feed (which redirects to /join when unauth)', async ({ page }) => {
+    await page.goto('/recover');
+    const back = page.getByTestId('recover-back');
+    await expect(back).toBeVisible();
+    await back.click();
+    // Unauthenticated → /feed mounts and redirects to /join.
+    await page.waitForURL(/\/(join|feed)$/);
+  });
+
+  test('/export back chevron returns the authenticated guest to /feed', async ({ page, guest, signIn }) => {
+    const g = await guest('ExportBack');
+    await signIn(page, g);
+    await page.goto('/export');
+
+    const back = page.getByTestId('export-back');
+    await expect(back).toBeVisible();
+    await back.click();
+    await page.waitForURL('**/feed');
+  });
+});

e2e/specs/01-auth/pin-auto-submit.spec.ts

@@ -0,0 +1,44 @@
+/**
+ * UX polish — PIN inputs auto-submit on the 4th digit. Both the inline
+ * recovery on /join (name-taken state) and the standalone /recover route
+ * share the same auto-submit pattern: a $effect watching `pin.length === 4`.
+ *
+ * Coverage:
+ *   - Inline recovery on /join: typing 4 digits navigates to /feed without
+ *     a tap on Anmelden.
+ *   - Standalone /recover: typing 4 digits navigates to /feed.
+ */
+import { test, expect } from '../../fixtures/test';
+import { JoinPage, RecoverPage } from '../../page-objects';
+import { clearAllStorage } from '../../helpers/storage-helpers';
+
+test.describe('Auth — PIN auto-submit', () => {
+  test('inline recovery: 4th digit auto-submits and navigates to /feed', async ({ page, guest }) => {
+    const original = await guest('AutoInline');
+    await clearAllStorage(page);
+
+    const join = new JoinPage(page);
+    await join.goto();
+    await join.fillName('AutoInline');
+    await join.submit();
+
+    // Name-taken state: type the PIN one digit at a time, do NOT click submit.
+    await expect(join.recoveryPinInput).toBeVisible();
+    await join.recoveryPinInput.pressSequentially(original.pin, { delay: 30 });
+
+    // Auto-submit must fire on the 4th digit.
+    await page.waitForURL('**/feed', { timeout: 5_000 });
+  });
+
+  test('/recover: 4th digit auto-submits when the name is already filled in', async ({ page, guest }) => {
+    const original = await guest('AutoRecover');
+    await clearAllStorage(page);
+
+    const recover = new RecoverPage(page);
+    await recover.goto();
+    await recover.nameInput.fill('AutoRecover');
+    await recover.pinInput.pressSequentially(original.pin, { delay: 30 });
+
+    await page.waitForURL('**/feed', { timeout: 5_000 });
+  });
+});

e2e/specs/03-feed/confirm-sheet-delete.spec.ts

@@ -0,0 +1,62 @@
+/**
+ * Critical UX fix — delete confirmation is now a branded bottom-sheet, not
+ * the native window.confirm(). Long-press on an own upload → Löschen
+ * → ConfirmSheet opens. Cancel keeps the post; Confirm removes it.
+ *
+ * The window.confirm path was jarring on mobile and broke the consistent
+ * bottom-sheet design language; the ConfirmSheet uses the same shell as
+ * ContextSheet and traps focus while open.
+ */
+import { test, expect } from '../../fixtures/test';
+import { uploadRaw } from '../../helpers/upload-client';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const SAMPLE_JPG = join(process.cwd(), 'fixtures', 'media', 'sample.jpg');
+
+async function seedUpload(token: string): Promise<{ id: string }> {
+  const res = await uploadRaw(token, readFileSync(SAMPLE_JPG), {
+    filename: 'cs.jpg',
+    contentType: 'image/jpeg',
+    caption: 'Confirm-sheet fixture',
+  });
+  if (res.status !== 201) throw new Error(`Upload seed failed (${res.status})`);
+  return (await res.json()) as { id: string };
+}
+
+test.describe('Feed — ConfirmSheet replaces window.confirm for deletion', () => {
+  test('Cancel keeps the post; Confirm removes it', async ({ page, guest, signIn }) => {
+    const g = await guest('CSDelete');
+    await seedUpload(g.jwt);
+    await signIn(page, g);
+    await page.goto('/feed');
+
+    const card = page.locator('article').filter({ hasText: g.displayName }).first();
+    await expect(card).toBeVisible({ timeout: 10_000 });
+
+    // Open the desktop kebab (long-press is exercised in 09-mobile; we want
+    // both code paths covered without depending on touch).
+    await card.getByRole('button', { name: 'Mehr Aktionen' }).click();
+
+    // Context sheet appears. The Löschen action is wired to set pendingDeleteId,
+    // which opens the ConfirmSheet (data-testid="confirm-sheet").
+    await page.getByRole('button', { name: /löschen/i }).click();
+
+    const confirmSheet = page.getByTestId('confirm-sheet');
+    await expect(confirmSheet).toBeVisible();
+    await expect(confirmSheet).toContainText(/beitrag löschen/i);
+
+    // Cancel — sheet closes, post stays.
+    await page.getByTestId('confirm-sheet-cancel').click();
+    await expect(confirmSheet).not.toBeVisible();
+    await expect(card).toBeVisible();
+
+    // Reopen, confirm — post is removed from the DOM.
+    await card.getByRole('button', { name: 'Mehr Aktionen' }).click();
+    await page.getByRole('button', { name: /löschen/i }).click();
+    await expect(page.getByTestId('confirm-sheet')).toBeVisible();
+    await page.getByTestId('confirm-sheet-confirm').click();
+    await expect(page.getByTestId('confirm-sheet')).not.toBeVisible();
+    await expect(card).not.toBeVisible({ timeout: 5_000 });
+  });
+});

e2e/specs/03-feed/toast-on-failure.spec.ts

@@ -0,0 +1,53 @@
+/**
+ * The toast store + <Toaster> primitive surfaces ApiError messages on
+ * user-initiated actions that previously failed silently (catch { ignore }).
+ * This spec intercepts the like POST and forces a 429 to assert the German
+ * error message reaches the user via the global toast region.
+ */
+import { test, expect } from '../../fixtures/test';
+import { uploadRaw } from '../../helpers/upload-client';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const SAMPLE_JPG = join(process.cwd(), 'fixtures', 'media', 'sample.jpg');
+
+async function seedUpload(token: string): Promise<{ id: string }> {
+  const res = await uploadRaw(token, readFileSync(SAMPLE_JPG), {
+    filename: 'tf.jpg',
+    contentType: 'image/jpeg',
+    caption: 'Toast fixture',
+  });
+  if (res.status !== 201) throw new Error(`Upload seed failed (${res.status})`);
+  return (await res.json()) as { id: string };
+}
+
+test.describe('Feed — error toast on user action failures', () => {
+  test('like POST 429 surfaces a German error toast', async ({ page, guest, signIn }) => {
+    const author = await guest('ToastAuthor');
+    const liker = await guest('ToastLiker');
+    await seedUpload(author.jwt);
+    await signIn(page, liker);
+
+    // Intercept the like endpoint with a forced rate-limit response.
+    await page.route('**/api/v1/upload/*/like', (route) =>
+      route.fulfill({
+        status: 429,
+        contentType: 'application/json',
+        body: JSON.stringify({ error: 'rate_limited', message: 'Zu viele Anfragen — bitte kurz warten.' }),
+      })
+    );
+
+    await page.goto('/feed');
+    const card = page.locator('article').filter({ hasText: author.displayName }).first();
+    await expect(card).toBeVisible({ timeout: 10_000 });
+
+    // Click the like button in the actions row — first visible match inside the card.
+    await card.locator('button').filter({ hasText: /\d+/ }).first().click();
+
+    // The toast is rendered inside the global Toaster region with aria-live="polite".
+    const toast = page.getByTestId('toast').first();
+    await expect(toast).toBeVisible({ timeout: 3_000 });
+    await expect(toast).toContainText(/Zu viele Anfragen/i);
+    await expect(toast).toHaveAttribute('data-toast-tone', 'error');
+  });
+});

e2e/specs/09-mobile/focus-trap.spec.ts

@@ -0,0 +1,54 @@
+/**
+ * Critical a11y fix — the focusTrap action keeps Tab within open modals
+ * and lets Escape dismiss them, then restores focus to the originating
+ * element. This spec covers the LightboxModal, which is the most-used
+ * focus-trap consumer in the app.
+ */
+import { test, expect } from '../../fixtures/test';
+import { uploadRaw } from '../../helpers/upload-client';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const SAMPLE_JPG = join(process.cwd(), 'fixtures', 'media', 'sample.jpg');
+
+async function seedUpload(token: string): Promise<{ id: string }> {
+  const res = await uploadRaw(token, readFileSync(SAMPLE_JPG), {
+    filename: 'ft.jpg',
+    contentType: 'image/jpeg',
+    caption: 'Focus-trap fixture',
+  });
+  if (res.status !== 201) throw new Error(`Upload seed failed (${res.status})`);
+  return (await res.json()) as { id: string };
+}
+
+test.describe('Mobile a11y — focus trap on LightboxModal', () => {
+  test('Escape closes the lightbox and Tab cycles inside', async ({ page, guest, signIn }) => {
+    const g = await guest('FocusTrap');
+    await seedUpload(g.jwt);
+    await signIn(page, g);
+    await page.goto('/feed');
+
+    const card = page.locator('article').filter({ hasText: g.displayName }).first();
+    const trigger = card.getByRole('button', { name: 'Bild vergrößern' });
+    await expect(trigger).toBeVisible({ timeout: 10_000 });
+    await trigger.click();
+
+    // Lightbox is role="dialog" aria-modal="true".
+    const lightbox = page.locator('[role="dialog"][aria-modal="true"]').filter({ has: page.locator('img, video') });
+    await expect(lightbox).toBeVisible();
+
+    // After opening, focus should be inside the lightbox (trap autoFocus moves
+    // focus to the first focusable). Verify by checking activeElement is
+    // contained.
+    await expect.poll(async () => {
+      return await page.evaluate(() => {
+        const dlg = document.querySelector('[role="dialog"][aria-modal="true"]');
+        return !!dlg && dlg.contains(document.activeElement);
+      });
+    }, { timeout: 2_000 }).toBe(true);
+
+    // Escape dismisses the lightbox.
+    await page.keyboard.press('Escape');
+    await expect(lightbox).not.toBeVisible({ timeout: 2_000 });
+  });
+});

e2e/specs/09-mobile/sheet-escape.spec.ts

@@ -0,0 +1,37 @@
+/**
+ * Critical a11y fix — bottom sheets on /account (data-mode warning and
+ * leave-confirm) now respond to Escape via the focusTrap action. They were
+ * previously click-only, blocking keyboard / switch-control users.
+ */
+import { test, expect } from '../../fixtures/test';
+
+test.describe('Mobile a11y — sheets dismiss on Escape', () => {
+  test('data-mode warning sheet closes on Escape', async ({ page, guest, signIn }) => {
+    const g = await guest('SheetEsc');
+    await signIn(page, g);
+    await page.goto('/account');
+
+    // Click the "Original" radio in the Datennutzung section to open the warning sheet.
+    const originalRadio = page.getByRole('radio', { name: /Original$/i });
+    await originalRadio.click();
+
+    const sheet = page.locator('[role="dialog"][aria-labelledby="data-mode-title"]');
+    await expect(sheet).toBeVisible();
+
+    await page.keyboard.press('Escape');
+    await expect(sheet).not.toBeVisible({ timeout: 2_000 });
+  });
+
+  test('leave-confirm sheet (built on ConfirmSheet) closes on Escape', async ({ page, guest, signIn }) => {
+    const g = await guest('LeaveEsc');
+    await signIn(page, g);
+    await page.goto('/account');
+
+    await page.getByRole('button', { name: /Event verlassen/i }).click();
+    const sheet = page.getByTestId('confirm-sheet');
+    await expect(sheet).toBeVisible();
+
+    await page.keyboard.press('Escape');
+    await expect(sheet).not.toBeVisible({ timeout: 2_000 });
+  });
+});

e2e/specs/09-mobile/upload-cancel-confirm.spec.ts

@@ -0,0 +1,42 @@
+/**
+ * UX fix — tapping X on the upload composer used to silently discard
+ * staged files + caption. Now opens a ConfirmSheet so a mistap from the
+ * corner is recoverable.
+ */
+import { test, expect } from '../../fixtures/test';
+
+test.describe('Mobile — upload composer cancel confirmation', () => {
+  test('typing a caption then tapping X opens the discard ConfirmSheet', async ({ page, guest, signIn }) => {
+    const g = await guest('CancelConf');
+    await signIn(page, g);
+
+    // Land on /upload directly (no staged files; the pending-upload-store is
+    // empty). Typing into the caption flips the dirty flag.
+    await page.goto('/upload');
+
+    const caption = page.getByTestId('upload-caption');
+    await expect(caption).toBeVisible();
+    await caption.fill('a meaningful caption that I do not want to lose');
+
+    // Tap the close (X) button in the composer header.
+    await page.getByRole('button', { name: 'Abbrechen' }).click();
+
+    const sheet = page.getByTestId('confirm-sheet');
+    await expect(sheet).toBeVisible();
+    await expect(sheet).toContainText(/Verwerfen/);
+
+    // Cancel — sheet closes, caption is preserved.
+    await page.getByTestId('confirm-sheet-cancel').click();
+    await expect(sheet).not.toBeVisible();
+    await expect(caption).toHaveValue(/a meaningful caption/);
+  });
+
+  test('with no content, tapping X navigates directly to /feed', async ({ page, guest, signIn }) => {
+    const g = await guest('CancelEmpty');
+    await signIn(page, g);
+    await page.goto('/upload');
+
+    await page.getByRole('button', { name: 'Abbrechen' }).click();
+    await page.waitForURL('**/feed', { timeout: 3_000 });
+  });
+});

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

@@ -0,0 +1,84 @@
+// Focus management for modals/sheets. On mount: focuses the first focusable
+// (or the node itself) and stores the previously-focused element. Tab/Shift+Tab
+// wrap inside the node. Escape calls `onclose` when set. On destroy: restores
+// focus to the originating element so screen-reader / keyboard users land back
+// where they were.
+
+import type { ActionReturn } from 'svelte/action';
+
+export interface FocusTrapOptions {
+	onclose?: () => void;
+	closeOnEscape?: boolean;
+	/** When true, focus the first focusable on mount. Defaults true. */
+	autoFocus?: boolean;
+}
+
+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[] {
+	return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+		(el) => !el.hasAttribute('disabled') && el.offsetParent !== null
+	);
+}
+
+export function focusTrap(
+	node: HTMLElement,
+	options: FocusTrapOptions = {}
+): ActionReturn<FocusTrapOptions> {
+	let opts = options;
+	const previouslyFocused = (typeof document !== 'undefined' ? document.activeElement : null) as HTMLElement | null;
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && opts.closeOnEscape !== false && opts.onclose) {
+			e.preventDefault();
+			opts.onclose();
+			return;
+		}
+		if (e.key !== 'Tab') return;
+		const list = focusables(node);
+		if (list.length === 0) {
+			e.preventDefault();
+			node.focus();
+			return;
+		}
+		const first = list[0];
+		const last = list[list.length - 1];
+		const active = document.activeElement as HTMLElement | null;
+		if (e.shiftKey) {
+			if (active === first || !node.contains(active)) {
+				e.preventDefault();
+				last.focus();
+			}
+		} else {
+			if (active === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		}
+	}
+
+	node.addEventListener('keydown', onKeyDown);
+
+	if (opts.autoFocus !== false) {
+		// Defer one frame so the element is fully laid out (sheets animate in).
+		requestAnimationFrame(() => {
+			const list = focusables(node);
+			const target = list[0] ?? node;
+			if (!node.hasAttribute('tabindex')) node.setAttribute('tabindex', '-1');
+			target.focus({ preventScroll: true });
+		});
+	}
+
+	return {
+		update(newOptions) {
+			opts = newOptions;
+		},
+		destroy() {
+			node.removeEventListener('keydown', onKeyDown);
+			if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
+				try { previouslyFocused.focus({ preventScroll: true }); } catch { /* element may have unmounted */ }
+			}
+		}
+	};
+}

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

@@ -0,0 +1,82 @@
+// Pull-to-refresh gesture. Only engages when the page is scrolled to the top.
+// Calls `onrefresh` once `threshold` px of overscroll have been pulled. The
+// element should set `overscroll-behavior-y: contain` so the browser doesn't
+// hijack the gesture (mobile Chrome's built-in refresh).
+//
+// `onpull` fires during the drag with `delta` (px pulled, clamped ≥ 0) and a
+// `progress` ratio (0–1+). Consumers can use it to render a growing indicator
+// that closes the visual loop before the refresh actually starts.
+
+import type { ActionReturn } from 'svelte/action';
+
+export interface PullToRefreshOptions {
+	onrefresh: () => void | Promise<void>;
+	onpull?: (delta: number, progress: number) => void;
+	threshold?: number;
+	disabled?: boolean;
+}
+
+export function pullToRefresh(
+	node: HTMLElement,
+	options: PullToRefreshOptions
+): ActionReturn<PullToRefreshOptions> {
+	let opts = options;
+	let startY = 0;
+	let pulling = false;
+	let triggered = false;
+
+	function scroller(): HTMLElement | (Window & typeof globalThis) {
+		return node.scrollHeight > node.clientHeight ? node : window;
+	}
+
+	function scrollTop(): number {
+		const s = scroller();
+		return s instanceof Window ? window.scrollY : s.scrollTop;
+	}
+
+	function reportPull(delta: number) {
+		if (!opts.onpull) return;
+		const threshold = opts.threshold ?? 60;
+		opts.onpull(Math.max(0, delta), Math.max(0, delta) / threshold);
+	}
+
+	function onTouchStart(e: TouchEvent) {
+		if (opts.disabled) return;
+		if (scrollTop() > 0) return;
+		startY = e.touches[0].clientY;
+		pulling = true;
+		triggered = false;
+	}
+
+	function onTouchMove(e: TouchEvent) {
+		if (!pulling || triggered) return;
+		const delta = e.touches[0].clientY - startY;
+		reportPull(delta);
+		if (delta > (opts.threshold ?? 60)) {
+			triggered = true;
+			void opts.onrefresh();
+		}
+	}
+
+	function onTouchEnd() {
+		if (pulling && !triggered) reportPull(0);
+		pulling = false;
+	}
+
+	node.addEventListener('touchstart', onTouchStart, { passive: true });
+	node.addEventListener('touchmove', onTouchMove, { passive: true });
+	node.addEventListener('touchend', onTouchEnd);
+	node.addEventListener('touchcancel', onTouchEnd);
+
+	return {
+		update(newOptions) {
+			opts = newOptions;
+		},
+		destroy() {
+			node.removeEventListener('touchstart', onTouchStart);
+			node.removeEventListener('touchmove', onTouchMove);
+			node.removeEventListener('touchend', onTouchEnd);
+			node.removeEventListener('touchcancel', onTouchEnd);
+		}
+	};
+}

frontend/src/lib/auth.ts

@@ -69,12 +69,28 @@ export function setAuth(jwt: string, pin: string | null, userId: string, display
 	isAuthenticated.set(true);
 }
 
+// Hook registry: cross-cutting stores (export-status, etc.) register a callback
+// here at import-time so they get reset on every clearAuth path — both the
+// explicit "Event verlassen" button and the api.ts 401 auto-clear. Keeps
+// clearAuth the single source of truth without baking dependencies on every
+// downstream store into this module (which would create circular imports).
+const clearAuthHooks: Array<() => void> = [];
+export function onClearAuth(fn: () => void): void {
+	clearAuthHooks.push(fn);
+}
+
 export function clearAuth(): void {
 	if (!browser) return;
 	localStorage.removeItem(TOKEN_KEY);
 	localStorage.removeItem(USER_ID_KEY);
 	// PIN is intentionally kept so the user can recover
 	isAuthenticated.set(false);
+	// Hooks fire in registration order. Keep them dependency-free of each other —
+	// if you ever need ordering, introduce a priority field rather than relying
+	// on import-load timing, which is fragile across refactors.
+	for (const fn of clearAuthHooks) {
+		try { fn(); } catch { /* hook failure is non-fatal */ }
+	}
 }
 
 export function getRole(): 'guest' | 'host' | 'admin' | null {

frontend/src/lib/avatar.ts

@@ -0,0 +1,28 @@
+// Deterministic avatar palette + initials, used by feed cards and the account page.
+// Dark variants are baked in so the palette reads correctly on both themes.
+
+const PALETTE = [
+	'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200',
+	'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200',
+	'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-200',
+	'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200',
+	'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200',
+	'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-200'
+];
+
+const NEUTRAL = 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400';
+
+export function avatarPalette(name: string | null | undefined): string {
+	if (!name) return NEUTRAL;
+	let hash = 0;
+	for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
+	return PALETTE[hash % PALETTE.length];
+}
+
+export function initials(name: string | null | undefined): string {
+	if (!name) return '?';
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return '?';
+	if (words.length === 1) return words[0][0].toUpperCase();
+	return (words[0][0] + words[1][0]).toUpperCase();
+}

frontend/src/lib/components/BottomNav.svelte

@@ -1,16 +1,29 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { uploadSheetOpen, uploadBadgeCount } from '$lib/ui-store';
+	import { exportStatus, initExportStatus } from '$lib/export-status-store';
 
 	function isActive(path: string): boolean {
 		return $page.url.pathname.startsWith(path);
 	}
+
+	onMount(() => {
+		// Hydrate export status once when the bottom nav first mounts (i.e. the user
+		// is authenticated). Subsequent SSE events update the snapshot live so the
+		// Export tab can fade in mid-session.
+		initExportStatus();
+	});
+
+	let showExport = $derived($exportStatus.released);
+	let zipReady = $derived($exportStatus.zip?.status === 'done');
 </script>
 
 <!-- Bottom navigation bar — fixed, full-width, safe-area aware -->
 <nav
 	class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90"
 	style="padding-bottom: env(safe-area-inset-bottom)"
+	data-testid="bottom-nav"
 >
 	<div class="mx-auto flex h-14 max-w-2xl items-end justify-around px-4 pb-1">
 		<!-- Feed tab -->
@@ -49,6 +62,25 @@
 			</button>
 		</div>
 
+		<!-- Export tab — appears only when the host has released the export. -->
+		{#if showExport}
+			<a
+				href="/export"
+				data-testid="bottom-nav-export"
+				class="relative flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
+					{isActive('/export') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
+				aria-label="Export"
+			>
+				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+				</svg>
+				<span>Export</span>
+				{#if zipReady}
+					<span class="absolute right-2 top-0 h-2 w-2 rounded-full bg-blue-500" aria-hidden="true"></span>
+				{/if}
+			</a>
+		{/if}
+
 		<!-- Account tab -->
 		<a
 			href="/account"

frontend/src/lib/components/CameraCapture.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { vibrate } from '$lib/haptics';
 
 	interface Props {
 		oncapture: (blob: Blob, type: 'photo' | 'video') => void;
@@ -12,6 +13,7 @@
 	let canvasEl: HTMLCanvasElement = $state()!;
 	let stream: MediaStream | null = $state(null);
 	let facingMode = $state<'environment' | 'user'>('environment');
+	let mode = $state<'photo' | 'video'>('photo');
 	let recording = $state(false);
 	let recordingTime = $state(0);
 	let error = $state<string | null>(null);
@@ -19,6 +21,17 @@
 	let recordedChunks: Blob[] = [];
 	let recordingInterval: ReturnType<typeof setInterval> | null = null;
 
+	function handleShutter() {
+		vibrate(15);
+		if (mode === 'photo') {
+			capturePhoto();
+		} else if (recording) {
+			stopRecording();
+		} else {
+			startRecording();
+		}
+	}
+
 	onMount(() => {
 		startCamera();
 	});
@@ -172,44 +185,74 @@
 
 	<!-- Controls -->
 	{#if !error}
-		<div class="flex items-center justify-center gap-8 bg-black/80 px-4 py-6">
+		<!-- Mode toggle — segmented control above the shutter. Hidden while recording. -->
+		{#if !recording}
+			<div class="flex justify-center bg-black/80 pt-3 pb-1">
+				<div
+					class="inline-flex rounded-full bg-white/10 p-0.5"
+					role="tablist"
+					aria-label="Aufnahmemodus"
+					data-testid="camera-mode"
+				>
+					<button
+						type="button"
+						role="tab"
+						aria-selected={mode === 'photo'}
+						onclick={() => (mode = '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'}"
+					>
+						Foto
+					</button>
+					<button
+						type="button"
+						role="tab"
+						aria-selected={mode === 'video'}
+						onclick={() => (mode = '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'}"
+					>
+						Video
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		<div class="flex items-center justify-center gap-8 bg-black/80 px-4 pt-4 pb-6" style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)">
 			<!-- Close -->
 			<button
 				onclick={onclose}
-				class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
-				aria-label="Schliessen"
+				class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
+				aria-label="Schließen"
 			>
 				<svg class="h-6 w-6" 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" />
 				</svg>
 			</button>
 
-			<!-- Capture photo / record video -->
-			{#if recording}
-				<button
-					onclick={stopRecording}
-					class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-red-600"
-					aria-label="Aufnahme stoppen"
-				>
-					<div class="h-6 w-6 rounded-sm bg-white"></div>
-				</button>
-			{:else}
-				<button
-					onclick={capturePhoto}
-					class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-white/20 transition active:bg-white/40"
-					aria-label="Foto aufnehmen"
-				>
+			<!-- Shutter — single button, behaviour depends on mode + recording state. -->
+			<button
+				onclick={handleShutter}
+				data-testid="camera-shutter"
+				class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white transition active:scale-95 {recording ? 'bg-red-600' : 'bg-white/20'}"
+				aria-label={mode === 'photo' ? 'Foto aufnehmen' : recording ? 'Aufnahme stoppen' : 'Video aufnehmen'}
+			>
+				{#if mode === 'photo'}
 					<div class="h-12 w-12 rounded-full bg-white"></div>
-				</button>
-			{/if}
+				{:else if recording}
+					<div class="h-6 w-6 rounded-sm bg-white"></div>
+				{:else}
+					<div class="h-10 w-10 rounded-full bg-red-500"></div>
+				{/if}
+			</button>
 
-			<!-- Toggle camera / start recording -->
+			<!-- Toggle camera (hidden while recording to discourage interruption). -->
 			{#if recording}
 				<div class="h-12 w-12"></div>
 			{:else}
 				<button
 					onclick={toggleCamera}
-					class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
+					class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
 					aria-label="Kamera wechseln"
 				>
 					<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -218,19 +261,6 @@
 				</button>
 			{/if}
 		</div>
-
-		<!-- Video record button -->
-		{#if !recording}
-			<div class="flex justify-center bg-black/80 pb-4">
-				<button
-					onclick={startRecording}
-					class="flex items-center gap-2 rounded-full bg-red-600/80 px-4 py-2 text-sm text-white transition hover:bg-red-600"
-				>
-					<div class="h-2.5 w-2.5 rounded-full bg-white"></div>
-					Video aufnehmen
-				</button>
-			</div>
-		{/if}
 	{/if}
 </div>
 

frontend/src/lib/components/ConfirmSheet.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" module>
+	// Per-instance id counter so two ConfirmSheets coexisting (e.g. one closing
+	// as another opens) don't share the same aria-labelledby target and confuse AT.
+	let nextId = 0;
+</script>
+
+<script lang="ts">
+	import { focusTrap } from '$lib/actions/focus-trap';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		message?: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		tone?: 'default' | 'danger';
+		onConfirm: () => void | Promise<void>;
+		onCancel: () => void;
+	}
+
+	let {
+		open,
+		title,
+		message,
+		confirmLabel = 'Bestätigen',
+		cancelLabel = 'Abbrechen',
+		tone = 'default',
+		onConfirm,
+		onCancel
+	}: Props = $props();
+
+	const titleId = `confirm-sheet-title-${++nextId}`;
+	let busy = $state(false);
+
+	async function handleConfirm() {
+		if (busy) return;
+		busy = true;
+		try {
+			await onConfirm();
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+{#if open}
+	<!-- Backdrop is a real <button> so keyboard / switch-control users get parity with the mouse path. -->
+	<button
+		type="button"
+		class="fixed inset-0 z-50 bg-black/40"
+		aria-label="Schließen"
+		onclick={onCancel}
+		tabindex="-1"
+	></button>
+	<div
+		class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
+		style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={titleId}
+		data-testid="confirm-sheet"
+		use:focusTrap={{ onclose: onCancel }}
+	>
+		<div class="mb-4 flex justify-center">
+			<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
+		</div>
+		<h3 id={titleId} class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">
+			{title}
+		</h3>
+		{#if message}
+			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">{message}</p>
+		{:else}
+			<div class="mb-4"></div>
+		{/if}
+		<button
+			type="button"
+			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'
+				? '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'}"
+		>
+			{confirmLabel}
+		</button>
+		<button
+			type="button"
+			onclick={onCancel}
+			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"
+		>
+			{cancelLabel}
+		</button>
+	</div>
+{/if}

frontend/src/lib/components/ContextSheet.svelte

@@ -24,6 +24,48 @@
 
 	let { open, actions, onClose, title }: Props = $props();
 
+	let sheet = $state<HTMLDivElement | null>(null);
+	let returnFocus: HTMLElement | null = null;
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			onClose();
+			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();
+		}
+	}
+
+	// Focus the first action and attach a global keydown listener only while open.
+	// The sheet stays mounted (translate-y animation), so this is wired via $effect
+	// rather than use:focusTrap (which would activate on first mount).
+	$effect(() => {
+		if (open) {
+			returnFocus = (document.activeElement as HTMLElement | null) ?? null;
+			requestAnimationFrame(() => {
+				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;
+		}
+	});
+
 	async function handle(action: ContextAction) {
 		if (action.disabled) return;
 		try {
@@ -34,24 +76,28 @@
 	}
 </script>
 
-<!-- Backdrop -->
-<div
+<!-- 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-200"
 	class:opacity-0={!open}
 	class:pointer-events-none={!open}
 	class:opacity-100={open}
 	onclick={onClose}
-	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-200 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"
+	tabindex="-1"
 >
 	<div class="flex justify-center pt-3 pb-1">
 		<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>

frontend/src/lib/components/FeedListCard.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { FeedUpload } from '$lib/types';
 	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
 	import { longpress } from '$lib/actions/longpress';
 	import { doubletap } from '$lib/actions/doubletap';
+	import { avatarPalette, initials } from '$lib/avatar';
+	import { vibrate } from '$lib/haptics';
+	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;
@@ -39,28 +46,42 @@
 		return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
 	}
 
-	function initial(name: string): string {
-		return name[0]?.toUpperCase() ?? '?';
-	}
-
-	// Deterministic color from name
-	const COLORS = [
-		'bg-blue-100 text-blue-700',
-		'bg-purple-100 text-purple-700',
-		'bg-green-100 text-green-700',
-		'bg-amber-100 text-amber-700',
-		'bg-rose-100 text-rose-700',
-		'bg-teal-100 text-teal-700'
-	];
-	function avatarColor(name: string): string {
-		let hash = 0;
-		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
-		return COLORS[hash % COLORS.length];
-	}
-
 	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);
+	}
+
+	function handleDoubleTap() {
+		if (singleTapTimer) {
+			clearTimeout(singleTapTimer);
+			singleTapTimer = null;
+		}
+		heartBurst = true;
+		vibrate(10);
+		onlike(upload.id);
+		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.
+	onDestroy(() => {
+		if (singleTapTimer) {
+			clearTimeout(singleTapTimer);
+			singleTapTimer = null;
+		}
+	});
 </script>
 
 <article
@@ -73,9 +94,9 @@
 		<div class="flex min-w-0 items-center gap-3">
 			<div
 				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
-					{avatarColor(upload.uploader_name)}"
+					{avatarPalette(upload.uploader_name)}"
 			>
-				{initial(upload.uploader_name)}
+				{initials(upload.uploader_name)}
 			</div>
 			<div class="min-w-0">
 				<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p>
@@ -88,7 +109,7 @@
 			<button
 				type="button"
 				onclick={(e) => { e.stopPropagation(); openContext(); }}
-				class="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				class="rounded-full p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:active:bg-gray-800 dark:hover:text-gray-200"
 				aria-label="Mehr Aktionen"
 			>
 				<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
@@ -98,12 +119,13 @@
 
 	<!-- Media -->
 	<button
-		class="block w-full"
-		onclick={() => onselect(upload)}
+		class="relative block w-full"
+		onclick={handleMediaClick}
 		use:doubletap
-		ondoubletap={() => onlike(upload.id)}
+		ondoubletap={handleDoubleTap}
 		aria-label="Bild vergrößern"
 	>
+		<HeartBurst active={heartBurst} />
 		{#if isVideo(upload.mime_type)}
 			<div class="relative aspect-video w-full bg-gray-900">
 				{#if upload.thumbnail_url || upload.preview_url}
@@ -141,9 +163,9 @@
 	<!-- Actions row -->
 	<div class="flex items-center gap-4 px-4 py-2">
 		<button
-			onclick={() => onlike(upload.id)}
+			onclick={() => { vibrate(10); onlike(upload.id); }}
 			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 dark:text-gray-400 dark:hover:text-red-400'}"
+				{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'}"
 		>
 			<svg
 				class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
@@ -158,7 +180,7 @@
 		</button>
 		<button
 			onclick={() => oncomment(upload.id)}
-			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400"
+			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 active:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 dark:active:text-blue-400"
 		>
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" 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" />

frontend/src/lib/components/HashtagChips.svelte

@@ -20,7 +20,7 @@
 			class="shrink-0 rounded-full px-3 py-1 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 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
+					: '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'
 			}"
 		>
 			Alle
@@ -30,8 +30,8 @@
 				onclick={() => onselect(h.tag)}
 				class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
 					selected === h.tag
-						? 'bg-blue-600 text-white'
-						: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+						? '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'
 				}"
 			>
 				#{h.tag}

frontend/src/lib/components/HeartBurst.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	interface Props {
+		active: boolean;
+	}
+	let { active }: Props = $props();
+</script>
+
+<style>
+	@keyframes heart-burst {
+		0% { transform: scale(0.5); opacity: 0; }
+		30% { transform: scale(1.2); opacity: 1; }
+		70% { transform: scale(1); opacity: 1; }
+		100% { transform: scale(1.4); opacity: 0; }
+	}
+</style>
+
+{#if active}
+	<span
+		class="pointer-events-none absolute inset-0 flex items-center justify-center"
+		aria-hidden="true"
+		data-testid="heart-burst"
+	>
+		<svg
+			class="h-24 w-24 text-red-500 drop-shadow-lg"
+			style="animation: heart-burst 700ms ease-out forwards;"
+			fill="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z" />
+		</svg>
+	</span>
+{/if}

frontend/src/lib/components/LightboxModal.svelte

@@ -4,6 +4,12 @@
 	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 { toastError } from '$lib/toast-store';
+	import { vibrate } from '$lib/haptics';
+	import HeartBurst from './HeartBurst.svelte';
+
+	const COMMENT_MAX = 500;
 
 	interface CommentDto {
 		id: string;
@@ -32,6 +38,7 @@
 
 	function triggerHeartBurst() {
 		heartBurst = true;
+		vibrate(10);
 		onlike(upload.id);
 		setTimeout(() => (heartBurst = false), 700);
 	}
@@ -44,7 +51,7 @@
 		try {
 			comments = await api.get<CommentDto[]>(`/upload/${upload.id}/comments`);
 		} catch {
-			// Ignore
+			// Background fetch — failure leaves the panel empty; reopening the lightbox retries.
 		}
 	}
 
@@ -57,8 +64,8 @@
 			});
 			comments = [...comments, comment];
 			newComment = '';
-		} catch {
-			// Ignore
+		} catch (e) {
+			toastError(e);
 		} finally {
 			loading = false;
 		}
@@ -68,8 +75,8 @@
 		try {
 			await api.delete(`/comment/${id}`);
 			comments = comments.filter((c) => c.id !== id);
-		} catch {
-			// Ignore
+		} catch (e) {
+			toastError(e);
 		}
 	}
 
@@ -77,10 +84,6 @@
 		return mime.startsWith('video/');
 	}
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') onclose();
-	}
-
 	function formatTime(iso: string): string {
 		return new Date(iso).toLocaleString('de-DE', {
 			day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
@@ -88,22 +91,21 @@
 	}
 </script>
 
-<style>
-	@keyframes heart-burst {
-		0% { transform: scale(0.5); opacity: 0; }
-		30% { transform: scale(1.2); opacity: 1; }
-		70% { transform: scale(1); opacity: 1; }
-		100% { transform: scale(1.4); opacity: 0; }
-	}
-</style>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4" role="dialog">
+<div
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+	role="dialog"
+	aria-modal="true"
+	aria-labelledby="lightbox-title"
+	use:focusTrap={{ onclose }}
+>
 	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900">
 		<!-- Media -->
 		<div class="relative bg-black">
-			<button onclick={onclose} class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70">
+			<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"
+			>
 				<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" />
 				</svg>
@@ -117,33 +119,19 @@
 					<video
 						src={mediaSrc}
 						controls
-						class="max-h-[50vh] w-full object-contain"
+						class="max-h-[60vh] w-full object-contain"
 						poster={upload.thumbnail_url ?? undefined}
 					></video>
 				{:else}
 					<img
 						src={mediaSrc}
 						alt=""
-						class="max-h-[50vh] w-full object-contain select-none"
+						class="max-h-[60vh] w-full object-contain select-none"
 						draggable="false"
 					/>
 				{/if}
 
-				{#if heartBurst}
-					<span
-						class="pointer-events-none absolute inset-0 flex items-center justify-center"
-						aria-hidden="true"
-					>
-						<svg
-							class="h-24 w-24 text-red-500 drop-shadow-lg"
-							style="animation: heart-burst 700ms ease-out forwards;"
-							fill="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z" />
-						</svg>
-					</span>
-				{/if}
+				<HeartBurst active={heartBurst} />
 			</div>
 		</div>
 
@@ -152,7 +140,7 @@
 			<div class="border-b border-gray-100 p-3 dark:border-gray-800">
 				<div class="flex items-center justify-between">
 					<div>
-						<span class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
+						<span id="lightbox-title" class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
 						<span class="ml-2 text-xs text-gray-400 dark:text-gray-500">{formatTime(upload.created_at)}</span>
 					</div>
 					<button
@@ -207,22 +195,35 @@
 			<!-- Comment input -->
 			<form
 				onsubmit={(e) => { e.preventDefault(); submitComment(); }}
-				class="flex gap-2 border-t border-gray-100 p-3 dark:border-gray-800"
+				class="border-t border-gray-100 p-3 dark:border-gray-800"
 			>
-				<input
-					type="text"
-					bind:value={newComment}
-					placeholder="Kommentar schreiben..."
-					maxlength={500}
-					class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
-				/>
-				<button
-					type="submit"
-					disabled={loading || !newComment.trim()}
-					class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
+				<div class="flex gap-2">
+					<input
+						type="text"
+						bind:value={newComment}
+						placeholder="Kommentar schreiben..."
+						maxlength={COMMENT_MAX}
+						class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+					/>
+					<button
+						type="submit"
+						disabled={loading || !newComment.trim()}
+						class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 active:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
+					>
+						Senden
+					</button>
+				</div>
+				<div
+					class="mt-1 text-right text-xs"
+					class:text-gray-400={newComment.length < 450}
+					class:dark:text-gray-500={newComment.length < 450}
+					class:text-amber-600={newComment.length >= 450 && newComment.length < COMMENT_MAX}
+					class:dark:text-amber-400={newComment.length >= 450 && newComment.length < COMMENT_MAX}
+					class:text-red-600={newComment.length >= COMMENT_MAX}
+					class:dark:text-red-400={newComment.length >= COMMENT_MAX}
 				>
-					Senden
-				</button>
+					{newComment.length}/{COMMENT_MAX}
+				</div>
 			</form>
 		</div>
 	</div>

frontend/src/lib/components/Modal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { focusTrap } from '$lib/actions/focus-trap';
+	import type { Snippet } from 'svelte';
+
+	// Accessible name is REQUIRED. Pass `titleId` when the dialog renders its own
+	// visible heading (the common case — link aria-labelledby to that heading's id),
+	// or `ariaLabel` for dialogs without a visible title (e.g. an image preview).
+	// Failing to provide either leaves the dialog without an accessible name,
+	// which screen readers announce as just "dialog" — useless. The runtime
+	// warning below catches missed cases during dev.
+	interface Props {
+		open: boolean;
+		titleId?: string;
+		ariaLabel?: string;
+		onClose: () => void;
+		closeOnBackdrop?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		open,
+		titleId,
+		ariaLabel,
+		onClose,
+		closeOnBackdrop = true,
+		children
+	}: Props = $props();
+
+	$effect(() => {
+		if (open && !titleId && !ariaLabel && typeof console !== 'undefined') {
+			console.warn('<Modal> opened without titleId or ariaLabel — dialog has no accessible name.');
+		}
+	});
+</script>
+
+{#if open}
+	<button
+		type="button"
+		class="fixed inset-0 z-50 bg-black/50"
+		aria-label="Schließen"
+		tabindex="-1"
+		onclick={closeOnBackdrop ? onClose : () => {}}
+	></button>
+	<div
+		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={titleId}
+		aria-label={titleId ? undefined : ariaLabel}
+		use:focusTrap={{ onclose: onClose }}
+	>
+		<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+			{@render children()}
+		</div>
+	</div>
+{/if}

frontend/src/lib/components/OnboardingGuide.svelte

@@ -2,6 +2,8 @@
 	import { browser } from '$app/environment';
 	import { privacyNote } from '$lib/privacy-note-store';
 	import { themePreference, type ThemePreference } from '$lib/theme-store';
+	import { focusTrap } from '$lib/actions/focus-trap';
+	import { vibrate } from '$lib/haptics';
 
 	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
 
@@ -36,6 +38,12 @@
 			title: 'Hashtags nutzen',
 			body: 'Füge in deiner Bildunterschrift #hashtags ein, um Fotos zu gruppieren — z.B. #tanz, #buffet oder #reden. Du kannst danach filtern.'
 		},
+		{
+			kind: 'text',
+			icon: '👆',
+			title: 'Lange tippen für mehr',
+			body: 'Tippe lange auf ein Bild im Feed, um zusätzliche Aktionen zu öffnen — zum Beispiel das Original anzeigen oder eigene Beiträge löschen.'
+		},
 		{
 			kind: 'theme',
 			icon: '🌗',
@@ -74,29 +82,49 @@
 
 	function dismiss() {
 		if (browser) localStorage.setItem(GUIDE_SEEN_KEY, '1');
+		vibrate([0, 8, 60, 8]);
 		visible = false;
 	}
+
+	function goToStep(i: number) {
+		if (i >= 0 && i < steps.length) step = i;
+	}
 </script>
 
 {#if visible}
 	<!-- Backdrop -->
 	<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center">
-		<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl">
-			<!-- Step indicator -->
-			<div class="mb-5 flex justify-center gap-1.5">
+		<div
+			class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="onboarding-title"
+			use:focusTrap={{ onclose: dismiss }}
+		>
+			<!-- 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. -->
+			<div class="mb-3 flex justify-center">
 				{#each steps as _, i}
-					<div
-						class="h-1.5 rounded-full transition-all {i === step
-							? 'w-6 bg-blue-600 dark:bg-blue-500'
-							: 'w-1.5 bg-gray-200 dark:bg-gray-700'}"
-					></div>
+					<button
+						type="button"
+						onclick={() => goToStep(i)}
+						aria-label={`Schritt ${i + 1}`}
+						aria-current={i === step ? 'step' : undefined}
+						class="flex items-center justify-center p-2.5"
+					>
+						<span
+							class="block rounded-full transition-all {i === step
+								? 'h-1.5 w-6 bg-blue-600 dark:bg-blue-500'
+								: 'h-1.5 w-1.5 bg-gray-200 dark:bg-gray-700'}"
+						></span>
+					</button>
 				{/each}
 			</div>
 
 			<!-- Content -->
 			<div class="mb-6 text-center">
 				<div class="mb-3 text-5xl">{currentStep.icon}</div>
-				<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
+				<h2 id="onboarding-title" class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
 					{currentStep.title}
 				</h2>
 
@@ -148,13 +176,13 @@
 			<div class="flex gap-2">
 				<button
 					onclick={dismiss}
-					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
+					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-600 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"
 				>
 					Überspringen
 				</button>
 				<button
 					onclick={next}
-					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
+					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 				>
 					{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
 				</button>

frontend/src/lib/components/Skeleton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	interface Props {
+		variant?: 'card' | 'tile';
+	}
+	let { variant = 'card' }: Props = $props();
+</script>
+
+{#if variant === 'card'}
+	<article class="animate-pulse bg-white dark:bg-gray-900" aria-hidden="true">
+		<div class="flex items-center gap-3 px-4 py-3">
+			<div class="h-9 w-9 rounded-full bg-gray-200 dark:bg-gray-800"></div>
+			<div class="flex-1 space-y-1.5">
+				<div class="h-3 w-32 rounded bg-gray-200 dark:bg-gray-800"></div>
+				<div class="h-2.5 w-20 rounded bg-gray-200 dark:bg-gray-800"></div>
+			</div>
+		</div>
+		<!-- 4:5 matches the typical portrait card better than a square; reduces layout shift on first paint. -->
+		<div class="aspect-[4/5] w-full bg-gray-200 dark:bg-gray-800"></div>
+		<div class="flex gap-4 px-4 py-3">
+			<div class="h-4 w-10 rounded bg-gray-200 dark:bg-gray-800"></div>
+			<div class="h-4 w-10 rounded bg-gray-200 dark:bg-gray-800"></div>
+		</div>
+		<div class="border-b border-gray-100 dark:border-gray-800"></div>
+	</article>
+{:else}
+	<div class="aspect-square animate-pulse bg-gray-200 dark:bg-gray-800" aria-hidden="true"></div>
+{/if}

frontend/src/lib/components/Toaster.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { toasts, dismissToast, type Toast } from '$lib/toast-store';
+
+	function toneClasses(tone: Toast['tone']): string {
+		switch (tone) {
+			case 'success':
+				return 'bg-green-600 text-white dark:bg-green-500';
+			case 'warning':
+				return 'bg-amber-500 text-white dark:bg-amber-400 dark:text-gray-900';
+			case 'error':
+				return 'bg-red-600 text-white dark:bg-red-500';
+			default:
+				return 'bg-gray-900 text-white dark:bg-gray-800';
+		}
+	}
+</script>
+
+<div
+	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)}
+		<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)}"
+			data-testid="toast"
+			data-toast-tone={t.tone}
+		>
+			{t.message}
+		</button>
+	{/each}
+</div>

frontend/src/lib/export-status-store.ts

@@ -0,0 +1,62 @@
+// Single source of truth for "is export released and is the ZIP ready?". Used
+// by the BottomNav to surface the Export tab on demand, and by the export
+// page to render status. Hydrates lazily on first subscribe; reacts to the
+// `export-progress` / `export-available` SSE events so the nav updates live.
+
+import { writable } from 'svelte/store';
+import { api } from './api';
+import { onSseEvent } from './sse';
+import { getToken, onClearAuth } from './auth';
+
+export interface ExportJob {
+	status: 'locked' | 'pending' | 'running' | 'done' | 'failed';
+	progress_pct: number;
+}
+
+export interface ExportStatusSnapshot {
+	released: boolean;
+	zip: ExportJob | null;
+	html: ExportJob | null;
+}
+
+const empty: ExportStatusSnapshot = { released: false, zip: null, html: null };
+
+export const exportStatus = writable<ExportStatusSnapshot>(empty);
+
+let hydrated = false;
+let sseUnsubs: Array<() => void> = [];
+
+export async function refreshExportStatus(): Promise<void> {
+	if (!getToken()) return;
+	try {
+		const data = await api.get<ExportStatusSnapshot>('/export/status');
+		exportStatus.set(data);
+	} catch {
+		// /export/status can 403 for guests on locked events; that's expected.
+		exportStatus.set(empty);
+	}
+}
+
+export function initExportStatus(): void {
+	if (hydrated) return;
+	hydrated = true;
+	void refreshExportStatus();
+	sseUnsubs.push(onSseEvent('export-progress', () => { void refreshExportStatus(); }));
+	sseUnsubs.push(onSseEvent('export-available', () => { void refreshExportStatus(); }));
+}
+
+export function teardownExportStatus(): void {
+	for (const u of sseUnsubs) u();
+	sseUnsubs = [];
+	hydrated = false;
+	exportStatus.set(empty);
+}
+
+// Auto-reset on every clearAuth path (explicit logout + api.ts 401 auto-clear).
+// Imported for side-effect by anyone who pulls in this module — the BottomNav
+// does that statically, and BottomNav itself is statically imported by
+// +layout.svelte, so this side-effect runs at app boot, well before any API
+// call can 401. If a future refactor lazy-loads the BottomNav (dynamic import,
+// route-level code-split), move the side-effect to +layout.svelte's onMount
+// so the hook isn't gated on a conditional component.
+onClearAuth(teardownExportStatus);

frontend/src/lib/haptics.ts

@@ -0,0 +1,7 @@
+// Mobile haptic ticks. No-ops on browsers without navigator.vibrate (iOS Safari).
+
+export function vibrate(pattern: number | number[]): void {
+	if (typeof navigator === 'undefined') return;
+	if (typeof navigator.vibrate !== 'function') return;
+	try { navigator.vibrate(pattern); } catch { /* permission denied / not supported */ }
+}

frontend/src/lib/toast-store.ts

@@ -0,0 +1,40 @@
+import { writable } from 'svelte/store';
+import { ApiError } from './api';
+
+export type ToastTone = 'info' | 'success' | 'warning' | 'error';
+
+export interface Toast {
+	id: number;
+	message: string;
+	tone: ToastTone;
+	ttl: number;
+}
+
+let nextId = 0;
+const timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+export const toasts = writable<Toast[]>([]);
+
+export function toast(message: string, tone: ToastTone = 'info', ttl = 4000): number {
+	const id = ++nextId;
+	const entry: Toast = { id, message, tone, ttl };
+	toasts.update((list) => [...list, entry]);
+	if (ttl > 0 && typeof window !== 'undefined') {
+		timers.set(id, setTimeout(() => dismissToast(id), ttl));
+	}
+	return id;
+}
+
+export function dismissToast(id: number): void {
+	const t = timers.get(id);
+	if (t) { clearTimeout(t); timers.delete(id); }
+	toasts.update((list) => list.filter((x) => x.id !== id));
+}
+
+// User-action error surface. Pulls the German message off ApiError; for
+// anything else, falls back to a generic line so the user sees *something*.
+export function toastError(err: unknown, fallback = 'Etwas ist schiefgelaufen.'): number {
+	if (err instanceof ApiError) return toast(err.message || fallback, 'error', 5000);
+	if (err instanceof Error && err.message) return toast(err.message, 'error', 5000);
+	return toast(fallback, 'error', 5000);
+}

frontend/src/routes/+layout.svelte

@@ -6,6 +6,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import BottomNav from '$lib/components/BottomNav.svelte';
 	import UploadSheet from '$lib/components/UploadSheet.svelte';
+	import Toaster from '$lib/components/Toaster.svelte';
 	import { showBottomNav } from '$lib/ui-store';
 	import { isAuthenticated } from '$lib/auth';
 	import { queueItems, isProcessing } from '$lib/upload-queue';
@@ -39,7 +40,8 @@
 				const ctx = await api.get<MeContextDto>('/me/context');
 				privacyNote.set(ctx.privacy_note);
 			} catch {
-				// non-fatal; users without a session land on /join anyway
+				// Cross-cutting hydration on boot — failure is non-fatal; users without
+				// a session land on /join anyway, and the per-page mount will retry.
 			}
 			void refreshQuota();
 		}
@@ -49,12 +51,15 @@
 		// `currentPin` store carries the change into any page that reads it (My
 		// Account in particular).
 		unsubs.push(
+			// Server contract: `data` is a JSON string of the shape `{ user_id: UUID }`.
+			// We clear the cached PIN only for our own user; admin resets for other guests
+			// arrive on the same channel but aren't ours to act on.
 			onSseEvent('pin-reset', (data) => {
 				try {
 					const payload = JSON.parse(data) as { user_id: string };
 					if (payload.user_id === getUserId()) clearPin();
 				} catch {
-					// ignore malformed payload
+					// Malformed payload — discard; nothing actionable for the user.
 				}
 			})
 		);
@@ -90,3 +95,5 @@
 {#if $showBottomNav && $isAuthenticated}
 	<BottomNav />
 {/if}
+
+<Toaster />

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

@@ -9,6 +9,10 @@
 	import { privacyNote } from '$lib/privacy-note-store';
 	import { quotaStore, refreshQuota } from '$lib/quota-store';
 	import { onSseEvent } from '$lib/sse';
+	import { focusTrap } from '$lib/actions/focus-trap';
+	import { avatarPalette, initials } from '$lib/avatar';
+	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
+	import { vibrate } from '$lib/haptics';
 	import type { MeContextDto } from '$lib/types';
 
 	let displayName = $state<string | null>(null);
@@ -91,15 +95,20 @@
 		if (!value) return;
 		navigator.clipboard.writeText(value);
 		pinCopied = true;
+		vibrate([0, 8, 60, 8]);
 		setTimeout(() => (pinCopied = false), 2000);
 	}
 
 	async function handleLogout() {
-		try { await api.delete('/session'); } catch { /* ignore */ }
+		// Session-delete is best-effort: the JWT is going away on this device either way,
+		// so a network failure shouldn't block the user from leaving the event.
+		try { await api.delete('/session'); } catch { /* best-effort logout */ }
 		// Wipe the IndexedDB upload queue so a second guest using the same device can't
 		// inherit (or be blamed for) this guest's pending uploads. Not done on a 401
 		// auto-clear — that path preserves the queue in case the user re-authenticates.
-		try { await clearQueue(); } catch { /* ignore */ }
+		try { await clearQueue(); } catch { /* best-effort cleanup */ }
+		// Note: export-status teardown is wired via the onClearAuth hook in
+		// export-status-store, so it runs for both this explicit path and api.ts's 401.
 		clearAuth();
 		goto('/join');
 	}
@@ -124,13 +133,6 @@
 		}
 	}
 
-	function avatarColor(name: string | null): string {
-		if (!name) return 'bg-gray-100 text-gray-500';
-		const COLORS = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-green-100 text-green-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700'];
-		let hash = 0;
-		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
-		return COLORS[hash % COLORS.length];
-	}
 </script>
 
 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
@@ -147,9 +149,9 @@
 			<div class="flex items-center gap-4">
 				<div
 					class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
-						{avatarColor(displayName)}"
+						{avatarPalette(displayName)}"
 				>
-					{displayName ? displayName[0].toUpperCase() : '?'}
+					{initials(displayName)}
 				</div>
 				<div class="min-w-0">
 					<p class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{displayName ?? 'Unbekannt'}</p>
@@ -384,68 +386,50 @@
 
 <!-- Data-mode warning bottom sheet — shown once when the user picks Original. -->
 {#if dataModeWarningOpen}
-	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (dataModeWarningOpen = false)}>
-		<div
-			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-			role="dialog"
-			aria-modal="true"
-			tabindex="-1"
-		>
-			<div class="mb-4 flex justify-center">
-				<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
-			</div>
-			<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
-			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
-				Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
-			</p>
-			<button
-				onclick={confirmOriginalMode}
-				class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700"
-			>
-				Aktivieren
-			</button>
-			<button
-				onclick={() => (dataModeWarningOpen = false)}
-				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-			>
-				Abbrechen
-			</button>
+	<button
+		type="button"
+		class="fixed inset-0 z-50 bg-black/40"
+		aria-label="Schließen"
+		tabindex="-1"
+		onclick={() => (dataModeWarningOpen = false)}
+	></button>
+	<div
+		class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white px-5 pt-6 dark:bg-gray-900"
+		style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="data-mode-title"
+		use:focusTrap={{ onclose: () => (dataModeWarningOpen = false) }}
+	>
+		<div class="mb-4 flex justify-center">
+			<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
 		</div>
+		<h3 id="data-mode-title" class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
+		<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
+			Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
+		</p>
+		<button
+			onclick={confirmOriginalMode}
+			class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 active:bg-blue-700"
+		>
+			Aktivieren
+		</button>
+		<button
+			onclick={() => (dataModeWarningOpen = false)}
+			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"
+		>
+			Abbrechen
+		</button>
 	</div>
 {/if}
 
 <!-- Leave-confirm bottom sheet -->
-{#if leaveConfirmOpen}
-	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)}>
-		<div
-			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-			role="dialog"
-			aria-modal="true"
-			tabindex="-1"
-		>
-			<div class="mb-4 flex justify-center">
-				<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
-			</div>
-			<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Event verlassen?</h3>
-			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
-				Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
-			</p>
-			<button
-				onclick={handleLogout}
-				class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400"
-			>
-				Abmelden
-			</button>
-			<button
-				onclick={() => (leaveConfirmOpen = false)}
-				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-			>
-				Abbrechen
-			</button>
-		</div>
-	</div>
-{/if}
+<ConfirmSheet
+	open={leaveConfirmOpen}
+	title="Event verlassen?"
+	message="Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren."
+	confirmLabel="Abmelden"
+	tone="danger"
+	onConfirm={handleLogout}
+	onCancel={() => (leaveConfirmOpen = false)}
+/>

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

@@ -3,6 +3,9 @@
 	import { getToken, getRole } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { onMount } from 'svelte';
+	import { toast, toastError } from '$lib/toast-store';
+	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
+	import Modal from '$lib/components/Modal.svelte';
 
 	interface StatsDto {
 		user_count: number;
@@ -110,7 +113,6 @@
 	let loading = $state(true);
 	let saving = $state(false);
 	let error = $state<string | null>(null);
-	let toast = $state<string | null>(null);
 	let exportJobsRefreshing = $state(false);
 
 	// Nutzer tab state
@@ -171,11 +173,6 @@
 		}
 	}
 
-	function showToast(msg: string) {
-		toast = msg;
-		setTimeout(() => (toast = null), 3000);
-	}
-
 	async function saveConfig() {
 		saving = true;
 		try {
@@ -186,14 +183,14 @@
 				}
 			}
 			if (Object.keys(changes).length === 0) {
-				showToast('Keine Änderungen.');
+				toast('Keine Änderungen.', 'info');
 				return;
 			}
 			await api.patch('/admin/config', changes);
 			config = { ...configDraft };
-			showToast('Konfiguration gespeichert.');
+			toast('Konfiguration gespeichert.', 'success');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Speichern.');
+			toastError(e);
 		} finally {
 			saving = false;
 		}
@@ -202,9 +199,9 @@
 	async function releaseGallery() {
 		try {
 			await api.post('/host/gallery/release');
-			showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
+			toast('Galerie wurde freigegeben. Export wird vorbereitet…', 'success');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
@@ -218,11 +215,11 @@
 		banSubmitting = true;
 		try {
 			await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
-			showToast(`${banTarget.display_name} wurde gesperrt.`);
+			toast(`${banTarget.display_name} wurde gesperrt.`, 'success');
 			banTarget = null;
 			users = await api.get<UserSummary[]>('/host/users');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		} finally {
 			banSubmitting = false;
 		}
@@ -231,30 +228,30 @@
 	async function unban(user: UserSummary) {
 		try {
 			await api.post(`/host/users/${user.id}/unban`);
-			showToast(`Sperre für ${user.display_name} aufgehoben.`);
+			toast(`Sperre für ${user.display_name} aufgehoben.`, 'success');
 			users = await api.get<UserSummary[]>('/host/users');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
 	async function promoteToHost(user: UserSummary) {
 		try {
 			await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
-			showToast(`${user.display_name} ist jetzt Host.`);
+			toast(`${user.display_name} ist jetzt Host.`, 'success');
 			users = await api.get<UserSummary[]>('/host/users');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
 	async function demoteToGuest(user: UserSummary) {
 		try {
 			await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
-			showToast(`${user.display_name} ist jetzt Gast.`);
+			toast(`${user.display_name} ist jetzt Gast.`, 'success');
 			users = await api.get<UserSummary[]>('/host/users');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
@@ -270,7 +267,7 @@
 			pinModal = { name: pinResetTarget.display_name, pin: res.pin };
 			pinResetTarget = null;
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
+			toastError(e);
 		} finally {
 			pinResetSubmitting = false;
 		}
@@ -279,7 +276,7 @@
 	function copyPinModal() {
 		if (!pinModal) return;
 		navigator.clipboard.writeText(pinModal.pin);
-		showToast('PIN kopiert.');
+		toast('PIN kopiert.', 'success');
 	}
 
 	/** True iff the current caller may reset this target's PIN. Mirrors the backend
@@ -326,76 +323,60 @@
 	}
 </script>
 
-<!-- PIN reset confirmation -->
-{#if pinResetTarget}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-				Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
-			</p>
-			<div class="flex gap-2">
-				<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
-				<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
-					{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
-				</button>
-			</div>
-		</div>
-	</div>
-{/if}
+<!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
+<ConfirmSheet
+	open={pinResetTarget !== null}
+	title="PIN zurücksetzen"
+	message={pinResetTarget
+		? `Eine neue PIN für ${pinResetTarget.display_name} wird erzeugt. Die alte PIN funktioniert dann nicht mehr.`
+		: ''}
+	confirmLabel={pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
+	tone="danger"
+	onConfirm={confirmResetPin}
+	onCancel={() => (pinResetTarget = null)}
+/>
 
-<!-- One-time PIN display modal -->
-{#if pinModal}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-				Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
-			</p>
-			<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
-				<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
-				<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
-					Kopieren
-				</button>
-			</div>
-			<button
-				onclick={() => (pinModal = null)}
-				class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
-			>
-				Schließen
+<!-- One-time PIN display modal — focus-trapped, aria-modal, Escape-dismissable. -->
+<Modal open={pinModal !== null} titleId="admin-pin-modal-title" onClose={() => (pinModal = null)}>
+	{#if pinModal}
+		<h2 id="admin-pin-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
+		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+			Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
+		</p>
+		<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
+			<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
+			<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 active:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 dark:active:bg-amber-900/60">
+				Kopieren
 			</button>
 		</div>
-	</div>
-{/if}
+		<button
+			onclick={() => (pinModal = null)}
+			class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
+		>
+			Schließen
+		</button>
+	{/if}
+</Modal>
 
-<!-- Ban modal -->
-{#if banTarget}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
-			</p>
-			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
-				<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600" />
-				<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
-			</label>
-			<div class="flex gap-2">
-				<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
-				<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400">
-					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
-				</button>
-			</div>
+<!-- Ban modal — checkbox-bearing, so uses the Modal shell instead of ConfirmSheet. -->
+<Modal open={banTarget !== null} titleId="admin-ban-modal-title" onClose={() => (banTarget = null)}>
+	{#if banTarget}
+		<h2 id="admin-ban-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
+		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+			Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
+		</p>
+		<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+			<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600" />
+			<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
+		</label>
+		<div class="flex gap-2">
+			<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 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">Abbrechen</button>
+			<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 active:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400">
+				{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
+			</button>
 		</div>
-	</div>
-{/if}
-
-<!-- Toast -->
-{#if toast}
-	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
-		{toast}
-	</div>
-{/if}
+	{/if}
+</Modal>
 
 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->

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

@@ -4,6 +4,8 @@
 	import { api } from '$lib/api';
 	import { onMount, onDestroy } from 'svelte';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
+	import { toastError } from '$lib/toast-store';
+	import { focusTrap } from '$lib/actions/focus-trap';
 
 	interface JobStatus {
 		status: 'locked' | 'pending' | 'running' | 'done' | 'failed';
@@ -52,7 +54,8 @@
 		try {
 			status = await api.get<ExportStatus>('/export/status');
 		} catch {
-			// ignore
+			// Background poll triggered by SSE — silent. The visible empty/loading state
+			// will reflect the failure; the next event will retry.
 		} finally {
 			loading = false;
 		}
@@ -73,18 +76,25 @@
 	}
 
 	async function downloadFile(endpoint: string, filename: string) {
-		const token = getToken();
-		const res = await fetch(endpoint, {
-			headers: token ? { Authorization: `Bearer ${token}` } : {}
-		});
-		if (!res.ok) return;
-		const blob = await res.blob();
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement('a');
-		a.href = url;
-		a.download = filename;
-		a.click();
-		URL.revokeObjectURL(url);
+		try {
+			const token = getToken();
+			const res = await fetch(endpoint, {
+				headers: token ? { Authorization: `Bearer ${token}` } : {}
+			});
+			if (!res.ok) {
+				toastError(new Error(`Download fehlgeschlagen (${res.status}).`));
+				return;
+			}
+			const blob = await res.blob();
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = filename;
+			a.click();
+			URL.revokeObjectURL(url);
+		} catch (e) {
+			toastError(e);
+		}
 	}
 
 	function downloadZip() {
@@ -109,8 +119,14 @@
 <!-- HTML guide modal -->
 {#if showHtmlGuide}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-3 text-lg font-bold text-gray-900 dark:text-gray-100">Hinweis zum HTML-Viewer</h2>
+		<div
+			class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="html-guide-title"
+			use:focusTrap={{ onclose: () => (showHtmlGuide = false) }}
+		>
+			<h2 id="html-guide-title" class="mb-3 text-lg font-bold text-gray-900 dark:text-gray-100">Hinweis zum HTML-Viewer</h2>
 			<ol class="mb-4 space-y-2 text-sm text-gray-700 dark:text-gray-300">
 				<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
 				<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
@@ -139,7 +155,18 @@
 
 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
-		<div class="mx-auto flex max-w-lg items-center px-4 py-4">
+		<div class="mx-auto flex max-w-lg items-center gap-2 px-4 py-4">
+			<button
+				type="button"
+				onclick={() => goto('/feed')}
+				data-testid="export-back"
+				class="-ml-2 flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700"
+				aria-label="Zurück"
+			>
+				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+				</svg>
+			</button>
 			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Export</h1>
 		</div>
 	</div>

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

@@ -10,7 +10,12 @@
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
 	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
 	import ContextSheet, { type ContextAction } from '$lib/components/ContextSheet.svelte';
+	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
+	import Skeleton from '$lib/components/Skeleton.svelte';
 	import { refreshQuota } from '$lib/quota-store';
+	import { toast, toastError } from '$lib/toast-store';
+	import { pullToRefresh } from '$lib/actions/pull-to-refresh';
+	import { vibrate } from '$lib/haptics';
 	import type { FeedUpload, FeedResponse, HashtagCount, DeltaResponse } from '$lib/types';
 
 	let uploads = $state<FeedUpload[]>([]);
@@ -18,8 +23,26 @@
 	let selectedHashtag = $state<string | null>(null);
 	let nextCursor = $state<string | null>(null);
 	let loadingMore = $state(false);
+	let initialLoading = $state(true);
+	let refreshing = $state(false);
+	let pullProgress = $state(0); // 0–1+ during the drag, 0 when idle
 	let selectedUpload = $state<FeedUpload | null>(null);
 	let sentinel: HTMLDivElement;
+	let pendingDeleteId = $state<string | null>(null);
+
+	// ─────────────────────────────────────────────────────────────────────────
+	// onMount A — DOM side-effects only (overscroll lock). Synchronous, returns
+	// its own cleanup. Kept separate from the data-loading onMount below so its
+	// cleanup can't be accidentally clobbered when someone edits the async one.
+	// ─────────────────────────────────────────────────────────────────────────
+	onMount(() => {
+		if (typeof document === 'undefined') return;
+		const prev = document.documentElement.style.overscrollBehaviorY;
+		document.documentElement.style.overscrollBehaviorY = 'contain';
+		return () => {
+			document.documentElement.style.overscrollBehaviorY = prev;
+		};
+	});
 
 	// View mode
 	let viewMode = $state<'list' | 'grid'>('list');
@@ -54,7 +77,7 @@
 				label: 'Löschen',
 				icon: '🗑',
 				tone: 'danger',
-				onClick: () => deleteUpload(target.id)
+				onClick: () => { pendingDeleteId = target.id; }
 			});
 		}
 		return actions;
@@ -64,15 +87,17 @@
 		contextTarget = upload;
 	}
 
-	async function deleteUpload(id: string) {
-		if (!confirm('Diesen Beitrag wirklich löschen?')) return;
+	async function confirmDelete() {
+		const id = pendingDeleteId;
+		if (!id) return;
+		pendingDeleteId = null;
 		try {
 			await api.delete(`/upload/${id}`);
 			uploads = uploads.filter((u) => u.id !== id);
 			if (selectedUpload?.id === id) selectedUpload = null;
 			void refreshQuota();
-		} catch {
-			// ignore — toast handled by ApiError elsewhere
+		} catch (e) {
+			toastError(e);
 		}
 	}
 
@@ -133,12 +158,28 @@
 		});
 	});
 
+	// ─────────────────────────────────────────────────────────────────────────
+	// onMount B — auth gate, recovery toast, data load, SSE subscriptions,
+	// infinite-scroll observer. Cleanup of the SSE handlers lives in onDestroy
+	// below (not in a returned cleanup) because this callback is async.
+	// ─────────────────────────────────────────────────────────────────────────
 	onMount(async () => {
 		if (!getToken()) {
 			goto('/join');
 			return;
 		}
 
+		// Surface the welcome-back toast set by /recover. Lives here (not on /account)
+		// because /feed is the first hydrated route after a successful PIN recovery —
+		// the toast should land in the same beat as the "you're in" feeling.
+		if (typeof sessionStorage !== 'undefined') {
+			const welcome = sessionStorage.getItem('eventsnap_just_recovered');
+			if (welcome) {
+				sessionStorage.removeItem('eventsnap_just_recovered');
+				toast(`Willkommen zurück, ${welcome}!`, 'success');
+			}
+		}
+
 		await Promise.all([loadFeed(), loadHashtags()]);
 		connectSse();
 
@@ -202,7 +243,12 @@
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
 			uploads = res.uploads;
 			nextCursor = res.next_cursor;
-		} catch { /* ignore */ }
+		} catch (e) {
+			// Initial / user-triggered refresh is worth surfacing — background SSE refetches are noisier and silenced below.
+			if (!refresh) toastError(e);
+		} finally {
+			initialLoading = false;
+		}
 	}
 
 	async function loadMore() {
@@ -216,7 +262,9 @@
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
 			uploads = [...uploads, ...res.uploads];
 			nextCursor = res.next_cursor;
-		} catch { /* ignore */ } finally {
+		} catch (e) {
+			toastError(e);
+		} finally {
 			loadingMore = false;
 		}
 	}
@@ -224,7 +272,22 @@
 	async function loadHashtags() {
 		try {
 			hashtags = await api.get<HashtagCount[]>('/hashtags');
-		} catch { /* ignore */ }
+		} catch {
+			// Hashtag panel is a discoverability nicety — silent fail is acceptable; the feed still works.
+		}
+	}
+
+	async function pullRefresh() {
+		if (refreshing) return;
+		refreshing = true;
+		pullProgress = 0;
+		vibrate(10);
+		try {
+			nextCursor = null;
+			await Promise.all([loadFeed(true), loadHashtags()]);
+		} finally {
+			refreshing = false;
+		}
 	}
 
 	function selectHashtag(tag: string | null) {
@@ -236,6 +299,7 @@
 	async function handleLike(id: string) {
 		try {
 			await api.post(`/upload/${id}/like`);
+			vibrate(10);
 			uploads = uploads.map((u) =>
 				u.id === id
 					? { ...u, liked_by_me: !u.liked_by_me, like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1 }
@@ -248,7 +312,9 @@
 					like_count: selectedUpload.liked_by_me ? selectedUpload.like_count - 1 : selectedUpload.like_count + 1,
 				};
 			}
-		} catch { /* ignore */ }
+		} catch (e) {
+			toastError(e);
+		}
 	}
 
 	function openComments(id: string) {
@@ -282,9 +348,45 @@
 	}
 </script>
 
-<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
-	<!-- Sticky header -->
-	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur dark:border-gray-800 dark:bg-gray-900/95">
+<div
+	class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950"
+	use:pullToRefresh={{
+		onrefresh: pullRefresh,
+		onpull: (_, progress) => (pullProgress = progress),
+		disabled: initialLoading
+	}}
+>
+	<!-- Live pull-progress indicator: grows during the drag, rotates past threshold,
+	     swaps to a spinner once the network refresh kicks off. -->
+	{#if refreshing || pullProgress > 0}
+		<div class="pointer-events-none fixed left-0 right-0 top-2 z-40 flex justify-center">
+			<div
+				class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-blue-600 shadow transition-opacity dark:bg-gray-900/90 dark:text-blue-300"
+				style="opacity: {refreshing ? 1 : Math.min(1, pullProgress)}"
+			>
+				{#if refreshing}
+					<span class="inline-flex items-center gap-2">
+						<span class="inline-block h-3 w-3 animate-spin rounded-full border-2 border-blue-200 border-t-blue-600 dark:border-blue-700 dark:border-t-blue-300"></span>
+						Aktualisiere…
+					</span>
+				{:else}
+					<svg
+						class="inline-block h-4 w-4 transition-transform"
+						style="transform: rotate({Math.min(180, pullProgress * 180)}deg)"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2.5"
+						aria-hidden="true"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
+					</svg>
+				{/if}
+			</div>
+		</div>
+	{/if}
+	<!-- Sticky header — opaque fallback for browsers without backdrop-filter. -->
+	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur supports-[not(backdrop-filter:blur(0))]:bg-white dark:border-gray-800 dark:bg-gray-900/95 dark:supports-[not(backdrop-filter:blur(0))]:bg-gray-900">
 		<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
 			<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Galerie</h1>
 
@@ -347,7 +449,11 @@
 							type="search"
 							placeholder="Nutzer oder #Tag suchen…"
 							bind:value={searchQuery}
-							onfocus={() => (showAutocomplete = true)}
+							onfocus={(e) => {
+								showAutocomplete = true;
+								// Push the input above the virtual keyboard so suggestions stay visible.
+								(e.currentTarget as HTMLInputElement).scrollIntoView({ block: 'center', behavior: 'smooth' });
+							}}
 							onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
 							class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
 						/>
@@ -412,7 +518,21 @@
 	</div>
 
 	<!-- Content -->
-	{#if uploads.length === 0}
+	{#if initialLoading && uploads.length === 0}
+		<div class="mx-auto max-w-2xl" data-testid="feed-skeleton">
+			{#if viewMode === 'list'}
+				{#each Array(3) as _}
+					<Skeleton variant="card" />
+				{/each}
+			{:else}
+				<div class="grid grid-cols-3 gap-0.5">
+					{#each Array(9) as _}
+						<Skeleton variant="tile" />
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{:else if uploads.length === 0}
 		<div class="py-20 text-center">
 			<p class="text-lg text-gray-400 dark:text-gray-500">Noch keine Fotos.</p>
 			<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p>
@@ -479,5 +599,16 @@
 	onClose={() => (contextTarget = null)}
 />
 
+<!-- Branded delete confirmation — replaces window.confirm() -->
+<ConfirmSheet
+	open={pendingDeleteId !== null}
+	title="Beitrag löschen?"
+	message="Diese Aktion kann nicht rückgängig gemacht werden."
+	confirmLabel="Löschen"
+	tone="danger"
+	onConfirm={confirmDelete}
+	onCancel={() => (pendingDeleteId = null)}
+/>
+
 <!-- First-visit onboarding guide -->
 <OnboardingGuide />

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

@@ -3,6 +3,9 @@
 	import { getToken, getRole } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { onMount } from 'svelte';
+	import { toast, toastError } from '$lib/toast-store';
+	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
+	import Modal from '$lib/components/Modal.svelte';
 
 	interface UserSummary {
 		id: string;
@@ -51,8 +54,6 @@
 	let pinResetSubmitting = $state(false);
 	let pinModal = $state<{ name: string; pin: string } | null>(null);
 
-	let toast = $state<string | null>(null);
-
 	const myRole = getRole();
 
 	/** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */
@@ -88,34 +89,29 @@
 		}
 	}
 
-	function showToast(msg: string) {
-		toast = msg;
-		setTimeout(() => (toast = null), 3000);
-	}
-
 	async function toggleEventLock() {
 		if (!event) return;
 		try {
 			if (event.uploads_locked) {
 				await api.post('/host/event/open');
-				showToast('Uploads wurden wieder geöffnet.');
+				toast('Uploads wurden wieder geöffnet.', 'success');
 			} else {
 				await api.post('/host/event/close');
-				showToast('Uploads wurden gesperrt.');
+				toast('Uploads wurden gesperrt.', 'success');
 			}
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
 	async function releaseGallery() {
 		try {
 			await api.post('/host/gallery/release');
-			showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
+			toast('Galerie wurde freigegeben. Export wird vorbereitet…', 'success');
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
@@ -129,11 +125,11 @@
 		banSubmitting = true;
 		try {
 			await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
-			showToast(`${banTarget.display_name} wurde gesperrt.`);
+			toast(`${banTarget.display_name} wurde gesperrt.`, 'success');
 			banTarget = null;
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		} finally {
 			banSubmitting = false;
 		}
@@ -142,30 +138,30 @@
 	async function unban(user: UserSummary) {
 		try {
 			await api.post(`/host/users/${user.id}/unban`);
-			showToast(`Sperre für ${user.display_name} aufgehoben.`);
+			toast(`Sperre für ${user.display_name} aufgehoben.`, 'success');
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
 	async function promoteToHost(user: UserSummary) {
 		try {
 			await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
-			showToast(`${user.display_name} ist jetzt Host.`);
+			toast(`${user.display_name} ist jetzt Host.`, 'success');
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
 	async function demoteToGuest(user: UserSummary) {
 		try {
 			await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
-			showToast(`${user.display_name} ist jetzt Gast.`);
+			toast(`${user.display_name} ist jetzt Gast.`, 'success');
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 
@@ -181,7 +177,7 @@
 			pinModal = { name: pinResetTarget.display_name, pin: res.pin };
 			pinResetTarget = null;
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
+			toastError(e);
 		} finally {
 			pinResetSubmitting = false;
 		}
@@ -190,7 +186,7 @@
 	function copyPinModal() {
 		if (!pinModal) return;
 		navigator.clipboard.writeText(pinModal.pin);
-		showToast('PIN kopiert.');
+		toast('PIN kopiert.', 'success');
 	}
 
 	function formatBytes(bytes: number): string {
@@ -200,89 +196,73 @@
 	}
 </script>
 
-<!-- PIN reset confirmation -->
-{#if pinResetTarget}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-				Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
-			</p>
-			<div class="flex gap-2">
-				<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
-				<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
-					{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
-				</button>
-			</div>
-		</div>
-	</div>
-{/if}
+<!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
+<ConfirmSheet
+	open={pinResetTarget !== null}
+	title="PIN zurücksetzen"
+	message={pinResetTarget
+		? `Eine neue PIN für ${pinResetTarget.display_name} wird erzeugt. Die alte PIN funktioniert dann nicht mehr.`
+		: ''}
+	confirmLabel={pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
+	tone="danger"
+	onConfirm={confirmResetPin}
+	onCancel={() => (pinResetTarget = null)}
+/>
 
-<!-- One-time PIN display modal -->
-{#if pinModal}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-				Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
-			</p>
-			<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
-				<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
-				<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
-					Kopieren
-				</button>
-			</div>
-			<button
-				onclick={() => (pinModal = null)}
-				class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
-			>
-				Schließen
+<!-- One-time PIN display modal — focus-trapped, aria-modal, Escape-dismissable. -->
+<Modal open={pinModal !== null} titleId="host-pin-modal-title" onClose={() => (pinModal = null)}>
+	{#if pinModal}
+		<h2 id="host-pin-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
+		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+			Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
+		</p>
+		<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
+			<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
+			<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 active:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 dark:active:bg-amber-900/60">
+				Kopieren
 			</button>
 		</div>
-	</div>
-{/if}
+		<button
+			onclick={() => (pinModal = null)}
+			class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
+		>
+			Schließen
+		</button>
+	{/if}
+</Modal>
 
-<!-- Ban modal -->
-{#if banTarget}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
-			</p>
-			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
-				<input
-					type="checkbox"
-					bind:checked={banHideUploads}
-					class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600"
-				/>
-				<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
-			</label>
-			<div class="flex gap-2">
-				<button
-					onclick={() => (banTarget = null)}
-					class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-				>
-					Abbrechen
-				</button>
-				<button
-					onclick={confirmBan}
-					disabled={banSubmitting}
-					class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400"
-				>
-					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
-				</button>
-			</div>
+<!-- Ban modal — needs a checkbox so it's not a pure ConfirmSheet, but still gets the same a11y shell. -->
+<Modal open={banTarget !== null} titleId="host-ban-modal-title" onClose={() => (banTarget = null)}>
+	{#if banTarget}
+		<h2 id="host-ban-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
+		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+			Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
+		</p>
+		<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+			<input
+				type="checkbox"
+				bind:checked={banHideUploads}
+				class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600"
+			/>
+			<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
+		</label>
+		<div class="flex gap-2">
+			<button
+				onclick={() => (banTarget = null)}
+				class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 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"
+			>
+				Abbrechen
+			</button>
+			<button
+				onclick={confirmBan}
+				disabled={banSubmitting}
+				class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 active:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400"
+			>
+				{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
+			</button>
 		</div>
-	</div>
-{/if}
-
-<!-- Toast -->
-{#if toast}
-	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
-		{toast}
-	</div>
-{/if}
+	{/if}
+</Modal>
 
 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->

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

@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { api, ApiError } from '$lib/api';
 	import { setAuth } from '$lib/auth';
+	import { focusTrap } from '$lib/actions/focus-trap';
 
 	let displayName = $state('');
 	let error = $state('');
@@ -84,6 +85,28 @@
 	function goToFeed() {
 		goto('/feed');
 	}
+
+	function closePinModal() {
+		// setAuth has already run on join success — the user is authenticated.
+		// Closing the PIN reminder while leaving them on /join would render the
+		// (already-completed) join form again. Honor the dismissal by routing
+		// them where they actually want to be.
+		showPinModal = false;
+		goto('/feed');
+	}
+
+	// Strip non-digits synchronously in the input handler so paste of "1234X"
+	// never flashes the longer string. Auto-submits on the 4th digit so the
+	// user doesn't have to chase the (now cosmetic) Anmelden button.
+	function onRecoveryPinInput(e: Event) {
+		const el = e.currentTarget as HTMLInputElement;
+		const cleaned = el.value.replace(/\D/g, '').slice(0, 4);
+		if (cleaned !== el.value) el.value = cleaned;
+		recoveryPin = cleaned;
+		if (recoveryPin.length === 4 && !recoveryLoading) {
+			handleInlineRecover();
+		}
+	}
 </script>
 
 <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
@@ -106,7 +129,8 @@
 			<form onsubmit={(e) => { e.preventDefault(); handleInlineRecover(); }}>
 				<input
 					type="text"
-					bind:value={recoveryPin}
+					value={recoveryPin}
+					oninput={onRecoveryPinInput}
 					placeholder="4-stelliger PIN"
 					maxlength={4}
 					inputmode="numeric"
@@ -176,8 +200,14 @@
 
 {#if showPinModal}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" data-testid="pin-modal">
-		<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900">
-			<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">Dein Wiederherstellungs-PIN</h2>
+		<div
+			class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="pin-modal-title"
+			use:focusTrap={{ onclose: closePinModal }}
+		>
+			<h2 id="pin-modal-title" class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">Dein Wiederherstellungs-PIN</h2>
 			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
 				Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen.
 			</p>
@@ -187,7 +217,7 @@
 				<button
 					onclick={copyPin}
 					data-testid="pin-copy"
-					class="min-h-11 min-w-11 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+					class="min-h-11 min-w-11 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:active:bg-gray-600"
 				>
 					{copied ? 'Kopiert!' : 'Kopieren'}
 				</button>
@@ -196,10 +226,17 @@
 			<button
 				onclick={goToFeed}
 				data-testid="continue-to-feed"
-				class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
+				class="mb-2 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 			>
 				Weiter zur Galerie
 			</button>
+			<button
+				type="button"
+				onclick={closePinModal}
+				class="w-full rounded-lg py-2 text-sm text-gray-500 hover:text-gray-700 active:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:active:text-gray-200"
+			>
+				Schließen
+			</button>
 		</div>
 	</div>
 {/if}

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

@@ -1,9 +1,19 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { api, ApiError } from '$lib/api';
-	import { setAuth, getPin } from '$lib/auth';
+	import { setAuth, getPin, getToken } from '$lib/auth';
 	import { browser } from '$app/environment';
 
+	function goBack() {
+		// Prefer the actual previous page (most users land here from /join or /account).
+		// Fall back to a sensible default based on auth state for deep-linked users.
+		if (browser && window.history.length > 1) {
+			window.history.back();
+			return;
+		}
+		goto(getToken() ? '/feed' : '/join');
+	}
+
 	let displayName = $state('');
 	let pin = $state('');
 	let error = $state('');
@@ -26,6 +36,9 @@
 			}>('/recover', { display_name: displayName.trim(), pin: pin.trim() });
 
 			setAuth(res.jwt, pin.trim(), res.user_id, displayName.trim());
+			// Surface a welcome-back toast on /feed after navigation. sessionStorage
+			// scopes the cue to the next page load so it doesn't replay on refresh.
+			if (browser) sessionStorage.setItem('eventsnap_just_recovered', displayName.trim());
 			goto('/feed');
 		} catch (e) {
 			if (e instanceof ApiError) {
@@ -37,10 +50,38 @@
 			loading = false;
 		}
 	}
+
+	// Strip non-digits synchronously in the input handler (not via $effect on
+	// bind:value) so a paste of "1234X" doesn't flash the longer string between
+	// the bind setting `pin` and the reactive cleanup reassigning it. Mutating
+	// el.value before Svelte's next render means the field never displays the
+	// invalid intermediate state.
+	function onPinInput(e: Event) {
+		const el = e.currentTarget as HTMLInputElement;
+		const cleaned = el.value.replace(/\D/g, '').slice(0, 4);
+		if (cleaned !== el.value) el.value = cleaned;
+		pin = cleaned;
+		if (pin.length === 4 && displayName.trim() && !loading) {
+			handleRecover();
+		}
+	}
 </script>
 
-<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
-	<div class="w-full max-w-sm">
+<div class="flex min-h-screen flex-col bg-gray-50 px-4 dark:bg-gray-950">
+	<div class="-mx-4 flex items-center px-2 py-3">
+		<button
+			type="button"
+			onclick={goBack}
+			data-testid="recover-back"
+			class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700"
+			aria-label="Zurück"
+		>
+			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+			</svg>
+		</button>
+	</div>
+	<div class="m-auto w-full max-w-sm">
 		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
 		<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen und deinen PIN ein.</p>
 
@@ -55,7 +96,8 @@
 			/>
 			<input
 				type="text"
-				bind:value={pin}
+				value={pin}
+				oninput={onPinInput}
 				placeholder="4-stelliger PIN"
 				maxlength={4}
 				inputmode="numeric"

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

@@ -7,6 +7,8 @@
 	import { get } from 'svelte/store';
 	import { onMount, onDestroy } from 'svelte';
 	import { quotaStore, refreshQuota } from '$lib/quota-store';
+	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
+	import { vibrate } from '$lib/haptics';
 	import type { PendingFile } from '$lib/pending-upload-store';
 
 	interface StagedFile extends PendingFile {
@@ -17,6 +19,7 @@
 	let caption = $state('');
 	let submitting = $state(false);
 	let captionEl: HTMLTextAreaElement;
+	let discardConfirmOpen = $state(false);
 
 	const MAX_CAPTION_LENGTH = 2000;
 
@@ -66,6 +69,16 @@
 	}
 
 	function cancel() {
+		if (stagedFiles.length > 0 || caption.trim().length > 0) {
+			discardConfirmOpen = true;
+			return;
+		}
+		clearPending();
+		goto('/feed');
+	}
+
+	function confirmDiscard() {
+		discardConfirmOpen = false;
 		clearPending();
 		goto('/feed');
 	}
@@ -74,6 +87,7 @@
 		if (stagedFiles.length === 0 || submitting) return;
 		if (caption.length > MAX_CAPTION_LENGTH) return;
 		submitting = true;
+		vibrate(10);
 		const hashtagsString = captionTags.join(',');
 		for (const sf of stagedFiles) {
 			await addToQueue(sf.file, caption, hashtagsString);
@@ -221,12 +235,29 @@
 						style="width: {quotaPercent}%"
 					></div>
 				</div>
+				{#if quotaPercent >= 100}
+					<p class="mt-1 font-medium text-red-600 dark:text-red-400">Limit erreicht — bitte alte Beiträge löschen.</p>
+				{:else if quotaPercent >= 95}
+					<p class="mt-1 font-medium text-amber-600 dark:text-amber-400">Fast voll.</p>
+				{/if}
 			</div>
 		{/if}
 
 		<div class="h-8"></div>
 	</div>
 
+	<!-- Discard confirmation — appears only when the composer has unsaved content. -->
+	<ConfirmSheet
+		open={discardConfirmOpen}
+		title="Verwerfen?"
+		message="Deine Auswahl und der Text gehen verloren."
+		confirmLabel="Verwerfen"
+		cancelLabel="Weiter bearbeiten"
+		tone="danger"
+		onConfirm={confirmDiscard}
+		onCancel={() => (discardConfirmOpen = false)}
+	/>
+
 	<!-- Sticky submit button at bottom (mobile-primary) -->
 	<div class="border-t border-gray-100 px-4 py-3 dark:border-gray-800">
 		<button