replace native confirm dialog with modals in settings

2026-09-22 06:39:08 +02:00 · 2026-06-05 13:16:39 +02:00
parent 4427aaa31f
commit 5877880789
12 changed files with 279 additions and 101 deletions
@@ -0,0 +1,110 @@
+import { ReactNode, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import * as Dialog from "@/components/dialog/Dialog";
+import { Button } from "@/components/buttons/Button";
+import { DialogHeading } from "@/components/dialog/DialogHeading";
+import { DialogDescription } from "@/components/dialog/DialogDescription";
+import { DialogActions } from "@/components/dialog/DialogActions";
+
+// ConfirmModal is the shared in-app confirmation modal — a left-aligned
+// title + (optionally multi-line) description with Cancel / confirm buttons
+// in the footer. It's the in-window counterpart to the native warningDialog.
+//
+// Most call sites should not render this directly: use the imperative
+// `useConfirm()` from DialogContext (`await confirm({...})`), which mounts a
+// single instance at the provider level. Render ConfirmModal yourself only
+// when you need bespoke control over its open/busy lifecycle.
+type ConfirmModalProps = {
+    open: boolean;
+    title: ReactNode;
+    description: ReactNode;
+    /** Confirm button label. */
+    confirmLabel: string;
+    /** Cancel button label; defaults to the shared "Cancel" string. */
+    cancelLabel?: string;
+    /** Use the destructive (red) confirm button variant. */
+    danger?: boolean;
+    /** Disable the buttons (and ignore dismiss) while an action runs. */
+    busy?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+
+export const ConfirmModal = ({
+    open,
+    title,
+    description,
+    confirmLabel,
+    cancelLabel,
+    danger = false,
+    busy = false,
+    onConfirm,
+    onCancel,
+}: ConfirmModalProps) => {
+    const { t } = useTranslation();
+
+    // Retain the last shown content so it stays rendered through Radix's
+    // close animation instead of blanking out the instant the caller clears
+    // its state on close.
+    type Snapshot = Pick<ConfirmModalProps, "title" | "description" | "confirmLabel" | "danger"> & {
+        cancelLabel: string;
+    };
+    const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
+    const resolvedCancel = cancelLabel ?? t("common.cancel");
+    useEffect(() => {
+        if (open) {
+            setSnapshot({ title, description, confirmLabel, cancelLabel: resolvedCancel, danger });
+        }
+    }, [open, title, description, confirmLabel, resolvedCancel, danger]);
+
+    const view = open
+        ? { title, description, confirmLabel, cancelLabel: resolvedCancel, danger }
+        : snapshot;
+
+    return (
+        <Dialog.Root
+            open={open}
+            onOpenChange={(next) => {
+                if (!next && !busy) onCancel();
+            }}
+        >
+            <Dialog.Content
+                maxWidthClass="max-w-sm"
+                showClose={false}
+                className="py-5"
+                onOpenAutoFocus={(e) => e.preventDefault()}
+            >
+                {view && (
+                    <div className="flex flex-col gap-5 px-5">
+                        <div className="flex flex-col gap-1 pl-1">
+                            <DialogHeading align={"left"}>{view.title}</DialogHeading>
+                            <DialogDescription align={"left"} className={"whitespace-pre-line"}>
+                                {view.description}
+                            </DialogDescription>
+                        </div>
+
+                        <DialogActions className={"flex-row justify-end gap-2.5"}>
+                            <Button
+                                variant={"secondary"}
+                                size={"xs2"}
+                                disabled={busy}
+                                onClick={onCancel}
+                            >
+                                {view.cancelLabel}
+                            </Button>
+                            <Button
+                                autoFocus
+                                variant={view.danger ? "danger" : "primary"}
+                                size={"xs2"}
+                                disabled={busy}
+                                onClick={onConfirm}
+                            >
+                                {view.confirmLabel}
+                            </Button>
+                        </DialogActions>
+                    </div>
+                )}
+            </Dialog.Content>
+        </Dialog.Root>
+    );
+};
@@ -15,7 +15,7 @@ const Overlay = forwardRef<
            ref={ref}
            className={cn(
                "fixed inset-0 z-50 grid items-center justify-items-center overflow-y-auto px-10 py-16",
-                "bg-black/40 backdrop-blur-sm",
+                "bg-black/60",
                "data-[state=open]:animate-in data-[state=closed]:animate-out",
                "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
                "duration-150 ease-out",