Docker/InkNote
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Take the paper back out, and quiet the surfaces around it

Browse Source 
The sheet was not what it wanted to be, so writing is plain text again: about 73
characters to the line, centred, no border and no shadow. The fixed page belongs
to the canvas — a stroke has to land in the same place on every screen, which
needs one agreed page — so it appears exactly when something is on it or about
to be: in Draw, or when the note already has a drawing. The cap lives in the
stylesheet rather than on a container, so it holds on a page as well as off one.

Emoji are gone from the note rows and the sidebar. They are drawn by the
operating system, so they looked different on every machine and were loud enough
that a row's picture caught the eye before its title did. Rows are tighter by
three pixels of padding.

The trash button no longer stands permanently in the danger colour beside the
star, which made the most destructive control the loudest thing on screen. It
sits behind a divider and turns red under the pointer, when it is about to be
used.

On a phone the toolbar's fourteen controls scrolled sideways, so the ones at the
end could only be reached by dragging the bar and nothing said they were there.
Nine remain, plus a menu holding the headings, quote, code and undo.

A new `sync` suite proves what was assumed: a PDF written on one device — the
document, the drawing and the pinned notes — reaches a second one. Two browser
contexts are two devices.

Both search suites read a row's title as the second line of its text, which only
worked while the icon was itself a text emoji; they read it by name now.

218 unit tests, 249 browser checks across twelve suites.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-08-11 15:57:22 +02:00
1 parent c12ffa250e
commit 830af6532a
13 files changed
+396 -155
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/editor/EditorToolbar.jsx
+148 -56
View File
@@ -56,6 +56,7 @@ const AtIcon = () => (
export function EditorToolbar({ editor, T, icons, compact, dark }) {
const [, force] = useState(0);
const [showTable, setShowTable] = useState(false);
const [showMore, setShowMore] = useState(false);
const [linkDialog, setLinkDialog] = useState(null);
// ProseMirror state changes do not go through React; subscribe so the active
@@ -80,6 +81,15 @@ export function EditorToolbar({ editor, T, icons, compact, dark }) {
return () => document.removeEventListener("pointerdown", close);
}, [showTable]);
useEffect(() => {
if (!showMore) return;
const close = (e) => {
if (!e.target.closest?.("[data-more-menu]")) setShowMore(false);
};
document.addEventListener("pointerdown", close);
return () => document.removeEventListener("pointerdown", close);
}, [showMore]);
if (!editor) return null;
const btn = (active) => ({
@@ -274,7 +284,91 @@ export function EditorToolbar({ editor, T, icons, compact, dark }) {
/>
)}
{!compact && (
{/* On a phone the rest goes behind one button.
*
* There were fourteen controls in a row that scrolled sideways, so the
* ones at the end could only be reached by dragging the bar — and nothing
* said they were there. A menu is one tap and shows what it holds. */}
{compact ? (
<div style={{ position: "relative" }} data-more-menu>
<button
style={btn(showMore)}
title="More"
data-toolbar-more={showMore ? "on" : "off"}
onClick={() => setShowMore((v) => !v)}
>
{icons.dots}
</button>
{showMore && (
<div
style={{
position: "absolute",
top: 36,
right: 0,
minWidth: 180,
background: T.toolbar,
border: `1px solid ${T.border}`,
borderRadius: 12,
padding: 6,
zIndex: 200,
boxShadow: "0 8px 20px rgba(0,0,0,.25)",
}}
>
{[
[
"Body text",
() => editor.chain().focus().setParagraph().run(),
editor.isActive("paragraph"),
],
[
"Heading 1",
() => editor.chain().focus().toggleHeading({ level: 1 }).run(),
editor.isActive("heading", { level: 1 }),
],
[
"Heading 2",
() => editor.chain().focus().toggleHeading({ level: 2 }).run(),
editor.isActive("heading", { level: 2 }),
],
[
"Heading 3",
() => editor.chain().focus().toggleHeading({ level: 3 }).run(),
editor.isActive("heading", { level: 3 }),
],
[null],
[
"Quote",
() => editor.chain().focus().toggleBlockquote().run(),
editor.isActive("blockquote"),
],
[
"Code block",
() => editor.chain().focus().toggleCodeBlock().run(),
editor.isActive("codeBlock"),
],
[null],
["Undo", () => editor.chain().focus().undo().run(), false],
["Redo", () => editor.chain().focus().redo().run(), false],
].map(([label, action, active], i) =>
label === null ? (
<div key={`d${i}`} style={{ height: 1, background: T.border, margin: "5px 2px" }} />
) : (
<button
key={label}
style={{ ...menuItem, color: active ? T.active : T.text }}
onClick={() => {
action();
setShowMore(false);
}}
>
{label}
</button>
)
)}
</div>
)}
</div>
) : (
<>
{divider}
<button
@@ -291,63 +385,61 @@ export function EditorToolbar({ editor, T, icons, compact, dark }) {
>
<CodeIcon />
</button>
{divider}
<select
value={
editor.isActive("heading", { level: 1 })
? "h1"
: editor.isActive("heading", { level: 2 })
? "h2"
: editor.isActive("heading", { level: 3 })
? "h3"
: "p"
}
onChange={(e) => {
const v = e.target.value;
if (v === "p") editor.chain().focus().setParagraph().run();
else
editor
.chain()
.focus()
.toggleHeading({ level: Number(v[1]) })
.run();
}}
style={{
border: `1px solid ${T.border}`,
borderRadius: 6,
padding: "3px 6px",
background: T.toolbar,
color: T.text,
fontSize: 11,
cursor: "pointer",
}}
>
<option value="p">Body</option>
<option value="h1">H1</option>
<option value="h2">H2</option>
<option value="h3">H3</option>
</select>
{divider}
<button
style={{ ...btn(false), opacity: editor.can().undo() ? 1 : 0.35 }}
title="Undo"
onClick={() => editor.chain().focus().undo().run()}
>
{icons.undo}
</button>
<button
style={{ ...btn(false), opacity: editor.can().redo() ? 1 : 0.35 }}
title="Redo"
onClick={() => editor.chain().focus().redo().run()}
>
{icons.redo}
</button>
</>
)}
{divider}
<select
value={
editor.isActive("heading", { level: 1 })
? "h1"
: editor.isActive("heading", { level: 2 })
? "h2"
: editor.isActive("heading", { level: 3 })
? "h3"
: "p"
}
onChange={(e) => {
const v = e.target.value;
if (v === "p") editor.chain().focus().setParagraph().run();
else
editor
.chain()
.focus()
.toggleHeading({ level: Number(v[1]) })
.run();
}}
style={{
border: `1px solid ${T.border}`,
borderRadius: 6,
padding: "3px 6px",
background: T.toolbar,
color: T.text,
fontSize: 11,
cursor: "pointer",
}}
>
<option value="p">Body</option>
<option value="h1">H1</option>
<option value="h2">H2</option>
<option value="h3">H3</option>
</select>
{divider}
<button
style={{ ...btn(false), opacity: editor.can().undo() ? 1 : 0.35 }}
title="Undo"
onClick={() => editor.chain().focus().undo().run()}
>
{icons.undo}
</button>
<button
style={{ ...btn(false), opacity: editor.can().redo() ? 1 : 0.35 }}
title="Redo"
onClick={() => editor.chain().focus().redo().run()}
>
{icons.redo}
</button>
</>
);
}
export default EditorToolbar;
frontend/src/editor/editor.css
+15 -16
View File
@@ -8,10 +8,10 @@
--ne-text: #1f2328;
--ne-muted: #656d76;
--ne-faint: #afb8c1;
--ne-border: #ded8cd;
--ne-border: #d0d7de;
--ne-accent: #0969da;
--ne-surface: #fbfaf7;
--ne-subtle: #f2efe8;
--ne-surface: #ffffff;
--ne-subtle: #f6f8fa;
}
.note-editor[data-theme="dark"] {
--ne-text: #e6edf3;
@@ -19,28 +19,27 @@
--ne-faint: #484f58;
--ne-border: #30363d;
--ne-accent: #388bfd;
--ne-surface: #161c24;
--ne-subtle: #1d242e;
--ne-surface: #0d1117;
--ne-subtle: #161b22;
}
.note-editor .ProseMirror {
/* About 73 characters to the line at this size — measured, not guessed. The
text used to run the full width of the pane, past 84, which is beyond the
point where the eye reliably finds the start of the next line. Capped here
rather than on the container so it holds on a page as well as off one. */
max-width: 527px;
margin-left: auto;
margin-right: auto;
outline: none;
color: var(--ne-text);
font-family: "Newsreader", Georgia, serif;
font-size: 16px;
line-height: 1.75;
/* A margin, the way a page has one. The old 24px let the text run to the very
edge of the sheet, which is the one thing paper never does. */
padding: 44px 56px 64px;
font-size: 15px;
line-height: 1.7;
padding: 20px 24px;
min-height: 100%;
word-break: break-word;
}
@media (max-width: 767px) {
.note-editor .ProseMirror {
padding: 22px 20px 40px;
}
}
.note-editor .ProseMirror > * + * {
margin-top: 0.6em;
}
frontend/src/features/notes/EditorPane.jsx
+17 -2
View File
@@ -214,10 +214,25 @@ export function EditorPane({
<button onClick={onOpenHistory} title="Version history" style={toolbarButton(T, T.faint)}>
{I.history}
</button>
<button onClick={onToggleStar} style={toolbarButton(T, note.starred ? "#f0b429" : T.faint)}>
<button
onClick={onToggleStar}
title={note.starred ? "Unstar" : "Star"}
style={toolbarButton(T, note.starred ? "#f0b429" : T.faint)}
>
{note.starred ? I.starFill : I.star}
</button>
<button onClick={onTrash} style={toolbarButton(T, T.danger)}>
{/* Set apart, and no longer painted red while doing nothing. Standing
permanently in the danger colour next to the star made the most
destructive control the loudest thing on the screen; it turns red
under the pointer, when it is about to be used. */}
<div style={{ width: 1, height: 18, background: T.borderLight, margin: "0 4px" }} />
<button
onClick={onTrash}
title="Move to Trash"
onMouseEnter={(e) => (e.currentTarget.style.color = T.danger)}
onMouseLeave={(e) => (e.currentTarget.style.color = T.faint)}
style={toolbarButton(T, T.faint)}
>
{I.trash}
</button>
</div>
frontend/src/features/notes/NoteEditor.jsx
+28 -34
View File
@@ -20,6 +20,7 @@ import {
sizeCanvas,
} from "../drawing/strokes.js";
import { COLORS } from "../../ui/constants.jsx";
import { I } from "../../ui/icons.jsx";
import { BacklinksPanel } from "../../ui/BacklinksPanel.jsx";
@@ -67,6 +68,15 @@ export function NoteEditor({
// new vector strokes so migrating a note never loses what was already drawn.
const legacyRaster = note.drawingData && !hideDrawing;
/* Whether this note needs a page at all.
*
* The fixed 3:4 stage exists for the canvas: a stroke has to land in the same
* place on every screen, which needs one agreed page. Writing needs no such
* thing, and paid for it with a bordered box and an empty page below two lines
* of text. So the page appears exactly when something is on it — or about to
* be — and plain text is simply text. */
const needsPage = mode === "draw" || hasStrokes || !!legacyRaster;
const commitStrokes = (next) => {
strokesRef.current = next;
setStrokes(next);
@@ -75,15 +85,6 @@ export function NoteEditor({
const T = useMemo(
() => ({
bg: dark ? "#0d1117" : "#ffffff",
/* The sheet.
*
* In daylight it is warm off-white — plain white next to a white toolbar
* is not a sheet, it is an absence of one. At night it is a raised surface
* rather than a white rectangle: a page that glows brighter than the room
* is what makes an app unusable in the evening, and "paper" in a dark room
* still means "the surface I write on", not "white". */
paper: dark ? "#1b2430" : "#fbfaf7",
paperEdge: dark ? "#333f4e" : "#e4dfd5",
toolbar: dark ? "#161b22" : "#f6f8fa",
border: dark ? "#30363d" : "#d0d7de",
text: dark ? "#e6edf3" : "#1f2328",
@@ -163,13 +164,7 @@ export function NoteEditor({
const mobile = window.innerWidth < 768;
setIsMobileViewport(mobile);
const sidePad = mobile ? 10 : 28;
/* How wide a sheet gets.
*
* With 56px of inner margin this leaves a text column of about 68
* characters at the body size — measured, not guessed. The old 760 ran to
* nearly 90, past the width at which the eye reliably finds the start of
* the next line, and the single biggest reason the surface read badly. */
const desktopMax = 620;
const desktopMax = 760;
const minW = mobile ? 220 : 320;
const maxAllowed = Math.max(220, W - sidePad * 2);
const targetW = mobile ? maxAllowed : Math.min(desktopMax, maxAllowed);
@@ -460,9 +455,11 @@ export function NoteEditor({
* width a property of the window, which is what it always looked like. */
flex: 1,
minWidth: 0,
// The desk the sheet lies on, a touch darker than the sheet so the
// shadow has something to fall onto.
background: isMobileViewport ? T.paper : dark ? "#0b0f14" : "#eceae5",
background: isMobileViewport
? T.bg
: dark
? "linear-gradient(180deg,#0f141b 0%,#0d1117 60%)"
: "linear-gradient(180deg,#f8fafd 0%,#eef3f8 70%)",
}}
>
{/* Main toolbar */}
@@ -671,25 +668,22 @@ export function NoteEditor({
<div
style={{
position: "relative",
width: stageSize.w,
minHeight: stageSize.h,
// Centred. It used to sit 28px from the left and stop short of the
// right, so the margins were visibly unequal.
// Without a page the column is as wide as it needs to be to read
// comfortably, and centred; with one it is the canvas's page.
// The text caps its own width in the stylesheet, so this is only
// the page when there is one.
width: needsPage ? stageSize.w : "100%",
minHeight: needsPage ? stageSize.h : undefined,
margin: "0 auto",
background: T.paper,
border: isMobileViewport ? "none" : `1px solid ${T.paperEdge}`,
borderRadius: isMobileViewport ? 0 : 3,
// Paper lies on something; a sheet with no shadow is a panel.
boxShadow: isMobileViewport
? "none"
: dark
? "0 10px 30px rgba(0,0,0,0.45)"
: "0 10px 28px rgba(60,50,30,0.13)",
background: needsPage ? T.bg : "transparent",
border: needsPage && !isMobileViewport ? `1px solid ${T.border}` : "none",
borderRadius: needsPage && !isMobileViewport ? 14 : 0,
boxShadow: needsPage && !isMobileViewport ? "0 16px 36px rgba(0,0,0,0.14)" : "none",
}}
>
<div
style={{
minHeight: stageSize.h,
minHeight: needsPage ? stageSize.h : undefined,
width: "100%",
pointerEvents: mode === "text" ? "auto" : "none",
}}
@@ -697,7 +691,7 @@ export function NoteEditor({
<EditorSurface
editor={textEditor}
dark={dark}
minHeight={stageSize.h}
minHeight={needsPage ? stageSize.h : 0}
onOpenNote={onOpenNote}
resolveLinkLabel={resolveLinkLabel}
/>
frontend/src/features/notes/NoteList.jsx
+9 -6
View File
@@ -524,7 +524,9 @@ export function NoteList({
padding: 30,
}}
>
<div style={{ fontSize: 36 }}>{isTrashView ? "🗑️" : "📝"}</div>
<div style={{ display: "flex", opacity: 0.5, transform: "scale(2.2)", marginBottom: 12 }}>
{isTrashView ? I.trash : I.note}
</div>
<div style={{ fontSize: 13, textAlign: "center" }}>
{isTrashView ? "Trash is empty" : "No notes yet"}
</div>
@@ -603,7 +605,7 @@ export function NoteList({
display: "flex",
flexDirection: "column",
width: "100%",
padding: "12px 14px",
padding: "9px 12px",
borderRadius: 10,
border: `1px solid ${activeNote === note.id ? T.accent + "55" : "transparent"}`,
background: activeNote === note.id ? T.accentSoft : "transparent",
@@ -621,10 +623,11 @@ export function NoteList({
width: "100%",
}}
>
<span style={{ fontSize: 13 }}>
{note.trashed ? "🗑️" : note.type === "pdf" ? "📄" : "📝"}
<span style={{ display: "flex", color: T.faint, flexShrink: 0 }}>
{note.trashed ? I.trash : note.type === "pdf" ? I.pdf : I.note}
</span>
<span
data-note-title
style={{
fontSize: 13,
fontWeight: 600,
@@ -638,7 +641,7 @@ export function NoteList({
{note.title}
</span>
{note.starred && !note.trashed && (
<span style={{ color: "#f0b429", fontSize: 11 }}>⭐</span>
<span style={{ display: "flex", color: "#f0b429" }}>{I.starFill}</span>
)}
</div>
{snippet && (
@@ -657,7 +660,7 @@ export function NoteList({
{snippet}
</div>
)}
<div style={{ fontSize: 10, color: T.faint, marginTop: 3 }}>
<div style={{ fontSize: 10.5, color: T.faint, marginTop: 3 }}>
{fmtDate(note.updatedAt)}
</div>
</button>
frontend/src/ui/Sidebar.jsx
+2 -2
View File
@@ -164,7 +164,7 @@ export function Sidebar({
onClick={() => onSelectFolder("dashboard")}
style={{ ...folderButton(T, activeFolder === "dashboard"), padding: "9px 12px", fontWeight: 600 }}
>
<span style={{ fontSize: 15 }}>📚</span>
<span style={{ display: "flex", color: "inherit" }}>{I.books}</span>
<span>Dashboard</span>
</button>
</div>
@@ -176,7 +176,7 @@ export function Sidebar({
onClick={() => onSelectFolder(f.id)}
style={folderButton(T, activeFolder === f.id)}
>
<span style={{ fontSize: 14 }}>{f.icon}</span>
<span style={{ display: "flex", color: "inherit" }}>{I[f.icon]}</span>
<span>{f.name}</span>
{f.id === "all" && <span style={countBadge(T, T.faint)}>{activeNotes.length}</span>}
{f.id === "trash" && trashedCount > 0 && (
frontend/src/ui/constants.jsx
+6 -3
View File
@@ -40,8 +40,11 @@ export const COVERS = [
{ bg: "linear-gradient(135deg,#1f1c2c,#928dab)", spine: "#15131f", accent: "#b39ddb" },
{ bg: "linear-gradient(135deg,#654ea3,#eaafc8)", spine: "#4e3c7e", accent: "#f8bbd0" },
];
/* 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. */
export const DEFAULT_FOLDERS = [
{ id: "all", name: "All Notes", icon: "📋" },
{ id: "starred", name: "Starred", icon: "⭐" },
{ id: "trash", name: "Trash", icon: "🗑️" },
{ id: "all", name: "All Notes", icon: "stack" },
{ id: "starred", name: "Starred", icon: "star" },
{ id: "trash", name: "Trash", icon: "trash" },
];
frontend/src/ui/icons.jsx
+62
View File
@@ -506,6 +506,68 @@ export const I = {
<line x1="12" y1="3" x2="12" y2="15" />
</svg>
),
/* Line icons for the places that used to carry emoji.
*
* Emoji are drawn by the operating system: they look different on every
* machine, sit at a different baseline, and are loud — a row's picture caught
* the eye before its title did. These match the stroke weight of everything
* else here. */
note: (
<svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
<polyline points="14 3 14 8 19 8" />
<line x1="9" y1="13" x2="15" y2="13" />
<line x1="9" y1="17" x2="13" y2="17" />
</svg>
),
books: (
<svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
<line x1="9" y1="6" x2="16" y2="6" />
</svg>
),
stack: (
<svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polygon points="12 2 2 7 12 12 22 7 12 2" />
<polyline points="2 17 12 22 22 17" />
<polyline points="2 12 12 17 22 12" />
</svg>
),
dots: (
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<circle cx="5" cy="12" r="1.7" />
<circle cx="12" cy="12" r="1.7" />
<circle cx="19" cy="12" r="1.7" />
</svg>
),
pin: (
<svg
width="15"