FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-23 03:25:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve design

Browse Source
This commit is contained in:
denis0001-dev
2025-09-18 20:11:53 +03:00
Unverified
parent e77ba2421c
commit c5f976b4d6
8 changed files with 169 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ui/components/chat/ChatInputWrapper.tsx
+16 -10
View File
@@ -1,14 +1,18 @@
import { useState } from "react";
import { RichTextArea } from "../core/RichTextArea";
import type { Message } from "../../../core/types";
import Quote from "../core/Quote";
import AnimatedHeight from "../core/animations/AnimatedHeight";
interface ChatInputWrapperProps {
onSendMessage: (message: string) => void | ((message: string) => void);
onSendMessage: (message: string) => void;
replyTo?: Message | null;
replyToVisible: boolean;
onClearReply?: () => void;
onCloseReply?: () => void;
}
export function ChatInputWrapper({ onSendMessage, replyTo, onClearReply }: ChatInputWrapperProps) {
export function ChatInputWrapper({ onSendMessage, replyTo, replyToVisible, onClearReply, onCloseReply }: ChatInputWrapperProps) {
const [message, setMessage] = useState("");
const handleSubmit = async (e: React.FormEvent | Event) => {
@@ -23,15 +27,17 @@ export function ChatInputWrapper({ onSendMessage, replyTo, onClearReply }: ChatI
return (
<div className="chat-input-wrapper">
<form className="input-group" id="message-form" onSubmit={handleSubmit}>
{replyTo && (
<div className="reply-preview">
<div className="reply-content">
<span className="reply-username">{replyTo.username}</span>
<span className="reply-text">{replyTo.content}</span>
<AnimatedHeight visible={replyToVisible} onFinish={onCloseReply}>
{replyTo && (
<div className="reply-preview">
<Quote className="reply-content" background="surfaceContainer">
<span className="reply-username">{replyTo!.username}</span>
<span className="reply-text">{replyTo!.content}</span>
</Quote>
<mdui-button-icon icon="close" className="reply-cancel" onClick={onClearReply}></mdui-button-icon>
</div>
<mdui-button-icon icon="close" className="reply-cancel" onClick={onClearReply}></mdui-button-icon>
</div>
)}
)}
</AnimatedHeight>
<div className="chat-input">
<RichTextArea
className="message-input"
frontend/src/ui/components/chat/Message.tsx
+5 -6
View File
@@ -1,6 +1,7 @@
import { formatTime } from "../../../utils/utils";
import type { Message as MessageType } from "../../../core/types";
import defaultAvatar from "../../../resources/images/default-avatar.png";
import Quote from "../core/Quote";
interface MessageProps {
message: MessageType;
@@ -53,12 +54,10 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
{/* Add reply preview if this is a reply */}
{message.reply_to && (
<div className="message-reply">
<div className="reply-content">
<span className="reply-username">{message.reply_to.username}</span>
<span className="reply-text">{message.reply_to.content}</span>
</div>
</div>
<Quote className="message-reply">
<span className="reply-username">{message.reply_to.username}</span>
<span className="reply-text">{message.reply_to.content}</span>
</Quote>
)}
<div className="message-content">
frontend/src/ui/components/chat/MessagePanelRenderer.tsx
+11 -2
View File
@@ -17,6 +17,13 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
const [switchOut, setSwitchOut] = useState(false);
const messagesEndRef = useRef<HTMLDivElement>(null);
const [replyTo, setReplyTo] = useState<Message | null>(null);
const [replyToVisible, setReplyToVisible] = useState(Boolean(replyTo));
useEffect(() => {
if (replyTo) {
setReplyToVisible(true);
}
}, [replyTo]);
// Handle panel state changes
useEffect(() => {
@@ -144,8 +151,10 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
panel.handleSendMessage(text, replyTo?.id);
setReplyTo(null);
}}
replyTo={replyTo}
onClearReply={() => setReplyTo(null)}
replyTo={replyTo}
replyToVisible={replyToVisible}
onClearReply={() => setReplyToVisible(false)}
onCloseReply={() => setReplyTo(null)}
/>
</div>
</div>