Improve chat UI with consistent styling, hover effects, flexbox adjustments, and message container restructuring. Sort messages by timestamp for better readability.

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

@@ -27,6 +27,7 @@
       min-width: 0;
       padding: 0 5px 0 5px;
       min-height: 0;
+      box-sizing: border-box;
     }
   }
 }

frontend/src/app/pages/altitude/chat/components/chat-info/chat-info.component.scss

@@ -1,6 +1,16 @@
-.server {
+.full-width {
-  padding-left: 10px;
+  display: flex;
-  font-size: 25px;
+  align-items: center;
-  font-family: minecraft-text, 'opensans-bold', sans-serif;
+  padding-top: 15px;
-  letter-spacing: 2px;
+  padding-bottom: 15px;
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
+
+.server {
+  font-size: 20px;
+  font-family: minecraft-text, 'opensans-bold', sans-serif;
+  letter-spacing: 1px;
+  font-weight: bold;
+  padding-left: 10px;
 }

frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.html

@@ -1,8 +1,10 @@
-@for (message of messages(); track message.timestamp) {
+<div class="message-container">
-  <p>
+  @for (message of messages(); track message.timestamp) {
+    <p class="message">
       <span class="date-time" [class.blocked]="!message.notBlocked">
         [{{ message.timestamp * 1000 | date: 'mediumTime' }}]
       </span>
       <mini-message [node]="message.messageJson"></mini-message>
     </p>
-}
+  }
+</div>

frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss

@@ -1,3 +1,20 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.message-container {
+  display: flex;
+  flex-direction: column-reverse;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.message {
+  margin: 5px 0;
+}
+
 .blocked {
   color: red;
 }

frontend/src/app/pages/altitude/chat/components/server-list/server-list.component.scss

@@ -5,19 +5,25 @@
   .server {
     position: relative;
     display: flex;
-    padding: 2px 2px 2px 10px;
+    align-items: center;
+    padding: 10px 20px;
     border-bottom: 1px solid #222;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #202c42;
+    }
 
     .server-name {
-      color: white
+      color: white;
+      font-weight: bold;
     }
 
     .notification {
       position: absolute;
-      right: 10px;
+      right: 15px;
-      top: 50%;
+      color: #3b82f6;
-      transform: translateY(-50%);
-      color: blue;
     }
   }
 }

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

@@ -20,7 +20,7 @@ export class ChatService implements OnDestroy {
   private eventSource?: EventSourcePolyfill;
   private readonly authService: AuthService = inject(AuthService)
   private readonly _messages = signal<ChatMessage[]>([])
-  public readonly messages = computed(() => this._messages().filter((message) => message.server === this._selectedServer()));
+  public readonly messages = computed(() => this._messages().filter((message) => message.server === this._selectedServer()).sort((a, b) => a.timestamp - b.timestamp));
   private readonly _servers = signal<ChatServer[]>([])
   public readonly servers = computed(() => this._servers().sort((a, b) => a.server.localeCompare(b.server)));
   private readonly _selectedServer = signal<string>('');
@@ -53,7 +53,7 @@ export class ChatService implements OnDestroy {
     this.on(source, 'chat', (event) => {
       const chatMessages = this.processChatMessages(event);
       chatMessages.forEach((message) => {
-        const find = this.servers().find(server => message.server === server.server);
+        const find = this.servers().find(server => message.server === server.server && message.server !== this._selectedServer());
         if (find) {
           find.unreadMessages++;
         }