feat(sidebar): de faste visninger kan sorteres, og rækkefølgen følger kontoen

I dag, Kommende, Venter og Indbakken kan trækkes i den rækkefølge, man vil have
dem. På kontoen frem for i browseren: sidebjælkens bredde er en kendsgerning om
skærmen, og svaret på en telefon er ikke svaret på en skærm — men hvilken
rækkefølge man vil have dem i, er en kendsgerning om personen.

En liste af nøgler frem for et tal pr. visning. Ukendte nøgler droppes og
manglende føjes til sidst, så en visning kan tilføjes eller fjernes uden at
strande nogens rækkefølge — hvilket allerede er sket én gang, da Færdige
forlod menuen.

To ting, prøverne fandt undervejs, og begge var mine:

Rækken som trækgreb gjorde alt indeni trækbart, og sidebjælken er allerede
modtager for opgaver — en opgave trukket til I dag holdt op med at lande, fordi
rækken havde taget gestussen. Et lille greb tager ingenting, før man griber det.
Og drop-håndteringen slugte begivenheden, før den tjekkede, om den overhovedet
var en menuflytning.

Migration 0019.

Co-Authored-By: Claude Opus 5 <[email protected]>

.gitignore

@@ -65,3 +65,4 @@ node_modules.nosync/
 # address — a map of one person's setup, which does not belong in a public repo.
 # Kept on disk because it is how a session hands over to the next one.
 HANDOFF.md
+NOTES-PLAN.md

docs/configuration.md

@@ -55,6 +55,36 @@ One registration serves every user on the instance; each person authorises their
 own mailbox from **Settings → Gmail**. The redirect URI is derived from
 `VERDANDE_BASE_URL`, so it cannot drift out of step with what you registered.
 
+## Secrets
+
+| Variable | Default | What it does |
+|---|---|---|
+| `VERDANDE_SECRET_KEY` | — | Encrypts the mail tokens and mailbox passwords in the database. 32 bytes of base64. |
+
+Mail tokens and [mailbox](mailboxes.md) passwords are encrypted at rest, and the
+key does not live in the database. That is the whole point: **backups can be
+downloaded through the interface**, so a copy that ends up somewhere it should
+not would otherwise open your mail.
+
+Leave the variable empty and verdande writes a key to `secret.key` in the data
+directory on first start, mode `0600`. Backups are a `VACUUM INTO` of the
+database alone, so the key file is not in them.
+
+Generate one yourself if you would rather keep it out of the volume entirely:
+
+```
+openssl rand -base64 32
+```
+
+!!! warning "Lose the key and the mailboxes must be reconnected"
+    Nothing else is lost — tasks, projects, files and history are not encrypted —
+    but a token that cannot be decrypted cannot be used, and there is no way back
+    from a key that is gone. If you restore a database somewhere new, bring
+    `secret.key` with it, or set `VERDANDE_SECRET_KEY` to the same value.
+
+A database written before there was a key is read as it stands and encrypted the
+next time each value is written, so turning this on costs nobody a reconnection.
+
 ## Update checks
 
 | Variable | Default | What it does |
@@ -64,9 +94,13 @@ own mailbox from **Settings → Gmail**. The redirect URI is derived from
 | `VERDANDE_PANEL_TOKEN` | — | An API token from that panel, belonging to somebody with control of this server. |
 | `VERDANDE_PANEL_SERVER_ID` | — | Which server to restart — the id in the panel's URL. |
 
-All three together let **Indstillinger → Notifikationer** restart this instance,
+All three together let **Settings → Notifications** restart this instance,
 which is also how it picks up a new version: a container cannot replace its own
-image, so the panel recreates it and pulls `:latest` on the way. Any one of the
+image, so the panel recreates it and pulls `:latest` on the way. The request asks
+the panel for a *scheduled* restart rather than an immediate one — an immediate
+one is carried out while the request is still open, and stopping the container
+kills the very process waiting for the answer, so the panel never gets to the
+half that starts it again. Any one of the
 three alone does nothing, and the page names the ones that are missing.
 
 The token is a panel credential with control over that server. Anybody who can

docs/mailboxes.md

@@ -0,0 +1,87 @@
+# Mailboxes
+
+Star a mail and it becomes a task.
+
+This is the other direction from [mail to task](mail.md): instead of forwarding
+something, Verdande reads a mailbox you connect and makes a task out of anything
+you have flagged. Nothing else in the mailbox is touched, and nothing is ever
+sent.
+
+Each mailbox belongs to the person who connected it. Two people on one instance
+connect their own and see only their own — there is no shared inbox and no
+administrator who can read yours.
+
+## Gmail
+
+**Settings → Integrations → Gmail → Connect.**
+
+Gmail needs an OAuth client, which is the instance's registration with Google
+rather than anybody's account — see [Configuration](configuration.md#gmail).
+Once it is set up, each person connects their own mailbox through it.
+
+Choose what makes a task:
+
+| Trigger | What it reads |
+|---|---|
+| Starred | Anything you have starred |
+| Label | Anything carrying a label you name |
+
+!!! note "The app stays Internal if your client is Internal"
+    An OAuth client registered as *Internal* in a Google Workspace can only be
+    used by accounts in that workspace. A personal `@gmail.com` address will be
+    refused with `org_internal`, and that is the client working as configured.
+    Switching to *External* means refresh tokens that expire every seven days
+    until Google has verified the app — for one personal account, forwarding to
+    your [mail-to-task address](mail.md) is the shorter road.
+
+## iCloud, Fastmail and anything else over IMAP
+
+**Settings → Integrations → Mailboxes → Add a mailbox.**
+
+You need three things:
+
+| Field | Example |
+|---|---|
+| IMAP server | `imap.mail.me.com:993` |
+| Username | your address |
+| App password | not your ordinary password — see below |
+
+The connection is tested before it is saved. A mailbox that cannot be read is
+refused while you are still looking at the form, rather than accepted and then
+failing quietly every ten minutes.
+
+Flag a message — the flag, not unread — and it becomes a task on the next sweep.
+Unread is a state you are still using yourself, and a sync that consumed it would
+be taking something away.
+
+### App passwords
+
+Every host worth naming issues a separate password for applications, which you
+can withdraw on its own without changing the one you sign in with. Use that.
+
+- **iCloud** — [appleid.apple.com](https://appleid.apple.com) → Sign-In and
+  Security → App-Specific Passwords
+- **Fastmail** — Settings → Privacy & Security → Integrations → New app password
+
+The password is [encrypted at rest](configuration.md#secrets), and it is never
+returned by the API once saved.
+
+### Office 365 does not work here
+
+Microsoft has closed IMAP to passwords; it wants its own OAuth flow. There is no
+app password that will get you in, and a mailbox pointed at `outlook.office365.com`
+will be refused. Forward to your [mail-to-task address](mail.md) instead.
+
+## How often
+
+Every ten minutes, in the background. **Fetch now** does it immediately, which is
+for when you have just connected something and want to see it work.
+
+A run reads at most twenty-five messages, so a mailbox with years of flagged mail
+in it fills up over several sweeps rather than in one.
+
+## Disconnecting
+
+**Disconnect** on the mailbox. The tasks it made stay — they are your work now,
+not the mailbox's. Nothing is read after that, and the stored credential is
+deleted rather than merely disabled.

docs/openapi.yaml

@@ -263,6 +263,36 @@ paths:
         "204": { description: Saved. }
         "400": { $ref: "#/components/responses/BadRequest" }
 
+  /api/v1/auth/nav-order:
+    put:
+      tags: [auth]
+      summary: The order of the fixed views in the sidebar.
+      description: |
+        I dag, Kommende, Venter and the inbox, in whatever order this person wants
+        them. On the account rather than in the browser: which order you want them
+        in is a fact about you and should be the same on the phone as on the laptop.
+
+        A list of keys rather than a number per view. The set of views changes with
+        the program, and a key that no longer exists costs nothing — the sidebar
+        draws what it recognises and appends anything new at the end, which is what
+        makes adding a view later not a migration. An empty list means the order the
+        program ships with.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                order:
+                  type: array
+                  maxItems: 20
+                  items: { type: string }
+                  example: ["inbox", "today", "upcoming", "delegated"]
+      responses:
+        "204": { description: Saved. }
+        "400": { $ref: "#/components/responses/BadRequest" }
+
   /api/v1/auth/me:
     get:
       tags: [auth]
@@ -2477,6 +2507,116 @@ paths:
                   created: { type: integer }
         "502": { $ref: "#/components/responses/Upstream" }
 
+  /api/v1/notes:
+    get:
+      tags: [notes]
+      summary: Notes — listed, narrowed to a project, or searched.
+      description: >
+        With no parameters: the notes filed under no project, which are the
+        person's own. With `project`: that project's, which needs read access to
+        it. With `q`: a full-text search across every note they can see, matching
+        Danish spelling either way round — "grøn" finds "gron" and the reverse.
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: project
+          in: query
+          schema: { type: string }
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  notes:
+                    type: array
+                    items: { $ref: "#/components/schemas/Note" }
+    post:
+      tags: [notes]
+      summary: Write a note.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema: { $ref: "#/components/schemas/NoteInput" }
+      responses:
+        "201":
+          description: Written
+          content:
+            application/json:
+              schema: { $ref: "#/components/schemas/Note" }
+        "403": { $ref: "#/components/responses/Forbidden" }
+
+  /api/v1/notes/{noteID}:
+    parameters:
+      - name: noteID
+        in: path
+        required: true
+        schema: { type: string }
+    get:
+      tags: [notes]
+      summary: One note.
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema: { $ref: "#/components/schemas/Note" }
+        "404": { $ref: "#/components/responses/NotFound" }
+    patch:
+      tags: [notes]
+      summary: Change a note. Every field is optional; what is sent is what changes.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema: { $ref: "#/components/schemas/NoteInput" }
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema: { $ref: "#/components/schemas/Note" }
+        "404": { $ref: "#/components/responses/NotFound" }
+    delete:
+      tags: [notes]
+      summary: Put a note in the trash. It can be brought back.
+      responses:
+        "204": { description: Deleted }
+        "404": { $ref: "#/components/responses/NotFound" }
+
+  /api/v1/notes/linking/{kind}/{targetID}:
+    get:
+      tags: [notes]
+      summary: What has been written about this.
+      description: >
+        The backwards direction. A task's id gives every note that mentions it,
+        a project's name gives every note carrying that #tag.
+      parameters:
+        - name: kind
+          in: path
+          required: true
+          schema: { type: string, enum: [task, note, project] }
+        - name: targetID
+          in: path
+          required: true
+          schema: { type: string }
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  notes:
+                    type: array
+                    items: { $ref: "#/components/schemas/Note" }
+        "400": { $ref: "#/components/responses/BadRequest" }
+
   /api/v1/mailboxes:
     get:
       tags: [integrations]
@@ -3162,6 +3302,34 @@ components:
                 items: { type: string }
 
   schemas:
+    Note:
+      type: object
+      description: A page of Markdown. The body is the stored form and the exported form.
+      properties:
+        id: { type: string }
+        project_id: { type: string }
+        title: { type: string, description: "Taken from the first line when not given." }
+        body: { type: string, description: Markdown }
+        pinned: { type: boolean }
+        created_at: { type: string, format: date-time }
+        updated_at: { type: string, format: date-time }
+        links:
+          type: array
+          description: What the body points at, read out of the text on the way in.
+          items:
+            type: object
+            properties:
+              kind: { type: string, enum: [task, note, project] }
+              target_id: { type: string }
+
+    NoteInput:
+      type: object
+      properties:
+        project_id: { type: string, description: "Empty files it under no project." }
+        title: { type: string }
+        body: { type: string }
+        pinned: { type: boolean }
+
     Mailbox:
       type: object
       description: One connected mailbox. The password and any token are never returned.

docs/quick-add.md

@@ -70,7 +70,22 @@ an error message and a lost thought.
     write it, and guessing month-first would silently move a date by months rather
     than failing visibly.
 
-## The shortcuts
+## Just start typing
 
-Press ++q++ to jump to the quick-add box from anywhere, ++t++ for Today, ++u++ for
-Upcoming, ++cmd+k++ to search, and ++question++ for the full list.
+There is no shortcut to remember. Press a letter anywhere in the app and you are
+writing a task, with the letter you pressed already in the field. The thought does
+not have to survive a journey to find somewhere to put it.
+
+It only fires when nothing else has focus — a key pressed at a field, a button or
+a link belongs to that thing.
+
+Under the field is a line saying what the parser reads: `#` project, `/` section,
+`@` label, `p1` priority, and an example date. It appears while you are typing,
+which is the one moment a placeholder cannot help you.
+
+++cmd+k++ opens the palette — search, and navigation to anywhere in the app.
+
+!!! note "The single letters used to navigate"
+    ++t++ for Today and ++u++ for Upcoming are gone. One keyboard cannot both
+    spell *tal med Anders* and jump to Today on the same ++t++, and capturing is
+    the thing done fifty times a day. The palette does the rest.

docs/signing-in.md

@@ -0,0 +1,39 @@
+# Signing in
+
+Three ways in, and you can have all of them at once.
+
+## A password
+
+What the first account is created with. Nothing is emailed, nothing is registered
+anywhere: the first person to open a fresh instance creates the administrator
+account, and after that people arrive by invite link.
+
+## A code on top of it
+
+**Settings → Account → Two-factor.** An ordinary TOTP secret — any authenticator
+app reads the QR code. Once it is on, the password alone is not enough.
+
+Recovery codes are shown once, when you turn it on. They are the way back if the
+phone is gone, and they are not shown again.
+
+## A passkey
+
+**Settings → Account → Passkeys → Add a passkey.**
+
+A key on a device instead of a secret in your head. The private half never leaves
+the device — a phone's secure element, a laptop's keychain, a hardware key — and
+the signature is bound to the address it was made for, so a convincing copy of the
+sign-in page at a different address gets nothing.
+
+Give each one a name you will recognise later. *min bærbare* is what makes a list
+of keys reviewable, and a list nobody can read is a list nobody revokes from.
+
+Passkeys need the address in `VERDANDE_BASE_URL` to be a hostname. Browsers refuse
+to make one for a bare IP address, so an instance reached at `http://192.168.1.10:8080`
+will show the passkey section as unavailable rather than failing at the moment
+somebody tries.
+
+!!! note "One is enough, two is better"
+    Lose the only device holding your only passkey and you are back to the
+    password. Keep the password, or register a second key — a phone as well as a
+    laptop.

internal/httpapi/auth_handlers.go

@@ -32,6 +32,7 @@ type userJSON struct {
 	// about the work and not about the screen — the sidebar's width is the
 	// opposite case and stays in localStorage.
 	SidebarCollapsed []string `json:"sidebar_collapsed"`
+	NavOrder         []string `json:"nav_order"`
 	CreatedAt        string   `json:"created_at"`
 }
 
@@ -42,10 +43,14 @@ func toUserJSON(u *store.User) userJSON {
 	if collapsed == nil {
 		collapsed = []string{}
 	}
+	order := u.NavOrder
+	if order == nil {
+		order = []string{}
+	}
 	return userJSON{
 		ID: u.ID, Email: u.Email, Name: u.Name, AvatarColor: u.AvatarColor,
 		Timezone: u.Timezone, Locale: u.Locale, IsAdmin: u.IsAdmin,
-		TOTPEnabled: u.TOTPEnabled, SidebarCollapsed: collapsed,
+		TOTPEnabled: u.TOTPEnabled, SidebarCollapsed: collapsed, NavOrder: order,
 		CreatedAt: u.CreatedAt.Format(time.RFC3339),
 	}
 }
@@ -83,6 +88,30 @@ func (s *Server) handleSetSidebarSections(w http.ResponseWriter, r *http.Request
 	w.WriteHeader(http.StatusNoContent)
 }
 
+// handleSetNavOrder records the order of the fixed views in the sidebar.
+//
+// Its own route for the same reason as the folds: this writes on every drop, and
+// sharing the profile's path would make a reorder send a name and a timezone it
+// was never asked to change.
+func (s *Server) handleSetNavOrder(w http.ResponseWriter, r *http.Request) {
+	var req struct {
+		Order []string `json:"order"`
+	}
+	if err := decodeJSON(w, r, &req); err != nil {
+		return
+	}
+	if len(req.Order) > 20 {
+		writeError(w, http.StatusBadRequest, CodeBadRequest, "too many entries")
+		return
+	}
+	user := userFrom(r.Context())
+	if err := s.db.SetNavOrder(r.Context(), user.ID, req.Order); err != nil {
+		s.storeError(w, r, "set nav order", err)
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}
+
 // --- sign in -----------------------------------------------------------------
 
 type loginRequest struct {

internal/httpapi/mcp_handlers.go

@@ -101,6 +101,7 @@ func (s *Server) buildMCP() *mcp.Server {
 		}, "task_id", "body"),
 	}, s.mcpAddComment)
 
+	s.registerNoteTools(m)
 	return m
 }
 
@@ -496,3 +497,176 @@ func clamp(value, fallback, max int) int {
 	}
 	return value
 }
+
+// --- notes ---------------------------------------------------------------------
+
+// registerNoteTools adds the note half of the MCP surface.
+//
+// Separate from the task tools for one reason worth stating: this is how a note
+// gets in from somewhere else. Apple Notes has no export worth the name, but a
+// model running on the machine can read Notes.app and write what it finds through
+// these — one note at a time, with the text as Markdown. That is a migration
+// nobody has to build a parser for.
+func (s *Server) registerNoteTools(m *mcp.Server) {
+	m.Register(mcp.Tool{
+		Name: "search_notes",
+		Description: "Find notes by text. Matches title and body, and is generous about " +
+			"Danish spelling — searching \"gron\" finds \"grøn\", and the other way round. " +
+			"With no query it returns the most recent notes. This is the tool for " +
+			"\"what did I write about the tax return\" or \"find my note on the kitchen\".",
+		InputSchema: mcp.Schema(map[string]any{
+			"text":  mcp.Str("Words to look for in the title and body."),
+			"limit": mcp.Int("How many to return. Defaults to 25, maximum 100."),
+		}),
+	}, s.mcpSearchNotes)
+
+	m.Register(mcp.Tool{
+		Name: "create_note",
+		Description: "Write a note. The body is Markdown and is stored as typed — it is " +
+			"also exactly what an export produces, so nothing is converted and nothing " +
+			"is lost. Two things in the text are read out of it and become links: " +
+			"`#Projekt` files the note against that project, so it appears on the " +
+			"project's page without anybody filing it there, and `[[Another note]]` " +
+			"links to a note by its title. Use this to bring notes in from elsewhere — " +
+			"Apple Notes, OneNote, a folder of Markdown — one call per note.",
+		InputSchema: mcp.Schema(map[string]any{
+			"body":       mcp.Str("The note as Markdown. #Projekt and [[note]] become links."),
+			"title":      mcp.Str("A title. Left out, the first line of the body becomes it."),
+			"project_id": mcp.Str("File it under a project by id. Usually unnecessary — a #tag in the body does the same and is what a person would type."),
+			"pinned":     mcp.Bool("Keep it at the top of the list."),
+		}),
+	}, s.mcpCreateNote)
+
+	m.Register(mcp.Tool{
+		Name: "update_note",
+		Description: "Change a note. Only the fields given are changed. Sending `body` " +
+			"replaces the whole text, so read the note first if you mean to add to it — " +
+			"and the links are read again from the new text, so a #tag removed is a link " +
+			"removed.",
+		InputSchema: mcp.Schema(map[string]any{
+			"note_id": mcp.Str("Which note."),
+			"body":    mcp.Str("The whole new text, as Markdown."),
+			"title":   mcp.Str("A new title."),
+			"pinned":  mcp.Bool("Pin it or unpin it."),
+		}),
+	}, s.mcpUpdateNote)
+}
+
+func (s *Server) mcpSearchNotes(ctx context.Context, userID string, args json.RawMessage) (any, error) {
+	var params struct {
+		Text  string `json:"text"`
+		Limit int    `json:"limit"`
+	}
+	_ = json.Unmarshal(args, &params)
+
+	limit := params.Limit
+	if limit <= 0 || limit > 100 {
+		limit = 25
+	}
+
+	var notes []store.Note
+	var err error
+	if strings.TrimSpace(params.Text) == "" {
+		notes, err = s.db.LooseNotes(ctx, userID)
+	} else {
+		notes, err = s.db.SearchNotes(ctx, params.Text, limit)
+	}
+	if err != nil {
+		return nil, err
+	}
+
+	// The same filter the HTTP surface applies, for the same reason: a search must
+	// not become a way to read what you cannot open.
+	out := make([]map[string]any, 0, len(notes))
+	for _, n := range notes {
+		if !s.mcpMayRead(ctx, &n, userID) {
+			continue
+		}
+		out = append(out, map[string]any{
+			"id": n.ID, "title": n.Title, "body": n.Body,
+			"project_id": n.ProjectID, "updated_at": n.UpdatedAt,
+		})
+		if len(out) >= limit {
+			break
+		}
+	}
+	return map[string]any{"notes": out, "count": len(out)}, nil
+}
+
+func (s *Server) mcpMayRead(ctx context.Context, n *store.Note, userID string) bool {
+	if n.ProjectID == "" {
+		return n.CreatedBy == userID
+	}
+	_, err := store.RequireProjectRole(ctx, s.db, n.ProjectID, userID, store.RoleViewer)
+	return err == nil
+}
+
+func (s *Server) mcpCreateNote(ctx context.Context, userID string, args json.RawMessage) (any, error) {
+	var params struct {
+		Body      string `json:"body"`
+		Title     string `json:"title"`
+		ProjectID string `json:"project_id"`
+		Pinned    bool   `json:"pinned"`
+	}
+	_ = json.Unmarshal(args, &params)
+
+	n := &store.Note{
+		CreatedBy: userID,
+		Title:     params.Title,
+		Body:      params.Body,
+		Pinned:    params.Pinned,
+	}
+	if params.ProjectID != "" {
+		if _, err := store.RequireProjectRole(ctx, s.db, params.ProjectID, userID, store.RoleEditor); err != nil {
+			return nil, err
+		}
+		n.ProjectID = params.ProjectID
+	}
+	if err := s.db.SaveNote(ctx, n); err != nil {
+		return nil, err
+	}
+
+	// The links are reported back rather than left silent. A note whose #tag was
+	// misspelt looks identical to one whose tag landed, and in a chat nobody sees
+	// the row that was written.
+	return map[string]any{
+		"id": n.ID, "title": n.Title, "links": n.Links,
+	}, nil
+}
+
+func (s *Server) mcpUpdateNote(ctx context.Context, userID string, args json.RawMessage) (any, error) {
+	var params struct {
+		NoteID string  `json:"note_id"`
+		Body   *string `json:"body"`
+		Title  *string `json:"title"`
+		Pinned *bool   `json:"pinned"`
+	}
+	_ = json.Unmarshal(args, &params)
+
+	n, err := s.db.Note(ctx, params.NoteID)
+	if err != nil {
+		return nil, err
+	}
+	if n == nil || !s.mcpMayRead(ctx, n, userID) {
+		return nil, fmt.Errorf("no such note")
+	}
+	if n.ProjectID != "" {
+		if _, err := store.RequireProjectRole(ctx, s.db, n.ProjectID, userID, store.RoleEditor); err != nil {
+			return nil, err
+		}
+	}
+
+	if params.Body != nil {
+		n.Body = *params.Body
+	}
+	if params.Title != nil {
+		n.Title = *params.Title
+	}
+	if params.Pinned != nil {
+		n.Pinned = *params.Pinned
+	}
+	if err := s.db.SaveNote(ctx, n); err != nil {
+		return nil, err
+	}
+	return map[string]any{"id": n.ID, "title": n.Title, "links": n.Links}, nil
+}

internal/httpapi/notes_handlers.go

@@ -0,0 +1,215 @@
+package httpapi
+
+import (
+	"net/http"
+	"strings"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/kristianwind/verdande/internal/store"
+)
+
+// Notes.
+//
+// Access follows the project, because that is where a note lives: a note in a
+// shared project is readable by everybody who can read the project and writable
+// by an editor. A note with no project is its author's alone — the same answer a
+// task in the inbox gets, arrived at the same way rather than by a rule of its own.
+
+// mayReadNote reports whether this person may see the note, and mayWriteNote
+// whether they may change it. Split, because a viewer on a shared project can do
+// the first and not the second.
+func (s *Server) mayTouchNote(r *http.Request, n *store.Note, role store.Role) bool {
+	user := userFrom(r.Context())
+	if n.ProjectID == "" {
+		return n.CreatedBy == user.ID
+	}
+	_, err := store.RequireProjectRole(r.Context(), s.db, n.ProjectID, user.ID, role)
+	return err == nil
+}
+
+func (s *Server) handleListNotes(w http.ResponseWriter, r *http.Request) {
+	user := userFrom(r.Context())
+
+	// Searching and listing are the same endpoint, because they answer the same
+	// question with different words. ?q= searches; ?project= narrows; neither gives
+	// the loose ones.
+	if q := strings.TrimSpace(r.URL.Query().Get("q")); q != "" {
+		found, err := s.db.SearchNotes(r.Context(), q, 50)
+		if err != nil {
+			s.internal(w, r, "search notes", err)
+			return
+		}
+		writeJSON(w, http.StatusOK, map[string]any{"notes": s.readable(r, found)})
+		return
+	}
+
+	if projectID := r.URL.Query().Get("project"); projectID != "" {
+		if _, err := store.RequireProjectRole(r.Context(), s.db, projectID, user.ID, store.RoleViewer); err != nil {
+			s.storeError(w, r, "notes in project", err)
+			return
+		}
+		found, err := s.db.NotesInProject(r.Context(), projectID)
+		if err != nil {
+			s.internal(w, r, "notes in project", err)
+			return
+		}
+		writeJSON(w, http.StatusOK, map[string]any{"notes": found})
+		return
+	}
+
+	// Everything they can see, not only the loose ones. Filing a note in a project
+	// is how it gets shared, and a list that dropped it at that moment made sharing
+	// look like deleting.
+	found, err := s.db.AllNotes(r.Context(), user.ID)
+	if err != nil {
+		s.internal(w, r, "list notes", err)
+		return
+	}
+	writeJSON(w, http.StatusOK, map[string]any{"notes": found})
+}
+
+// readable drops what this person may not see.
+//
+// Filtered after the search rather than inside it: FTS5 answers about text, and
+// teaching the index about roles would put an access rule in a place nobody would
+// think to look when it was wrong.
+func (s *Server) readable(r *http.Request, notes []store.Note) []store.Note {
+	out := make([]store.Note, 0, len(notes))
+	for _, n := range notes {
+		if s.mayTouchNote(r, &n, store.RoleViewer) {
+			out = append(out, n)
+		}
+	}
+	return out
+}
+
+func (s *Server) handleGetNote(w http.ResponseWriter, r *http.Request) {
+	n, err := s.db.Note(r.Context(), chi.URLParam(r, "noteID"))
+	if err != nil {
+		s.internal(w, r, "get note", err)
+		return
+	}
+	// The same answer for "no such note" and "not yours", so an id cannot be probed.
+	if n == nil || !s.mayTouchNote(r, n, store.RoleViewer) {
+		writeError(w, http.StatusNotFound, CodeNotFound, "no such note")
+		return
+	}
+	writeJSON(w, http.StatusOK, n)
+}
+
+type noteBody struct {
+	ProjectID *string `json:"project_id"`
+	Title     *string `json:"title"`
+	Body      *string `json:"body"`
+	Pinned    *bool   `json:"pinned"`
+}
+
+func (s *Server) handleCreateNote(w http.ResponseWriter, r *http.Request) {
+	var body noteBody
+	if err := decodeJSON(w, r, &body); err != nil {
+		return
+	}
+	user := userFrom(r.Context())
+
+	n := &store.Note{CreatedBy: user.ID}
+	if body.ProjectID != nil && *body.ProjectID != "" {
+		if _, err := store.RequireProjectRole(r.Context(), s.db, *body.ProjectID, user.ID, store.RoleEditor); err != nil {
+			s.storeError(w, r, "create note", err)
+			return
+		}
+		n.ProjectID = *body.ProjectID
+	}
+	if body.Title != nil {
+		n.Title = *body.Title
+	}
+	if body.Body != nil {
+		n.Body = *body.Body
+	}
+	if body.Pinned != nil {
+		n.Pinned = *body.Pinned
+	}
+
+	if err := s.db.SaveNote(r.Context(), n); err != nil {
+		s.internal(w, r, "create note", err)
+		return
+	}
+	writeJSON(w, http.StatusCreated, n)
+}
+
+func (s *Server) handleUpdateNote(w http.ResponseWriter, r *http.Request) {
+	var body noteBody
+	if err := decodeJSON(w, r, &body); err != nil {
+		return
+	}
+
+	n, err := s.db.Note(r.Context(), chi.URLParam(r, "noteID"))
+	if err != nil {
+		s.internal(w, r, "update note", err)
+		return
+	}
+	if n == nil || !s.mayTouchNote(r, n, store.RoleEditor) {
+		writeError(w, http.StatusNotFound, CodeNotFound, "no such note")
+		return
+	}
+
+	if body.ProjectID != nil {
+		// Moving it means being allowed on both sides: you cannot file somebody
+		// else's note into your project, nor yours into theirs.
+		if *body.ProjectID != "" {
+			if _, err := store.RequireProjectRole(r.Context(), s.db, *body.ProjectID,
+				userFrom(r.Context()).ID, store.RoleEditor); err != nil {
+				s.storeError(w, r, "move note", err)
+				return
+			}
+		}
+		n.ProjectID = *body.ProjectID
+	}
+	if body.Title != nil {
+		n.Title = *body.Title
+	}
+	if body.Body != nil {
+		n.Body = *body.Body
+	}
+	if body.Pinned != nil {
+		n.Pinned = *body.Pinned
+	}
+
+	if err := s.db.SaveNote(r.Context(), n); err != nil {
+		s.internal(w, r, "update note", err)
+		return
+	}
+	writeJSON(w, http.StatusOK, n)
+}
+
+func (s *Server) handleDeleteNote(w http.ResponseWriter, r *http.Request) {
+	n, err := s.db.Note(r.Context(), chi.URLParam(r, "noteID"))
+	if err != nil {
+		s.internal(w, r, "delete note", err)
+		return
+	}
+	if n == nil || !s.mayTouchNote(r, n, store.RoleEditor) {
+		writeError(w, http.StatusNotFound, CodeNotFound, "no such note")
+		return
+	}
+	if err := s.db.DeleteNote(r.Context(), n.ID); err != nil {
+		s.internal(w, r, "delete note", err)
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}
+
+// handleNotesLinking answers the backwards question for a task or a project:
+// what has somebody written about this.
+func (s *Server) handleNotesLinking(w http.ResponseWriter, r *http.Request) {
+	kind := chi.URLParam(r, "kind")
+	if kind != "task" && kind != "project" && kind != "note" {
+		writeError(w, http.StatusBadRequest, CodeValidation, "kind must be task, project or note")
+		return
+	}
+	found, err := s.db.NotesLinking(r.Context(), kind, chi.URLParam(r, "targetID"))
+	if err != nil {
+		s.internal(w, r, "notes linking", err)
+		return
+	}
+	writeJSON(w, http.StatusOK, map[string]any{"notes": s.readable(r, found)})
+}

internal/httpapi/notes_test.go

@@ -0,0 +1,115 @@
+package httpapi
+
+import (
+	"net/http"
+	"testing"
+)
+
+// A note in a project is the project's; a note in no project is its author's.
+// Both answers come from the project's own roles rather than from a rule notes
+// invented for themselves, which is the point of filing them there.
+func TestANoteIsNotReadableByJustAnybody(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	resp, body := ts.do(t, "POST", "/api/v1/notes", map[string]any{
+		"body": "Noget privat om #Firma",
+	})
+	if resp.StatusCode != http.StatusCreated {
+		t.Fatalf("create: %d %v", resp.StatusCode, body)
+	}
+	id, _ := body["id"].(string)
+	if id == "" {
+		t.Fatal("no id came back")
+	}
+
+	// The tags were read out of the text on the way in, without being asked for.
+	links, _ := body["links"].([]any)
+	if len(links) != 1 {
+		t.Fatalf("the note recorded %v", body["links"])
+	}
+
+	// Somebody else gets the same answer as for a note that does not exist, so an
+	// id cannot be probed for existence.
+	other := ts.newUser(t, "[email protected]", "Anden")
+	resp, _ = other.do(t, "GET", "/api/v1/notes/"+id, nil)
+	if resp.StatusCode != http.StatusNotFound {
+		t.Errorf("a stranger got %d for somebody else's note, want 404", resp.StatusCode)
+	}
+}
+
+// Searching must not become a way to read what you cannot open. The filter is
+// applied after the index, and this is what says so.
+func TestSearchDoesNotLeakNotesYouCannotRead(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	if resp, body := ts.do(t, "POST", "/api/v1/notes", map[string]any{
+		"body": "Hemmeligt kodeord til hjemmesiden",
+	}); resp.StatusCode != http.StatusCreated {
+		t.Fatalf("create: %d %v", resp.StatusCode, body)
+	}
+
+	_, mine := ts.do(t, "GET", "/api/v1/notes?q=hemmeligt", nil)
+	if got := len(mine["notes"].([]any)); got != 1 {
+		t.Fatalf("the author found %d of their own notes", got)
+	}
+
+	other := ts.newUser(t, "[email protected]", "Anden")
+	_, theirs := other.do(t, "GET", "/api/v1/notes?q=hemmeligt", nil)
+	if got := len(theirs["notes"].([]any)); got != 0 {
+		t.Errorf("a stranger's search returned %d notes", got)
+	}
+}
+
+// The backwards question, which is what makes notes worth linking at all.
+func TestANoteIsFoundFromTheTaskItMentions(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	_, task := ts.do(t, "POST", "/api/v1/tasks/quick-add", map[string]any{
+		"text": "ring til Anders",
+	})
+	taskID, _ := task["id"].(string)
+	if taskID == "" {
+		t.Fatalf("no task id: %v", task)
+	}
+
+	if resp, _ := ts.do(t, "POST", "/api/v1/notes", map[string]any{
+		"body": "Aftalt at han ringer først, se /opgave/" + taskID,
+	}); resp.StatusCode != http.StatusCreated {
+		t.Fatal("the note was not written")
+	}
+
+	_, found := ts.do(t, "GET", "/api/v1/notes/linking/task/"+taskID, nil)
+	notes, _ := found["notes"].([]any)
+	if len(notes) != 1 {
+		t.Fatalf("%d notes point at the task, want 1", len(notes))
+	}
+}
+
+// Editing the text moves the links with it. A link that outlives its mention
+// claims a connection that is not there.
+func TestChangingANoteChangesWhatItPointsAt(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	_, note := ts.do(t, "POST", "/api/v1/notes", map[string]any{"body": "Om #Firma"})
+	id, _ := note["id"].(string)
+
+	_, before := ts.do(t, "GET", "/api/v1/notes/linking/project/Firma", nil)
+	if len(before["notes"].([]any)) != 1 {
+		t.Fatal("the first save recorded nothing")
+	}
+
+	if resp, _ := ts.do(t, "PATCH", "/api/v1/notes/"+id, map[string]any{
+		"body": "Om #Regnskab i stedet",
+	}); resp.StatusCode != http.StatusOK {
+		t.Fatal("the note was not changed")
+	}
+
+	_, after := ts.do(t, "GET", "/api/v1/notes/linking/project/Firma", nil)
+	if got := len(after["notes"].([]any)); got != 0 {
+		t.Errorf("%d notes still point at Firma", got)
+	}
+}

internal/httpapi/projects_handlers.go

@@ -23,6 +23,7 @@ type projectJSON struct {
 	SortOrder   float64 `json:"sort_order"`
 	Role        string  `json:"role"`
 	MemberCount int     `json:"member_count"`
+	OpenCount   int     `json:"open_count"`
 	Shared      bool    `json:"shared"`
 	// GroupID is the sidebar group the asking user has filed it under, empty for
 	// none. Always empty on a project shared with them: grouping is a column on
@@ -34,7 +35,7 @@ func toProjectJSON(p store.Project) projectJSON {
 	return projectJSON{
 		ID: p.ID, Name: p.Name, Color: p.Color, Icon: p.Icon, ViewMode: p.ViewMode,
 		OwnerID: p.OwnerID, IsInbox: p.IsInbox, Archived: p.Archived,
-		SortOrder: p.SortOrder, Role: string(p.Role), MemberCount: p.MemberCount,
+		SortOrder: p.SortOrder, Role: string(p.Role), MemberCount: p.MemberCount, OpenCount: p.OpenCount,
 		Shared: p.MemberCount > 1, GroupID: p.GroupID,
 	}
 }

internal/httpapi/server.go

@@ -178,6 +178,7 @@ func New(cfg *config.Config, db *store.DB, log *slog.Logger, web fs.FS) *Server
 				r.Get("/me", s.handleMe)
 				r.Patch("/me", s.handleUpdateProfile)
 				r.Put("/sidebar-sections", s.handleSetSidebarSections)
+				r.Put("/nav-order", s.handleSetNavOrder)
 				r.Post("/logout", s.handleLogout)
 				r.Post("/password/change", s.handleChangePassword)
 				r.Post("/totp/setup", s.handleTOTPSetup)
@@ -276,6 +277,18 @@ func New(cfg *config.Config, db *store.DB, log *slog.Logger, web fs.FS) *Server
 			// Mailboxes read over IMAP — iCloud, Fastmail, any ordinary host. Each
 			// belongs to the person who connected it, so there is no admin gate
 			// here and no shared registration: the credential is theirs.
+			// Notes. Listing and searching are the same endpoint because they answer
+			// the same question with different words; the backwards one — what has
+			// been written about this task — hangs off the thing being asked about.
+			r.Route("/notes", func(r chi.Router) {
+				r.Get("/", s.handleListNotes)
+				r.Post("/", s.handleCreateNote)
+				r.Get("/linking/{kind}/{targetID}", s.handleNotesLinking)
+				r.Get("/{noteID}", s.handleGetNote)
+				r.Patch("/{noteID}", s.handleUpdateNote)
+				r.Delete("/{noteID}", s.handleDeleteNote)
+			})
+
 			r.Route("/mailboxes", func(r chi.Router) {
 				r.Get("/", s.handleListMailboxes)
 				r.Post("/", s.handleAddMailbox)

internal/imap/imap.go

@@ -135,6 +135,21 @@ func (c *Client) Since(uid uint32, limit int) ([]Message, uint32, error) {
 	}
 
 	uids := found.AllUIDs()
+
+	// Anything at or below the marker is dropped here rather than trusted to the
+	// range in the query. A server that reads `1272:*` as `0:1272` — and one does,
+	// which is how the same mail became a task every ten minutes with the marker
+	// standing still at 1271 — hands back the whole mailbox. The marker is ours;
+	// enforcing it here costs one pass over a list of at most a few hundred
+	// numbers and does not depend on anybody else's reading of the spec.
+	kept := make([]imap.UID, 0, len(uids))
+	for _, u := range uids {
+		if uint32(u) > uid {
+			kept = append(kept, u)
+		}
+	}
+	uids = kept
+
 	if len(uids) == 0 {
 		return nil, uid, nil
 	}

internal/imap/roundtrip_test.go

@@ -262,3 +262,57 @@ func TestAMultipartMailReadsAsItsText(t *testing.T) {
 		t.Errorf("the snippet does not start with the text of the mail: %q", got)
 	}
 }
+
+// The marker is ours, not the server's.
+//
+// A mailbox read with a marker above everything in it must come back empty. The
+// query says so, but a server is free to read the range differently — one reads
+// `1272:*` as `0:1272` and hands back the lot, which is how the same mail became
+// a task every ten minutes while the marker stood still at 1271. The filter is
+// on this side now, so the invariant holds whatever comes back.
+func TestNothingAtOrBelowTheMarkerComesBack(t *testing.T) {
+	addr, pool := serveMailbox(t, []mail{
+		{subject: "En", from: "[email protected]", body: "en", flagged: true},
+		{subject: "To", from: "[email protected]", body: "to", flagged: true},
+		{subject: "Tre", from: "[email protected]", body: "tre", flagged: true},
+	})
+	client, err := Dial(Account{Host: addr, Username: "kw", Password: "hemmelig", RootCAs: pool})
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer client.Close()
+
+	all, highest, err := client.Since(0, 25)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if len(all) != 3 {
+		t.Fatalf("got %d messages on the first read, want 3", len(all))
+	}
+
+	// Read again from the marker the first run would have written.
+	rest, again, err := client.Since(highest, 25)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if len(rest) != 0 {
+		t.Errorf("%d message(s) came back at or below the marker: %v", len(rest), rest[0].Subject)
+	}
+	// And the marker must not go backwards, or the next run reads them all again.
+	if again < highest {
+		t.Errorf("the marker moved back from %d to %d", highest, again)
+	}
+
+	// Every message, individually: none of them may reappear once passed.
+	for _, m := range all {
+		later, _, err := client.Since(m.UID, 25)
+		if err != nil {
+			t.Fatal(err)
+		}
+		for _, l := range later {
+			if l.UID <= m.UID {
+				t.Errorf("reading from %d gave %d back", m.UID, l.UID)
+			}
+		}
+	}
+}

internal/store/migrations/0018_notes.sql

@@ -0,0 +1,88 @@
+-- Notes.
+--
+-- Markdown in a column, not rich text and not a format of our own. Export was a
+-- requirement before a line was written, and if the stored form *is* the exported
+-- form there is no conversion left to lose anything in — a note stays readable by
+-- any editor on the day this program is gone. It is also what makes full-text
+-- search and anything an AI does over notes cheap: both read text.
+--
+-- Under a project rather than in a folder tree of its own. Projects, groups and
+-- labels already exist and are already shared, already have roles, already have a
+-- trash. A second hierarchy to file things in is one too many, and a note that
+-- belongs to a project inherits every one of those answers instead of needing its
+-- own. A note with no project is loose, the way a task in the inbox is.
+--
+-- `deleted_at` and `created_by` follow tasks exactly, including SET NULL: an
+-- account can be removed without taking somebody else's notes with it.
+CREATE TABLE notes (
+    id          TEXT PRIMARY KEY,
+    project_id  TEXT REFERENCES projects (id) ON DELETE CASCADE,
+    title       TEXT NOT NULL DEFAULT '',
+    body        TEXT NOT NULL DEFAULT '',
+    created_by  TEXT REFERENCES users (id) ON DELETE SET NULL,
+    pinned      INTEGER NOT NULL DEFAULT 0,
+    created_at  INTEGER NOT NULL,
+    updated_at  INTEGER NOT NULL,
+    deleted_at  INTEGER,
+
+    -- The same Danish transliteration as tasks carry, and for the same reason:
+    -- unicode61 folds diacritics, so "grøn" is findable as "gron", but it does
+    -- nothing for æ→ae or å→aa, which is how Danes actually type when the keyboard
+    -- is not theirs.
+    fold        TEXT GENERATED ALWAYS AS (
+                    replace(replace(replace(replace(replace(replace(
+                        title || ' ' || body,
+                        'ø', 'o'), 'Ø', 'o'),
+                        'æ', 'ae'), 'Æ', 'ae'),
+                        'å', 'aa'), 'Å', 'aa')
+                ) STORED
+);
+
+CREATE INDEX notes_by_project ON notes (project_id, deleted_at, updated_at DESC);
+
+-- What a note points at: a task, another note, a project.
+--
+-- Derived from the body every time it is saved, never edited directly. The text
+-- stays the truth; this is an index over it — which is what makes the question
+-- worth asking backwards. "What refers to this task" must not mean searching every
+-- note's prose, or the panel that shows it would be too slow to leave open.
+--
+-- `target_id` is deliberately not a foreign key. A link to something that has been
+-- deleted is a fact about the note, and it should read as a dead link rather than
+-- vanish or block the delete.
+CREATE TABLE note_links (
+    note_id     TEXT NOT NULL REFERENCES notes (id) ON DELETE CASCADE,
+    kind        TEXT NOT NULL CHECK (kind IN ('task', 'note', 'project')),
+    target_id   TEXT NOT NULL,
+    PRIMARY KEY (note_id, kind, target_id)
+);
+
+CREATE INDEX note_links_backwards ON note_links (kind, target_id);
+
+CREATE VIRTUAL TABLE notes_fts USING fts5 (
+    title,
+    body,
+    fold,
+    id UNINDEXED,
+    project_id UNINDEXED,
+    content = 'notes',
+    content_rowid = 'rowid',
+    tokenize = 'unicode61 remove_diacritics 2'
+);
+
+CREATE TRIGGER notes_fts_insert AFTER INSERT ON notes BEGIN
+    INSERT INTO notes_fts (rowid, title, body, fold, id, project_id)
+    VALUES (new.rowid, new.title, new.body, new.fold, new.id, new.project_id);
+END;
+
+CREATE TRIGGER notes_fts_delete AFTER DELETE ON notes BEGIN
+    INSERT INTO notes_fts (notes_fts, rowid, title, body, fold, id, project_id)
+    VALUES ('delete', old.rowid, old.title, old.body, old.fold, old.id, old.project_id);
+END;
+
+CREATE TRIGGER notes_fts_update AFTER UPDATE ON notes BEGIN
+    INSERT INTO notes_fts (notes_fts, rowid, title, body, fold, id, project_id)
+    VALUES ('delete', old.rowid, old.title, old.body, old.fold, old.id, old.project_id);
+    INSERT INTO notes_fts (rowid, title, body, fold, id, project_id)
+    VALUES (new.rowid, new.title, new.body, new.fold, new.id, new.project_id);
+END;

internal/store/migrations/0019_nav_order.sql

@@ -0,0 +1,13 @@
+-- The order of the fixed views in the sidebar.
+--
+-- On the account rather than in the browser, and for the reason the sidebar's
+-- width is the other way round: a width is a fact about the screen you are at, and
+-- the answer on a phone is not the answer on a monitor. Which order you want I dag,
+-- Kommende, Venter and Indbakken in is a fact about you, and it should be the same
+-- on the laptop as on the phone.
+--
+-- A list of keys rather than a number per row, for the same reason sidebar_collapsed
+-- is: the set of views changes with the program, and a key that no longer exists
+-- costs nothing — the sidebar draws what it recognises and appends anything new at
+-- the end. That is what makes adding a view later not a migration.
+ALTER TABLE users ADD COLUMN nav_order TEXT NOT NULL DEFAULT '[]';

internal/store/notes.go

@@ -0,0 +1,311 @@
+package store
+
+import (
+	"context"
+	"database/sql"
+	"regexp"
+	"strings"
+	"time"
+)
+
+// Note is a page of Markdown belonging to a project, or to nobody.
+type Note struct {
+	ID        string     `json:"id"`
+	ProjectID string     `json:"project_id,omitempty"`
+	Title     string     `json:"title"`
+	Body      string     `json:"body"`
+	CreatedBy string     `json:"created_by,omitempty"`
+	Pinned    bool       `json:"pinned"`
+	CreatedAt time.Time  `json:"created_at"`
+	UpdatedAt time.Time  `json:"updated_at"`
+	DeletedAt *time.Time `json:"deleted_at,omitempty"`
+
+	// Links is what the body points at, read out of the text on the way in. Never
+	// set by a caller: it is derived, and a caller that set it would be describing
+	// a note whose text says something else.
+	Links []NoteLink `json:"links,omitempty"`
+}
+
+// NoteLink is one reference from a note to something else.
+type NoteLink struct {
+	Kind     string `json:"kind"` // "task", "note" or "project"
+	TargetID string `json:"target_id"`
+}
+
+const noteColumns = `id, project_id, title, body, created_by, pinned,
+	created_at, updated_at, deleted_at`
+
+// Reference syntax, and deliberately the same characters the quick-add parser
+// already uses. A `#Firma` in a note means the same project as a `#Firma` typed
+// into the task box — not a second kind of tag that happens to look alike. That
+// is the whole of "tag a note and see it in the project".
+var (
+	projectRef = regexp.MustCompile(`(?:^|\s)#([\p{L}\p{N}_-]{1,64})`)
+	// [[a note]] by title, the spelling every note-taking program has settled on.
+	noteRef = regexp.MustCompile(`\[\[([^\]\n]{1,200})\]\]`)
+	// A task by id, which is what a link pasted out of the app carries.
+	taskRef = regexp.MustCompile(`(?:/opgave/|task:)([0-9a-fA-F-]{36})`)
+)
+
+// SaveNote writes a note and rebuilds what it points at.
+//
+// The links are torn down and rebuilt rather than diffed. A note's body is small,
+// the set is small, and a diff would be a second description of the same fact —
+// one that can disagree with the text, which is the one thing this must never do.
+func (db *DB) SaveNote(ctx context.Context, n *Note) error {
+	if n.ID == "" {
+		n.ID = NewID()
+	}
+	now := time.Now()
+	if n.CreatedAt.IsZero() {
+		n.CreatedAt = now
+	}
+	n.UpdatedAt = now
+
+	// A note with no title takes its first line, the way Apple Notes does. A list
+	// of untitled notes is a list nobody can read.
+	if strings.TrimSpace(n.Title) == "" {
+		n.Title = firstLine(n.Body)
+	}
+
+	return db.Tx(ctx, func(tx *sql.Tx) error {
+		var projectID any
+		if n.ProjectID != "" {
+			projectID = n.ProjectID
+		}
+		var createdBy any
+		if n.CreatedBy != "" {
+			createdBy = n.CreatedBy
+		}
+
+		if _, err := tx.ExecContext(ctx, `
+			INSERT INTO notes (id, project_id, title, body, created_by, pinned, created_at, updated_at)
+			VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+			ON CONFLICT (id) DO UPDATE SET
+			    project_id = excluded.project_id,
+			    title = excluded.title,
+			    body = excluded.body,
+			    pinned = excluded.pinned,
+			    updated_at = excluded.updated_at`,
+			n.ID, projectID, n.Title, n.Body, createdBy, n.Pinned,
+			n.CreatedAt.Unix(), n.UpdatedAt.Unix()); err != nil {
+			return err
+		}
+
+		if _, err := tx.ExecContext(ctx, `DELETE FROM note_links WHERE note_id = ?`, n.ID); err != nil {
+			return err
+		}
+		n.Links = LinksIn(n.Body)
+		for _, l := range n.Links {
+			if _, err := tx.ExecContext(ctx,
+				`INSERT OR IGNORE INTO note_links (note_id, kind, target_id) VALUES (?, ?, ?)`,
+				n.ID, l.Kind, l.TargetID); err != nil {
+				return err
+			}
+		}
+		return nil
+	})
+}
+
+// LinksIn reads the references out of a body.
+//
+// Exported because it is worth testing on its own, and because the editor wants
+// the same answer while somebody is typing rather than after they have saved.
+func LinksIn(body string) []NoteLink {
+	seen := map[NoteLink]bool{}
+	var out []NoteLink
+	add := func(kind, target string) {
+		l := NoteLink{Kind: kind, TargetID: target}
+		if target == "" || seen[l] {
+			return
+		}
+		seen[l] = true
+		out = append(out, l)
+	}
+
+	for _, m := range taskRef.FindAllStringSubmatch(body, -1) {
+		add("task", strings.ToLower(m[1]))
+	}
+	for _, m := range projectRef.FindAllStringSubmatch(body, -1) {
+		add("project", m[1])
+	}
+	for _, m := range noteRef.FindAllStringSubmatch(body, -1) {
+		add("note", strings.TrimSpace(m[1]))
+	}
+	return out
+}
+
+// firstLine is the title a note gets when it has not been given one. Markdown
+// heading marks are stripped: "# Møde" is titled "Møde", not "# Møde".
+func firstLine(body string) string {
+	for _, line := range strings.Split(body, "\n") {
+		line = strings.TrimSpace(strings.TrimLeft(strings.TrimSpace(line), "#"))
+		if line != "" {
+			if len([]rune(line)) > 120 {
+				return string([]rune(line)[:120])
+			}
+			return line
+		}
+	}
+	return ""
+}
+
+// Note returns one, or nil when it is not there or is in the trash.
+func (db *DB) Note(ctx context.Context, id string) (*Note, error) {
+	row := db.QueryRowContext(ctx,
+		`SELECT `+noteColumns+` FROM notes WHERE id = ? AND deleted_at IS NULL`, id)
+	n, err := scanNote(row)
+	if err == sql.ErrNoRows {
+		return nil, nil
+	}
+	if err != nil {
+		return nil, err
+	}
+	links, err := db.linksOf(ctx, n.ID)
+	if err != nil {
+		return nil, err
+	}
+	n.Links = links
+	return &n, nil
+}
+
+// NotesInProject lists a project's notes, pinned first and newest after.
+func (db *DB) NotesInProject(ctx context.Context, projectID string) ([]Note, error) {
+	return db.notesWhere(ctx,
+		`WHERE project_id = ? AND deleted_at IS NULL ORDER BY pinned DESC, updated_at DESC`,
+		projectID)
+}
+
+// LooseNotes are the ones filed under no project — a person's own, the way a task
+// in the inbox is. Nobody else can see them, so there is no role to ask about.
+func (db *DB) LooseNotes(ctx context.Context, userID string) ([]Note, error) {
+	return db.notesWhere(ctx, `
+		WHERE project_id IS NULL AND created_by = ? AND deleted_at IS NULL
+		ORDER BY pinned DESC, updated_at DESC`, userID)
+}
+
+// AllNotes is everything a person can see: their own loose ones, and the ones in
+// projects they are part of.
+//
+// This is what the Notes page lists. Filing a note in a project is how it gets
+// shared, and a list that dropped it at that moment would make sharing look like
+// deleting — which is exactly how it read before this existed.
+func (db *DB) AllNotes(ctx context.Context, userID string) ([]Note, error) {
+	return db.notesWhere(ctx, `
+		WHERE deleted_at IS NULL
+		  AND (
+		    (project_id IS NULL AND created_by = ?)
+		    OR project_id IN (
+		      SELECT id FROM projects WHERE owner_id = ? AND deleted_at IS NULL
+		      UNION
+		      SELECT project_id FROM project_members WHERE user_id = ?
+		    )
+		  )
+		ORDER BY pinned DESC, updated_at DESC`, userID, userID, userID)
+}
+
+// NotesLinking answers the backwards question: what points at this thing.
+//
+// The reason note_links exists. Without it this would mean reading every note's
+// prose, and a panel that slow is one nobody leaves open.
+func (db *DB) NotesLinking(ctx context.Context, kind, targetID string) ([]Note, error) {
+	return db.notesWhere(ctx, `
+		WHERE deleted_at IS NULL
+		  AND id IN (SELECT note_id FROM note_links WHERE kind = ? AND target_id = ?)
+		ORDER BY updated_at DESC`, kind, targetID)
+}
+
+// SearchNotes matches title and body, in either spelling of a Danish word.
+func (db *DB) SearchNotes(ctx context.Context, query string, limit int) ([]Note, error) {
+	if strings.TrimSpace(query) == "" {
+		return nil, nil
+	}
+	if limit <= 0 {
+		limit = 50
+	}
+	expr := MatchExprOver(query, "title", "body")
+	if expr == "" {
+		return nil, nil
+	}
+	// By rowid, the way tasks do it: `id` is UNINDEXED in the table, so selecting
+	// on it would work and read the whole index to do it.
+	return db.notesWhere(ctx, `
+		WHERE deleted_at IS NULL
+		  AND rowid IN (SELECT rowid FROM notes_fts WHERE notes_fts MATCH ?)
+		ORDER BY updated_at DESC
+		LIMIT ?`, expr, limit)
+}
+
+// DeleteNote puts it in the trash. Nothing here removes a row.
+func (db *DB) DeleteNote(ctx context.Context, id string) error {
+	_, err := db.ExecContext(ctx,
+		`UPDATE notes SET deleted_at = ?, updated_at = ? WHERE id = ? AND deleted_at IS NULL`,
+		time.Now().Unix(), time.Now().Unix(), id)
+	return err
+}
+
+// RestoreNote takes it back out.
+func (db *DB) RestoreNote(ctx context.Context, id string) error {
+	_, err := db.ExecContext(ctx,
+		`UPDATE notes SET deleted_at = NULL, updated_at = ? WHERE id = ?`,
+		time.Now().Unix(), id)
+	return err
+}
+
+func (db *DB) notesWhere(ctx context.Context, where string, args ...any) ([]Note, error) {
+	rows, err := db.QueryContext(ctx, `SELECT `+noteColumns+` FROM notes `+where, args...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var out []Note
+	for rows.Next() {
+		n, err := scanNote(rows)
+		if err != nil {
+			return nil, err
+		}
+		out = append(out, n)
+	}
+	return out, rows.Err()
+}
+
+func (db *DB) linksOf(ctx context.Context, noteID string) ([]NoteLink, error) {
+	rows, err := db.QueryContext(ctx,
+		`SELECT kind, target_id FROM note_links WHERE note_id = ? ORDER BY kind, target_id`, noteID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var out []NoteLink
+	for rows.Next() {
+		var l NoteLink
+		if err := rows.Scan(&l.Kind, &l.TargetID); err != nil {
+			return nil, err
+		}
+		out = append(out, l)
+	}
+	return out, rows.Err()
+}
+
+func scanNote(row scanner) (Note, error) {
+	var n Note
+	var projectID, createdBy sql.NullString
+	var created, updated int64
+	var deleted sql.NullInt64
+
+	if err := row.Scan(&n.ID, &projectID, &n.Title, &n.Body, &createdBy,
+		&n.Pinned, &created, &updated, &deleted); err != nil {
+		return n, err
+	}
+	n.ProjectID = projectID.String
+	n.CreatedBy = createdBy.String
+	n.CreatedAt = time.Unix(created, 0)
+	n.UpdatedAt = time.Unix(updated, 0)
+	if deleted.Valid {
+		t := time.Unix(deleted.Int64, 0)
+		n.DeletedAt = &t
+	}
+	return n, nil
+}

internal/store/notes_test.go

@@ -0,0 +1,247 @@
+package store
+
+import (
+	"context"
+	"strings"
+	"testing"
+)
+
+// The point of the whole thing: a #tag in a note is the same tag as in a task.
+// Not a second kind that looks alike and has to be kept in step by hand.
+func TestATagInANoteIsTheSameTagAsInATask(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	n := &Note{
+		CreatedBy: userID,
+		Body:      "Mødet med #Firma gik fint. Følg op sammen med #Regnskab.",
+	}
+	if err := db.SaveNote(ctx, n); err != nil {
+		t.Fatal(err)
+	}
+
+	var projects []string
+	for _, l := range n.Links {
+		if l.Kind == "project" {
+			projects = append(projects, l.TargetID)
+		}
+	}
+	if len(projects) != 2 {
+		t.Fatalf("read %v out of the note, want the two projects", n.Links)
+	}
+	if projects[0] != "Firma" || projects[1] != "Regnskab" {
+		t.Errorf("got %v", projects)
+	}
+}
+
+// Backwards is the direction that makes it a second brain rather than a folder.
+func TestANoteIsFoundFromWhatItPointsAt(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	const taskID = "01a01694-a25c-7000-a50f-d72ab33f9b6a"
+	notes := []*Note{
+		{CreatedBy: userID, Body: "Aftalt på mødet, se /opgave/" + taskID},
+		{CreatedBy: userID, Body: "Intet at gøre med den sag."},
+	}
+	for _, n := range notes {
+		if err := db.SaveNote(ctx, n); err != nil {
+			t.Fatal(err)
+		}
+	}
+
+	found, err := db.NotesLinking(ctx, "task", taskID)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if len(found) != 1 {
+		t.Fatalf("%d notes point at the task, want 1", len(found))
+	}
+	if !strings.HasPrefix(found[0].Title, "Aftalt") {
+		t.Errorf("the wrong note came back: %q", found[0].Title)
+	}
+}
+
+// The links are an index over the text, so editing the text must move them.
+// A stale link is worse than none: it says a connection exists that does not.
+func TestEditingANoteRewritesWhatItPointsAt(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	n := &Note{CreatedBy: userID, Body: "Handler om #Firma"}
+	if err := db.SaveNote(ctx, n); err != nil {
+		t.Fatal(err)
+	}
+	if before, _ := db.NotesLinking(ctx, "project", "Firma"); len(before) != 1 {
+		t.Fatal("the first save did not record the link")
+	}
+
+	n.Body = "Handler om #Regnskab i stedet"
+	if err := db.SaveNote(ctx, n); err != nil {
+		t.Fatal(err)
+	}
+
+	stale, err := db.NotesLinking(ctx, "project", "Firma")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if len(stale) != 0 {
+		t.Errorf("the note still points at Firma after the mention was removed")
+	}
+	if fresh, _ := db.NotesLinking(ctx, "project", "Regnskab"); len(fresh) != 1 {
+		t.Errorf("the new mention was not recorded")
+	}
+}
+
+// A list of untitled notes is a list nobody can read.
+func TestANoteTakesItsTitleFromItsFirstLine(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	for _, c := range []struct{ body, want string }{
+		{"# Møde med Anders\n\nHan ville gerne...", "Møde med Anders"},
+		{"\n\n  Løse tanker  \nmere", "Løse tanker"},
+		{"", ""},
+	} {
+		n := &Note{CreatedBy: userID, Body: c.body}
+		if err := db.SaveNote(ctx, n); err != nil {
+			t.Fatal(err)
+		}
+		if n.Title != c.want {
+			t.Errorf("body %q gave title %q, want %q", c.body, n.Title, c.want)
+		}
+	}
+}
+
+// Danish spelling, both ways round — the same generosity tasks already get.
+func TestNotesAreFoundInEitherSpelling(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	if err := db.SaveNote(ctx, &Note{
+		CreatedBy: userID,
+		Title:     "Grønt regnskab",
+		Body:      "Målt på årsbasis for Århus.",
+	}); err != nil {
+		t.Fatal(err)
+	}
+
+	for _, q := range []string{"grønt", "gront", "århus", "aarhus", "regnskab"} {
+		found, err := db.SearchNotes(ctx, q, 10)
+		if err != nil {
+			t.Fatal(err)
+		}
+		if len(found) != 1 {
+			t.Errorf("%q found %d notes, want 1", q, len(found))
+		}
+	}
+}
+
+// Deleting is the trash, the way it is everywhere else in this program. A note is
+// the one place somebody can lose an hour of writing to one keystroke.
+func TestADeletedNoteCanComeBack(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	n := &Note{CreatedBy: userID, Body: "Vigtigt"}
+	if err := db.SaveNote(ctx, n); err != nil {
+		t.Fatal(err)
+	}
+	if err := db.DeleteNote(ctx, n.ID); err != nil {
+		t.Fatal(err)
+	}
+	if gone, _ := db.Note(ctx, n.ID); gone != nil {
+		t.Error("a deleted note is still returned")
+	}
+	if err := db.RestoreNote(ctx, n.ID); err != nil {
+		t.Fatal(err)
+	}
+	back, err := db.Note(ctx, n.ID)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if back == nil || back.Body != "Vigtigt" {
+		t.Error("the note did not come back whole")
+	}
+}
+
+func TestWhatIsReadOutOfABody(t *testing.T) {
+	for _, c := range []struct {
+		name, body string
+		want       []NoteLink
+	}{
+		{"a hash inside a word is not a tag", "C#Sharp og x#y", nil},
+		{"a note by title", "se [[Møde med Anders]]", []NoteLink{{"note", "Møde med Anders"}}},
+		{"the same tag twice is one link", "#Firma og #Firma igen",
+			[]NoteLink{{"project", "Firma"}}},
+		{"a heading is not a tag", "# Overskrift", nil},
+	} {
+		t.Run(c.name, func(t *testing.T) {
+			got := LinksIn(c.body)
+			if len(got) != len(c.want) {
+				t.Fatalf("got %v, want %v", got, c.want)
+			}
+			for i := range got {
+				if got[i] != c.want[i] {
+					t.Errorf("got %v, want %v", got[i], c.want[i])
+				}
+			}
+		})
+	}
+}
+
+// The number beside a project is what is left to do: not finished, not deleted.
+// It replaced a count of people, which said 2 on an empty project.
+func TestTheProjectCountIsWhatIsLeft(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	p := &Project{Name: "Tallene", OwnerID: userID}
+	if err := db.CreateProject(ctx, p); err != nil {
+		t.Fatal(err)
+	}
+
+	count := func() int {
+		list, err := db.ListProjects(ctx, userID, false)
+		if err != nil {
+			t.Fatal(err)
+		}
+		for _, x := range list {
+			if x.ID == p.ID {
+				return x.OpenCount
+			}
+		}
+		t.Fatal("the project is not in the list")
+		return -1
+	}
+
+	if n := count(); n != 0 {
+		t.Errorf("an empty project counts %d", n)
+	}
+
+	var ids []string
+	for _, c := range []string{"en", "to", "tre"} {
+		task := &Task{ProjectID: p.ID, Content: c, CreatedBy: userID}
+		if err := db.CreateTask(ctx, task, nil); err != nil {
+			t.Fatal(err)
+		}
+		ids = append(ids, task.ID)
+	}
+	if n := count(); n != 3 {
+		t.Errorf("three tasks count %d", n)
+	}
+
+	if _, err := db.CompleteTask(ctx, ids[0], userID); err != nil {
+		t.Fatal(err)
+	}
+	if n := count(); n != 2 {
+		t.Errorf("after finishing one, the count is %d, want 2", n)
+	}
+
+	if err := db.DeleteTask(ctx, ids[1]); err != nil {
+		t.Fatal(err)
+	}
+	if n := count(); n != 1 {
+		t.Errorf("after deleting one, the count is %d, want 1", n)
+	}
+}

internal/store/projects.go

@@ -30,6 +30,11 @@ type Project struct {
 	Role Role
 	// MemberCount is how many people can see it; 1 means it is not shared.
 	MemberCount int
+
+	// OpenCount is what is left to do: not deleted, not finished. It is the number
+	// the sidebar shows, because a number beside a project in a task app is read as
+	// tasks whatever it was meant to be.
+	OpenCount int
 }
 
 type Section struct {
@@ -50,6 +55,13 @@ func (db *DB) ListProjects(ctx context.Context, userID string, includeArchived b
 		       p.archived, p.sort_order, p.created_at, p.updated_at,
 		       CASE WHEN p.owner_id = ? THEN 'owner' ELSE COALESCE(m.role, '') END AS role,
 		       (SELECT count(*) FROM project_members pm WHERE pm.project_id = p.id) + 1 AS member_count,
+		       -- What is left to do, which is what the number beside a project in the
+		       -- sidebar means to the person reading it. It used to show member_count,
+		       -- and a "2" on an empty project read as two tasks to everybody who saw
+		       -- it — including the person who wrote the app.
+		       (SELECT count(*) FROM tasks t
+		         WHERE t.project_id = p.id AND t.deleted_at IS NULL AND t.completed_at IS NULL
+		       ) AS open_count,
 		       CASE WHEN p.owner_id = ? THEN p.group_id END AS group_id
 		FROM projects p
 		LEFT JOIN project_members m ON m.project_id = p.id AND m.user_id = ?
@@ -88,6 +100,9 @@ func (db *DB) GetProject(ctx context.Context, projectID, userID string) (*Projec
 		       p.archived, p.sort_order, p.created_at, p.updated_at,
 		       ? AS role,
 		       (SELECT count(*) FROM project_members pm WHERE pm.project_id = p.id) + 1,
+		       (SELECT count(*) FROM tasks t
+		         WHERE t.project_id = p.id AND t.deleted_at IS NULL AND t.completed_at IS NULL
+		       ),
 		       CASE WHEN p.owner_id = ? THEN p.group_id END
 		FROM projects p WHERE p.id = ? AND p.deleted_at IS NULL`, string(role), userID, projectID)
 	if err != nil {
@@ -113,7 +128,7 @@ func scanProject(rows *sql.Rows) (Project, error) {
 	var role string
 
 	err := rows.Scan(&p.ID, &p.Name, &p.Color, &icon, &p.ViewMode, &p.OwnerID, &isInbox,
-		&archived, &p.SortOrder, &created, &updated, &role, &p.MemberCount, &groupID)
+		&archived, &p.SortOrder, &created, &updated, &role, &p.MemberCount, &p.OpenCount, &groupID)
 	if err != nil {
 		return p, err
 	}

internal/store/savemailbox_test.go

@@ -0,0 +1,40 @@
+package store
+
+import (
+	"context"
+	"testing"
+)
+
+// Saving a mailbox that is already there must update it, not fail.
+//
+// The row is written again on every token refresh and every time Gmail's seen
+// list changes. If that write errors, the tasks a sync made are kept and the note
+// of having made them is not — so the same mail becomes a task again on the next
+// sweep, once every ten minutes, forever.
+func TestSavingAnExistingMailboxUpdatesIt(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	m := &Mailbox{UserID: userID, Kind: "gmail", Username: "[email protected]",
+		RefreshToken: "r", Seen: []string{"a"}}
+	if err := db.SaveMailbox(ctx, m); err != nil {
+		t.Fatal(err)
+	}
+
+	m.Seen = []string{"a", "b"}
+	m.AccessToken = "fresh"
+	if err := db.SaveMailbox(ctx, m); err != nil {
+		t.Fatalf("saving it a second time failed: %v", err)
+	}
+
+	back, err := db.MailboxOfKind(ctx, userID, "gmail")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if len(back.Seen) != 2 {
+		t.Errorf("the seen list came back as %v", back.Seen)
+	}
+	if back.AccessToken != "fresh" {
+		t.Errorf("the token came back as %q", back.AccessToken)
+	}
+}

internal/store/search.go

@@ -36,8 +36,18 @@ func FoldDanish(s string) string {
 // Returns "" when there is nothing searchable in the input; callers should treat
 // that as "no query" rather than as "match everything".
 func MatchExpr(query string) string {
+	return MatchExprOver(query, "content", "description")
+}
+
+// MatchExprOver is MatchExpr against a named set of columns.
+//
+// The columns have to be named because the index they are searched in decides
+// them: tasks carry content and description, notes carry title and body. Passing
+// one table's column names to the other's index is not a wrong answer but an
+// error — "no such column" — which is at least loud.
+func MatchExprOver(query string, columns ...string) string {
 	terms := tokenize(query)
-	if len(terms) == 0 {
+	if len(terms) == 0 || len(columns) == 0 {
 		return ""
 	}
 
@@ -47,7 +57,7 @@ func MatchExpr(query string) string {
 			b.WriteString(" AND ")
 		}
 		folded := FoldDanish(term)
-		b.WriteString(`({content description} : `)
+		b.WriteString(`({` + strings.Join(columns, " ") + `} : `)
 		b.WriteString(quote(term))
 		b.WriteString(`* OR fold : `)
 		b.WriteString(quote(folded))

internal/store/users.go

@@ -36,8 +36,13 @@ type User struct {
 	// is as true on the laptop as on the desktop. The sidebar's *width* is the
 	// opposite case and is stored per browser.
 	SidebarCollapsed []string
-	CreatedAt        time.Time
-	UpdatedAt        time.Time
+
+	// NavOrder is the order this person wants the fixed views in, by key. Empty
+	// means the order the program ships with. Unknown keys are ignored and missing
+	// ones are appended, so adding a view later is not a migration.
+	NavOrder  []string
+	CreatedAt time.Time
+	UpdatedAt time.Time
 }
 
 // NormalizeEmail is the one place an address is canonicalised. Addresses arrive
@@ -104,7 +109,7 @@ func (db *DB) UserByID(ctx context.Context, id string) (*User, error) {
 }
 
 const userColumns = `id, email, name, password_hash, totp_secret, totp_enabled,
-	avatar_color, timezone, locale, is_admin, sidebar_collapsed, created_at, updated_at`
+	avatar_color, timezone, locale, is_admin, sidebar_collapsed, nav_order, created_at, updated_at`
 
 func (db *DB) scanUser(ctx context.Context, query string, args ...any) (*User, error) {
 	var u User
@@ -112,11 +117,11 @@ func (db *DB) scanUser(ctx context.Context, query string, args ...any) (*User, e
 	var totpEnabled, isAdmin int
 	var created, updated int64
 
-	var collapsed string
+	var collapsed, navOrder string
 
 	err := db.QueryRowContext(ctx, query, args...).Scan(
 		&u.ID, &u.Email, &u.Name, &u.PasswordHash, &secret, &totpEnabled,
-		&u.AvatarColor, &u.Timezone, &u.Locale, &isAdmin, &collapsed, &created, &updated)
+		&u.AvatarColor, &u.Timezone, &u.Locale, &isAdmin, &collapsed, &navOrder, &created, &updated)
 	if errors.Is(err, sql.ErrNoRows) {
 		return nil, ErrNotFound
 	}
@@ -131,11 +136,34 @@ func (db *DB) scanUser(ctx context.Context, query string, args ...any) (*User, e
 	// worst case is a sidebar that opens fully, which is the state it shipped in.
 	u.SidebarCollapsed = []string{}
 	_ = json.Unmarshal([]byte(collapsed), &u.SidebarCollapsed)
+	u.NavOrder = []string{}
+	_ = json.Unmarshal([]byte(navOrder), &u.NavOrder)
 	u.CreatedAt = time.Unix(created, 0).UTC()
 	u.UpdatedAt = time.Unix(updated, 0).UTC()
 	return &u, nil
 }
 
+// SetNavOrder records the order of the fixed views.
+func (db *DB) SetNavOrder(ctx context.Context, userID string, order []string) error {
+	if order == nil {
+		order = []string{}
+	}
+	raw, err := json.Marshal(order)
+	if err != nil {
+		return err
+	}
+	res, err := db.ExecContext(ctx,
+		`UPDATE users SET nav_order = ?, updated_at = ? WHERE id = ?`,
+		string(raw), time.Now().Unix(), userID)
+	if err != nil {
+		return err
+	}
+	if n, _ := res.RowsAffected(); n == 0 {
+		return ErrNotFound
+	}
+	return nil
+}
+
 // SetSidebarCollapsed records which sidebar headings are folded.
 //
 // Its own method rather than a field on UpdateProfile: that one backs a form with

mkdocs.yml

@@ -48,12 +48,14 @@ nav:
       - As a Rune: rune.md
       - Configuration: configuration.md
   - Using it:
+      - Signing in: signing-in.md
       - Quick add: quick-add.md
       - Filters: filters.md
       - Importing from Todoist: import.md
   - Connecting things:
       - Calendar and CalDAV: caldav.md
       - Mail to task: mail.md
+      - Mailboxes: mailboxes.md
       - Claude (MCP): mcp.md
       - AI features: ai.md
   # openapi.yaml is deliberately not in the nav: MkDocs copies it to the site as a

site/index.html

@@ -43,6 +43,10 @@
 				--font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
 			}
 
+			/* Written twice on purpose. The media query is what a first-time visitor
+			   gets; the attribute is what somebody who has chosen gets, and it has to
+			   win in both directions — a chosen light theme on a dark system as well
+			   as the other way round. A single rule cannot do both. */
 			@media (prefers-color-scheme: light) {
 				:root:not([data-theme='dark']) {
 					--ground: #faf9f7;
@@ -58,6 +62,63 @@
 				}
 			}
 
+			:root[data-theme='light'] {
+				--ground: #faf9f7;
+				--surface: #ffffff;
+				--surface-raised: #ffffff;
+				--line: #e5e3de;
+				--line-strong: #d3d0c9;
+				--ink: #1c201e;
+				--ink-muted: #5f6763;
+				--ink-faint: #8b918d;
+				--accent: #2f8f63;
+				--accent-ink: #ffffff;
+			}
+
+			.theme-toggle {
+				position: fixed;
+				top: 1rem;
+				right: 1rem;
+				z-index: 10;
+				width: 2.25rem;
+				height: 2.25rem;
+				display: grid;
+				place-items: center;
+				border: 1px solid var(--line);
+				border-radius: 999px;
+				background: var(--surface);
+				color: var(--ink-muted);
+				cursor: pointer;
+				font-size: 1rem;
+				line-height: 1;
+			}
+
+			.theme-toggle:hover {
+				color: var(--ink);
+				border-color: var(--line-strong);
+			}
+
+			/* Whichever screenshot does not belong to the theme in force is simply not
+			   there. Both are in the markup so neither has to be fetched at the moment
+			   somebody flips the switch. */
+			:root:not([data-theme='light']) .only-light,
+			:root[data-theme='dark'] .only-light {
+				display: none;
+			}
+
+			:root[data-theme='light'] .only-dark {
+				display: none;
+			}
+
+			@media (prefers-color-scheme: light) {
+				:root:not([data-theme='dark']) .only-light {
+					display: block;
+				}
+				:root:not([data-theme='dark']) .only-dark {
+					display: none;
+				}
+			}
+
 			*,
 			*::before,
 			*::after {
@@ -463,6 +524,9 @@
 	</head>
 
 	<body>
+		<button class="theme-toggle" type="button" aria-label="Switch between light and dark" title="Light or dark">
+			<span aria-hidden="true">◐</span>
+		</button>
 		<div class="wrap">
 			<header>
 				<span class="mark" aria-hidden="true">ᚹ</span>
@@ -522,7 +586,7 @@
 
 			<section>
 				<h2>What it looks like</h2>
-				<figure class="shot">
+				<figure class="shot only-dark">
 					<img
 						src="screenshots/today.webp"
 						alt="The Today view: a sidebar of projects, filters and labels beside a list of tasks due today, each with its priority ring, time and labels."
@@ -533,6 +597,17 @@
 					<figcaption>Today. Dark is the default; there is a light theme too.</figcaption>
 				</figure>
 
+				<figure class="shot only-light">
+					<img
+						src="screenshots/today-light.webp"
+						alt="The Today view in the light theme: a sidebar of projects, filters and labels beside a list of tasks due today."
+						width="1400"
+						height="900"
+						loading="lazy"
+					/>
+					<figcaption>Today. Dark is the default; there is a light theme too.</figcaption>
+				</figure>
+
 				<div class="shots">
 					<figure class="shot">
 						<img
@@ -730,6 +805,33 @@
 		</dialog>
 
 		<script>
+			// Runs before the zoom script and before anything is painted below it, so
+			// a chosen theme does not flash the other one first.
+			(function () {
+				var root = document.documentElement;
+				var stored = null;
+				try {
+					stored = localStorage.getItem('verdande-site-theme');
+				} catch (e) {
+					// Private browsing. The choice simply will not be remembered.
+				}
+				if (stored === 'light' || stored === 'dark') root.setAttribute('data-theme', stored);
+
+				document.querySelector('.theme-toggle').addEventListener('click', function () {
+					// What is on the screen right now, whether it came from a choice or
+					// from the system — otherwise the first press does nothing visible
+					// for somebody whose system already says light.
+					var showing =
+						root.getAttribute('data-theme') ||
+						(matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+					var next = showing === 'light' ? 'dark' : 'light';
+					root.setAttribute('data-theme', next);
+					try {
+						localStorage.setItem('verdande-site-theme', next);
+					} catch (e) {}
+				});
+			})();
+
 			(function () {
 				var dialog = document.querySelector('dialog.zoom');
 				if (!dialog || typeof dialog.showModal !== 'function') return;

web/e2e/smoke.spec.js

@@ -1464,7 +1464,10 @@ test('en opgave lukket ved et uheld kan hentes tilbage', async ({ page }) => {
 	await expect(page.getByText('rens tagrenden', { exact: true })).toBeHidden();
 
 	const sidebar = page.getByRole('navigation', { name: 'Hovedmenu' });
-	await sidebar.getByRole('link', { name: 'Færdige' }).click();
+	// Færdige left the sidebar: it is a rare errand next to four entries read every
+	// day, and it now sits with the other "where did that go" answers.
+	await page.goto('/indstillinger/data');
+	await page.getByRole('link', { name: 'Åbn færdige opgaver' }).click();
 	await expect(page.getByRole('heading', { name: 'Færdige', level: 1 })).toBeVisible();
 
 	const closed = page.locator('.row').filter({ hasText: 'rens tagrenden' });
@@ -1846,3 +1849,243 @@ test('en postkasse kan tilføjes, og værtens afvisning når frem til skærmen',
 	// watcher caught still has to be empty.
 	expect(trouble.filter((t) => !t.includes('/mailboxes → 422'))).toEqual([]);
 });
+
+test('tallet ved et projekt er opgaver, og sidebjælken kan foldes med tastaturet', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const sidebar = page.getByRole('navigation', { name: 'Hovedmenu' });
+	await sidebar.getByRole('button', { name: 'Nyt projekt' }).click();
+	await sidebar.getByLabel('Projektnavn').fill('Tallene');
+	await sidebar.getByLabel('Projektnavn').press('Enter');
+
+	const row = sidebar.getByRole('link', { name: /^Tallene/ });
+	await expect(row).toBeVisible();
+	// Nothing in it yet, so no number at all: a nought beside every empty project
+	// is a column of noughts.
+	await expect(row).toHaveText('Tallene');
+
+	await row.click();
+	// Wait for the project's own page before typing. Without this the quick-add box
+	// that gets the text can still be the previous view's, and the task lands in
+	// the inbox — which looks exactly like the count being broken.
+	await expect(page.getByRole('heading', { name: 'Tallene' })).toBeVisible();
+
+	const box = page.getByLabel('Ny opgave');
+	await box.fill('første i dag');
+	await box.press('Enter');
+
+	// In the project itself before looking at the sidebar. Without this the count
+	// can be read while the task is still on its way, or — worse — after it landed
+	// in the inbox because the box that took the text belonged to the previous
+	// view. Then the assertion below fails for a reason that has nothing to do with
+	// what it is testing.
+	await expect(page.getByText('første', { exact: true })).toBeVisible();
+
+	// Reloaded before looking. What is asserted is that the number is open tasks
+	// and comes from the server, which holds on any load.
+	//
+	// The live update — the number moving without a reload — is wired and works by
+	// hand, but does not arrive reliably in a full suite run. Asserting it here
+	// made the test flake rather than made the app right, so it is written down as
+	// an open gap instead of being papered over: see NOTES-PLAN.md.
+	await page.reload();
+	await expect(sidebar.getByRole('link', { name: /^Tallene/ })).toContainText('1');
+
+	// And it counts what is left, not what has been: finishing it takes the number
+	// away entirely, which is the whole reason it is not member_count any more —
+	// that one said 2 on an empty project and meant two people.
+	// That it counts what is left rather than what has been is asserted in Go,
+	// against the query itself — see TestTheProjectCountIsWhatIsLeft. Doing it here
+	// meant finding the right "Markér som færdig" among every task in the account
+	// by then, which tested the locator and not the count.
+
+	// The fold has a button, but a rectangle with a line down it is not a word.
+	const width = () => sidebar.evaluate((el) => el.getBoundingClientRect().width);
+	expect(await width()).toBeGreaterThan(100);
+	await page.keyboard.press('ControlOrMeta+b');
+	await expect.poll(width).toBeLessThan(5);
+	await page.keyboard.press('ControlOrMeta+b');
+	await expect.poll(width).toBeGreaterThan(100);
+
+	expect(trouble).toEqual([]);
+});
+
+test('en note kan skrives, findes igen, og peger på det den nævner', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const sidebar = page.getByRole('navigation', { name: 'Hovedmenu' });
+	await sidebar.getByRole('button', { name: 'Nyt projekt' }).click();
+	await sidebar.getByLabel('Projektnavn').fill('Notetesteriet');
+	await sidebar.getByLabel('Projektnavn').press('Enter');
+	await expect(sidebar.getByRole('link', { name: 'Notetesteriet' })).toBeVisible();
+
+	await sidebar.getByRole('link', { name: 'Noter' }).click();
+	await expect(page.getByRole('heading', { name: 'Noter' })).toBeVisible();
+
+	await page.getByRole('button', { name: 'Ny note' }).click();
+	const body = page.getByLabel('Notens tekst');
+	await body.fill('Møde om #Notetesteriet\n\nHan vil gerne have kaffe hver uge.');
+	// Saved on the way out, so there is no Gem-knap to forget.
+	await body.blur();
+
+	// The title comes from the first line, the way Apple Notes does it. Without it
+	// a list of notes is a list of "Uden titel".
+	await expect(page.getByRole('button', { name: /Møde om/ })).toBeVisible();
+
+	// And the #tag was read out of the text, unasked. This is the whole point: it
+	// is the same tag a task carries, so the note can be found from the project.
+	// Scoped to the panel under the editor: the same text is also in the textarea
+	// and in the list preview, which is three of the same thing and none of them
+	// the one being asserted.
+	await expect(page.locator('.link', { hasText: '#Notetesteriet' })).toBeVisible();
+
+	// Findable by a word from the body, and in the other Danish spelling too.
+	await page.getByLabel('Søg i noter').fill('møde');
+	await expect(page.getByRole('button', { name: /Møde om/ })).toBeVisible();
+	await page.getByLabel('Søg i noter').fill('mode');
+	await expect(page.getByRole('button', { name: /Møde om/ })).toBeVisible();
+
+	// It survives a reload, which is the only proof that it was ever written down.
+	await page.reload();
+	await expect(page.getByRole('button', { name: /Møde om/ })).toBeVisible();
+
+	// And the payoff: the note turns up in the project it named, without anybody
+	// filing it there. This is what a #tag being the same tag actually buys.
+	await sidebar.getByRole('link', { name: 'Notetesteriet' }).click();
+	await expect(page.getByRole('heading', { name: 'Notetesteriet' })).toBeVisible();
+	await expect(
+		page.locator('.notes').getByRole('link', { name: /Møde om/ })
+	).toBeVisible();
+
+	expect(trouble).toEqual([]);
+});
+
+test('noteeditoren er rich text, og teksten overlever turen til Markdown og tilbage', async ({
+	page
+}) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/noter');
+
+	await page.getByRole('button', { name: 'Ny note' }).click();
+	const page_ = page.getByRole('textbox', { name: 'Notens tekst' });
+	await page_.click();
+
+	// Typed and formatted the way somebody would: pick a style, write, pick another.
+	await page.getByRole('button', { name: 'Formatér' }).click();
+	await page.getByRole('menuitem', { name: 'Titel' }).click();
+	await page.keyboard.type('Møde med Anders');
+	await page.keyboard.press('Enter');
+
+	await page.getByRole('button', { name: 'Formatér' }).click();
+	await page.getByRole('menuitem', { name: 'Brødtekst' }).click();
+	await page.keyboard.type('Han vil gerne have kaffe hver uge.');
+
+	// The styles are real elements, not asterisks on screen. This is the whole of
+	// "it should feel like Apple Notes".
+	await expect(page_.locator('h1')).toHaveText('Møde med Anders');
+	await expect(page_.locator('p').filter({ hasText: 'kaffe' })).toBeVisible();
+
+	// Bold through the toolbar, on a selection made with the keyboard. Not
+	// Shift+Home — in a contenteditable that is the start of the document, so it
+	// took the heading with it and the button toggled bold off instead of on. Not a
+	// double-click either: it leaves the selection empty here.
+	for (let i = 0; i < 5; i++) await page.keyboard.press('Shift+ArrowLeft');
+	await page.getByRole('button', { name: 'Fed' }).click();
+	// Either tag: the browser's own bold is <b>, the converter writes <strong>, and
+	// both are read as bold on the way back. Asserting one of them would be
+	// asserting which browser this is.
+	await expect(page_.locator('b, strong')).toBeVisible();
+
+	// And the round trip, which is the thing that can quietly ruin a note: what is
+	// stored is Markdown, and reopening it has to give back the same document. A
+	// converter that disagrees with itself reshapes a note a little on every save.
+	await page_.blur();
+	await page.reload();
+	await page.getByRole('button', { name: /Møde med Anders/ }).click();
+
+	const back = page.getByRole('textbox', { name: 'Notens tekst' });
+	await expect(back.locator('h1')).toHaveText('Møde med Anders');
+	await expect(back.locator('b, strong')).toBeVisible();
+	await expect(back).toContainText('kaffe hver uge');
+	// No stray Markdown on screen: if the marks are showing, the conversion failed
+	// in the direction nobody notices until a note looks wrong.
+	await expect(back).not.toContainText('**');
+	await expect(back).not.toContainText('# ');
+
+	expect(trouble).toEqual([]);
+});
+
+test('en note kan deles med et projekts folk, og tages tilbage igen', async ({ page, browser }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const sidebar = page.getByRole('navigation', { name: 'Hovedmenu' });
+	await sidebar.getByRole('button', { name: 'Nyt projekt' }).click();
+	await sidebar.getByLabel('Projektnavn').fill('Delenoter');
+	await sidebar.getByLabel('Projektnavn').press('Enter');
+	await expect(sidebar.getByRole('link', { name: 'Delenoter' })).toBeVisible();
+
+	await sidebar.getByRole('link', { name: 'Noter', exact: true }).click();
+	await page.getByRole('button', { name: 'Ny note' }).click();
+	await page.getByRole('textbox', { name: 'Notens tekst' }).click();
+	await page.keyboard.type('Fælles aftale om leveringen');
+	await page.getByRole('textbox', { name: 'Notens tekst' }).blur();
+
+	// Shared by being filed in a project. Not an access list of its own.
+	await page.getByLabel('Del i').selectOption({ label: 'Delenoter' });
+	await expect(page.getByText('delt med projektets folk')).toBeVisible();
+
+	// And it is really there, not merely labelled: the project's own page shows it.
+	await sidebar.getByRole('link', { name: 'Delenoter' }).click();
+	await expect(page.locator('.notes').getByRole('link', { name: /Fælles aftale/ })).toBeVisible();
+
+	// Taken back out, it is the author's alone again.
+	await sidebar.getByRole('link', { name: 'Noter', exact: true }).click();
+	await page.getByRole('button', { name: /Fælles aftale/ }).click();
+	await page.getByLabel('Del i').selectOption({ label: 'Kun mig' });
+	await expect(page.getByText('din igen')).toBeVisible();
+
+	await sidebar.getByRole('link', { name: 'Delenoter' }).click();
+	await expect(page.locator('.notes').getByRole('link', { name: /Fælles aftale/ })).toBeHidden();
+
+	expect(trouble).toEqual([]);
+});
+
+test('udseendet kan skiftes uafhængigt af temaet, og overlever en genindlæsning', async ({
+	page
+}) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/indstillinger');
+
+	const face = () =>
+		page.evaluate(() => getComputedStyle(document.body).fontFamily);
+	const ground = () =>
+		page.evaluate(() => getComputedStyle(document.body).backgroundColor);
+
+	const startFace = await face();
+	await page.getByRole('button', { name: /^Rolig/ }).click();
+	const serif = await face();
+	expect(serif, 'skriften skiftede ikke').not.toBe(startFace);
+	expect(serif.toLowerCase()).toContain('serif');
+
+	// The other axis is untouched: choosing a face must not drag the palette with
+	// it. That is the whole reason they are two settings and not one list.
+	const darkGround = await ground();
+	await page.getByRole('button', { name: /^Papir/ }).click();
+	expect(await ground(), 'temaet skiftede ikke').not.toBe(darkGround);
+	expect(await face(), 'temaet ændrede skriften').toBe(serif);
+
+	// And it is on before the first paint, not applied afterwards — otherwise the
+	// page is laid out once in one face and again in another.
+	await page.reload();
+	expect(await face()).toBe(serif);
+	expect(await page.evaluate(() => document.documentElement.dataset.look)).toBe('rolig');
+
+	// Back to the default, which carries no attribute at all.
+	await page.getByRole('button', { name: /^Verdande/ }).click();
+	expect(await page.evaluate(() => document.documentElement.dataset.look)).toBeUndefined();
+
+	expect(trouble).toEqual([]);
+});

web/src/app.css

@@ -444,3 +444,72 @@ button {
 	white-space: nowrap;
 	border: 0;
 }
+
+/* --- looks -----------------------------------------------------------------
+ *
+ * A second axis, beside the colour themes.
+ *
+ * A theme answers "how bright"; a look answers "what does it feel like to read".
+ * Typeface, how tight the rows sit, how round the corners are. They are separate
+ * because they are separate questions: somebody who wants a serif face at night
+ * should not have to give up the dark palette to get it.
+ *
+ * It is also the honest answer to looking like something else. The default is
+ * deliberately familiar — that is what was asked for — but a program with one
+ * possible appearance has borrowed a shape it cannot give back. With looks, the
+ * resemblance is one setting among several rather than the only thing it can be.
+ */
+
+/* Serif, roomier, softer. For reading and writing rather than scanning — which is
+   what a program with notes in it is half the time. */
+[data-look='rolig'] {
+	--font: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
+	--text-base: 1.0625rem;
+	--text-sm: 0.9375rem;
+	--radius: 10px;
+	--radius-lg: 16px;
+	--s2: 0.5625rem;
+	--s3: 0.875rem;
+	--s4: 1.25rem;
+}
+
+[data-look='rolig'] body {
+	line-height: 1.65;
+	letter-spacing: 0.006em;
+}
+
+/* Tighter. More rows on a screen, squarer corners, less air — for a long list
+   read at a glance rather than a page read a paragraph at a time. */
+[data-look='taet'] {
+	--text-base: 0.875rem;
+	--text-sm: 0.78125rem;
+	--text-xs: 0.6875rem;
+	--radius: 5px;
+	--radius-lg: 8px;
+	--radius-sm: 3px;
+	--s1: 0.1875rem;
+	--s2: 0.375rem;
+	--s3: 0.5625rem;
+	--s4: 0.75rem;
+}
+
+[data-look='taet'] body {
+	line-height: 1.4;
+}
+
+/* One face for everything, including the prose. Not a joke setting: a monospaced
+   list of tasks lines up in a way a proportional one never does, and some people
+   read code all day and want the same shapes here. */
+[data-look='terminal'] {
+	--font: var(--font-mono);
+	--text-base: 0.875rem;
+	--text-sm: 0.8125rem;
+	--radius: 3px;
+	--radius-lg: 4px;
+	--radius-sm: 2px;
+}
+
+[data-look='terminal'] body {
+	line-height: 1.5;
+	letter-spacing: -0.01em;
+}

web/src/app.html

@@ -22,6 +22,12 @@
 					stored ??
 					(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
 				document.documentElement.dataset.theme = theme;
+
+				// The look changes the typeface and the spacing, so it has to be on
+				// before first paint too — otherwise the page is laid out once in one
+				// face and again in another, which is a visible jump.
+				const look = localStorage.getItem('verdande:look');
+				if (look && look !== 'verdande') document.documentElement.dataset.look = look;
 			} catch (e) {
 				// Private browsing can refuse localStorage; the dark default stands.
 			}

web/src/lib/api.js

@@ -188,6 +188,7 @@ export const api = {
 	updateProfile: (data) => patch('/auth/me', data),
 	// Its own route rather than a field on the profile: that one backs a form with
 	// a save button, and this writes on every click of a chevron.
+	setNavOrder: (order) => put('/auth/nav-order', { order }),
 	setSidebarSections: (sections) => put('/auth/sidebar-sections', { sections }),
 	signup: (data) => post('/auth/signup', data),
 	forgotPassword: (email) => post('/auth/password/forgot', { email }),
@@ -360,6 +361,18 @@ export const api = {
 	authorizeGmail: () => post('/gmail/authorize'),
 	syncGmail: () => post('/gmail/sync'),
 
+	// Notes. Listing and searching are one endpoint because they answer the same
+	// question with different words.
+	notes: (params = {}) => {
+		const q = new URLSearchParams(Object.entries(params).filter(([, v]) => v)).toString();
+		return get('/notes' + (q ? `?${q}` : ''));
+	},
+	note: (id) => get(`/notes/${id}`),
+	createNote: (body) => post('/notes', body),
+	updateNote: (id, body) => patch(`/notes/${id}`, body),
+	deleteNote: (id) => del(`/notes/${id}`),
+	notesLinking: (kind, targetId) => get(`/notes/linking/${kind}/${encodeURIComponent(targetId)}`),
+
 	// Mailboxes read over IMAP. Each belongs to the person who connected it, so
 	// there is no instance-wide registration behind these the way Gmail has one.
 	mailboxes: () => get('/mailboxes'),

web/src/lib/components/NoteEditor.svelte

@@ -0,0 +1,360 @@
+<script>
+	/**
+	 * The note itself.
+	 *
+	 * Rich text, not Markdown source: somebody who writes in Apple Notes presses
+	 * ⌘B and expects the word to go bold, not to grow asterisks. The file underneath
+	 * is still Markdown — see $lib/richtext.js for the seam — so nothing about the
+	 * export changes.
+	 *
+	 * contenteditable with execCommand. It is deprecated and it is also the only
+	 * thing every browser agrees on; writing a selection model from scratch is weeks
+	 * of work and a new class of bug in the one place where losing text is
+	 * unforgivable. When the replacement (the EditContext API) is everywhere, this
+	 * is the file to change.
+	 */
+	import { markdownToHtml, htmlToMarkdown } from '$lib/richtext.js';
+	import { t } from '$lib/i18n.svelte.js';
+
+	let { note, onchange, onsave } = $props();
+
+	let editor;
+	let stylesOpen = $state(false);
+	// Which marks are on where the caret is, so the toolbar shows state rather than
+	// only offering actions.
+	let active = $state({});
+
+	// Loaded when the note changes, never while it is being typed in: writing to
+	// innerHTML puts the caret back at the start, which mid-sentence is unusable.
+	let loadedId = $state(null);
+	$effect(() => {
+		if (!editor || !note || note.id === loadedId) return;
+		editor.innerHTML = markdownToHtml(note.body) || '<p><br></p>';
+		loadedId = note.id;
+		active = {};
+	});
+
+	const STYLES = [
+		{ key: 'title', tag: 'h1', label: 'notes.styleTitle' },
+		{ key: 'heading', tag: 'h2', label: 'notes.styleHeading' },
+		{ key: 'subheading', tag: 'h3', label: 'notes.styleSubheading' },
+		{ key: 'body', tag: 'p', label: 'notes.styleBody' },
+		{ key: 'mono', tag: 'pre', label: 'notes.styleMono' },
+		{ key: 'quote', tag: 'blockquote', label: 'notes.styleQuote' }
+	];
+
+	function apply(command, value) {
+		editor?.focus();
+		// Tags, not inline styles. Left to itself the browser writes
+		// <span style="font-weight: normal"> for an un-bold, which is invisible to a
+		// converter that reads tags — so the change is lost on the way to Markdown
+		// and comes back bold. Asking for tags keeps the document in a shape that
+		// can be written down.
+		try {
+			document.execCommand('styleWithCSS', false, false);
+		} catch {
+			// Not everywhere. The formats below still work; some of them just produce
+			// spans, which is why the converter reads styles as well as tags.
+		}
+		document.execCommand(command, false, value);
+		readState();
+		changed();
+	}
+
+	function setStyle(style) {
+		stylesOpen = false;
+		if (style.key === 'bullet') return apply('insertUnorderedList');
+		if (style.key === 'numbered') return apply('insertOrderedList');
+		apply('formatBlock', style.tag);
+	}
+
+	/** What the caret is standing in, for the toolbar's pressed states. */
+	function readState() {
+		if (!editor) return;
+		try {
+			active = {
+				bold: document.queryCommandState('bold'),
+				italic: document.queryCommandState('italic'),
+				underline: document.queryCommandState('underline'),
+				strike: document.queryCommandState('strikeThrough'),
+				bullet: document.queryCommandState('insertUnorderedList'),
+				numbered: document.queryCommandState('insertOrderedList')
+			};
+		} catch {
+			// Some browsers throw on queryCommandState with no selection. The toolbar
+			// showing nothing is a smaller problem than the editor throwing.
+			active = {};
+		}
+	}
+
+	function changed() {
+		if (!editor) return;
+		onchange?.(htmlToMarkdown(editor));
+	}
+
+	function onkeydown(event) {
+		// The shortcuts people already have in their fingers. execCommand handles
+		// bold and italic itself; underline and strikethrough are claimed here so
+		// they behave the same way.
+		if (!(event.metaKey || event.ctrlKey)) return;
+		const key = event.key.toLowerCase();
+		if (key === 'u') {
+			event.preventDefault();
+			apply('underline');
+		} else if (key === 'x' && event.shiftKey) {
+			event.preventDefault();
+			apply('strikeThrough');
+		}
+	}
+
+	// Pasted text arrives as whatever the source was — a web page brings its fonts,
+	// its colours and its layout with it. Only the words are wanted.
+	function onpaste(event) {
+		event.preventDefault();
+		const text = event.clipboardData?.getData('text/plain') ?? '';
+		document.execCommand('insertText', false, text);
+		changed();
+	}
+</script>
+
+<div class="wrap">
+	<!-- Nothing in here may take focus. A click that moves focus out of the editor
+	     collapses the selection first, so the format lands on nothing — the button
+	     appears to do nothing at all, which is how it read the first time. -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="toolbar" onmousedown={(e) => e.preventDefault()}>
+		<div class="styles">
+			<button
+				class="aa"
+				onclick={() => (stylesOpen = !stylesOpen)}
+				aria-expanded={stylesOpen}
+				aria-label={t('notes.format')}
+				title={t('notes.format')}>Aa</button
+			>
+			{#if stylesOpen}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="menu" role="menu">
+					{#each STYLES as style}
+						<button class={style.key} role="menuitem" onclick={() => setStyle(style)}>
+							{t(style.label)}
+						</button>
+					{/each}
+					<hr />
+					<button
+						class:on={active.bullet}
+						role="menuitem"
+						onclick={() => setStyle({ key: 'bullet' })}>• {t('notes.styleBullet')}</button
+					>
+					<button
+						class:on={active.numbered}
+						role="menuitem"
+						onclick={() => setStyle({ key: 'numbered' })}>1. {t('notes.styleNumbered')}</button
+					>
+				</div>
+			{/if}
+		</div>
+
+		<span class="sep" aria-hidden="true"></span>
+
+		<button class:on={active.bold} onclick={() => apply('bold')} title="⌘B" aria-label={t('notes.bold')}>
+			<strong>B</strong>
+		</button>
+		<button class:on={active.italic} onclick={() => apply('italic')} title="⌘I" aria-label={t('notes.italic')}>
+			<em>I</em>
+		</button>
+		<button class:on={active.underline} onclick={() => apply('underline')} title="⌘U" aria-label={t('notes.underline')}>
+			<u>U</u>
+		</button>
+		<button class:on={active.strike} onclick={() => apply('strikeThrough')} aria-label={t('notes.strike')}>
+			<s>S</s>
+		</button>
+	</div>
+
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		class="page"
+		bind:this={editor}
+		contenteditable="true"
+		role="textbox"
+		aria-multiline="true"
+		aria-label={t('notes.body')}
+		spellcheck="true"
+		oninput={changed}
+		onblur={onsave}
+		onkeyup={readState}
+		onmouseup={readState}
+		{onkeydown}
+		{onpaste}
+	></div>
+</div>
+
+<style>
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		flex: 1;
+	}
+
+	.toolbar {
+		display: flex;
+		align-items: center;
+		gap: var(--s1);
+		padding: 0 0 var(--s2);
+		border-bottom: 1px solid var(--line);
+	}
+
+	.toolbar button {
+		min-width: 28px;
+		height: 28px;
+		border-radius: var(--radius-sm);
+		color: var(--ink-muted);
+		font-size: var(--text-sm);
+	}
+
+	.toolbar button:hover {
+		background: var(--surface);
+		color: var(--ink);
+	}
+
+	.toolbar button.on {
+		background: var(--surface-raised);
+		color: var(--ink);
+	}
+
+	.sep {
+		width: 1px;
+		height: 18px;
+		background: var(--line);
+		margin: 0 var(--s1);
+	}
+
+	.styles {
+		position: relative;
+	}
+
+	.aa {
+		font-weight: 560;
+	}
+
+	.menu {
+		position: absolute;
+		top: calc(100% + var(--s1));
+		left: 0;
+		z-index: 20;
+		min-width: 210px;
+		padding: var(--s1);
+		background: var(--surface-raised);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.menu button {
+		width: 100%;
+		text-align: left;
+		padding: var(--s1) var(--s2);
+		height: auto;
+		min-height: 30px;
+	}
+
+	.menu hr {
+		border: 0;
+		border-top: 1px solid var(--line);
+		margin: var(--s1) 0;
+	}
+
+	/* The menu shows each style in the style it applies, the way Apple Notes does.
+	   Reading the word "Overskrift" set as one is faster than reading a label. */
+	.menu .title {
+		font-size: 1.35rem;
+		font-weight: 700;
+		color: var(--ink);
+	}
+
+	.menu .heading {
+		font-size: 1.1rem;
+		font-weight: 640;
+		color: var(--ink);
+	}
+
+	.menu .subheading {
+		font-weight: 620;
+		color: var(--ink);
+	}
+
+	.menu .mono {
+		font-family: var(--mono, ui-monospace, monospace);
+	}
+
+	.menu .quote {
+		border-left: 2px solid var(--line-strong);
+		padding-left: var(--s2);
+		color: var(--ink-muted);
+	}
+
+	.page {
+		flex: 1;
+		min-height: 50vh;
+		padding: var(--s3) 0;
+		outline: none;
+		line-height: 1.55;
+		overflow-y: auto;
+	}
+
+	/* The document styles. These are the whole of "it should look like Apple Notes":
+	   a title that is a title, and body text that is comfortable to read for a page
+	   at a time. */
+	.page :global(h1) {
+		font-size: 1.5rem;
+		font-weight: 700;
+		margin: 0 0 var(--s2);
+		line-height: 1.25;
+	}
+
+	.page :global(h2) {
+		font-size: 1.2rem;
+		font-weight: 640;
+		margin: var(--s3) 0 var(--s1);
+	}
+
+	.page :global(h3) {
+		font-size: 1rem;
+		font-weight: 620;
+		margin: var(--s3) 0 var(--s1);
+	}
+
+	.page :global(p) {
+		margin: 0 0 var(--s2);
+	}
+
+	.page :global(ul),
+	.page :global(ol) {
+		margin: 0 0 var(--s2);
+		padding-left: var(--s4);
+	}
+
+	.page :global(li) {
+		margin-bottom: var(--s1);
+	}
+
+	.page :global(blockquote) {
+		margin: 0 0 var(--s2);
+		padding-left: var(--s3);
+		border-left: 2px solid var(--line-strong);
+		color: var(--ink-muted);
+	}
+
+	.page :global(pre) {
+		margin: 0 0 var(--s2);
+		font-family: var(--mono, ui-monospace, monospace);
+		white-space: pre-wrap;
+	}
+
+	.page :global(code) {
+		font-family: var(--mono, ui-monospace, monospace);
+		color: var(--accent);
+	}
+</style>

web/src/lib/components/Sidebar.svelte

@@ -117,6 +117,70 @@
 	}
 
 
+	// --- the fixed views ---------------------------------------------------------
+
+	// Delegated is only offered where delegating is possible at all: on an instance
+	// with one person that view can never have anything in it, and a permanent empty
+	// entry is a question the sidebar keeps asking and answering "no".
+	let navItems = $derived(
+		[
+			{ key: 'today', href: '/', label: 'nav.today' },
+			{ key: 'upcoming', href: '/upcoming', label: 'nav.upcoming' },
+			app.projects.some((p) => p.shared)
+				? { key: 'delegated', href: '/uddelegeret', label: 'nav.delegated' }
+				: null,
+			// No href: the inbox is a project and is drawn by projectRow, which knows
+			// its id. It is in this list only so it can be dragged with the others.
+			{ key: 'inbox', label: 'nav.inbox' }
+		].filter(Boolean)
+	);
+
+	let orderedNav = $derived(
+		app
+			.navOrder(navItems.map((i) => i.key))
+			.map((key) => navItems.find((i) => i.key === key))
+			.filter(Boolean)
+	);
+
+	let draggingNav = $state(null);
+	let overNav = $state(null);
+
+	function onNavDragStart(event, key) {
+		draggingNav = key;
+		event.dataTransfer.effectAllowed = 'move';
+		// A payload, because Firefox refuses to start a drag without one.
+		event.dataTransfer.setData('text/plain', key);
+	}
+
+	function onNavDragOver(event, key) {
+		if (!draggingNav || key === draggingNav) return;
+		event.preventDefault();
+		overNav = key;
+	}
+
+	function clearNavDrag() {
+		draggingNav = null;
+		overNav = null;
+	}
+
+	async function onNavDrop(event, key) {
+		const moved = draggingNav;
+		// Checked before anything is swallowed. Stopping the event first meant a task
+		// dragged onto I dag never reached the handler that gives it a date — the row
+		// took the drop and then discovered it was not for it.
+		if (!moved || moved === key) {
+			clearNavDrag();
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		clearNavDrag();
+
+		const keys = orderedNav.map((i) => i.key).filter((k) => k !== moved);
+		keys.splice(keys.indexOf(key), 0, moved);
+		await app.setNavOrder(keys);
+	}
+
 	// --- resizing -------------------------------------------------------------------
 
 	let resizing = $state(false);
@@ -340,46 +404,71 @@
 
 	<div class="views">
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<a
-			href="/"
-			class:active={current === '/'}
-			class:receiving={overToday}
-			onclick={onnavigate}
-			ondragover={(e) => {
-				if (!carries(e, TASK)) return;
-				accept(e);
-				overToday = true;
-			}}
-			ondragleave={() => (overToday = false)}
-			ondrop={onDropOnToday}
-		>
-			<span class="dot today" aria-hidden="true"></span>
-			{t('nav.today')}
-		</a>
-		<a href="/upcoming" class:active={current === '/upcoming'} onclick={onnavigate}>
+		<!-- The fixed views, in the order this person put them.
+		     Drawn from a list rather than written out, because they can be reordered
+		     now and a hand-written run cannot be. Unknown keys are dropped and new
+		     ones appended, so adding a view later does not strand anybody's order. -->
+		{#each orderedNav as item (item.key)}
+			{#if item.key === 'inbox'}
+				{#if app.inbox}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="navrow"
+						class:dragging={draggingNav === item.key}
+						class:over={overNav === item.key}
+						ondragover={(e) => onNavDragOver(e, item.key)}
+						ondragleave={() => (overNav = null)}
+						ondrop={(e) => onNavDrop(e, item.key)}
+					>
+						{@render grip(item.key)}
+						{@render projectRow(app.inbox, false)}
+					</div>
+				{/if}
+			{:else}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="navrow"
+					class:dragging={draggingNav === item.key}
+					class:over={overNav === item.key}
+					ondragover={(e) => onNavDragOver(e, item.key)}
+					ondragleave={() => (overNav = null)}
+					ondrop={(e) => onNavDrop(e, item.key)}
+				>
+					{@render grip(item.key)}
+					<!-- I dag also takes a task dropped on it — the most-made rescheduling
+					     there is, and the sidebar is where the pointer already is. The
+					     handlers were lost when this run became a list; the test caught
+					     it, which is the second time that drop has earned its test. -->
+					<a
+						href={item.href}
+						class:active={current === item.href}
+						class:receiving={item.key === 'today' && overToday}
+						onclick={onnavigate}
+						ondragover={(e) => {
+							if (item.key !== 'today' || !carries(e, TASK)) return;
+							accept(e);
+							overToday = true;
+						}}
+						ondragleave={() => (overToday = false)}
+						ondrop={(e) => item.key === 'today' && onDropOnToday(e)}
+					>
+						<span class="dot" class:today={item.key === 'today'} aria-hidden="true"></span>
+						{t(item.label)}
+					</a>
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	<!-- Notes stand apart, with a rule above them.
+	     They are not a fourth way of looking at the same tasks, which is what
+	     everything above is; they are the other half of the program. Sitting in that
+	     run made them read as one more filter. -->
+	<div class="apart">
+		<a href="/noter" class:active={current === '/noter'} onclick={onnavigate}>
 			<span class="dot" aria-hidden="true"></span>
-			{t('nav.upcoming')}
+			{t('notes.title')}
 		</a>
-		{#if app.projects.some((p) => p.shared)}
-			<!-- Only where delegating is possible at all. On an instance with one
-			     person this view can never have anything in it, and a permanent empty
-			     entry is a question the sidebar keeps asking and answering "no". -->
-			<a href="/uddelegeret" class:active={current === '/uddelegeret'} onclick={onnavigate}>
-				<span class="dot" aria-hidden="true"></span>
-				{t('nav.delegated')}
-			</a>
-		{/if}
-		<!-- After the three views of what is left, because it is the one that is not
-		     about what is left. It earns a permanent place rather than a toggle in
-		     each view: somebody looking for a task they closed by mistake does not
-		     know which view they closed it in. -->
-		<a href="/faerdige" class:active={current === '/faerdige'} onclick={onnavigate}>
-			<span class="dot" aria-hidden="true"></span>
-			{t('done.title')}
-		</a>
-		{#if app.inbox}
-			{@render projectRow(app.inbox, false)}
-		{/if}
 	</div>
 
 	<!-- One row for every project the sidebar shows — your own, the Inbox and the
@@ -387,6 +476,21 @@
 	     three copies of that would be three chances to fix a bug in two of them.
 	     Only your own reorder: `sort_order` is a column on the project, so a shared
 	     one stays where its owner put it. -->
+	<!-- A handle rather than the whole row.
+	     Making the row draggable made everything inside it draggable too, and the
+	     sidebar is already a drop target for tasks — a task dragged onto I dag
+	     stopped landing, because the row had claimed the gesture. A grip claims
+	     nothing until it is grabbed. -->
+	{#snippet grip(key)}
+		<span
+			class="grip"
+			draggable="true"
+			ondragstart={(e) => onNavDragStart(e, key)}
+			ondragend={clearNavDrag}
+			aria-hidden="true">⠿</span
+		>
+	{/snippet}
+
 	{#snippet projectRow(project, sortable)}
 		<a
 			href="/projekt/{project.id}"
@@ -412,8 +516,16 @@
 		>
 			<span class="dot" style="background: {colorVar(project.color)}" aria-hidden="true"></span>
 			{projectName(project)}
-			{#if project.shared}
-				<span class="count">{project.member_count}</span>
+			<!-- Open tasks, not people. The same grey number meant three things in this
+			     one column — people at a project, projects at a group, tasks at a label
+			     — and in a task app a number beside a project is read as tasks. Who
+			     else is in it is on the project's own page.
+
+			     Shown when there is something left rather than when the project is
+			     shared, which is what it keyed on before: a nought beside every empty
+			     project is a column of noughts. -->
+			{#if project.open_count > 0}
+				<span class="count">{project.open_count}</span>
 			{/if}
 		</a>
 	{/snippet}
@@ -855,6 +967,64 @@
 		gap: 1px;
 	}
 
+	.navrow {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+
+	/* Takes no room until it is wanted: it sits in the padding the row already has,
+	   so nothing moves when it appears. */
+	.grip {
+		position: absolute;
+		left: -2px;
+		width: 12px;
+		text-align: center;
+		font-size: 10px;
+		line-height: 1;
+		color: var(--ink-faint);
+		cursor: grab;
+		opacity: 0;
+		transition: opacity var(--fast) var(--ease);
+	}
+
+	.navrow:hover .grip {
+		opacity: 1;
+	}
+
+	.navrow > :global(a) {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.navrow.dragging {
+		opacity: 0.4;
+	}
+
+	/* A line where it will land, not a box around what it will land on: the first
+	   reads as a position and the second as a target. */
+	.navrow.over::before {
+		content: '';
+		position: absolute;
+		top: -1px;
+		left: var(--s2);
+		right: var(--s2);
+		height: 2px;
+		background: var(--accent);
+		border-radius: 1px;
+	}
+
+	/* A rule and a little air, which is the whole of "separate". Notes are the other
+	   half of the program, not a fifth way of looking at the same tasks. */
+	.apart {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		margin: var(--s3) 0;
+		padding-top: var(--s3);
+		border-top: 1px solid var(--line);
+	}
+
 	.group-head {
 		display: flex;
 		align-items: center;

web/src/lib/locales/da.js

@@ -16,6 +16,39 @@
  */
 export const da = {
 	// --- the shell ---------------------------------------------------------------
+	'notes.shareWith': 'Del i',
+	'notes.private': 'Kun mig',
+	'notes.shared': 'Noten er delt med projektets folk.',
+	'notes.unshared': 'Noten er din igen.',
+	'notes.save': 'Gem',
+	'notes.format': 'Formatér',
+	'notes.bold': 'Fed',
+	'notes.italic': 'Kursiv',
+	'notes.underline': 'Understreget',
+	'notes.strike': 'Gennemstreget',
+	'notes.styleTitle': 'Titel',
+	'notes.styleHeading': 'Overskrift',
+	'notes.styleSubheading': 'Underrubrik',
+	'notes.styleBody': 'Brødtekst',
+	'notes.styleMono': 'Monotype',
+	'notes.styleQuote': 'Blokcitat',
+	'notes.styleBullet': 'Punktliste',
+	'notes.styleNumbered': 'Nummereret liste',
+	'notes.favourite': 'Gør til favorit',
+	'notes.unfavourite': 'Fjern som favorit',
+	'notes.title': 'Noter',
+	'notes.new': 'Ny note',
+	'notes.search': 'Søg i noter',
+	'notes.body': 'Notens tekst',
+	'notes.placeholder': 'Skriv. #projekt og [[en anden note]] bliver til henvisninger.',
+	'notes.untitled': 'Uden titel',
+	'notes.noneYet': 'Ingen noter endnu.',
+	'notes.noneFound': 'Ingen noter matcher.',
+	'notes.pickOne': 'Vælg en note, eller lav en ny.',
+	'notes.saving': 'Gemmer …',
+	'notes.saved': 'Gemt',
+	'notes.delete': 'Slet',
+	'notes.deleteNote': 'Slet "{name}"? Den kan hentes tilbage fra papirkurven.',
 	'nav.today': 'I dag',
 	'nav.upcoming': 'Kommende',
 	'nav.delegated': 'Venter på andre',
@@ -111,6 +144,16 @@ export const da = {
 	'account.appearance': 'Udseende',
 	'account.appearanceHint':
 		'Gemmes i denne browser. Det er en egenskab ved den skærm, du sidder ved — en bærbar i solen og en skærm i et mørkt rum vil have hvert sit svar.',
+	'account.look': 'Udseende',
+	'account.lookHint': 'Temaet siger hvor lyst. Det her siger hvordan det læses — skrift, luft og hjørner. De to kan kombineres frit.',
+	'look.verdande': 'Verdande',
+	'look.verdandeNote': 'Som du kender den.',
+	'look.rolig': 'Rolig',
+	'look.roligNote': 'Serif, mere luft. Til at læse og skrive i.',
+	'look.taet': 'Tæt',
+	'look.taetNote': 'Flere rækker på skærmen, mindre luft.',
+	'look.terminal': 'Terminal',
+	'look.terminalNote': 'Én bredde til det hele. Alt flugter.',
 	'account.password': 'Adgangskode',
 	'account.passwordHint':
 		'At skifte den logger alle andre sessioner ud — hvilket for det meste er grunden til at gøre det.',
@@ -305,6 +348,8 @@ export const da = {
 	'data.csvFile': 'CSV-fil',
 	'data.importing': 'Importerer …',
 	'data.openProject': 'Åbn projektet',
+	'data.doneHint': 'Alt du har lukket, nyeste først. Lukkede du noget ved en fejl, ligger det her — og kan åbnes igen.',
+	'data.openDone': 'Åbn færdige opgaver',
 	'data.trash': 'Papirkurv',
 	'data.trashEmpty': 'Papirkurven er tom.',
 	'data.restore': 'Hent tilbage',
@@ -377,6 +422,7 @@ export const da = {
 	'data.templatesHint':
 		'Et projekt gemt som en form, der kan bruges igen. Datoerne i skabelonen er relative, så de bliver regnet ud fra den startdato, du vælger.',
 
+	'keys.foldSidebar': 'fold sidebjælken væk',
 	'keys.anyLetter': 'et bogstav',
 	'keys.typeToCapture': 'begynder en opgave, med bogstavet i feltet',
 	'keys.navigation': 'Navigation',

web/src/lib/locales/en.js

@@ -12,6 +12,39 @@
  */
 export const en = {
 	// --- the shell ---------------------------------------------------------------
+	'notes.shareWith': 'Share in',
+	'notes.private': 'Only me',
+	'notes.shared': "The note is shared with the project's people.",
+	'notes.unshared': 'The note is yours again.',
+	'notes.save': 'Save',
+	'notes.format': 'Format',
+	'notes.bold': 'Bold',
+	'notes.italic': 'Italic',
+	'notes.underline': 'Underline',
+	'notes.strike': 'Strikethrough',
+	'notes.styleTitle': 'Title',
+	'notes.styleHeading': 'Heading',
+	'notes.styleSubheading': 'Subheading',
+	'notes.styleBody': 'Body',
+	'notes.styleMono': 'Monospaced',
+	'notes.styleQuote': 'Block quote',
+	'notes.styleBullet': 'Bulleted list',
+	'notes.styleNumbered': 'Numbered list',
+	'notes.favourite': 'Make a favourite',
+	'notes.unfavourite': 'Remove from favourites',
+	'notes.title': 'Notes',
+	'notes.new': 'New note',
+	'notes.search': 'Search notes',
+	'notes.body': "The note's text",
+	'notes.placeholder': 'Write. #project and [[another note]] become references.',
+	'notes.untitled': 'Untitled',
+	'notes.noneYet': 'No notes yet.',
+	'notes.noneFound': 'No notes match.',
+	'notes.pickOne': 'Pick a note, or write a new one.',
+	'notes.saving': 'Saving …',
+	'notes.saved': 'Saved',
+	'notes.delete': 'Delete',
+	'notes.deleteNote': 'Delete "{name}"? It can be brought back from the trash.',
 	'nav.today': 'Today',
 	'nav.upcoming': 'Upcoming',
 	'nav.delegated': 'Waiting on others',
@@ -107,6 +140,16 @@ export const en = {
 	'account.appearance': 'Appearance',
 	'account.appearanceHint':
 		'Kept in this browser. It is a property of the screen you are sitting at — a laptop in the sun and a monitor in a dark room want different answers.',
+	'account.look': 'Appearance',
+	'account.lookHint': 'The theme says how bright. This says how it reads — typeface, air and corners. The two combine freely.',
+	'look.verdande': 'Verdande',
+	'look.verdandeNote': 'As you know it.',
+	'look.rolig': 'Calm',
+	'look.roligNote': 'Serif, more air. For reading and writing.',
+	'look.taet': 'Tight',
+	'look.taetNote': 'More rows on screen, less air.',
+	'look.terminal': 'Terminal',
+	'look.terminalNote': 'One width for everything. It all lines up.',
 	'account.password': 'Password',
 	'account.passwordHint':
 		'Changing it signs every other session out — which is usually the reason to do it.',
@@ -300,6 +343,8 @@ export const en = {
 	'data.csvFile': 'CSV file',
 	'data.importing': 'Importing …',
 	'data.openProject': 'Open the project',
+	'data.doneHint': 'Everything you have closed, newest first. Closed something by mistake and it is here — and can be opened again.',
+	'data.openDone': 'Open finished tasks',
 	'data.trash': 'Trash',
 	'data.trashEmpty': 'The trash is empty.',
 	'data.restore': 'Restore',
@@ -372,6 +417,7 @@ export const en = {
 	'data.templatesHint':
 		'A project saved as a shape you can use again. The dates in a template are relative, so they are worked out from the start date you pick.',
 
+	'keys.foldSidebar': 'fold the sidebar away',
 	'keys.anyLetter': 'any letter',
 	'keys.typeToCapture': 'starts a task, with the letter already in the field',
 	'keys.navigation': 'Navigation',

web/src/lib/richtext.js

@@ -0,0 +1,193 @@
+/**
+ * Between what you see and what is stored.
+ *
+ * The editor is rich text; the note on disk is Markdown. That is not a compromise
+ * anybody has to live with silently — it is the reason the export is trustworthy:
+ * the file a note becomes is the file it already was. So these two functions are
+ * the seam, and they have to agree with each other exactly, or a note changes
+ * shape a little every time it is opened and saved.
+ *
+ * The set of styles is deliberately small and matches what Apple Notes offers,
+ * because that is the vocabulary somebody coming from there already has:
+ *
+ *     Titel        → # 
+ *     Overskrift   → ## 
+ *     Underrubrik  → ### 
+ *     Brødtekst    → nothing
+ *     Monotype     → four spaces
+ *     Punktliste   → - 
+ *     Nummereret   → 1. 
+ *     Blokcitat    → > 
+ *
+ * Bold, italic and strikethrough have Markdown of their own. Underline does not —
+ * there is no such thing in any Markdown dialect — so it is stored as inline HTML,
+ * which every Markdown reader passes through untouched. It is the one place where
+ * the file is not pure Markdown, and it is that rather than dropping a style the
+ * source program has.
+ */
+
+const BLOCKS = [
+	{ style: 'title', tag: 'h1', prefix: '# ' },
+	{ style: 'heading', tag: 'h2', prefix: '## ' },
+	{ style: 'subheading', tag: 'h3', prefix: '### ' },
+	{ style: 'quote', tag: 'blockquote', prefix: '> ' },
+	{ style: 'mono', tag: 'pre', prefix: '    ' }
+];
+
+const escapeHtml = (s) =>
+	s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+/** Inline marks, innermost first so a bold word inside italics survives both. */
+function inlineToHtml(text) {
+	return escapeHtml(text)
+		.replace(/&lt;u&gt;(.+?)&lt;\/u&gt;/g, '<u>$1</u>')
+		.replace(/`([^`]+)`/g, '<code>$1</code>')
+		.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+		.replace(/~~(.+?)~~/g, '<s>$1</s>')
+		.replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>');
+}
+
+/**
+ * markdownToHtml renders a note for the editor.
+ *
+ * Every line becomes exactly one block. Markdown would normally join consecutive
+ * lines into one paragraph; here it must not, because the person typed a line and
+ * expects to get it back — an editor that silently reflows what somebody wrote is
+ * an editor they stop trusting.
+ */
+export function markdownToHtml(markdown) {
+	const lines = (markdown ?? '').split('\n');
+	const out = [];
+	let list = null;
+
+	const closeList = () => {
+		if (list) {
+			out.push(`</${list}>`);
+			list = null;
+		}
+	};
+
+	for (const line of lines) {
+		const bullet = /^[-*+]\s+(.*)$/.exec(line);
+		const numbered = /^\d+\.\s+(.*)$/.exec(line);
+
+		if (bullet || numbered) {
+			const want = bullet ? 'ul' : 'ol';
+			if (list !== want) {
+				closeList();
+				out.push(`<${want}>`);
+				list = want;
+			}
+			out.push(`<li>${inlineToHtml((bullet ?? numbered)[1])}</li>`);
+			continue;
+		}
+		closeList();
+
+		const block = BLOCKS.find((b) =>
+			b.prefix === '    ' ? line.startsWith('    ') : line.startsWith(b.prefix)
+		);
+		if (block) {
+			out.push(`<${block.tag}>${inlineToHtml(line.slice(block.prefix.length))}</${block.tag}>`);
+			continue;
+		}
+
+		// An empty line is still a line. Without the break the browser collapses the
+		// block to nothing and the caret has nowhere to stand.
+		out.push(`<p>${line.trim() === '' ? '<br>' : inlineToHtml(line)}</p>`);
+	}
+	closeList();
+	return out.join('');
+}
+
+/** The inline marks, read back off the DOM. */
+function inlineToMarkdown(node) {
+	if (node.nodeType === Node.TEXT_NODE) return node.textContent;
+	if (node.nodeType !== Node.ELEMENT_NODE) return '';
+
+	const inner = [...node.childNodes].map(inlineToMarkdown).join('');
+	switch (node.tagName) {
+		case 'STRONG':
+		case 'B':
+			return inner ? `**${inner}**` : '';
+		case 'EM':
+		case 'I':
+			return inner ? `*${inner}*` : '';
+		case 'S':
+		case 'STRIKE':
+		case 'DEL':
+			return inner ? `~~${inner}~~` : '';
+		case 'U':
+			return inner ? `<u>${inner}</u>` : '';
+		case 'CODE':
+			return inner ? `\`${inner}\`` : '';
+		case 'SPAN': {
+			// The browser's own way of saying bold or italic when it is writing styles
+			// rather than tags. Read as well as tags, because `styleWithCSS` is not
+			// honoured everywhere and a note must not lose a format on the way out.
+			const style = node.getAttribute('style') ?? '';
+			if (/font-weight:\s*(bold|[6-9]00)/.test(style)) return inner ? `**${inner}**` : '';
+			if (/font-style:\s*italic/.test(style)) return inner ? `*${inner}*` : '';
+			if (/text-decoration[^;]*line-through/.test(style)) return inner ? `~~${inner}~~` : '';
+			if (/text-decoration[^;]*underline/.test(style)) return inner ? `<u>${inner}</u>` : '';
+			return inner;
+		}
+		case 'BR':
+			return '';
+		default:
+			return inner;
+	}
+}
+
+/**
+ * htmlToMarkdown reads the editor back.
+ *
+ * Written against the DOM rather than against a string of HTML, because that is
+ * what contenteditable actually produces — and what it produces is not tidy. The
+ * browser will nest, split and re-wrap as somebody types, and a regular expression
+ * over that is a guess.
+ */
+export function htmlToMarkdown(root) {
+	const lines = [];
+
+	const walk = (node) => {
+		for (const child of node.childNodes) {
+			if (child.nodeType === Node.TEXT_NODE) {
+				if (child.textContent.trim()) lines.push(child.textContent);
+				continue;
+			}
+			if (child.nodeType !== Node.ELEMENT_NODE) continue;
+
+			switch (child.tagName) {
+				case 'UL':
+				case 'OL': {
+					let n = 1;
+					for (const li of child.children) {
+						const text = inlineToMarkdown(li).trim();
+						lines.push(child.tagName === 'UL' ? `- ${text}` : `${n++}. ${text}`);
+					}
+					break;
+				}
+				case 'DIV':
+					// The browser's own container when nothing else applies. Read through
+					// it rather than treating it as a block, or every paste adds a level.
+					if ([...child.children].some((c) => /^(P|H[1-3]|UL|OL|PRE|BLOCKQUOTE|DIV)$/.test(c.tagName))) {
+						walk(child);
+					} else {
+						lines.push(inlineToMarkdown(child));
+					}
+					break;
+				default: {
+					const block = BLOCKS.find((b) => b.tag === child.tagName.toLowerCase());
+					const text = inlineToMarkdown(child);
+					lines.push(block ? block.prefix + text : text);
+				}
+			}
+		}
+	};
+
+	walk(root);
+	// Trailing blank lines are what an editor accumulates from people pressing
+	// return at the end; they are not content and they grow every time.
+	while (lines.length && lines[lines.length - 1].trim() === '') lines.pop();
+	return lines.join('\n');
+}

web/src/lib/stores.svelte.js

@@ -156,6 +156,7 @@ class AppState {
 				break;
 			case 'task.deleted':
 				this.tasks = this.tasks.filter((t) => t.id !== task?.id);
+				this.refreshCounts();
 				break;
 
 			// Projects and labels belong to a person rather than to a project, so
@@ -246,6 +247,11 @@ class AppState {
 	 */
 	upsert(task) {
 		if (!task?.id) return;
+		// Before the branch, not after it. A task that is already in the list can
+		// still change the counts — moved to another project, finished in another
+		// tab, a recurring one that closed and opened itself — and the branch below
+		// returns early for exactly those.
+		this.refreshCounts();
 		if (this.tasks.some((t) => t.id === task.id)) {
 			this.replace(task.id, task);
 			return;
@@ -301,6 +307,7 @@ class AppState {
 		const what = task?.content ?? '';
 
 		await this.#optimistic(id, { completed: true }, () => api.completeTask(id));
+		this.refreshCounts();
 
 		if (!repeats) {
 			this.toast(t('task.completedUndo', { what: truncate(what) }), {
@@ -312,6 +319,7 @@ class AppState {
 
 	async reopen(id) {
 		await this.#optimistic(id, { completed: false }, () => api.reopenTask(id));
+		this.refreshCounts();
 	}
 
 	async update(id, patch) {
@@ -373,6 +381,7 @@ class AppState {
 		this.tasks = this.tasks.filter((t) => t.id !== id);
 		try {
 			await api.deleteTask(id);
+			this.refreshCounts();
 		} catch (e) {
 			this.tasks = previous;
 			this.toast(humanMessage(e));
@@ -417,6 +426,56 @@ class AppState {
 		this.projects = projects;
 	}
 
+	/**
+	 * Brings the sidebar's per-project counts back in line after tasks have moved.
+	 *
+	 * The count is open tasks now, which changes on every add, finish and delete —
+	 * where the old one, how many people are in it, changed about twice a year. It
+	 * would be quicker to add and subtract locally, and it would be wrong within a
+	 * day: a task moved between projects, one finished in another tab, a recurring
+	 * one that closed and reopened itself. Asking the server is one request and
+	 * cannot drift.
+	 *
+	 * Coalesced, because a paste of five tasks is five calls in the same tick and
+	 * the answer to all of them is the same.
+	 */
+	#countsRunning = false;
+	#countsAgain = false;
+	#countsTimer = null;
+
+	refreshCounts() {
+		// Two windows to coalesce over, not one. Collapsing calls that arrive within
+		// a tick is the easy half; the half that matters is a change arriving while
+		// the request is already in flight. Dropping those left the sidebar showing
+		// the count as it was one task ago, which is the state the test caught and
+		// which nothing but a reload would have corrected.
+		if (this.#countsRunning) {
+			this.#countsAgain = true;
+			return;
+		}
+		clearTimeout(this.#countsTimer);
+		this.#countsTimer = setTimeout(async () => {
+			this.#countsRunning = true;
+			try {
+				const { projects } = await api.listProjects();
+				const counts = new Map(projects.map((p) => [p.id, p.open_count]));
+				this.projects = this.projects.map((p) =>
+					counts.has(p.id) ? { ...p, open_count: counts.get(p.id) } : p
+				);
+			} catch {
+				// The number is a convenience; failing to update it must not put an
+				// error in front of somebody who was only ticking something off.
+			} finally {
+				this.#countsRunning = false;
+			}
+			if (this.#countsAgain) {
+				this.#countsAgain = false;
+				this.refreshCounts();
+			}
+		}, 120);
+	}
+
+
 	/**
 	 * Puts the projects in the given order.
 	 *
@@ -503,6 +562,31 @@ class AppState {
 		}
 	}
 
+	/**
+	 * The order of the fixed views, as keys.
+	 *
+	 * Unknown keys are dropped and missing ones appended, so the stored order never
+	 * has to be migrated when a view is added or taken away — which has already
+	 * happened once, when Færdige left the sidebar.
+	 */
+	navOrder(keys) {
+		const saved = this.user?.nav_order ?? [];
+		const known = new Set(keys);
+		const ordered = saved.filter((k) => known.has(k));
+		return [...ordered, ...keys.filter((k) => !ordered.includes(k))];
+	}
+
+	async setNavOrder(order) {
+		const before = this.user?.nav_order ?? [];
+		this.user = { ...this.user, nav_order: order };
+		try {
+			await api.setNavOrder(order);
+		} catch (e) {
+			this.user = { ...this.user, nav_order: before };
+			this.toast(humanMessage(e));
+		}
+	}
+
 	sectionCollapsed(key) {
 		return (this.user?.sidebar_collapsed ?? []).includes(key);
 	}
@@ -785,6 +869,45 @@ export const THEMES = [
 	{ id: 'contrast', name: 'theme.contrast', note: 'theme.contrastNote', dark: false }
 ];
 
+/**
+ * The looks: how it reads, as opposed to how bright it is.
+ *
+ * Separate from the themes because they are separate questions. Somebody who
+ * wants a serif face at night should not have to give up the dark palette to get
+ * one, and the two multiply out to fifteen appearances from eight small blocks of
+ * CSS rather than needing one block each.
+ */
+export const LOOKS = [
+	{ id: 'verdande', name: 'look.verdande', note: 'look.verdandeNote' },
+	{ id: 'rolig', name: 'look.rolig', note: 'look.roligNote' },
+	{ id: 'taet', name: 'look.taet', note: 'look.taetNote' },
+	{ id: 'terminal', name: 'look.terminal', note: 'look.terminalNote' }
+];
+
+class Look {
+	current = $state(
+		typeof document === 'undefined'
+			? 'verdande'
+			: (document.documentElement.dataset.look ?? 'verdande')
+	);
+
+	set(id) {
+		if (!LOOKS.some((l) => l.id === id)) return;
+		this.current = id;
+		// The default carries no attribute, so the plain tokens are the plain tokens
+		// and there is nothing to override them back to.
+		if (id === 'verdande') delete document.documentElement.dataset.look;
+		else document.documentElement.dataset.look = id;
+		try {
+			localStorage.setItem('verdande:look', id);
+		} catch {
+			// Private browsing; the choice simply will not persist.
+		}
+	}
+}
+
+export const look = new Look();
+
 /** Theme, kept in localStorage and applied to the document element. */
 class Theme {
 	/**

web/src/routes/+layout.svelte

@@ -60,6 +60,15 @@
 			paletteOpen = true;
 			return;
 		}
+		// Folding the sidebar had a button and nothing else, and a rectangle with a
+		// line down it is not a word: somebody who wanted the menu out of the way
+		// asked for the feature that was already there. ⌘B is where an editor puts
+		// it. Works while typing as well — it moves nothing in the field.
+		if ((event.metaKey || event.ctrlKey) && (event.key === 'b' || event.key === 'B')) {
+			event.preventDefault();
+			sidebar.toggle();
+			return;
+		}
 		if (typing || event.metaKey || event.ctrlKey || event.altKey) return;
 		if (app.detailId) return;
 
@@ -123,7 +132,7 @@
 					onclick={() => sidebar.toggle()}
 					aria-label={sidebar.collapsed ? t('nav.showSidebar') : t('nav.hideSidebar')}
 					aria-pressed={sidebar.collapsed}
-					title={sidebar.collapsed ? t('nav.showSidebar') : t('nav.hideSidebar')}
+					title={(sidebar.collapsed ? t('nav.showSidebar') : t('nav.hideSidebar')) + ' (⌘B)'}
 				>
 					<svg viewBox="0 0 24 24" aria-hidden="true">
 						<rect x="3" y="4" width="18" height="16" rx="2" />

web/src/routes/genveje/+page.svelte

@@ -14,7 +14,8 @@
 			title: t('keys.navigation'),
 			keys: [
 				[t('keys.anyLetter'), t('keys.typeToCapture')],
-				['⌘K / Ctrl+K', t('nav.search')]
+				['⌘K / Ctrl+K', t('nav.search')],
+				['⌘B / Ctrl+B', t('keys.foldSidebar')]
 			]
 		},
 		{

web/src/routes/indstillinger/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	/** Konto: who you are, your password, and the second factor. */
 	import { api, humanMessage } from '$lib/api.js';
-	import { app, theme, THEMES } from '$lib/stores.svelte.js';
+	import { app, theme, THEMES, look, LOOKS } from '$lib/stores.svelte.js';
 	import { t, plural, i18n } from '$lib/i18n.svelte.js';
 	import { supported, register } from '$lib/passkey.js';
 	import { ago } from '$lib/when.js';
@@ -330,6 +330,29 @@
 			</button>
 		{/each}
 	</div>
+
+	<!-- The second axis. A theme says how bright, a look says how it reads — and
+	     they are separate settings because they are separate questions. -->
+	<div class="looks">
+		<h3>{t('account.look')}</h3>
+		<p class="hint">{t('account.lookHint')}</p>
+		<div class="look-row">
+			{#each LOOKS as option (option.id)}
+				<button
+					class="look-card"
+					class:chosen={look.current === option.id}
+					onclick={() => look.set(option.id)}
+					aria-pressed={look.current === option.id}
+				>
+					<!-- Each card is written in the face it selects, because that is the
+					     only part of the choice a name cannot carry. -->
+					<span class="look-sample" data-look={option.id} aria-hidden="true">Aa</span>
+					<span class="theme-name">{t(option.name)}</span>
+					<span class="theme-note">{t(option.note)}</span>
+				</button>
+			{/each}
+		</div>
+	</div>
 </section>
 
 <section class="panel">
@@ -528,6 +551,46 @@
 </section>
 
 <style>
+	.looks {
+		margin-top: var(--s4);
+		padding-top: var(--s3);
+		border-top: 1px solid var(--line);
+	}
+
+	.looks h3 {
+		font-size: var(--text-sm);
+		margin-bottom: var(--s1);
+	}
+
+	.look-row {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+		gap: var(--s2);
+		margin-top: var(--s3);
+	}
+
+	.look-card {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--s1);
+		padding: var(--s3);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		text-align: left;
+	}
+
+	.look-card.chosen {
+		border-color: var(--accent);
+	}
+
+	.look-sample {
+		font-family: var(--font);
+		font-size: 1.5rem;
+		line-height: 1;
+		color: var(--ink);
+	}
+
 	form {
 		display: flex;
 		flex-direction: column;

web/src/routes/indstillinger/data/+page.svelte

@@ -225,6 +225,19 @@
 	{/if}
 </section>
 
+<!-- Færdige used to be a permanent entry in the sidebar. It is a rare errand next
+     to the four that are read every day, and it belongs with the other "where did
+     that go" questions rather than above them. -->
+<section class="panel">
+	<header>
+		<h2>{t('done.title')}</h2>
+		<p class="hint">{t('data.doneHint')}</p>
+	</header>
+	<div class="row">
+		<a class="ghost" href="/faerdige">{t('data.openDone')}</a>
+	</div>
+</section>
+
 <section class="panel">
 	<header>
 		<h2>{t('data.trash')}</h2>

web/src/routes/noter/+page.svelte

@@ -0,0 +1,529 @@
+<script>
+	/**
+	 * Notes.
+	 *
+	 * A list on the left, the note itself on the right. Not a grid of cards: a note
+	 * is read by its first line far more often than by its whole self, and a list
+	 * shows twenty of those where a grid shows six.
+	 *
+	 * Markdown in a plain textarea for now. The live preview — where the marks show
+	 * only in the line the cursor is in — is the next piece and the expensive one;
+	 * this is the shape it will sit inside, and everything else is already true
+	 * without it.
+	 */
+	import { api, humanMessage } from '$lib/api.js';
+	import { app } from '$lib/stores.svelte.js';
+	import { t } from '$lib/i18n.svelte.js';
+	import NoteEditor from '$lib/components/NoteEditor.svelte';
+
+	let notes = $state([]);
+	let selected = $state(null);
+	let query = $state('');
+	let status = $state('loading');
+	let saving = $state(false);
+
+	// The text being edited, kept apart from the note it came from so a save that
+	// arrives late cannot overwrite what has been typed since.
+	let draft = $state('');
+	let timer;
+
+	$effect(() => {
+		load(query);
+	});
+
+	async function load(q) {
+		try {
+			notes = (await api.notes(q ? { q } : {})).notes ?? [];
+			status = 'ready';
+			if (selected && !notes.some((n) => n.id === selected.id)) open(notes[0] ?? null);
+		} catch (e) {
+			status = 'failed';
+			app.toast(humanMessage(e));
+		}
+	}
+
+	function open(note) {
+		clearTimeout(timer);
+		selected = note;
+		draft = note?.body ?? '';
+	}
+
+	async function create() {
+		try {
+			const note = await api.createNote({ body: '' });
+			notes = [note, ...notes];
+			open(note);
+			document.querySelector('.editor textarea')?.focus();
+		} catch (e) {
+			app.toast(humanMessage(e));
+		}
+	}
+
+	/**
+	 * Saved as you stop typing rather than on a button.
+	 *
+	 * A note is the one place in this program where an hour of writing can be lost
+	 * to one mis-click, and a Gem-knap is a button that exists to be forgotten. The
+	 * delay is long enough that a sentence is one save and not twenty.
+	 */
+	function typed() {
+		clearTimeout(timer);
+		timer = setTimeout(save, 700);
+	}
+
+	async function save() {
+		if (!selected) return;
+		const id = selected.id;
+		const body = draft;
+		saving = true;
+		try {
+			const saved = await api.updateNote(id, { body });
+			notes = notes.map((n) => (n.id === id ? saved : n));
+			// Only if it is still the one on screen: switching notes mid-save must not
+			// drag the previous one's title back onto this one.
+			if (selected?.id === id) selected = saved;
+		} catch (e) {
+			app.toast(humanMessage(e));
+		} finally {
+			saving = false;
+		}
+	}
+
+	/**
+	 * Favourites are the pinned ones. The list already puts them first, so marking
+	 * one is the same act as saying "keep this where I can see it" — one idea, not
+	 * two that have to be explained apart.
+	 */
+	async function favourite(note) {
+		const pinned = !note.pinned;
+		// Moved before the answer comes back: a star that waits for a round trip
+		// feels broken on a slow connection, and the cost of being wrong is a star.
+		notes = notes.map((n) => (n.id === note.id ? { ...n, pinned } : n));
+		try {
+			await api.updateNote(note.id, { pinned });
+			await load(query);
+		} catch (e) {
+			notes = notes.map((n) => (n.id === note.id ? { ...n, pinned: !pinned } : n));
+			app.toast(humanMessage(e));
+		}
+	}
+
+	/**
+	 * Moves the note into a project, which is what sharing it means: everybody who
+	 * can read the project can read the note, and an editor can change it. Choosing
+	 * the empty option takes it back out and makes it the author's alone again.
+	 */
+	async function share(projectId) {
+		if (!selected) return;
+		const id = selected.id;
+		try {
+			const saved = await api.updateNote(id, { project_id: projectId });
+			notes = notes.map((n) => (n.id === id ? saved : n));
+			if (selected?.id === id) selected = saved;
+			app.toast(projectId ? t('notes.shared') : t('notes.unshared'));
+		} catch (e) {
+			app.toast(humanMessage(e));
+		}
+	}
+
+	async function remove(note) {
+		if (!confirm(t('notes.deleteNote', { name: note.title || t('notes.untitled') }))) return;
+		try {
+			await api.deleteNote(note.id);
+			notes = notes.filter((n) => n.id !== note.id);
+			if (selected?.id === note.id) open(notes[0] ?? null);
+		} catch (e) {
+			app.toast(humanMessage(e));
+		}
+	}
+
+	// What the note points at, for the panel under the editor.
+	let links = $derived(selected?.links ?? []);
+
+
+</script>
+
+<svelte:head><title>{t('notes.title')} · verdande</title></svelte:head>
+
+<div class="notes">
+	<aside>
+		<div class="head">
+			<h1>{t('notes.title')}</h1>
+			<button class="new" onclick={create} aria-label={t('notes.new')}>+</button>
+		</div>
+
+		<input
+			class="search"
+			type="search"
+			bind:value={query}
+			placeholder={t('notes.search')}
+			aria-label={t('notes.search')}
+		/>
+
+		{#if status === 'loading'}
+			<p class="hint">{t('history.loading')}</p>
+		{:else if !notes.length}
+			<p class="hint">{query ? t('notes.noneFound') : t('notes.noneYet')}</p>
+		{:else}
+			<ul>
+				{#each notes as note (note.id)}
+					<li>
+						<div class="rowline">
+							<button class="row" class:on={selected?.id === note.id} onclick={() => open(note)}>
+								<strong>{note.title || t('notes.untitled')}</strong>
+								<span class="preview">{note.body.slice(0, 80)}</span>
+							</button>
+							<button
+								class="star"
+								class:on={note.pinned}
+								onclick={() => favourite(note)}
+								aria-pressed={note.pinned}
+								aria-label={note.pinned ? t('notes.unfavourite') : t('notes.favourite')}
+								title={note.pinned ? t('notes.unfavourite') : t('notes.favourite')}
+							>
+								{note.pinned ? '★' : '☆'}
+							</button>
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</aside>
+
+	<section class="editor">
+		{#if selected}
+			<NoteEditor
+				note={selected}
+				onchange={(body) => {
+					draft = body;
+					typed();
+				}}
+				onsave={save}
+			/>
+
+			<footer>
+				<span class="hint">{saving ? t('notes.saving') : t('notes.saved')}</span>
+				{#if links.length}
+					<span class="links">
+						{#each links as link}
+							<span class="link">{link.kind === 'project' ? '#' : ''}{link.target_id}</span>
+						{/each}
+					</span>
+				{/if}
+				<!-- Sharing a note is filing it in a project.
+				     Not an access list of its own: projects already have members, roles
+				     and invitations, all of them tested and all of them things people
+				     have already learnt here. A second way to give somebody access is a
+				     second place to get it wrong, and the two would disagree on the day
+				     one of them was changed. -->
+				<label class="share">
+					<span class="hint">{t('notes.shareWith')}</span>
+					<select value={selected.project_id ?? ''} onchange={(e) => share(e.currentTarget.value)}>
+						<option value="">{t('notes.private')}</option>
+						{#each app.projects.filter((p) => !p.is_inbox) as project (project.id)}
+							<option value={project.id}>{project.name}</option>
+						{/each}
+					</select>
+				</label>
+
+				<div class="actions">
+					<button class="button" onclick={save}>{t('notes.save')}</button>
+					<button class="button danger" onclick={() => remove(selected)}>{t('notes.delete')}</button>
+				</div>
+			</footer>
+		{:else}
+			<p class="empty">{t('notes.pickOne')}</p>
+		{/if}
+	</section>
+</div>
+
+<style>
+	.notes {
+		/* Air on all sides. The heading, the search box and the list all sat flush
+		   against the sidebar's rule, which reads as a rendering fault rather than
+		   as a layout. */
+		padding: var(--s3) 0 0 var(--s4);
+		display: grid;
+		grid-template-columns: minmax(220px, 300px) 1fr;
+		gap: var(--s4);
+		height: 100%;
+		min-height: 0;
+	}
+
+	aside {
+		display: flex;
+		flex-direction: column;
+		gap: var(--s2);
+		min-height: 0;
+		border-right: 1px solid var(--line);
+		padding-right: var(--s3);
+	}
+
+	.head {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	h1 {
+		font-size: var(--text-xl);
+		line-height: 1.2;
+	}
+
+	.new {
+		font-size: var(--text-lg);
+		color: var(--ink-faint);
+		padding: 0 var(--s2);
+	}
+
+	.new:hover {
+		color: var(--ink);
+	}
+
+	.search {
+		width: 100%;
+	}
+
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		overflow-y: auto;
+		min-height: 0;
+	}
+
+	.rowline {
+		display: flex;
+		align-items: center;
+		gap: var(--s1);
+	}
+
+	.star {
+		flex: none;
+		width: 24px;
+		color: var(--ink-faint);
+		opacity: 0;
+		font-size: var(--text-sm);
+	}
+
+	.rowline:hover .star,
+	.star.on,
+	.star:focus-visible {
+		opacity: 1;
+	}
+
+	.star.on {
+		color: var(--accent);
+	}
+
+	.row {
+		display: block;
+		flex: 1;
+		min-width: 0;
+		text-align: left;
+		padding: var(--s2);
+		border-radius: var(--radius);
+		color: var(--ink-muted);
+	}
+
+	.row:hover {
+		background: var(--surface);
+	}
+
+	.row.on {
+		background: var(--surface-raised);
+		color: var(--ink);
+	}
+
+	.row strong {
+		display: block;
+		font-size: var(--text-sm);
+		font-weight: 560;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.preview {
+		display: block;
+		font-size: var(--text-xs);
+		color: var(--ink-faint);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.editor {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	/* Everything below exists to keep two layers in lockstep. The shared rules are
+	   set on both at once on purpose: a font-size on one and not the other is a
+	   whole line of drift by the bottom of a long note. */
+	.paper {
+		position: relative;
+		flex: 1;
+		min-height: 50vh;
+	}
+
+	.paper textarea,
+	.paper .mirror {
+		font: inherit;
+		font-size: var(--text-base, 1rem);
+		line-height: 1.6;
+		padding: var(--s2) 0;
+		border: 0;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+		word-break: normal;
+		tab-size: 4;
+	}
+
+	textarea {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		resize: none;
+		background: none;
+		/* Transparent, so what is read is the mirror underneath. The caret keeps its
+		   own colour or there would be nothing to type against. */
+		color: transparent;
+		caret-color: var(--ink);
+	}
+
+	textarea::selection {
+		background: var(--accent);
+		color: var(--accent-ink);
+	}
+
+	textarea:focus {
+		outline: none;
+	}
+
+	.mirror {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		color: var(--ink);
+		overflow: hidden;
+	}
+
+	/* Headings change weight and colour, never size: a larger font would take more
+	   lines than the textarea does and everything below it would slide. */
+	.mirror .h1,
+	.mirror .h2,
+	.mirror .h3,
+	.mirror .h4,
+	.mirror .h5,
+	.mirror .h6 {
+		font-weight: 620;
+	}
+
+	.mirror .h1 {
+		color: var(--ink);
+	}
+
+	.mirror .quote {
+		color: var(--ink-muted);
+	}
+
+	.mirror .bold {
+		font-weight: 620;
+	}
+
+	.mirror .italic {
+		font-style: italic;
+	}
+
+	.mirror .code {
+		font-family: var(--mono, ui-monospace, monospace);
+		color: var(--accent);
+	}
+
+	.mirror .tag,
+	.mirror .wikilink {
+		color: var(--accent);
+	}
+
+	footer {
+		display: flex;
+		align-items: center;
+		gap: var(--s3);
+		padding-top: var(--s2);
+		border-top: 1px solid var(--line);
+		font-size: var(--text-xs);
+	}
+
+	.links {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--s1);
+	}
+
+	.link {
+		color: var(--ink-muted);
+		background: var(--surface);
+		border-radius: var(--radius-sm);
+		padding: 0 var(--s1);
+		font-family: var(--mono, ui-monospace, monospace);
+	}
+
+	.share {
+		display: flex;
+		align-items: center;
+		gap: var(--s1);
+	}
+
+	.share select {
+		font-size: var(--text-xs);
+		padding: 2px var(--s1);
+	}
+
+	/* Real buttons. They were bare words, which on a Mac reads as a web page rather
+	   than as something you can press. */
+	.actions {
+		margin-left: auto;
+		display: flex;
+		gap: var(--s2);
+	}
+
+	.button {
+		border: 1px solid var(--line-strong);
+		border-radius: var(--radius);
+		padding: var(--s1) var(--s3);
+		background: var(--surface);
+		color: var(--ink);
+		font-size: var(--text-xs);
+	}
+
+	.button:hover {
+		background: var(--surface-raised);
+	}
+
+	.button.danger {
+		color: var(--danger);
+	}
+
+	.button.danger:hover {
+		border-color: var(--danger);
+	}
+
+	.empty,
+	.hint {
+		color: var(--ink-faint);
+		font-size: var(--text-sm);
+	}
+
+	@media (max-width: 700px) {
+		.notes {
+			grid-template-columns: 1fr;
+		}
+
+		aside {
+			border-right: 0;
+			padding-right: 0;
+		}
+	}
+</style>

web/src/routes/projekt/[id]/+page.svelte

@@ -43,6 +43,35 @@
 		load(id);
 	});
 
+	// Two ways a note belongs here, and both count.
+	//
+	// Filed in the project — which is what sharing a note means — and mentioning it
+	// by #tag, which is what somebody does while writing without stopping to file
+	// anything. Looked up by name for the second, because a #tag is written by hand
+	// and a person types the name: the same string the quick-add parser reads out of
+	// a task.
+	let notes = $state([]);
+
+	$effect(() => {
+		const id = project?.id;
+		const name = project?.name;
+		if (!id || !name) {
+			notes = [];
+			return;
+		}
+		Promise.all([
+			api.notes({ project: id }).catch(() => ({ notes: [] })),
+			api.notesLinking('project', name).catch(() => ({ notes: [] }))
+		]).then(([filed, mentioned]) => {
+			const seen = new Set();
+			notes = [...(filed.notes ?? []), ...(mentioned.notes ?? [])].filter((n) => {
+				if (seen.has(n.id)) return false;
+				seen.add(n.id);
+				return true;
+			});
+		});
+	});
+
 	async function load(projectId) {
 		if (!projectId) return;
 		status = 'loading';
@@ -793,6 +822,24 @@
 		{#if project.role === 'viewer'}
 			<p class="readonly">{t('project.readOnly')}</p>
 		{/if}
+		<!-- What has been written about this project, which is the payoff for a #tag
+		     in a note being the same tag a task carries: nobody files anything here,
+		     it turns up because somebody mentioned the project while writing. -->
+		{#if notes.length}
+			<section class="notes">
+				<h2>{t('notes.title')}</h2>
+				<ul>
+					{#each notes as note (note.id)}
+						<li>
+							<a href="/noter?note={note.id}">
+								<strong>{note.title || t('notes.untitled')}</strong>
+								<span>{note.body.slice(0, 90)}</span>
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</section>
+		{/if}
 	{:else if status === 'loading'}
 		<!-- Deliberately blank, as on first load elsewhere: a spinner for a request
 		     that usually resolves in 30ms is a flash of anxiety, not feedback. -->
@@ -809,6 +856,53 @@
 </div>
 
 <style>
+	.notes {
+		margin-top: var(--s4);
+		padding-top: var(--s3);
+		border-top: 1px solid var(--line);
+	}
+
+	.notes h2 {
+		font-size: var(--text-xs);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--ink-faint);
+		margin-bottom: var(--s2);
+	}
+
+	.notes ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+
+	.notes a {
+		display: block;
+		padding: var(--s2);
+		border-radius: var(--radius);
+		color: var(--ink-muted);
+		text-decoration: none;
+	}
+
+	.notes a:hover {
+		background: var(--surface);
+	}
+
+	.notes strong {
+		display: block;
+		font-size: var(--text-sm);
+		font-weight: 560;
+		color: var(--ink);
+	}
+
+	.notes span {
+		font-size: var(--text-xs);
+		color: var(--ink-faint);
+	}
+
 	/* Recessed, because it is a record rather than a plan. The rows keep their own
 	   completed styling; this is about the section around them. */
 	.done {