From d35ed5945a19d2f2d300227a7269eed29d321380 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 4 May 2026 13:07:06 -0400
Subject: [PATCH] feat(web/m7-377): AlbumCard gains bottom-right kebab

---
 web/src/lib/components/AlbumCard.svelte  |  9 +++++++++
 web/src/lib/components/AlbumCard.test.ts | 24 ++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/web/src/lib/components/AlbumCard.svelte b/web/src/lib/components/AlbumCard.svelte
index a26fb4b8..f4e1138e 100644
--- a/web/src/lib/components/AlbumCard.svelte
+++ b/web/src/lib/components/AlbumCard.svelte
@@ -5,6 +5,7 @@
   import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
   import { Plus, Play } from 'lucide-svelte';
   import LikeButton from './LikeButton.svelte';
+  import AlbumMenu from './AlbumMenu.svelte';
 
   let { album }: { album: AlbumRef } = $props();
 
@@ -68,6 +69,14 @@
       <Plus size={16} strokeWidth={1} />
     </button>
   </div>
+  <div class="absolute right-2 bottom-2 z-10">
+    <AlbumMenu
+      albumId={album.id}
+      albumTitle={album.title}
+      artistId={album.artist_id}
+      artistName={album.artist_name}
+    />
+  </div>
 </div>
 
 <style>
diff --git a/web/src/lib/components/AlbumCard.test.ts b/web/src/lib/components/AlbumCard.test.ts
index 81ee840f..125e533b 100644
--- a/web/src/lib/components/AlbumCard.test.ts
+++ b/web/src/lib/components/AlbumCard.test.ts
@@ -27,6 +27,25 @@ vi.mock('@tanstack/svelte-query', async (orig) => {
   return { ...actual, useQueryClient: () => ({}) };
 });
 
+vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
+
+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', async (orig) => {
+  const { readable } = await import('svelte/store');
+  const actual = (await orig()) as Record<string, unknown>;
+  return {
+    ...actual,
+    createPlaylistsQuery: () =>
+      readable({ data: { owned: [], public: [] }, isPending: false, isError: false }),
+    appendTracks: vi.fn().mockResolvedValue({ id: 'p1', tracks: [] }),
+    createPlaylist: vi.fn().mockResolvedValue({ id: 'p1', name: 'New' })
+  };
+});
+
 import AlbumCard from './AlbumCard.svelte';
 import { api } from '$lib/api/client';
 import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
@@ -111,4 +130,9 @@ describe('AlbumCard', () => {
     await Promise.resolve();
     expect(playQueue).toHaveBeenCalledWith(tracks, 0);
   });
+
+  test('renders the bottom-right kebab menu trigger', () => {
+    render(AlbumCard, { props: { album } });
+    expect(screen.getByRole('button', { name: /Album actions for Kind of Blue/i })).toBeInTheDocument();
+  });
 });