From e57c3dec517c10f434d71473040f8f34914002d4 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Tue, 7 Jul 2026 21:21:47 -0500
Subject: [PATCH] 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>
---
 src-tauri/src/commands.rs |  24 ++-
 src-tauri/src/lib.rs      |   3 +
 src/App.tsx               | 101 +++++++++--
 src/api.ts                |  12 ++
 src/components.tsx        | 227 ++++++++++++++++++++++++-
 src/styles.css            | 345 ++++++++++++++++++++++++++++++++------
 src/views/DeckView.tsx    | 142 +++++++++++++---
 7 files changed, 760 insertions(+), 94 deletions(-)

diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index f728103..2032de3 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -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();
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 77a08ff..c0b8247 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -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,
diff --git a/src/App.tsx b/src/App.tsx
index 179418a..8b0687d 100644
--- a/src/App.tsx
+++ b/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">
diff --git a/src/api.ts b/src/api.ts
index a64fdba..e877248 100644
--- a/src/api.ts
+++ b/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) =>
diff --git a/src/components.tsx b/src/components.tsx
index 92588a4..54b7be3 100644
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -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>
diff --git a/src/styles.css b/src/styles.css
index d44571c..ac506f8 100644
--- a/src/styles.css
+++ b/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;
diff --git a/src/views/DeckView.tsx b/src/views/DeckView.tsx
index 48325b4..d98e5fe 100644
--- a/src/views/DeckView.tsx
+++ b/src/views/DeckView.tsx
@@ -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>
   );
 }