From 9b8c079d79a0db781737adc3315c7c26783b09fe Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Sat, 21 Mar 2026 20:58:44 +0000
Subject: [PATCH] Start sorting out basic layout elements

---
 html/template/sync/authenticated.html   |  2 +-
 ts/App.vue                              | 20 +++++++++++++++++
 ts/Home.vue                             | 10 +++++++++
 ts/app.vue                              | 24 --------------------
 ts/components/common/NavigationLink.vue | 30 +++++++++++++++++++++++++
 ts/components/layout/MainContent.vue    | 18 +++++++++++++++
 ts/components/layout/Sidebar.vue        | 29 ++++++++++++++++++++++++
 ts/global.d.ts                          |  1 -
 ts/main.ts                              | 27 +---------------------
 9 files changed, 109 insertions(+), 52 deletions(-)
 create mode 100644 ts/App.vue
 create mode 100644 ts/Home.vue
 delete mode 100644 ts/app.vue
 create mode 100644 ts/components/common/NavigationLink.vue
 create mode 100644 ts/components/layout/MainContent.vue
 create mode 100644 ts/components/layout/Sidebar.vue

diff --git a/html/template/sync/authenticated.html b/html/template/sync/authenticated.html
index 0e5045c3..eb44da9f 100644
--- a/html/template/sync/authenticated.html
+++ b/html/template/sync/authenticated.html
@@ -15,6 +15,6 @@
 		{{ if not .Config.IsProductionEnvironment }}
 			<div id="flogo"></div>
 		{{ end }}
-		<script src="{{ bundlePathJS }}"></script>
+		<script src="{{ bundlePathJS }}" type="module"></script>
 	</body>
 </html>
diff --git a/ts/App.vue b/ts/App.vue
new file mode 100644
index 00000000..a93cead3
--- /dev/null
+++ b/ts/App.vue
@@ -0,0 +1,20 @@
+<template>
+	<div class="app-container">
+		<Sidebar />
+		<MainContent>
+			<router-view />
+		</MainContent>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Sidebar from "./components/layout/Sidebar.vue";
+import MainContent from "./components/layout/MainContent.vue";
+</script>
+
+<style scoped>
+.app-container {
+	display: flex;
+	height: 100vh;
+}
+</style>
diff --git a/ts/Home.vue b/ts/Home.vue
new file mode 100644
index 00000000..74903fe9
--- /dev/null
+++ b/ts/Home.vue
@@ -0,0 +1,10 @@
+<template>
+	<div>
+		<h1>Welcome Home</h1>
+		<p>This is the home page content.</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+// Component logic here
+</script>
diff --git a/ts/app.vue b/ts/app.vue
deleted file mode 100644
index 9bf2ba2c..00000000
--- a/ts/app.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import MapView from "./components/map-view.vue";
-
-const count = ref(0);
-const message = ref("Hello from Vue 3!");
-</script>
-
-<template>
-	<div>
-		<p>{{ message }}</p>
-		<button @click="count++">Count: {{ count }}</button>
-
-		<h2>Map Example:</h2>
-		<MapView />
-	</div>
-</template>
-
-<style scoped>
-button {
-	padding: 0.5rem 1rem;
-	font-size: 1rem;
-}
-</style>
diff --git a/ts/components/common/NavigationLink.vue b/ts/components/common/NavigationLink.vue
new file mode 100644
index 00000000..26c23069
--- /dev/null
+++ b/ts/components/common/NavigationLink.vue
@@ -0,0 +1,30 @@
+<template>
+	<router-link :to="to" class="nav-link">
+		{{ label }}
+	</router-link>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	to: string;
+	label: string;
+}>();
+</script>
+
+<style scoped>
+.nav-link {
+	color: #ecf0f1;
+	text-decoration: none;
+	padding: 10px;
+	border-radius: 4px;
+	transition: background-color 0.2s;
+}
+
+.nav-link:hover {
+	background-color: #34495e;
+}
+
+.nav-link.router-link-active {
+	background-color: #3498db;
+}
+</style>
diff --git a/ts/components/layout/MainContent.vue b/ts/components/layout/MainContent.vue
new file mode 100644
index 00000000..2a4a8ad2
--- /dev/null
+++ b/ts/components/layout/MainContent.vue
@@ -0,0 +1,18 @@
+<template>
+	<main class="main-content">
+		<slot />
+	</main>
+</template>
+
+<script setup lang="ts">
+// No imports needed for this simple component
+</script>
+
+<style scoped>
+.main-content {
+	flex: 1;
+	padding: 40px;
+	overflow-y: auto;
+	background-color: #f5f5f5;
+}
+</style>
diff --git a/ts/components/layout/Sidebar.vue b/ts/components/layout/Sidebar.vue
new file mode 100644
index 00000000..ec627e7d
--- /dev/null
+++ b/ts/components/layout/Sidebar.vue
@@ -0,0 +1,29 @@
+<template>
+	<aside class="sidebar">
+		<h2>My App</h2>
+		<nav>
+			<NavigationLink to="/" label="Home" />
+			<NavigationLink to="/about" label="About" />
+		</nav>
+	</aside>
+</template>
+
+<script setup lang="ts">
+import NavigationLink from "../common/NavigationLink.vue";
+</script>
+
+<style scoped>
+.sidebar {
+	width: 250px;
+	background-color: #2c3e50;
+	color: white;
+	padding: 20px;
+}
+
+nav {
+	margin-top: 30px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+</style>
diff --git a/ts/global.d.ts b/ts/global.d.ts
index 0a2fbbe9..8b8f3ee3 100644
--- a/ts/global.d.ts
+++ b/ts/global.d.ts
@@ -4,7 +4,6 @@ declare global {
 	interface Window {
 		Alpine: any;
 		SSEManager: any;
-		createAppPlanning: any;
 		bootstrap: typeof bootstrap;
 	}
 }
diff --git a/ts/main.ts b/ts/main.ts
index 0f013d35..65630938 100644
--- a/ts/main.ts
+++ b/ts/main.ts
@@ -1,6 +1,6 @@
 import Alpine from "./vendor/alpinejs-3.15.8.js";
 import { createApp } from "vue";
-import App from "./app.vue";
+import App from "./App.vue";
 import { SSEManager } from "./sse-manager";
 //import { SetupSidebar } from "./sidebar";
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -14,25 +14,12 @@ import "./style/style.scss";
 import * as bootstrap from "bootstrap";
 window.bootstrap = bootstrap;
 
-import { Planning } from "./app/planning";
-
 // Make Alpine available on window for inline Alpine
 window.Alpine = Alpine;
 
 // Make SSEManager available to all the JavaScript
 window.SSEManager = SSEManager;
 
-function createAppPlanning() {
-	const app = createApp({
-		data() {
-			return {
-				count: 0,
-			};
-		},
-	});
-}
-window.createAppPlanning = createAppPlanning;
-
 // Wait for DOM to be ready, then initialize Alpine
 document.addEventListener("DOMContentLoaded", () => {
 	Alpine.start();
@@ -63,16 +50,4 @@ interface GreetingComponent {
 	updateMessage(): void;
 }
 
-Alpine.data(
-	"greeting",
-	(): GreetingComponent => ({
-		message: "Welcome to Alpine + TypeScript!",
-		name: "World",
-
-		updateMessage() {
-			this.message = "Message updated at " + new Date().toLocaleTimeString();
-		},
-	}),
-);
-
 createApp(App).mount("#app");