Search bar refactored with Nodes and Channels

frontend/src/app/components/search-form/search-results/search-results.component.html

@@ -0,0 +1,26 @@
+<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.addresses.length && !results.nodes.length && !results.channels.length">
+  <ng-template [ngIf]="results.addresses.length">
+    <div class="card-title">Bitcoin Addresses</div>
+    <ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
+      <button (click)="clickItem(i)" [class.active]="i === activeIdx" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="searchTerm"></ngb-highlight>
+      </button>
+    </ng-template>
+  </ng-template>
+  <ng-template [ngIf]="results.nodes.length">
+    <div class="card-title">Lightning Nodes</div>
+    <ng-template ngFor [ngForOf]="results.nodes" let-node let-i="index">
+      <button (click)="clickItem(results.addresses.length + i)" [class.active]="results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="node.alias" [term]="searchTerm"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
+      </button>
+    </ng-template>
+  </ng-template>
+  <ng-template [ngIf]="results.channels.length">
+    <div class="card-title">Lightning Channels</div>
+    <ng-template [class.active]="results.addresses.length + results.nodes.length + i === activeIdx" ngFor [ngForOf]="results.channels" let-channel let-i="index">
+      <button (click)="clickItem(results.addresses.length + results.nodes.length + i)" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="channel.short_id" [term]="searchTerm"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
+      </button>
+    </ng-template>
+  </ng-template>
+</div>

frontend/src/app/components/search-form/search-results/search-results.component.scss

@@ -0,0 +1,16 @@
+.card-title {
+  color: #4a68b9;
+  font-size: 10px;
+  margin-bottom: 4px;
+  font-size: 1rem;
+
+  margin-left: 10px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 42px;
+  left: 0px;
+  box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
+  width: 100%;
+}

frontend/src/app/components/search-form/search-results/search-results.component.ts

@@ -0,0 +1,68 @@
+import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-search-results',
+  templateUrl: './search-results.component.html',
+  styleUrls: ['./search-results.component.scss'],
+})
+export class SearchResultsComponent implements OnChanges {
+  @Input() results: any = {};
+  @Input() searchTerm = '';
+  @Output() selectedResult = new EventEmitter();
+
+  isMobile = (window.innerWidth <= 767.98);
+  resultsFlattened = [];
+  activeIdx = 0;
+  focusFirst = true;
+
+  constructor() { }
+
+  ngOnChanges() {
+    this.activeIdx = 0;
+    if (this.results) {
+      this.resultsFlattened = [...this.results.addresses, ...this.results.nodes, ...this.results.channels];
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.next();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.prev();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        this.selectedResult.emit(this.resultsFlattened[this.activeIdx]);
+        this.results = null;
+        break;
+    }
+  }
+
+  clickItem(id: number) {
+    this.selectedResult.emit(this.resultsFlattened[id]);
+    this.results = null;
+  }
+
+  next() {
+    if (this.activeIdx === this.resultsFlattened.length - 1) {
+      this.activeIdx = this.focusFirst ? (this.activeIdx + 1) % this.resultsFlattened.length : -1;
+    } else {
+      this.activeIdx++;
+    }
+  }
+
+  prev() {
+    if (this.activeIdx < 0) {
+      this.activeIdx = this.resultsFlattened.length - 1;
+    } else if (this.activeIdx === 0) {
+      this.activeIdx = this.focusFirst ? this.resultsFlattened.length - 1 : -1;
+    } else {
+      this.activeIdx--;
+    }
+  }
+
+}