Restructure

frontend/src/pages/chat/ui/right/ChatInputWrapper.tsx

@@ -0,0 +1,224 @@
+import { useState, useEffect, useRef } from "react";
+import { MaterialDialog } from "../../../../core/components/Dialog";
+import { RichTextArea } from "../../../../core/components/RichTextArea";
+import type { Message } from "../../../../core/types";
+import Quote from "../../../../core/components/Quote";
+import AnimatedHeight from "../../../../core/components/animations/AnimatedHeight";
+import { useImmer } from "use-immer";
+import { EmojiMenu } from "./EmojiMenu";
+
+interface ChatInputWrapperProps {
+    onSendMessage: (message: string, files: File[]) => void;
+    onSaveEdit?: (content: string) => void;
+    replyTo?: Message | null;
+    replyToVisible: boolean;
+    onClearReply?: () => void;
+    onCloseReply?: () => void;
+    editingMessage?: Message | null;
+    editVisible?: boolean;
+    onClearEdit?: () => void;
+    onCloseEdit?: () => void;
+    onProvideFileAdder?: (adder: (files: File[]) => void) => void;
+    messagePanelRef?: React.RefObject<HTMLDivElement | null>;
+}
+
+export function ChatInputWrapper(
+    { 
+        onSendMessage, 
+        onSaveEdit, 
+        replyTo, 
+        replyToVisible, 
+        onClearReply,
+        onCloseReply, 
+        editingMessage, 
+        editVisible = false, 
+        onClearEdit, 
+        onCloseEdit,
+        onProvideFileAdder,
+        messagePanelRef
+    }: ChatInputWrapperProps
+) {
+    const [message, setMessage] = useState("");
+    const [selectedFiles, setSelectedFiles] = useImmer<File[]>([]);
+    const [attachmentsVisible, setAttachmentsVisible] = useState(false);
+    const [errorOpen, setErrorOpen] = useState(false);
+    const [emojiMenuOpen, setEmojiMenuOpen] = useState(false);
+    const [emojiMenuPosition, setEmojiMenuPosition] = useState({ x: 0, y: 0 });
+    const chatInputWrapperRef = useRef<HTMLDivElement>(null);
+
+    // Expose a way for parent to programmatically add files
+    useEffect(() => {
+        if (onProvideFileAdder) {
+            const addFiles = (files: File[]) => {
+                if (!files || files.length === 0) return;
+                setSelectedFiles(draft => { draft.push(...files) });
+            };
+            onProvideFileAdder(addFiles);
+        }
+    }, [onProvideFileAdder]);
+
+    // When entering edit mode, preload the message content
+    useEffect(() => {
+        setMessage(editingMessage ? editingMessage.content || "" : "");
+    }, [editingMessage]);
+
+    useEffect(() => {
+        setAttachmentsVisible(selectedFiles.length > 0);
+    }, [selectedFiles]);
+
+    function handleEmojiButtonClick(e: React.MouseEvent<HTMLButtonElement>) {
+        e.stopPropagation();
+
+        if (!emojiMenuOpen) {
+            if (chatInputWrapperRef.current && messagePanelRef?.current) {
+                const inputRect = chatInputWrapperRef.current.getBoundingClientRect();
+                const panelRect = messagePanelRef.current.getBoundingClientRect();
+                
+                // Position menu 10px from message panel edge and 10px above the chat input
+                // The animation will start 30px below this position
+                setEmojiMenuPosition({
+                    x: panelRect.left + 10, // 10px from message panel edge
+                    y: window.innerHeight - inputRect.top + 10 // 10px above the top of chat input
+                });
+                setEmojiMenuOpen(true);
+            }
+        } else {
+            setEmojiMenuOpen(false);
+        }
+    };
+
+    function handleEmojiSelect(emoji: string) {
+        setMessage(prev => prev + emoji);
+    };
+
+    async function handleSubmit(e: React.FormEvent | Event) {
+        e.preventDefault();
+        const hasText = Boolean(message.trim());
+        const hasFiles = selectedFiles.length > 0;
+        if (hasText || hasFiles) {
+            const totalSize = selectedFiles.reduce((acc, f) => acc + f.size, 0);
+            const limit = 4 * 1024 * 1024 * 1024; // 4GB
+            if (totalSize > limit) {
+                setErrorOpen(true);
+                return;
+            }
+            if (editingMessage && onSaveEdit) {
+                onSaveEdit(message);
+                setMessage("");
+                if (onClearEdit) onClearEdit();
+            } else {
+                onSendMessage(message, selectedFiles);
+                setMessage("");
+                setAttachmentsVisible(false);
+                if (onClearReply) onClearReply();
+            }
+        }
+    };
+
+    function handleAttachClick() {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.multiple = true;
+        input.addEventListener("change", () => {
+            setSelectedFiles(draft => { draft.push(...Array.from(input.files || [])) });
+        });
+        input.click();
+    }
+
+    return (
+        <div className="chat-input-wrapper" ref={chatInputWrapperRef}>
+            <form className="input-group" id="message-form" onSubmit={handleSubmit}>
+                <AnimatedHeight visible={editVisible} onFinish={onCloseEdit}>
+                    {editingMessage && (
+                        <div className="reply-preview contextual-preview">
+                            <mdui-icon name="edit" />
+                            <Quote className="reply-content contextual-content" background="surfaceContainer">
+                                <span className="reply-username">{editingMessage!.username}</span>
+                                <span className="reply-text">{editingMessage!.content}</span>
+                            </Quote>
+                            <mdui-button-icon icon="close" className="reply-cancel" onClick={onClearEdit}></mdui-button-icon>
+                        </div>
+                    )}
+                </AnimatedHeight>
+                <AnimatedHeight visible={replyToVisible} onFinish={onCloseReply}>
+                    {replyTo && (
+                        <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>
+                            <mdui-button-icon icon="close" className="reply-cancel" onClick={onClearReply}></mdui-button-icon>
+                        </div>
+                    )}
+                </AnimatedHeight>
+                <AnimatedHeight visible={attachmentsVisible} onFinish={() => setSelectedFiles([])}>
+                    {selectedFiles.length > 0 && (
+                        <div className="attachments-preview contextual-preview">
+                            <mdui-icon name="attach_file" />
+                            <div className="attachments-chips">
+                                {selectedFiles.map((file, i) => (
+                                    <mdui-chip
+                                        key={i}
+                                        variant="input"
+                                        end-icon="close"
+                                        title={`${file.name} (${Math.round(file.size/1024/1024)} MB)`}
+                                        onClick={() => {
+                                            if (selectedFiles.length == 1) {
+                                                setAttachmentsVisible(false);
+                                            } else {
+                                                setSelectedFiles(draft => { draft.splice(i) })
+                                            }
+                                        }}
+                                    >
+                                        <mdui-icon slot="icon" name="attach_file"></mdui-icon>
+                                        <span className="name">{file.name}</span>
+                                    </mdui-chip>
+                                ))}
+                            </div>
+                            <mdui-button-icon icon="close" className="reply-cancel" onClick={() => setAttachmentsVisible(false)}></mdui-button-icon>
+                        </div>
+                    )}
+                </AnimatedHeight>
+                <div className="chat-input">
+                    <div className="left-buttons">
+                        <mdui-button-icon
+                            icon="mood"
+                            onClick={handleEmojiButtonClick}
+                            onMouseDown={e => e.stopPropagation()}
+                            onMouseUp={e => e.stopPropagation()}
+                            className="emoji-btn" />
+                    </div>
+                    <RichTextArea
+                        className="message-input" 
+                        id="message-input" 
+                        placeholder="Напишите сообщение..." 
+                        autoComplete="off"
+                        text={message}
+                        rows={1}
+                        onTextChange={(value) => setMessage(value)}
+                        onEnter={handleSubmit} />
+                    <div className="buttons">
+                        <mdui-button-icon icon="attach_file" onClick={handleAttachClick} className="attach-btn"></mdui-button-icon>
+                        <button type="submit" className="send-btn">
+                            <span className="material-symbols filled">{editingMessage ? "check" : "send"}</span>
+                        </button>
+                    </div>
+                </div>
+            </form>
+            <MaterialDialog open={errorOpen} onOpenChange={setErrorOpen} close-on-overlay-click close-on-esc>
+                <div slot="headline">Ошибка</div>
+                <div>Общий размер вложений превышает 4 ГБ.</div>
+                <mdui-button slot="action" onClick={() => setErrorOpen(false)}>Закрыть</mdui-button>
+            </MaterialDialog>
+            
+            <EmojiMenu
+                isOpen={emojiMenuOpen}
+                onClose={() => setEmojiMenuOpen(false)}
+                onEmojiSelect={handleEmojiSelect}
+                position={emojiMenuPosition}
+                mode="standalone"
+            />
+        </div>
+    );
+}

frontend/src/pages/chat/ui/right/ChatMainHeader.tsx

@@ -0,0 +1,21 @@
+import { useAppState } from "../../state";
+import defaultAvatar from "../../../resources/images/default-avatar.png";
+
+export function ChatMainHeader() {
+    const { currentChat } = useAppState().chat;
+
+    return (
+        <div className="chat-header">
+            <img src={defaultAvatar} alt="Avatar" className="chat-header-avatar" />
+            <div className="chat-header-info">
+                <div className="info-chat">
+                    <h4 id="chat-name">{currentChat}</h4>
+                    <p>
+                        <span className="online-status"></span>
+                        Онлайн
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/pages/chat/ui/right/ChatMessages.tsx

@@ -0,0 +1,207 @@
+import { Message } from "./Message";
+import { useAppState } from "../../state";
+import type { Message as MessageType } from "../../../../core/types";
+import type { UserProfile } from "../../../../core/types";
+import { UserProfileDialog } from "./UserProfileDialog";
+import { MessageContextMenu, type ContextMenuState } from "./MessageContextMenu";
+import { fetchUserProfile } from "../../../../core/api/profileApi";
+import { useEffect, useState, type ReactNode } from "react";
+import { delay } from "../../../../utils/utils";
+import { MaterialDialog } from "../../../../core/components/Dialog";
+import { request } from "../../../../core/websocket";
+import type { AddReactionRequest, AddDmReactionRequest } from "../../../../core/types";
+
+interface ChatMessagesProps {
+    messages?: MessageType[];
+    isDm?: boolean;
+    children?: ReactNode;
+    onReplySelect?: (message: MessageType) => void;
+    onEditSelect?: (message: MessageType) => void;
+    onDelete?: (id: number) => void;
+    onRetryMessage?: (messageId: number) => void;
+    dmRecipientPublicKey?: string;
+}
+
+export function ChatMessages({ messages = [], children, isDm = false, onReplySelect, onEditSelect, onDelete, onRetryMessage, dmRecipientPublicKey }: ChatMessagesProps) {
+    const { user } = useAppState();
+    
+    // Use prop messages (panels provide their own messages)
+    const [profileDialogOpen, setProfileDialogOpen] = useState(false);
+    const [selectedUserProfile, setSelectedUserProfile] = useState<UserProfile | null>(null);
+    const [isLoadingProfile, setIsLoadingProfile] = useState(false);
+    
+    // Context menu state
+    const [contextMenu, setContextMenu] = useState<ContextMenuState>({
+        isOpen: false,
+        message: null,
+        position: { x: 0, y: 0 }
+    });
+
+    // Delete dialog
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [toBeDeleted, setToBeDeleted] = useState<{ id: number; isDm: boolean } | null>(null);
+
+
+    useEffect(() => {
+        if (!deleteDialogOpen) {
+            setToBeDeleted(null);
+        }
+    }, [deleteDialogOpen]);
+
+    async function handleProfileClick(username: string) {
+        if (!user.authToken) return;
+        
+        setIsLoadingProfile(true);
+        try {
+            const profile = await fetchUserProfile(user.authToken, username);
+            if (profile) {
+                setSelectedUserProfile(profile);
+                setProfileDialogOpen(true);
+            }
+        } catch (error) {
+            console.error("Failed to fetch user profile:", error);
+        } finally {
+            setIsLoadingProfile(false);
+        }
+    };
+
+    function handleContextMenu(e: React.MouseEvent, message: MessageType) {
+        e.preventDefault();
+        setContextMenu({
+            isOpen: true,
+            message,
+            position: { x: e.clientX, y: e.clientY }
+        });
+    };
+
+    function handleContextMenuOpenChange(isOpen: boolean) {
+        setContextMenu(prev => ({
+            ...prev,
+            isOpen
+        }));
+    };
+
+    function handleEdit(message: MessageType) {
+        if (onEditSelect) onEditSelect(message);
+    };
+
+    function handleReply(message: MessageType) {
+        if (onReplySelect) onReplySelect(message);
+    };
+
+    async function confirmDelete() {
+        if (!toBeDeleted || !user.authToken) return;
+        try {
+            onDelete?.(toBeDeleted.id);
+        } catch (error) {
+            console.error("Failed to delete message:", error);
+        }
+        setDeleteDialogOpen(false);
+    }
+
+    async function handleDelete(message: MessageType) {
+        setToBeDeleted({ id: message.id, isDm });
+        setDeleteDialogOpen(true);
+    }
+
+    function handleRetry(message: MessageType) {
+        if (onRetryMessage) {
+            onRetryMessage(message.id);
+        }
+    }
+
+    async function handleReactionClick(messageId: number, emoji: string) {
+        if (!user.authToken) return;
+        
+        try {
+            if (isDm) {
+                // For DM messages, we need to find the dm_envelope_id from the message
+                const message = messages.find(m => m.id === messageId);
+                const dmEnvelopeId = message?.runtimeData?.dmEnvelope?.id;
+                
+                if (dmEnvelopeId) {
+                    await request<AddDmReactionRequest["data"]>({
+                        type: "addDmReaction",
+                        credentials: { scheme: "Bearer", credentials: user.authToken },
+                        data: {
+                            dm_envelope_id: dmEnvelopeId,
+                            emoji: emoji
+                        }
+                    });
+                }
+            } else {
+                // For regular chat messages
+                await request<AddReactionRequest["data"]>({
+                    type: "addReaction",
+                    credentials: { scheme: "Bearer", credentials: user.authToken },
+                    data: {
+                        message_id: messageId,
+                        emoji: emoji
+                    }
+                });
+            }
+        } catch (error) {
+            console.error("Failed to add reaction:", error);
+        }
+    }
+
+
+
+    return (
+        <>
+            <div className="chat-messages" id="chat-messages">
+                {messages.map((message: MessageType) => (
+                    <Message
+                        key={message.id}
+                        message={message}
+                        isAuthor={message.username === user.currentUser?.username}
+                        onProfileClick={handleProfileClick}
+                        onContextMenu={handleContextMenu}
+                        onReactionClick={handleReactionClick}
+                        isLoadingProfile={isLoadingProfile}
+                        isDm={isDm}
+                        dmRecipientPublicKey={dmRecipientPublicKey} />
+                ))}
+                {children}
+            </div>
+            
+            <UserProfileDialog
+                isOpen={profileDialogOpen}
+                onOpenChange={async (value) => {
+                    setProfileDialogOpen(value);
+                    if (!value) {
+                        await delay(1000);
+                        setSelectedUserProfile(null);
+                    }
+                }}
+                userProfile={selectedUserProfile}
+            />
+
+            <MaterialDialog
+                headline="Удалить сообщение?"
+                open={deleteDialogOpen}
+                onOpenChange={setDeleteDialogOpen}>
+                <mdui-button slot="action" variant="tonal" onClick={() => setDeleteDialogOpen(false)}>Отменить</mdui-button>
+                <mdui-button slot="action" variant="filled" onClick={confirmDelete}>Удалить</mdui-button>
+            </MaterialDialog>
+            
+            {/* Context Menu */}
+            {contextMenu.message && (
+                <MessageContextMenu
+                    message={contextMenu.message}
+                    isAuthor={contextMenu.message.username === user.currentUser?.username}
+                    onEdit={handleEdit}
+                    onReply={handleReply}
+                    onDelete={handleDelete}
+                    onRetry={handleRetry}
+                    onReactionClick={handleReactionClick}
+                    position={contextMenu.position}
+                    isOpen={contextMenu.isOpen}
+                    onOpenChange={handleContextMenuOpenChange}
+                />
+            )}
+
+
+        </>
+    );
+}

frontend/src/pages/chat/ui/right/EmojiMenu.tsx

@@ -0,0 +1,193 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { EMOJI_CATEGORIES, getRecentEmojis, addRecentEmoji } from "./emojiData";
+import type { Size2D } from "../../../../core/types";
+
+interface BaseEmojiMenuProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onEmojiSelect: (emoji: string) => void;
+}
+
+interface StandaloneEmojiMenuProps extends BaseEmojiMenuProps {
+    position: Size2D;
+    mode: "standalone";
+}
+
+interface IntegratedEmojiMenuProps extends BaseEmojiMenuProps {
+    mode: "integrated";
+}
+
+type EmojiMenuProps = StandaloneEmojiMenuProps | IntegratedEmojiMenuProps;
+
+export function EmojiMenu(props: EmojiMenuProps) {
+    const { isOpen, onClose, onEmojiSelect, mode } = props;
+    const position = mode === "standalone" ? props.position : undefined;
+    const [activeCategory, setActiveCategory] = useState("recent");
+    const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const categoryRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+    const tabsRef = useRef<HTMLDivElement>(null);
+    const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+
+    useEffect(() => {
+        if (isOpen) {
+            setRecentEmojis(getRecentEmojis());
+        }
+    }, [isOpen]);
+
+    const handleScroll = useCallback(() => {
+        if (!scrollRef.current) return;
+        
+        // Find which category is currently visible
+        for (const [categoryName, element] of categoryRefs.current) {
+            if (element) {
+                const rect = element.getBoundingClientRect();
+                const containerRect = scrollRef.current.getBoundingClientRect();
+                
+                // Check if category header is in view
+                if (rect.top <= containerRect.top + 50 && rect.bottom > containerRect.top + 50) {
+                    if (activeCategory !== categoryName) {
+                        setActiveCategory(categoryName);
+                        scrollTabIntoView(categoryName);
+                    }
+                    break;
+                }
+            }
+        }
+    }, [activeCategory]);
+
+    function scrollToCategory(categoryName: string) {
+        const element = categoryRefs.current.get(categoryName);
+        if (element && scrollRef.current) {
+            element.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'start' 
+            });
+        }
+    }
+
+    function scrollTabIntoView(categoryName: string) {
+        const tabElement = tabRefs.current.get(categoryName);
+        if (tabElement && tabsRef.current) {
+            const tabsRect = tabsRef.current.getBoundingClientRect();
+            const tabRect = tabElement.getBoundingClientRect();
+            
+            // Check if tab is outside the visible area
+            if (tabRect.left < tabsRect.left || tabRect.right > tabsRect.right) {
+                tabElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'center'
+                });
+            }
+        }
+    }
+
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+                onClose();
+            }
+        }
+
+        function handleEscape(event: KeyboardEvent) {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        }
+
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            document.addEventListener("keydown", handleEscape);
+        }
+
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [isOpen, onClose]);
+
+    function handleEmojiClick(emoji: string) {
+        addRecentEmoji(emoji);
+        onEmojiSelect(emoji);
+        onClose();
+    };
+
+
+    return (
+        <div 
+            ref={menuRef}
+            className={`emoji-menu ${isOpen ? "open" : ""} ${mode}`}
+            style={mode === "standalone" && position ? {
+                position: "fixed",
+                left: position.x,
+                bottom: position.y,
+                zIndex: 1000,
+                pointerEvents: isOpen ? "auto" : "none"
+            } : {
+                pointerEvents: isOpen ? "auto" : "none"
+            }}
+        >
+            <div className="emoji-menu-header">
+            <div ref={tabsRef} className="emoji-category-tabs">
+                {EMOJI_CATEGORIES.map((category) => (
+                    <button
+                        key={category.name}
+                        ref={(el) => {
+                            if (el) tabRefs.current.set(category.name, el);
+                        }}
+                        className={`emoji-category-tab ${activeCategory === category.name ? "active" : ""}`}
+                        onClick={() => scrollToCategory(category.name)}
+                        title={category.name}
+                    >
+                        <span>{category.icon}</span>
+                    </button>
+                ))}
+            </div>
+            </div>
+            
+            <div 
+                ref={scrollRef}
+                className="emoji-grid"
+                onScroll={handleScroll}
+            >
+                {EMOJI_CATEGORIES.map((category) => {
+                    const emojis = category.name === "recent" ? recentEmojis : category.emojis;
+                    
+                    return (
+                        <div 
+                            key={category.name}
+                            ref={(el) => {
+                                if (el) categoryRefs.current.set(category.name, el);
+                            }}
+                            className="emoji-category-section"
+                        >
+                            <h3 className="emoji-category-title">
+                                {category.name.charAt(0).toUpperCase() + category.name.slice(1)}
+                            </h3>
+                            {emojis.length > 0 ? (
+                                <div className="emoji-category-grid">
+                                    {emojis.map((emoji, index) => (
+                                        <button
+                                            key={`${category.name}-${index}`}
+                                            className="emoji-item"
+                                            onClick={() => handleEmojiClick(emoji)}
+                                            title={emoji}
+                                        >
+                                            {emoji}
+                                        </button>
+                                    ))}
+                                </div>
+                            ) : (
+                                <div className="emoji-empty-state">
+                                    <span>No {category.name} emojis</span>
+                                </div>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

frontend/src/pages/chat/ui/right/Message.tsx

@@ -0,0 +1,555 @@
+import { formatTime, id } from "../../../../utils/utils";
+import type { Attachment, Message as MessageType, Reaction } from "../../../../core/types";
+import defaultAvatar from "../../../../images/default-avatar.png";
+import Quote from "../../../../core/components/Quote";
+import { parse } from "marked";
+import DOMPurify from "dompurify";
+import { useEffect, useState, useRef } from "react";
+import { getCurrentKeys } from "../../../../core/api/authApi";
+import { ecdhSharedSecret, deriveWrappingKey } from "../../../../utils/crypto/asymmetric";
+import { importAesGcmKey, aesGcmDecrypt } from "../../../../utils/crypto/symmetric";
+import { getAuthHeaders } from "../../../../core/api/authApi";
+import { useAppState } from "../../state";
+import { ub64 } from "../../../../utils/utils";
+import { useImmer } from "use-immer";
+import { createPortal } from "react-dom";
+
+interface MessageReactionsProps {
+    reactions?: Reaction[];
+    onReactionClick: (emoji: string) => void;
+    messageId?: number; // Add messageId to ensure unique keys
+}
+
+function Reactions({ reactions, onReactionClick, messageId }: MessageReactionsProps) {
+    const { user } = useAppState();
+    const [visibleReactions, setVisibleReactions] = useState<Reaction[]>([]);
+    const [animatingReactions, setAnimatingReactions] = useState<Set<string>>(new Set());
+    const [isVisible, setIsVisible] = useState(false);
+
+    // Handle reactions with animation
+    useEffect(() => {
+        if (!reactions || reactions.length === 0) {
+            // If we have visible reactions, animate them out
+            if (visibleReactions.length > 0) {
+                visibleReactions.forEach(reaction => {
+                    setAnimatingReactions(prev => new Set(prev).add(reaction.emoji));
+                });
+                // After animation completes, hide the component
+                setTimeout(() => {
+                    setVisibleReactions([]);
+                    setAnimatingReactions(new Set());
+                    setIsVisible(false);
+                }, 200);
+            } else {
+                // No visible reactions, hide immediately
+                setIsVisible(false);
+            }
+            return;
+        }
+
+        // Show the component when we have reactions
+        setIsVisible(true);
+
+        // Deduplicate reactions by emoji (safety measure)
+        const uniqueReactions = reactions.reduce((acc, reaction) => {
+            const existing = acc.find(r => r.emoji === reaction.emoji);
+            if (existing) {
+                // Keep the one with the higher count
+                if (reaction.count > existing.count) {
+                    acc[acc.indexOf(existing)] = reaction;
+                }
+            } else {
+                acc.push(reaction);
+            }
+            return acc;
+        }, [] as Reaction[]);
+
+
+        // Animate out removed reactions
+        visibleReactions.forEach(reaction => {
+            if (!uniqueReactions.some(r => r.emoji === reaction.emoji)) {
+                setAnimatingReactions(prev => new Set(prev).add(reaction.emoji));
+                setTimeout(() => {
+                    setVisibleReactions(prev => prev.filter(r => r.emoji !== reaction.emoji));
+                    setAnimatingReactions(prev => {
+                        const newSet = new Set(prev);
+                        newSet.delete(reaction.emoji);
+                        return newSet;
+                    });
+                }, 200);
+            }
+        });
+
+        // Update existing reactions and add new ones
+        setVisibleReactions(prev => {
+            const updated = [...prev];
+            
+            // Update existing reactions
+            uniqueReactions.forEach(reaction => {
+                const existingIndex = updated.findIndex(r => r.emoji === reaction.emoji);
+                if (existingIndex !== -1) {
+                    updated[existingIndex] = reaction;
+                } else {
+                    // Add new reaction only if it doesn't already exist
+                    if (!updated.some(r => r.emoji === reaction.emoji)) {
+                        updated.push(reaction);
+                    }
+                }
+            });
+            
+            return updated;
+        });
+    }, [reactions]);
+
+    // Don't render if not visible
+    if (!isVisible) {
+        return null;
+    }
+
+    return (
+        <div className="message-reactions">
+            {visibleReactions.map((reaction, index) => {
+                const hasUserReacted = reaction.users.some(u => u.id === user.currentUser?.id);
+                const isAnimating = animatingReactions.has(reaction.emoji);
+                
+                return (
+                    <button
+                        key={`${messageId || 'unknown'}-${reaction.emoji}-${reaction.count}-${index}`}
+                        className={`reaction-button ${hasUserReacted ? "reacted" : ""} ${isAnimating ? "removing" : ""}`}
+                        onClick={() => onReactionClick(reaction.emoji)}
+                        title={reaction.users.map(u => u.username).join(", ")}
+                    >
+                        <span className="reaction-emoji">{reaction.emoji}</span>
+                        <span className="reaction-count">{reaction.count}</span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}
+
+
+interface MessageProps {
+    message: MessageType;
+    isAuthor: boolean;
+    onProfileClick: (username: string) => void;
+    onContextMenu: (e: React.MouseEvent, message: MessageType) => void;
+    onReactionClick?: (messageId: number, emoji: string) => void;
+    isLoadingProfile?: boolean;
+    isDm?: boolean;
+    dmRecipientPublicKey?: string;
+}
+
+interface Rect {
+    left: number; 
+    top: number; 
+    width: number; 
+    height: number
+}
+
+export function Message({ message, isAuthor, onProfileClick, onContextMenu, onReactionClick, isLoadingProfile = false, isDm = false, dmRecipientPublicKey }: MessageProps) {
+    const [formattedMessage, setFormattedMessage] = useState({ __html: "" });
+    const [decryptedFiles, updateDecryptedFiles] = useImmer<Map<string, string>>(new Map());
+    const [loadedImages, updateLoadedImages] = useImmer<Set<string>>(new Set());
+    const [downloadingPaths, updateDownloadingPaths] = useImmer<Set<string>>(new Set());
+    const [isDownloadingFullscreen, setIsDownloadingFullscreen] = useState(false);
+    const [fullscreenImage, setFullscreenImage] = useState<{
+        src: string;
+        name: string;
+        element: HTMLImageElement;
+        startRect: Rect;
+        endRect: Rect;
+    } | null>(null);
+    const [isAnimatingOpen, setIsAnimatingOpen] = useState(false);
+    const { user } = useAppState();
+    const imageRefs = useRef<Map<string, HTMLImageElement>>(new Map());
+    const dmEnvelope = message.runtimeData?.dmEnvelope;
+
+    useEffect(() => {
+        (async () => {
+            setFormattedMessage({
+                __html: DOMPurify.sanitize(
+                    await parse(message.content)
+                ).trim()
+            });
+        })();
+    }, [message]);
+
+    // Auto-decrypt images in DMs
+    useEffect(() => {
+        if (isDm && message.files) {
+            message.files.forEach(async (file) => {
+                console.log(file);
+                const isImage = /\.(png|jpg|jpeg|gif|webp)$/i.test(file.name || "");
+                if (isImage && file.encrypted && !decryptedFiles.has(file.path)) {
+                    console.log("Decrypting...");
+                    const decryptedUrl = await decryptFile(file);
+                    console.log(decryptedUrl);
+                    if (decryptedUrl) {
+                        updateDecryptedFiles(draft => {
+                            draft.set(file.path, decryptedUrl);
+                        });
+                    }
+                }
+            });
+        }
+    }, [message.files, isDm, decryptedFiles]);
+
+    async function decryptFile(file: Attachment): Promise<string | null> {
+        if (!file.encrypted || !isDm || !user.authToken || !dmRecipientPublicKey || !dmEnvelope) {
+            debugger;
+            console.warn("Conditions not met")
+            return null;
+        }
+        
+        // Check if already decrypted
+        if (decryptedFiles.has(file.path)) {
+            return decryptedFiles.get(file.path) || null;
+        }
+        
+        try {
+            // no-op decrypt indicator removed from UI
+            // Fetch encrypted file
+            const response = await fetch(file.path, {
+                headers: getAuthHeaders(user.authToken!)
+            });
+            if (!response.ok) throw new Error("Failed to fetch file");
+            
+            const encryptedData = await response.arrayBuffer();
+            
+            // Get current user's keys
+            const keys = getCurrentKeys();
+            if (!keys) throw new Error("Keys not initialized");
+            
+            // Derive shared secret with the recipient's public key
+            const shared = await ecdhSharedSecret(keys.privateKey, ub64(dmRecipientPublicKey));
+            
+            // Derive wrapping key using the salt from the DM envelope
+            const wkRaw = await deriveWrappingKey(shared, ub64(dmEnvelope.salt), new Uint8Array([1]));
+            const wk = await importAesGcmKey(wkRaw);
+            
+            // Unwrap the message key
+            const mk = await aesGcmDecrypt(wk, ub64(dmEnvelope.iv2), ub64(dmEnvelope.wrappedMk));
+            
+            // Decrypt the file using the message key
+            const iv = new Uint8Array(encryptedData, 0, 12);
+            const ciphertext = new Uint8Array(encryptedData, 12);
+            const decrypted = await aesGcmDecrypt(await importAesGcmKey(mk), iv, ciphertext);
+            
+            // Create blob URL for download
+            const blob = new Blob([decrypted.buffer as ArrayBuffer]);
+            const url = URL.createObjectURL(blob);
+            
+            updateDecryptedFiles(draft => {
+                draft.set(file.path, url);
+            });
+            return url;
+        } catch (error) {
+            console.error("Failed to decrypt file:", error);
+            return null;
+        } finally {
+            // no-op decrypt indicator removed from UI
+        }
+    };
+
+    async function handleImageClick(file: Attachment, imageElement: HTMLImageElement) {
+        // Use decrypted URL if available, otherwise decrypt first
+        const decryptedUrl = decryptedFiles.get(file.path);
+        if (decryptedUrl) {
+            openFullscreenFromThumb(imageElement, decryptedUrl, file.name || "image");
+        } else if (file.encrypted && isDm) {
+            const newDecryptedUrl = await decryptFile(file);
+            if (newDecryptedUrl) {
+                openFullscreenFromThumb(imageElement, newDecryptedUrl, file.name || "image");
+            }
+        } else {
+            openFullscreenFromThumb(imageElement, file.path, file.name || "image");
+        }
+    };
+
+    function computeEndRect(naturalWidth: number, naturalHeight: number): Rect {
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const maxWidth = Math.floor(viewportWidth * 0.9);
+        const maxHeight = Math.floor(viewportHeight * 0.9);
+        const widthRatio = maxWidth / naturalWidth;
+        const heightRatio = maxHeight / naturalHeight;
+        const scale = Math.min(widthRatio, heightRatio, 1);
+        const width = Math.round(naturalWidth * scale);
+        const height = Math.round(naturalHeight * scale);
+        const left = Math.round((viewportWidth - width) / 2);
+        const top = Math.round((viewportHeight - height) / 2);
+        return { left, top, width, height };
+    };
+
+    function openFullscreenFromThumb(imgEl: HTMLImageElement, src: string, name: string) {
+        const rect = imgEl.getBoundingClientRect();
+        const startRect = { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
+        const tempImg = new Image();
+        tempImg.src = src;
+        // Hide original while animating
+        imgEl.style.visibility = "hidden";
+        tempImg.onload = () => {
+            const endRect = computeEndRect(tempImg.naturalWidth, tempImg.naturalHeight);
+            setFullscreenImage({
+                src,
+                name,
+                element: imgEl,
+                startRect,
+                endRect
+            });
+            // Start animation on next frame to ensure DOM has overlay mounted
+            requestAnimationFrame(() => setIsAnimatingOpen(true));
+        };
+    };
+
+    function closeFullscreen() {
+        // Reverse animation
+        setIsAnimatingOpen(false);
+        // Wait for transition to finish
+        setTimeout(() => {
+            if (fullscreenImage?.element) {
+                fullscreenImage.element.style.visibility = "visible";
+            }
+            setFullscreenImage(null);
+        }, 300);
+    };
+
+    async function downloadImage() {
+        if (!fullscreenImage) return;
+        const { src, name } = fullscreenImage;
+        try {
+            setIsDownloadingFullscreen(true);
+            if (src.startsWith("blob:")) {
+                const link = document.createElement("a");
+                link.href = src;
+                link.download = name;
+                link.click();
+                setIsDownloadingFullscreen(false);
+                return;
+            }
+
+            // Fetch with credentials/headers when not a blob URL
+            const response = await fetch(src, {
+                headers: user.authToken ? getAuthHeaders(user.authToken) : undefined,
+                credentials: "include"
+            });
+            if (!response.ok) throw new Error("Failed to download image");
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = name;
+            link.click();
+            URL.revokeObjectURL(url);
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setIsDownloadingFullscreen(false);
+        }
+    };
+
+    async function downloadFile(file: Attachment) {
+        try {
+            updateDownloadingPaths(draft => {
+                draft.add(file.path);
+            });
+            // Prefer decrypted URL if present (DM encrypted case)
+            const decrypted = decryptedFiles.get(file.path);
+            if (decrypted) {
+                const link = document.createElement("a");
+                link.href = decrypted;
+                link.download = file.name || "file";
+                link.click();
+                updateDownloadingPaths(draft => {
+                    draft.delete(file.path);
+                });
+                return;
+            }
+
+            // If not decrypted or public file, fetch with credentials/headers
+            const response = await fetch(file.path, {
+                headers: user.authToken ? getAuthHeaders(user.authToken) : undefined,
+                credentials: "include"
+            });
+            if (!response.ok) throw new Error("Failed to download file");
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = file.name || "file";
+            link.click();
+            URL.revokeObjectURL(url);
+        } catch (e) {
+            console.error(e);
+        } finally {
+            updateDownloadingPaths(draft => {
+                draft.delete(file.path);
+            });
+        }
+    };
+
+    function handleContextMenu(e: React.MouseEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu(e, message);
+    }
+
+    return (
+        <>
+            <div 
+                className={`message ${isAuthor ? "sent" : "received"}`}
+                data-id={message.id}
+                onContextMenu={handleContextMenu}
+            >
+                <div className="message-inner">
+                    {!isAuthor && !isDm && (
+                        <div className="message-profile-pic">
+                            <img
+                                src={message.profile_picture || defaultAvatar}
+                                alt={message.username}
+                                onClick={() => !isLoadingProfile && onProfileClick(message.username)}
+                                style={{ cursor: isLoadingProfile ? "default" : "pointer" }}
+                                className={isLoadingProfile ? "loading" : ""}
+                                onError={(e) => {
+                                    const target = e.target as HTMLImageElement;
+                                    target.src = defaultAvatar;
+                                }}
+                            />
+                        </div>
+                    )}
+
+                    {!isAuthor && !isDm && (
+                        <div 
+                            className={`message-username ${isLoadingProfile ? "loading" : ""}`}
+                            onClick={() => !isLoadingProfile && onProfileClick(message.username)} 
+                            style={{ cursor: isLoadingProfile ? "default" : "pointer" }}>
+                            {message.username}
+                        </div>
+                    )}
+
+                    {message.reply_to && (
+                        <Quote className="reply-preview contextual-content" background={isAuthor ? "primaryContainer" : "surfaceContainer"}>
+                            <span className="reply-username">{message.reply_to.username}</span>
+                            <span className="reply-text">{message.reply_to.content}</span>
+                        </Quote>
+                    )}
+
+                    <div className="message-content" dangerouslySetInnerHTML={formattedMessage} />
+
+                    {message.files && message.files.length > 0 && (
+                        <mdui-list className="message-attachments">
+                            {message.files.map((file, idx) => {
+                                const isImage = /\.(png|jpg|jpeg|gif|webp)$/i.test(file.name || "");
+                                const isEncryptedDm = Boolean(isDm && file.encrypted);
+                                const decryptedUrl = decryptedFiles.get(file.path);
+                                const imageSrc = isImage ? (isEncryptedDm ? decryptedUrl : file.path) : undefined;
+                                const isDownloading = downloadingPaths.has(file.path);
+                                const isSending = message.runtimeData?.sendingState?.status === 'sending';
+
+                                return (
+                                    <div className="attachment" key={idx}>
+                                        {isImage ? (
+                                            <div className="image-wrapper">
+                                                <img 
+                                                    ref={(el) => {
+                                                        if (el) imageRefs.current.set(file.path, el);
+                                                    }}
+                                                    src={imageSrc} 
+                                                    alt={file.name || "image"}
+                                                    onClick={(e) => handleImageClick(file, e.currentTarget)}
+                                                    onLoad={() => updateLoadedImages(draft => { draft.add(file.path); })}
+                                                    className={`attachement-image ${loadedImages.has(file.path) ? "" : "loading"}`}
+                                                />
+                                                {(!loadedImages.has(file.path) || isSending) && (
+                                                    <div className="loading-overlay">
+                                                        <mdui-circular-progress />
+                                                    </div>
+                                                )}
+                                            </div>
+                                        ) : (
+                                            <a 
+                                                href="#" 
+                                                onClick={async (e) => {
+                                                    e.preventDefault();
+                                                    await downloadFile(file);
+                                                }}
+                                            >
+                                                <mdui-list-item>
+                                                    <span className="with-icon-gap">
+                                                        {isDownloading ? <mdui-circular-progress /> : null}
+                                                        {(file.name || file.path.split("/").pop() || "Имя файла неизвестно").replace(/\d+_\d+_/, "")}
+                                                    </span>
+                                                </mdui-list-item>
+                                            </a>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </mdui-list>
+                    )}
+
+                    <Reactions 
+                        reactions={message.reactions}
+                        onReactionClick={(emoji) => onReactionClick?.(message.id, emoji)}
+                        messageId={message.id}
+                    />
+
+                    <div className="message-time">
+                        {formatTime(message.timestamp)}
+                        {message.is_edited ? " (edited)" : undefined}
+                        
+                        {isAuthor && message.is_read && (
+                            <span className="material-symbols outlined"></span>
+                        )}
+                        
+                        {isAuthor && message.runtimeData?.sendingState && (
+                            <span className="message-status-indicator">
+                                {message.runtimeData.sendingState.status === 'sending' && (
+                                    <mdui-circular-progress style={{ width: '16px', height: '16px' }} />
+                                )}
+                                {message.runtimeData.sendingState.status === 'failed' && (
+                                    <span className="material-symbols error-icon">error</span>
+                                )}
+                                {message.runtimeData.sendingState.status === 'sent' && (
+                                    <span className="material-symbols success-icon">check</span>
+                                )}
+                            </span>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Fullscreen Image Viewer with shared-element like transition */}
+            {fullscreenImage && createPortal(
+                <div 
+                    className={`fullscreen-image-overlay ${isAnimatingOpen ? "open" : "closing"}`}
+                    onClick={closeFullscreen}>
+                    <img
+                        src={fullscreenImage.src}
+                        alt={fullscreenImage.name}
+                        className={`fullscreen-animated-image ${isAnimatingOpen ? "to-end" : "to-start"}`}
+                        style={{
+                            left: `${isAnimatingOpen ? fullscreenImage.endRect.left : fullscreenImage.startRect.left}px`,
+                            top: `${isAnimatingOpen ? fullscreenImage.endRect.top : fullscreenImage.startRect.top}px`,
+                            width: `${isAnimatingOpen ? fullscreenImage.endRect.width : fullscreenImage.startRect.width}px`,
+                            height: `${isAnimatingOpen ? fullscreenImage.endRect.height : fullscreenImage.startRect.height}px`
+                        }}
+                        onClick={e => e.stopPropagation()}
+                    />
+                    <div className="fullscreen-controls top-right" onClick={e => e.stopPropagation()}>
+                        <mdui-button-icon icon="close" onClick={closeFullscreen} />
+                        {isDownloadingFullscreen ? (
+                            <div className="progress-wrapper">
+                                <mdui-circular-progress />
+                            </div>
+                        ) : (
+                            <mdui-button-icon icon="download" onClick={downloadImage} />
+                        )}
+                    </div>
+                </div>,
+                id("root")
+            )}
+        </>
+    );
+}

frontend/src/pages/chat/ui/right/MessageContextMenu.tsx

@@ -0,0 +1,339 @@
+import { useState, useEffect, useRef } from "react";
+import type { Message, Size2D } from "../../../../core/types";
+import { EmojiMenu } from "./EmojiMenu";
+
+interface MessageContextMenuProps {
+    message: Message;
+    isAuthor: boolean;
+    onEdit: (message: Message) => void;
+    onReply: (message: Message) => void;
+    onDelete: (message: Message) => void;
+    onRetry?: (message: Message) => void;
+    onReactionClick?: (messageId: number, emoji: string) => Promise<void>;
+    position: Size2D;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+}
+
+export interface ContextMenuState {
+    isOpen: boolean;
+    message: Message | null;
+    position: Size2D;
+}
+
+export function MessageContextMenu({ 
+    message, 
+    isAuthor, 
+    onEdit, 
+    onReply, 
+    onDelete, 
+    onRetry,
+    onReactionClick,
+    position,
+    isOpen,
+    onOpenChange
+}: MessageContextMenuProps) {
+    // Internal state for closing animation
+    const [isClosing, setIsClosing] = useState(false);
+    const [calculatedPosition, setCalculatedPosition] = useState(position);
+    const [animationClass, setAnimationClass] = useState('entering');
+    const [reactionBarPosition, setReactionBarPosition] = useState<'left' | 'right'>('left');
+    const [isEmojiMenuExpanded, setIsEmojiMenuExpanded] = useState(false);
+    const [initialDimensions, setInitialDimensions] = useState<{ width: number; height: number } | null>(null);
+    const [expandUpward, setExpandUpward] = useState(false);
+    const [contextMenuHeight, setContextMenuHeight] = useState<number | null>(null);
+    
+    // Refs for measuring actual dimensions
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const reactionBarRef = useRef<HTMLDivElement>(null);
+    const contextMenuRef = useRef<HTMLDivElement>(null);
+    const emojiMenuRef = useRef<HTMLDivElement>(null);
+
+    // Calculate smart positioning when component opens
+    useEffect(() => {
+        if (isOpen) {
+            // Use a small delay to ensure elements are rendered before measuring
+            const frameId = requestAnimationFrame(() => {
+                if (wrapperRef.current && reactionBarRef.current && contextMenuRef.current) {
+                    // Get actual dimensions from DOM elements
+                    const reactionBarRect = reactionBarRef.current.getBoundingClientRect();
+                    const contextMenuRect = contextMenuRef.current.getBoundingClientRect();
+
+                    const viewportWidth = window.innerWidth;
+                    const viewportHeight = window.innerHeight;
+
+                    // Calculate shared/combined rect dimensions
+                    const sharedRect = {
+                        width: Math.max(reactionBarRect.width, contextMenuRect.width),
+                        height: reactionBarRect.height + contextMenuRect.height
+                    };
+
+                    let x = position.x;
+                    let y = position.y;
+                    let animation = 'entering';
+                    let reactionPosition: 'left' | 'right' = 'left';
+
+                    // Check if shared rect would overflow and adjust position
+                    if (x + sharedRect.width > viewportWidth) {
+                        x = position.x - contextMenuRect.width - 25;
+                        animation = 'entering-left';
+                        reactionPosition = 'right';
+                    } else {
+                        reactionPosition = 'left';
+                    }
+
+                    // Ensure menu doesn't go off the left edge
+                    if (x < 0) {
+                        x = 0;
+                    }
+
+                    // Check if shared rect would overflow bottom edge
+                    if (y + sharedRect.height > viewportHeight) {
+                        y = viewportHeight - sharedRect.height;
+                        animation = 'entering-up';
+                    }
+                    
+                    setCalculatedPosition({ x, y });
+                    setAnimationClass(animation);
+                    setReactionBarPosition(reactionPosition);
+                }
+            });
+            
+            return () => cancelAnimationFrame(frameId);
+        }
+    }, [isOpen, position, isAuthor]);
+
+    // Effect to handle clicks outside the context menu
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (isOpen && !isClosing) {
+                // Check if the click is on a context menu element or reaction bar
+                const target = event.target as Element;
+                if (!target.closest('.context-menu') && !target.closest('.context-menu-reaction-bar')) {
+                    handleClose();
+                }
+            }
+        };
+
+        function handleKeyDown(event: KeyboardEvent) {
+            if (event.key === 'Escape' && isOpen && !isClosing) {
+                handleClose();
+            }
+        };
+
+        function handleWindowBlur() {
+            // Close context menu when browser window loses focus
+            if (isOpen && !isClosing) {
+                handleClose();
+            }
+        };
+
+        // Add event listeners
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('blur', handleWindowBlur);
+
+        // Cleanup
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('blur', handleWindowBlur);
+        };
+    }, [isOpen, isClosing]);
+
+    function handleClose() {
+        setIsClosing(true);
+        // Set appropriate closing animation based on opening animation
+        const closingAnimation = animationClass.replace('entering', 'closing');
+        setAnimationClass(closingAnimation);
+        
+        // Wait for animation to complete before calling onOpenChange
+        setTimeout(() => {
+            onOpenChange(false);
+            setIsClosing(false);
+            setAnimationClass('entering'); // Reset for next opening
+            // Reset emoji menu state after context menu animation completes
+            setIsEmojiMenuExpanded(false);
+            setInitialDimensions(null);
+            setExpandUpward(false);
+            setContextMenuHeight(null);
+        }, 200); // Match the animation duration from _animations.scss
+    }
+
+    interface Action {
+        label: string;
+        icon: string;
+        onClick: () => void;
+        show: boolean;
+    }
+
+    // Check if message is sending or failed
+    const isSending = message.runtimeData?.sendingState?.status === 'sending';
+    const isFailed = message.runtimeData?.sendingState?.status === 'failed';
+    const isSendingOrFailed = isSending || isFailed;
+
+    const actions: Action[] = [
+        {
+            label: "Reply",
+            icon: "reply",
+            onClick: () => {
+                onReply(message);
+                handleClose();
+            },
+            show: !isSendingOrFailed
+        },
+        {
+            label: "Edit",
+            icon: "edit",
+            onClick: () => {
+                onEdit(message);
+                handleClose();
+            },
+            show: isAuthor && !isSendingOrFailed
+        },
+        {
+            label: "Retry",
+            icon: "refresh",
+            onClick: () => {
+                if (onRetry) {
+                    onRetry(message);
+                }
+                handleClose();
+            },
+            show: isAuthor && isFailed && !!onRetry
+        },
+        {
+            label: "Delete",
+            icon: "delete",
+            onClick: () => {
+                onDelete(message);
+                handleClose();
+            },
+            show: isAuthor
+        },
+    ];
+
+    // Quick reactions for the reaction bar
+    const QUICK_REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "😡"];
+
+    async function handleReactionClick(emoji: string) {
+        if (onReactionClick) {
+            await onReactionClick(message.id, emoji);
+        }
+        handleClose();
+    }
+
+    function handleExpandClick() {
+        if (!reactionBarRef.current || !wrapperRef.current) return;
+
+        // Measure the actual dimensions of the reaction bar content
+        const reactionBarRect = reactionBarRef.current.getBoundingClientRect();
+        const wrapperRect = wrapperRef.current.getBoundingClientRect();
+        
+        setInitialDimensions({ width: reactionBarRect.width, height: reactionBarRect.height });
+        setContextMenuHeight(wrapperRect.height);
+
+        // Check if expanding downward would cause overflow
+        // Calculate space from the reaction bar's bottom edge downward
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - reactionBarRect.bottom;
+        const emojiMenuHeight = 400;
+
+        // Only expand upward if there's not enough space below for the emoji menu
+        const shouldExpandUpward = spaceBelow < emojiMenuHeight;
+        setExpandUpward(shouldExpandUpward);
+
+        // Use requestAnimationFrame to ensure the dimensions are applied before expansion
+        requestAnimationFrame(() => {
+            setIsEmojiMenuExpanded(true);
+        });
+    }
+
+    function handleEmojiSelect(emoji: string) {
+        if (onReactionClick) {
+            onReactionClick(message.id, emoji);
+        }
+        handleClose();
+    }
+
+    return isOpen && (
+        <div 
+            ref={wrapperRef}
+            className={`context-menu-wrapper ${animationClass}`}
+            style={{
+                position: "fixed",
+                top: calculatedPosition.y,
+                left: calculatedPosition.x,
+                zIndex: 1000
+            }}
+            onClick={(e) => e.stopPropagation()}>
+            
+            {/* Reaction Bar */}
+            <div
+                ref={reactionBarRef}
+                className={`context-menu-reaction-bar ${reactionBarPosition} ${isEmojiMenuExpanded ? "expanded" : ""} ${expandUpward ? "expand-upward" : ""}`}
+                style={isEmojiMenuExpanded && !expandUpward ? {
+                    position: 'fixed',
+                    top: `${(-(contextMenuHeight || 0) + 95)}px`,
+                    width: '320px',
+                    height: '400px',
+                    zIndex: 1001
+                } : initialDimensions && !isEmojiMenuExpanded ? {
+                    width: `${initialDimensions.width}px`,
+                    height: `${initialDimensions.height}px`
+                } : {}}>
+                {!isEmojiMenuExpanded ? (
+                    <div className="reaction-bar-content">
+                        {QUICK_REACTIONS.map((emoji, index) => (
+                            <button
+                                key={index}
+                                className="reaction-emoji-button"
+                                onClick={async () => await handleReactionClick(emoji)}
+                                title={emoji}
+                            >
+                                {emoji}
+                            </button>
+                        ))}
+                        <button
+                            className="reaction-expand-button"
+                            onClick={handleExpandClick}
+                            title="More emojis"
+                        >
+                            <span className="material-symbols">add</span>
+                        </button>
+                    </div>
+                       ) : (
+                           <div 
+                               ref={emojiMenuRef} 
+                               className="emoji-menu-wrapper">
+                               <EmojiMenu
+                                   isOpen={true}
+                                   onClose={handleClose}
+                                   onEmojiSelect={handleEmojiSelect}
+                                   mode="integrated"
+                               />
+                           </div>
+                       )}
+            </div>
+
+            {/* Context Menu */}
+            <div 
+                ref={contextMenuRef}
+                className={`context-menu ${isEmojiMenuExpanded ? "faded" : ""}`}>
+                {actions.map((action, i) => (
+                    action.show && (
+                        <div 
+                            className="context-menu-item"
+                            onClick={action.onClick}
+                            key={i}
+                        >
+                            <span className="material-symbols">{action.icon}</span>
+                            {action.label}
+                        </div>
+                    )
+                ))}
+            </div>
+
+        </div>
+    )
+}

frontend/src/pages/chat/ui/right/MessagePanelRenderer.tsx

@@ -0,0 +1,335 @@
+import { useState, useEffect, useRef } from "react";
+import { useAppState } from "../../state";
+import { MessagePanel, type MessagePanelState } from "./panels/MessagePanel";
+import { ChatMessages } from "./ChatMessages";
+import { ChatInputWrapper } from "./ChatInputWrapper";
+import { setGlobalMessageHandler } from "../../../../core/websocket";
+import type { Message, WebSocketMessage } from "../../../../core/types";
+import defaultAvatar from "../../../../images/default-avatar.png";
+import AnimatedOpacity from "../../../../core/components/animations/AnimatedOpacity";
+import type { DMPanel } from "./panels/DMPanel";
+
+interface MessagePanelRendererProps {
+    panel: MessagePanel | null;
+}
+
+export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
+    const { applyPendingPanel, chat } = useAppState();
+    const messagePanelRef = useRef<HTMLDivElement>(null);
+    const [panelState, setPanelState] = useState<MessagePanelState | null>(null);
+    const [switchIn, setSwitchIn] = useState(false);
+    const [switchOut, setSwitchOut] = useState(false);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const previousMessageCountRef = useRef(0);
+    const [replyTo, setReplyTo] = useState<Message | null>(null);
+    const [replyToVisible, setReplyToVisible] = useState(Boolean(replyTo));
+    const [editMessage, setEditMessage] = useState<Message | null>(null);
+    const [editVisible, setEditVisible] = useState(Boolean(editMessage));
+    const [pendingAction, setPendingAction] = useState<null | { type: "reply" | "edit"; message: Message }>(null);
+
+
+    // Drag & drop
+    const [isDragging, setIsDragging] = useState(false);
+    const dragCounterRef = useRef(0);
+    const addFilesRef = useRef<null | ((files: File[]) => void)>(null);
+
+    useEffect(() => {
+        if (!panel || !panelState) return;
+
+        return () => {
+            dragCounterRef.current = 0;
+            setIsDragging(false);
+        };
+    }, [panel, panelState]);
+
+    useEffect(() => {
+        if (replyTo) {
+            setReplyToVisible(true);
+        }
+    }, [replyTo]);
+
+    useEffect(() => {
+        if (editMessage) {
+            setEditVisible(true);
+        }
+    }, [editMessage]);
+
+    // Handle panel state changes
+    useEffect(() => {
+        if (panel) {
+            setPanelState(panel.getState());
+            
+            // Store the handler for cleanup
+            panel.onStateChange = (newState: MessagePanelState) => {
+                setPanelState(newState);
+            };
+            
+            // Set up WebSocket message handler for this panel
+            if (panel.handleWebSocketMessage) {
+                setGlobalMessageHandler((message: WebSocketMessage<any>) => panel.handleWebSocketMessage(message));
+            }
+        } else {
+            setPanelState(null);
+            setGlobalMessageHandler(null);
+        }
+        
+        return () => {
+            if (panel) {
+                if (panel.onStateChange) {
+                    panel.onStateChange = null;
+                }
+
+                if (typeof panel.destroy === 'function') {
+                    panel.destroy();
+                }
+            }
+        };
+    }, [panel]);
+
+    // Handle chat switching animation with event listeners
+    useEffect(() => {
+        if (chat.isSwitching) {
+            setSwitchOut(true);
+            
+            // Use animation event listeners instead of hardcoded delays
+            function handleAnimationEnd(event: Event) {
+                const animationEvent = event as AnimationEvent;
+                
+                if (animationEvent.animationName === 'fadeOutUp') {
+                    // Apply pending panel exactly at the boundary between animations
+                    applyPendingPanel();
+                    setSwitchOut(false);
+                    setSwitchIn(true);
+                } else if (animationEvent.animationName === 'fadeInDown') {
+                    setSwitchIn(false);
+                    // End the chat switching state
+                    chat.setIsSwitching(false);
+                }
+            };
+            
+            // Add event listener to document to catch all animation events
+            document.addEventListener('animationend', handleAnimationEnd);
+            
+            // Cleanup function
+            return () => {
+                document.removeEventListener('animationend', handleAnimationEnd);
+            };
+        }
+    }, [chat.isSwitching]);
+
+    // Load messages when panel changes and animation is not running
+    useEffect(() => {
+        if (!chat.activePanel || chat.isSwitching || switchOut || switchIn) return;
+        
+        const panelState = chat.activePanel.getState();
+        
+        if (panelState.messages.length === 0 && !panelState.isLoading) {
+            chat.activePanel.loadMessages();
+        }
+    }, [chat.activePanel, chat.isSwitching, switchOut, switchIn]);
+
+    // Scroll to bottom only when new messages are added
+    useEffect(() => {
+        if (!panelState || chat.isSwitching || switchOut || switchIn) return;
+
+        const currentMessageCount = panelState.messages.length;
+        const previousMessageCount = previousMessageCountRef.current;
+
+        const el = messagesEndRef.current;
+        if (!el) return;
+
+        // Scroll without animation when messages are initially loaded
+        if (previousMessageCount === 0 && currentMessageCount > 0 && !panelState.isLoading) {
+            el.scrollIntoView({ behavior: "instant", block: "end" });
+        }
+        // Scroll with animation when a new message is added
+        else if (currentMessageCount > previousMessageCount && previousMessageCount > 0) {
+            // Defer to next frame to ensure layout is stable
+            const id = requestAnimationFrame(() => {
+                el.scrollIntoView({ behavior: "smooth", block: "end" });
+            });
+            
+            return () => cancelAnimationFrame(id);
+        }
+
+        // Update the previous message count
+        previousMessageCountRef.current = currentMessageCount;
+    }, [panelState?.messages, panelState?.isLoading, chat.isSwitching, switchOut, switchIn]);
+
+    return (
+        <div className={`chat-container ${switchIn ? "chat-switch-in" : ""} ${switchOut ? "chat-switch-out" : ""}`}>
+            <div 
+                ref={messagePanelRef}
+                className="chat-main" 
+                id="chat-inner"
+                onDragEnter={panel ? (e) => {
+                    if (!e.dataTransfer) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dragCounterRef.current += 1;
+                    // Only show overlay when actual files are dragged
+                    const hasFiles = Array.from(e.dataTransfer.types || []).includes("Files");
+                    if (hasFiles) setIsDragging(true);
+                } : undefined}
+                onDragOver={panel ? (e) => {
+                    if (!e.dataTransfer) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.dataTransfer.dropEffect = "copy";
+                } : undefined}
+                onDragLeave={panel ? (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+                    if (dragCounterRef.current === 0) setIsDragging(false);
+                } : undefined}
+                onDrop={panel ? (e) => {
+                    if (!e.dataTransfer) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const files = Array.from(e.dataTransfer.files || []);
+                    if (files.length > 0 && addFilesRef.current) {
+                        addFilesRef.current(files);
+                    }
+                    setIsDragging(false);
+                    dragCounterRef.current = 0;
+                } : undefined}>
+                <div className="chat-header">
+                    <img 
+                        src={panelState?.profilePicture || defaultAvatar} 
+                        alt="Avatar" 
+                        className="chat-header-avatar"
+                        onClick={panel?.handleProfileClick}
+                        style={{ cursor: panel ? "pointer" : "default" }}
+                    />
+                    <div className="chat-header-info">
+                        <div className="info-chat">
+                            <h4 id="chat-name">{panelState?.title || "Выбор чата"}</h4>
+                            <p>
+                                <span className={`online-status ${panelState?.online ? "online" : ""}`}></span>
+                                {panelState ? (
+                                    <>
+                                        {panelState.online ? "Online" : "Offline"}
+                                        {panelState.isTyping && " • Typing..."}
+                                    </>
+                                ) : (
+                                    "Выберите чат, чтобы начать переписку"
+                                )}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {panelState?.isLoading ? (
+                    <div className="chat-messages" id="chat-messages">
+                        <div style={{ 
+                            display: "flex", 
+                            justifyContent: "center", 
+                            alignItems: "center", 
+                            height: "100%",
+                            color: "var(--mdui-color-on-surface-variant)"
+                        }}>
+                            Загрузка сообщений...
+                        </div>
+                    </div>
+                ) : panelState && panel ? (
+                    <ChatMessages 
+                        messages={panelState.messages} 
+                        isDm={panel.isDm()} 
+                        dmRecipientPublicKey={(panel as DMPanel).dmData?.publicKey}
+                        onReplySelect={(message) => {
+                            if (editMessage || editVisible) {
+                                setPendingAction({ type: "reply", message: message });
+                                setEditVisible(false); // onCloseEdit will apply pending
+                            } else {
+                                setReplyTo(message);
+                            }
+                        }}
+                        onEditSelect={(message) => {
+                            if (replyTo || replyToVisible) {
+                                setPendingAction({ type: "edit", message: message });
+                                setReplyToVisible(false); // onCloseReply will apply pending
+                            } else {
+                                setEditMessage(message);
+                            }
+                        }}
+                        onDelete={(id) => panel.handleDeleteMessage(id)}
+                        onRetryMessage={(id) => panel.retryMessage(id)}
+                    >
+                        <div ref={messagesEndRef} />
+                    </ChatMessages>
+                ) : (
+                    <div className="chat-messages" id="chat-messages">
+                        <div style={{ 
+                            display: "flex", 
+                            justifyContent: "center", 
+                            alignItems: "center", 
+                            height: "100%",
+                            color: "var(--mdui-color-on-surface-variant)"
+                        }}>
+                            Выберите чат на боковой панели, чтобы начать переписку
+                        </div>
+                    </div>
+                )}
+
+                {panel && (
+                    <>
+                        <AnimatedOpacity 
+                            visible={isDragging} 
+                            className="file-overlay" 
+                            onDragOver={(e) => e.preventDefault()} 
+                            onDrop={(e) => e.preventDefault()}>
+                            <div className="file-overlay-wrapper">
+                                <div className="file-overlay-inner">
+                                    <mdui-icon name="upload_file" />
+                                    <span>Отпустите файл(ы) для добавления</span>
+                                </div>
+                            </div>
+                        </AnimatedOpacity>
+                        
+                        <ChatInputWrapper 
+                            onSendMessage={(text, files) => {
+                                panel.handleSendMessage(text, replyTo?.id, files);
+                                setReplyTo(null);
+                            }} 
+                            onSaveEdit={(content) => {
+                                if (editMessage) {
+                                    panel.handleEditMessage(editMessage.id, content);
+                                    setEditMessage(null);
+                                }
+                            }}
+                            replyTo={replyTo}
+                            replyToVisible={replyToVisible}
+                            onClearReply={() => {
+                                setPendingAction(null);
+                                setReplyToVisible(false);
+                            }}
+                            onCloseReply={() => {
+                                setReplyTo(null);
+                                if (pendingAction && pendingAction.type === "edit") {
+                                    setEditMessage(pendingAction.message);
+                                    setPendingAction(null);
+                                }
+                            }}
+                            editingMessage={editMessage}
+                            editVisible={editVisible}
+                            onClearEdit={() => {
+                                setPendingAction(null);
+                                setEditVisible(false);
+                            }}
+                            onCloseEdit={() => {
+                                setEditMessage(null);
+                                if (pendingAction && pendingAction.type === "reply") {
+                                    setReplyTo(pendingAction.message);
+                                    setPendingAction(null);
+                                }
+                            }}
+                            onProvideFileAdder={(adder) => { addFilesRef.current = adder; }}
+                            messagePanelRef={messagePanelRef}
+                        />
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/pages/chat/ui/right/RightPanel.tsx

@@ -0,0 +1,8 @@
+import { useAppState } from "../../state";
+import { MessagePanelRenderer } from "./MessagePanelRenderer";
+
+export function RightPanel() {
+    const { chat } = useAppState();
+    
+    return <MessagePanelRenderer panel={chat.activePanel} />
+}

frontend/src/pages/chat/ui/right/UserProfileDialog.tsx

@@ -0,0 +1,71 @@
+import type { DialogProps } from "../../../../core/types";
+import type { UserProfile } from "../../../../core/types";
+import { MaterialDialog } from "../../../../core/components/Dialog";
+import { formatTime } from "../../../../utils/utils";
+import defaultAvatar from "../../../../images/default-avatar.png";
+
+interface UserProfileDialogProps extends DialogProps {
+    userProfile: UserProfile | null;
+}
+
+export function UserProfileDialog({ isOpen, onOpenChange, userProfile }: UserProfileDialogProps) {
+    const content = userProfile ? (
+        <div className="content">
+            <div className="profile-picture-section">
+                <img 
+                    className="profile-picture" 
+                    alt="Profile Picture" 
+                    src={userProfile.profile_picture || defaultAvatar}
+                    onError={(e) => {
+                        const target = e.target as HTMLImageElement;
+                        target.src = defaultAvatar;
+                    }}
+                />
+            </div>
+            <div className="profile-info">
+                <div className="username-section">
+                    <h4 className="username">{userProfile.username}</h4>
+                    <div className={`online-status ${userProfile.online ? "online" : "offline"}`}>
+                        {userProfile.online ? (
+                            <>
+                                <span className="online-indicator"></span> Онлайн
+                            </>
+                        ) : (
+                            <>
+                                <span className="offline-indicator"></span> Последний заход {formatTime(userProfile.last_seen)}
+                            </>
+                        )}
+                    </div>
+                </div>
+                <div className="bio-section">
+                    <label>О себе:</label>
+                    <div className="bio-display">
+                        {userProfile.bio || "No bio available."}
+                    </div>
+                </div>
+                <div className="profile-stats">
+                    <div className="stat">
+                        <span className="stat-label">Зарегистрирован:</span>
+                        <span className="stat-value member-since">{formatTime(userProfile.created_at)}</span>
+                    </div>
+                    <div className="stat">
+                        <span className="stat-label">Last seen:</span>
+                        <span className="stat-value last-seen">{formatTime(userProfile.last_seen)}</span>
+                    </div>
+                </div>
+                <div className="profile-actions">
+                    <mdui-button id="dm-button" variant="filled">
+                        <mdui-icon slot="icon" name="chat--filled"></mdui-icon>
+                        Send Message
+                    </mdui-button>
+                </div>
+            </div>
+        </div>
+    ) : null
+
+    return (
+        <MaterialDialog open={isOpen} onOpenChange={onOpenChange} close-on-overlay-click close-on-esc id="user-profile-dialog">
+            {content}
+        </MaterialDialog>
+    );
+}

frontend/src/pages/chat/ui/right/emojiData.ts

@@ -0,0 +1,100 @@
+export interface EmojiCategory {
+    name: string;
+    icon: string;
+    emojis: string[];
+}
+
+export const EMOJI_CATEGORIES: EmojiCategory[] = [
+    {
+        name: "recent",
+        icon: "🕒",
+        emojis: []
+    },
+    {
+        name: "smileys",
+        icon: "😀",
+        emojis: [
+            "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃", "😉", "😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😚", "😙", "😋", "😛", "😜", "🤪", "😝", "🤑", "🤗", "🤭", "🤫", "🤔", "🤐", "🤨", "😐", "😑", "😶", "😏", "😒", "🙄", "😬", "🤥", "😔", "😪", "🤤", "😴", "😷", "🤒", "🤕", "🤢", "🤮", "🤧", "🥵", "🥶", "🥴", "😵", "🤯", "🤠", "🥳", "😎", "🤓", "🧐", "😕", "😟", "🙁", "☹️", "😮", "😯", "😲", "😳", "🥺", "😦", "😧", "😨", "😰", "😥", "😢", "😭", "😱", "😖", "😣", "😞", "😓", "😩", "😫", "🥱", "😤", "😡", "😠", "🤬", "😈", "👿", "💀", "☠️", "💩", "🤡", "👹", "👺", "👻", "👽", "👾", "🤖", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾"
+        ]
+    },
+    {
+        name: "people",
+        icon: "👋",
+        emojis: [
+            "👋", "🤚", "🖐", "✋", "🖖", "👌", "🤏", "✌️", "🤞", "🤟", "🤘", "🤙", "👈", "👉", "👆", "🖕", "👇", "☝️", "👍", "👎", "👊", "✊", "🤛", "🤜", "👏", "🙌", "👐", "🤲", "🤝", "🙏", "✍️", "💅", "🤳", "💪", "🦾", "🦿", "🦵", "🦶", "👂", "🦻", "👃", "🧠", "🦷", "🦴", "👀", "👁", "👅", "👄", "💋", "🩸", "👶", "🧒", "👦", "👧", "🧑", "👨", "👩", "🧓", "👴", "👵", "👱", "🧔", "👲", "🧕", "👳", "👮", "👷", "💂", "🕵️", "👩‍⚕️", "👨‍⚕️", "👩‍🌾", "👨‍🌾", "👩‍🍳", "👨‍🍳", "👩‍🎓", "👨‍🎓", "👩‍🎤", "👨‍🎤", "👩‍🏫", "👨‍🏫", "👩‍🏭", "👨‍🏭", "👩‍💻", "👨‍💻", "👩‍💼", "👨‍💼", "👩‍🔧", "👨‍🔧", "👩‍🔬", "👨‍🔬", "👩‍🎨", "👨‍🎨", "👩‍🚒", "👨‍🚒", "👩‍✈️", "👨‍✈️", "👩‍🚀", "👨‍🚀", "👩‍⚖️", "👨‍⚖️", "👰", "🤵", "👸", "🤴", "🦸", "🦹", "🤶", "🎅", "🧙", "🧚", "🧛", "🧜", "🧝", "🧞", "🧟", "💆", "💇", "🚶", "🏃", "💃", "🕺", "🕴", "👯", "🧘", "🛀", "🛌", "👭", "👫", "👬", "💏", "💑", "👪"
+        ]
+    },
+    {
+        name: "animals",
+        icon: "🐶",
+        emojis: [
+            "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷", "🐽", "🐸", "🐵", "🙈", "🙉", "🙊", "🐒", "🐔", "🐧", "🐦", "🐤", "🐣", "🐥", "🦆", "🦅", "🦉", "🦇", "🐺", "🐗", "🐴", "🦄", "🐝", "🐛", "🦋", "🐌", "🐞", "🐜", "🦟", "🦗", "🕷", "🕸", "🦂", "🐢", "🐍", "🦎", "🦖", "🦕", "🐙", "🦑", "🦐", "🦞", "🦀", "🐡", "🐠", "🐟", "🐬", "🐳", "🐋", "🦈", "🐊", "🐅", "🐆", "🦓", "🦍", "🦧", "🐘", "🦛", "🦏", "🐪", "🐫", "🦒", "🦘", "🐃", "🐂", "🐄", "🐎", "🐖", "🐏", "🐑", "🦙", "🐐", "🦌", "🐕", "🐩", "🦮", "🐕‍🦺", "🐈", "🐓", "🦃", "🦚", "🦜", "🦢", "🦩", "🕊", "🐇", "🦝", "🦨", "🦡", "🦦", "🦥", "🐁", "🐀", "🐿", "🦔"
+        ]
+    },
+    {
+        name: "food",
+        icon: "🍎",
+        emojis: [
+            "🍎", "🍐", "🍊", "🍋", "🍌", "🍉", "🍇", "🍓", "🫐", "🍈", "🍒", "🍑", "🥭", "🍍", "🥥", "🥝", "🍅", "🍆", "🥑", "🥦", "🥬", "🥒", "🌶", "🫑", "🌽", "🥕", "🫒", "🧄", "🧅", "🥔", "🍠", "🥐", "🥯", "🍞", "🥖", "🥨", "🧀", "🥚", "🍳", "🧈", "🥞", "🧇", "🥓", "🥩", "🍗", "🍖", "🦴", "🌭", "🍔", "🍟", "🍕", "🫓", "🥙", "🌮", "🌯", "🫔", "🥗", "🥘", "🫕", "🥫", "🍝", "🍜", "🍲", "🍛", "🍣", "🍱", "🥟", "🦪", "🍤", "🍙", "🍚", "🍘", "🍥", "🥠", "🥮", "🍢", "🍡", "🍧", "🍨", "🍦", "🥧", "🧁", "🍰", "🎂", "🍮", "🍭", "🍬", "🍫", "🍿", "🍩", "🍪", "🌰", "🥜", "🍯", "🥛", "🍼", "☕", "🫖", "🍵", "🧃", "🥤", "🧋", "🍶", "🍺", "🍻", "🥂", "🍷", "🥃", "🍸", "🍹", "🧉", "🍾"
+        ]
+    },
+    {
+        name: "travel",
+        icon: "🚗",
+        emojis: [
+            "🚗", "🚕", "🚙", "🚌", "🚎", "🏎", "🚓", "🚑", "🚒", "🚐", "🛻", "🚚", "🚛", "🚜", "🏍", "🛵", "🚲", "🛴", "🛹", "🛼", "🚁", "✈️", "🛩", "🛫", "🛬", "🪂", "💺", "🚀", "🛸", "🚉", "🚊", "🚝", "🚞", "🚋", "🚃", "🚋", "🚋", "🚄", "🚅", "🚈", "🚂", "🚆", "🚇", "🚊", "🚍", "🚘", "🚖", "🚡", "🚠", "🚟", "🎢", "🎡", "🎠", "⛵", "🛥", "🚤", "⛴", "🛳", "🚢", "⚓", "🚧", "⛽", "🚨", "🚥", "🚦", "🛑", "🚏", "🗺", "🗿", "🗽", "🗼", "🏰", "🏯", "🏟", "🎡", "🎢", "🎠", "⛲", "⛱", "🏖", "🏝", "🏔", "⛰", "🌋", "🗻", "🏕", "⛺", "🏠", "🏡", "🏘", "🏚", "🏗", "🏭", "🏢", "🏬", "🏣", "🏤", "🏥", "🏦", "🏨", "🏪", "🏫", "🏩", "💒", "🏛", "⛪", "🕌", "🛕", "🕍", "🕋", "⛩", "🛤", "🛣", "🗾", "🎑", "🏞", "🌅", "🌄", "🌠", "🎇", "🎆", "🌇", "🌆", "🏙", "🌃", "🌌", "🌉", "🌁"
+        ]
+    },
+    {
+        name: "activities",
+        icon: "⚽",
+        emojis: [
+            "⚽", "🏀", "🏈", "⚾", "🥎", "🎾", "🏐", "🏉", "🎱", "🪀", "🏓", "🏸", "🏒", "🏑", "🥍", "🏏", "🪃", "🥅", "⛳", "🪁", "🏹", "🎣", "🤿", "🥊", "🥋", "🎽", "🛹", "🛷", "⛸", "🥌", "🎿", "⛷", "🏂", "🪂", "🏋️‍♀️", "🏋️‍♂️", "🤼‍♀️", "🤼‍♂️", "🤸‍♀️", "🤸‍♂️", "⛹️‍♀️", "⛹️‍♂️", "🤺", "🤾‍♀️", "🤾‍♂️", "🏌️‍♀️", "🏌️‍♂️", "🏇", "🧘‍♀️", "🧘‍♂️", "🏄‍♀️", "🏄‍♂️", "🏊‍♀️", "🏊‍♂️", "🤽‍♀️", "🤽‍♂️", "🚣‍♀️", "🚣‍♂️", "🧗‍♀️", "🧗‍♂️", "🚵‍♀️", "🚵‍♂️", "🚴‍♀️", "🚴‍♂️", "🏆", "🥇", "🥈", "🥉", "🏅", "🎖", "🏵", "🎗", "🎫", "🎟", "🎪", "🤹", "🤹‍♀️", "🤹‍♂️", "🎭", "🩰", "🎨", "🎬", "🎤", "🎧", "🎼", "🎹", "🥁", "🎷", "🎺", "🎸", "🪕", "🎻", "🎲", "♠️", "♥️", "♦️", "♣️", "♟", "🃏", "🀄", "🎴", "🎯", "🎳", "🎮", "🎰", "🧩"
+        ]
+    },
+    {
+        name: "objects",
+        icon: "📱",
+        emojis: [
+            "📱", "📲", "☎️", "📞", "📟", "📠", "🔋", "🔌", "💻", "🖥", "🖨", "⌨️", "🖱", "🖲", "💽", "💾", "💿", "📀", "🧮", "🎥", "📽", "📸", "📹", "📷", "🔍", "🔎", "🕯", "💡", "🔦", "🏮", "🪔", "📔", "📕", "📖", "📗", "📘", "📙", "📚", "📓", "📒", "📃", "📜", "📄", "📰", "🗞", "📑", "🔖", "🏷", "💰", "💴", "💵", "💶", "💷", "💸", "💳", "🧾", "💹", "💱", "💲", "✉️", "📧", "📨", "📩", "📤", "📥", "📦", "📫", "📪", "📬", "📭", "📮", "🗳", "✏️", "✒️", "🖋", "🖊", "🖌", "🖍", "📝", "💼", "📁", "📂", "🗂", "📅", "📆", "🗒", "🗓", "📇", "📈", "📉", "📊", "📋", "📌", "📍", "📎", "🖇", "📏", "📐", "✂️", "🗃", "🗄", "🗑", "🔒", "🔓", "🔏", "🔐", "🔑", "🗝", "🔨", "⛏", "⚒", "🛠", "🗡", "⚔️", "🔫", "🪃", "🏹", "🛡", "🪚", "🔧", "🪛", "🔩", "⚙️", "🗜", "⚖️", "🦯", "🔗", "⛓", "🧰", "🧲", "⚗️", "🧪", "🧫", "🧬", "🔬", "🔭", "📡", "💉", "💊", "🩹", "🩺", "🚪", "🛏", "🛋", "🚽", "🚿", "🛁", "🛀", "🧴", "🧷", "🧹", "🧺", "🧻", "🚰", "🚰", "🪒", "🧽", "🧯", "🛒"
+        ]
+    },
+    {
+        name: "symbols",
+        icon: "❤️",
+        emojis: [
+            "❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "🤍", "🤎", "💔", "❣️", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "☮️", "✝️", "☪️", "🕉", "☸️", "✡️", "🔯", "🕎", "☯️", "☦️", "🛐", "⛎", "♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑", "♒", "♓", "🆔", "⚛️", "🉑", "☢️", "☣️", "📴", "📳", "🈶", "🈚", "🈸", "🈺", "🈷️", "✴️", "🆚", "💮", "🉐", "㊙️", "㊗️", "🈴", "🈵", "🈹", "🈲", "🅰️", "🅱️", "🆎", "🅾️", "🆘", "❌", "⭕", "🛑", "⛔", "📛", "🚫", "💯", "💢", "♨️", "🚷", "🚯", "🚳", "🚱", "🔞", "📵", "🚭", "❗", "❕", "❓", "❔", "‼️", "⁉️", "🔅", "🔆", "〽️", "⚠️", "🚸", "🔱", "⚜️", "🔰", "♻️", "✅", "🈯", "💹", "❇️", "✳️", "❎", "🌐", "💠", "Ⓜ️", "🌀", "💤", "🏧", "🚾", "♿", "🅿️", "🛗", "🈳", "🈂️", "🛂", "🛃", "🛄", "🛅", "🚹", "🚺", "🚼", "⚧", "🚻", "🚮", "🎦", "📶", "🈁", "🔣", "ℹ️", "🔤", "🔡", "🔠", "🆖", "🆗", "🆙", "🆒", "🆕", "🆓", "0️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟"
+        ]
+    },
+    {
+        name: "flags",
+        icon: "🏳️",
+        emojis: [
+            "🏳️", "🏴", "🏁", "🚩", "🏳️‍🌈", "🏳️‍⚧️", "🏴‍☠️", "🇦🇨", "🇦🇩", "🇦🇪", "🇦🇫", "🇦🇬", "🇦🇮", "🇦🇱", "🇦🇲", "🇦🇴", "🇦🇶", "🇦🇷", "🇦🇸", "🇦🇹", "🇦🇺", "🇦🇼", "🇦🇽", "🇦🇿", "🇧🇦", "🇧🇧", "🇧🇩", "🇧🇪", "🇧🇫", "🇧🇬", "🇧🇭", "🇧🇮", "🇧🇯", "🇧🇱", "🇧🇲", "🇧🇳", "🇧🇴", "🇧🇶", "🇧🇷", "🇧🇸", "🇧🇹", "🇧🇻", "🇧🇼", "🇧🇾", "🇧🇿", "🇨🇦", "🇨🇨", "🇨🇩", "🇨🇫", "🇨🇬", "🇨🇭", "🇨🇮", "🇨🇰", "🇨🇱", "🇨🇲", "🇨🇳", "🇨🇴", "🇨🇵", "🇨🇷", "🇨🇺", "🇨🇻", "🇨🇼", "🇨🇽", "🇨🇾", "🇨🇿", "🇩🇪", "🇩🇬", "🇩🇯", "🇩🇰", "🇩🇲", "🇩🇴", "🇩🇿", "🇪🇦", "🇪🇨", "🇪🇪", "🇪🇬", "🇪🇭", "🇪🇷", "🇪🇸", "🇪🇹", "🇪🇺", "🇫🇮", "🇫🇯", "🇫🇰", "🇫🇲", "🇫🇴", "🇫🇷", "🇬🇦", "🇬🇧", "🇬🇩", "🇬🇪", "🇬🇫", "🇬🇬", "🇬🇭", "🇬🇮", "🇬🇱", "🇬🇲", "🇬🇳", "🇬🇵", "🇬🇶", "🇬🇷", "🇬🇸", "🇬🇹", "🇬🇺", "🇬🇼", "🇬🇾", "🇭🇰", "🇭🇲", "🇭🇳", "🇭🇷", "🇭🇹", "🇭🇺", "🇮🇨", "🇮🇩", "🇮🇪", "🇮🇱", "🇮🇲", "🇮🇳", "🇮🇴", "🇮🇶", "🇮🇷", "🇮🇸", "🇮🇹", "🇯🇪", "🇯🇲", "🇯🇴", "🇯🇵", "🇰🇪", "🇰🇬", "🇰🇭", "🇰🇮", "🇰🇲", "🇰🇳", "🇰🇵", "🇰🇷", "🇰🇼", "🇰🇾", "🇰🇿", "🇱🇦", "🇱🇧", "🇱🇨", "🇱🇮", "🇱🇰", "🇱🇷", "🇱🇸", "🇱🇹", "🇱🇺", "🇱🇻", "🇱🇾", "🇲🇦", "🇲🇨", "🇲🇩", "🇲🇪", "🇲🇫", "🇲🇬", "🇲🇭", "🇲🇰", "🇲🇱", "🇲🇲", "🇲🇳", "🇲🇴", "🇲🇵", "🇲🇶", "🇲🇷", "🇲🇸", "🇲🇹", "🇲🇺", "🇲🇻", "🇲🇼", "🇲🇽", "🇲🇾", "🇲🇿", "🇳🇦", "🇳🇨", "🇳🇪", "🇳🇫", "🇳🇬", "🇳🇮", "🇳🇱", "🇳🇴", "🇳🇵", "🇳🇷", "🇳🇺", "🇳🇿", "🇴🇲", "🇵🇦", "🇵🇪", "🇵🇫", "🇵🇬", "🇵🇭", "🇵🇰", "🇵🇱", "🇵🇲", "🇵🇳", "🇵🇷", "🇵🇸", "🇵🇹", "🇵🇼", "🇵🇾", "🇶🇦", "🇷🇪", "🇷🇴", "🇷🇸", "🇷🇺", "🇷🇼", "🇸🇦", "🇸🇧", "🇸🇨", "🇸🇩", "🇸🇪", "🇸🇬", "🇸🇭", "🇸🇮", "🇸🇯", "🇸🇰", "🇸🇱", "🇸🇲", "🇸🇳", "🇸🇴", "🇸🇷", "🇸🇸", "🇸🇹", "🇸🇻", "🇸🇽", "🇸🇾", "🇸🇿", "🇹🇦", "🇹🇨", "🇹🇩", "🇹🇫", "🇹🇬", "🇹🇭", "🇹🇯", "🇹🇰", "🇹🇱", "🇹🇲", "🇹🇳", "🇹🇴", "🇹🇷", "🇹🇹", "🇹🇻", "🇹🇼", "🇹🇿", "🇺🇦", "🇺🇬", "🇺🇲", "🇺🇸", "🇺🇾", "🇺🇿", "🇻🇦", "🇻🇨", "🇻🇪", "🇻🇬", "🇻🇮", "🇻🇳", "🇻🇺", "🇼🇫", "🇼🇸", "🇾🇪", "🇾🇹", "🇿🇦", "🇿🇲", "🇿🇼"
+        ]
+    }
+];
+
+export const RECENT_EMOJIS_KEY = "recentEmojis";
+
+export function getRecentEmojis(): string[] {
+    try {
+        const stored = localStorage.getItem(RECENT_EMOJIS_KEY);
+        return stored ? JSON.parse(stored) : [];
+    } catch {
+        return [];
+    }
+}
+
+export function addRecentEmoji(emoji: string): void {
+    try {
+        let recentEmojis = getRecentEmojis();
+        recentEmojis = recentEmojis.filter(e => e !== emoji);
+        recentEmojis.unshift(emoji);
+        recentEmojis = recentEmojis.slice(0, 50);
+        localStorage.setItem(RECENT_EMOJIS_KEY, JSON.stringify(recentEmojis));
+    } catch {
+        // Ignore localStorage errors
+    }
+}
+

frontend/src/pages/chat/ui/right/panels/DMPanel.ts

@@ -0,0 +1,323 @@
+import { MessagePanel } from "./MessagePanel";
+import { 
+    fetchDMHistory, 
+    decryptDm, 
+    sendDMViaWebSocket,
+    sendDmWithFiles,
+    editDmEnvelope,
+    deleteDmEnvelope
+} from "../../../../../core/api/dmApi";
+import type { DmEncryptedJSON, DmEnvelope, DMWebSocketMessage, EncryptedMessageJson, Message } from "../../../../../core/types";
+import type { UserState } from "../../../state";
+
+export interface DMPanelData {
+    userId: number;
+    username: string;
+    publicKey: string;
+    profilePicture?: string;
+    online: boolean;
+}
+
+export class DMPanel extends MessagePanel {
+    public dmData: DMPanelData | null = null;
+    private messagesLoaded: boolean = false;
+
+    constructor(
+        user: UserState
+    ) {
+        super("dm", user);
+    }
+
+    isDm(): boolean {
+        return true;
+    }
+
+    async activate(): Promise<void> {
+        // Don't load messages immediately during activation to prevent animation freeze
+        // Messages will be loaded after the animation completes
+    }
+
+    deactivate(): void {
+        // DM doesn't need special cleanup
+    }
+
+    clearMessages(): void {
+        super.clearMessages();
+        this.messagesLoaded = false;
+    }
+
+    private async parseTextPayload(env: DmEnvelope, decryptedMessages: Message[]) {
+        const plaintext = await decryptDm(env, this.dmData!.publicKey);
+        const isAuthor = env.senderId !== this.dmData!.userId;
+        const username = isAuthor ? this.currentUser.currentUser?.username ?? "You" : this.dmData!.username;
+
+        // Try parse JSON payload { type: "text", data: { content, files?, reply_to_id? } }
+        let content = plaintext;
+        let reply_to_id: number | undefined = undefined;
+        try {
+            const obj = JSON.parse(plaintext) as DmEncryptedJSON;
+            if (obj && obj.type === "text" && obj.data) {
+                content = obj.data.content;
+                reply_to_id = Number(obj.data.reply_to_id) || undefined;
+            }
+        } catch {}
+
+        const dmMsg: Message = {
+            id: env.id,
+            content: content,
+            username: username,
+            timestamp: env.timestamp,
+            is_read: false,
+            is_edited: false,
+            files: env.files?.map(file => { return {"name": file.name, "encrypted": true, "path": file.path} }) || [],
+            reactions: env.reactions || [],
+
+            runtimeData: {
+                dmEnvelope: env
+            }
+        };
+
+        if (reply_to_id) {
+            const referenced = decryptedMessages.find(m => m.id === reply_to_id);
+            if (referenced) dmMsg.reply_to = referenced;
+        }
+
+        return dmMsg;
+    }
+
+    async loadMessages(): Promise<void> {
+        if (!this.currentUser.authToken || !this.dmData || this.messagesLoaded) return;
+
+        this.setLoading(true);
+        try {
+            const messages = await fetchDMHistory(this.dmData.userId, this.currentUser.authToken, 50);
+            const decryptedMessages: Message[] = [];
+            let maxIncomingId = 0;
+
+            for (const env of messages) {
+                try {
+                    const dmMsg = await this.parseTextPayload(env, decryptedMessages);
+                    decryptedMessages.push(dmMsg);
+
+                    if (env.senderId === this.dmData!.userId && env.id > maxIncomingId) {
+                        maxIncomingId = env.id;
+                    }
+                } catch (error) {
+                    console.error("Error decrypting message:", error);
+                }
+            }
+
+            this.clearMessages();
+            decryptedMessages.forEach(msg => this.addMessage(msg));
+
+            // Update last read ID
+            if (maxIncomingId > 0) {
+                this.setLastReadId(this.dmData.userId, maxIncomingId);
+            }
+            this.messagesLoaded = true;
+        } catch (error) {
+            console.error("Failed to load DM history:", error);
+        } finally {
+            this.setLoading(false);
+        }
+    }
+
+    protected async sendMessage(content: string, replyToId?: number, files: File[] = []): Promise<void> {
+        if (!this.currentUser.authToken || !this.dmData || !content.trim()) return;
+
+        try {
+            const payload: DmEncryptedJSON = { 
+                type: "text", 
+                data: { 
+                    content: content.trim(), 
+                    reply_to_id: replyToId ?? undefined
+                }
+            }
+            const json = JSON.stringify(payload);
+
+            if (files.length === 0) {
+                await sendDMViaWebSocket(
+                    this.dmData.userId,
+                    this.dmData.publicKey,
+                    json,
+                    this.currentUser.authToken
+                );
+            } else {
+                await sendDmWithFiles(
+                    this.dmData.userId,
+                    this.dmData.publicKey,
+                    json,
+                    files,
+                    this.currentUser.authToken
+                );
+            }
+        } catch (error) {
+            console.error("Failed to send DM:", error);
+        }
+    }
+
+    // Set DM conversation data
+    setDMData(dmData: DMPanelData): void {
+        this.dmData = dmData;
+        this.messagesLoaded = false;
+        this.updateState({
+            id: `dm-${dmData.userId}`,
+            title: dmData.username,
+            profilePicture: dmData.profilePicture,
+            online: dmData.online
+        });
+    }
+
+    // Handle incoming WebSocket DM messages
+    async handleWebSocketMessage(response: DMWebSocketMessage): Promise<void> {
+        if (response.type === "dmNew" && this.dmData) {
+            const envelope = response.data;
+            
+            // If this is for the active DM conversation
+            if (envelope.senderId === this.dmData.userId || envelope.recipientId === this.dmData.userId) {
+                try {
+                    const dmMsg = await this.parseTextPayload(envelope, this.getMessages());
+                    
+                    // Check if this is a confirmation of a message we sent
+                    const isOurMessage = envelope.senderId !== this.dmData.userId;
+                    if (isOurMessage) {
+                        // This is our message being confirmed, find the temp message and replace it
+                        const tempMessages = this.getMessages().filter(m => m.id === -1 && m.runtimeData?.sendingState?.tempId);
+                        for (const tempMsg of tempMessages) {
+                            if (tempMsg.runtimeData?.sendingState?.retryData?.content === dmMsg.content) {
+                                this.handleMessageConfirmed(tempMsg.runtimeData.sendingState.tempId!, dmMsg);
+                                return;
+                            }
+                        }
+                    }
+                    
+                    this.addMessage(dmMsg);
+
+                    // Update last read if it's from the other user
+                    if (envelope.senderId === this.dmData.userId) {
+                        this.setLastReadId(this.dmData.userId, Math.max(this.getLastReadId(this.dmData.userId), envelope.id));
+                    }
+                } catch (error) {
+                    console.error("Failed to decrypt incoming DM:", error);
+                }
+            }
+        }
+        if (response.type === "dmEdited" && this.dmData) {
+            const { id, iv, ciphertext, salt, iv2, wrappedMk } = response.data;
+            try {
+                // Decrypt new content in-place
+                const plaintext = await decryptDm(
+                    { 
+                        id, 
+                        senderId: 0, 
+                        recipientId: 0, 
+                        iv, 
+                        ciphertext, 
+                        salt, 
+                        iv2, 
+                        wrappedMk, 
+                        timestamp: new Date().toISOString() 
+                    }, 
+                    this.dmData.publicKey
+                );
+                let content = plaintext;
+                let files: Message["files"] | undefined = undefined;
+                try {
+                    const obj = JSON.parse(plaintext) as EncryptedMessageJson;
+                    if (obj.type === "text" && obj.data) {
+                        content = obj.data.content;
+                        files = obj.data.files;
+                    }
+                } catch {}
+                const updates: Partial<Message> = { content, is_edited: true, files };
+                this.updateMessage(id, updates);
+            } catch (e) {
+                this.updateMessage(id, { is_edited: true });
+            }
+        }
+        if (response.type === "dmDeleted" && this.dmData) {
+            const { id } = response.data;
+            this.removeMessage(id);
+        }
+        if (response.type === "dmReactionUpdate" && this.dmData) {
+            const { dm_envelope_id, reactions } = response.data;
+            this.updateMessageReactions(dm_envelope_id, reactions);
+        }
+    };
+
+    // Reset for DM switching
+    reset(): void {
+        this.dmData = null;
+        this.messagesLoaded = false;
+        this.clearMessages();
+        this.updateState({
+            id: "dm",
+            title: "Select a user",
+            profilePicture: undefined,
+            online: false
+        });
+    }
+
+    // Update auth token
+    setAuthToken(authToken: string): void {
+        this.currentUser.authToken = authToken;
+    }
+
+    // Helper functions for localStorage
+    private getLastReadId(userId: number): number {
+        try {
+            const v = localStorage.getItem(`dmLastRead:${userId}`);
+            return v ? Number(v) : 0;
+        } catch {
+            return 0;
+        }
+    }
+
+    private setLastReadId(userId: number, id: number): void {
+        try {
+            localStorage.setItem(`dmLastRead:${userId}`, String(id));
+        } catch {}
+    }
+
+    async handleDeleteMessage(messageId: number): Promise<void> {
+        if (!this.currentUser.authToken || !this.dmData) return;
+        
+        // Remove message immediately from UI
+        this.deleteMessageImmediately(messageId);
+        
+        // Fire and forget server deletion; UI already updated
+        await deleteDmEnvelope(messageId, this.dmData.userId, this.currentUser.authToken);
+    }
+
+    async handleEditMessage(messageId: number, content: string): Promise<void> {
+        if (!this.currentUser.authToken || !this.dmData) return;
+        const msg = this.getMessages().find(m => m.id === messageId);
+        // Build encrypted JSON preserving files and reply_to if present
+        const payload: EncryptedMessageJson = {
+            type: "text",
+            data: {
+                content: content,
+                files: msg?.files,
+                reply_to_id: msg?.reply_to?.id ?? undefined
+            }
+        };
+        editDmEnvelope(messageId, this.dmData.publicKey, JSON.stringify(payload), this.currentUser.authToken).catch((e) => {
+            console.error("Failed to edit DM:", e);
+        });
+    }
+    
+    handleProfileClick(): void {}
+
+    updateMessageReactions(dmEnvelopeId: number, reactions: any[]): void {
+        const messages = this.getMessages();
+        const messageIndex = messages.findIndex(msg => 
+            msg.runtimeData?.dmEnvelope?.id === dmEnvelopeId
+        );
+        
+        if (messageIndex !== -1) {
+            const updatedMessage = { ...messages[messageIndex] };
+            updatedMessage.reactions = reactions;
+            this.updateMessage(updatedMessage.id, { reactions: reactions });
+        }
+    }
+}

frontend/src/pages/chat/ui/right/panels/MessagePanel.ts

@@ -0,0 +1,353 @@
+import type { Message, WebSocketMessage } from "../../../../../core/types";
+import type { UserState } from "../../../state";
+
+export interface MessagePanelState {
+    id: string;
+    title: string;
+    profilePicture?: string;
+    online: boolean;
+    messages: Message[];
+    isLoading: boolean;
+    isTyping: boolean;
+}
+
+export interface MessagePanelCallbacks {
+    onSendMessage: (content: string, files: File[]) => void;
+    onEditMessage: (messageId: number, content: string) => void;
+    onDeleteMessage: (messageId: number) => void;
+    onReplyToMessage: (messageId: number, content: string) => void;
+    onProfileClick: () => void;
+}
+
+export abstract class MessagePanel {
+    protected state: MessagePanelState;
+    public onStateChange: ((state: MessagePanelState) => void) | null = () => {};
+    protected readonly currentUser: UserState;
+    private pendingMessages: Map<string, { timeoutId: NodeJS.Timeout; message: Message }> = new Map();
+
+    constructor(
+        id: string,
+        currentUser: UserState,
+    ) {
+        this.state = {
+            id,
+            title: "",
+            online: false,
+            messages: [],
+            isLoading: false,
+            isTyping: false
+        };
+        this.currentUser = currentUser;
+    }
+
+    // Abstract methods that must be implemented by subclasses
+    abstract activate(): Promise<void>;
+    abstract deactivate(): void;
+    abstract loadMessages(): Promise<void>;
+    protected abstract sendMessage(content: string, replyToId?: number, files?: File[]): Promise<void>;
+    abstract isDm(): boolean;
+    abstract handleWebSocketMessage(response: WebSocketMessage<any>): Promise<void>;
+
+    // Common methods
+    protected updateState(updates: Partial<MessagePanelState>): void {
+        this.state = { ...this.state, ...updates };
+        if (this.onStateChange) {
+            this.onStateChange(this.state);
+        }
+    }
+
+    protected addMessage(message: Message): void {
+        const messageExists = this.state.messages.some(msg => msg.id === message.id);
+        if (!messageExists) {
+            this.updateState({
+                messages: [...this.state.messages, message]
+            });
+        }
+    }
+
+    protected updateMessage(messageId: number, updates: Partial<Message>): void {
+        this.updateState({
+            messages: this.state.messages.map(msg => {
+                // Handle temporary messages (negative IDs) by matching temp ID
+                if (messageId === -1 && msg.runtimeData?.sendingState?.tempId) {
+                    const pending = this.pendingMessages.get(msg.runtimeData.sendingState.tempId);
+                    if (pending) {
+                        return { ...pending.message, ...updates };
+                    }
+                }
+                return msg.id === messageId ? { ...msg, ...updates } : msg;
+            })
+        });
+    }
+
+    protected removeMessage(messageId: number): void {
+        this.updateState({
+            messages: this.state.messages.filter(msg => msg.id !== messageId)
+        });
+    }
+
+    protected updateMessageReactions(messageId: number, reactions: any[]): void {
+        this.updateState({
+            messages: this.state.messages.map(msg => 
+                msg.id === messageId ? { ...msg, reactions } : msg
+            )
+        });
+    }
+
+    protected clearMessages(): void {
+        this.updateState({ messages: [] });
+    }
+
+    protected setLoading(loading: boolean): void {
+        this.updateState({ isLoading: loading });
+    }
+
+    protected setTyping(typing: boolean): void {
+        this.updateState({ isTyping: typing });
+    }
+
+    // Getters
+    getState(): MessagePanelState {
+        return { ...this.state };
+    }
+
+    getId(): string {
+        return this.state.id;
+    }
+
+    getTitle(): string {
+        return this.state.title;
+    }
+
+    getMessages(): Message[] {
+        return [...this.state.messages];
+    }
+
+    // ========== PUBLIC API ==========
+    
+    // Event handlers
+    handleSendMessage(content: string, replyToId?: number, files: File[] = []): void {
+        this.sendMessageWithImmediateDisplay(content, replyToId, files);
+    }
+
+    async retryMessage(messageId: number): Promise<void> {
+        const message = this.getMessages().find(m => m.id === messageId);
+        if (!message?.runtimeData?.sendingState?.retryData) return;
+
+        const { content, replyToId, files } = message.runtimeData.sendingState.retryData;
+        
+        // Create new temp ID for retry
+        const tempId = `temp_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+        
+        // Update status back to sending and create new temp message
+        const retryMessage: Message = {
+            ...message,
+            id: -1, // Temporary ID
+            // Preserve existing files (which may have blob URLs for display)
+            files: message.files,
+            runtimeData: {
+                ...message.runtimeData,
+                sendingState: {
+                    status: 'sending',
+                    tempId,
+                    retryData: {
+                        content,
+                        replyToId,
+                        files: files || []
+                    }
+                }
+            }
+        };
+
+        // Update the existing message to sending state
+        this.updateState({
+            messages: this.state.messages.map(msg => {
+                if (msg.id === messageId) {
+                    return retryMessage;
+                }
+                return msg;
+            })
+        });
+
+        const timeoutId = setTimeout(() => {
+            this.handleMessageTimeout(tempId);
+        }, 10000);
+
+        this.pendingMessages.set(tempId, { timeoutId, message: retryMessage });
+
+        try {
+            await this.sendMessage(content, replyToId, files || []);
+            // Note: Success will be handled by WebSocket confirmation
+        } catch (error) {
+            console.error("Failed to retry message:", error);
+            // Clear the timeout since we're handling the failure immediately
+            clearTimeout(timeoutId);
+            this.pendingMessages.delete(tempId);
+            
+            // Update message to failed state directly
+            this.updateState({
+                messages: this.state.messages.map(msg => {
+                    if (msg.runtimeData?.sendingState?.tempId === tempId) {
+                        return {
+                            ...msg,
+                            runtimeData: {
+                                ...msg.runtimeData,
+                                sendingState: {
+                                    ...msg.runtimeData.sendingState,
+                                    status: 'failed'
+                                }
+                            }
+                        };
+                    }
+                    return msg;
+                })
+            });
+        }
+    }
+
+    handleMessageConfirmed(tempId: string, confirmedMessage: Message): void {
+        const pending = this.pendingMessages.get(tempId);
+        if (pending) {
+            clearTimeout(pending.timeoutId);
+            this.pendingMessages.delete(tempId);
+            
+            // Replace temporary message with confirmed one
+            this.updateState({
+                messages: this.state.messages.map(msg => {
+                    if (msg.runtimeData?.sendingState?.tempId === tempId) {
+                        return {
+                            ...confirmedMessage,
+                            // Preserve files from the temporary message (which have blob URLs for immediate display)
+                            files: msg.files,
+                            runtimeData: {
+                                ...confirmedMessage.runtimeData,
+                                sendingState: {
+                                    status: 'sent'
+                                }
+                            }
+                        };
+                    }
+                    return msg;
+                })
+            });
+        }
+    }
+
+    protected deleteMessageImmediately(messageId: number): void {
+        this.updateState({
+            messages: this.state.messages.filter(msg => msg.id !== messageId)
+        });
+    }
+
+    destroy(): void {
+        // Clear all pending timeouts
+        this.pendingMessages.forEach(({ timeoutId }) => {
+            clearTimeout(timeoutId);
+        });
+        this.pendingMessages.clear();
+    }
+
+    // ========== PRIVATE METHODS ==========
+    
+    // Create and display message immediately with sending state
+    private async sendMessageWithImmediateDisplay(content: string, replyToId?: number, files: File[] = []): Promise<void> {
+        if (!content.trim() && files.length === 0) return;
+
+        // Create temporary message for immediate display
+        const tempId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        const tempMessage: Message = {
+            id: -1, // Temporary negative ID
+            username: this.currentUser.currentUser?.username ?? "You",
+            content: content.trim(),
+            is_read: false,
+            is_edited: false,
+            timestamp: new Date().toISOString(),
+            files: files.map(file => ({
+                name: file.name,
+                path: URL.createObjectURL(file),
+                encrypted: false
+            })),
+            runtimeData: {
+                sendingState: {
+                    status: 'sending',
+                    tempId,
+                    retryData: {
+                        content: content.trim(),
+                        replyToId,
+                        files: [...files]
+                    }
+                }
+            }
+        };
+
+        // Add reply reference if present
+        if (replyToId) {
+            const referencedMessage = this.getMessages().find(m => m.id === replyToId);
+            if (referencedMessage) {
+                tempMessage.reply_to = referencedMessage;
+            }
+        }
+
+        // Add message immediately
+        this.addMessage(tempMessage);
+
+        // Set up timeout for failure
+        const timeoutId = setTimeout(() => {
+            this.handleMessageTimeout(tempId);
+        }, 10000); // 10 seconds timeout
+
+        // Store pending message
+        this.pendingMessages.set(tempId, { timeoutId, message: tempMessage });
+
+        // Actually send the message
+        try {
+            await this.sendMessage(content, replyToId, files);
+            // Message sent successfully - will be updated when WebSocket confirms
+        } catch (error) {
+            console.error("Failed to send message:", error);
+            this.handleMessageFailed(tempId);
+        }
+    }
+
+    // Handle message timeout (10 seconds)
+    private handleMessageTimeout(tempId: string): void {
+        this.updateMessageToFailed(tempId);
+    }
+
+    // Handle message send failure
+    private handleMessageFailed(tempId: string): void {
+        this.updateMessageToFailed(tempId);
+    }
+
+    // Helper method to update message to failed state
+    private updateMessageToFailed(tempId: string): void {
+        const pending = this.pendingMessages.get(tempId);
+        if (pending) {
+            clearTimeout(pending.timeoutId);
+            this.pendingMessages.delete(tempId);
+            
+            // Update message to failed state
+            this.updateState({
+                messages: this.state.messages.map(msg => {
+                    if (msg.runtimeData?.sendingState?.tempId === tempId) {
+                        return {
+                            ...msg,
+                            runtimeData: {
+                                ...msg.runtimeData,
+                                sendingState: {
+                                    ...msg.runtimeData.sendingState,
+                                    status: 'failed'
+                                }
+                            }
+                        };
+                    }
+                    return msg;
+                })
+            });
+        }
+    }
+
+    abstract handleEditMessage(messageId: number, content: string): Promise<void>;
+    abstract handleDeleteMessage(messageId: number): Promise<void>;
+    abstract handleProfileClick(): void;
+}

frontend/src/pages/chat/ui/right/panels/PublicChatPanel.ts

@@ -0,0 +1,201 @@
+import { MessagePanel } from "./MessagePanel";
+import { API_BASE_URL } from "../../../../../core/config";
+import { getAuthHeaders } from "../../../../../core/api/authApi";
+import { request } from "../../../../../core/websocket";
+import type { ChatWebSocketMessage, Message, SendMessageRequest, ReactionUpdateWebSocketMessage } from "../../../../../core/types";
+import type { UserState } from "../../../state";
+
+export class PublicChatPanel extends MessagePanel {
+    private messagesLoaded: boolean = false;
+
+    constructor(
+        chatName: string,
+        currentUser: UserState
+    ) {
+        super(`public-${chatName}`, currentUser);
+        this.updateState({
+            title: chatName,
+            online: true // Public chats are always "online"
+        });
+    }
+
+    isDm(): boolean {
+        return false;
+    }
+
+    async activate(): Promise<void> {
+        // Don't load messages immediately during activation to prevent animation freeze
+        // Messages will be loaded after the animation completes
+    }
+
+    deactivate(): void {
+        // Public chat doesn't need special cleanup
+    }
+
+    clearMessages(): void {
+        super.clearMessages();
+        this.messagesLoaded = false;
+    }
+
+    async loadMessages(): Promise<void> {
+        if (!this.currentUser.authToken || this.messagesLoaded) return;
+
+        this.setLoading(true);
+        try {
+            const response = await fetch(`${API_BASE_URL}/get_messages`, {
+                headers: getAuthHeaders(this.currentUser.authToken)
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                if (data.messages && data.messages.length > 0) {
+                    this.clearMessages();
+                    data.messages.forEach((msg: Message) => {
+                        this.addMessage(msg);
+                    });
+                }
+            }
+            this.messagesLoaded = true;
+        } catch (error) {
+            console.error("Error loading public chat messages:", error);
+        } finally {
+            this.setLoading(false);
+        }
+    }
+
+    protected async sendMessage(content: string, replyToId?: number, files: File[] = []): Promise<void> {
+        if (!this.currentUser.authToken || !content.trim()) return;
+
+        try {
+            if (files.length === 0) {
+                const response = await request({
+                    data: {
+                        content: content.trim(), 
+                        reply_to_id: replyToId ?? null
+                    },
+                    credentials: {
+                        scheme: "Bearer",
+                        credentials: this.currentUser.authToken
+                    },
+                    type: "sendMessage"
+                } satisfies SendMessageRequest);
+                if (response.error) {
+                    console.error("Error sending message:", response.error);
+                }
+            } else {
+                const form = new FormData();
+                form.append("payload", JSON.stringify({
+                    content: content.trim(),
+                    reply_to_id: replyToId ?? null 
+                } satisfies SendMessageRequest["data"]));
+                for (const f of files) form.append("files", f, f.name);
+                const res = await fetch(`${API_BASE_URL}/send_message`, {
+                    method: "POST",
+                    headers: getAuthHeaders(this.currentUser.authToken, false),
+                    body: form
+                });
+                if (!res.ok) {
+                    console.error("Error sending message with files", await res.text());
+                }
+            }
+        } catch (error) {
+            console.error("Error sending message:", error);
+        }
+    }
+
+    // Handle incoming WebSocket messages
+    async handleWebSocketMessage(response: ChatWebSocketMessage | ReactionUpdateWebSocketMessage): Promise<void> {
+        switch (response.type) {
+            case 'messageEdited':
+                if (response.data) {
+                    this.updateMessage(response.data.id, response.data);
+                }
+                break;
+            case 'messageDeleted':
+                if (response.data && response.data.message_id) {
+                    this.removeMessage(response.data.message_id);
+                }
+                break;
+            case 'newMessage':
+                if (response.data) {
+                    const newMsg = response.data;
+                    
+                    // Check if this is a confirmation of a message we sent
+                    const isOurMessage = newMsg.username === this.currentUser.currentUser?.username;
+                    if (isOurMessage) {
+                        // This is our message being confirmed, find the temp message and replace it
+                        const tempMessages = this.getMessages().filter(m => m.id === -1 && m.runtimeData?.sendingState?.tempId);
+                        for (const tempMsg of tempMessages) {
+                            if (tempMsg.runtimeData?.sendingState?.retryData?.content === newMsg.content) {
+                                this.handleMessageConfirmed(tempMsg.runtimeData.sendingState.tempId!, newMsg);
+                                return;
+                            }
+                        }
+                    }
+                    
+                    this.addMessage(newMsg);
+                }
+                break;
+            case 'reactionUpdate':
+                if (response.data) {
+                    this.updateMessageReactions(response.data.message_id, response.data.reactions);
+                }
+                break;
+        }
+    };
+
+    // Reset for chat switching
+    reset(): void {
+        this.messagesLoaded = false;
+        this.clearMessages();
+    }
+
+    // Update chat name
+    setChatName(chatName: string): void {
+        this.updateState({
+            id: `public-${chatName}`,
+            title: chatName
+        });
+    }
+
+    // Update auth token
+    setAuthToken(authToken: string): void {
+        this.currentUser.authToken = authToken;
+    }
+
+    async handleEditMessage(messageId: number, content: string): Promise<void> {
+        if (!this.currentUser.authToken) return;
+        try {
+            await request({
+                type: "editMessage",
+                data: {
+                    message_id: messageId,
+                    content: content
+                },
+                credentials: {
+                    scheme: "Bearer",
+                    credentials: this.currentUser.authToken
+                }
+            });
+        } catch (error) {
+            console.error("Failed to edit message:", error);
+        }
+    }
+
+    async handleDeleteMessage(id: number): Promise<void> {
+        // Remove message immediately from UI
+        this.deleteMessageImmediately(id);
+        
+        // Fire and forget server deletion; UI already updated
+        await request({
+            type: "deleteMessage",
+            data: { message_id: id },
+            credentials: { 
+                scheme: "Bearer", 
+                credentials: this.currentUser.authToken! 
+            }
+        });
+    }
+    
+    handleProfileClick(): void {}
+}