feat(beskeder): appens ikon bærer tallet på ulæste

Klokken i hovedet siger, hvad der er nyt — men kun til den, der kigger på
fanen. Det halve af pointen med at få besked er at få den, mens man laver
noget andet, og det eneste sted, appen kan sige noget dér, er på sit eget
ikon: mærket i Dock'en på en Mac, på proceslinjen på en pc.

Sat to steder, fordi der er to tilstande. Appen selv, mens den er åben og
kender tallet, og service-workeren, når den ikke er — og det er netop
dér, mærket er det, der siger, at der er sket noget.

Tallet kommer med i push-beskeden frem for at blive talt op af
service-workeren. Den husker ingenting mellem to opvågninger og kunne
derfor kun lægge én til noget, den ikke ved hvad er: et mærke, der tæller
sig selv op og aldrig kommer ned igen. Serveren ved det i forvejen, og en
tælling, der fejler, udelader feltet frem for at sende et nul — så står
mærket, som det stod, i stedet for at blive tørret af en optælling, der
ikke lykkedes.

Ét tal, aldrig en optælling: mærket sættes til hvad der *er*, så det går
ned af sig selv, når beskederne bliver læst. Og det ryddes ved log ud —
det står i Dock'en, også når ingen er logget ind.

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

README.md

@@ -24,9 +24,10 @@ Documentation: [`docs/`](docs/), built with Material for MkDocs.
 
 ## Why this exists
 
-Todoist Pro, self-hosted, on your own hardware, with your own data — and with the
-integrations that a hosted product will not build for you: a real CalDAV server, a
-mail-to-task address, and an MCP endpoint so Claude can work your task list directly.
+A fast, self-hosted task manager — projects, quick add, filters, notes and shared
+lists — on your own hardware, with your own data, and with the integrations that a
+hosted product will not build for you: a real CalDAV server, a mail-to-task address,
+and an MCP endpoint so Claude can work your task list directly.
 
 ## What it does
 
@@ -102,7 +103,7 @@ Apple Reminders, forward mail into it, and add it to Claude as a connector.
 | CalDAV server (two-way VTODO) | Done, tested |
 | Mail-to-task | Done, tested |
 | AI layer (Anthropic/OpenAI/Google/local) | Built, degrades when unconfigured |
-| Gmail: OAuth2 with PKCE, polling, one-way to tasks | Done, tested |
+| Gmail: OAuth2 with PKCE, polling to tasks, unstars what it imports | Done, tested |
 | Google Calendar: read-only, laid over the task calendar | Built, never run against Google |
 | Calendar subscriptions: ICS and webcal, several per person | Done, tested |
 | Times on tasks, set by dragging in the week grid | Done, tested |

cmd/verdande/main.go

@@ -80,6 +80,16 @@ func run() error {
 		log.Info("notes sealed", "count", sealed)
 	}
 
+	// Names created before the app capitalised them on the way in — "andreas"
+	// rather than "Andreas". Idempotent, so it is a cheap pass of names once it has
+	// caught up. A failure here does not stop the start: a lower-case first name is
+	// a blemish, not a broken instance.
+	if fixed, err := db.NormalizeUserNames(context.Background()); err != nil {
+		log.Error("normalize user names", "err", err)
+	} else if fixed > 0 {
+		log.Info("user names normalized", "count", fixed)
+	}
+
 	httpapi.Version = version
 	api := httpapi.New(cfg, db, log, webAssets(log))
 

docs/api.md

@@ -85,7 +85,7 @@ what a person reads is decided by the client, which knows what language they are
 curl -X POST https://todo.example.dk/api/v1/tasks/quick-add \
   -H "Authorization: Bearer vrd_..." \
   -H "Content-Type: application/json" \
-  -d '{"text": "betal moms i morgen kl 10 p1 #Firma @regnskab"}'
+  -d '{"text": "file the VAT return tomorrow at 10am p1 #Accounts @tax"}'
 ```
 
 ### Projects and sections
@@ -108,7 +108,7 @@ curl -X POST https://todo.example.dk/api/v1/tasks/quick-add \
 | Method | Path | |
 |---|---|---|
 | `GET` | `/today` | Overdue and due today, in your timezone. |
-| `GET` | `/upcoming?days=7` | One entry per day, empty days included. |
+| `GET` | `/upcoming?days=7` | One entry per day, empty days included. Up to 31; over that is capped. |
 | `GET` | `/search?q=` | Across everything you can see. |
 | `GET` `POST` | `/filters` | |
 | `GET` | `/filters/{id}/tasks` | Run one. |

docs/configuration.md

@@ -74,7 +74,7 @@ Then enable the APIs and scopes for whichever you want:
 
 | For | Enable | Scope |
 |---|---|---|
-| Mailboxes | Gmail API | `gmail.readonly` |
+| Mailboxes | Gmail API | `gmail.modify` |
 | Calendar | Google Calendar API | `calendar.readonly` |
 
 | Variable | What it does |

docs/filters.md

@@ -1,7 +1,7 @@
 # Saved filters
 
-A filter is a small expression describing a slice of your tasks. The grammar is
-Todoist's, so if you are coming from there you already know it.
+A filter is a small expression describing a slice of your tasks. The grammar will
+feel familiar if you have used query-based filters in other task apps.
 
 ```
 today & p1

docs/index.md

@@ -11,28 +11,46 @@ of. Which is what a to-do list is.
 
 ## What it is for
 
-Todoist Pro, on your own hardware, with your own data. And with the integrations a
+A fast, self-hosted task manager — projects, quick add, filters, notes and shared
+lists — on your own hardware, with your own data. And with the integrations a
 hosted product will not build for you: a real CalDAV server, an address you can
 forward mail to, and an MCP endpoint so Claude can work your task list directly.
 
 ## What it does
 
-- **[Quick add](quick-add.md) that reads what you type.** `betal moms i morgen kl
-  10 p1 #Firma @regnskab` becomes a task due tomorrow at 10:00, priority 1, in
-  Firma, labelled regnskab. Danish and English, mixed freely in one line.
+- **[Quick add](quick-add.md) that reads what you type.** `file the VAT return
+  tomorrow at 10am p1 #Accounts @tax` becomes a task due tomorrow at 10:00,
+  priority 1, in Accounts, labelled tax. Danish and English, mixed freely in one
+  line.
 - **Projects, sections, sub-tasks, labels, [saved filters](filters.md).** List,
   board and calendar views, and foldable groups over the projects in the sidebar.
-- **Notes, beside the work.** Rich text to write in, Markdown on disk. A note is
-  shared by filing it in a project; `#project` and `[[another note]]` are links,
-  and a task shows what has been written about it.
+  The calendar draws each task to its length — drag the foot to resize, the body
+  to move it.
+- **Notes, beside the work.** Rich text to write in, Markdown on disk. Share a
+  single note with a person, or file it in a project; `#project` and
+  `[[another note]]` are links, and a task shows what has been written about it.
+- **Delegate, and snooze.** Hand a task to somebody and it is marked with an
+  arrow to them, gathered on a *Waiting on others* page. Snooze one to park it,
+  greyed, at the foot of the list until a moment you pick — without touching when
+  it is due.
 - **Drag where it means something** — reorder a list or a board, file a project
   under a group, drop a task on another project, or drop it on another day.
 - **Sharing** with owner, editor and viewer roles. Anyone outside your instance
   joins through an invite link.
 - **Live sync** — a change made by somebody else appears without a refresh.
-- **Repeating tasks** as RRULE, reminders, comments and attachments.
-- **[Calendar](caldav.md), [mail](mail.md) and [Claude](mcp.md)** connected over
-  open standards rather than private formats.
+- **Repeating tasks** as RRULE, comments and attachments, and reminders that go
+  out as Web Push to an iPhone or a Mac.
+- **[Your mail as an inbox](mailboxes.md).** Star a mail in Gmail, or flag one
+  over IMAP in iCloud or Fastmail, and it becomes a task — and the star or flag
+  comes off once it has, so a starred inbox empties as the tasks are made instead
+  of only filling up.
+- **[Calendar](caldav.md) and [Claude](mcp.md)** connected over open standards
+  rather than private formats.
+- **Six themes**, three dark and three light — including *Charcoal*, a warm
+  near-black after Apple Notes — and a size and typeface chosen apart from them.
+- **Holds through a short network drop.** A save rides out a few seconds of no
+  signal and goes through when it comes back; a reload opens from what it last saw
+  rather than the browser's offline page. It installs as a PWA.
 
 ## What it looks like
 
@@ -48,7 +66,19 @@ columns.*
 
 ![Waiting on others](screenshots/delegated.png)
 
-*What you have handed to somebody else, grouped by whoever has it.*
+*What you have handed to somebody else, grouped by whoever has it — and each row
+marked with an arrow to them, so a delegated task reads as delegated wherever you
+meet it.*
+
+![Notes in the Charcoal theme](screenshots/notes-charcoal.png)
+
+*Charcoal, the newest of six themes — a warm near-black after Apple Notes, with
+amber where the accent green usually is.*
+
+![The six themes as swatches](screenshots/themes.png)
+
+*Six themes — three dark, three light — chosen on the settings page, with the
+typeface and how tightly it sits set apart from them.*
 
 ![Settings, integrations](screenshots/settings.png)
 

docs/mcp.md

@@ -57,9 +57,9 @@ Both endpoints run the same server and reach the same things.
 | `complete_task` | Tick one off. |
 | `add_comment` | Comment on a task. |
 
-`create_task` prefers natural language, so *"add betal moms i morgen kl 10 p1
-#Firma"* goes through the same parser the app uses — dates, priorities, projects,
-labels and recurrence in either language.
+`create_task` prefers natural language, so *"add file the VAT return tomorrow at
+10am p1 #Accounts"* goes through the same parser the app uses — dates, priorities,
+projects, labels and recurrence in either language.
 
 ## What it can reach
 

docs/openapi.yaml

@@ -832,9 +832,9 @@ paths:
       tags: [tasks]
       summary: Create a task from one line of natural language.
       description: |
-        Danish and English. `betal moms i morgen kl 10 p1 #Firma @vigtigt` becomes
-        a task due tomorrow at 10:00, priority 1, in the project Firma, labelled
-        vigtigt. An unknown `#project` is not an error — the task goes to the
+        Danish and English. `file the VAT return tomorrow at 10am p1 #Accounts @tax`
+        becomes a task due tomorrow at 10:00, priority 1, in the project Accounts,
+        labelled tax. An unknown `#project` is not an error — the task goes to the
         Inbox rather than a thought being thrown away over a typo.
       requestBody:
         required: true
@@ -1250,7 +1250,7 @@ paths:
 
         The one click that opens Google's consent screen already exists. What it
         needs behind it is a registered client, and no app can conjure one: Google
-        issues no Gmail access to an unregistered client, and `gmail.readonly` is a
+        issues no Gmail access to an unregistered client, and `gmail.modify` is a
         restricted scope, so an id shipped inside a public image would be both
         extractable from it and unusable without Google's security review of every
         deployment that used it.
@@ -2365,7 +2365,12 @@ paths:
       tags: [views]
       summary: The next few days, empty ones included.
       parameters:
-        - { name: days, in: query, schema: { type: integer, default: 7 } }
+        - {
+            name: days,
+            in: query,
+            description: "How many days to return, counting today. Above the maximum is capped, not refused.",
+            schema: { type: integer, default: 7, minimum: 1, maximum: 31 },
+          }
       responses:
         "200":
           description: OK
@@ -3121,10 +3126,20 @@ paths:
                   candidates:
                     type: array
                     items: { $ref: "#/components/schemas/Person" }
+                  follows:
+                    description: >
+                      The notes this one points at with [[links]], which are shared
+                      alongside it. Owner's own notes only.
+                    type: array
+                    items: { $ref: "#/components/schemas/NoteFollow" }
         "404": { $ref: "#/components/responses/NotFound" }
     post:
       tags: [notes]
       summary: Share a note with a person, or change the role they hold.
+      description: >
+        The notes this one points at with [[links]] are shared with the same person
+        and the same role, so a link in a shared note leads somewhere. Only notes
+        the sharer owns follow, and the response lists them.
       requestBody:
         required: true
         content:
@@ -3136,7 +3151,16 @@ paths:
                 user_id: { type: string }
                 role: { type: string, enum: [viewer, editor] }
       responses:
-        "204": { description: Shared }
+        "200":
+          description: Shared
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  follows:
+                    type: array
+                    items: { $ref: "#/components/schemas/NoteFollow" }
         "404": { $ref: "#/components/responses/NotFound" }
         "422": { $ref: "#/components/responses/Validation" }
 
@@ -4030,6 +4054,23 @@ components:
       properties:
         user: { $ref: "#/components/schemas/Person" }
         role: { type: string, enum: [viewer, editor] }
+        linked:
+          description: >
+            True when the person has this note because another shared note points
+            at it, rather than because it was shared with them on its own. Such a
+            grant is taken back by removing the link or the share it came from, not
+            by removing it here.
+          type: boolean
+        via:
+          description: The title of the shared note that points at this one.
+          type: string
+
+    NoteFollow:
+      type: object
+      description: A note that is shared alongside another because that one links to it.
+      properties:
+        note_id: { type: string }
+        title: { type: string }
 
     Mailbox:
       type: object
@@ -4519,12 +4560,22 @@ components:
 
     Notification:
       type: object
+      description: >
+        Something somebody else did that you need to know about. `kind` says what
+        happened and the client composes the sentence from it, so the bell follows
+        the reader's language; `title` is the server's own Danish wording, used for
+        Web Push, which has no dictionary to look words up in.
       properties:
         id: { type: string }
         actor_name: { type: string }
         project_id: { type: string }
         task_id: { type: string }
-        kind: { type: string }
+        note_id:
+          description: Set on a notification about a note — a shared note somebody else edited.
+          type: string
+        kind:
+          type: string
+          enum: [assigned, note.changed, comment]
         title: { type: string }
         body: { type: string }
         read: { type: boolean }

docs/quick-add.md

@@ -3,11 +3,11 @@
 One line in, a fully-formed task out.
 
 ```
-betal moms i morgen kl 10 p1 #Firma @regnskab
+file the VAT return tomorrow at 10am p1 #Accounts @tax
 ```
 
-becomes a task called **betal moms**, due tomorrow at 10:00, priority 1, in the
-Firma project, labelled regnskab.
+becomes a task called **file the VAT return**, due tomorrow at 10:00, priority 1,
+in the Accounts project, labelled tax.
 
 The parts it understands are tinted underneath the text as you type, so you can see
 it being read before you commit to it.
@@ -16,8 +16,8 @@ it being read before you commit to it.
 
 | You type | It means |
 |---|---|
-| `#Firma` | Put it in that project. `#"Q3 rapport"` for a name with spaces. |
-| `@regnskab` | Add that label. As many as you like. |
+| `#Accounts` | Put it in that project. `#"Q3 report"` for a name with spaces. |
+| `@tax` | Add that label. As many as you like. |
 | `p1` … `p4` | Priority. `!!!`, `!!` and `!` also work. |
 | `i dag`, `i morgen`, `i overmorgen` | Today, tomorrow, the day after. |
 | `mandag`, `på fredag` | The next such weekday. |

docs/self-hosting.md

@@ -1,7 +1,8 @@
-# Self-hosting
+# With Docker
 
-verdande is one static binary and one directory. There is no database server, no
-cache, no queue and no second process.
+Running it yourself outside a panel: one static binary and one directory. There is
+no database server, no cache, no queue and no second process. (Yggdrasil is
+self-hosting too — for that route see [As a Rune](rune.md).)
 
 ## Docker
 

go.mod

@@ -3,8 +3,10 @@ module github.com/kristianwind/verdande
 go 1.26.3
 
 require (
+	github.com/boombuler/barcode v1.0.1-0.20190219062509-6c824513bacc
 	github.com/coder/websocket v1.8.15
 	github.com/emersion/go-imap/v2 v2.0.0-beta.8
+	github.com/emersion/go-message v0.18.2
 	github.com/go-chi/chi/v5 v5.3.1
 	github.com/go-webauthn/webauthn v0.17.4
 	github.com/pquerna/otp v1.5.0
@@ -14,9 +16,7 @@ require (
 )
 
 require (
-	github.com/boombuler/barcode v1.0.1-0.20190219062509-6c824513bacc // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
-	github.com/emersion/go-message v0.18.2 // indirect
 	github.com/emersion/go-sasl v0.0.0-20241020182733-b788ff22d5a6 // indirect
 	github.com/fxamacker/cbor/v2 v2.9.2 // indirect
 	github.com/go-viper/mapstructure/v2 v2.5.0 // indirect

internal/auth/totp.go

@@ -10,6 +10,7 @@ import (
 	"strings"
 	"time"
 
+	"github.com/boombuler/barcode/qr"
 	"github.com/pquerna/otp"
 	"github.com/pquerna/otp/totp"
 )
@@ -50,6 +51,41 @@ func NewTOTPSecret(issuer, account string) (secret, uri string, err error) {
 	return key.Secret(), key.URL(), nil
 }
 
+// TOTPQRSVG renders the otpauth:// URI as a QR code, as an SVG a phone camera can
+// read. SVG rather than a PNG data URI so it stays crisp at any size and adds no
+// base64 blob to the page — one dark path on a white square, which is what a scanner
+// needs whatever theme the page is in.
+//
+// The barcode encoder is already in the module graph (pquerna/otp draws on it), so
+// this borrows a dependency rather than adding one.
+func TOTPQRSVG(uri string) (string, error) {
+	code, err := qr.Encode(uri, qr.M, qr.Auto)
+	if err != nil {
+		return "", fmt.Errorf("auth: encode totp qr: %w", err)
+	}
+	b := code.Bounds()
+	n := b.Dx()
+	// A four-module quiet zone all round, which the spec requires and scanners rely
+	// on — without it the code runs to the edge and a reader cannot find its border.
+	const quiet = 4
+	size := n + quiet*2
+
+	var sb strings.Builder
+	fmt.Fprintf(&sb, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 %d %d" shape-rendering="crispEdges">`, size, size)
+	sb.WriteString(`<rect width="100%" height="100%" fill="#ffffff"/><path fill="#111312" d="`)
+	for y := 0; y < n; y++ {
+		for x := 0; x < n; x++ {
+			// Dark modules are black; the red channel is 0 for those and full for the
+			// light ones. One 1×1 rect per dark module, merged into a single path.
+			if r, _, _, _ := code.At(b.Min.X+x, b.Min.Y+y).RGBA(); r == 0 {
+				fmt.Fprintf(&sb, "M%d %dh1v1h-1z", x+quiet, y+quiet)
+			}
+		}
+	}
+	sb.WriteString(`"/></svg>`)
+	return sb.String(), nil
+}
+
 // TOTPURI rebuilds the otpauth:// URI for an existing secret, for showing the QR
 // code again before enrolment is confirmed.
 func TOTPURI(secret, issuer, account string) string {

internal/gmail/gmail.go

@@ -1,14 +1,20 @@
 // Package gmail is the small slice of the Gmail API verdande needs, and the scope
 // it asks for.
 //
-// The connection is one-way on purpose: a starred or labelled message becomes a
-// task, and nothing verdande does afterwards touches the mailbox. Unstarring the
-// message does not delete the task, completing the task does not unstar the
-// message. Two-way would mean deciding what to do when both sides changed, and the
-// only honest answer to that is a synchronisation model far bigger than the feature.
+// The one thing verdande writes back is the star. A starred message becomes a
+// task, and once it has, the star comes off — exactly as the IMAP side takes the
+// flag off a mail it has imported, and for the same reason: the star meant "turn
+// this into a task", the task now exists, so the star is no longer true. Nothing
+// else is touched. Completing the task does not reach back to the mail; the mail
+// is a pointer the task was made from, not a copy the two have to be kept in step.
 //
-// Scope is gmail.readonly. verdande never needs to send, modify or delete, and
-// asking for less is what makes the consent screen something a person can agree to.
+// That one write is why the scope is gmail.modify rather than gmail.readonly.
+// Removing the STARRED label is a modify, and Gmail offers no narrower scope that
+// can do it — so the consent screen asks for more than it used to, and the trade
+// is deliberate: a starred inbox that empties itself as the tasks are made, rather
+// than one that fills with stars nothing ever clears. Still not send, still not
+// delete — modify is labels, and the only label verdande removes is the one that
+// triggered the task.
 //
 // The OAuth flow itself moved to internal/google when Calendar needed the same one.
 // The names below are aliases so that every call site — and this package's own
@@ -27,8 +33,10 @@ import (
 	"github.com/kristianwind/verdande/internal/google"
 )
 
-// Read-only, and only mail. Not profile, not contacts, not send.
-const Scope = "https://www.googleapis.com/auth/gmail.readonly"
+// Read mail and change its labels, and only mail. Not profile, not contacts, not
+// send, not delete. The single write is removing the STARRED label from a message
+// that has become a task; see the package comment for why that costs modify.
+const Scope = "https://www.googleapis.com/auth/gmail.modify"
 
 const defaultAPIBase = "https://gmail.googleapis.com/gmail/v1"
 
@@ -169,6 +177,25 @@ func (c *Client) get(ctx context.Context, url string, out any) error {
 	return google.Get(ctx, c.http, c.accessToken, url, out)
 }
 
+// Unstar takes the star off the given messages — one call for all of them, the way
+// the IMAP side unflags a batch, so a sweep that made ten tasks is one write and
+// not ten.
+//
+// STARRED is a system label whose id is its name, so no lookup is needed; a custom
+// label would need one, and verdande removes none. batchModify answers 204 with no
+// body on success. An empty list is a no-op, not a call: batchModify with no ids is
+// an error on Google's side and nothing worth making a round trip to hear.
+func (c *Client) Unstar(ctx context.Context, ids []string) error {
+	if len(ids) == 0 {
+		return nil
+	}
+	body := struct {
+		IDs            []string `json:"ids"`
+		RemoveLabelIDs []string `json:"removeLabelIds"`
+	}{IDs: ids, RemoveLabelIDs: []string{"STARRED"}}
+	return google.Post(ctx, c.http, c.accessToken, c.api()+"/users/me/messages/batchModify", body, nil)
+}
+
 // SenderName pulls "Anders Jensen" out of "Anders Jensen <anders@example.dk>",
 // falling back to the address when there is no display name.
 func SenderName(from string) string {

internal/gmail/gmail_test.go

@@ -1,16 +1,81 @@
 package gmail
 
 import (
+	"context"
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
 	"strings"
 	"testing"
 )
 
 // The scope is the one thing verdande chooses about the connection, and it is the
 // one the person reads on the consent screen. The flow itself is exercised in
-// internal/google; what belongs here is that Gmail still asks for read-only mail.
-func TestTheScopeIsReadOnlyMail(t *testing.T) {
-	if !strings.HasSuffix(Scope, "gmail.readonly") {
-		t.Errorf("scope = %q; verdande never needs to send or modify", Scope)
+// internal/google; what belongs here is that Gmail asks for modify — read plus the
+// one write it makes, taking the star off an imported message — and nothing wider.
+func TestTheScopeIsModifyMail(t *testing.T) {
+	if !strings.HasSuffix(Scope, "gmail.modify") {
+		t.Errorf("scope = %q; want gmail.modify — read, plus removing the star", Scope)
+	}
+	// Modify is the ceiling. Send, or the full account, would be a different promise
+	// to the person on the consent screen than the one this feature needs.
+	for _, wider := range []string{"gmail.send", "mail.google.com", "gmail.settings"} {
+		if strings.Contains(Scope, wider) {
+			t.Errorf("scope = %q; must not include %q", Scope, wider)
+		}
+	}
+}
+
+// Unstar removes the star from a batch in one call, and it addresses the messages
+// it was given and only the STARRED label.
+func TestUnstarRemovesOnlyTheStar(t *testing.T) {
+	var gotPath string
+	var gotBody struct {
+		IDs            []string `json:"ids"`
+		AddLabelIDs    []string `json:"addLabelIds"`
+		RemoveLabelIDs []string `json:"removeLabelIds"`
+	}
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		gotPath = r.URL.Path
+		raw, _ := io.ReadAll(r.Body)
+		_ = json.Unmarshal(raw, &gotBody)
+		w.WriteHeader(http.StatusNoContent) // what batchModify answers on success
+	}))
+	defer srv.Close()
+
+	err := NewClient("token").At(srv.URL).Unstar(context.Background(), []string{"a", "b"})
+	if err != nil {
+		t.Fatalf("Unstar: %v", err)
+	}
+	if !strings.HasSuffix(gotPath, "/users/me/messages/batchModify") {
+		t.Errorf("path = %q, want the batchModify endpoint", gotPath)
+	}
+	if strings.Join(gotBody.IDs, ",") != "a,b" {
+		t.Errorf("ids = %v, want [a b]", gotBody.IDs)
+	}
+	if strings.Join(gotBody.RemoveLabelIDs, ",") != "STARRED" {
+		t.Errorf("removeLabelIds = %v, want [STARRED]", gotBody.RemoveLabelIDs)
+	}
+	if len(gotBody.AddLabelIDs) != 0 {
+		t.Errorf("addLabelIds = %v, want none — verdande adds no label", gotBody.AddLabelIDs)
+	}
+}
+
+// An empty batch is not a request: Gmail rejects a batchModify with no ids, and
+// there is nothing to say to it anyway.
+func TestUnstarOfNothingMakesNoCall(t *testing.T) {
+	called := false
+	srv := httptest.NewServer(http.HandlerFunc(func(http.ResponseWriter, *http.Request) {
+		called = true
+	}))
+	defer srv.Close()
+
+	if err := NewClient("token").At(srv.URL).Unstar(context.Background(), nil); err != nil {
+		t.Fatalf("Unstar(nil): %v", err)
+	}
+	if called {
+		t.Error("Unstar(nil) made a request; it should make none")
 	}
 }
 

internal/google/google.go

@@ -215,6 +215,40 @@ func Get(ctx context.Context, client *http.Client, accessToken, url string, out
 	return json.NewDecoder(resp.Body).Decode(out)
 }
 
+// Post sends a JSON body to a Google API and, unlike Get, does not insist on a
+// body coming back. A write call — modifying labels on a message — answers with
+// 204 No Content when it worked, so anything 2xx is success and only the body is
+// decoded, and only when the caller asked for one.
+func Post(ctx context.Context, client *http.Client, accessToken, url string, body, out any) error {
+	payload, err := json.Marshal(body)
+	if err != nil {
+		return err
+	}
+	req, err := http.NewRequestWithContext(ctx, http.MethodPost, url, strings.NewReader(string(payload)))
+	if err != nil {
+		return err
+	}
+	req.Header.Set("Authorization", "Bearer "+accessToken)
+	req.Header.Set("Content-Type", "application/json")
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode == http.StatusUnauthorized {
+		return ErrUnauthorized
+	}
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		return fmt.Errorf("google: %s", resp.Status)
+	}
+	if out == nil || resp.StatusCode == http.StatusNoContent {
+		return nil
+	}
+	return json.NewDecoder(resp.Body).Decode(out)
+}
+
 func randomString(n int) (string, error) {
 	b := make([]byte, n)
 	if _, err := rand.Read(b); err != nil {

internal/httpapi/gmail_handlers.go

@@ -251,10 +251,12 @@ func (s *Server) handleGmailSyncNow(w http.ResponseWriter, r *http.Request) {
 // takes a context and a user rather than a request.
 // maxGmailSeen bounds the list of message ids already turned into tasks.
 //
-// Gmail is read-only here — the scope is `gmail.readonly`, deliberately, because
-// asking for less is what makes the consent screen something a person can agree
-// to — so verdande cannot unstar a message the way the IMAP side unflags one. The
-// record has to live on this side, and a record on this side has to be bounded.
+// The star is taken off an imported message now, so on a starred trigger the mail
+// leaves the query on its own and this list is a safety net rather than the only
+// record. It still earns its place: it covers the window between making the task
+// and the star coming off, and it is the whole of the dedup for a label trigger,
+// where the label is the person's and not ours to remove. A record on this side
+// has to be bounded.
 //
 // A count rather than the previous rule of "whatever Gmail returned this run",
 // which was not a bound but a way of forgetting.
@@ -381,6 +383,29 @@ func (s *Server) SyncGmail(ctx context.Context, user *store.User) (int, error) {
 		s.hub.Publish(projectID, "task.created", toTaskJSON(*task))
 	}
 
+	// The star comes off every message this query returned that now has a task —
+	// the ones made this run and the ones a run before it already made. Gated to the
+	// triggers that are about the star: for a label trigger the star is the person's
+	// own and not ours to touch, and dedup there rests on the seen list alone.
+	//
+	// Best effort, exactly like the IMAP unflag: a task made is not undone by a star
+	// that would not come off. The likeliest reason it will not, right after this
+	// ships, is a connection still holding the old read-only grant — the write is a
+	// 403 until the account is reconnected, and this logs it rather than failing the
+	// sync. It self-heals: the mail stays starred, stays in the next query, and is
+	// tried again once the grant is there.
+	if box.Trigger == "starred" || box.Trigger == "both" {
+		unstar := make([]string, 0, len(ids))
+		for _, id := range ids {
+			if seen[id] {
+				unstar = append(unstar, id)
+			}
+		}
+		if err := client.Unstar(ctx, unstar); err != nil {
+			s.log.Warn("gmail unstar", "err", err, "user", user.ID, "count", len(unstar))
+		}
+	}
+
 	if created > 0 {
 		// The ids this run saw, on top of the ones already known.
 		//
@@ -442,8 +467,8 @@ func (s *Server) handleVersion(w http.ResponseWriter, r *http.Request) {
 //
 // The one click that opens Google's consent screen already exists; what it needs
 // behind it is a registered client, and that is not something any app can conjure:
-// Google issues no Gmail access to an unregistered client, and `gmail.readonly` is
-// a restricted scope, so an id shipped inside a public image would be both
+// Google issues no Gmail access to an unregistered client, and `gmail.modify` is a
+// restricted scope, so an id shipped inside a public image would be both
 // extractable from it and unusable without Google's security review of every
 // deployment. The registration is a one-off. Having to edit a Rune's manifest and
 // recreate the container to paste the result was not.

internal/httpapi/gmail_test.go

@@ -1,14 +1,17 @@
 package httpapi
 
 import (
-	"github.com/kristianwind/verdande/internal/store"
+	"encoding/json"
+	"io"
 	"net/http"
 	"net/http/httptest"
 	"net/url"
+	"strings"
 	"testing"
 	"time"
 
 	"github.com/kristianwind/verdande/internal/config"
+	"github.com/kristianwind/verdande/internal/store"
 )
 
 // A Gmail failure has to survive being reported.
@@ -150,6 +153,84 @@ func TestASlowMailboxDoesNotHangTheRequest(t *testing.T) {
 	t.Logf("came back in %s with %d", took.Round(time.Millisecond), resp.StatusCode)
 }
 
+// A message that becomes a task has its star taken off — the write that the whole
+// gmail.modify scope is for. The mail's own inbox empties as the tasks are made,
+// the way the IMAP side unflags what it imports.
+func TestASyncedGmailMessageIsUnstarred(t *testing.T) {
+	var unstarred struct {
+		hit  bool
+		body struct {
+			IDs            []string `json:"ids"`
+			RemoveLabelIDs []string `json:"removeLabelIds"`
+		}
+	}
+	google := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		switch {
+		case r.Method == "POST" && strings.HasSuffix(r.URL.Path, "/messages/batchModify"):
+			unstarred.hit = true
+			raw, _ := io.ReadAll(r.Body)
+			_ = json.Unmarshal(raw, &unstarred.body)
+			w.WriteHeader(http.StatusNoContent)
+		case strings.Contains(r.URL.Path, "/messages/") && r.URL.Query().Get("format") == "metadata":
+			writeTestJSON(w, map[string]any{
+				"id": "m1", "threadId": "t1", "snippet": "kort tekst",
+				"payload": map[string]any{"headers": []map[string]string{
+					{"name": "From", "value": "Anders <anders@example.dk>"},
+					{"name": "Subject", "value": "Møde på fredag"},
+				}},
+			})
+		case strings.HasSuffix(r.URL.Path, "/messages"):
+			writeTestJSON(w, map[string]any{"messages": []map[string]string{{"id": "m1"}}})
+		default:
+			http.Error(w, "unexpected "+r.Method+" "+r.URL.Path, http.StatusNotFound)
+		}
+	}))
+	defer google.Close()
+
+	ts := newTestServerWith(t, func(cfg *config.Config) {
+		cfg.GmailClientID = "test-client"
+		cfg.GmailClientSecret = "test-secret"
+		cfg.GoogleTokenURL = google.URL + "/token"
+		cfg.GmailAPIURL = google.URL
+	})
+	ts.bootstrap(t)
+
+	user, err := ts.db.UserByEmail(t.Context(), "kristian@example.dk")
+	if err != nil {
+		t.Fatal(err)
+	}
+	// A live access token, so the run goes straight to the list without a refresh.
+	if err := ts.db.SaveMailbox(t.Context(), &store.Mailbox{
+		UserID: user.ID, Kind: "gmail", RefreshToken: "r", AccessToken: "a",
+		Trigger: "starred", ExpiresAt: time.Now().Add(time.Hour),
+	}); err != nil {
+		t.Fatal(err)
+	}
+
+	resp, body := ts.do(t, "POST", "/api/v1/gmail/sync", nil)
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("sync: status %d, want 200", resp.StatusCode)
+	}
+	if created, _ := body["created"].(float64); created != 1 {
+		t.Fatalf("created = %v, want 1", body["created"])
+	}
+
+	if !unstarred.hit {
+		t.Fatal("the message was never unstarred; its star is the one thing modify is for")
+	}
+	if strings.Join(unstarred.body.IDs, ",") != "m1" {
+		t.Errorf("unstarred ids = %v, want [m1]", unstarred.body.IDs)
+	}
+	if strings.Join(unstarred.body.RemoveLabelIDs, ",") != "STARRED" {
+		t.Errorf("removed = %v, want [STARRED]", unstarred.body.RemoveLabelIDs)
+	}
+}
+
+func writeTestJSON(w http.ResponseWriter, v any) {
+	w.Header().Set("Content-Type", "application/json")
+	_ = json.NewEncoder(w).Encode(v)
+}
+
 func mustParse(t *testing.T, raw string) *url.URL {
 	t.Helper()
 	u, err := url.Parse(raw)

internal/httpapi/notes_handlers.go

@@ -204,9 +204,49 @@ func (s *Server) handleCreateNote(w http.ResponseWriter, r *http.Request) {
 		s.internal(w, r, "create note", err)
 		return
 	}
+	// En ny note kan være den, en delt note hele tiden har peget på: linket er
+	// skrevet som en titel, og titlen fandtes ikke før nu.
+	//
+	// Kun når der står noget i den. En tom note har ingen titel, og et link peger på
+	// en titel — så der er intet at regne, og det kostede alligevel: udregningen
+	// åbner hver eneste af ejerens noter, og den lå her mellem "Ny note" og det
+	// svar, fladen venter på for at kunne tegne editoren. Halvfems millisekunder er
+	// nok til at nå at taste den første linje ind i den forrige note, som så blev
+	// tegnet væk. Målt i e2e-prøven for monospace, der begyndte at tabe sin titel.
+	if strings.TrimSpace(n.Body) != "" {
+		s.followLinks(r, n)
+	}
 	writeJSON(w, http.StatusCreated, n)
 }
 
+// followLinks holder de udledte delinger i takt med teksten.
+//
+// De noter, en delt note peger på, følger med — og teksten kan ændre sig, efter
+// delingen er sat. Et link skrevet i dag i en note, der blev delt i går, skal føre
+// samme sted hen for begge.
+//
+// Kun ejerens egne gemninger regner om, og det er ikke en optimering. Et link
+// peger på en titel, og en medredaktør må skrive i teksten — så hvis enhver
+// gemning talte med, kunne den, man har delt en note med, skrive
+// `[[Bankoplysninger]]` ind i den og dermed dele den med sig selv.
+//
+// Det lukker ikke hullet helt, og det skal siges frem for at lyde lukket: skriver
+// medredaktøren linket, og gemmer ejeren bagefter sin egen note, følger den note
+// med dér. Det, der står tilbage mod det, er synlighed — linket står som tekst i
+// ejerens egen note, og delingspanelet viser hver note, der er fulgt med, og hvem
+// der har den. En stille eskalering er det ikke; en, man kan overse, er den.
+//
+// Fejler det, siges det i loggen og ikke til den, der gemte: noten *er* gemt, og
+// et svar, der lyder som om den ikke er, ville få dem til at skrive den igen.
+func (s *Server) followLinks(r *http.Request, n *store.Note) {
+	if n == nil || n.CreatedBy != userFrom(r.Context()).ID {
+		return
+	}
+	if _, err := s.db.SyncLinkedShares(r.Context(), n.CreatedBy); err != nil {
+		s.log.Error("sync linked shares", "err", err, "note", n.ID)
+	}
+}
+
 func (s *Server) handleUpdateNote(w http.ResponseWriter, r *http.Request) {
 	var body noteBody
 	if err := decodeJSON(w, r, &body); err != nil {
@@ -242,6 +282,7 @@ func (s *Server) handleUpdateNote(w http.ResponseWriter, r *http.Request) {
 		}
 		n.ProjectID = *body.ProjectID
 	}
+	before := n.Body
 	if body.Body != nil {
 		n.Body = *body.Body
 	}
@@ -249,13 +290,47 @@ func (s *Server) handleUpdateNote(w http.ResponseWriter, r *http.Request) {
 		n.Pinned = *body.Pinned
 	}
 
+	// Læst før gemningen, sammenlignet efter. En gemning er en tastepause, ikke en
+	// begivenhed, så de fleste af dem ændrer intet af det her — og udregningen
+	// åbner hver eneste af ejerens noter, fordi titlerne er forseglet. Den skal
+	// køre, når svaret kan være blevet et andet, og ellers ikke.
+	wasLinking := store.LinksIn(before)
+	wasTitled := n.Title
+
 	if err := s.db.SaveNote(r.Context(), n); err != nil {
 		s.internal(w, r, "update note", err)
 		return
 	}
+	// Titlen tæller med: den *er* første linje, så en omskrevet overskrift flytter
+	// det, andres links peger på, uden at et eneste link er rørt.
+	if n.Title != wasTitled || !sameLinks(wasLinking, store.LinksIn(n.Body)) {
+		s.followLinks(r, n)
+	}
+	// Kun når teksten har flyttet sig. En note, der bliver stjernemarkeret eller
+	// lagt i et projekt, er ikke en note, nogen har skrevet i — og en besked om
+	// det ville lære folk at overse dem alle sammen.
+	if before != n.Body {
+		s.notifyNoteChanged(r, n)
+	}
 	writeJSON(w, http.StatusOK, n)
 }
 
+func sameLinks(a, b []store.NoteLink) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	in := make(map[store.NoteLink]bool, len(a))
+	for _, l := range a {
+		in[l] = true
+	}
+	for _, l := range b {
+		if !in[l] {
+			return false
+		}
+	}
+	return true
+}
+
 func (s *Server) handleDeleteNote(w http.ResponseWriter, r *http.Request) {
 	n, err := s.db.Note(r.Context(), chi.URLParam(r, "noteID"))
 	if err != nil {
@@ -279,6 +354,9 @@ func (s *Server) handleDeleteNote(w http.ResponseWriter, r *http.Request) {
 		s.internal(w, r, "delete note", err)
 		return
 	}
+	// En note i papirkurven er ikke længere et udgangspunkt for noget. Det, den tog
+	// med sig, skal derfor heller ikke blive stående hos dem, den blev delt med.
+	s.followLinks(r, n)
 	w.WriteHeader(http.StatusNoContent)
 }
 

internal/httpapi/notes_share_handlers.go

@@ -77,12 +77,37 @@ func (s *Server) handleListNoteShares(w http.ResponseWriter, r *http.Request) {
 		s.internal(w, r, "list note shares", err)
 		return
 	}
+	// Regnet forfra, én gang, og læst to veje ud af det samme svar: hvem der har
+	// *denne* note, fordi en anden peger på den, og hvilke noter der omvendt følger
+	// med den her. To udregninger af det samme er to, der kan blive uenige.
+	//
+	// Og forfra frem for læst af basen, så panelet viser det, der gælder nu — også
+	// når linkene er skrevet af en anden og delingerne derfor ikke er regnet om
+	// siden.
+	following, err := s.db.SyncLinkedShares(r.Context(), userFrom(r.Context()).ID)
+	if err != nil {
+		s.internal(w, r, "sync linked shares", err)
+		return
+	}
+	via := map[string]string{}
+	for _, l := range following {
+		if l.NoteID == n.ID {
+			via[l.UserID] = l.Via
+		}
+	}
+
 	out := make([]noteShareJSON, 0, len(shares))
 	already := map[string]bool{}
 	for _, sh := range shares {
+		// Panelet skal kunne sige forskel: en deling, nogen har valgt, tages tilbage
+		// ved at fjerne den — en, der er fulgt med, ved at fjerne linket eller den
+		// deling, den kom fra. En knap, der lover det første og gør det andet, er
+		// værre end ingen knap.
 		out = append(out, noteShareJSON{
-			User: personJSON{ID: sh.User.ID, Name: sh.User.Name, AvatarColor: sh.User.AvatarColor},
-			Role: string(sh.Role),
+			User:   personJSON{ID: sh.User.ID, Name: sh.User.Name, AvatarColor: sh.User.AvatarColor},
+			Role:   string(sh.Role),
+			Linked: via[sh.User.ID] != "",
+			Via:    via[sh.User.ID],
 		})
 		already[sh.User.ID] = true
 	}
@@ -103,12 +128,41 @@ func (s *Server) handleListNoteShares(w http.ResponseWriter, r *http.Request) {
 		cand = append(cand, personJSON{ID: p.ID, Name: p.Name, AvatarColor: p.AvatarColor})
 	}
 
-	writeJSON(w, http.StatusOK, map[string]any{"shares": out, "candidates": cand})
+	writeJSON(w, http.StatusOK, map[string]any{
+		"shares":     out,
+		"candidates": cand,
+		"follows":    followsOf(following, n.ID),
+	})
+}
+
+// followsOf er de noter, der følger med *denne* note — én linje pr. note, ikke én
+// pr. note og person. Panelet spørger på vegne af noten, og svaret "Prisliste
+// følger med" er det samme, hvem det så end deles med.
+func followsOf(all []store.LinkedShare, noteID string) []followJSON {
+	seen := map[string]bool{}
+	out := []followJSON{}
+	for _, l := range all {
+		if l.ViaID != noteID || seen[l.NoteID] {
+			continue
+		}
+		seen[l.NoteID] = true
+		out = append(out, followJSON{NoteID: l.NoteID, Title: l.Title})
+	}
+	return out
+}
+
+type followJSON struct {
+	NoteID string `json:"note_id"`
+	Title  string `json:"title"`
 }
 
 type noteShareJSON struct {
 	User personJSON `json:"user"`
 	Role string     `json:"role"`
+	// Sat, når personen har noten, fordi en anden delt note peger på den — ikke
+	// fordi nogen har delt netop den. `via` er den note, der peger.
+	Linked bool   `json:"linked"`
+	Via    string `json:"via,omitempty"`
 }
 
 type shareNoteRequest struct {
@@ -159,7 +213,15 @@ func (s *Server) handleShareNote(w http.ResponseWriter, r *http.Request) {
 		s.storeError(w, r, "share note", err)
 		return
 	}
-	w.WriteHeader(http.StatusNoContent)
+
+	// Og det, noten peger på, følger med. Svaret siger hvad — en deling, der stille
+	// tog tre noter mere med, ville være rigtig og alligevel ikke til at overskue.
+	followed, err := s.db.SyncLinkedShares(r.Context(), userFrom(r.Context()).ID)
+	if err != nil {
+		s.internal(w, r, "sync linked shares", err)
+		return
+	}
+	writeJSON(w, http.StatusOK, map[string]any{"follows": followsOf(followed, n.ID)})
 }
 
 // handleUnshareNote takes a person's access away again.
@@ -177,5 +239,12 @@ func (s *Server) handleUnshareNote(w http.ResponseWriter, r *http.Request) {
 		s.internal(w, r, "unshare note", err)
 		return
 	}
+	// Det, der fulgte med, følger også med tilbage. Regnet forfra: de udledte rækker
+	// skrives om fra bunden, så en note, der stadig kan nås fra en anden deling,
+	// bliver stående, og en, der ikke kan, forsvinder.
+	if _, err := s.db.SyncLinkedShares(r.Context(), userFrom(r.Context()).ID); err != nil {
+		s.internal(w, r, "sync linked shares", err)
+		return
+	}
 	w.WriteHeader(http.StatusNoContent)
 }

internal/httpapi/notes_share_test.go

@@ -46,7 +46,7 @@ func TestSharedNoteReachesTheOtherPerson(t *testing.T) {
 	// Share it as a viewer.
 	resp, _ := owner.do(t, "POST", "/api/v1/notes/"+noteID+"/shares",
 		map[string]string{"user_id": sofie, "role": "viewer"})
-	if resp.StatusCode != http.StatusNoContent {
+	if resp.StatusCode != http.StatusOK {
 		t.Fatalf("share: status %d", resp.StatusCode)
 	}
 
@@ -92,7 +92,7 @@ func TestSharedEditorCanWriteButNotGiveAway(t *testing.T) {
 
 	noteID := owner.createNote(t, "# Delt\noprindelig")
 	if resp, _ := owner.do(t, "POST", "/api/v1/notes/"+noteID+"/shares",
-		map[string]string{"user_id": sofie, "role": "editor"}); resp.StatusCode != http.StatusNoContent {
+		map[string]string{"user_id": sofie, "role": "editor"}); resp.StatusCode != http.StatusOK {
 		t.Fatalf("share as editor failed")
 	}
 
@@ -193,7 +193,104 @@ func TestShareRejectsUnknownAndSelf(t *testing.T) {
 		t.Errorf("sharing with oneself: %d, want 422", resp.StatusCode)
 	}
 	if resp, _ := owner.do(t, "POST", "/api/v1/notes/"+noteID+"/shares",
-		map[string]string{"user_id": me, "role": "owner"}); resp.StatusCode == http.StatusNoContent {
+		map[string]string{"user_id": me, "role": "owner"}); resp.StatusCode == http.StatusOK {
 		t.Error("a note was shared at the owner role")
 	}
 }
+
+// De noter, en delt note peger på, følger med — og holder op igen.
+//
+// Det var meldt som en fejl den anden vej rundt: linkene i en delt note førte
+// ingen steder hen, fordi det, de pegede på, ikke var delt. Prøven går hele vejen
+// rundt om svaret på det — dybden, teksten der ændrer sig bagefter, det der ikke
+// må følge med, og vejen tilbage.
+func TestSharedNoteTakesItsLinksWithIt(t *testing.T) {
+	owner := newTestServer(t)
+	owner.bootstrap(t)
+	other := owner.newUser(t, "sofie@example.dk", "Sofie")
+	sofie := userID(t, owner, "sofie@example.dk")
+
+	// Prisliste peger videre på Leveringstider, så kæden er to led lang.
+	deep := owner.createNote(t, "# Leveringstider\nfire dage")
+	linked := owner.createNote(t, "# Prisliste\nog [[Leveringstider]]")
+	apart := owner.createNote(t, "# Bankoplysninger\nikke til deling")
+	noteID := owner.createNote(t, "# Aftale om levering\nse [[Prisliste]]")
+
+	reachable := func(id string) bool {
+		resp, _ := other.do(t, "GET", "/api/v1/notes/"+id, nil)
+		return resp.StatusCode == http.StatusOK
+	}
+
+	resp, out := owner.do(t, "POST", "/api/v1/notes/"+noteID+"/shares",
+		map[string]string{"user_id": sofie, "role": "viewer"})
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("share: status %d", resp.StatusCode)
+	}
+	// Svaret siger, hvad der fulgte med — hele kæden, ikke kun første led. En
+	// deling, der stille tog to noter mere med, ville være rigtig og alligevel ikke
+	// til at overskue.
+	follows, _ := out["follows"].([]any)
+	if len(follows) != 2 {
+		t.Fatalf("delingen nævnte %d noter, der fulgte med, want 2: %v", len(follows), out["follows"])
+	}
+
+	if !reachable(linked) {
+		t.Error("noten, den delte note peger på, fulgte ikke med")
+	}
+	if !reachable(deep) {
+		t.Error("kæden stoppede efter ét led")
+	}
+	if reachable(apart) {
+		t.Error("en note, ingen peger på, blev delt")
+	}
+
+	// Skrevet bagefter tæller også. Et link i dag i en note delt i går skal føre
+	// samme sted hen for begge.
+	senere := owner.createNote(t, "# Rabatter\nti procent")
+	if reachable(senere) {
+		t.Fatal("en helt ny note var delt, før noget pegede på den")
+	}
+	if resp, _ := owner.do(t, "PATCH", "/api/v1/notes/"+noteID,
+		map[string]any{"body": "# Aftale om levering\nse [[Prisliste]] og [[Rabatter]]"}); resp.StatusCode != http.StatusOK {
+		t.Fatal("kunne ikke skrive videre i den delte note")
+	}
+	if !reachable(senere) {
+		t.Error("et link skrevet efter delingen fulgte ikke med")
+	}
+
+	// Og vejen tilbage: tages delingen tilbage, følger det med, den tog med sig.
+	if resp, _ := owner.do(t, "DELETE", "/api/v1/notes/"+noteID+"/shares/"+sofie, nil); resp.StatusCode != http.StatusNoContent {
+		t.Fatalf("unshare: status %d", resp.StatusCode)
+	}
+	if reachable(linked) || reachable(deep) || reachable(senere) {
+		t.Error("det, der fulgte med delingen, blev stående, da den blev taget tilbage")
+	}
+}
+
+// En medredaktør kan ikke dele ejerens noter med sig selv ved at skrive et link.
+//
+// Det er den ene vej, "linkene følger med" kunne blive til en rettighedsfejl: et
+// link peger på en titel, og enhver, der må rette i en delt note, kan skrive en
+// titel. Derfor regnes delingerne kun om, når ejeren selv har gemt.
+func TestAnEditorCannotShareTheOwnersNotesWithThemselves(t *testing.T) {
+	owner := newTestServer(t)
+	owner.bootstrap(t)
+	other := owner.newUser(t, "sofie@example.dk", "Sofie")
+	sofie := userID(t, owner, "sofie@example.dk")
+
+	secret := owner.createNote(t, "# Bankoplysninger\nreg og konto")
+	noteID := owner.createNote(t, "# Fælles\nintet link her")
+	if resp, _ := owner.do(t, "POST", "/api/v1/notes/"+noteID+"/shares",
+		map[string]string{"user_id": sofie, "role": "editor"}); resp.StatusCode != http.StatusOK {
+		t.Fatal("share as editor failed")
+	}
+
+	// Hun skriver linket selv, i den note hun har fået lov at rette i.
+	if resp, _ := other.do(t, "PATCH", "/api/v1/notes/"+noteID,
+		map[string]any{"body": "# Fælles\nse [[Bankoplysninger]]"}); resp.StatusCode != http.StatusOK {
+		t.Fatal("medredaktøren kunne ikke skrive")
+	}
+	if resp, _ := other.do(t, "GET", "/api/v1/notes/"+secret, nil); resp.StatusCode == http.StatusOK {
+		t.Error("en medredaktør delte ejerens note med sig selv ved at skrive et link")
+	}
+}

internal/httpapi/notifications_handlers.go

@@ -19,6 +19,7 @@ type notificationJSON struct {
 	ActorName string `json:"actor_name,omitempty"`
 	ProjectID string `json:"project_id,omitempty"`
 	TaskID    string `json:"task_id,omitempty"`
+	NoteID    string `json:"note_id,omitempty"`
 	Kind      string `json:"kind"`
 	Title     string `json:"title"`
 	Body      string `json:"body,omitempty"`
@@ -44,8 +45,8 @@ func (s *Server) handleListNotifications(w http.ResponseWriter, r *http.Request)
 	for _, n := range list {
 		out = append(out, notificationJSON{
 			ID: n.ID, ActorName: n.ActorName, ProjectID: n.ProjectID, TaskID: n.TaskID,
-			Kind: n.Kind, Title: n.Title, Body: n.Body, Read: n.ReadAt != nil,
-			CreatedAt: n.CreatedAt.Format(time.RFC3339),
+			NoteID: n.NoteID, Kind: n.Kind, Title: n.Title, Body: n.Body,
+			Read: n.ReadAt != nil, CreatedAt: n.CreatedAt.Format(time.RFC3339),
 		})
 	}
 	writeJSON(w, http.StatusOK, map[string]any{"notifications": out, "unread": unread})
@@ -75,8 +76,9 @@ func (s *Server) notify(r *http.Request, n *store.Notification) {
 	}
 
 	s.hub.PublishToUser(n.UserID, "notification", notificationJSON{
-		ID: n.ID, ProjectID: n.ProjectID, TaskID: n.TaskID, Kind: n.Kind,
-		Title: n.Title, Body: n.Body, CreatedAt: n.CreatedAt.Format(time.RFC3339),
+		ID: n.ID, ActorName: n.ActorName, ProjectID: n.ProjectID, TaskID: n.TaskID,
+		NoteID: n.NoteID, Kind: n.Kind, Title: n.Title, Body: n.Body,
+		CreatedAt: n.CreatedAt.Format(time.RFC3339),
 	})
 
 	// Detached from the request: a push round trip to Google or Mozilla has no
@@ -102,6 +104,66 @@ func (s *Server) notifyProject(r *http.Request, projectID, taskID, actorID, kind
 	}
 }
 
+// notifyAssigned tells somebody a task is now theirs.
+//
+// Kun ved *skiftet*, og kun til den, der får den. En opgave, der bliver rørt ti
+// gange bagefter, er stadig den samme besked — og den, der uddelegerer, ved godt
+// hvad de lige har gjort.
+func (s *Server) notifyAssigned(r *http.Request, t *store.Task) {
+	if t == nil || t.AssigneeID == "" {
+		return
+	}
+	actor := userFrom(r.Context())
+	s.notify(r, &store.Notification{
+		UserID: t.AssigneeID, ActorID: actor.ID, ProjectID: t.ProjectID, TaskID: t.ID,
+		Kind: "assigned", Title: actor.Name + " gav dig en opgave", Body: t.Content,
+	})
+}
+
+// notifyNoteChanged tells everybody who can see a note that somebody else wrote in
+// it — folded into one line per note while it is unread.
+//
+// Skrevet som ét kald pr. modtager frem for ét pr. note, fordi sammenlægningen er
+// pr. person: to mennesker kan have læst den forrige besked på hvert sit tidspunkt,
+// og den ene skal have en ny linje, mens den anden får sin gamle rykket op.
+func (s *Server) notifyNoteChanged(r *http.Request, n *store.Note) {
+	if n == nil {
+		return
+	}
+	actor := userFrom(r.Context())
+	audience, err := s.db.NoteAudience(r.Context(), n.ID)
+	if err != nil {
+		s.log.Warn("note audience for notification", "err", err, "note", n.ID)
+		return
+	}
+	title := actor.Name + " rettede en note"
+	body := n.Title
+	for _, userID := range audience {
+		if userID == actor.ID {
+			continue
+		}
+		// Fold first, and only write a row when there was nothing to fold into.
+		// Den anden vej rundt — skriv, og ryd op bagefter — efterlader et vindue,
+		// hvor klokken siger to.
+		folded, err := s.db.BumpUnreadNoteNotification(r.Context(), userID, n.ID, actor.ID, title, body)
+		if err != nil {
+			s.log.Warn("fold note notification", "err", err, "note", n.ID)
+			continue
+		}
+		if folded {
+			// Klokken skal stadig vide det: tallet er uændret, men linjen er rykket
+			// op og siger nu et andet navn. Uden det her opdager en åben fane først
+			// den sammenlagte rettelse ved næste genindlæsning.
+			s.hub.PublishToUser(userID, "notification.folded", map[string]any{"note_id": n.ID})
+			continue
+		}
+		s.notify(r, &store.Notification{
+			UserID: userID, ActorID: actor.ID, ProjectID: n.ProjectID, NoteID: n.ID,
+			Kind: "note.changed", Title: title, Body: body,
+		})
+	}
+}
+
 // PushToUser is pushToUser for callers outside this package — the reminder job,
 // which has the schedule but not the keys.
 func (s *Server) PushToUser(userID, title, body, projectID string) {
@@ -152,7 +214,16 @@ func (s *Server) pushToUser(userID, title, body, projectID string) pushOutcome {
 	if projectID == "" {
 		target = "/"
 	}
-	payload := push.Payload{Title: title, Body: body, URL: target}
+	// Mærket på ikonet følger med beskeden. Talt her frem for i service-workeren,
+	// som ikke har nogen hukommelse mellem to opvågninger og derfor kun kunne lægge
+	// én til noget, den ikke kender — et mærke, der tæller sig selv op og aldrig
+	// ned. Fejler tællingen, sendes beskeden alligevel: en besked uden et tal er
+	// stadig en besked.
+	unread, err := s.db.UnreadNotificationCount(ctx, userID)
+	if err != nil {
+		s.log.Warn("unread count for push", "err", err)
+	}
+	payload := push.Payload{Title: title, Body: body, URL: target, Unread: unread}
 	subject := s.vapidSubject()
 	for _, sub := range subs {
 		err := push.Send(ctx, push.Subscription{

internal/httpapi/notifications_test.go

@@ -0,0 +1,196 @@
+package httpapi
+
+import (
+	"net/http"
+	"testing"
+)
+
+// notifications reads somebody's bell.
+func notifications(t *testing.T, ts *testServer) ([]any, float64) {
+	t.Helper()
+	resp, out := ts.do(t, "GET", "/api/v1/notifications", nil)
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("list notifications: status %d", resp.StatusCode)
+	}
+	list, _ := out["notifications"].([]any)
+	unread, _ := out["unread"].(float64)
+	return list, unread
+}
+
+func firstOf(t *testing.T, list []any) map[string]any {
+	t.Helper()
+	if len(list) == 0 {
+		t.Fatal("ingen beskeder")
+	}
+	n, _ := list[0].(map[string]any)
+	return n
+}
+
+// At blive tildelt en opgave giver besked — og kun ved selve skiftet.
+func TestBeingGivenATaskNotifiesTheAssignee(t *testing.T) {
+	owner := newTestServer(t)
+	owner.bootstrap(t)
+	other := owner.newUser(t, "sofie@example.dk", "Sofie")
+	sofie := userID(t, owner, "sofie@example.dk")
+
+	_, project := owner.do(t, "POST", "/api/v1/projects", map[string]any{"name": "Fælles"})
+	projectID, _ := project["id"].(string)
+	// Medlemskab kommer gennem en invitation; en konto, der allerede findes, bliver
+	// medlem med det samme.
+	if resp, _ := owner.do(t, "POST", "/api/v1/projects/"+projectID+"/invites",
+		map[string]any{"email": "sofie@example.dk", "role": "editor"}); resp.StatusCode >= 300 {
+		t.Fatalf("invitér: %d", resp.StatusCode)
+	}
+
+	resp, task := owner.do(t, "POST", "/api/v1/tasks",
+		map[string]any{"project_id": projectID, "content": "ring til revisor"})
+	if resp.StatusCode != http.StatusCreated {
+		t.Fatalf("opret opgave: %d", resp.StatusCode)
+	}
+	taskID, _ := task["id"].(string)
+
+	// Hvad hun havde, før nogen tildelte hende noget. Ikke nødvendigvis nul —
+	// invitationen kan selv have sagt noget — og prøven handler om forskellen.
+	before, _ := notifications(t, other)
+
+	if resp, _ := owner.do(t, "PATCH", "/api/v1/tasks/"+taskID,
+		map[string]any{"assignee_id": sofie}); resp.StatusCode != http.StatusOK {
+		t.Fatalf("tildel: %d", resp.StatusCode)
+	}
+
+	list, _ := notifications(t, other)
+	if len(list) != len(before)+1 {
+		t.Fatalf("Sofie fik %d beskeder, want %d", len(list), len(before)+1)
+	}
+	n := firstOf(t, list)
+	if n["kind"] != "assigned" {
+		t.Errorf("kind = %v, want assigned", n["kind"])
+	}
+	if n["task_id"] != taskID {
+		t.Errorf("beskeden pegede ikke på opgaven: %v", n["task_id"])
+	}
+	if n["actor_name"] != "Kristian" {
+		t.Errorf("actor_name = %v", n["actor_name"])
+	}
+
+	// En rettelse af noget andet, mens den samme tildeling står i forespørgslen,
+	// er ikke en ny besked. Det er dét, en fladet, der sender hele opgaven ved hver
+	// ændring, gør — og så bliver klokken ubrugelig på en dag.
+	if resp, _ := owner.do(t, "PATCH", "/api/v1/tasks/"+taskID,
+		map[string]any{"assignee_id": sofie, "content": "ring til revisoren"}); resp.StatusCode != http.StatusOK {
+		t.Fatalf("ret: %d", resp.StatusCode)
+	}
+	if now, _ := notifications(t, other); len(now) != len(before)+1 {
+		t.Errorf("en uændret tildeling gav besked igen: %d beskeder", len(now))
+	}
+
+	// Og den, der tildeler sig selv, får ingenting.
+	me := userID(t, owner, "kristian@example.dk")
+	if resp, _ := owner.do(t, "PATCH", "/api/v1/tasks/"+taskID,
+		map[string]any{"assignee_id": me}); resp.StatusCode != http.StatusOK {
+		t.Fatalf("tildel til sig selv: %d", resp.StatusCode)
+	}
+	if list, _ := notifications(t, owner); len(list) != 0 {
+		t.Errorf("man fik besked om noget, man selv gjorde: %d beskeder", len(list))
+	}
+}
+
+// En rettelse i en delt note giver besked — og gentagne rettelser bliver til én,
+// så længe den ikke er læst.
+func TestEditingASharedNoteNotifiesTheOthers(t *testing.T) {
+	owner := newTestServer(t)
+	owner.bootstrap(t)
+	other := owner.newUser(t, "sofie@example.dk", "Sofie")
+	sofie := userID(t, owner, "sofie@example.dk")
+
+	noteID := owner.createNote(t, "# Aftale om levering\nfirst")
+	if resp, _ := owner.do(t, "POST", "/api/v1/notes/"+noteID+"/shares",
+		map[string]string{"user_id": sofie, "role": "editor"}); resp.StatusCode != http.StatusOK {
+		t.Fatal("del noten")
+	}
+
+	// Ejeren skriver. Sofie skal høre det.
+	if resp, _ := owner.do(t, "PATCH", "/api/v1/notes/"+noteID,
+		map[string]any{"body": "# Aftale om levering\nanden linje"}); resp.StatusCode != http.StatusOK {
+		t.Fatal("ret noten")
+	}
+	list, unread := notifications(t, other)
+	if unread != 1 || len(list) != 1 {
+		t.Fatalf("Sofie fik %d beskeder (%v ulæste), want 1", len(list), unread)
+	}
+	n := firstOf(t, list)
+	if n["kind"] != "note.changed" || n["note_id"] != noteID {
+		t.Errorf("besked = %v", n)
+	}
+
+	// En gemning mere, mens den er ulæst, må ikke blive til en linje mere. En note
+	// gemmes ved hver tastepause, så uden det her er fem minutters skriveri tyve
+	// ens linjer i klokken.
+	for i := 0; i < 3; i++ {
+		if resp, _ := owner.do(t, "PATCH", "/api/v1/notes/"+noteID,
+			map[string]any{"body": "# Aftale om levering\nlinje nummer " + string(rune('a'+i))}); resp.StatusCode != http.StatusOK {
+			t.Fatal("ret noten igen")
+		}
+	}
+	if list, unread := notifications(t, other); len(list) != 1 || unread != 1 {
+		t.Errorf("tre gemninger blev til %d beskeder, want 1", len(list))
+	}
+
+	// Læst, og så en rettelse mere: dét er en ny ting at få at vide.
+	if resp, _ := other.do(t, "POST", "/api/v1/notifications/read", nil); resp.StatusCode != http.StatusNoContent {
+		t.Fatal("markér som læst")
+	}
+	if resp, _ := owner.do(t, "PATCH", "/api/v1/notes/"+noteID,
+		map[string]any{"body": "# Aftale om levering\nefter læsningen"}); resp.StatusCode != http.StatusOK {
+		t.Fatal("ret noten efter læsningen")
+	}
+	if list, unread := notifications(t, other); len(list) != 2 || unread != 1 {
+		t.Errorf("efter læsningen gav en rettelse %d beskeder (%v ulæste), want 2 og 1", len(list), unread)
+	}
+
+	// Ejeren har ikke fået besked om sine egne rettelser undervejs.
+	if list, _ := notifications(t, owner); len(list) != 0 {
+		t.Errorf("ejeren fik %d beskeder om sine egne rettelser", len(list))
+	}
+
+	// Og den anden vej: Sofie skriver, ejeren hører det.
+	if resp, _ := other.do(t, "PATCH", "/api/v1/notes/"+noteID,
+		map[string]any{"body": "# Aftale om levering\nfra Sofie"}); resp.StatusCode != http.StatusOK {
+		t.Fatal("Sofie retter")
+	}
+	list, _ = notifications(t, owner)
+	if len(list) != 1 {
+		t.Fatalf("ejeren fik %d beskeder, da noten blev rettet af en anden, want 1", len(list))
+	}
+	if firstOf(t, list)["actor_name"] != "Sofie" {
+		t.Errorf("beskeden nævnte ikke hvem: %v", list[0])
+	}
+
+	// En ændring, der ikke er tekst, er ikke en rettelse at give besked om.
+	if resp, _ := owner.do(t, "PATCH", "/api/v1/notes/"+noteID,
+		map[string]any{"pinned": true}); resp.StatusCode != http.StatusOK {
+		t.Fatal("stjernemarkér")
+	}
+	if list, _ := notifications(t, other); len(list) != 2 {
+		t.Errorf("en stjernemarkering gav besked: %d beskeder, want 2", len(list))
+	}
+}
+
+// En note, ingen deler, er ingen at give besked.
+func TestEditingAPrivateNoteNotifiesNobody(t *testing.T) {
+	owner := newTestServer(t)
+	owner.bootstrap(t)
+	other := owner.newUser(t, "sofie@example.dk", "Sofie")
+
+	noteID := owner.createNote(t, "# Min egen\nintet")
+	if resp, _ := owner.do(t, "PATCH", "/api/v1/notes/"+noteID,
+		map[string]any{"body": "# Min egen\nnoget"}); resp.StatusCode != http.StatusOK {
+		t.Fatal("ret noten")
+	}
+	if list, _ := notifications(t, other); len(list) != 0 {
+		t.Errorf("Sofie hørte om en note, hun ikke kan se: %d beskeder", len(list))
+	}
+	if list, _ := notifications(t, owner); len(list) != 0 {
+		t.Errorf("ejeren fik besked om sin egen note: %d beskeder", len(list))
+	}
+}

internal/httpapi/tasks_handlers.go

@@ -245,6 +245,10 @@ func (s *Server) handleCreateTask(w http.ResponseWriter, r *http.Request) {
 	t.Labels = req.Labels
 	s.activity(r, t.ProjectID, t.ID, "task.created", map[string]any{"content": t.Content})
 	s.publish(t.ProjectID, "task.created", toTaskJSON(*t))
+	// Lavet til en anden med det samme. Det er den samme besked som at blive
+	// tildelt en, der allerede fandtes — hvad der ikke skal ske er, at den ene vej
+	// ind i "det her er dit nu" giver besked og den anden ikke.
+	s.notifyAssigned(r, t)
 	writeJSON(w, http.StatusCreated, toTaskJSON(*t))
 }
 
@@ -272,6 +276,17 @@ func (s *Server) handleUpdateTask(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
+	// Læst før ændringen, og kun når der faktisk kommer en tildeling med i den:
+	// beskeden skal gå på *skiftet*, ikke på at feltet stod i forespørgslen. Den,
+	// der får en opgave tildelt igen, den allerede har, skal ikke have besked om
+	// det hver gang nogen retter en overskrift.
+	wasAssigned := ""
+	if req.AssigneeID != nil {
+		if before, err := s.db.GetTask(r.Context(), taskID, user.ID); err == nil {
+			wasAssigned = before.AssigneeID
+		}
+	}
+
 	u := store.TaskUpdate{
 		Description: req.Description, Priority: req.Priority,
 		SectionID: req.SectionID, ParentID: req.ParentID,
@@ -324,6 +339,9 @@ func (s *Server) handleUpdateTask(w http.ResponseWriter, r *http.Request) {
 	}
 	s.activity(r, t.ProjectID, t.ID, "task.updated", nil)
 	s.publish(t.ProjectID, "task.updated", toTaskJSON(*t))
+	if req.AssigneeID != nil && t.AssigneeID != wasAssigned {
+		s.notifyAssigned(r, t)
+	}
 	writeJSON(w, http.StatusOK, toTaskJSON(*t))
 }
 

internal/httpapi/tasks_test.go

@@ -285,6 +285,49 @@ func TestTodayAndUpcoming(t *testing.T) {
 	}
 }
 
+// The horizon is the list's, and it is asked for per request: seven days is the
+// default, thirty is what Kommende offers for "when does this month get busy", and
+// anything past the cap is trimmed rather than refused — a client that asks for a
+// year gets a month, not a 400.
+func TestUpcomingHorizon(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	resp, out := ts.do(t, "POST", "/api/v1/tasks", map[string]any{
+		"content":  "om tyve dage",
+		"due_date": userDate(t, 20),
+	})
+	if resp.StatusCode != http.StatusCreated {
+		t.Fatalf("create: %d %v", resp.StatusCode, out)
+	}
+
+	count := func(query string) (int, int) {
+		t.Helper()
+		_, view := ts.do(t, "GET", "/api/v1/upcoming"+query, nil)
+		days, _ := view["days"].([]any)
+		var tasks int
+		for _, d := range days {
+			day, _ := d.(map[string]any)
+			list, _ := day["tasks"].([]any)
+			tasks += len(list)
+		}
+		return len(days), tasks
+	}
+
+	if n, found := count(""); n != 7 || found != 0 {
+		t.Errorf("default horizon returned %d days and %d tasks, want 7 and 0", n, found)
+	}
+	if n, found := count("?days=30"); n != 30 || found != 1 {
+		t.Errorf("days=30 returned %d days and %d tasks, want 30 and 1", n, found)
+	}
+	if n, _ := count("?days=365"); n != 31 {
+		t.Errorf("days=365 returned %d days, want it capped at 31", n)
+	}
+	if n, _ := count("?days=nonsense"); n != 7 {
+		t.Errorf("an unreadable days returned %d days, want the default 7", n)
+	}
+}
+
 func TestSearchFindsAcrossProjects(t *testing.T) {
 	ts := newTestServer(t)
 	ts.bootstrap(t)

internal/httpapi/totp_handlers.go

@@ -17,6 +17,9 @@ import (
 type totpSetupResponse struct {
 	Secret string `json:"secret"`
 	URI    string `json:"uri"`
+	// The URI as a scannable QR code (SVG). The secret and URI stay for typing in by
+	// hand on a device that cannot scan.
+	QR string `json:"qr"`
 }
 
 func (s *Server) handleTOTPSetup(w http.ResponseWriter, r *http.Request) {
@@ -54,7 +57,12 @@ func (s *Server) handleTOTPSetup(w http.ResponseWriter, r *http.Request) {
 		s.internal(w, r, "store totp secret", err)
 		return
 	}
-	writeJSON(w, http.StatusOK, totpSetupResponse{Secret: secret, URI: uri})
+	qrSVG, err := auth.TOTPQRSVG(uri)
+	if err != nil {
+		s.internal(w, r, "render totp qr", err)
+		return
+	}
+	writeJSON(w, http.StatusOK, totpSetupResponse{Secret: secret, URI: uri, QR: qrSVG})
 }
 
 type totpConfirmResponse struct {

internal/httpapi/views_handlers.go

@@ -51,7 +51,8 @@ type upcomingDay struct {
 	Tasks []taskJSON `json:"tasks"`
 }
 
-// handleUpcoming returns the next seven days, one entry per day.
+// handleUpcoming returns the next `days` days, one entry per day, seven by default
+// and at most a month.
 //
 // Empty days are included on purpose: the view is a calendar strip, and a Thursday
 // missing from the response because nothing is due would collapse the layout and
@@ -65,10 +66,14 @@ func (s *Server) handleUpcoming(w http.ResponseWriter, r *http.Request) {
 	from := start.Format("2006-01-02")
 	to := start.AddDate(0, 0, days-1).Format("2006-01-02")
 
+	// The row limit follows the window rather than sitting at a constant, or a
+	// month asked for with the same ceiling as a week would truncate the last days
+	// silently — and a day cut off the end of the answer looks exactly like a day
+	// with nothing due.
 	tasks, err := s.db.ListTasks(r.Context(), user.ID, store.TaskFilter{
 		DueFrom:   from,
 		DueBefore: to,
-		Limit:     1000,
+		Limit:     200 * days,
 	})
 	if err != nil {
 		s.internal(w, r, "upcoming", err)

internal/push/push.go

@@ -56,6 +56,13 @@ type Payload struct {
 	Body  string `json:"body,omitempty"`
 	URL   string `json:"url,omitempty"`
 	Tag   string `json:"tag,omitempty"`
+	// Unread er tallet, mærket på appens ikon skal stå på, når beskeden lander.
+	//
+	// Sendt med frem for talt i service-workeren. Den har ingen hukommelse mellem
+	// to opvågninger, så den kan kun lægge én til noget, den ikke ved hvad er — og
+	// et mærke, der tæller sig selv op, kommer aldrig ned igen af sig selv. Tallet
+	// er serverens, og serveren ved det i forvejen.
+	Unread int `json:"unread,omitempty"`
 }
 
 var b64 = base64.RawURLEncoding

internal/push/push_test.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"crypto/ecdh"
 	"crypto/rand"
+	"encoding/json"
 	"net/http"
 	"net/http/httptest"
 	"strings"
@@ -64,3 +65,25 @@ func testVAPID(t *testing.T) VAPID {
 	}
 	return VAPID{Public: pub, Private: priv, Subject: "mailto:kristian@example.dk"}
 }
+
+// Tallet til mærket på ikonet skal med i beskeden — og skal blive væk, når der
+// ikke er noget at sige. Service-workeren læser netop det: er `unread` ikke et
+// tal, står mærket, som det stod, frem for at blive nulstillet af en tælling, der
+// ikke lykkedes.
+func TestPayloadCarriesTheUnreadCount(t *testing.T) {
+	with, err := json.Marshal(Payload{Title: "hej", Unread: 3})
+	if err != nil {
+		t.Fatal(err)
+	}
+	if !strings.Contains(string(with), `"unread":3`) {
+		t.Errorf("payload = %s, want the unread count in it", with)
+	}
+
+	without, err := json.Marshal(Payload{Title: "hej"})
+	if err != nil {
+		t.Fatal(err)
+	}
+	if strings.Contains(string(without), "unread") {
+		t.Errorf("payload = %s, want no count when there is none to send", without)
+	}
+}

internal/store/migrations/0032_shares_follow_links.sql

@@ -0,0 +1,22 @@
+-- De noter, en delt note peger på, følger med delingen.
+--
+-- Et `[[link]]` i en note, der er delt, pegede indtil nu på noget, modtageren
+-- ikke havde fået. Linket stod der, kunne ses, og førte ingen steder hen — meldt
+-- af den første, der prøvede at læse en delt note, og med rette: den, der deler
+-- en note, deler det, noten *siger*, og et link er en del af det, den siger.
+--
+-- Rækken er den samme som en almindelig deling. `linked` er den ene forskel: den
+-- siger, at rækken ikke er valgt af nogen, men udledt af, hvad noten peger på.
+-- Det gør to ting muligt, som en boolsk værdi ellers sjældent gør sig fortjent
+-- til. Fladen kan sige *hvorfor* en person har den note — "den fulgte med" er en
+-- anden sætning end "du delte den". Og udledningen kan regnes forfra hver gang:
+-- de udledte rækker må slettes og skrives igen efter hver ændring, mens de
+-- valgte aldrig røres. Uden skellet ville en oprydning enten lade forældede
+-- delinger blive stående eller fjerne dem, ejeren selv havde sat.
+--
+-- Kun ejerens egne noter følger med. Et link peger på en *titel*, og titler kan
+-- skrives af enhver, der må rette i noten — så hvis et link kunne hente hvad som
+-- helst, ville en medredaktør kunne skrive `[[Bankoplysninger]]` og læse med.
+-- Opslaget sker derfor kun blandt de noter, ejeren selv ejer, og deling af dem
+-- har ejeren allerede ret til.
+ALTER TABLE note_shares ADD COLUMN linked INTEGER NOT NULL DEFAULT 0;

internal/store/migrations/0033_notifications_about_notes.sql

@@ -0,0 +1,18 @@
+-- En besked kan handle om en note.
+--
+-- Tabellen kunne pege på et projekt og en opgave, fordi det var de to ting, der
+-- kunne ske noget med. Nu kan der også: en note, der er delt, bliver rettet af en
+-- anden, og den, den er delt med, skal kunne se at det er sket — uden at åbne den
+-- for at opdage det.
+--
+-- En søjle ved siden af de to andre frem for et generisk (kind, id)-par. De tre er
+-- ikke det samme slags nul: en besked om en opgave har *også* et projekt, og en om
+-- en note har måske ingen af delene. Et par ville skulle tolkes hvert sted, det
+-- læses, og fremmednøglen — som er dén, der rydder beskeden op, når noten slettes
+-- — kan et generisk par slet ikke have.
+ALTER TABLE notifications ADD COLUMN note_id TEXT REFERENCES notes (id) ON DELETE CASCADE;
+
+-- Beskeder om den samme note bliver slået sammen, mens de er ulæste, og opslaget
+-- er nøjagtig det: min, ulæst, om denne note.
+CREATE INDEX notifications_unread_by_note
+    ON notifications (user_id, note_id) WHERE read_at IS NULL AND note_id IS NOT NULL;

internal/store/names_test.go

@@ -0,0 +1,81 @@
+package store
+
+import (
+	"context"
+	"testing"
+)
+
+func TestNormalizeName(t *testing.T) {
+	cases := map[string]string{
+		"andreas":        "Andreas",
+		"Andreas":        "Andreas",
+		"anne mette":     "Anne Mette",
+		"  kristian  ":   "Kristian",
+		"anne   mette":   "Anne Mette",
+		"McDonald":       "McDonald", // an existing inner capital is kept
+		"óscar":          "Óscar",    // Unicode initial
+		"æblegaard":      "Æblegaard",
+		"":               "",
+		"   ":            "",
+		"mette-marie sø": "Mette-marie Sø", // only word-initials are raised
+		"iPhone listen":  "IPhone Listen",  // deliberately: the first letter is raised
+	}
+	for in, want := range cases {
+		if got := NormalizeName(in); got != want {
+			t.Errorf("NormalizeName(%q) = %q, want %q", in, got, want)
+		}
+	}
+}
+
+func TestCreateUserCapitalisesName(t *testing.T) {
+	db := openTest(t)
+	ctx := context.Background()
+
+	u := &User{Email: "andreas@example.dk", Name: "andreas", PasswordHash: "x"}
+	if err := db.CreateUser(ctx, u, "Inbox"); err != nil {
+		t.Fatalf("create user: %v", err)
+	}
+	got, err := db.UserByEmail(ctx, "andreas@example.dk")
+	if err != nil {
+		t.Fatalf("read back: %v", err)
+	}
+	if got.Name != "Andreas" {
+		t.Errorf("stored name = %q, want %q", got.Name, "Andreas")
+	}
+}
+
+func TestNormalizeUserNamesBackfill(t *testing.T) {
+	db := openTest(t)
+	ctx := context.Background()
+
+	// An account as it looked before the app capitalised names: made properly,
+	// then set back to lower case behind the store's back to stand in for an old row.
+	u := &User{Email: "a@example.dk", Name: "Andreas", PasswordHash: "x"}
+	if err := db.CreateUser(ctx, u, "Inbox"); err != nil {
+		t.Fatalf("create user: %v", err)
+	}
+	if _, err := db.ExecContext(ctx, `UPDATE users SET name = 'andreas' WHERE id = ?`, u.ID); err != nil {
+		t.Fatalf("downgrade name: %v", err)
+	}
+
+	fixed, err := db.NormalizeUserNames(ctx)
+	if err != nil {
+		t.Fatalf("normalize: %v", err)
+	}
+	if fixed != 1 {
+		t.Fatalf("fixed = %d, want 1", fixed)
+	}
+	got, _ := db.UserByID(ctx, u.ID)
+	if got.Name != "Andreas" {
+		t.Errorf("name after backfill = %q, want %q", got.Name, "Andreas")
+	}
+
+	// Idempotent: nothing left to do on a second pass.
+	again, err := db.NormalizeUserNames(ctx)
+	if err != nil {
+		t.Fatalf("normalize again: %v", err)
+	}
+	if again != 0 {
+		t.Errorf("second pass fixed = %d, want 0", again)
+	}
+}

internal/store/note_shares.go

@@ -4,6 +4,8 @@ import (
 	"context"
 	"database/sql"
 	"errors"
+	"sort"
+	"strings"
 	"time"
 )
 
@@ -131,3 +133,280 @@ func (db *DB) NotesSharedWith(ctx context.Context, userID string, noteIDs []stri
 	}
 	return out, rows.Err()
 }
+
+// --- de noter, en delt note peger på ---------------------------------------------
+
+// LinkedShare is one note that followed a share: which note, what it is called,
+// and which of the owner's shared notes brought it. The panel shows all three —
+// "Prisliste came along with Aftale om levering" is a sentence somebody can act
+// on, where a bare id is not.
+type LinkedShare struct {
+	NoteID string `json:"note_id"`
+	Title  string `json:"title"`
+	ViaID  string `json:"via_id"`
+	Via    string `json:"via"`
+	Role   Role   `json:"role"`
+	UserID string `json:"user_id"`
+}
+
+// Hvor langt en deling må brede sig.
+//
+// En note, der peger på en note, der peger på en note, er stadig én ting at læse,
+// og den skal følge med. Men noter kan pege i ring og i vifte, og "del denne ene
+// note" må ikke kunne blive til fire hundrede. Loftet er ikke en optimering: det
+// er den grænse, hvor en deling holder op med at være noget, ejeren kan overskue.
+const linkedShareLimit = 100
+
+// SyncLinkedShares regner de udledte delinger forfra for alt, hvad én person ejer.
+//
+// Kaldt efter enhver af ejerens egne handlinger, der kan flytte svaret: en deling,
+// en fjernet deling, og en gemning, der har ændret på det, noten peger på. Regnet
+// forfra frem for rettet til, fordi det er den samme kode hver gang og derfor det
+// samme resultat hver gang — en tilføjelse og en fjernelse er ikke to veje gennem
+// koden, men det samme kald med et andet udgangspunkt.
+//
+// Kun *direkte* delinger er udgangspunkt. En note i et delt projekt er delt af
+// projektet, og projektets folk kan se projektets noter; det er en anden vej ind,
+// med sine egne regler, og den blander sig ikke her.
+//
+// Returnerer, hvad der nu følger med, så kalderen kan sige det. Det er meningen at
+// det bliver sagt: en deling, der stille tager tre noter mere med, er ikke til at
+// overskue, uanset hvor rigtigt den gør det.
+func (db *DB) SyncLinkedShares(ctx context.Context, ownerID string) ([]LinkedShare, error) {
+	if ownerID == "" {
+		return nil, nil
+	}
+
+	// Har personen ikke delt noget, er der intet at regne — og det er de fleste,
+	// det meste af tiden. Uden det her ville hvert eneste klik i notelisten åbne
+	// hver eneste note for at finde ud af, at svaret er tomt: fladen spørger til
+	// delingerne, hver gang man vælger en note, man selv ejer.
+	//
+	// Ét spørgsmål dækker begge halvdele. Er der ingen rækker overhovedet, er der
+	// hverken en deling at brede ud eller en udledt række at rydde op efter.
+	var anyShare int
+	if err := db.QueryRowContext(ctx, `
+		SELECT EXISTS(
+			SELECT 1 FROM note_shares s
+			JOIN notes n ON n.id = s.note_id
+			WHERE n.created_by = ?)`, ownerID).Scan(&anyShare); err != nil {
+		return nil, err
+	}
+	if anyShare == 0 {
+		return nil, nil
+	}
+
+	// Ejerens egne noter, åbnet. Titlerne er forseglet i basen, og et link peger på
+	// en titel — så der er ikke noget opslag at lave i SQL. Målt andetsteds i denne
+	// fil: tolv hundrede noter koster nogle og tredive millisekunder at åbne, og det
+	// her kører kun, når ejeren selv har gjort noget.
+	mine, err := db.notesWhere(ctx, `WHERE created_by = ? AND deleted_at IS NULL`, ownerID)
+	if err != nil {
+		return nil, err
+	}
+	byTitle := map[string]string{}
+	title := map[string]string{}
+	for _, n := range mine {
+		title[n.ID] = n.Title
+		key := strings.ToLower(strings.TrimSpace(n.Title))
+		// Den første vinder, og listen kommer sorteret med den senest rørte først:
+		// to noter med samme titel er sjældent, og når det sker, er den, man skrev
+		// sidst, den, man mente.
+		if key != "" {
+			if _, taken := byTitle[key]; !taken {
+				byTitle[key] = n.ID
+			}
+		}
+	}
+
+	// Hvad hver note peger på, i ét spørgsmål frem for ét pr. note.
+	links := map[string][]string{}
+	rows, err := db.QueryContext(ctx, `
+		SELECT l.note_id, l.target_id
+		FROM note_links l
+		JOIN notes n ON n.id = l.note_id
+		WHERE l.kind = 'note' AND n.created_by = ? AND n.deleted_at IS NULL`, ownerID)
+	if err != nil {
+		return nil, err
+	}
+	for rows.Next() {
+		var from, target string
+		if err := rows.Scan(&from, &target); err != nil {
+			rows.Close()
+			return nil, err
+		}
+		links[from] = append(links[from], target)
+	}
+	rows.Close()
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+
+	// De delinger, ejeren selv har sat.
+	type grant struct{ noteID, userID string }
+	direct := map[grant]Role{}
+	rows, err = db.QueryContext(ctx, `
+		SELECT s.note_id, s.user_id, s.role
+		FROM note_shares s
+		JOIN notes n ON n.id = s.note_id
+		WHERE s.linked = 0 AND n.created_by = ? AND n.deleted_at IS NULL`, ownerID)
+	if err != nil {
+		return nil, err
+	}
+	for rows.Next() {
+		var g grant
+		var role Role
+		if err := rows.Scan(&g.noteID, &g.userID, &role); err != nil {
+			rows.Close()
+			return nil, err
+		}
+		if role.Valid() {
+			direct[g] = role
+		}
+	}
+	rows.Close()
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+
+	// Vandringen. Pr. person, fordi det er personen, delingen handler om: to
+	// forskellige mennesker kan have to forskellige noter og derfor to forskellige
+	// vifter ud fra dem.
+	wanted := map[grant]LinkedShare{}
+	perUser := map[string][]grant{}
+	for g := range direct {
+		perUser[g.userID] = append(perUser[g.userID], g)
+	}
+	for userID, roots := range perUser {
+		seen := map[string]bool{}
+		type step struct {
+			noteID string
+			via    string
+		}
+
+		// Medredaktør først, læser bagefter, og hver runde tømt for sig.
+		//
+		// En note kan nås fra to delte noter med hver sin rolle, og så skal den
+		// stærkeste gælde. Én kø med det hele i ville afgøre det på afstand frem for
+		// på rolle: et barnebarn af en redigerbar note ville tabe til et barn af en
+		// læsbar, fordi det stod længere bagude i køen. To runder gør reglen til
+		// rækkefølgen — er noten allerede nået som redigerbar, ser den anden runde
+		// den ikke.
+		for _, role := range []Role{RoleEditor, RoleViewer} {
+			var queue []step
+			for _, g := range roots {
+				if direct[g] != role || seen[g.noteID] {
+					continue
+				}
+				seen[g.noteID] = true
+				queue = append(queue, step{noteID: g.noteID, via: g.noteID})
+			}
+			for len(queue) > 0 && len(seen) <= linkedShareLimit {
+				cur := queue[0]
+				queue = queue[1:]
+				for _, target := range links[cur.noteID] {
+					id, ok := byTitle[strings.ToLower(strings.TrimSpace(target))]
+					// Et link, der ikke rammer en af ejerens egne noter, er enten
+					// dødt eller peger på en andens note. Ingen af delene er ejerens
+					// at dele.
+					if !ok || seen[id] {
+						continue
+					}
+					seen[id] = true
+					// Rollen arves fra den note, man kom fra. En medredaktør på en
+					// note bliver medredaktør på det, den peger på: teksten er én
+					// ting at arbejde i, og et link midt i den er ikke en grænse.
+					if _, isDirect := direct[grant{noteID: id, userID: userID}]; !isDirect {
+						wanted[grant{noteID: id, userID: userID}] = LinkedShare{
+							NoteID: id,
+							Title:  title[id],
+							ViaID:  cur.via,
+							Via:    title[cur.via],
+							Role:   role,
+							UserID: userID,
+						}
+					}
+					queue = append(queue, step{noteID: id, via: cur.via})
+				}
+			}
+		}
+	}
+
+	// Skrevet i én transaktion: mellem sletningen og skrivningen står basen med
+	// færre delinger, end den skal, og det er ikke et vindue nogen skal kunne læse i.
+	err = db.Tx(ctx, func(tx *sql.Tx) error {
+		if _, err := tx.ExecContext(ctx, `
+			DELETE FROM note_shares
+			WHERE linked = 1
+			  AND note_id IN (SELECT id FROM notes WHERE created_by = ?)`, ownerID); err != nil {
+			return err
+		}
+		for g, l := range wanted {
+			// DO NOTHING ved sammenstød: en direkte deling på den samme note er
+			// ejerens eget valg og har forrang. Den kan ikke nå herned — den er
+			// sorteret fra ovenfor — men reglen skal stå dér, hvor rækken skrives,
+			// ikke kun dér, hvor den udregnes.
+			if _, err := tx.ExecContext(ctx, `
+				INSERT INTO note_shares (note_id, user_id, role, created_by, created_at, linked)
+				VALUES (?, ?, ?, ?, ?, 1)
+				ON CONFLICT (note_id, user_id) DO NOTHING`,
+				g.noteID, g.userID, l.Role, ownerID, time.Now().Unix()); err != nil {
+				return err
+			}
+		}
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	out := make([]LinkedShare, 0, len(wanted))
+	for _, l := range wanted {
+		out = append(out, l)
+	}
+	sort.Slice(out, func(i, j int) bool {
+		if out[i].UserID != out[j].UserID {
+			return out[i].UserID < out[j].UserID
+		}
+		return strings.ToLower(out[i].Title) < strings.ToLower(out[j].Title)
+	})
+	return out, nil
+}
+
+// NoteAudience is everybody who can see a note: its owner, the people it is shared
+// with — chosen or followed along a link — and the members of the project it is
+// filed in.
+//
+// Ét spørgsmål frem for tre, fordi svaret skal være en mængde og ikke tre lister,
+// der skal lægges sammen bagefter: en person kan både eje projektet og have noten
+// delt direkte, og to beskeder om den samme rettelse er én for mange.
+//
+// The note's own row is joined rather than passed in, so a caller cannot ask about
+// a note that has been deleted and get an audience for it anyway.
+func (db *DB) NoteAudience(ctx context.Context, noteID string) ([]string, error) {
+	rows, err := db.QueryContext(ctx, `
+		SELECT created_by FROM notes WHERE id = ? AND deleted_at IS NULL AND created_by IS NOT NULL
+		UNION
+		SELECT user_id FROM note_shares WHERE note_id = ?
+		UNION
+		SELECT p.owner_id FROM notes n JOIN projects p ON p.id = n.project_id
+		 WHERE n.id = ? AND n.deleted_at IS NULL AND p.deleted_at IS NULL
+		UNION
+		SELECT m.user_id FROM notes n JOIN project_members m ON m.project_id = n.project_id
+		 WHERE n.id = ? AND n.deleted_at IS NULL`,
+		noteID, noteID, noteID, noteID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var out []string
+	for rows.Next() {
+		var id string
+		if err := rows.Scan(&id); err != nil {
+			return nil, err
+		}
+		out = append(out, id)
+	}
+	return out, rows.Err()
+}

internal/store/notifications.go

@@ -18,6 +18,7 @@ type Notification struct {
 	ActorName string
 	ProjectID string
 	TaskID    string
+	NoteID    string
 	Kind      string
 	Title     string
 	Body      string
@@ -32,21 +33,45 @@ func (db *DB) CreateNotification(ctx context.Context, n *Notification) error {
 	n.CreatedAt = time.Now().UTC()
 
 	_, err := db.ExecContext(ctx,
-		`INSERT INTO notifications (id, user_id, actor_id, project_id, task_id, kind,
+		`INSERT INTO notifications (id, user_id, actor_id, project_id, task_id, note_id, kind,
 		                            title, body, created_at)
-		 VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+		 VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
 		n.ID, n.UserID, nullString(n.ActorID), nullString(n.ProjectID),
-		nullString(n.TaskID), n.Kind, n.Title, n.Body, n.CreatedAt.Unix())
+		nullString(n.TaskID), nullString(n.NoteID), n.Kind, n.Title, n.Body, n.CreatedAt.Unix())
 	return err
 }
 
+// BumpUnreadNoteNotification folds a second change to the same note into the first,
+// and says whether it found one to fold into.
+//
+// A note is saved on a typing pause, so writing a row per save would turn one
+// person editing one note for five minutes into a column of twenty identical
+// lines. Slået sammen, mens beskeden er ulæst: den rykker op som ny og siger hvem
+// der rørte den sidst.
+//
+// Kun mens den er ulæst — og det er hele reglen. Har man læst "Andreas rettede
+// Aftalen" og går videre, er den næste rettelse en ny ting at få at vide, ikke en
+// gentagelse af noget, man allerede har set.
+func (db *DB) BumpUnreadNoteNotification(ctx context.Context, userID, noteID, actorID, title, body string) (bool, error) {
+	res, err := db.ExecContext(ctx, `
+		UPDATE notifications
+		   SET created_at = ?, actor_id = ?, title = ?, body = ?
+		 WHERE user_id = ? AND note_id = ? AND kind = 'note.changed' AND read_at IS NULL`,
+		time.Now().UTC().Unix(), nullString(actorID), title, body, userID, noteID)
+	if err != nil {
+		return false, err
+	}
+	n, err := res.RowsAffected()
+	return n > 0, err
+}
+
 func (db *DB) ListNotifications(ctx context.Context, userID string, limit int) ([]Notification, error) {
 	if limit <= 0 || limit > 100 {
 		limit = 30
 	}
 	rows, err := db.QueryContext(ctx, `
 		SELECT n.id, n.user_id, n.actor_id, COALESCE(u.name, ''), n.project_id, n.task_id,
-		       n.kind, n.title, n.body, n.read_at, n.created_at
+		       n.note_id, n.kind, n.title, n.body, n.read_at, n.created_at
 		FROM notifications n
 		LEFT JOIN users u ON u.id = n.actor_id
 		WHERE n.user_id = ?
@@ -60,14 +85,15 @@ func (db *DB) ListNotifications(ctx context.Context, userID string, limit int) (
 	out := []Notification{}
 	for rows.Next() {
 		var n Notification
-		var actorID, projectID, taskID sql.NullString
+		var actorID, projectID, taskID, noteID sql.NullString
 		var readAt sql.NullInt64
 		var created int64
 		if err := rows.Scan(&n.ID, &n.UserID, &actorID, &n.ActorName, &projectID,
-			&taskID, &n.Kind, &n.Title, &n.Body, &readAt, &created); err != nil {
+			&taskID, &noteID, &n.Kind, &n.Title, &n.Body, &readAt, &created); err != nil {
 			return nil, err
 		}
-		n.ActorID, n.ProjectID, n.TaskID = actorID.String, projectID.String, taskID.String
+		n.ActorID, n.ProjectID = actorID.String, projectID.String
+		n.TaskID, n.NoteID = taskID.String, noteID.String
 		if readAt.Valid {
 			v := time.Unix(readAt.Int64, 0).UTC()
 			n.ReadAt = &v

internal/store/users.go

@@ -8,6 +8,7 @@ import (
 	"fmt"
 	"strings"
 	"time"
+	"unicode"
 
 	"github.com/kristianwind/verdande/internal/auth"
 )
@@ -62,6 +63,26 @@ func NormalizeEmail(email string) string {
 	return strings.ToLower(strings.TrimSpace(email))
 }
 
+// NormalizeName trims a display name and capitalises the first letter of every
+// word, leaving the rest of each word exactly as typed. So "andreas" becomes
+// "Andreas" and "anne mette" becomes "Anne Mette", while a name that already
+// carries a capital in the middle — "McDonald", an "iPhone" — keeps it: only the
+// first letter of a word is ever raised, never lowered.
+//
+// A name is the person's to spell; the one thing the instance insists on is that
+// it does not start in lower case, because a column of lower-case first names
+// reads as a bug the person cannot fix from their own keyboard. Unicode-aware, so
+// "æblegaard" and "óscar" are raised the same as an ASCII initial.
+func NormalizeName(name string) string {
+	fields := strings.Fields(name)
+	for i, f := range fields {
+		r := []rune(f)
+		r[0] = unicode.ToUpper(r[0])
+		fields[i] = string(r)
+	}
+	return strings.Join(fields, " ")
+}
+
 // CreateUser inserts a user and gives them an Inbox, in one transaction.
 //
 // The Inbox is created here rather than lazily on first use because every other
@@ -70,6 +91,7 @@ func NormalizeEmail(email string) string {
 // of them end up racing to create the second one.
 func (db *DB) CreateUser(ctx context.Context, u *User, inboxName string) error {
 	u.Email = NormalizeEmail(u.Email)
+	u.Name = NormalizeName(u.Name)
 	if u.ID == "" {
 		u.ID = NewID()
 	}
@@ -473,6 +495,7 @@ func (db *DB) UpdatePasswordHash(ctx context.Context, userID, hash, keepSessionI
 // invites were sent to, and changing it is a re-verification flow rather than a
 // field. Neither is is_admin — an account cannot promote itself.
 func (db *DB) UpdateProfile(ctx context.Context, userID, name, timezone, locale string) error {
+	name = NormalizeName(name)
 	res, err := db.ExecContext(ctx,
 		`UPDATE users SET name = ?, timezone = ?, locale = ?, updated_at = ? WHERE id = ?`,
 		name, timezone, locale, time.Now().Unix(), userID)
@@ -485,6 +508,56 @@ func (db *DB) UpdateProfile(ctx context.Context, userID, name, timezone, locale
 	return nil
 }
 
+// NormalizeUserNames capitalises the first letter of every existing user's name,
+// for the accounts created before the app started doing it on the way in.
+//
+// Idempotent: a name already normalised is left untouched, so it costs one pass
+// of names at each start and writes nothing once it has caught up. Like SealNotes
+// it runs at boot rather than as a migration, because the rule lives in Go —
+// Unicode-aware and per word — and SQLite's own UPPER cannot spell it.
+//
+// `updated_at` is not touched: fixing the spelling of a name the person chose is
+// the instance tidying up after itself, not the person editing their profile.
+func (db *DB) NormalizeUserNames(ctx context.Context) (int, error) {
+	rows, err := db.QueryContext(ctx, `SELECT id, name FROM users`)
+	if err != nil {
+		return 0, err
+	}
+	type pending struct{ id, name string }
+	var todo []pending
+	for rows.Next() {
+		var id, name string
+		if err := rows.Scan(&id, &name); err != nil {
+			rows.Close()
+			return 0, err
+		}
+		if n := NormalizeName(name); n != name {
+			todo = append(todo, pending{id, n})
+		}
+	}
+	rows.Close()
+	if err := rows.Err(); err != nil {
+		return 0, err
+	}
+	if len(todo) == 0 {
+		return 0, nil
+	}
+
+	err = db.Tx(ctx, func(tx *sql.Tx) error {
+		for _, p := range todo {
+			if _, err := tx.ExecContext(ctx,
+				`UPDATE users SET name = ? WHERE id = ?`, p.name, p.id); err != nil {
+				return err
+			}
+		}
+		return nil
+	})
+	if err != nil {
+		return 0, err
+	}
+	return len(todo), nil
+}
+
 func (db *DB) SetTOTPSecret(ctx context.Context, userID, secret string, enabled bool) error {
 	// Sealed, like a mailbox password and for the same reason: the copies, not the
 	// server. A TOTP secret in a downloadable backup lets whoever holds the copy

mkdocs.yml

@@ -44,8 +44,8 @@ extra_css:
 nav:
   - Home: index.md
   - Setting it up:
-      - Self-hosting: self-hosting.md
       - As a Rune: rune.md
+      - With Docker: self-hosting.md
       - Configuration: configuration.md
   - Using it:
       - Signing in: signing-in.md

site/index.html

@@ -856,8 +856,11 @@
 				</p>
 
 				<div class="actions">
-					<a class="button primary" href="https://kristianwind.github.io/verdande/self-hosting/">
-						Self-host it
+					<a class="button primary" href="https://kristianwind.github.io/verdande/rune/">
+						As a Rune
+					</a>
+					<a class="button" href="https://kristianwind.github.io/verdande/self-hosting/">
+						With Docker
 					</a>
 					<a class="button" href="https://github.com/kristianwind/verdande">Source</a>
 					<a class="button" href="https://kristianwind.github.io/verdande/">Documentation</a>
@@ -949,12 +952,12 @@
 					<figure class="shot">
 						<img
 							src="screenshots/board.webp"
-							alt="A project in board view: one column per section, with task cards showing due dates, labels and repetition."
+							alt="A project in board view: one column per section, with task cards showing due dates, labels, an arrow to whoever a task is delegated to, and a snoozed card greyed at the foot of its column."
 							width="1400"
 							height="900"
 							loading="lazy"
 						/>
-						<figcaption>Board view — one column per section.</figcaption>
+						<figcaption>Board view — one column per section. A delegated card carries an arrow to whoever has it; a snoozed one greys at the foot.</figcaption>
 					</figure>
 					<figure class="shot">
 						<img
@@ -989,12 +992,22 @@
 					<figure class="shot">
 						<img
 							src="screenshots/themes.webp"
-							alt="The settings page showing five themes as swatches and, below them, four looks written in the typeface each one selects."
+							alt="The settings page showing six themes as swatches and, below them, four looks written in the typeface each one selects."
 							width="1400"
 							height="900"
 							loading="lazy"
 						/>
-						<figcaption>Five themes and four looks: how bright, and how it reads.</figcaption>
+						<figcaption>Six themes and four looks: how bright, and how it reads.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/notes-charcoal.webp"
+							alt="Notes in the Charcoal theme: a warm near-black modelled on Apple Notes, the note list on the left and a note open on the right, with amber where the accent green usually is."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Charcoal — the newest theme, a warm near-black after Apple Notes, amber for the accent.</figcaption>
 					</figure>
 					<figure class="shot">
 						<img
@@ -1009,12 +1022,12 @@
 					<figure class="shot">
 						<img
 							src="screenshots/delegated.webp"
-							alt="Waiting on others: tasks that have been handed to somebody else, grouped under the person who has them."
+							alt="Waiting on others: tasks that have been handed to somebody else, grouped under the person who has them, each row carrying an arrow to that person."
 							width="1400"
 							height="900"
 							loading="lazy"
 						/>
-						<figcaption>Waiting on others — grouped by who has it.</figcaption>
+						<figcaption>Waiting on others — grouped by who has it, each marked with an arrow to them.</figcaption>
 					</figure>
 					<figure class="shot">
 						<img
@@ -1037,6 +1050,75 @@
 						<figcaption>Integrations: your mailbox, your calendar feed, your address.</figcaption>
 					</figure>
 				</div>
+
+				<h3 class="sub">Six themes, the same day</h3>
+				<p class="muted">
+					Three dark and three light — a property of the screen you are sitting at, a
+					laptop in the sun and a monitor in a dark room wanting different answers. The
+					typeface and how tight it sits are chosen apart from them.
+				</p>
+				<div class="shots">
+					<figure class="shot">
+						<img
+							src="screenshots/theme-northern-lights.webp"
+							alt="The Today view in the Northern lights theme: dark, with a green accent."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Northern lights — dark, a green accent. The default.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-charcoal.webp"
+							alt="The Today view in the Charcoal theme: a warm near-black modelled on Apple Notes, with amber for the accent."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Charcoal — a warm near-black after Apple Notes, amber accent.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-dusk.webp"
+							alt="The Today view in the Dusk theme: dark and warm, with an amber accent."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Dusk — dark and warm.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-daylight.webp"
+							alt="The Today view in the Daylight theme: light and coolly neutral."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Daylight — light and coolly neutral.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-paper.webp"
+							alt="The Today view in the Paper theme: light and warm, like paper."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Paper — light and warm, like paper.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-contrast.webp"
+							alt="The Today view in the Contrast theme: black on white, for bright light."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Contrast — black on white, for bright light.</figcaption>
+					</figure>
+				</div>
 			</section>
 
 			<section id="features">
@@ -1070,8 +1152,8 @@
 						<h3>Repeats, and says so in words</h3>
 						<p>
 							Recurring tasks are RRULE underneath and "every other Tuesday" on the
-							screen. Reminders are absolute or relative, and go out to the devices
-							you have allowed them on.
+							screen. Reminders are absolute or relative, and go out as Web Push to
+							an iPhone or a Mac you have allowed them on.
 						</p>
 					</div>
 					<div class="cell">
@@ -1104,8 +1186,26 @@
 						<h3>Waiting on others</h3>
 						<p>
 							What you have handed to somebody else, on its own page, grouped under
-							the person who has it. The thing a shared list stops being able to tell
-							you the moment it is shared.
+							the person who has it — and marked where you meet it too, with an arrow
+							out of your hands, so a list reads at a glance as which tasks are yours
+							and which you are waiting on.
+						</p>
+					</div>
+					<div class="cell">
+						<h3>Snooze it out of the way</h3>
+						<p>
+							Park a task to this evening, tomorrow, next week, or a moment you pick.
+							It greys and sinks to the bottom of the list until then, and comes back
+							by itself — without touching when it is actually due.
+						</p>
+					</div>
+					<div class="cell">
+						<h3>Holds through a drop</h3>
+						<p>
+							A tunnel, a lift, a base station handing over — the app does not go
+							blank when the signal does. A save you make rides out a few seconds of
+							no connection and goes through when it comes back, and a reload opens
+							from what it last saw rather than the browser's offline page.
 						</p>
 					</div>
 				</div>
@@ -1142,9 +1242,10 @@
 						<h3>Your mail, as an inbox</h3>
 						<p>
 							Star a mail in Gmail, or flag one over IMAP in iCloud or Fastmail, and
-							it becomes a task. Forward one to your own address instead and the
-							subject is parsed like anything else you type. One way: unstarring it
-							later does nothing to the task you made.
+							it becomes a task — and the star or flag comes off once it has, so a
+							starred inbox empties as the tasks are made instead of only filling up.
+							Forward one to your own address instead and the subject is parsed like
+							anything else you type.
 						</p>
 					</div>
 					<div class="cell">
@@ -1225,6 +1326,42 @@
 					<a href="https://github.com/kristianwind/verdande/releases">the releases page</a>.
 				</p>
 				<ul class="lately">
+					<li>
+						<span class="ver">0.42</span>
+						A sixth theme, <strong>Charcoal</strong> — a warm near-black after Apple
+						Notes, with amber for the accent. And the app now holds through a short
+						network drop: a save rides out a few seconds of no signal, and a reload
+						opens from what it last saw rather than the browser's offline page.
+					</li>
+					<li>
+						<span class="ver">0.42</span>
+						A starred Gmail message loses its star once it has become a task, the way
+						a flagged IMAP mail already did — so a starred inbox empties itself as the
+						tasks are made instead of only filling up.
+					</li>
+					<li>
+						<span class="ver">0.42</span>
+						Notes read as three lines, the last one the project they are filed under;
+						the calendar lightened to pastel days with today marked at the top; and
+						two-factor set-up shows a QR code to scan.
+					</li>
+					<li>
+						<span class="ver">0.41</span>
+						A task you have delegated is marked where you meet it, not only on the
+						"Waiting on others" page. A task can be snoozed to the bottom of the list
+						until a moment you choose, and comes back by itself.
+					</li>
+					<li>
+						<span class="ver">0.41</span>
+						Web Push reminders reach an iPhone and a Mac again, and every dated task
+						now shows up in a calendar you have subscribed to — not only the timed ones.
+					</li>
+					<li>
+						<span class="ver">0.41</span>
+						The calendar draws each task to its length: drag the foot to resize, or the
+						body to move it. A single note can be shared with one person, and a
+						<code>[[note]]</code> is a link you follow inline.
+					</li>
 					<li>
 						<span class="ver">0.34</span>
 						Sections can be dragged into the order the work actually happens in. The
@@ -1236,21 +1373,6 @@
 						or drag in, a source view, and a copy button on code blocks. Search
 						stopped answering by date and started answering by relevance.
 					</li>
-					<li>
-						<span class="ver">0.32</span>
-						A calendar of its own as a menu item, with a read-only Google calendar
-						that can be laid over it.
-					</li>
-					<li>
-						<span class="ver">0.31</span>
-						Mailboxes over IMAP, so flagging a mail in iCloud or Fastmail makes a
-						task — not only Gmail.
-					</li>
-					<li>
-						<span class="ver">0.30</span>
-						An installation count that says exactly what it sends, and can be turned
-						off in one click.
-					</li>
 				</ul>
 			</section>
 

web/e2e/smoke.spec.js

@@ -64,6 +64,60 @@ function watchForTrouble(page) {
 	return trouble;
 }
 
+/**
+ * Kommendes liste kan se længere frem end en uge.
+ *
+ * Syv dage er stadig det, den åbner på — det er den vandring, der er værd at gå om
+ * morgenen. Men "hvornår bliver den her måned travl" er et andet spørgsmål, og
+ * månedsgitteret svarer på det med form frem for med rækkefølge. Derfor kan
+ * listen sættes til 14 og 30 dage, og valget bliver liggende: horisonten er et
+ * spørgsmål om, hvor langt man planlægger, ikke om hvilken skærm man sidder ved —
+ * men det er den samme slags valg som gitter eller liste, så det ligger samme sted.
+ */
+test('Kommende kan se en måned frem, og horisonten huskes', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const box = page.getByLabel('Ny opgave');
+	await box.fill('skifte olie om 20 dage');
+	await box.press('Enter');
+	await expect(box).toHaveValue('');
+
+	await page.goto('/upcoming');
+	await page.getByRole('button', { name: 'Liste', exact: true }).click();
+
+	const days = page.locator('section:has(> h2)');
+	const task = page.getByText('skifte olie', { exact: true });
+
+	// Syv dage er udgangspunktet, og opgaven ligger uden for dem. At den er væk her
+	// er halvdelen af prøven: uden den kunne de tredive dage nedenfor være syv, der
+	// tilfældigvis viste den.
+	await expect(days).toHaveCount(7);
+	await expect(task).toBeHidden();
+
+	await page.getByRole('button', { name: '30 dage', exact: true }).click();
+	await expect(days).toHaveCount(30);
+	await expect(task).toBeVisible();
+
+	// Ugenummeret står kun, når strimlen er længere end en uge — ellers siger det
+	// ingenting, man ikke kunne se i forvejen.
+	await expect(days.first().getByText(/uge \d+/i)).toBeVisible();
+
+	// Og valget overlever en genindlæsning.
+	await page.reload();
+	await expect(days).toHaveCount(30);
+	await expect(
+		page.getByRole('button', { name: '30 dage', exact: true }),
+		'horisonten blev ikke husket'
+	).toHaveAttribute('aria-pressed', 'true');
+
+	await page.getByRole('button', { name: '7 dage', exact: true }).click();
+	await expect(days).toHaveCount(7);
+	await expect(days.first().getByText(/uge \d+/i)).toBeHidden();
+
+	expect(trouble).toEqual([]);
+});
+
 test('hurtig tilføjelse opretter en opgave, og den kan lukkes', async ({ page }) => {
 	const trouble = watchForTrouble(page);
 	await page.goto('/');
@@ -86,6 +140,29 @@ test('hurtig tilføjelse opretter en opgave, og den kan lukkes', async ({ page }
 	expect(trouble).toEqual([]);
 });
 
+test('en URL i en opgave bliver et klikbart link, og resten åbner opgaven', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const box = page.getByLabel('Ny opgave');
+	// The URL is one token, so the parser leaves it in the title; "i dag" is what it
+	// takes. The link is made at display time — the stored title is still plain text.
+	await box.fill('læs https://example.com/artikel i dag');
+	await box.press('Enter');
+
+	const row = page.locator('.row').filter({ hasText: 'læs' });
+	const link = row.getByRole('link', { name: 'https://example.com/artikel' });
+	await expect(link).toHaveAttribute('href', 'https://example.com/artikel');
+	await expect(link).toHaveAttribute('rel', /noopener/);
+
+	// Clicking the plain part of the title still opens the task; only the link is
+	// carved out. Aimed at the top-left, over "læs", not the URL in the middle.
+	await row.locator('.content').click({ position: { x: 3, y: 3 } });
+	await expect(page.getByRole('complementary', { name: 'Opgave' })).toBeVisible();
+
+	expect(trouble).toEqual([]);
+});
+
 test('hvert link i sidebjælken fører et sted hen', async ({ page }) => {
 	const trouble = watchForTrouble(page);
 	await page.goto('/');
@@ -222,6 +299,38 @@ test('hver fane under indstillinger renderer', async ({ page }) => {
 	expect(trouble).toEqual([]);
 });
 
+test('menu- og brødtekststørrelse sættes hver for sig og overlever en genindlæsning', async ({
+	page
+}) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/indstillinger');
+
+	// Two independent knobs under Udseende — the sidebar's size, and the body text's.
+	await page.getByLabel('Menu', { exact: true }).selectOption('large');
+	await page.getByLabel('Brødtekst', { exact: true }).selectOption('xl');
+	await expect(page.getByLabel('Menu', { exact: true })).toHaveValue('large');
+
+	const attrs = () =>
+		page.evaluate(() => [
+			document.documentElement.dataset.menuSize,
+			document.documentElement.dataset.textSize
+		]);
+	expect(await attrs()).toEqual(['large', 'xl']);
+
+	// They live in localStorage like the theme, so they survive a reload — and are
+	// applied before first paint, so the picker comes back showing the saved choice.
+	await page.reload();
+	expect(await attrs()).toEqual(['large', 'xl']);
+	await expect(page.getByLabel('Menu', { exact: true })).toHaveValue('large');
+
+	// Put them back, so the shared account does not leak a size into other tests.
+	await page.getByLabel('Menu', { exact: true }).selectOption('default');
+	await page.getByLabel('Brødtekst', { exact: true }).selectOption('default');
+	expect(await attrs()).toEqual([undefined, undefined]);
+
+	expect(trouble).toEqual([]);
+});
+
 /**
  * The PWA's own files. Both of the bugs found last in this project were of this
  * kind — a manifest promising icons that were never generated — and they are
@@ -243,11 +352,65 @@ test('manifestet og service workeren findes, og ikonerne findes også', async ({
 	const appleIcon = await request.get('/apple-touch-icon.png');
 	expect(appleIcon.ok(), 'apple-touch-icon.png findes ikke').toBeTruthy();
 
-	// The service worker is what Web Push needs; without it a subscription cannot
-	// be created at all.
-	const worker = await request.get('/sw.js');
+	// The service worker is what Web Push needs — and, since it also caches, what
+	// carries the app through a short network drop. SvelteKit serves it under this
+	// name and registers it itself; the old hand-registered /sw.js is gone.
+	const worker = await request.get('/service-worker.js');
 	expect(worker.ok()).toBeTruthy();
-	expect(await worker.text()).toContain("addEventListener('push'");
+	// The source is minified, so the quotes around the event names are whatever the
+	// minifier chose — match either kind rather than one it might change under us.
+	const source = await worker.text();
+	expect(source).toMatch(/addEventListener\(['"`]push['"`]/);
+	expect(source).toMatch(/addEventListener\(['"`]fetch['"`]/);
+});
+
+/**
+ * The app survives a network drop: reloaded with the network cut, it opens from
+ * the cache and still shows the tasks it last saw, instead of the browser's own
+ * "you are offline" page.
+ *
+ * This is the whole point of the service worker's cache — not offline authoring,
+ * which the app does not claim, but a reload through a tunnel or a handover coming
+ * back to the app rather than to a dead tab. The retry in api.js covers the write
+ * side of the same drop; this covers the read side.
+ */
+test.describe('med service worker', () => {
+	// The rest of the suite blocks the worker (see playwright.config.js); this one
+	// test is about the worker, so it turns it back on for its own context.
+	test.use({ serviceWorkers: 'allow' });
+
+	test('appen overlever et netværksudfald og åbner fra cachen', async ({ page, context }) => {
+	// First load, online: the worker installs, and once it controls the page the
+	// shell and the reads it serves are in the cache.
+	await page.goto('/');
+	await expect(page.getByRole('link', { name: 'I dag' })).toBeVisible();
+
+	// Wait until the worker actually controls this page. Until it does, a reload
+	// still goes to the network and the test proves nothing — the first load
+	// registers the worker but the page that triggered the install is not itself
+	// controlled until it activates and claims.
+	await page.waitForFunction(() => navigator.serviceWorker?.controller != null, null, {
+		timeout: 15000
+	});
+
+	// A controlled reload, still online: now the navigation and its API reads pass
+	// through the worker and land in the cache, ready for the drop.
+	await page.reload();
+	await expect(page.getByRole('link', { name: 'I dag' })).toBeVisible();
+
+	// The network is gone.
+	await context.setOffline(true);
+	try {
+		await page.reload();
+		// The shell came from the cache — the sidebar is here, not a browser error
+		// page — and so did the task list the app renders into it.
+		await expect(page.getByRole('link', { name: 'I dag' })).toBeVisible({ timeout: 15000 });
+		await expect(page.getByRole('link', { name: 'Indbakke' })).toBeVisible();
+	} finally {
+		// Never leave the shared context offline for whatever test runs next.
+		await context.setOffline(false);
+	}
+	});
 });
 
 /**
@@ -316,9 +479,9 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 	await sidebar.getByLabel('Gruppens navn').fill('Arbejde');
 	await sidebar.getByLabel('Gruppens navn').press('Enter');
 
-	// The name is a link to the group's own page; the chevron beside it is a
+	// The name is a link to the group's own page; the folder icon beside it is a
 	// separate button that folds. Two intentions, two targets — the single one they
-	// used to share could only ever serve the smaller.
+	// used to share could only ever serve the smaller, and neither wears an arrow.
 	//
 	// `exact` on the link, because a group's name is a user-chosen word that can
 	// turn up inside another control's name, and Playwright matches an accessible
@@ -328,19 +491,20 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 	await expect(heading).toBeVisible();
 	await expect(sidebar.getByText('Træk et projekt herop')).toBeVisible();
 
-	// A group's name must be readable in full, and must start where a project's
-	// name starts.
+	// A group's name must be readable in full, and must line up with the other
+	// headings — not with the projects filed under it.
 	//
-	// Both halves are here because both were once broken at the same time and for
-	// different reasons. "Omdøb" and "Slet" sat in the flow reserving their width
-	// even while invisible, so ARBEJDE was drawn as "ARBE"; and the fold chevron
-	// sat before the name, pushing a group 22px further in than the projects it
-	// contains — so a group read as if it were filed under them. Every assertion
-	// in this file passed through both, because both buttons still worked.
+	// The clipping half is here because it was once broken: "Omdøb" and "Slet" sat
+	// in the flow reserving their width even while invisible, so ARBEJDE was drawn
+	// as "ARBE". The alignment half changed meaning with the redesign: a group now
+	// carries a section icon just like "Projekter" above it, and belongs to that
+	// heading tier rather than to the project rows below.
 	const shape = await sidebar.locator('.folder-head').evaluate((el) => {
 		const link = el.querySelector('h2 a');
-		const name = { ...link.querySelector('.dot').getBoundingClientRect().toJSON() };
-		// The last child of the link is the name itself; the dot is a span before it.
+		// The leading mark is the section icon in its own fold button, the same
+		// folder/funnel/tag glyph the system headings carry — a group and a section
+		// read identically, and the icon sits before the name, not inside the link.
+		const name = { ...el.querySelector('.head-icon').getBoundingClientRect().toJSON() };
 		return {
 			clipped: link.scrollWidth > link.clientWidth + 1,
 			left: name.left,
@@ -352,17 +516,17 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 	expect(shape.clipped, 'gruppens navn bliver klippet').toBe(false);
 	expect(shape.count, 'navnet og tallet overlapper').toBeGreaterThanOrEqual(shape.right);
 
-	// Measured dot to dot, not box to box: both rows begin with the same coloured
-	// mark, and it is the only thing in them that means the same on both sides.
-	// Comparing the group's inner link with the project's outer box reported the
-	// row's own padding as a misalignment.
-	const projectLeft = await sidebar
-		.getByRole('link', { name: 'Regnskab' })
-		.evaluate((el) => el.querySelector('.dot').getBoundingClientRect().left);
+	// A group is a heading, not a project row: it belongs to the same tier as
+	// "Projekter" and the other system sections — icon, bold name, no arrow — and
+	// starts where they start, not where the projects filed under it do. Measured
+	// icon to icon, the one mark both headings share.
+	const sectionLeft = await sidebar
+		.getByRole('heading', { name: 'Projekter' })
+		.evaluate((el) => el.querySelector('.head-icon').getBoundingClientRect().left);
 	expect(
-		Math.abs(shape.left - projectLeft),
-		`gruppen starter ${Math.round(shape.left - projectLeft)}px fra projekterne`
-	).toBeLessThanOrEqual(2);
+		Math.abs(shape.left - sectionLeft),
+		`gruppen starter ${Math.round(shape.left - sectionLeft)}px fra sektionsoverskrifterne`
+	).toBeLessThanOrEqual(4);
 
 	// Dragged in, then dragged back out onto "Projekter" — which is the reason
 	// that heading is a drop target at all: with every project filed away there
@@ -385,18 +549,13 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 		'false'
 	);
 
-	// En foldet gruppe står med sin chevron fremme permanent, og den lå oven i
-	// prikken med et felt i --surface bag sig — en lys firkant ud for navnet på
-	// den sænkede bjælke, hele tiden. Nu tones prikken ud i stedet, så der er
-	// ingenting at male henover den med.
-	const chevron = await sidebar
-		.locator('.folder-head .chevron-button')
-		.evaluate((el) => ({
-			background: getComputedStyle(el).backgroundColor,
-			dot: getComputedStyle(el.closest('.folder-head').querySelector('.group-dot')).opacity
-		}));
-	expect(chevron.background, 'chevronen har en firkant bag sig').toBe('rgba(0, 0, 0, 0)');
-	expect(chevron.dot, 'prikken ligger stadig under chevronen').toBe('0');
+	// The fold control is the bare folder icon now — no chevron, and no --surface
+	// field behind it, so a folded group leaves no pale square beside its name on
+	// the sunken bar.
+	const foldBg = await sidebar
+		.locator('.folder-head .fold-icon')
+		.evaluate((el) => getComputedStyle(el).backgroundColor);
+	expect(foldBg, 'foldeknappen har en firkant bag sig').toBe('rgba(0, 0, 0, 0)');
 
 	await sidebar.getByRole('button', { name: /^Fold Arbejde/ }).click();
 
@@ -412,11 +571,7 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 	// button on click.
 	await expect(sidebar.getByLabel('Gruppens navn')).toBeVisible();
 	await sidebar.getByLabel('Gruppens navn').press('Enter');
-
-	const painted = await sidebar
-		.locator('.folder-head .group-dot')
-		.evaluate((el) => getComputedStyle(el).backgroundColor);
-	expect(painted, 'gruppens prik fik ikke sin farve').not.toBe('rgba(0, 0, 0, 0)');
+	await expect(sidebar.getByRole('link', { name: 'Arbejde', exact: true })).toBeVisible();
 
 	// The heading itself is *not* indented — only what is filed under it. A heading
 	// that starts further in than the rows above it says the heading is inside
@@ -430,10 +585,10 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 		.evaluate((el) => el.getBoundingClientRect().left + parseFloat(getComputedStyle(el).paddingLeft));
 	expect(headLeft, 'gruppehovedet er rykket ind').toBeLessThanOrEqual(looseLeft);
 
-	// A project inside a group starts further in than a row outside one. Measured
-	// rather than asserted on a class, because indentation is a fact about where
-	// the row's contents land — and measured at the *content* edge, not the box:
-	// the indent is padding, so the element's own left edge does not move.
+	// A project sits at the same left margin whether or not it is in a group — one
+	// straight edge down the sidebar, with the bold heading doing the grouping the
+	// indent used to. Measured at the *content* edge, not the box, because what the
+	// eye follows is where the text lands.
 	await sidebar.getByRole('link', { name: 'Regnskab' }).dragTo(heading);
 	const contentLeft = (el) =>
 		el.getBoundingClientRect().left + parseFloat(getComputedStyle(el).paddingLeft);
@@ -441,7 +596,10 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 		sidebar.locator('.folder > a').first().evaluate(contentLeft),
 		sidebar.locator('.views a').first().evaluate(contentLeft)
 	]);
-	expect(inside, 'et projekt i en gruppe er ikke rykket ind').toBeGreaterThan(outside);
+	expect(
+		Math.abs(inside - outside),
+		'et projekt i en gruppe står ikke i flugt med de faste visninger'
+	).toBeLessThan(2);
 
 	await sidebar
 		.getByRole('link', { name: 'Regnskab' })
@@ -515,8 +673,13 @@ test('en opgave kan trækkes ned i en tom sektion, og en fejlet indlæsning sige
 	await expect(section.getByText('brænde kaffe')).toBeVisible();
 	await expect(page.locator('.toast')).toHaveCount(0);
 
-	// A load that fails says so, and offers to try again.
-	await page.route('**/api/v1/projects/*', (r) => r.abort());
+	// A load that fails with a server error says so at once and offers to try again.
+	// A 500 is the server answering, not a dropped connection, so it is not a blip to
+	// wait out — it is not retried, and the message is immediate. (A dropped
+	// connection now retries for a few seconds first; that is the self-heal test.)
+	await page.route('**/api/v1/projects/*', (r) =>
+		r.fulfill({ status: 500, contentType: 'application/json', body: '{"code":"internal_error"}' })
+	);
 	await page.reload();
 	await expect(page.getByText('Serveren svarede ikke')).toBeVisible();
 	await expect(page.getByRole('button', { name: 'Prøv igen' })).toBeVisible();
@@ -527,6 +690,52 @@ test('en opgave kan trækkes ned i en tom sektion, og en fejlet indlæsning sige
 	expect(trouble.filter((t) => !t.includes('projects'))).toEqual([]);
 });
 
+/**
+ * A save made during a short drop is not lost to it.
+ *
+ * This is the whole of what "offline" means here: not a cache to work in with no
+ * server, but a save that rides out a few seconds of no connection and goes through
+ * when it comes back — with a quiet "reconnecting" while it waits, and no error and
+ * no reverted change once it heals. A drop that outlasts the retry window is a real
+ * outage and takes the normal error path; that is not this test.
+ */
+test('en kort netaudsætning under en handling genoprettes af sig selv', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	// Wait for the app to finish loading before cutting the line — `goto` resolves at
+	// the load event, but the data load runs after hydration, and aborting that would
+	// test a cold start, not a blip mid-use.
+	const box = page.getByLabel('Ny opgave');
+	await expect(box).toBeVisible();
+
+	// The app is loaded and online. Now the connection drops — every call fails, the
+	// way it does in a tunnel, rather than one endpoint erroring.
+	let down = true;
+	await page.route('**/api/v1/**', (route) => (down ? route.abort() : route.continue()));
+
+	// A task captured during the drop. Its save fails on the network and starts
+	// retrying rather than giving up.
+	await box.fill('under et udfald');
+	await box.press('Enter');
+
+	// The quiet pill, once the retry has lasted long enough to be worth showing.
+	await expect(page.locator('.netstatus')).toBeVisible();
+
+	// The drop ends. The retry goes through on its own and the pill leaves — no
+	// error, nothing toasted as failed.
+	down = false;
+	await expect(page.locator('.netstatus')).toHaveCount(0, { timeout: 10000 });
+	await expect(page.locator('.toast')).toHaveCount(0);
+
+	// And the save landed: an undated quick capture goes to the Inbox, and there it
+	// is, saved across the drop rather than lost to it.
+	await page.getByRole('link', { name: /Indbakke/ }).click();
+	await expect(page.getByText('under et udfald')).toBeVisible({ timeout: 10000 });
+
+	expect(trouble).toEqual([]);
+});
+
 /**
  * A task can be dragged onto another day, and onto another project.
  *
@@ -902,6 +1111,8 @@ test('en rolle kan rettes uden at fjerne personen', async ({ browser, page }) =>
 	const context = await browser.newContext({ storageState: { cookies: [], origins: [] } });
 	const andreas = await context.newPage();
 	await andreas.goto(link);
+	// Typed in lower case on purpose: the instance capitalises a name on the way
+	// in, so from here on this person is "Andreas" everywhere they are shown.
 	await andreas.getByLabel('Navn', { exact: true }).fill('andreas');
 	await andreas.getByLabel(/Adgangskode/).fill('et langt kodeord til test');
 	await andreas.getByRole('button', { name: 'Opret konto' }).click();
@@ -920,7 +1131,7 @@ test('en rolle kan rettes uden at fjerne personen', async ({ browser, page }) =>
 	await page.reload();
 	await projectAction(page, /Delt/);
 	await expect(page.getByText('Ejer')).toBeVisible();
-	await page.getByLabel('Rolle for andreas').selectOption('editor');
+	await page.getByLabel('Rolle for Andreas').selectOption('editor');
 
 	await andreas.reload();
 	await expect(andreas.getByLabel('Ny opgave')).toBeVisible();
@@ -933,11 +1144,11 @@ test('en rolle kan rettes uden at fjerne personen', async ({ browser, page }) =>
 	await page.getByLabel('Ny opgave').press('Enter');
 	await page.getByText('brænde kaffe', { exact: true }).click();
 	const drawer = page.getByRole('complementary', { name: 'Opgave' });
-	await drawer.getByLabel('Ansvarlig').selectOption({ label: 'andreas' });
+	await drawer.getByLabel('Ansvarlig').selectOption({ label: 'Andreas' });
 	await page.keyboard.press('Escape');
 
 	const row = page.locator('.row').filter({ hasText: 'brænde kaffe' });
-	await expect(row.getByTitle('Uddelegeret til andreas')).toBeVisible();
+	await expect(row.getByTitle('Uddelegeret til Andreas')).toBeVisible();
 	// And not on a task that is nobody's.
 	await page.getByLabel('Ny opgave').fill('min egen');
 	await page.getByLabel('Ny opgave').press('Enter');
@@ -1465,9 +1676,18 @@ test('en gruppe er en side med sine projekter, en beskrivelse og filer', async (
 	// Into the group, then onto its page — which is what the heading is a link to
 	// now. The chevron beside it still folds; they are two intentions and the old
 	// single target could only serve the smaller one.
-	await sidebar
-		.getByRole('link', { name: 'Drejebænk' })
-		.dragTo(sidebar.getByRole('link', { name: 'Værksted' }));
+	//
+	// The drop is retried until the project actually nests under the group: a native
+	// HTML5 drag occasionally does not register the first time under CI load, and a
+	// single dragTo then leaves the group empty and the page assertion failing for a
+	// reason that has nothing to do with what the test is about.
+	const nested = sidebar.locator('.folder > a').filter({ hasText: 'Drejebænk' });
+	await expect(async () => {
+		await sidebar
+			.getByRole('link', { name: 'Drejebænk' })
+			.dragTo(sidebar.getByRole('link', { name: 'Værksted' }));
+		await expect(nested).toHaveCount(1, { timeout: 1000 });
+	}).toPass({ timeout: 10000 });
 	await sidebar.getByRole('link', { name: 'Værksted' }).click();
 
 	await expect(page.getByRole('heading', { name: 'Værksted', level: 1 })).toBeVisible();
@@ -1918,7 +2138,12 @@ test('en passkey kan registreres og logges ind med', async ({ browser, browserNa
 	// Now sign out and back in with it. No email typed: the device knows which
 	// account its key belongs to, which is also why this page cannot be used to
 	// find out who has an account here.
-	await page.getByRole('navigation', { name: 'Hovedmenu' }).getByText('Log ud').click();
+	// Signing out asks first now: one click arms it, a second within a few seconds
+	// does it. The whole account row is the button; its label changes to the prompt.
+	const signOut = page.getByRole('navigation', { name: 'Hovedmenu' }).locator('.user');
+	await signOut.click();
+	await expect(signOut).toContainText('Tryk igen for at logge ud');
+	await signOut.click();
 	// `exact`, because "Log ind" is a substring of "Log ind med en passkey" and
 	// Playwright matches an accessible name loosely unless told otherwise.
 	await expect(page.getByRole('button', { name: 'Log ind', exact: true })).toBeVisible();
@@ -2613,6 +2838,238 @@ test('en note kan deles med en person direkte, og dukker op hos dem', async ({ b
 	expect(trouble).toEqual([]);
 });
 
+/**
+ * Note-links i en delt note.
+ *
+ * Meldt af en, der havde en note delt med sig: linkene i den gjorde ingenting.
+ * Det var to ting. Opslaget faldt tilbage på det første søgeresultat, når titlen
+ * ikke passede — og i en delt note er det første resultat næsten altid noten selv,
+ * fordi den nævner den titel, den linker til. Så åbnede linket den note, man
+ * allerede stod i, hvilket ser ud som ingenting. Og når det så endelig ikke fandt
+ * noget, sagde beskeden "blev ikke fundet", som var den forkerte grund: noten
+ * findes, den er bare ikke delt med.
+ */
+test('note links i en delt note fører til den rigtige note, eller siger hvorfor ikke', async ({
+	browser,
+	page
+}) => {
+	const trouble = watchForTrouble(page);
+
+	await page.goto('/indstillinger/brugere');
+	await page.getByLabel('E-mailadresse').fill('link@example.dk');
+	await page.getByRole('button', { name: 'Send invitation' }).click();
+	const link = await page.locator('.link-out').textContent();
+
+	const gæstCtx = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+	const gæst = await gæstCtx.newPage();
+	await gæst.goto(link);
+	await gæst.getByLabel('Navn', { exact: true }).fill('Linnea');
+	await gæst.getByLabel(/Adgangskode/).fill('et langt kodeord til test');
+	await gæst.getByRole('button', { name: 'Opret konto' }).click();
+	await expect(gæst.getByRole('navigation', { name: 'Hovedmenu' })).toBeVisible();
+	const noterURL = new URL('/noter', link).href;
+
+	// Ejeren skriver to noter: en, der bliver delt, og en, der ikke gør — og den
+	// delte peger på den anden.
+	const sidebar = page.getByRole('navigation', { name: 'Hovedmenu' });
+	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('Kristians prisblad');
+	await page.getByRole('textbox', { name: 'Notens tekst' }).blur();
+
+	await page.getByRole('button', { name: 'Ny note' }).click();
+	await page.getByRole('textbox', { name: 'Notens tekst' }).click();
+	await page.keyboard.type('Faelles aftale om afhentning\n');
+	await page.keyboard.type('[[Kristians prisblad]]');
+	await page.getByRole('textbox', { name: 'Notens tekst' }).blur();
+
+	// Gæsten har en note af sin egen, som hun kan pege på.
+	await gæst.goto(noterURL);
+	await gæst.getByRole('button', { name: 'Ny note' }).click();
+	await gæst.getByRole('textbox', { name: 'Notens tekst' }).click();
+	await gæst.keyboard.type('Linneas egne maal');
+	await gæst.getByRole('textbox', { name: 'Notens tekst' }).blur();
+
+	await page.locator('.notes button.row').filter({ hasText: /^Faelles aftale/ }).click();
+	await page.locator('.sharewrap > button').click();
+	const share = page.locator('.sharepanel');
+	await expect(share).toBeVisible();
+	await share.locator('.addshare select').first().selectOption({ label: 'Linnea' });
+	await share.getByRole('button', { name: 'Tilføj' }).click();
+	const row = share.locator('.sharelist li').filter({ hasText: 'Linnea' });
+	await expect(row).toBeVisible();
+	await row.locator('select').selectOption('editor');
+
+	// Hun skriver sit eget link ind i den delte note — og et, der ikke rammer noget.
+	await gæst.goto(noterURL);
+	await gæst.locator('.notes button.row').filter({ hasText: /^Faelles aftale/ }).click();
+	const body = gæst.getByRole('textbox', { name: 'Notens tekst' });
+	await expect(body).toContainText('Kristians prisblad');
+	await body.click();
+	await gæst.keyboard.press('Control+End');
+	await gæst.keyboard.type('\n[[Linneas egne maal]]\n[[Noget der aldrig blev skrevet]]');
+	await body.blur();
+	await expect(gæst.locator('footer .hint')).toHaveText('Gemt');
+
+	await gæst.goto(noterURL);
+	await gæst.locator('.notes button.row').filter({ hasText: /^Faelles aftale/ }).click();
+	const delt = gæst.getByRole('textbox', { name: 'Notens tekst' });
+
+	// Hendes eget link fører derhen, det siger.
+	await delt.locator('a.notelink', { hasText: 'Linneas egne maal' }).click();
+	await expect(gæst.getByRole('textbox', { name: 'Notens tekst' })).toContainText(
+		'Linneas egne maal'
+	);
+
+	// Og det link, der ikke rammer nogen note, må ikke lande et tilfældigt sted. Det
+	// er dér, det gamle fald tilbage på "første søgeresultat" åbnede noten, man
+	// allerede stod i — hvilket ser ud som ingenting.
+	await gæst.locator('.notes button.row').filter({ hasText: /^Faelles aftale/ }).click();
+	const igen = gæst.getByRole('textbox', { name: 'Notens tekst' });
+	await igen.locator('a.notelink', { hasText: 'Noget der aldrig blev skrevet' }).click();
+	await expect(gæst.locator('.toast')).toContainText('ikke delt med dig');
+	// Stadig i den delte note: linket flyttede hende ingen steder hen.
+	await expect(gæst.getByRole('textbox', { name: 'Notens tekst' })).toContainText(
+		'Faelles aftale om afhentning'
+	);
+
+	await gæstCtx.close();
+	expect(trouble).toEqual([]);
+});
+
+/**
+ * Delingen tager de noter med, noten peger på.
+ *
+ * Den anden halvdel af den melding: linkene i en delt note skal ikke bare sige
+ * hvorfor de ikke kan følges — de skal kunne følges. Deler man en note, deler man
+ * det, den *siger*, og et link er en del af det.
+ */
+test('en delt note tager de noter med, den peger på', async ({ browser, page }) => {
+	const trouble = watchForTrouble(page);
+
+	await page.goto('/indstillinger/brugere');
+	await page.getByLabel('E-mailadresse').fill('med@example.dk');
+	await page.getByRole('button', { name: 'Send invitation' }).click();
+	const link = await page.locator('.link-out').textContent();
+
+	const ctx = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+	const gæst = await ctx.newPage();
+	await gæst.goto(link);
+	await gæst.getByLabel('Navn', { exact: true }).fill('Mikkel');
+	await gæst.getByLabel(/Adgangskode/).fill('et langt kodeord til test');
+	await gæst.getByRole('button', { name: 'Opret konto' }).click();
+	await expect(gæst.getByRole('navigation', { name: 'Hovedmenu' })).toBeVisible();
+	const noterURL = new URL('/noter', link).href;
+
+	const sidebar = page.getByRole('navigation', { name: 'Hovedmenu' });
+	await sidebar.getByRole('link', { name: 'Noter', exact: true }).click();
+
+	// Tre noter: en kæde på to, og en der ikke hænger sammen med noget.
+	for (const text of [
+		'Leveringstider for pakker',
+		'Prisliste i kroner\nog [[Leveringstider for pakker]]',
+		'Bankoplysninger som ingen skal se',
+		'Aftale om levering\nse [[Prisliste i kroner]]'
+	]) {
+		await page.getByRole('button', { name: 'Ny note' }).click();
+		await page.getByRole('textbox', { name: 'Notens tekst' }).click();
+		await page.keyboard.type(text);
+		await page.getByRole('textbox', { name: 'Notens tekst' }).blur();
+		await expect(page.locator('footer .hint')).toHaveText('Gemt');
+	}
+
+	await page.locator('.notes button.row').filter({ hasText: /^Aftale om levering/ }).click();
+	await page.locator('.sharewrap > button').click();
+	const share = page.locator('.sharepanel');
+	await share.locator('.addshare select').first().selectOption({ label: 'Mikkel' });
+	await share.getByRole('button', { name: 'Tilføj' }).click();
+
+	// Sagt, ikke stiltiende: begge noter fulgte med, og panelet navngiver dem.
+	await expect(page.locator('.toast')).toContainText('de 2 noter');
+	await expect(share.locator('.follows')).toContainText('Prisliste i kroner');
+	await expect(share.locator('.follows')).toContainText('Leveringstider for pakker');
+
+	// Og hos ham: hele kæden kan læses, og linkene fører derhen.
+	await gæst.goto(noterURL);
+	await gæst.locator('.notes button.row').filter({ hasText: /^Aftale om levering/ }).click();
+	await gæst
+		.getByRole('textbox', { name: 'Notens tekst' })
+		.locator('a.notelink', { hasText: 'Prisliste i kroner' })
+		.click();
+	const hos = gæst.getByRole('textbox', { name: 'Notens tekst' });
+	await expect(hos).toContainText('Prisliste i kroner');
+	await hos.locator('a.notelink', { hasText: 'Leveringstider for pakker' }).click();
+	await expect(gæst.getByRole('textbox', { name: 'Notens tekst' })).toContainText(
+		'Leveringstider for pakker'
+	);
+	// Men kun det, noten peger på. Resten er stadig ejerens alene.
+	await expect(
+		gæst.locator('.notes button.row').filter({ hasText: /^Bankoplysninger/ })
+	).toHaveCount(0);
+
+	// Den fulgte adgang står som det, den er, i panelet under den note, den ramte.
+	// `button.row`, ikke bare knappen ved navn: panelet står åbent og har sin egen
+	// knap med den samme titel på.
+	await page.locator('.notes button.row').filter({ hasText: /^Prisliste i kroner/ }).click();
+	await page.locator('.sharewrap > button').click();
+	await expect(page.locator('.sharepanel .sharelist li').filter({ hasText: 'Mikkel' })).toContainText(
+		'følger med'
+	);
+
+	// Taget tilbage følger den med tilbage.
+	await page.locator('.notes button.row').filter({ hasText: /^Aftale om levering/ }).click();
+	await page.locator('.sharewrap > button').click();
+	await page
+		.locator('.sharepanel .sharelist li')
+		.filter({ hasText: 'Mikkel' })
+		.getByRole('button', { name: 'Fjern adgang' })
+		.click();
+	await gæst.goto(noterURL);
+	await expect(
+		gæst.locator('.notes button.row').filter({ hasText: /^Prisliste i kroner/ })
+	).toHaveCount(0);
+
+	await ctx.close();
+	expect(trouble).toEqual([]);
+});
+
+/**
+ * `</>` er kode, ikke kilde.
+ *
+ * Sådan blev den læst af den første, der så den — markér et ord, tryk på tegnet,
+ * og hele noten skiftede til Markdown. Tegnet betyder kode i ethvert andet
+ * program, så det er knappen, der skal give efter, ikke brugeren.
+ */
+test('</> sætter markeringen som kode, og kilden har sin egen knap', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/noter');
+
+	await page.getByRole('button', { name: 'Ny note' }).click();
+	const body = page.getByRole('textbox', { name: 'Notens tekst' });
+	await body.click();
+	await page.keyboard.type('Kodenote\n');
+	await page.keyboard.type('kør kommandoen npm først');
+
+	// Markér ét ord og gør det til kode.
+	await page.keyboard.press('Shift+Home');
+	await page.keyboard.press('Shift+ArrowRight');
+	await page.getByRole('button', { name: 'Kode', exact: true }).click();
+	await expect(body.locator('code')).toHaveCount(1);
+
+	// Noten er stadig rig tekst — kildevisningen er ikke slået til.
+	await expect(page.locator('textarea.source')).toHaveCount(0);
+
+	// Og den anden knap gør stadig det, den altid har gjort: viser filen, med
+	// baktikkerne i, som er beviset på at koden nåede hele vejen ned.
+	await body.blur();
+	await expect(page.locator('footer .hint')).toHaveText('Gemt');
+	await page.getByRole('button', { name: /Vis kilden/ }).click();
+	await expect(page.locator('textarea.source')).toHaveValue(/`/);
+
+	expect(trouble).toEqual([]);
+});
+
 test('udseendet kan skiftes uafhængigt af temaet, og overlever en genindlæsning', async ({
 	page
 }) => {

web/playwright.config.js

@@ -51,6 +51,12 @@ export default defineConfig({
 
 	use: {
 		baseURL,
+		// Off by default. The app now ships a caching service worker, and once it
+		// controls a page Playwright's page.route() no longer sees the fetches it
+		// makes — so a test that forces a 500 to check the error path gets the real
+		// 200 through the worker instead, and reads as a broken feature. The one test
+		// that needs the real worker turns it back on for its own context.
+		serviceWorkers: 'block',
 		trace: 'retain-on-failure',
 		screenshot: 'only-on-failure',
 		// Pinned, because the app reads both. The sign-up form sends

web/scripts/generate-screenshots.js

@@ -73,6 +73,19 @@ const SHOTS = [
 	{ name: 'detail', path: (ids) => `/opgave/${ids.detail}`, theme: 'dark' },
 	{ name: 'notes', path: '/noter', theme: 'dark', prepare: openMeetingNote },
 	{ name: 'notes-source', path: '/noter', theme: 'dark', prepare: showNoteSource },
+	// Charcoal, the newest theme — a warm near-black modelled on Apple Notes, with
+	// amber where the green usually is. The notes list shows a theme's surfaces, text
+	// and one accent at once, so that is where the landing page carries it up close.
+	{ name: 'notes-charcoal', path: '/noter', theme: 'charcoal', prepare: openMeetingNote },
+	// The same Today view in each of the six themes, for a gallery that shows the
+	// whole range at a glance. One view throughout, so the only thing that changes
+	// from picture to picture is the theme itself. Names are the themes' own.
+	{ name: 'theme-northern-lights', path: '/', theme: 'dark' },
+	{ name: 'theme-charcoal', path: '/', theme: 'charcoal' },
+	{ name: 'theme-dusk', path: '/', theme: 'dusk' },
+	{ name: 'theme-daylight', path: '/', theme: 'light' },
+	{ name: 'theme-paper', path: '/', theme: 'paper' },
+	{ name: 'theme-contrast', path: '/', theme: 'contrast' },
 	// The new work, and in the light theme, which is what most people want to look
 	// at a landing page in. The calendar drawing tasks to their length, and a note
 	// somebody shared into the "Shared with me" group.
@@ -483,6 +496,17 @@ async function seed({ colleague, noteTitle }) {
 	const made = {};
 	for (const task of tasks) made[task.content] = await api('/tasks', task);
 
+	// One task snoozed, so the board and the list show a card parked at the bottom
+	// of its section — greyed, with a "snoozed until" mark — set aside rather than
+	// forgotten, and without touching when it is due.
+	const snoozeUntil = (() => {
+		const d = new Date();
+		d.setDate(d.getDate() + 2);
+		d.setHours(9, 0, 0, 0);
+		return d.toISOString();
+	})();
+	await api(`/tasks/${made['Write the job advert'].id}/snooze`, { until: snoozeUntil });
+
 	// A saved filter, because the sidebar shows them and an empty heading reads as
 	// a feature that does not work.
 	await api('/filters', { name: 'Important this week', query: 'p1 & 7 days' });

web/src/app.css

@@ -86,6 +86,12 @@
 	--text-xl: 1.375rem;
 	--text-2xl: 1.75rem;
 
+	/* The sidebar's own text size, its own knob (Settings → Appearance) so the menu
+	   can be made easier to read without dragging the whole list with it. Default is
+	   a step up from the old --text-sm the nav used, at medium weight, so the menu
+	   items read as menu items. [data-menu-size] on <html> overrides it. */
+	--menu-size: 0.9375rem;
+
 	/* Spacing on a 4px grid. */
 	--s1: 0.25rem;
 	--s2: 0.5rem;
@@ -204,6 +210,52 @@
 	--shadow-lg: 0 8px 32px rgb(0 0 0 / 0.4);
 }
 
+/* Kul — the greys of Apple Notes' dark mode, to Kristian's own sampled values.
+   Three panel greys, lightest sidebar to darkest editor — the reverse of the usual
+   sunken-is-darkest order, which is why the editor gets its own --editor-bg rather
+   than sharing --surface-raised with the list. The accent turns amber, and the
+   selected menu item, selected note and section headings each get a fallback token
+   so this theme can hit its colours without touching any other. */
+[data-theme='charcoal'] {
+	--ground: #1e1e1e;
+	--surface: #2a3033;
+	--surface-raised: #242b2e; /* the note list */
+	--surface-sunken: #2d3133; /* the menu / sidebar — lightest here */
+	--line: #34393b;
+	--line-strong: #414749;
+
+	--ink: #ffffff;
+	--ink-muted: #dcdcdc;
+	--ink-faint: #9ba0a2;
+
+	/* Amber, Apple's Notes accent. The bright value is the selected menu item; the
+	   dark text rides on top of it. */
+	--accent: #ffce35;
+	--accent-hover: #ffd75a;
+	--accent-sunken: #ffce35;
+	--accent-ink: #1e1e1e;
+
+	/* Per-element, and only here — every other theme falls back to the shared token
+	   in the var() calls that read these. */
+	--editor-bg: #1e1e1e; /* the text field, a shade below the list */
+	--note-on-bg: #a78c26; /* a selected note in the list — gold */
+	--note-on-ink: #1e1e1e; /* dark text on the gold */
+	--nav-active-ink: #1e1e1e; /* dark text on the amber menu item */
+	--heading-ink: #8a8e90; /* PROJEKTER and the group names — quiet grey */
+	--note-group-bg: #2d3133; /* day separators take the menu's resting grey, not the darker ground */
+
+	--p1: #cf6b6b;
+	--p2: #d69f5c;
+	--p3: #6b9ecf;
+	--p4: var(--ink-faint);
+
+	--danger: #cf6b6b;
+	--danger-sunken: #33201f;
+
+	--shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+	--shadow-lg: 0 8px 32px rgb(0 0 0 / 0.4);
+}
+
 /* Papir — warm light, closer to paper than to a screen. */
 [data-theme='paper'] {
 	--ground: #f6f1e7;
@@ -369,9 +421,13 @@ button {
 	   søgefelt. */
 }
 
+/* A translucent wash of the accent, not a solid block and not the old near-invisible
+   tint. --accent-sunken sat a hair off the editor's own surface in dark, so a
+   selection could not be seen; a solid accent could, but read as a heavy slab. Mixing
+   the accent part-way into transparent lays a clear green film over the text while it
+   keeps its own colour — visible on white and on the dark surfaces alike. */
 ::selection {
-	background: var(--accent-sunken);
-	color: var(--ink);
+	background: color-mix(in oklab, var(--accent) 42%, transparent);
 }
 
 /* Scrollbars, made quiet. The default on Windows is a wide grey slab that
@@ -516,3 +572,41 @@ button {
 	line-height: 1.5;
 	letter-spacing: -0.01em;
 }
+
+/* Body text size — its own control in Settings → Appearance, for reading the list
+   and the notes larger (or smaller) without touching the menu. It re-scales the
+   shared type tokens the same way a look does; placed after the looks so that an
+   explicit size choice wins the tokens they both set. The menu has its own knob
+   below and does not move with this one. */
+[data-text-size='small'] {
+	--text-base: 0.875rem;
+	--text-sm: 0.75rem;
+	--text-lg: 1rem;
+}
+
+[data-text-size='large'] {
+	--text-base: 1.0625rem;
+	--text-sm: 0.9375rem;
+	--text-lg: 1.1875rem;
+}
+
+[data-text-size='xl'] {
+	--text-base: 1.1875rem;
+	--text-sm: 1.0625rem;
+	--text-lg: 1.3125rem;
+}
+
+/* Menu (sidebar) font size — independent of the body size above, because the two
+   are separate questions: a menu you can read at a glance, and a list you can read
+   a paragraph of. */
+[data-menu-size='small'] {
+	--menu-size: 0.8125rem;
+}
+
+[data-menu-size='large'] {
+	--menu-size: 1.0625rem;
+}
+
+[data-menu-size='xl'] {
+	--menu-size: 1.1875rem;
+}

web/src/app.html

@@ -28,6 +28,14 @@
 				// 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;
+
+				// The font-size choices change layout too, so they belong before first
+				// paint for the same reason: otherwise the sidebar and the list are drawn
+				// once at one size and again at another.
+				const menuSize = localStorage.getItem('verdande:menu-size');
+				if (menuSize && menuSize !== 'default') document.documentElement.dataset.menuSize = menuSize;
+				const textSize = localStorage.getItem('verdande:text-size');
+				if (textSize && textSize !== 'default') document.documentElement.dataset.textSize = textSize;
 			} catch (e) {
 				// Private browsing can refuse localStorage; the dark default stands.
 			}

web/src/lib/api.js

@@ -23,6 +23,57 @@ export class ApiError extends Error {
 }
 
 import { t } from './i18n.svelte.js';
+import { connectivity, sleepOrOnline } from './connectivity.svelte.js';
+
+/**
+ * How long a request keeps retrying a network failure before giving up.
+ *
+ * This is the whole of the "offline" feature and its whole limit: it rides out a
+ * blip of a few seconds so a save is not lost to it, and then — because the app is
+ * a live view of a shared list, not a local database — it stops and says so rather
+ * than holding an edit for a network that is not coming back. Fifteen seconds is
+ * long enough for a handover or a tunnel and short enough that a real outage fails
+ * while the user is still looking at what they did.
+ */
+const RETRY_WINDOW_MS = 15000;
+
+/** Backoff between attempts: 0.5s, 1s, 2s, then 3s, capped. A waiting sleep also
+ *  wakes the instant the OS reports a link again, so most blips end on the first. */
+const backoff = (attempt) => Math.min(500 * 2 ** attempt, 3000);
+
+/**
+ * Runs `send` (a fetch), retrying only network failures for a short window.
+ *
+ * A network failure is fetch rejecting — no HTTP status ever arrived. An HTTP
+ * error (4xx/5xx) is the server answering, so it is returned, not retried: retrying
+ * a 400 just asks the same wrong question again. An abort is the caller changing
+ * its mind (a superseded search), so it is left to propagate.
+ *
+ * Retrying is not free of risk: a create whose request reached the server but whose
+ * response was lost would be made twice. For a drop of seconds that is rare, and the
+ * alternative — losing the save every time the network hiccups — is the thing this
+ * exists to stop. A server-side idempotency key would remove even that; it is a
+ * larger change noted for later.
+ */
+async function withRetry(send, noRetry = false) {
+	const deadline = Date.now() + (noRetry ? 0 : RETRY_WINDOW_MS);
+	let attempt = 0;
+	for (;;) {
+		try {
+			const res = await send();
+			connectivity.reachable();
+			return res;
+		} catch (e) {
+			if (e?.name === 'AbortError') throw e;
+			if (Date.now() >= deadline) {
+				connectivity.lost();
+				throw new ApiError(0, 'offline', 'ingen forbindelse');
+			}
+			connectivity.retrying();
+			await sleepOrOnline(backoff(attempt++));
+		}
+	}
+}
 
 /**
  * The key for each code the API can return.
@@ -110,14 +161,10 @@ async function request(method, path, body, options = {}) {
 		init.body = JSON.stringify(body);
 	}
 
-	let res;
-	try {
-		res = await fetch(`/api/v1${path}`, init);
-	} catch (e) {
-		// A network failure is not an HTTP status; give it one the app can handle
-		// the same way as everything else.
-		throw new ApiError(0, 'offline', 'ingen forbindelse');
-	}
+	// Retries a network failure for a few seconds so a short drop does not lose the
+	// call; `withRetry` turns an exhausted window into the same `offline` error the
+	// app already handles. `options.noRetry` opts a call out — used by nothing yet.
+	const res = await withRetry(() => fetch(`/api/v1${path}`, init), options.noRetry);
 
 	if (res.status === 204) return null;
 
@@ -157,12 +204,9 @@ async function upload(path, file, field = 'file') {
 	const form = new FormData();
 	form.append(field, file);
 
-	let res;
-	try {
-		res = await fetch(`/api/v1${path}`, { method: 'POST', body: form, credentials: 'same-origin' });
-	} catch {
-		throw new ApiError(0, 'offline', 'ingen forbindelse');
-	}
+	const res = await withRetry(() =>
+		fetch(`/api/v1${path}`, { method: 'POST', body: form, credentials: 'same-origin' })
+	);
 
 	const text = await res.text();
 	let payload = null;

web/src/lib/badge.js

@@ -0,0 +1,46 @@
+/**
+ * Mærket på appens ikon — tallet i Dock'en på en Mac, på proceslinjen på en pc.
+ *
+ * Klokken i hovedet siger det samme, men kun til den, der kigger på fanen. Det
+ * halve af pointen med at få besked er at få den, mens man laver noget andet, og
+ * det eneste sted, appen kan sige noget dér, er på sit eget ikon.
+ *
+ * Sat to steder, fordi der er to tilstande: her, mens appen er åben og selv ved
+ * hvor mange ulæste der er, og i service-workeren, når den ikke er — se `push`-
+ * lytteren i service-worker.js, som får tallet med i beskeden.
+ *
+ * Ét tal, ikke en optælling. Mærket sættes til hvad der *er*, aldrig til hvad der
+ * lige er kommet, så det kommer ned igen af sig selv, når beskederne bliver læst.
+ */
+
+/**
+ * Kan browseren mærke sit ikon? Safari og Chrome kan, når appen er lagt i Dock'en
+ * eller installeret; en almindelig fane har intet ikon at mærke, og kaldet gør
+ * ingenting. Firefox kan ikke endnu.
+ */
+export function supported() {
+	return typeof navigator !== 'undefined' && 'setAppBadge' in navigator;
+}
+
+/**
+ * Sætter mærket til `n`, eller fjerner det ved nul.
+ *
+ * Tavs, når det ikke kan lade sig gøre. Et mærke er en venlighed oven på klokken,
+ * der allerede står i fladen — ikke noget at afbryde nogen med, hvis browseren
+ * siger nej.
+ */
+export function setBadge(n) {
+	if (!supported()) return;
+	const count = Number(n) || 0;
+	try {
+		const done = count > 0 ? navigator.setAppBadge(count) : navigator.clearAppBadge();
+		done?.catch?.(() => {});
+	} catch {
+		// Nogle browsere kaster i stedet for at afvise. Det er det samme svar.
+	}
+}
+
+/** Fjerner mærket helt. Brugt ved log ud: den næste, der lander her, er en anden. */
+export function clearBadge() {
+	setBadge(0);
+}

web/src/lib/components/CalendarView.svelte

@@ -651,6 +651,7 @@
 					<div
 						class="allday"
 						data-allday={iso(date)}
+						class:today={iso(date) === todayISO}
 						class:over={over === iso(date)}
 						ondragover={(e) => onDragOver(e, date)}
 						ondragleave={() => (over = null)}
@@ -876,12 +877,16 @@
 		overflow: hidden;
 	}
 
+	/* White, not the sidebar's sunken ground: a calendar reads lightest when the
+	   day itself is the brightest thing on the screen and the events are the soft
+	   colour laid on it — the opposite of the grey grid it was, where the events
+	   had to shout to be seen at all. */
 	.corner,
 	.head,
 	.gutter,
 	.allday,
 	.daycol {
-		background: var(--ground);
+		background: var(--surface);
 	}
 
 	.head {
@@ -889,6 +894,16 @@
 		text-align: center;
 	}
 
+	/* Today's whole column, faintly, so the eye finds it before it reads a number —
+	   the marker on the date above is the label, this is the glow it sits in. Kept
+	   under the events, so a pastel block still reads as its own calendar's colour
+	   rather than as this wash tinted. */
+	.head.today,
+	.allday.today,
+	.daycol.today {
+		background: color-mix(in oklab, var(--accent) 6%, var(--surface));
+	}
+
 	.head .wd {
 		display: block;
 		font-size: var(--text-xs);
@@ -901,9 +916,19 @@
 		font-size: var(--text-sm);
 	}
 
+	/* The marker at the top the day is named by: today's number in a filled disc,
+	   the same one the month grid gives today, so "this is today" is one glance in
+	   either view rather than a colour you have to already know to read. */
 	.head.today .num {
-		color: var(--accent);
+		color: var(--accent-ink);
+		background: var(--accent);
+		border-radius: var(--radius-full);
+		width: 20px;
+		height: 20px;
+		display: inline-grid;
+		place-items: center;
 		font-weight: 560;
+		margin-top: 1px;
 	}
 
 	.gutter {
@@ -977,6 +1002,10 @@
 	/* Placeringen kommer fra `place()` som en inline `style`; alt andet står her.
 	   To ting på samme tid deler bredden, så `margin-right` er den ene hårstrå
 	   luft, der gør to kasser til to kasser. */
+	/* A soft wash of the calendar's own colour rather than a grey block edged in it:
+	   each calendar keeps a dusty, unmistakable nuance, and a screen of them reads
+	   as colour laid on white instead of a grid of grey bars. The left edge stays,
+	   a shade stronger than the fill, so the block still has a spine. */
 	.tevent {
 		position: absolute;
 		margin-right: 2px;
@@ -984,16 +1013,20 @@
 		padding: 1px var(--s1);
 		border-radius: var(--radius-sm);
 		border-left: 3px solid var(--event-colour, var(--line-strong));
-		background: var(--surface-sunken);
-		color: var(--ink-muted);
+		background: color-mix(in oklab, var(--event-colour, var(--line-strong)) 16%, var(--surface));
+		color: var(--ink);
 		font-size: var(--text-xs);
 		line-height: 1.3;
 		text-align: left;
 		text-decoration: none;
 	}
 
+	/* A task is a card you can pick up, not an event you cannot — so on the white
+	   column it is an outlined card, where an event is a solid wash. The priority
+	   colour rides the left edge, as it does everywhere else. */
 	.tevent.task {
-		background: var(--surface-raised);
+		background: var(--surface);
+		box-shadow: inset 0 0 0 1px var(--line);
 		border-left-color: var(--line-strong);
 		color: var(--ink);
 		cursor: grab;
@@ -1101,7 +1134,8 @@
 		text-align: left;
 		padding: 1px var(--s1);
 		border-radius: var(--radius-sm);
-		background: var(--surface-raised);
+		background: var(--surface);
+		box-shadow: inset 0 0 0 1px var(--line);
 		border-left: 2px solid var(--line-strong);
 		color: var(--ink);
 		overflow: hidden;
@@ -1120,7 +1154,7 @@
 	}
 
 	.chip:hover {
-		background: var(--surface);
+		background: var(--surface-sunken);
 	}
 
 	/* An event reads as a different kind of thing at a glance, before any of the
@@ -1140,8 +1174,8 @@
 		padding: 1px var(--s1);
 		border-radius: var(--radius-sm);
 		border-left: 3px solid var(--event-colour);
-		background: var(--surface-sunken);
-		color: var(--ink-muted);
+		background: color-mix(in oklab, var(--event-colour) 16%, var(--surface));
+		color: var(--ink);
 		text-decoration: none;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1156,7 +1190,7 @@
 	}
 
 	.event:hover {
-		background: var(--surface);
+		background: color-mix(in oklab, var(--event-colour) 26%, var(--surface));
 		color: var(--ink);
 	}
 
@@ -1165,7 +1199,7 @@
 	   every calendar anybody has used. */
 	.event.allday {
 		border-left: none;
-		background: color-mix(in oklab, var(--event-colour) 22%, var(--ground));
+		background: color-mix(in oklab, var(--event-colour) 22%, var(--surface));
 		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--event-colour) 45%, transparent);
 	}
 
@@ -1267,20 +1301,18 @@
 			padding: 1px var(--s1);
 			border-radius: var(--radius-sm);
 			border-left: 2px solid var(--line-strong);
-			background: var(--surface-raised);
+			background: var(--surface);
+			box-shadow: inset 0 0 0 1px var(--line);
 		}
 
 		.calendar.week .chip[data-priority='1'] {
 			border-left-color: var(--p1);
-			background: var(--surface-raised);
 		}
 		.calendar.week .chip[data-priority='2'] {
 			border-left-color: var(--p2);
-			background: var(--surface-raised);
 		}
 		.calendar.week .chip[data-priority='3'] {
 			border-left-color: var(--p3);
-			background: var(--surface-raised);
 		}
 
 		/* Readable again in the week, for the reason the task chips are: a
@@ -1292,12 +1324,12 @@
 			padding: 1px var(--s1);
 			border-radius: var(--radius-sm);
 			border-left: 3px solid var(--event-colour);
-			background: var(--surface-sunken);
+			background: color-mix(in oklab, var(--event-colour) 16%, var(--surface));
 		}
 
 		.calendar.week .event.allday {
 			border-left: none;
-			background: color-mix(in oklab, var(--event-colour) 22%, var(--ground));
+			background: color-mix(in oklab, var(--event-colour) 22%, var(--surface));
 		}
 
 		.calendar.week .at {

web/src/lib/components/NoteEditor.svelte

@@ -164,6 +164,111 @@
 		changed();
 	}
 
+	/**
+	 * Inline kode — `sådan her`.
+	 *
+	 * Den knap fandtes ikke, og `</>`, som i ethvert andet program betyder netop
+	 * kode, sad på kildevisningen med teksten "Vis som kode" på. Så markerede man et
+	 * ord og trykkede på den, og hele noten skiftede til Markdown. Det blev meldt
+	 * som en fejl, og det var det også: knappen sagde ét og gjorde et andet. Nu gør
+	 * `</>` det, tegnet siger, og kilden har fået sit eget mærke.
+	 *
+	 * Skrevet i hånden, fordi execCommand ikke har en kommando for kode. Markeringen
+	 * læses som ren tekst — det er hele meningen med kode, at det ikke er formateret
+	 * — og lægges tilbage inde i et <code>, som konverteringen allerede kender
+	 * begge veje.
+	 */
+	function codeAround() {
+		const selection = window.getSelection();
+		let node = selection?.anchorNode;
+		while (node && node !== editor) {
+			if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'CODE') return node;
+			node = node.parentNode;
+		}
+		return null;
+	}
+
+	/** Markerer ordet, markøren står i. Bruges når der ikke er markeret noget. */
+	function selectWordAtCaret() {
+		const selection = window.getSelection();
+		const node = selection?.anchorNode;
+		if (!node || node.nodeType !== Node.TEXT_NODE) return;
+		const text = node.textContent ?? '';
+		let start = selection.anchorOffset;
+		let end = start;
+		while (start > 0 && !/\s/.test(text[start - 1])) start--;
+		while (end < text.length && !/\s/.test(text[end])) end++;
+		if (start === end) return;
+		const range = document.createRange();
+		range.setStart(node, start);
+		range.setEnd(node, end);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+
+	function selectContents(node) {
+		const range = document.createRange();
+		range.selectNodeContents(node);
+		const selection = window.getSelection();
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+
+	function toggleCode() {
+		editor?.focus();
+		const selection = window.getSelection();
+		if (!selection?.rangeCount) return;
+
+		// Inde i en kodeblok er alting allerede kode; en <code> derinde kan hverken
+		// ses eller skrives ned, for en hegnet blok er tekst hele vejen igennem.
+		const block = currentBlock();
+		if (block?.tagName === 'PRE') return;
+
+		const existing = codeAround();
+		if (existing) {
+			// Ud igen: teksten bliver stående, mærkerne forsvinder. Markeringen lægges
+			// om den, så et tryk mere sætter den tilbage — knappen er en kontakt.
+			const text = document.createTextNode(existing.textContent ?? '');
+			existing.replaceWith(text);
+			selectContents(text);
+			readState();
+			changed();
+			return;
+		}
+
+		// Uden en markering er det ordet, markøren står i. Det er det, ⌘B gør i et
+		// tekstprogram, og bedre end et tomt <code>, der ikke kan ses og ikke kan
+		// skrives ned.
+		if (selection.isCollapsed) selectWordAtCaret();
+		const live = window.getSelection();
+		const text = live.toString();
+		if (!text) return;
+
+		// Bygget som en node frem for med `insertHTML`.
+		//
+		// Chromium renser den HTML, den får dér, gennem den samme vej som en
+		// indsætning: `<code>` kom ud som et `<span>` med skrifttypen og farven
+		// skrevet ind i sig, og et span er ikke noget, htmlToMarkdown kan skrive ned
+		// som kode. Målt — mærket forsvandt hver gang, og noten så rigtig ud, indtil
+		// den blev gemt.
+		const range = live.getRangeAt(0);
+		range.deleteContents();
+		const code = document.createElement('code');
+		code.textContent = text;
+		range.insertNode(code);
+
+		// Markøren efter mærket, ikke inde i det: ellers bliver det næste ord, man
+		// skriver, også til kode.
+		const after = document.createRange();
+		after.setStartAfter(code);
+		after.collapse(true);
+		live.removeAllRanges();
+		live.addRange(after);
+
+		readState();
+		changed();
+	}
+
 	/**
 	 * Steps out of a code block on Enter.
 	 *
@@ -223,7 +328,11 @@
 				underline: document.queryCommandState('underline'),
 				strike: document.queryCommandState('strikeThrough'),
 				bullet: document.queryCommandState('insertUnorderedList'),
-				numbered: document.queryCommandState('insertOrderedList')
+				numbered: document.queryCommandState('insertOrderedList'),
+				// Læst af DOM'en og ikke af execCommand: der findes ingen kommando
+				// for kode, hvilket er hele grunden til at knappen er skrevet i
+				// hånden herunder.
+				code: !!codeAround()
 			};
 		} catch {
 			// Some browsers throw on queryCommandState with no selection. The toolbar
@@ -641,6 +750,9 @@
 		if (key === 'u') {
 			event.preventDefault();
 			apply('underline');
+		} else if (key === 'e') {
+			event.preventDefault();
+			toggleCode();
 		} else if (key === 'x' && event.shiftKey) {
 			event.preventDefault();
 			apply('strikeThrough');
@@ -788,19 +900,50 @@
 		<button class:on={active.strike} onclick={() => apply('strikeThrough')} aria-label={t('notes.strike')}>
 			<s>S</s>
 		</button>
+		<!-- `</>` hører til her, mellem de andre mærker, fordi kode er et mærke som
+		     fed og kursiv. Den sad på kildevisningen, og det var en fælde: tegnet
+		     betyder kode overalt ellers, så folk markerede et ord og fik hele noten
+		     om til Markdown. -->
+		<button
+			class:on={active.code}
+			onclick={toggleCode}
+			title="⌘E"
+			aria-pressed={!!active.code}
+			aria-label={t('notes.code')}
+		>
+			<span class="codemark">&lt;/&gt;</span>
+		</button>
 
 		<span class="sep" aria-hidden="true"></span>
 
 		<!-- Kilden. Til højre for de andre, fordi den ikke er et format men en
-		     anden måde at se det hele på. -->
+		     anden måde at se det hele på — og med Markdown-mærket på, som er præcis
+		     det, den viser. Et tegn, ingen forveksler med et format. -->
 		<button
 			class="src"
 			class:on={asSource}
 			onclick={toggleSource}
 			aria-pressed={asSource}
 			aria-label={t('notes.showSource')}
-			title={t('notes.showSource')}>&lt;/&gt;</button
+			title={t('notes.showSource')}
 		>
+			<svg viewBox="0 0 208 128" aria-hidden="true">
+				<rect
+					x="5"
+					y="5"
+					width="198"
+					height="118"
+					rx="14"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="12"
+				/>
+				<path
+					d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zM155 98l-30-33h20V30h20v35h20z"
+					fill="currentColor"
+				/>
+			</svg>
+		</button>
 	</div>
 
 	{#if asSource}
@@ -1132,11 +1275,24 @@
 		resize: none;
 	}
 
-	.src {
+	/* Kodeknappen bærer sit eget tegn i monospace — `</>` sat med brødskriften
+	   ligner en tastefejl frem for et mærke. */
+	.codemark {
 		font-family: var(--font-mono);
 		font-size: var(--text-xs);
 	}
 
+	.src {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.src svg {
+		width: 17px;
+		height: 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. */

web/src/lib/components/Notifications.svelte

@@ -0,0 +1,268 @@
+<script>
+	/**
+	 * Klokken.
+	 *
+	 * De ting, andre har gjort, som man skal vide: en note, der er delt med en, er
+	 * blevet rettet, en opgave er blevet ens, nogen har kommenteret. Ikke ens egne
+	 * handlinger — serveren lader være med at fortælle nogen, hvad de lige selv
+	 * gjorde — og ikke alt, der sker; en klokke, der ringer ved hver ændring i et
+	 * delt projekt, er en klokke, folk holder op med at se på.
+	 *
+	 * Sætningen skrives her og ikke på serveren. Beskeden bærer *hvad der skete*
+	 * (`kind`) og *hvem* (`actor_name`); ordene kommer fra ordbogen, så en klokke i
+	 * en engelsk flade er engelsk. Serverens egen `title` er skrevet på dansk til
+	 * Web Push, som ikke har nogen ordbog at slå op i, og bruges kun dér.
+	 */
+	import { app } from '$lib/stores.svelte.js';
+	import { t } from '$lib/i18n.svelte.js';
+	import { goto } from '$app/navigation';
+
+	let open = $state(false);
+	let wrap = $state(null);
+
+	const KINDS = {
+		assigned: 'notif.assigned',
+		'note.changed': 'notif.noteChanged',
+		comment: 'notif.comment'
+	};
+
+	// Ukendte slags falder tilbage på serverens egen sætning frem for at forsvinde:
+	// en besked fra en nyere serverbygning end denne flade skal stadig kunne læses.
+	const headline = (n) => (KINDS[n.kind] ? t(KINDS[n.kind], { name: n.actor_name ?? '' }) : n.title);
+
+	function when(iso) {
+		const minutes = Math.round((Date.now() - new Date(iso)) / 60000);
+		if (minutes < 1) return t('notif.justNow');
+		if (minutes < 60) return t('notif.minutes', { n: String(minutes) });
+		if (minutes < 60 * 24) return t('notif.hours', { n: String(Math.round(minutes / 60)) });
+		return new Date(iso).toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
+	}
+
+	/**
+	 * Hvor en besked fører hen.
+	 *
+	 * En note åbnes på notesiden med sit id i adressen; en opgave åbnes i sin egen
+	 * rude oven på det, man stod i. Det er samme valg som alle andre steder i
+	 * fladen: en opgave er noget, man kigger på og lukker igen, en note er et sted,
+	 * man går hen.
+	 */
+	function follow(n) {
+		open = false;
+		if (!n.read) app.markRead(n.id);
+		if (n.note_id) goto(`/noter?note=${n.note_id}`);
+		else if (n.task_id) app.openDetail(n.task_id);
+		else if (n.project_id) goto(`/projekt/${n.project_id}`);
+	}
+
+	function outside(event) {
+		if (open && wrap && !wrap.contains(event.target)) open = false;
+	}
+</script>
+
+<svelte:window
+	onclick={outside}
+	onkeydown={(e) => {
+		if (e.key === 'Escape' && open) open = false;
+	}}
+/>
+
+<div class="wrap" bind:this={wrap}>
+	<button
+		class="bell"
+		class:on={open}
+		onclick={() => (open = !open)}
+		aria-expanded={open}
+		aria-haspopup="dialog"
+		aria-label={app.unread
+			? t('notif.titleWithCount', { n: String(app.unread) })
+			: t('notif.title')}
+		title={t('notif.title')}
+	>
+		<svg viewBox="0 0 24 24" aria-hidden="true">
+			<path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" />
+			<path d="M10.3 21a2 2 0 003.4 0" />
+		</svg>
+		{#if app.unread}
+			<!-- Et tal, ikke en prik. "Der er sket noget" er en anden besked end "der
+			     er sket fjorten ting", og den anden er den, der får folk til at kigge. -->
+			<span class="count" aria-hidden="true">{app.unread > 9 ? '9+' : app.unread}</span>
+		{/if}
+	</button>
+
+	{#if open}
+		<div class="panel" role="dialog" aria-label={t('notif.title')}>
+			<header>
+				<span>{t('notif.title')}</span>
+				{#if app.unread}
+					<button class="allread" onclick={() => app.markRead()}>{t('notif.markAllRead')}</button>
+				{/if}
+			</header>
+
+			{#if app.notifications.length}
+				<ul>
+					{#each app.notifications as n (n.id)}
+						<li>
+							<button class="row" class:unread={!n.read} onclick={() => follow(n)}>
+								<span class="what">{headline(n)}</span>
+								{#if n.body}<span class="about">{n.body}</span>{/if}
+								<span class="ago">{when(n.created_at)}</span>
+							</button>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				<p class="none">{t('notif.empty')}</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+	}
+
+	.bell {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border: none;
+		background: none;
+		border-radius: var(--radius);
+		color: var(--ink-muted);
+		cursor: pointer;
+	}
+	.bell:hover,
+	.bell.on {
+		background: var(--surface-raised);
+		color: var(--ink);
+	}
+	.bell svg {
+		width: 18px;
+		height: 18px;
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 1.7;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+
+	.count {
+		position: absolute;
+		top: 1px;
+		right: 0;
+		min-width: 15px;
+		padding: 0 3px;
+		border-radius: var(--radius-full);
+		background: var(--accent);
+		color: var(--on-accent, #fff);
+		font-size: 10px;
+		line-height: 15px;
+		font-weight: 600;
+		text-align: center;
+	}
+
+	.panel {
+		position: absolute;
+		top: calc(100% + 6px);
+		right: 0;
+		z-index: 40;
+		width: min(340px, calc(100vw - var(--s3) * 2));
+		max-height: 60vh;
+		overflow-y: auto;
+		background: var(--surface);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		box-shadow: var(--shadow-lg, 0 8px 30px rgb(0 0 0 / 0.25));
+	}
+
+	.panel header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--s2);
+		padding: var(--s2);
+		border-bottom: 1px solid var(--line);
+		font-size: var(--text-xs);
+		color: var(--ink-muted);
+	}
+
+	.allread {
+		border: none;
+		background: none;
+		padding: 0;
+		font: inherit;
+		color: var(--accent);
+		cursor: pointer;
+	}
+	.allread:hover {
+		text-decoration: underline;
+	}
+
+	.panel ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.row {
+		display: grid;
+		gap: 2px;
+		width: 100%;
+		padding: var(--s2);
+		border: none;
+		border-bottom: 1px solid var(--line);
+		background: none;
+		text-align: left;
+		cursor: pointer;
+		color: var(--ink-muted);
+	}
+	.row:hover {
+		background: var(--surface-raised);
+	}
+
+	/* Ulæst er en vægt og en prik, ikke en farvet baggrund. Baggrunden var det
+	   første forsøg, og den gjorde listen til et bånd af firkanter, hvor man ikke
+	   kunne se hvad der var én besked. */
+	.row.unread .what {
+		font-weight: 600;
+		color: var(--ink);
+	}
+	.row.unread .what::before {
+		content: '';
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		margin-right: 6px;
+		vertical-align: middle;
+		border-radius: var(--radius-full);
+		background: var(--accent);
+	}
+
+	.what {
+		font-size: var(--text-sm);
+	}
+
+	.about {
+		font-size: var(--text-xs);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ago {
+		font-size: var(--text-xs);
+		color: var(--ink-faint);
+	}
+
+	.none {
+		margin: 0;
+		padding: var(--s3) var(--s2);
+		text-align: center;
+		font-size: var(--text-xs);
+		color: var(--ink-faint);
+	}
+</style>

web/src/lib/components/Sidebar.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { app, sidebar, projectName } from '$lib/stores.svelte.js';
 	import { api } from '$lib/api.js';
+	import { clearBadge } from '$lib/badge.js';
 	import { TASK, PROJECT, GROUP, NOTE, startDrag, carries, dragged, accept } from '$lib/dnd.js';
 	import { COLORS, colorVar } from '$lib/colors.js';
 	import { focusOnMount } from '$lib/focus.js';
@@ -31,9 +32,39 @@
 
 	async function signOut() {
 		await api.logout();
+		// Mærket på ikonet er den forriges ulæste. Det står i Dock'en, også når
+		// ingen er logget ind, så det skal væk sammen med resten af dem.
+		clearBadge();
+		// Empty the offline data cache before leaving: the service worker keeps the
+		// last-seen task and note lists so a network drop does not blank the app, and
+		// the next person to sign in on this browser must not find them.
+		try {
+			navigator.serviceWorker?.controller?.postMessage({ type: 'clear-api-cache' });
+			await caches?.delete('verdande-api');
+		} catch {
+			// No service worker / no Cache API (older browser, private mode): nothing
+			// was cached, so nothing to clear.
+		}
 		location.href = '/';
 	}
 
+	// Signing out is one click from a button the pointer passes over on its way to
+	// everything below it, and it drops you at the login screen — so it asks first.
+	// A second click within a few seconds confirms; anything else lets it lapse. Not
+	// a dialog: a two-step button is lighter and stays where the eye already is.
+	let confirmSignOut = $state(false);
+	let signOutTimer;
+	function onSignOutClick() {
+		if (confirmSignOut) {
+			clearTimeout(signOutTimer);
+			signOut();
+			return;
+		}
+		confirmSignOut = true;
+		clearTimeout(signOutTimer);
+		signOutTimer = setTimeout(() => (confirmSignOut = false), 3500);
+	}
+
 	let filters = $state([]);
 	let labels = $state([]);
 
@@ -487,6 +518,7 @@
 					     it, which is the second time that drop has earned its test. -->
 					<a
 						href={item.href}
+						data-view={item.key}
 						class:active={current === item.href}
 						class:receiving={item.key === 'today' && overToday}
 						onclick={onnavigate}
@@ -529,6 +561,52 @@
 									stroke-linecap="round"
 								/>
 							</svg>
+						{:else if item.key === 'today'}
+							<!-- A star, the way Things marks Today: the one view you open first. -->
+							<svg class="mark" viewBox="0 0 16 16" aria-hidden="true">
+								<path
+									d="M8 2l1.7 3.6 3.9.5-2.9 2.7.7 3.9L8 10.9 4.6 13.4l.7-3.9L2.4 6.1l3.9-.5z"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="1.3"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						{:else if item.key === 'upcoming'}
+							<!-- A calendar with a day marked — the Calendar view carries the plain
+							     grid, so the marked day keeps the two apart. -->
+							<svg class="mark" viewBox="0 0 16 16" aria-hidden="true">
+								<rect
+									x="2.2"
+									y="3.2"
+									width="11.6"
+									height="10.6"
+									rx="1.4"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="1.4"
+								/>
+								<path
+									d="M2.2 6.4h11.6M5.6 2.2v2M10.4 2.2v2"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="1.4"
+									stroke-linecap="round"
+								/>
+								<rect x="8.8" y="8.6" width="2.6" height="2.6" rx="0.5" fill="currentColor" />
+							</svg>
+						{:else if item.key === 'delegated'}
+							<!-- A person: the tasks you are waiting on someone else for. -->
+							<svg class="mark" viewBox="0 0 16 16" aria-hidden="true">
+								<circle cx="8" cy="5.4" r="2.5" fill="none" stroke="currentColor" stroke-width="1.4" />
+								<path
+									d="M3.4 13.4c0-2.6 2.1-4.2 4.6-4.2s4.6 1.6 4.6 4.2"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="1.4"
+									stroke-linecap="round"
+								/>
+							</svg>
 						{:else}
 							<span class="dot" class:today={item.key === 'today'} aria-hidden="true"></span>
 						{/if}
@@ -570,6 +648,7 @@
 	{#snippet projectRow(project, sortable)}
 		<a
 			href="/projekt/{project.id}"
+			data-view={project.is_inbox ? 'inbox' : undefined}
 			class:sortable
 			class:active={current === `/projekt/${project.id}`}
 			class:dragging={draggingId === project.id}
@@ -593,7 +672,29 @@
 					? onTaskDrop(e, project)
 					: sortable && onDrop(e, project)}
 		>
-			<span class="dot" style="background: {colorVar(project.color)}" aria-hidden="true"></span>
+			{#if project.is_inbox}
+				<!-- A tray, not a coloured dot: the Inbox is a fixed view that happens to
+				     be a project, and it reads as one of the views above, not as the first
+				     of the projects below. -->
+				<svg class="mark" viewBox="0 0 16 16" aria-hidden="true">
+					<path
+						d="M2.3 9.2L4 3.4a1.1 1.1 0 011-.8h6a1.1 1.1 0 011 .8l1.7 5.8"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.3"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M2.3 9.2v2.9A1.3 1.3 0 003.6 13.4h8.8a1.3 1.3 0 001.3-1.3V9.2h-3.3l-1 1.7H6.6l-1-1.7z"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.3"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			{:else}
+				<span class="dot" style="background: {colorVar(project.color)}" aria-hidden="true"></span>
+			{/if}
 			{projectName(project)}
 			<!-- 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
@@ -612,28 +713,84 @@
 	<!--
 		A fixed heading that folds, the same way a project group's does.
 
-		One snippet for all four rather than four copies of a chevron and an aria
+		One snippet for all four rather than four copies of an icon and an aria
 		attribute: they have to behave identically, and the group heading is already
 		the proof that they drift otherwise — it grew a fold, a colour and two
 		actions while these stayed plain text.
 
-		The whole heading is the target, not the chevron. At this size a lone chevron
-		is something you miss, and the name is where the eye already is.
+		The whole heading is the target, and the icon is the mark: no arrow beside it.
+		At this size an extra glyph is clutter, and the name is where the eye already
+		is.
 	-->
+	<!-- One monochrome mark per kind of heading, so a section and a group read as the
+	     same kind of thing — a folder of projects, a funnel of filters, a tag of
+	     labels — instead of one being a faint label and the other a coloured dot. -->
+	{#snippet sectionIcon(key)}
+		{#if key === 'filters'}
+			<svg class="head-icon" viewBox="0 0 16 16" aria-hidden="true">
+				<path
+					d="M2.2 3.4h11.6L9.3 8.8v3.4L6.7 10.9V8.8z"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.4"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		{:else if key === 'labels'}
+			<svg class="head-icon" viewBox="0 0 16 16" aria-hidden="true">
+				<path
+					d="M7.7 2.3H13v5.3l-5.3 5.3-5.3-5.3z"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.4"
+					stroke-linejoin="round"
+				/>
+				<circle cx="10.2" cy="4.9" r="0.95" fill="currentColor" />
+			</svg>
+		{:else if key === 'shared'}
+			<svg class="head-icon" viewBox="0 0 16 16" aria-hidden="true">
+				<circle cx="6.2" cy="5.6" r="2.1" fill="none" stroke="currentColor" stroke-width="1.4" />
+				<path
+					d="M2.6 12.8c0-2.1 1.7-3.3 3.6-3.3s3.6 1.2 3.6 3.3"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.4"
+					stroke-linecap="round"
+				/>
+				<path
+					d="M11 9.6c1.5.2 2.6 1.3 2.6 3.2"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.4"
+					stroke-linecap="round"
+				/>
+				<circle cx="11.2" cy="5.6" r="1.7" fill="none" stroke="currentColor" stroke-width="1.4" />
+			</svg>
+		{:else}
+			<!-- Projekter and every group: a folder of projects. -->
+			<svg class="head-icon" viewBox="0 0 16 16" aria-hidden="true">
+				<path
+					d="M2 4.6a1 1 0 011-1h3.1l1.4 1.5H13a1 1 0 011 1v6.3a1 1 0 01-1 1H3a1 1 0 01-1-1z"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.4"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		{/if}
+	{/snippet}
+
 	{#snippet foldHeading(key, label)}
+		<!-- No chevron: a system section has no page and nothing to rename, so the
+		     whole heading is one button that folds it. The icon and the bold name are
+		     the whole control — an arrow beside them was only ever saying "clickable"
+		     twice. -->
 		<h2 class="fold">
 			<button
 				onclick={() => app.toggleSection(key)}
 				aria-expanded={!app.sectionCollapsed(key)}
 			>
-				<svg
-					class="chevron"
-					class:collapsed={app.sectionCollapsed(key)}
-					viewBox="0 0 24 24"
-					aria-hidden="true"
-				>
-					<path d="M6 9l6 6 6-6" />
-				</svg>
+				{@render sectionIcon(key)}
 				{label}
 			</button>
 		</h2>
@@ -656,7 +813,7 @@
 			     and with every project filed there would be no loose row left to aim at. -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				class="group-head"
+				class="group-head sticky-head"
 				class:over={overGroup === ''}
 				ondragover={(e) => {
 					if (!carries(e, PROJECT)) return;
@@ -801,31 +958,22 @@
 							</div>
 						</form>
 					{:else}
-						<!-- The button sits inside the heading, not around it, the same way a
-						     project's title does: a group *is* a heading in the sidebar, and
-						     wrapping an h2 in a button both invalidates the markup and takes
-						     the heading away from a screen reader. The whole heading folds —
-						     at this size a lone chevron is a target you miss, and the name is
-						     where the eye already is. -->
-						<!-- The chevron folds; the name opens the group's own page. Two
-						     targets in one heading, because they are two different intentions
-						     and the old single one could only ever serve the smaller. -->
+						<!-- No chevron: the folder icon itself folds the group, and the name
+						     beside it opens the group's own page. Two intentions, two targets,
+						     but no arrow to clutter the rail — the icon a section carries is
+						     the same one that folds it here. The button sits inside the
+						     heading, not around it: a group *is* a heading, and wrapping an h2
+						     in a button both invalidates the markup and takes the heading from
+						     a screen reader. -->
 						<button
-							class="chevron-button"
+							class="fold-icon"
 							onclick={() => app.toggleGroup(group.id)}
 							aria-expanded={!group.collapsed}
 							aria-label={group.collapsed
 								? t('sidebar.unfold', { name: group.name })
 								: t('sidebar.fold', { name: group.name })}
 						>
-							<svg
-								class="chevron"
-								class:collapsed={group.collapsed}
-								viewBox="0 0 24 24"
-								aria-hidden="true"
-							>
-								<path d="M6 9l6 6 6-6" />
-							</svg>
+							{@render sectionIcon('group')}
 						</button>
 						<h2 class="fold">
 							<!-- Navigation waits two tenths of a second for a second click. A
@@ -846,11 +994,6 @@
 									}, 200);
 								}}
 							>
-								<span
-									class="dot group-dot"
-									style="background: {colorVar(group.color)}"
-									aria-hidden="true"
-								></span>
 								{group.name}
 							</a>
 						</h2>
@@ -938,12 +1081,12 @@
 			{#if !app.connected}
 				<span class="offline" title={t('nav.offlineHint')}>{t('nav.offline')}</span>
 			{/if}
-			<button class="user" onclick={signOut}>
+			<button class="user" class:confirming={confirmSignOut} onclick={onSignOutClick}>
 				<span class="avatar" style="background: {app.user?.avatar_color}">
 					{app.user?.name?.[0]?.toUpperCase() ?? '?'}
 				</span>
-				<span class="user-name">{app.user?.name}</span>
-				<span class="signout">{t('nav.signOut')}</span>
+				<span class="user-name">{confirmSignOut ? t('nav.signOutConfirm') : app.user?.name}</span>
+				<span class="signout">{confirmSignOut ? '' : t('nav.signOut')}</span>
 			</button>
 		</div>
 	</div>
@@ -979,14 +1122,16 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--s5);
-		padding: var(--s4) var(--s3);
+		/* A few pixels more air down each side than the rows strictly need, so the
+		   menu breathes rather than sitting flush against its own edges. */
+		padding: var(--s4) calc(var(--s3) + 3px);
 		background: var(--surface-sunken);
 		border-right: 1px solid var(--line);
 		/* Selve bjælken ruller ikke længere — .scroller gør. `hidden` frem for
 		   ingenting, fordi den stadig er den yderste kant: løber en række over,
 		   skal den klippes her og ikke skubbe kolonnen bredere. */
 		overflow: hidden;
-		padding-left: max(var(--s3), env(safe-area-inset-left));
+		padding-left: max(calc(var(--s3) + 3px), env(safe-area-inset-left));
 		position: relative;
 	}
 
@@ -1005,6 +1150,32 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--s5);
+		/* The sidebar is padded, so the scrollbar sat a pad-width inside the edge and
+		   read as floating in the middle. Pull the scroller out to the border and pad
+		   the content back, so the bar sits against the edge where a scrollbar
+		   belongs — the rows do not move. Thin and dim, so it is present without
+		   drawing the eye. */
+		margin-right: calc(var(--s3) * -1);
+		padding-right: var(--s3);
+		scrollbar-width: thin;
+		scrollbar-color: var(--line-strong) transparent;
+	}
+
+	.scroller::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	/* No transparent border and no padding-box clip: those centred a 4px bar in a
+	   10px track, so the thumb floated three pixels shy of the divider. The bar is
+	   the track now — a thin rounded thumb sitting flush against the line on the
+	   right, which is where a scrollbar belongs. */
+	.scroller::-webkit-scrollbar-thumb {
+		background: var(--line-strong);
+		border-radius: 999px;
+	}
+
+	.scroller::-webkit-scrollbar-track {
+		background: transparent;
 	}
 
 	/* Wider than it looks: a 1px target is a target you miss. The visible line stays
@@ -1133,8 +1304,26 @@
 		flex: none;
 	}
 
-	a.active .mark {
-		color: var(--accent);
+	/* The fixed views carry a colour of their own, the way Things does — the star
+	   amber, the Inbox blue — and keep it whether or not they are the active row.
+	   So no active-state override here; the colour is the icon's identity. */
+	[data-view='inbox'] .mark {
+		color: var(--color-blue);
+	}
+	[data-view='today'] .mark {
+		color: var(--color-amber);
+	}
+	[data-view='upcoming'] .mark {
+		color: var(--color-tomato);
+	}
+	[data-view='delegated'] .mark {
+		color: var(--color-violet);
+	}
+	[data-view='notes'] .mark {
+		color: var(--color-teal);
+	}
+	[data-view='calendar'] .mark {
+		color: var(--color-indigo);
 	}
 
 	.group-head {
@@ -1144,12 +1333,35 @@
 		padding: 0 var(--s2) var(--s2);
 	}
 
+	/* The Projekter heading holds the only way to add a project or a group, so it
+	   must not scroll away with a long list. Pinned to the top of the scroller, on
+	   the sidebar's own ground so the rows pass under it. */
+	.sticky-head {
+		position: sticky;
+		top: 0;
+		z-index: 3;
+		padding-top: var(--s2);
+		background: var(--surface-sunken);
+	}
+
+	/* Every heading — the system sections and the user's groups — reads the same:
+	   a mark, then a bold plainly-cased name. What used to set them apart (one a
+	   faint uppercase label, the other a bold name with a coloured dot) is gone. */
 	h2 {
-		font-size: var(--text-xs);
-		font-weight: 560;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		color: var(--ink-faint);
+		font-size: var(--menu-size);
+		font-weight: 600;
+		/* Kul sets these headings to a quiet grey (--heading-ink); every other theme
+		   falls back to the reading ink and keeps them bold and bright. */
+		color: var(--heading-ink, var(--ink));
+	}
+
+	/* The heading's mark, in the muted ink so the bold name still leads. Sized and
+	   nudged like a row's own mark, so the icons line up down the sidebar. */
+	.head-icon {
+		width: 14px;
+		height: 14px;
+		flex: none;
+		color: var(--ink-muted);
 	}
 
 	/* Only the square icon buttons — "+" and the folder — and asked for by class
@@ -1235,57 +1447,17 @@
 		min-width: 0;
 	}
 
-	/* The chevron on its own, so the name beside it can be a link to the group's
-	   page. Sized as a target rather than as a glyph: 11px of arrow is something
-	   you miss. */
-	/* The chevron sits on top of the group's dot rather than before it. In the flow
-	   it pushed the name 22px further in than a project's, so groups read as if
-	   they were filed under the projects above them — the opposite of what they
-	   are. Out of the flow, a group's name starts exactly where a project's does.
-	   The dot is the resting state; the chevron takes over on hover or focus, and
-	   stays put while the group is folded, so a folded group still shows the way
-	   back open. */
-	/* Uden baggrund. Knappen dækkede prikken med et felt i --surface, og på den
-	   sænkede bjælke er det en lys firkant: en foldet gruppe stod med en hvid
-	   klods ud for navnet permanent, fordi chevronen bliver stående, når gruppen
-	   er lukket. Prikken tones ud i stedet for at blive dækket — det er samme
-	   skifte, uden noget at male henover den med. */
-	.chevron-button {
-		position: absolute;
-		left: calc(var(--s2) - 5px);
-		width: 18px;
-		height: 18px;
+	/* The folder icon is the fold toggle now — no chevron beside it. A bare icon
+	   button the size of the icon it holds: the name next to it opens the group's
+	   page, this folds it, and neither wears an arrow to say so. */
+	.fold-icon {
+		flex: none;
 		display: grid;
 		place-items: center;
-		border-radius: var(--radius-sm);
 		color: inherit;
-		opacity: 0;
-		/* Fordi prikken herunder tones ud frem for at blive dækket. En `opacity`
-		   under 1 laver en stakkontekst og maler elementet, som var det placeret
-		   med `z-index: 0` — så prikken, der står senere i DOM'en, lagde sig oven
-		   på knappen i det øjeblik den forsvandt. Den var usynlig og tog stadig
-		   klikket: prøven brugte tredive sekunder på at folde en gruppe, der ikke
-		   ville foldes. Ét lag op, og rækkefølgen er den samme som før. */
-		z-index: 1;
 	}
 
-	.folder-head:hover .chevron-button,
-	.chevron-button:focus-visible,
-	.chevron-button[aria-expanded='false'] {
-		opacity: 1;
-	}
-
-	/* Præcis de tre tilfælde ovenfor, læst nedad i stedet for opad: står chevronen
-	   der, er prikken væk. `opacity` og ikke `display`, for de to ligger oven i
-	   hinanden — forsvandt prikken ud af flowet, ville navnet rykke sig hver gang
-	   pilen kom frem. */
-	.folder-head:hover .group-dot,
-	.folder-head:has(.chevron-button:focus-visible) .group-dot,
-	.folder-head:has(.chevron-button[aria-expanded='false']) .group-dot {
-		opacity: 0;
-	}
-
-	.chevron-button:hover {
+	.fold-icon:hover {
 		color: var(--ink);
 	}
 
@@ -1314,22 +1486,6 @@
 		text-decoration: none;
 	}
 
-	.chevron {
-		width: 11px;
-		height: 11px;
-		flex: none;
-		fill: none;
-		stroke: currentColor;
-		stroke-width: 2.4;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		transition: transform var(--fast) var(--ease);
-	}
-
-	.chevron.collapsed {
-		transform: rotate(-90deg);
-	}
-
 	/* Hidden until the heading is hovered, like the section actions on a project
 	   page: two buttons permanently beside a label stop it reading as a label. */
 	.folder-head .count {
@@ -1362,29 +1518,19 @@
 		white-space: nowrap;
 	}
 
-	/* The group's own mark, between the chevron and the name — inside the fold
-	   button, so it cannot push the heading in. It is a mark now and not a
-	   control: the colour is chosen while renaming, which is the other edit to
-	   the same thing. */
-	.group-dot {
-		flex: none;
-	}
-
-	/* Projects inside a group are indented to the group's name, not to its dot:
-	   the eye follows the text, and lining up under the dot leaves the names
-	   looking a step short of where the heading starts. */
+	/* Projects sit at the same left margin whether or not they are in an area —
+	   one straight edge down the whole sidebar reads calmer than a staircase, and
+	   the bold area heading above already does the grouping the indent used to. */
 	.folder > a {
-		padding-left: calc(var(--s2) + var(--s4));
+		padding-left: var(--s2);
 	}
 
-	/* The line is indented with them, so a drop between two projects in a group
-	   reads as landing in the group rather than across the whole sidebar. */
 	.folder > a.sortable::before {
-		left: calc(var(--s2) + var(--s4));
+		left: var(--s2);
 	}
 
 	.folder > .empty {
-		padding-left: calc(var(--s2) + var(--s4));
+		padding-left: var(--s2);
 	}
 
 	/* Inside the rename form now, so it needs no padding of its own — the form
@@ -1441,7 +1587,10 @@
 		border-radius: var(--radius);
 		color: var(--ink-muted);
 		text-decoration: none;
-		font-size: var(--text-sm);
+		/* Its own size (Settings → Appearance) and medium weight, so the menu items
+		   carry more than the muted small text they used to and read at a glance. */
+		font-size: var(--menu-size);
+		font-weight: 500;
 		transition:
 			background var(--fast) var(--ease),
 			color var(--fast) var(--ease);
@@ -1452,10 +1601,17 @@
 		color: var(--ink);
 	}
 
+	/* An accent-tinted selection, not a half-step of surface: on the sunken dark
+	   sidebar --surface-raised was all but invisible, so the active row read as no
+	   different from the rest. --accent-sunken carries the accent hue and stands out
+	   in both themes. */
 	a.active {
-		background: var(--surface-raised);
-		color: var(--ink);
-		font-weight: 500;
+		background: var(--accent-sunken);
+		/* On a solid accent (Kul's amber menu item) the label goes dark via
+		   --nav-active-ink; on the tinted accent-sunken every other theme uses, it
+		   falls back to the reading ink. */
+		color: var(--nav-active-ink, var(--ink));
+		font-weight: 600;
 	}
 
 	/* Only your own projects reorder. A shared one sits where its owner put it —
@@ -1577,6 +1733,16 @@
 		background: var(--surface);
 	}
 
+	/* Asking to confirm: the row goes to the danger tint and the name is replaced by
+	   "click again", so the second click is plainly the one that signs out. */
+	.user.confirming {
+		background: var(--danger-sunken);
+	}
+
+	.user.confirming .user-name {
+		color: var(--danger);
+	}
+
 	.avatar {
 		width: 22px;
 		height: 22px;

web/src/lib/components/TaskDetail.svelte

@@ -1115,5 +1115,21 @@
 			width: auto;
 			border-left: 0;
 		}
+
+		/* Two columns is half a phone each: Prioritet collapses to "Ing" and the
+		   due-row (date + fixed-width time + duration) runs off the right edge. One
+		   column per field gives each its full width; the due-row wraps if even that
+		   is not enough. */
+		.grid {
+			grid-template-columns: 1fr;
+		}
+
+		.due {
+			flex-wrap: wrap;
+		}
+
+		.due input[type='date'] {
+			flex: 1 1 100%;
+		}
 	}
 </style>

web/src/lib/components/TaskRow.svelte

@@ -11,6 +11,7 @@
 	import { app } from '$lib/stores.svelte.js';
 	import { t, tag } from '$lib/i18n.svelte.js';
 	import { repeatLabel } from '$lib/when.js';
+	import { linkify } from '$lib/linkify.js';
 
 	let { task, onedit } = $props();
 
@@ -99,13 +100,44 @@
 		</svg>
 	</button>
 
-	<!-- Opening the detail drawer is the default. `onedit` is for the callers that
-	     want the click to mean something else. -->
-	<button class="body" onclick={() => (onedit ? onedit(task) : app.openDetail(task.id))}>
-		<span class="content">{task.content}</span>
+	<!-- A URL pasted into the title or the description is clickable, without the
+	     text ever having been anything but plain text. The link is a real <a>, which
+	     an <a> in a <button> may not be — so the body is a role=button rather than a
+	     button, and each link stops its click from also opening the task. Clicking
+	     any plain text still opens it. -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="body"
+		role="button"
+		tabindex="0"
+		onclick={() => (onedit ? onedit(task) : app.openDetail(task.id))}
+		onkeydown={(e) => {
+			if (e.key === 'Enter' || e.key === ' ') {
+				e.preventDefault();
+				onedit ? onedit(task) : app.openDetail(task.id);
+			}
+		}}
+	>
+		<span class="content"
+			>{#each linkify(task.content) as run}{#if run.href}<a
+						class="tlink"
+						href={run.href}
+						target="_blank"
+						rel="noopener noreferrer"
+						onclick={(e) => e.stopPropagation()}>{run.text}</a
+					>{:else}{run.text}{/if}{/each}</span
+		>
 
 		{#if task.description}
-			<span class="description">{task.description}</span>
+			<span class="description"
+				>{#each linkify(task.description) as run}{#if run.href}<a
+							class="tlink"
+							href={run.href}
+							target="_blank"
+							rel="noopener noreferrer"
+							onclick={(e) => e.stopPropagation()}>{run.text}</a
+						>{:else}{run.text}{/if}{/each}</span
+			>
 		{/if}
 
 		{#if assignee || due || task.labels?.length || repeats || task.subtask_count || task.attachment_count}
@@ -186,7 +218,7 @@
 				{/each}
 			</span>
 		{/if}
-	</button>
+	</div>
 </div>
 
 <style>
@@ -196,13 +228,21 @@
 		align-items: flex-start;
 		padding: var(--s3) var(--s2);
 		border-bottom: 1px solid var(--line);
+		border-radius: var(--radius);
 		transition:
 			opacity var(--medium) var(--ease),
 			transform var(--medium) var(--ease);
 	}
 
-	.row:hover {
-		background: var(--surface);
+	/* Hover only where there is a real pointer. On a touch screen a :hover on the tap
+	   target makes iOS spend the first tap applying the hover and only open on the
+	   second — the "double-tap" on iPhone. With no hover to apply, the first tap opens
+	   the task. The rounded corners are on the row itself, so the highlight is a
+	   rounded box like a note in the list. */
+	@media (hover: hover) {
+		.row:hover {
+			background: var(--surface);
+		}
 	}
 
 	/* The exit: a short lift and fade, so completing something reads as the task
@@ -307,6 +347,13 @@
 		gap: 2px;
 		text-align: left;
 		min-width: 0;
+		cursor: pointer;
+		border-radius: var(--radius-sm);
+	}
+
+	.body:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
 	}
 
 	.content {
@@ -315,6 +362,20 @@
 		overflow-wrap: anywhere;
 	}
 
+	/* A real link, so it can be middle-clicked, copied and previewed. Its own click
+	   is stopped from bubbling, so opening the page does not also open the task. */
+	.tlink {
+		color: var(--accent);
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 2px;
+		overflow-wrap: anywhere;
+	}
+
+	.tlink:hover {
+		text-decoration-thickness: 2px;
+	}
+
 	.description {
 		font-size: var(--text-sm);
 		color: var(--ink-muted);

web/src/lib/connectivity.svelte.js

@@ -0,0 +1,70 @@
+/**
+ * Connectivity, as the app experiences it — not as the browser reports it.
+ *
+ * This is the WRITE side of surviving a short drop — a few seconds of lost Wi-Fi, a
+ * tunnel, a base station handing over. The READ side lives in the service worker,
+ * which keeps the last-seen task and note lists so a reload through a drop is not a
+ * blank screen. This store is the other half: it is what keeps the save you just made
+ * from being reverted under your hands while the network is briefly gone.
+ *
+ * The request layer drives this: it retries a failed request for a short window
+ * (see api.js) and tells this store while it is trying, so the interface can say
+ * "reconnecting" rather than reverting the change under the user's hands. If the
+ * window runs out it is a real outage, and then the normal error path takes over.
+ *
+ * `navigator.onLine` is only a hint — it goes false when the machine has no route,
+ * but it stays true for a dead gateway or a server that is down, so it cannot be
+ * the source of truth. It is used here only to wake a waiting retry the moment the
+ * OS sees a link again, which is the one thing it is reliable for.
+ */
+import { browser } from '$app/environment';
+
+class Connectivity {
+	/** 'online' — every recent request reached the server.
+	 *  'retrying' — a request failed on the network and is being retried.
+	 *  'lost' — a request gave up after the retry window; a real outage. */
+	status = $state('online');
+
+	/** A request reached the server. The network is up, whatever it was doing. */
+	reachable() {
+		this.status = 'online';
+	}
+
+	/** A request failed on the network and is about to be tried again. */
+	retrying() {
+		if (this.status !== 'lost') this.status = 'retrying';
+	}
+
+	/** A request used up its retry window without reaching the server. */
+	lost() {
+		this.status = 'lost';
+	}
+}
+
+export const connectivity = new Connectivity();
+
+if (browser) {
+	// The OS lost its link: say so at once rather than waiting for the next request
+	// to fail. It does not, on its own, mean the server is unreachable — but with no
+	// route there is nothing a save can do but wait, and the honest thing is to show
+	// it waiting.
+	window.addEventListener('offline', () => connectivity.retrying());
+}
+
+/**
+ * Sleeps for `ms`, but wakes early the moment the OS reports a link again — so a
+ * retry that is biding its time does not sit out the last two seconds of a blip
+ * that has already ended.
+ */
+export function sleepOrOnline(ms) {
+	return new Promise((resolve) => {
+		let timer;
+		const done = () => {
+			clearTimeout(timer);
+			if (browser) window.removeEventListener('online', done);
+			resolve();
+		};
+		timer = setTimeout(done, ms);
+		if (browser) window.addEventListener('online', done, { once: true });
+	});
+}

web/src/lib/linkify.js

@@ -0,0 +1,68 @@
+/**
+ * Splits a plain string into runs of text and the URLs inside it, so a task's
+ * title or description can be shown with the links clickable without the text
+ * ever having been anything but plain text on disk.
+ *
+ * A task is not rich text — the title is an `<input>` and the description a
+ * `<textarea>` — so there is nowhere to *store* a link. What there is instead is
+ * a person who pasted one in and expects to be able to click it. This finds the
+ * ones that are unambiguously links and leaves everything else exactly as typed.
+ *
+ * Deliberately conservative about what counts as a link: an explicit
+ * `http://`/`https://`, or a bare `www.` host. "example.com" on its own is not
+ * matched — most of those are sentences ("the file.txt is here"), and a false
+ * link in a title is worse than a real one left plain.
+ */
+
+// A trailing `.,;:!?` or a closing bracket is almost always punctuation the
+// sentence owns rather than part of the URL, so the run stops before it. A `)`
+// is only dropped when the URL holds no `(` of its own — Wikipedia-style links
+// carry balanced parentheses that belong to the address.
+const URL_RE = /\b(?:https?:\/\/|www\.)[^\s<>]+/gi;
+
+function trimTrailing(url) {
+	let end = url.length;
+	while (end > 0) {
+		const ch = url[end - 1];
+		if ('.,;:!?"\''.includes(ch)) {
+			end--;
+			continue;
+		}
+		if (ch === ')' && !url.slice(0, end).includes('(')) {
+			end--;
+			continue;
+		}
+		break;
+	}
+	return url.slice(0, end);
+}
+
+/**
+ * @param {string} text
+ * @returns {Array<{ text: string, href?: string }>} runs in order; a run with an
+ *   `href` is a link, one without is plain text. An empty or link-free string
+ *   comes back as a single text run (possibly empty) so callers can render it the
+ *   same way regardless.
+ */
+export function linkify(text) {
+	const value = text ?? '';
+	const runs = [];
+	let last = 0;
+
+	for (const match of value.matchAll(URL_RE)) {
+		const raw = trimTrailing(match[0]);
+		if (!raw) continue;
+		const start = match.index;
+
+		if (start > last) runs.push({ text: value.slice(last, start) });
+
+		const href = raw.startsWith('www.') ? `https://${raw}` : raw;
+		runs.push({ text: raw, href });
+		last = start + raw.length;
+	}
+
+	if (last < value.length) runs.push({ text: value.slice(last) });
+	if (!runs.length) runs.push({ text: value });
+
+	return runs;
+}

web/src/lib/locales/da.js

@@ -22,8 +22,20 @@ export const da = {
 	'notes.unshared': 'Noten er din igen.',
 	// Deling med enkeltpersoner, ved siden af projektet.
 	'notes.groupSharedWithMe': 'Delt med mig',
+	// Klokken: hvad andre har gjort, som man skal vide. Sætningen skrives i fladen
+	// og ikke på serveren, så en engelsk flade også får en engelsk klokke.
+	'notif.title': 'Beskeder',
+	'notif.titleWithCount': 'Beskeder ({n} ulæste)',
+	'notif.empty': 'Ingen beskeder.',
+	'notif.markAllRead': 'Markér alle som læst',
+	'notif.assigned': '{name} gav dig en opgave',
+	'notif.noteChanged': '{name} rettede en note',
+	'notif.comment': '{name} kommenterede',
+	'notif.justNow': 'lige nu',
+	'notif.minutes': '{n} min. siden',
+	'notif.hours': '{n} t. siden',
 	'notes.linkOpen': 'Åbn',
-	'notes.linkMissing': 'Noten blev ikke fundet.',
+	'notes.linkMissing': 'Noten findes ikke, eller den er ikke delt med dig.',
 	'notes.sharedBy': 'Delt af {name}',
 	'notes.sharePeople': 'Del med personer',
 	'notes.sharePick': 'Vælg en person …',
@@ -34,6 +46,9 @@ export const da = {
 	'notes.shareRemove': 'Fjern adgang',
 	'notes.shareNobody': 'Ikke delt med nogen endnu.',
 	'notes.sharedToast': 'Delt med {name}.',
+	'notes.sharedWithFollowers': 'Delt med {name} — og de {count} noter, den peger på.',
+	'notes.shareFollows': 'Følger med:',
+	'notes.shareVia': 'følger med “{note}”',
 	'notes.unsharedPerson': '{name} kan ikke længere se noten.',
 	'notes.shareOwnerOnly': 'Kun ejeren kan dele noten.',
 	'notes.save': 'Gem',
@@ -76,7 +91,8 @@ export const da = {
 	'notes.copied': 'Kopieret',
 	'notes.copyFailed': 'Kunne ikke kopiere',
 	'notes.strike': 'Gennemstreget',
-	'notes.showSource': 'Vis som kode',
+	'notes.code': 'Kode',
+	'notes.showSource': 'Vis kilden (Markdown)',
 	'notes.source': 'Notens kildetekst',
 	'notes.styleTitle': 'Titel',
 	'notes.styleHeading': 'Overskrift',
@@ -119,6 +135,7 @@ export const da = {
 	'nav.calendar': 'Kalender',
 	'nav.settings': 'Indstillinger',
 	'nav.signOut': 'Log ud',
+	'nav.signOutConfirm': 'Tryk igen for at logge ud',
 	'nav.main': 'Hovedmenu',
 	'nav.search': 'Søg',
 	'nav.searchLong': 'Søg i opgaver og projekter',
@@ -130,6 +147,8 @@ export const da = {
 	'nav.toggleTheme': 'Skift mellem lyst og mørkt tema',
 	'nav.offline': 'Offline',
 	'nav.offlineHint': 'Ændringer fra andre vises ikke lige nu',
+	'net.reconnecting': 'Genopretter forbindelse…',
+	'net.offline': 'Ingen forbindelse',
 	'nav.doItToday': 'Gør det i dag',
 
 	// --- the sidebar's own sections ------------------------------------------------
@@ -230,6 +249,14 @@ export const da = {
 		'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.',
+	'account.sizes': 'Skriftstørrelse',
+	'account.sizesHint': 'Menuen og brødteksten kan sættes hver for sig — den ene er et blik ned over en liste, den anden en tekst, man læser.',
+	'account.menuSize': 'Menu',
+	'account.textSize': 'Brødtekst',
+	'size.small': 'Lille',
+	'size.default': 'Standard',
+	'size.large': 'Stor',
+	'size.xl': 'Størst',
 	'look.verdande': 'Verdande',
 	'look.verdandeNote': 'Som du kender den.',
 	'look.rolig': 'Rolig',
@@ -266,6 +293,10 @@ export const da = {
 		'Hvor du er logget ind. Genkender du ikke en af dem, så log den ud og skift adgangskode.',
 	'account.thisDevice': 'denne enhed',
 	'account.signOutDevice': 'Log ud',
+	'account.support': 'Støt projektet',
+	'account.supportHint':
+		'verdande er fri, open source-software under MIT-licensen — ingen betalt version, intet holdt tilbage. Sparede den dig en eftermiddag, kan du give vedligeholderen en kop kaffe. Helt frivilligt, og intet i appen ændrer sig.',
+	'account.buyCoffee': 'Buy me a coffee',
 
 	'account.totpEnabled': 'Slået til.',
 	'account.recoveryLeftOne': '{n} gendannelseskode tilbage.',
@@ -436,6 +467,8 @@ export const da = {
 	'view.filterEmpty': 'Ingenting matcher lige nu.',
 	'view.filterFailed': 'Filteret kunne ikke køres.',
 	'view.upcoming': 'Kommende',
+	'view.horizon': 'Periode',
+	'view.days': '{n} dage',
 	'view.mode': 'Visning',
 	'view.list': 'Liste',
 	'view.week': 'Uge',
@@ -645,7 +678,7 @@ export const da = {
 	// --- settings: integrations --------------------------------------------------------
 	'int.mailboxes': 'Postkasser',
 	'int.mailboxesHint':
-		'Flag en mail i iCloud, Fastmail eller enhver anden udbyder, og den bliver en opgave. Én vej: fjerner du flaget, sker der ikke noget med opgaven. Office 365 kan ikke bruges her — Microsoft har lukket for kodeord på IMAP.',
+		'Flag en mail i iCloud, Fastmail eller enhver anden udbyder, og den bliver en opgave — flaget fjernes, når opgaven er oprettet. Kun én vej: gør du selv noget ved mailen bagefter, sker der ikke noget med opgaven. Office 365 kan ikke bruges her — Microsoft har lukket for kodeord på IMAP.',
 	'int.addMailbox': 'Tilføj en postkasse',
 	'int.host': 'IMAP-server',
 	'int.username': 'Brugernavn',
@@ -661,7 +694,7 @@ export const da = {
 	'int.fetching': 'Henter …',
 	'int.gmail': 'Gmail',
 	'int.gmailHint':
-		'Stjernemarkér en mail, eller giv den en etiket, og den bliver en opgave. Envejs: at fjerne stjernen gør ikke noget ved opgaven.',
+		'Stjernemarkér en mail, eller giv den en etiket, og den bliver en opgave — stjernen fjernes så (en etiket bliver, hvor den er). Det du selv gør ved mailen bagefter, ændrer ikke opgaven.',
 	'int.connectGmail': 'Forbind Gmail',
 	'int.fromEnv':
 		'Klienten er sat i miljøet (VERDANDE_GMAIL_CLIENT_ID), så den kan ikke ændres her. Det er med vilje: en værdi i runens manifest er en beslutning, der bliver anvendt igen ved hver genstart, og en formular, der kunne overskrive den, ville gøre manifestet til en løgn.',
@@ -829,6 +862,8 @@ export const da = {
 	// --- the themes -------------------------------------------------------------------
 	'theme.dark': 'Nordlys',
 	'theme.darkNote': 'Mørk med grøn accent.',
+	'theme.charcoal': 'Kul',
+	'theme.charcoalNote': 'Neutral mørkegrå.',
 	'theme.dusk': 'Skumring',
 	'theme.duskNote': 'Mørk og varm, med rav.',
 	'theme.light': 'Dagslys',

web/src/lib/locales/en.js

@@ -18,8 +18,21 @@ export const en = {
 	'notes.unshared': 'The note is yours again.',
 	// Sharing with individual people, alongside the project.
 	'notes.groupSharedWithMe': 'Shared with me',
+	// The bell: what other people did that you need to know about. The sentence is
+	// composed here rather than on the server, so an English interface gets an
+	// English bell.
+	'notif.title': 'Notifications',
+	'notif.titleWithCount': 'Notifications ({n} unread)',
+	'notif.empty': 'Nothing yet.',
+	'notif.markAllRead': 'Mark all as read',
+	'notif.assigned': '{name} gave you a task',
+	'notif.noteChanged': '{name} edited a note',
+	'notif.comment': '{name} commented',
+	'notif.justNow': 'just now',
+	'notif.minutes': '{n} min ago',
+	'notif.hours': '{n} h ago',
 	'notes.linkOpen': 'Open',
-	'notes.linkMissing': 'That note could not be found.',
+	'notes.linkMissing': 'That note does not exist, or it is not shared with you.',
 	'notes.sharedBy': 'Shared by {name}',
 	'notes.sharePeople': 'Share with people',
 	'notes.sharePick': 'Choose someone …',
@@ -30,6 +43,9 @@ export const en = {
 	'notes.shareRemove': 'Remove access',
 	'notes.shareNobody': 'Not shared with anyone yet.',
 	'notes.sharedToast': 'Shared with {name}.',
+	'notes.sharedWithFollowers': 'Shared with {name} — along with the {count} notes it points at.',
+	'notes.shareFollows': 'Comes along:',
+	'notes.shareVia': 'came along with “{note}”',
 	'notes.unsharedPerson': '{name} can no longer see the note.',
 	'notes.shareOwnerOnly': 'Only the owner can share the note.',
 	'notes.save': 'Save',
@@ -72,7 +88,8 @@ export const en = {
 	'notes.copied': 'Copied',
 	'notes.copyFailed': 'Could not copy',
 	'notes.strike': 'Strikethrough',
-	'notes.showSource': 'Show as code',
+	'notes.code': 'Code',
+	'notes.showSource': 'Show the source (Markdown)',
 	'notes.source': 'Note source',
 	'notes.styleTitle': 'Title',
 	'notes.styleHeading': 'Heading',
@@ -115,6 +132,7 @@ export const en = {
 	'nav.calendar': 'Calendar',
 	'nav.settings': 'Settings',
 	'nav.signOut': 'Sign out',
+	'nav.signOutConfirm': 'Click again to sign out',
 	'nav.main': 'Main menu',
 	'nav.search': 'Search',
 	'nav.searchLong': 'Search tasks and projects',
@@ -126,6 +144,8 @@ export const en = {
 	'nav.toggleTheme': 'Switch between light and dark',
 	'nav.offline': 'Offline',
 	'nav.offlineHint': 'Changes from other people are not showing right now',
+	'net.reconnecting': 'Reconnecting…',
+	'net.offline': 'No connection',
 	'nav.doItToday': 'Do it today',
 
 	// --- the sidebar's own sections ------------------------------------------------
@@ -226,6 +246,14 @@ export const en = {
 		'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.',
+	'account.sizes': 'Text size',
+	'account.sizesHint': 'The menu and the body text set separately — one is a glance down a list, the other a paragraph you read.',
+	'account.menuSize': 'Menu',
+	'account.textSize': 'Body text',
+	'size.small': 'Small',
+	'size.default': 'Default',
+	'size.large': 'Large',
+	'size.xl': 'Largest',
 	'look.verdande': 'Verdande',
 	'look.verdandeNote': 'As you know it.',
 	'look.rolig': 'Calm',
@@ -262,6 +290,10 @@ export const en = {
 		'Where you are signed in. If you do not recognise one, sign it out and change your password.',
 	'account.thisDevice': 'this device',
 	'account.signOutDevice': 'Sign out',
+	'account.support': 'Support the project',
+	'account.supportHint':
+		'verdande is free, open-source software under the MIT licence — no paid tier, nothing held back. If it saved you an afternoon, you can buy the maintainer a coffee. Entirely optional, and nothing in the app changes either way.',
+	'account.buyCoffee': 'Buy me a coffee',
 
 	'account.totpEnabled': 'On.',
 	'account.recoveryLeftOne': '{n} recovery code left.',
@@ -431,6 +463,8 @@ export const en = {
 	'view.filterEmpty': 'Nothing matches right now.',
 	'view.filterFailed': 'The filter could not be run.',
 	'view.upcoming': 'Upcoming',
+	'view.horizon': 'Range',
+	'view.days': '{n} days',
 	'view.mode': 'View',
 	'view.list': 'List',
 	'view.week': 'Week',
@@ -641,7 +675,7 @@ export const en = {
 	// --- settings: integrations --------------------------------------------------------
 	'int.mailboxes': 'Mailboxes',
 	'int.mailboxesHint':
-		'Flag an email in iCloud, Fastmail or any other provider and it becomes a task. One way: removing the flag does nothing to the task. Office 365 cannot be used here — Microsoft has closed IMAP to passwords.',
+		'Flag an email in iCloud, Fastmail or any other provider and it becomes a task — the flag comes off once it has. One way only: what you do to the mail afterwards does not change the task. Office 365 cannot be used here — Microsoft has closed IMAP to passwords.',
 	'int.addMailbox': 'Add a mailbox',
 	'int.host': 'IMAP server',
 	'int.username': 'Username',
@@ -657,7 +691,7 @@ export const en = {
 	'int.fetching': 'Fetching …',
 	'int.gmail': 'Gmail',
 	'int.gmailHint':
-		'Star an email, or give it a label, and it becomes a task. One way: removing the star does nothing to the task.',
+		'Star an email, or give it a label, and it becomes a task — the star then comes off (a label stays where it is). What you do to the mail afterwards does not change the task.',
 	'int.connectGmail': 'Connect Gmail',
 	'int.fromEnv':
 		'The client is set in the environment (VERDANDE_GMAIL_CLIENT_ID), so it cannot be changed here. That is deliberate: a value in the Rune’s manifest is a decision reapplied on every restart, and a form that could overwrite it would make the manifest a lie.',
@@ -822,6 +856,8 @@ export const en = {
 	// --- the themes -------------------------------------------------------------------
 	'theme.dark': 'Northern lights',
 	'theme.darkNote': 'Dark, with a green accent.',
+	'theme.charcoal': 'Charcoal',
+	'theme.charcoalNote': 'Neutral dark grey.',
 	'theme.dusk': 'Dusk',
 	'theme.duskNote': 'Dark and warm, with amber.',
 	'theme.light': 'Daylight',