{showConfetti && (

{(confettiPieces || []).map(p => (

))}

)} {showBadge && (

{showBadge.emoji}

{showBadge.text}

{celebrationBook &&

You finished "{celebrationBook.title}"!

}

)}

Story Stack

{stats.finished > 0 ? stats.finished + ' book' + (stats.finished !== 1 ? 's' : '') + ' conquered' : 'Your reading journey begins'}

{(memberList || []).length > 1 && (

{(memberList || []).map(m => (

m.handle && openProfile(m.handle)} style={{ cursor: m.handle ? 'pointer' : 'default', textAlign: 'center', flexShrink: 0 }}>

{!m.avatarUrl && }

{m.id === user?.id ? 'You' : (m.displayName || 'Reader')}

))}

)}

{(filteredBooks || []).length === 0 ? (

{activeTab === 'reading' ? '📖' : activeTab === 'finished' ? '🏆' : '📋'}

{activeTab === 'reading' ? 'No books in progress yet' : activeTab === 'finished' ? 'Your trophy shelf awaits!' : 'Add books to your reading list!'}

) : (

{(filteredBooks || []).map((book, idx) => (

setSelectedBook(book)} onPointerDown={() => setPressedId(book.id)} onPointerUp={() => setPressedId(null)} onPointerLeave={() => setPressedId(null)} onPointerCancel={() => setPressedId(null)} style={{ display: 'flex', gap: 14, padding: 14, background: colors.card, borderRadius: 16, border: '1px solid ' + colors.border, boxShadow: book.status === 'finished' ? '0 0 20px rgba(107, 142, 78, 0.12)' : '0 2px 8px ' + colors.shadow, cursor: 'pointer', transition: 'transform 0.15s ease, box-shadow 0.15s ease', transform: pressedId === book.id ? 'scale(0.98)' : 'scale(1)', animation: 'slideIn 0.3s ease forwards', animationDelay: (idx * 0.05) + 's', opacity: 0 }} >

{!book.cover && ( {genreEmojis[book.genre] || '📚'} )} {book.status === 'finished' && (

✨

)}

{book.isDemo && ( DEMO )}

{book.title}

{book.author}

{book.status === 'reading' ? 'Reading' : book.status === 'finished' ? 'Finished' : 'To Read'}

{genreEmojis[book.genre] || '📚'} {book.genre} {book.addedBy && book.addedBy.id !== 'demo-user' && isMultiplayer && ( · by {book.addedBy.id === user?.id ? 'You' : (book.addedBy.displayName || 'Reader')} )}

{book.status === 'reading' && (

Progress {book.progress}%

)}

))}

)}

{selectedBook && (

setSelectedBook(null)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)' }} />

{!selectedBook.cover && {genreEmojis[selectedBook.genre] || '📚'}}

{selectedBook.title}

{selectedBook.author}

{genreEmojis[selectedBook.genre] || '📚'} {selectedBook.genre}

{selectedBook.status === 'reading' && (

Reading Progress {selectedBook.progress}%

{ const val = parseInt(e.target.value); setSelectedBook(prev => ({ ...prev, progress: val })); updateProgress(selectedBook.id, val); }} style={{ width: '100%', accentColor: colors.reading }} />

Just started Halfway Almost done!

)}

{selectedBook.status !== 'reading' && ( )} {selectedBook.status !== 'finished' && ( )} {selectedBook.status !== 'toread' && ( )}

)} {showAddModal && (

{ setShowAddModal(false); setNewBook({ title: '', author: '', genre: 'Fiction' }); }} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)' }} />

Add a New Book

Title * setNewBook(prev => ({ ...prev, title: e.target.value }))} placeholder="Enter book title..." style={{ width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1.5px solid ' + colors.border, background: colors.card, boxSizing: 'border-box', fontFamily: sansFont, color: colors.text, outline: 'none' }} />

Author setNewBook(prev => ({ ...prev, author: e.target.value }))} placeholder="Enter author name..." style={{ width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1.5px solid ' + colors.border, background: colors.card, boxSizing: 'border-box', fontFamily: sansFont, color: colors.text, outline: 'none' }} />

Genre

{(genres || []).map(g => ( ))}

Cover Photo

{newBook.cover ? (

) : (

)}

); }

{book.title}

{selectedBook.title}

📚 Add a New Book

Add a New Book