From f54c7075e55da492ced5e2e5fdcb24509e78e20c Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 27 Aug 2025 19:35:12 +0300
Subject: [PATCH] Add chat switch animation

---
 .../src/resources/css/common/_animations.scss | 32 +++++++++++++
 frontend/src/userPanel/leftpanel.ts           | 48 ++++++++++++++++---
 2 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/frontend/src/resources/css/common/_animations.scss b/frontend/src/resources/css/common/_animations.scss
index ba14b1c..09904c8 100644
--- a/frontend/src/resources/css/common/_animations.scss
+++ b/frontend/src/resources/css/common/_animations.scss
@@ -12,4 +12,36 @@
   
 .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;
 }
\ No newline at end of file
diff --git a/frontend/src/userPanel/leftpanel.ts b/frontend/src/userPanel/leftpanel.ts
index 56a4724..8ecec8a 100644
--- a/frontend/src/userPanel/leftpanel.ts
+++ b/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';
+        });
     });
 }