Basic crud works kind of

src/routes/+layout.svelte

@@ -0,0 +1,8 @@
+<script>
+	import '../app.css';
+	import Navbar from '$lib/components/Navbar.svelte';
+	let { children } = $props();
+</script>
+
+<Navbar />
+{@render children()}

src/routes/+page.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { onMount } from 'svelte';
+	import { db, boards } from '$lib/db';
+	import { getBoards } from '$lib/ndk';
+	import AddBoardModal from '$lib/components/AddBoardModal.svelte';
+	import BoardCard from '$lib/components/BoardCard.svelte';
+
+	let addBoardModal;
+
+	function openModal() {
+		addBoardModal.showModal();
+	}
+
+	onMount(async () => {
+		await getBoards();
+	});
+</script>
+
+<button onclick={openModal}>Add Board</button>
+<AddBoardModal bind:modalRef={addBoardModal} />
+
+<h1>Boards</h1>
+{#if $boards.length > 0}
+	<div class="flex flex-wrap gap-2">
+		{#each $boards as board (board.id)}
+			<BoardCard {board} />
+		{/each}
+	</div>
+{/if}

src/routes/board/[id]/+page.js

@@ -0,0 +1,5 @@
+export async function load({ params }) {
+	return {
+		id: params.id
+	};
+}

src/routes/board/[id]/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Board from '$lib/components/Board.svelte';
+	import { currentBoardId } from '$lib/db.js';
+	export let data;
+
+	console.log('data.id', data.id);
+	$currentBoardId = data.id;
+</script>
+
+<Board boardId={data.id} />