wirering search panel to overlay

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

@@ -8,6 +8,6 @@
     <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'"></app-search>
+    <app-search *ngIf="openPanel === 'search'" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-search>
     <app-settings *ngIf="openPanel === 'settings'"></app-settings>
 </div>

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

@@ -1,9 +1,11 @@
 @import "variables";
 @import "mixins";
 
+$floating-column-size: 330px;
+
 .floating-column {
     width: calc(100%);
-    width: 330px;
+    width: $floating-column-size;
     
     background-color: $color-secondary;
     overflow: hidden;
@@ -19,19 +21,10 @@
 }
 
 .stream-overlay {
-    // margin-left: 5px;
-    // z-index: 50;
-    // opacity: 0.5;
-
     position: absolute;
-    // left: 10px;
-
     z-index: 50;
-    // width: $stream-column-width;
-    width: 330px;
+    width: $floating-column-size;
     height: calc(100%);
-    
-    outline: 1px 
 }
 
 .close-button {

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

@@ -9,6 +9,9 @@ import { AccountWrapper } from '../../models/account.models';
 })
 export class FloatingColumnComponent implements OnInit {
     overlayActive: boolean;
+    overlayAccountToBrowse: string;
+    overlayHashtagToBrowse: string;
+
     userAccountUsed: AccountWrapper;
 
     openPanel: string;
@@ -49,6 +52,23 @@ export class FloatingColumnComponent implements OnInit {
         return false;
     }
 
+    browseAccount(account: string): void {
+        this.overlayAccountToBrowse = account;
+        this.overlayHashtagToBrowse = null;
+        this.overlayActive = true;        
+    }
+
+    browseHashtag(hashtag: string): void {
+        this.overlayAccountToBrowse = null;
+        this.overlayHashtagToBrowse = hashtag;
+        this.overlayActive = true;  
+    }
+
+    browseThread(thread: string): void {
+        console.warn('browseThread');
+        console.warn(thread);
+    }
+
     closeOverlay(): boolean {
         this.overlayActive = false;
         return false;

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

@@ -11,17 +11,17 @@
 
     <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">
+        <a href *ngFor="let account of accounts" class="account" title="open account" 
+            (click)="selectAccount(account.acct)">
             <img src="{{account.avatar}}" class="account__avatar" />
             <div class="account__name">{{ account.username }}</div>
             <div class="account__fullhandle">@{{ account.acct }}</div>
-
         </a>
     </div>
 
     <div *ngIf="hashtags.length > 0" class="search-results">
         <h3 class="search-results__title">Hashtags</h3>
-        <a (click)="addHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="add hashtag column">
+        <a (click)="selectHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="add hashtag column">
             #{{ hashtag }}
         </a>
     </div>   

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Store } from '@ngxs/store';
 
 import { MastodonService } from '../../../services/mastodon.service';
@@ -23,6 +23,10 @@ export class SearchComponent implements OnInit {
 
     isLoading: boolean;
 
+    @Output() browseAccount = new EventEmitter<string>();
+    @Output() browseHashtag = new EventEmitter<string>();
+    @Output() browseThread = new EventEmitter<string>();
+
     constructor(
         private readonly store: Store,
         private readonly toolsService: ToolsService,
@@ -37,9 +41,14 @@ export class SearchComponent implements OnInit {
         return false;
     }
 
-    addHashtag(hashtag: string): boolean {
-        console.warn(hashtag);
+    selectHashtag(hashtag: string): boolean {
+        if (hashtag) {
+            this.browseHashtag.next(hashtag);
+        }
+        return false;
+    }
 
+    addHashtag(hashtag: string): boolean {
         if (hashtag) {
             const newStream = new StreamElement(StreamTypeEnum.tag, `#${hashtag}`, this.lastAccountUsed.id, hashtag, null);
             this.store.dispatch([new AddStream(newStream)]);
@@ -48,6 +57,14 @@ export class SearchComponent implements OnInit {
         return false;
     }
 
+    selectAccount(accountName: string): boolean {
+        console.warn(accountName);
+        if (accountName) {
+            this.browseAccount.next(accountName);
+        }
+        return false;
+    }
+
     private lastAccountUsed: AccountInfo;
     private search(data: string) {
         this.accounts.length = 0;

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

@@ -58,7 +58,6 @@ export class StreamComponent implements OnInit {
     }
 
     browseHashtag(hashtag: string): void {
-        console.warn(`browseHashtag ${hashtag}`);
         this.overlayAccountToBrowse = null;
         this.overlayHashtagToBrowse = hashtag;
         this.overlayActive = true;