From a3516160c0c54ec3c948150185cd4bbd22a4fe64 Mon Sep 17 00:00:00 2001
From: Florian Maetschke <florian@maetschke.com>
Date: Tue, 3 Nov 2026 11:49:41 +0100
Subject: [PATCH] Share the taken/skipped chip between the two history layouts

The desktop table and the mobile cards carried the same status badge
twice. Pulling it into one component makes room for the injection-site
chip without growing the list function past its size baseline, and
the baseline tightens to the new, lower count.
---
 .../baselines/source-function-lines.json      |  4 +-
 .../medications/intake-history-list-v2.tsx    | 86 +++++++++----------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/__tests__/baselines/source-function-lines.json b/src/__tests__/baselines/source-function-lines.json
index e4bb6649d..537c6b9a6 100644
--- a/src/__tests__/baselines/source-function-lines.json
+++ b/src/__tests__/baselines/source-function-lines.json
@@ -1,7 +1,7 @@
 {
   "$comment": "Production functions over 200 lines, keyed \"file :: name\", and their length. Maintained by src/__tests__/source-size-ratchet.test.ts.",
   "count": 345,
-  "total": 111918,
+  "total": 111894,
   "entries": {
     "app/achievements/page.tsx :: AchievementsPage": 206,
     "app/api/admin/backups/upload/route.ts :: apiHandler(arg)": 275,
@@ -156,7 +156,7 @@
     "components/medications/glp1-medication-card.tsx :: Glp1MedicationCard": 405,
     "components/medications/injection-site-picker.tsx :: InjectionSitePicker": 287,
     "components/medications/intake-history-editable.tsx :: IntakeHistoryEditable": 224,
-    "components/medications/intake-history-list-v2.tsx :: IntakeHistoryListV2": 427,
+    "components/medications/intake-history-list-v2.tsx :: IntakeHistoryListV2": 403,
     "components/medications/intake-import-dialog.tsx :: IntakeImportDialog": 208,
     "components/medications/log-intake-dialog.tsx :: LogIntakeDialog": 267,
     "components/medications/medication-card.tsx :: MedicationCard": 413,
diff --git a/src/components/medications/intake-history-list-v2.tsx b/src/components/medications/intake-history-list-v2.tsx
index e4a9150c0..c42afa8af 100644
--- a/src/components/medications/intake-history-list-v2.tsx
+++ b/src/components/medications/intake-history-list-v2.tsx
@@ -411,26 +411,10 @@ export function IntakeHistoryListV2({
                           {formatters.dateTime(event.scheduledFor)}
                         </TableCell>
                         <TableCell>
-                          {isTaken ? (
-                            <Badge
-                              variant="secondary"
-                              className="bg-success/15 text-success gap-1 text-xs"
-                            >
-                              <Check aria-hidden="true" className="h-3 w-3" />
-                              {t("medications.intakeHistoryStatusTaken")}
-                            </Badge>
-                          ) : isSkipped ? (
-                            <Badge
-                              variant="outline"
-                              className="text-muted-foreground gap-1 text-xs"
-                            >
-                              <SkipForward
-                                aria-hidden="true"
-                                className="h-3 w-3"
-                              />
-                              {t("medications.intakeHistoryStatusSkipped")}
-                            </Badge>
-                          ) : null}
+                          <IntakeStatusBadge
+                            taken={isTaken}
+                            skipped={isSkipped}
+                          />
                           {event.injectionSite ? (
                             <InjectionSiteBadge
                               site={event.injectionSite}
@@ -523,29 +507,10 @@ export function IntakeHistoryListV2({
                               {formatters.dateTime(event.scheduledFor)}
                             </p>
                             <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
-                              {isTaken ? (
-                                <Badge
-                                  variant="secondary"
-                                  className="bg-success/15 text-success gap-1 text-xs"
-                                >
-                                  <Check
-                                    aria-hidden="true"
-                                    className="h-3 w-3"
-                                  />
-                                  {t("medications.intakeHistoryStatusTaken")}
-                                </Badge>
-                              ) : isSkipped ? (
-                                <Badge
-                                  variant="outline"
-                                  className="text-muted-foreground gap-1 text-xs"
-                                >
-                                  <SkipForward
-                                    aria-hidden="true"
-                                    className="h-3 w-3"
-                                  />
-                                  {t("medications.intakeHistoryStatusSkipped")}
-                                </Badge>
-                              ) : null}
+                              <IntakeStatusBadge
+                                taken={isTaken}
+                                skipped={isSkipped}
+                              />
                               {event.injectionSite ? (
                                 <InjectionSiteBadge
                                   site={event.injectionSite}
@@ -738,3 +703,38 @@ function InjectionSiteBadge({
     </Badge>
   );
 }
+
+/**
+ * Taken / skipped chip shared by the desktop table and the mobile cards.
+ * Renders nothing for a row that is neither (the `status:"completed"`
+ * query keeps those out, but the shape stays defensive).
+ */
+function IntakeStatusBadge({
+  taken,
+  skipped,
+}: {
+  taken: boolean;
+  skipped: boolean;
+}) {
+  const { t } = useTranslations();
+  if (taken) {
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-success/15 text-success gap-1 text-xs"
+      >
+        <Check aria-hidden="true" className="h-3 w-3" />
+        {t("medications.intakeHistoryStatusTaken")}
+      </Badge>
+    );
+  }
+  if (skipped) {
+    return (
+      <Badge variant="outline" className="text-muted-foreground gap-1 text-xs">
+        <SkipForward aria-hidden="true" className="h-3 w-3" />
+        {t("medications.intakeHistoryStatusSkipped")}
+      </Badge>
+    );
+  }
+  return null;
+}