feat(web): /search page with three sections + see-all overflow links
Reads ?q= reactively; runs createSearchQuery (limit=10) when q is non-empty. Renders Artists/Albums/Tracks sections reusing ArtistRow, AlbumCard, TrackRow. Track click uses onPlay prop to call playRadio(track.id) instead of the default playQueue. Empty facets hide; 'See all N →' link points to overflow pages when total > items. Empty q shows 'Start typing'; error → ApiErrorBanner; loading → SearchSkeleton via useDelayed.
This commit is contained in:
@@ -1,2 +1,112 @@
|
||||
<h1 class="text-2xl font-semibold">Search</h1>
|
||||
<p class="mt-2 text-text-secondary">Search lands in a subsequent plan.</p>
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { createSearchQuery } from '$lib/api/queries';
|
||||
import ArtistRow from '$lib/components/ArtistRow.svelte';
|
||||
import AlbumCard from '$lib/components/AlbumCard.svelte';
|
||||
import TrackRow from '$lib/components/TrackRow.svelte';
|
||||
import SearchSkeleton from '$lib/components/SearchSkeleton.svelte';
|
||||
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
|
||||
import { useDelayed } from '$lib/utils/useDelayed.svelte';
|
||||
import { playRadio } from '$lib/player/store.svelte';
|
||||
import type { TrackRef } from '$lib/api/types';
|
||||
|
||||
const q = $derived((page.url.searchParams.get('q') ?? '').trim());
|
||||
const queryStore = $derived(q ? createSearchQuery(q) : null);
|
||||
const query = $derived(queryStore ? $queryStore : null);
|
||||
|
||||
const artists = $derived(query?.data?.artists);
|
||||
const albums = $derived(query?.data?.albums);
|
||||
const tracks = $derived(query?.data?.tracks);
|
||||
|
||||
const allEmpty = $derived(
|
||||
!!query?.data &&
|
||||
artists?.items.length === 0 &&
|
||||
albums?.items.length === 0 &&
|
||||
tracks?.items.length === 0
|
||||
);
|
||||
|
||||
const showSkeleton = useDelayed(() => !!query?.isPending);
|
||||
|
||||
function onTrackPlay(_tracks: TrackRef[], index: number) {
|
||||
playRadio(_tracks[index].id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
{#if !q}
|
||||
<p class="text-text-secondary">
|
||||
Start typing to search artists, albums, and tracks.
|
||||
</p>
|
||||
{:else if query?.isError}
|
||||
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
|
||||
{:else if showSkeleton.value && !query?.data}
|
||||
<SearchSkeleton />
|
||||
{:else if allEmpty}
|
||||
<p class="text-text-secondary">
|
||||
No matches for <span class="font-medium">'{q}'</span>.
|
||||
</p>
|
||||
{:else if query?.data}
|
||||
{#if artists && artists.items.length > 0}
|
||||
<section>
|
||||
<header class="mb-2 flex items-baseline justify-between">
|
||||
<h2 class="text-lg font-semibold">Artists</h2>
|
||||
{#if artists.total > artists.items.length}
|
||||
<a
|
||||
href={`/search/artists?q=${encodeURIComponent(q)}`}
|
||||
class="text-sm text-accent hover:underline"
|
||||
>
|
||||
See all {artists.total} →
|
||||
</a>
|
||||
{/if}
|
||||
</header>
|
||||
<div>
|
||||
{#each artists.items as a (a.id)}
|
||||
<ArtistRow artist={a} />
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if albums && albums.items.length > 0}
|
||||
<section>
|
||||
<header class="mb-2 flex items-baseline justify-between">
|
||||
<h2 class="text-lg font-semibold">Albums</h2>
|
||||
{#if albums.total > albums.items.length}
|
||||
<a
|
||||
href={`/search/albums?q=${encodeURIComponent(q)}`}
|
||||
class="text-sm text-accent hover:underline"
|
||||
>
|
||||
See all {albums.total} →
|
||||
</a>
|
||||
{/if}
|
||||
</header>
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
{#each albums.items as al (al.id)}
|
||||
<AlbumCard album={al} />
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tracks && tracks.items.length > 0}
|
||||
<section>
|
||||
<header class="mb-2 flex items-baseline justify-between">
|
||||
<h2 class="text-lg font-semibold">Tracks</h2>
|
||||
{#if tracks.total > tracks.items.length}
|
||||
<a
|
||||
href={`/search/tracks?q=${encodeURIComponent(q)}`}
|
||||
class="text-sm text-accent hover:underline"
|
||||
>
|
||||
See all {tracks.total} →
|
||||
</a>
|
||||
{/if}
|
||||
</header>
|
||||
<div class="overflow-hidden rounded border border-border">
|
||||
{#each tracks.items as t, i (t.id)}
|
||||
<TrackRow tracks={tracks.items} index={i} onPlay={onTrackPlay} />
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/svelte';
|
||||
import { mockQuery } from '../../test-utils/query';
|
||||
import type { ArtistRef, AlbumRef, TrackRef, SearchResponse } from '$lib/api/types';
|
||||
|
||||
const state = vi.hoisted(() => ({
|
||||
pageUrl: new URL('http://localhost/search')
|
||||
}));
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { get url() { return state.pageUrl; } }
|
||||
}));
|
||||
|
||||
vi.mock('$lib/api/queries', () => ({
|
||||
createSearchQuery: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock('$lib/player/store.svelte', () => ({
|
||||
playQueue: vi.fn(),
|
||||
playRadio: vi.fn(),
|
||||
enqueueTrack: vi.fn(),
|
||||
enqueueTracks: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock('$lib/api/client', () => ({
|
||||
api: { get: vi.fn() }
|
||||
}));
|
||||
|
||||
import SearchPage from './+page.svelte';
|
||||
import { createSearchQuery } from '$lib/api/queries';
|
||||
|
||||
function emptyResp(): SearchResponse {
|
||||
return {
|
||||
artists: { items: [], total: 0, limit: 10, offset: 0 },
|
||||
albums: { items: [], total: 0, limit: 10, offset: 0 },
|
||||
tracks: { items: [], total: 0, limit: 10, offset: 0 }
|
||||
};
|
||||
}
|
||||
|
||||
const artist: ArtistRef = { id: 'a1', name: 'Miles Davis', album_count: 12 };
|
||||
const album: AlbumRef = {
|
||||
id: 'al1', title: 'Kind of Blue', artist_id: 'a1', artist_name: 'Miles Davis',
|
||||
year: 1959, track_count: 5, duration_sec: 2630, cover_url: '/api/albums/al1/cover'
|
||||
};
|
||||
const track: TrackRef = {
|
||||
id: 't1', title: 'So What',
|
||||
album_id: 'al1', album_title: 'Kind of Blue',
|
||||
artist_id: 'a1', artist_name: 'Miles Davis',
|
||||
track_number: 1, disc_number: 1, duration_sec: 545,
|
||||
stream_url: '/api/tracks/t1/stream'
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
state.pageUrl = new URL('http://localhost/search');
|
||||
});
|
||||
|
||||
describe('search page', () => {
|
||||
test('empty ?q= shows the "Start typing" prompt and fires no query', () => {
|
||||
state.pageUrl = new URL('http://localhost/search');
|
||||
render(SearchPage);
|
||||
expect(screen.getByText(/start typing/i)).toBeInTheDocument();
|
||||
expect(createSearchQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('all three sections render when all three facets have items', () => {
|
||||
state.pageUrl = new URL('http://localhost/search?q=miles');
|
||||
const resp: SearchResponse = {
|
||||
...emptyResp(),
|
||||
artists: { items: [artist], total: 1, limit: 10, offset: 0 },
|
||||
albums: { items: [album], total: 1, limit: 10, offset: 0 },
|
||||
tracks: { items: [track], total: 1, limit: 10, offset: 0 }
|
||||
};
|
||||
(createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: resp }));
|
||||
render(SearchPage);
|
||||
expect(screen.getByRole('heading', { name: /artists/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('heading', { name: /albums/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('heading', { name: /tracks/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('empty facets are hidden', () => {
|
||||
state.pageUrl = new URL('http://localhost/search?q=miles');
|
||||
const resp: SearchResponse = {
|
||||
...emptyResp(),
|
||||
tracks: { items: [track], total: 1, limit: 10, offset: 0 }
|
||||
};
|
||||
(createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: resp }));
|
||||
render(SearchPage);
|
||||
expect(screen.queryByRole('heading', { name: /artists/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('heading', { name: /albums/i })).not.toBeInTheDocument();
|
||||
expect(screen.getByRole('heading', { name: /tracks/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('"See all N →" link renders when total > items.length', () => {
|
||||
state.pageUrl = new URL('http://localhost/search?q=miles');
|
||||
const resp: SearchResponse = {
|
||||
...emptyResp(),
|
||||
artists: { items: [artist], total: 47, limit: 10, offset: 0 }
|
||||
};
|
||||
(createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: resp }));
|
||||
render(SearchPage);
|
||||
const link = screen.getByRole('link', { name: /see all 47/i });
|
||||
expect(link).toHaveAttribute('href', '/search/artists?q=miles');
|
||||
});
|
||||
|
||||
test('"See all" link omitted when total === items.length', () => {
|
||||
state.pageUrl = new URL('http://localhost/search?q=miles');
|
||||
const resp: SearchResponse = {
|
||||
...emptyResp(),
|
||||
tracks: { items: [track], total: 1, limit: 10, offset: 0 }
|
||||
};
|
||||
(createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: resp }));
|
||||
render(SearchPage);
|
||||
expect(screen.queryByRole('link', { name: /see all/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('all three facets empty renders "No matches"', () => {
|
||||
state.pageUrl = new URL('http://localhost/search?q=zzz');
|
||||
(createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockQuery({ data: emptyResp() })
|
||||
);
|
||||
render(SearchPage);
|
||||
expect(screen.getByText(/no matches for/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/zzz/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('error state renders ApiErrorBanner', () => {
|
||||
state.pageUrl = new URL('http://localhost/search?q=miles');
|
||||
(createSearchQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockQuery({ isError: true, error: { code: 'server_error', message: 'boom' } })
|
||||
);
|
||||
render(SearchPage);
|
||||
expect(screen.getByRole('alert')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user