Event Board

What should we celebrate next? 🎉

{/* Stats Summary */}

{(ideas || []).length}

Ideas

{(ideas || []).reduce((acc, i) => acc + (i.likes?.length||0), 0)}

Votes

{/* 📜 IDEA LIST */}

{/* Simple Filters */}

{['all', 'open', 'planned', 'done'].map(f => ( ))}

{(sortedIdeas || []).map((idea) => { const isLiked = (idea.likes || []).includes(currentUser.id); const likeCount = (idea.likes || []).length; return (

{/* Header: Type & Status */}

{getTypeIcon(idea.type)} {idea.type} {currentUser.isOwner ? ( ) : ( {getStatusIcon(idea.status)} {getStatusLabel(idea.status)} )}

{/* Content */}

{idea.title}

{idea.desc}

{/* Footer: Creator & Like Action */}

{idea.createdBy?.avatarUrl ?

: 👤 }

{idea.createdBy?.name || 'Anonymous'}

); })}

{/* ➕ FAB */} {/* 📝 NEW IDEA FORM (Bottom Sheet) */} {isFormOpen && (

setIsFormOpen(false)} style={{ flex: 1 }} />

New Idea ✨

Title setNewIdea({...newIdea, title: e.target.value})} placeholder="e.g. Holiday Karaoke Night 🎤" style={{ width: '100%', height: 48, borderRadius: 12, border: '1px solid #e0e0e0', padding: '0 16px', fontSize: 16, marginBottom: 16, boxSizing: 'border-box', backgroundColor: '#FAFAFA' }} autoFocus /> Description

setNewIdea({...newIdea, desc: e.target.value})}
                placeholder="What's the plan? Who is it for?"
                style={{ 
                  width: '100%', height: 80, borderRadius: 12, border: '1px solid #e0e0e0', 
                  padding: '12px 16px', fontSize: 16, marginBottom: 16, boxSizing: 'border-box',
                  resize: 'none', backgroundColor: '#FAFAFA',
                  fontFamily: 'inherit'
                }}
              />

<label style={{ display: 'block', fontSize: 13, fontWeight: 700, color: '#666', marginBottom: 8, textTransform: 'uppercase' }}>
                Category
              </label>
              <div style={{ display: 'flex', gap: 8, marginBottom: 24, overflowX: 'auto', paddingBottom: 4 }}>
                {['Social', 'Academic', 'Creative', 'Cultural', 'Volunteer'].map(type => (
                  <button 
                    key={type}
                    type="button"
                    onClick={() => setNewIdea({...newIdea, type})}
                    style={{
                      padding: '8px 16px',
                      borderRadius: 12,
                      border: `1px solid ${newIdea.type === type ? THEME.gold : '#e0e0e0'}`,
                      background: newIdea.type === type ? '#FFF9E5' : '#fff',
                      color: THEME.dark,
                      fontSize: 14,
                      fontWeight: 500,
                      flexShrink: 0
                    }}
                  >
                    {getTypeIcon(type)} {type}
                  </button>
                ))}
              </div>