ui: "Angemeldet als …" + "Abmelden" zurück in eine Leiste unter die Kopfzeile

- Identitätsleiste (Nutzer links, Abmelden-Link rechts) wieder direkt unter dem Header
  statt im ⋮-Menü. Logout-Link kommt wie bisher aus SSO_LOGOUT_URL.
- Admin-Button bleibt im ⋮-Menü (als "⚙ Admin-Bereich"); IDs unverändert.
- Doku §5.1.2 angepasst.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dieter Schlüter 2026-06-21 01:28:21 +02:00
commit 53ec2d7ec7
2 changed files with 23 additions and 19 deletions

View file

@ -776,16 +776,16 @@ https://va.beispiel.de/ ← remote über Reverse-Proxy (alles, inkl. Mikr
┌─────────────────────────────────────────────────────────┐
│ 👄 Voice Assistant ............... [🇩🇪 ▾] [ ⋮ ] │
├─────────────────────────────────────────────────────────┤ ┌─ Menü (⋮) ──────────────┐
│ │ │ VORLESEN │
│ Nachrichtenverlauf │ │ ▣ 📱 Im Gerät │
│ (eigene Nachrichten: blaue Blase rechts) │ │ ▢ ☁ Server │
│ (Assistent: graue Blase links) │ │ ▢ ✨ Beste Qualität │
│ Angemeldet als <user> ....................... Abmelden │ │ VORLESEN │
├─────────────────────────────────────────────────────────┤ │ ▣ 📱 Im Gerät │
│ Nachrichtenverlauf │ │ ▢ ⚡ Schnell │
│ (eigene Nachrichten: blaue Blase rechts) │ │ ▢ ✨ Hohe Qualität │
│ (Assistent: graue Blase links) │ │ ▢ ☁ Cloud │
│ │ │ ────────────────────── │
├─────────────────────────────┬───────────────────────────┤ │ ✎ Neues Gespräch │
│ Texteingabe … [Senden] │ [🎤] │ │ 🌙 Tag-/Nachtmodus │
└─────────────────────────────┴───────────────────────────┘ │ ────────────────────── │
Statuszeile: „denkt …" / „verarbeite Sprache …" / leer │ Angemeldet · Admin · Ab │
└──────────────────────────┘
└─────────────────────────────┴───────────────────────────┘ │ ⚙ Admin-Bereich │
Statuszeile: „denkt …" / „verarbeite Sprache …" / leer └──────────────────────────┘
```
**Kopfzeile (immer schlank):**
@ -796,6 +796,9 @@ https://va.beispiel.de/ ← remote über Reverse-Proxy (alles, inkl. Mikr
| **Sprache ▾** | Antwortsprache (→ § 6.6): `🔄 Flex` = folgt der gesprochenen Sprache · feste Sprache (🇩🇪/🇬🇧/…) = Antwort + Stimme in dieser Sprache |
| **⋮ Menü** | Öffnet die Einstellungen (unten) |
**Identitätsleiste (direkt unter der Kopfzeile):** links „Angemeldet als …" (SSO-Identität;
„Gast" ohne SSO), rechts **Abmelden** (Link zum SSO-Logout).
**Im ⋮-Menü:**
| Element | Funktion |
@ -803,7 +806,7 @@ https://va.beispiel.de/ ← remote über Reverse-Proxy (alles, inkl. Mikr
| **Vorlesen** | Wie wird die Antwort vorgelesen? `📱 Im Gerät` = das Handy liest selbst vor (kein Server-Audio → spart Daten; fällt auf Server zurück, wenn der Browser keine Stimmen hat) · `⚡ Schnell` = piper (lokal) · `✨ Hohe Qualität` = chatterbox (natürliche Stimme) · `☁ Cloud` = OpenRouter (Internet nötig). „Im Gerät" erscheint nur, wo der Browser es unterstützt. |
| **✎ Neues Gespräch** | Frische Sitzung (Verlauf zurücksetzen) |
| **🌙 Tag-/Nachtmodus** | Heller/dunkler Modus; folgt sonst dem Betriebssystem |
| **Konto** | „Angemeldet als …", **⚙ Admin** (nur Admins → § 7.5), **Abmelden** |
| **⚙ Admin-Bereich** | Öffnet das Admin-Panel — nur für Admin-Nutzer sichtbar (→ § 7.5) |
**Unten:**

View file

@ -233,6 +233,12 @@
class="h-9 w-9 grid place-items-center rounded-lg border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700 text-xl leading-none transition-colors">⋮</button>
</header>
<!-- Identitätsleiste: angemeldeter Nutzer (links) + Abmelden (rechts) -->
<div class="shrink-0 flex items-center justify-between px-4 py-1 text-xs text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
<span id="identity">lade …</span>
<a id="logout" class="hidden hover:underline" href="#">Abmelden</a>
</div>
<!-- Verstecktes Quell-Select: speist die Ton-Presets (bewahrt die bestehende Logik) -->
<select id="tts" class="hidden">
<option value="device">Im Gerät</option>
@ -294,16 +300,11 @@
<span id="theme-icon" class="w-5 text-center shrink-0">🌙</span>
<span>Tag-/Nachtmodus</span>
</button>
</div>
<!-- Konto -->
<div class="border-t border-slate-100 dark:border-slate-700 pt-2">
<p id="identity" class="text-xs text-slate-500 dark:text-slate-400 px-1 mb-1.5">lade …</p>
<div class="flex items-center gap-2 px-1">
<button id="admin-toggle" type="button"
class="hidden text-xs rounded-lg border border-slate-300 dark:border-slate-600 px-2.5 py-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">⚙ Admin</button>
<a id="logout" href="#" class="hidden text-xs text-blue-600 dark:text-blue-400 hover:underline ml-auto">Abmelden</a>
</div>
class="hidden w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 text-left transition-colors">
<span class="w-5 text-center shrink-0"></span>
<span>Admin-Bereich</span>
</button>
</div>
</div>
@ -325,6 +326,6 @@
<div id="status" class="w-full max-w-3xl mx-auto mt-1 min-h-[1rem] text-xs text-slate-500 dark:text-slate-400"></div>
</footer>
<script src="/app.js?v=40"></script>
<script src="/app.js?v=41"></script>
</body>
</html>