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

@ -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>
<button id="admin-toggle" type="button"
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>