feat/notifications · real component

Connection-health banner

The bar above renders the selected state in context, at the top of the work area (under the topbar, above content). Built from daisyUI alert + our Button and Lucide icons. Collapsing a Broken bar (chevron) tucks it into a pill in the topbar next to the bell; warning and success states dismiss.

All states

Every state at full width, with the event that raises it.

Broken · source Airtable token revoked or expired → backups paused
Broken · destination Google Drive access revoked → backups can’t be written
Multiple broken 2+ connections down → grouped roll-up, not stacked banners
Expiring soon token TTL known → warn before it dies (conditional on API, research §8.2)
Degraded no successful backup in 24h, not yet a hard auth failure
Reconnecting user clicked Reconnect → OAuth done, verifying access
Restored verify passed → confirm + re-queue the missed backup
Healthy everything live → no banner is rendered
No banner. The shell stays clean; health shows only on the Sources / Destinations badges.

Behaviour & decisions

  • Placement: top of the work area (under the topbar), via an optional app-banner slot in SidebarLayout — not above the sidebar.
  • Severity by colour: error (broken), warning (expiring / degraded), info (reconnecting), success (restored). Soft daisyUI tints.
  • Collapse-not-dismiss for broken: the chevron tucks the bar into a pill in the topbar next to the bell (try it ↑); warning / success states dismiss with an ×.
  • Provider is named in text for now; real Airtable / Drive brand logos are a follow-up.
  • “Expires in N days” ships only if the Airtable / Drive token APIs expose a TTL (research §8.2, unverified).