MSD: wire up unseen notification dot icon logic in interim omnibar

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 (
 		<QueryClientProvider client={ omnibarQueryClient }>
 			<ReduxProvider store={ store }>

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 } >(),
 };
 

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;
 }

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: [