feat: add heart icon on left now playing card

src/assets/icons/heart.fill.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9912 22.1445C14.2197 22.1445 14.5449 21.9775 14.8086 21.8105C19.7217 18.6465 22.8682 14.9375 22.8682 11.1758C22.8682 7.9502 20.6445 5.7002 17.8408 5.7002C16.0918 5.7002 14.7822 6.66699 13.9912 8.11719C13.2178 6.67578 11.8994 5.7002 10.1504 5.7002C7.34668 5.7002 5.11426 7.9502 5.11426 11.1758C5.11426 14.9375 8.26074 18.6465 13.1738 21.8105C13.4463 21.9775 13.7715 22.1445 13.9912 22.1445Z" fill="#EB5757"/>
+</svg>

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 {

src/components/LeftSidebar/nowPlaying.vue

@@ -2,8 +2,9 @@
   <div class="now-playing-card t-center rounded">
     <SongCard :track="queue.currenttrack" />
     <div class="l-track-time">
-      <span class="rounded">{{ formatSeconds(duration.current) }}</span
-      ><span class="rounded">{{ formatSeconds(duration.full) }}</span>
+      <span class="rounded">{{ formatSeconds(duration.current) }}</span>
+      <!-- <HeartSvg /> -->
+      <span class="rounded">{{ formatSeconds(duration.full) }}</span>
     </div>
     <Progress />
     <HotKeys />