Consolidate routes and panes

src/lib/PaneManager.ts

@@ -11,7 +11,7 @@ interface PaneStore extends Writable<PaneType[]> {
 // Create the store with an empty array
 const { subscribe, update }: PaneStore = writable<PaneType[]>([]) as PaneStore;
 
-let maxZIndex = 5; // Keep track of the highest z-index
+let maxZIndex = 1; // Keep track of the highest z-index
 
 // Function to update a pane
 const updatePane = (id: string, x: number, y: number) => {

src/routes/+layout.svelte

@@ -1,8 +1,70 @@
-<script>
+<script lang="ts">
 	import '../app.css';
+	import { get, writable } from 'svelte/store';
+	import { onMount } from 'svelte';
+	import { session } from '../stores';
+	import Footer from '../components/Footer.svelte';
 	import Header from '../components/Header.svelte';
 	import NavBar from '../components/NavBar.svelte';
-	import Footer from '../components/Footer.svelte';
+	import PaneAbout from './about/+page.svelte';
+	import PaneBlog from './blog/+page.svelte';
+	import PaneHome from './+page.svelte';
+	import paneManager from '../lib/PaneManager';
+	import PaneSignupNews from './newsletter/+page.svelte';
+	import type { PaneType } from '../lib/types';
+	import type { SessionData } from '../stores';
+
+	let sessionData: SessionData = {};
+
+	const INITIAL_PANES: PaneType[] = [
+		{
+			id: 'signup-news',
+			obj: writable({
+				x: 500,
+				y: 200,
+				zIndex: 1
+			})
+		},
+		{
+			id: 'blog',
+			obj: writable({
+				x: 150,
+				y: 100,
+				zIndex: 1
+			})
+		},
+	];
+
+	let panes = writable<PaneType[]>(INITIAL_PANES);
+
+	onMount(() => {
+		const unsubscribe = session.subscribe((value: any) => {
+			sessionData = value;
+		});
+
+		if (sessionData.openAboutInPane) {
+			paneManager.createPane('about', 100, 100, 1);
+		}
+
+		INITIAL_PANES.forEach((pane) => {
+			paneManager.createPane(pane.id, get(pane.obj).x, get(pane.obj).y, get(pane.obj).zIndex);
+		});
+
+		const unsubscribePane = paneManager.subscribe((value) => {
+			panes.set(value);
+		});
+
+		return () => {
+			unsubscribe();
+			unsubscribePane();
+		};
+	});
+
+	const COMPONENTS = new Map<string, typeof PaneHome | typeof PaneSignupNews | typeof PaneBlog | typeof PaneAbout>();
+	COMPONENTS.set('home', PaneHome);
+	COMPONENTS.set('signup-news', PaneSignupNews);
+	COMPONENTS.set('blog', PaneBlog);
+	COMPONENTS.set('about', PaneAbout);
 </script>
 
 <div class="app flex h-full flex-col bg-gray-200">
@@ -17,4 +79,16 @@
 	</div>
 
 	<Footer />
+
+	{#each $panes as pane (pane.id)}
+		<svelte:component
+			this={COMPONENTS.get(pane.id)}
+			{...get(pane.obj)}
+			id={pane.id}
+			onBringToFront={() => {
+				console.log('Bringing pane to front:', pane.id);
+				paneManager.updateZIndex(pane.id);
+			}}
+		/>
+	{/each}
 </div>

src/routes/+page.svelte

@@ -1,66 +1,23 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { get, writable } from 'svelte/store';
-	import PaneSignupNews from './sections/PaneSignupNews.svelte';
-	import PaneBlog from './sections/PaneBlog.svelte';
-	import paneManager from '../lib/PaneManager';
-	import type { PaneType } from '../lib/types';
+	import Pane from '../components/Pane/Pane.svelte';
 
-	const INITIAL_PANES: PaneType[] = [
-		{
-			id: 'signup-news',
-			obj: writable({
-				x: 500,
-				y: 200,
-				zIndex: 1
-			})
-		},
-		{
-			id: 'blog',
-			obj: writable({
-				x: 150,
-				y: 100,
-				zIndex: 1
-			})
-		}
-	];
+	export let x: number = 100;
+  export let y: number = 150;
+  export let zIndex: number = 2;
+	export let id: string = 'home';
 
-	let panes = writable<PaneType[]>(INITIAL_PANES);
-
-	onMount(() => {
-		INITIAL_PANES.forEach((pane) => {
-			paneManager.createPane(pane.id, get(pane.obj).x, get(pane.obj).y, get(pane.obj).zIndex);
-		});
-
-		const unsubscribe = paneManager.subscribe((value) => {
-			panes.set(value);
-		});
-
-		return () => {
-			unsubscribe();
-		};
-	});
-
-	const COMPONENTS = new Map<string, typeof PaneSignupNews | typeof PaneBlog>();
-	COMPONENTS.set('signup-news', PaneSignupNews);
-	COMPONENTS.set('blog', PaneBlog);
+	export let onBringToFront = () => {};
 </script>
 
 <svelte:head>
 	<title>Russell Jones | Home</title>
 	<meta name="description" content="Russell Jones" />
 </svelte:head>
 
-<div>
-	{#each $panes as pane (pane.id)}
-		<svelte:component
-			this={COMPONENTS.get(pane.id)}
-			{...get(pane.obj)}
-			id={pane.id}
-			onBringToFront={() => {
-				console.log('Bringing pane to front:', pane.id);
-				paneManager.updateZIndex(pane.id);
-			}}
-		/>
-	{/each}
-</div>
+<Pane title="Home" {id} {x} {y} {zIndex} {onBringToFront}>
+	<div class="text-column">
+		<h1>Home of dev.</h1>
+
+		<p>Dev home.</p>
+	</div>	
+</Pane>

src/routes/about/+page.svelte

@@ -1,25 +1,25 @@
-<script>
-	import { base } from '$app/paths';
+<script lang="ts">
+	import Pane from '../../components/Pane/Pane.svelte';
+
+	export let x: number = 100;
+  export let y: number = 150;
+  export let zIndex: number = 2;
+	export let id: string = 'about';
+
+	export let onBringToFront = () => {};
 </script>
 
 <svelte:head>
 	<title>About</title>
-	<meta name="description" content="About this app" />
+	<meta name="description" content="About Russell" />
 </svelte:head>
 
-<div class="text-column">
-	<h1>About this app</h1>
-
-	<p>
-		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
-		following into your command line and following the prompts:
-	</p>
-
-	<pre>npm create svelte@latest</pre>
-
-	<p>
-		The page you're looking at is purely static HTML, with no client-side interactivity needed.
-		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
-		the devtools network panel and reloading.
-	</p>
-</div>
+<Pane title="About" {id} {x} {y} {zIndex} {onBringToFront}>
+	<div class="text-column">
+		<h1>About Russell</h1>
+
+		<p>
+			Me dev.
+		</p>
+	</div>
+</Pane>

src/routes/sections/PaneSignupNews.svelte → src/routes/newsletter/+page.svelte

@@ -17,6 +17,11 @@
 	export let onBringToFront = () => {};
 </script>
 
+<svelte:head>
+	<title>Newsletter</title>
+	<meta name="description" content="Newsletter" />
+</svelte:head>
+
 <Pane title="Newsletter" {id} {x} {y} {zIndex} {onBringToFront}>
 	<form on:submit|preventDefault={handleSubmit} class="space-y-4">
 		<div>

src/stores.ts

@@ -0,0 +1,14 @@
+// src/stores.ts
+import { writable } from 'svelte/store';
+
+export interface SessionData {
+  openAboutInPane?: boolean;
+  // other session properties here
+}
+
+const initialSession: SessionData = {
+  openAboutInPane: false,
+  // other session properties here
+};
+
+export const session = writable<SessionData>(initialSession);