Add a card details info tile to the click-to-preview modal

Shows type line, mana value/colors, price, per-format legality pills,
and ownership context (owned copies, decks it's in) when the caller
has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so
the section just omits itself when absent.

The info tile sits beside the card art via flex-wrap and drops to its
own line on narrow viewports, rather than shrinking either face to
make room. Also shrinks a double-faced Battle's rotated front face
when it has a sibling back face, so it no longer renders at
full single-card size next to a much smaller back face.

src/components.tsx

@@ -8,7 +8,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { api, CardRef, COLORS, maskToLetters } from "./api";
+import { api, CardRef, COLORS, LEGALITY_FORMATS, legalStatusFor, maskToLetters, PreviewCard } from "./api";
 
 // --- Icons ------------------------------------------------------------
 
@@ -680,7 +680,7 @@ interface HoverApi {
   leave: () => void;
 }
 interface ClickApi {
-  open: (card: CardRef) => void;
+  open: (card: PreviewCard) => void;
 }
 const HoverCtx = createContext<HoverApi | null>(null);
 const ClickCtx = createContext<ClickApi | null>(null);
@@ -693,7 +693,7 @@ const ClickCtx = createContext<ClickApi | null>(null);
  */
 export function HoverPreviewProvider({ children }: { children: ReactNode }) {
   const [hover, setHover] = useState<{ card: CardRef; x: number; y: number } | null>(null);
-  const [clicked, setClicked] = useState<{ card: CardRef; showBack: boolean } | null>(null);
+  const [clicked, setClicked] = useState<{ card: PreviewCard; showBack: boolean } | null>(null);
 
   const enter = useCallback((card: CardRef, e: React.MouseEvent) => {
     if (card.image_uri) setHover({ card, x: e.clientX, y: e.clientY });
@@ -703,7 +703,7 @@ export function HoverPreviewProvider({ children }: { children: ReactNode }) {
   }, []);
   const leave = useCallback(() => setHover(null), []);
 
-  const open = useCallback((card: CardRef) => {
+  const open = useCallback((card: PreviewCard) => {
     if (!card.image_uri) return;
     setHover(null);
     setClicked({ card, showBack: false });
@@ -747,7 +747,7 @@ export function useHoverPreview() {
 /** Returns `open(card)` to trigger the larger click-to-preview modal. */
 export function useClickPreview() {
   const api = useContext(ClickCtx);
-  return { open: (card: CardRef) => api?.open(card) };
+  return { open: (card: PreviewCard) => api?.open(card) };
 }
 
 const PREVIEW_W = 320;
@@ -795,35 +795,105 @@ const ROTATED_ASPECT = 680 / 488;
 /** The largest landscape box (matching `.preview-modal-img`'s own
  * `max-width: min(720px, 90vw)` / `max-height: 90vh` bounds) for a rotated
  * horizontal-card preview. Recomputed on resize so it stays live like the
- * CSS-only sizing used for normal (portrait) cards. */
-function useRotatedPreviewBox() {
+ * CSS-only sizing used for normal (portrait) cards.
+ *
+ * `compact` shrinks the budget to roughly match a DFC back face's own
+ * `min(430px, 43vw)` box (see the `.preview-modal-dfc .preview-modal-img`
+ * rule) and leaves headroom below for the info tile — pass it whenever the
+ * horizontal front face has a sibling back face, so a transformed Battle
+ * doesn't render at full single-card size next to a much smaller back face
+ * and push the info tile off-screen. */
+function useRotatedPreviewBox(compact: boolean) {
   const compute = () => {
-    const boundW = Math.min(720, window.innerWidth * 0.9);
-    const boundH = window.innerHeight * 0.9;
+    const boundW = compact ? Math.min(430, window.innerWidth * 0.43) : Math.min(720, window.innerWidth * 0.9);
+    const boundH = compact ? window.innerHeight * 0.55 : window.innerHeight * 0.9;
     const w = Math.min(boundH, boundW * ROTATED_ASPECT);
     return { w, h: w / ROTATED_ASPECT };
   };
   const [box, setBox] = useState(compute);
   useEffect(() => {
+    setBox(compute());
     const onResize = () => setBox(compute());
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
-  }, []);
+  }, [compact]);
   return box;
 }
 
+/** Legality status pills for every tracked format, e.g. inside the
+ * click-preview modal's info tile. Not-legal formats are shown too (dimmed)
+ * so the list reads as a complete checklist rather than a partial one. */
+function LegalityPills({ legalities }: { legalities: number }) {
+  return (
+    <div className="preview-info-legal-grid">
+      {LEGALITY_FORMATS.map((f) => {
+        const status = legalStatusFor(legalities, f.label);
+        return (
+          <span key={f.key} className={`legal-pill legal-${status}`}>
+            {f.label}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Details panel shown alongside the card art in the click-to-preview modal:
+ * type/mana/color, price, ownership context (when the caller had a
+ * `LibraryCard`/`DeckEntry` to hand — see `PreviewCard`), and per-format
+ * legality. */
+function CardInfoTile({ card }: { card: PreviewCard }) {
+  return (
+    <div className="preview-info">
+      <div className="preview-info-name">{card.name}</div>
+      <div className="preview-info-type">{card.type_line}</div>
+      <div className="preview-info-row">
+        <span className="preview-info-mv">Mana value {card.mana_value}</span>
+        <ColorPips mask={card.colors} />
+      </div>
+      {card.price_usd > 0 && (
+        <div className="preview-info-price">${card.price_usd.toFixed(2)}</div>
+      )}
+      {card.quantity_owned !== undefined && (
+        <div className="preview-info-section">
+          <span className="preview-info-label">Owned</span>
+          <span>
+            {card.quantity_owned} cop{card.quantity_owned === 1 ? "y" : "ies"}
+          </span>
+        </div>
+      )}
+      {card.decks && card.decks.length > 0 && (
+        <div className="preview-info-section">
+          <span className="preview-info-label">In decks</span>
+          <div className="preview-info-deck-chips">
+            {card.decks.map((d) => (
+              <span key={d} className="badge">
+                {d}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+      <div className="preview-info-section">
+        <span className="preview-info-label">Legalities</span>
+        <LegalityPills legalities={card.legalities} />
+      </div>
+    </div>
+  );
+}
+
 function ClickPreviewModal({
   state,
   onClose,
   onFlip,
 }: {
-  state: { card: CardRef; showBack: boolean };
+  state: { card: PreviewCard; showBack: boolean };
   onClose: () => void;
   onFlip: () => void;
 }) {
   const { card, showBack } = state;
-  const rotatedBox = useRotatedPreviewBox();
   const hasBack = !!card.back_image_uri;
+  const rotatedBox = useRotatedPreviewBox(hasBack);
   // Both faces are always in the DOM when the card has one; a wide-viewport
   // media query shows them side by side (no flip needed), while a narrow one
   // shows only the "active" face and the flip button toggles between them.
@@ -863,15 +933,16 @@ function ClickPreviewModal({
               alt={`${card.name} (back)`}
             />
           )}
+          <span className="preview-modal-close">
+            <IconButton icon={Icons.close} label="Close (Esc)" onClick={onClose} overlay />
+          </span>
+          {hasBack && (
+            <button className="preview-modal-flip" onClick={onFlip} title="Show the other side">
+              ⟲ Flip
+            </button>
+          )}
         </div>
-        <span className="preview-modal-close">
-          <IconButton icon={Icons.close} label="Close (Esc)" onClick={onClose} overlay />
-        </span>
-        {hasBack && (
-          <button className="preview-modal-flip" onClick={onFlip} title="Show the other side">
-            ⟲ Flip
-          </button>
-        )}
+        <CardInfoTile card={card} />
       </div>
     </div>
   );