Fix result table layout

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

@@ -1,10 +1,8 @@
 <td>
-	<div #checkbox class="ui checkbox" (click)="$event.stopPropagation()">
-		<input type="checkbox" />
-	</div>
+	<input #checkAllCheckbox type="checkbox" class="checkbox" (click)="$event.stopPropagation()" [(ngModel)]="selected" />
 </td>
 <td>
-	<span id="chartCount" *ngIf="song.length > 1">{{ song.length }}</span> {{ song[0].name }}
+	<span *ngIf="song.length > 1" class="rounded-sm bg-accent text-accent-content px-1 mr-1 font-bold">{{ song.length }}</span> {{ song[0].name }}
 </td>
 <td>{{ song[0].artist }}</td>
 <td>{{ song[0].album || 'Various' }}</td>

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

@@ -1,10 +0,0 @@
-.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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 
 import { ChartData } from '../../../../../../src-shared/interfaces/search.interface'
 import { SelectionService } from '../../../../core/services/selection.service'
@@ -6,36 +6,24 @@ 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 {
+export class ResultTableRowComponent implements OnInit {
 	@Input() song: ChartData[]
 
-	@ViewChild('checkbox', { static: true }) checkbox: ElementRef
-
 	constructor(private selectionService: SelectionService) { }
 
-	get songID() {
-		return this.song[0].songId ?? this.song[0].chartId
+	ngOnInit() {
+		this.selectionService.selections[this.groupId] = false
 	}
 
-	ngAfterViewInit() {
-		this.selectionService.onSelectionChanged(this.songID, isChecked => {
-			if (isChecked) {
-				// TODO
-				// $(this.checkbox.nativeElement).checkbox('check')
-			} else {
-				// $(this.checkbox.nativeElement).checkbox('uncheck')
-			}
-		})
+	get groupId() {
+		return this.song[0].groupId
+	}
 
-		// $(this.checkbox.nativeElement).checkbox({
-		// 	onChecked: () => {
-		// 		this.selectionService.selectSong(this.songID)
-		// 	},
-		// 	onUnchecked: () => {
-		// 		this.selectionService.deselectSong(this.songID)
-		// 	},
-		// })
+	get selected() {
+		return this.selectionService.selections[this.groupId] ?? false
+	}
+	set selected(value: boolean) {
+		this.selectionService.selections[this.groupId] = value
 	}
 }

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

@@ -1,26 +1,26 @@
-<table
-	id="resultTable"
-	class="ui stackable selectable single sortable fixed line striped compact small table"
-	[class.inverted]="settingsService.theme === 'dark'">
+<table id="resultTable" class="table table-zebra table-pin-rows overflow-y-auto">
 	<!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
 	<!-- TODO: learn semantic themes in order to change the $mobileBreakpoint global variable (better search table adjustment) -->
 	<thead>
 		<!-- NOTE: it would be nice to make this header sticky, but Fomantic-UI doesn't currently support that -->
 		<tr>
 			<th class="collapsing" id="checkboxColumn">
-				<div class="ui checkbox" id="checkbox" #checkboxColumn appCheckbox (checked)="checkAll($event)">
-					<input type="checkbox" />
-				</div>
+				<input #checkAllCheckbox type="checkbox" class="checkbox" (change)="checkAll(checkAllCheckbox.checked)" />
 			</th>
-			<th class="four wide" [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
-			<th class="four wide" [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
-			<th class="four wide" [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
-			<th class="four wide" [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
+			<th [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
+			<th [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
+			<th [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
+			<th [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
 		</tr>
 	</thead>
 	<tbody>
 		@for (song of songs; track song) {
-			<tr app-result-table-row (click)="onRowClicked(song)" [class.active]="activeSong === song" [song]="song"></tr>
+			<tr
+				app-result-table-row
+				(click)="onRowClicked(song)"
+				[class.!bg-neutral]="activeSong === song"
+				[class.!text-neutral-content]="activeSong === song"
+				[song]="song"></tr>
 		}
 	</tbody>
 </table>

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

@@ -1,25 +0,0 @@
-:host {
-  display: contents;
-}
-
-.ui.checkbox {
-  display: block;
-}
-
-#checkboxColumn {
-  width: 34.64px;
-}
-
-#resultTable {
-  border-radius: 0px;
-
-  thead>tr:first-child>th:first-child,
-  thead>tr:first-child>th:last-child {
-    border-radius: 0px;
-  }
-  th {
-    position: sticky;
-    top: 0;
-    z-index:1;
-  }
-}

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
+import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
 
 import Comparators from 'comparators'
 import { SettingsService } from 'src-angular/app/core/services/settings.service'
@@ -12,9 +12,9 @@ import { ResultTableRowComponent } from './result-table-row/result-table-row.com
 @Component({
 	selector: 'app-result-table',
 	templateUrl: './result-table.component.html',
-	styleUrls: ['./result-table.component.scss'],
 })
 export class ResultTableComponent implements OnInit {
+	@HostBinding('class.contents') contents = true
 
 	@Output() rowClicked = new EventEmitter<ChartData[]>()
 
@@ -32,10 +32,6 @@ export class ResultTableComponent implements OnInit {
 	) { }
 
 	ngOnInit() {
-		this.selectionService.onSelectAllChanged(selected => {
-			this.checkboxColumn.check(selected)
-		})
-
 		this.searchService.searchUpdated.subscribe(() => {
 			this.activeSong = null
 			this.updateSort()
@@ -76,6 +72,7 @@ export class ResultTableComponent implements OnInit {
 	 * Called when the user checks the `checkboxColumn`.
 	 */
 	checkAll(isChecked: boolean) {
+		console.log(isChecked)
 		if (isChecked) {
 			this.selectionService.selectAll()
 		} else {