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/App.jsx

@@ -23,7 +23,13 @@ import { ImportDialog } from "./ui/ImportDialog.jsx";
 import { Sidebar } from "./ui/Sidebar.jsx";
 import { Dashboard } from "./features/notebooks/Dashboard.jsx";
 import { NoteList } from "./features/notes/NoteList.jsx";
-import { DEFAULT_SORT, canReorder, sortNotes } from "./features/notes/noteSort";
+import {
+  DEFAULT_SORT,
+  canReorder,
+  sortModesFor,
+  sortNotes,
+  withNewSeparator,
+} from "./features/notes/noteSort";
 import { EditorPane } from "./features/notes/EditorPane.jsx";
 import { HistoryModal } from "./features/notes/HistoryModal.jsx";
 import { DrawingLayer } from "./features/drawing/DrawingLayer.jsx";
@@ -79,7 +85,7 @@ export default function App() {
   const { notes, notebooks, noteContents, backlinks } = data;
   const search = useSearchIndex(user, notes, searchQuery);
   const dnd = useNotebookDnd(data.reorderNotebooks);
-  const noteDnd = useNotebookDnd(data.reorderNotes);
+  const noteDnd = useNotebookDnd((dragId, targetId) => data.rearrange(activeFolder, dragId, targetId));
 
   useEffect(() => sync.onSyncStatus(setSyncStatus), []);
 
@@ -168,9 +174,13 @@ export default function App() {
   const activeNotebook = notebooks.find((nb) => nb.id === activeFolder) || null;
   /* A real notebook remembers its order on the server; a view keeps one for the
      session. Either way the note list is told a single mode. */
-  const sortMode = activeNotebook
+  const rawSortMode = activeNotebook
     ? activeNotebook.sortMode || DEFAULT_SORT
     : virtualSort[activeFolder] || DEFAULT_SORT;
+  // A view has nowhere to keep a hand-made arrangement, so it cannot be in one —
+  // even if an older version of the app left "manual" behind on a notebook that
+  // has since been looked at through "All Notes".
+  const sortMode = !activeNotebook && rawSortMode === "manual" ? DEFAULT_SORT : rawSortMode;
 
   const setSortMode = useCallback(
     (mode) => {
@@ -180,6 +190,18 @@ export default function App() {
     [activeNotebook, activeFolder, data]
   );
 
+  /* ── Separators ──
+   * Lines the user draws between notes. They belong to the notebook's own
+   * arrangement, so they are stored on it and only ever shown in manual order. */
+  const separators = activeNotebook?.separators || [];
+  const writeSeparators = (next) =>
+    activeNotebook && void data.updateNotebook(activeNotebook.id, { separators: next });
+
+  const addSeparator = () => writeSeparators(withNewSeparator(separators, `sep-${Date.now().toString(36)}`));
+  const renameSeparator = (id, label) =>
+    writeSeparators(separators.map((s) => (s.id === id ? { ...s, label } : s)));
+  const removeSeparator = (id) => writeSeparators(separators.filter((s) => s.id !== id));
+
   const isSearching = searchQuery.trim().length > 0;
 
   const filteredNotes = useMemo(() => {
@@ -586,8 +608,13 @@ export default function App() {
               trashedCount={trashedNotes.length}
               snippetFor={search.snippetFor}
               sortMode={sortMode}
+              sortModes={sortModesFor(!!activeNotebook)}
               onSortModeChange={setSortMode}
               reorderable={canReorder(sortMode, isSearching) && !!activeNotebook}
+              separators={separators}
+              onAddSeparator={addSeparator}
+              onRenameSeparator={renameSeparator}
+              onRemoveSeparator={removeSeparator}
               dnd={noteDnd}
               onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}
               onSelectNote={openNote}

frontend/src/features/notes/NoteList.jsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { I } from "../../ui/icons.jsx";
 import { fmtDate } from "../../ui/format";
 import { FONT_SERIF, FONT_UI } from "../../ui/theme";
-import { SORT_LABELS, SORT_MODES } from "./noteSort";
+import { END_ID, SORT_LABELS, mergeEntries } from "./noteSort";
 
 const iconButton = (T) => ({
   display: "flex",
@@ -18,6 +18,127 @@ const iconButton = (T) => ({
   color: T.muted,
 });
 
+/** A note rendered outside the manual order, wrapped to look like an entry. */
+const asNoteEntry = (note) => ({ kind: "note", id: note.id, note });
+
+/**
+ * Where the dragged row will land.
+ *
+ * A real element rather than a border on the row above. A border that appears
+ * and disappears changes that row's height, so the list twitched under the
+ * cursor — and setting `borderTop` in the same style object as a `border`
+ * shorthand left a permanent 2px black line behind once it was cleared, because
+ * clearing the longhand resets its width and colour to the defaults while the
+ * shorthand's `solid` stays.
+ */
+const DropLine = ({ T }) => (
+  <div data-drop-line style={{ height: 2, borderRadius: 2, background: T.accent, margin: "2px 4px" }} />
+);
+
+/**
+ * A line drawn between notes, with an optional name.
+ *
+ * Draggable like a note, because a divider that cannot move with what it
+ * divides is worse than none.
+ */
+function SeparatorRow({ T, separator, onRename, onRemove }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(separator.label);
+
+  const commit = () => {
+    setEditing(false);
+    if (draft !== separator.label) onRename(separator.id, draft);
+  };
+
+  return (
+    <div
+      data-separator={separator.id}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "8px 8px 6px",
+        cursor: "grab",
+      }}
+    >
+      <div
+        style={{ height: 1, background: T.border, flex: separator.label || editing ? 0 : 1, minWidth: 12 }}
+      />
+      {editing ? (
+        <input
+          autoFocus
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commit();
+            if (e.key === "Escape") {
+              setDraft(separator.label);
+              setEditing(false);
+            }
+          }}
+          aria-label="Separator label"
+          placeholder="Abschnitt"
+          style={{
+            flex: 1,
+            minWidth: 0,
+            border: `1px solid ${T.border}`,
+            borderRadius: 6,
+            background: "transparent",
+            color: T.textSec,
+            fontSize: 10.5,
+            fontWeight: 700,
+            letterSpacing: 0.6,
+            padding: "2px 6px",
+            outline: "none",
+          }}
+        />
+      ) : (
+        <button
+          onClick={() => {
+            setDraft(separator.label);
+            setEditing(true);
+          }}
+          title="Umbenennen"
+          style={{
+            border: "none",
+            background: "transparent",
+            color: separator.label ? T.textSec : T.faint,
+            fontSize: 10.5,
+            fontWeight: 700,
+            letterSpacing: 0.6,
+            textTransform: "uppercase",
+            cursor: "text",
+            padding: 0,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {separator.label || "Benennen"}
+        </button>
+      )}
+      <div style={{ height: 1, background: T.border, flex: 1, minWidth: 12 }} />
+      <button
+        onClick={() => onRemove(separator.id)}
+        title="Trenner entfernen"
+        aria-label="Remove separator"
+        style={{
+          border: "none",
+          background: "transparent",
+          color: T.faint,
+          cursor: "pointer",
+          fontSize: 13,
+          lineHeight: 1,
+          padding: "0 2px",
+        }}
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
 /**
  * How this notebook's notes are ordered.
  *
@@ -25,7 +146,7 @@ const iconButton = (T) => ({
  * device and still there next week — a reference book stays alphabetical, a
  * journal stays newest-first, without either being re-chosen on each visit.
  */
-function SortMenu({ T, mode, onChange, disabled }) {
+function SortMenu({ T, mode, modes, onChange, disabled }) {
   const [open, setOpen] = useState(false);
   const box = useRef(null);
 
@@ -65,7 +186,7 @@ function SortMenu({ T, mode, onChange, disabled }) {
             boxShadow: "0 10px 26px rgba(0,0,0,.28)",
           }}
         >
-          {SORT_MODES.map((m) => (
+          {modes.map((m) => (
             <button
               key={m}
               data-sort-option={m}
@@ -109,8 +230,13 @@ export function NoteList({
   trashedCount,
   snippetFor,
   sortMode,
+  sortModes,
   onSortModeChange,
   reorderable,
+  separators,
+  onAddSeparator,
+  onRenameSeparator,
+  onRemoveSeparator,
   dnd,
   onToggleSidebar,
   onSelectNote,
@@ -176,7 +302,7 @@ export function NoteList({
           </h2>
         </div>
         <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
-          {!isTrashView && <SortMenu T={T} mode={sortMode} onChange={onSortModeChange} />}
+          {!isTrashView && <SortMenu T={T} mode={sortMode} modes={sortModes} onChange={onSortModeChange} />}
           {!isTrashView && (
             <button
               onClick={onImportMarkdown}
@@ -242,15 +368,39 @@ export function NoteList({
       {sortMode === "manual" && !isTrashView && (
         <div
           style={{
-            padding: "5px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "5px 10px 5px 16px",
             fontSize: 10.5,
             color: T.faint,
             borderBottom: `1px solid ${T.borderLight}`,
           }}
         >
-          {reorderable
-            ? "Eigene Reihenfolge — zum Umsortieren ziehen"
-            : "Eigene Reihenfolge — Suche aktiv, Ziehen pausiert"}
+          <span style={{ flex: 1 }}>
+            {reorderable
+              ? "Eigene Reihenfolge — zum Umsortieren ziehen"
+              : "Eigene Reihenfolge — Suche aktiv, Ziehen pausiert"}
+          </span>
+          {reorderable && (
+            <button
+              onClick={onAddSeparator}
+              data-add-separator
+              title="Trennlinie einfügen"
+              style={{
+                border: `1px solid ${T.border}`,
+                background: "transparent",
+                color: T.muted,
+                borderRadius: 8,
+                padding: "2px 8px",
+                fontSize: 10.5,
+                cursor: "pointer",
+                whiteSpace: "nowrap",
+              }}
+            >
+              + Trenner
+            </button>
+          )}
         </div>
       )}
 
@@ -295,77 +445,130 @@ export function NoteList({
             )}
           </div>
         ) : (
-          notes.map((note) => {
-            const snippet = snippetFor(note.id);
-            const isTarget = reorderable && dnd?.overId === note.id;
-            return (
-              <button
-                key={note.id}
-                data-note-row={note.id}
-                draggable={reorderable}
-                onDragStart={reorderable ? (e) => dnd.onDragStart(e, note.id) : undefined}
-                onDragOver={reorderable ? (e) => dnd.onDragOver(e, note.id) : undefined}
-                onDrop={reorderable ? (e) => dnd.onDrop(e, note.id) : undefined}
-                onDragEnd={reorderable ? dnd.onDragEnd : undefined}
-                onClick={() => onSelectNote(note.id)}
-                onContextMenu={(e) => onNoteContextMenu(e, note)}
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  width: "100%",
-                  padding: "12px 14px",
-                  borderRadius: 10,
-                  border: `1px solid ${activeNote === note.id ? T.accent + "55" : "transparent"}`,
-                  borderTop: isTarget ? `2px solid ${T.accent}` : undefined,
-                  background: activeNote === note.id ? T.accentSoft : "transparent",
-                  cursor: reorderable ? "grab" : "pointer",
-                  marginBottom: 2,
-                  textAlign: "left",
-                }}
-              >
-                <div
-                  style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 3, width: "100%" }}
-                >
-                  <span style={{ fontSize: 13 }}>
-                    {note.trashed ? "🗑️" : note.type === "pdf" ? "📄" : "📝"}
-                  </span>
-                  <span
-                    style={{
-                      fontSize: 13,
-                      fontWeight: 600,
-                      color: T.text,
-                      flex: 1,
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                    }}
-                  >
-                    {note.title}
-                  </span>
-                  {note.starred && !note.trashed && (
-                    <span style={{ color: "#f0b429", fontSize: 11 }}>⭐</span>
-                  )}
-                </div>
-                {snippet && (
-                  <div
-                    style={{
-                      fontSize: 11,
-                      color: T.textSec,
-                      lineHeight: 1.45,
-                      marginTop: 1,
-                      display: "-webkit-box",
-                      WebkitLineClamp: 2,
-                      WebkitBoxOrient: "vertical",
-                      overflow: "hidden",
-                    }}
-                  >
-                    {snippet}
+          <>
+            {/* Separators are part of the manual arrangement and only mean
+                something there: in "newest first" the notes would slide past a
+                line on every edit. They are not shown in the other orders, and
+                are still in place on the way back. */}
+            {(reorderable ? mergeEntries(notes, separators) : notes.map(asNoteEntry)).map((entry) => {
+              const showDropLine = reorderable && dnd?.overId === entry.id;
+              /* The whole row, indicator included, is the drop target.
+               *
+               * Putting these on the inner element left the indicator itself as
+               * a dead strip: 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. */
+              const rowProps = reorderable
+                ? {
+                    draggable: true,
+                    onDragStart: (e) => dnd.onDragStart(e, entry.id),
+                    onDragOver: (e) => dnd.onDragOver(e, entry.id),
+                    onDrop: (e) => dnd.onDrop(e, entry.id),
+                    onDragEnd: dnd.onDragEnd,
+                  }
+                : {};
+
+              if (entry.kind === "separator") {
+                return (
+                  <div key={entry.id} {...rowProps}>
+                    {showDropLine && <DropLine T={T} />}
+                    <SeparatorRow
+                      T={T}
+                      separator={entry.separator}
+                      onRename={onRenameSeparator}
+                      onRemove={onRemoveSeparator}
+                    />
                   </div>
-                )}
-                <div style={{ fontSize: 10, color: T.faint, marginTop: 3 }}>{fmtDate(note.updatedAt)}</div>
-              </button>
-            );
-          })
+                );
+              }
+
+              const note = entry.note;
+              const snippet = snippetFor(note.id);
+              return (
+                <div key={note.id} {...rowProps}>
+                  {showDropLine && <DropLine T={T} />}
+                  <button
+                    data-note-row={note.id}
+                    onClick={() => onSelectNote(note.id)}
+                    onContextMenu={(e) => onNoteContextMenu(e, note)}
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      width: "100%",
+                      padding: "12px 14px",
+                      borderRadius: 10,
+                      border: `1px solid ${activeNote === note.id ? T.accent + "55" : "transparent"}`,
+                      background: activeNote === note.id ? T.accentSoft : "transparent",
+                      cursor: reorderable ? "grab" : "pointer",
+                      marginBottom: 2,
+                      textAlign: "left",
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 7,
+                        marginBottom: 3,
+                        width: "100%",
+                      }}
+                    >
+                      <span style={{ fontSize: 13 }}>
+                        {note.trashed ? "🗑️" : note.type === "pdf" ? "📄" : "📝"}
+                      </span>
+                      <span
+                        style={{
+                          fontSize: 13,
+                          fontWeight: 600,
+                          color: T.text,
+                          flex: 1,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {note.title}
+                      </span>
+                      {note.starred && !note.trashed && (
+                        <span style={{ color: "#f0b429", fontSize: 11 }}>⭐</span>
+                      )}
+                    </div>
+                    {snippet && (
+                      <div
+                        style={{
+                          fontSize: 11,
+                          color: T.textSec,
+                          lineHeight: 1.45,
+                          marginTop: 1,
+                          display: "-webkit-box",
+                          WebkitLineClamp: 2,
+                          WebkitBoxOrient: "vertical",
+                          overflow: "hidden",
+                        }}
+                      >
+                        {snippet}
+                      </div>
+                    )}
+                    <div style={{ fontSize: 10, color: T.faint, marginTop: 3 }}>
+                      {fmtDate(note.updatedAt)}
+                    </div>
+                  </button>
+                </div>
+              );
+            })}
+            {/* Dropping below the last row moves something to the end, which
+                  otherwise needs an awkward drop onto the very last note. */}
+            {reorderable && (
+              <div
+                data-drop-end
+                onDragOver={(e) => dnd.onDragOver(e, END_ID)}
+                onDrop={(e) => dnd.onDrop(e, END_ID)}
+                style={{ minHeight: 40 }}
+              >
+                {dnd?.overId === END_ID && <DropLine T={T} />}
+              </div>
+            )}
+          </>
         )}
       </div>
     </div>

frontend/src/features/notes/noteSort.test.ts

@@ -1,6 +1,15 @@
 import { describe, expect, it } from "vitest";
 
-import { canReorder, reindex, sortNotes } from "./noteSort";
+import {
+  END_ID,
+  canReorder,
+  mergeEntries,
+  reindex,
+  reindexEntries,
+  sortModesFor,
+  sortNotes,
+  withNewSeparator,
+} from "./noteSort";
 import type { NoteMeta } from "../../types";
 
 const note = (id: string, over: Partial<NoteMeta> = {}): NoteMeta => ({
@@ -129,3 +138,89 @@ describe("canReorder", () => {
     expect(canReorder("manual", true)).toBe(false);
   });
 });
+
+describe("sortModesFor", () => {
+  it("offers a hand-made order inside a notebook", () => {
+    expect(sortModesFor(true)).toContain("manual");
+  });
+
+  it("does not offer one in a view, which has nowhere to keep it", () => {
+    // "All Notes" is a question asked of every notebook, not a place — there is
+    // nothing for an arrangement to belong to.
+    expect(sortModesFor(false)).not.toContain("manual");
+    expect(sortModesFor(false)).toContain("updated");
+  });
+});
+
+describe("separators", () => {
+  const notes = [note("a", { sortOrder: 0 }), note("b", { sortOrder: 1 }), note("c", { sortOrder: 2 })];
+  const kinds = (list: ReturnType<typeof mergeEntries>) => list.map((e) => `${e.kind[0]}:${e.id}`);
+
+  it("sits between the notes it was placed between", () => {
+    const merged = mergeEntries(notes, [{ id: "s1", label: "Später", order: 2 }]);
+    expect(kinds(merged)).toEqual(["n:a", "n:b", "s:s1", "n:c"]);
+  });
+
+  it("comes before the note it shares a position with, so it reads as a header", () => {
+    const merged = mergeEntries(notes, [{ id: "s1", label: "", order: 0 }]);
+    expect(kinds(merged)[0]).toBe("s:s1");
+  });
+
+  it("still appears when the notebook has shrunk beneath it", () => {
+    // Its label is the user's work; dropping it silently because two notes were
+    // deleted would be worse than showing it at the end.
+    const merged = mergeEntries(notes, [{ id: "s1", label: "Alt", order: 99 }]);
+    expect(kinds(merged)[merged.length - 1]).toBe("s:s1");
+  });
+
+  it("is not pushed behind notes that have never been dragged", () => {
+    // Untouched notes all carry position 0. Merging on the stored numbers rather
+    // than on rank would pile them all at 0 and put every separator last.
+    const fresh = [note("x"), note("y"), note("z")];
+    const merged = mergeEntries(fresh, [{ id: "s1", label: "", order: 1 }]);
+    expect(kinds(merged)[1]).toBe("s:s1");
+  });
+
+  it("keeps its place as the notes around it are edited", () => {
+    const separators = [{ id: "s1", label: "Archiv", order: 2 }];
+    const touched = notes.map((n) => (n.id === "a" ? { ...n, updatedAt: "2030-01-01T00:00:00Z" } : n));
+    expect(kinds(mergeEntries(touched, separators))).toEqual(["n:a", "n:b", "s:s1", "n:c"]);
+  });
+
+  it("is added at the top, where it can be seen and then moved", () => {
+    const added = withNewSeparator([{ id: "old", label: "", order: 3 }], "new");
+    expect(added[0]!.id).toBe("new");
+    expect(added[0]!.order).toBe(0);
+  });
+});
+
+describe("reindexEntries", () => {
+  const notes = [note("a", { sortOrder: 0 }), note("b", { sortOrder: 1 }), note("c", { sortOrder: 2 })];
+  const separators = [{ id: "s1", label: "Teil 2", order: 1 }];
+
+  it("moves a note across a separator and keeps the separator where it was", () => {
+    const next = reindexEntries(notes, separators, "c", "a")!;
+    expect(next.noteIds).toEqual(["c", "a", "b"]);
+    expect(next.separators[0]!.order).toBe(2);
+  });
+
+  it("moves a separator itself", () => {
+    const next = reindexEntries(notes, separators, "s1", "a")!;
+    expect(next.separators[0]!.order).toBe(0);
+    expect(next.noteIds).toEqual(["a", "b", "c"]);
+  });
+
+  it("sends a row to the end when dropped below the last one", () => {
+    expect(reindexEntries(notes, [], "a", END_ID)!.noteIds).toEqual(["b", "c", "a"]);
+  });
+
+  it("reports nothing to do for a row that is not there", () => {
+    expect(reindexEntries(notes, separators, "ghost", "a")).toBeNull();
+    expect(reindexEntries(notes, separators, "a", "ghost")).toBeNull();
+  });
+
+  it("leaves the separators untouched when only notes moved past each other", () => {
+    const next = reindexEntries(notes, [{ id: "s1", label: "x", order: 0 }], "c", "b")!;
+    expect(next.separators).toEqual([{ id: "s1", label: "x", order: 0 }]);
+  });
+});

frontend/src/features/notes/noteSort.ts

@@ -12,7 +12,7 @@
  * scramble everything that was not being looked at.
  */
 
-import type { NoteMeta, SortMode } from "../../types";
+import type { NoteMeta, Separator, SortMode } from "../../types";
 
 export const DEFAULT_SORT: SortMode = "updated";
 
@@ -26,6 +26,17 @@ export const SORT_LABELS: Record<SortMode, string> = {
 
 export const SORT_MODES = Object.keys(SORT_LABELS) as SortMode[];
 
+/**
+ * The orders a view can be put in.
+ *
+ * "All Notes" and "Starred" are not places, they are questions asked of every
+ * notebook at once — so there is nothing for a hand-made arrangement to belong
+ * to, and nowhere to keep it. Offering it there would be offering a setting that
+ * cannot be honoured.
+ */
+export const sortModesFor = (isNotebook: boolean): SortMode[] =>
+  isNotebook ? SORT_MODES : SORT_MODES.filter((m) => m !== "manual");
+
 const time = (value: string | undefined) => {
   const t = Date.parse(value ?? "");
   return Number.isNaN(t) ? 0 : t;
@@ -59,24 +70,122 @@ export function sortNotes(notes: NoteMeta[], mode: SortMode = DEFAULT_SORT): Not
   return [...notes].sort(compare[mode] ?? compare[DEFAULT_SORT]);
 }
 
+/* ── separators ── */
+
+/**
+ * A line drawn between notes to group them.
+ *
+ * Separators live in the same order as the notes and are dragged the same way,
+ * because a divider that cannot be moved with what it divides is worse than
+ * none. They belong to the notebook rather than to any note: they are part of
+ * the arrangement, and the arrangement is the notebook's.
+ *
+ * They exist only in the manual order. In "newest first" there is nothing for a
+ * line to mean — the notes would slide past it on every edit — so the other
+ * orders simply do not show them, and they are still there on the way back.
+ */
+export type Entry =
+  | { kind: "note"; id: string; order: number; note: NoteMeta }
+  | { kind: "separator"; id: string; order: number; separator: Separator };
+
+/**
+ * Notes and separators, interleaved into the one order the user arranged.
+ *
+ * A separator sitting at the same position as a note comes first, so "insert a
+ * line above this note" lands where it was asked for rather than one row late.
+ */
+export function mergeEntries(notes: NoteMeta[], separators: Separator[] = []): Entry[] {
+  /* Notes are placed by their rank, not by their stored number. Notes that have
+   * never been dragged all carry 0, and sorting has already broken that tie —
+   * using the stored numbers here would pile them all at position 0 and push
+   * every separator behind the lot. */
+  const noteEntries: Entry[] = sortNotes(notes, "manual").map((note, rank) => ({
+    kind: "note" as const,
+    id: note.id,
+    order: rank,
+    note,
+  }));
+
+  const separatorEntries: Entry[] = separators.map((separator) => ({
+    kind: "separator" as const,
+    id: separator.id,
+    // Clamped, so a separator left over from a notebook that has since shrunk
+    // still appears — at the end — rather than vanishing with its label.
+    order: Math.max(0, Math.min(separator.order, noteEntries.length)),
+    separator,
+  }));
+
+  return [...noteEntries, ...separatorEntries].sort(
+    // A separator sitting at the same position as a note comes first, so
+    // "a line above this note" lands where it was asked for.
+    (a, b) => a.order - b.order || (a.kind === "separator" ? -1 : 1)
+  );
+}
+
+/** The result of a drag: what to write back for notes and for separators. */
+export interface Arrangement {
+  noteIds: string[];
+  separators: Separator[];
+}
+
+/** Turns an ordered entry list back into storable positions. */
+export function toArrangement(entries: Entry[]): Arrangement {
+  const noteIds: string[] = [];
+  const separators: Separator[] = [];
+  for (const entry of entries) {
+    if (entry.kind === "note") noteIds.push(entry.id);
+    // A separator's position is "how many notes come before me". Expressed that
+    // way it stays put as the notes around it are renamed, edited or opened.
+    else separators.push({ ...entry.separator, order: noteIds.length });
+  }
+  return { noteIds, separators };
+}
+
+/**
+ * The whole notebook rearranged after something was dragged onto something else.
+ *
+ * `notes` must be every note in the notebook, not the filtered view. Returns
+ * null when the move changes nothing, which spares the caller a pointless write.
+ */
+export function reindexEntries(
+  notes: NoteMeta[],
+  separators: Separator[],
+  dragId: string,
+  targetId: string
+): Arrangement | null {
+  if (dragId === targetId) return null;
+  const entries = mergeEntries(notes, separators);
+  const from = entries.findIndex((e) => e.id === dragId);
+  if (from < 0) return null;
+
+  // The strip below the last row means "put it at the end" — otherwise moving
+  // something past the final note needs a drop onto the note itself, which puts
+  // it above.
+  const to = targetId === END_ID ? entries.length - 1 : entries.findIndex((e) => e.id === targetId);
+  if (to < 0) return null;
+
+  const [moved] = entries.splice(from, 1);
+  if (!moved) return null;
+  entries.splice(to, 0, moved);
+  return toArrangement(entries);
+}
+
+/** Drop target standing for "after everything". */
+export const END_ID = "__end__";
+
+/** A new separator, added at the top where it can be seen and then dragged. */
+export const withNewSeparator = (separators: Separator[], id: string, label = ""): Separator[] => [
+  { id, label, order: 0 },
+  ...separators,
+];
+
 /**
  * The full notebook renumbered after a note was dragged onto another.
  *
- * `all` must be every note in the notebook, not the filtered view. Returns the
- * ids in their new order, or null when the move changes nothing — which spares
- * the caller a pointless write.
+ * Kept for the case with no separators; `reindexEntries` is the general one.
  */
 export function reindex(all: NoteMeta[], dragId: string, targetId: string): string[] | null {
-  if (dragId === targetId) return null;
-  const ordered = sortNotes(all, "manual");
-  const from = ordered.findIndex((n) => n.id === dragId);
-  const to = ordered.findIndex((n) => n.id === targetId);
-  if (from < 0 || to < 0) return null;
-
-  const [moved] = ordered.splice(from, 1);
-  if (!moved) return null;
-  ordered.splice(to, 0, moved);
-  return ordered.map((n) => n.id);
+  return reindexEntries(all, [], dragId, targetId)?.noteIds ?? null;
 }
 
 /**

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,

frontend/src/syncEngine.ts

@@ -73,6 +73,7 @@ interface ServerNotebook {
   sort_order?: number;
   max_versions?: number | null;
   sort_mode?: string | null;
+  separators?: string | null;
 }
 
 interface ServerNote {
@@ -406,6 +407,7 @@ export async function fullSync(): Promise<void> {
       sortOrder: nb.sort_order || 0,
       maxVersions: nb.max_versions ?? null,
       sortMode: (nb.sort_mode as Notebook["sortMode"]) ?? null,
+      separators: parseSeparators(nb.separators),
     }));
     const serverNbIds = new Set(nbs.map((nb) => nb.id));
     const unsyncedNbs = localNbs.filter((nb) => nb._pendingCreate && !serverNbIds.has(nb.id));
@@ -447,6 +449,17 @@ export async function fullSync(): Promise<void> {
   }
 }
 
+/** Separators travel as a JSON string; a damaged one must not fail the sync. */
+function parseSeparators(raw: string | null | undefined): Notebook["separators"] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
 function toNoteMeta(n: ServerNote, trashed: boolean): NoteMeta {
   return {
     id: n.id,
@@ -476,6 +489,7 @@ type QueuedAction =
         sortOrder?: number;
         maxVersions?: number | null;
         sortMode?: Notebook["sortMode"];
+        separators?: Notebook["separators"];
       };
     }
   | { action: "deleteNotebook"; data: { id: string } }
@@ -562,6 +576,7 @@ async function processEntry(entry: QueueEntry): Promise<void> {
         sortOrder: a.data.sortOrder,
         ...(a.data.maxVersions !== undefined ? { maxVersions: a.data.maxVersions } : {}),
         ...(a.data.sortMode !== undefined ? { sortMode: a.data.sortMode } : {}),
+        ...(a.data.separators !== undefined ? { separators: a.data.separators } : {}),
       });
       break;
     case "deleteNotebook":
@@ -719,6 +734,7 @@ export async function updateNotebook(id: string, updates: Partial<Notebook>): Pr
         // has to travel, while undefined must stay away and change nothing.
         ...(updates.maxVersions !== undefined ? { maxVersions: updates.maxVersions } : {}),
         ...(updates.sortMode !== undefined ? { sortMode: updates.sortMode } : {}),
+        ...(updates.separators !== undefined ? { separators: updates.separators } : {}),
       });
       return;
     } catch (e) {
@@ -734,6 +750,7 @@ export async function updateNotebook(id: string, updates: Partial<Notebook>): Pr
       sortOrder: updates.sortOrder,
       maxVersions: updates.maxVersions,
       sortMode: updates.sortMode,
+      separators: updates.separators,
     },
   });
   notifyStatus("pending");

frontend/src/types.ts

@@ -74,6 +74,18 @@ export interface NoteContent {
  */
 export type SortMode = "manual" | "updated" | "oldest" | "created" | "title";
 
+/**
+ * A line drawn between notes in a notebook's own order.
+ *
+ * `order` is "how many notes come before me", so it stays meaningful as the
+ * notes around it are renamed, edited or opened.
+ */
+export interface Separator {
+  id: string;
+  label: string;
+  order: number;
+}
+
 export interface Notebook {
   id: string;
   name: string;
@@ -83,6 +95,8 @@ export interface Notebook {
   maxVersions?: number | null;
   /** Null means the app default, newest first. */
   sortMode?: SortMode | null;
+  /** Lines drawn between notes in the manual order. */
+  separators?: Separator[];
   _pendingCreate?: boolean;
 }