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).
This commit is contained in:
@@ -1,19 +1,18 @@
|
||||
import {
|
||||
contextMenuStateFor,
|
||||
type ContextMenuState
|
||||
} from '$lib/components/TrackContextMenu.svelte';
|
||||
import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/ContextMenu.svelte';
|
||||
import { player } from './player/player.svelte';
|
||||
import { queueItemForTarget, type TrackTarget } from './tracks';
|
||||
|
||||
export type TrackMenuState = TrackTarget & MenuPosition;
|
||||
|
||||
export function createTrackMenu() {
|
||||
let state = $state<ContextMenuState | null>(null);
|
||||
let state = $state<TrackMenuState | null>(null);
|
||||
|
||||
return {
|
||||
get state() {
|
||||
return state;
|
||||
},
|
||||
open(event: MouseEvent, target: TrackTarget) {
|
||||
state = contextMenuStateFor(event, target);
|
||||
state = { ...target, ...contextMenuPosition(event) };
|
||||
},
|
||||
close() {
|
||||
state = null;
|
||||
|
||||
Reference in New Issue
Block a user