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

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