templates/partials/header/topbar.tpl

@@ -37,6 +37,10 @@
 				</li>
 				{{{ end }}}
 
+				<li component="unread" class="nav-item unread dropdown" title="[[unread:title]]">
+					<!-- IMPORT partials/header/unread-drawer.tpl -->
+				</li>
+
 				<li component="notifications" class="nav-item notifications dropdown" title="[[global:header.notifications]]">
 					<!-- IMPORT partials/sidebar/notifications.tpl -->
 				</li>
@@ -109,6 +113,7 @@
 
 			{{{ if config.loggedIn }}}
 			<div class="wg-topbar__drawer-actions">
+				<a href="{relative_path}/unread"><i class="fa fa-fw fa-inbox" aria-hidden="true"></i><span>[[unread:title]]</span><span component="unread/count" class="badge rounded-1 bg-primary {{{ if !unreadCount.topic }}}hidden{{{ end }}}">{unreadCount.topic}</span></a>
 				<a href="{relative_path}/notifications"><i class="fa fa-fw fa-bell" aria-hidden="true"></i><span>[[global:header.notifications]]</span><span component="notifications/count" class="badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span></a>
 				{{{ if canChat }}}
 				<a href="{relative_path}/user/{user.userslug}/chats{{{ if user.lastRoomId }}}/{user.lastRoomId}{{{ end }}}"><i class="fa fa-fw fa-comment" aria-hidden="true"></i><span>[[global:header.chats]]</span><span component="chat/count" class="badge rounded-1 bg-primary {{{ if !unreadCount.chat }}}hidden{{{ end }}}">{unreadCount.chat}</span></a>

templates/partials/header/unread-drawer.tpl

@@ -0,0 +1,7 @@
+<a class="nav-link dropdown-toggle d-flex gap-2 align-items-center" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[unread:title]]">
+	<i class="fa fa-fw fa-inbox" aria-hidden="true"></i>
+	<span component="unread/count" class="badge rounded-1 bg-primary {{{ if !unreadCount.topic }}}hidden{{{ end }}}">{unreadCount.topic}</span>
+</a>
+<ul class="dropdown-menu wg-topbar__dropdown unread-dropdown p-1 shadow" role="menu" data-wg-unread-menu>
+	<li class="dropdown-item disabled"><i class="fa fa-fw fa-spinner fa-spin" aria-hidden="true"></i> [[unread:title]]</li>
+</ul>

tests/global-topbar-contract.test.js

@@ -148,3 +148,29 @@ assertExcludes(
 	'brand-header',
 	'Removed brand banner widget area should not remain registered'
 );
+
+const unreadDrawer = read('templates/partials/header/unread-drawer.tpl');
+assertIncludes(
+	topbar,
+	'<!-- IMPORT partials/header/unread-drawer.tpl -->',
+	'Topbar should mount the unread drawer before notifications'
+);
+assert(
+	topbar.indexOf('partials/header/unread-drawer.tpl') < topbar.indexOf('partials/sidebar/notifications.tpl'),
+	'Unread drawer should sit before the notifications item'
+);
+assertIncludes(
+	unreadDrawer,
+	'component="unread/count"',
+	'Unread toggle should carry the live core count badge'
+);
+assertIncludes(
+	unreadDrawer,
+	'data-wg-unread-menu',
+	'Unread dropdown menu should expose the JS mount hook'
+);
+assertMatches(
+	topbar,
+	/href="\{relative_path\}\/unread"[^>]*>[\s\S]*?component="unread\/count"/,
+	'Mobile drawer actions should include an Unread link with count badge'
+);