One dialog per thing, and rows dragged into a chapter

A separator had three menu entries — rename, colour, line — plus an input
that appeared in the row itself: three shapes of interaction for one small
thing, and none of them showed the result. Choosing "dotted" from a list
of words is a guess. It is one Edit now, and the dialog draws the line as
it will look with every shape drawn beside its name, from the very rules
the list draws with: a sample that can disagree with the result is worse
than none.

A chapter goes the same way — name, mark and colour in one dialog, the
same one whether it is being made or changed, with the row drawn at the
top. Asked from three entries, getting a new chapter to look right took
three visits. The name dialog it used is gone.

A row is put into a chapter by dragging it onto it: the chapter lights
up and takes what is dropped rather than growing a line above it, since
a chapter is a place and not a neighbour. Notes and separators both, and
the "+ Separator" inside a chapter goes with it — a second way to make
the same thing in a second place is a second thing to keep straight.

A link now wears the mark of the note it points at, in the text and in
the @ menu. It travels when the note's mark changes, as the label
already did.

Two alignment faults: a task list's checkbox was nudged down by a fixed
0.35em measured once against one font, so it floated above the line it
belonged to — it is centred in a box one line tall now. And the title
bar's mark was spaced like the buttons at the far end and grew with its
contents, so picking an emoji shifted the title sideways.

Fourteen suites green: 374 browser checks, 241 unit tests.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/editor/editor.css

@@ -27,6 +27,9 @@
      from the rows under it. */
   --ne-th-bg: #eaeef2;
   --ne-th-rule: #afb8c1;
+  /* One line of body text. Named because the task list needs to know it: a
+     checkbox is centred against a line, and a line is this tall. */
+  --ne-line: 1.7;
 }
 .note-editor[data-theme="dark"] {
   --ne-text: #e6edf3;
@@ -64,7 +67,7 @@
      an unset preference still reads as the serif it always was. */
   font-family: var(--ne-font, "Newsreader", Georgia, serif);
   font-size: 15px;
-  line-height: 1.7;
+  line-height: var(--ne-line);
   padding: 20px 24px;
   min-height: 100%;
   word-break: break-word;
@@ -246,9 +249,16 @@
   align-items: flex-start;
   gap: 8px;
 }
+/* The box sits in the middle of the *first line* beside it, not at a fixed
+   nudge from the top. `margin-top: 0.35em` was measured once against one font at
+   one size; changing the note's typeface, or writing a task that wraps, left the
+   box floating above the text it belongs to. Giving the label the height of one
+   line and centring inside it holds for every size. */
 .note-editor .ProseMirror ul[data-type="taskList"] li > label {
   flex: 0 0 auto;
-  margin-top: 0.35em;
+  display: flex;
+  align-items: center;
+  height: calc(1em * var(--ne-line));
   user-select: none;
 }
 .note-editor .ProseMirror ul[data-type="taskList"] li > div {

frontend/src/editor/noteLink.js

@@ -50,6 +50,15 @@ export const NoteLink = Node.create({
       },
       // Set when the target no longer exists, so a dead link reads as broken
       // instead of silently going nowhere.
+      /* The target's own mark, kept on the link and refreshed like the label is.
+       * A reference that shows the same sheet-of-paper glyph whatever it points
+       * at tells you nothing; the mark you gave the note is how you recognise
+       * it everywhere else. */
+      icon: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-icon") || null,
+        renderHTML: (a) => (a.icon ? { "data-icon": a.icon } : {}),
+      },
       missing: {
         default: false,
         parseHTML: (el) => el.getAttribute("data-missing") === "true",
@@ -71,7 +80,7 @@ export const NoteLink = Node.create({
         href: "#",
         title: node.attrs.label,
       }),
-      `${{ notebook: "📓", pin: "📌" }[node.attrs.kind] || "📝"} ${node.attrs.label}`,
+      `${node.attrs.icon || { notebook: "📓", pin: "📌" }[node.attrs.kind] || "📝"} ${node.attrs.label}`,
     ];
   },
 
@@ -95,7 +104,12 @@ export const NoteLink = Node.create({
             .insertContentAt(range, [
               {
                 type: "noteLink",
-                attrs: { noteId: props.id, label: props.label, kind: props.kind || "note" },
+                attrs: {
+                  noteId: props.id,
+                  label: props.label,
+                  kind: props.kind || "note",
+                  icon: props.icon || null,
+                },
               },
               { type: "text", text: " " },
             ])
@@ -131,7 +145,7 @@ function renderSuggestionList() {
           it,
           i
         ) => `<button type="button" class="note-link-option${i === selected ? " is-selected" : ""}" data-index="${i}">
-          <span class="note-link-kind">${it.kind === "notebook" ? "📓" : "📝"}</span>
+          <span class="note-link-kind">${it.icon || (it.kind === "notebook" ? "📓" : "📝")}</span>
           <span class="note-link-label"></span>
         </button>`
       )

frontend/src/editor/useNoteEditor.jsx

@@ -123,7 +123,7 @@ export function useNoteEditor({
 }
 
 /** The editable page itself. */
-export function EditorSurface({ editor, dark, font, minHeight, onOpenNote, resolveLinkLabel }) {
+export function EditorSurface({ editor, dark, font, minHeight, onOpenNote, resolveLinkLabel, resolveLinkIcon }) {
   /* Note links carry the label they were created with, so renaming a note would
    * leave every reference to it showing the old title.
    *
@@ -139,8 +139,15 @@ export function EditorSurface({ editor, dark, font, minHeight, onOpenNote, resol
       const label = resolveLinkLabel(node.attrs.noteId);
       const missing = label === null;
       const nextLabel = missing ? node.attrs.label : label;
-      if (nextLabel !== node.attrs.label || missing !== !!node.attrs.missing) {
-        edits.push([pos, { ...node.attrs, label: nextLabel, missing }]);
+      // The mark travels the same way, and for the same reason: it belongs to
+      // the note, so it has to follow when the note's changes.
+      const icon = (resolveLinkIcon ? resolveLinkIcon(node.attrs.noteId) : node.attrs.icon) ?? null;
+      if (
+        nextLabel !== node.attrs.label ||
+        missing !== !!node.attrs.missing ||
+        icon !== (node.attrs.icon ?? null)
+      ) {
+        edits.push([pos, { ...node.attrs, label: nextLabel, missing, icon }]);
       }
     });
     if (edits.length === 0) return;
@@ -149,7 +156,7 @@ export function EditorSurface({ editor, dark, font, minHeight, onOpenNote, resol
     tr.setMeta(LABEL_REFRESH, true);
     tr.setMeta("addToHistory", false); // undo should not step through renames
     editor.view.dispatch(tr);
-  }, [editor, resolveLinkLabel]);
+  }, [editor, resolveLinkLabel, resolveLinkIcon]);
 
   const handleClick = useCallback(
     (e) => {