@@ -20,6 +20,7 @@ import ReaderView from "./components/pages/ReaderView";
2020import SettingsView from "./components/pages/SettingsView" ;
2121import StatsView from "./components/pages/StatsView" ;
2222import ClerkAuth from "./components/pages/Auth" ;
23+ import ScrapbookLayout from "./components/layout/ScrapbookLayout" ;
2324import { ReaderErrorBoundary } from "./components/ui/ReaderErrorBoundary" ;
2425
2526const App : React . FC = ( ) => {
@@ -53,7 +54,6 @@ const App: React.FC = () => {
5354 } ) ) ;
5455
5556 // Library & Stats Hooks
56- // Guest and Clerk users both persist through the API with scoped identities.
5757 const persistent = true ;
5858
5959 useBookStoreController ( { persistent } ) ;
@@ -143,87 +143,81 @@ const App: React.FC = () => {
143143 const root = document . documentElement ;
144144 root . classList . toggle ( "dark" , theme === Theme . DARK ) ;
145145 root . classList . toggle ( "reduce-motion" , reduceMotion ) ;
146-
147- const bgColor = theme === Theme . DARK ? "#0f0e0d" : "#fefcf8" ;
148- document . body . style . backgroundColor = bgColor ;
149- document . body . style . transition = reduceMotion ? "none" : "background-color 0.3s ease" ;
150146 } , [ theme , reduceMotion ] ) ;
151147
152- // Render - Explicit Auth Screen (only when user asks to sign in )
148+ // Render - Explicit Auth Screen (Scrapbook Themed )
153149 if ( showAuthScreen && ! isLoaded ) {
154150 return (
155- < div className = "min-h-screen flex flex-col items-center justify-center bg-light-primary dark:bg-dark-primary" >
156- < div className = "relative mb-6" >
157- < div className = "absolute inset-0 bg-gradient-to-br from-light-accent/20 to-amber-500/20 dark:from-dark-accent/20 dark:to-amber-400/20 rounded-3xl blur-3xl scale-150" />
158- < div className = "relative w-20 h-20 rounded-3xl bg-gradient-to-br from-light-accent to-amber-600 dark:from-dark-accent dark:to-amber-500 flex items-center justify-center shadow-2xl" >
159- < BookOpen className = "w-9 h-9 text-white animate-pulse-soft" strokeWidth = { 1.5 } />
160- </ div >
161- </ div >
162- < div className = "text-center space-y-2" >
163- < h2 className = "text-xl font-semibold text-light-text dark:text-dark-text" > Sanctuary</ h2 >
164- < p className = "text-sm text-light-text-muted dark:text-dark-text-muted" > Preparing your reading sanctuary...</ p >
151+ < ScrapbookLayout >
152+ < div className = "min-h-screen flex flex-col items-center justify-center pointer-events-none" >
153+ < div className = "bg-white p-8 rounded-full shadow-scrap-deep animate-pulse-soft border-4 border-scrap-navy pointer-events-auto" >
154+ < BookOpen className = "w-12 h-12 text-scrap-navy" strokeWidth = { 2 } />
155+ </ div >
156+ < p className = "mt-6 text-scrap-navy font-head text-xl font-bold bg-scrap-cream px-4 py-1 rounded-lg border border-scrap-navy shadow-sm transform -rotate-2" >
157+ Gathering supplies...
158+ </ p >
165159 </ div >
166- </ div >
160+ </ ScrapbookLayout >
167161 ) ;
168162 }
169163
170164 if ( showAuthScreen ) {
171- return < ClerkAuth onContinueAsGuest = { ( ) => {
172- setIsGuest ( true ) ;
173- setShowAuthScreen ( false ) ;
174- } } /> ;
165+ return (
166+ < ScrapbookLayout >
167+ < ClerkAuth onContinueAsGuest = { ( ) => {
168+ setIsGuest ( true ) ;
169+ setShowAuthScreen ( false ) ;
170+ } } />
171+ </ ScrapbookLayout >
172+ ) ;
175173 }
176174
177175 const isReader = view === View . READER ;
178176
179- // Render - App
177+ if ( isReader && selectedBook ) {
178+ return (
179+ < ReaderErrorBoundary onRecover = { ( ) => { void handleCloseReader ( ) ; } } resetKey = { selectedBook . id } >
180+ < ReaderView
181+ book = { selectedBook }
182+ onClose = { handleCloseReader }
183+ onUpdateProgress = { handleReaderProgress }
184+ onAddBookmark = { handleAddBookmark }
185+ onRemoveBookmark = { handleRemoveBookmark }
186+ getBookContent = { getBookContent }
187+ />
188+ </ ReaderErrorBoundary >
189+ ) ;
190+ }
191+
192+ // Render - Main App (Scrapbook Layout)
180193 return (
181- < div className = { `min-h-screen font-sans bg-light-primary dark:bg-dark-primary text-light-text dark:text-dark-text transition-colors duration-300 ${ isReader ? "immersive-layout" : "standard-layout" } ` } >
194+ < ScrapbookLayout view = { view } >
182195 { /* Header */ }
183- { ! isReader && (
184- < Header
185- theme = { theme }
186- onToggleTheme = { toggleTheme }
187- searchTerm = { searchTerm }
188- onSearch = { setSearchTerm }
189- isGuest = { isGuest }
190- onShowLogin = { isGuest ? handleShowLogin : undefined }
191- onSignOut = { isSignedIn ? handleSignOut : undefined }
192- userEmail = { user ?. primaryEmailAddress ?. emailAddress }
193- userImage = { user ?. imageUrl }
194- />
195- ) }
196-
197- { /* Main Content */ }
198- < main className = { `relative ${ isReader ? "reader-main" : "standard-main" } } >
199- < div className = { `${ isReader ? "" : "page-shell animate-fadeIn" } } >
196+ < Header
197+ theme = { theme }
198+ onToggleTheme = { toggleTheme }
199+ searchTerm = { searchTerm }
200+ onSearch = { setSearchTerm }
201+ isGuest = { isGuest }
202+ onShowLogin = { isGuest ? handleShowLogin : undefined }
203+ onSignOut = { isSignedIn ? handleSignOut : undefined }
204+ userEmail = { user ?. primaryEmailAddress ?. emailAddress }
205+ userImage = { user ?. imageUrl }
206+ />
207+
208+ { /* Main Content Area */ }
209+ < main className = "flex-1 w-full max-w-7xl mx-auto px-4 pb-32" >
200210 { view === View . LIBRARY && (
201- < LibraryGrid
202- onSelectBook = { handleSelectBook }
203- />
211+ < LibraryGrid onSelectBook = { handleSelectBook } />
204212 ) }
213+ { /* We keep Stats and Settings as is for now, they will inherit global font/color styles but might need specific layout tweaks later if requested. The prompt focused on Library/Empty State. */ }
205214 { view === View . SETTINGS && < SettingsView /> }
206215 { view === View . STATS && < StatsView /> }
207- { view === View . READER && selectedBook && (
208- < ReaderErrorBoundary onRecover = { ( ) => { void handleCloseReader ( ) ; } } resetKey = { selectedBook . id } >
209- < ReaderView
210- book = { selectedBook }
211- onClose = { handleCloseReader }
212- onUpdateProgress = { handleReaderProgress }
213- onAddBookmark = { handleAddBookmark }
214- onRemoveBookmark = { handleRemoveBookmark }
215- getBookContent = { getBookContent }
216- />
217- </ ReaderErrorBoundary >
218- ) }
219- </ div >
220216 </ main >
221217
222218 { /* Navigation */ }
223- { ! isReader && (
224- < Navigation activeView = { view } onNavigate = { setView } isReaderActive = { ! ! selectedBookId } />
225- ) }
226- </ div >
219+ < Navigation activeView = { view } onNavigate = { setView } isReaderActive = { ! ! selectedBookId } />
220+ </ ScrapbookLayout >
227221 ) ;
228222} ;
229223
0 commit comments