Enhance chat view with server-specific colors, timestamp display, and improved message styling.

frontend/src/app/pages/altitude/chat/chat.component.html

@@ -10,10 +10,11 @@
     <section class="darkmodeSection">
       @for (message of messages(); track message.timestamp) {
         <p>
+          <span class="date-time">[{{ message.timestamp | date: 'mediumTime' }}] </span>
           @if (message.notBlocked) {
-            [{{ message.server }}]
+            <span [style.color]=getServerColor(message.server)>[{{ message.server }}] </span>
           } @else {
-            <span style="color: red">[{{ message.server }}] </span>
+            <span class="blocked">[{{ message.server }}] </span>
           }
           <mini-message [node]="message.messageJson"></mini-message>
         </p>

frontend/src/app/pages/altitude/chat/chat.component.scss

@@ -0,0 +1,7 @@
+.blocked {
+  color: red;
+}
+
+.date-time {
+  color: gray;
+}

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

@@ -4,14 +4,14 @@ import {ChatService} from '@pages/altitude/chat/service/chat.service';
 import {HeaderComponent} from '@header/header.component';
 import {MiniMessageComponent} from '@pages/altitude/chat/mini-message/mini-message.component';
 import {MiniMessageInteractionService} from '@pages/altitude/chat/mini-message/mini-message-interaction.service';
-import {JsonPipe} from '@angular/common';
+import {DatePipe} from '@angular/common';
 
 @Component({
   selector: 'app-chat',
   imports: [
     HeaderComponent,
     MiniMessageComponent,
-    JsonPipe
+    DatePipe
   ],
   templateUrl: './chat.component.html',
   styleUrl: './chat.component.scss',
@@ -39,4 +39,15 @@ export class ChatComponent implements OnInit, OnDestroy {
     this.sub?.unsubscribe();
     this.chatService.disconnect(); // triggers onCompletion server-side, cleans up the emitter
   }
+
+  protected getServerColor(server: string) {
+    if (server === 'bayou') {
+      return "#007FFF";
+    } else if (server === 'lobby') {
+      return "white";
+    } else if (server === 'creative') {
+      return "#FFA500";
+    }
+    return "white";
+  }
 }