Files
HealthLog/src/components
Marc-André Bombeck 3d95ace218 feat(ui): an always-there coach button and a tidied insights chrome
A round coach button sits fixed bottom-right on every authenticated
page, above the bottom nav and safe-area inset, with a small dot when a
nudge is unread — replacing the bubble that only existed while a nudge
was pending. The per-chart target-adjust link is gone (the page-level
control remains), the duplicated customize entry on insights sub-pages
collapses onto the tab strip, and the full-width show-all-values foot
button becomes an icon beside the target control. The tab strip's
scroll container keeps four pixels of paint room so pill borders and
focus rings stop clipping at fractional zoom, and the mood tag
breakdown bars adopt the muted opacity the other mood charts use.
2026-06-11 22:12:06 +02:00
..

src/components/

React components. The UI primitives are shadcn/ui (new-york style, zinc base) over Radix + Tailwind 4 + Lucide; everything above the primitives is feature-grouped by surface. Components are server components unless they need a hook, state, or browser API, in which case they open with "use client". Charts use Recharts 3 — replacing the chart library requires explicit approval.

Primitives and shell

  • ui/ — shadcn/ui primitives (button, dialog, sheet, table, …). Generated by the shadcn CLI; keep edits minimal and on-style.
  • layout/ — the app shell: sidebar, topbar, bottom nav.
  • providers.tsx, app-settings-provider.tsx, version-poller.tsx — top-level context providers and the self-healing stale-shell poller.
  • i18n/ — translation context + locale switcher.

Feature groups

  • insights/ — insight status, assessment cards, Coach surface, advisor cards (the largest group).
  • medications/ — medication cards, the schedule wizard, intake timeline, detail history.
  • settings/ — the section components behind each settings page.
  • measurements/, mood/, dashboard/ — entry forms, lists, dashboard tiles.
  • charts/ — Recharts wrappers.
  • monitoring/ — Umami / GlitchTip client bootstrap.
  • gamification/, targets/, comparison/, doctor-report/, clinician/, onboarding/, admin/ — the remaining per-surface groups.

Conventions

Kebab-case filenames; React component exports stay PascalCase regardless. (A handful of PascalCase-filename outliers under medications/ + onboarding/ are pre-existing drift, noted in ../../CLAUDE.md.) Every t() call needs a matching key in messages/en.json — guarded by i18n-call-site-coverage.test.ts. Data reads go through TanStack Query with keys from @/lib/query-keys and unwrap (await res.json()).data. Tests live in __tests__/.