starting integration of thread browsing

src/app/components/floating-column/floating-column.component.html

@@ -1,5 +1,7 @@
 <div class="floating-column">
-    <app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()" [browseAccount]="overlayAccountToBrowse" [browseHashtag]="overlayHashtagToBrowse"></app-stream-overlay>
+    <app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()" 
+        [browseAccountData]="overlayAccountToBrowse" 
+        [browseHashtagData]="overlayHashtagToBrowse"></app-stream-overlay>
 
     <div class="floating-column__header">
         <a class="close-button" href (click)="closePanel()" title="close">x</a>
@@ -8,6 +10,8 @@
     <app-manage-account *ngIf="openPanel === 'manageAccount'" [account]="userAccountUsed"></app-manage-account>
     <app-add-new-status *ngIf="openPanel === 'createNewStatus'"></app-add-new-status>
     <app-add-new-account *ngIf="openPanel === 'addNewAccount'"></app-add-new-account>
-    <app-search *ngIf="openPanel === 'search'" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-search>
+    <app-search *ngIf="openPanel === 'search'" 
+        (browseAccountEvent)="browseAccount($event)" 
+        (browseHashtagEvent)="browseHashtag($event)"></app-search>
     <app-settings *ngIf="openPanel === 'settings'"></app-settings>
 </div>

src/app/components/floating-column/search/search.component.html

@@ -12,7 +12,7 @@
     <div *ngIf="accounts.length > 0" class="search-results">
         <h3 class="search-results__title">Accounts</h3>
         <a href *ngFor="let account of accounts" class="account" title="open account" 
-            (click)="selectAccount(account.acct)">
+            (click)="browseAccount(account.acct)">
             <img src="{{account.avatar}}" class="account__avatar" />
             <div class="account__name">{{ account.username }}</div>
             <div class="account__fullhandle">@{{ account.acct }}</div>
@@ -21,7 +21,7 @@
 
     <div *ngIf="hashtags.length > 0" class="search-results">
         <h3 class="search-results__title">Hashtags</h3>
-        <a (click)="selectHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="browse hashtag">
+        <a (click)="browseHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="browse hashtag">
             #{{ hashtag }}
         </a>
     </div>   
@@ -30,7 +30,9 @@
         <h3 class="search-results__title">Statuses</h3>
 
         <div class="search-results__status" *ngFor="let statusWrapper of statuses">
-            <app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-status>
+            <app-status [statusWrapper]="statusWrapper" 
+                (browseAccountEvent)="browseAccount($event)" 
+                (browseHashtagEvent)="browseHashtag($event)"></app-status>
         </div>
     </div>
 </div>

src/app/components/floating-column/search/search.component.ts

@@ -23,12 +23,11 @@ export class SearchComponent implements OnInit {
 
     isLoading: boolean;
 
-    @Output() browseAccount = new EventEmitter<string>();
+    @Output() browseAccountEvent = new EventEmitter<string>();
-    @Output() browseHashtag = new EventEmitter<string>();
+    @Output() browseHashtagEvent = new EventEmitter<string>();
-    @Output() browseThread = new EventEmitter<string>();
+    @Output() browseThreadEvent = new EventEmitter<string>();
 
     constructor(
-        private readonly store: Store,
         private readonly toolsService: ToolsService,
         private readonly mastodonService: MastodonService) { }
 
@@ -41,9 +40,9 @@ export class SearchComponent implements OnInit {
         return false;
     }
 
-    selectHashtag(hashtag: string): boolean {
+    browseHashtag(hashtag: string): boolean {
         if (hashtag) {
-            this.browseHashtag.next(hashtag);
+            this.browseHashtagEvent.next(hashtag);
         }
         return false;
     }
@@ -57,10 +56,10 @@ export class SearchComponent implements OnInit {
     //     return false;
     // }
 
-    selectAccount(accountName: string): boolean {
+    browseAccount(accountName: string): boolean {
         console.warn(accountName);
         if (accountName) {
-            this.browseAccount.next(accountName);
+            this.browseAccountEvent.next(accountName);
         }
         return false;
     }
@@ -97,9 +96,4 @@ export class SearchComponent implements OnInit {
                 .then(() => { this.isLoading = false; });
         }
     }
-
-    private getRegisteredAccounts(): AccountInfo[] {
-        var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
-        return regAccounts;
-    }
 }

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

@@ -6,6 +6,9 @@
             <button class="btn-custom-secondary hashtag-header__add-column" (click)="addColumn($event)" title="add column to board">add column</button>
         </a>
     </div>
-    <app-stream-statuses class="hashtag-stream" *ngIf="hashtagElement" [streamElement]="hashtagElement" [goToTop]="goToTopSubject.asObservable()"
+    <app-stream-statuses class="hashtag-stream" *ngIf="hashtagElement" 
-        (browseAccount)="selectAccount($event)" (browseHashtag)="selectHashtag($event)"></app-stream-statuses>
+        [streamElement]="hashtagElement" 
+        [goToTop]="goToTopSubject.asObservable()"
+        (browseAccountEvent)="browseAccount($event)" 
+        (browseHashtagEvent)="browseHashtag($event)"></app-stream-statuses>
 </div>

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

@@ -10,8 +10,8 @@ import { StreamElement, StreamTypeEnum, AddStream } from '../../../states/stream
     styleUrls: ['./hashtag.component.scss']
 })
 export class HashtagComponent implements OnInit {
-    @Output() browseAccount = new EventEmitter<string>();
+    @Output() browseAccountEvent = new EventEmitter<string>();
-    @Output() browseHashtag = new EventEmitter<string>();
+    @Output() browseHashtagEvent = new EventEmitter<string>();
 
     @Input() hashtagElement: StreamElement;
 
@@ -38,11 +38,11 @@ export class HashtagComponent implements OnInit {
         return false;
     }
 
-    selectAccount(account: string) {
+    browseAccount(account: string) {
-        this.browseAccount.next(account);
+        this.browseAccountEvent.next(account);
     }
 
-    selectHashtag(hashtag: string) {
+    browseHashtag(hashtag: string) {
-        this.browseHashtag.next(hashtag);
+        this.browseHashtagEvent.next(hashtag);
     }
 }

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

@@ -13,9 +13,9 @@ export class StatusComponent implements OnInit {
     hasAttachments: boolean;
     replyingToStatus: boolean;
 
-    @Output() browseAccount = new EventEmitter<string>();
+    @Output() browseAccountEvent = new EventEmitter<string>();
-    @Output() browseHashtag = new EventEmitter<string>();
+    @Output() browseHashtagEvent = new EventEmitter<string>();
-    @Output() browseThread = new EventEmitter<string>();
+    @Output() browseThreadEvent = new EventEmitter<string>();
 
     private _statusWrapper: StatusWrapper;
     status: Status;
@@ -53,7 +53,7 @@ export class StatusComponent implements OnInit {
         if(!accountName.includes('@'))
         accountName += `@${account.url.replace('https://', '').split('/')[0]}`;
 
-        this.browseAccount.next(accountName);
+        this.browseAccountEvent.next(accountName);
         return false;
     }
 
@@ -69,16 +69,14 @@ export class StatusComponent implements OnInit {
     }
 
     accountSelected(accountName: string): void {
-        console.warn(`status comp: accountSelected ${accountName}`);
+        this.browseAccountEvent.next(accountName);
-        this.browseAccount.next(accountName);
     }
 
     hashtagSelected(hashtag: string): void {
-        console.warn(`status comp: hashtagSelected ${hashtag}`);
+        this.browseHashtagEvent.next(hashtag);
-        this.browseHashtag.next(hashtag);
     }
 
     textSelected(): void {
-        console.warn(`status comp: textSelected`);
+        this.browseThreadEvent.next(this._statusWrapper.status.uri);
     }
 }

src/app/components/stream/stream-overlay/stream-overlay.component.html

@@ -5,11 +5,12 @@
         <a href class="overlay-refresh" *ngIf="canRefresh" (click)="refresh()">REFRESH</a>      
         <a href class="overlay-next" *ngIf="canGoForward" (click)="next()">NEXT</a>
     </div>
-    <!-- <div class="stream-overlay__title">
-        Account
-    </div> -->
     
-    <app-user-profile *ngIf="accountName" [currentAccount]="accountName" (browseAccount)="accountSelected($event)" (browseHashtag)="hashtagSelected($event)"></app-user-profile>
+    <app-user-profile *ngIf="accountName" [currentAccount]="accountName" 
-    <app-hashtag *ngIf="hashtagElement" [hashtagElement]="hashtagElement" (browseAccount)="accountSelected($event)" (browseHashtag)="hashtagSelected($event)"></app-hashtag>
+        (browseAccountEvent)="browseAccount($event)" 
-    <app-thread  *ngIf="browseThread"></app-thread>
+        (browseHashtagEvent)="browseHashtag($event)"></app-user-profile>
+    <app-hashtag *ngIf="hashtagElement" [hashtagElement]="hashtagElement" 
+        (browseAccountEvent)="browseAccount($event)" 
+        (browseHashtagEvent)="browseHashtag($event)"></app-hashtag>
+    <app-thread *ngIf="browseThread"></app-thread>
 </div>

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

@@ -10,6 +10,7 @@ import { StreamElement, StreamTypeEnum } from '../../../states/streams.state';
     styleUrls: ['./stream-overlay.component.scss']
 })
 export class StreamOverlayComponent implements OnInit {
+   
     private previousElements: OverlayBrowsing[] = [];
     private nextElements: OverlayBrowsing[] = [];
     private currentElement: OverlayBrowsing;
@@ -24,21 +25,20 @@ export class StreamOverlayComponent implements OnInit {
 
     @Output() closeOverlay = new EventEmitter();
 
-    @Input('browseAccount')
+    @Input('browseAccountData')
-    set browseAccount(accountName: string) {
+    set browseAccountData(accountName: string) {
-        this.accountSelected(accountName);
+        this.browseAccount(accountName);
         // this.accountName = accountName;
     }
 
-    @Input('browseThread')
+    @Input('browseThreadData')
-    set browseThread(thread: string) {
+    set browseThreadData(statusUri: string) {
-        // this.thread = thread;
+        this.browseThread(statusUri);
     }
 
-    @Input('browseHashtag')
+    @Input('browseHashtagData')
-    set browseHashtag(hashtag: string) {
+    set browseHashtagData(hashtag: string) {
-        this.hashtagSelected(hashtag);
+        this.browseHashtag(hashtag);
-        // this.hashtag = hashtag;
     }
 
     constructor(private toolsService: ToolsService) { }
@@ -93,7 +93,7 @@ export class StreamOverlayComponent implements OnInit {
         return false;
     }
 
-    accountSelected(accountName: string): void {
+    browseAccount(accountName: string): void {
         if(!accountName) return;
 
         console.log('accountSelected');
@@ -106,7 +106,7 @@ export class StreamOverlayComponent implements OnInit {
         this.canGoForward = false;
     }
 
-    hashtagSelected(hashtag: string): void {
+    browseHashtag(hashtag: string): void {
         if(!hashtag) return;
 
         console.log('hashtagSelected');
@@ -122,6 +122,20 @@ export class StreamOverlayComponent implements OnInit {
         this.canGoForward = false;
     }
 
+    browseThread(statusUri: string): any {
+        if(!statusUri) return;
+
+        console.log('thread selected')
+        this.nextElements.length = 0;
+        if (this.currentElement) {
+            this.previousElements.push(this.currentElement);
+        }
+
+        const newElement = new OverlayBrowsing(null, null, statusUri);
+        this.loadElement(newElement);
+        this.canGoForward = false;
+    }
+
     private loadElement(element: OverlayBrowsing) {
         this.currentElement = element;
 

src/app/components/stream/stream-statuses/stream-statuses.component.html

@@ -1,6 +1,6 @@
 <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
     <!-- data-simplebar  -->
     <div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
-        <app-status [statusWrapper]="statusWrapper" (browseAccount)="accountSelected($event)" (browseHashtag)="hashtagSelected($event)"></app-status>
+        <app-status [statusWrapper]="statusWrapper" (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-status>
     </div>
 </div> 

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

@@ -25,9 +25,9 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     private bufferStream: Status[] = [];
     private bufferWasCleared: boolean;
 
-    @Output() browseAccount = new EventEmitter<string>();
+    @Output() browseAccountEvent = new EventEmitter<string>();
-    @Output() browseHashtag = new EventEmitter<string>();
+    @Output() browseHashtagEvent = new EventEmitter<string>();
-    @Output() browseThread = new EventEmitter<string>();
+    @Output() browseThreadEvent = new EventEmitter<string>();
 
     @Input()
     set streamElement(streamElement: StreamElement) {
@@ -125,14 +125,16 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         }
     }
 
-    accountSelected(accountName: string): void {
+    browseAccount(accountName: string): void {
-        console.warn(`status comp: accountSelected ${accountName}`);
+        this.browseAccountEvent.next(accountName);
-        this.browseAccount.next(accountName);
     }
 
-    hashtagSelected(hashtag: string): void {
+    browseHashtag(hashtag: string): void {
-        console.warn(`status comp: hashtagSelected ${hashtag}`);
+        this.browseHashtagEvent.next(hashtag);
-        this.browseHashtag.next(hashtag);
+    }
+
+    browseThread(statusUri: string): void {
+        this.browseThreadEvent.next(statusUri);
     }
 
     textSelected(): void {

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

@@ -2,15 +2,16 @@
 
     <app-stream-overlay class="stream-overlay" *ngIf="overlayActive" 
         (closeOverlay)="closeOverlay()" 
-        [browseAccount]="overlayAccountToBrowse"
+        [browseAccountData]="overlayAccountToBrowse"
-        [browseHashtag]="overlayHashtagToBrowse"></app-stream-overlay>
+        [browseHashtagData]="overlayHashtagToBrowse"
+        [browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
 
     <div class="stream-column__stream-header">
         <a href title="return to top" (click)="goToTop()">
             <h1>{{ streamElement.name.toUpperCase() }}</h1>
         </a>
     </div>
-    <app-stream-statuses class="stream-statuses" [streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-stream-statuses>
+    <app-stream-statuses class="stream-statuses" [streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()" (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-stream-statuses>
     <!-- <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
         <div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
             <app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-status>

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

@@ -14,6 +14,7 @@ export class StreamComponent implements OnInit {
     overlayActive: boolean;
     overlayAccountToBrowse: string;
     overlayHashtagToBrowse: string;
+    overlayThreadToBrowse: string;
 
     goToTopSubject: Subject<void> = new Subject<void>();
 
@@ -32,22 +33,28 @@ export class StreamComponent implements OnInit {
     browseAccount(account: string): void {
         this.overlayAccountToBrowse = account;
         this.overlayHashtagToBrowse = null;
+        this.overlayThreadToBrowse = null;
         this.overlayActive = true;
     }
 
     browseHashtag(hashtag: string): void {
         this.overlayAccountToBrowse = null;
         this.overlayHashtagToBrowse = hashtag;
+        this.overlayThreadToBrowse = null;
         this.overlayActive = true;
     }
 
-    browseThread(thread: string): void {
+    browseThread(statusUri: string): void {
-        console.warn('browseThread');
+        this.overlayAccountToBrowse = null;
-        console.warn(thread);
+        this.overlayHashtagToBrowse = null;
+        this.overlayThreadToBrowse = statusUri;
+        this.overlayActive = true;
     }
 
     closeOverlay(): void {
         this.overlayAccountToBrowse = null;
+        this.overlayHashtagToBrowse = null;
+        this.overlayThreadToBrowse = null;
         this.overlayActive = false;
     }
 }

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

@@ -13,7 +13,8 @@
     <div class="profile-sub-header flexcroll">
         <div *ngIf="account && hasNote" class="profile-description">
             <app-databinded-text class="status__content" [textIsSelectable]="false" [text]="account.note"
-                (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"></app-databinded-text>
+                (accountSelected)="browseAccount($event)" 
+                (hashtagSelected)="browseHashtag($event)"></app-databinded-text>
             <!-- <p innerHTML="{{account.note}}"></p> -->
         </div>
         <div class="profile-statuses">
@@ -24,7 +25,9 @@
             </div>
 
             <div *ngFor="let statusWrapper of statuses">
-                <app-status [statusWrapper]="statusWrapper" (browseAccount)="accountSelected($event)"></app-status> 
+                <app-status [statusWrapper]="statusWrapper" 
+                    (browseHashtagEvent)="browseHashtag($event)"
+                    (browseAccountEvent)="browseAccount($event)"></app-status> 
             </div>
         </div>
     </div>

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

@@ -21,8 +21,8 @@ export class UserProfileComponent implements OnInit {
 
     private accountName: string;
 
-    @Output() browseAccount = new EventEmitter<string>();
+    @Output() browseAccountEvent = new EventEmitter<string>();
-    @Output() browseHashtag = new EventEmitter<string>();
+    @Output() browseHashtagEvent = new EventEmitter<string>();
 
     @Input('currentAccount')
     //set currentAccount(account: Account) {
@@ -51,12 +51,12 @@ export class UserProfileComponent implements OnInit {
     ngOnInit() {
     }
 
-    accountSelected(accountName: string): void {
+    browseAccount(accountName: string): void {
-        this.browseAccount.next(accountName);
+        this.browseAccountEvent.next(accountName);
     }
 
-    hashtagSelected(hashtag: string): void {
+    browseHashtag(hashtag: string): void {
-        this.browseHashtag.next(hashtag);
+        this.browseHashtagEvent.next(hashtag);
     }
 
     private loadAccount(accountName: string): Promise<Account> {