refactor(medications): share intake handling across cards and unify status tokens

Lift the take / skip intake flow — the optimistic spinner, the
failure toast, the soft-delete Undo, and the dependent-key
invalidation — into a shared `useMedicationIntake` hook consumed by
both the generic medication card and the GLP-1 card. The GLP-1 card
previously inlined its own copy that never gained the failure toast
or the Undo affordance, so a failed POST was swallowed silently and a
misclicked dose had no quick reversal. Both cards now behave
identically by construction; each keeps only its post-success
injection-site prompt.

Converge the medication status-colour surface onto the semantic
feedback vocabulary. The status pill reads as a success → warning →
destructive urgency ramp (dropping the lone `text-dracula-yellow`
middle tier), the streak flame moves off the raw `text-dracula-orange`
palette token onto `text-warning`, the detail status dot swaps its raw
`hsl(var(--…))` form for `bg-success` / `bg-warning`, and the import
result line drops `text-dracula-green` for `text-success`. Each
semantic token aliases the same colour the raw form resolved to, so
the hue is unchanged in dark mode and lands AA-safe on the light card.

Route the compliance percentages through the locale number formatter
with rounding so a non-integer rate never leaks raw, and give the
medications Add button the same `min-h-11 sm:min-h-9` tap-target floor
the dashboard Add button carries.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
(cherry picked from commit a4415d706154b063a8783390e35eded5dbc57910)
This commit is contained in:
Marc-André Bombeck committed 2026-06-05 08:10:12 +02:00
1 parent 496147687d
commit a199fac20e
10 files changed
+470 -138

No files matched your search

+4 -1
View File
@@ -256,7 +256,10 @@ export default function MedicationsPage() {
{t("medications.subtitle")}
</p>
</div>
<Button onClick={openCreate}>
{/* v1.12.2 — match the dashboard Add button's responsive tap-target
floor (`min-h-11 sm:min-h-9`) so both primary "add" entry points
clear the WCAG 2.5.5 44px mobile minimum identically. */}
<Button className="min-h-11 sm:min-h-9" onClick={openCreate}>
<Plus className="mr-2 h-4 w-4" />
{t("medications.addMedication")}
</Button>