sveltekit route migration

1 files changed, 57 insertions, 0 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 00000000..316bf6b3
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,57 @@
+<script>
+	import { SvelteToast } from '@zerodevx/svelte-toast';
+	import '$lib/i18n';
+	import { isLoading, locale } from 'svelte-i18n';
+	import '../app.css';
+	import { onMount } from 'svelte';
+	import { connect } from '$lib/socket';
+	import { user, token } from '$lib/store';
+	import { page, session } from '$app/stores';
+	import { browser } from '$app/env';
+	import { goto } from '$app/navigation';
+	import { LoadingSplash } from '$comp';
+	import { warning, protectedRoutes } from '$lib/utils';
+
+	browser && ($token ||= $session.token);
+
+	let ready = false;
+
+	onMount(() => {
+		// get locale from local storage
+		let localStorageLocale = localStorage.getItem('svelte-i18n-locale');
+		if (localStorageLocale) locale.set(localStorageLocale);
+
+		locale.subscribe((lng) => {
+			if (lng) localStorage.setItem('svelte-i18n-locale', lng);
+		});
+
+		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
+			if (!$token) {
+				goto('/login');
+				warning('Please sign in to continue.');
+			}
+			user.subscribe((u) => u?.username && (ready = true));
+		} else {
+			ready = true;
+		}
+
+		connect();
+	});
+</script>
+
+{#if ready && !$isLoading}
+	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
+	<slot />
+{:else}
+	<LoadingSplash />
+{/if}
+
+<style>
+	:root {
+		--toastContainerTop: auto;
+		--toastContainerRight: auto;
+		--toastContainerBottom: 8rem;
+		--toastContainerLeft: calc(50vw - 8rem);
+		--toastBackground: #292929;
+	}
+</style>