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:
1 parent
635a9632d1
commit
9e4677c70b
11 files changed
+262
-48
No files matched your search
@@ -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.
|
||||
|
||||
Reference in new issue
Block a user