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