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>

e2e/organise.mjs

@@ -215,21 +215,49 @@ try {
   await p.waitForTimeout(1800);
   check((await p.locator("[data-separator]").count()) === 1, "a separator can be added");
 
-  /* Renaming is right-click, like removing. A left-click on the label used to
-     start an edit, so the row could not be touched without falling into one. */
-  const label = p.getByLabel("Separator label");
-  check((await label.count()) === 0, "clicking a separator does not drop straight into renaming");
+  /* Everything about a line is set in one dialog reached by right-click, like
+     every other row here is acted on. A left-click on the label used to start an
+     edit in place, so the row could not be touched without falling into one. */
+  check(
+    (await p.getByLabel("Separator label").count()) === 0,
+    "clicking a separator does not drop straight into renaming"
+  );
 
   await p.locator("[data-separator]").click({ button: "right" });
   await p.waitForTimeout(600);
-  await p.getByText("Rename", { exact: true }).click();
-  await p.waitForTimeout(500);
-  await label.fill("Wichtig");
-  await label.press("Enter");
-  await p.waitForTimeout(1800);
+  check(
+    !/Colour|Line/.test(await p.locator("[data-context-menu], body").first().innerText()) ||
+      (await p.getByText("Edit", { exact: true }).count()) === 1,
+    "its menu offers one Edit rather than one entry per property"
+  );
+  await p.getByText("Edit", { exact: true }).click();
+  await p.waitForTimeout(700);
+
+  /* The dialog draws the line itself, so "dotted" is something you see rather
+     than a word you have to imagine. */
+  check((await p.locator("[data-separator-preview]").count()) === 1, "the dialog shows the line as it will be");
+  check(
+    (await p.locator("[data-line-option]").count()) === 5,
+    "with every shape drawn beside its name",
+    String(await p.locator("[data-line-option]").count())
+  );
+  const samples = await p
+    .locator("[data-line-option] [data-separator-rule]")
+    .evaluateAll((els) => els.map((el) => getComputedStyle(el).borderTopStyle || "solid"));
+  check(
+    new Set(samples).size > 1,
+    "and the samples really differ from one another",
+    samples.join(", ")
+  );
+
+  await p.getByLabel("Separator name").fill("Wichtig");
+  await p.locator('[data-line-option="dashed"]').click();
+  await p.locator('[data-colour-option="#1f9c96"]').click();
+  await p.locator("[data-separator-save]").click();
+  await p.waitForTimeout(2000);
   check(
     /wichtig/i.test(await p.locator("[data-separator]").innerText()),
-    "and it can be named from the same menu",
+    "and it carries the name it was given",
     await p.locator("[data-separator]").innerText()
   );
 
@@ -265,22 +293,9 @@ try {
   await p.waitForTimeout(800);
   check((await p.locator("[data-separator]").count()) === 1, "and back on the way in");
 
-  /* ── a line can be given its own colour and shape ──
+  /* ── the choices reach the server, and the screen ──
    * A notebook divided into three parts is easier to read at a glance when the
    * lines differ; grey-on-grey they all look like the same line repeated. */
-  await p.locator("[data-separator]").click({ button: "right" });
-  await p.waitForTimeout(600);
-  await p.locator("[data-submenu-toggle]").filter({ hasText: "Colour" }).first().click();
-  await p.waitForTimeout(500);
-  await p.locator("[data-submenu] button").filter({ hasText: "Teal" }).first().click();
-  await p.waitForTimeout(2000);
-  await p.locator("[data-separator]").click({ button: "right" });
-  await p.waitForTimeout(600);
-  await p.locator("[data-submenu-toggle]").filter({ hasText: "Line" }).first().click();
-  await p.waitForTimeout(500);
-  await p.locator("[data-submenu] button").filter({ hasText: "Dashed" }).first().click();
-  await p.waitForTimeout(2200);
-
   const stored = (await api(p, "GET", "/notebooks")).body.find((b) => b.name === "Ordnung");
   const seps = JSON.parse(stored?.separators || "[]");
   check(