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
+50 -1
View File
@@ -11,7 +11,8 @@
updatePlaylist,
deletePlaylist,
removePlaylistTrack,
reorderPlaylist
reorderPlaylist,
refreshDiscover
} from '$lib/api/playlists';
import { qk } from '$lib/api/queries';
import { user } from '$lib/auth/store.svelte';
@@ -135,12 +136,49 @@
alert(copyForCode(code));
}
}
// --- Toast (detail page) ---
let toast = $state<string | null>(null);
let toastTimer: ReturnType<typeof setTimeout> | null = null;
function showToast(msg: string) {
if (toastTimer) clearTimeout(toastTimer);
toast = msg;
toastTimer = setTimeout(() => { toast = null; }, 5000);
}
// --- Discover refresh ---
let refreshingDiscover = $state(false);
async function onRefreshDiscover() {
refreshingDiscover = true;
try {
await refreshDiscover();
showToast('Discover refreshed.');
await queryClient.invalidateQueries({ queryKey: qk.playlist(id) });
await queryClient.invalidateQueries({ queryKey: qk.playlists() });
} catch (e: unknown) {
showToast(`Refresh failed: ${(e as { code?: string })?.code ?? 'unknown'}`);
} finally {
refreshingDiscover = false;
}
}
</script>
<svelte:head>
<title>{pageTitle(playlistQuery?.data?.name ? `Playlist · ${playlistQuery.data.name}` : 'Playlist')}</title>
</svelte:head>
{#if toast}
<div
role="status"
aria-live="polite"
class="fixed bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-md border border-border bg-surface px-4 py-2 text-sm text-text-primary shadow-md"
>
{toast}
</div>
{/if}
<div class="mx-auto max-w-4xl px-4 py-6">
{#if playlistQuery?.isPending}
<p class="text-text-muted">Loading…</p>
@@ -166,6 +204,17 @@
{#if !isOwner}· by {pl.owner_username}{/if}
</p>
</div>
{#if pl.system_variant === 'discover'}
<button
type="button"
disabled={refreshingDiscover}
onclick={onRefreshDiscover}
class="rounded-md border border-border px-3 py-1.5 text-sm text-text-muted hover:text-text-primary"
aria-label="Refresh Discover"
>
{refreshingDiscover ? 'Refreshing…' : 'Refresh'}
</button>
{/if}
{#if isOwner}
<button
type="button"