From 304676a06b59deabc37c3b23058c84201236d5e9 Mon Sep 17 00:00:00 2001
From: Matthieu <matthieu.reynier@echoes.solutions>
Date: Mon, 24 Nov 2025 17:44:43 +0100
Subject: [PATCH] Add card art crop functionality and update Card interface for
 better image handling

---
 src/components/CardSearch.tsx | 16 ++++++++++++----
 src/types/index.ts            | 23 +++++++++++++++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/CardSearch.tsx b/src/components/CardSearch.tsx
index 66269e8..05225d0 100644
--- a/src/components/CardSearch.tsx
+++ b/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) {
@@ -632,12 +640,12 @@ const CardSearch = () => {
 
                 return (
                   <div key={card.id} className="flex bg-gray-800 rounded-lg overflow-hidden">
-                    {/* Card image */}
-                    <div className="relative w-16 flex-shrink-0">
+                    {/* Card art crop */}
+                    <div className="relative w-16 h-16 flex-shrink-0">
                       <img
-                        src={getCardImageUri(card, currentFaceIndex)}
+                        src={getCardArtCrop(card, currentFaceIndex)}
                         alt={displayName}
-                        className="w-full h-full object-cover"
+                        className="w-full h-full object-cover rounded-l-lg"
                       />
                       {isMultiFaced && (
                         <button
diff --git a/src/types/index.ts b/src/types/index.ts
index fb2d2e9..2ef5b37 100644
--- a/src/types/index.ts
+++ b/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;