Communication: Improve unread messages count view on sidebar

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 && unreadCount > 0 ? 'bold-text' : 'fw-semibold'"
+                >
                     @if (sidebarItem.icon) {
                         <fa-icon [fixedWidth]="true" [icon]="sidebarItem.icon" />
                     }
@@ -58,6 +64,9 @@
                         <fa-icon [fixedWidth]="true" [icon]="sidebarItem.rightIcon" />
                     }
                 </span>
+                @if (unreadCount && unreadCount > 0) {
+                    <span class="unread-count">{{ 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,23 @@
 .muted {
     color: var(--metis-conversation-sidebar-muted);
 }
+
+.unread-count {
+    background-color: var(--bs-primary);
+    color: white;
+    padding: 0.1rem;
+    border-radius: 50%;
+    font-size: clamp(0.4rem, 1vw, 0.7rem);
+    width: 1.5rem;
+    height: 1.4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.bold-text {
+    font-weight: 850;
+}

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

@@ -1,12 +1,26 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } 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 {
     @Input() sidebarItem: SidebarCardElement;
     @Input() sidebarType?: SidebarTypes;
+    @Input() unreadCount!: number | undefined;
+
+    formattedUnreadCount: string = '';
+
+    ngOnInit(): void {
+        this.formattedUnreadCount = this.getFormattedUnreadCount();
+    }
+
+    private getFormattedUnreadCount(): string {
+        if (this.unreadCount !== undefined && this.unreadCount > 99) {
+            return '99+';
+        }
+        return this.unreadCount?.toString() || '';
+    }
 }

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

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

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

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

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

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

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

@@ -37,4 +37,22 @@ 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', () => {
+        component.unreadCount = 45;
+        component.ngOnInit();
+        expect(component.formattedUnreadCount).toBe('45');
+    });
+
+    it('should format unreadCount as "99+" when count exceeds 99', () => {
+        component.unreadCount = 120;
+        component.ngOnInit();
+        expect(component.formattedUnreadCount).toBe('99+');
+    });
+
+    it('should return an empty string if unreadCount is undefined', () => {
+        component.unreadCount = undefined;
+        component.ngOnInit();
+        expect(component.formattedUnreadCount).toBe('');
+    });
 });