limit notifications

src/app/chat/chat/channel-list/channel-entry/channel-entry.component.ts

@@ -8,7 +8,7 @@ import { Channel } from '../../../../models/channel';
   styleUrl: './channel-entry.component.scss'
 })
 export class ChannelEntryComponent implements OnChanges {
-  public readonly NOTIFICATION_LIMIT: number = 2;
+  public readonly NOTIFICATION_LIMIT: number = 10;
 
   @Input("channel") public channel!: Channel;
   @Input("selected") public selected!: boolean;

src/app/chat/chat/feed/message/message.component.html

@@ -2,10 +2,15 @@
   <app-profile-picture [username]="this.message.sender_name" />
 
   <div class="message-inner-container">
+
     <div class="message-sender">
-      <a [routerLink]="`/user/${this.message.sender_name}`">{{this.message.sender_name}}</a><span class="time">{{ this.message.time | date: getMessageDateFormat() }}</span>
+      <a [matTooltip]="this.userStatus" matTooltipPosition="right"
+        [routerLink]="`/user/${this.message.sender_name}`">{{this.message.sender_name}}</a>
+      <span class="time">{{ this.message.time | date: GetMessageDateFormat() }}</span>
     </div>
+
     <div class="message-content">{{this.message.content}}</div>
+
   </div>
 
 </div>

src/app/chat/chat/feed/message/message.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostListener, Input } from '@angular/core';
 import { Message } from '../../../../models/message';
+import { UserService } from '../../../../services/user.service';
 
 @Component({
   selector: 'app-message',
@@ -10,7 +11,20 @@ import { Message } from '../../../../models/message';
 export class MessageComponent {
   @Input('message') public message!: Message;
 
-  public getMessageDateFormat(): string {
+  public userStatus?: string;
+
+  constructor(private userService: UserService) { }
+
+  @HostListener('mouseenter')
+  private getStatus(): void {
+    if (!this.userStatus) {
+      this.userService.GetUser(this.message.sender_name).subscribe({
+        next: user => this.userStatus = user.status
+      });
+    }
+  }
+
+  public GetMessageDateFormat(): string {
     return (new Date().getDay() == this.message.time.getDay()) ? 'HH:mm' : 'MMM d, HH:mm';
   }
 }

src/app/user/user/user.component.html

@@ -22,7 +22,8 @@
     <!-- display -->
     <mat-card id="display-card" *ngIf="this.username != this.authService.GetUsername()">
 
-      <img [src]="this.user?.picture" [alt]="this.username">
+      <img *ngIf="this.user?.picture != ''" [src]="this.user?.picture" [alt]="this.username">
+
       <h1>{{'@'}}{{this.user?.username}}</h1>
 
       <h3>Status</h3>

src/app/user/user/user.component.scss

@@ -19,6 +19,7 @@ mat-card {
 
   img {
     width: 30%;
+    height: auto;
     aspect-ratio: 1;
     border-radius: 50%;
     border: 2px solid var(--mat-sys-on-surface);
@@ -27,6 +28,7 @@ mat-card {
     text-align: center;
   }
 
+
   h1 {
     margin: auto;
   }
@@ -43,7 +45,7 @@ mat-card {
 
     * {
       width: 100%;
-    }  
+    }
 
     button {
       display: block;