Improve download UI

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

@@ -137,7 +137,7 @@
 									{{ version.md5.substring(0, 7) }}
 									<div class="tooltip tooltip-accent" data-tip="Copy full hash">
 										<button class="btn btn-circle btn-ghost btn-xs" (click)="copyHash(version.md5)">
-											<i class="bi bi-copy text-sx"></i>
+											<i class="bi bi-copy text-xs"></i>
 										</button>
 									</div>
 								</div>
@@ -147,7 +147,7 @@
 									{{ version.chartMd5.substring(0, 7) }}
 									<div class="tooltip tooltip-accent" data-tip="Copy full hash">
 										<button class="btn btn-circle btn-ghost btn-xs" (click)="copyHash(version.chartMd5)">
-											<i class="bi bi-copy text-sx"></i>
+											<i class="bi bi-copy text-xs"></i>
 										</button>
 									</div>
 								</div>

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

@@ -131,6 +131,20 @@
 				<i class="bi bi-three-dots text-2xl px-1 text-neutral-content"></i>
 				<app-chart-sidebar-menu [chartVersions]="charts![0]" (selectedVersionChanges)="selectedChart = $event" />
 			</div>
+			<dialog #libraryDirectoryErrorModal class="modal">
+				<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
+					<form method="dialog">
+						<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
+							<i class="bi bi-x-lg text-lg"></i>
+						</button>
+					</form>
+					<h3 class="text-lg font-bold">Chart can't be downloaded yet</h3>
+					<p class="py-4">Please select a chart library directory in the Settings tab before downloading.</p>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button>close</button>
+				</form>
+			</dialog>
 		</div>
 	</div>
 }

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

@@ -18,6 +18,7 @@ export class ChartSidebarComponent implements OnInit {
 	@HostBinding('class.contents') contents = true
 
 	@ViewChild('menu') menu: ElementRef
+	@ViewChild('libraryDirectoryErrorModal') libraryDirectoryErrorModal: ElementRef<HTMLDialogElement>
 
 	public shortInstrumentDisplay = shortInstrumentDisplay
 	public difficultyDisplay = difficultyDisplay
@@ -281,7 +282,11 @@ export class ChartSidebarComponent implements OnInit {
 	 * Adds the selected chart to the download queue.
 	 */
 	onDownloadClicked() {
+		if (this.settingsService.libraryDirectory) {
 			this.downloadService.addDownload(this.selectedChart!)
+		} else {
+			this.libraryDirectoryErrorModal.nativeElement.showModal()
+		}
 	}
 
 	public showMenu() {

src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.html

@@ -8,9 +8,21 @@
 				[class.border-2]="download.type === 'error'">
 				<div class="card-body">
 					<div class="card-actions justify-end">
-						<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" (click)="downloadService.cancelDownload(download.md5)">
+						@if (download.type === 'done') {
+							<button
+								class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 tooltip tooltip-left tooltip-accent"
+								data-tip="Hide"
+								(click)="downloadService.cancelDownload(download.md5)">
 								<i class="bi bi-x-lg text-lg"></i>
 							</button>
+						} @else {
+							<button
+								class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 tooltip tooltip-left tooltip-error"
+								data-tip="Cancel"
+								(click)="downloadService.cancelDownload(download.md5)">
+								<i class="bi bi-x-lg text-lg text-error"></i>
+							</button>
+						}
 					</div>
 					<h2 class="card-title">{{ download.chartName }}</h2>
 					<progress

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

@@ -1,19 +1,29 @@
-<div class="border-t border-t-neutral p-2 flex gap-2 items-center">
+<div class="border-t border-t-neutral p-2 flex gap-2 items-center max-w-full">
-	<div *ngIf="searchService.songsResponse">
+	<div *ngIf="searchService.songsResponse" class="text-nowrap">
 		{{ searchService.songsResponse.found }} Result{{ searchService.songsResponse.found === 1 ? '' : 's' }}
 	</div>
 	<div class="flex-1">
-		<button *ngIf="selectedGroupIds.length > 1" (click)="downloadSelected()" class="btn btn-sm btn-primary">
+		<button *ngIf="selectedGroupIds.length > 1" (click)="downloadSelected()" class="btn btn-sm btn-primary text-nowrap">
 			Download {{ selectedGroupIds.length }} Results
 		</button>
 	</div>
-	<button *ngIf="downloadService.downloadCount > 0" (click)="downloadsModal.showModal()" class="btn btn-sm btn-ghost w-[30vw]">
+	<div *ngIf="downloadService.downloadCount > 0" class="text-ellipsis text-nowrap overflow-hidden whitespace-nowrap max-w-full">
+		{{ downloadService.currentDownloadText }}
+	</div>
+	<div *ngIf="downloadService.downloadCount > 0" class="flex gap-2 items-center">
+		<button (click)="downloadsModal.showModal()" class="btn btn-sm btn-ghost w-[30vw] flex gap-2">
+			<div class="flex-1">
 				<progress
 					[attr.value]="downloadService.totalDownloadingPercent"
 					max="100"
 					class="progress h-3 rounded-md"
 					[class.progress-error]="downloadService.anyErrorsExist"></progress>
+			</div>
+			<div>
+				<i class="bi bi-info-circle text-xs"></i>
+			</div>
 		</button>
+	</div>
 
 	<dialog #downloadsModal class="modal whitespace-normal">
 		<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2 w-9/12 max-w-7xl min-h-0 overflow-y-clip">

src-angular/app/core/services/download.service.ts

@@ -48,6 +48,11 @@ export class DownloadService {
 		return count ? total / count : 0
 	}
 
+	get currentDownloadText() {
+		const download = this.downloads.find(d => !d.stale && d.type === 'good')
+		return download ? `Downloading: ${_.truncate(download.chartName, { length: 80 })}` : ''
+	}
+
 	get anyErrorsExist() {
 		return this.downloads.find(download => download.type === 'error') ? true : false
 	}