Implement notifications area

The notification area will replace the space of the #nearby conversation.

Documentation Link

Acceptance Criteria.

• In this block of limited height, notifications from channels and private conversations, which the player has marked as “active notifications”, will be accumulated.
• Clicking on a notification will open the corresponding conversation.
• Depending on the source (channel or private message) it will display the following information: – Channel: channel name, username, message preview, time. – Private: avatar snapshot, player name, message preview, time.
• Notifications will have a fixed minimum and maximum width, so the text overflow will be delimited with ....
• New notifications will appear from bottom to top, showing a maximum total of 5 entries.
• The notification area can be scrolled to show up to 30 previous notifications, either using mouse scroll or drag and drop. - Those above 30 will be destroyed.
• A new entry in the notification area will force the scroll down if you are not interacting with the panel (mouse over).
• If there are no new messages, the notification area will fade out after 8 seconds.
• If a new notification comes in, it will reappear.
• Hovering the mouse over the notification area will also make it appear.

UX Notes

• Animation of fade in / fade out, and new notifications needs to be very polished and iterated during development

[davidejensen]

Showcase of the current used animation, will need to talk with Alvaro to see in which direction to go with it

https://user-images.githubusercontent.com/4254522/180749506-82d8d4e4-1765-4ef3-8798-b6f238da788d.mov

[RominaMarchetti]

In the last review meeting we decided to add some UI component in the notification area to add some context (background + title and scroll bar reference when the player is interacting with the notification area).

Here is a prototype to clarify the different behaviour between this elements and the notification.

• When the player hovers the notification area the contextual UI will appear plus the notifications history.
• When the mouse leaves the area the contextual UI immediately disappears while the notifications do it later.