Implement usernames and profile sections

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
         };