From 12c9a4a0559db0e17f9da283cdc9bc8933a756a6 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 15:32:08 -0400
Subject: [PATCH] Complete favorites system version separation and homepage
 update

- **ChapterSelector**: Added version filtering for chapter favorites
- **VersionProp**: ChapterSelector now receives and uses version parameter
- **API calls**: Chapter favorites include version in create requests
- **Favorites filtering**: .filter(...&& fav.version === version) for both level and chapter favorites
- **Homepage text**: Changed 'Both translations' to 'All translations' for future-proofing
- **All favorite types**: Now properly separated by Bible version

Users can now safely favorite books/chapters/verses in different versions without cross-contamination.
---
 frontend/src/App.tsx                        |  1 +
 frontend/src/components/ChapterSelector.tsx | 17 ++++++++++-------
 frontend/src/components/VersionSelector.tsx |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ed097893..e26e7afa 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -325,6 +325,7 @@ function App() {
         formatBookName={formatBookName}
         user={user}
         onFavoriteChange={handleFavoriteChange}
+        version={versionId}
       />
     );
   };
diff --git a/frontend/src/components/ChapterSelector.tsx b/frontend/src/components/ChapterSelector.tsx
index d97fb43b..9e86269b 100644
--- a/frontend/src/components/ChapterSelector.tsx
+++ b/frontend/src/components/ChapterSelector.tsx
@@ -9,9 +9,10 @@ interface ChapterSelectorProps {
   formatBookName: (bookName: string) => string;
   user?: any;
   onFavoriteChange?: () => void;
+  version?: string;
 }
 
-const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName, user, onFavoriteChange }) => {
+const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName, user, onFavoriteChange, version = 'esv' }) => {
   const [chapters, setChapters] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [favorites, setFavorites] = useState<Set<string>>(new Set());
@@ -25,24 +26,25 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
     if (user) {
       loadFavorites();
     }
-  }, [user, book]);
+  }, [user, book, version]);
 
   const loadFavorites = async () => {
     if (!user) return;
-    
+
     try {
       const response = await fetch('/api/favorites', {
         credentials: 'include'
       });
-      
+
       if (response.ok) {
         const data = await response.json();
         const favoriteChapters: string[] = data.favorites
-          .filter((fav: any) => fav.book === book && fav.chapter && !fav.verse_start) // Only chapter-level favorites for this book
+          .filter((fav: any) => fav.book === book && fav.chapter && fav.version === version && !fav.verse_start) // Only chapter-level favorites for this book and version
           .map((fav: any) => fav.chapter);
-        
+
         const chapterFavorites = new Set<string>(favoriteChapters);
         setFavorites(chapterFavorites);
+        console.log('Loaded chapter favorites for version:', version, favoriteChapters);
       }
     } catch (error) {
       console.error('Failed to load favorites:', error);
@@ -93,7 +95,8 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
           credentials: 'include',
           body: JSON.stringify({
             book: book,
-            chapter: chapter
+            chapter: chapter,
+            version: version
           })
         });
         
diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
index 12b3ce18..4e9688c7 100644
--- a/frontend/src/components/VersionSelector.tsx
+++ b/frontend/src/components/VersionSelector.tsx
@@ -83,7 +83,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect }) =>
 
         <div className="text-center mt-12">
           <p className="text-sm text-gray-500 dark:text-gray-400">
-            Both translations include the complete Old and New Testaments, with search and bookmarking features.
+            All translations include the complete Old and New Testaments, with search and bookmarking features.
           </p>
         </div>
       </div>