feat(pinMessages): add pinned messages to UI

[DorraJaouad]

☑️ Resolves

• Fix 📌 Pinned messages #3390

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

New	New
	C

🚧 Tasks

Known issues

• max width: chat width
• Hide system message of system unpinned a message (time-limited pins)
• expired pinned messages

Still missing:

• Show pinned messages in shared Items ( for all or only for moderators?)
• How to restore hidden pinned message?

🏁 Checklist

• 🌏 Tested with different browsers / clients:
  • Chromium (Chrome / Edge / Opera / Brave)
  • Firefox
  • Safari
  • Talk Desktop
  • Integrations with Files sidebar and other apps
  • Not risky to browser differences / client
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[nickvergessen]

🙈

[nimishavijay]

Nice! Looks great :) Some small comments and some questions from my side:

• What does "Discard pin" do? It seems unclear to me. Does it remove the pin only for the user? Maybe then we say "Dismiss" instead? We can also rename "Unpin message" to just "Unpin"
• The "Pinned by admin" when an end date is set is bold, any reason for that? If it is to just differentiate from the second row of text, then we can do maxcontrast for the second row and regular font weight for the first row. Usually in our UI bolding indicates an action (for eg button text) or read status (eg in Mail)
  • just saw that the same visual logic is used for edited messages as well, so it should be changed there too.
• In the list of pins in the right sidebar, we don't have to show the time, or the year if it's the same year. Instead we can show the person who pinned if possible.

[Antreesy]

How

[DorraJaouad]

Processed the valid nitpicks mentioned in the previous review. Now I will add the design changes for message that is pinned in the chat

Not blocking anymore