fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Fabian Hamm (Privat)
2026-08-03 18:36:05 +02:00
parent 87d01a8a26
commit 51e55b1ace
11 changed files with 1025 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/lib/api.ts
View File

@@ -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(

59
frontend/src/lib/components/FeedListCard.svelte
View File

@@ -27,6 +27,53 @@
const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
// Video cards show a poster if one exists; `pickMediaUrl` is not used here because it is
// mime-agnostic and would hand back the raw MP4 for an <img>.
const posterSrc = $derived(upload.thumbnail_url ?? upload.preview_url ?? '');
// ── Media fallback ───────────────────────────────────────────────────────────────
//
// A failed <img> rendered as an empty grey box with `alt=""` — no icon, no message,
// nothing to tap. And the failure is routine rather than exotic: `pickMediaUrl` falls
// back to `/original` whenever preview AND thumbnail are still null, i.e. for everything
// still compressing, which in a newest-first feed is the card at the top during every
// burst. That also makes the cause usually TRANSIENT, so one delayed retry of the same
// URL recovers most of them; the nonce exists because the browser would otherwise replay
// its cached failure rather than re-request. Two strikes and we fall through to the
// placeholder this card already draws for "no derivative yet".
const MEDIA_RETRY_MS = 4000;
let mediaRetryNonce = $state(0);
let mediaFailed = $state(false);
let mediaRetryTimer: ReturnType<typeof setTimeout> | null = null;
function withNonce(url: string): string {
if (!url || !mediaRetryNonce) return url;
return `${url}${url.includes('?') ? '&' : '?'}r=${mediaRetryNonce}`;
}
const displaySrc = $derived(withNonce(isVideo(upload.mime_type) ? posterSrc : mediaSrc));
// A url change — the SSE `upload-processed` swapping the original for a real preview is
// the common one — deserves a clean attempt rather than inheriting the old verdict.
$effect(() => {
void mediaSrc;
void posterSrc;
mediaRetryNonce = 0;
mediaFailed = false;
});
function handleMediaError() {
if (mediaRetryNonce) {
mediaFailed = true;
return;
}
if (mediaRetryTimer) clearTimeout(mediaRetryTimer);
mediaRetryTimer = setTimeout(() => {
mediaRetryTimer = null;
mediaRetryNonce = Date.now();
}, MEDIA_RETRY_MS);
}
function relativeTime(iso: string, nowMs: number): string {
const diff = nowMs - new Date(iso).getTime();
const mins = Math.floor(diff / 60000);
@@ -61,6 +108,7 @@
// card mid-animation) so it can't fire against a stale component.
onDestroy(() => {
if (burstTimer) clearTimeout(burstTimer);
if (mediaRetryTimer) clearTimeout(mediaRetryTimer);
});
</script>
@@ -124,13 +172,14 @@
<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}
{#if posterSrc && !mediaFailed}
<img
src={upload.thumbnail_url ?? upload.preview_url ?? ''}
src={displaySrc}
alt=""
class="h-full w-full object-cover opacity-80"
loading="lazy"
decoding="async"
onerror={handleMediaError}
/>
{/if}
<div class="absolute inset-0 flex items-center justify-center">
@@ -143,17 +192,18 @@
</span>
</div>
</div>
{:else if mediaSrc}
{:else if mediaSrc && !mediaFailed}
<!-- Reserve the same 4/5 box the skeleton uses so the card doesn't collapse
to height 0 and reflow as images stream in. The uncropped original is one
tap away in the lightbox. -->
<div class="aspect-[4/5] w-full bg-gray-100 dark:bg-gray-800">
<img
src={mediaSrc}
src={displaySrc}
alt=""
class="h-full w-full object-cover"
loading="lazy"
decoding="async"
onerror={handleMediaError}
/>
</div>
{:else}
@@ -209,6 +259,7 @@
{#if $commentsEnabled}
<button
onclick={() => oncomment(upload.id)}
aria-label="Kommentare anzeigen"
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

313
frontend/src/lib/components/LightboxModal.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { onDestroy, tick } from 'svelte';
import { beforeNavigate } from '$app/navigation';
import type { FeedUpload } from '$lib/types';
import { api } from '$lib/api';
import { onSseEvent } from '$lib/sse';
@@ -14,6 +15,7 @@
import { vibrate } from '$lib/haptics';
import { commentsEnabled } from '$lib/event-config-store';
import HeartBurst from './HeartBurst.svelte';
import ConfirmSheet from './ConfirmSheet.svelte';
const COMMENT_MAX = 500;
@@ -30,9 +32,41 @@
upload: FeedUpload;
onclose: () => void;
onlike: (id: string) => void;
/** Whether a previous/next item exists in the caller's list. Controls the chevrons. */
hasPrev?: boolean;
hasNext?: boolean;
onprev?: () => void;
onnext?: () => void;
}
let { upload, onclose, onlike }: Props = $props();
let {
upload,
onclose,
onlike,
hasPrev = false,
hasNext = false,
onprev,
onnext
}: Props = $props();
// The system back gesture must close the photo, not leave the app.
//
// On a phone, back is how you dismiss a full-screen view — but this modal is component
// state, not a route, so back navigated away from /feed entirely and the guest lost their
// scroll position. Since the modal is only mounted while open, this subscription is
// active exactly while it is open (Svelte tears it down on destroy).
//
// Cancelling a popstate navigation is explicitly supported: SvelteKit counteracts it with
// `history.go`, restoring the entry we just left (see its client runtime, "if a
// popstate-driven navigation is cancelled"). So the URL stays put and the photo closes.
// Only `popstate` is intercepted — an in-app link or a programmatic `goto` should still
// navigate, closing the modal with the page.
beforeNavigate((nav) => {
if (nav.type === 'popstate') {
nav.cancel();
onclose();
}
});
let comments = $state<CommentDto[]>([]);
let newComment = $state('');
@@ -56,6 +90,115 @@
: pickMediaUrl($dataMode, upload)
);
// ── Prev / next ──────────────────────────────────────────────────────────────────
//
// Until now the only way out of a photo was to close the modal, so browsing hundreds
// of party photos meant open-close-open-close all evening — while FEATURES.md and
// USER_JOURNEYS §8.6/§17 both promised swipe navigation. Three affordances, because
// each covers a different user: on-screen chevrons are the discoverable baseline (a
// swipe nobody knows about is not a feature), arrow keys for the projector laptop,
// swipe for the phone in one hand.
let prevBtn = $state<HTMLButtonElement | undefined>();
let nextBtn = $state<HTMLButtonElement | undefined>();
let closeBtn = $state<HTMLButtonElement | undefined>();
async function step(dir: -1 | 1) {
if (dir === -1) {
if (!hasPrev) return;
onprev?.();
} else {
if (!hasNext) return;
onnext?.();
}
// Stepping onto the first/last item removes the chevron that was just used. A
// focused node disappearing drops focus to <body> — outside `focusTrap`'s node — so
// the next Tab would leave for the browser chrome instead of cycling the modal.
// Hand focus to whichever control survived.
await tick();
if (document.activeElement === document.body) {
const fallback = dir === -1 ? nextBtn : prevBtn;
(fallback ?? closeBtn)?.focus();
}
}
function handleKeydown(e: KeyboardEvent) {
if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
// Never hijack caret movement inside the comment composer.
const target = e.target as HTMLElement | null;
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return;
e.preventDefault();
void step(e.key === 'ArrowLeft' ? -1 : 1);
}
// Swipe. Bound to the media wrapper rather than the whole modal so it cannot fight the
// comment list's vertical scroll, and read on touchend rather than continuously so the
// browser keeps ownership of the gesture until we know it was horizontal.
const SWIPE_MIN_PX = 50;
let touchStartX = 0;
let touchStartY = 0;
let touchTracking = false;
function onTouchStart(e: TouchEvent) {
// A second finger means pinch-zoom, which must not turn into a page change.
touchTracking = e.touches.length === 1;
if (!touchTracking) return;
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
}
function onTouchEnd(e: TouchEvent) {
if (!touchTracking) return;
touchTracking = false;
const t = e.changedTouches[0];
if (!t) return;
const dx = t.clientX - touchStartX;
const dy = t.clientY - touchStartY;
// Require a decisively HORIZONTAL gesture: the modal body scrolls vertically, so a
// diagonal drag must not steal a photo change from someone who meant to scroll.
if (Math.abs(dx) < SWIPE_MIN_PX || Math.abs(dx) < Math.abs(dy) * 1.5) return;
void step(dx < 0 ? 1 : -1);
}
// ── Media fallback ───────────────────────────────────────────────────────────────
//
// A failed <img> used to render as an empty black box with `alt=""` — no icon, no
// message, nothing to tap. And the failure is common rather than exotic: `pickMediaUrl`
// falls back to `/original` whenever preview AND thumbnail are still null, i.e. for
// everything still compressing, which in a newest-first feed is the top of the list
// during every burst. That also makes the cause usually TRANSIENT, so one delayed retry
// of the same URL recovers most of them; the nonce is there because the browser would
// otherwise replay its cached failure rather than re-request.
const MEDIA_RETRY_MS = 4000;
let mediaRetryNonce = $state(0);
let mediaFailed = $state(false);
let mediaRetryTimer: ReturnType<typeof setTimeout> | null = null;
const displaySrc = $derived(
mediaRetryNonce
? `${mediaSrc}${mediaSrc.includes('?') ? '&' : '?'}r=${mediaRetryNonce}`
: mediaSrc
);
// A different photo — or the same one after `upload-processed` swapped the original for
// a real preview — deserves a clean attempt rather than inheriting the old verdict.
$effect(() => {
void mediaSrc;
mediaRetryNonce = 0;
mediaFailed = false;
});
function handleMediaError() {
if (mediaRetryNonce) {
mediaFailed = true;
return;
}
if (mediaRetryTimer) clearTimeout(mediaRetryTimer);
mediaRetryTimer = setTimeout(() => {
mediaRetryTimer = null;
mediaRetryNonce = Date.now();
}, MEDIA_RETRY_MS);
}
function triggerHeartBurst() {
heartBurst = true;
vibrate(10);
@@ -90,6 +233,7 @@
onDestroy(() => {
if (burstTimer) clearTimeout(burstTimer);
if (mediaRetryTimer) clearTimeout(mediaRetryTimer);
unsubCommentDeleted();
unsubNewComment();
});
@@ -128,16 +272,23 @@
}
}
/**
* `asHost` routes to the moderation endpoint. The guest route only ever deletes the
* caller's OWN comment, and it refuses a banned author outright — so without this a
* host who banned an abusive guest was left with the abuse still on screen and no way
* to remove it, since the ban itself blocks the author's own delete.
*/
async function deleteComment(id: string, asHost: boolean) {
// Comment deletion is permanent and had NO confirmation at all — from a ~14px ✕ glyph
// sitting a few pixels from the comment text, which a host could also use on someone
// else's words. Deleting a POST two components away has always gone through ConfirmSheet;
// this is the same irreversible act and now takes the same route.
// `asHost` routes to the moderation endpoint: the guest route only ever deletes the
// caller's OWN comment, and it refuses a banned author outright — so without it a host
// who banned an abusive guest was left with the abuse on screen and no way to remove it,
// since the ban itself blocks the author's own delete.
let pendingCommentDelete = $state<{ id: string; asHost: boolean } | null>(null);
async function confirmDeleteComment() {
const pending = pendingCommentDelete;
if (!pending) return;
pendingCommentDelete = null;
try {
await api.delete(asHost ? `/host/comment/${id}` : `/comment/${id}`);
comments = comments.filter((c) => c.id !== id);
await api.delete(pending.asHost ? `/host/comment/${pending.id}` : `/comment/${pending.id}`);
comments = comments.filter((c) => c.id !== pending.id);
} catch (e) {
toastError(e);
}
@@ -157,6 +308,8 @@
}
</script>
<svelte:window onkeydown={handleKeydown} />
<div
class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
role="dialog"
@@ -166,12 +319,26 @@
use:scrollLock
use:modalInert
>
<!-- Backdrop — real <button> so keyboard / switch-control users get parity, matching
ContextSheet / ConfirmSheet / UploadSheet. The lightbox was the one overlay in the app
that did NOT close on an outside tap, which is why it felt broken: every other sheet
does. `tabindex="-1"` keeps it out of the tab order, so it adds no stop in front of the
photo; Escape still closes via `focusTrap` and the labelled ✕ stays the keyboard route.
It sits behind the content, which is `relative` for exactly that reason. -->
<button
type="button"
class="absolute inset-0 cursor-default"
onclick={onclose}
tabindex="-1"
aria-label="Schließen"
></button>
<div
class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900"
class="relative 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
bind:this={closeBtn}
onclick={onclose}
aria-label="Schließen"
class="absolute right-2 top-2 z-10 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
@@ -185,7 +352,59 @@
/>
</svg>
</button>
<div class="relative" use:doubletap ondoubletap={triggerHeartBurst}>
<!-- Chevrons sit OUTSIDE the doubletap wrapper below, so tapping one can never be
read as half of a double-tap and fire a like on the photo you are leaving. -->
{#if hasPrev}
<button
bind:this={prevBtn}
type="button"
onclick={() => void step(-1)}
aria-label="Vorheriges Foto"
class="absolute left-2 top-1/2 z-10 inline-flex min-h-11 min-w-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
>
<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="M15.75 19.5 8.25 12l7.5-7.5"
/>
</svg>
</button>
{/if}
{#if hasNext}
<button
bind:this={nextBtn}
type="button"
onclick={() => void step(1)}
aria-label="Nächstes Foto"
class="absolute right-2 top-1/2 z-10 inline-flex min-h-11 min-w-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
>
<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="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</button>
{/if}
<!-- `role="group"` is here for the touch handlers, not for semantics: swipe is a
redundant shortcut for the labelled chevrons above and the arrow keys, so
assistive tech loses nothing by treating this as a plain grouping. -->
<div
class="relative"
role="group"
aria-label="Foto – wischen zum Blättern"
use:doubletap
ondoubletap={triggerHeartBurst}
ontouchstart={onTouchStart}
ontouchend={onTouchEnd}
ontouchcancel={() => (touchTracking = false)}
>
{#if isVideo(upload.mime_type)}
<video
src={mediaSrc}
@@ -195,12 +414,29 @@
class="max-h-[60vh] w-full object-contain"
poster={upload.thumbnail_url ?? undefined}
></video>
{:else if mediaFailed}
<!-- Both attempts failed. Anything is better than the empty black box this used
to leave behind, which read as a broken app rather than a missing file. -->
<div
class="flex h-[40vh] flex-col items-center justify-center gap-2 text-gray-500 dark:text-gray-400"
>
<svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p class="text-sm">Bild konnte nicht geladen werden.</p>
</div>
{:else}
<img
src={mediaSrc}
src={displaySrc}
alt=""
class="max-h-[60vh] w-full object-contain select-none"
class="max-h-[60vh] w-full select-none object-contain"
draggable="false"
onerror={handleMediaError}
/>
{/if}
@@ -211,18 +447,20 @@
<!-- Info + Comments -->
<div class="flex flex-1 flex-col overflow-hidden">
<div class="border-b border-gray-100 p-3 dark:border-gray-800">
<div class="flex items-center justify-between">
<div>
<span id="lightbox-title" class="font-medium text-gray-900 dark:text-gray-100"
<div class="flex items-center justify-between gap-2">
<!-- `min-w-0` + `truncate`: without them a long display name (guests type their
own) is unshrinkable and pushes the like button off the right edge. -->
<div class="flex min-w-0 items-baseline gap-2">
<span id="lightbox-title" class="truncate 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"
<span class="shrink-0 text-xs text-gray-400 dark:text-gray-500"
>{formatTime(upload.created_at)}</span
>
</div>
<button
onclick={() => onlike(upload.id)}
class="flex items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {upload.liked_by_me
class="flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {upload.liked_by_me
? 'bg-red-50 text-red-600 dark:bg-red-950/40 dark:text-red-300'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'}"
>
@@ -269,22 +507,32 @@
</div>
</div>
{#if comment.user_id === userId || $isStaff}
<!-- A trash glyph, not a ✕ (which reads as "dismiss"), and a real 44px tap
target: the old 14px icon sat ~4px from the comment text, so a thumb
aiming at the text destroyed the comment instead. -->
<button
onclick={() => deleteComment(comment.id, comment.user_id !== userId)}
class="shrink-0 text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400"
aria-label={comment.user_id === userId ? 'Löschen' : 'Kommentar entfernen'}
type="button"
onclick={() =>
(pendingCommentDelete = {
id: comment.id,
asHost: comment.user_id !== userId
})}
class="-m-1.5 inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400"
aria-label={comment.user_id === userId
? 'Kommentar löschen'
: 'Kommentar entfernen'}
>
<svg
class="h-3.5 w-3.5"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.8"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
</button>
@@ -335,3 +583,16 @@
</div>
</div>
</div>
<!-- Same branded confirmation the post-delete flow uses. -->
<ConfirmSheet
open={pendingCommentDelete !== null}
title={pendingCommentDelete?.asHost ? 'Kommentar entfernen?' : 'Kommentar löschen?'}
message={pendingCommentDelete?.asHost
? 'Der Kommentar verschwindet für alle Gäste. Diese Aktion kann nicht rückgängig gemacht werden.'
: 'Diese Aktion kann nicht rückgängig gemacht werden.'}
confirmLabel={pendingCommentDelete?.asHost ? 'Entfernen' : 'Löschen'}
tone="danger"
onConfirm={confirmDeleteComment}
onCancel={() => (pendingCommentDelete = null)}
/>

84
frontend/src/lib/components/VirtualFeed.svelte
View File

@@ -21,7 +21,7 @@
import { get } from 'svelte/store';
import { browser } from '$app/environment';
import type { FeedUpload } from '$lib/types';
import { dataMode } from '$lib/data-mode-store';
import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
import { commentsEnabled } from '$lib/event-config-store';
import { longpress } from '$lib/actions/longpress';
import FeedListCard from './FeedListCard.svelte';
@@ -62,12 +62,74 @@
return mime.startsWith('video/');
}
// Grid tiles always use the small thumbnail — full media is one tap away in the
// lightbox where the data-mode picker decides for real.
// Grid tiles prefer the SMALLEST derivative — three across, so a thumbnail is plenty and
// the full file is one tap away in the lightbox.
//
// Everything past that preference defers to `pickMediaUrl`, the centralised rule the card
// and the lightbox already follow (saver → preview → thumbnail → original). This used to
// return '' when no derivative existed yet, which rendered the grey "broken image" tile
// for every upload still in the compression queue. Because the feed is newest-first, that
// was precisely the top of the grid during a burst — the photos people had just taken —
// while the same items opened fine in the lightbox, which has always had the fallback.
// An upload with no derivatives is a TRANSIENT state (SSE `upload-processed` swaps in the
// preview as soon as the worker finishes), so the original is only ever fetched for the
// short window before compression catches up.
function tileUrl(upload: FeedUpload): string {
if (upload.thumbnail_url) return upload.thumbnail_url;
if (upload.preview_url) return upload.preview_url;
return $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
// VIDEOS: a poster image or nothing. `pickMediaUrl` is deliberately mime-agnostic and
// bottoms out at `/original` — for a video that is the raw MP4, and this is an <img>.
// Videos also never get a `preview_url` (compression.rs gives them a thumbnail only,
// and only when a poster frame was actually extracted), so falling through would put a
// multi-hundred-MB file behind three broken-image tiles per row. Returning '' keeps the
// `{#if tileUrl(...)}` guard meaningful and leaves the play icon on its own. This is the
// same carve-out LightboxModal documents for the same reason.
if (isVideo(upload.mime_type)) return upload.thumbnail_url ?? '';
if ($dataMode === 'saver' && upload.thumbnail_url) return upload.thumbnail_url;
return pickMediaUrl($dataMode, upload);
}
// ── Tile media fallback ──────────────────────────────────────────────────────────
//
// A tile whose <img> 404s used to render as an empty grey box with `alt=""` — no icon,
// no message, nothing to tap. And it is not an exotic case: `tileUrl` bottoms out at
// `/original` while an upload is still compressing, which in a newest-first grid is the
// top-left corner during every burst. That also makes the cause usually TRANSIENT, so
// one delayed retry recovers most of them; the nonce is required because the browser
// would otherwise replay its cached failure instead of re-requesting.
//
// Keyed by upload id rather than per-<img>, because the virtualizer recycles rows: a
// tile that scrolls out and back must not restart the whole dance, and must not lose a
// verdict we already reached. The recorded `url` is what makes that safe to keep — an
// `upload-processed` that swaps the original for a real preview is a DIFFERENT url and
// gets a clean attempt.
const MEDIA_RETRY_MS = 4000;
type TileError = { url: string; phase: 'retrying' | 'failed'; nonce: number };
let tileErrors = $state<Record<string, TileError>>({});
function tileSrc(upload: FeedUpload): string {
const base = tileUrl(upload);
if (!base) return '';
const e = tileErrors[upload.id];
if (!e || e.url !== base) return base;
if (e.phase === 'failed') return '';
return e.nonce ? `${base}${base.includes('?') ? '&' : '?'}r=${e.nonce}` : base;
}
function handleTileError(upload: FeedUpload) {
const base = tileUrl(upload);
if (!base) return;
const e = tileErrors[upload.id];
if (e && e.url === base) {
// The retry failed too — show the placeholder rather than a blank tile.
tileErrors[upload.id] = { ...e, phase: 'failed' };
return;
}
tileErrors[upload.id] = { url: base, phase: 'retrying', nonce: 0 };
setTimeout(() => {
const cur = tileErrors[upload.id];
if (cur && cur.url === base && cur.phase === 'retrying') {
tileErrors[upload.id] = { ...cur, nonce: Date.now() };
}
}, MEDIA_RETRY_MS);
}
// STABLE option callbacks — created once, never swapped. They read the live
@@ -208,13 +270,14 @@
>
{#if isVideo(upload.mime_type)}
<div class="flex h-full items-center justify-center bg-gray-800">
{#if tileUrl(upload)}
{#if tileSrc(upload)}
<img
src={tileUrl(upload)}
src={tileSrc(upload)}
alt=""
class="h-full w-full object-cover"
loading="lazy"
decoding="async"
onerror={() => handleTileError(upload)}
/>
{/if}
<div class="absolute inset-0 flex items-center justify-center">
@@ -227,13 +290,14 @@
</svg>
</div>
</div>
{:else if tileUrl(upload)}
{:else if tileSrc(upload)}
<img
src={tileUrl(upload)}
src={tileSrc(upload)}
alt=""
class="h-full w-full object-cover"
loading="lazy"
decoding="async"
onerror={() => handleTileError(upload)}
/>
{:else}
<div class="flex h-full items-center justify-center text-gray-400">

19
frontend/src/lib/event-config-store.ts
View File

@@ -8,6 +8,7 @@
* paint the right colours before the JS bundle loads (no flash of the default palette).
*/
import { writable } from 'svelte/store';
import { api } from './api';
import { buildPaletteCss, applyPaletteCss, type ThemeConfig } from './theme/palette';
export const PALETTE_CACHE_KEY = 'eventsnap_palette_css';
@@ -23,12 +24,24 @@ export const eventConfig = writable<EventConfig | null>(null);
/** Convenience flag for the comment UI. Optimistic `true` until /event resolves. */
export const commentsEnabled = writable<boolean>(true);
type PublicEventDto = {
name: string;
slug: string;
comments_enabled?: boolean;
theme_preset?: string;
theme_primary?: string;
theme_accent?: string;
};
/** Fetch /event, apply the theme, and cache the resolved CSS for the next boot. */
export async function loadEventConfig(): Promise<void> {
try {
const res = await fetch('/api/v1/event');
if (!res.ok) return;
const b = await res.json();
// Through `api` rather than a bare `fetch`: this was the ONE request in the app with
// no AbortController deadline. On a congested venue WiFi a socket that never answers
// left the promise pending indefinitely, so the palette never reconciled with the
// server — and since `event-updated` re-calls this, those zombie requests stack up.
// `api` aborts at 20s and turns it into an ApiError the catch below already handles.
const b = await api.get<PublicEventDto>('/event');
const theme: ThemeConfig = {
preset: b.theme_preset ?? 'champagne-gold',
primary: b.theme_primary ?? '#8a6a2b',

59
frontend/src/lib/feed-filter.test.ts
View File

@@ -1,59 +0,0 @@
import { describe, it, expect } from 'vitest';
import { filterUploads, type FeedFilter } from './feed-filter';
// filterUploads only reads `caption` and `uploader_name`, so a partial shape suffices.
const u = (id: string, uploader_name: string, caption: string | null) =>
({ id, uploader_name, caption }) as any;
const uploads = [
u('1', 'Alice', 'pic #wedding'),
u('2', 'Bob', 'party #party'),
u('3', 'Alice', 'more #wedding #party'),
u('4', 'Carol', 'no tags here'),
u('5', 'Bob', null) // no caption
];
const ids = (r: any[]) => r.map((x) => x.id);
const tag = (value: string): FeedFilter => ({ type: 'tag', value });
const user = (value: string): FeedFilter => ({ type: 'user', value });
describe('filterUploads', () => {
it('no filters → returns all uploads unchanged', () => {
expect(filterUploads(uploads, [])).toBe(uploads);
});
it('a single tag matches uploads whose caption contains it', () => {
expect(ids(filterUploads(uploads, [tag('wedding')]))).toEqual(['1', '3']);
});
it('two tags combine with OR', () => {
expect(ids(filterUploads(uploads, [tag('wedding'), tag('party')]))).toEqual(['1', '2', '3']);
});
it('a single user matches only that uploader', () => {
expect(ids(filterUploads(uploads, [user('Alice')]))).toEqual(['1', '3']);
});
it('two users combine with OR', () => {
expect(ids(filterUploads(uploads, [user('Alice'), user('Bob')]))).toEqual(['1', '2', '3', '5']);
});
it('a user chip and a tag chip combine with AND', () => {
// Alice AND #wedding → only Alice's wedding uploads (not Bob's #wedding, not Alice's #party-only)
expect(ids(filterUploads(uploads, [user('Alice'), tag('wedding')]))).toEqual(['1', '3']);
});
it('AND excludes an uploader-match that lacks the tag', () => {
// Bob AND #wedding → none (Bob has #party and a null caption, no #wedding)
expect(filterUploads(uploads, [user('Bob'), tag('wedding')])).toHaveLength(0);
});
it('tag matching is case-insensitive against the caption', () => {
expect(filterUploads([u('9', 'X', 'PIC #WeDDing')], [tag('wedding')])).toHaveLength(1);
});
it('a null caption never matches a tag but can match a user', () => {
expect(filterUploads([u('5', 'Bob', null)], [tag('party')])).toHaveLength(0);
expect(filterUploads([u('5', 'Bob', null)], [user('Bob')])).toHaveLength(1);
});
});

35
frontend/src/lib/feed-filter.ts
View File

@@ -1,35 +0,0 @@
// Grid-view feed filtering. Extracted from feed/+page.svelte so the OR/AND
// combination rules are unit-testable without mounting the page.
import type { FeedUpload } from './types';
export interface FeedFilter {
type: 'tag' | 'user';
value: string;
}
/**
* Apply the active grid filters to a list of uploads.
*
* Combination rules (mirroring the chip UI):
* - Tags combine with **OR**: a card passes the tag group if its caption contains
* ANY selected `#tag`.
* - Users combine with **OR** within the user group (uploader is one of the
* selected names).
* - The tag group and the user group combine with **AND**: a card must satisfy
* both groups. An empty group is a pass-through.
*
* Tags are matched against the caption text (the autocomplete source), so `value`
* is expected lowercase (as produced by the tag suggestions).
*/
export function filterUploads(uploads: FeedUpload[], filters: FeedFilter[]): FeedUpload[] {
if (filters.length === 0) return uploads;
const tags = filters.filter((f) => f.type === 'tag').map((f) => f.value);
const users = filters.filter((f) => f.type === 'user').map((f) => f.value);
return uploads.filter((u) => {
const cap = (u.caption ?? '').toLowerCase();
const passTag = !tags.length || tags.some((t) => cap.includes('#' + t));
const passUser = !users.length || users.includes(u.uploader_name);
return passTag && passUser;
});
}

7
frontend/src/lib/quota-store.ts
View File

@@ -7,6 +7,7 @@
import { writable } from 'svelte/store';
import { api } from './api';
import { onClearAuth } from './auth';
export interface QuotaSnapshot {
enabled: boolean;
@@ -26,6 +27,12 @@ const empty: QuotaSnapshot = {
export const quotaStore = writable<QuotaSnapshot>(empty);
// Reset on logout, the same way role-store / ban-store / upload-queue do. A phone handed
// round a party is one browser profile: `goto()` is a client-side navigation, so no module
// re-imports and no `onMount` re-runs, and without this the next guest saw the PREVIOUS
// guest's storage usage — their data, on their screen — until the first refresh landed.
onClearAuth(() => quotaStore.set(empty));
/** Refresh from the server. Swallows errors so a transient network blip doesn't
* break the account page; the previous snapshot just stays in place. */
export async function refreshQuota(): Promise<void> {

181
frontend/src/lib/sse.ts
View File

@@ -27,6 +27,27 @@ const handlers: Map<string, EventHandler[]> = new Map();
let reconnectAttempt = 0;
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
/**
* True once a stream has opened at least once this session. Distinguishes "first
* connect" from "reconnect" now that `lastEventTime` is seeded at ticket-mint rather
* than in `onopen` (see `connectSse`) — without it every boot would fire a pointless
* zero-width delta.
*/
let streamEverOpened = false;
/**
* `Date.now()` of the last thing we actually received on the live stream.
*
* Keep-alives are deliberately NOT observable here: the backend sends them as SSE
* COMMENTS (`KeepAlive::new().text("ping")` emits `:ping`), and the EventSource parser
* discards comments without dispatching anything at all. There is no browser API that
* exposes them. So liveness cannot be decided by a plain silence timer — it could not
* tell a dead socket from a genuinely quiet half hour, and would churn reconnects for
* every guest through every lull. The backstop poll below decides it on evidence
* instead: the server had news that this stream never delivered.
*/
let lastStreamActivity = 0;
/**
* SSE event names emitted by the backend. Add new ones here as `state.sse_tx.send`
* call sites grow — every entry becomes a relay registration below.
@@ -91,29 +112,40 @@ export function connectSse(): void {
scheduleReconnect();
return;
}
// Auth flow may have torn things down while we were awaiting the ticket.
if (!getToken() || eventSource) return;
// Seed the reconnect cursor the moment we have a server clock — NOT in `onopen`,
// which is where it used to live. `onopen` never fires behind a captive portal or
// any proxy that buffers `text/event-stream`, so on exactly the networks where the
// stream fails the cursor stayed `null` forever and the backstop poll below had no
// `since` to fetch from. Still the server clock and never `new Date()`: a skewed
// browser clock would shift the window and silently drop uploads.
if (!lastEventTime) lastEventTime = serverTime;
// Auth flow may have torn things down while we were awaiting the ticket — and the
// phone may have gone to sleep during that round-trip. Opening a stream while
// hidden is worse than not opening one: iOS reaps a backgrounded socket without
// ever firing `onerror`, so `eventSource` stays non-null and the guard at the top
// of this function then treats the corpse as a live connection for the rest of the
// evening. The visibility handler reconnects us when the screen comes back.
if (!getToken() || eventSource || (typeof document !== 'undefined' && document.hidden)) return;
eventSource = new EventSource(`/api/v1/stream?ticket=${encodeURIComponent(ticket)}`);
eventSource.onopen = () => {
// Successful connection — reset the backoff counter.
reconnectAttempt = 0;
// If we have a previous timestamp this is a reconnect — fetch the gap. The
// delta advances `lastEventTime` from the SERVER clock it returns.
const since = lastEventTime;
if (since) {
void deltaFetchAndFan(since);
} else {
// First connect: seed the cursor from the server clock at ticket-mint time,
// never `new Date()` — a skewed browser clock would otherwise shift the very
// first reconnect window and could drop uploads.
lastEventTime = serverTime;
}
noteStreamActivity();
// A reconnect has a gap to close; the very first open of a session does not
// (the cursor was just seeded from this ticket's server clock). The delta
// advances `lastEventTime` from the SERVER clock it returns.
if (streamEverOpened && lastEventTime) void deltaFetchAndFan(lastEventTime);
streamEverOpened = true;
};
for (const eventName of KNOWN_EVENTS) {
eventSource.addEventListener(eventName, (e) => dispatch(eventName, (e as MessageEvent).data));
eventSource.addEventListener(eventName, (e) => {
noteStreamActivity();
dispatch(eventName, (e as MessageEvent).data);
});
}
// `resync` is emitted by the server when our broadcast subscription fell
@@ -123,6 +155,7 @@ export function connectSse(): void {
// own listener — not via `dispatch` — so reading `lastEventTime` as the gap
// start isn't clobbered by dispatch bumping it to "now".
eventSource.addEventListener('resync', () => {
noteStreamActivity();
const since = lastEventTime;
if (since) void deltaFetchAndFan(since);
});
@@ -141,7 +174,14 @@ export function connectSse(): void {
function scheduleReconnect(): void {
reconnectAttempt++;
const delay = Math.min(60_000, 1_000 * 2 ** (reconnectAttempt - 1));
const jitter = Math.random() * 500;
// Jitter must SCALE WITH the backoff, not be a flat 500ms. Every client that dropped
// together shares the same `reconnectAttempt`, so they compute an identical `delay` —
// a fixed 500ms window spreads 100 phones over half a second no matter how long the
// backoff grew, which is the thundering herd the backoff exists to prevent. Each
// reconnect costs a ticket POST + stream GET + feed-delta fetch, so the herd lands on
// the DB pool three times over. Scaling the jitter to the delay (floored at 1s so the
// first, most synchronised retry is spread too) turns that into a smooth ramp.
const jitter = Math.random() * Math.max(delay, 1_000);
if (reconnectTimer) clearTimeout(reconnectTimer);
reconnectTimer = setTimeout(connectSse, delay + jitter);
}
@@ -157,6 +197,91 @@ export function disconnectSse(): void {
}
}
function noteStreamActivity(): void {
lastStreamActivity = Date.now();
}
// ── Stream backstop ────────────────────────────────────────────────────────────────
//
// EVERY feed update is triggered by an SSE event — there is no periodic refetch — so a
// stream that stops delivering freezes a guest's gallery for the rest of the evening.
// And a venue produces exactly the two failures that the reconnect path cannot see:
//
// • a captive portal or any proxy that buffers `text/event-stream` never forwards a
// byte, so `onopen` may never fire and neither does `onerror`;
// • a phone that roams between APs leaves a HALF-OPEN socket — the connection is gone
// but `readyState` still reads OPEN, no error is raised, and `connectSse` early-
// returns on its non-null `eventSource`, so nothing ever reconnects.
//
// Neither surfaces anything to react to, which is why the only honest backstop is to
// ask the server. `/feed/delta` is idempotent and answers with an empty payload when
// nothing changed, and one request per 60–120s is ~1/60th of the per-user feed limit —
// cheap insurance against a guest staring at a frozen feed all night. The diashow uses
// the same reconcile-on-a-timer for the same reason (`RECONCILE_INTERVAL_MS` there).
const BACKSTOP_MIN_MS = 60_000;
const BACKSTOP_MAX_MS = 120_000;
let backstopTimer: ReturnType<typeof setTimeout> | null = null;
let backstopEnabled = false;
/**
* Start the poll-based liveness/completeness backstop. Opt-in per page (the feed is the
* consumer that needs it; the export page's SSE use is a status ping and the diashow
* runs its own full reconcile), and idempotent.
*/
export function startStreamBackstop(): void {
if (typeof document === 'undefined' || backstopEnabled) return;
backstopEnabled = true;
scheduleBackstop();
}
export function stopStreamBackstop(): void {
backstopEnabled = false;
if (backstopTimer) {
clearTimeout(backstopTimer);
backstopTimer = null;
}
}
function scheduleBackstop(): void {
if (backstopTimer) clearTimeout(backstopTimer);
// Jittered for the same reason the reconnect backoff is: ~100 phones that joined
// within the same few minutes would otherwise poll in permanent lockstep.
const delay = BACKSTOP_MIN_MS + Math.random() * (BACKSTOP_MAX_MS - BACKSTOP_MIN_MS);
backstopTimer = setTimeout(() => void runBackstop(), delay);
}
async function runBackstop(): Promise<void> {
backstopTimer = null;
try {
// A hidden tab has no stream (the visibility handler closed it) and cannot show a
// result anyway; the reopen path already fetches the gap.
if (document.hidden || !getToken()) return;
// No stream, or one the browser has admitted is closed, while we are visible: there
// is no other way back, because `connectSse`'s `eventSource` guard cannot tell a
// corpse from a live connection.
if (!eventSource || eventSource.readyState === EventSource.CLOSED) {
disconnectSse();
reconnectAttempt = 0;
connectSse();
return;
}
const since = lastEventTime;
if (!since) return;
const activityBefore = lastStreamActivity;
const carried = await deltaFetchAndFan(since);
// The server had news that this stream never delivered. That is the evidence a
// half-open socket cannot otherwise give us — reconnect, or every remaining update
// tonight arrives at poll latency instead of instantly.
if (carried && lastStreamActivity === activityBefore) {
disconnectSse();
reconnectAttempt = 0;
connectSse();
}
} finally {
if (backstopEnabled) scheduleBackstop();
}
}
export function getLastEventTime(): string | null {
return lastEventTime;
}
@@ -196,14 +321,23 @@ function extractCreatedAt(data: string): string | undefined {
* event. Subscribers (typically the feed page) merge the result into their
* in-memory list. Swallows errors — a failed delta is non-fatal; the next live
* SSE event will keep the feed moving.
*
* Resolves to whether the delta actually CARRIED something. `runBackstop` uses that as
* its liveness signal: content the poll found but the stream never pushed means the
* stream is dead in the way the browser will not report.
*/
async function deltaFetchAndFan(since: string, attempt = 0): Promise<void> {
async function deltaFetchAndFan(since: string, attempt = 0): Promise<boolean> {
try {
const response = await api.get<DeltaResponse>(`/feed/delta?since=${encodeURIComponent(since)}`);
// Advance the cursor to the server clock this delta was computed at, so the next
// reconnect resumes exactly where the server left off (no browser-clock skew).
lastEventTime = response.server_time;
dispatch('feed-delta', JSON.stringify(response));
return (
response.uploads.length > 0 ||
response.deleted_ids.length > 0 ||
response.hidden_user_ids.length > 0
);
} catch (e) {
// A throttled delta (429) must NOT be silently dropped: live events keep advancing
// `lastEventTime`, so the next reconnect would resume PAST this un-fetched gap and
@@ -211,10 +345,15 @@ async function deltaFetchAndFan(since: string, attempt = 0): Promise<void> {
// covered regardless of how the live cursor moves in the meantime. Bounded, and only
// reachable by a rapidly flapping EventSource hitting the per-user delta limit.
if (e instanceof ApiError && e.status === 429 && attempt < MAX_DELTA_RETRIES) {
const delayMs = DELTA_RETRY_BASE_MS * 2 ** attempt;
setTimeout(() => void deltaFetchAndFan(since, attempt + 1), delayMs);
// Jittered for the same reason `scheduleReconnect` is: the clients that hit this
// 429 are the ones that just reconnected together after a venue-wide wifi blip,
// so they share `attempt` and would otherwise retry in lockstep at exactly 2s,
// 4s, 8s — re-tripping the same per-user limit in a synchronised wave.
const base = DELTA_RETRY_BASE_MS * 2 ** attempt;
setTimeout(() => void deltaFetchAndFan(since, attempt + 1), base + Math.random() * base);
}
// Other errors are non-fatal — the next live SSE event keeps the feed moving.
return false;
}
}
@@ -228,6 +367,12 @@ function handleVisibilityChange() {
if (document.hidden) {
disconnectSse();
} else {
// Tear down UNCONDITIONALLY before reconnecting rather than leaning on
// `connectSse`'s `eventSource` guard. iOS can reap a backgrounded socket without
// ever firing `onerror`, which leaves a non-null but permanently dead EventSource —
// and the guard would then read that as "already connected" and never reconnect,
// for the rest of the evening. Closing an already-closed EventSource is a no-op.
disconnectSse();
// User-initiated reconnect — clear backoff so we don't wait out a long
// retry delay that was scheduled from a prior background error.
reconnectAttempt = 0;

2
frontend/src/lib/types.ts
View File

@@ -67,6 +67,8 @@ export interface MeContextDto {
storage_quota_enabled: boolean;
uploads_locked: boolean;
gallery_released: boolean;
/** Read-only ban: the feed and the keepsake stay available, every write is refused. */
is_banned: boolean;
}
// mirrors backend/src/handlers/host.rs::PinResetResponse