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

@@ -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>