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.
       */}
+      <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>
+      </SaveTargetProvider>
     </div>
   );
 };

web/SaveTarget.tsx

@@ -0,0 +1,71 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
+
+/**
+ * One Save, in the panel's own bar, driven by whichever section is open.
+ *
+ * ── Why a context and not a prop ──
+ *
+ * The button lives in DetailPanel and the work lives in the section — and DetailPanel deliberately
+ * knows nothing about the sections beyond a map of keys to components. Threading a save handler down
+ * would mean every panel taking a prop it did not ask for, and DetailPanel holding a union of what
+ * each of them can do.
+ *
+ * So the section announces itself instead. It says whether it has unsaved changes, whether it is busy,
+ * and how to save; the bar renders that. Neither has to know what the other is.
+ *
+ * ── One Save replaces the per-card ones ──
+ *
+ * The panels used to save a card at a time, 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 no longer an accident, it is the model: one Save saves the
+ * page you are looking at, which is what a person expects from a button that says Save.
+ *
+ * What it costs is the thing worth stating: there is no longer a way to commit one part of a page and
+ * leave the rest. Nothing in this admin needed that, and if something ever does it wants its own verb
+ * rather than four buttons called the same word.
+ */
+
+export type SaveTarget = {
+  /** Something is edited and not yet written. The button is dead without it. */
+  dirty: boolean;
+  /** A save is in flight. Keeps a second press from starting a second one. */
+  busy: boolean;
+  save: () => void | Promise<void>;
+};
+
+const SaveTargetContext = createContext<{
+  target: SaveTarget | null;
+  announce: (target: SaveTarget | null) => void;
+}>({ target: null, announce: () => {} });
+
+export const SaveTargetProvider = ({ children }: { children: ReactNode }) => {
+  const [target, setTarget] = useState<SaveTarget | null>(null);
+  // Stable, so the effect in `useSaveTarget` is not re-run by this provider re-rendering.
+  const announce = useCallback((next: SaveTarget | null) => setTarget(next), []);
+  return <SaveTargetContext.Provider value={{ target, announce }}>{children}</SaveTargetContext.Provider>;
+};
+
+/** Read by the bar. Null when the open section has nothing to save. */
+export const useSaveButton = (): SaveTarget | null => useContext(SaveTargetContext).target;
+
+/**
+ * Called by a section to offer its Save.
+ *
+ * `save` is held in a ref and the effect depends only on the two booleans, so a handler rebuilt on
+ * every render — which it is, being an ordinary function in a component — does not re-announce on
+ * every render. Announcing in a loop would be a state update per render, which React stops by
+ * throwing rather than by being slow.
+ *
+ * The cleanup clears it, so a section that unmounts leaves no button behind pointing at a component
+ * that is gone.
+ */
+export const useSaveTarget = (dirty: boolean, busy: boolean, save: () => void | Promise<void>): void => {
+  const { announce } = useContext(SaveTargetContext);
+  const saveRef = useRef(save);
+  saveRef.current = save;
+
+  useEffect(() => {
+    announce({ dirty, busy, save: () => saveRef.current() });
+    return () => announce(null);
+  }, [dirty, busy, announce]);
+};

web/sections/AboutPanel.tsx

@@ -7,6 +7,7 @@ import { readableError } from '../errors';
 import { useFlash } from '../useFlash';
 import { RichText } from '../RichText';
 import { MediaPicker } from '../MediaPicker';
+import { useSaveTarget } from '../SaveTarget';
 
 /**
  * About Us — four bands, in the order the page shows them.
@@ -20,11 +21,16 @@ import { MediaPicker } from '../MediaPicker';
  * Like every section here. An edit lands on the development server immediately and becomes public when
  * somebody presses Publish; production is a directory of static files with no API to write to.
  *
- * ── One save per band ──
+ * ── One Save, in the panel's bar ──
  *
- * The same rule Home follows, for the same reason. `take()` on the server treats an absent key as
- * "leave it alone", so a single Save carrying every field would let a half-finished manifesto ride
- * along with a photograph somebody meant to change. Four bands, four independent saves.
+ * There were four, one per band, because the API treats an absent key as "leave it alone" and a Save
+ * carrying everything meant a half-written manifesto shipping with a photograph somebody meant to
+ * change. With a single Save that is the model rather than an accident: one press writes the page you
+ * are looking at.
+ *
+ * `dirty` is a comparison against what the server last returned, not a flag set by every keystroke. 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 the button is actually answering.
  *
  * ── The server owns the shape ──
  *
@@ -84,11 +90,35 @@ export const AboutPanel = () => {
     void load();
   }, [load]);
 
-  const send = async (label: string, body: Record<string, string | null>) => {
-    setBusy(label);
+  /** Empty is null, not "". A field somebody cleared and one never filled are the same thing. */
+  const orNull = (value: string) => value.trim() || null;
+
+  /** Every field this page owns, as the API spells them. One place, so save and dirty cannot disagree. */
+  const edited = {
+    header_url: orNull(headerUrl),
+    header_phrase: orNull(phrase),
+    about_text: orNull(aboutText),
+    product_video_url: orNull(productVideo),
+    product_text: orNull(productText),
+    manifesto_text: orNull(manifesto),
+  };
+
+  const stored = about && {
+    header_url: about.header.url,
+    header_phrase: about.header.phrase,
+    about_text: about.about_text,
+    product_video_url: about.product_video_url,
+    product_text: about.product_text,
+    manifesto_text: about.manifesto_text,
+  };
+
+  const dirty = Boolean(stored) && JSON.stringify(edited) !== JSON.stringify(stored);
+
+  const save = async () => {
+    setBusy('save');
     setError(null);
     try {
-      apply((await clientRef.current.patch<{ data: About }>('/fofos-admin/about', body)).data);
+      apply((await clientRef.current.patch<{ data: About }>('/fofos-admin/about', edited)).data);
       flashSaved();
     } catch (failure) {
       setError(readableError(failure));
@@ -97,8 +127,7 @@ export const AboutPanel = () => {
     }
   };
 
-  /** Empty is null, not "". A field somebody cleared and one never filled are the same thing. */
-  const orNull = (value: string) => value.trim() || null;
+  useSaveTarget(dirty, busy !== null, save);
 
   if (!about) {
     return (
@@ -106,22 +135,17 @@ export const AboutPanel = () => {
     );
   }
 
-  const saveButton = (label: string, onClick: () => void) => (
-    <div className="flex items-center gap-2">
-      <Button size="sm" onClick={onClick} disabled={busy !== null}>
-        {busy === label ? <Loader2 className="size-3.5 animate-spin" /> : null}
-        Save
-      </Button>
-      {saved && busy === null && <span className="text-xs text-success">Saved</span>}
-    </div>
-  );
-
   return (
     <div className="flex size-full flex-col gap-4 overflow-auto p-4">
-      <p className="text-xs text-muted-foreground">
+      <div className="flex items-center gap-2">
+        <p className="flex-1 text-xs text-muted-foreground">
           The About page, in the order it is shown: a header, the text about you, the product, and the
           manifesto.
         </p>
+        {/* Confirmation lives with the content rather than in the bar, because the bar's own button
+            has already gone back to saying "Save" by the time anybody looks up. */}
+        {saved && <span className="text-xs text-success">Saved</span>}
+      </div>
 
       {/* ── HEADER: a photograph and a phrase over it ─────────────────────────────────────────── */}
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
@@ -149,10 +173,6 @@ export const AboutPanel = () => {
           <label className="text-xs text-muted-foreground">Phrase</label>
           <Input value={phrase} onChange={(event) => setPhrase(event.currentTarget.value)} />
         </div>
-
-        {saveButton('header', () =>
-          void send('header', { header_url: orNull(headerUrl), header_phrase: orNull(phrase) }),
-        )}
       </section>
 
       {/* ── ABOUT US ─────────────────────────────────────────────────────────────────────────── */}
@@ -162,7 +182,6 @@ export const AboutPanel = () => {
           <p className="text-xs text-muted-foreground">Who you are.</p>
         </div>
         <RichText value={aboutText} onChange={setAboutText} placeholder="Tell people who you are." />
-        {saveButton('about', () => void send('about', { about_text: orNull(aboutText) }))}
       </section>
 
       {/* ── PRODUTO: a video beside its text ─────────────────────────────────────────────────── */}
@@ -186,9 +205,6 @@ export const AboutPanel = () => {
         </div>
 
         <RichText value={productText} onChange={setProductText} placeholder="What the product is." />
-        {saveButton('product', () =>
-          void send('product', { product_video_url: orNull(productVideo), product_text: orNull(productText) }),
-        )}
       </section>
 
       {/* ── MANIFESTO ────────────────────────────────────────────────────────────────────────── */}
@@ -198,7 +214,6 @@ export const AboutPanel = () => {
           <p className="text-xs text-muted-foreground">What you stand for.</p>
         </div>
         <RichText value={manifesto} onChange={setManifesto} placeholder="The manifesto." />
-        {saveButton('manifesto', () => void send('manifesto', { manifesto_text: orNull(manifesto) }))}
       </section>
 
       {error && <p className="text-xs text-destructive">{error}</p>}

web/sections/HomePanel.tsx

@@ -7,6 +7,7 @@ import { readableError } from '../errors';
 import { useFlash } from '../useFlash';
 import { RichText } from '../RichText';
 import { MediaPicker } from '../MediaPicker';
+import { useSaveTarget } from '../SaveTarget';
 
 /**
  * The Home page: a hero, an intro, and an ordered gallery.
@@ -115,11 +116,21 @@ export const HomePanel = () => {
     either card would have each one saving the other's unsaved edits. Two cards, two independent
     saves, and a half-finished intro cannot ride along with a hero somebody meant to change.
   */
-  const saveIntro = () =>
-    send('intro', () => clientRef.current.patch<{ data: Home }>('/fofos-admin/home', { intro_text: intro.trim() || null }));
+  /*
+    One Save for everything this page holds in a field.
+
+    The gallery choice is NOT part of it: picking a gallery from the list writes immediately, because a
+    <select> that needs a second press to mean anything is a control people believe they have already
+    used. The two fields below are typed, and typing is what Save is for.
+  */
+  const edited = { intro_text: intro.trim() || null, hero_url: heroUrl.trim() || null };
+  const stored = home && { intro_text: home.intro_text, hero_url: home.hero.url };
+  const dirty = Boolean(stored) && JSON.stringify(edited) !== JSON.stringify(stored);
+
+  const save = () => send('save', () => clientRef.current.patch<{ data: Home }>('/fofos-admin/home', edited));
+
+  useSaveTarget(dirty, busy !== null, save);
 
-  const saveHero = () =>
-    send('hero', () => clientRef.current.patch<{ data: Home }>('/fofos-admin/home', { hero_url: heroUrl.trim() || null }));
 
 
   if (!home) {
@@ -130,8 +141,6 @@ export const HomePanel = () => {
     );
   }
 
-  const introDirty = intro.trim() !== (home.intro_text ?? '');
-  const heroDirty = heroUrl.trim() !== (home.hero.url ?? '');
 
   return (
     <div className="flex size-full flex-col gap-4 overflow-auto p-5">
@@ -159,12 +168,6 @@ export const HomePanel = () => {
         {/* HTML in and HTML out — it is what the site's database already holds and renders. */}
         <RichText value={intro} onChange={setIntro} placeholder="The paragraph under the hero." />
 
-        <div className="flex justify-end border-t border-border pt-3">
-          <Button size="sm" onClick={() => void saveIntro()} disabled={busy !== null || !introDirty}>
-            {busy === 'intro' ? <Loader2 className="size-3.5 animate-spin" /> : <Check className="size-3.5" />}
-            Save
-          </Button>
-        </div>
       </section>
 
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
@@ -207,12 +210,6 @@ export const HomePanel = () => {
 
         {error && <p className="text-xs text-destructive">{error}</p>}
 
-        <div className="flex justify-end border-t border-border pt-3">
-          <Button size="sm" onClick={() => void saveHero()} disabled={busy !== null || !heroDirty}>
-            {busy === 'hero' ? <Loader2 className="size-3.5 animate-spin" /> : <Check className="size-3.5" />}
-            Save
-          </Button>
-        </div>
       </section>
 
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">

web/sections/RecordsPanel.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import { readableError } from '../errors';
 import { useFlash } from '../useFlash';
 import { MediaPicker } from '../MediaPicker';
+import { useSaveTarget } from '../SaveTarget';
 import type { RecordsConfig } from './records';
 
 /**
@@ -208,6 +209,21 @@ export const RecordsPanel = ({ config }: { config: RecordsConfig }) => {
 
   const field = (key: string, value: string) => setDraft((current) => ({ ...current, [key]: value }));
 
+  /*
+    Dirty is the open record's form against what the server last returned for it.
+
+    Only the fields this section declares, so a column the API carries and this panel does not show
+    cannot make a record look edited forever. With no record open there is nothing to save and the bar
+    renders no button at all.
+  */
+  const dirty = Boolean(
+    open &&
+      (asText(draft.title) !== asText(open.title) ||
+        config.fields.some((f) => asText(draft[f.key]) !== asText(open[f.key]))),
+  );
+
+  useSaveTarget(dirty, busy !== null, save);
+
   return (
     <div className="flex size-full flex-col gap-4 overflow-auto p-4">
       <p className="text-xs text-muted-foreground">{config.blurb}</p>
@@ -295,13 +311,9 @@ export const RecordsPanel = ({ config }: { config: RecordsConfig }) => {
             </div>
           ))}
 
-          <div className="flex items-center gap-2">
-            <Button size="sm" onClick={() => void save()} disabled={busy !== null}>
-              {busy === 'save' ? <Loader2 className="size-3.5 animate-spin" /> : null}
-              Save
-            </Button>
-            {saved && <span className="text-xs text-success">Saved</span>}
-          </div>
+          {/* Confirmation only. The Save itself is in the panel's bar, where it stays reachable on a
+              record with six fields. */}
+          {saved && <p className="text-xs text-success">Saved</p>}
 
           {/* The photographs, in the order the page shows them. */}
           <div className="flex flex-col gap-2 border-t border-border pt-3">