added bookmark panel

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

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

@@ -0,0 +1,3 @@
+<p>
+  bookmarks works!
+</p>

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();
+  });
+});

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);
+    }
+}

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',

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>

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) => {

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[]) {}   
 }

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';
 }