RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fix verse hover functionality with improved visibility and better UX

Browse Source
This commit is contained in:
Ryderjj89
2025-09-13 19:06:21 -04:00
parent dc62b25b34
commit 568f253bbb
1 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/BibleReader.tsx
View File

@@ -49,6 +49,7 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
const verseFavorites = new Set<string>(favoriteStrings); const verseFavorites = new Set<string>(favoriteStrings);
setFavorites(verseFavorites); setFavorites(verseFavorites);
console.log('Loaded verse favorites:', favoriteStrings);
} }
} catch (error) { } catch (error) {
console.error('Failed to load favorites:', error); console.error('Failed to load favorites:', error);
@@ -76,16 +77,19 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
); );
if (verseFavorite) { if (verseFavorite) {
await fetch(`/api/favorites/${verseFavorite.id}`, { const deleteResponse = await fetch(`/api/favorites/${verseFavorite.id}`, {
method: 'DELETE', method: 'DELETE',
credentials: 'include' credentials: 'include'
}); });
setFavorites(prev => { if (deleteResponse.ok) {
const newFavorites = new Set(prev); setFavorites(prev => {
newFavorites.delete(verseNumber); const newFavorites = new Set(prev);
return newFavorites; newFavorites.delete(verseNumber);
}); return newFavorites;
});
console.log('Removed verse favorite:', verseNumber);
}
} }
} }
} else { } else {
@@ -105,6 +109,11 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
if (response.ok) { if (response.ok) {
setFavorites(prev => new Set(prev).add(verseNumber)); setFavorites(prev => new Set(prev).add(verseNumber));
console.log('Added verse favorite:', verseNumber);
} 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);
} }
} }
} catch (error) { } catch (error) {
@@ -211,12 +220,16 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
const verseText = verseMatch[2]; const verseText = verseMatch[2];
verses.push( verses.push(
<div key={`verse-${verseNumber}`} className="mb-4 flex items-start group"> <div key={`verse-${verseNumber}`} className="mb-4 flex items-start hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded transition-colors group">
{/* Star button - only show for authenticated users */} {/* Star button - only show for authenticated users */}
{user && ( {user && (
<button <button
onClick={() => toggleFavorite(verseNumber)} 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" className={`mr-2 mt-1 p-1 rounded transition-all ${
favorites.has(verseNumber)
? 'opacity-100'
: 'opacity-30 hover:opacity-100 group-hover:opacity-100'
} hover:bg-gray-200 dark:hover:bg-gray-600`}
title={favorites.has(verseNumber) ? 'Remove from favorites' : 'Add to favorites'} title={favorites.has(verseNumber) ? 'Remove from favorites' : 'Add to favorites'}
> >
<Star <Star
@@ -229,7 +242,7 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
</button> </button>
)} )}
<div className="flex-1"> <div className="flex-1">
<span className="verse-number">{verseNumber}</span> <span className="verse-number font-semibold text-blue-600 dark:text-blue-400 mr-2">{verseNumber}</span>
<span className="bible-text">{verseText}</span> <span className="bible-text">{verseText}</span>
</div> </div>
</div> </div>
@@ -238,14 +251,14 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
// Chapter header // Chapter header
const headerText = line.replace(/^#+\s*/, ''); const headerText = line.replace(/^#+\s*/, '');
verses.push( verses.push(
<h2 key={`header-${i}`} className="chapter-title"> <h2 key={`header-${i}`} className="chapter-title text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 mt-8">
{headerText} {headerText}
</h2> </h2>
); );
} else { } else {
// Regular text (continuation of previous verse or other content) // Regular text (continuation of previous verse or other content)
verses.push( verses.push(
<p key={`text-${i}`} className="bible-text mb-4"> <p key={`text-${i}`} className="bible-text mb-4 text-gray-700 dark:text-gray-300">
{line} {line}
</p> </p>
); );
@@ -316,7 +329,7 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
{/* Chapter Title */} {/* Chapter Title */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="book-title"> <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
{formatBookName(book)} {chapter} {formatBookName(book)} {chapter}
</h1> </h1>
{user && ( {user && (