Implement profile

frontend/src/__userPanel/userpanel.ts

@@ -0,0 +1,107 @@
+/**
+ * @fileoverview Left panel UI controls and interactions
+ * @description Handles chat collapse/expand, chat switching, and profile dialog
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+import { Dialog } from "mdui/components/dialog";
+import { loadProfilePicture } from "./profile/upload";
+import { id } from "../utils/utils";
+import { publicChatPanel } from "../chat/chat.ts";
+
+// сварачивание и разворачивание чата
+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");
+const dialogClose = id("profile-dialog-close")!;
+
+/**
+ * Sets up chat collapse functionality
+ * @private
+ */
+function setupChatCollapse(): void {
+    chatCollapseBtn.addEventListener('click', () => {
+        chatCollapseBtn.style.display = 'none';
+        chatInner.style.display = 'none';
+    });
+}
+
+/**
+ * Sets up chat switching functionality
+ * @private
+ */
+function animateChatSwitch(updateFn: () => void): Promise<void> {
+    return new Promise((resolve, reject) => {
+        // Ensure panel is visible
+        chatCollapseBtn.style.display = 'flex';
+        chatInner.style.display = 'flex';
+
+        // 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 = 'Общий чат';
+            publicChatPanel.activate();
+        });
+    });
+    
+    chat2.addEventListener('click', () => {
+        animateChatSwitch(() => {
+            chatName.textContent = 'Общий чат 2';
+            publicChatPanel.activate();
+        });
+    });
+}
+
+/**
+ * Sets up profile dialog functionality
+ * @private
+ */
+function setupProfileDialog(): void {
+    profileButton.addEventListener('click', () => {
+        dialog.open = true;
+        loadProfilePicture();
+    });
+
+    dialogClose.addEventListener("click", () => {
+        dialog.open = false;
+    });
+}
+
+setupChatCollapse();
+setupChatSwitching();
+setupProfileDialog();