Add playlists

src-angular/app/components/playlist/playlist-bar/playlist-bar.component.html

@@ -0,0 +1,53 @@
+<div class="border-t border-t-neutral p-2 flex gap-2 items-center max-w-full justify-between">
+	<div class="flex items-center gap-[8px]">
+		{{ (this.playlistService.tracks$ | async)?.length ?? 0 }} Songs
+
+		@if ((this.playlistService.selectedSongs$ | async)!.length > 0) {
+			<button class="btn btn-sm btn-primary" (click)="exportSelected()">Export Selected</button>
+		} @else {
+			<button class="btn btn-sm btn-primary" (click)="exportPlaylist()">Export</button>
+		}
+		<button class="btn btn-sm btn-primary" (click)="importPlaylist()">Import</button>
+		<input type="file" #fileInput accept=".setlist" class="hidden" (change)="onFileSelected($event)" />
+
+		@if ((this.playlistService.selectedSongs$ | async)!.length === 0) {
+			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.playlistService.clearPlaylist()">
+				<i class="bi bi-trash"></i>
+				Delete all
+			</button>
+		} @else {
+			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.playlistService.removeFromPlaylist()">
+				<i class="bi bi-trash"></i>
+				Delete selected
+			</button>
+		}
+	</div>
+	<div class="flex">
+		<div *ngIf="downloadService.downloadCount > 0" class="max-w-100 text-ellipsis text-nowrap overflow-hidden whitespace-nowrap flex items-center">
+			{{ 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>
+	</div>
+</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">
+		<app-downloads-modal />
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
+</dialog>