feat(web/m7-352): PlaylistPlaceholderCard with 4 state variants

2026-05-04 18:31:42 -04:00
parent 886903ae27
commit b8bb1c1fa7
2 changed files with 74 additions and 0 deletions
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Sparkles } from 'lucide-svelte';
+
+  let {
+    label,
+    variant = 'pending'
+  }: {
+    /** Card title (e.g. "For You" or "Songs like…"). */
+    label: string;
+    /** Drives copy + animation. */
+    variant?: 'building' | 'failed' | 'pending' | 'seed-needed';
+  } = $props();
+
+  const copy = $derived.by(() => {
+    switch (variant) {
+      case 'building':    return 'Building your daily mix…';
+      case 'failed':      return 'Couldn't build this mix. Retrying soon.';
+      case 'seed-needed': return 'Listen to more variety to unlock this slot.';
+      default:            return 'Listen to a few tracks — appears within 24h.';
+    }
+  });
+
+  // animate-pulse on the cover area only when in_flight (variant='building').
+  // Other variants are static so failure/empty states don't read as "active".
+  const coverClasses = $derived(
+    'aspect-square w-full overflow-hidden rounded-md bg-surface-hover ' +
+    'flex items-center justify-center text-text-muted ' +
+    (variant === 'building' ? 'animate-pulse' : '')
+  );
+</script>
+
+<div class="flex w-full flex-col items-start gap-2 rounded-md p-2 text-left" data-testid="playlist-placeholder-card" data-variant={variant}>
+  <div class={coverClasses}>
+    <Sparkles size={40} strokeWidth={1} />
+  </div>
+  <div class="w-full min-w-0">
+    <div class="truncate text-sm font-medium text-text-primary">{label}</div>
+    <div class="truncate text-xs text-text-muted">{copy}</div>
+  </div>
+</div>
@@ -0,0 +1,34 @@
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import PlaylistPlaceholderCard from './PlaylistPlaceholderCard.svelte';
+
+describe('PlaylistPlaceholderCard', () => {
+  test('renders label', () => {
+    render(PlaylistPlaceholderCard, { props: { label: 'For You', variant: 'pending' } });
+    expect(screen.getByText('For You')).toBeInTheDocument();
+  });
+
+  test('building variant shows building copy and pulses', () => {
+    const { container } = render(PlaylistPlaceholderCard, { props: { label: 'For You', variant: 'building' } });
+    expect(screen.getByText(/Building your daily mix/i)).toBeInTheDocument();
+    const cover = container.querySelector('[data-variant="building"] .aspect-square');
+    expect(cover?.className).toMatch(/animate-pulse/);
+  });
+
+  test('failed variant shows failure copy and does NOT pulse', () => {
+    const { container } = render(PlaylistPlaceholderCard, { props: { label: 'For You', variant: 'failed' } });
+    expect(screen.getByText(/Couldn't build this mix/i)).toBeInTheDocument();
+    const cover = container.querySelector('[data-variant="failed"] .aspect-square');
+    expect(cover?.className).not.toMatch(/animate-pulse/);
+  });
+
+  test('seed-needed variant shows variety copy', () => {
+    render(PlaylistPlaceholderCard, { props: { label: 'Songs like…', variant: 'seed-needed' } });
+    expect(screen.getByText(/Listen to more variety/i)).toBeInTheDocument();
+  });
+
+  test('pending variant (default) shows the within-24h copy', () => {
+    render(PlaylistPlaceholderCard, { props: { label: 'For You' } });
+    expect(screen.getByText(/within 24h/i)).toBeInTheDocument();
+  });
+});