A chapter you can see, in the colour you chose

A chapter did not show until the notebook had a note in it. "Nothing
here" was asked of the notes alone, so a notebook whose only contents
were chapters showed the empty-list panel with the chapters hidden
behind it — making a chapter in a fresh notebook appeared to do nothing
at all. It is asked of every row now, and a notebook with chapters but
no loose notes says so in one line rather than looking like a list that
failed to load.

The colour is chosen while the chapter is being made, in the dialog that
asks for its name. 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 one decision. Renaming and recolouring afterwards are one entry in
its menu and one write; the server already took the colour on create,
the client simply never sent it.

The word "here" is gone. The line along the top of the pane says which
of the two places you are in, and saying it twice was noise.

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

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

frontend/src/App.jsx

@@ -640,9 +640,17 @@ export default function App() {
     setInChapter(!!next);
   };
 
+  /* Named and coloured in one go. The colour is what tells one chapter from the
+     next, so asking for it while the chapter is being made is one decision
+     rather than a second visit through the right-click menu. */
   const addChapter = () => {
     if (!activeNotebook) return;
-    setNamingChapter({ title: "New chapter", value: "", onSave: (name) => data.createChapter(activeNotebook.id, name) });
+    setNamingChapter({
+      title: "New chapter",
+      value: "",
+      color: null,
+      onSave: (name, color) => data.createChapter(activeNotebook.id, name, color),
+    });
   };
 
   const chapterContextMenu = (e, chapter) => {
@@ -653,24 +661,25 @@ export default function App() {
       y: e.clientY,
       items: [
         {
-          label: "Rename",
+          label: "Rename or recolour",
           icon: I.edit,
           action: () =>
             setNamingChapter({
-              title: "Rename chapter",
+              title: "Chapter",
               value: chapter.name,
-              onSave: (name) => data.renameChapter(chapter.id, name),
+              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.recolourChapter(chapter.id, null) },
+            { label: "None", colorDot: T.faint, action: () => data.editChapter(chapter.id, { color: null }) },
             ...CHAPTER_COLORS.map((c) => ({
               label: c.label,
               colorDot: c.value,
-              action: () => data.recolourChapter(chapter.id, c.value),
+              action: () => data.editChapter(chapter.id, { color: c.value }),
             })),
           ],
         },
@@ -769,11 +778,6 @@ export default function App() {
         paddingLeft: 8,
       }}
     >
-      {inChapter && (
-        <div style={{ fontSize: 10, color: T.accent, fontWeight: 700, padding: "2px 10px 4px" }}>
-          · new notes land here
-        </div>
-      )}
       {chapterNotes.length === 0 && (
         <div style={{ padding: "8px 10px", fontSize: 12, color: T.muted }}>Nothing in here yet.</div>
       )}
@@ -984,9 +988,6 @@ export default function App() {
                 >
                   {openChapter.name}
                 </span>
-                {inChapter && (
-                  <span style={{ fontSize: 10, color: T.accent, fontWeight: 700, flexShrink: 0 }}>· here</span>
-                )}
                 <button
                   onClick={() => {
                     setActiveChapter(null);
@@ -1174,7 +1175,9 @@ export default function App() {
           title={namingChapter.title}
           value={namingChapter.value}
           label="Chapter name"
-          confirmLabel={namingChapter.value ? "Rename" : "Create"}
+          colors={CHAPTER_COLORS}
+          color={namingChapter.color}
+          confirmLabel={namingChapter.value ? "Save" : "Create"}
           onSave={namingChapter.onSave}
           onClose={() => setNamingChapter(null)}
           dark={dark}