From eff96a1fba5ff57ceca7e2b88b70e7c396413719 Mon Sep 17 00:00:00 2001
From: Garrett Mills <shout@garrettmills.dev>
Date: Mon, 26 Oct 2026 21:39:39 -0500
Subject: [PATCH] Deck builder: show prices in the Not owned card search

CardSearchBox gains a showPrice option that puts each result's price at
the right of its row; the deck builder's Not owned box turns it on.

Closes #21

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components.tsx     | 7 ++++++-
 src/styles.css         | 6 ++++++
 src/views/DeckView.tsx | 1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components.tsx b/src/components.tsx
index 35fbaf9..8be4eff 100644
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -622,9 +622,11 @@ export const CardSearchBox = forwardRef<
     autoFocus?: boolean;
     /** Larger, more prominent input (used for the primary Add Cards field). */
     big?: boolean;
+    /** Show each result's price at the right — for picking cards to buy. */
+    showPrice?: boolean;
   }
 >(function CardSearchBox(
-  { placeholder, value, onChange, results, onPick, autoFocus, big },
+  { placeholder, value, onChange, results, onPick, autoFocus, big, showPrice },
   forwardedRef,
 ) {
   const [sel, setSel] = useState(0);
@@ -682,6 +684,9 @@ export const CardSearchBox = forwardRef<
               <ColorPips mask={c.color_identity} />
               <span className="card-name">{c.name}</span>
               <span className="card-type">{c.type_line}</span>
+              {showPrice && (
+                <span className="result-price">{c.price_usd > 0 ? `$${c.price_usd.toFixed(2)}` : "—"}</span>
+              )}
             </li>
           ))}
         </ul>
diff --git a/src/styles.css b/src/styles.css
index 6238cba..aed2164 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1375,6 +1375,12 @@ button.legality-tile-select {
 .result-list li:last-child {
   border-bottom: none;
 }
+.result-list .result-price {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+}
 .result-list li:hover {
   background: var(--bg-hover);
 }
diff --git a/src/views/DeckView.tsx b/src/views/DeckView.tsx
index fc5efe8..b9e6de0 100644
--- a/src/views/DeckView.tsx
+++ b/src/views/DeckView.tsx
@@ -1583,6 +1583,7 @@ function DeckBuilder({
               onChange={setAnyQuery}
               results={anyResults}
               onPick={addToDeck}
+              showPrice
             />
             {cardsGroup(unowned)}
           </section>