3ca05dcb58
Both lists fetched a single capped page (100 / 200) with no pager, so entries past the cap were silently unreachable. Add a reusable LoadMore component that seeds from the streamed first page (preserving the auth gate + inline error handling) and fetches further offset-based pages on demand, and wire it into the bookmarks and collections pages. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
48 lines
1.4 KiB
Svelte
48 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import BookmarkList from '$lib/components/BookmarkList.svelte';
|
|
import ListRowSkeleton from '$lib/components/ListRowSkeleton.svelte';
|
|
import LoadMore from '$lib/components/LoadMore.svelte';
|
|
import { listMyBookmarks, type Bookmark } from '$lib/api/bookmarks';
|
|
|
|
let { data } = $props();
|
|
|
|
async function fetchMore(offset: number) {
|
|
const p = await listMyBookmarks({ limit: data.pageSize, offset });
|
|
return { items: p.items, total: p.page.total };
|
|
}
|
|
</script>
|
|
|
|
<h1>Bookmarks</h1>
|
|
|
|
{#await data.result}
|
|
<ListRowSkeleton />
|
|
{:then r}
|
|
{#if r.error}
|
|
<p class="error" role="alert" data-testid="bookmarks-error">
|
|
Couldn't load bookmarks: {r.error}
|
|
</p>
|
|
{:else if !r.authenticated}
|
|
<p class="hint" data-testid="bookmarks-signin">
|
|
<a href="/login">Sign in</a> to see your bookmarks.
|
|
</p>
|
|
{:else if r.bookmarks.length === 0}
|
|
<p class="hint" data-testid="bookmarks-empty">No bookmarks yet.</p>
|
|
{:else}
|
|
<LoadMore initial={r.bookmarks as Bookmark[]} total={r.total} {fetchMore}>
|
|
{#snippet children(items: Bookmark[])}
|
|
<BookmarkList bookmarks={items} />
|
|
{/snippet}
|
|
</LoadMore>
|
|
{/if}
|
|
{/await}
|
|
|
|
<style>
|
|
.error {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.hint {
|
|
color: var(--text-muted);
|
|
}
|
|
</style>
|