chore: release v0.1.0.4

Wechselt auf prompt-Modus mit Update-Banner, periodischer SW-Prüfung und no-cache-Headern für Service Worker und index.html.

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

VERSION

@@ -1 +1 @@
-0.1.0.3
+0.1.0.5

client/nginx.conf

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

client/src/App.tsx

@@ -5,18 +5,26 @@ import AuthOnboarding from './components/AuthOnboarding.tsx'
 import LogbookDashboard from './components/LogbookDashboard.tsx'
 import VesselForm from './components/VesselForm.tsx'
 import CrewForm from './components/CrewForm.tsx'
-import DeviationForm from './components/DeviationForm.tsx'
+// Compass Deviation Table — für Freizeit-Skipper vorerst deaktiviert (Komponente bleibt erhalten)
+// import DeviationForm from './components/DeviationForm.tsx'
 import LogEntriesList from './components/LogEntriesList.tsx'
 import SettingsForm from './components/SettingsForm.tsx'
 import InvitationAcceptance from './components/InvitationAcceptance.tsx'
 import { getActiveMasterKey, logoutUser } from './services/auth.js'
+import {
+  applyAppearanceToDocument,
+  resolveAppTheme,
+  resolveColorScheme,
+  subscribeToSystemColorScheme
+} from './services/appearance.js'
 import { startBackgroundSync, stopBackgroundSync, syncAllLogbooks, subscribeToSyncState } from './services/sync.js'
 import ReadOnlyViewer from './components/ReadOnlyViewer.tsx'
 import PwaInstallPrompt from './components/PwaInstallPrompt.tsx'
+import PwaUpdatePrompt from './components/PwaUpdatePrompt.tsx'
 import AppFooter from './components/AppFooter.tsx'
 import { db } from './services/db.js'
 import { useLiveQuery } from 'dexie-react-hooks'
-import { Ship, LogOut, ChevronLeft, Users, Compass, FileText, Settings, Wifi, WifiOff } from 'lucide-react'
+import { Ship, LogOut, ChevronLeft, Users, FileText, Settings, Wifi, WifiOff } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 function App() {
@@ -24,10 +32,9 @@ function App() {
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [activeLogbookId, setActiveLogbookId] = useState<string | null>(null)
   const [activeLogbookTitle, setActiveLogbookTitle] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<'vessel' | 'crew' | 'deviation' | 'logs' | 'settings'>('logs')
+  const [activeTab, setActiveTab] = useState<'vessel' | 'crew' | 'logs' | 'settings'>('logs')
   const [online, setOnline] = useState(navigator.onLine)
   const [isSyncing, setIsSyncing] = useState(false)
-  const [appliedTheme, setAppliedTheme] = useState<'ocean' | 'material' | 'cupertino'>('ocean')
   const [isAcceptingInvite, setIsAcceptingInvite] = useState(false)
 
   // Viewer mode for read-only shared links
@@ -40,27 +47,16 @@ function App() {
     [activeLogbookId]
   )
 
-  const updateAppliedTheme = () => {
-    const configTheme = localStorage.getItem('active_theme') || 'auto'
-    if (configTheme === 'auto') {
-      const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera
-      if (/iPad|iPhone|iPod|Macintosh/.test(userAgent)) {
-        setAppliedTheme('cupertino')
-      } else if (/Android|Linux/.test(userAgent)) {
-        setAppliedTheme('material')
-      } else {
-        setAppliedTheme('ocean')
-      }
-    } else {
-      setAppliedTheme(configTheme as 'ocean' | 'material' | 'cupertino')
-    }
-  }
-
   useEffect(() => {
-    updateAppliedTheme()
-    window.addEventListener('theme-changed', updateAppliedTheme)
+    const syncAppearance = () => {
+      applyAppearanceToDocument(resolveAppTheme(), resolveColorScheme())
+    }
+    syncAppearance()
+    window.addEventListener('appearance-changed', syncAppearance)
+    const unsubscribeSystem = subscribeToSystemColorScheme(syncAppearance)
     return () => {
-      window.removeEventListener('theme-changed', updateAppliedTheme)
+      window.removeEventListener('appearance-changed', syncAppearance)
+      unsubscribeSystem()
     }
   }, [])
 
@@ -158,7 +154,7 @@ function App() {
 
   if (isViewerMode) {
     return (
-      <div className={`theme-${appliedTheme}`} style={{ display: 'contents' }}>
+      <div style={{ display: 'contents' }}>
         <ReadOnlyViewer token={shareToken} hexKey={shareKey} />
       </div>
     )
@@ -166,7 +162,7 @@ function App() {
 
   if (isAcceptingInvite) {
     return (
-      <div className={`theme-${appliedTheme} auth-screen`}>
+      <div className="auth-screen">
         <InvitationAcceptance
           onAccepted={(logbookId, title) => {
             setIsAuthenticated(true)
@@ -186,7 +182,7 @@ function App() {
 
   if (!isAuthenticated) {
     return (
-      <div className={`theme-${appliedTheme} auth-screen`}>
+      <div className="auth-screen">
         <AuthOnboarding onAuthenticated={handleAuthenticated} />
       </div>
     )
@@ -196,7 +192,7 @@ function App() {
 
   if (!activeLogbookId) {
     return (
-      <div className={`theme-${appliedTheme}`} style={{ display: 'contents' }}>
+      <div style={{ display: 'contents' }}>
         {pwaInstallBanner}
         <LogbookDashboard
           onSelectLogbook={handleSelectLogbook}
@@ -207,7 +203,7 @@ function App() {
   }
 
   return (
-    <div className={`theme-${appliedTheme}`} style={{ display: 'contents' }}>
+    <div style={{ display: 'contents' }}>
       {pwaInstallBanner}
       {isSyncing && <div className="sync-progress-bar" />}
       <div className="app-layout">
@@ -271,6 +267,7 @@ function App() {
             {t('nav.crew')}
           </button>
 
+          {/* Compass Deviation Table — für Freizeit-Skipper vorerst ausgeblendet
           <button
             className={`sidebar-btn ${activeTab === 'deviation' ? 'active' : ''}`}
             onClick={() => setActiveTab('deviation')}
@@ -278,6 +275,7 @@ function App() {
             <Compass size={18} />
             {t('nav.deviation')}
           </button>
+          */}
 
           <button
             className={`sidebar-btn ${activeTab === 'settings' ? 'active' : ''}`}
@@ -302,9 +300,11 @@ function App() {
             <CrewForm logbookId={activeLogbookId} />
           )}
 
+          {/* Compass Deviation Table — für Freizeit-Skipper vorerst deaktiviert
           {activeTab === 'deviation' && (
             <DeviationForm logbookId={activeLogbookId} />
           )}
+          */}
 
           {activeTab === 'settings' && (
             <SettingsForm logbookId={activeLogbookId} />
@@ -319,6 +319,7 @@ function App() {
 export default function AppWrapper() {
   return (
     <DialogProvider>
+      <PwaUpdatePrompt />
       <App />
       <AppFooter />
     </DialogProvider>

client/src/components/InvitationAcceptance.tsx

@@ -137,13 +137,17 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
     const masterKey = getActiveMasterKey()
     const activeUserId = localStorage.getItem('active_userid')
     if (!masterKey || !activeUserId) {
+      autoAcceptStarted.current = false
       setError(isDe
         ? 'Sitzung unvollständig — bitte erneut anmelden (Benutzer-ID fehlt).'
         : 'Incomplete session — please log in again (user ID missing).')
       setIsLoggedIn(false)
       return
     }
-    if (!logbookKey || !logbookId) return
+    if (!logbookKey || !logbookId) {
+      autoAcceptStarted.current = false
+      return
+    }
 
     setAccepting(true)
     setError(null)
@@ -184,7 +188,8 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
           id: logbookId,
           encryptedTitle: rawEncryptedTitle,
           updatedAt: new Date().toISOString(),
-          isSynced: 1
+          isSynced: 1,
+          isShared: 1
         })
       }
 
@@ -202,7 +207,10 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
   useEffect(() => {
     if (loading || accepting || autoAcceptStarted.current) return
     if (!isLoggedIn || !logbookId || !logbookKey || !token) return
-    if (!sessionReady()) return
+    if (!sessionReady()) {
+      autoAcceptStarted.current = false
+      return
+    }
 
     autoAcceptStarted.current = true
     void handleAccept()
@@ -240,10 +248,17 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
     e.preventDefault()
     if (!recoveryInput.trim() || !encryptedPayloads) return
 
+    const resolvedUser = (username.trim() || encryptedPayloads.username || '').trim()
+    if (!resolvedUser) {
+      setAuthError(isDe
+        ? 'Benutzername konnte nicht ermittelt werden — bitte erneut anmelden.'
+        : 'Could not determine username — please try logging in again.')
+      return
+    }
+
     setLoading(true)
     setAuthError(null)
     try {
-      const resolvedUser = username.trim() || encryptedPayloads.username
       const success = await completeLoginWithRecovery(resolvedUser, recoveryInput.trim(), encryptedPayloads)
       if (success) {
         setShowRecoveryFallback(false)

client/src/components/PwaUpdatePrompt.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RefreshCw, X } from 'lucide-react'
+import { usePwaUpdate } from '../hooks/usePwaUpdate.js'
+
+export default function PwaUpdatePrompt() {
+  const { t } = useTranslation()
+  const { needRefresh, updateApp } = usePwaUpdate()
+  const [updating, setUpdating] = useState(false)
+  const [dismissed, setDismissed] = useState(false)
+
+  if (!needRefresh || dismissed) return null
+
+  const handleUpdate = async () => {
+    setUpdating(true)
+    try {
+      await updateApp()
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  return (
+    <div className="pwa-update-banner" role="alert" aria-live="polite">
+      <div className="pwa-update-icon" aria-hidden="true">
+        <RefreshCw size={22} />
+      </div>
+
+      <div className="pwa-update-body">
+        <p className="pwa-update-title">{t('pwa.update_title')}</p>
+        <p className="pwa-update-text">{t('pwa.update_desc')}</p>
+      </div>
+
+      <div className="pwa-update-actions">
+        <button
+          type="button"
+          className="btn primary pwa-update-btn"
+          onClick={handleUpdate}
+          disabled={updating}
+        >
+          {updating ? t('pwa.update_reloading') : t('pwa.update_now')}
+        </button>
+        <button
+          type="button"
+          className="pwa-update-link"
+          onClick={() => setDismissed(true)}
+        >
+          {t('pwa.later')}
+        </button>
+      </div>
+
+      <button
+        type="button"
+        className="pwa-update-close"
+        onClick={() => setDismissed(true)}
+        aria-label={t('pwa.later')}
+      >
+        <X size={18} />
+      </button>
+    </div>
+  )
+}

client/src/components/SettingsForm.tsx

@@ -5,6 +5,8 @@ import { ensureLogbookKey } from '../services/logbookKeys.js'
 import AccountDangerZone from './AccountDangerZone.tsx'
 import PwaInstallPrompt from './PwaInstallPrompt.tsx'
 import { useDialog } from './ModalDialog.tsx'
+import { notifyAppearanceChanged } from '../services/appearance.js'
+import ThemedSelect from './ThemedSelect.tsx'
 
 interface SettingsFormProps {
   logbookId?: string | null
@@ -30,6 +32,7 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
   const { showConfirm, showAlert } = useDialog()
   const [apiKey, setApiKey] = useState(localStorage.getItem('owm_api_key') || '')
   const [theme, setTheme] = useState(localStorage.getItem('active_theme') || 'auto')
+  const [colorScheme, setColorScheme] = useState(localStorage.getItem('active_color_scheme') || 'auto')
   const [saving, setSaving] = useState(false)
   const [success, setSuccess] = useState(false)
 
@@ -245,17 +248,29 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
     }
   }
 
+  const persistAppearance = (nextTheme: string, nextColorScheme: string) => {
+    localStorage.setItem('active_theme', nextTheme)
+    localStorage.setItem('active_color_scheme', nextColorScheme)
+    notifyAppearanceChanged()
+  }
+
+  const handleThemeChange = (nextTheme: string) => {
+    setTheme(nextTheme)
+    persistAppearance(nextTheme, colorScheme)
+  }
+
+  const handleColorSchemeChange = (nextColorScheme: string) => {
+    setColorScheme(nextColorScheme)
+    persistAppearance(theme, nextColorScheme)
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     setSaving(true)
     setSuccess(false)
     
-    // Save to localStorage
     localStorage.setItem('owm_api_key', apiKey.trim())
-    localStorage.setItem('active_theme', theme)
-    
-    // Notify App of theme change
-    window.dispatchEvent(new Event('theme-changed'))
+    persistAppearance(theme, colorScheme)
     
     setSaving(false)
     setSuccess(true)
@@ -312,19 +327,41 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
           </p>
 
           <div className="input-group">
-            <select
+            <ThemedSelect
               id="app-theme"
-              className="input-text"
               value={theme}
-              onChange={(e) => setTheme(e.target.value)}
               disabled={saving}
-              style={{ background: 'rgba(11, 12, 16, 0.85)', color: '#f1f5f9' }}
-            >
-              <option value="auto">{t('settings.theme_auto')}</option>
-              <option value="ocean">{t('settings.theme_ocean')}</option>
-              <option value="material">{t('settings.theme_material')}</option>
-              <option value="cupertino">{t('settings.theme_cupertino')}</option>
-            </select>
+              onChange={handleThemeChange}
+              options={[
+                { value: 'auto', label: t('settings.theme_auto') },
+                { value: 'ocean', label: t('settings.theme_ocean') },
+                { value: 'material', label: t('settings.theme_material') },
+                { value: 'cupertino', label: t('settings.theme_cupertino') }
+              ]}
+            />
+          </div>
+        </div>
+
+        <div className="member-editor-card glass mt-4">
+          <h3 style={{ marginTop: 0, marginBottom: '12px', color: 'var(--app-accent-light)', fontSize: '16px' }}>
+            {t('settings.color_scheme_title')}
+          </h3>
+          <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 16px 0' }}>
+            {t('settings.color_scheme_label')}
+          </p>
+
+          <div className="input-group">
+            <ThemedSelect
+              id="app-color-scheme"
+              value={colorScheme}
+              disabled={saving}
+              onChange={handleColorSchemeChange}
+              options={[
+                { value: 'auto', label: t('settings.color_scheme_auto') },
+                { value: 'light', label: t('settings.color_scheme_light') },
+                { value: 'dark', label: t('settings.color_scheme_dark') }
+              ]}
+            />
           </div>
         </div>
 

client/src/components/ThemedSelect.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+
+export interface ThemedSelectOption {
+  value: string
+  label: string
+}
+
+interface ThemedSelectProps {
+  id?: string
+  value: string
+  options: ThemedSelectOption[]
+  onChange: (value: string) => void
+  disabled?: boolean
+}
+
+export default function ThemedSelect({
+  id,
+  value,
+  options,
+  onChange,
+  disabled = false
+}: ThemedSelectProps) {
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const selected = options.find((option) => option.value === value)
+
+  useEffect(() => {
+    if (!open) return
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+
+    document.addEventListener('mousedown', closeOnOutsideClick)
+    document.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsideClick)
+      document.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [open])
+
+  const selectOption = (nextValue: string) => {
+    onChange(nextValue)
+    setOpen(false)
+  }
+
+  return (
+    <div className={`themed-select${open ? ' is-open' : ''}`} ref={rootRef}>
+      <button
+        type="button"
+        id={id}
+        className="themed-select-trigger input-text"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => !disabled && setOpen((current) => !current)}
+      >
+        <span>{selected?.label ?? value}</span>
+        <ChevronDown size={16} className="themed-select-chevron" aria-hidden="true" />
+      </button>
+
+      {open && (
+        <ul className="themed-select-menu" role="listbox" aria-labelledby={id}>
+          {options.map((option) => (
+            <li
+              key={option.value}
+              role="option"
+              aria-selected={option.value === value}
+              className={`themed-select-option${option.value === value ? ' is-selected' : ''}`}
+              onClick={() => selectOption(option.value)}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

client/src/components/VesselForm.tsx

@@ -13,9 +13,30 @@ interface VesselFormProps {
   preloadedData?: any
 }
 
+function metricInputFromStored(value: unknown): string {
+  if (value == null || value === '') return ''
+  if (typeof value === 'number' && Number.isFinite(value)) return String(value)
+  if (typeof value === 'string') return value.trim()
+  return ''
+}
+
+function parseOptionalMetricMeters(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_metric')
+  }
+  return parsed
+}
+
 export default function VesselForm({ logbookId, readOnly = false, preloadedData }: VesselFormProps) {
   const { t } = useTranslation()
   const [name, setName] = useState('')
+  const [vesselType, setVesselType] = useState<'sailing' | 'motor' | ''>('')
+  const [lengthM, setLengthM] = useState('')
+  const [draftM, setDraftM] = useState('')
+  const [airDraftM, setAirDraftM] = useState('')
   const [homePort, setHomePort] = useState('')
   const [charterCompany, setCharterCompany] = useState('')
   const [owner, setOwner] = useState('')
@@ -43,6 +64,10 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
       try {
         if (readOnly && preloadedData) {
           setName(preloadedData.name || '')
+          setVesselType(preloadedData.vesselType || '')
+          setLengthM(metricInputFromStored(preloadedData.lengthM))
+          setDraftM(metricInputFromStored(preloadedData.draftM))
+          setAirDraftM(metricInputFromStored(preloadedData.airDraftM))
           setHomePort(preloadedData.homePort || '')
           setCharterCompany(preloadedData.charterCompany || '')
           setOwner(preloadedData.owner || '')
@@ -64,6 +89,10 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
           const decrypted = await decryptJson(local.encryptedData, local.iv, local.tag, masterKey)
           if (decrypted) {
             setName(decrypted.name || '')
+            setVesselType(decrypted.vesselType || '')
+            setLengthM(metricInputFromStored(decrypted.lengthM))
+            setDraftM(metricInputFromStored(decrypted.draftM))
+            setAirDraftM(metricInputFromStored(decrypted.airDraftM))
             setHomePort(decrypted.homePort || '')
             setCharterCompany(decrypted.charterCompany || '')
             setOwner(decrypted.owner || '')
@@ -168,8 +197,25 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
       const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
       if (!masterKey) throw new Error('Encryption key not found. Please log in.')
 
+      let parsedLengthM: number | undefined
+      let parsedDraftM: number | undefined
+      let parsedAirDraftM: number | undefined
+      try {
+        parsedLengthM = parseOptionalMetricMeters(lengthM)
+        parsedDraftM = parseOptionalMetricMeters(draftM)
+        parsedAirDraftM = parseOptionalMetricMeters(airDraftM)
+      } catch {
+        setError(t('vessel.invalid_metric'))
+        setSaving(false)
+        return
+      }
+
       const yachtData = {
         name: name.trim(),
+        vesselType: vesselType || undefined,
+        lengthM: parsedLengthM,
+        draftM: parsedDraftM,
+        airDraftM: parsedAirDraftM,
         homePort: homePort.trim(),
         charterCompany: charterCompany.trim(),
         owner: owner.trim(),
@@ -302,6 +348,59 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
             />
           </div>
 
+          <div className="input-group">
+            <label>{t('vessel.type')}</label>
+            <select
+              className="input-text"
+              value={vesselType}
+              onChange={(e) => setVesselType(e.target.value as 'sailing' | 'motor' | '')}
+              disabled={saving || readOnly}
+            >
+              <option value="">{t('vessel.type_unset')}</option>
+              <option value="sailing">{t('vessel.type_sailing')}</option>
+              <option value="motor">{t('vessel.type_motor')}</option>
+            </select>
+          </div>
+
+          <div className="input-group">
+            <label>{t('vessel.length_m')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={lengthM}
+              onChange={(e) => setLengthM(e.target.value)}
+              disabled={saving || readOnly}
+              placeholder="0.00"
+            />
+          </div>
+
+          <div className="input-group">
+            <label>{t('vessel.draft_m')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={draftM}
+              onChange={(e) => setDraftM(e.target.value)}
+              disabled={saving || readOnly}
+              placeholder="0.00"
+            />
+          </div>
+
+          <div className="input-group">
+            <label>{t('vessel.air_draft_m')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={airDraftM}
+              onChange={(e) => setAirDraftM(e.target.value)}
+              disabled={saving || readOnly}
+              placeholder="0.00"
+            />
+          </div>
+
           <div className="input-group">
             <label>{t('vessel.port')}</label>
             <input

client/src/hooks/usePwaUpdate.ts

@@ -0,0 +1,37 @@
+import { useRegisterSW } from 'virtual:pwa-register/react'
+
+const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000
+
+function scheduleUpdateChecks(registration: ServiceWorkerRegistration) {
+  const checkForUpdate = () => {
+    registration.update().catch(() => {})
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      checkForUpdate()
+    }
+  })
+
+  window.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS)
+}
+
+export function usePwaUpdate() {
+  const {
+    needRefresh: [needRefresh],
+    updateServiceWorker
+  } = useRegisterSW({
+    immediate: true,
+    onRegisteredSW(_swUrl: string, registration: ServiceWorkerRegistration | undefined) {
+      if (registration) {
+        scheduleUpdateChecks(registration)
+      }
+    }
+  })
+
+  const updateApp = async () => {
+    await updateServiceWorker(true)
+  }
+
+  return { needRefresh, updateApp }
+}

client/src/i18n/locales/de.json

@@ -66,7 +66,11 @@
       "platform_ios": "Installation über Safari",
       "platform_android": "Installation über den Browser",
       "platform_desktop": "Installation als Desktop-App",
-      "settings_section": "App-Installation"
+      "settings_section": "App-Installation",
+      "update_title": "Update verfügbar",
+      "update_desc": "Eine neue Version von Kapteins Daagbok ist bereit. Bitte aktualisieren, um die neuesten Änderungen zu erhalten.",
+      "update_now": "Jetzt aktualisieren",
+      "update_reloading": "Wird geladen…"
     },
     "sync": {
       "status_synced": "Synchronisiert",
@@ -76,6 +80,14 @@
     "vessel": {
       "title": "Schiffs-Stammdaten",
       "name": "Yachtname",
+      "type": "Yachttyp",
+      "type_unset": "— nicht angegeben —",
+      "type_sailing": "Segelyacht",
+      "type_motor": "Motoryacht",
+      "length_m": "Länge (m)",
+      "draft_m": "Tiefgang (m)",
+      "air_draft_m": "Höhe (m)",
+      "invalid_metric": "Ungültiger Zahlenwert — bitte Meter als Dezimalzahl eingeben (z. B. 12,5).",
       "port": "Heimathafen",
       "owner": "Eigner",
       "charter": "Charterfirma",
@@ -278,6 +290,11 @@
       "theme_ocean": "Ocean (Glassmorphismus)",
       "theme_material": "Material (Android)",
       "theme_cupertino": "Cupertino (iOS)",
+      "color_scheme_title": "Erscheinungsbild",
+      "color_scheme_label": "Hell- oder Dunkelmodus (Standard: Systemeinstellung)",
+      "color_scheme_auto": "Automatisch (System)",
+      "color_scheme_light": "Hell",
+      "color_scheme_dark": "Dunkel",
       "share_title": "Logbuch teilen (Schreibgeschützt)",
       "share_desc": "Aktivieren Sie diese Option, um einen öffentlichen, schreibgeschützten Link zu erstellen. Jeder mit dem Link kann Ihre Reisen, Yacht-Profile und Besatzung ansehen. Die Verschlüsselungsschlüssel werden niemals an den Server übertragen (sie bleiben im Hash-Teil der URL).",
       "share_enable": "Öffentlichen Link aktivieren",

client/src/i18n/locales/en.json

@@ -66,7 +66,11 @@
       "platform_ios": "Install via Safari",
       "platform_android": "Install via browser",
       "platform_desktop": "Install as desktop app",
-      "settings_section": "App installation"
+      "settings_section": "App installation",
+      "update_title": "Update available",
+      "update_desc": "A new version of Kapteins Daagbok is ready. Reload to get the latest changes.",
+      "update_now": "Reload now",
+      "update_reloading": "Reloading…"
     },
     "sync": {
       "status_synced": "Synced",
@@ -76,6 +80,14 @@
     "vessel": {
       "title": "Vessel Master Data",
       "name": "Yacht Name",
+      "type": "Vessel Type",
+      "type_unset": "— not specified —",
+      "type_sailing": "Sailing yacht",
+      "type_motor": "Motor yacht",
+      "length_m": "Length (m)",
+      "draft_m": "Draft (m)",
+      "air_draft_m": "Air draft (m)",
+      "invalid_metric": "Invalid number — please enter meters as a decimal (e.g. 12.5).",
       "port": "Home Port",
       "owner": "Owner",
       "charter": "Charter Company",
@@ -278,6 +290,11 @@
       "theme_ocean": "Ocean (Glassmorphism)",
       "theme_material": "Material (Android)",
       "theme_cupertino": "Cupertino (iOS)",
+      "color_scheme_title": "Appearance",
+      "color_scheme_label": "Light or dark mode (default: follow system)",
+      "color_scheme_auto": "Auto (System)",
+      "color_scheme_light": "Light",
+      "color_scheme_dark": "Dark",
       "share_title": "Share Logbook (Read-Only)",
       "share_desc": "Enable this to generate a public, read-only link. Anyone with the link can view your travels, yacht profile, and crew members. Decryption keys are never transmitted to the server (they stay in the hash part of the URL).",
       "share_enable": "Enable Public Link",

client/src/main.tsx

@@ -1,9 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import 'leaflet/dist/leaflet.css'
+import './themes.css'
 import './index.css'
 import App from './App.tsx'
 import './i18n'
+import { applyAppearanceToDocument } from './services/appearance.ts'
+
+applyAppearanceToDocument()
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

client/src/services/appearance.ts

@@ -0,0 +1,53 @@
+export type ColorSchemePreference = 'auto' | 'light' | 'dark'
+export type ResolvedColorScheme = 'light' | 'dark'
+export type AppTheme = 'ocean' | 'material' | 'cupertino'
+
+const THEME_CLASSES = ['theme-ocean', 'theme-material', 'theme-cupertino'] as const
+const SCHEME_CLASSES = ['scheme-light', 'scheme-dark'] as const
+
+export function getColorSchemePreference(): ColorSchemePreference {
+  const stored = localStorage.getItem('active_color_scheme')
+  if (stored === 'light' || stored === 'dark' || stored === 'auto') return stored
+  return 'auto'
+}
+
+export function resolveColorScheme(pref?: ColorSchemePreference): ResolvedColorScheme {
+  const preference = pref ?? getColorSchemePreference()
+  if (preference === 'light') return 'light'
+  if (preference === 'dark') return 'dark'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+export function resolveAppTheme(): AppTheme {
+  const configTheme = localStorage.getItem('active_theme') || 'auto'
+  if (configTheme === 'material' || configTheme === 'cupertino' || configTheme === 'ocean') {
+    return configTheme
+  }
+  const userAgent = navigator.userAgent || navigator.vendor || ''
+  if (/iPad|iPhone|iPod|Macintosh/.test(userAgent)) return 'cupertino'
+  if (/Android|Linux/.test(userAgent)) return 'material'
+  return 'ocean'
+}
+
+export function applyAppearanceToDocument(
+  theme: AppTheme = resolveAppTheme(),
+  scheme: ResolvedColorScheme = resolveColorScheme()
+): void {
+  const root = document.documentElement
+  root.classList.remove(...THEME_CLASSES, ...SCHEME_CLASSES)
+  root.classList.add(`theme-${theme}`, `scheme-${scheme}`)
+  root.style.colorScheme = scheme
+}
+
+export function subscribeToSystemColorScheme(onChange: () => void): () => void {
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+  const handler = () => {
+    if (getColorSchemePreference() === 'auto') onChange()
+  }
+  media.addEventListener('change', handler)
+  return () => media.removeEventListener('change', handler)
+}
+
+export function notifyAppearanceChanged(): void {
+  window.dispatchEvent(new Event('appearance-changed'))
+}

client/src/services/db.ts

@@ -5,6 +5,7 @@ export interface LocalLogbook {
   encryptedTitle: string
   updatedAt: string
   isSynced: number // 1 = yes, 0 = pending local modifications
+  isShared?: number // 1 = collaborator copy, 0 or unset = owned
 }
 
 export interface LocalYacht {
@@ -120,6 +121,17 @@ class DaagboxDatabase extends Dexie {
       gpsTracks: 'entryId, logbookId, updatedAt',
       logbookKeys: 'logbookId'
     })
+    this.version(4).stores({
+      logbooks: 'id, encryptedTitle, updatedAt, isSynced, isShared',
+      yachts: 'logbookId, updatedAt',
+      crews: 'payloadId, logbookId, updatedAt',
+      deviations: 'logbookId, updatedAt',
+      entries: 'payloadId, logbookId, updatedAt',
+      syncQueue: '++id, action, type, payloadId, logbookId',
+      photos: 'payloadId, entryId, logbookId, updatedAt',
+      gpsTracks: 'entryId, logbookId, updatedAt',
+      logbookKeys: 'logbookId'
+    })
   }
 }
 

client/src/services/logbook.ts

@@ -43,8 +43,6 @@ export async function fetchLogbooks(): Promise<DecryptedLogbook[]> {
     throw new Error('Master key not found. User must log in.')
   }
 
-  const sharedLogbookIds = new Set<string>()
-
   if (navigator.onLine) {
     try {
       const response = await fetch(API_BASE, {
@@ -61,7 +59,6 @@ export async function fetchLogbooks(): Promise<DecryptedLogbook[]> {
         // Decrypt and save logbook keys locally if they exist
         for (const lb of serverLogbooks) {
           const isShared = lb.userId !== userId
-          if (isShared) sharedLogbookIds.add(lb.id)
 
           const encryptedKeyStr = isShared
             ? lb.collaborators?.[0]?.encryptedLogbookKey
@@ -105,7 +102,8 @@ export async function fetchLogbooks(): Promise<DecryptedLogbook[]> {
           id: lb.id,
           encryptedTitle: lb.encryptedTitle,
           updatedAt: lb.updatedAt || new Date().toISOString(),
-          isSynced: 1
+          isSynced: 1,
+          isShared: lb.userId !== userId ? 1 : 0
         }))
 
         // Clear existing cache for this user and insert new ones
@@ -128,7 +126,7 @@ export async function fetchLogbooks(): Promise<DecryptedLogbook[]> {
       title,
       updatedAt: lb.updatedAt,
       isSynced: lb.isSynced === 1,
-      isShared: sharedLogbookIds.has(lb.id)
+      isShared: lb.isShared === 1
     })
   }
 
@@ -195,7 +193,8 @@ export async function createLogbook(title: string): Promise<DecryptedLogbook> {
           id: serverLb.id,
           encryptedTitle: serverLb.encryptedTitle,
           updatedAt: serverLb.updatedAt,
-          isSynced: 1
+          isSynced: 1,
+          isShared: 0
         })
 
         return {
@@ -216,7 +215,8 @@ export async function createLogbook(title: string): Promise<DecryptedLogbook> {
     id: localId,
     encryptedTitle: encryptedTitleStr,
     updatedAt: now,
-    isSynced: 0
+    isSynced: 0,
+    isShared: 0
   })
 
   await db.syncQueue.put({

client/src/themes.css

@@ -0,0 +1,398 @@
+/**
+ * Appearance tokens: scheme (light/dark) × theme (ocean/material/cupertino)
+ * Applied on document.documentElement via appearance.ts
+ */
+
+/* Fallback before JS hydrates (ocean · dark) */
+html {
+  color-scheme: dark;
+  --app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
+  --app-text: #f1f5f9;
+  --app-text-heading: #f8fafc;
+  --app-text-muted: #94a3b8;
+  --app-text-subtle: #64748b;
+  --app-surface: rgba(11, 12, 16, 0.75);
+  --app-surface-alt: rgba(11, 12, 16, 0.6);
+  --app-surface-hover: rgba(11, 12, 16, 0.85);
+  --app-surface-inset: rgba(255, 255, 255, 0.02);
+  --app-border: rgba(212, 175, 55, 0.25);
+  --app-border-subtle: rgba(255, 255, 255, 0.08);
+  --app-border-muted: rgba(212, 175, 55, 0.15);
+  --app-input-bg: rgba(11, 12, 16, 0.85);
+  --app-input-bg-focus: #0b0c10;
+  --app-input-border: rgba(148, 163, 184, 0.25);
+  --app-input-text: #f1f5f9;
+  --app-accent: #d97706;
+  --app-accent-light: #fbbf24;
+  --app-accent-gradient: linear-gradient(135deg, #fef08a 0%, #d97706 100%);
+  --app-accent-bg: rgba(217, 119, 6, 0.1);
+  --app-accent-border: rgba(217, 119, 6, 0.2);
+  --app-accent-focus-ring: rgba(217, 119, 6, 0.2);
+  --app-btn-primary-text: #0b0c10;
+  --app-btn-secondary-bg: rgba(255, 255, 255, 0.05);
+  --app-btn-secondary-border: rgba(255, 255, 255, 0.12);
+  --app-btn-secondary-text: #e2e8f0;
+  --app-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08);
+  --app-icon-btn-bg: rgba(255, 255, 255, 0.05);
+  --app-icon-btn-border: rgba(255, 255, 255, 0.1);
+  --app-divider: rgba(255, 255, 255, 0.06);
+  --app-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+  --app-card-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  --app-error-bg: rgba(244, 63, 94, 0.08);
+  --app-error-text: #fda4af;
+  --app-error-border: #f43f5e;
+  --app-warning-text: #f43f5e;
+  --app-warning-bg: rgba(244, 63, 94, 0.08);
+  --app-warning-border: rgba(244, 63, 94, 0.2);
+  --app-empty-border: rgba(255, 255, 255, 0.08);
+  --app-empty-bg: rgba(255, 255, 255, 0.02);
+  --app-sidebar-active-bg: rgba(217, 119, 6, 0.12);
+  --app-sidebar-active-border: #d97706;
+  --app-sidebar-active-text: #fbbf24;
+  --app-header-border: rgba(212, 175, 55, 0.15);
+  --app-table-border: rgba(255, 255, 255, 0.08);
+  --app-progress-bar: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
+  --app-backdrop: blur(20px);
+  --app-radius-card: 16px;
+  --app-radius-input: 10px;
+  --app-radius-btn: 10px;
+}
+
+/* ===== OCEAN · DARK (default) ===== */
+html.scheme-dark.theme-ocean {
+  color-scheme: dark;
+  --app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
+  --app-text: #f1f5f9;
+  --app-text-heading: #f8fafc;
+  --app-text-muted: #94a3b8;
+  --app-text-subtle: #64748b;
+  --app-surface: rgba(11, 12, 16, 0.75);
+  --app-surface-alt: rgba(11, 12, 16, 0.6);
+  --app-surface-hover: rgba(11, 12, 16, 0.85);
+  --app-surface-inset: rgba(255, 255, 255, 0.02);
+  --app-border: rgba(212, 175, 55, 0.25);
+  --app-border-subtle: rgba(255, 255, 255, 0.08);
+  --app-border-muted: rgba(212, 175, 55, 0.15);
+  --app-input-bg: rgba(11, 12, 16, 0.85);
+  --app-input-bg-focus: #0b0c10;
+  --app-input-border: rgba(148, 163, 184, 0.25);
+  --app-input-text: #f1f5f9;
+  --app-accent: #d97706;
+  --app-accent-light: #fbbf24;
+  --app-accent-gradient: linear-gradient(135deg, #fef08a 0%, #d97706 100%);
+  --app-accent-bg: rgba(217, 119, 6, 0.1);
+  --app-accent-border: rgba(217, 119, 6, 0.2);
+  --app-accent-focus-ring: rgba(217, 119, 6, 0.2);
+  --app-btn-primary-text: #0b0c10;
+  --app-btn-secondary-bg: rgba(255, 255, 255, 0.05);
+  --app-btn-secondary-border: rgba(255, 255, 255, 0.12);
+  --app-btn-secondary-text: #e2e8f0;
+  --app-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08);
+  --app-icon-btn-bg: rgba(255, 255, 255, 0.05);
+  --app-icon-btn-border: rgba(255, 255, 255, 0.1);
+  --app-divider: rgba(255, 255, 255, 0.06);
+  --app-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+  --app-card-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  --app-error-bg: rgba(244, 63, 94, 0.08);
+  --app-error-text: #fda4af;
+  --app-error-border: #f43f5e;
+  --app-warning-text: #f43f5e;
+  --app-warning-bg: rgba(244, 63, 94, 0.08);
+  --app-warning-border: rgba(244, 63, 94, 0.2);
+  --app-empty-border: rgba(255, 255, 255, 0.08);
+  --app-empty-bg: rgba(255, 255, 255, 0.02);
+  --app-sidebar-active-bg: rgba(217, 119, 6, 0.12);
+  --app-sidebar-active-border: #d97706;
+  --app-sidebar-active-text: #fbbf24;
+  --app-header-border: rgba(212, 175, 55, 0.15);
+  --app-table-border: rgba(255, 255, 255, 0.08);
+  --app-progress-bar: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
+  --app-backdrop: blur(20px);
+  --app-radius-card: 16px;
+  --app-radius-input: 10px;
+  --app-radius-btn: 10px;
+}
+
+/* ===== OCEAN · LIGHT ===== */
+html.scheme-light.theme-ocean {
+  color-scheme: light;
+  --app-body-bg: linear-gradient(165deg, #dbeafe 0%, #f8fafc 42%, #e2e8f0 100%);
+  --app-text: #1e293b;
+  --app-text-heading: #0f172a;
+  --app-text-muted: #475569;
+  --app-text-subtle: #64748b;
+  --app-surface: rgba(255, 255, 255, 0.88);
+  --app-surface-alt: rgba(255, 255, 255, 0.78);
+  --app-surface-hover: rgba(255, 255, 255, 0.96);
+  --app-surface-inset: rgba(15, 23, 42, 0.03);
+  --app-border: rgba(217, 119, 6, 0.28);
+  --app-border-subtle: rgba(15, 23, 42, 0.1);
+  --app-border-muted: rgba(217, 119, 6, 0.18);
+  --app-input-bg: #ffffff;
+  --app-input-bg-focus: #ffffff;
+  --app-input-border: rgba(100, 116, 139, 0.35);
+  --app-input-text: #0f172a;
+  --app-accent: #b45309;
+  --app-accent-light: #d97706;
+  --app-accent-gradient: linear-gradient(135deg, #fcd34d 0%, #b45309 100%);
+  --app-accent-bg: rgba(217, 119, 6, 0.12);
+  --app-accent-border: rgba(217, 119, 6, 0.25);
+  --app-accent-focus-ring: rgba(217, 119, 6, 0.25);
+  --app-btn-primary-text: #0b0c10;
+  --app-btn-secondary-bg: rgba(15, 23, 42, 0.04);
+  --app-btn-secondary-border: rgba(15, 23, 42, 0.12);
+  --app-btn-secondary-text: #334155;
+  --app-btn-secondary-hover-bg: rgba(15, 23, 42, 0.07);
+  --app-icon-btn-bg: rgba(15, 23, 42, 0.04);
+  --app-icon-btn-border: rgba(15, 23, 42, 0.1);
+  --app-divider: rgba(15, 23, 42, 0.08);
+  --app-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
+  --app-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
+  --app-error-bg: rgba(244, 63, 94, 0.08);
+  --app-error-text: #be123c;
+  --app-error-border: #e11d48;
+  --app-warning-text: #be123c;
+  --app-warning-bg: rgba(244, 63, 94, 0.06);
+  --app-warning-border: rgba(244, 63, 94, 0.2);
+  --app-empty-border: rgba(15, 23, 42, 0.12);
+  --app-empty-bg: rgba(15, 23, 42, 0.02);
+  --app-sidebar-active-bg: rgba(217, 119, 6, 0.1);
+  --app-sidebar-active-border: #d97706;
+  --app-sidebar-active-text: #b45309;
+  --app-header-border: rgba(217, 119, 6, 0.2);
+  --app-table-border: rgba(15, 23, 42, 0.1);
+  --app-progress-bar: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
+  --app-backdrop: blur(20px);
+  --app-radius-card: 16px;
+  --app-radius-input: 10px;
+  --app-radius-btn: 10px;
+}
+
+/* ===== MATERIAL · DARK ===== */
+html.scheme-dark.theme-material {
+  color-scheme: dark;
+  --app-body-bg: #121212;
+  --app-text: #f1f5f9;
+  --app-text-heading: #f8fafc;
+  --app-text-muted: #94a3b8;
+  --app-text-subtle: #64748b;
+  --app-surface: #1e1e1e;
+  --app-surface-alt: #1e1e1e;
+  --app-surface-hover: #252525;
+  --app-surface-inset: #2a2a2a;
+  --app-border: #2d2d2d;
+  --app-border-subtle: #2d2d2d;
+  --app-border-muted: #2d2d2d;
+  --app-input-bg: #2a2a2a;
+  --app-input-bg-focus: #2a2a2a;
+  --app-input-border: #3d3d3d;
+  --app-input-text: #f1f5f9;
+  --app-accent: #00adb5;
+  --app-accent-light: #00adb5;
+  --app-accent-gradient: linear-gradient(135deg, #00adb5 0%, #008f95 100%);
+  --app-accent-bg: rgba(0, 173, 181, 0.12);
+  --app-accent-border: rgba(0, 173, 181, 0.3);
+  --app-accent-focus-ring: rgba(0, 173, 181, 0.2);
+  --app-btn-primary-text: #ffffff;
+  --app-btn-secondary-bg: #2a2a2a;
+  --app-btn-secondary-border: #3d3d3d;
+  --app-btn-secondary-text: #f1f5f9;
+  --app-btn-secondary-hover-bg: #333333;
+  --app-icon-btn-bg: #2a2a2a;
+  --app-icon-btn-border: #3d3d3d;
+  --app-divider: #2d2d2d;
+  --app-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  --app-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  --app-error-bg: rgba(244, 63, 94, 0.08);
+  --app-error-text: #fda4af;
+  --app-error-border: #f43f5e;
+  --app-warning-text: #f43f5e;
+  --app-warning-bg: rgba(244, 63, 94, 0.08);
+  --app-warning-border: rgba(244, 63, 94, 0.2);
+  --app-empty-border: #2d2d2d;
+  --app-empty-bg: #1a1a1a;
+  --app-sidebar-active-bg: rgba(0, 173, 181, 0.08);
+  --app-sidebar-active-border: #00adb5;
+  --app-sidebar-active-text: #00adb5;
+  --app-header-border: #2d2d2d;
+  --app-table-border: #2d2d2d;
+  --app-progress-bar: linear-gradient(90deg, #00adb5, #008f95, #00adb5);
+  --app-backdrop: none;
+  --app-radius-card: 4px;
+  --app-radius-input: 4px;
+  --app-radius-btn: 4px;
+}
+
+/* ===== MATERIAL · LIGHT ===== */
+html.scheme-light.theme-material {
+  color-scheme: light;
+  --app-body-bg: #fafafa;
+  --app-text: #212121;
+  --app-text-heading: #111827;
+  --app-text-muted: #616161;
+  --app-text-subtle: #757575;
+  --app-surface: #ffffff;
+  --app-surface-alt: #ffffff;
+  --app-surface-hover: #f5f5f5;
+  --app-surface-inset: #f5f5f5;
+  --app-border: #e0e0e0;
+  --app-border-subtle: #eeeeee;
+  --app-border-muted: #e0e0e0;
+  --app-input-bg: #ffffff;
+  --app-input-bg-focus: #ffffff;
+  --app-input-border: #bdbdbd;
+  --app-input-text: #212121;
+  --app-accent: #00838f;
+  --app-accent-light: #00838f;
+  --app-accent-gradient: linear-gradient(135deg, #00838f 0%, #006064 100%);
+  --app-accent-bg: rgba(0, 131, 143, 0.1);
+  --app-accent-border: rgba(0, 131, 143, 0.25);
+  --app-accent-focus-ring: rgba(0, 131, 143, 0.2);
+  --app-btn-primary-text: #ffffff;
+  --app-btn-secondary-bg: #f5f5f5;
+  --app-btn-secondary-border: #e0e0e0;
+  --app-btn-secondary-text: #424242;
+  --app-btn-secondary-hover-bg: #eeeeee;
+  --app-icon-btn-bg: #f5f5f5;
+  --app-icon-btn-border: #e0e0e0;
+  --app-divider: #e0e0e0;
+  --app-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --app-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --app-error-bg: rgba(244, 63, 94, 0.08);
+  --app-error-text: #be123c;
+  --app-error-border: #e11d48;
+  --app-warning-text: #be123c;
+  --app-warning-bg: rgba(244, 63, 94, 0.06);
+  --app-warning-border: rgba(244, 63, 94, 0.2);
+  --app-empty-border: #e0e0e0;
+  --app-empty-bg: #fafafa;
+  --app-sidebar-active-bg: rgba(0, 131, 143, 0.08);
+  --app-sidebar-active-border: #00838f;
+  --app-sidebar-active-text: #00838f;
+  --app-header-border: #e0e0e0;
+  --app-table-border: #e0e0e0;
+  --app-progress-bar: linear-gradient(90deg, #00838f, #00adb5, #00838f);
+  --app-backdrop: none;
+  --app-radius-card: 4px;
+  --app-radius-input: 4px;
+  --app-radius-btn: 4px;
+}
+
+/* ===== CUPERTINO · DARK ===== */
+html.scheme-dark.theme-cupertino {
+  color-scheme: dark;
+  --app-body-bg: #000000;
+  --app-text: #ffffff;
+  --app-text-heading: #ffffff;
+  --app-text-muted: #aeaeb2;
+  --app-text-subtle: #8e8e93;
+  --app-surface: rgba(28, 28, 30, 0.72);
+  --app-surface-alt: rgba(28, 28, 30, 0.72);
+  --app-surface-hover: rgba(44, 44, 46, 0.85);
+  --app-surface-inset: rgba(255, 255, 255, 0.05);
+  --app-border: rgba(255, 255, 255, 0.1);
+  --app-border-subtle: rgba(255, 255, 255, 0.1);
+  --app-border-muted: rgba(255, 255, 255, 0.08);
+  --app-input-bg: rgba(255, 255, 255, 0.05);
+  --app-input-bg-focus: rgba(255, 255, 255, 0.07);
+  --app-input-border: rgba(255, 255, 255, 0.12);
+  --app-input-text: #ffffff;
+  --app-accent: #0a84ff;
+  --app-accent-light: #0a84ff;
+  --app-accent-gradient: linear-gradient(135deg, #0a84ff 0%, #007aff 100%);
+  --app-accent-bg: rgba(10, 132, 255, 0.12);
+  --app-accent-border: rgba(10, 132, 255, 0.3);
+  --app-accent-focus-ring: rgba(10, 132, 255, 0.25);
+  --app-btn-primary-text: #ffffff;
+  --app-btn-secondary-bg: rgba(255, 255, 255, 0.08);
+  --app-btn-secondary-border: rgba(255, 255, 255, 0.12);
+  --app-btn-secondary-text: #ffffff;
+  --app-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);
+  --app-icon-btn-bg: rgba(255, 255, 255, 0.08);
+  --app-icon-btn-border: rgba(255, 255, 255, 0.12);
+  --app-divider: rgba(255, 255, 255, 0.08);
+  --app-shadow: none;
+  --app-card-shadow: none;
+  --app-error-bg: rgba(255, 69, 58, 0.12);
+  --app-error-text: #ff6961;
+  --app-error-border: #ff453a;
+  --app-warning-text: #ff6961;
+  --app-warning-bg: rgba(255, 69, 58, 0.12);
+  --app-warning-border: rgba(255, 69, 58, 0.25);
+  --app-empty-border: rgba(255, 255, 255, 0.1);
+  --app-empty-bg: rgba(255, 255, 255, 0.04);
+  --app-sidebar-active-bg: rgba(10, 132, 255, 0.15);
+  --app-sidebar-active-border: #0a84ff;
+  --app-sidebar-active-text: #0a84ff;
+  --app-header-border: rgba(255, 255, 255, 0.1);
+  --app-table-border: rgba(255, 255, 255, 0.1);
+  --app-progress-bar: linear-gradient(90deg, #0a84ff, #007aff, #0a84ff);
+  --app-backdrop: blur(25px);
+  --app-radius-card: 12px;
+  --app-radius-input: 8px;
+  --app-radius-btn: 9999px;
+}
+
+/* ===== CUPERTINO · LIGHT ===== */
+html.scheme-light.theme-cupertino {
+  color-scheme: light;
+  --app-body-bg: #f2f2f7;
+  --app-text: #1c1c1e;
+  --app-text-heading: #000000;
+  --app-text-muted: #636366;
+  --app-text-subtle: #8e8e93;
+  --app-surface: rgba(255, 255, 255, 0.82);
+  --app-surface-alt: rgba(255, 255, 255, 0.82);
+  --app-surface-hover: rgba(255, 255, 255, 0.95);
+  --app-surface-inset: rgba(0, 0, 0, 0.03);
+  --app-border: rgba(0, 0, 0, 0.08);
+  --app-border-subtle: rgba(0, 0, 0, 0.06);
+  --app-border-muted: rgba(0, 0, 0, 0.08);
+  --app-input-bg: #ffffff;
+  --app-input-bg-focus: #ffffff;
+  --app-input-border: rgba(0, 0, 0, 0.12);
+  --app-input-text: #1c1c1e;
+  --app-accent: #007aff;
+  --app-accent-light: #007aff;
+  --app-accent-gradient: linear-gradient(135deg, #007aff 0%, #0a84ff 100%);
+  --app-accent-bg: rgba(0, 122, 255, 0.1);
+  --app-accent-border: rgba(0, 122, 255, 0.25);
+  --app-accent-focus-ring: rgba(0, 122, 255, 0.2);
+  --app-btn-primary-text: #ffffff;
+  --app-btn-secondary-bg: rgba(0, 0, 0, 0.05);
+  --app-btn-secondary-border: rgba(0, 0, 0, 0.08);
+  --app-btn-secondary-text: #1c1c1e;
+  --app-btn-secondary-hover-bg: rgba(0, 0, 0, 0.08);
+  --app-icon-btn-bg: rgba(0, 0, 0, 0.05);
+  --app-icon-btn-border: rgba(0, 0, 0, 0.08);
+  --app-divider: rgba(0, 0, 0, 0.08);
+  --app-shadow: none;
+  --app-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  --app-error-bg: rgba(255, 59, 48, 0.1);
+  --app-error-text: #d70015;
+  --app-error-border: #ff3b30;
+  --app-warning-text: #d70015;
+  --app-warning-bg: rgba(255, 59, 48, 0.08);
+  --app-warning-border: rgba(255, 59, 48, 0.2);
+  --app-empty-border: rgba(0, 0, 0, 0.08);
+  --app-empty-bg: rgba(0, 0, 0, 0.02);
+  --app-sidebar-active-bg: rgba(0, 122, 255, 0.1);
+  --app-sidebar-active-border: #007aff;
+  --app-sidebar-active-text: #007aff;
+  --app-header-border: rgba(0, 0, 0, 0.08);
+  --app-table-border: rgba(0, 0, 0, 0.08);
+  --app-progress-bar: linear-gradient(90deg, #007aff, #0a84ff, #007aff);
+  --app-backdrop: blur(25px);
+  --app-radius-card: 12px;
+  --app-radius-input: 8px;
+  --app-radius-btn: 9999px;
+}
+
+/* Utility classes for inline-style migration */
+.text-muted { color: var(--app-text-muted); }
+.text-subtle { color: var(--app-text-subtle); }
+.text-heading { color: var(--app-text-heading); }
+
+html.scheme-light #root {
+  border-inline-color: var(--app-border-subtle);
+}

client/src/vite-env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/react" />
 
 declare const __APP_VERSION__: string

client/vite.config.ts

@@ -38,8 +38,12 @@ export default defineConfig({
   plugins: [
     react(),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: 'prompt',
       includeAssets: ['favicon.ico', 'logo.png'],
+      workbox: {
+        cleanupOutdatedCaches: true,
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2,webmanifest}']
+      },
       manifest: {
         name: 'Kapteins Daagbok',
         short_name: 'Daagbok',

server/src/routes/sign.ts

@@ -61,6 +61,7 @@ async function getLogbookWithAccess(logbookId: string, userId: string) {
 }
 
 function hasWriteAccess(access: { isOwner: boolean; collaboration?: { role: string } | null }) {
+  // Intentional (HYBRID-ELECTRONIC-SIGNATURES.md §2.1): owner OR WRITE collaborator may sign entries.
   return access.isOwner || access.collaboration?.role === 'WRITE'
 }
 
@@ -106,6 +107,7 @@ async function isAuthorizedSigner(
   role: 'skipper' | 'crew'
 ): Promise<boolean> {
   if (role === 'skipper') {
+    // Skipper signing: owner or WRITE collaborator (design §2.1), using their own passkey.
     if (signerUserId === ownerUserId) return true
     const collaboration = await prisma.collaboration.findUnique({
       where: {