client: Add initial on load UI logic.

It's still missing static/js/tabledefs/index.mjs though

src/static/app.mjs

@@ -3,6 +3,7 @@
 import SystemQueryClient from './js/SystemQueryClient.mjs';
 import make_router from './js/routes_client.mjs';
 
+import GlobalUI from './js/ui/GlobalUI.mjs';
 import TableView from './js/ui/TableView.mjs';
 
 window.addEventListener("load", async (_event) => {
@@ -12,16 +13,11 @@ window.addEventListener("load", async (_event) => {
 	globalThis.sysquery = new SystemQueryClient();
 	globalThis.sysquery_router = make_router();
 	globalThis.sysui = {
-		tableview: new TableView(el_table)
+		ui: new GlobalUI(),
+		tableview: new TableView(el_table),
 	}
 	
-	
+	await ui.init();
-	
-	const status = await globalThis.sysquery.status();
-	
-	el_version.replaceChildren(
-		document.createTextNode(status.version)
-	);
 	
 	
 	globalThis.sysquery_router.navigate_current_hash();

src/static/index.html

@@ -13,7 +13,8 @@
 		<nav>
 			<ul class="nav-items">
 				
-				<li><a href="#settings">
+				<!-- Any items specified here *must* have the "static" class, otherwise they'll be mistaken for  a rogue dynamic item and stripped -->
+				<li class="static"><a href="#settings">
 					<span class="fa fa-cog fa-fw" aria-hidden="true"></span>
 					Settings
 				</a></li>

src/static/js/SystemQueryClient.mjs

@@ -41,7 +41,6 @@ class SystemQueryClient {
 		console.log(`FETCH ${path} ${response.status} ${response.statusText}`);
 		return await response.json();
 	}
-	// TODO: Implement fetch-based client API for the UI logic to use here
 }
 
 export default SystemQueryClient;

src/static/js/ui/GlobalUI.mjs

@@ -0,0 +1,43 @@
+"use strict";
+
+import Emel from 'emel';
+
+import forkawesome_emel from './forkawesome_emel.mjs';
+
+import tabledefs from  './tabledefs/index.mjs';
+
+class GlobalUI {
+	constructor() {
+		this.emel = new Emel().emel;
+	}
+	
+	async init() {
+		const status = await globalThis.sysquery.status();
+		
+		// 1: Update version display
+		el_version.replaceChildren(
+			document.createTextNode(status.version)
+		);
+		
+		// 2: Update navigation bar
+		const el_navitems = document.querySelector(".nav-items"); // <ul>
+		
+		// Strip all non-static navigation items
+		for(let item of el_navitems.children) {
+			if(item.classList.contains("static")) continue;
+			el_navitems.removeChild(item);
+		}
+		
+		// Generate new dynamic navigation items
+		const result = document.createDocumentFragment();
+		for(const table_name of status.tables) {
+			result.append(...this.emel(`li>a[href=#table/?]>${forkawesome_emel(tabledefs[table_name].icon)}+{?}`, {
+				placeholders: [ table_name, table_name ]
+			}));
+		}
+		
+		el_navitems.prepend(result);
+	}
+}
+
+export default GlobalUI;