{/* 🌸 HEADER */}

🎀

{/* Title Editing */} {isEditingTitle ? ( setTempTitle(e.target.value)} onBlur={saveTitle} onKeyDown={(e) => e.key === 'Enter' && saveTitle()} style={{ fontSize: 28, fontFamily: 'Georgia, serif', fontStyle: 'italic', margin: '8px 0', width: '100%', textAlign: 'center', border: 'none', borderBottom: '2px solid #FFB7C5', background: 'transparent', color: '#4A3B3B', outline: 'none' }} /> ) : (

{state.tripName} ✏️

)}

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

openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', border: '2px solid #FFF', background: '#FFD1DC', marginLeft: i > 0 ? -8 : 0, overflow: 'hidden', position: 'relative', zIndex: 10 - i, boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}> {m.avatarUrl ? ( {m.displayName}

) : (

{m.displayName?.[0] || '?'}

)}

))} {isMultiplayer && ( )}

{/* 🌸 TABS */}

{[ { id: 'wardrobe', icon: '👗', label: 'Wardrobe' }, { id: 'shopping', icon: '🛍️', label: 'Bows & Buys' } ].map(tab => ( ))}

{/* 👗 WARDROBE VIEW */} {activeTab === 'wardrobe' && (

{(state.days ?? []).map(day => (

openDayModal(day)} style={{ background: '#FFF', borderRadius: 16, padding: 16, marginBottom: 16, border: '1px solid #FFE4E1', boxShadow: '0 2px 8px rgba(0,0,0,0.03)', position: 'relative', overflow: 'hidden' }}> {/* Ribbon decoration */}

{day.dayLabel}

{day.complete && ✨ Ready}

{day.theme}

{(day.items ?? []).length > 0 ? ( (day.items || []).slice(0, 3).map((item, i) => ( {item.text} )) ) : ( Tap to plan outfit... )} {(day.items ?? []).length > 3 && +{(day.items || []).length - 3} more}

))} {/* Add Day Button */}

)} {/* 🛍️ SHOPPING VIEW */} {activeTab === 'shopping' && (

{/* Progress Bar */}

Collection Status {Math.round(progress)}% Complete

{(state.shoppingList ?? []).map(item => (

{item.name}

{item.url && ( 🔗 Link )} {item.purchasedBy && ( Bought by {item.purchasedBy} )}

))}

)} {/* ➕ ADD ITEM INPUT (Sticky Bottom) */} {activeTab === 'shopping' && (

setNewItemText(e.target.value)} placeholder="Add magical item..." style={{ flex: 1, height: 44, borderRadius: 22, border: '1px solid #E0E0E0', padding: '0 16px', fontSize: 16, outline: 'none' }} />

{newItemText && (

setNewItemLink(e.target.value)} placeholder="Link (optional)" style={{ flex: 1, height: 44, borderRadius: 22, border: '1px solid #E0E0E0', padding: '0 16px', fontSize: 16, outline: 'none' }} />

)}

)} {/* 👗 DAY DETAIL MODAL (Bottom Sheet) */} {selectedDay && (

setSelectedDayId(null)}>

e.stopPropagation()} style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: '#FFF', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: '24px 20px calc(env(safe-area-inset-bottom, 20px) + 20px)', boxShadow: '0 -10px 40px rgba(0,0,0,0.1)', maxHeight: '85dvh', overflowY: 'auto', animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }}> {/* Handle */}

{selectedDay.dayLabel}

{/* Editable Day Details */} {isEditingDayDetails ? (

setEditTheme(e.target.value)} placeholder="Outfit Theme Name" autoFocus style={{ fontSize: 24, fontFamily: 'Georgia, serif', textAlign: 'center', border: 'none', borderBottom: '1px solid #FFB7C5', outline: 'none', color: '#D46A7E' }} /> setEditNotes(e.target.value)} placeholder="Notes (time, location...)" style={{ fontSize: 14, textAlign: 'center', padding: 8, border: '1px solid #E0E0E0', borderRadius: 8, outline: 'none' }} />

) : ( <>

setIsEditingDayDetails(true)} style={{ fontSize: 28, margin: '8px 0', fontFamily: 'Georgia, serif', color: '#D46A7E', cursor: 'pointer' }}> {selectedDay.theme} ✏️

setIsEditingDayDetails(true)} style={{ display: 'inline-block', padding: '4px 12px', background: '#FFF5F5', borderRadius: 12, fontSize: 14, color: '#888', border: '1px solid #FFE4E1', cursor: 'pointer' }}> {selectedDay.notes || 'Add notes...'}

)}

Ensemble

{(selectedDay.items ?? []).map(item => (

{item.text}

))}

setNewItemText(e.target.value)} placeholder="Add item (e.g. Silk Scarf)" style={{ flex: 1, height: 44, borderRadius: 12, border: '1px solid #E0E0E0', padding: '0 16px', fontSize: 16 }} />

)}

); }