elf integration

spooty-fe/src/app/app.component.html

@@ -1,9 +1,10 @@
 <section class="hero is-primary">
   <div class="hero-body">
     <p class="title">
-      <span><i class="fa-solid fa-music"></i> Spooty</span>
+      <i class="fa-brands fa-spotify"></i>
+      <span>Spooty</span>
     </p>
-    <p class="subtitle"><i class="fa-solid fa-house"></i> Self-hosted <i class="fa-brands fa-spotify"></i> spotify <i class="fa-solid fa-download"></i>downloader</p>
+    <p class="subtitle">Self-hosted spotify downloader</p>
   </div>
 </section>
 
@@ -13,7 +14,7 @@
       <p class="subtitle">Download</p>
       <div class="is-flex">
         <input class="input" type="text" [(ngModel)]="url" placeholder="Paste playlist/song/artist url"/>
-        <button class="button is-primary" (click)="download()">
+        <button class="button is-primary" [class.is-loading]="(createLoading$ | async)?.isLoading" (click)="download()">
           <i class="fa-solid fa-download"></i> Download
         </button>
       </div>
@@ -21,18 +22,25 @@
     <hr>
     <div class="box">
     <div class="is-flex is-align-items-center">
-      <p class="subtitle">List</p>
-      <button class="button" (click)="get()"><i class="fa-solid fa-arrows-rotate"></i> Refresh</button>
+      <p class="subtitle">List</p>&nbsp;
+      <i class="fa-solid fa-arrows-rotate is-clickable" [class.loading-animation]="(loading$ | async)?.isLoading" (click)="fetchPlaylists()"></i>
     </div>
 
-    <article class="panel is-primary" *ngFor="let playlist of playlists">
+    <article class="panel is-primary" *ngFor="let playlist of playlists$ | async">
       <p class="panel-heading is-flex is-justify-content-space-between">
-        <span><i class="fa-solid fa-caret-down"></i> {{playlist.name}}</span>
+        <span>
+          <i class="is-clickable fa-solid"
+             [ngClass]="playlist.collapsed ? 'fa-caret-up' : 'fa-caret-down'"
+             (click)="toggleCollapse(playlist.id)"
+          ></i>&nbsp;
+          <span>{{playlist.name}}</span>
+        </span>
         <a [href]="playlist.spotifyUrl" target="_blank" class="is-color-black"><i class="fa-brands fa-spotify"></i></a>
       </p>
+      <ng-container *ngIf="playlist.collapsed">
       <a class="panel-block is-flex is-justify-content-space-between" *ngFor="let track of playlist.tracks">
         <div>
-          <a href="http://localhost:3000/track/download/{{track.id}}" class="panel-icon is-color-info" download>
+          <a href="api/track/download/{{track.id}}" class="panel-icon is-color-info" download>
             <i class="fa-solid fa-download"></i>
           </a>
           <span>{{track.artist}} - {{track.song}}</span>&nbsp;
@@ -51,6 +59,7 @@
           </ng-container>
         </div>
       </a>
+      </ng-container>
     </article>
     </div>
   </div>