Add live clock to top bar

src/components/clock.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function Clock() {
+	const [time, setTime] = useState("");
+
+	useEffect(() => {
+		function update() {
+			const now = new Date();
+			setTime(
+				now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+			);
+		}
+		update();
+		const id = setInterval(update, 30_000);
+		return () => clearInterval(id);
+	}, []);
+
+	if (!time) return null;
+
+	return (
+		<span
+			className="text-[11px] font-bold tabular-nums select-none"
+			style={{ color: "color-mix(in srgb, var(--color-text-muted) 60%, transparent)" }}
+		>
+			{time}
+		</span>
+	);
+}