feat(site): klik et skærmbillede og se det i læsbar størrelse

Et skærmbillede af en brugerflade siger ingenting ved 281 pixels, og det er der,
de fleste af dem sidder i gitteret. Et klik åbner nu det samme billede omkring
tre en halv gang større.

<dialog> frem for et selvbygget lag: Escape lukker, fokus bliver inde i den,
resten af siden bliver inert — tre ting browseren gør gratis og som et selvbygget
overlay skal have kode for hver af. Billedet får rolle og tabindex, så det også
kan åbnes fra tastaturet; en kontrol, kun en mus kan nå, er ikke en kontrol alle
har.

To ting rettet undervejs, som først kunne ses ved at kigge: billedet fik lov at
blive højere end skærmen, så billedtekst og lukkeknap røg op over kanten — og
lukkeknappen er den synlige vej ud. Og dialogen fyldte hele bredden i stedet for
at slutte om billedet, så skærmbilledet stod op ad venstre kant med knappen ude i
det modsatte hjørne. Nu er den fit-content og centreret, og alt er inden for
vinduet ned til en telefonbredde.

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

.gitignore

@@ -60,3 +60,8 @@ node_modules.nosync/
 # accident — 8.9 MB of macOS binary — and `go build ./tools/shots` without -o puts
 # it right back.
 /shots
+
+# The working handover. It names the panel, the server id and the production
+# address — a map of one person's setup, which does not belong in a public repo.
+# Kept on disk because it is how a session hands over to the next one.
+HANDOFF.md

cmd/verdande/main.go

@@ -75,6 +75,7 @@ func run() error {
 	runner := jobs.New(cfg, db, log, api.Mail(), api.Hub())
 	runner.SyncGmail = api.SyncGmail
 	runner.SyncMailbox = api.SyncMailbox
+	runner.Push = api.PushToUser
 	runner.Start(jobCtx)
 
 	srv := &http.Server{

internal/httpapi/gmail_handlers.go

@@ -256,6 +256,16 @@ func (s *Server) SyncGmail(ctx context.Context, user *store.User) (int, error) {
 	if err != nil {
 		return 0, err
 	}
+	if box != nil {
+		// The same guard as the mailboxes read over IMAP, for the same reason: a
+		// press of "Fetch now" during the sweep would otherwise make two runs from
+		// one marker.
+		unlock := s.lockMailbox(box.ID)
+		defer unlock()
+		if fresh, err := s.db.MailboxOfKind(ctx, user.ID, "gmail"); err == nil && fresh != nil {
+			box = fresh
+		}
+	}
 	if box == nil || box.RefreshToken == "" {
 		return 0, nil // not connected; nothing to do and nothing to complain about
 	}

internal/httpapi/mailbox_handlers.go

@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"net/http"
 	"strings"
+	"sync"
 	"time"
 
 	"github.com/go-chi/chi/v5"
@@ -139,6 +140,18 @@ func (s *Server) handleSyncMailbox(w http.ResponseWriter, r *http.Request) {
 // Exported because the background job calls it too, on the same terms and without
 // a budget: nobody is waiting there.
 func (s *Server) SyncMailbox(ctx context.Context, user *store.User, m *store.Mailbox) (int, error) {
+	// One reader of this mailbox at a time. Held for the whole run, marker and all:
+	// releasing before the marker is written would leave exactly the gap this is
+	// here to close.
+	unlock := s.lockMailbox(m.ID)
+	defer unlock()
+
+	// Re-read under the lock. The row that came in may have been fetched before the
+	// run that just finished moved the marker.
+	if fresh, err := s.db.Mailbox(ctx, m.UserID, m.ID); err == nil && fresh != nil {
+		m = fresh
+	}
+
 	client, err := imap.Dial(imap.Account{
 		Host: m.Host, Username: m.Username, Password: m.Password, Folder: m.Folder,
 	})
@@ -217,3 +230,11 @@ func (s *Server) SyncMailbox(ctx context.Context, user *store.User, m *store.Mai
 	}
 	return created, nil
 }
+
+// lockMailbox serialises one mailbox against itself and returns the release.
+func (s *Server) lockMailbox(id string) func() {
+	value, _ := s.syncing.LoadOrStore(id, &sync.Mutex{})
+	mu := value.(*sync.Mutex)
+	mu.Lock()
+	return mu.Unlock
+}

internal/httpapi/notifications_handlers.go

@@ -98,6 +98,12 @@ func (s *Server) notifyProject(r *http.Request, projectID, taskID, actorID, kind
 	}
 }
 
+// PushToUser is pushToUser for callers outside this package — the reminder job,
+// which has the schedule but not the keys.
+func (s *Server) PushToUser(userID, title, body, projectID string) {
+	s.pushToUser(userID, title, body, projectID)
+}
+
 func (s *Server) pushToUser(userID, title, body, projectID string) {
 	ctx, cancel := contextWithBackgroundTimeout(30 * time.Second)
 	defer cancel()

internal/httpapi/panel_test.go

@@ -5,6 +5,7 @@ import (
 	"net/http"
 	"net/http/httptest"
 	"strings"
+	"sync"
 	"testing"
 	"time"
 
@@ -82,3 +83,69 @@ func TestAPanelThatRefusesSaysSoAsJSON(t *testing.T) {
 		t.Errorf("the reply does not say what the panel answered: %v", body)
 	}
 }
+
+// Forty copies of one mail arrived in a single second because two runs read the
+// same marker before either wrote a new one — somebody pressing "Fetch now" while
+// the ten-minute sweep was already inside the same mailbox.
+//
+// The lock is what stops it, and a lock is only worth having if something tries
+// the door: this runs the two concurrently on purpose.
+func TestTwoRunsOfOneMailboxDoNotOverlap(t *testing.T) {
+	// A bare server: the lock needs nothing but its own zero value, and building a
+	// database and a session around it would only make the test slower to read.
+	srv := &Server{}
+
+	var inside, most int
+	var mu sync.Mutex
+	release := make(chan struct{})
+
+	// Stands in for a run: takes the lock, notes how many are inside, and holds it
+	// until told to let go.
+	run := func(done chan<- struct{}) {
+		unlock := srv.lockMailbox("box-1")
+		mu.Lock()
+		inside++
+		if inside > most {
+			most = inside
+		}
+		mu.Unlock()
+
+		<-release
+
+		mu.Lock()
+		inside--
+		mu.Unlock()
+		unlock()
+		done <- struct{}{}
+	}
+
+	first, second := make(chan struct{}), make(chan struct{})
+	go run(first)
+	go run(second)
+
+	// Long enough that both would be inside if nothing kept them apart.
+	time.Sleep(100 * time.Millisecond)
+	close(release)
+	<-first
+	<-second
+
+	if most != 1 {
+		t.Errorf("%d runs were inside the same mailbox at once; that is how one mail "+
+			"becomes forty tasks", most)
+	}
+
+	// And two different mailboxes must not wait for each other: one slow host is
+	// not everybody's problem.
+	a := srv.lockMailbox("box-a")
+	done := make(chan struct{})
+	go func() {
+		srv.lockMailbox("box-b")()
+		close(done)
+	}()
+	select {
+	case <-done:
+	case <-time.After(2 * time.Second):
+		t.Error("a second mailbox waited for the first")
+	}
+	a()
+}

internal/httpapi/server.go

@@ -11,6 +11,7 @@ import (
 	"os"
 	"path"
 	"strings"
+	"sync"
 	"time"
 
 	"github.com/go-chi/chi/v5"
@@ -40,6 +41,18 @@ type Server struct {
 	mcp     *mcp.Server
 	updates *update.Checker
 
+	// syncing serialises reads of one mailbox against itself. Two runs at once —
+	// somebody pressing "Fetch now" while the ten-minute sweep is in the middle of
+	// the same mailbox — both start from the marker as it was, both fetch the same
+	// messages, and both make tasks out of them. That is how forty copies of one
+	// mail arrived in a single second.
+	//
+	// A map of mutexes rather than one lock: two people's mailboxes have nothing to
+	// say to each other, and a single lock would make one slow host everybody's
+	// problem. Never cleaned out, because the key is a mailbox id and there are as
+	// many of those as there are mailboxes.
+	syncing sync.Map
+
 	// Nil when the base URL is not something an authenticator will accept — a bare
 	// hostname with no scheme, say. The endpoints answer 503 rather than the
 	// process refusing to start: passkeys are one way in among three, and an

internal/jobs/jobs.go

@@ -41,6 +41,10 @@ type Runner struct {
 	// reason as SyncGmail: it owns turning a message into a task.
 	SyncMailbox func(ctx context.Context, user *store.User, m *store.Mailbox) (int, error)
 
+	// Push delivers a notification to somebody's devices. Supplied by the HTTP
+	// layer, which owns the VAPID keys and the subscription list.
+	Push func(userID, title, body, projectID string)
+
 	wg sync.WaitGroup
 }
 
@@ -126,6 +130,15 @@ func (r *Runner) sendDueReminders(ctx context.Context) error {
 			"due":     rem.RemindAt.Format(time.RFC3339),
 		})
 
+		// And to the devices that asked for it. This was missing: reminders went out
+		// in-app and by mail, so somebody with the tab closed and no mail configured
+		// got a notification that never arrived — which is the case a reminder is
+		// for. Notifications from other people's actions did push; only the timed
+		// ones did not, and the interface said "on for this device" either way.
+		if r.Push != nil {
+			r.Push(rem.UserID, rem.TaskContent, reminderBody(rem.RemindAt), rem.ProjectID)
+		}
+
 		if r.mail.Configured() && rem.UserEmail != "" {
 			link := r.cfg.BaseURL + "/projekt/" + rem.ProjectID
 			if err := r.mail.SendReminder(ctx, rem.UserEmail, rem.UserName, rem.TaskContent, link); err != nil {
@@ -139,6 +152,12 @@ func (r *Runner) sendDueReminders(ctx context.Context) error {
 	return nil
 }
 
+// reminderBody is the line under the task's title. The time rather than the date:
+// a reminder arrives when it is due, so the day is today and saying so is noise.
+func reminderBody(at time.Time) string {
+	return at.Format("15:04")
+}
+
 // --- backups ---------------------------------------------------------------------
 
 const (

internal/jobs/jobs_test.go

@@ -276,3 +276,59 @@ func backupFiles(t *testing.T, cfg *config.Config) []string {
 	}
 	return out
 }
+
+// A reminder that nobody receives is not a reminder.
+//
+// The job sent them in-app and by mail. Somebody with the tab closed and no mail
+// server configured — which is the setup the docker one-liner produces — got
+// nothing, while the settings page said notifications were on for the device.
+// The push half was simply never wired: notifications from other people's actions
+// went out, only the timed ones did not.
+func TestADueReminderReachesTheDevices(t *testing.T) {
+	runner, db, _ := newRunner(t)
+	user := seedUser(t, db)
+
+	type sent struct{ userID, title, projectID string }
+	var got []sent
+	runner.Push = func(userID, title, body, projectID string) {
+		got = append(got, sent{userID, title, projectID})
+	}
+
+	inbox, err := db.InboxID(t.Context(), user.ID)
+	if err != nil {
+		t.Fatal(err)
+	}
+	task := &store.Task{ProjectID: inbox, Content: "ring til Anders", CreatedBy: user.ID}
+	if err := db.CreateTask(t.Context(), task, nil); err != nil {
+		t.Fatal(err)
+	}
+	// A minute ago, so it is due rather than upcoming.
+	at := time.Now().Add(-time.Minute)
+	if _, err := db.CreateReminder(t.Context(), task.ID, user.ID, &at, nil); err != nil {
+		t.Fatal(err)
+	}
+
+	if err := runner.sendDueReminders(t.Context()); err != nil {
+		t.Fatal(err)
+	}
+
+	if len(got) != 1 {
+		t.Fatalf("%d reminders reached the devices, want 1", len(got))
+	}
+	if got[0].userID != user.ID {
+		t.Errorf("it went to %q", got[0].userID)
+	}
+	if got[0].title != "ring til Anders" {
+		t.Errorf("the title is %q, not the task", got[0].title)
+	}
+
+	// And once. A reminder that arrives on every sweep is worse than one that does
+	// not arrive at all.
+	got = nil
+	if err := runner.sendDueReminders(t.Context()); err != nil {
+		t.Fatal(err)
+	}
+	if len(got) != 0 {
+		t.Errorf("the same reminder went out %d more times", len(got))
+	}
+}

site/index.html

@@ -6,13 +6,18 @@
 		<title>verdande — self-hosted tasks, shared</title>
 		<meta
 			name="description"
-			content="Self-hosted tasks and projects, shared. One Go binary with SQLite inside it. CalDAV, mail-to-task and an MCP connector for Claude."
+			content="Self-hosted tasks and projects, shared. One Go binary with SQLite inside it. Your mail as an inbox, CalDAV, passkeys, and an MCP connector for Claude."
 		/>
 		<meta name="theme-color" content="#111312" />
 
 		<meta property="og:title" content="verdande" />
 		<meta property="og:description" content="Self-hosted tasks and projects, shared. One binary, SQLite inside it." />
 		<meta property="og:type" content="website" />
+		<meta property="og:image" content="screenshots/today.webp" />
+		<meta property="og:image:alt" content="The Today view: projects and filters beside a list of what is due." />
+		<!-- Summary rather than the large card: the screenshot is a dense interface,
+		     and shrunk into a wide banner it reads as grey noise. -->
+		<meta name="twitter:card" content="summary" />
 
 		<link rel="icon" href="icon.svg" type="image/svg+xml" />
 
@@ -339,6 +344,89 @@
 				text-align: center;
 			}
 
+			/* --- zoom -------------------------------------------------------------
+
+			   A screenshot of an interface is unreadable at 280px in a three-column
+			   grid, which is where most of them sit. Clicking one opens it at the
+			   size it was taken.
+
+			   <dialog> rather than a hand-built overlay: Escape closes it, focus is
+			   trapped, the rest of the page is inert, and the browser does all three
+			   without a line of script. */
+			.shot img {
+				cursor: zoom-in;
+			}
+
+			/* Sized so the whole thing fits: a screenshot is 1.55 times wider than it
+			   is tall, so on a laptop the height is what runs out first. Left to grow,
+			   it pushed the caption and the close button off the top of the screen —
+			   and the button is the visible way out. */
+			dialog.zoom {
+				max-width: 96vw;
+				max-height: 100vh;
+				/* Wraps the image rather than the viewport. With a plain `auto` the box
+				   stayed full width, so the screenshot sat against the left edge and
+				   the close button ended up in the far corner, nowhere near it. */
+				width: fit-content;
+				margin: auto;
+				padding: 2.5rem 0 0;
+				border: 0;
+				background: transparent;
+				overflow: visible;
+			}
+
+			dialog.zoom::backdrop {
+				background: rgb(0 0 0 / 0.82);
+			}
+
+			dialog.zoom img {
+				max-width: 96vw;
+				max-height: 78vh;
+				width: auto;
+				height: auto;
+				display: block;
+				border-radius: var(--radius-lg);
+				cursor: zoom-out;
+			}
+
+			dialog.zoom figcaption {
+				margin-top: 0.75rem;
+				font-size: 0.8125rem;
+				color: #a8b0ac;
+				text-align: center;
+			}
+
+			/* The whole backdrop closes, so the button is a visible affordance rather
+			   than the only way out. */
+			dialog.zoom .close {
+				position: absolute;
+				top: 0;
+				right: 0;
+				background: none;
+				border: 0;
+				color: #a8b0ac;
+				font-size: 1.5rem;
+				line-height: 1;
+				cursor: pointer;
+				padding: 0.25rem 0.5rem;
+			}
+
+			dialog.zoom .close:hover {
+				color: #fff;
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				dialog.zoom[open] {
+					animation: zoom-in 0.15s ease-out;
+				}
+				@keyframes zoom-in {
+					from {
+						opacity: 0;
+						transform: scale(0.98);
+					}
+				}
+			}
+
 			.shots {
 				display: grid;
 				grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -436,7 +524,7 @@
 				<h2>What it looks like</h2>
 				<figure class="shot">
 					<img
-						src="screenshots/today.png"
+						src="screenshots/today.webp"
 						alt="The Today view: a sidebar of projects, filters and labels beside a list of tasks due today, each with its priority ring, time and labels."
 						width="1400"
 						height="900"
@@ -448,7 +536,7 @@
 				<div class="shots">
 					<figure class="shot">
 						<img
-							src="screenshots/board.png"
+							src="screenshots/board.webp"
 							alt="A project in board view: one column per section, with task cards showing due dates, labels and repetition."
 							width="1400"
 							height="900"
@@ -458,7 +546,7 @@
 					</figure>
 					<figure class="shot">
 						<img
-							src="screenshots/today-light.png"
+							src="screenshots/today-light.webp"
 							alt="The same Today view in the light theme."
 							width="1400"
 							height="900"
@@ -468,7 +556,7 @@
 					</figure>
 					<figure class="shot">
 						<img
-							src="screenshots/week.png"
+							src="screenshots/week.webp"
 							alt="Upcoming as a single week: seven columns of days, each holding the tasks due that day."
 							width="1400"
 							height="900"
@@ -478,7 +566,7 @@
 					</figure>
 					<figure class="shot">
 						<img
-							src="screenshots/detail.png"
+							src="screenshots/detail.webp"
 							alt="A task open in the detail drawer, with its description, due date, labels, sub-tasks and comments."
 							width="1400"
 							height="900"
@@ -488,7 +576,7 @@
 					</figure>
 					<figure class="shot">
 						<img
-							src="screenshots/themes.png"
+							src="screenshots/themes.webp"
 							alt="The settings page showing the five themes as swatches."
 							width="1400"
 							height="900"
@@ -498,7 +586,7 @@
 					</figure>
 					<figure class="shot">
 						<img
-							src="screenshots/history.png"
+							src="screenshots/history.webp"
 							alt="The instance-wide history page: who did what, in which project, filtered by person and event."
 							width="1400"
 							height="900"
@@ -541,10 +629,20 @@
 						</p>
 					</div>
 					<div class="cell">
-						<h3>Mail to task</h3>
+						<h3>Your mail, as an inbox</h3>
 						<p>
-							Forward an email to your own address and it becomes a task, subject
-							parsed like anything else you type.
+							Star a mail in Gmail, or flag one in iCloud or Fastmail, and it becomes
+							a task. Forward one to your own address instead and the subject is
+							parsed like anything else you type. One way: unstarring it later does
+							nothing to the task you made.
+						</p>
+					</div>
+					<div class="cell">
+						<h3>Nothing to remember</h3>
+						<p>
+							Start typing anywhere and you are writing a task, with the letter you
+							pressed already in the field. Sign in with a passkey and there is no
+							password to forget either.
 						</p>
 					</div>
 					<div class="cell">
@@ -554,6 +652,22 @@
 							round trip is tested, not promised.
 						</p>
 					</div>
+					<div class="cell">
+						<h3>Keys stay behind</h3>
+						<p>
+							Mail tokens and mailbox passwords are encrypted in the database, and the
+							key lives in a file beside it — not inside it. So a backup you download,
+							or one that ends up somewhere it should not, does not open your mail.
+						</p>
+					</div>
+					<div class="cell">
+						<h3>Who did what</h3>
+						<p>
+							Every change is written down — who moved it, who closed it, who let
+							somebody in. Delete the account and the trail stays: it is the
+							instance's record, not the person's.
+						</p>
+					</div>
 				</div>
 			</section>
 
@@ -605,5 +719,58 @@
 				</p>
 			</footer>
 		</div>
+
+		<!-- Zoom. Added by script rather than written into the markup, so a page with
+		     no JavaScript is exactly what it was before: the screenshots are still
+		     there, still readable, just not clickable. -->
+		<dialog class="zoom" aria-label="Screenshot, enlarged">
+			<button class="close" type="button" aria-label="Close">&times;</button>
+			<img alt="" />
+			<figcaption></figcaption>
+		</dialog>
+
+		<script>
+			(function () {
+				var dialog = document.querySelector('dialog.zoom');
+				if (!dialog || typeof dialog.showModal !== 'function') return;
+
+				var big = dialog.querySelector('img');
+				var caption = dialog.querySelector('figcaption');
+
+				function open(img) {
+					big.src = img.currentSrc || img.src;
+					big.alt = img.alt;
+					var fig = img.closest('figure');
+					var text = fig && fig.querySelector('figcaption');
+					caption.textContent = text ? text.textContent : '';
+					dialog.showModal();
+				}
+
+				document.querySelectorAll('.shot img').forEach(function (img) {
+					// Focusable and operable from the keyboard: a control that only a
+					// mouse can reach is not a control everybody has.
+					img.tabIndex = 0;
+					img.setAttribute('role', 'button');
+					img.addEventListener('click', function () { open(img); });
+					img.addEventListener('keydown', function (event) {
+						if (event.key === 'Enter' || event.key === ' ') {
+							event.preventDefault();
+							open(img);
+						}
+					});
+				});
+
+				dialog.addEventListener('click', function (event) {
+					// The backdrop is the dialog itself; anything inside it is not.
+					if (event.target === dialog || event.target === big ||
+						event.target.classList.contains('close')) {
+						dialog.close();
+					}
+				});
+				// Let go of the image when it closes, so a large screenshot is not
+				// held in memory for the rest of the visit.
+				dialog.addEventListener('close', function () { big.removeAttribute('src'); });
+			})();
+		</script>
 	</body>
 </html>