feat(web): add three search overflow pages
/search/artists, /search/albums, /search/tracks each read ?q= and run their own createSearchInfiniteQuery (limit=50). Load more pulls the next offset; back link returns to /search?q=. Empty q shows a 'no query' prompt and fires no request. Tracks overflow uses the onPlay prop on TrackRow to call playRadio(track.id).
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { createSearchAlbumsInfiniteQuery } from '$lib/api/queries';
|
||||
import AlbumCard from '$lib/components/AlbumCard.svelte';
|
||||
import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
|
||||
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
|
||||
import { useDelayed } from '$lib/utils/useDelayed.svelte';
|
||||
|
||||
const q = $derived((page.url.searchParams.get('q') ?? '').trim());
|
||||
const queryStore = $derived(q ? createSearchAlbumsInfiniteQuery(q) : null);
|
||||
const query = $derived(queryStore ? $queryStore : null);
|
||||
|
||||
const albums = $derived(query?.data?.pages?.flatMap((p) => p.items) ?? []);
|
||||
const total = $derived(query?.data?.pages?.[0]?.total ?? 0);
|
||||
const showSkeleton = useDelayed(() => !!query?.isPending);
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<header>
|
||||
<a href={`/search?q=${encodeURIComponent(q)}`} class="text-sm text-text-secondary hover:text-text-primary">
|
||||
← Back to search
|
||||
</a>
|
||||
<h1 class="mt-2 text-2xl font-semibold">Albums matching '{q}'</h1>
|
||||
{#if !query?.isPending && !query?.isError && q}
|
||||
<p class="text-sm text-text-secondary">{total} {total === 1 ? 'album' : 'albums'}</p>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#if !q}
|
||||
<p class="text-text-secondary">No query — return to search to start typing.</p>
|
||||
{:else if query?.isError}
|
||||
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
|
||||
{:else if showSkeleton.value && albums.length === 0}
|
||||
<LibrarySkeleton variant="grid" count={12} />
|
||||
{:else if total === 0}
|
||||
<p class="text-text-secondary">No album matches.</p>
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
{#each albums as a (a.id)}
|
||||
<AlbumCard album={a} />
|
||||
{/each}
|
||||
</div>
|
||||
{#if query?.hasNextPage}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
|
||||
disabled={query.isFetchingNextPage}
|
||||
onclick={() => query.fetchNextPage()}
|
||||
>
|
||||
{query.isFetchingNextPage ? 'Loading…' : 'Load more'}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,68 @@
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
import { mockInfiniteQuery } from '../../../test-utils/query';
|
||||
import type { AlbumRef, Page } from '$lib/api/types';
|
||||
|
||||
const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/albums?q=miles') }));
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { get url() { return state.pageUrl; } }
|
||||
}));
|
||||
|
||||
vi.mock('$lib/api/queries', () => ({
|
||||
createSearchAlbumsInfiniteQuery: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock('$lib/api/client', () => ({
|
||||
api: { get: vi.fn() }
|
||||
}));
|
||||
vi.mock('$lib/player/store.svelte', () => ({
|
||||
enqueueTracks: vi.fn()
|
||||
}));
|
||||
|
||||
import AlbumsOverflow from './+page.svelte';
|
||||
import { createSearchAlbumsInfiniteQuery } from '$lib/api/queries';
|
||||
|
||||
function page<T>(items: T[], total: number, offset = 0, limit = 50): Page<T> {
|
||||
return { items, total, offset, limit };
|
||||
}
|
||||
|
||||
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'
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
state.pageUrl = new URL('http://localhost/search/albums?q=miles');
|
||||
});
|
||||
|
||||
describe('search albums overflow', () => {
|
||||
test('renders an AlbumCard per album', () => {
|
||||
(createSearchAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page([album], 1)] })
|
||||
);
|
||||
render(AlbumsOverflow);
|
||||
expect(screen.getByRole('link', { name: /Kind of Blue/ })).toHaveAttribute('href', '/albums/al1');
|
||||
});
|
||||
|
||||
test('Load more calls fetchNextPage', async () => {
|
||||
const fetchNextPage = vi.fn();
|
||||
(createSearchAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({
|
||||
pages: [page<AlbumRef>([], 100)],
|
||||
hasNextPage: true,
|
||||
fetchNextPage
|
||||
})
|
||||
);
|
||||
render(AlbumsOverflow);
|
||||
await fireEvent.click(screen.getByRole('button', { name: /load more/i }));
|
||||
expect(fetchNextPage).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('empty q shows a prompt', () => {
|
||||
state.pageUrl = new URL('http://localhost/search/albums');
|
||||
render(AlbumsOverflow);
|
||||
expect(screen.getByText(/no query/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { createSearchArtistsInfiniteQuery } from '$lib/api/queries';
|
||||
import ArtistRow from '$lib/components/ArtistRow.svelte';
|
||||
import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
|
||||
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
|
||||
import { useDelayed } from '$lib/utils/useDelayed.svelte';
|
||||
|
||||
const q = $derived((page.url.searchParams.get('q') ?? '').trim());
|
||||
const queryStore = $derived(q ? createSearchArtistsInfiniteQuery(q) : null);
|
||||
const query = $derived(queryStore ? $queryStore : null);
|
||||
|
||||
const artists = $derived(query?.data?.pages?.flatMap((p) => p.items) ?? []);
|
||||
const total = $derived(query?.data?.pages?.[0]?.total ?? 0);
|
||||
const showSkeleton = useDelayed(() => !!query?.isPending);
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<header>
|
||||
<a href={`/search?q=${encodeURIComponent(q)}`} class="text-sm text-text-secondary hover:text-text-primary">
|
||||
← Back to search
|
||||
</a>
|
||||
<h1 class="mt-2 text-2xl font-semibold">Artists matching '{q}'</h1>
|
||||
{#if !query?.isPending && !query?.isError && q}
|
||||
<p class="text-sm text-text-secondary">{total} {total === 1 ? 'artist' : 'artists'}</p>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#if !q}
|
||||
<p class="text-text-secondary">No query — return to search to start typing.</p>
|
||||
{:else if query?.isError}
|
||||
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
|
||||
{:else if showSkeleton.value && artists.length === 0}
|
||||
<LibrarySkeleton variant="list" count={12} />
|
||||
{:else if total === 0}
|
||||
<p class="text-text-secondary">No artist matches.</p>
|
||||
{:else}
|
||||
<div>
|
||||
{#each artists as a (a.id)}
|
||||
<ArtistRow artist={a} />
|
||||
{/each}
|
||||
</div>
|
||||
{#if query?.hasNextPage}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
|
||||
disabled={query.isFetchingNextPage}
|
||||
onclick={() => query.fetchNextPage()}
|
||||
>
|
||||
{query.isFetchingNextPage ? 'Loading…' : 'Load more'}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,68 @@
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
import { mockInfiniteQuery } from '../../../test-utils/query';
|
||||
import type { ArtistRef, Page } from '$lib/api/types';
|
||||
|
||||
const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/artists?q=miles') }));
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { get url() { return state.pageUrl; } }
|
||||
}));
|
||||
|
||||
vi.mock('$lib/api/queries', () => ({
|
||||
createSearchArtistsInfiniteQuery: vi.fn()
|
||||
}));
|
||||
|
||||
import ArtistsOverflow from './+page.svelte';
|
||||
import { createSearchArtistsInfiniteQuery } from '$lib/api/queries';
|
||||
|
||||
function page<T>(items: T[], total: number, offset = 0, limit = 50): Page<T> {
|
||||
return { items, total, offset, limit };
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
state.pageUrl = new URL('http://localhost/search/artists?q=miles');
|
||||
});
|
||||
|
||||
describe('search artists overflow', () => {
|
||||
test('renders a row per artist', () => {
|
||||
const a1: ArtistRef = { id: 'a1', name: 'Miles Davis', album_count: 12 };
|
||||
const a2: ArtistRef = { id: 'a2', name: 'Miles Mosley', album_count: 1 };
|
||||
(createSearchArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page([a1, a2], 2)] })
|
||||
);
|
||||
render(ArtistsOverflow);
|
||||
expect(screen.getByRole('link', { name: /Miles Davis/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /Miles Mosley/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Load more calls fetchNextPage when hasNextPage', async () => {
|
||||
const fetchNextPage = vi.fn();
|
||||
(createSearchArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({
|
||||
pages: [page<ArtistRef>([], 100)],
|
||||
hasNextPage: true,
|
||||
fetchNextPage
|
||||
})
|
||||
);
|
||||
render(ArtistsOverflow);
|
||||
await fireEvent.click(screen.getByRole('button', { name: /load more/i }));
|
||||
expect(fetchNextPage).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('Load more is hidden when hasNextPage is false', () => {
|
||||
(createSearchArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page<ArtistRef>([{ id: 'a', name: 'A', album_count: 1 }], 1)] })
|
||||
);
|
||||
render(ArtistsOverflow);
|
||||
expect(screen.queryByRole('button', { name: /load more/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('empty q shows a prompt and fires no query', () => {
|
||||
state.pageUrl = new URL('http://localhost/search/artists');
|
||||
render(ArtistsOverflow);
|
||||
expect(screen.getByText(/no query/i)).toBeInTheDocument();
|
||||
expect(createSearchArtistsInfiniteQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { createSearchTracksInfiniteQuery } from '$lib/api/queries';
|
||||
import TrackRow from '$lib/components/TrackRow.svelte';
|
||||
import LibrarySkeleton from '$lib/components/LibrarySkeleton.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 ? createSearchTracksInfiniteQuery(q) : null);
|
||||
const query = $derived(queryStore ? $queryStore : null);
|
||||
|
||||
const tracks = $derived(query?.data?.pages?.flatMap((p) => p.items) ?? []);
|
||||
const total = $derived(query?.data?.pages?.[0]?.total ?? 0);
|
||||
const showSkeleton = useDelayed(() => !!query?.isPending);
|
||||
|
||||
function onTrackPlay(_tracks: TrackRef[], index: number) {
|
||||
playRadio(_tracks[index].id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<header>
|
||||
<a href={`/search?q=${encodeURIComponent(q)}`} class="text-sm text-text-secondary hover:text-text-primary">
|
||||
← Back to search
|
||||
</a>
|
||||
<h1 class="mt-2 text-2xl font-semibold">Tracks matching '{q}'</h1>
|
||||
{#if !query?.isPending && !query?.isError && q}
|
||||
<p class="text-sm text-text-secondary">{total} {total === 1 ? 'track' : 'tracks'}</p>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#if !q}
|
||||
<p class="text-text-secondary">No query — return to search to start typing.</p>
|
||||
{:else if query?.isError}
|
||||
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
|
||||
{:else if showSkeleton.value && tracks.length === 0}
|
||||
<LibrarySkeleton variant="list" count={12} />
|
||||
{:else if total === 0}
|
||||
<p class="text-text-secondary">No track matches.</p>
|
||||
{:else}
|
||||
<div class="overflow-hidden rounded border border-border">
|
||||
{#each tracks as t, i (t.id)}
|
||||
<TrackRow tracks={tracks} index={i} onPlay={onTrackPlay} />
|
||||
{/each}
|
||||
</div>
|
||||
{#if query?.hasNextPage}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
|
||||
disabled={query.isFetchingNextPage}
|
||||
onclick={() => query.fetchNextPage()}
|
||||
>
|
||||
{query.isFetchingNextPage ? 'Loading…' : 'Load more'}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,80 @@
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
import { mockInfiniteQuery } from '../../../test-utils/query';
|
||||
import type { TrackRef, Page } from '$lib/api/types';
|
||||
|
||||
const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/tracks?q=miles') }));
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { get url() { return state.pageUrl; } }
|
||||
}));
|
||||
|
||||
vi.mock('$lib/api/queries', () => ({
|
||||
createSearchTracksInfiniteQuery: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock('$lib/player/store.svelte', () => ({
|
||||
playQueue: vi.fn(),
|
||||
playRadio: vi.fn(),
|
||||
enqueueTrack: vi.fn()
|
||||
}));
|
||||
|
||||
import TracksOverflow from './+page.svelte';
|
||||
import { createSearchTracksInfiniteQuery } from '$lib/api/queries';
|
||||
import { playRadio } from '$lib/player/store.svelte';
|
||||
|
||||
function page<T>(items: T[], total: number, offset = 0, limit = 50): Page<T> {
|
||||
return { items, total, offset, limit };
|
||||
}
|
||||
|
||||
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/tracks?q=miles');
|
||||
});
|
||||
|
||||
describe('search tracks overflow', () => {
|
||||
test('renders a TrackRow per track', () => {
|
||||
(createSearchTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page([track], 1)] })
|
||||
);
|
||||
render(TracksOverflow);
|
||||
expect(screen.getByRole('button', { name: /So What/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('clicking a track row triggers playRadio with the track id', async () => {
|
||||
(createSearchTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page([track], 1)] })
|
||||
);
|
||||
render(TracksOverflow);
|
||||
await fireEvent.click(screen.getByRole('button', { name: /So What/ }));
|
||||
expect(playRadio).toHaveBeenCalledWith('t1');
|
||||
});
|
||||
|
||||
test('Load more calls fetchNextPage', async () => {
|
||||
const fetchNextPage = vi.fn();
|
||||
(createSearchTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({
|
||||
pages: [page<TrackRef>([], 100)],
|
||||
hasNextPage: true,
|
||||
fetchNextPage
|
||||
})
|
||||
);
|
||||
render(TracksOverflow);
|
||||
await fireEvent.click(screen.getByRole('button', { name: /load more/i }));
|
||||
expect(fetchNextPage).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('empty q shows a prompt', () => {
|
||||
state.pageUrl = new URL('http://localhost/search/tracks');
|
||||
render(TracksOverflow);
|
||||
expect(screen.getByText(/no query/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user