chore: release v0.1.0.63

Das Eingabefeld nutzt jetzt Passwort-Semantik und Autocomplete-Attribute, damit OS-Passwortmanager gespeicherte Schlüssel vorschlagen können.

Co-authored-by: Cursor <cursoragent@cursor.com>

README.md

@@ -2,7 +2,7 @@
 
 Digitales Yacht-Logbuch als Progressive Web App (PWA) — **kostenlos**, **werbefrei**, offline-fähig, End-to-End-verschlüsselt und mit Passkey-Anmeldung.
 
-**Live:** [kapteins-daagbok.eu](https://kapteins-daagbok.eu)
+**Live:** [kapteins-daagbok.eu](https://kapteins-daagbok.eu) · **Demo:** [kapteins-daagbok.eu/demo](https://kapteins-daagbok.eu/demo)
 
 ## Überblick
 
@@ -15,19 +15,29 @@ Alle sensiblen Inhalte werden **clientseitig verschlüsselt** (Web Crypto API).
 - **Passkey-Authentifizierung** (WebAuthn) mit optionaler Recovery-Phrase und lokalem PIN-Fallback
 - **Mehrere Logbücher** pro Benutzerkonto — eigene Logbücher und per Einladung geteilte Logbücher (Crew-Zugang) klar getrennt
 - **Reisetage** mit Hafen, Wetter, Tankständen, Ereignissen und Tagesnummer
+- **Kompass-Dial** für MgK- und RwK-Kurse — Ring-Eingabe, Gradfeld, Schrittweite 1°/5°/10° (maritime Orientierung: 0° = Nord)
 - **GPS-Tracks** (GPX/KML/GeoJSON-Upload, Karte, Statistiken)
 - **Foto-Anhänge** pro Reisetag
 - **Passkey-Signaturen** für Skipper und Crew (hybride elektronische Signatur)
 - **Schiffsdaten** und **Crew-Profile** (Skipper + Mitglieder)
 - **Statistik-Dashboard** — Strecken, Verbrauch, Segel/Motor, Hafenkette (pro Logbuch oder accountweit)
+- **Benutzerprofil** — kontoweite Einstellungen: Darstellung (Theme, Hell/Dunkel), OpenWeatherMap-API-Key, Web Push, PWA-Installation, Onboarding-Tour, Passkey-Verwaltung, Account-Statistik
 - **Kollaboration** — Crew per Einladungslink einladen (Schreib- oder Lesezugriff)
-- **Push-Benachrichtigungen** (optional) — Logbuch-Eigner per Web Push informieren, wenn Crew Änderungen synchronisiert (ohne Klartext-Inhalte; Opt-in in den Einstellungen)
+- **Push-Benachrichtigungen** (optional) — Logbuch-Eigner per Web Push informieren, wenn Crew Änderungen synchronisiert (ohne Klartext-Inhalte; Opt-in im Benutzerprofil)
 - **Read-only-Freigabe** — öffentlicher Lese-Link für Dritte
 - **Export** — PDF pro Reisetag, CSV-Download/-Teilen
 - **Backup & Wiederherstellung** — vollständiges verschlüsseltes Logbuch-Backup (Einträge, Fotos, GPS, Crew, Schiff) als `.daagbok.json`; Restore auf gleichem oder neuem Account
+- **Feedback** — Bug-, Feature- und allgemeine Rückmeldungen aus der App (serverseitig via [Ntfy](https://ntfy.sh) oder self-hosted)
 - **PWA** — installierbar auf iOS/Android, Offline-Modus, Update-Hinweise
 - **Mehrsprachig** — Deutsch und Englisch
-- **Demo-Logbuch & Onboarding-Tour** für neue Nutzer
+- **Demo-Logbuch & Onboarding-Tour** für neue Nutzer (auch unter `/demo` ohne Anmeldung)
+
+### Benutzerprofil vs. Logbuch-Einstellungen
+
+| Bereich | Inhalt |
+|---------|--------|
+| **Benutzerprofil** | Theme, Farbschema, Wetter-API-Key, Push, PWA, Tour, Passkeys, Account löschen |
+| **Logbuch-Einstellungen** | Crew-Einladungen, öffentliche Freigabe, Backup & Wiederherstellung (nur Eigner) |
 
 ## Architektur
 
@@ -48,6 +58,7 @@ Alle sensiblen Inhalte werden **clientseitig verschlüsselt** (Web Crypto API).
 | Auth | WebAuthn (Passkeys) + signiertes HttpOnly-Session-Cookie (`daagbok_session`) |
 | Krypto | Web Crypto API (AES-GCM), BIP39 Recovery |
 | Push (optional) | Web Push (VAPID), Custom Service Worker (`injectManifest`) |
+| Feedback (optional) | Ntfy (HTTP Publish) |
 
 ### Rollen & Zugriff
 
@@ -73,7 +84,7 @@ Skipper- und Crew-Profile im Logbuch sind **Inhaltsdaten** (verschlüsselt), nic
 
 ## Backup & Wiederherstellung
 
-Nur der **Logbuch-Eigner** kann unter **Einstellungen → Backup & Wiederherstellung** ein vollständiges Backup erstellen:
+Nur der **Logbuch-Eigner** kann unter **Logbuch-Einstellungen → Backup & Wiederherstellung** ein vollständiges Backup erstellen:
 
 1. Backup-Passphrase wählen (min. 8 Zeichen, getrennt von der Datei aufbewahren)
 2. Download als `.daagbok.json` — enthält alle verschlüsselten Payloads inkl. **Fotos** und GPS-Tracks
@@ -83,7 +94,7 @@ Vor dem Löschen eines Logbuchs weist die App auf diese Funktion hin. Crew-Einla
 
 ## Push-Benachrichtigungen (optional)
 
-Logbuch-**Eigner** können unter **Einstellungen** Web Push aktivieren. Sobald ein eingeladenes Crewmitglied mit Schreibrechten (`WRITE`) Änderungen synchronisiert, erhält der Owner eine **generische** Benachrichtigung — der Server kennt keine Logbuch-Inhalte (Zero-Knowledge).
+Logbuch-**Eigner** können im **Benutzerprofil** Web Push aktivieren. Sobald ein eingeladenes Crewmitglied mit Schreibrechten (`WRITE`) Änderungen synchronisiert, erhält der Owner eine **generische** Benachrichtigung — der Server kennt keine Logbuch-Inhalte (Zero-Knowledge).
 
 | Aspekt | Verhalten |
 |--------|-----------|
@@ -102,20 +113,32 @@ Schlüssel erzeugen: `npx web-push generate-vapid-keys` (im `server/`-Verzeichni
 
 Ausführlicher Implementierungs- und Testplan: [docs/push-notifications-plan.md](docs/push-notifications-plan.md).
 
+## Feedback (optional)
+
+Eingeloggte Nutzer können über das Feedback-Formular in der App Rückmeldungen senden. Der Server leitet sie an einen **Ntfy**-Topic weiter (kein Klartext-Logbuch auf dem Server).
+
+| Variable | Bedeutung |
+|----------|-----------|
+| `NTFY_SERVER` | Basis-URL (Standard: `https://ntfy.sh`) |
+| `NTFY_TOPIC` | Topic-Name (ohne URL) |
+| `NTFY_TOKEN` | Optional: Access-Token für geschützte Topics |
+
+Ohne `NTFY_TOPIC` antwortet die API mit „nicht konfiguriert“. Rate-Limiting und einfacher Spam-Schutz sind serverseitig aktiv.
+
 ## Projektstruktur
 
 ```
 kapteins-daagbok/
 ├── client/              # React-PWA (Frontend)
 │   ├── src/
-│   │   ├── components/  # UI-Komponenten
+│   │   ├── components/  # UI (u. a. CourseDialInput, UserProfilePage, FeedbackModal)
 │   │   ├── services/    # Auth, Sync, Krypto, Backup, Push, Analytics, …
 │   │   ├── sw.ts        # Service Worker (Precache + Web Push)
 │   │   └── i18n/        # DE/EN-Übersetzungen
 │   └── Dockerfile       # Nginx-Produktions-Image
 ├── server/              # Express-API + Prisma
-│   ├── src/routes/      # auth, logbooks, sync, collaboration, sign, push
-│   ├── src/services/    # z. B. pushNotify (Web Push)
+│   ├── src/routes/      # auth, logbooks, sync, collaboration, sign, push, feedback, weather
+│   ├── src/services/    # z. B. pushNotify, ntfyNotify
 │   └── prisma/          # Datenbankschema
 ├── docs/                # Projektdokumentation
 ├── scripts/             # Dev- und Deploy-Skripte
@@ -128,8 +151,9 @@ kapteins-daagbok/
 - **Node.js** 20+
 - **npm**
 - **Docker** (für PostgreSQL in der Entwicklung oder den vollständigen Stack)
-- Optional: eigener OpenWeatherMap-API-Key in den Einstellungen (sonst serverseitiger Key aus `.env`)
+- Optional: eigener OpenWeatherMap-API-Key im **Benutzerprofil** (sonst serverseitiger Key aus `.env`)
 - Optional: VAPID-Schlüssel für Web Push (siehe Abschnitt Push-Benachrichtigungen)
+- Optional: Ntfy-Topic für Feedback (siehe Abschnitt Feedback)
 
 ## Lokale Entwicklung
 
@@ -166,6 +190,10 @@ SESSION_SECRET=                 # openssl rand -base64 48 (in Prod Pflicht)
 VAPID_PUBLIC_KEY=
 VAPID_PRIVATE_KEY=
 VAPID_SUBJECT=mailto:support@kapteins-daagbok.eu
+# Optional — Feedback via Ntfy
+NTFY_SERVER=https://ntfy.sh
+NTFY_TOPIC=
+NTFY_TOKEN=
 ```
 
 `./scripts/start-dev.sh` prüft `ORIGIN` und `SESSION_SECRET` beim Start und gibt Hinweise aus.
@@ -189,6 +217,15 @@ cd server && npx prisma db push && cd ..
 | Frontend (Vite) | http://localhost:5173 |
 | Backend API | http://localhost:5000 |
 | Health Check | http://localhost:5000/api/health |
+| Public Demo | http://localhost:5173/demo |
+
+### 5. Tests (Frontend)
+
+```bash
+cd client && npm test
+```
+
+Vitest-Unit-Tests für Utils, i18n und Services (z. B. Kurswinkel, Benutzereinstellungen).
 
 ## Docker (produktionsnah)
 
@@ -198,9 +235,9 @@ Gesamten Stack lokal bauen und starten:
 ./scripts/start-dev-docker.sh
 ```
 
-Frontend: http://localhost · API: http://localhost/api/health
+Frontend: http://localhost · API: http://localhost/api/health · Demo: http://localhost/demo
 
-Umgebungsvariablen in `.env` setzen — mindestens `RP_ID`, `ORIGIN` (z. B. `http://localhost`) und `SESSION_SECRET`. Für Push die VAPID-Variablen an den Backend-Container durchreichen (`docker-compose.yml` → `backend.environment`).
+Umgebungsvariablen in `.env` setzen — mindestens `RP_ID`, `ORIGIN` (z. B. `http://localhost`) und `SESSION_SECRET`. Für Push die VAPID-Variablen an den Backend-Container durchreichen (`docker-compose.yml` → `backend.environment`). Für Feedback `NTFY_*` setzen.
 
 ## Deployment
 
@@ -212,7 +249,7 @@ Produktions-Update auf den Server (konfigurierbar via Umgebungsvariablen):
 
 Standard-Ziel: `root@10.0.0.25:/opt/kapteins-daagbok` — per `REMOTE_HOST`, `REMOTE_USER`, `REMOTE_DIR` überschreibbar.
 
-Auf dem Server müssen `server/.env` (oder gleichwertige Umgebung) u. a. `DATABASE_URL`, `RP_ID`, `ORIGIN`, `SESSION_SECRET` (≥ 32 Zeichen) und bei Push `VAPID_*` enthalten. Nach Schema-Änderungen: `npx prisma db push` im Backend-Container.
+Auf dem Server müssen `server/.env` (oder gleichwertige Umgebung) u. a. `DATABASE_URL`, `RP_ID`, `ORIGIN`, `SESSION_SECRET` (≥ 32 Zeichen) und bei Push `VAPID_*` enthalten. Optional `NTFY_*` für Feedback. Nach Schema-Änderungen: `npx prisma db push` im Backend-Container.
 
 ## Dokumentation
 
@@ -220,6 +257,7 @@ Auf dem Server müssen `server/.env` (oder gleichwertige Umgebung) u. a. `DATABA
 |----------|--------|
 | [docs/plausible-events.md](docs/plausible-events.md) | Custom Events für Plausible Analytics |
 | [docs/push-notifications-plan.md](docs/push-notifications-plan.md) | Web Push: Architektur, API, Testplan |
+| [docs/plan-compass-course-dial.md](docs/plan-compass-course-dial.md) | Kompass-Dial: UX- und Implementierungsplan |
 | [docs/marketing/kapteins-daagbok-beta-flyer.pdf](docs/marketing/kapteins-daagbok-beta-flyer.pdf) | Beta-Flyer (DIN A4) zum Ausdrucken — Quelle: `docs/marketing/beta-flyer.html`, neu erzeugen: `cd client && npm run generate:flyer` |
 | [.planning/PROJECT.md](.planning/PROJECT.md) | Produktvision und Anforderungen (GSD) |
 

VERSION

@@ -1 +1 @@
-0.1.0.46
+0.1.0.64

client/index.html

@@ -17,7 +17,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="Daagbok" />
-    <meta name="theme-color" content="#1e293b" />
+    <meta name="theme-color" content="#0b0c10" />
+    <script src="/appearance-bootstrap.js"></script>
     <link rel="apple-touch-icon" href="/logo.png" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="Kapteins Daagbok" />

client/package-lock.json

@@ -32,12 +32,14 @@
         "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.6.0",
+        "happy-dom": "^20.9.0",
         "playwright": "^1.51.0",
         "qrcode": "^1.5.4",
         "typescript": "~6.0.2",
         "typescript-eslint": "^8.59.2",
         "vite": "^6.3.5",
-        "vite-plugin-pwa": "^1.0.1"
+        "vite-plugin-pwa": "^1.0.1",
+        "vitest": "^3.2.4"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -2896,6 +2898,24 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -2991,6 +3011,23 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.60.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.60.0.tgz",
@@ -3255,6 +3292,131 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz",
+      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz",
+      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -3360,6 +3522,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/async": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -3541,6 +3713,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
@@ -3642,6 +3824,33 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/chai": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -3848,6 +4057,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3979,6 +4198,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
@@ -4068,6 +4300,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
@@ -4406,6 +4645,16 @@
         "url": "https://github.com/bgub/eta?sponsor=1"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4857,6 +5106,24 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/happy-dom": {
+      "version": "20.9.0",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.9.0.tgz",
+      "integrity": "sha512-GZZ9mKe8r646NUAf/zemnGbjYh4Bt8/MqASJY+pSm5ZDtc3YQox+4gsLI7yi1hba6o+eCsGxpHn5+iEVn31/FQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": ">=20.0.0",
+        "@types/whatwg-mimetype": "^3.0.2",
+        "@types/ws": "^8.18.1",
+        "entities": "^7.0.1",
+        "whatwg-mimetype": "^3.0.0",
+        "ws": "^8.18.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -5710,6 +5977,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loupe": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -6007,6 +6281,23 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -6705,6 +6996,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -6773,6 +7071,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stackblur-canvas": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
@@ -6783,6 +7088,13 @@
         "node": ">=0.1.14"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -6937,6 +7249,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -7018,6 +7350,20 @@
         "utrie": "^1.0.2"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -7035,6 +7381,36 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinypool": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
+      "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -7439,6 +7815,29 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/vite-plugin-pwa": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-1.3.0.tgz",
@@ -7470,6 +7869,79 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
+      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.4",
+        "@vitest/mocker": "3.2.4",
+        "@vitest/pretty-format": "^3.2.4",
+        "@vitest/runner": "3.2.4",
+        "@vitest/snapshot": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "debug": "^4.4.1",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.2.4",
+        "@vitest/ui": "3.2.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -7486,6 +7958,16 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -7610,6 +8092,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7855,6 +8354,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/ws": {
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",

client/package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "test": "vitest run",
     "preview": "vite preview",
     "generate:flyer": "node ../scripts/generate-beta-flyer.mjs",
     "generate:flyer:setup": "playwright install chromium"
@@ -36,12 +37,14 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "happy-dom": "^20.9.0",
     "playwright": "^1.51.0",
     "qrcode": "^1.5.4",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2",
     "vite": "^6.3.5",
-    "vite-plugin-pwa": "^1.0.1"
+    "vite-plugin-pwa": "^1.0.1",
+    "vitest": "^3.2.4"
   },
   "engines": {
     "node": ">=20.0.0"

client/public/appearance-bootstrap.js

@@ -0,0 +1,44 @@
+/**
+ * Applies saved appearance classes before CSS/JS bundle loads (prevents wrong flash on PWA).
+ * Logic mirrors client/src/services/appearance.ts + userPreferences.ts.
+ */
+(function () {
+  try {
+    var uid = localStorage.getItem('active_userid')
+    var theme = 'auto'
+    var scheme = 'auto'
+
+    if (uid) {
+      theme =
+        localStorage.getItem('user_pref_theme_' + uid) ||
+        localStorage.getItem('active_theme') ||
+        'auto'
+      scheme =
+        localStorage.getItem('user_pref_color_scheme_' + uid) ||
+        localStorage.getItem('active_color_scheme') ||
+        'auto'
+    } else {
+      theme = localStorage.getItem('active_theme') || 'auto'
+      scheme = localStorage.getItem('active_color_scheme') || 'auto'
+    }
+
+    var resolvedTheme = theme
+    if (resolvedTheme !== 'ocean' && resolvedTheme !== 'material' && resolvedTheme !== 'cupertino') {
+      var ua = navigator.userAgent || navigator.vendor || ''
+      if (/iPad|iPhone|iPod|Macintosh/.test(ua)) resolvedTheme = 'cupertino'
+      else if (/Android|Linux/.test(ua)) resolvedTheme = 'material'
+      else resolvedTheme = 'ocean'
+    }
+
+    var resolvedScheme = scheme
+    if (resolvedScheme !== 'light' && resolvedScheme !== 'dark') {
+      resolvedScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    var root = document.documentElement
+    root.classList.add('theme-' + resolvedTheme, 'scheme-' + resolvedScheme)
+    root.style.colorScheme = resolvedScheme
+  } catch (_) {
+    /* ignore storage / matchMedia errors */
+  }
+})()

client/src/App.css

@@ -8,6 +8,18 @@ body {
   color: var(--app-text);
 }
 
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  color: var(--app-input-text);
+  background: var(--app-icon-btn-bg);
+  border: 1px solid var(--app-icon-btn-border);
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-flex;
+}
+
 #root:has(.auth-screen) {
   width: 100%;
   max-width: none;
@@ -129,6 +141,209 @@ select.input-text {
   cursor: pointer;
 }
 
+.time-input-24h {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.time-input-24h__select {
+  flex: 1 1 0;
+  min-width: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.time-input-24h__sep {
+  flex-shrink: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--app-text-muted);
+  user-select: none;
+}
+
+.course-dial-section {
+  grid-column: 1 / -1;
+}
+
+.course-dial-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.course-dial-tab {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--app-border-subtle);
+  background: var(--app-btn-secondary-bg);
+  color: var(--app-text-muted);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.course-dial-tab.is-active {
+  background: var(--app-accent-bg);
+  border-color: var(--app-accent-border);
+  color: var(--app-accent-light);
+}
+
+.course-dial-tab:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.course-dial {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 260px;
+  margin: 0 auto;
+}
+
+.course-dial--sm {
+  max-width: 220px;
+}
+
+.course-dial--disabled {
+  opacity: 0.65;
+  pointer-events: none;
+}
+
+.course-dial__step-toolbar {
+  display: flex;
+  gap: 6px;
+  width: 100%;
+}
+
+.course-dial__step-btn {
+  flex: 1;
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--app-border-subtle);
+  background: var(--app-surface-alt);
+  color: var(--app-text-muted);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.course-dial__step-btn.is-active {
+  border-color: var(--app-accent-border);
+  background: var(--app-accent-bg);
+  color: var(--app-accent-light);
+}
+
+.course-dial__ring-wrap {
+  width: 100%;
+  touch-action: none;
+}
+
+.course-dial__svg {
+  width: 100%;
+  height: auto;
+  display: block;
+  cursor: pointer;
+  user-select: none;
+}
+
+.course-dial__track {
+  fill: none;
+  stroke: var(--app-border);
+  stroke-width: 2;
+}
+
+.course-dial__tick {
+  stroke: var(--app-text-subtle);
+  stroke-width: 1.5;
+}
+
+.course-dial__label {
+  fill: var(--app-text-muted);
+  font-size: 9px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.course-dial__needle line {
+  stroke: var(--app-accent-light);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.course-dial__needle circle {
+  fill: var(--app-accent-light);
+}
+
+.course-dial__center {
+  fill: var(--app-text);
+  font-size: 15px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.course-dial__hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--app-text-muted);
+  text-align: center;
+  line-height: 1.4;
+}
+
+.course-dial__error {
+  margin: 0;
+  width: 100%;
+  font-size: 12px;
+  color: #f87171;
+  text-align: center;
+}
+
+.course-dial__input {
+  width: 100%;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.course-dial__mode-toggle {
+  border: none;
+  background: none;
+  color: var(--app-accent-light);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 4px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .course-dial__needle {
+    transition: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .course-dial {
+    max-width: min(72vw, 220px);
+  }
+
+  .course-dial--sm {
+    max-width: min(68vw, 200px);
+  }
+
+  .course-dial__label {
+    font-size: 8px;
+  }
+}
+
 .themed-select {
   position: relative;
   width: 100%;
@@ -843,6 +1058,7 @@ html.scheme-dark .themed-select-option.is-selected {
 .profile-dl-row dd {
   margin: 0;
   font-size: 14px;
+  color: var(--app-text);
   word-break: break-word;
   text-align: left;
   justify-self: start;
@@ -856,8 +1072,6 @@ html.scheme-dark .themed-select-option.is-selected {
 
 .profile-user-id code {
   font-size: 12px;
-  background: rgba(148, 163, 184, 0.08);
-  padding: 4px 8px;
   border-radius: 6px;
   word-break: break-all;
 }
@@ -894,6 +1108,7 @@ html.scheme-dark .themed-select-option.is-selected {
   gap: 12px;
 }
 
+.profile-field-label,
 .profile-pin-form .input-group label {
   display: block;
   text-align: left;
@@ -923,8 +1138,8 @@ html.scheme-dark .themed-select-option.is-selected {
   gap: 12px;
   padding: 10px 12px;
   border-radius: 10px;
-  background: rgba(148, 163, 184, 0.06);
-  border: 1px solid rgba(148, 163, 184, 0.12);
+  background: var(--app-icon-btn-bg);
+  border: 1px solid var(--app-icon-btn-border);
 }
 
 .profile-passkey-main {
@@ -1037,6 +1252,7 @@ html.scheme-dark .themed-select-option.is-selected {
   display: block;
   font-family: ui-monospace, monospace;
   font-size: 13px;
+  color: var(--app-input-text);
 }
 
 .profile-passkey-transports {
@@ -1968,6 +2184,12 @@ html.scheme-dark .themed-select-option.is-selected {
   100% { background-position: 0 0; }
 }
 
+.conn-status.syncing {
+  background: rgba(59, 130, 246, 0.1);
+  color: #60a5fa;
+  border: 1px solid rgba(59, 130, 246, 0.25);
+}
+
 .conn-status.warning {
   background: rgba(251, 191, 36, 0.1);
   color: #fbbf24;
@@ -2230,6 +2452,32 @@ html.scheme-dark .themed-select-option.is-selected {
   .track-map-container {
     height: min(360px, 45svh);
   }
+
+  .sails-picker-pills {
+    gap: 4px;
+  }
+
+  .sails-picker-container.is-collapsible .sails-picker-toggle {
+    display: inline-flex;
+  }
+
+  .sail-pill {
+    padding: 3px 8px;
+    font-size: 11px;
+    border-radius: 12px;
+    line-height: 1.2;
+  }
+}
+
+@media (max-width: 480px) {
+  .sails-picker-container.is-collapsible.is-collapsed .sails-picker-pills {
+    max-height: 3.25rem;
+  }
+
+  .sail-pill {
+    padding: 2px 7px;
+    font-size: 10px;
+  }
 }
 
 /* ========================================== */
@@ -2493,13 +2741,48 @@ html.theme-cupertino .events-scroll-container {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin-top: 8px;
+  grid-column: 1 / -1;
+  margin-top: -4px;
 }
 
 .sails-picker-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
+  position: relative;
+}
+
+.sails-picker-container.is-collapsible.is-collapsed .sails-picker-pills {
+  max-height: 3.75rem;
+  overflow: hidden;
+}
+
+.sails-picker-container.is-collapsible.is-collapsed .sails-picker-pills::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1.25rem;
+  background: linear-gradient(to bottom, transparent, var(--app-surface, #0f172a));
+  pointer-events: none;
+}
+
+.sails-picker-toggle {
+  display: none;
+  align-items: center;
+  gap: 4px;
+  margin: 4px auto 0;
+  padding: 2px 8px;
+  background: none;
+  border: none;
+  color: var(--app-text-muted, #94a3b8);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.sails-picker-toggle:hover {
+  color: var(--app-accent, #fbbf24);
 }
 
 .sail-pill {
@@ -2512,6 +2795,7 @@ html.theme-cupertino .events-scroll-container {
   cursor: pointer;
   user-select: none;
   transition: all 0.2s ease;
+  white-space: nowrap;
 }
 
 .sail-pill:hover {
@@ -2539,7 +2823,9 @@ html.theme-cupertino .events-scroll-container {
   background: rgba(56, 189, 248, 0.15);
   border-color: #38bdf8;
   color: #38bdf8;
-}.grid-span-2 {
+}
+
+.grid-span-2 {
   grid-column: span 2;
 }
 
@@ -2782,6 +3068,98 @@ html.theme-cupertino .events-scroll-container {
   }
 }
 
+.tank-liter-input .tank-liter-slider {
+  --tank-slider-track-h: 10px;
+  --tank-slider-thumb: 26px;
+  width: 100%;
+  height: var(--tank-slider-thumb);
+  margin: 10px 0 6px;
+  padding: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  accent-color: #4ade80;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.tank-liter-input .tank-liter-slider::-webkit-slider-runnable-track {
+  height: var(--tank-slider-track-h);
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.35);
+}
+
+.tank-liter-input .tank-liter-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: var(--tank-slider-thumb);
+  height: var(--tank-slider-thumb);
+  margin-top: calc((var(--tank-slider-track-h) - var(--tank-slider-thumb)) / 2);
+  border-radius: 50%;
+  background: #4ade80;
+  border: 2px solid rgba(15, 23, 42, 0.85);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+
+.tank-liter-input .tank-liter-slider::-moz-range-track {
+  height: var(--tank-slider-track-h);
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.35);
+}
+
+.tank-liter-input .tank-liter-slider::-moz-range-thumb {
+  width: var(--tank-slider-thumb);
+  height: var(--tank-slider-thumb);
+  border-radius: 50%;
+  background: #4ade80;
+  border: 2px solid rgba(15, 23, 42, 0.85);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+
+.tank-liter-input .tank-liter-slider:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tank-liter-input .tank-liter-slider-hint {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin-bottom: 6px;
+  text-align: center;
+}
+
+@media (max-width: 480px) {
+  .tank-liter-input .tank-liter-slider {
+    --tank-slider-track-h: 12px;
+    --tank-slider-thumb: 32px;
+    margin: 12px 0 8px;
+  }
+}
+
+.vessel-tanks-section {
+  grid-column: 1 / -1;
+  margin-top: 8px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.vessel-tanks-section h3 {
+  font-size: 1rem;
+  margin: 0 0 4px;
+  color: #e2e8f0;
+}
+
+.vessel-tanks-help {
+  font-size: 0.85rem;
+  color: #94a3b8;
+  margin: 0 0 12px;
+}
+
+.vessel-tanks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
 /* GPS Track Upload & Map Styling */
 .track-upload-zone {
   display: flex;
@@ -3859,6 +4237,26 @@ html.theme-cupertino .events-scroll-container {
   border: 1px solid rgba(148, 163, 184, 0.25);
 }
 
+.backup-panel {
+  text-align: left;
+}
+
+.backup-export-form,
+.backup-import-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.backup-panel .input-group label {
+  display: block;
+  font-size: 13.5px;
+  color: var(--app-text-muted);
+  margin-bottom: 6px;
+  font-weight: 500;
+  text-align: left;
+}
+
 .backup-panel .backup-section {
   margin-bottom: 28px;
   padding-bottom: 24px;
@@ -3970,10 +4368,12 @@ body.app-tour-active .app-tour-target-active {
 }
 
 .app-tour-tooltip:not(.centered) {
-  left: max(16px, env(safe-area-inset-left, 0px));
-  right: max(16px, env(safe-area-inset-right, 0px));
-  width: auto;
-  max-width: none;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.app-tour-tooltip:not(.centered).app-tour-tooltip--anchored {
+  transform: none;
 }
 
 .app-tour-tooltip.centered {

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import './App.css'
 import { DialogProvider } from './components/ModalDialog.tsx'
 import AuthOnboarding from './components/AuthOnboarding.tsx'
@@ -15,7 +15,13 @@ import InvitationAcceptance from './components/InvitationAcceptance.tsx'
 import AppTourOverlay from './components/AppTourOverlay.tsx'
 import { AppTourProvider, useAppTour, type AppTab } from './context/AppTourContext.tsx'
 import { UnsavedChangesProvider, useUnsavedChangesContext } from './context/UnsavedChangesContext.tsx'
-import { getActiveMasterKey, logoutUser, checkServerSession } from './services/auth.js'
+import {
+  logoutUser,
+  checkServerSession,
+  hasUnlockedLocalSession,
+  persistSessionUserId
+} from './services/auth.js'
+import AppErrorBoundary from './components/AppErrorBoundary.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from './services/analytics.js'
 import {
   applyAppearanceToDocument,
@@ -40,7 +46,7 @@ import DisclaimerHeaderButton from './components/DisclaimerHeaderButton.tsx'
 import FeedbackHeaderButton from './components/FeedbackHeaderButton.tsx'
 import { useTranslation } from 'react-i18next'
 import {
-  getStoredDemoFirstEntryId,
+  resolveTourLogbookContext,
   seedDemoLogbookIfNeeded
 } from './services/demoLogbook.js'
 import { fetchLogbooks, parseCollaborationRole } from './services/logbook.js'
@@ -51,7 +57,7 @@ const PENDING_PUSH_LOGBOOK_KEY = 'pending_push_logbook_id'
 function App() {
   const { t, i18n } = useTranslation()
   const { confirmLeave } = useUnsavedChangesContext()
-  const { registerNavigation, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
+  const { registerNavigation, registerDemoTourContext, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [activeLogbookId, setActiveLogbookId] = useState<string | null>(null)
   const [activeLogbookTitle, setActiveLogbookTitle] = useState<string | null>(null)
@@ -63,6 +69,12 @@ function App() {
   const [isSyncing, setIsSyncing] = useState(false)
   const [isAcceptingInvite, setIsAcceptingInvite] = useState(false)
   const [showUserProfile, setShowUserProfile] = useState(false)
+  const tourLogbookRef = useRef<{ id: string; title: string } | null>(null)
+  const activeLogbookRef = useRef<{ id: string | null; title: string | null }>({
+    id: activeLogbookId,
+    title: activeLogbookTitle
+  })
+  activeLogbookRef.current = { id: activeLogbookId, title: activeLogbookTitle }
 
   // Viewer mode for read-only shared links
   const [isViewerMode, setIsViewerMode] = useState(false)
@@ -208,6 +220,53 @@ function App() {
     }
   }, [])
 
+  const clearAuthenticatedAppState = useCallback(() => {
+    setIsAuthenticated(false)
+    setActiveLogbookId(null)
+    setActiveLogbookTitle(null)
+    setShowUserProfile(false)
+    setTourSelectedEntryId(null)
+    setDemoHighlightEntryId(null)
+  }, [])
+
+  /** After PWA/bfcache resume, React state may still say "logged in" while the master key is gone. */
+  const enforceUnlockedSession = useCallback(() => {
+    if (isViewerMode || isDemoMode || isAcceptingInvite) return
+    // Require full local session (incl. userId) so API calls are not left headless.
+    if (isAuthenticated && !hasUnlockedLocalSession()) {
+      clearAuthenticatedAppState()
+    }
+  }, [
+    isAuthenticated,
+    isViewerMode,
+    isDemoMode,
+    isAcceptingInvite,
+    clearAuthenticatedAppState
+  ])
+
+  useEffect(() => {
+    enforceUnlockedSession()
+  }, [enforceUnlockedSession])
+
+  useEffect(() => {
+    const onPageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) {
+        enforceUnlockedSession()
+      }
+    }
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        enforceUnlockedSession()
+      }
+    }
+    window.addEventListener('pageshow', onPageShow)
+    document.addEventListener('visibilitychange', onVisibility)
+    return () => {
+      window.removeEventListener('pageshow', onPageShow)
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
+  }, [enforceUnlockedSession])
+
   useEffect(() => {
     let cancelled = false
 
@@ -216,13 +275,12 @@ function App() {
         const session = await checkServerSession()
         if (cancelled) return
 
-        if (session.authenticated && session.userId) {
-          localStorage.setItem('active_userid', session.userId)
+        if (session.authenticated) {
+          persistSessionUserId(session.userId)
         }
 
-        const savedUser = localStorage.getItem('active_username')
-        const key = getActiveMasterKey()
-        if (session.authenticated && savedUser && key) {
+        // Cookie alone is insufficient — need in-memory master key, username, and userId for API.
+        if (session.authenticated && hasUnlockedLocalSession()) {
           setIsAuthenticated(true)
           const savedLogbookId = localStorage.getItem('active_logbook_id')
           const savedLogbookTitle = localStorage.getItem('active_logbook_title')
@@ -231,6 +289,7 @@ function App() {
             setActiveLogbookTitle(savedLogbookTitle)
           }
         }
+        // authenticated + crypto but no userId: stay on login (enforceUnlockedSession guards active UI)
       } catch (err) {
         if (!cancelled) {
           console.warn('Session restore failed:', err)
@@ -241,7 +300,7 @@ function App() {
     return () => {
       cancelled = true
     }
-  }, [])
+  }, [clearAuthenticatedAppState])
 
   useEffect(() => {
     syncRouteFromLocation()
@@ -256,28 +315,66 @@ function App() {
     setIsAcceptingInvite(false)
   }, [])
 
-  useEffect(() => {
-    registerNavigation({
-      setActiveTab,
-      setSelectedEntryId: setTourSelectedEntryId,
-      setFeedbackOpen: setTourFeedbackOpen
-    })
-  }, [registerNavigation])
-
-  useEffect(() => {
-    if (isAuthenticated && activeLogbookId) {
-      setDemoHighlightEntryId(getStoredDemoFirstEntryId())
-    }
-  }, [isAuthenticated, activeLogbookId])
-
-  const selectLogbook = (id: string, title: string) => {
+  const selectLogbook = useCallback((id: string, title: string) => {
     setActiveLogbookId(id)
     setActiveLogbookTitle(title)
     setActiveTab('logs')
     setTourSelectedEntryId(null)
     localStorage.setItem('active_logbook_id', id)
     localStorage.setItem('active_logbook_title', title)
-  }
+  }, [])
+
+  const ensureTourLogbookOpen = useCallback(async () => {
+    const ctx = await resolveTourLogbookContext(tourLogbookRef.current?.id)
+    if (!ctx) return
+
+    if (activeLogbookRef.current.id !== ctx.logbookId) {
+      selectLogbook(ctx.logbookId, ctx.title)
+    }
+
+    if (ctx.firstEntryId) {
+      setDemoHighlightEntryId(ctx.firstEntryId)
+      registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
+    }
+  }, [registerDemoTourContext, selectLogbook])
+
+  useEffect(() => {
+    registerNavigation({
+      setActiveTab,
+      setSelectedEntryId: setTourSelectedEntryId,
+      setFeedbackOpen: setTourFeedbackOpen,
+      setProfileOpen: setShowUserProfile,
+      ensureLogbookForTour: ensureTourLogbookOpen,
+      setLogbookActive: (active) => {
+        if (active) {
+          void ensureTourLogbookOpen()
+          return
+        }
+
+        const { id, title } = activeLogbookRef.current
+        if (id && title) {
+          tourLogbookRef.current = { id, title }
+        }
+        setActiveLogbookId(null)
+        setActiveLogbookTitle(null)
+        setTourSelectedEntryId(null)
+        localStorage.removeItem('active_logbook_id')
+        localStorage.removeItem('active_logbook_title')
+      }
+    })
+  }, [ensureTourLogbookOpen, registerNavigation])
+
+  useEffect(() => {
+    if (!isAuthenticated || !activeLogbookId) return
+    void (async () => {
+      const ctx = await resolveTourLogbookContext()
+      if (!ctx || ctx.logbookId !== activeLogbookId) return
+      if (ctx.firstEntryId) {
+        setDemoHighlightEntryId(ctx.firstEntryId)
+        registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
+      }
+    })()
+  }, [isAuthenticated, activeLogbookId, registerDemoTourContext])
 
   const openLogbookById = useCallback(
     async (logbookId: string) => {
@@ -293,7 +390,7 @@ function App() {
       }
       selectLogbook(logbookId, `${logbookId.slice(0, 8)}…`)
     },
-    []
+    [selectLogbook]
   )
 
   const consumePendingPushLogbook = useCallback(() => {
@@ -345,8 +442,20 @@ function App() {
     const savedLogbookId = localStorage.getItem('active_logbook_id')
     const savedLogbookTitle = localStorage.getItem('active_logbook_title')
     if (savedLogbookId && savedLogbookTitle) {
-      setActiveLogbookId(savedLogbookId)
-      setActiveLogbookTitle(savedLogbookTitle)
+      try {
+        const books = await fetchLogbooks()
+        const match = books.find((b) => b.id === savedLogbookId)
+        if (match) {
+          setActiveLogbookId(match.id)
+          setActiveLogbookTitle(match.title)
+        } else {
+          localStorage.removeItem('active_logbook_id')
+          localStorage.removeItem('active_logbook_title')
+        }
+      } catch {
+        setActiveLogbookId(savedLogbookId)
+        setActiveLogbookTitle(savedLogbookTitle)
+      }
     }
     consumePendingPushLogbook()
   }
@@ -630,15 +739,17 @@ function App() {
 
 export default function AppWrapper() {
   return (
-    <DialogProvider>
-      <UnsavedChangesProvider>
-        <AppTourProvider>
-          <PwaUpdatePrompt />
-          <App />
-          <AppTourOverlay />
-        </AppTourProvider>
-        <AppFooter />
-      </UnsavedChangesProvider>
-    </DialogProvider>
+    <AppErrorBoundary>
+      <DialogProvider>
+        <UnsavedChangesProvider>
+          <AppTourProvider>
+            <PwaUpdatePrompt />
+            <App />
+            <AppTourOverlay />
+          </AppTourProvider>
+          <AppFooter />
+        </UnsavedChangesProvider>
+      </DialogProvider>
+    </AppErrorBoundary>
   )
 }

client/src/components/AppErrorBoundary.tsx

@@ -0,0 +1,42 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  error: Error | null
+}
+
+export default class AppErrorBoundary extends Component<Props, State> {
+  state: State = { error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('Unhandled app error:', error, info.componentStack)
+  }
+
+  render() {
+    if (!this.state.error) {
+      return this.props.children
+    }
+
+    return (
+      <div className="auth-screen">
+        <div className="auth-card glass" role="alert">
+          <h2 style={{ marginTop: 0 }}>Kapteins Daagbok</h2>
+          <p style={{ color: 'var(--app-text-muted)', lineHeight: 1.5 }}>
+            Die App ist nach dem Neustart in einen fehlerhaften Zustand geraten. Bitte neu laden
+            oder die App vollständig beenden und erneut öffnen.
+          </p>
+          <button type="button" className="btn primary" style={{ width: '100%', marginTop: 16 }} onClick={() => window.location.reload()}>
+            Neu laden
+          </button>
+        </div>
+      </div>
+    )
+  }
+}

client/src/components/AppTourOverlay.tsx

@@ -4,6 +4,7 @@ import { X, ChevronLeft, ChevronRight } from 'lucide-react'
 import {
   getTourStepCopy,
   getTourTargetSelector,
+  getTourTargetRetryDelay,
   isCenteredTourStep,
   useAppTour
 } from '../context/AppTourContext.tsx'
@@ -17,6 +18,20 @@ interface SpotlightRect {
 
 const TOOLTIP_EDGE_MARGIN = 16
 const TOOLTIP_ESTIMATED_HEIGHT = 240
+const TOOLTIP_WIDTH = 420
+const TARGET_VIEWPORT_MARGIN = 24
+
+function clampTooltipTop(preferred: number): number {
+  const maxTop = window.innerHeight - TOOLTIP_EDGE_MARGIN - TOOLTIP_ESTIMATED_HEIGHT
+  return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(preferred, maxTop))
+}
+
+function computeTooltipLeft(spotlight: SpotlightRect): number {
+  const tooltipWidth = Math.min(TOOLTIP_WIDTH, window.innerWidth - TOOLTIP_EDGE_MARGIN * 2)
+  const ideal = spotlight.left + spotlight.width / 2 - tooltipWidth / 2
+  const maxLeft = window.innerWidth - TOOLTIP_EDGE_MARGIN - tooltipWidth
+  return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(ideal, maxLeft))
+}
 
 function buildCutoutClipPath(rect: SpotlightRect): string {
   const right = rect.left + rect.width
@@ -28,20 +43,36 @@ function computeTooltipTop(spotlight: SpotlightRect): number {
   const viewportBottom = window.innerHeight - TOOLTIP_EDGE_MARGIN
   const below = spotlight.top + spotlight.height + 12
   if (below + TOOLTIP_ESTIMATED_HEIGHT <= viewportBottom) {
-    return below
+    return clampTooltipTop(below)
   }
 
   const above = spotlight.top - 12 - TOOLTIP_ESTIMATED_HEIGHT
   if (above >= TOOLTIP_EDGE_MARGIN) {
-    return above
+    return clampTooltipTop(above)
   }
 
-  return Math.max(
-    TOOLTIP_EDGE_MARGIN,
-    Math.min(below, viewportBottom - TOOLTIP_ESTIMATED_HEIGHT)
+  return clampTooltipTop(below)
+}
+
+function isTargetVisibleInViewport(rect: DOMRect): boolean {
+  return (
+    rect.top >= TARGET_VIEWPORT_MARGIN &&
+    rect.bottom <= window.innerHeight - TARGET_VIEWPORT_MARGIN
   )
 }
 
+function measureSpotlight(el: Element): SpotlightRect | null {
+  const rect = el.getBoundingClientRect()
+  if (rect.width <= 0 || rect.height <= 0) return null
+  const padding = 8
+  return {
+    top: Math.max(8, rect.top - padding),
+    left: Math.max(8, rect.left - padding),
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2
+  }
+}
+
 export default function AppTourOverlay() {
   const { t } = useTranslation()
   const {
@@ -50,6 +81,7 @@ export default function AppTourOverlay() {
     currentStepId,
     currentStepIndex,
     totalSteps,
+    layoutTick,
     nextStep,
     prevStep,
     skipTour
@@ -65,7 +97,10 @@ export default function AppTourOverlay() {
       return
     }
 
+    let cancelled = false
+
     const updateSpotlight = () => {
+      if (cancelled) return
       const selector = getTourTargetSelector(currentStepId)
       if (!selector) {
         setSpotlight(null)
@@ -76,27 +111,38 @@ export default function AppTourOverlay() {
         setSpotlight(null)
         return
       }
+
       const rect = el.getBoundingClientRect()
-      const padding = 8
-      setSpotlight({
-        top: Math.max(8, rect.top - padding),
-        left: Math.max(8, rect.left - padding),
-        width: rect.width + padding * 2,
-        height: rect.height + padding * 2
-      })
+      if (!isTargetVisibleInViewport(rect)) {
+        el.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
+        window.requestAnimationFrame(() => {
+          if (cancelled) return
+          const next = measureSpotlight(el)
+          setSpotlight(next)
+        })
+        return
+      }
+
+      setSpotlight(measureSpotlight(el))
     }
 
     updateSpotlight()
     window.addEventListener('resize', updateSpotlight)
     window.addEventListener('scroll', updateSpotlight, true)
-    const timer = window.setTimeout(updateSpotlight, 120)
+
+    const retryDelays =
+      currentStepId === 'entry_track'
+        ? [400, 700, 1100, 1600]
+        : [getTourTargetRetryDelay(currentStepId), 120, 280, 480]
+    const timers = retryDelays.map((delay) => window.setTimeout(updateSpotlight, delay))
 
     return () => {
-      window.clearTimeout(timer)
+      cancelled = true
+      for (const timer of timers) window.clearTimeout(timer)
       window.removeEventListener('resize', updateSpotlight)
       window.removeEventListener('scroll', updateSpotlight, true)
     }
-  }, [currentStepId, isActive])
+  }, [currentStepId, isActive, layoutTick])
 
   useEffect(() => {
     if (!isActive) return
@@ -132,9 +178,17 @@ export default function AppTourOverlay() {
   const tooltipStyle = centered
     ? undefined
     : spotlight
-      ? { top: computeTooltipTop(spotlight) }
+      ? { top: computeTooltipTop(spotlight), left: computeTooltipLeft(spotlight) }
       : { top: '20%' }
 
+  const tooltipClassName = [
+    'app-tour-tooltip',
+    centered ? 'centered' : '',
+    !centered && spotlight ? 'app-tour-tooltip--anchored' : ''
+  ]
+    .filter(Boolean)
+    .join(' ')
+
   const backdropStyle = spotlight && !centered
     ? { clipPath: buildCutoutClipPath(spotlight) }
     : undefined
@@ -159,7 +213,7 @@ export default function AppTourOverlay() {
         />
       )}
 
-      <div className={`app-tour-tooltip${centered ? ' centered' : ''}`} style={tooltipStyle}>
+      <div className={tooltipClassName} style={tooltipStyle}>
         <button type="button" className="app-tour-close" onClick={skipTour} aria-label={t('tour.skip')}>
           <X size={18} />
         </button>

client/src/components/AuthOnboarding.tsx

@@ -13,6 +13,7 @@ import {
 } from '../services/auth.js'
 import { KeyRound, ShieldAlert, Languages, HelpCircle, UserRound, X } from 'lucide-react'
 import RegistrationDisclaimer from './RegistrationDisclaimer.tsx'
+import DisclaimerModal from './DisclaimerModal.tsx'
 import BetaBadge from './BetaBadge.tsx'
 
 interface AuthOnboardingProps {
@@ -50,6 +51,7 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
 
   const [isNewRegistration, setIsNewRegistration] = useState(false)
   const [showDisclaimer, setShowDisclaimer] = useState(false)
+  const [showHelp, setShowHelp] = useState(false)
 
   const finishAuth = () => {
     if (isNewRegistration) {
@@ -377,16 +379,37 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
           {t('auth.recovery_fallback_warning')}
         </p>
 
-        <form onSubmit={handleRecoverySubmit} className="auth-form">
-          <textarea
-            className="input-textarea"
-            placeholder={t('auth.recovery_placeholder')}
-            value={recoveryInput}
-            onChange={(e) => setRecoveryInput(e.target.value)}
-            disabled={loading}
-            rows={3}
-            required
-          />
+        <form onSubmit={handleRecoverySubmit} className="auth-form" autoComplete="on">
+          {(username.trim() || encryptedPayloads?.username) && (
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username.trim() || encryptedPayloads?.username || ''}
+              readOnly
+              tabIndex={-1}
+              aria-hidden="true"
+              style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div className="input-group">
+            <label htmlFor="recovery-key" className="input-label" style={{ display: 'block', marginBottom: '8px', color: '#94a3b8' }}>
+              {t('auth.enter_recovery')}
+            </label>
+            <input
+              id="recovery-key"
+              name="recovery-key"
+              type="password"
+              className="input-text"
+              placeholder={t('auth.recovery_placeholder')}
+              value={recoveryInput}
+              onChange={(e) => setRecoveryInput(e.target.value)}
+              disabled={loading}
+              required
+              autoComplete="current-password"
+              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
+            />
+          </div>
 
           {error && <div className="auth-error">{error}</div>}
 
@@ -410,6 +433,7 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
 
   // Render 3: Standard Login / Registration options form
   return (
+    <>
     <div className="auth-card glass">
       <div className="auth-brand">
         <img src="/logo.png" alt="Kapteins Daagbok" className="auth-logo-img" />
@@ -570,15 +594,23 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
       </div>
 
       <div className="auth-footer">
-        <button className="btn-icon-text" onClick={toggleLanguage}>
+        <button type="button" className="btn-icon-text" onClick={toggleLanguage}>
           <Languages size={18} />
           {i18n.language.startsWith('de') ? 'English' : 'Deutsch'}
         </button>
-        <a href="#help" className="btn-icon-text link-sec">
+        <button
+          type="button"
+          className="btn-icon-text link-sec"
+          onClick={() => setShowHelp(true)}
+          title={t('disclaimer.button_title')}
+          aria-label={t('disclaimer.button_title')}
+        >
           <HelpCircle size={18} />
           {t('auth.help')}
-        </a>
+        </button>
       </div>
     </div>
+    <DisclaimerModal open={showHelp} onClose={() => setShowHelp(false)} />
+    </>
   )
 }

client/src/components/CourseDialInput.tsx

@@ -0,0 +1,285 @@
+import { useCallback, useId, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  type CourseOutputMode,
+  type CourseStep,
+  dialDegreesToStorageValue,
+  formatCourseAngle,
+  formatCourseDisplay,
+  isCardinalDirection,
+  loadCourseDialStep,
+  parseCourseAngle,
+  pointerAngleToDegrees,
+  resolveCourseOutputMode,
+  saveCourseDialStep,
+  snapDegrees,
+  valueToDialDegrees
+} from '../utils/courseAngle.js'
+
+interface CourseDialInputProps {
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  step?: CourseStep
+  allowCardinal?: boolean
+  displayMode?: 'degrees' | 'cardinal' | 'auto'
+  size?: 'md' | 'sm'
+  'aria-label': string
+  id?: string
+}
+
+const TICK_DEGREES = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
+
+function polarPoint(degrees: number, radius: number): { x: number; y: number } {
+  const rad = (degrees * Math.PI) / 180
+  return {
+    x: 100 + Math.sin(rad) * radius,
+    y: 100 - Math.cos(rad) * radius
+  }
+}
+
+export default function CourseDialInput({
+  value,
+  onChange,
+  disabled = false,
+  step: stepProp,
+  allowCardinal = false,
+  displayMode = 'degrees',
+  size = 'md',
+  'aria-label': ariaLabel,
+  id: idProp
+}: CourseDialInputProps) {
+  const { t } = useTranslation()
+  const generatedId = useId()
+  const inputId = idProp ?? `${generatedId}-input`
+  const svgRef = useRef<SVGSVGElement>(null)
+  const [step, setStep] = useState<CourseStep>(() => stepProp ?? loadCourseDialStep())
+  const [inputDraft, setInputDraft] = useState<string | null>(null)
+  const [inputError, setInputError] = useState<string | null>(null)
+  const [outputModeOverride, setOutputModeOverride] = useState<CourseOutputMode | null>(null)
+
+  const effectiveStep = stepProp ?? step
+  const outputMode =
+    outputModeOverride ??
+    resolveCourseOutputMode(value, displayMode, allowCardinal)
+
+  const dialDegrees = useMemo(
+    () => snapDegrees(valueToDialDegrees(value, allowCardinal), effectiveStep),
+    [value, allowCardinal, effectiveStep]
+  )
+
+  const centerLabel = useMemo(
+    () => formatCourseDisplay(value, allowCardinal),
+    [value, allowCardinal]
+  )
+
+  const tickLabel = useCallback(
+    (degrees: number) => {
+      if (degrees === 0) return t('logs.compass_n')
+      if (degrees === 90) return t('logs.compass_e')
+      if (degrees === 180) return t('logs.compass_s')
+      if (degrees === 270) return t('logs.compass_w')
+      return String(degrees).padStart(3, '0')
+    },
+    [t]
+  )
+
+  const applyDegrees = useCallback(
+    (degrees: number) => {
+      onChange(dialDegreesToStorageValue(degrees, outputMode, effectiveStep))
+      setInputDraft(null)
+      setInputError(null)
+    },
+    [onChange, outputMode, effectiveStep]
+  )
+
+  const updateFromPointer = useCallback(
+    (clientX: number, clientY: number) => {
+      const svg = svgRef.current
+      if (!svg || disabled) return
+      const rect = svg.getBoundingClientRect()
+      const cx = rect.left + rect.width / 2
+      const cy = rect.top + rect.height / 2
+      const raw = pointerAngleToDegrees(clientX, clientY, cx, cy)
+      applyDegrees(raw)
+    },
+    [applyDegrees, disabled]
+  )
+
+  const handlePointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (disabled) return
+    e.preventDefault()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    updateFromPointer(e.clientX, e.clientY)
+  }
+
+  const handlePointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (disabled || !e.currentTarget.hasPointerCapture(e.pointerId)) return
+    updateFromPointer(e.clientX, e.clientY)
+  }
+
+  const handlePointerUp = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId)
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputDraft(e.target.value)
+  }
+
+  const commitInput = () => {
+    const draft = (inputDraft ?? value).trim()
+    setInputDraft(null)
+    if (!draft) {
+      onChange('')
+      setInputError(null)
+      return
+    }
+    if (allowCardinal && outputMode === 'cardinal' && isCardinalDirection(draft)) {
+      onChange(draft.toUpperCase())
+      setInputError(null)
+      return
+    }
+    const parsed = parseCourseAngle(draft)
+    if (parsed === null) {
+      setInputError(t('logs.course_invalid'))
+      return
+    }
+    onChange(formatCourseAngle(snapDegrees(parsed, effectiveStep)))
+    setInputError(null)
+  }
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      commitInput()
+      return
+    }
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const base = parseCourseAngle(value) ?? dialDegrees
+      const delta = e.key === 'ArrowUp' ? effectiveStep : -effectiveStep
+      applyDegrees(base + delta)
+    }
+  }
+
+  const handleStepChange = (next: CourseStep) => {
+    if (stepProp !== undefined) return
+    setStep(next)
+    saveCourseDialStep(next)
+    const parsed = parseCourseAngle(value)
+    if (parsed !== null) {
+      onChange(formatCourseAngle(snapDegrees(parsed, next)))
+    }
+  }
+
+  const toggleOutputMode = () => {
+    const next: CourseOutputMode = outputMode === 'cardinal' ? 'degrees' : 'cardinal'
+    setOutputModeOverride(next)
+    const deg = valueToDialDegrees(value, allowCardinal)
+    onChange(dialDegreesToStorageValue(deg, next, effectiveStep))
+  }
+
+  const inputValue = inputDraft ?? value
+  const sliderNow = dialDegrees
+
+  return (
+    <div
+      className={`course-dial course-dial--${size}${disabled ? ' course-dial--disabled' : ''}`}
+    >
+      {!stepProp && (
+        <div className="course-dial__step-toolbar" role="group" aria-label={t('logs.course_dial_step_label')}>
+          {([1, 5, 10] as const).map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={`course-dial__step-btn${effectiveStep === s ? ' is-active' : ''}`}
+              onClick={() => handleStepChange(s)}
+              disabled={disabled}
+              aria-pressed={effectiveStep === s}
+            >
+              {s === 1 ? t('logs.course_step_fine') : s === 5 ? t('logs.course_step_medium') : t('logs.course_step_coarse')}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div
+        className="course-dial__ring-wrap"
+        role="slider"
+        aria-label={ariaLabel}
+        aria-valuemin={0}
+        aria-valuemax={360}
+        aria-valuenow={sliderNow}
+        aria-disabled={disabled}
+      >
+        <svg
+          ref={svgRef}
+          className="course-dial__svg"
+          viewBox="0 0 200 200"
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        >
+          <circle className="course-dial__track" cx="100" cy="100" r="88" />
+          {TICK_DEGREES.map((deg) => {
+            const inner = polarPoint(deg, 76)
+            const outer = polarPoint(deg, 88)
+            const label = polarPoint(deg, 64)
+            return (
+              <g key={deg}>
+                <line className="course-dial__tick" x1={inner.x} y1={inner.y} x2={outer.x} y2={outer.y} />
+                <text className="course-dial__label" x={label.x} y={label.y} textAnchor="middle" dominantBaseline="middle">
+                  {tickLabel(deg)}
+                </text>
+              </g>
+            )
+          })}
+          <g className="course-dial__needle" transform={`rotate(${dialDegrees} 100 100)`}>
+            <line x1="100" y1="100" x2="100" y2="28" />
+            <circle cx="100" cy="100" r="6" />
+          </g>
+          <text className="course-dial__center" x="100" y="100" textAnchor="middle" dominantBaseline="middle">
+            {centerLabel}
+          </text>
+        </svg>
+      </div>
+
+      <p className="course-dial__hint">{t('logs.course_dial_hint')}</p>
+
+      <input
+        id={inputId}
+        type="text"
+        inputMode="numeric"
+        className="input-text course-dial__input"
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={commitInput}
+        onKeyDown={handleInputKeyDown}
+        disabled={disabled}
+        placeholder={
+          outputMode === 'cardinal'
+            ? t('logs.course_placeholder_cardinal')
+            : t('logs.course_placeholder_degrees')
+        }
+        aria-label={ariaLabel}
+        aria-invalid={inputError ? true : undefined}
+      />
+
+      {inputError && <p className="course-dial__error">{inputError}</p>}
+
+      {allowCardinal && displayMode === 'auto' && (
+        <button
+          type="button"
+          className="course-dial__mode-toggle"
+          onClick={toggleOutputMode}
+          disabled={disabled}
+        >
+          {outputMode === 'cardinal' ? t('logs.wind_mode_degrees') : t('logs.wind_mode_cardinal')}
+        </button>
+      )}
+    </div>
+  )
+}

client/src/components/DemoViewer.tsx

@@ -31,7 +31,9 @@ export default function DemoViewer({ onExit }: DemoViewerProps) {
     registerNavigation({
       setActiveTab,
       setSelectedEntryId: setTourSelectedEntryId,
-      setFeedbackOpen: () => {}
+      setFeedbackOpen: () => {},
+      setLogbookActive: () => {},
+      setProfileOpen: () => {}
     })
     registerDemoTourContext({ firstEntryId: fixture.firstEntryId })
 

client/src/components/EventTimeInput24h.tsx

@@ -0,0 +1,58 @@
+import { useId, useMemo } from 'react'
+import { joinTimeHHMM, splitTimeHHMM } from '../utils/logEntryPayload.js'
+
+const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'))
+const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'))
+
+interface EventTimeInput24hProps {
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  'aria-label'?: string
+}
+
+export default function EventTimeInput24h({
+  value,
+  onChange,
+  disabled = false,
+  'aria-label': ariaLabel
+}: EventTimeInput24hProps) {
+  const baseId = useId()
+  const { hours, minutes } = useMemo(() => splitTimeHHMM(value), [value])
+
+  return (
+    <div className="time-input-24h">
+      <select
+        id={`${baseId}-hours`}
+        className="input-text time-input-24h__select"
+        value={hours}
+        onChange={(e) => onChange(joinTimeHHMM(e.target.value, minutes))}
+        disabled={disabled}
+        aria-label={ariaLabel ? `${ariaLabel} (h)` : undefined}
+      >
+        {HOURS.map((hour) => (
+          <option key={hour} value={hour}>
+            {hour}
+          </option>
+        ))}
+      </select>
+      <span className="time-input-24h__sep" aria-hidden="true">
+        :
+      </span>
+      <select
+        id={`${baseId}-minutes`}
+        className="input-text time-input-24h__select"
+        value={minutes}
+        onChange={(e) => onChange(joinTimeHHMM(hours, e.target.value))}
+        disabled={disabled}
+        aria-label={ariaLabel ? `${ariaLabel} (min)` : undefined}
+      >
+        {MINUTES.map((minute) => (
+          <option key={minute} value={minute}>
+            {minute}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

client/src/components/InvitationAcceptance.tsx

@@ -344,15 +344,36 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
           <h2>{t('auth.enter_recovery')}</h2>
         </div>
         <p className="recovery-warning">{t('auth.recovery_fallback_warning')}</p>
-        <form onSubmit={handleRecoverySubmit}>
-          <textarea
-            className="input-text"
-            placeholder={t('auth.recovery_placeholder')}
-            value={recoveryInput}
-            onChange={(e) => setRecoveryInput(e.target.value)}
-            rows={3}
-            required
-          />
+        <form onSubmit={handleRecoverySubmit} autoComplete="on">
+          {(username.trim() || encryptedPayloads?.username) && (
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username.trim() || encryptedPayloads?.username || ''}
+              readOnly
+              tabIndex={-1}
+              aria-hidden="true"
+              style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div className="input-group">
+            <label htmlFor="invitation-recovery-key" className="input-label" style={{ display: 'block', marginBottom: '8px', color: '#94a3b8' }}>
+              {t('auth.enter_recovery')}
+            </label>
+            <input
+              id="invitation-recovery-key"
+              name="recovery-key"
+              type="password"
+              className="input-text"
+              placeholder={t('auth.recovery_placeholder')}
+              value={recoveryInput}
+              onChange={(e) => setRecoveryInput(e.target.value)}
+              required
+              autoComplete="current-password"
+              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
+            />
+          </div>
           <div className="auth-actions mt-4">
             <button type="button" className="btn secondary" onClick={() => setShowRecoveryFallback(false)}>
               {t('auth.back')}

client/src/components/LogEntriesList.tsx

@@ -241,14 +241,15 @@ export default function LogEntriesList({
 
       decryptedEntries.sort(compareTravelDaysChronological)
       const previousEntry = decryptedEntries.at(-1) ?? null
-      let { freshwater, fuel, departure } = carryOverFromPreviousDay(previousEntry)
+      let { freshwater, fuel, greywaterLevel, departure } = carryOverFromPreviousDay(previousEntry)
 
-      if (previousEntry && hasCarryOverFromPreviousDay({ freshwater, fuel, departure })) {
+      if (previousEntry && hasCarryOverFromPreviousDay({ freshwater, fuel, greywaterLevel, departure })) {
         const confirmed = await showConfirm(
           t('logs.carry_over_tanks_confirm', {
             departure: departure || '—',
             fw: formatTankLiters(freshwater.morning),
-            fuel: formatTankLiters(fuel.morning)
+            fuel: formatTankLiters(fuel.morning),
+            greywater: formatTankLiters(greywaterLevel)
           }),
           t('logs.carry_over_tanks_title'),
           t('logs.carry_over_tanks_yes'),
@@ -257,6 +258,7 @@ export default function LogEntriesList({
         if (!confirmed) {
           freshwater = emptyTankLevels()
           fuel = emptyTankLevels()
+          greywaterLevel = 0
           departure = ''
         }
       }
@@ -274,6 +276,7 @@ export default function LogEntriesList({
         destination: '',
         freshwater,
         fuel,
+        ...(greywaterLevel > 0 ? { greywater: { level: greywaterLevel } } : {}),
         signSkipper: '',
         signCrew: '',
         events: []
@@ -365,6 +368,11 @@ export default function LogEntriesList({
     )
   }
 
+  const tourFirstEntryId =
+    highlightEntryId && entries.some((e) => e.id === highlightEntryId)
+      ? highlightEntryId
+      : entries[0]?.id ?? null
+
   return (
     <div className="form-card">
       <div className="section-title-bar mb-6">
@@ -402,7 +410,7 @@ export default function LogEntriesList({
             <div
               key={item.id}
               className="logbook-card glass"
-              data-tour={highlightEntryId === item.id ? 'entry-first' : undefined}
+              data-tour={tourFirstEntryId === item.id ? 'entry-first' : undefined}
               onClick={() => setSelectedEntryId(item.id)}
             >
               <div className="card-icon">

client/src/components/LogEntryEditor.tsx

@@ -6,7 +6,7 @@ import { getLogbookKey } from '../services/logbookKeys.js'
 import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
 import { downloadLogbookPagePdf } from '../services/pdfExport.js'
-import { FileText, Save, ChevronLeft, Check, Compass, Plus, Trash2, MapPin, CloudSun, Clock, Download, Upload, Pencil, X } from 'lucide-react'
+import { FileText, Save, ChevronLeft, Check, Compass, Plus, Trash2, MapPin, CloudSun, Clock, Download, Upload, Pencil, X, ChevronDown, ChevronUp } from 'lucide-react'
 import PhotoCapture from './PhotoCapture.tsx'
 import SignatureSection from './SignatureSection.tsx'
 import TrackMap from './TrackMap.tsx'
@@ -22,7 +22,10 @@ import {
   hasAnySignature
 } from '../utils/signatures.js'
 import type { SignatureValue } from '../types/signatures.js'
-import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, logEventsEqual, type LogEventPayload } from '../utils/logEntryPayload.js'
+import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, hasUnsavedEventDraft, currentLocalTimeHHMM, isValidTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
+import EventTimeInput24h from './EventTimeInput24h.tsx'
+import CourseDialInput from './CourseDialInput.tsx'
+import { degreesToCardinal } from '../utils/courseAngle.js'
 import { hashEntryForSigning } from '../utils/entryCanonicalHash.js'
 import { signLogEntry } from '../services/entrySigning.js'
 import { getLogbookAccess } from '../services/logbookAccess.js'
@@ -39,6 +42,14 @@ import {
 import { computeTrackStats, formatTrackStats } from '../utils/trackStats.js'
 import { computeFuelPerMotorHour, formatFuelPerMotorHour } from '../utils/fuelStats.js'
 import { useRegisterUnsavedChanges } from '../context/UnsavedChangesContext.tsx'
+import TankLiterInput from './TankLiterInput.tsx'
+import {
+  computeEveningTankMaxLiters,
+  computeRefilledTankMaxLiters,
+  extractTankCapacitiesFromYacht,
+  formatTankLitersForInput,
+  type VesselTankCapacities
+} from '../utils/tankCapacity.js'
 
 function emptyTankLevels() {
   return { morning: 0, refilled: 0, evening: 0, consumption: 0 }
@@ -47,6 +58,7 @@ function emptyTankLevels() {
 function fingerprintFromStoredEntry(decrypted: Record<string, unknown>): string {
   const fw = (decrypted.freshwater as Record<string, number> | undefined) ?? emptyTankLevels()
   const fuel = (decrypted.fuel as Record<string, number> | undefined) ?? emptyTankLevels()
+  const gw = decrypted.greywater as { level?: number } | undefined
   const trackDistance = decrypted.trackDistanceNm
   const trackSpeedMax = decrypted.trackSpeedMaxKn
   const trackSpeedAvg = decrypted.trackSpeedAvgKn
@@ -69,6 +81,7 @@ function fingerprintFromStoredEntry(decrypted: Record<string, unknown>): string
       evening: fuel.evening || 0,
       consumption: fuel.consumption ?? 0
     },
+    greywater: gw ? { level: gw.level || 0 } : undefined,
     trackDistanceNm:
       trackDistance != null && trackDistance !== ''
         ? parseFloat(String(trackDistance))
@@ -142,6 +155,9 @@ export default function LogEntryEditor({
   const [fuelEvening, setFuelEvening] = useState('0')
   const [fuelConsumption, setFuelConsumption] = useState('0')
 
+  const [greywaterLevel, setGreywaterLevel] = useState('0')
+  const [tankCapacities, setTankCapacities] = useState<VesselTankCapacities>({})
+
   // Signatures
   const [signSkipper, setSignSkipper] = useState<SignatureValue | ''>('')
   const [signCrew, setSignCrew] = useState<SignatureValue | ''>('')
@@ -162,7 +178,7 @@ export default function LogEntryEditor({
   const [events, setEvents] = useState<LogEvent[]>([])
 
   // Add Event Form State
-  const [evTime, setEvTime] = useState('')
+  const [evTime, setEvTime] = useState(() => currentLocalTimeHHMM())
   const [evMgk, setEvMgk] = useState('')
   const [evRwk, setEvRwk] = useState('')
   const [evWindPressure, setEvWindPressure] = useState('')
@@ -173,12 +189,14 @@ export default function LogEntryEditor({
   const [evCurrent, setEvCurrent] = useState('')
   const [evHeel, setEvHeel] = useState('')
   const [evSailsOrMotor, setEvSailsOrMotor] = useState('')
+  const [sailsPickerExpanded, setSailsPickerExpanded] = useState(false)
   const [evLogReading, setEvLogReading] = useState('')
   const [evDistance, setEvDistance] = useState('')
   const [evGpsLat, setEvGpsLat] = useState('')
   const [evGpsLng, setEvGpsLng] = useState('')
   const [evRemarks, setEvRemarks] = useState('')
   const [evLocationName, setEvLocationName] = useState('')
+  const [activeCourseTab, setActiveCourseTab] = useState<'mgk' | 'rwk'>('mgk')
 
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
@@ -197,6 +215,7 @@ export default function LogEntryEditor({
   const contentReadyRef = useRef(false)
   const lastSignatureAlertHashRef = useRef<string | null>(null)
   const skipCrewSignClearRef = useRef(false)
+  const entryHashSeqRef = useRef(0)
   const [editingEventIndex, setEditingEventIndex] = useState<number | null>(null)
 
   const applyTrackStats = (waypoints: SavedTrack['waypoints']) => {
@@ -243,6 +262,7 @@ export default function LogEntryEditor({
         evening: parseFloat(fuelEvening) || 0,
         consumption: parseFloat(fuelConsumption) || 0
       },
+      greywater: { level: parseFloat(greywaterLevel) || 0 },
       trackDistanceNm: trackDistanceNm.trim() ? parseFloat(trackDistanceNm) : undefined,
       trackSpeedMaxKn: trackSpeedMaxKn.trim() ? parseFloat(trackSpeedMaxKn) : undefined,
       trackSpeedAvgKn: trackSpeedAvgKn.trim() ? parseFloat(trackSpeedAvgKn) : undefined,
@@ -253,6 +273,7 @@ export default function LogEntryEditor({
     date, dayOfTravel, departure, destination,
     fwMorning, fwRefilled, fwEvening, fwConsumption,
     fuelMorning, fuelRefilled, fuelEvening, fuelConsumption,
+    greywaterLevel,
     trackDistanceNm, trackSpeedMaxKn, trackSpeedAvgKn, motorHours,
     events
   ])
@@ -262,6 +283,38 @@ export default function LogEntryEditor({
     [fuelConsumption, motorHours]
   )
 
+  const tankCapacityTooltip = t('logs.tank_capacity_tooltip')
+
+  const fwRefilledMax = useMemo(
+    () => computeRefilledTankMaxLiters(fwMorning, tankCapacities.freshwaterCapacityL),
+    [fwMorning, tankCapacities.freshwaterCapacityL]
+  )
+
+  const fwEveningMax = useMemo(
+    () =>
+      computeEveningTankMaxLiters(
+        fwMorning,
+        fwRefilled,
+        tankCapacities.freshwaterCapacityL
+      ),
+    [fwMorning, fwRefilled, tankCapacities.freshwaterCapacityL]
+  )
+
+  const fuelRefilledMax = useMemo(
+    () => computeRefilledTankMaxLiters(fuelMorning, tankCapacities.fuelCapacityL),
+    [fuelMorning, tankCapacities.fuelCapacityL]
+  )
+
+  const fuelEveningMax = useMemo(
+    () =>
+      computeEveningTankMaxLiters(
+        fuelMorning,
+        fuelRefilled,
+        tankCapacities.fuelCapacityL
+      ),
+    [fuelMorning, fuelRefilled, tankCapacities.fuelCapacityL]
+  )
+
   const currentFingerprint = useMemo(() => {
     const payload = buildPayloadForSigning()
     return JSON.stringify({
@@ -299,13 +352,7 @@ export default function LogEntryEditor({
   }
 
   const hasPendingEventForm = useMemo(() => {
-    if (!evTime.trim()) return false
-    const draft = buildEventFromForm()
-    if (editingEventIndex !== null) {
-      const original = events[editingEventIndex]
-      return original ? !logEventsEqual(draft, original) : false
-    }
-    return true
+    return hasUnsavedEventDraft(buildEventFromForm(), editingEventIndex, events)
   }, [
     evTime, evMgk, evRwk, evWindPressure, evWindDirection, evWindStrength, evSeaState,
     evWeatherIcon, evCurrent, evHeel, evSailsOrMotor, evLogReading, evDistance,
@@ -326,16 +373,27 @@ export default function LogEntryEditor({
     onBack()
   }
 
-  const persistEntryToDb = useCallback(async (eventsOverride?: LogEvent[]) => {
+  const persistEntryToDb = useCallback(async (
+    options?: LogEvent[] | {
+      eventsOverride?: LogEvent[]
+      signSkipper?: SignatureValue | ''
+      signCrew?: SignatureValue | ''
+    }
+  ) => {
     if (readOnly) return
 
+    const normalized = Array.isArray(options) ? { eventsOverride: options } : (options ?? {})
+    const eventsOverride = normalized.eventsOverride
+    const skipperToSave = normalized.signSkipper !== undefined ? normalized.signSkipper : signSkipper
+    const crewToSave = normalized.signCrew !== undefined ? normalized.signCrew : signCrew
+
     const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
     if (!masterKey) throw new Error('Encryption key not found. Please log in.')
 
     const entryData = {
       ...buildPayloadForSigning(eventsOverride),
-      signSkipper: normalizedSerializedSignature(signSkipper),
-      signCrew: normalizedSerializedSignature(signCrew)
+      signSkipper: normalizedSerializedSignature(skipperToSave),
+      signCrew: normalizedSerializedSignature(crewToSave)
     }
 
     const encrypted = await encryptJson(entryData, masterKey)
@@ -363,9 +421,14 @@ export default function LogEntryEditor({
 
     setSavedFingerprint(JSON.stringify({
       ...buildPayloadForSigning(eventsOverride),
-      signSkipper: fingerprintSignature(signSkipper),
-      signCrew: fingerprintSignature(signCrew)
+      signSkipper: fingerprintSignature(skipperToSave),
+      signCrew: fingerprintSignature(crewToSave)
     }))
+
+    const hash = await hashEntryForSigning(buildPayloadForSigning(eventsOverride))
+    entryHashSeqRef.current += 1
+    setEntryHash(hash)
+    lockedContentHashRef.current = hasAnySignature(skipperToSave, crewToSave) ? hash : null
   }, [
     readOnly, logbookId, entryId, events, buildPayloadForSigning, signSkipper, signCrew
   ])
@@ -393,9 +456,11 @@ export default function LogEntryEditor({
   }, [logbookId])
 
   useEffect(() => {
+    const seq = ++entryHashSeqRef.current
     let cancelled = false
     hashEntryForSigning(buildPayloadForSigning()).then((hash) => {
-      if (!cancelled) setEntryHash(hash)
+      if (cancelled || seq !== entryHashSeqRef.current) return
+      setEntryHash(hash)
     })
     return () => { cancelled = true }
   }, [buildPayloadForSigning])
@@ -466,6 +531,7 @@ export default function LogEntryEditor({
       role: 'skipper'
     })
     setSignSkipper(signature)
+    entryHashSeqRef.current += 1
     setEntryHash(hash)
     lockedContentHashRef.current = hash
     trackPlausibleEvent(PlausibleEvents.ENTRY_SIGNED, { role: 'skipper' })
@@ -484,6 +550,7 @@ export default function LogEntryEditor({
       role: 'crew'
     })
     setSignCrew(signature)
+    entryHashSeqRef.current += 1
     setEntryHash(hash)
     lockedContentHashRef.current = hash
     trackPlausibleEvent(PlausibleEvents.ENTRY_SIGNED, { role: 'crew' })
@@ -507,11 +574,59 @@ export default function LogEntryEditor({
     setFuelConsumption(cons >= 0 ? String(cons) : '0')
   }, [fuelMorning, fuelRefilled, fuelEvening])
 
-  // Load Yacht Sails
+  const fwRefilledNoCapacity =
+    (tankCapacities.freshwaterCapacityL ?? 0) > 0 && fwRefilledMax == null
+  const fuelRefilledNoCapacity =
+    (tankCapacities.fuelCapacityL ?? 0) > 0 && fuelRefilledMax == null
+
   useEffect(() => {
-    async function loadYachtSails() {
-      if (readOnly && preloadedYacht?.sails) {
-        setYachtSails(preloadedYacht.sails)
+    const refilled = parseFloat(fwRefilled) || 0
+    if (fwRefilledMax == null) {
+      if (fwRefilledNoCapacity && refilled > 0) {
+        setFwRefilled(formatTankLitersForInput(0))
+      }
+      return
+    }
+    if (refilled > fwRefilledMax) {
+      setFwRefilled(formatTankLitersForInput(fwRefilledMax))
+    }
+  }, [fwRefilledMax, fwRefilled, fwRefilledNoCapacity])
+
+  useEffect(() => {
+    if (fwEveningMax == null) return
+    const evening = parseFloat(fwEvening) || 0
+    if (evening > fwEveningMax) {
+      setFwEvening(formatTankLitersForInput(fwEveningMax))
+    }
+  }, [fwEveningMax, fwEvening])
+
+  useEffect(() => {
+    const refilled = parseFloat(fuelRefilled) || 0
+    if (fuelRefilledMax == null) {
+      if (fuelRefilledNoCapacity && refilled > 0) {
+        setFuelRefilled(formatTankLitersForInput(0))
+      }
+      return
+    }
+    if (refilled > fuelRefilledMax) {
+      setFuelRefilled(formatTankLitersForInput(fuelRefilledMax))
+    }
+  }, [fuelRefilledMax, fuelRefilled, fuelRefilledNoCapacity])
+
+  useEffect(() => {
+    if (fuelEveningMax == null) return
+    const evening = parseFloat(fuelEvening) || 0
+    if (evening > fuelEveningMax) {
+      setFuelEvening(formatTankLitersForInput(fuelEveningMax))
+    }
+  }, [fuelEveningMax, fuelEvening])
+
+  // Load yacht sails and tank capacities
+  useEffect(() => {
+    async function loadYachtMeta() {
+      if (readOnly && preloadedYacht) {
+        if (preloadedYacht.sails) setYachtSails(preloadedYacht.sails)
+        setTankCapacities(extractTankCapacitiesFromYacht(preloadedYacht))
         return
       }
       try {
@@ -521,16 +636,19 @@ export default function LogEntryEditor({
         const yacht = await db.yachts.get(logbookId)
         if (yacht) {
           const decrypted = await decryptJson(yacht.encryptedData, yacht.iv, yacht.tag, masterKey)
-          if (decrypted && decrypted.sails && Array.isArray(decrypted.sails)) {
-            setYachtSails(decrypted.sails)
+          if (decrypted) {
+            if (decrypted.sails && Array.isArray(decrypted.sails)) {
+              setYachtSails(decrypted.sails)
+            }
+            setTankCapacities(extractTankCapacitiesFromYacht(decrypted))
           }
         }
       } catch (err) {
-        console.error('Failed to load yacht sails in editor:', err)
+        console.error('Failed to load yacht meta in editor:', err)
       }
     }
-    loadYachtSails()
-  }, [logbookId, preloadedYacht])
+    loadYachtMeta()
+  }, [logbookId, preloadedYacht, readOnly])
 
   // Load entry details
   useEffect(() => {
@@ -560,6 +678,11 @@ export default function LogEntryEditor({
             setFuelEvening(String(preloadedEntry.fuel.evening || 0))
             setFuelConsumption(String(preloadedEntry.fuel.consumption ?? 0))
           }
+          if (preloadedEntry.greywater) {
+            setGreywaterLevel(String(preloadedEntry.greywater.level || 0))
+          } else {
+            setGreywaterLevel('0')
+          }
 
           setSignSkipper(normalizeSignature(preloadedEntry.signSkipper) || '')
           setSignCrew(normalizeSignature(preloadedEntry.signCrew) || '')
@@ -593,6 +716,11 @@ export default function LogEntryEditor({
               setFuelEvening(String(decrypted.fuel.evening || 0))
               setFuelConsumption(String(decrypted.fuel.consumption ?? 0))
             }
+            if (decrypted.greywater) {
+              setGreywaterLevel(String(decrypted.greywater.level || 0))
+            } else {
+              setGreywaterLevel('0')
+            }
 
             setSignSkipper(normalizeSignature(decrypted.signSkipper) || '')
             setSignCrew(normalizeSignature(decrypted.signCrew) || '')
@@ -813,10 +941,7 @@ export default function LogEntryEditor({
       
       // Calculate wind compass direction sector
       if (wind?.deg !== undefined) {
-        const deg = wind.deg
-        const sectors = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW']
-        const index = Math.round(deg / 22.5) % 16
-        setEvWindDirection(sectors[index])
+        setEvWindDirection(degreesToCardinal(wind.deg))
       }
 
       if (data.weather && Array.isArray(data.weather) && data.weather[0]) {
@@ -841,6 +966,9 @@ export default function LogEntryEditor({
     ? ['Großsegel', 'Genua', 'Fock', 'Spinnaker', 'Gennaker']
     : ['Mainsail', 'Genoa', 'Jib', 'Spinnaker', 'Gennaker']
 
+  const eventSailOptions = yachtSails.length > 0 ? yachtSails : defaultSails
+  const showSailsPickerToggle = eventSailOptions.length + 1 > 6
+
   const toggleSailOrMotor = (item: string) => {
     let currentItems = evSailsOrMotor
       .split(/\s*(?:\+|\bplus\b|,)\s*/i)
@@ -864,8 +992,17 @@ export default function LogEntryEditor({
     return currentItems.includes(item.toLowerCase())
   }
 
+  const motorPropulsionLabel = t('logs.motor_propulsion')
+  const sortedEventSailOptions = [...eventSailOptions].sort((a, b) => {
+    const aActive = isItemActive(a)
+    const bActive = isItemActive(b)
+    if (aActive === bActive) return 0
+    return aActive ? -1 : 1
+  })
+  const isMotorActive = isItemActive(motorPropulsionLabel)
+
   const clearEventForm = () => {
-    setEvTime('')
+    setEvTime(currentLocalTimeHHMM())
     setEvMgk('')
     setEvRwk('')
     setEvWindPressure('')
@@ -883,6 +1020,7 @@ export default function LogEntryEditor({
     setEvRemarks('')
     setEvLocationName('')
     setEditingEventIndex(null)
+    setSailsPickerExpanded(false)
   }
 
   const fillEventForm = (ev: LogEvent) => {
@@ -906,10 +1044,23 @@ export default function LogEntryEditor({
     setEvLocationName('')
   }
 
+  const resolveSignaturesAfterContentChange = (skipperOnly = false) => {
+    const hadSkipper = !!signSkipper
+    const hadCrew = !!signCrew
+    const cleared = hadSkipper || (hadCrew && !skipperOnly)
+    skipCrewSignClearRef.current = skipperOnly
+    const nextSkipper: SignatureValue | '' = hadSkipper ? '' : signSkipper
+    const nextCrew: SignatureValue | '' = hadCrew && !skipperOnly ? '' : signCrew
+    if (cleared) {
+      if (hadSkipper) setSignSkipper('')
+      if (hadCrew && !skipperOnly) setSignCrew('')
+      lockedContentHashRef.current = null
+    }
+    return { signSkipper: nextSkipper, signCrew: nextCrew, cleared }
+  }
+
   const markSkipperSignatureClearedForEventChange = () => {
-    if (!signSkipper) return
-    skipCrewSignClearRef.current = true
-    setSignSkipper('')
+    resolveSignaturesAfterContentChange(true)
   }
 
   const handleEditEvent = (index: number) => {
@@ -926,7 +1077,7 @@ export default function LogEntryEditor({
 
   const handleSaveEvent = async (e: React.FormEvent) => {
     e.preventDefault()
-    if (readOnly || !evTime) return
+    if (readOnly || !isValidTimeHHMM(evTime)) return
 
     const eventData = buildEventFromForm()
     const isEdit = editingEventIndex !== null
@@ -999,11 +1150,20 @@ export default function LogEntryEditor({
     if (readOnly) return
 
     let eventsToSave = events
+    let signaturesForSave: { signSkipper: SignatureValue | ''; signCrew: SignatureValue | '' } | undefined
 
     if (hasPendingEventForm) {
       const isEdit = editingEventIndex !== null
-      if (isEdit && signSkipper) {
-        markSkipperSignatureClearedForEventChange()
+      const resolved = resolveSignaturesAfterContentChange(isEdit)
+      signaturesForSave = {
+        signSkipper: resolved.signSkipper,
+        signCrew: resolved.signCrew
+      }
+      if (resolved.cleared) {
+        void showAlertRef.current(
+          isEdit ? t('logs.sign_cleared_skipper_re_sign') : t('logs.sign_cleared_re_sign'),
+          isEdit ? t('logs.sign_cleared_skipper_re_sign_title') : t('logs.sign_cleared_re_sign_title')
+        )
       }
       eventsToSave = applyEventFormToEvents(buildEventFromForm())
       setEvents(eventsToSave)
@@ -1017,7 +1177,10 @@ export default function LogEntryEditor({
     setSuccess(false)
 
     try {
-      await persistEntryToDb(eventsToSave)
+      await persistEntryToDb({
+        eventsOverride: eventsToSave,
+        ...signaturesForSave
+      })
 
       setSuccess(true)
       trackPlausibleEvent(PlausibleEvents.TRAVEL_DAY_SAVED)
@@ -1155,41 +1318,35 @@ export default function LogEntryEditor({
               <h3>{t('logs.freshwater')}</h3>
             </div>
             <div className="consumption-grid">
+              <TankLiterInput
+                id="fw-morning"
+                label={t('logs.morning')}
+                value={fwMorning}
+                onChange={setFwMorning}
+                maxLiters={tankCapacities.freshwaterCapacityL}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
+              <TankLiterInput
+                id="fw-refilled"
+                label={t('logs.refilled')}
+                value={fwRefilled}
+                onChange={setFwRefilled}
+                maxLiters={fwRefilledMax}
+                disabled={saving || readOnly || fwRefilledNoCapacity}
+                titleTooltip={tankCapacityTooltip}
+              />
+              <TankLiterInput
+                id="fw-evening"
+                label={t('logs.evening')}
+                value={fwEvening}
+                onChange={setFwEvening}
+                maxLiters={fwEveningMax}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
               <div className="input-group">
-                <label>{t('logs.morning')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fwMorning}
-                  onChange={(e) => setFwMorning(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.refilled')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fwRefilled}
-                  onChange={(e) => setFwRefilled(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.evening')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fwEvening}
-                  onChange={(e) => setFwEvening(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.consumption')} (L)</label>
+                <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
                 <input
                   type="number"
                   className="input-text consumption-value"
@@ -1197,6 +1354,7 @@ export default function LogEntryEditor({
                   readOnly
                   tabIndex={-1}
                   aria-readonly="true"
+                  title={tankCapacityTooltip}
                 />
               </div>
             </div>
@@ -1209,41 +1367,35 @@ export default function LogEntryEditor({
               <h3>{t('logs.fuel')}</h3>
             </div>
             <div className="consumption-grid">
+              <TankLiterInput
+                id="fuel-morning"
+                label={t('logs.morning')}
+                value={fuelMorning}
+                onChange={setFuelMorning}
+                maxLiters={tankCapacities.fuelCapacityL}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
+              <TankLiterInput
+                id="fuel-refilled"
+                label={t('logs.refilled')}
+                value={fuelRefilled}
+                onChange={setFuelRefilled}
+                maxLiters={fuelRefilledMax}
+                disabled={saving || readOnly || fuelRefilledNoCapacity}
+                titleTooltip={tankCapacityTooltip}
+              />
+              <TankLiterInput
+                id="fuel-evening"
+                label={t('logs.evening')}
+                value={fuelEvening}
+                onChange={setFuelEvening}
+                maxLiters={fuelEveningMax}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
               <div className="input-group">
-                <label>{t('logs.morning')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fuelMorning}
-                  onChange={(e) => setFuelMorning(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.refilled')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fuelRefilled}
-                  onChange={(e) => setFuelRefilled(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.evening')}</label>
-                <input
-                  type="number"
-                  className="input-text"
-                  value={fuelEvening}
-                  onChange={(e) => setFuelEvening(e.target.value)}
-                  disabled={saving || readOnly}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.consumption')} (L)</label>
+                <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
                 <input
                   type="number"
                   className="input-text consumption-value"
@@ -1251,11 +1403,12 @@ export default function LogEntryEditor({
                   readOnly
                   tabIndex={-1}
                   aria-readonly="true"
+                  title={tankCapacityTooltip}
                 />
               </div>
 
               <div className="input-group">
-                <label>{t('logs.fuel_per_motor_hour')}</label>
+                <label title={tankCapacityTooltip}>{t('logs.fuel_per_motor_hour')}</label>
                 <input
                   type="text"
                   className="input-text consumption-value"
@@ -1267,10 +1420,30 @@ export default function LogEntryEditor({
                   readOnly
                   tabIndex={-1}
                   aria-readonly="true"
+                  title={tankCapacityTooltip}
                 />
               </div>
             </div>
           </div>
+
+          {/* Greywater card */}
+          <div className="form-card">
+            <div className="form-header">
+              <Compass size={20} className="form-icon" />
+              <h3>{t('logs.greywater')}</h3>
+            </div>
+            <div className="consumption-grid">
+              <TankLiterInput
+                id="greywater-level"
+                label={t('logs.greywater_level')}
+                value={greywaterLevel}
+                onChange={setGreywaterLevel}
+                maxLiters={tankCapacities.greywaterCapacityL}
+                disabled={saving || readOnly}
+                titleTooltip={tankCapacityTooltip}
+              />
+            </div>
+          </div>
         </div>
 
         {/* Section 3: Event Journal Entries */}
@@ -1368,36 +1541,46 @@ export default function LogEntryEditor({
                   <Clock size={12} style={{ display: 'inline', marginRight: 4 }} />
                   {t('logs.event_time')} *
                 </label>
-                <input
-                  type="time"
-                  className="input-text"
+                <EventTimeInput24h
                   value={evTime}
-                  onChange={(e) => setEvTime(e.target.value)}
+                  onChange={setEvTime}
                   disabled={saving}
+                  aria-label={t('logs.event_time')}
                 />
               </div>
 
-              <div className="input-group">
-                <label>{t('logs.event_mgk')}</label>
-                <input
-                  type="text"
-                  placeholder="e.g. 180"
-                  className="input-text"
-                  value={evMgk}
-                  onChange={(e) => setEvMgk(e.target.value)}
-                  disabled={saving}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.event_rwk')}</label>
-                <input
-                  type="text"
-                  placeholder="e.g. 185"
-                  className="input-text"
-                  value={evRwk}
-                  onChange={(e) => setEvRwk(e.target.value)}
+              <div className="input-group course-dial-section">
+                <label>
+                  <Compass size={12} style={{ display: 'inline', marginRight: 4 }} />
+                  {t('logs.event_course_section')}
+                </label>
+                <div className="course-dial-tabs" role="tablist" aria-label={t('logs.event_course_section')}>
+                  <button
+                    type="button"
+                    role="tab"
+                    aria-selected={activeCourseTab === 'mgk'}
+                    className={`course-dial-tab${activeCourseTab === 'mgk' ? ' is-active' : ''}`}
+                    onClick={() => setActiveCourseTab('mgk')}
+                    disabled={saving}
+                  >
+                    {t('logs.course_tab_mgk')}
+                  </button>
+                  <button
+                    type="button"
+                    role="tab"
+                    aria-selected={activeCourseTab === 'rwk'}
+                    className={`course-dial-tab${activeCourseTab === 'rwk' ? ' is-active' : ''}`}
+                    onClick={() => setActiveCourseTab('rwk')}
+                    disabled={saving}
+                  >
+                    {t('logs.course_tab_rwk')}
+                  </button>
+                </div>
+                <CourseDialInput
+                  value={activeCourseTab === 'mgk' ? evMgk : evRwk}
+                  onChange={activeCourseTab === 'mgk' ? setEvMgk : setEvRwk}
                   disabled={saving}
+                  aria-label={activeCourseTab === 'mgk' ? t('logs.event_mgk') : t('logs.event_rwk')}
                 />
               </div>
 
@@ -1476,15 +1659,15 @@ export default function LogEntryEditor({
             </div>
 
             <div className="form-grid mb-4">
-              <div className="input-group">
+              <div className="input-group course-dial-section">
                 <label>{t('logs.event_wind_direction')}</label>
-                <input
-                  type="text"
-                  placeholder="e.g. NNE"
-                  className="input-text"
+                <CourseDialInput
                   value={evWindDirection}
-                  onChange={(e) => setEvWindDirection(e.target.value)}
+                  onChange={setEvWindDirection}
                   disabled={saving || weatherLoading}
+                  allowCardinal
+                  displayMode="auto"
+                  aria-label={t('logs.event_wind_direction')}
                 />
               </div>
 
@@ -1548,25 +1731,6 @@ export default function LogEntryEditor({
                   onChange={(e) => setEvSailsOrMotor(e.target.value)}
                   disabled={saving}
                 />
-                <div className="sails-picker-container">
-                  <div className="sails-picker-pills">
-                    {(yachtSails.length > 0 ? yachtSails : defaultSails).map((sail) => (
-                      <span
-                        key={sail}
-                        className={`sail-pill ${isItemActive(sail) ? 'active' : ''}`}
-                        onClick={() => toggleSailOrMotor(sail)}
-                      >
-                        {sail}
-                      </span>
-                    ))}
-                    <span
-                      className={`sail-pill motor-pill ${isItemActive(t('logs.motor_propulsion')) ? 'active' : ''}`}
-                      onClick={() => toggleSailOrMotor(t('logs.motor_propulsion'))}
-                    >
-                      {t('logs.motor_propulsion')}
-                    </span>
-                  </div>
-                </div>
               </div>
 
               <div className="input-group">
@@ -1581,7 +1745,63 @@ export default function LogEntryEditor({
                 />
               </div>
 
-              <div className="input-group" style={{ gridColumn: 'span 2' }}>
+              <div
+                className={[
+                  'sails-picker-container grid-span-2',
+                  showSailsPickerToggle ? 'is-collapsible' : '',
+                  showSailsPickerToggle && !sailsPickerExpanded ? 'is-collapsed' : '',
+                ].filter(Boolean).join(' ')}
+              >
+                <div className="sails-picker-pills">
+                  {isMotorActive && (
+                    <span
+                      className={`sail-pill motor-pill active`}
+                      onClick={() => toggleSailOrMotor(motorPropulsionLabel)}
+                    >
+                      {motorPropulsionLabel}
+                    </span>
+                  )}
+                  {sortedEventSailOptions.map((sail) => (
+                    <span
+                      key={sail}
+                      className={`sail-pill ${isItemActive(sail) ? 'active' : ''}`}
+                      onClick={() => toggleSailOrMotor(sail)}
+                    >
+                      {sail}
+                    </span>
+                  ))}
+                  {!isMotorActive && (
+                    <span
+                      className="sail-pill motor-pill"
+                      onClick={() => toggleSailOrMotor(motorPropulsionLabel)}
+                    >
+                      {motorPropulsionLabel}
+                    </span>
+                  )}
+                </div>
+                {showSailsPickerToggle && (
+                  <button
+                    type="button"
+                    className="sails-picker-toggle"
+                    onClick={() => setSailsPickerExpanded((prev) => !prev)}
+                    aria-expanded={sailsPickerExpanded}
+                  >
+                    {sailsPickerExpanded ? (
+                      <>
+                        <ChevronUp size={14} aria-hidden="true" />
+                        {t('logs.sails_picker_show_less')}
+                      </>
+                    ) : (
+                      <>
+                        <ChevronDown size={14} aria-hidden="true" />
+                        {t('logs.sails_picker_show_more')}
+                      </>
+                    )}
+                  </button>
+                )}
+              </div>
+
+              <div className="input-group grid-span-2">
                 <label>{t('logs.event_remarks')}</label>
                 <input
                   type="text"
@@ -1611,7 +1831,7 @@ export default function LogEntryEditor({
                 type="button"
                 className="btn secondary"
                 onClick={handleSaveEvent}
-                disabled={saving || !evTime}
+                disabled={saving || !isValidTimeHHMM(evTime)}
                 style={{ width: 'auto', padding: '10px 20px', display: 'flex' }}
               >
                 {editingEventIndex !== null ? <Save size={16} /> : <Plus size={16} />}

client/src/components/LogbookBackupPanel.tsx

@@ -12,6 +12,7 @@ import {
   type LogbookBackupPreview
 } from '../services/logbookBackup.js'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
 
 interface LogbookBackupPanelProps {
   logbookId: string
@@ -41,7 +42,7 @@ function mapBackupError(code: string, t: (key: string) => string): string {
 }
 
 export default function LogbookBackupPanel({ logbookId, onRestored }: LogbookBackupPanelProps) {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const { showConfirm } = useDialog()
   const fileInputRef = useRef<HTMLInputElement>(null)
 
@@ -334,7 +335,7 @@ export default function LogbookBackupPanel({ logbookId, onRestored }: LogbookBac
             </ul>
             <p className="text-muted backup-preview-date">
               {t('settings.backup_exported_at', {
-                date: new Date(importPreview.exportedAt).toLocaleString()
+                date: formatAppDateTime(importPreview.exportedAt, i18n.language)
               })}
             </p>
           </div>

client/src/components/LogbookDashboard.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLiveQuery } from 'dexie-react-hooks'
-import { db } from '../services/db.js'
+import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
 import { fetchLogbooks, createLogbook, deleteLogbook, updateLogbookTitle, type DecryptedLogbook } from '../services/logbook.js'
 import LogbookRoleBadge from './LogbookRoleBadge.tsx'
 import BetaBadge from './BetaBadge.tsx'
@@ -32,8 +31,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
   const [online, setOnline] = useState(navigator.onLine)
   const [username] = useState(localStorage.getItem('active_username') || 'Skipper')
 
-  // Reactive sync queue count
-  const pendingCount = useLiveQuery(() => db.syncQueue.count()) || 0
+  const { pendingCount, showSpinner, showPendingWarning, connStatusClassName } = useSyncIndicator()
 
   // Listen to connectivity changes
   useEffect(() => {
@@ -272,11 +270,27 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
 
         <div className="header-actions">
           {/* Connection Indicator */}
-          <div className={`conn-status ${online ? (pendingCount > 0 ? 'unsynced' : 'online') : 'offline'}`} title={online ? (pendingCount > 0 ? 'Pending Sync' : 'Synced') : 'Offline'}>
+          <div
+            className={connStatusClassName(online)}
+            title={
+              online
+                ? showSpinner
+                  ? 'Syncing'
+                  : pendingCount > 0
+                    ? 'Pending Sync'
+                    : 'Synced'
+                : 'Offline'
+            }
+          >
             {online ? (
-              pendingCount > 0 ? (
+              showSpinner ? (
                 <>
                   <RefreshCw size={18} className="spin" />
+                  <span>{t('sync.status_syncing')}</span>
+                </>
+              ) : showPendingWarning ? (
+                <>
+                  <RefreshCw size={18} />
                   <span>{t('sync.status_unsynced')} ({pendingCount})</span>
                 </>
               ) : (
@@ -300,6 +314,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
             onClick={onOpenProfile}
             title={t('dashboard.open_profile', { name: username })}
             aria-label={t('dashboard.open_profile', { name: username })}
+            data-tour="nav-profile"
           >
             <User size={18} aria-hidden="true" />
             <span className="skipper-badge__name">{username}</span>

client/src/components/PasskeySignButton.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Fingerprint, Loader2, AlertTriangle } from 'lucide-react'
 import type { PasskeySignature } from '../types/signatures.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
 
 interface PasskeySignButtonProps {
   label: string
@@ -42,9 +43,7 @@ export default function PasskeySignButton({
     }
   }
 
-  const formattedDate = signature
-    ? new Date(signature.signedAt).toLocaleString(i18n.language === 'de' ? 'de-DE' : 'en-GB')
-    : ''
+  const formattedDate = signature ? formatAppDateTime(signature.signedAt, i18n.language) : ''
 
   return (
     <div className="passkey-sign-block">

client/src/components/PushNotificationSettings.tsx

@@ -56,7 +56,7 @@ export default function PushNotificationSettings() {
         trackPlausibleEvent(PlausibleEvents.PUSH_DISABLED)
       }
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : t('settings.push_error')
+      const message = err instanceof Error ? err.message : t('profile.push_error')
       showAlert(message)
       void loadPrefs()
     } finally {
@@ -69,10 +69,10 @@ export default function PushNotificationSettings() {
       <div className="member-editor-card glass mt-4">
         <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
           <BellOff size={20} style={{ color: '#94a3b8' }} />
-          <h3 style={{ margin: 0, color: '#94a3b8', fontSize: '16px' }}>{t('settings.push_title')}</h3>
+          <h3 style={{ margin: 0, color: '#94a3b8', fontSize: '16px' }}>{t('profile.push_title')}</h3>
         </div>
         <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: 0 }}>
-          {t('settings.push_unsupported')}
+          {t('profile.push_unsupported')}
         </p>
       </div>
     )
@@ -83,23 +83,23 @@ export default function PushNotificationSettings() {
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
         <Bell size={20} style={{ color: 'var(--app-accent-light)' }} />
         <h3 style={{ margin: 0, color: 'var(--app-accent-light)', fontSize: '16px' }}>
-          {t('settings.push_title')}
+          {t('profile.push_title')}
         </h3>
       </div>
 
       <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 16px 0' }}>
-        {t('settings.push_desc')}
+        {t('profile.push_desc')}
       </p>
 
       {iosNeedsInstall && (
         <p className="text-muted" style={{ fontSize: '13px', margin: '0 0 12px 0' }}>
-          {t('settings.push_ios_install_hint')}
+          {t('profile.push_ios_install_hint')}
         </p>
       )}
 
       {permission === 'denied' && (
         <p style={{ fontSize: '13px', color: '#f87171', margin: '0 0 12px 0' }}>
-          {t('settings.push_denied_hint')}
+          {t('profile.push_denied_hint')}
         </p>
       )}
 
@@ -122,12 +122,12 @@ export default function PushNotificationSettings() {
           disabled={loading || toggling || iosNeedsInstall}
           style={{ width: '18px', height: '18px', cursor: 'inherit' }}
         />
-        <span>{t('settings.push_enable')}</span>
+        <span>{t('profile.push_enable')}</span>
       </label>
 
       {enabled && permission === 'granted' && (
         <p className="text-muted" style={{ fontSize: '12px', margin: '12px 0 0 0' }}>
-          {t('settings.push_active')}
+          {t('profile.push_active')}
         </p>
       )}
     </div>

client/src/components/SettingsForm.tsx

@@ -1,16 +1,17 @@
 import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Settings as SettingsIcon, Save, Check, Users, Trash2, Copy, Link as LinkIcon, Compass } from 'lucide-react'
+import { Settings as SettingsIcon, Check, Users, Trash2, Copy, Link as LinkIcon } from 'lucide-react'
 import { ensureLogbookKey } from '../services/logbookKeys.js'
 import LogbookBackupPanel from './LogbookBackupPanel.tsx'
-import PwaInstallPrompt from './PwaInstallPrompt.tsx'
-import PushNotificationSettings from './PushNotificationSettings.tsx'
 import { useDialog } from './ModalDialog.tsx'
-import { notifyAppearanceChanged } from '../services/appearance.js'
-import ThemedSelect from './ThemedSelect.tsx'
-import { useAppTour } from '../context/AppTourContext.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { apiFetch } from '../services/api.js'
+import {
+  enableCollaboratorChangePush,
+  isCollaboratorPushActive,
+  isPushSupported
+} from '../services/pushNotifications.js'
+import { isIosDevice, isRunningStandalone } from '../hooks/usePwaInstall.js'
 
 interface SettingsFormProps {
   logbookId?: string | null
@@ -25,7 +26,6 @@ interface Collaborator {
   createdAt: string
 }
 
-// Convert ArrayBuffer to Hex String for URL fragment
 const bufferToHex = (buffer: ArrayBuffer): string => {
   return Array.from(new Uint8Array(buffer))
     .map(b => b.toString(16).padStart(2, '0'))
@@ -35,14 +35,7 @@ const bufferToHex = (buffer: ArrayBuffer): string => {
 export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsFormProps) {
   const { t } = useTranslation()
   const { showConfirm, showAlert } = useDialog()
-  const { restartTour } = useAppTour()
-  const [apiKey, setApiKey] = useState(localStorage.getItem('owm_api_key') || '')
-  const [theme, setTheme] = useState(localStorage.getItem('active_theme') || 'auto')
-  const [colorScheme, setColorScheme] = useState(localStorage.getItem('active_color_scheme') || 'auto')
-  const [saving, setSaving] = useState(false)
-  const [success, setSuccess] = useState(false)
 
-  // Collaboration States
   const [collaborators, setCollaborators] = useState<Collaborator[]>([])
   const [isOwner, setIsOwner] = useState(true)
   const [inviteLink, setInviteLink] = useState('')
@@ -51,7 +44,6 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
   const [collabError, setCollabError] = useState<string | null>(null)
   const [loadingCollabs, setLoadingCollabs] = useState(false)
 
-  // Public Share Link States
   const [shareEnabled, setShareEnabled] = useState(false)
   const [shareLink, setShareLink] = useState('')
   const [shareCopied, setShareCopied] = useState(false)
@@ -120,9 +112,9 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
       } else {
         throw new Error('Failed to toggle public share link.')
       }
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Toggle share link failed:', err)
-      showAlert(err.message || 'Failed to update public share link.')
+      showAlert(err instanceof Error ? err.message : 'Failed to update public share link.')
     } finally {
       setLoadingShareLink(false)
     }
@@ -136,7 +128,6 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
     }
   }
 
-
   const loadCollaborators = async () => {
     setLoadingCollabs(true)
     setCollabError(null)
@@ -166,6 +157,43 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
     }
   }
 
+  const promptPushAfterInviteCreated = async () => {
+    if (!isPushSupported()) return
+    if (await isCollaboratorPushActive()) return
+
+    const iosNeedsInstall = isIosDevice() && !isRunningStandalone()
+
+    if (iosNeedsInstall) {
+      await showAlert(
+        t('settings.invite_push_prompt_ios_message'),
+        t('settings.invite_push_prompt_title'),
+        t('settings.invite_push_prompt_later')
+      )
+      return
+    }
+
+    const enable = await showConfirm(
+      t('settings.invite_push_prompt_message'),
+      t('settings.invite_push_prompt_title'),
+      t('settings.invite_push_prompt_enable'),
+      t('settings.invite_push_prompt_later')
+    )
+
+    if (!enable) return
+
+    try {
+      await enableCollaboratorChangePush()
+      await showAlert(
+        t('settings.invite_push_prompt_success'),
+        t('settings.invite_push_prompt_title')
+      )
+      trackPlausibleEvent(PlausibleEvents.PUSH_ENABLED)
+    } catch (err: unknown) {
+      console.error('Failed to enable push after invite:', err)
+      await showAlert(err instanceof Error ? err.message : t('profile.push_error'))
+    }
+  }
+
   const handleGenerateInvite = async () => {
     if (!logbookId) return
     setGeneratingInvite(true)
@@ -173,10 +201,8 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
     if (!localStorage.getItem('active_userid')) return
 
     try {
-      // 1. Ensure logbook has an E2E key (upgrades legacy logbooks if needed)
       const logbookKey = await ensureLogbookKey(logbookId)
 
-      // 2. Create invite token on server
       const res = await apiFetch('/api/collaboration/invite', {
         method: 'POST',
         body: JSON.stringify({ logbookId, role: 'WRITE' })
@@ -187,16 +213,15 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
       }
 
       const invite = await res.json()
-      
-      // 3. Format link containing token (URL params) and key (URL hash anchor)
       const hexKey = bufferToHex(logbookKey)
       const link = `${window.location.origin}/invite?token=${invite.token}#key=${hexKey}`
-      
+
       setInviteLink(link)
       trackPlausibleEvent(PlausibleEvents.INVITE_GENERATED)
-    } catch (err: any) {
+      await promptPushAfterInviteCreated()
+    } catch (err: unknown) {
       console.error('Failed to generate invite:', err)
-      showAlert(err.message || 'Failed to generate invite link.')
+      showAlert(err instanceof Error ? err.message : 'Failed to generate invite link.')
     } finally {
       setGeneratingInvite(false)
     }
@@ -225,40 +250,26 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
         } else {
           throw new Error('Failed to revoke collaborator access.')
         }
-      } catch (err: any) {
+      } catch (err: unknown) {
         console.error('Revocation failed:', err)
-        showAlert(err.message || 'Failed to revoke access.')
+        showAlert(err instanceof Error ? err.message : 'Failed to revoke access.')
       }
     }
   }
 
-  const persistAppearance = (nextTheme: string, nextColorScheme: string) => {
-    localStorage.setItem('active_theme', nextTheme)
-    localStorage.setItem('active_color_scheme', nextColorScheme)
-    notifyAppearanceChanged()
-  }
-
-  const handleThemeChange = (nextTheme: string) => {
-    setTheme(nextTheme)
-    persistAppearance(nextTheme, colorScheme)
-  }
-
-  const handleColorSchemeChange = (nextColorScheme: string) => {
-    setColorScheme(nextColorScheme)
-    persistAppearance(theme, nextColorScheme)
-  }
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setSaving(true)
-    setSuccess(false)
-    
-    localStorage.setItem('owm_api_key', apiKey.trim())
-    persistAppearance(theme, colorScheme)
-    
-    setSaving(false)
-    setSuccess(true)
-    setTimeout(() => setSuccess(false), 3000)
+  if (!logbookId) {
+    return (
+      <div className="form-card">
+        <div className="form-header">
+          <SettingsIcon size={24} className="form-icon" />
+          <div>
+            <h2>{t('settings.title')}</h2>
+            <p className="form-subtitle">{t('settings.subtitle')}</p>
+          </div>
+        </div>
+        <p className="text-muted mt-4">{t('settings.select_logbook_hint')}</p>
+      </div>
+    )
   }
 
   return (
@@ -267,128 +278,12 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
         <SettingsIcon size={24} className="form-icon" />
         <div>
           <h2>{t('settings.title')}</h2>
-          <p className="form-subtitle" style={{ margin: '4px 0 0 0', fontSize: '13px', color: '#94a3b8' }}>
-            {t('settings.subtitle')}
-          </p>
+          <p className="form-subtitle">{t('settings.subtitle')}</p>
         </div>
       </div>
 
-      <form onSubmit={handleSubmit} className="vessel-form mt-6">
-        <PwaInstallPrompt variant="inline" />
-        <PushNotificationSettings />
-
-        {/* Weather Integration card */}
-        <div className="member-editor-card glass">
-          <h3 style={{ marginTop: 0, marginBottom: '12px', color: '#fbbf24', fontSize: '16px' }}>
-            {t('settings.owm_title')}
-          </h3>
-          <p style={{ fontSize: '13.5px', color: '#94a3b8', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.key_help')}
-          </p>
-
-          <div className="input-group">
-            <label htmlFor="owm-api-key" style={{ display: 'block', fontSize: '13.5px', color: '#94a3b8', marginBottom: '6px', fontWeight: 500 }}>
-              {t('settings.owm_key')}
-            </label>
-            <input
-              id="owm-api-key"
-              name="owm-api-key"
-              type="password"
-              className="input-text"
-              placeholder="e.g. 8b6a7f...d8"
-              value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
-              disabled={saving}
-              autoComplete="off"
-            />
-          </div>
-        </div>
-
-        {/* Theme customization card */}
-        <div className="member-editor-card glass mt-4">
-          <h3 style={{ marginTop: 0, marginBottom: '12px', color: '#fbbf24', fontSize: '16px' }}>
-            {t('settings.theme_title')}
-          </h3>
-          <p style={{ fontSize: '13.5px', color: '#94a3b8', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.theme_label')}
-          </p>
-
-          <div className="input-group">
-            <ThemedSelect
-              id="app-theme"
-              value={theme}
-              disabled={saving}
-              onChange={handleThemeChange}
-              options={[
-                { value: 'auto', label: t('settings.theme_auto') },
-                { value: 'ocean', label: t('settings.theme_ocean') },
-                { value: 'material', label: t('settings.theme_material') },
-                { value: 'cupertino', label: t('settings.theme_cupertino') }
-              ]}
-            />
-          </div>
-        </div>
-
-        <div className="member-editor-card glass mt-4">
-          <h3 style={{ marginTop: 0, marginBottom: '12px', color: 'var(--app-accent-light)', fontSize: '16px' }}>
-            {t('settings.color_scheme_title')}
-          </h3>
-          <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.color_scheme_label')}
-          </p>
-
-          <div className="input-group">
-            <ThemedSelect
-              id="app-color-scheme"
-              value={colorScheme}
-              disabled={saving}
-              onChange={handleColorSchemeChange}
-              options={[
-                { value: 'auto', label: t('settings.color_scheme_auto') },
-                { value: 'light', label: t('settings.color_scheme_light') },
-                { value: 'dark', label: t('settings.color_scheme_dark') }
-              ]}
-            />
-          </div>
-        </div>
-
-        <div className="member-editor-card glass mt-4">
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-            <Compass size={20} style={{ color: 'var(--app-accent-light)' }} />
-            <h3 style={{ margin: 0, color: 'var(--app-accent-light)', fontSize: '16px' }}>
-              {t('settings.tour_title')}
-            </h3>
-          </div>
-          <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.tour_desc')}
-          </p>
-          <button
-            type="button"
-            className="btn secondary"
-            onClick={() => restartTour()}
-          >
-            {t('settings.tour_restart')}
-          </button>
-        </div>
-
-        <div className="form-actions mt-4 mb-6">
-          {success && (
-            <div className="success-toast">
-              <Check size={16} />
-              <span>{t('settings.saved')}</span>
-            </div>
-          )}
-          
-          <button type="submit" className="btn primary" disabled={saving}>
-            <Save size={18} />
-            {saving ? t('settings.saving') : t('settings.save')}
-          </button>
-        </div>
-      </form>
-
-      {/* Public Share Link Card (Only visible to Logbook Owner) */}
       {logbookId && isOwner && (
-        <div className="member-editor-card glass mt-6" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '24px' }}>
+        <div className="member-editor-card glass mt-6">
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
             <LinkIcon size={20} style={{ color: '#fbbf24' }} />
             <h3 style={{ margin: 0, color: '#fbbf24', fontSize: '16px' }}>
@@ -441,12 +336,10 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
         </div>
       )}
 
-      {/* Backup & Restore (owner only) */}
       {logbookId && isOwner && (
         <LogbookBackupPanel logbookId={logbookId} onRestored={onLogbookRestored} />
       )}
 
-      {/* Crew Collaboration Card (Only visible to Logbook Owner) */}
       {logbookId && isOwner && (
         <div className="member-editor-card glass mt-6" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '24px' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
@@ -494,7 +387,6 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
             </div>
           )}
 
-          {/* Collaborator List */}
           <h4 style={{ color: '#fbbf24', fontSize: '14px', marginBottom: '12px' }}>
             {t('logs.collaborators_list')}
           </h4>

client/src/components/SignatureSection.tsx

@@ -5,6 +5,7 @@ import SignaturePad from './SignaturePad.tsx'
 import PasskeySignButton from './PasskeySignButton.tsx'
 import type { PasskeySignature, SignatureValue } from '../types/signatures.js'
 import { isPasskeySignature, getSignaturePayload, getSignatureAttribution } from '../utils/signatures.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
 
 type SignatureMode = 'passkey' | 'classic'
 
@@ -30,9 +31,7 @@ function SignerAttributionBadge({ value }: { value: SignatureValue | '' }) {
   const attribution = getSignatureAttribution(value)
   if (!attribution) return null
 
-  const formattedDate = new Date(attribution.signedAt).toLocaleString(
-    i18n.language === 'de' ? 'de-DE' : 'en-GB'
-  )
+  const formattedDate = formatAppDateTime(attribution.signedAt, i18n.language)
 
   return (
     <div className="passkey-sign-badge valid signature-attribution-badge">

client/src/components/TankLiterInput.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { clampTankLiters } from '../utils/tankCapacity.js'
+
+interface TankLiterInputProps {
+  id?: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  maxLiters?: number
+  disabled?: boolean
+  titleTooltip?: string
+}
+
+function parseInputLiters(value: string): number {
+  const trimmed = value.trim().replace(',', '.')
+  if (!trimmed) return 0
+  const parsed = Number(trimmed)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+export default function TankLiterInput({
+  id,
+  label,
+  value,
+  onChange,
+  maxLiters,
+  disabled = false,
+  titleTooltip
+}: TankLiterInputProps) {
+  const { t } = useTranslation()
+  const useSlider = maxLiters != null && maxLiters > 0
+
+  const emitValue = useCallback(
+    (liters: number) => {
+      const clamped = clampTankLiters(liters, useSlider ? maxLiters : undefined)
+      const str =
+        Number.isInteger(clamped) ? String(clamped) : String(Number(clamped.toFixed(1)))
+      onChange(str)
+    },
+    [onChange, maxLiters, useSlider]
+  )
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value)
+  }
+
+  const handleNumberBlur = () => {
+    if (!useSlider) return
+    emitValue(parseInputLiters(value))
+  }
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    emitValue(Number(e.target.value))
+  }
+
+  const numericValue = parseInputLiters(value)
+  const sliderValue = useSlider ? clampTankLiters(numericValue, maxLiters) : 0
+
+  return (
+    <div className="input-group tank-liter-input">
+      <label htmlFor={id} title={titleTooltip}>{label}</label>
+      {useSlider && (
+        <>
+          <input
+            type="range"
+            className="tank-liter-slider"
+            min={0}
+            max={maxLiters}
+            step={1}
+            value={sliderValue}
+            onChange={handleSliderChange}
+            disabled={disabled}
+            title={titleTooltip}
+            aria-valuemin={0}
+            aria-valuemax={maxLiters}
+            aria-valuenow={sliderValue}
+            aria-label={label}
+          />
+          <div className="tank-liter-slider-hint" aria-hidden="true">
+            {t('logs.tank_slider_of_max', {
+              current: sliderValue,
+              max: maxLiters
+            })}
+          </div>
+        </>
+      )}
+      <input
+        id={id}
+        type="number"
+        className="input-text"
+        value={value}
+        onChange={handleNumberChange}
+        onBlur={handleNumberBlur}
+        disabled={disabled}
+        min={0}
+        max={useSlider ? maxLiters : undefined}
+        step="any"
+        title={titleTooltip}
+      />
+    </div>
+  )
+}

client/src/components/UserProfilePage.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLiveQuery } from 'dexie-react-hooks'
+import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
 import {
   User,
   ChevronLeft,
@@ -28,6 +29,7 @@ import {
   CircleAlert
 } from 'lucide-react'
 import AccountDangerZone from './AccountDangerZone.tsx'
+import UserProfilePreferences from './UserProfilePreferences.tsx'
 import BetaBadge from './BetaBadge.tsx'
 import { useDialog } from './ModalDialog.tsx'
 import {
@@ -127,7 +129,12 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
   const [pendingRecoveryPhrase, setPendingRecoveryPhrase] = useState<string | null>(null)
   const [recoveryCopied, setRecoveryCopied] = useState(false)
 
-  const pendingSyncCount = useLiveQuery(() => db.syncQueue.count()) ?? 0
+  const {
+    pendingCount: pendingSyncCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName
+  } = useSyncIndicator()
 
   const sharedLogbookCount = useLiveQuery(
     () => db.logbooks.filter((lb) => lb.isShared === 1).count(),
@@ -436,6 +443,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
           </section>
         ) : profile ? (
           <>
+            <div data-tour="profile-preferences">
             <section className="form-card">
               <div className="form-header">
                 <User size={24} className="form-icon" />
@@ -476,6 +484,9 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
               </dl>
             </section>
 
+            <UserProfilePreferences userId={profile.userId} />
+            </div>
+
             <section className="member-editor-card glass">
               <div className="profile-section-header">
                 <Shield size={20} />
@@ -524,11 +535,16 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
                 <h3>{t('profile.device_title')}</h3>
               </div>
               <p className="profile-section-desc">{t('profile.device_desc')}</p>
-              <div className={`profile-device-status conn-status ${online ? (pendingSyncCount > 0 ? 'warning' : 'online') : 'offline'}`}>
+              <div className={`profile-device-status ${connStatusClassName(online)}`}>
                 {online ? (
-                  pendingSyncCount > 0 ? (
+                  showSpinner ? (
                     <>
                       <RefreshCw size={16} className="spin" aria-hidden="true" />
+                      <span>{t('sync.status_syncing')}</span>
+                    </>
+                  ) : showPendingWarning ? (
+                    <>
+                      <RefreshCw size={16} aria-hidden="true" />
                       <span>{t('profile.device_sync_pending', { count: pendingSyncCount })}</span>
                     </>
                   ) : (

client/src/components/UserProfilePreferences.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Compass, Palette, Save, Check, Cloud } from 'lucide-react'
+import ThemedSelect from './ThemedSelect.tsx'
+import PushNotificationSettings from './PushNotificationSettings.tsx'
+import PwaInstallPrompt from './PwaInstallPrompt.tsx'
+import { notifyAppearanceChanged } from '../services/appearance.js'
+import { useAppTour } from '../context/AppTourContext.tsx'
+import {
+  getColorSchemePreference,
+  getOwmApiKey,
+  getThemePreference,
+  setColorSchemePreference,
+  setOwmApiKey,
+  setThemePreference
+} from '../services/userPreferences.js'
+
+interface UserProfilePreferencesProps {
+  userId: string
+}
+
+export default function UserProfilePreferences({ userId }: UserProfilePreferencesProps) {
+  const { t } = useTranslation()
+  const { restartTour } = useAppTour()
+  const [apiKey, setApiKey] = useState(() => getOwmApiKey(userId))
+  const [theme, setTheme] = useState(() => getThemePreference(userId))
+  const [colorScheme, setColorScheme] = useState(() => getColorSchemePreference(userId))
+  const [savingOwm, setSavingOwm] = useState(false)
+  const [owmSaved, setOwmSaved] = useState(false)
+
+  const persistAppearance = (nextTheme: string, nextColorScheme: string) => {
+    setThemePreference(userId, nextTheme)
+    setColorSchemePreference(userId, nextColorScheme)
+    notifyAppearanceChanged()
+  }
+
+  const handleThemeChange = (nextTheme: string) => {
+    setTheme(nextTheme)
+    persistAppearance(nextTheme, colorScheme)
+  }
+
+  const handleColorSchemeChange = (nextColorScheme: string) => {
+    setColorScheme(nextColorScheme)
+    persistAppearance(theme, nextColorScheme)
+  }
+
+  const handleSaveOwm = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSavingOwm(true)
+    setOwmSaved(false)
+    setOwmApiKey(userId, apiKey)
+    setSavingOwm(false)
+    setOwmSaved(true)
+    window.setTimeout(() => setOwmSaved(false), 3000)
+  }
+
+  return (
+    <>
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Palette size={20} />
+          <h3>{t('profile.appearance_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.appearance_desc')}</p>
+
+        <div className="input-group">
+          <label htmlFor="profile-app-theme" className="profile-field-label">
+            {t('profile.theme_label')}
+          </label>
+          <ThemedSelect
+            id="profile-app-theme"
+            value={theme}
+            onChange={handleThemeChange}
+            options={[
+              { value: 'auto', label: t('profile.theme_auto') },
+              { value: 'ocean', label: t('profile.theme_ocean') },
+              { value: 'material', label: t('profile.theme_material') },
+              { value: 'cupertino', label: t('profile.theme_cupertino') }
+            ]}
+          />
+        </div>
+
+        <div className="input-group mt-4">
+          <label htmlFor="profile-color-scheme" className="profile-field-label">
+            {t('profile.color_scheme_label')}
+          </label>
+          <ThemedSelect
+            id="profile-color-scheme"
+            value={colorScheme}
+            onChange={handleColorSchemeChange}
+            options={[
+              { value: 'auto', label: t('profile.color_scheme_auto') },
+              { value: 'light', label: t('profile.color_scheme_light') },
+              { value: 'dark', label: t('profile.color_scheme_dark') }
+            ]}
+          />
+        </div>
+      </section>
+
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Compass size={20} />
+          <h3>{t('profile.tour_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.tour_desc')}</p>
+        <div className="form-actions">
+          <button type="button" className="btn secondary" onClick={() => restartTour()}>
+            {t('profile.tour_restart')}
+          </button>
+        </div>
+      </section>
+
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Cloud size={20} />
+          <h3>{t('profile.integrations_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.owm_help')}</p>
+        <form onSubmit={handleSaveOwm}>
+          <div className="input-group">
+            <label htmlFor="profile-owm-api-key" className="profile-field-label">
+              {t('profile.owm_key')}
+            </label>
+            <input
+              id="profile-owm-api-key"
+              name="owm-api-key"
+              type="password"
+              className="input-text"
+              placeholder="e.g. 8b6a7f...d8"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              disabled={savingOwm}
+              autoComplete="off"
+            />
+          </div>
+          <div className="form-actions mt-4">
+            {owmSaved && (
+              <div className="success-toast">
+                <Check size={16} />
+                <span>{t('profile.prefs_saved')}</span>
+              </div>
+            )}
+            <button type="submit" className="btn primary" disabled={savingOwm}>
+              <Save size={18} />
+              {savingOwm ? t('profile.prefs_saving') : t('profile.prefs_save')}
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <PushNotificationSettings />
+      <PwaInstallPrompt variant="inline" />
+    </>
+  )
+}

client/src/components/VesselForm.tsx

@@ -7,6 +7,7 @@ import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { Ship, Save, Check, Plus, X, Camera, Trash2 } from 'lucide-react'
+import { parseOptionalTankLiters, tankCapacityInputFromStored } from '../utils/tankCapacity.js'
 
 interface VesselFormProps {
   logbookId: string
@@ -47,6 +48,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
   const [mmsi, setMmsi] = useState('')
   const [sails, setSails] = useState<string[]>([])
   const [newSailName, setNewSailName] = useState('')
+  const [freshwaterCapacityL, setFreshwaterCapacityL] = useState('')
+  const [fuelCapacityL, setFuelCapacityL] = useState('')
+  const [greywaterCapacityL, setGreywaterCapacityL] = useState('')
 
   const fileInputRef = React.useRef<HTMLInputElement>(null)
   const [photo, setPhoto] = useState<string | null>(null)
@@ -78,6 +82,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
           setMmsi(preloadedData.mmsi || '')
           setSails(preloadedData.sails || [])
           setPhoto(preloadedData.photo || null)
+          setFreshwaterCapacityL(tankCapacityInputFromStored(preloadedData.freshwaterCapacityL))
+          setFuelCapacityL(tankCapacityInputFromStored(preloadedData.fuelCapacityL))
+          setGreywaterCapacityL(tankCapacityInputFromStored(preloadedData.greywaterCapacityL))
           return
         }
 
@@ -103,6 +110,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
             setMmsi(decrypted.mmsi || '')
             setSails(decrypted.sails || [])
             setPhoto(decrypted.photo || null)
+            setFreshwaterCapacityL(tankCapacityInputFromStored(decrypted.freshwaterCapacityL))
+            setFuelCapacityL(tankCapacityInputFromStored(decrypted.fuelCapacityL))
+            setGreywaterCapacityL(tankCapacityInputFromStored(decrypted.greywaterCapacityL))
           }
         }
       } catch (err: any) {
@@ -201,12 +211,19 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
       let parsedLengthM: number | undefined
       let parsedDraftM: number | undefined
       let parsedAirDraftM: number | undefined
+      let parsedFreshwaterCapacityL: number | undefined
+      let parsedFuelCapacityL: number | undefined
+      let parsedGreywaterCapacityL: number | undefined
       try {
         parsedLengthM = parseOptionalMetricMeters(lengthM)
         parsedDraftM = parseOptionalMetricMeters(draftM)
         parsedAirDraftM = parseOptionalMetricMeters(airDraftM)
-      } catch {
-        setError(t('vessel.invalid_metric'))
+        parsedFreshwaterCapacityL = parseOptionalTankLiters(freshwaterCapacityL)
+        parsedFuelCapacityL = parseOptionalTankLiters(fuelCapacityL)
+        parsedGreywaterCapacityL = parseOptionalTankLiters(greywaterCapacityL)
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : ''
+        setError(msg === 'invalid_tank_liters' ? t('vessel.invalid_tank_liters') : t('vessel.invalid_metric'))
         setSaving(false)
         return
       }
@@ -217,6 +234,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
         lengthM: parsedLengthM,
         draftM: parsedDraftM,
         airDraftM: parsedAirDraftM,
+        freshwaterCapacityL: parsedFreshwaterCapacityL,
+        fuelCapacityL: parsedFuelCapacityL,
+        greywaterCapacityL: parsedGreywaterCapacityL,
         homePort: homePort.trim(),
         charterCompany: charterCompany.trim(),
         owner: owner.trim(),
@@ -480,6 +500,49 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
             />
           </div>
 
+          <div className="vessel-tanks-section">
+            <h3>{t('vessel.tanks_section')}</h3>
+            <p className="vessel-tanks-help">{t('vessel.tanks_help')}</p>
+            <div className="vessel-tanks-grid">
+              <div className="input-group">
+                <label>{t('vessel.freshwater_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={freshwaterCapacityL}
+                  onChange={(e) => setFreshwaterCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+              <div className="input-group">
+                <label>{t('vessel.fuel_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={fuelCapacityL}
+                  onChange={(e) => setFuelCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+              <div className="input-group">
+                <label>{t('vessel.greywater_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={greywaterCapacityL}
+                  onChange={(e) => setGreywaterCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+            </div>
+          </div>
+
           <div className="sails-section">
             <h3>{t('vessel.sails_list')}</h3>
             <p className="help-text">{t('vessel.sails_help')}</p>

client/src/context/AppTourContext.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import {
+  DEMO_EXCLUDED_STEPS,
+  DEMO_STEP_ORDER,
+  FULL_STEP_ORDER,
+  getTourScrollRetryDelays,
+  getTourTargetRetryDelay,
+  tourStepOpensEntry
+} from './AppTourContext.tsx'
+
+describe('AppTourContext step order', () => {
+  it('includes profile steps before finish in full tour', () => {
+    const profileIndex = FULL_STEP_ORDER.indexOf('nav_profile')
+    const prefsIndex = FULL_STEP_ORDER.indexOf('profile_preferences')
+    const finishIndex = FULL_STEP_ORDER.indexOf('finish')
+
+    expect(profileIndex).toBeGreaterThan(FULL_STEP_ORDER.indexOf('nav_feedback'))
+    expect(prefsIndex).toBe(profileIndex + 1)
+    expect(finishIndex).toBe(prefsIndex + 1)
+    expect(FULL_STEP_ORDER).toHaveLength(12)
+  })
+
+  it('excludes profile, stats and feedback from demo tour', () => {
+    for (const step of DEMO_EXCLUDED_STEPS) {
+      expect(DEMO_STEP_ORDER).not.toContain(step)
+    }
+    expect(DEMO_STEP_ORDER).toContain('finish')
+    expect(DEMO_STEP_ORDER).toHaveLength(FULL_STEP_ORDER.length - DEMO_EXCLUDED_STEPS.length)
+  })
+
+  it('only opens entry editor on entry_track step', () => {
+    expect(tourStepOpensEntry('entry_open')).toBe(false)
+    expect(tourStepOpensEntry('entry_list')).toBe(false)
+    expect(tourStepOpensEntry('entry_track')).toBe(true)
+  })
+
+  it('retries scroll for entry_track while editor mounts', () => {
+    expect(getTourTargetRetryDelay('entry_track')).toBeGreaterThanOrEqual(400)
+    expect(getTourScrollRetryDelays('entry_track').length).toBeGreaterThan(1)
+  })
+})

client/src/context/AppTourContext.tsx

@@ -29,12 +29,17 @@ export type TourStepId =
   | 'nav_crew'
   | 'nav_stats'
   | 'nav_feedback'
+  | 'nav_profile'
+  | 'profile_preferences'
   | 'finish'
 
 interface TourNavigation {
   setActiveTab: (tab: AppTab) => void
   setSelectedEntryId: (entryId: string | null) => void
   setFeedbackOpen: (open: boolean) => void
+  setLogbookActive: (active: boolean) => void
+  setProfileOpen: (open: boolean) => void
+  ensureLogbookForTour?: () => Promise<void>
 }
 
 interface DemoTourContext {
@@ -47,6 +52,7 @@ interface AppTourContextValue {
   currentStepId: TourStepId | null
   currentStepIndex: number
   totalSteps: number
+  layoutTick: number
   startTour: (options?: { force?: boolean; demoMode?: boolean }) => void
   stopTour: () => void
   restartTour: () => void
@@ -58,7 +64,7 @@ interface AppTourContextValue {
   requestStartAfterLogin: () => void
 }
 
-const FULL_STEP_ORDER: TourStepId[] = [
+export const FULL_STEP_ORDER: TourStepId[] = [
   'welcome',
   'nav_logs',
   'entry_list',
@@ -68,12 +74,33 @@ const FULL_STEP_ORDER: TourStepId[] = [
   'nav_crew',
   'nav_stats',
   'nav_feedback',
+  'nav_profile',
+  'profile_preferences',
   'finish'
 ]
 
-/** Public demo has no stats/feedback UI — skip those steps. */
-const DEMO_EXCLUDED_STEPS: TourStepId[] = ['nav_stats', 'nav_feedback']
-const DEMO_STEP_ORDER: TourStepId[] = FULL_STEP_ORDER.filter((id) => !DEMO_EXCLUDED_STEPS.includes(id))
+/** Public demo has no stats/feedback/profile UI — skip those steps. */
+export const DEMO_EXCLUDED_STEPS: TourStepId[] = [
+  'nav_stats',
+  'nav_feedback',
+  'nav_profile',
+  'profile_preferences'
+]
+
+export const DEMO_STEP_ORDER: TourStepId[] = FULL_STEP_ORDER.filter(
+  (id) => !DEMO_EXCLUDED_STEPS.includes(id)
+)
+
+const LOGBOOK_TOUR_STEPS = new Set<TourStepId>([
+  'nav_logs',
+  'entry_list',
+  'entry_open',
+  'entry_track',
+  'nav_vessel',
+  'nav_crew',
+  'nav_stats',
+  'nav_feedback'
+])
 
 function getStepOrder(demoMode: boolean): TourStepId[] {
   return demoMode ? DEMO_STEP_ORDER : FULL_STEP_ORDER
@@ -87,7 +114,28 @@ const TARGET_BY_STEP: Partial<Record<TourStepId, string>> = {
   nav_vessel: '[data-tour="nav-vessel"]',
   nav_crew: '[data-tour="nav-crew"]',
   nav_stats: '[data-tour="stats-dashboard"]',
-  nav_feedback: '[data-tour="feedback-form"]'
+  nav_feedback: '[data-tour="feedback-form"]',
+  nav_profile: '[data-tour="nav-profile"]',
+  profile_preferences: '[data-tour="profile-preferences"]'
+}
+
+/** Whether a tour step opens the first log entry editor (not the list card). */
+export function tourStepOpensEntry(stepId: TourStepId): boolean {
+  return stepId === 'entry_track'
+}
+
+export function getTourTargetDelay(stepId: TourStepId): number {
+  if (stepId === 'entry_track') return 400
+  if (stepId === 'nav_feedback') return 180
+  if (stepId === 'nav_profile' || stepId === 'profile_preferences') return 250
+  return 0
+}
+
+/** Extra scroll attempts while async UI (e.g. entry editor) mounts. */
+export function getTourScrollRetryDelays(stepId: TourStepId): number[] {
+  if (stepId === 'entry_track') return [400, 700, 1100, 1600]
+  const initial = getTourTargetDelay(stepId)
+  return initial > 0 ? [initial] : [0]
 }
 
 const AppTourContext = createContext<AppTourContextValue | null>(null)
@@ -97,6 +145,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
   const [stepIndex, setStepIndex] = useState(0)
   const [pendingAfterLogin, setPendingAfterLogin] = useState(false)
   const [isDemoTour, setIsDemoTour] = useState(false)
+  const [layoutTick, setLayoutTick] = useState(0)
   const navigationRef = useRef<TourNavigation | null>(null)
   const demoContextRef = useRef<DemoTourContext | null>(null)
   const tourModeRef = useRef<{ demoMode: boolean }>({ demoMode: false })
@@ -112,13 +161,24 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
     const nav = navigationRef.current
     if (!nav) return
 
+    if (LOGBOOK_TOUR_STEPS.has(stepId)) {
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(true)
+    }
+
     if (stepId === 'nav_logs' || stepId === 'entry_list' || stepId === 'entry_open' || stepId === 'entry_track') {
       nav.setActiveTab('logs')
     }
-    if (stepId === 'entry_open' || stepId === 'entry_track') {
+
+    if (stepId === 'entry_list' || stepId === 'entry_open') {
+      nav.setSelectedEntryId(null)
+    } else if (tourStepOpensEntry(stepId)) {
       const firstEntryId = resolveFirstEntryId()
       if (firstEntryId) nav.setSelectedEntryId(firstEntryId)
+    } else if (LOGBOOK_TOUR_STEPS.has(stepId)) {
+      nav.setSelectedEntryId(null)
     }
+
     if (stepId === 'nav_vessel') {
       nav.setSelectedEntryId(null)
       nav.setActiveTab('vessel')
@@ -137,19 +197,34 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
     } else {
       nav.setFeedbackOpen(false)
     }
+
+    if (stepId === 'nav_profile') {
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(false)
+    }
+    if (stepId === 'profile_preferences') {
+      nav.setLogbookActive(false)
+      nav.setProfileOpen(true)
+    }
   }, [resolveFirstEntryId])
 
   const scrollToCurrentTarget = useCallback((stepId: TourStepId | null) => {
     if (!stepId) return
     const selector = TARGET_BY_STEP[stepId]
     if (!selector) return
-    const delayMs = stepId === 'nav_feedback' ? 180 : 0
-    window.setTimeout(() => {
-      window.requestAnimationFrame(() => {
-        const el = document.querySelector(selector)
-        el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
-      })
-    }, delayMs)
+
+    for (const delayMs of getTourScrollRetryDelays(stepId)) {
+      window.setTimeout(() => {
+        window.requestAnimationFrame(() => {
+          const el = document.querySelector(selector)
+          el?.scrollIntoView({
+            behavior: stepId === 'entry_track' ? 'instant' : 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          })
+        })
+      }, delayMs)
+    }
   }, [])
 
   const startTour = useCallback((options?: { force?: boolean; demoMode?: boolean }) => {
@@ -173,6 +248,8 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
       trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_COMPLETED, tourProps)
       const nav = navigationRef.current
       if (nav && !tourModeRef.current.demoMode) {
+        nav.setProfileOpen(false)
+        nav.setLogbookActive(true)
         nav.setSelectedEntryId(null)
         nav.setActiveTab('stats')
       }
@@ -183,6 +260,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
 
     tourModeRef.current = { demoMode: false }
     navigationRef.current?.setFeedbackOpen(false)
+    navigationRef.current?.setProfileOpen(false)
     setIsDemoTour(false)
     setIsActive(false)
     setStepIndex(0)
@@ -213,8 +291,25 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
     if (!isActive) return
     const stepId = getStepOrder(isDemoTour)[stepIndex]
     if (!stepId) return
-    applyStepSideEffects(stepId)
-    scrollToCurrentTarget(stepId)
+
+    let cancelled = false
+    const run = async () => {
+      if (LOGBOOK_TOUR_STEPS.has(stepId) && !isDemoTour) {
+        await navigationRef.current?.ensureLogbookForTour?.()
+      }
+      if (cancelled) return
+      applyStepSideEffects(stepId)
+      scrollToCurrentTarget(stepId)
+      setLayoutTick((tick) => tick + 1)
+      window.setTimeout(() => {
+        if (!cancelled) setLayoutTick((tick) => tick + 1)
+      }, 150)
+    }
+    void run()
+
+    return () => {
+      cancelled = true
+    }
   }, [isActive, isDemoTour, stepIndex, applyStepSideEffects, scrollToCurrentTarget])
 
   const restartTour = useCallback(() => {
@@ -257,6 +352,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
       currentStepId,
       currentStepIndex: stepIndex,
       totalSteps: stepOrder.length,
+      layoutTick,
       startTour,
       stopTour,
       restartTour,
@@ -281,6 +377,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
       startTour,
       stepIndex,
       stepOrder.length,
+      layoutTick,
       stopTour
     ]
   )
@@ -321,3 +418,10 @@ export function getTourTargetSelector(stepId: TourStepId | null): string | null
 export function isCenteredTourStep(stepId: TourStepId | null): boolean {
   return stepId === 'welcome' || stepId === 'finish'
 }
+
+export function getTourTargetRetryDelay(stepId: TourStepId | null): number {
+  if (stepId === 'entry_track') return 400
+  if (stepId === 'profile_preferences') return 300
+  if (stepId === 'nav_profile') return 200
+  return 120
+}

client/src/hooks/usePwaUpdate.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react'
 import { useRegisterSW } from 'virtual:pwa-register/react'
+import { markReloadAttempt, recentlyAttemptedReload } from '../services/pwaStartup.js'
 
 const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000
 const UPDATE_SUPPRESS_KEY = 'pwa_update_suppress_until'
@@ -41,6 +42,13 @@ function scheduleUpdateChecks(registration: ServiceWorkerRegistration): () => vo
   }
 }
 
+function reloadForServiceWorkerTakeover(): void {
+  if (recentlyAttemptedReload()) return
+  markReloadAttempt()
+  clearUpdateSuppression()
+  window.location.reload()
+}
+
 export function usePwaUpdate() {
   const cleanupRef = useRef<(() => void) | null>(null)
 
@@ -48,11 +56,9 @@ export function usePwaUpdate() {
     needRefresh: [needRefresh, setNeedRefresh],
     updateServiceWorker
   } = useRegisterSW({
-    immediate: true,
+    immediate: !import.meta.env.DEV,
     onNeedReload() {
-      clearUpdateSuppression()
-      setNeedRefresh(false)
-      window.location.reload()
+      reloadForServiceWorkerTakeover()
     },
     onNeedRefresh() {
       if (isUpdateSuppressed()) return
@@ -89,7 +95,7 @@ export function usePwaUpdate() {
 
     // vite-plugin-pwa reloads via the "controlling" event; fallback if that does not fire.
     window.setTimeout(() => {
-      window.location.reload()
+      reloadForServiceWorkerTakeover()
     }, UPDATE_RELOAD_FALLBACK_MS)
   }
 

client/src/hooks/useSyncIndicator.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { db } from '../services/db.js'
+import { subscribeToSyncState } from '../services/sync.js'
+
+export type SyncConnStatusVariant = 'offline' | 'syncing' | 'pending' | 'online'
+
+/** Maps sync/online state to conn-status CSS modifier classes. */
+export function syncConnStatusClassName(
+  online: boolean,
+  showSpinner: boolean,
+  pendingCount: number
+): string {
+  if (!online) return 'conn-status offline'
+  if (showSpinner) return 'conn-status syncing'
+  if (pendingCount > 0) return 'conn-status warning'
+  return 'conn-status online'
+}
+
+/** Sync queue depth and whether a sync pass is running (for header indicators). */
+export function useSyncIndicator(logbookId?: string | null) {
+  const [isSyncing, setIsSyncing] = useState(false)
+
+  const pendingCount =
+    useLiveQuery(
+      () =>
+        logbookId
+          ? db.syncQueue.where({ logbookId }).count()
+          : db.syncQueue.count(),
+      [logbookId]
+    ) ?? 0
+
+  useEffect(() => {
+    return subscribeToSyncState(setIsSyncing)
+  }, [])
+
+  const showSpinner = isSyncing
+  const showPendingWarning = pendingCount > 0 && !isSyncing
+
+  return {
+    isSyncing,
+    pendingCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName: (online: boolean) =>
+      syncConnStatusClassName(online, showSpinner, pendingCount)
+  }
+}

client/src/i18n/courseDialKeys.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import deJson from './locales/de.json'
+import enJson from './locales/en.json'
+
+const resources = {
+  de: { translation: deJson.translation },
+  en: { translation: enJson.translation }
+}
+
+describe('course dial i18n keys', () => {
+  it.each([
+    'logs.event_course_section',
+    'logs.course_tab_mgk',
+    'logs.course_tab_rwk',
+    'logs.course_dial_hint',
+    'logs.course_step_fine',
+    'logs.wind_mode_cardinal'
+  ])('resolves %s in de and en bundles', async (key) => {
+    const { default: i18n } = await import('i18next')
+    await i18n.init({ lng: 'de', resources, defaultNS: 'translation' })
+    expect(i18n.t(key)).not.toBe(key)
+    await i18n.changeLanguage('en')
+    expect(i18n.t(key)).not.toBe(key)
+  })
+})

client/src/i18n/index.ts

@@ -1,19 +1,26 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
-import enTranslation from './locales/en.json'
-import deTranslation from './locales/de.json'
+import enJson from './locales/en.json'
+import deJson from './locales/de.json'
 import { initSeo } from '../utils/seo.js'
 
+/** JSON files wrap strings in `translation` — register that namespace explicitly. */
+const resources = {
+  en: { translation: enJson.translation },
+  de: { translation: deJson.translation }
+}
+
 i18n
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    resources: {
-      en: enTranslation,
-      de: deTranslation
-    },
+    resources,
+    defaultNS: 'translation',
     fallbackLng: 'en',
+    supportedLngs: ['de', 'en'],
+    nonExplicitSupportedLngs: true,
+    load: 'languageOnly',
     interpolation: {
       escapeValue: false // React already escapes values (prevents XSS)
     },

client/src/i18n/locales/de.json

@@ -23,7 +23,7 @@
     },
     "auth": {
       "welcome": "Willkommen bei Kapteins Daagbok",
-      "tagline": "Sicheres, E2E-verschlüsseltes maritimes Logbuch.",
+      "tagline": "Dein sicheres, E2E-verschlüsseltes maritimes Logbuch.",
       "register": "Mit Passkey registrieren",
       "login": "Mit Passkey anmelden",
       "login_as": "Anmelden als {{name}}",
@@ -84,6 +84,7 @@
     },
     "sync": {
       "status_synced": "Synchronisiert",
+      "status_syncing": "Synchronisiere…",
       "status_offline": "Offline-Cache",
       "status_unsynced": "Unsynchronisierte Änderungen"
     },
@@ -116,7 +117,13 @@
       "no_sails": "Keine Segel hinterlegt.",
       "photo_add": "Foto hinzufügen",
       "photo_change": "Foto ändern",
-      "photo_delete": "Foto löschen"
+      "photo_delete": "Foto löschen",
+      "tanks_section": "Tanks (Fassungsvermögen)",
+      "tanks_help": "Optional in Liter — ermöglicht Slider im Journal bei bekannten Tankgrößen.",
+      "freshwater_capacity_l": "Trinkwasser (Liter)",
+      "fuel_capacity_l": "Treibstoff (Liter)",
+      "greywater_capacity_l": "Grauwasser (Liter)",
+      "invalid_tank_liters": "Ungültiger Zahlenwert — bitte Liter als Zahl eingeben (z. B. 200)."
     },
     "logs": {
       "title": "Logbuch-Journal",
@@ -137,6 +144,10 @@
       "route": "Reise von/nach",
       "freshwater": "Frischwasser (Liter)",
       "fuel": "Treibstoff / Fuel (Liter)",
+      "greywater": "Grauwasser (Liter)",
+      "greywater_level": "Füllstand",
+      "tank_slider_of_max": "{{current}} / {{max}} L",
+      "tank_capacity_tooltip": "Wenn in den Schiffsdaten die Tank-Fassungsvermögen (Liter) hinterlegt sind, kannst du Füllstände hier per Slider eingeben.",
       "morning": "Stand morgens",
       "refilled": "Nachgefüllt",
       "evening": "Stand abends",
@@ -182,7 +193,7 @@
       "delete_entry": "Tag löschen",
       "delete_confirm": "Bist du sicher, dass du diesen Reisetag unwiderruflich löschen möchtest?",
       "carry_over_tanks_title": "Daten vom Vortag übernehmen?",
-      "carry_over_tanks_confirm": "Start-Hafen, Frischwasser- und Kraftstoff-Morgenstände vom letzten Reisetag übernehmen?\n\nStart-Hafen: {{departure}}\nFrischwasser: {{fw}} L\nKraftstoff: {{fuel}} L",
+      "carry_over_tanks_confirm": "Start-Hafen, Frischwasser-, Kraftstoff- und Grauwasser-Startstände vom letzten Reisetag übernehmen?\n\nStart-Hafen: {{departure}}\nFrischwasser: {{fw}} L\nKraftstoff: {{fuel}} L\nGrauwasser: {{greywater}} L",
       "carry_over_tanks_yes": "Übernehmen",
       "carry_over_tanks_no": "Mit 0 starten",
       "event_title": "Chronologisches Ereignisprotokoll",
@@ -190,6 +201,23 @@
       "event_time": "Uhrzeit",
       "event_mgk": "MgK Kurs",
       "event_rwk": "RwK Kurs",
+      "event_course_section": "Kurs",
+      "course_dial_hint": "Am Ring drehen oder Grad eingeben",
+      "course_dial_step_label": "Schrittweite",
+      "course_step_fine": "1°",
+      "course_step_medium": "5°",
+      "course_step_coarse": "10°",
+      "course_tab_mgk": "MgK",
+      "course_tab_rwk": "rwK",
+      "course_invalid": "Ungültiger Kurs (0–360)",
+      "course_placeholder_degrees": "z. B. 180",
+      "course_placeholder_cardinal": "z. B. NW",
+      "compass_n": "N",
+      "compass_e": "O",
+      "compass_s": "S",
+      "compass_w": "W",
+      "wind_mode_cardinal": "Kardinal",
+      "wind_mode_degrees": "Als Grad",
       "event_wind_direction": "Wind-Richtung",
       "event_wind_strength": "Windstärke",
       "event_sea_state": "Seegang",
@@ -205,6 +233,8 @@
       "event_heel": "Krängung (°)",
       "event_sails": "Segelführung / Motor",
       "motor_propulsion": "Maschinenfahrt",
+      "sails_picker_show_more": "Alle Segel anzeigen",
+      "sails_picker_show_less": "Weniger anzeigen",
       "motor_hours": "Maschinenstunden (gesamt)",
       "fuel_per_motor_hour": "Verbrauch pro Maschinenstunde",
       "event_distance": "Distanz (sm)",
@@ -363,7 +393,35 @@
       "stats_subtitle": "Über alle deine Logbücher auf diesem Gerät",
       "stats_logbooks": "Logbücher",
       "stats_account_since": "Konto seit",
-      "stats_shared_logbooks": "Geteilte Logbücher"
+      "stats_shared_logbooks": "Geteilte Logbücher",
+      "appearance_title": "App & Darstellung",
+      "appearance_desc": "Design und Farbschema gelten für die gesamte App auf diesem Gerät.",
+      "theme_label": "Design-Stil der App",
+      "theme_auto": "Automatisch (OS-Erkennung)",
+      "theme_ocean": "Ocean (Glassmorphismus)",
+      "theme_material": "Material (Android)",
+      "theme_cupertino": "Cupertino (iOS)",
+      "color_scheme_label": "Hell- oder Dunkelmodus",
+      "color_scheme_auto": "Automatisch (System)",
+      "color_scheme_light": "Hell",
+      "color_scheme_dark": "Dunkel",
+      "integrations_title": "Integrationen",
+      "owm_key": "OpenWeatherMap API-Schlüssel",
+      "owm_help": "Optional: eigener OpenWeatherMap-API-Schlüssel. Ohne Eintrag wird der serverseitige Schlüssel aus der Betreiber-Konfiguration verwendet.",
+      "prefs_save": "Speichern",
+      "prefs_saving": "Wird gespeichert…",
+      "prefs_saved": "Gespeichert",
+      "tour_title": "App-Tour",
+      "tour_desc": "Lass dich erneut durch die wichtigsten Bereiche der App führen.",
+      "tour_restart": "Tour erneut starten",
+      "push_title": "Push-Benachrichtigungen",
+      "push_desc": "Als Logbuch-Eigner wirst du benachrichtigt, wenn eingeladene Crewmitglieder Änderungen synchronisieren. Es werden keine Inhalte im Klartext übermittelt.",
+      "push_enable": "Bei Crew-Änderungen benachrichtigen",
+      "push_active": "Push-Benachrichtigungen sind auf diesem Gerät aktiv.",
+      "push_unsupported": "Push-Benachrichtigungen werden in diesem Browser nicht unterstützt.",
+      "push_denied_hint": "Benachrichtigungen sind blockiert. Erlaube sie in den Browser- oder Geräteeinstellungen.",
+      "push_ios_install_hint": "Auf dem iPhone/iPad: App zum Home-Bildschirm hinzufügen (iOS 16.4+), um Push zu nutzen.",
+      "push_error": "Push-Benachrichtigungen konnten nicht aktiviert werden."
     },
     "crew": {
       "title": "Skipper- & Crew-Profile",
@@ -400,30 +458,14 @@
       "loading": "Kalibrierungstabelle wird geladen..."
     },
     "settings": {
-      "title": "Systemeinstellungen",
-      "subtitle": "Konfiguriere externe Integrationen und Anmeldedaten.",
-      "owm_title": "Wetter-Integration",
-      "owm_key": "OpenWeatherMap API-Schlüssel",
-      "save": "Konfiguration speichern",
-      "saving": "Wird gespeichert...",
-      "saved": "Einstellungen erfolgreich gespeichert!",
-      "key_help": "Optional: eigener OpenWeatherMap-API-Schlüssel. Ohne Eintrag wird der serverseitige Schlüssel aus der Betreiber-Konfiguration verwendet.",
-      "no_key": "Kein OpenWeatherMap-API-Schlüssel verfügbar. Hinterlege einen eigenen Schlüssel in den Einstellungen oder kontaktiere den Betreiber.",
+      "title": "Logbuch-Einstellungen",
+      "subtitle": "Teilen, Backup und Zusammenarbeit für dieses Logbuch.",
+      "select_logbook_hint": "Wähle ein Logbuch aus, um dessen Einstellungen zu bearbeiten.",
+      "no_key": "Kein OpenWeatherMap-API-Schlüssel verfügbar. Hinterlege einen eigenen Schlüssel im Benutzerprofil oder kontaktiere den Betreiber.",
       "weather_success": "Wetterdaten erfolgreich abgerufen!",
       "weather_error": "Wetterdatenabruf fehlgeschlagen. Überprüfe den API-Schlüssel und die Verbindung.",
       "weather_date_mismatch": "Wetterdaten können nur für den heutigen Tag ({{today}}) abgerufen werden. Dieser Logbucheintrag ist auf den {{date}} datiert.",
       "gps_error": "Bitte gib einen Ort an oder ermittle die GPS-Koordinaten.",
-      "theme_title": "Design-Anpassung",
-      "theme_label": "Design-Stil der App",
-      "theme_auto": "Automatisch (OS-Erkennung)",
-      "theme_ocean": "Ocean (Glassmorphismus)",
-      "theme_material": "Material (Android)",
-      "theme_cupertino": "Cupertino (iOS)",
-      "color_scheme_title": "Erscheinungsbild",
-      "color_scheme_label": "Hell- oder Dunkelmodus (Standard: Systemeinstellung)",
-      "color_scheme_auto": "Automatisch (System)",
-      "color_scheme_light": "Hell",
-      "color_scheme_dark": "Dunkel",
       "share_title": "Logbuch teilen (Schreibgeschützt)",
       "share_desc": "Aktiviere diese Option, um einen öffentlichen, schreibgeschützten Link zu erstellen. Jeder mit dem Link kann deine Reisen, Yacht-Profile und Besatzung ansehen. Die Verschlüsselungsschlüssel werden niemals an den Server übertragen (sie bleiben im Hash-Teil der URL).",
       "share_privacy_warning": "Empfehlung: Teile diesen Link nur privat (z. B. per E-Mail oder Messenger), nicht in sozialen Medien.",
@@ -440,17 +482,12 @@
       "delete_account_failed": "Konto konnte nicht gelöscht werden. Bitte versuche es erneut.",
       "delete_backup_hint": "Tipp: Erstelle vor dem Löschen Backups deiner Logbücher (.daagbok.json) in den Einstellungen jedes Logbuchs.",
       "deleting_account": "Konto wird gelöscht…",
-      "tour_title": "App-Tour",
-      "tour_desc": "Lass dich erneut durch die wichtigsten Bereiche der App führen.",
-      "tour_restart": "Tour erneut starten",
-      "push_title": "Push-Benachrichtigungen",
-      "push_desc": "Als Logbuch-Eigner wirst du benachrichtigt, wenn eingeladene Crewmitglieder Änderungen synchronisieren. Es werden keine Inhalte im Klartext übermittelt.",
-      "push_enable": "Bei Crew-Änderungen benachrichtigen",
-      "push_active": "Push-Benachrichtigungen sind auf diesem Gerät aktiv.",
-      "push_unsupported": "Push-Benachrichtigungen werden in diesem Browser nicht unterstützt.",
-      "push_denied_hint": "Benachrichtigungen sind blockiert. Erlaube sie in den Browser- oder Geräteeinstellungen.",
-      "push_ios_install_hint": "Auf dem iPhone/iPad: App zum Home-Bildschirm hinzufügen (iOS 16.4+), um Push zu nutzen.",
-      "push_error": "Push-Benachrichtigungen konnten nicht aktiviert werden.",
+      "invite_push_prompt_title": "Push-Benachrichtigungen aktivieren?",
+      "invite_push_prompt_message": "Sobald eingeladene Crewmitglieder Änderungen synchronisieren, kannst du per Push informiert werden. Es werden keine Logbuch-Inhalte im Klartext gesendet.",
+      "invite_push_prompt_ios_message": "Sobald Crewmitglieder Änderungen synchronisieren, kannst du per Push informiert werden. Auf dem iPhone/iPad: App zum Home-Bildschirm hinzufügen (iOS 16.4+), dann Push im Benutzerprofil aktivieren.",
+      "invite_push_prompt_enable": "Jetzt aktivieren",
+      "invite_push_prompt_later": "Später",
+      "invite_push_prompt_success": "Push-Benachrichtigungen sind auf diesem Gerät aktiv.",
       "backup_title": "Backup & Wiederherstellung",
       "backup_desc": "Vollständiges verschlüsseltes Backup dieses Logbuchs (Einträge, Fotos, GPS-Tracks, Crew, Schiff). Mit Backup-Passphrase geschützt — für Restore auf diesem oder einem neuen Account.",
       "backup_export_title": "Backup erstellen",
@@ -651,9 +688,17 @@
           "title": "Feedback senden",
           "body": "Über dieses Formular kannst du Fehler, Ideen oder allgemeines Feedback direkt an das Projektteam schicken – auch nach der Tour jederzeit über das Symbol oben rechts."
         },
+        "nav_profile": {
+          "title": "Dein Benutzerprofil",
+          "body": "Über den Skipper-Button oben erreichst du dein persönliches Profil – unabhängig vom aktuellen Logbuch."
+        },
+        "profile_preferences": {
+          "title": "Konto & Darstellung",
+          "body": "Hier verwaltest du deine Konto-Identität, Theme und Hell/Dunkel-Modus. Die App-Tour kannst du jederzeit erneut starten. Passkeys und Sicherheitseinstellungen findest du weiter unten im Profil."
+        },
         "finish": {
           "title": "Alles klar!",
-          "body": "Du landest gleich im Statistik-Dashboard. Die Tour kannst du jederzeit unter Einstellungen erneut starten. Gute Fahrt!"
+          "body": "Du landest gleich im Statistik-Dashboard. Die Tour kannst du jederzeit im Benutzerprofil erneut starten. Gute Fahrt!"
         }
       }
     },

client/src/i18n/locales/en.json

@@ -84,6 +84,7 @@
     },
     "sync": {
       "status_synced": "Synced",
+      "status_syncing": "Syncing…",
       "status_offline": "Offline Cache",
       "status_unsynced": "Unsynced changes"
     },
@@ -116,7 +117,13 @@
       "no_sails": "No sails defined.",
       "photo_add": "Add Photo",
       "photo_change": "Change Photo",
-      "photo_delete": "Delete Photo"
+      "photo_delete": "Delete Photo",
+      "tanks_section": "Tanks (capacity)",
+      "tanks_help": "Optional, in liters — enables sliders in the journal when tank sizes are known.",
+      "freshwater_capacity_l": "Freshwater (liters)",
+      "fuel_capacity_l": "Fuel (liters)",
+      "greywater_capacity_l": "Greywater (liters)",
+      "invalid_tank_liters": "Invalid number — please enter capacity in liters (e.g. 200)."
     },
     "logs": {
       "title": "Logbook Journal",
@@ -137,6 +144,10 @@
       "route": "Route / Journey",
       "freshwater": "Freshwater (Liters)",
       "fuel": "Fuel (Liters)",
+      "greywater": "Greywater (Liters)",
+      "greywater_level": "Fill level",
+      "tank_slider_of_max": "{{current}} / {{max}} L",
+      "tank_capacity_tooltip": "If tank capacities (liters) are set in vessel master data, you can enter fill levels here using sliders.",
       "morning": "Morning Level",
       "refilled": "Refilled",
       "evening": "Evening Level",
@@ -182,7 +193,7 @@
       "delete_entry": "Delete Day",
       "delete_confirm": "Are you sure you want to permanently delete this travel day?",
       "carry_over_tanks_title": "Carry over from previous day?",
-      "carry_over_tanks_confirm": "Use the previous travel day's destination as departure port and closing tank levels as morning levels?\n\nDeparture port: {{departure}}\nFreshwater: {{fw}} L\nFuel: {{fuel}} L",
+      "carry_over_tanks_confirm": "Use the previous travel day's destination as departure port and closing tank levels as morning levels?\n\nDeparture port: {{departure}}\nFreshwater: {{fw}} L\nFuel: {{fuel}} L\nGreywater: {{greywater}} L",
       "carry_over_tanks_yes": "Carry over",
       "carry_over_tanks_no": "Start at 0",
       "event_title": "Chronological Event Logbook",
@@ -190,6 +201,23 @@
       "event_time": "Time",
       "event_mgk": "MgK Course",
       "event_rwk": "RwK Course",
+      "event_course_section": "Course",
+      "course_dial_hint": "Drag the ring or enter degrees",
+      "course_dial_step_label": "Step size",
+      "course_step_fine": "1°",
+      "course_step_medium": "5°",
+      "course_step_coarse": "10°",
+      "course_tab_mgk": "MgK",
+      "course_tab_rwk": "rwK",
+      "course_invalid": "Invalid course (0–360)",
+      "course_placeholder_degrees": "e.g. 180",
+      "course_placeholder_cardinal": "e.g. NW",
+      "compass_n": "N",
+      "compass_e": "E",
+      "compass_s": "S",
+      "compass_w": "W",
+      "wind_mode_cardinal": "Cardinal",
+      "wind_mode_degrees": "As degrees",
       "event_wind_direction": "Wind Dir",
       "event_wind_strength": "Wind Str",
       "event_sea_state": "Sea State",
@@ -205,6 +233,8 @@
       "event_heel": "Heel Angle (°)",
       "event_sails": "Sails / Motor Status",
       "motor_propulsion": "Engine Propulsion",
+      "sails_picker_show_more": "Show all sails",
+      "sails_picker_show_less": "Show less",
       "motor_hours": "Engine hours (total)",
       "fuel_per_motor_hour": "Consumption per engine hour",
       "event_distance": "Distance (nm)",
@@ -363,7 +393,35 @@
       "stats_subtitle": "Across all your logbooks on this device",
       "stats_logbooks": "Logbooks",
       "stats_account_since": "Account since",
-      "stats_shared_logbooks": "Shared logbooks"
+      "stats_shared_logbooks": "Shared logbooks",
+      "appearance_title": "App & appearance",
+      "appearance_desc": "Theme and color scheme apply to the entire app on this device.",
+      "theme_label": "Application style / theme",
+      "theme_auto": "Auto (OS detect)",
+      "theme_ocean": "Ocean (glassmorphism)",
+      "theme_material": "Material (Android)",
+      "theme_cupertino": "Cupertino (iOS)",
+      "color_scheme_label": "Light or dark mode",
+      "color_scheme_auto": "Auto (system)",
+      "color_scheme_light": "Light",
+      "color_scheme_dark": "Dark",
+      "integrations_title": "Integrations",
+      "owm_key": "OpenWeatherMap API key",
+      "owm_help": "Optional: your own OpenWeatherMap API key. If left empty, the operator-configured server key is used.",
+      "prefs_save": "Save",
+      "prefs_saving": "Saving…",
+      "prefs_saved": "Saved",
+      "tour_title": "App tour",
+      "tour_desc": "Take a guided walkthrough of the main areas of the app again.",
+      "tour_restart": "Restart tour",
+      "push_title": "Push notifications",
+      "push_desc": "As logbook owner you are notified when invited crew members sync changes. No logbook content is sent in plain text.",
+      "push_enable": "Notify on crew changes",
+      "push_active": "Push notifications are active on this device.",
+      "push_unsupported": "Push notifications are not supported in this browser.",
+      "push_denied_hint": "Notifications are blocked. Allow them in your browser or device settings.",
+      "push_ios_install_hint": "On iPhone/iPad: add the app to your Home Screen (iOS 16.4+) to use push notifications.",
+      "push_error": "Could not enable push notifications."
     },
     "crew": {
       "title": "Skipper & Crew Profiles",
@@ -400,30 +458,14 @@
       "loading": "Loading calibration table..."
     },
     "settings": {
-      "title": "System Settings",
-      "subtitle": "Configure external integrations and client credentials.",
-      "owm_title": "Weather Integration",
-      "owm_key": "OpenWeatherMap API Key",
-      "save": "Save Configuration",
-      "saving": "Saving...",
-      "saved": "Settings saved successfully!",
-      "key_help": "Optional: your own OpenWeatherMap API key. If left empty, the operator-configured server key is used.",
-      "no_key": "No OpenWeatherMap API key available. Add your own key in settings or contact the operator.",
+      "title": "Logbook settings",
+      "subtitle": "Sharing, backup, and collaboration for this logbook.",
+      "select_logbook_hint": "Select a logbook to edit its settings.",
+      "no_key": "No OpenWeatherMap API key available. Add your own key in your user profile or contact the operator.",
       "weather_success": "Weather details fetched successfully!",
       "weather_error": "Failed to fetch weather. Check your API key and connection.",
       "weather_date_mismatch": "Weather data can only be fetched for today ({{today}}). This logbook entry is dated {{date}}.",
       "gps_error": "Please enter a location or fetch GPS coordinates first.",
-      "theme_title": "UI Customization",
-      "theme_label": "Application Style / Theme",
-      "theme_auto": "Auto (OS Detect)",
-      "theme_ocean": "Ocean (Glassmorphism)",
-      "theme_material": "Material (Android)",
-      "theme_cupertino": "Cupertino (iOS)",
-      "color_scheme_title": "Appearance",
-      "color_scheme_label": "Light or dark mode (default: follow system)",
-      "color_scheme_auto": "Auto (System)",
-      "color_scheme_light": "Light",
-      "color_scheme_dark": "Dark",
       "share_title": "Share Logbook (Read-Only)",
       "share_desc": "Enable this to generate a public, read-only link. Anyone with the link can view your travels, yacht profile, and crew members. Decryption keys are never transmitted to the server (they stay in the hash part of the URL).",
       "share_privacy_warning": "Recommendation: Share this link only privately (e.g. via email or messenger), not on social media.",
@@ -440,17 +482,12 @@
       "delete_account_failed": "Failed to delete account. Please try again.",
       "delete_backup_hint": "Tip: Before deleting, create backups of your logbooks (.daagbok.json) in each logbook's settings.",
       "deleting_account": "Deleting account…",
-      "tour_title": "App tour",
-      "tour_desc": "Take a guided walkthrough of the main areas of the app again.",
-      "tour_restart": "Restart tour",
-      "push_title": "Push notifications",
-      "push_desc": "As logbook owner you are notified when invited crew members sync changes. No logbook content is sent in plain text.",
-      "push_enable": "Notify on crew changes",
-      "push_active": "Push notifications are active on this device.",
-      "push_unsupported": "Push notifications are not supported in this browser.",
-      "push_denied_hint": "Notifications are blocked. Allow them in your browser or device settings.",
-      "push_ios_install_hint": "On iPhone/iPad: add the app to your Home Screen (iOS 16.4+) to use push notifications.",
-      "push_error": "Could not enable push notifications.",
+      "invite_push_prompt_title": "Enable push notifications?",
+      "invite_push_prompt_message": "When invited crew members sync changes, you can be notified via push. No logbook content is sent in plain text.",
+      "invite_push_prompt_ios_message": "When crew members sync changes, you can get push notifications. On iPhone/iPad: add the app to your Home Screen (iOS 16.4+), then enable push in your user profile.",
+      "invite_push_prompt_enable": "Enable now",
+      "invite_push_prompt_later": "Later",
+      "invite_push_prompt_success": "Push notifications are active on this device.",
       "backup_title": "Backup & restore",
       "backup_desc": "Full encrypted backup of this logbook (entries, photos, GPS tracks, crew, vessel). Protected with a backup passphrase — restore on this or a new account.",
       "backup_export_title": "Create backup",
@@ -651,9 +688,17 @@
           "title": "Send feedback",
           "body": "Use this form to report bugs, ideas, or general feedback to the project team — you can also open it anytime later via the icon in the top right."
         },
+        "nav_profile": {
+          "title": "Your user profile",
+          "body": "Tap the skipper button at the top to open your personal profile — independent of the current logbook."
+        },
+        "profile_preferences": {
+          "title": "Account & appearance",
+          "body": "Manage your account identity, theme, and light/dark mode here. You can restart the app tour anytime. Passkeys and security settings are further down on the profile page."
+        },
         "finish": {
           "title": "You're all set!",
-          "body": "You'll land on the statistics dashboard next. You can restart the tour anytime in Settings. Fair winds!"
+          "body": "You'll land on the statistics dashboard next. You can restart the tour anytime from your user profile. Fair winds!"
         }
       }
     },

client/src/index.css

@@ -100,12 +100,10 @@ code,
   font-family: var(--mono);
   display: inline-flex;
   border-radius: 4px;
-  color: var(--text-h);
 }
 
 code {
   font-size: 15px;
   line-height: 135%;
   padding: 4px 8px;
-  background: var(--code-bg);
 }

client/src/main.tsx

@@ -3,14 +3,68 @@ import { createRoot } from 'react-dom/client'
 import 'leaflet/dist/leaflet.css'
 import './themes.css'
 import './index.css'
-import App from './App.tsx'
 import './i18n'
+import App from './App.tsx'
 import { applyAppearanceToDocument } from './services/appearance.ts'
+import {
+  installStaleAssetRecovery,
+  markReloadAttempt,
+  reconcileServiceWorkerOnStartup
+} from './services/pwaStartup.ts'
 
-applyAppearanceToDocument()
+/** Stale PWA precache on localhost can shadow Vite dev modules. */
+async function clearDevServiceWorkerCaches(): Promise<void> {
+  if (!import.meta.env.DEV || !('serviceWorker' in navigator)) return
+  const regs = await navigator.serviceWorker.getRegistrations()
+  await Promise.all(regs.map((r) => r.unregister()))
+  if ('caches' in window) {
+    const keys = await caches.keys()
+    await Promise.all(keys.map((k) => caches.delete(k)))
+  }
+}
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+function renderBootstrapError(message: string): void {
+  const root = document.getElementById('root')
+  if (!root) return
+  root.innerHTML = `
+    <div class="auth-screen">
+      <div class="auth-card glass" role="alert" style="max-width:420px">
+        <h2 style="margin-top:0">Kapteins Daagbok</h2>
+        <p style="color:var(--app-text-muted);line-height:1.5">${message}</p>
+        <button type="button" class="btn primary" style="width:100%;margin-top:16px" onclick="location.reload()">
+          Neu laden
+        </button>
+      </div>
+    </div>`
+}
+
+async function bootstrap(): Promise<void> {
+  applyAppearanceToDocument()
+  installStaleAssetRecovery()
+  await clearDevServiceWorkerCaches()
+
+  const shouldReloadForWaitingSw = await reconcileServiceWorkerOnStartup()
+  if (shouldReloadForWaitingSw) {
+    markReloadAttempt()
+    window.location.reload()
+    return
+  }
+
+  const rootEl = document.getElementById('root')
+  if (!rootEl) {
+    throw new Error('Missing #root element')
+  }
+
+  createRoot(rootEl).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  )
+}
+
+void bootstrap().catch((err) => {
+  console.error('App bootstrap failed:', err)
+  renderBootstrapError(
+    'Die App konnte nicht gestartet werden. Bitte neu laden oder die App vollständig beenden und erneut öffnen.',
+  )
+})

client/src/services/appearance.test.ts

@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  applyAppearanceToDocument,
+  resolveAppTheme,
+  resolveColorScheme,
+  type AppTheme,
+  type ResolvedColorScheme
+} from './appearance.js'
+import { setColorSchemePreference } from './userPreferences.js'
+
+const USER_ID = 'appearance-test-user'
+
+const COMBOS: Array<{ theme: AppTheme; scheme: ResolvedColorScheme }> = [
+  { theme: 'ocean', scheme: 'dark' },
+  { theme: 'ocean', scheme: 'light' },
+  { theme: 'material', scheme: 'dark' },
+  { theme: 'material', scheme: 'light' },
+  { theme: 'cupertino', scheme: 'dark' },
+  { theme: 'cupertino', scheme: 'light' }
+]
+
+describe('appearance', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    document.documentElement.className = ''
+    document.documentElement.style.colorScheme = ''
+    document.head.querySelector('meta[name="theme-color"]')?.remove()
+  })
+
+  it.each(COMBOS)('applies $theme · $scheme classes to document', ({ theme, scheme }) => {
+    applyAppearanceToDocument(theme, scheme)
+
+    const root = document.documentElement
+    expect(root.classList.contains(`theme-${theme}`)).toBe(true)
+    expect(root.classList.contains(`scheme-${scheme}`)).toBe(true)
+    expect(root.style.colorScheme).toBe(scheme)
+  })
+
+  it('replaces previous theme classes when switching appearance', () => {
+    applyAppearanceToDocument('ocean', 'dark')
+    applyAppearanceToDocument('material', 'light')
+
+    const root = document.documentElement
+    expect(root.classList.contains('theme-material')).toBe(true)
+    expect(root.classList.contains('theme-ocean')).toBe(false)
+    expect(root.classList.contains('scheme-light')).toBe(true)
+    expect(root.classList.contains('scheme-dark')).toBe(false)
+  })
+
+  it('resolves stored light scheme even when system prefers dark', () => {
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn().mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+    )
+    localStorage.setItem('active_userid', USER_ID)
+    setColorSchemePreference(USER_ID, 'light')
+
+    expect(resolveColorScheme()).toBe('light')
+    applyAppearanceToDocument('material', resolveColorScheme())
+    expect(document.documentElement.classList.contains('scheme-light')).toBe(true)
+  })
+
+  it('auto theme picks material on Android user agent', () => {
+    vi.stubGlobal('navigator', {
+      ...navigator,
+      userAgent: 'Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36'
+    })
+    expect(resolveAppTheme()).toBe('material')
+  })
+})

client/src/services/appearance.ts

@@ -1,3 +1,5 @@
+import { getColorSchemePreference as getStoredColorScheme, getThemePreference } from './userPreferences.js'
+
 export type ColorSchemePreference = 'auto' | 'light' | 'dark'
 export type ResolvedColorScheme = 'light' | 'dark'
 export type AppTheme = 'ocean' | 'material' | 'cupertino'
@@ -6,7 +8,7 @@ const THEME_CLASSES = ['theme-ocean', 'theme-material', 'theme-cupertino'] as co
 const SCHEME_CLASSES = ['scheme-light', 'scheme-dark'] as const
 
 export function getColorSchemePreference(): ColorSchemePreference {
-  const stored = localStorage.getItem('active_color_scheme')
+  const stored = getStoredColorScheme()
   if (stored === 'light' || stored === 'dark' || stored === 'auto') return stored
   return 'auto'
 }
@@ -19,7 +21,7 @@ export function resolveColorScheme(pref?: ColorSchemePreference): ResolvedColorS
 }
 
 export function resolveAppTheme(): AppTheme {
-  const configTheme = localStorage.getItem('active_theme') || 'auto'
+  const configTheme = getThemePreference() || 'auto'
   if (configTheme === 'material' || configTheme === 'cupertino' || configTheme === 'ocean') {
     return configTheme
   }
@@ -29,6 +31,18 @@ export function resolveAppTheme(): AppTheme {
   return 'ocean'
 }
 
+function updateThemeColorMeta(root: HTMLElement): void {
+  const color = getComputedStyle(root).getPropertyValue('--app-theme-color').trim()
+  if (!color) return
+  let meta = document.querySelector('meta[name="theme-color"]')
+  if (!meta) {
+    meta = document.createElement('meta')
+    meta.setAttribute('name', 'theme-color')
+    document.head.appendChild(meta)
+  }
+  meta.setAttribute('content', color)
+}
+
 export function applyAppearanceToDocument(
   theme: AppTheme = resolveAppTheme(),
   scheme: ResolvedColorScheme = resolveColorScheme()
@@ -37,6 +51,7 @@ export function applyAppearanceToDocument(
   root.classList.remove(...THEME_CLASSES, ...SCHEME_CLASSES)
   root.classList.add(`theme-${theme}`, `scheme-${scheme}`)
   root.style.colorScheme = scheme
+  updateThemeColorMeta(root)
 }
 
 export function subscribeToSystemColorScheme(onChange: () => void): () => void {

client/src/services/auth.ts

@@ -33,10 +33,33 @@ export function setActiveMasterKey(key: ArrayBuffer | null) {
 }
 
 export async function checkServerSession(): Promise<{ authenticated: boolean; userId?: string }> {
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), 8_000)
   try {
-    return await apiJson<{ authenticated: boolean; userId?: string }>(`${API_BASE}/session`)
+    return await apiJson<{ authenticated: boolean; userId?: string }>(`${API_BASE}/session`, {
+      signal: controller.signal
+    })
   } catch {
     return { authenticated: false }
+  } finally {
+    window.clearTimeout(timeoutId)
+  }
+}
+
+/** Master key + username in memory/storage — enough to stay in the unlocked UI. */
+export function hasUnlockedLocalCrypto(): boolean {
+  return !!(getActiveMasterKey() && localStorage.getItem('active_username'))
+}
+
+/** Crypto unlock plus user id for authenticated API calls (userId may already be in localStorage). */
+export function hasUnlockedLocalSession(): boolean {
+  return hasUnlockedLocalCrypto() && !!localStorage.getItem('active_userid')
+}
+
+/** Persist server session user id when the /session response includes it. */
+export function persistSessionUserId(userId: string | undefined): void {
+  if (userId) {
+    localStorage.setItem('active_userid', userId)
   }
 }
 

client/src/services/authSession.test.ts

@@ -0,0 +1,53 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  hasUnlockedLocalCrypto,
+  hasUnlockedLocalSession,
+  setActiveMasterKey
+} from './auth.js'
+
+describe('local session unlock checks', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    setActiveMasterKey(null)
+  })
+
+  it('hasUnlockedLocalCrypto with master key and username only', () => {
+    setActiveMasterKey(new ArrayBuffer(32))
+    localStorage.setItem('active_username', 'skipper')
+    expect(hasUnlockedLocalCrypto()).toBe(true)
+    expect(hasUnlockedLocalSession()).toBe(false)
+  })
+
+  it('hasUnlockedLocalSession when userId is present', () => {
+    setActiveMasterKey(new ArrayBuffer(32))
+    localStorage.setItem('active_username', 'skipper')
+    localStorage.setItem('active_userid', 'user-1')
+    expect(hasUnlockedLocalCrypto()).toBe(true)
+    expect(hasUnlockedLocalSession()).toBe(true)
+  })
+
+  it('hasUnlockedLocalCrypto false without master key', () => {
+    localStorage.setItem('active_username', 'skipper')
+    localStorage.setItem('active_userid', 'user-1')
+    expect(hasUnlockedLocalCrypto()).toBe(false)
+  })
+})
+
+describe('persistSessionUserId', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('stores userId when provided', async () => {
+    const { persistSessionUserId } = await import('./auth.js')
+    persistSessionUserId('user-42')
+    expect(localStorage.getItem('active_userid')).toBe('user-42')
+  })
+
+  it('does not clear existing userId when omitted', async () => {
+    const { persistSessionUserId } = await import('./auth.js')
+    localStorage.setItem('active_userid', 'user-1')
+    persistSessionUserId(undefined)
+    expect(localStorage.getItem('active_userid')).toBe('user-1')
+  })
+})

client/src/services/csvExport.ts

@@ -5,6 +5,7 @@ import { decryptJson } from './crypto.js'
 import { formatSignatureForExport, normalizeSignature } from '../utils/signatures.js'
 import { sortLogEventsByTime } from '../utils/logEntryPayload.js'
 import i18n from '../i18n/index.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
 
 function escapeCsvValue(val: string | number | undefined | null): string {
   if (val === null || val === undefined) return '';
@@ -87,6 +88,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
     'Latitude', 'Longitude', 'Remarks',
     'Freshwater Morning (L)', 'Freshwater Refilled (L)', 'Freshwater Evening (L)', 'Freshwater Consumption (L)',
     'Fuel Morning (L)', 'Fuel Refilled (L)', 'Fuel Evening (L)', 'Fuel Consumption (L)',
+    'Greywater Level (L)',
     'Yacht Name', 'Home Port', 'Owner', 'Charter Company', 'Registration', 'Callsign', 'ATIS', 'MMSI'
   ];
 
@@ -94,11 +96,11 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
   const exportLabels = {
     imagePlaceholder: i18n.t('logs.sign_export_image'),
     passkeyLabel: (username: string, signedAt: string) => {
-      const date = new Date(signedAt).toLocaleString(i18n.language === 'de' ? 'de-DE' : 'en-GB')
+      const date = formatAppDateTime(signedAt, i18n.language)
       return i18n.t('logs.sign_passkey_export', { username, date })
     },
     attributionLabel: (username: string, signedAt: string) => {
-      const date = new Date(signedAt).toLocaleString(i18n.language === 'de' ? 'de-DE' : 'en-GB')
+      const date = formatAppDateTime(signedAt, i18n.language)
       return i18n.t('logs.sign_attribution_export', { username, date })
     }
   };
@@ -122,6 +124,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
     const fuelR = entry.fuel?.refilled ?? '';
     const fuelE = entry.fuel?.evening ?? '';
     const fuelCons = entry.fuel?.consumption ?? '';
+    const greywaterLevel = entry.greywater?.level ?? '';
 
     const eventsList = entry.events || [];
     if (eventsList.length === 0) {
@@ -136,6 +139,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
         '', '', '',
         fwM, fwR, fwE, fwCons,
         fuelM, fuelR, fuelE, fuelCons,
+        greywaterLevel,
         yachtName, homePort, owner, charter, registration, callsign, atis, mmsi
       ].map(escapeCsvValue));
     } else {
@@ -152,6 +156,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
           ev.gpsLat || '', ev.gpsLng || '', ev.remarks || '',
           fwM, fwR, fwE, fwCons,
           fuelM, fuelR, fuelE, fuelCons,
+          greywaterLevel,
           yachtName, homePort, owner, charter, registration, callsign, atis, mmsi
         ].map(escapeCsvValue));
       }

client/src/services/demoLogbook.test.ts

@@ -0,0 +1,36 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  clearDemoLogbookRefs,
+  getDemoFirstEntryStorageKey,
+  getDemoLogbookStorageKey
+} from './demoLogbook.js'
+
+describe('clearDemoLogbookRefs', () => {
+  const userId = 'user-1'
+
+  beforeEach(() => {
+    localStorage.clear()
+    localStorage.setItem('active_userid', userId)
+  })
+
+  it('removes demo logbook and first-entry keys for the user', () => {
+    const logbookId = 'lb-demo'
+    localStorage.setItem(getDemoLogbookStorageKey(userId), logbookId)
+    localStorage.setItem(getDemoFirstEntryStorageKey(userId), 'entry-1')
+
+    clearDemoLogbookRefs(userId, logbookId)
+
+    expect(localStorage.getItem(getDemoLogbookStorageKey(userId))).toBeNull()
+    expect(localStorage.getItem(getDemoFirstEntryStorageKey(userId))).toBeNull()
+  })
+
+  it('does not clear refs when logbookId does not match stored demo id', () => {
+    localStorage.setItem(getDemoLogbookStorageKey(userId), 'other-logbook')
+    localStorage.setItem(getDemoFirstEntryStorageKey(userId), 'entry-1')
+
+    clearDemoLogbookRefs(userId, 'deleted-logbook')
+
+    expect(localStorage.getItem(getDemoLogbookStorageKey(userId))).toBe('other-logbook')
+    expect(localStorage.getItem(getDemoFirstEntryStorageKey(userId))).toBe('entry-1')
+  })
+})

client/src/services/demoLogbook.ts

@@ -108,6 +108,7 @@ export async function seedDemoLogbookIfNeeded(): Promise<DemoSeedResult | null>
       const title = i18n.t('demo.logbook_title')
       return { logbookId: existingId, title, firstEntryId }
     }
+    clearDemoLogbookRefs(userId, existingId)
   }
 
   if (!shouldSeed) return null
@@ -152,3 +153,66 @@ export function getStoredDemoFirstEntryId(): string | null {
   if (!userId) return null
   return localStorage.getItem(getDemoFirstEntryStorageKey(userId))
 }
+
+/** Remove persisted demo logbook pointers when the logbook no longer exists. */
+export function clearDemoLogbookRefs(userId: string, logbookId?: string): void {
+  const storedId = localStorage.getItem(getDemoLogbookStorageKey(userId))
+  if (logbookId && storedId && storedId !== logbookId) return
+  localStorage.removeItem(getDemoLogbookStorageKey(userId))
+  localStorage.removeItem(getDemoFirstEntryStorageKey(userId))
+}
+
+export async function entryExistsInLogbook(logbookId: string, entryId: string): Promise<boolean> {
+  const entry = await db.entries.get(entryId)
+  return entry?.logbookId === logbookId
+}
+
+export interface TourLogbookContext {
+  logbookId: string
+  title: string
+  firstEntryId: string | null
+}
+
+/** Pick a logbook + first entry for the onboarding tour (handles deleted demo data). */
+export async function resolveTourLogbookContext(
+  preferLogbookId?: string | null
+): Promise<TourLogbookContext | null> {
+  const userId = localStorage.getItem('active_userid')
+  if (!userId || !getActiveMasterKey()) return null
+
+  const demoId = localStorage.getItem(getDemoLogbookStorageKey(userId))
+  if (demoId && !(await db.logbooks.get(demoId))) {
+    clearDemoLogbookRefs(userId, demoId)
+  }
+
+  const { fetchLogbooks } = await import('./logbook.js')
+  const books = await fetchLogbooks()
+  if (books.length === 0) return null
+
+  const activeId = localStorage.getItem('active_logbook_id')
+  const pick =
+    (preferLogbookId ? books.find((b) => b.id === preferLogbookId) : undefined) ??
+    (activeId ? books.find((b) => b.id === activeId) : undefined) ??
+    (demoId ? books.find((b) => b.id === demoId) : undefined) ??
+    books[0]
+
+  const firstEntryId = await resolveTourFirstEntryId(pick.id, userId)
+  return { logbookId: pick.id, title: pick.title, firstEntryId }
+}
+
+async function resolveTourFirstEntryId(logbookId: string, userId: string): Promise<string | null> {
+  const stored = localStorage.getItem(getDemoFirstEntryStorageKey(userId))
+  if (stored && (await entryExistsInLogbook(logbookId, stored))) {
+    return stored
+  }
+
+  if (stored) {
+    localStorage.removeItem(getDemoFirstEntryStorageKey(userId))
+  }
+
+  const localEntries = await db.entries.where({ logbookId }).toArray()
+  if (localEntries.length === 0) return null
+
+  localEntries.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+  return localEntries[0]?.payloadId ?? null
+}

client/src/services/demoLogbookData.ts

@@ -26,6 +26,7 @@ export interface DemoDaySpec {
   filename: string
   freshwater: { morning: number; refilled: number; evening: number; consumption: number }
   fuel: { morning: number; refilled: number; evening: number; consumption: number }
+  greywaterLevel?: number
   motorHours?: number
   events: Array<Record<string, string>>
 }
@@ -69,6 +70,7 @@ export function buildDemoDays(): DemoDaySpec[] {
       filename: 'kiel-laboe.gpx',
       freshwater: { morning: 120, refilled: 0, evening: 105, consumption: 15 },
       fuel: { morning: 85, refilled: 0, evening: 78, consumption: 7 },
+      greywaterLevel: 25,
       events: [
         {
           time: '10:15',
@@ -101,6 +103,7 @@ export function buildDemoDays(): DemoDaySpec[] {
       filename: 'laboe-damp.gpx',
       freshwater: { morning: 105, refilled: 25, evening: 110, consumption: 20 },
       fuel: { morning: 78, refilled: 0, evening: 70, consumption: 8 },
+      greywaterLevel: 38,
       motorHours: 1.5,
       events: [
         {
@@ -134,6 +137,7 @@ export function buildDemoDays(): DemoDaySpec[] {
       filename: 'damp-schleimuende.gpx',
       freshwater: { morning: 110, refilled: 0, evening: 95, consumption: 15 },
       fuel: { morning: 70, refilled: 15, evening: 80, consumption: 5 },
+      greywaterLevel: 52,
       events: [
         {
           time: '08:30',
@@ -176,7 +180,10 @@ export function buildDemoYachtData(): Record<string, unknown> {
     atis: '',
     mmsi: '',
     sails: isDe ? ['Großsegel', 'Genua', 'Spinnaker'] : ['Mainsail', 'Genoa', 'Spinnaker'],
-    photo: null
+    photo: null,
+    freshwaterCapacityL: 200,
+    fuelCapacityL: 100,
+    greywaterCapacityL: 80
   }
 }
 
@@ -244,6 +251,10 @@ export function buildPublicDemoFixture(): PublicDemoFixture {
       events: day.events
     }
 
+    if (day.greywaterLevel != null && day.greywaterLevel > 0) {
+      entryPayload.greywater = { level: day.greywaterLevel }
+    }
+
     if (stats) {
       entryPayload.trackDistanceNm = stats.distanceNm
       entryPayload.trackSpeedMaxKn = stats.speedMaxKn
@@ -303,6 +314,10 @@ export function buildDemoEntryPayloads(): Array<{
       events: day.events
     }
 
+    if (day.greywaterLevel != null && day.greywaterLevel > 0) {
+      entryPayload.greywater = { level: day.greywaterLevel }
+    }
+
     if (stats) {
       entryPayload.trackDistanceNm = stats.distanceNm
       entryPayload.trackSpeedMaxKn = stats.speedMaxKn

client/src/services/logbook.ts

@@ -4,6 +4,7 @@ import { encryptJson, decryptJson, encryptBuffer, decryptBuffer } from './crypto
 import { getLogbookKey, saveLogbookKey, generateLogbookKey } from './logbookKeys.js'
 import { PlausibleEvents, trackPlausibleEvent } from './analytics.js'
 import { apiFetch } from './api.js'
+import { clearDemoLogbookRefs, getDemoLogbookStorageKey } from './demoLogbook.js'
 
 const API_BASE = '/api/logbooks'
 
@@ -320,6 +321,9 @@ export async function deleteLogbook(id: string): Promise<void> {
 
   // Perform local cascading cleanup
   await deleteLocalLogbookCache(id)
+  if (userId && id === localStorage.getItem(getDemoLogbookStorageKey(userId))) {
+    clearDemoLogbookRefs(userId, id)
+  }
   trackPlausibleEvent(PlausibleEvents.LOGBOOK_DELETED)
 }
 

client/src/services/pdfExport.ts

@@ -6,10 +6,10 @@ import { decryptJson } from './crypto.js'
 import { isSignatureImage, isPasskeySignature, isClassicSignature, getSignaturePayload } from '../utils/signatures.js'
 import { sortLogEventsByTime } from '../utils/logEntryPayload.js'
 import i18n from '../i18n/index.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
 
 function formatPasskeySignDate(signedAt: string): string {
-  const locale = i18n.language === 'de' ? 'de-DE' : 'en-GB'
-  return new Date(signedAt).toLocaleString(locale)
+  return formatAppDateTime(signedAt, i18n.language)
 }
 
 export async function generateLogbookPagePdf(logbookId: string, entryId: string, preloadedData?: { yacht: any; entry: any }): Promise<jsPDF> {
@@ -197,13 +197,15 @@ export async function generateLogbookPagePdf(logbookId: string, entryId: string,
   doc.text('VERBRAUCHSWERTE / CONSUMPTON STATS', 10, footerY + 3);
 
   let fwY = footerY + 5;
-  doc.rect(10, fwY, 110, rowHeight * 3, 'S');
+  const tankRows = 4;
+  doc.rect(10, fwY, 110, rowHeight * tankRows, 'S');
   doc.line(10, fwY + rowHeight, 120, fwY + rowHeight);
   doc.line(10, fwY + rowHeight * 2, 120, fwY + rowHeight * 2);
-  doc.line(40, fwY, 40, fwY + rowHeight * 3);
-  doc.line(60, fwY, 60, fwY + rowHeight * 3);
-  doc.line(80, fwY, 80, fwY + rowHeight * 3);
-  doc.line(100, fwY, 100, fwY + rowHeight * 3);
+  doc.line(10, fwY + rowHeight * 3, 120, fwY + rowHeight * 3);
+  doc.line(40, fwY, 40, fwY + rowHeight * tankRows);
+  doc.line(60, fwY, 60, fwY + rowHeight * tankRows);
+  doc.line(80, fwY, 80, fwY + rowHeight * tankRows);
+  doc.line(100, fwY, 100, fwY + rowHeight * tankRows);
 
   doc.setFont('Helvetica', 'bold');
   doc.setFontSize(7.5);
@@ -226,6 +228,12 @@ export async function generateLogbookPagePdf(logbookId: string, entryId: string,
   doc.text(String(entry.fuel?.evening ?? '0'), 81, fwY + rowHeight * 2 + 4.2);
   doc.text(String(entry.fuel?.consumption ?? '0'), 101, fwY + rowHeight * 2 + 4.2);
 
+  doc.text('Grauwasser', 11, fwY + rowHeight * 3 + 4.2);
+  doc.text('—', 41, fwY + rowHeight * 3 + 4.2);
+  doc.text('—', 61, fwY + rowHeight * 3 + 4.2);
+  doc.text(String(entry.greywater?.level ?? '0'), 81, fwY + rowHeight * 3 + 4.2);
+  doc.text('—', 101, fwY + rowHeight * 3 + 4.2);
+
   // Signatures Box
   let sigX = 130;
   let sigY = footerY + 5;

client/src/services/pushNotifications.ts

@@ -43,6 +43,18 @@ async function fetchVapidPublicKey(): Promise<string | null> {
   }
 }
 
+/** True when crew-change push is enabled and notification permission is granted. */
+export async function isCollaboratorPushActive(): Promise<boolean> {
+  if (!isPushSupported()) return false
+  if (getNotificationPermission() !== 'granted') return false
+  try {
+    const prefs = await fetchPushPrefs()
+    return prefs.collaboratorChangesEnabled
+  } catch {
+    return false
+  }
+}
+
 export async function fetchPushPrefs(): Promise<{ collaboratorChangesEnabled: boolean }> {
   if (!localStorage.getItem('active_userid')) {
     return { collaboratorChangesEnabled: false }

client/src/services/pwaStartup.test.ts

@@ -0,0 +1,45 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  markReloadAttempt,
+  recentlyAttemptedReload,
+  reconcileServiceWorkerOnStartup
+} from './pwaStartup.js'
+
+describe('pwaStartup reload guards', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+  })
+
+  it('blocks repeated reload attempts within the debounce window', () => {
+    expect(recentlyAttemptedReload(10_000)).toBe(false)
+    markReloadAttempt(10_000)
+    expect(recentlyAttemptedReload(12_000)).toBe(true)
+    expect(recentlyAttemptedReload(15_000)).toBe(false)
+  })
+})
+
+describe('reconcileServiceWorkerOnStartup', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+    vi.unstubAllEnvs()
+  })
+
+  it('returns false in dev mode', async () => {
+    vi.stubEnv('DEV', true)
+    await expect(reconcileServiceWorkerOnStartup()).resolves.toBe(false)
+  })
+
+  it('returns false when no waiting worker exists', async () => {
+    vi.stubEnv('DEV', false)
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: {
+        controller: {},
+        getRegistration: vi.fn().mockResolvedValue({ waiting: null }),
+        addEventListener: vi.fn()
+      }
+    })
+
+    await expect(reconcileServiceWorkerOnStartup()).resolves.toBe(false)
+  })
+})

client/src/services/pwaStartup.ts

@@ -0,0 +1,87 @@
+const RELOAD_ATTEMPT_KEY = 'pwa_reload_attempt_ts'
+const COLD_START_UPDATE_KEY = 'pwa_coldstart_update_ts'
+const RELOAD_DEBOUNCE_MS = 4_000
+const COLD_START_UPDATE_DEBOUNCE_MS = 15_000
+
+export function recentlyAttemptedReload(now = Date.now()): boolean {
+  const last = Number(sessionStorage.getItem(RELOAD_ATTEMPT_KEY) || '0')
+  return now - last < RELOAD_DEBOUNCE_MS
+}
+
+export function markReloadAttempt(now = Date.now()): void {
+  sessionStorage.setItem(RELOAD_ATTEMPT_KEY, String(now))
+}
+
+function recentlyAttemptedColdStartUpdate(now = Date.now()): boolean {
+  const last = Number(sessionStorage.getItem(COLD_START_UPDATE_KEY) || '0')
+  return now - last < COLD_START_UPDATE_DEBOUNCE_MS
+}
+
+function markColdStartUpdateAttempt(now = Date.now()): void {
+  sessionStorage.setItem(COLD_START_UPDATE_KEY, String(now))
+}
+
+function isStaleModuleLoadError(error: unknown): boolean {
+  const message =
+    error instanceof Error
+      ? error.message
+      : typeof error === 'string'
+        ? error
+        : ''
+
+  return (
+    message.includes('Failed to fetch dynamically imported module') ||
+    message.includes('Importing a module script failed') ||
+    message.includes('error loading dynamically imported module')
+  )
+}
+
+/**
+ * After missed deploys, a waiting SW may exist while the page still runs an old bundle.
+ * Apply the waiting worker once on cold start (one controlled reload) instead of hanging.
+ */
+export async function reconcileServiceWorkerOnStartup(): Promise<boolean> {
+  if (import.meta.env.DEV || !('serviceWorker' in navigator)) {
+    return false
+  }
+
+  if (recentlyAttemptedColdStartUpdate()) {
+    return false
+  }
+
+  const registration = await navigator.serviceWorker.getRegistration()
+  const waiting = registration?.waiting
+  if (!waiting || !navigator.serviceWorker.controller) {
+    return false
+  }
+
+  markColdStartUpdateAttempt()
+  waiting.postMessage({ type: 'SKIP_WAITING' })
+
+  await new Promise<void>((resolve) => {
+    const timeoutId = window.setTimeout(resolve, 4_000)
+    navigator.serviceWorker.addEventListener(
+      'controllerchange',
+      () => {
+        window.clearTimeout(timeoutId)
+        resolve()
+      },
+      { once: true }
+    )
+  })
+
+  return true
+}
+
+export function installStaleAssetRecovery(): void {
+  if (import.meta.env.DEV) return
+
+  window.addEventListener('unhandledrejection', (event) => {
+    if (!isStaleModuleLoadError(event.reason)) return
+    if (recentlyAttemptedReload()) return
+
+    markReloadAttempt()
+    event.preventDefault()
+    window.location.reload()
+  })
+}

client/src/services/sync.ts

@@ -6,6 +6,7 @@ import { getLogbookAccess } from './logbookAccess.js'
 const API_BASE = '/api/sync'
 const syncingLogbooks = new Set<string>()
 const pendingResync = new Set<string>()
+let syncAllInFlight = 0
 
 let isSyncing = false
 const listeners = new Set<(syncing: boolean) => void>()
@@ -18,7 +19,8 @@ export function subscribeToSyncState(listener: (syncing: boolean) => void) {
   }
 }
 
-function setSyncing(syncing: boolean) {
+function recomputeSyncingState() {
+  const syncing = syncingLogbooks.size > 0 || syncAllInFlight > 0
   if (isSyncing !== syncing) {
     isSyncing = syncing
     listeners.forEach((l) => l(isSyncing))
@@ -205,6 +207,54 @@ async function flushPushQueue(logbookId: string): Promise<boolean> {
   return ok
 }
 
+type PulledServerPayload = {
+  yacht?: { updatedAt: string } | null
+  deviation?: { updatedAt: string } | null
+  crews?: Array<{ payloadId: string; updatedAt: string }>
+  entries?: Array<{ payloadId: string; updatedAt: string }>
+  photos?: Array<{ payloadId: string; updatedAt: string }>
+  gpsTracks?: Array<{ entryId: string; updatedAt: string }>
+}
+
+/** Drop queue rows already reflected on the server (e.g. after direct API save). */
+async function pruneAcknowledgedQueueItems(
+  logbookId: string,
+  server: PulledServerPayload
+): Promise<void> {
+  const pending = await db.syncQueue.where({ logbookId }).toArray()
+  if (pending.length === 0) return
+
+  const serverTimes = new Map<string, string>()
+  if (server.yacht) serverTimes.set('yacht:' + logbookId, server.yacht.updatedAt)
+  if (server.deviation) serverTimes.set('deviation:' + logbookId, server.deviation.updatedAt)
+  for (const c of server.crews ?? []) serverTimes.set('crew:' + c.payloadId, c.updatedAt)
+  for (const e of server.entries ?? []) serverTimes.set('entry:' + e.payloadId, e.updatedAt)
+  for (const p of server.photos ?? []) serverTimes.set('photo:' + p.payloadId, p.updatedAt)
+  for (const gt of server.gpsTracks ?? []) serverTimes.set('gpsTrack:' + gt.entryId, gt.updatedAt)
+
+  const localLogbook = await db.logbooks.get(logbookId)
+  const staleIds: number[] = []
+
+  for (const item of pending) {
+    if (item.type === 'logbook') {
+      if (localLogbook?.isSynced === 1) {
+        if (item.id !== undefined) staleIds.push(item.id)
+      }
+      continue
+    }
+
+    const key = item.type === 'yacht' ? 'yacht:' + logbookId : `${item.type}:${item.payloadId}`
+    const serverUpdatedAt = serverTimes.get(key)
+    if (serverUpdatedAt && !isNewer(item.updatedAt, serverUpdatedAt)) {
+      if (item.id !== undefined) staleIds.push(item.id)
+    }
+  }
+
+  if (staleIds.length > 0) {
+    await db.syncQueue.bulkDelete(staleIds)
+  }
+}
+
 // Pull updates from the server and apply last-write-wins
 async function pullChanges(logbookId: string): Promise<boolean> {
   if (!localStorage.getItem('active_userid')) return false
@@ -220,6 +270,7 @@ async function pullChanges(logbookId: string): Promise<boolean> {
     }
 
     const { yacht, deviation, crews, entries, photos, gpsTracks } = await response.json()
+    const serverSnapshot: PulledServerPayload = { yacht, deviation, crews, entries, photos, gpsTracks }
 
     // 1. Sync Yacht Payload
     if (yacht) {
@@ -380,6 +431,7 @@ async function pullChanges(logbookId: string): Promise<boolean> {
       }
     }
 
+    await pruneAcknowledgedQueueItems(logbookId, serverSnapshot)
     return true
   } catch (error) {
     console.error('Error during sync pull:', error)
@@ -400,7 +452,7 @@ export async function syncLogbook(logbookId: string): Promise<boolean> {
   }
 
   syncingLogbooks.add(logbookId)
-  setSyncing(true)
+  recomputeSyncingState()
 
   try {
     const pushed = await flushPushQueue(logbookId)
@@ -410,7 +462,7 @@ export async function syncLogbook(logbookId: string): Promise<boolean> {
     return pushed && pulled && pushedAfterPull
   } finally {
     syncingLogbooks.delete(logbookId)
-    setSyncing(syncingLogbooks.size > 0)
+    recomputeSyncingState()
   }
 }
 
@@ -421,8 +473,9 @@ export async function syncAllLogbooks(): Promise<void> {
   const masterKey = getActiveMasterKey()
   if (!masterKey) return
 
+  syncAllInFlight++
+  recomputeSyncingState()
   try {
-    setSyncing(true)
     // 1. Fetch latest logbook lists first (synchronizes db.logbooks index)
     const logbooks = await db.logbooks.toArray()
 
@@ -446,7 +499,8 @@ export async function syncAllLogbooks(): Promise<void> {
   } catch (error) {
     console.error('Error synchronizing all logbooks:', error)
   } finally {
-    setSyncing(syncingLogbooks.size > 0)
+    syncAllInFlight = Math.max(0, syncAllInFlight - 1)
+    recomputeSyncingState()
   }
 }
 

client/src/services/userPreferences.test.ts

@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  getColorSchemePreference,
+  getOwmApiKey,
+  getOwmApiKeyForActiveUser,
+  getThemePreference,
+  setColorSchemePreference,
+  setOwmApiKey,
+  setThemePreference
+} from './userPreferences.js'
+
+const USER_ID = 'test-user-123'
+
+describe('userPreferences', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('migrates legacy theme and color scheme keys on first read', () => {
+    localStorage.setItem('active_userid', USER_ID)
+    localStorage.setItem('active_theme', 'material')
+    localStorage.setItem('active_color_scheme', 'dark')
+
+    expect(getThemePreference()).toBe('material')
+    expect(getColorSchemePreference()).toBe('dark')
+    expect(localStorage.getItem(`user_pref_theme_${USER_ID}`)).toBe('material')
+    expect(localStorage.getItem(`user_pref_color_scheme_${USER_ID}`)).toBe('dark')
+  })
+
+  it('stores OWM key per user', () => {
+    setOwmApiKey(USER_ID, 'secret-key')
+    expect(getOwmApiKey(USER_ID)).toBe('secret-key')
+    setOwmApiKey(USER_ID, '  ')
+    expect(getOwmApiKey(USER_ID)).toBe('')
+  })
+
+  it('reads namespaced OWM key via active user id', () => {
+    setOwmApiKey(USER_ID, 'namespaced-only')
+    localStorage.setItem('active_userid', USER_ID)
+    localStorage.removeItem('owm_api_key')
+
+    expect(getOwmApiKeyForActiveUser()).toBe('namespaced-only')
+    expect(getOwmApiKey()).toBe('namespaced-only')
+  })
+
+  it('does not read namespaced OWM key without active user id', () => {
+    setOwmApiKey(USER_ID, 'namespaced-only')
+    localStorage.removeItem('active_userid')
+    localStorage.removeItem('owm_api_key')
+
+    expect(getOwmApiKeyForActiveUser()).toBe('')
+    expect(getOwmApiKey()).toBe('')
+  })
+
+  it('writes theme preferences to namespaced keys', () => {
+    setThemePreference(USER_ID, 'ocean')
+    setColorSchemePreference(USER_ID, 'light')
+    expect(getThemePreference(USER_ID)).toBe('ocean')
+    expect(getColorSchemePreference(USER_ID)).toBe('light')
+  })
+})

client/src/services/userPreferences.ts

@@ -0,0 +1,91 @@
+const LEGACY_THEME = 'active_theme'
+const LEGACY_COLOR_SCHEME = 'active_color_scheme'
+const LEGACY_OWM_KEY = 'owm_api_key'
+
+function themeKey(userId: string): string {
+  return `user_pref_theme_${userId}`
+}
+
+function colorSchemeKey(userId: string): string {
+  return `user_pref_color_scheme_${userId}`
+}
+
+function owmKey(userId: string): string {
+  return `user_pref_owm_api_key_${userId}`
+}
+
+export function getActiveUserId(): string | null {
+  return localStorage.getItem('active_userid')
+}
+
+function migrateLegacyPrefs(userId: string): void {
+  const pairs: Array<{ namespaced: string; legacy: string }> = [
+    { namespaced: themeKey(userId), legacy: LEGACY_THEME },
+    { namespaced: colorSchemeKey(userId), legacy: LEGACY_COLOR_SCHEME },
+    { namespaced: owmKey(userId), legacy: LEGACY_OWM_KEY }
+  ]
+
+  for (const { namespaced, legacy } of pairs) {
+    if (localStorage.getItem(namespaced) != null) continue
+    const value = localStorage.getItem(legacy)
+    if (value != null) {
+      localStorage.setItem(namespaced, value)
+    }
+  }
+}
+
+function resolveUserId(userId?: string | null): string | null {
+  const id = (userId?.trim() || getActiveUserId()?.trim()) || null
+  if (!id) return null
+  migrateLegacyPrefs(id)
+  return id
+}
+
+export function getThemePreference(userId?: string | null): string {
+  const id = resolveUserId(userId)
+  if (id) {
+    return localStorage.getItem(themeKey(id)) ?? localStorage.getItem(LEGACY_THEME) ?? 'auto'
+  }
+  return localStorage.getItem(LEGACY_THEME) ?? 'auto'
+}
+
+export function setThemePreference(userId: string, value: string): void {
+  migrateLegacyPrefs(userId)
+  localStorage.setItem(themeKey(userId), value)
+}
+
+export function getColorSchemePreference(userId?: string | null): string {
+  const id = resolveUserId(userId)
+  if (id) {
+    return localStorage.getItem(colorSchemeKey(id)) ?? localStorage.getItem(LEGACY_COLOR_SCHEME) ?? 'auto'
+  }
+  return localStorage.getItem(LEGACY_COLOR_SCHEME) ?? 'auto'
+}
+
+export function setColorSchemePreference(userId: string, value: string): void {
+  migrateLegacyPrefs(userId)
+  localStorage.setItem(colorSchemeKey(userId), value)
+}
+
+export function getOwmApiKey(userId?: string | null): string {
+  const id = resolveUserId(userId)
+  if (id) {
+    return localStorage.getItem(owmKey(id)) ?? localStorage.getItem(LEGACY_OWM_KEY) ?? ''
+  }
+  return localStorage.getItem(LEGACY_OWM_KEY) ?? ''
+}
+
+/** OWM key for the signed-in user (`active_userid`). Prefer this over a bare `getOwmApiKey()` call. */
+export function getOwmApiKeyForActiveUser(): string {
+  return getOwmApiKey(getActiveUserId())
+}
+
+export function setOwmApiKey(userId: string, value: string): void {
+  migrateLegacyPrefs(userId)
+  const trimmed = value.trim()
+  if (trimmed) {
+    localStorage.setItem(owmKey(userId), trimmed)
+  } else {
+    localStorage.removeItem(owmKey(userId))
+  }
+}

client/src/services/weather.ts

@@ -1,4 +1,5 @@
 import { apiFetch } from './api.js'
+import { getOwmApiKeyForActiveUser } from './userPreferences.js'
 
 export class WeatherApiError extends Error {
   code: 'NO_KEY' | 'REQUEST_FAILED'
@@ -26,7 +27,7 @@ export async function fetchOpenWeatherCurrent(params: {
     throw new WeatherApiError('lat/lon or location query required')
   }
 
-  const userKey = localStorage.getItem('owm_api_key')?.trim()
+  const userKey = getOwmApiKeyForActiveUser().trim()
   const headers: Record<string, string> = {}
   if (userKey) headers['X-OWM-Api-Key'] = userKey
 

client/src/sw.ts

@@ -1,10 +1,18 @@
 /// <reference lib="webworker" />
+import { clientsClaim } from 'workbox-core'
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
 
 declare let self: ServiceWorkerGlobalScope
 
 precacheAndRoute(self.__WB_MANIFEST)
 cleanupOutdatedCaches()
+clientsClaim()
+
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') {
+    void self.skipWaiting()
+  }
+})
 
 interface PushPayload {
   title?: string

client/src/themes.css

@@ -6,6 +6,7 @@
 /* Fallback before JS hydrates (ocean · dark) */
 html {
   color-scheme: dark;
+  --app-theme-color: #0b0c10;
   --app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
   --app-text: #f1f5f9;
   --app-text-heading: #f8fafc;
@@ -61,6 +62,7 @@ html {
 /* ===== OCEAN · DARK (default) ===== */
 html.scheme-dark.theme-ocean {
   color-scheme: dark;
+  --app-theme-color: #0b0c10;
   --app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
   --app-text: #f1f5f9;
   --app-text-heading: #f8fafc;
@@ -116,6 +118,7 @@ html.scheme-dark.theme-ocean {
 /* ===== OCEAN · LIGHT ===== */
 html.scheme-light.theme-ocean {
   color-scheme: light;
+  --app-theme-color: #e2e8f0;
   --app-body-bg: linear-gradient(165deg, #dbeafe 0%, #f8fafc 42%, #e2e8f0 100%);
   --app-text: #1e293b;
   --app-text-heading: #0f172a;
@@ -171,6 +174,7 @@ html.scheme-light.theme-ocean {
 /* ===== MATERIAL · DARK ===== */
 html.scheme-dark.theme-material {
   color-scheme: dark;
+  --app-theme-color: #121212;
   --app-body-bg: #121212;
   --app-text: #f1f5f9;
   --app-text-heading: #f8fafc;
@@ -226,6 +230,7 @@ html.scheme-dark.theme-material {
 /* ===== MATERIAL · LIGHT ===== */
 html.scheme-light.theme-material {
   color-scheme: light;
+  --app-theme-color: #fafafa;
   --app-body-bg: #fafafa;
   --app-text: #212121;
   --app-text-heading: #111827;
@@ -281,6 +286,7 @@ html.scheme-light.theme-material {
 /* ===== CUPERTINO · DARK ===== */
 html.scheme-dark.theme-cupertino {
   color-scheme: dark;
+  --app-theme-color: #000000;
   --app-body-bg: #000000;
   --app-text: #ffffff;
   --app-text-heading: #ffffff;
@@ -336,6 +342,7 @@ html.scheme-dark.theme-cupertino {
 /* ===== CUPERTINO · LIGHT ===== */
 html.scheme-light.theme-cupertino {
   color-scheme: light;
+  --app-theme-color: #f2f2f7;
   --app-body-bg: #f2f2f7;
   --app-text: #1c1c1e;
   --app-text-heading: #000000;
@@ -396,3 +403,12 @@ html.scheme-light.theme-cupertino {
 html.scheme-light #root {
   border-inline-color: var(--app-border-subtle);
 }
+
+/* Bridge legacy index.css tokens to appearance (avoids system color-scheme drift) */
+html.scheme-light,
+html.scheme-dark {
+  --text: var(--app-text);
+  --text-h: var(--app-text-heading);
+  --code-bg: var(--app-icon-btn-bg);
+  --border: var(--app-border-subtle);
+}

client/src/utils/courseAngle.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import {
+  cardinalToDegrees,
+  degreesToCardinal,
+  formatCourseAngle,
+  isCardinalDirection,
+  normalizeCourseAngleString,
+  normalizeWindDirectionString,
+  parseCourseAngle,
+  pointerAngleToDegrees,
+  snapDegrees
+} from './courseAngle.js'
+
+describe('parseCourseAngle', () => {
+  it('parses padded and plain degrees', () => {
+    expect(parseCourseAngle('042')).toBe(42)
+    expect(parseCourseAngle('185°')).toBe(185)
+    expect(parseCourseAngle('360')).toBe(0)
+  })
+
+  it('rejects invalid values', () => {
+    expect(parseCourseAngle('999')).toBeNull()
+    expect(parseCourseAngle('abc')).toBeNull()
+  })
+
+  it('parses cardinal labels', () => {
+    expect(parseCourseAngle('NW')).toBe(315)
+  })
+})
+
+describe('snapDegrees', () => {
+  it('snaps to step', () => {
+    expect(snapDegrees(47, 5)).toBe(45)
+    expect(snapDegrees(358, 5)).toBe(0)
+  })
+})
+
+describe('cardinal helpers', () => {
+  it('roundtrips cardinal through degrees', () => {
+    expect(degreesToCardinal(225)).toBe('SW')
+    expect(cardinalToDegrees('SW')).toBe(225)
+    expect(isCardinalDirection('nne')).toBe(true)
+  })
+})
+
+describe('pointerAngleToDegrees', () => {
+  it('returns 0 for north', () => {
+    expect(pointerAngleToDegrees(100, 50, 100, 100)).toBe(0)
+  })
+
+  it('returns 90 for east', () => {
+    expect(Math.round(pointerAngleToDegrees(150, 100, 100, 100))).toBe(90)
+  })
+})
+
+describe('normalizeCourseAngleString', () => {
+  it('keeps empty when allowed', () => {
+    expect(normalizeCourseAngleString('', { allowEmpty: true })).toBe('')
+  })
+
+  it('normalizes numeric course', () => {
+    expect(normalizeCourseAngleString('042')).toBe('42')
+    expect(formatCourseAngle(42, true)).toBe('042')
+  })
+})
+
+describe('normalizeWindDirectionString', () => {
+  it('preserves cardinal wind', () => {
+    expect(normalizeWindDirectionString('nw')).toBe('NW')
+  })
+
+  it('normalizes degree wind', () => {
+    expect(normalizeWindDirectionString('090')).toBe('90')
+  })
+})

client/src/utils/courseAngle.ts

@@ -0,0 +1,160 @@
+export const CARDINAL_DIRECTIONS = [
+  'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE',
+  'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'
+] as const
+
+export type CardinalDirection = (typeof CARDINAL_DIRECTIONS)[number]
+export type CourseStep = 1 | 5 | 10
+
+const CARDINAL_SET = new Set<string>(CARDINAL_DIRECTIONS)
+
+export function isCardinalDirection(value: string): boolean {
+  return CARDINAL_SET.has(value.trim().toUpperCase())
+}
+
+export function cardinalToDegrees(label: string): number | null {
+  const upper = label.trim().toUpperCase()
+  const index = CARDINAL_DIRECTIONS.indexOf(upper as CardinalDirection)
+  if (index < 0) return null
+  return (index * 22.5) % 360
+}
+
+export function degreesToCardinal(degrees: number): CardinalDirection {
+  const normalized = ((degrees % 360) + 360) % 360
+  const index = Math.round(normalized / 22.5) % 16
+  return CARDINAL_DIRECTIONS[index]
+}
+
+export function snapDegrees(degrees: number, step: CourseStep): number {
+  const normalized = ((degrees % 360) + 360) % 360
+  const snapped = Math.round(normalized / step) * step
+  return snapped >= 360 ? 0 : snapped
+}
+
+/** 0° = north, clockwise (maritime compass). */
+export function pointerAngleToDegrees(
+  clientX: number,
+  clientY: number,
+  centerX: number,
+  centerY: number
+): number {
+  const dx = clientX - centerX
+  const dy = centerY - clientY
+  const radians = Math.atan2(dx, dy)
+  let degrees = (radians * 180) / Math.PI
+  if (degrees < 0) degrees += 360
+  return degrees
+}
+
+export function parseCourseAngle(value: string): number | null {
+  const trimmed = value.trim().replace(/°/g, '')
+  if (!trimmed) return null
+
+  const cardinalDeg = cardinalToDegrees(trimmed)
+  if (cardinalDeg !== null) return Math.round(cardinalDeg)
+
+  if (!/^\d{1,3}$/.test(trimmed)) return null
+  const degrees = parseInt(trimmed, 10)
+  if (Number.isNaN(degrees)) return null
+  if (degrees === 360) return 0
+  if (degrees < 0 || degrees > 360) return null
+  return degrees
+}
+
+export function formatCourseAngle(degrees: number, pad = false): string {
+  const normalized = ((Math.round(degrees) % 360) + 360) % 360
+  const text = String(normalized)
+  return pad ? text.padStart(3, '0') : text
+}
+
+export function normalizeCourseAngleString(
+  value: string,
+  options?: { allowEmpty?: boolean }
+): string {
+  const trimmed = value.trim()
+  if (!trimmed) return options?.allowEmpty ? '' : ''
+
+  if (isCardinalDirection(trimmed)) {
+    return trimmed.toUpperCase()
+  }
+
+  const parsed = parseCourseAngle(trimmed)
+  if (parsed === null) return trimmed
+  return formatCourseAngle(parsed)
+}
+
+export function normalizeWindDirectionString(value: string): string {
+  const trimmed = value.trim()
+  if (!trimmed) return ''
+
+  if (isCardinalDirection(trimmed)) {
+    return trimmed.toUpperCase()
+  }
+
+  const parsed = parseCourseAngle(trimmed)
+  if (parsed === null) return trimmed
+  return formatCourseAngle(parsed)
+}
+
+export function valueToDialDegrees(value: string, allowCardinal = false): number {
+  const parsed = parseCourseAngle(value)
+  if (parsed !== null) return parsed
+  if (allowCardinal && isCardinalDirection(value)) {
+    return cardinalToDegrees(value) ?? 0
+  }
+  return 0
+}
+
+export type CourseOutputMode = 'degrees' | 'cardinal'
+
+export function resolveCourseOutputMode(
+  value: string,
+  displayMode: 'degrees' | 'cardinal' | 'auto',
+  allowCardinal: boolean
+): CourseOutputMode {
+  if (!allowCardinal || displayMode === 'degrees') return 'degrees'
+  if (displayMode === 'cardinal') return 'cardinal'
+  return isCardinalDirection(value) ? 'cardinal' : 'degrees'
+}
+
+export function dialDegreesToStorageValue(
+  degrees: number,
+  mode: CourseOutputMode,
+  step: CourseStep
+): string {
+  const snapped = snapDegrees(degrees, step)
+  if (mode === 'cardinal') return degreesToCardinal(snapped)
+  return formatCourseAngle(snapped)
+}
+
+export function formatCourseDisplay(
+  value: string,
+  allowCardinal: boolean
+): string {
+  if (!value.trim()) return '—'
+  if (allowCardinal && isCardinalDirection(value)) return value.toUpperCase()
+  const parsed = parseCourseAngle(value)
+  if (parsed === null) return value
+  return `${formatCourseAngle(parsed, true)}°`
+}
+
+const STEP_STORAGE_KEY = 'kaptein-course-dial-step'
+
+export function loadCourseDialStep(): CourseStep {
+  try {
+    const raw = sessionStorage.getItem(STEP_STORAGE_KEY)
+    if (raw === '5') return 5
+    if (raw === '10') return 10
+  } catch {
+    /* ignore */
+  }
+  return 1
+}
+
+export function saveCourseDialStep(step: CourseStep): void {
+  try {
+    sessionStorage.setItem(STEP_STORAGE_KEY, String(step))
+  } catch {
+    /* ignore */
+  }
+}

client/src/utils/dateTimeFormat.ts

@@ -0,0 +1,37 @@
+/** BCP 47 locales that use 24-hour clock for Intl formatting. */
+export function resolveIntlLocale(language?: string): string {
+  const lng = (language ?? 'en').toLowerCase()
+  return lng.startsWith('de') ? 'de-DE' : 'en-GB'
+}
+
+const APP_DATE_TIME_OPTIONS: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false
+}
+
+const APP_TIME_OPTIONS: Intl.DateTimeFormatOptions = {
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false
+}
+
+function toDate(value: Date | string | number): Date | null {
+  const date = value instanceof Date ? value : new Date(value)
+  return Number.isNaN(date.getTime()) ? null : date
+}
+
+export function formatAppDateTime(value: Date | string | number, language?: string): string {
+  const date = toDate(value)
+  if (!date) return String(value)
+  return date.toLocaleString(resolveIntlLocale(language), APP_DATE_TIME_OPTIONS)
+}
+
+export function formatAppTime(value: Date | string | number, language?: string): string {
+  const date = toDate(value)
+  if (!date) return String(value)
+  return date.toLocaleTimeString(resolveIntlLocale(language), APP_TIME_OPTIONS)
+}

client/src/utils/locale.test.ts

@@ -0,0 +1,62 @@
+import type { i18n as I18nInstance } from 'i18next'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { resolveIntlLocale } from './dateTimeFormat.js'
+import { initSeo, normalizeSeoLang, updatePageSeo } from './seo.js'
+
+const HTML_LANG = /^de|en$/
+
+function createMockI18n(language: string): I18nInstance {
+  return {
+    isInitialized: true,
+    language,
+    t: (key: string) => key,
+    on: vi.fn()
+  } as unknown as I18nInstance
+}
+
+describe('normalizeSeoLang', () => {
+  it.each([
+    ['de', 'de'],
+    ['de-DE', 'de'],
+    ['en', 'en'],
+    ['en-US', 'en'],
+    ['en-GB', 'en']
+  ] as const)('maps %s to short code %s', (input, expected) => {
+    expect(normalizeSeoLang(input)).toBe(expected)
+  })
+})
+
+describe('updatePageSeo html lang', () => {
+  beforeEach(() => {
+    document.documentElement.lang = 'de'
+    window.history.replaceState({}, '', '/')
+  })
+
+  it.each([
+    ['de', 'de'],
+    ['en', 'en'],
+    ['en-GB', 'en']
+  ] as const)('sets html lang to %s when i18n language is %s', (i18nLanguage, expectedLang) => {
+    initSeo(createMockI18n(i18nLanguage))
+    updatePageSeo()
+
+    expect(document.documentElement.lang).toBe(expectedLang)
+    expect(document.documentElement.lang).toMatch(HTML_LANG)
+  })
+})
+
+describe('resolveIntlLocale', () => {
+  it('uses full BCP 47 tags for Intl formatting only', () => {
+    expect(resolveIntlLocale('de')).toBe('de-DE')
+    expect(resolveIntlLocale('en')).toBe('en-GB')
+  })
+
+  it('does not reuse Intl locale tags for html lang', () => {
+    const intlLocale = resolveIntlLocale('en')
+    const htmlLang = normalizeSeoLang('en')
+
+    expect(intlLocale).toBe('en-GB')
+    expect(htmlLang).toBe('en')
+    expect(htmlLang).not.toBe(intlLocale)
+  })
+})

client/src/utils/logEntryPayload.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildLogEntryPayload,
+  hasUnsavedEventDraft,
+  isLogEventDraftEmpty,
+  normalizeLogEvent,
+  type LogEventPayload
+} from './logEntryPayload.js'
+
+const emptyDraft = (): LogEventPayload =>
+  normalizeLogEvent({ time: '12:34' })
+
+const filledDraft = (): LogEventPayload =>
+  normalizeLogEvent({ time: '12:34', remarks: 'Wind dreht' })
+
+describe('logEntryPayload event drafts', () => {
+  it('treats time-only draft as empty', () => {
+    expect(isLogEventDraftEmpty(emptyDraft())).toBe(true)
+  })
+
+  it('detects draft with content', () => {
+    expect(isLogEventDraftEmpty(filledDraft())).toBe(false)
+  })
+
+  it('does not flag empty open form as unsaved', () => {
+    expect(hasUnsavedEventDraft(emptyDraft(), null, [])).toBe(false)
+  })
+
+  it('flags new event draft with content as unsaved', () => {
+    expect(hasUnsavedEventDraft(filledDraft(), null, [])).toBe(true)
+  })
+
+  it('flags edited event when values differ', () => {
+    const events = [emptyDraft()]
+    const edited = filledDraft()
+    expect(hasUnsavedEventDraft(edited, 0, events)).toBe(true)
+  })
+
+  it('ignores edit mode when values match', () => {
+    const events = [filledDraft()]
+    expect(hasUnsavedEventDraft(filledDraft(), 0, events)).toBe(false)
+  })
+})
+
+describe('buildLogEntryPayload greywater', () => {
+  const base = {
+    date: '2026-05-31',
+    dayOfTravel: '1',
+    departure: 'Kiel',
+    destination: 'Laboe',
+    freshwater: { morning: 0, refilled: 0, evening: 0, consumption: 0 },
+    fuel: { morning: 0, refilled: 0, evening: 0, consumption: 0 },
+    events: [] as LogEventPayload[]
+  }
+
+  it('includes greywater when level > 0', () => {
+    const payload = buildLogEntryPayload({ ...base, greywater: { level: 45 } })
+    expect(payload.greywater).toEqual({ level: 45 })
+  })
+
+  it('omits greywater when level is 0', () => {
+    const payload = buildLogEntryPayload({ ...base, greywater: { level: 0 } })
+    expect(payload.greywater).toBeUndefined()
+  })
+})

client/src/utils/logEntryPayload.ts

@@ -1,3 +1,8 @@
+import {
+  normalizeCourseAngleString,
+  normalizeWindDirectionString
+} from './courseAngle.js'
+
 export interface LogEventPayload {
   time: string
   mgk: string
@@ -17,6 +22,56 @@ export interface LogEventPayload {
   remarks: string
 }
 
+/** Local time as HH:MM (24-hour). */
+export function currentLocalTimeHHMM(date: Date = new Date()): string {
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${hours}:${minutes}`
+}
+
+/** Parse 24h or 12h (AM/PM) time strings to HH:MM. */
+export function parseTimeToHHMM(value: string): string | null {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+
+  const amPm = trimmed.match(/^(\d{1,2}):(\d{2})(?::\d{2})?\s*(AM|PM)$/i)
+  if (amPm) {
+    let hours = parseInt(amPm[1], 10)
+    const minutes = parseInt(amPm[2], 10)
+    const isPm = amPm[3].toUpperCase() === 'PM'
+    if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) return null
+    if (hours === 12) hours = isPm ? 12 : 0
+    else if (isPm) hours += 12
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
+  }
+
+  const h24 = trimmed.match(/^(\d{1,2}):(\d{2})(?::\d{2})?$/)
+  if (h24) {
+    const hours = parseInt(h24[1], 10)
+    const minutes = parseInt(h24[2], 10)
+    if (hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59) {
+      return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
+    }
+  }
+
+  return null
+}
+
+export function isValidTimeHHMM(value: string): boolean {
+  return parseTimeToHHMM(value) !== null
+}
+
+export function splitTimeHHMM(value: string): { hours: string; minutes: string } {
+  const parsed = parseTimeToHHMM(value) ?? currentLocalTimeHHMM()
+  return { hours: parsed.slice(0, 2), minutes: parsed.slice(3, 5) }
+}
+
+export function joinTimeHHMM(hours: string, minutes: string): string {
+  const h = Math.min(23, Math.max(0, parseInt(hours, 10) || 0))
+  const m = Math.min(59, Math.max(0, parseInt(minutes, 10) || 0))
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
+}
+
 const LOG_EVENT_FIELDS: (keyof LogEventPayload)[] = [
   'time', 'mgk', 'rwk', 'windPressure', 'windDirection', 'windStrength', 'seaState',
   'weatherIcon', 'current', 'heel', 'sailsOrMotor', 'logReading', 'distance',
@@ -28,11 +83,11 @@ export function normalizeLogEvent(event: Partial<LogEventPayload> | Record<strin
   const e = event as Record<string, unknown>
   const timeRaw = String(e.time ?? '').trim()
   const normalized: LogEventPayload = {
-    time: timeRaw.length >= 5 ? timeRaw.slice(0, 5) : timeRaw,
-    mgk: '',
-    rwk: '',
+    time: parseTimeToHHMM(timeRaw) ?? (timeRaw.length >= 5 ? timeRaw.slice(0, 5) : timeRaw),
+    mgk: normalizeCourseAngleString(String(e.mgk ?? ''), { allowEmpty: true }),
+    rwk: normalizeCourseAngleString(String(e.rwk ?? ''), { allowEmpty: true }),
     windPressure: '',
-    windDirection: '',
+    windDirection: normalizeWindDirectionString(String(e.windDirection ?? '')),
     windStrength: '',
     seaState: '',
     weatherIcon: '',
@@ -46,7 +101,7 @@ export function normalizeLogEvent(event: Partial<LogEventPayload> | Record<strin
     remarks: ''
   }
   for (const key of LOG_EVENT_FIELDS) {
-    if (key === 'time') continue
+    if (key === 'time' || key === 'mgk' || key === 'rwk' || key === 'windDirection') continue
     normalized[key] = String(e[key] ?? '').trim()
   }
   return normalized
@@ -56,6 +111,27 @@ export function logEventsEqual(a: LogEventPayload, b: LogEventPayload): boolean
   return LOG_EVENT_FIELDS.every((key) => a[key] === b[key])
 }
 
+const LOG_EVENT_CONTENT_FIELDS = LOG_EVENT_FIELDS.filter((key) => key !== 'time')
+
+/** Draft with only a time (or empty fields) — not an unsaved log entry change. */
+export function isLogEventDraftEmpty(event: LogEventPayload): boolean {
+  return LOG_EVENT_CONTENT_FIELDS.every((key) => !event[key]?.trim())
+}
+
+/** Whether the event form holds unsaved changes worth merging on page save. */
+export function hasUnsavedEventDraft(
+  draft: LogEventPayload,
+  editingEventIndex: number | null,
+  events: LogEventPayload[]
+): boolean {
+  if (!isValidTimeHHMM(draft.time)) return false
+  if (editingEventIndex !== null) {
+    const original = events[editingEventIndex]
+    return original ? !logEventsEqual(draft, original) : false
+  }
+  return !isLogEventDraftEmpty(draft)
+}
+
 /** Chronological order: earliest time first (HH:MM). */
 export function sortLogEventsByTime<T extends LogEventPayload>(events: T[]): T[] {
   return [...events].sort((a, b) => (a.time || '').localeCompare(b.time || ''))
@@ -68,6 +144,7 @@ export interface LogEntryPayloadInput {
   destination: string
   freshwater: { morning: number; refilled: number; evening: number; consumption: number }
   fuel: { morning: number; refilled: number; evening: number; consumption: number }
+  greywater?: { level: number }
   trackDistanceNm?: number
   trackSpeedMaxKn?: number
   trackSpeedAvgKn?: number
@@ -93,5 +170,12 @@ export function buildLogEntryPayload(input: LogEntryPayloadInput): Record<string
     payload.motorHours = Number(input.motorHours.toFixed(2))
   }
 
+  if (input.greywater !== undefined) {
+    const level = Number(input.greywater.level) || 0
+    if (level > 0) {
+      payload.greywater = { level: Number(level.toFixed(1)) }
+    }
+  }
+
   return payload
 }

client/src/utils/logEntryTankLevels.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import {
+  carryOverFromPreviousDay,
+  getClosingGreywaterLevel,
+  hasCarryOverFromPreviousDay
+} from './logEntryTankLevels.js'
+
+describe('logEntryTankLevels greywater carry-over', () => {
+  it('returns previous greywater level as starting value', () => {
+    const carryOver = carryOverFromPreviousDay({
+      destination: 'Oslo',
+      freshwater: { morning: 100, refilled: 0, evening: 80, consumption: 20 },
+      fuel: { morning: 200, refilled: 0, evening: 150, consumption: 50 },
+      greywater: { level: 42 }
+    })
+
+    expect(carryOver.greywaterLevel).toBe(42)
+    expect(carryOver.freshwater.morning).toBe(80)
+    expect(carryOver.fuel.morning).toBe(150)
+    expect(carryOver.departure).toBe('Oslo')
+  })
+
+  it('defaults greywater to 0 when previous day has none', () => {
+    expect(carryOverFromPreviousDay(null).greywaterLevel).toBe(0)
+    expect(getClosingGreywaterLevel(undefined)).toBe(0)
+  })
+
+  it('treats greywater level as carry-over candidate', () => {
+    expect(
+      hasCarryOverFromPreviousDay({
+        freshwater: { morning: 0, refilled: 0, evening: 0, consumption: 0 },
+        fuel: { morning: 0, refilled: 0, evening: 0, consumption: 0 },
+        greywaterLevel: 15,
+        departure: ''
+      })
+    ).toBe(true)
+  })
+})

client/src/utils/logEntryTankLevels.ts

@@ -41,12 +41,14 @@ export function getClosingTankLevel(tank?: Partial<TankLevels> | null): number {
 export interface LogEntryTankSource {
   freshwater?: Partial<TankLevels>
   fuel?: Partial<TankLevels>
+  greywater?: { level?: number }
   destination?: string
 }
 
 export interface CarryOverFromPreviousDay {
   freshwater: TankLevels
   fuel: TankLevels
+  greywaterLevel: number
   departure: string
 }
 
@@ -59,6 +61,10 @@ export function formatTankLiters(liters: number): string {
   return Number.isInteger(liters) ? String(liters) : liters.toFixed(1)
 }
 
+export function getClosingGreywaterLevel(greywater?: { level?: number } | null): number {
+  return Number(greywater?.level) || 0
+}
+
 export function carryOverTankLevelsFromPreviousDay(previousEntry?: LogEntryTankSource | null): { freshwater: TankLevels; fuel: TankLevels } {
   if (!previousEntry) {
     return { freshwater: emptyTankLevels(), fuel: emptyTankLevels() }
@@ -73,10 +79,16 @@ export function carryOverTankLevelsFromPreviousDay(previousEntry?: LogEntryTankS
 export function carryOverFromPreviousDay(previousEntry?: LogEntryTankSource | null): CarryOverFromPreviousDay {
   const { freshwater, fuel } = carryOverTankLevelsFromPreviousDay(previousEntry)
   const departure = previousEntry?.destination?.trim() || ''
+  const greywaterLevel = getClosingGreywaterLevel(previousEntry?.greywater)
 
-  return { freshwater, fuel, departure }
+  return { freshwater, fuel, greywaterLevel, departure }
 }
 
 export function hasCarryOverFromPreviousDay(carryOver: CarryOverFromPreviousDay): boolean {
-  return carryOver.freshwater.morning > 0 || carryOver.fuel.morning > 0 || carryOver.departure.length > 0
+  return (
+    carryOver.freshwater.morning > 0 ||
+    carryOver.fuel.morning > 0 ||
+    carryOver.greywaterLevel > 0 ||
+    carryOver.departure.length > 0
+  )
 }

client/src/utils/tankCapacity.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import {
+  clampTankLiters,
+  computeEveningTankMaxLiters,
+  computeRefilledTankMaxLiters,
+  extractTankCapacitiesFromYacht,
+  formatTankLitersForInput,
+  parseOptionalTankLiters,
+  tankCapacityInputFromStored
+} from './tankCapacity.js'
+
+describe('tankCapacity', () => {
+  it('parses optional liters with comma decimal', () => {
+    expect(parseOptionalTankLiters('200')).toBe(200)
+    expect(parseOptionalTankLiters('12,5')).toBe(12.5)
+    expect(parseOptionalTankLiters('')).toBeUndefined()
+  })
+
+  it('rejects negative or invalid liters', () => {
+    expect(() => parseOptionalTankLiters('-1')).toThrow('invalid_tank_liters')
+    expect(() => parseOptionalTankLiters('abc')).toThrow('invalid_tank_liters')
+  })
+
+  it('extracts capacities from yacht payload', () => {
+    expect(
+      extractTankCapacitiesFromYacht({
+        freshwaterCapacityL: 300,
+        fuelCapacityL: 120,
+        greywaterCapacityL: 80
+      })
+    ).toEqual({
+      freshwaterCapacityL: 300,
+      fuelCapacityL: 120,
+      greywaterCapacityL: 80
+    })
+    expect(extractTankCapacitiesFromYacht({ name: 'Test' })).toEqual({})
+  })
+
+  it('formats stored capacity for input', () => {
+    expect(tankCapacityInputFromStored(150)).toBe('150')
+    expect(formatTankLitersForInput(12.5)).toBe('12.5')
+  })
+
+  it('clamps liters to max when set', () => {
+    expect(clampTankLiters(250, 200)).toBe(200)
+    expect(clampTankLiters(-5, 200)).toBe(0)
+    expect(clampTankLiters(50)).toBe(50)
+  })
+
+  it('computes refilled max as capacity minus morning', () => {
+    expect(computeRefilledTankMaxLiters('10', 60)).toBe(50)
+    expect(computeRefilledTankMaxLiters('60', 60)).toBeUndefined()
+    expect(computeRefilledTankMaxLiters('10', undefined)).toBeUndefined()
+  })
+
+  it('computes evening max as morning plus refilled capped by capacity', () => {
+    expect(computeEveningTankMaxLiters('10', '20', 60)).toBe(30)
+    expect(computeEveningTankMaxLiters('40', '40', 60)).toBe(60)
+    expect(computeEveningTankMaxLiters('10', '20')).toBe(30)
+    expect(computeEveningTankMaxLiters('0', '0', 60)).toBeUndefined()
+  })
+})

client/src/utils/tankCapacity.ts

@@ -0,0 +1,101 @@
+import { formatTankLiters } from './logEntryTankLevels.js'
+
+export interface VesselTankCapacities {
+  freshwaterCapacityL?: number
+  fuelCapacityL?: number
+  greywaterCapacityL?: number
+}
+
+export function parseOptionalTankLiters(input: string): number | undefined {
+  const trimmed = input.trim().replace(',', '.')
+  if (!trimmed) return undefined
+  const parsed = Number(trimmed)
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    throw new Error('invalid_tank_liters')
+  }
+  return parsed
+}
+
+export function formatTankLitersForInput(liters: number): string {
+  return formatTankLiters(liters)
+}
+
+function capacityFromStored(value: unknown): number | undefined {
+  if (value == null || value === '') return undefined
+  if (typeof value === 'number' && Number.isFinite(value) && value >= 0) return value
+  if (typeof value === 'string') {
+    const trimmed = value.trim().replace(',', '.')
+    if (!trimmed) return undefined
+    const parsed = Number(trimmed)
+    if (Number.isFinite(parsed) && parsed >= 0) return parsed
+  }
+  return undefined
+}
+
+export function tankCapacityInputFromStored(value: unknown): string {
+  const n = capacityFromStored(value)
+  return n != null ? formatTankLitersForInput(n) : ''
+}
+
+export function extractTankCapacitiesFromYacht(decrypted: unknown): VesselTankCapacities {
+  if (!decrypted || typeof decrypted !== 'object') return {}
+  const y = decrypted as Record<string, unknown>
+  const capacities: VesselTankCapacities = {}
+  const fw = capacityFromStored(y.freshwaterCapacityL)
+  const fuel = capacityFromStored(y.fuelCapacityL)
+  const gw = capacityFromStored(y.greywaterCapacityL)
+  if (fw != null) capacities.freshwaterCapacityL = fw
+  if (fuel != null) capacities.fuelCapacityL = fuel
+  if (gw != null) capacities.greywaterCapacityL = gw
+  return capacities
+}
+
+/** Parse a liter amount from form state (string). */
+export function parseTankLitersFromInput(input: string): number {
+  const trimmed = input.trim().replace(',', '.')
+  if (!trimmed) return 0
+  const parsed = Number(trimmed)
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0
+}
+
+/**
+ * Max for refilled amount: remaining capacity after morning level.
+ * Returns undefined when no positive max (no slider).
+ */
+export function computeRefilledTankMaxLiters(
+  morningInput: string,
+  tankCapacityL?: number
+): number | undefined {
+  if (tankCapacityL == null || tankCapacityL <= 0) return undefined
+  const remaining = tankCapacityL - parseTankLitersFromInput(morningInput)
+  if (remaining <= 0) return undefined
+  return remaining
+}
+
+/**
+ * Max for evening fill level: morning + refilled, capped by tank capacity when known.
+ * Returns undefined when no positive max (no slider).
+ */
+export function computeEveningTankMaxLiters(
+  morningInput: string,
+  refilledInput: string,
+  tankCapacityL?: number
+): number | undefined {
+  const sum = parseTankLitersFromInput(morningInput) + parseTankLitersFromInput(refilledInput)
+  if (sum <= 0) return undefined
+
+  if (tankCapacityL != null && tankCapacityL > 0) {
+    return Math.min(tankCapacityL, sum)
+  }
+
+  return sum
+}
+
+/** Clamp numeric liter value to [0, max] when max is known. */
+export function clampTankLiters(value: number, maxLiters?: number): number {
+  const clamped = Math.max(0, value)
+  if (maxLiters != null && maxLiters > 0) {
+    return Math.min(clamped, maxLiters)
+  }
+  return clamped
+}

client/tsconfig.app.json

@@ -21,5 +21,6 @@
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts"]
 }

client/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { VitePWA } from 'vite-plugin-pwa'
@@ -20,6 +21,10 @@ function readAppVersion(): string {
 
 // https://vite.dev/config/
 export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+    include: ['src/**/*.test.ts']
+  },
   define: {
     __APP_VERSION__: JSON.stringify(readAppVersion())
   },
@@ -42,6 +47,9 @@ export default defineConfig({
       srcDir: 'src',
       filename: 'sw.ts',
       registerType: 'prompt',
+      devOptions: {
+        enabled: false
+      },
       includeAssets: ['favicon.ico', 'logo.png'],
       injectManifest: {
         globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2,webmanifest}']

docs/marketing/beta-flyer.html

@@ -147,7 +147,7 @@
     .features {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 2.5mm 6mm;
+      gap: 1.8mm 6mm;
       flex-shrink: 0;
       position: relative;
       z-index: 1;
@@ -158,7 +158,7 @@
       gap: 2.5mm;
       align-items: flex-start;
       font-size: 10.5pt;
-      line-height: 1.4;
+      line-height: 1.28;
       color: #e2e8f0;
     }
 
@@ -322,13 +322,14 @@
       <div class="feature"><span class="feature-icon">✦</span><span>GPS-Track Upload (GPX/KML) mit Kartendarstellung</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Streckenstatistik</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Foto-Anhänge pro Reisetag</span></div>
-      <div class="feature"><span class="feature-icon">✦</span><span>Foto-Anhänge für Skipper und Crew</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Foto-Avatarbilder für Skipper und Crew</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Crew einladen — gemeinsam am Logbuch arbeiten</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>PDF- &amp; CSV-Export</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Verschlüsseltes Backup &amp; Wiederherstellung</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Logbuch mit Freunden teilen</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Beliebig viele Schiffe und Logbücher</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span class="lang-list"><span class="lang-item"><svg class="feature-flag" viewBox="0 0 5 3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect width="5" height="1" fill="#000"/><rect y="1" width="5" height="1" fill="#D00"/><rect y="2" width="5" height="1" fill="#FFCE00"/></svg>Deutsch</span><span class="lang-sep">&amp;</span><span class="lang-item"><svg class="feature-flag" viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><clipPath id="gb-a"><path d="M0 0v30h60V0z"/></clipPath><clipPath id="gb-b"><path d="M30 15h30v15zv15H0z"/></clipPath><g clip-path="url(#gb-a)"><path d="M0 0v30h60V0z" fill="#012169"/><path d="M0 0l60 30m0-30L0 30" stroke="#fff" stroke-width="6"/><path d="M0 0l60 30m0-30L0 30" clip-path="url(#gb-b)" stroke="#C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/></g></svg>Englisch</span></span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>3 Themes, jeweils mit heller und dunkler Variante</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Crafted in Kiel.Sailing.City.</span></div>
     </section>
 

docs/plan-compass-course-dial.md

@@ -0,0 +1,296 @@
+# Implementierungsplan: 360°-Kompass-Dial für Kursangaben
+
+**Status:** Implementiert (Branch `feat/compass-course-dial`)  
+**Bezug:** Ereignisprotokoll (`LogEntryEditor`), Felder MgK / rwK / Windrichtung  
+**Vorbild im Projekt:** `EventTimeInput24h` (spezialisierte Eingabe + Text-Fallback, keine API-Änderung)
+
+---
+
+## 1. Ziel und Nicht-Ziele
+
+### Ziel
+- Eingabe von Kurswinkeln (0°–360°) über einen **mobil tauglichen Kompass-Ring** (Drag/Tap).
+- **Hybrid-Eingabe:** Dial + numerisches Feld (wie bei der Uhrzeit).
+- Einheitliche Normalisierung (`000`–`360`, Speicherung als String ohne `°`).
+- Wiederverwendbare Komponente für **MgK**, **rwK** und optional **Wind** (Gradmodus).
+
+### Nicht-Ziele (v1)
+- Keine Änderung am Server-Schema oder Verschlüsselungsformat.
+- Keine Device-Orientation / echter Kompass des Geräts (optional Phase 2).
+- Kein Ersatz der Ablenkungstabelle (`DeviationForm`) – bleibt 10°-Raster.
+- Windrichtung bleibt **kompatibel** mit bestehenden Kardinalwerten (`N`, `NNE`, …) aus Wetter-API.
+
+---
+
+## 2. Ist-Analyse
+
+| Feld | Speicherformat | UI heute | Besonderheit |
+|------|----------------|----------|--------------|
+| `mgk` | String, z. B. `"042"` | Text `placeholder="e.g. 180"` | Grad, PDF/CSV mit `°` |
+| `rwk` | String, z. B. `"038"` | Text | Grad |
+| `windDirection` | String | Text | Oft **Kardinal** (`NW`) via OpenWeather; manuell auch Grad möglich |
+
+**Betroffene Dateien (Lesen/Schreiben, unverändert speichern):**
+- `client/src/components/LogEntryEditor.tsx` – Formular + Tabelle
+- `client/src/utils/logEntryPayload.ts` – `normalizeLogEvent`
+- `client/src/services/pdfExport.ts`, `csvExport.ts` – Export
+- `client/src/services/demoLogbookData.ts` – Demo-Daten
+
+**Referenz-Pattern:** `EventTimeInput24h.tsx` + `parseTimeToHHMM` / `joinTimeHHMM` in `logEntryPayload.ts`.
+
+---
+
+## 3. Architektur
+
+```
+client/src/utils/courseAngle.ts          # Parsing, Normalisierung, Winkel-Mathe
+client/src/components/CourseDialInput.tsx # UI: SVG-Ring + Zahleneingabe
+client/src/components/CourseDialField.tsx # Label + Fehler + Modus (optional)
+client/src/App.css                       # .course-dial-* Styles
+client/src/components/LogEntryEditor.tsx # Integration MgK/rwk/Wind
+client/src/i18n/locales/{de,en}.json     # Strings
+```
+
+### 3.1 Utility-Schicht `courseAngle.ts`
+
+| Funktion | Verhalten |
+|----------|-----------|
+| `parseCourseAngle(value)` | `"185"`, `"185°"`, `" 042 "` → `185` oder `null` |
+| `formatCourseAngle(degrees, pad?)` | `185` → `"185"` oder `"185"` / `"042"` (pad optional) |
+| `normalizeCourseAngleString(value)` | Parse oder Fallback; für `normalizeLogEvent` |
+| `pointerAngleToDegrees(clientX, clientY, cx, cy)` | `atan2`, 0° = Nord, Uhrzeigersinn maritim |
+| `degreesToCardinal(deg)` | 16-Sektoren (bestehende Logik aus Wetter-Import) |
+| `cardinalToDegrees(label)` | Reverse für Dial-Anzeige bei Kardinal-Strings |
+| `snapDegrees(deg, step)` | `step` 1, 5 oder 10 |
+
+**Konvention:** 0° = Nord, Winkel im Uhrzeigersinn (Kompass/Navigation), konsistent mit `wind.deg` in `LogEntryEditor`.
+
+### 3.2 Komponente `CourseDialInput`
+
+**Props:**
+```ts
+interface CourseDialInputProps {
+  value: string                    // roher Formularwert
+  onChange: (value: string) => void
+  disabled?: boolean
+  step?: 1 | 5 | 10                // Standard: 1
+  allowCardinal?: boolean          // Wind: true → Anzeige/Export Kardinal optional
+  displayMode?: 'degrees' | 'cardinal' | 'auto'
+  'aria-label': string
+  id?: string
+}
+```
+
+**UI-Aufbau:**
+1. **SVG-Ring** (ca. 200–240 px Desktop, min. 160 px Mobile)
+   - Gradmarken alle 30° (Labels 000, 030, … 330)
+   - Zeiger / Highlight-Bogen bei aktuellem Wert
+   - `touch-action: none` auf Ringfläche
+2. **Zentrum:** große Anzeige `185°` oder `NW`
+3. **Darunter:** `<input type="text" inputMode="numeric">` mit Validierung on blur
+4. **Fein/Grob-Toggle** (optional): 1° / 5° / 10° (lokal in `sessionStorage` merken)
+
+**Interaktion:**
+- `pointerdown` → `setPointerCapture` → `pointermove` → Winkel berechnen → snappen → `onChange`
+- Tap auf Ring: Winkel zum Tap-Punkt
+- Tastatur am Zahleneingang: Pfeiltasten ±step (wenn fokussiert)
+
+**Barrierefreiheit:**
+- `role="slider"`, `aria-valuemin={0}`, `aria-valuemax={360}`, `aria-valuenow`, `aria-label`
+- Zahleneingang bleibt voll bedienbar ohne Dial
+- Fokus-Reihenfolge: Input vor Dial oder umgekehrt (Input zuerst empfohlen)
+
+### 3.3 Windrichtung: Modus-Entscheidung
+
+**Empfehlung v1:** Zwei Darstellungsmodi, **ein Speicher-String**:
+
+| Modus | Speicher | Dial |
+|-------|----------|------|
+| Grad | `"225"` | Standard-Dial |
+| Kardinal | `"SW"` | Dial zeigt Sektor-Mitte (225°), Änderung schreibt Kardinal |
+
+- Wetter-Import (`handleFetchWeather`) setzt weiter Kardinal → Dial mappt auf Sektor.
+- Nutzer kann auf Grad umschalten (kleiner Link „Als Grad“ / Toggle).
+- `normalizeLogEvent`: erkennt Kardinal vs. Zahl, keine erzwungene Konvertierung beim Laden.
+
+---
+
+## 4. Integration `LogEntryEditor`
+
+### 4.1 Layout (mobil-first)
+
+**Problem:** Formular ist bereits dicht (`form-grid`).
+
+**Lösung:** Kurs-Block als **eigene Sektion** „Kurs“ mit Tabs:
+
+```
+[ MgK ] [ rwK ]     ← Tab-Leiste (Segmented Control)
+┌─────────────────────────┐
+│     CourseDialInput      │  ← ein Dial, Wert je Tab
+│     + Zahleneingang      │
+└─────────────────────────┘
+```
+
+- Ein Dial, State wechselt mit Tab (`activeCourseField: 'mgk' | 'rwk'`).
+- Spart Platz; MgK/rwk werden nacheinander gesetzt (typischer Workflow).
+
+**Windrichtung:** eigene Zeile unter Wetter-Grid; kompakter Dial (kleinere `size="sm"`) oder ausklappbar „Wind am Kompass setzen“.
+
+### 4.2 Ersetzungen
+
+| Alt | Neu |
+|-----|-----|
+| `<input>` MgK | `<CourseDialInput value={evMgk} … />` |
+| `<input>` rwK | Tab + gleicher Dial |
+| `<input>` Wind | `<CourseDialInput allowCardinal displayMode="auto" … />` |
+
+### 4.3 `normalizeLogEvent`
+
+```ts
+mgk: normalizeCourseAngleString(e.mgk, { allowEmpty: true }),
+rwk: normalizeCourseAngleString(e.rwk, { allowEmpty: true }),
+windDirection: normalizeWindDirectionString(e.windDirection), // Kardinal ODER Grad-String
+```
+
+Bestehende Demo- und Export-Daten bleiben gültig.
+
+---
+
+## 5. Styling (`App.css`)
+
+- `.course-dial` – Container, max-width, zentriert
+- `.course-dial__svg` – `width: 100%; aspect-ratio: 1`
+- `.course-dial__ring` – stroke, hover/active
+- `.course-dial__needle` – transform `rotate(${deg}deg)`
+- `.course-dial__value` – tabular-nums, große Schrift
+- `.course-dial__input` – wie `.time-input-24h`
+- `.course-dial-tabs` – Segmented Control (bestehende `--app-accent-*` Tokens)
+- **Responsive:** `@media (max-width: 640px)` – Dial max  min(72vw, 220px); Touch-Target Ring ≥ 44 px
+
+**Theme:** `currentColor` / CSS-Variablen (`--app-text`, `--app-accent-light`) – Dark/Light via `themes.css`.
+
+---
+
+## 6. Internationalisierung
+
+Neue Keys unter `logs.*`:
+
+| Key | DE | EN |
+|-----|----|----|
+| `course_dial_hint` | Am Ring drehen oder Grad eingeben | Drag the ring or enter degrees |
+| `course_step_fine` | 1° | 1° |
+| `course_step_medium` | 5° | 5° |
+| `course_step_coarse` | 10° | 10° |
+| `course_tab_mgk` | MgK | MgK |
+| `course_tab_rwk` | rwK | rwK |
+| `course_invalid` | Ungültiger Kurs (0–360) | Invalid course (0–360) |
+| `wind_mode_cardinal` | Kardinal | Cardinal |
+| `wind_mode_degrees` | Grad | Degrees |
+
+---
+
+## 7. Phasen und Aufwand
+
+### Phase A – Fundament (1–1,5 Tage)
+- [ ] `courseAngle.ts` + Unit-Tests (Vitest einrichten falls noch nicht vorhanden)
+- [ ] `CourseDialInput` (nur Grad, step 1/5, Pointer + Input)
+- [ ] CSS Grundlayout
+- [ ] Story/manuell: isoliert in kleiner Demo-Route oder Storybook (optional)
+
+**Akzeptanz:** Dial setzt 0–360, Input synchron, Mobile Chrome/Safari getestet.
+
+### Phase B – LogEntryEditor MgK/rwk (1 Tag)
+- [ ] Tab-UI MgK / rwK
+- [ ] Integration, `normalizeLogEvent`
+- [ ] Read-only: Dial disabled, Wert nur Anzeige
+
+**Akzeptanz:** Ereignis speichern/laden/PDF unverändert korrekt; Skipper-Signatur-Flow unberührt.
+
+### Phase C – Windrichtung (0,5–1 Tag)
+- [ ] `allowCardinal` / `displayMode`
+- [ ] Wetter-Import kompatibel
+- [ ] Toggle Kardinal ↔ Grad
+
+**Akzeptanz:** API-Wind `NW` zeigt Dial auf NW; manuelle Grad-Eingabe möglich.
+
+### Phase D – Polish (1–1,5 Tage)
+- [ ] Fein/Grob-Schritte + Persistenz
+- [ ] Tastatur (Pfeiltasten), Fokus-Stile
+- [ ] Reduzierte Bewegung (`prefers-reduced-motion`: nur Input, Dial statisch)
+- [ ] Plausible-Event optional: `Course Dial Used` (nur wenn Analytics gewünscht)
+- [ ] Dokumentation in `docs/plausible-events.md` falls Event
+
+### Phase E – QA & Edge Cases (0,5 Tag)
+- [ ] Leerer Wert, 360 → 0 oder 360 (festlegen: **360 als Eingabe → speichern `360` oder `000`** – Empfehlung: intern 0–359 speichern, Anzeige 360 = 0)
+- [ ] Sehr lange Formulare auf kleinen Screens (Scroll, kein Layout-Sprung)
+- [ ] Offline/PWA, kein Regression bei `buildLogEntryPayload` / Signatur-Hash
+
+**Gesamtaufwand:** ca. **4–5 Entwicklertage** für vollständige Implementierung inkl. Wind + A11y + QA.
+
+---
+
+## 8. Tests
+
+### Unit (`courseAngle.ts`)
+- Parse: `"042"`, `"360"`, `"999"` (invalid), `"NW"` (wind helper)
+- `pointerAngleToDegrees` mit festen Koordinaten
+- `snapDegrees(47, 5)` → 45
+- `degreesToCardinal` / `cardinalToDegrees` Roundtrip
+
+### Komponente (Testing Library)
+- `onChange` bei simuliertem Pointer-Event (oder direktem `setValue` via Input)
+- Disabled-State
+- `aria-valuenow` aktualisiert
+
+### Manuell / UAT
+| # | Schritt | Erwartung |
+|---|---------|-----------|
+| 1 | Neues Ereignis, MgK am Dial auf 090 | Tabelle zeigt `90°`, PDF/CSV `90` |
+| 2 | rwK per Tastatur `270` | Dial zeigt West |
+| 3 | Wetter laden | Wind `NW`, Dial passend |
+| 4 | iPhone Safari, Daumen-Drag | Kein Scroll-Leaken, Wert stabil |
+| 5 | Nur Tastatur | Input allein speicherbar |
+| 6 | Bestehenden Eintrag bearbeiten | Alte Werte korrekt im Dial |
+
+---
+
+## 9. Risiken und Mitigationen
+
+| Risiko | Mitigation |
+|--------|------------|
+| Dial zu groß auf Mobile | Tabs + max-width; Wind einklappbar |
+| Scroll vs. Drag | `touch-action: none` nur am Ring |
+| Kardinal/Grad-Inkonsistenz | `displayMode="auto"`, kein Silent-Overwrite |
+| Signatur-Hash ändert sich | Nur Normalisierung die bereits gültige Strings erlaubt; keine Rundung beim Speichern ohne Nutzeraktion |
+| Performance bei vielen Events | Dial nur im Formular, nicht in Tabelle |
+
+---
+
+## 10. Optionale Erweiterungen (Post-v1)
+
+1. **MgK → rwK aus Ablenkungstabelle** vorschlagen (Lookup `deviations[roundedMgK]`).
+2. **DeviceOrientation** für Ring-Ausrichtung (mit Permission-Hinweis).
+3. **Haptik** `navigator.vibrate(10)` bei Snap (Android).
+4. **DeviationForm:** visueller Kompass statt nur Grid (separate Story).
+
+---
+
+## 11. Abnahmekriterien (Definition of Done)
+
+- [ ] MgK und rwK im Ereignisformular per Dial + Input editierbar (Desktop + Mobile).
+- [ ] Windrichtung: Dial + Kardinal/Grad kompatibel mit Wetter-Import.
+- [ ] Keine Backend-/Migrations-Änderung; bestehende Logbücher laden unverändert.
+- [ ] PDF/CSV/Signatur-Verhalten identisch zu heute (nur Darstellung/Eingabe verbessert).
+- [ ] WCAG: Slider + Input bedienbar, `prefers-reduced-motion` berücksichtigt.
+- [ ] DE/EN vollständig übersetzt.
+
+---
+
+## 12. Empfohlene Umsetzungsreihenfolge (Commits)
+
+1. `feat(course): add courseAngle utilities and tests`
+2. `feat(course): add CourseDialInput component and styles`
+3. `feat(logs): integrate compass dial for MgK and rwK`
+4. `feat(logs): wind direction dial with cardinal support`
+5. `fix(logs): a11y and reduced-motion for course dial`
+6. `docs: compass course dial plan and plausible event` (optional)

scripts/update-prod.sh

@@ -59,7 +59,7 @@ bump_patch_version() {
 }
 
 ensure_clean_git_tree() {
-  if git diff-index --quiet HEAD -- && [ -z "$(git status --porcelain)" ]; then
+  if [ -z "$(git status --porcelain)" ]; then
     return 0
   fi