From 7eb893ac63716af65b82cf54f8fbd036a0b429c7 Mon Sep 17 00:00:00 2001
From: Matthieu <matthieu.reynier@echoes.solutions>
Date: Wed, 26 Nov 2025 14:00:56 +0100
Subject: [PATCH] add hover source tracking for card preview in deck manager

---
 src/components/DeckManager.tsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/DeckManager.tsx b/src/components/DeckManager.tsx
index 7bd0c22..b4fd462 100644
--- a/src/components/DeckManager.tsx
+++ b/src/components/DeckManager.tsx
@@ -150,6 +150,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   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
@@ -623,8 +624,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                     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)}
-                    onMouseLeave={() => setHoveredCard(null)}
+                    onMouseEnter={() => {
+                      setHoveredCard(card);
+                      setHoverSource('search');
+                    }}
+                    onMouseLeave={() => {
+                      setHoveredCard(null);
+                      setHoverSource(null);
+                    }}
                     onClick={() => setSelectedCard(card)}
                   >
                     {/* Card Thumbnail */}
@@ -842,8 +849,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                       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)}
-                      onMouseLeave={() => setHoveredCard(null)}
+                      onMouseEnter={() => {
+                        setHoveredCard(card);
+                        setHoverSource('deck');
+                      }}
+                      onMouseLeave={() => {
+                        setHoveredCard(null);
+                        setHoverSource(null);
+                      }}
                       onClick={() => setSelectedCard(card)}
                     >
                       <img
@@ -979,8 +992,11 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
         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 right-8 transform -translate-y-1/2 z-30 pointer-events-none">
+          <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