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>
     );
 }