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

2026-07-19 17:51:18 +02:00
parent a5c6ab9020
commit 51416aec01
6 changed files with 56 additions and 20 deletions
@@ -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>('');