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

@ -41,6 +41,7 @@
import { parseTaskInput, resolveTaskIds, formatParsedTaskPreview } from '$lib/utils/task-parser';
import AuthGateModal from '$lib/components/AuthGateModal.svelte';
import { sessionTasksStore } from '$lib/stores/session-tasks.svelte';
import { GuestWelcomeModal, shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
// App switcher items
const appItems = getPillAppItems('todo');
@ -276,6 +277,9 @@
let showAuthGateModal = $state(false);
let authGateAction = $state<'save' | 'sync' | 'feature'>('save');
// Guest welcome modal state
let showGuestWelcome = $state(false);
// Show auth gate modal (can be called from child components)
function showAuthGate(action: 'save' | 'sync' | 'feature' = 'save') {
authGateAction = action;
@ -285,6 +289,9 @@
// Session tasks indicator
let sessionTaskCount = $derived(sessionTasksStore.count);
// Language for GuestWelcomeModal
let currentLocale = $derived($locale || 'de');
onMount(async () => {
// Initialize split-panel from URL/localStorage
splitPanel.initialize();
@ -295,6 +302,11 @@
// Initialize session tasks for guest mode
sessionTasksStore.initialize();
// Show guest welcome modal for unauthenticated users
if (!authStore.isAuthenticated && shouldShowGuestWelcome('todo')) {
showGuestWelcome = true;
}
// Load projects (works in both guest and authenticated mode)
await projectsStore.fetchProjects();
@ -503,6 +515,23 @@
action={authGateAction}
/>
<!-- Guest Welcome Modal -->
<GuestWelcomeModal
appId="todo"
visible={showGuestWelcome}
onClose={() => (showGuestWelcome = false)}
onLogin={() => {
showGuestWelcome = false;
goto('/login');
}}
onRegister={() => {
showGuestWelcome = false;
goto('/register');
}}
helpHref="/help"
locale={currentLocale === 'en' ? 'en' : 'de'}
/>
<style>
/* Guest banner styling */
.guest-banner {