Badge on the pinned messages header icon

[mattermod]

Summary: Add a badge to the pinned post icon to inform users of new pinned posts they haven't read

Note this is blocked on this PR: mattermost/mattermost-webapp#7030

Proposed Solution

• Depends on https://mattermost.atlassian.net/browse/MM-28017
• Adds a dot badge next to the pinned icon
• Uses the ‘Active’ theme color for the badge
• If there's new pinned posts in the channel since the last time you opened the pinned post view (RHS), show the dot. Note that when a server upgrades to the version with this change, only show the dot for new pinned posts after the upgrade (not existing pinned posts before the server upgrade). This is to avoid the dot appearing in every channel once a server is upgraded.


Figma design file

Figma clickable prototype

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-24067

[tclain]

interested to contribute ! Any specific hint on how to start ? (components, data supporting this feature ?)

[amyblais]

Please join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

Please also see our Developer's Guide.

[esethna]

@tclain how's this one going?

[bitsapien]

I'd like to pick this up !

[bitsapien]

I've identified 2 events when this state (new pinned post) would be shown or needs updation:

1. When the channel is "made visible" for the first time after loading the app.
2. When the channel has already been opened once, and someone pins a post.

I'm currently trying to implement the event 2 here.
I noticed that the webapp receives an event called POST_EDITED when the above event occurs, I believe that can be used to set this new state on the app.
I'm currently trying to figure what this "RHS" thing is, I also notice it to be part of the issue ticket. Any help on that ?

[bitsapien]

I figured what the RHS thing is, the right hand panel that opens up on clicking the "pinned post" button. Please ignore the above question.

Any feedback on the direction I'm taking, would be useful though.

[hmhealey]

Yep, those both sound correct for when the badge would need to be updated. I'm a bit surprised that action causes a POST_EDITED event since I thought that was only for when the user edits the text of a post or the message attachment on a post, but that shouldn't cause any problems regardless.

[bitsapien]

The solution for this:

Track unread pinned posts on the server

Add a property lastViewedPinnedPosts to the ChannelMember model.
Add a property lastPinnedPostAt to the Channel model.

Use these properties on the client to determine if there are unread pinned posts :
Channel.lastPinnedPostAt > ChannelMember.lastViewedPinnedPosts ? 'show badge' : 'hide badge'

On first load of the channel on the client

The lastPinnedPostAt would be loaded via the /api/v4/channels/:channel-id/stats API and is made available at the state path entities.channels[id].stats.lastPinnedPostAt

The lastViewedPinnedPosts should be loaded via an API (this is yet to be figured out) and will be available at the state path views.channel.lastViewedChannelPinnedPosts[id]
// TODO: How to make this happen ?

On POST_EDITED event that pins a new post to the channel.

• Update the entities.channels[id].stats.lastPinnedPostAt
• Sync ChannelMember.lastViewedPinnedPostAt to the server via an API ? (yet to be figured out which one.)

On channel member clicking on the pinned posts button to reveal the pinned posts

• Update client state views.channel.lastViewedChannelPinnedPosts[id] to current time.
• Sync this to the server via PUT [ChannelMemberSubRoute]/last_viewed_pinned_posts

[esethna]

@hmhealey if you have thoughts on this implementation? ^

[hmhealey]

Yep, we've been chatting 1-on-1 about it as well

[esethna]

@bitsapien let us know if you'd like to take this for hacktoberfest? :)

[sk409]

I would like to work on this issue.

[esethna]

@sk409 how's this ticket going? Can we help at all?

[sk409]

@esethna
I worked on other mattermost‘s PR to resolve conflicts.
I‘m still working on this issue and I will submit PR within 2 or 3 weeks.