✨ My Notes

UNSW Thoughts & Ideas

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

0 ? -10 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: 'white', fontWeight: 700, zIndex: 4 - i }}> {!m?.avatarUrl ? (m?.displayName?.[0] ?? '?') : null}

))} {(memberList || []).length > 4 && (

+{(memberList || []).length - 4}

)}

{/* Note count pill */}

{(localNotes || []).length} idea{(localNotes || []).length !== 1 ? 's' : ''} floating around 💭

{/* Notes Canvas */}

{(localNotes || []).map((note, idx) => { if (!note) return null; const scale = depthScale[note.depth ?? 1] ?? 1; const shadow = depthShadow[note.depth ?? 1] ?? depthShadow[1]; const blur = depthBlur[note.depth ?? 1] ?? 0; const isPop = popId === note.id; const isDraggingThis = dragging === note.id; const isExpanded = note.expanded; const authorMember = authorMap[note.author]; return (

handleTouchStart(e, note.id)} onClick={() => { if (!isDraggingThis) handleTapNote(note.id); }} style={{ position: 'absolute', left: note.x ?? 50, top: note.y ?? 200, transform: `scale(${isDraggingThis ? scale * 1.1 : scale}) rotate(${note.rotation ?? 0}deg)`, width: isExpanded ? 200 : 140, minHeight: isExpanded ? 120 : 80, background: note.color ?? '#FFB5E8', borderRadius: 18, padding: 14, boxShadow: isDraggingThis ? '0 16px 45px rgba(0,0,0,0.25)' : isPop ? `0 0 0 4px rgba(255,255,255,0.8), ${shadow}` : shadow, cursor: 'grab', transition: isDraggingThis ? 'none' : 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)', animation: mounted ? isPop ? 'popBurst 0.5s ease-out' : `noteIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) ${idx * 0.08}s both` : 'none', zIndex: isDraggingThis ? 100 : isExpanded ? 50 : 10 + (note.depth ?? 1) * 5, filter: blur > 0 ? `blur(${blur}px)` : 'none', userSelect: 'none', WebkitUserSelect: 'none', display: 'flex', flexDirection: 'column', gap: 6 }} >

{note.emoji ?? '📝'}

{editingId === note.id ? (

e.stopPropagation()} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>

setEditText(e.target.value)}
                    autoFocus
                    style={{
                      background: 'rgba(255,255,255,0.6)', border: 'none',
                      borderRadius: 10, padding: 8, fontSize: 14,
                      fontFamily: 'inherit', fontWeight: 600,
                      color: '#333', resize: 'none', minHeight: 50,
                      outline: 'none'
                    }}
                  />
                  <div style={{ display: 'flex', gap: 6 }}>
                    <button onClick={() => handleSaveEdit(note.id)} style={{
                      flex: 1, background: 'rgba(255,255,255,0.7)', border: 'none',
                      borderRadius: 10, padding: '6px 0', fontSize: 13, fontWeight: 700,
                      color: '#4CAF50', cursor: 'pointer'
                    }}>✅ Save</button>
                    <button onClick={() => handleDeleteNote(note.id)} style={{
                      flex: 1, background: 'rgba(255,255,255,0.7)', border: 'none',
                      borderRadius: 10, padding: '6px 0', fontSize: 13, fontWeight: 700,
                      color: '#FF5252', cursor: 'pointer'
                    }}>🗑️</button>
                  </div>
                </div>
              ) : (
                <>
                  <p style={{
                    margin: 0, fontSize: isExpanded ? 16 : 13,
                    fontWeight: 700, color: '#2D2040', lineHeight: 1.35,
                    transition: 'all 0.3s ease'
                  }}>
                    {note.text ?? ''}
                  </p>

{isExpanded && (
                    <div style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      marginTop: 4,
                      animation: 'slideUp 0.3s ease-out'
                    }}>
                      <div style={{
                        fontSize: 11, color: 'rgba(45,32,64,0.5)', fontWeight: 600,
                        display: 'flex', alignItems: 'center', gap: 4
                      }}>
                        <div style={{
                          width: 16, height: 16, borderRadius: '50%',
                          background: authorMember?.avatarUrl ? `url(${authorMember.avatarUrl}) center/cover` : 'linear-gradient(135deg,#FF6B9D,#C44DFF)',
                          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                          fontSize: 8, color: 'white', fontWeight: 700
                        }}>
                          {!authorMember?.avatarUrl ? (authorMember?.displayName?.[0] ?? '?') : null}
                        </div>
                        {authorMember?.displayName ?? 'Someone'}
                      </div>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setEditingId(note.id);
                          setEditText(note.text ?? '');
                        }}
                        style={{
                          background: 'rgba(255,255,255,0.6)',
                          border: 'none', borderRadius: 8,
                          padding: '4px 10px', fontSize: 12,
                          fontWeight: 700, color: '#8B6BA0',
                          cursor: 'pointer',
                          transition: 'all 0.2s ease'
                        }}
                      >
                        ✏️ Edit
                      </button>
                    </div>
                  )}
                </>
              )}

{/* Depth indicator dots */}
              <div style={{
                position: 'absolute', bottom: 6, right: 10,
                display: 'flex', gap: 3
              }}>
                {[0, 1, 2].map(d => (
                  <div key={d} style={{
                    width: 5, height: 5, borderRadius: '50%',
                    background: d <= (note.depth ?? 1) ? 'rgba(45,32,64,0.4)' : 'rgba(45,32,64,0.12)',
                    transition: 'all 0.3s ease'
                  }} />
                ))}
              </div>
            </div>
          );
        })}

{/* Empty state */}
        {(localNotes || []).length === 0 && (
          <div style={{
            position: 'absolute', top: '30%', left: '50%',
            transform: 'translateX(-50%)',
            textAlign: 'center', color: '#9B8AA0'
          }}>
            <div style={{ fontSize: 56, marginBottom: 12 }}>🌱</div>
            <p style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>Plant your first idea!</p>
            <p style={{ fontSize: 14, fontWeight: 600, marginTop: 4, opacity: 0.7 }}>Tap the + button below</p>
          </div>
        )}
      </div>

{/* Add Note Modal */}
      {showAdd && (
        <div
          onClick={() => setShowAdd(false)}
          style={{
            position: 'fixed', inset: 0, zIndex: 200,
            background: 'rgba(45,32,64,0.4)',
            backdropFilter: 'blur(8px)',
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            padding: 20,
            paddingBottom: 'env(safe-area-inset-bottom, 20px)'
          }}
        >
          <div
            onClick={e => e.stopPropagation()}
            style={{
              background: 'white', borderRadius: 24,
              padding: 24, width: '100%', maxWidth: 400,
              boxShadow: '0 -8px 40px rgba(0,0,0,0.15)',
              animation: 'slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)'
            }}
          >
            <h2 style={{
              margin: '0 0 16px', fontSize: 22, fontWeight: 800,
              color: '#2D2040', textAlign: 'center'
            }}>🌸 New Idea Bloom</h2>
            <textarea
              value={newText}
              onChange={e => setNewText(e.target.value)}
              placeholder="What's on your mind?"
              autoFocus
              style={{
                width: '100%', minHeight: 100,
                background: 'linear-gradient(135deg, #FFF5E4, #FFE3F1)',
                border: '2px solid rgba(196,77,255,0.2)',
                borderRadius: 16, padding: 16,
                fontSize: 16, fontFamily: 'inherit',
                fontWeight: 600, color: '#2D2040',
                resize: 'none', outline: 'none',
                boxSizing: 'border-box',
                transition: 'border-color 0.3s ease'
              }}
              onFocus={e => e.target.style.borderColor = 'rgba(196,77,255,0.5)'}
              onBlur={e => e.target.style.borderColor = 'rgba(196,77,255,0.2)'}
            />
            <button
              onClick={handleAddNote}
              disabled={!newText.trim()}
              style={{
                width: '100%', marginTop: 14,
                background: newText.trim()
                  ? 'linear-gradient(135deg, #FF6B9D, #C44DFF, #4D9FFF)'
                  : '#ddd',
                border: 'none', borderRadius: 16,
                padding: '16px 0', fontSize: 17,
                fontWeight: 800, color: newText.trim() ? 'white' : '#999',
                cursor: newText.trim() ? 'pointer' : 'default',
                transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
                transform: newText.trim() ? 'scale(1)' : 'scale(0.97)'
              }}
            >
              ✨ Plant This Idea
            </button>
          </div>
        </div>
      )}

{/* FAB */}
      <button
        onClick={() => setShowAdd(true)}
        style={{
          position: 'fixed',
          bottom: 'calc(env(safe-area-inset-bottom, 20px) + 24px)',
          right: 24,
          width: 64, height: 64,
          borderRadius: '50%',
          background: 'linear-gradient(135deg, #FF6B9D, #C44DFF)',
          border: 'none',
          color: 'white',
          fontSize: 32,
          fontWeight: 300,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 20px rgba(255,100,180,0.4)',
          cursor: 'pointer',
          zIndex: 100,
          transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
          animation: mounted ? 'fabPulse 3s ease-in-out infinite' : 'none'
        }}
        onTouchStart={e => e.currentTarget.style.transform = 'scale(0.9) rotate(90deg)'}
        onTouchEnd={e => e.currentTarget.style.transform = 'scale(1) rotate(0deg)'}
      >
        +
      </button>
    </div>
  );
}</article></body></html>