oops

js/app.js

@@ -0,0 +1,43 @@
+// ── Router ────────────────────────────────────────────────────────────────────
+
+function navigate(page, vmid) {
+  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+
+  if (page === 'dashboard') {
+    document.getElementById('page-dashboard').classList.add('active');
+    history.pushState({ page: 'dashboard' }, '', '/');
+    renderDashboard();
+  } else if (page === 'instance') {
+    document.getElementById('page-detail').classList.add('active');
+    history.pushState({ page: 'instance', vmid }, '', `/instance/${vmid}`);
+    renderDetailPage(vmid);
+  }
+}
+
+function handleRoute() {
+  const m = window.location.pathname.match(/^\/instance\/(\d+)/);
+  if (m) {
+    document.getElementById('page-detail').classList.add('active');
+    renderDetailPage(parseInt(m[1], 10));
+  } else {
+    document.getElementById('page-dashboard').classList.add('active');
+  }
+}
+
+window.addEventListener('popstate', e => {
+  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+  if (e.state?.page === 'instance') {
+    document.getElementById('page-detail').classList.add('active');
+    renderDetailPage(e.state.vmid);
+  } else {
+    document.getElementById('page-dashboard').classList.add('active');
+    renderDashboard();
+  }
+});
+
+// ── Bootstrap ─────────────────────────────────────────────────────────────────
+
+initDB().then(() => {
+  renderDashboard();
+  handleRoute();
+});