one Save, in the panel's bar

Every section had its own Save buttons — four on About, two on Home, one per record — and on a page
long enough to scroll, the button you wanted was the one that had just left the screen.

Now there is one, beside Publish, pinned above the scroll. The section announces whether it has unsaved
changes, whether it is busy, and how to save; the bar renders that. Neither knows what the other is,
which is what keeps DetailPanel a map of keys to components rather than a place that has to know what
each section can do.

── What this replaces ──

The per-card saves existed because the API treats an absent key as "leave it alone", so a Save carrying
everything meant a half-written manifesto shipping with a photograph somebody meant to change. With one
Save that is the model rather than an accident: one press writes the page you are looking at.

The cost, stated plainly: there is no longer a way to commit one part of a page and leave the rest.
Nothing here needed that, and if something ever does it wants its own verb rather than four buttons all
called Save.

── Dirty is a comparison, not a flag ──

Against what the server last returned, field by field. A flag says "something was typed" and stays true
after you undo it by hand; a comparison says "this differs from what is stored", which is the question
a Save button is actually answering — and it is what lets the button be dead when there is nothing to
do, which is the whole value of having one.

The gallery picker on Home is deliberately outside it and still writes on selection: a <select> that
needs a second press to mean anything is a control people believe they have already used.

Sections with nothing to save render no button rather than a dead one. A permanently disabled control
invites a press and teaches that pressing does nothing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/DetailPanel.tsx

@@ -1,10 +1,13 @@
 import { useSearchParams } from 'react-router';
+import { Check, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 import { DEFAULT_SECTION, isSectionKey, sectionFor, sectionOpen, type SectionKey } from './sections';
 import { AdministrationPanel } from './AdministrationPanel';
 import { MediaPanel } from './MediaPanel';
 import { HomePanel } from './sections/HomePanel';
 import { GalleriesPanel } from './sections/GalleriesPanel';
 import { PublishButton } from './PublishButton';
+import { SaveTargetProvider, useSaveButton } from './SaveTarget';
 import { AboutPanel } from './sections/AboutPanel';
 import { RecordsPanel } from './sections/RecordsPanel';
 import { COLLABS_CONFIG, DROPS_CONFIG, GALLERY_CONFIG } from './sections/records';
@@ -59,6 +62,34 @@ const PANELS: Partial<Record<SectionKey, () => React.JSX.Element>> = {
   media: MediaPanel,
 };
 
+/**
+ * The one Save, driven by whichever section is open.
+ *
+ * Renders nothing at all when the section offers none — Media, Administration and Messages have
+ * nothing to save, and a permanently dead button is worse than no button: it invites a press and
+ * teaches that pressing does nothing.
+ */
+const SaveButton = () => {
+  const target = useSaveButton();
+  if (!target) return null;
+
+  return (
+    <Button
+      size="sm"
+      variant="outline"
+      className="h-6 gap-1.5 px-2 text-xs"
+      onClick={() => void target.save()}
+      // Dead until there is something to write. The whole value of one Save is that its state answers
+      // "have I saved?" — a button that looks the same either way answers nothing.
+      disabled={!target.dirty || target.busy}
+      title={target.dirty ? 'Save your changes' : 'Nothing to save'}
+    >
+      {target.busy ? <Loader2 className="size-3 animate-spin" /> : <Check className="size-3" />}
+      {target.busy ? 'Saving…' : 'Save'}
+    </Button>
+  );
+};
+
 export const DetailPanel = () => {
   const [params] = useSearchParams();
   const raw = params.get('section');
@@ -99,11 +130,16 @@ export const DetailPanel = () => {
         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.
       */}
-      <div className="flex shrink-0 items-center justify-end gap-2 border-b border-border px-4 py-2">
-        <PublishButton />
-      </div>
+      <SaveTargetProvider>
+        <div className="flex shrink-0 items-center justify-end gap-2 border-b border-border px-4 py-2">
+          {/* Left of Publish, and in that order for a reason: save what you wrote, then make it
+              public. A row that put them the other way round would read as the sequence backwards. */}
+          <SaveButton />
+          <PublishButton />
+        </div>
 
-      <div className="min-h-0 flex-1">{Panel ? <Panel /> : <PlannedSection section={current} />}</div>
+        <div className="min-h-0 flex-1">{Panel ? <Panel /> : <PlannedSection section={current} />}</div>
+      </SaveTargetProvider>
     </div>
   );
 };