From 6329ad0618e13747432d8b8860f4da1120a1dcea Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Wed, 24 Sep 2025 13:05:22 +0000
Subject: [PATCH] Add search functionality to version and book dropdowns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace Select components with Autocomplete for enhanced UX
- Add real-time search for bible versions (1400+ options)
- Enable book search by name or testament
- Improve version display format: "Name - Abbreviation"
- Add rich option rendering with metadata (language, chapters)
- Include smart filtering across multiple fields
- Maintain keyboard navigation and accessibility
- Fix header visibility issue in full screen mode

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

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

diff --git a/app/[locale]/bible/reader.tsx b/app/[locale]/bible/reader.tsx
index d87ba1e..04ec498 100644
--- a/app/[locale]/bible/reader.tsx
+++ b/app/[locale]/bible/reader.tsx
@@ -44,7 +44,8 @@ import {
   FormControl,
   InputLabel,
   Select,
-  Container
+  Container,
+  Autocomplete
 } from '@mui/material'
 import {
   Menu as MenuIcon,
@@ -703,36 +704,56 @@ export default function BibleReaderNew() {
         {/* 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 }}>
-            <FormControl fullWidth size="small">
-              <InputLabel>{t('version')}</InputLabel>
-              <Select
-                value={selectedVersion}
-                label={t('version')}
-                onChange={(e) => {
-                  setSelectedVersion(e.target.value)
+            <Autocomplete
+              size="small"
+              fullWidth
+              value={versions.find(v => v.id === selectedVersion) || null}
+              onChange={(event, newValue) => {
+                if (newValue) {
+                  setSelectedVersion(newValue.id)
                   // Reset to first book when version changes
                   if (books.length > 0) {
                     setSelectedBook(books[0].id)
                     setSelectedChapter(1)
-                    updateUrl(books[0].id, 1, e.target.value)
+                    updateUrl(books[0].id, 1, newValue.id)
                   }
-                }}
-                disabled={versionsLoading}
-                MenuProps={{
-                  PaperProps: {
-                    style: {
-                      maxHeight: 400,
-                    },
-                  },
-                }}
-              >
-                {versions.map((version) => (
-                  <MenuItem key={version.id} value={version.id}>
-                    {version.abbreviation} - {version.name} ({version.language.toUpperCase()})
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
+                }
+              }}
+              options={versions}
+              getOptionLabel={(option) => `${option.name} - ${option.abbreviation}`}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label={t('version')}
+                  placeholder="Search versions..."
+                />
+              )}
+              renderOption={(props, option) => (
+                <Box component="li" {...props}>
+                  <Box>
+                    <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
+                      {option.name}
+                    </Typography>
+                    <Typography variant="caption" color="text.secondary">
+                      {option.abbreviation} • {option.language.toUpperCase()}
+                    </Typography>
+                  </Box>
+                </Box>
+              )}
+              disabled={versionsLoading}
+              loading={versionsLoading}
+              filterOptions={(options, { inputValue }) => {
+                const filtered = options.filter((option) =>
+                  option.name.toLowerCase().includes(inputValue.toLowerCase()) ||
+                  option.abbreviation.toLowerCase().includes(inputValue.toLowerCase()) ||
+                  option.language.toLowerCase().includes(inputValue.toLowerCase())
+                )
+                return filtered
+              }}
+              ListboxProps={{
+                style: { maxHeight: 400 }
+              }}
+            />
             <Tooltip title={showAllVersions ? 'Show language versions only' : 'Show all versions'}>
               <IconButton
                 size="small"
@@ -747,24 +768,48 @@ export default function BibleReaderNew() {
 
         {/* Books Selection */}
         <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' }, minWidth: { sm: 200, md: 250 } }}>
-          <FormControl fullWidth size="small">
-            <InputLabel>{t('book')}</InputLabel>
-            <Select
-              value={selectedBook}
-              label={t('book')}
-              onChange={(e) => {
-                setSelectedBook(e.target.value)
+          <Autocomplete
+            size="small"
+            fullWidth
+            value={books.find(b => b.id === selectedBook) || null}
+            onChange={(event, newValue) => {
+              if (newValue) {
+                setSelectedBook(newValue.id)
                 setSelectedChapter(1)
-                updateUrl(e.target.value, 1, selectedVersion)
-              }}
-            >
-              {books.map((book) => (
-                <MenuItem key={book.id} value={book.id}>
-                  {book.name}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
+                updateUrl(newValue.id, 1, selectedVersion)
+              }
+            }}
+            options={books}
+            getOptionLabel={(option) => option.name}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label={t('book')}
+                placeholder="Search books..."
+              />
+            )}
+            renderOption={(props, option) => (
+              <Box component="li" {...props}>
+                <Box>
+                  <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
+                    {option.name}
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    {option.testament} • {option.chapters?.length || 0} chapters
+                  </Typography>
+                </Box>
+              </Box>
+            )}
+            filterOptions={(options, { inputValue }) => {
+              return options.filter((option) =>
+                option.name.toLowerCase().includes(inputValue.toLowerCase()) ||
+                option.testament.toLowerCase().includes(inputValue.toLowerCase())
+              )
+            }}
+            ListboxProps={{
+              style: { maxHeight: 300 }
+            }}
+          />
         </Box>
 
         {/* Chapter Selection */}
diff --git a/app/globals.css b/app/globals.css
index c61e466..b0c9bf7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -28,12 +28,19 @@ body {
 }
 
 /* Bible Reader Full Screen Mode - Hide only site-level elements */
-.bible-fullscreen-mode .MuiAppBar-root:first-child,
+.bible-fullscreen-mode header,
+.bible-fullscreen-mode nav,
+.bible-fullscreen-mode .MuiAppBar-root,
 .bible-fullscreen-mode footer,
 .bible-fullscreen-mode [data-floating-chat="true"] {
   display: none !important;
 }
 
+/* Exception: Keep bible reader's internal navigation visible */
+.bible-fullscreen-mode .MuiContainer-root .MuiPaper-root {
+  display: block !important;
+}
+
 .bible-fullscreen-mode {
   overflow: auto;
 }