Refactor mini-message system: add precomputed styles for optimization, update models and components to use preprocessed nodes, and display total message counts in ChatInfo UI.

frontend/src/app/pages/altitude/chat/service/chat.service.ts

@@ -4,6 +4,7 @@ import {EventSourcePolyfill} from 'event-source-polyfill';
 import {ChatMessage} from '@pages/altitude/chat/objects/chat-message.object';
 import {RawChatMessage} from '@pages/altitude/chat/objects/raw-chat-message.object';
 import {normalizeComponent} from '@pages/altitude/chat/mini-message/normalize.util';
+import {precomputeNode} from '@pages/altitude/chat/mini-message/mini-message.util';
 import {ChatChannel} from '@pages/altitude/chat/objects/chat-channel.object';
 import {NotificationService} from '@pages/altitude/chat/service/chat-notification.service';
 import {ChatInfoService} from '@api';
@@ -87,8 +88,8 @@ export class ChatService implements OnDestroy {
     const messages: ChatMessage[] = raw.map((m) => {
       const message: ChatMessage = {
         ...m,
-        messageJson: normalizeComponent(JSON.parse(m.messageJson)),
-      };
+        messageJson: precomputeNode(normalizeComponent(JSON.parse(m.messageJson))),
+      } as ChatMessage;
       const channelKey = this.getChannelKey(message);
       if (channelKey === null) {
         return null;
@@ -105,8 +106,11 @@ export class ChatService implements OnDestroy {
         this._channels.update((old) => [...old, {
           name: message.channelName!,
           type: message.channelType!,
-          unreadMessages: 0
+          unreadMessages: 0,
+          totalMessages: 0
         }]);
+      } else {
+        found.totalMessages++;
       }
     })