alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { page } from '$app/state';
3 import { createAuth, AUTH_KEY } from '$lib/auth.svelte';
4 import Footer from '$lib/components/shell/Footer.svelte';
5 import Topbar from '$lib/components/shell/Topbar.svelte';
6 import { onMount, setContext, untrack } from 'svelte';
7 import '../app.css';
8
9 let { children, data } = $props();
10
11 const auth = createAuth(
12 data.publicConfig.bobbinUrl,
13 untrack(() => data.auth)
14 );
15 setContext(AUTH_KEY, auth);
16
17 onMount(() => {
18 if (page.url.pathname !== '/oauth/callback') void auth.refresh();
19 });
20
21 const signedIn = $derived(Boolean(auth.currentUser));
22 const isAuthShell = $derived(page.url.pathname === '/login');
23 const isMarketingShell = $derived(
24 !signedIn && (page.url.pathname === '/about' || page.url.pathname === '/')
25 );
26 const topbarVariant = $derived(isMarketingShell ? 'marketing' : 'app');
27</script>
28
29<svelte:head>
30 <title>Tangled</title>
31</svelte:head>
32
33<div
34 class={isAuthShell
35 ? 'flex min-h-screen flex-col bg-bg-auth text-fg'
36 : isMarketingShell
37 ? 'flex min-h-screen flex-col bg-gradient-to-b from-bg-auth to-bg text-fg'
38 : 'flex min-h-screen flex-col bg-bg text-fg'}
39>
40 {#if !isAuthShell}
41 <header
42 class={isMarketingShell
43 ? 'z-20 w-full bg-transparent pt-[env(safe-area-inset-top)]'
44 : 'sticky top-0 z-20 w-full bg-surface pt-[env(safe-area-inset-top)] shadow-sm'}
45 >
46 <Topbar
47 user={auth.currentUser}
48 variant={topbarVariant}
49 loading={auth.authenticating || auth.profileLoading}
50 onSignOut={auth.signOut}
51 />
52 </header>
53 {/if}
54
55 <main class={isAuthShell ? 'flex flex-grow items-center justify-center px-7' : 'flex-grow'}>
56 {@render children()}
57 </main>
58
59 {#if !isAuthShell}
60 <Footer variant={isMarketingShell ? 'full' : 'minimal'} />
61 {/if}
62</div>