From 56b1ab99703abd9af7b1ca9c4c2bc101b3ba34e0 Mon Sep 17 00:00:00 2001
From: Patrick <patrick@perlbach24.de>
Date: Fri, 5 Jun 2026 19:18:47 +0200
Subject: [PATCH] Refactor: Tab-Switching von JavaScript auf HTMX + Jinja2
 umgestellt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shares- und Identities-Seite nutzen jetzt ?tab= Query-Parameter statt
clientseitigem JS. Der Server steuert aktiven Tab via Jinja2, kein
<script>-Block mehr nötig.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 backend/routers/pages.py          | 12 ++++++++----
 backend/templates/identities.html | 18 ++++++------------
 backend/templates/shares.html     | 26 ++++++++++----------------
 3 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/backend/routers/pages.py b/backend/routers/pages.py
index edf8c6d..1387975 100644
--- a/backend/routers/pages.py
+++ b/backend/routers/pages.py
@@ -106,10 +106,12 @@ async def snapshots_page(request: Request, token: str | None = Cookie(default=No
 
 
 @router.get("/shares", response_class=HTMLResponse)
-async def shares_page(request: Request, token: str | None = Cookie(default=None)):
+async def shares_page(request: Request, token: str | None = Cookie(default=None), tab: str = "samba"):
     if not _require_user(token):
         return _redirect_login()
-    return templates.TemplateResponse(request, "shares.html", {"active": "shares"})
+    if tab not in ("samba", "nfs", "config"):
+        tab = "samba"
+    return templates.TemplateResponse(request, "shares.html", {"active": "shares", "tab": tab})
 
 
 @router.get("/navigator", response_class=HTMLResponse)
@@ -120,10 +122,12 @@ async def navigator_page(request: Request, token: str | None = Cookie(default=No
 
 
 @router.get("/identities", response_class=HTMLResponse)
-async def identities_page(request: Request, token: str | None = Cookie(default=None)):
+async def identities_page(request: Request, token: str | None = Cookie(default=None), tab: str = "users"):
     if not _require_user(token):
         return _redirect_login()
-    return templates.TemplateResponse(request, "identities.html", {"active": "identities"})
+    if tab not in ("users", "groups"):
+        tab = "users"
+    return templates.TemplateResponse(request, "identities.html", {"active": "identities", "tab": tab})
 
 
 @router.get("/logs", response_class=HTMLResponse)
diff --git a/backend/templates/identities.html b/backend/templates/identities.html
index f32277f..76fb97c 100644
--- a/backend/templates/identities.html
+++ b/backend/templates/identities.html
@@ -4,12 +4,14 @@
 <h2>Benutzer &amp; Gruppen</h2>
 
 <div style="display:flex;gap:0.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--pico-muted-border-color);padding-bottom:0.5rem">
-  <button onclick="showTab('users')" id="tab-users" class="outline">Benutzer</button>
-  <button onclick="showTab('groups')" id="tab-groups" class="outline secondary">Gruppen</button>
+  <a href="/identities?tab=users" hx-get="/identities?tab=users" hx-target="body" hx-push-url="true"
+     class="outline{% if tab != 'users' %} secondary{% endif %}">Benutzer</a>
+  <a href="/identities?tab=groups" hx-get="/identities?tab=groups" hx-target="body" hx-push-url="true"
+     class="outline{% if tab != 'groups' %} secondary{% endif %}">Gruppen</a>
 </div>
 
 <!-- Users -->
-<div id="panel-users">
+<div id="panel-users"{% if tab != 'users' %} style="display:none"{% endif %}>
   <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
     <h3 style="margin:0">Systembenutzer</h3>
     <button onclick="document.getElementById('new-user-form').style.display='block'">&#43; Neu</button>
@@ -35,18 +37,10 @@
 </div>
 
 <!-- Groups -->
-<div id="panel-groups" style="display:none">
+<div id="panel-groups"{% if tab != 'groups' %} style="display:none"{% endif %}>
   <div id="group-list" hx-get="/fragments/groups" hx-trigger="load">
     <p aria-busy="true">Lade...</p>
   </div>
 </div>
 
-<script>
-function showTab(name) {
-  ['users','groups'].forEach(t => {
-    document.getElementById('panel-' + t).style.display = t === name ? 'block' : 'none';
-    document.getElementById('tab-' + t).className = t === name ? 'outline' : 'outline secondary';
-  });
-}
-</script>
 {% endblock %}
diff --git a/backend/templates/shares.html b/backend/templates/shares.html
index f93ee2f..9416bd5 100644
--- a/backend/templates/shares.html
+++ b/backend/templates/shares.html
@@ -3,15 +3,18 @@
 {% block content %}
 <h2>File Sharing</h2>
 
-<!-- Tabs via CSS -->
+<!-- Tabs via HTMX -->
 <div role="tablist" style="display:flex;gap:0.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--pico-muted-border-color);padding-bottom:0.5rem">
-  <button role="tab" onclick="showTab('samba')" id="tab-samba" class="outline">Samba (SMB)</button>
-  <button role="tab" onclick="showTab('nfs')" id="tab-nfs" class="outline secondary">NFS</button>
-  <button role="tab" onclick="showTab('config')" id="tab-config" class="outline secondary">Samba Config</button>
+  <a role="tab" href="/shares?tab=samba" hx-get="/shares?tab=samba" hx-target="body" hx-push-url="true"
+     class="outline{% if tab != 'samba' %} secondary{% endif %}">Samba (SMB)</a>
+  <a role="tab" href="/shares?tab=nfs" hx-get="/shares?tab=nfs" hx-target="body" hx-push-url="true"
+     class="outline{% if tab != 'nfs' %} secondary{% endif %}">NFS</a>
+  <a role="tab" href="/shares?tab=config" hx-get="/shares?tab=config" hx-target="body" hx-push-url="true"
+     class="outline{% if tab != 'config' %} secondary{% endif %}">Samba Config</a>
 </div>
 
 <!-- Samba Shares -->
-<div id="panel-samba">
+<div id="panel-samba"{% if tab != 'samba' %} style="display:none"{% endif %}>
   <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
     <h3 style="margin:0">Samba Shares</h3>
     <button onclick="document.getElementById('new-samba-form').style.display='block'">&#43; Neu</button>
@@ -40,7 +43,7 @@
 </div>
 
 <!-- NFS -->
-<div id="panel-nfs" style="display:none">
+<div id="panel-nfs"{% if tab != 'nfs' %} style="display:none"{% endif %}>
   <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
     <h3 style="margin:0">NFS Exports</h3>
     <button onclick="document.getElementById('new-nfs-form').style.display='block'">&#43; Neu</button>
@@ -69,7 +72,7 @@
 </div>
 
 <!-- Samba Config -->
-<div id="panel-config" style="display:none">
+<div id="panel-config"{% if tab != 'config' %} style="display:none"{% endif %}>
   <div id="samba-config"
        hx-get="/fragments/samba-config"
        hx-trigger="load">
@@ -77,13 +80,4 @@
   </div>
 </div>
 
-<script>
-function showTab(name) {
-  ['samba','nfs','config'].forEach(t => {
-    document.getElementById('panel-' + t).style.display = t === name ? 'block' : 'none';
-    const btn = document.getElementById('tab-' + t);
-    btn.className = t === name ? 'outline' : 'outline secondary';
-  });
-}
-</script>
 {% endblock %}