Patterns on the covers, a search box that is simply there, roomier margin notes

Four small things about the shape of the app.

Covers can be patterns as well as colours — ruled paper, graph paper,
pinstripe, bands, dots, cross-hatch, linen, washes, a ledger — drawn
entirely with CSS gradient layers. No image files, nothing to upload,
crisp at any size, and offline like everything else. A cover is stored as
an index into that list, so the new ones are appended and never inserted:
renumbering would silently repaint every notebook anyone already has.

Two things the patterns taught. One idea per cover: two crossed diagonals
meant as a chevron came out as noisy plaid at the size a cover is
actually read, and were replaced with plain bands. And the grid has to
scroll — with 27 covers the dialog ran past the bottom of a laptop screen
and took the Create button with it, which a check now holds at 1440x800.

The search box in a notebook is simply there now, and the button that
used to open it is gone. A magnifying glass cost a click and having to
remember that searching was possible at all; a search box is one line and
says for itself what it does.

Margin notes went from 208x74 to 288x112 — from three short lines to
about five. Three lines is a caption, not a remark on a passage, and the
space beside the page was sitting mostly empty.

And the notebook edit dialog was still part German, and would not say
what the server's default number of versions actually is. It names it
now, read from the server rather than written into the interface: it is
set with MAX_VERSIONS_PER_NOTE, and a hardcoded "50" would quietly start
lying the day that changed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-08-12 00:29:00 +02:00
1 parent 635a9632d1
commit 9e4677c70b
11 files changed
+262 -48

No files matched your search

+32 -3
View File
@@ -15,7 +15,7 @@ A self-hosted note-taking application with rich text editing, freehand drawing,
- **Image Attachments** — Pasted images are stored as deduplicated blobs, not inlined into the note
- **Freehand Drawing** — Pen, highlighter, eraser with adjustable thickness and color palette (20 colors, 7 pen sizes)
- **Undo/Redo** — Full history stack for drawing operations
- **Notebooks & Folders** — Create notebooks with custom gradient covers, organize notes by folder
- **Notebooks & Folders** — Covers in colour or pattern — ruled paper, graph paper, stripes, dots, weave — drawn in CSS, no image files
- **Star/Favorite** — Quick access to important notes
- **PDF Reading & Annotation** — Import a PDF, read it, select its text, draw on it, pin notes to individual passages, write notes beside it, and export it with or without your marks
- **Export** — Any note, notebook or the whole account as Markdown or PDF, entirely in the browser
@@ -314,6 +314,26 @@ bug they cover actually happened:
- `hasPendingWrites` must cover the debounce window, not just requests in flight
- v1 note bodies must migrate without losing task state or smuggling in markup
### Notebook covers
A cover is stored as an **index** into `COVERS` in
[`ui/constants.jsx`](frontend/src/ui/constants.jsx). Entries are therefore only
ever appended, never reordered: renumbering them would silently repaint every
notebook anyone already has.
The patterned ones are drawn entirely with CSS gradient layers — no image files,
nothing to upload, nothing to fetch. They stay crisp at any size and work offline
like the rest of the app. `background` takes a stack of layers, topmost first, so
each is a pattern laid over the colour beneath it.
They are deliberately faint: a cover is read at the size of a thumb with a title
across it, and anything louder fights the title. One idea per cover, too — two
crossed diagonals meant as a chevron came out as noisy plaid at that size and
were replaced with plain bands.
The grid scrolls. Without that the dialog runs past the bottom of a laptop screen
and takes the *Create* button with it, which a test now checks at 1440×800.
### Browser suites
The unit tests cover the data layer; these drive a real browser against a real
@@ -514,6 +534,11 @@ fresh device with nothing to search. After login a background pass backfills the
missing ones into IndexedDB, slowly enough to stay out of the way, indexing each
as it lands. Searching therefore also works offline.
The box sits above the note list, always, with nothing to open first. It was
behind a magnifying glass, which cost a click and having to remember that
searching was possible at all; a search box is one line and says for itself what
it does.
PDFs come after the notes in that pass. Their text is not derived from a note
body but stored with the file, by the device that imported it — see [The reading
happens on a device, never on the
@@ -897,7 +922,7 @@ its history on a change that is not to the note at all.
The panel beside a PDF is for notes about the document. A note that belongs to
*one paragraph* is a different thing — and a note that has to begin "on page 14,
third paragraph" has already lost its place. So a note can be pinned to a spot:
click **Randnotiz**, click the passage, write.
click **Pin note**, click the passage, write.
**The note is written beside the page, not on it.** Only a small numbered marker
sits on the document, with a hairline out to a card in the margin, level with the
@@ -906,8 +931,12 @@ is the one thing it must not do. Cards keep one height, so two notes close
together are laid out by pushing the second down until they no longer overlap;
the one being written in grows and rises above the rest.
The column is 288px wide and a card holds about five lines. It was 208 by 74 —
three short lines, which is a caption, not a remark — while the space beside the
page sat mostly empty.
**On a phone there is no margin.** A page narrow enough to read leaves no white
space beside it, and taking 200px for a column would make the document itself
space beside it, and taking a column that wide would make the document itself
unreadable. There, tapping a marker brings the note up from the bottom — over the
page, but only while it is open, within reach of a thumb, and with the passage
still visible above it.