{alarm?.isDemo && (

DEMO

)}

{alarm?.isShared && 👥} {alarm?.label || 'Alarm'} {sound.emoji}

{time} {period}

{getDaysLabel(alarm?.days)}

{alarm?.isShared && (memberList || []).length > 1 && (

{(memberList || []).map(m => { const isDismissed = (dismissedMembers || []).includes(m.id); return (

m.handle && openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : `linear-gradient(135deg, ${secondaryColor}, ${primaryColor})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#fff', fontWeight: 600, cursor: 'pointer', border: isDismissed ? `2px solid ${secondaryColor}` : '2px solid transparent', position: 'relative', opacity: isDismissed ? 1 : 0.6, transition: 'all 0.3s ease', }}> {!m.avatarUrl && {(m.displayName || '?')[0]}} {isDismissed && (

✓

)}

); })}

)}

); }; return (

{(confettiPieces || []).length > 0 && (

{(confettiPieces || []).map(p => (

10 ? '50%' : 2, animation: `confettiFall 2s ${p.delay}s ease-in forwards`, }} /> ))}

)}

⏰ Alarm Squad

{(memberList || []).length > 1 ? `${memberList.length} members` : 'Your personal alarms'}

{formattedNow.time}{formattedNow.period}

:{seconds}

{currentTime.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}

{(memberList || []).length > 1 && (

{(memberList || []).map(m => (

m.handle && openProfile(m.handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, cursor: 'pointer', minWidth: 56, }}>

{!m.avatarUrl && (m.displayName || '?')[0]}

{m.id === user?.id ? 'You' : m.displayName}

))}

)}

{(sharedAlarms || []).length > 0 && (

👥 Squad Alarms

{(sharedAlarms || []).map(a => renderAlarmCard(a))}

)}

🔔 {(sharedAlarms || []).length > 0 ? 'Personal Alarms' : 'My Alarms'}

{(personalAlarms || []).length === 0 && (sharedAlarms || []).length === 0 ? (

⏰

No alarms yet

Tap + to create your first alarm

) : (personalAlarms || []).length === 0 ? (

No personal alarms. Tap + to add one!

) : ( (personalAlarms || []).map(a => renderAlarmCard(a)) )}

{showCreator && (

{ setShowCreator(false); setEditingAlarm(null); }} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)' }} />

{editingAlarm ? '✏️ Edit Alarm' : '⏰ New Alarm'}

{String(newAlarm.hour % 12 || 12).padStart(2, '0')}

{String(newAlarm.minute).padStart(2, '0')}

Label setNewAlarm({ ...newAlarm, label: e.target.value })} placeholder="e.g., Morning Workout" style={{ width: '100%', height: 48, fontSize: 16, padding: '0 16px', borderRadius: 14, border: '1px solid #ffffff15', background: '#ffffff08', color: textPrimary, boxSizing: 'border-box', outline: 'none', }} />

Repeat

{(DAYS || []).map((day, i) => ( ))}

Sound

{(SOUNDS || []).map(s => ( ))}

{isMultiplayer && (memberList || []).length > 0 && (

)}

)} {showRinging && (

{[...Array(8)].map((_, i) => (

✨

))}

⏰

RISE & SHINE!

{user?.name || 'Friend'} 🌟

{showRinging?.label || 'Time to wake up!'}

)}

); } )})}