feat(notes): three-line rows like Apple Notes, with a filed line and dividers

Each note is three lines now: the title, then the date and the excerpt,
then where the note is filed — a folder like the menu's groups and the
project's name, the owner's when it is someone else's, or simply "Noter"
when it belongs to no project. The date leads the second line, left
aligned, instead of being pushed to the right of the title. A faint
hairline separates one note from the next, and a month heading is
capitalised ("August 2026", not "august 2026").

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

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
 

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/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,7 +11,8 @@ 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.
 
@@ -22,15 +23,22 @@ forward mail to, and an MCP endpoint so Claude can work your task list directly.
   Firma, labelled regnskab. 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.
+- **Repeating tasks** as RRULE, comments and attachments, and reminders that go
+  out as Web Push to an iPhone or a Mac.
 - **[Calendar](caldav.md), [mail](mail.md) and [Claude](mcp.md)** connected over
   open standards rather than private formats.
 
@@ -48,7 +56,9 @@ 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.*
 
 ![Settings, integrations](screenshots/settings.png)
 

docs/openapi.yaml

@@ -805,6 +805,28 @@ paths:
         "200": { $ref: "#/components/responses/Task" }
         "404": { $ref: "#/components/responses/NotFound" }
 
+  /api/v1/tasks/{taskID}/snooze:
+    parameters:
+      - { name: taskID, in: path, required: true, schema: { type: string } }
+    post:
+      tags: [tasks]
+      summary: Snooze a task until a time, or wake it.
+      description: |
+        Parks the task at the bottom of its list, greyed, until `until` passes —
+        nothing else about it moves. An empty `until` wakes it now.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                until: { type: string, format: date-time, description: "RFC3339; empty to wake." }
+      responses:
+        "200": { $ref: "#/components/responses/Task" }
+        "404": { $ref: "#/components/responses/NotFound" }
+        "422": { $ref: "#/components/responses/Validation" }
+
   /api/v1/tasks/quick-add:
     post:
       tags: [tasks]

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
 

internal/httpapi/notes_handlers.go

@@ -313,6 +313,18 @@ func (s *Server) handleExportNotes(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// Oldest first, and the id to break a tie. AllNotes comes back newest-first by
+	// the second, so two notes made in the same second have no order between them —
+	// and then which of two same-titled notes gets the plain name and which gets
+	// "(2)" is a coin toss that lands differently each export. Ordering the whole
+	// thing by when it was made settles it: the first note of a name keeps the name.
+	sort.SliceStable(notes, func(i, j int) bool {
+		if notes[i].CreatedAt.Equal(notes[j].CreatedAt) {
+			return notes[i].ID < notes[j].ID
+		}
+		return notes[i].CreatedAt.Before(notes[j].CreatedAt)
+	})
+
 	w.Header().Set("Content-Type", "application/zip")
 	w.Header().Set("Content-Disposition",
 		`attachment; filename="verdande-noter-`+time.Now().Format("2006-01-02")+`.zip"`)

internal/httpapi/notifications_handlers.go

@@ -148,15 +148,23 @@ func (s *Server) pushToUser(userID, title, body, projectID string) pushOutcome {
 		return out
 	}
 
-	payload := push.Payload{Title: title, Body: body, URL: "/projekt/" + projectID}
+	target := "/projekt/" + projectID
+	if projectID == "" {
+		target = "/"
+	}
+	payload := push.Payload{Title: title, Body: body, URL: target}
+	subject := s.vapidSubject()
 	for _, sub := range subs {
 		err := push.Send(ctx, push.Subscription{
 			Endpoint: sub.Endpoint, P256dh: sub.P256dh, Auth: sub.Auth,
 		}, payload, push.VAPID{
-			Public: public, Private: private, Subject: "mailto:" + s.cfg.SMTP.From,
+			Public: public, Private: private, Subject: subject,
 		})
 		if err == nil {
 			out.Sent++
+			if delErr := s.db.MarkPushDelivered(ctx, sub.Endpoint); delErr != nil {
+				s.log.Warn("mark push delivered", "err", delErr)
+			}
 			continue
 		}
 		// Warn, not Debug.
@@ -257,6 +265,29 @@ func (s *Server) vapidKeys(ctx contextLike) (string, string, error) {
 	return s.db.InstanceKeys(ctx, push.GenerateVAPIDKeys)
 }
 
+// vapidSubject is the "sub" claim a push service is told to reach the sender at.
+//
+// It has to be one the service will actually accept, and Apple is the strict one:
+// it answers 403 Forbidden to a mailto whose domain is made up — which is exactly
+// what the old fallback, mailto:[email protected], was on an instance with
+// no mail set up. Every push to an iPhone or a Mac was rejected, silently as far as
+// the person waiting for the notification could tell.
+//
+// So a real address is used when there is one, and otherwise the instance's own
+// https address — which is a valid VAPID subject, points at something that exists,
+// and Apple accepts. Verified against web.push.apple.com: the mailto gets a 403,
+// the https URL a 201.
+func (s *Server) vapidSubject() string {
+	from := strings.TrimSpace(s.cfg.SMTP.From)
+	if from != "" && strings.Contains(from, "@") && !strings.HasSuffix(from, "@localhost") {
+		return "mailto:" + from
+	}
+	if strings.HasPrefix(s.cfg.BaseURL, "https://") || strings.HasPrefix(s.cfg.BaseURL, "http://") {
+		return s.cfg.BaseURL
+	}
+	return "mailto:[email protected]"
+}
+
 // --- subscription endpoints -----------------------------------------------------------
 
 type pushSubscriptionRequest struct {

internal/httpapi/push_subject_test.go

@@ -0,0 +1,33 @@
+package httpapi
+
+import (
+	"testing"
+
+	"github.com/kristianwind/verdande/internal/config"
+)
+
+// The VAPID subject has to be one a push service will accept. Apple answers 403 to
+// a mailto with a made-up domain, which is what the no-mail fallback used to be, so
+// every push to an Apple device was refused. With no real address, the instance's
+// own https URL is used instead — valid, real, and accepted.
+func TestVAPIDSubject(t *testing.T) {
+	cases := []struct {
+		name    string
+		from    string
+		baseURL string
+		want    string
+	}{
+		{"a real address is used as-is", "[email protected]", "https://verdande.example.dk", "mailto:[email protected]"},
+		{"no mail falls back to the https url", "", "https://verdande.example.dk", "https://verdande.example.dk"},
+		{"the localhost default is not a real address", "verdande@localhost", "https://verdande.example.dk", "https://verdande.example.dk"},
+		{"a plain http dev url still serves as a subject", "", "http://localhost:8080", "http://localhost:8080"},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			s := &Server{cfg: &config.Config{BaseURL: tc.baseURL, SMTP: config.SMTP{From: tc.from}}}
+			if got := s.vapidSubject(); got != tc.want {
+				t.Errorf("vapidSubject() = %q, want %q", got, tc.want)
+			}
+		})
+	}
+}

internal/httpapi/server.go

@@ -551,6 +551,7 @@ func New(cfg *config.Config, db *store.DB, log *slog.Logger, web fs.FS) *Server
 					r.Post("/complete", s.handleCompleteTask)
 					r.Post("/reopen", s.handleReopenTask)
 					r.Post("/move", s.handleMoveTask)
+					r.Post("/snooze", s.handleSnoozeTask)
 				})
 			})
 		})

internal/httpapi/tasks_handlers.go

@@ -16,23 +16,24 @@ import (
 )
 
 type taskJSON struct {
-	ID          string   `json:"id"`
-	ProjectID   string   `json:"project_id"`
-	SectionID   string   `json:"section_id,omitempty"`
-	ParentID    string   `json:"parent_id,omitempty"`
-	Content     string   `json:"content"`
-	Description string   `json:"description,omitempty"`
-	Priority    int      `json:"priority"`
-	DueDate     string   `json:"due_date,omitempty"`
-	DueDatetime string   `json:"due_datetime,omitempty"`
-	DurationMin *int     `json:"duration_min,omitempty"`
-	Recurrence  string   `json:"recurrence_rule,omitempty"`
-	RepeatText  string   `json:"recurrence_text,omitempty"`
-	AssigneeID  string   `json:"assignee_id,omitempty"`
-	Labels      []string `json:"labels"`
-	Completed   bool     `json:"completed"`
-	CompletedAt string   `json:"completed_at,omitempty"`
-	CreatedBy   string   `json:"created_by"`
+	ID           string   `json:"id"`
+	ProjectID    string   `json:"project_id"`
+	SectionID    string   `json:"section_id,omitempty"`
+	ParentID     string   `json:"parent_id,omitempty"`
+	Content      string   `json:"content"`
+	Description  string   `json:"description,omitempty"`
+	Priority     int      `json:"priority"`
+	DueDate      string   `json:"due_date,omitempty"`
+	DueDatetime  string   `json:"due_datetime,omitempty"`
+	DurationMin  *int     `json:"duration_min,omitempty"`
+	Recurrence   string   `json:"recurrence_rule,omitempty"`
+	RepeatText   string   `json:"recurrence_text,omitempty"`
+	AssigneeID   string   `json:"assignee_id,omitempty"`
+	Labels       []string `json:"labels"`
+	Completed    bool     `json:"completed"`
+	CompletedAt  string   `json:"completed_at,omitempty"`
+	SnoozedUntil string   `json:"snoozed_until,omitempty"`
+	CreatedBy    string   `json:"created_by"`
 	// What the row can say without being opened. Sent with every task rather than
 	// fetched when one is opened, because the point is that you see it in the list.
 	SubtaskCount    int     `json:"subtask_count,omitempty"`
@@ -67,6 +68,9 @@ func toTaskJSON(t store.Task) taskJSON {
 	if t.CompletedAt != nil {
 		j.CompletedAt = t.CompletedAt.Format(time.RFC3339)
 	}
+	if t.SnoozedUntil != nil {
+		j.SnoozedUntil = t.SnoozedUntil.Format(time.RFC3339)
+	}
 	return j
 }
 
@@ -698,3 +702,52 @@ func parseLimit(raw string, def, max int) int {
 	}
 	return n
 }
+
+type snoozeRequest struct {
+	// Until is an RFC3339 time to snooze to, or empty to wake the task now.
+	Until string `json:"until"`
+}
+
+// handleSnoozeTask parks a task until a time, or wakes it. Snooze changes nothing
+// but when the task wants to be seen — its due date and everything else stay put.
+func (s *Server) handleSnoozeTask(w http.ResponseWriter, r *http.Request) {
+	var req snoozeRequest
+	if err := decodeJSON(w, r, &req); err != nil {
+		return
+	}
+	taskID := chi.URLParam(r, "taskID")
+	user := userFrom(r.Context())
+
+	role, err := store.TaskRole(r.Context(), s.db, taskID, user.ID)
+	if err != nil || !role.CanEdit() {
+		writeError(w, http.StatusNotFound, CodeNotFound, "not found")
+		return
+	}
+
+	var until *time.Time
+	if strings.TrimSpace(req.Until) != "" {
+		parsed, perr := time.Parse(time.RFC3339, req.Until)
+		if perr != nil {
+			writeFieldErrors(w, map[string]string{"until": "must be an RFC3339 time"})
+			return
+		}
+		until = &parsed
+	}
+	if err := s.db.SnoozeTask(r.Context(), taskID, until); err != nil {
+		s.storeError(w, r, "snooze task", err)
+		return
+	}
+
+	t, err := s.db.GetTask(r.Context(), taskID, user.ID)
+	if err != nil {
+		s.storeError(w, r, "get task", err)
+		return
+	}
+	verb := "task.snoozed"
+	if until == nil {
+		verb = "task.unsnoozed"
+	}
+	s.activity(r, t.ProjectID, t.ID, verb, nil)
+	s.publish(t.ProjectID, "task.updated", toTaskJSON(*t))
+	writeJSON(w, http.StatusOK, toTaskJSON(*t))
+}

internal/httpapi/tasks_test.go

@@ -1817,3 +1817,50 @@ func TestATaskIsFoundByAWordInsideAWord(t *testing.T) {
 		}
 	}
 }
+
+// A snoozed task sinks to the bottom of the list and greys until its time; waking
+// it puts it back. The list order is what the row's dimming rides on.
+func TestSnoozeSinksAndWakes(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	_, a := ts.do(t, "POST", "/api/v1/tasks", map[string]any{"content": "Alfa"})
+	ts.do(t, "POST", "/api/v1/tasks", map[string]any{"content": "Bravo"})
+	aID, _ := a["id"].(string)
+
+	// Snooze Alfa two days out.
+	future := time.Now().Add(48 * time.Hour).UTC().Format(time.RFC3339)
+	resp, body := ts.do(t, "POST", "/api/v1/tasks/"+aID+"/snooze", map[string]any{"until": future})
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("snooze: %d %v", resp.StatusCode, body)
+	}
+	if body["snoozed_until"] == "" || body["snoozed_until"] == nil {
+		t.Error("the response does not carry snoozed_until")
+	}
+
+	// Alfa now sorts after Bravo, though it was created first.
+	order := func() []string {
+		_, list := ts.do(t, "GET", "/api/v1/tasks", nil)
+		var out []string
+		for _, raw := range list["tasks"].([]any) {
+			out = append(out, raw.(map[string]any)["content"].(string))
+		}
+		return out
+	}
+	got := order()
+	if len(got) != 2 || got[0] != "Bravo" || got[1] != "Alfa" {
+		t.Errorf("snoozed task did not sink: order = %v", got)
+	}
+
+	// Wake it, and it comes back above Bravo.
+	resp, body = ts.do(t, "POST", "/api/v1/tasks/"+aID+"/snooze", map[string]any{"until": ""})
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("wake: %d %v", resp.StatusCode, body)
+	}
+	if s, _ := body["snoozed_until"].(string); s != "" {
+		t.Errorf("waking left snoozed_until set: %q", s)
+	}
+	if got := order(); got[0] != "Alfa" {
+		t.Errorf("woken task did not return: order = %v", got)
+	}
+}

internal/ics/ics.go

@@ -62,8 +62,13 @@ func Render(cal Calendar) string {
 
 	for _, t := range cal.Tasks {
 		writeTodo(&b, t, cal.Domain)
-		// A dated task also goes out as an event, for clients that ignore VTODO.
-		if t.DueDatetime != nil && !t.Completed {
+		// A dated task also goes out as an event, for the calendar apps that ignore
+		// VTODO — which is all of them: Apple Calendar and Google both drop a
+		// subscribed to-do on the floor and show only events. A task with a clock
+		// time becomes a timed event; one with only a date, an all-day event. Once
+		// this was limited to timed tasks, so a date-only task — most of them —
+		// simply never appeared in the calendar it was subscribed into.
+		if !t.Completed && (t.DueDatetime != nil || t.DueDate != "") {
 			writeEvent(&b, t, cal.Domain)
 		}
 	}
@@ -128,22 +133,31 @@ func writeTodo(b *strings.Builder, t Task, domain string) {
 }
 
 func writeEvent(b *strings.Builder, t Task, domain string) {
-	start := *t.DueDatetime
-	// Without a stated duration a task is shown as half an hour. A zero-length
-	// event collapses to an invisible sliver in most calendar grids.
-	minutes := 30
-	if t.DurationMin != nil && *t.DurationMin > 0 {
-		minutes = *t.DurationMin
-	}
-	end := start.Add(time.Duration(minutes) * time.Minute)
-
 	b.WriteString("BEGIN:VEVENT\r\n")
 	// A distinct UID suffix: the event and the to-do describe the same task, and
 	// sharing a UID would make a client treat them as two versions of one item.
 	writeLine(b, "UID:"+t.ID+"-event@"+domain)
 	writeLine(b, "DTSTAMP:"+utc(t.UpdatedAt))
-	writeLine(b, "DTSTART:"+utc(start))
-	writeLine(b, "DTEND:"+utc(end))
+
+	if t.DueDatetime != nil {
+		start := *t.DueDatetime
+		// Without a stated duration a task is shown as half an hour. A zero-length
+		// event collapses to an invisible sliver in most calendar grids.
+		minutes := 30
+		if t.DurationMin != nil && *t.DurationMin > 0 {
+			minutes = *t.DurationMin
+		}
+		writeLine(b, "DTSTART:"+utc(start))
+		writeLine(b, "DTEND:"+utc(start.Add(time.Duration(minutes)*time.Minute)))
+	} else {
+		// A date with no time is an all-day event. DTEND is exclusive — a one-day
+		// event ends on the following date — which is what keeps it a single day in
+		// the grid rather than bleeding into the next.
+		day := strings.ReplaceAll(t.DueDate, "-", "")
+		writeLine(b, "DTSTART;VALUE=DATE:"+day)
+		writeLine(b, "DTEND;VALUE=DATE:"+nextDay(t.DueDate))
+	}
+
 	writeLine(b, "SUMMARY:"+escape(t.Content))
 	if t.Description != "" {
 		writeLine(b, "DESCRIPTION:"+escape(t.Description))
@@ -157,6 +171,17 @@ func writeEvent(b *strings.Builder, t Task, domain string) {
 
 func utc(t time.Time) string { return t.UTC().Format("20060102T150405Z") }
 
+// nextDay is the YYYYMMDD after a YYYY-MM-DD date, for an all-day event's exclusive
+// DTEND. A malformed date is returned as its own compacted form rather than
+// dropped, so a task never loses its event over a bad string.
+func nextDay(date string) string {
+	d, err := time.Parse("2006-01-02", date)
+	if err != nil {
+		return strings.ReplaceAll(date, "-", "")
+	}
+	return d.AddDate(0, 0, 1).Format("20060102")
+}
+
 // escape applies RFC 5545 text escaping. A comma or semicolon in a task title is
 // a value separator in iCalendar, so an unescaped one silently truncates the
 // summary at that character in every client.

internal/ics/ics_test.go

@@ -102,19 +102,28 @@ func TestWholeDayDueDatesAreDates(t *testing.T) {
 
 // Google Calendar ignores VTODO. Timed tasks are therefore also emitted as events,
 // or a feed is useless in the calendar most people actually keep.
-func TestTimedTasksAlsoBecomeEvents(t *testing.T) {
+func TestDatedTasksBecomeEvents(t *testing.T) {
 	out := Render(sample())
 
-	if strings.Count(out, "BEGIN:VEVENT") != 1 {
-		t.Fatalf("got %d VEVENTs, want one for the single timed task",
-			strings.Count(out, "BEGIN:VEVENT"))
+	// Every dated, unfinished task becomes an event, so it shows in a calendar app
+	// that ignores VTODO — timed t1, and date-only t2 and t3. The finished t4 has no
+	// date and no event.
+	if got := strings.Count(out, "BEGIN:VEVENT"); got != 3 {
+		t.Fatalf("got %d VEVENTs, want 3 (one timed, two all-day)", got)
 	}
-	if !strings.Contains(out, "DTSTART:20260310T090000Z") {
-		t.Error("the event has no start")
+
+	// The timed one keeps its clock and its 45-minute duration.
+	if !strings.Contains(out, "DTSTART:20260310T090000Z") || !strings.Contains(out, "DTEND:20260310T094500Z") {
+		t.Error("the timed event's start or duration is wrong")
 	}
-	// 45 minutes of stated duration.
-	if !strings.Contains(out, "DTEND:20260310T094500Z") {
-		t.Error("the event's end does not reflect the task's duration")
+	// The date-only ones are all-day: a DATE start and an exclusive next-day end, so
+	// they sit on their own day rather than bleeding into the next.
+	if !strings.Contains(out, "DTSTART;VALUE=DATE:20260312") || !strings.Contains(out, "DTEND;VALUE=DATE:20260313") {
+		t.Error("the date-only event is not a single all-day event")
+	}
+	// A recurring date-only task carries its rule onto the event.
+	if !strings.Contains(out, "RRULE:FREQ=WEEKLY;BYDAY=MO") {
+		t.Error("the recurring task's event has no RRULE")
 	}
 	// The event must not share the to-do's UID, or clients treat them as one item.
 	if !strings.Contains(out, "UID:[email protected]") {

internal/store/migrations/0031_task_snooze.sql

@@ -0,0 +1,7 @@
+-- Snooze: put a task out of the way without finishing or filing it. A snoozed task
+-- sinks to the bottom of its list and greys out until the time it is snoozed to,
+-- then comes back on its own — no job wakes it, because "snoozed" is simply
+-- snoozed_until being still in the future, read against the clock each time.
+--
+-- Null means not snoozed, which is every task until somebody snoozes one.
+ALTER TABLE tasks ADD COLUMN snoozed_until INTEGER;

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: "[email protected]", Name: "andreas", PasswordHash: "x"}
+	if err := db.CreateUser(ctx, u, "Inbox"); err != nil {
+		t.Fatalf("create user: %v", err)
+	}
+	got, err := db.UserByEmail(ctx, "[email protected]")
+	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: "[email protected]", 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/notifications.go

@@ -204,6 +204,17 @@ func (db *DB) dropPushEndpoint(ctx context.Context, endpoint string) error {
 // has failed enough times. A push service says 404 or 410 when an endpoint is gone,
 // but it also has bad days — forgiving a few failures keeps a flaky network from
 // silently unsubscribing somebody's phone.
+// MarkPushDelivered records that a push went through: the failure count goes back
+// to zero and last_used_at moves forward. Without it a subscription that failed a
+// few times and then recovered would keep those failures on its record and be one
+// flaky night away from the ten that delete it — even though it is working.
+func (db *DB) MarkPushDelivered(ctx context.Context, endpoint string) error {
+	_, err := db.ExecContext(ctx,
+		`UPDATE push_subscriptions SET failures = 0, last_used_at = ? WHERE endpoint = ?`,
+		time.Now().Unix(), endpoint)
+	return err
+}
+
 func (db *DB) RecordPushFailure(ctx context.Context, endpoint string, permanent bool) error {
 	if permanent {
 		// Not scoped by user, and that is right here: this is the push service

internal/store/tasks.go

@@ -29,6 +29,9 @@ type Task struct {
 	AssigneeID     string
 	CompletedAt    *time.Time
 	CompletedBy    string
+	// SnoozedUntil, when set and still in the future, parks the task at the bottom
+	// of its list, greyed, until it passes. Nil means the task is not snoozed.
+	SnoozedUntil *time.Time
 	// CreatedBy is empty when the author's account has been deleted: `created_by`
 	// is ON DELETE SET NULL so the task survives the person who wrote it.
 	CreatedBy string
@@ -219,7 +222,7 @@ func (db *DB) ListTasks(ctx context.Context, userID string, f TaskFilter) ([]Tas
 		SELECT t.id, t.project_id, t.section_id, t.parent_id, t.content, t.description,
 		       t.priority, t.due_date, t.due_datetime, t.due_timezone, t.duration_min,
 		       t.recurrence_rule, t.assignee_id, t.completed_at, t.completed_by,
-		       t.created_by, t.sort_order, t.created_at, t.updated_at,` + taskCounts + `
+		       t.created_by, t.sort_order, t.created_at, t.updated_at, t.snoozed_until,` + taskCounts + `
 		FROM tasks t
 		JOIN projects p ON p.id = t.project_id
 		WHERE ` + strings.Join(where, " AND ") + `
@@ -313,7 +316,7 @@ func (db *DB) GetTask(ctx context.Context, taskID, userID string) (*Task, error)
 		SELECT t.id, t.project_id, t.section_id, t.parent_id, t.content, t.description,
 		       t.priority, t.due_date, t.due_datetime, t.due_timezone, t.duration_min,
 		       t.recurrence_rule, t.assignee_id, t.completed_at, t.completed_by,
-		       t.created_by, t.sort_order, t.created_at, t.updated_at,`+taskCounts+`
+		       t.created_by, t.sort_order, t.created_at, t.updated_at, t.snoozed_until,`+taskCounts+`
 		FROM tasks t WHERE t.id = ? AND t.deleted_at IS NULL`, taskID)
 	if err != nil {
 		return nil, err
@@ -390,7 +393,32 @@ func order(f TaskFilter) string {
 	if f.CompletedOnly {
 		return "t.completed_at DESC, t.id DESC"
 	}
-	return "t.due_date IS NULL, t.due_date, t.priority, t.sort_order, t.created_at"
+	// A snoozed task sinks below everything else — the CASE is 1 while it is still
+	// snoozed and 0 the moment its time passes, so it rejoins the list in its proper
+	// place by the clock, with nothing to run. Compared as an integer, or the TEXT
+	// strftime returns would sort under every number.
+	snoozed := "(CASE WHEN t.snoozed_until > CAST(strftime('%s','now') AS INTEGER) THEN 1 ELSE 0 END)"
+	return snoozed + ", t.due_date IS NULL, t.due_date, t.priority, t.sort_order, t.created_at"
+}
+
+// SnoozeTask parks a task until a moment, or wakes it when until is nil. Only the
+// snooze changes; the due date, the time, everything else is left alone — a snooze
+// is about when you want to see it, not when it is due.
+func (db *DB) SnoozeTask(ctx context.Context, id string, until *time.Time) error {
+	var v any
+	if until != nil {
+		v = until.Unix()
+	}
+	res, err := db.ExecContext(ctx,
+		`UPDATE tasks SET snoozed_until = ?, updated_at = ? WHERE id = ? AND deleted_at IS NULL`,
+		v, time.Now().Unix(), id)
+	if err != nil {
+		return err
+	}
+	if n, _ := res.RowsAffected(); n == 0 {
+		return ErrNotFound
+	}
+	return nil
 }
 
 func scanTask(rows *sql.Rows) (Task, error) {
@@ -400,13 +428,13 @@ func scanTask(rows *sql.Rows) (Task, error) {
 	// stays; it loses its author.
 	var createdBy sql.NullString
 	var dueDatetime, completedAt sql.NullInt64
-	var duration sql.NullInt64
+	var duration, snoozedUntil sql.NullInt64
 	var created, updated int64
 
 	err := rows.Scan(&t.ID, &t.ProjectID, &sectionID, &parentID, &t.Content, &t.Description,
 		&t.Priority, &dueDate, &dueDatetime, &dueTZ, &duration,
 		&recurrence, &assignee, &completedAt, &completedBy,
-		&createdBy, &t.SortOrder, &created, &updated,
+		&createdBy, &t.SortOrder, &created, &updated, &snoozedUntil,
 		&t.SubtaskCount, &t.SubtaskDone, &t.AttachmentCount)
 	if err != nil {
 		return t, err
@@ -432,6 +460,10 @@ func scanTask(rows *sql.Rows) (Task, error) {
 		v := int(duration.Int64)
 		t.DurationMin = &v
 	}
+	if snoozedUntil.Valid {
+		v := time.Unix(snoozedUntil.Int64, 0).UTC()
+		t.SnoozedUntil = &v
+	}
 	t.CreatedAt = time.Unix(created, 0).UTC()
 	t.UpdatedAt = time.Unix(updated, 0).UTC()
 	return t, nil

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
@@ -1009,12 +1012,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
@@ -1070,8 +1073,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 +1107,17 @@
 						<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>
@@ -1225,6 +1237,23 @@
 					<a href="https://github.com/kristianwind/verdande/releases">the releases page</a>.
 				</p>
 				<ul class="lately">
+					<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 +1265,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

@@ -86,6 +86,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('/');
@@ -127,6 +150,32 @@ test('hvert link i sidebjælken fører et sted hen', async ({ page }) => {
 	expect(trouble).toEqual([]);
 });
 
+test('en opgave kan slumres og hentes frem igen', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	// "i dag" is parsed as the due date, so the task is named "Alfa" and shows here.
+	const box = page.getByLabel('Ny opgave');
+	await box.fill('Alfa i dag');
+	await box.press('Enter');
+
+	// Snooze it to tomorrow from its drawer.
+	await page.getByText('Alfa', { exact: true }).click();
+	const drawer = page.getByRole('complementary', { name: 'Opgave' });
+	await drawer.getByRole('button', { name: 'I morgen' }).click();
+
+	// The row greys — it carries the snoozed class and a "slumret til" mark.
+	const alfa = page.locator('.row', { hasText: 'Alfa' });
+	await expect(alfa).toHaveClass(/snoozed/);
+	await expect(alfa.locator('.snooze-mark')).toBeVisible();
+
+	// The drawer now offers to wake it, and waking takes the grey off.
+	await drawer.getByRole('button', { name: 'Væk nu' }).click();
+	await expect(alfa).not.toHaveClass(/snoozed/);
+
+	expect(trouble).toEqual([]);
+});
+
 test('en opgave kan åbnes og redigeres', async ({ page }) => {
 	const trouble = watchForTrouble(page);
 	await page.goto('/');
@@ -196,6 +245,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
@@ -290,9 +371,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
@@ -302,19 +383,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,
@@ -326,17 +408,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
@@ -359,18 +441,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();
 
@@ -386,11 +463,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
@@ -404,10 +477,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);
@@ -415,7 +488,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' })
@@ -876,6 +952,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();
@@ -894,7 +972,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();
@@ -907,11 +985,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('Ansvarlig: 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');
@@ -1439,9 +1517,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();
@@ -2638,18 +2725,29 @@ test('[[ foreslår en note, og linket lander i noten', async ({ page }) => {
 
 	await page.getByRole('button', { name: 'Ny note' }).click();
 	await ed.click();
+	await page.keyboard.type('Mine planer');
+	await page.keyboard.press('Enter');
 	await page.keyboard.type('Se ');
 	await page.keyboard.type('[[Rejse');
 
-	// The picker offers the note by title, and choosing it closes the brackets.
+	// The picker offers the note by title, and choosing it turns the text into a
+	// real inline link — the title, not the brackets.
 	const option = page.locator('.suggestions button', { hasText: 'Rejseplan til Berlin' });
 	await expect(option).toBeVisible();
 	await option.click();
-	await expect(ed).toContainText('[[Rejseplan til Berlin]]');
+	const inline = ed.locator('a.notelink', { hasText: 'Rejseplan til Berlin' });
+	await expect(inline).toBeVisible();
 
-	// And the link is real: it turns up in the note's links, not just as text.
+	// It survives the round-trip through Markdown and a reload.
 	await ed.blur();
-	await expect(page.locator('.links')).toContainText('Rejseplan til Berlin');
+	await page.waitForTimeout(900);
+	await page.reload();
+	await page.getByRole('button', { name: /Mine planer/ }).click();
+	await expect(ed.locator('a.notelink', { hasText: 'Rejseplan til Berlin' })).toBeVisible();
+
+	// And it is a link you can follow: clicking it opens the note it names.
+	await ed.locator('a.notelink', { hasText: 'Rejseplan til Berlin' }).click();
+	await expect(ed.locator('h1')).toHaveText('Rejseplan til Berlin');
 
 	expect(trouble).toEqual([]);
 });
@@ -3147,6 +3245,34 @@ test('en note kan trækkes hen på et projekt i sidebjælken', async ({ page })
 	expect(trouble).toEqual([]);
 });
 
+test('en note kan arkiveres fra sin egen fod, og hentes frem igen', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/noter');
+
+	await page.getByRole('button', { name: 'Ny note' }).click();
+	const ed = page.getByRole('textbox', { name: 'Notens tekst' });
+	await ed.click();
+	await page.keyboard.type('Kvartalsplan');
+	await ed.blur();
+	await page.waitForTimeout(700);
+
+	// The Arkivér button in the note's footer puts it away: it leaves the list.
+	await page.locator('footer .actions .button', { hasText: 'Arkivér' }).click();
+	await expect(page.locator('.notes button.row', { hasText: 'Kvartalsplan' })).toHaveCount(0);
+
+	// It is in the archive, where the same button now offers to bring it back.
+	await page.getByRole('button', { name: 'Vis arkivet' }).click();
+	await page.locator('.notes button.row', { hasText: 'Kvartalsplan' }).click();
+	await page.locator('footer .actions .button', { hasText: 'Tag frem igen' }).click();
+	await expect(page.locator('.notes button.row', { hasText: 'Kvartalsplan' })).toHaveCount(0);
+
+	// And back in the ordinary list.
+	await page.getByRole('button', { name: 'Vis arkivet' }).click();
+	await expect(page.locator('.notes button.row', { hasText: 'Kvartalsplan' })).toBeVisible();
+
+	expect(trouble).toEqual([]);
+});
+
 test('en monospace-linje kan forlades — på retur og gennem menuen', async ({ page }) => {
 	const trouble = watchForTrouble(page);
 	await page.goto('/noter');
@@ -3282,7 +3408,8 @@ test('flere noter kan markeres, arkiveres og hentes frem igen', async ({ page })
 	await rows.filter({ hasText: 'Bravo' }).click({ modifiers: ['Meta'] });
 	await expect(page.getByText('2 markeret')).toBeVisible();
 
-	await page.getByRole('button', { name: 'Arkivér', exact: true }).click();
+	// The selection bar's Arkivér, not the open note's own in the footer.
+	await page.locator('.picked-bar').getByRole('button', { name: 'Arkivér', exact: true }).click();
 	await page.waitForTimeout(900);
 
 	// Væk fra listen, og ikke i papirkurven: arkivering er ikke sletning.

web/scripts/generate-screenshots.js

@@ -483,6 +483,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;
@@ -516,3 +522,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

@@ -310,6 +310,7 @@ export const api = {
 	completeTask: (id) => post(`/tasks/${id}/complete`),
 	reopenTask: (id) => post(`/tasks/${id}/reopen`),
 	moveTask: (id, data) => post(`/tasks/${id}/move`, data),
+	snoozeTask: (id, until) => post(`/tasks/${id}/snooze`, { until: until ?? '' }),
 
 	quickAdd: (text, projectId, sectionId) =>
 		post('/tasks/quick-add', { text, project_id: projectId, section_id: sectionId }),

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

@@ -20,7 +20,7 @@
 	import { api, humanMessage } from '$lib/api.js';
 	import { colorVar } from '$lib/colors.js';
 
-	let { note, notes = [], onchange, onsave } = $props();
+	let { note, notes = [], onchange, onsave, onopennote } = $props();
 
 	let editor;
 	// Forslagslisten, så tastaturvalget kan rulle den frem.
@@ -486,23 +486,54 @@
 		return al.localeCompare(bl, 'da');
 	}
 
-	/** Replaces the half-typed tag with the whole name, and closes a note link. */
+	const escHtml = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	const escAttr = (s) => escHtml(s).replace(/"/g, '&quot;');
+
+	// A click on a note link follows it; a click anywhere else re-colours the code,
+	// as it did before. The link is contenteditable="false", so the click is a click
+	// and not a caret landing in the middle of a word.
+	function onEditorClick(event) {
+		const link = event.target.closest?.('.notelink');
+		if (link) {
+			event.preventDefault();
+			onopennote?.(link.getAttribute('data-note') ?? link.textContent);
+			return;
+		}
+		colourCode();
+	}
+
+	/** Replaces the half-typed tag with the whole thing. */
 	function accept(item) {
 		const partial = partialTag();
 		if (!partial) return;
 
 		const range = document.createRange();
-		range.setStart(partial.node, partial.start);
-		range.setEnd(partial.node, partial.start + partial.term.length);
 		const selection = window.getSelection();
-		selection.removeAllRanges();
-		selection.addRange(range);
 
-		// A note link closes its own brackets — the opener is already in the text —
-		// and both end in a space, because the next thing typed is a word and not
-		// more of the tag, and without it the suggestions come straight back.
-		const inserted = item.kind === 'note' ? `${item.label}]] ` : `${item.label} `;
-		document.execCommand('insertText', false, inserted);
+		if (item.kind === 'note') {
+			// Swallow the opening [[ as well and drop the finished link in its place,
+			// so it is a link the moment it is chosen — not the brackets, waiting to
+			// become one when the note is next opened. A space after, as its own text,
+			// so the caret leaves the atomic link and the next word is a word.
+			range.setStart(partial.node, partial.start - 2);
+			range.setEnd(partial.node, partial.start + partial.term.length);
+			selection.removeAllRanges();
+			selection.addRange(range);
+			document.execCommand(
+				'insertHTML',
+				false,
+				`<a class="notelink" data-note="${escAttr(item.label)}" contenteditable="false">${escHtml(item.label)}</a>`
+			);
+			document.execCommand('insertText', false, ' ');
+		} else {
+			range.setStart(partial.node, partial.start);
+			range.setEnd(partial.node, partial.start + partial.term.length);
+			selection.removeAllRanges();
+			selection.addRange(range);
+			// A trailing space, or the suggestions come straight back for the tag.
+			document.execCommand('insertText', false, `${item.label} `);
+		}
+
 		suggestions = [];
 		onchange?.(htmlToMarkdown(editor));
 	}
@@ -803,7 +834,7 @@
 			readState();
 			readSuggestions();
 		}}
-		onclick={colourCode}
+		onclick={onEditorClick}
 		onmouseup={readState}
 		{onkeydown}
 		{onpaste}
@@ -1165,6 +1196,18 @@
 		margin: var(--s2) 0;
 	}
 
+	/* A note link reads as a link: the accent colour, underlined on hover, and a
+	   pointer so it is plainly something to click rather than to edit. */
+	.page :global(a.notelink) {
+		color: var(--accent);
+		text-decoration: none;
+		cursor: pointer;
+		border-radius: var(--radius-sm);
+	}
+	.page :global(a.notelink:hover) {
+		text-decoration: underline;
+	}
+
 	.page :global(blockquote) {
 		margin: 0 0 var(--s2);
 		padding-left: var(--s3);

web/src/lib/components/Sidebar.svelte

@@ -487,6 +487,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 +530,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 +617,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 +641,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 +682,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 +782,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 +927,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 +963,6 @@
 									}, 200);
 								}}
 							>
-								<span
-									class="dot group-dot"
-									style="background: {colorVar(group.color)}"
-									aria-hidden="true"
-								></span>
 								{group.name}
 							</a>
 						</h2>
@@ -1005,6 +1117,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 +1271,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 +1300,33 @@
 		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;
+		color: 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 +1412,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 +1451,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 +1483,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 +1552,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 +1566,14 @@
 		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);
+		background: var(--accent-sunken);
 		color: var(--ink);
-		font-weight: 500;
+		font-weight: 600;
 	}
 
 	/* Only your own projects reorder. A shared one sits where its owner put it —

web/src/lib/components/TaskDetail.svelte

@@ -13,7 +13,7 @@
 	import { api, humanMessage } from '$lib/api.js';
 	import { app, projectName, clockOf } from '$lib/stores.svelte.js';
 	import { focusOnMount } from '$lib/focus.js';
-	import { t } from '$lib/i18n.svelte.js';
+	import { t, tag } from '$lib/i18n.svelte.js';
 	import { REPEATS } from '$lib/when.js';
 
 	let { task, onclose } = $props();
@@ -26,6 +26,46 @@
 	// Length in minutes, as a string for the field. Only meaningful with a time —
 	// see the field below — so it is seeded and shown alongside the clock.
 	let duration = $state('');
+	let snoozeCustom = $state('');
+
+	const snoozed = $derived(!!task?.snoozed_until && new Date(task.snoozed_until) > new Date());
+	const snoozedText = $derived(
+		snoozed
+			? new Date(task.snoozed_until).toLocaleString(tag(), {
+					day: 'numeric',
+					month: 'short',
+					hour: '2-digit',
+					minute: '2-digit'
+				})
+			: ''
+	);
+
+	async function snoozeTo(iso) {
+		snoozeCustom = '';
+		try {
+			await app.snooze(task.id, iso);
+		} catch (e) {
+			app.toast(humanMessage(e));
+		}
+	}
+
+	// Quick picks, in local time, as ISO for the API. This evening is six; the
+	// morning ones are nine; next week is the coming Monday.
+	const atLocal = (d, h) => {
+		d.setHours(h, 0, 0, 0);
+		return d.toISOString();
+	};
+	const thisEvening = () => atLocal(new Date(), 18);
+	const tomorrowMorning = () => {
+		const d = new Date();
+		d.setDate(d.getDate() + 1);
+		return atLocal(d, 9);
+	};
+	const nextWeek = () => {
+		const d = new Date();
+		d.setDate(d.getDate() + (((8 - d.getDay()) % 7) || 7));
+		return atLocal(d, 9);
+	};
 	let labels = $state('');
 	let projectId = $state('');
 	let recurrence = $state('');
@@ -459,6 +499,31 @@
 			</div>
 		</div>
 
+		<!-- Snooze: park it out of the way until a moment, without touching when it is
+		     due. While snoozed the row greys and sinks to the bottom of its list. -->
+		<div class="field">
+			<span class="field-label">{t('detail.snooze')}</span>
+			{#if snoozed}
+				<div class="snoozed-now">
+					<span>{t('task.snoozedUntil', { when: snoozedText })}</span>
+					<button class="snooze-btn" onclick={() => snoozeTo('')}>{t('detail.wake')}</button>
+				</div>
+			{:else}
+				<div class="snooze-row">
+					<button class="snooze-btn" onclick={() => snoozeTo(thisEvening())}>{t('detail.thisEvening')}</button>
+					<button class="snooze-btn" onclick={() => snoozeTo(tomorrowMorning())}>{t('detail.tomorrow')}</button>
+					<button class="snooze-btn" onclick={() => snoozeTo(nextWeek())}>{t('detail.nextWeek')}</button>
+					<input
+						type="datetime-local"
+						class="snooze-custom"
+						aria-label={t('detail.snoozeCustom')}
+						bind:value={snoozeCustom}
+						onchange={() => snoozeCustom && snoozeTo(new Date(snoozeCustom).toISOString())}
+					/>
+				</div>
+			{/if}
+		</div>
+
 		<div class="field">
 			<label for="labels">{t('detail.labels')}</label>
 			<input
@@ -765,13 +830,47 @@
 		gap: var(--s2);
 	}
 
-	label {
+	label,
+	.field-label {
 		font-size: var(--text-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		color: var(--ink-faint);
 	}
 
+	.snooze-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--s1);
+		align-items: center;
+	}
+	.snooze-btn {
+		width: auto;
+		padding: var(--s1) var(--s2);
+		font-size: var(--text-xs);
+		background: var(--surface);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		color: var(--ink);
+		cursor: pointer;
+	}
+	.snooze-btn:hover {
+		background: var(--surface-raised);
+	}
+	.snooze-custom {
+		width: auto;
+		flex: 1;
+		min-width: 9rem;
+	}
+	.snoozed-now {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--s2);
+		font-size: var(--text-sm);
+		color: var(--ink-muted);
+	}
+
 	input,
 	textarea,
 	select {
@@ -1016,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/TaskList.svelte

@@ -120,7 +120,18 @@
 		}
 	}
 
-	let ordered = $derived([...tasks].sort((a, b) => a.sort_order - b.sort_order));
+	// A snoozed task sinks below the rest, then rises back when its time passes —
+	// the same order the server sorts a list in, kept here so a drag-sorted list
+	// agrees rather than jumping when it reloads.
+	const snoozedNow = (t) => t.snoozed_until && new Date(t.snoozed_until) > new Date();
+	let ordered = $derived(
+		[...tasks].sort((a, b) => {
+			const sa = snoozedNow(a) ? 1 : 0;
+			const sb = snoozedNow(b) ? 1 : 0;
+			if (sa !== sb) return sa - sb;
+			return a.sort_order - b.sort_order;
+		})
+	);
 </script>
 
 {#each ordered as task (task.id)}

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();
 
@@ -63,9 +64,30 @@
 				})
 			: null
 	);
+
+	// Snoozed while its time is still ahead. Greys the row and adds a "slumret til"
+	// mark, so a parked task reads as set-aside rather than forgotten.
+	let snoozed = $derived(task.snoozed_until && new Date(task.snoozed_until) > new Date());
+	let snoozedLabel = $derived.by(() => {
+		if (!snoozed) return null;
+		const at = new Date(task.snoozed_until);
+		const midnight = new Date();
+		midnight.setHours(0, 0, 0, 0);
+		const days = Math.round((new Date(at.toDateString()) - midnight) / 86400000);
+		const clock = at.toLocaleTimeString(tag(), { hour: '2-digit', minute: '2-digit' });
+		if (days <= 0) return clock;
+		if (days === 1) return t('task.tomorrow') + ' ' + clock;
+		return at.toLocaleDateString(tag(), { day: 'numeric', month: 'short' }) + ' ' + clock;
+	});
 </script>
 
-<div class="row" class:leaving class:completed={task.completed} data-priority={task.priority}>
+<div
+	class="row"
+	class:leaving
+	class:completed={task.completed}
+	class:snoozed
+	data-priority={task.priority}
+>
 	<button
 		class="check"
 		class:checked={task.completed || leaving}
@@ -78,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}
@@ -92,14 +145,28 @@
 				{#if assignee}
 					<!-- First in the row, because "who" changes what the rest of the line
 					     means: a date on somebody else's task is their deadline, not
-					     yours. -->
-					<span class="assignee" title={t('task.assignee', { name: assignee.name })}>
+					     yours. The hand-off arrow marks it as delegated — out of your
+					     hands and into theirs — so a list reads at a glance as which are
+					     yours to do and which you are waiting on. -->
+					<span class="assignee" title={t('task.delegatedTo', { name: assignee.name })}>
+						<svg class="handoff" viewBox="0 0 24 24" aria-hidden="true">
+							<path d="M13 5l7 7-7 7" />
+							<path d="M20 12H4" />
+						</svg>
 						<span class="face" style="background: {assignee.avatar_color}">
 							{assignee.name[0]?.toUpperCase() ?? '?'}
 						</span>
 						{assignee.name}
 					</span>
 				{/if}
+				{#if snoozed}
+					<span class="snooze-mark" title={t('task.snoozedUntil', { when: snoozedLabel })}>
+						<svg viewBox="0 0 24 24" aria-hidden="true">
+							<path d="M4 6h8l-8 8h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+						</svg>
+						{snoozedLabel}
+					</span>
+				{/if}
 				{#if due}
 					<span class="due" data-tone={due.tone}>
 						{due.text}{#if time}&nbsp;{time}{/if}
@@ -151,7 +218,7 @@
 				{/each}
 			</span>
 		{/if}
-	</button>
+	</div>
 </div>
 
 <style>
@@ -183,6 +250,26 @@
 		text-decoration-color: var(--ink-faint);
 	}
 
+	/* Parked, not gone: dimmed so it reads as set aside, but still there and still
+	   readable. The checkbox and the snooze mark keep their weight, so it can be
+	   woken or ticked off without peering at it. */
+	.row.snoozed .content,
+	.row.snoozed .description,
+	.row.snoozed .meta {
+		opacity: 0.5;
+	}
+	.snooze-mark {
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+		color: var(--ink-muted);
+		opacity: 1;
+	}
+	.snooze-mark svg {
+		width: 12px;
+		height: 12px;
+	}
+
 	.check {
 		flex: none;
 		width: 20px;
@@ -252,6 +339,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 {
@@ -260,6 +354,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);
@@ -309,8 +417,25 @@
 	.assignee {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--s1);
+		gap: 4px;
 		color: var(--ink-muted);
+		background: var(--surface-raised);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-full);
+		padding: 1px var(--s2) 1px 4px;
+	}
+
+	/* The delegation mark: an arrow leaving, in the accent so the chip reads as
+	   handed-off rather than as just another name. */
+	.handoff {
+		width: 12px;
+		height: 12px;
+		fill: none;
+		stroke: var(--accent);
+		stroke-width: 2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		flex: none;
 	}
 
 	.face {

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,6 +22,8 @@ export const da = {
 	'notes.unshared': 'Noten er din igen.',
 	// Deling med enkeltpersoner, ved siden af projektet.
 	'notes.groupSharedWithMe': 'Delt med mig',
+	'notes.linkOpen': 'Åbn',
+	'notes.linkMissing': 'Noten blev ikke fundet.',
 	'notes.sharedBy': 'Delt af {name}',
 	'notes.sharePeople': 'Del med personer',
 	'notes.sharePick': 'Vælg en person …',
@@ -186,6 +188,7 @@ export const da = {
 	'repeat.everyN.month': 'hver {n}. måned',
 	'repeat.everyN.year': 'hvert {n}. år',
 	'task.assignee': 'Ansvarlig: {name}',
+	'task.delegatedTo': 'Uddelegeret til {name}',
 	'task.subtasks': '{done} af {total} undertasks er lukket',
 	'task.attachments': '{n} vedhæftet',
 	'task.priority': 'Prioritet {n}',
@@ -227,6 +230,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',
@@ -263,6 +274,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.',
@@ -598,6 +613,13 @@ export const da = {
 	'detail.due': 'Forfalder',
 	'detail.dueTime': 'Klokkeslæt',
 	'detail.duration': 'Længde i minutter',
+	'detail.snooze': 'Slumre',
+	'detail.wake': 'Væk nu',
+	'detail.thisEvening': 'I aften',
+	'detail.tomorrow': 'I morgen',
+	'detail.nextWeek': 'Næste uge',
+	'detail.snoozeCustom': 'Vælg tidspunkt',
+	'task.snoozedUntil': 'Slumret til {when}',
 	'detail.durationShort': 'min',
 	'detail.labels': 'Etiketter',
 	'detail.labelsPlaceholder': 'adskilt af komma',

web/src/lib/locales/en.js

@@ -18,6 +18,8 @@ export const en = {
 	'notes.unshared': 'The note is yours again.',
 	// Sharing with individual people, alongside the project.
 	'notes.groupSharedWithMe': 'Shared with me',
+	'notes.linkOpen': 'Open',
+	'notes.linkMissing': 'That note could not be found.',
 	'notes.sharedBy': 'Shared by {name}',
 	'notes.sharePeople': 'Share with people',
 	'notes.sharePick': 'Choose someone …',
@@ -182,6 +184,7 @@ export const en = {
 	'repeat.everyN.month': 'every {n} months',
 	'repeat.everyN.year': 'every {n} years',
 	'task.assignee': 'Assigned to {name}',
+	'task.delegatedTo': 'Delegated to {name}',
 	'task.subtasks': '{done} of {total} sub-tasks are done',
 	'task.attachments': '{n} attached',
 	'task.priority': 'Priority {n}',
@@ -223,6 +226,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',
@@ -259,6 +270,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.',
@@ -594,6 +609,13 @@ export const en = {
 	'detail.due': 'Due',
 	'detail.dueTime': 'Time',
 	'detail.duration': 'Length in minutes',
+	'detail.snooze': 'Snooze',
+	'detail.wake': 'Wake now',
+	'detail.thisEvening': 'This evening',
+	'detail.tomorrow': 'Tomorrow',
+	'detail.nextWeek': 'Next week',
+	'detail.snoozeCustom': 'Pick a time',
+	'task.snoozedUntil': 'Snoozed until {when}',
 	'detail.durationShort': 'min',
 	'detail.labels': 'Labels',
 	'detail.labelsPlaceholder': 'separated by commas',

web/src/lib/richtext.js

@@ -70,19 +70,39 @@ const attr = (s) => escapeHtml(s).replace(/"/g, '"').replace(/'/g, ''')
  * det overlever hverken en contenteditable eller en Markdown-fil.
  */
 const IMAGE = /!\[([^\]]*)\]\((\/api\/v1\/attachments\/[0-9a-f-]+)\)/g;
+// [[a note by title]], the spelling every note app settled on. Non-greedy, so two
+// links on one line stay two.
+const NOTELINK = /\[\[([^\]\n]+?)\]\]/g;
 const MARK = "\u0000";
 
 /** Inline marks, innermost first so a bold word inside italics survives both. */
 function inlineToHtml(text) {
+	// Lifted out before anything escapes or marks the text, and dropped back in
+	// whole at the end — the same placeholder trick the image already used, now for
+	// two kinds of thing the surrounding markup must not touch.
+	const pieces = [];
+	const lift = (html) => {
+		pieces.push(html);
+		return `${MARK}${pieces.length - 1}${MARK}`;
+	};
+
 	// Kun vores egen adresse bliver til et billede. Et `![](http://…)` fra en
 	// indsat tekst ville ellers hente fra en fremmed vært, når noten åbnes, og
 	// fortælle den, at den er blevet læst — og en note er det sidste sted, man vil
 	// have en sporingspixel. Alt andet står som den tekst, det er.
-	const images = [];
-	const lifted = (text ?? '').replace(IMAGE, (_, alt, src) => {
-		images.push(`<img src="${src}" alt="${attr(alt)}">`);
-		return `${MARK}${images.length - 1}${MARK}`;
-	});
+	let lifted = (text ?? '').replace(IMAGE, (_, alt, src) => lift(`<img src="${src}" alt="${attr(alt)}">`));
+
+	// A [[note]] is a link you can follow, not the brackets it was typed as. Made an
+	// atomic token — contenteditable="false" — so it moves and deletes as one thing,
+	// and it carries the title it points at in data-note; the editor reads that on a
+	// click. htmlToMarkdown turns it back into [[title]] exactly.
+	lifted = lifted.replace(
+		NOTELINK,
+		(_, title) =>
+			lift(
+				`<a class="notelink" data-note="${attr(title)}" contenteditable="false">${escapeHtml(title)}</a>`
+			)
+	);
 
 	const marked = escapeHtml(lifted)
 		.replace(/&lt;u&gt;(.+?)&lt;\/u&gt;/g, '<u>$1</u>')
@@ -91,7 +111,7 @@ function inlineToHtml(text) {
 		.replace(/~~(.+?)~~/g, '<s>$1</s>')
 		.replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>');
 
-	return marked.replace(new RegExp(MARK + '(\\d+)' + MARK, 'g'), (_, i) => images[Number(i)] ?? '');
+	return marked.replace(new RegExp(MARK + '(\\d+)' + MARK, 'g'), (_, i) => pieces[Number(i)] ?? '');
 }
 
 /**
@@ -234,6 +254,13 @@ function inlineToMarkdown(node) {
 	if (node.nodeType === Node.TEXT_NODE) return node.textContent;
 	if (node.nodeType !== Node.ELEMENT_NODE) return '';
 
+	// A note link goes back to the brackets it came from, by the title it carries
+	// rather than by the text it shows — the two are the same today, but the title
+	// is the thing that must survive the round trip.
+	if (node.tagName === 'A' && node.classList?.contains('notelink')) {
+		return `[[${node.getAttribute('data-note') ?? node.textContent}]]`;
+	}
+
 	const inner = [...node.childNodes].map(inlineToMarkdown).join('');
 	switch (node.tagName) {
 		// Et billede har ingen tekst i sig, så uden det her læses det som ingenting

web/src/lib/stores.svelte.js

@@ -408,6 +408,19 @@ class AppState {
 	 * and time are left alone, so making a task longer on the calendar does not
 	 * also reschedule it.
 	 */
+	/**
+	 * Snoozes a task until an ISO time, or wakes it when `until` is empty. Nothing
+	 * else about the task moves — a snooze is about when you want to see it, not when
+	 * it is due. Optimistic, so it greys and sinks at once.
+	 */
+	async snooze(id, until) {
+		await this.#optimistic(
+			id,
+			{ snoozed_until: until || undefined },
+			() => api.snoozeTask(id, until || '')
+		);
+	}
+
 	async resize(id, minutes) {
 		const previous = this.get(id);
 		if (!previous) return;
@@ -1038,6 +1051,52 @@ class Look {
 
 export const look = new Look();
 
+/**
+ * The font-size steps, shared by the menu and the body-text controls. `default`
+ * carries no attribute, so the base tokens in app.css stand unchanged.
+ */
+export const SIZES = [
+	{ id: 'small', name: 'size.small' },
+	{ id: 'default', name: 'size.default' },
+	{ id: 'large', name: 'size.large' },
+	{ id: 'xl', name: 'size.xl' }
+];
+
+/**
+ * A font-size preference — the same shape as Look: kept in localStorage and
+ * mirrored onto <html>, where app.html sets it before first paint so a chosen size
+ * does not flash in at the default and resize. Two instances below, because the
+ * menu and the body text are separate questions.
+ */
+class Sizing {
+	current = $state('default');
+	#key;
+	#attr;
+
+	constructor(key, attr) {
+		this.#key = key;
+		this.#attr = attr;
+		if (typeof document !== 'undefined') {
+			this.current = document.documentElement.dataset[attr] ?? 'default';
+		}
+	}
+
+	set(id) {
+		if (!SIZES.some((s) => s.id === id)) return;
+		this.current = id;
+		if (id === 'default') delete document.documentElement.dataset[this.#attr];
+		else document.documentElement.dataset[this.#attr] = id;
+		try {
+			localStorage.setItem(this.#key, id);
+		} catch {
+			// Private browsing; the choice simply will not persist.
+		}
+	}
+}
+
+export const menuSize = new Sizing('verdande:menu-size', 'menuSize');
+export const textSize = new Sizing('verdande:text-size', 'textSize');
+
 /** Theme, kept in localStorage and applied to the document element. */
 class Theme {
 	/**

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

@@ -1,7 +1,7 @@
 <script>
 	/** Konto: who you are, your password, and the second factor. */
 	import { api, humanMessage } from '$lib/api.js';
-	import { app, theme, THEMES, look, LOOKS } from '$lib/stores.svelte.js';
+	import { app, theme, THEMES, look, LOOKS, menuSize, textSize, SIZES } from '$lib/stores.svelte.js';
 	import { t, plural, i18n } from '$lib/i18n.svelte.js';
 	import { supported, register } from '$lib/passkey.js';
 	import { ago } from '$lib/when.js';
@@ -362,6 +362,40 @@
 			{/each}
 		</div>
 	</div>
+
+	<!-- Two more axes: how large the menu reads and how large the body text reads.
+	     Separate on purpose — one is a glance down a list of names, the other is a
+	     paragraph you sit and read. -->
+	<div class="sizes">
+		<h3>{t('account.sizes')}</h3>
+		<p class="hint">{t('account.sizesHint')}</p>
+		<div class="size-row">
+			<div class="size-field">
+				<label for="menu-size">{t('account.menuSize')}</label>
+				<select
+					id="menu-size"
+					value={menuSize.current}
+					onchange={(e) => menuSize.set(e.currentTarget.value)}
+				>
+					{#each SIZES as option (option.id)}
+						<option value={option.id}>{t(option.name)}</option>
+					{/each}
+				</select>
+			</div>
+			<div class="size-field">
+				<label for="text-size">{t('account.textSize')}</label>
+				<select
+					id="text-size"
+					value={textSize.current}
+					onchange={(e) => textSize.set(e.currentTarget.value)}
+				>
+					{#each SIZES as option (option.id)}
+						<option value={option.id}>{t(option.name)}</option>
+					{/each}
+				</select>
+			</div>
+		</div>
+	</div>
 </section>
 
 <section class="panel">
@@ -571,6 +605,42 @@
 	</ul>
 </section>
 
+<!-- Last, and quietly: a donate link belongs in Settings, never in the way of the
+     work. A plain anchor with an inline SVG — no third-party script, no webfont,
+     no tracking — so it works offline and cannot phone home. See the coffee-cup
+     snippet for why not their generated button. -->
+<section class="panel">
+	<header>
+		<h2>{t('account.support')}</h2>
+		<p class="hint">{t('account.supportHint')}</p>
+	</header>
+
+	<a
+		class="bmc"
+		href="https://buymeacoffee.com/kristianwind"
+		target="_blank"
+		rel="noopener noreferrer"
+	>
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.8"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path d="M4 9h13v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9Z" />
+			<path d="M17 10h1.5a2.5 2.5 0 0 1 0 5H17" />
+			<path d="M7.5 5.6c0-.9.8-1.1.8-2M11 5.6c0-.9.8-1.1.8-2M14.5 5.6c0-.9.8-1.1.8-2" />
+		</svg>
+		{t('account.buyCoffee')} ↗
+	</a>
+</section>
+
 <style>
 	.looks {
 		margin-top: var(--s4);
@@ -583,6 +653,37 @@
 		margin-bottom: var(--s1);
 	}
 
+	.sizes {
+		margin-top: var(--s4);
+		padding-top: var(--s3);
+		border-top: 1px solid var(--line);
+	}
+
+	.sizes h3 {
+		font-size: var(--text-sm);
+		margin-bottom: var(--s1);
+	}
+
+	.size-row {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+		gap: var(--s3);
+		margin-top: var(--s3);
+	}
+
+	.size-field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--s1);
+	}
+
+	.size-field label {
+		font-size: var(--text-xs);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--ink-faint);
+	}
+
 	.look-row {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
@@ -771,4 +872,36 @@
 	.uri {
 		overflow-wrap: anywhere;
 	}
+
+	/* The understated variant: present, not loud. Bordered and in the muted ink so
+	   it reads as a footnote, brightening on hover. The cup is outline-only. */
+	.bmc {
+		align-self: flex-start;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--s2);
+		padding: var(--s2) var(--s3);
+		border: 1px solid var(--line-strong);
+		border-radius: var(--radius);
+		color: var(--ink-muted);
+		text-decoration: none;
+		font-size: var(--text-sm);
+		transition:
+			color var(--fast) var(--ease),
+			border-color var(--fast) var(--ease);
+	}
+
+	.bmc:hover {
+		color: var(--ink);
+		border-color: var(--ink-muted);
+	}
+
+	.bmc:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+
+	.bmc svg {
+		flex: none;
+	}
 </style>

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

@@ -285,7 +285,7 @@
 		<p class="hint">{t('data.doneHint')}</p>
 	</header>
 	<div class="row">
-		<a class="ghost" href="/faerdige">{t('data.openDone')}</a>
+		<a class="link" href="/faerdige">{t('data.openDone')}</a>
 	</div>
 </section>
 

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

@@ -14,6 +14,7 @@
 	import { api, humanMessage } from '$lib/api.js';
 	import { app } from '$lib/stores.svelte.js';
 	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import { t, tag } from '$lib/i18n.svelte.js';
 	import { NOTE, startDrag } from '$lib/dnd.js';
 	import { colorVar } from '$lib/colors.js';
@@ -131,7 +132,10 @@
 		if (days === 1) return { key: 'i-gaar', label: t('notes.groupYesterday') };
 		if (days < 7) return { key: 'ugen', label: t('notes.groupWeek') };
 
-		const label = at.toLocaleDateString(tag(), { month: 'long', year: 'numeric' });
+		// Stort forbogstav på måneden: Intl giver "august 2026" på dansk, og en
+		// overskrift begynder med stort.
+		const month = at.toLocaleDateString(tag(), { month: 'long', year: 'numeric' });
+		const label = month.charAt(0).toUpperCase() + month.slice(1);
 		return { key: `m-${at.getFullYear()}-${at.getMonth()}`, label };
 	}
 
@@ -653,6 +657,44 @@
 	// What the note points at, for the panel under the editor.
 	let links = $derived(selected?.links ?? []);
 
+	/**
+	 * Follows a link from the panel to the thing it names.
+	 *
+	 * A [[note]] resolves by its title to a note — the one on the list if it is
+	 * there, otherwise looked up — and opens it in place. A #project and a task go
+	 * to their own pages. Until now these were text and nothing else: the note said
+	 * it pointed somewhere and there was no way to go.
+	 */
+	async function openLink(link) {
+		if (link.kind === 'note') {
+			const wanted = link.target_id.toLowerCase();
+			const here = notes.find((n) => (n.title ?? '').toLowerCase() === wanted);
+			if (here) {
+				open(here);
+				return;
+			}
+			try {
+				const found = (await api.notes({ q: link.target_id })).notes ?? [];
+				const hit = found.find((n) => (n.title ?? '').toLowerCase() === wanted) ?? found[0];
+				if (hit) open(hit);
+				else app.toast(t('notes.linkMissing'));
+			} catch (e) {
+				app.toast(humanMessage(e));
+			}
+			return;
+		}
+		if (link.kind === 'project') {
+			const project = app.projects.find(
+				(p) => p.name.toLowerCase() === link.target_id.toLowerCase()
+			);
+			if (project) goto(`/projekt/${project.id}`);
+			return;
+		}
+		if (link.kind === 'task') {
+			goto(`/opgave/${link.target_id}`);
+		}
+	}
+
 
 </script>
 
@@ -771,7 +813,11 @@
 										</svg>
 									</span>
 								{:else}
-									<span class="mark" class:closed={folded.has(group.key)} aria-hidden="true">▾</span>
+									<!-- No arrow, to match the sidebar: the box folds on a click,
+									     the star and the people icon are the marks that mean
+									     something, and a date group has none — an empty spacer, so
+									     every label still starts at the same place. -->
+									<span class="mark" aria-hidden="true"></span>
 								{/if}
 								{group.label}
 								<span class="count">{group.notes.length}</span>
@@ -792,41 +838,38 @@
 										ondragstart={(e) => onDragStart(e, note)}
 										ondragend={() => (dragging = null)}
 									>
-										<!-- Titel og projekt på linje ét, uddrag på linje to. Datoen står
-										     i gruppens overskrift og ikke her — undtagen når der er sorteret
-										     på navn, for så er der ingen overskrift, der siger den, og så er
-										     den det eneste tilbage, der gør. -->
+										<!-- Tre linjer, som Apple Noter: titlen, så datoen og uddraget, og
+										     nederst hvor noten er lagt. Datoen står forrest på linje to og
+										     venstrestillet, ikke ude til højre. -->
 										<span class="head">
 											<strong>{note.title || t('notes.untitled')}</strong>
-											{#if order === 'title'}
-												<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
-											{/if}
-											{#if note.project_id}
-												<!-- Projektets egen farve, den samme som prikken i sidebjælken.
-												     Mærkaten sagde det samme som alle de andre i en grå, der var
-												     lysere end uddraget — og projektet er dét, man skanner efter,
-												     når man leder i tolv hundrede noter. Nu kan Hjem kendes fra
-												     Claude uden at læse ordet. -->
-												<span class="filed" style="--project: {projectColour(note.project_id)}">
-													<span class="dot" aria-hidden="true"></span>
-													{projectName(note.project_id)}
-												</span>
-											{/if}
+										</span>
+										<span class="preview">
+											<span class="when" title={stamp(note)}>{when(shownDate(note))}</span>
+											<span class="snippet">{preview(note)}</span>
+										</span>
+										<!-- Linje tre: hvor noten er lagt, med den samme mappe som grupperne i
+										     menuen — projektets navn, ejerens hvis den er en andens, ellers bare
+										     "Noter", når den ikke hører til et projekt. -->
+										<span class="filed">
 											{#if note.shared_with_me && note.owner}
-												<!-- Hvis note delt med mig: hvem den kom fra, i personens egen
-												     avatar-farve. Samme form som projekt-mærkaten, så listen har
-												     ét sprog for "det her hører til nogen". -->
-												<span
-													class="filed person"
-													style="--project: {note.owner.avatar_color}"
-													title={t('notes.sharedBy', { name: note.owner.name })}
-												>
-													<span class="dot" aria-hidden="true"></span>
-													{note.owner.name}
-												</span>
+												<svg class="filed-icon" viewBox="0 0 16 16" aria-hidden="true">
+													<circle cx="8" cy="6" r="2.3" fill="none" stroke="currentColor" stroke-width="1.4" />
+													<path d="M3.6 13c0-2.5 2-4 4.4-4s4.4 1.5 4.4 4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
+												</svg>
+												<span class="filed-name" title={t('notes.sharedBy', { name: note.owner.name })}>{note.owner.name}</span>
+											{:else if note.project_id}
+												<svg class="filed-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>
+												<span class="filed-name">{projectName(note.project_id)}</span>
+											{:else}
+												<svg class="filed-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>
+												<span class="filed-name">{t('notes.title')}</span>
 											{/if}
 										</span>
-										<span class="preview">{preview(note)}</span>
 									</button>
 									<!-- De to knapper står oven på hinanden i en smal søjle.
 									     Ved siden af hinanden tog de toogfyrre pixels af en liste,
@@ -877,6 +920,7 @@
 			<NoteEditor
 				note={selected}
 				notes={notes}
+				onopennote={(title) => openLink({ kind: 'note', target_id: title })}
 				onchange={(body) => {
 					draft = body;
 					typed();
@@ -889,7 +933,9 @@
 				{#if links.length}
 					<span class="links">
 						{#each links as link}
-							<span class="link">{label(link)}</span>
+							<button class="link" onclick={() => openLink(link)} title={t('notes.linkOpen')}>
+								{label(link)}
+							</button>
 						{/each}
 					</span>
 				{/if}
@@ -994,6 +1040,12 @@
 
 					<button class="button" onclick={save}>{t('notes.save')}</button>
 					{#if ownsSelected}
+						<!-- Laid away, not thrown away: archive is the note leaving the list
+						     without leaving the account, and it reads "bring it back" once it
+						     already has. Owner only, like delete. -->
+						<button class="button" onclick={() => archiveOne(selected)}>
+							{selected.archived_at ? t('notes.unarchive') : t('notes.archive')}
+						</button>
 						<button class="button danger" onclick={() => remove(selected)}>{t('notes.delete')}</button>
 					{/if}
 				</div>
@@ -1033,6 +1085,11 @@
 		min-width: 0;
 		border-right: 1px solid var(--line);
 		padding-right: var(--s3);
+		/* White in light, a nuance lighter than the ground in dark — the note list
+		   is a surface you read down, so it lifts off the page like the editor does.
+		   --surface-raised is #fff in the light themes and one step up in the dark. */
+		background: var(--surface-raised);
+		padding-left: var(--s3);
 	}
 
 	.head {
@@ -1269,13 +1326,20 @@
 	 * målt på en rigtig række: titel plus én linje uddrag. */
 	li {
 		content-visibility: auto;
-		contain-intrinsic-size: auto 54px;
+		contain-intrinsic-size: auto 74px;
 	}
 
+	/* A faint hairline between notes, as Apple Notes has — the group boxes give the
+	   coarse structure, this separates one note from the next inside a group. */
 	.rowline {
 		display: flex;
 		align-items: center;
 		gap: var(--s1);
+		border-bottom: 1px solid var(--line);
+	}
+
+	li:last-child .rowline {
+		border-bottom: none;
 	}
 
 	/* De sjældne handlinger i en søjle, ikke en række. To knapper ved siden af
@@ -1314,43 +1378,48 @@
 	 *
 	 * Baggrunden er ikke gennemsigtig. En klæbende overskrift uden en er en
 	 * overskrift med rækkerne kørende igennem sig. */
+	/* One design with the sidebar headings: a rounded box, the same corner as an
+	   active menu item, filled just enough to separate one group of notes from the
+	   next. The hard rule underneath is gone — the box is the separation now. */
 	h3.group {
 		position: sticky;
 		top: 0;
 		z-index: 1;
-		margin: 0;
+		margin: 0 0 var(--s1);
 		background: var(--ground);
-		border-bottom: 1px solid var(--line);
+		border-radius: var(--radius);
 	}
 
+	/* Bold and plainly cased, in the reading ink — the faint uppercase label read as
+	   a different app's heading beside the sidebar's. Menu size, so the two tiers of
+	   heading in front of the eye at once are the same size. */
 	h3.group button {
 		display: flex;
 		align-items: center;
 		gap: var(--s2);
 		width: 100%;
 		padding: var(--s2) var(--s2);
-		font-size: var(--text-xs);
+		font-size: var(--menu-size);
 		font-weight: 600;
-		letter-spacing: 0.07em;
-		text-transform: uppercase;
-		color: var(--ink-faint);
+		letter-spacing: normal;
+		text-transform: none;
+		color: var(--ink);
+		border-radius: var(--radius);
 	}
 
 	h3.group button:hover {
-		color: var(--ink-muted);
+		background: var(--surface-sunken);
 	}
 
+	/* The mark, or an empty box the same width where a date group has none, so every
+	   label starts at the same place. The star and the people icon fill it; the
+	   arrow that used to is gone — the box folds on a click. */
 	h3.group .mark {
 		flex: none;
 		width: 0.75em;
 		font-size: 0.85em;
 		line-height: 1;
 		color: var(--ink-faint);
-		transition: transform var(--fast) var(--ease);
-	}
-
-	h3.group .mark.closed {
-		transform: rotate(-90deg);
 	}
 
 	/* Sit eget navn og ikke `.star`. Rækkens favoritknap hedder også det og er
@@ -1366,6 +1435,7 @@
 		margin-left: auto;
 		font-weight: 500;
 		letter-spacing: 0;
+		color: var(--ink-muted);
 	}
 
 	/* Stregen mellem rækkerne er væk.
@@ -1427,19 +1497,25 @@
 	/* Dato og begyndelse på samme linje, som Apple Noter gør det. To linjer pr.
 	   note frem for tre, og datoen først, fordi det er den, man skanner efter. */
 
+	/* Datoen forrest på linje to og venstrestillet, som Apple Noter — ikke skubbet
+	   ud til højre. Tabular-tal, så en søjle af datoer står på lige linjer. */
 	.when {
 		flex: none;
 		color: var(--ink-muted);
+		font-variant-numeric: tabular-nums;
 	}
 
-	/* `display: block`, og det er ikke pynt.
-	 *
-	 * Uddraget lå før inde i en flex-boks, der ejede afkortningen. Da datoen flyttede
-	 * op i gruppens overskrift, forsvandt den boks — og et inline-element klippes
-	 * ikke af `overflow: hidden`, så den sidste sætning løb videre ind under
-	 * favoritstjernen. Reglerne skal stå på det element, der faktisk skal klippes. */
+	/* Linje to er en flex-række: datoen, der ikke krymper, og uddraget, der klippes.
+	   Afkortningen skal stå på uddraget selv — et inline-element klippes ikke af
+	   `overflow: hidden`. */
 	.preview {
-		display: block;
+		display: flex;
+		align-items: baseline;
+		gap: 0.45em;
+		min-width: 0;
+	}
+
+	.snippet {
 		min-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1456,31 +1532,30 @@
 	 * Prikken bærer farven, ikke teksten. Fem projekters farver som skriftfarve på
 	 * en lys flade er fem forskellige grader af læsbarhed, og den lyseste af dem er
 	 * ikke læsbar. */
+	/* Linje tre: hvor noten er lagt. En mappe som grupperne i menuen og et navn,
+	   venstrestillet under uddraget — ikke en mærkat skubbet ud til højre. */
 	.filed {
 		display: flex;
 		align-items: center;
-		gap: 0.375em;
-		flex: none;
-		margin-left: auto;
-		max-width: 45%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		gap: 0.4em;
+		min-width: 0;
+		margin-top: 1px;
 		font-size: var(--text-xs);
 		color: var(--ink-muted);
 	}
 
-	.filed .dot {
-		width: 6px;
-		height: 6px;
+	.filed-icon {
+		width: 13px;
+		height: 13px;
 		flex: none;
-		border-radius: var(--radius-full);
-		background: var(--project, var(--line-strong));
+		color: var(--ink-faint);
 	}
 
-	.filed::before {
-		content: '▸ ';
-		opacity: 0.7;
+	.filed-name {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
 	/* Noten er et ark, ikke en flade i appen.
@@ -1498,7 +1573,9 @@
 		flex-direction: column;
 		min-height: 0;
 		min-width: 0;
-		background: var(--surface);
+		/* A nuance lighter than the ground in dark, still white in light — matches
+		   the note list beside it so the two read as one writing surface. */
+		background: var(--surface-raised);
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		/* Luft nok til at teksten ikke rører kanten.
@@ -1615,9 +1692,17 @@
 	.link {
 		color: var(--ink-muted);
 		background: var(--surface);
+		border: 1px solid var(--line);
 		border-radius: var(--radius-sm);
 		padding: 0 var(--s1);
 		font-family: var(--mono, ui-monospace, monospace);
+		font-size: inherit;
+		cursor: pointer;
+	}
+	.link:hover {
+		color: var(--ink);
+		background: var(--surface-raised);
+		border-color: var(--line-strong);
 	}
 
 	/* Sharing lives in a popover above the Del button, so the footer stays a status
@@ -1690,17 +1775,6 @@
 		display: block;
 	}
 
-	/* The person chip: the project mark's shape in a person's own colour. No ▸
-	   before it — the coloured dot already says "belongs to", and two markers on
-	   one short chip is noise. It sits next to the title rather than pushed to the
-	   right, so in the Delt med mig group it reads as "Ferieplan — Sofie". */
-	.filed.person {
-		margin-left: 0.5em;
-		max-width: 40%;
-	}
-	.filed.person::before {
-		content: none;
-	}
 
 	.sharepanel .none {
 		font-size: var(--text-xs);