frontend(plumbing): shared theme tokens, cross-cutting stores, gestures, sheets
The plumbing layer the v0.16 UI features (and dark mode) build on.
Shared design tokens (Tailwind v4):
- tailwind-theme.css (new): @custom-variant dark (class-driven, beats OS
default) + @theme color/font/radius tokens + baseline html/html.dark
rules so any page that hasn't been re-themed still renders the right
body bg + color-scheme.
- src/app.css + export-viewer/src/app.css now import the shared theme.
- src/app.html: 6-line FOUC guard sets <html class="dark"> before paint
(mirrored from theme-store.ts) so dark reloads no longer flash white.
Adds <meta name="theme-color"> kept in sync by initTheme().
Cross-cutting stores (one per concern, per docs/FEATURES §2.9):
- data-mode-store.ts: 'saver' | 'original' per-device, plus pickMediaUrl
helper so feed cards / lightbox / diashow all resolve URLs the same way.
- privacy-note-store.ts: hydrated from /me/context, refreshed on SSE
event-updated.
- quota-store.ts: { enabled, used, limit, active_uploaders, free_disk },
refreshed after each upload completes.
- theme-store.ts: 'system' | 'light' | 'dark' preference + derived
appliedTheme + initTheme() that syncs <html class>, localStorage,
and the theme-color meta. Listens to prefers-color-scheme.
- auth.ts: currentPin writable mirror + clearPin() helper called from
the global pin-reset SSE handler — fixes the stale-PIN bug where the
localStorage copy survived a reset.
DTO mirror:
- types.ts: QuotaDto, MeContextDto, PinResetResponse, DeltaResponse each
carry a `// mirrors backend/...` comment per the lib README convention.
SSE client:
- sse.ts: KNOWN_EVENTS registry (one entry per server-emitted type),
synthetic feed-delta dispatched after foreground reconnect via the
/feed/delta?since= endpoint, exponential backoff (1 → 60 s + jitter)
on errors, attempt counter reset on user-initiated visibility resume.
Upload queue:
- upload-queue.ts: IDB schema bumped to v2 — entries tagged with userId;
loadQueue filters by current user (no cross-user leak on shared
devices); uploadItem refuses to upload an entry whose userId differs
from getUserId() (defense-in-depth); new clearQueue() called on
explicit logout. v2 upgrade wipes pre-v2 entries (no userId, can't
attribute safely).
Mobile primitives:
- actions/longpress.ts: 500 ms hold with 10 px move tolerance, swallows
the next click + the right-click contextmenu so the gesture doesn't
double-fire the inner button's onclick.
- actions/doubletap.ts: tap-pair detector that preventDefaults the
second tap so iOS Safari doesn't also zoom on double-tap.
- components/ContextSheet.svelte: generic bottom sheet driven by a
ContextAction[] prop. Reused by feed posts, comments, host user rows.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -1,4 +1,19 @@
|
||||
// Thin EventSource wrapper with a per-event-type registration pattern.
|
||||
//
|
||||
// Subscribers register via `onSseEvent(type, handler)` and receive the raw payload
|
||||
// string. The list of event types we know how to relay lives in `KNOWN_EVENTS` so
|
||||
// adding one new is one constant entry — keeps the file friendly to extension.
|
||||
//
|
||||
// Lifecycle:
|
||||
// - Connection survives backgrounding via the visibility listener at the bottom of
|
||||
// this file (closes on hidden, reopens on visible).
|
||||
// - On reopen we fire a `feed-delta` synthetic event with the gap since last seen
|
||||
// to whoever subscribes. The feed page is the typical consumer; it merges the
|
||||
// delta into its in-memory list.
|
||||
|
||||
import { getToken } from './auth';
|
||||
import { api } from './api';
|
||||
import type { DeltaResponse } from './types';
|
||||
|
||||
type EventHandler = (data: string) => void;
|
||||
|
||||
@@ -6,13 +21,41 @@ let eventSource: EventSource | null = null;
|
||||
let lastEventTime: string | null = null;
|
||||
const handlers: Map<string, EventHandler[]> = new Map();
|
||||
|
||||
/** Consecutive reconnect attempts since last successful onopen. Reset on success. */
|
||||
let reconnectAttempt = 0;
|
||||
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
const KNOWN_EVENTS = [
|
||||
'new-upload',
|
||||
'upload-processed',
|
||||
'upload-error',
|
||||
'upload-deleted',
|
||||
'like-update',
|
||||
'new-comment',
|
||||
'event-closed',
|
||||
'event-opened',
|
||||
'event-updated',
|
||||
'export-progress',
|
||||
'export-available',
|
||||
'pin-reset'
|
||||
] as const;
|
||||
|
||||
/**
|
||||
* Synthetic event types — not emitted by the server, dispatched locally to fan out
|
||||
* cross-cutting state changes (e.g. delta-fetch results after a reconnect).
|
||||
*/
|
||||
export type SyntheticEvent = 'feed-delta';
|
||||
|
||||
export function onSseEvent(eventType: string, handler: EventHandler): () => void {
|
||||
if (!handlers.has(eventType)) {
|
||||
handlers.set(eventType, []);
|
||||
}
|
||||
handlers.get(eventType)!.push(handler);
|
||||
|
||||
// Return unsubscribe function
|
||||
return () => {
|
||||
const list = handlers.get(eventType);
|
||||
if (list) {
|
||||
@@ -26,26 +69,37 @@ export function connectSse(): void {
|
||||
const token = getToken();
|
||||
if (!token || eventSource) return;
|
||||
|
||||
// EventSource doesn't support custom headers, so pass token as query param
|
||||
// The backend will need to accept this — or we use a polyfill / fetch-based SSE
|
||||
// For simplicity, use native EventSource with token in URL
|
||||
// EventSource doesn't support custom headers, so pass token as query param.
|
||||
eventSource = new EventSource(`/api/v1/stream?token=${encodeURIComponent(token)}`);
|
||||
|
||||
eventSource.onopen = () => {
|
||||
// Successful connection — reset the backoff counter.
|
||||
reconnectAttempt = 0;
|
||||
// If we have a previous timestamp this is a reconnect — fetch the gap.
|
||||
const since = lastEventTime;
|
||||
if (since) {
|
||||
void deltaFetchAndFan(since);
|
||||
}
|
||||
lastEventTime = new Date().toISOString();
|
||||
};
|
||||
|
||||
eventSource.addEventListener('new-upload', (e) => dispatch('new-upload', e.data));
|
||||
eventSource.addEventListener('upload-processed', (e) => dispatch('upload-processed', e.data));
|
||||
eventSource.addEventListener('like-update', (e) => dispatch('like-update', e.data));
|
||||
eventSource.addEventListener('new-comment', (e) => dispatch('new-comment', e.data));
|
||||
eventSource.addEventListener('export-available', (e) => dispatch('export-available', e.data));
|
||||
for (const eventName of KNOWN_EVENTS) {
|
||||
eventSource.addEventListener(eventName, (e) =>
|
||||
dispatch(eventName, (e as MessageEvent).data)
|
||||
);
|
||||
}
|
||||
|
||||
eventSource.onerror = () => {
|
||||
// EventSource auto-reconnects, but we track the time for delta-fetch
|
||||
// EventSource auto-reconnects but the connection state can stay broken; close
|
||||
// and try again ourselves with exponential backoff capped at 60s. Prevents
|
||||
// retry storms (and lets the backend recover quietly) when the server is down
|
||||
// for a while or when 100+ guests reconnect simultaneously after an outage.
|
||||
disconnectSse();
|
||||
// Reconnect after a short delay
|
||||
setTimeout(connectSse, 3000);
|
||||
reconnectAttempt++;
|
||||
const delay = Math.min(60_000, 1_000 * 2 ** (reconnectAttempt - 1));
|
||||
const jitter = Math.random() * 500;
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer);
|
||||
reconnectTimer = setTimeout(connectSse, delay + jitter);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -54,6 +108,10 @@ export function disconnectSse(): void {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
}
|
||||
if (reconnectTimer) {
|
||||
clearTimeout(reconnectTimer);
|
||||
reconnectTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function getLastEventTime(): string | null {
|
||||
@@ -74,12 +132,33 @@ function dispatch(eventType: string, data: string): void {
|
||||
}
|
||||
}
|
||||
|
||||
// Page Visibility API integration
|
||||
/**
|
||||
* Fetch all feed activity since `since` and fan it out as a synthetic `feed-delta`
|
||||
* 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.
|
||||
*/
|
||||
async function deltaFetchAndFan(since: string): Promise<void> {
|
||||
try {
|
||||
const response = await api.get<DeltaResponse>(
|
||||
`/feed/delta?since=${encodeURIComponent(since)}`
|
||||
);
|
||||
dispatch('feed-delta', JSON.stringify(response));
|
||||
} catch {
|
||||
// non-fatal
|
||||
}
|
||||
}
|
||||
|
||||
// Page Visibility API: close while hidden, reopen on focus. On reopen `connectSse`'s
|
||||
// `onopen` runs the delta fetch.
|
||||
if (typeof document !== 'undefined') {
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) {
|
||||
disconnectSse();
|
||||
} else {
|
||||
// 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;
|
||||
connectSse();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user