From c1a84ba82a47b4888eb8171f76a4afc706e3087b Mon Sep 17 00:00:00 2001
From: Misaka <pengqiangqiang@gmail.com>
Date: Wed, 1 Apr 2026 20:15:36 +0800
Subject: [PATCH] feat(ui): migrate ConfirmDialog to shadcn AlertDialog

Replace Modal-based ConfirmDialog with Radix AlertDialog primitives.
Preserves variant icons/colors, Enter key confirm, and useConfirmDialog
hook API unchanged.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/ui/ConfirmDialog.tsx       |  86 ++++++------
 .../src/components/ui/shadcn/alert-dialog.tsx | 132 ++++++++++++++++++
 2 files changed, 177 insertions(+), 41 deletions(-)
 create mode 100644 src/renderer/src/components/ui/shadcn/alert-dialog.tsx

diff --git a/src/renderer/src/components/ui/ConfirmDialog.tsx b/src/renderer/src/components/ui/ConfirmDialog.tsx
index 3262c5c..a25ca21 100644
--- a/src/renderer/src/components/ui/ConfirmDialog.tsx
+++ b/src/renderer/src/components/ui/ConfirmDialog.tsx
@@ -1,14 +1,23 @@
 /**
  * ConfirmDialog Component
  *
- * A confirmation dialog component for displaying confirmation prompts.
- * Extends the Modal component with consistent styling and behavior.
+ * A confirmation dialog using shadcn AlertDialog primitives.
+ * Supports danger/warning/info variants with icons.
  */
 
 import React, { useCallback, useEffect } from 'react'
 import { AlertTriangle, Info, AlertCircle } from 'lucide-react'
-import { Modal } from './Modal'
 import { Button } from './Button'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogCancel,
+  AlertDialogAction
+} from './shadcn/alert-dialog'
 
 export type ConfirmDialogVariant = 'danger' | 'warning' | 'info'
 
@@ -54,19 +63,16 @@ export function ConfirmDialog({
   onConfirm,
   onCancel
 }: ConfirmDialogProps) {
-  // Handle keyboard shortcuts
+  // Handle Enter key to confirm (Radix handles Escape automatically)
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (!isOpen) return
       if (e.key === 'Enter') {
         e.preventDefault()
         onConfirm()
-      } else if (e.key === 'Escape') {
-        e.preventDefault()
-        onCancel()
       }
     },
-    [isOpen, onConfirm, onCancel]
+    [isOpen, onConfirm]
   )
 
   useEffect(() => {
@@ -79,39 +85,37 @@ export function ConfirmDialog({
   const styles = variantStyles[variant]
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onCancel}
-      title={title}
-      size="md"
-      showCloseButton={false}
-      isAlertDialog={true}
-      initialFocusSelector="[data-autofocus]"
-    >
-      <div className="flex items-start gap-4">
-        {/* Icon */}
-        <div className={`flex-shrink-0 ${styles.iconColor}`}>{styles.icon}</div>
-
-        {/* Message */}
-        <div className="flex-1">
-          {typeof message === 'string' ? (
-            <p className="text-gray-700 whitespace-pre-wrap">{message}</p>
-          ) : (
-            message
-          )}
-        </div>
-      </div>
-
-      {/* Buttons */}
-      <div className="flex justify-end gap-3 mt-6">
-        <Button variant="secondary" onClick={onCancel}>
-          {cancelText}
-        </Button>
-        <Button data-autofocus="true" variant={styles.buttonVariant} onClick={onConfirm}>
-          {confirmText}
-        </Button>
-      </div>
-    </Modal>
+    <AlertDialog open={isOpen} onOpenChange={(open) => { if (!open) onCancel() }}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription asChild>
+            <div className="flex items-start gap-4 text-left">
+              <div className={`flex-shrink-0 ${styles.iconColor}`}>{styles.icon}</div>
+              <div className="flex-1">
+                {typeof message === 'string' ? (
+                  <p className="text-foreground whitespace-pre-wrap">{message}</p>
+                ) : (
+                  message
+                )}
+              </div>
+            </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel asChild>
+            <Button variant="secondary" onClick={onCancel}>
+              {cancelText}
+            </Button>
+          </AlertDialogCancel>
+          <AlertDialogAction asChild>
+            <Button variant={styles.buttonVariant} onClick={onConfirm}>
+              {confirmText}
+            </Button>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/src/renderer/src/components/ui/shadcn/alert-dialog.tsx b/src/renderer/src/components/ui/shadcn/alert-dialog.tsx
new file mode 100644
index 0000000..2ed0a27
--- /dev/null
+++ b/src/renderer/src/components/ui/shadcn/alert-dialog.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@renderer/lib/utils'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay
+        data-slot="alert-dialog-overlay"
+        className={cn(
+          'fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0'
+        )}
+      />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 sm:rounded-lg',
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPrimitive.Portal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      data-slot="alert-dialog-action"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      data-slot="alert-dialog-cancel"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel
+}