chore: upgrade to svelte 5 and make basic layout

packages/web/package.json

@@ -19,24 +19,24 @@
   },
   "devDependencies": {
     "@playwright/test": "1.47.0",
-    "@sveltejs/kit": "2.5.26",
+    "@sveltejs/kit": "^2.5.27",
-    "@sveltejs/vite-plugin-svelte": "3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/eslint": "9.6.1",
     "autoprefixer": "^10.4.20",
     "drizzle-kit": "^0.24.2",
     "eslint": "9.10.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-svelte": "2.43.0",
+    "eslint-plugin-svelte": "^2.45.1",
     "globals": "15.9.0",
     "postcss": "^8.4.49",
     "prettier": "3.3.3",
     "prettier-plugin-svelte": "3.2.6",
-    "svelte": "4.2.19",
+    "svelte": "^5.0.0",
     "svelte-check": "4.0.1",
     "tailwindcss": "^3.4.17",
     "typescript": "5.5.4",
     "typescript-eslint": "8.4.0",
-    "vite": "5.4.3",
+    "vite": "^5.4.4",
     "vitest": "2.0.5"
   },
   "type": "module",

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">
+<nav class="flex justify-between bg-gray-200">
-	<div><a href="/">Stan Runge</a></div>
+	<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>