tangled.org
Monorepo for Tangled
tangled.org
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(untrack(() => data.auth));
12 setContext(AUTH_KEY, auth);
13
14 onMount(() => {
15 if (page.url.pathname !== '/oauth/callback') void auth.refresh();
16 });
17
18 const signedIn = $derived(Boolean(auth.currentUser));
19 const isAuthShell = $derived(page.url.pathname === '/login');
20 const isMarketingShell = $derived(
21 !signedIn && (page.url.pathname === '/about' || page.url.pathname === '/')
22 );
23 const topbarVariant = $derived(isMarketingShell ? 'marketing' : 'app');
24</script>
25
26<svelte:head>
27 <title>Tangled</title>
28</svelte:head>
29
30<div
31 class={isAuthShell
32 ? 'flex min-h-screen flex-col bg-bg-auth text-fg'
33 : isMarketingShell
34 ? 'flex min-h-screen flex-col bg-gradient-to-b from-bg-auth to-bg text-fg'
35 : 'flex min-h-screen flex-col bg-bg text-fg'}
36>
37 {#if !isAuthShell}
38 <header
39 class={isMarketingShell
40 ? 'z-20 w-full bg-transparent pt-[env(safe-area-inset-top)]'
41 : 'sticky top-0 z-20 w-full bg-surface pt-[env(safe-area-inset-top)] shadow-sm'}
42 >
43 <Topbar
44 user={auth.currentUser}
45 variant={topbarVariant}
46 loading={auth.authenticating || auth.profileLoading}
47 onSignOut={auth.signOut}
48 />
49 </header>
50 {/if}
51
52 <main class={isAuthShell ? 'flex flex-grow items-center justify-center px-7' : 'flex-grow'}>
53 {@render children()}
54 </main>
55
56 {#if !isAuthShell}
57 <Footer variant={isMarketingShell ? 'full' : 'minimal'} />
58 {/if}
59</div>