Files
fofos-admin/web/DetailHeader.tsx
pastilhasandClaude Opus 5 a7fc07c52f sections are paths, not a query string
The admin declares its routes in the manifest, so /fofos-admin/layout/header and
/fofos-admin/pages/home are real URLs. One reader takes the two segments after
the mount; links carry no query string at all, so nothing leaks between
sections.

What stays in the query is how you are looking — device, tab, view — rather than
at what.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-01 04:57:29 +01:00

40 lines
1.6 KiB
TypeScript

import { useNav } from './routes';
import { sectionFor } from './sections';
/**
* The detail panel's chrome header — the section's own name, not the word "Detail".
*
* ── Why this replaces a row inside the panel ──
*
* The panel used to draw its own header strip with the section label and its hint, UNDER the workspace's
* chrome header, which said "Detail". Two bars stacked, one of them saying nothing: the top of the panel
* was three rows of furniture before any content.
*
* A panel meta may supply its own `header`, which is the mechanism for exactly this — several plugins
* already do it. So the section's name goes where a panel's name goes, and the row inside is gone.
*
* ── The hint went with it ──
*
* "Photos and video the site is built from" is useful in the NAV, where somebody is choosing between
* ten sections. Repeated above the thing they chose, it is a caption for a decision already made.
*
* ── The actions are NOT here ──
*
* Build and Publish were, briefly. They belong to the panel rather than to the workspace's chrome: the
* chrome header scrolls out of reach on a long section, and it is shared furniture that every panel in
* the app draws the same way. They live in DetailPanel's own bar now, which is pinned above the scroll
* area and always reachable.
*/
export const DetailHeader = () => {
const { section: key } = useNav();
const section = sectionFor(key);
const Icon = section.icon;
return (
<>
<Icon className="h-3.5 w-3.5 shrink-0" />
<span className="flex-1 truncate text-xs font-medium">{section.label}</span>
</>
);
};