pastilhasandClaude Opus 5
e8ce6bc830
They were in the workspace's chrome header for an afternoon. Two things were wrong with that. That header is shared furniture — every panel in the app draws it the same way — and these two buttons belong to this plugin and to the site it administers, not to the frame around it. And the panels scroll their own contents now. Anything drawn inside one leaves the screen as soon as somebody reads to the bottom, which is exactly when they reach for Publish. So the bar is a sibling of the scrolling region rather than the first thing inside it: `shrink-0` above a `min-h-0 flex-1`, which is the same arrangement that makes the panels scroll at all. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
import { useSearchParams } from 'react-router';
|
|
import { DEFAULT_SECTION, isSectionKey, 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 [params] = useSearchParams();
|
|
const raw = params.get('section');
|
|
const section = sectionFor(isSectionKey(raw) ? raw : DEFAULT_SECTION);
|
|
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>
|
|
</>
|
|
);
|
|
};
|