From 8f3a95463dbac8d1ac1414ef522649bb8d147d13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 16:57:56 +0200
Subject: [PATCH] fix(design): Dracula tokens + Romance BP abbreviations +
 therapy-timeline polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GLP-1 medication card streak flame: `text-orange-400` →
  `text-dracula-orange`. The hardcoded Tailwind shade was skewing
  warm against the rest of the card.
- /insights/medikamente compliance counters: `text-green-500` /
  `text-orange-500` / `text-red-500` → `text-dracula-green` /
  `-orange` / `-red`. Same drift in three sibling spans on one
  surface; replace as a set.
- Side-effect affordance: `Smile` icon read as a positive
  affordance for a *negative* logging surface. Switch to
  `Stethoscope` so the icon matches the clinical context.
- Health Score componentBp: FR `BP` → `TA`, IT `BP` → `PA`,
  ES `BP` → `PA`, PL `BP` → `RR` — the native compact forms
  used in clinical practice. DE "Blutdruck" + EN "BP" unchanged.
- Therapy-timeline `<li>` key: array index → composite
  (`kind-date-medicationName`). Prevents DOM-reuse bugs when a
  dose change is logged mid-window and reorders the list.
- Therapy-timeline inline icons: `aria-hidden="true"` on the
  `<Pill>` injection glyph and the dose-arrow `<ArrowUp>` /
  `<ArrowDown>` so screen readers stop announcing "image"
  mid-sentence.
- Medication-form Dialog tap targets: the schedule-row dropdown
  trigger (`h-7 w-7`) and the New-schedule button + the four
  schedule inputs (`h-8`) promoted to `h-11` so the dense
  schedule grid honours the 44px floor. The labels stay compact;
  the controls grow.
---
 messages/es.json                                 |  2 +-
 messages/fr.json                                 |  2 +-
 messages/it.json                                 |  2 +-
 messages/pl.json                                 |  2 +-
 src/app/insights/medikamente/page.tsx            |  8 +++++---
 src/components/insights/therapy-timeline.tsx     | 16 +++++++++++-----
 .../medications/glp1-medication-card.tsx         |  6 +++---
 src/components/medications/medication-form.tsx   | 12 ++++++------
 8 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/messages/es.json b/messages/es.json
index 84b1a3401..f762ac8a5 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -874,7 +874,7 @@
       "progressAria": "Health Score progress",
       "deltaVsLastWeek": "{delta} vs last week",
       "deltaUnavailable": "No history yet — check back next week.",
-      "componentBp": "BP",
+      "componentBp": "PA",
       "componentWeight": "Peso",
       "componentMood": "Estado de ánimo",
       "componentCompliance": "Meds",
diff --git a/messages/fr.json b/messages/fr.json
index 391fb2282..0dd6c6d92 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -874,7 +874,7 @@
       "progressAria": "Health Score progress",
       "deltaVsLastWeek": "{delta} vs last week",
       "deltaUnavailable": "No history yet — check back next week.",
-      "componentBp": "BP",
+      "componentBp": "TA",
       "componentWeight": "Poids",
       "componentMood": "Humeur",
       "componentCompliance": "Meds",
diff --git a/messages/it.json b/messages/it.json
index e1b616912..dea12620b 100644
--- a/messages/it.json
+++ b/messages/it.json
@@ -874,7 +874,7 @@
       "progressAria": "Health Score progress",
       "deltaVsLastWeek": "{delta} vs last week",
       "deltaUnavailable": "No history yet — check back next week.",
-      "componentBp": "BP",
+      "componentBp": "PA",
       "componentWeight": "Peso",
       "componentMood": "Umore",
       "componentCompliance": "Meds",
diff --git a/messages/pl.json b/messages/pl.json
index 569f95b3b..94682d681 100644
--- a/messages/pl.json
+++ b/messages/pl.json
@@ -874,7 +874,7 @@
       "progressAria": "Health Score progress",
       "deltaVsLastWeek": "{delta} vs last week",
       "deltaUnavailable": "No history yet — check back next week.",
-      "componentBp": "BP",
+      "componentBp": "RR",
       "componentWeight": "Waga",
       "componentMood": "Nastrój",
       "componentCompliance": "Meds",
diff --git a/src/app/insights/medikamente/page.tsx b/src/app/insights/medikamente/page.tsx
index d77a1d309..1f92e064d 100644
--- a/src/app/insights/medikamente/page.tsx
+++ b/src/app/insights/medikamente/page.tsx
@@ -182,15 +182,17 @@ export default function InsightsMedikamentePage() {
                 </div>
                 <div className="text-muted-foreground flex justify-between text-xs">
                   <span>
-                    <span className="text-green-500">{med.taken7}</span>{" "}
+                    <span className="text-dracula-green">{med.taken7}</span>{" "}
                     {t("insights.taken")}
                   </span>
                   <span>
-                    <span className="text-orange-500">{med.skipped7}</span>{" "}
+                    <span className="text-dracula-orange">
+                      {med.skipped7}
+                    </span>{" "}
                     {t("insights.skipped")}
                   </span>
                   <span>
-                    <span className="text-red-500">{med.missed7}</span>{" "}
+                    <span className="text-dracula-red">{med.missed7}</span>{" "}
                     {t("insights.missed")}
                   </span>
                 </div>
diff --git a/src/components/insights/therapy-timeline.tsx b/src/components/insights/therapy-timeline.tsx
index af1c28271..d8ce593aa 100644
--- a/src/components/insights/therapy-timeline.tsx
+++ b/src/components/insights/therapy-timeline.tsx
@@ -97,8 +97,11 @@ export function TherapyTimeline({ limit }: TherapyTimelineProps) {
       </CardHeader>
       <CardContent>
         <ol className="border-border/60 relative space-y-3 border-l pl-4">
-          {data.entries.map((entry, idx) => (
-            <li key={idx} className="relative">
+          {data.entries.map((entry) => (
+            <li
+              key={`${entry.kind}-${entry.date}-${entry.medicationName ?? ""}`}
+              className="relative"
+            >
               <span
                 className="border-background absolute top-1 -left-[18px] h-3 w-3 rounded-full border-2"
                 aria-hidden="true"
@@ -147,9 +150,9 @@ function renderEntryLine(
     case "dose-change": {
       const arrow =
         entry.doseDelta === "up" ? (
-          <ArrowUp className="inline h-3 w-3" />
+          <ArrowUp className="inline h-3 w-3" aria-hidden="true" />
         ) : entry.doseDelta === "down" ? (
-          <ArrowDown className="inline h-3 w-3" />
+          <ArrowDown className="inline h-3 w-3" aria-hidden="true" />
         ) : null;
       return (
         <span>
@@ -167,7 +170,10 @@ function renderEntryLine(
         : "";
       return (
         <span>
-          <Pill className="text-dracula-cyan mr-1 inline h-3 w-3" />
+          <Pill
+            className="text-dracula-cyan mr-1 inline h-3 w-3"
+            aria-hidden="true"
+          />
           <strong>{drug}</strong>
           {site}
         </span>
diff --git a/src/components/medications/glp1-medication-card.tsx b/src/components/medications/glp1-medication-card.tsx
index 5a1214624..d2be7693a 100644
--- a/src/components/medications/glp1-medication-card.tsx
+++ b/src/components/medications/glp1-medication-card.tsx
@@ -11,7 +11,7 @@ import {
   Loader2,
   Pencil,
   SkipForward,
-  Smile,
+  Stethoscope,
   Syringe,
 } from "lucide-react";
 
@@ -426,7 +426,7 @@ export function Glp1MedicationCard({
             </div>
             {streak > 0 && (
               <div className="flex items-center gap-4 text-xs">
-                <span className="flex items-center gap-1 font-medium text-orange-400">
+                <span className="text-dracula-orange flex items-center gap-1 font-medium">
                   <Flame className="h-3.5 w-3.5" />
                   {streak} {t("medications.dayStreak")}
                 </span>
@@ -471,7 +471,7 @@ export function Glp1MedicationCard({
                 className="min-h-11"
                 onClick={() => onLogSideEffect(medication)}
               >
-                <Smile className="mr-1 h-4 w-4" />
+                <Stethoscope className="mr-1 h-4 w-4" />
                 {t("medications.glp1LogSideEffect")}
               </Button>
             )}
diff --git a/src/components/medications/medication-form.tsx b/src/components/medications/medication-form.tsx
index 80475aa92..a94d98269 100644
--- a/src/components/medications/medication-form.tsx
+++ b/src/components/medications/medication-form.tsx
@@ -712,7 +712,7 @@ export function MedicationForm({
             type="button"
             variant="ghost"
             size="sm"
-            className="h-8"
+            className="min-h-11"
             onClick={addSchedule}
           >
             <Plus className="mr-1 h-3.5 w-3.5" />
@@ -741,7 +741,7 @@ export function MedicationForm({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    className="h-7 w-7"
+                    className="h-11 w-11"
                     aria-label={t("common.moreOptions")}
                   >
                     <MoreVertical className="h-4 w-4" />
@@ -778,7 +778,7 @@ export function MedicationForm({
                   pattern="[0-2][0-9]:[0-5][0-9]"
                   placeholder="08:00"
                   value={s.windowStart}
-                  className="h-8 text-xs md:text-xs"
+                  className="h-11 text-xs md:text-xs"
                   onChange={(e) =>
                     updateSchedule(i, "windowStart", e.target.value)
                   }
@@ -796,7 +796,7 @@ export function MedicationForm({
                   pattern="[0-2][0-9]:[0-5][0-9]"
                   placeholder="09:00"
                   value={s.windowEnd}
-                  className="h-8 text-xs md:text-xs"
+                  className="h-11 text-xs md:text-xs"
                   onChange={(e) =>
                     updateSchedule(i, "windowEnd", e.target.value)
                   }
@@ -810,7 +810,7 @@ export function MedicationForm({
                 </Label>
                 <Input
                   value={s.label}
-                  className="h-8 text-xs md:text-xs"
+                  className="h-11 text-xs md:text-xs"
                   onChange={(e) => updateSchedule(i, "label", e.target.value)}
                   placeholder={t("medications.labelPlaceholder")}
                   maxLength={50}
@@ -822,7 +822,7 @@ export function MedicationForm({
                 </Label>
                 <Input
                   value={s.dose}
-                  className="h-8 text-xs md:text-xs"
+                  className="h-11 text-xs md:text-xs"
                   onChange={(e) => updateSchedule(i, "dose", e.target.value)}
                   placeholder={dose || t("medications.defaultDose")}
                   maxLength={50}