style: layout and style changes for config page

src/main/resources/static/style.css

@@ -631,6 +631,32 @@ input.inline:focus-visible {
     color: var(--bg-red);
 }
 
+.tab {
+    padding: 1em;
+    border: none;
+    border-radius: 3px 3px 0 0;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    font-weight: bold;
+}
+
+.tab:hover,
+.tab.active {
+    background: var(--table-border);
+}
+
+.tabcontent {
+    border: 1px solid var(--table-border);
+    border-radius: 0 .5em .5em .5em;
+    display: none;
+    padding: 1em;
+}
+
+.tabcontent.active {
+    display: block;
+}
+
 a.reload {
     display: none;
     position: absolute;

src/main/resources/templates/configs.html

@@ -10,6 +10,13 @@
     <main>
         <h1>Konfiguration</h1>
 
+        <div class="tabs">
+            <button class="tab active" onclick="selectTab(this, 'common');">Allgemeine Informationen</button>
+            <button class="tab" onclick="selectTab(this, 'security');">Sicherheit</button>
+            <button class="tab" onclick="selectTab(this, 'transformation');">Transformationen</button>
+        </div>
+
+        <div id="common" class="tabcontent active">
             <section>
                 <h2>🔧 Allgemeine Konfiguration</h2>
                 <table class="config-table">
@@ -37,17 +44,21 @@
                 </table>
             </section>
 
+            <section hx-ext="sse" th:sse-connect="@{/configs/events}">
+                <div th:insert="~{configs/connectionAvailable.html}" th:hx-get="@{/configs?connectionAvailable}" hx-trigger="sse:connection-available">
+                </div>
+            </section>
+        </div>
+
+        <div id="security" class="tabcontent">
             <section th:insert="~{configs/tokens.html}">
             </section>
 
             <section th:insert="~{configs/userroles.html}">
             </section>
-
-        <section hx-ext="sse" th:sse-connect="@{/configs/events}">
-            <div th:insert="~{configs/connectionAvailable.html}" th:hx-get="@{/configs?connectionAvailable}" hx-trigger="sse:connection-available">
         </div>
-        </section>
 
+        <div id="transformation" class="tabcontent">
             <section>
                 <h2><span th:if="${not transformations.isEmpty()}">✅</span><span th:if="${transformations.isEmpty()}">⛔</span> Transformationen</h2>
 
@@ -91,9 +102,19 @@
                 </table>
                 </th:block>
             </section>
+        </div>
     </main>
     <script th:src="@{/scripts.js}"></script>
     <script th:src="@{/webjars/htmx.org/dist/htmx.min.js}"></script>
     <script th:src="@{/webjars/htmx.org/dist/ext/sse.js}"></script>
+    <script>
+        function selectTab(self, elem) {
+            Array.from(document.getElementsByClassName('tab')).forEach(e => e.className = 'tab');
+            self.className = 'tab active';
+
+            Array.from(document.getElementsByClassName('tabcontent')).forEach(e => e.className = 'tabcontent');
+            document.getElementById(elem).className = 'tabcontent active';
+        }
+    </script>
 </body>
 </html>