Tribu 1.1: Design Overhaul

Complete UI redesign across all views. Stripped AI-generated glassmorphism, extracted ~600 inline styles to CSS, added shared components, and improved accessibility throughout.

---

Highlights

Design System

• Solid card backgrounds — Replaced glassmorphism (backdrop-filter blur) with solid --void-surface backgrounds across all views: dashboard, calendar, rewards, notifications, shopping, tasks, contacts, settings, admin
• ~600 inline styles extracted — Every view now uses proper CSS classes instead of inline style objects
• Consistent spacing — row-gap/column-gap differentiation, spacing scale enforced throughout
• Light theme support — All new classes have proper [data-theme="light"] overrides

Shared Components

• ConfirmDialog — Reusable confirmation dialog with focus trap, Escape handling, backdrop click, loading state to prevent double-submit. Replaces all browser confirm() calls
• FormModal — Shared modal for contacts and birthdays with focus trap and a11y
• CurrencyIcon — Lucide-based currency icons replacing emoji strings (full stack: frontend, backend schema, DB migration)
• DayDetailPanel — Deduplicated mobile/desktop calendar day detail into single component
• DeleteButton — Shared inline delete confirmation pattern

Dashboard (#118, #120)

• Content-first layout — Welcome hero card removed, greeting moved to header
• Events promoted — Events card is now the top row (what a parent checks at 7am)
• Actionable empty states — CTAs that guide new users (gated for child accounts)
• Proximity-based birthday colors — Red (<=3d), amber (<=7d), muted (>7d)
• Birthday emoji replaced — Lucide Cake icon with colored backgrounds

Rewards (#119)

• Visual section differentiation — Colored left borders: green (earn), amethyst (spend), warning (pending), blue (task)
• Proper tab pattern — Segmented control matching calendar, not btn-ghost hack
• Child progress bar — Shows progress toward next affordable reward
• Empty states — For rules and catalog lists
• Lucide currency icons — Full stack migration from emoji to icon names with DB migration (0019)
• API validation — Currency icon restricted to known Lucide names via Pydantic regex

Calendar (#121)

• Floating Action Button — Visible ”+” for event creation at all times
• DayDetailPanel — Mobile now has feature parity with desktop (recurrence end-date, end-time)
• Weekday grid fix — Removed ghost 40px column from CSS
• Color swatches — 32px for proper touch targets
• Onboarding CTA — Promoted calendar import for zero-event users

Notifications (#122)

• Slide-in panel — Bell icon triggers right-side panel (380px desktop, bottom-sheet mobile) instead of full-page navigation
• Time grouping — Heute/Gestern/Alter sections
• Focus management — Focus trap, Escape, focus restoration to bell button
• Keyboard accessible — Notification rows focusable and activatable

Shopping (#123)

• Check animation — Scale bounce on item completion
• List progress bars — Visual checked/total indicator on each list card
• ConfirmDialog — For list deletion and clearing checked items

Tasks (#124)

• Collapsible create form — Title-only by default, “More options” reveals fields
• ConfirmDialog — For task deletion with task title in message

Contacts (#125)

• Shared FormModal — 506 lines reduced to 208 (-59%)
• Normalized tabs — Segmented control matching all other views

Settings (#126)

• 125 inline styles extracted — Across all 6 settings tabs
• Scoped settings-section — :not(.glass) prevents override when combined with glass elsewhere

Admin (#127)

• 77 inline styles extracted — Across all 4 admin files
• ConfirmDialog loading state — Buttons disabled during async action, prevents double-submit
• Time toggle normalized — Segmented control pattern

Accessibility

• 44px touch targets — Enforced on all interactive elements across all views
• Focus traps — On ConfirmDialog, FormModal, notification panel
• Focus restoration — All dialogs/panels return focus to trigger element
• aria-expanded — On collapsible form toggle
• aria-describedby — On ConfirmDialog message text
• sr-only labels — On CurrencyIcon for screen reader currency context
• Keyboard navigation — Notification rows, Enter/Space activation

Testing

• Unit tests — 71/71 passing, updated for new class names and ConfirmDialog
• E2E tests — 44/44 passing, updated for new dialog patterns
• Jest config — e2e/ excluded from Jest runs (pre-existing fix)