From 876e074fd8cd3457c3c24011c83cfeb47c1e146e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 10 May 2026 13:54:18 +0200
Subject: [PATCH] fix(measurements,settings): visual disambiguation polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two related polish items:

- Mobile measurement list rendered systolic and diastolic BP
  rows with the same heart icon, so a 117 mmHg row and a
  79 mmHg row underneath looked identical until you read the
  number. Mirror the desktop "Sys" / "Dia" badges on the
  mobile cards too.
- Telegram settings card was showing two separate badges side
  by side ("Configured" green + "Enabled" outline). They
  carried no visual hierarchy and made the difference between
  the two unclear. Collapsed into a single status pill — green
  "Active" when both bits are set, neutral
  "Configured · Disabled" when the channel is paused.

Also brought a stale settings-sections SSR-smoke test in line
with the F-07 threshold-naming change.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/measurements/measurement-list.tsx    | 10 ++++++++++
 src/components/settings/__tests__/sections.test.tsx |  4 +++-
 src/components/settings/telegram-card.tsx           | 13 +++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/measurements/measurement-list.tsx b/src/components/measurements/measurement-list.tsx
index 0e59f5bde..848b266f3 100644
--- a/src/components/measurements/measurement-list.tsx
+++ b/src/components/measurements/measurement-list.tsx
@@ -475,6 +475,16 @@ export function MeasurementList({ onEdit, onAddFirst }: MeasurementListProps) {
                         </div>
                       )}
                       <div className="min-w-0">
+                        {(m.type === "BP_SYS" || m.type === "BP_DIA") && (
+                          <Badge
+                            variant="outline"
+                            className="mr-1.5 h-5 px-1 text-[10px]"
+                          >
+                            {m.type === "BP_SYS"
+                              ? t("measurements.typeBpSys")
+                              : t("measurements.typeBpDia")}
+                          </Badge>
+                        )}
                         <span className="font-semibold tabular-nums">
                           {m.value} {m.unit}
                         </span>
diff --git a/src/components/settings/__tests__/sections.test.tsx b/src/components/settings/__tests__/sections.test.tsx
index 1b870b574..7740c528b 100644
--- a/src/components/settings/__tests__/sections.test.tsx
+++ b/src/components/settings/__tests__/sections.test.tsx
@@ -202,7 +202,9 @@ describe("settings sections — SSR smoke", () => {
     //   - the editor mount-point is present
     //   - no raw i18n key leaks
     const html = render(<ThresholdsSection />);
-    expect(html).toContain("Personal targets");
+    // F-07 (v1.4.19): page title aligned with the URL slug — was
+    // "Personal targets", now "Personal thresholds".
+    expect(html).toContain("Personal thresholds");
     expect(html).toContain('data-testid="thresholds-editor"');
     expect(html).not.toContain("settings.sections.thresholds.");
   });
diff --git a/src/components/settings/telegram-card.tsx b/src/components/settings/telegram-card.tsx
index 1f7eb5bbd..78eeef80c 100644
--- a/src/components/settings/telegram-card.tsx
+++ b/src/components/settings/telegram-card.tsx
@@ -112,14 +112,19 @@ export function TelegramCard({
           <h2 className="text-lg font-semibold">{t("settings.telegram")}</h2>
         </div>
         <div className="flex flex-wrap items-center gap-2">
-          {settings?.hasBotToken && settings?.chatId && (
+          {/* F-16 (v1.4.19): show one unified status pill instead of
+              the previous "Configured" + "Enabled" pair, which had no
+              visual hierarchy and made it unclear how the two states
+              differed. The new pill collapses both bits of info:
+              green when active, neutral when configured-but-paused. */}
+          {settings?.hasBotToken && settings?.chatId && settings?.enabled && (
             <Badge className="border-dracula-green/30 bg-dracula-green/15 text-dracula-green">
-              {t("settings.configured")}
+              {t("common.active")}
             </Badge>
           )}
-          {settings?.enabled && (
+          {settings?.hasBotToken && settings?.chatId && !settings?.enabled && (
             <Badge variant="outline" className="text-xs">
-              {t("common.enabled")}
+              {t("settings.configured")} · {t("common.disabled")}
             </Badge>
           )}
         </div>