stroblme
0b5ce4fcbb
A dashboard is a wall panel somebody hangs in their own hallway, so it now wears what they choose: a look, and a palette of their own colours. Two complete component sets live under `Dashboard/ui/` — `glass` (translucent panes over a slowly moving ground) and `material` (Material 3 tonal cards) — behind one prop contract. Every control's state, keyboard and `aria-` live in `ui/core` and are shared, so the two sets are the same dashboard drawn twice rather than two products: a set only decides what a control looks like while doing it. Four settings join the channel, each drivable by a flow like any other: `look`, `palette`, `background` and `touch`. A palette is an ordered list of hex colours — background, surface, primary, accent, text, then more chart colours — pasted from a coolors.co link or typed, written onto the canvas as the token variables everything already reads. Trailing roles are derived, so three colours are a whole dashboard, and derived text is held to AA rather than trusted (`theme.check.ts` measures it). A palette also decides light or dark, since its first colour is the ground. Widgets are measured against their own tile with container queries rather than against the viewport, animate through `motion`, and can be drawn without their title. The three reworks: - a bar draws a row per reading, up to eight, each in the dashboard's own data colours and each able to carry its own scale — replacing readings nested in one fill, which could only ever share one colour and stop at three. Documents written the old way are read as rows. - a chart's range picker moved to a column down its right-hand edge, which gives the plot back a whole row of a short tile. - the colour wheel became a disc: hue is the angle and saturation the distance from the middle, so a colour is one gesture rather than three, with brightness on a slider beside it. `index.css` and `lib/motion.ts` are untouched — the dashboard overrides token *values* on its canvas, never the blocks the two repos share.
37 lines
994 B
TypeScript
37 lines
994 B
TypeScript
import { useEffect, useState } from "react"
|
|
|
|
import type { WidgetProps } from "./widgets"
|
|
|
|
/**
|
|
* 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) {
|
|
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="dui-clock truncate" data-testid="clock-time">
|
|
{now.toLocaleTimeString(undefined, {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
<p className="truncate text-muted-foreground">
|
|
{now.toLocaleDateString(undefined, {
|
|
weekday: "long",
|
|
day: "numeric",
|
|
month: "long",
|
|
})}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|