fix(ui): use custom ConfirmDialog for deletions to prevent input blocking on Windows (#282)

src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,84 @@
+/**
+ * ConfirmDialog - In-DOM confirmation dialog (replaces window.confirm)
+ * Keeps focus within the renderer to avoid Windows focus loss after native dialogs.
+ */
+import { useEffect, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: 'default' | 'destructive';
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = 'OK',
+  cancelLabel = 'Cancel',
+  variant = 'default',
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (open && cancelRef.current) {
+      cancelRef.current.focus();
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="confirm-dialog-title"
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        className={cn(
+          'mx-4 max-w-md rounded-lg border bg-card p-6 shadow-lg',
+          'focus:outline-none'
+        )}
+        tabIndex={-1}
+      >
+        <h2 id="confirm-dialog-title" className="text-lg font-semibold">
+          {title}
+        </h2>
+        <p className="mt-2 text-sm text-muted-foreground">{message}</p>
+        <div className="mt-6 flex justify-end gap-2">
+          <Button
+            ref={cancelRef}
+            variant="outline"
+            onClick={onCancel}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={variant === 'destructive' ? 'destructive' : 'default'}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}