From 95637ec5507bba34877813d8d31f86499e54189e Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 20 Aug 2026 08:35:00 +0200
Subject: [PATCH] Add the clock widget: local time and date, bound to nothing

One second-tick interval and the browser's own locale formatting, so there
is no 12/24-hour setting to carry and nothing to bind.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HTsT1isxUjw5gtkJk8WhuA
---
 .../src/components/Dashboard/ClockWidget.tsx  | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Dashboard/ClockWidget.tsx b/frontend/src/components/Dashboard/ClockWidget.tsx
index bef1b89..2b81ab4 100644
--- a/frontend/src/components/Dashboard/ClockWidget.tsx
+++ b/frontend/src/components/Dashboard/ClockWidget.tsx
@@ -1,6 +1,36 @@
+import { useEffect, useState } from "react"
+
 import type { WidgetProps } from "./widgets"
 
-/** A clock — a stub until the clock widget is written. */
+/**
+ * Local time and date, read from the browser rather than from the graph.
+ *
+ * The tick is a plain one-second interval and the formatting is the browser's
+ * own locale, so there is no 12/24-hour setting to carry.
+ */
 export function ClockWidget(_props: WidgetProps) {
-  return <p className="text-sm text-muted-foreground">—</p>
+  const [now, setNow] = useState(() => new Date())
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(new Date()), 1000)
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <div className="min-w-0">
+      <p className="truncate text-3xl tabular-nums" data-testid="clock-time">
+        {now.toLocaleTimeString(undefined, {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}
+      </p>
+      <p className="truncate text-sm text-muted-foreground">
+        {now.toLocaleDateString(undefined, {
+          weekday: "long",
+          day: "numeric",
+          month: "long",
+        })}
+      </p>
+    </div>
+  )
 }