Add star buttons to ChapterSelector and BibleReader for complete favorites system

frontend/src/components/BibleReader.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ArrowLeft, BookOpen, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ArrowLeft, BookOpen, ChevronLeft, ChevronRight, Star } from 'lucide-react';
 import { getChapter, getBook } from '../services/api';
 
 interface BibleReaderProps {
@@ -7,12 +7,14 @@ interface BibleReaderProps {
   chapter: string;
   onBack: () => void;
   formatBookName: (bookName: string) => string;
+  user?: any;
 }
 
-const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, formatBookName }) => {
+const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, formatBookName, user }) => {
   const [content, setContent] = useState<string>('');
   const [loading, setLoading] = useState(true);
   const [chapters, setChapters] = useState<string[]>([]);
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
   const [fontSize, setFontSize] = useState<'small' | 'medium' | 'large'>(() => {
     // Load font size preference from localStorage
     const saved = localStorage.getItem('fontSize');
@@ -24,6 +26,92 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
     loadChapters();
   }, [book, chapter]);
 
+  // Load favorites when user is available
+  useEffect(() => {
+    if (user) {
+      loadFavorites();
+    }
+  }, [user, book, chapter]);
+
+  const loadFavorites = async () => {
+    if (!user) return;
+    
+    try {
+      const response = await fetch('/api/favorites', {
+        credentials: 'include'
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        const verseFavorites = new Set(
+          data.favorites
+            .filter((fav: any) => fav.book === book && fav.chapter === chapter && fav.verse_start) // Only verse-level favorites for this chapter
+            .map((fav: any) => fav.verse_end ? `${fav.verse_start}-${fav.verse_end}` : fav.verse_start.toString())
+        );
+        setFavorites(verseFavorites);
+      }
+    } catch (error) {
+      console.error('Failed to load favorites:', error);
+    }
+  };
+
+  const toggleFavorite = async (verseNumber: string) => {
+    if (!user) return;
+
+    const isFavorited = favorites.has(verseNumber);
+    
+    try {
+      if (isFavorited) {
+        // Remove favorite
+        const response = await fetch('/api/favorites', {
+          credentials: 'include'
+        });
+        
+        if (response.ok) {
+          const data = await response.json();
+          const verseFavorite = data.favorites.find((fav: any) => 
+            fav.book === book && 
+            fav.chapter === chapter && 
+            fav.verse_start === parseInt(verseNumber)
+          );
+          
+          if (verseFavorite) {
+            await fetch(`/api/favorites/${verseFavorite.id}`, {
+              method: 'DELETE',
+              credentials: 'include'
+            });
+            
+            setFavorites(prev => {
+              const newFavorites = new Set(prev);
+              newFavorites.delete(verseNumber);
+              return newFavorites;
+            });
+          }
+        }
+      } else {
+        // Add favorite
+        const response = await fetch('/api/favorites', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({
+            book: book,
+            chapter: chapter,
+            verse_start: parseInt(verseNumber)
+          })
+        });
+        
+        if (response.ok) {
+          setFavorites(prev => new Set(prev).add(verseNumber));
+        }
+      }
+    } catch (error) {
+      console.error('Failed to toggle favorite:', error);
+    }
+  };
+
   const loadChapters = async () => {
     try {
       const response = await getBook(book);
@@ -123,9 +211,27 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
         const verseText = verseMatch[2];
 
         verses.push(
-          <div key={`verse-${verseNumber}`} className="mb-4">
-            <span className="verse-number">{verseNumber}</span>
-            <span className="bible-text">{verseText}</span>
+          <div key={`verse-${verseNumber}`} className="mb-4 flex items-start group">
+            {/* Star button - only show for authenticated users */}
+            {user && (
+              <button
+                onClick={() => toggleFavorite(verseNumber)}
+                className="mr-2 mt-1 p-1 opacity-0 group-hover:opacity-100 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-all"
+                title={favorites.has(verseNumber) ? 'Remove from favorites' : 'Add to favorites'}
+              >
+                <Star 
+                  className={`h-3 w-3 ${
+                    favorites.has(verseNumber) 
+                      ? 'text-yellow-500 fill-yellow-500' 
+                      : 'text-gray-400 hover:text-yellow-500'
+                  } transition-colors`}
+                />
+              </button>
+            )}
+            <div className="flex-1">
+              <span className="verse-number">{verseNumber}</span>
+              <span className="bible-text">{verseText}</span>
+            </div>
           </div>
         );
       } else if (line.startsWith('#')) {
@@ -213,6 +319,11 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
         <h1 className="book-title">
           {formatBookName(book)} {chapter}
         </h1>
+        {user && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+            Hover over verses to see ★ and add them to your favorites
+          </p>
+        )}
       </div>
 
       {/* Bible Content */}

frontend/src/components/ChapterSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ArrowLeft, FileText } from 'lucide-react';
+import { ArrowLeft, FileText, Star } from 'lucide-react';
 import { getBook } from '../services/api';
 
 interface ChapterSelectorProps {
@@ -7,16 +7,103 @@ interface ChapterSelectorProps {
   onChapterSelect: (chapter: string) => void;
   onBack: () => void;
   formatBookName: (bookName: string) => string;
+  user?: any;
 }
 
-const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName }) => {
+const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName, user }) => {
   const [chapters, setChapters] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
 
   useEffect(() => {
     loadChapters();
   }, [book]);
 
+  // Load favorites when user is available
+  useEffect(() => {
+    if (user) {
+      loadFavorites();
+    }
+  }, [user, book]);
+
+  const loadFavorites = async () => {
+    if (!user) return;
+    
+    try {
+      const response = await fetch('/api/favorites', {
+        credentials: 'include'
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        const chapterFavorites = new Set(
+          data.favorites
+            .filter((fav: any) => fav.book === book && fav.chapter && !fav.verse_start) // Only chapter-level favorites for this book
+            .map((fav: any) => fav.chapter)
+        );
+        setFavorites(chapterFavorites);
+      }
+    } catch (error) {
+      console.error('Failed to load favorites:', error);
+    }
+  };
+
+  const toggleFavorite = async (chapter: string, event: React.MouseEvent) => {
+    event.stopPropagation(); // Prevent chapter selection when clicking star
+    
+    if (!user) return;
+
+    const isFavorited = favorites.has(chapter);
+    
+    try {
+      if (isFavorited) {
+        // Remove favorite
+        const response = await fetch('/api/favorites', {
+          credentials: 'include'
+        });
+        
+        if (response.ok) {
+          const data = await response.json();
+          const chapterFavorite = data.favorites.find((fav: any) => 
+            fav.book === book && fav.chapter === chapter && !fav.verse_start
+          );
+          
+          if (chapterFavorite) {
+            await fetch(`/api/favorites/${chapterFavorite.id}`, {
+              method: 'DELETE',
+              credentials: 'include'
+            });
+            
+            setFavorites(prev => {
+              const newFavorites = new Set(prev);
+              newFavorites.delete(chapter);
+              return newFavorites;
+            });
+          }
+        }
+      } else {
+        // Add favorite
+        const response = await fetch('/api/favorites', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({
+            book: book,
+            chapter: chapter
+          })
+        });
+        
+        if (response.ok) {
+          setFavorites(prev => new Set(prev).add(chapter));
+        }
+      }
+    } catch (error) {
+      console.error('Failed to toggle favorite:', error);
+    }
+  };
+
   const loadChapters = async () => {
     try {
       setLoading(true);
@@ -70,21 +157,44 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
         <p className="text-lg text-gray-600 dark:text-gray-400">
           Select a chapter to read
         </p>
+        {user && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+            Click the ★ to add chapters to your favorites
+          </p>
+        )}
       </div>
 
       {/* Chapters Grid */}
       <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3 max-w-4xl mx-auto">
         {chapters.map((chapter) => (
-          <button
-            key={chapter}
-            onClick={() => onChapterSelect(chapter)}
-            className="group bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 text-center"
-          >
-            <FileText className="mx-auto h-6 w-6 text-blue-600 dark:text-blue-400 mb-2 group-hover:scale-110 transition-transform" />
-            <span className="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400">
-              {chapter}
-            </span>
-          </button>
+          <div key={chapter} className="relative">
+            <button
+              onClick={() => onChapterSelect(chapter)}
+              className="group bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 text-center w-full"
+            >
+              <FileText className="mx-auto h-6 w-6 text-blue-600 dark:text-blue-400 mb-2 group-hover:scale-110 transition-transform" />
+              <span className="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400">
+                {chapter}
+              </span>
+            </button>
+            
+            {/* Star button - only show for authenticated users */}
+            {user && (
+              <button
+                onClick={(e) => toggleFavorite(chapter, e)}
+                className="absolute top-1 right-1 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                title={favorites.has(chapter) ? 'Remove from favorites' : 'Add to favorites'}
+              >
+                <Star 
+                  className={`h-3 w-3 ${
+                    favorites.has(chapter) 
+                      ? 'text-yellow-500 fill-yellow-500' 
+                      : 'text-gray-400 hover:text-yellow-500'
+                  } transition-colors`}
+                />
+              </button>
+            )}
+          </div>
         ))}
       </div>