From b497344521ed3362efb69be9d19f7f0f984ce97f Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 24 May 2022 15:55:26 +0300
Subject: [PATCH] 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/App.vue                                  |  37 +++-------
 src/assets/css/BottomBar/BottomBar.scss      |  38 +----------
 src/assets/css/global.scss                   |  10 +--
 src/assets/css/mixins.scss                   |   5 ++
 src/assets/images/logo.webp                  | Bin 0 -> 13188 bytes
 src/components/AlbumView/Header.vue          |   8 +--
 src/components/BottomBar/BottomBar.vue       |  30 ++++-----
 src/components/LeftSidebar/NP/HotKeys.vue    |  24 +++----
 src/components/LeftSidebar/NP/Progress.vue   |  20 +++---
 src/components/LeftSidebar/Navigation.vue    |  11 ++-
 src/components/LeftSidebar/SongCard.vue      |   6 +-
 src/components/LeftSidebar/nowPlaying.vue    |  14 ++--
 src/components/Logo.vue                      |  23 +++++++
 src/components/RightSideBar/NowPlaying.vue   |   2 +-
 src/components/RightSideBar/Search.vue       |  14 ----
 src/components/RightSideBar/queue/upNext.vue |   4 +-
 src/components/shared/SongItem.vue           |   8 +--
 src/components/shared/TrackItem.vue          |   8 +--
 src/composables/normalizeContextMenu.js      |   6 +-
 src/composables/{perks.js => perks.ts}       |  18 ++---
 src/stores/gsearch.js                        |  67 -------------------
 src/stores/loader.ts                         |   1 -
 src/stores/queue.ts                          |  12 +++-
 tsconfig.json                                |   9 +++
 24 files changed, 129 insertions(+), 246 deletions(-)
 create mode 100644 src/assets/css/mixins.scss
 create mode 100644 src/assets/images/logo.webp
 create mode 100644 src/components/Logo.vue
 rename src/composables/{perks.js => perks.ts} (80%)
 delete mode 100644 src/stores/gsearch.js
 create mode 100644 tsconfig.json

diff --git a/src/App.vue b/src/App.vue
index 4e0d16a8..8dbf3dc9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,12 +3,8 @@
   <Modal />
   <Notification />
   <div class="l-container">
-    <div class="l-sidebar">
-      <div id="logo-container">
-        <router-link :to="{ name: 'Home' }">
-          <div class="logo"></div
-        ></router-link>
-      </div>
+    <div class="l-sidebar rounded">
+      <Logo />
       <Navigation />
       <div class="l-album-art">
         <nowPlaying />
@@ -24,7 +20,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import Navigation from "./components/LeftSidebar/Navigation.vue";
 
 import Main from "./components/RightSideBar/Main.vue";
@@ -38,6 +34,7 @@ import Modal from "./components/modal.vue";
 import Notification from "./components/Notification.vue";
 import useQStore from "./stores/queue";
 import listenForKeyboardEvents from "./composables/keyboard";
+import Logo from "./components/Logo.vue";
 
 const RightSideBar = Main;
 const context_store = useContextStore();
@@ -55,38 +52,22 @@ app_dom.addEventListener("click", (e) => {
 </script>
 
 <style lang="scss">
+@import "./assets/css/mixins.scss";
+
 .l-sidebar {
   position: relative;
 
   .l-album-art {
+    width: calc(100% - 2rem);
     position: absolute;
     bottom: 0;
+    margin-bottom: 1rem;
   }
 }
 
-#logo-container {
-  position: relative;
-  height: 3.6rem;
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
 
-  #toggle {
-    position: absolute;
-    width: 3rem;
-    height: 100%;
-    background: url(./assets/icons/menu.svg) no-repeat center;
-    background-size: 2rem;
-    cursor: pointer;
-  }
-}
 
-.logo {
-  height: 4.5rem;
-  width: 15rem;
-  background: url(./assets/icons/logo.svg) no-repeat 1rem;
-  background-size: 9rem;
-}
+
 
 .r-sidebar {
   &::-webkit-scrollbar {
diff --git a/src/assets/css/BottomBar/BottomBar.scss b/src/assets/css/BottomBar/BottomBar.scss
index d0d72c0f..2cd8cf72 100644
--- a/src/assets/css/BottomBar/BottomBar.scss
+++ b/src/assets/css/BottomBar/BottomBar.scss
@@ -7,46 +7,16 @@
     display: grid;
     height: 100%;
     padding-right: $small;
-
     
-
     @include phone-only {
       grid-template-columns: 1fr 9.2rem;
     }
 
-    .info {
-      display: flex;
-      padding-top: $small;
-      margin-left: $small;
-
-      .art {
-        width: 3rem;
-        height: 3rem;
-        background-image: url("../../images/null.webp");
-      }
-
-      .separator {
-        margin: 2px;
-      }
-
-      .desc {
-        width: calc(100% - 5rem);
-        margin-left: $small;
-        display: flex;
-        align-items: center;
-        margin-top: -$small;
-
-        .artists {
-          font-size: 0.8rem;
-          color: $white;
-        }
-      }
-    }
-
     .controlsx {
       width: 100%;
       overflow: hidden;
-      display: flex;
+      display: grid;
+      grid-template-columns: 12rem 1fr 12rem;
       align-items: center;
       padding: $small;
 
@@ -55,10 +25,6 @@
         align-items: center;
       }
 
-      .controls-bottom {
-        width: min-content;
-      }
-
       .progress-bottom {
         width: 100%;
 
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index dc78de7b..543e43f0 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -1,4 +1,5 @@
 @import "../css/ProgressBar.scss";
+@import "mixins.scss";
 
 :root {
   --separator: #ffffff46;
@@ -20,6 +21,8 @@ body {
   image-rendering: -webkit-optimize-contrast;
 }
 
+
+
 .heading {
   font-size: 2rem;
   font-weight: bold;
@@ -39,7 +42,6 @@ a {
 }
 
 .border {
-  // border: solid 1px $gray5;
   background-color: $black;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
 }
@@ -95,11 +97,11 @@ a {
 }
 
 .l-sidebar {
-  width: 15rem;
+  width: 17rem;
   grid-area: l-sidebar;
-  padding-top: 0.5rem;
-  // border-right: solid 1px $gray3;
   background-color: $black;
+  margin: $small;
+  padding: 1rem;
 }
 
 .bottom-bar {
diff --git a/src/assets/css/mixins.scss b/src/assets/css/mixins.scss
new file mode 100644
index 00000000..fd0f8e8d
--- /dev/null
+++ b/src/assets/css/mixins.scss
@@ -0,0 +1,5 @@
+@mixin ximage {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
diff --git a/src/assets/images/logo.webp b/src/assets/images/logo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..fd3f62464634ba4ebca1fa2034c94336519c3035
GIT binary patch
literal 13188
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

literal 0
HcmV?d00001

diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 1a7b2567..9cc464b1 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -23,8 +23,8 @@
         <div class="bottom">
           <div class="stats">
             {{ props.album.count }} Tracks •
-            {{ perks.formatSeconds(props.album.duration, "long") }} •
-            {{ props.album.date }} • {{ props.album.artist }}
+            {{ formatSeconds(props.album.duration) }} • {{ props.album.date }} •
+            {{ props.album.artist }}
           </div>
           <PlayBtnRect :source="playSources.album" />
         </div>
@@ -34,8 +34,8 @@
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks.js";
-import { AlbumInfo } from "../../interfaces.js";
+import { formatSeconds } from "../../composables/perks";
+import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import { playSources } from "../../composables/enums";
 import { paths } from "../../config";
diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue
index 4fa78421..5259b3e2 100644
--- a/src/components/BottomBar/BottomBar.vue
+++ b/src/components/BottomBar/BottomBar.vue
@@ -1,37 +1,33 @@
-<!-- <template>
+<template>
   <div class="b-bar">
     <div class="grid rounded">
       <div class="controlsx rounded">
-        <div class="controls controls-bottom">
+        <div class="controls-bottom">
           <HotKeys />
         </div>
         <div class="progress progress-bottom">
-          <span class="durationx">{{ formatSeconds(current_pos) }}</span>
+          <span class="durationx">{{ formatSeconds(q.track.current_time) }}</span>
           <Progress />
-          <span class="durationx">{{
-            formatSeconds(state.current.value.length)
-          }}</span>
+          <span class="durationx">{{ formatSeconds(q.length) }}</span>
         </div>
         <div class="r-group">
           <div id="heart" class="image ctrl-btn"></div>
           <div id="add-to" class="image ctrl-btn"></div>
           <div id="repeat" class="image ctrl-btn"></div>
         </div>
-        <div class="controls controls-bottom"></div>
       </div>
       <div class="volume-group"></div>
     </div>
   </div>
 </template>
 
-<script setup>
-import "../../assets/css/BottomBar/BottomBar.scss";
-import Progress from "../shared/Progress.vue";
-import HotKeys from "../shared/HotKeys.vue";
-import state from "../../composables/state";
-import perks from "../../composables/perks";
-import playAudio from "../../composables/playAudio";
+<script setup lang="ts">
+import "@/assets/css/BottomBar/BottomBar.scss";
+import Progress from "../LeftSidebar/NP/Progress.vue";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import { formatSeconds } from "@/composables/perks";
 
-const current_pos = playAudio.current_time;
-const formatSeconds = perks.formatSeconds;
-</script> -->
+import useQStore from "@/stores/queue";
+
+const q = useQStore();
+</script>
diff --git a/src/components/LeftSidebar/NP/HotKeys.vue b/src/components/LeftSidebar/NP/HotKeys.vue
index 7527e176..ae9c9827 100644
--- a/src/components/LeftSidebar/NP/HotKeys.vue
+++ b/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;
     }
   }
 
diff --git a/src/components/LeftSidebar/NP/Progress.vue b/src/components/LeftSidebar/NP/Progress.vue
index 6ab72617..d216839c 100644
--- a/src/components/LeftSidebar/NP/Progress.vue
+++ b/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>
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 5c2c7ab2..2c1e378e 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/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 {
diff --git a/src/components/LeftSidebar/SongCard.vue b/src/components/LeftSidebar/SongCard.vue
index 4836c645..fddd5af3 100644
--- a/src/components/LeftSidebar/SongCard.vue
+++ b/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;
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index 5e545063..87ca0244 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/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;
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
new file mode 100644
index 00000000..87474ff3
--- /dev/null
+++ b/src/components/Logo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div id="logo-container">
+    <router-link :to="{ name: 'Home' }">
+      <div id="logo" class="rounded"></div
+    ></router-link>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../assets/css/mixins.scss";
+
+#logo-container {
+  overflow: hidden;
+}
+
+#logo {
+  height: 4.5rem !important;
+  width: 15rem;
+  background-image: url(./../assets/images/logo.webp);
+  background-size: contain;
+  @include ximage;
+}
+</style>
diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue
index ccc109a6..ab270944 100644
--- a/src/components/RightSideBar/NowPlaying.vue
+++ b/src/components/RightSideBar/NowPlaying.vue
@@ -51,7 +51,7 @@
 <script>
 import playAudio from "@/composables/playAudio.js";
 import {ref} from "@vue/reactivity";
-import perks from "../../composables/perks.js";
+import {putCommas, formatSeconds} from "../../composables/perks.js";
 import HotKeys from "../shared/HotKeys.vue";
 import Progress from "../shared/Progress.vue";
 
diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search.vue
index 66dc7961..947dbe80 100644
--- a/src/components/RightSideBar/Search.vue
+++ b/src/components/RightSideBar/Search.vue
@@ -15,26 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@vue/reactivity";
-import useSearchStore from "../../stores/gsearch";
-import useTabStore from "../../stores/tabs";
 import TabsWrapper from "./TabsWrapper.vue";
 import Tab from "./Tab.vue";
 import TracksGrid from "./Search/TracksGrid.vue";
 import AlbumGrid from "./Search/AlbumGrid.vue";
 import "@/assets/css/Search/Search.scss";
 import ArtistGrid from "./Search/ArtistGrid.vue";
-
-const search = useSearchStore();
-const tabs = useTabStore();
-
-const search_thing = ref(null);
-
-const artists = reactive({
-  artists: [],
-  more: false,
-});
-
 </script>
 
 <style lang="scss">
diff --git a/src/components/RightSideBar/queue/upNext.vue b/src/components/RightSideBar/queue/upNext.vue
index b1933ab9..2d045fc3 100644
--- a/src/components/RightSideBar/queue/upNext.vue
+++ b/src/components/RightSideBar/queue/upNext.vue
@@ -12,7 +12,7 @@
         <p class="title ellip">{{ next.title }}</p>
         <hr />
         <p class="artist ellip">
-          <span v-for="artist in perks.putCommas(next.artists)" :key="artist">{{
+          <span v-for="artist in putCommas(next.artists)" :key="artist">{{
             artist
           }}</span>
         </p>
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { Track } from "../../../interfaces";
-import perks from "../../../composables/perks";
+import {putCommas} from "../../../composables/perks";
 import { paths } from "../../../config";
 const imguri = paths.images.thumb;
 
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index b49f5db7..6f8201a7 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -29,7 +29,7 @@
       <div class="ellip" v-if="props.song.artists[0] !== ''">
         <span
           class="artist"
-          v-for="artist in perks.putCommas(props.song.artists)"
+          v-for="artist in putCommas(props.song.artists)"
           :key="artist"
           >{{ artist }}</span
         >
@@ -53,13 +53,13 @@
       </div>
     </router-link>
     <div class="song-duration">
-      {{ perks.formatSeconds(props.song.length) }}
+      {{ formatSeconds(props.song.length) }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks.js";
+import { putCommas, formatSeconds } from "../../composables/perks";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
 import useQueueStore from "../../stores/queue";
@@ -67,7 +67,7 @@ import { ContextSrc } from "../../composables/enums";
 
 import { ref } from "vue";
 import trackContext from "../../contexts/track_context";
-import { Track } from "../../interfaces.js";
+import { Track } from "../../interfaces";
 import { paths } from "../../config";
 
 const contextStore = useContextStore();
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index b999dd5f..a03a6a03 100644
--- a/src/components/shared/TrackItem.vue
+++ b/src/components/shared/TrackItem.vue
@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import perks from "../../composables/perks";
+import { putCommas } from "../../composables/perks";
 import trackContext from "../../contexts/track_context";
 import { Track } from "../../interfaces";
 import { ContextSrc } from "../../composables/enums";
@@ -46,9 +46,8 @@ import useModalStore from "../../stores/modal";
 import useQueueStore from "../../stores/queue";
 import { paths } from "../../config";
 
-
 const contextStore = useContextStore();
-const imguri = paths.images.thumb
+const imguri = paths.images.thumb;
 
 const props = defineProps<{
   track: Track;
@@ -78,9 +77,6 @@ const emit = defineEmits<{
   (e: "PlayThis", track: Track): void;
 }>();
 
-const current = ref(perks.current);
-const putCommas = perks.putCommas;
-
 const playThis = (track: Track) => {
   emit("PlayThis", track);
 };
diff --git a/src/composables/normalizeContextMenu.js b/src/composables/normalizeContextMenu.js
index 61c59c37..5761670f 100644
--- a/src/composables/normalizeContextMenu.js
+++ b/src/composables/normalizeContextMenu.js
@@ -1,8 +1,8 @@
-import perks from "./perks";
+import { getElem } from "./perks";
 
 export default (mouseX, mouseY) => {
-  const scope = perks.getElem("app", "id");
-  const contextMenu = perks.getElem("context-menu", "class");
+  const scope = getElem("app", "id");
+  const contextMenu = getElem("context-menu", "class");
   // ? compute what is the mouse position relative to the container element (scope)
   let { left: scopeOffsetX, top: scopeOffsetY } = scope.getBoundingClientRect();
 
diff --git a/src/composables/perks.js b/src/composables/perks.ts
similarity index 80%
rename from src/composables/perks.js
rename to src/composables/perks.ts
index df6af90c..94cbf189 100644
--- a/src/composables/perks.js
+++ b/src/composables/perks.ts
@@ -1,4 +1,4 @@
-const putCommas = (artists) => {
+const putCommas = (artists: string[]) => {
   let result = [];
 
   artists.forEach((i, index, artists) => {
@@ -24,18 +24,18 @@ function focusCurrent() {
   }
 }
 
-function getElem(identifier, type) {
+function getElem(id: string, type: string) {
   switch (type) {
     case "class": {
-      return document.getElementsByClassName(identifier)[0];
+      return document.getElementsByClassName(id)[0];
     }
     case "id": {
-      return document.getElementById(identifier);
+      return document.getElementById(id);
     }
   }
 }
 
-function formatSeconds(seconds) {
+function formatSeconds(seconds: number) {
   // check if there are arguments
 
   const date = new Date(seconds * 1000);
@@ -75,10 +75,4 @@ function formatSeconds(seconds) {
   }
 }
 
-
-export default {
-  putCommas,
-  focusCurrent,
-  formatSeconds,
-  getElem,
-};
+export { putCommas, focusCurrent, formatSeconds, getElem };
diff --git a/src/stores/gsearch.js b/src/stores/gsearch.js
deleted file mode 100644
index 2be26df2..00000000
--- a/src/stores/gsearch.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { defineStore } from "pinia";
-import useDebouncedRef from "../composables/useDebouncedRef";
-
-export default defineStore("gsearch", {
-  state: () => ({
-    filters: [],
-    query: useDebouncedRef("", 600),
-    results: {
-      tracks: {
-        items: [],
-        more: false,
-      },
-      albums: {
-        items: [],
-        more: false,
-      },
-      artists: {
-        items: [],
-        more: false,
-      },
-    },
-  }),
-  actions: {
-    addFilter(filter) {
-      if (this.filters.includes(filter)) {
-        return;
-      }
-      this.filters.push(filter);
-    },
-    removeFilter(filter) {
-      this.filters = this.filters.filter((f) => f !== filter);
-    },
-    removeLastFilter() {
-      this.filters.pop();
-    },
-    updateQuery(query) {
-      this.query = query;
-    },
-    updateTrackResults(results) {
-      this.results.tracks = results;
-    },
-    addMoreTrackResults(results) {
-      this.results.tracks.items = [
-        ...this.results.tracks.items,
-        ...results.items,
-      ];
-    },
-    updateAlbumResults(results) {
-      this.results.albums = results;
-    },
-    addMoreAlbumResults(results) {
-      this.results.albums.items = [
-        ...this.results.albums.items,
-        ...results.items,
-      ];
-    },
-    updateArtistResults(results) {
-      this.results.artists = results;
-    },
-    addMoreArtistResults(results) {
-      this.results.artists.items = [
-        ...this.results.artists.items,
-        ...results.items,
-      ];
-    },
-  },
-});
diff --git a/src/stores/loader.ts b/src/stores/loader.ts
index e85af94a..3366477c 100644
--- a/src/stores/loader.ts
+++ b/src/stores/loader.ts
@@ -12,7 +12,6 @@ export default defineStore("Loader", {
     },
     stopLoading() {
       const diff = new Date().getTime() - this.duration;
-      console.log(diff);
 
       if (diff <= 250) {
         setTimeout(() => {
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index fda6d73a..e51b5382 100644
--- a/src/stores/queue.ts
+++ b/src/stores/queue.ts
@@ -12,7 +12,6 @@ import {
 import notif from "../composables/mediaNotification";
 import { FromOptions } from "../composables/enums";
 
-
 function writeQueue(
   from: fromFolder | fromAlbum | fromPlaylist,
   tracks: Track[]
@@ -49,11 +48,15 @@ export default defineStore("Queue", {
   state: () => ({
     progressElem: HTMLElement,
     audio: new Audio(),
+    track: {
+      current_time: 0,
+      duration: 0,
+    },
     current: <Track>{},
+    length: 0,
     next: <Track>{},
     prev: <Track>{},
     playing: false,
-    current_time: 0,
     from: <fromFolder>{} || <fromAlbum>{} || <fromPlaylist>{},
     tracks: <Track[]>[defaultTrack],
   }),
@@ -69,12 +72,15 @@ export default defineStore("Queue", {
         this.audio.onerror = reject;
       })
         .then(() => {
+          this.length = this.audio.duration;
+
           this.audio.play().then(() => {
             this.playing = true;
             notif(track, this.playPause, this.playNext, this.playPrev);
 
             this.audio.ontimeupdate = () => {
-              this.current_time =
+              this.track.current_time = this.audio.currentTime;
+              const current_time =
                 (this.audio.currentTime / this.audio.duration) * 100;
               elem.style.backgroundSize = `${this.current_time}% 100%`;
             };
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..ffbf78bf
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "paths": {
+      "baseUrl": ["./"],
+      "@/*": ["./src/*"]
+    }
+  }
+}