From 2cf3e9f02d34f2a74eb6fdd850312065890b3abf Mon Sep 17 00:00:00 2001 From: XShine555 Date: Mon, 21 Sep 2026 00:48:23 +0200 Subject: [PATCH] =?UTF-8?q?web-player:=20P10=20=E2=80=94=20cabeceras,=20di?= =?UTF-8?q?=C3=A1logos=20y=20tipograf=C3=ADa?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PageHeader fusiona CollectionHeader (title/eyebrow/description/meta/ cover?/actions?/align?): sin cover se comporta como el antiguo PageHeader simple (acciones en línea), con cover como el antiguo CollectionHeader (acciones debajo). Fija su propio margen inferior (mb-7/8); se quitan los mt-* que ponía cada página después. Migra los 9 sitios que usaban uno u otro (álbumes, biblioteca, listas, subir, Explorar ×2, me gusta, mezcla, perfil). CollectionHeader se borra. AlbumHeader y PlaylistHeader se inlinean en sus páginas y se borran. Decisión (recomendada, sin bloquear): PlaylistHeader gana iconos en Editar/Eliminar/Reproducir, igual que ya tenía AlbumHeader. ConfirmDialog nuevo sustituye los dos diálogos de borrado (álbum y playlist), que tenían tipografías distintas. Modal pasa a usar .glass-panel (en vez de duplicar el style= inline) y z-(--z-modal); su eyebrow y título usan las recetas text-eyebrow/text-display-3. SectionHeading gana `count?` (línea "N resultados", sustituye 4 copias en Explorar) y `href?`/`linkLabel?` ("Ver todas", sustituye la de Inicio). Aplica recetas de tipografía (text-display-2/3, text-eyebrow, text-body) y tokens de ancho (max-w-prose-sm, max-w-hero) en EmptyState, +error, "Sin resultados", hero y stats de Inicio, Queue y Sidebar. El estado vacío "Todavía no has escuchado nada" (repetido 2 veces en Inicio) pasa a un snippet local. Verificado con npm run check/build; sin QA visual autenticada (Docker no disponible en esta sesión). Co-Authored-By: Claude Sonnet 5 --- 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}