Refactor card collection component to implement search filtering and hover preview

src/components/Collection.tsx

@@ -1,17 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { Search, Plus, Loader2, Trash2, CheckCircle, XCircle } from 'lucide-react';
+import { Search, Loader2, Trash2, CheckCircle, XCircle } from 'lucide-react';
 import { Card } from '../types';
-import { searchCards, getUserCollection, addCardToCollection, getCardsByIds } from '../services/api';
+import { getUserCollection, getCardsByIds } from '../services/api';
 import { useAuth } from '../contexts/AuthContext';
-import MagicCard from './MagicCard';
 
 export default function Collection() {
   const { user } = useAuth();
   const [searchQuery, setSearchQuery] = useState('');
-  const [searchResults, setSearchResults] = useState<Card[]>([]);
   const [collection, setCollection] = useState<{ card: Card; quantity: number }[]>([]);
+  const [filteredCollection, setFilteredCollection] = useState<{ card: Card; quantity: number }[]>([]);
   const [isLoadingCollection, setIsLoadingCollection] = useState(true);
-  const [isAddingCard, setIsAddingCard] = useState<string | null>(null);
+  const [hoveredCard, setHoveredCard] = useState<Card | null>(null);
   const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
 
   // Load user's collection from Supabase on mount
@@ -43,6 +42,7 @@ export default function Collection() {
         }));
 
         setCollection(collectionWithCards);
+        setFilteredCollection(collectionWithCards);
       } catch (error) {
         console.error('Error loading collection:', error);
         setSnackbar({ message: 'Failed to load collection', type: 'error' });
@@ -54,131 +54,49 @@ export default function Collection() {
     loadCollection();
   }, [user]);
 
-  const handleSearch = async (e: React.FormEvent) => {
+  // Filter collection based on search query
-    e.preventDefault();
+  useEffect(() => {
-    if (!searchQuery.trim()) return;
+    if (!searchQuery.trim()) {
-
+      setFilteredCollection(collection);
-    try {
-      const cards = await searchCards(searchQuery);
-      setSearchResults(cards);
-    } catch (error) {
-      console.error('Failed to search cards:', error);
-      setSnackbar({ message: 'Failed to search cards', type: 'error' });
-    }
-  };
-
-  const addToCollection = async (card: Card) => {
-    if (!user) {
-      setSnackbar({ message: 'Please log in to add cards to your collection', type: 'error' });
       return;
     }
 
-    try {
+    const query = searchQuery.toLowerCase();
-      setIsAddingCard(card.id);
+    const filtered = collection.filter(({ card }) => {
-
+      return (
-      // Add card to Supabase
+        card.name.toLowerCase().includes(query) ||
-      await addCardToCollection(user.id, card.id, 1);
+        card.type_line?.toLowerCase().includes(query) ||
-
+        card.oracle_text?.toLowerCase().includes(query) ||
-      // Update local state
+        card.colors?.some(color => color.toLowerCase().includes(query))
-      setCollection(prev => {
-        const existing = prev.find(c => c.card.id === card.id);
-        if (existing) {
-          return prev.map(c =>
-            c.card.id === card.id
-              ? { ...c, quantity: c.quantity + 1 }
-              : c
       );
-        }
-        return [...prev, { card, quantity: 1 }];
     });
 
-      setSnackbar({ message: 'Card added to collection!', type: 'success' });
+    setFilteredCollection(filtered);
-    } catch (error) {
+  }, [searchQuery, collection]);
-      console.error('Error adding card to collection:', error);
-      setSnackbar({ message: 'Failed to add card to collection', type: 'error' });
-    } finally {
-      setIsAddingCard(null);
-      setTimeout(() => setSnackbar(null), 3000);
-    }
-  };
 
   return (
     <div className="min-h-screen bg-gray-900 text-white p-6">
       <div className="max-w-7xl mx-auto">
         <h1 className="text-3xl font-bold mb-6">My Collection</h1>
 
-        {/* Search */}
+        {/* Search within collection */}
-        <form onSubmit={handleSearch} className="flex gap-2 mb-8">
+        <div className="mb-8">
-          <div className="relative flex-1">
+          <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Search cards to add..."
+              placeholder="Search your collection by name, type, or text..."
             />
           </div>
-          <button
-            type="submit"
-            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center gap-2"
-          >
-            <Search size={20} />
-            Search
-          </button>
-        </form>
-
-        {/* Search Results */}
-        {searchResults.length > 0 && (
-          <div className="mb-8">
-            <h2 className="text-xl font-semibold mb-4">Search Results</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-              {searchResults.map(card => {
-                const inCollection = collection.find(c => c.card.id === card.id);
-
-                return (
-                  <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
-                    <MagicCard card={card} />
-                    <div className="p-4">
-                      <h3 className="font-bold mb-2">{card.name}</h3>
-                      {inCollection && (
-                        <div className="text-sm text-green-400 mb-2 flex items-center gap-1">
-                          <CheckCircle size={16} />
-                          In collection (x{inCollection.quantity})
         </div>
-                      )}
-                      {card.prices?.usd && (
-                        <div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
-                      )}
-                      <button
-                        onClick={() => addToCollection(card)}
-                        disabled={isAddingCard === card.id}
-                        className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
-                      >
-                        {isAddingCard === card.id ? (
-                          <>
-                            <Loader2 className="animate-spin" size={20} />
-                            Adding...
-                          </>
-                        ) : (
-                          <>
-                            <Plus size={20} />
-                            Add to Collection
-                          </>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
 
         {/* Collection */}
         <div>
           <h2 className="text-xl font-semibold mb-4">
-            My Cards ({collection.length} unique cards, {collection.reduce((acc, c) => acc + c.quantity, 0)} total)
+            {searchQuery ? `Found ${filteredCollection.length} card(s)` : `My Cards (${collection.length} unique, ${collection.reduce((acc, c) => acc + c.quantity, 0)} total)`}
           </h2>
 
           {isLoadingCollection ? (
@@ -188,28 +106,38 @@ export default function Collection() {
           ) : collection.length === 0 ? (
             <div className="text-center py-12 text-gray-400">
               <p className="text-lg mb-2">Your collection is empty</p>
-              <p className="text-sm">Search for cards above to add them to your collection</p>
+              <p className="text-sm">Add cards from the Deck Manager to build your collection</p>
+            </div>
+          ) : filteredCollection.length === 0 ? (
+            <div className="text-center py-12 text-gray-400">
+              <p className="text-lg mb-2">No cards found</p>
+              <p className="text-sm">Try a different search term</p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-3">
-              {collection.map(({ card, quantity }) => (
+              {filteredCollection.map(({ card, quantity }) => (
-                <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
+                <div
-                  <MagicCard card={card} />
+                  key={card.id}
-                  <div className="p-4">
+                  className="relative group cursor-pointer"
-                    <div className="flex justify-between items-center mb-2">
+                  onMouseEnter={() => setHoveredCard(card)}
-                      <h3 className="font-bold">{card.name}</h3>
+                  onMouseLeave={() => setHoveredCard(null)}
-                      <span className="text-sm bg-blue-600 px-2 py-1 rounded font-semibold">
+                >
+                  {/* Small card thumbnail */}
+                  <div className="relative rounded-lg overflow-hidden shadow-lg transition-all group-hover:ring-2 group-hover:ring-blue-500">
+                    <img
+                      src={card.image_uris?.normal || card.image_uris?.small}
+                      alt={card.name}
+                      className="w-full h-auto"
+                    />
+                    {/* Quantity badge */}
+                    <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
                       x{quantity}
-                      </span>
                     </div>
-                    {card.prices?.usd && (
-                      <div className="text-sm text-gray-400">
-                        ${card.prices.usd} each
-                        <span className="text-xs ml-2">
-                          (${(parseFloat(card.prices.usd) * quantity).toFixed(2)} total)
-                        </span>
                   </div>
-                    )}
+
+                  {/* Card name below thumbnail */}
+                  <div className="mt-1 text-xs text-center truncate px-1">
+                    {card.name}
                   </div>
                 </div>
               ))}
@@ -218,12 +146,39 @@ export default function Collection() {
         </div>
       </div>
 
+      {/* Hover Card Preview */}
+      {hoveredCard && (
+        <div className="fixed top-1/2 right-8 transform -translate-y-1/2 z-50 pointer-events-none">
+          <div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
+            <img
+              src={hoveredCard.image_uris?.large || hoveredCard.image_uris?.normal}
+              alt={hoveredCard.name}
+              className="w-full h-auto rounded-lg shadow-lg"
+            />
+            <div className="mt-3 space-y-2">
+              <h3 className="text-xl font-bold">{hoveredCard.name}</h3>
+              <p className="text-sm text-gray-400">{hoveredCard.type_line}</p>
+              {hoveredCard.oracle_text && (
+                <p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
+                  {hoveredCard.oracle_text}
+                </p>
+              )}
+              {hoveredCard.prices?.usd && (
+                <div className="text-sm text-green-400 font-semibold border-t border-gray-700 pt-2">
+                  ${hoveredCard.prices.usd}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Snackbar */}
       {snackbar && (
         <div
           className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transition-all duration-300 ${
             snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
-          } text-white`}
+          } text-white z-50`}
         >
           <div className="flex items-center justify-between">
             <div className="flex items-center">