From 375d3a7ec0beb912d03e554697f5bcf4bc720e98 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sat, 28 Feb 2026 01:54:40 -0800
Subject: [PATCH] feat(web): wire useSync hook into Dashboard with cloud sync
 status indicator

---
 web/src/components/Dashboard.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Dashboard.tsx b/web/src/components/Dashboard.tsx
index 9b6521a..de96245 100644
--- a/web/src/components/Dashboard.tsx
+++ b/web/src/components/Dashboard.tsx
@@ -11,7 +11,8 @@ import { CreateTimerModal } from './CreateTimerModal';
 import { AlarmOverlay } from './AlarmOverlay';
 import { requestNotificationPermission } from '@/lib/notifications';
 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 Link from 'next/link';
 import { FeedbackButton } from './FeedbackButton';
@@ -32,6 +33,9 @@ export function Dashboard() {
   const { pause, resume } = useTimerStore();
   const { theme, toggle: toggleTheme } = useTheme();
 
+  // Cloud sync
+  const { isSyncing, syncEnabled, pendingChanges, lastError } = useSync();
+
   // Start the tick loop
   useTickLoop();
 
@@ -189,6 +193,15 @@ export function Dashboard() {
             >
               <Settings size={18} />
             </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
               onClick={() => setShowShortcuts((p) => !p)}
               className="p-2 rounded-lg transition-colors cursor-pointer"