From b5741e59b786e80c9ae30f10492ddc7a9ce16781 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 1 May 2026 20:16:43 -0400
Subject: [PATCH] feat(web): polish AlbumCard with FabledSword tokens + play
 overlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/lib/components/AlbumCard.svelte  | 64 +++++++++++++++++++-----
 web/src/lib/components/AlbumCard.test.ts | 24 ++++++++-
 2 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/AlbumCard.svelte b/web/src/lib/components/AlbumCard.svelte
index 4eeb0aed..a26fb4b8 100644
--- a/web/src/lib/components/AlbumCard.svelte
+++ b/web/src/lib/components/AlbumCard.svelte
@@ -2,7 +2,8 @@
   import type { AlbumRef, AlbumDetail } from '$lib/api/types';
   import { FALLBACK_COVER } from '$lib/media/covers';
   import { api } from '$lib/api/client';
-  import { enqueueTracks } from '$lib/player/store.svelte';
+  import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
+  import { Plus, Play } from 'lucide-svelte';
   import LikeButton from './LikeButton.svelte';
 
   let { album }: { album: AlbumRef } = $props();
@@ -17,32 +18,69 @@
     const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
     enqueueTracks(detail.tracks);
   }
+
+  async function onPlayClick(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
+    playQueue(detail.tracks, 0);
+  }
 </script>
 
-<div class="relative">
+<div class="card relative">
   <a
     href={`/albums/${album.id}`}
     class="group block rounded focus-visible:ring-2 focus-visible:ring-accent"
   >
-    <img
-      src={album.cover_url}
-      alt=""
-      class="aspect-square w-full rounded object-cover transition-transform group-hover:scale-[1.03]"
-      loading="lazy"
-      onerror={onImgError}
-    />
-    <div class="mt-2 truncate text-sm font-medium">{album.title}</div>
+    <div class="art-wrap relative aspect-square w-full overflow-hidden rounded-md">
+      <img
+        src={album.cover_url}
+        alt=""
+        class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
+        loading="lazy"
+        onerror={onImgError}
+      />
+      <button
+        type="button"
+        aria-label={`Play ${album.title}`}
+        onclick={onPlayClick}
+        class="play-overlay absolute inset-0 m-auto flex h-12 w-12 items-center justify-center rounded-full"
+      >
+        <Play size={24} strokeWidth={1.5} fill="currentColor" />
+      </button>
+    </div>
+    <div class="mt-2 truncate text-sm font-medium text-text-primary">{album.title}</div>
+    {#if album.artist_name}
+      <div class="truncate text-xs text-text-secondary">{album.artist_name}</div>
+    {/if}
     {#if album.year}
       <div class="text-xs text-text-secondary">{album.year}</div>
     {/if}
   </a>
-  <div class="absolute right-2 top-2 flex gap-1">
+  <div class="absolute right-2 top-2 z-10 flex gap-1">
     <LikeButton entityType="album" entityId={album.id} />
     <button
       type="button"
       aria-label="Add to queue"
       onclick={onAddClick}
-      class="rounded-full bg-surface/80 px-2 py-1 text-sm text-text-secondary hover:text-text-primary focus-visible:ring-2 focus-visible:ring-accent"
-    >+</button>
+      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>
+
+<style>
+  .play-overlay {
+    background: var(--fs-accent);
+    color: var(--fs-parchment);
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+  @media (hover: hover) {
+    .card:hover .play-overlay { opacity: 1; }
+  }
+  @media (hover: none) {
+    .play-overlay { opacity: 1; }
+  }
+</style>
diff --git a/web/src/lib/components/AlbumCard.test.ts b/web/src/lib/components/AlbumCard.test.ts
index 9a29dd54..d85c8926 100644
--- a/web/src/lib/components/AlbumCard.test.ts
+++ b/web/src/lib/components/AlbumCard.test.ts
@@ -8,7 +8,8 @@ vi.mock('$lib/api/client', () => ({
   api: { get: vi.fn() }
 }));
 vi.mock('$lib/player/store.svelte', () => ({
-  enqueueTracks: vi.fn()
+  enqueueTracks: vi.fn(),
+  playQueue: vi.fn()
 }));
 
 vi.mock('$lib/api/likes', () => ({
@@ -28,7 +29,7 @@ vi.mock('@tanstack/svelte-query', async (orig) => {
 
 import AlbumCard from './AlbumCard.svelte';
 import { api } from '$lib/api/client';
-import { enqueueTracks } from '$lib/player/store.svelte';
+import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
 
 const album: AlbumRef = {
   id: 'xyz',
@@ -89,4 +90,23 @@ describe('AlbumCard', () => {
     await Promise.resolve();
     expect(enqueueTracks).toHaveBeenCalledWith(tracks);
   });
+
+  test('play overlay click fetches album detail and calls playQueue at index 0', async () => {
+    const tracks: TrackRef[] = [
+      { id: 't1', title: 'So What',
+        album_id: 'xyz', album_title: 'Kind of Blue',
+        artist_id: 'm-davis', artist_name: 'Miles Davis',
+        track_number: 1, disc_number: 1, duration_sec: 545,
+        stream_url: '/api/tracks/t1/stream' }
+    ];
+    const detail: AlbumDetail = { ...album, tracks };
+    (api.get as ReturnType<typeof vi.fn>).mockResolvedValueOnce(detail);
+
+    render(AlbumCard, { props: { album } });
+    await fireEvent.click(screen.getByRole('button', { name: /play kind of blue/i }));
+    expect(api.get).toHaveBeenCalledWith('/api/albums/xyz');
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(playQueue).toHaveBeenCalledWith(tracks, 0);
+  });
 });