From 5a51dbd351a8edb121e2990a5caceacdadf7280d Mon Sep 17 00:00:00 2001
From: raiper34 <raipergm34@gmail.com>
Date: Mon, 30 Sep 2024 14:55:02 +0200
Subject: [PATCH] refactor(frontend): refactor frontend components code

---
 .../components/playlist-box/playlist-box.component.html    | 7 ++++---
 .../components/playlist-box/playlist-box.component.scss    | 4 ++++
 .../app/components/playlist-box/playlist-box.component.ts  | 3 +--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/app/components/playlist-box/playlist-box.component.html b/src/frontend/src/app/components/playlist-box/playlist-box.component.html
index 46dd4b1..de94494 100644
--- a/src/frontend/src/app/components/playlist-box/playlist-box.component.html
+++ b/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>
diff --git a/src/frontend/src/app/components/playlist-box/playlist-box.component.scss b/src/frontend/src/app/components/playlist-box/playlist-box.component.scss
index 5a005c9..9272c18 100644
--- a/src/frontend/src/app/components/playlist-box/playlist-box.component.scss
+++ b/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 {
diff --git a/src/frontend/src/app/components/playlist-box/playlist-box.component.ts b/src/frontend/src/app/components/playlist-box/playlist-box.component.ts
index 4bd18cf..994a77d 100644
--- a/src/frontend/src/app/components/playlist-box/playlist-box.component.ts
+++ b/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)
   }
 }