Chapters as rows, in two views, in their own colours

Three things Marc asked for, and one of them turned out to be the hinge
the other two hang from.

**A chapter is a row like any other.** Same grip, same drag, same place
in a hand-made arrangement as a note or a separator. That needed notes
and chapters numbered from *one* counter: numbered separately they are
two sequences that cannot be interleaved again, and a chapter dragged
between two notes springs back to the top. Positions therefore have to be
named rather than read off an array index, so POST /notes/reorder now
takes `positions: [{id, order}]` beside the older `ids`, and chapters
have a reorder route of their own.

**Two ways for a chapter to open**, chosen per account beside the
typeface, for the same reason that one lives there: it is a choice about
how your own notes are laid out and it should follow you to the phone.
Beside the list, its notes in a further column the way OneNote lays out
pages — the notebook's own list carrying on to the left, chapter rows and
all. Or unfolded under the chapter's own row, indented against a rule in
its colour. A phone has room for neither and fills the list instead, with
a way back, which is what it did before there was a choice.

**Its own colour**, from eight named ones rather than the full palette:
the point of chapters is that they are different places, and twenty
near-identical blues do not help anyone tell them apart.

The colour is validated on the way in — it is written by a browser, so
only a plain #rrggbb gets through and anything else becomes no colour.

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

frontend/src/ui/constants.jsx

@@ -41,6 +41,24 @@ export const COVERS = [
   { bg: "linear-gradient(135deg,#654ea3,#eaafc8)", spine: "#4e3c7e", accent: "#f8bbd0" },
 
 ];
+/**
+ * Colours a chapter's icon can be given.
+ *
+ * A short, named list rather than the full palette: the point is telling one
+ * chapter from another at a glance, and twenty near-identical blues do not help
+ * with that. Each is legible on both themes.
+ */
+export const CHAPTER_COLORS = [
+  { label: "Red", value: "#e5534b" },
+  { label: "Orange", value: "#e07c24" },
+  { label: "Yellow", value: "#d4a017" },
+  { label: "Green", value: "#2da44e" },
+  { label: "Teal", value: "#1f9c96" },
+  { label: "Blue", value: "#4a8ff5" },
+  { label: "Purple", value: "#a371f7" },
+  { label: "Pink", value: "#db61a2" },
+];
+
 /* The icon is a key rather than an emoji: the sidebar draws it from the app's
  * own set, so it matches the stroke weight of everything around it and looks
  * the same on every machine. */