feat: Add profile images

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.html

@@ -11,7 +11,8 @@
     (click)="openSenderProfileCard($event); $event.stopPropagation()"
   >
     <app-user-avatar
-      [name]="msg.senderName"
+      [name]="senderUser().displayName || msg.senderName"
+      [avatarUrl]="senderUser().avatarUrl"
       size="md"
     />
   </div>

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts

@@ -146,17 +146,11 @@ export class ChatMessageItemComponent {
   readonly deletedMessageContent = DELETED_MESSAGE_CONTENT;
   readonly isEditing = signal(false);
   readonly showEmojiPicker = signal(false);
-
-  editContent = '';
-
-  openSenderProfileCard(event: MouseEvent): void {
-    event.stopPropagation();
-    const el = event.currentTarget as HTMLElement;
+  readonly senderUser = computed<User>(() => {
     const msg = this.message();
-    // Look up full user from store
-    const users = this.allUsers();
-    const found = users.find((userEntry) => userEntry.id === msg.senderId || userEntry.oderId === msg.senderId);
-    const user: User = found ?? {
+    const found = this.allUsers().find((userEntry) => userEntry.id === msg.senderId || userEntry.oderId === msg.senderId);
+
+    return found ?? {
       id: msg.senderId,
       oderId: msg.senderId,
       username: msg.senderName,
@@ -165,6 +159,14 @@ export class ChatMessageItemComponent {
       role: 'member',
       joinedAt: 0
     };
+  });
+
+  editContent = '';
+
+  openSenderProfileCard(event: MouseEvent): void {
+    event.stopPropagation();
+    const el = event.currentTarget as HTMLElement;
+    const user = this.senderUser();
     const editable = user.id === this.currentUserId();
 
     this.profileCard.open(el, user, { editable });