Add chat switch animation

frontend/src/resources/css/common/_animations.scss

@@ -13,3 +13,35 @@
 .fade-in {
     animation: fadeIn 0.3s ease forwards;
 }
+
+@keyframes fadeOutUp {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.chat-switch-out {
+    animation: fadeOutUp 0.2s ease forwards;
+}
+
+.chat-switch-in {
+    animation: fadeInDown 0.2s ease forwards;
+}

frontend/src/userPanel/leftpanel.ts

@@ -14,6 +14,7 @@ const chatCollapseBtn = id('hide-chat')!;
 const chat1 = id('chat-list-chat-1')!;
 const chat2 = id('chat-list-chat-2')!;
 const chatInner = id('chat-inner')!;
+const chatContainer = document.querySelector('#chat-interface .chat-container') as HTMLElement;
 const chatName = id('chat-name')!;
 const profileButton = id('profile-open')!;
 const dialog = id<Dialog>("profile-dialog");
@@ -34,17 +35,52 @@ function setupChatCollapse(): void {
  * Sets up chat switching functionality
  * @private
  */
-function setupChatSwitching(): void {
-    chat1.addEventListener('click', () => {
+function animateChatSwitch(updateFn: () => void): Promise<void> {
+    return new Promise((resolve, reject) => {
+        // Ensure panel is visible
         chatCollapseBtn.style.display = 'flex';
         chatInner.style.display = 'flex';
-        chatName.textContent = 'общий чат';
+
+        // Start out animation
+        if (!chatContainer) {
+            reject("Chat container is missing");
+            return;
+        }
+        chatContainer.classList.remove('chat-switch-in');
+        chatContainer.classList.add('chat-switch-out');
+
+        const onOutEnd = () => {
+            chatContainer.removeEventListener('animationend', onOutEnd);
+            // Update content while hidden
+            updateFn();
+
+            // Then play in animation from the same offset
+            chatContainer.classList.remove('chat-switch-out');
+            chatContainer.classList.add('chat-switch-in');
+
+            const onInEnd = () => {
+                chatContainer.removeEventListener("animationend", onInEnd);
+                resolve();
+            }
+
+            chatContainer.addEventListener("animationend", onInEnd);
+        };
+
+        chatContainer.addEventListener('animationend', onOutEnd);
+    });
+}
+
+function setupChatSwitching(): void {
+    chat1.addEventListener('click', () => {
+        animateChatSwitch(() => {
+            chatName.textContent = 'Общий чат';
+        });
     });
     
     chat2.addEventListener('click', () => {
-        chatCollapseBtn.style.display = 'flex';
-        chatInner.style.display = 'flex';
-        chatName.textContent = 'общий чат 2';
+        animateChatSwitch(() => {
+            chatName.textContent = 'Общий чат 2';
+        });
     });
 }