Communication: Improve unread messages count view on sidebar

src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html

@@ -3,7 +3,7 @@
         <fa-icon [icon]="conversation.isFavorite ? faHeartSolid : faHeartRegular" size="sm" />
     </button>
     <div ngbDropdown container="body" class="d-inline-block">
-        <button class="btn btn-outline-secondary dropdown-toggle sidebar-button py-0" type="button" ngbDropdownToggle>
+        <button class="btn btn-outline-secondary dropdown-toggle sidebar-button py-0 px-2" type="button" ngbDropdownToggle>
             <fa-icon [icon]="faEllipsisVertical" size="sm" />
         </button>
         <div ngbDropdownMenu>

src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html

@@ -47,7 +47,13 @@
             </div>
         } @else {
             <div class="d-flex justify-content-between align-items-baseline">
-                <span id="test-sidebar-card-title" class="small fw-semibold text-truncate me-2" [title]="sidebarItem.title" [class.muted]="sidebarItem.conversation?.isMuted">
+                <span
+                    id="test-sidebar-card-title"
+                    class="small text-truncate me-2"
+                    [title]="sidebarItem.title"
+                    [class.muted]="sidebarItem.conversation?.isMuted"
+                    [ngClass]="unreadCount() > 0 ? 'fw-bold' : 'fw-normal'"
+                >
                     @if (sidebarItem.icon) {
                         <fa-icon [fixedWidth]="true" [icon]="sidebarItem.icon" />
                     }
@@ -58,6 +64,9 @@
                         <fa-icon [fixedWidth]="true" [icon]="sidebarItem.rightIcon" />
                     }
                 </span>
+                @if (unreadCount() > 0) {
+                    <span class="unread-count me-n2">{{ formattedUnreadCount }}</span>
+                }
             </div>
             <div class="d-flex justify-content-between align-items-baseline small" [ngClass]="{ 'mt-1': sidebarItem.subtitleLeft }">
                 <small class="me-2 text-truncate">

src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss

@@ -5,3 +5,17 @@
 .muted {
     color: var(--metis-conversation-sidebar-muted);
 }
+
+.unread-count {
+    background-color: var(--bs-primary);
+    color: var(--bs-white);
+    border-radius: 50%;
+    font-size: 0.6rem;
+    width: 1.1rem;
+    height: 1.1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+}

src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts

@@ -1,13 +1,33 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, input } from '@angular/core';
 import { SidebarCardElement, SidebarTypes } from 'app/types/sidebar';
 
 @Component({
     selector: 'jhi-sidebar-card-item',
     templateUrl: './sidebar-card-item.component.html',
     styleUrls: ['./sidebar-card-item.component.scss', '../sidebar.component.scss'],
 })
-export class SidebarCardItemComponent {
+export class SidebarCardItemComponent implements OnInit, OnChanges {
     @Input() sidebarItem: SidebarCardElement;
     @Input() sidebarType?: SidebarTypes;
     @Input() groupKey?: string;
+    unreadCount = input<number>(0);
+
+    formattedUnreadCount: string = '';
+
+    ngOnInit(): void {
+        this.formattedUnreadCount = this.getFormattedUnreadCount();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['unreadCount']) {
+            this.formattedUnreadCount = this.getFormattedUnreadCount();
+        }
+    }
+
+    private getFormattedUnreadCount(): string {
+        if (this.unreadCount() > 99) {
+            return '99+';
+        }
+        return this.unreadCount().toString() || '';
+    }
 }

src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html

@@ -21,6 +21,11 @@
         (click)="emitStoreAndRefresh(sidebarItem.id)"
         [routerLinkActive]="'bg-selected border-selected'"
     >
-        <jhi-sidebar-card-item [groupKey]="groupKey" [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" />
+        <jhi-sidebar-card-item
+            [unreadCount]="this.sidebarItem.conversation?.unreadMessagesCount ?? 0"
+            [groupKey]="groupKey"
+            [sidebarType]="sidebarType"
+            [sidebarItem]="sidebarItem"
+        />
     </div>
 }

src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html

@@ -10,7 +10,12 @@
     [routerLinkActive]="'bg-selected border-selected'"
 >
     <div class="w-75 align-self-center">
-        <jhi-sidebar-card-item [groupKey]="groupKey" [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" />
+        <jhi-sidebar-card-item
+            [unreadCount]="this.sidebarItem.conversation?.unreadMessagesCount ?? 0"
+            [groupKey]="groupKey"
+            [sidebarType]="sidebarType"
+            [sidebarItem]="sidebarItem"
+        />
     </div>
     @if (sidebarItem.conversation) {
         <div>

src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts

@@ -3,6 +3,7 @@ import { SidebarCardItemComponent } from 'app/shared/sidebar/sidebar-card-item/s
 import { SidebarCardSize } from 'app/types/sidebar';
 import { ArtemisTestModule } from '../../../test.module';
 import { DifficultyLevel } from 'app/entities/exercise.model';
+import { input, runInInjectionContext } from '@angular/core';
 
 describe('SidebarCardItemComponent', () => {
     let component: SidebarCardItemComponent;
@@ -37,4 +38,20 @@ describe('SidebarCardItemComponent', () => {
         const compiled = fixture.debugElement.nativeElement;
         expect(compiled.querySelector('#test-sidebar-card-title').textContent).toContain(testItem.title);
     });
+
+    it('should format unreadCount correctly when count is less than 99', () => {
+        runInInjectionContext(fixture.debugElement.injector, () => {
+            component.unreadCount = input<number>(45);
+            component.ngOnInit();
+            expect(component.formattedUnreadCount).toBe('45');
+        });
+    });
+
+    it('should format unreadCount as "99+" when count exceeds 99', () => {
+        runInInjectionContext(fixture.debugElement.injector, () => {
+            component.unreadCount = input<number>(120);
+            component.ngOnInit();
+            expect(component.formattedUnreadCount).toBe('99+');
+        });
+    });
 });