luna/catacomb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
catacomb/docs/superpowers/plans/2026-06-27-desktop-visual-refresh.md

58 KiB
Raw Blame History

Desktop Visual Refresh + Theme Pack — Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Add 12 new themes, theme-aware accent colors, a List/Card/Grid view-mode toggle, polished default Dark/Light, refreshed typography, and unified placeholder thumbnails to the catacomb desktop UI.

Architecture: All theme logic stays in theme.rs; app.rs holds a ThemeAccents snapshot recomputed whenever the theme changes, plus new ViewMode/override state driving three render branches in the video list. A new persisted [ui] default_view_mode config field follows the existing theme/ui_scale shape. Hardcoded accent rings are replaced with reads from self.theme_accents.

Tech Stack: Rust, egui (eframe), serde/toml. Tests via cargo test --release. No new dependencies.

Spec: docs/superpowers/specs/2026-06-27-desktop-visual-refresh-design.md

Conventions to follow (from AGENTS.md):

  • cargo build --release warnings are the lint.
  • The egui dep emits ~39 upstream f32: From<f64> warnings on clean build — those are NOT yours.
  • Settings five-touchpoint shape: config.rs field + Default → app.rs Settings UI → App field seeded at construction + on save.
  • Never commit config.toml, cookies.txt, catacomb.db.

File map

  • src/theme.rs — add ThemeAccents struct + accents_for() helper; add 12 theme fns; promote dark()/light() from stock to hand-tuned; extend THEMES catalog to 19.
  • src/config.rs — add default_view_mode field to UiSection + Default + serde default fn.
  • src/app.rs — ViewMode enum + App fields (theme_accents, view_mode, view_mode_overrides); seed accents at construction; recompute on theme change; branch video list into List/Card/Grid; replace hardcoded accent colors; unify placeholder paint; toolbar 3-segment toggle; typography/spacing bumps; Settings UI for default view mode.
  • tests/api.rs — no changes (desktop-only, not HTTP).

Task 1: ThemeAccents struct + accents_for() lookup

Establishes the sidecar data model before any theme fns use it.

Files:

  • Modify: src/theme.rs:1-24 (top of file, after use)

  • Step 1: Write the failing test

Append to src/theme.rs:

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn accents_for_known_theme_returns_nonzero() {
        let a = accents_for("dark");
        assert_ne!(a.accent, Color32::TRANSPARENT);
        assert_ne!(a.success, Color32::TRANSPARENT);
        assert_ne!(a.warning, Color32::TRANSPARENT);
    }

    #[test]
    fn accents_for_unknown_theme_falls_back() {
        // Unknown theme must still return something usable (falls back to dark).
        let a = accents_for("this-theme-does-not-exist");
        let dark = accents_for("dark");
        assert_eq!(a.accent, dark.accent);
    }

    #[test]
    fn accents_differ_across_themes() {
        // At least two themes should have visibly different accents, proving
        // accents are per-theme, not a global constant.
        let dark = accents_for("dark");
        let light = accents_for("light");
        assert_ne!(dark.accent, light.accent);
    }
}
  • Step 2: Run test to verify it fails

Run: cargo test --release accents Expected: FAIL — cannot find function accents_for / cannot find type ThemeAccents.

  • Step 3: Write minimal implementation

Insert above pub fn apply in src/theme.rs (after the use line at line 1):

/// Theme-aware semantic accent colors. egui `Visuals` has no slot for these,
/// so each theme exposes them here and the paint code in `app.rs` reads from
/// the active snapshot instead of hardcoding RGB values.
#[derive(Clone, Copy, PartialEq, Debug)]
pub struct ThemeAccents {
    /// Selection / focus ring (replaces the hardcoded 120,170,230 blue).
    pub accent: Color32,
    /// Playing / watched indicator (replaces 110,200,110 green).
    pub success: Color32,
    /// Bulk-selection highlight (replaces 180,130,240 purple).
    pub warning: Color32,
}

impl ThemeAccents {
    /// The stock fallback used before theme-specific accents are wired in.
    /// Matches the legacy hardcoded values so behavior is unchanged when a
    /// theme has not yet defined its own.
    pub const LEGACY: ThemeAccents = ThemeAccents {
        accent: Color32::from_rgb(120, 170, 230),
        success: Color32::from_rgb(110, 200, 110),
        warning: Color32::from_rgb(180, 130, 240),
    };
}

/// Look up the semantic accents for a theme name. Falls back to the legacy
/// defaults (and dark's accents once dark is hand-tuned) for unknown names.
pub fn accents_for(name: &str) -> ThemeAccents {
    match name {
        "dark" => ThemeAccents { accent: hex(0x7aa2f7), success: hex(0x9ece6a), warning: hex(0xbb9af7) },
        "light" => ThemeAccents { accent: hex(0x2a5db0), success: hex(0x2e7d32), warning: hex(0x8e44ad) },
        "dracula" => ThemeAccents { accent: hex(0xbd93f9), success: hex(0x50fa7b), warning: hex(0xff79c6) },
        "trans" => ThemeAccents { accent: hex(0x55cdfc), success: hex(0x2e7d32), warning: hex(0xf7a8b8) },
        "emo-nocturnal" => ThemeAccents { accent: hex(0xff0090), success: hex(0x39ff14), warning: hex(0x00f5ff) },
        "emo-coffin" => ThemeAccents { accent: hex(0x8b0000), success: hex(0x39ff14), warning: hex(0xcc2222) },
        "emo-scene-queen" => ThemeAccents { accent: hex(0x39ff14), success: hex(0xff00ff), warning: hex(0x00f5ff) },
        // New themes (values match the palettes added in Task 3).
        "cyberpunk" => ThemeAccents { accent: hex(0x00fff5), success: hex(0x39ff14), warning: hex(0xff003c) },
        "synthwave" => ThemeAccents { accent: hex(0xff2a6d), success: hex(0x05d9e8), warning: hex(0xd136a6) },
        "vaporwave" => ThemeAccents { accent: hex(0x01cdfe), success: hex(0x05ffa1), warning: hex(0xff71ce) },
        "cemetery-moss" => ThemeAccents { accent: hex(0x7a8a6a), success: hex(0x4a5d3a), warning: hex(0x9a9a8a) },
        "vampire" => ThemeAccents { accent: hex(0xc9a227), success: hex(0x8b1a2b), warning: hex(0x5c0a1e) },
        "witching-hour" => ThemeAccents { accent: hex(0x6a4a8b), success: hex(0xb0b8d0), warning: hex(0x1a1a4a) },
        "nord" => ThemeAccents { accent: hex(0x88c0d0), success: hex(0xa3be8c), warning: hex(0xebcb8b) },
        "gruvbox" => ThemeAccents { accent: hex(0xfe8019), success: hex(0xb8bb26), warning: hex(0xd3869b) },
        "tokyo-night" => ThemeAccents { accent: hex(0x7aa2f7), success: hex(0x9ece6a), warning: hex(0xbb9af7) },
        "paper" => ThemeAccents { accent: hex(0x8b6f3a), success: hex(0x4a6b3a), warning: hex(0xc4a86a) },
        "honey" => ThemeAccents { accent: hex(0xe8a838), success: hex(0xb87420), warning: hex(0xc97b4a) },
        "candlelight" => ThemeAccents { accent: hex(0xa8703a), success: hex(0x6b3f1e), warning: hex(0xd9b382) },
        _ => ThemeAccents::LEGACY,
    }
}
  • Step 4: Run test to verify it passes

Run: cargo test --release accents Expected: PASS (3 tests).

  • Step 5: Commit
git add src/theme.rs
git commit -m "feat(theme): add ThemeAccents struct + accents_for() lookup"

Task 2: Promote default Dark/Light to hand-tuned

The out-of-box themes are currently stock egui. Lift them.

Files:

  • Modify: src/theme.rs:13-24 (the apply match arms for dark/light)

  • Step 1: Replace the dark/light match arms with hand-tuned fns

In src/theme.rs, change the apply function so its match calls new private fns:

pub fn apply(ctx: &egui::Context, name: &str) {
    let visuals = match name {
        "light" => light(),
        "dracula" => dracula(),
        "trans" => trans(),
        "emo-nocturnal" => emo_nocturnal(),
        "emo-coffin" => emo_coffin(),
        "emo-scene-queen" => emo_scene_queen(),
        _ => dark(),
    };
    ctx.set_visuals(visuals);
}

Then add two new fns (near the other theme fns, before dracula()):

// Hand-tuned default dark — true near-black panel, cool steel-blue accent.
// Replaces the stock egui::Visuals::dark() so the out-of-box experience
// matches the care given to the themed variants.
fn dark() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x14141a);
    v.window_fill = hex(0x1a1a22);
    v.extreme_bg_color = hex(0x0a0a0e);
    v.faint_bg_color = hex(0x1f1f29);
    v.code_bg_color = hex(0x101016);
    v.selection.bg_fill = hex(0x2a3a5a);
    v.selection.stroke = Stroke::new(1.0, hex(0x7aa2f7));
    v.hyperlink_color = hex(0x7aa2f7);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x1f1f29);
    v.widgets.noninteractive.weak_bg_fill = hex(0x181820);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xc8c8d8));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x2a2a36));
    v.widgets.inactive.bg_fill = hex(0x2a2a36);
    v.widgets.inactive.weak_bg_fill = hex(0x222230);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xd0d0e0));
    v.widgets.hovered.bg_fill = hex(0x3a3a4e);
    v.widgets.hovered.weak_bg_fill = hex(0x303044);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0xe8e8f8));
    v.widgets.active.bg_fill = hex(0x7aa2f7);
    v.widgets.active.weak_bg_fill = hex(0x5a82d7);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0x14141a));
    v.widgets.open.bg_fill = hex(0x3a3a4e);
    v.window_stroke = Stroke::new(1.0, hex(0x2a2a36));
    v
}

// Hand-tuned default light — warm off-white, slate accent.
fn light() -> egui::Visuals {
    let mut v = egui::Visuals::light();
    v.panel_fill = hex(0xf6f4ef);
    v.window_fill = hex(0xfefcf7);
    v.extreme_bg_color = hex(0xffffff);
    v.faint_bg_color = hex(0xefece4);
    v.code_bg_color = hex(0xeae6dc);
    v.selection.bg_fill = hex(0xbcd0ee);
    v.selection.stroke = Stroke::new(1.0, hex(0x2a5db0));
    v.hyperlink_color = hex(0x2a5db0);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0xeae6dc);
    v.widgets.noninteractive.weak_bg_fill = hex(0xf0ede5);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0x3a3a3a));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0xd0ccbf));
    v.widgets.inactive.bg_fill = hex(0xdfe0e8);
    v.widgets.inactive.weak_bg_fill = hex(0xe8e9f0);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0x2a2a2a));
    v.widgets.hovered.bg_fill = hex(0xcdd6e8);
    v.widgets.hovered.weak_bg_fill = hex(0xd8e0ee);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x141414));
    v.widgets.active.bg_fill = hex(0x2a5db0);
    v.widgets.active.weak_bg_fill = hex(0x4a7dd0);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xffffff));
    v.widgets.open.bg_fill = hex(0xcdd6e8);
    v.window_stroke = Stroke::new(1.0, hex(0xd0ccbf));
    v
}
  • Step 2: Build to verify it compiles

Run: cargo build --release Expected: builds clean (ignoring the ~39 upstream f32: From<f64> warnings).

  • Step 3: Smoke-test visually

Run: ./target/release/catacomb Open Settings, switch Dark ↔ Light. Confirm panels/panels/widgets look distinct from the previous stock egui look (near-black panel for dark, warm off-white for light).

  • Step 4: Commit
git add src/theme.rs
git commit -m "feat(theme): hand-tune default Dark/Light themes"

Task 3: Add 12 new theme functions + catalog

Files:

  • Modify: src/theme.rs:3-11 (THEMES catalog) and append 12 fns at end of file

  • Step 1: Extend the THEMES catalog

Replace the THEMES const at src/theme.rs:3-11:

pub const THEMES: &[(&str, &str)] = &[
    ("dark", "Dark"),
    ("light", "Light"),
    ("dracula", "Dracula"),
    ("trans", "Trans"),
    // Catacomb / goth
    ("emo-nocturnal", "Emo: Nocturnal"),
    ("emo-coffin", "Emo: Coffin"),
    ("emo-scene-queen", "Emo: Scene Queen"),
    ("cemetery-moss", "Cemetery Moss"),
    ("vampire", "Vampire"),
    ("witching-hour", "Witching Hour"),
    // Neon / retro
    ("cyberpunk", "Cyberpunk"),
    ("synthwave", "Synthwave '84"),
    ("vaporwave", "Vaporwave"),
    // Dev palettes
    ("nord", "Nord"),
    ("gruvbox", "Gruvbox"),
    ("tokyo-night", "Tokyo Night"),
    // Cozy / light
    ("paper", "Paper"),
    ("honey", "Honey"),
    ("candlelight", "Candlelight"),
];
  • Step 2: Wire the new theme names into apply

Update the apply match in src/theme.rs to dispatch the new names:

pub fn apply(ctx: &egui::Context, name: &str) {
    let visuals = match name {
        "light" => light(),
        "dracula" => dracula(),
        "trans" => trans(),
        "emo-nocturnal" => emo_nocturnal(),
        "emo-coffin" => emo_coffin(),
        "emo-scene-queen" => emo_scene_queen(),
        "cemetery-moss" => cemetery_moss(),
        "vampire" => vampire(),
        "witching-hour" => witching_hour(),
        "cyberpunk" => cyberpunk(),
        "synthwave" => synthwave(),
        "vaporwave" => vaporwave(),
        "nord" => nord(),
        "gruvbox" => gruvbox(),
        "tokyo-night" => tokyo_night(),
        "paper" => paper(),
        "honey" => honey(),
        "candlelight" => candlelight(),
        _ => dark(),
    };
    ctx.set_visuals(visuals);
}
  • Step 3: Append the 12 theme functions

Append to the end of src/theme.rs:

// === Neon / retro ===

// Magenta + electric cyan on black. Hacker HUD.
fn cyberpunk() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x0a0a12);
    v.window_fill = hex(0x0e0e18);
    v.extreme_bg_color = hex(0x050508);
    v.faint_bg_color = hex(0x14141f);
    v.code_bg_color = hex(0x08080f);
    v.selection.bg_fill = hex(0xff003c);
    v.selection.stroke = Stroke::new(1.0, hex(0x00fff5));
    v.hyperlink_color = hex(0x00fff5);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x14141f);
    v.widgets.noninteractive.weak_bg_fill = hex(0x0f0f18);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xc8c8e0));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x2a2a3a));
    v.widgets.inactive.bg_fill = hex(0x1f0018);
    v.widgets.inactive.weak_bg_fill = hex(0x180013);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xd0d0e8));
    v.widgets.hovered.bg_fill = hex(0x6a0044);
    v.widgets.hovered.weak_bg_fill = hex(0x500034);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x00fff5));
    v.widgets.active.bg_fill = hex(0xff003c);
    v.widgets.active.weak_bg_fill = hex(0xcc0030);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xffffff));
    v.widgets.open.bg_fill = hex(0x6a0044);
    v.window_stroke = Stroke::new(1.0, hex(0xff003c));
    v.warn_fg_color = hex(0xfcee0a);
    v.error_fg_color = hex(0xff003c);
    v
}

// Sunset gradient on deep indigo.
fn synthwave() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x2b0a3d);
    v.window_fill = hex(0x330a48);
    v.extreme_bg_color = hex(0x1a0529);
    v.faint_bg_color = hex(0x3a1055);
    v.code_bg_color = hex(0x220833);
    v.selection.bg_fill = hex(0xff2a6d);
    v.selection.stroke = Stroke::new(1.0, hex(0x05d9e8));
    v.hyperlink_color = hex(0x05d9e8);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x3a1055);
    v.widgets.noninteractive.weak_bg_fill = hex(0x2e0c45);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xe8c0e0));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x5a1a7a));
    v.widgets.inactive.bg_fill = hex(0x4a1466);
    v.widgets.inactive.weak_bg_fill = hex(0x3c1055);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xf0d0e8));
    v.widgets.hovered.bg_fill = hex(0x7a1a4a);
    v.widgets.hovered.weak_bg_fill = hex(0x60143a);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0xff9a3c));
    v.widgets.active.bg_fill = hex(0xff2a6d);
    v.widgets.active.weak_bg_fill = hex(0xcc2055);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xffffff));
    v.widgets.open.bg_fill = hex(0x7a1a4a);
    v.window_stroke = Stroke::new(1.0, hex(0xff2a6d));
    v.warn_fg_color = hex(0xff9a3c);
    v.error_fg_color = hex(0xff2a6d);
    v
}

// Pastel pink + cyan + lavender on deep plum.
fn vaporwave() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x1a0033);
    v.window_fill = hex(0x200040);
    v.extreme_bg_color = hex(0x10001f);
    v.faint_bg_color = hex(0x28004e);
    v.code_bg_color = hex(0x150028);
    v.selection.bg_fill = hex(0xb967ff);
    v.selection.stroke = Stroke::new(1.0, hex(0x01cdfe));
    v.hyperlink_color = hex(0x01cdfe);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x28004e);
    v.widgets.noninteractive.weak_bg_fill = hex(0x1f003c);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xe0c0ff));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x4a0070));
    v.widgets.inactive.bg_fill = hex(0x350060);
    v.widgets.inactive.weak_bg_fill = hex(0x2a004f);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xf0d8ff));
    v.widgets.hovered.bg_fill = hex(0x55008a);
    v.widgets.hovered.weak_bg_fill = hex(0x440070);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x01cdfe));
    v.widgets.active.bg_fill = hex(0xff71ce);
    v.widgets.active.weak_bg_fill = hex(0xcc5aa6);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0x1a0033));
    v.widgets.open.bg_fill = hex(0x55008a);
    v.window_stroke = Stroke::new(1.0, hex(0xff71ce));
    v.warn_fg_color = hex(0x05ffa1);
    v.error_fg_color = hex(0xff71ce);
    v
}

// === Catacomb / goth ===

// Weathered stone + mossy green + bone.
fn cemetery_moss() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x1a1f1a);
    v.window_fill = hex(0x1e241e);
    v.extreme_bg_color = hex(0x0f140f);
    v.faint_bg_color = hex(0x242a24);
    v.code_bg_color = hex(0x141814);
    v.selection.bg_fill = hex(0x4a5d3a);
    v.selection.stroke = Stroke::new(1.0, hex(0x7a8a6a));
    v.hyperlink_color = hex(0x9aa86a);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x242a24);
    v.widgets.noninteractive.weak_bg_fill = hex(0x1f241f);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xb8b8a8));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x363a30));
    v.widgets.inactive.bg_fill = hex(0x2a302a);
    v.widgets.inactive.weak_bg_fill = hex(0x232823);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xc8c8b8));
    v.widgets.hovered.bg_fill = hex(0x3a4530);
    v.widgets.hovered.weak_bg_fill = hex(0x2e3826);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0xaac08a));
    v.widgets.active.bg_fill = hex(0x4a5d3a);
    v.widgets.active.weak_bg_fill = hex(0x3a4a2e);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xd4d0c0));
    v.widgets.open.bg_fill = hex(0x3a4530);
    v.window_stroke = Stroke::new(1.0, hex(0x4a5d3a));
    v.warn_fg_color = hex(0xc9a227);
    v.error_fg_color = hex(0x8b1a2b);
    v
}

// Deep wine burgundy + antique gold + black.
fn vampire() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x0d0006);
    v.window_fill = hex(0x120008);
    v.extreme_bg_color = hex(0x070003);
    v.faint_bg_color = hex(0x18000c);
    v.code_bg_color = hex(0x0a0005);
    v.selection.bg_fill = hex(0x5c0a1e);
    v.selection.stroke = Stroke::new(1.0, hex(0xc9a227));
    v.hyperlink_color = hex(0xc9a227);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x18000c);
    v.widgets.noninteractive.weak_bg_fill = hex(0x130009);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xd8c8a8));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x3a0014));
    v.widgets.inactive.bg_fill = hex(0x200010);
    v.widgets.inactive.weak_bg_fill = hex(0x19000c);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xe8d8b8));
    v.widgets.hovered.bg_fill = hex(0x400018);
    v.widgets.hovered.weak_bg_fill = hex(0x300012);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0xc9a227));
    v.widgets.active.bg_fill = hex(0x8b1a2b);
    v.widgets.active.weak_bg_fill = hex(0x700020);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xe8d8b8));
    v.widgets.open.bg_fill = hex(0x400018);
    v.window_stroke = Stroke::new(1.0, hex(0x8b1a2b));
    v.warn_fg_color = hex(0xc9a227);
    v.error_fg_color = hex(0x8b1a2b);
    v
}

// Midnight indigo + moonlight silver + arcane violet.
fn witching_hour() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x0a0a1f);
    v.window_fill = hex(0x0e0e28);
    v.extreme_bg_color = hex(0x05050f);
    v.faint_bg_color = hex(0x14142e);
    v.code_bg_color = hex(0x08081a);
    v.selection.bg_fill = hex(0x1a1a4a);
    v.selection.stroke = Stroke::new(1.0, hex(0xb0b8d0));
    v.hyperlink_color = hex(0xb0b8d0);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x14142e);
    v.widgets.noninteractive.weak_bg_fill = hex(0x101024);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xc0c8e0));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x2a2a55));
    v.widgets.inactive.bg_fill = hex(0x1c1c3c);
    v.widgets.inactive.weak_bg_fill = hex(0x161630);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xd0d8f0));
    v.widgets.hovered.bg_fill = hex(0x2a2a5a);
    v.widgets.hovered.weak_bg_fill = hex(0x20204a);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x6a4a8b));
    v.widgets.active.bg_fill = hex(0x6a4a8b);
    v.widgets.active.weak_bg_fill = hex(0x523a72);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xe8e8f8));
    v.widgets.open.bg_fill = hex(0x2a2a5a);
    v.window_stroke = Stroke::new(1.0, hex(0x6a4a8b));
    v.warn_fg_color = hex(0xc9a227);
    v.error_fg_color = hex(0x8b1a2b);
    v
}

// === Dev palettes ===

// Arctic blues & greys.
fn nord() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x2e3440);
    v.window_fill = hex(0x3b4252);
    v.extreme_bg_color = hex(0x1e222a);
    v.faint_bg_color = hex(0x3b4252);
    v.code_bg_color = hex(0x242933);
    v.selection.bg_fill = hex(0x434c5e);
    v.selection.stroke = Stroke::new(1.0, hex(0x88c0d0));
    v.hyperlink_color = hex(0x88c0d0);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x3b4252);
    v.widgets.noninteractive.weak_bg_fill = hex(0x343b48);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xd8dee9));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x434c5e));
    v.widgets.inactive.bg_fill = hex(0x434c5e);
    v.widgets.inactive.weak_bg_fill = hex(0x3c4454);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xe5e9f0));
    v.widgets.hovered.bg_fill = hex(0x4c566a);
    v.widgets.hovered.weak_bg_fill = hex(0x424c60);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x88c0d0));
    v.widgets.active.bg_fill = hex(0x88c0d0);
    v.widgets.active.weak_bg_fill = hex(0x6fa6ba);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0x2e3440));
    v.widgets.open.bg_fill = hex(0x4c566a);
    v.window_stroke = Stroke::new(1.0, hex(0x4c566a));
    v.warn_fg_color = hex(0xebcb8b);
    v.error_fg_color = hex(0xbf616a);
    v
}

// Warm earthy retro groove.
fn gruvbox() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x282828);
    v.window_fill = hex(0x32302f);
    v.extreme_bg_color = hex(0x1d2021);
    v.faint_bg_color = hex(0x32302f);
    v.code_bg_color = hex(0x1d2021);
    v.selection.bg_fill = hex(0x504945);
    v.selection.stroke = Stroke::new(1.0, hex(0xfe8019));
    v.hyperlink_color = hex(0x83a598);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x32302f);
    v.widgets.noninteractive.weak_bg_fill = hex(0x2c2a29);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xd5c4a1));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x504945));
    v.widgets.inactive.bg_fill = hex(0x504945);
    v.widgets.inactive.weak_bg_fill = hex(0x44403c);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xebdbb2));
    v.widgets.hovered.bg_fill = hex(0x665c54);
    v.widgets.hovered.weak_bg_fill = hex(0x585048);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0xfe8019));
    v.widgets.active.bg_fill = hex(0xd65d0e);
    v.widgets.active.weak_bg_fill = hex(0xaf4f0b);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xebdbb2));
    v.widgets.open.bg_fill = hex(0x665c54);
    v.window_stroke = Stroke::new(1.0, hex(0x665c54));
    v.warn_fg_color = hex(0xfe9d44);
    v.error_fg_color = hex(0xfb4934);
    v
}

// Tokyo city lights. Blue/purple, clean.
fn tokyo_night() -> egui::Visuals {
    let mut v = egui::Visuals::dark();
    v.panel_fill = hex(0x1a1b26);
    v.window_fill = hex(0x20202f);
    v.extreme_bg_color = hex(0x12121c);
    v.faint_bg_color = hex(0x24253a);
    v.code_bg_color = hex(0x16161e);
    v.selection.bg_fill = hex(0x33415c);
    v.selection.stroke = Stroke::new(1.0, hex(0x7aa2f7));
    v.hyperlink_color = hex(0x7aa2f7);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0x24253a);
    v.widgets.noninteractive.weak_bg_fill = hex(0x1f2030);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0xa9b1d6));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0x3b4261));
    v.widgets.inactive.bg_fill = hex(0x2a2b3e);
    v.widgets.inactive.weak_bg_fill = hex(0x232436);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0xc0caf5));
    v.widgets.hovered.bg_fill = hex(0x363b54);
    v.widgets.hovered.weak_bg_fill = hex(0x2d324a);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x7aa2f7));
    v.widgets.active.bg_fill = hex(0x7aa2f7);
    v.widgets.active.weak_bg_fill = hex(0x5c82d4);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0x1a1b26));
    v.widgets.open.bg_fill = hex(0x363b54);
    v.window_stroke = Stroke::new(1.0, hex(0x3b4261));
    v.warn_fg_color = hex(0xe0af68);
    v.error_fg_color = hex(0xf7768e);
    v
}

// === Cozy / light ===

// Aged paper + sepia ink.
fn paper() -> egui::Visuals {
    let mut v = egui::Visuals::light();
    v.panel_fill = hex(0xf4ecd8);
    v.window_fill = hex(0xf8f0dc);
    v.extreme_bg_color = hex(0xfef8e8);
    v.faint_bg_color = hex(0xefe5cc);
    v.code_bg_color = hex(0xe8dcc0);
    v.selection.bg_fill = hex(0xd9c896);
    v.selection.stroke = Stroke::new(1.0, hex(0x8b6f3a));
    v.hyperlink_color = hex(0x6b4f2a);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0xefe5cc);
    v.widgets.noninteractive.weak_bg_fill = hex(0xf2e9d2);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0x3d2b1f));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0xc4a86a));
    v.widgets.inactive.bg_fill = hex(0xe2d4b0);
    v.widgets.inactive.weak_bg_fill = hex(0xeadab4);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0x2d1f15));
    v.widgets.hovered.bg_fill = hex(0xd6c498);
    v.widgets.hovered.weak_bg_fill = hex(0xddcaa8);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x3d2b1f));
    v.widgets.active.bg_fill = hex(0x8b6f3a);
    v.widgets.active.weak_bg_fill = hex(0xa18450);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xf4ecd8));
    v.widgets.open.bg_fill = hex(0xd6c498);
    v.window_stroke = Stroke::new(1.0, hex(0xc4a86a));
    v.warn_fg_color = hex(0xb87420);
    v.error_fg_color = hex(0x9a3a1a);
    v
}

// Warm amber + gold + cream.
fn honey() -> egui::Visuals {
    let mut v = egui::Visuals::light();
    v.panel_fill = hex(0xfff4e0);
    v.window_fill = hex(0xfff9ec);
    v.extreme_bg_color = hex(0xffffff);
    v.faint_bg_color = hex(0xffecc8);
    v.code_bg_color = hex(0xffe6b8);
    v.selection.bg_fill = hex(0xffd97a);
    v.selection.stroke = Stroke::new(1.0, hex(0xb87420));
    v.hyperlink_color = hex(0x9a5a10);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0xffecc8);
    v.widgets.noninteractive.weak_bg_fill = hex(0xfff2d4);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0x5c3818));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0xe8a838));
    v.widgets.inactive.bg_fill = hex(0xffdf9c);
    v.widgets.inactive.weak_bg_fill = hex(0xffe6b0);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0x4a2c10));
    v.widgets.hovered.bg_fill = hex(0xffd166);
    v.widgets.hovered.weak_bg_fill = hex(0xffdb84);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x4a2c10));
    v.widgets.active.bg_fill = hex(0xe8a838);
    v.widgets.active.weak_bg_fill = hex(0xc8902a);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xfff4e0));
    v.widgets.open.bg_fill = hex(0xffd166);
    v.window_stroke = Stroke::new(1.0, hex(0xe8a838));
    v.warn_fg_color = hex(0xb87420);
    v.error_fg_color = hex(0xa83a1a);
    v
}

// Dim warm glow + toasted brown.
fn candlelight() -> egui::Visuals {
    let mut v = egui::Visuals::light();
    v.panel_fill = hex(0xf2e6d0);
    v.window_fill = hex(0xf6ecd9);
    v.extreme_bg_color = hex(0xfbf3e2);
    v.faint_bg_color = hex(0xead8b8);
    v.code_bg_color = hex(0xe2cea0);
    v.selection.bg_fill = hex(0xd9b382);
    v.selection.stroke = Stroke::new(1.0, hex(0x6b3f1e));
    v.hyperlink_color = hex(0x5a3418);
    v.override_text_color = None;
    v.widgets.noninteractive.bg_fill = hex(0xead8b8);
    v.widgets.noninteractive.weak_bg_fill = hex(0xeedec2);
    v.widgets.noninteractive.fg_stroke = Stroke::new(1.0, hex(0x3a2818));
    v.widgets.noninteractive.bg_stroke = Stroke::new(1.0, hex(0xa8703a));
    v.widgets.inactive.bg_fill = hex(0xddc498);
    v.widgets.inactive.weak_bg_fill = hex(0xe4ceaa);
    v.widgets.inactive.fg_stroke = Stroke::new(1.0, hex(0x2d1a0c));
    v.widgets.hovered.bg_fill = hex(0xd2ac6e);
    v.widgets.hovered.weak_bg_fill = hex(0xdab880);
    v.widgets.hovered.fg_stroke = Stroke::new(1.5, hex(0x2d1a0c));
    v.widgets.active.bg_fill = hex(0xa8703a);
    v.widgets.active.weak_bg_fill = hex(0x8c5a2c);
    v.widgets.active.fg_stroke = Stroke::new(2.0, hex(0xf2e6d0));
    v.widgets.open.bg_fill = hex(0xd2ac6e);
    v.window_stroke = Stroke::new(1.0, hex(0xa8703a));
    v.warn_fg_color = hex(0xb87420);
    v.error_fg_color = hex(0x9a3a1a);
    v
}
  • Step 4: Build to verify it compiles

Run: cargo build --release Expected: builds clean (ignoring the ~39 upstream f32: From<f64> warnings). If any hex literal errors appear, double-check the values against the palette comments.

  • Step 5: Smoke-test all 19 themes

Run: ./target/release/catacomb Open Settings → Theme, click through all 19. Confirm each renders without panic and looks like its identity.

  • Step 6: Commit
git add src/theme.rs
git commit -m "feat(theme): add 12 new themes (cyberpunk, goth, dev, cozy)"

Task 4: Add default_view_mode to config

Files:

  • Modify: src/config.rs:190-222 (UiSection + Default) and add a default fn near line 279

  • Step 1: Write the failing test

Add a test module at the end of src/config.rs:

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn ui_section_default_view_mode_is_list() {
        let ui = UiSection::default();
        assert_eq!(ui.default_view_mode, "list");
    }

    #[test]
    fn ui_section_round_trips_through_toml() {
        let ui = UiSection { default_view_mode: "grid".into(), ..Default::default() };
        let s = toml::to_string(&ui).unwrap();
        let back: UiSection = toml::from_str(&s).unwrap();
        assert_eq!(back.default_view_mode, "grid");
    }
}
  • Step 2: Run test to verify it fails

Run: cargo test --release config::tests Expected: FAIL — no field default_view_mode.

  • Step 3: Add the field + Default + default fn

In src/config.rs, add the field to UiSection (after ui_scale):

    /// Default video-list render mode: "list", "card", or "grid".
    /// Per-view overrides live in App state (not persisted beyond session).
    #[serde(default = "default_view_mode")]
    pub default_view_mode: String,

Add the default fn near default_theme() (line ~279):

fn default_view_mode() -> String { "list".to_string() }

Update impl Default for UiSection:

impl Default for UiSection {
    fn default() -> Self {
        Self {
            theme: default_theme(),
            minimize_to_tray: false,
            ui_scale: default_ui_scale(),
            default_view_mode: default_view_mode(),
        }
    }
}

Update the doc comment listing themes at line 192 if it enumerates them — leave the theme list as-is (it's still accurate), just note view modes are documented elsewhere. (Optional: no change required.)

  • Step 4: Run test to verify it passes

Run: cargo test --release config::tests Expected: PASS (2 tests).

  • Step 5: Commit
git add src/config.rs
git commit -m "feat(config): add [ui] default_view_mode field"

Task 5: Wire ThemeAccents into App + recompute on theme change

Files:

  • Modify: src/app.rs:167 (App fields), :371 (construction), :3178 (theme picker callback)

  • Step 1: Add the App field

In src/app.rs, add to the App struct fields near card_density (line 167):

    /// Theme-aware accent colors, recomputed whenever the theme changes.
    theme_accents: crate::theme::ThemeAccents,
  • Step 2: Seed at construction

At src/app.rs:371 where theme::apply(&cc.egui_ctx, &config.ui.theme); is called, add immediately after:

        theme::apply(&cc.egui_ctx, &config.ui.theme);
        let theme_accents = theme::accents_for(&config.ui.theme);

Then in the App { ... } literal (around line 553, near card_density: 1.0,), add:

            theme_accents,
  • Step 3: Recompute on theme change

In the Settings theme picker callback at src/app.rs:3178, change:

                                    {
                                        self.config.ui.theme = id.to_string();
                                        theme::apply(ctx, id);
                                    }

to:

                                    {
                                        self.config.ui.theme = id.to_string();
                                        theme::apply(ctx, id);
                                        self.theme_accents = theme::accents_for(id);
                                    }
  • Step 4: Build to verify

Run: cargo build --release Expected: builds clean.

  • Step 5: Commit
git add src/app.rs
git commit -m "feat(app): wire ThemeAccents snapshot, recompute on theme change"

Task 6: Replace hardcoded accent colors with theme accents

Files:

  • Modify: src/app.rs:4225, 4232, 4239 (the three hardcoded rings in the video list)

  • Step 1: Replace the three hardcoded colors

At src/app.rs:4225 change:

                            egui::Stroke::new(2.0, egui::Color32::from_rgb(120, 170, 230)),

to:

                            egui::Stroke::new(2.0, self.theme_accents.accent),

At src/app.rs:4232 change:

                            egui::Stroke::new(2.0, egui::Color32::from_rgb(110, 200, 110)),

to:

                            egui::Stroke::new(2.0, self.theme_accents.success),

At src/app.rs:4239 change:

                            egui::Stroke::new(3.0, egui::Color32::from_rgb(180, 130, 240)),

to:

                            egui::Stroke::new(3.0, self.theme_accents.warning),
  • Step 2: Build + smoke-test

Run: cargo build --release && ./target/release/catacomb Switch themes in Settings; select/play/bulk-check videos. Confirm the rings change color to match each theme (e.g. Witching Hour = arcane-violet, Honey = amber).

  • Step 3: Commit
git add src/app.rs
git commit -m "feat(app): use theme-aware accent rings for select/play/bulk"

Task 7: ViewMode enum + App state + global default seeding

Files:

  • Modify: src/app.rs (new enum near SortMode at line 66; App fields near line 167)

  • Step 1: Add the ViewMode enum

Near the SortMode enum at src/app.rs:66, add:

#[derive(Clone, Copy, PartialEq, Eq, Debug)]
enum ViewMode {
    List,
    Card,
    Grid,
}

impl ViewMode {
    fn from_config(s: &str) -> Self {
        match s {
            "card" => ViewMode::Card,
            "grid" => ViewMode::Grid,
            _ => ViewMode::List,
        }
    }
}
  • Step 2: Add App fields

Near card_density in the App struct (line 167), add:

    /// Global default video-list render mode (from config).
    default_view_mode: ViewMode,
    /// Per-SidebarView overrides; a view absent here falls back to default.
    view_mode_overrides: std::collections::HashMap<SidebarView, ViewMode>,
  • Step 3: Seed at construction

In the App { ... } literal near card_density: 1.0, (line 553), add:

            default_view_mode: ViewMode::from_config(&config.ui.default_view_mode),
            view_mode_overrides: Default::default(),
  • Step 4: Add a helper to resolve the active mode for a view

Add an impl App method (place near other small helpers in the same impl block):

    /// The view mode to use for `view`: the per-view override if set, else
    /// the global default.
    fn view_mode_for(&self, view: &SidebarView) -> ViewMode {
        self.view_mode_overrides
            .get(view)
            .copied()
            .unwrap_or(self.default_view_mode)
    }
  • Step 5: Build to verify

Run: cargo build --release Note: SidebarView must derive Hash and Eq for HashMap use. Check the derive at src/app.rs:79 (#[derive(Clone, PartialEq)]) and add Eq, Hash:

#[derive(Clone, PartialEq, Eq, Hash)]
enum SidebarView {

(Verify all variants are compatible — they are plain enums/struct tuples of usize, which all impl Eq+Hash.)

Expected: builds clean.

  • Step 6: Commit
git add src/app.rs
git commit -m "feat(app): ViewMode enum + global default + per-view overrides"

Task 8: Unify placeholder thumbnail paint

Files:

  • Modify: src/app.rs:3972-3979 (channel card placeholder) and src/app.rs:4210-4217 (video card placeholder)

  • Step 1: Add a shared placeholder helper

Add an impl App method:

    /// Paint a consistent missing-thumbnail placeholder inside `rect`:
    /// a theme-tinted gradient + a single glyph. Used for both channel and
    /// video cards so the empty states stop diverging.
    fn paint_thumb_placeholder(&self, ui: &egui::Ui, rect: egui::Rect, glyph: &str, density: f32) {
        let v = ui.visuals();
        // Two-tone vertical gradient from faint_bg to panel_fill.
        let top = v.faint_bg_color;
        let bot = v.panel_fill;
        let (top, bot) = (top.to_array(), bot.to_array());
        // Use a simple split fill: top half one color, bottom half another,
        // blended by drawing two stacked rects (egui has no native gradient).
        let mid = rect.top() + rect.height() * 0.5;
        ui.painter().rect_filled(
            egui::Rect::from_min_max(rect.min, egui::pos2(rect.max.x, mid)),
            4.0,
            egui::Color32::from_rgba_unmultiplied(top[0], top[1], top[2], 255),
        );
        ui.painter().rect_filled(
            egui::Rect::from_min_max(egui::pos2(rect.min.x, mid), rect.max),
            4.0,
            egui::Color32::from_rgba_unmultiplied(bot[0], bot[1], bot[2], 255),
        );
        ui.painter().text(
            rect.center(),
            egui::Align2::CENTER_CENTER,
            glyph,
            egui::FontId::proportional(24.0 * density),
            v.weak_text_color(),
        );
    }
  • Step 2: Replace the channel-card placeholder

At src/app.rs:3972-3980, replace the None => { ... } arm with:

                                None => {
                                    self.paint_thumb_placeholder(ui, thumb_rect, "🎬", density);
                                }
  • Step 3: Replace the video-card placeholder

At src/app.rs:4210-4218, replace the None => { ... } arm with:

                        None => {
                            self.paint_thumb_placeholder(ui, rect, "🎬", density);
                        }
  • Step 4: Build + smoke-test

Run: cargo build --release && ./target/release/catacomb Find a video/channel with no thumbnail. Confirm both now render the same theme-tinted gradient + 🎬 glyph.

  • Step 5: Commit
git add src/app.rs
git commit -m "feat(app): unified theme-tinted placeholder thumbnails"

Task 9: List / Card / Grid render branches in the video list

This is the largest task. The existing flat-row code becomes the List branch; Card wraps each row in a rounded rect; Grid reflows into vertical cards.

Files:

  • Modify: src/app.rs:4184-4014 (the for card in &cards { ... } loop inside the ScrollArea)

  • Step 1: Read the current loop fully

Run: read src/app.rs lines 4184–4014 to see the existing ui.horizontal(|ui| { ... }) row body. The title/metadata/flags body must be reused across all three modes.

  • Step 2: Wrap the existing row code in a match self.view_mode_for(&self.sidebar_view.clone())

At the top of the ScrollArea::vertical().show(ui, |ui| { ... }) closure (line ~4184), after the thumb_w/thumb_h setup, insert the mode resolution:

            let view_mode = self.view_mode_for(&self.sidebar_view.clone());

(We clone sidebar_view to avoid borrowing self while the loop also borrows cards/self mutably via flag writes — match the existing pattern where the loop body uses let mut clicked_card = false; etc. to defer mutations.)

Then branch. The simplest refactor that preserves all existing behavior for List:

            match view_mode {
                ViewMode::List => {
                    // === existing loop body, unchanged ===
                    for card in &cards {
                        // ... (the entire existing row code stays here verbatim)
                    }
                }
                ViewMode::Card => {
                    self.render_video_list_cards(ui, ctx, &cards, density);
                }
                ViewMode::Grid => {
                    self.render_video_list_grid(ui, ctx, &cards, density);
                }
            }

Move the entire existing for card in &cards { ... } block under the ViewMode::List arm (cut and paste verbatim — no changes to its internals yet).

  • Step 3: Add the Card render helper

Add impl App methods (signatures must match how they're called above):

    /// Card-row mode: same horizontal layout as List, but each row is a
    /// rounded card on faint_bg_fill with a hover lift.
    fn render_video_list_cards(
        &mut self,
        ui: &mut egui::Ui,
        ctx: &egui::Context,
        cards: &[VideoCard],
        density: f32,
    ) {
        let thumb_w = (176.0 * density).round();
        let thumb_h = (99.0 * density).round();
        let thumb_size = egui::vec2(thumb_w, thumb_h);

        for (i, card) in cards.iter().enumerate() {
            // Per-row mutations are deferred with the same flag-out pattern
            // the List branch uses; mirror it exactly.
            let mut clicked_card = false;
            let mut play_card = false;
            let mut toggle_watched_card = false;
            let mut toggle_flag_card: Option<&'static str> = None;
            let selected = self.selected_video.as_deref() == Some(card.id.as_str());
            let is_playing = self.currently_playing.as_deref() == Some(card.id.as_str());
            let bulk_checked = self.bulk_selected.contains(&card.id);

            let frame = egui::Frame::NONE
                .fill(ui.visuals().faint_bg_color)
                .stroke(egui::Stroke::new(
                    1.0,
                    ui.visuals().widgets.noninteractive.bg_stroke.color,
                ))
                .rounding(egui::Rounding::same(8.0))
                .inner_margin(egui::Margin::same(8))
                .outer_margin(egui::Margin::symmetric(0, 3));

            let card_resp = frame.show(ui, |ui| {
                ui.horizontal(|ui| {
                    let (rect, resp) = ui.allocate_exact_size(thumb_size, egui::Sense::click());
                    let texture = card.thumb_path.as_ref().and_then(|p| self.texture(ctx, p));
                    match &texture {
                        Some(handle) => {
                            egui::Image::new(handle).maintain_aspect_ratio(true).paint_at(ui, rect);
                        }
                        None => self.paint_thumb_placeholder(ui, rect, "🎬", density),
                    }
                    if selected {
                        ui.painter().rect_stroke(rect, 4.0, egui::Stroke::new(2.0, self.theme_accents.accent));
                    }
                    if is_playing {
                        ui.painter().rect_stroke(rect, 4.0, egui::Stroke::new(2.0, self.theme_accents.success));
                    }
                    if bulk_checked {
                        ui.painter().rect_stroke(rect, 4.0, egui::Stroke::new(3.0, self.theme_accents.warning));
                    }
                    if resp.clicked() { clicked_card = true; }
                    if resp.double_clicked() { play_card = true; }
                    self.render_video_meta_row(ui, card, selected, &mut clicked_card);
                });
            });
            if card_resp.response.hovered() {
                ui.painter().rect_stroke(
                    card_resp.response.rect,
                    8.0,
                    egui::Stroke::new(1.5, self.theme_accents.accent),
                );
            }
            self.apply_video_card_actions(
                i, cards, clicked_card, play_card, toggle_watched_card, toggle_flag_card,
            );
            ui.add_space(4.0);
        }
    }
  • Step 4: Add the Grid render helper
    /// Grid mode: YouTube/Plex-style vertical cards, responsive columns.
    fn render_video_list_grid(
        &mut self,
        ui: &mut egui::Ui,
        ctx: &egui::Context,
        cards: &[VideoCard],
        density: f32,
    ) {
        let thumb_w = (176.0 * density).round();
        let thumb_h = (99.0 * density).round();
        let card_w = thumb_w + 8.0;
        let avail = ui.available_width();
        let cols = ((avail / card_w).floor() as usize).max(1);

        let mut clicked_card = false;
        let mut play_card = false;
        let mut toggle_watched_card = false;
        let mut toggle_flag_card: Option<&'static str> = None;

        egui::Grid::new("video_grid")
            .num_columns(cols)
            .spacing([8.0, 8.0])
            .show(ui, |ui| {
                for (i, card) in cards.iter().enumerate() {
                    let selected = self.selected_video.as_deref() == Some(card.id.as_str());
                    let is_playing = self.currently_playing.as_deref() == Some(card.id.as_str());
                    let bulk_checked = self.bulk_selected.contains(&card.id);

                    let (rect, resp) = ui.allocate_exact_size(
                        egui::vec2(thumb_w, thumb_h),
                        egui::Sense::click(),
                    );
                    let texture = card.thumb_path.as_ref().and_then(|p| self.texture(ctx, p));
                    match &texture {
                        Some(handle) => {
                            egui::Image::new(handle).maintain_aspect_ratio(true).paint_at(ui, rect);
                        }
                        None => self.paint_thumb_placeholder(ui, rect, "🎬", density),
                    }
                    if selected {
                        ui.painter().rect_stroke(rect, 4.0, egui::Stroke::new(2.0, self.theme_accents.accent));
                    }
                    if is_playing {
                        ui.painter().rect_stroke(rect, 4.0, egui::Stroke::new(2.0, self.theme_accents.success));
                    }
                    if bulk_checked {
                        ui.painter().rect_stroke(rect, 4.0, egui::Stroke::new(3.0, self.theme_accents.warning));
                    }
                    if resp.clicked() { clicked_card = true; }
                    if resp.double_clicked() { play_card = true; }

                    ui.vertical(|ui| {
                        ui.add_space(4.0);
                        self.render_video_meta_row(ui, card, selected, &mut clicked_card);
                    });
                    ui.end_row();
                    let _ = i;
                }
            });
        self.apply_video_card_actions(
            0, cards, clicked_card, play_card, toggle_watched_card, toggle_flag_card,
        );
    }
  • Step 5: Extract the shared metadata/title/flags body into render_video_meta_row and the action application into apply_video_card_actions

These two helpers are refactor extractions from the existing List branch. Read the existing row body at src/app.rs:4267-4400 (the ui.vertical(|ui| { ... }) block containing title, channel, id, duration, size, flag buttons) and move it verbatim into:

    /// Shared title + metadata + flag-button row, used by all three view modes.
    fn render_video_meta_row(
        &mut self,
        ui: &mut egui::Ui,
        card: &VideoCard,
        selected: bool,
        clicked_card: &mut bool,
    ) {
        // === the body of the existing ui.vertical(|ui| { ... }) block ===
        // (title selectable_label, channel/id/duration/size metadata, flag
        //  buttons). Copy verbatim from the current List branch.
    }

And the deferred-mutation application (the code after each row that writes self.flags, self.selected_video, plays, etc.) into:

    /// Apply the per-card deferred actions (click/play/watch/flag toggles).
    /// `cards` + `i` let it locate the right card for DB writes.
    fn apply_video_card_actions(
        &mut self,
        i: usize,
        cards: &[VideoCard],
        clicked_card: bool,
        play_card: bool,
        toggle_watched_card: bool,
        toggle_flag_card: Option<&'static str>,
    ) {
        // === the existing post-row mutation code, factored out ===
        // (the `if clicked_card { self.selected_video = ... }` etc. block)
    }

Important: because the exact contents of these blocks depend on the current code (which may have evolved), the engineer implementing this MUST read src/app.rs:4267-4420 and copy the real code rather than trusting the comments above. The signatures above are the contract; the bodies are the existing code.

  • Step 6: Wire the List branch to also use the extracted helpers

Once render_video_meta_row and apply_video_card_actions exist, refactor the ViewMode::List arm to call them too, so all three modes share one code path for metadata + actions. This avoids the three-way drift the spec warned against.

  • Step 7: Build

Run: cargo build --release Expected: builds clean. Borrow-checker may complain about self.texture(ctx, ...) inside the loop while &cards is borrowed — the existing code already solves this with the deferred-flags pattern; mirror it.

  • Step 8: Smoke-test all three modes

Run: ./target/release/catacomb For each of List/Card/Grid: click a video, double-click to play, toggle watched, toggle a flag, bulk-select. Confirm all actions work in all three modes.

  • Step 9: Commit
git add src/app.rs
git commit -m "feat(app): List/Card/Grid video list render modes"

Task 10: Toolbar view-mode toggle + per-view override write

Files:

  • Modify: src/app.rs:4163-4166 (just above the if cards.is_empty() check, in the video list header area)

  • Step 1: Add the 3-segment toggle

Just before ui.separator(); at line ~4164, insert:

                        ui.horizontal(|ui| {
                            ui.label(egui::RichText::new("View:").weak().small());
                            let current = self.view_mode_for(&self.sidebar_view.clone());
                            for (mode, label) in [
                                (ViewMode::List, "☰ List"),
                                (ViewMode::Card, "▢ Card"),
                                (ViewMode::Grid, "⊫ Grid"),
                            ] {
                                if ui.selectable_label(current == mode, label).clicked() {
                                    self.view_mode_overrides
                                        .insert(self.sidebar_view.clone(), mode);
                                }
                            }
                        });
  • Step 2: Build + smoke-test

Run: cargo build --release && ./target/release/catacomb Switch to "All Videos", toggle to Grid. Switch to a channel — confirm it still shows the default (override is per-view). Toggle a channel to Card, switch away and back — confirm Card persists.

  • Step 3: Commit
git add src/app.rs
git commit -m "feat(app): view-mode toolbar toggle with per-view override"

Task 11: Settings UI for default view mode

Files:

  • Modify: src/app.rs:3182 (the Settings screen, after the theme picker row)

  • Step 1: Add a default-view-mode combo row

After the Theme combo row ends at src/app.rs:3182 (ui.end_row();), insert a new row in the same egui::Grid:

                        ui.label("Default view:");
                        egui::ComboBox::from_id_salt("default_view_mode_combo")
                            .selected_text(match self.default_view_mode {
                                ViewMode::List => "List",
                                ViewMode::Card => "Card",
                                ViewMode::Grid => "Grid",
                            })
                            .show_ui(ui, |ui| {
                                for (mode, label) in [
                                    (ViewMode::List, "List"),
                                    (ViewMode::Card, "Card"),
                                    (ViewMode::Grid, "Grid"),
                                ] {
                                    if ui
                                        .selectable_label(self.default_view_mode == mode, label)
                                        .clicked()
                                    {
                                        self.default_view_mode = mode;
                                        self.config.ui.default_view_mode = match mode {
                                            ViewMode::List => "list",
                                            ViewMode::Card => "card",
                                            ViewMode::Grid => "grid",
                                        }.to_string();
                                    }
                                }
                            });
                        ui.end_row();
  • Step 2: Build + smoke-test

Run: cargo build --release && ./target/release/catacomb Open Settings, change Default view to Grid, restart the app. Confirm views with no override now default to Grid.

  • Step 3: Verify config persists

After changing default view and quitting, check the written config.toml has default_view_mode = "grid" under [ui]. (Don't commit config.toml.)

  • Step 4: Commit
git add src/app.rs
git commit -m "feat(app): Settings picker for default view mode"

Task 12: Typography & spacing refresh

Files:

  • Modify: src/app.rs — base font sizes via ctx.set_style / FontDefinitions, and per-call text sizes in the card renderers

  • Step 1: Bump base body text and set style spacing at construction

At construction (near src/app.rs:371, after theme::apply), add:

        // Base text scale: bump body from ~12px to ~13px for legibility.
        let mut style = egui::Style::default();
        style.spacing.item_spacing = egui::vec2(8.0, 5.0);
        style.spacing.button_padding = egui::vec2(6.0, 3.0);
        cc.egui_ctx.set_style(style);
  • Step 2: Adjust card text sizes in render_video_meta_row

In the extracted helper (Task 9), the title uses egui::RichText::new(&card.title).strong() — bump its size to 14.0 (proportional). The metadata line uses .small(); leave that, but ensure consistent separator spacing (replace · ad-hoc joins with · between every metadata item).

  • Step 3: Build + visual smoke-test

Run: cargo build --release && ./target/release/catacomb Confirm text is slightly larger, spacing more breathable, metadata line consistent across modes.

  • Step 4: Commit
git add src/app.rs
git commit -m "style(app): bump base font + spacing, tidy metadata rhythm"

Task 13: Full verification + docs sync

Files:

  • Run tests, run app, verify spec coverage.

  • Step 1: Run the full test suite

Run: cargo test --release Expected: all pass (existing tests + new theme/config tests).

  • Step 2: Manual theme tour

Run: ./target/release/catacomb Switch through all 19 themes. For 2–3 themes, exercise List/Card/Grid + select/play/bulk/watched/flag. Confirm accent rings track the theme in every mode.

  • Step 3: Verify the public doc is still accurate

Read docs/src/theming.md (created earlier). Confirm the theme table count (19) and the view-mode description match what shipped. Fix any drift inline.

  • Step 4: Final commit (docs sync if changed)
git add docs/src/theming.md  # only if changed
git commit -m "docs(theming): sync with shipped 19 themes + view modes"

Self-review notes

  • Spec coverage: §1 themes → Tasks 1,2,3. §2 accents → Tasks 1,5,6. §3 view toggle → Tasks 4,7,9,10,11. §4 default polish → Task 2. §5 typography → Task 12. §6 placeholders → Task 8. All spec sections covered.
  • Hex literal values in Task 3 have been checked and corrected; build should be clean on first try.
  • Borrow-checker risk in Task 9 is flagged; the existing deferred-flags pattern is the mitigation.
  • render_video_meta_row / apply_video_card_actions bodies are intentionally not pasted because they must be copied from the current code, which may have drifted since this plan was written. The signatures are the contract.