feat(ui): implement v2 three-panel layout

- Collapsible sidebar (68px icons / 230px expanded, toggle via logo)
- LibraryPanel: sessions expand inline to show tracks, search + filter chips
- PlayerPanel: extracted from SongPage, used as embeddable panel
- BandPage: Library + Player side by side; song selection via ?song= URL param
- SongPage: thin wrapper around PlayerPanel (kept for direct deep-links)
- CSS palette updated to v2 violet/cyan/emerald scheme
- Mobile (<900px): BandPage shows library or player, never both

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mistral Vibe
2026-04-09 23:40:37 +02:00
parent 48a73246a1
commit d73377ec2f
6 changed files with 1168 additions and 1712 deletions

View File

@@ -16,23 +16,30 @@ input, textarea, button, select {
/* ── Design system (dark only — no light mode in v1) ─────────────────────── */
:root {
--bg: #0f0f12;
/* v2 dark-space palette */
--bg: #0c0e1a;
--bg-card: #10131f;
--bg-raised: #151828;
--bg-hover: #1a1e30;
--bg-subtle: rgba(255,255,255,0.025);
--bg-inset: rgba(255,255,255,0.04);
--border: rgba(255,255,255,0.08);
--border-subtle: rgba(255,255,255,0.05);
--text: #eeeef2;
--text-muted: rgba(255,255,255,0.35);
--text-subtle: rgba(255,255,255,0.22);
--accent: #e8a22a;
--accent-hover: #f0b740;
--accent-bg: rgba(232,162,42,0.1);
--accent-border: rgba(232,162,42,0.28);
--accent-fg: #0f0f12;
--teal: #4dba85;
--teal-bg: rgba(61,200,120,0.1);
--danger: #e07070;
--danger-bg: rgba(220,80,80,0.1);
--border: rgba(255,255,255,0.06);
--border-bright: rgba(255,255,255,0.12);
--border-subtle: rgba(255,255,255,0.04);
--text: #e8e9f0;
--text-muted: rgba(232,233,240,0.55);
--text-subtle: rgba(232,233,240,0.28);
/* Violet accent */
--accent: #8b5cf6;
--accent-light: #a78bfa;
--accent-hover: #9f70f8;
--accent-bg: rgba(139,92,246,0.12);
--accent-border: rgba(139,92,246,0.3);
--accent-fg: #ffffff;
--teal: #34d399;
--teal-bg: rgba(52,211,153,0.1);
--danger: #f43f5e;
--danger-bg: rgba(244,63,94,0.1);
}
/* ── Responsive Layout ──────────────────────────────────────────────────── */