refactor(settings): compose multi-card sections from SettingsCard

Migrate the remaining hand-rolled card containers in the account,
about, medications, api, mood, notification-status, and advanced
sections to SettingsCard, preserving each card's heading, body, and
test hooks. Leaves the passkey list-row (rounded-lg) for the list-row
token track.

src/components/settings/about-section.tsx

@@ -13,6 +13,7 @@ import {
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { useFormatters, useTranslations } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
@@ -191,7 +192,7 @@ export function AboutSection() {
           stacked the license under the version inside its own boxed Badge,
           which read as a separate field even though the two values belong
           on the same row. */}
-      <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+      <SettingsCard>
         <SettingsCardHeader icon={Info} title="HealthLog" className="mb-4" />
 
         {isLoading || !version ? (
@@ -255,13 +256,13 @@ export function AboutSection() {
             )}
           </dl>
         )}
-      </div>
+      </SettingsCard>
 
       {/* Sources & docs — every link card was untitled in the v1.4.2
           About surface, so the buttons floated alone with no heading
           telling the user what the section was for. */}
       {version && (
-        <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+        <SettingsCard>
           <SettingsCardHeader
             icon={BookOpen}
             title={t("settings.about.linksHeading")}
@@ -298,7 +299,7 @@ export function AboutSection() {
               </a>
             </Button>
           </div>
-        </div>
+        </SettingsCard>
       )}
 
       {/* v1.18.6 — the tour-replay card consolidated onto a single home in

src/components/settings/account-section.tsx

@@ -48,6 +48,7 @@ import { useTranslations } from "@/lib/i18n/context";
 import { describePasskeyError } from "@/lib/passkey-errors";
 import { queryKeys } from "@/lib/query-keys";
 import { AboutMeSection } from "@/components/settings/about-me-section";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { TimezonePicker } from "@/components/settings/timezone-picker";
 import { TimeFormatSelect } from "@/components/settings/time-format-select";
@@ -375,7 +376,7 @@ export function AccountSection() {
       {/* Profile photo card */}
       <AvatarSection />
 
-      <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+      <SettingsCard>
         <SettingsCardHeader
           icon={User}
           title={t("settings.profile")}
@@ -580,7 +581,7 @@ export function AccountSection() {
             </Button>
           </div>
         </form>
-      </div>
+      </SettingsCard>
 
       {/* v1.18.0 (S5) — injection-site exclusions moved to the dedicated
           Medikamente settings section, where every medication-specific
@@ -599,7 +600,7 @@ export function AccountSection() {
       <CycleTrackingCard isAuthenticated={isAuthenticated} />
 
       {/* Passkeys card */}
-      <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+      <SettingsCard>
         <SettingsCardHeader
           icon={Shield}
           title={t("settings.passkeys")}
@@ -632,7 +633,7 @@ export function AccountSection() {
             {statusText(passkeyMsg, t)}
           </p>
         )}
-      </div>
+      </SettingsCard>
 
       {/* Password card. v1.4.19 A6: action-button placement contract —
           on mobile (`<sm`) the action button stacks below the title +
@@ -643,7 +644,7 @@ export function AccountSection() {
           (the German "Passwort ändern" already pushes it; the tour
           card's "Restart onboarding tour" actually broke through the
           right border by ~48 px). */}
-      <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+      <SettingsCard>
         <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-2">
           <div className="flex items-start gap-2">
             <Shield className="text-muted-foreground mt-0.5 h-5 w-5 shrink-0" />
@@ -665,7 +666,7 @@ export function AccountSection() {
             {t("settings.changePassword")}
           </Button>
         </div>
-      </div>
+      </SettingsCard>
 
       {/* v1.18.1 (D1) — the "Tour neu starten" card moved to Settings →
           Erweitert. It is a maintenance / reset action, not a profile or
@@ -1096,7 +1097,7 @@ function AvatarSection() {
   const busy = upload.isPending || remove.isPending;
 
   return (
-    <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+    <SettingsCard>
       <SettingsCardHeader
         icon={ImageUp}
         title={t("settings.avatar.title")}
@@ -1168,6 +1169,6 @@ function AvatarSection() {
           {statusText(msg, t)}
         </p>
       )}
-    </div>
+    </SettingsCard>
   );
 }

src/components/settings/advanced-section.tsx

@@ -19,6 +19,7 @@ import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { ResearchModeAcknowledgmentDialog } from "@/components/medications/ResearchModeAcknowledgmentDialog";
 import { formatDateTime } from "@/lib/format";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { useTranslations } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
@@ -139,8 +140,7 @@ function ResearchModeCard() {
   }
 
   return (
-    <div
-      className="bg-card border-border rounded-xl border p-4 sm:p-6"
+    <SettingsCard
       data-slot="settings-research-mode-card"
     >
       <SettingsCardHeader
@@ -211,7 +211,7 @@ function ResearchModeCard() {
         onOpenChange={setDialogOpen}
         currentDisclaimerVersion={status?.currentDisclaimerVersion ?? null}
       />
-    </div>
+    </SettingsCard>
   );
 }
 
@@ -254,8 +254,7 @@ function DataResetCard() {
   }
 
   return (
-    <div
-      className="bg-card border-border rounded-xl border p-4 sm:p-6"
+    <SettingsCard
       data-slot="settings-data-reset-card"
     >
       {/* v1.4.43 QoL (L5) — dropped the `AlertTriangle` icon and
@@ -338,7 +337,7 @@ function DataResetCard() {
           {msg}
         </p>
       )}
-    </div>
+    </SettingsCard>
   );
 }
 
@@ -402,8 +401,7 @@ function AccountDeleteCard() {
   }
 
   return (
-    <div
-      className="bg-card border-border rounded-xl border p-4 sm:p-6"
+    <SettingsCard
       data-slot="settings-account-delete-card"
     >
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-2">
@@ -482,6 +480,6 @@ function AccountDeleteCard() {
           {msg}
         </p>
       )}
-    </div>
+    </SettingsCard>
   );
 }

src/components/settings/api-section.tsx

@@ -19,6 +19,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { useAuth } from "@/hooks/use-auth";
 import { formatDate, formatDateTime } from "@/lib/format";
@@ -66,7 +67,7 @@ function ApiEndpointsCard() {
   ];
 
   return (
-    <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+    <SettingsCard>
       <SettingsCardHeader
         icon={Key}
         title={t("settings.apiEndpointsTitle")}
@@ -139,7 +140,7 @@ function ApiEndpointsCard() {
           </li>
         ))}
       </ul>
-    </div>
+    </SettingsCard>
   );
 }
 
@@ -229,7 +230,7 @@ function ApiTokensCard() {
   }, null);
 
   return (
-    <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+    <SettingsCard>
       <SettingsCardHeader
         icon={Key}
         title={t("settings.apiTokens")}
@@ -626,6 +627,6 @@ function ApiTokensCard() {
           </div>
         )}
       </div>
-    </div>
+    </SettingsCard>
   );
 }

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 { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { InjectionSitesCard } from "@/components/settings/injection-sites-card";
 import { useAuth } from "@/hooks/use-auth";
@@ -79,9 +80,9 @@ export function MedicationsSection() {
     <div className="space-y-6">
       {/* View preference — cards vs table. The shared header toggle
           writes optimistically, so there is no Save button here. */}
-      <div
+      <SettingsCard
         id="medications-view"
-        className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
+        className="scroll-mt-28 space-y-4"
       >
         <SettingsCardHeader
           icon={LayoutGrid}
@@ -97,12 +98,12 @@ export function MedicationsSection() {
             <MedicationViewToggle view={layout.view} onChange={setView} />
           )}
         </div>
-      </div>
+      </SettingsCard>
 
       {/* Manual order — applies to both list views. */}
-      <div
+      <SettingsCard
         id="medications-order"
-        className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
+        className="scroll-mt-28 space-y-4"
       >
         <SettingsCardHeader
           icon={Pill}
@@ -117,7 +118,7 @@ export function MedicationsSection() {
         ) : (
           <MedicationOrderEditor medications={ordered} />
         )}
-      </div>
+      </SettingsCard>
 
       {/* v1.18.0 (S5) — injection-site exclusions are a medication setting;
           they moved here from the account profile so all medication-specific

src/components/settings/mood-section.tsx

@@ -2,6 +2,7 @@
 
 import { Archive, Folders, Loader2, Tags } from "lucide-react";
 
+import { SettingsCard } from "@/components/settings/settings-card";
 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";
@@ -45,30 +46,30 @@ export function MoodSection() {
   return (
     <div className="space-y-6">
       {/* Groups — picker group order + own groups. */}
-      <div
+      <SettingsCard
         id="mood-groups"
-        className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
+        className="scroll-mt-28 space-y-4"
       >
         <SettingsCardHeader
           icon={Folders}
           title={t("mood.manage.groupsTitle")}
         />
         {isLoading || !catalog ? loading : <TagGroupsCard catalog={catalog} />}
-      </div>
+      </SettingsCard>
 
       {/* Tags — visibility, order, edit, move, create. */}
-      <div
+      <SettingsCard
         id="mood-tags"
-        className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
+        className="scroll-mt-28 space-y-4"
       >
         <SettingsCardHeader icon={Tags} title={t("mood.manage.tagsTitle")} />
         {isLoading || !catalog ? loading : <TagManagerCard catalog={catalog} />}
-      </div>
+      </SettingsCard>
 
       {/* Archived custom tags — restore / hard delete. */}
-      <div
+      <SettingsCard
         id="mood-archived"
-        className="bg-card border-border scroll-mt-28 space-y-4 rounded-xl border p-4 sm:p-6"
+        className="scroll-mt-28 space-y-4"
       >
         <SettingsCardHeader
           icon={Archive}
@@ -79,7 +80,7 @@ export function MoodSection() {
         ) : (
           <ArchivedTagsCard catalog={catalog} />
         )}
-      </div>
+      </SettingsCard>
     </div>
   );
 }

src/components/settings/notification-status-card.tsx

@@ -32,6 +32,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { useAuth } from "@/hooks/use-auth";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { useFormatters, useTranslations } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
@@ -114,9 +115,9 @@ export function NotificationStatusCard() {
 
   if (isLoading) {
     return (
-      <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+      <SettingsCard>
         <Loader2 className="text-muted-foreground h-4 w-4 animate-spin motion-reduce:animate-none" />
-      </div>
+      </SettingsCard>
     );
   }
 
@@ -128,8 +129,7 @@ export function NotificationStatusCard() {
   const channels = Array.isArray(data) ? data : [];
   if (channels.length === 0) {
     return (
-      <div
-        className="bg-card border-border rounded-xl border p-4 sm:p-6"
+      <SettingsCard
         data-testid="notification-status-empty"
       >
         <SettingsCardHeader
@@ -137,12 +137,12 @@ export function NotificationStatusCard() {
           title={t("settings.notificationStatus.title")}
           description={t("settings.notificationStatus.emptyDescription")}
         />
-      </div>
+      </SettingsCard>
     );
   }
 
   return (
-    <div className="bg-card border-border rounded-xl border p-4 sm:p-6">
+    <SettingsCard>
       <SettingsCardHeader
         icon={Bell}
         title={t("settings.notificationStatus.title")}
@@ -166,7 +166,7 @@ export function NotificationStatusCard() {
           />
         ))}
       </ul>
-    </div>
+    </SettingsCard>
   );
 }