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(
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-background-default text-foreground-default"
36 : isMarketingShell
37 ? "flex min-h-screen flex-col bg-gradient-to-b from-background-default to-background-canvas text-foreground-default"
38 : "flex min-h-screen flex-col bg-background-canvas text-foreground-default"}
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-background-default pt-[env(safe-area-inset-top)]"}
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>