feat(tasks): tid på en opgave, og et træk i kalenderen sætter den

Bedt om: "jeg vil have tid på opgaver, og jeg vil kunne justere dem i kalenderen."

Serveren kunne det hele i forvejen — `due_date` og `due_time` læses sammen og
bliver til et `due_datetime` i kontoens tidszone. Det var fladen, der ikke havde
nogen vej til at sige det.

**Et felt i opgaveruden.** Tomt, indtil nogen sætter det: en opgave uden
klokkeslæt er det almindelige, og et felt, der åbner på 00:00, påstår, at noget
skal ske ved midnat.

**Og en fejl, der lå og ventede.** Serveren læser en dato uden en tid som "ryd
tiden". Så et gem af datoen alene tog klokkeslættet med sig — man rettede dagen og
mistede timen — og det samme gjorde hvert eneste træk i kalenderen. Ingen af
delene sagde noget.

`reschedule` siger nu tiden højt, tre måder, fordi de to første ligner hinanden i
JavaScript og derfor skal skilles ad ét sted frem for at blive forvekslet fire:

    undefined   behold den, opgaven har   — månedens ruder, hvor der ingen tid er at læse
    ''          ryd den                   — heldagsbåndet
    'HH:MM'     sæt den                   — et sted på døgnet

**Hvor på søjlen man slipper, er klokkeslættet.** Målt mod søjlens egen kasse frem
for mod siden, så det bliver rigtigt uanset hvor gitteret sidder og hvor langt der
er rullet. Rundet til kvarter: minuttet under markøren er ikke en oplysning, nogen
har — pegefingeren er bredere end et minut — og 14:07 er et tal, der ser ud som om
det blev valgt.

Prøven går hele vejen: sæt tiden, genindlæs og se at serveren tog den, ret datoen
og se at timen bliver, find opgaven på sit klokkeslæt i ugegitteret, og træk den op
i båndet igen. To ting, den lærte undervejs, står skrevet ved den: et træk over
fire hundrede pixels skal gå i skridt, ellers har browseren for få mellemstationer
til at holde gesten i live — og klokken skal være tidlig, for klokken fjorten
ligger under skærmkanten, og at måle noget dernede ruller siden væk under målet.

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

NOTES-SPEC.md

@@ -0,0 +1,437 @@
+# Notes, as verdande builds them
+
+A description of one working notes system: the data model, the syntax, the search,
+the rendering contract, the import and export formats, and — more useful than any
+of it — the decisions that look arbitrary until you know what they cost.
+
+It is written to be lifted into another program. Nothing here depends on Go,
+SQLite or Svelte except where it says so; where an answer was forced by the tool,
+that is called out so you can pick a different one on purpose rather than by
+accident.
+
+---
+
+## Read this part first: what to ask before you build
+
+**This document is not a drop-in. It describes a notes system that lives inside a
+task app with projects, roles, a trash and a search box, and about a third of its
+design is inherited from that.** Lifting it into a program with different
+surroundings without deciding which parts to keep produces something that works
+for a week and then fights you.
+
+**If you are an assistant working from this file: ask these questions and get
+answers before writing code.** Do not guess a default. Each one changes what you
+build, not just how you build it.
+
+### About the surroundings
+
+1. **Does the host app already have a place to file things** — projects, folders,
+   notebooks, tags? verdande deliberately gave notes no hierarchy of their own and
+   filed them under the projects that already existed. If your app has nothing,
+   you need an answer for where a note lives, and "a folder tree" is the expensive
+   one.
+2. **Is there more than one person?** Sharing, roles and "who wrote this" run
+   through the whole model below. Single-user changes the schema and removes about
+   half the permission surface.
+3. **Is there already a trash, and does it expire?** Notes lean on one. Without
+   it, deleting is either permanent or you are building a trash.
+4. **Is there an existing full-text index?** The search here is FTS5-shaped. On
+   Postgres it is `tsvector`, on a client-side app it is probably a scan, and the
+   ranking section below changes accordingly.
+
+### About the notes themselves
+
+5. **Markdown, rich text, or blocks?** verdande stores Markdown and renders it.
+   That decision is defended below; it is also the one that most constrains
+   everything else.
+6. **Is the first line the title, or is there a title field?** Both work. Deriving
+   it means one less thing to keep in step and one less thing a person can leave
+   blank, and it forces the rule "the first line is a heading" on the editor.
+7. **What links to what?** `#project`, `[[note]]` and task references exist here
+   because the app has projects and tasks. Yours may have none of them, or others.
+8. **Do notes carry files?** Attachments bring content-type handling, a store, an
+   authorisation path and an XSS surface. Skipping them is a legitimate answer.
+
+### About scale and language
+
+9. **How many notes, realistically?** Several choices below flip at around ten
+   thousand: the list payload, the search fallback, rendering the whole list.
+10. **Which languages?** The folding described under *Search* is Danish. Every
+    language has its own version of that problem and the generic answer (strip
+    diacritics) is wrong for several of them.
+11. **Where does the text end up besides the screen?** Search indexes, AI
+    features, exports and backups each read it. Plaintext makes all of them cheap
+    and makes a stolen backup expensive — see *What is still open*.
+
+### About integration, specifically
+
+12. **Who owns the note's identity — you or the other system?** If notes will sync
+    with something else, ids and timestamps are the whole problem, and the
+    `updated_at` rule below becomes the first thing you have to change.
+13. **Is this a read of somebody else's notes, or the store of record?** A copy
+    needs conflict rules; a store of record needs export.
+14. **What happens to a note whose project, task or link target is deleted?**
+    Answered here as "the link goes dead and the note is untouched". If your host
+    app cascades instead, say so before the first delete.
+
+---
+
+## The shape of a note
+
+```
+id           an opaque string, unique
+project_id   nullable — where it is filed, or loose
+title        derived, never set by a caller
+body         Markdown, the whole note
+created_by   nullable — survives the account being deleted
+pinned       favourite; the list puts these first
+archived_at  nullable timestamp — put away, not thrown away
+deleted_at   nullable timestamp — the trash
+created_at
+updated_at
+```
+
+### Markdown in a column
+
+Not rich text, and not a format of our own.
+
+Export was a requirement before a line was written, and **if the stored form is
+the exported form there is no conversion left to lose anything in.** A note stays
+readable by any editor on the day the program is gone. It is also what makes
+search and anything an AI does over notes cheap: both read text.
+
+The cost is real and you should know it before choosing: everything the editor can
+do has to survive a round trip through Markdown, and anything Markdown cannot say,
+the editor must not offer. There is no place to hide a feature.
+
+### The title is the first line
+
+Always, and re-derived on every save — not "when it is empty".
+
+Derived once and then left alone, a title goes stale the moment somebody rewrites
+the opening of a note, and the list ends up calling a note by a name that is
+nowhere in it. **The column is a cache of the body, not a field beside it**, and no
+caller can set it, so every caller gets the same answer.
+
+This forces one editor rule: a new note opens on its title, and the first line is
+styled as a heading. Otherwise a note whose first line is a sentence is a note
+named by its first sentence.
+
+### Archive and trash are two different bits
+
+The trash says *this was a mistake, and in thirty days it is gone*. The archive
+says *this is finished, and I do not want to read past it.*
+
+A twelve-hundred-note import is exactly the case where most notes are worth
+keeping and almost none are worth looking at. Without an archive, the list is the
+whole archive forever, and finding this week's note means reading past a decade.
+
+Both are nullable timestamps rather than booleans: *when was this put away* answers
+questions a flag cannot, and it costs the same byte.
+
+---
+
+## Filing: no hierarchy of its own
+
+A note belongs to a project, or to nobody.
+
+The reasoning is worth repeating because it is easy to talk yourself out of:
+projects already exist, are already shared, already have roles, already have a
+trash. **A second hierarchy to file things in is one too many**, and a note filed
+under a project inherits every one of those answers instead of needing its own.
+
+- A note with a project: everybody who can read the project can read the note; an
+  editor can change it.
+- A note without one: the author's, and nobody else's.
+
+Sharing a note *is* filing it in a project. There is no access list of its own —
+a second way to give somebody access is a second place to get it wrong, and the
+two would disagree the day one of them changed.
+
+---
+
+## Links: three kinds, parsed out of the text
+
+The body is the truth. Links are an index over it, rebuilt on every save.
+
+| Syntax | Means | Notes |
+|---|---|---|
+| `#project` | a project | Same characters the task quick-add parser uses, on purpose |
+| `[[a note]]` | another note, by title | The spelling every note app has settled on |
+| `/opgave/<uuid>` or `task:<uuid>` | a task | What a link pasted out of the app carries |
+
+Patterns as used here:
+
+```
+project   (?:^|\s)#([\p{L}\p{N}_-]{1,64})
+note      \[\[([^\]\n]{1,200})\]\]
+task      (?:/opgave/|task:)([0-9a-fA-F-]{36})
+```
+
+Three decisions inside that table:
+
+- **`#Firma` in a note means the same project as `#Firma` in the task box.** Not a
+  second kind of tag that happens to look alike. That is the whole of "tag a note
+  and see it in the project".
+- **The link table is torn down and rebuilt on save, not diffed.** A body is small
+  and the set is small; a diff is a second description of the same fact, and it
+  can disagree with the text. That is the one thing this must never do.
+- **The target is not a foreign key.** A link to something deleted is a fact about
+  the note. It should read as a dead link rather than vanish, and it must not
+  block the delete.
+
+The index exists so the question can be asked **backwards**: *what has been written
+about this task?* Answering that by searching every note's prose would be too slow
+to leave a panel open on.
+
+---
+
+## Search
+
+Three layers, in the order they answer.
+
+### 1. Full-text, ranked
+
+FTS5 over `title`, `body` and a folded copy, with `unicode61 remove_diacritics 2`.
+
+Ranking is bm25 with **the title weighted ten times the body**. A word in the title
+is what the note is *about*; the same word once in a long body is a mention.
+
+This matters more than it sounds. Ordering by "last touched" is invisible with ten
+notes and useless with twelve hundred imported the same evening: searching "Tesla"
+answered with a note about nginx first and the note actually called "Tesla Model Y"
+second — which reads as a search that does not work, because from where the person
+is sitting it is one.
+
+### 2. Folding, for the language you are in
+
+`remove_diacritics` does not touch `ø`, `æ` or `å` — Unicode considers them
+letters in their own right, not accented forms. So a Dane cannot find "grøn" by
+typing "gron", which is how people type when the keyboard is not theirs.
+
+The answer here is a generated column carrying a transliterated copy:
+
+```
+ø,Ø → o     æ,Æ → ae     å,Å → aa
+```
+
+indexed alongside the body and **weighted the same as the body** — otherwise a
+folded match outranks an exact one.
+
+> **Ask, do not copy.** This mapping is Danish. German wants `ü → ue`, Swedish
+> disagrees with Danish about `ä`, and Turkish has a dotless `ı` that breaks
+> naive lowercasing entirely. Get the mapping from somebody who types the
+> language.
+
+### 3. A word inside a word
+
+An index is built of tokens, and a token is whatever the tokenizer decided was a
+word. `gamerule keepInventory true` is three of them, and the middle one is
+`keepinventory` — so a search for "keep inventory" asks for two words that are
+nowhere and gets nothing, while the note sits right there.
+
+A prefix query gets half of it: `keep*` matches, `inventory*` cannot, and the two
+are ANDed, so the half that works is thrown away by the half that cannot.
+
+**This is not exotic in a notes app.** A decade of notes is full of commands,
+identifiers and file names, and every one of them is several words the index
+thinks is one.
+
+So: the index answers first; when it has nothing, the text is read, and every term
+must appear somewhere in the note, in any word. A `LIKE '%term%'` over the folded
+column covers title, body and language folding at once.
+
+What it costs: a leading `%` cannot use an index, so it scans. At twelve hundred
+notes that is a few megabytes and a millisecond or two, and it only runs when the
+fast path already came back empty — which is exactly the search that was about to
+disappoint somebody. **At a hundred thousand notes it is the wrong shape**, and the
+answer then is a trigram index, not a bigger scan.
+
+It does not rank. There is no match to rank — that is the whole situation.
+
+---
+
+## The list, and why the body is empty in it
+
+A list showing a title and ninety characters of preview must not fetch whole
+notes. Twelve hundred notes came to 3.9 MB, of which 98 % was body nobody could
+see.
+
+The important half is *how* it is trimmed: **the body is emptied, not shortened.**
+
+A field called `body` holding a *piece* of the body is a trap. The editor opens
+it, the autosave pause writes it back, and the note is now cut down to its own
+excerpt — destroyed by nothing more than having been looked at. Send `preview` as
+its own field and leave `body` empty; the client sees the empty body and fetches
+the whole note.
+
+That costs one more separation, and it is not optional:
+
+> **Which row is selected and which note is loaded are two different things.**
+
+The editor loads its text when the note's id changes. Hand it the excerpt first
+and the whole note second and the id is the same both times — so the second one
+never renders, and somebody sits looking at a note that had a title a moment ago.
+
+Highlight the row immediately from the list; give the editor the note only when it
+is whole.
+
+Rendering cost, separately: with twelve hundred rows, first paint took 2.1 s. CSS
+`content-visibility: auto` with an intrinsic-size guess took it to 0.95 s with no
+virtual list, no scroll maths, and no list that can fall out of step with itself.
+Try that before building windowing.
+
+---
+
+## The editor contract
+
+Rich text on top, Markdown underneath, and a source view that shows the file.
+
+The supported subset — deliberately small, because everything in it has to survive
+the round trip:
+
+| Block | Markdown |
+|---|---|
+| Title | `# ` |
+| Heading | `## ` |
+| Subheading | `### ` |
+| Quote | `> ` |
+| Code block | ```` ``` ```` with an optional language |
+| Bullet and numbered lists | `- `, `1. `, nested |
+
+Inline: `**bold**`, `*italic*`, `~~strikethrough~~`, `` `code` ``, `<u>underline</u>`,
+and images as `![alt](url)`.
+
+Five rules that were each learned the hard way:
+
+1. **Every line becomes exactly one block.** Markdown normally joins consecutive
+   lines into a paragraph. Here it must not: the person typed a line and expects
+   to get it back, and an editor that silently reflows what somebody wrote is an
+   editor they stop trusting.
+2. **Load on id change, never while typing.** Writing to the editor's HTML puts
+   the caret back at the start, which mid-sentence is unusable.
+3. **One definition of what a code block contains.** A copy button inside the
+   `<pre>` and a syntax highlighter reading `textContent` will disagree, and the
+   difference ends up in the file — a click on "Copy" wrote the word *Copied* into
+   the code and the next save put it on disk. Have one function that says what a
+   block holds, used by the highlighter and the Markdown serialiser both.
+4. **A note that cannot be rendered must not take the pane with it.** One note
+   arriving in an unexpected shape threw inside the editor's reactive effect, and
+   from then on *no* note would open — the previous one just stayed on screen. Put
+   a guard around the render, fall back to showing the raw text, and let the rest
+   of the pane keep working.
+5. **Escaping between tags and escaping inside an attribute are different jobs.**
+   An escaper written for text between two tags handles `&`, `<`, `>` — and not
+   quotes, because between tags they are harmless. Inside an attribute they close
+   it. `![" onerror="alert(1)](…)` is the whole exploit.
+
+---
+
+## Attachments
+
+Images pasted or dragged into a note, stored content-addressed by hash, referenced
+from the body as ordinary Markdown images.
+
+The security shape, which is the part worth copying:
+
+- **Served as `application/octet-stream` with `nosniff` by default.** Attachments
+  are the one place a user supplies content another user opens. An uploaded SVG or
+  HTML file rendered inline runs its own script on your origin with the session
+  cookie attached.
+- **One exception, as a named allowlist:** a short list of raster image types
+  served inline as their exact type — `png`, `jpeg`, `gif`, `webp`, `avif`, `heic`.
+  A note carries its pictures in the text, and served as octet-stream every one of
+  them is a broken image.
+- **The list is named one type at a time, never matched on an `image/` prefix.**
+  The prefix lets `image/svg+xml` through, and an SVG is a document that can run
+  script.
+- **The stored path is checked against the files directory again at read time.** A
+  traversal that somehow got into the database must not become one that reads
+  `/etc/passwd`.
+- **Reaching an attachment follows the note, which follows its project.** Same
+  chain as everything else. Do not let a client hand you the parent id and take it
+  on trust.
+
+---
+
+## Import and export
+
+The same format both ways: **a zip of Markdown files**, one per note, with a YAML
+front matter block.
+
+```markdown
+---
+created: 2019-04-02T10:15:00Z
+modified: 2024-11-30T21:04:00Z
+---
+
+# Møde med Anders
+
+Han vil gerne have kaffe hver uge.
+```
+
+- `created` / `created_at` / `date` and `modified` / `updated` / `updated_at` are
+  all accepted on the way in. Obsidian and Bear write this block; so should you.
+- Images travel in the zip beside the notes, and the links in the text are
+  relative — **a note and its pictures must end up in the same archive**, which
+  matters the moment an export is split into parts.
+- File names collide: two notes called "Møde" are two notes, and a zip with one
+  entry twice is a zip that loses one.
+
+Limits that a real import taught, all of them cheap to add and expensive to omit:
+
+- A ceiling on the upload, on the number of entries, and on the **unpacked** size.
+  64 MB of zip expanded to 66 GB is a normal shape for an attack.
+- A per-file limit as well as a whole-archive budget: one enormous photograph and
+  ten thousand small ones are different attacks with the same ending.
+- The entry name is never used as a path. Store by hash; the name is only a key
+  for rewriting links.
+- **Count what you skip, and say so.** A note whose name contained an ellipsis was
+  dropped silently by a filter looking for `..` — one out of 1141, found only by
+  counting at both ends.
+
+### Timestamps on the way in
+
+An importer needs to write `created_at` and `updated_at` from the file, and the
+normal save path must refuse to let it.
+
+`updated_at` means *when did this program last write this note*. Let any caller set
+it and the column means whatever the last writer felt like. Give the importer its
+own narrow entry point instead, and say in the comment why it exists.
+
+Without those dates, a move of twelve hundred notes is a pile that was all written
+the same evening — and the order they were written in is half of what an archive
+is.
+
+---
+
+## What is still open here
+
+Written down because a specification that only lists what works is a specification
+that lies by omission.
+
+- **Note bodies are plaintext at rest.** They hold API keys and passwords, and
+  they are in every backup anybody can download. Encrypting them is bigger than it
+  sounds: the body is in the full-text index and the folded column is generated
+  from it, so both are a second plaintext copy in the same database. Encrypt and
+  both have to go, and search has to be rewritten to decrypt in application code —
+  fine at a thousand notes, a full scan per keystroke at ten thousand, at which
+  point the answer is a keyed index (an HMAC per word).
+- **Import never merges.** Every run creates new notes. Say so out loud in the UI.
+- **There is no sync.** Export and the API are the way out.
+
+---
+
+## A short list of the traps, for the person in a hurry
+
+1. A `body` field holding an excerpt will be saved over the real one.
+2. Selected row and loaded note are two different pieces of state.
+3. The title must be re-derived on every save or it goes stale.
+4. Diacritic stripping is not folding, and folding is language-specific.
+5. A tokenizer cannot see a word inside a word; decide what you do about it.
+6. An attachment served inline is a script on your origin unless you allowlist by
+   exact type and send `nosniff`.
+7. Escaping for text and escaping for attributes are different functions.
+8. One render failure must not be allowed to freeze the whole pane.
+9. An unpacked-size limit is not optional on an archive import.
+10. Let the importer set timestamps; let nobody else.

docs/openapi.yaml

@@ -2049,6 +2049,36 @@ paths:
         "404": { $ref: "#/components/responses/NotFound" }
         "422": { $ref: "#/components/responses/Validation" }
 
+  /api/v1/projects/{projectID}/sections/reorder:
+    parameters:
+      - { name: projectID, in: path, required: true, schema: { type: string } }
+    post:
+      tags: [projects]
+      summary: Set the order the project's sections appear in. Editors and owners.
+      description: |
+        The whole list at once, for the same reasons as `/projects/reorder`: a
+        project has a handful of sections, so sending the order you want is
+        simpler than midpoints and cannot land half-applied.
+
+        Ids belonging to another project are skipped rather than refused.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [ids]
+              properties:
+                ids:
+                  type: array
+                  maxItems: 500
+                  items: { type: string }
+                  description: Section ids, top to bottom.
+      responses:
+        "204": { description: Reordered. }
+        "404": { $ref: "#/components/responses/NotFound" }
+        "422": { $ref: "#/components/responses/Validation" }
+
   /api/v1/sections/{sectionID}:
     parameters:
       - { name: sectionID, in: path, required: true, schema: { type: string } }

internal/httpapi/caldav_handlers.go

@@ -231,6 +231,33 @@ func (s *Server) handleCalDAVPut(w http.ResponseWriter, r *http.Request) {
 
 	existing, getErr := s.db.GetTask(r.Context(), taskID, user.ID)
 	if getErr == nil {
+		// The task decides, not the URL.
+		//
+		// The check above is about the project the *client named*, and a client
+		// names both halves of this address. Asking the project for permission and
+		// then taking the task id from the same string ties nothing together: a
+		// viewer on a shared project could name a project of their own — the Inbox,
+		// which everybody owns and may edit — and put the shared task's id in the
+		// filename. The project check passed on the Inbox and the write landed on a
+		// task they may only read.
+		//
+		// GetTask does not close it either: it answers "may this person see it",
+		// and a viewer may. `CanEdit` is the question, and it is the same one
+		// handleUpdateTask asks — the API door has always asked it.
+		role, err := store.TaskRole(r.Context(), s.db, taskID, user.ID)
+		if err != nil || !role.CanEdit() {
+			http.Error(w, "forbidden", http.StatusForbidden)
+			return
+		}
+		// And it has to live where the address says it does. Without this an editor
+		// on two projects can reach either through the other's URL — nothing is
+		// escalated by that on its own, but a URL allowed to lie about where a
+		// resource lives is how the case above got in.
+		if existing.ProjectID != projectID {
+			http.NotFound(w, r)
+			return
+		}
+
 		// An update. Only the fields a task client can express are touched;
 		// everything else the task carries stays as it is.
 		content := parsed.Summary

internal/httpapi/integrations_test.go

@@ -250,6 +250,116 @@ func (ts *testServer) apiToken(t *testing.T, userID string) string {
 	return token
 }
 
+// The promise of sharing has to hold at every door, not just the API's.
+//
+// TestViewerCannotMutateThroughTheAPI asserts a viewer cannot write, and it
+// asserts it against /api/v1. CalDAV is a second door into the same tasks, and it
+// authorised differently: it checked the caller's standing in the project *named
+// in the URL* and then took the task id from the URL as well. Nothing tied the
+// two together.
+//
+// So a viewer on somebody else's project could name a project of their own —
+// their Inbox, which everybody owns and everybody may edit — and put the other
+// project's task id in the filename. The project check passed on the Inbox, and
+// the write landed on a task in a project they may only read.
+func TestAViewerCannotWriteThroughCalDAV(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+	ts.newUser(t, "[email protected]", "Viewer")
+
+	_, project := ts.do(t, "POST", "/api/v1/projects", map[string]any{"name": "Delt"})
+	projectID := project["id"].(string)
+	_, task := ts.do(t, "POST", "/api/v1/tasks", map[string]any{
+		"content": "en opgave", "project_id": projectID,
+	})
+	taskID := task["id"].(string)
+
+	if resp, body := ts.do(t, "POST", "/api/v1/projects/"+projectID+"/invites", map[string]any{
+		"email": "[email protected]", "role": "viewer",
+	}); resp.StatusCode != http.StatusOK {
+		t.Fatalf("invite: %d %v", resp.StatusCode, body)
+	}
+
+	them, err := ts.db.UserByEmail(t.Context(), "[email protected]")
+	if err != nil {
+		t.Fatal(err)
+	}
+	token := ts.apiToken(t, them.ID)
+
+	// Their own Inbox: a project they own and may edit, and the one every account
+	// has. It is what makes the URL check pass.
+	projects, err := ts.db.ListProjects(t.Context(), them.ID, false)
+	if err != nil {
+		t.Fatal(err)
+	}
+	var inbox string
+	for _, p := range projects {
+		if p.IsInbox {
+			inbox = p.ID
+		}
+	}
+	if inbox == "" {
+		t.Fatal("the viewer has no inbox")
+	}
+
+	vtodo := "BEGIN:VCALENDAR\r\nVERSION:2.0\r\nBEGIN:VTODO\r\nUID:" + taskID +
+		"\r\nSUMMARY:kapret\r\nSTATUS:COMPLETED\r\nEND:VTODO\r\nEND:VCALENDAR\r\n"
+
+	resp := ts.dav(t, "PUT", "/caldav/"+them.ID+"/"+inbox+"/"+taskID+".ics",
+		token, them.Email, vtodo)
+	if resp.StatusCode < 400 {
+		t.Errorf("a viewer wrote through CalDAV: status %d", resp.StatusCode)
+	}
+
+	// And the task is as its owner left it. The status alone is not the assertion:
+	// the question is whether anything moved.
+	_, after := ts.do(t, "GET", "/api/v1/tasks/"+taskID, nil)
+	if after["content"] != "en opgave" {
+		t.Errorf("the task was renamed by a viewer: %v", after["content"])
+	}
+	if after["completed"] != false {
+		t.Error("the task was completed by a viewer")
+	}
+}
+
+// A task may only be addressed under the project it is actually in.
+//
+// The same hole seen from the other side: an editor on two projects could reach a
+// task in one of them through the other's URL. Nothing is escalated by it — they
+// may edit both — but it is the check that was missing, and a URL that lies about
+// where a resource lives is how the viewer case got in.
+func TestCalDAVRefusesATaskFromAnotherProject(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	user, err := ts.db.UserByEmail(t.Context(), "[email protected]")
+	if err != nil {
+		t.Fatal(err)
+	}
+	token := ts.apiToken(t, user.ID)
+
+	_, one := ts.do(t, "POST", "/api/v1/projects", map[string]any{"name": "Et"})
+	_, two := ts.do(t, "POST", "/api/v1/projects", map[string]any{"name": "To"})
+	_, task := ts.do(t, "POST", "/api/v1/tasks", map[string]any{
+		"content": "hører til Et", "project_id": one["id"].(string),
+	})
+	taskID := task["id"].(string)
+
+	vtodo := "BEGIN:VCALENDAR\r\nVERSION:2.0\r\nBEGIN:VTODO\r\nUID:" + taskID +
+		"\r\nSUMMARY:flyttet i smug\r\nEND:VTODO\r\nEND:VCALENDAR\r\n"
+
+	resp := ts.dav(t, "PUT", "/caldav/"+user.ID+"/"+two["id"].(string)+"/"+taskID+".ics",
+		token, user.Email, vtodo)
+	if resp.StatusCode < 400 {
+		t.Errorf("a task was written under the wrong project: status %d", resp.StatusCode)
+	}
+
+	_, after := ts.do(t, "GET", "/api/v1/tasks/"+taskID, nil)
+	if after["content"] != "hører til Et" {
+		t.Errorf("the task changed: %v", after["content"])
+	}
+}
+
 func TestCalDAVRequiresCredentials(t *testing.T) {
 	ts := newTestServer(t)
 	ts.bootstrap(t)
@@ -562,6 +672,48 @@ func TestAIKeyIsNeverReturned(t *testing.T) {
 	}
 }
 
+// Connecting something else must not delete the AI provider.
+//
+// Reported from use as "the AI settings are not saved": they were saved, and then
+// taken. `user_settings` had `user_id` as its whole primary key, and the upsert
+// renamed `scope` on conflict — so the `ai`, `gmail` and `calendar` scopes shared
+// one row and each write deleted the other two. Every write returned 204.
+//
+// Through the handlers, because that is where it was seen. The shape is asserted
+// against the store as well: see TestOnePersonCanHaveSettingsForMoreThanOneThing.
+func TestTheAIProviderSurvivesConnectingSomethingElse(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	ts.do(t, "PUT", "/api/v1/ai/settings", map[string]any{
+		"provider": "anthropic", "model": "claude-sonnet-5", "api_key": "sk-hemmelig-nøgle",
+	})
+
+	user, err := ts.db.UserByEmail(t.Context(), "[email protected]")
+	if err != nil {
+		t.Fatal(err)
+	}
+	// What the calendar and the mailbox handlers do when a handshake starts: write
+	// their own scope for the same person.
+	for _, scope := range []string{"calendar", "gmail"} {
+		if err := ts.db.SetUserSettings(t.Context(), user.ID, scope,
+			map[string]any{"pkce_state": "s-" + scope}); err != nil {
+			t.Fatalf("save %s: %v", scope, err)
+		}
+	}
+
+	_, body := ts.do(t, "GET", "/api/v1/ai/settings", nil)
+	if body["provider"] != "anthropic" {
+		t.Errorf("the provider is %v after connecting two other things, want anthropic", body["provider"])
+	}
+	if body["model"] != "claude-sonnet-5" {
+		t.Errorf("the model is %v", body["model"])
+	}
+	if body["has_key"] != true {
+		t.Error("the key was taken with it")
+	}
+}
+
 func TestGmailSettings(t *testing.T) {
 	ts := newTestServer(t)
 	ts.bootstrap(t)

internal/httpapi/projects_handlers.go

@@ -356,6 +356,34 @@ func (s *Server) handleCreateSection(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusCreated, sectionJSON{sec.ID, sec.ProjectID, sec.Name, sec.SortOrder})
 }
 
+// handleReorderSections sets the order of the sections inside one project.
+//
+// Under /projects/{projectID}/ rather than beside the other section routes, which
+// hang off a section id: the thing being changed here is the project's list, not
+// any one section in it. That also puts it behind the same project permission
+// check as everything else in this subtree, instead of resolving a section to its
+// project one id at a time and hoping they all named the same one.
+func (s *Server) handleReorderSections(w http.ResponseWriter, r *http.Request) {
+	var req reorderProjectsRequest
+	if err := decodeJSON(w, r, &req); err != nil {
+		return
+	}
+	// The same ceiling as the projects list, and a bound on the transaction rather
+	// than an opinion about how many sections a project may have.
+	if len(req.IDs) > 500 {
+		writeFieldErrors(w, map[string]string{"ids": "at most 500 at a time"})
+		return
+	}
+
+	projectID := chi.URLParam(r, "projectID")
+	if err := s.db.ReorderSections(r.Context(), projectID, req.IDs); err != nil {
+		s.internal(w, r, "reorder sections", err)
+		return
+	}
+	s.activity(r, projectID, "", "section.updated", nil)
+	w.WriteHeader(http.StatusNoContent)
+}
+
 // sectionAccess resolves a section to its project and checks the caller may edit
 // it. Sections have no permissions of their own — they belong to a project, and
 // that is where access is decided.

internal/httpapi/projects_test.go

@@ -327,6 +327,71 @@ func TestAProjectCanHaveSeveralSections(t *testing.T) {
 	}
 }
 
+// Sections can be dragged into another order, and the order is the project's.
+//
+// The list is what a project's plan *is* — "Planlægning" before "I gang" is the
+// order the work happens in — and until this endpoint existed the only way to
+// change it was to delete a section and make it again, which moves its tasks to
+// the unsectioned area on the way past.
+func TestSectionsCanBeReordered(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	_, project := ts.do(t, "POST", "/api/v1/projects", map[string]any{"name": "Ombygning"})
+	id := project["id"].(string)
+
+	ids := map[string]string{}
+	names := []string{"Planlægning", "I gang", "Til gennemsyn"}
+	for _, name := range names {
+		_, body := ts.do(t, "POST", "/api/v1/projects/"+id+"/sections", map[string]any{"name": name})
+		ids[name] = body["id"].(string)
+	}
+
+	want := []string{"Til gennemsyn", "Planlægning", "I gang"}
+	order := make([]string, len(want))
+	for i, name := range want {
+		order[i] = ids[name]
+	}
+
+	resp, body := ts.do(t, "POST", "/api/v1/projects/"+id+"/sections/reorder",
+		map[string]any{"ids": order})
+	if resp.StatusCode != http.StatusNoContent {
+		t.Fatalf("reorder: status %d, body %v", resp.StatusCode, body)
+	}
+
+	_, listed := ts.do(t, "GET", "/api/v1/projects/"+id+"/sections", nil)
+	got, _ := listed["sections"].([]any)
+	if len(got) != len(want) {
+		t.Fatalf("the project has %d sections, want %d", len(got), len(want))
+	}
+	for i, raw := range got {
+		if name := raw.(map[string]any)["name"]; name != want[i] {
+			t.Errorf("section %d is %v, want %q", i, name, want[i])
+		}
+	}
+
+	// A section belonging to somebody else's project is not moved by naming it
+	// here. The ids in the body are not checked one by one — the WHERE clause is
+	// what refuses them — so this is the assertion that it actually does.
+	_, other := ts.do(t, "POST", "/api/v1/projects", map[string]any{"name": "Sommerhus"})
+	otherID := other["id"].(string)
+	_, foreign := ts.do(t, "POST", "/api/v1/projects/"+otherID+"/sections",
+		map[string]any{"name": "Havearbejde"})
+	foreignID := foreign["id"].(string)
+
+	resp, _ = ts.do(t, "POST", "/api/v1/projects/"+id+"/sections/reorder",
+		map[string]any{"ids": []string{foreignID}})
+	if resp.StatusCode != http.StatusNoContent {
+		t.Fatalf("reorder with a foreign id: status %d", resp.StatusCode)
+	}
+
+	_, stillThere := ts.do(t, "GET", "/api/v1/projects/"+otherID+"/sections", nil)
+	elsewhere, _ := stillThere["sections"].([]any)
+	if len(elsewhere) != 1 || elsewhere[0].(map[string]any)["name"] != "Havearbejde" {
+		t.Errorf("the other project's section did not survive: %v", elsewhere)
+	}
+}
+
 // A project can be created straight into a group.
 //
 // `group_id` was declared on the request type, documented on it, and applied by

internal/httpapi/server.go

@@ -63,6 +63,7 @@ type Server struct {
 	// the endpoints that check a secret are limited separately and more tightly
 	// than the rest of the API.
 	loginLimiter *limiter
+	mailLimiter  *limiter
 	resetLimiter *limiter
 	// Second factors are counted against the *account*, not the address. An
 	// address bucket is defeated by anybody with more than one address, which is
@@ -85,6 +86,11 @@ func New(cfg *config.Config, db *store.DB, log *slog.Logger, web fs.FS) *Server
 		mail:         mail.New(cfg.SMTP, cfg.BaseURL, log),
 		hub:          realtime.NewHub(log),
 		loginLimiter: newLimiter(10, 15*time.Minute),
+		// Generous on purpose: the caller is the mail server, one address delivering
+		// everything, and a personal instance gets a handful of forwarded mails a
+		// day. Sixty a minute never touches real delivery and still puts a ceiling
+		// on the one public write path that has none.
+		mailLimiter:  newLimiter(60, time.Minute),
 		resetLimiter: newLimiter(5, time.Hour),
 		// Tighter than the password bucket, and for a whole hour. Somebody typing
 		// their own code gets it right on the first or second try; ten in an hour is
@@ -122,7 +128,15 @@ func New(cfg *config.Config, db *store.DB, log *slog.Logger, web fs.FS) *Server
 
 	// Inbound mail. Delivered by the mail server rather than by a browser, and
 	// authenticated by the token in the recipient address.
-	r.Post("/inbound/mail", s.handleInboundMail)
+	//
+	// Rate limited for the same reason the beacon is: it is reachable by anybody
+	// who can route to this instance. It is the weaker case of the two — the
+	// beacon writes a row for a stranger, this one writes nothing without a
+	// 256-bit address it has to already know — but an address is shared with mail
+	// servers and printed on a settings page, and once it is known there was no
+	// ceiling at all on what could be made with it.
+	r.Method(http.MethodPost, "/inbound/mail",
+		s.rateLimit(s.mailLimiter, http.HandlerFunc(s.handleInboundMail)))
 
 	// MCP with the token in the query string, for clients that cannot send a
 	// header. Claude's custom-connector dialog takes a URL and nothing else, so
@@ -426,6 +440,7 @@ func New(cfg *config.Config, db *store.DB, log *slog.Logger, web fs.FS) *Server
 					r.Group(func(r chi.Router) {
 						r.Use(s.requireProject(store.RoleEditor))
 						r.Post("/sections", s.handleCreateSection)
+						r.Post("/sections/reorder", s.handleReorderSections)
 					})
 
 					r.Group(func(r chi.Router) {

internal/httpapi/tasks_test.go

@@ -6,6 +6,7 @@ import (
 	"io"
 	"mime/multipart"
 	"net/http"
+	"net/url"
 	"strings"
 	"testing"
 	"time"
@@ -1777,3 +1778,42 @@ func TestQuickAddSectionIDIsCheckedAgainstTheProject(t *testing.T) {
 		t.Errorf("content = %v", moved["content"])
 	}
 }
+
+// A word inside a word, on the task side.
+//
+// The notes search grew this first — a note holding `keepInventory` could not be
+// found by typing "keep inventory" — and a task is the same sentence with a
+// different table behind it. `SpeedAdmin` is one token, so "speed admin" asks for
+// two words that are nowhere.
+//
+// Having it in one of the two searches would be worse than having it in neither:
+// "it finds it in my notes but not in my tasks" is the next report.
+func TestATaskIsFoundByAWordInsideAWord(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	ts.do(t, "POST", "/api/v1/tasks", map[string]any{
+		"content": "Opret kodeord til Kulturskolen (SpeedAdmin)",
+	})
+	ts.do(t, "POST", "/api/v1/tasks", map[string]any{"content": "Køb kaffe"})
+
+	for _, tc := range []struct {
+		query string
+		want  int
+	}{
+		{"speed admin", 1},
+		{"admin", 1},
+		{"speedadmin", 1},
+		{"kulturskolen", 1},
+		{"vandhane", 0},
+	} {
+		resp, body := ts.do(t, "GET", "/api/v1/search?q="+url.QueryEscape(tc.query), nil)
+		if resp.StatusCode != http.StatusOK {
+			t.Fatalf("%q: status %d", tc.query, resp.StatusCode)
+		}
+		tasks, _ := body["tasks"].([]any)
+		if len(tasks) != tc.want {
+			t.Errorf("%q found %d tasks, want %d", tc.query, len(tasks), tc.want)
+		}
+	}
+}

internal/push/push.go

@@ -32,6 +32,8 @@ import (
 	"net/url"
 	"strings"
 	"time"
+
+	"github.com/kristianwind/verdande/internal/safedial"
 )
 
 type Subscription struct {
@@ -101,7 +103,19 @@ func Send(ctx context.Context, sub Subscription, payload Payload, vapid VAPID) e
 	req.Header.Set("Urgency", "normal")
 	req.Header.Set("Authorization", "vapid t="+token+", k="+vapid.Public)
 
-	resp, err := (&http.Client{Timeout: 15 * time.Second}).Do(req)
+	// safedial, not a plain client. The endpoint comes from the browser's
+	// subscription, which is to say from whoever is signed in, and this server
+	// POSTs to it on a schedule they choose — set a reminder a minute out and the
+	// job goes again every minute.
+	//
+	// The subscribe handler already refuses a private address, and that check is
+	// not enough on its own: it runs on the URL as written, and a name it approves
+	// can answer 127.0.0.1 the next time it is looked up. safedial checks the
+	// *resolved* address at connect time, which is the only moment the address
+	// that will actually be used is known — and it checks every redirect hop the
+	// same way. The parse-time check stays, because it says no while somebody is
+	// looking at the screen.
+	resp, err := safedial.Client(15 * time.Second).Do(req)
 	if err != nil {
 		return err
 	}

internal/push/push_test.go

@@ -0,0 +1,66 @@
+package push
+
+import (
+	"context"
+	"crypto/ecdh"
+	"crypto/rand"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+)
+
+// A subscription must not be able to point the server at its own network.
+//
+// The endpoint is whatever the browser handed over, which is to say whatever the
+// person signed in handed over, and this server POSTs to it on a schedule they
+// choose. The subscribe handler refuses a private address when it is written
+// down — and that check runs on the URL as written, so a name it approves can
+// answer 127.0.0.1 the next time it is looked up. This is the other half: the
+// address that will actually be dialled, checked at the moment of dialling.
+func TestSendRefusesToReachInside(t *testing.T) {
+	reached := false
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		reached = true
+		w.WriteHeader(http.StatusCreated)
+	}))
+	defer srv.Close()
+	// httptest listens on 127.0.0.1, which is exactly the destination in question.
+	if !strings.Contains(srv.URL, "127.0.0.1") {
+		t.Skipf("the test server is not on loopback: %s", srv.URL)
+	}
+
+	err := Send(context.Background(), testSubscription(t, srv.URL), Payload{Title: "hej"}, testVAPID(t))
+	if err == nil {
+		t.Fatal("Send reached a loopback address without complaining")
+	}
+	if reached {
+		t.Error("the request arrived: the wall let it through and only the answer failed")
+	}
+}
+
+func testSubscription(t *testing.T, endpoint string) Subscription {
+	t.Helper()
+	key, err := ecdh.P256().GenerateKey(rand.Reader)
+	if err != nil {
+		t.Fatal(err)
+	}
+	auth := make([]byte, 16)
+	if _, err := rand.Read(auth); err != nil {
+		t.Fatal(err)
+	}
+	return Subscription{
+		Endpoint: endpoint,
+		P256dh:   b64.EncodeToString(key.PublicKey().Bytes()),
+		Auth:     b64.EncodeToString(auth),
+	}
+}
+
+func testVAPID(t *testing.T) VAPID {
+	t.Helper()
+	pub, priv, err := GenerateVAPIDKeys()
+	if err != nil {
+		t.Fatal(err)
+	}
+	return VAPID{Public: pub, Private: priv, Subject: "mailto:[email protected]"}
+}

internal/store/mailboxes_test.go

@@ -195,10 +195,14 @@ func TestAGmailConnectedBeforeTheMoveSurvivesIt(t *testing.T) {
 	}
 	values := `{"refresh_token":"` + sealed + `","trigger":"label","label":"Verdande",` +
 		`"email":"[email protected]","seen":["abc","def"],"project_id":"p-1"}`
+	// The conflict target is (user_id, scope) since 0025 — before that the table
+	// held one row per person and the upsert renamed its scope, which is the bug
+	// 0025 exists to undo. Nothing conflicts here; the clause only has to be legal
+	// against the schema this test is running on.
 	if _, err := db.ExecContext(context.Background(), `
 		INSERT INTO user_settings (user_id, scope, values_json, updated_at)
 		VALUES (?, 'gmail', ?, 0)
-		ON CONFLICT (user_id) DO UPDATE SET scope = 'gmail', values_json = excluded.values_json`,
+		ON CONFLICT (user_id, scope) DO UPDATE SET values_json = excluded.values_json`,
 		userID, values); err != nil {
 		t.Fatal(err)
 	}

internal/store/migrations/0025_user_settings_per_scope.sql

@@ -0,0 +1,37 @@
+-- One row per person *and scope*, which is what the table always meant.
+--
+-- `user_settings` was created with `user_id` as its whole primary key, and its
+-- upsert rewrote `scope` on conflict. So a person had exactly one settings row,
+-- and whichever scope was written last was the only one that survived: saving an
+-- AI provider deleted the Gmail connection, and connecting a calendar deleted the
+-- AI provider. Nothing reported it — the write succeeded, and the loss was in the
+-- row it landed on.
+--
+-- This was seen coming twice. Migration 0011 gave the instance's settings their
+-- own table partly for this reason and wrote the warning down in as many words;
+-- 0014 moved mailboxes out and said the warning "was nearly walked into a second
+-- time". The third time was the calendar, which added a `calendar` scope beside
+-- `ai` and `gmail` — and walked in.
+--
+-- The lesson worth keeping: a warning in a migration is read by whoever is editing
+-- *that* migration, and nobody was. The shape is fixed here so there is nothing
+-- left to warn about.
+--
+-- SQLite cannot change a primary key in place, so the table is rebuilt. Existing
+-- rows are copied as they are: each person has at most one, and it holds whatever
+-- scope won last. What the earlier writes lost is already gone and cannot be
+-- recovered here — the values were overwritten, not orphaned.
+CREATE TABLE user_settings_new (
+    user_id     TEXT NOT NULL REFERENCES users (id) ON DELETE CASCADE,
+    scope       TEXT NOT NULL DEFAULT 'general',
+    values_json TEXT NOT NULL DEFAULT '{}',
+    updated_at  INTEGER NOT NULL,
+    PRIMARY KEY (user_id, scope)
+);
+
+INSERT INTO user_settings_new (user_id, scope, values_json, updated_at)
+SELECT user_id, scope, values_json, updated_at FROM user_settings;
+
+DROP TABLE user_settings;
+
+ALTER TABLE user_settings_new RENAME TO user_settings;

internal/store/notes.go

@@ -289,12 +289,73 @@ func (db *DB) SearchNotes(ctx context.Context, query string, limit int) ([]Note,
 	//
 	// Joined rather than `rowid IN (…)`: the rank belongs to the match, and a
 	// subquery throws it away.
-	return db.notesJoin(ctx, noteColumnsQualified, `
+	found, err := db.notesJoin(ctx, noteColumnsQualified, `
 		JOIN notes_fts ON notes_fts.rowid = notes.rowid
 		WHERE notes.deleted_at IS NULL
 		  AND notes_fts MATCH ?
 		ORDER BY bm25(notes_fts, 10.0, 1.0, 1.0)
 		LIMIT ?`, expr, limit)
+	if err != nil || len(found) > 0 {
+		return found, err
+	}
+	return db.searchNotesInside(ctx, query, limit)
+}
+
+// searchNotesInside finds a word that lives *inside* another word.
+//
+// An index is built of tokens, and a token is what a tokenizer decided was a
+// word. `gamerule keepInventory true` is three of them, and the middle one is
+// `keepinventory` — so "keep inventory" asks for two words that are nowhere, and
+// gets nothing. Reported as "søgning har ikke det store held", which from where
+// the person is sitting is exactly what it is: the note is right there, and the
+// search says there is nothing.
+//
+// A prefix query gets half of it. `keep*` does match `keepinventory`; `inventory*`
+// cannot, because it is not a prefix of anything — and the two are joined with AND,
+// so the half that works is thrown away by the half that cannot.
+//
+// This is not an exotic case in a notes app. A decade of notes is full of
+// commands, identifiers and file names, and every one of them is several words the
+// index thinks is one: `keepInventory`, `VACUUM INTO`, `apple-notes-til-markdown`.
+//
+// So: the index answers first, and when it has nothing, the text is read. Every
+// term has to appear somewhere in the note, anywhere, in any word.
+//
+// # What it costs, and when to stop doing it this way
+//
+// A LIKE with a leading % cannot use an index; this reads every note. At twelve
+// hundred notes that is four megabytes and a millisecond or two, and it only runs
+// when the fast path already came back empty — which is the search that was about
+// to disappoint somebody. At a hundred thousand notes it would be the wrong shape,
+// and the answer then is an FTS5 `trigram` index, not a bigger scan.
+//
+// It does not rank. bm25 needs a match to rank, and there is no match here — that
+// is the whole situation. The rows are the most recently touched first, and the
+// set is small, because the index already said there was nothing in it.
+func (db *DB) searchNotesInside(ctx context.Context, query string, limit int) ([]Note, error) {
+	terms := SearchTerms(query)
+	if len(terms) == 0 {
+		return nil, nil
+	}
+
+	// `fold` is `title || ' ' || body` with the Danish letters transliterated, so
+	// one column covers the title, the body and "gron" for "grøn" at once. LIKE is
+	// case-insensitive for ASCII in SQLite, which is what makes `keepInventory`
+	// answer to "inventory".
+	//
+	// The needle is safe to interpolate into a pattern because `tokenize` splits on
+	// everything that is not a letter or a digit: a term cannot contain % or _, so
+	// there is no wildcard for somebody to smuggle in. It is still a bound
+	// parameter — that is about SQL, and this is about LIKE.
+	where := "WHERE deleted_at IS NULL"
+	args := make([]any, 0, len(terms)+1)
+	for _, term := range terms {
+		where += " AND fold LIKE ?"
+		args = append(args, "%"+FoldDanish(term)+"%")
+	}
+	args = append(args, limit)
+
+	return db.notesWhere(ctx, where+" ORDER BY updated_at DESC LIMIT ?", args...)
 }
 
 // SetNoteTimes writes the dates a note had somewhere else.

internal/store/notes_test.go

@@ -369,3 +369,67 @@ func TestSearchAnswersWithTheBestMatchFirst(t *testing.T) {
 		t.Errorf("øverst stod %q; den note, der hedder det, man søgte efter, skal stå først", found[0].Title)
 	}
 }
+
+// A word inside a word.
+//
+// Reported as "søgning har ikke det store held": a note holding
+// `gamerule keepInventory true` could not be found by typing "keep inventory".
+// The index is built of tokens, and `keepInventory` is one token — so the two
+// words are nowhere, and the search says there is nothing while the note is right
+// there.
+//
+// A decade of notes is full of these: commands, identifiers, file names. Every one
+// of them is several words the index thinks is one.
+func TestAWordInsideAWordIsStillFound(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	if err := db.SaveNote(ctx, &Note{
+		CreatedBy: userID,
+		Body:      "Minecraft Bedrock\n\ngamerule keepInventory true",
+	}); err != nil {
+		t.Fatal(err)
+	}
+	// A second note, so a fallback that simply returns everything would be caught.
+	if err := db.SaveNote(ctx, &Note{
+		CreatedBy: userID,
+		Body:      "Indkøb\n\nKaffe og filtre",
+	}); err != nil {
+		t.Fatal(err)
+	}
+
+	for _, q := range []string{
+		"keep inventory", // the two words, which is how somebody looks for it
+		"inventory",      // the tail on its own — no prefix query can reach this
+		"keepinventory",  // written as one, which the index does hold
+		"KEEP INVENTORY", // and case is not a question anybody is asking
+		"vacuum",         // not in either note
+	} {
+		found, err := db.SearchNotes(ctx, q, 10)
+		if err != nil {
+			t.Fatalf("%q: %v", q, err)
+		}
+		want := 1
+		if q == "vacuum" {
+			want = 0
+		}
+		if len(found) != want {
+			t.Errorf("%q found %d notes, want %d", q, len(found), want)
+			continue
+		}
+		if want == 1 && found[0].Title != "Minecraft Bedrock" {
+			t.Errorf("%q found %q", q, found[0].Title)
+		}
+	}
+
+	// The fast path is still the fast path: a word the index does hold must not be
+	// answered by the scan, or the ranking that was built for twelve hundred notes
+	// is quietly gone.
+	found, err := db.SearchNotes(ctx, "Bedrock", 10)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if len(found) != 1 {
+		t.Fatalf("an ordinary word found %d notes", len(found))
+	}
+}

internal/store/notifications.go

@@ -391,11 +391,15 @@ func (db *DB) SetUserSettings(ctx context.Context, userID, scope string, values
 	if err != nil {
 		return err
 	}
+	// On (user_id, scope), which is the key since 0025. It used to be on `user_id`
+	// alone and set `scope = excluded.scope` — so writing one scope did not add a
+	// row beside the others, it took theirs and renamed it. The `ai`, `gmail` and
+	// `calendar` settings each deleted the other two, and the write reported
+	// success every time.
 	_, err = db.ExecContext(ctx, `
 		INSERT INTO user_settings (user_id, scope, values_json, updated_at)
 		VALUES (?, ?, ?, ?)
-		ON CONFLICT (user_id) DO UPDATE SET
+		ON CONFLICT (user_id, scope) DO UPDATE SET
-		    scope = excluded.scope,
 		    values_json = excluded.values_json,
 		    updated_at = excluded.updated_at`,
 		userID, scope, string(raw), time.Now().Unix())

internal/store/projects.go

@@ -646,6 +646,35 @@ func (db *DB) ReorderProjects(ctx context.Context, userID string, ids []string)
 	})
 }
 
+// ReorderSections writes the order of one project's sections, top to bottom.
+//
+// The whole list at once, the same as ReorderProjects and for the same reasons: a
+// project has a handful of sections, so writing 0, 1, 2 … is one small
+// transaction that cannot run out of precision, and a list is impossible to get
+// into the half-ordered state a sequence of individual moves leaves behind when
+// one of them fails.
+//
+// Scoped to the project rather than to a user. A section has no owner of its own —
+// it belongs to a project, and whether the caller may rearrange it is a question
+// about that project, which the handler has already asked. Ids belonging to some
+// other project are skipped by the WHERE clause rather than refused, so a stale
+// list from a client that has just moved a section elsewhere cannot rearrange a
+// project the caller was never looking at.
+func (db *DB) ReorderSections(ctx context.Context, projectID string, ids []string) error {
+	return db.Tx(ctx, func(tx *sql.Tx) error {
+		now := time.Now().Unix()
+		for i, id := range ids {
+			if _, err := tx.ExecContext(ctx,
+				`UPDATE sections SET sort_order = ?, updated_at = ?
+				 WHERE id = ? AND project_id = ? AND deleted_at IS NULL`,
+				float64(i), now, id, projectID); err != nil {
+				return err
+			}
+		}
+		return nil
+	})
+}
+
 // SectionByName resolves a "/name" from quick add within one project.
 //
 // Case-insensitive, and scoped to the project the task is landing in — a section

internal/store/search.go

@@ -90,6 +90,20 @@ func MatchExprOver(query string, columns ...string) string {
 	return b.String()
 }
 
+// SearchTerms is the words a query asks about, capped the same way the MATCH
+// expression is.
+//
+// Exported because two searches need the same list: the FTS expression is built
+// from it, and so is the substring arm that finds a word living inside another
+// word. Two tokenizers would be two answers to "what did they type".
+func SearchTerms(query string) []string {
+	terms := tokenize(query)
+	if len(terms) > maxSearchTerms {
+		terms = terms[:maxSearchTerms]
+	}
+	return terms
+}
+
 // tokenize splits on everything that is not a letter or a digit. Splitting on
 // punctuation rather than whitespace alone means "q3/2026" searches for "q3" and
 // "2026" instead of for a term FTS5's own tokenizer would never have indexed.

internal/store/secrets_test.go

@@ -124,3 +124,156 @@ func sealedStore(t *testing.T) (*DB, string) {
 	}
 	return db, user.ID
 }
+
+// Three integrations, one person, and none of them may delete the others.
+//
+// `user_settings` had `user_id` as its whole primary key and an upsert that
+// rewrote `scope` on conflict, so every person had exactly one settings row and
+// the last write won the lot: saving an AI provider deleted the Gmail connection,
+// and connecting a calendar deleted the AI provider. The write reported success
+// each time, which is why it was reported as "the AI settings are not saved"
+// rather than as "connecting the calendar deleted them".
+//
+// Written against the store rather than the handlers, because the shape was the
+// bug: every caller was correct on its own.
+func TestOnePersonCanHaveSettingsForMoreThanOneThing(t *testing.T) {
+	db, userID := sealedStore(t)
+	ctx := context.Background()
+
+	want := map[string]map[string]any{
+		"ai":       {"provider": "anthropic", "model": "claude-sonnet-5", "api_key": "sk-ant-xxx"},
+		"gmail":    {"refresh_token": "1//0-gmail", "label": "Verdande"},
+		"calendar": {"refresh_token": "1//0-calendar", "calendar_id": "primary"},
+	}
+	// In this order on purpose: the AI settings are written first and read last,
+	// so a scope that steals the row is caught by the one written earliest.
+	for _, scope := range []string{"ai", "gmail", "calendar"} {
+		if err := db.SetUserSettings(ctx, userID, scope, want[scope]); err != nil {
+			t.Fatalf("save %s: %v", scope, err)
+		}
+	}
+
+	for _, scope := range []string{"ai", "gmail", "calendar"} {
+		got, err := db.UserSettings(ctx, userID, scope)
+		if err != nil {
+			t.Fatalf("read %s: %v", scope, err)
+		}
+		for key, value := range want[scope] {
+			if got[key] != value {
+				t.Errorf("%s.%s is %v, want %v", scope, key, got[key], value)
+			}
+		}
+	}
+
+	// And a second write to one scope updates it rather than adding another row —
+	// the upsert still has to upsert.
+	if err := db.SetUserSettings(ctx, userID, "ai", map[string]any{"provider": "openai"}); err != nil {
+		t.Fatal(err)
+	}
+	var rows int
+	if err := db.QueryRowContext(ctx,
+		`SELECT count(*) FROM user_settings WHERE user_id = ?`, userID).Scan(&rows); err != nil {
+		t.Fatal(err)
+	}
+	if rows != 3 {
+		t.Errorf("the person has %d settings rows, want 3", rows)
+	}
+	back, err := db.UserSettings(ctx, userID, "ai")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if back["provider"] != "openai" {
+		t.Errorf("the second write did not land: %v", back["provider"])
+	}
+}
+
+// The upgrade path, which is the one nobody runs: an existing database with a row
+// in the old shape, opened by a binary that carries 0025.
+//
+// Every other test here starts empty and runs all the migrations in order, which
+// exercises the migration's SQL but not its *situation*. The situation is a table
+// that already holds somebody's settings, and the question is whether they come
+// through it and whether a second scope can be written afterwards.
+func TestSettingsSurviveTheUpgradeToPerScopeRows(t *testing.T) {
+	dir := t.TempDir()
+	path := filepath.Join(dir, "test.db")
+
+	db, err := Open(path)
+	if err != nil {
+		t.Fatal(err)
+	}
+	ctx := context.Background()
+	user := &User{Email: "[email protected]", Name: "Kristian"}
+	if err := db.CreateUser(ctx, user, "Indbakke"); err != nil {
+		t.Fatal(err)
+	}
+
+	// Wind the database back to how v0.33.3 left it: user_id as the whole primary
+	// key, and 0025 not yet applied.
+	for _, stmt := range []string{
+		`PRAGMA foreign_keys = OFF`,
+		`CREATE TABLE us_old (
+			user_id     TEXT PRIMARY KEY REFERENCES users (id) ON DELETE CASCADE,
+			scope       TEXT NOT NULL DEFAULT 'general',
+			values_json TEXT NOT NULL DEFAULT '{}',
+			updated_at  INTEGER NOT NULL
+		)`,
+		`INSERT INTO us_old (user_id, scope, values_json, updated_at)
+		 SELECT user_id, scope, values_json, updated_at FROM user_settings`,
+		`DROP TABLE user_settings`,
+		`ALTER TABLE us_old RENAME TO user_settings`,
+		`DELETE FROM schema_migrations WHERE name = '0025_user_settings_per_scope.sql'`,
+		`PRAGMA foreign_keys = ON`,
+	} {
+		if _, err := db.ExecContext(ctx, stmt); err != nil {
+			t.Fatalf("rewind (%s): %v", stmt, err)
+		}
+	}
+
+	// A Gmail connection, written the way the old upsert wrote one.
+	if _, err := db.ExecContext(ctx, `
+		INSERT INTO user_settings (user_id, scope, values_json, updated_at)
+		VALUES (?, 'gmail', '{"label":"Verdande"}', 0)`, user.ID); err != nil {
+		t.Fatal(err)
+	}
+	if err := db.Close(); err != nil {
+		t.Fatal(err)
+	}
+
+	// And now the new binary opens it.
+	db, err = Open(path)
+	if err != nil {
+		t.Fatalf("the upgrade refused to open the database: %v", err)
+	}
+	defer db.Close()
+
+	gmail, err := db.UserSettings(ctx, user.ID, "gmail")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if gmail["label"] != "Verdande" {
+		t.Errorf("the Gmail settings did not survive the migration: %v", gmail)
+	}
+
+	// The thing that was reported: set up the AI provider, and have it still be
+	// there afterwards.
+	if err := db.SetUserSettings(ctx, user.ID, "ai", map[string]any{
+		"provider": "anthropic", "model": "claude-sonnet-5",
+	}); err != nil {
+		t.Fatalf("saving the AI provider after the upgrade: %v", err)
+	}
+	ai, err := db.UserSettings(ctx, user.ID, "ai")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if ai["provider"] != "anthropic" {
+		t.Errorf("the AI provider is %v after the upgrade, want anthropic", ai["provider"])
+	}
+	again, err := db.UserSettings(ctx, user.ID, "gmail")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if again["label"] != "Verdande" {
+		t.Errorf("saving the AI provider took the Gmail settings: %v", again)
+	}
+}

internal/store/tasks.go

@@ -166,15 +166,42 @@ func (db *DB) ListTasks(ctx context.Context, userID string, f TaskFilter) ([]Tas
 		// labels are short, and their names are typed by the person searching for
 		// them, so there is no spelling to be generous about. The diacritic
 		// folding that matters for task text does not earn a second index here.
+		//
+		// The third arm is a word inside a word. An index is built of tokens, and
+		// `SpeedAdmin` is one of them — so "speed admin" asks for two words that are
+		// nowhere. A prefix query gets half of it (`speed*` matches, `admin*` cannot)
+		// and the two are joined with AND, so the half that works is thrown away.
+		//
+		// Notes got the same arm, and for the same reason. Having it in one of the
+		// two would be worse than having it in neither: "it finds it in my notes but
+		// not in my tasks" is a bug report waiting, and the answer to it would be
+		// this line.
+		//
+		// It scans, and it only ever runs when somebody typed something in the box —
+		// Today and Kommende do not set `Search`. Every term has to appear, so the
+		// arms are ANDed with each other while the whole thing is ORed with the two
+		// above.
+		inside := make([]string, 0, maxSearchTerms)
+		insideArgs := make([]any, 0, maxSearchTerms)
+		for _, term := range SearchTerms(f.Search) {
+			inside = append(inside, "t.fold LIKE ?")
+			insideArgs = append(insideArgs, "%"+FoldDanish(term)+"%")
+		}
+		text := ""
+		if len(inside) > 0 {
+			text = " OR (" + strings.Join(inside, " AND ") + ")"
+		}
+
 		where = append(where, `(
 			t.rowid IN (SELECT rowid FROM tasks_fts WHERE tasks_fts MATCH ?)
 			OR t.id IN (
 				SELECT tl.task_id FROM task_labels tl
 				JOIN labels l ON l.id = tl.label_id
 				WHERE lower(l.name) LIKE ?
-			)
+			)`+text+`
 		)`)
 		args = append(args, expr, "%"+strings.ToLower(strings.TrimSpace(f.Search))+"%")
+		args = append(args, insideArgs...)
 	}
 	if f.FilterSQL != "" {
 		where = append(where, "("+f.FilterSQL+")")

site/index.html

@@ -6,12 +6,12 @@
 		<title>verdande — self-hosted tasks, shared</title>
 		<meta
 			name="description"
-			content="Self-hosted tasks and projects, shared. One Go binary with SQLite inside it. Your mail as an inbox, CalDAV, passkeys, and an MCP connector for Claude."
+			content="Self-hosted tasks, notes and projects, shared. One Go binary with SQLite inside it. Your mail as an inbox, a CalDAV server, notes in Markdown, passkeys, and an MCP connector for Claude."
 		/>
 		<meta name="theme-color" content="#111312" />
 
 		<meta property="og:title" content="verdande" />
-		<meta property="og:description" content="Self-hosted tasks and projects, shared. One binary, SQLite inside it." />
+		<meta property="og:description" content="Self-hosted tasks, notes and projects, shared. One binary, SQLite inside it." />
 		<meta property="og:type" content="website" />
 		<meta property="og:image" content="screenshots/today.webp" />
 		<meta property="og:image:alt" content="The Today view: projects and filters beside a list of what is due." />
@@ -76,10 +76,10 @@
 			}
 
 			.theme-toggle {
-				position: fixed;
+				/* In the bar now rather than floating over the corner. Fixed, it sat
-				top: 1rem;
+				   on top of whatever happened to scroll under it — on a narrow window
-				right: 1rem;
+				   that was the first screenshot's own corner. */
-				z-index: 10;
+				flex: none;
 				width: 2.25rem;
 				height: 2.25rem;
 				display: grid;
@@ -141,10 +141,86 @@
 				padding: 0 1.5rem;
 			}
 
+			/* --- the bar that stays -------------------------------------------
+
+			   A page this long had its only way out at the very top: somebody who
+			   read as far as "What it will not do" had to scroll back past nine
+			   screenshots to reach the documentation. The bar is the way out from
+			   wherever you are.
+
+			   `sticky` and not `fixed`: sticky keeps its space in the flow, so
+			   nothing below has to be pushed down by a number that then has to be
+			   kept in step with the bar's own height.
+
+			   Full width, with the wrap *inside* it. Put the other way round, the
+			   background would end where the column ends and the page would scroll
+			   past it on both sides. */
+			.topbar {
+				position: sticky;
+				top: 0;
+				z-index: 20;
+				background: var(--ground);
+				border-bottom: 1px solid var(--line);
+			}
+
+			.bar {
+				display: flex;
+				align-items: center;
+				gap: 1.25rem;
+				padding: 0.625rem 1.5rem;
+			}
+
+			.bar-brand {
+				display: flex;
+				align-items: center;
+				gap: 0.5rem;
+				color: var(--ink);
+				text-decoration: none;
+				font-weight: 560;
+				letter-spacing: -0.01em;
+			}
+
+			.bar-brand .rune {
+				color: var(--accent);
+				font-size: 1.125rem;
+				line-height: 1;
+			}
+
+			.bar-links {
+				display: flex;
+				align-items: center;
+				gap: 1.25rem;
+				margin-left: auto;
+				font-size: 0.875rem;
+			}
+
+			.bar-links a {
+				color: var(--ink-muted);
+				text-decoration: none;
+			}
+
+			.bar-links a:hover {
+				color: var(--ink);
+			}
+
+			/* The three in-page links go first on a narrow screen: they are the ones
+			   a phone can reach by scrolling anyway. Documentation and Source cannot
+			   be reached any other way, so they stay. */
+			@media (max-width: 640px) {
+				.bar-links .inpage {
+					display: none;
+				}
+			}
+
+			/* Or the bar covers the heading you just jumped to. */
+			:target {
+				scroll-margin-top: 4.5rem;
+			}
+
 			/* --- hero --- */
 
-			header {
+			.hero {
-				padding: 6rem 0 4rem;
+				padding: 5rem 0 3.5rem;
 				text-align: center;
 			}
 
@@ -172,7 +248,7 @@
 			}
 
 			.norn {
-				margin: 2rem auto 0;
+				margin: 0 auto 1.75rem;
 				max-width: 34rem;
 				font-size: 0.9375rem;
 				color: var(--ink-faint);
@@ -289,44 +365,104 @@
 
 			/* --- features --- */
 
+			/* A hairline between sections rather than under every heading: the page
+			   is one column, and the line says where one subject stops. */
 			section {
-				padding: 3rem 0;
+				padding: 3.5rem 0;
+				border-top: 1px solid var(--line);
 			}
 
 			h2 {
+				display: flex;
+				align-items: baseline;
+				gap: 0.75rem;
 				font-size: 1.5rem;
 				font-weight: 560;
 				letter-spacing: -0.02em;
 				margin: 0 0 2rem;
 			}
 
+			/* A short accent rule in front of every h2. The sections had nothing to
+			   mark them but their own words, and at a glance the page read as one
+			   long run of paragraphs. */
+			h2::before {
+				content: '';
+				flex: none;
+				width: 1.125rem;
+				height: 2px;
+				border-radius: 1px;
+				background: var(--accent);
+				transform: translateY(-0.35em);
+			}
+
+			/* Three groups rather than eighteen cards in a row. Grouped, the list is
+			   read as three answers — what it does, what it talks to, what it
+			   promises — and any of the three can be skipped. */
+			.group-label {
+				margin: 2.5rem 0 1rem;
+				font-size: 0.75rem;
+				font-weight: 560;
+				text-transform: uppercase;
+				letter-spacing: 0.08em;
+				color: var(--ink-faint);
+			}
+
+			.group-label:first-of-type {
+				margin-top: 0;
+			}
+
+			/* Cards with their own edges, not cells in one table.
+			   The table shared a hairline grid, which meant the last row had to be
+			   full or it was a hole in the drawing — and it was a hole, for as long
+			   as there were ten of them. A card that stands alone on its row is a
+			   card; an empty cell is a mistake. */
 			.grid {
 				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+				grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-				gap: 1px;
+				gap: 0.875rem;
-				background: var(--line);
-				border: 1px solid var(--line);
-				border-radius: var(--radius-lg);
-				overflow: hidden;
 			}
 
 			.cell {
-				background: var(--ground);
+				background: var(--surface);
-				padding: 1.5rem;
+				border: 1px solid var(--line);
+				border-radius: var(--radius-lg);
+				padding: 1.125rem 1.25rem 1.25rem;
+				transition: border-color 150ms ease;
+			}
+
+			.cell:hover {
+				border-color: var(--line-strong);
 			}
 
 			.cell h3 {
-				margin: 0 0 0.5rem;
+				margin: 0 0 0.4375rem;
-				font-size: 1rem;
+				font-size: 0.9375rem;
 				font-weight: 560;
 			}
 
 			.cell p {
 				margin: 0;
-				font-size: 0.9375rem;
+				font-size: 0.875rem;
 				color: var(--ink-muted);
 			}
 
+			.cell code {
+				font-family: var(--font-mono);
+				font-size: 0.8125em;
+				color: var(--ink);
+			}
+
+			/* A card that has something to admit rather than something to offer.
+			   It is not a footnote and it is not fine print: it is the same size as
+			   everything else, and it says the same thing the README says. */
+			.cell .caveat {
+				margin: 0.5rem 0 0;
+				padding-top: 0.5rem;
+				border-top: 1px solid var(--line);
+				font-size: 0.8125rem;
+				color: var(--ink-faint);
+			}
+
 			/* --- install --- */
 
 			pre {
@@ -374,6 +510,168 @@
 				color: var(--ink-muted);
 			}
 
+			/* Four facts under the buttons, in the place where a landing page usually
+			   puts logos it has not earned. They are the four questions somebody
+			   self-hosting asks before anything else. */
+			ul.facts {
+				list-style: none;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: center;
+				gap: 0.5rem 1.25rem;
+				margin: 2rem 0 0;
+				padding: 0;
+				font-size: 0.8125rem;
+				color: var(--ink-faint);
+			}
+
+			ul.facts li {
+				display: flex;
+				align-items: center;
+				gap: 1.25rem;
+			}
+
+			/* The separator belongs between two facts, not after the last one — so it
+			   is drawn by the item that follows it. */
+			ul.facts li + li::before {
+				content: '';
+				width: 3px;
+				height: 3px;
+				border-radius: 50%;
+				background: var(--line-strong);
+			}
+
+			/* On a phone the row wraps, and a separator drawn by the item that follows
+			   it lands at the *start* of the new line — a dot with nothing before it.
+			   No separators there; the wrap is the separation. */
+			@media (max-width: 640px) {
+				ul.facts {
+					gap: 0.375rem 1.125rem;
+				}
+
+				ul.facts li + li::before {
+					display: none;
+				}
+			}
+
+			/* Two ways to run it, side by side, because they are alternatives rather
+			   than steps. Stacked, the second read as what you do after the first. */
+			.panels {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
+				gap: 0.875rem;
+			}
+
+			.panel {
+				background: var(--surface);
+				border: 1px solid var(--line);
+				border-radius: var(--radius-lg);
+				padding: 1.25rem;
+			}
+
+			.panel h3 {
+				margin: 0 0 0.5rem;
+				font-size: 0.9375rem;
+				font-weight: 560;
+			}
+
+			/* Sunk rather than raised: inside a card, a block in --surface would be
+			   the same colour as the card it sits in. */
+			.panel pre {
+				background: var(--ground);
+				margin: 1rem 0 0;
+			}
+
+			.panel p {
+				margin: 0;
+				font-size: 0.875rem;
+				color: var(--ink-muted);
+			}
+
+			/* Versionsnummeret i sin egen søjle, så øjet kan løbe ned ad dem uden at
+			   læse sætningerne. `ch` frem for pixels: søjlen er lige så bred som de
+			   tal, der står i den, og den følger med, hvis skriften skifter. */
+			ul.lately {
+				list-style: none;
+				margin: 1.5rem 0 0;
+				padding: 0;
+			}
+
+			ul.lately li {
+				display: grid;
+				grid-template-columns: 5ch 1fr;
+				gap: 0 1rem;
+				padding: 0.875rem 0;
+				border-top: 1px solid var(--line);
+				font-size: 0.9375rem;
+				color: var(--ink-muted);
+			}
+
+			ul.lately .ver {
+				font-family: var(--font-mono);
+				font-size: 0.8125rem;
+				color: var(--ink-faint);
+				/* Tallet står på linje med den første tekstlinje og ikke over den. */
+				line-height: 1.7;
+			}
+
+			@media (max-width: 520px) {
+				ul.lately li {
+					grid-template-columns: 1fr;
+					gap: 0.25rem;
+				}
+			}
+
+			/* Risikoen står i kort, ikke i småt.
+			   Et forbehold sat med mindre skrift end resten er et forbehold, der er
+			   skrevet for at kunne peges på bagefter — og det er den ene ting, denne
+			   side ikke skal gøre. Samme størrelse som alt andet. */
+			.risk {
+				border: 1px solid var(--line-strong);
+				border-radius: var(--radius-lg);
+				padding: 1.5rem;
+				background: var(--surface);
+			}
+
+			.risk p {
+				margin: 0 0 1rem;
+				font-size: 0.9375rem;
+				color: var(--ink-muted);
+			}
+
+			.risk p:last-child {
+				margin-bottom: 0;
+			}
+
+			.risk strong {
+				color: var(--ink);
+			}
+
+			/* The non-goals were one paragraph of seven sentences, which is the shape
+			   nobody reads. Each is its own line now, and they can be counted. */
+			ul.nogo {
+				list-style: none;
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+				gap: 0.5rem 1.75rem;
+				margin: 0;
+				padding: 0;
+				font-size: 0.9375rem;
+				color: var(--ink-muted);
+			}
+
+			ul.nogo li {
+				position: relative;
+				padding-left: 1.25rem;
+			}
+
+			ul.nogo li::before {
+				content: '—';
+				position: absolute;
+				left: 0;
+				color: var(--ink-faint);
+			}
+
 			.demo-note {
 				margin: 1rem 0 0;
 				font-family: var(--font);
@@ -524,27 +822,38 @@
 	</head>
 
 	<body>
-		<button class="theme-toggle" type="button" aria-label="Switch between light and dark" title="Light or dark">
+		<div class="topbar">
-			<span aria-hidden="true">◐</span>
+			<div class="wrap bar">
-		</button>
+				<a class="bar-brand" href="#top">
-		<div class="wrap">
+					<span class="rune" aria-hidden="true">ᚹ</span>
-			<header>
+					verdande
+				</a>
+				<nav class="bar-links" aria-label="Sections">
+					<a class="inpage" href="#screens">Screens</a>
+					<a class="inpage" href="#features">Features</a>
+					<a class="inpage" href="#running">Running it</a>
+					<a href="https://kristianwind.github.io/verdande/">Documentation</a>
+					<a href="https://github.com/kristianwind/verdande">Source</a>
+					<button class="theme-toggle" type="button" aria-label="Switch between light and dark" title="Light or dark">
+						<span aria-hidden="true">◐</span>
+					</button>
+				</nav>
+			</div>
+		</div>
+
+		<div class="wrap" id="top">
+			<header class="hero">
 				<span class="mark" aria-hidden="true">ᚹ</span>
 				<h1>verdande</h1>
 				<p class="lede">
-					Self-hosted tasks and projects, shared with the people you share the work with.
+					Self-hosted tasks, notes and projects, shared with the people you share the work
-					One binary, SQLite inside it.
+					with. One binary, SQLite inside it.
 				</p>
 				<p class="rune-note">
 					Built to be deployed as a <strong>Rune</strong> in
 					<a href="https://github.com/kristianwind/yggdrasil">Yggdrasil Panel</a> — upload
 					the manifest, fill in two fields, press start. It also runs anywhere Docker does.
 				</p>
-				<p class="norn">
-					Verdande is one of the three Norns — the one who spins <em>that which is
-					becoming</em>. Not what has been, and not what is fated to be: the thing you are
-					in the middle of. Which is what a to-do list is.
-				</p>
 
 				<div class="actions">
 					<a class="button primary" href="https://kristianwind.github.io/verdande/self-hosting/">
@@ -553,6 +862,14 @@
 					<a class="button" href="https://github.com/kristianwind/verdande">Source</a>
 					<a class="button" href="https://kristianwind.github.io/verdande/">Documentation</a>
 				</div>
+
+				<ul class="facts">
+					<li>One Go binary</li>
+					<li>SQLite inside it</li>
+					<li>amd64 and arm64</li>
+					<li>No account anywhere but yours</li>
+					<li>MIT</li>
+				</ul>
 			</header>
 
 			<!-- No screenshot: the quick-add parser is the thing worth showing, and it
@@ -584,7 +901,7 @@
 				</div>
 			</div>
 
-			<section>
+			<section id="screens">
 				<h2>What it looks like</h2>
 				<figure class="shot only-dark">
 					<img
@@ -669,11 +986,43 @@
 						/>
 						<figcaption>What has been done on the server, across every project.</figcaption>
 					</figure>
+					<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."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Waiting on others — grouped by who has it.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/notes-source.webp"
+							alt="A note with the source view open: the same note as Markdown, with headings, a list, a quotation, a wiki link and a fenced code block."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>The same note as Markdown. What is on disk is what you see.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/settings.webp"
+							alt="The integrations settings page: connecting Gmail with an OAuth client, and below it the calendar feed address."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Integrations: your mailbox, your calendar feed, your address.</figcaption>
+					</figure>
 				</div>
 			</section>
 
-			<section>
+			<section id="features">
 				<h2>What it does</h2>
+
+				<p class="group-label">Doing the work</p>
 				<div class="grid">
 					<div class="cell">
 						<h3>Reads what you type</h3>
@@ -683,20 +1032,54 @@
 						</p>
 					</div>
 					<div class="cell">
-						<h3>Shared, properly</h3>
+						<h3>Nothing to remember</h3>
 						<p>
-							Owner, editor and viewer roles. People outside your instance join by
+							Start typing anywhere and you are writing a task, with the letter you
-							invite link. Changes appear live.
+							pressed already in the field. <code>⌘K</code> goes anywhere else.
+						</p>
+					</div>
+					<div class="cell">
+						<h3>Search that reads Danish</h3>
+						<p>
+							Type <code>gron</code> and find <code>grøn</code>. Unicode does not
+							consider <code>ø</code> an accented <code>o</code>, so a search that
+							leans on that alone is broken for the people this was built for.
+						</p>
+					</div>
+					<div class="cell">
+						<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.
 						</p>
 					</div>
 					<div class="cell">
 						<h3>Notes, beside the work</h3>
 						<p>
-							Rich text to write in, Markdown on disk. File a note in a project and
+							Rich text to write in, Markdown on disk — and a source view to see it.
-							everybody in it can read it; <code>#project</code> and
+							Images are pasted or dragged in. <code>#project</code> and
 							<code>[[another note]]</code> are links, and a task shows what has been
-							written about it. A zip of Markdown goes in and comes back out the same
+							written about it. Archive what is done with it; the bin is for mistakes.
-							shape, so nothing is trapped here.
+						</p>
+					</div>
+					<div class="cell">
+						<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.
+						</p>
+					</div>
+				</div>
+
+				<p class="group-label">Connected to what you already use</p>
+				<div class="grid">
+					<div class="cell">
+						<h3>Shared, properly</h3>
+						<p>
+							Owner, editor and viewer roles. People outside your instance join by
+							invite link. Changes appear live.
 						</p>
 					</div>
 					<div class="cell">
@@ -706,6 +1089,27 @@
 							here. Not a read-only feed pretending.
 						</p>
 					</div>
+					<div class="cell">
+						<h3>A calendar of its own</h3>
+						<p>
+							A month or a week of what is due, and a secret ICS address to subscribe
+							to from Apple Calendar, Google or Thunderbird. A Google calendar can be
+							laid over the top, read-only.
+						</p>
+						<p class="caveat">
+							The Google half is written to Google's documentation and has not yet
+							been run against Google. The feed and CalDAV have.
+						</p>
+					</div>
+					<div class="cell">
+						<h3>Your mail, as an inbox</h3>
+						<p>
+							Star a mail in Gmail, or flag one over IMAP in iCloud or Fastmail, and
+							it becomes a task. Forward one to your own address instead and the
+							subject is parsed like anything else you type. One way: unstarring it
+							later does nothing to the task you made.
+						</p>
+					</div>
 					<div class="cell">
 						<h3>Claude, connected</h3>
 						<p>
@@ -714,35 +1118,39 @@
 						</p>
 					</div>
 					<div class="cell">
-						<h3>Your mail, as an inbox</h3>
+						<h3>AI only if you ask for it</h3>
 						<p>
-							Star a mail in Gmail, or flag one in iCloud or Fastmail, and it becomes
+							Off by default, your own key, and your choice of Anthropic, OpenAI,
-							a task. Forward one to your own address instead and the subject is
+							Google or something local. Nothing leaves the server until you have
-							parsed like anything else you type. One way: unstarring it later does
+							filled that in, and everything works without it.
-							nothing to the task you made.
 						</p>
 					</div>
+				</div>
+
+				<p class="group-label">Yours, and checkable</p>
+				<div class="grid">
 					<div class="cell">
-						<h3>Nothing to remember</h3>
+						<h3>More than one way in</h3>
 						<p>
-							Start typing anywhere and you are writing a task, with the letter you
+							Passkeys, or a password hashed with Argon2id and a second factor with
-							pressed already in the field. Sign in with a passkey and there is no
+							recovery codes. Every device you are signed in on is listed, and any of
-							password to forget either.
+							them can be signed out from here.
-						</p>
-					</div>
-					<div class="cell">
-						<h3>Yours to leave</h3>
-						<p>
-							Import from Todoist, export back to it, or take everything as JSON. The
-							round trip is tested, not promised.
 						</p>
 					</div>
 					<div class="cell">
 						<h3>Keys stay behind</h3>
 						<p>
-							Mail tokens and mailbox passwords are encrypted in the database, and the
+							Mail tokens, mailbox passwords, second-factor secrets and AI keys are
-							key lives in a file beside it — not inside it. So a backup you download,
+							encrypted in the database, and the key lives in a file beside it — not
-							or one that ends up somewhere it should not, does not open your mail.
+							inside it. So a backup you download, or one that ends up somewhere it
+							should not, does not open your mail.
+						</p>
+					</div>
+					<div class="cell">
+						<h3>Nobody signs themselves up</h3>
+						<p>
+							The first account is the administrator, and after that people arrive by
+							invitation. An address on the internet is not an open door.
 						</p>
 					</div>
 					<div class="cell">
@@ -753,50 +1161,157 @@
 							instance's record, not the person's.
 						</p>
 					</div>
+					<div class="cell">
+						<h3>Yours to leave</h3>
+						<p>
+							Import from Todoist, export back to it, take everything as JSON, or
+							hand the notes a zip of Markdown and get the same zip back out. The
+							round trip is tested, not promised.
+						</p>
+					</div>
+					<div class="cell">
+						<h3>It counts itself, out loud</h3>
+						<p>
+							Once a day an instance says it exists — a random id, the version, and
+							nothing else. No tasks, no names, no addresses. It is on to begin with,
+							the settings page prints the exact payload, and one switch stops it.
+						</p>
+					</div>
 				</div>
 			</section>
 
-			<section>
+			<section id="recently">
+				<h2>Lately</h2>
+				<p class="muted">
+					A landing page can say a project is alive; a list of what landed says it
+					better. This is not a changelog — every release has notes, and they are on
+					<a href="https://github.com/kristianwind/verdande/releases">the releases page</a>.
+				</p>
+				<ul class="lately">
+					<li>
+						<span class="ver">0.34</span>
+						Sections can be dragged into the order the work actually happens in. The
+						sidebar keeps its head still while the projects scroll.
+					</li>
+					<li>
+						<span class="ver">0.33</span>
+						Notes grew an archive, selection of many at once, pictures you can paste
+						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>
+
+			<section id="running">
 				<h2>Running it</h2>
 
-				<h3 class="sub">As a Rune in Yggdrasil Panel</h3>
+				<div class="panels">
-				<p class="muted">
+					<div class="panel">
-					This is what it was built for. <strong>Runes → Carve a rune</strong>, upload
+						<h3>As a Rune in Yggdrasil Panel</h3>
-					<code>rune/verdande.yaml</code>, create a server from it, set the public address
+						<p>
-					and your mail server, and start it. No port forwarding — give it a subdomain and
+							This is what it was built for. <strong>Runes → Carve a rune</strong>,
-					the panel routes it through your Cloudflare Tunnel.
+							upload <code>rune/verdande.yaml</code>, create a server from it, set the
-				</p>
+							public address and your mail server, and start it. No port forwarding —
-
+							give it a subdomain and the panel routes it through your Cloudflare
-				<h3 class="sub">Or with Docker, anywhere</h3>
+							Tunnel.
-				<pre><code>docker run -d --name verdande \
+						</p>
+					</div>
+					<div class="panel">
+						<h3>Or with Docker, anywhere</h3>
+						<p>Open the address afterwards and create the first account. That one is the administrator.</p>
+						<pre><code>docker run -d --name verdande \
   -p 8080:8080 \
   -v verdande-data:/data \
   -e VERDANDE_BASE_URL=https://todo.example.dk \
   ghcr.io/kristianwind/verdande:latest</code></pre>
-				<p class="muted" style="margin-top: 1rem">
+					</div>
-					Open the address and create the first account. That one is the administrator.
+				</div>
-				</p>
+
 				<ul class="plain">
 					<li>No database to provision — SQLite is inside the binary.</li>
 					<li>Distroless image: no shell, no package manager, one static file.</li>
 					<li>amd64 and arm64, so a Raspberry Pi is fine.</li>
 					<li>Nightly backups, fourteen kept, written with <code>VACUUM INTO</code>.</li>
+					<li>Twenty-four migrations, run on start. Upgrading is pulling the new image.</li>
 				</ul>
 			</section>
 
-			<section>
+			<section id="limits">
 				<h2>What it will not do</h2>
-				<p class="muted">
+				<ul class="nogo">
-					No karma or points. No team workspaces. No native apps. No mail integration
+					<li>No karma, streaks or points.</li>
-					beyond Gmail and the forwarding address. No languages beyond Danish and English.
+					<li>No team workspaces — projects and the people in them are the whole model.</li>
-					And no sync protocol of its own — CalDAV and the API <em>are</em> the sync.
+					<li>No native apps. It is a PWA, and it installs on a phone.</li>
-				</p>
+					<li>No Outlook or Exchange: Microsoft has closed IMAP to passwords and wants its own flow.</li>
+					<li>No languages beyond Danish and English.</li>
+					<li>No sync protocol of its own — CalDAV and the API <em>are</em> the sync.</li>
+					<li>No hosted version. There is nowhere to sign up, and that is the point.</li>
+				</ul>
+			</section>
+
+			<section id="risk">
+				<h2>At your own risk</h2>
+				<div class="risk">
+					<p>
+						verdande is <strong>MIT licensed and provided as is, without warranty of
+						any kind</strong>. That sentence is in every MIT licence and it is usually
+						skipped, so here it is in the open: if you run this, you run it at your
+						own risk, and nobody is on the hook if it loses your work.
+					</p>
+					<p>
+						It is one person's project, at version 0.x, and 0.x means the shape can
+						still change. <strong>You host it, so the data and the backups are
+						yours.</strong> It writes a backup every night and keeps fourteen — and a
+						backup nobody has ever restored is not yet a backup. Restore one before
+						you need to.
+					</p>
+					<p>
+						Security is worked on rather than claimed. There have been two full
+						reviews of the code, every finding is written down and closed, and what is
+						protected and what is not is spelled out in
+						<a href="https://github.com/kristianwind/verdande/blob/main/SECURITY.md">SECURITY.md</a>
+						— including the parts that are a deliberate trade-off. <strong>Nobody
+						outside the project has audited it.</strong> The last review found two ways
+						to reach something you should not and closed both; a third review will find
+						more, which is the point of having one.
+					</p>
+					<p>
+						It is built to sit behind something — a tunnel, a reverse proxy, a VPN —
+						put there by somebody who knows what they exposed. Found a hole? Mail it
+						rather than opening an issue; the address is in SECURITY.md and you get an
+						answer within a week.
+					</p>
+				</div>
 			</section>
 
 			<footer>
+				<!-- The Norn belongs at the end. It was the third paragraph of the hero,
+				     where it stood between somebody arriving and the buttons they came
+				     for — and it is a closing thought, not an opening one. -->
+				<p class="norn">
+					Verdande is one of the three Norns — the one who spins <em>that which is
+					becoming</em>. Not what has been, and not what is fated to be: the thing you are
+					in the middle of. Which is what a to-do list is.
+				</p>
 				<p>
 					MIT licensed ·
 					<a href="https://github.com/kristianwind/verdande">github.com/kristianwind/verdande</a>
+					· <a href="https://kristianwind.github.io/verdande/">Documentation</a>
 				</p>
 				<p>
 					Built to run as a Rune in

web/e2e/smoke.spec.js

@@ -358,6 +358,20 @@ test('en projektgruppe kan foldes, fyldes og slettes uden at tage projekterne me
 		'aria-expanded',
 		'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');
+
 	await sidebar.getByRole('button', { name: /^Fold Arbejde/ }).click();
 
 	// Colour, which is chosen while renaming rather than from the row. Both are
@@ -962,10 +976,19 @@ test('en opgave kan trækkes hen over et månedsskifte i uge-visningen', async (
 
 	const chip = page.locator('.chip').filter({ hasText: 'skifte dæk' });
 	await expect(chip).toBeVisible();
-	await chip.dragTo(page.locator(`[data-date="${to}"]`));
+	// Sluppet øverst i søjlen og ikke i midten af den. En uge, der viser et døgn, er
+	// højere end skærmen, så søjlens midte kan ligge uden for billedet — og et træk,
+	// der ruller undervejs, er et træk, browseren taber. Det er ikke en finte for at
+	// få prøven til at bestå: det er også sådan et menneske gør det, fordi man
+	// slipper der, hvor man kan se, man slipper.
+	await chip.dragTo(page.locator(`[data-date="${to}"]`), { targetPosition: { x: 30, y: 20 } });
 
-	await expect(page.locator(`[data-date="${to}"]`).getByText('skifte dæk')).toBeVisible();
+	// Landet i timesøjlen med et klokkeslæt: hvor på døgnet man slap, *er* tiden.
+	// Sluppet tyve pixels nede i en søjle, der begynder klokken otte, bliver det
+	// tidligt på dagen — hvad det præcist runder til, er ikke det, der prøves her.
+	await expect(page.locator(`[data-date="${to}"] .tevent`).getByText('skifte dæk')).toBeVisible();
 	await expect(page.locator(`[data-date="${from}"]`).getByText('skifte dæk')).toBeHidden();
+	await expect(page.locator(`[data-allday="${from}"]`).getByText('skifte dæk')).toBeHidden();
 
 	expect(trouble).toEqual([]);
 });
@@ -1117,10 +1140,14 @@ test('kalenderen viser Googles begivenheder over egne opgaver, og kun opgaven ka
 	await expect(page.getByText('Ingen kalender er forbundet endnu.')).toBeHidden();
 	await expect(page.getByText('Ingen af kontoens kalendere er valgt endnu.')).toBeHidden();
 
-	// Both kinds are in the same cell, which is the whole point of the view.
+	// Begge slags på den samme dag, som er hele pointen med visningen — men en dag
-	const event = cell.locator('.event').filter({ hasText: 'Bestyrelsesmøde' });
+	// er to kasser nu, siden ugen blev et døgn: timesøjlen bærer det, der har et
-	const allDay = cell.locator('.event').filter({ hasText: 'Feriedag' });
+	// klokkeslæt, og båndet foroven bærer det, der ikke har. En heldagsbegivenhed
-	const task = cell.locator('.chip').filter({ hasText: 'vande blomster' });
+	// lagt klokken nul ville påstå, den holdt fra midnat til midnat.
+	const band = page.locator(`[data-allday="${day}"]`);
+	const event = cell.locator('.tevent').filter({ hasText: 'Bestyrelsesmøde' });
+	const allDay = band.locator('.event').filter({ hasText: 'Feriedag' });
+	const task = band.locator('.chip').filter({ hasText: 'vande blomster' });
 	await expect(event).toBeVisible();
 	await expect(allDay).toBeVisible();
 	await expect(task).toBeVisible();
@@ -1145,11 +1172,18 @@ test('kalenderen viser Googles begivenheder over egne opgaver, og kun opgaven ka
 	await expect(event).toHaveAttribute('href', /^https:\/\/calendar\.google\.com\//);
 
 	// The task still reschedules by drag, in a grid that now has events in it.
-	await task.dragTo(page.locator(`[data-date="${next}"]`));
+	// Sluppet øverst i søjlen og ikke i midten af den. En uge, der viser et døgn, er
-	await expect(page.locator(`[data-date="${next}"]`).getByText('vande blomster')).toBeVisible();
+	// højere end skærmen, så søjlens midte kan ligge uden for billedet — og et træk,
-	await expect(cell.getByText('vande blomster')).toBeHidden();
+	// der ruller undervejs, er et træk, browseren taber. Det er ikke en finte for at
+	// få prøven til at bestå: det er også sådan et menneske gør det, fordi man
+	// slipper der, hvor man kan se, man slipper.
+	await task.dragTo(page.locator(`[data-date="${next}"]`), { targetPosition: { x: 30, y: 20 } });
+	// Landet i næste dags timesøjle, med det klokkeslæt der blev sluppet på.
+	await expect(page.locator(`[data-date="${next}"] .tevent`).getByText('vande blomster')).toBeVisible();
+	await expect(band.getByText('vande blomster')).toBeHidden();
 	// The events stayed where they were; a rescheduled task moves nothing else.
-	await expect(cell.locator('.event')).toHaveCount(2);
+	await expect(cell.locator('.tevent')).toHaveCount(1);
+	await expect(band.locator('.event')).toHaveCount(1);
 
 	expect(trouble).toEqual([]);
 });
@@ -1814,6 +1848,14 @@ test('sidebjælken kan ikke scrolles vandret', async ({ page }) => {
 	const sideways = await sidebar.evaluate((el) => el.scrollWidth - el.clientWidth);
 	expect(sideways, 'sidebjælken kan scrolles vandret').toBeLessThanOrEqual(1);
 
+	// Og rulleboksen indeni, som er den, der faktisk ruller nu. Bjælken selv er
+	// `overflow: hidden`, så en for bred række ville blive klippet dér og aldrig
+	// nå at tælle med ovenfor — målingen ville stå og bestå af den forkerte grund.
+	const inner = await sidebar
+		.locator('.scroller')
+		.evaluate((el) => el.scrollWidth - el.clientWidth);
+	expect(inner, 'rulleboksen kan scrolles vandret').toBeLessThanOrEqual(1);
+
 	// And the whole page, for the same reason at a different scale.
 	const page_sideways = await page.evaluate(
 		() => document.documentElement.scrollWidth - document.documentElement.clientWidth
@@ -1827,6 +1869,58 @@ test('sidebjælken kan ikke scrolles vandret', async ({ page }) => {
 	expect(trouble).toEqual([]);
 });
 
+/**
+ * Mærket og de faste visninger bliver stående, når resten ruller.
+ *
+ * Rullebjælken gik før hele vejen op: runen og I dag forsvandt op over kanten, så
+ * snart der var projekter nok — og de er dem, man er på vej hen til oftest.
+ *
+ * Målt i et lavt vindue, for i et højt er der ikke noget at rulle, og en prøve,
+ * der ikke ruller, består uanset hvad man laver om. Bredden holdes over
+ * telefongrænsen, hvor bjælken bliver til en skuffe og er en anden ting.
+ */
+test('sidebjælkens hoved bliver stående, når listen ruller', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	await page.setViewportSize({ width: 1000, height: 420 });
+
+	const sidebar = page.getByRole('navigation', { name: 'Hovedmenu' });
+	const scroller = sidebar.locator('.scroller');
+	await expect(scroller).toBeVisible();
+
+	// Rullebjælken begynder under de faste visninger og ikke bag dem.
+	const geometry = await sidebar.evaluate((el) => {
+		const box = (sel) => el.querySelector(sel).getBoundingClientRect().toJSON();
+		const scroll = el.querySelector('.scroller');
+		return {
+			views: box('.views'),
+			scroller: box('.scroller'),
+			overflows: scroll.scrollHeight - scroll.clientHeight
+		};
+	});
+	expect(geometry.overflows, 'der er ikke noget at rulle — prøven beviser intet').toBeGreaterThan(
+		0
+	);
+	expect(
+		geometry.scroller.top,
+		'rulleboksen begynder oppe i de faste visninger'
+	).toBeGreaterThanOrEqual(geometry.views.bottom - 1);
+
+	// Og hovedet bliver, hvor det er, hele vejen ned.
+	const brand = sidebar.locator('.brand');
+	const before = await brand.boundingBox();
+	await scroller.evaluate((el) => el.scrollTo(0, el.scrollHeight));
+	await expect
+		.poll(async () => scroller.evaluate((el) => el.scrollTop))
+		.toBeGreaterThan(0);
+	const after = await brand.boundingBox();
+	expect(Math.abs(after.y - before.y), 'mærket fulgte med op').toBeLessThanOrEqual(1);
+	await expect(sidebar.getByRole('link', { name: 'I dag' })).toBeInViewport();
+
+	expect(trouble).toEqual([]);
+});
+
 /**
  * A project can have more than one section.
  *
@@ -1899,6 +1993,76 @@ test('et projekt kan have flere sektioner @forms', async ({ page }) => {
 	expect(trouble).toEqual([]);
 });
 
+/**
+ * Sektioner kan trækkes op og ned.
+ *
+ * Rækkefølgen af sektioner *er* planen — "Planlægning" står før "I gang", fordi
+ * det er den vej arbejdet går — og indtil nu kunne den kun laves om ved at slette
+ * en sektion og lave den igen, hvilket smider dens opgaver ud i det usektionerede
+ * område på vejen.
+ *
+ * Målt på rækkefølgen af overskrifterne på siden og bagefter på, hvad serveren
+ * svarer efter en genindlæsning: den første halvdel kan bestå af, at fladen
+ * flyttede et element, den anden kan kun bestå, hvis skrivningen gik igennem.
+ */
+test('sektioner kan trækkes i en anden rækkefølge, og den overlever en genindlæsning', async ({
+	page
+}) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const sidebar = page.getByRole('navigation', { name: 'Hovedmenu' });
+	await sidebar.getByRole('button', { name: 'Nyt projekt' }).click();
+	await sidebar.getByLabel('Projektnavn').fill('Havehus');
+	await sidebar.getByLabel('Projektnavn').press('Enter');
+	await expect(page.getByRole('heading', { name: 'Havehus' })).toBeVisible();
+
+	for (const name of ['Fundament', 'Rejsning', 'Tag']) {
+		await page.getByRole('button', { name: '+ Tilføj sektion' }).click();
+		const field = page.getByLabel('Ny sektion');
+		await field.fill(name);
+		await field.press('Enter');
+		await expect(page.getByRole('heading', { name, exact: true })).toBeVisible();
+	}
+
+	const order = () =>
+		page.locator('.section-head h2').evaluateAll((els) => els.map((e) => e.textContent.trim()));
+
+	expect(await order()).toEqual(['Fundament', 'Rejsning', 'Tag']);
+
+	// Tag trækkes helt op. Sluppet i den øverste halvdel af "Fundament", som er
+	// gaben over den — hvilken halvdel man rammer, er hele forskellen på over og
+	// under, så positionen er skrevet ud og ikke overladt til midten.
+	await page
+		.locator('.section-head')
+		.filter({ hasText: 'Tag' })
+		.dragTo(page.locator('.section-head').filter({ hasText: 'Fundament' }), {
+			targetPosition: { x: 40, y: 3 }
+		});
+
+	await expect.poll(order).toEqual(['Tag', 'Fundament', 'Rejsning']);
+
+	await page.reload();
+	await expect(page.getByRole('heading', { name: 'Tag', exact: true })).toBeVisible();
+	expect(await order(), 'serveren tog ikke rækkefølgen').toEqual([
+		'Tag',
+		'Fundament',
+		'Rejsning'
+	]);
+
+	// Og den anden vej: sluppet i den nederste halvdel lander den under.
+	await page
+		.locator('.section-head')
+		.filter({ hasText: 'Tag' })
+		.dragTo(page.locator('.section-head').filter({ hasText: 'Rejsning' }), {
+			targetPosition: { x: 40, y: 28 }
+		});
+
+	await expect.poll(order).toEqual(['Fundament', 'Rejsning', 'Tag']);
+
+	expect(trouble).toEqual([]);
+});
+
 /**
  * Form fields on a touch device are at least 16px.
  *
@@ -2894,3 +3058,248 @@ test('flere noter kan markeres, arkiveres og hentes frem igen', async ({ page })
 
 	expect(trouble).toEqual([]);
 });
+
+/**
+ * Én note, der ikke kan tegnes, må ikke tage ruden med sig.
+ *
+ * Meldt ind som "jeg kan ikke skifte mellem noter — uanset hvilken jeg trykker
+ * på, åbner de ikke". Editoren indlæste med `note.body.trim()` uden værn, og
+ * `body` er en streng fra serveren hver eneste gang — indtil den ikke er. Så
+ * kaster den inde i et `$effect`, og en effekt, der kaster, tager komponentens
+ * opdateringer med sig: den forrige note bliver stående, og ingen note kan åbnes
+ * bagefter. Klikket kan ikke engang lande.
+ *
+ * Formen fremtvinges her frem for at vente på den nyttelast, der gjorde det:
+ * hvad der end fik `body` til at mangle, er svaret det samme — én note må ikke
+ * kunne låse de tolv hundrede andre ude.
+ */
+test('en note uden krop må ikke låse ruden', async ({ page }) => {
+	const errors = [];
+	page.on('pageerror', (e) => errors.push(e.message));
+
+	await page.goto('/noter');
+	for (const title of ['Alfa', 'Beta']) {
+		await page.getByRole('button', { name: 'Ny note' }).click();
+		const ed = page.getByRole('textbox', { name: 'Notens tekst' });
+		await ed.click();
+		await page.keyboard.type(title);
+		await expect(ed.locator('h1')).toHaveText(title);
+		await page.keyboard.press('Enter');
+		await page.keyboard.type('Brødtekst i ' + title);
+		await expect(ed.locator('p').filter({ hasText: 'Brødtekst i ' + title })).toBeVisible();
+		await page.waitForTimeout(900);
+	}
+	await page.reload();
+	await expect(page.locator('li .row strong').filter({ hasText: 'Beta' })).toBeVisible();
+
+	await page.route('**/api/v1/notes/*', async (route) => {
+		if (route.request().method() !== 'GET') return route.continue();
+		const res = await route.fetch();
+		const note = await res.json();
+		delete note.body;
+		await route.fulfill({ response: res, json: note });
+	});
+
+	await page.locator('li').filter({ hasText: 'Alfa' }).first().click();
+	await page.waitForTimeout(600);
+	expect(errors, 'noten kastede under indlæsningen').toEqual([]);
+
+	await page.unroute('**/api/v1/notes/*');
+	await page.locator('li').filter({ hasText: 'Beta' }).first().click();
+	await expect(
+		page.getByRole('textbox', { name: 'Notens tekst' }).locator('h1'),
+		'ruden er låst: den næste note åbner ikke'
+	).toHaveText('Beta', { timeout: 5000 });
+	expect(errors, 'ruden efterlod en fejl bag sig').toEqual([]);
+});
+
+/**
+ * Ugen er et døgn, ikke syv punktopstillinger.
+ *
+ * En uge, hvor hver dag er en liste, svarer på "hvad skal der ske torsdag" og ikke
+ * på "hvornår" — og det andet er det, man åbner en uge for. To møder klokken ti er
+ * en konflikt, man skal kunne se, ikke læse sig til.
+ *
+ * Begivenhederne kommer fra en rute, der svarer i stedet for Google: det, der
+ * prøves her, er gitteret, og en prøve, der først skal have en OAuth-forbindelse,
+ * er en prøve, der aldrig kører.
+ */
+test('ugen viser et døgn, og dagene er lige brede', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+
+	// Mandag i den uge, siden åbner på.
+	const monday = (n) => {
+		const d = new Date();
+		d.setDate(d.getDate() - ((d.getDay() + 6) % 7) + n);
+		return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(
+			d.getDate()
+		).padStart(2, '0')}`;
+	};
+	const at = (n, from, to, id, summary) => ({
+		id,
+		calendar_id: 'c1',
+		summary,
+		starts_at: `${monday(n)}T${from}:00+02:00`,
+		ends_at: `${monday(n)}T${to}:00+02:00`,
+		start_day: monday(n),
+		end_day: monday(n),
+		all_day: false,
+		calendar_name: 'Privat'
+	});
+
+	await page.route('**/api/v1/calendar/events*', (route) =>
+		route.fulfill({
+			json: {
+				events: [
+					at(2, '09:00', '10:00', 'e1', 'Morgenmøde'),
+					at(2, '09:30', '11:00', 'e2', 'Oveni det første'),
+					at(2, '17:00', '18:00', 'e3', 'Sent på dagen'),
+					{
+						id: 'e4',
+						calendar_id: 'c1',
+						summary: 'Aalborg',
+						start_day: monday(1),
+						end_day: monday(1),
+						all_day: true,
+						calendar_name: 'Privat'
+					}
+				]
+			}
+		})
+	);
+
+	await page.goto('/kalender');
+	await page.getByRole('button', { name: 'Uge', exact: true }).click();
+	await expect(page.locator('.weekgrid')).toBeVisible();
+
+	// Syv lige brede dage. `1fr` er `minmax(auto, 1fr)`, så ét langt ord i én dag
+	// gjorde den bredere end de seks andre — hvilket er det modsatte af et gitter.
+	const widths = await page
+		.locator('.weekgrid .daycol')
+		.evaluateAll((els) => els.map((e) => Math.round(e.getBoundingClientRect().width)));
+	expect(widths, 'ugen har ikke syv søjler').toHaveLength(7);
+	expect(Math.max(...widths) - Math.min(...widths), 'dagene er ikke lige brede').toBeLessThanOrEqual(1);
+
+	// Klokken bestemmer, hvor noget står. Morgenmødet skal ligge over det sene.
+	const box = async (name) => (await page.locator('.tevent', { hasText: name }).first().boundingBox());
+	const morning = await box('Morgenmøde');
+	const evening = await box('Sent på dagen');
+	expect(morning.y, 'morgenmødet står ikke over det sene møde').toBeLessThan(evening.y);
+
+	// To ting på samme tid står ved siden af hinanden. Oven på hinanden er præcis
+	// den konflikt, visningen findes for at vise.
+	const overlapping = await box('Oveni det første');
+	expect(overlapping.x, 'de to overlappende ligger oven på hinanden').toBeGreaterThan(morning.x);
+	expect(overlapping.x, 'den anden er havnet i næste dag').toBeLessThan(morning.x + morning.width * 2);
+
+	// Heldagsting hører til båndet foroven: en heldagsbegivenhed lagt klokken nul
+	// ville påstå, den holdt fra midnat til midnat.
+	// `.weekgrid > .allday` er selve cellen; brikken indeni bærer også klassen.
+	await expect(page.locator('.weekgrid > .allday', { hasText: 'Aalborg' })).toBeVisible();
+
+	// Og måneden er stadig lige bred hele vejen rundt.
+	await page.getByRole('button', { name: 'Måned', exact: true }).click();
+	const monthWidths = await page
+		.locator('.grid .day')
+		.evaluateAll((els) => els.slice(0, 7).map((e) => Math.round(e.getBoundingClientRect().width)));
+	expect(
+		Math.max(...monthWidths) - Math.min(...monthWidths),
+		'månedens dage er ikke lige brede'
+	).toBeLessThanOrEqual(1);
+
+	expect(trouble).toEqual([]);
+});
+
+/**
+ * Tid på en opgave, sat i ruden og justeret i kalenderen.
+ *
+ * Tre påstande, og den midterste er den, der var gået galt uden at nogen sagde
+ * det: serveren læser `due_date` og `due_time` sammen, så en dato sendt uden en
+ * tid *rydder* tiden. Et gem af datoen alene tog altså klokkeslættet med sig, og
+ * det samme gjorde et træk i kalenderen.
+ */
+test('en opgave kan få et klokkeslæt, og beholder det når den flyttes', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const box = page.getByLabel('Ny opgave');
+	// I dag, så den står på den visning, den skrives i — og i den uge, gitteret
+	// åbner på længere nede.
+	await box.fill('ringe til tandlægen i dag');
+	await box.press('Enter');
+	await expect(page.getByText('ringe til tandlægen')).toBeVisible();
+
+	// Klokkeslættet sættes i ruden. Feltet er tomt til at begynde med: en opgave
+	// uden tid er det almindelige, og 00:00 ville påstå noget om midnat.
+	await page.getByText('ringe til tandlægen').click();
+	const time = page.getByLabel('Klokkeslæt');
+	await expect(time).toHaveValue('');
+	// Tidligt på dagen med vilje: gitteret begynder klokken otte, så opgaven står
+	// lige under båndet og de to kasser er i billedet på én gang. Klokken fjorten
+	// ligger under skærmkanten, og et træk, der først skal rulle, er et træk,
+	// browseren taber.
+	await time.fill('08:30');
+	await time.blur();
+	await page.waitForTimeout(400);
+
+	// Gemt hos serveren, ikke kun i feltet: genindlæst og åbnet igen.
+	await page.reload();
+	await page.getByText('ringe til tandlægen').click();
+	await expect(page.getByLabel('Klokkeslæt'), 'klokkeslættet blev ikke gemt').toHaveValue('08:30');
+
+	// Og datoen kan rettes bagefter uden at tage timen med sig.
+	const date = page.locator('#due');
+	const day = await date.inputValue();
+	await date.fill(day);
+	await date.blur();
+	await page.waitForTimeout(400);
+	await page.reload();
+	await page.getByText('ringe til tandlægen').click();
+	await expect(
+		page.getByLabel('Klokkeslæt'),
+		'et gem af datoen ryddede klokkeslættet'
+	).toHaveValue('08:30');
+
+	await page.keyboard.press('Escape');
+
+	// I ugegitteret står den på sit klokkeslæt frem for i heldagsbåndet.
+	await page.goto('/upcoming');
+	await page.getByRole('button', { name: 'Uge', exact: true }).click();
+	const placed = page.locator('.tevent.task').filter({ hasText: 'ringe til tandlægen' });
+	await expect(placed, 'opgaven står ikke på døgnet').toBeVisible();
+	await expect(placed).toContainText('08:30');
+
+	// Trukket op i båndet over sin egen dag: så har den en dag og ingen tid. Den
+	// tomme streng siger "ryd", hvor ingenting siger "behold" — og de to må ikke
+	// forveksles.
+	//
+	// Et bånd, der er tomt. Prøven handler om at krydse mellem de to kasser, og en
+	// dag, hvis bånd allerede er fyldt af andre prøvers opgaver, gør slippunktet
+	// til en anden opgave frem for til båndet — hvilket er en anden gest end den,
+	// der prøves her.
+	const band = page
+		.locator('.weekgrid > .allday')
+		.filter({ hasNot: page.locator('.chip, .event') })
+		.first();
+	const today = await band.getAttribute('data-allday');
+	// Trukket i skridt frem for i ét spring. `dragTo` flytter musen i to træk, og
+	// over fire hundrede pixels i et travlt gitter giver det browseren for få
+	// mellemstationer til at holde gesten i live. Et menneske bevæger hånden hele
+	// vejen, og det er også det, der skal prøves.
+	const fromBox = await placed.boundingBox();
+	const toBox = await band.boundingBox();
+	await page.mouse.move(fromBox.x + fromBox.width / 2, fromBox.y + 5);
+	await page.mouse.down();
+	await page.mouse.move(toBox.x + toBox.width / 2, toBox.y + toBox.height / 2, { steps: 25 });
+	await page.mouse.up();
+	await expect(
+		page.locator(`[data-allday="${today}"] .chip`).filter({ hasText: 'ringe til tandlægen' }),
+		'opgaven kom ikke op i båndet'
+	).toBeVisible();
+	await expect(
+		page.locator(`[data-date="${today}"] .tevent`).filter({ hasText: 'ringe til tandlægen' }),
+		'opgaven står stadig på et klokkeslæt'
+	).toBeHidden();
+
+	expect(trouble).toEqual([]);
+});

web/src/lib/api.js

@@ -283,6 +283,10 @@ export const api = {
 	createSection: (projectId, name) => post(`/projects/${projectId}/sections`, { name }),
 	updateSection: (id, data) => patch(`/sections/${id}`, data),
 	deleteSection: (id) => del(`/sections/${id}`),
+	// The whole list, the same as projects and groups: a project has a handful of
+	// sections, and an order that cannot land half-applied is worth more than the
+	// bytes a single move would save.
+	reorderSections: (projectId, ids) => post(`/projects/${projectId}/sections/reorder`, { ids }),
 
 	listMembers: (projectId) => get(`/projects/${projectId}/members`),
 	invite: (projectId, email, role) => post(`/projects/${projectId}/invites`, { email, role }),

web/src/lib/components/CalendarView.svelte

@@ -272,6 +272,15 @@
 		over = iso(date);
 	}
 
+	/**
+	 * Sluppet på en dag, uden at sige noget om klokkeslættet — så beholder opgaven
+	 * det, den har. Måneden er den her: en rude er en dag, ikke et døgn, og der er
+	 * ingen tid at læse ud af hvor man slap.
+	 *
+	 * Det var ikke sådan før. Trækket sendte kun datoen, og serveren læser en dato
+	 * uden en tid som "ryd tiden" — så en opgave klokken 14 mistede sit
+	 * klokkeslæt ved at blive flyttet til dagen efter, uden at nogen bad om det.
+	 */
 	async function onDrop(event, date) {
 		event.preventDefault();
 		const id = dragged(event, TASK);
@@ -279,6 +288,184 @@
 		if (!id) return;
 		await app.reschedule(id, iso(date));
 	}
+
+	/**
+	 * Sluppet et sted på døgnet: dér, man slap, er klokkeslættet.
+	 *
+	 * Målt mod søjlens egen kasse frem for mod siden, så det bliver rigtigt, uanset
+	 * hvor gitteret sidder, og uanset hvor langt der er rullet.
+	 *
+	 * Rundet til kvarter. Minuttet under markøren er ikke en oplysning, nogen har —
+	 * pegefingeren er bredere end et minut — og 14:07 er et tal, der ser ud som om
+	 * det blev valgt, hvilket er værre end at være omtrentligt.
+	 */
+	async function onDropAt(event, date) {
+		event.preventDefault();
+		const id = dragged(event, TASK);
+		over = null;
+		if (!id) return;
+
+		const box = event.currentTarget.getBoundingClientRect();
+		const share = Math.min(Math.max((event.clientY - box.top) / box.height, 0), 1);
+		const minutes = hours.from * 60 + share * hours.minutes;
+		const snapped = Math.min(Math.round(minutes / 15) * 15, 24 * 60 - 15);
+		await app.reschedule(id, iso(date), clock(snapped));
+	}
+
+	/**
+	 * Sluppet i båndet foroven: opgaven har en dag og ingen tid.
+	 *
+	 * Den tomme streng er ikke det samme som ingenting her — den siger "ryd", hvor
+	 * `undefined` siger "behold". Det er hele grunden til, at de to er skilt ad i
+	 * `reschedule`.
+	 */
+	async function onDropAllDay(event, date) {
+		event.preventDefault();
+		const id = dragged(event, TASK);
+		over = null;
+		if (!id) return;
+		await app.reschedule(id, iso(date), '');
+	}
+
+	// --- ugen som et døgn ---------------------------------------------------------
+	//
+	// En uge, hvor hver dag er en punktopstilling, svarer på "hvad skal der ske
+	// torsdag" og ikke på "hvornår" — og det andet er det, man åbner en uge for.
+	// To møder klokken ti er en konflikt, man skal kunne *se*, ikke læse sig til.
+	//
+	// Måneden bliver som den er. En dag i en månedsrude er halvanden centimeter høj;
+	// et døgn tegnet i den er ikke en visning, det er en streg.
+
+	/** Minutter siden midnat, læst ud af strengen. */
+	const minutesAt = (stamp) => Number(stamp.slice(11, 13)) * 60 + Number(stamp.slice(14, 16));
+
+	const clock = (minutes) =>
+		`${String(Math.floor(minutes / 60)).padStart(2, '0')}:${String(minutes % 60).padStart(2, '0')}`;
+
+	/**
+	 * Det, der har et klokkeslæt på denne dag, med start og slut i minutter.
+	 *
+	 * Begivenheder læses som tekst, af samme grund som `timeOn` gør det: Google
+	 * skriver begivenhedens egen forskydning ind i stemplet, og at give det til
+	 * browseren spørger *denne maskine*, hvad klokken er. Opgaver læses med `Date`,
+	 * fordi det er sådan TaskRow gør det ét skærmbillede væk — en opgaves tid er
+	 * kontoens egen, og de to steder skal vise det samme tal.
+	 *
+	 * En begivenhed hen over midnat klippes til dagen. Uden det ville et møde fra
+	 * fredag aften til lørdag morgen blive tegnet fra 20:00 til 09:00, altså baglæns.
+	 */
+	function timedOn(date) {
+		const day = iso(date);
+		const out = [];
+
+		for (const event of events) {
+			if (event.all_day || !event.starts_at) continue;
+			if (event.start_day > day || event.end_day < day) continue;
+			const from = event.start_day === day ? minutesAt(event.starts_at) : 0;
+			let to = 24 * 60;
+			if (event.ends_at && event.end_day === day) to = minutesAt(event.ends_at);
+			else if (!event.ends_at) to = from + 60;
+			// Et kvarters gulv: et nulminuts møde er stadig noget, der skal kunne ses
+			// og klikkes på.
+			out.push({ kind: 'event', ref: event, from, to: Math.max(to, from + 15) });
+		}
+
+		for (const task of tasksOn(date)) {
+			if (!task.due_datetime) continue;
+			const at = new Date(task.due_datetime);
+			const from = at.getHours() * 60 + at.getMinutes();
+			out.push({ kind: 'task', ref: task, from, to: from + 30 });
+		}
+
+		return out.toSorted((a, b) => a.from - b.from || a.to - b.to);
+	}
+
+	/** Det uden klokkeslæt: heldagsbegivenheder og opgaver, der kun har en dato. */
+	function untimedOn(date) {
+		return [
+			...eventsOn(date)
+				.filter((e) => e.all_day || !e.starts_at)
+				.map((e) => ({ kind: 'event', ref: e })),
+			...tasksOn(date)
+				.filter((t) => !t.due_datetime)
+				.map((t) => ({ kind: 'task', ref: t }))
+		];
+	}
+
+	/**
+	 * To ting på samme tid står ved siden af hinanden, ikke oven på hinanden.
+	 *
+	 * Sammenhængende klynger frem for parvise sammenligninger: overlapper A med B og
+	 * B med C, skal alle tre dele bredden — også når A og C ikke rører hinanden.
+	 * Ellers ville A og C hver tro, de havde halvdelen, og lægge sig oven på hver sin
+	 * halvdel af B.
+	 */
+	function packed(items) {
+		const out = [];
+		let cluster = [];
+		let end = -1;
+
+		const flush = () => {
+			const lanes = [];
+			for (const item of cluster) {
+				let lane = lanes.findIndex((free) => free <= item.from);
+				if (lane === -1) {
+					lane = lanes.length;
+					lanes.push(0);
+				}
+				lanes[lane] = item.to;
+				item.lane = lane;
+			}
+			for (const item of cluster) item.lanes = lanes.length;
+			out.push(...cluster);
+			cluster = [];
+			end = -1;
+		};
+
+		for (const item of items) {
+			if (cluster.length && item.from >= end) flush();
+			cluster.push(item);
+			end = Math.max(end, item.to);
+		}
+		if (cluster.length) flush();
+		return out;
+	}
+
+	/**
+	 * Hvilke timer der tegnes.
+	 *
+	 * Et helt døgn er fireogtyve rækker, hvoraf de otte altid er tomme, og så er
+	 * gitteret noget man ruller i frem for noget man ser. Arbejdsdagen er gulvet, og
+	 * ugens egne begivenheder skubber kanterne ud, når de ligger uden for den — en
+	 * vagt klokken fem om morgenen kommer med, uden at alle andre uger betaler for
+	 * den med tomme rækker.
+	 */
+	let hours = $derived.by(() => {
+		let from = 8;
+		let to = 18;
+		if (span === 'week') {
+			for (const date of grid) {
+				for (const item of timedOn(date)) {
+					from = Math.min(from, Math.floor(item.from / 60));
+					to = Math.max(to, Math.ceil(item.to / 60));
+				}
+			}
+		}
+		from = Math.max(0, from);
+		to = Math.min(24, Math.max(to, from + 1));
+		return { from, to, count: to - from, minutes: (to - from) * 60 };
+	});
+
+	/** Hvor på døgnet noget står, som procent af de timer, der tegnes. */
+	function place(item) {
+		const top = Math.max(0, ((item.from - hours.from * 60) / hours.minutes) * 100);
+		const height = ((item.to - item.from) / hours.minutes) * 100;
+		const width = 100 / item.lanes;
+		return (
+			`top:${top}%;height:${Math.min(height, 100 - top)}%;` +
+			`left:${item.lane * width}%;width:${width}%`
+		);
+	}
 </script>
 
 <div class="calendar" class:week={span === 'week'}>
@@ -296,95 +483,195 @@
 		<button class="today" onclick={() => (cursor = startOfSpan(new Date()))}>{t('task.today')}</button>
 	</header>
 
-	<div class="weekdays" aria-hidden="true">
+	<!--
-		{#each WEEKDAYS as day}
+		Én brik, tegnet ét sted.
-			<span>{day}</span>
-		{/each}
-	</div>
 
-	<div class="grid">
+		Måneden og ugen viser de samme to ting og skal vise dem ens — men de placerer
-		{#each grid as date (date.toISOString())}
+		dem forskelligt: måneden lader dem stå i rækkefølge i en rude, ugen sætter
-			{@const dayEvents = eventsOn(date)}
+		dem på et klokkeslæt. Det er placeringen, der er forskellig, ikke brikken, så
-			<!-- Events first, then whatever room is left goes to tasks. An event is
+		det er kun placeringen, der står to steder.
-			     fixed to a time somebody else chose; a task is only dated, and if
-			     something in a full cell has to fall behind "+3 mere", it should be
-			     the one that can be moved. -->
-			{@const tasks = tasksOn(date).slice(0, Math.max(0, chipLimit - dayEvents.length))}
-			{@const hidden =
-				tasksOn(date).length - tasks.length + Math.max(0, dayEvents.length - chipLimit)}
-			<!-- A week has no outside: every day in it is the week you asked for. -->
-			{@const outside = span !== 'week' && date.getMonth() !== cursor.getMonth()}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class="day"
-				data-date={iso(date)}
-				class:outside
-				class:today={iso(date) === todayISO}
-				class:over={over === iso(date)}
-				ondragover={(e) => onDragOver(e, date)}
-				ondragleave={() => (over = null)}
-				ondrop={(e) => onDrop(e, date)}
-			>
-				<!-- The weekday strip above the grid is enough on a wide screen. A week
-				     stacked into rows on a phone hides it, and a column of bare numbers
-				     is not a week — so the cell carries its own name there. -->
-				{#if span === 'week'}
-					<span class="weekday">{WEEKDAYS[(date.getDay() + 6) % 7]}</span>
-				{/if}
-				<span class="number">{date.getDate()}</span>
 
-				{#each dayEvents.slice(0, chipLimit) as event (event.id)}
+		`extra` er den absolutte placering i ugegitteret og tom i måneden. `at` er
-					{@const link = linkOf(event)}
+		klokkeslættet, når det ikke allerede står i brikken selv.
-					{@const label = t('cal.eventCannotMove', {
+	-->
-						name: event.summary,
+	{#snippet eventChip(event, date, kind, extra = '', at = '')}
-						calendar: event.calendar_name || t('cal.title')
+		{@const link = linkOf(event)}
-					})}
+		{@const label = t('cal.eventCannotMove', {
-					<!-- Not draggable, and it says so twice: the attribute stops the
+			name: event.summary,
-					     browser dragging an anchor of its own accord, and the title says
+			calendar: event.calendar_name || t('cal.title')
-					     why to anybody who tries. The drop targets would refuse it anyway
+		})}
-					     — they only accept the task MIME type — but a chip that lifts off
+		<!-- Not draggable, and it says so twice: the attribute stops the browser
-					     the page and then will not land reads as a bug rather than as a
+		     dragging an anchor of its own accord, and the title says why to anybody
-					     rule. It is also not a button: there is nothing here to complete,
+		     who tries. The drop targets would refuse it anyway — they only accept the
-					     and a checkbox next to a meeting is an offer verdande cannot keep. -->
+		     task MIME type — but a chip that lifts off the page and then will not land
-					<svelte:element
+		     reads as a bug rather than as a rule. It is also not a button: there is
-						this={link ? 'a' : 'span'}
+		     nothing here to complete, and a checkbox next to a meeting is an offer
-						class="event"
+		     verdande cannot keep. -->
-						class:allday={event.all_day}
+		<svelte:element
-						draggable="false"
+			this={link ? 'a' : 'span'}
-						href={link || undefined}
+			class={kind}
-						target={link ? '_blank' : undefined}
+			class:allday={event.all_day}
-						rel={link ? 'noreferrer noopener' : undefined}
+			draggable="false"
-						title={link ? `${label} — ${t('cal.openInGoogle')}` : label}
+			href={link || undefined}
-						style={swatch(event.colour) ? `--event-colour: ${swatch(event.colour)}` : undefined}
+			target={link ? '_blank' : undefined}
-					>
+			rel={link ? 'noreferrer noopener' : undefined}
-						{#if timeOn(event, date)}<span class="at">{timeOn(event, date)}</span>{/if}
+			title={link ? `${label} — ${t('cal.openInGoogle')}` : label}
-						{event.summary}
+			style={[swatch(event.colour) ? `--event-colour: ${swatch(event.colour)}` : '', extra]
-					</svelte:element>
+				.filter(Boolean)
+				.join(';')}
+		>
+			{#if at}<span class="at">{at}</span>{:else if timeOn(event, date)}<span class="at"
+					>{timeOn(event, date)}</span
+				>{/if}
+			{event.summary}
+		</svelte:element>
+	{/snippet}
+
+	{#snippet taskChip(task, kind, extra = '', at = '')}
+		<!-- Draggable as well as clickable: moving something to another day is the
+		     whole reason to be looking at a calendar. The browser needs a few pixels
+		     of movement before it calls a press a drag, so the click survives. -->
+		<button
+			class={kind}
+			data-priority={task.priority}
+			draggable="true"
+			ondragstart={(e) => startDrag(e, TASK, task.id)}
+			ondragend={() => (over = null)}
+			onclick={() => onselect?.(task)}
+			style={extra}
+		>
+			{#if at}<span class="at">{at}</span>{/if}
+			{task.content}
+		</button>
+	{/snippet}
+
+	{#if span === 'week'}
+		<!-- Ugen som et døgn, ikke som syv punktopstillinger.
+		     Rullet vandret på en smal skærm frem for stablet til én søjle: der er
+		     ét sæt afleveringsmål her, og et andet sæt til telefonen ville være
+		     endnu et sted, den samme regel kunne være næsten rigtig. -->
+		<div class="weekwrap">
+			<div class="weekgrid" style="--hours: {hours.count}">
+				<div class="corner"></div>
+				{#each grid as date (date.toISOString())}
+					<div class="head" class:today={iso(date) === todayISO}>
+						<span class="wd">{WEEKDAYS[(date.getDay() + 6) % 7]}</span>
+						<span class="num">{date.getDate()}</span>
+					</div>
 				{/each}
 
-				{#each tasks as task (task.id)}
+				<!-- Båndet foroven: det, der ikke har et klokkeslæt og derfor ikke kan
-					<!-- Draggable as well as clickable: within a month, moving something
+				     stå ét sted på døgnet. En heldagsbegivenhed lagt klokken nul ville
-					     to another day is the whole reason to be looking at a month. The
+				     påstå, den holdt fra midnat til midnat. -->
-					     browser needs a few pixels of movement before it calls a press a
+				<div class="gutter">{t('cal.allDay')}</div>
-					     drag, so the click survives. -->
+				{#each grid as date (date.toISOString())}
-					<button
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
-						class="chip"
+					<div
-						data-priority={task.priority}
+						class="allday"
-						draggable="true"
+						data-allday={iso(date)}
-						ondragstart={(e) => startDrag(e, TASK, task.id)}
+						class:over={over === iso(date)}
-						ondragend={() => (over = null)}
+						ondragover={(e) => onDragOver(e, date)}
-						onclick={() => onselect?.(task)}
+						ondragleave={() => (over = null)}
+						ondrop={(e) => onDropAllDay(e, date)}
 					>
-						{task.content}
+						{#each untimedOn(date) as item (item.kind + item.ref.id)}
-					</button>
+							{#if item.kind === 'event'}
+								{@render eventChip(item.ref, date, 'event')}
+							{:else}
+								{@render taskChip(item.ref, 'chip')}
+							{/if}
+						{/each}
+					</div>
 				{/each}
 
-				{#if hidden > 0}
+				<div class="gutter times">
-					<span class="more">{t('view.more', { n: hidden })}</span>
+					{#each Array(hours.count) as _, i}
-				{/if}
+						<span class="hour">{clock((hours.from + i) * 60)}</span>
+					{/each}
+				</div>
+				{#each grid as date (date.toISOString())}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<!-- `data-date` er dagens navn udadtil. Månedens ruder har altid haft
+					     det, og ugens søjler skal have det af samme grund: det er sådan
+					     noget uden for komponenten peger på en dag — og det er det, en
+					     prøve slipper en opgave på. Heldagsbåndet får sit eget navn, så
+					     de to ikke bliver til det samme svar på ét spørgsmål. -->
+					<div
+						class="daycol"
+						data-date={iso(date)}
+						class:today={iso(date) === todayISO}
+						class:over={over === iso(date)}
+						ondragover={(e) => onDragOver(e, date)}
+						ondragleave={() => (over = null)}
+						ondrop={(e) => onDropAt(e, date)}
+					>
+						{#each Array(hours.count) as _, i}
+							<div class="hourline" style="top:{(i / hours.count) * 100}%"></div>
+						{/each}
+						{#each packed(timedOn(date)) as item (item.kind + item.ref.id)}
+							{#if item.kind === 'event'}
+								{@render eventChip(item.ref, date, 'tevent', place(item))}
+							{:else}
+								{@render taskChip(item.ref, 'tevent task', place(item), clock(item.from))}
+							{/if}
+						{/each}
+					</div>
+				{/each}
 			</div>
-		{/each}
+		</div>
-	</div>
+	{:else}
+		<div class="weekdays" aria-hidden="true">
+			{#each WEEKDAYS as day}
+				<span>{day}</span>
+			{/each}
+		</div>
+
+		<div class="grid">
+			{#each grid as date (date.toISOString())}
+				{@const dayEvents = eventsOn(date)}
+				<!-- Events first, then whatever room is left goes to tasks. An event is
+				     fixed to a time somebody else chose; a task is only dated, and if
+				     something in a full cell has to fall behind "+3 mere", it should be
+				     the one that can be moved. -->
+				{@const tasks = tasksOn(date).slice(0, Math.max(0, chipLimit - dayEvents.length))}
+				{@const hidden =
+					tasksOn(date).length - tasks.length + Math.max(0, dayEvents.length - chipLimit)}
+				<!-- A week has no outside: every day in it is the week you asked for. -->
+				{@const outside = span !== 'week' && date.getMonth() !== cursor.getMonth()}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="day"
+					data-date={iso(date)}
+					class:outside
+					class:today={iso(date) === todayISO}
+					class:over={over === iso(date)}
+					ondragover={(e) => onDragOver(e, date)}
+					ondragleave={() => (over = null)}
+					ondrop={(e) => onDrop(e, date)}
+				>
+					<!-- The weekday strip above the grid is enough on a wide screen. A week
+					     stacked into rows on a phone hides it, and a column of bare numbers
+					     is not a week — so the cell carries its own name there. -->
+					{#if span === 'week'}
+						<span class="weekday">{WEEKDAYS[(date.getDay() + 6) % 7]}</span>
+					{/if}
+					<span class="number">{date.getDate()}</span>
+
+					{#each dayEvents.slice(0, chipLimit) as event (event.id)}
+						{@render eventChip(event, date, 'event')}
+					{/each}
+
+					{#each tasks as task (task.id)}
+						{@render taskChip(task, 'chip')}
+					{/each}
+
+					{#if hidden > 0}
+						<span class="more">{t('view.more', { n: hidden })}</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -448,9 +735,19 @@
 		border: 1px solid var(--line);
 	}
 
+	/* `minmax(0, 1fr)` og ikke `1fr`.
+	 *
+	 * `1fr` er `minmax(auto, 1fr)`, og `auto` som minimum betyder, at en søjle ikke
+	 * kan blive smallere end sit længste ord. Én opgave, der hedder "Gårdbutikken på
+	 * Møllerup Gods — opfølgning på mail", gjorde onsdag dobbelt så bred som mandag
+	 * og klemte resten af ugen sammen om den. Syv dage er syv lige store dage; det
+	 * er hele idéen med et gitter.
+	 *
+	 * Nul som minimum lader søjlen blive så smal, den skal — og så er det brikkens
+	 * opgave at klippe sin tekst af, hvilket den allerede gør. */
 	.weekdays {
 		display: grid;
-		grid-template-columns: repeat(7, 1fr);
+		grid-template-columns: repeat(7, minmax(0, 1fr));
 		gap: 1px;
 		margin-bottom: var(--s2);
 	}
@@ -465,7 +762,7 @@
 
 	.grid {
 		display: grid;
-		grid-template-columns: repeat(7, 1fr);
+		grid-template-columns: repeat(7, minmax(0, 1fr));
 		gap: 1px;
 		background: var(--line);
 		border: 1px solid var(--line);
@@ -473,6 +770,168 @@
 		overflow: hidden;
 	}
 
+	/* --- ugen som et døgn ---------------------------------------------------
+	 *
+	 * Et gitter med en tidsrende og syv dage, og tre rækker: dagenes navne, båndet
+	 * med det, der ikke har et klokkeslæt, og selve døgnet.
+	 *
+	 * Rullet vandret på en smal skærm frem for stablet til én søjle. Syv timeglas
+	 * ved siden af hinanden kan ikke blive smalle nok til en telefon, og en uge
+	 * stablet til en liste er præcis det, den her visning findes for at holde op
+	 * med at være. */
+	.weekwrap {
+		overflow-x: auto;
+	}
+
+	.weekgrid {
+		display: grid;
+		grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr));
+		gap: 1px;
+		min-width: 640px;
+		background: var(--line);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		overflow: hidden;
+	}
+
+	.corner,
+	.head,
+	.gutter,
+	.allday,
+	.daycol {
+		background: var(--ground);
+	}
+
+	.head {
+		padding: var(--s2) var(--s1);
+		text-align: center;
+	}
+
+	.head .wd {
+		display: block;
+		font-size: var(--text-xs);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--ink-faint);
+	}
+
+	.head .num {
+		font-size: var(--text-sm);
+	}
+
+	.head.today .num {
+		color: var(--accent);
+		font-weight: 560;
+	}
+
+	.gutter {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--s1) var(--s2);
+		font-size: var(--text-xs);
+		line-height: 1.2;
+		color: var(--ink-faint);
+		text-align: right;
+	}
+
+	.allday {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding: var(--s1);
+		min-height: 1.75rem;
+	}
+
+	/* Rækken er lige så høj som de timer, den viser. `--hours` sættes på gitteret,
+	   fordi tallet kommer fra ugens egne begivenheder og ikke fra stilarket. */
+	.times {
+		display: grid;
+		align-items: start;
+		justify-content: stretch;
+		grid-template-rows: repeat(var(--hours), 1fr);
+		height: calc(var(--hours) * 3rem);
+		padding: 0 var(--s2) 0 0;
+	}
+
+	/* Klokkeslættet står ved sin egen streg og ikke midt i timen under den. */
+	.times .hour {
+		transform: translateY(-0.55em);
+		line-height: 1;
+	}
+
+	/* Undtagen det første, som ellers kravler op i heldagsbåndet: der er ingen streg
+	   over den første time — der er gitterets kant, og et tal, der ligger oven på
+	   den, ser ud til at høre til rækken ovenover. */
+	.times .hour:first-child {
+		transform: none;
+	}
+
+	.daycol {
+		position: relative;
+		height: calc(var(--hours) * 3rem);
+	}
+
+	.hourline {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 1px;
+		background: var(--line);
+		pointer-events: none;
+	}
+
+	/* Den første streg er gitterets egen kant. */
+	.hourline:first-child {
+		display: none;
+	}
+
+	.allday.over,
+	.daycol.over {
+		background: var(--accent-sunken, var(--surface-raised));
+		box-shadow: inset 0 0 0 1px var(--accent);
+	}
+
+	/* 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. */
+	.tevent {
+		position: absolute;
+		margin-right: 2px;
+		overflow: hidden;
+		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);
+		font-size: var(--text-xs);
+		line-height: 1.3;
+		text-align: left;
+		text-decoration: none;
+	}
+
+	.tevent.task {
+		background: var(--surface-raised);
+		border-left-color: var(--line-strong);
+		color: var(--ink);
+		cursor: grab;
+	}
+
+	.tevent.task[data-priority='1'] {
+		border-left-color: var(--p1);
+	}
+	.tevent.task[data-priority='2'] {
+		border-left-color: var(--p2);
+	}
+	.tevent.task[data-priority='3'] {
+		border-left-color: var(--p3);
+	}
+
+	.tevent .at {
+		color: var(--ink-faint);
+		margin-right: 0.3em;
+	}
+
 	.day {
 		background: var(--ground);
 		min-height: 92px;

web/src/lib/components/NoteEditor.svelte

@@ -35,20 +35,53 @@
 	let loadedId = $state(null);
 	$effect(() => {
 		if (!editor || !note || note.id === loadedId) return;
-		// An empty note opens on its title. That is what Apple Notes does, and it is
+
-		// also what the list needs: the first line becomes the name of the note, so a
+		// Sat *før* tegningen, ikke efter.
-		// note whose first line is body text is a note called by its first sentence.
 		//
-		// Tested on the text and not on the rendered result: an empty body renders as
+		// Kaster noget herunder, er noten stadig den, der er forsøgt indlæst — og
-		// one empty paragraph, not as nothing, so a falsy check here never fired.
+		// uden det her ville effekten prøve igen ved hver eneste ændring bagefter og
-		editor.innerHTML = note.body.trim() ? markdownToHtml(note.body) : '<h1><br></h1>';
+		// kaste hver gang.
 		loadedId = note.id;
 		active = {};
 		// Kildevisningen hører til den note, den blev slået til på. Skifter man note,
 		// er det den rige flade, man skal møde — ellers står den næste note som kode,
 		// uden at nogen har bedt om det.
 		asSource = false;
-		colourCode();
+
+		// Én note, der ikke kan tegnes, må ikke tage ruden med sig.
+		//
+		// Det var `note.body.trim()` uden værn, og `body` er en streng fra serveren
+		// hver eneste gang — indtil den ikke er. Så kaster den her inde i et
+		// `$effect`, og en effekt, der kaster, tager komponentens opdateringer med
+		// sig: den forrige note bliver stående, og *ingen* note kan åbnes bagefter.
+		// Klikket kan ikke engang lande. Meldt ind som "jeg kan ikke skifte mellem
+		// noter, uanset hvilken jeg trykker på", hvilket er præcis, hvad det ser ud
+		// som fra den anden side.
+		//
+		// Fejlen står i konsollen frem for i en toast: den hører til den, der kan
+		// rette den, og en note, der viser sin egen tekst uden formatering, siger
+		// allerede til den, der læser den, at noget er galt.
+		//
+		// `textContent` og ikke `innerHTML` i faldbakken — teksten er ikke tegnet, og
+		// at lægge den ind som markup ville være at køre det, tegningen lige nægtede.
+		// Gemningen er ikke i fare: den skriver `draft`, som kommer fra svaret og
+		// ikke fra det, der står i editoren, indtil nogen taster i den.
+		const body = note.body ?? '';
+		try {
+			// An empty note opens on its title. That is what Apple Notes does, and it
+			// is also what the list needs: the first line becomes the name of the
+			// note, so a note whose first line is body text is a note called by its
+			// first sentence.
+			//
+			// Tested on the text and not on the rendered result: an empty body renders
+			// as one empty paragraph, not as nothing, so a falsy check here never
+			// fired.
+			editor.innerHTML = body.trim() ? markdownToHtml(body) : '<h1><br></h1>';
+			colourCode();
+		} catch (e) {
+			editor.textContent = body;
+			console.error('verdande: noten kunne ikke tegnes', note.id, e);
+		}
 	});
 
 	const SYNTAX = [
@@ -884,8 +917,20 @@
 		 * clamp frem for et tal: en smal rude får det hele, en bred får en
 		 * linjelængde, øjet kan finde tilbage i. Øvre grænse omkring 68rem, hvor en
 		 * linje er lang nok til at rumme en kommando og kort nok til at læse. */
-		max-width: clamp(38rem, 92%, 68rem);
+		/* Grænsen sættes som polstring og ikke som bredde, og det er rullebjælken,
+		 * der afgør det.
+		 *
+		 * Det er *dette* element, der ruller. Var det også det, der blev smallere,
+		 * fulgte rullebjælken med ind: den stod ved tekstsøjlens kant med en
+		 * håndflade tom rude til højre for sig og svævede midt i arket. Med
+		 * polstring er elementet lige så bredt som ruden — bjælken bliver ved
+		 * kanten, hvor den hører til — og teksten er nøjagtig lige så bred som før.
+		 *
+		 * `max()` mod nul, fordi en smal rude ellers ville få negativ polstring, og
+		 * `border-box` er sat globalt, så bredden er hele boksen og ikke boksen plus
+		 * polstringen. Uden det ville det her give en vandret rullebjælke. */
 		width: 100%;
+		padding-right: max(0px, calc(100% - clamp(38rem, 92%, 68rem)));
 	}
 
 	.hidden {

web/src/lib/components/QuickAdd.svelte

@@ -221,6 +221,13 @@
 		gap: var(--s3);
 		padding: var(--s3) var(--s2);
 		border-bottom: 1px solid var(--line);
+		/* Luft under stregen.
+		 *
+		 * Stregen skiller "skriv en ny" fra "det, der allerede er", og uden afstand
+		 * sad den første sektion klods op ad den — så den læste som en kant om
+		 * sektionen frem for som en afslutning på feltet over. En streg skal have
+		 * plads på begge sider for at kunne ses som en streg. */
+		margin-bottom: var(--s4);
 	}
 
 	.plus {

web/src/lib/components/Sidebar.svelte

@@ -639,301 +639,313 @@
 		</h2>
 	{/snippet}
 
-	<div class="group">
+	<!-- Alt herunder ruller; mærket og de faste visninger gør ikke.
-		<!-- The heading is also the drop target for "no group": without it, a project
+	     Hele sidebjælken rullede før, så runen og I dag forsvandt op over kanten,
-		     dragged into a group could only be got out again by emptying the group,
+	     så snart der var projekter nok — og de er dem, man er på vej hen til
-		     and with every project filed there would be no loose row left to aim at. -->
+	     oftest. En rulleboks indeni frem for `position: sticky` udenom, fordi et
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
+	     klæbende hoved efterlader rullebjælken i fuld højde ved siden af sig: den
-		<div
+	     skal begynde under hovedet, ikke bag det.
-			class="group-head"
-			class:over={overGroup === ''}
-			ondragover={(e) => {
-				if (!carries(e, PROJECT)) return;
-				accept(e);
-				overGroup = '';
-				overId = null;
-			}}
-			ondragleave={() => (overGroup = null)}
-			ondrop={(e) => onDropInGroup(e, '')}
-		>
-			{@render foldHeading('projects', t('sidebar.projects'))}
-			<button
-				class="icon"
-				onclick={() => {
-					adding = !adding;
-					addingGroup = false;
-				}}
-				aria-label={t('sidebar.newProject')}>+</button
-			>
-			<button
-				class="icon new-group"
-				onclick={() => {
-					addingGroup = !addingGroup;
-					adding = false;
-					newGroupName = '';
-				}}
-				aria-label={t('sidebar.newGroup')}
-				title={t('sidebar.newGroup')}
-			>
-				<svg viewBox="0 0 24 24" aria-hidden="true">
-					<path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
-				</svg>
-			</button>
-		</div>
 
-		{#if adding}
+	     Snippet-erklæringerne bliver liggende udenfor. De tegner ikke noget selv,
-			<form onsubmit={createProject}>
+	     men de kaldes oppe fra .views, og en snippet erklæret herinde hører kun
-				<input
+	     til herinde. -->
-					bind:value={newName}
+	<div class="scroller">
-					use:focusOnMount
+		<div class="group">
-					placeholder={t('sidebar.projectName')}
+			<!-- The heading is also the drop target for "no group": without it, a project
-					aria-label={t('sidebar.projectName')}
+			     dragged into a group could only be got out again by emptying the group,
-					onblur={() => !newName.trim() && (adding = false)}
+			     and with every project filed there would be no loose row left to aim at. -->
-					onkeydown={(e) => e.key === 'Escape' && (adding = false)}
-				/>
-			</form>
-		{/if}
-
-		{#if addingGroup}
-			<form onsubmit={createGroup}>
-				<input
-					bind:value={newGroupName}
-					use:focusOnMount
-					placeholder={t('sidebar.groupName')}
-					aria-label={t('sidebar.groupName')}
-					onblur={() => !newGroupName.trim() && (addingGroup = false)}
-					onkeydown={(e) => e.key === 'Escape' && (addingGroup = false)}
-				/>
-			</form>
-		{/if}
-
-		{#if !app.sectionCollapsed('projects')}
-			{#each ungrouped as project (project.id)}
-				{@render projectRow(project, true)}
-			{/each}
-
-			{#if own.length === 0 && !adding}
-				<p class="empty">{t('sidebar.noProjects')}</p>
-			{/if}
-		{/if}
-	</div>
-
-	{#each groups as group (group.id)}
-		{@const inside = inGroup(group.id)}
-		<div class="group folder">
-			<!-- Draggable, except while it is being renamed: a draggable ancestor stops
-			     the pointer from selecting text in the field it contains. -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				class="group-head folder-head"
+				class="group-head"
-				class:over={overGroup === group.id}
+				class:over={overGroup === ''}
-				class:drop-above={overId === group.id && !overBelow}
+				ondragover={(e) => {
-				class:drop-below={overId === group.id && overBelow}
+					if (!carries(e, PROJECT)) return;
-				class:dragging={draggingGroup === group.id}
+					accept(e);
-				draggable={renamingGroup !== group.id}
+					overGroup = '';
-				ondragstart={(e) => onGroupDragStart(e, group)}
-				ondragend={clearDrag}
-				ondragover={(e) => onGroupDragOver(e, group)}
-				ondragleave={() => {
-					overGroup = null;
 					overId = null;
 				}}
-				ondrop={(e) => onGroupDrop(e, group)}
+				ondragleave={() => (overGroup = null)}
-				ondblclick={() => startRename(group)}
+				ondrop={(e) => onDropInGroup(e, '')}
-				onkeydown={(e) => {
-					if (e.key === 'F2') {
-						e.preventDefault();
-						startRename(group);
-					}
-				}}
 			>
-				{#if renamingGroup === group.id}
+				{@render foldHeading('projects', t('sidebar.projects'))}
-					<!-- Renaming is where the colour is chosen too.
+				<button
-					     The dot used to be a button in the row, which made the heading
+					class="icon"
-					     carry four controls — dot, name, Omdøb, Slet — on a line narrow
+					onclick={() => {
-					     enough that they crowded the name. Both are edits to the same
+						adding = !adding;
-					     thing, so both belong in the same moment: you open the group to
+						addingGroup = false;
-					     change it, and change what you came to change.
+					}}
-
+					aria-label={t('sidebar.newProject')}>+</button
-					     `focusout` rather than `blur` closes it, and only when focus has
+				>
-					     left the form altogether — clicking a swatch is still inside it.
+				<button
-					     The swatches also refuse focus on mousedown, because Safari and
+					class="icon new-group"
-					     Firefox do not focus a button on click, so `relatedTarget` would
+					onclick={() => {
-					     be null and the form would shut under the pointer. -->
+						addingGroup = !addingGroup;
-					<form
+						adding = false;
-						class="renaming"
+						newGroupName = '';
-						onsubmit={(e) => renameGroup(e, group)}
+					}}
-						onfocusout={(e) => {
+					aria-label={t('sidebar.newGroup')}
-							if (!e.currentTarget.contains(e.relatedTarget)) renamingGroup = null;
+					title={t('sidebar.newGroup')}
-						}}
+				>
-					>
+					<svg viewBox="0 0 24 24" aria-hidden="true">
-						<input
+						<path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
-							bind:value={groupName}
+					</svg>
-							use:focusOnMount
+				</button>
-							aria-label={t('sidebar.groupName')}
-							onkeydown={(e) => e.key === 'Escape' && (renamingGroup = null)}
-						/>
-						<div class="swatches" role="group" aria-label={t('group.colorOf', { name: group.name })}>
-							{#each COLORS as color (color.id)}
-								<button
-									type="button"
-									class="swatch"
-									class:chosen={(group.color ?? 'graphite') === color.id}
-									style="background: {colorVar(color.id)}"
-									title={t(color.name)}
-									aria-label={t(color.name)}
-									aria-pressed={(group.color ?? 'graphite') === color.id}
-									onmousedown={(e) => e.preventDefault()}
-									onclick={() => app.setGroupColor(group.id, color.id)}
-								></button>
-							{/each}
-						</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. -->
-					<button
-						class="chevron-button"
-						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>
-					</button>
-					<h2 class="fold">
-						<!-- Navigation waits two tenths of a second for a second click. A
-						     link cannot know a double is coming without pausing, and the
-						     alternative was worse than the pause: the first click opened the
-						     page while the rename form was appearing, and the colour swatches
-						     moved out from under the pointer. Two tenths is under the double
-						     click threshold and over the threshold of noticing. -->
-						<a
-							href="/gruppe/{group.id}"
-							onclick={(e) => {
-								e.preventDefault();
-								clearTimeout(navTimer);
-								if (e.detail > 1) return;
-								navTimer = setTimeout(() => {
-									onnavigate();
-									goto(`/gruppe/${group.id}`);
-								}, 200);
-							}}
-						>
-							<span
-								class="dot group-dot"
-								style="background: {colorVar(group.color)}"
-								aria-hidden="true"
-							></span>
-							{group.name}
-						</a>
-					</h2>
-					<span class="count">{inside.length}</span>
-				{/if}
 			</div>
 
-			{#if !group.collapsed}
+			{#if adding}
-				{#each inside as project (project.id)}
+				<form onsubmit={createProject}>
+					<input
+						bind:value={newName}
+						use:focusOnMount
+						placeholder={t('sidebar.projectName')}
+						aria-label={t('sidebar.projectName')}
+						onblur={() => !newName.trim() && (adding = false)}
+						onkeydown={(e) => e.key === 'Escape' && (adding = false)}
+					/>
+				</form>
+			{/if}
+
+			{#if addingGroup}
+				<form onsubmit={createGroup}>
+					<input
+						bind:value={newGroupName}
+						use:focusOnMount
+						placeholder={t('sidebar.groupName')}
+						aria-label={t('sidebar.groupName')}
+						onblur={() => !newGroupName.trim() && (addingGroup = false)}
+						onkeydown={(e) => e.key === 'Escape' && (addingGroup = false)}
+					/>
+				</form>
+			{/if}
+
+			{#if !app.sectionCollapsed('projects')}
+				{#each ungrouped as project (project.id)}
 					{@render projectRow(project, true)}
 				{/each}
-				{#if !inside.length}
+
-					<p class="empty">{t('sidebar.emptyGroup')}</p>
+				{#if own.length === 0 && !adding}
+					<p class="empty">{t('sidebar.noProjects')}</p>
 				{/if}
 			{/if}
 		</div>
-	{/each}
 
-	{#if shared.length}
+		{#each groups as group (group.id)}
-		<div class="group">
+			{@const inside = inGroup(group.id)}
-			<div class="group-head">{@render foldHeading('shared', t('sidebar.shared'))}</div>
+			<div class="group folder">
-			{#if !app.sectionCollapsed('shared')}
+				<!-- Draggable, except while it is being renamed: a draggable ancestor stops
-				{#each shared as project (project.id)}
+				     the pointer from selecting text in the field it contains. -->
-					{@render projectRow(project, false)}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				{/each}
+				<div
-			{/if}
+					class="group-head folder-head"
-		</div>
+					class:over={overGroup === group.id}
-	{/if}
+					class:drop-above={overId === group.id && !overBelow}
+					class:drop-below={overId === group.id && overBelow}
+					class:dragging={draggingGroup === group.id}
+					draggable={renamingGroup !== group.id}
+					ondragstart={(e) => onGroupDragStart(e, group)}
+					ondragend={clearDrag}
+					ondragover={(e) => onGroupDragOver(e, group)}
+					ondragleave={() => {
+						overGroup = null;
+						overId = null;
+					}}
+					ondrop={(e) => onGroupDrop(e, group)}
+					ondblclick={() => startRename(group)}
+					onkeydown={(e) => {
+						if (e.key === 'F2') {
+							e.preventDefault();
+							startRename(group);
+						}
+					}}
+				>
+					{#if renamingGroup === group.id}
+						<!-- Renaming is where the colour is chosen too.
+						     The dot used to be a button in the row, which made the heading
+						     carry four controls — dot, name, Omdøb, Slet — on a line narrow
+						     enough that they crowded the name. Both are edits to the same
+						     thing, so both belong in the same moment: you open the group to
+						     change it, and change what you came to change.
 
-	{#if filters.length}
+						     `focusout` rather than `blur` closes it, and only when focus has
-		<div class="group">
+						     left the form altogether — clicking a swatch is still inside it.
-			<div class="group-head">{@render foldHeading('filters', t('sidebar.filters'))}</div>
+						     The swatches also refuse focus on mousedown, because Safari and
-			{#if !app.sectionCollapsed('filters')}
+						     Firefox do not focus a button on click, so `relatedTarget` would
-				{#each filters as filter (filter.id)}
+						     be null and the form would shut under the pointer. -->
-					<a
+						<form
-						href="/filter/{filter.id}"
+							class="renaming"
-						class:active={current === `/filter/${filter.id}`}
+							onsubmit={(e) => renameGroup(e, group)}
-						onclick={onnavigate}
+							onfocusout={(e) => {
-					>
+								if (!e.currentTarget.contains(e.relatedTarget)) renamingGroup = null;
-						<span class="dot" aria-hidden="true"></span>
+							}}
-						{filter.name}
+						>
-					</a>
+							<input
-				{/each}
+								bind:value={groupName}
-			{/if}
+								use:focusOnMount
-		</div>
+								aria-label={t('sidebar.groupName')}
-	{/if}
+								onkeydown={(e) => e.key === 'Escape' && (renamingGroup = null)}
+							/>
+							<div class="swatches" role="group" aria-label={t('group.colorOf', { name: group.name })}>
+								{#each COLORS as color (color.id)}
+									<button
+										type="button"
+										class="swatch"
+										class:chosen={(group.color ?? 'graphite') === color.id}
+										style="background: {colorVar(color.id)}"
+										title={t(color.name)}
+										aria-label={t(color.name)}
+										aria-pressed={(group.color ?? 'graphite') === color.id}
+										onmousedown={(e) => e.preventDefault()}
+										onclick={() => app.setGroupColor(group.id, color.id)}
+									></button>
+								{/each}
+							</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. -->
+						<button
+							class="chevron-button"
+							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>
+						</button>
+						<h2 class="fold">
+							<!-- Navigation waits two tenths of a second for a second click. A
+							     link cannot know a double is coming without pausing, and the
+							     alternative was worse than the pause: the first click opened the
+							     page while the rename form was appearing, and the colour swatches
+							     moved out from under the pointer. Two tenths is under the double
+							     click threshold and over the threshold of noticing. -->
+							<a
+								href="/gruppe/{group.id}"
+								onclick={(e) => {
+									e.preventDefault();
+									clearTimeout(navTimer);
+									if (e.detail > 1) return;
+									navTimer = setTimeout(() => {
+										onnavigate();
+										goto(`/gruppe/${group.id}`);
+									}, 200);
+								}}
+							>
+								<span
+									class="dot group-dot"
+									style="background: {colorVar(group.color)}"
+									aria-hidden="true"
+								></span>
+								{group.name}
+							</a>
+						</h2>
+						<span class="count">{inside.length}</span>
+					{/if}
+				</div>
 
-	{#if labels.length}
+				{#if !group.collapsed}
-		<div class="group">
+					{#each inside as project (project.id)}
-			<div class="group-head">{@render foldHeading('labels', t('sidebar.labels'))}</div>
+						{@render projectRow(project, true)}
-			{#if !app.sectionCollapsed('labels')}
+					{/each}
-				{#each labels.filter((l) => l.task_count > 0) as label (label.id)}
+					{#if !inside.length}
-					<a
+						<p class="empty">{t('sidebar.emptyGroup')}</p>
-						href="/etiket/{encodeURIComponent(label.name)}"
+					{/if}
-						class:active={current === `/etiket/${encodeURIComponent(label.name)}`}
+				{/if}
-						onclick={onnavigate}
+			</div>
-					>
+		{/each}
-						<span class="dot" aria-hidden="true"></span>
-						{label.name}
-						<span class="count">{label.task_count}</span>
-					</a>
-				{/each}
-			{/if}
-		</div>
-	{/if}
 
-	<div class="foot">
+		{#if shared.length}
-		<a
+			<div class="group">
-			href="/indstillinger"
+				<div class="group-head">{@render foldHeading('shared', t('sidebar.shared'))}</div>
-			class="settings"
+				{#if !app.sectionCollapsed('shared')}
-			class:active={current.startsWith('/indstillinger')}
+					{#each shared as project (project.id)}
-			onclick={onnavigate}
+						{@render projectRow(project, false)}
-		>
+					{/each}
-			<svg viewBox="0 0 24 24" aria-hidden="true">
+				{/if}
-				<circle cx="12" cy="12" r="3" />
+			</div>
-				<path
-					d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 008 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9v0a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"
-				/>
-			</svg>
-			{t('nav.settings')}
-		</a>
-
-		<!-- A quiet indicator, not an alarm: losing the socket for a moment is
-		     normal, and the app keeps working without it. -->
-		{#if !app.connected}
-			<span class="offline" title={t('nav.offlineHint')}>{t('nav.offline')}</span>
 		{/if}
-		<button class="user" onclick={signOut}>
+
-			<span class="avatar" style="background: {app.user?.avatar_color}">
+		{#if filters.length}
-				{app.user?.name?.[0]?.toUpperCase() ?? '?'}
+			<div class="group">
-			</span>
+				<div class="group-head">{@render foldHeading('filters', t('sidebar.filters'))}</div>
-			<span class="user-name">{app.user?.name}</span>
+				{#if !app.sectionCollapsed('filters')}
-			<span class="signout">{t('nav.signOut')}</span>
+					{#each filters as filter (filter.id)}
-		</button>
+						<a
+							href="/filter/{filter.id}"
+							class:active={current === `/filter/${filter.id}`}
+							onclick={onnavigate}
+						>
+							<span class="dot" aria-hidden="true"></span>
+							{filter.name}
+						</a>
+					{/each}
+				{/if}
+			</div>
+		{/if}
+
+		{#if labels.length}
+			<div class="group">
+				<div class="group-head">{@render foldHeading('labels', t('sidebar.labels'))}</div>
+				{#if !app.sectionCollapsed('labels')}
+					{#each labels.filter((l) => l.task_count > 0) as label (label.id)}
+						<a
+							href="/etiket/{encodeURIComponent(label.name)}"
+							class:active={current === `/etiket/${encodeURIComponent(label.name)}`}
+							onclick={onnavigate}
+						>
+							<span class="dot" aria-hidden="true"></span>
+							{label.name}
+							<span class="count">{label.task_count}</span>
+						</a>
+					{/each}
+				{/if}
+			</div>
+		{/if}
+
+		<div class="foot">
+			<a
+				href="/indstillinger"
+				class="settings"
+				class:active={current.startsWith('/indstillinger')}
+				onclick={onnavigate}
+			>
+				<svg viewBox="0 0 24 24" aria-hidden="true">
+					<circle cx="12" cy="12" r="3" />
+					<path
+						d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 008 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9v0a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"
+					/>
+				</svg>
+				{t('nav.settings')}
+			</a>
+
+			<!-- A quiet indicator, not an alarm: losing the socket for a moment is
+			     normal, and the app keeps working without it. -->
+			{#if !app.connected}
+				<span class="offline" title={t('nav.offlineHint')}>{t('nav.offline')}</span>
+			{/if}
+			<button class="user" onclick={signOut}>
+				<span class="avatar" style="background: {app.user?.avatar_color}">
+					{app.user?.name?.[0]?.toUpperCase() ?? '?'}
+				</span>
+				<span class="user-name">{app.user?.name}</span>
+				<span class="signout">{t('nav.signOut')}</span>
+			</button>
+		</div>
 	</div>
 	<!-- Also a slider for the keyboard: arrow keys move it, and Home puts it back.
 	     A drag handle with no keyboard equivalent is a setting some people simply
@@ -970,11 +982,31 @@
 		padding: var(--s4) var(--s3);
 		background: var(--surface-sunken);
 		border-right: 1px solid var(--line);
-		overflow-y: auto;
+		/* Selve bjælken ruller ikke længere — .scroller gør. `hidden` frem for
+		   ingenting, fordi den stadig er den yderste kant: løber en række over,
+		   skal den klippes her og ikke skubbe kolonnen bredere. */
+		overflow: hidden;
 		padding-left: max(var(--s3), env(safe-area-inset-left));
 		position: relative;
 	}
 
+	/* `min-height: 0`, ellers nægter et flex-element at blive lavere end sit
+	   indhold, og boksen ville vokse ned gennem bunden af skærmen i stedet for at
+	   rulle — samme fælde som `min-width: 0` på kontonavnet længere nede.
+
+	   Ikke `overflow-x: hidden` her: `overflow-y: auto` gør den anden akse til
+	   `auto` af sig selv, og en vandret rullebjælke under menuen er en fejl i en
+	   række, ikke i boksen. At klippe den ville skjule fejlen; prøven måler begge
+	   bokse. */
+	.scroller {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		gap: var(--s5);
+	}
+
 	/* Wider than it looks: a 1px target is a target you miss. The visible line stays
 	   the border; this only widens what the pointer hits.
 
@@ -1213,6 +1245,11 @@
 	   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);
@@ -1223,7 +1260,13 @@
 		border-radius: var(--radius-sm);
 		color: inherit;
 		opacity: 0;
-		background: var(--surface);
+		/* 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,
@@ -1232,9 +1275,18 @@
 		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 {
 		color: var(--ink);
-		background: var(--surface);
 	}
 
 	.fold a,

web/src/lib/components/SignIn.svelte

@@ -59,7 +59,17 @@
 		} catch (e) {
 			// A cancelled prompt is not a failure. Somebody changed their mind, and
 			// an error for that reads as though the key was rejected.
-			if (e?.name !== 'NotAllowedError' && e?.message !== 'cancelled') {
+			if (e?.name === 'NotAllowedError' || e?.message === 'cancelled') {
+				// nothing to say
+			} else if (e?.code === 'unauthorized') {
+				// Not "wrong email or password". There is no email here and no
+				// password — the device signed, and the signature was refused. The
+				// generic 401 text sent somebody looking through their account for a
+				// typo that was never there; what had actually happened was that the
+				// site had moved from http to https, and a passkey is bound to the
+				// origin it was made on, scheme included.
+				error = t('passkey.notAccepted');
+			} else {
 				error = humanMessage(e);
 			}
 		} finally {

web/src/lib/components/TaskDetail.svelte

@@ -11,7 +11,7 @@
 	 * necessarily the last one sent.
 	 */
 	import { api, humanMessage } from '$lib/api.js';
-	import { app, projectName } from '$lib/stores.svelte.js';
+	import { app, projectName, clockOf } from '$lib/stores.svelte.js';
 	import { focusOnMount } from '$lib/focus.js';
 	import { t } from '$lib/i18n.svelte.js';
 	import { REPEATS } from '$lib/when.js';
@@ -22,6 +22,7 @@
 	let description = $state('');
 	let priority = $state(4);
 	let dueDate = $state('');
+	let dueTime = $state('');
 	let labels = $state('');
 	let projectId = $state('');
 	let recurrence = $state('');
@@ -55,6 +56,7 @@
 		description = task.description ?? '';
 		priority = task.priority;
 		dueDate = task.due_date ?? '';
+		dueTime = task.due_datetime ? clockOf(task.due_datetime) : '';
 		labels = (task.labels ?? []).join(', ');
 		projectId = task.project_id;
 		recurrence = task.recurrence_rule ?? '';
@@ -407,14 +409,34 @@
 				</select>
 			</div>
 
+			<!--
+				Dato og klokkeslæt gemmes sammen, altid.
+
+				Serveren læser de to felter som ét: kommer datoen uden en tid, *ryddes*
+				tiden. Så et gem af datoen alene tog klokkeslættet med sig — man rettede
+				dagen og mistede timen, uden at noget sagde det.
+
+				Tiden er tom, indtil nogen sætter den. En opgave uden klokkeslæt er det
+				almindelige, og et felt, der åbner på 00:00, er et felt, der påstår, at
+				noget skal ske ved midnat.
+			-->
 			<div class="field">
 				<label for="due">{t('detail.due')}</label>
-				<input
+				<div class="due">
-					id="due"
+					<input
-					type="date"
+						id="due"
-					bind:value={dueDate}
+						type="date"
-					onchange={() => save({ due_date: dueDate })}
+						bind:value={dueDate}
-				/>
+						onchange={() => save({ due_date: dueDate, due_time: dueTime })}
+					/>
+					<input
+						type="time"
+						aria-label={t('detail.dueTime')}
+						bind:value={dueTime}
+						disabled={!dueDate}
+						onchange={() => save({ due_date: dueDate, due_time: dueTime })}
+					/>
+				</div>
 			</div>
 		</div>
 
@@ -692,6 +714,27 @@
 		padding-bottom: max(var(--s8), env(safe-area-inset-bottom));
 	}
 
+	/* Dato og tid på én linje: de er ét svar på ét spørgsmål, og tiden er den
+	   smalle halvdel af det. */
+	.due {
+		display: flex;
+		gap: var(--s2);
+	}
+
+	.due input[type='date'] {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.due input[type='time'] {
+		flex: none;
+		width: 7.5rem;
+	}
+
+	.due input:disabled {
+		opacity: 0.5;
+	}
+
 	.field {
 		display: flex;
 		flex-direction: column;

web/src/lib/dnd.js

@@ -18,6 +18,7 @@ export const TASK = 'application/x-verdande-task';
 export const PROJECT = 'application/x-verdande-project';
 export const GROUP = 'application/x-verdande-group';
 export const NOTE = 'application/x-verdande-note';
+export const SECTION = 'application/x-verdande-section';
 
 /** Starts a drag carrying one id of the given kind. */
 export function startDrag(event, type, id) {

web/src/lib/locales/da.js

@@ -551,6 +551,7 @@ export const da = {
 	'detail.p1': 'P1 — haster',
 	'detail.none': 'Ingen',
 	'detail.due': 'Forfalder',
+	'detail.dueTime': 'Klokkeslæt',
 	'detail.labels': 'Etiketter',
 	'detail.labelsPlaceholder': 'adskilt af komma',
 	'detail.project': 'Projekt',
@@ -814,6 +815,8 @@ export const da = {
 	'passkey.hint':
 		'En nøgle på en enhed i stedet for en hemmelighed i et hoved. Den private halvdel forlader aldrig enheden, og signaturen er bundet til adressen — så en overbevisende kopi af login-siden et andet sted får ingenting.',
 	'passkey.unsupported': 'Denne browser understøtter ikke passkeys.',
+	'passkey.notAccepted':
+		'Nøglen blev ikke godtaget. Sker det for en nøgle, der virkede før, er adressen typisk skiftet — en passkey hører til præcis den adresse, den blev lavet på, skema og alt.',
 	'passkey.none': 'Ingen nøgler endnu.',
 	'passkey.name': 'Navn på nøglen',
 	'passkey.namePlaceholder': 'fx min bærbare',

web/src/lib/locales/en.js

@@ -547,6 +547,7 @@ export const en = {
 	'detail.p1': 'P1 — urgent',
 	'detail.none': 'None',
 	'detail.due': 'Due',
+	'detail.dueTime': 'Time',
 	'detail.labels': 'Labels',
 	'detail.labelsPlaceholder': 'separated by commas',
 	'detail.project': 'Project',
@@ -807,6 +808,8 @@ export const en = {
 	'passkey.hint':
 		'A key on a device instead of a secret in a head. The private half never leaves the device, and the signature is bound to the address that asked for it — so a convincing copy of the sign-in page somewhere else gets nothing.',
 	'passkey.unsupported': 'This browser does not support passkeys.',
+	'passkey.notAccepted':
+		'That key was not accepted. If it worked before, the address has usually changed — a passkey belongs to the exact address it was made on, scheme and all.',
 	'passkey.none': 'No keys yet.',
 	'passkey.name': 'Name for the key',
 	'passkey.namePlaceholder': 'e.g. my laptop',

web/src/lib/stores.svelte.js

@@ -372,10 +372,35 @@ class AppState {
 	}
 
 	/** Puts a task on a day — dropping it on one, in Kommende or in a month grid. */
-	async reschedule(id, date) {
+	/**
+	 * Flytter en opgave til en dag — og afgør, hvad der sker med klokkeslættet.
+	 *
+	 * Serveren læser `due_date` og `due_time` sammen: kommer datoen uden en tid,
+	 * *ryddes* tiden. Det er den rigtige regel for et felt, man skriver i, og den
+	 * forkerte for et træk i en kalender — en opgave, der stod klokken 14, mistede
+	 * sit klokkeslæt ved at blive trukket til dagen efter, uden at nogen bad om
+	 * det, og uden at noget sagde det.
+	 *
+	 * Så tiden siges nu højt, tre måder:
+	 *
+	 *   time === undefined  behold den, opgaven har
+	 *   time === ''         ryd den — det er heldagsbåndet
+	 *   time === 'HH:MM'    sæt den — det er et sted på døgnet
+	 *
+	 * `undefined` og `''` er med vilje to forskellige ting her. De ligner hinanden
+	 * i JavaScript, og det er præcis derfor de skal skilles ad ét sted frem for at
+	 * blive forvekslet fire steder.
+	 */
+	async reschedule(id, date, time) {
 		const previous = this.get(id);
-		if (!previous || previous.due_date === date) return;
+		if (!previous) return;
-		await this.update(id, { due_date: date });
+
+		const clock =
+			time === undefined ? (previous.due_datetime ? clockOf(previous.due_datetime) : '') : time;
+		if (previous.due_date === date && (previous.due_datetime ? clockOf(previous.due_datetime) : '') === clock) {
+			return;
+		}
+		await this.update(id, { due_date: date, due_time: clock });
 	}
 
 	async remove(id) {
@@ -729,6 +754,20 @@ class AppState {
  * Only while it still carries a name the server gave it. Rename it and that is your
  * name for it, in every language — the same rule as any other project.
  */
+/**
+ * Klokkeslættet på en opgave, som "HH:MM" i den maskine, der ser på det.
+ *
+ * `Date` og ikke en strengudskæring: `due_datetime` kommer som UTC med et Z på,
+ * og de fjorten på et stempel er ikke klokken fjorten for den, der læser det.
+ * TaskRow viser tiden på nøjagtig samme måde, og de to steder skal vise det
+ * samme tal.
+ */
+export function clockOf(stamp) {
+	const at = new Date(stamp);
+	if (Number.isNaN(at.getTime())) return '';
+	return `${String(at.getHours()).padStart(2, '0')}:${String(at.getMinutes()).padStart(2, '0')}`;
+}
+
 const SYSTEM_INBOX_NAMES = new Set(['indbakke', 'inbox']);
 
 export function projectName(project) {

web/src/routes/+layout.svelte

@@ -437,7 +437,6 @@
 			padding-left: max(var(--s3), env(safe-area-inset-left));
 			padding-right: var(--s3);
 			border-right: 1px solid var(--line);
-			overflow-y: auto;
 		}
 	}
 </style>

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

@@ -6,7 +6,7 @@
 	import { app, completedView, projectName } from '$lib/stores.svelte.js';
 	import { COLORS, colorVar } from '$lib/colors.js';
 	import { eventName, eventDetail } from '$lib/events.js';
-	import { TASK, carries, dragged, accept } from '$lib/dnd.js';
+	import { TASK, SECTION, startDrag, carries, dragged, accept } from '$lib/dnd.js';
 	import TaskList from '$lib/components/TaskList.svelte';
 	import TaskRow from '$lib/components/TaskRow.svelte';
 	import QuickAdd from '$lib/components/QuickAdd.svelte';
@@ -386,6 +386,80 @@
 		}
 	}
 
+	// --- moving a section ---------------------------------------------------------
+	//
+	// The order of the sections is the order of the plan — "Planlægning" stands
+	// before "I gang" because that is when the work happens — and until this it
+	// could only be changed by deleting a section and making it again, which drops
+	// its tasks into the unsectioned area on the way past.
+	//
+	// The whole heading is the handle, not a grip beside it. A section heading
+	// holds nothing that is itself dragged, so there is no gesture to steal — which
+	// is the reason the sidebar's rows needed one, and the reason these do not.
+
+	let draggingSection = $state(null);
+	/** The heading whose gap is lit up, and which side of it. */
+	let overSectionEdge = $state(null);
+	let overSectionBelow = $state(false);
+
+	function clearSectionDrag() {
+		draggingSection = null;
+		overSectionEdge = null;
+	}
+
+	function onSectionDragStart(event, section) {
+		draggingSection = section.id;
+		startDrag(event, SECTION, section.id);
+	}
+
+	function onHeadDragOver(event, section) {
+		if (!canEdit || !carries(event, SECTION) || draggingSection === section.id) return;
+		accept(event);
+		const box = event.currentTarget.getBoundingClientRect();
+		overSectionEdge = section.id;
+		overSectionBelow = event.clientY > box.top + box.height / 2;
+	}
+
+	/**
+	 * Optimistic, and the whole list at once.
+	 *
+	 * The array is what the page renders from, so moving the entry moves the
+	 * section; `sort_order` is set alongside it only so a later read of this list
+	 * agrees with what is on screen. If the write fails the previous array goes
+	 * back — a half-moved section is worse than one that did not move.
+	 */
+	async function onHeadDrop(event, target) {
+		if (!carries(event, SECTION)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const id = dragged(event, SECTION) || draggingSection;
+		const below = overSectionBelow;
+		clearSectionDrag();
+		if (!id || id === target.id || !canEdit) return;
+
+		const moved = sections.find((s) => s.id === id);
+		if (!moved) return;
+
+		const without = sections.filter((s) => s.id !== id);
+		const at = without.findIndex((s) => s.id === target.id);
+		if (at < 0) return;
+
+		const ordered = [...without];
+		ordered.splice(below ? at + 1 : at, 0, moved);
+
+		const previous = sections;
+		sections = ordered.map((s, i) => ({ ...s, sort_order: i }));
+		try {
+			await api.reorderSections(
+				project.id,
+				ordered.map((s) => s.id)
+			);
+		} catch (e) {
+			sections = previous;
+			app.toast(humanMessage(e));
+		}
+	}
+
 	async function removeSection(section) {
 		const count = open.filter((t) => t.section_id === section.id).length;
 		const warning = count
@@ -739,7 +813,22 @@
 					ondragleave={() => (overSection = null)}
 					ondrop={(e) => onSectionDrop(e, section.id)}
 				>
-					<div class="section-head">
+					<!-- Draggable, except while it is being renamed: a draggable element
+					     will not let the pointer select text in the field it contains.
+					     The sidebar's groups learned this first. -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="section-head"
+						class:dragging={draggingSection === section.id}
+						class:drop-above={overSectionEdge === section.id && !overSectionBelow}
+						class:drop-below={overSectionEdge === section.id && overSectionBelow}
+						draggable={canEdit && renamingSection !== section.id}
+						ondragstart={(e) => onSectionDragStart(e, section)}
+						ondragend={clearSectionDrag}
+						ondragover={(e) => onHeadDragOver(e, section)}
+						ondragleave={() => (overSectionEdge = null)}
+						ondrop={(e) => onHeadDrop(e, section)}
+					>
 						{#if renamingSection === section.id}
 							<form onsubmit={(e) => renameSection(e, section)}>
 								<input
@@ -1441,12 +1530,61 @@
 		gap: var(--s3);
 		background: var(--surface);
 		border-radius: var(--radius);
-		padding: var(--s2) var(--s3);
 		margin-bottom: var(--s1);
-		/* Pulled out to the padding of the rows below, so the band lines up with the
+		/* The same inset as the rows, and the same width.
-		   text it heads rather than with the rows' own inset. */
+		 *
-		margin-left: calc(var(--s2) * -1);
+		 * It used to be pulled out by `--s2` and padded by `--s3`, which is the same
-		margin-right: calc(var(--s2) * -1);
+		 * idea done with two different numbers: the band ended up eight pixels wider
+		 * than the list on each side, and its text four pixels *outside* the column
+		 * the rows keep. On the left that was invisible. On the right it was Omdøb
+		 * and Slet standing four pixels past everything above and below them, which
+		 * is exactly far enough to look like a mistake and not far enough to see why.
+		 *
+		 * A row is `.row` with `padding: var(--s2)` inside a box with none, so the
+		 * column the eye follows starts one `--s2` in. The band matches that by
+		 * having the same padding and no margin at all — no arithmetic, and nothing
+		 * to keep in step if the rows are ever re-inset.
+		 */
+		padding: var(--s2);
+		/* For the drop line, which is drawn inside the band's own box. */
+		position: relative;
+	}
+
+	/* Grabbable, and only where it can actually be grabbed: the rename field is
+	   not draggable, and a heading somebody may only read is not either. */
+	.section-head[draggable='true'] {
+		cursor: grab;
+	}
+
+	.section-head.dragging {
+		opacity: 0.4;
+		cursor: grabbing;
+	}
+
+	/* A line in the gap rather than a box around the heading. The gap is where it
+	   will land, and a lit heading says "into this one" — which is what a task
+	   dragged onto a section means, and this is not that. */
+	.section-head::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 2px;
+		border-radius: 1px;
+		background: var(--accent);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--fast) var(--ease);
+	}
+
+	.section-head.drop-above::after {
+		top: -1px;
+		opacity: 1;
+	}
+
+	.section-head.drop-below::after {
+		bottom: -1px;
+		opacity: 1;
 	}
 
 	.section-head h2 {