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>
1.4 KiB
1.4 KiB
Quickstart: Library Pagination UI
Happy Path — Navigating Pages
Setup: Library contains more than 24 images.
- Open
http://localhost:4200/ - Confirm the image grid shows 24 images (not 50).
- Confirm "Page 1 of N" indicator and total count are visible above or below the grid.
- Confirm "Previous" button is absent or disabled.
- Click "Next" → grid replaces with the next 24 images; indicator updates to "Page 2 of N".
- Click "Previous" → first 24 images return; indicator shows "Page 1 of N".
- Navigate to the last page → "Next" is absent or disabled.
Happy Path — URL State
- Navigate to page 3 via "Next" button twice.
- Copy URL from address bar (should contain
?page=3). - Open URL in a new tab → page 3 loads directly.
- Press browser Back → page 2 loads.
Happy Path — Tag Filter Resets Page
- Navigate to page 2.
- Add a tag filter.
- Confirm page resets to 1; URL shows
?page=1&tags=<tag>(or just?tags=<tag>).
Edge Case — Single Page
- Filter to a tag with fewer than 25 images.
- Confirm no pagination controls are rendered.
Edge Case — Out-of-Range URL
- Manually enter
/?page=9999in the address bar. - Confirm page 1 loads with no error message.
Edge Case — Empty Library
- With no images uploaded, open
/. - Confirm the existing empty state is shown; no pagination controls visible.