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) <noreply@anthropic.com>

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);
+});

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);
+});