✨

Good Night, {user?.name || 'Dreamer'}

Your tasks are done. The stars are watching over you. Sleep well.

{/* Simple CSS animation for stars would be injected here in a real env, simulating with emojis */}

⭐

✨

⭐

); return (

{/* 🌟 Background Ambient Blobs */}

{showCelebration && } {/* Header */}

Daily Ritual

Wind Down

⏳ {timeLeft || 'Loading...'}

{/* Progress Bar */}

{/* Task List */}

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

🛌 No tasks set. Add one below.

) : ( (tasks || []).map(task => { const completedBy = task.completedBy || []; const isDone = (completedBy || []).includes(myId); const completedAvatars = getTaskAvatars((completedBy || []).filter(id => id !== myId)); return (

toggleTask(task.id)} style={{ marginBottom: 12, padding: 16, background: isDone ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.08)', backdropFilter: 'blur(16px)', borderRadius: 16, border: isDone ? '1px solid rgba(255,255,255,0.05)' : '1px solid rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', transition: 'all 0.3s ease', cursor: 'pointer', transform: isDone ? 'scale(0.98)' : 'scale(1)', opacity: isDone ? 0.7 : 1 }} >

{/* Custom Checkbox */}

{isDone && ✓}

{/* Text */} {task.text}

{/* Friend Avatars (Multiplayer) */}

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

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

))} {(completedAvatars || []).length > 3 && (

+{(completedAvatars || []).length - 3}

)} {/* Delete button (only for editing mode, keeps UI clean usually) */} {isEditing && ( )}

); }) )} {/* Add Task Input */} {isEditing ? (

setNewTask(e.target.value)} onKeyDown={e => e.key === 'Enter' && addTask()} placeholder="What helps you relax?" style={{ background: 'transparent', border: 'none', color: 'white', fontSize: 16, flex: 1, outline: 'none' }} />

) : ( )}

{/* Bottom Action Bar */}

); }