Restructure

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

@@ -0,0 +1,12 @@
+<td>
+	<div #checkbox class="ui checkbox" (click)="$event.stopPropagation()">
+		<input type="checkbox" />
+	</div>
+</td>
+<td>
+	<span id="chartCount" *ngIf="result.chartCount > 1">{{ result.chartCount }}</span
+	>{{ result.name }}
+</td>
+<td>{{ result.artist }}</td>
+<td>{{ result.album || 'Various' }}</td>
+<td>{{ result.genre || 'Various' }}</td>

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

@@ -0,0 +1,10 @@
+.ui.checkbox {
+  display: block;
+}
+
+#chartCount {
+  background-color: lightgray;
+  border-radius: 3px;
+  padding: 1px 4px 2px 4px;
+  margin-right: 3px;
+}

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

@@ -0,0 +1,40 @@
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core'
+
+import { SongResult } from '../../../../../electron/shared/interfaces/search.interface'
+import { SelectionService } from '../../../../core/services/selection.service'
+
+@Component({
+	selector: 'tr[app-result-table-row]',
+	templateUrl: './result-table-row.component.html',
+	styleUrls: ['./result-table-row.component.scss'],
+})
+export class ResultTableRowComponent implements AfterViewInit {
+	@Input() result: SongResult
+
+	@ViewChild('checkbox', { static: true }) checkbox: ElementRef
+
+	constructor(private selectionService: SelectionService) { }
+
+	get songID() {
+		return this.result.id
+	}
+
+	ngAfterViewInit() {
+		this.selectionService.onSelectionChanged(this.songID, isChecked => {
+			if (isChecked) {
+				$(this.checkbox.nativeElement).checkbox('check')
+			} else {
+				$(this.checkbox.nativeElement).checkbox('uncheck')
+			}
+		})
+
+		$(this.checkbox.nativeElement).checkbox({
+			onChecked: () => {
+				this.selectionService.selectSong(this.songID)
+			},
+			onUnchecked: () => {
+				this.selectionService.deselectSong(this.songID)
+			},
+		})
+	}
+}