bvandeusen/minstrel
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 40 Wiki Activity

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

Browse Source
This commit is contained in:
Bryan Van Deusen
2026-05-01 06:51:41 -04:00
parent 7f18a04161
commit 2f3326aee6
4 changed files with 272 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/discover/+page.svelte
+51 -50
View File
@@ -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>