From bda77cbcb73136c5ee2c2f9e245f6a13006cfc49 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 28 Mar 2026 18:27:30 +0100
Subject: [PATCH] feat(ui): add SyncIndicator to all 19 app layouts

Add <SyncIndicator /> from @manacore/shared-ui to every app layout.
Shows floating pill when browser goes offline ("Offline") and briefly
when reconnecting ("Wieder online"). Auto-fades after 3 seconds.

Simplified component: uses browser online/offline events instead of
sync engine coupling. Works universally without any props.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/routes/(app)/+layout.svelte  |   3 +
 .../web/src/routes/(protected)/+layout.svelte |   3 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   3 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   2 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   1 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   2 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   2 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   3 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   2 +
 .../apps/web/src/routes/+layout.svelte        |   3 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   3 +
 .../apps/web/src/routes/+layout.svelte        |   1 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   3 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   3 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   2 +
 .../apps/web/src/routes/+layout.svelte        |   1 +
 .../apps/web/src/routes/+layout.svelte        |   4 +
 .../apps/web/src/routes/(app)/+layout.svelte  |   2 +
 .../src/components/SyncIndicator.svelte       | 127 ++++++------------
 19 files changed, 83 insertions(+), 87 deletions(-)

diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index 4fc8e9e4f..eda0bbfcc 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -4,6 +4,7 @@
 	import { setContext } from 'svelte';
 	import { locale } from 'svelte-i18n';
 	import { PillNavigation, InputBarHelpModal, ImmersiveModeToggle } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import {
 		SplitPaneContainer,
 		setSplitPanelContext,
@@ -47,6 +48,7 @@
 	import { format } from 'date-fns';
 	import { de } from 'date-fns/locale';
 	import type { CreatePreview } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import {
 		parseEventInput,
 		resolveEventIds,
@@ -620,6 +622,7 @@
 	{#if authStore.isAuthenticated}
 		<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 	{/if}
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
index b95238ded..1671f3c05 100644
--- a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
@@ -16,7 +16,9 @@
 	import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation';
 	import { setContext } from 'svelte';
 	import { PillNavigation, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import {
 		tagLocalStore,
 		tagMutations,
@@ -293,6 +295,7 @@
 		onRegister={() => goto('/register')}
 		locale={($locale || 'de') === 'de' ? 'de' : 'en'}
 	/>
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/citycorners/apps/web/src/routes/(app)/+layout.svelte b/apps/citycorners/apps/web/src/routes/(app)/+layout.svelte
index 032bfb534..d696690ff 100644
--- a/apps/citycorners/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/citycorners/apps/web/src/routes/(app)/+layout.svelte
@@ -4,7 +4,9 @@
 	import { setContext } from 'svelte';
 	import { _, locale } from 'svelte-i18n';
 	import { PillNavigation, QuickInputBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem, QuickInputItem } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import {
 		tagLocalStore,
 		tagMutations,
@@ -301,6 +303,7 @@
 		onRegister={() => goto('/register')}
 		locale={($locale || 'de') === 'de' ? 'de' : 'en'}
 	/>
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/clock/apps/web/src/routes/(app)/+layout.svelte b/apps/clock/apps/web/src/routes/(app)/+layout.svelte
index 885314288..6bd014917 100644
--- a/apps/clock/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/clock/apps/web/src/routes/(app)/+layout.svelte
@@ -4,6 +4,7 @@
 	import { page } from '$app/stores';
 	import { locale } from 'svelte-i18n';
 	import { PillNavigation, CommandBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type {
 		PillNavItem,
 		PillDropdownItem,
@@ -386,6 +387,7 @@
 	{#if authStore.isAuthenticated}
 		<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 	{/if}
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
index 988112e6b..c6d7e19fc 100644
--- a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
@@ -477,6 +477,7 @@
 	{#if authStore.isAuthenticated}
 		<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 	{/if}
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/context/apps/web/src/routes/(app)/+layout.svelte b/apps/context/apps/web/src/routes/(app)/+layout.svelte
index 05a9da85b..a3097d448 100644
--- a/apps/context/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/context/apps/web/src/routes/(app)/+layout.svelte
@@ -4,6 +4,7 @@
 	import { onMount, setContext } from 'svelte';
 	import { locale } from 'svelte-i18n';
 	import { PillNavigation, CommandBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type {
 		PillNavItem,
 		PillDropdownItem,
@@ -335,6 +336,7 @@
 		onRegister={() => goto('/register')}
 		locale={($locale || 'de') === 'de' ? 'de' : 'en'}
 	/>
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/inventar/apps/web/src/routes/(app)/+layout.svelte b/apps/inventar/apps/web/src/routes/(app)/+layout.svelte
index d68a51df5..c16c3dd04 100644
--- a/apps/inventar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/inventar/apps/web/src/routes/(app)/+layout.svelte
@@ -8,6 +8,7 @@
 	import { theme } from '$lib/stores/theme';
 	import { setLocale, supportedLocales } from '$lib/i18n';
 	import { PillNavigation } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import { getPillAppItems } from '@manacore/shared-branding';
 	import { AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui';
 	import { shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
@@ -189,4 +190,5 @@
 		onRegister={() => goto('/register')}
 		locale="de"
 	/>
+	<SyncIndicator />
 </AuthGate>
diff --git a/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte b/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
index a8c80f827..256e056a0 100644
--- a/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
@@ -8,7 +8,9 @@
 	import { theme } from '$lib/stores/theme';
 	import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation';
 	import { PillNavigation, QuickInputBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem, QuickInputItem } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import {
 		tagLocalStore,
 		tagMutations,
@@ -316,4 +318,5 @@
 	{#if authStore.isAuthenticated}
 		<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 	{/if}
+	<SyncIndicator />
 </AuthGate>
diff --git a/apps/mukke/apps/web/src/routes/(app)/+layout.svelte b/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
index 1f8e39ffd..e18ba634f 100644
--- a/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { PillNavigation, QuickInputBar, DevBuildBadge, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type {
 		PillNavItem,
 		PillDropdownItem,
@@ -304,6 +305,7 @@
 		onRegister={() => goto('/register')}
 		locale="de"
 	/>
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/nutriphi/apps/web/src/routes/+layout.svelte b/apps/nutriphi/apps/web/src/routes/+layout.svelte
index dfc147560..a7fb94e50 100644
--- a/apps/nutriphi/apps/web/src/routes/+layout.svelte
+++ b/apps/nutriphi/apps/web/src/routes/+layout.svelte
@@ -4,7 +4,9 @@
 	import { isLoading as i18nLoading, _ as t } from 'svelte-i18n';
 	import { goto } from '$app/navigation';
 	import { QuickInputBar } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type { QuickInputItem, CreatePreview } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { useAllMeals, searchMeals } from '$lib/data/queries';
 	import { parseMealInput, formatParsedMealPreview } from '$lib/utils/meal-parser';
@@ -112,4 +114,5 @@
 		onRegister={() => goto('/register')}
 		locale="de"
 	/>
+	<SyncIndicator />
 </AuthGate>
diff --git a/apps/photos/apps/web/src/routes/(app)/+layout.svelte b/apps/photos/apps/web/src/routes/(app)/+layout.svelte
index a8a1b4a74..cae9fc603 100644
--- a/apps/photos/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/photos/apps/web/src/routes/(app)/+layout.svelte
@@ -3,7 +3,9 @@
 	import { page } from '$app/stores';
 	import { _, locale } from 'svelte-i18n';
 	import { PillNavigation, QuickInputBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem, QuickInputItem } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import { theme } from '$lib/stores/theme';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { photoStore } from '$lib/stores/photos.svelte';
@@ -210,6 +212,7 @@
 		onRegister={() => goto('/register')}
 		locale={($locale || 'de') === 'de' ? 'de' : 'en'}
 	/>
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/picture/apps/web/src/routes/+layout.svelte b/apps/picture/apps/web/src/routes/+layout.svelte
index 37068237b..84f946ab3 100644
--- a/apps/picture/apps/web/src/routes/+layout.svelte
+++ b/apps/picture/apps/web/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
 	import favicon from '$lib/assets/favicon.svg';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { ToastContainer, setupGlobalErrorHandler } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import { onMount } from 'svelte';
 
 	// Import and initialize theme
diff --git a/apps/planta/apps/web/src/routes/(app)/+layout.svelte b/apps/planta/apps/web/src/routes/(app)/+layout.svelte
index 9eaae19d7..14d7e13aa 100644
--- a/apps/planta/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/planta/apps/web/src/routes/(app)/+layout.svelte
@@ -2,7 +2,9 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { PillNavigation, QuickInputBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type { PillNavItem, QuickInputItem, CreatePreview } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import {
 		tagLocalStore,
 		tagMutations,
@@ -206,6 +208,7 @@
 		onRegister={() => goto('/register')}
 		locale="de"
 	/>
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/presi/apps/web/src/routes/(app)/+layout.svelte b/apps/presi/apps/web/src/routes/(app)/+layout.svelte
index 6133e54de..ef5f94e49 100644
--- a/apps/presi/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/presi/apps/web/src/routes/(app)/+layout.svelte
@@ -4,7 +4,9 @@
 	import { page } from '$app/stores';
 	import { locale } from 'svelte-i18n';
 	import { PillNavigation, QuickInputBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem, QuickInputItem } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import {
 		tagLocalStore,
 		tagMutations,
@@ -289,6 +291,7 @@
 		{#if auth.isAuthenticated}
 			<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 		{/if}
+		<SyncIndicator />
 	</AuthGate>
 {/if}
 
diff --git a/apps/questions/apps/web/src/routes/(app)/+layout.svelte b/apps/questions/apps/web/src/routes/(app)/+layout.svelte
index c522821f7..1870f27de 100644
--- a/apps/questions/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/questions/apps/web/src/routes/(app)/+layout.svelte
@@ -16,6 +16,7 @@
 		searchQuestions,
 	} from '$lib/data/queries';
 	import { PillNavigation, QuickInputBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type {
 		PillNavItem,
 		PillDropdownItem,
@@ -262,6 +263,7 @@
 		onRegister={() => goto('/register')}
 		locale="de"
 	/>
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/skilltree/apps/web/src/routes/+layout.svelte b/apps/skilltree/apps/web/src/routes/+layout.svelte
index 67ac85d2f..c31c53bad 100644
--- a/apps/skilltree/apps/web/src/routes/+layout.svelte
+++ b/apps/skilltree/apps/web/src/routes/+layout.svelte
@@ -45,4 +45,5 @@
 		{/if}
 		<SessionExpiredBanner locale="de" loginHref="/login" />
 	{/if}
+	<SyncIndicator />
 </AuthGate>
diff --git a/apps/storage/apps/web/src/routes/+layout.svelte b/apps/storage/apps/web/src/routes/+layout.svelte
index aedb9e572..78915f466 100644
--- a/apps/storage/apps/web/src/routes/+layout.svelte
+++ b/apps/storage/apps/web/src/routes/+layout.svelte
@@ -4,7 +4,9 @@
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
 	import { PillNavigation, setupGlobalErrorHandler, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import { theme } from '$lib/stores/theme.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
@@ -20,6 +22,7 @@
 	import { getPillAppItems } from '@manacore/shared-branding';
 	import { setLocale, supportedLocales } from '$lib/i18n';
 	import { ToastContainer } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import { storageOnboarding } from '$lib/stores/app-onboarding.svelte';
 	import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
 	import { SessionExpiredBanner, AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui';
@@ -300,6 +303,7 @@
 		onRegister={() => goto('/register')}
 		locale={($locale || 'de') === 'de' ? 'de' : 'en'}
 	/>
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/apps/zitare/apps/web/src/routes/(app)/+layout.svelte b/apps/zitare/apps/web/src/routes/(app)/+layout.svelte
index d3bd25c87..c3e2c23cc 100644
--- a/apps/zitare/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/zitare/apps/web/src/routes/(app)/+layout.svelte
@@ -9,6 +9,7 @@
 		TagStrip,
 	} from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem, QuickInputItem } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
 	import {
 		tagLocalStore,
 		tagMutations,
@@ -388,6 +389,7 @@
 	{#if authStore.isAuthenticated}
 		<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 	{/if}
+	<SyncIndicator />
 </AuthGate>
 
 <style>
diff --git a/packages/shared-ui/src/components/SyncIndicator.svelte b/packages/shared-ui/src/components/SyncIndicator.svelte
index 95fb162cd..e9001c312 100644
--- a/packages/shared-ui/src/components/SyncIndicator.svelte
+++ b/packages/shared-ui/src/components/SyncIndicator.svelte
@@ -1,86 +1,53 @@
 <!--
-  SyncIndicator — Shows sync status as a small floating pill.
-
-  Displays:
-  - Nothing when synced (no visual clutter)
-  - "Offline" pill when disconnected
-  - "Syncing..." pill with spinner when actively syncing
-  - "X pending" pill when changes haven't synced yet
-  - "Synced ✓" briefly after sync completes (fades out)
-
-  Usage:
-  ```svelte
-  <SyncIndicator status="synced" pendingCount={0} />
-  <SyncIndicator status="offline" pendingCount={3} />
-  <SyncIndicator status="syncing" pendingCount={1} />
-  ```
+  SyncIndicator — Shows online/offline status as a floating pill.
+  Appears when browser goes offline. Shows "Wieder online" briefly on reconnect.
+  Usage: Just add <SyncIndicator /> to any layout. No props needed.
 -->
 
 <script lang="ts">
-	type SyncStatus = 'idle' | 'synced' | 'syncing' | 'offline' | 'error';
+	import { onMount, onDestroy } from 'svelte';
 
-	let {
-		status = 'idle',
-		pendingCount = 0,
-		position = 'bottom-right',
-	}: {
-		status?: SyncStatus;
-		pendingCount?: number;
-		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-	} = $props();
+	let isOnline = $state(true);
+	let showReconnected = $state(false);
+	let visible = $state(false);
 
-	let showSynced = $state(false);
-	let prevStatus = $state<SyncStatus>('idle');
+	function handleOnline() {
+		isOnline = true;
+		showReconnected = true;
+		visible = true;
+		setTimeout(() => {
+			showReconnected = false;
+			visible = false;
+		}, 3000);
+	}
 
-	// Show "Synced ✓" briefly when transitioning from syncing → synced
-	$effect(() => {
-		if (
-			prevStatus === 'syncing' &&
-			(status === 'synced' || status === 'idle') &&
-			pendingCount === 0
-		) {
-			showSynced = true;
-			setTimeout(() => {
-				showSynced = false;
-			}, 2000);
-		}
-		prevStatus = status;
+	function handleOffline() {
+		isOnline = false;
+		visible = true;
+	}
+
+	onMount(() => {
+		isOnline = navigator.onLine;
+		visible = !isOnline;
+		window.addEventListener('online', handleOnline);
+		window.addEventListener('offline', handleOffline);
 	});
 
-	let visible = $derived(
-		status === 'offline' ||
-			status === 'syncing' ||
-			status === 'error' ||
-			pendingCount > 0 ||
-			showSynced
-	);
-
-	let positionClass = $derived(
-		{
-			'bottom-right': 'bottom-20 right-4',
-			'bottom-left': 'bottom-20 left-4',
-			'top-right': 'top-4 right-4',
-			'top-left': 'top-4 left-4',
-		}[position]
-	);
+	onDestroy(() => {
+		if (typeof window !== 'undefined') {
+			window.removeEventListener('online', handleOnline);
+			window.removeEventListener('offline', handleOffline);
+		}
+	});
 </script>
 
 {#if visible}
-	{@const colorClass =
-		status === 'offline'
-			? 'bg-amber-500 text-amber-50'
-			: status === 'syncing'
-				? 'bg-blue-500 text-blue-50'
-				: status === 'error'
-					? 'bg-red-500 text-red-50'
-					: showSynced
-						? 'bg-green-500 text-green-50'
-						: 'bg-slate-700 text-slate-100'}
+	{@const colorClass = isOnline ? 'bg-green-600 text-green-50' : 'bg-amber-600 text-amber-50'}
 	<div
-		class="fixed {positionClass} z-40 flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur-sm transition-all duration-300 {colorClass}"
+		class="fixed bottom-20 right-4 z-40 flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur-sm transition-all duration-300 {colorClass}"
 	>
-		{#if status === 'offline'}
-			<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+		{#if !isOnline}
+			<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				<path
 					stroke-linecap="round"
 					stroke-linejoin="round"
@@ -89,26 +56,12 @@
 				/>
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1l22 22" />
 			</svg>
-			<span>Offline{pendingCount > 0 ? ` · ${pendingCount} ausstehend` : ''}</span>
-		{:else if status === 'syncing'}
-			<svg class="h-3 w-3 animate-spin" fill="none" viewBox="0 0 24 24">
-				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-				<path
-					class="opacity-75"
-					fill="currentColor"
-					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-				/>
-			</svg>
-			<span>Synchronisiere...</span>
-		{:else if status === 'error'}
-			<span>Sync-Fehler</span>
-		{:else if showSynced}
-			<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<span>Offline</span>
+		{:else if showReconnected}
+			<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 			</svg>
-			<span>Synchronisiert</span>
-		{:else if pendingCount > 0}
-			<span>{pendingCount} ausstehend</span>
+			<span>Wieder online</span>
 		{/if}
 	</div>
 {/if}