fix(feed): survive a bad network, and let the lightbox actually browse

Four things a guest on congested venue wifi would have hit, and one they would have hit immediately. A FAILED FEED LOAD CLAIMED THE GALLERY WAS EMPTY. `loadFeed` caught, toasted for five seconds and left `uploads` empty, so the page fell through to "Noch keine Fotos. Tippe auf den Kamera-Button unten!" — the most likely first impression at the party, and a lie. There is now a distinct error state with "Erneut laden". Refreshes suppressed the toast entirely, so pull-to-refresh and the "Neue Beiträge" pill failed in total silence; they now report, and the pill survives its own failure instead of clearing before the request. THE FILTER-EMPTY STATE WAS DEAD CODE. With filtering server-side `displayUploads` is a plain alias of `uploads`, so the grid's "Keine Treffer für die gewählten Filter." plus its reset button sat behind an identical earlier branch and could never render — a guest tapping a chip with no matches was told to go take a photo. SSE COULD FREEZE THE FEED FOR THE WHOLE EVENING. Nothing in the feed ever refetched on a timer; every update path was triggered exclusively by a stream event. Behind a proxy that buffers `text/event-stream` `onopen` never fires, so the guest saw only the photos that were on screen when they arrived; and a socket left half-open by an AP roam is worse, because `connectSse` early-returns on a non-null EventSource and nothing ever reconnects. A pure silence timer is not implementable — the backend sends keep-alives as SSE comments, which the EventSource parser discards without dispatching — so liveness is established on evidence instead: a jittered 60-120s `/feed/delta` backstop that reconnects when a poll returns content the stream never delivered. The ticket round-trip also seeds the delta cursor before the EventSource is created, so the backstop has a `since` even if `onopen` never fires. THE PILL COLLAPSED A DEEPLY-SCROLLED FEED to 20 items and dumped the guest at an arbitrary scroll position — the exact yank the pill exists to avoid. It merges now. The refresh debounce was 800ms + jitter, which during a burst is roughly one feed query per client every two seconds; at 100 guests that approaches the 60/min per-user limit, and the resulting 429s were swallowed by a bare `catch {}`, so the feed would simply stop updating with no signal. Now 8s + jitter, coalescing, and skipped entirely while the page is hidden. Not one `<img>` in the app had an `onerror`. `pickMediaUrl` falls back to the original whenever preview and thumbnail are null — i.e. for everything still compressing, which during a burst is the top of the feed — so a 404 there rendered an empty grey box with `alt=""`, not even a message. Each now retries once, then shows the placeholder. The lightbox had no swipe, no prev/next and no arrow keys, so browsing 300 photos meant closing and reopening the modal for every one — while FEATURES.md and USER_JOURNEYS both claimed swipe shipped. It now has chevrons (44px, German aria-labels, hidden at the ends), arrow keys, and horizontal swipe, with focus handed to the surviving control so a disappearing chevron can't drop focus to `<body>`. Comment deletion was a ~14px `✕` four pixels from the text that deleted permanently on one tap, while deleting a POST two components away goes through a ConfirmSheet; it now matches. `feed-filter.ts` and its test are deleted — with the server filtering, they were dead. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-03 18:36:05 +02:00
parent 87d01a8a26
commit 51e55b1ace
11 changed files with 1025 additions and 243 deletions
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -15,6 +15,25 @@ export class ApiError extends Error {

 const TIMEOUT_MS = 20_000;

+/** Pages that ARE the recovery flow — redirecting from them would loop. */
+const AUTH_ROUTES = ['/join', '/recover'];
+
+/**
+ * Send a guest whose session died back to the join screen.
+ *
+ * Deliberately uses `window.location` rather than SvelteKit's `goto`: `toast-store` already
+ * imports `ApiError` from this module, so pulling a store or `$app/navigation` in here would
+ * create an import cycle. A full document load is also the more correct behaviour after a
+ * session loss — it resets every module-level store, which is exactly what we want, and the
+ * queued upload blobs live in IndexedDB so they survive it.
+ */
+function redirectToJoin(): void {
+	if (typeof window === 'undefined') return;
+	const path = window.location.pathname;
+	if (AUTH_ROUTES.some((r) => path === r || path.startsWith(`${r}/`))) return;
+	window.location.assign('/join');
+}
+
 async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
 	const headers: Record<string, string> = {};
 	const token = getToken();
@@ -69,6 +88,17 @@ async function request<T>(method: string, path: string, body?: unknown): Promise
 		// simply get a 403 "gesperrt" toast on writes.
 		if (res.status === 401) {
 			clearAuth();
+			// Clearing auth alone leaves the guest stranded: the bottom nav and FAB are
+			// gated on `isAuthenticated` so they simply vanish, route guards only run in
+			// onMount (which does not re-run), and a standalone PWA has no URL bar — so
+			// there is no way back to /join. Real triggers mid-event are a host PIN reset
+			// (which revokes that guest's sessions) and a redeployed JWT_SECRET.
+			// Queued upload blobs survive in IndexedDB and are picked up again after
+			// re-joining — via the `onSetAuth` hook in upload-queue.ts, NOT the boot-time
+			// call in +layout.svelte: this redirect lands on /join with no token, so the
+			// layout's `if (getToken())` skips it, and the subsequent recover navigates
+			// with `goto()`, which never re-runs `onMount`.
+			redirectToJoin();
 		}
 		const d = (data ?? {}) as { error?: string; message?: string };
 		throw new ApiError(