Implement usernames and profile sections

frontend/src/pages/chat/ui/left/ChatHeader.tsx

@@ -13,7 +13,8 @@ export function ChatHeader() {
     const handleProfileClick = () => {
         setProfileDialog({
             userId: user.currentUser?.id,
-            username: profileData?.nickname || "Пользователь",
+            username: profileData?.username || "Пользователь",
+            display_name: profileData?.display_name || "Пользователь",
             profilePicture: profileData?.profile_picture,
             bio: profileData?.description,
             memberSince: user.currentUser?.created_at,

frontend/src/pages/chat/ui/left/ChatTabs.tsx

@@ -1,21 +1,16 @@
 import { useAppState, type ChatTabs } from "@/pages/chat/state";
 import { UnifiedChatsList } from "./UnifiedChatsList";
-import type { FormEvent } from "react";
 import type { Tabs } from "mdui/components/tabs";
 
 export function ChatTabs() {
     const { chat, setActiveTab } = useAppState();
 
-    function handleChange(e: FormEvent<Tabs> & CustomEvent<{ value: string }>) {
-        setActiveTab(e.detail.value as ChatTabs);
-    }
-
     return (
         <div className="chat-tabs">
             <mdui-tabs
                 value={chat.activeTab}
                 full-width
-                onChange={handleChange}>
+                onChange={(e) => setActiveTab((e.target as Tabs).value as ChatTabs)}>
                 <mdui-tab value="chats">
                     Чаты
                 </mdui-tab>

frontend/src/pages/chat/ui/left/UnifiedChatsList.tsx

@@ -7,7 +7,7 @@ import { fetchUserPublicKey } from "@/core/api/dmApi";
 import type { Message } from "@/core/types";
 import { websocket } from "@/core/websocket";
 import { onlineStatusManager } from "@/core/onlineStatusManager";
-import { OnlineIndicator } from "../right/OnlineIndicator";
+import { OnlineIndicator } from "@/pages/chat/ui/right/OnlineIndicator";
 import defaultAvatar from "@/images/default-avatar.png";
 
 interface PublicChat {
@@ -20,6 +20,7 @@ interface PublicChat {
 interface DMConversation {
     id: number;
     username: string;
+    display_name: string;
     profile_picture?: string;
     online?: boolean;
     type: "dm";
@@ -84,6 +85,7 @@ export function UnifiedChatsList() {
         const dmChatItems: ChatItem[] = dmUsers.map((user: DMUser) => ({
             id: user.id,
             username: user.username,
+            display_name: user.display_name,
             profile_picture: user.profile_picture,
             online: user.online,
             type: "dm" as const,
@@ -172,13 +174,13 @@ export function UnifiedChatsList() {
         };
     }, [allChats]);
 
-    const formatPublicChatMessage = (chatId: string): string => {
+    function formatPublicChatMessage(chatId: string): string {
         const lastMessage = lastMessages[chatId];
         if (!lastMessage) {
             return "";
         }
 
-        const isCurrentUser = lastMessage.username === user.currentUser?.username;
+        const isCurrentUser = lastMessage.user_id === user.currentUser?.id;
         const prefix = isCurrentUser ? "Вы: " : `${lastMessage.username}: `;
 
         const maxContentLength = 50 - prefix.length;
@@ -187,14 +189,13 @@ export function UnifiedChatsList() {
             : lastMessage.content;
 
         return prefix + content;
-    };
+    }
 
-
-    const handlePublicChatClick = async (chatName: string) => {
+    async function handlePublicChatClick(chatName: string) {
         await switchToPublicChat(chatName);
-    };
+    }
 
-    const handleDMClick = async (dmConversation: DMConversation) => {
+    async function handleDMClick(dmConversation: DMConversation) {
         if (!dmConversation.publicKey) {
             const authToken = useAppState.getState().user.authToken;
             if (!authToken) return;
@@ -215,7 +216,7 @@ export function UnifiedChatsList() {
             profilePicture: dmConversation.profile_picture,
             online: dmConversation.online || false
         });
-    };
+    }
 
     if (isLoadingUsers) {
         return (
@@ -256,7 +257,7 @@ export function UnifiedChatsList() {
                     return (
                         <mdui-list-item
                             key={`dm-${chat.id}`}
-                            headline={chat.username}
+                            headline={chat.display_name}
                             onClick={() => handleDMClick(chat)}
                             style={{ cursor: "pointer" }}
                         >
@@ -266,7 +267,7 @@ export function UnifiedChatsList() {
                             <div slot="icon" style={{ position: "relative", width: "40px", height: "40px", display: "inline-block" }}>
                                 <img
                                     src={chat.profile_picture || defaultAvatar}
-                                    alt={chat.username}
+                                    alt={chat.display_name}
                                     style={{
                                         width: "40px",
                                         height: "40px",