From 3c45a3de0b453e4d4be5fbb16632ca4c272c184c Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Fri, 14 Jun 2019 23:48:07 -0400
Subject: [PATCH 01/29] better resilience of account selection

---
 src/app/states/accounts.state.ts | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/app/states/accounts.state.ts b/src/app/states/accounts.state.ts
index ae0be188..038caed9 100644
--- a/src/app/states/accounts.state.ts
+++ b/src/app/states/accounts.state.ts
@@ -44,22 +44,16 @@ export class AccountsState {
     @Action(SelectAccount)
     SelectAccount(ctx: StateContext<AccountsStateModel>, action: SelectAccount){
         const state = ctx.getState();
-        // const multiSelection = action.multiselection;
+
         const selectedAccount = action.account;
-
-
-        // const copyAccounts = [...state.accounts];
-        // copyAccounts
-        //         .filter(x => x.id !== selectedAccount.id)
-        //         .forEach(x => x.isSelected = false);
-
         const oldSelectedAccount = state.accounts.find(x => x.isSelected);
 
-        if(selectedAccount.id === oldSelectedAccount.id) return;
+        if(oldSelectedAccount != null && selectedAccount.id === oldSelectedAccount.id) return;
 
         const acc = state.accounts.find(x => x.id === selectedAccount.id);
         acc.isSelected = true;
-        oldSelectedAccount.isSelected = false;
+
+        if(oldSelectedAccount != null) oldSelectedAccount.isSelected = false;
 
         ctx.patchState({
             accounts: [...state.accounts]

From 8f540c48f82b61428f66fa834e5ba9b86d6cb944 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 14:03:29 -0400
Subject: [PATCH 02/29] added avatar link in my profile

---
 .../manage-account.component.html             | 36 ++++++++-----------
 .../manage-account.component.ts               | 19 ++++++++++
 src/app/models/account.models.ts              |  4 ---
 3 files changed, 33 insertions(+), 26 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 37314bfb..2e52ec73 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
@@ -2,7 +2,9 @@
     <h3 class="panel__title">Manage Account</h3>
 
     <div class="account__header">
-        <img class="account__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
+        <a href="{{userAccount.url}}" target="_blank" >
+            <img class="account__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
+        </a>
 
         <!-- <a href class="account__header--button"><fa-icon [icon]="faUserPlus"></fa-icon></a> -->
         <a href class="account__header--button" title="favorites" (click)="loadSubPanel('favorites')"
@@ -17,8 +19,7 @@
             [ngClass]="{ 'account__header--button--selected': subPanel === 'mentions', 'account__header--button--notification': hasMentions }">
             <fa-icon [icon]="faAt"></fa-icon>
         </a>
-        <a href class="account__header--button" title="notifications" (click)="loadSubPanel('notifications')"
-            [ngClass]="{ 'account__header--button--selected': subPanel === 'notifications', 
+        <a href class="account__header--button" title="notifications" (click)="loadSubPanel('notifications')" [ngClass]="{ 'account__header--button--selected': subPanel === 'notifications', 
             'account__header--button--notification': hasNotifications }">
             <fa-icon [icon]="faBell"></fa-icon>
         </a>
@@ -27,27 +28,18 @@
             <fa-icon [icon]="faUser"></fa-icon>
         </a>
     </div>
-    
-    <app-direct-messages class="account__body" *ngIf="subPanel === 'dm'" 
-        [account]="account"
-        (browseAccountEvent)="browseAccount($event)" 
-        (browseHashtagEvent)="browseHashtag($event)"
+
+    <app-direct-messages class="account__body" *ngIf="subPanel === 'dm'" [account]="account"
+        (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
         (browseThreadEvent)="browseThread($event)"></app-direct-messages>
-    <app-favorites class="account__body" *ngIf="subPanel === 'favorites'" 
-        [account]="account"
-        (browseAccountEvent)="browseAccount($event)" 
-        (browseHashtagEvent)="browseHashtag($event)"
+    <app-favorites class="account__body" *ngIf="subPanel === 'favorites'" [account]="account"
+        (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
         (browseThreadEvent)="browseThread($event)"></app-favorites>
-    <app-mentions class="account__body" *ngIf="subPanel === 'mentions'" 
-        [account]="account"
-        (browseAccountEvent)="browseAccount($event)" 
-        (browseHashtagEvent)="browseHashtag($event)"
+    <app-mentions class="account__body" *ngIf="subPanel === 'mentions'" [account]="account"
+        (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
         (browseThreadEvent)="browseThread($event)"></app-mentions>
-    <app-my-account class="account__body" *ngIf="subPanel === 'account'" 
-        [account]="account"></app-my-account>
-    <app-notifications class="account__body" *ngIf="subPanel === 'notifications'" 
-        [account]="account"
-        (browseAccountEvent)="browseAccount($event)" 
-        (browseHashtagEvent)="browseHashtag($event)"
+    <app-my-account class="account__body" *ngIf="subPanel === 'account'" [account]="account"></app-my-account>
+    <app-notifications class="account__body" *ngIf="subPanel === 'notifications'" [account]="account"
+        (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
         (browseThreadEvent)="browseThread($event)"></app-notifications>
 </div>
\ No newline at end of file
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 9bd9ff5b..e8f6cab2 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
@@ -6,6 +6,10 @@ import { Subscription } from 'rxjs';
 import { AccountWrapper } from '../../../models/account.models';
 import { UserNotificationService, UserNotification } from '../../../services/user-notification.service';
 import { OpenThreadEvent } from '../../../services/tools.service';
+import { MastodonService } from '../../../services/mastodon.service';
+import { Account } from "../../../services/models/mastodon.interfaces";
+import { NotificationService } from '../../../services/notification.service';
+import { AccountInfo } from '../../../states/accounts.state';
 
 
 @Component({
@@ -25,6 +29,8 @@ export class ManageAccountComponent implements OnInit, OnDestroy {
     hasNotifications = false;
     hasMentions = false;
 
+    userAccount: Account;
+
     @Output() browseAccountEvent = new EventEmitter<string>();
     @Output() browseHashtagEvent = new EventEmitter<string>();
     @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
@@ -33,6 +39,7 @@ export class ManageAccountComponent implements OnInit, OnDestroy {
     set account(acc: AccountWrapper) {
         this._account = acc;
         this.checkNotifications();
+        this.getUserUrl(acc.info);
     }
     get account(): AccountWrapper {
         return this._account;
@@ -42,6 +49,8 @@ export class ManageAccountComponent implements OnInit, OnDestroy {
     private _account: AccountWrapper;
 
     constructor(
+        private readonly mastodonService: MastodonService,
+        private readonly notificationService: NotificationService,
         private readonly userNotificationService: UserNotificationService) { }
 
     ngOnInit() {
@@ -52,6 +61,16 @@ export class ManageAccountComponent implements OnInit, OnDestroy {
         this.userNotificationServiceSub.unsubscribe();
     }
 
+    private getUserUrl(account: AccountInfo){
+        this.mastodonService.retrieveAccountDetails(this.account.info)
+            .then((acc: Account) => {
+                this.userAccount = acc;
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err);
+            });
+    }
+
     private checkNotifications(){
         if(this.userNotificationServiceSub){
             this.userNotificationServiceSub.unsubscribe();
diff --git a/src/app/models/account.models.ts b/src/app/models/account.models.ts
index c18f51bf..359e3d27 100644
--- a/src/app/models/account.models.ts
+++ b/src/app/models/account.models.ts
@@ -5,10 +5,6 @@ export class AccountWrapper {
   constructor() {
   }
 
-//   id: number;
-//   username: string;
-//   display_name: string;
-
   info: AccountInfo;
   avatar: string;
 }

From 1d4c8b5dad15df93e1b47a21bc9767829516aaa8 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 14:19:19 -0400
Subject: [PATCH 03/29] don't let date of toots goes beyong 60min fix #119

---
 src/app/pipes/time-ago.pipe.ts  | 6 +++---
 src/app/pipes/time-left.pipe.ts | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/pipes/time-ago.pipe.ts b/src/app/pipes/time-ago.pipe.ts
index bb7f0a9d..256f1099 100644
--- a/src/app/pipes/time-ago.pipe.ts
+++ b/src/app/pipes/time-ago.pipe.ts
@@ -32,11 +32,11 @@ export class TimeAgoPipe implements PipeTransform {
         // const months = days / 30.416;
         // const years = days / 365;
 
-        if (seconds <= 60) {
+        if (seconds <= 59) {
             text = Math.round(seconds) + 's';
-        } else if (minutes <= 90) {
+        } else if (minutes <= 59) {
             text = Math.round(minutes) + 'm';
-        } else if (hours <= 24) {
+        } else if (hours <= 23) {
             text = Math.round(hours) + 'h';
         } else {
             text = Math.round(days) + 'd';
diff --git a/src/app/pipes/time-left.pipe.ts b/src/app/pipes/time-left.pipe.ts
index eb3ba1a3..4676510e 100644
--- a/src/app/pipes/time-left.pipe.ts
+++ b/src/app/pipes/time-left.pipe.ts
@@ -31,11 +31,11 @@ export class TimeLeftPipe implements PipeTransform {
 
         if (seconds < 0) {
             text = '0 seconds left';
-        } else if (seconds <= 60) {
+        } else if (seconds <= 59) {
             text = Math.round(seconds) + ' seconds left';
-        } else if (minutes <= 90) {
+        } else if (minutes <= 59) {
             text = Math.round(minutes) + ' minutes left';
-        } else if (hours <= 24) {
+        } else if (hours <= 23) {
             text = Math.round(hours) + ' hours left';
         } else {
             text = Math.round(days) + ' days left';

From 6e2bb144fca53b8abd53d730ddaacb4d8a49132f Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 14:32:08 -0400
Subject: [PATCH 04/29] open avatar in lightbox

---
 .../user-profile/user-profile.component.html  | 15 +++++---
 .../user-profile/user-profile.component.ts    | 34 +++++++++++++++----
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/app/components/stream/user-profile/user-profile.component.html b/src/app/components/stream/user-profile/user-profile.component.html
index e425ab9d..512a42af 100644
--- a/src/app/components/stream/user-profile/user-profile.component.html
+++ b/src/app/components/stream/user-profile/user-profile.component.html
@@ -2,11 +2,15 @@
     <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
 
 
-    <div *ngIf="displayedAccount" class="profile-header" [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
+    <div *ngIf="displayedAccount" class="profile-header"
+        [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
         <div class="profile-header__inner">
-            <img class="profile-header__avatar" src="{{displayedAccount.avatar}}" alt="header" />
+            <a href (click)="showAvatar(displayedAccount.avatar)" title="open avatar">
+                <img class="profile-header__avatar" src="{{displayedAccount.avatar}}" alt="header" />
+            </a>
             <h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}"></h2>
-            <h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}" target="_blank">@{{displayedAccount.acct}}</a></h2>
+            <h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}"
+                    target="_blank">@{{displayedAccount.acct}}</a></h2>
 
             <div class="profile-header__follow" *ngIf="relationship">
                 <button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
@@ -38,7 +42,8 @@
         </div>
         <div class="profile-fields" *ngIf="displayedAccount && displayedAccount.fields.length > 0">
             <div class="profile-fields__field" *ngFor="let field of displayedAccount.fields">
-                <div class="profile-fields__field--value" innerHTML="{{ displayedAccount | accountEmoji:field.value}}" [ngClass]="{'profile-fields__field--validated': field.verified_at }">
+                <div class="profile-fields__field--value" innerHTML="{{ displayedAccount | accountEmoji:field.value}}"
+                    [ngClass]="{'profile-fields__field--validated': field.verified_at }">
                 </div>
                 <div class="profile-fields__field--name">
                     {{ field.name }}
@@ -57,7 +62,7 @@
                 </app-status>
             </div>
 
-            
+
             <app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
         </div>
     </div>
diff --git a/src/app/components/stream/user-profile/user-profile.component.ts b/src/app/components/stream/user-profile/user-profile.component.ts
index aafe9275..4005b8f9 100644
--- a/src/app/components/stream/user-profile/user-profile.component.ts
+++ b/src/app/components/stream/user-profile/user-profile.component.ts
@@ -5,13 +5,14 @@ import { faUser as faUserRegular } from "@fortawesome/free-regular-svg-icons";
 import { Observable, Subscription } from 'rxjs';
 import { Store } from '@ngxs/store';
 
-import { Account, Status, Relationship } from "../../../services/models/mastodon.interfaces";
+import { Account, Status, Relationship, Attachment } from "../../../services/models/mastodon.interfaces";
 import { MastodonService } from '../../../services/mastodon.service';
 import { ToolsService, OpenThreadEvent } from '../../../services/tools.service';
 import { NotificationService } from '../../../services/notification.service';
 import { AccountInfo } from '../../../states/accounts.state';
 import { StatusWrapper } from '../../../models/common.model';
 import { EmojiConverter, EmojiTypeEnum } from '../../../tools/emoji.tools';
+import { NavigationService } from '../../../services/navigation.service';
 
 @Component({
     selector: 'app-user-profile',
@@ -32,7 +33,7 @@ export class UserProfileComponent implements OnInit {
     note: string;
 
     isLoading: boolean;
-    
+
     private maxReached = false;
     private maxId: string;
     statusLoading: boolean;
@@ -60,6 +61,7 @@ export class UserProfileComponent implements OnInit {
 
     constructor(
         private readonly store: Store,
+        private readonly navigationService: NavigationService,
         private readonly notificationService: NotificationService,
         private readonly mastodonService: MastodonService,
         private readonly toolsService: ToolsService) {
@@ -103,7 +105,7 @@ export class UserProfileComponent implements OnInit {
 
                 this.displayedAccount = account;
                 this.hasNote = account && account.note && account.note !== '<p></p>';
-                if(this.hasNote){
+                if (this.hasNote) {
                     this.note = this.emojiConverter.applyEmojis(account.emojis, account.note, EmojiTypeEnum.medium);
                 }
 
@@ -155,6 +157,26 @@ export class UserProfileComponent implements OnInit {
             });
     }
 
+    showAvatar(avatarUrl: string): boolean {
+        const att: Attachment = {
+            id: '',
+            type: 'image',
+            remote_url: avatarUrl,
+            preview_url: avatarUrl,
+            url: avatarUrl,
+            meta: null,
+            text_url: '',
+            description: ''
+        }
+        this.navigationService.openMedia({
+            selectedIndex: 0,
+            attachments: [att],
+            iframe: null
+        });
+
+        return false;
+    }
+
     refresh(): any {
         this.load(this.lastAccountName);
     }
@@ -187,7 +209,7 @@ export class UserProfileComponent implements OnInit {
     }
 
     unfollow(): boolean {
-        const userAccount =  this.toolsService.getSelectedAccounts()[0];
+        const userAccount = this.toolsService.getSelectedAccounts()[0];
         this.toolsService.findAccount(userAccount, this.lastAccountName)
             .then((account: Account) => {
                 return this.mastodonService.unfollow(userAccount, account);
@@ -209,7 +231,7 @@ export class UserProfileComponent implements OnInit {
             this.scrolledToBottom();
         }
     }
-   
+
     private scrolledToBottom() {
         if (this.statusLoading || this.maxReached) return;
 
@@ -227,7 +249,7 @@ export class UserProfileComponent implements OnInit {
             });
     }
 
-    private loadStatus(userAccount: AccountInfo, statuses: Status[]){
+    private loadStatus(userAccount: AccountInfo, statuses: Status[]) {
         if (statuses.length === 0) {
             this.maxReached = true;
             return;

From fdd9d751e7b196a2ab588e664c1c01aa1dcbeae4 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 14:58:24 -0400
Subject: [PATCH 05/29] fix poll display

---
 .../stream/status/poll/poll.component.html        |  5 +++--
 .../stream/status/poll/poll.component.scss        | 15 ++++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/components/stream/status/poll/poll.component.html b/src/app/components/stream/status/poll/poll.component.html
index 33a3192b..e310447a 100644
--- a/src/app/components/stream/status/poll/poll.component.html
+++ b/src/app/components/stream/status/poll/poll.component.html
@@ -1,7 +1,8 @@
 <div class="poll">
     <div *ngIf="!poll.voted && !poll.expired">
         <div *ngFor="let o of options">
-            <label class="poll__container">{{o.title}}
+            <label class="poll__container">
+                <span class="poll__container__title">{{o.title}}</span>
                 <input class="poll__container__input" type="{{choiceType}}" name="{{pollName}}" value="{{o.title}}"
                     (change)="onSelectionChange(o)">
                 <span class="poll__container__checkmark" *ngIf="!pollLocked"
@@ -15,7 +16,7 @@
             <div class="poll__result" title="{{ o.votes_count }} votes">
                 <div class="poll__result--progress-bar" [style.width]="o.percentage + '%'" [ngClass]="{ 'poll__result--progress-bar--most-votes': o.isMax }"></div>
                 <div class="poll__result--data"> <span class="poll__result--percentage">{{ o.percentage }}%</span>
-                    {{o.title}}</div>
+                <span class="poll__container__title">{{o.title}}</span></div>
 
             </div>
         </div>
diff --git a/src/app/components/stream/status/poll/poll.component.scss b/src/app/components/stream/status/poll/poll.component.scss
index cc3a19eb..93947f57 100644
--- a/src/app/components/stream/status/poll/poll.component.scss
+++ b/src/app/components/stream/status/poll/poll.component.scss
@@ -4,7 +4,7 @@
 @import "buttons";
 
 .poll {
-   
+
     color: white;
     color: rgb(228, 228, 228);
 
@@ -44,6 +44,11 @@
         -ms-user-select: none;
         user-select: none;
 
+        &__title {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
         &:hover &__input~&__checkmark {
             background-color: #ccc;
         }
@@ -125,7 +130,7 @@
 
     &__result {
         transition: width 2s;
-        
+
         margin: 0 0 5px 5px;
         padding: 0 5px 0 5px;
         position: relative;
@@ -141,15 +146,15 @@
             color: white;
             display: inline;
             margin-right: 10px;
-            
+
         }
 
         &--progress-bar {
             position: absolute;
             background-color: rgb(47, 68, 100);
             // background-color: rgb(43, 62, 92);
-            top:0;
-            left:0;
+            top: 0;
+            left: 0;
             width: calc(100%);
             height: 22px;
             z-index: 1;

From 0e1ca8cf71c44246355a3febaebd2240b67fdc00 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 16:51:41 -0400
Subject: [PATCH 06/29] auto-load all media in lightbox

---
 .../media-viewer/media-viewer.component.html  | 28 ++++++---
 .../media-viewer/media-viewer.component.scss  | 15 ++++-
 .../media-viewer/media-viewer.component.ts    | 62 ++++++++++++-------
 3 files changed, 69 insertions(+), 36 deletions(-)

diff --git a/src/app/components/media-viewer/media-viewer.component.html b/src/app/components/media-viewer/media-viewer.component.html
index 0594979f..9092d7c1 100644
--- a/src/app/components/media-viewer/media-viewer.component.html
+++ b/src/app/components/media-viewer/media-viewer.component.html
@@ -3,21 +3,29 @@
         <fa-icon [icon]="faTimes"></fa-icon>
     </button>
 
-    <button class="media-viewer-canvas__previous media-viewer-canvas__button" title="previous" (click)="previous($event)" *ngIf="previousAvailable">
+    <button class="media-viewer-canvas__previous media-viewer-canvas__button" title="previous"
+        (click)="previous($event)" *ngIf="previousAvailable">
         <fa-icon [icon]="faAngleLeft"></fa-icon>
     </button>
 
-    <button class="media-viewer-canvas__next media-viewer-canvas__button" title="next" (click)="next($event)"  *ngIf="nextAvailable">
+    <button class="media-viewer-canvas__next media-viewer-canvas__button" title="next" (click)="next($event)"
+        *ngIf="nextAvailable">
         <fa-icon [icon]="faAngleRight"></fa-icon>
     </button>
-    
-    <img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}" (click)="blockClick($event)"/>
-    <video class="media-viewer-canvas__image" *ngIf="gifvUrl" role="application" loop autoplay (click)="blockClick($event)">
-        <source src="{{ gifvUrl }}" type="video/mp4">
-    </video>
-    <video class="media-viewer-canvas__image" *ngIf="videoUrl" role="application" loop controls="controls" (click)="blockClick($event)">
-        <source src="{{ videoUrl }}" type="video/mp4">
-    </video>
+
+    <div *ngFor="let att of attachments" class="media-viewer-canvas__attachement" [ngClass]="{ 'collapsed': currentIndex !== att.index }">
+        <img *ngIf="att.type === 'image'" 
+            src="{{att.url}}" class="media-viewer-canvas__image" (click)="blockClick($event)" />
+
+        <video *ngIf="att.type === 'gifv'" 
+            class="media-viewer-canvas__image"  role="application" loop autoplay (click)="blockClick($event)">
+            <source src="{{att.url}}" type="video/mp4">
+        </video>
+        <video *ngIf="att.type === 'video'" 
+            class="media-viewer-canvas__image" role="application" loop autoplay controls="controls" (click)="blockClick($event)">
+            <source src="{{att.url}}" type="video/mp4">
+        </video>
+    </div>
 
     <div #video *ngIf="html" class="media-viewer-canvas__image media-viewer-canvas__iframe" [innerHTML]="html">
     </div>
diff --git a/src/app/components/media-viewer/media-viewer.component.scss b/src/app/components/media-viewer/media-viewer.component.scss
index c5acd9e9..80024d9b 100644
--- a/src/app/components/media-viewer/media-viewer.component.scss
+++ b/src/app/components/media-viewer/media-viewer.component.scss
@@ -7,7 +7,7 @@
     background-color: rgba(0, 0, 0, 0.8);
     overflow: hidden;
     position: relative;
-
+    
     &__button {
         @include clearButton;
         padding: 5px;
@@ -60,6 +60,11 @@
         padding: 10px;
     }
 
+    &__attachement {
+        max-width: 100%;
+        height: 100vh;    
+    }
+
     &__image {
         @media screen and (min-width: $screen-break) {
             max-width: 85%;
@@ -72,6 +77,8 @@
         margin-top: 50vh;
         margin-left: 50vw;
         transform: translate(-50%, -50%);
+
+        visibility: visible;
     }
 
     &__iframe {
@@ -80,4 +87,8 @@
         max-height: 600px;
         max-width: 950px;
     }
-}
\ No newline at end of file
+}
+
+.collapsed {
+    height: 0;
+}
diff --git a/src/app/components/media-viewer/media-viewer.component.ts b/src/app/components/media-viewer/media-viewer.component.ts
index 05fe69d5..1b55ae1f 100644
--- a/src/app/components/media-viewer/media-viewer.component.ts
+++ b/src/app/components/media-viewer/media-viewer.component.ts
@@ -18,26 +18,30 @@ export class MediaViewerComponent implements OnInit {
     faAngleLeft = faAngleLeft;
     faAngleRight = faAngleRight;
 
-    imageUrl: string;
-    gifvUrl: string;
-    videoUrl: string;
+    attachments: AttachmentsWrapper[] = [];
     html: SafeHtml;
 
     previousAvailable: boolean;
     nextAvailable: boolean;
-    private currentIndex: number;
+    currentIndex: number;
 
     @Input('openedMediaEvent')
     set openedMediaEvent(value: OpenMediaEvent) {
         this._mediaEvent = value;
 
+        this.attachments.length = 0;
+
         if (value.iframe) {
             this.html = value.iframe;
             this.autoplayIframe();
         } else {
-            const attachment = value.attachments[value.selectedIndex];
+
+            for(let i = 0; i < value.attachments.length; i++){
+                let att = value.attachments[i];
+                this.attachments.push(new AttachmentsWrapper(att, i));
+            }
+
             this.currentIndex = value.selectedIndex;
-            this.loadAttachment(attachment);
             this.setBrowsing();
         }
     }
@@ -52,7 +56,7 @@ export class MediaViewerComponent implements OnInit {
     handleKeyboardEvent(event: KeyboardEvent) {
         event.stopPropagation();
         event.preventDefault();
-        
+
         if (event.key === 'ArrowRight') {
             this.next(event);
         } else if (event.key === 'ArrowLeft') {
@@ -65,24 +69,10 @@ export class MediaViewerComponent implements OnInit {
     ngOnInit() {
     }
 
-    private loadAttachment(attachment: Attachment) {
-        if (attachment.type === 'image') {
-            this.imageUrl = attachment.url;
-        } else if (attachment.type === 'gifv') {
-            this.gifvUrl = attachment.url;
-        } else if (attachment.type === 'video') {
-            this.videoUrl = attachment.url;
-        }
-    }
-
     private setBrowsing() {
         var index = this.currentIndex;
-        var attachments = this.openedMediaEvent.attachments;
 
-        console.log(`index ${index}`);
-        console.log(`attachments.length ${attachments.length}`);
-
-        if (index < attachments.length - 1) {
+        if (index < this.attachments.length - 1) {
             this.nextAvailable = true;
         } else {
             this.nextAvailable = false;
@@ -120,7 +110,6 @@ export class MediaViewerComponent implements OnInit {
         if (this.currentIndex <= 0) return false;
 
         this.currentIndex--;
-        this.imageUrl = this.openedMediaEvent.attachments[this.currentIndex].url;
         this.setBrowsing();
 
         return false;
@@ -131,9 +120,34 @@ export class MediaViewerComponent implements OnInit {
         if (this.currentIndex >= this.openedMediaEvent.attachments.length - 1) return false;
 
         this.currentIndex++;
-        this.imageUrl = this.openedMediaEvent.attachments[this.currentIndex].url;
         this.setBrowsing();
 
         return false;
     }
 }
+
+class AttachmentsWrapper implements Attachment {
+    constructor(attachment: Attachment, index: number) {
+        this.id = attachment.id;
+        this.type = attachment.type;
+        this.url = attachment.url;
+        this.remote_url = attachment.remote_url;
+        this.preview_url = attachment.preview_url;
+        this.text_url = attachment.text_url;
+        this.meta = attachment.meta;
+        this.description = attachment.description;
+
+        this.index = index;
+    }
+
+    id: string;
+    type: "image" | "video" | "gifv";
+    url: string;
+    remote_url: string;
+    preview_url: string;
+    text_url: string;
+    meta: any;
+    description: string;  
+    
+    index: number;
+}

From 9feddaf819a9d1badd5c1e680939b23728c73043 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 18:35:54 -0400
Subject: [PATCH 07/29] fix content-warning text overlap in certain cases

---
 src/app/components/stream/status/status.component.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index 14c2f362..8468d751 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/src/app/components/stream/status/status.component.scss
@@ -123,9 +123,9 @@
     }
     &__content-warning {
         min-height: 80px;
-        display: block; // border: 1px solid greenyellow;
+        display: block;
         margin: 0 10px 0 $avatar-column-space;
-        padding: 3px 5px 3px 5px;
+        padding: 3px 5px 12px 5px;
         
         text-decoration: none;
         text-align: center;

From 2e0f7cb5a5c8e99060a770445cdaaa5776d5c040 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 19:26:21 -0400
Subject: [PATCH 08/29] add open image link

---
 .../media-viewer/media-viewer.component.html  | 21 +++++++++++--------
 .../media-viewer/media-viewer.component.scss  | 21 +++++++++++++++----
 src/sass/_commons.scss                        | 19 ++++++++++++++++-
 3 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/app/components/media-viewer/media-viewer.component.html b/src/app/components/media-viewer/media-viewer.component.html
index 9092d7c1..fbe6df09 100644
--- a/src/app/components/media-viewer/media-viewer.component.html
+++ b/src/app/components/media-viewer/media-viewer.component.html
@@ -1,5 +1,7 @@
-<div class="media-viewer-canvas" (click)="close()">
-    <button class="media-viewer-canvas__close media-viewer-canvas__button" title="close">
+<div class="media-viewer-canvas noselect">
+    <div class="background__close" (click)="close()"></div>
+
+    <button class="media-viewer-canvas__close media-viewer-canvas__button" title="close" (click)="close()">
         <fa-icon [icon]="faTimes"></fa-icon>
     </button>
 
@@ -13,16 +15,17 @@
         <fa-icon [icon]="faAngleRight"></fa-icon>
     </button>
 
-    <div *ngFor="let att of attachments" class="media-viewer-canvas__attachement" [ngClass]="{ 'collapsed': currentIndex !== att.index }">
-        <img *ngIf="att.type === 'image'" 
-            src="{{att.url}}" class="media-viewer-canvas__image" (click)="blockClick($event)" />
+    <div *ngFor="let att of attachments" class="media-viewer-canvas__attachement"
+        [ngClass]="{ 'collapsed': currentIndex !== att.index }">
+        <a href="{{att.url}}" target="_blank" title="open image">
+            <img *ngIf="att.type === 'image'" src="{{att.url}}" class="media-viewer-canvas__image" />
+        </a>
 
-        <video *ngIf="att.type === 'gifv'" 
-            class="media-viewer-canvas__image"  role="application" loop autoplay (click)="blockClick($event)">
+        <video *ngIf="att.type === 'gifv'" class="media-viewer-canvas__image" role="application" loop autoplay>
             <source src="{{att.url}}" type="video/mp4">
         </video>
-        <video *ngIf="att.type === 'video'" 
-            class="media-viewer-canvas__image" role="application" loop autoplay controls="controls" (click)="blockClick($event)">
+        <video *ngIf="att.type === 'video'" class="media-viewer-canvas__image" role="application" loop autoplay
+            controls="controls">
             <source src="{{att.url}}" type="video/mp4">
         </video>
     </div>
diff --git a/src/app/components/media-viewer/media-viewer.component.scss b/src/app/components/media-viewer/media-viewer.component.scss
index 80024d9b..2239266a 100644
--- a/src/app/components/media-viewer/media-viewer.component.scss
+++ b/src/app/components/media-viewer/media-viewer.component.scss
@@ -1,12 +1,13 @@
 @import "variables";
+@import "commons";
 @import "mixins";
 
 .media-viewer-canvas {
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
+    // background-color: rgba(0, 0, 0, 0.8);
     overflow: hidden;
-    position: relative;
+    position: relative;   
     
     &__button {
         @include clearButton;
@@ -61,11 +62,13 @@
     }
 
     &__attachement {
-        max-width: 100%;
-        height: 100vh;    
+        // max-width: 100%;
+        // height: 100vh;    
     }
 
     &__image {
+        z-index: 10;
+
         @media screen and (min-width: $screen-break) {
             max-width: 85%;
         }
@@ -89,6 +92,16 @@
     }
 }
 
+.background__close {
+    position: absolute;
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
 .collapsed {
     height: 0;
 }
diff --git a/src/sass/_commons.scss b/src/sass/_commons.scss
index 109b41c4..5af1a5c2 100644
--- a/src/sass/_commons.scss
+++ b/src/sass/_commons.scss
@@ -1,7 +1,7 @@
 .waiting-icon {
     width: 40px;
     display: block;
-    margin:  5px auto;    
+    margin: 5px auto;
 }
 
 .flexcroll {
@@ -12,9 +12,11 @@
     scrollbar-darkshadow-color: #08090d;
     scrollbar-track-color: #08090d;
     scrollbar-arrow-color: #08090d;
+
     &::-webkit-scrollbar {
         width: 7px;
     }
+
     &::-webkit-scrollbar-thumb {
         -webkit-border-radius: 0px;
         border-radius: 0px;
@@ -35,4 +37,19 @@
     width: 20px;
     height: 20px;
     vertical-align: middle;
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently supported by Chrome and Opera */
 }
\ No newline at end of file

From fe8b14f94e6cfd8827b6cd73c06cb50d0721a164 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 20:41:21 -0400
Subject: [PATCH 09/29] open account via middle click

---
 src/app/components/stream/status/status.component.html | 4 ++--
 src/app/components/stream/status/status.component.ts   | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index 683a9df0..e48343fe 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -32,7 +32,7 @@
 <div class="status">
     <div [ngClass]="{'notification--status': notificationAccount }">
         <a href class="status__profile-link" title="{{displayedStatus.account.acct}}"
-            (click)="openAccount(displayedStatus.account)">
+            (click)="openAccount(displayedStatus.account)" (auxclick)="openUrl(displayedStatus.account.url)">
             <img [class.status__avatar--boosted]="reblog || notificationAccount" class="status__avatar"
                 src="{{ displayedStatus.account.avatar }}" />
             <!-- <img *ngIf="reblog" class="status__avatar--reblog" src="{{ status.account.avatar }}" /> -->
@@ -44,7 +44,7 @@
             </span>
         </a>
         <div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">
-            <a href class="status__created-at--link" (click)="textSelected()" (auxclick)="openUrl()">
+            <a href class="status__created-at--link" (click)="textSelected()" (auxclick)="openUrl(displayedStatus.url)">
                 {{ status.created_at | timeAgo | async }}
             </a>
         </div>
diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts
index dd5ce5f7..41462d29 100644
--- a/src/app/components/stream/status/status.component.ts
+++ b/src/app/components/stream/status/status.component.ts
@@ -6,6 +6,7 @@ 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",
@@ -165,9 +166,9 @@ export class StatusComponent implements OnInit {
         return false;
     }
 
-    openUrl(): boolean {
+    openUrl(url: string): boolean {
         event.preventDefault();
-        window.open(this.displayedStatus.url, "_blank");
+        window.open(url, "_blank");
         return false;
     }
 }

From 02caa33a8c497b636cf86781fc504ec03b14ffe8 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 15 Jun 2019 21:22:03 -0400
Subject: [PATCH 10/29] display multiposting messages in thread fix #120

---
 .../create-status/create-status.component.ts  | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/app/components/create-status/create-status.component.ts b/src/app/components/create-status/create-status.component.ts
index cab9d3a2..f6d9588f 100644
--- a/src/app/components/create-status/create-status.component.ts
+++ b/src/app/components/create-status/create-status.component.ts
@@ -237,10 +237,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
             .then((status: Status) => {
                 return this.sendStatus(acc, this.status, visibility, this.title, status, mediaAttachments);
             })
-            .then((res: Status) => {
-                if (this.statusReplyingToWrapper) {
-                    this.notificationService.newStatusPosted(this.statusReplyingToWrapper.status.id, new StatusWrapper(res, acc));
-                }
+            .then((res: Status) => {              
                 this.title = '';
                 this.status = '';
                 this.onClose.emit();
@@ -261,22 +258,30 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
 
         for (let i = 0; i < parsedStatus.length; i++) {
             let s = parsedStatus[i];
-            resultPromise = resultPromise.then((pStatus: Status) => {
-                let inReplyToId = null;
-                if (pStatus) {
-                    inReplyToId = pStatus.id;
-                }
+            resultPromise = resultPromise
+                .then((pStatus: Status) => {
+                    let inReplyToId = null;
+                    if (pStatus) {
+                        inReplyToId = pStatus.id;
+                    }
 
-                if (i === 0) {
-                    return this.mastodonService.postNewStatus(account, s, visibility, title, inReplyToId, attachments.map(x => x.id))
-                        .then((status: Status) => {
-                            this.mediaService.clearMedia();
-                            return status;
-                        });
-                } else {
-                    return this.mastodonService.postNewStatus(account, s, visibility, title, inReplyToId, []);
-                }
-            });
+                    if (i === 0) {
+                        return this.mastodonService.postNewStatus(account, s, visibility, title, inReplyToId, attachments.map(x => x.id))
+                            .then((status: Status) => {
+                                this.mediaService.clearMedia();
+                                return status;
+                            });
+                    } else {
+                        return this.mastodonService.postNewStatus(account, s, visibility, title, inReplyToId, []);
+                    }
+                })
+                .then((status: Status) => {
+                    if (this.statusReplyingToWrapper) {
+                        this.notificationService.newStatusPosted(this.statusReplyingToWrapper.status.id, new StatusWrapper(status, account));
+                    }
+
+                    return status;
+                });
         }
 
         return resultPromise;

From 8d5d6ae5d1109b0d1a0d17e4605cefc046088528 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 17 Jun 2019 21:36:49 -0400
Subject: [PATCH 11/29] fix rebloged date and displayed data

---
 src/app/components/stream/status/status.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index e48343fe..822c2377 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -1,5 +1,5 @@
 <div class="reblog" *ngIf="reblog">
-    <a class="reblog__profile-link" href (click)="openAccount(status.account)"><span
+    <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>
@@ -45,11 +45,11 @@
         </a>
         <div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">
             <a href class="status__created-at--link" (click)="textSelected()" (auxclick)="openUrl(displayedStatus.url)">
-                {{ status.created_at | timeAgo | async }}
+                {{ displayedStatus.created_at | timeAgo | async }}
             </a>
         </div>
         <div class="status__labels">
-            <div class="status__labels--label status__labels--bot" title="bot" *ngIf="status.account.bot">
+            <div class="status__labels--label status__labels--bot" title="bot" *ngIf="displayedStatus.account.bot">
                 bot
             </div>
             <div class="status__labels--label status__labels--xpost" title="this status was cross-posted"

From 0e214f1204fa8897a242db84b3164800d9bc85d8 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 17 Jun 2019 21:49:18 -0400
Subject: [PATCH 12/29] added old label (> 3 months)

---
 src/app/components/stream/status/status.component.html | 3 +++
 src/app/components/stream/status/status.component.scss | 3 +++
 src/app/components/stream/status/status.component.ts   | 8 ++++++++
 3 files changed, 14 insertions(+)

diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index 822c2377..a66f7b8c 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -63,6 +63,9 @@
                 *ngIf="hasReply">
                 replies
             </div>
+            <div class="status__labels--label status__labels--old" title="this status is old" *ngIf="isOld">
+                old
+            </div>
         </div>
         <!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
 
diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index 8468d751..c3cc54d7 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/src/app/components/stream/status/status.component.scss
@@ -80,6 +80,9 @@
         &--discuss {
             background-color: rgb(90, 0, 143);
         }
+        &--old {
+            background-color: rgb(150, 0, 0);
+        }
     }
     &__name {
         display: inline-block;
diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts
index 41462d29..5fbc73a7 100644
--- a/src/app/components/stream/status/status.component.ts
+++ b/src/app/components/stream/status/status.component.ts
@@ -30,6 +30,7 @@ export class StatusComponent implements OnInit {
     replyingToStatus: boolean;
     isCrossPoster: boolean;
     isThread: boolean;
+    isOld: boolean;
     isContentWarned: boolean;
     hasReply: boolean;
     contentWarningText: string;
@@ -121,6 +122,13 @@ export class StatusComponent implements OnInit {
         }
 
         this.hasReply = status.replies_count > 0;
+
+        let createdAt = new Date(status.created_at);
+        let now = new Date();
+        now.setMonth(now.getMonth() - 3);
+        if (now > createdAt) {
+            this.isOld = true;
+        }
     }
 
     openAccount(account: Account): boolean {

From 1327860c075911074778e44889c108e987e0d3cd Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 15:12:43 -0400
Subject: [PATCH 13/29] link actions to related status fix #121

---
 .../stream/status/poll/poll.component.ts           | 14 +++++++-------
 .../components/stream/status/status.component.html |  6 +++---
 .../components/stream/status/status.component.ts   |  3 +++
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/app/components/stream/status/poll/poll.component.ts b/src/app/components/stream/status/poll/poll.component.ts
index 198ef283..7385105c 100644
--- a/src/app/components/stream/status/poll/poll.component.ts
+++ b/src/app/components/stream/status/poll/poll.component.ts
@@ -53,8 +53,8 @@ export class PollComponent implements OnInit {
         return this._poll;
     }
 
-    @Input() provider: AccountInfo;
-    @Input() status: Status;
+    // @Input() provider: AccountInfo;
+    @Input() statusWrapper: StatusWrapper;
 
     private accounts$: Observable<AccountInfo[]>;
     private accountSub: Subscription;
@@ -71,8 +71,8 @@ export class PollComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.pollPerAccountId[this.provider.id] = Promise.resolve(this.poll);
-        this.selectedAccount = this.provider;
+        this.pollPerAccountId[this.statusWrapper.provider.id] = Promise.resolve(this.poll);
+        this.selectedAccount = this.statusWrapper.provider;
 
         this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
             this.checkStatus(accounts);
@@ -84,10 +84,10 @@ export class PollComponent implements OnInit {
         var newSelectedAccount = accounts.find(x => x.isSelected);
 
         const accountChanged = this.selectedAccount.id !== newSelectedAccount.id;
-        if (accountChanged && !this.pollPerAccountId[newSelectedAccount.id] && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')) {
+        if (accountChanged && !this.pollPerAccountId[newSelectedAccount.id] && (this.statusWrapper.status.visibility === 'public' || this.statusWrapper.status.visibility === 'unlisted')) {
             this.setStatsAtZero();
 
-            this.pollPerAccountId[newSelectedAccount.id] = this.toolsService.getStatusUsableByAccount(newSelectedAccount, new StatusWrapper(this.status, this.provider))
+            this.pollPerAccountId[newSelectedAccount.id] = this.toolsService.getStatusUsableByAccount(newSelectedAccount, new StatusWrapper(this.statusWrapper.status, this.statusWrapper.provider))
                 .then((status: Status) => {
                     return this.mastodonService.getPoll(newSelectedAccount, status.poll.id);
                 })
@@ -99,7 +99,7 @@ export class PollComponent implements OnInit {
                     this.notificationService.notifyHttpError(err);
                     return null;
                 });
-        } else if (this.status.visibility !== 'public' && this.status.visibility !== 'unlisted' && this.provider.id !== newSelectedAccount.id) {
+        } else if (this.statusWrapper.status.visibility !== 'public' && this.statusWrapper.status.visibility !== 'unlisted' && this.statusWrapper.provider.id !== newSelectedAccount.id) {
             this.pollLocked = true;
         } else {
             this.pollPerAccountId[newSelectedAccount.id]
diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index a66f7b8c..ac9eb7f0 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -79,7 +79,7 @@
             (textSelected)="textSelected()"></app-databinded-text>
 
         <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll" 
-            [poll]="displayedStatus.poll" [status]="displayedStatus" [provider]="statusWrapper.provider"></app-poll>
+            [poll]="displayedStatus.poll" [statusWrapper]="displayedStatusWrapper"></app-poll>
 
         <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments" [card]="displayedStatus.card"></app-card>
 
@@ -87,9 +87,9 @@
             [attachments]="displayedStatus.media_attachments">
         </app-attachements>
 
-        <app-action-bar #appActionBar [statusWrapper]="statusWrapper" (cwIsActiveEvent)="changeCw($event)"
+        <app-action-bar #appActionBar [statusWrapper]="displayedStatusWrapper" (cwIsActiveEvent)="changeCw($event)"
             (replyEvent)="openReply()"></app-action-bar>
     </div>
-    <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper" (onClose)="closeReply()">
+    <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="displayedStatusWrapper" (onClose)="closeReply()">
     </app-create-status>
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts
index 5fbc73a7..e7448140 100644
--- a/src/app/components/stream/status/status.component.ts
+++ b/src/app/components/stream/status/status.component.ts
@@ -21,6 +21,7 @@ export class StatusComponent implements OnInit {
     faList = faList;
 
     displayedStatus: Status;
+    displayedStatusWrapper: StatusWrapper;
 
     // statusAccountName: string;
     statusContent: string;
@@ -60,6 +61,8 @@ export class StatusComponent implements OnInit {
             this.displayedStatus = this.status;
         }
 
+        this.displayedStatusWrapper = new StatusWrapper(this.displayedStatus, value.provider);
+
         this.checkLabels(this.displayedStatus);
         this.checkContentWarning(this.displayedStatus);
 

From da7ddc7f3d8ecc39ec0144ed2daaa310bbe7fb49 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 15:33:45 -0400
Subject: [PATCH 14/29] better account handling in account management

---
 .../manage-account/manage-account.component.html      |  4 ++--
 .../manage-account/manage-account.component.ts        | 11 +++++++++++
 2 files changed, 13 insertions(+), 2 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 2e52ec73..b6e92d85 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
@@ -2,8 +2,8 @@
     <h3 class="panel__title">Manage Account</h3>
 
     <div class="account__header">
-        <a href="{{userAccount.url}}" target="_blank" >
-            <img class="account__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
+        <a href (click)="browseLocalAccount()" (auxclick)="openLocalAccount()" title="open {{ account.info.id }}">
+            <img class="account__avatar" src="{{account.avatar}}"/>
         </a>
 
         <!-- <a href class="account__header--button"><fa-icon [icon]="faUserPlus"></fa-icon></a> -->
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 e8f6cab2..58a66a69 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
@@ -94,6 +94,17 @@ export class ManageAccountComponent implements OnInit, OnDestroy {
         this.browseAccountEvent.next(accountName);
     }
 
+    browseLocalAccount(): boolean {
+        var accountName = `@${this.account.info.username}@${this.account.info.instance}`;
+        this.browseAccountEvent.next(accountName);
+        return false;
+    }
+
+    openLocalAccount(): boolean {
+        window.open(this.userAccount.url, '_blank');
+        return false;
+    }
+
     browseHashtag(hashtag: string): void {
         this.browseHashtagEvent.next(hashtag);
     }

From 2bc4393488f6da4355b1745303ca1e5a9494b505 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 16:01:45 -0400
Subject: [PATCH 15/29] fix multi-instance launch bug #100

---
 main-electron.js | 279 +++++++++++++++++++++++++----------------------
 1 file changed, 147 insertions(+), 132 deletions(-)

diff --git a/main-electron.js b/main-electron.js
index 32f628da..7398cae6 100644
--- a/main-electron.js
+++ b/main-electron.js
@@ -9,166 +9,181 @@ const fs = require("fs");
 let win;
 
 function createWindow() {
-  // Create the browser window.
-  win = new BrowserWindow({
-    width: 377,
-    height: 800,
-    title: "Sengi",
-    backgroundColor: "#FFF",
-    useContentSize: true
-  });
+    // Create the browser window.
+    win = new BrowserWindow({
+        width: 377,
+        height: 800,
+        title: "Sengi",
+        backgroundColor: "#FFF",
+        useContentSize: true
+    });
 
-  var server = http.createServer(requestHandler).listen(9527);
-  win.loadURL("http://localhost:9527");
+    var server = http.createServer(requestHandler).listen(9527);
+    win.loadURL("http://localhost:9527");
 
-  const template = [
-    {
-      label: "View",
-      submenu: [
-        { role: "reload" },
-        { role: "forcereload" },
-        { type: "separator" },
-        { role: "close" },
-        { role: 'quit' }
-      ]
-    },
-    {
-      role: "help",
-      submenu: [
-        { role: "toggledevtools" },
+    const template = [
         {
-          label: "Open GitHub project",
-          click() {
-            require("electron").shell.openExternal(
-              "https://github.com/NicolasConstant/sengi"
-            );
-          }
+            label: "View",
+            submenu: [
+                { role: "reload" },
+                { role: "forcereload" },
+                { type: "separator" },
+                { role: "close" },
+                { role: 'quit' }
+            ]
+        },
+        {
+            role: "help",
+            submenu: [
+                { role: "toggledevtools" },
+                {
+                    label: "Open GitHub project",
+                    click() {
+                        require("electron").shell.openExternal(
+                            "https://github.com/NicolasConstant/sengi"
+                        );
+                    }
+                }
+            ]
         }
-      ]
+    ];
+
+    const menu = Menu.buildFromTemplate(template);
+    win.setMenu(menu);
+
+    // Check if we are on a MAC
+    if (process.platform === "darwin") {
+        // Create our menu entries so that we can use MAC shortcuts
+        Menu.setApplicationMenu(
+            Menu.buildFromTemplate([
+                {
+                    label: "Edit",
+                    submenu: [
+                        { role: "undo" },
+                        { role: "redo" },
+                        { type: "separator" },
+                        { role: "cut" },
+                        { role: "copy" },
+                        { role: "paste" },
+                        { role: "pasteandmatchstyle" },
+                        { role: "delete" },
+                        { role: "selectall" },
+                        { type: "separator" },
+                        { role: "close" },
+                        { role: 'quit' }
+                    ]
+                },
+                {
+                    label: "View",
+                    submenu: [{ role: "reload" }, { role: "forcereload" }]
+                },
+                {
+                    role: "help",
+                    submenu: [
+                        { role: "toggledevtools" },
+                        {
+                            label: "Open GitHub project",
+                            click() {
+                                require("electron").shell.openExternal(
+                                    "https://github.com/NicolasConstant/sengi"
+                                );
+                            }
+                        }
+                    ]
+                }
+            ])
+        );
     }
-  ];
 
-  const menu = Menu.buildFromTemplate(template);
-  win.setMenu(menu);
+    // Open the DevTools.
+    // win.webContents.openDevTools()
 
-  // Check if we are on a MAC
-  if (process.platform === "darwin") {
-    // Create our menu entries so that we can use MAC shortcuts
-    Menu.setApplicationMenu(
-      Menu.buildFromTemplate([
-        {
-          label: "Edit",
-          submenu: [
-            { role: "undo" },
-            { role: "redo" },
-            { type: "separator" },
-            { role: "cut" },
-            { role: "copy" },
-            { role: "paste" },
-            { role: "pasteandmatchstyle" },
-            { role: "delete" },
-            { role: "selectall" },
-            { type: "separator" },
-            { role: "close" },
-            { role: 'quit' }
-          ]
-        },
-        {
-          label: "View",
-          submenu: [{ role: "reload" }, { role: "forcereload" }]
-        },
-        {
-          role: "help",
-          submenu: [
-            { role: "toggledevtools" },
-            {
-              label: "Open GitHub project",
-              click() {
-                require("electron").shell.openExternal(
-                  "https://github.com/NicolasConstant/sengi"
-                );
-              }
-            }
-          ]
-        }
-      ])
-    );
-  }
+    //open external links to browser
+    win.webContents.on("new-window", function (event, url) {
+        event.preventDefault();
+        shell.openExternal(url);
+    });
 
-  // Open the DevTools.
-  // win.webContents.openDevTools()
-
-  //open external links to browser
-  win.webContents.on("new-window", function(event, url) {
-    event.preventDefault();
-    shell.openExternal(url);
-  });
-
-  // Emitted when the window is closed.
-  win.on("closed", () => {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    win = null;
-  });
+    // Emitted when the window is closed.
+    win.on("closed", () => {
+        // Dereference the window object, usually you would store windows
+        // in an array if your app supports multi windows, this is the time
+        // when you should delete the corresponding element.
+        win = null;
+    });
 }
 
 function requestHandler(req, res) {
-  var file = req.url == "/" ? "/index.html" : req.url,
-    root = __dirname + "/dist",
-    page404 = root + "/404.html";
+    var file = req.url == "/" ? "/index.html" : req.url,
+        root = __dirname + "/dist",
+        page404 = root + "/404.html";
 
-  if (file.includes("register") || file.includes("home")) file = "/index.html";
+    if (file.includes("register") || file.includes("home")) file = "/index.html";
 
-  getFile(root + file, res, page404);
+    getFile(root + file, res, page404);
 }
 
 function getFile(filePath, res, page404) {
-  console.warn(`filePath: ${filePath}`);
-  fs.exists(filePath, function(exists) {
-    if (exists) {
-      fs.readFile(filePath, function(err, contents) {
-        if (!err) {
-          res.end(contents);
+    console.warn(`filePath: ${filePath}`);
+    fs.exists(filePath, function (exists) {
+        if (exists) {
+            fs.readFile(filePath, function (err, contents) {
+                if (!err) {
+                    res.end(contents);
+                } else {
+                    console.dir(err);
+                }
+            });
         } else {
-          console.dir(err);
+            fs.readFile(page404, function (err, contents) {
+                if (!err) {
+                    res.writeHead(404, { "Content-Type": "text/html" });
+                    res.end(contents);
+                } else {
+                    console.dir(err);
+                }
+            });
         }
-      });
-    } else {
-      fs.readFile(page404, function(err, contents) {
-        if (!err) {
-          res.writeHead(404, { "Content-Type": "text/html" });
-          res.end(contents);
-        } else {
-          console.dir(err);
-        }
-      });
-    }
-  });
+    });
 }
 
 app.commandLine.appendSwitch("force-color-profile", "srgb");
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.on("ready", createWindow);
+
+const gotTheLock = app.requestSingleInstanceLock();
+
+if (!gotTheLock) {
+    app.quit();
+} else {
+    app.on('second-instance', (event, commandLine, workingDirectory) => {
+        // Someone tried to run a second instance, we should focus our window.
+        if (win) {
+            if (win.isMinimized()) win.restore()
+            win.focus()
+        }
+    });
+
+    // This method will be called when Electron has finished
+    // initialization and is ready to create browser windows.
+    // Some APIs can only be used after this event occurs.
+    app.on("ready", createWindow);
+}
 
 // Quit when all windows are closed.
 app.on("window-all-closed", () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== "darwin") {
-    app.quit();
-  }
+    // On macOS it is common for applications and their menu bar
+    // to stay active until the user quits explicitly with Cmd + Q
+    if (process.platform !== "darwin") {
+        app.quit();
+    }
 });
 
 app.on("activate", () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (win === null) {
-    createWindow();
-  }
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (win === null) {
+        createWindow();
+    }
 });
 
 // In this file you can include the rest of your app's specific main process

From 62c5d42493dc87699ded7af75d10e7f1a64ec03d Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 16:49:55 -0400
Subject: [PATCH 16/29] created UI for custom status length

---
 .../my-account/my-account.component.html      | 27 ++++++++++++-------
 .../my-account/my-account.component.scss      | 20 ++++++++++++++
 .../my-account/my-account.component.ts        |  7 +++++
 .../stream/status/poll/poll.component.scss    | 19 ++-----------
 src/sass/_commons.scss                        | 20 ++++++++++++++
 5 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.html b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
index ced4c965..5b436778 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.html
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
@@ -9,21 +9,21 @@
 
     <h4 class="my-account__label my-account__margin-top">manage list:</h4>
     <div class="my-account__link--margin-bottom" *ngFor="let list of availableLists">
-        <a href class="my-account__list--button" title="delete list" 
-            (click)="openCloseDeleteConfirmation(list, true)" *ngIf="!list.confirmDeletion">
+        <a href class="my-account__list--button" title="delete list" (click)="openCloseDeleteConfirmation(list, true)"
+            *ngIf="!list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faTrash"></fa-icon>
         </a>
-        <a href class="my-account__list--button" title="edit list" 
-            (click)="editList(list)" *ngIf="!list.confirmDeletion">
+        <a href class="my-account__list--button" title="edit list" (click)="editList(list)"
+            *ngIf="!list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faPenAlt"></fa-icon>
         </a>
 
-        <a href class="my-account__list--button" title="cancel" 
-            (click)="openCloseDeleteConfirmation(list, false)" *ngIf="list.confirmDeletion">
+        <a href class="my-account__list--button" title="cancel" (click)="openCloseDeleteConfirmation(list, false)"
+            *ngIf="list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faTimes"></fa-icon>
         </a>
-        <a href class="my-account__list--button my-account__red" title="delete list" 
-            (click)="deleteList(list)" *ngIf="list.confirmDeletion">
+        <a href class="my-account__list--button my-account__red" title="delete list" (click)="deleteList(list)"
+            *ngIf="list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faCheck"></fa-icon>
         </a>
 
@@ -38,7 +38,16 @@
     <a href class="my-account__list--button" title="create list" (click)="createList()">
         <fa-icon class="my-account__link--icon" [icon]="faPlus"></fa-icon>
     </a>
-    <input class="my-account__list--new-list-title" placeholder="new list title" [(ngModel)]="listTitle" (keyup.enter)="createList()" [disabled]="creationLoading"/>
+    <input class="my-account__list--new-list-title" placeholder="new list title" [(ngModel)]="listTitle"
+        (keyup.enter)="createList()" [disabled]="creationLoading" />
+
+    <h4 class="my-account__label my-account__margin-top">advanced settings:</h4>
+    <div class="advanced-settings">
+        <input class="advanced-settings__checkbox" [value]="customStatusLength" (change)="onCustomLengthChange()"
+            type="checkbox" name="customCharLength" value="customCharLength" id="customCharLength"> <label class="noselect advanced-settings__label" for="customCharLength">status'
+            custom length</label><br>
+        <input *ngIf="customStatusLength" class="themed-form advanced-settings__input" type="number" />
+    </div>
 
     <h4 class="my-account__label my-account__margin-top">remove account from sengi:</h4>
     <a class="my-account__link my-account__red" href (click)="removeAccount()">
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
index e1f8352b..37470a3f 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
@@ -102,4 +102,24 @@
     &__margin-top {
         margin-top: 25px;
     }
+}
+
+.advanced-settings {
+    position: relative;
+
+    &__checkbox{
+        position: relative;
+        top:3px;
+        left: 5px;
+        margin-right: 7px;
+    }
+
+    &__label {
+
+
+    }
+
+    &__input {
+        margin-left: 5px;
+    }
 }
\ No newline at end of file
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
index 69db4318..c6caa9ab 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
@@ -23,6 +23,8 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     faCheckSquare = faCheckSquare;
     faCheck = faCheck;
     faTimes = faTimes;
+
+    customStatusLength: boolean;
     
     availableStreams: StreamWrapper[] = [];
     availableLists: StreamWrapper[] = [];
@@ -58,6 +60,11 @@ export class MyAccountComponent implements OnInit, OnDestroy {
         }
     }
 
+    onCustomLengthChange(): boolean {
+        this.customStatusLength = !this.customStatusLength;
+        return false;
+    }
+
     private loadStreams(account: AccountWrapper){
         const instance = account.info.instance;
         this.availableStreams.length = 0;
diff --git a/src/app/components/stream/status/poll/poll.component.scss b/src/app/components/stream/status/poll/poll.component.scss
index 93947f57..542c1257 100644
--- a/src/app/components/stream/status/poll/poll.component.scss
+++ b/src/app/components/stream/status/poll/poll.component.scss
@@ -1,5 +1,5 @@
-// @import "variables";
-// @import "commons";
+@import "variables";
+@import "commons";
 // @import "panel";
 @import "buttons";
 
@@ -171,19 +171,4 @@
         display: inline-block;
         margin: 0 5px;
     }
-}
-
-.noselect {
-    -webkit-touch-callout: none;
-    /* iOS Safari */
-    -webkit-user-select: none;
-    /* Safari */
-    -khtml-user-select: none;
-    /* Konqueror HTML */
-    -moz-user-select: none;
-    /* Firefox */
-    -ms-user-select: none;
-    /* Internet Explorer/Edge */
-    user-select: none;
-    /* Non-prefixed version, currently supported by Chrome and Opera */
 }
\ No newline at end of file
diff --git a/src/sass/_commons.scss b/src/sass/_commons.scss
index 5af1a5c2..b58ee639 100644
--- a/src/sass/_commons.scss
+++ b/src/sass/_commons.scss
@@ -1,3 +1,23 @@
+@import "variables";
+
+.themed-form{
+    background-color: $column-color;
+    border: 1px $button-border-color solid;
+    padding: 2px 0 2px 5px;
+    // border-width: 1px;
+    color: #fff;    
+    &:focus {
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        outline: 0px;
+    }
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+
 .waiting-icon {
     width: 40px;
     display: block;

From 04cdb6ebce52856d19a533f23aea8f27697426e4 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 17:18:55 -0400
Subject: [PATCH 17/29] added custom status length warning

---
 .../manage-account/my-account/my-account.component.html     | 5 +++--
 .../manage-account/my-account/my-account.component.scss     | 6 ++++++
 .../manage-account/my-account/my-account.component.ts       | 5 +++--
 src/app/states/settings.state.ts                            | 3 +++
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.html b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
index 5b436778..1e098168 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.html
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
@@ -43,10 +43,11 @@
 
     <h4 class="my-account__label my-account__margin-top">advanced settings:</h4>
     <div class="advanced-settings">
-        <input class="advanced-settings__checkbox" [value]="customStatusLength" (change)="onCustomLengthChange()"
+        <input class="advanced-settings__checkbox" [value]="customStatusLengthEnabled" (change)="onCustomLengthChange()"
             type="checkbox" name="customCharLength" value="customCharLength" id="customCharLength"> <label class="noselect advanced-settings__label" for="customCharLength">status'
             custom length</label><br>
-        <input *ngIf="customStatusLength" class="themed-form advanced-settings__input" type="number" />
+        <p *ngIf="customStatusLengthEnabled" class="advanced-settings__text">use this only if your instance doesn't support custom length detection (i.e. not a Pleroma or glitch-soc instance)</p>
+        <input *ngIf="customStatusLengthEnabled" [value]="customStatusLength" class="themed-form advanced-settings__input" type="number" />
     </div>
 
     <h4 class="my-account__label my-account__margin-top">remove account from sengi:</h4>
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
index 37470a3f..8574e7c2 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
@@ -119,6 +119,12 @@
 
     }
 
+    &__text {
+        display: block;
+        margin: 0 6px 9px 6px;
+        color: rgb(140, 152, 173);
+    }
+
     &__input {
         margin-left: 5px;
     }
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
index c6caa9ab..183bf612 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
@@ -24,7 +24,8 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     faCheck = faCheck;
     faTimes = faTimes;
 
-    customStatusLength: boolean;
+    customStatusLengthEnabled: boolean;
+    customStatusLength: number;
     
     availableStreams: StreamWrapper[] = [];
     availableLists: StreamWrapper[] = [];
@@ -61,7 +62,7 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     }
 
     onCustomLengthChange(): boolean {
-        this.customStatusLength = !this.customStatusLength;
+        this.customStatusLengthEnabled = !this.customStatusLengthEnabled;
         return false;
     }
 
diff --git a/src/app/states/settings.state.ts b/src/app/states/settings.state.ts
index 91aca747..ad3f6d08 100644
--- a/src/app/states/settings.state.ts
+++ b/src/app/states/settings.state.ts
@@ -21,6 +21,9 @@ export class AccountSettings {
     displayNotifications: boolean = true;
     lastMentionCreationDate: string;    
     lastNotificationCreationDate: string;
+
+    customStatusCharLengthEnabled: boolean = false;
+    customStatusCharLength: number = 500;
 }
 
 export class GlobalSettings {

From b81d73f062d2cb67f8658bd7fa57e634400d16d5 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 17:49:19 -0400
Subject: [PATCH 18/29] custom status char limit supported #111

---
 .../create-status/create-status.component.ts  |  9 ++++++-
 .../my-account/my-account.component.html      |  4 ++--
 .../my-account/my-account.component.ts        | 24 ++++++++++++++++---
 src/app/services/tools.service.ts             |  4 ++++
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/app/components/create-status/create-status.component.ts b/src/app/components/create-status/create-status.component.ts
index f6d9588f..b9450795 100644
--- a/src/app/components/create-status/create-status.component.ts
+++ b/src/app/components/create-status/create-status.component.ts
@@ -106,7 +106,13 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     private accountChanged(accounts: AccountInfo[]): void {
         if (accounts && accounts.length > 0) {
             const selectedAccount = accounts.filter(x => x.isSelected)[0];
-            this.instancesInfoService.getMaxStatusChars(selectedAccount.instance)
+
+            const settings = this.toolsService.getAccountSettings(selectedAccount);
+            if(settings.customStatusCharLengthEnabled){
+                this.maxCharLength = settings.customStatusCharLength;
+                this.countStatusChar(this.status);
+            } else {
+                this.instancesInfoService.getMaxStatusChars(selectedAccount.instance)
                 .then((maxChars: number) => {
                     this.maxCharLength = maxChars;
                     this.countStatusChar(this.status);
@@ -114,6 +120,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
                 .catch((err: HttpErrorResponse) => {
                     this.notificationService.notifyHttpError(err);
                 });
+            }         
 
             if (!this.statusReplyingToWrapper) {
                 this.instancesInfoService.getDefaultPrivacy(selectedAccount)
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.html b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
index 1e098168..a8ef56e8 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.html
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
@@ -43,11 +43,11 @@
 
     <h4 class="my-account__label my-account__margin-top">advanced settings:</h4>
     <div class="advanced-settings">
-        <input class="advanced-settings__checkbox" [value]="customStatusLengthEnabled" (change)="onCustomLengthChange()"
+        <input class="advanced-settings__checkbox" [(ngModel)]="customStatusLengthEnabled" (change)="onCustomLengthEnabledChanged()"
             type="checkbox" name="customCharLength" value="customCharLength" id="customCharLength"> <label class="noselect advanced-settings__label" for="customCharLength">status'
             custom length</label><br>
         <p *ngIf="customStatusLengthEnabled" class="advanced-settings__text">use this only if your instance doesn't support custom length detection (i.e. not a Pleroma or glitch-soc instance)</p>
-        <input *ngIf="customStatusLengthEnabled" [value]="customStatusLength" class="themed-form advanced-settings__input" type="number" />
+        <input *ngIf="customStatusLengthEnabled" [(ngModel)]="customStatusLength" class="themed-form advanced-settings__input" type="number" (keyup)="customStatusLengthChanged($event)" />
     </div>
 
     <h4 class="my-account__label my-account__margin-top">remove account from sengi:</h4>
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
index 183bf612..64a729f2 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
@@ -10,6 +10,8 @@ import { AccountWrapper } from '../../../../models/account.models';
 import { RemoveAccount } from '../../../../states/accounts.state';
 import { NavigationService } from '../../../../services/navigation.service';
 import { MastodonService } from '../../../../services/mastodon.service';
+import { ToolsService } from '../../../../services/tools.service';
+import { AccountSettings } from '../../../../states/settings.state';
 
 @Component({
     selector: 'app-my-account',
@@ -26,6 +28,7 @@ export class MyAccountComponent implements OnInit, OnDestroy {
 
     customStatusLengthEnabled: boolean;
     customStatusLength: number;
+    private accountSettings: AccountSettings;
     
     availableStreams: StreamWrapper[] = [];
     availableLists: StreamWrapper[] = [];
@@ -35,6 +38,7 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     set account(acc: AccountWrapper) {
         this._account = acc;
         this.loadStreams(acc);
+        this.loadAccountSettings();
     }
     get account(): AccountWrapper {
         return this._account;
@@ -45,6 +49,7 @@ export class MyAccountComponent implements OnInit, OnDestroy {
 
     constructor(
         private readonly store: Store,
+        private readonly toolsService: ToolsService,
         private readonly navigationService: NavigationService,
         private readonly mastodonService: MastodonService,
         private readonly notificationService: NotificationService) { }
@@ -52,7 +57,7 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     ngOnInit() {
         this.streamChangedSub = this.streamElements$.subscribe((streams: StreamElement[]) => {
             this.loadStreams(this.account);
-        });
+        });           
     }
 
     ngOnDestroy(): void {
@@ -61,8 +66,21 @@ export class MyAccountComponent implements OnInit, OnDestroy {
         }
     }
 
-    onCustomLengthChange(): boolean {
-        this.customStatusLengthEnabled = !this.customStatusLengthEnabled;
+    private loadAccountSettings(){
+        this.accountSettings = this.toolsService.getAccountSettings(this.account.info);
+
+        this.customStatusLengthEnabled = this.accountSettings.customStatusCharLengthEnabled;          this.customStatusLength = this.accountSettings.customStatusCharLength;
+    }
+
+    onCustomLengthEnabledChanged(): boolean {
+        this.accountSettings.customStatusCharLengthEnabled = this.customStatusLengthEnabled;
+        this.toolsService.saveAccountSettings(this.accountSettings);
+        return false;
+    }
+
+    customStatusLengthChanged(event): boolean{
+        this.accountSettings.customStatusCharLength = this.customStatusLength;
+        this.toolsService.saveAccountSettings(this.accountSettings);
         return false;
     }
 
diff --git a/src/app/services/tools.service.ts b/src/app/services/tools.service.ts
index f1a1ecb0..5f0f4721 100644
--- a/src/app/services/tools.service.ts
+++ b/src/app/services/tools.service.ts
@@ -30,6 +30,10 @@ export class ToolsService {
             accountSettings.accountId = account.id;
             this.saveAccountSettings(accountSettings);           
         }
+        if(!accountSettings.customStatusCharLength){
+            accountSettings.customStatusCharLength = 500;
+            this.saveAccountSettings(accountSettings);
+        }
         return accountSettings;
     }
 

From 6c9653f945538834a999dcb53ed502430845d70e Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 18:16:01 -0400
Subject: [PATCH 19/29] added zone to navigate status, fix #109

---
 .../stream/status/status.component.html       | 21 ++++++++++++-------
 .../stream/status/status.component.scss       | 10 +++++++++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index ac9eb7f0..be58d73f 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -1,7 +1,7 @@
 <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
+    <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="notificationType === 'favourite'">
     <div class="notification--icon">
@@ -30,6 +30,9 @@
     </div>
 </div>
 <div class="status">
+    <a href class="status__navigation" title="open status" (click)="textSelected()">
+
+    </a>
     <div [ngClass]="{'notification--status': notificationAccount }">
         <a href class="status__profile-link" title="{{displayedStatus.account.acct}}"
             (click)="openAccount(displayedStatus.account)" (auxclick)="openUrl(displayedStatus.account.url)">
@@ -67,6 +70,8 @@
                 old
             </div>
         </div>
+
+
         <!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
 
         <a href class="status__content-warning" *ngIf="isContentWarned" title="show content"
@@ -78,10 +83,11 @@
             (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
             (textSelected)="textSelected()"></app-databinded-text>
 
-        <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll" 
-            [poll]="displayedStatus.poll" [statusWrapper]="displayedStatusWrapper"></app-poll>
+        <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"
+            [statusWrapper]="displayedStatusWrapper"></app-poll>
 
-        <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments" [card]="displayedStatus.card"></app-card>
+        <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments"
+            [card]="displayedStatus.card"></app-card>
 
         <app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments"
             [attachments]="displayedStatus.media_attachments">
@@ -90,6 +96,7 @@
         <app-action-bar #appActionBar [statusWrapper]="displayedStatusWrapper" (cwIsActiveEvent)="changeCw($event)"
             (replyEvent)="openReply()"></app-action-bar>
     </div>
-    <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="displayedStatusWrapper" (onClose)="closeReply()">
+    <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="displayedStatusWrapper"
+        (onClose)="closeReply()">
     </app-create-status>
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index c3cc54d7..84f5892f 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/src/app/components/stream/status/status.component.scss
@@ -162,6 +162,16 @@
             }
         }
     }
+
+    &__navigation{
+        display: block;
+        position: absolute;
+        top:65px;
+        bottom: 40px;
+        width: 65px;
+        min-height: 40px;
+        // outline: 1px solid greenyellow;
+    }
 }
 
 .attachments {

From 8ad9ecb95bb163de3e37a0b9a8b19095a6231cf0 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 18:45:11 -0400
Subject: [PATCH 20/29] take CW length in status char count, fix #122

---
 .../create-status/create-status.component.ts  | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/app/components/create-status/create-status.component.ts b/src/app/components/create-status/create-status.component.ts
index b9450795..ee706dc3 100644
--- a/src/app/components/create-status/create-status.component.ts
+++ b/src/app/components/create-status/create-status.component.ts
@@ -20,7 +20,14 @@ import { identifierModuleUrl } from '@angular/compiler';
     styleUrls: ['./create-status.component.scss']
 })
 export class CreateStatusComponent implements OnInit, OnDestroy {
-    title: string;
+    private _title: string;
+    set title(value: string){
+        this._title = value;
+        this.countStatusChar(this.status);
+    }
+    get title(): string {
+        return this._title;
+    }
 
     private _status: string = '';
     set status(value: string) {
@@ -108,19 +115,19 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
             const selectedAccount = accounts.filter(x => x.isSelected)[0];
 
             const settings = this.toolsService.getAccountSettings(selectedAccount);
-            if(settings.customStatusCharLengthEnabled){
+            if (settings.customStatusCharLengthEnabled) {
                 this.maxCharLength = settings.customStatusCharLength;
                 this.countStatusChar(this.status);
             } else {
                 this.instancesInfoService.getMaxStatusChars(selectedAccount.instance)
-                .then((maxChars: number) => {
-                    this.maxCharLength = maxChars;
-                    this.countStatusChar(this.status);
-                })
-                .catch((err: HttpErrorResponse) => {
-                    this.notificationService.notifyHttpError(err);
-                });
-            }         
+                    .then((maxChars: number) => {
+                        this.maxCharLength = maxChars;
+                        this.countStatusChar(this.status);
+                    })
+                    .catch((err: HttpErrorResponse) => {
+                        this.notificationService.notifyHttpError(err);
+                    });
+            }
 
             if (!this.statusReplyingToWrapper) {
                 this.instancesInfoService.getDefaultPrivacy(selectedAccount)
@@ -176,10 +183,18 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         const statusExtraChars = this.getMentionExtraChars(status);
 
         const statusLength = currentStatus.length - statusExtraChars;
-        this.charCountLeft = this.maxCharLength - statusLength;
+        this.charCountLeft = this.maxCharLength - statusLength - this.getCwLength();
         this.postCounts = parseStatus.length;
     }
 
+    private getCwLength(): number {
+        let cwLength = 0;
+        if (this.title) {
+            cwLength = this.title.length;
+        }
+        return cwLength;
+    }
+
     private getMentions(status: Status, providerInfo: AccountInfo): string[] {
         const mentions = [...status.mentions.map(x => x.acct), status.account.acct];
 
@@ -244,7 +259,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
             .then((status: Status) => {
                 return this.sendStatus(acc, this.status, visibility, this.title, status, mediaAttachments);
             })
-            .then((res: Status) => {              
+            .then((res: Status) => {
                 this.title = '';
                 this.status = '';
                 this.onClose.emit();
@@ -305,7 +320,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
             aggregateMention += `${x} `;
         });
 
-        const currentMaxCharLength = this.maxCharLength + mentionExtraChars;
+        const currentMaxCharLength = this.maxCharLength + mentionExtraChars - this.getCwLength();
         const maxChars = currentMaxCharLength - 6;
 
         while (trucatedStatus.length > currentMaxCharLength) {

From 06982bd8913a6b609da9e32b3edd27063c0fb051 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 19:37:49 -0400
Subject: [PATCH 21/29] better account validation, fix #118

---
 .../register-new-account.component.ts         | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/register-new-account/register-new-account.component.ts b/src/app/pages/register-new-account/register-new-account.component.ts
index 0ccf77a3..118eae18 100644
--- a/src/app/pages/register-new-account/register-new-account.component.ts
+++ b/src/app/pages/register-new-account/register-new-account.component.ts
@@ -4,10 +4,11 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { HttpErrorResponse } from "@angular/common/http";
 
 import { AuthService, CurrentAuthProcess } from "../../services/auth.service";
-import { TokenData } from "../../services/models/mastodon.interfaces";
+import { TokenData, Account } from "../../services/models/mastodon.interfaces";
 import { RegisteredAppsStateModel, AppInfo } from "../../states/registered-apps.state";
-import { AccountInfo, AddAccount } from "../../states/accounts.state";
+import { AccountInfo, AddAccount, AccountsStateModel } from "../../states/accounts.state";
 import { NotificationService } from "../../services/notification.service";
+import { MastodonService } from '../../services/mastodon.service';
 
 @Component({
     selector: "app-register-new-account",
@@ -23,6 +24,7 @@ export class RegisterNewAccountComponent implements OnInit {
     private authStorageKey: string = 'tempAuth';
 
     constructor(
+        private readonly mastodonService: MastodonService,
         private readonly notificationService: NotificationService,
         private readonly authService: AuthService,
         private readonly store: Store,
@@ -45,13 +47,26 @@ export class RegisterNewAccountComponent implements OnInit {
             }
 
             const appInfo = this.getAllSavedApps().filter(x => x.instance === appDataWrapper.instance)[0];
-
+            let usedTokenData: TokenData;
             this.authService.getToken(appDataWrapper.instance, appInfo.app.client_id, appInfo.app.client_secret, code, appInfo.app.redirect_uri)
                 .then((tokenData: TokenData) => {
+                    usedTokenData = tokenData;
+                    return this.mastodonService.retrieveAccountDetails({ 'instance': appDataWrapper.instance, 'id': '', 'username': '', 'order': 0, 'isSelected': true, 'token': tokenData });
+                })
+                .then((account: Account) => {
+                    var username = account.username.toLowerCase(); 
+                    var instance = appDataWrapper.instance.toLowerCase();
+
+                    if(this.isAccountAlreadyPresent(username, instance)){
+                        this.notificationService.notify(`Account @${username}@${instance} is already registered`, true);
+                        this.router.navigate(['/home']);
+                        return;
+                    }
+
                     const accountInfo = new AccountInfo();
-                    accountInfo.username = appDataWrapper.username.toLowerCase();
-                    accountInfo.instance = appDataWrapper.instance.toLowerCase();
-                    accountInfo.token = tokenData;
+                    accountInfo.username = username; 
+                    accountInfo.instance = instance;
+                    accountInfo.token = usedTokenData;
 
                     this.store.dispatch([new AddAccount(accountInfo)])
                         .subscribe(() => {
@@ -68,6 +83,16 @@ export class RegisterNewAccountComponent implements OnInit {
     ngOnInit() {
     }
 
+    private isAccountAlreadyPresent(username: string, instance: string): boolean{
+        const accounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
+        for (let acc of accounts) {
+            if(acc.instance === instance && acc.username == username){
+                return true;
+            }
+        }
+        return false;
+    }
+
     private displayError(type: RegistrationErrorTypes) {
         this.hasError = true;
         switch (type) {

From af45279efa86084495f9dc869f9fe88fbb28141c Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 19:47:14 -0400
Subject: [PATCH 22/29] better positionning of "remove column"

---
 .../stream-edition.component.html             | 10 ++++++----
 .../stream-edition.component.scss             | 20 +++++++++++++++++--
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/components/stream/stream-edition/stream-edition.component.html b/src/app/components/stream/stream-edition/stream-edition.component.html
index b736e313..1dfa8d6a 100644
--- a/src/app/components/stream/stream-edition/stream-edition.component.html
+++ b/src/app/components/stream/stream-edition/stream-edition.component.html
@@ -1,5 +1,7 @@
-<div class="stream-edition">
-    <button (click)="moveLeft()" class="stream-edition__button" title="move left"><fa-icon [icon]="faChevronLeft"></fa-icon></button>
-    <button (click)="moveRight()" class="stream-edition__button" title="move right"><fa-icon [icon]="faChevronRight"></fa-icon></button>
-    <button (click)="delete()" class="stream-edition__button stream-edition__button--delete"  title="remove column"><fa-icon [icon]="faTimes"></fa-icon></button>
+<div class="stream-edition">   
+    <button (click)="delete()" class="stream-edition__button stream-edition__button--delete"  title="remove column"><fa-icon [icon]="faTimes"></fa-icon> <span class="stream-edition__button--delete--label">remove</span></button>
+
+    <button (click)="moveRight()" class="stream-edition__button stream-edition__button--move stream-edition__button--move--right" title="move right"><fa-icon [icon]="faChevronRight"></fa-icon></button>
+    <button (click)="moveLeft()" class="stream-edition__button stream-edition__button--move" title="move left"><fa-icon [icon]="faChevronLeft"></fa-icon></button>
+  
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/stream-edition/stream-edition.component.scss b/src/app/components/stream/stream-edition/stream-edition.component.scss
index 2a8d451c..c9b50ab7 100644
--- a/src/app/components/stream/stream-edition/stream-edition.component.scss
+++ b/src/app/components/stream/stream-edition/stream-edition.component.scss
@@ -5,13 +5,29 @@
     width: 100%;
     // min-height: 50px;
     background-color: #222736;
+
     &__button {
         @include clearButton;
         padding: 5px 10px 5px 10px;
         margin: 3px 0;
-        &--delete{
+
+        &--delete {
+            // float: right;
+            margin-left: 5px;
+
+            &--label {
+                position: relative;
+                top: -1px;
+                left: 7px;
+            }
+        }
+
+        &--move {
             float: right;
-            margin-right: 5px;
+
+            &--right {
+                margin-right: 5px;
+            }
         }
 
         &:hover {

From 0fa56da2e4a6bc262d2c95d2d8f117f4894cd3d0 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 20:14:25 -0400
Subject: [PATCH 23/29] added filters UI

---
 .../stream-edition.component.html             | 33 ++++++++++++++++---
 .../stream-edition.component.scss             | 18 ++++++++++
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/app/components/stream/stream-edition/stream-edition.component.html b/src/app/components/stream/stream-edition/stream-edition.component.html
index 1dfa8d6a..86523756 100644
--- a/src/app/components/stream/stream-edition/stream-edition.component.html
+++ b/src/app/components/stream/stream-edition/stream-edition.component.html
@@ -1,7 +1,30 @@
-<div class="stream-edition">   
-    <button (click)="delete()" class="stream-edition__button stream-edition__button--delete"  title="remove column"><fa-icon [icon]="faTimes"></fa-icon> <span class="stream-edition__button--delete--label">remove</span></button>
+<div class="stream-edition">
+    <div class="stream-edition__settings">
+        <div class="stream-edition__setting">
+            <input class="stream-edition__setting--checkbox" type="checkbox" id="hideBoost"> <label for="hideBoost" class="noselect">hide
+                boosts</label><br />
+        </div>
+        <div class="stream-edition__setting">
+            <input class="stream-edition__setting--checkbox" type="checkbox" id="hideReplies"> <label for="hideReplies" class="noselect">hide
+                replies</label><br />
+        </div>
+        <div class="stream-edition__setting">
+            <input class="stream-edition__setting--checkbox" type="checkbox" id="hideBots"> <label for="hideBots" class="noselect">hide
+                bots</label><br />
+        </div>
+    </div>
+    <div>
+        <button (click)="delete()" class="stream-edition__button stream-edition__button--delete" title="remove column">
+            <fa-icon [icon]="faTimes"></fa-icon> <span class="stream-edition__button--delete--label">remove</span>
+        </button>
 
-    <button (click)="moveRight()" class="stream-edition__button stream-edition__button--move stream-edition__button--move--right" title="move right"><fa-icon [icon]="faChevronRight"></fa-icon></button>
-    <button (click)="moveLeft()" class="stream-edition__button stream-edition__button--move" title="move left"><fa-icon [icon]="faChevronLeft"></fa-icon></button>
-  
+        <button (click)="moveRight()"
+            class="stream-edition__button stream-edition__button--move stream-edition__button--move--right"
+            title="move right">
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
+        <button (click)="moveLeft()" class="stream-edition__button stream-edition__button--move" title="move left">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+        </button>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/stream-edition/stream-edition.component.scss b/src/app/components/stream/stream-edition/stream-edition.component.scss
index c9b50ab7..99cfcd5c 100644
--- a/src/app/components/stream/stream-edition/stream-edition.component.scss
+++ b/src/app/components/stream/stream-edition/stream-edition.component.scss
@@ -1,10 +1,28 @@
 @import "variables";
+@import "commons";
 @import "mixins";
 
 .stream-edition {
     width: 100%;
     // min-height: 50px;
     background-color: #222736;
+    border-bottom: 1px solid $color-secondary;
+
+    &__settings{
+        padding: 5px 5px 0 5px;
+        border-bottom: 1px solid $color-secondary;
+    }
+
+    &__setting{
+        // outline: 1px solid greenyellow;
+        padding: 0 10px 0 10px;
+
+        &--checkbox {
+            position: relative;
+            top: 2px;
+            margin-right: 5px;
+        }
+    }
 
     &__button {
         @include clearButton;

From 801445cd8c4e542e0fa0589bb9cdd980148c353b Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 21:01:36 -0400
Subject: [PATCH 24/29] added update stream action

---
 src/app/states/streams.state.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/app/states/streams.state.ts b/src/app/states/streams.state.ts
index ee72081a..accdbd62 100644
--- a/src/app/states/streams.state.ts
+++ b/src/app/states/streams.state.ts
@@ -5,6 +5,11 @@ export class AddStream {
     constructor(public stream: StreamElement) {}
 }
 
+export class UpdateStream {
+    static readonly type = '[Streams] Update stream';
+    constructor(public stream: StreamElement) {}
+}
+
 export class RemoveAllStreams {
     static readonly type = '[Streams] Remove all streams';
     constructor(public accountId :string) {}
@@ -43,6 +48,21 @@ export class StreamsState {
             streams: [...state.streams, action.stream]
         });
     }
+    @Action(UpdateStream)
+    UpdateStream(ctx: StateContext<StreamsStateModel>, action: UpdateStream){
+        const state = ctx.getState();
+        
+        const otherStreams = state.streams.filter(x => x.id !== action.stream.id);
+        const updatedStream = state.streams.find(x => x.id === action.stream.id);
+
+        updatedStream.hideBoosts = action.stream.hideBoosts;
+        updatedStream.hideReplies = action.stream.hideReplies;
+        updatedStream.hideBots = action.stream.hideBots;
+
+        ctx.patchState({
+            streams: [...otherStreams, updatedStream]
+        });
+    }
     @Action(RemoveAllStreams)
     RemoveAllStreams(ctx: StateContext<StreamsStateModel>, action: RemoveAllStreams){
         const state = ctx.getState();
@@ -92,6 +112,10 @@ export class StreamsState {
 export class StreamElement {
     public id: string;
 
+    public hideBoosts: boolean;
+    public hideReplies: boolean;
+    public hideBots: boolean;
+
     constructor(
         public type: StreamTypeEnum, 
         public name: string, 

From 44ed56346e96288171a6e4e99617b8d272b3dab5 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 22:36:17 -0400
Subject: [PATCH 25/29] update streams settings

---
 .../stream-edition.component.html              |  9 ++++++---
 .../stream-edition/stream-edition.component.ts | 18 +++++++++++++++++-
 src/app/states/streams.state.ts                |  3 +--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/components/stream/stream-edition/stream-edition.component.html b/src/app/components/stream/stream-edition/stream-edition.component.html
index 86523756..b4995fce 100644
--- a/src/app/components/stream/stream-edition/stream-edition.component.html
+++ b/src/app/components/stream/stream-edition/stream-edition.component.html
@@ -1,15 +1,18 @@
 <div class="stream-edition">
     <div class="stream-edition__settings">
         <div class="stream-edition__setting">
-            <input class="stream-edition__setting--checkbox" type="checkbox" id="hideBoost"> <label for="hideBoost" class="noselect">hide
+            <input [(ngModel)]="hideBoosts" (change)="settingsChanged()"
+            class="stream-edition__setting--checkbox" type="checkbox" id="hideBoosts"> <label for="hideBoosts" class="noselect">hide
                 boosts</label><br />
         </div>
         <div class="stream-edition__setting">
-            <input class="stream-edition__setting--checkbox" type="checkbox" id="hideReplies"> <label for="hideReplies" class="noselect">hide
+            <input [(ngModel)]="hideReplies" (change)="settingsChanged()"
+            class="stream-edition__setting--checkbox" type="checkbox" id="hideReplies"> <label for="hideReplies" class="noselect">hide
                 replies</label><br />
         </div>
         <div class="stream-edition__setting">
-            <input class="stream-edition__setting--checkbox" type="checkbox" id="hideBots"> <label for="hideBots" class="noselect">hide
+            <input [(ngModel)]="hideBots" (change)="settingsChanged()"
+            class="stream-edition__setting--checkbox" type="checkbox" id="hideBots" > <label for="hideBots" class="noselect">hide
                 bots</label><br />
         </div>
     </div>
diff --git a/src/app/components/stream/stream-edition/stream-edition.component.ts b/src/app/components/stream/stream-edition/stream-edition.component.ts
index 65f4aad0..16d5b384 100644
--- a/src/app/components/stream/stream-edition/stream-edition.component.ts
+++ b/src/app/components/stream/stream-edition/stream-edition.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons";
 
-import { StreamElement, RemoveStream, MoveStreamUp, MoveStreamDown } from '../../../states/streams.state';
+import { StreamElement, RemoveStream, MoveStreamUp, MoveStreamDown, UpdateStream } from '../../../states/streams.state';
 
 @Component({
     selector: 'app-stream-edition',
@@ -14,11 +14,27 @@ export class StreamEditionComponent implements OnInit {
     faChevronRight = faChevronRight;
     faTimes = faTimes;
 
+    hideBoosts: boolean;
+    hideReplies: boolean;
+    hideBots: boolean;
+
     @Input() streamElement: StreamElement;
 
     constructor(private readonly store: Store) { }
 
     ngOnInit() {
+        this.hideBoosts = this.streamElement.hideBoosts;
+        this.hideReplies = this.streamElement.hideReplies;
+        this.hideBots = this.streamElement.hideBots;
+    }
+
+    settingsChanged(): boolean {
+        this.streamElement.hideBoosts = this.hideBoosts;
+        this.streamElement.hideReplies = this.hideReplies;
+        this.streamElement.hideBots = this.hideBots;
+        
+        this.store.dispatch([new UpdateStream(this.streamElement)]);
+        return false;
     }
 
     moveLeft(): boolean {
diff --git a/src/app/states/streams.state.ts b/src/app/states/streams.state.ts
index accdbd62..23e47a81 100644
--- a/src/app/states/streams.state.ts
+++ b/src/app/states/streams.state.ts
@@ -52,7 +52,6 @@ export class StreamsState {
     UpdateStream(ctx: StateContext<StreamsStateModel>, action: UpdateStream){
         const state = ctx.getState();
         
-        const otherStreams = state.streams.filter(x => x.id !== action.stream.id);
         const updatedStream = state.streams.find(x => x.id === action.stream.id);
 
         updatedStream.hideBoosts = action.stream.hideBoosts;
@@ -60,7 +59,7 @@ export class StreamsState {
         updatedStream.hideBots = action.stream.hideBots;
 
         ctx.patchState({
-            streams: [...otherStreams, updatedStream]
+            streams: [...state.streams]
         });
     }
     @Action(RemoveAllStreams)

From b5f063b1589619c6beb171bd35f6e3f47ee8d0a3 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 22:57:03 -0400
Subject: [PATCH 26/29] added filter effect on streams

---
 .../stream-statuses.component.ts              | 35 +++++++++++++++++++
 src/app/states/streams.state.ts               |  8 ++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/app/components/stream/stream-statuses/stream-statuses.component.ts b/src/app/components/stream/stream-statuses/stream-statuses.component.ts
index 2b9ee803..cb6dca9a 100644
--- a/src/app/components/stream/stream-statuses/stream-statuses.component.ts
+++ b/src/app/components/stream/stream-statuses/stream-statuses.component.ts
@@ -101,6 +101,10 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
                 if (update.type === EventEnum.update) {
                     if (!this.statuses.find(x => x.status.id == update.status.id)) {
                         if (this.streamPositionnedAtTop) {
+                            if(this.isFiltered(update.status)){
+                                return;
+                            }                
+
                             const wrapper = new StatusWrapper(update.status, this.account);
                             this.statuses.unshift(wrapper);
                         } else {
@@ -173,6 +177,10 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         }
 
         for (const status of this.bufferStream) {
+            if(this.isFiltered(status)){
+                continue;
+            }
+
             const wrapper = new StatusWrapper(status, this.account);
             this.statuses.unshift(wrapper);
         }
@@ -190,6 +198,10 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         this.mastodonService.getTimeline(this.account, this._streamElement.type, lastStatus.status.id, null, this.streamingService.nbStatusPerIteration, this._streamElement.tag, this._streamElement.listId)
             .then((status: Status[]) => {
                 for (const s of status) {
+                    if(this.isFiltered(s)){
+                        continue;
+                    }
+
                     const wrapper = new StatusWrapper(s, this.account);
                     this.statuses.push(wrapper);
                 }
@@ -214,6 +226,10 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
             .then((results: Status[]) => {
                 this.isLoading = false;
                 for (const s of results) {
+                    if(this.isFiltered(s)){
+                        continue;
+                    }
+
                     const wrapper = new StatusWrapper(s, this.account);
                     this.statuses.push(wrapper);
                 }
@@ -233,5 +249,24 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
             this.bufferStream.length = 2 * this.streamingService.nbStatusPerIteration;
         }
     }  
+
+    private isFiltered(status: Status): boolean{
+        if(this.streamElement.hideBoosts){
+            if(status.reblog){
+                return true;
+            }
+        }
+        if(this.streamElement.hideBots){
+            if(status.account.bot){
+                return true;
+            }
+        }
+        if(this.streamElement.hideReplies){
+            if(status.in_reply_to_account_id && status.account.id !== status.in_reply_to_account_id){
+                return true;
+            }
+        }
+        return false;
+    }
 }
 
diff --git a/src/app/states/streams.state.ts b/src/app/states/streams.state.ts
index 23e47a81..14723ca7 100644
--- a/src/app/states/streams.state.ts
+++ b/src/app/states/streams.state.ts
@@ -51,7 +51,7 @@ export class StreamsState {
     @Action(UpdateStream)
     UpdateStream(ctx: StateContext<StreamsStateModel>, action: UpdateStream){
         const state = ctx.getState();
-        
+
         const updatedStream = state.streams.find(x => x.id === action.stream.id);
 
         updatedStream.hideBoosts = action.stream.hideBoosts;
@@ -111,9 +111,9 @@ export class StreamsState {
 export class StreamElement {
     public id: string;
 
-    public hideBoosts: boolean;
-    public hideReplies: boolean;
-    public hideBots: boolean;
+    public hideBoosts: boolean = false;
+    public hideReplies: boolean = false;
+    public hideBots: boolean = false;
 
     constructor(
         public type: StreamTypeEnum, 

From dcb929eac353e3ed48bfa0de4f73f2e5c41301ff Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 23 Jun 2019 23:11:16 -0400
Subject: [PATCH 27/29] added stream update on settings changes

---
 .../stream-statuses.component.ts              | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/app/components/stream/stream-statuses/stream-statuses.component.ts b/src/app/components/stream/stream-statuses/stream-statuses.component.ts
index cb6dca9a..28865ea9 100644
--- a/src/app/components/stream/stream-statuses/stream-statuses.component.ts
+++ b/src/app/components/stream/stream-statuses/stream-statuses.component.ts
@@ -18,7 +18,7 @@ import { StatusWrapper } from '../../../models/common.model';
     styleUrls: ['./stream-statuses.component.scss']
 })
 export class StreamStatusesComponent implements OnInit, OnDestroy {
-    isLoading = true; 
+    isLoading = true;
     isThread = false;
     displayError: string;
     hasContentWarnings = false;
@@ -49,6 +49,8 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     @Input() userLocked = true;
 
     private goToTopSubscription: Subscription;
+    private streamsSubscription: Subscription;
+    private streams$: Observable<StreamElement[]>;
 
     constructor(
         private readonly store: Store,
@@ -56,16 +58,23 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         private readonly notificationService: NotificationService,
         private readonly streamingService: StreamingService,
         private readonly mastodonService: MastodonService) {
+
+        this.streams$ = this.store.select(state => state.streamsstatemodel.streams);
     }
 
     ngOnInit() {
         this.goToTopSubscription = this.goToTop.subscribe(() => {
             this.applyGoToTop();
         });
+
+        this.streamsSubscription = this.streams$.subscribe((streams: StreamElement[]) => {
+            this.streamElement = streams.find(x => x.id === this.streamElement.id);
+        });
     }
 
     ngOnDestroy() {
         if (this.goToTopSubscription) this.goToTopSubscription.unsubscribe();
+        if (this.streamsSubscription) this.streamsSubscription.unsubscribe();
     }
 
     refresh(): any {
@@ -101,9 +110,9 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
                 if (update.type === EventEnum.update) {
                     if (!this.statuses.find(x => x.status.id == update.status.id)) {
                         if (this.streamPositionnedAtTop) {
-                            if(this.isFiltered(update.status)){
+                            if (this.isFiltered(update.status)) {
                                 return;
-                            }                
+                            }
 
                             const wrapper = new StatusWrapper(update.status, this.account);
                             this.statuses.unshift(wrapper);
@@ -177,7 +186,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         }
 
         for (const status of this.bufferStream) {
-            if(this.isFiltered(status)){
+            if (this.isFiltered(status)) {
                 continue;
             }
 
@@ -189,7 +198,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     }
 
     private scrolledToBottom() {
-        if(this.isLoading) return;
+        if (this.isLoading) return;
 
         this.isLoading = true;
         this.isProcessingInfiniteScroll = true;
@@ -198,7 +207,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         this.mastodonService.getTimeline(this.account, this._streamElement.type, lastStatus.status.id, null, this.streamingService.nbStatusPerIteration, this._streamElement.tag, this._streamElement.listId)
             .then((status: Status[]) => {
                 for (const s of status) {
-                    if(this.isFiltered(s)){
+                    if (this.isFiltered(s)) {
                         continue;
                     }
 
@@ -226,7 +235,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
             .then((results: Status[]) => {
                 this.isLoading = false;
                 for (const s of results) {
-                    if(this.isFiltered(s)){
+                    if (this.isFiltered(s)) {
                         continue;
                     }
 
@@ -248,21 +257,21 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
             this.bufferWasCleared = true;
             this.bufferStream.length = 2 * this.streamingService.nbStatusPerIteration;
         }
-    }  
+    }
 
-    private isFiltered(status: Status): boolean{
-        if(this.streamElement.hideBoosts){
-            if(status.reblog){
+    private isFiltered(status: Status): boolean {
+        if (this.streamElement.hideBoosts) {
+            if (status.reblog) {
                 return true;
             }
         }
-        if(this.streamElement.hideBots){
-            if(status.account.bot){
+        if (this.streamElement.hideBots) {
+            if (status.account.bot) {
                 return true;
             }
         }
-        if(this.streamElement.hideReplies){
-            if(status.in_reply_to_account_id && status.account.id !== status.in_reply_to_account_id){
+        if (this.streamElement.hideReplies) {
+            if (status.in_reply_to_account_id && status.account.id !== status.in_reply_to_account_id) {
                 return true;
             }
         }

From cbcc1f85e167fc71ff8679dfe15186499f29bba9 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 24 Jun 2019 12:44:40 -0400
Subject: [PATCH 28/29] road to 0.11.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 055beb6e..89524caa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "sengi",
-    "version": "0.10.1",
+    "version": "0.11.0",
     "license": "AGPL-3.0-or-later",
     "main": "main-electron.js",
     "description": "A multi-account desktop client for Mastodon and Pleroma",

From e6f8d9f855cc22cc06064ecc04d717213a21ae59 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 24 Jun 2019 14:22:42 -0400
Subject: [PATCH 29/29] don't update stream if not modified

---
 .../stream-statuses.component.ts                | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/app/components/stream/stream-statuses/stream-statuses.component.ts b/src/app/components/stream/stream-statuses/stream-statuses.component.ts
index 28865ea9..bf839349 100644
--- a/src/app/components/stream/stream-statuses/stream-statuses.component.ts
+++ b/src/app/components/stream/stream-statuses/stream-statuses.component.ts
@@ -31,6 +31,10 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     private bufferStream: Status[] = [];
     private bufferWasCleared: boolean;
 
+    private hideBoosts: boolean;
+    private hideReplies: boolean;
+    private hideBots: boolean;
+
     @Output() browseAccountEvent = new EventEmitter<string>();
     @Output() browseHashtagEvent = new EventEmitter<string>();
     @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
@@ -38,6 +42,11 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     @Input()
     set streamElement(streamElement: StreamElement) {
         this._streamElement = streamElement;
+
+        this.hideBoosts = streamElement.hideBoosts;
+        this.hideBots = streamElement.hideBots;
+        this.hideReplies = streamElement.hideReplies;
+
         this.load(this._streamElement);
     }
     get streamElement(): StreamElement {
@@ -68,7 +77,13 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         });
 
         this.streamsSubscription = this.streams$.subscribe((streams: StreamElement[]) => {
-            this.streamElement = streams.find(x => x.id === this.streamElement.id);
+            let updatedStream = streams.find(x => x.id === this.streamElement.id);
+            
+            if (this.hideBoosts !== updatedStream.hideBoosts
+                || this.hideBots !== updatedStream.hideBots
+                || this.hideReplies !== updatedStream.hideReplies) {
+                this.streamElement = updatedStream;
+            }
         });
     }