mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
Marc-André Bombeck
59a6ee9d05
With the day panel docked beside the blood-pressure page (1280 px and up), each half of the stat card is a narrow column, and its four cells still went side by side because the step followed the window's width. Every cell came out narrower than "112 mmHg": the systolic values broke onto two lines, the two-digit diastolic ones next to them did not. The stat strip now joins a value to its unit with a no-break space, and each series is a container whose cells go four-up only when the series itself has the room: from 28rem for a half-card column, from 36rem for a full-width strip (where the 640 px window step put it, so the longest unit written, mL/(kg·min), keeps a cell it fits in). The loading shell follows the same steps. Every page with a stat strip (pulse, weight, the HealthKit, lab and custom-metric pages) shares the component. A component test pins the no-break pair and the container steps; the day-view spec measures every blood-pressure value beside the docked day at 1280 px and fails on the old markup.
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,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__/.