{/* HEADER */}

Shop SYD

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

m.handle ? openProfile?.(m.handle) : null} style={{ ...s.avatar(m.avatarUrl), border: '2px solid #FDFBF7', marginLeft: i > 0 ? -12 : 0, zIndex: 3 - i, width: 32, height: 32 }} > {!m.avatarUrl && (m.displayName?.[0] || '👤')}

))}

{/* TABS */}

{[{id: 'all', label: 'Feed'}, {id: 'fit_check', label: 'Fit Checks'}, {id: 'marketplace', label: 'Market'}].map(tab => ( ))}

{/* FEED */}

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

✨

It's quiet here. Be the first to share your style!

) : (feed || []).map((post) => { const isExpanded = expandedPostId === post.id; const isLiked = (post.likes || []).includes(user?.id); const isOwnPost = post.author.id === user?.id; return (

{/* Author Area */}

post.author.handle && openProfile?.(post.author.handle)}>

{!post.author.avatarUrl && (post.author.displayName?.[0] || '👤')}

{post.author.displayName} {post.isDemo && DEMO}

{post.author.handle ? `@${post.author.handle}` : 'Student'}

{/* Image Area */}

setExpandedPostId(isExpanded ? null : post.id)} >

{/* Type Badge */}

{post.type === 'marketplace' ? '🛍️ For Sale' : '✨ Fit Check'}

{/* Sold Overlay */} {post.isSold && (

SOLD

)} {/* Item Tags (Visible when expanded) */} {isExpanded && !post.isSold && (post.items || []).map((item, idx) => { // Pseudo-random deterministic placement based on index const pos = [ { top: '30%', left: '30%' }, { top: '60%', left: '70%' }, { top: '80%', left: '40%' } ][idx % 3]; return (

{item.name} {item.brand && {item.brand}}

) })}

{/* Post Info & Actions */}

{post.author.displayName} {post.caption}

{post.type === 'marketplace' && !post.isSold && (

${post.price} {!isOwnPost ? ( ) : ( )}

)}

); })}

{/* FAB */} {/* COMPOSE SHEET */}

setIsComposing(false)}>

e.stopPropagation()}>

{composeStep === 1 ? (

What's your vibe today?

) : (

{composeType === 'marketplace' ? 'List Item' : 'New Fit Check'}

{newPost.photoUrl ? ( Upload

) : ( <> 📸 {isUploading ? 'Uploading...' : 'Tap to add photo'} )}

setNewPost({...newPost, caption: e.target.value})}
              />

{composeType === 'marketplace' && (
                <input 
                  type="number"
                  style={s.input}
                  placeholder="Price ($)"
                  value={newPost.price}
                  onChange={e => setNewPost({...newPost, price: e.target.value})}
                />
              )}

<div style={{ marginBottom: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                  <span style={{ fontWeight: 500 }}>Tagged Items</span>
                  <button 
                    style={{ background: 'none', border: 'none', color: '#9C8D7B', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}
                    onClick={handleAutoTag}
                    disabled={isGeneratingTags || !newPost.caption}
                  >
                    {isGeneratingTags ? '⏳ Generating...' : '✨ Auto-Tag from Caption'}
                  </button>
                </div>
                
                {(newPost.items || []).map((item, i) => (
                  <div key={item.id} style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
                    <input 
                      style={{ ...s.input, marginBottom: 0, padding: '12px', fontSize: 14 }}
                      placeholder="Item name"
                      value={item.name}
                      onChange={e => {
                        const items = [...newPost.items];
                        items[i].name = e.target.value;
                        setNewPost({...newPost, items});
                      }}
                    />
                    <input 
                      style={{ ...s.input, marginBottom: 0, padding: '12px', fontSize: 14, width: '40%' }}
                      placeholder="Brand"
                      value={item.brand}
                      onChange={e => {
                        const items = [...newPost.items];
                        items[i].brand = e.target.value;
                        setNewPost({...newPost, items});
                      }}
                    />
                  </div>
                ))}
                
                <button 
                  style={{ width: '100%', padding: '12px', backgroundColor: 'transparent', border: '1px dashed #EAE5DF', borderRadius: 12, color: '#9C8D7B', marginTop: 8 }}
                  onClick={() => setNewPost({...newPost, items: [...newPost.items, { id: Date.now(), name: '', brand: '' }]})}
                >
                  + Add Item Manually
                </button>
              </div>
            </div>
          )}
        </div>
      </div>

{/* FLOATING EFFECTS PORTAL */}
      {(floatingEffects || []).map(effect => (
        <div 
          key={effect.id} 
          style={{ 
            position: 'fixed',
            left: effect.x,
            top: effect.y,
            fontSize: 24,
            pointerEvents: 'none',
            zIndex: 999,
            animation: 'floatUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards'
          }}
        >
          {effect.emoji}
        </div>
      ))}

{/* CELEBRATION OVERLAYS */}
      {celebration === 'confetti' && (
        <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(253,251,247,0.8)' }}>
          <div style={{ textAlign: 'center', animation: 'popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}>
            <div style={{ fontSize: 64, marginBottom: 16 }}>✨📸✨</div>
            <h2 style={{ fontSize: 24, fontWeight: 300, margin: 0 }}>Looking Chic!</h2>
          </div>
        </div>
      )}
      
      {celebration === 'sold' && (
        <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(253,251,247,0.8)' }}>
          <div style={{ textAlign: 'center', animation: 'popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}>
            <div style={{ fontSize: 64, marginBottom: 16 }}>✋✨🤚</div>
            <h2 style={{ fontSize: 24, fontWeight: 300, margin: 0, letterSpacing: '0.1em' }}>SOLD!</h2>
          </div>
        </div>
      )}