From 878acd99339ca6e6e83eea5997ad473e64dedfb4 Mon Sep 17 00:00:00 2001
From: Jeuner <62662523+Jeuners@users.noreply.github.com>
Date: Fri, 28 Aug 2026 13:52:42 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20Mic=20und=20Anh=C3=A4nge=20rechts=20neben?=
 =?UTF-8?q?=20Senden,=20einheitliche=20Icon-Buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Composer-Reihenfolge: Eingabe → Senden → Mikro → Anhängen
- .btn-icon-Basisklasse: gleiche Höhe wie Senden, Hover-Feedback,
  Active-Hub, Fokus-Ring (Tastatur), dezent gefüllter Send-Button
---
 web/src/components/Composer.tsx | 70 ++++++++++++++++-----------------
 web/src/styles.css              | 47 ++++++++++++++++------
 2 files changed, 69 insertions(+), 48 deletions(-)

diff --git a/web/src/components/Composer.tsx b/web/src/components/Composer.tsx
index a3c3661..a9be94f 100644
--- a/web/src/components/Composer.tsx
+++ b/web/src/components/Composer.tsx
@@ -253,41 +253,6 @@ export function Composer({
       )}
 
       <div className="composer-row">
-        <button
-          className={`btn-mic ${recording ? "recording" : ""} ${transcribing ? "transcribing" : ""}`}
-          onClick={onMicToggle}
-          title={
-            recording
-              ? "Aufnahme stoppen & senden"
-              : transcribing
-                ? "Transkribiere …"
-                : "Sprachnachricht aufnehmen"
-          }
-          disabled={transcribing || disabled}
-        >
-          {recording ? "●" : transcribing ? "…" : "🎙"}
-        </button>
-
-        <button
-          className="btn-attach"
-          onClick={() => fileRef.current?.click()}
-          disabled={disabled}
-          title="Bild oder Textdatei anhängen (auch per Einfügen oder Drag & Drop)"
-        >
-          📎
-        </button>
-        <input
-          ref={fileRef}
-          type="file"
-          accept={[...ACCEPTED, ...TEXT_EXTS, ...PDF_EXTS].join(",")}
-          multiple
-          hidden
-          onChange={(e) => {
-            void addFiles([...(e.target.files ?? [])]);
-            e.target.value = "";
-          }}
-        />
-
         <textarea
           ref={ref}
           value={value}
@@ -333,6 +298,41 @@ export function Composer({
             Senden ▸
           </button>
         )}
+
+        <button
+          className={`btn-icon btn-mic ${recording ? "recording" : ""} ${transcribing ? "transcribing" : ""}`}
+          onClick={onMicToggle}
+          title={
+            recording
+              ? "Aufnahme stoppen & senden"
+              : transcribing
+                ? "Transkribiere …"
+                : "Sprachnachricht aufnehmen"
+          }
+          disabled={transcribing || disabled}
+        >
+          {recording ? "●" : transcribing ? "…" : "🎙"}
+        </button>
+
+        <button
+          className="btn-icon btn-attach"
+          onClick={() => fileRef.current?.click()}
+          disabled={disabled}
+          title="Bild oder Textdatei anhängen (auch per Einfügen oder Drag & Drop)"
+        >
+          📎
+        </button>
+        <input
+          ref={fileRef}
+          type="file"
+          accept={[...ACCEPTED, ...TEXT_EXTS, ...PDF_EXTS].join(",")}
+          multiple
+          hidden
+          onChange={(e) => {
+            void addFiles([...(e.target.files ?? [])]);
+            e.target.value = "";
+          }}
+        />
       </div>
     </div>
   );
diff --git a/web/src/styles.css b/web/src/styles.css
index 8d792f8..bdd1fbf 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -412,15 +412,9 @@ body {
 }
 
 .btn-mic {
-  width: 46px;
   flex-shrink: 0;
-  font-size: 18px;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  cursor: pointer;
+  font-size: 17px;
   color: var(--text-dim);
-  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
 }
 
 .btn-mic:hover:not(:disabled) {
@@ -509,6 +503,7 @@ body {
 .btn-send {
   min-width: 96px;
   align-self: stretch;
+  background: rgba(61, 220, 132, 0.12);
 }
 
 .btn-send:disabled {
@@ -517,7 +512,7 @@ body {
 }
 
 .btn-send:not(:disabled):hover {
-  background: rgba(61, 220, 132, 0.1);
+  background: rgba(61, 220, 132, 0.22);
 }
 
 .btn-send.stop {
@@ -602,19 +597,45 @@ body {
   color: #f85149;
 }
 
-.btn-attach {
+.btn-icon {
   flex: 0 0 auto;
+  align-self: stretch;
+  width: 46px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 17px;
+  line-height: 1;
   background: transparent;
   border: 1px solid var(--border, #30363d);
   border-radius: 8px;
-  padding: 8px 10px;
   cursor: pointer;
-  color: inherit;
+  color: var(--text-dim);
+  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
 }
 
-.btn-attach:disabled {
+.btn-icon:hover:not(:disabled) {
+  background: rgba(61, 220, 132, 0.08);
+  transform: translateY(-1px);
+}
+
+.btn-icon:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-icon:disabled {
   opacity: 0.4;
-  cursor: default;
+  cursor: not-allowed;
+}
+
+.btn-icon:focus-visible,
+.btn-send:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.btn-attach {
+  color: var(--text-dim);
 }
 
 .msg-images {