feat(web/m7-377): AlbumCard gains bottom-right kebab

This commit is contained in:
2026-05-04 13:07:06 -04:00
parent 4e42fc8280
commit d35ed5945a
2 changed files with 33 additions and 0 deletions
+9
View File
@@ -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>
+24
View File
@@ -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();
});
});