Fix outstanding UX issues with replies/mentions/keyword notifs

[taffyko]

This is a continuation of PR #85 from the now-incorporated matrix-react-sdk, see the discussion there.

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 #8821 as well.

For the "Modern" layout, a bright stripe has been added to the left edge of the highlighted-message background to make mentions/notifications more visible, in the spirit of element-hq/element-meta#1476.
EDIT: This addition has been dropped from this PR, as it needs additional work to adhere to the Compound design system guidelines — I believe it would be best for me to address it in a follow-up PR instead.
For now, disregard the highlighted left edge that appears in the "After" screenshots below.

Before	After

[CLAassistant]

All committers have signed the CLA.