feat(web): add /library/albums wrapping-grid page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 20:26:02 -04:00
parent dae08cd71a
commit 3d0a42865e
2 changed files with 108 additions and 0 deletions
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { createAlbumsAlphaInfiniteQuery } from '$lib/api/albums';
+  import AlbumCard from '$lib/components/AlbumCard.svelte';
+  import AlphabeticalGrid from '$lib/components/AlphabeticalGrid.svelte';
+  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
+  import { useDelayed } from '$lib/utils/useDelayed.svelte';
+  import type { AlbumRef } from '$lib/api/types';
+
+  const queryStore = createAlbumsAlphaInfiniteQuery();
+  const query = $derived($queryStore);
+  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>
+    <h1 class="font-display text-2xl font-medium text-text-primary">Albums</h1>
+    {#if !query.isPending && !query.isError}
+      <p class="text-sm text-text-secondary">
+        {total} {total === 1 ? 'album' : 'albums'}
+      </p>
+    {/if}
+  </header>
+
+  {#if query.isError}
+    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
+  {:else if showSkeleton.value && albums.length === 0}
+    <p class="text-text-secondary">Loading…</p>
+  {:else if !query.isPending && total === 0}
+    <p class="text-text-secondary">No albums yet — scan a library folder via the server's config.</p>
+  {:else}
+    <AlphabeticalGrid
+      items={albums}
+      getKey={(a: AlbumRef) => a.sort_title || a.title}
+    >
+      {#snippet item(album: AlbumRef)}
+        <AlbumCard {album} />
+      {/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 albums.length > 0}
+      <p class="py-2 text-center text-sm text-text-secondary">End of library</p>
+    {/if}
+  {/if}
+</div>