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

1518 lines
58 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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`:
```rust
#[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):
```rust
/// 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**
```bash
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:
```rust
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()`):
```rust
// 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**
```bash
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`:
```rust
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:
```rust
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`:
```rust
// === 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**
```bash
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`:
```rust
#[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`):
```rust
/// 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):
```rust
fn default_view_mode() -> String { "list".to_string() }
```
Update `impl Default for UiSection`:
```rust
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**
```bash
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):
```rust
/// 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:
```rust
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:
```rust
theme_accents,
```
- [ ] **Step 3: Recompute on theme change**
In the Settings theme picker callback at `src/app.rs:3178`, change:
```rust
{
self.config.ui.theme = id.to_string();
theme::apply(ctx, id);
}
```
to:
```rust
{
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**
```bash
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:
```rust
egui::Stroke::new(2.0, egui::Color32::from_rgb(120, 170, 230)),
```
to:
```rust
egui::Stroke::new(2.0, self.theme_accents.accent),
```
At `src/app.rs:4232` change:
```rust
egui::Stroke::new(2.0, egui::Color32::from_rgb(110, 200, 110)),
```
to:
```rust
egui::Stroke::new(2.0, self.theme_accents.success),
```
At `src/app.rs:4239` change:
```rust
egui::Stroke::new(3.0, egui::Color32::from_rgb(180, 130, 240)),
```
to:
```rust
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**
```bash
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:
```rust
#[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:
```rust
/// 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:
```rust
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):
```rust
/// 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`:
```rust
#[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**
```bash
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:
```rust
/// 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:
```rust
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:
```rust
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**
```bash
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:
```rust
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`:
```rust
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):
```rust
/// 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**
```rust
/// 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:**
```rust
/// 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:
```rust
/// 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**
```bash
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:
```rust
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**
```bash
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`:
```rust
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**
```bash
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:
```rust
// 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**
```bash
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)**
```bash
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.
Reference in a new issue View git blame Copy permalink