From 3afa894e1b96f0465492379d9162959ea8749697 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 18:08:05 +0800
Subject: [PATCH] Add live clock to dashboard header in 12hr format

Displays current time before the date separated by a vertical bar:
"6:30 PM | Thursday, March 12, 2026". Updates every 60 seconds.
Uses tabular-nums for stable digit widths.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/dashboard/DashboardPage.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/dashboard/DashboardPage.tsx b/frontend/src/components/dashboard/DashboardPage.tsx
index f1b3855..e987940 100644
--- a/frontend/src/components/dashboard/DashboardPage.tsx
+++ b/frontend/src/components/dashboard/DashboardPage.tsx
@@ -42,6 +42,13 @@ export default function DashboardPage() {
   const [quickAddType, setQuickAddType] = useState<'event' | 'todo' | 'reminder' | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [clockNow, setClockNow] = useState(() => new Date());
+
+  // Live clock — update every minute
+  useEffect(() => {
+    const interval = setInterval(() => setClockNow(new Date()), 60_000);
+    return () => clearInterval(interval);
+  }, []);
 
   // Click outside to close dropdown
   useEffect(() => {
@@ -173,7 +180,9 @@ export default function DashboardPage() {
           </h1>
           <div className="flex items-center gap-2 mt-1">
             <p className="text-muted-foreground text-sm">
-              {format(new Date(), 'EEEE, MMMM d, yyyy')}
+              <span className="tabular-nums">{format(clockNow, 'h:mm a')}</span>
+              <span className="mx-1.5 text-muted-foreground/30">|</span>
+              {format(clockNow, 'EEEE, MMMM d, yyyy')}
             </p>
             {updatedAgo && (
               <>