added notification switch, animation and mentions

src/app/components/stream/stream-notifications/stream-notifications.component.html

@@ -1,17 +1,28 @@
 <div class="notifications">
     <div class="notifications__selector">
         <a href class="notifications__selector__button" title="display all notifications" (click)="select('all')"
-            [class.notifications__selector__button--selected]="displayingAll">All</a>
+            [class.notifications__selector__button--selected]="displayingNotifications">All</a>
         <a href class="notifications__selector__button" title="display mentions" (click)="select('mentions')"
-            [class.notifications__selector__button--selected]="!displayingAll">Mentions</a>
+            [class.notifications__selector__button--selected]="displayingMentions">Mentions</a>
     </div>
 
-    <div class="notifications__elements flexcroll" #statusstream (scroll)="onScroll()" tabindex="0">
+    <div class="notifications__elements">
-        <div class="notification" *ngFor="let notification of notifications">
+        <div [class.notifications__elements__wrapper--selected]="displayingNotifications" 
-            <app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)"
+            class="notifications__elements__wrapper flexcroll" #notificationstream (scroll)="onScroll()" tabindex="0">
-                (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
+            <div class="notification" *ngFor="let notification of notifications">
-            </app-notification>
+                <app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)"
-        </div>
+                    (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
+                </app-notification>
+            </div>
 
+        </div>
+        <div [class.notifications__elements__wrapper--selected]="displayingMentions"  
+            class="notifications__elements__wrapper flexcroll" #mentionstream (scroll)="onScroll()" tabindex="0">
+            <div class="notification" *ngFor="let notification of mentions">
+                <app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)"
+                    (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
+                </app-notification>
+            </div>
+        </div>
     </div>
 </div>

src/app/components/stream/stream-notifications/stream-notifications.component.scss

@@ -35,12 +35,35 @@ $selector-height: 30px;
         width: calc(100%);
         position: relative;
 
-        overflow: auto;
+        &__wrapper {
-        outline: none; 
+            transition: all .15s;
+            position: absolute;
+            height: calc(100%);
+            width: calc(100%);
+
+            // right: 0;
+            // left: 0;
+            // bottom: 0;
+
+            z-index: 1;
+            opacity: 0;
+
+            overflow: auto;
+            outline: none;
+
+            &--selected {
+                z-index: 10;
+                opacity: 1;
+            }
+        }
+
+
         :focus {
             outline: none;
         }
 
+
+
     }
 }
 

src/app/components/stream/stream-notifications/stream-notifications.component.ts

@@ -1,21 +1,22 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, OnDestroy } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 
 import { Notification } from '../../../services/models/mastodon.interfaces';
 import { StreamElement } from '../../../states/streams.state';
 import { OpenThreadEvent, ToolsService } from '../../../services/tools.service';
 import { MastodonService } from '../../../services/mastodon.service';
-import { UserNotificationService } from '../../../services/user-notification.service';
+import { UserNotificationService, UserNotification } from '../../../services/user-notification.service';
 import { NotificationWrapper } from '../../floating-column/manage-account/notifications/notifications.component';
+import { AccountInfo } from 'src/app/states/accounts.state';
 
 @Component({
     selector: 'app-stream-notifications',
     templateUrl: './stream-notifications.component.html',
     styleUrls: ['./stream-notifications.component.scss']
 })
-export class StreamNotificationsComponent implements OnInit {
+export class StreamNotificationsComponent implements OnInit, OnDestroy {
-    
+    displayingNotifications = true;
-    displayingAll = true;
+    displayingMentions = false;
 
     notifications: NotificationWrapper[] = [];
     mentions: NotificationWrapper[] = [];
@@ -27,7 +28,13 @@ export class StreamNotificationsComponent implements OnInit {
     @Output() browseHashtagEvent = new EventEmitter<string>();
     @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
 
-    @ViewChild('statusstream') public statustream: ElementRef;
+    @ViewChild('notificationstream') public notificationstream: ElementRef;
+    @ViewChild('mentionstream') public mentionstream: ElementRef;
+
+    private nbStatusPerIteration: number = 10;
+
+    private goToTopSubscription: Subscription;
+    private mentionsSubscription: Subscription;
 
     constructor(
         private readonly userNotificationService: UserNotificationService,
@@ -35,34 +42,91 @@ export class StreamNotificationsComponent implements OnInit {
         private readonly toolsService: ToolsService) { }
 
     ngOnInit() {
+        this.goToTopSubscription = this.goToTop.subscribe(() => {
+            this.applyGoToTop();
+        });
+
         this.loadNotifications();
 
     }
 
+    ngOnDestroy(): void {
+        this.goToTopSubscription.unsubscribe();
+        this.mentionsSubscription.unsubscribe();
+    }
+
+    private reduceSize(elements: NotificationWrapper[]) {
+        if (elements.length > 2 * this.nbStatusPerIteration) {
+            elements.length = 2 * this.nbStatusPerIteration;
+        }
+    }
+
+    private applyGoToTop(): boolean {
+        let stream: HTMLElement;
+        if (this.displayingNotifications) {
+            this.reduceSize(this.notifications);
+            stream = this.notificationstream.nativeElement as HTMLElement;
+        } else {
+            this.reduceSize(this.mentions);
+            stream = this.mentionstream.nativeElement as HTMLElement;
+        }
+
+        setTimeout(() => {
+            stream.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }, 0);
+
+        return false;
+    }
+
+    private loadMentions(account: AccountInfo, userNotifications: UserNotification[]) {
+        if(!userNotifications) return;
+
+        let userNotification = userNotifications.find(x => x.account.id === account.id);
+        
+        if(!userNotification) return;
+        
+        let mentions = userNotification.mentions.map(x => new NotificationWrapper(x, account)).reverse();
+
+        if(!mentions) return;
+
+        mentions.forEach(mention => {
+            if (!this.mentions.find(x => x.wrapperId === mention.wrapperId)) {
+                this.mentions.unshift(mention);
+            }
+        });
+    }
+
     loadNotifications(): any {
         const account = this.toolsService.getAccountById(this.streamElement.accountId);
 
-        // let getMentionsPromise = this.mastodonService.getNotifications(account, ['favourite', 'follow', 'reblog', 'poll'], null, null, 10)
+        this.mentionsSubscription = this.userNotificationService.userNotifications.subscribe((userNotifications: UserNotification[]) => {
-        //         .then((notifications: Notification[]) => {
+            console.warn(userNotifications);
-        //            this.mentions = notifications;
+            this.loadMentions(account, userNotifications);
-        //         })
+        });
-        //         .catch(err => {                    
-        //         });
 
         let getNotificationPromise = this.mastodonService.getNotifications(account, null, null, null, 10)
-                .then((notifications: Notification[]) => {
+            .then((notifications: Notification[]) => {
-                    this.notifications = notifications.map(x => new NotificationWrapper(x, account));
+                this.notifications = notifications.map(x => new NotificationWrapper(x, account));
-                })
+            })
-                .catch(err => {                    
+            .catch(err => {
-                });
+            });
 
     }
 
     select(value: 'all' | 'mentions'): boolean {
-        if(value === 'all'){
+        if (value === 'all') {
-            this.displayingAll = true;
+            this.displayingMentions = false;
+            setTimeout(() => {
+                this.displayingNotifications = true;
+            }, 150);
         } else {
-            this.displayingAll = false;
+            this.displayingNotifications = false;
+            setTimeout(() => {
+                this.displayingMentions = true;
+            }, 150);
         }
         return false;
     }
@@ -73,7 +137,12 @@ export class StreamNotificationsComponent implements OnInit {
 
     focus(): boolean {
         setTimeout(() => {
-            var element = this.statustream.nativeElement as HTMLElement;
+            let element: HTMLElement;
+            if (this.displayingMentions) {
+                element = this.mentionstream.nativeElement as HTMLElement;
+            } else {
+                element = this.notificationstream.nativeElement as HTMLElement;
+            }
             element.focus();
         }, 0);
         return false;