add now playing card settings

+ move left sidebar to separate component

src/components/LeftSidebar/NP/Progress.vue

@@ -7,6 +7,11 @@
     :max="q.duration.full"
     step="0.1"
     @change="seek()"
+    :style="{
+      backgroundSize: `${
+        (q.duration.current / (q.currenttrack.length || 0)) * 100
+      }% 100%`,
+    }"
   />
 </template>
 
@@ -15,9 +20,9 @@ import useQStore from "../../../stores/queue";
 
 const q = useQStore();
 const seek = () => {
-  const elem = <HTMLFormElement>document.getElementById("progress");
+  const elem = document.getElementById("progress") as HTMLInputElement;
   const value = elem.value;
 
-  q.seek(value);
+  q.seek(value as unknown as number);
 };
 </script>

src/components/LeftSidebar/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="l-sidebar rounded">
+    <div class="withlogo">
+      <Logo />
+      <Navigation />
+    </div>
+
+    <nowPlaying v-if="settings.use_side_np" />
+    <!-- <Playlists /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import Logo from "@/components/Logo.vue";
+import Navigation from "@/components/LeftSidebar/Navigation.vue";
+import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
+// import Playlists from "./components/LeftSidebar/Playlists.vue";
+
+import useSettingsStore from "@/stores/settings";
+
+const settings = useSettingsStore();
+</script>
+
+<style lang="scss"></style>