Add a "not owned" quick filter and horizontal tile view to Card Search

"Not owned" moves into the shared Quick filters icon-toggle row (hidden on
the Library tab, where it'd always be a no-op since that view is owned-only
already) instead of a standalone button.

Tiles view gains a "Horizontal" toggle that rotates actually-horizontal
cards (Battles, Planes, Phenomena) into their natural landscape orientation
via a container-query-sized wrapper, spanning two grid columns so the
rotated card isn't squeezed into a single portrait column's width and left
too small to read.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-22 19:14:27 -05:00
parent e3725cee55
commit df2cbb372a
7 changed files with 149 additions and 12 deletions

View File

@@ -79,6 +79,10 @@ export function CardSearch({
const [groupBy, setGroupBy] = usePersistedState<GroupMode>("cardsearch-group", "none");
const [sortBy, setSortBy] = usePersistedState<SortMode>("cardsearch-sort", "name");
const [sortDir, setSortDir] = usePersistedState<SortDir>("cardsearch-sort-dir", "asc");
// Tiles-only: rotates cards that are actually horizontal (Battles, Planes,
// Phenomena) into their natural landscape orientation — handy when a search
// is mostly/entirely those. Cards that aren't horizontal are unaffected.
const [horizontalView, setHorizontalView] = usePersistedState("cardsearch-horizontal-view", false);
useEffect(() => {
api.listDecks().then(setDecks);
@@ -337,6 +341,7 @@ export function CardSearch({
key={c.oracle_id}
card={c}
selected={selected.has(c.oracle_id)}
rotated={horizontalView}
cornerLeft={
<input
type="checkbox"
@@ -567,6 +572,21 @@ export function CardSearch({
onToggleDir={() => setSortDir(sortDir === "asc" ? "desc" : "asc")}
/>
<ViewToggle mode={view} onChange={setView} />
<label
className="row"
style={{ gap: 4, cursor: view === "tiles" ? "pointer" : "default", opacity: view === "tiles" ? 1 : 0.5 }}
title="Tiles view: rotate Battles, Planes, and Phenomena to their natural landscape orientation"
>
<input
type="checkbox"
checked={horizontalView}
onChange={(e) => setHorizontalView(e.target.checked)}
disabled={view !== "tiles"}
/>
<span className="muted" style={{ fontSize: 12 }}>
Horizontal
</span>
</label>
</div>
</div>

View File

@@ -632,7 +632,7 @@ export function LibraryBrowser({
placeholder="e.g. landfall"
/>
</div>
<CardCriteriaFields value={criteria} onChange={patchCriteria} />
<CardCriteriaFields value={criteria} onChange={patchCriteria} hideNotOwned />
</div>
</div>
<button