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/DetailPanel.tsx
+9 -54
View File
@@ -1,8 +1,6 @@
import { Navigate } from 'react-router';
import { href, useNav } from './routes';
import { DEFAULT_SECTION } from './sections';
import { Eye, Monitor, Pencil, Smartphone, Tablet } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { sectionFor, sectionOpen, type SectionKey } from './sections';
import { AdministrationPanel } from './AdministrationPanel';
import { MediaPanel } from './MediaPanel';
@@ -10,10 +8,7 @@ import { GalleriesPanel } from './sections/GalleriesPanel';
import { LayoutPanel } from './sections/LayoutPanel';
import { PagesPanel } from './sections/PagesPanel';
import { PageBuilderPanel } from './sections/PageBuilderPanel';
import { PublishButton } from './PublishButton';
import { SyncButton } from './SyncButton';
import { DEVICES, ViewModeProvider, useViewMode } from './ViewMode';
import { DeviceToggle } from './DeviceToggle';
import { ViewModeProvider } from './ViewMode';
import { MessagesPanel } from './MessagesPanel';
import { PlannedSection } from './PlannedSection';
import { useReady } from './useReady';
@@ -58,16 +53,6 @@ const PANELS: Partial<Record<SectionKey, () => React.JSX.Element>> = {
media: MediaPanel,
};
/** The width the preview is rendered at. See DEVICES for why these three and not others. */
const BarDeviceToggle = () => {
const { previewable } = useViewMode();
if (!previewable) return null;
// The same control the editor sections use — see DeviceToggle, which reads `?device=` rather than a
// context so every panel on the screen shares one answer.
return <DeviceToggle size="bar" />;
};
export const DetailPanel = () => {
/*
A page selected inside Pages opens the BUILDER, not the list with a row lit up. By SLUG, so the URL
@@ -113,48 +98,18 @@ export const DetailPanel = () => {
return (
<div className="flex size-full flex-col overflow-hidden">
{/*
The site's own actions, pinned above whatever the section is showing.
No bar.
OUTSIDE the scroll area on purpose. Every panel scrolls its own contents, so anything drawn
inside one leaves the screen as soon as somebody reads to the bottom — and Publish is what you
reach for AFTER reading to the bottom. It sits here instead, as a sibling of the scrolling
region rather than the first thing inside it.
It held the device toggle and Sync / Build / Publish across the top of this panel. The toggle
moved to the top of the EDITOR, which is where the settings it scopes already are; the three
actions are out until they have a place that is theirs rather than a corner of the panel that
happens to be pinned. `SyncButton` and `PublishButton` still exist and are still mounted
nowhere — see git history for what the bar looked like.
Not in the workspace's chrome header either, where it lived for an afternoon. That header is
shared furniture drawn the same way by every panel in the app; these two buttons belong to this
plugin and to the site it administers.
`ViewModeProvider` stays. It is not the bar's: the preview and the two panels with one read
`device` from it, and `usePreviewable` is how a section says it has a page to show.
*/}
<ViewModeProvider>
{/*
Three groups: how you are looking at it, at what width, and what to do with it.
The middle one is centred against the BAR rather than against what is beside it — the two
outer groups change width as sections come and go, and a middle that drifted with them
would never be in the same place twice.
*/}
<div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2">
{/* Empty, and deliberately still here: the middle group is centred against the BAR, so
removing the left group would let Desktop/Tablet/Mobile drift left as the right group
changes width. It held Edit/View — see the note in ViewMode about why there is no
longer a mode to toggle. */}
<div className="flex flex-1 justify-start" />
<div className="flex justify-center">
<BarDeviceToggle />
</div>
<div className="flex flex-1 items-center justify-end gap-2">
{/* The order is the sequence: make the media web-ready, then make it public. Sync sits
left of Build for the same reason Build sits left of Publish — it is what has to have
happened first, and a stale `derived/` is a picture missing from the page you just
built.
No Save. Every control writes itself — see useAutosave. */}
<SyncButton />
<PublishButton />
</div>
</div>
<div className="min-h-0 flex-1">{Panel ? <Panel /> : <PlannedSection section={current} />}</div>
</ViewModeProvider>
</div>