fixing behaviors

src/components/Footer.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import type { LayoutServerData } from '$types';
-
-	export const data: LayoutServerData = undefined;
 </script>
 
 <footer

src/components/Header.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
-	import type { PageData } from '$types';
 	import { Hamburger } from 'svelte-hamburgers';
 	import { Button } from '$components/ui/button';
 	import Sun from 'lucide-svelte/icons/sun';
 	import Moon from 'lucide-svelte/icons/moon';
 	import { toggleMode } from 'mode-watcher';
 
-	export let data: PageData;
-	export let authChange: boolean;
-	let { supabase } = data;
+	let { supabase, authChange = $bindable() }: { supabase: any; authChange: Boolean } = $props();
 
 	let open: boolean = true;
 
-	let currentUser: { data: { user: { aud: string } } };
+	let currentUser: { data: { user: { aud: string } } } | undefined = $state();
+
 	async function getCurrentUser() {
 		return await supabase.auth.getUser().then((res: { data: { user: { aud: string } } }) => {
 			currentUser = res;
 		});
 	}
-	$: authChange, getCurrentUser();
+
+	$effect(() => {
+		authChange;
+		getCurrentUser();
+	});
 </script>
 
 <div class="absolute end-0">

src/components/Matches.svelte

@@ -13,6 +13,7 @@
 	import type { RealtimeChannel } from '@supabase/supabase-js';
 	import { Alert, Button } from 'flowbite-svelte';
 	import type { HttpError } from '@sveltejs/kit';
+	import type { Teams } from '$lib/teams.svelte';
 
 	let {
 		matches = $bindable(),

src/lib/event.svelte.ts

@@ -34,6 +34,8 @@ export class Event extends Base {
 
 		this.databaseService = databaseService;
 		this.id = event_id;
+
+		if (this.id !== 'create') this.load();
 	}
 
 	/**

src/routes/+layout.svelte

@@ -5,7 +5,6 @@
 	import { goto, invalidate } from '$app/navigation';
 	import { ModeWatcher } from 'mode-watcher';
 	import { onMount } from 'svelte';
-	import type { LayoutData } from './$types';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import type { SvelteToastOptions } from '@zerodevx/svelte-toast/stores';
 	import { dev } from '$app/environment';
@@ -14,12 +13,13 @@
 
 	inject({ mode: dev ? 'development' : 'production' });
 
-	export let data: LayoutData;
-	$: ({ session, supabase } = data);
+	let { data, authChange } = $props();
+	let { session, supabase } = data;
 
-	let authChange = false;
 	onMount(() => {
-		const { data } = supabase.auth.onAuthStateChange((_, newSession) => {
+		const { data } = supabase.auth.onAuthStateChange((_: any, newSession: { expires_at: any }) => {
+			authChange = !authChange;
+
 			if (!newSession) {
 				/**
 				 * Queue this as a task so the navigation won't prevent the
@@ -51,7 +51,8 @@
 
 <div class="dark:bg-gray-900 dark:text-gray-100 text-gray-900 bg-white">
 	<ModeWatcher defaultMode={'light'} />
-	<Header {data} {authChange} />
+
+	<Header {supabase} bind:authChange />
 
 	<div class="min-h-screen">
 		<div class="wrap">
@@ -60,5 +61,5 @@
 		<slot {data} />
 	</div>
 
-	<Footer {data} />
+	<Footer />
 </div>

src/routes/protected-routes/events/[slug]/+page.svelte

@@ -14,7 +14,7 @@
 	import { Modal } from 'flowbite-svelte';
 	import { initiateEvent } from '$lib/helper';
 
-	export let data: PageData;
+	let { data } = $props();
 	let { supabase, event_id, form } = data;
 
 	let { tournament, matches, teams, bracket } = initiateEvent(event_id, supabase);
@@ -41,7 +41,10 @@
 		}
 	}
 
-	$: $page.state.eventCreated, reloadEventInstances();
+	$effect(() => {
+		$page.state.eventCreated;
+		reloadEventInstances();
+	});
 
 	const loadingInitialDataPromise = loadInitialData(tournament, matches, teams, bracket);