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))
* [x] The above behaviour is present regardless of where the work package page was opened from (notification center, work package list, board, my page, ...)
* [x] Changing color of badges in tab from red to blue. ([Pull Request](https://github.com/opf/openproject/pull/9591))
* [x] Notification center: Opening a work package should not remove the unread notification badges in the activity ([Pull Request](https://github.com/opf/openproject/pull/9594))
* [ ] Split view: Make header for activity tab sticky (see mockup) and place the button for marking notifications read there. Begin of the insertion([Pull Request](https://github.com/opf/openproject/pull/9599))End of the insertion
* [ ] Full view: Include the "mark as read" button in the already existing menu at the top right corner of the content area (between the watcher and the zen mode toggle). If easily achievable, turn the header for the activity tab sticky. Begin of the insertion([Pull Request](https://github.com/opf/openproject/pull/9599))End of the insertion
* [ ] A  work package is marked as read in two conditions: Begin of the insertion([Pull Request](https://github.com/opf/openproject/pull/9599))End of the insertion
* [ ] Clicking manually on the "Mark as Read" button on the now-sticky header in the activity tab (whether from Notification Center or work package). Begin of the insertion([Pull Request](https://github.com/opf/openproject/pull/9599))End of the insertion
* [x] Clicking on "Mark as read" button that is always visible on the workpackage in Notification Center. (This applies for when the user clicks on the existing "Mark all as read" button too, naturally). ([Pull Request](https://github.com/opf/openproject/pull/9594))
* [ ] 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.

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

**Out of scope**

* Begin of the insertion~~DealingEnd of the insertion Begin of the deletion DealingEnd of the deletion with the situation that the notifications are removed even though the user didn&#39;t have a chance to read Begin of the insertionthem.~~ (ObsoleteEnd of the insertion Begin of the deletion them.
* Add a button &quot;MarkEnd of the deletion as Begin of the deletion read&quot; toEnd of the deletion the Begin of the insertionauto-read-change has been omitted)End of the insertion Begin of the deletion toolbar.End of the deletion
* Changing the buttons in the toolbar. We keep the current styling for now.
* Flagging work packages

**Visuals**

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