Communication: Remeber last scroll position when switching tabs

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts

@@ -39,9 +39,14 @@ import { CustomBreakpointNames } from 'app/shared/breakpoints/breakpoints.servic
 })
 export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();
+    private sessionStorageKey = 'conversationId.scrollPosition.';
+
     readonly PageType = PageType;
     readonly ButtonType = ButtonType;
 
+    private scrollDebounceTime = 100; // ms
+    private scrollSubject = new Subject<number>();
+
     @Output() openThread = new EventEmitter<Post>();
 
     @ViewChild('searchInput')
@@ -94,6 +99,7 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
         this.subscribeToSearch();
         this.subscribeToMetis();
         this.subscribeToActiveConversation();
+        this.setupScrollDebounce();
         this.isMobile = this.layoutService.isBreakpointActive(CustomBreakpointNames.extraSmall);
 
         this.layoutService
@@ -137,11 +143,13 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
 
     ngAfterViewInit() {
         this.messages.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(this.handleScrollOnNewMessage);
+        this.content.nativeElement.addEventListener('scroll', this.saveScrollPosition);
     }
 
     ngOnDestroy(): void {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
+        this.content.nativeElement.removeEventListener('scroll', this.saveScrollPosition);
     }
 
     private onActiveConversationChange() {
@@ -246,7 +254,12 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     scrollToBottomOfMessages() {
         // Use setTimeout to ensure the scroll happens after the new message is rendered
         setTimeout(() => {
-            this.content.nativeElement.scrollTop = this.content.nativeElement.scrollHeight;
+            const savedScrollPosition = sessionStorage.getItem(this.sessionStorageKey + this._activeConversation?.id);
+            if (savedScrollPosition) {
+                this.content.nativeElement.scrollTop = parseInt(savedScrollPosition, 10);
+            } else {
+                this.content.nativeElement.scrollTop = this.content.nativeElement.scrollHeight;
+            }
         }, 0);
     }
 
@@ -261,4 +274,16 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
             this.searchInput.nativeElement.dispatchEvent(new Event('input'));
         }
     }
+
+    private setupScrollDebounce(): void {
+        this.scrollSubject.pipe(debounceTime(this.scrollDebounceTime), takeUntil(this.ngUnsubscribe)).subscribe((scrollTop) => {
+            if (this._activeConversation?.id) {
+                sessionStorage.setItem(this.sessionStorageKey + this._activeConversation.id, scrollTop.toString());
+            }
+        });
+    }
+
+    private saveScrollPosition = () => {
+        this.scrollSubject.next(this.content.nativeElement.scrollTop);
+    };
 }