Initial Browse UI and initial song search

src/app/app.component.html

@@ -1,2 +1,4 @@
-<app-toolbar></app-toolbar>
-<router-outlet></router-outlet>
+<div style="display: flex; flex-direction: column; height: 100%;">
+  <app-toolbar></app-toolbar>
+  <router-outlet></router-outlet>
+</div>

src/app/app.module.ts

@@ -4,13 +4,21 @@ import { NgModule } from '@angular/core'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { ToolbarComponent } from './components/toolbar/toolbar.component'
-import { BrowseComponent } from './components/browse/browse.component'
+import { BrowseComponent } from './components/browse/browse.component';
+import { SearchBarComponent } from './components/browse/search-bar/search-bar.component';
+import { StatusBarComponent } from './components/browse/status-bar/status-bar.component';
+import { ResultTableComponent } from './components/browse/result-table/result-table.component';
+import { ChartSidebarComponent } from './components/browse/chart-sidebar/chart-sidebar.component'
 
 @NgModule({
   declarations: [
     AppComponent,
     ToolbarComponent,
-    BrowseComponent
+    BrowseComponent,
+    SearchBarComponent,
+    StatusBarComponent,
+    ResultTableComponent,
+    ChartSidebarComponent
   ],
   imports: [
     BrowserModule,

src/app/components/browse/browse.component.html

@@ -1 +1,12 @@
-<p>browse works!</p>
+<app-search-bar (resultsUpdated)="resultTable.results = $event"></app-search-bar>
+<div class="ui celled two column grid">
+  <div class="row">
+    <div class="column twelve wide">
+      <app-result-table #resultTable></app-result-table>
+    </div>
+    <div id="sidebar-column" class="column four wide">
+      <app-chart-sidebar></app-chart-sidebar>
+    </div>
+  </div>
+</div>
+<app-status-bar></app-status-bar>

src/app/components/browse/browse.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: contents;
+}
+
+.ui.celled.grid {
+  flex-grow: 1;
+  margin: 0;
+}
+
+#sidebar-column {
+  display: flex;
+}
+
+.ui.celled.grid > .row > .column {
+  padding: 0;
+}

src/app/components/browse/chart-sidebar/chart-sidebar.component.html

@@ -0,0 +1,31 @@
+<div class="ui fluid card">
+  <div class="ui placeholder">
+    <div class="square image"></div>
+  </div>
+  <div class="ui fluid selection dropdown">
+    <input type="hidden" name="Chart">
+    <i class="dropdown icon"></i>
+    <div class="default text">Chart</div>
+    <div class="menu">
+      <div class="item" data-value="1">Chart 1</div>
+      <div class="item" data-value="0">Chart 2</div>
+    </div>
+  </div>
+  <div id="textPanel" class="content">
+    <span class="header">Funknitium-99</span>
+    <div class="meta">
+      <span>Fearofdark</span>
+    </div>
+  </div>
+  <div class="ui positive buttons">
+    <div class="ui button">Download Latest</div>
+    <div id="versionButton" class="ui floating dropdown icon button">
+      <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item">Version 1</div>
+        <div class="item">Version 2</div>
+        <div class="item">Version 3</div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/browse/chart-sidebar/chart-sidebar.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: contents;
+}
+
+.ui.card {
+  display: flex;
+  flex-direction: column;
+}
+
+#textPanel {
+  flex-grow: 1;
+}
+
+#versionButton {
+  max-width: 30px;
+}

src/app/components/browse/chart-sidebar/chart-sidebar.component.ts

@@ -0,0 +1,15 @@
+import { Component, AfterViewInit } from '@angular/core'
+
+@Component({
+  selector: 'app-chart-sidebar',
+  templateUrl: './chart-sidebar.component.html',
+  styleUrls: ['./chart-sidebar.component.scss']
+})
+export class ChartSidebarComponent implements AfterViewInit {
+  
+  constructor() { }
+  
+  ngAfterViewInit() {
+    $('.ui.dropdown').dropdown()
+  }
+}

src/app/components/browse/result-table/result-table.component.html

@@ -0,0 +1,30 @@
+<table class="ui unstackable selectable single line striped celled table">
+  <thead>
+    <tr>
+      <th class="collapsing">
+        <div class="ui checkbox">
+          <input type="checkbox">
+        </div>
+      </th>
+      <th>Name</th>
+      <th>Artist</th>
+      <th>Album</th>
+      <th>Genre</th>
+      <th>Year</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let result of results">
+      <td>
+        <div class="ui checkbox">
+          <input type="checkbox">
+        </div>
+      </td>
+      <td>{{result.name}}</td>
+      <td>{{result.artist}}</td>
+      <td>{{result.album}}</td>
+      <td>{{result.genre}}</td>
+      <td>{{result.year}}</td>
+    </tr>
+  </tbody>
+</table>

src/app/components/browse/result-table/result-table.component.scss

@@ -0,0 +1,4 @@
+.ui.checkbox {
+  display: block;
+  max-width: 17px;
+}

src/app/components/browse/result-table/result-table.component.ts

@@ -0,0 +1,17 @@
+import { Component, AfterViewInit, Input } from '@angular/core'
+import { SongResult } from 'src/electron/shared/interfaces/search.interface'
+
+@Component({
+  selector: 'app-result-table',
+  templateUrl: './result-table.component.html',
+  styleUrls: ['./result-table.component.scss']
+})
+export class ResultTableComponent implements AfterViewInit {
+  @Input() results: SongResult[]
+
+  constructor() { }
+  
+  ngAfterViewInit() {
+    $('.ui.checkbox').checkbox()
+  }
+}

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

@@ -0,0 +1,26 @@
+<div class="ui bottom attached borderless menu">
+  <div class="item">
+    <!-- TODO: refactor this html into multiple sub-components -->
+    <!-- TODO: add advanced search -->
+    <div class="ui icon input">
+      <input #searchBox type="text" placeholder=" Search..." (keyup.enter)="onSearch(searchBox.value)">
+      <i class="search icon"></i>
+    </div>
+  </div>
+    <div #typeDropdown class="ui item dropdown">
+      Type <i class="dropdown icon"></i>
+      <div class="menu">
+        <!-- TODO: revise what items are displayed -->
+        <a class="item">Any</a>
+        <a class="item">Name</a>
+        <a class="item">Artist</a>
+        <a class="item">Album</a>
+        <a class="item">Genre</a>
+        <a class="item">Year</a>
+        <a class="item">Charter</a>
+      </div>
+  </div>
+  <div class="item right">
+    <button class="ui positive disabled button">Bulk Download</button>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+import { Component, AfterViewInit, Output, EventEmitter } from '@angular/core'
+import { ElectronService } from 'src/app/core/services/electron.service'
+import { SearchType, SongResult } from 'src/electron/shared/interfaces/search.interface'
+
+@Component({
+  selector: 'app-search-bar',
+  templateUrl: './search-bar.component.html',
+  styleUrls: ['./search-bar.component.scss']
+})
+export class SearchBarComponent implements AfterViewInit {
+  @Output() resultsUpdated = new EventEmitter<SongResult[]>()
+
+  constructor(private electronService: ElectronService) { }
+
+  ngAfterViewInit() {
+    $('.ui.dropdown').dropdown()
+  }
+
+  async onSearch(query: string) {
+    const results = await this.electronService.invoke('song-search', { query, type: SearchType.Any })
+
+    this.resultsUpdated.emit(results)
+  }
+}

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

@@ -0,0 +1,14 @@
+<div class="ui bottom borderless menu">
+  <div class="item">42 Results</div>
+  <div class="item">
+    <button class="ui positive button">Download Selected</button>
+  </div>
+
+  <a class="item right">
+    <div #progressBar class="ui progress">
+      <div class="bar">
+        <div class="progress"></div>
+      </div>
+    </div>
+  </a>
+</div>

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

@@ -0,0 +1,4 @@
+.ui.progress {
+  margin: 0;
+  min-width: 200px;
+}

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-status-bar',
+  templateUrl: './status-bar.component.html',
+  styleUrls: ['./status-bar.component.scss']
+})
+export class StatusBarComponent {
+
+  constructor() { }
+
+}

src/app/components/toolbar/toolbar.component.html

@@ -1,4 +1,4 @@
-<div class="ui top fixed menu">
+<div class="ui top menu">
   <a class="item" routerLinkActive="active" routerLink="/browse">Browse</a>
   <a class="item" routerLinkActive="active" routerLink="/library">Library</a>
   <a class="item" routerLinkActive="active" routerLink="/settings">Settings</a>