From 3ca05dcb58699de619deaff45e70cdb0d678fd73 Mon Sep 17 00:00:00 2001 From: MechaCat02 Date: Sat, 11 Jul 2026 15:12:03 +0200 Subject: [PATCH] fix: paginate the bookmarks and collections lists with Load more 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) --- frontend/e2e/bookmarks-load-more.spec.ts | 73 +++++++++++++++++ frontend/e2e/collections-load-more.spec.ts | 74 +++++++++++++++++ frontend/package.json | 2 +- frontend/src/lib/components/LoadMore.svelte | 83 ++++++++++++++++++++ frontend/src/routes/bookmarks/+page.svelte | 13 ++- frontend/src/routes/bookmarks/+page.ts | 23 +++++- frontend/src/routes/collections/+page.svelte | 13 ++- frontend/src/routes/collections/+page.ts | 23 +++++- 8 files changed, 293 insertions(+), 11 deletions(-) create mode 100644 frontend/e2e/bookmarks-load-more.spec.ts create mode 100644 frontend/e2e/collections-load-more.spec.ts create mode 100644 frontend/src/lib/components/LoadMore.svelte diff --git a/frontend/e2e/bookmarks-load-more.spec.ts b/frontend/e2e/bookmarks-load-more.spec.ts new file mode 100644 index 0000000..157b6f7 --- /dev/null +++ b/frontend/e2e/bookmarks-load-more.spec.ts @@ -0,0 +1,73 @@ +import { test, expect, type Page } from './fixtures'; + +// The bookmarks list pages the results: the first 50 load with the page, and a +// "Load more" button fetches the next page (offset-based) and appends it, so +// bookmarks past the first page are reachable rather than silently truncated. + +function bookmark(i: number) { + return { + id: `bm-${i}`, + manga_id: `m-${i}`, + manga_title: `Manga ${i}`, + manga_cover_image_path: null, + chapter_id: null, + chapter_number: null, + page: null, + created_at: '2026-01-01T00:00:00Z' + }; +} + +async function authed(page: Page) { + await page.route('**/api/v1/auth/config', (r) => + r.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ self_register_enabled: true, private_mode: false }) + }) + ); + await page.route('**/api/v1/auth/me', (r) => + r.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ + user: { id: 'u1', username: 'reader', created_at: '2026-01-01T00:00:00Z', is_admin: false } + }) + }) + ); + await page.route('**/api/v1/auth/me/preferences', (r) => + r.fulfill({ status: 200, contentType: 'application/json', body: '{}' }) + ); + await page.route('**/api/v1/files/**', (r) => r.fulfill({ status: 200, body: '' })); +} + +test('bookmarks list loads more pages on demand', async ({ page }) => { + await authed(page); + // total = 60: first page 50 (offset 0), second page 10 (offset 50). + await page.route('**/api/v1/me/bookmarks*', (r) => { + const url = new URL(r.request().url()); + const offset = Number(url.searchParams.get('offset') ?? '0'); + const items = + offset === 0 + ? Array.from({ length: 50 }, (_, i) => bookmark(i)) + : Array.from({ length: 10 }, (_, i) => bookmark(50 + i)); + return r.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ items, page: { limit: 50, offset, total: 60 } }) + }); + }); + + await page.goto('/bookmarks'); + + // First page rendered; more remain so the button shows. + await expect(page.getByText('Manga 0')).toBeVisible(); + await expect(page.getByText('Manga 49')).toBeVisible(); + await expect(page.getByText('Manga 50')).toHaveCount(0); + const loadMore = page.getByTestId('load-more'); + await expect(loadMore).toBeVisible(); + + // Load the rest; the button disappears once everything is shown. + await loadMore.click(); + await expect(page.getByText('Manga 59')).toBeVisible(); + await expect(loadMore).toHaveCount(0); +}); diff --git a/frontend/e2e/collections-load-more.spec.ts b/frontend/e2e/collections-load-more.spec.ts new file mode 100644 index 0000000..81ea52d --- /dev/null +++ b/frontend/e2e/collections-load-more.spec.ts @@ -0,0 +1,74 @@ +import { test, expect, type Page } from './fixtures'; + +// The collections grid pages results: a "Load more" button fetches the next +// page (offset-based) and appends it, so collections past the first page are +// reachable rather than silently truncated at the old 200 cap. + +function collection(i: number) { + return { + id: `col-${i}`, + user_id: 'u1', + name: `Collection ${i}`, + description: null, + created_at: '2026-01-01T00:00:00Z', + updated_at: '2026-01-01T00:00:00Z', + manga_count: 0, + sample_covers: [] + }; +} + +async function authed(page: Page) { + await page.route('**/api/v1/auth/config', (r) => + r.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ self_register_enabled: true, private_mode: false }) + }) + ); + await page.route('**/api/v1/auth/me', (r) => + r.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ + user: { id: 'u1', username: 'reader', created_at: '2026-01-01T00:00:00Z', is_admin: false } + }) + }) + ); + await page.route('**/api/v1/auth/me/preferences', (r) => + r.fulfill({ status: 200, contentType: 'application/json', body: '{}' }) + ); + await page.route('**/api/v1/me/bookmarks*', (r) => + r.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } }) + }) + ); +} + +test('collections grid loads more pages on demand', async ({ page }) => { + await authed(page); + await page.route('**/api/v1/me/collections*', (r) => { + const offset = Number(new URL(r.request().url()).searchParams.get('offset') ?? '0'); + const items = + offset === 0 + ? Array.from({ length: 60 }, (_, i) => collection(i)) + : Array.from({ length: 5 }, (_, i) => collection(60 + i)); + return r.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ items, page: { limit: 60, offset, total: 65 } }) + }); + }); + + await page.goto('/collections'); + + await expect(page.getByText('Collection 0')).toBeVisible(); + await expect(page.getByText('Collection 64')).toHaveCount(0); + const loadMore = page.getByTestId('load-more'); + await expect(loadMore).toBeVisible(); + + await loadMore.click(); + await expect(page.getByText('Collection 64')).toBeVisible(); + await expect(loadMore).toHaveCount(0); +}); diff --git a/frontend/package.json b/frontend/package.json index b64131a..9aa9fb7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "mangalord-frontend", - "version": "0.127.1", + "version": "0.127.2", "private": true, "type": "module", "scripts": { diff --git a/frontend/src/lib/components/LoadMore.svelte b/frontend/src/lib/components/LoadMore.svelte new file mode 100644 index 0000000..0698a98 --- /dev/null +++ b/frontend/src/lib/components/LoadMore.svelte @@ -0,0 +1,83 @@ + + +{@render children(all)} + +{#if hasMore} +
+ + {#if error} + + {/if} +
+{/if} + + diff --git a/frontend/src/routes/bookmarks/+page.svelte b/frontend/src/routes/bookmarks/+page.svelte index 2bf3a91..db06942 100644 --- a/frontend/src/routes/bookmarks/+page.svelte +++ b/frontend/src/routes/bookmarks/+page.svelte @@ -1,8 +1,15 @@

Bookmarks

@@ -21,7 +28,11 @@ {:else if r.bookmarks.length === 0}

No bookmarks yet.

{:else} - + + {#snippet children(items: Bookmark[])} + + {/snippet} + {/if} {/await} diff --git a/frontend/src/routes/bookmarks/+page.ts b/frontend/src/routes/bookmarks/+page.ts index 4402e21..9ba3927 100644 --- a/frontend/src/routes/bookmarks/+page.ts +++ b/frontend/src/routes/bookmarks/+page.ts @@ -4,17 +4,32 @@ import type { PageLoad } from './$types'; export const ssr = false; +/** First-page size; "Load more" pulls further pages of the same size. + * Not exported — SvelteKit only allows specific `+page.ts` exports. */ +const BOOKMARKS_PAGE_SIZE = 50; + export const load: PageLoad = async () => { // Streamed (the load itself doesn't await) so the list shows a skeleton // while the single fetch — which is also the auth gate — is in flight. return { + pageSize: BOOKMARKS_PAGE_SIZE, result: (async () => { try { - const page = await listMyBookmarks(); - return { bookmarks: page.items, authenticated: true, error: null as string | null }; + const page = await listMyBookmarks({ limit: BOOKMARKS_PAGE_SIZE, offset: 0 }); + return { + bookmarks: page.items, + total: page.page.total, + authenticated: true, + error: null as string | null + }; } catch (e) { if (e instanceof ApiError && e.status === 401) { - return { bookmarks: [], authenticated: false, error: null as string | null }; + return { + bookmarks: [], + total: 0, + authenticated: false, + error: null as string | null + }; } // Anything else — an HTTP error (502 upstream_unavailable from // a backend restart, 500 internal_error) or a raw network @@ -23,7 +38,7 @@ export const load: PageLoad = async () => { // right UX for a transient API blip and the user is already // authenticated as far as we know. const message = e instanceof ApiError ? e.message : 'Something went wrong.'; - return { bookmarks: [], authenticated: true, error: message }; + return { bookmarks: [], total: 0, authenticated: true, error: message }; } })() }; diff --git a/frontend/src/routes/collections/+page.svelte b/frontend/src/routes/collections/+page.svelte index f588bd4..295976b 100644 --- a/frontend/src/routes/collections/+page.svelte +++ b/frontend/src/routes/collections/+page.svelte @@ -1,8 +1,15 @@

Collections

@@ -22,7 +29,11 @@ Add to collection to start one.

{:else} - + + {#snippet children(items: CollectionSummary[])} + + {/snippet} + {/if} {/await} diff --git a/frontend/src/routes/collections/+page.ts b/frontend/src/routes/collections/+page.ts index 9aa04a4..9650899 100644 --- a/frontend/src/routes/collections/+page.ts +++ b/frontend/src/routes/collections/+page.ts @@ -4,23 +4,38 @@ import type { PageLoad } from './$types'; export const ssr = false; +/** First-page size; "Load more" pulls further pages of the same size. + * Not exported — SvelteKit only allows specific `+page.ts` exports. */ +const COLLECTIONS_PAGE_SIZE = 60; + export const load: PageLoad = async () => { // Streamed so the grid shows a skeleton while the single fetch (also the // auth gate) is in flight. return { + pageSize: COLLECTIONS_PAGE_SIZE, result: (async () => { try { - const page = await listMyCollections({ limit: 200 }); - return { collections: page.items, authenticated: true, error: null as string | null }; + const page = await listMyCollections({ limit: COLLECTIONS_PAGE_SIZE, offset: 0 }); + return { + collections: page.items, + total: page.page.total, + authenticated: true, + error: null as string | null + }; } catch (e) { if (e instanceof ApiError && e.status === 401) { - return { collections: [], authenticated: false, error: null as string | null }; + return { + collections: [], + total: 0, + authenticated: false, + error: null as string | null + }; } // An HTTP error or a raw network failure (a non-ApiError // TypeError) renders inline rather than escaping to the // framework error page for a transient API blip. const message = e instanceof ApiError ? e.message : 'Something went wrong.'; - return { collections: [], authenticated: true, error: message }; + return { collections: [], total: 0, authenticated: true, error: message }; } })() };