Merge pull request #59 from kristianwind/upcoming-horizon

Kommende: en horisont på 7, 14 eller 30 dage

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/api.md

@@ -85,7 +85,7 @@ what a person reads is decided by the client, which knows what language they are
 curl -X POST https://todo.example.dk/api/v1/tasks/quick-add \
   -H "Authorization: Bearer vrd_..." \
   -H "Content-Type: application/json" \
-  -d '{"text": "betal moms i morgen kl 10 p1 #Firma @regnskab"}'
+  -d '{"text": "file the VAT return tomorrow at 10am p1 #Accounts @tax"}'
 ```
 
 ### Projects and sections
@@ -108,7 +108,7 @@ curl -X POST https://todo.example.dk/api/v1/tasks/quick-add \
 | Method | Path | |
 |---|---|---|
 | `GET` | `/today` | Overdue and due today, in your timezone. |
-| `GET` | `/upcoming?days=7` | One entry per day, empty days included. |
+| `GET` | `/upcoming?days=7` | One entry per day, empty days included. Up to 31; over that is capped. |
 | `GET` | `/search?q=` | Across everything you can see. |
 | `GET` `POST` | `/filters` | |
 | `GET` | `/filters/{id}/tasks` | Run one. |

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/index.md

@@ -18,9 +18,10 @@ forward mail to, and an MCP endpoint so Claude can work your task list directly.
 
 ## What it does
 
-- **[Quick add](quick-add.md) that reads what you type.** `betal moms i morgen kl
-  10 p1 #Firma @regnskab` becomes a task due tomorrow at 10:00, priority 1, in
-  Firma, labelled regnskab. Danish and English, mixed freely in one line.
+- **[Quick add](quick-add.md) that reads what you type.** `file the VAT return
+  tomorrow at 10am p1 #Accounts @tax` becomes a task due tomorrow at 10:00,
+  priority 1, in Accounts, labelled tax. Danish and English, mixed freely in one
+  line.
 - **Projects, sections, sub-tasks, labels, [saved filters](filters.md).** List,
   board and calendar views, and foldable groups over the projects in the sidebar.
   The calendar draws each task to its length — drag the foot to resize, the body
@@ -39,8 +40,17 @@ forward mail to, and an MCP endpoint so Claude can work your task list directly.
 - **Live sync** — a change made by somebody else appears without a refresh.
 - **Repeating tasks** as RRULE, comments and attachments, and reminders that go
   out as Web Push to an iPhone or a Mac.
-- **[Calendar](caldav.md), [mail](mail.md) and [Claude](mcp.md)** connected over
-  open standards rather than private formats.
+- **[Your mail as an inbox](mailboxes.md).** Star a mail in Gmail, or flag one
+  over IMAP in iCloud or Fastmail, and it becomes a task — and the star or flag
+  comes off once it has, so a starred inbox empties as the tasks are made instead
+  of only filling up.
+- **[Calendar](caldav.md) and [Claude](mcp.md)** connected over open standards
+  rather than private formats.
+- **Six themes**, three dark and three light — including *Charcoal*, a warm
+  near-black after Apple Notes — and a size and typeface chosen apart from them.
+- **Holds through a short network drop.** A save rides out a few seconds of no
+  signal and goes through when it comes back; a reload opens from what it last saw
+  rather than the browser's offline page. It installs as a PWA.
 
 ## What it looks like
 
@@ -60,6 +70,16 @@ columns.*
 marked with an arrow to them, so a delegated task reads as delegated wherever you
 meet it.*
 
+![Notes in the Charcoal theme](screenshots/notes-charcoal.png)
+
+*Charcoal, the newest of six themes — a warm near-black after Apple Notes, with
+amber where the accent green usually is.*
+
+![The six themes as swatches](screenshots/themes.png)
+
+*Six themes — three dark, three light — chosen on the settings page, with the
+typeface and how tightly it sits set apart from them.*
+
 ![Settings, integrations](screenshots/settings.png)
 
 *Where [Gmail](mailboxes.md), the [calendar feed](caldav.md) and the

docs/mcp.md

@@ -57,9 +57,9 @@ Both endpoints run the same server and reach the same things.
 | `complete_task` | Tick one off. |
 | `add_comment` | Comment on a task. |
 
-`create_task` prefers natural language, so *"add betal moms i morgen kl 10 p1
-#Firma"* goes through the same parser the app uses — dates, priorities, projects,
-labels and recurrence in either language.
+`create_task` prefers natural language, so *"add file the VAT return tomorrow at
+10am p1 #Accounts"* goes through the same parser the app uses — dates, priorities,
+projects, labels and recurrence in either language.
 
 ## What it can reach
 

docs/openapi.yaml

@@ -832,9 +832,9 @@ paths:
       tags: [tasks]
       summary: Create a task from one line of natural language.
       description: |
-        Danish and English. `betal moms i morgen kl 10 p1 #Firma @vigtigt` becomes
-        a task due tomorrow at 10:00, priority 1, in the project Firma, labelled
-        vigtigt. An unknown `#project` is not an error — the task goes to the
+        Danish and English. `file the VAT return tomorrow at 10am p1 #Accounts @tax`
+        becomes a task due tomorrow at 10:00, priority 1, in the project Accounts,
+        labelled tax. An unknown `#project` is not an error — the task goes to the
         Inbox rather than a thought being thrown away over a typo.
       requestBody:
         required: true
@@ -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.
@@ -2365,7 +2365,12 @@ paths:
       tags: [views]
       summary: The next few days, empty ones included.
       parameters:
-        - { name: days, in: query, schema: { type: integer, default: 7 } }
+        - {
+            name: days,
+            in: query,
+            description: "How many days to return, counting today. Above the maximum is capped, not refused.",
+            schema: { type: integer, default: 7, minimum: 1, maximum: 31 },
+          }
       responses:
         "200":
           description: OK

docs/quick-add.md

@@ -3,11 +3,11 @@
 One line in, a fully-formed task out.
 
 ```
-betal moms i morgen kl 10 p1 #Firma @regnskab
+file the VAT return tomorrow at 10am p1 #Accounts @tax
 ```
 
-becomes a task called **betal moms**, due tomorrow at 10:00, priority 1, in the
-Firma project, labelled regnskab.
+becomes a task called **file the VAT return**, due tomorrow at 10:00, priority 1,
+in the Accounts project, labelled tax.
 
 The parts it understands are tinted underneath the text as you type, so you can see
 it being read before you commit to it.
@@ -16,8 +16,8 @@ it being read before you commit to it.
 
 | You type | It means |
 |---|---|
-| `#Firma` | Put it in that project. `#"Q3 rapport"` for a name with spaces. |
-| `@regnskab` | Add that label. As many as you like. |
+| `#Accounts` | Put it in that project. `#"Q3 report"` for a name with spaces. |
+| `@tax` | Add that label. As many as you like. |
 | `p1` … `p4` | Priority. `!!!`, `!!` and `!` also work. |
 | `i dag`, `i morgen`, `i overmorgen` | Today, tomorrow, the day after. |
 | `mandag`, `på fredag` | The next such weekday. |

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/tasks_test.go

@@ -285,6 +285,49 @@ func TestTodayAndUpcoming(t *testing.T) {
 	}
 }
 
+// The horizon is the list's, and it is asked for per request: seven days is the
+// default, thirty is what Kommende offers for "when does this month get busy", and
+// anything past the cap is trimmed rather than refused — a client that asks for a
+// year gets a month, not a 400.
+func TestUpcomingHorizon(t *testing.T) {
+	ts := newTestServer(t)
+	ts.bootstrap(t)
+
+	resp, out := ts.do(t, "POST", "/api/v1/tasks", map[string]any{
+		"content":  "om tyve dage",
+		"due_date": userDate(t, 20),
+	})
+	if resp.StatusCode != http.StatusCreated {
+		t.Fatalf("create: %d %v", resp.StatusCode, out)
+	}
+
+	count := func(query string) (int, int) {
+		t.Helper()
+		_, view := ts.do(t, "GET", "/api/v1/upcoming"+query, nil)
+		days, _ := view["days"].([]any)
+		var tasks int
+		for _, d := range days {
+			day, _ := d.(map[string]any)
+			list, _ := day["tasks"].([]any)
+			tasks += len(list)
+		}
+		return len(days), tasks
+	}
+
+	if n, found := count(""); n != 7 || found != 0 {
+		t.Errorf("default horizon returned %d days and %d tasks, want 7 and 0", n, found)
+	}
+	if n, found := count("?days=30"); n != 30 || found != 1 {
+		t.Errorf("days=30 returned %d days and %d tasks, want 30 and 1", n, found)
+	}
+	if n, _ := count("?days=365"); n != 31 {
+		t.Errorf("days=365 returned %d days, want it capped at 31", n)
+	}
+	if n, _ := count("?days=nonsense"); n != 7 {
+		t.Errorf("an unreadable days returned %d days, want the default 7", n)
+	}
+}
+
 func TestSearchFindsAcrossProjects(t *testing.T) {
 	ts := newTestServer(t)
 	ts.bootstrap(t)

internal/httpapi/views_handlers.go

@@ -51,7 +51,8 @@ type upcomingDay struct {
 	Tasks []taskJSON `json:"tasks"`
 }
 
-// handleUpcoming returns the next seven days, one entry per day.
+// handleUpcoming returns the next `days` days, one entry per day, seven by default
+// and at most a month.
 //
 // Empty days are included on purpose: the view is a calendar strip, and a Thursday
 // missing from the response because nothing is due would collapse the layout and
@@ -65,10 +66,14 @@ func (s *Server) handleUpcoming(w http.ResponseWriter, r *http.Request) {
 	from := start.Format("2006-01-02")
 	to := start.AddDate(0, 0, days-1).Format("2006-01-02")
 
+	// The row limit follows the window rather than sitting at a constant, or a
+	// month asked for with the same ceiling as a week would truncate the last days
+	// silently — and a day cut off the end of the answer looks exactly like a day
+	// with nothing due.
 	tasks, err := s.db.ListTasks(r.Context(), user.ID, store.TaskFilter{
 		DueFrom:   from,
 		DueBefore: to,
-		Limit:     1000,
+		Limit:     200 * days,
 	})
 	if err != nil {
 		s.internal(w, r, "upcoming", err)

site/index.html

@@ -992,12 +992,22 @@
 					<figure class="shot">
 						<img
 							src="screenshots/themes.webp"
-							alt="The settings page showing five themes as swatches and, below them, four looks written in the typeface each one selects."
+							alt="The settings page showing six themes as swatches and, below them, four looks written in the typeface each one selects."
 							width="1400"
 							height="900"
 							loading="lazy"
 						/>
-						<figcaption>Five themes and four looks: how bright, and how it reads.</figcaption>
+						<figcaption>Six themes and four looks: how bright, and how it reads.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/notes-charcoal.webp"
+							alt="Notes in the Charcoal theme: a warm near-black modelled on Apple Notes, the note list on the left and a note open on the right, with amber where the accent green usually is."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Charcoal — the newest theme, a warm near-black after Apple Notes, amber for the accent.</figcaption>
 					</figure>
 					<figure class="shot">
 						<img
@@ -1040,6 +1050,75 @@
 						<figcaption>Integrations: your mailbox, your calendar feed, your address.</figcaption>
 					</figure>
 				</div>
+
+				<h3 class="sub">Six themes, the same day</h3>
+				<p class="muted">
+					Three dark and three light — a property of the screen you are sitting at, a
+					laptop in the sun and a monitor in a dark room wanting different answers. The
+					typeface and how tight it sits are chosen apart from them.
+				</p>
+				<div class="shots">
+					<figure class="shot">
+						<img
+							src="screenshots/theme-northern-lights.webp"
+							alt="The Today view in the Northern lights theme: dark, with a green accent."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Northern lights — dark, a green accent. The default.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-charcoal.webp"
+							alt="The Today view in the Charcoal theme: a warm near-black modelled on Apple Notes, with amber for the accent."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Charcoal — a warm near-black after Apple Notes, amber accent.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-dusk.webp"
+							alt="The Today view in the Dusk theme: dark and warm, with an amber accent."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Dusk — dark and warm.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-daylight.webp"
+							alt="The Today view in the Daylight theme: light and coolly neutral."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Daylight — light and coolly neutral.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-paper.webp"
+							alt="The Today view in the Paper theme: light and warm, like paper."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Paper — light and warm, like paper.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/theme-contrast.webp"
+							alt="The Today view in the Contrast theme: black on white, for bright light."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Contrast — black on white, for bright light.</figcaption>
+					</figure>
+				</div>
 			</section>
 
 			<section id="features">
@@ -1120,6 +1199,15 @@
 							by itself — without touching when it is actually due.
 						</p>
 					</div>
+					<div class="cell">
+						<h3>Holds through a drop</h3>
+						<p>
+							A tunnel, a lift, a base station handing over — the app does not go
+							blank when the signal does. A save you make rides out a few seconds of
+							no connection and goes through when it comes back, and a reload opens
+							from what it last saw rather than the browser's offline page.
+						</p>
+					</div>
 				</div>
 
 				<p class="group-label">Connected to what you already use</p>
@@ -1154,9 +1242,10 @@
 						<h3>Your mail, as an inbox</h3>
 						<p>
 							Star a mail in Gmail, or flag one over IMAP in iCloud or Fastmail, and
-							it becomes a task. Forward one to your own address instead and the
-							subject is parsed like anything else you type. One way: unstarring it
-							later does nothing to the task you made.
+							it becomes a task — and the star or flag comes off once it has, so a
+							starred inbox empties as the tasks are made instead of only filling up.
+							Forward one to your own address instead and the subject is parsed like
+							anything else you type.
 						</p>
 					</div>
 					<div class="cell">
@@ -1237,6 +1326,25 @@
 					<a href="https://github.com/kristianwind/verdande/releases">the releases page</a>.
 				</p>
 				<ul class="lately">
+					<li>
+						<span class="ver">0.42</span>
+						A sixth theme, <strong>Charcoal</strong> — a warm near-black after Apple
+						Notes, with amber for the accent. And the app now holds through a short
+						network drop: a save rides out a few seconds of no signal, and a reload
+						opens from what it last saw rather than the browser's offline page.
+					</li>
+					<li>
+						<span class="ver">0.42</span>
+						A starred Gmail message loses its star once it has become a task, the way
+						a flagged IMAP mail already did — so a starred inbox empties itself as the
+						tasks are made instead of only filling up.
+					</li>
+					<li>
+						<span class="ver">0.42</span>
+						Notes read as three lines, the last one the project they are filed under;
+						the calendar lightened to pastel days with today marked at the top; and
+						two-factor set-up shows a QR code to scan.
+					</li>
 					<li>
 						<span class="ver">0.41</span>
 						A task you have delegated is marked where you meet it, not only on the

web/e2e/smoke.spec.js

@@ -64,6 +64,60 @@ function watchForTrouble(page) {
 	return trouble;
 }
 
+/**
+ * Kommendes liste kan se længere frem end en uge.
+ *
+ * Syv dage er stadig det, den åbner på — det er den vandring, der er værd at gå om
+ * morgenen. Men "hvornår bliver den her måned travl" er et andet spørgsmål, og
+ * månedsgitteret svarer på det med form frem for med rækkefølge. Derfor kan
+ * listen sættes til 14 og 30 dage, og valget bliver liggende: horisonten er et
+ * spørgsmål om, hvor langt man planlægger, ikke om hvilken skærm man sidder ved —
+ * men det er den samme slags valg som gitter eller liste, så det ligger samme sted.
+ */
+test('Kommende kan se en måned frem, og horisonten huskes', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	const box = page.getByLabel('Ny opgave');
+	await box.fill('skifte olie om 20 dage');
+	await box.press('Enter');
+	await expect(box).toHaveValue('');
+
+	await page.goto('/upcoming');
+	await page.getByRole('button', { name: 'Liste', exact: true }).click();
+
+	const days = page.locator('section:has(> h2)');
+	const task = page.getByText('skifte olie', { exact: true });
+
+	// Syv dage er udgangspunktet, og opgaven ligger uden for dem. At den er væk her
+	// er halvdelen af prøven: uden den kunne de tredive dage nedenfor være syv, der
+	// tilfældigvis viste den.
+	await expect(days).toHaveCount(7);
+	await expect(task).toBeHidden();
+
+	await page.getByRole('button', { name: '30 dage', exact: true }).click();
+	await expect(days).toHaveCount(30);
+	await expect(task).toBeVisible();
+
+	// Ugenummeret står kun, når strimlen er længere end en uge — ellers siger det
+	// ingenting, man ikke kunne se i forvejen.
+	await expect(days.first().getByText(/uge \d+/i)).toBeVisible();
+
+	// Og valget overlever en genindlæsning.
+	await page.reload();
+	await expect(days).toHaveCount(30);
+	await expect(
+		page.getByRole('button', { name: '30 dage', exact: true }),
+		'horisonten blev ikke husket'
+	).toHaveAttribute('aria-pressed', 'true');
+
+	await page.getByRole('button', { name: '7 dage', exact: true }).click();
+	await expect(days).toHaveCount(7);
+	await expect(days.first().getByText(/uge \d+/i)).toBeHidden();
+
+	expect(trouble).toEqual([]);
+});
+
 test('hurtig tilføjelse opretter en opgave, og den kan lukkes', async ({ page }) => {
 	const trouble = watchForTrouble(page);
 	await page.goto('/');
@@ -298,11 +352,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);
+	}
+	});
 });
 
 /**

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/scripts/generate-screenshots.js

@@ -73,6 +73,19 @@ const SHOTS = [
 	{ name: 'detail', path: (ids) => `/opgave/${ids.detail}`, theme: 'dark' },
 	{ name: 'notes', path: '/noter', theme: 'dark', prepare: openMeetingNote },
 	{ name: 'notes-source', path: '/noter', theme: 'dark', prepare: showNoteSource },
+	// Charcoal, the newest theme — a warm near-black modelled on Apple Notes, with
+	// amber where the green usually is. The notes list shows a theme's surfaces, text
+	// and one accent at once, so that is where the landing page carries it up close.
+	{ name: 'notes-charcoal', path: '/noter', theme: 'charcoal', prepare: openMeetingNote },
+	// The same Today view in each of the six themes, for a gallery that shows the
+	// whole range at a glance. One view throughout, so the only thing that changes
+	// from picture to picture is the theme itself. Names are the themes' own.
+	{ name: 'theme-northern-lights', path: '/', theme: 'dark' },
+	{ name: 'theme-charcoal', path: '/', theme: 'charcoal' },
+	{ name: 'theme-dusk', path: '/', theme: 'dusk' },
+	{ name: 'theme-daylight', path: '/', theme: 'light' },
+	{ name: 'theme-paper', path: '/', theme: 'paper' },
+	{ name: 'theme-contrast', path: '/', theme: 'contrast' },
 	// The new work, and in the light theme, which is what most people want to look
 	// at a landing page in. The calendar drawing tasks to their length, and a note
 	// somebody shared into the "Shared with me" group.

web/src/app.css

@@ -242,6 +242,7 @@
 	--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;

web/src/lib/components/Sidebar.svelte

@@ -31,6 +31,16 @@
 
 	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 = '/';
 	}
 

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

@@ -451,6 +451,8 @@ export const da = {
 	'view.filterEmpty': 'Ingenting matcher lige nu.',
 	'view.filterFailed': 'Filteret kunne ikke køres.',
 	'view.upcoming': 'Kommende',
+	'view.horizon': 'Periode',
+	'view.days': '{n} dage',
 	'view.mode': 'Visning',
 	'view.list': 'Liste',
 	'view.week': 'Uge',
@@ -660,7 +662,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',
@@ -676,7 +678,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.',

web/src/lib/locales/en.js

@@ -446,6 +446,8 @@ export const en = {
 	'view.filterEmpty': 'Nothing matches right now.',
 	'view.filterFailed': 'The filter could not be run.',
 	'view.upcoming': 'Upcoming',
+	'view.horizon': 'Range',
+	'view.days': '{n} days',
 	'view.mode': 'View',
 	'view.list': 'List',
 	'view.week': 'Week',
@@ -656,7 +658,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',
@@ -672,7 +674,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.',

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

@@ -865,8 +865,8 @@ class SidebarLayout {
 export const sidebar = new SidebarLayout();
 
 /**
- * Whether Kommende shows the next seven days as a list, one week as a grid, or the
- * whole month.
+ * Whether Kommende shows a run of days as a list, one week as a grid, or the whole
+ * month.
  *
  * In localStorage rather than on the account, and for the same reason as the
  * sidebar's width: a grid of seven columns needs room, and the answer on a phone is
@@ -878,24 +878,48 @@ export const sidebar = new SidebarLayout();
  */
 const UPCOMING_MODES = ['list', 'week', 'calendar'];
 
+/**
+ * How far the list looks ahead, in days.
+ *
+ * Seven days is a week's horizon and answers "what is coming"; thirty answers
+ * "when does this month get busy", which is the question a month grid answers by
+ * shape but not in order. The list is the only mode that takes a horizon — the
+ * grids are anchored to a week and a month, and a fortnight is neither.
+ *
+ * The server caps the window at 31 days, so nothing here may exceed that.
+ */
+export const UPCOMING_DAYS = [7, 14, 30];
+
 class UpcomingView {
-	mode = $state(read());
+	mode = $state(readChoice('verdande:upcoming', UPCOMING_MODES, 'list'));
+	days = $state(readChoice('verdande:upcoming-days', UPCOMING_DAYS, 7, Number));
 
 	set(next) {
 		if (!UPCOMING_MODES.includes(next)) return;
 		this.mode = next;
-		try {
-			localStorage.setItem('verdande:upcoming', next);
-		} catch {
-			// Private browsing; the choice simply will not persist.
-		}
+		writeChoice('verdande:upcoming', next);
+	}
+
+	setDays(next) {
+		const n = Number(next);
+		if (!UPCOMING_DAYS.includes(n)) return;
+		this.days = n;
+		writeChoice('verdande:upcoming-days', n);
 	}
 }
 
-function read() {
-	if (typeof localStorage === 'undefined') return 'list';
-	const stored = localStorage.getItem('verdande:upcoming');
-	return UPCOMING_MODES.includes(stored) ? stored : 'list';
+function readChoice(key, allowed, fallback, parse = String) {
+	if (typeof localStorage === 'undefined') return fallback;
+	const stored = parse(localStorage.getItem(key));
+	return allowed.includes(stored) ? stored : fallback;
+}
+
+function writeChoice(key, value) {
+	try {
+		localStorage.setItem(key, String(value));
+	} catch {
+		// Private browsing; the choice simply will not persist.
+	}
 }
 
 export const upcomingView = new UpcomingView();

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

@@ -1406,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);
 	}
 
@@ -1492,8 +1495,21 @@
 		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 {

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

@@ -1,6 +1,6 @@
 <script>
 	/**
-	 * Kommende: the next seven days as a list, one week as a grid, or the month.
+	 * Kommende: a run of days as a list, one week as a grid, or the month.
 	 *
 	 * The views ask for different things and none is a subset of the others — seven
 	 * days from today, against a chosen week, against six whole weeks around a
@@ -15,7 +15,7 @@
 	 * A week that straddles the 31st and the 1st has both days in the same row.
 	 */
 	import { api } from '$lib/api.js';
-	import { app, upcomingView } from '$lib/stores.svelte.js';
+	import { app, upcomingView, UPCOMING_DAYS } from '$lib/stores.svelte.js';
 	import { TASK, startDrag, carries, dragged, accept } from '$lib/dnd.js';
 	import TaskRow from '$lib/components/TaskRow.svelte';
 	import QuickAdd from '$lib/components/QuickAdd.svelte';
@@ -24,9 +24,12 @@
 
 	let days = $state([]);
 
+	// Reads `upcomingView.days` inside the effect on purpose: that is what makes
+	// choosing a longer horizon reload, rather than extending the strip with days
+	// nobody asked the server about.
 	$effect(() => {
 		if (upcomingView.mode !== 'list') return;
-		api.upcoming().then((data) => {
+		api.upcoming(upcomingView.days).then((data) => {
 			days = data.days;
 			app.tasks = data.days.flatMap((d) => d.tasks);
 		});
@@ -53,6 +56,21 @@
 		return day.toLocaleDateString(tag(), { weekday: 'long', day: 'numeric', month: 'short' });
 	}
 
+	// A month of headings repeats every weekday four times, and "mandag 6. okt"
+	// alone does not say which mandag. The week number is the label that does, and
+	// it only earns its place once the strip is longer than a week.
+	function weekOf(date) {
+		if (upcomingView.days <= 7) return null;
+		const day = new Date(date + 'T00:00:00');
+		// ISO weeks: Thursday decides which year and which week a row belongs to.
+		const thursday = new Date(day);
+		thursday.setDate(day.getDate() - ((day.getDay() + 6) % 7) + 3);
+		const firstThursday = new Date(thursday.getFullYear(), 0, 4);
+		firstThursday.setDate(firstThursday.getDate() - ((firstThursday.getDay() + 6) % 7) + 3);
+		const n = 1 + Math.round((thursday - firstThursday) / (7 * 86400000));
+		return t('view.weekNumber', { n });
+	}
+
 	// Reading tasks back out of the store keeps a completed row disappearing
 	// immediately rather than on the next load. It is also what makes a task
 	// dragged from one day to another land in its new section straight away: the
@@ -82,6 +100,19 @@
 <div class="view" class:wide={upcomingView.mode !== 'list'}>
 	<header>
 		<h1>{t('view.upcoming')}</h1>
+		{#if upcomingView.mode === 'list'}
+			<!-- Only the list takes a horizon. A week grid is a week and a month grid
+			     is a month; there is no fortnight for them to show. -->
+			<div class="views" role="group" aria-label={t('view.horizon')}>
+				{#each UPCOMING_DAYS as n}
+					<button
+						class:active={upcomingView.days === n}
+						onclick={() => upcomingView.setDays(n)}
+						aria-pressed={upcomingView.days === n}>{t('view.days', { n })}</button
+					>
+				{/each}
+			</div>
+		{/if}
 		<div class="views" role="group" aria-label={t('view.mode')}>
 			{#each [['list', t('view.list')], ['week', t('view.week')], ['calendar', t('view.month')]] as [value, label]}
 				<button
@@ -102,6 +133,7 @@
 	{:else}
 		{#each days as day (day.date)}
 			{@const tasks = live(day.date)}
+			{@const week = weekOf(day.date)}
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<section
 				class:over={over === day.date}
@@ -109,7 +141,10 @@
 				ondragleave={() => (over = null)}
 				ondrop={(e) => onDrop(e, day.date)}
 			>
-				<h2>{heading(day.date)}</h2>
+				<h2>
+					{heading(day.date)}
+					{#if week}<span class="week">{week}</span>{/if}
+				</h2>
 				{#if tasks.length}
 					{#each tasks as task (task.id)}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -210,6 +245,10 @@
 	}
 
 	h2 {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: var(--s2);
 		font-size: var(--text-xs);
 		font-weight: 560;
 		text-transform: uppercase;
@@ -220,6 +259,14 @@
 		margin-bottom: var(--s2);
 	}
 
+	/* Lighter than the day it sits beside: it is there to be found when you are
+	   lost in the fourth week, not read on every row. */
+	.week {
+		font-weight: 400;
+		letter-spacing: 0.04em;
+		opacity: 0.7;
+	}
+
 	/* An em dash rather than "ingen opgaver": seven repetitions of a sentence is
 	   noise, and the reader only needs to know the day is clear. */
 	.empty {

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);
-		})()
-	);
-});