feat(web): add ArtistCard (circular) with play-shuffle overlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 20:18:05 -04:00
parent b5741e59b7
commit c7e7dd269b
2 changed files with 136 additions and 0 deletions
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { ArtistRef, TrackRef } from '$lib/api/types';
+  import { api } from '$lib/api/client';
+  import { playQueue } from '$lib/player/store.svelte';
+  import { Disc3, Play } from 'lucide-svelte';
+
+  let { artist }: { artist: ArtistRef } = $props();
+
+  function shuffle<T>(items: T[]): T[] {
+    const arr = items.slice();
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+  }
+
+  async function onPlayClick(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    const tracks = await api.get<TrackRef[]>(`/api/artists/${artist.id}/tracks`);
+    if (tracks.length === 0) return;
+    playQueue(shuffle(tracks), 0);
+  }
+</script>
+
+<div class="card relative">
+  <a
+    href={`/artists/${artist.id}`}
+    class="group block rounded focus-visible:ring-2 focus-visible:ring-accent"
+  >
+    <div class="art-wrap relative mx-auto aspect-square w-full overflow-hidden rounded-full bg-surface-hover">
+      {#if artist.cover_url}
+        <img
+          src={artist.cover_url}
+          alt=""
+          class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
+          loading="lazy"
+        />
+      {:else}
+        <div class="flex h-full w-full items-center justify-center">
+          <Disc3 size={32} strokeWidth={1.5} class="text-text-muted" />
+        </div>
+      {/if}
+      <button
+        type="button"
+        aria-label={`Play ${artist.name}`}
+        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-center text-sm font-medium text-text-primary">{artist.name}</div>
+  </a>
+</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>