feat(track): allow download of individual track and fix album art

* allow download of individual track
* fix album art
close #29

src/frontend/src/app/app.component.html

@@ -37,7 +37,28 @@
         </button>
       </div>
     </div>
-      <app-playlist-box *ngFor="let playlist of playlists$ | async" [playlist]="playlist"></app-playlist-box>
+      <ng-container *ngIf="playlists$ | async as playlists">
+        <app-playlist-box *ngFor="let playlist of playlists" [playlist]="playlist"></app-playlist-box>
+        <p *ngIf="playlists?.length === 0" class="has-text-grey has-text-centered">No playlists</p>
+      </ng-container>
+    </div>
+    <hr>
+    <div class="box">
+    <div class="is-flex is-justify-content-space-between">
+      <p class="subtitle">Songs</p>
+      <div class="buttons has-addons">
+        <button class="button is-outlined is-success" title="Remove completed from list" (click)="deleteCompleted()">
+          <i class="fa-solid fa-check"></i>
+        </button>
+        <button class="button is-outlined is-danger" title="Remove failed from list" (click)="deleteFailed()">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+    </div>
+      <ng-container *ngIf="songs$ | async as songs">
+        <app-playlist-box *ngFor="let playlist of songs" [playlist]="playlist"></app-playlist-box>
+        <p *ngIf="songs?.length === 0" class="has-text-grey has-text-centered">No songs</p>
+      </ng-container>
     </div>
   </div>
 </section>

src/frontend/src/app/app.component.ts

@@ -4,6 +4,7 @@ import {CommonModule, NgFor} from "@angular/common";
 import {PlaylistService, PlaylistStatusEnum} from "./services/playlist.service";
 import {PlaylistBoxComponent} from "./components/playlist-box/playlist-box.component";
 import {VersionService} from "./services/version.service";
+import {map} from "rxjs";
 
 @Component({
     selector: 'app-root',
@@ -16,7 +17,8 @@ export class AppComponent {
 
   url = ''
   createLoading$ = this.playlistService.createLoading$;
-  playlists$ = this.playlistService.all$;
+  playlists$ = this.playlistService.all$.pipe(map(items => items.filter(item => !item.isTrack)));
+  songs$ = this.playlistService.all$.pipe(map(items => items.filter(item => item.isTrack)));
   version = this.versionService.getVersion();
 
   constructor(

src/frontend/src/app/components/playlist-box/playlist-box.component.html

@@ -16,11 +16,14 @@
           </a>
         </span>
     <span>
-      <i class="fa-solid is-clickable hover-icon"
-         [ngClass]="playlist.active ? 'fa-toggle-on' : 'fa-toggle-off'"
-         [title]="playlist.active ? '[ON]: Unsubscribe from playlist changes?' : '[OFF]: Subscribe to playlist changes?'"
-         (click)="toggleActive(playlist.id, playlist.active)"
-      ></i>&nbsp;
+      <ng-container *ngIf="!playlist.isTrack">
+        <i class="fa-solid is-clickable hover-icon"
+           [ngClass]="playlist.active ? 'fa-toggle-on' : 'fa-toggle-off'"
+           [title]="playlist.active ? '[ON]: Unsubscribe from playlist changes?' : '[OFF]: Subscribe to playlist changes?'"
+           (click)="toggleActive(playlist.id, playlist.active)"
+        ></i>
+        <i>&nbsp;</i>
+      </ng-container>
       <i class="fa-solid fa-repeat is-clickable hover-icon" title="Retry download failed tracks" (click)="retryFailed(playlist.id)"></i>&nbsp;
       <i class="fa-solid fa-xmark is-clickable hover-icon" title="Remove playlist from list" (click)="delete(playlist.id)"></i>&nbsp;
       <i *ngIf="playlist.active" class="fa-solid fa-toggle-on hover-icon-reversed"></i>&nbsp;

src/frontend/src/app/models/playlist.ts

@@ -4,5 +4,6 @@ export interface Playlist {
   spotifyUrl: string;
   error?: string;
   active: boolean;
+  isTrack?: boolean;
   createdAt: number;
 }

src/frontend/src/app/models/track.ts

@@ -7,6 +7,7 @@ export interface Track {
   status: TrackStatusEnum;
   playlistId?: number;
   error?: string;
+  coverUrl?: string;
 }
 
 export enum TrackStatusEnum {