From 24cbce40c44663ba7a2b8da65b43026f5d205122 Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Sat, 28 Feb 2026 20:09:12 +0100
Subject: [PATCH] =?UTF-8?q?Globale=20.icon-btn=20Klasse=20f=C3=BCr=20alle?=
 =?UTF-8?q?=20Icon-only=20Buttons,=20Hover-Filter,=20Theme-Anpassungen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 wwwroot/css/base.css             | 15 +++++++++++++++
 wwwroot/css/chat.css             | 15 ++-------------
 wwwroot/css/dashboard.css        |  1 +
 wwwroot/css/form.css             |  6 ++----
 wwwroot/css/theme.css            |  3 ++-
 wwwroot/index.html               | 18 +++++++++---------
 wwwroot/js/file-explorer.js      |  8 ++++----
 wwwroot/js/pages/session-page.js |  2 +-
 wwwroot/js/ui.js                 |  2 +-
 9 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/wwwroot/css/base.css b/wwwroot/css/base.css
index fbb25f2..2ca4ad1 100644
--- a/wwwroot/css/base.css
+++ b/wwwroot/css/base.css
@@ -61,6 +61,7 @@ button:not(:disabled) {
 
 button:not(:disabled):hover, select:hover, input:hover, textarea:hover {
   border-color: var(--primary);
+  filter: var(--hover-filter);
 }
 
 button:disabled {
@@ -71,6 +72,20 @@ input {
   min-width: 0;
 }
 
+.icon-btn {
+  width: 2em;
+  aspect-ratio: 1;
+  padding: 0;
+  line-height: 1;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+button.icon-btn,
+button.icon-btn:hover {
+  border-color: transparent;
+}
+
 textarea, code, pre, .tool-input, .tool-diff, .tool-result, .fe-line-numbers {
   font-family: var(--mono);
   font-size: var(--mono-size);
diff --git a/wwwroot/css/chat.css b/wwwroot/css/chat.css
index fed5ae2..a8ba12f 100644
--- a/wwwroot/css/chat.css
+++ b/wwwroot/css/chat.css
@@ -242,13 +242,7 @@
   gap: var(--badge-spacing);
 }
 
-.input-area button {
-  width: 2em;
-  aspect-ratio: 1;
-  padding: 0;
-  line-height: 1;
-  overflow: hidden;
-}
+
 
 .input-area textarea {
   flex: 1;
@@ -441,12 +435,7 @@
   flex-shrink: 0;
 }
 
-.sp-close {
-  width: 2em;
-  aspect-ratio: 1;
-  padding: 0;
-  line-height: 1;
-}
+
 
 .sp-body {
   padding: var(--page-padding);
diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css
index 55e72f7..256f220 100644
--- a/wwwroot/css/dashboard.css
+++ b/wwwroot/css/dashboard.css
@@ -35,6 +35,7 @@
 
 .card.clickable:hover {
   border-color: var(--primary);
+  filter: var(--hover-filter);
 }
 
 .card-image {
diff --git a/wwwroot/css/form.css b/wwwroot/css/form.css
index 06cc769..5b86baf 100644
--- a/wwwroot/css/form.css
+++ b/wwwroot/css/form.css
@@ -48,9 +48,7 @@
   flex: 1;
 }
 
-.input-addon-btn {
-  flex-shrink: 0;
-}
+
 
 .form-actions {
   display: flex;
@@ -87,7 +85,7 @@
 .custom-command-item .remove-cmd-btn {
   margin-left: var(--badge-spacing);
   color: var(--dangerous);
-  border-color: var(--dangerous);
+  align-self: center;
 }
 
 .custom-command-item .remove-cmd-btn:hover {
diff --git a/wwwroot/css/theme.css b/wwwroot/css/theme.css
index 5de74c9..ddd8cc6 100644
--- a/wwwroot/css/theme.css
+++ b/wwwroot/css/theme.css
@@ -1,7 +1,7 @@
 :root {
   --text: #ddd;
   --text-accent: #fff;
-  --primary: #b41;
+  --primary: #a41;
   --secondary: #4a1;
   --dangerous: #f66;
   --warning: #fa0;
@@ -29,4 +29,5 @@
   --badge-spacing: .5em;
   --menu-item-padding: .5em .75em;
   --page-width: 900px;
+  --hover-filter: contrast(.9);
 }
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 0af9554..35f7db4 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -61,7 +61,7 @@
 <template id="tpl-session">
   <div class="page form-page">
     <header>
-      <button class="back-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
+      <button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
       <h1 id="sessionPageTitle">Neue Session</h1>
       <button id="openChatBtn" disabled>Chat öffnen</button>
     </header>
@@ -82,7 +82,7 @@
         <label>Workspace</label>
         <div class="input-with-btn">
           <input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
-          <button type="button" id="sessionWorkspaceBrowse" class="input-addon-btn"><i class="fa fa-folder"></i></button>
+          <button type="button" id="sessionWorkspaceBrowse" class="icon-btn"><i class="fa fa-folder"></i></button>
         </div>
         <label>Kontext</label>
         <textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
@@ -102,7 +102,7 @@
 <template id="tpl-agent">
   <div class="page form-page">
     <header>
-      <button class="back-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
+      <button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
       <h1 id="agentPageTitle">Neuer Agent</h1>
     </header>
     <div class="page-content">
@@ -143,11 +143,11 @@
 <template id="tpl-chat">
   <div class="page chat-page">
     <header>
-      <button class="back-btn" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
+      <button class="back-btn icon-btn" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
       <h1 id="sessionTitle">-</h1>
       <div class="custom-cmd-bar" id="customCmdBar"></div>
       <div class="header-menu">
-        <button class="header-menu-trigger" id="chatMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
+        <button class="header-menu-trigger icon-btn" id="chatMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
         <div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
           <button class="header-menu-item" id="systemPromptBtn">System-Prompt anzeigen</button>
           <button class="header-menu-item" id="archiveBtn">Archivieren</button>
@@ -162,10 +162,10 @@
       <div id="refPreview" class="ref-preview" hidden></div>
       <div class="input-area">
         <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
-        <button id="fileBtn" class="file-btn" title="Datei anhängen"><i class="fa fa-paperclip"></i></button>
-        <button id="explorerBtn" class="file-btn" title="Workspace durchsuchen"><i class="fa fa-folder"></i></button>
+        <button id="fileBtn" class="icon-btn" title="Datei anhängen"><i class="fa fa-paperclip"></i></button>
+        <button id="explorerBtn" class="icon-btn" title="Workspace durchsuchen"><i class="fa fa-folder"></i></button>
         <textarea id="input" placeholder="Nachricht..." rows="1"></textarea>
-        <button id="send"><i class="fa fa-paper-plane"></i></button>
+        <button id="send" class="icon-btn"><i class="fa fa-paper-plane"></i></button>
       </div>
     </div>
   </div>
@@ -174,7 +174,7 @@
 <template id="tpl-settings">
   <div class="page settings-page">
     <header>
-      <button class="back-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
+      <button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
       <h1>Einstellungen</h1>
     </header>
     <div class="page-content placeholder">
diff --git a/wwwroot/js/file-explorer.js b/wwwroot/js/file-explorer.js
index 3c8bd96..2907e84 100644
--- a/wwwroot/js/file-explorer.js
+++ b/wwwroot/js/file-explorer.js
@@ -26,10 +26,10 @@ function openFileExplorer(opts = {}) {
   modal.innerHTML = `
     <div class="fe-header">
       <div class="fe-nav">
-        <button class="fe-btn" id="feBack" title="Zurück" disabled><i class="fa fa-arrow-left"></i></button>
+        <button class="fe-btn icon-btn" id="feBack" title="Zurück" disabled><i class="fa fa-arrow-left"></i></button>
         <span class="fe-path" id="fePath">/</span>
       </div>
-      <button class="fe-btn" id="feClose"><i class="fa fa-times"></i></button>
+      <button class="fe-btn icon-btn" id="feClose"><i class="fa fa-times"></i></button>
     </div>
     <div class="fe-body">
       <div class="fe-sidebar" id="feSidebar">
@@ -485,10 +485,10 @@ function openFolderBrowser(opts = {}) {
   modal.innerHTML = `
     <div class="fe-header">
       <div class="fe-nav">
-        <button class="fe-btn" id="feBack" title="Zurück" disabled><i class="fa fa-arrow-left"></i></button>
+        <button class="fe-btn icon-btn" id="feBack" title="Zurück" disabled><i class="fa fa-arrow-left"></i></button>
         <span class="fe-path" id="fePath">/</span>
       </div>
-      <button class="fe-btn" id="feClose"><i class="fa fa-times"></i></button>
+      <button class="fe-btn icon-btn" id="feClose"><i class="fa fa-times"></i></button>
     </div>
     <div class="fe-body">
       <div class="fe-sidebar fe-sidebar-full" id="feSidebar">
diff --git a/wwwroot/js/pages/session-page.js b/wwwroot/js/pages/session-page.js
index d8b0653..b89a52a 100644
--- a/wwwroot/js/pages/session-page.js
+++ b/wwwroot/js/pages/session-page.js
@@ -11,7 +11,7 @@ function _createCommandRow(container, name = '', command = '') {
       <input type="text" class="cmd-name" placeholder="Name (z.B. Deploy)" value="${_escAttr(name)}">
       <input type="text" class="cmd-command" placeholder="Befehl (z.B. ./deploy.sh)" value="${_escAttr(command)}">
     </div>
-    <button type="button" class="remove-cmd-btn"><i class="fa fa-times"></i></button>
+    <button type="button" class="remove-cmd-btn icon-btn"><i class="fa fa-times"></i></button>
   `;
   item.querySelector('.remove-cmd-btn').addEventListener('click', () => item.remove());
   container.appendChild(item);
diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js
index 33317c7..efd6926 100644
--- a/wwwroot/js/ui.js
+++ b/wwwroot/js/ui.js
@@ -427,7 +427,7 @@ async function showSystemPromptModal(sessionId) {
   title.textContent = 'System-Prompt';
   const closeBtn = document.createElement('button');
   closeBtn.innerHTML = '<i class="fa fa-times"></i>';
-  closeBtn.className = 'sp-close';
+  closeBtn.className = 'sp-close icon-btn';
   header.appendChild(title);
   header.appendChild(closeBtn);