{SUBJECTS.map((s) => (
);
}
// ─────────────── Note editor — inline editing
function NotePage({ density = "default" }) {
return (
onOpenSubject && onOpenSubject(s.id)}>
))}
{s.short} · Period {(SUBJECTS.indexOf(s) % 7) + 1} · Rm {s.room}
{s.name}
{s.grade}{s.grade !== "P" && · {s.teacher.split(" ").pop()}}
{view === "cards" && (
)}
{s.notes} notes
{s.hw} hw
{s.quizzes} quizzes
setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
);
};
return (
onSelect(n.id)} style={{
flex: 1, padding: "7px 10px", borderRadius: 4, cursor: "pointer",
background: active ? "var(--bg-2)" : "transparent",
borderLeft: active ? "2px solid var(--accent)" : "2px solid transparent",
}}>
{allUnits.length > 0 && (
)}
{n.title || "Untitled"}
{n.when}
{/* Unassigned user notes */}
{unassigned.length > 0 && (
{unitNotes.length === 0 && (
);
}
// Right-side context panel shown alongside the note editor
function NoteCompanionPanel({ subjectId }) {
const store = useNbStore();
const s = subjectBy(subjectId) || {};
const subjectHW = [...HOMEWORK, ...store.homework].filter(h => h.subject === subjectId && !h.done);
const subjectQuiz = QUIZZES_UPCOMING.find(q => q.subject === subjectId);
const hasContent = subjectHW.length > 0 || subjectQuiz;
return (
);
}
function NoteContent({ subjectId = "ap-bio", noteId }) {
const subj = subjectBy(subjectId) || subjectBy("ap-bio");
const store = useNbStore();
// Apply saved title overrides so the sidebar reflects edits immediately
const applyTitleOverride = (n) => {
const ov = nbGetNoteOverride(n.id);
return ov && ov.title !== undefined ? { ...n, title: ov.title } : n;
};
const userNotes = store.notesFor(subj.id).map(applyTitleOverride);
const builtinNotes = notesForSubject(subj.id).map(applyTitleOverride);
const notes = [...userNotes, ...builtinNotes];
const subjData = NOTES_BY_SUBJECT[subj.id] || { units: ["Notes"], notes: [] };
const initialActive = noteId && notes.find((n) => n.id === noteId) ? noteId : (notes[0] ? notes[0].id : null);
const [activeNoteId, setActiveNoteId] = React.useState(initialActive);
React.useEffect(() => { setActiveNoteId(initialActive); }, [subjectId, noteId, userNotes.length]);
const activeNote = notes.find((n) => n.id === activeNoteId) || notes[0];
// Group: "Your notes" (user-added) + units
const groups = [];
if (userNotes.length > 0) groups.push({ unit: "Your notes", items: userNotes });
subjData.units.forEach((u, i) => {
const items = builtinNotes.filter((n) => (n.unit ?? 0) === i);
if (items.length > 0) groups.push({ unit: u, items });
});
const [fullWidth, setFullWidth] = React.useState(false);
return (
{units.length > 0 && (
)}
{/* User-created units */}
{units.map((unit) => {
const unitNotes = userNotes.filter(n => n.unitId === unit.id);
return (
Unsorted
)}
{unassigned.map(n =>
{unit.name}
Empty — assign notes here
)}
{unitNotes.map(n =>
{/* Note list */}
{/* Editor */}
{activeNote ? setFullWidth(v => !v)} /> : (
)}
{/* Companion panel — hidden in full-width mode */}
{!fullWidth &&
);
}
function NoteEditor({ subject, note, fullWidth, onToggleFullWidth }) {
// Load previously-saved edits (title, blocks, tags) from the override store
const saved = nbGetNoteOverride(note.id) || {};
const [title, setTitle] = React.useState(saved.title !== undefined ? saved.title : note.title);
const [blocks, setBlocks] = React.useState(() => {
const raw = saved.blocks || note.blocks || [];
return raw.map((b, i) => ({ id: b.id ?? (i + 1), ...b }));
});
const [tags, setTags] = React.useState(saved.tags || note.tags || []);
// Keep a ref to current blocks so we can flush on unmount
const blocksRef = React.useRef(blocks);
blocksRef.current = blocks;
// Debounced block save while editing; flush immediately on unmount
React.useEffect(() => {
const t = setTimeout(() => nbUpdateNoteContent(note.id, { blocks }), 600);
return () => clearTimeout(t);
}, [blocks]);
React.useEffect(() => {
return () => nbUpdateNoteContent(note.id, { blocks: blocksRef.current });
}, []);
const [activeId, setActiveId] = React.useState(blocks[0]?.id || null);
const [aiDraftOpen, setAiDraftOpen] = React.useState(false);
const updateBlock = (id, text) => setBlocks((bs) => bs.map((b) => b.id === id ? { ...b, text } : b));
const changeBlockType = (id, newType) => setBlocks((bs) => bs.map((b) => b.id === id ? { ...b, type: newType, text: b.text === "/" ? "" : b.text } : b));
const toggleCheckbox = (id) => setBlocks((bs) => bs.map((b) => b.id === id ? { ...b, checked: !b.checked } : b));
const addBlockAfter = (id, type = "p") => {
const newBlock = { id: Date.now(), type, text: "" };
setBlocks((bs) => {
const idx = bs.findIndex((b) => b.id === id);
const next = [...bs];
next.splice(idx + 1, 0, newBlock);
return next;
});
setActiveId(newBlock.id);
};
const addTag = () => {
const v = window.prompt("Tag name (without #)");
if (!v) return;
const t = "#" + v.trim().replace(/^#/, "").replace(/\s+/g, "-").toLowerCase();
if (t === "#" || tags.includes(t)) return;
const next = [...tags, t];
setTags(next);
nbUpdateNoteContent(note.id, { tags: next });
};
const removeTag = (t) => {
const next = tags.filter((x) => x !== t);
setTags(next);
nbUpdateNoteContent(note.id, { tags: next });
};
const applyDraft = (draft) => {
if (draft.title) { setTitle(draft.title); nbUpdateNoteContent(note.id, { title: draft.title }); }
const newBlocks = draft.blocks.map((b, i) => ({ id: i + 1, ...b }));
setBlocks(newBlocks);
nbUpdateNoteContent(note.id, { blocks: newBlocks });
window.dispatchEvent(new CustomEvent("toast", { detail: "Draft applied — edit anything you like" }));
};
// Selection toolbar state
const [selToolbar, setSelToolbar] = React.useState(null); // { text, x, y }
const [selResult, setSelResult] = React.useState(null); // { action, text }
// Called directly from EditableBlock's onMouseUp — much more reliable than checking
// document.activeElement on the parent div's mouseup event.
const handleTextSelect = React.useCallback((info) => {
setSelToolbar(info);
}, []);
const dismissToolbar = React.useCallback(() => {
setSelToolbar(null);
}, []);
// Track focused element for bold/italic formatting
const activeElRef = React.useRef(null);
// Apply markdown-style formatting (** for bold, * for italic) to the selected text
const applyFormat = (prefix, suffix = prefix) => {
const el = activeElRef.current || document.activeElement;
// ContentEditable paragraph blocks — use execCommand for real bold/italic
if (el && el.isContentEditable) {
if (prefix === "**") { document.execCommand("bold", false, null); return; }
if (prefix === "*") { document.execCommand("italic", false, null); return; }
if (prefix === "`") {
const sel = window.getSelection();
const selected = sel ? sel.toString() : "";
if (selected) document.execCommand("insertText", false, "`" + selected + "`");
else window.dispatchEvent(new CustomEvent("toast", { detail: "Select text first, then click code" }));
return;
}
return;
}
// Fallback for textarea/input block types (h2, li, quote, checkbox)
if (!el || (el.tagName !== "TEXTAREA" && el.tagName !== "INPUT")) {
window.dispatchEvent(new CustomEvent("toast", { detail: "Click inside a paragraph block first" }));
return;
}
const start = el.selectionStart;
const end = el.selectionEnd;
if (typeof start !== "number" || start === end) {
window.dispatchEvent(new CustomEvent("toast", { detail: "Select some text first, then click the format button" }));
return;
}
const val = el.value;
const newVal = val.slice(0, start) + prefix + val.slice(start, end) + suffix + val.slice(end);
const Ctor = el.tagName === "TEXTAREA" ? window.HTMLTextAreaElement : window.HTMLInputElement;
const setter = Object.getOwnPropertyDescriptor(Ctor.prototype, "value")?.set;
if (setter) {
setter.call(el, newVal);
el.dispatchEvent(new Event("input", { bubbles: true }));
setTimeout(() => {
if (el.isConnected) { el.focus(); el.setSelectionRange(start + prefix.length, end + prefix.length); }
}, 20);
}
};
const runSelAI = async (action, text) => {
setSelResult({ action, text: "Thinking…" });
const prompts = {
explain: `Explain the following in 2–3 sentences for a high school student:\n\n"${text}"`,
flashcard: `Turn this into ONE flashcard. Return ONLY:\nQ: No notes for {subj.short} yet.
{/* AI selection toolbar — fixed to viewport near selection */}
{selToolbar && (
{/* AI selection result panel */}
{selResult && (
)}
{ applyDraft(draft); setAiDraftOpen(false); }}
onClose={() => setAiDraftOpen(false)}
/>
)}
);
}
function linkedItemsFor(subjectId) {
const map = {
"ap-lit": [{ icon: Ico.quiz, label: "Beloved themes quiz" }, { icon: Ico.hw, label: "Body paragraph draft" }, { icon: Ico.cards, label: "12 character cards" }],
"ap-bio": [{ icon: Ico.quiz, label: "Cellular Resp. Quiz · Thu" }, { icon: Ico.hw, label: "Enzyme lab report" }, { icon: Ico.cards, label: "18 flashcards" }, { icon: Ico.file, label: "mitochondria-diagram.pdf" }],
"alg2": [{ icon: Ico.quiz, label: "Trig identities quiz" }, { icon: Ico.hw, label: "Problem set 7.3" }, { icon: Ico.cards, label: "22 flashcards" }],
"us-hist": [{ icon: Ico.quiz, label: "Founding-era quiz" }, { icon: Ico.hw, label: "Federalist No. 10 response" }, { icon: Ico.cards, label: "14 flashcards" }],
"spanish-3":[{ icon: Ico.quiz, label: "Pretérito quiz · Fri" }, { icon: Ico.hw, label: "Vocabulario U6" }, { icon: Ico.cards, label: "30 flashcards" }],
"chem": [{ icon: Ico.quiz, label: "Solutions quiz" }, { icon: Ico.hw, label: "Molarity worksheet" }, { icon: Ico.cards, label: "26 flashcards" }],
"studio-art":[{ icon: Ico.file, label: "Reference photos" }, { icon: Ico.hw, label: "Final piece — critique" }],
"phys-ed": [{ icon: Ico.file, label: "May log" }],
};
return map[subjectId] || [];
}
const SLASH_COMMANDS = [
{ key: "p", icon: "¶", label: "Text", desc: "Plain paragraph" },
{ key: "h2", icon: "H", label: "Heading", desc: "Large section title" },
{ key: "li", icon: "•", label: "List", desc: "Bullet list item" },
{ key: "quote", icon: '"', label: "Quote", desc: "Block quote" },
{ key: "checkbox", icon: "☐", label: "Checkbox", desc: "To-do item" },
{ key: "divider", icon: "—", label: "Divider", desc: "Horizontal rule" },
];
function SlashMenu({ onSelect, onClose }) {
const [sel, setSel] = React.useState(0);
const ref = React.useRef(null);
React.useEffect(() => {
const handler = (e) => {
if (e.key === "ArrowDown") { e.preventDefault(); e.stopPropagation(); setSel((s) => Math.min(s + 1, SLASH_COMMANDS.length - 1)); }
if (e.key === "ArrowUp") { e.preventDefault(); e.stopPropagation(); setSel((s) => Math.max(s - 1, 0)); }
if (e.key === "Enter") { e.preventDefault(); e.stopPropagation(); onSelect(SLASH_COMMANDS[sel].key); }
if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onClose(); }
};
document.addEventListener("keydown", handler, true);
return () => document.removeEventListener("keydown", handler, true);
}, [sel, onSelect, onClose]);
return (
{[["explain","✦ Explain"],["flashcard","+ Flashcard"],["question","? Question"]].map(([k, l]) => (
))}
)}
{subject.short.toUpperCase()} · {unitLabel}
Edited {note.when} · auto-saved
{ setTitle(e.target.value); nbUpdateNoteContent(note.id, { title: e.target.value }); }}
className="serif"
placeholder="Untitled note"
style={{
fontSize: 38, fontFamily: "var(--f-display)", border: 0, outline: 0,
width: "100%", background: "transparent", color: "var(--ink)",
margin: "0 0 6px", letterSpacing: "-0.015em",
}}
/>
{tags.map((t) => (
removeTag(t)} title="Click to remove">{t} ×
))}
+ tag
{/* Toolbar */}
✦ {selResult.action === "explain" ? "AI Explanation" : selResult.action === "flashcard" ? "AI Flashcard" : "AI Question"}
{selResult.text}
{blocks.map((b, i) => (
setActiveId(b.id)}
onFocusEl={(el) => { activeElRef.current = el; }}
onChange={(t) => updateBlock(b.id, t)}
onChangeType={(type) => changeBlockType(b.id, type)}
onToggleCheck={() => toggleCheckbox(b.id)}
onAddAfter={(type) => addBlockAfter(b.id, type)}
onTextSelect={handleTextSelect}
onDismissToolbar={dismissToolbar}
autoFocus={isEmpty && i === 0}
/>
))}
{/* Attachments */}
Block type
{SLASH_COMMANDS.map((cmd, i) => (
{ e.preventDefault(); onSelect(cmd.key); }}
style={{
display: "flex", alignItems: "center", gap: 12, padding: "7px 14px",
cursor: "pointer",
background: i === sel ? "var(--bg-2)" : "transparent",
}}
onMouseEnter={() => setSel(i)}
>
{cmd.icon}
))}
{cmd.label}
{cmd.desc}
{block.checked && ✓}
handleChange(e.target.value)} onFocus={handleFocus} onMouseUp={handleInputMouseUp} onKeyDown={handleKey} placeholder="To-do item"
style={{ ...baseStyle, fontSize: 14.5, lineHeight: 1.55, textDecoration: block.checked ? "line-through" : "none", color: block.checked ? "var(--ink-3)" : "var(--ink)" }} />
handleChange(e.target.value)} onFocus={handleFocus} onMouseUp={handleInputMouseUp} onKeyDown={handleKey} placeholder="Quote"
className="serif"
style={{ ...baseStyle, fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: 18, color: "var(--ink-2)" }} />
{
ref.current = el;
if (el && !ceInitialized.current) {
el.innerHTML = block.text || "";
ceInitialized.current = true;
}
}}
contentEditable
suppressContentEditableWarning
onInput={(e) => {
const html = e.currentTarget.innerHTML;
const text = e.currentTarget.textContent;
if (text === "/") { setShowSlash(true); }
else if (showSlash && !text.startsWith("/")) { setShowSlash(false); }
onChange(html);
}}
onFocus={(e) => { onFocus(); if (onFocusEl) onFocusEl(e.currentTarget); }}
onMouseUp={(e) => {
const sel = window.getSelection();
if (sel && sel.toString().trim().length >= 3) {
const range = sel.getRangeAt(0);
const rect = range.getBoundingClientRect();
if (onTextSelect) {
onTextSelect({
text: sel.toString().trim(),
x: Math.round((rect.left + rect.right) / 2),
y: Math.max(Math.round(rect.top) - 56, 70),
});
return;
}
}
onDismissToolbar && onDismissToolbar();
}}
onKeyDown={(e) => {
if (e.key === "Escape" && showSlash) { setShowSlash(false); e.stopPropagation(); }
if (e.key === "Enter" && !showSlash && !e.shiftKey) { e.preventDefault(); onAddAfter && onAddAfter("p"); }
}}
data-placeholder="Start writing — or type / for commands"
style={{ ...baseStyle, fontSize: 14.5, lineHeight: 1.6, minHeight: 26, cursor: "text", whiteSpace: "pre-wrap", wordBreak: "break-word" }}
/>
);
}
function BlockMargin({ active }) {
if (!active) return null;
return
{Ico.drag}
{Ico.plus}
;
}
function NoteAttachments({ subjectId, noteId }) {
const store = useNbStore();
const files = store.attachmentsFor(subjectId, noteId);
const inputRef = React.useRef(null);
const [dragOver, setDragOver] = React.useState(false);
const [uploading, setUploading] = React.useState(false);
const handleFiles = async (fileList) => {
if (!fileList || fileList.length === 0) return;
setUploading(true);
for (const f of Array.from(fileList)) {
if (f.size > 20 * 1024 * 1024) {
window.dispatchEvent(new CustomEvent("toast", { detail: `${f.name} is too large (max 20 MB)` }));
continue;
}
await nbAddAttachment(subjectId, noteId, f);
}
setUploading(false);
window.dispatchEvent(new CustomEvent("toast", { detail: "Attached" }));
};
return (
Attachments · {files.length}
{files.map((f) => nbRemoveAttachment(subjectId, noteId, f.id)} />)}
)}
inputRef.current && inputRef.current.click()}
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
onDragLeave={() => setDragOver(false)}
onDrop={(e) => { e.preventDefault(); setDragOver(false); handleFiles(e.dataTransfer.files); }}
style={{
border: "1.5px dashed " + (dragOver ? "var(--accent)" : "var(--hairline)"),
borderRadius: 6, padding: "18px 14px",
background: dragOver ? "var(--accent-soft)" : (uploading ? "var(--bg-2)" : "transparent"),
textAlign: "center", cursor: "pointer",
transition: "all 0.15s ease",
}}
>
{uploading ? "Uploading…" : dragOver ? "Drop to attach" : "Drag a file here, or click to browse"}
PDF · DOC · IMG · TXT · up to 20 MB
{isImage ? (
) : (
{icon}
)}
{file.name}
{fmtFileSize(file.size)}