feat(web): TrackMenu rewrite — 9 entries in 4 groups (M7 #372)

Replaces the M5b-era FlagPopover-only menu with the full track-actions
surface: queue (Play next, Add to queue), collection (Like/Unlike,
Add to playlist… reserved for #352), navigation (Go to album/artist),
lifecycle (Flag, Hide/Unhide, Remove from library — admin-only).

Remove from library opens a new RemoveTrackPopover with a single
"Also stop Lidarr from finding a replacement" checkbox. The
destructive flow always deletes file + DB through Minstrel; the
checkbox controls whether Lidarr is also told to unmonitor. Lidarr
unmonitor failure flows back as lidarr_unmonitor_failed in the
response — destructive part already succeeded.

The component's prop API (track, direction) is unchanged so TrackRow
and PlayerBar pick up the new entries with no code change.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/lib/components/TrackMenu.svelte

@@ -1,6 +1,29 @@
 <script lang="ts">
-  import { MoreVertical, Flag } from 'lucide-svelte';
+  import {
+    MoreVertical,
+    ListPlus,
+    Plus,
+    Heart,
+    HeartOff,
+    ListMusic,
+    Album,
+    Disc3,
+    Flag,
+    EyeOff,
+    Eye,
+    Trash2
+  } from 'lucide-svelte';
+  import { goto } from '$app/navigation';
+  import { useQueryClient } from '@tanstack/svelte-query';
   import FlagPopover from './FlagPopover.svelte';
+  import RemoveTrackPopover from './RemoveTrackPopover.svelte';
+  import TrackMenuItem from './TrackMenuItem.svelte';
+  import TrackMenuDivider from './TrackMenuDivider.svelte';
+  import { user } from '$lib/auth/store.svelte';
+  import { createLikedIdsQuery, likeEntity, unlikeEntity } from '$lib/api/likes';
+  import { createMyQuarantineQuery, unflagTrack } from '$lib/api/quarantine';
+  import { qk } from '$lib/api/queries';
+  import { playNext, enqueueTrack } from '$lib/player/store.svelte';
   import type { TrackRef } from '$lib/api/types';
 
   let {
@@ -14,28 +37,100 @@
   } = $props();
 
   let menuOpen = $state(false);
-  let popoverOpen = $state(false);
+  let flagOpen = $state(false);
+  let removeOpen = $state(false);
+
+  const queryClient = useQueryClient();
+
+  const likedQ = $derived(createLikedIdsQuery());
+  const liked = $derived.by(() => {
+    const data = $likedQ?.data;
+    if (!data) return false;
+    return data.track_ids.includes(track.id);
+  });
+
+  const hiddenQ = $derived(createMyQuarantineQuery());
+  const hidden = $derived.by(() => {
+    const rows = $hiddenQ?.data;
+    if (!rows) return false;
+    return rows.some((r) => r.track_id === track.id);
+  });
+
+  const isAdmin = $derived(user.value?.is_admin === true);
 
   function toggleMenu(e: MouseEvent) {
     e.stopPropagation();
     menuOpen = !menuOpen;
   }
 
-  function openFlag() {
-    menuOpen = false;
-    popoverOpen = true;
-  }
-
   function closeAll() {
     menuOpen = false;
-    popoverOpen = false;
+    flagOpen = false;
+    removeOpen = false;
+  }
+
+  function onPlayNext() {
+    playNext(track);
+    closeAll();
+  }
+
+  function onAddToQueue() {
+    enqueueTrack(track);
+    closeAll();
+  }
+
+  async function onToggleLike() {
+    closeAll();
+    if (liked) {
+      await unlikeEntity(queryClient, 'track', track.id);
+    } else {
+      await likeEntity(queryClient, 'track', track.id);
+    }
+  }
+
+  async function onToggleHide() {
+    if (hidden) {
+      // Unhide: simple — unflag, then refresh the quarantine list.
+      await unflagTrack(track.id);
+      await queryClient.invalidateQueries({ queryKey: qk.myQuarantine() });
+      closeAll();
+    } else {
+      // Hide: needs a reason. Reuse FlagPopover.
+      menuOpen = false;
+      flagOpen = true;
+    }
+  }
+
+  function onGoToAlbum() {
+    closeAll();
+    goto(`/albums/${track.album_id}`);
+  }
+
+  function onGoToArtist() {
+    closeAll();
+    goto(`/artists/${track.artist_id}`);
+  }
+
+  function onFlag() {
+    menuOpen = false;
+    flagOpen = true;
+  }
+
+  function onRemoveOpen() {
+    menuOpen = false;
+    removeOpen = true;
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (!menuOpen && !flagOpen && !removeOpen) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      closeAll();
+    }
   }
 </script>
 
-<svelte:window
-  onclick={() => (menuOpen = false)}
-  onkeydown={(e) => e.key === 'Escape' && closeAll()}
-/>
+<svelte:window onclick={() => (menuOpen = false)} onkeydown={onKeydown} />
 
 <div class="relative inline-block">
   <button
@@ -52,22 +147,56 @@
   {#if menuOpen}
     <div
       role="menu"
-      class="absolute right-0 z-20 w-48 rounded-md border border-border bg-surface p-1 shadow-lg {direction === 'up' ? 'bottom-full mb-1' : 'top-full mt-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()}
     >
-      <button
-        type="button"
-        role="menuitem"
-        onclick={openFlag}
-        class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-text-primary hover:bg-surface-hover"
-      >
-        <Flag size={14} strokeWidth={1} />
-        Flag this track…
-      </button>
+      <TrackMenuItem icon={ListPlus} label="Play next" onclick={onPlayNext} />
+      <TrackMenuItem icon={Plus} label="Add to queue" onclick={onAddToQueue} />
+
+      <TrackMenuDivider />
+
+      <TrackMenuItem
+        icon={liked ? HeartOff : Heart}
+        label={liked ? 'Unlike' : 'Like'}
+        onclick={onToggleLike}
+      />
+      <TrackMenuItem
+        icon={ListMusic}
+        label="Add to playlist…"
+        disabled
+        title="Coming with playlists"
+      />
+
+      <TrackMenuDivider />
+
+      <TrackMenuItem icon={Album} label="Go to album" onclick={onGoToAlbum} />
+      <TrackMenuItem icon={Disc3} label="Go to artist" onclick={onGoToArtist} />
+
+      <TrackMenuDivider />
+
+      <TrackMenuItem icon={Flag} label="Flag this track…" onclick={onFlag} />
+      <TrackMenuItem
+        icon={hidden ? Eye : EyeOff}
+        label={hidden ? 'Unhide' : 'Hide'}
+        onclick={onToggleHide}
+      />
+      {#if isAdmin}
+        <TrackMenuItem
+          icon={Trash2}
+          label="Remove from library"
+          onclick={onRemoveOpen}
+          danger
+        />
+      {/if}
     </div>
   {/if}
 
-  {#if popoverOpen}
+  {#if flagOpen}
     <FlagPopover {track} onClose={closeAll} />
   {/if}
+
+  {#if removeOpen}
+    <RemoveTrackPopover {track} onClose={closeAll} />
+  {/if}
 </div>