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:
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user