polish: tighten Policy Editor interaction states, copy, and a11y (#936)

[T-kesh]

Summary

Polish-pass on the existing Policy Editor surface. Closes #936.
No new tools, modules, or dependencies introduced — all changes stay within
the three paths scoped by the issue.

Files changed

• src/routes/policy-editor/route.tsx
• src/features/settings/mailbox-policy-templates.ts
• src/components/mail/SettingsModal.tsx

---

What changed

route.tsx — Policy Editor page

• Toggles — Added role="switch", aria-checked, aria-label, aria-disabled. Contextual
  helper text changes when a control is gated (e.g. "Enable unknown senders first to configure
  verification.") instead of only going grey. active:scale-95 and an emerald focus ring added.
• Loading state — Save button renders a Loader2 spinner alongside "Saving…" while the request
  is in-flight. disabled prevents double-submit.
• Postage slider — Range tick labels (0 / 0.5 / 1 XLM) added below the track.
  focus-visible:ring-2 focus-visible:ring-emerald-400 applied. Live value uses tabular-nums.
• Error state — Replaced bare ShieldAlert icon with AlertCircle + a "Save failed" heading
  and body. Added role="alert" + aria-live="polite" so screen readers announce failures.
• Live Simulator — Rows colour-coded (emerald for allowed, rose for blocked). Added
  role="list" / role="listitem" and icon aria-labels.

mailbox-policy-templates.ts — Template copy

Rewrote all five tradeoff and senderExperience strings to be sharper and consistent with the
Stealth Mail safety/sender-control positioning:

Template	Key change
Allowlist only	"No review queue or postage path — only people you have approved."
Investor inbox	"Cryptographic identity + meaningful deposit before your time."
Private	"Explicitly approve" flow; review-queue framing throughout.
Recruiting	Distinguishes motivated candidates from low-effort senders.
Custom draft	"Review before applying" safety note added.

SettingsModal.tsx — Inbox control tab

• SettingsToggle — Active state now uses bg-emerald-500 (was bg-white/20). Off state uses
  bg-white/15. Thumb transitions via transition-[left]. Focus ring offset set to
  ring-offset-background. aria-labelledby / aria-describedby wired to existing label elements.
• PostageInput (extracted from inline <label>) — Stateful focus ring: emerald when focused,
  rose when invalid. aria-invalid, aria-describedby pointing to a hint line below the field
  that changes to a validation message on bad input.
• Policy selector buttons — Active option shows an "Active" emerald pill badge. Added
  hover:border-white/15 and active:scale-[0.99]. Focus ring standardised.
• Overwrite warning banner — Added AlertTriangle icon. Heading updated to "Applying will
  overwrite your current draft" with clearer body copy.
• Apply button — Disabled and shows "Already applied" when previewMatchesCurrent is true.
  aria-label reflects each state.
• Custom template card — "Local" badge renamed "Unsaved". Empty-state hint reads "Adjust the
  policy fields below, then click Save as custom to store this draft."
• Footer copy — "Manual edits apply to the draft immediately. Template changes preview before
  you apply. Save or cancel to keep or discard."
• Cancel / Save changes buttons — focus-visible:ring-2 focus-visible:ring-emerald-400 outline-none added.

---

Behaviour preserved

• All existing toggle, template-selection, apply, save-as-custom, and postage-edit flows unchanged.
• No new routes, shared modules, or third-party dependencies added.
• E2E selectors (getByRole("button", { name: "Verified only" }), decimal input, Save changes
  button) continue to resolve without modification.

---

Validation

Check	Result
npm run test (54 files, 598 tests)	✅ All pass
npm run lint	✅ Clean (pre-existing warnings in tools/v2/ are out of scope)
npx prettier --write	✅ Applied to both changed files
Manual review — all interaction states	✅ default · hover · focus · active · disabled · loading · empty · error

[T-kesh]

@kryputh I apologize for the late pr. Trust you're doing much better now?