Added database connection error handling

src/app/components/browse/search-bar/search-bar.component.html

@@ -1,9 +1,10 @@
 <div class="ui bottom attached borderless menu">
   <div class="item">
     <!-- TODO: add advanced search -->
-    <div class="ui icon input" [class.loading]="searchService.isLoading()">
+    <div class="ui icon input" [class.loading]="isLoading()">
       <input #searchBox type="text" placeholder=" Search..." (keyup.enter)="onSearch(searchBox.value)">
-      <i class="search icon"></i>
+      <i id="searchIcon" class="link icon" [ngClass]="isError ? 'red exclamation triangle' : 'search'"
+        data-content="Failed to connect to the Bridge database" data-position="bottom right"></i>
     </div>
   </div>
   <!-- <div #typeDropdown class="ui item dropdown">

src/app/components/browse/search-bar/search-bar.component.scss

@@ -0,0 +1,3 @@
+#searchIcon {
+  cursor: default;
+}

src/app/components/browse/search-bar/search-bar.component.ts

@@ -8,13 +8,25 @@ import { SearchService } from 'src/app/core/services/search.service'
 })
 export class SearchBarComponent implements AfterViewInit {
 
+  isError = false
+
   constructor(public searchService: SearchService) { }
 
   ngAfterViewInit() {
     $('.ui.dropdown').dropdown()
+    $('#searchIcon').popup({
+      onShow: () => this.isError // Only show the popup if there is an error
+    })
+    this.searchService.onSearchError(() => {
+      this.isError = true
+    })
   }
 
   onSearch(query: string) {
     this.searchService.newSearch(query)
   }
+
+  isLoading() {
+    return this.searchService.isLoading()
+  }
 }

src/app/core/services/search.service.ts

@@ -21,7 +21,12 @@ export class SearchService {
     if (this.awaitingResults) { return }
     this.awaitingResults = true
     this.currentQuery = { query, type: SearchType.Any, offset: 0, length: 50 + 1 } // TODO: make length a setting
-    this.results = this.trimLastChart(await this.electronService.invoke('song-search', this.currentQuery))
+    try {
+      this.results = this.trimLastChart(await this.electronService.invoke('song-search', this.currentQuery))
+    } catch (err) {
+      this.results = []
+      this.resultsChangedEmitter.error(undefined)
+    }
     this.awaitingResults = false
 
     this.resultsChangedEmitter.emit(this.results)
@@ -49,6 +54,14 @@ export class SearchService {
     this.newResultsEmitter.subscribe(callback)
   }
 
+  /**
+   * Event emitted when a search fails.
+   * (emitted before `onSearchChanged`)
+   */
+  onSearchError(callback: () => void) {
+    this.resultsChangedEmitter.subscribe(() => { /** Do nothing */ }, callback)
+  }
+
   get resultCount() {
     return this.results.length
   }