added selector

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

@@ -1,3 +1,17 @@
-<p>
-  stream-notifications works!
-</p>
+<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>
+        <a href class="notifications__selector__button"
+            title="display mentions"
+            (click)="select('mentions')"
+            [class.notifications__selector__button--selected]="!displayingAll">Mentions</a>
+    </div>
+
+    <div class="notifications__elements flexcroll" #statusstream (scroll)="onScroll()" tabindex="0">
+
+        
+    </div>
+</div>

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

@@ -0,0 +1,45 @@
+@import "variables";
+@import "commons";
+
+$selector-height: 30px;
+
+.notifications {
+    height: calc(100%);
+    width: calc(100%);
+    position: relative;
+
+    &__selector {
+        height: $selector-height;
+        background-color: $notification-column-selector-background;
+        width: calc(100%);
+
+        &__button {
+            text-decoration: none;
+            display: inline-block;
+            width: 50%;
+            height: 100%;
+            text-align: center;
+            padding-top: 3px;
+            color: $notification-column-selector-color;
+
+            &--selected {
+                color: $notification-column-selector-color-hover;
+            }
+
+
+        }
+    }
+
+    &__elements {
+        height: calc(100% - #{$selector-height});
+        width: calc(100%);
+        position: relative;
+        
+        overflow: auto;
+        outline: none; 
+        :focus {
+            outline: none; 
+        }
+        
+    }
+}

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

@@ -1,15 +1,24 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-stream-notifications',
-  templateUrl: './stream-notifications.component.html',
-  styleUrls: ['./stream-notifications.component.scss']
+    selector: 'app-stream-notifications',
+    templateUrl: './stream-notifications.component.html',
+    styleUrls: ['./stream-notifications.component.scss']
 })
 export class StreamNotificationsComponent implements OnInit {
+    displayingAll = true;
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+    }
 
+    select(value: 'all' | 'mentions'): boolean {
+        if(value === 'all'){
+            this.displayingAll = true;
+        } else {
+            this.displayingAll = false;
+        }
+        return false;
+    }
 }

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

@@ -1,10 +1,8 @@
-import { Component, OnInit, Input, ElementRef, ViewChild, HostListener } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
 import { Subject } from "rxjs";
-import { faHome, faGlobe, faUser, faHashtag, faListUl, faBars, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { faHome, faGlobe, faUser, faHashtag, faListUl, faBars, IconDefinition, faBell } from "@fortawesome/free-solid-svg-icons";
 
 import { StreamElement, StreamTypeEnum } from "../../states/streams.state";
-import { Status } from "../../services/models/mastodon.interfaces";
-import { AccountInfo } from "../../states/accounts.state";
 import { OpenThreadEvent } from "../../services/tools.service";
 import { StreamStatusesComponent } from './stream-statuses/stream-statuses.component';
 
@@ -49,7 +47,7 @@ export class StreamComponent implements OnInit {
                 this.columnFaIcon = faListUl;
                 break;
             case StreamTypeEnum.activity: 
-                
+                this.columnFaIcon = faBell;
                 this.displayingNotifications = true;
                 break;
         }

src/sass/_variables.scss

@@ -90,4 +90,8 @@ $poll-editor-separator: #e7e7e7;
 $poll-editor-input-border: #b9b9b9;
 $poll-editor-input-border-focus: #007be0;
 
-$scheduler-background: #3e455f;
+$scheduler-background: #3e455f;
+
+$notification-column-selector-background: #171c29;
+$notification-column-selector-color: #999fb1;
+$notification-column-selector-color-hover: white;