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() {
-		this.downloadService.addDownload(this.selectedChart!)
+		if (this.settingsService.libraryDirectory) {
+			this.downloadService.addDownload(this.selectedChart!)
+		} else {
+			this.libraryDirectoryErrorModal.nativeElement.showModal()
+		}
 	}
 
 	public showMenu() {