From 1bdd7ec9f1d66077433de4de53c7e3a680e406c4 Mon Sep 17 00:00:00 2001 From: XShine555 Date: Mon, 21 Sep 2026 00:48:23 +0200 Subject: [PATCH] web-player: headers, dialogs and typography PageHeader absorbs CollectionHeader (title/eyebrow/description/meta/cover?/actions?/align?): without a cover it behaves like the old simple PageHeader (inline actions), with a cover like the old CollectionHeader (actions below). It sets its own bottom margin (mb-7/8); the mt-* each page used to add afterward are removed. Migrates the 9 places that used either one (albums, library, playlists, upload, Explore x2, liked, mix, profile). CollectionHeader is removed. AlbumHeader and PlaylistHeader are inlined into their pages and removed. Decision (recommended, not blocking): PlaylistHeader gains icons on Edit/Delete/Play, matching what AlbumHeader already had. New ConfirmDialog replaces the two delete dialogs (album and playlist), which had different typography. Modal now uses .glass-panel (instead of duplicating the inline style=) and z-(--z-modal); its eyebrow and title use the text-eyebrow/text-display-3 recipes. SectionHeading gains `count?` (a "N results" line, replacing 4 copies in Explore) and `href?`/`linkLabel?` ("See all", replacing Home's). Applies typography recipes (text-display-2/3, text-eyebrow, text-body) and width tokens (max-w-prose-sm, max-w-hero) across EmptyState, +error, "No results", and the Home/Queue/Sidebar hero and stats. The "You haven't listened to anything yet" empty state (duplicated twice on Home) becomes a local snippet. Verified with npm run check/build; no authenticated visual QA (Docker unavailable this session). --- web-player/docs/frontend-refactor-plan.md | 2 +- web-player/src/lib/components/Sidebar.svelte | 2 +- .../src/lib/components/player/Queue.svelte | 6 +- .../src/lib/components/player/SeekBar.svelte | 2 +- .../lib/components/ui/CollectionHeader.svelte | 45 ---------- .../lib/components/ui/ConfirmDialog.svelte | 26 ++++++ .../src/lib/components/ui/EmptyState.svelte | 4 +- web-player/src/lib/components/ui/Modal.svelte | 9 +- .../src/lib/components/ui/PageHeader.svelte | 59 +++++++++--- .../lib/components/ui/SectionHeading.svelte | 43 ++++++++- .../src/routes/(app)/albums/+page.svelte | 4 +- .../src/routes/(app)/albums/[id]/+page.svelte | 90 +++++++++++++------ .../albums/[id]/components/AlbumHeader.svelte | 75 ---------------- .../src/routes/(app)/explore/+page.svelte | 70 ++++----------- .../src/routes/(app)/library/+page.svelte | 3 +- .../src/routes/(app)/liked/+page.svelte | 11 ++- .../src/routes/(app)/mixes/[id]/+page.svelte | 9 +- .../src/routes/(app)/playlists/+page.svelte | 4 +- .../routes/(app)/playlists/[id]/+page.svelte | 86 +++++++++++------- .../[id]/components/PlaylistHeader.svelte | 63 ------------- .../src/routes/(app)/u/[id]/+page.svelte | 8 +- .../src/routes/(app)/upload/+page.svelte | 4 +- web-player/src/routes/+error.svelte | 6 +- web-player/src/routes/+page.svelte | 67 ++++++-------- 24 files changed, 310 insertions(+), 388 deletions(-) delete mode 100644 web-player/src/lib/components/ui/CollectionHeader.svelte create mode 100644 web-player/src/lib/components/ui/ConfirmDialog.svelte delete mode 100644 web-player/src/routes/(app)/albums/[id]/components/AlbumHeader.svelte delete mode 100644 web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte diff --git a/web-player/docs/frontend-refactor-plan.md b/web-player/docs/frontend-refactor-plan.md index 9771690..0a4bc25 100644 --- a/web-player/docs/frontend-refactor-plan.md +++ b/web-player/docs/frontend-refactor-plan.md @@ -782,7 +782,7 @@ Tareas: | P7 | ✅ | (pendiente) | MediaIdentity queda "puro" (sin onClick) según spec; las 6 tablas de pista (P8) envuelven su propio `use:pressable` hasta que P8 las sustituya por TrackList. Deltas documentados: fila activa de Sidebar ahora usa bg-accent-tint/text-accent-soft (antes gris neutro, ahora consistente con el resto de filas activas); tarjeta "Tus playlists" de Inicio pierde la línea "por {tu nombre}" (redundante, siempre el propio usuario) y su radio pasa de rounded-panel a rounded-art (consistencia con la tarjeta "Continuar"); filas de Queue "A continuación" pierden el opacity-80 del arte (ListRow no expone esa personalización). Sin QA visual autenticada (Docker no disponible) | | P8 | ✅ | (pendiente) | Decisión tomada (recomendada por el propio plan, sin bloquear): se elimina la columna "Álbum" que siempre mostraba "—". TrackList unifica TrackTable+TrackRow+TrackIndexCell+TrackMeta; AlbumTrackTable/PlaylistTrackTable/LibraryPicker se inlinean en sus páginas y se borran. Sin QA visual autenticada (Docker no disponible) | | P9 | ✅ | (pendiente) | MediaCard gana hover-zoom del arte y scrim+PlayButton condicionados a `onPlay` (antes exclusivos de MixTile); ahora se aplicarían a cualquier card futura con onPlay, consistencia intencional. Sin QA visual autenticada (Docker no disponible) | -| P10 | ⬜ | | | +| P10 | ✅ | (pendiente) | Decisión tomada (recomendada, sin bloquear): iconos en los botones de cabecera de playlist (antes solo álbum tenía). PlaylistHeader pierde su prop `id` sin usar tras inlinearlo. Explorar: la cabecera de "Resultados para…" ahora usa el `mb-7/8` de PageHeader en vez de un `mt-5` ajustado a mano antes de los chips de filtro — gap ligeramente mayor entre el resumen y los chips (Δ menor, documentado). Sin QA visual autenticada (Docker no disponible) | | P11 | ⬜ | | | | P12 | ⬜ | | | | P13 | ⬜ | | | diff --git a/web-player/src/lib/components/Sidebar.svelte b/web-player/src/lib/components/Sidebar.svelte index b2733ff..b9bc7da 100644 --- a/web-player/src/lib/components/Sidebar.svelte +++ b/web-player/src/lib/components/Sidebar.svelte @@ -76,7 +76,7 @@ {#if user}
- Tus playlists + Tus playlists {#if playlists.length > 0} {#if player.current.id} -

Reproduciendo

+

Reproduciendo

- - A continuación - + A continuación {#if upcoming.length > 0}
{:else} -
+
{fmtTime(player.progress)} diff --git a/web-player/src/lib/components/ui/CollectionHeader.svelte b/web-player/src/lib/components/ui/CollectionHeader.svelte deleted file mode 100644 index 7733a54..0000000 --- a/web-player/src/lib/components/ui/CollectionHeader.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -
- {@render cover()} -
-

{eyebrow}

-

- {title} -

- {#if description} -

{description}

- {/if} - {#if meta} -

{meta}

- {/if} -
-
- -{#if actions} -
- {@render actions()} -
-{/if} diff --git a/web-player/src/lib/components/ui/ConfirmDialog.svelte b/web-player/src/lib/components/ui/ConfirmDialog.svelte new file mode 100644 index 0000000..c1c4188 --- /dev/null +++ b/web-player/src/lib/components/ui/ConfirmDialog.svelte @@ -0,0 +1,26 @@ + + + +

{title}

+

{description}

+
+ +
+ +
+
+ diff --git a/web-player/src/lib/components/ui/EmptyState.svelte b/web-player/src/lib/components/ui/EmptyState.svelte index 2dc4f53..bef42bf 100644 --- a/web-player/src/lib/components/ui/EmptyState.svelte +++ b/web-player/src/lib/components/ui/EmptyState.svelte @@ -15,10 +15,10 @@
{#if Icon} - + {/if} {#if title} -

+

{title}

{/if} diff --git a/web-player/src/lib/components/ui/Modal.svelte b/web-player/src/lib/components/ui/Modal.svelte index 7154caf..ee6b9c3 100644 --- a/web-player/src/lib/components/ui/Modal.svelte +++ b/web-player/src/lib/components/ui/Modal.svelte @@ -70,14 +70,13 @@ {#if open}