[UI/UX Design] Design a persistent offline-mode banner and cached-view badges #339

Description

When the browser goes offline the app silently fails writes. Design a global offline banner with reconnect messaging and per-view badges showing which data is cached versus live.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/components/Layout.tsx
• Use a distinct non-alarm color (status.info) and clear microcopy

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/offline-banner
• Implement changes
  • Design the offline banner with reconnect countdown and dismiss
  • Add cached-view badges on Dashboard cards and lists
  • Announce online/offline transitions to screen readers
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • Flaky reconnect, reduced motion, RTL, mobile safe-area insets
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: offline banner and cached-view badges

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours