Files
reactbin/specs/015-library-pagination/quickstart.md
agatha 781be909bc Feat: Replace Load More with Previous/Next pagination in library
Page size changes from 50 to 24. Library now shows discrete page navigation
with a "Page N of M" indicator, total image count, and URL state (?page=N)
so pages are bookmarkable and the browser Back button works. Tag filter
resets to page 1. Out-of-range page params are clamped silently.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 21:08:42 +00:00

1.4 KiB

Quickstart: Library Pagination UI

Happy Path — Navigating Pages

Setup: Library contains more than 24 images.

  1. Open http://localhost:4200/
  2. Confirm the image grid shows 24 images (not 50).
  3. Confirm "Page 1 of N" indicator and total count are visible above or below the grid.
  4. Confirm "Previous" button is absent or disabled.
  5. Click "Next" → grid replaces with the next 24 images; indicator updates to "Page 2 of N".
  6. Click "Previous" → first 24 images return; indicator shows "Page 1 of N".
  7. Navigate to the last page → "Next" is absent or disabled.

Happy Path — URL State

  1. Navigate to page 3 via "Next" button twice.
  2. Copy URL from address bar (should contain ?page=3).
  3. Open URL in a new tab → page 3 loads directly.
  4. Press browser Back → page 2 loads.

Happy Path — Tag Filter Resets Page

  1. Navigate to page 2.
  2. Add a tag filter.
  3. Confirm page resets to 1; URL shows ?page=1&tags=<tag> (or just ?tags=<tag>).

Edge Case — Single Page

  1. Filter to a tag with fewer than 25 images.
  2. Confirm no pagination controls are rendered.

Edge Case — Out-of-Range URL

  1. Manually enter /?page=9999 in the address bar.
  2. Confirm page 1 loads with no error message.

Edge Case — Empty Library

  1. With no images uploaded, open /.
  2. Confirm the existing empty state is shown; no pagination controls visible.