minstrel/web/src/lib/components/AlbumMenu.svelte

<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.js';
  import { listAlbumTracks } from '#lib/api/albums.js';
  import { enqueueTracks } from '#lib/player/store.svelte.js';
  import AddToPlaylistMenu from './AddToPlaylistMenu.svelte';
  import TrackMenuItem from './TrackMenuItem.svelte';
  import TrackMenuDivider from './TrackMenuDivider.svelte';
  import type { TrackRef } from '#lib/api/types.js';

  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);
  // Lazy track cache. Starts null so the `tracks` prop is read inside
  // ensureTracks() each call rather than captured at component-creation
  // time — the menu is reused across different album rows, and pinning
  // the prop's initial value here would serve a stale list when the
  // user opens the menu on a second album.
  let cachedTracks: TrackRef[] | null = $state(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;
    if (tracks) {
      cachedTracks = tracks;
      return tracks;
    }
    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}
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- onclick is a click-outside guard (stops bubble to the
         <svelte:window onclick> menu-closer above); not user-facing
         interaction, so a paired keyboard handler is intentionally
         absent. Escape-to-close lives on svelte:window onkeydown. -->
    <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>