From 6c9004b055a94c87eb32a27da85ef6ec11b4b79f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 16 Jun 2026 01:44:44 +0200
Subject: [PATCH] refactor(settings): route section headers through the shared
 primitive

mood, medications, Vorsorge, the health-record export panel and the export
section hand-rolled their card headers; route them through the shared settings
card-header primitive so every settings card header is structurally identical.
---
 .../vorsorge-section.tsx                      | 40 +++++++++----------
 src/components/settings/export-section.tsx    | 26 ++++++------
 .../settings/health-record-export-panel.tsx   | 23 ++++-------
 .../settings/medications-section.tsx          | 25 +++++-------
 src/components/settings/mood-section.tsx      | 28 +++++--------
 5 files changed, 60 insertions(+), 82 deletions(-)

diff --git a/src/components/measurement-reminders/vorsorge-section.tsx b/src/components/measurement-reminders/vorsorge-section.tsx
index 98b927df9..945ef0fb0 100644
--- a/src/components/measurement-reminders/vorsorge-section.tsx
+++ b/src/components/measurement-reminders/vorsorge-section.tsx
@@ -13,9 +13,10 @@
  * relative to "now" but never recomputes the cadence.
  */
 import { useState } from "react";
-import { CheckCircle2, Plus } from "lucide-react";
+import { CalendarClock, CheckCircle2, Plus } from "lucide-react";
 
 import { useTranslations } from "@/lib/i18n/context";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { DeleteButton } from "@/components/data-list";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -120,28 +121,23 @@ export function VorsorgeSection({ enabled = true }: { enabled?: boolean }) {
       aria-labelledby="vorsorge-section-title"
       className="space-y-4"
     >
-      <header className="flex items-center justify-between gap-2">
-        <div className="space-y-1">
-          <h2
-            id="vorsorge-section-title"
-            className="text-lg font-semibold"
+      <SettingsCardHeader
+        icon={CalendarClock}
+        titleId="vorsorge-section-title"
+        title={t("measurementReminders.sectionTitle")}
+        description={t("measurementReminders.sectionDescription")}
+        status={
+          <Button
+            type="button"
+            variant={showForm ? "outline" : "default"}
+            className="min-h-11 shrink-0 sm:min-h-9"
+            onClick={() => setShowForm((v) => !v)}
           >
-            {t("measurementReminders.sectionTitle")}
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            {t("measurementReminders.sectionDescription")}
-          </p>
-        </div>
-        <Button
-          type="button"
-          size="sm"
-          variant={showForm ? "outline" : "default"}
-          onClick={() => setShowForm((v) => !v)}
-        >
-          <Plus className="mr-1 h-4 w-4" />
-          {t("measurementReminders.addButton")}
-        </Button>
-      </header>
+            <Plus className="h-4 w-4" />
+            {t("measurementReminders.addButton")}
+          </Button>
+        }
+      />
 
       {showForm && (
         <Card>
diff --git a/src/components/settings/export-section.tsx b/src/components/settings/export-section.tsx
index ea99c154e..07b0463b0 100644
--- a/src/components/settings/export-section.tsx
+++ b/src/components/settings/export-section.tsx
@@ -32,12 +32,14 @@ import {
   Loader2,
   Pill,
   Waves,
+  type LucideIcon,
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { DateInput } from "@/components/ui/date-input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { ImportPanel } from "@/components/settings/import-panel";
 import { queryKeys } from "@/lib/query-keys";
 import { useTranslations } from "@/lib/i18n/context";
@@ -120,7 +122,7 @@ export function ExportSection() {
 
 interface ExportCardShellProps {
   testId: string;
-  icon: React.ComponentType<{ className?: string }>;
+  icon: LucideIcon;
   title: string;
   description: string;
   format: ExportFormat;
@@ -146,16 +148,16 @@ function ExportCardShell({
       data-testid={testId}
       className={`bg-card border-border flex h-full flex-col rounded-xl border p-4 sm:p-6${outerClassName ? ` ${outerClassName}` : ""}`}
     >
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <Icon className="text-muted-foreground h-5 w-5 shrink-0" />
-          <h2 className="text-base font-semibold">{title}</h2>
-        </div>
-        <span className="border-border text-muted-foreground rounded-full border px-2 py-0.5 text-[11px] font-medium tracking-wide uppercase">
-          {format}
-        </span>
-      </div>
-      <p className="text-muted-foreground mt-1 text-xs">{description}</p>
+      <SettingsCardHeader
+        icon={Icon}
+        title={title}
+        description={description}
+        status={
+          <span className="border-border text-muted-foreground rounded-full border px-2 py-0.5 text-[11px] font-medium tracking-wide uppercase">
+            {format}
+          </span>
+        }
+      />
       {children && <div className="mt-3 space-y-3">{children}</div>}
       <div className="mt-4 flex flex-wrap items-center gap-3">{footer}</div>
     </div>
@@ -220,7 +222,7 @@ function buildQueryString(base: Record<string, string | undefined>): string {
 interface CsvCardProps {
   testId: string;
   actionTestId: string;
-  icon: React.ComponentType<{ className?: string }>;
+  icon: LucideIcon;
   titleKey: string;
   descriptionKey: string;
   endpoint: string;
diff --git a/src/components/settings/health-record-export-panel.tsx b/src/components/settings/health-record-export-panel.tsx
index 61e96d18f..ec21299e3 100644
--- a/src/components/settings/health-record-export-panel.tsx
+++ b/src/components/settings/health-record-export-panel.tsx
@@ -24,6 +24,7 @@
 import { useId, useState } from "react";
 import { ChevronDown, Download, FileText, Loader2 } from "lucide-react";
 
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
@@ -202,21 +203,13 @@ export function HealthRecordExportPanel() {
         "relative isolate overflow-hidden rounded-xl p-4 sm:p-5",
       )}
     >
-      <div className="mb-1 flex items-center gap-2">
-        <FileText
-          className="text-muted-foreground h-5 w-5 shrink-0"
-          aria-hidden="true"
-        />
-        <h2
-          id="health-record-export-title"
-          className="text-lg font-semibold tracking-tight sm:text-xl"
-        >
-          {t("settings.healthRecord.title")}
-        </h2>
-      </div>
-      <p className="text-muted-foreground mb-4 max-w-2xl text-sm leading-snug">
-        {t("settings.healthRecord.description")}
-      </p>
+      <SettingsCardHeader
+        className="mb-4"
+        icon={FileText}
+        titleId="health-record-export-title"
+        title={t("settings.healthRecord.title")}
+        description={t("settings.healthRecord.description")}
+      />
 
       <div className="space-y-4">
         {/* Format + range share a row on desktop so the panel opens
diff --git a/src/components/settings/medications-section.tsx b/src/components/settings/medications-section.tsx
index 966c00174..61dce559d 100644
--- a/src/components/settings/medications-section.tsx
+++ b/src/components/settings/medications-section.tsx
@@ -8,6 +8,7 @@ import {
   type ReorderMedication,
 } from "@/components/medications/medication-order-editor";
 import { MedicationViewToggle } from "@/components/medications/medication-view-toggle";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { InjectionSitesCard } from "@/components/settings/injection-sites-card";
 import { useAuth } from "@/hooks/use-auth";
 import { apiGet } from "@/lib/api/api-fetch";
@@ -90,12 +91,10 @@ export function MedicationsSection() {
         id="medications-view"
         className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
       >
-        <div className="flex items-center gap-2">
-          <LayoutGrid className="text-muted-foreground h-5 w-5" />
-          <h2 className="text-lg font-semibold">
-            {t("medications.viewToggleLabel")}
-          </h2>
-        </div>
+        <SettingsCardHeader
+          icon={LayoutGrid}
+          title={t("medications.viewToggleLabel")}
+        />
         <div className="border-border bg-background/30 flex min-h-12 items-center justify-between gap-3 rounded-md border px-3 py-2">
           <p className="text-muted-foreground min-w-0 text-xs">
             {t("medications.viewToggleHint")}
@@ -113,15 +112,11 @@ export function MedicationsSection() {
         id="medications-order"
         className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
       >
-        <div className="flex items-center gap-2">
-          <Pill className="text-muted-foreground h-5 w-5" />
-          <h2 className="text-lg font-semibold">
-            {t("medications.reorderTitle")}
-          </h2>
-        </div>
-        <p className="text-muted-foreground text-xs">
-          {t("medications.reorderDescription")}
-        </p>
+        <SettingsCardHeader
+          icon={Pill}
+          title={t("medications.reorderTitle")}
+          description={t("medications.reorderDescription")}
+        />
         {isLoading || isLayoutLoading ? (
           <div className="text-muted-foreground flex items-center gap-2 text-sm">
             <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
diff --git a/src/components/settings/mood-section.tsx b/src/components/settings/mood-section.tsx
index d8a82248e..f4a251e96 100644
--- a/src/components/settings/mood-section.tsx
+++ b/src/components/settings/mood-section.tsx
@@ -2,6 +2,7 @@
 
 import { Archive, Folders, Loader2, Tags } from "lucide-react";
 
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { ArchivedTagsCard } from "@/components/mood/manage/archived-tags-card";
 import { TagGroupsCard } from "@/components/mood/manage/tag-groups-card";
 import { TagManagerCard } from "@/components/mood/manage/tag-manager-card";
@@ -58,12 +59,10 @@ export function MoodSection() {
         id="mood-groups"
         className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
       >
-        <div className="flex items-center gap-2">
-          <Folders className="text-muted-foreground h-5 w-5" />
-          <h2 className="text-lg font-semibold">
-            {t("mood.manage.groupsTitle")}
-          </h2>
-        </div>
+        <SettingsCardHeader
+          icon={Folders}
+          title={t("mood.manage.groupsTitle")}
+        />
         {isLoading || !catalog ? loading : <TagGroupsCard catalog={catalog} />}
       </div>
 
@@ -72,12 +71,7 @@ export function MoodSection() {
         id="mood-tags"
         className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
       >
-        <div className="flex items-center gap-2">
-          <Tags className="text-muted-foreground h-5 w-5" />
-          <h2 className="text-lg font-semibold">
-            {t("mood.manage.tagsTitle")}
-          </h2>
-        </div>
+        <SettingsCardHeader icon={Tags} title={t("mood.manage.tagsTitle")} />
         {isLoading || !catalog ? loading : <TagManagerCard catalog={catalog} />}
       </div>
 
@@ -86,12 +80,10 @@ export function MoodSection() {
         id="mood-archived"
         className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
       >
-        <div className="flex items-center gap-2">
-          <Archive className="text-muted-foreground h-5 w-5" />
-          <h2 className="text-lg font-semibold">
-            {t("mood.manage.archivedTitle")}
-          </h2>
-        </div>
+        <SettingsCardHeader
+          icon={Archive}
+          title={t("mood.manage.archivedTitle")}
+        />
         {isLoading || !catalog ? (
           loading
         ) : (