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

); return (

{/* 🧭 HEADER / LOOP SWITCHER */}

CURRENT LOOP

setIsMenuOpen(true)} style={{ fontSize: 42, fontWeight: 900, lineHeight: 0.9, letterSpacing: -2, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10, wordBreak: 'break-word' }} > {activeLoop?.title || 'LOADING'} ▾

{activeLoop?.description}

{/* 📜 FEED / CANVAS */}

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

NOTHING HERE YET.
START THE TREND.

) : ( (activeRecs || []).map((rec, index) => (

setExpandedRecId(expandedRecId === rec.id ? null : rec.id)} style={{ borderBottom: `1px solid ${COLORS.text}`, padding: '32px 20px', cursor: 'pointer', backgroundColor: expandedRecId === rec.id ? COLORS.secondary : 'transparent', transition: 'background 0.2s' }} > {/* Meta Top */}

REC BY {rec.authorName} {new Date(rec.createdAt).toLocaleDateString()}

{/* HUGE TITLE */}

{rec.title}

{/* Subtitle */} {rec.subtitle && (

{rec.subtitle}

)} {/* Review Content (Expandable) */}

{rec.review}

{/* Footer Actions */}

)) )}

{/* ➕ FAB (Floating Action Button) - Styled as Bar */}

{/* 🌑 LOOPS MENU MODAL (Full Screen Overlay) */} {isMenuOpen && (

SWITCH LOOP

{(loops || []).map(loop => (

{ setActiveLoopId(loop.id); setIsMenuOpen(false); }} style={{ fontSize: 32, fontWeight: 900, marginBottom: 24, cursor: 'pointer', color: activeLoopId === loop.id ? COLORS.accent : COLORS.text, display: 'flex', alignItems: 'center', gap: 12, textTransform: 'uppercase' }} > {activeLoopId === loop.id && →} {loop.title}

))}

CREATE NEW LOOP

{ if (e.key === 'Enter') handleCreateLoop(e.target.value); }} style={{ flex: 1, border: `2px solid ${COLORS.text}`, padding: 16, fontSize: 16, fontWeight: 700, borderRadius: 0, outline: 'none' }} />

{/* Multiplayer Team List */}

IN THIS CIRCLE

{members && (members || []).length > 0 ? (members || []).map(m => (

openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#f5f5f5', padding: '8px 12px', borderRadius: 50 }}>

e.target.style.display='none'} /> {m.displayName}

)) : (

Just you for now. Share to add friends.

)}

)} {/* ✏️ COMPOSE MODAL (High Contrast Form) */} {isComposeOpen && (

THE HEADLINE

setNewRec({...newRec, title: e.target.value})}
              style={{ 
                width: '100%', 
                fontSize: 48, 
                fontWeight: 900, 
                border: 'none', 
                outline: 'none', 
                resize: 'none',
                fontFamily: 'inherit',
                lineHeight: 1,
                textTransform: 'uppercase',
                marginBottom: 24,
                height: 120
              }}
            />

<div style={{ fontSize: 12, fontWeight: 700, opacity: 0.5, marginBottom: 8 }}>THE VIBE / SUBTITLE</div>
            <input
              placeholder="e.g. BEST BURGER or SCI-FI MOVIE"
              value={newRec.subtitle}
              onChange={(e) => setNewRec({...newRec, subtitle: e.target.value})}
              style={{ 
                width: '100%', 
                fontSize: 20, 
                fontWeight: 500, 
                color: COLORS.accent,
                border: 'none', 
                outline: 'none', 
                fontFamily: 'inherit',
                fontStyle: 'italic',
                marginBottom: 32
              }}
            />

<div style={{ fontSize: 12, fontWeight: 700, opacity: 0.5, marginBottom: 8 }}>THE REVIEW</div>
            <textarea
              placeholder="Tell the truth. Make it snappy."
              value={newRec.review}
              onChange={(e) => setNewRec({...newRec, review: e.target.value})}
              style={{ 
                width: '100%', 
                fontSize: 20, 
                fontWeight: 400, 
                border: 'none', 
                outline: 'none', 
                resize: 'none',
                fontFamily: 'inherit',
                lineHeight: 1.5,
                minHeight: 150
              }}
            />

<div style={{ marginTop: 32 }}>
              <div style={{ fontSize: 12, fontWeight: 700, opacity: 0.5, marginBottom: 16 }}>RATING</div>
              <div style={{ display: 'flex', gap: 16 }}>
                {[1, 2, 3, 4, 5].map(score => (
                  <button 
                    key={score}
                    onClick={() => setNewRec({...newRec, rating: score})}
                    style={{ 
                      width: 48, 
                      height: 48, 
                      borderRadius: '50%', 
                      border: `2px solid ${COLORS.text}`,
                      background: newRec.rating === score ? COLORS.text : 'transparent',
                      color: newRec.rating === score ? COLORS.bg : COLORS.text,
                      fontSize: 18,
                      fontWeight: 700,
                      cursor: 'pointer'
                    }}
                  >
                    {score}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>