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/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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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>

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}
 

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>

apps/skilltree/apps/web/src/routes/+layout.svelte

@@ -45,4 +45,5 @@
 		{/if}
 		<SessionExpiredBanner locale="de" loginHref="/login" />
 	{/if}
+	<SyncIndicator />
 </AuthGate>

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>

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>

packages/shared-ui/src/components/SyncIndicator.svelte

@@ -1,86 +1,53 @@
 <!--
-  SyncIndicator — Shows sync status as a small floating pill.
+  SyncIndicator — Shows online/offline status as a floating pill.
-
+  Appears when browser goes offline. Shows "Wieder online" briefly on reconnect.
-  Displays:
+  Usage: Just add <SyncIndicator /> to any layout. No props needed.
-  - 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} />
-  ```
 -->
 
 <script lang="ts">
-	type SyncStatus = 'idle' | 'synced' | 'syncing' | 'offline' | 'error';
+	import { onMount, onDestroy } from 'svelte';
 
-	let {
+	let isOnline = $state(true);
-		status = 'idle',
+	let showReconnected = $state(false);
-		pendingCount = 0,
+	let visible = $state(false);
-		position = 'bottom-right',
-	}: {
-		status?: SyncStatus;
-		pendingCount?: number;
-		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-	} = $props();
 
-	let showSynced = $state(false);
+	function handleOnline() {
-	let prevStatus = $state<SyncStatus>('idle');
+		isOnline = true;
+		showReconnected = true;
+		visible = true;
+		setTimeout(() => {
+			showReconnected = false;
+			visible = false;
+		}, 3000);
+	}
 
-	// Show "Synced ✓" briefly when transitioning from syncing → synced
+	function handleOffline() {
-	$effect(() => {
+		isOnline = false;
-		if (
+		visible = true;
-			prevStatus === 'syncing' &&
+	}
-			(status === 'synced' || status === 'idle') &&
+
-			pendingCount === 0
+	onMount(() => {
-		) {
+		isOnline = navigator.onLine;
-			showSynced = true;
+		visible = !isOnline;
-			setTimeout(() => {
+		window.addEventListener('online', handleOnline);
-				showSynced = false;
+		window.addEventListener('offline', handleOffline);
-			}, 2000);
-		}
-		prevStatus = status;
 	});
 
-	let visible = $derived(
+	onDestroy(() => {
-		status === 'offline' ||
+		if (typeof window !== 'undefined') {
-			status === 'syncing' ||
+			window.removeEventListener('online', handleOnline);
-			status === 'error' ||
+			window.removeEventListener('offline', handleOffline);
-			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]
-	);
 </script>
 
 {#if visible}
-	{@const colorClass =
+	{@const colorClass = isOnline ? 'bg-green-600 text-green-50' : 'bg-amber-600 text-amber-50'}
-		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'}
 	<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'}
+		{#if !isOnline}
-			<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<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>
+			<span>Offline</span>
-		{:else if status === 'syncing'}
+		{:else if showReconnected}
-			<svg class="h-3 w-3 animate-spin" fill="none" viewBox="0 0 24 24">
+			<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" 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">
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 			</svg>
-			<span>Synchronisiert</span>
+			<span>Wieder online</span>
-		{:else if pendingCount > 0}
-			<span>{pendingCount} ausstehend</span>
 		{/if}
 	</div>
 {/if}