Merge pull request #2531 from ORCID/lmendoza/jun-4-2025-multiple-fixes

Lmendoza/jun 4 2025 multiple fixes

Author: cryptalith

src/app/core/inbox/inbox.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { Observable, ReplaySubject } from 'rxjs'
+import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs'
 import { catchError, map, switchMap, tap, retry } from 'rxjs/operators'
 import { AMOUNT_OF_RETRIEVE_NOTIFICATIONS_PER_CALL } from 'src/app/constants'
 import { ERROR_REPORT } from 'src/app/errors'
@@ -22,6 +22,10 @@ export class InboxService {
   private currentlyIncludingArchive: boolean
   private currentLevel = 0
   private headers: HttpHeaders
+  private _unreadCountSubject = new BehaviorSubject<number | null>(null)
+  public readonly unreadCount$: Observable<number | null> =
+    this._unreadCountSubject.asObservable()
+
   private inboxSubject = new ReplaySubject<
     (
       | InboxNotificationAmended
@@ -218,13 +222,39 @@ export class InboxService {
       )
   }
 
-  retrieveUnreadCount(): any {
-    return this._http.get(
-      runtimeEnvironment.BASE_URL + 'inbox/unreadCount.json'
-    )
+  private _fetchAndUpdateUnreadCount(): Observable<number> {
+    return this._http
+      .get<number>(runtimeEnvironment.BASE_URL + 'inbox/unreadCount.json', {
+        headers: this.headers,
+      })
+      .pipe(
+        retry(3),
+        tap((count: number) => {
+          this._unreadCountSubject.next(count)
+        }),
+        catchError((error) =>
+          this._errorHandler.handleError(error, ERROR_REPORT.STANDARD_VERBOSE)
+        )
+      )
   }
 
-  totalNumber() {
+  /**
+ 
+   * Calling retrieveUnreadCount() will:
+   * 1) Kick off a fresh HTTP GET to inbox/unreadCount.json
+   * 2) Push that result into _unreadCountSubject
+   * 3) Return the “hot” Observable from _unreadCountSubject, so that ANY future changes are pass through
+   */
+  retrieveUnreadCount(): Observable<number | null> {
+    this._fetchAndUpdateUnreadCount().subscribe()
+    return this.unreadCount$
+  }
+
+  /**
+   * Returns Observable<TotalNotificationCount>
+   * and triggers a fresh fetch of unreadCount.json so that unreadCount$ subscribers are updated.
+   */
+  totalNumber(): Observable<TotalNotificationCount> {
     return this._http
       .get<TotalNotificationCount>(
         runtimeEnvironment.BASE_URL + `inbox/totalCount.json`,
@@ -238,6 +268,10 @@ export class InboxService {
           value.archived = value.all - value.nonArchived
           return value
         }),
+        // As a side‐effect, refresh the unread count whenever totalNumber() is called:
+        tap(() => {
+          this._fetchAndUpdateUnreadCount().subscribe()
+        }),
         catchError((error) => this._errorHandler.handleError(error))
       )
   }

src/app/layout/user-menu/user-menu.component.html

@@ -39,7 +39,7 @@
       inboxUnread > 0 ? notificationTooltipActive : notificationTooltip
     "
     [attr.aria-label]="
-      inboxUnread > 0 ? notificationTooltipActive : notificationTooltip
+      inboxUnread > 0 ? notificationi18nActive : notificationi18n
     "
   >
     <mat-icon
@@ -77,7 +77,13 @@
     </div>
   </button>
   <button mat-menu-item (click)="goto('inbox', 'fromMenuButton')" id="cy-inbox">
-    <mat-icon *ngIf="inboxUnread === 0">inbox</mat-icon>
+    <mat-icon *ngIf="inboxUnread === 0"
+      ><img
+        class="bell-icon"
+        *ngIf="inboxUnread === 0"
+        src="./assets/vectors/notification-button.svg"
+        alt=""
+    /></mat-icon>
     <mat-icon *ngIf="inboxUnread > 0"
       ><img src="./assets/vectors/notification-button-active.svg"
     /></mat-icon>

src/app/layout/user-menu/user-menu.component.scss

@@ -84,3 +84,8 @@ span.name-text-container {
   padding: 0;
   margin: 0 16px;
 }
+
+.bell-icon {
+  margin-inline-start: 3px;
+  margin-inline-end: 14px;
+}

src/app/layout/user-menu/user-menu.component.scss-theme.scss

@@ -10,6 +10,9 @@
   .main-button {
     border-bottom: 1px map-get($foreground, divider) solid;
   }
+  .mat-icon {
+    color: map-get($background, ui-background-darkest);
+  }
 }
 
 @include user-menu-theme($orcid-app-theme);

src/app/layout/user-menu/user-menu.component.ts

@@ -28,6 +28,8 @@ export class UserMenuComponent implements OnInit {
   labelUserMenu = $localize`:@@layout.ariaLabelUserMenu:User menu`
   notificationTooltipActive = $localize`:@@layout.notificationTooltip:You have unread notifications`
   notificationTooltip = $localize`:@@layout.notificationTooltipInactive:Notifications inbox`
+  notificationi18n = $localize`:@@layout.notifications:Open notification inbox`
+  notificationi18nActive = $localize`:@@layout.notificationsActive:You have unread notifications. Open notification inbox`
   isAccountDelegate: boolean
   inboxUnread = 0
   userJourney!: 'orcid_with_notifications' | 'orcid_without_notifications'
@@ -58,21 +60,18 @@ export class UserMenuComponent implements OnInit {
   }
 
   ngOnInit() {
-    this._inboxService
-      .retrieveUnreadCount()
-      .pipe(first())
-      .subscribe((inboxUnread) => {
-        ;(this.userJourney =
-          inboxUnread > 0
-            ? 'orcid_with_notifications'
-            : 'orcid_without_notifications'),
-          this.observabilityEventService.startJourney(
-            this.userJourney,
+    this._inboxService.retrieveUnreadCount().subscribe((inboxUnread) => {
+      ;(this.userJourney =
+        inboxUnread > 0
+          ? 'orcid_with_notifications'
+          : 'orcid_without_notifications'),
+        this.observabilityEventService.startJourney(
+          this.userJourney,
 
-            { inboxUnread }
-          )
-        this.inboxUnread = inboxUnread
-      })
+          { inboxUnread }
+        )
+      this.inboxUnread = inboxUnread
+    })
   }
 
   goto(url, from?: string) {

src/locale/properties/layout/layout.en.properties

@@ -116,3 +116,5 @@ layout.ariaLabelConnectingResearchers=Connecting research and researchers
 layout.ariaLabelSearchRegistry=Search the ORCID registry...
 layout.notificationTooltip=You have unread notifications
 layout.notificationTooltipInactive=Notifications inbox
+layout.notifications=Open notification inbox
+layout.notificationsActive=You have unread notifications. Open notification inbox