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/features/notes/NoteList.jsx

@@ -70,8 +70,11 @@ const Grip = ({ T, ...rest }) => (
   </div>
 );
 
-/** Width the separator's label keeps in both states, so renaming moves nothing. */
-const MIDDLE_W = 132;
+/** Narrowest the label's box gets, so an unnamed line still has something to hit. */
+const MIDDLE_MIN = 54;
+
+/** Widest, so a long name cannot squeeze the rules away to nothing. */
+const MIDDLE_MAX = 170;
 
 /**
  * A line drawn between notes, with an optional name.
@@ -103,10 +106,11 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
       style={{
         display: "flex",
         alignItems: "center",
-        gap: 8,
-        /* Room above it, so it reads as the end of what came before rather than
-           as decoration attached to the next note. */
-        padding: "14px 8px 8px",
+        gap: 7,
+        /* A little room above, so it reads as the end of what came before rather
+           than as decoration attached to the next note — but only a little: it
+           is a line between two rows, not a heading of its own. */
+        padding: "9px 8px 5px",
         cursor: grip ? "grab" : "default",
       }}
     >
@@ -116,7 +120,17 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
           its contents made the whole row jump sideways the moment renaming
           started, which is exactly when the eye is on it. */}
       <div style={{ height: 2, borderRadius: 2, background: T.faint, flex: 1, minWidth: 8 }} />
-      <div style={{ flex: "0 0 auto", width: MIDDLE_W, display: "flex" }}>
+      {/* Sized to the name it holds, between a floor and a ceiling. A fixed slot
+          kept the row from jumping when renaming began, at the cost of a short
+          name floating in the middle of a gap it did not fill. */}
+      <div
+        style={{
+          flex: "0 1 auto",
+          minWidth: MIDDLE_MIN,
+          maxWidth: MIDDLE_MAX,
+          display: "flex",
+        }}
+      >
         {editing ? (
           <input
             autoFocus
@@ -132,6 +146,9 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
             }}
             aria-label="Separator label"
             placeholder="Section"
+            // Follows what is being typed, so the row grows with the name
+            // instead of standing in a slot sized for a name nobody wrote.
+            size={Math.max(6, draft.length + 1)}
             style={{
               width: "100%",
               minWidth: 0,
@@ -139,9 +156,9 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
               borderRadius: 6,
               background: "transparent",
               color: T.text,
-              fontSize: 12.5,
+              fontSize: 11,
               fontWeight: 700,
-              letterSpacing: 0.8,
+              letterSpacing: 0.6,
               textAlign: "center",
               // Matches the button's box exactly, so nothing shifts vertically
               // either when the input replaces it.
@@ -157,9 +174,9 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
               border: "1px solid transparent",
               background: "transparent",
               color: separator.label ? T.text : T.muted,
-              fontSize: 12.5,
+              fontSize: 11,
               fontWeight: 700,
-              letterSpacing: 0.8,
+              letterSpacing: 0.6,
               textTransform: "uppercase",
               textAlign: "center",
               padding: "1px 4px",
@@ -686,6 +703,11 @@ export function NoteList({
               + Chapter
             </button>
           )}
+          {/* Only where a line can be seen. A separator belongs to the hand-made
+              order and is hidden in every other one, so the button stood in
+              orders where pressing it produced nothing at all — which reads
+              exactly like a button that is broken. */}
+          {reorderable && (
           <button
             onClick={onAddSeparator}
             data-add-separator
@@ -704,6 +726,7 @@ export function NoteList({
           >
             + Separator
           </button>
+          )}
         </div>
       )}
 

frontend/src/features/notes/noteSort.ts

@@ -14,6 +14,23 @@
 
 import type { Chapter, NoteMeta, Separator, SortMode } from "../../types";
 
+/**
+ * What a notebook is in until it is told otherwise.
+ *
+ * The hand-made order, because that is where a notebook's own arrangement lives:
+ * separators show, rows can be dragged into place, and nothing slides about on
+ * its own. A notebook that has never been arranged loses nothing by it —
+ * untouched rows all carry position 0 and fall back to newest first, which is
+ * what the old default showed.
+ */
+export const DEFAULT_NOTEBOOK_SORT: SortMode = "manual";
+
+/**
+ * What a *view* is in — "All Notes", "Starred", the bin.
+ *
+ * Not the hand-made one: those are questions asked of every notebook at once, so
+ * there is nothing for an arrangement to belong to and nowhere to keep it.
+ */
 export const DEFAULT_SORT: SortMode = "updated";
 
 export const SORT_LABELS: Record<SortMode, string> = {