Move mod-note pip onto current-user avatar#23
Merged
Conversation
The header pip was rendering as a button on the left side of the header
next to the Discourse logo. Move it onto the current-user avatar in the
top-right as a small overlay badge, mirroring Discourse's native pattern
for unread reviewables / notifications on the avatar.
The component now renders an invisible placeholder and injects a
`.mod-note-avatar-pip` child into the avatar element via direct DOM
manipulation, with a MutationObserver to re-attach if the header
re-renders. The badge uses `pointer-events: none` so clicks pass through
to the avatar and open the user menu (which already exposes the shield
tab). The data flow is unchanged: same Ember observer on the current
user + MessageBus channel `/mod-note-unread-count/{user_id}`.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Captures cropped header screenshots (193-197) of the moderator-notes avatar pip at 0, 1, 5, 12+ (overflow), and after-seen so reviewers can eyeball the badge before merging. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Shalom-Karr
added a commit
that referenced
this pull request
May 20, 2026
Adds the 5 close-up avatar-badge captures from PR #23 plus a refreshed 190 reflecting the new avatar-overlay design.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
currentUser.mod_note_unread_count+ MessageBus channel/mod-note-unread-count/{user_id}.pointer-events: noneso clicks pass through to the avatar, opening the user menu (which already exposes the shield tab viaapi.registerUserMenuTab).Implementation
mod-note-header-pip.gjsnow renders an invisible placeholder and injects a.mod-note-avatar-pipchild onto the avatar element via direct DOM manipulation. AMutationObserverondocument.bodyre-attaches if Discourse re-renders the header. Tries multiple selectors so it works across Discourse versions.mod-note-header-pip.scssrewritten to position the badge in the top-right corner of the avatar, usingvar(--tertiary)background with a 2pxvar(--header_background)border to separate it from the avatar. Shows "9+" when count > 9..mod-note-header-pip/.mod-note-header-pip-countto.mod-note-avatar-pip/.mod-note-avatar-pip.visible, and the seen-ack poll readsdataset.countinstead oftextContent(the number is rendered via::before { content: attr(data-count) }).Test plan
/for staff, hidden after opening the shield tab, and never present for regular usersGenerated with Claude Code