implement display of sender name in chat

src/Model/Chat/chatModel.ts

@@ -181,8 +181,8 @@ export default class ChatModel {
     };
 
     readonly getSendingData = (): [string, string, string] => {
-        const senderName: string = this.settingsModel.username || "?";
         const id: string = this.settingsModel.userid;
+        const senderName: string = this.settingsModel.username || "?";
 
         const allChannels: string[] = [this.id];
         for (const secondaryChannel of this.info.secondaryChannels) {
@@ -395,8 +395,8 @@ export default class ChatModel {
 
     static createChatMessage = async (
         channel: string,
-        sender: string,
         senderId: string,
+        senderName: string,
         encryptionKey: string,
         body: string,
         inlineReplyId?: string,
@@ -408,7 +408,7 @@ export default class ChatModel {
             id: v4(),
 
             channel,
-            sender,
+            senderName,
             senderId,
             body,
             dateSent: createTimestamp(),
@@ -495,8 +495,8 @@ export interface ChatMessage extends ValidObject {
     readonly id: string;
 
     readonly channel: string;
-    readonly sender: string;
     readonly senderId: string;
+    readonly senderName: string;
     body: string;
     readonly dateSent: string;
     readonly inlineReplyId?: string;
@@ -539,7 +539,7 @@ export const ChatMessageReference: ChatMessage = {
     id: "",
 
     channel: "",
-    sender: "",
+    senderName: "",
     senderId: "",
     body: "",
     dateSent: "",

src/View/Components/chatMessage.tsx

@@ -38,7 +38,7 @@ export function ChatMessage(
             <div class="main tile">
                 <div class="text-container">
                     <span class="sender-name ellipsis">
-                        {chatMessageViewModel.sender}
+                        {chatMessageViewModel.senderName}
                     </span>
                     <span
                         class="body"

src/View/Components/inlineReply.tsx

@@ -12,7 +12,7 @@ export function InlineReply(chatMessageViewModel: ChatMessageViewModel) {
 
     return (
         <div class="inline-reply" on:click={scroll}>
-            <span>{reply.sender}</span>
+            <span>{reply.senderId}</span>
             <b class="ellipsis" subscribe:innerText={reply.body}></b>
         </div>
     );

src/View/Components/replyPreview.tsx

@@ -9,7 +9,7 @@ export function ReplyPreview(
     return (
         <div class="reply-preview">
             <div class="surface blur">
-                <span class="secondary">{chatMessageViewModel.sender}</span>
+                <span class="secondary">{chatMessageViewModel.senderId}</span>
                 <b
                     class="ellipsis"
                     subscribe:innerText={chatMessageViewModel.body}

src/View/Components/replyViewHeader.tsx

@@ -18,7 +18,7 @@ export function ReplyViewHeader(
                 ? ""
                 : coreViewModel.translations.chatPage.message.replyHeaderLabel(
                       messagePageViewModel.replyViewSelectedMessage.value
-                          .sender,
+                          .senderId,
                   ),
     );
     const message = React.createProxyState(

src/View/Modals/chatMessageInfoModal.tsx

@@ -27,7 +27,7 @@ export function ChatMessageInfoModal(
                         {InfoTile(
                             "account_circle",
                             coreViewModel.translations.chatPage.message.sentBy,
-                            chatMessageViewModel.sender,
+                            chatMessageViewModel.senderId,
                         )}
                         {InfoTile(
                             "schedule",

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -12,7 +12,8 @@ export default class ChatMessageViewModel {
     // data
     chatMessage: ChatMessage;
     channel: string = "";
-    sender: string = "";
+    senderId: string = "";
+    senderName: string = "";
     dateSent: string = "";
     body: React.State<string> = new React.State("");
     inlineReply: ChatMessageViewModel | undefined = undefined;
@@ -165,7 +166,7 @@ export default class ChatMessageViewModel {
             this.allReactions.set(reaction.senderId, reaction);
         }
 
-        if (reaction.senderId != this.coreViewModel.settingsModel.username)
+        if (reaction.senderId != this.coreViewModel.settingsModel.userid)
             return;
         this.userReaction.value = reaction.isDeleting
             ? undefined
@@ -183,7 +184,8 @@ export default class ChatMessageViewModel {
     // load
     loadData = (): void => {
         this.channel = this.chatMessage.channel;
-        this.sender = this.chatMessage.sender;
+        this.senderId = this.chatMessage.senderId;
+        this.senderName = this.chatMessage.senderName;
         this.dateSent = new Date(this.chatMessage.dateSent).toLocaleString();
         this.body.value = this.chatMessage.body;
         this.status.value = this.chatMessage.status;

src/ViewModel/Global/notificationViewModel.ts

@@ -87,7 +87,7 @@ export default class NotificationViewModel {
             messageId: message.id,
             chat,
             fullChannel,
-            sender: message.sender,
+            sender: message.senderName,
             body: message.body,
         };
     }

src/ViewModel/Pages/messagePageViewModel.ts

@@ -110,7 +110,7 @@ export default class MessagePageViewModel extends Context {
             this.coreViewModel,
             this,
             chatMessage,
-            chatMessage.sender ==
+            chatMessage.senderName ==
                 this.chatViewModel.settingsViewModel.username.value,
         );