garrettmills/mtgc
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity
Files
94e4f25ec4c2c88ce48fe5ad28aea2589f26395f
mtgc/src/styles.css

2264 lines
52 KiB
CSS
Raw Normal View History

Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
/* ============================================================
mtgc — design system
Terracotta accent (#C8553D) on a layered, Discord-inspired dark UI.
============================================================ */
:root {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Layered surfaces (darkest → lightest). A warm charcoal ramp (low-saturation
~28° hue) rather than cool blue-grey — reads as "collection in warm light"
and harmonizes with the terracotta accent. Elevation model:
rail/app (chrome) → content (page) → panel (surface) → input (inset). */
--bg-rail: #191714;
--bg-app: #1d1a16;
--bg-topbar: #221e19;
--bg-content: #27221d;
--bg-panel: #322c25;
--bg-input: #3b342d;
--bg-hover: #443c34;
--bg-elev: #4c433a;
--border: #3d372f;
--border-soft: rgba(255, 248, 240, 0.06);
/* Tactile 1px top inner-highlight for raised surfaces (see .panel). */
--panel-highlight: inset 0 1px 0 rgba(255, 246, 236, 0.045);
--text: #e3ddd3;
--text-strong: #f8f4ec;
--muted: #a69d90;
--faint: #7d7568;
/* Terracotta accent (hue unchanged — the app's signature) */
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
--accent: #c8553d;
--accent-hover: #d86e56;
--accent-active: #a8412d;
--accent-subtle: rgba(200, 85, 61, 0.15);
--accent-glow: rgba(200, 85, 61, 0.35);
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Quiet accent for decorative/label use, so full terracotta stays reserved
for primary actions + active state (accent hierarchy). */
--accent-quiet: #c69a86;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
/* Complementary / status */
--info: #46a6bd; /* teal complement */
--gold: #e0b24a;
--success: #4bb073;
--warn: #e0a34a;
--danger: #d8503f;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
/* WUBRG mana colors, shared by pips + the library color-distribution bar */
--mtg-w: #f4efdd;
--mtg-u: #3a8fd0;
--mtg-b: #38343d;
--mtg-r: var(--accent);
--mtg-g: #479b63;
--mtg-c: #9aa0ab;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Spacing scale — every gap/margin/padding resolves to one of these. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
/* Radius scale */
--radius-sm: 6px;
--radius: 9px;
--radius-lg: 14px;
--radius-card: 12px; /* card-art corners (matches Scryfall image framing) */
--radius-pill: 999px;
/* Type scale */
--fs-micro: 10px; /* dense data labels (under stat numbers, chart axes) */
--fs-caption: 12px;
--fs-body: 14px;
--fs-label: 11px; /* canonical uppercase micro-label, see .section-label */
--fs-title: 16px;
--fs-display: 21px;
--tracking-label: 0.06em;
/* Motion */
--dur-fast: 0.12s;
--dur: 0.2s;
/* Interactive control height — bumped on coarse pointers (see bottom). */
--control-h: 34px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.55);
color-scheme: dark;
}
* {
box-sizing: border-box;
}
html,
body,
#root {
height: 100%;
}
body {
margin: 0;
font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
background: var(--bg-app);
color: var(--text);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 15px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
::selection {
background: var(--accent-subtle);
}
/* Thin, unobtrusive scrollbars */
*::-webkit-scrollbar {
width: 11px;
height: 11px;
}
*::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.35);
border-radius: 8px;
border: 3px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
}
*::-webkit-scrollbar-track {
background: transparent;
}
/* -------- Controls -------- */
button {
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
display: inline-flex;
align-items: center;
gap: 6px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
background: var(--bg-input);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 7px 13px;
cursor: pointer;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 14px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 500;
font-family: inherit;
transition: background 0.12s, border-color 0.12s, transform 0.05s, filter 0.12s;
}
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
button svg {
flex-shrink: 0;
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
button:hover {
background: var(--bg-hover);
border-color: var(--bg-elev);
}
button:active {
transform: translateY(1px);
}
button:disabled {
opacity: 0.5;
cursor: default;
transform: none;
}
button.primary {
background: linear-gradient(180deg, var(--accent-hover), var(--accent));
border: none;
color: #fff;
box-shadow: var(--shadow-sm);
}
button.primary:hover {
filter: brightness(1.07);
background: linear-gradient(180deg, var(--accent-hover), var(--accent));
}
button.primary:active {
background: var(--accent-active);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
button.danger {
background: var(--danger);
border: none;
color: #fff;
box-shadow: var(--shadow-sm);
}
button.danger:hover {
filter: brightness(1.1);
}
button.danger:active {
filter: brightness(0.92);
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
button.big {
padding: 11px 22px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 16px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
border-radius: 10px;
}
input,
select {
background: var(--bg-input);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 11px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 14px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-family: inherit;
transition: border-color 0.12s, box-shadow 0.12s;
}
input::placeholder {
color: var(--faint);
}
input:focus,
select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-subtle);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
/* Native <select> chrome (height, arrow, popup panel) ignores color/border
overrides unless its OS-drawn appearance is dropped first. */
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ea8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
background-repeat: no-repeat;
background-position: right 9px center;
background-size: 14px;
}
select:hover {
border-color: var(--bg-elev);
}
/* The dropdown's own option list stays OS-native (no cross-browser hook to
restyle it), but at least match its swatch to the app's dark theme. */
select option {
background: var(--bg-panel);
color: var(--text);
}
Add multi-select and bulk actions to the Library tab - Checkboxes on every row/tile plus a "Select all" (filtered-set-aware, indeterminate-aware) toggle in the toolbar. - A bulk-action bar appears once anything's selected: add to a deck ("Add 1" sets each selected card to 1 copy, "Add All" sets it to however many you own — the latter is the one-click fix for bulk-adding a stack of basic lands), set location, and adjust owned quantity by a configurable delta. All reuse the same per-card commands the single-card UI already calls, so behavior stays consistent (including the existing grace-period undo on quantity_owned hitting 0). - CardTile gains a `cornerLeft` slot and `selected` prop (ring highlight, keeps the checkbox visible without hovering) to support this in tile view without disturbing the existing top-right qty-stepper corner. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 08:20:09 -05:00
input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--accent);
cursor: pointer;
}
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* ============================================================
Primitives: shared surface / label / page-header building blocks.
These replace treatments that were previously hand-copied (with drift)
across the views — edit here to change all of them at once.
============================================================ */
/* Canonical raised surface. Replaces the ~6 hand-copied panel treatments
(deck-meta, commander-hero, deck-stats, filters, legality-tile base,
preview-info). The top inner-highlight gives a subtle tactile edge. */
.panel {
background: var(--bg-panel);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--panel-highlight);
}
/* Recessed variant for wells nested inside a panel. */
.panel-inset {
background: var(--bg-app);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: var(--space-3);
}
/* Canonical uppercase section marker (panel/section headers). Uppercase +
tracking reads as structural; `--muted` (not faint) keeps it legible. */
.section-label {
font-size: var(--fs-label);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--muted);
}
/* Standard page header: title on the left, control cluster on the right,
wrapping onto two lines on a narrow viewport. Replaces the ad-hoc
`<div class="row" style="justify-content:space-between">` each view used. */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.page-header-title {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0;
min-width: 0;
}
/* The right-hand control cluster (group-by + sort + view toggle + page
actions). Also usable standalone. */
.page-header-actions,
.toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
/* ============================================================
App shell: nav rail + main
============================================================ */
.app {
display: flex;
Add Android support via Tauri The Rust core was already portable (caller-provided db paths, rustls rather than openssl) and the shell already had the mobile entry point, so this is mostly toolchain, provisioning, and platform-gating. Toolchain: - scripts/android-setup.sh installs what Android Studio doesn't: SDK cmdline-tools, a pinned stable NDK, and the Rust Android targets. The NDK is pinned rather than "latest" because sdkmanager's newest is often a beta (30.0.15729638 is r30-beta2) -- not something to compile SQLite with. Prefers Android Studio's bundled JDK 21, since Gradle rejects newer JDKs. - Track src-tauri/gen/android (excluding build output): AndroidManifest.xml is hand-edited and Android permissions have no tauri.conf.json equivalent. - vite: serve on TAURI_DEV_HOST so a device/emulator can reach the dev server. Card data: downloading streams ~740MB to build a ~73MB db, which is rough on a phone. Add import_reference_db to adopt a desktop-built file instead, validated by db::inspect_reference_db first so picking the wrong file is a clean error rather than a broken install. Installs via copy-then-rename so an interrupted copy can't leave a partial db. Ingest hardening (helps desktop too): - Give ureq connect/read timeouts. Cancellation is only polled per parsed record, so a stalled socket previously hung forever with no way to cancel. - Drop the remove_file before rename; POSIX rename already replaces atomically, and the delete-first window could leave no reference.db at all if the process was killed -- much likelier on Android. UI: hide Open/New Library on mobile (scoped storage has no arbitrary-path equivalent, and SQLite can't open a content:// URI), reported via a cfg!(mobile) flag on Status rather than user-agent sniffing. Use 100dvh so the soft keyboard doesn't break the shell. Verified: 70/70 core tests, desktop build clean, and the aarch64 APK builds (bundled SQLite C and ring both cross-compile under NDK 28). Not yet run on a device.
2026-08-02 13:16:34 -05:00
/* `dvh` tracks the *dynamic* viewport, so an on-screen keyboard (or a mobile
browser's collapsing chrome) shrinks the shell instead of pushing content
out of an over-tall, unscrollable `100vh` box. Falls back for older
engines that don't know dvh. */
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
height: 100vh;
Add Android support via Tauri The Rust core was already portable (caller-provided db paths, rustls rather than openssl) and the shell already had the mobile entry point, so this is mostly toolchain, provisioning, and platform-gating. Toolchain: - scripts/android-setup.sh installs what Android Studio doesn't: SDK cmdline-tools, a pinned stable NDK, and the Rust Android targets. The NDK is pinned rather than "latest" because sdkmanager's newest is often a beta (30.0.15729638 is r30-beta2) -- not something to compile SQLite with. Prefers Android Studio's bundled JDK 21, since Gradle rejects newer JDKs. - Track src-tauri/gen/android (excluding build output): AndroidManifest.xml is hand-edited and Android permissions have no tauri.conf.json equivalent. - vite: serve on TAURI_DEV_HOST so a device/emulator can reach the dev server. Card data: downloading streams ~740MB to build a ~73MB db, which is rough on a phone. Add import_reference_db to adopt a desktop-built file instead, validated by db::inspect_reference_db first so picking the wrong file is a clean error rather than a broken install. Installs via copy-then-rename so an interrupted copy can't leave a partial db. Ingest hardening (helps desktop too): - Give ureq connect/read timeouts. Cancellation is only polled per parsed record, so a stalled socket previously hung forever with no way to cancel. - Drop the remove_file before rename; POSIX rename already replaces atomically, and the delete-first window could leave no reference.db at all if the process was killed -- much likelier on Android. UI: hide Open/New Library on mobile (scoped storage has no arbitrary-path equivalent, and SQLite can't open a content:// URI), reported via a cfg!(mobile) flag on Status rather than user-agent sniffing. Use 100dvh so the soft keyboard doesn't break the shell. Verified: 70/70 core tests, desktop build clean, and the aarch64 APK builds (bundled SQLite C and ring both cross-compile under NDK 28). Not yet run on a device.
2026-08-02 13:16:34 -05:00
height: 100dvh;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
overflow: hidden;
}
.nav-rail {
width: 220px;
flex-shrink: 0;
background: var(--bg-rail);
border-right: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
padding: 14px 10px 10px;
}
.brand {
display: flex;
align-items: center;
gap: 11px;
padding: 4px 8px 16px;
}
.brand-mark {
width: 34px;
height: 34px;
border-radius: 10px;
Rebrand to mtgc: pirate-ship logo, lowercase app name, mtgc binary - New logomark: an original pirate-ship silhouette (hull, twin billowing sails, swallow-tail pennant) in the terracotta brand gradient on a dark square — a nod to the MTG card "Pirate Ship", not a reproduction of its art. Source at src-tauri/icons/logo-source.svg; regenerate the full platform icon set (desktop/Windows Store/iOS/Android) with `cargo tauri icon src-tauri/icons/logo-source.svg`. - Apply it in-app via a new inline ShipLogo component (App.tsx), replacing the old "M" sidebar mark and "✦" empty-state mark with dark rounded squares containing the ship glyph. - Rename the app to lowercase "mtgc" everywhere: window title and productName (tauri.conf.json), <title> (index.html), sidebar brand text, empty-state heading. - Rename the Tauri package/binary mtgc-app -> mtgc (and its lib crate mtgc_app_lib -> mtgc_lib), so `cargo tauri build` now produces target/release/mtgc; updated main.rs and every README reference. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:53:36 -05:00
background: linear-gradient(150deg, var(--bg-elev), var(--bg-rail));
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.brand-text {
font-weight: 700;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 16px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
color: var(--text-strong);
letter-spacing: 0.2px;
}
.nav-items {
display: flex;
flex-direction: column;
gap: 3px;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
padding: 9px 12px;
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--muted);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 15px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 550;
}
.nav-item:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text);
}
.nav-item.active {
background: var(--accent-subtle);
color: var(--text-strong);
}
.nav-item.active::before {
content: "";
position: absolute;
left: -10px;
top: 9px;
bottom: 9px;
width: 4px;
border-radius: 0 4px 4px 0;
background: var(--accent);
}
.nav-icon {
display: inline-flex;
color: inherit;
}
.nav-foot {
margin-top: auto;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
padding: 14px 10px 10px;
border-top: 1px solid var(--border-soft);
position: relative;
}
.nav-foot::before {
/* A faint accent hairline atop the divider, echoing the active-tab bar. */
content: "";
position: absolute;
top: -1px;
left: 10px;
right: 10px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}
.nav-foot-simple {
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
display: flex;
align-items: center;
gap: 8px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
color: var(--muted);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
flex-shrink: 0;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
.status-dot.on {
background: var(--success);
box-shadow: 0 0 6px var(--success);
}
.status-dot.off {
background: var(--faint);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
/* Sidebar "your library" summary panel. */
.lib-stats-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.lib-stats-title {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
font-size: var(--fs-label);
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
font-weight: 700;
text-transform: uppercase;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
letter-spacing: var(--tracking-label);
color: var(--muted);
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
}
.lib-stats-loading {
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 12px;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
color: var(--faint);
padding-bottom: 10px;
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
/* Generic numeric-stat tile row + segmented color bar — used by both the
sidebar "Your library" panel and the per-deck analysis panel. */
.stat-tiles-row {
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
display: flex;
gap: 6px;
margin-bottom: 10px;
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.stat-tile {
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 2px;
background: var(--bg-panel);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
transition: border-color 0.15s, transform 0.15s;
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.stat-tile:hover {
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
border-color: var(--accent-glow);
transform: translateY(-1px);
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.stat-tile-value {
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 17px;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
font-weight: 800;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 14px var(--accent-glow);
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.stat-tile-label {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
font-size: var(--fs-micro);
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--faint);
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.color-bar {
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
display: flex;
height: 8px;
border-radius: 999px;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
margin-bottom: 9px;
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.color-bar-seg {
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
min-width: 3px;
transition: flex-grow 0.4s ease;
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.color-bar-seg.W { background: var(--mtg-w); }
.color-bar-seg.U { background: var(--mtg-u); }
.color-bar-seg.B { background: var(--mtg-b); }
.color-bar-seg.R { background: var(--mtg-r); }
.color-bar-seg.G { background: var(--mtg-g); }
.color-bar-seg.C { background: var(--mtg-c); }
/* Mana-value curve histogram (per-deck analysis panel). */
.mana-curve {
display: flex;
align-items: flex-end;
gap: 6px;
flex: 1;
min-height: 84px;
margin-top: 4px;
}
.mana-curve-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
gap: 3px;
}
.mana-curve-count {
font-size: 10px;
color: var(--faint);
font-variant-numeric: tabular-nums;
}
.mana-curve-bar {
width: 100%;
min-height: 2px;
border-radius: 3px 3px 0 0;
overflow: hidden;
display: flex;
flex-direction: column;
transition: height 0.25s ease;
}
.mana-curve-seg {
width: 100%;
min-height: 1px;
}
.mana-curve-seg.W { background: var(--mtg-w); }
.mana-curve-seg.U { background: var(--mtg-u); }
.mana-curve-seg.B { background: var(--mtg-b); }
.mana-curve-seg.R { background: var(--mtg-r); }
.mana-curve-seg.G { background: var(--mtg-g); }
.mana-curve-seg.C { background: var(--mtg-c); }
.mana-curve-label {
font-size: 10px;
color: var(--faint);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
.lib-stats-sub {
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
display: flex;
flex-direction: column;
gap: 2px;
font-size: 11px;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
color: var(--faint);
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--bg-content);
}
.topbar {
height: 52px;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
background: var(--bg-topbar);
border-bottom: 1px solid var(--border-soft);
}
.path {
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
flex: 1 1 auto;
min-width: 0;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: var(--faint);
background: rgba(0, 0, 0, 0.25);
padding: 4px 10px;
border-radius: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.spacer {
flex: 1;
}
Overhaul card-data ingest: filter art cards, segmented cancellable progress - Exclude Scryfall Art Series cards (layout "art_series") from ingest — they aren't playable cards and were polluting search results. - Replace the coarse per-stage progress text with a byte-accurate, weighted multi-segment progress bar (Index / Card data / Printings / Indexing) that fills as one continuous bar instead of swapping per stage; segment weights are computed from the real download sizes reported by Scryfall's bulk-data index (the download responses themselves are chunked with no Content-Length to rely on). - Add a Cancel button, wired through a new CancelToken checked once per parsed record so cancellation lands almost instantly. - Fix a related correctness bug this surfaced: ingest used to delete the existing reference.db before writing its replacement, so a cancelled or crashed update left the app with no card database at all. It now builds into a temp file and only atomically replaces reference.db on full success. - Split the topbar's single "Choose library…" action into separate "Open Library…" (existing file) and "New Library…" (save-dialog for a new file) buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:22:31 -05:00
/* Ingest (card-data download/index) progress: one multi-segment bar spanning
all stages, below the topbar. */
.ingest-bar {
padding: 8px 18px 10px;
background: var(--bg-elev);
border-bottom: 1px solid var(--border-soft);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Overhaul card-data ingest: filter art cards, segmented cancellable progress - Exclude Scryfall Art Series cards (layout "art_series") from ingest — they aren't playable cards and were polluting search results. - Replace the coarse per-stage progress text with a byte-accurate, weighted multi-segment progress bar (Index / Card data / Printings / Indexing) that fills as one continuous bar instead of swapping per stage; segment weights are computed from the real download sizes reported by Scryfall's bulk-data index (the download responses themselves are chunked with no Content-Length to rely on). - Add a Cancel button, wired through a new CancelToken checked once per parsed record so cancellation lands almost instantly. - Fix a related correctness bug this surfaced: ingest used to delete the existing reference.db before writing its replacement, so a cancelled or crashed update left the app with no card database at all. It now builds into a temp file and only atomically replaces reference.db on full success. - Split the topbar's single "Choose library…" action into separate "Open Library…" (existing file) and "New Library…" (save-dialog for a new file) buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:22:31 -05:00
}
.ingest-bar-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.ingest-bar-message {
color: var(--muted);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ingest-bar-cancel {
flex-shrink: 0;
padding: 3px 10px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 12px;
Overhaul card-data ingest: filter art cards, segmented cancellable progress - Exclude Scryfall Art Series cards (layout "art_series") from ingest — they aren't playable cards and were polluting search results. - Replace the coarse per-stage progress text with a byte-accurate, weighted multi-segment progress bar (Index / Card data / Printings / Indexing) that fills as one continuous bar instead of swapping per stage; segment weights are computed from the real download sizes reported by Scryfall's bulk-data index (the download responses themselves are chunked with no Content-Length to rely on). - Add a Cancel button, wired through a new CancelToken checked once per parsed record so cancellation lands almost instantly. - Fix a related correctness bug this surfaced: ingest used to delete the existing reference.db before writing its replacement, so a cancelled or crashed update left the app with no card database at all. It now builds into a temp file and only atomically replaces reference.db on full success. - Split the topbar's single "Choose library…" action into separate "Open Library…" (existing file) and "New Library…" (save-dialog for a new file) buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:22:31 -05:00
color: var(--muted);
}
.ingest-bar-cancel:hover {
color: var(--danger);
border-color: var(--danger);
}
.ingest-segments {
display: flex;
gap: 4px;
}
.ingest-segment {
min-width: 0;
}
.ingest-segment-track {
height: 6px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.ingest-segment-fill {
height: 100%;
border-radius: 999px;
background: var(--border);
transition: width 0.2s ease;
}
.ingest-segment.active .ingest-segment-fill {
background: linear-gradient(90deg, var(--accent-hover), var(--accent));
}
.ingest-segment-label {
display: block;
margin-top: 3px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 11px;
Overhaul card-data ingest: filter art cards, segmented cancellable progress - Exclude Scryfall Art Series cards (layout "art_series") from ingest — they aren't playable cards and were polluting search results. - Replace the coarse per-stage progress text with a byte-accurate, weighted multi-segment progress bar (Index / Card data / Printings / Indexing) that fills as one continuous bar instead of swapping per stage; segment weights are computed from the real download sizes reported by Scryfall's bulk-data index (the download responses themselves are chunked with no Content-Length to rely on). - Add a Cancel button, wired through a new CancelToken checked once per parsed record so cancellation lands almost instantly. - Fix a related correctness bug this surfaced: ingest used to delete the existing reference.db before writing its replacement, so a cancelled or crashed update left the app with no card database at all. It now builds into a temp file and only atomically replaces reference.db on full success. - Split the topbar's single "Choose library…" action into separate "Open Library…" (existing file) and "New Library…" (save-dialog for a new file) buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:22:31 -05:00
color: var(--faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ingest-segment.active .ingest-segment-label {
color: var(--accent-hover);
font-weight: 600;
}
.ingest-bar-done .ingest-segment-fill {
background: var(--success);
}
.ingest-bar-done .ingest-bar-message {
color: var(--success);
}
.ingest-bar-error .ingest-segment-fill {
background: var(--danger);
}
.ingest-bar-error .ingest-bar-message {
color: var(--danger);
}
.ingest-bar-cancelled .ingest-segment-fill {
background: var(--warn);
}
.ingest-bar-cancelled .ingest-bar-message {
color: var(--warn);
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.content {
flex: 1;
overflow: auto;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
padding: var(--space-5) var(--space-6);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
/* Empty / welcome state */
.empty-state {
max-width: 480px;
margin: 9vh auto 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.empty-mark {
Rebrand to mtgc: pirate-ship logo, lowercase app name, mtgc binary - New logomark: an original pirate-ship silhouette (hull, twin billowing sails, swallow-tail pennant) in the terracotta brand gradient on a dark square — a nod to the MTG card "Pirate Ship", not a reproduction of its art. Source at src-tauri/icons/logo-source.svg; regenerate the full platform icon set (desktop/Windows Store/iOS/Android) with `cargo tauri icon src-tauri/icons/logo-source.svg`. - Apply it in-app via a new inline ShipLogo component (App.tsx), replacing the old "M" sidebar mark and "✦" empty-state mark with dark rounded squares containing the ship glyph. - Rename the app to lowercase "mtgc" everywhere: window title and productName (tauri.conf.json), <title> (index.html), sidebar brand text, empty-state heading. - Rename the Tauri package/binary mtgc-app -> mtgc (and its lib crate mtgc_app_lib -> mtgc_lib), so `cargo tauri build` now produces target/release/mtgc; updated main.rs and every README reference. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:53:36 -05:00
width: 88px;
height: 88px;
border-radius: 22px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
display: flex;
align-items: center;
justify-content: center;
Rebrand to mtgc: pirate-ship logo, lowercase app name, mtgc binary - New logomark: an original pirate-ship silhouette (hull, twin billowing sails, swallow-tail pennant) in the terracotta brand gradient on a dark square — a nod to the MTG card "Pirate Ship", not a reproduction of its art. Source at src-tauri/icons/logo-source.svg; regenerate the full platform icon set (desktop/Windows Store/iOS/Android) with `cargo tauri icon src-tauri/icons/logo-source.svg`. - Apply it in-app via a new inline ShipLogo component (App.tsx), replacing the old "M" sidebar mark and "✦" empty-state mark with dark rounded squares containing the ship glyph. - Rename the app to lowercase "mtgc" everywhere: window title and productName (tauri.conf.json), <title> (index.html), sidebar brand text, empty-state heading. - Rename the Tauri package/binary mtgc-app -> mtgc (and its lib crate mtgc_app_lib -> mtgc_lib), so `cargo tauri build` now produces target/release/mtgc; updated main.rs and every README reference. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:53:36 -05:00
background: linear-gradient(150deg, var(--bg-elev), var(--bg-rail));
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
box-shadow: 0 10px 30px var(--accent-glow);
}
.empty-state h2 {
margin: 4px 0 0;
}
/* ============================================================
Typography helpers
============================================================ */
h2 {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
margin: var(--space-1) 0 var(--space-4);
font-size: var(--fs-display);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 700;
color: var(--text-strong);
letter-spacing: -0.2px;
}
h3 {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
margin: var(--space-5) 0 var(--space-3);
font-size: var(--fs-title);
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
font-weight: 800;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
text-transform: uppercase;
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
letter-spacing: 0.05em;
color: var(--text-strong);
border-bottom: 2px solid var(--border-soft);
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
padding-bottom: var(--space-3);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
h4 {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
margin: var(--space-4) 0 var(--space-2);
font-size: var(--fs-body);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 600;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Quiet accent — full terracotta is reserved for primary actions. */
color: var(--accent-quiet);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
/* "Group by" sub-headers (e.g. per card type/subtype/CMC/color within a
* section) — sticky within .content's scroll area so the current group
* stays visible while scrolling through a long list, instead of scrolling
* out of view along with its cards. Applied via class (not the bare h3/h4
* tag) since h3 is also used for .dialog-title, which must not be sticky. */
.group-header {
position: sticky;
top: 0;
z-index: 5;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
margin: var(--space-4) 0 var(--space-2);
padding: var(--space-2) 0;
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
background: var(--bg-app);
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
font-size: var(--fs-body);
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
font-weight: 700;
text-transform: none;
letter-spacing: normal;
color: var(--text-strong);
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Quiet warm underline rather than full terracotta (accent hierarchy). */
border-bottom: 2px solid var(--accent-quiet);
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.muted {
color: var(--muted);
}
.hint {
color: var(--muted);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 14px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
line-height: 1.65;
}
.row {
display: flex;
gap: 8px;
align-items: center;
}
.badge {
display: inline-flex;
align-items: center;
background: var(--accent-subtle);
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
color: var(--accent-quiet);
border-radius: var(--radius-pill);
padding: 1px var(--space-2);
font-size: var(--fs-caption);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 700;
}
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
/* Deck format-legality panel: a prominent, colorful tile, matching
.commander-hero / .deck-stats in weight, above the fold on every deck. */
.legality-tile {
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid transparent;
border-radius: var(--radius-lg);
padding: 14px 16px;
}
.legality-tile.legal {
background: rgba(75, 176, 115, 0.16);
border-color: rgba(75, 176, 115, 0.4);
}
.legality-tile.illegal {
background: rgba(216, 80, 63, 0.16);
border-color: rgba(216, 80, 63, 0.4);
}
.legality-tile.unchecked {
background: var(--bg-panel);
border-color: var(--border-soft);
}
.legality-tile-head {
display: flex;
align-items: center;
gap: 14px;
}
.legality-tile-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 999px;
font-size: 20px;
font-weight: 700;
}
.legality-tile.legal .legality-tile-icon {
background: var(--success);
color: #fff;
}
.legality-tile.illegal .legality-tile-icon {
background: var(--danger);
color: #fff;
}
.legality-tile.unchecked .legality-tile-icon {
background: var(--muted);
color: var(--bg-panel);
}
.legality-tile-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.legality-tile-status {
font-weight: 700;
font-size: 14px;
}
.legality-tile.legal .legality-tile-status {
color: var(--success);
}
.legality-tile.illegal .legality-tile-status {
color: var(--danger);
}
.legality-tile-detail {
font-size: 12px;
color: var(--muted);
}
.legality-tile-reasons {
margin: 0 0 0 54px;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--text);
}
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
/* ============================================================
Quantity stepper: [− N +] for owned-copy counts. Used on Add Cards
and both Library views (list + tile) for a consistent look.
============================================================ */
.qty-stepper {
display: inline-flex;
align-items: center;
height: 26px;
border-radius: 999px;
background: var(--bg-input);
border: 1px solid var(--border);
overflow: hidden;
transition: opacity 0.25s ease, background 0.15s ease, border-color 0.15s ease;
}
.qty-stepper-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 100%;
padding: 0;
background: none;
border: none;
border-radius: 0;
color: var(--muted);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 16px;
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.qty-stepper-btn:hover:not(:disabled) {
background: var(--accent-subtle);
color: var(--accent-hover);
}
.qty-stepper-btn:active:not(:disabled) {
background: var(--accent);
color: #fff;
transform: none;
}
.qty-stepper-btn:disabled {
opacity: 0.3;
cursor: default;
}
.qty-stepper-value {
min-width: 22px;
text-align: center;
padding: 0 2px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 14px;
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
font-weight: 700;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
}
.qty-stepper.warn {
border-color: var(--warn);
}
.qty-stepper.warn .qty-stepper-value {
color: var(--warn);
}
.qty-stepper.pending {
opacity: 0.5;
}
/* Overlay variant: dark translucent pill for use atop card art. */
.qty-stepper-overlay {
height: 24px;
background: rgba(0, 0, 0, 0.78);
border: none;
backdrop-filter: blur(2px);
}
.qty-stepper-overlay .qty-stepper-btn {
width: 22px;
color: rgba(255, 255, 255, 0.85);
}
.qty-stepper-overlay .qty-stepper-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.qty-stepper-overlay .qty-stepper-btn:active:not(:disabled) {
background: var(--accent);
color: #fff;
}
.qty-stepper-overlay .qty-stepper-value {
color: #fff;
}
.qty-stepper-overlay.warn {
background: var(--warn);
}
.qty-stepper-overlay.warn .qty-stepper-value,
.qty-stepper-overlay.warn .qty-stepper-btn {
color: #241700;
}
.qty-stepper-overlay.warn .qty-stepper-btn:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.12);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
/* ============================================================
Icon buttons: rename, duplicate, delete, dismiss, close — one
consistent look used everywhere a bare icon-only action appears.
============================================================ */
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
padding: 0;
border-radius: 999px;
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--muted);
}
.icon-btn:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text);
border-color: var(--bg-elev);
}
.icon-btn:active:not(:disabled) {
transform: translateY(1px);
}
.icon-btn:disabled {
opacity: 0.35;
}
.icon-btn.icon-btn-danger:hover:not(:disabled) {
background: rgba(216, 80, 63, 0.15);
color: var(--danger);
border-color: var(--danger);
}
/* Overlay variant: dark translucent, for sitting on top of card art. */
.icon-btn-overlay {
width: 26px;
height: 26px;
background: rgba(0, 0, 0, 0.78);
border: none;
color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(2px);
}
.icon-btn-overlay:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.icon-btn-overlay.icon-btn-danger:hover:not(:disabled) {
background: var(--danger);
color: #fff;
}
/* Row-level action icons (e.g. rename/duplicate/delete a deck): hidden until
* the row is hovered/focused, so the collapsed list stays uncluttered. */
.row-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.12s;
}
li:hover .row-actions,
li:focus-within .row-actions {
opacity: 1;
}
/* ============================================================
Dialogs: confirm (delete) / prompt (rename, duplicate-as)
============================================================ */
.dialog-backdrop {
position: fixed;
inset: 0;
z-index: 400;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 10, 12, 0.72);
backdrop-filter: blur(2px);
animation: preview-fade-in 0.12s ease;
}
.dialog {
width: min(380px, 90vw);
background: var(--bg-panel);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-lg);
}
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
.dialog-wide {
width: min(900px, 92vw);
max-height: 86vh;
overflow-y: auto;
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
.dialog-title {
margin: 0 0 10px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 16px;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
font-weight: 600;
text-transform: none;
letter-spacing: normal;
color: var(--text-strong);
border-bottom: none;
padding-bottom: 0;
}
.dialog-message {
margin: 0 0 18px;
color: var(--muted);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 14px;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
line-height: 1.5;
}
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
.dialog-list {
margin: 0 0 18px;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 320px;
overflow-y: auto;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
.dialog-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.dialog-field input {
width: 100%;
}
.dialog-error {
margin: -6px 0 14px;
color: var(--danger);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
/* ============================================================
Lists (search results, deck list)
============================================================ */
.result-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-panel);
}
.result-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-bottom: 1px solid var(--border-soft);
cursor: pointer;
transition: background 0.1s;
}
.result-list li:last-child {
border-bottom: none;
}
.result-list li:hover {
background: var(--bg-hover);
}
.card-name {
font-weight: 600;
color: var(--text-strong);
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
/* Deck list: name+format on one row, actions on their own row below, so
* long names don't push the action icons off the edge of the sidebar. */
.result-list.deck-list li {
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.deck-list-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.deck-list-row .card-name {
overflow-wrap: break-word;
}
.deck-list-actions-row {
justify-content: space-between;
}
Add deck synergy suggestions, a responsive deck layout, and undoable library bulk-add Suggestion scoring is fully offline (tribal/mechanic/archetype/mana-base signals derived at ingest, no external synergy database), with an "unusual picks" mode that surfaces underappreciated cards instead of staples. The deck page's top panels now use a CSS grid so wide windows don't waste horizontal space. Library's bulk add-to-deck can clobber existing deck quantities, so it now offers an undo (snackbar + command palette, the latter with no timeout) that restores each card's prior state exactly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-21 21:04:36 -05:00
/* Suggestions list: a thumbnail + a compact name/badges header + wrapped
* synergy reason chips per row, with stacked actions on the right. Denser
* than the default .result-list row (smaller padding/gaps, chips instead of
* a bulleted list) since a card can carry several reasons at once. */
.result-list.suggestion-list li {
cursor: default;
align-items: stretch;
padding: 8px 12px;
}
.suggestion-row {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
}
.suggestion-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.suggestion-head {
display: flex;
align-items: center;
gap: 6px;
}
.suggestion-score {
font-weight: 700;
color: var(--accent-hover);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.suggestion-reasons {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.reason-chip {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
padding: 1px 8px 1px 2px;
font-size: 11px;
line-height: 1.6;
background: var(--bg-elev);
color: var(--muted);
}
.reason-chip-category {
border-radius: 999px;
padding: 1px 7px;
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #fff;
}
.reason-chip-tribal .reason-chip-category {
background: var(--accent);
}
.reason-chip-mechanic .reason-chip-category {
background: var(--mtg-u);
}
.reason-chip-archetype .reason-chip-category {
background: var(--warn);
}
.reason-chip-mana-base .reason-chip-category {
background: var(--success);
}
.suggestion-actions {
display: flex;
flex-direction: column;
gap: 6px;
flex-shrink: 0;
}
.suggestion-actions button {
font-size: 12px;
padding: 5px 10px;
white-space: nowrap;
}
/* Toggleable "filter by why" chips above the suggestion list — same color
* coding as .reason-chip-category, but as clickable, stateful buttons. */
.suggestion-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.filter-chip {
border-radius: 999px;
padding: 3px 12px;
font-size: 12px;
font-weight: 600;
background: var(--bg-elev);
color: var(--muted);
border: 1px solid var(--border-soft);
}
.filter-chip:hover {
background: var(--bg-hover);
}
.filter-chip.active {
color: #fff;
border-color: transparent;
}
.filter-chip-tribal.active {
background: var(--accent);
}
.filter-chip-mechanic.active {
background: var(--mtg-u);
}
.filter-chip-archetype.active {
background: var(--warn);
}
.filter-chip-mana-base.active {
background: var(--success);
}
.filter-chip-clear {
background: none;
border: none;
color: var(--muted);
font-size: 12px;
text-decoration: underline;
padding: 3px 4px;
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.card-type {
color: var(--muted);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
/* ============================================================
Color pips (WUBRG)
============================================================ */
.pips {
display: inline-flex;
gap: 3px;
}
.pip {
width: 18px;
height: 18px;
border-radius: 50%;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 11px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
.pip.W { background: var(--mtg-w); color: #4a3f2a; }
.pip.U { background: var(--mtg-u); color: #fff; }
.pip.B { background: var(--mtg-b); color: #cbc3d4; }
.pip.R { background: var(--mtg-r); color: #fff; }
.pip.G { background: var(--mtg-g); color: #fff; }
.pip.C { background: var(--mtg-c); color: #23242a; }
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.color-toggles {
display: flex;
gap: 5px;
}
.color-toggles .pip {
cursor: pointer;
opacity: 0.32;
transition: opacity 0.1s, box-shadow 0.1s;
}
.color-toggles .pip.on {
opacity: 1;
box-shadow: 0 0 0 2px var(--accent-hover);
}
/* ============================================================
Tables
============================================================ */
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: left;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
padding: var(--space-2) var(--space-3);
font-size: var(--fs-label);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 700;
text-transform: uppercase;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
letter-spacing: var(--tracking-label);
color: var(--muted);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
position: sticky;
top: 0;
background: var(--bg-content);
border-bottom: 1px solid var(--border);
z-index: 1;
}
td {
padding: 8px 12px;
border-bottom: 1px solid var(--border-soft);
vertical-align: middle;
}
tbody tr {
transition: background 0.08s;
}
tbody tr:hover {
background: rgba(255, 255, 255, 0.022);
}
.over-assigned {
color: var(--warn);
font-weight: 600;
}
.deck-chip {
display: inline-flex;
align-items: center;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 8px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 12px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
color: var(--text);
margin-right: 4px;
}
Add multi-select and bulk actions to the Library tab - Checkboxes on every row/tile plus a "Select all" (filtered-set-aware, indeterminate-aware) toggle in the toolbar. - A bulk-action bar appears once anything's selected: add to a deck ("Add 1" sets each selected card to 1 copy, "Add All" sets it to however many you own — the latter is the one-click fix for bulk-adding a stack of basic lands), set location, and adjust owned quantity by a configurable delta. All reuse the same per-card commands the single-card UI already calls, so behavior stays consistent (including the existing grace-period undo on quantity_owned hitting 0). - CardTile gains a `cornerLeft` slot and `selected` prop (ring highlight, keeps the checkbox visible without hovering) to support this in tile view without disturbing the existing top-right qty-stepper corner. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 08:20:09 -05:00
/* ============================================================
Bulk-selection action bar (Library tab)
============================================================ */
.bulk-bar {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
background: var(--accent-subtle);
border: 1px solid var(--accent-glow);
border-radius: var(--radius-lg);
padding: 10px 16px;
margin-bottom: 16px;
}
.bulk-bar-count {
font-weight: 700;
font-size: 13px;
color: var(--accent-hover);
white-space: nowrap;
}
.bulk-bar-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.bulk-bar-delta {
width: 48px;
text-align: center;
padding: 8px 4px;
}
Add deck synergy suggestions, a responsive deck layout, and undoable library bulk-add Suggestion scoring is fully offline (tribal/mechanic/archetype/mana-base signals derived at ingest, no external synergy database), with an "unusual picks" mode that surfaces underappreciated cards instead of staples. The deck page's top panels now use a CSS grid so wide windows don't waste horizontal space. Library's bulk add-to-deck can clobber existing deck quantities, so it now offers an undo (snackbar + command palette, the latter with no timeout) that restores each card's prior state exactly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-21 21:04:36 -05:00
/* Floating "Undo" snackbar (e.g. after a bulk add-to-deck). Fixed so it stays
reachable regardless of scroll position; sits below dialogs (z-index 400+)
since it's only ever shown against the current view, not over a modal. */
.undo-bar {
position: fixed;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 14px;
background: var(--bg-panel);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: 10px 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
z-index: 300;
}
.undo-bar-close {
background: transparent;
border: none;
color: var(--muted);
font-size: 16px;
line-height: 1;
padding: 2px 6px;
cursor: pointer;
}
.undo-bar-close:hover {
color: var(--text-strong);
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
/* ============================================================
Filters panel
============================================================ */
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* The workspace panel unifies the filter grid and the results toolbar into
one surface (Library + Card Search), so the display controls read as part
of the filtering apparatus instead of floating loosely above it. */
.workspace {
margin-bottom: var(--space-4);
}
/* Just the responsive field grid; surface comes from the wrapping `.panel`. */
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
gap: var(--space-4);
}
/* The results toolbar strip at the bottom of the workspace panel: selection +
count on the left, group/sort/view on the right, divided from the filters. */
.workspace-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--border-soft);
}
.workspace-bar-check {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-size: var(--fs-caption);
color: var(--muted);
}
.workspace-bar-count {
font-size: var(--fs-caption);
color: var(--faint);
font-variant-numeric: tabular-nums;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Form field labels: sentence-case and higher-contrast rather than tiny faint
all-caps — clearer to scan above each input than a structural section marker. */
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.field > label {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
font-size: var(--fs-caption);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 600;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
color: var(--muted);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
.location-input {
padding: 4px 8px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
max-width: 160px;
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
/* ============================================================
TagInput: chip-based multi-value filter with autocomplete
(type/subtype/keyword filters in the Library tab)
============================================================ */
.tag-input {
position: relative;
}
.tag-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
min-height: 34px;
padding: 5px 8px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.12s, box-shadow 0.12s;
}
.tag-chips:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-subtle);
}
.tag-chip {
display: inline-flex;
align-items: center;
gap: 2px;
background: var(--accent-subtle);
color: var(--accent-hover);
border-radius: 999px;
padding: 2px 4px 2px 10px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.tag-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: inherit;
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.tag-chip-remove:hover {
background: rgba(0, 0, 0, 0.25);
}
.tag-chip-input {
flex: 1;
min-width: 70px;
border: none;
background: none;
padding: 3px 2px;
font-size: 14px;
}
.tag-chip-input:focus {
outline: none;
border: none;
box-shadow: none;
}
.tag-suggestions {
position: absolute;
z-index: 50;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 220px;
overflow-y: auto;
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
/* ============================================================
Card images: thumbnails, hover preview, tiles
============================================================ */
.card-thumb {
width: 40px;
height: 56px;
object-fit: cover;
border-radius: 5px;
display: block;
background: var(--bg-elev);
cursor: zoom-in;
box-shadow: var(--shadow-sm);
transition: transform 0.1s, box-shadow 0.1s;
}
.card-thumb:hover {
transform: scale(1.05);
box-shadow: 0 0 0 2px var(--accent-hover), var(--shadow-md);
}
.thumb-empty {
display: inline-flex;
width: 40px;
height: 56px;
align-items: center;
justify-content: center;
color: var(--faint);
border: 1px dashed var(--border);
border-radius: 5px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 19px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
.hover-card {
position: fixed;
Add deck synergy suggestions, a responsive deck layout, and undoable library bulk-add Suggestion scoring is fully offline (tribal/mechanic/archetype/mana-base signals derived at ingest, no external synergy database), with an "unusual picks" mode that surfaces underappreciated cards instead of staples. The deck page's top panels now use a CSS grid so wide windows don't waste horizontal space. Library's bulk add-to-deck can clobber existing deck quantities, so it now offers an undo (snackbar + command palette, the latter with no timeout) that restores each card's prior state exactly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-21 21:04:36 -05:00
/* Above .dialog-backdrop (400) — cards inside a dialog (e.g. the
suggestions modal) can be hovered for a preview without it appearing
behind the dialog it's in. */
z-index: 450;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
border-radius: 14px;
Add a Card Search tab and fix horizontal-card (Battle/Plane) preview orientation Card Search browses the whole downloaded card universe (not just owned cards), reusing the Library tab's filter/group/sort/list/tiles UI; results show ownership and offer quick "own" and "add to deck" actions. Battles, Planes, and Phenomena store their Scryfall image portrait-shaped with the content itself rotated, so hover/click previews now detect this (a new `horizontal` flag threaded through ingest and every card query, with graceful fallback for a reference.db built before the column existed) and rotate the image back into place. Single-faced and non-DFC cases are verified fixed; a double-faced Battle's front face still needs another pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-22 20:55:17 -05:00
overflow: hidden;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
Add a Card Search tab and fix horizontal-card (Battle/Plane) preview orientation Card Search browses the whole downloaded card universe (not just owned cards), reusing the Library tab's filter/group/sort/list/tiles UI; results show ownership and offer quick "own" and "add to deck" actions. Battles, Planes, and Phenomena store their Scryfall image portrait-shaped with the content itself rotated, so hover/click previews now detect this (a new `horizontal` flag threaded through ingest and every card query, with graceful fallback for a reference.db built before the column existed) and rotate the image back into place. Single-faced and non-DFC cases are verified fixed; a double-faced Battle's front face still needs another pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-22 20:55:17 -05:00
.hover-card-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
.preview-modal-backdrop {
position: fixed;
inset: 0;
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
/* Above .dialog-backdrop (400) — a card can now be clicked to zoom from
inside a dialog (e.g. the sample hand modal), and the zoomed preview
must stay on top of the dialog it was opened from. */
z-index: 450;
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
display: flex;
align-items: center;
justify-content: center;
Add a card details info tile to the click-to-preview modal Shows type line, mana value/colors, price, per-format legality pills, and ownership context (owned copies, decks it's in) when the caller has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so the section just omits itself when absent. The info tile sits beside the card art via flex-wrap and drops to its own line on narrow viewports, rather than shrinking either face to make room. Also shrinks a double-faced Battle's rotated front face when it has a sibling back face, so it no longer renders at full single-card size next to a much smaller back face.
2026-07-22 23:11:26 -05:00
overflow-y: auto;
padding: 24px 12px;
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
background: rgba(10, 10, 12, 0.72);
backdrop-filter: blur(2px);
cursor: zoom-out;
animation: preview-fade-in 0.12s ease;
}
@keyframes preview-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Add a card details info tile to the click-to-preview modal Shows type line, mana value/colors, price, per-format legality pills, and ownership context (owned copies, decks it's in) when the caller has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so the section just omits itself when absent. The info tile sits beside the card art via flex-wrap and drops to its own line on narrow viewports, rather than shrinking either face to make room. Also shrinks a double-faced Battle's rotated front face when it has a sibling back face, so it no longer renders at full single-card size next to a much smaller back face.
2026-07-22 23:11:26 -05:00
/* The info tile (see `.preview-info`) sits beside the card art whenever
there's room, and wraps onto its own line below when there isn't —
plain flex-wrap rather than a hand-tuned width breakpoint, so neither the
art nor the info tile ever has to shrink to make the other fit. Any
remaining vertical overflow (e.g. a double-faced card's full-size faces
plus a tall info tile on a short window) is handled by
`.preview-modal-backdrop`'s own scrolling, not by clipping content. */
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
.preview-modal {
position: relative;
cursor: default;
Add a card details info tile to the click-to-preview modal Shows type line, mana value/colors, price, per-format legality pills, and ownership context (owned copies, decks it's in) when the caller has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so the section just omits itself when absent. The info tile sits beside the card art via flex-wrap and drops to its own line on narrow viewports, rather than shrinking either face to make room. Also shrinks a double-faced Battle's rotated front face when it has a sibling back face, so it no longer renders at full single-card size next to a much smaller back face.
2026-07-22 23:11:26 -05:00
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 16px;
max-width: 96vw;
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
.preview-modal-faces {
position: relative;
}
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
.preview-modal-img {
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
display: none;
max-width: min(720px, 90vw);
max-height: 90vh;
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
border-radius: 18px;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
.preview-modal-img.active {
display: block;
}
Add a Card Search tab and fix horizontal-card (Battle/Plane) preview orientation Card Search browses the whole downloaded card universe (not just owned cards), reusing the Library tab's filter/group/sort/list/tiles UI; results show ownership and offer quick "own" and "add to deck" actions. Battles, Planes, and Phenomena store their Scryfall image portrait-shaped with the content itself rotated, so hover/click previews now detect this (a new `horizontal` flag threaded through ingest and every card query, with graceful fallback for a reference.db built before the column existed) and rotate the image back into place. Single-faced and non-DFC cases are verified fixed; a double-faced Battle's front face still needs another pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-22 20:55:17 -05:00
/* Horizontal cards (Battles/Planes/Phenomena, see `CardRef.horizontal`): the
stored image is portrait-shaped with the content itself rotated. The
wrapper's width/height (landscape) and the inner img's width/height
(the same box transposed, pre-rotation) are computed in JS —
`useRotatedPreviewBox` — and passed in as inline styles; this just
positions/rotates the img to fill the wrapper exactly. */
.preview-modal-img-rotated {
position: relative;
overflow: hidden;
/* Override `.preview-modal-img`'s portrait-oriented max-width/max-height —
they'd otherwise clamp this wrapper's JS-computed (correctly landscape)
inline width/height down, while the un-clamped rotated img inside stays
at its full computed size and overflows, getting cut off by the
`overflow: hidden` above instead of shrinking to fit. */
max-width: none;
max-height: none;
}
.preview-modal-rotate-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
/* Wide enough to show a double-faced card's front and back side by side —
no flip needed. */
@media (min-width: 860px) {
.preview-modal-dfc .preview-modal-faces {
display: flex;
gap: 20px;
}
.preview-modal-dfc .preview-modal-img {
display: block;
max-width: min(430px, 43vw);
}
Add a Card Search tab and fix horizontal-card (Battle/Plane) preview orientation Card Search browses the whole downloaded card universe (not just owned cards), reusing the Library tab's filter/group/sort/list/tiles UI; results show ownership and offer quick "own" and "add to deck" actions. Battles, Planes, and Phenomena store their Scryfall image portrait-shaped with the content itself rotated, so hover/click previews now detect this (a new `horizontal` flag threaded through ingest and every card query, with graceful fallback for a reference.db built before the column existed) and rotate the image back into place. Single-faced and non-DFC cases are verified fixed; a double-faced Battle's front face still needs another pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-22 20:55:17 -05:00
/* A horizontal front face (e.g. a transformed Battle) shown side-by-side
with its back face: keep using the JS-computed inline width/height
(see `.preview-modal-img-rotated` above) rather than the narrower DFC
column width, which would clamp the wrapper and crop the rotated image
the same way the base max-width/max-height would. */
.preview-modal-dfc .preview-modal-img-rotated {
max-width: none;
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
.preview-modal-dfc .preview-modal-flip {
display: none;
}
}
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
.preview-modal-close {
position: absolute;
top: -14px;
right: -14px;
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
}
.preview-modal-close .icon-btn {
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
box-shadow: var(--shadow-md);
}
Deck actions UI, consistent icon buttons, native select fix, sidebar stats - DeckView: rename/duplicate/delete deck via row-hover icon actions, with a ConfirmDialog for delete and PromptDialog (with friendly name- collision errors) for rename/duplicate. - Add a shared IconButton (plus overlay/danger variants) and replace every ad hoc close/remove button in the app with it: deck actions, remove-card-from-deck (list and tile), clear-commander, the card- preview close, and the ingest-progress dismiss. - Fix native <select> (Group by, Format, In deck): only color/border were overridden, leaving native OS chrome (height, arrow, popup) in place. Drop appearance and draw a custom chevron so they match text inputs. - Click-to-preview: show both faces of a double-faced card side by side on wide viewports instead of requiring Flip, and size the preview images larger overall. - Sidebar footer: replace the plain "N cards" line with a "Your library" panel (unique/copies/decks tiles + a WUBRG color-distribution bar), polling get_library_stats while card data is loaded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:21:47 -05:00
.preview-modal-close .icon-btn:hover {
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
background: var(--danger);
color: #fff;
}
.preview-modal-flip {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
padding: 7px 16px;
border-radius: 999px;
background: rgba(20, 20, 24, 0.75);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
font-weight: 600;
backdrop-filter: blur(4px);
}
.preview-modal-flip:hover {
background: var(--accent);
border-color: var(--accent);
}
Add a card details info tile to the click-to-preview modal Shows type line, mana value/colors, price, per-format legality pills, and ownership context (owned copies, decks it's in) when the caller has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so the section just omits itself when absent. The info tile sits beside the card art via flex-wrap and drops to its own line on narrow viewports, rather than shrinking either face to make room. Also shrinks a double-faced Battle's rotated front face when it has a sibling back face, so it no longer renders at full single-card size next to a much smaller back face.
2026-07-22 23:11:26 -05:00
.preview-info {
width: min(320px, 90vw);
flex: 0 0 auto;
display: flex;
flex-direction: column;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
gap: var(--space-3);
Add a card details info tile to the click-to-preview modal Shows type line, mana value/colors, price, per-format legality pills, and ownership context (owned copies, decks it's in) when the caller has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so the section just omits itself when absent. The info tile sits beside the card art via flex-wrap and drops to its own line on narrow viewports, rather than shrinking either face to make room. Also shrinks a double-faced Battle's rotated front face when it has a sibling back face, so it no longer renders at full single-card size next to a much smaller back face.
2026-07-22 23:11:26 -05:00
background: var(--bg-panel);
border: 1px solid var(--border-soft);
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--shadow-lg), var(--panel-highlight);
Add a card details info tile to the click-to-preview modal Shows type line, mana value/colors, price, per-format legality pills, and ownership context (owned copies, decks it's in) when the caller has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so the section just omits itself when absent. The info tile sits beside the card art via flex-wrap and drops to its own line on narrow viewports, rather than shrinking either face to make room. Also shrinks a double-faced Battle's rotated front face when it has a sibling back face, so it no longer renders at full single-card size next to a much smaller back face.
2026-07-22 23:11:26 -05:00
color: var(--text);
}
.preview-info-name {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
color: var(--text-strong);
}
.preview-info-type {
font-size: 13px;
color: var(--muted);
}
.preview-info-row {
display: flex;
align-items: center;
gap: 10px;
}
.preview-info-mv {
font-size: 13px;
font-weight: 600;
}
.preview-info-price {
font-size: 16px;
font-weight: 700;
color: var(--gold);
}
.preview-info-section {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 10px;
border-top: 1px solid var(--border-soft);
}
.preview-info-label {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
font-size: var(--fs-label);
Add a card details info tile to the click-to-preview modal Shows type line, mana value/colors, price, per-format legality pills, and ownership context (owned copies, decks it's in) when the caller has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so the section just omits itself when absent. The info tile sits beside the card art via flex-wrap and drops to its own line on narrow viewports, rather than shrinking either face to make room. Also shrinks a double-faced Battle's rotated front face when it has a sibling back face, so it no longer renders at full single-card size next to a much smaller back face.
2026-07-22 23:11:26 -05:00
font-weight: 700;
text-transform: uppercase;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
letter-spacing: var(--tracking-label);
color: var(--muted);
Add a card details info tile to the click-to-preview modal Shows type line, mana value/colors, price, per-format legality pills, and ownership context (owned copies, decks it's in) when the caller has that data — LibraryCard/DeckEntry rows do, bare CardRefs don't, so the section just omits itself when absent. The info tile sits beside the card art via flex-wrap and drops to its own line on narrow viewports, rather than shrinking either face to make room. Also shrinks a double-faced Battle's rotated front face when it has a sibling back face, so it no longer renders at full single-card size next to a much smaller back face.
2026-07-22 23:11:26 -05:00
}
.preview-info-deck-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.preview-info-legal-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.legal-pill {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border: 1px solid transparent;
white-space: nowrap;
}
.legal-pill.legal-legal {
background: rgba(75, 176, 115, 0.16);
border-color: rgba(75, 176, 115, 0.4);
color: var(--success);
}
.legal-pill.legal-restricted {
background: rgba(224, 163, 74, 0.16);
border-color: rgba(224, 163, 74, 0.4);
color: var(--warn);
}
.legal-pill.legal-banned {
background: rgba(216, 80, 63, 0.16);
border-color: rgba(216, 80, 63, 0.4);
color: var(--danger);
text-decoration: line-through;
}
.legal-pill.legal-not_legal {
border-color: var(--border-soft);
color: var(--faint);
opacity: 0.55;
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 16px;
}
.tile {
display: flex;
flex-direction: column;
gap: 7px;
}
.tile-img-wrap {
position: relative;
}
.tile-img {
width: 100%;
display: block;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
border-radius: var(--radius-card);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
box-shadow: var(--shadow-sm);
Card preview modal, library quantity steppers, and UI polish - Fix keyboard-nav selection highlight (search results, deck list): the Discord-styling rewrite dropped the --panel-2 CSS variable it relied on, so ↑/↓ moved selection but rendered no visible highlight. - Add click-to-preview: clicking a card thumbnail/tile now opens a larger centered modal (list and tile views), with a flip button for double-faced cards' back face. Hover preview is unchanged and clears when a click-preview opens. - Add a QtyStepper component (rounded [− N +] pill, with an `overlay` variant for tile corners) and use it consistently for owned-copy counts on Add Cards, and the Library list and tile views. - Add matching +/- steppers to the Library views; decrementing to 0 dims the row for a 5s grace period (still fully interactive) before it drops out, so an accidental removal can be undone with +. - Topbar: fill remaining width with the library path (no more premature truncation), add icons to Open/New Library and Download/Update card data, and drop the trailing "…" from the library buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 20:55:18 -05:00
cursor: zoom-in;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
transition: transform var(--dur-fast), box-shadow var(--dur-fast);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
.tile:hover .tile-img {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.tile-noimg {
aspect-ratio: 488 / 680;
border: 1px solid var(--border);
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
border-radius: var(--radius-card);
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
background: var(--bg-panel);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 14px;
font-weight: 600;
color: var(--muted);
}
.tile-corner {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 6px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
/* The card art's own mana cost prints in this corner — only cover it while
the tile is actually being interacted with. */
opacity: 0;
transition: opacity 0.12s;
}
.tile:hover .tile-corner,
.tile:focus-within .tile-corner {
opacity: 1;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
Add multi-select and bulk actions to the Library tab - Checkboxes on every row/tile plus a "Select all" (filtered-set-aware, indeterminate-aware) toggle in the toolbar. - A bulk-action bar appears once anything's selected: add to a deck ("Add 1" sets each selected card to 1 copy, "Add All" sets it to however many you own — the latter is the one-click fix for bulk-adding a stack of basic lands), set location, and adjust owned quantity by a configurable delta. All reuse the same per-card commands the single-card UI already calls, so behavior stays consistent (including the existing grace-period undo on quantity_owned hitting 0). - CardTile gains a `cornerLeft` slot and `selected` prop (ring highlight, keeps the checkbox visible without hovering) to support this in tile view without disturbing the existing top-right qty-stepper corner. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 08:20:09 -05:00
.tile-corner-left {
position: absolute;
top: 8px;
left: 8px;
/* Same reasoning as .tile-corner: don't cover the card name unless the
tile is being interacted with — except once selected, where the
checkbox should stay visible so the selection is visible at a glance. */
opacity: 0;
transition: opacity 0.12s;
}
.tile:hover .tile-corner-left,
.tile:focus-within .tile-corner-left,
.tile-selected .tile-corner-left {
opacity: 1;
}
Add card USD pricing and a deck maybeboard Prices come from Scryfall's prices.usd on printings, shown as a hover badge on card tiles. The price is picked independently of whichever printing supplies the display image (the cheapest known price across all printings), since the display printing is often a promo/variant with no listed price. The maybeboard lets a deck track cards under consideration without counting them in deck analysis stats or library assignment totals. Cards move between mainboard and maybeboard via a per-card toggle; maybeboarding the commander clears commander status. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-14 21:32:25 -05:00
.tile-corner-bottom-right {
position: absolute;
bottom: 8px;
right: 8px;
opacity: 0;
transition: opacity 0.12s;
}
.tile:hover .tile-corner-bottom-right,
.tile:focus-within .tile-corner-bottom-right {
opacity: 1;
}
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
.tile-corner-bottom-left {
position: absolute;
bottom: 8px;
left: 8px;
opacity: 0;
transition: opacity 0.12s;
}
.tile:hover .tile-corner-bottom-left,
.tile:focus-within .tile-corner-bottom-left {
opacity: 1;
}
Add multi-select and bulk actions to the Library tab - Checkboxes on every row/tile plus a "Select all" (filtered-set-aware, indeterminate-aware) toggle in the toolbar. - A bulk-action bar appears once anything's selected: add to a deck ("Add 1" sets each selected card to 1 copy, "Add All" sets it to however many you own — the latter is the one-click fix for bulk-adding a stack of basic lands), set location, and adjust owned quantity by a configurable delta. All reuse the same per-card commands the single-card UI already calls, so behavior stays consistent (including the existing grace-period undo on quantity_owned hitting 0). - CardTile gains a `cornerLeft` slot and `selected` prop (ring highlight, keeps the checkbox visible without hovering) to support this in tile view without disturbing the existing top-right qty-stepper corner. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 08:20:09 -05:00
.tile-selected .tile-img {
box-shadow: 0 0 0 3px var(--accent), var(--shadow-md);
}
.tile-select {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.78);
backdrop-filter: blur(2px);
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.tile-badge {
background: rgba(0, 0, 0, 0.78);
color: #fff;
border-radius: 8px;
padding: 2px 9px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
font-weight: 700;
backdrop-filter: blur(2px);
}
.tile-badge.warn {
background: var(--warn);
color: #241700;
}
.tile-footer {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
/* ============================================================
Toolbar controls: group-by + view toggle
============================================================ */
.group-by {
display: inline-flex;
align-items: center;
gap: 7px;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
color: var(--muted);
}
Add a Card Search tab and fix horizontal-card (Battle/Plane) preview orientation Card Search browses the whole downloaded card universe (not just owned cards), reusing the Library tab's filter/group/sort/list/tiles UI; results show ownership and offer quick "own" and "add to deck" actions. Battles, Planes, and Phenomena store their Scryfall image portrait-shaped with the content itself rotated, so hover/click previews now detect this (a new `horizontal` flag threaded through ingest and every card query, with graceful fallback for a reference.db built before the column existed) and rotate the image back into place. Single-faced and non-DFC cases are verified fixed; a double-faced Battle's front face still needs another pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-22 20:55:17 -05:00
.sort-dir-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 30px;
height: 30px;
padding: 0;
font-size: 15px;
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.view-toggle {
display: inline-flex;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.view-toggle button {
border: none;
border-radius: 0;
background: transparent;
Show reference-data update time, location filter UI, and tile fixes - Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 21:35:09 -05:00
font-size: 13px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
padding: 5px 12px;
color: var(--muted);
}
.view-toggle button:hover {
background: rgba(255, 255, 255, 0.04);
}
.view-toggle button.active {
background: var(--accent);
color: #fff;
}
/* ============================================================
Deck metadata (format + commander)
============================================================ */
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Two-pane deck screen: deck list + selected-deck detail. Stacks below the
tablet breakpoint (see the responsive section) so the list sits above the
detail on narrow/portrait viewports. */
.deck-layout {
display: flex;
gap: var(--space-5);
align-items: flex-start;
}
.deck-sidebar {
width: 240px;
flex-shrink: 0;
}
/* Surface from `.panel`; layout only here. */
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.deck-meta {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
gap: var(--space-5);
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
}
/* Separates the deck-level info panels (commander, format, analysis,
legality) from the card-management controls + lists below. */
.deck-section-divider {
border: none;
border-top: 1px solid var(--border-soft);
margin: 4px 0 18px;
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
}
Add deck synergy suggestions, a responsive deck layout, and undoable library bulk-add Suggestion scoring is fully offline (tribal/mechanic/archetype/mana-base signals derived at ingest, no external synergy database), with an "unusual picks" mode that surfaces underappreciated cards instead of staples. The deck page's top panels now use a CSS grid so wide windows don't waste horizontal space. Library's bulk add-to-deck can clobber existing deck quantities, so it now offers an undo (snackbar + command palette, the latter with no timeout) that restores each card's prior state exactly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-21 21:04:36 -05:00
/* The four top-of-page info panels (commander, meta, analysis, legality).
Single column matches the existing top-to-bottom reading order on
narrow/portrait viewports; on wide viewports the compact panels move
into a side column so the analysis panel (the one panel that benefits
from extra width) gets the rest of the row instead of everything
stretching out with wasted horizontal space. grid-template-areas (not
flex wrapping) is what lets the two-column arrangement reorder visually
without touching DOM order. */
.deck-top-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"commander"
"meta"
"stats"
"legality";
gap: 16px;
margin-bottom: 16px;
}
.deck-top-commander {
grid-area: commander;
}
.deck-top-meta {
grid-area: meta;
}
.deck-top-stats {
grid-area: stats;
}
.deck-top-legality {
grid-area: legality;
}
@media (min-width: 1100px) {
.deck-top-grid {
grid-template-columns: minmax(360px, 560px) 1fr;
grid-template-areas:
"commander stats"
"meta stats"
"legality stats";
align-items: start;
}
}
Initial commit: MTG personal library catalog (Tauri v2 + React/TS) Full working app with: - Rust core (mtgc-core): Scryfall ingester, nucleo fuzzy search, SQLite two-DB architecture (reference.db + library.db via ATTACH), criteria filters, deck ops - Tauri v2 shell exposing the core as typed IPC commands - React/TS frontend: card entry, library browser, deck editor - Features: fuzzy card search, color/CMC/type/commander-identity filters, tile/list view toggle, hover card previews, deck format + commander support, per-card location field, grouping by type/subtype/CMC/color, localStorage persistence for active tab/deck/grouping, Discord-inspired dark UI (#C8553D accent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-07 19:37:56 -05:00
.commander-box {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 280px;
flex: 1;
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Prominent commander card display, above the fold on a Commander/Brawl deck.
Surface from `.panel`; layout only here. */
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.commander-hero {
display: flex;
align-items: center;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
gap: var(--space-4);
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
}
.commander-hero-img {
width: 84px;
height: 117px;
flex-shrink: 0;
object-fit: cover;
border-radius: 8px;
cursor: zoom-in;
}
.commander-hero-noimg {
width: 84px;
height: 117px;
flex-shrink: 0;
border: 1px dashed var(--border);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px;
font-size: 11px;
font-weight: 600;
color: var(--muted);
}
.commander-hero-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.commander-hero-label {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
font-size: var(--fs-micro);
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
font-weight: 700;
text-transform: uppercase;
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
letter-spacing: var(--tracking-label);
/* Quiet accent keeps a hint of brand on the hero without competing with
primary-action terracotta elsewhere. */
color: var(--accent-quiet);
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
}
.commander-hero-name {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
font-size: var(--fs-display);
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
font-weight: 700;
color: var(--text-strong);
}
.commander-hero-type {
font-size: 12px;
color: var(--muted);
}
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
/* Per-deck analysis panel. Surface from `.panel`. */
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
.deck-stats-head {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
margin-bottom: var(--space-3);
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
}
.deck-stats-body {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.deck-stats-numbers {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 220px;
}
.deck-stats-curve {
flex: 1;
min-width: 220px;
Add deck synergy suggestions, a responsive deck layout, and undoable library bulk-add Suggestion scoring is fully offline (tribal/mechanic/archetype/mana-base signals derived at ingest, no external synergy database), with an "unusual picks" mode that surfaces underappreciated cards instead of staples. The deck page's top panels now use a CSS grid so wide windows don't waste horizontal space. Library's bulk add-to-deck can clobber existing deck quantities, so it now offers an undo (snackbar + command palette, the latter with no timeout) that restores each card's prior state exactly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-21 21:04:36 -05:00
max-width: 420px;
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
display: flex;
flex-direction: column;
}
.deck-stats-curve-label {
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
font-size: var(--fs-micro);
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--faint);
Cohesive styling pass: design tokens, shared primitives, responsive groundwork The UI had a good terracotta-on-dark system that wasn't applied consistently — magic-number spacing, ad-hoc page headers, ~6 copied panel surfaces, ~8 drifting label variants, and scattered accent use. - Tokens: warm the neutral ramp, add spacing/radius/type/motion scales, --accent-quiet + panel highlight. Terracotta hue unchanged. - Primitives: .panel, .section-label, .page-header/.toolbar — collapse the copied surfaces and label variants onto shared classes. - Unify each filter-heavy page's display controls (group/sort/view, select-all, count) into a workspace toolbar inside the filter panel, so they read as one surface instead of floating above it. - Labels: sentence-case, higher-contrast form labels; uppercase section markers bumped faint -> muted. - Accent hierarchy: reserve full terracotta for primary actions/active state; demote decorative labels and the group-header underline. - Responsive groundwork: reflow classes for the deck two-pane and nav rail (stacks / icon-collapse at breakpoints), touch-target sizing. Desktop unchanged in kind.
2026-07-22 23:44:21 -05:00
margin-bottom: var(--space-1);
}
/* ============================================================
Responsive groundwork
Desktop (the primary target) is unchanged above; these breakpoints keep
the layout usable as the window narrows and lay the foundation for a
future mobile port. Breakpoints: 1000 (tablet) and 720 (compact).
============================================================ */
/* Tablet: the deck two-pane stacks (list above detail). */
@media (max-width: 1000px) {
.deck-layout {
flex-direction: column;
}
.deck-sidebar {
width: 100%;
}
}
/* Compact: tighten page gutters and collapse the nav rail to an icon strip
(same items — labels, wordmark, and the library summary hide; hover/title
still names each tab). No separate mobile navigation is introduced. */
@media (max-width: 720px) {
.content {
padding: var(--space-4);
}
.nav-rail {
width: 60px;
padding: var(--space-3) var(--space-2) var(--space-2);
}
.brand {
justify-content: center;
padding: var(--space-1) 0 var(--space-4);
}
.brand-text {
display: none;
}
.nav-item {
justify-content: center;
padding: var(--space-2);
}
.nav-label {
display: none;
}
.nav-item.active::before {
left: -8px;
}
.nav-foot {
display: none;
}
.topbar {
padding: 0 var(--space-3);
}
/* The library path is the first thing to go when horizontal space is tight —
the library actions stay reachable. */
.path {
display: none;
}
}
/* Touch input (future mobile / touchscreen laptops): grow tap targets to a
comfortable size without inflating the compact mouse-driven desktop look. */
@media (pointer: coarse) {
button,
input,
select,
.nav-item {
min-height: var(--control-h);
}
input[type="checkbox"] {
width: 18px;
height: 18px;
}
Add deck analysis panel with mana production/consumption bars and oracle text search Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 23:54:47 -05:00
}
Add deck legality checking, deck/library import-export, and a command palette Threads Scryfall's per-format legalities through the reference db and adds a deck-page indicator (structural rules + banned/restricted lists) that lists violation reasons inline. Decks and selected library cards can now be exported to/imported from plain-text decklists, with best-effort name resolution and a report of anything that didn't match. Also adds a shuffle- and-draw sample hand modal, and an Alt+/ command palette for jumping to a tab, deck, or card without leaving the keyboard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 00:21:22 -05:00
Reference in New Issue Copy Permalink