Assignment
Canvas

🎀

{/* 👯 MULTIPLAYER AVATAR BAR */}

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

m.handle && openProfile(m.handle)} style={{ position: 'relative', cursor: 'pointer' }}> {m.displayName}

{isMultiplayer && (

✨

)}

))} {isMultiplayer && ( )}

{/* 📑 TABS */}

{['todo', 'done'].map(tab => ( ))}

{/* 📝 LIST */}

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

{activeTab === 'todo' ? '🦢' : '🪞'}

{activeTab === 'todo' ? "Everything is tied up with a bow!" : "No finished treasures yet, darling." }

) : ( (displayList || []).map(task => (

openModal(task)} style={{ marginBottom: 16, background: 'rgba(255,255,255,0.8)', borderRadius: 16, padding: 16, display: 'flex', alignItems: 'center', gap: 16, boxShadow: '0 2px 10px rgba(181,131,141,0.1)', border: '1px solid #FFF', position: 'relative', transition: 'transform 0.2s', cursor: 'pointer' }} > {/* 🎀 Ribbon Decoration */}

{/* 🦪 Pearl Checkbox */}

{ e.stopPropagation(); toggleComplete(task.id); }} style={{ width: 32, height: 32, borderRadius: '50%', background: task.completed ? 'linear-gradient(135deg, #FFB7B2, #FF9E9E)' : 'radial-gradient(circle at 30% 30%, #FFF, #F0E6EF)', border: '1px solid #E5989B', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: '0 2px 4px rgba(0,0,0,0.1)', marginLeft: 8 }} > {task.completed && ✨}

{task.title}

📅 {formatDate(task.dueDate)} {task.completedBy && task.completed && isMultiplayer && ( • by {(members || []).find(m => m.id === task.completedBy)?.displayName || 'someone'} )}

{/* Due Date Warning Ribbon */} {!task.completed && new Date(task.dueDate) < new Date(Date.now() + 86400000) && (

⏰

)}

)) )}

{/* ➕ FAB (Brooch Style) */} {/* 🕸️ LACE MODAL */} {isModalOpen && (

e.stopPropagation()} style={{ background: '#FFF0F5', borderRadius: '24px 24px 0 0', padding: '24px 20px calc(env(safe-area-inset-bottom, 20px) + 20px)', borderTop: '6px dotted #FFB7B2', boxShadow: '0 -4px 20px rgba(0,0,0,0.1)', animation: 'slideUp 0.3s ease-out' }} >

{selectedTask?.id === 'new' ? 'New Secret Task 🗝️' : 'Locket Details 📿'}

setFormData({ ...formData, title: e.target.value })} placeholder="What needs to be done, darling?" style={{ width: '100%', padding: 16, borderRadius: 12, border: '1px solid #FFDAC1', background: '#FFF', fontSize: 16, outline: 'none', fontFamily: 'inherit' }} />

setFormData({ ...formData, dueDate: e.target.value })} style={{ flex: 1, padding: 12, borderRadius: 12, border: '1px solid #FFDAC1', background: '#FFF', fontSize: 16, fontFamily: 'inherit' }} />

setFormData({ ...formData, notes: e.target.value })}
                placeholder="Whisper some details..."
                rows={3}
                style={{ 
                  width: '100%', padding: 16, borderRadius: 12, border: '1px solid #FFDAC1', 
                  background: '#FFF', fontSize: 16, outline: 'none', fontFamily: 'inherit', resize: 'none'
                }}
              />

<div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
                {selectedTask?.id !== 'new' && (
                  <button 
                    onClick={(e) => deleteStart(e, selectedTask.id)}
                    style={{ 
                      padding: 16, borderRadius: 16, border: '1px solid #ffb7b2', 
                      background: 'transparent', color: '#e5989b', fontWeight: 600, fontSize: 16
                    }}
                  >
                    🗑️
                  </button>
                )}
                <button 
                  onClick={handleSave}
                  style={{ 
                    flex: 1, padding: 16, borderRadius: 16, border: 'none', 
                    background: '#B5838D', color: 'white', fontWeight: 600, fontSize: 16,
                    boxShadow: '0 4px 12px rgba(181,131,141,0.3)'
                  }}
                >
                  {selectedTask?.id === 'new' ? 'Seal with a Kiss 💋' : 'Save Changes ✨'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

{/* 🎉 CONFETTI OVERLAY */}
      {(confetti || []).map(p => (
        <div key={p.id} style={{
          position: 'fixed',
          left: `${p.x}%`,
          bottom: `${p.y}%`,
          fontSize: 24,
          pointerEvents: 'none',
          animation: 'floatUp 2s ease-out forwards',
          zIndex: 2000
        }}>
          {p.emoji}
        </div>
      ))}