Fix search results navigation and Material-UI deprecation issues

- Fix search API to include bookId, verseId, and bookKey in response for proper navigation
- Update Bible reader to handle both book ID and bookKey matching for robust navigation
- Replace deprecated ListItem button prop with ListItemButton for Material-UI v5+ compatibility
- Add fallback logic in search result navigation to handle missing book identifiers
- Ensure "Go to" button takes users to exact verse with proper highlighting and scrolling

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

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/bible/reader.tsx

@@ -214,9 +214,9 @@ export default function BibleReaderNew() {
       const verseParam = searchParams.get('verse')
 
       if (bookParam) {
-        const book = books.find(b => b.id === bookParam)
+        const book = books.find(b => b.id === bookParam) || books.find(b => b.bookKey === bookParam)
         if (book) {
-          setSelectedBook(bookParam)
+          setSelectedBook(book.id)
           if (chapterParam) {
             const chapter = parseInt(chapterParam)
             if (chapter > 0) {

app/[locale]/search/page.tsx

@@ -17,6 +17,7 @@ import {
   Chip,
   List,
   ListItem,
+  ListItemButton,
   ListItemText,
   IconButton,
   Tooltip,
@@ -366,7 +367,8 @@ export default function SearchPage() {
   }, [])
 
   const handleNavigateToVerse = useCallback((result: SearchResult) => {
-    router.push(`/${locale}/bible?book=${result.bookId}&chapter=${result.chapter}&verse=${result.verse}`)
+    const bookIdentifier = result.bookId || result.bookKey || result.book
+    router.push(`/${locale}/bible?book=${bookIdentifier}&chapter=${result.chapter}&verse=${result.verse}`)
   }, [router, locale])
 
   const clearFilters = useCallback(() => {
@@ -493,14 +495,13 @@ export default function SearchPage() {
                 >
                   <List dense>
                     {suggestions.map((suggestion, index) => (
-                      <ListItem
-                        key={index}
-                        button
-                        onClick={() => {
-                          setSearchQuery(suggestion.text)
-                          handleSearch(suggestion.text)
-                        }}
-                      >
+                      <ListItem key={index} disablePadding>
+                        <ListItemButton
+                          onClick={() => {
+                            setSearchQuery(suggestion.text)
+                            handleSearch(suggestion.text)
+                          }}
+                        >
                         <ListItemText
                           primary={
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -520,6 +521,7 @@ export default function SearchPage() {
                             </Box>
                           }
                         />
+                        </ListItemButton>
                       </ListItem>
                     ))}
                   </List>

app/api/search/verses/route.ts

@@ -171,7 +171,10 @@ export async function GET(request: NextRequest) {
 
       return {
         id: verse.id.toString(),
+        verseId: verse.id.toString(),
         book: verse.chapter.book.name,
+        bookId: verse.chapter.book.id,
+        bookKey: verse.chapter.book.bookKey,
         chapter: verse.chapter.chapterNum,
         verse: verse.verseNum,
         text: verse.text,