feat: add mobile gesture navigation system

Implemented comprehensive mobile gesture support for the Bible reader:

**Swipe Gestures:**
- Swipe left/right to navigate between chapters
- Only activates on mobile devices (touch events)
- Configurable 50px minimum swipe distance
- Prevents scrolling interference

**Tap Zones:**
- Left 25% of screen: navigate to previous chapter
- Right 25% of screen: navigate to next chapter
- Center 50%: normal reading interaction
- Maintains text selection capabilities

**Smooth Page Transitions:**
- Fade and scale animation on chapter navigation
- 300ms duration with ease-in-out timing
- Visual feedback: opacity 0.5 and scale 0.98 during transition
- Applied to all navigation methods (swipe, tap, keyboard, buttons)

**Settings Controls:**
- Enable/disable swipe gestures toggle
- Enable/disable tap zones toggle
- Pagination mode toggle (for future enhancement)
- All settings persist in localStorage

**Dependencies:**
- Added react-swipeable v7.0.2 for gesture handling
- Zero-dependency, lightweight (peer deps: React only)

**User Experience:**
- Settings grouped under "Mobile Navigation" section
- Default enabled for optimal mobile UX
- Touch-optimized for tablets and phones
- Desktop users can disable if desired

This completes all mobile navigation features from Phase 1.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-10 12:41:32 +00:00
parent cb47f62caa
commit f3c54d4560
3 changed files with 113 additions and 3 deletions

10
package-lock.json generated
View File

@@ -63,6 +63,7 @@
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-markdown": "^10.1.0",
"react-swipeable": "^7.0.2",
"recharts": "^3.2.1",
"remark-gfm": "^4.0.1",
"socket.io": "^4.8.1",
@@ -7422,6 +7423,15 @@
}
}
},
"node_modules/react-swipeable": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.2.tgz",
"integrity": "sha512-v1Qx1l+aC2fdxKa9aKJiaU/ZxmJ5o98RMoFwUqAAzVWUcxgfHFXDDruCKXhw6zIYXm6V64JiHgP9f6mlME5l8w==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",