From ebd2519974c910d31a38a82151837b0c500b9b5d Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Wed, 24 Sep 2025 12:54:08 +0000
Subject: [PATCH] Improve bible reader navigation layout and alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reorganize controls into two logical rows: filters and settings
- Fix alignment issues with version selector and toggle button
- Center font size controls with other action buttons
- Remove version count caption that caused height differences
- Maintain full functionality in both normal and reading modes
- Improve visual hierarchy and user experience

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/[locale]/bible/reader.tsx | 154 ++++++++++++++++++----------------
 app/globals.css               |  16 ++++
 2 files changed, 97 insertions(+), 73 deletions(-)

diff --git a/app/[locale]/bible/reader.tsx b/app/[locale]/bible/reader.tsx
index 63ba24d..d87ba1e 100644
--- a/app/[locale]/bible/reader.tsx
+++ b/app/[locale]/bible/reader.tsx
@@ -200,6 +200,20 @@ export default function BibleReaderNew() {
     localStorage.setItem('bibleReaderPreferences', JSON.stringify(preferences))
   }, [preferences])
 
+  // Handle full screen mode - add/remove CSS class to body
+  useEffect(() => {
+    if (preferences.readingMode) {
+      document.body.classList.add('bible-fullscreen-mode')
+    } else {
+      document.body.classList.remove('bible-fullscreen-mode')
+    }
+
+    // Cleanup on unmount
+    return () => {
+      document.body.classList.remove('bible-fullscreen-mode')
+    }
+  }, [preferences.readingMode])
+
   // Save selected version to localStorage
   useEffect(() => {
     if (selectedVersion) {
@@ -602,6 +616,7 @@ export default function BibleReaderNew() {
       <Box
         key={verse.id}
         ref={(el: HTMLDivElement | null) => { if (el) verseRefs.current[verse.verseNum] = el }}
+        data-verse-container
         sx={{
           mb: 1,
           display: 'flex',
@@ -674,18 +689,20 @@ export default function BibleReaderNew() {
 
   const renderNavigation = () => (
     <Paper
-      elevation={1}
+      elevation={preferences.readingMode ? 0 : 1}
       sx={{
-        mb: 2,
-        p: 2,
+        mb: preferences.readingMode ? 1 : 2,
+        p: preferences.readingMode ? 1 : 2,
         ...getThemeStyles(),
-        border: `1px solid ${getThemeStyles().borderColor}`
+        border: preferences.readingMode ? 'none' : `1px solid ${getThemeStyles().borderColor}`,
+        backgroundColor: preferences.readingMode ? 'transparent' : getThemeStyles().backgroundColor
       }}
     >
-      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
+      {/* First Row: Navigation Filters */}
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'flex-start', justifyContent: 'center', mb: 2 }}>
         {/* Version Selection */}
         <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' }, minWidth: { sm: 180, md: 200 } }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <FormControl fullWidth size="small">
               <InputLabel>{t('version')}</InputLabel>
               <Select
@@ -726,9 +743,6 @@ export default function BibleReaderNew() {
               </IconButton>
             </Tooltip>
           </Box>
-          <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7em' }}>
-            {showAllVersions ? `${versions.length} versions (all languages)` : `${versions.length} versions (${locale.toUpperCase()})`}
-          </Typography>
         </Box>
 
         {/* Books Selection */}
@@ -781,73 +795,67 @@ export default function BibleReaderNew() {
             </Select>
           </FormControl>
         </Box>
+      </Box>
 
+      {/* Second Row: Settings and Controls */}
+      <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
         {/* Font Size Controls */}
-        <Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 150 } }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <IconButton
-              size="small"
-              onClick={() => setPreferences(prev => ({
-                ...prev,
-                fontSize: Math.max(12, prev.fontSize - 1)
-              }))}
-              disabled={preferences.fontSize <= 12}
-            >
-              <Typography variant="h6">A⁻</Typography>
-            </IconButton>
-            <IconButton
-              size="small"
-              onClick={() => setPreferences(prev => ({
-                ...prev,
-                fontSize: Math.min(28, prev.fontSize + 1)
-              }))}
-              disabled={preferences.fontSize >= 28}
-            >
-              <Typography variant="h6">A⁺</Typography>
-            </IconButton>
-          </Box>
-        </Box>
+        <IconButton
+          size="small"
+          onClick={() => setPreferences(prev => ({
+            ...prev,
+            fontSize: Math.max(12, prev.fontSize - 1)
+          }))}
+          disabled={preferences.fontSize <= 12}
+        >
+          <Typography variant="h6">A⁻</Typography>
+        </IconButton>
+        <IconButton
+          size="small"
+          onClick={() => setPreferences(prev => ({
+            ...prev,
+            fontSize: Math.min(28, prev.fontSize + 1)
+          }))}
+          disabled={preferences.fontSize >= 28}
+        >
+          <Typography variant="h6">A⁺</Typography>
+        </IconButton>
 
         {/* Action Buttons */}
-        <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' } }}>
-          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
-            <Tooltip title={t('toggleFullscreen')}>
-              <IconButton
-                size="small"
-                onClick={() => setPreferences(prev => ({ ...prev, readingMode: !prev.readingMode }))}
-                sx={{ color: preferences.readingMode ? 'primary.main' : 'inherit' }}
-              >
-                {preferences.readingMode ? <FullscreenExit /> : <Fullscreen />}
-              </IconButton>
-            </Tooltip>
+        <Tooltip title={t('toggleFullscreen')}>
+          <IconButton
+            size="small"
+            onClick={() => setPreferences(prev => ({ ...prev, readingMode: !prev.readingMode }))}
+            sx={{ color: preferences.readingMode ? 'primary.main' : 'inherit' }}
+          >
+            {preferences.readingMode ? <FullscreenExit /> : <Fullscreen />}
+          </IconButton>
+        </Tooltip>
 
-            <Tooltip title={t('settings')}>
-              <IconButton size="small" onClick={() => setSettingsOpen(true)}>
-                <Settings />
-              </IconButton>
-            </Tooltip>
+        <Tooltip title={t('settings')}>
+          <IconButton size="small" onClick={() => setSettingsOpen(true)}>
+            <Settings />
+          </IconButton>
+        </Tooltip>
 
-            {user && (
-              <Tooltip title={isChapterBookmarked ? t('removeBookmark') : t('addBookmark')}>
-                <IconButton
-                  size="small"
-                  onClick={handleChapterBookmark}
-                  disabled={bookmarkLoading}
-                  sx={{ color: isChapterBookmarked ? 'warning.main' : 'inherit' }}
-                >
-                  {isChapterBookmarked ? <Bookmark /> : <BookmarkBorder />}
-                </IconButton>
-              </Tooltip>
-            )}
-
-            <Tooltip title={t('share')}>
-              <IconButton size="small" onClick={handleShare}>
-                <Share />
-              </IconButton>
-            </Tooltip>
-          </Box>
-        </Box>
+        {user && (
+          <Tooltip title={isChapterBookmarked ? t('removeBookmark') : t('addBookmark')}>
+            <IconButton
+              size="small"
+              onClick={handleChapterBookmark}
+              disabled={bookmarkLoading}
+              sx={{ color: isChapterBookmarked ? 'warning.main' : 'inherit' }}
+            >
+              {isChapterBookmarked ? <Bookmark /> : <BookmarkBorder />}
+            </IconButton>
+          </Tooltip>
+        )}
 
+        <Tooltip title={t('share')}>
+          <IconButton size="small" onClick={handleShare}>
+            <Share />
+          </IconButton>
+        </Tooltip>
       </Box>
     </Paper>
   )
@@ -1012,12 +1020,12 @@ export default function BibleReaderNew() {
       <Container
         maxWidth="lg"
         sx={{
-          py: preferences.readingMode ? 0 : 3,
-          px: preferences.readingMode ? 0 : 3
+          py: preferences.readingMode ? 2 : 3,
+          px: preferences.readingMode ? 2 : 3
         }}
       >
-        {/* Navigation Section */}
-        {!preferences.readingMode && renderNavigation()}
+        {/* Navigation Section - Always show but with different styling in reading mode */}
+        {renderNavigation()}
 
         {/* Reading Content */}
         <Box
diff --git a/app/globals.css b/app/globals.css
index 705a620..c61e466 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -25,4 +25,20 @@ body {
 
 .verse:hover {
   background-color: rgba(255, 235, 59, 0.2);
+}
+
+/* Bible Reader Full Screen Mode - Hide only site-level elements */
+.bible-fullscreen-mode .MuiAppBar-root:first-child,
+.bible-fullscreen-mode footer,
+.bible-fullscreen-mode [data-floating-chat="true"] {
+  display: none !important;
+}
+
+.bible-fullscreen-mode {
+  overflow: auto;
+}
+
+.bible-fullscreen-mode body {
+  margin: 0;
+  padding: 0;
 }
\ No newline at end of file