Move a note in one press, and stop Draw inventing a page

Moving lived under a right-click, behind a submenu: two steps before the
list of places appeared at all, and on a phone a long press followed by a
flyout. There is a button on the row now, and it opens one screen with
the chapters of this notebook and the other notebooks together, marking
where the note already is.

The spare sheet in Draw mode was drawn as solid paper, so pressing Draw
on a one-page note made a second page appear from nowhere while the count
still said "of 1". It exists for a good reason — pages otherwise come
only from how far the writing runs, so drawing on page two would mean
writing two pages first — but it should look like the offer it is. Dashed
outline, half opacity, and it says what it is for. It counts once
something is on it.

And the two buttons above the list did not match: the one I added last
round was larger and bolder than the one it sat beside, and the older
one's target was nineteen pixels tall, which a finger misses. Both are
one shape now. A separator's label matches a chapter's name in size for
the same reason — two type treatments in one list is noise, and the
difference was not saying anything.

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

frontend/src/features/notes/NoteEditor.jsx

@@ -799,25 +799,55 @@ export function NoteEditor({
                 something instead of floating in the middle of an empty pane.
                 Behind the text and deaf to the pointer: it is what is written
                 on, not part of what is written. */}
-            {Array.from({ length: canvasPages }, (_, i) => (
-              <div
-                key={i}
-                aria-hidden
-                data-page-sheet={i + 1}
-                style={{
-                  position: "absolute",
-                  left: 0,
-                  right: 0,
-                  top: i * pitch,
-                  height: stageSize.h,
-                  pointerEvents: "none",
-                  background: T.bg,
-                  border: isMobileViewport ? "none" : `1px solid ${T.border}`,
-                  borderRadius: isMobileViewport ? 0 : 4,
-                  boxShadow: isMobileViewport ? "none" : "0 2px 10px rgba(0,0,0,0.22)",
-                }}
-              />
-            ))}
+            {Array.from({ length: canvasPages }, (_, i) => {
+              /* The last sheet in Draw mode is the spare one, not a page.
+                 Drawn as an outline rather than as paper: it appeared as a full
+                 second page the moment Draw was pressed, while the count still
+                 said "of 1" — which reads as the app inventing a page. It is an
+                 offer, and should look like one until something is on it. */
+              const spare = mode === "draw" && i + 1 > pages.count;
+              return (
+                <div
+                  key={i}
+                  aria-hidden
+                  data-page-sheet={i + 1}
+                  data-spare-page={spare ? "yes" : undefined}
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    top: i * pitch,
+                    height: stageSize.h,
+                    pointerEvents: "none",
+                    background: spare ? "transparent" : T.bg,
+                    border: isMobileViewport && !spare ? "none" : `1px dashed ${T.border}`,
+                    borderStyle: spare ? "dashed" : "solid",
+                    borderWidth: isMobileViewport && !spare ? 0 : 1,
+                    borderColor: T.border,
+                    borderRadius: isMobileViewport && !spare ? 0 : 4,
+                    boxShadow: isMobileViewport || spare ? "none" : "0 2px 10px rgba(0,0,0,0.22)",
+                    opacity: spare ? 0.5 : 1,
+                  }}
+                >
+                  {spare && (
+                    <div
+                      style={{
+                        position: "absolute",
+                        top: 12,
+                        left: 0,
+                        right: 0,
+                        textAlign: "center",
+                        fontSize: 11,
+                        letterSpacing: 0.5,
+                        color: T.faint,
+                      }}
+                    >
+                      Draw here to add a page
+                    </div>
+                  )}
+                </div>
+              );
+            })}
             <div
               style={{
                 position: "relative",

frontend/src/features/notes/NoteList.jsx

@@ -67,6 +67,36 @@ const Grip = ({ T, ...rest }) => (
   </div>
 );
 
+/**
+ * Moving a note, in one press.
+ *
+ * It used to be a right-click into a submenu — two steps before the list of
+ * places appeared at all, and on a phone a long press followed by a flyout.
+ * Sitting on the row beside the grip, it says what it does and takes one tap.
+ */
+const MoveButton = ({ T, onClick }) => (
+  <button
+    data-move-note
+    onClick={onClick}
+    title="Move to another notebook or chapter"
+    aria-label="Move note"
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: 28,
+      flexShrink: 0,
+      border: "none",
+      background: "transparent",
+      color: T.faint,
+      cursor: "pointer",
+      padding: 0,
+    }}
+  >
+    {I.move}
+  </button>
+);
+
 /** Width the separator's label keeps in both states, so renaming moves nothing. */
 const MIDDLE_W = 132;
 
@@ -136,7 +166,7 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
               borderRadius: 6,
               background: "transparent",
               color: T.text,
-              fontSize: 11.5,
+              fontSize: 12.5,
               fontWeight: 700,
               letterSpacing: 0.8,
               textAlign: "center",
@@ -154,7 +184,7 @@ function SeparatorRow({ T, separator, editing, onStartRename, onRename, onContex
               border: "1px solid transparent",
               background: "transparent",
               color: separator.label ? T.text : T.muted,
-              fontSize: 11.5,
+              fontSize: 12.5,
               fontWeight: 700,
               letterSpacing: 0.8,
               textTransform: "uppercase",
@@ -423,6 +453,7 @@ export function NoteList({
   onOpenChapter,
   onAddChapter,
   onChapterContextMenu,
+  onMoveNote,
   onReorder,
   onToggleSidebar,
   onSelectNote,
@@ -592,7 +623,7 @@ export function NoteList({
                 display: "flex",
                 alignItems: "center",
                 gap: 5,
-                padding: "4px 10px",
+                padding: "5px 10px",
                 borderRadius: 8,
                 border: `1px solid ${T.border}`,
                 background: "transparent",
@@ -614,8 +645,9 @@ export function NoteList({
               background: "transparent",
               color: T.muted,
               borderRadius: 8,
-              padding: "2px 8px",
-              fontSize: 10.5,
+              padding: "5px 10px",
+              fontSize: 11.5,
+              fontWeight: 600,
               cursor: "pointer",
               whiteSpace: "nowrap",
             }}
@@ -720,6 +752,9 @@ export function NoteList({
                   {showDropLine && <DropLine T={T} />}
                   <div style={{ display: "flex", alignItems: "stretch", gap: 2 }}>
                     {reorderable && <Grip T={T} {...dnd.gripProps} />}
+                    {onMoveNote && !note.trashed && (
+                      <MoveButton T={T} onClick={() => onMoveNote(note)} />
+                    )}
                   <button
                     data-note-row={note.id}
                     onClick={() => onSelectNote(note.id)}