diff --git a/web/src/lib/stores/sync.ts b/web/src/lib/stores/sync.ts index e060820..06bae03 100644 --- a/web/src/lib/stores/sync.ts +++ b/web/src/lib/stores/sync.ts @@ -8,8 +8,8 @@ * - On 410 Gone the client is stale: wipe all tables and re-pull from 0. */ import { db, getLastVersion, setLastVersion } from './db'; -import type { OutboxItem } from './db'; import { hasToken } from '$lib/api/client'; +import { writable, derived } from 'svelte/store'; const API = '/api'; @@ -21,6 +21,31 @@ function headers() { }; } +// ─── Sync state ─────────────────────────────────────────────────────────────── + +export type SyncStatus = 'idle' | 'syncing' | 'error'; + +interface SyncState { + status: SyncStatus; + lastSynced: Date | null; + pendingCount: number; + error: string | null; +} + +const _syncState = writable({ + status: 'idle', + lastSynced: null, + pendingCount: 0, + error: null +}); + +export const syncState = derived(_syncState, (s) => s); + +async function refreshPendingCount() { + const count = await db.outbox.count(); + _syncState.update((s) => ({ ...s, pendingCount: count })); +} + // ─── Push ───────────────────────────────────────────────────────────────────── export async function pushOutbox(): Promise { @@ -136,22 +161,13 @@ async function applyDelete(entity: string, id: string) { // ─── Sync loop ──────────────────────────────────────────────────────────────── let syncInterval: ReturnType | null = null; +let syncInFlight = false; /** Start background sync loop (every 30 seconds). */ export function startSync() { if (syncInterval) return; - sync(); // immediate first run - syncInterval = setInterval(sync, 30_000); -} - -/** Trigger an immediate sync cycle — call after server-only mutations (day/week close, reopen). */ -export function triggerSync() { sync(); -} - -/** Trigger an immediate sync and return a promise that resolves when it completes. */ -export function waitForSync(): Promise { - return sync(); + syncInterval = setInterval(sync, 30_000); } export function stopSync() { @@ -161,11 +177,29 @@ export function stopSync() { } } -async function sync() { +/** Trigger an immediate sync cycle — fire and forget. */ +export function triggerSync() { + sync(); +} + +/** Trigger an immediate sync and return a promise that resolves when it completes. */ +export function waitForSync(): Promise { + return sync(); +} + +async function sync(): Promise { + if (syncInFlight) return; + syncInFlight = true; + _syncState.update((s) => ({ ...s, status: 'syncing', error: null })); try { await pushOutbox(); await pullChanges(); - } catch { - // Unexpected error — will retry on next interval. + await refreshPendingCount(); + _syncState.update((s) => ({ ...s, status: 'idle', lastSynced: new Date() })); + } catch (err) { + const msg = err instanceof Error ? err.message : String(err); + _syncState.update((s) => ({ ...s, status: 'error', error: msg })); + } finally { + syncInFlight = false; } } diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index 1da3837..b9deb97 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -3,7 +3,7 @@ import { hasToken } from '$lib/api/client'; import { onMount, onDestroy } from 'svelte'; import { goto } from '$app/navigation'; - import { startSync, stopSync } from '$lib/stores/sync'; + import { startSync, stopSync, triggerSync, syncState } from '$lib/stores/sync'; import { todayKey, currentWeekKey } from '$lib/utils'; let { children } = $props(); @@ -21,7 +21,6 @@ return `/week?week=${currentWeekKey()}&day=${todayKey()}`; } - // "Today" tab is active when on /week with ?day === todayKey(). const todayActive = $derived( page.url.pathname === '/week' && page.url.searchParams.get('day') === todayKey() @@ -30,13 +29,49 @@ const weekActive = $derived( page.url.pathname === '/week' && !todayActive ); + + function formatLastSynced(d: Date | null): string { + if (!d) return 'never'; + const diff = Math.floor((Date.now() - d.getTime()) / 1000); + if (diff < 5) return 'just now'; + if (diff < 60) return `${diff}s ago`; + if (diff < 3600) return `${Math.floor(diff / 60)}m ago`; + return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + } + + // Tick every 15s so "Xs ago" stays fresh. + let tick = $state(0); + let tickInterval: ReturnType; + onMount(() => { tickInterval = setInterval(() => tick++, 15_000); }); + onDestroy(() => clearInterval(tickInterval));
@@ -59,13 +94,18 @@ nav { display: flex; - gap: 0.5rem; + align-items: center; + justify-content: space-between; padding: 0.75rem 1rem; background: #1a1a2e; position: sticky; top: 0; z-index: 10; } + .nav-links { + display: flex; + gap: 0.5rem; + } nav a { color: #adb5bd; text-decoration: none; @@ -83,6 +123,51 @@ background: #0f3460; color: #e9ecef; } + + .sync-btn { + position: relative; + display: flex; + align-items: center; + gap: 0.3rem; + background: none; + border: 1px solid #2e2e4e; + border-radius: 6px; + color: #adb5bd; + font-size: 1rem; + padding: 0.3rem 0.6rem; + line-height: 1; + transition: color 0.15s, border-color 0.15s; + cursor: pointer; + } + .sync-btn:hover { + color: #e9ecef; + border-color: #555580; + } + .sync-btn.syncing { + color: #74c0fc; + border-color: #74c0fc55; + } + .sync-btn.error { + color: #ff6b6b; + border-color: #ff6b6b55; + } + .spin { + display: inline-block; + animation: spin 1s linear infinite; + } + @keyframes spin { + to { transform: rotate(360deg); } + } + .badge { + font-size: 0.65rem; + font-weight: 700; + background: #e67e22; + color: #fff; + border-radius: 999px; + padding: 0.05rem 0.35rem; + line-height: 1.4; + } + main { max-width: 800px; margin: 0 auto;