feat(web/m7-377): AlbumMenu component + listAlbumTracks helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/lib/api/albums.ts

@@ -1,7 +1,7 @@
 import { createInfiniteQuery } from '@tanstack/svelte-query';
 import { api } from './client';
 import { qk } from './queries';
-import type { AlbumRef, Page } from './types';
+import type { AlbumRef, AlbumDetail, Page, TrackRef } from './types';
 
 export const ALBUM_PAGE_SIZE = 50;
 
@@ -20,3 +20,8 @@ export function createAlbumsAlphaInfiniteQuery() {
     }
   });
 }
+
+export async function listAlbumTracks(albumId: string): Promise<TrackRef[]> {
+  const detail = await api.get<AlbumDetail>(`/api/albums/${albumId}`);
+  return detail.tracks;
+}

web/src/lib/components/AlbumMenu.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { MoreVertical, Heart, HeartOff, ListMusic, Plus, Disc3 } from 'lucide-svelte';
+  import { goto } from '$app/navigation';
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import { createLikedIdsQuery, likeEntity, unlikeEntity } from '$lib/api/likes';
+  import { listAlbumTracks } from '$lib/api/albums';
+  import { enqueueTracks } from '$lib/player/store.svelte';
+  import AddToPlaylistMenu from './AddToPlaylistMenu.svelte';
+  import TrackMenuItem from './TrackMenuItem.svelte';
+  import TrackMenuDivider from './TrackMenuDivider.svelte';
+  import type { TrackRef } from '$lib/api/types';
+
+  let {
+    albumId,
+    albumTitle,
+    artistId,
+    artistName,
+    tracks,
+    direction = 'down'
+  }: {
+    albumId: string;
+    albumTitle: string;
+    artistId: string;
+    artistName: string;
+    tracks?: TrackRef[];
+    direction?: 'up' | 'down';
+  } = $props();
+
+  let menuOpen = $state(false);
+  let addOpen = $state(false);
+  let cachedTracks: TrackRef[] | null = $state(tracks ?? null);
+
+  const queryClient = useQueryClient();
+  const likedQ = $derived(createLikedIdsQuery());
+  const liked = $derived.by(() => {
+    const data = $likedQ?.data;
+    if (!data) return false;
+    return data.album_ids.includes(albumId);
+  });
+
+  function toggleMenu(e: MouseEvent) {
+    e.stopPropagation();
+    menuOpen = !menuOpen;
+  }
+
+  function closeAll() {
+    menuOpen = false;
+    addOpen = false;
+  }
+
+  async function ensureTracks(): Promise<TrackRef[]> {
+    if (cachedTracks) return cachedTracks;
+    const fetched = await listAlbumTracks(albumId);
+    cachedTracks = fetched;
+    return fetched;
+  }
+
+  async function onAddToQueue() {
+    const ts = await ensureTracks();
+    enqueueTracks(ts);
+    closeAll();
+  }
+
+  async function onOpenAddToPlaylist() {
+    await ensureTracks();
+    menuOpen = false;
+    addOpen = true;
+  }
+
+  async function onToggleLike() {
+    closeAll();
+    if (liked) {
+      await unlikeEntity(queryClient, 'album', albumId);
+    } else {
+      await likeEntity(queryClient, 'album', albumId);
+    }
+  }
+
+  function onGoToArtist() {
+    closeAll();
+    goto(`/artists/${artistId}`);
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (!menuOpen && !addOpen) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      closeAll();
+    }
+  }
+</script>
+
+<svelte:window onclick={() => { menuOpen = false; addOpen = false; }} onkeydown={onKeydown} />
+
+<div class="relative inline-block">
+  <button
+    type="button"
+    aria-label={`Album actions for ${albumTitle}`}
+    aria-haspopup="menu"
+    aria-expanded={menuOpen}
+    onclick={toggleMenu}
+    class="rounded p-1 text-text-muted hover:text-text-primary"
+  >
+    <MoreVertical size={16} strokeWidth={1} />
+  </button>
+
+  {#if menuOpen}
+    <div
+      role="menu"
+      tabindex="-1"
+      class="absolute right-0 z-20 w-56 rounded-md border border-border bg-surface p-1 shadow-lg
+             {direction === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'}"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <TrackMenuItem
+        icon={liked ? HeartOff : Heart}
+        label={liked ? 'Unlike album' : 'Like album'}
+        onclick={onToggleLike}
+      />
+      <TrackMenuDivider />
+      <TrackMenuItem icon={Plus} label="Add to queue" onclick={onAddToQueue} />
+      <TrackMenuItem icon={ListMusic} label="Add to playlist…" onclick={onOpenAddToPlaylist} />
+      <TrackMenuDivider />
+      <TrackMenuItem icon={Disc3} label="Go to artist" onclick={onGoToArtist} />
+    </div>
+  {/if}
+
+  {#if addOpen && cachedTracks}
+    <AddToPlaylistMenu tracks={cachedTracks} onClose={closeAll} />
+  {/if}
+</div>

web/src/lib/components/AlbumMenu.test.ts

@@ -0,0 +1,101 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import { readable } from 'svelte/store';
+import type { TrackRef } from '$lib/api/types';
+
+vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
+
+vi.mock('$lib/api/likes', () => ({
+  createLikedIdsQuery: () =>
+    readable({ data: { track_ids: [], album_ids: [], artist_ids: [] }, isPending: false, isError: false }),
+  likeEntity: vi.fn().mockResolvedValue(undefined),
+  unlikeEntity: vi.fn().mockResolvedValue(undefined)
+}));
+
+vi.mock('$lib/api/albums', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, listAlbumTracks: vi.fn().mockResolvedValue([]) };
+});
+
+vi.mock('$lib/api/playlists', () => ({
+  createPlaylistsQuery: () =>
+    readable({ data: { owned: [], public: [] }, isPending: false, isError: false }),
+  appendTracks: vi.fn().mockResolvedValue({ id: 'p1', tracks: [] }),
+  createPlaylist: vi.fn().mockResolvedValue({ id: 'p1', name: 'New' })
+}));
+
+vi.mock('$lib/player/store.svelte', () => ({
+  enqueueTracks: vi.fn()
+}));
+
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({ invalidateQueries: vi.fn() }) };
+});
+
+import AlbumMenu from './AlbumMenu.svelte';
+import { enqueueTracks } from '$lib/player/store.svelte';
+import { listAlbumTracks } from '$lib/api/albums';
+import { likeEntity } from '$lib/api/likes';
+import { goto } from '$app/navigation';
+
+const TRACKS: TrackRef[] = [
+  { id: 't1', title: 'A', album_id: 'al1', album_title: 'Disc', artist_id: 'a1', artist_name: 'Test', duration_sec: 100, stream_url: '/s/t1' },
+  { id: 't2', title: 'B', album_id: 'al1', album_title: 'Disc', artist_id: 'a1', artist_name: 'Test', duration_sec: 100, stream_url: '/s/t2' }
+];
+
+const PROPS = { albumId: 'al1', albumTitle: 'Disc', artistId: 'a1', artistName: 'Test' };
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('AlbumMenu', () => {
+  test('kebab opens menu with action items', async () => {
+    render(AlbumMenu, { props: { ...PROPS, tracks: TRACKS } });
+    await fireEvent.click(screen.getByRole('button', { name: /album actions for disc/i }));
+    expect(await screen.findByText(/Like album/i)).toBeInTheDocument();
+    expect(screen.getByText(/Add to queue/i)).toBeInTheDocument();
+    expect(screen.getByText(/Add to playlist/i)).toBeInTheDocument();
+    expect(screen.getByText(/Go to artist/i)).toBeInTheDocument();
+  });
+
+  test('Add to queue uses cached tracks when provided', async () => {
+    render(AlbumMenu, { props: { ...PROPS, tracks: TRACKS } });
+    await fireEvent.click(screen.getByRole('button', { name: /album actions for disc/i }));
+    await fireEvent.click(screen.getByText(/Add to queue/i));
+    expect(enqueueTracks).toHaveBeenCalledWith(TRACKS);
+    expect(listAlbumTracks).not.toHaveBeenCalled();
+  });
+
+  test('Add to queue lazily fetches when no cached tracks', async () => {
+    (listAlbumTracks as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce(TRACKS);
+    render(AlbumMenu, { props: PROPS });
+    await fireEvent.click(screen.getByRole('button', { name: /album actions for disc/i }));
+    await fireEvent.click(screen.getByText(/Add to queue/i));
+    await waitFor(() => expect(enqueueTracks).toHaveBeenCalledWith(TRACKS));
+    expect(listAlbumTracks).toHaveBeenCalledWith('al1');
+  });
+
+  test('Like item calls likeEntity', async () => {
+    render(AlbumMenu, { props: { ...PROPS, tracks: TRACKS } });
+    await fireEvent.click(screen.getByRole('button', { name: /album actions for disc/i }));
+    await fireEvent.click(screen.getByText(/Like album/i));
+    expect(likeEntity).toHaveBeenCalled();
+  });
+
+  test('Go to artist navigates', async () => {
+    render(AlbumMenu, { props: { ...PROPS, tracks: TRACKS } });
+    await fireEvent.click(screen.getByRole('button', { name: /album actions for disc/i }));
+    await fireEvent.click(screen.getByText(/Go to artist/i));
+    expect(goto).toHaveBeenCalledWith('/artists/a1');
+  });
+
+  test('Escape key closes the menu', async () => {
+    render(AlbumMenu, { props: { ...PROPS, tracks: TRACKS } });
+    await fireEvent.click(screen.getByRole('button', { name: /album actions for disc/i }));
+    expect(await screen.findByText(/Like album/i)).toBeInTheDocument();
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(screen.queryByText(/Like album/i)).not.toBeInTheDocument();
+  });
+});