From 14c4ec2edc2d7342cee27703aac9a67e56d4d984 Mon Sep 17 00:00:00 2001 From: Andrei Date: Wed, 24 Sep 2025 20:50:55 +0000 Subject: [PATCH] Fix full-screen mode usability issues and enhance reading experience MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Full-Screen Mode Improvements: - Fix navigation controls background transparency issue in reading mode - Add semi-transparent backgrounds with backdrop blur for better visibility - Implement theme-aware colors matching user's selected theme (light/dark/sepia) - Add subtle borders for better visual definition without distraction Verse Action Buttons Enhancement: - Enable bookmark, copy, and chat buttons in full-screen reading mode - Remove reading mode restriction that was hiding essential verse-level functionality - Add theme-aware hover effects for better integration in reading mode - Implement adaptive opacity (0.2 in reading mode, 0.3 in normal mode) - Smooth hover transitions that reveal buttons when needed Smart Chat Integration: - Automatically exit full-screen mode when chat icon is clicked from reading mode - Add smooth transition timing to allow exit animation to complete - Preserve verse context and pre-filled AI messages through mode transitions - Prevent chat from opening hidden behind full-screen overlay - Maintain authentication flow and redirect logic User Experience Enhancements: - Professional navigation bar with backdrop blur effect (modern glass morphism) - Non-intrusive verse actions that don't distract from reading - Intelligent behavior that adapts based on current reading mode - Seamless transition from immersive reading to AI conversations - Consistent visual experience across all themes and modes Technical Implementation: - Theme-aware styling for dark, light, and sepia modes - CSS backdrop-filter for modern blur effects - Smart timing with setTimeout for smooth transitions - Preserved functionality while improving visual integration - Enhanced hover states with custom theme-matching colors 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- app/[locale]/bible/reader.tsx | 121 ++++++++++++++++++++++++---------- 1 file changed, 87 insertions(+), 34 deletions(-) diff --git a/app/[locale]/bible/reader.tsx b/app/[locale]/bible/reader.tsx index 4b8b409..8a4c833 100644 --- a/app/[locale]/bible/reader.tsx +++ b/app/[locale]/bible/reader.tsx @@ -702,18 +702,26 @@ export default function BibleReaderNew() { return } + // Exit full-screen mode if currently in reading mode so chat is visible + if (preferences.readingMode) { + setPreferences(prev => ({ ...prev, readingMode: false })) + } + const versionName = versions.find(v => v.id === selectedVersion)?.name || selectedVersion const bookName = currentBook?.name || 'Unknown Book' const initialMessage = `Explain in depth this verse "${verse.text}" from ${versionName}, ${bookName} ${selectedChapter}:${verse.verseNum} and its meaning` - // Dispatch event to open floating chat with the pre-filled message - window.dispatchEvent(new CustomEvent('floating-chat:open', { - detail: { - initialMessage: initialMessage, - fullscreen: false - } - })) + // Small delay to allow full-screen exit animation to complete + setTimeout(() => { + // Dispatch event to open floating chat with the pre-filled message + window.dispatchEvent(new CustomEvent('floating-chat:open', { + detail: { + initialMessage: initialMessage, + fullscreen: false + } + })) + }, 200) } const getThemeStyles = () => { @@ -796,31 +804,67 @@ export default function BibleReaderNew() { - {!preferences.readingMode && ( - - handleVerseBookmark(verse)} - sx={{ color: isBookmarked ? 'warning.main' : 'action.active' }} - > - {isBookmarked ? : } - - handleCopyVerse(verse)} - sx={{ color: 'action.active' }} - > - - - handleVerseChat(verse)} - sx={{ color: 'action.active' }} - > - - - - )} + + handleVerseBookmark(verse)} + sx={{ + color: isBookmarked ? 'warning.main' : 'action.active', + '&:hover': { + backgroundColor: preferences.readingMode + ? (preferences.theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : + preferences.theme === 'sepia' ? 'rgba(92, 75, 58, 0.1)' : + 'rgba(0, 0, 0, 0.05)') + : 'action.hover' + } + }} + > + {isBookmarked ? : } + + handleCopyVerse(verse)} + sx={{ + color: 'action.active', + '&:hover': { + backgroundColor: preferences.readingMode + ? (preferences.theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : + preferences.theme === 'sepia' ? 'rgba(92, 75, 58, 0.1)' : + 'rgba(0, 0, 0, 0.05)') + : 'action.hover' + } + }} + > + + + handleVerseChat(verse)} + sx={{ + color: 'action.active', + '&:hover': { + backgroundColor: preferences.readingMode + ? (preferences.theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : + preferences.theme === 'sepia' ? 'rgba(92, 75, 58, 0.1)' : + 'rgba(0, 0, 0, 0.05)') + : 'action.hover' + } + }} + > + + + ) } @@ -832,8 +876,17 @@ export default function BibleReaderNew() { mb: preferences.readingMode ? 1 : 2, p: preferences.readingMode ? 1 : 2, ...getThemeStyles(), - border: preferences.readingMode ? 'none' : `1px solid ${getThemeStyles().borderColor}`, - backgroundColor: preferences.readingMode ? 'transparent' : getThemeStyles().backgroundColor, + border: preferences.readingMode + ? `1px solid ${preferences.theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : + preferences.theme === 'sepia' ? 'rgba(92, 75, 58, 0.1)' : + 'rgba(0, 0, 0, 0.1)'}` + : `1px solid ${getThemeStyles().borderColor}`, + backgroundColor: preferences.readingMode + ? (preferences.theme === 'dark' ? 'rgba(26, 26, 26, 0.95)' : + preferences.theme === 'sepia' ? 'rgba(247, 243, 233, 0.95)' : + 'rgba(255, 255, 255, 0.95)') + : getThemeStyles().backgroundColor, + backdropFilter: preferences.readingMode ? 'blur(8px)' : 'none', position: 'sticky', top: 0, zIndex: 1,