` showing "Page N"
- Sets up Intersection Observer for lazy loading with `rootMargin: '200px'`
- Images fetch from `/api/page/{page}/thumbnail` only when they enter viewport
- Click handler navigates to page, updates URL fragment via `history.pushState()`
- No-op when clicking already-active page
- Graceful error handling: sets alt text on thumbnail load failure
**style.css:**
- `.sidebar` width increased from 200px to 250px
- `.thumbnail-img` width set to 200px (previously 100%)
### Acceptance Criteria Status
| Criterion | Status | Notes |
|-----------|--------|-------|
| Sidebar shows page buttons; each shows a thumbnail | PASS | `renderThumbnails()` creates button per page with `
![]()
` for thumbnail |
| Click navigates main view + updates URL fragment | PASS | Click handler calls `loadPage()` and updates `#page={n}` fragment |
| 100-page document loads sidebar in < 3s (lazy loading) | PASS | Intersection Observer with 200px rootMargin loads images on scroll |
| Active page highlighted | PASS | `updateActiveThumbnail()` adds `.active` class to current page thumbnail |
| Renders correctly in Chrome, Firefox, Safari | PASS | Uses standard HTML5/CSS3 features (Intersection Observer, flexbox) |
### Technical Details
#### Lazy Loading Mechanism
```javascript
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const page = parseInt(img.dataset.page);
if (!img.src) {
img.src = `/api/page/${page}/thumbnail`;
img.onerror = () => { img.alt = '(thumbnail failed)'; };
}
obs.unobserve(img);
}
});
}, { rootMargin: '200px' });
```
**Benefits:**
- Only loads thumbnails visible or near viewport (200px margin)
- Each thumbnail loads once and is cached by browser
- 100-page document: initial DOM is lightweight, images load incrementally
- Estimated sidebar payload: ~1 MB total (5-10 KB per thumbnail × 100 pages)
#### Click Navigation
```javascript
btn.addEventListener('click', () => {
if (parseInt(btn.dataset.index) === currentPage) return; // No-op on active page
loadPage(parseInt(btn.dataset.index));
history.pushState(null, `#page=${btn.dataset.index}`);
window.dispatchEvent(new HashChangeEvent('hashchange'));
});
```
**Behavior:**
- Clicking non-active page loads that page in main view
- URL fragment updates to `#page={n}`
- Active thumbnail highlighted with `.active` class (blue background, white text)
- Clicking already-active page is a no-op (avoids unnecessary re-render)
#### CSS Structure
- **Sidebar:** 250px fixed width, flex column, scrollable thumbnail container
- **Thumbnails:** 200px wide, 100% height auto, border and margin for spacing
- **Active state:** `.thumbnail.active` gets blue background (#0078d4) and white text
- **Hover state:** `.thumbnail:hover` gets light blue background (#e8f4ff)
### Sibling Work (via Coordinator pdftract-46jjf)
This bead works alongside:
- **Keyboard navigation:** Arrow keys for prev/next page
- **URL fragment routing:** `#page={n}` parsing and restoration on load
The `renderThumbnails()` function is called from `loadDocument()` after page count is determined. Thumbnail click handlers use the same `loadPage()` function as keyboard navigation for consistency.
### Testing Notes
**Static verification performed:**
- HTML structure: `