NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Add likes, follows and playlist visibility; redesign web-player UI

Browse Source 
Backend:
- New Likes feature (toggle/get liked tracks) and endpoints
- User follow/unfollow, listening stats, public user profile
- Playlist visibility (public/private) support
- Various auth and DTO/response adjustments to support the above

Frontend (web-player):
- New design system pass: theme tokens/mode (light/dark), glass menu,
  tabs bar, player dock/extras/queue components, mix tiles, artist link
- New routes: Liked, public user profile (/u/[id]), likes API proxy
- Search refactor: shared SearchBox component used by TopBar and
  MobileHeader (search now reachable on mobile), live results as you
  type instead of requiring Enter, dropped the "Buscando…" quick-result
  preview
- Removed now-unused components (MobileNav, CoverBadge, MixBentoTile,
  PlayPauseOverlay, SuggestionsTable, userDirectory)
- Design handoff reference docs added under web-player/design_handoff_musify_player
  and web-player/docs/design-system-refactor-plan.md
This commit is contained in:
Admin
2026-09-14 23:42:45 +02:00
parent 389b3b9244
commit dc1ba89a6d
166 changed files with 14271 additions and 1982 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/routes/layout.css
+25 -6
View File
@@ -1,27 +1,36 @@
@import 'tailwindcss';
@theme {
--font-sans: 'Manrope Variable', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Bricolage Grotesque Variable', ui-sans-serif, system-ui, sans-serif;
--font-sans: 'Plus Jakarta Sans Variable', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Sora Variable', ui-sans-serif, system-ui, sans-serif;
--color-bg: var(--mf-bg);
--color-elevated: var(--mf-elevated);
--color-surface: var(--mf-surface);
--color-surface-2: var(--mf-surface-2);
--color-surface-hover: var(--mf-surface-hover);
--color-hover: rgba(255, 255, 255, 0.05);
--color-hover: rgba(255, 255, 255, 0.045);
--color-line: var(--mf-border);
--color-line-strong: var(--mf-border-strong);
--color-hairline: var(--mf-hairline);
--color-track: var(--mf-track);
--color-fg: var(--mf-text);
--color-fg-2: var(--mf-text-2);
--color-fg-3: var(--mf-text-3);
--color-muted: var(--mf-text-4);
--color-accent: var(--mf-accent);
--color-accent-soft: var(--mf-accent-soft);
--color-accent-soft: var(--mf-accent-title);
--color-accent-muted: var(--mf-accent-muted);
--color-accent-tint: var(--mf-accent-soft-bg);
--color-accent-line: var(--mf-accent-line);
--color-accent-hair: var(--mf-accent-hair);
--color-accent-btn: var(--mf-accent-btn-bg);
--color-accent-btn-hover: var(--mf-accent-btn-bg-hover);
--color-accent-glow: var(--mf-accent-glow);
--color-accent-dim: var(--mf-accent-dim);
--color-on-accent: var(--mf-on-art);
--color-ink: var(--mf-ink);
--color-cta-strong: var(--mf-cta-strong-bg);
--color-scrim: var(--mf-scrim);
--color-on-art: var(--mf-on-art);
--color-danger: oklch(63.7% 0.15 25.331);
@@ -29,13 +38,15 @@
--radius-control: 0.625rem;
--radius-panel: 1.125rem;
--radius-art: 0.85rem;
--radius-panel-lg: 1.375rem;
--radius-art: 0.8125rem;
--radius-art-lg: 1.125rem;
--radius-art-round: 1.75rem;
--shadow-art: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
--shadow-art: 0 14px 32px rgba(0, 0, 0, 0.45);
--shadow-art-lg: 0 24px 50px -16px rgba(0, 0, 0, 0.75);
--shadow-menu: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
--shadow-player: 0 20px 56px rgba(0, 0, 0, 0.6);
--shadow-glow: 0 0 0 1px var(--mf-border-strong), 0 20px 45px -20px var(--mf-accent-glow);
}
@@ -165,6 +176,14 @@ button:disabled {
animation: fade-in 0.4s ease both;
}
.glass-panel {
background-color: var(--mf-panel-bg);
background-image: var(--mf-modal-glow);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
transition: background 0.6s;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,