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/chapters.mjs

@@ -24,15 +24,20 @@ try {
 
   const titles = () =>
     p.locator("[data-note-row] [data-note-title]").evaluateAll((els) => els.map((e) => e.textContent.trim()));
-  /* The colour is chosen while the chapter is being made. It is what tells one
-     chapter from the next, and having to right-click a fresh one to say which
-     it is meant two visits for a single decision. */
-  const addChapter = async (name, colour = null) => {
+  /* Name, colour and mark are chosen while the chapter is being made — they are
+     one decision, and asked one at a time from three menu entries, getting a new
+     chapter to look right took three visits. */
+  const addChapter = async (name, colour = null, icon = null) => {
     await p.locator("[data-add-chapter]").click();
     await p.waitForTimeout(600);
     await p.getByLabel("Chapter name").fill(name);
     if (colour) await p.locator(`[data-colour-option="${colour}"]`).click();
-    await p.getByRole("button", { name: "Create", exact: true }).click();
+    if (icon) {
+      await p.getByLabel("Search icons").fill(icon);
+      await p.waitForTimeout(400);
+      await p.locator("[data-icon-option]").nth(1).click();
+    }
+    await p.locator("[data-chapter-save]").click();
     await p.waitForTimeout(2000);
   };
   /* Filing a note is one of the things a row can have done to it, and they all
@@ -77,7 +82,11 @@ try {
   await createNotebook(p, "Leeres Buch");
   await p.locator("button").filter({ hasText: "Leeres Buch" }).first().click();
   await p.waitForTimeout(1000);
-  await addChapter("Nur ein Kapitel", "#a371f7");
+  await addChapter("Nur ein Kapitel", "#a371f7", "invoice");
+  check(
+    (await p.locator("[data-chapter-dialog]").count()) === 0,
+    "the chapter dialog closes once it has been saved"
+  );
   check(
     (await p.locator("[data-chapter-row]").count()) === 1,
     "a chapter shows in a notebook that has no notes at all",
@@ -85,9 +94,9 @@ try {
   );
   const madeWithColour = (await api(p, "GET", "/chapters")).body.find((c) => c.name === "Nur ein Kapitel");
   check(
-    madeWithColour?.color === "#a371f7",
-    "and the colour picked while making it is stored with it",
-    String(madeWithColour?.color)
+    madeWithColour?.color === "#a371f7" && !!madeWithColour?.icon,
+    "and the colour and mark picked while making it are stored with it",
+    JSON.stringify([madeWithColour?.color, madeWithColour?.icon])
   );
   check(
     (await p.locator("[data-no-loose-notes]").count()) === 1,
@@ -254,38 +263,137 @@ try {
   await p.locator("[data-chapter-row]").first().click();
   await p.waitForTimeout(1200);
 
-  /* ── a chapter can be divided too ──
-   * It is a list like the notebook is. Its lines are its own: each carries the
-   * list it was drawn in, so the notebook's stay outside and these stay here. */
-  /* Pressing a chapter row toggles it, so "make sure it is open" cannot be a
-     single click — whether it opens or closes depends on what was open before. */
-  const openChapterBlock = async () => {
-    for (let i = 0; i < 3; i++) {
-      if (await p.locator("[data-chapter-notes]").count()) return true;
-      await p.locator("[data-chapter-row]").first().click();
-      await p.waitForTimeout(1100);
-    }
-    return (await p.locator("[data-chapter-notes]").count()) > 0;
+  /* ── a row is put into a chapter by dragging it there ──
+   * A chapter is a place, so it takes what is dropped on it rather than making
+   * room beside it. That is also how a chapter gets a line of its own: there is
+   * no second "+ Separator" inside it, because a second way to make the same
+   * thing in a second place is a second thing to keep straight. */
+  check(
+    (await p.locator("[data-add-chapter-separator]").count()) === 0,
+    "a chapter has no separator button of its own"
+  );
+
+  /* Dragged with synthesised pointer events from the grip, the way a finger
+     does it — Playwright drives a mouse, and the branch worth exercising is the
+     one a phone takes. */
+  /* Held and dropped in two steps, with a wait between: the highlight is React
+     state, and asking for it in the same breath as the move that caused it reads
+     the DOM before it has been drawn. */
+  const holdOver = (dragId, chapterId) =>
+    p.evaluate(
+      ([from, to]) => {
+        const row = document.querySelector(`[data-reorder-id="${from}"]`);
+        const grip = row?.querySelector("[data-reorder-grip]");
+        const target = document.querySelector(`[data-reorder-id="${to}"]`);
+        if (!grip || !target) return `missing ${!!grip} ${!!target}`;
+        const box = target.getBoundingClientRect();
+        window.__drop = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+        const fire = (el, type, x, y) =>
+          el.dispatchEvent(
+            new PointerEvent(type, {
+              pointerType: "touch",
+              pointerId: 1,
+              clientX: x,
+              clientY: y,
+              bubbles: true,
+              cancelable: true,
+            })
+          );
+        const s = grip.getBoundingClientRect();
+        fire(grip, "pointerdown", s.x + s.width / 2, s.y + s.height / 2);
+        fire(window, "pointermove", window.__drop.x, window.__drop.y - 6);
+        fire(window, "pointermove", window.__drop.x, window.__drop.y);
+        return "held";
+      },
+      [dragId, chapterId]
+    );
+
+  const letGo = () =>
+    p.evaluate(() => {
+      const d = window.__drop;
+      window.dispatchEvent(
+        new PointerEvent("pointerup", {
+          pointerType: "touch",
+          pointerId: 1,
+          clientX: d.x,
+          clientY: d.y,
+          bubbles: true,
+          cancelable: true,
+        })
+      );
+    });
+
+  const dragOnto = async (dragId, chapterId) => {
+    const held = await holdOver(dragId, chapterId);
+    if (held !== "held") return held;
+    await p.waitForTimeout(400);
+    const lit = await p.locator("[data-chapter-drop]").count();
+    await letGo();
+    await p.waitForTimeout(2200);
+    return lit === 1 ? "done" : "no-highlight";
   };
-  check(await openChapterBlock(), "a chapter unfolds under its row");
-  const insideBefore = await p.locator("[data-chapter-notes] [data-separator]").count();
-  await p.locator("[data-add-chapter-separator]").click();
-  await p.waitForTimeout(2200);
+
+  /* Rows are only draggable while rearranging is switched on — the handles are
+     asked for rather than standing in every row. */
+  if ((await p.locator("[data-reorder-toggle]").getAttribute("data-reorder-toggle")) === "off") {
+    await p.locator("[data-reorder-toggle]").click();
+    await p.waitForTimeout(700);
+  }
   check(
-    (await p.locator("[data-chapter-notes] [data-separator]").count()) === insideBefore + 1,
-    "a line can be drawn inside a chapter",
-    String(await p.locator("[data-chapter-notes] [data-separator]").count())
+    (await p.locator("[data-reorder-id]").count()) > 0,
+    "there are handles to drag by",
+    JSON.stringify({
+      toggle: await p.locator("[data-reorder-toggle]").getAttribute("data-reorder-toggle"),
+      grips: await p.locator("[data-reorder-grip]").count(),
+      rows: await p.locator("[data-reorder-id]").count(),
+    })
   );
-  const drawnIn = JSON.parse(
-    (await api(p, "GET", "/notebooks")).body.find((b) => b.name === "Haus")?.separators || "[]"
+
+  const looseBefore = (await titles()).length;
+  /* Both ends of the drag are read off the rows on screen: what is draggable is
+     what is rendered, and the server's idea of the notebook includes rows this
+     list is not showing. */
+  const rowOrder = await p.locator("[data-reorder-id]").evaluateAll((els) => els.map((e) => e.dataset.reorderId));
+  const shownChapters = await p
+    .locator("[data-chapter-row]")
+    .evaluateAll((els) => els.map((e) => e.getAttribute("data-chapter-row")));
+  const noteId = rowOrder.find(
+    (id) => id && !id.startsWith("sep-") && id !== "__end__" && !shownChapters.includes(id)
   );
   check(
-    drawnIn.some((sep) => sep.chapterId) && drawnIn.some((sep) => !sep.chapterId),
-    "and it belongs to the chapter, while the notebook keeps its own",
-    JSON.stringify(drawnIn.map((sep) => [sep.label, sep.chapterId]))
+    !!noteId && !!shownChapters[0],
+    "there is a note row and a chapter row to drag between",
+    JSON.stringify({ rowOrder, shownChapters })
   );
-  await p.locator("[data-chapter-row]").first().click();
-  await p.waitForTimeout(1000);
+  const dragged = await dragOnto(noteId, shownChapters[0]);
+  check(dragged === "done", "the chapter lights up as the row is held over it", dragged);
+  check(
+    (await titles()).length === looseBefore - 1,
+    "a note dragged onto a chapter leaves the notebook's own list",
+    `${looseBefore} → ${(await titles()).length}`
+  );
+  const filedByDrag = (await api(p, "GET", "/notes")).body.filter((n) => n.chapter_id).length;
+  check(filedByDrag >= 1, "and the server has it filed there", String(filedByDrag));
+
+  /* A line is drawn in the notebook and dragged in, which is how a chapter is
+     divided at all. */
+  const sepRow = (
+    await p.locator("[data-reorder-id]").evaluateAll((els) => els.map((e) => e.dataset.reorderId))
+  ).find((id) => id && id.startsWith("sep-"));
+  if (sepRow) {
+    await dragOnto(sepRow, shownChapters[0]);
+    await p.waitForTimeout(2500);
+    const inChapterNow = JSON.parse(
+      (await api(p, "GET", "/notebooks")).body.find((b) => b.name === "Haus")?.separators || "[]"
+    );
+    check(
+      inChapterNow.some((sep) => sep.chapterId),
+      "a separator dragged onto a chapter belongs to it",
+      JSON.stringify(inChapterNow.map((sep) => [sep.label, sep.chapterId]))
+    );
+  } else {
+    check(false, "a separator was there to drag", "none found");
+  }
 
   /* ── a dialog does not close because a selection ended outside it ──
    * Select a word in the field, drag a little past the edge, let go: the click
@@ -293,7 +401,7 @@ try {
    * dialog used to take that for "clicked beside me" and vanish mid-edit. */
   await p.locator("[data-chapter-row]").first().click({ button: "right", force: true });
   await p.waitForTimeout(600);
-  await p.getByText("Rename or recolour", { exact: true }).click();
+  await p.getByText("Edit", { exact: true }).click();
   await p.waitForTimeout(700);
   const field = p.getByLabel("Chapter name");
   const box = await field.boundingBox();
@@ -303,7 +411,7 @@ try {
   await p.mouse.up();
   await p.waitForTimeout(800);
   check(
-    (await p.locator("[data-name-dialog]").count()) === 1,
+    (await p.locator("[data-chapter-dialog]").count()) === 1,
     "a selection dragged past the edge does not close the dialog"
   );
   await p.keyboard.press("Escape");
@@ -316,13 +424,15 @@ try {
   await p.locator("[data-chapter-row]").first().click({ button: "right", force: true });
   await p.waitForTimeout(600);
   check(
-    (await p.locator("[data-submenu-toggle]").filter({ hasText: "Colour" }).count()) === 0,
-    "there is one entry for a chapter's name and colour, not two"
+    (await p.locator("[data-submenu-toggle]").count()) === 0 &&
+      (await p.getByText("Edit", { exact: true }).count()) === 1,
+    "its menu offers one Edit rather than one entry per property"
   );
-  await p.getByText("Rename or recolour", { exact: true }).click();
+  await p.getByText("Edit", { exact: true }).click();
   await p.waitForTimeout(700);
+  check((await p.locator("[data-chapter-preview]").count()) === 1, "and the dialog draws the row as it will be");
   await p.locator('[data-colour-option="#2da44e"]').click();
-  await p.getByRole("button", { name: "Save", exact: true }).click();
+  await p.locator("[data-chapter-save]").click();
   await p.waitForTimeout(2000);
   const coloured = (await api(p, "GET", "/chapters")).body;
   check(
@@ -337,14 +447,16 @@ try {
    * both places. */
   await p.locator("[data-chapter-row]").first().click({ button: "right", force: true });
   await p.waitForTimeout(600);
-  await p.getByText("Icon", { exact: true }).click();
+  await p.getByText("Edit", { exact: true }).click();
   await p.waitForTimeout(700);
   await p.getByLabel("Search icons").fill("invoice");
   await p.waitForTimeout(400);
+  // One extra: "no icon" sits in the grid, because taking a mark off is the
+  // same kind of choice as putting one on.
   const offered = await p.locator("[data-icon-option]").count();
-  check(offered > 0 && offered < 20, "icons are searched by what they are for", `${offered} shown`);
-  await p.locator("[data-icon-option]").first().click();
-  await p.locator("[data-icon-save]").click();
+  check(offered > 1 && offered < 20, "icons are searched by what they are for", `${offered} shown`);
+  await p.locator("[data-icon-option]").nth(1).click();
+  await p.locator("[data-chapter-save]").click();
   await p.waitForTimeout(2200);
   const marked = (await api(p, "GET", "/chapters")).body.find((c) => c.icon);
   check(!!marked?.icon, "a chapter keeps the mark it was given", JSON.stringify([marked?.name, marked?.icon]));

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(