Refine rail and book tab layout

src/App.tsx

@@ -387,6 +387,16 @@ function App() {
     () => Array.from(new Set(libraryVerses.map((verse) => verse.book))),
     [libraryVerses],
   )
+  const visibleBookTabs = useMemo(() => {
+    if (!selectedVerse || !books.length) return []
+    const visibleCount = 24
+    const selectedIndex = Math.max(0, books.indexOf(selectedVerse.book))
+    const halfWindow = Math.floor(visibleCount / 2)
+    const maxStart = Math.max(0, books.length - visibleCount)
+    const start = Math.min(Math.max(0, selectedIndex - halfWindow), maxStart)
+
+    return books.slice(start, start + visibleCount)
+  }, [books, selectedVerse])
   const chapters = useMemo(() => {
     if (!selectedVerse) return []
     return Array.from(
@@ -512,17 +522,6 @@ function App() {
     )
   }
 
-  function setWorkspaceView(nextViewMode: ViewMode) {
-    setViewMode(nextViewMode)
-    recordTimeline(
-      {
-        type: 'view',
-        label: `View: ${nextViewMode}`,
-      },
-      { viewMode: nextViewMode },
-    )
-  }
-
   function setStrongDisplayMode(nextStrongDisplay: StrongDisplayMode) {
     setStrongDisplay(nextStrongDisplay)
     recordTimeline(
@@ -707,19 +706,24 @@ function App() {
             </p>
           ))}
         </div>
-        <footer>
-          <button type="button" onClick={() => shiftPage(-1)}>
-            Previous page
-          </button>
-          <span>{pageRange}</span>
-          <button type="button" onClick={() => shiftPage(1)}>
-            Next page
-          </button>
-        </footer>
       </article>
     )
   }
 
+  function renderPageTurner() {
+    return (
+      <nav className="page-turner" aria-label="Page navigation">
+        <button type="button" onClick={() => shiftPage(-1)}>
+          Previous page
+        </button>
+        <span>{pageRange}</span>
+        <button type="button" onClick={() => shiftPage(1)}>
+          Next page
+        </button>
+      </nav>
+    )
+  }
+
   function renderStudyMargin() {
     if (!selectedVerse) return null
     return (
@@ -814,7 +818,7 @@ function App() {
 
     return (
       <nav className="book-tabs" aria-label="Bible book tabs">
-        {books.map((book) => (
+        {visibleBookTabs.map((book) => (
           <button
             key={book}
             type="button"
@@ -1039,23 +1043,16 @@ function App() {
           <span />
           <span />
         </button>
-        <span className="brand-mark">LS</span>
-        <button type="button" title="Bible page" onClick={() => setWorkspaceView('page')}>
-          <span className="rail-icon">B</span>
-          <span className="rail-copy"><strong>Bible</strong><small>Page-only reading</small></span>
-        </button>
-        <button type="button" title="Study margin" onClick={() => setWorkspaceView('study')}>
-          <span className="rail-icon">M</span>
-          <span className="rail-copy"><strong>Margin</strong><small>References and linked words</small></span>
-        </button>
-        <button type="button" title="Notes workspace" onClick={() => setWorkspaceView('notes')}>
-          <span className="rail-icon">N</span>
-          <span className="rail-copy"><strong>Notes</strong><small>Study notes and timeline</small></span>
-        </button>
-        <button type="button" title="Compare translations" onClick={() => setWorkspaceView('compare')}>
-          <span className="rail-icon">C</span>
-          <span className="rail-copy"><strong>Compare</strong><small>Translation comparison</small></span>
-        </button>
+        <div className="app-identity" aria-label="Libre Study">
+          <span className="brand-mark">LS</span>
+          <span className="rail-copy">
+            <strong>Libre Study</strong>
+            <small>Free Bible study by Christ IT</small>
+          </span>
+        </div>
+        <p className="rail-description">
+          A readable Bible page, study margin, notes workspace, and linked public Bible data.
+        </p>
         <button type="button" title="Session management" onClick={() => setSessionModalOpen(true)}>
           <span className="rail-icon">S</span>
           <span className="rail-copy"><strong>Sessions</strong><small>Save, export, and configure</small></span>
@@ -1188,6 +1185,7 @@ function App() {
                   {renderBiblePage('KJV')}
                   {viewMode !== 'page' ? renderStudyMargin() : null}
                   {renderFootnoteStrip()}
+                  {renderPageTurner()}
                   {renderBookTabs()}
                 </div>
               )}