From 14ee1dc45d38bbfc57606f53c4eaaf1598f4b1f5 Mon Sep 17 00:00:00 2001 From: XShine555 Date: Sun, 20 Sep 2026 23:05:53 +0200 Subject: [PATCH] web-player: unify the context menu (ContextMenu) + AccountMenu Add src/lib/components/ui/ContextMenu.svelte, replacing TrackContextMenu and AlbumContextMenu (109 and 119 lines, 90% identical): same positioning function (contextMenuPosition, exported from the module, using MENU_WIDTH/SUBMENU_WIDTH moved to config.ts), same backdrop, same Escape handling, same generic "Add to playlist" submenu via {items, playlistAction, playlists}. Uses MenuItem for actions (previously each reimplemented its own classes by hand) and Artwork size="xs" for playlist thumbnails. menus.svelte.ts (createTrackMenu) adapts to the new contextMenuPosition; Home, Explore (track and album menus) and Mix are migrated. AccountMenu: panelClass (free-form Tailwind classes) becomes prop width: 'sm'|'md'; adds Escape-to-close (accessibility improvement, it didn't close before); TopBar and MobileHeader no longer wrap it in a duplicate div.relative (its own root already is one). The panel's z-index becomes z-(--z-menu), matching ContextMenu (previously z-20 in TopBar / no explicit z in MobileHeader). Verified with npm run check/build; no authenticated visual QA (Docker unavailable this session). --- web-player/docs/frontend-refactor-plan.md | 2 +- .../lib/components/AlbumContextMenu.svelte | 118 ------------------ .../src/lib/components/MobileHeader.svelte | 52 ++++---- web-player/src/lib/components/TopBar.svelte | 8 +- .../src/lib/components/ui/AccountMenu.svelte | 20 +-- .../ContextMenu.svelte} | 66 +++++----- .../src/lib/components/ui/MenuItem.svelte | 4 +- web-player/src/lib/config.ts | 2 + web-player/src/lib/menus.svelte.ts | 11 +- .../src/routes/(app)/explore/+page.svelte | 48 ++++--- .../src/routes/(app)/mixes/[id]/+page.svelte | 20 ++- web-player/src/routes/+page.svelte | 20 ++- 12 files changed, 144 insertions(+), 227 deletions(-) delete mode 100644 web-player/src/lib/components/AlbumContextMenu.svelte rename web-player/src/lib/components/{TrackContextMenu.svelte => ui/ContextMenu.svelte} (51%) diff --git a/web-player/docs/frontend-refactor-plan.md b/web-player/docs/frontend-refactor-plan.md index 1943501..0b52aab 100644 --- a/web-player/docs/frontend-refactor-plan.md +++ b/web-player/docs/frontend-refactor-plan.md @@ -778,7 +778,7 @@ Tareas: | P3 | ✅ | (pendiente) | Se quitó el nombre bajo el avatar de perfil (decisión tomada: redundante con el título de CollectionHeader). Se añadió `size="fill"` a Artwork (no está en la spec) para las tarjetas de grid fluidas (AlbumCard/PlaylistCard/MixTile), ya que P9 (MediaCard) aún no existe. SearchResultRow perdió su prop `kind`/radio-por-tipo (ahora el radio lo decide Artwork/Avatar). Sin QA visual autenticada (Docker no disponible) | | P4 | ✅ | (pendiente) | Decisión tomada sin bloquear: se elimina el botón "adelante" decorativo (TopBar) y el icono `AlignJustify` decorativo (PlayerExtras) por ser código muerto visual. `TransportControls` (shuffle/prev/next/repeat) se deja sin migrar a IconButton a propósito: son iconos sin chrome (sin fondo/hit-box), migrarlos habría añadido una píldora de hover no presente hoy — riesgo visual no verificable sin Docker | | P5 | 🟡 | (pendiente) | Hecho: pressable/clickOutside, toggle.svelte.ts, plural() (+minúsculas, Δ visible), helpers de player.svelte.ts (toQueueItem/isQueueCurrent/playAllOrToggle/playShuffled, addToQueue→playNextItem), navigation.svelte.ts (searchHref/appNavLinks — appNavLinks creado pero su migración a Sidebar/TabsBar se deja para P12 tal como indica esa parte), menus.svelte.ts (createTrackMenu, migrado en Inicio/Explorar/Mezcla). **Pendiente a propósito**: la tarea 5 (eliminar el envoltorio `TrackTarget` de tracks.ts y sus 8 accesores) se difiere — es el cambio de mayor riesgo del plan (toca tipos en Inicio/Explorar/Mezcla/menús de forma transversal) y no se pudo verificar visualmente sin Docker; abordarlo junto con P13 cuando se reescriban esas páginas | -| P6 | ⬜ | | | +| P6 | ✅ | (pendiente) | z-index de AccountMenu unificado a z-(--z-menu) (antes z-20, ahora al mismo nivel que ContextMenu — Δ menor, mejora consistencia); sin QA visual autenticada (Docker no disponible) | | P7 | ⬜ | | | | P8 | ⬜ | | | | P9 | ⬜ | | | diff --git a/web-player/src/lib/components/AlbumContextMenu.svelte b/web-player/src/lib/components/AlbumContextMenu.svelte deleted file mode 100644 index d0a8bd1..0000000 --- a/web-player/src/lib/components/AlbumContextMenu.svelte +++ /dev/null @@ -1,118 +0,0 @@ - - - - - - - - - - - {#if playlists.length > 0} -
-
- Añadir álbum a una playlist - -
- -
- {:else} -

Todavía no tienes playlists.

- {/if} - diff --git a/web-player/src/lib/components/MobileHeader.svelte b/web-player/src/lib/components/MobileHeader.svelte index d232195..d6757bd 100644 --- a/web-player/src/lib/components/MobileHeader.svelte +++ b/web-player/src/lib/components/MobileHeader.svelte @@ -27,33 +27,27 @@ Musify -
- {#if user} - - {#snippet trigger({ toggle, open })} - - {/snippet} - {#snippet extraItems({ close })} - - - {/snippet} - - {:else} - - - - {/if} -
+ {#if user} + + {#snippet trigger({ toggle, open })} + + {/snippet} + {#snippet extraItems({ close })} + + + {/snippet} + + {:else} + + + + {/if} diff --git a/web-player/src/lib/components/TopBar.svelte b/web-player/src/lib/components/TopBar.svelte index fcc7777..cc1cffc 100644 --- a/web-player/src/lib/components/TopBar.svelte +++ b/web-player/src/lib/components/TopBar.svelte @@ -93,13 +93,9 @@
-
+
{#if user} - + {#snippet trigger({ toggle, open })}