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>
2026-05-10 16:58:17 -04:00
parent 9b4f907db6
commit 308202a1df
4 changed files with 96 additions and 61 deletions
@@ -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>