From f7dd0176c7e3f9e25ebab73fa7c14903e349049d Mon Sep 17 00:00:00 2001
From: Pabloader <pabloader@pabloader.ru>
Date: Thu, 9 Apr 2026 14:26:23 +0000
Subject: [PATCH] Send icons

---
 .../assets/chat-sidebar.module.css            | 22 ++++++++++++++-----
 .../storywriter/components/chat-sidebar.tsx   |  9 ++++----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/games/storywriter/assets/chat-sidebar.module.css b/src/games/storywriter/assets/chat-sidebar.module.css
index e650a0b..e9514d7 100644
--- a/src/games/storywriter/assets/chat-sidebar.module.css
+++ b/src/games/storywriter/assets/chat-sidebar.module.css
@@ -51,6 +51,12 @@
     opacity: 1;
 }
 
+@media (max-width: 1000px) {
+    .messageActions {
+        opacity: 1;
+    }
+}
+
 .iconButton {
     display: flex;
     align-items: center;
@@ -308,15 +314,17 @@
 }
 
 .sendButton {
-    padding: 5px 14px;
-    font-size: 13px;
-    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
     color: var(--bg);
     background: var(--accent);
     border: none;
     border-radius: 4px;
     cursor: pointer;
     height: 28px;
+    width: 28px;
 
     &:hover:not(:disabled) {
         background: var(--accent-alt);
@@ -329,15 +337,17 @@
 }
 
 .stopButton {
-    padding: 5px 14px;
-    font-size: 13px;
-    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
     color: var(--bg);
     background: var(--error, #f44336);
     border: none;
     border-radius: 4px;
     cursor: pointer;
     height: 28px;
+    width: 28px;
 
     &:hover {
         background: #d32f2f;
diff --git a/src/games/storywriter/components/chat-sidebar.tsx b/src/games/storywriter/components/chat-sidebar.tsx
index a8f757f..5f96080 100644
--- a/src/games/storywriter/components/chat-sidebar.tsx
+++ b/src/games/storywriter/components/chat-sidebar.tsx
@@ -3,7 +3,7 @@ import { highlight } from "@common/highlight";
 import { useInputState } from "@common/hooks/useInputState";
 import { useMediaQuery } from "@common/hooks/useMediaQuery";
 import clsx from "clsx";
-import { Check, ChevronsRight, Edit2, GitFork, RefreshCw, Sparkles, Trash2, X } from "lucide-preact";
+import { Check, ChevronsRight, Edit2, GitFork, RefreshCw, SendHorizonal, Sparkles, Square, Trash2, X } from "lucide-preact";
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { MOBILE_BREAKPOINT } from '../assets/breakpoints';
 import styles from '../assets/chat-sidebar.module.css';
@@ -584,8 +584,8 @@ export const ChatPanel = ({ visible }: { visible: boolean }) => {
                             </div>
                             <div class={styles.inputFooterRight}>
                                 {isLoading ? (
-                                    <button class={styles.stopButton} onClick={handleStopGeneration}>
-                                        Stop
+                                    <button class={styles.stopButton} onClick={handleStopGeneration} title="Stop">
+                                        <Square size={14} />
                                     </button>
                                 ) : (
                                     <>
@@ -621,8 +621,9 @@ export const ChatPanel = ({ visible }: { visible: boolean }) => {
                                             class={styles.sendButton}
                                             onClick={handleSendMessage}
                                             disabled={isDisabled}
+                                            title="Send"
                                         >
-                                            Send
+                                            <SendHorizonal size={14} />
                                         </button>
                                     </>
                                 )}