A notebook opens in its own order

The hand-made order is where a notebook's own arrangement lives:
separators show, rows can be put where they belong, nothing slides about
by itself. Starting in "last changed" made both of those look broken
until the sort menu was found — pressing "+ Separator" there drew a line
the order cannot display, so the button appeared dead. A notebook nobody
has arranged still reads newest-first, because untouched rows all carry
position 0, so nothing is lost by starting there. The views keep "last
changed": they are questions asked of every notebook at once and have
nowhere to keep an arrangement. The button that draws a line is now only
offered in the order that can show one.

Removing a chapter left you stuck in the confirmation. Every destructive
action goes through one helper that takes the question down again; this
one set the dialog directly and bypassed it, so the chapter was removed
and the prompt stayed over the app. Closing now happens where the dialog
is rendered, so it happens whoever asked and however they asked.

The suites did not catch that, and the reason is worth keeping: they
read the list straight through the overlay, which is in the DOM the
whole time, and passed while the screen was in fact stuck. Both now
assert the question is gone afterwards.

The separator is no wider than its name. It sat in a fixed 132px slot —
chosen so the row would not jump when renaming began — with a short name
floating in a gap it did not fill.

Thirteen suites green: 345 browser checks, 241 unit tests.

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

frontend/src/App.jsx

@@ -25,6 +25,7 @@ import { Sidebar } from "./ui/Sidebar.jsx";
 import { Dashboard } from "./features/notebooks/Dashboard.jsx";
 import { NoteList } from "./features/notes/NoteList.jsx";
 import {
+  DEFAULT_NOTEBOOK_SORT,
   DEFAULT_SORT,
   canReorder,
   sortModesFor,
@@ -95,8 +96,9 @@ export default function App() {
   const [renamingSeparator, setRenamingSeparator] = useState(null);
   const [historyFor, setHistoryFor] = useState(null);
   const [ctxMenu, setCtxMenu] = useState(null);
-  // { title, value, onSave } while a chapter is being named or renamed.
-  const [namingChapter, setNamingChapter] = useState(null);
+  /* The one dialog that asks for a name — a chapter's, with its colour, or a
+     separator's. Held here because both are started from menus that live here. */
+  const [naming, setNaming] = useState(null);
   const [confirmDialog, setConfirmDialog] = useState(null);
   // Bumped on a version restore to force a fresh editor on the restored body.
   const [restoreEpoch, setRestoreEpoch] = useState(0);
@@ -246,7 +248,7 @@ export default function App() {
   /* A real notebook remembers its order on the server; a view keeps one for the
      session. Either way the note list is told a single mode. */
   const rawSortMode = activeNotebook
-    ? activeNotebook.sortMode || DEFAULT_SORT
+    ? activeNotebook.sortMode || DEFAULT_NOTEBOOK_SORT
     : virtualSort[activeFolder] || DEFAULT_SORT;
   // A view has nowhere to keep a hand-made arrangement, so it cannot be in one —
   // even if an older version of the app left "manual" behind on a notebook that
@@ -278,6 +280,9 @@ export default function App() {
   const writeVisible = (visible) =>
     writeSeparators([...allSeparators.filter((s) => (s.chapterId ?? null) !== listChapter), ...visible]);
 
+  /* One press draws the line; it is named afterwards from its own menu, like it
+     is renamed. A dialog in front of it asked a question about something that
+     reads perfectly well unnamed. */
   const addSeparator = () =>
     writeVisible(withNewSeparator(separators, `sep-${Date.now().toString(36)}`, "", listChapter));
   const renameSeparator = (id, label) =>
@@ -496,15 +501,16 @@ export default function App() {
       openNote(note.id);
     });
 
-  /** Runs a destructive action behind a confirmation prompt. */
-  const confirm = (dialog) =>
-    setConfirmDialog({
-      ...dialog,
-      onConfirm: async () => {
-        await dialog.onConfirm();
-        setConfirmDialog(null);
-      },
-    });
+  /**
+   * Runs a destructive action behind a confirmation prompt.
+   *
+   * Only sets the question. Closing it again is done where the dialog is
+   * rendered, so it happens whoever asked and however they asked: this used to
+   * be wrapped here instead, and the one caller that set the dialog directly —
+   * removing a chapter — did its work and then left the prompt standing over
+   * the app with nothing but a reload to get out of.
+   */
+  const confirm = (dialog) => setConfirmDialog(dialog);
 
   const trashNote = (id) =>
     confirm({
@@ -645,9 +651,11 @@ export default function App() {
      rather than a second visit through the right-click menu. */
   const addChapter = () => {
     if (!activeNotebook) return;
-    setNamingChapter({
+    setNaming({
       title: "New chapter",
+      label: "Chapter name",
       value: "",
+      colors: CHAPTER_COLORS,
       color: null,
       onSave: (name, color) => data.createChapter(activeNotebook.id, name, color),
     });
@@ -660,45 +668,42 @@ export default function App() {
       x: e.clientX,
       y: e.clientY,
       items: [
+        /* One entry, not two. The name and the colour are asked for together
+           when a chapter is made, so changing them is the same dialog again —
+           a second "Colour" submenu beside it offered half of what this does
+           and read as a different thing. */
         {
           label: "Rename or recolour",
           icon: I.edit,
           action: () =>
-            setNamingChapter({
+            setNaming({
               title: "Chapter",
+              label: "Chapter name",
               value: chapter.name,
+              colors: CHAPTER_COLORS,
               color: chapter.color ?? null,
               onSave: (name, color) => data.editChapter(chapter.id, { name, color }),
             }),
         },
-        {
-          label: "Colour",
-          icon: I.edit,
-          submenu: [
-            { label: "None", colorDot: T.faint, action: () => data.editChapter(chapter.id, { color: null }) },
-            ...CHAPTER_COLORS.map((c) => ({
-              label: c.label,
-              colorDot: c.value,
-              action: () => data.editChapter(chapter.id, { color: c.value }),
-            })),
-          ],
-        },
         { divider: true },
         {
           label: "Remove chapter",
           icon: I.trash,
           danger: true,
           action: () =>
-            setConfirmDialog({
+            confirm({
               title: "Remove chapter?",
               message: `"${chapter.name}" is removed. Its ${chapter.noteCount} note${
                 chapter.noteCount === 1 ? "" : "s"
               } stay — they go back to the notebook.`,
               confirmLabel: "Remove",
               danger: true,
-              onConfirm: () => {
-                if (activeChapter === chapter.id) setActiveChapter(null);
-                void data.deleteChapter(chapter.id);
+              onConfirm: async () => {
+                if (activeChapter === chapter.id) {
+                  setActiveChapter(null);
+                  setInChapter(false);
+                }
+                await data.deleteChapter(chapter.id);
               },
             }),
         },
@@ -1170,16 +1175,16 @@ export default function App() {
           )}
         />
       )}
-      {namingChapter && (
+      {naming && (
         <NameDialog
-          title={namingChapter.title}
-          value={namingChapter.value}
-          label="Chapter name"
-          colors={CHAPTER_COLORS}
-          color={namingChapter.color}
-          confirmLabel={namingChapter.value ? "Save" : "Create"}
-          onSave={namingChapter.onSave}
-          onClose={() => setNamingChapter(null)}
+          title={naming.title}
+          value={naming.value}
+          label={naming.label ?? "Chapter name"}
+          colors={naming.colors}
+          color={naming.color}
+          confirmLabel={naming.confirmLabel ?? (naming.value ? "Save" : "Create")}
+          onSave={naming.onSave}
+          onClose={() => setNaming(null)}
           dark={dark}
         />
       )}
@@ -1188,7 +1193,13 @@ export default function App() {
           title={confirmDialog.title}
           message={confirmDialog.message}
           confirmLabel={confirmDialog.confirmLabel}
-          onConfirm={confirmDialog.onConfirm}
+          /* The one place the question is taken down, whatever it asked and
+             whoever set it. Leaving that to each caller left one of them
+             holding the screen hostage after doing its work. */
+          onConfirm={async () => {
+            await confirmDialog.onConfirm?.();
+            setConfirmDialog(null);
+          }}
           onCancel={() => setConfirmDialog(null)}
           dark={dark}
         />