A chapter with an order of its own

A chapter orders its own notes now, chosen in the same dialog as its name,
mark and colour -- one decision about one thing. The notebook's setting
governs the notebook's own list; a chapter is a place someone made and
filled, so a reference chapter can stay alphabetical while the notebook
around it stays as it was arranged. It starts hand-made, and a chapter put
in one of the other orders loses its lines and its handles exactly as the
notebook does: neither means anything against an order the app is choosing.

A line still would not go under another line, and the comparator was only
half of it. The write was then thrown away by the "did anything change?"
test, which sorted the separators before comparing them -- to ignore the
other chapters' lines riding along in the same field -- and a sorted
comparison cannot see a sequence. Two lines in one gap carry the same
position, so swapping them changes nothing else. It compares this list's own
lines, in order.

An open chapter swelled while rearranging: the strips at the two ends of its
list stood open for the whole of the mode, adding half a finger of empty
space inside every chapter. They are thin now, and only there while
something is actually being carried -- which is also why the suite presses
first and aims afterwards.

Server: sort_mode on chapters, validated against the same five modes as a
notebook's, and set outside the COALESCE so null means the hand-made order
rather than "leave it alone".

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

frontend/src/hooks/useNoteData.ts

@@ -13,6 +13,7 @@ import type {
   NoteMeta,
   Notebook,
   Separator,
+  SortMode,
   StrokeDoc,
   User,
 } from "../types";
@@ -68,10 +69,14 @@ export interface NoteData {
     notebookId: string,
     name: string,
     color?: string | null,
-    icon?: string | null
+    icon?: string | null,
+    sortMode?: SortMode | null
   ) => Promise<Chapter>;
-  /** Name, colour, or both — one write for one decision. */
-  editChapter: (id: string, updates: { name?: string; color?: string | null }) => Promise<void>;
+  /** Everything a chapter is, in one write — it is decided in one dialog. */
+  editChapter: (
+    id: string,
+    updates: { name?: string; color?: string | null; icon?: string | null; sortMode?: SortMode | null }
+  ) => Promise<void>;
   deleteChapter: (id: string) => Promise<void>;
   deleteNotebook: (id: string) => Promise<void>;
   reorderNotebooks: (dragId: string, targetId: string) => void;
@@ -283,7 +288,6 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
     const all = notebook.separators || [];
     return {
       notes,
-      all,
       mine: all.filter((sep) => (sep.chapterId ?? null) === chapterId),
       others: all.filter((sep) => (sep.chapterId ?? null) !== chapterId),
       /* Chapters are rows in this list too, and only in the notebook itself — a
@@ -297,7 +301,8 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
     (
       notebookId: string,
       chapterId: string | null,
-      all: Separator[],
+      /** This list's own lines as they were, for telling whether anything moved. */
+      mine: Separator[],
       others: Separator[],
       next: Arrangement
     ) => {
@@ -320,15 +325,15 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
        * that share an `updatedAt` second — so "last changed" quietly came out in
        * a different order after every drag.
        *
-       * Compared as a set rather than as an array, because the merge above puts
-       * the other chapters' separators first and that says nothing about whether
-       * anything changed. */
+       * Compared **in order**, and only this list's own lines. Sorting the
+       * comparison was how a line refused to go under another one: two lines in
+       * the same gap carry the same position, so swapping them changes nothing
+       * but their sequence — and a sorted comparison cannot see a sequence. The
+       * move was computed correctly, drawn correctly for a frame, and then
+       * thrown away as "no change". */
       const fingerprint = (seps: Separator[]) =>
-        seps
-          .map((sep) => `${sep.id}|${sep.label}|${sep.order}|${sep.chapterId ?? ""}`)
-          .sort()
-          .join("\n");
-      if (fingerprint(merged) !== fingerprint(all)) {
+        seps.map((sep) => `${sep.id}|${sep.label}|${sep.order}|${sep.color ?? ""}|${sep.style ?? ""}`).join("\n");
+      if (fingerprint(next.separators) !== fingerprint(mine)) {
         setNotebooks((p) => p.map((nb) => (nb.id === notebookId ? { ...nb, separators: merged } : nb)));
         void sync.updateNotebook(notebookId, { separators: merged });
       }
@@ -348,7 +353,7 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
       if (!list) return;
       const next = reindexEntries(list.notes, list.mine, dragId, targetId, list.chapters);
       if (!next) return;
-      applyArrangement(notebookId, chapterId, list.all, list.others, next);
+      applyArrangement(notebookId, chapterId, list.mine, list.others, next);
     },
     [applyArrangement, listOf]
   );
@@ -372,7 +377,7 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
       if (!list) return;
       const next = placeOnTop(list.notes, list.mine, list.chapters, note.id);
       if (!next) return;
-      applyArrangement(note.folderId, chapterId, list.all, list.others, next);
+      applyArrangement(note.folderId, chapterId, list.mine, list.others, next);
     },
     [applyArrangement, listOf]
   );
@@ -394,7 +399,7 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
       if (!list) return;
       const next = withoutRow(list.notes, list.mine, list.chapters, note.id);
       if (!next) return;
-      applyArrangement(note.folderId, chapterId, list.all, list.others, next);
+      applyArrangement(note.folderId, chapterId, list.mine, list.others, next);
     },
     [applyArrangement, listOf]
   );
@@ -479,8 +484,14 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
    */
 
   const createChapter = useCallback(
-    async (notebookId: string, name: string, color: string | null = null, icon: string | null = null) => {
-      const chapter = await sync.createChapter(notebookId, name, color, icon);
+    async (
+      notebookId: string,
+      name: string,
+      color: string | null = null,
+      icon: string | null = null,
+      sortMode: SortMode | null = null
+    ) => {
+      const chapter = await sync.createChapter(notebookId, name, color, icon, sortMode);
       setChapters((p) => [...p, chapter]);
       return chapter;
     },
@@ -492,7 +503,7 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
    * They used to be two calls because they came from two places — a dialog and
    * a submenu — and renaming a chapter while recolouring it then meant two
    * requests for one decision. */
-  const editChapter = useCallback(async (id: string, updates: { name?: string; color?: string | null }) => {
+  const editChapter = useCallback(async (id: string, updates: Parameters<NoteData["editChapter"]>[1]) => {
     setChapters((p) => p.map((c) => (c.id === id ? { ...c, ...updates } : c)));
     await sync.updateChapter(id, updates);
   }, []);
@@ -528,7 +539,7 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
           )
         : // An empty one only leaves a gap to close.
           withoutRow(list.notes, list.mine, list.chapters, id);
-      if (next) applyArrangement(notebookId, null, list.all, list.others, next);
+      if (next) applyArrangement(notebookId, null, list.mine, list.others, next);
     },
     [applyArrangement, listOf]
   );