From 79492c95292ca20564dbd89a712578705d1591d1 Mon Sep 17 00:00:00 2001
From: dwrz <dwrz@dwrz.net>
Date: Fri, 1 May 2026 01:14:18 +0000
Subject: [PATCH] Refactor message icons

---
 internal/service/static/main.css              | 32 +++----
 .../service/templates/static/templates.gohtml | 86 +++++++++----------
 2 files changed, 56 insertions(+), 62 deletions(-)

diff --git a/internal/service/static/main.css b/internal/service/static/main.css
index 3525856..6555408 100644
--- a/internal/service/static/main.css
+++ b/internal/service/static/main.css
@@ -477,11 +477,12 @@ body {
 /* ==================== */
 
 .message {
-  display: flex;
   max-width: 100%;
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .message--assistant .message__icon {
@@ -496,10 +497,6 @@ body {
   border-color: var(--color-error);
 }
 
-.message--error .message__icon {
-  border-color: var(--color-error);
-}
-
 .message--user .message__icon {
   color: var(--color-green);
 }
@@ -539,7 +536,8 @@ body {
 
 .message__actions {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
   gap: 0.125rem;
   padding: 0.125rem 0.25rem;
   border-top: 1px dotted var(--color-border-light);
@@ -550,9 +548,13 @@ body {
   display: none;
 }
 
+.message__actions-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
 .message__body {
-  flex: 1;
-  min-width: 0;
   display: flex;
   flex-direction: column;
 }
@@ -600,20 +602,12 @@ body {
 }
 
 .message__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--s-2);
-  border-right: var(--border-width) solid var(--color-border);
-  background: var(--color-bg);
+  width: var(--action-icon-size);
+  height: var(--action-icon-size);
+  flex-shrink: 0;
   color: var(--color-text-muted);
 }
 
-.message__icon svg {
-  width: var(--icon-size);
-  height: var(--icon-size);
-}
-
 /* ==================== */
 /* Animations           */
 /* ==================== */
diff --git a/internal/service/templates/static/templates.gohtml b/internal/service/templates/static/templates.gohtml
index 3e98a76..2eb2f4a 100644
--- a/internal/service/templates/static/templates.gohtml
+++ b/internal/service/templates/static/templates.gohtml
@@ -1,29 +1,29 @@
 {{ define "templates" }}
   <template id="tpl-user-message">
     <div class="message message--user">
-      <div class="message__icon" aria-hidden="true">
-        <svg class="icon"><use href="/static/icons.svg#user"></use></svg>
-      </div>
       <div class="message__body">
         <div class="message__content"></div>
         <div class="message__actions">
-          <button
-            type="button"
-            class="message__action-btn"
-            data-action="inspect"
-            aria-label="Show details"
-            aria-expanded="false"
-          >
-            <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
-          </button>
-          <button
-            type="button"
-            class="message__action-btn"
-            data-action="copy"
-            aria-label="Copy to clipboard"
-          >
-            <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
-          </button>
+          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#user"></use></svg>
+          <div class="message__actions-buttons">
+            <button
+              type="button"
+              class="message__action-btn"
+              data-action="inspect"
+              aria-label="Show details"
+              aria-expanded="false"
+            >
+              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
+            </button>
+            <button
+              type="button"
+              class="message__action-btn"
+              data-action="copy"
+              aria-label="Copy to clipboard"
+            >
+              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
+            </button>
+          </div>
         </div>
         <div class="message__debug">
           <dl class="message__debug-list"></dl>
@@ -34,29 +34,29 @@
 
   <template id="tpl-assistant-message">
     <div class="message message--assistant">
-      <div class="message__icon" aria-hidden="true">
-        <svg class="icon"><use href="/static/icons.svg#assistant"></use></svg>
-      </div>
       <div class="message__body">
         <div class="message__content"></div>
         <div class="message__actions">
-          <button
-            type="button"
-            class="message__action-btn"
-            data-action="inspect"
-            aria-label="Show details"
-            aria-expanded="false"
-          >
-            <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
-          </button>
-          <button
-            type="button"
-            class="message__action-btn"
-            data-action="copy"
-            aria-label="Copy to clipboard"
-          >
-            <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
-          </button>
+          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
+          <div class="message__actions-buttons">
+            <button
+              type="button"
+              class="message__action-btn"
+              data-action="inspect"
+              aria-label="Show details"
+              aria-expanded="false"
+            >
+              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
+            </button>
+            <button
+              type="button"
+              class="message__action-btn"
+              data-action="copy"
+              aria-label="Copy to clipboard"
+            >
+              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
+            </button>
+          </div>
         </div>
         <div class="message__debug">
           <dl class="message__debug-list"></dl>
@@ -67,11 +67,11 @@
 
   <template id="tpl-error-message">
     <div class="message message--error message--assistant">
-      <div class="message__icon" aria-hidden="true">
-        <svg class="icon"><use href="/static/icons.svg#assistant"></use></svg>
-      </div>
       <div class="message__body">
         <div class="message__content"></div>
+        <div class="message__actions">
+          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
+        </div>
       </div>
     </div>
   </template>