src/routes/+layout.svelte

<script>
	import { get } from "svelte/store";
	import { browser } from '$app/environment';
	import Icon from "@iconify/svelte";

	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
	import "$lib/styles/tailwind.css"
	import { userStore, loginFromCode } from "$lib/stores/use-user";
	import Dialog from "$lib/components/dialog/Dialog.svelte";
	import { loginModalStore } from "$lib/stores/use-login-modal";

	export let data;
	userStore.set(data?.user?.user);

	let open = get(loginModalStore);

	loginModalStore.subscribe((v) => {
		open = v;
  });

	if (browser) {
    window.addEventListener("message", async (event) => {
      if (event.data?.type === "user-oauth") {
      	await loginFromCode(event.data.code);
      }
    });
  }
</script>

<div class="flex items-start">
	<Sidebar />
	<main id="app" class="flex-1 h-screen overflow-y-auto">
		<slot />
	</main>
	<Dialog {open} onClose={() => loginModalStore.set(false)}>
		<div class="grid grid-cols-1 gap-7 text-center">
			<Icon icon="fluent-emoji:sparkles" class="w-12 h-12 mx-auto" />
			<header>
				<p class="text-white font-semibold text-lg">
					Login to LoRA Studio
				</p>
				<p class="text-neutral-300 text-base mt-1">
					Login to get a full access and get the most out of LoRA Studio.
				</p>
			</header>
			<main>
				<a href="/api/auth/login">
					<img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg.svg" alt="Sign in with Hugging Face" class="mx-auto" />
				</a>
			</main>
		</div>
	</Dialog>
</div>