web UI and web client improvements.

admin_ui/index.html

@@ -57,8 +57,7 @@
       </div>
     </aside>
 
-    <main id="main" class="flex-1 p-6 overflow-x-hidden"
-          hx-get="/admin/pages/users" hx-trigger="load">
+    <main id="main" class="flex-1 p-6 overflow-x-hidden">
       <div class="text-slate-500 text-sm">Loading…</div>
     </main>
   </div>
@@ -67,18 +66,30 @@
   <div id="toast"
        class="fixed bottom-4 right-4 max-w-sm space-y-2 pointer-events-none"></div>
 
-  <!-- Highlight active link based on hash -->
+  <!-- Load fragment + highlight active link based on the URL hash. -->
   <script>
-    function refreshActive() {
+    function linkForHash() {
       const hash = location.hash || '#users';
+      return document.querySelector('.nav-link[hx-push-url="' + hash + '"]')
+          || document.querySelector('.nav-link[hx-push-url="#users"]');
+    }
+    function refreshActive() {
+      const active = linkForHash();
       document.querySelectorAll('.nav-link').forEach(a => {
-        const ahash = a.getAttribute('hx-push-url');
-        a.classList.toggle('active', ahash === hash);
+        a.classList.toggle('active', a === active);
       });
     }
-    window.addEventListener('hashchange', refreshActive);
+    function loadFromHash() {
+      const link = linkForHash();
+      if (link) {
+        htmx.ajax('GET', link.getAttribute('hx-get'),
+                  { target: '#main', swap: 'innerHTML' });
+      }
+      refreshActive();
+    }
+    window.addEventListener('hashchange', loadFromHash);
     document.body.addEventListener('htmx:afterSwap', refreshActive);
-    refreshActive();
+    loadFromHash();
 
     // Bounce to login if any HTMX request comes back 401.
     document.body.addEventListener('htmx:responseError', (evt) => {