From eeb30c24e8f72535f743070027d213dfd56b5530 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 15:24:54 -0400
Subject: [PATCH] Complete favorites separation by version and dynamic page
 titles

- BookSelector now filters favorites by version (fav.version === version)
- Book favorites include version in API requests
- Page header shows 'NKJV Bible' or 'ESV Bible' dynamically
- BookSelector receives current version from App.tsx
- Favorites are now strictly version-specific across all levels
- Both book and verse favorites work correctly per translation

Navigation and favorites now respect Bible version context!
---
 frontend/src/App.tsx                     |  1 +
 frontend/src/components/BookSelector.tsx | 22 ++++++++++++----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index dcf2d531..ed097893 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -290,6 +290,7 @@ function App() {
         formatBookName={formatBookName}
         user={user}
         onFavoriteChange={handleFavoriteChange}
+        version={versionId}
       />
     );
   };
diff --git a/frontend/src/components/BookSelector.tsx b/frontend/src/components/BookSelector.tsx
index c46590ff..a0dbda68 100644
--- a/frontend/src/components/BookSelector.tsx
+++ b/frontend/src/components/BookSelector.tsx
@@ -7,9 +7,10 @@ interface BookSelectorProps {
   formatBookName: (bookName: string) => string;
   user?: any;
   onFavoriteChange?: () => void;
+  version?: string;
 }
 
-const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange }) => {
+const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange, version = 'esv' }) => {
   const [favorites, setFavorites] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState(false);
 
@@ -22,31 +23,31 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
     }
   }, [user]);
 
-  // Also reload favorites when books change (page refresh)
+  // Also reload favorites when books or version change (page refresh/version switch)
   useEffect(() => {
     if (user && books.length > 0) {
       loadFavorites();
     }
-  }, [books, user]);
+  }, [books, user, version]);
 
   const loadFavorites = async () => {
     if (!user) return;
-    
+
     setLoading(true);
     try {
       const response = await fetch('/api/favorites', {
         credentials: 'include'
       });
-      
+
       if (response.ok) {
         const data = await response.json();
         const favoriteBooks: string[] = data.favorites
-          .filter((fav: any) => !fav.chapter) // Only book-level favorites
+          .filter((fav: any) => !fav.chapter && fav.version === version) // Only book-level favorites for current version
           .map((fav: any) => fav.book);
-        
+
         const bookFavorites = new Set<string>(favoriteBooks);
         setFavorites(bookFavorites);
-        console.log('Loaded book favorites:', favoriteBooks);
+        console.log('Loaded book favorites for version:', version, favoriteBooks);
       }
     } catch (error) {
       console.error('Failed to load favorites:', error);
@@ -99,7 +100,8 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
           },
           credentials: 'include',
           body: JSON.stringify({
-            book: book
+            book: book,
+            version: version
           })
         });
         
@@ -164,7 +166,7 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
     <div className="space-y-12">
       <div className="text-center">
         <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
-          ESV Bible
+          {version.toUpperCase()} Bible
         </h1>
         <p className="text-lg text-gray-600 dark:text-gray-400">
           Select a book to begin reading