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>
2025-10-10 12:41:32 +00:00
parent cb47f62caa
commit f3c54d4560
3 changed files with 113 additions and 3 deletions
--- a/app/[locale]/bible/reader.tsx
+++ b/app/[locale]/bible/reader.tsx
@@ -8,6 +8,7 @@ import { OfflineDownloadManager } from '@/components/bible/offline-download-mana
 import { OfflineBibleReader } from '@/components/bible/offline-bible-reader'
 import { offlineStorage } from '@/lib/offline-storage'
 import { InstallPrompt, useInstallPrompt } from '@/components/pwa/install-prompt'
+import { useSwipeable } from 'react-swipeable'
 import {
  Box,
  Typography,
@@ -137,6 +138,9 @@ interface ReadingPreferences {
  wordSpacing: number      // 0-4px range for word spacing
  paragraphSpacing: number // 1.0-2.5x line height for paragraph spacing
  maxLineLength: number    // 50-100 characters (ch units) for optimal reading width
+  enableSwipeGestures: boolean  // Enable swipe left/right for chapter navigation
+  enableTapZones: boolean       // Enable tap zones (left=prev, right=next)
+  paginationMode: boolean       // Page-by-page vs continuous scroll
 }

 const defaultPreferences: ReadingPreferences = {
@@ -150,7 +154,10 @@ const defaultPreferences: ReadingPreferences = {
  letterSpacing: 0.5,      // 0.5px default (WCAG 2.1 SC 1.4.12 recommends 0.12em)
  wordSpacing: 0,          // 0px default (browser default is optimal)
  paragraphSpacing: 1.8,   // 1.8x line spacing (WCAG recommends ≥1.5x)
-  maxLineLength: 75        // 75ch optimal reading width (50-75 for desktop)
+  maxLineLength: 75,       // 75ch optimal reading width (50-75 for desktop)
+  enableSwipeGestures: true,  // Enable by default for mobile
+  enableTapZones: true,       // Enable by default for mobile
+  paginationMode: false       // Continuous scroll by default
 }

 interface BibleReaderProps {
@@ -238,6 +245,9 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
  const [readingProgress, setReadingProgress] = useState<any>(null)
  const [hasLoadedInitialProgress, setHasLoadedInitialProgress] = useState(false)

+  // Page transition state
+  const [isTransitioning, setIsTransitioning] = useState(false)
+
  // Note dialog state
  const [noteDialog, setNoteDialog] = useState<{
    open: boolean
@@ -944,6 +954,10 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
  }

  const handlePreviousChapter = () => {
+    // Trigger transition animation
+    setIsTransitioning(true)
+    setTimeout(() => setIsTransitioning(false), 300) // Match CSS transition duration
+
    if (selectedChapter > 1) {
      const newChapter = selectedChapter - 1
      setSelectedChapter(newChapter)
@@ -961,6 +975,10 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
  }

  const handleNextChapter = () => {
+    // Trigger transition animation
+    setIsTransitioning(true)
+    setTimeout(() => setIsTransitioning(false), 300) // Match CSS transition duration
+
    if (selectedChapter < maxChapters) {
      const newChapter = selectedChapter + 1
      setSelectedChapter(newChapter)
@@ -976,6 +994,41 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
    }
  }

+  // Swipe handlers for mobile navigation
+  const swipeHandlers = useSwipeable({
+    onSwipedLeft: () => {
+      if (preferences.enableSwipeGestures && isMobile) {
+        handleNextChapter()
+      }
+    },
+    onSwipedRight: () => {
+      if (preferences.enableSwipeGestures && isMobile) {
+        handlePreviousChapter()
+      }
+    },
+    preventScrollOnSwipe: false,
+    trackMouse: false, // Only track touch, not mouse
+    delta: 50 // Minimum swipe distance in pixels
+  })
+
+  // Tap zone handler for quick navigation
+  const handleTapZone = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!preferences.enableTapZones || !isMobile) return
+
+    const target = event.currentTarget
+    const rect = target.getBoundingClientRect()
+    const clickX = event.clientX - rect.left
+    const tapZoneWidth = rect.width * 0.25 // 25% on each side
+
+    if (clickX < tapZoneWidth) {
+      // Left tap zone - previous chapter
+      handlePreviousChapter()
+    } else if (clickX > rect.width - tapZoneWidth) {
+      // Right tap zone - next chapter
+      handleNextChapter()
+    }
+  }
+
  const handleChapterBookmark = async () => {
    if (!selectedBook || !selectedChapter) return

@@ -1993,6 +2046,41 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
            }
            label={t('readingMode')}
          />
+
+          <Divider sx={{ my: 2 }} />
+          <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 600 }}>
+            Mobile Navigation
+          </Typography>
+
+          <FormControlLabel
+            control={
+              <Switch
+                checked={preferences.enableSwipeGestures}
+                onChange={(e) => setPreferences(prev => ({ ...prev, enableSwipeGestures: e.target.checked }))}
+              />
+            }
+            label="Enable Swipe Gestures"
+          />
+
+          <FormControlLabel
+            control={
+              <Switch
+                checked={preferences.enableTapZones}
+                onChange={(e) => setPreferences(prev => ({ ...prev, enableTapZones: e.target.checked }))}
+              />
+            }
+            label="Enable Tap Zones"
+          />
+
+          <FormControlLabel
+            control={
+              <Switch
+                checked={preferences.paginationMode}
+                onChange={(e) => setPreferences(prev => ({ ...prev, paginationMode: e.target.checked }))}
+              />
+            }
+            label="Pagination Mode"
+          />
        </Box>
      </DialogContent>
      <DialogActions>
@@ -2058,13 +2146,18 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha

        {/* Reading Content */}
        <Box
+          {...swipeHandlers}
          ref={contentRef}
+          onClick={handleTapZone}
          sx={{
            maxWidth: preferences.columnLayout ? 'none' : '800px',
            mx: 'auto',
            width: '100%',
            minHeight: '60vh', // Prevent layout shifts
-            position: 'relative'
+            position: 'relative',
+            cursor: preferences.enableTapZones && isMobile ? 'pointer' : 'default',
+            userSelect: 'text', // Ensure text selection still works
+            WebkitUserSelect: 'text'
          }}
        >
          <Paper
@@ -2075,7 +2168,13 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
              p: preferences.readingMode ? 4 : 3,
              minHeight: preferences.readingMode ? '100vh' : '60vh', // Consistent minimum height
              border: preferences.readingMode ? 'none' : `1px solid ${getThemeStyles().borderColor}`,
-              position: 'relative'
+              position: 'relative',
+              opacity: isTransitioning ? 0.5 : 1,
+              transition: 'opacity 0.3s ease-in-out',
+              transform: isTransitioning ? 'scale(0.98)' : 'scale(1)',
+              transitionProperty: 'opacity, transform',
+              transitionDuration: '0.3s',
+              transitionTimingFunction: 'ease-in-out'
            }}
          >
            {loading && (
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
--- a/package.json
+++ b/package.json
@@ -76,6 +76,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",