From dd7cf0ec933f9aaa6815c633055024f717a3804a Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Thu, 19 Mar 2026 08:35:05 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20chatUsageBadge-Setting=20+=20Dashboard-?=
 =?UTF-8?q?Men=C3=BC=20als=20Dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Neues Setting chatUsageBadge (default: false) blendet Usage-Badge im Chat ein/aus
- Dashboard-Links durch 3-Dot-Header-Menü ersetzt (einheitlich mit Chat)
- Admin-Items über admin-only Attribut gesteuert, dashboard-links CSS entfernt

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 wwwroot/css/dashboard.css         | 31 -------------
 wwwroot/index.html                | 32 ++++++++++---
 wwwroot/js/app.js                 |  3 +-
 wwwroot/js/pages/chat-page.js     |  2 +
 wwwroot/js/pages/dashboard.js     | 75 ++++++++++++++-----------------
 wwwroot/js/pages/settings-page.js |  9 ++++
 6 files changed, 71 insertions(+), 81 deletions(-)

diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css
index 9e50501..84af811 100644
--- a/wwwroot/css/dashboard.css
+++ b/wwwroot/css/dashboard.css
@@ -2,38 +2,7 @@
   padding: var(--page-padding);
 }
 
-.dashboard header {
-  overflow: auto;
-}
 
-.dashboard header * {
-  white-space: nowrap;
-}
-
-.dashboard-links {
-  display: flex;
-  gap: var(--box-spacing);
-  align-items: center;
-  flex: 1;
-}
-
-.dashboard-link {
-  color: var(--text);
-  text-decoration: none;
-  opacity: var(--semi-transparent);
-  transition: opacity var(--transition-duration);
-  cursor: pointer;
-}
-
-.dashboard-link:hover {
-  opacity: 1;
-  color: var(--text-accent);
-}
-
-.dashboard-link:last-child {
-  margin-left: auto;
-  margin-right: var(--badge-spacing);
-}
 
 .dashboard section {
   margin-bottom: var(--page-spacing);
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 4ebafbf..d87b6d4 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -54,13 +54,19 @@
     <header>
       <button class="back-btn icon-btn" disabled></button>
       <h1 class="dashboard-title">// gott</h1>
-      <div class="dashboard-links">
-        <a id="dashboardSettingsLink" class="dashboard-link">Einstellungen</a>
-        <a id="dashboardAdminLink" class="dashboard-link" hidden>Benutzerverwaltung</a>
-        <a id="dashboardApiKeysLink" class="dashboard-link" hidden>API-Keys</a>
-        <a id="dashboardServerSettingsLink" class="dashboard-link" hidden>Servereinstellungen</a>
-        <a id="dashboardDbExplorerLink" class="dashboard-link" hidden>Datenbank</a>
-        <a id="dashboardProfileLink" class="dashboard-link">Mein Profil</a>
+      <div class="header-menu">
+        <button class="header-menu-trigger icon-btn" id="dashboardMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
+        <div class="header-menu-dropdown" id="dashboardMenuDropdown" hidden>
+          <div class="header-menu-label">Benutzer</div>
+          <button class="header-menu-item" id="dashboardProfileLink"><i class="fa fa-user"></i> Mein Profil</button>
+          <button class="header-menu-item" id="dashboardSettingsLink"><i class="fa fa-cog"></i> Einstellungen</button>
+          <div class="header-menu-separator" hidden admin-only></div>
+          <div class="header-menu-label" hidden admin-only>Administrator</div>
+          <button class="header-menu-item" id="dashboardServerSettingsLink" hidden admin-only><i class="fa fa-server"></i> Servereinstellungen</button>
+          <button class="header-menu-item" id="dashboardAdminLink" hidden admin-only><i class="fa fa-users"></i> Benutzerverwaltung</button>
+          <button class="header-menu-item" id="dashboardDbExplorerLink" hidden admin-only><i class="fa fa-database"></i> Datenbank</button>
+          <button class="header-menu-item" id="dashboardApiKeysLink" hidden admin-only><i class="fa fa-key"></i> API-Keys</button>
+        </div>
       </div>
     </header>
     <div class="page-content">
@@ -473,6 +479,18 @@
               </label>
             </div>
           </div>
+          <div class="setting-row">
+            <div class="setting-info">
+              <label>Usage-Badge</label>
+              <span class="setting-hint">API-Key-Verbrauch im Chat anzeigen</span>
+            </div>
+            <div class="setting-control">
+              <label class="toggle-switch">
+                <input type="checkbox" id="settingChatUsageBadge">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+          </div>
         </section>
         <section id="settingsBackupSection" class="settings-section" hidden>
           <h2>Daten</h2>
diff --git a/wwwroot/js/app.js b/wwwroot/js/app.js
index 4e40b7d..a925db7 100644
--- a/wwwroot/js/app.js
+++ b/wwwroot/js/app.js
@@ -6,7 +6,8 @@ const SETTINGS_DEFAULTS = {
   pageWidth: 900,
   toolCallDisplay: 'modifications',
   chainMetaDisplay: 'sometimes',
-  showDeletedMessages: false
+  showDeletedMessages: false,
+  chatUsageBadge: false
 };
 
 function loadSettings() {
diff --git a/wwwroot/js/pages/chat-page.js b/wwwroot/js/pages/chat-page.js
index 162e698..6a15719 100644
--- a/wwwroot/js/pages/chat-page.js
+++ b/wwwroot/js/pages/chat-page.js
@@ -47,6 +47,8 @@ async function _initChatUsageBadge() {
   if (!currentUser) return;
   var container = document.getElementById('chatUsageBadge');
   if (!container) return;
+  var s = loadSettings();
+  if (!s.chatUsageBadge) { container.hidden = true; return; }
 
   try {
     var selectedKey = await apiGetSelectedKey(getCurrentAgentId());
diff --git a/wwwroot/js/pages/dashboard.js b/wwwroot/js/pages/dashboard.js
index a6d8180..64c01aa 100644
--- a/wwwroot/js/pages/dashboard.js
+++ b/wwwroot/js/pages/dashboard.js
@@ -2,49 +2,40 @@
 
 registerPage('dashboard', {
   async init() {
-    // Einstellungen-Link
-    document.getElementById('dashboardSettingsLink').addEventListener('click', (e) => {
-      e.preventDefault();
-      navigateTo('settings');
+    // Dashboard-Menü (Header-Menu wie im Chat)
+    var menuBtn = document.getElementById('dashboardMenuBtn');
+    var menuDropdown = document.getElementById('dashboardMenuDropdown');
+    menuBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      menuDropdown.hidden = !menuDropdown.hidden;
     });
 
-    // Profil-Link
-    document.getElementById('dashboardProfileLink').addEventListener('click', (e) => {
-      e.preventDefault();
-      navigateTo('profile');
-    });
-
-    // Admin-Links (nur für Admins sichtbar)
-    var adminLink = document.getElementById('dashboardAdminLink');
-    var serverSettingsLink = document.getElementById('dashboardServerSettingsLink');
-    var apiKeysLink = document.getElementById('dashboardApiKeysLink');
-    if (currentUser && currentUser.isAdmin) {
-      adminLink.hidden = false;
-      adminLink.addEventListener('click', (e) => {
-        e.preventDefault();
-        navigateTo('admin');
-      });
-      apiKeysLink.hidden = false;
-      apiKeysLink.addEventListener('click', (e) => {
-        e.preventDefault();
-        navigateTo('api-keys');
-      });
-      serverSettingsLink.hidden = false;
-      serverSettingsLink.addEventListener('click', (e) => {
-        e.preventDefault();
-        navigateTo('server-settings');
-      });
-
-      var dbExplorerLink = document.getElementById('dashboardDbExplorerLink');
-      dbExplorerLink.hidden = false;
-      dbExplorerLink.addEventListener('click', (e) => {
-        e.preventDefault();
-        navigateTo('db-explorer');
-      });
+    // Menü-Items mit Navigation
+    var menuItems = {
+      dashboardSettingsLink: 'settings',
+      dashboardProfileLink: 'profile',
+      dashboardAdminLink: 'admin',
+      dashboardApiKeysLink: 'api-keys',
+      dashboardServerSettingsLink: 'server-settings',
+      dashboardDbExplorerLink: 'db-explorer'
+    };
+    for (var id in menuItems) {
+      document.getElementById(id).addEventListener('click', ((page) => () => {
+        menuDropdown.hidden = true;
+        navigateTo(page);
+      })(menuItems[id]));
     }
 
-    // Globaler Click-Handler zum Schließen aller Card-Menüs
-    document.addEventListener('click', this._closeCardMenus = () => closeAllCardMenus());
+    // Admin-Items sichtbar machen
+    if (currentUser && currentUser.isAdmin) {
+      document.querySelectorAll('[admin-only]').forEach($ => $.hidden = false)
+    }
+
+    // Globaler Click-Handler zum Schließen aller Menüs
+    document.addEventListener('click', this._closeMenus = () => {
+      closeAllCardMenus();
+      menuDropdown.hidden = true;
+    });
 
     // Telegram-Config parallel pro Session laden (sessions werden gleich geladen)
 
@@ -294,9 +285,9 @@ registerPage('dashboard', {
     }
   },
   destroy() {
-    if (this._closeCardMenus) {
-      document.removeEventListener('click', this._closeCardMenus);
-      this._closeCardMenus = null;
+    if (this._closeMenus) {
+      document.removeEventListener('click', this._closeMenus);
+      this._closeMenus = null;
     }
   }
 });
diff --git a/wwwroot/js/pages/settings-page.js b/wwwroot/js/pages/settings-page.js
index e3a4f73..23f99c3 100644
--- a/wwwroot/js/pages/settings-page.js
+++ b/wwwroot/js/pages/settings-page.js
@@ -7,6 +7,7 @@ registerPage('settings', {
     const toolCallSelect = document.getElementById('settingToolCallDisplay');
     const chainMetaSelect = document.getElementById('settingChainMetaDisplay');
     const showDeletedToggle = document.getElementById('settingShowDeletedMessages');
+    const chatUsageBadgeToggle = document.getElementById('settingChatUsageBadge');
     const resetBtn = document.getElementById('settingsResetBtn');
     const backupSection = document.getElementById('settingsBackupSection');
 
@@ -21,6 +22,7 @@ registerPage('settings', {
     toolCallSelect.value = s.toolCallDisplay;
     chainMetaSelect.value = s.chainMetaDisplay;
     showDeletedToggle.checked = s.showDeletedMessages;
+    chatUsageBadgeToggle.checked = s.chatUsageBadge;
 
     slider.addEventListener('input', () => {
       display.textContent = slider.value + 'px';
@@ -50,6 +52,12 @@ registerPage('settings', {
       saveSettings(s);
     });
 
+    chatUsageBadgeToggle.addEventListener('change', () => {
+      var s = loadSettings();
+      s.chatUsageBadge = chatUsageBadgeToggle.checked;
+      saveSettings(s);
+    });
+
     const backupBtn = document.getElementById('settingsBackupBtn');
     if (backupBtn) backupBtn.addEventListener('click', () => withButtonLoading(backupBtn, 'Wird erstellt...', async () => {
       try {
@@ -68,6 +76,7 @@ registerPage('settings', {
       toolCallSelect.value = SETTINGS_DEFAULTS.toolCallDisplay;
       chainMetaSelect.value = SETTINGS_DEFAULTS.chainMetaDisplay;
       showDeletedToggle.checked = SETTINGS_DEFAULTS.showDeletedMessages;
+      chatUsageBadgeToggle.checked = SETTINGS_DEFAULTS.chatUsageBadge;
     });