feat(shared-auth-ui): add GuestWelcomeModal for guest onboarding

Add a unified welcome modal for guest mode that displays:
- App icon, name, and description from shared-branding
- Feature list of what guests can do (localized DE/EN)
- Warning about local-only data storage
- Login, Register, Help, and "Continue as Guest" buttons

New files:
- GuestWelcomeModal.svelte - The modal component
- guestWelcome.ts - localStorage utilities for tracking seen state

Integrated into: contacts, chat, todo, calendar, and clock apps
This commit is contained in:
Till-JS 2026-01-27 16:57:14 +01:00
parent 6402f287e8
commit 14c83cb4bd
10 changed files with 873 additions and 7 deletions

View file

@ -25,6 +25,7 @@
import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
import { setLocale, supportedLocales } from '$lib/i18n';
import AuthGateModal from '$lib/components/AuthGateModal.svelte';
import { GuestWelcomeModal, shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
import type { LayoutData } from './$types';
// App switcher items
@ -40,6 +41,9 @@
let showAuthGateModal = $state(false);
let authGateAction = $state<'save' | 'sync' | 'ai' | 'feature'>('ai');
// Guest welcome modal state
let showGuestWelcome = $state(false);
// Check if in guest mode
let isGuestMode = $derived(!authStore.isAuthenticated);
let sessionConversationCount = $derived(sessionConversationsStore.count);
@ -93,6 +97,7 @@
// Base navigation items for Chat (settings moved to user dropdown)
const baseNavItems: PillNavItem[] = [
{ href: '/chat', label: 'Chat', icon: 'home' },
{ href: '/compare', label: 'Vergleichen', icon: 'scale' },
{ href: '/templates', label: 'Templates', icon: 'document' },
{ href: '/spaces', label: 'Spaces', icon: 'building' },
{ href: '/documents', label: 'Dokumente', icon: 'archive' },
@ -183,6 +188,11 @@
await authStore.initialize();
// Show guest welcome modal for unauthenticated users
if (!authStore.isAuthenticated && shouldShowGuestWelcome('chat')) {
showGuestWelcome = true;
}
// Load user settings if authenticated
if (authStore.isAuthenticated) {
await userSettings.load();
@ -291,6 +301,23 @@
conversationCount={sessionConversationCount}
onClose={() => (showAuthGateModal = false)}
/>
<!-- Guest Welcome Modal -->
<GuestWelcomeModal
appId="chat"
visible={showGuestWelcome}
onClose={() => (showGuestWelcome = false)}
onLogin={() => {
showGuestWelcome = false;
goto('/login');
}}
onRegister={() => {
showGuestWelcome = false;
goto('/register');
}}
helpHref="/help"
locale={currentLocale === 'en' ? 'en' : 'de'}
/>
{/if}
<style>