🚀 Added Bulk Selection System to Cards Page

✨ New Components:
- BulkSelectionToolbar: Floating bottom toolbar with selection count and actions
- CardItem: Modular card component with selection checkboxes and individual actions

🎯 Features:
- Multi-select cards with checkboxes (grid and list view)
- Floating toolbar shows selected count and quick actions
- Primary actions: Add to Collection, Add to Deck, Mark as Owned
- Secondary actions: Add to Favorites, Remove from Owned, Bulk Delete
- Individual card actions: Favorite, Add to Collection, Add to Deck
- Visual feedback: Selected cards get purple border and ring
- Hover effects: Quick actions appear on card hover

🎨 UX Improvements:
- Professional selection states with purple theming
- Smooth animations and transitions
- Responsive design for both grid and list views
- Clear selection button and action confirmations
- Tooltips and visual indicators

Ready for bulk card management! 📦✨

components/BulkSelectionToolbar.js

@@ -0,0 +1,164 @@
+import { useState } from 'react';
+
+export default function BulkSelectionToolbar({ 
+  selectedCards, 
+  onClearSelection, 
+  onAddToCollection, 
+  onAddToDeck, 
+  onMarkAsOwned,
+  onRemoveFromOwned,
+  onBulkFavorite,
+  onBulkDelete 
+}) {
+  const [showActions, setShowActions] = useState(false);
+  const selectedCount = selectedCards.length;
+
+  if (selectedCount === 0) return null;
+
+  const handleAddToCollection = () => {
+    onAddToCollection(selectedCards);
+  };
+
+  const handleAddToDeck = () => {
+    onAddToDeck(selectedCards);
+  };
+
+  const handleMarkAsOwned = () => {
+    onMarkAsOwned(selectedCards);
+  };
+
+  const handleRemoveFromOwned = () => {
+    onRemoveFromOwned(selectedCards);
+  };
+
+  const handleBulkFavorite = () => {
+    onBulkFavorite(selectedCards);
+  };
+
+  const handleBulkDelete = () => {
+    if (confirm(`Are you sure you want to delete ${selectedCount} selected cards?`)) {
+      onBulkDelete(selectedCards);
+    }
+  };
+
+  return (
+    <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
+      <div className="bg-white rounded-xl shadow-2xl border border-gray-200 px-6 py-4 flex items-center space-x-4 min-w-96">
+        {/* Selection Count */}
+        <div className="flex items-center space-x-2">
+          <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center">
+            <span className="text-white text-sm font-bold">{selectedCount}</span>
+          </div>
+          <span className="text-gray-700 font-medium">
+            {selectedCount} card{selectedCount !== 1 ? 's' : ''} selected
+          </span>
+        </div>
+
+        {/* Divider */}
+        <div className="h-6 w-px bg-gray-300"></div>
+
+        {/* Quick Actions */}
+        <div className="flex items-center space-x-2">
+          <button
+            onClick={handleAddToCollection}
+            className="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium flex items-center space-x-1 transition-colors"
+          >
+            <svg className="w-4 h-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>
+            <span>Collection</span>
+          </button>
+
+          <button
+            onClick={handleAddToDeck}
+            className="px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium flex items-center space-x-1 transition-colors"
+          >
+            <svg className="w-4 h-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>
+            <span>Deck</span>
+          </button>
+
+          <button
+            onClick={handleMarkAsOwned}
+            className="px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium flex items-center space-x-1 transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            <span>Own</span>
+          </button>
+        </div>
+
+        {/* More Actions Button */}
+        <div className="relative">
+          <button
+            onClick={() => setShowActions(!showActions)}
+            className="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+            </svg>
+          </button>
+
+          {/* Dropdown Actions */}
+          {showActions && (
+            <div className="absolute bottom-full right-0 mb-2 bg-white rounded-lg shadow-xl border border-gray-200 py-2 min-w-48">
+              <button
+                onClick={() => {
+                  handleBulkFavorite();
+                  setShowActions(false);
+                }}
+                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center space-x-2"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                </svg>
+                <span>Add to Favorites</span>
+              </button>
+
+              <button
+                onClick={() => {
+                  handleRemoveFromOwned();
+                  setShowActions(false);
+                }}
+                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center space-x-2"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                <span>Remove from Owned</span>
+              </button>
+
+              <div className="border-t border-gray-200 my-1"></div>
+
+              <button
+                onClick={() => {
+                  handleBulkDelete();
+                  setShowActions(false);
+                }}
+                className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center space-x-2"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                <span>Delete Selected</span>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Clear Selection */}
+        <button
+          onClick={onClearSelection}
+          className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          title="Clear selection"
+        >
+          <svg className="w-5 h-5" 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>
+    </div>
+  );
+} 

components/CardItem.js

@@ -0,0 +1,237 @@
+import { useState } from 'react';
+
+export default function CardItem({ 
+  card, 
+  viewMode = 'grid', 
+  isSelected = false, 
+  onToggleSelect,
+  onAddToCollection,
+  onAddToDeck,
+  onToggleFavorite,
+  isFavorited = false
+}) {
+  const [imageError, setImageError] = useState(false);
+
+  const handleSelectChange = (e) => {
+    e.stopPropagation();
+    onToggleSelect(card);
+  };
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  if (viewMode === 'list') {
+    return (
+      <div className={`flex items-center p-4 border rounded-lg transition-all duration-200 ${
+        isSelected 
+          ? 'border-purple-500 bg-purple-50 shadow-md' 
+          : 'border-gray-200 hover:border-gray-300 hover:shadow-sm'
+      }`}>
+        {/* Selection Checkbox */}
+        <div className="flex-shrink-0 mr-4">
+          <input
+            type="checkbox"
+            checked={isSelected}
+            onChange={handleSelectChange}
+            className="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500 focus:ring-2"
+          />
+        </div>
+
+        {/* Card Image */}
+        <div className="flex-shrink-0 mr-4">
+          <div className="w-16 h-22 bg-gray-200 rounded-lg overflow-hidden">
+            {!imageError ? (
+              <img
+                src={card.image_url}
+                alt={card.name}
+                className="w-full h-full object-cover"
+                onError={handleImageError}
+              />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
+                No Image
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Card Info */}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-semibold text-gray-900 truncate">{card.name}</h3>
+          <p className="text-sm text-gray-600">{card.set_name} • {card.rarity}</p>
+          <p className="text-sm text-gray-500">{card.card_type}</p>
+        </div>
+
+        {/* Game Badge */}
+        <div className="flex-shrink-0 mx-4">
+          <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
+            {card.game}
+          </span>
+        </div>
+
+        {/* Price */}
+        <div className="flex-shrink-0 mx-4">
+          <span className="text-lg font-bold text-green-600">
+            ${card.market_price}
+          </span>
+        </div>
+
+        {/* Actions */}
+        <div className="flex-shrink-0 flex items-center space-x-2">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleFavorite(card);
+            }}
+            className={`p-2 rounded-lg transition-colors ${
+              isFavorited 
+                ? 'text-red-500 hover:text-red-600' 
+                : 'text-gray-400 hover:text-red-500'
+            }`}
+          >
+            <svg className="w-5 h-5" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+            </svg>
+          </button>
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onAddToCollection(card);
+            }}
+            className="p-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition-colors"
+            title="Add to Collection"
+          >
+            <svg className="w-5 h-5" 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>
+          </button>
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onAddToDeck(card);
+            }}
+            className="p-2 text-green-600 hover:text-green-700 hover:bg-green-50 rounded-lg transition-colors"
+            title="Add to Deck"
+          >
+            <svg className="w-5 h-5" 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>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Grid view
+  return (
+    <div className={`relative group bg-white rounded-xl border transition-all duration-200 overflow-hidden ${
+      isSelected 
+        ? 'border-purple-500 shadow-lg ring-2 ring-purple-200' 
+        : 'border-gray-200 hover:border-gray-300 hover:shadow-md'
+    }`}>
+      {/* Selection Checkbox */}
+      <div className="absolute top-3 left-3 z-10">
+        <input
+          type="checkbox"
+          checked={isSelected}
+          onChange={handleSelectChange}
+          className="w-4 h-4 text-purple-600 bg-white border-gray-300 rounded focus:ring-purple-500 focus:ring-2 shadow-sm"
+        />
+      </div>
+
+      {/* Favorite Button */}
+      <div className="absolute top-3 right-3 z-10">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleFavorite(card);
+          }}
+          className={`p-2 rounded-full transition-all duration-200 ${
+            isFavorited 
+              ? 'text-red-500 bg-white shadow-sm' 
+              : 'text-gray-400 bg-white/80 hover:text-red-500 hover:bg-white shadow-sm opacity-0 group-hover:opacity-100'
+          }`}
+        >
+          <svg className="w-4 h-4" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Card Image */}
+      <div className="aspect-[2.5/3.5] bg-gray-200 overflow-hidden">
+        {!imageError ? (
+          <img
+            src={card.image_url}
+            alt={card.name}
+            className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
+            onError={handleImageError}
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <div className="text-center">
+              <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+              <p className="text-xs">No Image</p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Card Info */}
+      <div className="p-4">
+        <div className="flex items-start justify-between mb-2">
+          <h3 className="font-semibold text-gray-900 text-sm leading-tight line-clamp-2 flex-1 mr-2">
+            {card.name}
+          </h3>
+          <span className="text-lg font-bold text-green-600 flex-shrink-0">
+            ${card.market_price}
+          </span>
+        </div>
+
+        <p className="text-xs text-gray-600 mb-1">{card.set_name}</p>
+        <p className="text-xs text-gray-500 mb-3">{card.rarity} • {card.card_type}</p>
+
+        {/* Game Badge */}
+        <div className="flex items-center justify-between">
+          <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
+            {card.game}
+          </span>
+
+          {/* Quick Actions */}
+          <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onAddToCollection(card);
+              }}
+              className="p-1.5 text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-md transition-colors"
+              title="Add to Collection"
+            >
+              <svg className="w-4 h-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>
+            </button>
+
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onAddToDeck(card);
+              }}
+              className="p-1.5 text-green-600 hover:text-green-700 hover:bg-green-50 rounded-md transition-colors"
+              title="Add to Deck"
+            >
+              <svg className="w-4 h-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>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 

pages/cards.js

@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 import Layout from '../components/Layout';
+import CardItem from '../components/CardItem';
+import BulkSelectionToolbar from '../components/BulkSelectionToolbar';
 
 export default function Cards() {
   const router = useRouter();
@@ -33,6 +35,10 @@ export default function Cards() {
   const loadingMoreRef = useRef(false);
   const hasMoreRef = useRef(true);
   
+  // Bulk selection state
+  const [selectedCards, setSelectedCards] = useState([]);
+  const [favoritedCards, setFavoritedCards] = useState(new Set());
+
   // Fetch cards from database
   const fetchCards = async (isLoadMore = false) => {
     try {
@@ -298,7 +304,110 @@ export default function Cards() {
     return rarityOption ? rarityOption.label : rarity;
   };
 
+  // Bulk selection handlers
+  const handleToggleSelect = (card) => {
+    setSelectedCards(prev => {
+      const isSelected = prev.some(c => c.id === card.id);
+      if (isSelected) {
+        return prev.filter(c => c.id !== card.id);
+      } else {
+        return [...prev, card];
+      }
+    });
+  };
 
+  const handleClearSelection = () => {
+    setSelectedCards([]);
+  };
+
+  const handleToggleFavorite = async (card) => {
+    try {
+      const isFavorited = favoritedCards.has(card.id);
+      const method = isFavorited ? 'DELETE' : 'POST';
+      
+      const response = await fetch('/api/favorites', {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+        },
+        body: JSON.stringify({
+          itemType: 'card',
+          itemId: card.id
+        })
+      });
+
+      if (response.ok) {
+        setFavoritedCards(prev => {
+          const newSet = new Set(prev);
+          if (isFavorited) {
+            newSet.delete(card.id);
+          } else {
+            newSet.add(card.id);
+          }
+          return newSet;
+        });
+      }
+    } catch (error) {
+      console.error('Error toggling favorite:', error);
+    }
+  };
+
+  // Bulk action handlers
+  const handleBulkAddToCollection = (cards) => {
+    console.log('Adding to collection:', cards);
+    alert(`Adding ${cards.length} cards to collection (functionality coming soon)`);
+  };
+
+  const handleBulkAddToDeck = (cards) => {
+    console.log('Adding to deck:', cards);
+    alert(`Adding ${cards.length} cards to deck (functionality coming soon)`);
+  };
+
+  const handleBulkMarkAsOwned = (cards) => {
+    console.log('Marking as owned:', cards);
+    alert(`Marking ${cards.length} cards as owned (functionality coming soon)`);
+  };
+
+  const handleBulkRemoveFromOwned = (cards) => {
+    console.log('Removing from owned:', cards);
+    alert(`Removing ${cards.length} cards from owned (functionality coming soon)`);
+  };
+
+  const handleBulkFavorite = async (cards) => {
+    try {
+      for (const card of cards) {
+        if (!favoritedCards.has(card.id)) {
+          await fetch('/api/favorites', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+            },
+            body: JSON.stringify({
+              itemType: 'card',
+              itemId: card.id
+            })
+          });
+        }
+      }
+      
+      setFavoritedCards(prev => {
+        const newSet = new Set(prev);
+        cards.forEach(card => newSet.add(card.id));
+        return newSet;
+      });
+      
+      alert(`Added ${cards.length} cards to favorites`);
+    } catch (error) {
+      console.error('Error bulk favoriting:', error);
+    }
+  };
+
+  const handleBulkDelete = (cards) => {
+    console.log('Bulk delete:', cards);
+    alert(`Bulk delete functionality coming soon for ${cards.length} cards`);
+  };
 
   if (loading && cards.length === 0) {
     return (
@@ -590,18 +699,19 @@ export default function Cards() {
           </div>
         ) : (
           <>
-            <div className={viewMode === 'grid' ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-6 p-6' : 'space-y-4'}>
+            <div className={viewMode === 'grid' ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-6 p-6' : 'space-y-4 p-6'}>
               {cards.map(card => (
-                <div key={card.id} onClick={() => router.push(`/card/${card.id}`)} className="flex justify-center">
+                <CardItem
-                  <div className="w-full max-w-[200px]">
+                  key={card.id}
-                    <Card3D 
                   card={card}
                   viewMode={viewMode}
-                      getRarityLabel={getRarityLabel}
+                  isSelected={selectedCards.some(c => c.id === card.id)}
-                      getRarityColor={getRarityColor}
+                  onToggleSelect={handleToggleSelect}
+                  onAddToCollection={handleBulkAddToCollection}
+                  onAddToDeck={handleBulkAddToDeck}
+                  onToggleFavorite={handleToggleFavorite}
+                  isFavorited={favoritedCards.has(card.id)}
                 />
-                  </div>
-                </div>
               ))}
             </div>
             
@@ -641,6 +751,18 @@ export default function Cards() {
           </>
         )}
       </div>
+
+      {/* Bulk Selection Toolbar */}
+      <BulkSelectionToolbar
+        selectedCards={selectedCards}
+        onClearSelection={handleClearSelection}
+        onAddToCollection={handleBulkAddToCollection}
+        onAddToDeck={handleBulkAddToDeck}
+        onMarkAsOwned={handleBulkMarkAsOwned}
+        onRemoveFromOwned={handleBulkRemoveFromOwned}
+        onBulkFavorite={handleBulkFavorite}
+        onBulkDelete={handleBulkDelete}
+      />
     </Layout>
   );
 }