Add toolbar achievement unseen

src/views/toolbar/ToolbarView.tsx

@@ -2,7 +2,7 @@ import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, Nitro
 import { FC, useCallback, useState } from 'react';
 import { GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api';
 import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
-import { AchievementsUIEvent } from '../../events/achievements';
+import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
 import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
@@ -27,9 +27,9 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     const [ isMeExpanded, setMeExpanded ] = useState(false);
     const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN);
     const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0);
+    const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0);
 
     const unseenFriendListCount = 0;
-    const unseenAchievementsCount = 0;
 
     const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
     {
@@ -64,6 +64,13 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
 
     useUiEvent(UnseenItemTrackerUpdateEvent.UPDATE_COUNT, onUnseenItemTrackerUpdateEvent);
 
+    const onAchievementsUIUnseenCountEvent = useCallback((event: AchievementsUIUnseenCountEvent) =>
+    {
+        setUnseenAchievementCount(event.count);
+    }, []);
+
+    useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent);
+
     const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) =>
     {
         const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
@@ -160,15 +167,15 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     return (
         <div className="nitro-toolbar-container">
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
-                <ToolbarMeView handleToolbarItemClick={ handleToolbarItemClick } />
+                <ToolbarMeView unseenAchievementCount={ unseenAchievementCount } handleToolbarItemClick={ handleToolbarItemClick } />
             </TransitionAnimation>
             <div className="d-flex justify-content-between align-items-center nitro-toolbar py-1 px-3">
                 <div className="d-flex align-items-center">
                     <div className="navigation-items gap-2">
                         <div className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
                             <AvatarImageView figure={ userFigure } direction={ 2 } />
-                            { (unseenAchievementsCount > 0) &&
+                            { (unseenAchievementCount > 0) &&
-                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div> }
+                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> }
                         </div>
                         { isInRoom && (
                             <div className="navigation-item" onClick={ visitDesktop }>

src/views/toolbar/me/ToolbarMeView.tsx

@@ -4,7 +4,7 @@ import { ToolbarMeViewProps } from './ToolbarMeView.types';
 
 export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
 {
-    const { handleToolbarItemClick = null } = props;
+    const { unseenAchievementCount = 0, handleToolbarItemClick = null } = props;
 
     return (
         <div className="d-flex nitro-toolbar-me px-1 py-2">
@@ -17,6 +17,8 @@ export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
                 </div>
                 <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
                     <i className="icon icon-me-achievements"></i>
+                    { (unseenAchievementCount > 0) &&
+                        <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> }
                 </div>
                 <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }>
                     <i className="icon icon-me-profile"></i>

src/views/toolbar/me/ToolbarMeView.types.ts

@@ -1,5 +1,6 @@
 
 export interface ToolbarMeViewProps
 {
+    unseenAchievementCount: number;
     handleToolbarItemClick: (item: string) => void;
 }