refactor(web): extract CardActionCluster (#375 item #8 — narrowed scope)

The MediaCard consolidation in the discovery doc would have needed
~14 props to cover the differentiating bits (wrapping element a vs
button, art-shape, art-fallback strategy, click semantics, title
align/size, subtitle count). That's a god-prop blob that's harder to
reason about than three explicit cards.

Narrowed to the actually-drifted bit: the action cluster
(LikeButton + Plus + bottom-right menu slot, including the
stopPropagation defensive wrappers). One small component covers
AlbumCard / ArtistCard / CompactTrackCard so the focus-ring and
button-styling drift can't recur.

Each card keeps its own data-fetching, art container, and wrapping
element since those have load-bearing differences. The consolidation
addresses drift, not LOC for its own sake.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/lib/components/CompactTrackCard.svelte

@@ -2,9 +2,8 @@
   import type { TrackRef } from '$lib/api/types';
   import { playQueue, enqueueTrack } from '$lib/player/store.svelte';
   import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
-  import { Plus } from 'lucide-svelte';
-  import LikeButton from './LikeButton.svelte';
   import TrackMenu from './TrackMenu.svelte';
+  import CardActionCluster from './CardActionCluster.svelte';
 
   let {
     track,
@@ -52,24 +51,14 @@
     <div class="mt-2 truncate text-xs font-medium text-text-primary">{track.title}</div>
     <div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
   </button>
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- Overlay div catches clicks on its inner buttons so they don't
-       bubble to the wrapping play-card button. Not interactive on
-       its own; the inner LikeButton + queue button carry their own
-       keyboard handling. -->
-  <div class="absolute right-2 top-2 z-10 flex gap-1" onclick={(e) => e.stopPropagation()}>
-    <LikeButton entityType="track" entityId={track.id} />
-    <button
-      type="button"
-      aria-label={`Add ${track.title} to queue`}
-      onclick={onAddToQueue}
-      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 class="absolute right-2 bottom-2 z-10">
-    <TrackMenu {track} />
-  </div>
+  <CardActionCluster
+    likeEntityType="track"
+    likeEntityId={track.id}
+    onAdd={onAddToQueue}
+    addLabel={`Add ${track.title} to queue`}
+  >
+    {#snippet menu()}
+      <TrackMenu {track} />
+    {/snippet}
+  </CardActionCluster>
 </div>