feat(web): add /library/liked page with three sections
Each section is its own infinite query against /api/likes/{type}.
Empty sections show 'No liked X yet' (gated on total === 0). Reuses
ArtistRow / AlbumCard / TrackRow for rendering — same components as
the search overflow pages.
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
createLikedTracksInfiniteQuery,
|
||||
createLikedAlbumsInfiniteQuery,
|
||||
createLikedArtistsInfiniteQuery
|
||||
} from '$lib/api/likes';
|
||||
import ArtistRow from '$lib/components/ArtistRow.svelte';
|
||||
import AlbumCard from '$lib/components/AlbumCard.svelte';
|
||||
import TrackRow from '$lib/components/TrackRow.svelte';
|
||||
|
||||
const artistsStore = $derived(createLikedArtistsInfiniteQuery());
|
||||
const albumsStore = $derived(createLikedAlbumsInfiniteQuery());
|
||||
const tracksStore = $derived(createLikedTracksInfiniteQuery());
|
||||
|
||||
const artistsQuery = $derived($artistsStore);
|
||||
const albumsQuery = $derived($albumsStore);
|
||||
const tracksQuery = $derived($tracksStore);
|
||||
|
||||
const artists = $derived(artistsQuery?.data?.pages?.flatMap((p) => p.items) ?? []);
|
||||
const albums = $derived(albumsQuery?.data?.pages?.flatMap((p) => p.items) ?? []);
|
||||
const tracks = $derived(tracksQuery?.data?.pages?.flatMap((p) => p.items) ?? []);
|
||||
|
||||
const artistsTotal = $derived(artistsQuery?.data?.pages?.[0]?.total ?? 0);
|
||||
const albumsTotal = $derived(albumsQuery?.data?.pages?.[0]?.total ?? 0);
|
||||
const tracksTotal = $derived(tracksQuery?.data?.pages?.[0]?.total ?? 0);
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<h1 class="text-2xl font-semibold">Liked</h1>
|
||||
|
||||
<section>
|
||||
<h2 class="mb-2 text-lg font-semibold">Artists</h2>
|
||||
{#if artistsTotal === 0}
|
||||
<p class="text-text-secondary">No liked artists yet.</p>
|
||||
{:else}
|
||||
<div>
|
||||
{#each artists as a (a.id)}
|
||||
<ArtistRow artist={a} />
|
||||
{/each}
|
||||
</div>
|
||||
{#if artistsQuery?.hasNextPage}
|
||||
<button
|
||||
type="button"
|
||||
class="mt-2 w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
|
||||
disabled={artistsQuery.isFetchingNextPage}
|
||||
onclick={() => artistsQuery.fetchNextPage()}
|
||||
>
|
||||
{artistsQuery.isFetchingNextPage ? 'Loading…' : 'Load more'}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="mb-2 text-lg font-semibold">Albums</h2>
|
||||
{#if albumsTotal === 0}
|
||||
<p class="text-text-secondary">No liked albums yet.</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 al (al.id)}
|
||||
<AlbumCard album={al} />
|
||||
{/each}
|
||||
</div>
|
||||
{#if albumsQuery?.hasNextPage}
|
||||
<button
|
||||
type="button"
|
||||
class="mt-2 w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
|
||||
disabled={albumsQuery.isFetchingNextPage}
|
||||
onclick={() => albumsQuery.fetchNextPage()}
|
||||
>
|
||||
{albumsQuery.isFetchingNextPage ? 'Loading…' : 'Load more'}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="mb-2 text-lg font-semibold">Tracks</h2>
|
||||
{#if tracksTotal === 0}
|
||||
<p class="text-text-secondary">No liked tracks yet.</p>
|
||||
{:else}
|
||||
<div class="overflow-hidden rounded border border-border">
|
||||
{#each tracks as t, i (t.id)}
|
||||
<TrackRow tracks={tracks} index={i} />
|
||||
{/each}
|
||||
</div>
|
||||
{#if tracksQuery?.hasNextPage}
|
||||
<button
|
||||
type="button"
|
||||
class="mt-2 w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
|
||||
disabled={tracksQuery.isFetchingNextPage}
|
||||
onclick={() => tracksQuery.fetchNextPage()}
|
||||
>
|
||||
{tracksQuery.isFetchingNextPage ? 'Loading…' : 'Load more'}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,102 @@
|
||||
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, AlbumRef, TrackRef, Page } from '$lib/api/types';
|
||||
import { readable } from 'svelte/store';
|
||||
|
||||
vi.mock('$lib/api/likes', () => ({
|
||||
createLikedIdsQuery: () => readable({
|
||||
data: { track_ids: [], album_ids: [], artist_ids: [] },
|
||||
isPending: false,
|
||||
isError: false
|
||||
}),
|
||||
createLikedTracksInfiniteQuery: vi.fn(),
|
||||
createLikedAlbumsInfiniteQuery: vi.fn(),
|
||||
createLikedArtistsInfiniteQuery: vi.fn(),
|
||||
likeEntity: vi.fn(),
|
||||
unlikeEntity: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock('@tanstack/svelte-query', async (orig) => {
|
||||
const actual = (await orig()) as Record<string, unknown>;
|
||||
return { ...actual, useQueryClient: () => ({}) };
|
||||
});
|
||||
|
||||
vi.mock('$lib/api/client', () => ({ api: { get: vi.fn() } }));
|
||||
vi.mock('$lib/player/store.svelte', () => ({
|
||||
playQueue: vi.fn(), enqueueTrack: vi.fn(), enqueueTracks: vi.fn()
|
||||
}));
|
||||
|
||||
import LikedPage from './+page.svelte';
|
||||
import {
|
||||
createLikedTracksInfiniteQuery,
|
||||
createLikedAlbumsInfiniteQuery,
|
||||
createLikedArtistsInfiniteQuery
|
||||
} from '$lib/api/likes';
|
||||
|
||||
function page<T>(items: T[], total: number, offset = 0, limit = 50): Page<T> {
|
||||
return { items, total, offset, limit };
|
||||
}
|
||||
|
||||
afterEach(() => vi.clearAllMocks());
|
||||
|
||||
describe('liked library page', () => {
|
||||
test('renders three sections when each has items', () => {
|
||||
const ar: ArtistRef = { id: 'a1', name: 'X', album_count: 1 };
|
||||
const al: AlbumRef = {
|
||||
id: 'al1', title: 'Y', artist_id: 'a1', artist_name: 'X',
|
||||
year: 2020, track_count: 1, duration_sec: 100, cover_url: '/x'
|
||||
};
|
||||
const tr: TrackRef = {
|
||||
id: 't1', title: 'Z', album_id: 'al1', album_title: 'Y',
|
||||
artist_id: 'a1', artist_name: 'X',
|
||||
track_number: 1, disc_number: 1, duration_sec: 100,
|
||||
stream_url: '/api/tracks/t1/stream'
|
||||
};
|
||||
(createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page([ar], 1)] })
|
||||
);
|
||||
(createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page([al], 1)] })
|
||||
);
|
||||
(createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page([tr], 1)] })
|
||||
);
|
||||
render(LikedPage);
|
||||
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 section renders "No liked X yet" hint', () => {
|
||||
(createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page<ArtistRef>([], 0)] })
|
||||
);
|
||||
(createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page<AlbumRef>([], 0)] })
|
||||
);
|
||||
(createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page<TrackRef>([], 0)] })
|
||||
);
|
||||
render(LikedPage);
|
||||
expect(screen.getAllByText(/no liked/i)).toHaveLength(3);
|
||||
});
|
||||
|
||||
test('Load more calls fetchNextPage on each section that has more', async () => {
|
||||
const fetchTracks = vi.fn();
|
||||
(createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page<TrackRef>([], 100)], hasNextPage: true, fetchNextPage: fetchTracks })
|
||||
);
|
||||
(createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page<AlbumRef>([], 0)] })
|
||||
);
|
||||
(createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockInfiniteQuery({ pages: [page<ArtistRef>([], 0)] })
|
||||
);
|
||||
render(LikedPage);
|
||||
const buttons = screen.getAllByRole('button', { name: /load more/i });
|
||||
expect(buttons).toHaveLength(1);
|
||||
await fireEvent.click(buttons[0]);
|
||||
expect(fetchTracks).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user