playlist subscription functionality

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

@@ -16,6 +16,11 @@
           </a>
         </span>
     <span>
+      <i class="fa-solid is-clickable hover-icon"
+         [ngClass]="playlist.active ? 'fa-lock' : 'fa-lock-open'"
+         [title]="playlist.active ? 'Subscribe to playlist changes' : 'Unsubscribe from playlist changes'"
+         (click)="setActive(playlist.id, playlist.active)"
+      ></i>&nbsp;
       <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;
       <span *ngIf="!playlist.error" class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>&nbsp;

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

@@ -57,4 +57,8 @@ export class PlaylistBoxComponent {
   retryFailed(id: number): void {
     this.service.retryFailed(id);
   }
+
+  setActive(id: number, currentActive: boolean = false): void {
+    this.service.setActive(id, !currentActive)
+  }
 }

src/frontend/src/app/services/playlist.service.ts

@@ -26,6 +26,7 @@ export interface Playlist {
   name?: string;
   spotifyUrl: string;
   error?: string;
+  active: boolean;
   createdAt: number;
 }
 
@@ -55,7 +56,7 @@ export class PlaylistService {
   all$ = this.store.combine({
     entities: this.store.pipe(selectAllEntities()),
     UIEntities: this.store.pipe(selectEntities({ ref: UIEntitiesRef })),
-  }).pipe(unionEntities(), map(data => data.sort((a, b) => b.createdAt - a.createdAt)));
+  }).pipe(unionEntities(), map(data => data.sort((a, b) => this.sort(a, b))));
 
   loading$ = this.store.pipe(joinRequestResult([STORE_NAME]));
   createLoading$ = this.store.pipe(joinRequestResult([CREATE_LOADING], { initialStatus: 'idle' }));
@@ -100,7 +101,7 @@ export class PlaylistService {
       if (playlist?.error || errorCount === trackCount) {
         return PlaylistStatusEnum.Error;
       } else if (trackCount === completedCount) {
-        return PlaylistStatusEnum.Completed;
+        return playlist?.active ? PlaylistStatusEnum.Subscribed : PlaylistStatusEnum.Completed;
       } else if (errorCount > 1) {
         return PlaylistStatusEnum.Warning;
       }
@@ -157,4 +158,12 @@ export class PlaylistService {
   retryFailed(id: number): void {
     this.http.get<void>(`${ENDPOINT}/retry/${id}`).subscribe();
   }
+
+  setActive(id: number, active: boolean): void {
+    this.http.put<void>(`${ENDPOINT}/${id}`, {active}).subscribe();
+  }
+
+  private sort(a: Playlist & PlaylistUi, b: Playlist & PlaylistUi): number {
+    return a.active === b.active ? (b.createdAt - a.createdAt) : (a.active < b.active ? 1 : -1);
+  }
 }