Pin notes to passages in a PDF, and put the notes control with the rest

The panel beside a PDF is for notes about the document; a note that belongs to
one paragraph is a different thing, and one that has to begin "on page 14, third
paragraph" has already lost its place. Click Randnotiz, click the passage, write.

Pins ride in the same per-page overlay as the drawings, in PDF points, so one
stays on its sentence at every zoom and in the exported file. Living outside the
note body has consequences that each needed handling: nothing else would index
them for search, so the viewer feeds them in with their page numbers; clearing a
page's ink must not take them; and "is this overlay empty?" was answered by
counting strokes — in the client *and* independently in the server, so an
overlay holding only pinned notes was stored as NULL and lost every note on it.

They are stamped into the annotated export as a numbered marker plus a box of
text, on whichever side of the pin has room. Standard PDF fonts are Latin-1, so
characters outside it are replaced rather than failing the whole export.

The Notizen control moves into the viewer's toolbar. A second row for one button
cost reading height on every screen and put one of the document's controls
somewhere none of the others were. On a phone, where the viewer is not on screen
while the notes are, the way back sits in the panel.

Renaming a separator no longer shifts the row: the two rules always share what is
left over equally and the middle keeps one width in both states.

215 unit tests, 206 browser checks across eleven suites.

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

backend/server.js

@@ -1254,6 +1254,30 @@ function countStrokes(doc) {
   return null;
 }
 
+/* Notes pinned to spots in a PDF. They ride in the same overlay as the strokes
+ * and are just as much the reader's work, so "is there anything here" has to ask
+ * about both — storing an overlay that holds only pinned notes as null threw
+ * every one of them away. */
+const MAX_PINNED_NOTES = 500;
+const MAX_PINNED_LENGTH = 4000;
+
+function countPinnedNotes(doc) {
+  if (!doc || typeof doc !== "object" || !doc.pages || typeof doc.pages !== "object") return 0;
+  let n = 0;
+  for (const page of Object.values(doc.pages)) {
+    if (!page || page.notes === undefined) continue;
+    if (!Array.isArray(page.notes)) return null;
+    for (const pin of page.notes) {
+      if (!pin || typeof pin.id !== "string" || !Number.isFinite(pin.x) || !Number.isFinite(pin.y)) {
+        return null;
+      }
+      if (typeof pin.text === "string" && pin.text.length > MAX_PINNED_LENGTH) return null;
+    }
+    n += page.notes.length;
+  }
+  return n;
+}
+
 app.put("/api/notes/:id/drawing", authMiddleware, (req, res) => {
   const { drawingStrokes, drawingData } = req.body;
   const note = db.prepare("SELECT id FROM notes WHERE id = ? AND user_id = ?").get(req.params.id, req.userId);
@@ -1262,12 +1286,17 @@ app.put("/api/notes/:id/drawing", authMiddleware, (req, res) => {
   if (drawingStrokes !== undefined) {
     // Vector strokes in the note's canonical coordinate space — the current format.
     let count = 0;
+    let pinned = 0;
     if (drawingStrokes !== null) {
       count = countStrokes(drawingStrokes);
       if (count === null) return res.status(400).json({ error: "Invalid strokes format" });
       if (count > MAX_STROKES) return res.status(413).json({ error: "Too many strokes" });
+      pinned = countPinnedNotes(drawingStrokes);
+      if (pinned === null) return res.status(400).json({ error: "Invalid pinned notes format" });
+      if (pinned > MAX_PINNED_NOTES) return res.status(413).json({ error: "Too many pinned notes" });
     }
-    const empty = !drawingStrokes || count === 0;
+    // A page carrying only pinned notes is not an empty overlay.
+    const empty = !drawingStrokes || (count === 0 && pinned === 0);
     const previous = db.prepare("SELECT drawing_strokes FROM notes WHERE id = ?").get(req.params.id);
     // Clearing a drawing is always worth being able to undo.
     snapshotNote(req.userId, req.params.id, req.deviceId, {