Replace native confirms with dialogs

src/app/dashboard/profil/_components/my-children-manager.tsx

@@ -5,6 +5,7 @@ import { Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import {
   Dialog,
   DialogContent,
@@ -51,6 +52,7 @@ export function MyChildrenManager({
   const [editingChild, setEditingChild] = useState<MyChild | null>(null);
   const [editPayload, setEditPayload] =
     useState<ChildPayload>(emptyChildPayload);
+  const [childToDelete, setChildToDelete] = useState<MyChild | null>(null);
   const [isPending, startTransition] = useTransition();
 
   function openEditor(child: MyChild) {
@@ -91,11 +93,6 @@ export function MyChildrenManager({
   }
 
   function handleDelete(child: MyChild) {
-    const confirmed = confirm(
-      `${child.firstName} ${child.lastName} wirklich entfernen?`,
-    );
-    if (!confirmed) return;
-
     startTransition(async () => {
       const result = await deleteMyChild(child.id);
       if (result.error) {
@@ -104,6 +101,7 @@ export function MyChildrenManager({
       }
 
       toast.success("Kind entfernt.");
+      setChildToDelete(null);
     });
   }
 
@@ -157,7 +155,7 @@ export function MyChildrenManager({
                   variant="ghost"
                   size="icon"
                   className="h-7 w-7 text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
-                  onClick={() => handleDelete(child)}
+                  onClick={() => setChildToDelete(child)}
                   disabled={isPending || !canManage}
                   aria-label="Kind löschen"
                 >
@@ -250,6 +248,25 @@ export function MyChildrenManager({
           </form>
         </DialogContent>
       </Dialog>
+
+      <ConfirmDialog
+        open={!!childToDelete}
+        onOpenChange={(open) => {
+          if (!open) setChildToDelete(null);
+        }}
+        title="Kind entfernen?"
+        description={
+          childToDelete
+            ? `${childToDelete.firstName} ${childToDelete.lastName} wird aus deinem Haushalt entfernt.`
+            : "Dieses Kind wird aus deinem Haushalt entfernt."
+        }
+        confirmLabel="Entfernen"
+        pendingLabel="Wird entfernt..."
+        isPending={isPending}
+        onConfirm={() => {
+          if (childToDelete) handleDelete(childToDelete);
+        }}
+      />
     </div>
   );
 }