{/* 🧊 GLASS HEADER */}

✨ Dream Trips

{isMultiplayer ? `${memberList.length} dreamers planning` : 'Your bucket list'}

{/* Share Button */}

{/* 📜 SCROLLABLE CONTENT */}

{(sortedDestinations ?? []).map((item) => { const isTopPick = item.id === topPickId; const voters = getVoterAvatars(item.votes); const hasVoted = (item.votes ?? []).includes(user.id); const isJustVoted = lastVotedId === item.id; return (

{/* Crown for winner */} {isTopPick && (

👑 TOP PICK

)}

{item.name}

{/* Voters Bubbles */}

{(voters || []).map((v, i) => (

{ e.stopPropagation(); v.handle && openProfile(v.handle); }} style={{ width: 28, height: 28, borderRadius: '50%', background: v.avatar ? `url(${v.avatar}) center/cover` : 'linear-gradient(135deg, #A18CD1, #FBC2EB)', border: '2px solid rgba(255,255,255,0.8)', marginLeft: i > 0 ? -10 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'white', fontWeight: 'bold', cursor: v.handle ? 'pointer' : 'default', boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }} > {!v.avatar && v.initial}

))} {item.votes?.length > 5 && (

+{(item.votes || []).length - 5}

)}

Added by {item.creator?.name || 'Dreamer'}

); })} {/* Empty State / Prompt */} {(destinations ?? []).length < 3 && (

Tap the + button to add your dream trip!

)}

{/* ➕ FAB (Floating Action Button) */} {/* 🧪 BOTTOM SHEET MODAL (Add Destination) */} {isAdding && (

setIsAdding(false)}>

e.stopPropagation()} style={{ width: '100%', background: 'rgba(255, 255, 255, 0.9)', backdropFilter: 'blur(20px)', borderTopLeftRadius: 30, borderTopRightRadius: 30, padding: '24px 24px calc(env(safe-area-inset-bottom, 20px) + 24px) 24px', boxShadow: '0 -10px 40px rgba(0,0,0,0.1)', animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }} >

Where to next? ✈️

setNewItem(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()} placeholder="e.g. Bora Bora" style={{ width: '100%', height: 56, borderRadius: 16, border: '1px solid #E0E0E0', background: '#F9F9F9', fontSize: 18, padding: '0 16px', marginBottom: 16, outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit' }} />

)}

); }