From 4e42fc8280d531b8ebac6787ce1580b4a0392d6f Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 4 May 2026 13:05:11 -0400
Subject: [PATCH] feat(web/m7-377): ArtistCard top-right cluster + bottom-right
 kebab

---
 web/src/lib/components/ArtistCard.svelte  | 38 +++++++++++++++++-
 web/src/lib/components/ArtistCard.test.ts | 48 ++++++++++++++++++++++-
 2 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/ArtistCard.svelte b/web/src/lib/components/ArtistCard.svelte
index 4c5503e0..87dd14b9 100644
--- a/web/src/lib/components/ArtistCard.svelte
+++ b/web/src/lib/components/ArtistCard.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
   import type { ArtistRef, TrackRef } from '$lib/api/types';
   import { api } from '$lib/api/client';
-  import { playQueue } from '$lib/player/store.svelte';
-  import { Disc3, Play } from 'lucide-svelte';
+  import { playQueue, enqueueTracks } from '$lib/player/store.svelte';
+  import { Disc3, Play, Plus } from 'lucide-svelte';
+  import LikeButton from './LikeButton.svelte';
+  import ArtistMenu from './ArtistMenu.svelte';
+  import { listArtistTracks } from '$lib/api/artists';
 
   let { artist }: { artist: ArtistRef } = $props();
 
+  let queueing = $state(false);
+
   function shuffle<T>(items: T[]): T[] {
     const arr = items.slice();
     for (let i = arr.length - 1; i > 0; i--) {
@@ -22,6 +27,19 @@
     if (tracks.length === 0) return;
     playQueue(shuffle(tracks), 0);
   }
+
+  async function onAddToQueue(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (queueing) return;
+    queueing = true;
+    try {
+      const tracks = await listArtistTracks(artist.id);
+      if (tracks.length > 0) enqueueTracks(tracks);
+    } finally {
+      queueing = false;
+    }
+  }
 </script>
 
 <div class="card relative">
@@ -53,6 +71,22 @@
     </div>
     <div class="mt-2 truncate text-center text-sm font-medium text-text-primary">{artist.name}</div>
   </a>
+  <div class="absolute right-2 top-2 z-10 flex gap-1">
+    <LikeButton entityType="artist" entityId={artist.id} />
+    <button
+      type="button"
+      aria-label={`Add ${artist.name} to queue`}
+      onclick={onAddToQueue}
+      disabled={queueing}
+      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 disabled:opacity-50"
+    >
+      <Plus size={16} strokeWidth={1} />
+    </button>
+  </div>
+
+  <div class="absolute right-2 bottom-2 z-10">
+    <ArtistMenu artistId={artist.id} artistName={artist.name} />
+  </div>
 </div>
 
 <style>
diff --git a/web/src/lib/components/ArtistCard.test.ts b/web/src/lib/components/ArtistCard.test.ts
index f3109592..e3aa1513 100644
--- a/web/src/lib/components/ArtistCard.test.ts
+++ b/web/src/lib/components/ArtistCard.test.ts
@@ -6,8 +6,25 @@ vi.mock('$lib/api/client', () => ({
   api: { get: vi.fn() }
 }));
 vi.mock('$lib/player/store.svelte', () => ({
-  playQueue: vi.fn()
+  playQueue: vi.fn(),
+  enqueueTracks: vi.fn()
 }));
+vi.mock('$lib/api/artists', () => ({
+  listArtistTracks: vi.fn().mockResolvedValue([])
+}));
+vi.mock('$lib/api/likes', async () => {
+  const { readable } = await import('svelte/store');
+  return {
+    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('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({ invalidateQueries: vi.fn() }) };
+});
 
 import ArtistCard from './ArtistCard.svelte';
 import { api } from '$lib/api/client';
@@ -62,4 +79,33 @@ describe('ArtistCard', () => {
     expect(idx).toBe(0);
     expect(calledTracks.map((t: TrackRef) => t.id).sort()).toEqual(['t1', 't2']);
   });
+
+  test('renders the top-right action cluster (Like + Add-to-queue)', () => {
+    render(ArtistCard, { props: { artist } });
+    // Like button (LikeButton's aria-label is dynamic Like|Unlike).
+    expect(screen.getByRole('button', { name: /^(Like|Unlike)$/ })).toBeInTheDocument();
+    // Add-to-queue button.
+    expect(screen.getByRole('button', { name: /Add Boards of Canada to queue/i })).toBeInTheDocument();
+  });
+
+  test('renders the bottom-right kebab', () => {
+    render(ArtistCard, { props: { artist } });
+    expect(screen.getByRole('button', { name: /Artist actions for Boards of Canada/i })).toBeInTheDocument();
+  });
+
+  test('+queue button calls listArtistTracks then enqueueTracks', async () => {
+    const fakeTracks = [
+      { id: 't1', title: 'A', album_id: 'al1', album_title: 'X', artist_id: 'art-1', artist_name: 'BoC', duration_sec: 60, stream_url: '/s/t1' }
+    ];
+    const { listArtistTracks } = await import('$lib/api/artists');
+    (listArtistTracks as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce(fakeTracks);
+    render(ArtistCard, { props: { artist } });
+    const btn = screen.getByRole('button', { name: /Add Boards of Canada to queue/i });
+    await fireEvent.click(btn);
+    // Allow promise microtask to flush.
+    await new Promise((r) => setTimeout(r, 0));
+    expect(listArtistTracks).toHaveBeenCalledWith('art-1');
+    const { enqueueTracks } = await import('$lib/player/store.svelte');
+    expect(enqueueTracks).toHaveBeenCalledWith(fakeTracks);
+  });
 });