there is no View, only Edit

The bar offered Edit and View, and View existed to see the page without the builder's outlines and
handles on top of it. It was the DEFAULT, which put a click in front of every arrival at the one panel
whose job is editing — and it put a branch in every painter that did nothing but wait for that click.

So the mode is gone rather than defaulted the other way: no toggle, no `?mode=`, no guard. The clean
page is still one click away and always was — it is the site, on its own URL. What the admin owes is
the editing surface, always.

The left group in the bar stays, empty. The middle one is centred against the BAR rather than against
its neighbours, so removing the left group would let Desktop/Tablet/Mobile drift as the right group
changes width.

The preview's caption stays too. It reads as a duplicate of the device buttons and is not: they say the
width, and it says which SERVER — development, not production — which nothing else on the screen does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-31 19:23:37 +01:00
co-authored by Claude Opus 5
parent 8c9e4ecb85
commit 8f673792d1
5 changed files with 32 additions and 87 deletions
+15 -33
View File
@@ -30,7 +30,17 @@ import { useSearchParams } from 'react-router';
* The rule was already right; the exception was not.
*/
export type Mode = 'edit' | 'view';
/*
There is no Mode any more.
The bar offered Edit and View, and View existed to see the page without the builder's outlines and
handles on top of it. It was the default, and it turned out to be the wrong default and then the
wrong feature: this panel is where somebody EDITS, and a second mode meant every arrival had a click
in front of it and every guard in the panels had a branch that did nothing but wait for that click.
The clean page is still one click away — it is the site, on its own URL. What the admin owes is the
editing surface, always.
*/
export type DeviceName = 'desktop' | 'tablet' | 'mobile';
/**
@@ -60,9 +70,8 @@ export const DEVICES: Record<DeviceName, { label: string; width: number }> = {
};
type ViewModeValue = {
mode: Mode;
device: DeviceName;
setMode: (mode: Mode) => void;
setDevice: (device: DeviceName) => void;
/** True while a section with a preview is open. The bar shows its controls only then. */
previewable: boolean;
@@ -70,9 +79,8 @@ type ViewModeValue = {
};
const ViewModeContext = createContext<ViewModeValue>({
mode: 'edit',
device: 'desktop',
setMode: () => {},
setDevice: () => {},
previewable: false,
announcePreviewable: () => {},
@@ -82,33 +90,7 @@ export const ViewModeProvider = ({ children }: { children: ReactNode }) => {
const [params, setParams] = useSearchParams();
/*
The mode lives in the URL — `?mode=edit`.
docs/navigation-audit.md draws the line: anything ADDRESSABLE goes in the URL. Whether you are
editing a page or looking at it is exactly that. It survives a reload, it can be sent to somebody,
and a link to a page being edited is a different thing from a link to the page.
`mode`, not `view`. The parameter names the AXIS and the value names the state, so the pair reads
as `mode=edit` and `mode=view` rather than the tautological `view=view`.
Absent means View, which is the default and the common case — so an ordinary link carries nothing,
and the parameter only appears once somebody has chosen.
*/
const mode: Mode = params.get('mode') === 'edit' ? 'edit' : 'view';
const setMode = useCallback(
(next: Mode) => {
const search = new URLSearchParams(params);
// Written even for the default, once somebody has touched it: a URL that says `mode=view` is
// unambiguous, and a toggle that sometimes leaves no trace reads as a toggle that failed.
search.set('mode', next);
setParams(search, { replace: true });
},
[params, setParams],
);
/*
The device, alongside the mode, for the same reason.
The device lives in the URL, for the reason the whole file gives: it is addressable.
Absent means desktop — the default and the common case — so an ordinary link carries neither
parameter and each appears only once somebody has chosen it.
@@ -130,7 +112,7 @@ export const ViewModeProvider = ({ children }: { children: ReactNode }) => {
const announcePreviewable = useCallback((has: boolean) => setPreviewable(has), []);
return (
<ViewModeContext.Provider value={{ mode, device, setMode, setDevice, previewable, announcePreviewable }}>
<ViewModeContext.Provider value={{ device, setDevice, previewable, announcePreviewable }}>
{children}
</ViewModeContext.Provider>
);