Replace a href= with button data-bs-target= in user tabs

This prevents the scrolling when clicking the tab, which is desirable,
especially in conjunction with the new ←/→ arrow-navigation.

Adapts the history control accordingly which previously assumed that
tabs were anchors.

web/resources/js/tab-anchor.ts

@@ -3,27 +3,33 @@ import {Tab} from 'bootstrap';
 
 function navigateToAnchorTab() {
     const hash = window.location.hash;
+    if (!hash) return;
 
-    if (hash) {
-        const element: Element | null = document.querySelector(`ul.nav a[href="${hash}"]`);
-        if (element === null) return;
-        new Tab(element).show();
-    }
+    const selector = `ul.nav [href="${hash}"], ul.nav [data-bs-target="${hash}"]`;
+    const element = document.querySelector<HTMLElement>(selector);
+    if (element === null) return;
+    new Tab(element).show();
 }
 
-function updateLocationHash(this: HTMLAnchorElement, ev: MouseEvent){
-    if (this.hash === null) {
-        console.warn('Selected tab does not have an id. Cannot update')
-        return null;
-    }
+function updateLocationHash(this: HTMLElement, _: MouseEvent){
+    if (this instanceof HTMLAnchorElement) {
+        if (this.hash === null) {
+         // console.warn('Selected tab does not have an id. Cannot update')
+            return null;
+        }
 
-    window.location.hash = this.hash;
+        window.location.hash = this.hash;
+    } else {
+        const bsTarget = this.dataset.bsTarget || null;
+        if (bsTarget === null) return;
+        window.location.href = bsTarget;
+    }
 }
 
 document.addEventListener('DOMContentLoaded', () => {
     navigateToAnchorTab();
 
-    for (const el of document.querySelectorAll<HTMLAnchorElement>('.nav-tabs a')) {
+    for (const el of document.querySelectorAll<HTMLElement>('.nav-tabs [role="tab"]')) {
         // `new Tab(element)` already implicitly happens due to the respective
         // `data-` attributes being present
         el.addEventListener('click', updateLocationHash, false)

web/templates/user/user_show.html

@@ -24,11 +24,11 @@
       <ul class="nav nav-tabs">
         {% for tab in tabs %}
           <li class="nav-item">
-            <a class="nav-link user-nav-link {{ "active" if tab.id == 'hosts' else "" }}
+            <button class="nav-link user-nav-link {{ "active" if tab.id == 'hosts' else "" }}
                {{ "disabled" if 'disabled' in tab and tab.disabled else "" }}"
                {{ 'aria-current="page"' if tab.id == 'hosts' else "" }}
                {{ 'aria-disabled="true"' if 'disabled' in tab and tab.disabled else "" }}
-               id="tab-{{ tab.id }}" href="#{{ tab.id }}"
+               id="tab-{{ tab.id }}" data-bs-target="#{{ tab.id }}"
                data-bs-toggle="tab" data-bs-target="#{{ tab.id }}">
               {% if tab.icon %}<i class="fas {{ tab.icon }}"></i> {% endif -%}
               {{ tab.name }}