feat(web/playlists): Discover refresh button (detail + home kebab)

Operator can refresh their Discover playlist without waiting for
the next daily cron tick. Two surfaces, both gated on
system_variant === 'discover':

- Detail page header: "Refresh" button next to the cover art / meta.
- Home Playlists row tile kebab: "Refresh Discover" menu item.

Both call POST /api/playlists/system/discover/refresh, show a
confirmation toast, and invalidate the playlist + playlists queries
so the new content lands without a manual page reload.

Extends Playlist.system_variant union with 'discover'. Adds
refreshDiscover() typed client. Tests cover client behaviour
(success + empty-library) plus conditional rendering on both
surfaces.
This commit is contained in:
2026-05-07 08:44:33 -04:00
parent 0ba31c7816
commit b20738f925
7 changed files with 309 additions and 8 deletions
+43 -2
View File
@@ -17,7 +17,8 @@ vi.mock('$lib/api/playlists', () => ({
updatePlaylist: vi.fn().mockResolvedValue(undefined),
deletePlaylist: vi.fn().mockResolvedValue(undefined),
removePlaylistTrack: vi.fn().mockResolvedValue(undefined),
reorderPlaylist: vi.fn().mockResolvedValue(undefined)
reorderPlaylist: vi.fn().mockResolvedValue(undefined),
refreshDiscover: vi.fn().mockResolvedValue({ playlist_id: 'p1', track_count: 5 })
}));
vi.mock('@tanstack/svelte-query', async (orig) => {
@@ -50,7 +51,7 @@ vi.mock('$lib/api/quarantine', () => ({
vi.mock('$lib/api/admin/tracks', () => ({ removeTrack: vi.fn() }));
import PlaylistDetailPage from './+page.svelte';
import { createPlaylistQuery, deletePlaylist } from '$lib/api/playlists';
import { createPlaylistQuery, deletePlaylist, refreshDiscover } from '$lib/api/playlists';
const mockedQuery = createPlaylistQuery as ReturnType<typeof vi.fn>;
@@ -92,4 +93,44 @@ describe('Playlist detail page', () => {
await waitFor(() => expect(deletePlaylist).toHaveBeenCalledWith('p1'));
confirmSpy.mockRestore();
});
test('renders Refresh button only on Discover playlists', () => {
const discoverDetail: PlaylistDetail = {
...ownDetail,
kind: 'system',
system_variant: 'discover'
};
mockedQuery.mockReturnValue(mockQuery({ data: discoverDetail }));
render(PlaylistDetailPage);
expect(screen.getByLabelText(/refresh discover/i)).toBeInTheDocument();
});
test('does not render Refresh button on for_you playlists', () => {
const forYouDetail: PlaylistDetail = {
...ownDetail,
kind: 'system',
system_variant: 'for_you'
};
mockedQuery.mockReturnValue(mockQuery({ data: forYouDetail }));
render(PlaylistDetailPage);
expect(screen.queryByLabelText(/refresh discover/i)).not.toBeInTheDocument();
});
test('does not render Refresh button on user playlists', () => {
mockedQuery.mockReturnValue(mockQuery({ data: ownDetail }));
render(PlaylistDetailPage);
expect(screen.queryByLabelText(/refresh discover/i)).not.toBeInTheDocument();
});
test('Refresh button calls refreshDiscover when clicked', async () => {
const discoverDetail: PlaylistDetail = {
...ownDetail,
kind: 'system',
system_variant: 'discover'
};
mockedQuery.mockReturnValue(mockQuery({ data: discoverDetail }));
render(PlaylistDetailPage);
await fireEvent.click(screen.getByLabelText(/refresh discover/i));
await waitFor(() => expect(refreshDiscover).toHaveBeenCalled());
});
});