chore: release v0.1.0.67

Suppression wird vor dem Flush geprüft, damit gepufferte
needRefresh-Werte erhalten bleiben, bis die Unterdrückung endet.

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

VERSION

@@ -1 +1 @@
-0.1.0.59
+0.1.0.68

client/nginx.conf

@@ -4,7 +4,7 @@ server {
     client_max_body_size 50M;
 
     # Service worker and app shell must revalidate so PWA updates are detected
-    location ~* ^/(sw\.js|workbox-.*\.js|manifest\.webmanifest)$ {
+    location ~* ^/(sw\.js|workbox-.*\.js|manifest\.webmanifest|version\.json)$ {
         root /usr/share/nginx/html;
         add_header Cache-Control "no-cache, no-store, must-revalidate";
     }

client/src/App.css

@@ -1371,6 +1371,140 @@ html.scheme-dark .themed-select-option.is-selected {
   gap: 20px;
 }
 
+.dashboard-list-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dashboard-filter-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dashboard-sort-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dashboard-sort-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--app-text-muted);
+}
+
+.dashboard-sort-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: stretch;
+}
+
+.dashboard-sort-group {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 6px;
+}
+
+.dashboard-sort-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 8px;
+  border: 1px solid var(--app-border-subtle);
+  background: var(--app-surface-alt);
+  color: var(--app-text-muted);
+  cursor: pointer;
+  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
+}
+
+.dashboard-sort-btn:hover {
+  border-color: var(--app-border);
+  color: var(--app-text-heading);
+}
+
+.dashboard-sort-btn.is-active {
+  border-color: var(--app-accent-border);
+  background: var(--app-accent-bg);
+  color: var(--app-accent-light);
+}
+
+.dashboard-sort-btn:focus-visible {
+  outline: 2px solid var(--app-accent-focus-ring);
+  outline-offset: 2px;
+}
+
+.dashboard-filter-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--app-text-muted);
+  margin: 0;
+}
+
+.dashboard-filter-input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.dashboard-filter-icon {
+  position: absolute;
+  left: 14px;
+  color: var(--app-text-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.dashboard-filter-input {
+  width: 100%;
+  padding-left: 42px;
+  padding-right: 42px;
+  min-height: 44px;
+}
+
+.dashboard-filter-input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.dashboard-filter-clear {
+  position: absolute;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--app-text-muted);
+  cursor: pointer;
+  transition: color 0.2s, background-color 0.2s;
+}
+
+.dashboard-filter-clear:hover {
+  color: var(--app-text-heading);
+  background: var(--app-accent-bg);
+}
+
+.dashboard-filter-clear:focus-visible {
+  outline: 2px solid var(--app-accent-focus-ring);
+  outline-offset: 2px;
+}
+
+.dashboard-filter-meta {
+  margin: 0;
+  font-size: 13px;
+  color: var(--app-text-muted);
+}
+
 .section-title-bar {
   display: flex;
   justify-content: space-between;
@@ -2322,6 +2456,14 @@ html.scheme-dark .themed-select-option.is-selected {
     word-break: break-word;
   }
 
+  .dashboard-sort-row {
+    flex-direction: column;
+  }
+
+  .dashboard-sort-group {
+    flex: 1 1 100%;
+  }
+
   .logbooks-grid {
     grid-template-columns: 1fr;
     gap: 16px;
@@ -3068,6 +3210,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;
@@ -3540,6 +3774,59 @@ html.theme-cupertino .events-scroll-container {
   .stats-kpi-value {
     font-size: 20px;
   }
+
+  .profile-stats-section.form-card {
+    padding: 20px 16px;
+  }
+
+  .profile-stats-section .form-header {
+    margin-bottom: 12px;
+    gap: 10px;
+  }
+
+  .profile-stats-section .form-header h2 {
+    font-size: 18px;
+  }
+
+  .profile-stats-section .stats-subtitle {
+    font-size: 12px;
+    line-height: 1.35;
+  }
+
+  .profile-stats-kpi-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    margin-top: 0;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-card {
+    padding: 10px;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-icon {
+    margin-top: 0;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-label {
+    font-size: 11px;
+    margin-bottom: 2px;
+    line-height: 1.25;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-value {
+    font-size: 16px;
+  }
+
+  .profile-stats-kpi-grid .stats-kpi-unit {
+    font-size: 11px;
+  }
 }
 
 .signature-grid {

client/src/App.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import './App.css'
 import { DialogProvider } from './components/ModalDialog.tsx'
 import AuthOnboarding from './components/AuthOnboarding.tsx'
 import UserProfilePage from './components/UserProfilePage.tsx'
@@ -29,6 +28,7 @@ import {
   resolveColorScheme,
   subscribeToSystemColorScheme
 } from './services/appearance.js'
+import { syncAppearancePrefs } from './services/appearancePrefs.js'
 import { startBackgroundSync, stopBackgroundSync, syncAllLogbooks, subscribeToSyncState } from './services/sync.js'
 import ReadOnlyViewer from './components/ReadOnlyViewer.tsx'
 import DemoViewer from './components/DemoViewer.tsx'
@@ -151,6 +151,13 @@ function App() {
     })
   }, [])
 
+  useEffect(() => {
+    if (!isAuthenticated) return
+    const userId = localStorage.getItem('active_userid')
+    if (!userId) return
+    void syncAppearancePrefs(userId)
+  }, [isAuthenticated])
+
   useEffect(() => {
     const handleOnline = () => {
       setOnline(true)

client/src/components/AuthOnboarding.tsx

@@ -379,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>}
 

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/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: []

client/src/components/LogEntryEditor.tsx

@@ -42,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 }
@@ -50,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
@@ -72,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))
@@ -145,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 | ''>('')
@@ -249,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,
@@ -259,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
   ])
@@ -268,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({
@@ -527,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 {
@@ -541,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(() => {
@@ -580,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) || '')
@@ -613,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) || '')
@@ -1210,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"
@@ -1252,6 +1354,7 @@ export default function LogEntryEditor({
                   readOnly
                   tabIndex={-1}
                   aria-readonly="true"
+                  title={tankCapacityTooltip}
                 />
               </div>
             </div>
@@ -1264,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"
@@ -1306,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"
@@ -1322,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 */}

client/src/components/LogbookDashboard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
 import { fetchLogbooks, createLogbook, deleteLogbook, updateLogbookTitle, type DecryptedLogbook } from '../services/logbook.js'
@@ -7,7 +7,7 @@ import BetaBadge from './BetaBadge.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { logoutUser } from '../services/auth.js'
 import { useDialog } from './ModalDialog.tsx'
-import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
+import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff, Search, X, CalendarDays, CaseSensitive, ArrowUp, ArrowDown } from 'lucide-react'
 import DisclaimerHeaderButton from './DisclaimerHeaderButton.tsx'
 import FeedbackHeaderButton from './FeedbackHeaderButton.tsx'
 
@@ -17,6 +17,46 @@ interface LogbookDashboardProps {
   onOpenProfile: () => void
 }
 
+function logbookMatchesFilter(lb: DecryptedLogbook, query: string, locale: string): boolean {
+  const q = query.trim().toLowerCase()
+  if (!q) return true
+
+  if (lb.title.toLowerCase().includes(q)) return true
+
+  const updated = new Date(lb.updatedAt)
+  const year = updated.getFullYear().toString()
+  if (year.includes(q)) return true
+
+  const dateLabel = updated.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  }).toLowerCase()
+  if (dateLabel.includes(q)) return true
+
+  return false
+}
+
+type LogbookSortKey = 'name' | 'date'
+type LogbookSortDirection = 'asc' | 'desc'
+
+function sortLogbooks(
+  items: DecryptedLogbook[],
+  sortBy: LogbookSortKey,
+  direction: LogbookSortDirection,
+  locale: string
+): DecryptedLogbook[] {
+  const sorted = [...items]
+  sorted.sort((a, b) => {
+    const cmp =
+      sortBy === 'name'
+        ? a.title.localeCompare(b.title, locale, { sensitivity: 'base' })
+        : new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
+    return direction === 'asc' ? cmp : -cmp
+  })
+  return sorted
+}
+
 export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProfile }: LogbookDashboardProps) {
   const { t, i18n } = useTranslation()
   const { showConfirm } = useDialog()
@@ -28,6 +68,10 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
   const [loading, setLoading] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [filterQuery, setFilterQuery] = useState('')
+  const [sortBy, setSortBy] = useState<LogbookSortKey>('date')
+  const [sortDirection, setSortDirection] = useState<LogbookSortDirection>('desc')
+  const filterInputRef = useRef<HTMLInputElement>(null)
   const [online, setOnline] = useState(navigator.onLine)
   const [username] = useState(localStorage.getItem('active_username') || 'Skipper')
 
@@ -156,6 +200,25 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
   const ownedLogbooks = logbooks.filter((lb) => !lb.isShared)
   const sharedLogbooks = logbooks.filter((lb) => lb.isShared)
 
+  const filterActive = filterQuery.trim().length > 0
+  const filteredOwnedLogbooks = useMemo(
+    () => ownedLogbooks.filter((lb) => logbookMatchesFilter(lb, filterQuery, i18n.language)),
+    [ownedLogbooks, filterQuery, i18n.language]
+  )
+  const filteredSharedLogbooks = useMemo(
+    () => sharedLogbooks.filter((lb) => logbookMatchesFilter(lb, filterQuery, i18n.language)),
+    [sharedLogbooks, filterQuery, i18n.language]
+  )
+  const sortedOwnedLogbooks = useMemo(
+    () => sortLogbooks(filteredOwnedLogbooks, sortBy, sortDirection, i18n.language),
+    [filteredOwnedLogbooks, sortBy, sortDirection, i18n.language]
+  )
+  const sortedSharedLogbooks = useMemo(
+    () => sortLogbooks(filteredSharedLogbooks, sortBy, sortDirection, i18n.language),
+    [filteredSharedLogbooks, sortBy, sortDirection, i18n.language]
+  )
+  const filteredLogbookCount = sortedOwnedLogbooks.length + sortedSharedLogbooks.length
+
   const renderLogbookCard = (lb: DecryptedLogbook) => {
     const isEditingTitle = editingLogbookId === lb.id
 
@@ -376,17 +439,115 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
           ) : logbooks.length === 0 ? (
             <div className="dashboard-status-msg glass">{t('dashboard.no_logbooks')}</div>
           ) : (
-            <div className="logbook-sections">
-              {ownedLogbooks.length > 0 && renderLogbookSection(
-                sharedLogbooks.length > 0 ? t('dashboard.section_owned') : t('dashboard.title'),
-                ownedLogbooks
+            <>
+              <div className="dashboard-list-controls">
+                <div className="dashboard-filter-bar">
+                  <label className="dashboard-filter-label" htmlFor="logbook-list-filter">
+                    {t('dashboard.filter_label')}
+                  </label>
+                  <div className="dashboard-filter-input-wrap">
+                    <Search size={18} className="dashboard-filter-icon" aria-hidden="true" />
+                    <input
+                      ref={filterInputRef}
+                      id="logbook-list-filter"
+                      type="search"
+                      className="input-text dashboard-filter-input"
+                      placeholder={t('dashboard.filter_placeholder')}
+                      value={filterQuery}
+                      onChange={(e) => setFilterQuery(e.target.value)}
+                      autoComplete="off"
+                      spellCheck={false}
+                      aria-describedby={filterActive ? 'logbook-filter-status' : undefined}
+                    />
+                    {filterActive && (
+                      <button
+                        type="button"
+                        className="dashboard-filter-clear"
+                        onClick={() => {
+                          setFilterQuery('')
+                          filterInputRef.current?.focus()
+                        }}
+                        title={t('dashboard.filter_clear')}
+                        aria-label={t('dashboard.filter_clear')}
+                      >
+                        <X size={16} aria-hidden="true" />
+                      </button>
+                    )}
+                  </div>
+                  {filterActive && (
+                    <p id="logbook-filter-status" className="dashboard-filter-meta" role="status">
+                      {t('dashboard.filter_results', { count: filteredLogbookCount })}
+                    </p>
+                  )}
+                </div>
+
+                <div className="dashboard-sort-bar">
+                  <span className="dashboard-sort-label">{t('dashboard.sort_label')}</span>
+                  <div className="dashboard-sort-row">
+                    <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_by_label')}>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortBy === 'name' ? ' is-active' : ''}`}
+                        onClick={() => setSortBy('name')}
+                        aria-pressed={sortBy === 'name'}
+                        aria-label={t('dashboard.sort_by_name')}
+                        title={t('dashboard.sort_by_name')}
+                      >
+                        <CaseSensitive size={16} aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortBy === 'date' ? ' is-active' : ''}`}
+                        onClick={() => setSortBy('date')}
+                        aria-pressed={sortBy === 'date'}
+                        aria-label={t('dashboard.sort_by_date')}
+                        title={t('dashboard.sort_by_date')}
+                      >
+                        <CalendarDays size={16} aria-hidden="true" />
+                      </button>
+                    </div>
+                    <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_dir_label')}>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortDirection === 'asc' ? ' is-active' : ''}`}
+                        onClick={() => setSortDirection('asc')}
+                        aria-pressed={sortDirection === 'asc'}
+                        aria-label={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
+                        title={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
+                      >
+                        <ArrowUp size={16} aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortDirection === 'desc' ? ' is-active' : ''}`}
+                        onClick={() => setSortDirection('desc')}
+                        aria-pressed={sortDirection === 'desc'}
+                        aria-label={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
+                        title={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
+                      >
+                        <ArrowDown size={16} aria-hidden="true" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {filterActive && filteredLogbookCount === 0 ? (
+                <div className="dashboard-status-msg glass">{t('dashboard.filter_no_results')}</div>
+              ) : (
+                <div className="logbook-sections">
+                  {sortedOwnedLogbooks.length > 0 && renderLogbookSection(
+                    sortedSharedLogbooks.length > 0 ? t('dashboard.section_owned') : t('dashboard.title'),
+                    sortedOwnedLogbooks
+                  )}
+                  {sortedSharedLogbooks.length > 0 && renderLogbookSection(
+                    t('dashboard.section_shared'),
+                    sortedSharedLogbooks,
+                    t('dashboard.section_shared_hint')
+                  )}
+                </div>
               )}
-              {sharedLogbooks.length > 0 && renderLogbookSection(
-                t('dashboard.section_shared'),
-                sharedLogbooks,
-                t('dashboard.section_shared_hint')
-              )}
-            </div>
+            </>
           )}
         </section>
       </main>

client/src/components/SettingsForm.tsx

@@ -6,6 +6,12 @@ import LogbookBackupPanel from './LogbookBackupPanel.tsx'
 import { useDialog } from './ModalDialog.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
@@ -151,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)
@@ -175,6 +218,7 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
 
       setInviteLink(link)
       trackPlausibleEvent(PlausibleEvents.INVITE_GENERATED)
+      await promptPushAfterInviteCreated()
     } catch (err: unknown) {
       console.error('Failed to generate invite:', err)
       showAlert(err instanceof Error ? err.message : 'Failed to generate invite link.')

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

@@ -726,7 +726,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
               </div>
             </section>
 
-            <section className="form-card">
+            <section className="form-card profile-stats-section">
               <div className="form-header">
                 <BarChart2 size={24} className="form-icon" />
                 <div>
@@ -736,7 +736,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
               </div>
 
               {(statsTotals || profile) && (
-                <div className="stats-kpi-grid">
+                <div className="stats-kpi-grid profile-stats-kpi-grid">
                   <KpiCard
                     icon={<BookOpen size={20} />}
                     label={t('profile.stats_logbooks')}

client/src/components/UserProfilePreferences.tsx

@@ -5,6 +5,7 @@ import ThemedSelect from './ThemedSelect.tsx'
 import PushNotificationSettings from './PushNotificationSettings.tsx'
 import PwaInstallPrompt from './PwaInstallPrompt.tsx'
 import { notifyAppearanceChanged } from '../services/appearance.js'
+import { saveAppearancePrefsToServer } from '../services/appearancePrefs.js'
 import { useAppTour } from '../context/AppTourContext.tsx'
 import {
   getColorSchemePreference,
@@ -32,6 +33,9 @@ export default function UserProfilePreferences({ userId }: UserProfilePreference
     setThemePreference(userId, nextTheme)
     setColorSchemePreference(userId, nextColorScheme)
     notifyAppearanceChanged()
+    void saveAppearancePrefsToServer(nextTheme, nextColorScheme).catch((err) => {
+      console.warn('Failed to save appearance prefs to server:', err)
+    })
   }
 
   const handleThemeChange = (nextTheme: string) => {

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/hooks/usePwaUpdate.ts

@@ -1,13 +1,19 @@
 import { useEffect, useRef } from 'react'
 import { useRegisterSW } from 'virtual:pwa-register/react'
+import {
+  forcePwaRecovery,
+  markReloadAttempt,
+  recentlyAttemptedReload,
+  triggerServiceWorkerUpdate
+} from '../services/pwaStartup.js'
+import { isDeployedVersionNewer } from '../services/pwaVersion.js'
 
-const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000
+const UPDATE_CHECK_INTERVAL_MS = 15 * 60 * 1000
 const UPDATE_SUPPRESS_KEY = 'pwa_update_suppress_until'
 const UPDATE_SUPPRESS_MS = 30_000
-const UPDATE_DISMISS_SUPPRESS_MS = 60 * 60 * 1000
-const UPDATE_RELOAD_FALLBACK_MS = 2000
-/** Prevent Android PWA cold-start reload loops from onNeedReload. */
-const PWA_INITIAL_RELOAD_KEY = 'pwa_sw_initial_reload_done'
+const UPDATE_DISMISS_SUPPRESS_MS = 15 * 60 * 1000
+const UPDATE_RELOAD_FALLBACK_MS = 2_000
+const UPDATE_HARD_RECOVERY_MS = 5_000
 
 function isUpdateSuppressed(): boolean {
   const suppressUntil = Number(sessionStorage.getItem(UPDATE_SUPPRESS_KEY) || '0')
@@ -22,10 +28,16 @@ function clearUpdateSuppression(): void {
   sessionStorage.removeItem(UPDATE_SUPPRESS_KEY)
 }
 
-function scheduleUpdateChecks(registration: ServiceWorkerRegistration): () => void {
+function scheduleUpdateChecks(
+  registration: ServiceWorkerRegistration,
+  onOutdated: () => void
+): () => void {
   const checkForUpdate = () => {
     if (isUpdateSuppressed()) return
     registration.update().catch(() => {})
+    void isDeployedVersionNewer().then((outdated) => {
+      if (outdated) onOutdated()
+    })
   }
 
   const onVisibilityChange = () => {
@@ -34,17 +46,44 @@ function scheduleUpdateChecks(registration: ServiceWorkerRegistration): () => vo
     }
   }
 
+  const onOnline = () => {
+    checkForUpdate()
+  }
+
   document.addEventListener('visibilitychange', onVisibilityChange)
-  const intervalId = window.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS)
+  window.addEventListener('online', onOnline)
+  const updateIntervalId = window.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS)
+
+  checkForUpdate()
 
   return () => {
     document.removeEventListener('visibilitychange', onVisibilityChange)
-    window.clearInterval(intervalId)
+    window.removeEventListener('online', onOnline)
+    window.clearInterval(updateIntervalId)
   }
 }
 
+function reloadForServiceWorkerTakeover(): void {
+  if (recentlyAttemptedReload()) return
+  markReloadAttempt()
+  clearUpdateSuppression()
+  window.location.reload()
+}
+
 export function usePwaUpdate() {
   const cleanupRef = useRef<(() => void) | null>(null)
+  const reloadFallbackTimerRef = useRef<number | null>(null)
+  const forceRecoveryTimerRef = useRef<number | null>(null)
+  const setNeedRefreshRef = useRef<((value: boolean) => void) | null>(null)
+  const pendingNeedRefreshRef = useRef<boolean | null>(null)
+
+  const applyNeedRefresh = (value: boolean) => {
+    if (setNeedRefreshRef.current) {
+      setNeedRefreshRef.current(value)
+      return
+    }
+    pendingNeedRefreshRef.current = value
+  }
 
   const {
     needRefresh: [needRefresh, setNeedRefresh],
@@ -52,39 +91,55 @@ export function usePwaUpdate() {
   } = useRegisterSW({
     immediate: !import.meta.env.DEV,
     onNeedReload() {
-      // First SW takeover requires one reload; guard against repeated reloads on Android PWA resume.
-      if (sessionStorage.getItem(PWA_INITIAL_RELOAD_KEY)) {
-        return
-      }
-      sessionStorage.setItem(PWA_INITIAL_RELOAD_KEY, '1')
-      clearUpdateSuppression()
-      setNeedRefresh(false)
-      window.location.reload()
+      reloadForServiceWorkerTakeover()
     },
     onNeedRefresh() {
       if (isUpdateSuppressed()) return
-      setNeedRefresh(true)
+      applyNeedRefresh(true)
     },
     onRegisteredSW(_swUrl: string, registration: ServiceWorkerRegistration | undefined) {
       if (!registration) return
 
       if (isUpdateSuppressed() || !registration.waiting) {
-        setNeedRefresh(false)
+        applyNeedRefresh(false)
       }
 
       cleanupRef.current?.()
-      cleanupRef.current = scheduleUpdateChecks(registration)
+      cleanupRef.current = scheduleUpdateChecks(registration, () => {
+        if (isUpdateSuppressed()) return
+        applyNeedRefresh(true)
+      })
     }
   })
 
+  setNeedRefreshRef.current = setNeedRefresh
+
   useEffect(() => {
     if (isUpdateSuppressed()) {
       setNeedRefresh(false)
+    } else if (pendingNeedRefreshRef.current !== null) {
+      const pending = pendingNeedRefreshRef.current
+      pendingNeedRefreshRef.current = null
+      setNeedRefresh(pending)
     }
 
+    void isDeployedVersionNewer().then((outdated) => {
+      if (outdated) {
+        setNeedRefresh(true)
+      }
+    })
+
     return () => {
       cleanupRef.current?.()
       cleanupRef.current = null
+      if (reloadFallbackTimerRef.current !== null) {
+        window.clearTimeout(reloadFallbackTimerRef.current)
+        reloadFallbackTimerRef.current = null
+      }
+      if (forceRecoveryTimerRef.current !== null) {
+        window.clearTimeout(forceRecoveryTimerRef.current)
+        forceRecoveryTimerRef.current = null
+      }
     }
   }, [setNeedRefresh])
 
@@ -93,11 +148,24 @@ export function usePwaUpdate() {
     suppressUpdatePrompt()
 
     await updateServiceWorker(true)
+    await triggerServiceWorkerUpdate()
 
-    // vite-plugin-pwa reloads via the "controlling" event; fallback if that does not fire.
-    window.setTimeout(() => {
-      window.location.reload()
+    if (reloadFallbackTimerRef.current !== null) {
+      window.clearTimeout(reloadFallbackTimerRef.current)
+    }
+    if (forceRecoveryTimerRef.current !== null) {
+      window.clearTimeout(forceRecoveryTimerRef.current)
+    }
+
+    reloadFallbackTimerRef.current = window.setTimeout(() => {
+      reloadFallbackTimerRef.current = null
+      reloadForServiceWorkerTakeover()
     }, UPDATE_RELOAD_FALLBACK_MS)
+
+    forceRecoveryTimerRef.current = window.setTimeout(() => {
+      forceRecoveryTimerRef.current = null
+      void forcePwaRecovery()
+    }, UPDATE_HARD_RECOVERY_MS)
   }
 
   const dismissUpdate = () => {

client/src/i18n/locales/de.json

@@ -117,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",
@@ -138,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",
@@ -183,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",
@@ -294,7 +304,23 @@
       "edit_title": "Logbuch umbenennen",
       "edit_placeholder": "Neuer Name des Logbuchs",
       "edit_success": "Logbuch erfolgreich umbenannt",
-      "edit_btn": "Umbenennen"
+      "edit_btn": "Umbenennen",
+      "filter_label": "Logbücher filtern",
+      "filter_placeholder": "Name, Jahr oder Datum …",
+      "filter_clear": "Filter zurücksetzen",
+      "filter_results": "{{count}} Treffer",
+      "filter_no_results": "Keine Logbücher passen zu deiner Suche. Probiere einen anderen Namen oder ein anderes Jahr.",
+      "sort_label": "Sortieren",
+      "sort_by_label": "Sortieren nach",
+      "sort_by_name": "Name",
+      "sort_by_date": "Datum",
+      "sort_dir_label": "Reihenfolge",
+      "sort_asc": "Aufsteigend",
+      "sort_desc": "Absteigend",
+      "sort_name_asc": "Name A bis Z",
+      "sort_name_desc": "Name Z bis A",
+      "sort_date_asc": "Älteste zuerst",
+      "sort_date_desc": "Neueste zuerst"
     },
     "profile": {
       "title": "Benutzerprofil",
@@ -472,6 +498,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…",
+      "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",

client/src/i18n/locales/en.json

@@ -117,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",
@@ -138,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",
@@ -183,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",
@@ -294,7 +304,23 @@
       "edit_title": "Rename Logbook",
       "edit_placeholder": "New name of the logbook",
       "edit_success": "Logbook renamed successfully",
-      "edit_btn": "Rename"
+      "edit_btn": "Rename",
+      "filter_label": "Filter logbooks",
+      "filter_placeholder": "Name, year or date …",
+      "filter_clear": "Clear filter",
+      "filter_results": "{{count}} matches",
+      "filter_no_results": "No logbooks match your search. Try a different name or year.",
+      "sort_label": "Sort",
+      "sort_by_label": "Sort by",
+      "sort_by_name": "Name",
+      "sort_by_date": "Date",
+      "sort_dir_label": "Order",
+      "sort_asc": "Ascending",
+      "sort_desc": "Descending",
+      "sort_name_asc": "Name A to Z",
+      "sort_name_desc": "Name Z to A",
+      "sort_date_asc": "Oldest first",
+      "sort_date_desc": "Newest first"
     },
     "profile": {
       "title": "User profile",
@@ -472,6 +498,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…",
+      "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",

client/src/index.css

@@ -1,64 +1,8 @@
-:root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+/* Minimal app shell — component styles live in App.css / themes.css */
 
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -66,44 +10,11 @@ body {
   margin: 0;
 }
 
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
+#root {
+  width: 100%;
+  max-width: 100%;
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

client/src/main.tsx

@@ -3,9 +3,15 @@ import { createRoot } from 'react-dom/client'
 import 'leaflet/dist/leaflet.css'
 import './themes.css'
 import './index.css'
+import './App.css'
 import './i18n'
 import App from './App.tsx'
 import { applyAppearanceToDocument } from './services/appearance.ts'
+import {
+  installStaleAssetRecovery,
+  markReloadAttempt,
+  reconcileVersionOnStartup
+} from './services/pwaStartup.ts'
 
 /** Stale PWA precache on localhost can shadow Vite dev modules. */
 async function clearDevServiceWorkerCaches(): Promise<void> {
@@ -35,8 +41,19 @@ function renderBootstrapError(message: string): void {
 
 async function bootstrap(): Promise<void> {
   applyAppearanceToDocument()
+  installStaleAssetRecovery()
   await clearDevServiceWorkerCaches()
 
+  const startupResult = await reconcileVersionOnStartup()
+  if (startupResult === 'reload') {
+    markReloadAttempt()
+    window.location.reload()
+    return
+  }
+  if (startupResult === 'recovered') {
+    return
+  }
+
   const rootEl = document.getElementById('root')
   if (!rootEl) {
     throw new Error('Missing #root element')

client/src/services/appearancePrefs.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  fetchAppearancePrefs,
+  saveAppearancePrefsToServer,
+  syncAppearancePrefs
+} from './appearancePrefs.js'
+import { setThemePreference } from './userPreferences.js'
+
+const USER_ID = 'appearance-sync-user'
+
+vi.mock('./api.js', () => ({
+  apiJson: vi.fn()
+}))
+
+import { apiJson } from './api.js'
+
+const mockedApiJson = vi.mocked(apiJson)
+
+describe('appearancePrefs', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    vi.clearAllMocks()
+  })
+
+  it('fetchAppearancePrefs returns defaults when not authenticated', async () => {
+    await expect(fetchAppearancePrefs()).resolves.toEqual({
+      theme: 'auto',
+      colorScheme: 'auto',
+      persisted: false
+    })
+    expect(mockedApiJson).not.toHaveBeenCalled()
+  })
+
+  it('syncAppearancePrefs applies server prefs after cache wipe', async () => {
+    localStorage.setItem('active_userid', USER_ID)
+    mockedApiJson.mockResolvedValueOnce({
+      theme: 'ocean',
+      colorScheme: 'dark',
+      persisted: true
+    })
+
+    const changed = vi.fn()
+    window.addEventListener('appearance-changed', changed)
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(localStorage.getItem(`user_pref_theme_${USER_ID}`)).toBe('ocean')
+    expect(localStorage.getItem(`user_pref_color_scheme_${USER_ID}`)).toBe('dark')
+    expect(changed).toHaveBeenCalledTimes(1)
+  })
+
+  it('syncAppearancePrefs uploads local prefs when server has none', async () => {
+    localStorage.setItem('active_userid', USER_ID)
+    setThemePreference(USER_ID, 'material')
+    mockedApiJson
+      .mockResolvedValueOnce({ theme: 'auto', colorScheme: 'auto', persisted: false })
+      .mockResolvedValueOnce({ theme: 'material', colorScheme: 'auto', persisted: true })
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(mockedApiJson).toHaveBeenCalledTimes(2)
+    expect(mockedApiJson).toHaveBeenLastCalledWith('/api/auth/appearance-prefs', {
+      method: 'PUT',
+      body: JSON.stringify({ theme: 'material', colorScheme: 'auto' })
+    })
+  })
+
+  it('saveAppearancePrefsToServer skips when not authenticated', async () => {
+    await saveAppearancePrefsToServer('ocean', 'light')
+    expect(mockedApiJson).not.toHaveBeenCalled()
+  })
+
+  it('syncAppearancePrefs skips server sync when userId does not match active session', async () => {
+    localStorage.setItem('active_userid', 'session-user')
+    setThemePreference('other-user', 'ocean')
+    mockedApiJson.mockResolvedValue({
+      theme: 'material',
+      colorScheme: 'dark',
+      persisted: true
+    })
+
+    await syncAppearancePrefs('other-user')
+
+    expect(mockedApiJson).not.toHaveBeenCalled()
+    expect(localStorage.getItem('user_pref_theme_other-user')).toBe('ocean')
+  })
+
+  it('syncAppearancePrefs skips server sync when active session is missing', async () => {
+    setThemePreference(USER_ID, 'ocean')
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(mockedApiJson).not.toHaveBeenCalled()
+    expect(localStorage.getItem(`user_pref_theme_${USER_ID}`)).toBe('ocean')
+  })
+})

client/src/services/appearancePrefs.ts

@@ -0,0 +1,76 @@
+import { apiJson } from './api.js'
+import { notifyAppearanceChanged } from './appearance.js'
+import {
+  getActiveUserId,
+  getColorSchemePreference,
+  getThemePreference,
+  setColorSchemePreference,
+  setThemePreference
+} from './userPreferences.js'
+
+const API_BASE = '/api/auth/appearance-prefs'
+
+export interface AppearancePrefs {
+  theme: string
+  colorScheme: string
+  persisted: boolean
+}
+
+function hasLocalAppearancePrefs(userId: string): boolean {
+  return (
+    localStorage.getItem(`user_pref_theme_${userId}`) != null ||
+    localStorage.getItem(`user_pref_color_scheme_${userId}`) != null
+  )
+}
+
+function resolveSyncedUserId(userId?: string | null): string | null {
+  const id = userId?.trim() || getActiveUserId()?.trim() || null
+  if (!id) return null
+
+  const activeId = getActiveUserId()?.trim() || null
+  if (!activeId || activeId !== id) return null
+
+  return id
+}
+
+export async function fetchAppearancePrefs(userId?: string | null): Promise<AppearancePrefs> {
+  if (!resolveSyncedUserId(userId)) {
+    return { theme: 'auto', colorScheme: 'auto', persisted: false }
+  }
+
+  return apiJson<AppearancePrefs>(API_BASE)
+}
+
+export async function saveAppearancePrefsToServer(
+  theme: string,
+  colorScheme: string,
+  userId?: string | null
+): Promise<void> {
+  if (!resolveSyncedUserId(userId)) return
+
+  await apiJson<AppearancePrefs>(API_BASE, {
+    method: 'PUT',
+    body: JSON.stringify({ theme, colorScheme })
+  })
+}
+
+/** Merge server-stored appearance with local cache (server wins after cache wipe). */
+export async function syncAppearancePrefs(userId?: string | null): Promise<void> {
+  const id = resolveSyncedUserId(userId)
+  if (!id) return
+
+  try {
+    const server = await fetchAppearancePrefs(id)
+
+    if (server.persisted) {
+      setThemePreference(id, server.theme)
+      setColorSchemePreference(id, server.colorScheme)
+    } else if (hasLocalAppearancePrefs(id)) {
+      await saveAppearancePrefsToServer(getThemePreference(id), getColorSchemePreference(id), id)
+    }
+  } catch (err) {
+    console.warn('Failed to sync appearance preferences:', err)
+  }
+
+  notifyAppearanceChanged()
+}

client/src/services/csvExport.ts

@@ -88,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'
   ];
 
@@ -123,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) {
@@ -137,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 {
@@ -153,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/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/pdfExport.ts

@@ -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,112 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  forcePwaRecovery,
+  markReloadAttempt,
+  recentlyAttemptedReload,
+  reconcileServiceWorkerOnStartup,
+  reconcileVersionOnStartup
+} from './pwaStartup.js'
+
+const STALE_RECOVERY_COUNT_KEY = 'pwa_stale_recovery_count'
+const STALE_RECOVERY_LAST_KEY = 'pwa_stale_recovery_last_ts'
+
+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('forcePwaRecovery stale counter reset', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+    vi.unstubAllEnvs()
+    vi.restoreAllMocks()
+  })
+
+  it('clears stale recovery counter before hard recovery reload', async () => {
+    vi.stubEnv('DEV', false)
+    sessionStorage.setItem(STALE_RECOVERY_COUNT_KEY, '2')
+    sessionStorage.setItem(STALE_RECOVERY_LAST_KEY, String(Date.now()))
+
+    const reload = vi.fn()
+    vi.stubGlobal('location', { reload })
+    vi.stubGlobal('caches', {
+      keys: vi.fn().mockResolvedValue([]),
+      delete: vi.fn()
+    })
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: {
+        getRegistrations: vi.fn().mockResolvedValue([])
+      }
+    })
+
+    await forcePwaRecovery()
+
+    expect(sessionStorage.getItem(STALE_RECOVERY_COUNT_KEY)).toBeNull()
+    expect(sessionStorage.getItem(STALE_RECOVERY_LAST_KEY)).toBeNull()
+    expect(reload).toHaveBeenCalledOnce()
+  })
+})
+
+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,
+          installing: null,
+          update: vi.fn().mockResolvedValue(undefined),
+          addEventListener: vi.fn()
+        }),
+        addEventListener: vi.fn()
+      }
+    })
+
+    await expect(reconcileServiceWorkerOnStartup()).resolves.toBe(false)
+  })
+})
+
+describe('reconcileVersionOnStartup', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+    vi.unstubAllEnvs()
+    vi.restoreAllMocks()
+  })
+
+  it('returns noop in dev mode', async () => {
+    vi.stubEnv('DEV', true)
+    await expect(reconcileVersionOnStartup()).resolves.toBe('noop')
+  })
+
+  it('returns noop when deployed version matches bundled version', async () => {
+    vi.stubEnv('DEV', false)
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ version: '0.1.0.57' })
+    }))
+    vi.stubGlobal('__APP_VERSION__', '0.1.0.57')
+
+    await expect(reconcileVersionOnStartup()).resolves.toBe('noop')
+  })
+})

client/src/services/pwaStartup.ts

@@ -0,0 +1,281 @@
+import { isNewerAppVersion, fetchDeployedVersion, getAppVersion } from './pwaVersion.js'
+
+const RELOAD_ATTEMPT_KEY = 'pwa_reload_attempt_ts'
+const COLD_START_UPDATE_KEY = 'pwa_coldstart_update_ts'
+const HARD_RECOVERY_KEY = 'pwa_hard_recovery_ts'
+const STALE_RECOVERY_COUNT_KEY = 'pwa_stale_recovery_count'
+const STALE_RECOVERY_LAST_KEY = 'pwa_stale_recovery_last_ts'
+const STALE_RECOVERY_WINDOW_MS = 60_000
+const RELOAD_DEBOUNCE_MS = 4_000
+const COLD_START_UPDATE_DEBOUNCE_MS = 15_000
+const HARD_RECOVERY_DEBOUNCE_MS = 30_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 recentlyAttemptedHardRecovery(now = Date.now()): boolean {
+  const last = Number(sessionStorage.getItem(HARD_RECOVERY_KEY) || '0')
+  return now - last < HARD_RECOVERY_DEBOUNCE_MS
+}
+
+function markHardRecoveryAttempt(now = Date.now()): void {
+  sessionStorage.setItem(HARD_RECOVERY_KEY, String(now))
+}
+
+function resetStaleRecoveryCount(): void {
+  sessionStorage.removeItem(STALE_RECOVERY_COUNT_KEY)
+  sessionStorage.removeItem(STALE_RECOVERY_LAST_KEY)
+}
+
+function incrementStaleRecoveryCount(now = Date.now()): number {
+  const last = Number(sessionStorage.getItem(STALE_RECOVERY_LAST_KEY) || '0')
+  let current = Number(sessionStorage.getItem(STALE_RECOVERY_COUNT_KEY) || '0')
+
+  if (now - last > STALE_RECOVERY_WINDOW_MS) {
+    current = 0
+  }
+
+  const next = current + 1
+  sessionStorage.setItem(STALE_RECOVERY_COUNT_KEY, String(next))
+  sessionStorage.setItem(STALE_RECOVERY_LAST_KEY, String(now))
+  return next
+}
+
+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') ||
+    message.includes('Loading chunk') ||
+    message.includes('ChunkLoadError') ||
+    message.includes('Unable to preload CSS')
+  )
+}
+
+export async function clearPwaCachesAndWorkers(): Promise<void> {
+  if ('serviceWorker' in navigator) {
+    const registrations = await navigator.serviceWorker.getRegistrations()
+    await Promise.all(registrations.map((registration) => registration.unregister()))
+  }
+
+  if ('caches' in window) {
+    const keys = await caches.keys()
+    await Promise.all(keys.map((key) => caches.delete(key)))
+  }
+}
+
+/**
+ * Last-resort recovery when soft reloads cannot escape a stale precache.
+ * Equivalent to manually clearing site data / reinstalling the PWA.
+ */
+export async function forcePwaRecovery(): Promise<void> {
+  if (recentlyAttemptedHardRecovery()) return
+
+  markHardRecoveryAttempt()
+  markReloadAttempt()
+  resetStaleRecoveryCount()
+  await clearPwaCachesAndWorkers()
+  window.location.reload()
+}
+
+async function waitForWaitingWorker(
+  registration: ServiceWorkerRegistration,
+  timeoutMs: number
+): Promise<ServiceWorker | null> {
+  if (registration.waiting) {
+    return registration.waiting
+  }
+
+  return new Promise((resolve) => {
+    const timeoutId = window.setTimeout(() => resolve(null), timeoutMs)
+
+    const inspectWorker = (worker: ServiceWorker | null) => {
+      if (!worker) return
+
+      if (worker.state === 'installed' && navigator.serviceWorker.controller) {
+        window.clearTimeout(timeoutId)
+        resolve(worker)
+        return
+      }
+
+      worker.addEventListener(
+        'statechange',
+        () => {
+          if (worker.state === 'installed' && navigator.serviceWorker.controller) {
+            window.clearTimeout(timeoutId)
+            resolve(worker)
+          }
+        },
+        { once: true }
+      )
+    }
+
+    inspectWorker(registration.installing)
+
+    registration.addEventListener(
+      'updatefound',
+      () => {
+        inspectWorker(registration.installing)
+      },
+      { once: true }
+    )
+  })
+}
+
+export async function triggerServiceWorkerUpdate(timeoutMs = 5_000): Promise<boolean> {
+  if (import.meta.env.DEV || !('serviceWorker' in navigator)) {
+    return false
+  }
+
+  const registration = await navigator.serviceWorker.getRegistration()
+  if (!registration) return false
+
+  try {
+    await registration.update()
+  } catch {
+    return false
+  }
+
+  const waiting = await waitForWaitingWorker(registration, timeoutMs)
+  return waiting !== null
+}
+
+async function activateWaitingWorker(waiting: ServiceWorker): Promise<boolean> {
+  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
+}
+
+/**
+ * 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()
+  let waiting = registration?.waiting ?? null
+
+  if (!waiting && registration) {
+    await registration.update().catch(() => {})
+    waiting = await waitForWaitingWorker(registration, 4_000)
+  }
+
+  if (!waiting || !navigator.serviceWorker.controller) {
+    return false
+  }
+
+  markColdStartUpdateAttempt()
+  return activateWaitingWorker(waiting)
+}
+
+/**
+ * Compare deployed version.json with the bundled app version.
+ * When the server is ahead, try a soft SW takeover before hard recovery.
+ */
+export async function reconcileVersionOnStartup(): Promise<'reload' | 'recovered' | 'noop'> {
+  if (import.meta.env.DEV || !navigator.onLine) {
+    return 'noop'
+  }
+
+  const deployedVersion = await fetchDeployedVersion()
+  if (!deployedVersion || !isNewerAppVersion(deployedVersion, getAppVersion())) {
+    return 'noop'
+  }
+
+  const reconciled = await reconcileServiceWorkerOnStartup()
+  if (reconciled) {
+    return 'reload'
+  }
+
+  const updated = await triggerServiceWorkerUpdate()
+  if (updated) {
+    const registration = await navigator.serviceWorker.getRegistration()
+    const waiting = registration?.waiting
+    if (waiting) {
+      markColdStartUpdateAttempt()
+      await activateWaitingWorker(waiting)
+      return 'reload'
+    }
+  }
+
+  if (!recentlyAttemptedHardRecovery()) {
+    await forcePwaRecovery()
+    return 'recovered'
+  }
+
+  return 'noop'
+}
+
+export function installStaleAssetRecovery(): void {
+  if (import.meta.env.DEV) return
+
+  const recoverFromStaleAssets = () => {
+    if (recentlyAttemptedReload()) return
+
+    const attempts = incrementStaleRecoveryCount()
+    markReloadAttempt()
+
+    if (attempts >= 2) {
+      void forcePwaRecovery()
+      return
+    }
+
+    window.location.reload()
+  }
+
+  window.addEventListener('unhandledrejection', (event) => {
+    if (!isStaleModuleLoadError(event.reason)) return
+    event.preventDefault()
+    recoverFromStaleAssets()
+  })
+
+  window.addEventListener(
+    'error',
+    (event) => {
+      if (!isStaleModuleLoadError(event.message)) return
+      recoverFromStaleAssets()
+    },
+    true
+  )
+}

client/src/services/pwaVersion.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import {
+  compareAppVersions,
+  isNewerAppVersion,
+  parseAppVersion
+} from './pwaVersion.js'
+
+describe('pwaVersion', () => {
+  it('parses semantic build versions', () => {
+    expect(parseAppVersion('v0.1.0.57')).toEqual([0, 1, 0, 57])
+  })
+
+  it('compares build numbers numerically', () => {
+    expect(compareAppVersions('0.1.0.65', '0.1.0.57')).toBeGreaterThan(0)
+    expect(compareAppVersions('0.1.0.57', '0.1.0.65')).toBeLessThan(0)
+    expect(compareAppVersions('0.1.0.57', '0.1.0.57')).toBe(0)
+  })
+
+  it('detects newer deployed versions', () => {
+    expect(isNewerAppVersion('0.1.0.66', '0.1.0.57')).toBe(true)
+    expect(isNewerAppVersion('0.1.0.57', '0.1.0.57')).toBe(false)
+  })
+})

client/src/services/pwaVersion.ts

@@ -0,0 +1,59 @@
+const APP_VERSION =
+  typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0.0-dev'
+
+export function getAppVersion(): string {
+  return APP_VERSION
+}
+
+export function parseAppVersion(version: string): number[] {
+  return version
+    .replace(/^v/i, '')
+    .split('.')
+    .map((part) => Number.parseInt(part, 10) || 0)
+}
+
+/** Positive when `a` is newer than `b`. */
+export function compareAppVersions(a: string, b: string): number {
+  const partsA = parseAppVersion(a)
+  const partsB = parseAppVersion(b)
+  const length = Math.max(partsA.length, partsB.length)
+
+  for (let index = 0; index < length; index += 1) {
+    const diff = (partsA[index] ?? 0) - (partsB[index] ?? 0)
+    if (diff !== 0) return diff
+  }
+
+  return 0
+}
+
+export function isNewerAppVersion(serverVersion: string, clientVersion: string): boolean {
+  return compareAppVersions(serverVersion, clientVersion) > 0
+}
+
+export async function fetchDeployedVersion(timeoutMs = 4_000): Promise<string | null> {
+  if (!navigator.onLine) return null
+
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), timeoutMs)
+
+  try {
+    const response = await fetch(`/version.json?_=${Date.now()}`, {
+      cache: 'no-store',
+      signal: controller.signal
+    })
+    if (!response.ok) return null
+
+    const payload = (await response.json()) as { version?: unknown }
+    return typeof payload.version === 'string' ? payload.version.trim() : null
+  } catch {
+    return null
+  } finally {
+    window.clearTimeout(timeoutId)
+  }
+}
+
+export async function isDeployedVersionNewer(): Promise<boolean> {
+  const deployedVersion = await fetchDeployedVersion()
+  if (!deployedVersion) return false
+  return isNewerAppVersion(deployedVersion, getAppVersion())
+}

client/src/sw.ts

@@ -1,10 +1,23 @@
 /// <reference lib="webworker" />
+import { clientsClaim } from 'workbox-core'
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
+import { registerRoute } from 'workbox-routing'
+import { NetworkOnly } from 'workbox-strategies'
 
 declare let self: ServiceWorkerGlobalScope
 
 precacheAndRoute(self.__WB_MANIFEST)
 cleanupOutdatedCaches()
+clientsClaim()
+
+// Always fetch the live deploy version, even under an older precache.
+registerRoute(({ url }) => url.pathname === '/version.json', new NetworkOnly())
+
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') {
+    void self.skipWaiting()
+  }
+})
 
 interface PushPayload {
   title?: string

client/src/utils/logEntryPayload.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import {
+  buildLogEntryPayload,
   hasUnsavedEventDraft,
   isLogEventDraftEmpty,
   normalizeLogEvent,
@@ -40,3 +41,25 @@ describe('logEntryPayload event drafts', () => {
     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

@@ -144,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
@@ -169,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/vite.config.ts

@@ -2,9 +2,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { VitePWA } from 'vite-plugin-pwa'
-import { readFileSync } from 'node:fs'
+import { readFileSync, writeFileSync } from 'node:fs'
 import { resolve, dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import type { Plugin } from 'vite'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
@@ -19,6 +20,19 @@ function readAppVersion(): string {
   }
 }
 
+function versionJsonPlugin(version: string): Plugin {
+  return {
+    name: 'version-json',
+    writeBundle(options) {
+      const outDir = options.dir ?? resolve(__dirname, 'dist')
+      writeFileSync(
+        resolve(outDir, 'version.json'),
+        `${JSON.stringify({ version }, null, 2)}\n`
+      )
+    }
+  }
+}
+
 // https://vite.dev/config/
 export default defineConfig({
   test: {
@@ -42,6 +56,7 @@ export default defineConfig({
   },
   plugins: [
     react(),
+    versionJsonPlugin(readAppVersion()),
     VitePWA({
       strategies: 'injectManifest',
       srcDir: 'src',

server/prisma/schema.prisma

@@ -22,6 +22,7 @@ model User {
   collaborations           Collaboration[]
   pushSubscriptions        PushSubscription[]
   notificationPrefs        UserNotificationPrefs?
+  appearancePrefs          UserAppearancePrefs?
 }
 
 model PushSubscription {
@@ -48,6 +49,15 @@ model UserNotificationPrefs {
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
+model UserAppearancePrefs {
+  userId      String   @id
+  theme       String   @default("auto")
+  colorScheme String   @default("auto")
+  updatedAt   DateTime @updatedAt
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
 model Credential {
   id           String   @id @default(uuid())
   userId       String

server/src/routes/auth.ts

@@ -38,6 +38,17 @@ function normalizeCredentialLabel(label: unknown): string | null {
   return trimmed.slice(0, 64)
 }
 
+const VALID_THEMES = new Set(['auto', 'ocean', 'material', 'cupertino'])
+const VALID_COLOR_SCHEMES = new Set(['auto', 'light', 'dark'])
+
+function parseThemePreference(value: unknown): string | null {
+  return typeof value === 'string' && VALID_THEMES.has(value) ? value : null
+}
+
+function parseColorSchemePreference(value: unknown): string | null {
+  return typeof value === 'string' && VALID_COLOR_SCHEMES.has(value) ? value : null
+}
+
 router.post('/register-options', async (req, res) => {
   try {
     const { username } = req.body
@@ -426,6 +437,57 @@ router.post('/rotate-recovery', requireReauth, async (req: any, res) => {
   }
 })
 
+router.get('/appearance-prefs', requireUser, async (req: any, res) => {
+  try {
+    const prefs = await prisma.userAppearancePrefs.findUnique({
+      where: { userId: req.userId }
+    })
+
+    return res.json({
+      theme: prefs?.theme ?? 'auto',
+      colorScheme: prefs?.colorScheme ?? 'auto',
+      persisted: prefs != null
+    })
+  } catch (error: any) {
+    console.error('Error reading appearance prefs:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
+router.put('/appearance-prefs', requireUser, async (req: any, res) => {
+  try {
+    const theme = parseThemePreference(req.body?.theme)
+    const colorScheme = parseColorSchemePreference(req.body?.colorScheme)
+    if (!theme || !colorScheme) {
+      return res.status(400).json({ error: 'Invalid theme or colorScheme' })
+    }
+
+    const prefs = await prisma.userAppearancePrefs.upsert({
+      where: { userId: req.userId },
+      create: {
+        userId: req.userId,
+        theme,
+        colorScheme,
+        updatedAt: new Date()
+      },
+      update: {
+        theme,
+        colorScheme,
+        updatedAt: new Date()
+      }
+    })
+
+    return res.json({
+      theme: prefs.theme,
+      colorScheme: prefs.colorScheme,
+      persisted: true
+    })
+  } catch (error: any) {
+    console.error('Error updating appearance prefs:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
 router.get('/profile', requireUser, async (req: any, res) => {
   try {
     const user = await prisma.user.findUnique({