major refactors

- add album page store
- show loaders in beforeEnter guards
- show bitrate on now playing card
- etc

src/components/playlists/PlaylistCard.vue

@@ -7,7 +7,7 @@
     <div class="image rounded"></div>
     <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
-      <div class="count">N Tracks</div>
+      <div class="count">{{ props.playlist.count }} Tracks</div>
     </div>
   </router-link>
 </template>
@@ -23,21 +23,35 @@ const props = defineProps<{
 <style lang="scss">
 .p-card {
   width: 100%;
-  background-color: $gray;
+  background: $gray;
   padding: $small;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: $accent;
+    .bottom > .count {
+      color: $white;
+    }
+  }
 
   .image {
     min-width: 100%;
     height: 10rem;
     background-image: url("../../assets/images/eggs.jpg");
+    background-size: auto 10rem;
+    transition: all 0.2s ease;
   }
 
   .bottom {
     margin-top: $small;
 
+    .name {
+      text-transform: capitalize;
+    }
+
     .count {
       font-size: $medium;
-      color: $red;
+      color: $indigo;
     }
   }
 }