From db361c83052442b9811dcb9ab227070fb1a21968 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 4 May 2026 17:49:19 -0400
Subject: [PATCH] feat(web/m7-377): CompactTrackCard gains like + queue + kebab
 overlays

---
 .../lib/components/CompactTrackCard.svelte    | 61 +++++++++++++------
 .../lib/components/CompactTrackCard.test.ts   | 51 +++++++++++++++-
 2 files changed, 92 insertions(+), 20 deletions(-)

diff --git a/web/src/lib/components/CompactTrackCard.svelte b/web/src/lib/components/CompactTrackCard.svelte
index 436032fe..0b69fb84 100644
--- a/web/src/lib/components/CompactTrackCard.svelte
+++ b/web/src/lib/components/CompactTrackCard.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { TrackRef } from '$lib/api/types';
-  import { playQueue } from '$lib/player/store.svelte';
+  import { playQueue, enqueueTrack } from '$lib/player/store.svelte';
   import { FALLBACK_COVER } from '$lib/media/covers';
+  import { Plus } from 'lucide-svelte';
+  import LikeButton from './LikeButton.svelte';
+  import TrackMenu from './TrackMenu.svelte';
 
   let {
     track,
@@ -22,23 +25,45 @@
   function onClick() {
     playQueue(sectionTracks, index);
   }
+
+  function onAddToQueue(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    enqueueTrack(track);
+  }
 </script>
 
-<button
-  type="button"
-  aria-label={`Play ${track.title}`}
-  onclick={onClick}
-  class="card group block w-36 rounded text-left focus-visible:ring-2 focus-visible:ring-accent"
->
-  <div class="aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
-    <img
-      src={coverUrl}
-      alt=""
-      class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
-      loading="lazy"
-      onerror={onImgError}
-    />
+<div class="card relative w-36">
+  <button
+    type="button"
+    aria-label={`Play ${track.title}`}
+    onclick={onClick}
+    class="group block w-full rounded text-left focus-visible:ring-2 focus-visible:ring-accent"
+  >
+    <div class="aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
+      <img
+        src={coverUrl}
+        alt=""
+        class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
+        loading="lazy"
+        onerror={onImgError}
+      />
+    </div>
+    <div class="mt-2 truncate text-xs font-medium text-text-primary">{track.title}</div>
+    <div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
+  </button>
+  <div class="absolute right-2 top-2 z-10 flex gap-1" onclick={(e) => e.stopPropagation()}>
+    <LikeButton entityType="track" entityId={track.id} />
+    <button
+      type="button"
+      aria-label={`Add ${track.title} to queue`}
+      onclick={onAddToQueue}
+      class="rounded-full bg-surface px-2 py-1 text-sm text-text-secondary hover:text-text-primary focus-visible:ring-2 focus-visible:ring-accent"
+    >
+      <Plus size={16} strokeWidth={1} />
+    </button>
   </div>
-  <div class="mt-2 truncate text-xs font-medium text-text-primary">{track.title}</div>
-  <div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
-</button>
+  <div class="absolute right-2 bottom-2 z-10">
+    <TrackMenu {track} />
+  </div>
+</div>
diff --git a/web/src/lib/components/CompactTrackCard.test.ts b/web/src/lib/components/CompactTrackCard.test.ts
index 859671e9..87bf9969 100644
--- a/web/src/lib/components/CompactTrackCard.test.ts
+++ b/web/src/lib/components/CompactTrackCard.test.ts
@@ -1,13 +1,52 @@
 import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
 import type { TrackRef } from '$lib/api/types';
+import { readable } from 'svelte/store';
+
+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/quarantine', () => ({
+  flagTrack: vi.fn().mockResolvedValue({}),
+  unflagTrack: vi.fn().mockResolvedValue(undefined),
+  listMyQuarantine: vi.fn().mockResolvedValue([]),
+  createMyQuarantineQuery: () => readable({ data: [], isPending: false, isError: false })
+}));
+
+vi.mock('$lib/api/admin/tracks', () => ({
+  removeTrack: vi.fn().mockResolvedValue({ deleted_track_id: 't1' })
+}));
+
+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/auth/store.svelte', () => ({
+  user: { get value() { return { id: 'u1', username: 'u', is_admin: false }; } }
+}));
+
+vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
+
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({ invalidateQueries: vi.fn() }) };
+});
 
 vi.mock('$lib/player/store.svelte', () => ({
-  playQueue: vi.fn()
+  playQueue: vi.fn(),
+  enqueueTrack: vi.fn(),
+  playNext: vi.fn()
 }));
 
 import CompactTrackCard from './CompactTrackCard.svelte';
-import { playQueue } from '$lib/player/store.svelte';
+import { playQueue, enqueueTrack } from '$lib/player/store.svelte';
 
 const tracks: TrackRef[] = [
   { id: 't1', title: 'First', album_id: 'a1', album_title: 'A',
@@ -39,4 +78,12 @@ describe('CompactTrackCard', () => {
     expect(screen.getByText('First')).toBeInTheDocument();
     expect(screen.getByText('Artist')).toBeInTheDocument();
   });
+
+  test('+ queue button calls enqueueTrack', async () => {
+    render(CompactTrackCard, {
+      props: { track: tracks[0], sectionTracks: tracks, index: 0 }
+    });
+    await fireEvent.click(screen.getByRole('button', { name: /add first to queue/i }));
+    expect(enqueueTrack).toHaveBeenCalledWith(tracks[0]);
+  });
 });