Offline Write Queue

What it does

When you are offline (or the network drops mid-request), key user actions are saved locally in IndexedDB and automatically pushed to the server the moment you reconnect. You can keep working in the app without seeing errors.

Where to find it

The orange bar at the top of the screen appears when you go offline and shows how many changes are pending.
When you come back online, the bar turns blue and shows "Syncing N pending changes…" with a manual Sync now button.

How it works

All writes go through src/lib/sync-queue.ts (offlineWrite) which:

Tries Supabase first.
If offline or the request fails with a network error, the mutation is enqueued in IndexedDB (mutations store).
On reconnect (online event), flushQueue() runs automatically.
UI gets a toast: "Will sync when back online".

Currently routed through the queue

Reminder dismissals (useReminderNotifications, trip page)
Expense delete + trip budget update (ExpensesPanel)
Collaborator removal (CollaboratorsPanel)
Document delete (trip documents page)
Profile + preferences + language updates (Settings, OnboardingModal)
Itinerary, packing, ground, flight, safety, journal, research, checklist panels (already wired)

Not yet queued (need online)

Trip creation (wizard) — needs the new trip ID returned synchronously.
Document upload — needs storage upload + select-back.
Admin pages — require online by design.

Edge cases

Permanent errors (e.g. RLS violation) are dropped from the queue rather than retried forever.
Network errors stop the flush at the first failure so subsequent mutations keep their order.
The pending count is exposed via usePendingSync() for any component that wants to surface it.

Related files

src/lib/sync-queue.ts — offlineWrite + flushQueue
src/lib/offline-db.ts — IndexedDB schema (mutations store)
src/hooks/usePendingSync.ts — pending count + auto-flush
src/components/ConnectionBar.tsx — top banner UI