feat(web): AddToPlaylistMenu submenu wired into TrackMenu (M7 #352)

The "Add to playlist…" entry that #372 reserved as a disabled slot
is now active. Submenu lists the operator's own playlists
alphabetically; "New playlist…" toggles an inline create form that
makes the playlist + appends the track in two API calls.

TrackMenu's existing test asserts the entry is enabled and opens the
submenu instead of the previous "is disabled with tooltip" check.
This commit is contained in:
2026-05-03 11:20:14 -04:00
parent 4067be04a6
commit 71dbaaede5
4 changed files with 255 additions and 8 deletions
+10 -4
View File
@@ -17,6 +17,7 @@
import { useQueryClient } from '@tanstack/svelte-query';
import FlagPopover from './FlagPopover.svelte';
import RemoveTrackPopover from './RemoveTrackPopover.svelte';
import AddToPlaylistMenu from './AddToPlaylistMenu.svelte';
import TrackMenuItem from './TrackMenuItem.svelte';
import TrackMenuDivider from './TrackMenuDivider.svelte';
import { user } from '$lib/auth/store.svelte';
@@ -39,6 +40,7 @@
let menuOpen = $state(false);
let flagOpen = $state(false);
let removeOpen = $state(false);
let addOpen = $state(false);
const queryClient = useQueryClient();
@@ -67,6 +69,7 @@
menuOpen = false;
flagOpen = false;
removeOpen = false;
addOpen = false;
}
function onPlayNext() {
@@ -122,7 +125,7 @@
}
function onKeydown(e: KeyboardEvent) {
if (!menuOpen && !flagOpen && !removeOpen) return;
if (!menuOpen && !flagOpen && !removeOpen && !addOpen) return;
if (e.key === 'Escape') {
e.preventDefault();
closeAll();
@@ -130,7 +133,7 @@
}
</script>
<svelte:window onclick={() => (menuOpen = false)} onkeydown={onKeydown} />
<svelte:window onclick={() => { menuOpen = false; addOpen = false; }} onkeydown={onKeydown} />
<div class="relative inline-block">
<button
@@ -164,8 +167,7 @@
<TrackMenuItem
icon={ListMusic}
label="Add to playlist…"
disabled
title="Coming with playlists"
onclick={() => { addOpen = true; menuOpen = false; }}
/>
<TrackMenuDivider />
@@ -199,4 +201,8 @@
{#if removeOpen}
<RemoveTrackPopover {track} onClose={closeAll} />
{/if}
{#if addOpen}
<AddToPlaylistMenu {track} onClose={() => (addOpen = false)} />
{/if}
</div>