Publish is in the header of every section

Publishing is the last step of every edit — write something on Home, choose a gallery, add a drop, then
make it public. It lived in one card at the bottom of one section, so finishing a change meant leaving
the thing you were working on to go and find it. Somebody who does not know the panel does not find it
at all, and concludes their edit is live when it is not.

Administration's card stays. Two entry points to one action is right here: that card belongs to a row
about the production server and reports what a build produced, while this is the verb at the end of a
sentence somebody has just written.

It takes minutes and says so, because a button that greys out and does nothing visible for three
minutes reads as broken and the second press is somebody assuming the first did not register.

Failure opens a panel under the header rather than replacing the label. The server's own words are
usually a build error, which is long and worth reading, and a header is one line. Positioned absolutely
so nothing shifts, and it stays until dismissed — a message that vanishes on a timer is one somebody
was still reading.

Disabled until `useReady`, the same answer the nav uses to lock the sections, so the button is
available exactly when the sections are.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-30 10:17:11 +01:00
co-authored by Claude Opus 5
parent f019f7ec86
commit 69c9c23e48
2 changed files with 117 additions and 0 deletions
+9
View File
@@ -1,5 +1,6 @@
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".
@@ -17,6 +18,11 @@ import { DEFAULT_SECTION, isSectionKey, sectionFor } from './sections';
*
* "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 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.
*/
export const DetailHeader = () => {
const [params] = useSearchParams();
@@ -28,6 +34,9 @@ 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 />
</>
);
};