A chapter is a list too, and deleting stops moving things

Deleting a note moved everything else. A row leaving is the same problem as
a row arriving, in reverse: a line's position counts the rows above it, so a
note deleted above a line left the line counting rows that were no longer
there, and everything under it appeared to jump up past it. withoutRow
renumbers the list a row leaves, and every place one leaves says so -- the
bin, a move, a chapter being removed. Arrivals land at the top: an old
position belongs to an arrangement that has moved on.

A line could not be dragged under another line. Two lines in the same gap
carry the same position, and the comparator claimed "a separator comes
first" without asking what the other one was -- both directions at once for
that case. A comparator that contradicts itself has no defined result, so
the sort returned them in whichever order it happened to walk.

A chapter is always in the user's own order and can be arranged like any
other list: its notes wear handles under the same switch as the list beside
them and are dragged among themselves, strips at both ends included. The two
lists keep apart by scope -- a chapter unfolded under its row holds rows
inside a row of the notebook's list, so the nearest row above the pointer
cannot say which list a drag belongs to. The sort menu is gone inside a
chapter: the mode belongs to the notebook, and a menu there would offer a
choice that cannot be honoured.

The chapters suite no longer assumes the first chapter row is the one that
matters. A chapter is a row in the arrangement and can be anywhere in it.

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

frontend/src/hooks/useReorderDrag.ts

@@ -38,6 +38,7 @@ export interface ReorderDrag {
     into?: boolean
   ) => {
     "data-reorder-id": string;
+    "data-reorder-scope": string;
     "data-reorder-into"?: string;
     onPointerDown: (e: React.PointerEvent) => void;
   };
@@ -45,10 +46,19 @@ export interface ReorderDrag {
   gripProps: { "data-reorder-grip": string };
 }
 
+/**
+ * `scope` names the list these rows belong to, and is what keeps two lists on
+ * the same screen out of each other's way: a chapter unfolded under its row
+ * holds rows *inside* a row of the notebook's list, so "the nearest row above
+ * the pointer" is not enough to say which list is being dragged in. Rows are
+ * looked up by scope, and a note carried in the notebook simply finds no target
+ * over the notes inside a chapter.
+ */
 export function useReorderDrag(
   enabled: boolean,
   reorder: (dragId: string, targetId: string) => void,
-  fileInto?: (dragId: string, targetId: string) => void
+  fileInto?: (dragId: string, targetId: string) => void,
+  scope = ""
 ): ReorderDrag {
   const [overId, setOverId] = useState<string | null>(null);
   const [intoId, setIntoId] = useState<string | null>(null);
@@ -73,6 +83,12 @@ export function useReorderDrag(
   const onPointerDown = useCallback(
     (id: string) => (e: React.PointerEvent) => {
       if (!enabled || e.button > 0) return;
+      /* Only presses that belong to this list. A chapter's rows sit inside a row
+         of the notebook's list, so its events travel up through one — and a grip
+         pressed in the chapter would otherwise pick up the chapter's whole row
+         as well. The nearest scoped row decides whose press it is. */
+      const own = (e.target as HTMLElement)?.closest?.("[data-reorder-scope]") as HTMLElement | null;
+      if (own && own.dataset.reorderScope !== scope) return;
       const fromGrip = !!(e.target as HTMLElement)?.closest?.("[data-reorder-grip]");
       // A finger on the row itself is a scroll or a long press, not a drag.
       if (e.pointerType !== "mouse" && !fromGrip) return;
@@ -84,7 +100,7 @@ export function useReorderDrag(
         e.preventDefault();
       }
     },
-    [enabled]
+    [enabled, scope]
   );
 
   useEffect(() => {
@@ -103,7 +119,7 @@ export function useReorderDrag(
       // tracked with enter/leave handlers, because a finger generates no
       // pointerover on anything it did not press.
       const el = document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null;
-      const row = el?.closest?.("[data-reorder-id]") as HTMLElement | null;
+      const row = el?.closest?.(`[data-reorder-scope="${scope}"]`) as HTMLElement | null;
       const target = row?.dataset.reorderId ?? null;
       const next = target && target !== d.id ? target : null;
       /* A chapter is both a place and a neighbour, so which one it is depends on
@@ -156,7 +172,7 @@ export function useReorderDrag(
       window.removeEventListener("pointerup", up);
       window.removeEventListener("pointercancel", stop);
     };
-  }, [enabled, reorder, fileInto, stop]);
+  }, [enabled, reorder, fileInto, scope, stop]);
 
   // A drag that outlives its list would leave the page unselectable.
   useEffect(
@@ -172,6 +188,7 @@ export function useReorderDrag(
     draggingId,
     rowProps: (id: string, into = false) => ({
       "data-reorder-id": id,
+      "data-reorder-scope": scope,
       ...(into ? { "data-reorder-into": "" } : {}),
       onPointerDown: onPointerDown(id),
     }),