feat: finish the homepage plugin, move service links and canvas out of core (B19)

plugins/homepage/src/frontend/widgets/ClockWidget.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Clock } from "lucide-react";
+import { registerWidget } from "./WidgetRegistry";
+import {
+  GRID_SIZE,
+  type ClockConfig,
+  type WidgetComponentProps,
+} from "../types.js";
+
+import { usePageVisibleInterval } from "../use-page-visible-interval.js";
+import { isValidTimezone } from "../clock-timezone";
+import { WidgetTitle } from "@termix/plugin-sdk/ui";
+
+function ClockWidget({ widget, config }: WidgetComponentProps<ClockConfig>) {
+  const { showSeconds, format } = config;
+  // Configs saved before the edit dialog validated timezones can still hold an
+  // unusable one (e.g. "America/New York"), which makes toLocaleTimeString throw.
+  const timezone =
+    config.timezone && isValidTimezone(config.timezone)
+      ? config.timezone
+      : undefined;
+  const [now, setNow] = useState(new Date());
+
+  // Minute-level is enough without seconds; pause when the tab is backgrounded.
+  usePageVisibleInterval(
+    () => setNow(new Date()),
+    showSeconds ? 1_000 : 30_000,
+  );
+
+  const opts: Intl.DateTimeFormatOptions = {
+    hour: "2-digit",
+    minute: "2-digit",
+    ...(showSeconds ? { second: "2-digit" } : {}),
+    hour12: format === "12h",
+    ...(timezone ? { timeZone: timezone } : {}),
+  };
+
+  const dateOpts: Intl.DateTimeFormatOptions = {
+    weekday: "long",
+    month: "short",
+    day: "numeric",
+    ...(timezone ? { timeZone: timezone } : {}),
+  };
+
+  const timeStr = now.toLocaleTimeString(undefined, opts);
+  const dateStr = now.toLocaleDateString(undefined, dateOpts);
+
+  return (
+    <div className="flex flex-col w-full h-full overflow-hidden select-none">
+      <WidgetTitle title={widget.title} icon={<Clock size={11} />} />
+      <div className="flex flex-col items-center justify-center flex-1 gap-1 p-3 overflow-auto">
+        <span className="text-2xl font-bold tabular-nums text-accent-brand">
+          {timeStr}
+        </span>
+        <span className="text-xs text-muted-foreground">{dateStr}</span>
+        {timezone && (
+          <span className="text-[10px] text-muted-foreground/60">
+            {timezone}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+registerWidget<ClockConfig>({
+  id: "clock",
+  name: "Clock",
+  description: "A live clock with configurable timezone",
+  category: "info",
+  icon: <Clock size={14} />,
+  defaultConfig: { showSeconds: true, format: "24h" },
+  defaultSize: { w: GRID_SIZE * 8, h: GRID_SIZE * 5 },
+  minSize: { w: GRID_SIZE * 2, h: GRID_SIZE * 2 },
+  component: ClockWidget,
+});
+
+export { ClockWidget };