diff --git a/client/dashboard/app/interim-omnibar/interim-omnibar.tsx b/client/dashboard/app/interim-omnibar/interim-omnibar.tsx index 60c1539367ba..13a4f9327e24 100644 --- a/client/dashboard/app/interim-omnibar/interim-omnibar.tsx +++ b/client/dashboard/app/interim-omnibar/interim-omnibar.tsx @@ -7,7 +7,7 @@ import { MasterbarLoggedIn } from 'calypso/layout/masterbar/logged-in'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { getSiteDisplayName } from '../../utils/site-name'; import { logout } from '../auth'; -import { omnibarEvents } from './omnibar-events'; +import { omnibarEvents, useOmnibarEvent } from './omnibar-events'; import { createOmnibarStore } from './omnibar-store'; import type { User, Site } from '@automattic/api-core'; @@ -57,6 +57,19 @@ export function InterimOmnibar( { omnibarEvents.notificationsAnchor.emit( bell ); } ); + // Dispatch the user's unseen note count to the store so the unread marker appears. + useEffect( () => { + store.dispatch( { + type: 'NOTIFICATIONS_UNSEEN_COUNT_SET', + unseenCount: Number( !! user.has_unseen_notes ), + } ); + }, [ store, user.has_unseen_notes ] ); + + // Also dispatch the emitted unseen note count from the notifications panel. + useOmnibarEvent( 'notificationsUnseenCount', ( unseenCount ) => { + store.dispatch( { type: 'NOTIFICATIONS_UNSEEN_COUNT_SET', unseenCount } ); + } ); + return ( diff --git a/client/dashboard/app/interim-omnibar/omnibar-events.ts b/client/dashboard/app/interim-omnibar/omnibar-events.ts index 0f066fd72a5c..477548d05b7a 100644 --- a/client/dashboard/app/interim-omnibar/omnibar-events.ts +++ b/client/dashboard/app/interim-omnibar/omnibar-events.ts @@ -22,6 +22,7 @@ export const omnibarEvents = { mobileMenu: createOmnibarEvent(), notificationsAnchor: createOmnibarEvent< HTMLElement | null >(), notifications: createOmnibarEvent(), + notificationsUnseenCount: createOmnibarEvent< number >(), linkClick: createOmnibarEvent< { href: string; event: MouseEvent } >(), }; diff --git a/client/dashboard/app/interim-omnibar/omnibar-store.ts b/client/dashboard/app/interim-omnibar/omnibar-store.ts index 5a2a05bc6233..e61638d4629d 100644 --- a/client/dashboard/app/interim-omnibar/omnibar-store.ts +++ b/client/dashboard/app/interim-omnibar/omnibar-store.ts @@ -5,14 +5,30 @@ type StoreType = Parameters< typeof ReduxProvider >[ 0 ][ 'store' ]; // Fake Redux store so child components using connect() (e.g. Notifications) don't crash. // Intercepts specific actions so the dashboard can handle them. export function createOmnibarStore( onToggleNotifications?: () => void ): StoreType { + const listeners = new Set< () => void >(); + let notificationsUnseenCount: number | undefined; + return { - getState: () => ( { ui: { section: false, isNotificationsOpen: false } } ), - dispatch: ( action: { type: string } ) => { + getState: () => ( { + ui: { section: false, isNotificationsOpen: false }, + notificationsUnseenCount, + } ), + dispatch: ( action: { type: string; unseenCount?: number } ) => { if ( action.type === 'NOTIFICATIONS_PANEL_TOGGLE' ) { onToggleNotifications?.(); + + notificationsUnseenCount = 0; + listeners.forEach( ( listener ) => listener() ); + } + if ( action.type === 'NOTIFICATIONS_UNSEEN_COUNT_SET' ) { + notificationsUnseenCount = action.unseenCount; + listeners.forEach( ( listener ) => listener() ); } return action; }, - subscribe: () => () => {}, + subscribe: ( listener: () => void ) => { + listeners.add( listener ); + return () => listeners.delete( listener ); + }, } as unknown as StoreType; } diff --git a/client/dashboard/app/notifications/index.tsx b/client/dashboard/app/notifications/index.tsx index a6583ac2b4ad..ba7a1e501990 100644 --- a/client/dashboard/app/notifications/index.tsx +++ b/client/dashboard/app/notifications/index.tsx @@ -9,7 +9,7 @@ import { Suspense, lazy, useCallback, useEffect, useState } from 'react'; import wpcom from 'calypso/lib/wp'; import { useAuth } from '../auth'; import { useHelpCenter } from '../help-center'; -import { useOmnibarEvent } from '../interim-omnibar/omnibar-events'; +import { omnibarEvents, useOmnibarEvent } from '../interim-omnibar/omnibar-events'; import { useLocale } from '../locale'; import './style.scss'; @@ -54,6 +54,7 @@ export default function Notifications( { APP_RENDER_NOTES: [ ( store: unknown, { newNoteCount }: { newNoteCount: number } ) => { setHasUnseenNotifications( newNoteCount > 0 ); + omnibarEvents.notificationsUnseenCount.emit( newNoteCount ); }, ], VIEW_SETTINGS: [