feat & docs: implement zero-knowledge background sync protocol & conflict resolution

client/src/components/LogbookDashboard.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { db } from '../services/db.js'
 import { fetchLogbooks, createLogbook, deleteLogbook, type DecryptedLogbook } from '../services/logbook.js'
 import { logoutUser } from '../services/auth.js'
 import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
@@ -19,6 +21,9 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
   const [online, setOnline] = useState(navigator.onLine)
   const [username] = useState(localStorage.getItem('active_username') || 'Skipper')
 
+  // Reactive sync queue count
+  const pendingCount = useLiveQuery(() => db.syncQueue.count()) || 0
+
   // Listen to connectivity changes
   useEffect(() => {
     const handleOnline = () => setOnline(true)
@@ -109,9 +114,25 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
 
         <div className="header-actions">
           {/* Connection Indicator */}
-          <div className={`conn-status ${online ? 'online' : 'offline'}`} title={online ? 'Online' : 'Offline'}>
-            {online ? <Wifi size={18} /> : <WifiOff size={18} />}
-            <span>{online ? 'Online' : t('sync.status_offline')}</span>
+          <div className={`conn-status ${online ? (pendingCount > 0 ? 'unsynced' : 'online') : 'offline'}`} title={online ? (pendingCount > 0 ? 'Pending Sync' : 'Synced') : 'Offline'}>
+            {online ? (
+              pendingCount > 0 ? (
+                <>
+                  <RefreshCw size={18} className="spin" />
+                  <span>{t('sync.status_unsynced')} ({pendingCount})</span>
+                </>
+              ) : (
+                <>
+                  <Wifi size={18} />
+                  <span>{t('sync.status_synced')}</span>
+                </>
+              )
+            ) : (
+              <>
+                <WifiOff size={18} />
+                <span>{t('sync.status_offline')}</span>
+              </>
+            )}
           </div>
 
           {/* Skipper profile */}