From 308202a1dfd26018be7db74acbb3904c874e39b7 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 10 May 2026 16:58:17 -0400
Subject: [PATCH] =?UTF-8?q?refactor(web):=20extract=20CardActionCluster=20?=
 =?UTF-8?q?(#375=20item=20#8=20=E2=80=94=20narrowed=20scope)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/AlbumCard.svelte       | 38 ++++++-------
 web/src/lib/components/ArtistCard.svelte      | 31 +++++------
 .../lib/components/CardActionCluster.svelte   | 55 +++++++++++++++++++
 .../lib/components/CompactTrackCard.svelte    | 33 ++++-------
 4 files changed, 96 insertions(+), 61 deletions(-)
 create mode 100644 web/src/lib/components/CardActionCluster.svelte

diff --git a/web/src/lib/components/AlbumCard.svelte b/web/src/lib/components/AlbumCard.svelte
index ebb2df7e..5575ccb1 100644
--- a/web/src/lib/components/AlbumCard.svelte
+++ b/web/src/lib/components/AlbumCard.svelte
@@ -3,9 +3,9 @@
   import { FALLBACK_COVER } from '$lib/media/covers';
   import { api } from '$lib/api/client';
   import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
-  import { Plus, Play } from 'lucide-svelte';
-  import LikeButton from './LikeButton.svelte';
+  import { Play } from 'lucide-svelte';
   import AlbumMenu from './AlbumMenu.svelte';
+  import CardActionCluster from './CardActionCluster.svelte';
 
   let { album }: { album: AlbumRef } = $props();
 
@@ -58,24 +58,20 @@
       <div class="text-xs text-text-secondary">{album.year}</div>
     {/if}
   </a>
-  <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 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">
-    <AlbumMenu
-      albumId={album.id}
-      albumTitle={album.title}
-      artistId={album.artist_id}
-      artistName={album.artist_name}
-    />
-  </div>
+  <CardActionCluster
+    likeEntityType="album"
+    likeEntityId={album.id}
+    onAdd={onAddClick}
+    addLabel="Add to queue"
+  >
+    {#snippet menu()}
+      <AlbumMenu
+        albumId={album.id}
+        albumTitle={album.title}
+        artistId={album.artist_id}
+        artistName={album.artist_name}
+      />
+    {/snippet}
+  </CardActionCluster>
 </div>
 
diff --git a/web/src/lib/components/ArtistCard.svelte b/web/src/lib/components/ArtistCard.svelte
index 8a2a4ff5..f1e1003a 100644
--- a/web/src/lib/components/ArtistCard.svelte
+++ b/web/src/lib/components/ArtistCard.svelte
@@ -2,9 +2,9 @@
   import type { ArtistRef, TrackRef } from '$lib/api/types';
   import { api } from '$lib/api/client';
   import { playQueue, enqueueTracks } from '$lib/player/store.svelte';
-  import { Disc3, Play, Plus } from 'lucide-svelte';
-  import LikeButton from './LikeButton.svelte';
+  import { Disc3, Play } from 'lucide-svelte';
   import ArtistMenu from './ArtistMenu.svelte';
+  import CardActionCluster from './CardActionCluster.svelte';
   import { listArtistTracks } from '$lib/api/artists';
 
   let { artist }: { artist: ArtistRef } = $props();
@@ -71,21 +71,16 @@
     </div>
     <div class="mt-2 truncate text-center text-sm font-medium text-text-primary">{artist.name}</div>
   </a>
-  <div class="absolute right-2 top-2 z-10 flex gap-1">
-    <LikeButton entityType="artist" entityId={artist.id} />
-    <button
-      type="button"
-      aria-label={`Add ${artist.name} to queue`}
-      onclick={onAddToQueue}
-      disabled={queueing}
-      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 disabled:opacity-50"
-    >
-      <Plus size={16} strokeWidth={1} />
-    </button>
-  </div>
-
-  <div class="absolute right-2 bottom-2 z-10">
-    <ArtistMenu artistId={artist.id} artistName={artist.name} />
-  </div>
+  <CardActionCluster
+    likeEntityType="artist"
+    likeEntityId={artist.id}
+    onAdd={onAddToQueue}
+    addLabel={`Add ${artist.name} to queue`}
+    addDisabled={queueing}
+  >
+    {#snippet menu()}
+      <ArtistMenu artistId={artist.id} artistName={artist.name} />
+    {/snippet}
+  </CardActionCluster>
 </div>
 
diff --git a/web/src/lib/components/CardActionCluster.svelte b/web/src/lib/components/CardActionCluster.svelte
new file mode 100644
index 00000000..c92644b2
--- /dev/null
+++ b/web/src/lib/components/CardActionCluster.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Plus } from 'lucide-svelte';
+  import LikeButton from './LikeButton.svelte';
+
+  // Shared chrome for AlbumCard / ArtistCard / CompactTrackCard. Owns
+  // the top-right Like + add-to-queue cluster and the bottom-right
+  // menu slot — the bits that were drifting between the three cards
+  // (focus-ring, play-overlay-adjacent positioning, button styling).
+  //
+  // Per-card data fetching + onPlay/onAdd logic stays in the calling
+  // component; the wrapping element (a vs button) and art container
+  // also stay there since their differences are load-bearing.
+  //
+  // stopPropagation is applied to both wrapper divs so clicks on the
+  // action elements never bubble to the parent — works for both
+  // <a>-wrapped cards (AlbumCard/ArtistCard) and <button>-wrapped
+  // ones (CompactTrackCard).
+
+  let {
+    likeEntityType,
+    likeEntityId,
+    onAdd,
+    addLabel,
+    addDisabled = false,
+    menu
+  }: {
+    likeEntityType: 'track' | 'album' | 'artist';
+    likeEntityId: string;
+    onAdd: (e: MouseEvent) => void;
+    addLabel: string;
+    addDisabled?: boolean;
+    menu: Snippet;
+  } = $props();
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="absolute right-2 top-2 z-10 flex gap-1" onclick={(e) => e.stopPropagation()}>
+  <LikeButton entityType={likeEntityType} entityId={likeEntityId} />
+  <button
+    type="button"
+    aria-label={addLabel}
+    onclick={onAdd}
+    disabled={addDisabled}
+    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 disabled:opacity-50"
+  >
+    <Plus size={16} strokeWidth={1} />
+  </button>
+</div>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="absolute right-2 bottom-2 z-10" onclick={(e) => e.stopPropagation()}>
+  {@render menu()}
+</div>
diff --git a/web/src/lib/components/CompactTrackCard.svelte b/web/src/lib/components/CompactTrackCard.svelte
index a1326945..ed526455 100644
--- a/web/src/lib/components/CompactTrackCard.svelte
+++ b/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>