rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add live clock to dashboard header in 12hr format

Browse Source 
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>
This commit is contained in:
Kyle 2026-03-12 18:08:05 +08:00
parent 246b54d10c
commit 3afa894e1b
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/dashboard/DashboardPage.tsx
View File

@ -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 && (
<>