Change sync indicator from div to button that calls sync() on click,
with hover feedback and updated tooltip.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace hardcoded colors (gray-500, #b44, red-300/red-50/red-600,
green-600) with CSS variables for theme consistency. Add --destructive,
--error-*, --success-*, and --card-shadow variables to :root. Soften
default card borders from --border to --border-subtle and add 8-bit
style hard-offset shadows with hover effects. Apply accent-color for
themed checkboxes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace green/blue/yellow/red with palette colors: --primary for synced,
--primary with opacity for syncing, --text-muted for offline, muted red
for error.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Extract toast store to standalone module so notes store can show toasts
- Add try/catch to all note mutations with optimistic updates + IDB queue on network error
- Wire up startSync/stopSync in layout to enable online/offline event listeners
- Reload notes from server after successful sync push to prevent data loss
- Connect SyncIndicator to real sync status with Lucide cloud icons
- Add 300ms minimum display time for status transitions
- Add e2e tests for offline create, edit, trash, and sync-on-reconnect
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
