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>