Add confirmation modal for card removal in collection

src/components/Collection.tsx

@@ -4,6 +4,7 @@ import { Card } from '../types';
 import { getUserCollection, getCardsByIds, addCardToCollection } from '../services/api';
 import { useAuth } from '../contexts/AuthContext';
 import { supabase } from '../lib/supabase';
+import ConfirmModal from './ConfirmModal';
 
 export default function Collection() {
   const { user } = useAuth();
@@ -16,6 +17,11 @@ export default function Collection() {
   const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
   const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
   const [isUpdating, setIsUpdating] = useState(false);
+  const [confirmModal, setConfirmModal] = useState<{
+    isOpen: boolean;
+    cardId: string;
+    cardName: string;
+  }>({ isOpen: false, cardId: '', cardName: '' });
 
   // Helper function to check if a card has an actual back face (not adventure/split/etc)
   const isDoubleFaced = (card: Card) => {
@@ -429,9 +435,11 @@ export default function Collection() {
                     {/* Remove from collection button */}
                     <button
                       onClick={() => {
-                        if (window.confirm(`Remove ${displayName} from your collection?`)) {
-                          updateCardQuantity(selectedCard.card.id, 0);
-                        }
+                        setConfirmModal({
+                          isOpen: true,
+                          cardId: selectedCard.card.id,
+                          cardName: displayName,
+                        });
                       }}
                       disabled={isUpdating}
                       className="w-full mt-3 px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg flex items-center justify-center gap-2 transition-colors"
@@ -447,6 +455,22 @@ export default function Collection() {
         );
       })()}
 
+      {/* Confirm Modal */}
+      <ConfirmModal
+        isOpen={confirmModal.isOpen}
+        onClose={() => setConfirmModal({ isOpen: false, cardId: '', cardName: '' })}
+        onConfirm={() => {
+          updateCardQuantity(confirmModal.cardId, 0);
+          setConfirmModal({ isOpen: false, cardId: '', cardName: '' });
+        }}
+        title="Remove from Collection"
+        message={`Are you sure you want to remove "${confirmModal.cardName}" from your collection? This action cannot be undone.`}
+        confirmText="Remove"
+        cancelText="Cancel"
+        variant="danger"
+        isLoading={isUpdating}
+      />
+
       {/* Snackbar */}
       {snackbar && (
         <div

src/components/ConfirmModal.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { AlertCircle, CheckCircle, Trash2, AlertTriangle } from 'lucide-react';
+import Modal from './Modal';
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'warning' | 'info' | 'success';
+  isLoading?: boolean;
+}
+
+export default function ConfirmModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  variant = 'danger',
+  isLoading = false,
+}: ConfirmModalProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    if (!isLoading) {
+      onClose();
+    }
+  };
+
+  const variantConfig = {
+    danger: {
+      icon: Trash2,
+      iconColor: 'text-red-500',
+      iconBg: 'bg-red-500/10',
+      buttonColor: 'bg-red-600 hover:bg-red-700',
+    },
+    warning: {
+      icon: AlertTriangle,
+      iconColor: 'text-yellow-500',
+      iconBg: 'bg-yellow-500/10',
+      buttonColor: 'bg-yellow-600 hover:bg-yellow-700',
+    },
+    info: {
+      icon: AlertCircle,
+      iconColor: 'text-blue-500',
+      iconBg: 'bg-blue-500/10',
+      buttonColor: 'bg-blue-600 hover:bg-blue-700',
+    },
+    success: {
+      icon: CheckCircle,
+      iconColor: 'text-green-500',
+      iconBg: 'bg-green-500/10',
+      buttonColor: 'bg-green-600 hover:bg-green-700',
+    },
+  };
+
+  const config = variantConfig[variant];
+  const Icon = config.icon;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="sm" showCloseButton={false}>
+      <div className="p-6">
+        {/* Icon */}
+        <div className="flex items-center justify-center mb-4">
+          <div className={`${config.iconBg} p-3 rounded-full`}>
+            <Icon className={config.iconColor} size={32} />
+          </div>
+        </div>
+
+        {/* Title */}
+        <h2 className="text-xl font-bold text-white text-center mb-2">
+          {title}
+        </h2>
+
+        {/* Message */}
+        <p className="text-gray-400 text-center mb-6">
+          {message}
+        </p>
+
+        {/* Buttons */}
+        <div className="flex gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={isLoading}
+            className={`flex-1 px-4 py-2 ${config.buttonColor} disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg transition-colors`}
+          >
+            {isLoading ? 'Loading...' : confirmText}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

src/components/DeckManager.tsx

@@ -456,11 +456,11 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
               cardsToAdd.push({ card, quantity });
             } else {
               console.warn(`Card not found: ${cardName}`);
-              alert(`Card not found: ${cardName}`);
+              setSnackbar({ message: `Card not found: ${cardName}`, type: 'error' });
             }
           } catch (error) {
             console.error(`Failed to search card ${cardName}:`, error);
-            alert(`Failed to search card ${cardName}: ${error}`);
+            setSnackbar({ message: `Failed to import card: ${cardName}`, type: 'error' });
           }
         }
 

src/components/Modal.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  showCloseButton?: boolean;
+}
+
+export default function Modal({
+  isOpen,
+  onClose,
+  children,
+  size = 'md',
+  showCloseButton = true
+}: ModalProps) {
+  // Close modal on ESC key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black bg-opacity-50 z-50 transition-opacity duration-300 animate-fade-in"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+        <div
+          className={`${sizeClasses[size]} w-full bg-gray-800 rounded-lg shadow-2xl pointer-events-auto animate-scale-in`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {showCloseButton && (
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-10"
+            >
+              <X size={24} />
+            </button>
+          )}
+
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}