{ e.stopPropagation(); if (member.handle) openProfile(member.handle); }} style={{ width: size, height: size, borderRadius: '50%', backgroundColor: '#fff', backgroundImage: member.avatarUrl ? `url(${member.avatarUrl})` : 'none', backgroundSize: 'cover', backgroundPosition: 'center', border: '2px solid white', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.6, cursor: member.handle ? 'pointer' : 'default', flexShrink: 0, ...style }} > {!member.avatarUrl && (userId.startsWith('user_sample') ? '👤' : member.displayName?.[0])}

); }; return (

{/* HEADER */}

This or That

{(memberList || []).length > 1 ? `${memberList.length} people debating` : 'Make your choice!'}

{/* FEED */}

{(polls || []).map((poll) => { const votes = poll.votes || {}; const totalVotes = Object.keys(votes || {}).length; const leftVoters = Object.entries(votes || {}).filter(([_, side]) => side === 'left').map(([uid]) => uid); const rightVoters = Object.entries(votes || {}).filter(([_, side]) => side === 'right').map(([uid]) => uid); const leftCount = (leftVoters || []).length; const rightCount = (rightVoters || []).length; const leftPercent = totalVotes === 0 ? 50 : Math.round((leftCount / totalVotes) * 100); const rightPercent = totalVotes === 0 ? 50 : 100 - leftPercent; const myVote = votes[user.id]; const hasVoted = !!myVote; return (

{/* Question */}

{poll.question}

{/* Options Container */}

{/* LEFT OPTION */}

handleVote(poll.id, 'left')} style={{ flex: 1, backgroundColor: myVote === 'left' ? `${THEME.primary}15` : '#F8F9FA', borderRadius: 16, border: `2px solid ${myVote === 'left' ? THEME.primary : 'transparent'}`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative', transition: 'all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)', transform: justVotedId === poll.id && myVote === 'left' ? 'scale(1.05)' : 'scale(1)', }} >

{poll.left.emoji}

{poll.left.text}

{/* Percentage (Only if voted) */} {hasVoted && (

{leftPercent}%

)} {/* Checkmark overlay */} {myVote === 'left' && (

✓

)}

{/* VS Badge */}

{/* RIGHT OPTION */}

handleVote(poll.id, 'right')} style={{ flex: 1, backgroundColor: myVote === 'right' ? `${THEME.secondary}15` : '#F8F9FA', borderRadius: 16, border: `2px solid ${myVote === 'right' ? THEME.secondary : 'transparent'}`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative', transition: 'all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)', transform: justVotedId === poll.id && myVote === 'right' ? 'scale(1.05)' : 'scale(1)', }} >

{poll.right.emoji}

{poll.right.text}

{/* Percentage */} {hasVoted && (

{rightPercent}%

)} {/* Checkmark */} {myVote === 'right' && (

✓

)}

{/* AVATAR FLOCKING - The social proof */} {(hasVoted || totalVotes > 0) && (

{/* Left Team */}

{(leftVoters || []).slice(0, 5).map((uid, i) => ( ))}

{leftCount > 5 &&

+{leftCount - 5}

}

{/* Total Votes Label */}

{totalVotes} vote{totalVotes !== 1 ? 's' : ''}

{/* Right Team */}

{(rightVoters || []).slice(0, 5).map((uid, i) => ( ))}

{rightCount > 5 &&

+{rightCount - 5}

}

)} {/* Dynamic Bar Background - subtle indicator */} {hasVoted && (

)}

); })}

{/* FLOATING ACTION BUTTON */} {/* CREATE MODAL */} {isCreating && (

New Poll

QUESTION setNewPoll({ ...newPoll, question: e.target.value })} style={{ width: '100%', height: 48, fontSize: 16, padding: '0 16px', borderRadius: 12, border: '1px solid #ddd', boxSizing: 'border-box' }} />

OPTION 1

handleOptionChange('left', e.target.value)} style={{ flex: 1, height: 48, fontSize: 16, padding: '0 16px', borderRadius: 12, border: '1px solid #ddd', boxSizing: 'border-box' }} /> setNewPoll({ ...newPoll, leftEmoji: e.target.value })} style={{ width: 48, height: 48, fontSize: 20, textAlign: 'center', borderRadius: 12, border: '1px solid #ddd', padding: 0 }} />

OPTION 2

handleOptionChange('right', e.target.value)} style={{ flex: 1, height: 48, fontSize: 16, padding: '0 16px', borderRadius: 12, border: '1px solid #ddd', boxSizing: 'border-box' }} /> setNewPoll({ ...newPoll, rightEmoji: e.target.value })} style={{ width: 48, height: 48, fontSize: 20, textAlign: 'center', borderRadius: 12, border: '1px solid #ddd', padding: 0 }} />

)} {/* STYLES FOR ANIMATIONS */}

); }