Topbar unread button: badge style mismatch + non-working dropdown #33
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: ShadowsOverWestgate/sow-nodebb-theme#33
Reference in New Issue
Block a user
Spotted while reviewing the wiki header. The custom unread button in the topbar utilities (
templates/partials/header/topbar.tpl→templates/partials/header/unread-drawer.tpl) has two problems.1. The unread badge doesn't match the icons next to it
The unread count renders as an inline pill beside the inbox icon —
<span component="unread/count" class="badge rounded-1 bg-primary …">sitting inside ad-flex gap-2with the icon (unread-drawer.tpllines 1–3).Its neighbours — notifications and chats — come from Harmony's partials, which position the badge as a small corner-overlapping circle on the icon itself (
position-absolute top-0 start-100 translate-middle badge …, seepartials/sidebar/notifications.tpl/partials/sidebar/chats.tpl). So the unread bubble reads as a different shape/placement from the bell and chat badges right next to it and looks out of place.Fix: give the unread badge the same corner-overlap treatment as the notification/chat badges so all three read as one set.
2. The dropdown doesn't actually work
Clicking the unread button doesn't open a working dropdown — the custom
data-wg-unread-menudrawer wired up inpublic/client.js.Idea to look into: NodeBB's Notifications dropdown already has an "Unread" section/filter. Rather than maintaining a separate custom unread drawer, we could reuse that pattern (or lean on the notifications component) so the unread button gets a working, consistent dropdown without bespoke JS to keep alive.
Badge (part 1): fixed in PR #32. The unread count now uses the same corner-anchored markup as the notification/chat badges (inner
position-relativespan +top-0/start-100/translate-middle), so it tucks into the inbox-icon corner at the same size and height as its neighbours — verified in the dev forum (badge top/bottom now match the bell badge to the pixel).Dropdown (part 2): I couldn't reproduce "doesn't work" on a current build. In the dev forum the custom unread drawer opens on both
/categoriesand/wiki, fetches/api/unread, and lists the unread topics with an Unread footer link — functionally and visually fine. That mirrors the Inter issue: the live breakage is likely a stale deployed build, and a rebuild may just fix it.So I've left this open rather than swap the working custom drawer for NodeBB's Notifications "Unread" view. If you still see it broken on a freshly-built image, say so (ideally the state: logged-in vs guest, desktop vs the mobile drawer, and any console error) and I'll dig in — otherwise the reuse-Notifications idea stays a nice-to-have, not a fix.
Both problems are fixed on
feat/support-inbox-header-icon, and the idea at the end of this issue is now the rule.1. Badge style. The unread count is a corner-overlapping circle on the inbox icon, exactly like the bell and chat badges:
position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary(templates/partials/header/unread-drawer.tpl). The three read as one set now.2. The dropdown works. Checked in a browser against the dev stack: with two unread topics the badge shows
2, the dropdown opens, and it lists both with their category names ("Anyone up for a session tonight? — General Discussion", "Server maintenance window — Announcements") above the "Unread" link.3. The idea about reusing the notifications dropdown has been taken up, for the drawer this issue did not mention. The support inbox had grown a third bespoke drawer in the topbar with its own badge and its own client code. It is gone: support case notifications are now ordinary core notifications, and
nodebb-plugin-supportadds a "Cases" filter button to the notification bell's existing All/Unread row. The reasoning is in that plugin's ADR-0002.The unread drawer is left as it is. It is not a notification list — it shows unread topics, which core's bell does not carry — so folding it into the bell would mean writing more code, not less. If it ever needs rebuilding, the support tab is the pattern to copy: add to core's dropdown, do not build a new one.