Create comprehensive bookmarks management page
Add complete bookmarks page with navigation functionality: Features: - Dedicated /bookmarks page for viewing all saved bookmarks - Support for both chapter and verse bookmarks in unified view - Statistics dashboard showing total, chapter, and verse bookmark counts - Tabbed filtering (All, Chapters, Verses) for easy organization - Direct navigation to Bible reading page with URL parameters - Delete functionality for individual bookmarks - Empty state with call-to-action to start reading Navigation Integration: - Add Bookmarks to main navigation menu (authenticated users only) - Add Bookmarks to user profile dropdown menu - Dynamic navigation based on authentication state Bible Page Enhancements: - URL parameter support for bookmark navigation (book, chapter, verse) - Verse highlighting when navigating from bookmarks - Auto-clear highlight after 3 seconds for better UX API Endpoints: - /api/bookmarks/all - Unified endpoint for all user bookmarks - Returns transformed data optimized for frontend consumption Multilingual Support: - Full Romanian and English translations - Consistent messaging across all bookmark interfaces 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -34,6 +34,7 @@ import {
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
import { useAuth } from '@/hooks/use-auth'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
|
||||
interface BibleVerse {
|
||||
id: string
|
||||
@@ -60,6 +61,7 @@ export default function BiblePage() {
|
||||
const theme = useTheme()
|
||||
const t = useTranslations('pages.bible')
|
||||
const locale = useLocale()
|
||||
const searchParams = useSearchParams()
|
||||
const [books, setBooks] = useState<BibleBook[]>([])
|
||||
const [selectedBook, setSelectedBook] = useState<string>('')
|
||||
const [selectedChapter, setSelectedChapter] = useState<number>(1)
|
||||
@@ -69,6 +71,7 @@ export default function BiblePage() {
|
||||
const [bookmarkLoading, setBookmarkLoading] = useState(false)
|
||||
const [verseBookmarks, setVerseBookmarks] = useState<{[key: string]: any}>({})
|
||||
const [verseBookmarkLoading, setVerseBookmarkLoading] = useState<{[key: string]: boolean}>({})
|
||||
const [highlightedVerse, setHighlightedVerse] = useState<number | null>(null)
|
||||
const { user } = useAuth()
|
||||
|
||||
// Fetch available books
|
||||
@@ -88,6 +91,38 @@ export default function BiblePage() {
|
||||
})
|
||||
}, [])
|
||||
|
||||
// Handle URL parameters for navigation from bookmarks
|
||||
useEffect(() => {
|
||||
if (books.length > 0) {
|
||||
const bookParam = searchParams.get('book')
|
||||
const chapterParam = searchParams.get('chapter')
|
||||
const verseParam = searchParams.get('verse')
|
||||
|
||||
if (bookParam) {
|
||||
const book = books.find(b => b.id === bookParam)
|
||||
if (book) {
|
||||
setSelectedBook(bookParam)
|
||||
|
||||
if (chapterParam) {
|
||||
const chapter = parseInt(chapterParam)
|
||||
if (chapter > 0) {
|
||||
setSelectedChapter(chapter)
|
||||
}
|
||||
}
|
||||
|
||||
if (verseParam) {
|
||||
const verse = parseInt(verseParam)
|
||||
if (verse > 0) {
|
||||
setHighlightedVerse(verse)
|
||||
// Clear highlight after 3 seconds
|
||||
setTimeout(() => setHighlightedVerse(null), 3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [books, searchParams])
|
||||
|
||||
// Fetch verses when book/chapter changes
|
||||
useEffect(() => {
|
||||
if (selectedBook && selectedChapter) {
|
||||
@@ -445,9 +480,16 @@ export default function BiblePage() {
|
||||
sx={{
|
||||
lineHeight: 1.8,
|
||||
fontSize: '1.1rem',
|
||||
bgcolor: isVerseBookmarked ? 'warning.light' : 'transparent',
|
||||
borderRadius: isVerseBookmarked ? 1 : 0,
|
||||
p: isVerseBookmarked ? 1 : 0,
|
||||
bgcolor: highlightedVerse === verse.verseNum
|
||||
? 'primary.light'
|
||||
: isVerseBookmarked
|
||||
? 'warning.light'
|
||||
: 'transparent',
|
||||
borderRadius: (isVerseBookmarked || highlightedVerse === verse.verseNum) ? 1 : 0,
|
||||
p: (isVerseBookmarked || highlightedVerse === verse.verseNum) ? 1 : 0,
|
||||
transition: 'all 0.3s ease',
|
||||
border: highlightedVerse === verse.verseNum ? '2px solid' : 'none',
|
||||
borderColor: 'primary.main',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
|
||||
Reference in New Issue
Block a user