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

@@ -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>

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);
 }

src/views/DeckView.tsx

@@ -1583,6 +1583,7 @@ function DeckBuilder({
               onChange={setAnyQuery}
               results={anyResults}
               onPick={addToDeck}
+              showPrice
             />
             {cardsGroup(unowned)}
           </section>