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