From 94d17b1d167aabd4db9512fae6a80bf63f675189 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 14 Sep 2025 11:53:35 -0400
Subject: [PATCH] Add real-time favorites refresh and improve mobile layout -
 favorites menu updates instantly when favorites change

---
 frontend/src/App.tsx                    |  6 +++++
 frontend/src/components/BibleReader.tsx | 29 ++++++++++++++++---------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 87990f69..e86771bf 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -267,6 +267,11 @@ function App() {
       navigate(`/book/${bookName}`);
     };
 
+    const handleFavoriteChange = () => {
+      // This will trigger a re-render of the FavoritesMenu
+      setUser(prev => ({ ...prev }));
+    };
+
     if (!bookName || !chapterNumber || !actualBookName) {
       return <div>Chapter not found</div>;
     }
@@ -278,6 +283,7 @@ function App() {
         onBack={handleBack}
         formatBookName={formatBookName}
         user={user}
+        onFavoriteChange={handleFavoriteChange}
       />
     );
   };
diff --git a/frontend/src/components/BibleReader.tsx b/frontend/src/components/BibleReader.tsx
index 09c65b57..10d09e95 100644
--- a/frontend/src/components/BibleReader.tsx
+++ b/frontend/src/components/BibleReader.tsx
@@ -8,9 +8,10 @@ interface BibleReaderProps {
   onBack: () => void;
   formatBookName: (bookName: string) => string;
   user?: any;
+  onFavoriteChange?: () => void;
 }
 
-const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, formatBookName, user }) => {
+const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, formatBookName, user, onFavoriteChange }) => {
   const [content, setContent] = useState<string>('');
   const [loading, setLoading] = useState(true);
   const [chapters, setChapters] = useState<string[]>([]);
@@ -89,6 +90,7 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
                 return newFavorites;
               });
               console.log('Removed verse favorite:', verseNumber);
+              onFavoriteChange?.(); // Notify parent to refresh favorites menu
             }
           }
         }
@@ -110,10 +112,12 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
         if (response.ok) {
           setFavorites(prev => new Set(prev).add(verseNumber));
           console.log('Added verse favorite:', verseNumber);
+          onFavoriteChange?.(); // Notify parent to refresh favorites menu
         } else if (response.status === 409) {
           // 409 means it already exists, which is fine - just update the UI
           setFavorites(prev => new Set(prev).add(verseNumber));
           console.log('Verse favorite already exists, updated UI:', verseNumber);
+          onFavoriteChange?.(); // Notify parent to refresh favorites menu
         }
       }
     } catch (error) {
@@ -276,48 +280,53 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
   return (
     <div>
       {/* Header */}
-      <div className="flex items-center justify-between mb-8">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 space-y-4 sm:space-y-0">
         <button
           onClick={onBack}
           className="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
         >
           <ArrowLeft className="h-5 w-5" />
-          <span>Back to Chapters</span>
+          <span className="hidden sm:inline">Back to Chapters</span>
+          <span className="sm:hidden">Back</span>
         </button>
 
         {/* Font Size Controls */}
         <div className="flex items-center space-x-2">
-          <span className="text-sm text-gray-600 dark:text-gray-400">Font Size:</span>
+          <span className="hidden sm:inline text-sm text-gray-600 dark:text-gray-400">Font Size:</span>
+          <span className="sm:hidden text-xs text-gray-600 dark:text-gray-400">Size:</span>
           <div className="flex space-x-1">
             <button
               onClick={() => handleFontSizeChange('small')}
-              className={`px-3 py-1 text-xs rounded ${
+              className={`px-2 sm:px-3 py-1 text-xs rounded ${
                 fontSize === 'small'
                   ? 'bg-blue-600 text-white'
                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
               } transition-colors`}
             >
-              Small
+              <span className="hidden sm:inline">Small</span>
+              <span className="sm:hidden">S</span>
             </button>
             <button
               onClick={() => handleFontSizeChange('medium')}
-              className={`px-3 py-1 text-xs rounded ${
+              className={`px-2 sm:px-3 py-1 text-xs rounded ${
                 fontSize === 'medium'
                   ? 'bg-blue-600 text-white'
                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
               } transition-colors`}
             >
-              Medium
+              <span className="hidden sm:inline">Medium</span>
+              <span className="sm:hidden">M</span>
             </button>
             <button
               onClick={() => handleFontSizeChange('large')}
-              className={`px-3 py-1 text-xs rounded ${
+              className={`px-2 sm:px-3 py-1 text-xs rounded ${
                 fontSize === 'large'
                   ? 'bg-blue-600 text-white'
                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
               } transition-colors`}
             >
-              Large
+              <span className="hidden sm:inline">Large</span>
+              <span className="sm:hidden">L</span>
             </button>
           </div>
         </div>