Restructure

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

@@ -0,0 +1,15 @@
+<div class="ui top menu">
+	<a class="item" routerLinkActive="active" routerLink="/browse">Browse</a>
+	<!-- TODO <a class="item" routerLinkActive="active" routerLink="/library">Library</a> -->
+	<a class="item" routerLinkActive="active" routerLink="/settings">
+		<i *ngIf="updateAvailable" class="teal small circle icon"></i>
+		<i *ngIf="updateAvailable === null" class="small yellow exclamation triangle icon"></i>
+		Settings
+	</a>
+
+	<div class="right menu">
+		<a class="item traffic-light" (click)="minimize()"><i class="minus icon"></i></a>
+		<a class="item traffic-light" (click)="toggleMaximized()"><i class="icon window" [ngClass]="isMaximized ? 'restore' : 'maximize'"></i></a>
+		<a class="item traffic-light close" (click)="close()"><i class="x icon"></i></a>
+	</div>
+</div>

src-angular/app/components/toolbar/toolbar.component.scss

@@ -0,0 +1,27 @@
+.menu {
+  -webkit-app-region: drag;
+  z-index: 9000 !important;
+  border: 0px;
+  border-radius: 0px;
+
+  .item,
+  .item * {
+    border-radius: 0px;
+    -webkit-app-region: no-drag;
+    cursor: default !important;
+  }
+}
+
+.traffic-light {
+  &:before {
+    display: none !important;
+  }
+
+  i {
+    margin: 0 !important;
+  }
+}
+
+.close:hover {
+  background: rgba(255, 0, 0, .15) !important;
+}

src-angular/app/components/toolbar/toolbar.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core'
+
+import { ElectronService } from '../../core/services/electron.service'
+
+@Component({
+	selector: 'app-toolbar',
+	templateUrl: './toolbar.component.html',
+	styleUrls: ['./toolbar.component.scss'],
+})
+export class ToolbarComponent implements OnInit {
+
+	isMaximized: boolean
+	updateAvailable = false
+
+	constructor(private electronService: ElectronService, private ref: ChangeDetectorRef) { }
+
+	async ngOnInit() {
+		this.isMaximized = this.electronService.currentWindow.isMaximized()
+		this.electronService.currentWindow.on('unmaximize', () => {
+			this.isMaximized = false
+			this.ref.detectChanges()
+		})
+		this.electronService.currentWindow.on('maximize', () => {
+			this.isMaximized = true
+			this.ref.detectChanges()
+		})
+
+		this.electronService.receiveIPC('update-available', result => {
+			this.updateAvailable = result != null
+			this.ref.detectChanges()
+		})
+		this.electronService.receiveIPC('update-error', () => {
+			this.updateAvailable = null
+			this.ref.detectChanges()
+		})
+		this.updateAvailable = await this.electronService.invoke('get-update-available', undefined)
+		this.ref.detectChanges()
+	}
+
+	minimize() {
+		this.electronService.currentWindow.minimize()
+	}
+
+	toggleMaximized() {
+		if (this.isMaximized) {
+			this.electronService.currentWindow.restore()
+		} else {
+			this.electronService.currentWindow.maximize()
+		}
+		this.isMaximized = !this.isMaximized
+	}
+
+	close() {
+		this.electronService.quit()
+	}
+}