From 185f713aebd9fbfb0bff9d941d794655fe1fb1f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?BENEDEK=20L=C3=A1szl=C3=B3?= <lacbenedek@gmail.com>
Date: Tue, 3 Jun 2025 20:38:51 +0200
Subject: [PATCH] feat: enhance chat module with material badge and user model,
 update channel entry component for alerts

---
 src/app/chat/chat.module.ts                       |  5 +++--
 .../channel-entry/channel-entry.component.html    |  8 +++++++-
 .../channel-entry/channel-entry.component.ts      | 15 +++++++++++++--
 src/app/models/user.ts                            |  6 ++++++
 src/app/services/chat.service.ts                  |  4 ++++
 src/app/services/user.service.ts                  |  7 +++++++
 6 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/app/models/user.ts

diff --git a/src/app/chat/chat.module.ts b/src/app/chat/chat.module.ts
index 7dee050..4cc1552 100644
--- a/src/app/chat/chat.module.ts
+++ b/src/app/chat/chat.module.ts
@@ -9,7 +9,7 @@ import { ChannelEntryComponent } from './chat/channel-list/channel-entry/channel
 import { MessageComponent } from './chat/feed/message/message.component';
 import { ProfilePictureComponent } from './chat/feed/message/profile-picture/profile-picture.component';
 import { ToolbarComponent } from '../common/toolbar/toolbar.component';
-
+import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({
   declarations: [
@@ -23,7 +23,8 @@ import { ToolbarComponent } from '../common/toolbar/toolbar.component';
   imports: [
     CommonModule,
     ChatRoutingModule,
-    ToolbarComponent
+    ToolbarComponent,
+    MatBadgeModule
   ]
 })
 export class ChatModule { }
diff --git a/src/app/chat/chat/channel-list/channel-entry/channel-entry.component.html b/src/app/chat/chat/channel-list/channel-entry/channel-entry.component.html
index 766e50b..209483a 100644
--- a/src/app/chat/chat/channel-list/channel-entry/channel-entry.component.html
+++ b/src/app/chat/chat/channel-list/channel-entry/channel-entry.component.html
@@ -1 +1,7 @@
-<div [title]="channel.description" [class.selected]="selected">{{channel.name}}</div>
+<div [title]="channel.description" [class.selected]="selected">
+  
+  <span [matBadge]="this.hasAlert ? '1' : ''" matBadgeSize="small">
+    {{channel.name}}
+  </span>
+    
+</div>
diff --git a/src/app/chat/chat/channel-list/channel-entry/channel-entry.component.ts b/src/app/chat/chat/channel-list/channel-entry/channel-entry.component.ts
index 3a53210..b03a8f0 100644
--- a/src/app/chat/chat/channel-list/channel-entry/channel-entry.component.ts
+++ b/src/app/chat/chat/channel-list/channel-entry/channel-entry.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Channel } from '../../../../models/channel';
 
 @Component({
@@ -7,7 +7,18 @@ import { Channel } from '../../../../models/channel';
   templateUrl: './channel-entry.component.html',
   styleUrl: './channel-entry.component.scss'
 })
-export class ChannelEntryComponent {
+export class ChannelEntryComponent implements OnChanges {
   @Input("channel") public channel!: Channel;
   @Input("selected") public selected!: boolean;
+
+  public hasAlert: boolean = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.selected) {
+      this.hasAlert = false;
+    }
+  }
+
+  // TODO: subsribe to message alerts and display them
+  //       unsubscirbe when leaving
 }
diff --git a/src/app/models/user.ts b/src/app/models/user.ts
new file mode 100644
index 0000000..b03ecea
--- /dev/null
+++ b/src/app/models/user.ts
@@ -0,0 +1,6 @@
+export class User {
+  public username!: string;
+  public status!: string;
+  public picture!: string;
+  public bio!: string;
+}
\ No newline at end of file
diff --git a/src/app/services/chat.service.ts b/src/app/services/chat.service.ts
index 0cfab1d..e7ded5c 100644
--- a/src/app/services/chat.service.ts
+++ b/src/app/services/chat.service.ts
@@ -10,6 +10,7 @@ export class ChatService {
 
   constructor() { }
 
+  // TODO: implement
   public ListChannels(): Observable<Channel[]> {
     return new Observable<Channel[]>(subscriber => {
       subscriber.next([
@@ -28,6 +29,9 @@ export class ChatService {
     });
   }
 
+  // TODO: implement
+  // TODO: refactor this so it first returns the n last messages,
+  //       then listens for incoming messages and forwards them as they come 
   public GetMessages(channelID: number): Observable<Message[]> {
     return new Observable<Message[]>(subscriber => {
       subscriber.next([
diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts
index 777479d..112fe1c 100644
--- a/src/app/services/user.service.ts
+++ b/src/app/services/user.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { User } from '../models/user';
 
 @Injectable({
   providedIn: 'root'
@@ -7,10 +8,16 @@ import { Observable } from 'rxjs';
 export class UserService {
   constructor() { }
 
+  // TODO: implement
   public GetProfilePictureURL(username: string): Observable<string> {
     return new Observable<string>(subscriber => {
       subscriber.next("https://i.pinimg.com/736x/00/70/16/00701602b0eac0390b3107b9e2a665e0.jpg");
       subscriber.complete();
     });
   }
+
+  // TODO: implement
+  public GetUser(username: string): Observable<User> {
+    throw new Error('Not implemented');
+  }
 }