fix: Sync-Indikator Listener-Cleanup und CSS-Zustände

useSyncIndicator gibt die Unsubscribe-Funktion von subscribeToSyncState
zurück. conn-status-Klassen berücksichtigen jetzt auch den aktiven
Sync-Lauf (syncing) statt nur die Queue-Länge.

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

client/src/components/LogbookDashboard.tsx

@@ -31,7 +31,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
   const [online, setOnline] = useState(navigator.onLine)
   const [username] = useState(localStorage.getItem('active_username') || 'Skipper')
 
-  const { pendingCount, showSpinner, showPendingWarning } = useSyncIndicator()
+  const { pendingCount, showSpinner, showPendingWarning, connStatusClassName } = useSyncIndicator()
 
   // Listen to connectivity changes
   useEffect(() => {
@@ -271,7 +271,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
         <div className="header-actions">
           {/* Connection Indicator */}
           <div
-            className={`conn-status ${online ? (pendingCount > 0 ? 'unsynced' : 'online') : 'offline'}`}
+            className={connStatusClassName(online)}
             title={
               online
                 ? showSpinner

client/src/components/UserProfilePage.tsx

@@ -129,7 +129,12 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
   const [pendingRecoveryPhrase, setPendingRecoveryPhrase] = useState<string | null>(null)
   const [recoveryCopied, setRecoveryCopied] = useState(false)
 
-  const { pendingCount: pendingSyncCount, showSpinner, showPendingWarning } = useSyncIndicator()
+  const {
+    pendingCount: pendingSyncCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName
+  } = useSyncIndicator()
 
   const sharedLogbookCount = useLiveQuery(
     () => db.logbooks.filter((lb) => lb.isShared === 1).count(),
@@ -528,7 +533,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
                 <h3>{t('profile.device_title')}</h3>
               </div>
               <p className="profile-section-desc">{t('profile.device_desc')}</p>
-              <div className={`profile-device-status conn-status ${online ? (pendingSyncCount > 0 ? 'warning' : 'online') : 'offline'}`}>
+              <div className={`profile-device-status ${connStatusClassName(online)}`}>
                 {online ? (
                   showSpinner ? (
                     <>