Convert components to static HTML

frontend/index.html

@@ -194,7 +194,7 @@
         </div>
 
         <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
-            <div class="profile-dialog-content">
+            <div class="content">
                 <div class="header-top">
                     <div class="profile-picture-container">
                         <img id="profile-picture" src="./src/images/default-avatar.png" alt="Ваше фото" />
@@ -320,6 +320,89 @@
                 </div>
             </div>
         </mdui-dialog>
+
+        <div id="message-context-menu">
+            <div class="context-menu-item" data-action="reply">
+                <span class="material-symbols">reply</span>
+                Reply
+            </div>
+            <div class="context-menu-item" data-action="edit">
+                <span class="material-symbols">edit</span>
+                Edit
+            </div>
+            <div class="context-menu-item" data-action="delete">
+                <span class="material-symbols">delete</span>
+                Delete
+            </div>
+        </div>
+
+        <mdui-dialog id="edit-message-dialog" close-on-overlay-click close-on-esc>
+            <div class="dialog-content">
+                <h3>Edit Message</h3>
+                <mdui-text-field 
+                    id="edit-message-input"
+                    label="Edit Message" 
+                    variant="outlined" 
+                    multiline 
+                    rows="4" 
+                    placeholder="Edit your message..."
+                    maxlength="1000">
+                </mdui-text-field>
+                <div class="dialog-actions">
+                    <mdui-button id="edit-cancel" variant="outlined">Cancel</mdui-button>
+                    <mdui-button id="edit-save">Save</mdui-button>
+                </div>
+            </div>
+        </mdui-dialog>
+
+        <mdui-dialog id="reply-message-dialog" close-on-overlay-click close-on-esc>
+            <div class="dialog-content">
+                <h3>Reply to Message</h3>
+                <div class="reply-preview" id="reply-preview"></div>
+                <mdui-text-field 
+                    id="reply-message-input"
+                    label="Reply" 
+                    variant="outlined" 
+                    multiline 
+                    rows="4" 
+                    placeholder="Type your reply..."
+                    maxlength="1000">
+                </mdui-text-field>
+                <div class="dialog-actions">
+                    <mdui-button id="reply-cancel" variant="outlined">Cancel</mdui-button>
+                    <mdui-button id="reply-send">Send Reply</mdui-button>
+                </div>
+            </div>
+        </mdui-dialog>
+
+        <mdui-dialog id="user-profile-dialog" close-on-overlay-click close-on-esc>
+            <div class="content">
+                <div class="profile-picture-section">
+                    <img class="profile-picture" src="" alt="Profile Picture">
+                </div>
+                <div class="profile-info">
+                    <div class="username-section">
+                        <h4 class="username"></h4>
+                        <div class="online-status"></div>
+                    </div>
+                    <div class="bio-section">
+                        <label>Bio:</label>
+                        <div class="bio-display"></div>
+                    </div>
+                    <div class="profile-stats">
+                        <div class="stat">
+                            <span class="stat-label">Member since:</span>
+                            <span class="stat-value member-since"></span>
+                        </div>
+                        <div class="stat">
+                            <span class="stat-label">Last seen:</span>
+                            <span class="stat-value last-seen"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </mdui-dialog>
+
         <script src="src/main.ts" type="module"></script>
     </body>
 </html>

frontend/src/chat.ts

@@ -10,8 +10,8 @@ import { API_BASE_URL } from "./config";
 import { websocket } from "./websocket";
 import type { Message, Messages, WebSocketMessage } from "./types";
 import { formatTime } from "./utils/utils";
-import { messageContextMenu } from "./message-context-menu";
-import { userProfileDialog } from "./user-profile-dialog";
+import { show as showContextMenu } from "./message-context-menu";
+import { show as showUserProfileDialog } from "./user-profile-dialog";
 
 /**
  * Adds a new message to the chat interface
@@ -50,7 +50,7 @@ export function addMessage(message: Message, isAuthor: boolean): void {
         // Add click handler to profile picture
         profileImg.style.cursor = 'pointer';
         profileImg.addEventListener('click', () => {
-            userProfileDialog.show(message.username);
+            showUserProfileDialog(message.username);
         });
         
         profilePicDiv.appendChild(profileImg);
@@ -65,7 +65,7 @@ export function addMessage(message: Message, isAuthor: boolean): void {
         // Add click handler to username
         usernameDiv.style.cursor = 'pointer';
         usernameDiv.addEventListener('click', () => {
-            userProfileDialog.show(message.username);
+            showUserProfileDialog(message.username);
         });
         
         messageInner.appendChild(usernameDiv);
@@ -111,7 +111,7 @@ export function addMessage(message: Message, isAuthor: boolean): void {
     // Add right-click context menu
     messageDiv.addEventListener('contextmenu', (e) => {
         e.preventDefault();
-        messageContextMenu.show(message, e.clientX, e.clientY);
+        showContextMenu(message, e.clientX, e.clientY);
     });
 
     // Прокрутка к новому сообщению

frontend/src/css/_chat.scss

@@ -320,7 +320,7 @@
 }
 
 // Message Context Menu
-.message-context-menu {
+#message-context-menu {
     position: fixed;
     background-color: $color-dark-surface-container;
     border-radius: 8px;
@@ -393,126 +393,3 @@
     }
 }
 
-// User profile dialog content styles
-.profile-dialog-content {
-    padding: 1.5rem;
-    display: flex;
-    gap: 1.5rem;
-
-    .profile-picture-section {
-        flex-shrink: 0;
-
-        .profile-picture {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            object-fit: cover;
-            border: 2px solid $color-dark-outline;
-        }
-    }
-
-    .profile-info {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-
-        .username-section {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-
-            .username {
-                margin: 0;
-                color: $color-dark-on-surface;
-                font-size: 1.1rem;
-                font-weight: 600;
-            }
-
-            .online-status {
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-                font-size: 0.85rem;
-                padding: 0.25rem 0.5rem;
-                border-radius: 12px;
-                font-weight: 500;
-
-                &.online {
-                    color: $success;
-                    background-color: rgba(76, 175, 80, 0.1);
-
-                    .online-indicator {
-                        width: 8px;
-                        height: 8px;
-                        border-radius: 50%;
-                        background-color: $success;
-                    }
-                }
-
-                &.offline {
-                    color: $color-dark-on-surface-variant;
-                    background-color: rgba(255, 255, 255, 0.05);
-
-                    .offline-indicator {
-                        width: 8px;
-                        height: 8px;
-                        border-radius: 50%;
-                        background-color: $color-dark-on-surface-variant;
-                    }
-                }
-            }
-        }
-
-        .bio-section {
-            label {
-                display: block;
-                color: $color-dark-on-surface-variant;
-                font-size: 0.85rem;
-                font-weight: 500;
-                margin-bottom: 0.5rem;
-            }
-
-            .bio-display {
-                color: $color-dark-on-surface;
-                font-size: 0.9rem;
-                line-height: 1.4;
-                padding: 0.75rem;
-                background-color: $color-dark-surface;
-                border-radius: 8px;
-                border: 1px solid $color-dark-outline;
-                min-height: 60px;
-            }
-
-            .bio-actions {
-                display: flex;
-                gap: 0.5rem;
-                margin-top: 0.5rem;
-            }
-        }
-
-        .profile-stats {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-
-            .stat {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 0.5rem 0;
-
-                .stat-label {
-                    color: $color-dark-on-surface-variant;
-                    font-size: 0.85rem;
-                }
-
-                .stat-value {
-                    color: $color-dark-on-surface;
-                    font-size: 0.85rem;
-                    font-weight: 500;
-                }
-            }
-        }
-    }
-}

frontend/src/css/_profile.scss

@@ -1,13 +1,11 @@
 @use "common/colors" as *;
 @use "common/material" as *;
 
-#profile-dialog {
-    .profile-dialog-content {
+#profile-dialog .content {
     display: flex;
     flex-direction: column;
     gap: 24px;
     min-width: 400px;
-    }
 
     .header-top {
         display: flex;
@@ -69,6 +67,129 @@
     }
 }
 
+// User profile dialog content styles
+#user-profile-dialog .content {
+    display: flex;
+    gap: 1.5rem;
+
+    .profile-picture-section {
+        flex-shrink: 0;
+
+        .profile-picture {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid $color-dark-outline;
+        }
+    }
+
+    .profile-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        .username-section {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+
+            .username {
+                margin: 0;
+                color: $color-dark-on-surface;
+                font-size: 1.1rem;
+                font-weight: 600;
+            }
+
+            .online-status {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 0.85rem;
+                padding: 0.25rem 0.5rem;
+                border-radius: 12px;
+                font-weight: 500;
+
+                &.online {
+                    color: $success;
+                    background-color: rgba(76, 175, 80, 0.1);
+
+                    .online-indicator {
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 50%;
+                        background-color: $success;
+                    }
+                }
+
+                &.offline {
+                    color: $color-dark-on-surface-variant;
+                    background-color: rgba(255, 255, 255, 0.05);
+
+                    .offline-indicator {
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 50%;
+                        background-color: $color-dark-on-surface-variant;
+                    }
+                }
+            }
+        }
+
+        .bio-section {
+            label {
+                display: block;
+                color: $color-dark-on-surface-variant;
+                font-size: 0.85rem;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+            }
+
+            .bio-display {
+                color: $color-dark-on-surface;
+                font-size: 0.9rem;
+                line-height: 1.4;
+                padding: 0.75rem;
+                background-color: $color-dark-surface;
+                border-radius: 8px;
+                border: 1px solid $color-dark-outline;
+                min-height: 60px;
+            }
+
+            .bio-actions {
+                display: flex;
+                gap: 0.5rem;
+                margin-top: 0.5rem;
+            }
+        }
+
+        .profile-stats {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+
+            .stat {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0.5rem 0;
+
+                .stat-label {
+                    color: $color-dark-on-surface-variant;
+                    font-size: 0.85rem;
+                }
+
+                .stat-value {
+                    color: $color-dark-on-surface;
+                    font-size: 0.85rem;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}
+
 // Cropper Dialog Styles
 #cropper-dialog {
     .cropper-dialog-content {

frontend/src/css/common/_components.scss

@@ -4,10 +4,6 @@
     text-align: center;
 }
 
-.mt-3 {
-    margin-top: 1rem;
-}
-
 .alert {
     padding: 0.8rem 1rem;
     border-radius: 6px;

frontend/src/message-context-menu.ts

@@ -10,163 +10,76 @@ import { websocket } from "./websocket";
 import type { Message, WebSocketMessage } from "./types";
 import { showSuccess, showError } from "./utils/notification";
 
+
+let menu = document.getElementById("message-context-menu")!;
+let editDialog = document.getElementById("edit-message-dialog");
+let replyDialog = document.getElementById("reply-message-dialog");
+let currentMessage: Message | null = null;
+
+function init() {
+    bindEvents();
+}
+
 /**
- * Message context menu class
- * @class MessageContextMenu
- */
-class MessageContextMenu {
-    private menu: HTMLElement | null = null;
-    private editDialog: HTMLElement | null = null;
-    private replyDialog: HTMLElement | null = null;
-    private currentMessage: Message | null = null;
-
-    constructor() {
-        this.createMenu();
-        this.createDialogs();
-        this.bindEvents();
-    }
-
-    /**
-     * Creates the context menu element
-     * @private
-     */
-    private createMenu(): void {
-        this.menu = document.createElement('div');
-        this.menu.className = 'message-context-menu';
-        this.menu.innerHTML = `
-            <div class="context-menu-item" data-action="reply">
-                <span class="material-symbols">reply</span>
-                Reply
-            </div>
-            <div class="context-menu-item" data-action="edit">
-                <span class="material-symbols">edit</span>
-                Edit
-            </div>
-            <div class="context-menu-item" data-action="delete">
-                <span class="material-symbols">delete</span>
-                Delete
-            </div>
-        `;
-        document.body.appendChild(this.menu);
-    }
-
-    /**
-     * Creates the dialogs using MDUI components
-     * @private
-     */
-    private createDialogs(): void {
-        // Create edit dialog
-        this.editDialog = document.createElement('mdui-dialog');
-        this.editDialog.id = 'edit-message-dialog';
-        this.editDialog.setAttribute('close-on-overlay-click', '');
-        this.editDialog.setAttribute('close-on-esc', '');
-        this.editDialog.innerHTML = `
-            <div class="dialog-content">
-                <h3>Edit Message</h3>
-                <mdui-text-field 
-                    id="edit-message-input"
-                    label="Edit Message" 
-                    variant="outlined" 
-                    multiline 
-                    rows="4" 
-                    placeholder="Edit your message..."
-                    maxlength="1000">
-                </mdui-text-field>
-                <div class="dialog-actions">
-                    <mdui-button id="edit-cancel" variant="outlined">Cancel</mdui-button>
-                    <mdui-button id="edit-save">Save</mdui-button>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(this.editDialog);
-
-        // Create reply dialog
-        this.replyDialog = document.createElement('mdui-dialog');
-        this.replyDialog.id = 'reply-message-dialog';
-        this.replyDialog.setAttribute('close-on-overlay-click', '');
-        this.replyDialog.setAttribute('close-on-esc', '');
-        this.replyDialog.innerHTML = `
-            <div class="dialog-content">
-                <h3>Reply to Message</h3>
-                <div class="reply-preview" id="reply-preview"></div>
-                <mdui-text-field 
-                    id="reply-message-input"
-                    label="Reply" 
-                    variant="outlined" 
-                    multiline 
-                    rows="4" 
-                    placeholder="Type your reply..."
-                    maxlength="1000">
-                </mdui-text-field>
-                <div class="dialog-actions">
-                    <mdui-button id="reply-cancel" variant="outlined">Cancel</mdui-button>
-                    <mdui-button id="reply-send">Send Reply</mdui-button>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(this.replyDialog);
-    }
-
-    /**
  * Binds event listeners
  * @private
  */
-    private bindEvents(): void {
+function bindEvents(): void {
     // Context menu events
-        this.menu?.addEventListener('click', (e) => {
+    menu?.addEventListener('click', (e) => {
         const target = e.target as HTMLElement;
         const action = target.closest('.context-menu-item')?.getAttribute('data-action');
         
-            if (action && this.currentMessage) {
-                this.handleAction(action, this.currentMessage);
+        if (action && currentMessage) {
+            handleAction(action, currentMessage);
         }
     });
 
     // Close menu when clicking outside
     document.addEventListener('click', (e) => {
-            if (!this.menu?.contains(e.target as Node)) {
-                this.hide();
+        if (!menu?.contains(e.target as Node)) {
+            hide();
         }
     });
 
     // Edit dialog events
-        const editCancelBtn = this.editDialog?.querySelector('#edit-cancel');
-        const editSaveBtn = this.editDialog?.querySelector('#edit-save');
+    const editCancelBtn = editDialog?.querySelector('#edit-cancel');
+    const editSaveBtn = editDialog?.querySelector('#edit-save');
 
-        editCancelBtn?.addEventListener('click', () => this.hideEditDialog());
-        editSaveBtn?.addEventListener('click', () => this.saveEdit());
+    editCancelBtn?.addEventListener('click', () => hideEditDialog());
+    editSaveBtn?.addEventListener('click', () => saveEdit());
 
     // Reply dialog events
-        const replyCancelBtn = this.replyDialog?.querySelector('#reply-cancel');
-        const replySendBtn = this.replyDialog?.querySelector('#reply-send');
+    const replyCancelBtn = replyDialog?.querySelector('#reply-cancel');
+    const replySendBtn = replyDialog?.querySelector('#reply-send');
 
-        replyCancelBtn?.addEventListener('click', () => this.hideReplyDialog());
-        replySendBtn?.addEventListener('click', () => this.sendReply());
+    replyCancelBtn?.addEventListener('click', () => hideReplyDialog());
+    replySendBtn?.addEventListener('click', () => sendReply());
 
     // Keyboard shortcuts
     document.addEventListener('keydown', (e) => {
         if (e.key === 'Escape') {
-                this.hide();
-                this.hideEditDialog();
-                this.hideReplyDialog();
+            hide();
+            hideEditDialog();
+            hideReplyDialog();
         }
     });
-    }
+}
 
-    /**
+/**
  * Shows the context menu at the specified position
  * @param {Message} message - The message to show menu for
  * @param {number} x - X coordinate
  * @param {number} y - Y coordinate
  */
-    public show(message: Message, x: number, y: number): void {
-        if (!this.menu) return;
+export function show(message: Message, x: number, y: number): void {
+    if (!menu) return;
 
-        this.currentMessage = message;
+    currentMessage = message;
     
     // Only show edit and delete for own messages
-        const editItem = this.menu.querySelector('[data-action="edit"]') as HTMLElement;
-        const deleteItem = this.menu.querySelector('[data-action="delete"]') as HTMLElement;
+    const editItem = menu.querySelector('[data-action="edit"]') as HTMLElement;
+    const deleteItem = menu.querySelector('[data-action="delete"]') as HTMLElement;
     
     if (message.username === currentUser?.username) {
         editItem.style.display = 'flex';
@@ -201,83 +114,83 @@ class MessageContextMenu {
     adjustedX = Math.max(0, adjustedX);
     adjustedY = Math.max(0, adjustedY);
 
-        this.menu.style.left = `${adjustedX}px`;
-        this.menu.style.top = `${adjustedY}px`;
-        this.menu.style.display = 'block';
-    }
+    menu.style.left = `${adjustedX}px`;
+    menu.style.top = `${adjustedY}px`;
+    menu.style.display = 'block';
+}
 
-    /**
+/**
  * Hides the context menu
  */
-    public hide(): void {
-        if (this.menu) {
-            this.menu.style.display = 'none';
-        }
-        this.currentMessage = null;
+export function hide(): void {
+    if (menu) {
+        menu.style.display = 'none';
     }
+    currentMessage = null;
+}
 
-    /**
+/**
  * Handles context menu actions
  * @param {string} action - The action to perform
  * @param {Message} message - The message to act on
  * @private
  */
-    private handleAction(action: string, message: Message): void {
-        this.hide();
+function handleAction(action: string, message: Message): void {
+    hide();
 
     switch (action) {
         case 'edit':
-                this.showEditDialog(message);
+            showEditDialog(message);
             break;
         case 'delete':
-                this.deleteMessage(message);
+            deleteMessage(message);
             break;
         case 'reply':
-                this.showReplyDialog(message);
+            showReplyDialog(message);
             break;
     }
-    }
+}
 
-    /**
+/**
  * Shows the edit dialog
  * @param {Message} message - The message to edit
  * @private
  */
-    private showEditDialog(message: Message): void {
-        if (!this.editDialog) return;
+function showEditDialog(message: Message): void {
+    if (!editDialog) return;
 
-        const textField = this.editDialog.querySelector('#edit-message-input') as any;
+    const textField = editDialog.querySelector('#edit-message-input') as any;
     if (textField) {
         textField.value = message.content;
     }
     
-        this.currentMessage = message;
-        (this.editDialog as any).open = true;
+    currentMessage = message;
+    (editDialog as any).open = true;
     
     // Focus the text field
     setTimeout(() => {
         textField?.focus();
     }, 100);
-    }
+}
 
-    /**
+/**
  * Hides the edit dialog
  * @private
  */
-    private hideEditDialog(): void {
-        if (this.editDialog) {
-            (this.editDialog as any).open = false;
-        }
+function hideEditDialog(): void {
+    if (editDialog) {
+        (editDialog as any).open = false;
     }
+}
 
-    /**
+/**
  * Saves the edited message
  * @private
  */
-    private saveEdit(): void {
-        if (!this.currentMessage || !this.editDialog) return;
+function saveEdit(): void {
+    if (!currentMessage || !editDialog) return;
 
-        const textField = this.editDialog.querySelector('#edit-message-input') as any;
+    const textField = editDialog.querySelector('#edit-message-input') as any;
     const newContent = textField?.value?.trim() || '';
 
     if (!newContent) {
@@ -288,7 +201,7 @@ class MessageContextMenu {
     const payload: WebSocketMessage = {
         type: "editMessage",
         data: {
-                message_id: this.currentMessage.id,
+            message_id: currentMessage.id,
             content: newContent
         },
         credentials: {
@@ -306,22 +219,22 @@ class MessageContextMenu {
             showError(response.error.detail);
         } else {
             showSuccess('Message edited successfully');
-                this.hideEditDialog();
+            hideEditDialog();
         }
     };
     websocket.addEventListener("message", callback);
     websocket.send(JSON.stringify(payload));
-    }
+}
 
-    /**
+/**
  * Shows the reply dialog
  * @param {Message} message - The message to reply to
  * @private
  */
-    private showReplyDialog(message: Message): void {
-        if (!this.replyDialog) return;
+function showReplyDialog(message: Message): void {
+    if (!replyDialog) return;
 
-        const preview = this.replyDialog.querySelector('#reply-preview') as HTMLElement;
+    const preview = replyDialog.querySelector('#reply-preview') as HTMLElement;
     if (preview) {
         preview.innerHTML = `
             <div class="reply-preview-content">
@@ -330,34 +243,34 @@ class MessageContextMenu {
         `;
     }
     
-        this.currentMessage = message;
-        (this.replyDialog as any).open = true;
+    currentMessage = message;
+    (replyDialog as any).open = true;
     
     // Focus the text field
     setTimeout(() => {
-            const textField = this.replyDialog?.querySelector('#reply-message-input') as any;
+        const textField = replyDialog?.querySelector('#reply-message-input') as any;
         textField?.focus();
     }, 100);
-    }
+}
 
-    /**
+/**
  * Hides the reply dialog
  * @private
  */
-    private hideReplyDialog(): void {
-        if (this.replyDialog) {
-            (this.replyDialog as any).open = false;
-        }
+function hideReplyDialog(): void {
+    if (replyDialog) {
+        (replyDialog as any).open = false;
     }
+}
 
-    /**
+/**
  * Sends the reply message
  * @private
  */
-    private sendReply(): void {
-        if (!this.currentMessage || !this.replyDialog) return;
+function sendReply(): void {
+    if (!currentMessage || !replyDialog) return;
 
-        const textField = this.replyDialog.querySelector('#reply-message-input') as any;
+    const textField = replyDialog.querySelector('#reply-message-input') as any;
     const content = textField?.value?.trim() || '';
 
     if (!content) {
@@ -369,7 +282,7 @@ class MessageContextMenu {
         type: "replyMessage",
         data: {
             content: content,
-                reply_to_id: this.currentMessage.id
+            reply_to_id: currentMessage.id
         },
         credentials: {
             scheme: "Bearer",
@@ -386,7 +299,7 @@ class MessageContextMenu {
             showError(response.error.detail);
         } else {
             showSuccess('Reply sent successfully');
-                this.hideReplyDialog();
+            hideReplyDialog();
             if (textField) {
                 textField.value = '';
             }
@@ -394,14 +307,14 @@ class MessageContextMenu {
     };
     websocket.addEventListener("message", callback);
     websocket.send(JSON.stringify(payload));
-    }
+}
 
-    /**
+/**
  * Deletes a message
  * @param {Message} message - The message to delete
  * @private
  */
-    private deleteMessage(message: Message): void {
+function deleteMessage(message: Message): void {
     if (!confirm('Are you sure you want to delete this message?')) {
         return;
     }
@@ -430,8 +343,6 @@ class MessageContextMenu {
     };
     websocket.addEventListener("message", callback);
     websocket.send(JSON.stringify(payload));
-    }
 }
 
-// Export singleton instance
-export const messageContextMenu = new MessageContextMenu();
+init();

frontend/src/user-profile-dialog.ts

@@ -11,102 +11,43 @@ import type { UserProfile } from "./types";
 import { showError, showSuccess } from "./utils/notification";
 import { formatTime } from "./utils/utils";
 
+
+let dialog = document.getElementById("user-profile-dialog")!;
+let currentProfile: UserProfile | null = null;
+let isOwnProfile: boolean = false;
+
+function init() {
+    bindEvents();
+}
+
 /**
- * User profile dialog class
- * @class UserProfileDialog
- */
-class UserProfileDialog {
-    private dialog: HTMLElement | null = null;
-    private currentProfile: UserProfile | null = null;
-    private isOwnProfile: boolean = false;
-
-    constructor() {
-        this.createDialog();
-        this.bindEvents();
-    }
-
-    /**
-     * Creates the profile dialog using MDUI components
-     * @private
-     */
-    private createDialog(): void {
-        this.dialog = document.createElement('mdui-dialog');
-        this.dialog.id = 'user-profile-dialog';
-        this.dialog.setAttribute('close-on-overlay-click', '');
-        this.dialog.setAttribute('close-on-esc', '');
-        this.dialog.innerHTML = `
-            <div class="profile-dialog-content">
-                <div class="profile-picture-section">
-                    <img class="profile-picture" src="" alt="Profile Picture">
-                </div>
-                <div class="profile-info">
-                    <div class="username-section">
-                        <h4 class="username"></h4>
-                        <div class="online-status"></div>
-                    </div>
-                    <div class="bio-section">
-                        <label>Bio:</label>
-                        <div class="bio-display"></div>
-                        <mdui-text-field 
-                            id="bio-edit-field"
-                            label="Bio" 
-                            variant="outlined" 
-                            multiline 
-                            rows="3" 
-                            placeholder="Write something about yourself..."
-                            maxlength="500"
-                            style="display: none;">
-                        </mdui-text-field>
-                        <div class="bio-actions" style="display: none;">
-                            <mdui-button id="save-bio-btn">Save</mdui-button>
-                            <mdui-button id="cancel-bio-btn" variant="outlined">Cancel</mdui-button>
-                        </div>
-                        <mdui-button id="edit-bio-btn" variant="outlined" style="display: none;">Edit Bio</mdui-button>
-                    </div>
-                    <div class="profile-stats">
-                        <div class="stat">
-                            <span class="stat-label">Member since:</span>
-                            <span class="stat-value member-since"></span>
-                        </div>
-                        <div class="stat">
-                            <span class="stat-label">Last seen:</span>
-                            <span class="stat-value last-seen"></span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(this.dialog);
-    }
-
-    /**
  * Binds event listeners
  * @private
  */
-    private bindEvents(): void {
+function bindEvents(): void {
     // Edit bio events
-        const editBioBtn = this.dialog?.querySelector('#edit-bio-btn');
-        const saveBioBtn = this.dialog?.querySelector('#save-bio-btn');
-        const cancelBioBtn = this.dialog?.querySelector('#cancel-bio-btn');
+    const editBioBtn = dialog?.querySelector('#edit-bio-btn');
+    const saveBioBtn = dialog?.querySelector('#save-bio-btn');
+    const cancelBioBtn = dialog?.querySelector('#cancel-bio-btn');
 
-        editBioBtn?.addEventListener('click', () => this.startEditBio());
-        saveBioBtn?.addEventListener('click', () => this.saveBio());
-        cancelBioBtn?.addEventListener('click', () => this.cancelEditBio());
+    editBioBtn?.addEventListener('click', () => startEditBio());
+    saveBioBtn?.addEventListener('click', () => saveBio());
+    cancelBioBtn?.addEventListener('click', () => cancelEditBio());
 
     // Keyboard shortcuts
     document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && this.dialog?.getAttribute('open') !== null) {
-                this.hide();
+        if (e.key === 'Escape' && dialog?.getAttribute('open') !== null) {
+            hide();
         }
     });
-    }
+}
 
-    /**
+/**
  * Shows the profile dialog for a specific user
  * @param {string} username - Username to show profile for
  */
-    public async show(username: string): Promise<void> {
-        if (!this.dialog) return;
+export async function show(username: string): Promise<void> {
+    if (!dialog) return;
 
     try {
         const response = await fetch(`${API_BASE_URL}/user/${username}`, {
@@ -118,54 +59,54 @@ class UserProfileDialog {
         }
 
         const profile: UserProfile = await response.json();
-            this.currentProfile = profile;
-            this.isOwnProfile = profile.username === currentUser?.username;
-            this.populateDialog(profile);
-            (this.dialog as any).open = true;
+        currentProfile = profile;
+        isOwnProfile = profile.username === currentUser?.username;
+        populateDialog(profile);
+        (dialog as any).open = true;
 
     } catch (error) {
         showError('Failed to load user profile');
         console.error('Error loading user profile:', error);
     }
-    }
+}
 
-    /**
+/**
  * Populates the dialog with user data
  * @param {UserProfile} profile - User profile data
  * @private
  */
-    private populateDialog(profile: UserProfile): void {
-        if (!this.dialog) return;
+function populateDialog(profile: UserProfile): void {
+    if (!dialog) return;
 
     // Profile picture
-        const profilePic = this.dialog.querySelector('.profile-picture') as HTMLImageElement;
+    const profilePic = dialog.querySelector('.profile-picture') as HTMLImageElement;
     profilePic.src = profile.profile_picture || './src/images/default-avatar.png';
-        profilePic.onerror = () => {
+    profilePic.addEventListener("error", () => {
         profilePic.src = './src/images/default-avatar.png';
-        };
+    });
 
     // Username
-        const usernameEl = this.dialog.querySelector('.username') as HTMLElement;
+    const usernameEl = dialog.querySelector('.username') as HTMLElement;
     usernameEl.textContent = profile.username;
 
     // Online status
-        const onlineStatus = this.dialog.querySelector('.online-status') as HTMLElement;
+    const onlineStatus = dialog.querySelector('.online-status') as HTMLElement;
     if (profile.online) {
         onlineStatus.innerHTML = '<span class="online-indicator"></span> Online';
-            onlineStatus.className = 'online-status online';
+        onlineStatus.classList.add("online-status", "online");
     } else {
         onlineStatus.innerHTML = `<span class="offline-indicator"></span> Last seen ${formatTime(profile.last_seen)}`;
-            onlineStatus.className = 'online-status offline';
+        onlineStatus.classList.add("online-status", "offline");
     }
 
     // Bio
-        const bioDisplay = this.dialog.querySelector('.bio-display') as HTMLElement;
-        const bioEdit = this.dialog.querySelector('#bio-edit-field') as any;
+    const bioDisplay = dialog.querySelector('.bio-display') as HTMLElement;
+    const bioEdit = dialog.querySelector('#bio-edit-field') as any;
     
     if (profile.bio) {
         bioDisplay.textContent = profile.bio;
     } else {
-            bioDisplay.textContent = this.isOwnProfile ? 'No bio yet. Click "Edit Bio" to add one!' : 'No bio available.';
+        bioDisplay.textContent = isOwnProfile ? 'No bio yet. Click "Edit Bio" to add one!' : 'No bio available.';
     }
 
     if (bioEdit) {
@@ -173,28 +114,24 @@ class UserProfileDialog {
     }
 
     // Stats
-        const memberSince = this.dialog.querySelector('.member-since') as HTMLElement;
-        const lastSeen = this.dialog.querySelector('.last-seen') as HTMLElement;
+    const memberSince = dialog.querySelector('.member-since') as HTMLElement;
+    const lastSeen = dialog.querySelector('.last-seen') as HTMLElement;
     
     memberSince.textContent = formatTime(profile.created_at);
     lastSeen.textContent = formatTime(profile.last_seen);
+}
 
-        // Show/hide edit button for own profile
-        const editBioBtn = this.dialog.querySelector('#edit-bio-btn') as HTMLElement;
-        editBioBtn.style.display = this.isOwnProfile ? 'block' : 'none';
-    }
-
-    /**
+/**
  * Starts editing the bio
  * @private
  */
-    private startEditBio(): void {
-        if (!this.dialog) return;
+function startEditBio(): void {
+    if (!dialog) return;
 
-        const bioDisplay = this.dialog.querySelector('.bio-display') as HTMLElement;
-        const bioEdit = this.dialog.querySelector('#bio-edit-field') as any;
-        const bioActions = this.dialog.querySelector('.bio-actions') as HTMLElement;
-        const editBioBtn = this.dialog.querySelector('#edit-bio-btn') as HTMLElement;
+    const bioDisplay = dialog.querySelector('.bio-display') as HTMLElement;
+    const bioEdit = dialog.querySelector('#bio-edit-field') as any;
+    const bioActions = dialog.querySelector('.bio-actions') as HTMLElement;
+    const editBioBtn = dialog.querySelector('#edit-bio-btn') as HTMLElement;
 
     bioDisplay.style.display = 'none';
     if (bioEdit) bioEdit.style.display = 'block';
@@ -205,16 +142,16 @@ class UserProfileDialog {
         bioEdit.focus();
         bioEdit.setSelectionRange(bioEdit.value.length, bioEdit.value.length);
     }
-    }
+}
 
-    /**
+/**
  * Saves the bio
  * @private
  */
-    private async saveBio(): Promise<void> {
-        if (!this.dialog || !this.currentProfile) return;
+export async function saveBio(): Promise<void> {
+    if (!dialog || !currentProfile) return;
 
-        const bioEdit = this.dialog.querySelector('#bio-edit-field') as any;
+    const bioEdit = dialog.querySelector('#bio-edit-field') as any;
     const newBio = bioEdit?.value?.trim() || '';
 
     try {
@@ -232,51 +169,49 @@ class UserProfileDialog {
         }
 
         const result = await response.json();
-            this.currentProfile.bio = result.bio;
-            this.populateDialog(this.currentProfile);
-            this.cancelEditBio();
+        currentProfile.bio = result.bio;
+        populateDialog(currentProfile);
+        cancelEditBio();
         showSuccess('Bio updated successfully');
 
     } catch (error) {
         showError('Failed to update bio');
         console.error('Error updating bio:', error);
     }
-    }
+}
 
-    /**
+/**
  * Cancels bio editing
  * @private
  */
-    private cancelEditBio(): void {
-        if (!this.dialog) return;
+function cancelEditBio(): void {
+    if (!dialog) return;
 
-        const bioDisplay = this.dialog.querySelector('.bio-display') as HTMLElement;
-        const bioEdit = this.dialog.querySelector('#bio-edit-field') as any;
-        const bioActions = this.dialog.querySelector('.bio-actions') as HTMLElement;
-        const editBioBtn = this.dialog.querySelector('#edit-bio-btn') as HTMLElement;
+    const bioDisplay = dialog.querySelector('.bio-display') as HTMLElement;
+    const bioEdit = dialog.querySelector('#bio-edit-field') as any;
+    const bioActions = dialog.querySelector('.bio-actions') as HTMLElement;
+    const editBioBtn = dialog.querySelector('#edit-bio-btn') as HTMLElement;
 
     bioDisplay.style.display = 'block';
     if (bioEdit) bioEdit.style.display = 'none';
     bioActions.style.display = 'none';
-        editBioBtn.style.display = this.isOwnProfile ? 'block' : 'none';
+    editBioBtn.style.display = isOwnProfile ? 'block' : 'none';
 
     // Reset bio edit to current value
     if (bioEdit) {
-            bioEdit.value = this.currentProfile?.bio || '';
-        }
-    }
-
-    /**
-     * Hides the dialog
-     */
-    public hide(): void {
-        if (this.dialog) {
-            (this.dialog as any).open = false;
-        }
-        this.currentProfile = null;
-        this.isOwnProfile = false;
+        bioEdit.value = currentProfile?.bio || '';
     }
 }
 
-// Export singleton instance
-export const userProfileDialog = new UserProfileDialog();
+/**
+ * Hides the dialog
+ */
+export function hide(): void {
+    if (dialog) {
+        (dialog as any).open = false;
+    }
+    currentProfile = null;
+    isOwnProfile = false;
+}
+
+init();