Display pinned messages on a banner at the top of a room

[florianduros]

Checklist

• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• Sign-off given on the changes (see CONTRIBUTING.md).

Part of https://github.com/element-hq/element-internal/issues/609
Figma https://www.figma.com/design/nwbnk8RaZctjrrRGTUcx1X/Pinned-Messages?node-id=24-126291&t=21A0TwvtjtfbAidQ-0

• Extract the pinned event hooks of the pinned message list to a dedicated hook files
• Add a banner at the top of a room to display the pinned messages.

[dbkr]

Hmm, really feels like this is pulling logic out of the js-sdk and duplicating it here. Is there any way we could let the js-sdk do all this work?

[florianduros]

Yeah, I copy pasta this logic from the previous impl of pinning. You are talking about the manual event fetching right?

[florianduros]

@dbkr My proposition is leave this duplication here since the duplication existed before this PR. And I'll make a dedicated PR to move all the ( https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/components/views/messages/MPollEndBody.tsx#L41 ) duplicates into the js-sdk.

[dbkr]

Yeah, sounds ideal if you have the time - thank you!