From 57b98e9e4f536c04ba0ae84ebe1d2ca39560c461 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Thu, 12 Mar 2020 19:54:52 -0400
Subject: [PATCH 01/11] added bookmarks in service and models

---
 src/app/services/mastodon-wrapper.service.ts   | 14 ++++++++++++++
 src/app/services/mastodon.service.ts           | 12 ++++++++++++
 src/app/services/models/api.settings.ts        |  2 ++
 src/app/services/models/mastodon.interfaces.ts |  1 +
 4 files changed, 29 insertions(+)

diff --git a/src/app/services/mastodon-wrapper.service.ts b/src/app/services/mastodon-wrapper.service.ts
index f5262783..0d592055 100644
--- a/src/app/services/mastodon-wrapper.service.ts
+++ b/src/app/services/mastodon-wrapper.service.ts
@@ -183,6 +183,20 @@ export class MastodonWrapperService {
             });
     }
 
+    bookmark(account: AccountInfo, status: Status): Promise<Status> {
+        return this.refreshAccountIfNeeded(account)
+            .then((refreshedAccount: AccountInfo) => {
+                return this.mastodonService.bookmark(refreshedAccount, status);
+            });
+    }
+
+    unbookmark(account: AccountInfo, status: Status): Promise<Status> {
+        return this.refreshAccountIfNeeded(account)
+            .then((refreshedAccount: AccountInfo) => {
+                return this.mastodonService.unbookmark(refreshedAccount, status);
+            });
+    }
+
     getRelationships(account: AccountInfo, accountsToRetrieve: Account[]): Promise<Relationship[]> {
         return this.refreshAccountIfNeeded(account)
             .then((refreshedAccount: AccountInfo) => {
diff --git a/src/app/services/mastodon.service.ts b/src/app/services/mastodon.service.ts
index 076e928c..bbddeeb1 100644
--- a/src/app/services/mastodon.service.ts
+++ b/src/app/services/mastodon.service.ts
@@ -218,6 +218,18 @@ export class MastodonService {
         return this.httpClient.post<Status>(route, null, { headers: headers }).toPromise()
     }
 
+    bookmark(account: AccountInfo, status: Status): Promise<Status> {
+        const route = `https://${account.instance}${this.apiRoutes.bookmarkingStatus}`.replace('{0}', status.id);
+        const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
+        return this.httpClient.post<Status>(route, null, { headers: headers }).toPromise()
+    }
+
+    unbookmark(account: AccountInfo, status: Status): Promise<Status> {
+        const route = `https://${account.instance}${this.apiRoutes.unbookmarkingStatus}`.replace('{0}', status.id);
+        const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
+        return this.httpClient.post<Status>(route, null, { headers: headers }).toPromise()
+    }
+
     getRelationships(account: AccountInfo, accountsToRetrieve: Account[]): Promise<Relationship[]> {
         let params = `?${this.formatArray(accountsToRetrieve.map(x => x.id.toString()), 'id')}`;
 
diff --git a/src/app/services/models/api.settings.ts b/src/app/services/models/api.settings.ts
index 0b82ffc7..1b001c8f 100644
--- a/src/app/services/models/api.settings.ts
+++ b/src/app/services/models/api.settings.ts
@@ -70,4 +70,6 @@ export class ApiRoutes {
     getScheduledStatuses = '/api/v1/scheduled_statuses';
     putScheduleStatus = '/api/v1/scheduled_statuses/{0}';
     deleteScheduleStatus = '/api/v1/scheduled_statuses/{0}';
+    bookmarkingStatus = '/api/v1/statuses/{0}/bookmark';
+    unbookmarkingStatus = '/api/v1/statuses/{0}/unbookmark';
 }
diff --git a/src/app/services/models/mastodon.interfaces.ts b/src/app/services/models/mastodon.interfaces.ts
index b5c8f476..844585e6 100644
--- a/src/app/services/models/mastodon.interfaces.ts
+++ b/src/app/services/models/mastodon.interfaces.ts
@@ -187,6 +187,7 @@ export interface Status {
     language: string;
     pinned: boolean;
     muted: boolean;
+    bookmarked: boolean;
     card: Card;
     poll: Poll;    
 

From 3b8448369d5a0eb15ddc62c63696c006fa22d42e Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Thu, 12 Mar 2020 20:23:53 -0400
Subject: [PATCH 02/11] added bookmark design

---
 .../action-bar/action-bar.component.html      | 55 ++++---------------
 .../action-bar/action-bar.component.scss      | 13 +++++
 .../status/action-bar/action-bar.component.ts | 17 +++++-
 src/sass/_variables.scss                      |  1 +
 4 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/src/app/components/stream/status/action-bar/action-bar.component.html b/src/app/components/stream/status/action-bar/action-bar.component.html
index f783c925..d4f00bb1 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.html
+++ b/src/app/components/stream/status/action-bar/action-bar.component.html
@@ -11,7 +11,8 @@
     <fa-icon *ngIf="isBoostLocked && !isLocked && !isDM" class="action-bar__lock" title="This post cannot be boosted"
         [icon]="faLock"></fa-icon>
     <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
-    <fa-icon *ngIf="isDM && !isLocked" class="action-bar__envelope" title="DM post cannot be boosted" [icon]="faEnvelope"></fa-icon>
+    <fa-icon *ngIf="isDM && !isLocked" class="action-bar__envelope" title="DM post cannot be boosted"
+        [icon]="faEnvelope"></fa-icon>
 
     <a *ngIf="!isLocked" href class="action-bar__link action-bar__link--fav" title="Favourite"
         [class.favorited]="isFavorited" [class.favoriting]="favoriteIsLoading" (click)="favorite()">
@@ -19,6 +20,12 @@
     </a>
     <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
 
+    <a *ngIf="!isLocked" href class="action-bar__link action-bar__link--bookmark" title="Bookmark"
+        [class.bookmarked]="isBookmarked" [class.favoriting]="bookmarkingIsLoading" (click)="bookmark()">
+        <fa-icon [icon]="faBookmark"></fa-icon>
+    </a>
+    <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
+
     <a href class="action-bar__link action-bar__link--cw" title="show content" (click)="showContent()"
         *ngIf="isContentWarningActive">
         <fa-icon [icon]="faWindowClose"></fa-icon>
@@ -28,48 +35,6 @@
         <fa-icon [icon]="faWindowCloseRegular"></fa-icon>
     </a>
 
-    <app-status-user-context-menu class="action-bar__link action-bar__link--more" [statusWrapper]="statusWrapper" (browseThreadEvent)="browseThread($event)"></app-status-user-context-menu>
-    <!-- <a href class="action-bar__link action-bar__link--more" (click)="onContextMenu($event)" title="More">
-        <fa-icon [icon]="faEllipsisH"></fa-icon>
-    </a>
-    <context-menu #contextMenu>
-        <ng-template contextMenuItem (execute)="expandStatus()">
-            Expand status
-        </ng-template>
-        <ng-template contextMenuItem (execute)="copyStatusLink()">
-            Copy link to status
-        </ng-template>
-        <ng-template contextMenuItem divider="true"></ng-template>
-        <ng-template contextMenuItem (execute)="mentionAccount()" *ngIf="!isOwnerSelected">
-            Mention @{{ this.username }}
-        </ng-template>
-        <ng-template contextMenuItem (execute)="dmAccount()" *ngIf="!isOwnerSelected">
-            Direct message @{{ this.username }}
-        </ng-template>
-        <ng-template contextMenuItem (execute)="muteConversation()" *ngIf="isOwnerSelected && !displayedStatus.muted">
-            Mute conversation
-        </ng-template>
-        <ng-template contextMenuItem (execute)="unmuteConversation()" *ngIf="isOwnerSelected && displayedStatus.muted">
-            Unmute conversation
-        </ng-template>
-        <ng-template contextMenuItem divider="true"></ng-template>
-        <ng-template contextMenuItem (execute)="muteAccount()" *ngIf="!isOwnerSelected">
-            Mute @{{ this.username }}
-        </ng-template>
-        <ng-template contextMenuItem (execute)="blockAccount()" *ngIf="!isOwnerSelected">
-            Block @{{ this.username }}
-        </ng-template>
-        <ng-template contextMenuItem (execute)="pinOnProfile()" *ngIf="isOwnerSelected && !displayedStatus.pinned && displayedStatus.visibility === 'public'">
-            Pin on profile
-        </ng-template>
-        <ng-template contextMenuItem (execute)="unpinFromProfile()" *ngIf="isOwnerSelected && displayedStatus.pinned && displayedStatus.visibility === 'public'">
-            Unpin from profile
-        </ng-template>
-        <ng-template contextMenuItem (execute)="delete(false)" *ngIf="isOwnerSelected">
-            Delete
-        </ng-template>
-        <ng-template contextMenuItem (execute)="delete(true)" *ngIf="isOwnerSelected">
-            Delete & re-draft
-        </ng-template>
-    </context-menu> -->
+    <app-status-user-context-menu class="action-bar__link action-bar__link--more" [statusWrapper]="statusWrapper"
+        (browseThreadEvent)="browseThread($event)"></app-status-user-context-menu>
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/status/action-bar/action-bar.component.scss b/src/app/components/stream/status/action-bar/action-bar.component.scss
index e49a119d..0f1f22b9 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.scss
+++ b/src/app/components/stream/status/action-bar/action-bar.component.scss
@@ -34,6 +34,12 @@
         &--fav {
             font-size: 17px;
         }
+        
+        &--bookmark {
+            position: relative;
+            // bottom: -1px;
+            font-size: 16px;
+        }
 
         &--cw {
             position: relative;
@@ -86,6 +92,13 @@
     }
 }
 
+.bookmarked {
+    color: $bookmarked-color;
+
+    &:hover {
+        color: darken($bookmarked-color, 10);
+    }
+}
 
 @keyframes loadingAnimation {
     0% {
diff --git a/src/app/components/stream/status/action-bar/action-bar.component.ts b/src/app/components/stream/status/action-bar/action-bar.component.ts
index 5b2f2f95..986f9727 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.ts
+++ b/src/app/components/stream/status/action-bar/action-bar.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angu
 import { HttpErrorResponse } from '@angular/common/http';
 import { Store } from '@ngxs/store';
 import { Observable, Subscription } from 'rxjs';
-import { faWindowClose, faReply, faRetweet, faStar, faEllipsisH, faLock, faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { faWindowClose, faReply, faRetweet, faStar, faEllipsisH, faLock, faEnvelope, faBookmark } from "@fortawesome/free-solid-svg-icons";
 import { faWindowClose as faWindowCloseRegular } from "@fortawesome/free-regular-svg-icons";
 
 import { MastodonWrapperService } from '../../../../services/mastodon-wrapper.service';
@@ -27,6 +27,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     faEllipsisH = faEllipsisH;
     faLock = faLock;
     faEnvelope = faEnvelope;
+    faBookmark = faBookmark;
 
     @Input() statusWrapper: StatusWrapper;
     @Output() replyEvent = new EventEmitter();
@@ -34,6 +35,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
 
     @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
 
+    isBookmarked: boolean;
     isFavorited: boolean;
     isBoosted: boolean;
     isDM: boolean;
@@ -41,6 +43,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     isBoostLocked: boolean;
     isLocked: boolean;
 
+    bookmarkingIsLoading: boolean;
     favoriteIsLoading: boolean;
     boostIsLoading: boolean;
 
@@ -236,6 +239,18 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         return false;
     }
 
+    bookmark(): boolean {
+        if (this.bookmarkingIsLoading) return;
+
+        this.bookmarkingIsLoading = true;
+        setTimeout(() => {
+            this.isBookmarked = !this.isBookmarked;
+            this.bookmarkingIsLoading = false;
+        }, 2000);
+
+        return false;
+    }
+
     private checkIfBoosted() {
         const selectedAccount = <AccountInfo>this.selectedAccounts[0];
         if (selectedAccount) {
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 59a951ae..23905ab1 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -22,6 +22,7 @@ $status-secondary-color: #4e5572;
 $status-links-color: #d9e1e8;
 $boost-color : #5098eb;
 $favorite-color: #ffc16f;
+$bookmarked-color: #ff5050;
 
 // Block dispositions
 $scroll-bar-width: 8px;

From a9350ff31bd60213225969d23b0919a8cb9f866e Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Fri, 13 Mar 2020 20:20:51 -0400
Subject: [PATCH 03/11] wirering bookmarks to service

---
 .../status/action-bar/action-bar.component.ts | 56 +++++++++++++++++--
 src/app/services/statuses-state.service.ts    | 23 ++++++--
 2 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/src/app/components/stream/status/action-bar/action-bar.component.ts b/src/app/components/stream/status/action-bar/action-bar.component.ts
index 986f9727..fc30c485 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.ts
+++ b/src/app/components/stream/status/action-bar/action-bar.component.ts
@@ -56,6 +56,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
 
     private favoriteStatePerAccountId: { [id: string]: boolean; } = {};
     private bootedStatePerAccountId: { [id: string]: boolean; } = {};
+    private bookmarkStatePerAccountId: { [id: string]: boolean; } = {};
 
     private accounts$: Observable<AccountInfo[]>;
     private accountSub: Subscription;
@@ -78,10 +79,12 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         if (status.reblog) {
             this.favoriteStatePerAccountId[account.id] = status.reblog.favourited;
             this.bootedStatePerAccountId[account.id] = status.reblog.reblogged;
+            this.bookmarkStatePerAccountId[account.id] = status.reblog.bookmarked;
             this.displayedStatus = status.reblog;
         } else {
             this.favoriteStatePerAccountId[account.id] = status.favourited;
             this.bootedStatePerAccountId[account.id] = status.reblogged;
+            this.bookmarkStatePerAccountId[account.id] = status.bookmarked;
             this.displayedStatus = status;
         }
 
@@ -99,9 +102,11 @@ export class ActionBarComponent implements OnInit, OnDestroy {
             if (state && state.statusId === this.displayedStatus.url) {
                 this.favoriteStatePerAccountId[state.accountId] = state.isFavorited;
                 this.bootedStatePerAccountId[state.accountId] = state.isRebloged;
+                this.bookmarkStatePerAccountId[state.accountId] = state.isBookmarked;
 
                 this.checkIfFavorited();
                 this.checkIfBoosted();
+                this.checkIfBookmarked();
             }
         });
     }
@@ -118,6 +123,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         memoryStatusState.forEach((state: StatusState) => {
             this.favoriteStatePerAccountId[state.accountId] = state.isFavorited;
             this.bootedStatePerAccountId[state.accountId] = state.isRebloged;
+            this.bookmarkStatePerAccountId[state.accountId] = state.isBookmarked;
         });
     }
 
@@ -145,6 +151,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
 
         this.checkIfFavorited();
         this.checkIfBoosted();
+        this.checkIfBookmarked();
     }
 
     showContent(): boolean {
@@ -243,10 +250,41 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         if (this.bookmarkingIsLoading) return;
 
         this.bookmarkingIsLoading = true;
-        setTimeout(() => {
-            this.isBookmarked = !this.isBookmarked;
-            this.bookmarkingIsLoading = false;
-        }, 2000);
+
+        const account = this.toolsService.getSelectedAccounts()[0];
+        const usableStatus = this.toolsService.getStatusUsableByAccount(account, this.statusWrapper);
+        usableStatus
+            .then((status: Status) => {
+                if (this.isBookmarked && status.bookmarked) {
+                    return this.mastodonService.unbookmark(account, status);
+                } else if (!this.isBookmarked && !status.bookmarked) {
+                    return this.mastodonService.bookmark(account, status);
+                } else {
+                    return Promise.resolve(status);
+                }
+            })
+            .then((bookmarkedStatus: Status) => {
+                let bookmarked = bookmarkedStatus.bookmarked; //FIXME: when pixelfed will return the good status
+                if (bookmarked === null) {
+                    bookmarked = !this.bookmarkStatePerAccountId[account.id];
+                }
+                this.bookmarkStatePerAccountId[account.id] = bookmarked;
+                this.checkIfBookmarked();
+            })
+            .catch((err: HttpErrorResponse) => {
+                this.notificationService.notifyHttpError(err, account);
+            })
+            .then(() => {
+                this.statusStateService.statusBookmarkStatusChanged(this.displayedStatus.url, account.id, this.bookmarkStatePerAccountId[account.id]);
+                this.bookmarkingIsLoading = false;
+            });
+
+
+
+        // setTimeout(() => {
+        //     this.isBookmarked = !this.isBookmarked;
+        //     this.bookmarkingIsLoading = false;
+        // }, 2000);
 
         return false;
     }
@@ -270,6 +308,16 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         }
     }
 
+    private checkIfBookmarked() {
+        const selectedAccount = <AccountInfo>this.selectedAccounts[0];
+
+        if (selectedAccount) {
+            this.isBookmarked = this.bookmarkStatePerAccountId[selectedAccount.id];
+        } else {
+            this.isBookmarked = false;
+        }
+    }
+
     browseThread(event: OpenThreadEvent) {
         this.browseThreadEvent.next(event);
     }
diff --git a/src/app/services/statuses-state.service.ts b/src/app/services/statuses-state.service.ts
index e8e67d99..5dcdd140 100644
--- a/src/app/services/statuses-state.service.ts
+++ b/src/app/services/statuses-state.service.ts
@@ -5,7 +5,7 @@ import { Subject } from 'rxjs';
 @Injectable({
     providedIn: 'root'
 })
-export class StatusesStateService {
+export class StatusesStateService {    
     private cachedStatusStates: { [statusId: string]: { [accountId: string]: StatusState } } = {};    
     public stateNotification = new Subject<StatusState>();
 
@@ -29,7 +29,7 @@ export class StatusesStateService {
             this.cachedStatusStates[statusId] = {};
 
         if (!this.cachedStatusStates[statusId][accountId]) {
-            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, isFavorited, false);
+            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, isFavorited, false, false);
         } else {
             this.cachedStatusStates[statusId][accountId].isFavorited = isFavorited;
         }
@@ -42,20 +42,35 @@ export class StatusesStateService {
             this.cachedStatusStates[statusId] = {};
 
         if (!this.cachedStatusStates[statusId][accountId]) {
-            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, false, isRebloged);
+            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, false, isRebloged, false);
         } else {
             this.cachedStatusStates[statusId][accountId].isRebloged = isRebloged;
         }
 
         this.stateNotification.next(this.cachedStatusStates[statusId][accountId]);
     }
+
+    statusBookmarkStatusChanged(statusId: string, accountId: string, isBookmarked: boolean) {
+        if (!this.cachedStatusStates[statusId])
+            this.cachedStatusStates[statusId] = {};
+
+        if (!this.cachedStatusStates[statusId][accountId]) {
+            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, false, false, isBookmarked);
+        } else {
+            this.cachedStatusStates[statusId][accountId].isBookmarked = isBookmarked;
+        }
+
+        this.stateNotification.next(this.cachedStatusStates[statusId][accountId]);
+    }
 }
 
 export class StatusState {
+    
     constructor(
         public statusId: string, 
         public accountId: string, 
         public isFavorited: boolean, 
-        public isRebloged: boolean) {
+        public isRebloged: boolean,
+        public isBookmarked: boolean) {
     }
 }

From 9aefdbe870bb20fbfe3b2f52c6bde2e6b1eb2cfb Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Fri, 13 Mar 2020 20:25:51 -0400
Subject: [PATCH 04/11] refactoring

---
 .../status/action-bar/action-bar.component.ts  | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/app/components/stream/status/action-bar/action-bar.component.ts b/src/app/components/stream/status/action-bar/action-bar.component.ts
index fc30c485..b15428a0 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.ts
+++ b/src/app/components/stream/status/action-bar/action-bar.component.ts
@@ -73,21 +73,17 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
-        const status = this.statusWrapper.status;
+        this.displayedStatus = this.statusWrapper.status;
         const account = this.statusWrapper.provider;
 
-        if (status.reblog) {
-            this.favoriteStatePerAccountId[account.id] = status.reblog.favourited;
-            this.bootedStatePerAccountId[account.id] = status.reblog.reblogged;
-            this.bookmarkStatePerAccountId[account.id] = status.reblog.bookmarked;
-            this.displayedStatus = status.reblog;
-        } else {
-            this.favoriteStatePerAccountId[account.id] = status.favourited;
-            this.bootedStatePerAccountId[account.id] = status.reblogged;
-            this.bookmarkStatePerAccountId[account.id] = status.bookmarked;
-            this.displayedStatus = status;
+        if(this.displayedStatus.reblog){
+            this.displayedStatus = this.displayedStatus.reblog;
         }
 
+        this.favoriteStatePerAccountId[account.id] = this.displayedStatus.favourited;
+        this.bootedStatePerAccountId[account.id] = this.displayedStatus.reblogged;
+        this.bookmarkStatePerAccountId[account.id] = this.displayedStatus.bookmarked;
+
         this.analyseMemoryStatus();
 
         if (this.displayedStatus.visibility === 'direct') {

From 0aed10cbffbeeb8e8f524799961aa1ab354c1df5 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Fri, 13 Mar 2020 20:37:21 -0400
Subject: [PATCH 05/11] limit bookmarks to mastodon > 3.1

---
 .../action-bar/action-bar.component.html      |  4 ++--
 .../status/action-bar/action-bar.component.ts | 21 +++++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components/stream/status/action-bar/action-bar.component.html b/src/app/components/stream/status/action-bar/action-bar.component.html
index d4f00bb1..c84d7145 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.html
+++ b/src/app/components/stream/status/action-bar/action-bar.component.html
@@ -20,11 +20,11 @@
     </a>
     <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
 
-    <a *ngIf="!isLocked" href class="action-bar__link action-bar__link--bookmark" title="Bookmark"
+    <a *ngIf="isBookmarksAvailable && !isLocked" href class="action-bar__link action-bar__link--bookmark" title="Bookmark"
         [class.bookmarked]="isBookmarked" [class.favoriting]="bookmarkingIsLoading" (click)="bookmark()">
         <fa-icon [icon]="faBookmark"></fa-icon>
     </a>
-    <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
+    <fa-icon *ngIf="isBookmarksAvailable && isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
 
     <a href class="action-bar__link action-bar__link--cw" title="show content" (click)="showContent()"
         *ngIf="isContentWarningActive">
diff --git a/src/app/components/stream/status/action-bar/action-bar.component.ts b/src/app/components/stream/status/action-bar/action-bar.component.ts
index b15428a0..ed4952bd 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.ts
+++ b/src/app/components/stream/status/action-bar/action-bar.component.ts
@@ -8,7 +8,7 @@ import { faWindowClose as faWindowCloseRegular } from "@fortawesome/free-regular
 import { MastodonWrapperService } from '../../../../services/mastodon-wrapper.service';
 import { AccountInfo } from '../../../../states/accounts.state';
 import { Status, Account, Results } from '../../../../services/models/mastodon.interfaces';
-import { ToolsService, OpenThreadEvent } from '../../../../services/tools.service';
+import { ToolsService, OpenThreadEvent, InstanceInfo } from '../../../../services/tools.service';
 import { NotificationService } from '../../../../services/notification.service';
 import { StatusWrapper } from '../../../../models/common.model';
 import { StatusesStateService, StatusState } from '../../../../services/statuses-state.service';
@@ -42,6 +42,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
 
     isBoostLocked: boolean;
     isLocked: boolean;
+    isBookmarksAvailable: boolean;
 
     bookmarkingIsLoading: boolean;
     favoriteIsLoading: boolean;
@@ -144,11 +145,13 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         if (status.sensitive || status.spoiler_text) {
             this.isContentWarningActive = true;
         }
-
+        
+        this.checkIfBookmarksAreAvailable(this.selectedAccounts[0]);
         this.checkIfFavorited();
         this.checkIfBoosted();
         this.checkIfBookmarked();
     }
+   
 
     showContent(): boolean {
         this.isContentWarningActive = false;
@@ -314,6 +317,20 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         }
     }
 
+    private checkIfBookmarksAreAvailable(account: AccountInfo) {
+        this.toolsService.getInstanceInfo(account)
+            .then((instance: InstanceInfo) => {
+                if(instance.major >= 3 && instance.minor >= 1){
+                    this.isBookmarksAvailable = true;
+                } else {
+                    this.isBookmarksAvailable = false;
+                }
+            })
+            .catch(err => {
+                this.isBookmarksAvailable = false;
+            });
+    }
+
     browseThread(event: OpenThreadEvent) {
         this.browseThreadEvent.next(event);
     }

From a41a46168a29d3c015eeb2e804b3d41caa585b21 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Fri, 13 Mar 2020 20:49:54 -0400
Subject: [PATCH 06/11] action icon design fix

---
 .../stream/status/action-bar/action-bar.component.scss   | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/components/stream/status/action-bar/action-bar.component.scss b/src/app/components/stream/status/action-bar/action-bar.component.scss
index 0f1f22b9..1a5ffa57 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.scss
+++ b/src/app/components/stream/status/action-bar/action-bar.component.scss
@@ -1,7 +1,7 @@
 @import "variables";
 
 .action-bar {
-    // outline: 1px solid greenyellow; // height: 20px;
+    //outline: 1px solid greenyellow; // height: 20px;
     margin: 5px 0px 5px $avatar-column-space;
     padding: 0;
     font-size: 18px;
@@ -10,17 +10,18 @@
     // transform: rotate(0.03deg);
 
     &__link {
+        //outline: 1px solid greenyellow;
         color: $status-secondary-color;
+        padding: 0 4px;
 
         &:hover {
             color: $status-links-color;
         }
 
         &:not(:last-child) {
-            margin-right: 15px;
+            margin-right: 8px;
         }
 
-
         &--reply {
             font-size: 20px;
         }
@@ -35,7 +36,7 @@
             font-size: 17px;
         }
         
-        &--bookmark {
+        &--bookmark {            
             position: relative;
             // bottom: -1px;
             font-size: 16px;

From fe9cb7fea1b12323aca5dee20ee0450303195f83 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Fri, 13 Mar 2020 21:02:37 -0400
Subject: [PATCH 07/11] fix status new state overrinding current state

---
 .../status/action-bar/action-bar.component.ts | 21 ++++++++++++-------
 src/app/services/statuses-state.service.ts    |  6 +++---
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/app/components/stream/status/action-bar/action-bar.component.ts b/src/app/components/stream/status/action-bar/action-bar.component.ts
index ed4952bd..05160c57 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.ts
+++ b/src/app/components/stream/status/action-bar/action-bar.component.ts
@@ -77,7 +77,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         this.displayedStatus = this.statusWrapper.status;
         const account = this.statusWrapper.provider;
 
-        if(this.displayedStatus.reblog){
+        if (this.displayedStatus.reblog) {
             this.displayedStatus = this.displayedStatus.reblog;
         }
 
@@ -97,9 +97,16 @@ export class ActionBarComponent implements OnInit, OnDestroy {
 
         this.statusStateSub = this.statusStateService.stateNotification.subscribe((state: StatusState) => {
             if (state && state.statusId === this.displayedStatus.url) {
-                this.favoriteStatePerAccountId[state.accountId] = state.isFavorited;
-                this.bootedStatePerAccountId[state.accountId] = state.isRebloged;
-                this.bookmarkStatePerAccountId[state.accountId] = state.isBookmarked;
+
+                if (state.isFavorited) {
+                    this.favoriteStatePerAccountId[state.accountId] = state.isFavorited;
+                }
+                if (state.isRebloged) {
+                    this.bootedStatePerAccountId[state.accountId] = state.isRebloged;
+                }
+                if (state.isBookmarked) {
+                    this.bookmarkStatePerAccountId[state.accountId] = state.isBookmarked;
+                }
 
                 this.checkIfFavorited();
                 this.checkIfBoosted();
@@ -145,13 +152,13 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         if (status.sensitive || status.spoiler_text) {
             this.isContentWarningActive = true;
         }
-        
+
         this.checkIfBookmarksAreAvailable(this.selectedAccounts[0]);
         this.checkIfFavorited();
         this.checkIfBoosted();
         this.checkIfBookmarked();
     }
-   
+
 
     showContent(): boolean {
         this.isContentWarningActive = false;
@@ -320,7 +327,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     private checkIfBookmarksAreAvailable(account: AccountInfo) {
         this.toolsService.getInstanceInfo(account)
             .then((instance: InstanceInfo) => {
-                if(instance.major >= 3 && instance.minor >= 1){
+                if (instance.major >= 3 && instance.minor >= 1) {
                     this.isBookmarksAvailable = true;
                 } else {
                     this.isBookmarksAvailable = false;
diff --git a/src/app/services/statuses-state.service.ts b/src/app/services/statuses-state.service.ts
index 5dcdd140..7982c7ec 100644
--- a/src/app/services/statuses-state.service.ts
+++ b/src/app/services/statuses-state.service.ts
@@ -29,7 +29,7 @@ export class StatusesStateService {
             this.cachedStatusStates[statusId] = {};
 
         if (!this.cachedStatusStates[statusId][accountId]) {
-            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, isFavorited, false, false);
+            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, isFavorited, null, null);
         } else {
             this.cachedStatusStates[statusId][accountId].isFavorited = isFavorited;
         }
@@ -42,7 +42,7 @@ export class StatusesStateService {
             this.cachedStatusStates[statusId] = {};
 
         if (!this.cachedStatusStates[statusId][accountId]) {
-            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, false, isRebloged, false);
+            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, null, isRebloged, null);
         } else {
             this.cachedStatusStates[statusId][accountId].isRebloged = isRebloged;
         }
@@ -55,7 +55,7 @@ export class StatusesStateService {
             this.cachedStatusStates[statusId] = {};
 
         if (!this.cachedStatusStates[statusId][accountId]) {
-            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, false, false, isBookmarked);
+            this.cachedStatusStates[statusId][accountId] = new StatusState(statusId, accountId, null, null, isBookmarked);
         } else {
             this.cachedStatusStates[statusId][accountId].isBookmarked = isBookmarked;
         }

From 3a2761eeb11baa4dc95031da0c6a5fe562c16421 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Fri, 13 Mar 2020 21:06:08 -0400
Subject: [PATCH 08/11] added menu to check bookmarks

---
 .../manage-account.component.html             |  7 +++++-
 .../manage-account.component.ts               | 25 ++++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/app/components/floating-column/manage-account/manage-account.component.html b/src/app/components/floating-column/manage-account/manage-account.component.html
index b6e92d85..ddbc59ab 100644
--- a/src/app/components/floating-column/manage-account/manage-account.component.html
+++ b/src/app/components/floating-column/manage-account/manage-account.component.html
@@ -3,10 +3,15 @@
 
     <div class="account__header">
         <a href (click)="browseLocalAccount()" (auxclick)="openLocalAccount()" title="open {{ account.info.id }}">
-            <img class="account__avatar" src="{{account.avatar}}"/>
+            <img class="account__avatar" src="{{account.avatar}}" />
         </a>
 
         <!-- <a href class="account__header--button"><fa-icon [icon]="faUserPlus"></fa-icon></a> -->
+        <a *ngIf="isBookmarksAvailable" href class="account__header--button" title="bookmark" (click)="loadSubPanel('bookmarks')"
+            [ngClass]="{ 'account__header--button--selected': subPanel === 'bookmarks' }">
+            <fa-icon [icon]="faBookmark"></fa-icon>
+        </a>
+
         <a href class="account__header--button" title="favorites" (click)="loadSubPanel('favorites')"
             [ngClass]="{ 'account__header--button--selected': subPanel === 'favorites' }">
             <fa-icon [icon]="faStar"></fa-icon>
diff --git a/src/app/components/floating-column/manage-account/manage-account.component.ts b/src/app/components/floating-column/manage-account/manage-account.component.ts
index 1184994a..c6fdfe69 100644
--- a/src/app/components/floating-column/manage-account/manage-account.component.ts
+++ b/src/app/components/floating-column/manage-account/manage-account.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { faAt, faUserPlus } from "@fortawesome/free-solid-svg-icons";
-import { faBell, faEnvelope, faUser, faStar } from "@fortawesome/free-regular-svg-icons";
+import { faBell, faEnvelope, faUser, faStar, faBookmark } from "@fortawesome/free-regular-svg-icons";
 import { Subscription } from 'rxjs';
 
 import { AccountWrapper } from '../../../models/account.models';
 import { UserNotificationService, UserNotification } from '../../../services/user-notification.service';
-import { OpenThreadEvent, ToolsService } from '../../../services/tools.service';
+import { OpenThreadEvent, ToolsService, InstanceInfo } from '../../../services/tools.service';
 import { MastodonWrapperService } from '../../../services/mastodon-wrapper.service';
 import { Account } from "../../../services/models/mastodon.interfaces";
 import { NotificationService } from '../../../services/notification.service';
@@ -24,10 +24,12 @@ export class ManageAccountComponent implements OnInit, OnDestroy {
     faUser = faUser;
     faStar = faStar;
     faUserPlus = faUserPlus;
+    faBookmark = faBookmark;
 
-    subPanel: 'account' | 'notifications' | 'mentions' | 'dm' | 'favorites' = 'account';
+    subPanel: 'account' | 'notifications' | 'mentions' | 'dm' | 'favorites' | 'bookmarks' = 'account';
     hasNotifications = false;
     hasMentions = false;
+    isBookmarksAvailable = false;
 
     userAccount: Account;
 
@@ -38,6 +40,7 @@ export class ManageAccountComponent implements OnInit, OnDestroy {
     @Input('account')
     set account(acc: AccountWrapper) {
         this._account = acc;
+        this.checkIfBookmarksAreAvailable();
         this.checkNotifications();
         this.getUserUrl(acc.info);
     }
@@ -54,13 +57,27 @@ export class ManageAccountComponent implements OnInit, OnDestroy {
         private readonly notificationService: NotificationService,
         private readonly userNotificationService: UserNotificationService) { }
 
-    ngOnInit() {
+    ngOnInit() {        
     }
 
     ngOnDestroy(): void {
         this.userNotificationServiceSub.unsubscribe();
     }
 
+    private checkIfBookmarksAreAvailable() {
+        this.toolsService.getInstanceInfo(this.account.info)
+            .then((instance: InstanceInfo) => {
+                if (instance.major >= 3 && instance.minor >= 1) {
+                    this.isBookmarksAvailable = true;
+                } else {
+                    this.isBookmarksAvailable = false;
+                }
+            })
+            .catch(err => {
+                this.isBookmarksAvailable = false;
+            });
+    }
+
     private getUserUrl(account: AccountInfo) {
         this.mastodonService.retrieveAccountDetails(this.account.info)
             .then((acc: Account) => {

From 2f0cb2b959369fa5925edea226b9f7af8a8b90e9 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 14 Mar 2020 02:12:42 -0400
Subject: [PATCH 09/11] fine tuning icons

---
 .../stream/status/action-bar/action-bar.component.scss        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/components/stream/status/action-bar/action-bar.component.scss b/src/app/components/stream/status/action-bar/action-bar.component.scss
index 1a5ffa57..85eb8cd8 100644
--- a/src/app/components/stream/status/action-bar/action-bar.component.scss
+++ b/src/app/components/stream/status/action-bar/action-bar.component.scss
@@ -36,8 +36,10 @@
             font-size: 17px;
         }
         
-        &--bookmark {            
+        &--bookmark {
+            display: inline-block;  
             position: relative;
+            padding: 0 8px;
             // bottom: -1px;
             font-size: 16px;
         }

From 274857a52287b3012fed0fa14722e0617b7e2cc3 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 14 Mar 2020 02:56:07 -0400
Subject: [PATCH 10/11] added bookmark panel

---
 src/app/app.module.ts                         |   4 +-
 .../bookmarks/bookmarks.component.html        |   3 +
 .../bookmarks/bookmarks.component.scss        |   0
 .../bookmarks/bookmarks.component.spec.ts     |  25 ++++
 .../bookmarks/bookmarks.component.ts          | 125 ++++++++++++++++++
 .../favorites/favorites.component.ts          |   1 -
 .../manage-account.component.html             |   6 +-
 src/app/services/mastodon-wrapper.service.ts  |   9 +-
 src/app/services/mastodon.service.ts          |  26 ++++
 src/app/services/models/api.settings.ts       |   1 +
 10 files changed, 196 insertions(+), 4 deletions(-)
 create mode 100644 src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.html
 create mode 100644 src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.scss
 create mode 100644 src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.spec.ts
 create mode 100644 src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 15967d66..a8ebd174 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -81,6 +81,7 @@ import { StreamNotificationsComponent } from './components/stream/stream-notific
 import { NotificationComponent } from './components/floating-column/manage-account/notifications/notification/notification.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { BookmarksComponent } from './components/floating-column/manage-account/bookmarks/bookmarks.component';
 
 
 const routes: Routes = [
@@ -142,7 +143,8 @@ const routes: Routes = [
         ScheduledStatusesComponent,
         ScheduledStatusComponent,
         StreamNotificationsComponent,
-        NotificationComponent
+        NotificationComponent,
+        BookmarksComponent
     ],
     entryComponents: [
         EmojiPickerComponent
diff --git a/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.html b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.html
new file mode 100644
index 00000000..828f406c
--- /dev/null
+++ b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.html
@@ -0,0 +1,3 @@
+<p>
+  bookmarks works!
+</p>
diff --git a/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.scss b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.spec.ts b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.spec.ts
new file mode 100644
index 00000000..c0d45e98
--- /dev/null
+++ b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookmarksComponent } from './bookmarks.component';
+
+xdescribe('BookmarksComponent', () => {
+  let component: BookmarksComponent;
+  let fixture: ComponentFixture<BookmarksComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookmarksComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookmarksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.ts b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.ts
new file mode 100644
index 00000000..87f6aad1
--- /dev/null
+++ b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.ts
@@ -0,0 +1,125 @@
+import { Component, OnInit, Output, EventEmitter, Input, ViewChild, ElementRef } from '@angular/core';
+
+import { StatusWrapper } from '../../../../models/common.model';
+import { OpenThreadEvent } from '../../../../services/tools.service';
+import { AccountWrapper } from '../../../../models/account.models';
+import { FavoriteResult, BookmarkResult } from '../../../../services/mastodon.service';
+import { MastodonWrapperService } from '../../../../services/mastodon-wrapper.service';
+import { Status } from '../../../../services/models/mastodon.interfaces';
+import { NotificationService } from '../../../../services/notification.service';
+
+@Component({
+    selector: 'app-bookmarks',
+    templateUrl: '../../../stream/stream-statuses/stream-statuses.component.html',
+    styleUrls: ['../../../stream/stream-statuses/stream-statuses.component.scss', './bookmarks.component.scss']
+})
+export class BookmarksComponent implements OnInit {
+    statuses: StatusWrapper[] = [];
+    displayError: string;
+    isLoading = true;
+    isThread = false;
+    hasContentWarnings = false;
+
+    bufferStream: Status[] = []; //html compatibility only
+
+    @Output() browseAccountEvent = new EventEmitter<string>();
+    @Output() browseHashtagEvent = new EventEmitter<string>();
+    @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
+
+    private maxReached = false;
+    private maxId: string;
+    private _account: AccountWrapper;
+
+    @Input('account')
+    set account(acc: AccountWrapper) {
+        this._account = acc;
+        this.getBookmarks();
+    }
+    get account(): AccountWrapper {
+        return this._account;
+    }
+
+    @ViewChild('statusstream') public statustream: ElementRef;
+
+
+    constructor(
+        private readonly notificationService: NotificationService,
+        private readonly mastodonService: MastodonWrapperService) { }
+
+    ngOnInit() {
+    }
+
+    private reset() {
+        this.isLoading = true;
+        this.statuses.length = 0;
+        this.maxReached = false;
+        this.maxId = null;
+    }
+
+    private getBookmarks() {
+        this.reset();
+
+        this.mastodonService.getBookmarks(this.account.info)
+            .then((result: BookmarkResult) => {
+                this.maxId = result.max_id;
+                for (const s of result.bookmarked) {
+                    const wrapper = new StatusWrapper(s, this.account.info);
+                    this.statuses.push(wrapper);
+                }
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err, this.account.info);
+            })
+            .then(() => {
+                this.isLoading = false;
+            });
+    }
+
+    onScroll() {
+        var element = this.statustream.nativeElement as HTMLElement;
+        const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000;
+
+        if (atBottom) {
+            this.scrolledToBottom();
+        }
+    }
+
+
+    private scrolledToBottom() {
+        if (this.isLoading || this.maxReached) return;
+
+        this.isLoading = true;
+        this.mastodonService.getBookmarks(this.account.info, this.maxId)
+            .then((result: BookmarkResult) => {
+                const statuses = result.bookmarked;
+                if (statuses.length === 0 || !this.maxId) {
+                    this.maxReached = true;
+                    return;
+                }
+
+                this.maxId = result.max_id;
+                for (const s of statuses) {
+                    const wrapper = new StatusWrapper(s, this.account.info);
+                    this.statuses.push(wrapper);
+                }
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err, this.account.info);
+            })
+            .then(() => {
+                this.isLoading = false;
+            });
+    }
+
+    browseAccount(accountName: string): void {
+        this.browseAccountEvent.next(accountName);
+    }
+
+    browseHashtag(hashtag: string): void {
+        this.browseHashtagEvent.next(hashtag);
+    }
+
+    browseThread(openThreadEvent: OpenThreadEvent): void {
+        this.browseThreadEvent.next(openThreadEvent);
+    }
+}
diff --git a/src/app/components/floating-column/manage-account/favorites/favorites.component.ts b/src/app/components/floating-column/manage-account/favorites/favorites.component.ts
index 66d31547..a40efc13 100644
--- a/src/app/components/floating-column/manage-account/favorites/favorites.component.ts
+++ b/src/app/components/floating-column/manage-account/favorites/favorites.component.ts
@@ -7,7 +7,6 @@ import { FavoriteResult } from '../../../../services/mastodon.service';
 import { MastodonWrapperService } from '../../../../services/mastodon-wrapper.service';
 import { Status } from '../../../../services/models/mastodon.interfaces';
 import { NotificationService } from '../../../../services/notification.service';
-import { resetCompiledComponents } from '@angular/core/src/render3/jit/module';
 
 @Component({
     selector: 'app-favorites',
diff --git a/src/app/components/floating-column/manage-account/manage-account.component.html b/src/app/components/floating-column/manage-account/manage-account.component.html
index ddbc59ab..4ad23889 100644
--- a/src/app/components/floating-column/manage-account/manage-account.component.html
+++ b/src/app/components/floating-column/manage-account/manage-account.component.html
@@ -7,7 +7,8 @@
         </a>
 
         <!-- <a href class="account__header--button"><fa-icon [icon]="faUserPlus"></fa-icon></a> -->
-        <a *ngIf="isBookmarksAvailable" href class="account__header--button" title="bookmark" (click)="loadSubPanel('bookmarks')"
+        <a *ngIf="isBookmarksAvailable" href class="account__header--button" title="bookmark"
+            (click)="loadSubPanel('bookmarks')"
             [ngClass]="{ 'account__header--button--selected': subPanel === 'bookmarks' }">
             <fa-icon [icon]="faBookmark"></fa-icon>
         </a>
@@ -34,6 +35,9 @@
         </a>
     </div>
 
+    <app-bookmarks class="account__body" *ngIf="subPanel === 'bookmarks'" [account]="account"
+        (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
+        (browseThreadEvent)="browseThread($event)"></app-bookmarks>
     <app-direct-messages class="account__body" *ngIf="subPanel === 'dm'" [account]="account"
         (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
         (browseThreadEvent)="browseThread($event)"></app-direct-messages>
diff --git a/src/app/services/mastodon-wrapper.service.ts b/src/app/services/mastodon-wrapper.service.ts
index 0d592055..a4767175 100644
--- a/src/app/services/mastodon-wrapper.service.ts
+++ b/src/app/services/mastodon-wrapper.service.ts
@@ -4,7 +4,7 @@ import { Store } from '@ngxs/store';
 import { Account, Status, Results, Context, Relationship, Instance, Attachment, Notification, List, Poll, Emoji, Conversation, ScheduledStatus, TokenData } from "./models/mastodon.interfaces";
 import { AccountInfo, UpdateAccount } from '../states/accounts.state';
 import { StreamTypeEnum, StreamElement } from '../states/streams.state';
-import { FavoriteResult, VisibilityEnum, PollParameters, MastodonService } from './mastodon.service';
+import { FavoriteResult, VisibilityEnum, PollParameters, MastodonService, BookmarkResult } from './mastodon.service';
 import { AuthService } from './auth.service';
 import { AppInfo, RegisteredAppsStateModel } from '../states/registered-apps.state';
 
@@ -148,6 +148,13 @@ export class MastodonWrapperService {
             });
     }
 
+    getBookmarks(account: AccountInfo, maxId: string = null): Promise<BookmarkResult> {
+        return this.refreshAccountIfNeeded(account)
+            .then((refreshedAccount: AccountInfo) => {
+                return this.mastodonService.getBookmarks(refreshedAccount, maxId);
+            });
+    }
+
     searchAccount(account: AccountInfo, query: string, limit: number = 40, following: boolean = false, resolve = true): Promise<Account[]> {
         return this.refreshAccountIfNeeded(account)
             .then((refreshedAccount: AccountInfo) => {
diff --git a/src/app/services/mastodon.service.ts b/src/app/services/mastodon.service.ts
index bbddeeb1..4c611b2e 100644
--- a/src/app/services/mastodon.service.ts
+++ b/src/app/services/mastodon.service.ts
@@ -188,6 +188,26 @@ export class MastodonService {
             });
     }
 
+    getBookmarks(account: AccountInfo, maxId: string = null): Promise<BookmarkResult> {
+        let route = `https://${account.instance}${this.apiRoutes.getBookmarks}`;
+
+        if (maxId) route += `?max_id=${maxId}`;
+
+        const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
+        return this.httpClient.get(route, { headers: headers, observe: "response" }).toPromise()
+            .then((res: HttpResponse<Status[]>) => {                
+                const link = res.headers.get('Link');
+                let lastId = null;
+                if(link){
+                    const maxId = link.split('max_id=')[1];
+                    if(maxId){
+                        lastId = maxId.split('>;')[0];
+                    }
+                }
+                return new BookmarkResult(lastId, res.body);
+            });
+    }
+
     searchAccount(account: AccountInfo, query: string, limit: number = 40, following: boolean = false, resolve = true): Promise<Account[]> {
         const route = `https://${account.instance}${this.apiRoutes.searchForAccounts}?q=${query}&limit=${limit}&following=${following}&resolve=${resolve}`;
         const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
@@ -463,4 +483,10 @@ export class FavoriteResult {
     constructor(
         public max_id: string,
         public favorites: Status[]) {}   
+}
+
+export class BookmarkResult {
+    constructor(
+        public max_id: string,
+        public bookmarked: Status[]) {}   
 }
\ No newline at end of file
diff --git a/src/app/services/models/api.settings.ts b/src/app/services/models/api.settings.ts
index 1b001c8f..c2e9dfc0 100644
--- a/src/app/services/models/api.settings.ts
+++ b/src/app/services/models/api.settings.ts
@@ -72,4 +72,5 @@ export class ApiRoutes {
     deleteScheduleStatus = '/api/v1/scheduled_statuses/{0}';
     bookmarkingStatus = '/api/v1/statuses/{0}/bookmark';
     unbookmarkingStatus = '/api/v1/statuses/{0}/unbookmark';
+    getBookmarks = '/api/v1/bookmarks';
 }

From 917564c067ae36b30fdc6f390c29f27e5a74198d Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 14 Mar 2020 03:26:37 -0400
Subject: [PATCH 11/11] fix #228

---
 .../floating-column/floating-column.component.html       | 9 ++++++---
 .../floating-column/search/search.component.html         | 6 ++++--
 .../floating-column/search/search.component.ts           | 9 +++++----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/components/floating-column/floating-column.component.html b/src/app/components/floating-column/floating-column.component.html
index d2672e09..330e49fd 100644
--- a/src/app/components/floating-column/floating-column.component.html
+++ b/src/app/components/floating-column/floating-column.component.html
@@ -15,13 +15,16 @@
                 </div>
 
                 <app-manage-account *ngIf="openPanel === 'manageAccount'" [account]="userAccountUsed"
-                    (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
+                    (browseAccountEvent)="browseAccount($event)" 
+                    (browseHashtagEvent)="browseHashtag($event)"
                     (browseThreadEvent)="browseThread($event)"></app-manage-account>
                 <app-add-new-status *ngIf="openPanel === 'createNewStatus'" [isDirectMention]="isDirectMention"
                     [userHandle]="userHandle" [redraftedStatus]="redraftedStatus"></app-add-new-status>
                 <app-add-new-account *ngIf="openPanel === 'addNewAccount'"></app-add-new-account>
-                <app-search *ngIf="openPanel === 'search'" (browseAccountEvent)="browseAccount($event)"
-                    (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
+                <app-search *ngIf="openPanel === 'search'" 
+                    (browseAccountEvent)="browseAccount($event)"
+                    (browseHashtagEvent)="browseHashtag($event)" 
+                    (browseThreadEvent)="browseThread($event)">
                 </app-search>
                 <app-settings *ngIf="openPanel === 'settings'"></app-settings>
                 <app-scheduled-statuses *ngIf="openPanel === 'scheduledStatuses'"></app-scheduled-statuses>
diff --git a/src/app/components/floating-column/search/search.component.html b/src/app/components/floating-column/search/search.component.html
index f00a4d4f..9ee3d86f 100644
--- a/src/app/components/floating-column/search/search.component.html
+++ b/src/app/components/floating-column/search/search.component.html
@@ -35,8 +35,10 @@
             <h3 class="search-results__title">Statuses</h3>
 
             <div class="search-results__status" *ngFor="let statusWrapper of statuses">
-                <app-status [statusWrapper]="statusWrapper" (browseAccountEvent)="browseAccount($event)"
-                    (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
+                <app-status [statusWrapper]="statusWrapper" 
+                    (browseAccountEvent)="browseAccount($event)"
+                    (browseHashtagEvent)="browseHashtag($event)" 
+                    (browseThreadEvent)="browseThread($event)">
                 </app-status>
             </div>
         </div>
diff --git a/src/app/components/floating-column/search/search.component.ts b/src/app/components/floating-column/search/search.component.ts
index 8a4ef587..ab3ade42 100644
--- a/src/app/components/floating-column/search/search.component.ts
+++ b/src/app/components/floating-column/search/search.component.ts
@@ -54,15 +54,16 @@ export class SearchComponent implements OnInit {
         return false;
     }
 
-    browseAccount(account: Account): boolean {
-        let accountName = this.toolsService.getAccountFullHandle(account);
-        this.browseAccountEvent.next(accountName);
+    browseAccount(account: string): boolean {
+        if (account) {
+            this.browseAccountEvent.next(account);
+        }
         return false;
     }
 
     private lastAccountUsed: AccountInfo;
     private search(data: string) {
-        if(!data) return;
+        if (!data) return;
 
         this.accounts.length = 0;
         this.statuses.length = 0;