Add search functionality to user collections in Community and TradeCreator components

src/components/Community.tsx

@@ -62,6 +62,7 @@ export default function Community() {
   const [selectedUserCollection, setSelectedUserCollection] = useState<CollectionItem[]>([]);
   const [loadingCollection, setLoadingCollection] = useState(false);
   const [showTradeCreator, setShowTradeCreator] = useState(false);
+  const [userCollectionSearch, setUserCollectionSearch] = useState('');
 
   // Friends state
   const [friendsSubTab, setFriendsSubTab] = useState<FriendsSubTab>('list');
@@ -382,13 +383,17 @@ export default function Community() {
 
   // ============ USER COLLECTION VIEW ============
   if (selectedUser) {
+    const filteredUserCollection = selectedUserCollection.filter(({ card }) =>
+      card.name.toLowerCase().includes(userCollectionSearch.toLowerCase())
+    );
+
     return (
       <div className="bg-gray-900 text-white min-h-screen">
         {/* Header */}
         <div className="sticky top-0 bg-gray-900/95 backdrop-blur border-b border-gray-800 p-3 z-10">
-          <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center justify-between gap-2 mb-3">
             <button
-              onClick={() => { setSelectedUser(null); setSelectedUserCollection([]); }}
+              onClick={() => { setSelectedUser(null); setSelectedUserCollection([]); setUserCollectionSearch(''); }}
               className="flex items-center gap-1 text-blue-400 text-sm min-w-0"
             >
               <ChevronLeft size={20} />
@@ -403,6 +408,25 @@ export default function Community() {
               <span className="hidden sm:inline">Trade</span>
             </button>
           </div>
+          {/* Search input */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
+            <input
+              type="text"
+              value={userCollectionSearch}
+              onChange={(e) => setUserCollectionSearch(e.target.value)}
+              placeholder="Search cards..."
+              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"
+            />
+            {userCollectionSearch && (
+              <button
+                onClick={() => setUserCollectionSearch('')}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
+              >
+                <X size={16} />
+              </button>
+            )}
+          </div>
         </div>
 
         {/* Collection Grid */}
@@ -413,9 +437,11 @@ export default function Community() {
             </div>
           ) : selectedUserCollection.length === 0 ? (
             <p className="text-gray-400 text-center py-12">Empty collection</p>
+          ) : filteredUserCollection.length === 0 ? (
+            <p className="text-gray-400 text-center py-12">No cards match "{userCollectionSearch}"</p>
           ) : (
             <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
-              {selectedUserCollection.map(({ card, quantity }) => (
+              {filteredUserCollection.map(({ card, quantity }) => (
                 <div key={card.id} className="relative">
                   <img
                     src={card.image_uris?.small || card.image_uris?.normal}

src/components/TradeCreator.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { X, ArrowLeftRight, Plus, Minus, Send, Gift, Loader2 } 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';
@@ -11,6 +11,153 @@ interface CollectionItem {
   quantity: number;
 }
 
+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>
+                {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';
+
+  return (
+    <div>
+      <h4 className={`text-xs font-semibold ${textColor} mb-1`}>{label}:</h4>
+      {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;
@@ -19,11 +166,7 @@ interface TradeCreatorProps {
   onTradeCreated: () => void;
 }
 
-interface SelectedCard {
+type MobileStep = 'want' | 'give' | 'review';
-  card: Card;
-  quantity: number;
-  maxQuantity: number;
-}
 
 export default function TradeCreator({
   receiverId,
@@ -39,15 +182,28 @@ export default function TradeCreator({
   const [submitting, setSubmitting] = useState(false);
   const [message, setMessage] = useState('');
 
-  // Cards I'm offering (from my collection)
+  const [isGiftMode, setIsGiftMode] = useState(false);
+  const [mobileStep, setMobileStep] = useState<MobileStep>('want');
+
   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]);
+
   const loadMyCollection = async () => {
     if (!user) return;
     setLoading(true);
@@ -133,7 +289,6 @@ 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) {
       toast.warning('Please select at least one card to trade or gift');
       return;
@@ -171,210 +326,334 @@ 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/80 z-50 flex items-center justify-center">
+        <Loader2 className="animate-spin text-blue-500" size={48} />
+      </div>
+    );
+  }
+
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-0 md:p-4">
-      <div className="bg-gray-800 rounded-lg w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
+      <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">
-        {/* 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>
-          <button
-            onClick={onClose}
-            className="p-2 hover:bg-gray-700 rounded-lg transition"
-          >
-            <X size={24} />
-          </button>
-        </div>
 
-        {/* Content */}
+        {/* ============ MOBILE VIEW ============ */}
-        <div className="flex-1 overflow-hidden flex flex-col md:flex-row">
+        <div className="flex flex-col h-full md:hidden">
-          {/* My Collection (Left) */}
+          <div className="flex items-center justify-between p-3 border-b border-gray-700">
-          <div className="flex-1 p-4 border-b md:border-b-0 md:border-r border-gray-700 overflow-y-auto">
+            <div className="flex items-center gap-2 min-w-0">
-            <h3 className="text-lg font-semibold mb-3 text-green-400">
+              <ArrowLeftRight size={20} className="text-blue-400 flex-shrink-0" />
-              My Collection (I give)
+              <h2 className="font-bold truncate">Trade with {receiverUsername}</h2>
-            </h3>
+            </div>
-            {loading ? (
+            <button onClick={onClose} className="p-2 -mr-2 active:bg-gray-700 rounded-lg">
-              <div className="flex justify-center py-8">
+              <X size={20} />
-                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+            </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>
-            ) : myCollection.length === 0 ? (
+              <div className="flex items-center gap-2">
-              <p className="text-gray-400 text-center py-4">Your collection is empty</p>
+                <Gift size={18} className={isGiftMode ? 'text-purple-400' : 'text-gray-400'} />
-            ) : (
+                <span className={`text-sm ${isGiftMode ? 'text-purple-400' : 'text-gray-400'}`}>
-              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                  Gift (I don't want anything back)
-                {myCollection.map(({ card, quantity }) => {
+                </span>
-                  const offered = myOfferedCards.get(card.id);
+              </div>
-                  const remainingQty = quantity - (offered?.quantity || 0);
+            </label>
-                  return (
+          </div>
-                    <div
+
-                      key={card.id}
+          <div className="flex items-center justify-center gap-2 p-2 bg-gray-900/50">
-                      className={`relative cursor-pointer rounded-lg overflow-hidden transition ${
+            {!isGiftMode && (
-                        offered ? 'ring-2 ring-green-500' : 'hover:ring-2 hover:ring-gray-500'
+              <>
-                      }`}
+                <div className={`w-2 h-2 rounded-full ${mobileStep === 'want' ? 'bg-blue-500' : 'bg-gray-600'}`} />
-                      onClick={() => remainingQty > 0 && addToOffer(card, quantity)}
+                <span className={`text-xs ${mobileStep === 'want' ? 'text-blue-400' : 'text-gray-500'}`}>I Want</span>
-                    >
+                <ArrowRight size={14} className="text-gray-500" />
-                      <img
+              </>
-                        src={card.image_uris?.small}
+            )}
-                        alt={card.name}
+            <div className={`w-2 h-2 rounded-full ${mobileStep === 'give' ? 'bg-green-500' : 'bg-gray-600'}`} />
-                        className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
+            <span className={`text-xs ${mobileStep === 'give' ? 'text-green-400' : 'text-gray-500'}`}>I Give</span>
-                      />
+            <ArrowRight size={14} className="text-gray-500" />
-                      <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded">
+            <div className={`w-2 h-2 rounded-full ${mobileStep === 'review' ? 'bg-purple-500' : 'bg-gray-600'}`} />
-                        {remainingQty}/{quantity}
+            <span className={`text-xs ${mobileStep === 'review' ? 'text-purple-400' : 'text-gray-500'}`}>Review</span>
-                      </div>
+          </div>
-                      {offered && (
+
-                        <div className="absolute bottom-1 left-1 bg-green-600 text-white text-xs px-1.5 py-0.5 rounded">
+          <div className="flex-1 overflow-y-auto p-3">
-                          +{offered.quantity}
+            {mobileStep === 'want' && !isGiftMode && (
-                        </div>
+              <div>
-                      )}
+                <h3 className="text-sm font-semibold text-blue-400 mb-3">
-                    </div>
+                  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>
 
-          {/* Their Collection (Right) */}
+          <div className="border-t border-gray-700 p-3 flex gap-2">
-          <div className="flex-1 p-4 overflow-y-auto">
+            {(mobileStep !== 'want' && !isGiftMode) || (mobileStep !== 'give' && isGiftMode) ? (
-            <h3 className="text-lg font-semibold mb-3 text-blue-400">
+              <button
-              {receiverUsername}'s Collection (I want)
+                onClick={goToPrevStep}
-            </h3>
+                disabled={mobileStep === 'give' && isGiftMode}
-            {receiverCollection.length === 0 ? (
+                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"
-              <p className="text-gray-400 text-center py-4">Their collection is empty</p>
+              >
+                <ArrowLeft size={18} />
+                Back
+              </button>
             ) : (
-              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+              <button
-                {receiverCollection.map(({ card, quantity }) => {
+                onClick={onClose}
-                  const wanted = wantedCards.get(card.id);
+                className="flex items-center justify-center gap-1 px-4 py-2.5 bg-gray-700 active:bg-gray-600 rounded-lg flex-1"
-                  const remainingQty = quantity - (wanted?.quantity || 0);
+              >
-                  return (
+                Cancel
-                    <div
+              </button>
-                      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'
+            {mobileStep === 'review' ? (
-                      }`}
+              <button
-                      onClick={() => remainingQty > 0 && addToWanted(card, quantity)}
+                onClick={handleSubmit}
-                    >
+                disabled={submitting || !canSubmit}
-                      <img
+                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"
-                        src={card.image_uris?.small}
+              >
-                        alt={card.name}
+                {submitting ? (
-                        className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
+                  <Loader2 className="animate-spin" size={18} />
-                      />
+                ) : isGift ? (
-                      <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded">
+                  <>
-                        {remainingQty}/{quantity}
+                    <Gift size={18} />
-                      </div>
+                    Send Gift
-                      {wanted && (
+                  </>
-                        <div className="absolute bottom-1 left-1 bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded">
+                ) : isRequest ? (
-                          +{wanted.quantity}
+                  <>
-                        </div>
+                    <Send size={18} />
-                      )}
+                    Request
-                    </div>
+                  </>
-                  );
+                ) : (
-                })}
+                  <>
-              </div>
+                    <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>
 
-        {/* Trade Summary */}
+        {/* ============ DESKTOP VIEW ============ */}
-        <div className="border-t border-gray-700 p-4">
+        <div className="hidden md:flex md:flex-col h-full">
-          <div className="flex flex-col md:flex-row gap-4 mb-4">
+          <div className="flex items-center justify-between p-4 border-b border-gray-700">
-            {/* I Give */}
+            <div className="flex items-center gap-3">
-            <div className="flex-1">
+              <ArrowLeftRight size={24} className="text-blue-400" />
-              <h4 className="text-sm font-semibold text-green-400 mb-2">I Give:</h4>
+              <h2 className="text-xl font-bold">Trade with {receiverUsername}</h2>
-              {myOfferedCards.size === 0 ? (
+              <label className="flex items-center gap-2 ml-4 cursor-pointer">
-                <p className="text-gray-500 text-sm">Nothing selected (gift request)</p>
+                <div
-              ) : (
+                  className={`relative w-10 h-5 rounded-full transition-colors ${
-                <div className="flex flex-wrap gap-2">
+                    isGiftMode ? 'bg-purple-600' : 'bg-gray-600'
-                  {Array.from(myOfferedCards.values()).map((item) => (
+                  }`}
-                    <div
+                  onClick={() => setIsGiftMode(!isGiftMode)}
-                      key={item.card.id}
+                >
-                      className="flex items-center gap-1 bg-green-900/50 px-2 py-1 rounded text-sm"
+                  <div
-                    >
+                    className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform ${
-                      <span>{item.card.name}</span>
+                      isGiftMode ? 'translate-x-5' : 'translate-x-0.5'
-                      <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>
+                <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>
+
+          <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>
+
+            {!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>
+                <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>
+            )}
+          </div>
+
+          <div className="border-t border-gray-700 p-4">
+            <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 items-center gap-4">
-            <div className="flex-1">
+              <input
-              <h4 className="text-sm font-semibold text-blue-400 mb-2">I Want:</h4>
+                type="text"
-              {wantedCards.size === 0 ? (
+                value={message}
-                <p className="text-gray-500 text-sm">Nothing selected (gift)</p>
+                onChange={(e) => setMessage(e.target.value)}
-              ) : (
+                placeholder="Add a message (optional)"
-                <div className="flex flex-wrap gap-2">
+                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"
-                  {Array.from(wantedCards.values()).map((item) => (
+              />
-                    <div
+              <button
-                      key={item.card.id}
+                onClick={onClose}
-                      className="flex items-center gap-1 bg-blue-900/50 px-2 py-1 rounded text-sm"
+                className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition"
-                    >
+              >
-                      <span>{item.card.name}</span>
+                Cancel
-                      <span className="text-blue-400">x{item.quantity}</span>
+              </button>
-                      <button
+              <button
-                        onClick={() => removeFromWanted(item.card.id)}
+                onClick={handleSubmit}
-                        className="ml-1 text-red-400 hover:text-red-300"
+                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"
-                        <Minus size={14} />
+              >
-                      </button>
+                {submitting ? (
-                    </div>
+                  <Loader2 className="animate-spin" size={20} />
-                  ))}
+                ) : isGift ? (
-                </div>
+                  <>
-              )}
+                    <Gift size={20} />
+                    Send Gift
+                  </>
+                ) : isRequest ? (
+                  <>
+                    <Send size={20} />
+                    Request Cards
+                  </>
+                ) : (
+                  <>
+                    <Send size={20} />
+                    Propose Trade
+                  </>
+                )}
+              </button>
             </div>
           </div>
-
-          {/* Message */}
-          <div className="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"
-            />
-          </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"
-            >
-              Cancel
-            </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"
-            >
-              {submitting ? (
-                <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div>
-              ) : isGift ? (
-                <>
-                  <Gift size={20} />
-                  Send Gift
-                </>
-              ) : isRequest ? (
-                <>
-                  <Send size={20} />
-                  Request Cards
-                </>
-              ) : (
-                <>
-                  <Send size={20} />
-                  Propose Trade
-                </>
-              )}
-            </button>
-          </div>
         </div>
       </div>
     </div>