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>
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
use std::path::PathBuf;
|
||||
use std::sync::Mutex;
|
||||
|
||||
use mtgc_core::{CardRef, Deck, DeckEntry, LibraryCard, LibraryFilter};
|
||||
use mtgc_core::{CardRef, Deck, DeckEntry, LibraryCard, LibraryFilter, LibraryStats};
|
||||
use serde::Serialize;
|
||||
use tauri::{AppHandle, Emitter, State};
|
||||
|
||||
@@ -127,6 +127,12 @@ pub fn search_library(db: Db, filter: LibraryFilter) -> Res<Vec<LibraryCard>> {
|
||||
s.catalog()?.search_library(&filter).map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn get_library_stats(db: Db) -> Res<LibraryStats> {
|
||||
let s = db.lock().unwrap();
|
||||
s.catalog()?.library_stats().map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn list_decks(db: Db) -> Res<Vec<Deck>> {
|
||||
let s = db.lock().unwrap();
|
||||
@@ -147,6 +153,22 @@ pub fn delete_deck(db: Db, deck_id: i64) -> Res<()> {
|
||||
s.catalog()?.delete_deck(deck_id).map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn rename_deck(db: Db, deck_id: i64, name: String) -> Res<()> {
|
||||
let s = db.lock().unwrap();
|
||||
s.catalog()?
|
||||
.rename_deck(deck_id, &name)
|
||||
.map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn duplicate_deck(db: Db, deck_id: i64, new_name: String) -> Res<Deck> {
|
||||
let s = db.lock().unwrap();
|
||||
s.catalog()?
|
||||
.duplicate_deck(deck_id, &new_name)
|
||||
.map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn set_deck_format(db: Db, deck_id: i64, format: String) -> Res<()> {
|
||||
let s = db.lock().unwrap();
|
||||
|
||||
@@ -30,9 +30,12 @@ pub fn run() {
|
||||
commands::set_owned,
|
||||
commands::set_location,
|
||||
commands::search_library,
|
||||
commands::get_library_stats,
|
||||
commands::list_decks,
|
||||
commands::create_deck,
|
||||
commands::delete_deck,
|
||||
commands::rename_deck,
|
||||
commands::duplicate_deck,
|
||||
commands::set_deck_format,
|
||||
commands::set_deck_commander,
|
||||
commands::set_deck_card,
|
||||
|
||||
101
src/App.tsx
101
src/App.tsx
@@ -1,8 +1,8 @@
|
||||
import { useEffect, useRef, useState, useCallback, ReactNode } from "react";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { open, save } from "@tauri-apps/plugin-dialog";
|
||||
import { api, IngestProgress, IngestStageInfo, Status } from "./api";
|
||||
import { HoverPreviewProvider, usePersistedState } from "./components";
|
||||
import { api, IngestProgress, IngestStageInfo, LibraryStats, Status } from "./api";
|
||||
import { HoverPreviewProvider, IconButton, Icons, usePersistedState } from "./components";
|
||||
import { CardEntry } from "./views/CardEntry";
|
||||
import { LibraryBrowser } from "./views/LibraryBrowser";
|
||||
import { DeckView } from "./views/DeckView";
|
||||
@@ -86,6 +86,7 @@ function segmentFill(stages: IngestStageInfo[], index: number, overallPercent: n
|
||||
|
||||
export default function App() {
|
||||
const [status, setStatus] = useState<Status | null>(null);
|
||||
const [libStats, setLibStats] = useState<LibraryStats | null>(null);
|
||||
const [tab, setTab] = usePersistedState<Tab>("active-tab", "add");
|
||||
const [progress, setProgress] = useState<IngestProgress | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
@@ -106,6 +107,25 @@ export default function App() {
|
||||
};
|
||||
}, [refreshStatus]);
|
||||
|
||||
const ready = status?.reference_ready ?? false;
|
||||
|
||||
// Keep the sidebar's library summary fresh: fetch once card data is ready,
|
||||
// then poll (cards/decks can change from any tab without a shared event bus).
|
||||
useEffect(() => {
|
||||
if (!ready) {
|
||||
setLibStats(null);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
const refresh = () => api.getLibraryStats().then((s) => !cancelled && setLibStats(s));
|
||||
refresh();
|
||||
const interval = setInterval(refresh, 5000);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [ready]);
|
||||
|
||||
async function updateCardData() {
|
||||
setBusy(true);
|
||||
try {
|
||||
@@ -175,8 +195,6 @@ export default function App() {
|
||||
if (typeof path === "string") await switchLibrary(path);
|
||||
}
|
||||
|
||||
const ready = status?.reference_ready ?? false;
|
||||
|
||||
return (
|
||||
<HoverPreviewProvider>
|
||||
<div className="app">
|
||||
@@ -200,8 +218,71 @@ export default function App() {
|
||||
</div>
|
||||
|
||||
<div className="nav-foot">
|
||||
<span className={`status-dot ${ready ? "on" : "off"}`} />
|
||||
{ready ? `${status?.card_count.toLocaleString()} cards` : "No card data"}
|
||||
{!ready ? (
|
||||
<div className="nav-foot-simple">
|
||||
<span className="status-dot off" />
|
||||
No card data
|
||||
</div>
|
||||
) : (
|
||||
<div className="lib-stats">
|
||||
<div className="lib-stats-head">
|
||||
<span className="status-dot on" />
|
||||
<span className="lib-stats-title">Your library</span>
|
||||
</div>
|
||||
{!libStats ? (
|
||||
<div className="lib-stats-loading">Loading…</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="lib-stats-numbers">
|
||||
<div className="lib-stat">
|
||||
<span className="lib-stat-value">
|
||||
{libStats.unique_cards.toLocaleString()}
|
||||
</span>
|
||||
<span className="lib-stat-label">unique</span>
|
||||
</div>
|
||||
<div className="lib-stat">
|
||||
<span className="lib-stat-value">
|
||||
{libStats.total_copies.toLocaleString()}
|
||||
</span>
|
||||
<span className="lib-stat-label">copies</span>
|
||||
</div>
|
||||
<div className="lib-stat">
|
||||
<span className="lib-stat-value">
|
||||
{libStats.deck_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="lib-stat-label">decks</span>
|
||||
</div>
|
||||
</div>
|
||||
{libStats.total_copies > 0 && (
|
||||
<div className="lib-color-bar">
|
||||
{(
|
||||
[
|
||||
["W", libStats.color_counts[0]],
|
||||
["U", libStats.color_counts[1]],
|
||||
["B", libStats.color_counts[2]],
|
||||
["R", libStats.color_counts[3]],
|
||||
["G", libStats.color_counts[4]],
|
||||
["C", libStats.colorless_count],
|
||||
] as [string, number][]
|
||||
).map(([code, count]) =>
|
||||
count > 0 ? (
|
||||
<span
|
||||
key={code}
|
||||
className={`lib-color-seg ${code}`}
|
||||
style={{ flexGrow: count }}
|
||||
title={`${code === "C" ? "Colorless" : code}: ${count.toLocaleString()} copies`}
|
||||
/>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div className="lib-stats-sub">
|
||||
{status?.card_count.toLocaleString()} cards in database
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -238,13 +319,7 @@ export default function App() {
|
||||
(progress.stage === "done" ||
|
||||
progress.stage === "error" ||
|
||||
progress.stage === "cancelled") && (
|
||||
<button
|
||||
className="ingest-bar-dismiss"
|
||||
onClick={() => setProgress(null)}
|
||||
title="Dismiss"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<IconButton icon={Icons.close} label="Dismiss" onClick={() => setProgress(null)} />
|
||||
)}
|
||||
</div>
|
||||
<div className="ingest-segments">
|
||||
|
||||
12
src/api.ts
12
src/api.ts
@@ -55,6 +55,14 @@ export interface Status {
|
||||
card_count: number;
|
||||
}
|
||||
|
||||
export interface LibraryStats {
|
||||
unique_cards: number;
|
||||
total_copies: number;
|
||||
deck_count: number;
|
||||
color_counts: [number, number, number, number, number]; // W, U, B, R, G
|
||||
colorless_count: number;
|
||||
}
|
||||
|
||||
export interface IngestStageInfo {
|
||||
id: string;
|
||||
label: string;
|
||||
@@ -104,11 +112,15 @@ export const api = {
|
||||
|
||||
searchLibrary: (filter: LibraryFilter) =>
|
||||
invoke<LibraryCard[]>("search_library", { filter }),
|
||||
getLibraryStats: () => invoke<LibraryStats>("get_library_stats"),
|
||||
|
||||
listDecks: () => invoke<Deck[]>("list_decks"),
|
||||
createDeck: (name: string, commanderOracleId: string | null) =>
|
||||
invoke<Deck>("create_deck", { name, commanderOracleId }),
|
||||
deleteDeck: (deckId: number) => invoke<void>("delete_deck", { deckId }),
|
||||
renameDeck: (deckId: number, name: string) => invoke<void>("rename_deck", { deckId, name }),
|
||||
duplicateDeck: (deckId: number, newName: string) =>
|
||||
invoke<Deck>("duplicate_deck", { deckId, newName }),
|
||||
setDeckFormat: (deckId: number, format: string) =>
|
||||
invoke<void>("set_deck_format", { deckId, format }),
|
||||
setDeckCommander: (deckId: number, oracleId: string | null) =>
|
||||
|
||||
@@ -9,6 +9,200 @@ import {
|
||||
} from "react";
|
||||
import { api, CardRef, COLORS, maskToLetters } from "./api";
|
||||
|
||||
// --- Icons ------------------------------------------------------------
|
||||
|
||||
const icon = (children: ReactNode) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="15"
|
||||
height="15"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ICON_TRASH = icon(
|
||||
<>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
|
||||
<path d="M10 11v6" />
|
||||
<path d="M14 11v6" />
|
||||
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
|
||||
</>,
|
||||
);
|
||||
const ICON_COPY = icon(
|
||||
<>
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
|
||||
</>,
|
||||
);
|
||||
const ICON_PENCIL = icon(<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />);
|
||||
const ICON_CLOSE = icon(
|
||||
<>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</>,
|
||||
);
|
||||
|
||||
/**
|
||||
* A small round icon-only button, used consistently for lightweight actions
|
||||
* (rename, duplicate, delete, dismiss, close) throughout the app.
|
||||
* - `overlay`: dark translucent variant for sitting on top of card art.
|
||||
* - `danger`: tints red on hover, for destructive actions.
|
||||
*/
|
||||
export function IconButton({
|
||||
icon,
|
||||
label,
|
||||
onClick,
|
||||
overlay,
|
||||
danger,
|
||||
disabled,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
label: string;
|
||||
onClick: (e: React.MouseEvent) => void;
|
||||
overlay?: boolean;
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={["icon-btn", overlay ? "icon-btn-overlay" : "", danger ? "icon-btn-danger" : ""]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
onClick={onClick}
|
||||
title={label}
|
||||
aria-label={label}
|
||||
disabled={disabled}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export const Icons = {
|
||||
trash: ICON_TRASH,
|
||||
copy: ICON_COPY,
|
||||
pencil: ICON_PENCIL,
|
||||
close: ICON_CLOSE,
|
||||
};
|
||||
|
||||
// --- Dialogs ------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* A centered modal dialog (backdrop + card) shared by [`ConfirmDialog`] and
|
||||
* [`PromptDialog`]. Dismisses on Escape or backdrop click.
|
||||
*/
|
||||
function DialogFrame({
|
||||
title,
|
||||
children,
|
||||
onCancel,
|
||||
}: {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => e.key === "Escape" && onCancel();
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [onCancel]);
|
||||
|
||||
return (
|
||||
<div className="dialog-backdrop" onClick={onCancel}>
|
||||
<div className="dialog" onClick={(e) => e.stopPropagation()}>
|
||||
<h3 className="dialog-title">{title}</h3>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** A confirm/cancel dialog for destructive or otherwise consequential actions. */
|
||||
export function ConfirmDialog({
|
||||
title,
|
||||
message,
|
||||
confirmLabel = "Confirm",
|
||||
danger,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: {
|
||||
title: string;
|
||||
message: ReactNode;
|
||||
confirmLabel?: string;
|
||||
danger?: boolean;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
return (
|
||||
<DialogFrame title={title} onCancel={onCancel}>
|
||||
<p className="dialog-message">{message}</p>
|
||||
<div className="dialog-actions">
|
||||
<button onClick={onCancel}>Cancel</button>
|
||||
<button className={danger ? "danger" : "primary"} onClick={onConfirm} autoFocus>
|
||||
{confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</DialogFrame>
|
||||
);
|
||||
}
|
||||
|
||||
/** A single-text-field dialog (rename, duplicate-as, etc.), Enter to confirm. */
|
||||
export function PromptDialog({
|
||||
title,
|
||||
label,
|
||||
defaultValue,
|
||||
confirmLabel = "Save",
|
||||
error,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: {
|
||||
title: string;
|
||||
label: string;
|
||||
defaultValue: string;
|
||||
confirmLabel?: string;
|
||||
error?: string | null;
|
||||
onConfirm: (value: string) => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
useEffect(() => inputRef.current?.select(), []);
|
||||
|
||||
const confirm = () => {
|
||||
const v = value.trim();
|
||||
if (v) onConfirm(v);
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogFrame title={title} onCancel={onCancel}>
|
||||
<label className="dialog-field">
|
||||
<span className="muted">{label}</span>
|
||||
<input
|
||||
ref={inputRef}
|
||||
autoFocus
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && confirm()}
|
||||
/>
|
||||
</label>
|
||||
{error && <p className="dialog-error">{error}</p>}
|
||||
<div className="dialog-actions">
|
||||
<button onClick={onCancel}>Cancel</button>
|
||||
<button className="primary" onClick={confirm} disabled={!value.trim()}>
|
||||
{confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</DialogFrame>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Inline editor for a card's free-text storage location (e.g. "Box 1").
|
||||
* Saves on blur; used for owned cards that aren't in any deck.
|
||||
@@ -332,15 +526,34 @@ function ClickPreviewModal({
|
||||
onFlip: () => void;
|
||||
}) {
|
||||
const { card, showBack } = state;
|
||||
const src = showBack && card.back_image_uri ? card.back_image_uri : card.image_uri;
|
||||
const hasBack = !!card.back_image_uri;
|
||||
// Both faces are always in the DOM when the card has one; a wide-viewport
|
||||
// media query shows them side by side (no flip needed), while a narrow one
|
||||
// shows only the "active" face and the flip button toggles between them.
|
||||
return (
|
||||
<div className="preview-modal-backdrop" onClick={onClose}>
|
||||
<div className="preview-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<img className="preview-modal-img" src={src} alt={card.name} />
|
||||
<button className="preview-modal-close" onClick={onClose} title="Close (Esc)">
|
||||
✕
|
||||
</button>
|
||||
{card.back_image_uri && (
|
||||
<div
|
||||
className={`preview-modal ${hasBack ? "preview-modal-dfc" : ""}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="preview-modal-faces">
|
||||
<img
|
||||
className={`preview-modal-img ${showBack ? "" : "active"}`}
|
||||
src={card.image_uri}
|
||||
alt={card.name}
|
||||
/>
|
||||
{hasBack && (
|
||||
<img
|
||||
className={`preview-modal-img ${showBack ? "active" : ""}`}
|
||||
src={card.back_image_uri}
|
||||
alt={`${card.name} (back)`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span className="preview-modal-close">
|
||||
<IconButton icon={Icons.close} label="Close (Esc)" onClick={onClose} overlay />
|
||||
</span>
|
||||
{hasBack && (
|
||||
<button className="preview-modal-flip" onClick={onFlip} title="Show the other side">
|
||||
⟲ Flip
|
||||
</button>
|
||||
|
||||
345
src/styles.css
345
src/styles.css
@@ -36,6 +36,14 @@
|
||||
--warn: #e0a34a;
|
||||
--danger: #d8503f;
|
||||
|
||||
/* 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;
|
||||
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
@@ -133,6 +141,18 @@ button.primary:hover {
|
||||
button.primary:active {
|
||||
background: var(--accent-active);
|
||||
}
|
||||
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);
|
||||
}
|
||||
button.big {
|
||||
padding: 11px 22px;
|
||||
font-size: 15px;
|
||||
@@ -160,6 +180,29 @@ select:focus {
|
||||
box-shadow: 0 0 0 3px var(--accent-subtle);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
App shell: nav rail + main
|
||||
============================================================ */
|
||||
@@ -248,18 +291,32 @@ select:focus {
|
||||
}
|
||||
.nav-foot {
|
||||
margin-top: auto;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 10px 6px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--border-soft);
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-dot.on {
|
||||
background: var(--success);
|
||||
@@ -269,6 +326,84 @@ select:focus {
|
||||
background: var(--faint);
|
||||
}
|
||||
|
||||
/* Sidebar "your library" summary panel. */
|
||||
.lib-stats-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lib-stats-title {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--faint);
|
||||
}
|
||||
.lib-stats-loading {
|
||||
font-size: 11px;
|
||||
color: var(--faint);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.lib-stats-numbers {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lib-stat {
|
||||
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;
|
||||
}
|
||||
.lib-stat:hover {
|
||||
border-color: var(--accent-glow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.lib-stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--text-strong);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-shadow: 0 0 14px var(--accent-glow);
|
||||
}
|
||||
.lib-stat-label {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--faint);
|
||||
}
|
||||
.lib-color-bar {
|
||||
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;
|
||||
}
|
||||
.lib-color-seg {
|
||||
min-width: 3px;
|
||||
transition: flex-grow 0.4s ease;
|
||||
}
|
||||
.lib-color-seg.W { background: var(--mtg-w); }
|
||||
.lib-color-seg.U { background: var(--mtg-u); }
|
||||
.lib-color-seg.B { background: var(--mtg-b); }
|
||||
.lib-color-seg.R { background: var(--mtg-r); }
|
||||
.lib-color-seg.G { background: var(--mtg-g); }
|
||||
.lib-color-seg.C { background: var(--mtg-c); }
|
||||
.lib-stats-sub {
|
||||
font-size: 10px;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -334,19 +469,6 @@ select:focus {
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
.ingest-bar-dismiss {
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--faint);
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.ingest-bar-dismiss:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.ingest-segments {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
@@ -580,6 +702,130 @@ h4 {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
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);
|
||||
}
|
||||
.dialog-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 15px;
|
||||
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);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.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);
|
||||
font-size: 12px;
|
||||
}
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Lists (search results, deck list)
|
||||
============================================================ */
|
||||
@@ -636,12 +882,12 @@ h4 {
|
||||
justify-content: center;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.pip.W { background: #f4efdd; color: #4a3f2a; }
|
||||
.pip.U { background: #3a8fd0; color: #fff; }
|
||||
.pip.B { background: #38343d; color: #cbc3d4; }
|
||||
.pip.R { background: var(--accent); color: #fff; }
|
||||
.pip.G { background: #479b63; color: #fff; }
|
||||
.pip.C { background: #9aa0ab; color: #23242a; }
|
||||
.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; }
|
||||
|
||||
.color-toggles {
|
||||
display: flex;
|
||||
@@ -801,34 +1047,45 @@ tbody tr:hover {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
.preview-modal-faces {
|
||||
position: relative;
|
||||
}
|
||||
.preview-modal-img {
|
||||
display: block;
|
||||
max-width: min(560px, 84vw);
|
||||
max-height: 84vh;
|
||||
display: none;
|
||||
max-width: min(720px, 90vw);
|
||||
max-height: 90vh;
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.preview-modal-img.active {
|
||||
display: block;
|
||||
}
|
||||
/* 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);
|
||||
}
|
||||
.preview-modal-dfc .preview-modal-flip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.preview-modal-close {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
right: -14px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-elev);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.preview-modal-close .icon-btn {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.preview-modal-close:hover {
|
||||
.preview-modal-close .icon-btn:hover {
|
||||
background: var(--danger);
|
||||
border-color: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.preview-modal-flip {
|
||||
@@ -908,20 +1165,6 @@ tbody tr:hover {
|
||||
background: var(--warn);
|
||||
color: #241700;
|
||||
}
|
||||
.tile-remove {
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tile-remove:hover {
|
||||
background: var(--danger);
|
||||
}
|
||||
.tile-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -5,14 +5,29 @@ import {
|
||||
CardThumb,
|
||||
CardTile,
|
||||
ColorPips,
|
||||
ConfirmDialog,
|
||||
GroupBySelect,
|
||||
GroupMode,
|
||||
IconButton,
|
||||
Icons,
|
||||
PromptDialog,
|
||||
ViewToggle,
|
||||
groupCards,
|
||||
usePersistedState,
|
||||
useViewMode,
|
||||
} from "../components";
|
||||
|
||||
type DeckDialog =
|
||||
| { kind: "delete"; deck: Deck }
|
||||
| { kind: "rename"; deck: Deck }
|
||||
| { kind: "duplicate"; deck: Deck }
|
||||
| null;
|
||||
|
||||
function friendlyDeckError(err: unknown): string {
|
||||
const msg = String(err);
|
||||
return msg.includes("UNIQUE constraint failed") ? "A deck with that name already exists." : msg;
|
||||
}
|
||||
|
||||
const FORMATS = [
|
||||
"",
|
||||
"Commander",
|
||||
@@ -39,6 +54,8 @@ export function DeckView() {
|
||||
const [contents, setContents] = useState<DeckEntry[]>([]);
|
||||
const [view, setView] = useViewMode("deck-view");
|
||||
const [groupBy, setGroupBy] = usePersistedState<GroupMode>("deck-group", "none");
|
||||
const [dialog, setDialog] = useState<DeckDialog>(null);
|
||||
const [dialogError, setDialogError] = useState<string | null>(null);
|
||||
|
||||
const [libQuery, setLibQuery] = useState("");
|
||||
const [libResults, setLibResults] = useState<CardRef[]>([]);
|
||||
@@ -121,12 +138,39 @@ export function DeckView() {
|
||||
await loadContents();
|
||||
}
|
||||
|
||||
async function removeDeck(id: number) {
|
||||
await api.deleteDeck(id);
|
||||
if (selected === id) setSelected(null);
|
||||
async function confirmDelete() {
|
||||
if (dialog?.kind !== "delete") return;
|
||||
await api.deleteDeck(dialog.deck.id);
|
||||
if (selected === dialog.deck.id) setSelected(null);
|
||||
setDialog(null);
|
||||
await loadDecks();
|
||||
}
|
||||
|
||||
async function confirmRename(name: string) {
|
||||
if (dialog?.kind !== "rename") return;
|
||||
try {
|
||||
await api.renameDeck(dialog.deck.id, name);
|
||||
setDialog(null);
|
||||
setDialogError(null);
|
||||
await loadDecks();
|
||||
} catch (err) {
|
||||
setDialogError(friendlyDeckError(err));
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDuplicate(newName: string) {
|
||||
if (dialog?.kind !== "duplicate") return;
|
||||
try {
|
||||
const d = await api.duplicateDeck(dialog.deck.id, newName);
|
||||
setDialog(null);
|
||||
setDialogError(null);
|
||||
await loadDecks();
|
||||
setSelected(d.id);
|
||||
} catch (err) {
|
||||
setDialogError(friendlyDeckError(err));
|
||||
}
|
||||
}
|
||||
|
||||
async function changeFormat(format: string) {
|
||||
if (selected === null) return;
|
||||
await api.setDeckFormat(selected, format);
|
||||
@@ -168,13 +212,12 @@ export function DeckView() {
|
||||
key={e.oracle_id}
|
||||
card={e}
|
||||
corner={
|
||||
<button
|
||||
className="tile-remove"
|
||||
title="Remove from deck"
|
||||
<IconButton
|
||||
icon={Icons.close}
|
||||
label="Remove from deck"
|
||||
overlay
|
||||
onClick={() => setQty(e.oracle_id, 0)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
/>
|
||||
}
|
||||
footer={
|
||||
<span className="tile-badge">
|
||||
@@ -227,7 +270,11 @@ export function DeckView() {
|
||||
</td>
|
||||
<td>{e.quantity_owned}</td>
|
||||
<td>
|
||||
<button onClick={() => setQty(e.oracle_id, 0)}>Remove</button>
|
||||
<IconButton
|
||||
icon={Icons.close}
|
||||
label="Remove from deck"
|
||||
onClick={() => setQty(e.oracle_id, 0)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
@@ -275,15 +322,35 @@ export function DeckView() {
|
||||
<span className="card-name">{d.name}</span>
|
||||
{d.format && <span className="deck-chip">{d.format}</span>}
|
||||
<span className="spacer" />
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeDeck(d.id);
|
||||
}}
|
||||
title="Delete deck"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<span className="row-actions">
|
||||
<IconButton
|
||||
icon={Icons.pencil}
|
||||
label="Rename deck"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialogError(null);
|
||||
setDialog({ kind: "rename", deck: d });
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={Icons.copy}
|
||||
label="Duplicate deck"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialogError(null);
|
||||
setDialog({ kind: "duplicate", deck: d });
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={Icons.trash}
|
||||
label="Delete deck"
|
||||
danger
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialog({ kind: "delete", deck: d });
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
{decks.length === 0 && (
|
||||
@@ -326,9 +393,7 @@ export function DeckView() {
|
||||
<span className="muted">Commander:</span>
|
||||
<strong>{commanderName || "none"}</strong>
|
||||
{commanderName && (
|
||||
<button onClick={clearCommander} title="Clear commander">
|
||||
✕
|
||||
</button>
|
||||
<IconButton icon={Icons.close} label="Clear commander" onClick={clearCommander} />
|
||||
)}
|
||||
</div>
|
||||
<CardSearchBox
|
||||
@@ -372,6 +437,39 @@ export function DeckView() {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{dialog?.kind === "delete" && (
|
||||
<ConfirmDialog
|
||||
title="Delete deck"
|
||||
message={`Delete "${dialog.deck.name}"? This can't be undone.`}
|
||||
confirmLabel="Delete"
|
||||
danger
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => setDialog(null)}
|
||||
/>
|
||||
)}
|
||||
{dialog?.kind === "rename" && (
|
||||
<PromptDialog
|
||||
title="Rename deck"
|
||||
label="Deck name"
|
||||
defaultValue={dialog.deck.name}
|
||||
confirmLabel="Rename"
|
||||
error={dialogError}
|
||||
onConfirm={confirmRename}
|
||||
onCancel={() => setDialog(null)}
|
||||
/>
|
||||
)}
|
||||
{dialog?.kind === "duplicate" && (
|
||||
<PromptDialog
|
||||
title="Duplicate deck"
|
||||
label="Name for the copy"
|
||||
defaultValue={`${dialog.deck.name} (copy)`}
|
||||
confirmLabel="Duplicate"
|
||||
error={dialogError}
|
||||
onConfirm={confirmDuplicate}
|
||||
onCancel={() => setDialog(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user