fofos/fofos-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

the bar is gone; the device toggle is the editor's

Browse Source 
It sat across the top of the detail panel with Sync, Build and Publish — three
things that act on the site, beside one that decides how you are looking at it.
The toggle belongs with the settings it scopes: a spacing is chosen per width,
so the control saying which width is the first thing in that column.

Sync, Build and Publish are unmounted until they have a place of their own.
ViewModeProvider stays; it was never the bar's.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-09-01 07:38:43 +01:00
co-authored by Claude Opus 5
parent b5ca67e68e
commit e45e3d84a8
2 changed files with 44 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/EditorPanel.tsx
+35 -13
View File
@@ -1,3 +1,4 @@
import { DeviceToggle } from './DeviceToggle';
import { useEditorSlot } from './useEditorSlot';
/**
@@ -8,23 +9,44 @@ import { useEditorSlot } from './useEditorSlot';
* to a row of two dropdowns. A panel keeps the page whole and puts the controls where a workspace puts
* controls.
*
* It holds nothing. The panel that owns a selection builds the editor and announces it — see
* useEditorSlot for why it carries the element rather than a description of one.
* It holds nothing of its own except the width. The panel that owns a selection builds the editor and
* announces it — see useEditorSlot for why it carries the element rather than a description of one.
*
* ── The device toggle is here, above everything ──
*
* It was in a bar across the top of the detail panel, which put it beside Sync and Publish — three
* things that act on the SITE next to one that decides how you are looking at it. It belongs with the
* settings it scopes: a spacing is chosen per width, and the control saying which width should be the
* first thing in the column those choices are made in.
*
* Always drawn, including when nothing is selected. It is not part of the editor — it decides what the
* PREVIEW shows, so hiding it until a block is picked would mean selecting something to change the
* width and then deselecting it.
*
* It reads `?device=` rather than a context, which is what lets it live in a panel that is a sibling of
* the one holding the preview. See DeviceToggle.
*/
export const EditorPanel = () => {
const [editor] = useEditorSlot();
if (!editor) {
return (
<div className="flex size-full items-center justify-center p-6 text-center">
{/* Names what the panel is FOR rather than saying it is empty. "Nothing selected" describes
this component's state; this describes the reader's next move. */}
<p className="text-xs text-muted-foreground">
Pick a block in the page to edit it, or press Spacing on a band.
</p>
return (
<div className="flex size-full flex-col overflow-hidden">
{/* Outside the scroll area, so a long editor cannot carry it off the screen. */}
<div className="flex shrink-0 justify-center border-b border-border px-3 py-2">
<DeviceToggle size="bar" />
</div>
);
}
return <div className="size-full overflow-auto p-3">{editor}</div>;
{editor ? (
<div className="min-h-0 flex-1 overflow-auto p-3">{editor}</div>
) : (
<div className="flex min-h-0 flex-1 items-center justify-center p-6 text-center">
{/* Names what the panel is FOR rather than saying it is empty. "Nothing selected" describes
this component's state; this describes the reader's next move. */}
<p className="text-xs text-muted-foreground">
Pick a block in the page to edit it, or press Spacing on a band.
</p>
</div>
)}
</div>
);
};