feat(web): suggestion feed on /discover (search-empty default)

2026-05-01 06:51:41 -04:00
parent 7f18a04161
commit 2f3326aee6
4 changed files with 272 additions and 56 deletions
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import { createSuggestionsQuery } from '$lib/api/suggestions';
+  import { createRequest } from '$lib/api/requests';
+  import { qk } from '$lib/api/queries';
+  import DiscoverResultCard from './DiscoverResultCard.svelte';
+  import type { ArtistSuggestion, SeedContribution } from '$lib/api/types';
+
+  const client = useQueryClient();
+  const queryStore = createSuggestionsQuery();
+  const query = $derived($queryStore);
+  const suggestions = $derived((query.data ?? []) as ArtistSuggestion[]);
+
+  // Track MBIDs the user just requested so the card flips immediately.
+  let optimisticRequested = $state(new Set<string>());
+
+  function visible(s: ArtistSuggestion): boolean {
+    return !optimisticRequested.has(s.mbid);
+  }
+
+  function attributionText(attribution: SeedContribution[]): string {
+    if (attribution.length === 0) return '';
+    const verb = (s: SeedContribution) => (s.is_liked ? 'liked' : 'played');
+    const phrases = attribution.map((s) => `${verb(s)} ${s.name}`);
+    if (phrases.length === 1) {
+      return `Because you ${phrases[0]}.`;
+    }
+    if (phrases.length === 2) {
+      return `Because you ${phrases[0]} and ${phrases[1]}.`;
+    }
+    // 3 with Oxford comma
+    return `Because you ${phrases[0]}, ${phrases[1]}, and ${phrases[2]}.`;
+  }
+
+  async function onRequest(s: ArtistSuggestion) {
+    try {
+      await createRequest({
+        kind: 'artist',
+        lidarr_artist_mbid: s.mbid,
+        artist_name: s.name
+      });
+      const next = new Set(optimisticRequested);
+      next.add(s.mbid);
+      optimisticRequested = next;
+      // The server-side filter hides this candidate on next refetch.
+      await client.invalidateQueries({ queryKey: qk.suggestions() });
+    } catch {
+      // Swallow for v1; the SPA will refetch on next mount and the card
+      // stays requestable so the user can retry.
+    }
+  }
+</script>
+
+<div>
+  <header class="mb-4 space-y-1">
+    <h2 class="font-display text-2xl font-medium text-text-primary">Suggested for you</h2>
+    <p class="text-text-secondary">Out-of-library artists drawn from what you've liked and played.</p>
+  </header>
+
+  {#if !query.isPending && suggestions.length === 0}
+    <p class="text-text-secondary">Listen to something or like an artist to start getting suggestions.</p>
+  {:else if suggestions.length > 0}
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+      {#each suggestions.filter(visible) as s (s.mbid)}
+        <DiscoverResultCard
+          kind="artist"
+          title={s.name}
+          state="requestable"
+          attribution={attributionText(s.attribution)}
+          onRequest={() => onRequest(s)}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
@@ -0,0 +1,109 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { mockQuery } from '../../test-utils/query';
+
+const invalidateMock = vi.fn();
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({ invalidateQueries: invalidateMock }) };
+});
+
+vi.mock('$lib/api/suggestions', () => ({
+  createSuggestionsQuery: vi.fn()
+}));
+
+vi.mock('$lib/api/requests', () => ({
+  createRequest: vi.fn().mockResolvedValue({})
+}));
+
+import SuggestionFeed from './SuggestionFeed.svelte';
+import { createSuggestionsQuery } from '$lib/api/suggestions';
+import { createRequest } from '$lib/api/requests';
+import type { ArtistSuggestion } from '$lib/api/types';
+
+const oneSeed: ArtistSuggestion = {
+  mbid: 'mb1',
+  name: 'Outsider',
+  score: 1.0,
+  attribution: [
+    { artist_id: 'a1', name: 'Seed', contribution: 0.9, is_liked: true, play_count: 0 }
+  ]
+};
+
+const twoSeeds: ArtistSuggestion = {
+  mbid: 'mb2',
+  name: 'Outsider Two',
+  score: 2.0,
+  attribution: [
+    { artist_id: 'a1', name: 'A', contribution: 0.8, is_liked: true, play_count: 0 },
+    { artist_id: 'a2', name: 'B', contribution: 0.5, is_liked: false, play_count: 3 }
+  ]
+};
+
+const threeSeeds: ArtistSuggestion = {
+  mbid: 'mb3',
+  name: 'Outsider Three',
+  score: 3.0,
+  attribution: [
+    { artist_id: 'a1', name: 'X', contribution: 0.9, is_liked: true, play_count: 0 },
+    { artist_id: 'a2', name: 'Y', contribution: 0.6, is_liked: false, play_count: 5 },
+    { artist_id: 'a3', name: 'Z', contribution: 0.3, is_liked: false, play_count: 1 }
+  ]
+};
+
+afterEach(() => vi.clearAllMocks());
+
+describe('SuggestionFeed', () => {
+  test('renders one card per suggestion', () => {
+    (createSuggestionsQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockQuery({ data: [oneSeed, twoSeeds] })
+    );
+    render(SuggestionFeed);
+    expect(screen.getByText('Outsider')).toBeInTheDocument();
+    expect(screen.getByText('Outsider Two')).toBeInTheDocument();
+  });
+
+  test('attribution copy: 1 seed → "Because you liked X."', () => {
+    (createSuggestionsQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockQuery({ data: [oneSeed] })
+    );
+    render(SuggestionFeed);
+    expect(screen.getByText(/because you liked seed\./i)).toBeInTheDocument();
+  });
+
+  test('attribution copy: 2 seeds → "Because you liked A and played B."', () => {
+    (createSuggestionsQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockQuery({ data: [twoSeeds] })
+    );
+    render(SuggestionFeed);
+    expect(screen.getByText(/because you liked a and played b\./i)).toBeInTheDocument();
+  });
+
+  test('attribution copy: 3 seeds → Oxford comma', () => {
+    (createSuggestionsQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockQuery({ data: [threeSeeds] })
+    );
+    render(SuggestionFeed);
+    expect(screen.getByText(/because you liked x, played y, and played z\./i)).toBeInTheDocument();
+  });
+
+  test('Request button calls createRequest with artist-kind body', async () => {
+    (createSuggestionsQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockQuery({ data: [oneSeed] })
+    );
+    render(SuggestionFeed);
+    await fireEvent.click(screen.getByRole('button', { name: /request outsider/i }));
+    expect(createRequest).toHaveBeenCalledWith({
+      kind: 'artist',
+      lidarr_artist_mbid: 'mb1',
+      artist_name: 'Outsider'
+    });
+    expect(invalidateMock).toHaveBeenCalled();
+  });
+
+  test('empty state when data is []', () => {
+    (createSuggestionsQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [] }));
+    render(SuggestionFeed);
+    expect(screen.getByText(/listen to something or like an artist/i)).toBeInTheDocument();
+  });
+});
@@ -3,6 +3,7 @@
  import { createRequest } from '$lib/api/requests';
  import DiscoverResultCard from '$lib/components/DiscoverResultCard.svelte';
  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
+  import SuggestionFeed from '$lib/components/SuggestionFeed.svelte';
  import type {
    LidarrRequestKind,
    LidarrSearchResult
@@ -114,15 +115,6 @@
 </script>

 <div class="space-y-6">
-  <header class="space-y-1">
-    <h2 class="font-display text-2xl font-medium text-text-primary">
-      Add music to the library
-    </h2>
-    <p class="text-text-secondary">
-      Search Lidarr to add new artists, albums, or tracks.
-    </p>
-  </header>
-
  <input
    type="search"
    aria-label="Search Lidarr"
@@ -131,48 +123,57 @@
    class="w-full rounded-md border border-border bg-background px-3 py-2 text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
  />

-  <nav aria-label="Result kind" class="border-b border-border">
-    <ul class="flex gap-2">
-      {#each tabs as tab (tab.kind)}
-        <li>
-          <button
-            type="button"
-            aria-pressed={activeKind === tab.kind}
-            class="border-b-2 px-3 py-2 text-sm {activeKind === tab.kind
-              ? 'border-accent text-text-primary'
-              : 'border-transparent text-text-secondary hover:text-text-primary'}"
-            onclick={() => (activeKind = tab.kind)}
-          >
-            {tab.label}
-          </button>
-        </li>
-      {/each}
-    </ul>
-  </nav>
-
-  {#if !debouncedQ}
-    <p class="text-text-secondary">
-      Search Lidarr for music to add to the library.
-    </p>
-  {:else if query.isError}
-    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
-  {:else if query.isPending}
-    <p class="text-text-secondary">Searching…</p>
-  {:else if results.length === 0}
-    <p class="text-text-secondary">Nothing to add for that search yet.</p>
+  {#if debouncedQ === ''}
+    <SuggestionFeed />
  {:else}
-    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-      {#each results as r (r.mbid)}
-        <DiscoverResultCard
-          kind={activeKind}
-          title={r.name}
-          subtitle={r.secondary_text}
-          imageUrl={r.image_url || undefined}
-          state={cardState(r)}
-          onRequest={() => handleRequestClick(r)}
-        />
-      {/each}
-    </div>
+    <header class="space-y-1">
+      <h2 class="font-display text-2xl font-medium text-text-primary">
+        Add music to the library
+      </h2>
+      <p class="text-text-secondary">
+        Search Lidarr to add new artists, albums, or tracks.
+      </p>
+    </header>
+
+    <nav aria-label="Result kind" class="border-b border-border">
+      <ul class="flex gap-2">
+        {#each tabs as tab (tab.kind)}
+          <li>
+            <button
+              type="button"
+              aria-pressed={activeKind === tab.kind}
+              class="border-b-2 px-3 py-2 text-sm {activeKind === tab.kind
+                ? 'border-accent text-text-primary'
+                : 'border-transparent text-text-secondary hover:text-text-primary'}"
+              onclick={() => (activeKind = tab.kind)}
+            >
+              {tab.label}
+            </button>
+          </li>
+        {/each}
+      </ul>
+    </nav>
+
+    {#if query.isError}
+      <ApiErrorBanner error={query.error} onRetry={query.refetch} />
+    {:else if query.isPending}
+      <p class="text-text-secondary">Searching…</p>
+    {:else if results.length === 0}
+      <p class="text-text-secondary">Nothing to add for that search yet.</p>
+    {:else}
+      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+        {#each results as r (r.mbid)}
+          <DiscoverResultCard
+            kind={activeKind}
+            title={r.name}
+            subtitle={r.secondary_text}
+            imageUrl={r.image_url || undefined}
+            state={cardState(r)}
+            onRequest={() => handleRequestClick(r)}
+          />
+        {/each}
+      </div>
+    {/if}
  {/if}
 </div>

@@ -10,6 +10,10 @@ vi.mock('$lib/api/lidarr', () => ({
  createLidarrSearchQuery: vi.fn()
 }));

+vi.mock('$lib/api/suggestions', () => ({
+  createSuggestionsQuery: vi.fn()
+}));
+
 vi.mock('$lib/api/requests', () => ({
  createRequest: vi.fn().mockResolvedValue({ id: 'r1' })
 }));
@@ -25,9 +29,11 @@ vi.mock('@tanstack/svelte-query', async (orig) => {

 import DiscoverPage from './+page.svelte';
 import { createLidarrSearchQuery } from '$lib/api/lidarr';
+import { createSuggestionsQuery } from '$lib/api/suggestions';
 import { createRequest } from '$lib/api/requests';

 const mockedCreateQuery = createLidarrSearchQuery as ReturnType<typeof vi.fn>;
+const mockedCreateSuggestionsQuery = createSuggestionsQuery as ReturnType<typeof vi.fn>;
 const mockedCreateRequest = createRequest as ReturnType<typeof vi.fn>;

 function result(over: Partial<LidarrSearchResult> = {}): LidarrSearchResult {
@@ -47,6 +53,9 @@ function result(over: Partial<LidarrSearchResult> = {}): LidarrSearchResult {
 beforeEach(() => {
  // Default: empty results, non-pending. Tests override per-case.
  mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [] }));
+  // Default: empty suggestion feed so its empty-state copy renders without
+  // interfering with search-mode tests.
+  mockedCreateSuggestionsQuery.mockReturnValue(mockQuery({ data: [] }));
 });

 afterEach(() => {
@@ -54,11 +63,31 @@ afterEach(() => {
 });

 describe('Discover page', () => {
-  test('initial state (no query) shows the search prompt copy', () => {
+  test('initial state (no query) shows the suggestion feed', () => {
    render(DiscoverPage);
+    expect(screen.getByText(/suggested for you/i)).toBeInTheDocument();
+  });
+
+  test('empty input shows the suggestion feed', () => {
+    render(DiscoverPage);
+    expect(screen.getByText(/suggested for you/i)).toBeInTheDocument();
+    // Kind tabs should NOT be visible when input is empty.
    expect(
-      screen.getByText(/search lidarr for music to add/i)
-    ).toBeInTheDocument();
+      screen.queryByRole('button', { name: 'Artists' })
+    ).not.toBeInTheDocument();
+  });
+
+  test('typing replaces feed with search', async () => {
+    vi.useFakeTimers();
+    render(DiscoverPage);
+    const input = screen.getByLabelText(/search lidarr/i);
+    await fireEvent.input(input, { target: { value: 'miles' } });
+    await vi.advanceTimersByTimeAsync(250);
+    expect(screen.queryByText(/suggested for you/i)).not.toBeInTheDocument();
+    expect(screen.getByText(/add music to the library/i)).toBeInTheDocument();
+    // Kind tabs visible when searching.
+    expect(screen.getByRole('button', { name: 'Artists' })).toBeInTheDocument();
+    vi.useRealTimers();
  });

  test('debounced input fires query factory with typed value after 250ms', async () => {
@@ -165,11 +194,13 @@ describe('Discover page', () => {
    });
    mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [r] }));
    render(DiscoverPage);
-    // Switch to track kind first.
-    await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
+    // Type first so the kind tabs become visible (empty-input mode shows the
+    // suggestion feed and hides tabs).
    const input = screen.getByLabelText(/search lidarr/i);
    await fireEvent.input(input, { target: { value: 'roy' } });
    await vi.advanceTimersByTimeAsync(250);
+    // Switch to track kind.
+    await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
    vi.useRealTimers();

    const requestBtn = await screen.findByRole('button', {
@@ -204,10 +235,10 @@ describe('Discover page', () => {
    });
    mockedCreateQuery.mockReturnValue(mockQuery<LidarrSearchResult[]>({ data: [r] }));
    render(DiscoverPage);
-    await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
    const input = screen.getByLabelText(/search lidarr/i);
    await fireEvent.input(input, { target: { value: 'roy' } });
    await vi.advanceTimersByTimeAsync(250);
+    await fireEvent.click(screen.getByRole('button', { name: 'Tracks' }));
    vi.useRealTimers();

    const requestBtn = await screen.findByRole('button', {