Component library / Save Bar·5 states Sticky header · every page

Shared affordance · sticky topbar

Save Bar

Every converged page has exactly one blue Save Changes ✓ in the sticky header — shown here as a standalone bar for clarity (in situ it lives at the right edge of .sb-topbar). Saving is per-page and explicit; the bar is the single source of truth about whether the page is dirty.

S1Clean — nothing to save Page matches what is stored
All changes saved
Spec

Actions: Save anyway is a harmless no-op — the button never disables, so it never looks broken.

S2Unsaved changes Any control edited — navigating away warns
Unsaved changes· 3 settings edited
Spec

Actions: Save, or Discard to revert every field to the stored values.

S3Saving Request in flight — resolves to S4 or S5
Saving your settings…
Spec

Actions: controls stay editable; a second click queues nothing.

S4Saved Emerald flash ~1.5s, then back to S1
Settings saved
Spec

Trigger: save succeeded — the existing .sb-save.saved micro-interaction. Actions: keep editing immediately.

S5Save failed Nonce/server/network error — edits are kept
Couldn’t save — your changes are still here· View error
Spec

Trigger: request errored (nonce expired, server error, network). Actions: Retry, or View error for support. Edits are never lost.

inferred Current settings screens surface save failures inconsistently (some silently); the kept-edits + retry contract is the standardized behavior, not extracted copy.

Contract

One save per page, always in the same place. The button never disables. Failure never loses edits. Success is acknowledged in the button itself (emerald flash) — no admin-notice banners for routine saves.