feat(stats): build anime-centric stats dashboard frontend

5-tab React dashboard with Catppuccin Mocha theme:
- Overview: hero stats, streak calendar, watch time chart, recent sessions
- Anime: grid with cover art, episode list with completion %, detail view
- Trends: 15 charts across Activity, Efficiency, Anime, and Patterns
- Vocabulary: POS-filtered word/kanji lists with detail panels
- Sessions: expandable session history with event timeline

Features:
- Cross-tab navigation (anime <-> vocabulary)
- Global word detail panel overlay
- Expandable episode detail with Anki card links (Expression field)
- Per-anime multi-line trend charts
- Watch time by day-of-week and hour-of-day
- Collapsible sections with accessibility (aria-expanded)
- Card size selector for anime grid
- Cover art caching via AniList
- HTTP API client with file:// protocol fallback for Electron overlay
This commit is contained in:
2026-03-14 22:15:02 -07:00
parent 950263bd66
commit 0f44107beb
68 changed files with 5372 additions and 0 deletions

View File

@@ -0,0 +1,41 @@
@import "tailwindcss";
@theme {
--color-ctp-base: #24273a;
--color-ctp-mantle: #1e2030;
--color-ctp-crust: #181926;
--color-ctp-surface0: #363a4f;
--color-ctp-surface1: #494d64;
--color-ctp-surface2: #5b6078;
--color-ctp-text: #cad3f5;
--color-ctp-subtext1: #b8c0e0;
--color-ctp-subtext0: #a5adcb;
--color-ctp-overlay2: #939ab7;
--color-ctp-overlay1: #8087a2;
--color-ctp-overlay0: #6e738d;
--color-ctp-blue: #8aadf4;
--color-ctp-green: #a6da95;
--color-ctp-mauve: #c6a0f6;
--color-ctp-peach: #f5a97f;
--color-ctp-red: #ed8796;
--color-ctp-yellow: #eed49f;
--color-ctp-teal: #8bd5ca;
--color-ctp-lavender: #b7bdf8;
--color-ctp-flamingo: #f0c6c6;
--color-ctp-rosewater: #f4dbd6;
--color-ctp-sky: #91d7e3;
--color-ctp-sapphire: #7dc4e4;
--color-ctp-maroon: #ee99a0;
--color-ctp-pink: #f5bde6;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background-color: var(--color-ctp-base);
color: var(--color-ctp-text);
}
body.overlay-mode {
background-color: rgba(36, 39, 58, 0.85);
}