Add a support inbox icon to the topbar (sow-nodebb-plugin-support#10)

Mirrors the existing unread-drawer pattern: a new dropdown next to the
notification bell, gated on templateData.support.visible (injected by
the support plugin's filter:middleware.renderHeader hook, on every page
render, for viewers with any support access at all). Opening it fetches
GET /plugins/support/notifications via the api module, renders up to
10 entries by textContent (never innerHTML), and marks everything read
via POST .../notifications/read, clearing the badge client-side.

Also present in the mobile burger drawer, same gating.

ponytail: no live socket push for this badge (core's own unread/notification
counts get one); it only catches up on the next full page load after the
box is opened. Noted in client.js as the upgrade path if that gap matters.

Verified live against sow-nodebb-plugin-support's dev NodeBB stack (theme +
plugin both mounted): icon hidden for a user with no support access, badge
count and dropdown contents correct for a reviewer, badge clears on open.
Full plain-node test suite passes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-24 21:29:57 +02:00
co-authored by Claude Sonnet 5
parent 0bdb59aaa0
commit ca2aefa156
6 changed files with 165 additions and 1 deletions
@@ -0,0 +1,9 @@
<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="Support inbox">
<i class="fa fa-fw fa-life-ring" aria-hidden="true"></i>
<span component="support/count" class="badge rounded-1 bg-primary {{{ if !support.unreadCount }}}hidden{{{ end }}}">{support.unreadCount}</span>
</a>
<ul class="dropdown-menu wg-topbar__dropdown support-dropdown p-1 shadow" role="menu" data-wg-support-menu>
<li data-wg-support-loading class="dropdown-item disabled"><i class="fa fa-fw fa-spinner fa-spin" aria-hidden="true"></i> Support inbox</li>
<li data-wg-support-empty class="hidden"><span class="dropdown-item disabled">Nothing new</span></li>
<li data-wg-support-footer><hr class="dropdown-divider"><a class="dropdown-item wg-support-item--all" href="{relative_path}/support">Go to Support</a></li>
</ul>