bvandeusen
dae08cd71a
Implements Task 18: AlphabeticalGrid + ArtistCard infinite-scroll page
backed by createArtistsQuery('alpha'), with error, empty, and loading states.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
56 lines
2.0 KiB
Svelte
56 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { createArtistsQuery } from '$lib/api/queries';
|
|
import ArtistCard from '$lib/components/ArtistCard.svelte';
|
|
import AlphabeticalGrid from '$lib/components/AlphabeticalGrid.svelte';
|
|
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
|
|
import { useDelayed } from '$lib/utils/useDelayed.svelte';
|
|
import type { ArtistRef } from '$lib/api/types';
|
|
|
|
const queryStore = $derived(createArtistsQuery('alpha'));
|
|
const query = $derived($queryStore);
|
|
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>
|
|
<h1 class="font-display text-2xl font-medium text-text-primary">Artists</h1>
|
|
{#if !query.isPending && !query.isError}
|
|
<p class="text-sm text-text-secondary">
|
|
{total} {total === 1 ? 'artist' : 'artists'}
|
|
</p>
|
|
{/if}
|
|
</header>
|
|
|
|
{#if query.isError}
|
|
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
|
|
{:else if showSkeleton.value && artists.length === 0}
|
|
<p class="text-text-secondary">Loading…</p>
|
|
{:else if !query.isPending && total === 0}
|
|
<p class="text-text-secondary">No artists yet — scan a library folder via the server's config.</p>
|
|
{:else}
|
|
<AlphabeticalGrid
|
|
items={artists}
|
|
getKey={(a: ArtistRef) => a.sort_name || a.name}
|
|
>
|
|
{#snippet item(a: ArtistRef)}
|
|
<ArtistCard artist={a} />
|
|
{/snippet}
|
|
</AlphabeticalGrid>
|
|
|
|
{#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>
|
|
{:else if artists.length > 0}
|
|
<p class="py-2 text-center text-sm text-text-secondary">End of library</p>
|
|
{/if}
|
|
{/if}
|
|
</div>
|