Refactor layout component to use props for children and update event handling for improved readability and functionality.

src/routes/+layout.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import '../app.css';
 	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
 
-	let showUpdateAvailable = false;
+	let { children }: { children: Snippet } = $props();
+	let showUpdateAvailable = $state(false);
 	let registration: ServiceWorkerRegistration | null = null;
 
 	function checkForUpdates() {
 		if (registration && navigator.onLine) {
-			registration.update().catch(() => {
-			});
+			registration.update().catch(() => {});
 		}
 	}
 
@@ -76,13 +77,13 @@
 				<p class="text-xs text-neutral-400 mt-1">A new version is available. Reload to update.</p>
 			</div>
 			<button
-				on:click={reloadApp}
+				onclick={reloadApp}
 				class="px-4 py-2 bg-accent-red text-white rounded-md text-sm font-medium hover:bg-accent-red-dark transition-colors"
 			>
 				Reload
 			</button>
 			<button
-				on:click={() => (showUpdateAvailable = false)}
+				onclick={() => (showUpdateAvailable = false)}
 				class="text-neutral-400 hover:text-white transition-colors"
 				aria-label="Dismiss"
 			>
@@ -105,4 +106,4 @@
 	</div>
 {/if}
 
-<slot />
+{@render children()}