From a6594d596009206eec280cf34269105973bc7295 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Fri, 5 Sep 2025 23:33:21 +0300
Subject: [PATCH] Hide the profile picture and username in DMs

---
 frontend/src/ui/components/chat/ChatMessages.tsx         | 5 +++--
 frontend/src/ui/components/chat/Message.tsx              | 7 ++++---
 frontend/src/ui/components/chat/MessagePanelRenderer.tsx | 2 +-
 frontend/src/ui/panels/DMPanel.ts                        | 4 ++++
 frontend/src/ui/panels/MessagePanel.ts                   | 1 +
 frontend/src/ui/panels/PublicChatPanel.ts                | 4 ++++
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ui/components/chat/ChatMessages.tsx b/frontend/src/ui/components/chat/ChatMessages.tsx
index 1ba1d4d..c585991 100644
--- a/frontend/src/ui/components/chat/ChatMessages.tsx
+++ b/frontend/src/ui/components/chat/ChatMessages.tsx
@@ -12,10 +12,11 @@ import { request } from "../../../websocket";
 
 interface ChatMessagesProps {
     messages?: MessageType[];
+    isDm?: boolean;
     children?: ReactNode;
 }
 
-export function ChatMessages({ messages: propMessages, children }: ChatMessagesProps) {
+export function ChatMessages({ messages: propMessages, children, isDm = false }: ChatMessagesProps) {
     const { messages: hookMessages } = useChat();
     const { user } = useAppState();
     
@@ -136,7 +137,7 @@ export function ChatMessages({ messages: propMessages, children }: ChatMessagesP
                         onProfileClick={handleProfileClick}
                         onContextMenu={handleContextMenu}
                         isLoadingProfile={isLoadingProfile}
-                    />
+                        isDm={isDm} />
                 ))}
                 {children}
             </div>
diff --git a/frontend/src/ui/components/chat/Message.tsx b/frontend/src/ui/components/chat/Message.tsx
index 0536724..e3705cf 100644
--- a/frontend/src/ui/components/chat/Message.tsx
+++ b/frontend/src/ui/components/chat/Message.tsx
@@ -8,9 +8,10 @@ interface MessageProps {
     onProfileClick: (username: string) => void;
     onContextMenu: (e: React.MouseEvent, message: MessageType) => void;
     isLoadingProfile?: boolean;
+    isDm?: boolean;
 }
 
-export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLoadingProfile = false }: MessageProps) {
+export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLoadingProfile = false, isDm = false }: MessageProps) {
     const handleContextMenu = (e: React.MouseEvent) => {
         console.log("Message context menu event triggered for message:", message.id);
         e.preventDefault();
@@ -26,7 +27,7 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
         >
             <div className="message-inner">
                 {/* Add profile picture for received messages */}
-                {!isAuthor && (
+                {!isAuthor && !isDm && (
                     <div className="message-profile-pic">
                         <img
                             src={message.profile_picture || defaultAvatar}
@@ -42,7 +43,7 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
                     </div>
                 )}
 
-                {!isAuthor && (
+                {!isAuthor && !isDm && (
                     <div 
                         className={`message-username ${isLoadingProfile ? "loading" : ""}`}
                         onClick={() => !isLoadingProfile && onProfileClick(message.username)} 
diff --git a/frontend/src/ui/components/chat/MessagePanelRenderer.tsx b/frontend/src/ui/components/chat/MessagePanelRenderer.tsx
index bf052de..2b276f0 100644
--- a/frontend/src/ui/components/chat/MessagePanelRenderer.tsx
+++ b/frontend/src/ui/components/chat/MessagePanelRenderer.tsx
@@ -118,7 +118,7 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
                         </div>
                     </div>
                 ): (
-                    <ChatMessages messages={panelState.messages}>
+                    <ChatMessages messages={panelState.messages} isDm={panel.isDm()}>
                         <div ref={messagesEndRef} />
                     </ChatMessages>
                 )}
diff --git a/frontend/src/ui/panels/DMPanel.ts b/frontend/src/ui/panels/DMPanel.ts
index af52a70..c9cb255 100644
--- a/frontend/src/ui/panels/DMPanel.ts
+++ b/frontend/src/ui/panels/DMPanel.ts
@@ -28,6 +28,10 @@ export class DMPanel extends MessagePanel {
         super("dm", user, callbacks, onStateChange);
     }
 
+    isDm(): boolean {
+        return true;
+    }
+
     async activate(): Promise<void> {
         if (this.dmData && !this.messagesLoaded) {
             await this.loadMessages();
diff --git a/frontend/src/ui/panels/MessagePanel.ts b/frontend/src/ui/panels/MessagePanel.ts
index 0fd3a75..78320ba 100644
--- a/frontend/src/ui/panels/MessagePanel.ts
+++ b/frontend/src/ui/panels/MessagePanel.ts
@@ -49,6 +49,7 @@ export abstract class MessagePanel {
     abstract deactivate(): void;
     abstract loadMessages(): Promise<void>;
     abstract sendMessage(content: string): Promise<void>;
+    abstract isDm(): boolean;
 
     // Common methods
     protected updateState(updates: Partial<MessagePanelState>): void {
diff --git a/frontend/src/ui/panels/PublicChatPanel.ts b/frontend/src/ui/panels/PublicChatPanel.ts
index 09532de..08e5eca 100644
--- a/frontend/src/ui/panels/PublicChatPanel.ts
+++ b/frontend/src/ui/panels/PublicChatPanel.ts
@@ -23,6 +23,10 @@ export class PublicChatPanel extends MessagePanel {
         });
     }
 
+    isDm(): boolean {
+        return false;
+    }
+
     async activate(): Promise<void> {
         if (!this.messagesLoaded) {
             await this.loadMessages();