feat(notes): drop the disclosure arrow from the note-list headers too

Same as the sidebar: the box folds on a click, the star and people icon
are the marks that mean something, and a date group keeps an empty spacer
so every label still starts at the same place.

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/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/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/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('/');
@@ -222,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
@@ -316,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
@@ -328,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,
@@ -352,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
@@ -385,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();
 
@@ -412,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
@@ -430,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);
@@ -441,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' })
@@ -902,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();
@@ -920,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();
@@ -933,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');
@@ -1465,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();

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/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/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/TaskRow.svelte

@@ -11,6 +11,7 @@
 	import { app } from '$lib/stores.svelte.js';
 	import { t, tag } from '$lib/i18n.svelte.js';
 	import { repeatLabel } from '$lib/when.js';
+	import { linkify } from '$lib/linkify.js';
 
 	let { task, onedit } = $props();
 
@@ -99,13 +100,44 @@
 		</svg>
 	</button>
 
-	<!-- Opening the detail drawer is the default. `onedit` is for the callers that
-	     want the click to mean something else. -->
-	<button class="body" onclick={() => (onedit ? onedit(task) : app.openDetail(task.id))}>
-		<span class="content">{task.content}</span>
+	<!-- A URL pasted into the title or the description is clickable, without the
+	     text ever having been anything but plain text. The link is a real <a>, which
+	     an <a> in a <button> may not be — so the body is a role=button rather than a
+	     button, and each link stops its click from also opening the task. Clicking
+	     any plain text still opens it. -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="body"
+		role="button"
+		tabindex="0"
+		onclick={() => (onedit ? onedit(task) : app.openDetail(task.id))}
+		onkeydown={(e) => {
+			if (e.key === 'Enter' || e.key === ' ') {
+				e.preventDefault();
+				onedit ? onedit(task) : app.openDetail(task.id);
+			}
+		}}
+	>
+		<span class="content"
+			>{#each linkify(task.content) as run}{#if run.href}<a
+						class="tlink"
+						href={run.href}
+						target="_blank"
+						rel="noopener noreferrer"
+						onclick={(e) => e.stopPropagation()}>{run.text}</a
+					>{:else}{run.text}{/if}{/each}</span
+		>
 
 		{#if task.description}
-			<span class="description">{task.description}</span>
+			<span class="description"
+				>{#each linkify(task.description) as run}{#if run.href}<a
+							class="tlink"
+							href={run.href}
+							target="_blank"
+							rel="noopener noreferrer"
+							onclick={(e) => e.stopPropagation()}>{run.text}</a
+						>{:else}{run.text}{/if}{/each}</span
+			>
 		{/if}
 
 		{#if assignee || due || task.labels?.length || repeats || task.subtask_count || task.attachment_count}
@@ -113,8 +145,14 @@
 				{#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>
@@ -180,7 +218,7 @@
 				{/each}
 			</span>
 		{/if}
-	</button>
+	</div>
 </div>
 
 <style>
@@ -301,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 {
@@ -309,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);
@@ -358,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

@@ -188,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}',
@@ -229,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',
@@ -265,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.',

web/src/lib/locales/en.js

@@ -184,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}',
@@ -225,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',
@@ -261,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.',

web/src/lib/stores.svelte.js

@@ -1051,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/noter/+page.svelte

@@ -810,7 +810,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>
@@ -1081,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 {
@@ -1362,43 +1371,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
@@ -1414,6 +1428,7 @@
 		margin-left: auto;
 		font-weight: 500;
 		letter-spacing: 0;
+		color: var(--ink-muted);
 	}
 
 	/* Stregen mellem rækkerne er væk.
@@ -1546,7 +1561,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.