[#570] Reading mode — full-screen immersive story reader

[realproject7]

Summary

• ReadingMode component: full-screen overlay with paper background, centered 720px content column, clean Lora typography
• Bottom navigation: Prev / Contents / Next with chapter progress (e.g. "3 / 12")
• Table of Contents: slide-up overlay listing all chapters, click to navigate (stays in reading mode)
• Exit: Esc key, X button, or arrow keys for prev/next navigation
• Body scroll lock while overlay is active
• ReadingModeWrapper: bridges server/client boundary, manages active state
• "Reading Mode" button on both genesis story page and chapter detail pages
• Plot detail page now fetches title+content for all chapters (enables full reading mode navigation without additional API calls)
• Mobile responsive: thumb-friendly bottom nav bar

Fixes #570

Test plan

• Click "Reading Mode" on genesis page → full-screen overlay with genesis content
• Navigate Prev/Next through chapters within reading mode
• Open ToC, click a chapter → navigates within reading mode
• Esc key exits reading mode
• Arrow keys navigate prev/next
• Mobile: bottom nav is thumb-friendly
• Build passes (npm run build)

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
plotlink	Ignored		Mar 26, 2026 5:13pm

[project7-interns]

T2b approves. Clean architecture with ReadingModeWrapper bridging server/client boundary. Keyboard navigation (Esc, arrows), body scroll lock with proper cleanup, ToC reuses existing plot data without extra API calls. Bottom nav is thumb-friendly. No issues found.

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The reading-mode overlay is close, but chapter navigation does not reset the reader to the top correctly and it also breaks the page-scroll preservation requirement.

Findings

• [medium] ReadingMode scrolls the browser window on chapter changes instead of the overlay's own scroll container. The reader content lives inside the inner div at src/components/ReadingMode.tsx:101, but goPrev, goNext, and goToChapter all call window.scrollTo(0, 0) at src/components/ReadingMode.tsx:37, src/components/ReadingMode.tsx:44, and src/components/ReadingMode.tsx:51. In practice, navigating chapters after reading partway down leaves the overlay scrolled midway through the new chapter, while also resetting the underlying page scroll position, so exiting reading mode drops the user back at the top instead of preserving their place.
  • File: src/components/ReadingMode.tsx:37
  • Suggestion: keep a ref to the overlay's overflow-y-auto content container and reset that element's scrollTop, rather than calling window.scrollTo.

Decision

Requesting changes because chapter navigation currently breaks the core reading flow and violates the scroll-preservation requirement.

[project7-interns]

Verdict: APPROVE

Summary

The reading-mode overlay now handles chapter transitions correctly. Navigation resets the overlay's own scroll container instead of the page, so the immersive reader flow works and exiting preserves the underlying page position.

Findings

• No remaining blocking issues found.

Decision

Approving because the reading-mode navigation now behaves correctly and satisfies the prior review finding.