Owned-quantity stepper in the card preview modal

The preview's Owned row gets the same −/+ stepper as the library list,
refetching copy groups (which shrink with the total) and refreshing the
caller. Card Search now passes a preview context too, so its previews get
the stepper and printing controls.

Closes #3

src/components.tsx

@@ -1018,6 +1018,14 @@ function PrintingsSection({
       setCopies(await api.listLibraryCopies(card.oracle_id));
     });
 
+  // Copy groups that no longer fit are trimmed when the total drops, so
+  // refetch them along with it.
+  const adjustOwned = (delta: number) =>
+    run(async () => {
+      setOwned(await api.addOwned(card.oracle_id, delta));
+      setCopies(await api.listLibraryCopies(card.oracle_id));
+    });
+
   const showPrinting = (scryfallId: string | null) =>
     run(async () => {
       const entry = await api.setDeckCardPrinting(ctx.deckId!, card.oracle_id, scryfallId);
@@ -1057,14 +1065,17 @@ function PrintingsSection({
       )}
       <div className="preview-info-section">
         <span className="preview-info-label">Owned</span>
-        <span>
-          {owned} cop{owned === 1 ? "y" : "ies"}
-          {tracked > 0 && (
-            <span className="muted">
-              {" "}
-              · {tracked} by printing · {Math.max(0, owned - tracked)} unspecified
-            </span>
-          )}
+        <span className="row" style={{ gap: 8 }}>
+          <QtyStepper value={owned} onDecrement={() => adjustOwned(-1)} onIncrement={() => adjustOwned(1)} />
+          <span>
+            cop{owned === 1 ? "y" : "ies"}
+            {tracked > 0 && (
+              <span className="muted">
+                {" "}
+                · {tracked} by printing · {Math.max(0, owned - tracked)} unspecified
+              </span>
+            )}
+          </span>
         </span>
         {copies.map((c) => (
           <div key={`${c.scryfall_id}/${c.finish}`} className="printing-row">