refactor(auth): centralize appReady pattern into AuthGate component

Replace copy-pasted appReady/loading/redirect logic in all 13 layouts
with a shared AuthGate component. Supports guest mode, onReady callback
for app-specific data loading, and configurable login redirect.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-25 08:30:31 +01:00
parent 31af413b77
commit 336cfedd0b
15 changed files with 270 additions and 407 deletions

View file

@ -8,14 +8,9 @@
import { authStore } from '$lib/stores/auth.svelte';
import { mealsStore } from '$lib/stores/meals.svelte';
import { parseMealInput, formatParsedMealPreview } from '$lib/utils/meal-parser';
import { SessionExpiredBanner } from '@manacore/shared-auth-ui';
import { onMount } from 'svelte';
import { SessionExpiredBanner, AuthGate } from '@manacore/shared-auth-ui';
let { children } = $props();
let loading = $state(true);
let appReady = $derived(!loading && !$i18nLoading);
// QuickInputBar handlers - search recent meals
async function handleSearch(query: string): Promise<QuickInputItem[]> {
const q = query.toLowerCase();
@ -55,46 +50,42 @@
});
goto(`/add?${params.toString()}`);
}
onMount(() => {
authStore.initialize().then(() => {
loading = false;
});
});
</script>
<svelte:head>
{#if appReady}
{#if !$i18nLoading}
<title>{$t('app.name')} - {$t('app.tagline')}</title>
{:else}
<title>NutriPhi</title>
{/if}
</svelte:head>
{#if !appReady}
<div class="flex min-h-screen items-center justify-center bg-background">
<div
class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
></div>
</div>
{:else}
{@render children()}
<AuthGate {authStore} {goto} allowGuest={true}>
{#if $i18nLoading}
<div class="flex min-h-screen items-center justify-center bg-background">
<div
class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
></div>
</div>
{:else}
{@render children()}
{#if authStore.isAuthenticated}
<QuickInputBar
onSearch={handleSearch}
onSelect={handleSelect}
onParseCreate={handleParseCreate}
onCreate={handleCreate}
placeholder="Mahlzeit eingeben..."
emptyText="Keine Mahlzeiten gefunden"
searchingText="Suche..."
createText="Analysieren"
deferSearch={true}
locale="de"
appIcon="search"
bottomOffset="70px"
/>
{#if authStore.isAuthenticated}
<QuickInputBar
onSearch={handleSearch}
onSelect={handleSelect}
onParseCreate={handleParseCreate}
onCreate={handleCreate}
placeholder="Mahlzeit eingeben..."
emptyText="Keine Mahlzeiten gefunden"
searchingText="Suche..."
createText="Analysieren"
deferSearch={true}
locale="de"
appIcon="search"
bottomOffset="70px"
/>
{/if}
<SessionExpiredBanner locale="de" loginHref="/login" />
{/if}
<SessionExpiredBanner locale="de" loginHref="/login" />
{/if}
</AuthGate>