feat: sync status indicator in nav

Shows a sync button in the top-right corner of the nav bar with live
status: spinning while syncing, warning icon on error, grey when idle.
Tooltip shows last synced time or error message. An orange badge
appears when there are pending outbox items.

- sync.ts: add syncState store (status, lastSynced, pendingCount,
  error); guard against concurrent sync cycles with syncInFlight flag
- layout: sync button wired to triggerSync(); ticks every 15s so the
  'Xs ago' label stays current

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<SyncState>({
+	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<void> {
@@ -136,22 +161,13 @@ async function applyDelete(entity: string, id: string) {
 // ─── Sync loop ────────────────────────────────────────────────────────────────
 
 let syncInterval: ReturnType<typeof setInterval> | 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();
-}
+	syncInterval = setInterval(sync, 30_000);
-
-/** Trigger an immediate sync and return a promise that resolves when it completes. */
-export function waitForSync(): Promise<void> {
-	return sync();
 }
 
 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<void> {
+	return sync();
+}
+
+async function sync(): Promise<void> {
+	if (syncInFlight) return;
+	syncInFlight = true;
+	_syncState.update((s) => ({ ...s, status: 'syncing', error: null }));
 	try {
 		await pushOutbox();
 		await pullChanges();
-	} catch {
+		await refreshPendingCount();
-		// Unexpected error — will retry on next interval.
+		_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;
 	}
 }

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<typeof setInterval>;
+	onMount(() => { tickInterval = setInterval(() => tick++, 15_000); });
+	onDestroy(() => clearInterval(tickInterval));
 </script>
 
 <nav>
+	<div class="nav-links">
 		<a href={todayHref()} class:active={todayActive}>Today</a>
 		<a href="/week" class:active={weekActive}>Week</a>
 		<a href="/history" class:active={page.url.pathname === '/history'}>History</a>
 		<a href="/settings" class:active={page.url.pathname === '/settings'}>Settings</a>
+	</div>
+	<button
+		class="sync-btn"
+		class:syncing={$syncState.status === 'syncing'}
+		class:error={$syncState.status === 'error'}
+		onclick={triggerSync}
+		title={$syncState.error ?? `Last synced: ${formatLastSynced($syncState.lastSynced)}`}
+		aria-label="Sync"
+	>
+		{#if $syncState.status === 'syncing'}
+			<span class="spin">↻</span>
+		{:else if $syncState.status === 'error'}
+			<span>⚠</span>
+		{:else}
+			<span>↻</span>
+		{/if}
+		{#if $syncState.pendingCount > 0}
+			<span class="badge">{$syncState.pendingCount}</span>
+		{/if}
+	</button>
 </nav>
 
 <main>
@@ -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;