perf: use lookup for chats

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

@@ -12,7 +12,7 @@ import {
   signal,
   ViewChild
 } from '@angular/core';
-import { Store } from '@ngrx/store';
+
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
   lucideCheck,
@@ -36,7 +36,7 @@ import {
   Message,
   User
 } from '../../../../../../shared-kernel';
-import { selectAllUsers } from '../../../../../../store/users/users.selectors';
+
 import {
   ChatAudioPlayerComponent,
   ChatVideoPlayerComponent,
@@ -121,8 +121,6 @@ export class ChatMessageItemComponent {
 
   private readonly attachmentsSvc = inject(AttachmentFacade);
   private readonly klipy = inject(KlipyService);
-  private readonly store = inject(Store);
-  private readonly allUsers = this.store.selectSignal(selectAllUsers);
   private readonly profileCard = inject(ProfileCardService);
   private readonly attachmentVersion = signal(this.attachmentsSvc.updated());
 
@@ -130,6 +128,7 @@ export class ChatMessageItemComponent {
   readonly repliedMessage = input<Message | undefined>();
   readonly currentUserId = input<string | null>(null);
   readonly isAdmin = input(false);
+  readonly userLookup = input<ReadonlyMap<string, User>>(new Map());
 
   readonly replyRequested = output<ChatMessageReplyEvent>();
   readonly deleteRequested = output<ChatMessageDeleteEvent>();
@@ -148,7 +147,7 @@ export class ChatMessageItemComponent {
   readonly showEmojiPicker = signal(false);
   readonly senderUser = computed<User>(() => {
     const msg = this.message();
-    const found = this.allUsers().find((userEntry) => userEntry.id === msg.senderId || userEntry.oderId === msg.senderId);
+    const found = this.userLookup().get(msg.senderId);
 
     return found ?? {
       id: msg.senderId,

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

@@ -53,6 +53,7 @@
         [repliedMessage]="findRepliedMessage(message.replyToId)"
         [currentUserId]="currentUserId()"
         [isAdmin]="isAdmin()"
+        [userLookup]="userLookup()"
         (replyRequested)="handleReplyRequested($event)"
         (deleteRequested)="handleDeleteRequested($event)"
         (editSaved)="handleEditSaved($event)"

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

@@ -8,13 +8,15 @@ import {
   ViewChild,
   computed,
   effect,
+  inject,
   input,
   output,
   signal
 } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { Attachment } from '../../../../../attachment';
 import { getMessageTimestamp } from '../../../../domain/rules/message.rules';
-import { Message } from '../../../../../../shared-kernel';
+import { Message, User } from '../../../../../../shared-kernel';
 import {
   ChatMessageDeleteEvent,
   ChatMessageEditEvent,
@@ -23,6 +25,7 @@ import {
   ChatMessageReactionEvent,
   ChatMessageReplyEvent
 } from '../../models/chat-messages.model';
+import { selectAllUsers } from '../../../../../../store/users/users.selectors';
 import { ChatMessageItemComponent } from '../message-item/chat-message-item.component';
 
 interface PrismGlobal {
@@ -47,6 +50,8 @@ declare global {
 export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
   @ViewChild('messagesContainer') messagesContainer?: ElementRef<HTMLDivElement>;
 
+  private readonly store = inject(Store);
+  private readonly allUsers = this.store.selectSignal(selectAllUsers);
   private readonly dateSeparatorFormatter = new Intl.DateTimeFormat('en-GB', {
     day: 'numeric',
     month: 'long',
@@ -110,6 +115,20 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
     return labels;
   });
 
+  readonly userLookup = computed<ReadonlyMap<string, User>>(() => {
+    const lookup = new Map<string, User>();
+
+    for (const user of this.allUsers()) {
+      lookup.set(user.id, user);
+
+      if (user.oderId && user.oderId !== user.id) {
+        lookup.set(user.oderId, user);
+      }
+    }
+
+    return lookup;
+  });
+
   private initialScrollObserver: MutationObserver | null = null;
   private initialScrollTimer: ReturnType<typeof setTimeout> | null = null;
   private boundOnImageLoad: (() => void) | null = null;