test(e2e): værn, der kan vente på noget

Fire steder ventede prøverne på teksten "Gemt" i notefoden. Den er
hvilestanden: feltet siger "Gemmer" mens en gemning kører og "Gemt"
ellers — altså også før den første gemning overhovedet er begyndt. Alle
fire ventetider var grønne med det samme og ventede på ingenting.

To af dem dækkede over et rigtigt kapløb:

- `en delt note tager de noter med, den peger på` skriver i en note og
  navigerer væk umiddelbart efter. Nåede PATCH'en ikke frem først, var
  teksten væk, da siden kom igen.

- `en gruppe er en side med sine projekter` har samme form et andet sted:
  beskrivelsen tegnes optimistisk — siden sætter teksten på gruppen straks
  og sender PATCH'en bagefter — så kontrollen var grøn, før serveren havde
  hørt om den, og `page.reload()` lige efter hentede den gamle gruppe
  tilbage. Prøven fejlede altså på noget, der ikke var i stykker.

De to sidste ventede på ingenting uden at skade noget, men var stadig
vildledende at læse.

Der er nu én hjælper, `noteGemt(side)`, der venter på selve PATCH-svaret,
med forklaringen på hvorfor "Gemt" ikke duer skrevet ét sted.
Gruppeprøven venter tilsvarende på sin egen PATCH. Hvor rækken i listen
allerede var det rigtige værn, er den overflødige linje væk.

Samme form som reglen i CLAUDE.md om at læse, hvad en kontrol skrev, da
den BESTOD: "venter på gemning" og "matchede den tekst, der altid står
der", er samme grønne.

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

.github/workflows/docs.yml

@@ -1,13 +1,21 @@
 name: Documentation
 
-# The docs are built on every push so a broken build is caught immediately, but
-# only published once GitHub Pages has been enabled for the repository. Until the
-# owner decides to publish, this job builds and stops.
+# Built on every push, and published from main.
 #
-# And on pull requests, where the build is the only check there is: `mkdocs build
-# --strict` fails on a link to a page that does not exist, and building only after
-# the merge means finding that out on `main`. Nothing is published from a pull
-# request — the `deploy` job below runs on a manual dispatch and nothing else.
+# The publishing used to wait for a manual dispatch, with a note saying it would
+# run "once Pages is enabled". Pages was enabled — and the condition was never
+# changed, so the site was built forty times and published none of them. What it
+# showed was a Verdande from before v0.43: /links/, /beacon/ and /notifications/
+# all answered 404, months after they were written. Nothing failed, because
+# building *is* what the job was asked to do.
+#
+# The lesson is not about this line. It is that "publish later" needs something
+# that fails when later arrives — a switch that is off and silent looks exactly
+# like a switch that is on.
+#
+# Pull requests still build and never publish: `mkdocs build --strict` fails on a
+# link to a page that does not exist, and building only after the merge means
+# finding that out on `main`.
 on:
   push:
     branches: [main]
@@ -54,9 +62,9 @@ jobs:
   deploy:
     needs: build
     runs-on: ubuntu-latest
-    # Only runs once Pages is enabled. Until then the build above still guards
-    # against a broken docs tree.
-    if: github.event_name == 'workflow_dispatch'
+    # From main, and by hand. Never from a pull request — a fork could otherwise
+    # publish over the site by opening one.
+    if: github.event_name != 'pull_request'
     environment:
       name: github-pages
       url: ${{ steps.deploy.outputs.page_url }}

README.md

@@ -20,7 +20,8 @@ Which is what a to-do list is.
 All six phases are built. See [What works today](#what-works-today) for what is
 tested and what is not.
 
-Documentation: [`docs/`](docs/), built with Material for MkDocs.
+Documentation: **<https://kristianwind.github.io/verdande/>** — the source is in
+[`docs/`](docs/), built with Material for MkDocs and published from `main`.
 
 ## Why this exists
 
@@ -43,6 +44,10 @@ and an MCP endpoint so Claude can work your task list directly.
   the text, which shares it with her and tells her. `#project` and
   `[[another note]]` are links, and a task shows the notes that mention it. A zip of Markdown goes in — Obsidian, Bear, or Apple Notes through
   the exporter in [`tools/`](tools/) — and comes back out the same shape.
+- **Notes are sealed at rest.** Title and body are encrypted in the database under
+  a key in a file beside it — the title too, because a title beside a sealed body
+  leaves the beginning of every note in the open. A copy of the file is not a copy
+  of the notes.
 - **Drag where it means something.** Reorder a list or a board, file a project under
   a group, drop a task on another project, or drop it on another day.
 - **Sharing.** Owner, editor and viewer roles. There is no open registration:
@@ -128,6 +133,17 @@ Apple Reminders, forward mail into it, and add it to Claude as a connector.
 | OpenAPI 3.1 spec, checked against the router | Done, tested |
 | End-to-end smoke tests (Playwright) | Done |
 | Documentation, landing page, licence | Done |
+| Notes sealed at rest: title and body encrypted in the database | Done, tested |
+| `@name` in a note shares it with that person, and tells them | Done, tested |
+| Share a project with somebody who already has an account, by name | Done, tested |
+| Invitations that have not been taken up stay visible, and can be withdrawn | Done, tested |
+| Told when a project is shared with you — and able to leave it | Done, tested |
+| Push from other programs: a webhook address per person | Done, tested |
+| Today's plan as a card on **I dag**, not only as a notification | Done, tested |
+| Search the settings, from the page or from ⌘K | Done, tested |
+| Choose which browser a link opens in | Done, tested |
+| Images in notes: open full size, copy to the clipboard | Done, tested |
+| Install count: two values, once a day, one click to stop | Done, tested |
 
 **Not finished:** Web Push, the AI providers and the Google Calendar API calls are
 implemented against their specifications and have only ever been exercised there,

docs/notes.md

@@ -41,6 +41,16 @@ it in an export. Every raster format works; SVG is stored but not shown inline
 it is a document that can run script, and a note is not a place to run somebody
 else's.
 
+**Click one to see it whole.** In the note it is scaled down to the width of the
+column — a photo off a phone is four thousand pixels across — so what you are
+looking at is a thumbnail that does not look like one. The full-size view has a
+button that copies the picture to the clipboard, and a link that opens it in its
+own tab. Escape closes it and puts the cursor back where it was.
+
+Copying converts to PNG on the way out when it has to. Clipboards take PNG and
+little else, and a photo off a phone is a JPEG — without the conversion the copy
+either fails or succeeds with something nothing will paste.
+
 ### Code blocks
 
 A fenced block is coloured for the language it names, and guesses when it does not.
@@ -128,6 +138,14 @@ Search finds a word wherever it is:
   body. A word in the title is what the note is about; the same word once in a long
   body is a mention.
 
+Two places to search from, and they now agree. The field above the list filters it
+in place. **⌘K** searches everything at once — tasks, projects, notes and the
+settings — and picking a note from it opens that note *with the rest of the matches
+still in the list beside it*. It used to drop you on the ordinary list, so the
+other results existed only in the popup you had just closed. The address carries
+the search, which also means a search worth keeping can be bookmarked or sent to
+somebody.
+
 ## Putting notes away
 
 Two different things, and the difference matters:

site/index.html

@@ -819,6 +819,15 @@
 				color: var(--accent);
 			}
 		</style>
+		<!-- Besøgstælling for denne side — ikke for programmet, som melder det, der
+		     står under "It counts itself". Plausible på vores egen maskine: ingen
+		     cookie, ingen gemt adresse, ingen tredjepart, og derfor ingen bjælke at
+		     møde folk med. `defer`, så tælleren aldrig holder siden tilbage. -->
+		<script
+			defer
+			data-domain="verdandetodo.com"
+			src="https://plausible.yggdrasilpanel.com/js/script.outbound-links.js"
+		></script>
 	</head>
 
 	<body>
@@ -1326,6 +1335,64 @@
 					<a href="https://github.com/kristianwind/verdande/releases">the releases page</a>.
 				</p>
 				<ul class="lately">
+					<li>
+						<span class="ver">0.47</span>
+						Click a picture in a note and it opens at full size, with a button that
+						copies it to the clipboard. In the note it is scaled to the width of the
+						column — a photo off a phone is four thousand pixels across — so what you
+						were looking at was a thumbnail that did not look like one.
+					</li>
+					<li>
+						<span class="ver">0.47</span>
+						Search in ⌘K, pick a note, and the rest of the matches stay in the list
+						beside it. They used to exist only in the popup you had just closed.
+					</li>
+					<li>
+						<span class="ver">0.46</span>
+						Share a project with somebody who already has an account by picking their
+						name, rather than by spelling an email address you would have to know.
+						Invitations that have not been taken up stay visible so they do not get
+						sent twice, and can be withdrawn.
+					</li>
+					<li>
+						<span class="ver">0.46</span>
+						You are told when a project is shared with you, and there is a
+						<strong>Leave the project</strong> button. Being let in without being
+						asked, without being told, and with no way out was three things at once.
+					</li>
+					<li>
+						<span class="ver">0.45</span>
+						Search for a setting instead of remembering which tab it was under — in
+						the settings themselves and in ⌘K. It knows them by what they do, so
+						<em>beacon</em> finds the install count even though that is not its name.
+					</li>
+					<li>
+						<span class="ver">0.45</span>
+						Today's plan is a card on <strong>I dag</strong> rather than only a
+						message in the morning that was gone if you did not read it at once. And
+						a link can be told which browser to open in.
+					</li>
+					<li>
+						<span class="ver">0.44</span>
+						An optional AI layer, on your own key: it tidies the inbox, pulls the
+						tasks out of a meeting note, writes a morning plan, turns
+						<em>"SV: SV: Vedr. levering uge 12"</em> into what the mail actually asks
+						for, and answers questions about your own notes with links to what the
+						answer rests on. Every one of them is a line you accept, edit or refuse —
+						it suggests, it never writes.
+					</li>
+					<li>
+						<span class="ver">0.44</span>
+						Administrators are told in the bell when a new version is out, once per
+						version, and the message leads to the button that restarts.
+					</li>
+					<li>
+						<span class="ver">0.43</span>
+						Anything that can call a URL can put a task in your inbox — a shortcut on
+						your phone, a script, a service. Notes can be handed to somebody who has
+						no account yet, and writing <code>@Sofie</code> in a note shares it with
+						her and tells her. Unread counts show on the app's icon in the Dock.
+					</li>
 					<li>
 						<span class="ver">0.42</span>
 						A sixth theme, <strong>Charcoal</strong> — a warm near-black after Apple
@@ -1362,17 +1429,6 @@
 						body to move it. A single note can be shared with one person, and a
 						<code>[[note]]</code> is a link you follow inline.
 					</li>
-					<li>
-						<span class="ver">0.34</span>
-						Sections can be dragged into the order the work actually happens in. The
-						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>
 				</ul>
 			</section>
 

web/e2e/smoke.spec.js

@@ -38,6 +38,27 @@ async function projectAction(page, name) {
 	await item.click();
 }
 
+/**
+ * Venter på, at en notes gemning faktisk er nået frem til serveren.
+ *
+ * Ikke på teksten "Gemt" i foden: den er hvilestanden. Feltet siger "Gemmer" mens
+ * en gemning kører og "Gemt" ellers — altså også før den første overhovedet er
+ * begyndt. En ventetid på den er grøn med det samme og venter på ingenting, og det
+ * har gjort tre prøver i den her fil ustabile. Svaret på PATCH'en kan der ventes
+ * på, og det er det eneste, der beviser, at serveren har hørt om teksten.
+ *
+ * Skal kaldes FØR den handling, der udløser gemningen — ellers er svaret måske
+ * allerede kommet og gået.
+ */
+function noteGemt(side) {
+	return side.waitForResponse(
+		(r) =>
+			r.request().method() === 'PATCH' &&
+			/\/notes\/[^/]+$/.test(new URL(r.url()).pathname) &&
+			r.ok()
+	);
+}
+
 function watchForTrouble(page) {
 	const trouble = [];
 	page.on('console', (message) => {
@@ -1703,8 +1724,21 @@ test('en gruppe er en side med sine projekter, en beskrivelse og filer', async (
 	const about = page.getByLabel('Om gruppen');
 	await expect(about).toBeVisible();
 	await about.fill('Alt der larmer og støver.');
+
+	// Gemningen skal være nået frem, FØR der genindlæses. Beskrivelsen tegnes
+	// optimistisk — siden sætter teksten på gruppen med det samme og sender PATCH'en
+	// bagefter — så en kontrol på teksten er grøn, før serveren har hørt om den. En
+	// reload i det hul henter den gamle gruppe tilbage, og prøven fejler på noget,
+	// der ikke er i stykker. Svaret er det, der kan ventes på.
+	const gemt = page.waitForResponse(
+		(r) =>
+			r.request().method() === 'PATCH' &&
+			new URL(r.url()).pathname.includes('/project-groups/') &&
+			r.ok()
+	);
 	await about.blur();
 	await expect(page.getByText('Alt der larmer og støver.')).toBeVisible();
+	await gemt;
 
 	// And it survives a reload, which is the difference between the page keeping up
 	// and the server taking it.
@@ -2911,8 +2945,9 @@ test('note links i en delt note fører til den rigtige note, eller siger hvorfor
 	await body.click();
 	await gæst.keyboard.press('Control+End');
 	await gæst.keyboard.type('\n[[Linneas egne maal]]\n[[Noget der aldrig blev skrevet]]');
+	const gemt = noteGemt(gæst);
 	await body.blur();
-	await expect(gæst.locator('footer .hint')).toHaveText('Gemt');
+	await gemt;
 
 	await gæst.goto(noterURL);
 	await gæst.locator('.notes button.row').filter({ hasText: /^Faelles aftale/ }).click();
@@ -2975,10 +3010,33 @@ test('en delt note tager de noter med, den peger på', async ({ browser, page })
 		'Aftale om levering\nse [[Prisliste i kroner]]'
 	]) {
 		await page.getByRole('button', { name: 'Ny note' }).click();
-		await page.getByRole('textbox', { name: 'Notens tekst' }).click();
+		const felt = page.getByRole('textbox', { name: 'Notens tekst' });
+		// Tomt felt før der skrives, og rækken i listen bagefter. IKKE "Gemt" i
+		// foden: den tekst er hvilestanden — der står "Gemmer" mens en gemning
+		// kører og "Gemt" ellers, altså også før den første er begyndt. En ventetid
+		// på den er grøn med det samme og venter på ingenting.
+		await expect(felt).toHaveText('');
+		await felt.click();
 		await page.keyboard.type(text);
-		await page.getByRole('textbox', { name: 'Notens tekst' }).blur();
-		await expect(page.locator('footer .hint')).toHaveText('Gemt');
+		await felt.blur();
+		const titel = text.split('\n')[0];
+		// Rækkens egen titel, og kun den. To fælder ligger på vejen hertil, og jeg
+		// gik i begge:
+		//
+		// `filter({ hasText: 'Aftale om levering' })` med en STRENG matcher
+		// delstreng og uden hensyn til store og små bogstaver — den fandt også
+		// "Fælles aftale om leveringen" fra en tidligere prøve, for databasen deles
+		// af hele suiten.
+		//
+		// `.notes` alene rækker for langt: en `[[henvisning]]` i editoren er også
+		// tekst med den titel i, så et opslag på teksten fandt tre.
+		//
+		// `button.row strong` er rækkens titelelement, og en forankret regex er både
+		// eksakt og versalfølsom. Titlerne her er almindelige ord uden
+		// regex-tegn — står der en dag en parentes i en af dem, skal den undviges.
+		await expect(
+			page.locator('.notes button.row strong').filter({ hasText: new RegExp(`^${titel}$`) })
+		).toHaveCount(1);
 	}
 
 	await page.locator('.notes button.row').filter({ hasText: /^Aftale om levering/ }).click();
@@ -3064,8 +3122,9 @@ test('</> sætter markeringen som kode, og kilden har sin egen knap', async ({ p
 
 	// Og den anden knap gør stadig det, den altid har gjort: viser filen, med
 	// baktikkerne i, som er beviset på at koden nåede hele vejen ned.
+	const kildeGemt = noteGemt(page);
 	await body.blur();
-	await expect(page.locator('footer .hint')).toHaveText('Gemt');
+	await kildeGemt;
 	await page.getByRole('button', { name: /Vis kilden/ }).click();
 	await expect(page.locator('textarea.source')).toHaveValue(/`/);
 
@@ -4635,3 +4694,350 @@ test('et projekt kan deles med en, der allerede har en konto', async ({ browser,
 
 	expect(trouble).toEqual([]);
 });
+
+/**
+ * En søgning i ⌘K efterlader resultaterne, den fandt.
+ *
+ * Paletten viste de noter, der passede, i sin egen liste — og når man valgte en,
+ * åbnede den noten på en side, hvis liste stod helt uændret. De andre træffere var
+ * væk, og det eneste sted, de nogensinde havde været, var en popup, der lige var
+ * lukket. Rapporteret sådan her: "jeg får kun præsenteret en popup liste med
+ * resultater, men hvis jeg trykker retur, kommer jeg tilbage til den normale liste
+ * — ikke resultater."
+ *
+ * Prøven laver sine egne noter med et ord, ingen anden note i basen har. Et ord
+ * lånt fra en tidligere prøve ville gøre den her afhængig af rækkefølgen, og den
+ * kobling har allerede narret mig én gang i den her fil.
+ */
+test('en søgning i ⌘K efterlader de træffere, den fandt', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/noter');
+
+	// Gemt ved at forlade feltet, som resten af fladen gør det — der er ingen
+	// Gem-knap at huske.
+	//
+	// Der ventes på et TOMT tekstfelt, før der skrives. Uden det kan udfyldningen
+	// ramme den forrige notes felt, mens den nye er undervejs, og så bliver teksten
+	// enten skrevet på den forkerte note eller tabt undervejs.
+	//
+	// Og der ventes IKKE på "Gemt": den tekst er hvilestanden, ikke et signal.
+	// Feltet siger "Gemmer" mens en gemning kører og "Gemt" ellers — altså også før
+	// den første gemning overhovedet er begyndt. En prøve, der venter på den, får
+	// grønt med det samme og måler ingenting. Det var den fejl, der gjorde den her
+	// prøve ustabil: rettelsen var en ventetid, der ikke kunne vente på noget.
+	// Rækken i listen er det rigtige tegn — den kommer først, når serveren har
+	// svaret.
+	for (const title of ['Fyrreskov nord', 'Fyrreskov syd', 'Egeskov']) {
+		await page.getByRole('button', { name: 'Ny note' }).click();
+		const body = page.getByLabel('Notens tekst');
+		await expect(body).toHaveText('');
+		await body.fill(`${title}\n\nnoget om den`);
+		await body.blur();
+		await expect(page.locator('.list').getByText(title, { exact: true })).toBeVisible();
+	}
+
+	await page.goto('/');
+	await page.getByRole('button', { name: /Søg/ }).click();
+	const palette = page.getByRole('dialog');
+	await palette.getByRole('textbox').fill('Fyrreskov');
+	await expect(palette.locator('li button', { hasText: 'Fyrreskov nord' })).toBeVisible();
+	await palette.locator('li button', { hasText: 'Fyrreskov nord' }).click();
+
+	// Noten er åben …
+	await expect(page).toHaveURL(/\/noter\?note=[^&]+&q=Fyrreskov/);
+	await expect(page.getByLabel('Notens tekst')).toContainText('Fyrreskov nord');
+
+	// … og listen ved siden af den er de andre træffere, ikke den normale liste.
+	await expect(page.getByPlaceholder('Søg i noter')).toHaveValue('Fyrreskov');
+	const list = page.locator(".list");
+	await expect(list.getByText('Fyrreskov syd')).toBeVisible();
+	await expect(list.getByText('Egeskov')).toHaveCount(0);
+
+	// Feltet kan tømmes, og listen kommer hel igen. Adressen beholder sit `q` —
+	// den skrives kun af navigation. Den første udgave skrev den ved hvert
+	// tastetryk, så den kunne deles, og det kostede bogstaver ud af feltet; se
+	// prøven nedenfor.
+	await page.getByPlaceholder('Søg i noter').fill('');
+	await expect(list.getByText('Egeskov')).toBeVisible();
+
+	expect(trouble).toEqual([]);
+});
+
+/**
+ * En ny note åbnes med det samme, uden at editoren forsvinder undervejs.
+ *
+ * Serveren tømmer `body` på listerækker med vilje, og siden brugte den tomme krop
+ * som tegn på "det her er en række, hent noten hel". En nyoprettet note er også
+ * tom — og hel — så den blev sendt samme vej: editoren blev pillet af skærmen,
+ * noten hentet igen, og editoren sat op på ny.
+ *
+ * Det hul var ikke kun et blink. Mens det stod åbent, var der ingen valgt note, og
+ * gemningen går tavst tilbage uden en. Skrev man i det sekund, var teksten væk —
+ * ingen fejl, ingen toast, bare en tom note. Det er også det, der gjorde
+ * søgeprøven ovenfor ustabil: i CI var maskinen langsom nok til at ramme hullet.
+ *
+ * Prøven tæller opslagene frem for at måle et blink. Et blink er en tidsting og
+ * ville kræve, at prøven var hurtigere end programmet — præcis den fejl, den er
+ * skrevet for at lukke. Et opslag, der ikke sker, er et tal.
+ */
+test('en ny note hentes ikke igen, når den lige er lavet', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+
+	const fetched = [];
+	page.on('request', (r) => {
+		// Selve noten, ikke dens delinger: /notes/<id> og ikke /notes/<id>/shares.
+		const m = new URL(r.url()).pathname.match(/^\/api\/v1\/notes\/([0-9a-f-]+)$/);
+		if (r.method() === 'GET' && m) fetched.push(m[1]);
+	});
+
+	await page.goto('/noter');
+	await page.getByRole('button', { name: 'Ny note' }).click();
+
+	// Editoren er der, og den er tom — ikke væk og på vej tilbage.
+	const body = page.getByLabel('Notens tekst');
+	await expect(body).toHaveText('');
+
+	await body.fill('Grantræ\n\nnoget om det');
+	await body.blur();
+	await expect(page.locator('.list').getByText('Grantræ', { exact: true })).toBeVisible();
+
+	// Noten blev aldrig hentet igen: svaret på oprettelsen var den hele.
+	expect(fetched).toEqual([]);
+
+	expect(trouble).toEqual([]);
+});
+
+/**
+ * Et totalt udfald siger "ingen forbindelse" — ikke "log ind".
+ *
+ * Opstarten spørger serveren, hvem man er. Når svaret aldrig kommer, står `user`
+ * som null, og null betyder "logget ud" alle andre steder i programmet — så et
+ * udfald blev vist som login-skærmen. Appen gav altså sessionen skylden for, at
+ * nettet var nede, og tilbød et kodeordsfelt, der umuligt kunne virke.
+ *
+ * Det er værre end en fejlbesked, fordi det ligner noget, der kunne virke: man
+ * taster kodeordet, der sker ingenting, og man konkluderer, at kontoen er i
+ * stykker. Det skete i virkeligheden 17. september 2026, da instansens DNS-post
+ * blev slettet.
+ *
+ * Prøven afbryder API-kaldene frem for at stoppe serveren: en afbrudt forespørgsel
+ * er præcis det, en manglende DNS-post giver browseren — fetch afviser, uden at der
+ * nogensinde kom en status. En 500 ville være serveren, der svarer, og det er den
+ * anden sag.
+ */
+test('et udfald siger ingen forbindelse frem for at bede om kodeordet', async ({ page }) => {
+	await page.route('**/api/v1/**', (route) => route.abort());
+
+	await page.goto('/');
+
+	// Prøvetiden skal kunne rumme hele forsøgsvinduet: forespørgselslaget prøver
+	// igen i femten sekunder, før det kalder det et udfald. Det er med vilje —
+	// et blink på nettet må ikke smide folk ud — så prøven må vente det ud.
+	await expect(page.getByText('Ingen forbindelse', { exact: true })).toBeVisible({
+		timeout: 25000
+	});
+
+	// Og ikke kodeordsfeltet. Det er hele pointen.
+	await expect(page.getByLabel('Adgangskode')).toHaveCount(0);
+});
+
+/**
+ * Et indsat billede kan ses i fuld størrelse og kopieres videre.
+ *
+ * I arket er et billede skaleret ned til spaltens bredde — et foto fra en telefon
+ * er fire tusind pixels bredt — så det, man kigger på, er et miniaturebillede, der
+ * ikke ser ud som et. Der var ingen vej fra det til billedet selv.
+ *
+ * Prøven indsætter billedet ad den vej, folk gør det: en rigtig paste-hændelse med
+ * en fil i udklipsholderen. Et billede lagt ind ved at skrive markdown ville springe
+ * hele vedhæftningen over og dermed netop den kode, det her handler om.
+ */
+test('et indsat billede kan åbnes stort og kopieres', async ({ page, context }) => {
+	const trouble = watchForTrouble(page);
+	// Kopiering til udklipsholderen kræver lov. Uden den fejler knappen, og prøven
+	// ville måle en browserindstilling frem for programmet.
+	await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+	await page.goto('/noter');
+	await page.getByRole('button', { name: 'Ny note' }).click();
+	const body = page.getByLabel('Notens tekst');
+	await body.fill('Billednote');
+
+	// En rigtig 1×1 JPEG, og med vilje ikke en PNG: udklipsholderen tager kun PNG,
+	// så et foto skal tegnes om undervejs — og et foto fra en telefon ER en JPEG.
+	// Med en PNG her ville prøven køre forbi netop den kode, den skal vogte.
+	await body.evaluate((el) => {
+		const jpeg =
+			'/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a' +
+			'HBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAABAAEBAREA/8QAFAABAAAAAAAA' +
+			'AAAAAAAAAAAACf/EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAD8AKp//2Q==';
+		const bytes = Uint8Array.from(atob(jpeg), (c) => c.charCodeAt(0));
+		const file = new File([bytes], 'skud.jpg', { type: 'image/jpeg' });
+		const data = new DataTransfer();
+		data.items.add(file);
+		el.dispatchEvent(new ClipboardEvent('paste', { clipboardData: data, bubbles: true, cancelable: true }));
+	});
+
+	const image = page.locator('[aria-label="Notens tekst"] img');
+	await expect(image).toBeVisible();
+
+	// Klikket åbner det, og ruden viser det samme billede.
+	await image.click();
+	const shot = page.getByRole('dialog', { name: 'Billede' });
+	await expect(shot).toBeVisible();
+	await expect(shot.locator('img')).toBeVisible();
+
+	// Kopiér-knappen skal gøre noget. En knap, der tier, er værre end ingen knap:
+	// man indsætter noget andet og opdager det et helt andet sted.
+	await shot.getByRole('button', { name: 'Kopiér billedet' }).click();
+	await expect(shot.getByRole('button', { name: 'Kopieret' })).toBeVisible();
+	await expect(shot.getByText('Kunne ikke kopiere')).toHaveCount(0);
+
+	// Escape lukker, og teksten har fokus igen — ellers står fokus på en knap, der
+	// ikke findes mere, og den næste tast går ingen steder.
+	await page.keyboard.press('Escape');
+	await expect(shot).toHaveCount(0);
+	await expect(body).toBeFocused();
+
+	expect(trouble).toEqual([]);
+});
+/**
+ * En opgaves tekst kan læses færdig, også på en telefon.
+ *
+ * Rapporteret fra en telefon, med et billede af en beskrivelse, der manglede sit
+ * første bogstav på hver linje: "hermostat RU0910301440" og "atteries". Det er
+ * ikke manglende tegn — det er et felt, der er rullet til højre. En beskrivelse er
+ * tit et klippet stykke mail med en URL i, et <textarea> ombryder ved mellemrum,
+ * og en URL har ingen.
+ *
+ * Og titlen var et <input>, som ikke kan ombryde overhovedet. "tado°: Your Smart
+ * Thermostat needs new batteries" er en almindelig opgavetitel, og halvdelen af
+ * den stod uden for kanten.
+ */
+test('en opgaves tekst kan læses færdig på en telefon', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.setViewportSize({ width: 390, height: 844 });
+	await page.goto('/');
+
+	const langTitel = 'tado°: Your Smart Thermostat needs new batteries';
+	// "i dag" for at den lander på siden, prøven står på — parseren klipper det ud
+	// af titlen igen, så den hedder præcis det, den skal.
+	await page.getByLabel('Ny opgave').fill(`${langTitel} i dag`);
+	await page.getByLabel('Ny opgave').press('Enter');
+	await page.getByText('tado°', { exact: false }).first().click();
+
+	const titel = page.getByLabel('Opgavens tekst');
+	await expect(titel).toBeVisible();
+	await expect(titel).toHaveValue(langTitel);
+
+	// Beskrivelsen: en URL uden et eneste mellemrum at bryde ved.
+	const url = 'https://link.tado.com/emails/8/ttid/1-a37f2c9b4e6d8a1f0c3b5e7d9a2f4c6b8e0d1a3f5c7b9e2d4a6f8c0b3e5d7a9f';
+	const beskrivelse = page.getByLabel('Beskrivelse');
+	await beskrivelse.fill(`Thermostat RU0910301440\nBatteries\n${url}`);
+	await beskrivelse.blur();
+
+	// Målt frem for beskrevet: et felt, der ruller vandret, har en scrollWidth
+	// større end sin clientWidth. Det var dét, der klippede venstre kant.
+	//
+	// Felterne måles gennem deres egne lokatorer og ikke med en forespørgsel på
+	// aria-label: beskrivelsen har et <label for>, ikke et aria-label, så en
+	// forespørgsel fandt ingenting og ville have bestået tomt.
+	const spild = [];
+	for (const [navn, felt] of [
+		['Opgavens tekst', titel],
+		['Beskrivelse', beskrivelse]
+	]) {
+		const m = await felt.evaluate((el) => ({ ind: el.scrollWidth, ude: el.clientWidth }));
+		if (m.ind - m.ude > 1) spild.push(`${navn}: ${m.ind} > ${m.ude}`);
+	}
+	expect(spild).toEqual([]);
+
+	// Beskrivelsen løber ikke over i Chromium, heller ikke uden reglen — det var
+	// Safari, den blev set i, og det er en anden motor. Prøven måler derfor reglen
+	// selv frem for dens virkning. Det er svagere, og det står her, så den næste
+	// ved det: den vogter mod at reglen bliver slettet, ikke mod at den er forkert.
+	await expect(beskrivelse).toHaveCSS('overflow-wrap', 'break-word');
+
+	// Og titlen er blevet høj nok til at rumme sig selv frem for at klippe.
+	const linjer = await titel.evaluate((el) => ({
+		hoejde: el.clientHeight,
+		linje: parseFloat(getComputedStyle(el).lineHeight)
+	}));
+	expect(linjer.hoejde).toBeGreaterThan(linjer.linje * 1.5);
+
+	expect(trouble).toEqual([]);
+});
+/**
+ * Søgefeltet taber ikke bogstaver, og listen viser det, der blev spurgt om.
+ *
+ * Fra en skærmoptagelse, to billeder i sekundet:
+ *
+ *   2,5 s  feltet "verd"      listen ufiltreret
+ *   3,0 s  feltet "nde"       listen filtreret
+ *   6,0 s  feltet "verdande"  listen ufiltreret
+ *   6,5 s  feltet tomt        listen filtreret
+ *
+ * To fejl oven i hinanden.
+ *
+ * Bogstaverne forsvandt, fordi adressen blev skrevet ved hvert tastetryk:
+ * `replaceState` opdaterer `$page.url` et øjeblik efter, den kaldes, så en effekt
+ * læste den forrige adresse og skrev den gamle værdi tilbage i feltet.
+ *
+ * Og resultaterne landede for sent, fordi to hentninger kunne være undervejs på
+ * én gang uden at nogen holdt styr på, hvilken der gjaldt. Den langsomste vandt.
+ */
+test('søgefeltet taber ikke bogstaver, og det nyeste svar vinder', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/noter');
+
+	// Sin egen note at finde. Et ord fra en anden prøve ville gøre den her
+	// afhængig af rækkefølgen, og den kobling har allerede narret mig i denne fil.
+	await page.getByRole('button', { name: 'Ny note' }).click();
+	const krop = page.getByLabel('Notens tekst');
+	await krop.fill('Kaffemølle\n\nnoget om den');
+	await krop.blur();
+	// Rækken i listen er værnet. "Gemt" stod her før og er hvilestanden — se noteGemt().
+	await expect(page.locator('.list').getByText('Kaffemølle', { exact: true })).toBeVisible();
+
+	// Skrevet i et tempo, et menneske kan skrive i. Det var hastigheden, der
+	// afslørede det: en pause mellem hvert bogstav skjuler kapløbet helt.
+	const felt = page.getByPlaceholder('Søg i noter');
+	await felt.click();
+	await page.keyboard.type('kaffemølle', { delay: 40 });
+	await expect(felt).toHaveValue('kaffemølle');
+
+	// Og det bliver stående. Fejlen viste sig et halvt sekund efter, ikke med det
+	// samme — adressen skal nå at komme tilbage, før den kan skrive over noget.
+	await page.waitForTimeout(1500);
+	await expect(felt).toHaveValue('kaffemølle');
+
+	// Det nyeste svar vinder, også når det kommer først.
+	//
+	// Den første søgning holdes tilbage, den anden slippes igennem. Uden vagten
+	// lander den gamle sidst og overskriver listen med svaret på et spørgsmål, der
+	// ikke længere bliver stillet.
+	let held;
+	await page.route('**/api/v1/notes?*', async (route) => {
+		const q = new URL(route.request().url()).searchParams.get('q');
+		if (q === 'aaaaa' && !held) {
+			held = route;
+			return; // holdes, indtil den næste er kommet igennem
+		}
+		await route.continue();
+	});
+
+	await felt.fill('');
+	await felt.fill('aaaaa');
+	await page.waitForTimeout(500);
+	await felt.fill('kaffemølle');
+	await page.waitForTimeout(900);
+	if (held) await held.continue();
+	await page.waitForTimeout(700);
+
+	// Feltet og listen er enige: det, der står, er det, der blev spurgt om.
+	await expect(felt).toHaveValue('kaffemølle');
+	await expect(page.locator('.list').getByText('Kaffemølle', { exact: true })).toBeVisible();
+
+	await page.unroute('**/api/v1/notes?*');
+	expect(trouble).toEqual([]);
+});

web/src/lib/components/CommandPalette.svelte

@@ -125,7 +125,13 @@
 		// En indstilling bærer sin egen adresse i sit id — der er ingen række at slå
 		// op, den ER stedet.
 		if (item.kind === 'setting') return goto(item.id);
-		if (item.kind === 'note') return goto(`/noter?note=${item.id}`);
+		// Søgningen følger med noten. Uden den åbner man én træffer på en side, hvis
+		// liste står uændret — og de andre træffere var kun at se i den popup, man
+		// lige lukkede.
+		if (item.kind === 'note') {
+			const q = query.trim();
+			return goto(`/noter?note=${item.id}` + (q ? `&q=${encodeURIComponent(q)}` : ''));
+		}
 		goto(item.kind === 'project' ? `/projekt/${item.id}` : `/projekt/${item.project}`);
 	}
 

web/src/lib/components/NoConnection.svelte

@@ -0,0 +1,95 @@
+<script>
+	/**
+	 * What the app shows when it could not reach the server at all.
+	 *
+	 * Before this, an outage rendered the sign-in screen: the boot asks who you
+	 * are, the request never gets an answer, `user` stays null, and null means
+	 * "logged out" everywhere else. So the app blamed the session for the network
+	 * being down, and offered a password box that could not possibly work. That is
+	 * worse than an error message, because it looks like it might work — people
+	 * type the password, get nothing, and conclude their account is broken.
+	 *
+	 * It happened for real on 17 September 2026: the instance's DNS record was
+	 * deleted, and what the app showed was a slow-loading login page.
+	 *
+	 * The text says the data is safe, because that is the question somebody
+	 * actually has when their notes vanish behind a login box.
+	 */
+	import { t } from '$lib/i18n.svelte.js';
+	import { app } from '$lib/stores.svelte.js';
+
+	let trying = $state(false);
+
+	async function again() {
+		trying = true;
+		try {
+			await app.load();
+		} finally {
+			trying = false;
+		}
+	}
+</script>
+
+<div class="screen">
+	<div class="card">
+		<div class="brand">
+			<span class="rune" aria-hidden="true">ᚹ</span>
+			<h1>verdande</h1>
+		</div>
+
+		<h2>{t('net.downTitle')}</h2>
+		<p class="lede">{t('net.downBody')}</p>
+
+		<button onclick={again} disabled={trying}>
+			{trying ? t('net.reconnecting') : t('net.downRetry')}
+		</button>
+	</div>
+</div>
+
+<style>
+	.screen {
+		height: 100dvh;
+		display: grid;
+		place-items: center;
+		padding: var(--s4);
+		background: var(--ground);
+	}
+
+	.card {
+		width: 100%;
+		max-width: 340px;
+		display: flex;
+		flex-direction: column;
+		gap: var(--s4);
+		text-align: center;
+	}
+
+	.brand {
+		display: flex;
+		align-items: center;
+		gap: var(--s3);
+		justify-content: center;
+	}
+
+	.rune {
+		font-size: var(--text-2xl);
+		color: var(--accent);
+		line-height: 1;
+	}
+
+	h1 {
+		font-size: var(--text-xl);
+		margin: 0;
+	}
+
+	h2 {
+		font-size: var(--text-lg);
+		margin: 0;
+	}
+
+	.lede {
+		margin: 0;
+		color: var(--ink-soft);
+		line-height: 1.5;
+	}
+</style>

web/src/lib/components/NoteEditor.svelte

@@ -640,9 +640,69 @@
 			onopennote?.(link.getAttribute('data-note') ?? link.textContent);
 			return;
 		}
+		// Et billede i en note er et billede, man har indsat for at kunne se det. I
+		// arket er det skaleret ned til spaltens bredde — et foto fra en telefon er
+		// fire tusind pixels bredt — så det, man kigger på, er et miniaturebillede,
+		// der ikke ser ud som et.
+		const image = event.target.closest?.('img');
+		if (image) {
+			event.preventDefault();
+			showing = { src: image.currentSrc || image.src, alt: image.alt ?? '' };
+			copied = false;
+			copyError = '';
+			return;
+		}
 		colourCode();
 	}
 
+	// --- billedet i fuld størrelse ------------------------------------------------
+
+	let showing = $state(null);
+	let copied = $state(false);
+	let copyError = $state('');
+
+	function closeImage() {
+		showing = null;
+		// Tilbage i teksten, hvor man var. Uden det står fokus på en knap, der ikke
+		// findes længere, og den næste tast går ingen steder.
+		editor?.focus();
+	}
+
+	/**
+	 * Billedet som PNG, uanset hvad det kom som.
+	 *
+	 * Udklipsholderen tager kun PNG i de fleste browsere, og et foto fra en telefon
+	 * er en JPEG. Så et billede, der ikke allerede er PNG, tegnes om — ellers
+	 * lykkes skrivningen enten ikke, eller den lykkes med noget, ingen kan indsætte.
+	 */
+	async function asPNG(src) {
+		const blob = await (await fetch(src)).blob();
+		if (blob.type === 'image/png') return blob;
+
+		const bitmap = await createImageBitmap(blob);
+		const canvas = document.createElement('canvas');
+		canvas.width = bitmap.width;
+		canvas.height = bitmap.height;
+		canvas.getContext('2d').drawImage(bitmap, 0, 0);
+		return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+	}
+
+	async function copyImage() {
+		copyError = '';
+		try {
+			// Løftet gives videre frem for at blive ventet af først. Safari kræver, at
+			// clipboard.write kaldes i selve klikket, og en hentning imellem gør
+			// klikket til fortid — et ClipboardItem må gerne indeholde et løfte.
+			await navigator.clipboard.write([new ClipboardItem({ 'image/png': asPNG(showing.src) })]);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch (e) {
+			// Sagt højt frem for tavst. En kopiér-knap, der ikke gør noget, er værre
+			// end ingen knap: man indsætter noget andet og opdager det et andet sted.
+			copyError = t('notes.copyFailed');
+		}
+	}
+
 	/** Replaces the half-typed tag with the whole thing. */
 	function accept(item) {
 		const partial = partialTag();
@@ -1068,7 +1128,102 @@
 	</p>
 </div>
 
+<!-- Billedet i fuld størrelse. Uden for .wrap, fordi editoren har sin egen
+     rulning og sin egen stablingskontekst — et lag inde i den ville blive klippet
+     af netop det ark, det skal lægge sig over. -->
+{#if showing}
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+	<div class="lightbox" onclick={closeImage} role="dialog" aria-modal="true" aria-label={t('notes.imageTitle')}>
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+		<div class="shot" onclick={(e) => e.stopPropagation()}>
+			<img src={showing.src} alt={showing.alt} />
+			<div class="tools">
+				<button onclick={copyImage}>{copied ? t('notes.imageCopied') : t('notes.imageCopy')}</button>
+				<a href={showing.src} target="_blank" rel="noopener">{t('notes.imageOpen')}</a>
+				<button class="shut" onclick={closeImage}>{t('detail.close')}</button>
+			</div>
+			{#if copyError}<p class="bad">{copyError}</p>{/if}
+		</div>
+	</div>
+{/if}
+
+<svelte:window
+	onkeydown={(e) => {
+		if (showing && e.key === 'Escape') {
+			e.stopPropagation();
+			closeImage();
+		}
+	}}
+/>
+
 <style>
+	/* Over alt andet og midt på skærmen. Baggrunden er mørk nok til at billedet
+	   står alene — det er hele grunden til at åbne det. */
+	.lightbox {
+		position: fixed;
+		inset: 0;
+		z-index: 100;
+		background: rgb(0 0 0 / 0.8);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--s4);
+	}
+
+	.shot {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--s3);
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	/* `min-height: 0` hører med: uden den nægter et flex-element at blive lavere
+	   end sit indhold, og et højt billede vokser ud over skærmen i stedet for at
+	   passe sig ind i den. */
+	.shot img {
+		min-height: 0;
+		max-width: 100%;
+		max-height: calc(100vh - 8rem);
+		object-fit: contain;
+		border-radius: var(--radius);
+	}
+
+	.tools {
+		display: flex;
+		gap: var(--s2);
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.tools button,
+	.tools a {
+		padding: var(--s2) var(--s3);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		background: var(--surface);
+		color: var(--ink);
+		font-size: var(--text-sm);
+		text-decoration: none;
+	}
+
+	.tools button:hover,
+	.tools a:hover {
+		border-color: var(--accent);
+	}
+
+	.bad {
+		margin: 0;
+		font-size: var(--text-sm);
+		color: var(--danger);
+	}
+
+	/* Markøren siger, at billedet er til at klikke på, før man prøver. */
+	.page :global(img) {
+		cursor: zoom-in;
+	}
+
 	.wrap {
 		display: flex;
 		flex-direction: column;

web/src/lib/components/TaskDetail.svelte

@@ -171,6 +171,32 @@
 	 * took is said out loud, because a title that edits itself without a word is
 	 * worse than one that does nothing.
 	 */
+	/**
+	 * Lader et felt være lige så højt som sin tekst.
+	 *
+	 * `height: auto` først, og så `scrollHeight`: uden nulstillingen kan feltet kun
+	 * vokse, for scrollHeight på et felt, der allerede er for højt, er dets egen
+	 * højde.
+	 */
+	function grow(node) {
+		const fit = () => {
+			node.style.height = 'auto';
+			node.style.height = `${node.scrollHeight}px`;
+		};
+		fit();
+		node.addEventListener('input', fit);
+		// Bredden skifter, når ruden gør — og en tekst, der fyldte to linjer, fylder
+		// tre på en smallere skærm uden at der er rørt ved den.
+		const watch = new ResizeObserver(fit);
+		watch.observe(node);
+		return {
+			destroy() {
+				node.removeEventListener('input', fit);
+				watch.disconnect();
+			}
+		};
+	}
+
 	async function saveContent() {
 		if (!task) return;
 		const trimmed = content.trim();
@@ -418,13 +444,27 @@
 
 	<div class="scroll">
 		<div class="field">
-			<input
+			<!-- Et felt frem for en linje. En opgavetitel er tit længere end en telefon
+			     er bred — "tado°: Your Smart Thermostat needs new batteries" er en
+			     almindelig en — og et <input> kan ikke ombryde: det ruller, og så står
+			     halvdelen af overskriften uden for kanten. -->
+			<textarea
 				class="title"
+				rows="1"
 				use:focusOnMount
+				use:grow
 				bind:value={content}
 				onblur={saveContent}
+				onkeydown={(e) => {
+					// Retur gemmer frem for at lave en ny linje. En titel er én linje,
+					// uanset hvor mange den fylder på skærmen.
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						e.currentTarget.blur();
+					}
+				}}
 				aria-label={t('detail.text')}
-			/>
+			></textarea>
 		</div>
 
 		<div class="field">
@@ -894,6 +934,16 @@
 		resize: vertical;
 		font-family: inherit;
 		line-height: 1.5;
+		/* En beskrivelse er tit et klippet stykke mail med en URL i. Et <textarea>
+		   ombryder ved mellemrum, og en URL har ingen — så feltet rullede vandret,
+		   og på en telefon stod teksten forskudt med venstre kant klippet af. Det
+		   ser ikke ud som rulning; det ser ud som manglende bogstaver.
+
+		   `break-word` og ikke `anywhere`: den første bryder kun et ord, der ikke kan
+		   stå på en linje alene, mens den anden bryder ved først givne lejlighed og
+		   delte "GarageRisteriet" midt i en stavelse. Se h1 på projektets side — den
+		   lektion er betalt én gang. */
+		overflow-wrap: break-word;
 	}
 
 	/* The title is the one field that should not look like a field until you are in
@@ -905,6 +955,10 @@
 		background: transparent;
 		border-color: transparent;
 		padding-left: 0;
+		/* Højden sættes af `grow`, så håndtaget ville love noget, det ikke kan
+		   holde: trækker man i det, retter det næste bogstav det tilbage. */
+		resize: none;
+		overflow: hidden;
 	}
 
 	.title:hover {

web/src/lib/locales/da.js

@@ -173,6 +173,10 @@ export const da = {
 	'notes.copyCode': 'Kopiér',
 	'notes.copied': 'Kopieret',
 	'notes.copyFailed': 'Kunne ikke kopiere',
+	'notes.imageTitle': 'Billede',
+	'notes.imageCopy': 'Kopiér billedet',
+	'notes.imageCopied': 'Kopieret',
+	'notes.imageOpen': 'Åbn i nyt faneblad',
 	'notes.strike': 'Gennemstreget',
 	'notes.code': 'Kode',
 	'notes.showSource': 'Vis kilden (Markdown)',
@@ -233,6 +237,9 @@ export const da = {
 	'nav.offlineHint': 'Ændringer fra andre vises ikke lige nu',
 	'net.reconnecting': 'Genopretter forbindelse…',
 	'net.offline': 'Ingen forbindelse',
+	'net.downTitle': 'Ingen forbindelse',
+	'net.downBody': 'Verdande kan ikke nås herfra lige nu. Din tekst er ikke væk — den ligger på serveren, og den kommer igen, når forbindelsen gør.',
+	'net.downRetry': 'Prøv igen',
 	'nav.doItToday': 'Gør det i dag',
 
 	// --- the sidebar's own sections ------------------------------------------------

web/src/lib/locales/en.js

@@ -170,6 +170,10 @@ export const en = {
 	'notes.copyCode': 'Copy',
 	'notes.copied': 'Copied',
 	'notes.copyFailed': 'Could not copy',
+	'notes.imageTitle': 'Image',
+	'notes.imageCopy': 'Copy the image',
+	'notes.imageCopied': 'Copied',
+	'notes.imageOpen': 'Open in a new tab',
 	'notes.strike': 'Strikethrough',
 	'notes.code': 'Code',
 	'notes.showSource': 'Show the source (Markdown)',
@@ -230,6 +234,9 @@ export const en = {
 	'nav.offlineHint': 'Changes from other people are not showing right now',
 	'net.reconnecting': 'Reconnecting…',
 	'net.offline': 'No connection',
+	'net.downTitle': 'No connection',
+	'net.downBody': 'Verdande cannot be reached from here right now. Nothing you wrote is lost — it is on the server, and it comes back when the connection does.',
+	'net.downRetry': 'Try again',
 	'nav.doItToday': 'Do it today',
 
 	// --- the sidebar's own sections ------------------------------------------------

web/src/lib/stores.svelte.js

@@ -29,6 +29,20 @@ class AppState {
 	people = $state([]);
 	tasks = $state([]);
 	loading = $state(true);
+
+	/**
+	 * True when the boot never reached the server — as opposed to reaching it and
+	 * being told the session is gone.
+	 *
+	 * The two are indistinguishable from `user === null`, and they are opposite
+	 * things to the person looking at the screen: one means "log ind", the other
+	 * means "der er intet at logge ind på herfra, og et kodeord hjælper ikke". A
+	 * total outage used to show the login screen, so the app blamed the user's
+	 * session for the network being down — and a login page that cannot possibly
+	 * work is worse than an error, because it looks like it might.
+	 */
+	unreachable = $state(false);
+
 	/** Transient messages: a failed save, a rolled-back change. */
 	toasts = $state([]);
 	connected = $state(false);
@@ -96,6 +110,7 @@ class AppState {
 		this.loading = true;
 		try {
 			this.user = await api.me();
+			this.unreachable = false;
 			// The interface's language follows the account, so it is set the moment
 			// the session is known — before anything has drawn a string.
 			i18n.set(this.user.locale);
@@ -111,6 +126,10 @@ class AppState {
 			this.loadNotifications();
 		} catch (e) {
 			this.user = null;
+			// `offline` is the one code the request layer makes up itself: it is what
+			// is thrown when the retry window ran out without any status ever
+			// arriving. A 401 is the server answering, and that is a real sign-out.
+			this.unreachable = e?.code === 'offline';
 		} finally {
 			this.loading = false;
 		}

web/src/routes/+layout.svelte

@@ -8,6 +8,7 @@
 	import Sidebar from '$lib/components/Sidebar.svelte';
 	import CommandPalette from '$lib/components/CommandPalette.svelte';
 	import SignIn from '$lib/components/SignIn.svelte';
+	import NoConnection from '$lib/components/NoConnection.svelte';
 	import TaskDetail from '$lib/components/TaskDetail.svelte';
 	import { t } from '$lib/i18n.svelte.js';
 	import { setBadge } from '$lib/badge.js';
@@ -166,6 +167,10 @@
 	<div class="booting"></div>
 {:else if standalone}
 	{@render children()}
+{:else if app.unreachable}
+	<!-- Ikke login-skærmen: en total udfald er ikke en udløbet session, og et
+	     kodeord hjælper ikke mod en manglende forbindelse. -->
+	<NoConnection />
 {:else if !app.user}
 	<SignIn />
 {:else}

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

@@ -14,6 +14,7 @@
 	import { api, humanMessage } from '$lib/api.js';
 	import { app } from '$lib/stores.svelte.js';
 	import { page } from '$app/stores';
+	import { untrack } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { t, tag } from '$lib/i18n.svelte.js';
 	import { NOTE, startDrag } from '$lib/dnd.js';
@@ -483,6 +484,33 @@
 		load(query);
 	});
 
+	/**
+	 * En søgning, man kommer med.
+	 *
+	 * ⌘K sender `?note=…&q=…`, så listen ved siden af den åbne note er de andre
+	 * træffere frem for den almindelige liste.
+	 *
+	 * Læst, aldrig skrevet. Den første udgave skrev også søgningen tilbage i
+	 * adressen ved hvert tastetryk, så den kunne gemmes og deles — og det kostede
+	 * bogstaver. `replaceState` opdaterer `$page.url` et øjeblik efter, den kaldes,
+	 * så to hurtige tastetryk gav en effekt, der læste den *forrige* adresse, fandt
+	 * den uenig med det skrevne, og skrev den gamle værdi tilbage i feltet. Man
+	 * skrev "verd", og der stod "nde". Målt på en skærmoptagelse, ikke gættet.
+	 *
+	 * En markør, der skal holde to retninger enige, er en markør, der taber
+	 * kapløbet et sted. Adressen skrives derfor kun af navigation, og det her er
+	 * den eneste, der læser den.
+	 */
+	let cameWith = $state(null);
+
+	$effect(() => {
+		const inURL = $page.url.searchParams.get('q') ?? '';
+		if (inURL === untrack(() => cameWith)) return;
+		cameWith = inURL;
+		draftQuery = inURL;
+		query = inURL;
+	});
+
 	// Arriving from somewhere that names a note — a task's panel, a project's page —
 	// opens it rather than dropping the person on a list to find it again.
 	let asked = $derived($page.url.searchParams.get('note'));
@@ -493,13 +521,30 @@
 		else api.note(asked).then(open).catch(() => {});
 	});
 
+	/**
+	 * Hvilken hentning der gælder.
+	 *
+	 * To søgninger kan være undervejs på én gang, og den langsomste kan lande
+	 * sidst. Uden det her betød det, at listen viste svaret på et spørgsmål, der
+	 * ikke længere blev stillet — på optagelsen stod resultaterne for "verdande" i
+	 * listen, efter feltet var tømt. Pausen på 250 ms gjorde det sjældnere og kunne
+	 * ikke gøre det umuligt.
+	 */
+	let newest = 0;
+
 	async function load(q) {
+		const mine = ++newest;
 		try {
 			const params = q ? { q } : showArchive ? { archived: '1' } : {};
-			notes = (await api.notes(params)).notes ?? [];
+			const got = (await api.notes(params)).notes ?? [];
+			// Et svar, der er blevet overhalet, kastes væk. Det er ikke forkert —
+			// det er bare ikke længere svaret på det, der blev spurgt om.
+			if (mine !== newest) return;
+			notes = got;
 			status = 'ready';
 			if (selectedId && !notes.some((n) => n.id === selectedId)) open(notes[0] ?? null);
 		} catch (e) {
+			if (mine !== newest) return;
 			status = 'failed';
 			app.toast(humanMessage(e));
 		}
@@ -516,7 +561,17 @@
 	 * Derfor hentes den hele her. Rækken vises med det samme, så det ikke føles som
 	 * at vente; teksten kommer, når den er der.
 	 */
-	async function open(note) {
+	/**
+	 * `whole` siger, at noten allerede er hel, og at der ikke skal hentes.
+	 *
+	 * En tom krop bruges ellers som tegn på, at det her er en listerække — serveren
+	 * tømmer `body` på dem med vilje. Men en *nyoprettet* note er også tom, og den
+	 * er hel. Uden det her blev den lukket ud som en halv note: editoren blev pillet
+	 * af skærmen, noten hentet igen, og editoren sat op på ny. I det hul står
+	 * `selected` som null, og `save()` går tavst tilbage uden at gemme — så tekst
+	 * skrevet der forsvandt sporløst.
+	 */
+	async function open(note, { whole = false } = {}) {
 		clearTimeout(timer);
 		if (!note) {
 			selectedId = null;
@@ -532,9 +587,9 @@
 		// id'et være det samme begge gange, så den anden aldrig blev vist. Man ville
 		// sidde med en tom note, der lige havde haft en titel.
 		selectedId = note.id;
-		if (note.body) {
+		if (whole || note.body) {
 			selected = note;
-			draft = note.body;
+			draft = note.body ?? '';
 			return;
 		}
 		selected = null;
@@ -646,7 +701,8 @@
 		try {
 			const note = await api.createNote({ body: '' });
 			notes = [note, ...notes];
-			open(note);
+			// Svaret er hele noten, så den skal ikke hentes igen — se open().
+			await open(note, { whole: true });
 			document.querySelector('.editor textarea')?.focus();
 		} catch (e) {
 			app.toast(humanMessage(e));