From 804e8f713a1c8c5fd0ed1785e8e94306bdb97e82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 16 Jun 2026 21:32:18 +0200
Subject: [PATCH] fix(admin): align the Danger Zone with the shared card layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Danger Zone rendered a lone icon above a left-floating label with
the delete button dropped below, unlike every other admin section. Adopt
the shared SettingsCardHeader shape — icon, title, description, and the
destructive action in the status slot — so the structure matches the
rest of the console while the tint and warning icon keep it flagged as
destructive.
---
 src/components/admin/danger-zone-section.tsx | 46 ++++++++++----------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/admin/danger-zone-section.tsx b/src/components/admin/danger-zone-section.tsx
index 93cebfdd3..a9607cd90 100644
--- a/src/components/admin/danger-zone-section.tsx
+++ b/src/components/admin/danger-zone-section.tsx
@@ -15,6 +15,7 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { useTranslations } from "@/lib/i18n/context";
 import { apiDelete } from "@/lib/api/api-fetch";
 
@@ -59,24 +60,25 @@ export function DangerZoneSection() {
   });
 
   return (
+    // v1.18.1 E4 — adopt the shared card shape (rounded-xl border + the
+    // `SettingsCardHeader` icon/title/description/status layout) so the
+    // Danger Zone reads like every other admin section. The destructive
+    // tint + AlertTriangle icon keep it visually flagged as dangerous;
+    // the delete affordance now sits in the header status slot, properly
+    // aligned beside its label rather than floating below a lone icon.
     <div className="bg-destructive/5 border-destructive/30 rounded-xl border p-4 sm:p-6">
-      {/* v1.4.19 A8 / F-08: page header `admin.section.danger-zone.*`
-          already names the section, so the card-level title was a
-          duplicate of the page title. The destructive icon stays so
-          the card still flags itself as dangerous at a glance. */}
-      <AlertTriangle className="text-destructive h-5 w-5" aria-hidden="true" />
-      <div className="mt-4">
-        <p className="text-sm font-medium">{t("admin.deleteAllData")}</p>
-        <p className="text-muted-foreground text-xs">
-          {t("admin.deleteAllDescription")}
-        </p>
-        <div className="mt-3">
+      <SettingsCardHeader
+        icon={AlertTriangle}
+        title={t("admin.deleteAllData")}
+        description={t("admin.deleteAllDescription")}
+        status={
           <AlertDialog>
             <AlertDialogTrigger asChild>
               <Button
                 variant="destructive"
                 size="sm"
                 disabled={wipeAllData.isPending}
+                className="min-h-11"
               >
                 {wipeAllData.isPending ? (
                   <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
@@ -111,17 +113,17 @@ export function DangerZoneSection() {
               </AlertDialogFooter>
             </AlertDialogContent>
           </AlertDialog>
-        </div>
-        {wipeMsg && (
-          <p
-            className={`mt-2 text-sm ${
-              wipeAllData.isError ? "text-destructive" : "text-dracula-green"
-            }`}
-          >
-            {wipeMsg}
-          </p>
-        )}
-      </div>
+        }
+      />
+      {wipeMsg && (
+        <p
+          className={`mt-3 pl-7 text-sm ${
+            wipeAllData.isError ? "text-destructive" : "text-dracula-green"
+          }`}
+        >
+          {wipeMsg}
+        </p>
+      )}
     </div>
   );
 }