From a7681357b5c2f107ed7cbd6530356ecca60e72a0 Mon Sep 17 00:00:00 2001
From: Matthieu <matthieu.reynier@echoes.solutions>
Date: Mon, 24 Nov 2025 17:24:35 +0100
Subject: [PATCH] Refactor CardSearch component for improved mobile and desktop
 layouts

---
 src/components/CardSearch.tsx | 198 +++++++++++++++++++++++-----------
 1 file changed, 133 insertions(+), 65 deletions(-)

diff --git a/src/components/CardSearch.tsx b/src/components/CardSearch.tsx
index 41a57f5..66269e8 100644
--- a/src/components/CardSearch.tsx
+++ b/src/components/CardSearch.tsx
@@ -617,79 +617,147 @@ const CardSearch = () => {
         )}
 
         {searchResults && searchResults.length > 0 && (
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-2 sm:gap-3">
-            {searchResults.map((card) => {
-              const currentFaceIndex = getCurrentFaceIndex(card.id);
-              const isMultiFaced = isDoubleFaced(card);
-              const inCollection = userCollection.get(card.id) || 0;
-              const isAddingThisCard = addingCardId === card.id;
+          <>
+            {/* 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;
+                const displayName = isMultiFaced && card.card_faces
+                  ? card.card_faces[currentFaceIndex]?.name || card.name
+                  : card.name;
 
-              return (
-                <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
-                  <div className="relative">
-                    {getCardImageUri(card, currentFaceIndex) ? (
+                return (
+                  <div key={card.id} className="flex bg-gray-800 rounded-lg overflow-hidden">
+                    {/* Card image */}
+                    <div className="relative w-16 flex-shrink-0">
                       <img
                         src={getCardImageUri(card, currentFaceIndex)}
                         alt={displayName}
-                        className="w-full h-auto"
+                        className="w-full h-full object-cover"
                       />
-                    ) : (
-                      <MagicCard card={card} />
-                    )}
-                    {isMultiFaced && (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          toggleCardFace(card.id, card.card_faces!.length);
-                        }}
-                        className="absolute bottom-1 right-1 bg-purple-600 hover:bg-purple-700 text-white p-1.5 sm:p-2 rounded-full shadow-lg transition-all"
-                        title="Flip card"
-                      >
-                        <RefreshCw size={12} className="sm:w-4 sm:h-4" />
-                      </button>
-                    )}
-                    {inCollection > 0 && (
-                      <span className="absolute top-1 right-1 text-[10px] sm:text-xs bg-green-600 px-1.5 py-0.5 rounded-full flex items-center gap-0.5">
-                        <CheckCircle size={10} className="hidden sm:block" />
-                        x{inCollection}
-                      </span>
-                    )}
-                  </div>
-                  <div className="p-2 sm:p-3">
-                    <h3 className="font-bold text-xs sm:text-sm truncate mb-1">{displayName}</h3>
-                    <p className="text-gray-400 text-[10px] sm:text-xs truncate mb-2 hidden sm:block">
-                      {isMultiFaced && card.card_faces
-                        ? card.card_faces[currentFaceIndex]?.type_line || card.type_line
-                        : card.type_line}
-                    </p>
-                    {card.prices?.usd && (
-                      <div className="text-[10px] sm:text-xs text-gray-400 mb-1.5">${card.prices.usd}</div>
-                    )}
-                    <button
-                      onClick={() => handleAddCardToCollection(card.id)}
-                      disabled={isAddingThisCard}
-                      className="w-full px-2 py-1.5 sm:px-3 sm:py-2 bg-green-600 hover:bg-green-700 active:bg-green-800 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-1 text-xs sm:text-sm"
-                      title="Add to collection"
-                    >
-                      {isAddingThisCard ? (
-                        <Loader2 className="animate-spin" size={14} />
-                      ) : (
-                        <>
-                          <PackagePlus size={14} className="sm:w-4 sm:h-4" />
-                          <span className="hidden sm:inline">Add</span>
-                          <span className="sm:hidden">+</span>
-                        </>
+                      {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>
                       )}
-                    </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>
-              );
-            })}
-          </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);
+                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="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
+                    <div className="relative">
+                      {getCardImageUri(card, currentFaceIndex) ? (
+                        <img
+                          src={getCardImageUri(card, currentFaceIndex)}
+                          alt={displayName}
+                          className="w-full h-auto"
+                        />
+                      ) : (
+                        <MagicCard card={card} />
+                      )}
+                      {isMultiFaced && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleCardFace(card.id, card.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={16} />
+                        </button>
+                      )}
+                      {inCollection > 0 && (
+                        <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>
+                    <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-xs text-gray-400 mb-2">${card.prices.usd}</div>
+                      )}
+                      <button
+                        onClick={() => handleAddCardToCollection(card.id)}
+                        disabled={isAddingThisCard}
+                        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={16} />
+                        ) : (
+                          <>
+                            <PackagePlus size={16} />
+                            Add
+                          </>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </>
         )}
       </div>