problem: layout and menu structure are repetative

src/components/Heading.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let title: string;
+</script>
+
+<div class="mb-4 flex items-center">
+	<h1 class="scroll-m-20 text-xl font-semibold tracking-tight md:text-3xl">
+		{title}
+	</h1>
+</div>

src/components/Menu.svelte

@@ -8,6 +8,7 @@
     let iconClass = "h-5 w-5 md:h-4 md:w-4"
 
     let getClass = (menuItem:string) => {
+		//todo: make this re-run any time our path changes
         if ($page.url.pathname.includes(menuItem)) {
             return "flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
         } else {

src/layouts/SidePanelLayout.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-    import Bell from "lucide-svelte/icons/bell";
-    import CircleUser from "lucide-svelte/icons/circle-user";
-    import Menu from "lucide-svelte/icons/menu";
-    import Search from "lucide-svelte/icons/search";
+	import Bell from 'lucide-svelte/icons/bell';
+	import CircleUser from 'lucide-svelte/icons/circle-user';
+	import Menu from 'lucide-svelte/icons/menu';
+	import Search from 'lucide-svelte/icons/search';
 
-    import { Button } from "$lib/components/ui/button/index.js";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-    import { Input } from "$lib/components/ui/input/index.js";
-    import * as Sheet from "$lib/components/ui/sheet/index.js";
-    import { Rocket } from "lucide-svelte";
-    import NewMenu from "../components/Menu.svelte";
-    import RocketPillCard from "../components/RocketPillCard.svelte";
-	import { base } from "$app/paths";
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import * as Sheet from '$lib/components/ui/sheet/index.js';
+	import { Rocket } from 'lucide-svelte';
+	import NewMenu from '../components/Menu.svelte';
+	import RocketPillCard from '../components/RocketPillCard.svelte';
+	import { base } from '$app/paths';
 
-    export let title = ""
-  
+	export let title = '';
+</script>
 
-  
+<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
 	<div class="hidden border-r bg-muted/40 md:block">
 		<div class="flex h-full max-h-screen flex-col gap-2">
 			<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
@@ -43,12 +43,7 @@
 		<header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
-          <Sheet.Trigger asChild let:builder>
-            <Button
-              variant="outline"
-              size="icon"
-              class="shrink-0 md:hidden"
-              builders={[builder]}
+					<Button variant="outline" size="icon" class="shrink-0 md:hidden" builders={[builder]}>
 						<Menu class="h-5 w-5" />
 						<span class="sr-only">Toggle navigation menu</span>
 					</Button>
@@ -60,7 +55,6 @@
 							<span>Nostrocket LFG</span>
 						</a>
 						<NewMenu />
-              <NewMenu />
 					</nav>
 					<div class="mt-auto">
 						<RocketPillCard />
@@ -68,9 +62,16 @@
 				</Sheet.Content>
 			</Sheet.Root>
 
-
-          <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
-            <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">Alert</span>
+			<div
+				class="flex items-center bg-indigo-800 p-2 leading-none text-indigo-100 lg:inline-flex lg:rounded-full"
+				role="alert"
+			>
+				<span class="mr-3 flex rounded-full bg-indigo-500 px-2 py-1 text-xs font-bold uppercase"
+					>Alert</span
+				>
+				<span class="mr-2 flex-auto text-left font-semibold"
+					>Nostrocket is sooooo not ready yet, don't expect everything to work</span
+				>
 			</div>
 
 			<div class="w-full flex-1">
@@ -87,12 +88,7 @@
 			</div>
 			<DropdownMenu.Root>
 				<DropdownMenu.Trigger asChild let:builder>
-          <DropdownMenu.Trigger asChild let:builder>
-            <Button
-              builders={[builder]}
-              variant="secondary"
-              size="icon"
-              class="rounded-full"
+					<Button builders={[builder]} variant="secondary" size="icon" class="rounded-full">
 						<CircleUser class="h-5 w-5" />
 						<span class="sr-only">Toggle user menu</span>
 					</Button>
@@ -108,11 +104,7 @@
 			</DropdownMenu.Root>
 		</header>
 		<main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-      <main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-        <div class="flex items-center">
-          <h1 class="text-lg font-semibold md:text-2xl">{title}</h1>
 			<slot name="content"></slot>
 		</main>
 	</div>
-    </div>
-  </div>
+</div>

src/routes/+layout.svelte

@@ -2,8 +2,10 @@
 	import { RocketSolid } from 'svelte-awesome-icons';
 	import '../app.css';
 	import { ModeWatcher } from 'mode-watcher';
+	import SidePanelLayout from '../layouts/SidePanelLayout.svelte';
 </script>
 <ModeWatcher />
-
-<slot></slot>
+<SidePanelLayout>
+	<div slot="content"><slot></slot></div>
+</SidePanelLayout>
 <style></style>

src/routes/+page.svelte

@@ -1,9 +1,6 @@
 <script>
-	import SidePanelLayout from "../layouts/SidePanelLayout.svelte";
 	import N00b from "../views/n00b/N00b.svelte";
 
 
 </script>
-<SidePanelLayout>
-<N00b slot="content" />
-</SidePanelLayout>
+<N00b />

src/routes/rockets/new/+page.svelte

@@ -4,34 +4,29 @@
 	import { RocketState } from '@/types';
 	import { NDKEvent } from '@nostr-dev-kit/ndk';
 	import SidePanelLayout from '../../../layouts/SidePanelLayout.svelte';
+	import Heading from '../../../components/Heading.svelte';
 
-    let rocketName:string;
-    $:err = undefined;
+	let rocketName: string;
+	$: err = undefined;
 
 	function validate() {
-        let e = new NDKEvent()
-        e.dTag = rocketName
+		let e = new NDKEvent();
+		e.dTag = rocketName;
 		try {
-            new RocketState(e)
-        } catch(_err) {
-            console.log(_err)
-            err = _err
-            return 
+			new RocketState(e);
+		} catch (_err) {
+			console.log(_err);
+			err = _err;
+			return;
 		}
-        err = undefined
-        console.log(new RocketState(e))
-        
+		err = undefined;
+		console.log(new RocketState(e));
 	}
-    
 </script>
-
-<SidePanelLayout>
-	<div slot="content">
-        <div class="flex w-full max-w-sm flex-col gap-1.5">
+<Heading title="Create a New Rocket" />
+<div class="flex w-full max-w-sm flex-col gap-1.5">
 	<Input type="email" id="email-2" placeholder="Name" bind:value={rocketName} />
 	<p class="text-sm text-muted-foreground">Enter the name of your new Rocket</p>
 	<Button on:click={validate} type="submit">Publish</Button>
-            <div>{err?err:""}</div>
-          </div>
-	</div>
-</SidePanelLayout>
+	<div>{err ? err : ''}</div>
+</div>

src/routes/test/+page.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
       
     import EmptyList from "../../components/EmptyList.svelte";
-import SidePanelLayout from "../../layouts/SidePanelLayout.svelte";
   
-</script>
-  <SidePanelLayout title={"Inventory"}>
-    <div slot="content"><EmptyList /></div>
+</script>

src/views/rockets/Rockets.svelte

@@ -1,16 +1,12 @@
 <script>
-	
+	import Heading from '../../components/Heading.svelte';
 	import SidePanelLayout from '../../layouts/SidePanelLayout.svelte';
 </script>
 
-<SidePanelLayout>
-	<div slot="content">
-		<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-			Rockets
-		</h1>
-		<div
+<Heading title="Rockets" />
+<div
 	class="max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800"
-		>
+>
 	<a href="#">
 		<img
 			class="rounded-t-lg"
@@ -50,6 +46,4 @@
 			</svg>
 		</a>
 	</div>
-		</div>
-	</div>
-</SidePanelLayout>
+</div>