[38693] Scroll to oldest unread activity in the activity tab (#9606)

* make the tabs stick to the top while scrolling

* scroll to the oldest unread notification and make space above the scrolled element

* resolving eslint issues

* set the position of sticky element to its parent context

* use class instead of adding style attribute

* fix eslint error in using promises

* use hal resource array instead of any

* resolving eslint errors while resolving conflicts

* change the if conditions and use class name for element selecting

* remove space before parantheses

frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.sass

@@ -16,3 +16,7 @@
 
   &--avatar
     flex-shrink: 0
+  
+  &--unread-notification-bubble
+    &_scrolled
+      scroll-margin-top: 200px

frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-base.controller.ts

@@ -90,9 +90,10 @@ export class ActivityPanelBaseController extends UntilDestroyedMixin implements
       .pipe(this.untilDestroyed())
       .subscribe((wp) => {
         this.workPackage = wp;
-        this.wpActivity.require(this.workPackage).then((activities:any) => {
+        void this.wpActivity.require(this.workPackage).then((activities:HalResource[]) => {
           this.updateActivities(activities);
           this.cdRef.detectChanges();
+          this.scrollToUnreadNotification();
         });
       });
 
@@ -142,6 +143,25 @@ export class ActivityPanelBaseController extends UntilDestroyedMixin implements
       );
   }
 
+  protected scrollToUnreadNotification():void {
+    // scroll to the unread notification only if there is no deep link
+    if (window.location.href.indexOf('activity#') > -1) {
+      return;
+    }
+    const unreadNotifications = document.querySelectorAll('.comments-number--bubble');
+    const unreadNotificationsLength = unreadNotifications?.length;
+    if (!unreadNotificationsLength) {
+      return;
+    }
+    if (this.reverse) {
+      unreadNotifications[unreadNotificationsLength - 1].classList.add('op-user-activity--unread-notification-bubble_scrolled');
+      unreadNotifications[unreadNotificationsLength - 1].scrollIntoView();
+    } else {
+      unreadNotifications[0].classList.add('op-user-activity--unread-notification-bubble_scrolled');
+      unreadNotifications[0].scrollIntoView();
+    }
+  }
+
   public toggleComments():void {
     this.onlyComments = !this.onlyComments;
     this.updateActivities(this.unfilteredActivities);

frontend/src/app/features/work-packages/components/wp-tabs/components/wp-tabs/wp-tabs.component.html

@@ -1,6 +1,6 @@
 <op-scrollable-tabs
   [tabs]="tabs"
-  class="op-work-package-tabs"
+  class="op-work-package-tabs op-work-package-tabs_sticky"
 >
   <ng-container slot="actions" *ngIf="view === 'split'">
     <li class="tab-icon">

frontend/src/app/features/work-packages/components/wp-tabs/components/wp-tabs/wp-tabs.component.sass

@@ -0,0 +1,7 @@
+.op-work-package-tabs
+  &_sticky
+    position: sticky
+    top: 0
+    background: white
+    z-index: 1
+    display: block