Implement usernames and profile sections

frontend/src/pages/chat/ui/right/ChatMessages.tsx

@@ -133,7 +133,7 @@ export function ChatMessages({ messages = [], children, isDm = false, onReplySel
                         message={message}
                         isAuthor={isDm ?
                             (message.runtimeData?.dmEnvelope?.senderId === user.currentUser?.id) :
-                            (message.username === user.currentUser?.username)
+                            (message.user_id === user.currentUser?.id)
                         }
                         onContextMenu={handleContextMenu}
                         onReactionClick={handleReactionClick}
@@ -158,7 +158,7 @@ export function ChatMessages({ messages = [], children, isDm = false, onReplySel
                     message={contextMenu.message}
                     isAuthor={isDm ?
                         (contextMenu.message.runtimeData?.dmEnvelope?.senderId === user.currentUser?.id) :
-                        (contextMenu.message.username === user.currentUser?.username)
+                        (contextMenu.message.user_id === user.currentUser?.id)
                     }
                     onEdit={handleEdit}
                     onReply={handleReply}

frontend/src/pages/chat/ui/right/Message.tsx

@@ -10,7 +10,7 @@ import { ecdhSharedSecret, deriveWrappingKey } from "@/utils/crypto/asymmetric";
 import { importAesGcmKey, aesGcmDecrypt } from "@/utils/crypto/symmetric";
 import { getAuthHeaders } from "@/core/api/authApi";
 import { useAppState } from "@/pages/chat/state";
-import { fetchUserProfile } from "@/core/api/profileApi";
+import { fetchUserProfileById } from "@/core/api/profileApi";
 import { ub64 } from "@/utils/utils";
 import { useImmer } from "use-immer";
 import { createPortal } from "react-dom";
@@ -389,10 +389,10 @@ export function Message({ message, isAuthor, onContextMenu, onReactionClick, isD
     };
 
     async function handleProfileClick() {
-        if (!user.authToken || !message.username) return;
+        if (!user.authToken || !message.user_id) return;
 
         try {
-            const userProfile = await fetchUserProfile(user.authToken, message.username);
+            const userProfile = await fetchUserProfileById(user.authToken, message.user_id);
             if (userProfile) {
                 setProfileDialog({
                     ...userProfile,

frontend/src/pages/chat/ui/right/panels/DMPanel.ts

@@ -7,7 +7,7 @@ import {
     editDmEnvelope,
     deleteDmEnvelope
 } from "@/core/api/dmApi";
-import { fetchUserProfile } from "@/core/api/profileApi";
+import { fetchUserProfileById } from "@/core/api/profileApi";
 import type { DmEncryptedJSON, DmEnvelope, DMWebSocketMessage, EncryptedMessageJson, Message } from "@/core/types";
 import type { UserState, ProfileDialogData } from "@/pages/chat/state";
 import { formatDMUsername } from "@/pages/chat/hooks/useDM";
@@ -84,6 +84,7 @@ export class DMPanel extends MessagePanel {
 
         const dmMsg: Message = {
             id: env.id,
+            user_id: env.senderId,
             content: content,
             username: username,
             timestamp: env.timestamp,
@@ -353,12 +354,13 @@ export class DMPanel extends MessagePanel {
         if (!this.dmData || !this.currentUser.authToken) return null;
 
         try {
-            const userProfile = await fetchUserProfile(this.currentUser.authToken, this.dmData.username);
+            const userProfile = await fetchUserProfileById(this.currentUser.authToken, this.dmData.userId);
             if (!userProfile) return null;
 
             return {
                 userId: userProfile.id,
                 username: userProfile.username,
+                display_name: userProfile.display_name,
                 profilePicture: userProfile.profile_picture,
                 bio: userProfile.bio,
                 memberSince: userProfile.created_at,

frontend/src/pages/chat/ui/right/panels/MessagePanel.ts

@@ -258,6 +258,7 @@ export abstract class MessagePanel {
         const tempId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
         const tempMessage: Message = {
             id: -1, // Temporary negative ID
+            user_id: this.currentUser.currentUser?.id ?? -1,
             username: this.currentUser.currentUser?.username ?? "You",
             content: content.trim(),
             is_read: false,

frontend/src/pages/chat/ui/right/panels/PublicChatPanel.ts

@@ -121,7 +121,7 @@ export class PublicChatPanel extends MessagePanel {
                     const newMsg = response.data;
 
                     // Check if this is a confirmation of a message we sent
-                    const isOurMessage = newMsg.username === this.currentUser.currentUser?.username;
+                    const isOurMessage = newMsg.user_id === this.currentUser.currentUser?.id;
                     if (isOurMessage) {
                         // This is our message being confirmed, find the temp message and replace it
                         const tempMessages = this.getMessages().filter(m => m.id === -1 && m.runtimeData?.sendingState?.tempId);
@@ -199,7 +199,8 @@ export class PublicChatPanel extends MessagePanel {
 
     async getProfile(): Promise<ProfileDialogData | null> {
         return {
-            username: "Общий чат",
+            username: "general",
+            display_name: "Общий чат",
             bio: "Общаемся со всеми пользователями FromChat!",
             isOwnProfile: false
         };