From 5cf6af925d6e0c191dc95891a39d72be43f5e318 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Fri, 19 Sep 2025 16:54:48 +0300
Subject: [PATCH] Improve quote styling

---
 frontend/src/resources/css/_chat.scss         | 56 +++++++++++--------
 .../src/resources/css/common/_components.scss |  4 ++
 .../ui/components/chat/ChatInputWrapper.tsx   |  5 +-
 frontend/src/ui/components/chat/Message.tsx   |  2 +-
 4 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/frontend/src/resources/css/_chat.scss b/frontend/src/resources/css/_chat.scss
index 0731741..2eb1864 100644
--- a/frontend/src/resources/css/_chat.scss
+++ b/frontend/src/resources/css/_chat.scss
@@ -128,6 +128,23 @@
                 }
             }
 
+            .quote.contextual-content > .quote-inner {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                .reply-username {
+                    font-weight: 600;
+                    color: $color-dark-on-surface;
+                    font-size: 0.85rem;
+                }
+
+                .reply-text {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
             .chat-messages {
                 flex: 1;
                 padding: 1rem;
@@ -192,30 +209,9 @@
                             white-space: pre-wrap;
                         }
 
-                        .quote.message-reply {
+                        .quote.reply-preview {
                             user-select: none;
                             margin-bottom: 10px;
-
-                            .quote-inner {
-                                display: flex;
-                                flex-direction: column;
-                                gap: 0.2rem;
-
-                                .reply-username {
-                                    font-weight: 600;
-                                    font-size: 0.8rem;
-                                    color: $color-dark-primary;
-                                }
-
-                                .reply-text {
-                                    font-size: 0.85rem;
-                                    color: $color-dark-on-surface-variant;
-                                    overflow: hidden;
-                                    text-overflow: ellipsis;
-                                    white-space: nowrap;
-                                    max-width: 200px;
-                                }
-                            }
                         }
 
                         .message-time {
@@ -289,6 +285,22 @@
                     border-radius: 30px;
                     flex-direction: column;
 
+                    .contextual-preview {
+                        padding: 12px 16px 0 16px;
+                        display: flex;
+                        align-items: flex-start;
+                        gap: 16px;
+        
+                        mdui-icon {
+                            align-self: center;
+                            box-sizing: content-box;
+                        }
+        
+                        .reply-cancel {
+                            margin-left: auto;
+                        }
+                    }
+
                     .chat-input {
                         flex: 1;
                         display: flex;
diff --git a/frontend/src/resources/css/common/_components.scss b/frontend/src/resources/css/common/_components.scss
index d2581f4..8bf680e 100644
--- a/frontend/src/resources/css/common/_components.scss
+++ b/frontend/src/resources/css/common/_components.scss
@@ -131,6 +131,10 @@ button, input {
     border-radius: 8px;
     overflow: hidden;
 
+    color: $color-dark-on-surface-variant;
+    font-size: 0.9rem;
+    line-height: 1.4;
+
     &.bg-surfaceContainer {
         background-color: $color-dark-secondary-container;
 
diff --git a/frontend/src/ui/components/chat/ChatInputWrapper.tsx b/frontend/src/ui/components/chat/ChatInputWrapper.tsx
index 065cdbf..0f5ad47 100644
--- a/frontend/src/ui/components/chat/ChatInputWrapper.tsx
+++ b/frontend/src/ui/components/chat/ChatInputWrapper.tsx
@@ -29,8 +29,9 @@ export function ChatInputWrapper({ onSendMessage, replyTo, replyToVisible, onCle
             <form className="input-group" id="message-form" onSubmit={handleSubmit}>
                 <AnimatedHeight visible={replyToVisible} onFinish={onCloseReply}>
                     {replyTo && (
-                        <div className="reply-preview">
-                            <Quote className="reply-content" background="surfaceContainer">
+                        <div className="reply-preview contextual-preview">
+                            <mdui-icon name="reply" />
+                            <Quote className="reply-content contextual-content" background="surfaceContainer">
                                 <span className="reply-username">{replyTo!.username}</span>
                                 <span className="reply-text">{replyTo!.content}</span>
                             </Quote>
diff --git a/frontend/src/ui/components/chat/Message.tsx b/frontend/src/ui/components/chat/Message.tsx
index 954157f..7002121 100644
--- a/frontend/src/ui/components/chat/Message.tsx
+++ b/frontend/src/ui/components/chat/Message.tsx
@@ -54,7 +54,7 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
 
                 {/* Add reply preview if this is a reply */}
                 {message.reply_to && (
-                    <Quote className="message-reply">
+                    <Quote className="reply-preview contextual-content">
                         <span className="reply-username">{message.reply_to.username}</span>
                         <span className="reply-text">{message.reply_to.content}</span>
                     </Quote>