From 774bc37382bdbd1f6f363018ab0cf74b74b8e917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 27 Jun 2026 12:46:30 +0200
Subject: [PATCH] refactor(settings): route three stray cards through
 SettingsCard

The Layout hub links, the global injection-site exclusion card, and the
mobile passkey list hand-rolled their own card surfaces with rounded-lg
or sm:p-5 padding, drifting from the SettingsCard contract
(rounded-xl, p-4 md:p-6). Wrap them in SettingsCard so every settings
surface paints the same radius, border, and padding. Content and
behaviour are unchanged.
---
 .../account-section/passkey-list-section.tsx      |  8 +++-----
 src/components/settings/injection-sites-card.tsx  |  5 +++--
 src/components/settings/layout-section.tsx        | 15 +++++++--------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/settings/account-section/passkey-list-section.tsx b/src/components/settings/account-section/passkey-list-section.tsx
index 4144f1ef9..c28c5a274 100644
--- a/src/components/settings/account-section/passkey-list-section.tsx
+++ b/src/components/settings/account-section/passkey-list-section.tsx
@@ -15,6 +15,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { formatDate } from "@/lib/format";
@@ -198,10 +199,7 @@ export function PasskeyListSection({
         data-testid="passkeys-mobile-list"
       >
         {passkeys.map((pk) => (
-          <li
-            key={pk.id}
-            className="bg-card border-border rounded-lg border p-4"
-          >
+          <SettingsCard as="li" key={pk.id}>
             <div className="flex items-start justify-between gap-2">
               <div className="min-w-0 flex-1">
                 <p className="truncate text-sm font-medium">{pk.name}</p>
@@ -267,7 +265,7 @@ export function PasskeyListSection({
                 </AlertDialogContent>
               </AlertDialog>
             </div>
-          </li>
+          </SettingsCard>
         ))}
       </ul>
       {deleteMsg && (
diff --git a/src/components/settings/injection-sites-card.tsx b/src/components/settings/injection-sites-card.tsx
index 3c1faf124..78cfb3a24 100644
--- a/src/components/settings/injection-sites-card.tsx
+++ b/src/components/settings/injection-sites-card.tsx
@@ -3,6 +3,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Syringe } from "lucide-react";
 
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { Checkbox } from "@/components/ui/checkbox";
 import { useTranslations } from "@/lib/i18n/context";
@@ -66,7 +67,7 @@ export function InjectionSitesCard({
   }
 
   return (
-    <div className="bg-card border-border rounded-lg border p-4">
+    <SettingsCard>
       <SettingsCardHeader
         icon={Syringe}
         title={t("settings.globalExcludedInjectionSitesLabel")}
@@ -84,6 +85,6 @@ export function InjectionSitesCard({
           </label>
         ))}
       </div>
-    </div>
+    </SettingsCard>
   );
 }
diff --git a/src/components/settings/layout-section.tsx b/src/components/settings/layout-section.tsx
index e5ad4528c..7605fcdc4 100644
--- a/src/components/settings/layout-section.tsx
+++ b/src/components/settings/layout-section.tsx
@@ -8,8 +8,8 @@ import {
   type LucideIcon,
 } from "lucide-react";
 
-import { cn } from "@/lib/utils";
 import { useTranslations } from "@/lib/i18n/context";
+import { SettingsCard } from "./settings-card";
 
 /**
  * v1.17.1 (F-2) — the one "Layout & Personalization" home.
@@ -53,19 +53,18 @@ const LAYOUT_LINKS: ReadonlyArray<LayoutLink> = [
 export function LayoutSection() {
   const { t } = useTranslations();
 
-  // v1.18.6 (W9) — the visible heading + subtitle now come from the shared
-  // `<SettingsSectionFrame>` in the route; this body is the hub link list.
+  // The visible heading + subtitle are painted by `SettingsShell` from the
+  // section slug; this body is the hub link list.
   return (
     <ul className="space-y-3">
       {LAYOUT_LINKS.map((link) => {
         const Icon = link.icon;
         return (
           <li key={link.href}>
-            <Link
+            <SettingsCard
+              as={Link}
               href={link.href}
-              className={cn(
-                "bg-card border-border hover:bg-accent/40 group flex items-center gap-4 rounded-xl border p-4 transition-colors sm:p-5",
-              )}
+              className="hover:bg-accent/40 group flex items-center gap-4 transition-colors"
             >
               <Icon
                 className="text-muted-foreground h-5 w-5 shrink-0"
@@ -81,7 +80,7 @@ export function LayoutSection() {
                 className="text-muted-foreground/60 group-hover:text-foreground h-4 w-4 shrink-0 transition-colors"
                 aria-hidden="true"
               />
-            </Link>
+            </SettingsCard>
           </li>
         );
       })}