stroblmeandClaude Opus 5
092a5333e8
A dashboard could only ever receive as a set of tiles. This adds the dashboard itself as a receiver: `settings` maps a name to a value plus an optional binding. Unbound, the setting is simply its value — a wall panel that is always dark costs no flow. Bound, a flow drives it live and the value is the fallback. Two settings are wired: `theme` (system/light/dark) and `locked` (read-only). There is no schedule field on purpose — a node publishing to the bound message on a cron is what a schedule is here, which is the point of a channel. - `messages_for()` now walks a dashboard's bound settings as well as its widgets' bindings. Without this a paired screen is refused its own theme message, on the one surface the setting exists for; it bounds the socket too. - `locked` is gated in `usePublish`, so every control inherits it, and each control also draws itself disabled — a dead button reads as broken otherwise. The panel surface says Read-only in the corner. - The theme is a class on the dashboard's own surface, never the root: inside the app shell it must not flip the chrome. `.light` gains the tokens `.dark` already had (mirrored in the index repo) so both directions work on a subtree. - Settings bindings are type-checked from the document alone, the rule widget bindings follow, and mirrored on the server. - A bound setting is drawn on the flow canvas as a dashboard-level endpoint. - The demo's house flow now publishes `home.panel_theme`, which the demo dashboard's theme binds to: the panel goes dark after sunset, at no tile cost. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018tULRZJUkZsw7rMJ3h4xvu
75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { Lock } from "lucide-react"
|
|
|
|
import type { Dashboard } from "@/components/Dashboard/DashboardView"
|
|
import {
|
|
CanvasSurface,
|
|
DashboardView,
|
|
} from "@/components/Dashboard/DashboardView"
|
|
import { useDashboardLocked } from "@/components/Dashboard/settings"
|
|
|
|
/**
|
|
* One dashboard filling whatever screen it landed on.
|
|
*
|
|
* The whole of what a wall panel draws, shared by the single-dashboard route
|
|
* (`/view/{name}`) and the paired-panel one (`/panel/{id}`) so a device shows
|
|
* the same thing either way — the second merely has a rail beside it.
|
|
*
|
|
* The dashboard's theme is stated by the route rather than here: on these two
|
|
* the screen *is* the dashboard, so it has to cover the letterbox and the rail
|
|
* as well as the canvas.
|
|
*/
|
|
export function PanelSurface({
|
|
dashboard,
|
|
stacked,
|
|
}: {
|
|
dashboard: Dashboard
|
|
/** A landscape arrangement scaled onto a phone comes out at about a fifth of
|
|
* its size, which reads as nothing at all. Stack it instead. */
|
|
stacked?: boolean
|
|
}) {
|
|
return (
|
|
<div className="relative size-full">
|
|
{stacked ? (
|
|
<DashboardView dashboard={dashboard} stacked />
|
|
) : (
|
|
// The panel's own surface, scaled to fit. No dots: nothing is being
|
|
// arranged here.
|
|
<CanvasSurface dashboard={dashboard}>
|
|
{() => <DashboardView dashboard={dashboard} />}
|
|
</CanvasSurface>
|
|
)}
|
|
<LockNotice dashboard={dashboard} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* What a locked dashboard looks like, beyond controls that read as disabled.
|
|
*
|
|
* Without it a read-only panel is a panel whose buttons do nothing, which
|
|
* reads as broken rather than as locked. Frosted chrome over content, like
|
|
* every other floating surface, and it says the state in words — a glyph on
|
|
* its own is not a label.
|
|
*
|
|
* Live, because `locked` may be driven by a flow: the notice appears and goes
|
|
* with the lock rather than with the page load.
|
|
*/
|
|
function LockNotice({ dashboard }: { dashboard: Dashboard }) {
|
|
// Read straight from the document rather than through `useLocked`: that
|
|
// provider sits inside the grid, and this notice is beside it.
|
|
const locked = useDashboardLocked(dashboard)
|
|
if (!locked) return null
|
|
return (
|
|
<div
|
|
// Announced rather than merely drawn: `locked` may be driven by a flow,
|
|
// so the state can change under someone already looking at the page.
|
|
aria-live="polite"
|
|
data-testid="dashboard-locked"
|
|
className="pointer-events-none absolute bottom-0 right-0 flex items-center gap-1.5 rounded-full border border-border bg-card/80 px-3 py-1.5 text-sm text-muted-foreground shadow-e2 backdrop-blur-md"
|
|
>
|
|
<Lock className="size-4" aria-hidden />
|
|
Read-only
|
|
</div>
|
|
)
|
|
}
|