As a project member

I want to see the number of unread notifications in the work packages view.

So that I can better decide whether I want to have a look at these changes.

**Acceptance criteria**

* [x] The number of relations and watchers are displayed in brackets. ([Pull Request](https://github.com/opf/openproject/pull/9582))
* [x] The number of unread notifications are shown inside a dot within the activity header. ([Pull Request](https://github.com/opf/openproject/pull/9582))
* [x] The activities with unread notifications are highlighted within the activity list. ([Pull Request](https://github.com/opf/openproject/pull/9582))
* [x] There can be activities that the user did not subscribe to. Those have no dot. ([Pull Request](https://github.com/opf/openproject/pull/9582))
* [ ] Scrolling: Always scroll to the oldest unread notification + the activity before (to create more context). Keep in mind the user's individual order settings (chronological/reverse chronological).
* [ ] In case a deep link is followed including an activity anchor, the activity anchor overrules the notification scrolling.
* [ ] Unread notifications are automatically switched to status "Read" after x seconds but the notifications are still marked.
* [ ] The above behaviour is present regardless of where the work package page was opened from (notification center, work package list, board, my page, ...) Begin of the insertion
End of the insertion Begin of the deletion

**Open**

End of the deletion * Begin of the insertion[ ] OpeningEnd of the insertion Begin of the deletion How is the behaviour reflected in the Overview tab and in fullscreen mode? In both places, the specified behaviour might lead to users missingEnd of the deletion a Begin of the insertionwork package should not removeEnd of the insertion Begin of the deletion notification:
* InEnd of the deletion the Begin of the deletion Overview tab, the three most recent activities are displayed. It would be an option to also highlight theEnd of the deletion unread Begin of the insertionnotification badgesEnd of the insertion Begin of the deletion notifications present there and only treat those notifications that are displayedEnd of the deletion in the Begin of the insertionactivity.

**Out of scope**

End of the insertion Begin of the deletion overview tab as read after some time has passed. But this might be a wrong assumption as the activities are oftentimes not visible until the user scrolls down.
End of the deletion * Begin of the insertionDealingEnd of the insertion Begin of the deletion In fullscreen mode, the activities are displayed by default and following the acceptance criteria, we would scroll to the oldest unread notification. But the user might be preoccupiedEnd of the deletion with Begin of the deletion information inEnd of the deletion the Begin of the insertionsituationEnd of the insertion Begin of the deletion left corner, e.g. reading the description, and leave the view without having glanced at the activities.
* On smaller screens the activity tab is below the overview content. InEnd of the deletion that Begin of the deletion case, users might not even seeEnd of the deletion the Begin of the deletion activity tab, but theEnd of the deletion notifications are Begin of the insertionremoved even thoughEnd of the insertion Begin of the deletion marked as read anyways.
* InEnd of the deletion the Begin of the insertionuser didn't haveEnd of the insertion Begin of the deletion notification center: When I click onEnd of the deletion a Begin of the insertionchance toEnd of the insertion Begin of the deletion notification, it is currently directly marked asEnd of the deletion read Begin of the insertionthem.
End of the insertion Begin of the deletion (technically **before** the split screen is opened), resulting in no bubbles in the activity tab. I guess this should be avoided?

**Out of scope**

End of the deletion * Add a button "Mark as read" to the toolbar.
* Changing the buttons in the toolbar. We keep the current styling for now.
* Flagging work packages

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/21964/content"></div></figure>

**Visuals**

https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/UX-Wireframes?node-id=47%3A591