Add anonymous listening support and redesign web-player UI

Backend:
- Expose GET /config/playback so the frontend can detect whether
  anonymous listening is enabled without requiring auth
- Wire anonymous access through track streaming and YouTube resolve flows

Frontend:
- Allow browsing/listening without a session when the backend enables it
- Redesign Inicio, Sidebar and top bar with a new dark theme, typography,
  and layout (top bar with live quick-search, sticky/blurred on scroll)
- Populate Top música, Popular and Recomendados with real Musify +
  YouTube Music data instead of placeholders
- Various shape, spacing, color and animation refinements across the
  redesigned components
This commit is contained in:
2026-09-11 01:29:37 +02:00
parent 10766bbb47
commit 389b3b9244
40 changed files with 1172 additions and 452 deletions
+16 -12
View File
@@ -1,25 +1,29 @@
:root {
--mf-bg: rgb(9, 9, 9);
--mf-elevated: #0b0b0d;
--mf-bg: oklch(12.5% 0.004 95);
--mf-elevated: oklch(16% 0.005 95);
--mf-text: #c7c6c5;
--mf-text-2: #a5a4a3;
--mf-text-3: #8c8b8a;
--mf-text-4: rgb(120, 120, 120);
--mf-text: oklch(93% 0.004 95);
--mf-text-2: oklch(78% 0.006 95);
--mf-text-3: oklch(62% 0.007 95);
--mf-text-4: oklch(46% 0.006 95);
--mf-surface: rgb(15, 15, 15);
--mf-surface-2: rgba(255, 255, 255, 0.06);
--mf-surface-hover: rgba(255, 255, 255, 0.09);
--mf-surface: oklch(15.5% 0.005 95);
--mf-surface-2: rgba(255, 255, 255, 0.05);
--mf-surface-hover: rgba(255, 255, 255, 0.08);
--mf-border: rgba(255, 255, 255, 0.08);
--mf-border-strong: rgba(255, 255, 255, 0.12);
--mf-border: rgba(255, 255, 255, 0.07);
--mf-border-strong: rgba(255, 255, 255, 0.13);
--mf-track: rgba(255, 255, 255, 0.12);
--mf-accent: oklch(60% 0.1 145);
--mf-accent-soft: color-mix(in oklch, var(--mf-accent) 80%, transparent);
--mf-accent-glow: color-mix(in oklch, var(--mf-accent) 45%, transparent);
--mf-accent-dim: color-mix(in oklch, var(--mf-accent) 22%, transparent);
--mf-scrim: #000000;
--mf-on-art: #ffffff;
--mf-on-art: #fefdfb;
--mf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--mf-sidebar-w: 288px;
--mf-nav-h: 60px;