Fix: Benutzer-Löschen im Browser kaputt (JS), Gruppen-Rechtetabelle überarbeitet

Bugfix (von dir gemeldet, live auf Port 5000 gefunden):
- initConfirmables() in app.js rief beim bestätigten Absenden
  form.requestSubmit() OHNE den ursprünglichen Submitter auf. Laut Spec
  wird dann KEIN Submit-Button-Name/Value mitgeschickt. users.html trug
  die Benutzer-ID als name/value des Löschen-Buttons selbst (statt eines
  verstecken Inputs wie überall sonst) — dadurch kam "delete_user" nie
  im Request an, der Klick tat scheinbar nichts. Fix: e.submitter beim
  ersten Klick merken und an requestSubmit(submitter) weiterreichen
  (behebt es grundsätzlich für alle Formulare dieser Art); zusätzlich
  users.html auf das robustere hidden-input-Muster umgestellt wie
  credentials/devices/groups. Mit echtem Playwright-Browserklick
  (nicht nur curl) verifiziert.

Gruppen-Rechtetabelle, mehrere Korrekturrunden nach deinem Mockup:
- Bereichsname + Kill-Switch-Kästchen jetzt eng nebeneinander in der
  Tabellen-Kopfzeile (nicht mehr an den Rand gestellt), R/W/E/D-Spalten
  in derselben Zeile statt einer zweiten.
- Nur die von einem Bereich tatsächlich genutzten Spalten werden gezeigt
  (GROUP_ROW_TYPES) — Logs zeigt nur R, Einstellungen nur R/W/E, nur
  Geräte zeigt zusätzlich D.
- Bugfix: D-Spalte bei Geräte verschwand durch zu schmale Flex-Breite der
  Spalte im Overflow, obwohl serverseitig korrekt gerendert — behoben
  durch flex:0 0 auto statt fester Breite.
- Checkbox-Zentrierung robust per display:block+margin:auto statt sich
  auf native Checkbox-Ränder zu verlassen (waren leicht asymmetrisch).
- Unterpunkte deutlich weiter eingerückt (34px) für klare Hierarchie.
- Sichtbares Ausgrauen (nicht nur natives disabled) der Unterpunkte,
  solange der Bereich-Kill-Switch aus ist (JS setzt .permission-locked).
- Legende jetzt UNTER der Rechtetabelle statt darüber.
- Rechte lassen sich jetzt direkt beim Anlegen einer neuen Gruppe setzen
  (Modal zeigt dieselbe Rechtetabelle, add_group-Route verarbeitet
  mitgesendete permissions[] im selben Request) statt sie erst danach
  über die Gruppentabelle nachzupflegen.

Alles inkl. Erstellen-mit-Rechten und Bearbeiten-Regression live per
Playwright verifiziert.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

srv/poe_manager/templates/groups.html

@@ -5,53 +5,50 @@
 
 {% block content %}
 
-{# Rendert einen Bereich (Geräte/Logs/Einstellungen) als kompakte Tabelle:
-   Zeilen = Bereich selbst (nur die R-Spalte aktiv, das ist der Kill-Switch)
-   + je eine Zeile pro Unterpunkt (Clients, Switche, ...). Spalten = die
-   kanonischen Rechte R/W/E/D nebeneinander (permission_row_types).
+{# Rendert einen Bereich (Geräte/Logs/Einstellungen) als kompakte, schmale
+   Spalte: eigene Kopfzeile mit Bereichsname + einem Kästchen (der
+   Kill-Switch, "Bereich sichtbar"), darunter eine kleine Tabelle mit den
+   Unterpunkten (Clients, Switche, ...) als Zeilen und nur den für diesen
+   Bereich tatsächlich genutzten Rechten (group_row_types[group_key]) als
+   Spalten — Logs/Einstellungen zeigen z.B. nur R/W/E, nur Geräte zeigt
+   zusätzlich D (PoE-Neustart über Dashboard, ausschließlich bei Clients).
    "Ändern" (E) deckt Löschen überall mit ab — es gibt nirgends ein eigenes
-   Löschen-Recht. "D" existiert nur bei Clients und bedeutet dort NICHT
-   Löschen, sondern PoE-Neustart über das Dashboard-Popup. Zellen ohne
-   passendes Recht für die jeweilige Zeile (z.B. "W" bei "Geräte" selbst,
-   oder "D" bei Switche/Zugangsdaten) werden als ausgegraute, nicht
-   anklickbare Checkbox dargestellt statt zu fehlen — dadurch bleiben alle
-   Spalten bündig untereinander. readonly=true zeigt nur den aktuellen Stand
+   Löschen-Recht. Zellen ohne passendes Recht für die jeweilige Zeile (z.B.
+   "D" bei Switche/Zugangsdaten) werden als ausgegraute, nicht anklickbare
+   Checkbox dargestellt statt zu fehlen — dadurch bleiben alle Spalten
+   bündig untereinander. readonly=true zeigt nur den aktuellen Stand
    (Admin/Systemgruppen bzw. fehlendes groups.edit). Die JS-Funktion
    applyPermissionGating() sperrt Kind-Rechte, solange das Bereich-Lesen
-   (Kill-Switch) nicht gesetzt ist. #}
-{% macro permission_table(group, checked_keys, readonly) %}
-<div class="permission-area">
+   (Kill-Switch) nicht gesetzt ist. Mehrere Bereiche stehen per Flexbox
+   nebeneinander (siehe .permission-groups-row), damit die ganze
+   Rechteübersicht einer Gruppe in einer kompakten Zeile Platz hat. #}
+{% macro permission_table(group, group_key, checked_keys, readonly) %}
+{% set row_types = group_row_types[group_key] %}
+<div class="permission-group-col">
   <div style="overflow-x:auto;">
   <table class="permission-table">
     <thead>
       <tr>
-        <th>{{ group['label'] }}</th>
-        {% for row_key, row_letter, row_label in permission_row_types %}
+        <th class="permission-group-header-cell">
+          <label class="permission-group-toggle">
+            <input type="checkbox" name="permissions" value="{{ group['view_key'] }}"
+                   title="{{ permission_labels.get(group['view_key'], group['label']) }}"
+                   {% if group['view_key'] in checked_keys %}checked{% endif %}
+                   {% if readonly %}disabled{% endif %}
+                   class="permission-area-toggle-cb">
+            <span class="permission-group-name">{{ group['label'] }}</span>
+          </label>
+        </th>
+        {% for row_key, row_letter, row_label in row_types %}
         <th title="{{ row_label }}">{{ row_letter }}</th>
         {% endfor %}
       </tr>
     </thead>
     <tbody>
-      <tr>
-        <td class="permission-row-label">{{ group['label'] }} (gesamt)</td>
-        {% for row_key, row_letter, row_label in permission_row_types %}
-        <td>
-          {% if row_key == 'view' %}
-          <input type="checkbox" name="permissions" value="{{ group['view_key'] }}"
-                 title="{{ permission_labels.get(group['view_key'], group['label']) }}"
-                 {% if group['view_key'] in checked_keys %}checked{% endif %}
-                 {% if readonly %}disabled{% endif %}
-                 class="permission-area-toggle-cb">
-          {% else %}
-          <input type="checkbox" disabled class="permission-cb-na" tabindex="-1">
-          {% endif %}
-        </td>
-        {% endfor %}
-      </tr>
       {% for child_key, child in group['children'].items() %}
       <tr>
         <td class="permission-row-label">{{ child['label'] }}</td>
-        {% for row_key, row_letter, row_label in permission_row_types %}
+        {% for row_key, row_letter, row_label in row_types %}
         {% set perm_key = child['rows'].get(row_key) %}
         <td>
           {% if perm_key %}
@@ -74,9 +71,16 @@
 {% endmacro %}
 
 {% macro permission_tree(checked_keys, readonly) %}
+<div class="permission-groups-row">
   {% for group_key, group in permission_catalog.items() %}
-    {{ permission_table(group, checked_keys, readonly) }}
+    {{ permission_table(group, group_key, checked_keys, readonly) }}
   {% endfor %}
+</div>
+<div class="permission-legend">
+  <strong>R</strong> = Read (Lesen) · <strong>W</strong> = Write (Anlegen) ·
+  <strong>E</strong> = Edit (Ändern, inkl. Löschen) ·
+  <strong>D</strong> = Dashboard (PoE-Neustart über das Dashboard-Popup, nur bei Clients)
+</div>
 {% endmacro %}
 
 <div class="section-head">
@@ -86,12 +90,9 @@
       Über Gruppen lassen sich Rechte für jeden Bereich der App granular vergeben.
       Ein Benutzer kann mehreren Gruppen angehören — die Rechte addieren sich. Auf „Rechte“ klicken,
       um eine Gruppe aufzuklappen und die Berechtigungen im Detail zu sehen bzw. zu ändern.
-      „Admin“ und „Benutzer“ sind feste Systemgruppen und nicht veränderbar. Die Zeile „... (gesamt)“
-      muss gelesen werden dürfen, bevor die Zeilen darunter greifen — ausgegraute Kästchen gelten für
-      die jeweilige Zeile nicht.
-      <strong>R</strong> = Lesen (Read) · <strong>W</strong> = Schreiben/Anlegen (Write) ·
-      <strong>E</strong> = Ändern inkl. Löschen (Edit) ·
-      <strong>D</strong> = Dashboard-Neustart (nur bei Clients; automatische Neustarts bei Ausfall bleiben davon unberührt)
+      „Admin“ und „Benutzer“ sind feste Systemgruppen und nicht veränderbar. Das Kästchen neben dem
+      Bereichsnamen (Geräte/Logs/Einstellungen) muss gesetzt sein, bevor die Rechte darunter greifen —
+      automatische Neustarts bei Ausfall bleiben von „D“ unberührt. Legende direkt bei den Rechten.
     </div>
   </div>
   {% if current_user.has_permission('groups.create') %}
@@ -263,9 +264,11 @@
 </div>
 {% endfor %}
 
-<!-- Modal: Neue Gruppe -->
+<!-- Modal: Neue Gruppe — Rechte direkt beim Anlegen setzbar, Mitglieder
+     werden danach über die Gruppentabelle zugeordnet (die Gruppe muss
+     dafür erst existieren). -->
 <div class="modal-overlay" id="addGroupModal">
-  <div class="modal" style="max-width:380px;">
+  <div class="modal" style="max-width:900px;">
     <form method="post">
       <div class="modal-header">
         <h3>Neue Gruppe</h3>
@@ -276,8 +279,9 @@
         <div class="field">
           <label>Name</label>
           <input type="text" name="name" required placeholder="z.B. Facility-Team">
-          <div class="field-hint">Rechte und Mitglieder werden danach über die Gruppentabelle eingestellt.</div>
+          <div class="field-hint">Mitglieder werden danach über die Gruppentabelle zugeordnet.</div>
         </div>
+        {{ permission_tree([], false) }}
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
@@ -306,15 +310,20 @@ function toggleDetail(id) {
 // (Admin/Systemgruppen) bleiben unangetastet, deren Checkboxen sind ohnehin
 // alle disabled.
 function applyPermissionGating() {
-    document.querySelectorAll(".permission-area").forEach(function (area) {
+    document.querySelectorAll(".permission-group-col").forEach(function (area) {
         const toggle = area.querySelector(".permission-area-toggle-cb");
         if (!toggle || toggle.disabled) return;
+        const tbody = area.querySelector("tbody");
         const children = area.querySelectorAll(".permission-child-cb");
         const sync = function () {
             children.forEach(function (cb) {
                 cb.disabled = !toggle.checked;
                 if (!toggle.checked) cb.checked = false;
             });
+            // Zusätzlich zum disabled-Attribut (das der Browser nur dezent
+            // abblendet) sichtbar ausgrauen, wie gefordert — sonst fällt
+            // "Bereich gesperrt" auf den ersten Blick kaum auf.
+            if (tbody) tbody.classList.toggle("permission-locked", !toggle.checked);
         };
         toggle.addEventListener("change", sync);
         sync();