bytelyst/learning_ai_clock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): wire useSync hook into Dashboard with cloud sync status indicator

Browse Source
This commit is contained in:
saravanakumardb1 2026-02-28 01:54:40 -08:00
parent bf2f7cde50
commit 375d3a7ec0
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/Dashboard.tsx
View File

@ -11,7 +11,8 @@ import { CreateTimerModal } from './CreateTimerModal';
import { AlarmOverlay } from './AlarmOverlay'; import { AlarmOverlay } from './AlarmOverlay';
import { requestNotificationPermission } from '@/lib/notifications'; import { requestNotificationPermission } from '@/lib/notifications';
import { formatTime, formatDate } from '@/lib/format'; import { formatTime, formatDate } from '@/lib/format';
import { Plus, Clock, Bell, Keyboard, Sun, Moon, Settings, Eye, BarChart3, ListChecks } from 'lucide-react'; import { Plus, Clock, Bell, Keyboard, Sun, Moon, Settings, Eye, BarChart3, ListChecks, Cloud, CloudOff, Loader2 } from 'lucide-react';
import { useSync } from '@/lib/use-sync';
import { BUILT_IN_CATEGORIES, matchesCategory } from '@/lib/categories'; import { BUILT_IN_CATEGORIES, matchesCategory } from '@/lib/categories';
import Link from 'next/link'; import Link from 'next/link';
import { FeedbackButton } from './FeedbackButton'; import { FeedbackButton } from './FeedbackButton';
@ -32,6 +33,9 @@ export function Dashboard() {
const { pause, resume } = useTimerStore(); const { pause, resume } = useTimerStore();
const { theme, toggle: toggleTheme } = useTheme(); const { theme, toggle: toggleTheme } = useTheme();
// Cloud sync
const { isSyncing, syncEnabled, pendingChanges, lastError } = useSync();
// Start the tick loop // Start the tick loop
useTickLoop(); useTickLoop();
@ -189,6 +193,15 @@ export function Dashboard() {
> >
<Settings size={18} /> <Settings size={18} />
</Link> </Link>
{syncEnabled && (
<span
className="p-2 rounded-lg"
style={{ color: isSyncing ? 'var(--cm-accent)' : lastError ? 'var(--cm-critical)' : 'var(--cm-text-tertiary)' }}
title={isSyncing ? 'Syncing...' : lastError ? `Sync error: ${lastError}` : pendingChanges > 0 ? `${pendingChanges} pending` : 'Synced'}
>
{isSyncing ? <Loader2 size={16} className="animate-spin" /> : lastError ? <CloudOff size={16} /> : <Cloud size={16} />}
</span>
)}
<button <button
onClick={() => setShowShortcuts((p) => !p)} onClick={() => setShowShortcuts((p) => !p)}
className="p-2 rounded-lg transition-colors cursor-pointer" className="p-2 rounded-lg transition-colors cursor-pointer"