web: migrate user settings to SPA

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/Tabs.ts

@@ -29,6 +29,25 @@ export class Tabs extends LitElement {
         `];
     }
 
+    observer: MutationObserver;
+
+    constructor() {
+        super();
+        this.observer = new MutationObserver(() => {
+            this.requestUpdate();
+        });
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.observer.observe(this, { attributes: true, childList: true, subtree: true });
+    }
+
+    disconnectedCallback(): void {
+        this.observer.disconnect();
+        super.disconnectedCallback();
+    }
+
     renderTab(page: Element): TemplateResult {
         const slot = page.attributes.getNamedItem("slot")?.value;
         return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">

web/src/elements/sidebar/SidebarUser.ts

@@ -34,7 +34,7 @@ export class SidebarUser extends LitElement {
 
     render(): TemplateResult {
         return html`
-            <a href="#/-/user/" class="pf-c-nav__link user-avatar" id="user-settings">
+            <a href="#/user" class="pf-c-nav__link user-avatar" id="user-settings">
                 ${until(me().then((u) => {
                     return html`<img class="pf-c-avatar" src="${ifDefined(u.avatar)}" alt="" />`;
                 }), html``)}