+ {[...notes]
+ .sort(
+ (a, b) =>
+ new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+ )
+ .map((note) => {
+ const isEditing = editingNoteId === note.id;
+ const displayNote = isEditing && editingNote ? editingNote : note;
+
+ return (
+
setHoveredNoteId(note.id)}
+ onMouseLeave={() => setHoveredNoteId(null)}
+ onClick={() => !editingNoteId && startEditingNote(note.id)}
+ className={`bg-neutral-800 border border-neutral-700 rounded-lg p-4 relative transition-all ${
+ isEditing
+ ? "fixed inset-0 z-30 m-auto max-h-[80vh] overflow-y-auto"
+ : editingNoteId
+ ? "opacity-50 blur-sm pointer-events-none"
+ : "hover:shadow-md hover:border-neutral-600 cursor-pointer"
+ }`}
+ >
+ {/* Options menu */}
+ {(hoveredNoteId === note.id || showDeleteMenuId === note.id) &&
+ !editingNoteId && (
+
+
+
+ {showDeleteMenuId === note.id && (
+
+
+
+ )}
+
+ )}
+
+ {/* Editing mode */}
+ {isEditing ? (
+
+
+
+
+
+
+ {/* Checklist mode */}
+ {displayNote.isChecklist ? (
+
+ {displayNote.tasks.map((task, index) => (
+
+ {
+ if (el) {
+ (taskInputRefs.current as HTMLInputElement[])[index] = el;
+ }
+ }}
+ type="text"
+ value={task.text}
+ onChange={(e) => {
+ if (displayNote?.tasks) {
+ handleTaskTextChange(
+ displayNote.tasks,
+ (updatedTasks) => {
+ setEditingNote((prev) => {
+ if (!prev) return prev;
+ return {
+ ...prev,
+ tasks: typeof updatedTasks === "function" ? updatedTasks(displayNote.tasks) : updatedTasks
+ };
+ });
+ }
+ )(task.id, e.target.value);
+ }
+ }}
+ className="flex-1 bg-transparent outline-none"
+ placeholder="Enter task..."
+ onKeyDown={(e) => {
+ if (displayNote?.tasks) {
+ handleTaskKeyDown(
+ displayNote.tasks,
+ (updatedTasks) => {
+ if (editingNote) {
+ setEditingNote({
+ ...editingNote,
+ tasks: typeof updatedTasks === "function" ? updatedTasks(displayNote.tasks) : updatedTasks
+ });
+ }
+ }
+ )(e, index);
+ }
+ }}
+ />
+
+ ))}
+
+ ) : (
+
+ )}
+
+
+ {new Date(note.createdAt).toLocaleString()}
+
+
+
+
+ ) : (
+ <>
+ {note.title && (
+
+ {note.title}
+
+ )}
+ {note.isChecklist ? (
+
+ ) : (
+
+ {note.content}
+
+ )}
+
+ {new Date(note.createdAt).toLocaleString()}
+
+ >
+ )}
+