🎯 Implemented Collection Selection Modal System

✨ New CollectionSelectionModal Component:
- Multi-select collection interface with search functionality
- Visual card previews showing selected cards to add
- Select all/deselect all functionality for bulk operations
- Real-time collection filtering and search
- Professional modal design with dark mode support

🔗 Integration with Cards Page:
- Bulk selection toolbar now opens collection modal
- Individual card actions trigger collection modal
- Success feedback with detailed results
- Automatic selection clearing after successful additions

🎮 Enhanced Card Detail Page:
- Replaced old single-select dropdown with new modal
- Multi-collection support for single cards
- Automatic refresh of card collections after additions
- Consistent UI across all card interaction points

🎨 User Experience Features:
- Visual card thumbnails in modal header
- Collection metadata display (card count, public status)
- Loading states and error handling
- Responsive design for all screen sizes

Ready for seamless card-to-collection workflow! 📦✨

components/CollectionSelectionModal.js

@@ -0,0 +1,346 @@
+import { useState, useEffect } from 'react';
+
+export default function CollectionSelectionModal({ 
+  isOpen, 
+  onClose, 
+  cards, // Array of cards to add
+  onAddToCollections 
+}) {
+  const [collections, setCollections] = useState([]);
+  const [selectedCollections, setSelectedCollections] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchCollections();
+      setSelectedCollections([]);
+      setSearchQuery('');
+    }
+  }, [isOpen]);
+
+  const fetchCollections = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch('/api/collections', {
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setCollections(data.collections || []);
+      } else {
+        console.error('Failed to fetch collections');
+      }
+    } catch (error) {
+      console.error('Error fetching collections:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCollectionToggle = (collectionId) => {
+    setSelectedCollections(prev => {
+      if (prev.includes(collectionId)) {
+        return prev.filter(id => id !== collectionId);
+      } else {
+        return [...prev, collectionId];
+      }
+    });
+  };
+
+  const handleSelectAll = () => {
+    const filteredCollections = getFilteredCollections();
+    const allSelected = filteredCollections.every(collection => 
+      selectedCollections.includes(collection.id)
+    );
+
+    if (allSelected) {
+      // Deselect all filtered collections
+      setSelectedCollections(prev => 
+        prev.filter(id => !filteredCollections.some(c => c.id === id))
+      );
+    } else {
+      // Select all filtered collections
+      const newSelections = filteredCollections
+        .filter(collection => !selectedCollections.includes(collection.id))
+        .map(collection => collection.id);
+      setSelectedCollections(prev => [...prev, ...newSelections]);
+    }
+  };
+
+  const getFilteredCollections = () => {
+    if (!searchQuery.trim()) return collections;
+    
+    return collections.filter(collection =>
+      collection.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      collection.description?.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  };
+
+  const handleSubmit = async () => {
+    if (selectedCollections.length === 0) return;
+
+    setSubmitting(true);
+    try {
+      const results = [];
+      
+      // Add cards to each selected collection
+      for (const collectionId of selectedCollections) {
+        for (const card of cards) {
+          const response = await fetch(`/api/collections/${collectionId}/cards`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+            },
+            body: JSON.stringify({
+              cardId: card.id,
+              quantity: 1
+            })
+          });
+
+          if (response.ok) {
+            results.push({ collectionId, cardId: card.id, success: true });
+          } else {
+            results.push({ collectionId, cardId: card.id, success: false });
+          }
+        }
+      }
+
+      // Call callback with results
+      onAddToCollections(results, selectedCollections, cards);
+      onClose();
+    } catch (error) {
+      console.error('Error adding cards to collections:', error);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const filteredCollections = getFilteredCollections();
+  const allFilteredSelected = filteredCollections.length > 0 && 
+    filteredCollections.every(collection => selectedCollections.includes(collection.id));
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
+        {/* Header */}
+        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+              Add to Collections
+            </h2>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Card Summary */}
+          <div className="flex items-center space-x-3 mb-4">
+            <div className="flex -space-x-2">
+              {cards.slice(0, 3).map((card, index) => (
+                <div key={card.id} className="w-12 h-16 bg-gray-200 dark:bg-gray-700 rounded border-2 border-white dark:border-gray-800 overflow-hidden">
+                  {card.image_url ? (
+                    <img 
+                      src={card.image_url} 
+                      alt={card.name}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
+                      No Image
+                    </div>
+                  )}
+                </div>
+              ))}
+              {cards.length > 3 && (
+                <div className="w-12 h-16 bg-gray-300 dark:bg-gray-600 rounded border-2 border-white dark:border-gray-800 flex items-center justify-center">
+                  <span className="text-sm font-bold text-gray-600 dark:text-gray-300">
+                    +{cards.length - 3}
+                  </span>
+                </div>
+              )}
+            </div>
+            <div>
+              <p className="text-lg font-semibold text-gray-900 dark:text-white">
+                {cards.length} card{cards.length !== 1 ? 's' : ''} selected
+              </p>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Choose collections to add {cards.length === 1 ? 'this card' : 'these cards'} to
+              </p>
+            </div>
+          </div>
+
+          {/* Search */}
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Search collections..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full px-4 py-2 pl-10 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+            />
+            <svg className="w-5 h-5 text-gray-400 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </div>
+        </div>
+
+        {/* Collections List */}
+        <div className="flex-1 overflow-y-auto max-h-96">
+          {loading ? (
+            <div className="p-8 text-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
+              <p className="text-gray-600 dark:text-gray-400">Loading collections...</p>
+            </div>
+          ) : filteredCollections.length === 0 ? (
+            <div className="p-8 text-center">
+              <svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+              </svg>
+              <p className="text-gray-600 dark:text-gray-400 mb-2">
+                {searchQuery ? 'No collections match your search' : 'No collections found'}
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-500">
+                {searchQuery ? 'Try a different search term' : 'Create your first collection to get started'}
+              </p>
+            </div>
+          ) : (
+            <div className="p-4">
+              {/* Select All */}
+              {filteredCollections.length > 1 && (
+                <div className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700 mb-2">
+                  <label className="flex items-center space-x-3 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={allFilteredSelected}
+                      onChange={handleSelectAll}
+                      className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
+                    />
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      Select All ({filteredCollections.length})
+                    </span>
+                  </label>
+                </div>
+              )}
+
+              {/* Collection Items */}
+              <div className="space-y-2">
+                {filteredCollections.map((collection) => (
+                  <div
+                    key={collection.id}
+                    className={`p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer ${
+                      selectedCollections.includes(collection.id)
+                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                    }`}
+                    onClick={() => handleCollectionToggle(collection.id)}
+                  >
+                    <div className="flex items-center space-x-3">
+                      <input
+                        type="checkbox"
+                        checked={selectedCollections.includes(collection.id)}
+                        onChange={() => handleCollectionToggle(collection.id)}
+                        className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
+                      />
+                      
+                      {/* Collection Image */}
+                      <div className="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden flex-shrink-0">
+                        {collection.image ? (
+                          <img 
+                            src={collection.image} 
+                            alt={collection.name}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <div className="w-full h-full flex items-center justify-center text-gray-400">
+                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                            </svg>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Collection Info */}
+                      <div className="flex-1 min-w-0">
+                        <h3 className="font-semibold text-gray-900 dark:text-white truncate">
+                          {collection.name}
+                        </h3>
+                        {collection.description && (
+                          <p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+                            {collection.description}
+                          </p>
+                        )}
+                        <div className="flex items-center space-x-4 mt-1">
+                          <span className="text-xs text-gray-500 dark:text-gray-500">
+                            {collection.card_count || 0} cards
+                          </span>
+                          {collection.is_public && (
+                            <span className="text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full">
+                              Public
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+              {selectedCollections.length > 0 && (
+                <span>
+                  {selectedCollections.length} collection{selectedCollections.length !== 1 ? 's' : ''} selected
+                </span>
+              )}
+            </div>
+            
+            <div className="flex space-x-3">
+              <button
+                onClick={onClose}
+                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSubmit}
+                disabled={selectedCollections.length === 0 || submitting}
+                className={`px-6 py-2 rounded-lg font-medium transition-colors ${
+                  selectedCollections.length === 0 || submitting
+                    ? 'bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
+                    : 'bg-blue-600 hover:bg-blue-700 text-white'
+                }`}
+              >
+                {submitting ? (
+                  <div className="flex items-center space-x-2">
+                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                    <span>Adding...</span>
+                  </div>
+                ) : (
+                  `Add to ${selectedCollections.length} Collection${selectedCollections.length !== 1 ? 's' : ''}`
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 

pages/card/[id].js

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import Layout from '../../components/Layout';
 import { useIsAdmin } from '../../lib/admin-auth';
+import CollectionSelectionModal from '../../components/CollectionSelectionModal';
 
 export default function CardDetail() {
   const router = useRouter();
@@ -693,66 +694,30 @@ export default function CardDetail() {
         </div>
       )}
 
-      {/* Collection Modal */}
+      {/* Collection Selection Modal */}
-      {showCollectionModal && (
+      <CollectionSelectionModal
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        isOpen={showCollectionModal}
-          <div className="bg-white rounded-2xl p-6 max-w-md w-full mx-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
+        onClose={() => setShowCollectionModal(false)}
-            <h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
+        cards={card ? [card] : []}
-              Add to Collection
+        onAddToCollections={(results, selectedCollectionIds, cards) => {
-            </h3>
+          const successCount = results.filter(r => r.success).length;
-            <div className="mb-6">
+          if (successCount > 0) {
-              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+            // Refresh card collections
-                Select Collection
+            const fetchCardCollections = async () => {
-              </label>
+              try {
-              <select
+                const response = await fetch(`/api/cards/${id}/collections`);
-                value={selectedCollection}
+                if (response.ok) {
-                onChange={(e) => setSelectedCollection(e.target.value)}
+                  const data = await response.json();
-                className="w-full p-3 rounded-xl border transition-all duration-200"
+                  setCardCollections(data);
-                style={{
+                }
-                  backgroundColor: 'var(--bg-secondary)',
+              } catch (error) {
-                  borderColor: 'var(--border)',
+                console.error('Error refreshing card collections:', error);
-                  color: 'var(--text-primary)'
+              }
-                }}
+            };
-              >
+            fetchCardCollections();
-                <option value="">Choose a collection...</option>
+          }
-                {collections
+        }}
-                  .filter(collection => collection.game === card.game)
+      />
-                  .map(collection => (
-                    <option key={collection.id} value={collection.id}>
-                      {collection.name}
-                    </option>
-                  ))}
-              </select>
-            </div>
-            <div className="flex gap-3">
-              <button
-                onClick={handleAddToCollection}
-                disabled={!selectedCollection}
-                className={`flex-1 px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
-                  selectedCollection 
-                    ? 'gradient-bg-purple text-white hover:shadow-lg' 
-                    : 'opacity-50 cursor-not-allowed'
-                }`}
-              >
-                Add to Collection
-              </button>
-              <button
-                onClick={() => {
-                  setShowCollectionModal(false);
-                  setSelectedCollection('');
-                }}
-                className="flex-1 px-4 py-2 rounded-xl font-medium border transition-all duration-200"
-                style={{
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-secondary)'
-                }}
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
 
       {/* Deck Modal */}
       {showDeckModal && (

pages/cards.js

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import Layout from '../components/Layout';
 import CardItem from '../components/CardItem';
 import BulkSelectionToolbar from '../components/BulkSelectionToolbar';
+import CollectionSelectionModal from '../components/CollectionSelectionModal';
 
 export default function Cards() {
   const router = useRouter();
@@ -38,6 +39,10 @@ export default function Cards() {
   // Bulk selection state
   const [selectedCards, setSelectedCards] = useState([]);
   const [favoritedCards, setFavoritedCards] = useState(new Set());
+  
+  // Modal states
+  const [showCollectionModal, setShowCollectionModal] = useState(false);
+  const [cardsToAdd, setCardsToAdd] = useState([]);
 
   // Fetch cards from database
   const fetchCards = async (isLoadMore = false) => {
@@ -355,8 +360,8 @@ export default function Cards() {
 
   // Bulk action handlers
   const handleBulkAddToCollection = (cards) => {
-    console.log('Adding to collection:', cards);
+    setCardsToAdd(cards);
-    alert(`Adding ${cards.length} cards to collection (functionality coming soon)`);
+    setShowCollectionModal(true);
   };
 
   const handleBulkAddToDeck = (cards) => {
@@ -409,6 +414,21 @@ export default function Cards() {
     alert(`Bulk delete functionality coming soon for ${cards.length} cards`);
   };
 
+  // Collection modal handlers
+  const handleAddToCollections = (results, selectedCollectionIds, cards) => {
+    const successCount = results.filter(r => r.success).length;
+    const totalAttempts = results.length;
+    
+    if (successCount === totalAttempts) {
+      alert(`Successfully added ${cards.length} card${cards.length !== 1 ? 's' : ''} to ${selectedCollectionIds.length} collection${selectedCollectionIds.length !== 1 ? 's' : ''}!`);
+    } else {
+      alert(`Added ${successCount} out of ${totalAttempts} cards. Some additions may have failed.`);
+    }
+    
+    // Clear selection after successful addition
+    setSelectedCards([]);
+  };
+
   if (loading && cards.length === 0) {
     return (
       <Layout user={user}>
@@ -707,7 +727,7 @@ export default function Cards() {
                   viewMode={viewMode}
                   isSelected={selectedCards.some(c => c.id === card.id)}
                   onToggleSelect={handleToggleSelect}
-                  onAddToCollection={handleBulkAddToCollection}
+                  onAddToCollection={(card) => handleBulkAddToCollection([card])}
                   onAddToDeck={handleBulkAddToDeck}
                   onToggleFavorite={handleToggleFavorite}
                   isFavorited={favoritedCards.has(card.id)}
@@ -763,6 +783,14 @@ export default function Cards() {
         onBulkFavorite={handleBulkFavorite}
         onBulkDelete={handleBulkDelete}
       />
+
+      {/* Collection Selection Modal */}
+      <CollectionSelectionModal
+        isOpen={showCollectionModal}
+        onClose={() => setShowCollectionModal(false)}
+        cards={cardsToAdd}
+        onAddToCollections={handleAddToCollections}
+      />
     </Layout>
   );
 }