Implement chat switching animation

frontend/src/ui/components/chat/ChatMain.tsx

@@ -1,13 +0,0 @@
-import { ChatMainHeader } from "./ChatMainHeader";
-import { ChatMessages } from "./ChatMessages";
-import { ChatInputWrapper } from "./ChatInputWrapper";
-
-export function ChatMain() {
-    return (
-        <div className="chat-main" id="chat-inner">
-            <ChatMainHeader />
-            <ChatMessages />
-            <ChatInputWrapper />
-        </div>
-    );
-}

frontend/src/ui/components/chat/ChatMainHeader.tsx

@@ -1,15 +1,8 @@
 import { useChat } from "../../hooks/useChat";
-import { useState } from "react";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 
 export function ChatMainHeader() {
     const { currentChat } = useChat();
-    const [isCollapsed, setIsCollapsed] = useState(false);
-
-    const handleCollapse = () => {
-        setIsCollapsed(!isCollapsed);
-        // TODO: Implement chat collapse animation
-    };
 
     return (
         <div className="chat-header">
@@ -22,7 +15,6 @@ export function ChatMainHeader() {
                         Онлайн
                     </p>
                 </div>
-                <a href="#" id="hide-chat" onClick={handleCollapse}>Свернуть чат</a>
             </div>
         </div>
     );

frontend/src/ui/components/chat/RightPanel.tsx

@@ -1,9 +1,18 @@
-import { ChatMain } from "./ChatMain";
+import { useChat } from "../../hooks/useChat";
+import { ChatInputWrapper } from "./ChatInputWrapper";
+import { ChatMainHeader } from "./ChatMainHeader";
+import { ChatMessages } from "./ChatMessages";
 
 export function RightPanel() {
+    const { isChatSwitching } = useChat();
+
     return (
-        <div className="chat-container">
-            <ChatMain />
+        <div className={`chat-container ${!isChatSwitching && "chat-switch-in"} chat-switch-out`}>
+            <div className="chat-main" id="chat-inner">
+                <ChatMainHeader />
+                <ChatMessages />
+                <ChatInputWrapper />
+            </div>
         </div>
     );
 }

frontend/src/ui/hooks/useChat.ts

@@ -4,6 +4,7 @@ import { request, websocket } from "../../websocket";
 import { API_BASE_URL } from "../../core/config";
 import type { Message, WebSocketMessage } from "../../core/types";
 import { getAuthHeaders } from "../../auth/api";
+import { delay } from "../../utils/utils";
 
 export function useChat() {
     const { 
@@ -16,6 +17,7 @@ export function useChat() {
         setActiveTab,
         setDmUsers,
         setActiveDm,
+        setIsChatSwitching,
         user
     } = useAppState();
 
@@ -112,9 +114,14 @@ export function useChat() {
 
     // Reset messages loaded flag and clear messages when chat changes
     useEffect(() => {
+        (async () => {
+            setIsChatSwitching(true);
+            await delay(250);
             messagesLoadedRef.current = false;
             clearMessages(); // Clear messages when switching chats
             loadMessages();
+            setIsChatSwitching(false);
+        })();
     }, [chat.currentChat, clearMessages]);
 
     return {
@@ -123,6 +130,8 @@ export function useChat() {
         activeTab: chat.activeTab,
         dmUsers: chat.dmUsers,
         activeDm: chat.activeDm,
+        isChatSwitching: chat.isChatSwitching,
+        setIsChatSwitching,
         sendMessage,
         updateMessage,
         removeMessage,

frontend/src/ui/state.ts

@@ -4,12 +4,19 @@ import { request } from "../websocket";
 
 type Page = "login" | "register" | "chat"
 
+interface ActiveDM {
+    userId: number; 
+    username: string;
+    publicKey: string | null
+}
+
 interface ChatState {
     messages: Message[];
     currentChat: string;
     activeTab: "chats" | "channels" | "contacts" | "dms";
     dmUsers: User[];
-    activeDm: { userId: number; username: string; publicKey: string | null } | null;
+    activeDm: ActiveDM | null;
+    isChatSwitching: boolean;
 }
 
 interface UserState {
@@ -31,6 +38,7 @@ interface AppState {
     setDmUsers: (users: User[]) => void;
     setActiveDm: (dm: ChatState["activeDm"]) => void;
     clearMessages: () => void;
+    setIsChatSwitching: (value: boolean) => void;
     
     // User state
     user: UserState;
@@ -48,8 +56,15 @@ export const useAppState = create<AppState>((set, get) => ({
         currentChat: "Общий чат",
         activeTab: "chats",
         dmUsers: [],
-        activeDm: null
+        activeDm: null,
+        isChatSwitching: false
     },
+    setIsChatSwitching: (value: boolean) => set((state) => ({
+        chat: {
+            ...state.chat,
+            isChatSwitching: value
+        }
+    })),
     addMessage: (message: Message) => set((state) => {
         // Check if message already exists to prevent duplicates
         const messageExists = state.chat.messages.some(msg => msg.id === message.id);