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

web/src/routes/discover/+page.svelte

@@ -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>
 

web/src/routes/discover/discover.test.ts

@@ -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', {