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 // the welcome flow runs its own steps chrome, so the bar and footer step aside
24 const isWelcomeShell = $derived(page.url.pathname === "/welcome");
25 const isMarketingShell = $derived(
26 !signedIn && (page.url.pathname === "/about" || page.url.pathname === "/")
27 );
28 const topbarVariant = $derived(isMarketingShell ? "marketing" : "app");
29</script>
30
31<svelte:head>
32 <title>Tangled</title>
33</svelte:head>
34
35<div
36 class={isAuthShell
37 ? "flex min-h-screen flex-col bg-background-default text-foreground-default dark:bg-background-canvas"
38 : isMarketingShell
39 ? "flex min-h-screen flex-col bg-linear-to-b from-background-default to-background-canvas text-foreground-default"
40 : "flex min-h-screen flex-col bg-background-canvas text-foreground-default"}
41>
42 {#if !isAuthShell && !isWelcomeShell}
43 <header
44 class={isMarketingShell
45 ? "z-20 w-full bg-transparent pt-[env(safe-area-inset-top)]"
46 : "top-0 z-20 w-full bg-background-default pt-[env(safe-area-inset-top)]"}
47 >
48 <Topbar
49 user={auth.currentUser}
50 variant={topbarVariant}
51 loading={auth.state.kind === "authenticating" || auth.state.kind === "profile-loading"}
52 onSignOut={auth.signOut}
53 />
54 </header>
55 {/if}
56
57 <main class={isAuthShell ? "flex grow items-center justify-center px-7" : "grow"}>
58 {@render children()}
59 </main>
60
61 {#if !isAuthShell && !isWelcomeShell}
62 <Footer variant={isMarketingShell ? "full" : "minimal"} />
63 {/if}
64</div>