From eebe4019af1f637e6da3fd22afe176ef7ae725fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 20 Oct 2026 13:36:59 +0200
Subject: [PATCH] fix(insights): ring tiles use TileHeader

The wellness score tiles and the cycle ring tile drew their own icon
and title row instead of TileHeader; the skeleton of the score tile was
a hand-rolled card shell and now composes Card.
---
 src/components/cycle/cycle-ring-tile.tsx          | 12 ++++++------
 .../insights/derived/wellness-scores.tsx          | 15 ++++++---------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/cycle/cycle-ring-tile.tsx b/src/components/cycle/cycle-ring-tile.tsx
index f68773888..b09155700 100644
--- a/src/components/cycle/cycle-ring-tile.tsx
+++ b/src/components/cycle/cycle-ring-tile.tsx
@@ -10,6 +10,7 @@ import { useTranslations } from "@/lib/i18n/context";
 import { CycleRing } from "./cycle-ring";
 import { PHASE_HUE } from "./phase-tokens";
 import { useCycleRingCalendar } from "./use-cycle";
+import { TileHeader } from "@/components/insights/tile-header";
 
 /**
  * v1.15.3 — the compact cycle ring as a WELLNESS-STRIP element.
@@ -107,12 +108,11 @@ export function CycleRingTile({ className }: { className?: string }) {
           className,
         )}
       >
-        <div className="text-foreground flex items-center gap-2">
-          <Droplets className="h-5 w-5 shrink-0" aria-hidden="true" />
-          <span className="truncate text-base leading-none font-semibold">
-            {t("cycle.wellnessRing.label")}
-          </span>
-        </div>
+        <TileHeader
+          icon={Droplets}
+          title={t("cycle.wellnessRing.label")}
+          titleClassName="truncate"
+        />
         <div className="flex flex-col items-center gap-1.5">
           <CycleRing
             dayOfCycle={verdict.dayOfCycle}
diff --git a/src/components/insights/derived/wellness-scores.tsx b/src/components/insights/derived/wellness-scores.tsx
index 848773990..71e76e550 100644
--- a/src/components/insights/derived/wellness-scores.tsx
+++ b/src/components/insights/derived/wellness-scores.tsx
@@ -17,6 +17,8 @@ import type { ScoreBand } from "./band-tokens";
 import type { ReadinessValue } from "@/lib/insights/derived/readiness";
 import type { SleepScoreValue } from "@/lib/insights/derived/sleep-score";
 import type { WellnessScoreValue } from "@/lib/insights/derived/wellness-scores";
+import { TileHeader } from "@/components/insights/tile-header";
+import { Card } from "@/components/ui/card";
 
 /**
  * v1.10.0 — the wellness-scores strip.
@@ -152,12 +154,7 @@ function RingTile({
         animate && "wellness-tile-rise",
       )}
     >
-      <div className="text-foreground flex items-center gap-2">
-        <Icon className="h-5 w-5 shrink-0" aria-hidden="true" />
-        <span className="truncate text-base leading-none font-semibold">
-          {label}
-        </span>
-      </div>
+      <TileHeader icon={Icon} title={label} titleClassName="truncate" />
       <div className="flex flex-col items-center gap-1.5">
         {/* The ring keeps just the number centred; the metric name lives in
             the header above. The per-metric `hue` gradient leans the arc
@@ -242,10 +239,10 @@ function historyOf(
  */
 function WellnessScoreTileSkeleton() {
   return (
-    <div
+    <Card
       data-slot="wellness-score-tile-skeleton"
       aria-hidden="true"
-      className="bg-card border-border flex flex-col gap-4 rounded-xl border p-4 md:p-6"
+      className="gap-4 px-4 md:gap-4 md:px-6"
     >
       <div className="flex items-center gap-2">
         <Skeleton className="h-5 w-5 rounded" />
@@ -260,7 +257,7 @@ function WellnessScoreTileSkeleton() {
         <Skeleton className="h-10 w-full" />
         <Skeleton className="mx-auto h-3 w-20" />
       </div>
-    </div>
+    </Card>
   );
 }