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:
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user