From 447f57ac6342b15eee3420c4502352761505c8dc Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Sun, 24 May 2026 23:15:46 +0100
Subject: [PATCH] fix(webui): use absolute URLs for topbar partial + nav under
 path routing

Path-based routes (e.g. /app/<name>) made the relative fetch('html/topbar.html')
resolve to /app/html/topbar.html. The SPA catch-all returns index.html with HTTP
200 instead of 404, so response.ok passed and index.html got injected as the
topbar, leaving #nav-app-center absent -> 'Nav element not found' in setActiveNav.

Make the topbar fetch and the loadConfig fetch absolute, and switch the remaining
relative topbar nav hrefs (index/dashboard/tasks .html) to absolute paths so the
SPA click interceptor routes them instead of doing a real browser navigation.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 containers/libreportal/frontend/html/topbar.html        | 6 +++---
 containers/libreportal/frontend/js/components/topbar.js | 2 +-
 containers/libreportal/frontend/js/utils/data-loader.js | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/containers/libreportal/frontend/html/topbar.html b/containers/libreportal/frontend/html/topbar.html
index 366abf0..396ad1a 100755
--- a/containers/libreportal/frontend/html/topbar.html
+++ b/containers/libreportal/frontend/html/topbar.html
@@ -14,7 +14,7 @@
   </div>
   <div class="mobile-drawer" id="mobile-drawer">
     <nav class="topbar-nav">
-      <a href="dashboard.html" class="nav-item" id="nav-dashboard">
+      <a href="/dashboard" class="nav-item" id="nav-dashboard">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
           <line x1="9" y1="9" x2="15" y2="9"></line>
@@ -22,7 +22,7 @@
         </svg>
         Dashboard
       </a>
-      <a href="index.html" class="nav-item" id="nav-app-center">
+      <a href="/apps" class="nav-item" id="nav-app-center">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <rect x="3" y="3" width="7" height="7"></rect>
           <rect x="14" y="3" width="7" height="7"></rect>
@@ -37,7 +37,7 @@
         </svg>
         Admin
       </a>
-      <a href="tasks.html" class="nav-item" id="nav-tasks">
+      <a href="/tasks" class="nav-item" id="nav-tasks">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M9 11H3v2h6v-2zm0-4H3v2h6V7zm0 8H3v2h6v-2zm12-8h-6v2h6V7zm0 4h-6v2h6v-2zm0 4h-6v2h6v-2z"></path>
         </svg>
diff --git a/containers/libreportal/frontend/js/components/topbar.js b/containers/libreportal/frontend/js/components/topbar.js
index 0f3dbd8..ee7d16c 100755
--- a/containers/libreportal/frontend/js/components/topbar.js
+++ b/containers/libreportal/frontend/js/components/topbar.js
@@ -47,7 +47,7 @@ class TopbarComponent {
     // Load fresh topbar HTML
     try {
       //// // console.log('Loading topbar HTML (SPA mode)');
-      const response = await fetch('html/topbar.html');
+      const response = await fetch('/html/topbar.html');
       if (!response.ok) {
         throw new Error(`Failed to load topbar: ${response.status}`);
       }
diff --git a/containers/libreportal/frontend/js/utils/data-loader.js b/containers/libreportal/frontend/js/utils/data-loader.js
index 455a749..0e7b54b 100755
--- a/containers/libreportal/frontend/js/utils/data-loader.js
+++ b/containers/libreportal/frontend/js/utils/data-loader.js
@@ -99,7 +99,7 @@ class DataLoader {
     try {
       //console.log(`Loading ${configType} config`);
       
-      const response = await fetch(`data/config/generated/config_${configType}.json`);
+      const response = await fetch(`/data/config/generated/config_${configType}.json`);
       if (!response.ok) {
         throw new Error(`Failed to load ${configType} config: ${response.status}`);
       }