Marks, lines, and a table that breaks

A long table lay straight across the gap between two sheets with a row
cut in half, and a shorter one jumped to the next sheet whole leaving
the rest of the first blank. Tables are broken between their rows now,
which is where a table breaks on paper. The spacer there is a tr with
one borderless cell: a div inside a tbody is not something the browser
keeps. Its own spacer rows are subtracted again on the next measurement
and counted into the shift every block below inherits — miss that and
everything under a broken table is measured a page too high.

A dialog closed in the middle of an edit if a selection was dragged past
its edge: the click lands on the nearest common ancestor of press and
release, which is the backdrop, and every dialog read that as "clicked
beside me". They remember where the press began now. All ten.

A note and a chapter can wear a mark of their own beside the name,
chosen from a short list searched by what a thing is for rather than
from the system emoji keyboard — a different thing on every machine, and
three thousand pictures for a decision that is "which of these is the
invoice notebook". A separator takes its own colour and one of five
shapes, and a chapter can be divided like the notebook it sits in: both
places a chapter is shown draw it with one component now, so it cannot
be divisible in the column and not in the unfolded block.

Also: a chapter's colour could not be cleared, because the update rode
on COALESCE and null there means "leave it alone". A table's header row
is legible on the dark theme. Three entries in the table's own menu were
still German. Opening a notebook opens its first note, on a wide screen
only — on a phone the list is the screen.

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

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

e2e/chapters.mjs

@@ -254,6 +254,61 @@ 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;
+  };
+  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);
+  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())
+  );
+  const drawnIn = JSON.parse(
+    (await api(p, "GET", "/notebooks")).body.find((b) => b.name === "Haus")?.separators || "[]"
+  );
+  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]))
+  );
+  await p.locator("[data-chapter-row]").first().click();
+  await p.waitForTimeout(1000);
+
+  /* ── 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
+   * lands on the backdrop — the nearest ancestor of press and release — and the
+   * 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.waitForTimeout(700);
+  const field = p.getByLabel("Chapter name");
+  const box = await field.boundingBox();
+  await p.mouse.move(box.x + box.width - 12, box.y + box.height / 2);
+  await p.mouse.down();
+  await p.mouse.move(box.x - 220, box.y + box.height / 2, { steps: 12 });
+  await p.mouse.up();
+  await p.waitForTimeout(800);
+  check(
+    (await p.locator("[data-name-dialog]").count()) === 1,
+    "a selection dragged past the edge does not close the dialog"
+  );
+  await p.keyboard.press("Escape");
+  await p.waitForTimeout(600);
+
   /* ── its own colour, afterwards ──
    * The same dialog that named it. There used to be a "Colour" submenu beside
    * this entry as well: two things in the menu, one of them offering half of
@@ -276,6 +331,53 @@ try {
     JSON.stringify(coloured.map((c) => [c.name, c.color]))
   );
 
+  /* ── a mark of its own ──
+   * A row found by its shape rather than by reading every title. The same glyph
+   * shows in the list and in the editor, so a note is recognised by one sign in
+   * 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.waitForTimeout(700);
+  await p.getByLabel("Search icons").fill("invoice");
+  await p.waitForTimeout(400);
+  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();
+  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]));
+  check(
+    (await p.locator("[data-chapter-mark]").first().innerText()).trim() === marked.icon,
+    "and wears it in the list"
+  );
+
+  /* The same for a note, from the button left of its title. */
+  await p.locator("[data-note-row]").first().click();
+  await p.waitForTimeout(1200);
+  await p.locator("[data-note-icon]").click();
+  await p.waitForTimeout(700);
+  await p.getByLabel("Search icons").fill("house");
+  await p.waitForTimeout(400);
+  await p.locator("[data-icon-option]").first().click();
+  await p.locator('[data-icon-colour="#2da44e"]').click();
+  await p.locator("[data-icon-save]").click();
+  await p.waitForTimeout(2500);
+  const iconed = (await api(p, "GET", "/notes")).body.find((n) => n.icon);
+  check(!!iconed?.icon && iconed?.icon_color === "#2da44e", "a note keeps its mark and its colour", JSON.stringify([iconed?.title, iconed?.icon, iconed?.icon_color]));
+
+  /* It survives the trip to the server and back — the mark is on the note, not
+     in this browser. */
+  await p.reload();
+  await p.waitForTimeout(4000);
+  await openNotebook();
+  check(
+    (await p.locator("[data-note-icon]").getAttribute("data-note-icon")) === iconed.icon ||
+      (await p.locator("[data-note-mark]").first().innerText()).trim() === iconed.icon,
+    "and still wears it after a reload"
+  );
+
   /* ── a chapter is not a wastebasket ──
    * Removing one must never remove what it held: the notes come back to the
    * notebook, where they can be seen and filed again. */

e2e/organise.mjs

@@ -265,6 +265,40 @@ 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 ──
+   * 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(
+    seps[0]?.color === "#1f9c96" && seps[0]?.style === "dashed",
+    "a separator keeps its own colour and line style, on the server",
+    JSON.stringify(seps)
+  );
+  // Drawn, not just stored: the rule is a dashed border rather than a filled bar.
+  const drawn = await p.locator("[data-separator-rule]").first().evaluate((el) => {
+    const cs = getComputedStyle(el);
+    return { style: cs.borderTopStyle, colour: cs.borderTopColor };
+  });
+  check(
+    drawn.style === "dashed" && /31,\s*156,\s*150/.test(drawn.colour),
+    "and it is drawn that way, not only recorded",
+    JSON.stringify(drawn)
+  );
+
   /* Removing is a right-click behind a confirmation. The × used to sit a few
      pixels from the label you click to rename, so tidying the list and
      destroying part of it were neighbouring gestures. */

e2e/run.sh

@@ -13,7 +13,7 @@ cd "$(dirname "$0")"
 IMAGE="mcr.microsoft.com/playwright:v1.49.0-noble"
 URL="${INKNOTE_URL:-http://localhost:3000}"
 SUITES=("$@")
-[ ${#SUITES[@]} -eq 0 ] && SUITES=(admin editor search-attachments history drawing export conflict pdf attachments-lifecycle organise chapters offline sync)
+[ ${#SUITES[@]} -eq 0 ] && SUITES=(admin editor search-attachments history drawing export conflict pdf attachments-lifecycle organise chapters tables offline sync)
 
 mkdir -p shots
 if [ ! -d node_modules ]; then

e2e/tables.mjs

@@ -0,0 +1,130 @@
+/* Tables, and what happens to one at the edge of a sheet.
+ *
+ * The writing surface is drawn as separate sheets with a gap between them. Text
+ * is pushed past that gap a block at a time, which is right for a paragraph and
+ * wrong for a table: moved whole, a table either jumps to the next sheet leaving
+ * the rest of this one blank, or — being longer than a sheet — has nowhere to
+ * jump to and lies straight across the gap with a row cut in half.
+ *
+ * So the claim under test is that a long table is broken *between its rows*, and
+ * that no row is left straddling a gap.
+ */
+import { OUT, check, createNote, createNotebook, launch, report, setTitle, withFreshUser } from "./lib.mjs";
+
+/** Where each sheet sits, and therefore where the gaps are. */
+const sheetBands = (page) =>
+  page.evaluate(() =>
+    [...document.querySelectorAll("[data-page-sheet]")].map((el) => {
+      const r = el.getBoundingClientRect();
+      return { top: r.top, bottom: r.bottom };
+    })
+  );
+
+/** Every table row on screen, with the band it occupies. */
+const rowBands = (page) =>
+  page.evaluate(() =>
+    [...document.querySelectorAll(".ProseMirror table tr:not(.ne-page-spacer-row)")].map((el) => {
+      const r = el.getBoundingClientRect();
+      return { top: r.top, bottom: r.bottom, text: el.textContent.trim().slice(0, 12) };
+    })
+  );
+
+const browser = await launch();
+let session;
+try {
+  session = await withFreshUser(browser, "tables");
+  const p = session.page;
+
+  await createNotebook(p, "Tabellen");
+  await p.locator("button").filter({ hasText: "Tabellen" }).first().click();
+  await p.waitForTimeout(700);
+  await createNote(p);
+  await setTitle(p, "Lange Tabelle");
+
+  /* Enough text to push the table down the sheet, then a table long enough to
+     run past the bottom of it — the two cases that used to go wrong. */
+  await p.locator(".ProseMirror").click();
+  for (let i = 0; i < 12; i++) {
+    await p.keyboard.type(`Zeile ${i} vor der Tabelle. `);
+    await p.keyboard.press("Enter");
+  }
+  await p.waitForTimeout(500);
+
+  await p.locator("[data-table-menu] button").first().click();
+  await p.waitForTimeout(400);
+  await p.getByText("Insert 3 × 3 table", { exact: true }).click();
+  await p.waitForTimeout(1200);
+  check((await p.locator(".ProseMirror table").count()) === 1, "a table can be inserted");
+
+  /* Rows are added from the menu on the table itself, which is also the thing
+     Marc uses — and the labels there are English like the rest of the app. */
+  await p.locator(".ProseMirror table td").first().click();
+  await p.waitForTimeout(300);
+  for (let i = 0; i < 26; i++) {
+    await p.keyboard.type(`R${i}`);
+    await p.locator(".ProseMirror table").click({ button: "right" });
+    await p.waitForTimeout(220);
+    await p.getByText("Insert row below", { exact: true }).click();
+    await p.waitForTimeout(220);
+  }
+  await p.waitForTimeout(2500);
+
+  check(
+    (await p.locator("[data-submenu-toggle], [role=menu]").count()) >= 0 &&
+      !/Kopfzeile|Zellen verbinden|Zelle teilen/.test(await p.locator("body").innerText()),
+    "the table's own menu speaks the same language as the rest of the app"
+  );
+
+  const bands = await sheetBands(p);
+  check(bands.length >= 2, "the table runs past the first sheet", `${bands.length} sheets`);
+
+  const spacers = await p.locator("tr.ne-page-spacer-row").count();
+  check(spacers >= 1, "the table is broken between its rows rather than moved whole", String(spacers));
+
+  /* The point of it all: nothing is left lying across a gap. A row may end
+     exactly on a sheet's edge — that is not a straddle — so a pixel of slack. */
+  const rows = await rowBands(p);
+  const gaps = bands.slice(0, -1).map((b, i) => ({ from: b.bottom, to: bands[i + 1].top }));
+  const straddling = rows.filter((r) => gaps.some((g) => r.bottom > g.from + 1 && r.top < g.to - 1));
+  check(
+    straddling.length === 0,
+    "and no row is left lying across the gap between two sheets",
+    straddling.map((r) => r.text).join(", ")
+  );
+
+  await p.screenshot({ path: `${OUT}/tables-split.png`, fullPage: true });
+
+  /* The header has to be legible on the dark theme, where the fill it had was a
+     difference you could only find by looking for it. */
+  // The table was inserted with a header row, so there is one to measure — the
+  // menu entry toggles it *off*, which would leave nothing to look at.
+  const header = await p.locator(".ProseMirror table th").first().evaluate((el) => {
+    const cs = getComputedStyle(el);
+    const cell = getComputedStyle(el.closest("table").querySelector("td") || el);
+    return { head: cs.backgroundColor, body: cell.backgroundColor, rule: cs.borderBottomWidth };
+  });
+  check(
+    header.head !== header.body && parseFloat(header.rule) >= 2,
+    "a header row is filled differently from the body and underlined",
+    JSON.stringify(header)
+  );
+
+  /* Written, nothing is lost: the spacers are decorations, so the body the
+     server keeps has the table and no page furniture in it. */
+  await p.waitForTimeout(2000);
+  const body = await p.evaluate(async () => {
+    const auth = { Authorization: "Bearer " + localStorage.getItem("inknote_token") };
+    const notes = await (await fetch("/api/notes", { headers: auth })).json();
+    const mine = notes.find((n) => n.title === "Lange Tabelle");
+    return (await (await fetch(`/api/notes/${mine.id}`, { headers: auth })).json()).content;
+  });
+  check(!/ne-page-spacer/.test(body || ""), "and no page furniture reaches the stored note");
+  check(/table/.test(body || ""), "which does hold the table itself", String(body || "").slice(0, 60));
+} catch (e) {
+  check(false, "suite ran to the end", e.message);
+} finally {
+  await session?.cleanup();
+  const code = report();
+  await browser.close();
+  process.exit(code);
+}