Say a dashboard is read-only in the editor's view mode too

The lock notice was on `PanelSurface` alone, so /dashboards/{name} showed
disabled controls with nothing naming the state. Same pill, not a second
one; edit mode keeps its controls live, so it stays out of there.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013Gf7WaExcJ9bs3kfJXB3nK
This commit is contained in:
2026-08-25 22:15:09 +02:00
co-authored by Claude Opus 5
parent 9ad44fd3f6
commit f567c98de4
2 changed files with 10 additions and 1 deletions
@@ -67,6 +67,7 @@ import {
widgetsOf, widgetsOf,
} from "./DashboardView" } from "./DashboardView"
import { PanelRail } from "./PanelRail" import { PanelRail } from "./PanelRail"
import { LockNotice } from "./PanelSurface"
import { DashboardPanel, WidgetPanel } from "./panels" import { DashboardPanel, WidgetPanel } from "./panels"
import { import {
dashboardKeys, dashboardKeys,
@@ -545,6 +546,11 @@ export function DashboardEditor({
</span> </span>
</CanvasTitle> </CanvasTitle>
{/* Reading this dashboard is reading the panel, disabled controls and
all — so it says the same thing a panel does. Not while editing:
arranging never mounts the lock, so the controls are live. */}
{edit ? null : <LockNotice dashboard={draft} />}
<motion.div <motion.div
variants={slideUp} variants={slideUp}
initial="hidden" initial="hidden"
@@ -52,6 +52,9 @@ export function PanelSurface({
/** /**
* What a locked dashboard looks like, beyond controls that read as disabled. * What a locked dashboard looks like, beyond controls that read as disabled.
* *
* Shared with the editor's view mode, which shows the same locked dashboard
* from inside the app.
*
* Without it a read-only panel is a panel whose buttons do nothing, which * 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 * 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 * every other floating surface, and it says the state in words — a glyph on
@@ -60,7 +63,7 @@ export function PanelSurface({
* Live, because `locked` may be driven by a flow: the notice appears and goes * Live, because `locked` may be driven by a flow: the notice appears and goes
* with the lock rather than with the page load. * with the lock rather than with the page load.
*/ */
function LockNotice({ dashboard }: { dashboard: Dashboard }) { export function LockNotice({ dashboard }: { dashboard: Dashboard }) {
const { Notice } = useUi() const { Notice } = useUi()
// Read straight from the document rather than through `useLocked`: that // Read straight from the document rather than through `useLocked`: that
// provider sits inside the grid, and this notice is beside it. // provider sits inside the grid, and this notice is beside it.