Fix outstanding UX issues with replies/mentions/keyword notifs

[taffyko]

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.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

Purpose

• Closes the long-outstanding issue It's confusing that Replies to your own messages (and highlights in general?) are entirely coloured red. element-meta#744,
• @robintown's original PR for this was blocked due to a small edge-case in visual clarity:
  When following a link to a message with keyword notifications, there would no longer be any visual indication that the message triggered a notification.
  • This PR implements her recommended solution, clarifying notification keywords by displaying them in pills.
  • By implementing keyword pills, this closes Notifications triggered by keywords don't decorate messages - Highlight keywords in a pill element-web#8821 as well.

For the "Modern" layout, a bright stripe has been added to the left edge of the highlighted-message background to improve visibility for mentions/notifications, in the spirit of element-hq/element-meta#1476.

Before	After

[dbkr]

Flagged for design review. Where did the design come from here (eg. the stripe colour)?

[taffyko]

@dbkr The stripe takes cues from the layout we already use for selected messages (after following a link to a message)

with the color based on the contrast that Discord's similar highlighted-message style uses.

I had seen a few ticket comments from the community expressing the sentiment that (especially in light mode) the visibility of the "highlighted-message" background can be poor, and a style similar to Discord's would be appreciated — so I followed that sentiment in my design.
Apart from that, there was no formal design process for the stripe — but as a contributor, I'd love to learn how to get involved there!

I can drop it from the PR if it presents an issue.

[dbkr]

Okay, thanks. The colour probably should come from one of the colours in the compound colour scheme already, if there's an appropriate one, but this is all for a designer to look at.

[t3chguy]

We have made the decision to merge matrix-react-sdk into https://github.com/element-hq/element-web - if you are still interested in this contribution please move it to that repository. Closing so it does not remain as a zombie