creation of follow-request UI

src/app/components/floating-column/manage-account/notifications/notification/notification.component.html

@@ -1,4 +1,35 @@
 <div class="notification">
+    <div *ngIf="notification.type === 'follow_request'">
+        <div class="stream__notification--icon" title="{{notification.account.acct}}">
+            <fa-icon class="followed" [icon]="faUserClock"></fa-icon>
+        </div>
+        <div class="stream__notification--label">
+            <a href class="stream__link" title="{{notification.account.acct}}"
+                (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
+                innerHTML="{{ notification.account | accountEmoji }}"></a>
+            submited a follow request
+        </div>
+
+        <a href (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
+            class="follow-account" title="{{notification.account.acct}}">
+            <img class="follow-account__avatar" src="{{ notification.account.avatar }}" />
+            <span class="follow-account__display-name" innerHTML="{{ notification.account | accountEmoji }}"></span>
+            <span class="follow-account__acct">@{{ notification.account.acct }}</span>
+        </a>
+
+        <div class="follow_request">
+            <a href title="Authorize" class="follow_request__link follow_request__link--check"
+                (click)="acceptFollowRequest()">
+                <fa-icon class="follow_request__icon" [icon]="faCheck"></fa-icon>
+            </a>
+            <a href title="Reject"  class="follow_request__link follow_request__link--cross"
+                (click)="refuseFollowRequest()">
+                <fa-icon class="follow_request__icon" [icon]="faTimes"></fa-icon>
+            </a>
+        </div>
+    </div>
+
+
     <div *ngIf="notification.type === 'follow'">
         <div class="stream__notification--icon" title="{{notification.account.acct}}">
             <fa-icon class="followed" [icon]="faUserPlus"></fa-icon>

src/app/components/floating-column/manage-account/notifications/notification/notification.component.scss

@@ -46,6 +46,7 @@
     color: $boost-color;
 }
 
+$acccount-info-left: 70px;
 .follow-account {
     padding: 5px;
     height: 60px;
@@ -63,7 +64,6 @@
         border-radius: 2px;
     }
     
-    $acccount-info-left: 70px;
     &__display-name {
         position: absolute;
         top: 7px;
@@ -81,5 +81,44 @@
         left: $acccount-info-left;
         font-size: 13px;
         color: $status-links-color;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        width: calc(100% - #{$acccount-info-left});
+    }
+}
+
+.follow_request {
+    width: calc(100% - #{$acccount-info-left});
+    margin-left: $acccount-info-left;
+
+    &__link {
+        display: inline-block;
+        width: calc(50%);
+        padding: 2px;
+
+        text-align: center;
+        color: rgb(219, 219, 219);
+        transition: all .2s;
+
+        // outline: 1px dotted greenyellow;
+
+        &--check {
+            &:hover {
+                color: greenyellow;
+            }
+        }
+
+        &--cross {
+            &:hover {
+                color: orangered;
+            }
+        }
+    }
+
+    &__icon {
+        text-align: center;
     }
 }

src/app/components/floating-column/manage-account/notifications/notification/notification.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { faUserPlus } from "@fortawesome/free-solid-svg-icons";
+import { faUserPlus, faUserClock, faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 
 import { NotificationWrapper } from '../notifications.component';
 import { ToolsService } from '../../../../../services/tools.service';
@@ -13,6 +13,9 @@ import { BrowseBase } from '../../../../../components/common/browse-base';
 })
 export class NotificationComponent extends BrowseBase {  
     faUserPlus = faUserPlus;
+    faUserClock = faUserClock;
+    faCheck = faCheck;
+    faTimes = faTimes;
 
     @Input() notification: NotificationWrapper;
 
@@ -36,4 +39,14 @@ export class NotificationComponent extends BrowseBase {
         window.open(url, '_blank');
         return false;
     }
+
+    acceptFollowRequest(): boolean{
+
+        return false;
+    }
+
+    refuseFollowRequest(): boolean{
+
+        return false;
+    }
 }

src/app/components/floating-column/manage-account/notifications/notifications.component.ts

@@ -164,5 +164,5 @@ export class NotificationWrapper {
     wrapperId: string;
     account: Account;
     status: StatusWrapper;
-    type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll';
+    type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll' | 'follow_request';
 }

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

@@ -128,6 +128,8 @@ export class StreamNotificationsComponent extends BrowseBase {
 
         this.mastodonService.getNotifications(this.account, null, null, null, 10)
             .then((notifications: Notification[]) => {
+                console.warn(notifications);
+
                 this.isNotificationsLoading = false;
 
                 this.notifications = notifications.map(x => { 

src/app/services/models/mastodon.interfaces.ts

@@ -130,7 +130,7 @@ export interface Mention {
 
 export interface Notification {
     id: string;
-    type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll';
+    type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll' | 'follow_request';
     created_at: string;
     account: Account;
     status?: Status;