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/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">
-        The About page, in the order it is shown: a header, the text about you, the product, and the
-        manifesto.
-      </p>
+      <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">