refactor logo, bottom bar and perks.js

- add new logo
- add tsconfig.json
- move logo to new component
- update bottombar
- remove props from hotkeys and progress bar
- convert perks.js -> perks.ts

src/components/LeftSidebar/NP/HotKeys.vue

@@ -1,33 +1,31 @@
 <template>
   <div class="hotkeys">
-    <div class="image ctrl-btn" id="previous" @click="props.prev"></div>
+    <div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
     <div
       class="image ctrl-btn play-pause"
-      @click="playPause"
-      :class="{ isPlaying: props.playing }"
+      @click="q.playPause"
+      :class="{ isPlaying: q.playing }"
     ></div>
-    <div class="image ctrl-btn" id="next" @click="props.next"></div>
+    <div class="image ctrl-btn" id="next" @click="q.playNext"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
-  playing: boolean;
-  playPause: () => void;
-  next: () => void;
-  prev: () => void;
-}>();
+import useQStore from "@/stores/queue";
+
+const q = useQStore();
 </script>
 
 <style lang="scss">
 .hotkeys {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  width: 100%;
   gap: $small;
-  height: 3rem;
+  height: 2.5rem;
   align-items: center;
+  justify-content: center;
   place-content: flex-end;
+  width: 100%;
 
   .ctrl-btn {
     height: 2.5rem;
@@ -37,7 +35,7 @@ const props = defineProps<{
     border-radius: 0.5rem;
 
     &:hover {
-      background-color: $red;
+      background-color: $accent;
     }
   }
 

src/components/LeftSidebar/NP/Progress.vue

@@ -2,22 +2,22 @@
   <input
     id="progress"
     type="range"
-    :value="props.pos"
+    :value="q.track.current_time"
     min="0"
-    max="100"
+    :max="q.track.duration"
     step="0.1"
     @change="seek()"
   />
 </template>
 
 <script setup lang="ts">
-const seek = () => {
-  const value = Number(document.getElementById("progress").value);
-  props.seek(value);
-};
+import useQStore from "../../../stores/queue";
 
-const props = defineProps<{
-  pos: number;
-  seek: (time: number) => void;
-}>();
+const q = useQStore();
+const seek = () => {
+  const elem = <HTMLFormElement>document.getElementById("progress");
+  const value = elem.value;
+
+  q.seek(value);
+};
 </script>

src/components/LeftSidebar/Navigation.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const menus = [
   {
     name: "home",
@@ -53,9 +53,7 @@ const menus = [
 
 .side-nav-container {
   color: #fff;
-  margin-bottom: 1rem;
-  padding: 10px $small $small;
-  margin-top: 1rem;
+  margin: 1rem 0;
   text-transform: capitalize;
 
   .nav-button {
@@ -63,11 +61,10 @@ const menus = [
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
-    height: 100%;
-    padding: 0.6rem 0 0.6rem 0;
+    padding: 0.6rem 0;
 
     &:hover {
-      background-color: $gray;
+      background-color: $gray3;
     }
 
     .nav-icon {

src/components/LeftSidebar/SongCard.vue

@@ -34,12 +34,10 @@
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks";
+import { putCommas } from "../../composables/perks";
 import { Track } from "../../interfaces";
 import { paths } from "../../config";
-const imguri = paths.images.thumb
-
-const putCommas = perks.putCommas;
+const imguri = paths.images.thumb;
 
 const props = defineProps<{
   track: Track;

src/components/LeftSidebar/nowPlaying.vue

@@ -5,18 +5,13 @@
     <div class="separator no-border"></div>
     <div>
       <SongCard :track="queue.current" />
-      <Progress :seek="queue.seek" :pos="queue.current_time" />
-      <HotKeys
-        :playing="queue.playing"
-        :playPause="queue.playPause"
-        :next="queue.playNext"
-        :prev="queue.playPrev"
-      />
+      <Progress />
+      <HotKeys />
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import SongCard from "./SongCard.vue";
 import HotKeys from "./NP/HotKeys.vue";
 import Progress from "./NP/Progress.vue";
@@ -28,9 +23,8 @@ const queue = useQStore();
 .l_ {
   padding: 1rem;
   background-color: $primary;
-  margin: $small;
   text-align: center;
-  width: 14rem;
+  width: 100%;
   display: grid;
   position: relative;
   text-transform: capitalize;