Build and Publish get their own bar, pinned above the scroll

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>
This commit is contained in:
2026-08-30 23:18:19 +01:00
co-authored by Claude Opus 5
parent 9fd5ffd925
commit e8ce6bc830
2 changed files with 22 additions and 7 deletions
+5 -7
View File
@@ -1,6 +1,5 @@
import { useSearchParams } from 'react-router';
import { DEFAULT_SECTION, isSectionKey, sectionFor } from './sections';
import { PublishButton } from './PublishButton';
/**
* The detail panel's chrome header — the section's own name, not the word "Detail".
@@ -19,10 +18,12 @@ import { PublishButton } from './PublishButton';
* "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.
*
* ── And Publish, on the right ──
* ── The actions are NOT here ──
*
* The one action that belongs to every section rather than to any of them. It is here because it is
* what you do after editing anything, and a header is the one piece of chrome every panel already has.
* 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();
@@ -34,9 +35,6 @@ export const DetailHeader = () => {
<>
<Icon className="h-3.5 w-3.5 shrink-0" />
<span className="flex-1 truncate text-xs font-medium">{section.label}</span>
{/* Right of the name, on every section. Publishing is the last step of every edit and it used to
live in one card at the bottom of one section — see PublishButton for why that was wrong. */}
<PublishButton />
</>
);
};