Fix a permanent black line in the note list, and add separators

The drop indicator was a `borderTop` set in the same style object as a `border`
shorthand. Clearing the longhand resets its width and colour to the defaults
while the shorthand's `solid` stays, so a row kept a 2px black line for good —
measured at rest, before any drag. It is now its own element, which also stops
the list twitching as a row grows and shrinks by a pixel.

That element then turned out to be a dead strip of its own: it pushes the row
down as it appears, so the pointer ended up over the line rather than over the
row and releasing there dropped on nothing. The drag handlers moved to the whole
row and the indicator no longer takes pointer events. A strip below the last row
means "put it at the end", which otherwise needs a drop onto the final note.

Separators are lines drawn between notes, optionally named, stored on the
notebook beside its sort mode. They drag like notes do, and their position is
"how many notes come before me", so they hold their place as the notes around
them are renamed or edited. Shown only in the manual order — in "newest first"
the notes would slide past the line on every edit.

"All Notes" and "Starred" no longer offer a hand-made order: they are questions
asked of every notebook, so there is nothing for an arrangement to belong to.

199 unit tests, 190 browser checks across eleven suites.

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

frontend/src/hooks/useNoteData.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import * as sync from "../syncEngine";
 import * as searchIndex from "../search";
 import { sameStrokeDoc } from "../features/drawing/strokes.js";
-import { reindex } from "../features/notes/noteSort";
+import { reindexEntries } from "../features/notes/noteSort";
 import type { Backlink, NoteContent, NoteMeta, Notebook, StrokeDoc, User } from "../types";
 
 /** How often the whole account is reconciled with the server. */
@@ -45,8 +45,8 @@ export interface NoteData {
   permanentDeleteNote: (id: string) => Promise<void>;
   emptyTrash: () => Promise<void>;
   moveNote: (id: string, folderId: string) => Promise<void>;
-  /** Drag-to-reorder within a notebook; only meaningful in manual sort. */
-  reorderNotes: (dragId: string, targetId: string) => void;
+  /** Drag-to-reorder within a notebook; moves notes and separators alike. */
+  rearrange: (notebookId: string, dragId: string, targetId: string) => void;
 
   createNotebook: (fields: { name: string; cover: number }) => Promise<Notebook>;
   updateNotebook: (id: string, updates: Partial<Notebook>) => Promise<void>;
@@ -265,22 +265,34 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
   }, []);
 
   /**
-   * Puts one note where another was, in the user's own order.
+   * Puts one row where another was, in the user's own order.
    *
-   * The new positions are computed over *every* note in that notebook, taken
-   * from the store rather than from whatever the list is currently showing. A
-   * search or a filter must never be able to renumber the notes it is hiding.
+   * Notes and separators move the same way, so this takes both and writes both
+   * back. The new positions are computed over *every* note in that notebook,
+   * taken from the store rather than from whatever the list is showing: a search
+   * or a filter must never be able to renumber the notes it is hiding.
    */
-  const reorderNotes = useCallback((dragId: string, targetId: string) => {
-    const dragged = notesRef.current.find((n) => n.id === dragId);
-    if (!dragged) return;
-    const inNotebook = notesRef.current.filter((n) => !n.trashed && n.folderId === dragged.folderId);
-    const order = reindex(inNotebook, dragId, targetId);
-    if (!order) return;
+  const rearrange = useCallback((notebookId: string, dragId: string, targetId: string) => {
+    const notebook = notebooksRef.current.find((nb) => nb.id === notebookId);
+    if (!notebook) return;
+    const inNotebook = notesRef.current.filter((n) => !n.trashed && n.folderId === notebookId);
 
-    const position = new Map(order.map((id, i) => [id, i]));
+    const next = reindexEntries(inNotebook, notebook.separators || [], dragId, targetId);
+    if (!next) return;
+
+    const position = new Map(next.noteIds.map((id, i) => [id, i]));
     setNotes((p) => p.map((n) => (position.has(n.id) ? { ...n, sortOrder: position.get(n.id)! } : n)));
-    void sync.reorderNotes(order);
+    void sync.reorderNotes(next.noteIds);
+
+    // Only written when it actually changed: a plain note drag leaves the
+    // separators alone, and a pointless notebook write would sync for nothing.
+    const before = JSON.stringify(notebook.separators || []);
+    if (JSON.stringify(next.separators) !== before) {
+      setNotebooks((p) =>
+        p.map((nb) => (nb.id === notebookId ? { ...nb, separators: next.separators } : nb))
+      );
+      void sync.updateNotebook(notebookId, { separators: next.separators });
+    }
   }, []);
 
   /* ── Notebooks ── */
@@ -333,7 +345,7 @@ export function useNoteData(user: User | null, activeNote: string | null): NoteD
     permanentDeleteNote,
     emptyTrash,
     moveNote,
-    reorderNotes,
+    rearrange,
     createNotebook,
     updateNotebook,
     deleteNotebook,