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/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">