a page's settings sit above the editor

Menu item, address and page title — what the retired /fofos-admin/pages panel
held, moved to the column where everything else about that page is edited.

Above the device toggle, because the toggle scopes what is under it to one width
and none of these three have widths. Read from the URL rather than announced:
they belong to the page whatever is selected inside it, so picking a block must
not replace them.

A changed slug changes the page's own address, so the panel follows it — left
alone the URL would name a page the list no longer holds.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-01 09:09:35 +01:00
co-authored by Claude Opus 5
parent d2ac0aca1b
commit dfc22d2d2c
2 changed files with 152 additions and 0 deletions
+21
View File
@@ -1,4 +1,7 @@
import { DeviceToggle } from './DeviceToggle';
import { PageSettings } from './sections/PageSettings';
import { useNav } from './routes';
import { pageFromParam, usePages } from './usePages';
import { useEditorSlot } from './useEditorSlot';
/**
@@ -29,8 +32,26 @@ import { useEditorSlot } from './useEditorSlot';
export const EditorPanel = () => {
const [editor] = useEditorSlot();
/*
The selected page's own settings, above everything.
Read here rather than announced like the editor below it, because they are not the editor: they
belong to the page whatever is selected inside it, and a block being picked must not replace them.
Above the device toggle, because the toggle scopes what is under it to one width and none of these
three have widths.
*/
const { section, item } = useNav();
const { pages } = usePages();
const page = section === 'pages' ? pageFromParam(pages, item) : null;
return (
<div className="flex size-full flex-col overflow-hidden">
{page && (
<div className="shrink-0 border-b border-border px-3 py-3">
<PageSettings page={page} />
</div>
)}
{/* Outside the scroll area, so a long editor cannot carry it off the screen. */}
<div className="shrink-0 border-b border-border px-3 py-2">
<DeviceToggle />