Modularize chat page with new components (chat-box, server-list, chat-info). Introduce server filtering, real-time updates, and redesigned layout for enhanced usability.

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

@@ -1,5 +1,5 @@
 <ng-container>
-  <app-header [current_page]="'chat'" height="460px" background_image="/public/img/backgrounds/staff.png"
+  <app-header [current_page]="'chat'" height="200px" background_image="/public/img/backgrounds/staff.png"
               [overlay_gradient]="0.5">
     <div class="title" header-content>
       <h1>Chat</h1>
@@ -7,18 +7,25 @@
   </app-header>
 
   <main>
-    <section class="darkmodeSection">
-      @for (message of messages(); track message.timestamp) {
-        <p>
-          <span class="date-time">[{{ message.timestamp | date: 'mediumTime' }}] </span>
-          @if (message.notBlocked) {
-            <span [style.color]=getServerColor(message.server)>[{{ message.server }}] </span>
-          } @else {
-            <span class="blocked">[{{ message.server }}] </span>
-          }
-          <mini-message [node]="message.messageJson"></mini-message>
-        </p>
-      }
-    </section>
+    <app-full-size [hideFooter]="true">
+      <section class="darkmodeSection full-height">
+        <div class="page-layout">
+          <div class="server-list">
+            <app-server-list [servers]="servers()" [selectedServer]="selectedServer()"
+                             (selectedServerChange)="onSelectedServerChange($event)">
+
+            </app-server-list>
+          </div>
+          <div class="chat">
+            <div class="chat-info">
+              <app-chat-info [selectedServer]="selectedServer()"></app-chat-info>
+            </div>
+            <div class="chat-box">
+              <app-chat-box [messages]="messages()"></app-chat-box>
+            </div>
+          </div>
+        </div>
+      </section>
+    </app-full-size>
   </main>
 </ng-container>