feat: add heart icon on left now playing card

src/components/LeftSidebar/NP/SongCard.vue

@@ -1,28 +1,32 @@
 <template>
   <div class="sidebar-songcard">
-    <router-link
-      :to="{
-        name: 'AlbumView',
-        params: {
-          hash: track?.albumhash ? track.albumhash : ' ',
-        },
-      }"
-    >
-      <div class="art">
+    <div class="art">
+      <router-link
+        :to="{
+          name: 'AlbumView',
+          params: {
+            hash: track?.albumhash ? track.albumhash : ' ',
+          },
+        }"
+      >
         <img
           :src="imguri + track?.image"
           alt=""
           class="l-image rounded force-lm"
         />
-        <div id="bitrate" v-if="track?.bitrate">
-          {{ track.filetype }}• {{ track.bitrate }}
-        </div>
+      </router-link>
+      <div id="bitrate" v-if="track?.bitrate">
+        {{ track.filetype }}• {{ track.bitrate }}
       </div>
-    </router-link>
+      <div class="heart rounded-sm" @click="heartClicked = !heartClicked">
+        <HeartSvg v-if="!heartClicked" />
+        <HeartFilledSvg v-else />
+      </div>
+    </div>
 
     <div class="bottom">
-      <div class="title ellip t-center">
-        {{ props.track?.title || "♥ Hello ♥" }}
+      <div class="title ellip t-center" v-tooltip="track?.title">
+        {{ track?.title || "♥ Hello ♥" }}
       </div>
       <ArtistName
         :artists="track?.artist || []"
@@ -34,14 +38,21 @@
 </template>
 
 <script setup lang="ts">
-import { paths } from "../../../config";
-import { Track } from "../../../interfaces";
+import { ref } from "vue";
+
+import { paths } from "@/config";
+import { Track } from "@/interfaces";
 import ArtistName from "@/components/shared/ArtistName.vue";
 
-const props = defineProps<{
+import HeartSvg from "@/assets/icons/heart.svg";
+import HeartFilledSvg from "@/assets/icons/heart.fill.svg";
+
+defineProps<{
   track: Track | null;
 }>();
 
+const heartClicked = ref<boolean>(false);
+
 const imguri = paths.images.thumb.large;
 </script>
 
@@ -54,12 +65,23 @@ const imguri = paths.images.thumb.large;
     margin-bottom: $small;
     position: relative;
 
+    .heart {
+      position: absolute;
+      bottom: -$smaller;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: $smaller;
+    }
+
     img {
       width: 100%;
       height: auto;
       aspect-ratio: 1;
       object-fit: cover;
       cursor: pointer;
+      margin-bottom: 2rem;
     }
 
     #bitrate {
@@ -67,11 +89,10 @@ const imguri = paths.images.thumb.large;
       font-size: 0.75rem;
       width: max-content;
       padding: 0.2rem 0.35rem;
-      bottom: 1rem;
-      left: 1rem;
-      background-color: $black;
+      bottom: $smaller;
+      left: 0;
+      background-color: $gray4;
       border-radius: $smaller;
-      box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
       text-transform: uppercase;
     }
   }
@@ -88,7 +109,7 @@ const imguri = paths.images.thumb.large;
 
   .artists {
     font-size: 0.85rem;
-    opacity: 0.75;
+    opacity: 0.5;
     margin: 0 auto;
 
     &:hover {