Chat-Page: Archivieren-Button durch 3-Dot-Menü ersetzt

wwwroot/css/chat.css

@@ -1,3 +1,45 @@
+/* Header Menu */
+
+.header-menu {
+  position: relative;
+  margin-left: auto;
+}
+
+.header-menu-trigger {
+  padding: var(--s1) var(--s2);
+  line-height: 1;
+}
+
+.header-menu-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: var(--s1);
+  background: var(--f3-bg);
+  border: var(--border-width) solid var(--f3-border);
+  min-width: 10em;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+}
+
+.header-menu-dropdown[hidden] {
+  display: none;
+}
+
+.header-menu-item {
+  border: none;
+  text-align: left;
+  padding: var(--s2) var(--s3);
+  background: none;
+  white-space: nowrap;
+}
+
+.header-menu-item:not(:disabled):hover {
+  background: var(--f2-bg);
+  border: none;
+}
+
 #chat {
   flex: 1;
   overflow-y: auto;
@@ -56,10 +98,10 @@
 }
 
 .tool-box {
-  align-self: center;
   padding: var(--s2);
   background: var(--f3-bg);
   border: var(--border-width) solid var(--f3-border);
+  opacity: 0.5;
 }
 
 .input-area {

wwwroot/index.html

@@ -122,7 +122,12 @@
     <header>
       <button class="back-btn" id="chatBackBtn">←</button>
       <h1 id="sessionTitle">-</h1>
-      <button class="header-btn" id="archiveBtn">Archivieren</button>
+      <div class="header-menu">
+        <button class="header-menu-trigger" id="chatMenuBtn">⋮</button>
+        <div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
+          <button class="header-menu-item" id="archiveBtn">Archivieren</button>
+        </div>
+      </div>
     </header>
     <div class="meta-bar" id="meta"></div>
     <div id="chat"></div>

wwwroot/js/pages/chat-page.js

@@ -93,9 +93,25 @@ registerPage('chat', {
       });
     }
 
+    // Header-Menü (3-Dot)
+    const chatMenuBtn = document.getElementById('chatMenuBtn');
+    const chatMenuDropdown = document.getElementById('chatMenuDropdown');
+    if (chatMenuBtn && chatMenuDropdown) {
+      chatMenuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        chatMenuDropdown.hidden = !chatMenuDropdown.hidden;
+      });
+      document.addEventListener('click', this._closeMenu = () => {
+        chatMenuDropdown.hidden = true;
+      });
+    }
+
     // Archivieren
     const archiveBtn = document.getElementById('archiveBtn');
-    if (archiveBtn) archiveBtn.addEventListener('click', clearChat);
+    if (archiveBtn) archiveBtn.addEventListener('click', () => {
+      if (chatMenuDropdown) chatMenuDropdown.hidden = true;
+      clearChat();
+    });
 
     // State zurücksetzen und History laden
     messages.length = 0;
@@ -107,6 +123,10 @@ registerPage('chat', {
   },
 
   destroy() {
+    if (this._closeMenu) {
+      document.removeEventListener('click', this._closeMenu);
+      this._closeMenu = null;
+    }
     stopHistoryPolling();
     messages.length = 0;
     lastKnownMessageId = 0;