Add +/- quantity buttons to the Add Cards "Just added" list

Lets you quickly correct duplicate-copy counts right after adding a
card, instead of navigating to the Library tab.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-07 20:21:46 -05:00
parent dca03fe5b7
commit 0eaa41ec41

View File

@@ -6,7 +6,9 @@ import { CardSearchBox } from "../components";
export function CardEntry() {
const [query, setQuery] = useState("");
const [results, setResults] = useState<CardRef[]>([]);
const [recent, setRecent] = useState<{ name: string; qty: number; location: string }[]>([]);
const [recent, setRecent] = useState<
{ oracleId: string; name: string; qty: number; location: string }[]
>([]);
// Persisted so a "box" location sticks while entering a stack of cards.
const [location, setLocation] = useState(() => localStorage.getItem("add-location") || "");
@@ -35,11 +37,18 @@ export function CardEntry() {
const qty = await api.addOwned(card.oracle_id, 1);
const loc = location.trim();
if (loc) await api.setLocation(card.oracle_id, loc);
setRecent((r) => [{ name: card.name, qty, location: loc }, ...r].slice(0, 12));
setRecent((r) =>
[{ oracleId: card.oracle_id, name: card.name, qty, location: loc }, ...r].slice(0, 12),
);
setQuery("");
setResults([]);
}
async function adjust(oracleId: string, delta: number) {
const qty = await api.addOwned(oracleId, delta);
setRecent((r) => r.map((e) => (e.oracleId === oracleId ? { ...e, qty } : e)));
}
return (
<div>
<h2>Add Cards</h2>
@@ -72,7 +81,17 @@ export function CardEntry() {
<span className="card-name">{r.name}</span>
{r.location && <span className="deck-chip">{r.location}</span>}
<span className="spacer" />
<button
onClick={() => adjust(r.oracleId, -1)}
disabled={r.qty <= 0}
title="Remove a copy"
>
−
</button>
<span className="badge">owned ×{r.qty}</span>
<button onClick={() => adjust(r.oracleId, 1)} title="Add another copy">
+
</button>
</li>
))}
</ul>