Merge pull request #56 from kristianwind/gmail-unstar

feat(gmail): take the star off a mail once it has become a task

README.md

@@ -103,7 +103,7 @@ Apple Reminders, forward mail into it, and add it to Claude as a connector.
 | CalDAV server (two-way VTODO) | Done, tested |
 | Mail-to-task | Done, tested |
 | AI layer (Anthropic/OpenAI/Google/local) | Built, degrades when unconfigured |
-| Gmail: OAuth2 with PKCE, polling, one-way to tasks | Done, tested |
+| Gmail: OAuth2 with PKCE, polling to tasks, unstars what it imports | Done, tested |
 | Google Calendar: read-only, laid over the task calendar | Built, never run against Google |
 | Calendar subscriptions: ICS and webcal, several per person | Done, tested |
 | Times on tasks, set by dragging in the week grid | Done, tested |

docs/configuration.md

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

docs/openapi.yaml

@@ -1250,7 +1250,7 @@ paths:
 
         The one click that opens Google's consent screen already exists. What it
         needs behind it is a registered client, and no app can conjure one: Google
-        issues no Gmail access to an unregistered client, and `gmail.readonly` is a
+        issues no Gmail access to an unregistered client, and `gmail.modify` is a
         restricted scope, so an id shipped inside a public image would be both
         extractable from it and unusable without Google's security review of every
         deployment that used it.

go.mod

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

internal/auth/totp.go

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

internal/gmail/gmail.go

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

internal/gmail/gmail_test.go

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

internal/google/google.go

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

internal/httpapi/gmail_handlers.go

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

internal/httpapi/gmail_test.go

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

internal/httpapi/totp_handlers.go

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

web/e2e/smoke.spec.js

@@ -298,11 +298,65 @@ test('manifestet og service workeren findes, og ikonerne findes også', async ({
 	const appleIcon = await request.get('/apple-touch-icon.png');
 	expect(appleIcon.ok(), 'apple-touch-icon.png findes ikke').toBeTruthy();
 
-	// The service worker is what Web Push needs; without it a subscription cannot
-	// be created at all.
-	const worker = await request.get('/sw.js');
+	// The service worker is what Web Push needs — and, since it also caches, what
+	// carries the app through a short network drop. SvelteKit serves it under this
+	// name and registers it itself; the old hand-registered /sw.js is gone.
+	const worker = await request.get('/service-worker.js');
 	expect(worker.ok()).toBeTruthy();
-	expect(await worker.text()).toContain("addEventListener('push'");
+	// The source is minified, so the quotes around the event names are whatever the
+	// minifier chose — match either kind rather than one it might change under us.
+	const source = await worker.text();
+	expect(source).toMatch(/addEventListener\(['"`]push['"`]/);
+	expect(source).toMatch(/addEventListener\(['"`]fetch['"`]/);
+});
+
+/**
+ * The app survives a network drop: reloaded with the network cut, it opens from
+ * the cache and still shows the tasks it last saw, instead of the browser's own
+ * "you are offline" page.
+ *
+ * This is the whole point of the service worker's cache — not offline authoring,
+ * which the app does not claim, but a reload through a tunnel or a handover coming
+ * back to the app rather than to a dead tab. The retry in api.js covers the write
+ * side of the same drop; this covers the read side.
+ */
+test.describe('med service worker', () => {
+	// The rest of the suite blocks the worker (see playwright.config.js); this one
+	// test is about the worker, so it turns it back on for its own context.
+	test.use({ serviceWorkers: 'allow' });
+
+	test('appen overlever et netværksudfald og åbner fra cachen', async ({ page, context }) => {
+	// First load, online: the worker installs, and once it controls the page the
+	// shell and the reads it serves are in the cache.
+	await page.goto('/');
+	await expect(page.getByRole('link', { name: 'I dag' })).toBeVisible();
+
+	// Wait until the worker actually controls this page. Until it does, a reload
+	// still goes to the network and the test proves nothing — the first load
+	// registers the worker but the page that triggered the install is not itself
+	// controlled until it activates and claims.
+	await page.waitForFunction(() => navigator.serviceWorker?.controller != null, null, {
+		timeout: 15000
+	});
+
+	// A controlled reload, still online: now the navigation and its API reads pass
+	// through the worker and land in the cache, ready for the drop.
+	await page.reload();
+	await expect(page.getByRole('link', { name: 'I dag' })).toBeVisible();
+
+	// The network is gone.
+	await context.setOffline(true);
+	try {
+		await page.reload();
+		// The shell came from the cache — the sidebar is here, not a browser error
+		// page — and so did the task list the app renders into it.
+		await expect(page.getByRole('link', { name: 'I dag' })).toBeVisible({ timeout: 15000 });
+		await expect(page.getByRole('link', { name: 'Indbakke' })).toBeVisible();
+	} finally {
+		// Never leave the shared context offline for whatever test runs next.
+		await context.setOffline(false);
+	}
+	});
 });
 
 /**
@@ -2030,7 +2084,12 @@ test('en passkey kan registreres og logges ind med', async ({ browser, browserNa
 	// Now sign out and back in with it. No email typed: the device knows which
 	// account its key belongs to, which is also why this page cannot be used to
 	// find out who has an account here.
-	await page.getByRole('navigation', { name: 'Hovedmenu' }).getByText('Log ud').click();
+	// Signing out asks first now: one click arms it, a second within a few seconds
+	// does it. The whole account row is the button; its label changes to the prompt.
+	const signOut = page.getByRole('navigation', { name: 'Hovedmenu' }).locator('.user');
+	await signOut.click();
+	await expect(signOut).toContainText('Tryk igen for at logge ud');
+	await signOut.click();
 	// `exact`, because "Log ind" is a substring of "Log ind med en passkey" and
 	// Playwright matches an accessible name loosely unless told otherwise.
 	await expect(page.getByRole('button', { name: 'Log ind', exact: true })).toBeVisible();

web/playwright.config.js

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

web/src/app.css

@@ -210,6 +210,52 @@
 	--shadow-lg: 0 8px 32px rgb(0 0 0 / 0.4);
 }
 
+/* Kul — the greys of Apple Notes' dark mode, to Kristian's own sampled values.
+   Three panel greys, lightest sidebar to darkest editor — the reverse of the usual
+   sunken-is-darkest order, which is why the editor gets its own --editor-bg rather
+   than sharing --surface-raised with the list. The accent turns amber, and the
+   selected menu item, selected note and section headings each get a fallback token
+   so this theme can hit its colours without touching any other. */
+[data-theme='charcoal'] {
+	--ground: #1e1e1e;
+	--surface: #2a3033;
+	--surface-raised: #242b2e; /* the note list */
+	--surface-sunken: #2d3133; /* the menu / sidebar — lightest here */
+	--line: #34393b;
+	--line-strong: #414749;
+
+	--ink: #ffffff;
+	--ink-muted: #dcdcdc;
+	--ink-faint: #9ba0a2;
+
+	/* Amber, Apple's Notes accent. The bright value is the selected menu item; the
+	   dark text rides on top of it. */
+	--accent: #ffce35;
+	--accent-hover: #ffd75a;
+	--accent-sunken: #ffce35;
+	--accent-ink: #1e1e1e;
+
+	/* Per-element, and only here — every other theme falls back to the shared token
+	   in the var() calls that read these. */
+	--editor-bg: #1e1e1e; /* the text field, a shade below the list */
+	--note-on-bg: #a78c26; /* a selected note in the list — gold */
+	--note-on-ink: #1e1e1e; /* dark text on the gold */
+	--nav-active-ink: #1e1e1e; /* dark text on the amber menu item */
+	--heading-ink: #8a8e90; /* PROJEKTER and the group names — quiet grey */
+	--note-group-bg: #2d3133; /* day separators take the menu's resting grey, not the darker ground */
+
+	--p1: #cf6b6b;
+	--p2: #d69f5c;
+	--p3: #6b9ecf;
+	--p4: var(--ink-faint);
+
+	--danger: #cf6b6b;
+	--danger-sunken: #33201f;
+
+	--shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+	--shadow-lg: 0 8px 32px rgb(0 0 0 / 0.4);
+}
+
 /* Papir — warm light, closer to paper than to a screen. */
 [data-theme='paper'] {
 	--ground: #f6f1e7;
@@ -375,9 +421,13 @@ button {
 	   søgefelt. */
 }
 
+/* A translucent wash of the accent, not a solid block and not the old near-invisible
+   tint. --accent-sunken sat a hair off the editor's own surface in dark, so a
+   selection could not be seen; a solid accent could, but read as a heavy slab. Mixing
+   the accent part-way into transparent lays a clear green film over the text while it
+   keeps its own colour — visible on white and on the dark surfaces alike. */
 ::selection {
-	background: var(--accent-sunken);
-	color: var(--ink);
+	background: color-mix(in oklab, var(--accent) 42%, transparent);
 }
 
 /* Scrollbars, made quiet. The default on Windows is a wide grey slab that

web/src/lib/components/Sidebar.svelte

@@ -31,9 +31,36 @@
 
 	async function signOut() {
 		await api.logout();
+		// Empty the offline data cache before leaving: the service worker keeps the
+		// last-seen task and note lists so a network drop does not blank the app, and
+		// the next person to sign in on this browser must not find them.
+		try {
+			navigator.serviceWorker?.controller?.postMessage({ type: 'clear-api-cache' });
+			await caches?.delete('verdande-api');
+		} catch {
+			// No service worker / no Cache API (older browser, private mode): nothing
+			// was cached, so nothing to clear.
+		}
 		location.href = '/';
 	}
 
+	// Signing out is one click from a button the pointer passes over on its way to
+	// everything below it, and it drops you at the login screen — so it asks first.
+	// A second click within a few seconds confirms; anything else lets it lapse. Not
+	// a dialog: a two-step button is lighter and stays where the eye already is.
+	let confirmSignOut = $state(false);
+	let signOutTimer;
+	function onSignOutClick() {
+		if (confirmSignOut) {
+			clearTimeout(signOutTimer);
+			signOut();
+			return;
+		}
+		confirmSignOut = true;
+		clearTimeout(signOutTimer);
+		signOutTimer = setTimeout(() => (confirmSignOut = false), 3500);
+	}
+
 	let filters = $state([]);
 	let labels = $state([]);
 
@@ -1050,12 +1077,12 @@
 			{#if !app.connected}
 				<span class="offline" title={t('nav.offlineHint')}>{t('nav.offline')}</span>
 			{/if}
-			<button class="user" onclick={signOut}>
+			<button class="user" class:confirming={confirmSignOut} onclick={onSignOutClick}>
 				<span class="avatar" style="background: {app.user?.avatar_color}">
 					{app.user?.name?.[0]?.toUpperCase() ?? '?'}
 				</span>
-				<span class="user-name">{app.user?.name}</span>
-				<span class="signout">{t('nav.signOut')}</span>
+				<span class="user-name">{confirmSignOut ? t('nav.signOutConfirm') : app.user?.name}</span>
+				<span class="signout">{confirmSignOut ? '' : t('nav.signOut')}</span>
 			</button>
 		</div>
 	</div>
@@ -1091,14 +1118,16 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--s5);
-		padding: var(--s4) var(--s3);
+		/* A few pixels more air down each side than the rows strictly need, so the
+		   menu breathes rather than sitting flush against its own edges. */
+		padding: var(--s4) calc(var(--s3) + 3px);
 		background: var(--surface-sunken);
 		border-right: 1px solid var(--line);
 		/* Selve bjælken ruller ikke længere — .scroller gør. `hidden` frem for
 		   ingenting, fordi den stadig er den yderste kant: løber en række over,
 		   skal den klippes her og ikke skubbe kolonnen bredere. */
 		overflow: hidden;
-		padding-left: max(var(--s3), env(safe-area-inset-left));
+		padding-left: max(calc(var(--s3) + 3px), env(safe-area-inset-left));
 		position: relative;
 	}
 
@@ -1317,7 +1346,9 @@
 	h2 {
 		font-size: var(--menu-size);
 		font-weight: 600;
-		color: var(--ink);
+		/* Kul sets these headings to a quiet grey (--heading-ink); every other theme
+		   falls back to the reading ink and keeps them bold and bright. */
+		color: var(--heading-ink, var(--ink));
 	}
 
 	/* The heading's mark, in the muted ink so the bold name still leads. Sized and
@@ -1572,7 +1603,10 @@
 	   in both themes. */
 	a.active {
 		background: var(--accent-sunken);
-		color: var(--ink);
+		/* On a solid accent (Kul's amber menu item) the label goes dark via
+		   --nav-active-ink; on the tinted accent-sunken every other theme uses, it
+		   falls back to the reading ink. */
+		color: var(--nav-active-ink, var(--ink));
 		font-weight: 600;
 	}
 
@@ -1695,6 +1729,16 @@
 		background: var(--surface);
 	}
 
+	/* Asking to confirm: the row goes to the danger tint and the name is replaced by
+	   "click again", so the second click is plainly the one that signs out. */
+	.user.confirming {
+		background: var(--danger-sunken);
+	}
+
+	.user.confirming .user-name {
+		color: var(--danger);
+	}
+
 	.avatar {
 		width: 22px;
 		height: 22px;

web/src/lib/components/TaskRow.svelte

@@ -228,13 +228,21 @@
 		align-items: flex-start;
 		padding: var(--s3) var(--s2);
 		border-bottom: 1px solid var(--line);
+		border-radius: var(--radius);
 		transition:
 			opacity var(--medium) var(--ease),
 			transform var(--medium) var(--ease);
 	}
 
-	.row:hover {
-		background: var(--surface);
+	/* Hover only where there is a real pointer. On a touch screen a :hover on the tap
+	   target makes iOS spend the first tap applying the hover and only open on the
+	   second — the "double-tap" on iPhone. With no hover to apply, the first tap opens
+	   the task. The rounded corners are on the row itself, so the highlight is a
+	   rounded box like a note in the list. */
+	@media (hover: hover) {
+		.row:hover {
+			background: var(--surface);
+		}
 	}
 
 	/* The exit: a short lift and fade, so completing something reads as the task

web/src/lib/connectivity.svelte.js

@@ -1,11 +1,11 @@
 /**
  * Connectivity, as the app experiences it — not as the browser reports it.
  *
- * This is for short drops: a few seconds of lost Wi-Fi, a tunnel, a base station
- * handing over. It is deliberately NOT offline support. The app is already loaded
- * and its data is already in memory, so there is nothing to cache and nothing to
- * open from cold; what a blip needs is for the save you just made to survive it,
- * not for the whole app to run without a server.
+ * This is the WRITE side of surviving a short drop — a few seconds of lost Wi-Fi, a
+ * tunnel, a base station handing over. The READ side lives in the service worker,
+ * which keeps the last-seen task and note lists so a reload through a drop is not a
+ * blank screen. This store is the other half: it is what keeps the save you just made
+ * from being reverted under your hands while the network is briefly gone.
  *
  * The request layer drives this: it retries a failed request for a short window
  * (see api.js) and tells this store while it is trying, so the interface can say

web/src/lib/locales/da.js

@@ -119,6 +119,7 @@ export const da = {
 	'nav.calendar': 'Kalender',
 	'nav.settings': 'Indstillinger',
 	'nav.signOut': 'Log ud',
+	'nav.signOutConfirm': 'Tryk igen for at logge ud',
 	'nav.main': 'Hovedmenu',
 	'nav.search': 'Søg',
 	'nav.searchLong': 'Søg i opgaver og projekter',
@@ -659,7 +660,7 @@ export const da = {
 	// --- settings: integrations --------------------------------------------------------
 	'int.mailboxes': 'Postkasser',
 	'int.mailboxesHint':
-		'Flag en mail i iCloud, Fastmail eller enhver anden udbyder, og den bliver en opgave. Én vej: fjerner du flaget, sker der ikke noget med opgaven. Office 365 kan ikke bruges her — Microsoft har lukket for kodeord på IMAP.',
+		'Flag en mail i iCloud, Fastmail eller enhver anden udbyder, og den bliver en opgave — flaget fjernes, når opgaven er oprettet. Kun én vej: gør du selv noget ved mailen bagefter, sker der ikke noget med opgaven. Office 365 kan ikke bruges her — Microsoft har lukket for kodeord på IMAP.',
 	'int.addMailbox': 'Tilføj en postkasse',
 	'int.host': 'IMAP-server',
 	'int.username': 'Brugernavn',
@@ -675,7 +676,7 @@ export const da = {
 	'int.fetching': 'Henter …',
 	'int.gmail': 'Gmail',
 	'int.gmailHint':
-		'Stjernemarkér en mail, eller giv den en etiket, og den bliver en opgave. Envejs: at fjerne stjernen gør ikke noget ved opgaven.',
+		'Stjernemarkér en mail, eller giv den en etiket, og den bliver en opgave — stjernen fjernes så (en etiket bliver, hvor den er). Det du selv gør ved mailen bagefter, ændrer ikke opgaven.',
 	'int.connectGmail': 'Forbind Gmail',
 	'int.fromEnv':
 		'Klienten er sat i miljøet (VERDANDE_GMAIL_CLIENT_ID), så den kan ikke ændres her. Det er med vilje: en værdi i runens manifest er en beslutning, der bliver anvendt igen ved hver genstart, og en formular, der kunne overskrive den, ville gøre manifestet til en løgn.',
@@ -843,6 +844,8 @@ export const da = {
 	// --- the themes -------------------------------------------------------------------
 	'theme.dark': 'Nordlys',
 	'theme.darkNote': 'Mørk med grøn accent.',
+	'theme.charcoal': 'Kul',
+	'theme.charcoalNote': 'Neutral mørkegrå.',
 	'theme.dusk': 'Skumring',
 	'theme.duskNote': 'Mørk og varm, med rav.',
 	'theme.light': 'Dagslys',

web/src/lib/locales/en.js

@@ -115,6 +115,7 @@ export const en = {
 	'nav.calendar': 'Calendar',
 	'nav.settings': 'Settings',
 	'nav.signOut': 'Sign out',
+	'nav.signOutConfirm': 'Click again to sign out',
 	'nav.main': 'Main menu',
 	'nav.search': 'Search',
 	'nav.searchLong': 'Search tasks and projects',
@@ -655,7 +656,7 @@ export const en = {
 	// --- settings: integrations --------------------------------------------------------
 	'int.mailboxes': 'Mailboxes',
 	'int.mailboxesHint':
-		'Flag an email in iCloud, Fastmail or any other provider and it becomes a task. One way: removing the flag does nothing to the task. Office 365 cannot be used here — Microsoft has closed IMAP to passwords.',
+		'Flag an email in iCloud, Fastmail or any other provider and it becomes a task — the flag comes off once it has. One way only: what you do to the mail afterwards does not change the task. Office 365 cannot be used here — Microsoft has closed IMAP to passwords.',
 	'int.addMailbox': 'Add a mailbox',
 	'int.host': 'IMAP server',
 	'int.username': 'Username',
@@ -671,7 +672,7 @@ export const en = {
 	'int.fetching': 'Fetching …',
 	'int.gmail': 'Gmail',
 	'int.gmailHint':
-		'Star an email, or give it a label, and it becomes a task. One way: removing the star does nothing to the task.',
+		'Star an email, or give it a label, and it becomes a task — the star then comes off (a label stays where it is). What you do to the mail afterwards does not change the task.',
 	'int.connectGmail': 'Connect Gmail',
 	'int.fromEnv':
 		'The client is set in the environment (VERDANDE_GMAIL_CLIENT_ID), so it cannot be changed here. That is deliberate: a value in the Rune’s manifest is a decision reapplied on every restart, and a form that could overwrite it would make the manifest a lie.',
@@ -836,6 +837,8 @@ export const en = {
 	// --- the themes -------------------------------------------------------------------
 	'theme.dark': 'Northern lights',
 	'theme.darkNote': 'Dark, with a green accent.',
+	'theme.charcoal': 'Charcoal',
+	'theme.charcoalNote': 'Neutral dark grey.',
 	'theme.dusk': 'Dusk',
 	'theme.duskNote': 'Dark and warm, with amber.',
 	'theme.light': 'Daylight',

web/src/lib/push.js

@@ -26,9 +26,13 @@ export function permission() {
 }
 
 async function registration() {
-	// `ready` waits for an active worker; register() alone resolves while the
-	// worker is still installing, and subscribing against that fails.
-	await navigator.serviceWorker.register('/sw.js');
+	// SvelteKit registers src/service-worker.js itself on load, so normally there
+	// is already a registration here. Register it by hand only if there is not yet
+	// one — a push subscribe that races the app's own registration would otherwise
+	// find nothing. `ready` waits for an active worker; register() alone resolves
+	// while the worker is still installing, and subscribing against that fails.
+	const existing = await navigator.serviceWorker.getRegistration();
+	if (!existing) await navigator.serviceWorker.register('/service-worker.js');
 	return navigator.serviceWorker.ready;
 }
 

web/src/lib/stores.svelte.js

@@ -1006,6 +1006,7 @@ export const completedView = new CompletedView();
  */
 export const THEMES = [
 	{ id: 'dark', name: 'theme.dark', note: 'theme.darkNote', dark: true },
+	{ id: 'charcoal', name: 'theme.charcoal', note: 'theme.charcoalNote', dark: true },
 	{ id: 'dusk', name: 'theme.dusk', note: 'theme.duskNote', dark: true },
 	{ id: 'light', name: 'theme.light', note: 'theme.lightNote', dark: false },
 	{ id: 'paper', name: 'theme.paper', note: 'theme.paperNote', dark: false },

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

@@ -138,6 +138,7 @@
 
 	let totpSecret = $state('');
 	let totpURI = $state('');
+	let totpQR = $state('');
 	let totpCode = $state('');
 	let totpErrors = $state({});
 	let recoveryCodes = $state([]);
@@ -163,6 +164,7 @@
 			enablePassword = '';
 			totpSecret = r.secret;
 			totpURI = r.uri;
+			totpQR = r.qr;
 		} catch (e) {
 			totpErrors = e.fields ?? {};
 			if (!Object.keys(totpErrors).length) app.toast(humanMessage(e));
@@ -177,6 +179,7 @@
 			recoveryCodes = r.recovery_codes;
 			totpSecret = '';
 			totpURI = '';
+			totpQR = '';
 			totpCode = '';
 			app.user = await api.me();
 		} catch (e) {
@@ -492,8 +495,13 @@
 	{:else if totpSecret}
 		<div class="field">
 			<p class="hint">{t('account.scanHint')}</p>
+			{#if totpQR}
+				<!-- The server renders the otpauth URI as an SVG QR — one dark path on a
+				     white square, so it scans in either theme. It is the URI it already
+				     sent, drawn; nothing here builds it. -->
+				<div class="qr">{@html totpQR}</div>
+			{/if}
 			<p class="mono secret">{totpSecret}</p>
-			<p class="hint mono uri">{totpURI}</p>
 		</div>
 
 		<form onsubmit={confirmTOTP}>
@@ -514,7 +522,14 @@
 
 			<div class="row">
 				<button class="primary" type="submit">{t('account.confirm')}</button>
-				<button class="secondary" onclick={() => (totpSecret = '')}>{t('account.cancel')}</button>
+				<button
+				class="secondary"
+				onclick={() => {
+					totpSecret = '';
+					totpURI = '';
+					totpQR = '';
+				}}>{t('account.cancel')}</button
+			>
 			</div>
 		</form>
 	{:else}
@@ -859,6 +874,23 @@
 		color: var(--ink-faint);
 	}
 
+	/* On its own white card whatever the theme: a QR is dark-on-light or it does not
+	   scan, so the square keeps its own background rather than taking the page's. */
+	.qr {
+		width: 176px;
+		height: 176px;
+		padding: var(--s2);
+		background: #ffffff;
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+	}
+
+	.qr :global(svg) {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
 	.secret {
 		margin: 0;
 		padding: var(--s3);
@@ -869,10 +901,6 @@
 		overflow-wrap: anywhere;
 	}
 
-	.uri {
-		overflow-wrap: anywhere;
-	}
-
 	/* The understated variant: present, not loud. Bordered and in the muted ink so
 	   it reads as a footnote, brightening on hover. The cup is outline-only. */
 	.bmc {

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

@@ -423,7 +423,7 @@
 
 		<!-- The registration behind the button, for whoever can do something about
 		     it. Google issues no Gmail access to an unregistered client, and
-		     gmail.readonly is a restricted scope — so this step cannot be skipped by
+		     gmail.modify is a restricted scope — so this step cannot be skipped by
 		     any app. It can stop requiring a redeploy, which is what this is. -->
 		{#if app.user?.is_admin && client}
 			{#if client.from_env}

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

@@ -707,7 +707,10 @@
 	}}
 />
 
-<div class="notes">
+<!-- `has-note` drives the phone layout: one column, showing the list until a note
+     is opened and the editor once one is. On a wide screen both are always up and
+     the class does nothing. -->
+<div class="notes" class:has-note={selectedId}>
 	<aside>
 		<div class="head">
 			<h1>{t('notes.title')}</h1>
@@ -916,7 +919,15 @@
 	</aside>
 
 	<section class="editor">
-		{#if selected}
+		{#if selectedId}
+			<!-- Keyed on the id, which is set the instant a row is tapped — not on the
+			     loaded note, which arrives a moment later. On a phone that moment was the
+			     whole bug: the pane did not switch until the body had loaded, so the first
+			     tap looked like nothing and people tapped again. -->
+			<!-- Phone only (hidden on a wide screen by CSS): the way back to the list,
+			     since there the editor fills the screen and the list is not beside it. -->
+			<button class="back" onclick={() => open(null)}>‹ {t('notes.title')}</button>
+			{#if selected}
 			<NoteEditor
 				note={selected}
 				notes={notes}
@@ -1050,6 +1061,12 @@
 					{/if}
 				</div>
 			</footer>
+			{:else}
+				<!-- Chosen, but its full text is still loading. Keep the pane (so the tap
+				     felt like it landed) and stay quiet — the "pick a note" line is for
+				     when nothing is chosen at all, not for this half-second. -->
+				<p class="empty" aria-busy="true"></p>
+			{/if}
 		{:else}
 			<p class="empty">{t('notes.pickOne')}</p>
 		{/if}
@@ -1068,8 +1085,9 @@
 		   against the sidebar's rule, which reads as a rendering fault rather than
 		   as a layout. */
 		/* Luft hele vejen rundt om arket. Højre og bund var nul, dengang editoren
-		   ingen kant havde og ingenting kunne støde imod. */
-		padding: var(--s3) var(--s4) var(--s3) var(--s4);
+		   ingen kant havde og ingenting kunne støde imod. Et par pixels mere om
+		   notelisten, så kortet ikke ligger klods op ad menuen. */
+		padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 3px);
 		display: grid;
 		grid-template-columns: minmax(220px, 300px) 1fr;
 		gap: var(--s4);
@@ -1083,13 +1101,15 @@
 		gap: var(--s2);
 		min-height: 0;
 		min-width: 0;
-		border-right: 1px solid var(--line);
-		padding-right: var(--s3);
+		/* A rounded card, the same corner and border as the editor beside it — the
+		   list is its own sheet, not a column ruled off the page. */
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
 		/* White in light, a nuance lighter than the ground in dark — the note list
 		   is a surface you read down, so it lifts off the page like the editor does.
 		   --surface-raised is #fff in the light themes and one step up in the dark. */
 		background: var(--surface-raised);
-		padding-left: var(--s3);
+		padding: var(--s3);
 	}
 
 	.head {
@@ -1386,7 +1406,10 @@
 		top: 0;
 		z-index: 1;
 		margin: 0 0 var(--s1);
-		background: var(--ground);
+		/* --ground everywhere but Kul, where the ground is the darkest thing on screen
+		   and a day separator on it reads as a dark bar. There it takes the menu's own
+		   resting colour instead, via --note-group-bg. */
+		background: var(--note-group-bg, var(--ground));
 		border-radius: var(--radius);
 	}
 
@@ -1472,13 +1495,38 @@
 		white-space: nowrap;
 	}
 
-	.row:hover {
-		background: var(--surface);
+	/* Pointer only. On a touch screen a :hover on the tap target costs a tap — iOS
+	   spends the first applying the hover and opens on the second. Gated, the first
+	   tap opens the note. The row's buttons are shown outright on touch below, since
+	   there is no hover to reveal them. */
+	@media (hover: hover) {
+		.row:hover {
+			background: var(--surface);
+		}
+	}
+
+	@media (hover: none) {
+		.star,
+		.archive-one {
+			opacity: 1;
+		}
 	}
 
 	.row.on {
-		background: var(--surface-raised);
-		color: var(--ink);
+		background: var(--note-on-bg, var(--surface-raised));
+		color: var(--note-on-ink, var(--ink));
+	}
+
+	/* On a themed selection colour (Kul's gold), the row's own quieter tiers go dark
+	   too, or the date and the filed line vanish into it. Other themes have no
+	   --note-on-ink, so these fall back to their normal muted inks. */
+	.row.on .when,
+	.row.on .filed {
+		color: var(--note-on-ink, var(--ink-muted));
+	}
+
+	.row.on .filed-icon {
+		color: var(--note-on-ink, var(--ink-faint));
 	}
 
 	/* Samme størrelse som en opgavetitel. En note og en opgave er to ting af samme
@@ -1574,8 +1622,10 @@
 		min-height: 0;
 		min-width: 0;
 		/* A nuance lighter than the ground in dark, still white in light — matches
-		   the note list beside it so the two read as one writing surface. */
-		background: var(--surface-raised);
+		   the note list beside it so the two read as one writing surface. Kul gives
+		   the text field its own darker grey via --editor-bg; other themes fall back
+		   to the shared surface so the list and the editor stay the same colour. */
+		background: var(--editor-bg, var(--surface-raised));
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		/* Luft nok til at teksten ikke rører kanten.
@@ -1894,14 +1944,48 @@
 		font-size: var(--text-sm);
 	}
 
+	/* The way back to the list on a phone — an iOS-style "‹ Noter" at the top of the
+	   editor. Hidden on a wide screen, where the list is always beside the editor. */
+	.back {
+		display: none;
+		align-self: flex-start;
+		align-items: center;
+		gap: var(--s1);
+		margin-bottom: var(--s2);
+		padding: var(--s1) 0;
+		font-size: var(--text-base);
+		color: var(--accent);
+	}
+
 	@media (max-width: 700px) {
 		.notes {
 			grid-template-columns: 1fr;
+			padding: 0;
+			gap: 0;
 		}
 
-		aside {
-			border-right: 0;
-			padding-right: 0;
+		/* One pane at a time. The two-column card layout has no room on a phone, so
+		   the list shows until a note is opened and the editor takes over once one is
+		   — the back button is the way between them. Without this the editor stacked
+		   below a full-height list, so a tapped note opened out of sight. */
+		.notes.has-note aside {
+			display: none;
+		}
+
+		.notes:not(.has-note) .editor {
+			display: none;
+		}
+
+		/* Full-bleed: the card border and rounded corners are for sitting beside
+		   another card, and on one column there is nothing beside it. */
+		aside,
+		.editor {
+			border: 0;
+			border-radius: 0;
+		}
+
+		.back {
+			display: inline-flex;
 		}
 	}
 </style>

web/src/service-worker.js

@@ -0,0 +1,184 @@
+/// <reference types="@sveltejs/kit" />
+/* global self, caches, fetch, Response */
+
+/**
+ * verdande's service worker: Web Push, and a cache that holds through a short
+ * network drop.
+ *
+ * It used to do Push and nothing else, with a note that a cache serving yesterday's
+ * data was worse than an honest "cannot connect". The cache here does not do that.
+ * It is network-FIRST for everything that can go stale — a reader online always gets
+ * the live answer, and the cache is only reached for when the network is not — so it
+ * is not a copy of the app you work in offline, it is the app surviving a tunnel, a
+ * lift, a base-station handover. The five themes' worth of live task list stays live;
+ * it just no longer goes blank the moment the signal does.
+ *
+ * Writes are never touched here — they go straight to the network, and api.js already
+ * retries them across a short drop. Caching a write would mean a queue and conflicts,
+ * which is a different and much larger feature.
+ */
+import { build, files, version } from '$service-worker';
+
+// Versioned, so a deploy's worth of new hashed assets lands in a fresh cache and the
+// old one is dropped on activate — the app can never be served half of two builds.
+const SHELL = `verdande-shell-${version}`;
+// Not versioned: the data does not belong to a build, and clearing it every deploy
+// would throw away the very copy that lets a reload survive a drop. Cleared on sign-out.
+const API = 'verdande-api';
+
+// The shell: every hashed build asset, the static files, and the SPA fallback so a
+// navigation can be answered from the cache when the network cannot answer it.
+const SHELL_ASSETS = [...build, ...files, '/'];
+
+self.addEventListener('install', (event) => {
+	event.waitUntil(
+		(async () => {
+			const cache = await caches.open(SHELL);
+			await cache.addAll(SHELL_ASSETS);
+			// Take over at the next opportunity rather than waiting for every tab to
+			// close — paired with clients.claim below and the versioned cache, a deploy
+			// reaches the user on their next load.
+			await self.skipWaiting();
+		})()
+	);
+});
+
+self.addEventListener('activate', (event) => {
+	event.waitUntil(
+		(async () => {
+			for (const key of await caches.keys()) {
+				// Drop old shell versions; keep this shell and the data cache.
+				if (key !== SHELL && key !== API) await caches.delete(key);
+			}
+			await self.clients.claim();
+		})()
+	);
+});
+
+const isAsset = (pathname) => build.includes(pathname) || files.includes(pathname);
+
+self.addEventListener('fetch', (event) => {
+	const { request } = event;
+
+	// Writes go to the network, full stop — the app retries them itself, and a cached
+	// write is a promise this cannot keep. Cross-origin is none of our business.
+	if (request.method !== 'GET') return;
+	const url = new URL(request.url);
+	if (url.origin !== self.location.origin) return;
+
+	// Hashed build assets and static files never change for a given URL: cache-first,
+	// so a repeat load and an offline load are both instant.
+	if (isAsset(url.pathname)) {
+		event.respondWith(cacheFirst(request, SHELL));
+		return;
+	}
+
+	// The data: network-first so an online reader always sees the live list, with the
+	// last good copy kept for when the network is gone.
+	if (url.pathname.startsWith('/api/v1/')) {
+		event.respondWith(networkFirst(request, API));
+		return;
+	}
+
+	// A navigation (reload, or opening the app): the live page when there is one, the
+	// cached shell when there is not — so the app opens through a drop instead of
+	// showing the browser's dinosaur.
+	if (request.mode === 'navigate') {
+		event.respondWith(navigate(request));
+		return;
+	}
+});
+
+async function cacheFirst(request, cacheName) {
+	const cache = await caches.open(cacheName);
+	const hit = await cache.match(request);
+	if (hit) return hit;
+	const res = await fetch(request);
+	if (res.ok) cache.put(request, res.clone());
+	return res;
+}
+
+async function networkFirst(request, cacheName) {
+	const cache = await caches.open(cacheName);
+	try {
+		const res = await fetch(request);
+		// Only a real answer is worth keeping — a 401 or a 500 must not overwrite the
+		// last good copy, or an expired session would be served back offline as fact.
+		if (res.ok) cache.put(request, res.clone());
+		return res;
+	} catch (err) {
+		const hit = await cache.match(request);
+		if (hit) return hit;
+		throw err;
+	}
+}
+
+async function navigate(request) {
+	try {
+		return await fetch(request);
+	} catch {
+		const cache = await caches.open(SHELL);
+		const shell = await cache.match('/');
+		return shell ?? Response.error();
+	}
+}
+
+// Sign-out asks for the data cache to be emptied: the next person on this browser must
+// not find the last one's tasks sitting in it.
+self.addEventListener('message', (event) => {
+	if (event.data?.type === 'clear-api-cache') {
+		event.waitUntil(caches.delete(API));
+	}
+});
+
+// --- Web Push (unchanged in behaviour, moved here from the old static/sw.js) --------
+
+self.addEventListener('push', (event) => {
+	let payload = {};
+	try {
+		payload = event.data ? event.data.json() : {};
+	} catch {
+		// A push whose body is not our JSON still deserves to be shown: browsers show
+		// their own "site updated in the background" notice otherwise, which looks like
+		// a bug in the app.
+		payload = { title: 'verdande', body: event.data ? event.data.text() : '' };
+	}
+
+	const title = payload.title || 'verdande';
+	event.waitUntil(
+		self.registration.showNotification(title, {
+			body: payload.body || '',
+			icon: '/icon.svg',
+			badge: '/icon.svg',
+			// The tag collapses repeats: five comments on one task should replace each
+			// other rather than stack into five separate notifications.
+			tag: payload.tag || payload.url || 'verdande',
+			data: { url: payload.url || '/' }
+		})
+	);
+});
+
+self.addEventListener('notificationclick', (event) => {
+	event.notification.close();
+	const target = event.notification.data?.url || '/';
+
+	event.waitUntil(
+		(async () => {
+			const clientList = await self.clients.matchAll({
+				type: 'window',
+				includeUncontrolled: true
+			});
+
+			// Focus a tab that already has the app open rather than opening a second one.
+			// Somebody with the app pinned does not want a new tab per reminder.
+			for (const client of clientList) {
+				if (new URL(client.url).origin === self.location.origin) {
+					await client.focus();
+					if ('navigate' in client) await client.navigate(target);
+					return;
+				}
+			}
+			await self.clients.openWindow(target);
+		})()
+	);
+});

web/static/sw.js

@@ -1,64 +0,0 @@
-/**
- * verdande's service worker.
- *
- * It exists for Web Push and nothing else. There is deliberately no offline cache:
- * the app is a live view of a task list that other people are editing, and a cached
- * shell serving yesterday's data is worse than a browser saying it cannot connect.
- * Adding one later means versioning and invalidating it, which is a real feature
- * rather than a few lines here.
- */
-
-// Take over as soon as the browser is willing. Without these two, the first push
-// after granting permission arrives with no worker in control to show it.
-self.addEventListener('install', () => self.skipWaiting());
-self.addEventListener('activate', (event) => event.waitUntil(self.clients.claim()));
-
-self.addEventListener('push', (event) => {
-	let payload = {};
-	try {
-		payload = event.data ? event.data.json() : {};
-	} catch {
-		// A push whose body is not our JSON still deserves to be shown: browsers
-		// display their own "site updated in the background" notice otherwise, which
-		// looks like a bug in the app.
-		payload = { title: 'verdande', body: event.data ? event.data.text() : '' };
-	}
-
-	const title = payload.title || 'verdande';
-	event.waitUntil(
-		self.registration.showNotification(title, {
-			body: payload.body || '',
-			icon: '/icon.svg',
-			badge: '/icon.svg',
-			// The tag collapses repeats: five comments on one task should replace each
-			// other rather than stack into five separate notifications.
-			tag: payload.tag || payload.url || 'verdande',
-			data: { url: payload.url || '/' }
-		})
-	);
-});
-
-self.addEventListener('notificationclick', (event) => {
-	event.notification.close();
-	const target = event.notification.data?.url || '/';
-
-	event.waitUntil(
-		(async () => {
-			const clientList = await self.clients.matchAll({
-				type: 'window',
-				includeUncontrolled: true
-			});
-
-			// Focus a tab that already has the app open rather than opening a second
-			// one. Somebody with the app pinned does not want a new tab per reminder.
-			for (const client of clientList) {
-				if (new URL(client.url).origin === self.location.origin) {
-					await client.focus();
-					if ('navigate' in client) await client.navigate(target);
-					return;
-				}
-			}
-			await self.clients.openWindow(target);
-		})()
-	);
-});