till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-19 18:01:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

refactor(auth): centralize appReady pattern into AuthGate component

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

43
apps/skilltree/apps/web/src/routes/+layout.svelte
View file

@ -1,25 +1,20 @@
<script lang="ts">
import '../app.css';
import '$lib/i18n';
import { onMount } from 'svelte';
import { isLoading as i18nLoading, _ as t } from 'svelte-i18n';
import { skillStore } from '$lib/stores/skills.svelte';
import { achievementStore } from '$lib/stores/achievements.svelte';
import { authStore } from '$lib/stores/auth.svelte';
import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
import { skilltreeOnboarding } from '$lib/stores/app-onboarding.svelte';
import { SessionExpiredBanner } from '@manacore/shared-auth-ui';
import { SessionExpiredBanner, AuthGate } from '@manacore/shared-auth-ui';
let { children } = $props();
let loading = $state(true);
let appReady = $derived(!loading && !$i18nLoading);
onMount(async () => {
await Promise.all([authStore.initialize(), skillStore.initialize()]);
async function handleAuthReady() {
await skillStore.initialize();
await achievementStore.initialize();
loading = false;
});
}
</script>
<svelte:head>
@ -27,20 +22,22 @@
<meta name="description" content="Track your skills like a game. Level up in real life." />
</svelte:head>
{#if !appReady}
<div class="flex min-h-screen items-center justify-center bg-gray-900">
<div class="text-center">
<div class="mb-4 text-6xl">🌳</div>
<div class="text-xl text-gray-300">{$t('app.loading')}</div>
<AuthGate {authStore} allowGuest={true} onReady={handleAuthReady}>
{#if $i18nLoading}
<div class="flex min-h-screen items-center justify-center bg-gray-900">
<div class="text-center">
<div class="mb-4 text-6xl">🌳</div>
<div class="text-xl text-gray-300">Loading...</div>
</div>
</div>
{:else}
<div class="min-h-screen bg-gray-900 text-gray-100">
{@render children()}
</div>
</div>
{:else}
<div class="min-h-screen bg-gray-900 text-gray-100">
{@render children()}
</div>
{#if skilltreeOnboarding.shouldShow}
<MiniOnboardingModal store={skilltreeOnboarding} appName="SkillTree" appEmoji="🌳" />
{#if skilltreeOnboarding.shouldShow}
<MiniOnboardingModal store={skilltreeOnboarding} appName="SkillTree" appEmoji="🌳" />
{/if}
<SessionExpiredBanner locale="de" loginHref="/login" />
{/if}
<SessionExpiredBanner locale="de" loginHref="/login" />
{/if}
</AuthGate>