feat: add unread drawer button to topbar

This commit is contained in:
2026-07-17 18:10:41 +02:00
parent e953e15c9d
commit 65069ddebd
3 changed files with 38 additions and 0 deletions
+5
View File
@@ -37,6 +37,10 @@
</li> </li>
{{{ end }}} {{{ 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]]"> <li component="notifications" class="nav-item notifications dropdown" title="[[global:header.notifications]]">
<!-- IMPORT partials/sidebar/notifications.tpl --> <!-- IMPORT partials/sidebar/notifications.tpl -->
</li> </li>
@@ -109,6 +113,7 @@
{{{ if config.loggedIn }}} {{{ if config.loggedIn }}}
<div class="wg-topbar__drawer-actions"> <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> <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 }}} {{{ 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> <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>
@@ -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>
+26
View File
@@ -148,3 +148,29 @@ assertExcludes(
'brand-header', 'brand-header',
'Removed brand banner widget area should not remain registered' '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'
);