add time to now playing card

src/components/LeftSidebar/NP/HotKeys.vue

@@ -1,4 +1,5 @@
 <template>
+  
   <div class="hotkeys">
     <div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
     <div
@@ -17,6 +18,7 @@ const q = useQStore();
 </script>
 
 <style lang="scss">
+
 .hotkeys {
   display: grid;
   grid-template-columns: repeat(3, 1fr);

src/components/LeftSidebar/NP/Progress.vue

@@ -2,9 +2,9 @@
   <input
     id="progress"
     type="range"
-    :value="q.track.current_time"
+    :value="q.duration.current"
     min="0"
-    max="100"
+    :max="q.duration.full"
     step="0.1"
     @change="seek()"
   />

src/components/LeftSidebar/nowPlaying.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="r-now-playing t-center rounded">
+  <div class="now-playing-card t-center rounded">
     <div class="headin">Now Playing</div>
     <div
       class="button menu rounded"
@@ -11,6 +11,10 @@
     <div class="separator no-border"></div>
     <div>
       <SongCard :track="queue.tracks[queue.current]" />
+      <div class="l-track-time">
+        <span class="rounded">{{ formatSeconds(queue.duration.current) }}</span
+        ><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
+      </div>
       <Progress />
       <HotKeys />
     </div>
@@ -18,16 +22,17 @@
 </template>
 
 <script setup lang="ts">
-import SongCard from "./SongCard.vue";
-import HotKeys from "./NP/HotKeys.vue";
-import Progress from "./NP/Progress.vue";
-import useQStore from "../../stores/queue";
-import MenuSvg from "../../assets/icons/more.svg";
+import { ContextSrc } from "@/composables/enums";
 import trackContext from "@/contexts/track_context";
 import useContextStore from "@/stores/context";
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
-import { ContextSrc } from "@/composables/enums";
+import MenuSvg from "../../assets/icons/more.svg";
+import useQStore from "../../stores/queue";
+import HotKeys from "./NP/HotKeys.vue";
+import Progress from "./NP/Progress.vue";
+import SongCard from "./SongCard.vue";
+import { formatSeconds } from "@/composables/perks";
 
 import { ref } from "vue";
 
@@ -56,7 +61,7 @@ const showContextMenu = (e: Event) => {
 };
 </script>
 <style lang="scss">
-.r-now-playing {
+.now-playing-card {
   padding: 1rem;
   background-color: $primary;
   width: 100%;
@@ -64,6 +69,17 @@ const showContextMenu = (e: Event) => {
   position: relative;
   text-transform: capitalize;
 
+  .l-track-time {
+    display: flex;
+    justify-content: space-between;
+
+    span {
+      font-size: small;
+      // background-color: $gray;
+      padding: $smaller;
+    }
+  }
+
   &:hover {
     ::-moz-range-thumb {
       height: 0.8rem;