refactor(frontend): refactor frontend components code

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

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

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

@@ -9,6 +9,10 @@
   &:hover .hover-icon {
     display: inline;
   }
+
+  &:hover .hover-icon-reversed {
+    display: none;
+  }
 }
 
 .panel {

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

@@ -46,7 +46,6 @@ export class PlaylistBoxComponent {
 
   constructor(private readonly service: PlaylistService) { }
 
-
   toggleCollapse(playlistId: number): void {
     this.service.toggleCollapsed(playlistId);
   }
@@ -59,7 +58,7 @@ export class PlaylistBoxComponent {
     this.service.retryFailed(id);
   }
 
-  setActive(id: number, currentActive: boolean = false): void {
+  toggleActive(id: number, currentActive: boolean): void {
     this.service.setActive(id, !currentActive)
   }
 }