Pinned message feature design

[jupjohn]

Ignoring the fact that retrieval of pinned messages is currently restricted to moderators, how should the following parts be designed:

1. Currently pinned messages;
2. Pinned message management for moderators;
3. (assuming future eventsub support) updates to pinned messages.

Is there a reason not to follow Twitch's current design of 'message floating at top + actions on right'?

Twitch UI References

Normal user, pinned message (default):

Tall screenshot...

Normal user, pinned message (expanded):

Tall screenshot...

Moderator, post-pin UI:

Moderator, pin actions:

[Mm2PL]

I think we should somewhat follow the existing design. What I don't like is the amount of bespoke UI elements around the message itself, like having both an expand/collapse option and a dismiss option. I'd love for it to more or less look like a regular chat message, maybe with a dismiss button.

pajlada = c2.Channel.by_name('pajlada')
m = c2.Message.new({
  elements={
     {type='timestamp'},
     {type='text', color='#ffdaa520', text='Mm2PL:', style=c2.FontStyle.ChatMediumBold},
     {type='text', text='This is a fake pinned message'},
     {type='linebreak', flags=c2.MessageElementFlag.AlwaysShow},
     {type='text', text='Pinned by Mm2PL at 02:43', style=c2.FontStyle.Tiny, color='system'},
     {type='text', text='                          [Dismiss]', color='link'}
     -- this could use a special element which spaces it all the way to the right of the message
     -- or be a Qt button in a Qt layout
  }
})
pajlada:add_message(m)

[Nerixyz]

Reasons to Pin a Message

1. 1️🟥 Provide context for the current stream. For example saying the streamer is AFK or providing a link to interact on a third party site (ask questions etc.)
2. 2️🟧 Show currently discussed topic
3. 3️🟦 Show a funny user message
4. 4️🟪 Show a sponsored message or other advertisements

---

I can see two general directions with this feature.

1. Repost the message wrapped with a footer or header and highlight it. Similar to Pinned message feature design #7000 (comment) if I understand it correctly.
2. Show the message at the top of the split. Similar to what Twitch does.

The first direction is good for 🟦 and (for users) 🟪, as it primarily highlights the message. However, once the message is older and gets pushed out of the scrollback, it's gone.
The second direction is good for 🟥, 🟧, and (for streamers/advertisers) 🟪, as users can always see the message and thus the context.

---

I prefer the second direction. However, I don't think we should always show the message. We could show the message for a few seconds at the top when it gets pinned (or when the user first opens the split). Afterward, we add a button in the header to show the pinned message (e.g. in a popup). This way you can always get to the message, but it's not too distracting.

We can already show single messages in our MessageView that we use for replies.

If we go with this approach, we should consider other features adding buttons to the header as well. Notably, how would the header look like if there is a pinned message, active poll, and active prediction?

[realtlos]

Hey, I’m really interested in helping work on the UI for pins if no one else is currently doing so.

My idea was similar to what was mentioned where we briefly show the pinned message, then have it collapse into a pin icon in the header. Clicking it would open a native style UI/modal where moderators could access quick actions like changing the expiration time or removing the pin.

I’ve also considered adding:

• A setting to change the default pin duration (since the native UI always defaults to 20 minutes and has to be changed manually each time)
• Possibly an option to prevent pins from auto collapsing for users who prefer them expanded?

I initially designed it to try and match the native Twitch UI as closely as i could, but I know that might not be the direction you guys want to go in, so I’m happy to adapt it to whatever style/design direction fits best. Below are some images of what i currently have.

Full pin message:

Half collapsed:

Fully collapsed:

With duration:

Mod options:

[realtlos]

Yeah that makes sense. I’ll rework the design to fit Chatterino’s style more instead of trying to mirror the Twitch UI. I like the idea of using a simpler themeable background + bottom border approach.

Also PubSub does expose pinned message events, so we could probably use that for updates. I know Twitch said they planned to shut PubSub down a while ago, but since it’s still around it could work as a temporary solution.

[4rneee]

pin icon in the header

With the Automatically close user popup when it loses focus setting enabled, Chatterino uses a pin icon in the user popup to toggle if it stays open when losing focus. (same goes for reply threads)

I'm not sure if it's a problem to use the same (or a similar) icon for a different purpose. Just thought it's worth mentioning in case someone has an opinion on that.

[realtlos]

@Nerixyz This is what Ive come up with so far for the UI. Let me know what you think!

Normal pin:

Collapsed pin (visible once pin button is toggled):

Pin with duration:

Moderator options:

[Nerixyz]

This is what Ive come up with so far for the UI. Let me know what you think!

Yes, that looks more in line with the other Chatterino UI 👍

I'm not sure if it's a problem to use the same (or a similar) icon for a different purpose. Just thought it's worth mentioning in case someone has an opinion on that.

I was also thinking about a good icon for this. Maybe a message with a pin on it? Something like this but a pin instead of a link:

[realtlos]

@Nerixyz Hows something like this for the icon?

[realtlos]

@Nerixyz Pretty much have everything ready to go, should i open the pr now?

[iProdigy]

Could wait on #7004 to use the same helix methods

[realtlos]

Could wait on #7004 to use the same helix methods

Sounds good!