added pinned status in profiles

src/app/components/stream/status/status.component.html

@@ -1,18 +1,25 @@
-<div [class.direct-message]="isDirectMessage">
+<div class="status-wrapper" [class.direct-message]="isDirectMessage">
     <div class="reblog" *ngIf="reblog">
         <a class="reblog__profile-link" href (click)="openAccount(status.account)"
             (auxclick)="openUrl(status.account.url)"><span innerHTML="{{ status.account | accountEmoji }}"></span> <img
                 *ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
     </div>
+    <div *ngIf="statusWrapper.status.pinned" class="pinned">
+        <div class="notification--icon">
+            <fa-icon class="pinned__icon" [icon]="faThumbtack"></fa-icon>
+        </div>
+        <div class="notification--label pinned__label">
+            Pinned
+        </div>
+    </div>
     <div *ngIf="notificationType === 'favourite'">
         <div class="notification--icon">
             <fa-icon class="favorite" [icon]="faStar"></fa-icon>
         </div>
         <div class="notification--label">
-            <a href class="notification--link" title="open account"
-                (click)="openAccount(notificationAccount)"
-                (auxclick)="openUrl(notificationAccount.url)"
-                innerHTML="{{ notificationAccount  | accountEmoji }}"></a> favorited your status
+            <a href class="notification--link" title="open account" (click)="openAccount(notificationAccount)"
+                (auxclick)="openUrl(notificationAccount.url)" innerHTML="{{ notificationAccount  | accountEmoji }}"></a>
+            favorited your status
         </div>
     </div>
     <div *ngIf="notificationType === 'reblog'">
@@ -20,10 +27,9 @@
             <fa-icon class="boost" [icon]="faRetweet"></fa-icon>
         </div>
         <div class="notification--label">
-            <a href class="notification--link" title="open account"
-                (click)="openAccount(notificationAccount)"
-                (auxclick)="openUrl(notificationAccount.url)"
-                innerHTML="{{ notificationAccount | accountEmoji }}"></a> boosted your status
+            <a href class="notification--link" title="open account" (click)="openAccount(notificationAccount)"
+                (auxclick)="openUrl(notificationAccount.url)" innerHTML="{{ notificationAccount | accountEmoji }}"></a>
+            boosted your status
         </div>
     </div>
     <div *ngIf="notificationType === 'poll'">

src/app/components/stream/status/status.component.scss

@@ -1,5 +1,19 @@
 @import "variables";
 @import "commons";
+
+.status-wrapper {
+    position: relative;
+}
+
+.pinned {
+    &__icon{
+        color: $status-secondary-color;
+    }
+    &__label{
+        color: $status-secondary-color;
+    }
+}
+
 .reblog {
     position: relative;
     margin: 5px 0 0 10px;

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

@@ -1,12 +1,11 @@
 import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from "@angular/core";
-import { faStar, faRetweet, faList } from "@fortawesome/free-solid-svg-icons";
+import { faStar, faRetweet, faList, faThumbtack } from "@fortawesome/free-solid-svg-icons";
 
 import { Status, Account } from "../../../services/models/mastodon.interfaces";
 import { OpenThreadEvent, ToolsService } from "../../../services/tools.service";
 import { ActionBarComponent } from "./action-bar/action-bar.component";
 import { StatusWrapper } from '../../../models/common.model';
 import { EmojiConverter, EmojiTypeEnum } from '../../../tools/emoji.tools';
-import { TrustedString } from '@angular/core/src/sanitization/bypass';
 
 @Component({
     selector: "app-status",
@@ -19,6 +18,7 @@ export class StatusComponent implements OnInit {
     faStar = faStar;
     faRetweet = faRetweet;
     faList = faList;
+    faThumbtack = faThumbtack;
 
     displayedStatus: Status;
     displayedStatusWrapper: StatusWrapper;

src/app/components/stream/user-profile/user-profile.component.html

@@ -59,9 +59,19 @@
                 no toots found
             </div>
 
+            <div *ngFor="let statusWrapper of pinnedStatuses">
+                <app-status [statusWrapper]="statusWrapper" 
+                    (browseHashtagEvent)="browseHashtag($event)"
+                    (browseAccountEvent)="browseAccount($event)" 
+                    (browseThreadEvent)="browseThread($event)">
+                </app-status>
+            </div>
+
             <div *ngFor="let statusWrapper of statuses">
-                <app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
-                    (browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
+                <app-status [statusWrapper]="statusWrapper" 
+                    (browseHashtagEvent)="browseHashtag($event)"
+                    (browseAccountEvent)="browseAccount($event)" 
+                    (browseThreadEvent)="browseThread($event)">
                 </app-status>
             </div>
 

src/app/components/stream/user-profile/user-profile.component.ts

@@ -41,6 +41,7 @@ export class UserProfileComponent implements OnInit {
 
     relationship: Relationship;
     statuses: StatusWrapper[] = [];
+    pinnedStatuses: StatusWrapper[] = [];
 
     private lastAccountName: string;
 
@@ -86,9 +87,9 @@ export class UserProfileComponent implements OnInit {
         });
 
         this.deleteStatusSubscription = this.notificationService.deletedStatusStream.subscribe((status: StatusWrapper) => {
-            if(status){
+            if (status) {
                 this.statuses = this.statuses.filter(x => {
-                    return !(x.status.url.replace('https://','').split('/')[0] === status.provider.instance && x.status.id === status.status.id);
+                    return !(x.status.url.replace('https://', '').split('/')[0] === status.provider.instance && x.status.id === status.status.id);
                 });
             }
         });
@@ -101,6 +102,7 @@ export class UserProfileComponent implements OnInit {
 
     private load(accountName: string) {
         this.statuses.length = 0;
+        this.pinnedStatuses.length = 0;
 
         this.displayedAccount = null;
         this.isLoading = true;
@@ -121,8 +123,9 @@ export class UserProfileComponent implements OnInit {
 
                 const getFollowStatusPromise = this.getFollowStatus(this.currentlyUsedAccount, this.displayedAccount);
                 const getStatusesPromise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount);
+                const getPinnedStatusesPromise = this.getPinnedStatuses(this.currentlyUsedAccount, this.displayedAccount);
 
-                return Promise.all([getFollowStatusPromise, getStatusesPromise]);
+                return Promise.all([getFollowStatusPromise, getStatusesPromise, getPinnedStatusesPromise]);
             })
             .catch((err: HttpErrorResponse) => {
                 this.notificationService.notifyHttpError(err);
@@ -133,23 +136,24 @@ export class UserProfileComponent implements OnInit {
             });
     }
 
+    private getPinnedStatuses(userAccount: AccountInfo, account: Account): Promise<void> {
+        return this.mastodonService.getAccountStatuses(userAccount, account.id, false, true, false, null, null, 40)
+            .then((statuses: Status[]) => {
+                for (const status of statuses) {
+                    const wrapper = new StatusWrapper(status, userAccount);
+                    this.pinnedStatuses.push(wrapper);
+                }
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err);
+            });
+    }
+
     private getStatuses(userAccount: AccountInfo, account: Account): Promise<void> {
         this.statusLoading = true;
         return this.mastodonService.getAccountStatuses(userAccount, account.id, false, false, true, null, null, 40)
             .then((statuses: Status[]) => {
                 this.loadStatus(userAccount, statuses);
-
-                // if (statuses.length === 0) {
-                //     this.maxReached = true;
-                //     return;
-                // }
-
-                // for (const status of statuses) {
-                //     const wrapper = new StatusWrapper(status, userAccount);
-                //     this.statuses.push(wrapper);
-                // }
-
-                // this.maxId = this.statuses[this.statuses.length - 1].status.id;
             })
             .catch(err => {
                 this.notificationService.notifyHttpError(err);