chore: upgrade to svelte 5 and make basic layout

packages/web/src/routes/+layout.svelte

@@ -1,12 +1,27 @@
 <script lang="ts">
 	import '../app.css';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
-<nav class="flex justify-around">
-	<div><a href="/">Stan Runge</a></div>
-	<div>
-		<a href="/progress">Progress</a>
+<nav class="flex justify-between bg-gray-200">
+	<div class="m-4"><a href="/" class="font-bold text-2xl">Stan Runge</a></div>
+	<div class="m-4 flex gap-4">
+		<div>
+			<a href="/progress">Progress</a>
+		</div>
+		<div>|</div>
+		<div class="flex gap-2">
+			<a href="https://x.com/stanrunge">X</a>
+			<a href="https://x.com/stanrunge">YouTube</a>
+			<a href="https://x.com/stanrunge">Twitch</a>
+			<a href="https://x.com/stanrunge">Email</a>
+			<a href="https://x.com/stanrunge">BlueSky</a>
+		</div>
 	</div>
 </nav>
 
-<slot />
+{@render children?.()}

packages/web/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let data;
+	let { data } = $props();
 </script>
 
 <h1>Welcome to SvelteKit</h1>

packages/web/src/routes/progress/+page.server.ts

@@ -0,0 +1,5 @@
+export const load = async () => {
+	return {
+		tasks: []
+	}
+}

packages/web/src/routes/progress/+page.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<h1 class="font-bold text-xl text-center m-4">Tasks ({data.tasks.length})</h1>
+<table>
+	<thead>
+		<tr>
+			<th>ID</th>
+			<th>Name</th>
+			<th>Progress</th>
+			<th>Actions</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each data.tasks as task}
+			<tr>
+				<td></td>
+				<td></td>
+				<td></td>
+				<td><button>Delete</button></td>
+			</tr>
+		{/each}</tbody
+	>
+</table>