From 46cbf94a498e8d7c60c13ee2d3675f9ce051f311 Mon Sep 17 00:00:00 2001
From: claude-dev <claude-dev@aegis-sight.de>
Date: Thu, 5 Mar 2026 19:00:31 +0100
Subject: [PATCH] UI: Email-Dropdown im Header mit Org-Name und Lizenztyp
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Klick auf Email öffnet Dropdown mit Organisation und Lizenzinfo
- Org-Name und Lizenz-Badge nicht mehr direkt sichtbar im Header
- Dropdown schliesst bei Klick ausserhalb
- Barrierefreie ARIA-Attribute

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/static/css/style.css  | 77 ++++++++++++++++++++++++++++++++-------
 src/static/dashboard.html | 15 ++++++--
 src/static/js/app.js      | 42 +++++++++++----------
 3 files changed, 97 insertions(+), 37 deletions(-)

diff --git a/src/static/css/style.css b/src/static/css/style.css
index 0da61a4..2c99c00 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -477,29 +477,78 @@ a:hover {
     color: var(--text-secondary);
     font-weight: 500;
 }
-/* --- Org & License Info in Header --- */
+/* --- User Dropdown in Header --- */
 .header-user-info {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 2px;
-    line-height: 1.3;
+    position: relative;
 }
 
-.header-user-top {
+.header-user-btn {
     display: flex;
     align-items: center;
-    gap: var(--sp-md);
+    gap: 6px;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    padding: 4px 8px;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
 }
 
-.header-org-name {
-    font-size: 11px;
+.header-user-btn:hover,
+.header-user-btn[aria-expanded="true"] {
+    border-color: var(--border);
+    background: var(--bg-secondary);
+}
+
+.header-user-chevron {
+    font-size: 10px;
+    color: var(--text-tertiary);
+    transition: transform 0.15s;
+}
+
+.header-user-btn[aria-expanded="true"] .header-user-chevron {
+    transform: rotate(180deg);
+}
+
+.header-user-dropdown {
+    display: none;
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    min-width: 220px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+    z-index: 1000;
+}
+
+.header-user-dropdown.open {
+    display: block;
+}
+
+.header-dropdown-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 0;
+}
+
+.header-dropdown-row + .header-dropdown-row {
+    border-top: 1px solid var(--border);
+}
+
+.header-dropdown-label {
+    font-size: 12px;
     color: var(--text-tertiary);
     font-weight: 400;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+}
+
+.header-dropdown-value {
+    font-size: 12px;
+    color: var(--text-primary);
+    font-weight: 500;
 }
 
 .header-license-badge {
diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 41b3100..a2dd319 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -30,11 +30,20 @@
             <div class="header-right">
                 <button class="btn btn-secondary btn-small theme-toggle-btn" id="theme-toggle" onclick="ThemeManager.toggle()" title="Theme wechseln" aria-label="Theme wechseln">&#9788;</button>
                 <div class="header-user-info">
-                    <div class="header-user-top">
+                    <button class="header-user-btn" id="header-user-btn" aria-expanded="false" aria-haspopup="true">
                         <span class="header-user" id="header-user"></span>
-                        <span class="header-license-badge" id="header-license-badge"></span>
+                        <span class="header-user-chevron" aria-hidden="true">&#9662;</span>
+                    </button>
+                    <div class="header-user-dropdown" id="header-user-dropdown" role="menu">
+                        <div class="header-dropdown-row">
+                            <span class="header-dropdown-label">Organisation</span>
+                            <span class="header-dropdown-value" id="header-org-name">-</span>
+                        </div>
+                        <div class="header-dropdown-row">
+                            <span class="header-dropdown-label">Lizenz</span>
+                            <span class="header-dropdown-value" id="header-license-info">-</span>
+                        </div>
                     </div>
-                    <span class="header-org-name" id="header-org-name"></span>
                 </div>
                 <div class="header-license-warning" id="header-license-warning"></div>
                 <button class="btn btn-secondary btn-small" id="logout-btn">Abmelden</button>
diff --git a/src/static/js/app.js b/src/static/js/app.js
index 83e21de..ec0a29c 100644
--- a/src/static/js/app.js
+++ b/src/static/js/app.js
@@ -433,33 +433,35 @@ const App = {
             this._currentUsername = user.email;
             document.getElementById('header-user').textContent = user.email;
 
-            // Org-Name anzeigen
+            // Dropdown-Daten befuellen
             const orgNameEl = document.getElementById('header-org-name');
-            if (orgNameEl && user.org_name) {
-                orgNameEl.textContent = user.org_name;
-                orgNameEl.title = user.org_name;
-            }
+            if (orgNameEl) orgNameEl.textContent = user.org_name || '-';
 
-            // Lizenz-Badge anzeigen
-            const badgeEl = document.getElementById('header-license-badge');
-            if (badgeEl) {
+            const licInfoEl = document.getElementById('header-license-info');
+            if (licInfoEl) {
                 const licenseLabels = {
                     trial: 'Trial',
-                    annual: 'Annual',
+                    annual: 'Jahreslizenz',
                     permanent: 'Permanent',
-                    expired: 'Abgelaufen',
-                    unknown: 'Unbekannt'
                 };
-                const status = user.read_only ? 'expired' : (user.license_status || 'unknown');
-                const cssClass = user.read_only ? 'license-expired'
-                    : user.license_type === 'trial' ? 'license-trial'
-                    : user.license_type === 'annual' ? 'license-annual'
-                    : user.license_type === 'permanent' ? 'license-permanent'
-                    : 'license-unknown';
                 const label = user.read_only ? 'Abgelaufen'
-                    : licenseLabels[user.license_type] || licenseLabels[user.license_status] || 'Unbekannt';
-                badgeEl.textContent = label;
-                badgeEl.className = 'header-license-badge ' + cssClass;
+                    : licenseLabels[user.license_type] || user.license_status || '-';
+                licInfoEl.textContent = label;
+            }
+
+            // Dropdown Toggle
+            const userBtn = document.getElementById('header-user-btn');
+            const userDropdown = document.getElementById('header-user-dropdown');
+            if (userBtn && userDropdown) {
+                userBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const isOpen = userDropdown.classList.toggle('open');
+                    userBtn.setAttribute('aria-expanded', isOpen);
+                });
+                document.addEventListener('click', () => {
+                    userDropdown.classList.remove('open');
+                    userBtn.setAttribute('aria-expanded', 'false');
+                });
             }
 
             // Warnung bei abgelaufener Lizenz