From f1f6018f6ee835cd54a56569574c2abe7c1d6881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 5 Jun 2026 12:58:23 +0200
Subject: [PATCH] fix(insights): align vitals tiles and section headings with
 the shared tile header

Bring the Vitals grid in line with the harmonized card language. The
sparkline-delta tile led with a muted-uppercase caption + a muted icon;
it now leads with a foreground icon and a foreground heading matching the
canonical tile header, keeping the trailing delta. The Vitalwerte and
Mobility section headings and the provisional baseline / HRV tile headers
move onto the shared tile header (foreground icon + heading) so the
Wellness, Vitals, and Mobility sections share one heading construction.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../insights/derived/sparkline-delta-tile.tsx | 15 +++++--
 .../insights/derived/vitals-dashboard.tsx     | 40 +++++++++----------
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/components/insights/derived/sparkline-delta-tile.tsx b/src/components/insights/derived/sparkline-delta-tile.tsx
index 1acb2cb8e..6589120bf 100644
--- a/src/components/insights/derived/sparkline-delta-tile.tsx
+++ b/src/components/insights/derived/sparkline-delta-tile.tsx
@@ -125,9 +125,17 @@ export function SparklineDeltaTile({
         className,
       )}
     >
-      <div className="flex h-5 min-w-0 items-center justify-between gap-2">
+      {/* Header row matches the canonical TileHeader language: a leading
+          foreground icon + a foreground `CardTitle`-weight heading — never
+          the old muted-uppercase caption. Kept on one line for the dense
+          grid; provenance trails to the right edge. */}
+      <div className="flex min-w-0 items-center gap-2">
+        <Icon
+          className="text-foreground h-5 w-5 shrink-0"
+          aria-hidden="true"
+        />
         <span
-          className="text-muted-foreground min-w-0 flex-1 truncate text-xs leading-5 font-medium tracking-wide whitespace-nowrap uppercase"
+          className="text-foreground min-w-0 flex-1 truncate text-base leading-none font-semibold whitespace-nowrap"
           data-slot="sparkline-delta-tile-label"
         >
           {label}
@@ -135,12 +143,11 @@ export function SparklineDeltaTile({
         {provenance ? (
           <span
             data-slot="sparkline-delta-tile-provenance"
-            className="shrink-0"
+            className="ml-auto shrink-0"
           >
             {provenance}
           </span>
         ) : null}
-        <Icon className="text-muted-foreground h-4 w-4 shrink-0" />
       </div>
 
       <div
diff --git a/src/components/insights/derived/vitals-dashboard.tsx b/src/components/insights/derived/vitals-dashboard.tsx
index 7eb93abad..2fca7b851 100644
--- a/src/components/insights/derived/vitals-dashboard.tsx
+++ b/src/components/insights/derived/vitals-dashboard.tsx
@@ -11,6 +11,7 @@ import {
   MEASUREMENT_TYPE_ICONS,
   MEASUREMENT_TYPE_LABEL_KEYS,
 } from "@/components/measurements/measurement-list-meta";
+import { TileHeader } from "@/components/insights/tile-header";
 import { SparklineDeltaTile } from "./sparkline-delta-tile";
 import { CoverageMeter } from "./coverage-meter";
 import { ProvenanceExplainer } from "./provenance-explainer";
@@ -182,12 +183,7 @@ function BaselineTile({
         data-state="provisional"
         className="bg-card border-border flex h-full w-full min-w-0 flex-col gap-3 rounded-xl border p-4 md:p-6"
       >
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-muted-foreground truncate text-xs font-medium tracking-wide uppercase">
-            {label}
-          </span>
-          <Icon className="text-muted-foreground h-4 w-4 shrink-0" />
-        </div>
+        <TileHeader icon={Icon} title={label} titleClassName="truncate" />
         <p className="text-muted-foreground text-sm" data-slot="vitals-tile-building">
           {t("insights.derived.vitals.building", {
             count: data.coverage.historyDays,
@@ -352,12 +348,11 @@ function HrvBalanceTile({ read, isLoading }: TileProps) {
         data-state="provisional"
         className="bg-card border-border flex h-full w-full min-w-0 flex-col gap-3 rounded-xl border p-4 md:p-6"
       >
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-muted-foreground truncate text-xs font-medium tracking-wide uppercase">
-            {t("measurements.typeHeartRateVariability")}
-          </span>
-          <HeartPulse className="text-muted-foreground h-4 w-4 shrink-0" />
-        </div>
+        <TileHeader
+          icon={HeartPulse}
+          title={t("measurements.typeHeartRateVariability")}
+          titleClassName="truncate"
+        />
         <p className="text-muted-foreground text-sm">
           {t("insights.derived.vitals.building", {
             count: data.coverage.historyDays,
@@ -531,9 +526,10 @@ export function VitalsDashboard({ batch, className }: DashboardProps) {
           aria-label={t("insights.derived.vitals.sectionTitle")}
           className="space-y-3"
         >
-          <h2 className="text-foreground text-sm font-semibold tracking-tight">
-            {t("insights.derived.vitals.sectionTitle")}
-          </h2>
+          <TileHeader
+            icon={HeartPulse}
+            title={t("insights.derived.vitals.sectionTitle")}
+          />
           <div
             data-slot="vitals-dashboard-error"
             role="alert"
@@ -572,9 +568,10 @@ export function VitalsDashboard({ batch, className }: DashboardProps) {
           aria-label={t("insights.derived.vitals.sectionTitle")}
           className="space-y-3"
         >
-          <h2 className="text-foreground text-sm font-semibold tracking-tight">
-            {t("insights.derived.vitals.sectionTitle")}
-          </h2>
+          <TileHeader
+            icon={HeartPulse}
+            title={t("insights.derived.vitals.sectionTitle")}
+          />
           <div
             data-slot="vitals-dashboard-grid"
             aria-busy={isLoading}
@@ -615,9 +612,10 @@ export function VitalsDashboard({ batch, className }: DashboardProps) {
           aria-label={t("insights.derived.vitals.mobilitySectionTitle")}
           className="space-y-3"
         >
-          <h2 className="text-foreground text-sm font-semibold tracking-tight">
-            {t("insights.derived.vitals.mobilitySectionTitle")}
-          </h2>
+          <TileHeader
+            icon={Footprints}
+            title={t("insights.derived.vitals.mobilitySectionTitle")}
+          />
           <div
             data-slot="vitals-mobility-grid"
             className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"