add friend and request filtering in community view

.claude/settings.local.json

@@ -1,6 +1,15 @@
 {
+  "permissions": {
+    "allow": [
+      "mcp__supabase__apply_migration",
+      "mcp__supabase__list_tables",
+      "mcp__supabase__execute_sql",
+      "Bash(npm run build:*)",
+      "mcp__supabase__get_advisors"
+    ]
+  },
+  "enableAllProjectMcpServers": true,
   "enabledMcpjsonServers": [
     "supabase"
-  ],
-  "enableAllProjectMcpServers": true
+  ]
 }

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-ca84f546'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.obrcsn1e2cs"
+    "revision": "0.vigoqq958cg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/App.tsx

@@ -1,22 +1,20 @@
 import React, { useState } from 'react';
-    import DeckManager from './components/DeckManager';
-    import DeckList from './components/DeckList';
-    import LoginForm from './components/LoginForm';
-    import Navigation from './components/Navigation';
-    import Collection from './components/Collection';
-    import DeckEditor from './components/DeckEditor';
-    import Profile from './components/Profile';
-    import CardSearch from './components/CardSearch';
-    import LifeCounter from './components/LifeCounter';
-    import Friends from './components/Friends';
-    import Trades from './components/Trades';
-    import Community from './components/Community';
-    import PWAInstallPrompt from './components/PWAInstallPrompt';
-    import { AuthProvider, useAuth } from './contexts/AuthContext';
+import DeckManager from './components/DeckManager';
+import DeckList from './components/DeckList';
+import LoginForm from './components/LoginForm';
+import Navigation from './components/Navigation';
+import Collection from './components/Collection';
+import DeckEditor from './components/DeckEditor';
+import CardSearch from './components/CardSearch';
+import LifeCounter from './components/LifeCounter';
+import Community from './components/Community';
+import PWAInstallPrompt from './components/PWAInstallPrompt';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import { ToastProvider } from './contexts/ToastContext';
 
-    type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter' | 'friends' | 'trades' | 'community';
+type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'search' | 'life-counter' | 'community';
 
-    function AppContent() {
+function AppContent() {
   const [currentPage, setCurrentPage] = useState<Page>('home');
   const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null);
   const { user, loading } = useAuth();
@@ -42,7 +40,7 @@ import React, { useState } from 'react';
     switch (currentPage) {
       case 'home':
         return (
-              <div className="bg-gray-900 text-white p-3 sm:p-6 animate-fade-in">
+          <div className="relative bg-gray-900 text-white p-3 sm:p-6 animate-fade-in md:min-h-screen">
             <div className="max-w-7xl mx-auto">
               <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6 animate-slide-in-left">My Decks</h1>
               <DeckList
@@ -66,16 +64,10 @@ import React, { useState } from 'react';
         ) : null;
       case 'collection':
         return <Collection />;
-          case 'profile':
-            return <Profile />;
       case 'search':
         return <CardSearch />;
       case 'life-counter':
         return <LifeCounter />;
-          case 'friends':
-            return <Friends />;
-          case 'trades':
-            return <Trades />;
       case 'community':
         return <Community />;
       case 'login':
@@ -86,20 +78,26 @@ import React, { useState } from 'react';
   };
 
   return (
-        <div className="min-h-screen bg-gray-900">
+    <div className="min-h-screen bg-gray-900 flex flex-col">
       <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
+      <main className="relative flex-1 overflow-y-auto">
+        <div className="relative min-h-full md:min-h-0 pt-0 md:pt-16 pb-20 md:pb-0">
           {renderPage()}
+        </div>
+      </main>
       <PWAInstallPrompt />
     </div>
   );
-    }
+}
 
-    function App() {
+function App() {
   return (
     <AuthProvider>
+      <ToastProvider>
         <AppContent />
+      </ToastProvider>
     </AuthProvider>
   );
-    }
+}
 
-    export default App;
+export default App;

src/components/CardSearch.tsx

@@ -94,6 +94,14 @@ const CardSearch = () => {
     return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
   };
 
+  // Get card art crop for current face
+  const getCardArtCrop = (card: Card, faceIndex: number = 0) => {
+    if (isDoubleFaced(card) && card.card_faces) {
+      return card.card_faces[faceIndex]?.image_uris?.art_crop || card.card_faces[faceIndex]?.image_uris?.normal;
+    }
+    return card.image_uris?.art_crop || card.image_uris?.normal || card.card_faces?.[0]?.image_uris?.art_crop;
+  };
+
   // Add card to collection
   const handleAddCardToCollection = async (cardId: string) => {
     if (!user) {
@@ -193,7 +201,7 @@ const CardSearch = () => {
   };
 
   return (
-    <div className="bg-gray-900 text-white p-3 sm:p-6">
+    <div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
         <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">Card Search</h1>
         <form onSubmit={handleSearch} className="mb-8 space-y-4">
@@ -617,7 +625,75 @@ const CardSearch = () => {
         )}
 
         {searchResults && searchResults.length > 0 && (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
+          <>
+            {/* Mobile: Horizontal list layout */}
+            <div className="flex flex-col gap-2 sm:hidden">
+              {searchResults.map((card) => {
+                const currentFaceIndex = getCurrentFaceIndex(card.id);
+                const isMultiFaced = isDoubleFaced(card);
+                const inCollection = userCollection.get(card.id) || 0;
+                const isAddingThisCard = addingCardId === card.id;
+
+                const displayName = isMultiFaced && card.card_faces
+                  ? card.card_faces[currentFaceIndex]?.name || card.name
+                  : card.name;
+
+                return (
+                  <div key={card.id} className="flex bg-gray-800 rounded-lg overflow-hidden">
+                    {/* Card art crop */}
+                    <div className="relative w-16 h-16 flex-shrink-0">
+                      <img
+                        src={getCardArtCrop(card, currentFaceIndex)}
+                        alt={displayName}
+                        className="w-full h-full object-cover rounded-l-lg"
+                      />
+                      {isMultiFaced && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleCardFace(card.id, card.card_faces!.length);
+                          }}
+                          className="absolute bottom-0.5 right-0.5 bg-purple-600 text-white p-0.5 rounded-full"
+                        >
+                          <RefreshCw size={10} />
+                        </button>
+                      )}
+                    </div>
+                    {/* Info */}
+                    <div className="flex-1 p-2 flex flex-col justify-center min-w-0">
+                      <h3 className="font-bold text-sm truncate">{displayName}</h3>
+                      <div className="flex items-center gap-2 text-xs text-gray-400">
+                        {card.prices?.usd && <span>${card.prices.usd}</span>}
+                        {inCollection > 0 && (
+                          <span className="text-green-400 flex items-center gap-0.5">
+                            <CheckCircle size={10} />
+                            x{inCollection}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    {/* Action button */}
+                    <div className="flex items-center p-2">
+                      <button
+                        onClick={() => handleAddCardToCollection(card.id)}
+                        disabled={isAddingThisCard}
+                        className="p-2.5 bg-green-600 active:bg-green-700 disabled:bg-gray-600 rounded-lg"
+                        title="Add to collection"
+                      >
+                        {isAddingThisCard ? (
+                          <Loader2 className="animate-spin" size={18} />
+                        ) : (
+                          <PackagePlus size={18} />
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Desktop: Grid layout */}
+            <div className="hidden sm:grid sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
               {searchResults.map((card) => {
                 const currentFaceIndex = getCurrentFaceIndex(card.id);
                 const isMultiFaced = isDoubleFaced(card);
@@ -652,40 +728,35 @@ const CardSearch = () => {
                           <RefreshCw size={16} />
                         </button>
                       )}
-                  </div>
-                  <div className="p-4">
-                    <div className="flex items-center justify-between mb-2">
-                      <h3 className="font-bold">{displayName}</h3>
                       {inCollection > 0 && (
-                        <span className="text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
+                        <span className="absolute top-1 right-1 text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
                           <CheckCircle size={12} />
                           x{inCollection}
                         </span>
                       )}
                     </div>
-                    <p className="text-gray-400 text-sm mb-3">
+                    <div className="p-3">
+                      <h3 className="font-bold text-sm truncate mb-1">{displayName}</h3>
+                      <p className="text-gray-400 text-xs truncate mb-2">
                         {isMultiFaced && card.card_faces
                           ? card.card_faces[currentFaceIndex]?.type_line || card.type_line
                           : card.type_line}
                       </p>
                       {card.prices?.usd && (
-                      <div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
+                        <div className="text-xs text-gray-400 mb-2">${card.prices.usd}</div>
                       )}
                       <button
                         onClick={() => handleAddCardToCollection(card.id)}
                         disabled={isAddingThisCard}
-                      className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
+                        className="w-full px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 text-sm"
                         title="Add to collection"
                       >
                         {isAddingThisCard ? (
-                        <>
-                          <Loader2 className="animate-spin" size={20} />
-                          Adding...
-                        </>
+                          <Loader2 className="animate-spin" size={16} />
                         ) : (
                           <>
-                          <PackagePlus size={20} />
-                          Add to Collection
+                            <PackagePlus size={16} />
+                            Add
                           </>
                         )}
                       </button>
@@ -694,6 +765,7 @@ const CardSearch = () => {
                 );
               })}
             </div>
+          </>
         )}
       </div>
 
@@ -702,7 +774,7 @@ const CardSearch = () => {
         <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 z-50`}
+          } text-white z-[140]`}
         >
           <div className="flex items-center justify-between">
             <div className="flex items-center">

src/components/Collection.tsx

@@ -189,7 +189,7 @@ export default function Collection() {
   };
 
   return (
-    <div className="bg-gray-900 text-white p-3 sm:p-6">
+    <div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
         <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">My Collection</h1>
 
@@ -228,7 +228,7 @@ export default function Collection() {
               <p className="text-sm">Try a different search term</p>
             </div>
           ) : (
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-9 gap-2 sm:gap-3">
+            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-1.5 sm:gap-2">
               {filteredCollection.map(({ card, quantity }) => {
                 const currentFaceIndex = getCurrentFaceIndex(card.id);
                 const isMultiFaced = isDoubleFaced(card);
@@ -295,7 +295,7 @@ export default function Collection() {
         const displayOracleText = currentFace?.oracle_text || hoveredCard.oracle_text;
 
         return (
-          <div className="hidden lg:block fixed top-1/2 right-8 transform -translate-y-1/2 z-40 pointer-events-none">
+          <div className="hidden lg:block fixed top-1/2 right-8 transform -translate-y-1/2 z-30 pointer-events-none">
             <div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
               <div className="relative">
                 <img
@@ -344,16 +344,16 @@ export default function Collection() {
           <>
             {/* Backdrop */}
             <div
-              className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300"
+              className="fixed inset-0 bg-black bg-opacity-50 z-[110] transition-opacity duration-300"
               onClick={() => setSelectedCard(null)}
             />
 
             {/* Sliding Panel */}
-            <div className="fixed top-0 right-0 h-full w-full md:w-96 bg-gray-800 shadow-2xl z-50 overflow-y-auto animate-slide-in-right">
+            <div className="fixed top-0 right-0 h-full w-full md:w-96 bg-gray-800 shadow-2xl z-[120] overflow-y-auto animate-slide-in-right">
               {/* Close button - fixed position, stays visible when scrolling */}
               <button
                 onClick={() => setSelectedCard(null)}
-                className="fixed top-4 right-4 bg-gray-700 hover:bg-gray-600 text-white p-2 md:p-1.5 rounded-full transition-colors z-[60] shadow-lg"
+                className="fixed top-4 right-4 bg-gray-700 hover:bg-gray-600 text-white p-2 md:p-1.5 rounded-full transition-colors z-[130] shadow-lg"
                 aria-label="Close"
               >
                 <X size={24} className="md:w-5 md:h-5" />
@@ -362,7 +362,7 @@ export default function Collection() {
               <div className="p-4 sm:p-6">
 
                 {/* Card Image */}
-                <div className="relative mb-4">
+                <div className="relative mb-4 max-w-sm mx-auto">
                   <img
                     src={getCardLargeImageUri(selectedCard.card, currentFaceIndex)}
                     alt={displayName}
@@ -478,7 +478,7 @@ export default function Collection() {
         <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 z-50`}
+          } text-white z-[140]`}
         >
           <div className="flex items-center justify-between">
             <div className="flex items-center">

src/components/DeckBuilder.tsx

@@ -31,7 +31,7 @@ export default function DeckBuilder({
                 initial={{ x: "100%" }}
                 animate={{ x: isOpen ? "0%" : "100%" }}
                 transition={{ type: "spring", stiffness: 300, damping: 30 }}
-                className="fixed top-0 right-0 w-4/5 h-full bg-gray-800 p-6 shadow-lg md:static md:w-full md:h-auto md:p-6 md:shadow-none z-50"
+                className="fixed top-0 right-0 w-4/5 h-full bg-gray-800 p-6 shadow-lg md:static md:w-full md:h-auto md:p-6 md:shadow-none z-[110]"
             >
                 {/* Bouton de fermeture */}
                 <button

src/components/DeckCard.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AlertTriangle, Check, Edit } from 'lucide-react';
 import { Deck } from '../types';
-import { validateDeck } from '../utils/deckValidation';
 
 interface DeckCardProps {
   deck: Deck;
@@ -9,16 +8,12 @@ interface DeckCardProps {
 }
 
 export default function DeckCard({ deck, onEdit }: DeckCardProps) {
+  // Use pre-calculated validation data
+  const isValid = deck.isValid ?? true;
+  const validationErrors = deck.validationErrors || [];
 
-  if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
-    console.log("deck", deck.name);
-    console.log("cardEntities", deck.cards);
-  }
-
-  const validation = validateDeck(deck);
-  const commander = deck.format === 'commander' ? deck.cards.find(card => 
-    card.is_commander
-  )?.card : null;
+  // Use cover card (already loaded)
+  const coverImage = deck.coverCard?.image_uris?.normal;
 
   return (
     <div
@@ -27,11 +22,17 @@ export default function DeckCard({ deck, onEdit }: DeckCardProps) {
     >
       {/* Full Card Art */}
       <div className="relative aspect-[5/7] overflow-hidden">
+        {coverImage ? (
           <img
-          src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
-          alt={commander?.name || deck.cards[0]?.card.name}
+            src={coverImage}
+            alt={deck.coverCard?.name || deck.name}
             className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
           />
+        ) : (
+          <div className="w-full h-full bg-gray-700 flex items-center justify-center text-gray-500">
+            No Cover
+          </div>
+        )}
         {/* Overlay for text readability */}
         <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/60 to-transparent" />
 
@@ -39,21 +40,21 @@ export default function DeckCard({ deck, onEdit }: DeckCardProps) {
         <div className="absolute bottom-0 left-0 right-0 p-3">
           <div className="flex items-start justify-between mb-1">
             <h3 className="text-base sm:text-lg font-bold text-white line-clamp-2 flex-1">{deck.name}</h3>
-            {validation.isValid ? (
+            {isValid ? (
               <Check size={16} className="text-green-400 ml-2 flex-shrink-0" />
             ) : (
-              <AlertTriangle size={16} className="text-yellow-400 ml-2 flex-shrink-0" title={validation.errors.join(', ')} />
+              <AlertTriangle size={16} className="text-yellow-400 ml-2 flex-shrink-0" title={validationErrors.join(', ')} />
             )}
           </div>
 
           <div className="flex items-center justify-between text-xs text-gray-300 mb-2">
             <span className="capitalize">{deck.format}</span>
-            <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
+            <span>{deck.cardCount || 0} cards</span>
           </div>
 
-          {commander && (
+          {deck.format === 'commander' && deck.coverCard && (
             <div className="text-xs text-blue-300 mb-2 truncate">
-              <span className="font-semibold">Commander:</span> {commander.name}
+              <span className="font-semibold">Commander:</span> {deck.coverCard.name}
             </div>
           )}
 

src/components/DeckEditor.tsx

@@ -42,6 +42,7 @@ export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
         const cards = cardEntities.map(entity => ({
           card: scryfallCards.find(c => c.id === entity.card_id) as Card,
           quantity: entity.quantity,
+          is_commander: entity.is_commander,
         }));
 
         setDeck({
@@ -62,7 +63,7 @@ export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-900 text-white p-6 flex items-center justify-center">
+      <div className="relative md:min-h-screen bg-gray-900 text-white p-6 flex items-center justify-center">
         <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
       </div>
     );
@@ -70,7 +71,7 @@ export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
 
   if (!deck) {
     return (
-      <div className="min-h-screen bg-gray-900 text-white p-6">
+      <div className="relative md:min-h-screen bg-gray-900 text-white p-6">
         <div className="max-w-7xl mx-auto">
           <div className="bg-red-500/10 border border-red-500 rounded-lg p-4">
             <h2 className="text-xl font-bold text-red-500">Error</h2>

src/components/DeckList.tsx

@@ -4,6 +4,7 @@ import { Deck } from '../types';
 import { supabase } from "../lib/supabase";
 import DeckCard from "./DeckCard";
 import { PlusCircle } from 'lucide-react';
+import MigrateDeckButton from "./MigrateDeckButton.tsx";
 
 interface DeckListProps {
   onDeckEdit?: (deckId: string) => void;
@@ -23,58 +24,36 @@ const DeckList = ({ onDeckEdit, onCreateDeck }: DeckListProps) => {
         return;
       }
 
-      const decksWithCards = await Promise.all(decksData.map(async (deck) => {
-        const { data: cardEntities, error: cardsError } = await supabase
-          .from('deck_cards')
-          .select('*')
-          .eq('deck_id', deck.id);
+      // Get all unique cover card IDs
+      const coverCardIds = decksData
+        .map(deck => deck.cover_card_id)
+        .filter(Boolean);
 
+      // Fetch only cover cards (much lighter!)
+      const coverCards = coverCardIds.length > 0
+        ? await getCardsByIds(coverCardIds)
+        : [];
 
-
-        if (cardsError) {
-          console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
-          return { ...deck, cards: [] };
-        }
-
-        const cardIds = cardEntities.map((entity) => entity.card_id);
-        const uniqueCardIds = [...new Set(cardIds)];
-
-        if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
-          console.log("uniqueCardIds", uniqueCardIds);
-        }
-
-
-
-        try {
-          const scryfallCards = await getCardsByIds(uniqueCardIds);
-
-          if (!scryfallCards) {
-            console.error("scryfallCards is undefined after getCardsByIds");
-            return { ...deck, cards: [] };
-          }
-
-          const cards = cardEntities.map((entity) => {
-            const card = scryfallCards.find((c) => c.id === entity.card_id);
-            return {
-              card,
-              quantity: entity.quantity,
-              is_commander: entity.is_commander,
-            };
-          });
+      // Map decks with their cover cards
+      const decksWithCoverCards = decksData.map(deck => {
+        const coverCard = deck.cover_card_id
+          ? coverCards.find(c => c.id === deck.cover_card_id)
+          : null;
 
         return {
           ...deck,
-            cards,
+          cards: [], // Empty array, we don't load all cards here
+          coverCard: coverCard || null,
           createdAt: new Date(deck.created_at),
           updatedAt: new Date(deck.updated_at),
+          validationErrors: deck.validation_errors || [],
+          isValid: deck.is_valid ?? true,
+          cardCount: deck.card_count || 0,
+          coverCardId: deck.cover_card_id,
         };
-        } catch (error) {
-          console.error("Error fetching cards from Scryfall:", error);
-          return { ...deck, cards: [] };
-        }
-      }));
+      });
 
-      setDecks(decksWithCards);
+      setDecks(decksWithCoverCards);
       setLoading(false);
     };
 

src/components/DeckManager.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Minus, Search, Save, Trash2, Loader2, CheckCircle, XCircle, AlertCircle, PackagePlus, RefreshCw } from 'lucide-react';
+import { Plus, Minus, Search, Save, Trash2, Loader2, CheckCircle, XCircle, AlertCircle, PackagePlus, RefreshCw, X } from 'lucide-react';
 import { Card, Deck } from '../types';
 import { searchCards, getUserCollection, addCardToCollection, addMultipleCardsToCollection } from '../services/api';
 import { useAuth } from '../contexts/AuthContext';
 import { supabase } from '../lib/supabase';
 import { validateDeck } from '../utils/deckValidation';
 import MagicCard from './MagicCard';
-import { ManaCost } from './ManaCost';
+import { ManaCost, ManaSymbol } from './ManaCost';
 
 interface DeckManagerProps {
   initialDeck?: Deck;
@@ -26,7 +26,8 @@ interface DeckManagerProps {
 
 const suggestLandCountAndDistribution = (
   cards: { card; quantity: number }[],
-  format: string
+  format: string,
+  commanderColors: string[] = []
 ) => {
   const formatRules = {
     standard: { minCards: 60 },
@@ -64,6 +65,16 @@ const suggestLandCountAndDistribution = (
     }
   });
 
+  // For commander, filter out colors not in commander's color identity
+  if (format === 'commander' && commanderColors.length > 0) {
+    for (const color in colorCounts) {
+      if (!commanderColors.includes(color)) {
+        totalColorSymbols -= colorCounts[color as keyof typeof colorCounts];
+        colorCounts[color as keyof typeof colorCounts] = 0;
+      }
+    }
+  }
+
   const landDistribution: { [key: string]: number } = {};
   for (const color in colorCounts) {
     const proportion =
@@ -96,10 +107,25 @@ const suggestLandCountAndDistribution = (
   return { landCount: landsToAdd, landDistribution };
 };
 
+// Get commander color identity
+const getCommanderColors = (commander: Card | null): string[] => {
+  if (!commander) return [];
+  return commander.colors || [];
+};
+
+// Check if a card's colors are valid for the commander
+const isCardValidForCommander = (card: Card, commanderColors: string[]): boolean => {
+  if (commanderColors.length === 0) return true; // No commander restriction
+  const cardColors = card.colors || [];
+  // Every color in the card must be in the commander's colors
+  return cardColors.every(color => commanderColors.includes(color));
+};
+
 export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   const [currentDeckId, setCurrentDeckId] = useState<string | null>(initialDeck?.id || null);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<Card[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
   const [selectedCards, setSelectedCards] = useState<{
     card: Card;
     quantity: number;
@@ -123,6 +149,9 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   const [addingCardId, setAddingCardId] = useState<string | null>(null);
   const [isAddingAll, setIsAddingAll] = useState(false);
   const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
+  const [hoveredCard, setHoveredCard] = useState<Card | null>(null);
+  const [hoverSource, setHoverSource] = useState<'search' | 'deck' | null>(null);
+  const [selectedCard, setSelectedCard] = useState<Card | null>(null);
 
   // Load user collection on component mount
   useEffect(() => {
@@ -171,6 +200,13 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
     return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
   };
 
+  const getCardLargeImageUri = (card: Card, faceIndex: number = 0) => {
+    if (isDoubleFaced(card) && card.card_faces) {
+      return card.card_faces[faceIndex]?.image_uris?.large || card.card_faces[faceIndex]?.image_uris?.normal;
+    }
+    return card.image_uris?.large || card.image_uris?.normal;
+  };
+
   // Helper function to check if a card is in the collection
   const isCardInCollection = (cardId: string, requiredQuantity: number = 1): boolean => {
     const ownedQuantity = userCollection.get(cardId) || 0;
@@ -262,11 +298,16 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
     e.preventDefault();
     if (!searchQuery.trim()) return;
 
+    setIsSearching(true);
     try {
       const cards = await searchCards(searchQuery);
-      setSearchResults(cards);
+      setSearchResults(cards || []);
     } catch (error) {
       console.error('Failed to search cards:', error);
+      setSearchResults([]);
+      setSnackbar({ message: 'Failed to search cards', type: 'error' });
+    } finally {
+      setIsSearching(false);
     }
   };
 
@@ -323,6 +364,17 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
         updatedAt: new Date(),
       };
 
+      // Calculate validation for storage
+      const validation = validateDeck(deckToSave);
+
+      // Determine cover card (commander or first card)
+      const commanderCard = deckFormat === 'commander' ? selectedCards.find(c => c.card.id === commander?.id) : null;
+      const coverCard = commanderCard?.card || selectedCards[0]?.card;
+      const coverCardId = coverCard?.id || null;
+
+      // Calculate total card count
+      const totalCardCount = selectedCards.reduce((acc, curr) => acc + curr.quantity, 0);
+
       const deckData = {
         id: deckToSave.id,
         name: deckToSave.name,
@@ -330,6 +382,10 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
         user_id: deckToSave.userId,
         created_at: deckToSave.createdAt,
         updated_at: deckToSave.updatedAt,
+        cover_card_id: coverCardId,
+        validation_errors: validation.errors,
+        is_valid: validation.isValid,
+        card_count: totalCardCount,
       };
 
       // Save or update the deck
@@ -387,11 +443,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
   const validation = validateDeck(currentDeck);
 
+  // Commander color identity validation (for land suggestions)
+  const commanderColors = deckFormat === 'commander' ? getCommanderColors(commander) : [];
+
   const deckSize = selectedCards.reduce((acc, curr) => acc + curr.quantity, 0);
   const {
     landCount: suggestedLandCountValue,
     landDistribution: suggestedLands,
-  } = suggestLandCountAndDistribution(selectedCards, deckFormat);
+  } = suggestLandCountAndDistribution(selectedCards, deckFormat, commanderColors);
 
   const totalPrice = selectedCards.reduce((acc, { card, quantity }) => {
     const isBasicLand =
@@ -498,7 +557,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   };
 
   return (
-    <div className="bg-gray-900 text-white p-3 sm:p-6 pt-6 pb-20 md:pt-20 md:pb-6">
+    <div className="relative bg-gray-900 text-white p-3 sm:p-6 pt-6 pb-44 md:pt-20 md:pb-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
           {/* Card Search Section */}
@@ -535,7 +594,17 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
             {/* Vertical Card List for Mobile */}
             <div className="space-y-2">
-              {searchResults.map(card => {
+              {isSearching ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="animate-spin text-blue-500" size={48} />
+                </div>
+              ) : searchResults.length === 0 && searchQuery ? (
+                <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>
+              ) : (
+                searchResults.map(card => {
                 const currentFaceIndex = getCurrentFaceIndex(card.id);
                 const isMultiFaced = isDoubleFaced(card);
                 const inCollection = userCollection.get(card.id) || 0;
@@ -547,13 +616,27 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                   ? card.card_faces[currentFaceIndex]?.name || card.name
                   : card.name;
 
+                const isValidForCommander = deckFormat !== 'commander' || !commander || isCardValidForCommander(card, commanderColors);
+
                 return (
                   <div
                     key={card.id}
-                    className="bg-gray-800 rounded-lg p-3 flex items-center gap-3 hover:bg-gray-750 transition-colors"
+                    className={`bg-gray-800 rounded-lg p-3 flex items-center gap-3 hover:bg-gray-750 transition-colors cursor-pointer ${
+                      !isValidForCommander ? 'border border-yellow-500/50' : ''
+                    }`}
+                    onMouseEnter={() => {
+                      setHoveredCard(card);
+                      setHoverSource('search');
+                    }}
+                    onMouseLeave={() => {
+                      setHoveredCard(null);
+                      setHoverSource(null);
+                    }}
+                    onClick={() => setSelectedCard(card)}
                   >
                     {/* Card Thumbnail */}
-                    <div className="relative flex-shrink-0 w-16 h-22 rounded overflow-hidden">
+                    <div className="relative flex-shrink-0 w-16 h-22 rounded overflow-hidden"
+                         onClick={(e) => e.stopPropagation()}>
                       {getCardImageUri(card, currentFaceIndex) ? (
                         <img
                           src={getCardImageUri(card, currentFaceIndex)}
@@ -593,11 +676,17 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                           x{inCollection} in collection
                         </div>
                       )}
+                      {!isValidForCommander && (
+                        <div className="text-xs text-yellow-400 mt-1 flex items-center gap-1">
+                          <AlertCircle size={12} />
+                          Not in commander colors
+                        </div>
+                      )}
                     </div>
 
                     {/* Add/Quantity Controls */}
                     {quantityInDeck > 0 ? (
-                      <div className="flex-shrink-0 flex items-center gap-1">
+                      <div className="flex-shrink-0 flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                         <button
                           onClick={() => {
                             if (quantityInDeck === 1) {
@@ -620,7 +709,10 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                       </div>
                     ) : (
                       <button
-                        onClick={() => addCardToDeck(card)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          addCardToDeck(card);
+                        }}
                         className="flex-shrink-0 w-10 h-10 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center transition-colors"
                       >
                         <Plus size={20} />
@@ -629,7 +721,10 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
                     {/* Add to Collection Button (hidden on mobile by default) */}
                     <button
-                      onClick={() => handleAddCardToCollection(card.id, 1)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleAddCardToCollection(card.id, 1);
+                      }}
                       disabled={isAddingThisCard}
                       className="hidden sm:flex flex-shrink-0 w-10 h-10 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-full items-center justify-center transition-colors"
                       title="Add to collection"
@@ -642,7 +737,8 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                     </button>
                   </div>
                 );
-              })}
+              })
+              )}
             </div>
           </div>
 
@@ -671,6 +767,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
               </select>
 
               {deckFormat === 'commander' && (
+                <div className="space-y-2">
                   <select
                     value={commander?.id || ''}
                     onChange={e => {
@@ -692,6 +789,17 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                         </option>
                       ))}
                   </select>
+                  {commander && commanderColors.length > 0 && (
+                    <div className="bg-gray-700 rounded px-3 py-2 flex items-center gap-2">
+                      <span className="text-xs text-gray-400">Commander Colors:</span>
+                      <div className="flex items-center gap-1">
+                        {commanderColors.map(color => (
+                          <ManaSymbol key={color} symbol={color} size={18} />
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
               )}
 
               <div className="relative">
@@ -732,10 +840,24 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                   </h3>
                 </div>
 
-                {selectedCards.map(({ card, quantity }) => (
+                {selectedCards.map(({ card, quantity }) => {
+                  const isValidForCommander = deckFormat !== 'commander' || !commander || isCardValidForCommander(card, commanderColors);
+
+                  return (
                     <div
                       key={card.id}
-                    className="flex items-center gap-3 p-2 rounded-lg bg-gray-700"
+                      className={`flex items-center gap-3 p-2 rounded-lg bg-gray-700 cursor-pointer hover:bg-gray-650 transition-colors ${
+                        !isValidForCommander ? 'border border-yellow-500/50' : ''
+                      }`}
+                      onMouseEnter={() => {
+                        setHoveredCard(card);
+                        setHoverSource('deck');
+                      }}
+                      onMouseLeave={() => {
+                        setHoveredCard(null);
+                        setHoverSource(null);
+                      }}
+                      onClick={() => setSelectedCard(card)}
                     >
                       <img
                         src={card.image_uris?.art_crop}
@@ -747,8 +869,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                         {card.prices?.usd && (
                           <div className="text-xs text-gray-400">${card.prices.usd}</div>
                         )}
+                        {!isValidForCommander && (
+                          <div className="text-xs text-yellow-400 flex items-center gap-1 mt-0.5">
+                            <AlertCircle size={10} />
+                            <span>Not in commander colors</span>
                           </div>
-                    <div className="flex items-center gap-2">
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                         <input
                           type="number"
                           value={quantity}
@@ -766,47 +894,64 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                         </button>
                       </div>
                     </div>
-                ))}
+                  );
+                })}
               </div>
 
-              <div className="font-bold text-xl">
-                Total Price: ${totalPrice.toFixed(2)}
+              {deckSize > 0 && suggestedLandCountValue > 0 && (
+                <div className="bg-gray-700 rounded-lg p-3">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm font-semibold text-gray-300">Suggested Lands</span>
+                    <span className="text-xs text-gray-400">{suggestedLandCountValue} total</span>
                   </div>
-
-              {deckSize > 0 && (
-                <div className="text-gray-400">
-                  Suggested Land Count: {suggestedLandCountValue}
-                  {Object.entries(suggestedLands).map(([landType, count]) => (
-                    <div key={landType}>
-                      {landType}: {count}
-                    </div>
-                  ))}
+                  <div className="flex items-center gap-3 flex-wrap">
+                    {Object.entries(suggestedLands).map(([landType, count]) =>
+                      count > 0 ? (
+                        <div key={landType} className="flex items-center gap-1.5 bg-gray-800 px-2 py-1 rounded">
+                          <ManaSymbol symbol={landType} size={20} />
+                          <span className="text-sm font-medium text-white">{count}</span>
                         </div>
+                      ) : null
                     )}
-
-              {deckSize > 0 && (
+                  </div>
                   <button
                     onClick={addSuggestedLandsToDeck}
-                  className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
+                    className="w-full mt-3 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 transition-colors"
                   >
                     <Plus size={20} />
                     Add Suggested Lands
                   </button>
+                </div>
               )}
 
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Fixed Footer with Price and Actions - Mobile First */}
+      <div className="fixed bottom-16 left-0 right-0 md:left-auto md:right-4 md:bottom-4 md:w-80 z-20 bg-gray-800 border-t border-gray-700 md:border md:rounded-lg shadow-2xl">
+        <div className="p-3 space-y-3">
+          {/* Total Price */}
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-gray-300">Total Price</span>
+            <span className="text-xl font-bold text-green-400">${totalPrice.toFixed(2)}</span>
+          </div>
+
+          {/* Action Buttons */}
           <div className="flex gap-2">
             {!isLoadingCollection && getMissingCards().length > 0 && (
               <button
                 onClick={handleAddAllMissingCards}
                 disabled={isAddingAll}
-                    className="flex-1 px-4 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
+                className="flex-1 px-3 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 text-sm font-medium transition-colors"
                 title="Add missing cards to collection"
               >
                 {isAddingAll ? (
-                      <Loader2 className="animate-spin" size={20} />
+                  <Loader2 className="animate-spin" size={18} />
                 ) : (
                   <>
-                        <PackagePlus size={20} />
+                    <PackagePlus size={18} />
                     <span className="hidden sm:inline">Add Missing</span>
                   </>
                 )}
@@ -817,28 +962,204 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
               disabled={
                 !deckName.trim() || selectedCards.length === 0 || isSaving
               }
-                  className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 relative"
+              className="flex-1 px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 text-sm font-medium relative transition-colors"
             >
               {isSaving ? (
                 <>
-                      <Loader2 className="animate-spin text-white absolute left-2 top-1/2 -translate-y-1/2" size={20} />
-                      <span className="opacity-0">Save Deck</span>
+                  <Loader2 className="animate-spin text-white" size={18} />
+                  <span>Saving...</span>
                 </>
               ) : (
                 <>
-                      <Save size={20} />
-                      <span>{initialDeck ? 'Update Deck' : 'Save Deck'}</span>
+                  <Save size={18} />
+                  <span>{initialDeck ? 'Update' : 'Save'}</span>
                 </>
               )}
             </button>
           </div>
         </div>
       </div>
+
+      {/* Hover Card Preview - only show if no card is selected */}
+      {hoveredCard && !selectedCard && (() => {
+        const currentFaceIndex = getCurrentFaceIndex(hoveredCard.id);
+        const isMultiFaced = isDoubleFaced(hoveredCard);
+        const currentFace = isMultiFaced && hoveredCard.card_faces
+          ? hoveredCard.card_faces[currentFaceIndex]
+          : null;
+
+        const displayName = currentFace?.name || hoveredCard.name;
+        const displayTypeLine = currentFace?.type_line || hoveredCard.type_line;
+        const displayOracleText = currentFace?.oracle_text || hoveredCard.oracle_text;
+
+        // Position preview based on hover source
+        const positionClass = hoverSource === 'deck' ? 'left-8' : 'right-8';
+
+        return (
+          <div className={`hidden lg:block fixed top-1/2 ${positionClass} transform -translate-y-1/2 z-30 pointer-events-none`}>
+            <div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
+              <div className="relative">
+                <img
+                  src={getCardLargeImageUri(hoveredCard, currentFaceIndex)}
+                  alt={displayName}
+                  className="w-full h-auto rounded-lg shadow-lg"
+                />
+                {isMultiFaced && (
+                  <div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
+                    Face {currentFaceIndex + 1}/{hoveredCard.card_faces!.length}
+                  </div>
+                )}
+              </div>
+              <div className="mt-3 space-y-2">
+                <h3 className="text-xl font-bold">{displayName}</h3>
+                <p className="text-sm text-gray-400">{displayTypeLine}</p>
+                {displayOracleText && (
+                  <p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
+                    {displayOracleText}
+                  </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>
+        );
+      })()}
+
+      {/* Card Detail Panel - slides in from right */}
+      {selectedCard && (() => {
+        const currentFaceIndex = getCurrentFaceIndex(selectedCard.id);
+        const isMultiFaced = isDoubleFaced(selectedCard);
+        const currentFace = isMultiFaced && selectedCard.card_faces
+          ? selectedCard.card_faces[currentFaceIndex]
+          : null;
+
+        const displayName = currentFace?.name || selectedCard.name;
+        const displayTypeLine = currentFace?.type_line || selectedCard.type_line;
+        const displayOracleText = currentFace?.oracle_text || selectedCard.oracle_text;
+
+        return (
+          <>
+            {/* Backdrop */}
+            <div
+              className="fixed inset-0 bg-black bg-opacity-50 z-[110] transition-opacity duration-300"
+              onClick={() => setSelectedCard(null)}
+            />
+
+            {/* Sliding Panel */}
+            <div className="fixed top-0 right-0 h-full w-full md:w-96 bg-gray-800 shadow-2xl z-[120] overflow-y-auto animate-slide-in-right">
+              {/* Close button */}
+              <button
+                onClick={() => setSelectedCard(null)}
+                className="fixed top-4 right-4 bg-gray-700 hover:bg-gray-600 text-white p-2 md:p-1.5 rounded-full transition-colors z-[130] shadow-lg"
+                aria-label="Close"
+              >
+                <X size={24} className="md:w-5 md:h-5" />
+              </button>
+
+              <div className="p-4 sm:p-6">
+                {/* Card Image */}
+                <div className="relative mb-4 max-w-sm mx-auto">
+                  <img
+                    src={getCardLargeImageUri(selectedCard, currentFaceIndex)}
+                    alt={displayName}
+                    className="w-full h-auto rounded-lg shadow-lg"
+                  />
+                  {isMultiFaced && (
+                    <>
+                      <div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
+                        Face {currentFaceIndex + 1}/{selectedCard.card_faces!.length}
+                      </div>
+                      <button
+                        onClick={() => toggleCardFace(selectedCard.id, selectedCard.card_faces!.length)}
+                        className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
+                        title="Flip card"
+                      >
+                        <RefreshCw size={20} />
+                      </button>
+                    </>
+                  )}
+                </div>
+
+                {/* Card Info */}
+                <div className="space-y-4">
+                  <div>
+                    <h2 className="text-xl md:text-2xl font-bold text-white mb-2">{displayName}</h2>
+                    <p className="text-xs sm:text-sm text-gray-400">{displayTypeLine}</p>
+                  </div>
+
+                  {displayOracleText && (
+                    <div className="border-t border-gray-700 pt-3">
+                      <p className="text-sm text-gray-300">{displayOracleText}</p>
+                    </div>
+                  )}
+
+                  {selectedCard.prices?.usd && (
+                    <div className="border-t border-gray-700 pt-3">
+                      <div className="text-lg text-green-400 font-semibold">
+                        ${selectedCard.prices.usd} each
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Collection Status */}
+                  {userCollection.has(selectedCard.id) && (
+                    <div className="border-t border-gray-700 pt-3">
+                      <div className="text-sm text-green-400">
+                        <CheckCircle size={16} className="inline mr-1" />
+                        x{userCollection.get(selectedCard.id)} in your collection
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Deck Quantity Management */}
+                  <div className="border-t border-gray-700 pt-3">
+                    <h3 className="text-lg font-semibold mb-3">Quantity in Deck</h3>
+                    <div className="flex items-center justify-between bg-gray-900 rounded-lg p-4">
+                      <button
+                        onClick={() => {
+                          const cardInDeck = selectedCards.find(c => c.card.id === selectedCard.id);
+                          const currentQuantity = cardInDeck?.quantity || 0;
+                          if (currentQuantity === 1) {
+                            removeCardFromDeck(selectedCard.id);
+                          } else if (currentQuantity > 1) {
+                            updateCardQuantity(selectedCard.id, currentQuantity - 1);
+                          }
+                        }}
+                        disabled={!selectedCards.find(c => c.card.id === selectedCard.id)}
+                        className="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white p-2 rounded-lg transition-colors"
+                      >
+                        <Minus size={20} />
+                      </button>
+
+                      <div className="text-center">
+                        <div className="text-3xl font-bold">
+                          {selectedCards.find(c => c.card.id === selectedCard.id)?.quantity || 0}
+                        </div>
+                        <div className="text-xs text-gray-400">copies</div>
+                      </div>
+
+                      <button
+                        onClick={() => addCardToDeck(selectedCard)}
+                        className="bg-green-600 hover:bg-green-700 text-white p-2 rounded-lg transition-colors"
+                      >
+                        <Plus size={20} />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </>
+        );
+      })()}
+
       {snackbar && (
         <div
-          className={`fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-lg shadow-lg transition-all duration-300 ${
+          className={`fixed bottom-4 right-4 text-white p-4 rounded-lg shadow-lg transition-all duration-300 z-[140] ${
             snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
           }`}
         >

src/components/Friends.tsx

@@ -1,312 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Search, UserPlus, UserMinus, Check, X, Users, Clock, Send } from 'lucide-react';
-import { useAuth } from '../contexts/AuthContext';
-import {
-  getFriends,
-  getPendingRequests,
-  getSentRequests,
-  searchUsers,
-  sendFriendRequest,
-  acceptFriendRequest,
-  declineFriendRequest,
-  removeFriend,
-  Friend,
-} from '../services/friendsService';
-
-type Tab = 'friends' | 'requests' | 'search';
-
-export default function Friends() {
-  const { user } = useAuth();
-  const [activeTab, setActiveTab] = useState<Tab>('friends');
-  const [friends, setFriends] = useState<Friend[]>([]);
-  const [pendingRequests, setPendingRequests] = useState<Friend[]>([]);
-  const [sentRequests, setSentRequests] = useState<Friend[]>([]);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [searchResults, setSearchResults] = useState<{ id: string; username: string | null }[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [searching, setSearching] = useState(false);
-
-  useEffect(() => {
-    if (user) {
-      loadFriendsData();
-    }
-  }, [user]);
-
-  const loadFriendsData = async () => {
-    if (!user) return;
-    setLoading(true);
-    try {
-      const [friendsData, pendingData, sentData] = await Promise.all([
-        getFriends(user.id),
-        getPendingRequests(user.id),
-        getSentRequests(user.id),
-      ]);
-      setFriends(friendsData);
-      setPendingRequests(pendingData);
-      setSentRequests(sentData);
-    } catch (error) {
-      console.error('Error loading friends:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSearch = async () => {
-    if (!user || searchQuery.trim().length < 2) return;
-    setSearching(true);
-    try {
-      const results = await searchUsers(searchQuery, user.id);
-      setSearchResults(results || []);
-    } catch (error) {
-      console.error('Error searching users:', error);
-    } finally {
-      setSearching(false);
-    }
-  };
-
-  const handleSendRequest = async (addresseeId: string) => {
-    if (!user) return;
-    try {
-      await sendFriendRequest(user.id, addresseeId);
-      setSearchResults((prev) => prev.filter((u) => u.id !== addresseeId));
-      await loadFriendsData();
-    } catch (error) {
-      console.error('Error sending friend request:', error);
-      alert('Failed to send friend request');
-    }
-  };
-
-  const handleAcceptRequest = async (friendshipId: string) => {
-    try {
-      await acceptFriendRequest(friendshipId);
-      await loadFriendsData();
-    } catch (error) {
-      console.error('Error accepting request:', error);
-    }
-  };
-
-  const handleDeclineRequest = async (friendshipId: string) => {
-    try {
-      await declineFriendRequest(friendshipId);
-      await loadFriendsData();
-    } catch (error) {
-      console.error('Error declining request:', error);
-    }
-  };
-
-  const handleRemoveFriend = async (friendshipId: string) => {
-    if (!confirm('Remove this friend?')) return;
-    try {
-      await removeFriend(friendshipId);
-      await loadFriendsData();
-    } catch (error) {
-      console.error('Error removing friend:', error);
-    }
-  };
-
-  const isAlreadyFriendOrPending = (userId: string) => {
-    return (
-      friends.some((f) => f.id === userId) ||
-      pendingRequests.some((f) => f.id === userId) ||
-      sentRequests.some((f) => f.id === userId)
-    );
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gray-900 flex items-center justify-center">
-        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-900 text-white p-6">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold mb-6">Friends</h1>
-
-        {/* Tabs */}
-        <div className="flex gap-2 mb-6">
-          <button
-            onClick={() => setActiveTab('friends')}
-            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition ${
-              activeTab === 'friends'
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-            }`}
-          >
-            <Users size={18} />
-            Friends ({friends.length})
-          </button>
-          <button
-            onClick={() => setActiveTab('requests')}
-            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition ${
-              activeTab === 'requests'
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-            }`}
-          >
-            <Clock size={18} />
-            Requests ({pendingRequests.length})
-          </button>
-          <button
-            onClick={() => setActiveTab('search')}
-            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition ${
-              activeTab === 'search'
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-            }`}
-          >
-            <Search size={18} />
-            Search
-          </button>
-        </div>
-
-        {/* Friends List */}
-        {activeTab === 'friends' && (
-          <div className="space-y-3">
-            {friends.length === 0 ? (
-              <p className="text-gray-400 text-center py-8">
-                No friends yet. Search for users to add them!
-              </p>
-            ) : (
-              friends.map((friend) => (
-                <div
-                  key={friend.id}
-                  className="flex items-center justify-between bg-gray-800 p-4 rounded-lg"
-                >
-                  <span className="font-medium">{friend.username || 'Unknown'}</span>
-                  <button
-                    onClick={() => handleRemoveFriend(friend.friendshipId)}
-                    className="p-2 text-red-400 hover:bg-red-400/20 rounded-lg transition"
-                    title="Remove friend"
-                  >
-                    <UserMinus size={20} />
-                  </button>
-                </div>
-              ))
-            )}
-          </div>
-        )}
-
-        {/* Requests Tab */}
-        {activeTab === 'requests' && (
-          <div className="space-y-6">
-            {/* Received Requests */}
-            <div>
-              <h2 className="text-lg font-semibold mb-3 text-gray-300">Received Requests</h2>
-              {pendingRequests.length === 0 ? (
-                <p className="text-gray-500 text-sm">No pending requests</p>
-              ) : (
-                <div className="space-y-3">
-                  {pendingRequests.map((request) => (
-                    <div
-                      key={request.id}
-                      className="flex items-center justify-between bg-gray-800 p-4 rounded-lg"
-                    >
-                      <span className="font-medium">{request.username || 'Unknown'}</span>
-                      <div className="flex gap-2">
-                        <button
-                          onClick={() => handleAcceptRequest(request.friendshipId)}
-                          className="p-2 text-green-400 hover:bg-green-400/20 rounded-lg transition"
-                          title="Accept"
-                        >
-                          <Check size={20} />
-                        </button>
-                        <button
-                          onClick={() => handleDeclineRequest(request.friendshipId)}
-                          className="p-2 text-red-400 hover:bg-red-400/20 rounded-lg transition"
-                          title="Decline"
-                        >
-                          <X size={20} />
-                        </button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Sent Requests */}
-            <div>
-              <h2 className="text-lg font-semibold mb-3 text-gray-300">Sent Requests</h2>
-              {sentRequests.length === 0 ? (
-                <p className="text-gray-500 text-sm">No sent requests</p>
-              ) : (
-                <div className="space-y-3">
-                  {sentRequests.map((request) => (
-                    <div
-                      key={request.id}
-                      className="flex items-center justify-between bg-gray-800 p-4 rounded-lg"
-                    >
-                      <div className="flex items-center gap-2">
-                        <Send size={16} className="text-gray-500" />
-                        <span className="font-medium">{request.username || 'Unknown'}</span>
-                      </div>
-                      <span className="text-sm text-yellow-500">Pending</span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Search Tab */}
-        {activeTab === 'search' && (
-          <div className="space-y-4">
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-                placeholder="Search by username..."
-                className="flex-1 px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              />
-              <button
-                onClick={handleSearch}
-                disabled={searching || searchQuery.trim().length < 2}
-                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg transition"
-              >
-                {searching ? (
-                  <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div>
-                ) : (
-                  <Search size={20} />
-                )}
-              </button>
-            </div>
-
-            {searchResults.length > 0 && (
-              <div className="space-y-3">
-                {searchResults.map((result) => (
-                  <div
-                    key={result.id}
-                    className="flex items-center justify-between bg-gray-800 p-4 rounded-lg"
-                  >
-                    <span className="font-medium">{result.username || 'Unknown'}</span>
-                    {isAlreadyFriendOrPending(result.id) ? (
-                      <span className="text-sm text-gray-500">Already connected</span>
-                    ) : (
-                      <button
-                        onClick={() => handleSendRequest(result.id)}
-                        className="flex items-center gap-2 px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition text-sm"
-                      >
-                        <UserPlus size={16} />
-                        Add Friend
-                      </button>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {searchQuery.length >= 2 && searchResults.length === 0 && !searching && (
-              <p className="text-gray-400 text-center py-4">No users found</p>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

src/components/LifeCounter.tsx

@@ -157,7 +157,7 @@ import React, { useState, useEffect } from 'react';
       );
 
       return (
-        <div className="min-h-screen bg-gray-900 text-white p-6">
+        <div className="relative md: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">Life Counter</h1>
             {!setupComplete ? renderSetupForm() : renderLifeCounters()}

src/components/MigrateDeckButton.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Database, Loader2 } from 'lucide-react';
+import { migrateExistingDecks } from '../utils/migrateDeckData';
+
+export default function MigrateDeckButton() {
+  const [isMigrating, setIsMigrating] = useState(false);
+  const [result, setResult] = useState<string | null>(null);
+
+  const handleMigrate = async () => {
+    if (!confirm('This will update all existing decks with optimization data. Continue?')) {
+      return;
+    }
+
+    setIsMigrating(true);
+    setResult(null);
+
+    try {
+      await migrateExistingDecks();
+      setResult('Migration completed successfully!');
+    } catch (error) {
+      console.error('Migration error:', error);
+      setResult('Migration failed. Check console for details.');
+    } finally {
+      setIsMigrating(false);
+    }
+  };
+
+  return (
+    <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
+      <h3 className="text-lg font-semibold mb-2 flex items-center gap-2">
+        <Database size={20} />
+        Deck Migration Tool
+      </h3>
+      <p className="text-sm text-gray-400 mb-4">
+        Update existing decks with optimization fields (cover image, validation cache, card count).
+        Run this once after the database migration.
+      </p>
+
+      <button
+        onClick={handleMigrate}
+        disabled={isMigrating}
+        className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg flex items-center gap-2 transition-colors"
+      >
+        {isMigrating ? (
+          <>
+            <Loader2 className="animate-spin" size={20} />
+            Migrating...
+          </>
+        ) : (
+          <>
+            <Database size={20} />
+            Migrate Decks
+          </>
+        )}
+      </button>
+
+      {result && (
+        <p className={`mt-3 text-sm ${result.includes('success') ? 'text-green-400' : 'text-red-400'}`}>
+          {result}
+        </p>
+      )}
+    </div>
+  );
+}

src/components/Modal.tsx

@@ -53,12 +53,12 @@ export default function Modal({
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black bg-opacity-50 z-50 transition-opacity duration-300 animate-fade-in"
+        className="fixed inset-0 bg-black bg-opacity-50 z-[110] 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="fixed inset-0 z-[120] 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()}

src/components/Navigation.tsx

@@ -1,21 +1,19 @@
 import React, { useState, useRef, useEffect } from 'react';
-    import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search, Heart, Menu, Users, ArrowLeftRight, Globe } from 'lucide-react';
-    import { useAuth } from '../contexts/AuthContext';
-    import { supabase } from '../lib/supabase';
+import { Library, LogOut, ChevronDown, Search, Heart, Users } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { supabase } from '../lib/supabase';
 
-    type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter' | 'friends' | 'trades' | 'community';
+type Page = 'home' | 'deck' | 'login' | 'collection' | 'search' | 'life-counter' | 'community';
 
-    interface NavigationProps {
+interface NavigationProps {
   currentPage: Page;
   setCurrentPage: (page: Page) => void;
-    }
+}
 
-    export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
+export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
   const { user, signOut } = useAuth();
   const [showDropdown, setShowDropdown] = useState(false);
-      const [showMobileMenu, setShowMobileMenu] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-      const mobileMenuRef = useRef<HTMLDivElement>(null);
   const [username, setUsername] = useState<string | null>(null);
 
   useEffect(() => {
@@ -41,9 +39,6 @@ import React, { useState, useRef, useEffect } from 'react';
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setShowDropdown(false);
       }
-          if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
-            setShowMobileMenu(false);
-          }
     };
 
     document.addEventListener('mousedown', handleClickOutside);
@@ -53,9 +48,7 @@ import React, { useState, useRef, useEffect } from 'react';
   const navItems = [
     { id: 'home' as const, label: 'Decks', icon: Library },
     { id: 'collection' as const, label: 'Collection', icon: Library },
-        { id: 'community' as const, label: 'Community', icon: Globe },
-        { id: 'friends' as const, label: 'Friends', icon: Users },
-        { id: 'trades' as const, label: 'Trades', icon: ArrowLeftRight },
+    { id: 'community' as const, label: 'Community', icon: Users },
     { id: 'search' as const, label: 'Search', icon: Search },
     { id: 'life-counter' as const, label: 'Life', icon: Heart },
   ];
@@ -76,7 +69,7 @@ import React, { useState, useRef, useEffect } from 'react';
   return (
     <>
       {/* Desktop Navigation - Top */}
-          <nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50 animate-slide-in-left">
+      <nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-[100] animate-slide-in-left">
         <div className="max-w-7xl mx-auto px-4">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center space-x-8">
@@ -114,17 +107,7 @@ import React, { useState, useRef, useEffect } from 'react';
                   </button>
 
                   {showDropdown && (
-                        <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
-                          <button
-                            onClick={() => {
-                              setCurrentPage('profile');
-                              setShowDropdown(false);
-                            }}
-                            className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
-                          >
-                            <Settings size={16} />
-                            <span>Profile Settings</span>
-                          </button>
+                    <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect z-[110]">
                       <button
                         onClick={handleSignOut}
                         className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
@@ -159,47 +142,16 @@ import React, { useState, useRef, useEffect } from 'react';
             </button>
           ))}
 
-              {/* Settings with dropdown */}
-              <div className="relative flex-1 h-full" ref={mobileMenuRef}>
+          {/* Sign Out button for mobile */}
           <button
-                  onClick={() => setShowMobileMenu(!showMobileMenu)}
-                  className={`flex flex-col items-center justify-center w-full h-full transition-colors ${
-                    currentPage === 'profile' || showMobileMenu
-                      ? 'text-blue-500'
-                      : 'text-gray-400 hover:text-gray-200'
-                  }`}
+            onClick={handleSignOut}
+            className="flex flex-col items-center justify-center flex-1 h-full text-gray-400 hover:text-gray-200 transition-colors"
           >
-                  <Settings size={20} />
-                  <span className="text-xs mt-1">Settings</span>
+            <LogOut size={20} />
+            <span className="text-xs mt-1">Logout</span>
           </button>
-
-                {showMobileMenu && (
-                  <div className="absolute right-0 bottom-full mb-2 w-48 bg-gray-800 rounded-lg shadow-xl py-1 border border-gray-700 animate-scale-in">
-                    <button
-                      onClick={() => {
-                        setCurrentPage('profile');
-                        setShowMobileMenu(false);
-                      }}
-                      className="flex items-center space-x-3 w-full px-4 py-3 text-sm text-gray-300 hover:bg-gray-700 transition-colors"
-                    >
-                      <Settings size={18} />
-                      <span>Profile</span>
-                    </button>
-                    <button
-                      onClick={() => {
-                        handleSignOut();
-                        setShowMobileMenu(false);
-                      }}
-                      className="flex items-center space-x-3 w-full px-4 py-3 text-sm text-red-400 hover:bg-gray-700 transition-colors"
-                    >
-                      <LogOut size={18} />
-                      <span>Sign Out</span>
-                    </button>
-                  </div>
-                )}
-              </div>
         </div>
       </nav>
     </>
   );
-    }
+}

src/components/PWAInstallPrompt.tsx

@@ -85,7 +85,7 @@ export default function PWAInstallPrompt() {
   }
 
   return (
-    <div className="fixed bottom-20 md:bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-sm z-50 animate-slide-in-bottom">
+    <div className="fixed bottom-20 md:bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-sm z-[105] animate-slide-in-bottom">
       <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow-2xl p-4 text-white">
         <button
           onClick={handleDismiss}

src/components/Profile.tsx

@@ -1,168 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Save, Globe, Users, Lock } from 'lucide-react';
-import { useAuth } from '../contexts/AuthContext';
-import { supabase } from '../lib/supabase';
-
-const THEME_COLORS = ['red', 'green', 'blue', 'yellow', 'grey', 'purple'];
-
-const VISIBILITY_OPTIONS = [
-  { value: 'public', label: 'Public', icon: Globe, description: 'Anyone can view your collection' },
-  { value: 'friends', label: 'Friends Only', icon: Users, description: 'Only friends can view your collection' },
-  { value: 'private', label: 'Private', icon: Lock, description: 'Only you can view your collection' },
-] as const;
-
-type CollectionVisibility = 'public' | 'friends' | 'private';
-
-export default function Profile() {
-  const { user } = useAuth();
-  const [username, setUsername] = useState('');
-  const [themeColor, setThemeColor] = useState('blue');
-  const [collectionVisibility, setCollectionVisibility] = useState<CollectionVisibility>('private');
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-
-  useEffect(() => {
-    const loadProfile = async () => {
-      if (user) {
-        const { data, error } = await supabase
-          .from('profiles')
-          .select('username, theme_color, collection_visibility')
-          .eq('id', user.id)
-          .single();
-
-        if (data) {
-          setUsername(data.username || '');
-          setThemeColor(data.theme_color || 'blue');
-          setCollectionVisibility((data.collection_visibility as CollectionVisibility) || 'private');
-        }
-        setLoading(false);
-      }
-    };
-
-    loadProfile();
-  }, [user]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!user) return;
-
-    setSaving(true);
-    try {
-      const { error } = await supabase
-        .from('profiles')
-        .upsert({
-          id: user.id,
-          username,
-          theme_color: themeColor,
-          collection_visibility: collectionVisibility,
-          updated_at: new Date()
-        });
-
-      if (error) throw error;
-      alert('Profile updated successfully!');
-    } catch (error) {
-      console.error('Error updating profile:', error);
-      alert('Failed to update profile');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gray-900 flex items-center justify-center">
-        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-900 text-white p-6">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold mb-8">Profile Settings</h1>
-        
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
-              Username
-            </label>
-            <input
-              type="text"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Enter your username"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
-              Theme Color
-            </label>
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
-              {THEME_COLORS.map((color) => (
-                <button
-                  key={color}
-                  type="button"
-                  onClick={() => setThemeColor(color)}
-                  className={`h-12 sm:h-14 rounded-lg border-2 transition-all capitalize text-sm sm:text-base
-                    ${themeColor === color
-                      ? 'border-white scale-105'
-                      : 'border-transparent hover:border-gray-600'
-                    }`}
-                  style={{ backgroundColor: `var(--color-${color}-primary)` }}
-                >
-                  {color}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
-              Collection Visibility
-            </label>
-            <div className="space-y-2">
-              {VISIBILITY_OPTIONS.map((option) => {
-                const Icon = option.icon;
-                return (
-                  <button
-                    key={option.value}
-                    type="button"
-                    onClick={() => setCollectionVisibility(option.value)}
-                    className={`w-full flex items-center gap-3 p-3 rounded-lg border-2 transition-all text-left
-                      ${collectionVisibility === option.value
-                        ? 'border-blue-500 bg-blue-500/10'
-                        : 'border-gray-700 hover:border-gray-600 bg-gray-800'
-                      }`}
-                  >
-                    <Icon size={20} className={collectionVisibility === option.value ? 'text-blue-400' : 'text-gray-400'} />
-                    <div>
-                      <div className="font-medium">{option.label}</div>
-                      <div className="text-sm text-gray-400">{option.description}</div>
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={saving}
-            className="w-full min-h-[44px] flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white font-semibold py-3 px-4 rounded-lg transition duration-200"
-          >
-            {saving ? (
-              <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div>
-            ) : (
-              <>
-                <Save size={20} />
-                Save Changes
-              </>
-            )}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

src/components/TradeCreator.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { X, ArrowLeftRight, Plus, Minus, Send, Gift } from 'lucide-react';
+import { X, ArrowLeftRight, ArrowRight, ArrowLeft, Minus, Send, Gift, Loader2, Search } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
+import { useToast } from '../contexts/ToastContext';
 import { getUserCollection, getCardsByIds } from '../services/api';
-import { createTrade } from '../services/tradesService';
+import { createTrade, updateTrade } from '../services/tradesService';
 import { Card } from '../types';
 
 interface CollectionItem {
@@ -10,42 +11,278 @@ interface CollectionItem {
   quantity: number;
 }
 
-interface TradeCreatorProps {
-  receiverId: string;
-  receiverUsername: string;
-  receiverCollection: CollectionItem[];
-  onClose: () => void;
-  onTradeCreated: () => void;
-}
-
 interface SelectedCard {
   card: Card;
   quantity: number;
   maxQuantity: number;
 }
 
+// ============ MOVED OUTSIDE TO PREVENT RE-RENDER ============
+
+interface CollectionGridProps {
+  items: CollectionItem[];
+  selectedCards: Map<string, SelectedCard>;
+  onAdd: (card: Card, maxQty: number) => void;
+  onRemove: (cardId: string) => void;
+  emptyMessage: string;
+  selectionColor: 'green' | 'blue';
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  searchPlaceholder: string;
+}
+
+function CollectionGrid({
+  items,
+  selectedCards,
+  onAdd,
+  onRemove,
+  emptyMessage,
+  selectionColor,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder,
+}: CollectionGridProps) {
+  const ringColor = selectionColor === 'green' ? 'ring-green-500' : 'ring-blue-500';
+  const badgeColor = selectionColor === 'green' ? 'bg-green-600' : 'bg-blue-500';
+
+  const filteredItems = items.filter(({ card }) =>
+    card.name.toLowerCase().includes(searchValue.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-3">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
+        <input
+          type="text"
+          value={searchValue}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder={searchPlaceholder}
+          className="w-full pl-9 pr-8 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+        {searchValue && (
+          <button
+            onClick={() => onSearchChange('')}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
+          >
+            <X size={16} />
+          </button>
+        )}
+      </div>
+
+      {items.length === 0 ? (
+        <p className="text-gray-400 text-center py-8">{emptyMessage}</p>
+      ) : filteredItems.length === 0 ? (
+        <p className="text-gray-400 text-center py-8">No cards match "{searchValue}"</p>
+      ) : (
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
+          {filteredItems.map(({ card, quantity }) => {
+            const selected = selectedCards.get(card.id);
+            const remainingQty = quantity - (selected?.quantity || 0);
+            return (
+              <div
+                key={card.id}
+                className={`relative cursor-pointer rounded-lg overflow-hidden transition active:scale-95 ${
+                  selected ? `ring-2 ${ringColor}` : 'active:ring-2 active:ring-gray-500'
+                }`}
+                onClick={() => remainingQty > 0 && onAdd(card, quantity)}
+              >
+                <img
+                  src={card.image_uris?.small || card.image_uris?.normal}
+                  alt={card.name}
+                  className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
+                />
+                <div className="absolute top-1 right-1 bg-gray-900/80 text-white text-[10px] px-1 py-0.5 rounded">
+                  {remainingQty}/{quantity}
+                </div>
+                {card.prices?.usd && (
+                  <div className="absolute top-1 left-1 bg-gray-900/80 text-green-400 text-[10px] px-1 py-0.5 rounded font-semibold">
+                    ${card.prices.usd}
+                  </div>
+                )}
+                {selected && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onRemove(card.id);
+                    }}
+                    className={`absolute bottom-1 left-1 ${badgeColor} text-white text-[10px] px-1.5 py-0.5 rounded flex items-center gap-0.5`}
+                  >
+                    +{selected.quantity}
+                    <Minus size={10} />
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SelectedCardsSummaryProps {
+  cards: Map<string, SelectedCard>;
+  onRemove: (cardId: string) => void;
+  label: string;
+  emptyLabel: string;
+  color: 'green' | 'blue';
+}
+
+function SelectedCardsSummary({ cards, onRemove, label, emptyLabel, color }: SelectedCardsSummaryProps) {
+  const bgColor = color === 'green' ? 'bg-green-900/50' : 'bg-blue-900/50';
+  const textColor = color === 'green' ? 'text-green-400' : 'text-blue-400';
+
+  // Calculate total price
+  const totalPrice = Array.from(cards.values()).reduce((total, item) => {
+    const price = item.card.prices?.usd ? parseFloat(item.card.prices.usd) : 0;
+    return total + (price * item.quantity);
+  }, 0);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1">
+        <h4 className={`text-xs font-semibold ${textColor}`}>{label}:</h4>
+        {cards.size > 0 && (
+          <span className={`text-xs font-semibold ${textColor}`}>
+            ${totalPrice.toFixed(2)}
+          </span>
+        )}
+      </div>
+      {cards.size === 0 ? (
+        <p className="text-gray-500 text-xs">{emptyLabel}</p>
+      ) : (
+        <div className="flex flex-wrap gap-1">
+          {Array.from(cards.values()).map((item) => (
+            <div
+              key={item.card.id}
+              className={`flex items-center gap-1 ${bgColor} px-1.5 py-0.5 rounded text-xs`}
+            >
+              <span className="truncate max-w-[80px]">{item.card.name}</span>
+              <span className={textColor}>x{item.quantity}</span>
+              <button
+                onClick={() => onRemove(item.card.id)}
+                className="text-red-400 active:text-red-300"
+              >
+                <Minus size={12} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============ MAIN COMPONENT ============
+
+interface TradeCreatorProps {
+  receiverId: string;
+  receiverUsername: string;
+  receiverCollection: CollectionItem[];
+  onClose: () => void;
+  onTradeCreated: () => void;
+  editMode?: boolean;
+  existingTradeId?: string;
+  initialSenderCards?: Card[];
+  initialReceiverCards?: Card[];
+  initialMessage?: string;
+}
+
+type MobileStep = 'want' | 'give' | 'review';
+
 export default function TradeCreator({
   receiverId,
   receiverUsername,
   receiverCollection,
   onClose,
   onTradeCreated,
+  editMode = false,
+  existingTradeId,
+  initialSenderCards = [],
+  initialReceiverCards = [],
+  initialMessage = '',
 }: TradeCreatorProps) {
   const { user } = useAuth();
+  const toast = useToast();
   const [myCollection, setMyCollection] = useState<CollectionItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
-  const [message, setMessage] = useState('');
+  const [message, setMessage] = useState(initialMessage);
+
+  const [isGiftMode, setIsGiftMode] = useState(false);
+  const [mobileStep, setMobileStep] = useState<MobileStep>('want');
 
-  // Cards I'm offering (from my collection)
   const [myOfferedCards, setMyOfferedCards] = useState<Map<string, SelectedCard>>(new Map());
-  // Cards I want (from their collection)
   const [wantedCards, setWantedCards] = useState<Map<string, SelectedCard>>(new Map());
 
+  const [myCollectionSearch, setMyCollectionSearch] = useState('');
+  const [theirCollectionSearch, setTheirCollectionSearch] = useState('');
+
   useEffect(() => {
     loadMyCollection();
   }, [user]);
 
+  useEffect(() => {
+    if (isGiftMode) {
+      setWantedCards(new Map());
+      setMobileStep('give');
+    } else {
+      setMobileStep('want');
+    }
+  }, [isGiftMode]);
+
+  // Pre-populate cards in edit mode
+  useEffect(() => {
+    if (!editMode || !myCollection.length || !receiverCollection.length) return;
+    if (initialSenderCards.length === 0 && initialReceiverCards.length === 0) return;
+
+    console.log('Pre-populating cards', {
+      initialSenderCards: initialSenderCards.length,
+      initialReceiverCards: initialReceiverCards.length,
+      myCollection: myCollection.length,
+      receiverCollection: receiverCollection.length
+    });
+
+    // Pre-populate sender cards with their quantities
+    const senderMap = new Map<string, SelectedCard>();
+    initialSenderCards.forEach(card => {
+      const collectionItem = myCollection.find(c => c.card.id === card.id);
+      if (collectionItem) {
+        // Find the quantity from trade items if card has quantity property
+        const quantity = (card as any).quantity || 1;
+        console.log('Adding sender card:', card.name, 'qty:', quantity);
+        senderMap.set(card.id, {
+          card: card,
+          quantity: quantity,
+          maxQuantity: collectionItem.quantity,
+        });
+      } else {
+        console.log('Card not found in my collection:', card.name, card.id);
+      }
+    });
+    setMyOfferedCards(senderMap);
+
+    // Pre-populate receiver cards with their quantities
+    const receiverMap = new Map<string, SelectedCard>();
+    initialReceiverCards.forEach(card => {
+      const collectionItem = receiverCollection.find(c => c.card.id === card.id);
+      if (collectionItem) {
+        // Find the quantity from trade items if card has quantity property
+        const quantity = (card as any).quantity || 1;
+        console.log('Adding receiver card:', card.name, 'qty:', quantity);
+        receiverMap.set(card.id, {
+          card: card,
+          quantity: quantity,
+          maxQuantity: collectionItem.quantity,
+        });
+      } else {
+        console.log('Card not found in their collection:', card.name, card.id);
+      }
+    });
+    setWantedCards(receiverMap);
+  }, [editMode, myCollection, receiverCollection, initialSenderCards, initialReceiverCards]);
+
   const loadMyCollection = async () => {
     if (!user) return;
     setLoading(true);
@@ -131,36 +368,49 @@ export default function TradeCreator({
   const handleSubmit = async () => {
     if (!user) return;
 
-    // At least one side should have cards (allowing gifts)
     if (myOfferedCards.size === 0 && wantedCards.size === 0) {
-      alert('Please select at least one card to trade or gift');
+      toast.warning('Please select at least one card to trade or gift');
       return;
     }
 
     setSubmitting(true);
     try {
-      const senderCards = Array.from(myOfferedCards.values()).map((item) => ({
+      const myCards = Array.from(myOfferedCards.values()).map((item) => ({
         cardId: item.card.id,
         quantity: item.quantity,
       }));
 
-      const receiverCards = Array.from(wantedCards.values()).map((item) => ({
+      const theirCards = Array.from(wantedCards.values()).map((item) => ({
         cardId: item.card.id,
         quantity: item.quantity,
       }));
 
-      await createTrade({
-        senderId: user.id,
-        receiverId,
+      if (editMode && existingTradeId) {
+        // Update existing trade
+        await updateTrade({
+          tradeId: existingTradeId,
+          editorId: user.id,
           message: message || undefined,
-        senderCards,
-        receiverCards,
+          myCards,
+          theirCards,
         });
+        toast.success('Trade updated!');
+      } else {
+        // Create new trade
+        await createTrade({
+          user1Id: user.id,
+          user2Id: receiverId,
+          message: message || undefined,
+          user1Cards: myCards,
+          user2Cards: theirCards,
+        });
+        toast.success('Trade offer sent!');
+      }
 
       onTradeCreated();
     } catch (error) {
-      console.error('Error creating trade:', error);
-      alert('Failed to create trade');
+      console.error('Error with trade:', error);
+      toast.error(editMode ? 'Failed to update trade' : 'Failed to create trade');
     } finally {
       setSubmitting(false);
     }
@@ -169,179 +419,302 @@ export default function TradeCreator({
   const isGift = myOfferedCards.size > 0 && wantedCards.size === 0;
   const isRequest = myOfferedCards.size === 0 && wantedCards.size > 0;
 
+  const goToNextStep = () => {
+    if (mobileStep === 'want') setMobileStep('give');
+    else if (mobileStep === 'give') setMobileStep('review');
+  };
+
+  const goToPrevStep = () => {
+    if (mobileStep === 'review') setMobileStep('give');
+    else if (mobileStep === 'give' && !isGiftMode) setMobileStep('want');
+  };
+
+  const canSubmit = myOfferedCards.size > 0 || wantedCards.size > 0;
+
+  if (loading) {
     return (
-    <div className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
-      <div className="bg-gray-800 rounded-lg w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-gray-700">
-          <div className="flex items-center gap-2">
-            <ArrowLeftRight size={24} className="text-blue-400" />
-            <h2 className="text-xl font-bold">Trade with {receiverUsername}</h2>
+      <div className="fixed inset-0 bg-black/80 z-[110] flex items-center justify-center">
+        <Loader2 className="animate-spin text-blue-500" size={48} />
       </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/80 z-[110] flex items-center justify-center p-0 md:p-4">
+      <div className="bg-gray-800 w-full h-full md:rounded-lg md:w-full md:max-w-6xl md:max-h-[90vh] overflow-hidden flex flex-col">
+
+        {/* ============ MOBILE VIEW ============ */}
+        <div className="flex flex-col h-full md:hidden">
+          <div className="flex items-center justify-between p-3 border-b border-gray-700">
+            <div className="flex items-center gap-2 min-w-0">
+              <ArrowLeftRight size={20} className="text-blue-400 flex-shrink-0" />
+              <h2 className="font-bold truncate">Trade with {receiverUsername}</h2>
+            </div>
+            <button onClick={onClose} className="p-2 -mr-2 active:bg-gray-700 rounded-lg">
+              <X size={20} />
+            </button>
+          </div>
+
+          <div className="p-3 border-b border-gray-700">
+            <label className="flex items-center gap-3 cursor-pointer">
+              <div
+                className={`relative w-12 h-6 rounded-full transition-colors ${
+                  isGiftMode ? 'bg-purple-600' : 'bg-gray-600'
+                }`}
+                onClick={() => setIsGiftMode(!isGiftMode)}
+              >
+                <div
+                  className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
+                    isGiftMode ? 'translate-x-7' : 'translate-x-1'
+                  }`}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Gift size={18} className={isGiftMode ? 'text-purple-400' : 'text-gray-400'} />
+                <span className={`text-sm ${isGiftMode ? 'text-purple-400' : 'text-gray-400'}`}>
+                  Gift (I don't want anything back)
+                </span>
+              </div>
+            </label>
+          </div>
+
+          <div className="flex items-center justify-center gap-2 p-2 bg-gray-900/50">
+            {!isGiftMode && (
+              <>
+                <div className={`w-2 h-2 rounded-full ${mobileStep === 'want' ? 'bg-blue-500' : 'bg-gray-600'}`} />
+                <span className={`text-xs ${mobileStep === 'want' ? 'text-blue-400' : 'text-gray-500'}`}>I Want</span>
+                <ArrowRight size={14} className="text-gray-500" />
+              </>
+            )}
+            <div className={`w-2 h-2 rounded-full ${mobileStep === 'give' ? 'bg-green-500' : 'bg-gray-600'}`} />
+            <span className={`text-xs ${mobileStep === 'give' ? 'text-green-400' : 'text-gray-500'}`}>I Give</span>
+            <ArrowRight size={14} className="text-gray-500" />
+            <div className={`w-2 h-2 rounded-full ${mobileStep === 'review' ? 'bg-purple-500' : 'bg-gray-600'}`} />
+            <span className={`text-xs ${mobileStep === 'review' ? 'text-purple-400' : 'text-gray-500'}`}>Review</span>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-3">
+            {mobileStep === 'want' && !isGiftMode && (
+              <div>
+                <h3 className="text-sm font-semibold text-blue-400 mb-3">
+                  Select cards from {receiverUsername}'s collection
+                </h3>
+                <CollectionGrid
+                  items={receiverCollection}
+                  selectedCards={wantedCards}
+                  onAdd={addToWanted}
+                  onRemove={removeFromWanted}
+                  emptyMessage="Their collection is empty"
+                  selectionColor="blue"
+                  searchValue={theirCollectionSearch}
+                  onSearchChange={setTheirCollectionSearch}
+                  searchPlaceholder="Search their cards..."
+                />
+              </div>
+            )}
+
+            {mobileStep === 'give' && (
+              <div>
+                <h3 className="text-sm font-semibold text-green-400 mb-3">
+                  Select cards to {isGiftMode ? 'gift' : 'offer'}
+                </h3>
+                <CollectionGrid
+                  items={myCollection}
+                  selectedCards={myOfferedCards}
+                  onAdd={addToOffer}
+                  onRemove={removeFromOffer}
+                  emptyMessage="Your collection is empty"
+                  selectionColor="green"
+                  searchValue={myCollectionSearch}
+                  onSearchChange={setMyCollectionSearch}
+                  searchPlaceholder="Search my cards..."
+                />
+              </div>
+            )}
+
+            {mobileStep === 'review' && (
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold text-purple-400">Review Trade</h3>
+                <div className="bg-gray-900/50 rounded-lg p-3 space-y-3">
+                  <SelectedCardsSummary
+                    cards={myOfferedCards}
+                    onRemove={removeFromOffer}
+                    label="I Give"
+                    emptyLabel="Nothing (requesting cards)"
+                    color="green"
+                  />
+                  {!isGiftMode && (
+                    <SelectedCardsSummary
+                      cards={wantedCards}
+                      onRemove={removeFromWanted}
+                      label="I Want"
+                      emptyLabel="Nothing (sending gift)"
+                      color="blue"
+                    />
+                  )}
+                </div>
+                <div>
+                  <label className="text-xs text-gray-400 mb-1 block">Message (optional)</label>
+                  <input
+                    type="text"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder="Add a message..."
+                    className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="border-t border-gray-700 p-3 flex gap-2">
+            {(mobileStep !== 'want' && !isGiftMode) || (mobileStep !== 'give' && isGiftMode) ? (
+              <button
+                onClick={goToPrevStep}
+                disabled={mobileStep === 'give' && isGiftMode}
+                className="flex items-center justify-center gap-1 px-4 py-2.5 bg-gray-700 active:bg-gray-600 disabled:opacity-50 rounded-lg flex-1"
+              >
+                <ArrowLeft size={18} />
+                Back
+              </button>
+            ) : (
               <button
                 onClick={onClose}
-            className="p-2 hover:bg-gray-700 rounded-lg transition"
+                className="flex items-center justify-center gap-1 px-4 py-2.5 bg-gray-700 active:bg-gray-600 rounded-lg flex-1"
               >
+                Cancel
+              </button>
+            )}
+
+            {mobileStep === 'review' ? (
+              <button
+                onClick={handleSubmit}
+                disabled={submitting || !canSubmit}
+                className="flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 active:bg-blue-700 disabled:bg-gray-600 rounded-lg flex-1"
+              >
+                {submitting ? (
+                  <Loader2 className="animate-spin" size={18} />
+                ) : isGift ? (
+                  <>
+                    <Gift size={18} />
+                    Send Gift
+                  </>
+                ) : isRequest ? (
+                  <>
+                    <Send size={18} />
+                    Request
+                  </>
+                ) : (
+                  <>
+                    <Send size={18} />
+                    Send Trade
+                  </>
+                )}
+              </button>
+            ) : (
+              <button
+                onClick={goToNextStep}
+                className="flex items-center justify-center gap-1 px-4 py-2.5 bg-blue-600 active:bg-blue-700 rounded-lg flex-1"
+              >
+                Next
+                <ArrowRight size={18} />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* ============ DESKTOP VIEW ============ */}
+        <div className="hidden md:flex md:flex-col h-full">
+          <div className="flex items-center justify-between p-4 border-b border-gray-700">
+            <div className="flex items-center gap-3">
+              <ArrowLeftRight size={24} className="text-blue-400" />
+              <h2 className="text-xl font-bold">{editMode ? 'Edit Trade' : `Trade with ${receiverUsername}`}</h2>
+              <label className="flex items-center gap-2 ml-4 cursor-pointer">
+                <div
+                  className={`relative w-10 h-5 rounded-full transition-colors ${
+                    isGiftMode ? 'bg-purple-600' : 'bg-gray-600'
+                  }`}
+                  onClick={() => setIsGiftMode(!isGiftMode)}
+                >
+                  <div
+                    className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform ${
+                      isGiftMode ? 'translate-x-5' : 'translate-x-0.5'
+                    }`}
+                  />
+                </div>
+                <Gift size={16} className={isGiftMode ? 'text-purple-400' : 'text-gray-400'} />
+                <span className={`text-sm ${isGiftMode ? 'text-purple-400' : 'text-gray-400'}`}>Gift mode</span>
+              </label>
+            </div>
+            <button onClick={onClose} className="p-2 hover:bg-gray-700 rounded-lg transition">
               <X size={24} />
             </button>
           </div>
 
-        {/* Content */}
-        <div className="flex-1 overflow-hidden flex flex-col md:flex-row">
-          {/* My Collection (Left) */}
-          <div className="flex-1 p-4 border-b md:border-b-0 md:border-r border-gray-700 overflow-y-auto">
-            <h3 className="text-lg font-semibold mb-3 text-green-400">
-              My Collection (I give)
-            </h3>
-            {loading ? (
-              <div className="flex justify-center py-8">
-                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
-              </div>
-            ) : myCollection.length === 0 ? (
-              <p className="text-gray-400 text-center py-4">Your collection is empty</p>
-            ) : (
-              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
-                {myCollection.map(({ card, quantity }) => {
-                  const offered = myOfferedCards.get(card.id);
-                  const remainingQty = quantity - (offered?.quantity || 0);
-                  return (
-                    <div
-                      key={card.id}
-                      className={`relative cursor-pointer rounded-lg overflow-hidden transition ${
-                        offered ? 'ring-2 ring-green-500' : 'hover:ring-2 hover:ring-gray-500'
-                      }`}
-                      onClick={() => remainingQty > 0 && addToOffer(card, quantity)}
-                    >
-                      <img
-                        src={card.image_uris?.small}
-                        alt={card.name}
-                        className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
+          <div className="flex-1 overflow-hidden flex">
+            <div className="flex-1 p-4 border-r border-gray-700 overflow-y-auto">
+              <h3 className="text-lg font-semibold mb-3 text-green-400">My Collection (I give)</h3>
+              <CollectionGrid
+                items={myCollection}
+                selectedCards={myOfferedCards}
+                onAdd={addToOffer}
+                onRemove={removeFromOffer}
+                emptyMessage="Your collection is empty"
+                selectionColor="green"
+                searchValue={myCollectionSearch}
+                onSearchChange={setMyCollectionSearch}
+                searchPlaceholder="Search my cards..."
               />
-                      <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded">
-                        {remainingQty}/{quantity}
-                      </div>
-                      {offered && (
-                        <div className="absolute bottom-1 left-1 bg-green-600 text-white text-xs px-1.5 py-0.5 rounded">
-                          +{offered.quantity}
-                        </div>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            )}
             </div>
 
-          {/* Their Collection (Right) */}
+            {!isGiftMode && (
               <div className="flex-1 p-4 overflow-y-auto">
                 <h3 className="text-lg font-semibold mb-3 text-blue-400">
                   {receiverUsername}'s Collection (I want)
                 </h3>
-            {receiverCollection.length === 0 ? (
-              <p className="text-gray-400 text-center py-4">Their collection is empty</p>
-            ) : (
-              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
-                {receiverCollection.map(({ card, quantity }) => {
-                  const wanted = wantedCards.get(card.id);
-                  const remainingQty = quantity - (wanted?.quantity || 0);
-                  return (
-                    <div
-                      key={card.id}
-                      className={`relative cursor-pointer rounded-lg overflow-hidden transition ${
-                        wanted ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-gray-500'
-                      }`}
-                      onClick={() => remainingQty > 0 && addToWanted(card, quantity)}
-                    >
-                      <img
-                        src={card.image_uris?.small}
-                        alt={card.name}
-                        className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
+                <CollectionGrid
+                  items={receiverCollection}
+                  selectedCards={wantedCards}
+                  onAdd={addToWanted}
+                  onRemove={removeFromWanted}
+                  emptyMessage="Their collection is empty"
+                  selectionColor="blue"
+                  searchValue={theirCollectionSearch}
+                  onSearchChange={setTheirCollectionSearch}
+                  searchPlaceholder="Search their cards..."
                 />
-                      <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded">
-                        {remainingQty}/{quantity}
-                      </div>
-                      {wanted && (
-                        <div className="absolute bottom-1 left-1 bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded">
-                          +{wanted.quantity}
               </div>
             )}
           </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </div>
 
-        {/* Trade Summary */}
           <div className="border-t border-gray-700 p-4">
-          <div className="flex flex-col md:flex-row gap-4 mb-4">
-            {/* I Give */}
-            <div className="flex-1">
-              <h4 className="text-sm font-semibold text-green-400 mb-2">I Give:</h4>
-              {myOfferedCards.size === 0 ? (
-                <p className="text-gray-500 text-sm">Nothing selected (gift request)</p>
-              ) : (
-                <div className="flex flex-wrap gap-2">
-                  {Array.from(myOfferedCards.values()).map((item) => (
-                    <div
-                      key={item.card.id}
-                      className="flex items-center gap-1 bg-green-900/50 px-2 py-1 rounded text-sm"
-                    >
-                      <span>{item.card.name}</span>
-                      <span className="text-green-400">x{item.quantity}</span>
-                      <button
-                        onClick={() => removeFromOffer(item.card.id)}
-                        className="ml-1 text-red-400 hover:text-red-300"
-                      >
-                        <Minus size={14} />
-                      </button>
-                    </div>
-                  ))}
-                </div>
+            <div className="flex gap-6 mb-4">
+              <SelectedCardsSummary
+                cards={myOfferedCards}
+                onRemove={removeFromOffer}
+                label="I Give"
+                emptyLabel="Nothing selected (gift request)"
+                color="green"
+              />
+              {!isGiftMode && (
+                <SelectedCardsSummary
+                  cards={wantedCards}
+                  onRemove={removeFromWanted}
+                  label="I Want"
+                  emptyLabel="Nothing selected (gift)"
+                  color="blue"
+                />
               )}
             </div>
 
-            {/* I Want */}
-            <div className="flex-1">
-              <h4 className="text-sm font-semibold text-blue-400 mb-2">I Want:</h4>
-              {wantedCards.size === 0 ? (
-                <p className="text-gray-500 text-sm">Nothing selected (gift)</p>
-              ) : (
-                <div className="flex flex-wrap gap-2">
-                  {Array.from(wantedCards.values()).map((item) => (
-                    <div
-                      key={item.card.id}
-                      className="flex items-center gap-1 bg-blue-900/50 px-2 py-1 rounded text-sm"
-                    >
-                      <span>{item.card.name}</span>
-                      <span className="text-blue-400">x{item.quantity}</span>
-                      <button
-                        onClick={() => removeFromWanted(item.card.id)}
-                        className="ml-1 text-red-400 hover:text-red-300"
-                      >
-                        <Minus size={14} />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Message */}
-          <div className="mb-4">
+            <div className="flex items-center gap-4 mb-4">
               <input
                 type="text"
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
                 placeholder="Add a message (optional)"
-              className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               />
-          </div>
-
-          {/* Submit */}
-          <div className="flex justify-end gap-3">
               <button
                 onClick={onClose}
                 className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition"
@@ -350,11 +723,11 @@ export default function TradeCreator({
               </button>
               <button
                 onClick={handleSubmit}
-              disabled={submitting || (myOfferedCards.size === 0 && wantedCards.size === 0)}
-              className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg transition"
+                disabled={submitting || !canSubmit}
+                className="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg transition"
               >
                 {submitting ? (
-                <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div>
+                  <Loader2 className="animate-spin" size={20} />
                 ) : isGift ? (
                   <>
                     <Gift size={20} />
@@ -376,5 +749,6 @@ export default function TradeCreator({
           </div>
         </div>
       </div>
+    </div>
   );
 }

src/components/TradeDetail.tsx

@@ -0,0 +1,472 @@
+import React, { useState, useEffect } from 'react';
+import { X, Check, ArrowLeftRight, DollarSign, Loader2, Edit, RefreshCcw, History } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { useToast } from '../contexts/ToastContext';
+import { Trade, TradeHistoryEntry, getTradeVersionHistory } from '../services/tradesService';
+import { getUserCollection, getCardsByIds } from '../services/api';
+import { Card } from '../types';
+import TradeCreator from './TradeCreator';
+
+interface TradeDetailProps {
+  trade: Trade;
+  onClose: () => void;
+  onAccept: (tradeId: string) => Promise<void>;
+  onDecline: (tradeId: string) => Promise<void>;
+  onTradeUpdated: () => void;
+}
+
+interface TradeCardItem {
+  card: Card;
+  quantity: number;
+}
+
+interface CollectionItem {
+  card: Card;
+  quantity: number;
+}
+
+function calculateTotalPrice(items: TradeCardItem[]): number {
+  return items.reduce((total, { card, quantity }) => {
+    const price = card.prices?.usd ? parseFloat(card.prices.usd) : 0;
+    return total + (price * quantity);
+  }, 0);
+}
+
+export default function TradeDetail({
+  trade,
+  onClose,
+  onAccept,
+  onDecline,
+  onTradeUpdated,
+}: TradeDetailProps) {
+  const { user } = useAuth();
+  const toast = useToast();
+  const [loading, setLoading] = useState(true);
+  const [processing, setProcessing] = useState(false);
+  const [senderCards, setSenderCards] = useState<TradeCardItem[]>([]);
+  const [receiverCards, setReceiverCards] = useState<TradeCardItem[]>([]);
+  const [showHistory, setShowHistory] = useState(false);
+  const [history, setHistory] = useState<TradeHistoryEntry[]>([]);
+  const [showEditMode, setShowEditMode] = useState(false);
+  const [editReceiverCollection, setEditReceiverCollection] = useState<CollectionItem[]>([]);
+
+  const isUser1 = trade.user1_id === user?.id;
+  const isUser2 = trade.user2_id === user?.id;
+  const otherUser = isUser1 ? trade.user2 : trade.user1;
+  const myUserId = user?.id || '';
+  const otherUserId = isUser1 ? trade.user2_id : trade.user1_id;
+
+  useEffect(() => {
+    loadTradeCards();
+    loadTradeHistory();
+  }, [trade]);
+
+  const loadTradeCards = async () => {
+    setLoading(true);
+    try {
+      const allCardIds = trade.items?.map(item => item.card_id) || [];
+      if (allCardIds.length === 0) {
+        setSenderCards([]);
+        setReceiverCards([]);
+        return;
+      }
+
+      const cards = await getCardsByIds(allCardIds);
+      const cardMap = new Map<string, Card>();
+      cards.forEach(card => cardMap.set(card.id, card));
+
+      const myItems: TradeCardItem[] = [];
+      const theirItems: TradeCardItem[] = [];
+
+      trade.items?.forEach(item => {
+        const card = cardMap.get(item.card_id);
+        if (!card) return;
+
+        if (item.owner_id === myUserId) {
+          myItems.push({ card, quantity: item.quantity });
+        } else {
+          theirItems.push({ card, quantity: item.quantity });
+        }
+      });
+
+      setSenderCards(myItems);
+      setReceiverCards(theirItems);
+    } catch (error) {
+      console.error('Error loading trade cards:', error);
+      toast.error('Failed to load trade details');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadTradeHistory = async () => {
+    try {
+      const historyData = await getTradeVersionHistory(trade.id);
+      setHistory(historyData);
+    } catch (error) {
+      console.error('Error loading trade history:', error);
+    }
+  };
+
+  const handleAccept = async () => {
+    setProcessing(true);
+    try {
+      await onAccept(trade.id);
+      onClose();
+    } catch (error) {
+      console.error('Error accepting trade:', error);
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleDecline = async () => {
+    setProcessing(true);
+    try {
+      await onDecline(trade.id);
+      onClose();
+    } catch (error) {
+      console.error('Error declining trade:', error);
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleEdit = async () => {
+    try {
+      // Load the other user's collection for editing
+      const collectionMap = await getUserCollection(otherUserId);
+      const cardIds = Array.from(collectionMap.keys());
+      const cards = await getCardsByIds(cardIds);
+      const collection = cards.map((card) => ({
+        card,
+        quantity: collectionMap.get(card.id) || 0,
+      }));
+
+      setEditReceiverCollection(collection);
+      setShowEditMode(true);
+    } catch (error) {
+      console.error('Error loading collection for edit:', error);
+      toast.error('Failed to load collection');
+    }
+  };
+
+  // In the symmetric model, counter-offer is the same as edit
+  const handleCounterOffer = handleEdit;
+
+  // senderCards = myCards, receiverCards = theirCards (already calculated correctly)
+  const yourCards = senderCards;
+  const theirCards = receiverCards;
+  const yourPrice = calculateTotalPrice(yourCards);
+  const theirPrice = calculateTotalPrice(theirCards);
+
+  // For edit mode, pre-populate with current cards
+  // In the symmetric model, both edit and counter-offer use the same perspective:
+  // - Your cards (what you're offering)
+  // - Their cards (what you want)
+  // Include quantity in the card object so TradeCreator can preserve it
+  const editInitialSenderCards = yourCards.map(c => ({ ...c.card, quantity: c.quantity }));
+  const editInitialReceiverCards = theirCards.map(c => ({ ...c.card, quantity: c.quantity }));
+
+  if (showEditMode) {
+    return (
+      <TradeCreator
+        receiverId={otherUserId}
+        receiverUsername={otherUser?.username || 'User'}
+        receiverCollection={editReceiverCollection}
+        onClose={() => {
+          setShowEditMode(false);
+          onClose();
+        }}
+        onTradeCreated={() => {
+          setShowEditMode(false);
+          onTradeUpdated();
+          onClose();
+        }}
+        editMode={true}
+        existingTradeId={trade.id}
+        initialSenderCards={editInitialSenderCards}
+        initialReceiverCards={editInitialReceiverCards}
+        initialMessage={trade.message || ''}
+      />
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-end md:items-center justify-center p-0 md:p-4">
+      <div className="bg-gray-900 w-full md:max-w-4xl md:rounded-2xl flex flex-col max-h-screen md:max-h-[90vh]">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-800">
+          <div className="flex items-center gap-2">
+            <ArrowLeftRight size={20} className="text-blue-400" />
+            <div>
+              <h2 className="text-lg font-bold">Trade Details {trade.version > 1 && `(v${trade.version})`}</h2>
+              <p className="text-sm text-gray-400">
+                With: {otherUser?.username}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-800 rounded-lg transition"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="animate-spin text-blue-500" size={48} />
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                {/* Your Side */}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <h3 className="font-semibold text-green-400">
+                      You Give
+                    </h3>
+                    <div className="flex items-center gap-1 text-green-400 text-sm">
+                      <DollarSign size={14} />
+                      {yourPrice.toFixed(2)}
+                    </div>
+                  </div>
+
+                  {yourCards.length === 0 ? (
+                    <p className="text-gray-500 text-center py-8">Gift (no cards)</p>
+                  ) : (
+                    <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                      {yourCards.map((item, idx) => (
+                        <div key={idx} className="relative rounded-lg overflow-hidden">
+                          <img
+                            src={item.card.image_uris?.small || item.card.image_uris?.normal}
+                            alt={item.card.name}
+                            className="w-full h-auto"
+                          />
+                          {item.quantity > 1 && (
+                            <div className="absolute top-1 right-1 bg-green-600 text-white text-xs px-1.5 py-0.5 rounded font-semibold">
+                              x{item.quantity}
+                            </div>
+                          )}
+                          {item.card.prices?.usd && (
+                            <div className="absolute bottom-1 left-1 bg-gray-900/90 text-white text-[10px] px-1 py-0.5 rounded">
+                              ${item.card.prices.usd}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {/* Their Side */}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <h3 className="font-semibold text-blue-400">
+                      You Receive
+                    </h3>
+                    <div className="flex items-center gap-1 text-blue-400 text-sm">
+                      <DollarSign size={14} />
+                      {theirPrice.toFixed(2)}
+                    </div>
+                  </div>
+
+                  {theirCards.length === 0 ? (
+                    <p className="text-gray-500 text-center py-8">Gift (no cards)</p>
+                  ) : (
+                    <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                      {theirCards.map((item, idx) => (
+                        <div key={idx} className="relative rounded-lg overflow-hidden">
+                          <img
+                            src={item.card.image_uris?.small || item.card.image_uris?.normal}
+                            alt={item.card.name}
+                            className="w-full h-auto"
+                          />
+                          {item.quantity > 1 && (
+                            <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded font-semibold">
+                              x{item.quantity}
+                            </div>
+                          )}
+                          {item.card.prices?.usd && (
+                            <div className="absolute bottom-1 left-1 bg-gray-900/90 text-white text-[10px] px-1 py-0.5 rounded">
+                              ${item.card.prices.usd}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Message */}
+              {trade.message && (
+                <div className="p-3 bg-gray-800 rounded-lg">
+                  <p className="text-sm text-gray-400 mb-1">Message:</p>
+                  <p className="text-sm">{trade.message}</p>
+                </div>
+              )}
+
+              {/* Price Difference */}
+              {!loading && (yourPrice > 0 || theirPrice > 0) && (
+                <div className="p-3 bg-gray-800 rounded-lg">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-400">Value Difference:</span>
+                    <span className={Math.abs(yourPrice - theirPrice) > 5 ? 'text-yellow-400' : 'text-gray-300'}>
+                      ${Math.abs(yourPrice - theirPrice).toFixed(2)}
+                      {yourPrice > theirPrice ? ' in your favor' : yourPrice < theirPrice ? ' in their favor' : ' (balanced)'}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              {/* History */}
+              {history.length > 0 && (
+                <div>
+                  <button
+                    onClick={() => setShowHistory(!showHistory)}
+                    className="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300"
+                  >
+                    <History size={16} />
+                    {showHistory ? 'Hide' : 'Show'} History ({history.length} {history.length === 1 ? 'version' : 'versions'})
+                  </button>
+
+                  {showHistory && (
+                    <div className="mt-3 space-y-2">
+                      {history.map((entry) => (
+                        <div key={entry.id} className="p-3 bg-gray-800 rounded-lg text-sm">
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="font-semibold text-purple-400">Version {entry.version}</span>
+                            <span className="text-gray-400 text-xs">
+                              Edited by {entry.editor?.username} • {new Date(entry.created_at).toLocaleDateString()}
+                            </span>
+                          </div>
+                          {entry.message && (
+                            <p className="text-gray-300 text-xs">{entry.message}</p>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Actions - Only for pending trades */}
+        {trade.status === 'pending' && !loading && (
+          <div className="border-t border-gray-800 p-4 space-y-2">
+            {/* Only the user who DIDN'T make the last edit can respond */}
+            {trade.editor_id && trade.editor_id !== user?.id ? (
+              /* User receives the last edit - can accept/decline/counter */
+              <>
+                <div className="flex gap-2">
+                  <button
+                    onClick={handleAccept}
+                    disabled={processing}
+                    className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                  >
+                    {processing ? (
+                      <Loader2 className="animate-spin" size={18} />
+                    ) : (
+                      <>
+                        <Check size={18} />
+                        Accept Trade
+                      </>
+                    )}
+                  </button>
+                  <button
+                    onClick={handleDecline}
+                    disabled={processing}
+                    className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                  >
+                    <X size={18} />
+                    Decline
+                  </button>
+                </div>
+                <button
+                  onClick={handleCounterOffer}
+                  disabled={processing}
+                  className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                >
+                  <RefreshCcw size={18} />
+                  Make Counter Offer
+                </button>
+              </>
+            ) : trade.editor_id === user?.id ? (
+              /* User made the last edit - can still edit while waiting for response */
+              <>
+                <p className="text-center text-gray-400 text-sm py-2">
+                  Waiting for {otherUser?.username} to respond...
+                </p>
+                <button
+                  onClick={handleEdit}
+                  disabled={processing}
+                  className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                >
+                  <Edit size={18} />
+                  Modify Your Offer
+                </button>
+              </>
+            ) : (
+              /* No editor yet (initial trade) */
+              <>
+                {isUser1 ? (
+                  /* User1 (initiator) can edit their initial offer */
+                  <button
+                    onClick={handleEdit}
+                    disabled={processing}
+                    className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                  >
+                    <Edit size={18} />
+                    Edit Trade Offer
+                  </button>
+                ) : (
+                  /* User2 (partner) can accept/decline/counter */
+                  <>
+                    <div className="flex gap-2">
+                      <button
+                        onClick={handleAccept}
+                        disabled={processing}
+                        className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                      >
+                        {processing ? (
+                          <Loader2 className="animate-spin" size={18} />
+                        ) : (
+                          <>
+                            <Check size={18} />
+                            Accept Trade
+                          </>
+                        )}
+                      </button>
+                      <button
+                        onClick={handleDecline}
+                        disabled={processing}
+                        className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                      >
+                        <X size={18} />
+                        Decline
+                      </button>
+                    </div>
+                    <button
+                      onClick={handleCounterOffer}
+                      disabled={processing}
+                      className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                    >
+                      <RefreshCcw size={18} />
+                      Make Counter Offer
+                    </button>
+                  </>
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/Trades.tsx

@@ -1,326 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ArrowLeftRight, Check, X, Clock, History, Plus, Package } from 'lucide-react';
-import { useAuth } from '../contexts/AuthContext';
-import {
-  getTrades,
-  getTradeHistory,
-  acceptTrade,
-  declineTrade,
-  cancelTrade,
-  Trade,
-  TradeItem,
-} from '../services/tradesService';
-import { getCardsByIds } from '../services/api';
-import { Card } from '../types';
-
-type Tab = 'pending' | 'history';
-
-interface TradeWithCards extends Trade {
-  cardDetails?: Map<string, Card>;
-}
-
-export default function Trades() {
-  const { user } = useAuth();
-  const [activeTab, setActiveTab] = useState<Tab>('pending');
-  const [pendingTrades, setPendingTrades] = useState<TradeWithCards[]>([]);
-  const [tradeHistory, setTradeHistory] = useState<TradeWithCards[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [processingTradeId, setProcessingTradeId] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (user) {
-      loadTrades();
-    }
-  }, [user]);
-
-  const loadTrades = async () => {
-    if (!user) return;
-    setLoading(true);
-    try {
-      const [pending, history] = await Promise.all([
-        getTrades(user.id).then((trades) => trades.filter((t) => t.status === 'pending')),
-        getTradeHistory(user.id),
-      ]);
-
-      // Load card details for all trades
-      const allCardIds = new Set<string>();
-      [...pending, ...history].forEach((trade) => {
-        trade.items?.forEach((item) => allCardIds.add(item.card_id));
-      });
-
-      let cardDetails = new Map<string, Card>();
-      if (allCardIds.size > 0) {
-        const cards = await getCardsByIds(Array.from(allCardIds));
-        cards.forEach((card) => cardDetails.set(card.id, card));
-      }
-
-      setPendingTrades(pending.map((t) => ({ ...t, cardDetails })));
-      setTradeHistory(history.map((t) => ({ ...t, cardDetails })));
-    } catch (error) {
-      console.error('Error loading trades:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleAccept = async (tradeId: string) => {
-    setProcessingTradeId(tradeId);
-    try {
-      const success = await acceptTrade(tradeId);
-      if (success) {
-        await loadTrades();
-      } else {
-        alert('Failed to execute trade. Please check your collection.');
-      }
-    } catch (error) {
-      console.error('Error accepting trade:', error);
-      alert('Error accepting trade');
-    } finally {
-      setProcessingTradeId(null);
-    }
-  };
-
-  const handleDecline = async (tradeId: string) => {
-    setProcessingTradeId(tradeId);
-    try {
-      await declineTrade(tradeId);
-      await loadTrades();
-    } catch (error) {
-      console.error('Error declining trade:', error);
-    } finally {
-      setProcessingTradeId(null);
-    }
-  };
-
-  const handleCancel = async (tradeId: string) => {
-    if (!confirm('Cancel this trade offer?')) return;
-    setProcessingTradeId(tradeId);
-    try {
-      await cancelTrade(tradeId);
-      await loadTrades();
-    } catch (error) {
-      console.error('Error cancelling trade:', error);
-    } finally {
-      setProcessingTradeId(null);
-    }
-  };
-
-  const getStatusColor = (status: Trade['status']) => {
-    switch (status) {
-      case 'accepted':
-        return 'text-green-400';
-      case 'declined':
-        return 'text-red-400';
-      case 'cancelled':
-        return 'text-gray-400';
-      default:
-        return 'text-yellow-400';
-    }
-  };
-
-  const renderTradeItems = (
-    items: TradeItem[] | undefined,
-    ownerId: string,
-    cardDetails: Map<string, Card> | undefined,
-    label: string
-  ) => {
-    const ownerItems = items?.filter((i) => i.owner_id === ownerId) || [];
-    if (ownerItems.length === 0) {
-      return (
-        <div className="text-gray-500 text-sm italic">
-          {label}: Nothing (gift)
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <div className="text-gray-400 text-sm mb-1">{label}:</div>
-        <div className="flex flex-wrap gap-2">
-          {ownerItems.map((item) => {
-            const card = cardDetails?.get(item.card_id);
-            return (
-              <div
-                key={item.id}
-                className="flex items-center gap-2 bg-gray-700 px-2 py-1 rounded text-sm"
-              >
-                {card?.image_uris?.small && (
-                  <img
-                    src={card.image_uris.small}
-                    alt={card.name}
-                    className="w-8 h-11 rounded"
-                  />
-                )}
-                <span>{card?.name || item.card_id}</span>
-                {item.quantity > 1 && (
-                  <span className="text-gray-400">x{item.quantity}</span>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  };
-
-  const renderTrade = (trade: TradeWithCards, showActions: boolean) => {
-    const isSender = trade.sender_id === user?.id;
-    const otherUser = isSender ? trade.receiver : trade.sender;
-
-    return (
-      <div key={trade.id} className="bg-gray-800 rounded-lg p-4 space-y-4">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <ArrowLeftRight size={18} className="text-blue-400" />
-            <span className="font-medium">
-              {isSender ? `To: ${otherUser?.username}` : `From: ${otherUser?.username}`}
-            </span>
-          </div>
-          <span className={`text-sm capitalize ${getStatusColor(trade.status)}`}>
-            {trade.status}
-          </span>
-        </div>
-
-        {/* Trade Items */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {renderTradeItems(
-            trade.items,
-            trade.sender_id,
-            trade.cardDetails,
-            isSender ? 'You give' : 'They give'
-          )}
-          {renderTradeItems(
-            trade.items,
-            trade.receiver_id,
-            trade.cardDetails,
-            isSender ? 'You receive' : 'They receive'
-          )}
-        </div>
-
-        {/* Message */}
-        {trade.message && (
-          <div className="text-gray-400 text-sm">
-            <span className="text-gray-500">Message:</span> {trade.message}
-          </div>
-        )}
-
-        {/* Actions */}
-        {showActions && trade.status === 'pending' && (
-          <div className="flex gap-2 pt-2 border-t border-gray-700">
-            {isSender ? (
-              <button
-                onClick={() => handleCancel(trade.id)}
-                disabled={processingTradeId === trade.id}
-                className="flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition text-sm"
-              >
-                <X size={16} />
-                Cancel
-              </button>
-            ) : (
-              <>
-                <button
-                  onClick={() => handleAccept(trade.id)}
-                  disabled={processingTradeId === trade.id}
-                  className="flex items-center gap-2 px-3 py-2 bg-green-600 hover:bg-green-700 rounded-lg transition text-sm"
-                >
-                  {processingTradeId === trade.id ? (
-                    <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></div>
-                  ) : (
-                    <Check size={16} />
-                  )}
-                  Accept
-                </button>
-                <button
-                  onClick={() => handleDecline(trade.id)}
-                  disabled={processingTradeId === trade.id}
-                  className="flex items-center gap-2 px-3 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition text-sm"
-                >
-                  <X size={16} />
-                  Decline
-                </button>
-              </>
-            )}
-          </div>
-        )}
-
-        {/* Timestamp */}
-        <div className="text-gray-500 text-xs">
-          {new Date(trade.created_at || '').toLocaleDateString()}
-        </div>
-      </div>
-    );
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gray-900 flex items-center justify-center">
-        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-900 text-white p-6">
-      <div className="max-w-3xl mx-auto">
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-3xl font-bold">Trades</h1>
-        </div>
-
-        {/* Tabs */}
-        <div className="flex gap-2 mb-6">
-          <button
-            onClick={() => setActiveTab('pending')}
-            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition ${
-              activeTab === 'pending'
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-            }`}
-          >
-            <Clock size={18} />
-            Pending ({pendingTrades.length})
-          </button>
-          <button
-            onClick={() => setActiveTab('history')}
-            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition ${
-              activeTab === 'history'
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-            }`}
-          >
-            <History size={18} />
-            History
-          </button>
-        </div>
-
-        {/* Pending Trades */}
-        {activeTab === 'pending' && (
-          <div className="space-y-4">
-            {pendingTrades.length === 0 ? (
-              <div className="text-center py-12">
-                <Package size={48} className="mx-auto text-gray-600 mb-4" />
-                <p className="text-gray-400">No pending trades</p>
-                <p className="text-gray-500 text-sm mt-2">
-                  Visit a friend's collection to propose a trade
-                </p>
-              </div>
-            ) : (
-              pendingTrades.map((trade) => renderTrade(trade, true))
-            )}
-          </div>
-        )}
-
-        {/* Trade History */}
-        {activeTab === 'history' && (
-          <div className="space-y-4">
-            {tradeHistory.length === 0 ? (
-              <p className="text-gray-400 text-center py-8">No trade history yet</p>
-            ) : (
-              tradeHistory.map((trade) => renderTrade(trade, false))
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

src/contexts/AuthContext.tsx

@@ -35,8 +35,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
             .from('profiles')
             .upsert(
               {
-                id: session.user.id,
-                theme_color: 'blue' // Default theme color
+                id: session.user.id
               },
               { onConflict: 'id' }
             );
@@ -65,8 +64,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         const { error: profileError } = await supabase
           .from('profiles')
           .insert({
-            id: data.user!.id,
-            theme_color: 'blue' // Default theme color
+            id: data.user!.id
           });
 
         if (profileError) {

src/contexts/ToastContext.tsx

@@ -0,0 +1,100 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { CheckCircle, XCircle, AlertCircle, Info, X } from 'lucide-react';
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+interface ToastContextType {
+  showToast: (message: string, type?: ToastType) => void;
+  success: (message: string) => void;
+  error: (message: string) => void;
+  warning: (message: string) => void;
+  info: (message: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const showToast = useCallback((message: string, type: ToastType = 'info') => {
+    const id = Math.random().toString(36).substring(7);
+    setToasts((prev) => [...prev, { id, message, type }]);
+
+    // Auto remove after 4 seconds
+    setTimeout(() => removeToast(id), 4000);
+  }, [removeToast]);
+
+  const success = useCallback((message: string) => showToast(message, 'success'), [showToast]);
+  const error = useCallback((message: string) => showToast(message, 'error'), [showToast]);
+  const warning = useCallback((message: string) => showToast(message, 'warning'), [showToast]);
+  const info = useCallback((message: string) => showToast(message, 'info'), [showToast]);
+
+  const getIcon = (type: ToastType) => {
+    switch (type) {
+      case 'success':
+        return <CheckCircle size={20} />;
+      case 'error':
+        return <XCircle size={20} />;
+      case 'warning':
+        return <AlertCircle size={20} />;
+      case 'info':
+        return <Info size={20} />;
+    }
+  };
+
+  const getStyles = (type: ToastType) => {
+    switch (type) {
+      case 'success':
+        return 'bg-green-600';
+      case 'error':
+        return 'bg-red-600';
+      case 'warning':
+        return 'bg-yellow-600';
+      case 'info':
+        return 'bg-blue-600';
+    }
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast, success, error, warning, info }}>
+      {children}
+
+      {/* Toast Container */}
+      <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`${getStyles(toast.type)} text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 min-w-[280px] animate-slide-in-right`}
+          >
+            {getIcon(toast.type)}
+            <span className="flex-1">{toast.message}</span>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="text-white/80 hover:text-white"
+            >
+              <X size={18} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

src/lib/Entities.ts

@@ -140,7 +140,6 @@ export type Database = {
                 Row: {
                     created_at: string | null
                     id: string
-                    theme_color: string | null
                     updated_at: string | null
                     username: string | null
                     collection_visibility: 'public' | 'friends' | 'private' | null
@@ -148,7 +147,6 @@ export type Database = {
                 Insert: {
                     created_at?: string | null
                     id: string
-                    theme_color?: string | null
                     updated_at?: string | null
                     username?: string | null
                     collection_visibility?: 'public' | 'friends' | 'private' | null
@@ -156,7 +154,6 @@ export type Database = {
                 Update: {
                     created_at?: string | null
                     id?: string
-                    theme_color?: string | null
                     updated_at?: string | null
                     username?: string | null
                     collection_visibility?: 'public' | 'friends' | 'private' | null
@@ -208,42 +205,55 @@ export type Database = {
             trades: {
                 Row: {
                     id: string
-                    sender_id: string
-                    receiver_id: string
+                    user1_id: string
+                    user2_id: string
                     status: 'pending' | 'accepted' | 'declined' | 'cancelled'
                     message: string | null
                     created_at: string | null
                     updated_at: string | null
+                    version: number
+                    editor_id: string | null
                 }
                 Insert: {
                     id?: string
-                    sender_id: string
-                    receiver_id: string
+                    user1_id: string
+                    user2_id: string
                     status?: 'pending' | 'accepted' | 'declined' | 'cancelled'
                     message?: string | null
                     created_at?: string | null
                     updated_at?: string | null
+                    version?: number
+                    editor_id?: string | null
                 }
                 Update: {
                     id?: string
-                    sender_id?: string
-                    receiver_id?: string
+                    user1_id?: string
+                    user2_id?: string
                     status?: 'pending' | 'accepted' | 'declined' | 'cancelled'
                     message?: string | null
                     created_at?: string | null
                     updated_at?: string | null
+                    version?: number
+                    editor_id?: string | null
                 }
                 Relationships: [
                     {
-                        foreignKeyName: "trades_sender_id_fkey"
-                        columns: ["sender_id"]
+                        foreignKeyName: "trades_user1_id_fkey"
+                        columns: ["user1_id"]
                         isOneToOne: false
                         referencedRelation: "profiles"
                         referencedColumns: ["id"]
                     },
                     {
-                        foreignKeyName: "trades_receiver_id_fkey"
-                        columns: ["receiver_id"]
+                        foreignKeyName: "trades_user2_id_fkey"
+                        columns: ["user2_id"]
+                        isOneToOne: false
+                        referencedRelation: "profiles"
+                        referencedColumns: ["id"]
+                    },
+                    {
+                        foreignKeyName: "trades_editor_id_fkey"
+                        columns: ["editor_id"]
                         isOneToOne: false
                         referencedRelation: "profiles"
                         referencedColumns: ["id"]

src/services/tradesService.ts

@@ -10,23 +10,52 @@ export interface TradeItem {
 
 export interface Trade {
   id: string;
-  sender_id: string;
-  receiver_id: string;
+  user1_id: string;
+  user2_id: string;
   status: 'pending' | 'accepted' | 'declined' | 'cancelled';
   message: string | null;
   created_at: string | null;
   updated_at: string | null;
-  sender?: { username: string | null };
-  receiver?: { username: string | null };
+  version: number;
+  editor_id: string | null;
+  user1?: { username: string | null };
+  user2?: { username: string | null };
   items?: TradeItem[];
 }
 
+export interface TradeHistoryEntry {
+  id: string;
+  trade_id: string;
+  version: number;
+  editor_id: string;
+  message: string | null;
+  created_at: string;
+  editor?: { username: string | null };
+  items?: TradeHistoryItem[];
+}
+
+export interface TradeHistoryItem {
+  id: string;
+  history_id: string;
+  owner_id: string;
+  card_id: string;
+  quantity: number;
+}
+
 export interface CreateTradeParams {
-  senderId: string;
-  receiverId: string;
+  user1Id: string;
+  user2Id: string;
   message?: string;
-  senderCards: { cardId: string; quantity: number }[];
-  receiverCards: { cardId: string; quantity: number }[];
+  user1Cards: { cardId: string; quantity: number }[];
+  user2Cards: { cardId: string; quantity: number }[];
+}
+
+export interface UpdateTradeParams {
+  tradeId: string;
+  editorId: string;
+  message?: string;
+  myCards: { cardId: string; quantity: number }[];
+  theirCards: { cardId: string; quantity: number }[];
 }
 
 // Get all trades for a user
@@ -35,11 +64,11 @@ export async function getTrades(userId: string): Promise<Trade[]> {
     .from('trades')
     .select(`
       *,
-      sender:profiles!trades_sender_id_fkey(username),
-      receiver:profiles!trades_receiver_id_fkey(username),
+      user1:profiles!trades_user1_id_fkey(username),
+      user2:profiles!trades_user2_id_fkey(username),
       items:trade_items(*)
     `)
-    .or(`sender_id.eq.${userId},receiver_id.eq.${userId}`)
+    .or(`user1_id.eq.${userId},user2_id.eq.${userId}`)
     .order('created_at', { ascending: false });
 
   if (error) throw error;
@@ -52,12 +81,12 @@ export async function getPendingTrades(userId: string): Promise<Trade[]> {
     .from('trades')
     .select(`
       *,
-      sender:profiles!trades_sender_id_fkey(username),
-      receiver:profiles!trades_receiver_id_fkey(username),
+      user1:profiles!trades_user1_id_fkey(username),
+      user2:profiles!trades_user2_id_fkey(username),
       items:trade_items(*)
     `)
     .eq('status', 'pending')
-    .or(`sender_id.eq.${userId},receiver_id.eq.${userId}`)
+    .or(`user1_id.eq.${userId},user2_id.eq.${userId}`)
     .order('created_at', { ascending: false });
 
   if (error) throw error;
@@ -70,8 +99,8 @@ export async function getTradeById(tradeId: string): Promise<Trade | null> {
     .from('trades')
     .select(`
       *,
-      sender:profiles!trades_sender_id_fkey(username),
-      receiver:profiles!trades_receiver_id_fkey(username),
+      user1:profiles!trades_user1_id_fkey(username),
+      user2:profiles!trades_user2_id_fkey(username),
       items:trade_items(*)
     `)
     .eq('id', tradeId)
@@ -83,39 +112,40 @@ export async function getTradeById(tradeId: string): Promise<Trade | null> {
 
 // Create a new trade with items
 export async function createTrade(params: CreateTradeParams): Promise<Trade> {
-  const { senderId, receiverId, message, senderCards, receiverCards } = params;
+  const { user1Id, user2Id, message, user1Cards, user2Cards } = params;
 
   // Create the trade
   const { data: trade, error: tradeError } = await supabase
     .from('trades')
     .insert({
-      sender_id: senderId,
-      receiver_id: receiverId,
+      user1_id: user1Id,
+      user2_id: user2Id,
       message,
       status: 'pending',
+      // editor_id starts as null - gets set when someone edits the trade
     })
     .select()
     .single();
 
   if (tradeError) throw tradeError;
 
-  // Add sender's cards
-  const senderItems = senderCards.map((card) => ({
+  // Add user1's cards
+  const user1Items = user1Cards.map((card) => ({
     trade_id: trade.id,
-    owner_id: senderId,
+    owner_id: user1Id,
     card_id: card.cardId,
     quantity: card.quantity,
   }));
 
-  // Add receiver's cards (what sender wants)
-  const receiverItems = receiverCards.map((card) => ({
+  // Add user2's cards
+  const user2Items = user2Cards.map((card) => ({
     trade_id: trade.id,
-    owner_id: receiverId,
+    owner_id: user2Id,
     card_id: card.cardId,
     quantity: card.quantity,
   }));
 
-  const allItems = [...senderItems, ...receiverItems];
+  const allItems = [...user1Items, ...user2Items];
 
   if (allItems.length > 0) {
     const { error: itemsError } = await supabase
@@ -170,11 +200,11 @@ export async function getTradeHistory(userId: string): Promise<Trade[]> {
     .from('trades')
     .select(`
       *,
-      sender:profiles!trades_sender_id_fkey(username),
-      receiver:profiles!trades_receiver_id_fkey(username),
+      user1:profiles!trades_user1_id_fkey(username),
+      user2:profiles!trades_user2_id_fkey(username),
       items:trade_items(*)
     `)
-    .or(`sender_id.eq.${userId},receiver_id.eq.${userId}`)
+    .or(`user1_id.eq.${userId},user2_id.eq.${userId}`)
     .in('status', ['accepted', 'declined', 'cancelled'])
     .order('updated_at', { ascending: false })
     .limit(50);
@@ -182,3 +212,116 @@ export async function getTradeHistory(userId: string): Promise<Trade[]> {
   if (error) throw error;
   return data as Trade[];
 }
+
+// Update an existing trade (for edits and counter-offers)
+export async function updateTrade(params: UpdateTradeParams): Promise<Trade> {
+  const { tradeId, editorId, message, myCards, theirCards } = params;
+
+  // Get current trade info
+  const { data: currentTrade, error: tradeError } = await supabase
+    .from('trades')
+    .select('version, user1_id, user2_id')
+    .eq('id', tradeId)
+    .single();
+
+  if (tradeError) throw tradeError;
+
+  const newVersion = (currentTrade.version || 1) + 1;
+
+  // Determine the other user's ID
+  const otherUserId = currentTrade.user1_id === editorId
+    ? currentTrade.user2_id
+    : currentTrade.user1_id;
+
+  // Save current state to history before updating
+  const { data: historyEntry, error: historyError } = await supabase
+    .from('trade_history')
+    .insert({
+      trade_id: tradeId,
+      version: currentTrade.version || 1,
+      editor_id: editorId,
+      message: message || null,
+    })
+    .select()
+    .single();
+
+  if (historyError) throw historyError;
+
+  // Save current items to history
+  const { data: currentItems } = await supabase
+    .from('trade_items')
+    .select('*')
+    .eq('trade_id', tradeId);
+
+  if (currentItems && currentItems.length > 0) {
+    const historyItems = currentItems.map(item => ({
+      history_id: historyEntry.id,
+      owner_id: item.owner_id,
+      card_id: item.card_id,
+      quantity: item.quantity,
+    }));
+
+    await supabase.from('trade_history_items').insert(historyItems);
+  }
+
+  // Update the trade
+  const { data: updatedTrade, error: updateError } = await supabase
+    .from('trades')
+    .update({
+      message,
+      version: newVersion,
+      editor_id: editorId,
+      updated_at: new Date().toISOString(),
+    })
+    .eq('id', tradeId)
+    .select()
+    .single();
+
+  if (updateError) throw updateError;
+
+  // Delete existing items
+  await supabase.from('trade_items').delete().eq('trade_id', tradeId);
+
+  // Add new items (myCards belong to editor, theirCards belong to other user)
+  const myItems = myCards.map((card) => ({
+    trade_id: tradeId,
+    owner_id: editorId,
+    card_id: card.cardId,
+    quantity: card.quantity,
+  }));
+
+  const theirItems = theirCards.map((card) => ({
+    trade_id: tradeId,
+    owner_id: otherUserId,
+    card_id: card.cardId,
+    quantity: card.quantity,
+  }));
+
+  const allItems = [...myItems, ...theirItems];
+
+  if (allItems.length > 0) {
+    const { error: itemsError } = await supabase
+      .from('trade_items')
+      .insert(allItems);
+
+    if (itemsError) throw itemsError;
+  }
+
+  return updatedTrade;
+}
+
+// Get version history for a trade
+export async function getTradeVersionHistory(tradeId: string): Promise<TradeHistoryEntry[]> {
+  const { data, error } = await supabase
+    .from('trade_history')
+    .select(`
+      *,
+      editor:profiles!trade_history_editor_id_fkey(username),
+      items:trade_history_items(*)
+    `)
+    .eq('trade_id', tradeId)
+    .order('version', { ascending: true });
+
+  if (error) throw error;
+  return data as TradeHistoryEntry[];
+}

src/types/index.ts

@@ -5,13 +5,28 @@ export interface User {
   themeColor: 'red' | 'green' | 'blue' | 'yellow' | 'grey' | 'purple';
 }
 
+export interface CardImageUris {
+  small?: string;
+  normal?: string;
+  large?: string;
+  art_crop?: string;
+  border_crop?: string;
+  png?: string;
+}
+
+export interface CardFace {
+  name?: string;
+  mana_cost?: string;
+  type_line?: string;
+  oracle_text?: string;
+  image_uris?: CardImageUris;
+}
+
 export interface Card {
   id: string;
   name: string;
-  image_uris?: {
-    normal: string;
-    art_crop: string;
-  };
+  image_uris?: CardImageUris;
+  card_faces?: CardFace[];
   mana_cost?: string;
   type_line?: string;
   oracle_text?: string;
@@ -40,6 +55,11 @@ export interface Deck {
   userId: string;
   createdAt: Date;
   updatedAt: Date;
+  coverCardId?: string;
+  coverCard?: Card | null;
+  validationErrors?: string[];
+  isValid?: boolean;
+  cardCount?: number;
 }
 
 export interface CardEntity {

src/utils/deckValidation.ts

@@ -1,10 +1,23 @@
-import { Deck } from '../types';
+import { Card, Deck } from '../types';
 
 interface DeckValidation {
   isValid: boolean;
   errors: string[];
 }
 
+// Helper function to get commander color identity
+function getCommanderColors(commander: Card | null): string[] {
+  if (!commander) return [];
+  return commander.colors || [];
+}
+
+// Helper function to check if a card's colors are valid for the commander
+function isCardValidForCommander(card: Card, commanderColors: string[]): boolean {
+  if (commanderColors.length === 0) return true;
+  const cardColors = card.colors || [];
+  return cardColors.every(color => commanderColors.includes(color));
+}
+
 const FORMAT_RULES = {
   standard: {
     minCards: 60,
@@ -74,6 +87,25 @@ export function validateDeck(deck: Deck): DeckValidation {
     }
   });
 
+  // Commander-specific validations
+  if (deck.format === 'commander') {
+    const commander = deck.cards.find(card => card.is_commander)?.card;
+
+    if (!commander) {
+      errors.push('Commander deck must have a commander');
+    } else {
+      // Check commander color identity
+      const commanderColors = getCommanderColors(commander);
+      const invalidCards = deck.cards.filter(({ card, is_commander }) =>
+        !is_commander && !isCardValidForCommander(card, commanderColors)
+      );
+
+      if (invalidCards.length > 0) {
+        errors.push(`Some cards don't match commander's color identity`);
+      }
+    }
+  }
+
   return {
     isValid: errors.length === 0,
     errors,

src/utils/migrateDeckData.ts

@@ -0,0 +1,116 @@
+import { supabase } from '../lib/supabase';
+import { getCardsByIds } from '../services/api';
+import { validateDeck } from './deckValidation';
+import { Deck } from '../types';
+
+/**
+ * Migrate existing decks to include optimization fields
+ * This should be run once to update all existing decks
+ */
+export async function migrateExistingDecks() {
+  console.log('Starting deck migration...');
+
+  // Get all decks
+  const { data: decksData, error: decksError } = await supabase
+    .from('decks')
+    .select('*');
+
+  if (decksError) {
+    console.error('Error fetching decks:', decksError);
+    return;
+  }
+
+  console.log(`Found ${decksData.length} decks to migrate`);
+
+  for (const deck of decksData) {
+    // Skip if already migrated
+    if (deck.cover_card_id && deck.card_count !== null) {
+      console.log(`Deck ${deck.name} already migrated, skipping`);
+      continue;
+    }
+
+    console.log(`Migrating deck: ${deck.name}`);
+
+    // Get deck cards
+    const { data: cardEntities, error: cardsError } = await supabase
+      .from('deck_cards')
+      .select('*')
+      .eq('deck_id', deck.id);
+
+    if (cardsError || !cardEntities || cardEntities.length === 0) {
+      console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
+      continue;
+    }
+
+    const cardIds = cardEntities.map(entity => entity.card_id);
+    const uniqueCardIds = [...new Set(cardIds)];
+
+    try {
+      // Fetch cards from Scryfall
+      const scryfallCards = await getCardsByIds(uniqueCardIds);
+
+      if (!scryfallCards) {
+        console.error(`Failed to fetch cards for deck ${deck.id}`);
+        continue;
+      }
+
+      const cards = cardEntities.map(entity => {
+        const card = scryfallCards.find(c => c.id === entity.card_id);
+        return {
+          card,
+          quantity: entity.quantity,
+          is_commander: entity.is_commander,
+        };
+      });
+
+      // Create deck object for validation
+      const deckToValidate: Deck = {
+        id: deck.id,
+        name: deck.name,
+        format: deck.format,
+        cards,
+        userId: deck.user_id,
+        createdAt: new Date(deck.created_at),
+        updatedAt: new Date(deck.updated_at),
+      };
+
+      // Calculate validation
+      const validation = validateDeck(deckToValidate);
+
+      // Determine cover card (commander or first card)
+      const commanderCard = deck.format === 'commander'
+        ? cardEntities.find(c => c.is_commander)
+        : null;
+      const coverCardId = commanderCard
+        ? commanderCard.card_id
+        : cardEntities[0]?.card_id || null;
+
+      // Calculate total card count
+      const totalCardCount = cardEntities.reduce((acc, curr) => acc + curr.quantity, 0);
+
+      // Update deck with optimization fields
+      const { error: updateError } = await supabase
+        .from('decks')
+        .update({
+          cover_card_id: coverCardId,
+          validation_errors: validation.errors,
+          is_valid: validation.isValid,
+          card_count: totalCardCount,
+        })
+        .eq('id', deck.id);
+
+      if (updateError) {
+        console.error(`Error updating deck ${deck.id}:`, updateError);
+      } else {
+        console.log(`✓ Migrated deck: ${deck.name}`);
+      }
+
+      // Small delay to avoid rate limiting
+      await new Promise(resolve => setTimeout(resolve, 100));
+    } catch (error) {
+      console.error(`Error processing deck ${deck.id}:`, error);
+    }
+  }
+
+  console.log('Migration complete!');
+}

supabase/migrations/20250124000000_friends_trades_visibility.sql

@@ -0,0 +1,273 @@
+/*
+  # Friends, Trades, and Collection Visibility
+
+  1. Changes to profiles
+    - Add `collection_visibility` column (public, friends, private)
+
+  2. New Tables
+    - `friendships` - Friend relationships between users
+    - `trades` - Trade offers between users
+    - `trade_items` - Cards included in trades
+
+  3. Security
+    - RLS policies for all new tables
+    - Updated collection policies for visibility
+*/
+
+-- Add collection visibility to profiles
+ALTER TABLE public.profiles
+ADD COLUMN collection_visibility text DEFAULT 'private'
+CHECK (collection_visibility IN ('public', 'friends', 'private'));
+
+-- =============================================
+-- FRIENDSHIPS TABLE
+-- =============================================
+CREATE TABLE public.friendships (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  requester_id uuid REFERENCES public.profiles(id) ON DELETE CASCADE NOT NULL,
+  addressee_id uuid REFERENCES public.profiles(id) ON DELETE CASCADE NOT NULL,
+  status text DEFAULT 'pending' CHECK (status IN ('pending', 'accepted', 'declined')),
+  created_at timestamptz DEFAULT now(),
+  updated_at timestamptz DEFAULT now(),
+  UNIQUE(requester_id, addressee_id),
+  CHECK (requester_id != addressee_id)
+);
+
+ALTER TABLE public.friendships ENABLE ROW LEVEL SECURITY;
+
+-- Users can see friendships they're involved in
+CREATE POLICY "Users can view their friendships"
+  ON public.friendships
+  FOR SELECT
+  TO authenticated
+  USING (requester_id = auth.uid() OR addressee_id = auth.uid());
+
+-- Users can create friend requests
+CREATE POLICY "Users can send friend requests"
+  ON public.friendships
+  FOR INSERT
+  TO authenticated
+  WITH CHECK (requester_id = auth.uid());
+
+-- Users can update friendships they received (accept/decline)
+CREATE POLICY "Users can respond to friend requests"
+  ON public.friendships
+  FOR UPDATE
+  TO authenticated
+  USING (addressee_id = auth.uid());
+
+-- Users can delete their own friendships
+CREATE POLICY "Users can delete their friendships"
+  ON public.friendships
+  FOR DELETE
+  TO authenticated
+  USING (requester_id = auth.uid() OR addressee_id = auth.uid());
+
+-- =============================================
+-- TRADES TABLE
+-- =============================================
+CREATE TABLE public.trades (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  sender_id uuid REFERENCES public.profiles(id) ON DELETE CASCADE NOT NULL,
+  receiver_id uuid REFERENCES public.profiles(id) ON DELETE CASCADE NOT NULL,
+  status text DEFAULT 'pending' CHECK (status IN ('pending', 'accepted', 'declined', 'cancelled')),
+  message text,
+  created_at timestamptz DEFAULT now(),
+  updated_at timestamptz DEFAULT now(),
+  CHECK (sender_id != receiver_id)
+);
+
+ALTER TABLE public.trades ENABLE ROW LEVEL SECURITY;
+
+-- Users can see trades they're involved in
+CREATE POLICY "Users can view their trades"
+  ON public.trades
+  FOR SELECT
+  TO authenticated
+  USING (sender_id = auth.uid() OR receiver_id = auth.uid());
+
+-- Users can create trades
+CREATE POLICY "Users can create trades"
+  ON public.trades
+  FOR INSERT
+  TO authenticated
+  WITH CHECK (sender_id = auth.uid());
+
+-- Sender can cancel, receiver can accept/decline
+CREATE POLICY "Users can update their trades"
+  ON public.trades
+  FOR UPDATE
+  TO authenticated
+  USING (sender_id = auth.uid() OR receiver_id = auth.uid());
+
+-- =============================================
+-- TRADE ITEMS TABLE
+-- =============================================
+CREATE TABLE public.trade_items (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  trade_id uuid REFERENCES public.trades(id) ON DELETE CASCADE NOT NULL,
+  owner_id uuid REFERENCES public.profiles(id) ON DELETE CASCADE NOT NULL,
+  card_id text NOT NULL,
+  quantity integer DEFAULT 1 CHECK (quantity > 0),
+  created_at timestamptz DEFAULT now()
+);
+
+ALTER TABLE public.trade_items ENABLE ROW LEVEL SECURITY;
+
+-- Users can see items in their trades
+CREATE POLICY "Users can view trade items"
+  ON public.trade_items
+  FOR SELECT
+  TO authenticated
+  USING (
+    EXISTS (
+      SELECT 1 FROM public.trades
+      WHERE trades.id = trade_items.trade_id
+      AND (trades.sender_id = auth.uid() OR trades.receiver_id = auth.uid())
+    )
+  );
+
+-- Users can add items to trades they created
+CREATE POLICY "Users can add trade items"
+  ON public.trade_items
+  FOR INSERT
+  TO authenticated
+  WITH CHECK (
+    EXISTS (
+      SELECT 1 FROM public.trades
+      WHERE trades.id = trade_items.trade_id
+      AND trades.sender_id = auth.uid()
+      AND trades.status = 'pending'
+    )
+  );
+
+-- =============================================
+-- UPDATE COLLECTION POLICIES FOR VISIBILITY
+-- =============================================
+
+-- Drop old restrictive policy
+DROP POLICY IF EXISTS "Users can view their own collection" ON public.collections;
+
+-- New policy: view own collection OR public collections OR friend's collections (if friends visibility)
+CREATE POLICY "Users can view collections based on visibility"
+  ON public.collections
+  FOR SELECT
+  TO authenticated
+  USING (
+    user_id = auth.uid()
+    OR EXISTS (
+      SELECT 1 FROM public.profiles
+      WHERE profiles.id = collections.user_id
+      AND profiles.collection_visibility = 'public'
+    )
+    OR EXISTS (
+      SELECT 1 FROM public.profiles p
+      JOIN public.friendships f ON (
+        (f.requester_id = p.id AND f.addressee_id = auth.uid())
+        OR (f.addressee_id = p.id AND f.requester_id = auth.uid())
+      )
+      WHERE p.id = collections.user_id
+      AND p.collection_visibility = 'friends'
+      AND f.status = 'accepted'
+    )
+  );
+
+-- =============================================
+-- UPDATE PROFILES POLICY FOR PUBLIC VIEWING
+-- =============================================
+
+-- Drop old restrictive policy
+DROP POLICY IF EXISTS "Users can view their own profile" ON public.profiles;
+
+-- New policy: users can view all profiles (needed for friend search and public collections)
+CREATE POLICY "Users can view profiles"
+  ON public.profiles
+  FOR SELECT
+  TO authenticated
+  USING (true);
+
+-- =============================================
+-- FUNCTION: Execute trade (transfer cards)
+-- =============================================
+CREATE OR REPLACE FUNCTION public.execute_trade(trade_id uuid)
+RETURNS boolean
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+DECLARE
+  v_trade RECORD;
+  v_item RECORD;
+BEGIN
+  -- Get the trade
+  SELECT * INTO v_trade FROM public.trades WHERE id = trade_id;
+
+  -- Check trade exists and is pending
+  IF v_trade IS NULL OR v_trade.status != 'pending' THEN
+    RETURN false;
+  END IF;
+
+  -- Check caller is the receiver
+  IF v_trade.receiver_id != auth.uid() THEN
+    RETURN false;
+  END IF;
+
+  -- Process each trade item
+  FOR v_item IN SELECT * FROM public.trade_items WHERE trade_items.trade_id = execute_trade.trade_id
+  LOOP
+    -- Determine new owner
+    DECLARE
+      v_new_owner uuid;
+    BEGIN
+      IF v_item.owner_id = v_trade.sender_id THEN
+        v_new_owner := v_trade.receiver_id;
+      ELSE
+        v_new_owner := v_trade.sender_id;
+      END IF;
+
+      -- Remove from old owner's collection
+      UPDATE public.collections
+      SET quantity = quantity - v_item.quantity,
+          updated_at = now()
+      WHERE user_id = v_item.owner_id
+      AND card_id = v_item.card_id;
+
+      -- Delete if quantity is 0 or less
+      DELETE FROM public.collections
+      WHERE user_id = v_item.owner_id
+      AND card_id = v_item.card_id
+      AND quantity <= 0;
+
+      -- Add to new owner's collection
+      INSERT INTO public.collections (user_id, card_id, quantity)
+      VALUES (v_new_owner, v_item.card_id, v_item.quantity)
+      ON CONFLICT (user_id, card_id)
+      DO UPDATE SET
+        quantity = collections.quantity + v_item.quantity,
+        updated_at = now();
+    END;
+  END LOOP;
+
+  -- Mark trade as accepted
+  UPDATE public.trades
+  SET status = 'accepted', updated_at = now()
+  WHERE id = trade_id;
+
+  RETURN true;
+END;
+$$;
+
+-- Add unique constraint on collections for upsert
+ALTER TABLE public.collections
+ADD CONSTRAINT collections_user_card_unique UNIQUE (user_id, card_id);
+
+-- =============================================
+-- INDEXES FOR PERFORMANCE
+-- =============================================
+CREATE INDEX idx_friendships_requester ON public.friendships(requester_id);
+CREATE INDEX idx_friendships_addressee ON public.friendships(addressee_id);
+CREATE INDEX idx_friendships_status ON public.friendships(status);
+CREATE INDEX idx_trades_sender ON public.trades(sender_id);
+CREATE INDEX idx_trades_receiver ON public.trades(receiver_id);
+CREATE INDEX idx_trades_status ON public.trades(status);
+CREATE INDEX idx_trade_items_trade ON public.trade_items(trade_id);
+CREATE INDEX idx_profiles_visibility ON public.profiles(collection_visibility);

supabase/migrations/20250126000000_trade_history.sql

@@ -0,0 +1,78 @@
+-- Create trade_history table to track all versions of a trade
+CREATE TABLE IF NOT EXISTS public.trade_history (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  trade_id uuid REFERENCES public.trades(id) ON DELETE CASCADE NOT NULL,
+  version integer NOT NULL,
+  editor_id uuid REFERENCES public.profiles(id) NOT NULL,
+  message text,
+  created_at timestamptz DEFAULT now(),
+  UNIQUE(trade_id, version)
+);
+
+-- Create trade_history_items table to store cards for each version
+CREATE TABLE IF NOT EXISTS public.trade_history_items (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  history_id uuid REFERENCES public.trade_history(id) ON DELETE CASCADE NOT NULL,
+  owner_id uuid REFERENCES public.profiles(id) NOT NULL,
+  card_id text NOT NULL,
+  quantity integer DEFAULT 1,
+  created_at timestamptz DEFAULT now()
+);
+
+-- Add version column to trades table to track current version
+ALTER TABLE public.trades ADD COLUMN IF NOT EXISTS version integer DEFAULT 1;
+
+-- Add editor_id to track who last edited the trade
+ALTER TABLE public.trades ADD COLUMN IF NOT EXISTS editor_id uuid REFERENCES public.profiles(id);
+
+-- Create indexes for better performance
+CREATE INDEX IF NOT EXISTS idx_trade_history_trade_id ON public.trade_history(trade_id);
+CREATE INDEX IF NOT EXISTS idx_trade_history_items_history_id ON public.trade_history_items(history_id);
+
+-- Enable RLS
+ALTER TABLE public.trade_history ENABLE ROW LEVEL SECURITY;
+ALTER TABLE public.trade_history_items ENABLE ROW LEVEL SECURITY;
+
+-- RLS policies for trade_history
+CREATE POLICY "Users can view history of their trades"
+  ON public.trade_history FOR SELECT
+  USING (
+    EXISTS (
+      SELECT 1 FROM public.trades
+      WHERE trades.id = trade_history.trade_id
+      AND (trades.sender_id = auth.uid() OR trades.receiver_id = auth.uid())
+    )
+  );
+
+CREATE POLICY "Users can create history for their trades"
+  ON public.trade_history FOR INSERT
+  WITH CHECK (
+    EXISTS (
+      SELECT 1 FROM public.trades
+      WHERE trades.id = trade_history.trade_id
+      AND (trades.sender_id = auth.uid() OR trades.receiver_id = auth.uid())
+    )
+  );
+
+-- RLS policies for trade_history_items
+CREATE POLICY "Users can view history items of their trades"
+  ON public.trade_history_items FOR SELECT
+  USING (
+    EXISTS (
+      SELECT 1 FROM public.trade_history th
+      JOIN public.trades t ON t.id = th.trade_id
+      WHERE th.id = trade_history_items.history_id
+      AND (t.sender_id = auth.uid() OR t.receiver_id = auth.uid())
+    )
+  );
+
+CREATE POLICY "Users can create history items for their trades"
+  ON public.trade_history_items FOR INSERT
+  WITH CHECK (
+    EXISTS (
+      SELECT 1 FROM public.trade_history th
+      JOIN public.trades t ON t.id = th.trade_id
+      WHERE th.id = trade_history_items.history_id
+      AND (t.sender_id = auth.uid() OR t.receiver_id = auth.uid())
+    )
+  );