{[1, 2, 3, 4, 5].map((star) => ( ))}

); // Neumorphic Button const NeumorphicButton = ({ children, onClick, primary = false, style = {} }) => ( ); return (

{/* 📚 HEADER */}

Library

{(reviews || []).length} book{(reviews || []).length !== 1 ? 's' : ''} reviewed

{/* Member Avatars (Multiplayer) */}

{(memberList || []).slice(0, 3).map((m, i) => (

openProfile(m.handle)} style={{ width: 40, height: 40, borderRadius: '50%', border: `3px solid ${BG_COLOR}`, marginLeft: i > 0 ? -12 : 0, boxShadow: SHADOW_OUT, background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : '#cbd5e0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, cursor: 'pointer', zIndex: 10 - i }}> {!m.avatarUrl && '👤'}

))} {isMultiplayer && ( )}

{/* 📖 SCROLLABLE LIST */}

{(reviews || []).map((review) => { const isExpanded = expandedId === review.id; const isOwner = review.userId === user.id; return (

setExpandedId(isExpanded ? null : review.id)} style={{ borderRadius: 24, background: BG_COLOR, padding: 24, boxShadow: isExpanded ? SHADOW_FLOAT : SHADOW_OUT, transition: 'all 0.3s ease', transform: isExpanded ? 'scale(1.02)' : 'scale(1)', cursor: 'pointer', position: 'relative', overflow: 'hidden' }} > {/* Card Header */}

{/* Emoji Cover */}

{review.emoji || '📘'}

{review.title}

{review.author}

{/* Expanded Content */} {isExpanded && (

{review.text}

{!review.userAvatar && '👤'}

Added by {review.userName}

{isOwner && (

)}

); })} {(reviews || []).length === 0 && (

📚

No reviews yet. Be the first!

)}

{/* ➕ FAB ADD BUTTON */}

{/* ✏️ EDIT/ADD MODAL (Bottom Sheet) */} {isFormOpen && (

e.stopPropagation()} style={{ width: '100%', maxWidth: 480, margin: '0 auto', background: BG_COLOR, borderTopLeftRadius: 32, borderTopRightRadius: 32, padding: '32px 24px max(env(safe-area-inset-bottom, 20px), 32px)', boxShadow: '0 -10px 40px rgba(163,177,198,0.4)', animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }} >

{editingId ? 'Edit Review' : 'New Review'}

{/* Emoji Picker (Simple Input) */}

Icon setFormData({...formData, emoji: e.target.value})} style={{ width: '100%', height: 52, borderRadius: 16, border: 'none', background: BG_COLOR, boxShadow: SHADOW_IN, textAlign: 'center', fontSize: 24, padding: 0 }} maxLength={2} />

Title setFormData({...formData, title: e.target.value})} placeholder="Book Title" style={{ width: '100%', height: 52, borderRadius: 16, border: 'none', background: BG_COLOR, boxShadow: SHADOW_IN, padding: '0 16px', fontSize: 16, color: TEXT_PRIMARY, boxSizing: 'border-box' }} />

Author setFormData({...formData, author: e.target.value})} placeholder="Author Name" style={{ width: '100%', height: 52, borderRadius: 16, border: 'none', background: BG_COLOR, boxShadow: SHADOW_IN, padding: '0 16px', fontSize: 16, color: TEXT_PRIMARY, boxSizing: 'border-box' }} />

Rating

setFormData({...formData, rating: r})} />

Review

setFormData({...formData, text: e.target.value})}
                  placeholder="What did you think?"
                  style={{ 
                    width: '100%', height: 100, borderRadius: 16, border: 'none', 
                    background: BG_COLOR, boxShadow: SHADOW_IN, 
                    padding: '16px', fontSize: 16, color: TEXT_PRIMARY,
                    resize: 'none', fontFamily: 'inherit',
                    boxSizing: 'border-box'
                  }}
                />
              </div>

<div style={{ display: 'flex', gap: 16, marginTop: 12 }}>
                <NeumorphicButton onClick={closeForm} style={{ flex: 1, color: TEXT_SECONDARY }}>Cancel</NeumorphicButton>
                <NeumorphicButton onClick={handleSave} primary style={{ flex: 1 }}>Save Review</NeumorphicButton>
              </div>
            </div>
          </div>
        </div>
      )}