NotificationStore: make hasNotification a computed property

client/src/javascript/components/sidebar/NotificationsButton.tsx

@@ -264,15 +264,13 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
   render() {
     const {intl} = this.props;
     const {isLoading, prevHeight} = this.state;
-    const {notifications, notificationCount} = NotificationStore;
-
-    const hasNotifications = notificationCount.total !== 0;
+    const {hasNotification, notifications, notificationCount} = NotificationStore;
 
     return (
       <Tooltip
         contentClassName="tooltip__content tooltip__content--no-padding"
         content={
-          hasNotifications ? (
+          hasNotification ? (
             <div
               className={classnames('notifications', {
                 'notifications--is-loading': isLoading,
@@ -303,7 +301,7 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
         wrapperClassName="sidebar__action sidebar__icon-button
           tooltip__wrapper">
         <NotificationIcon />
-        {hasNotifications ? <span className="notifications__badge">{notificationCount.total}</span> : null}
+        {hasNotification ? <span className="notifications__badge">{notificationCount.total}</span> : null}
       </Tooltip>
     );
   }

client/src/javascript/stores/NotificationStore.ts

@@ -1,4 +1,4 @@
-import {makeAutoObservable} from 'mobx';
+import {computed, makeAutoObservable} from 'mobx';
 
 import type {Notification, NotificationCount, NotificationState} from '@shared/types/Notification';
 
@@ -8,6 +8,10 @@ class NotificationStore {
   notifications: Array<Notification> = [];
   notificationCount: NotificationCount = INITIAL_COUNT_STATE;
 
+  @computed get hasNotification() {
+    return this.notificationCount.total !== 0;
+  }
+
   constructor() {
     makeAutoObservable(this);
   }