prevent type coercion

- remove unused imports
- minor refactors and cleanups

src/components/AlbumView/AlbumBio.vue

@@ -54,7 +54,7 @@ export default {
       height: 10rem;
       position: absolute;
       background-color: rgb(196, 58, 58);
-      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
+      box-shadow: 0 0 2rem rgb(0, 0, 0);
       bottom: -10rem;
       left: 7rem;
       transform: rotate(45deg) translate(-1rem, -9rem);
@@ -74,7 +74,7 @@ export default {
       background-color: $blue;
       border-radius: 50%;
       transform: translateX(-11rem) translateY(7rem);
-      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
+      box-shadow: 0 0 2rem rgb(0, 0, 0);
     }
   }
   .bio {

src/components/AlbumView/Header.vue

@@ -85,7 +85,7 @@ export default {
       position: absolute;
       left: -4.2rem;
       top: 3rem;
-      box-shadow: 0px 0px 1.5rem rgb(0, 0, 0);
+      box-shadow: 0 0 1.5rem rgb(0, 0, 0);
     }
 
     .rect {
@@ -96,7 +96,7 @@ export default {
       background-color: rgb(196, 58, 58);
       transform: rotate(-45deg) translate(20%, -50%);
       z-index: 1;
-      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
+      box-shadow: 0 0 2rem rgb(0, 0, 0);
       transition: all 0.5s ease-in-out;
 
       &:hover {
@@ -114,7 +114,7 @@ export default {
       background-color: $blue;
       border-radius: 50%;
       transform: translateX(-11rem) translateY(7rem);
-      box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.164);
+      box-shadow: 0 0 2rem rgba(0, 0, 0, 0.164);
       transition: all 0.5s ease-in-out;
 
       &:hover {
@@ -145,9 +145,7 @@ export default {
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding: 0 1rem 0 1rem;
-  position: relative;
-  padding-left: 14rem;
+  padding: 0 1rem 0 14rem;
 
   .art {
     position: absolute;

src/components/BottomBar/BottomBar.vue

@@ -26,7 +26,6 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 import "../../assets/css/BottomBar/BottomBar.scss";
 import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";

src/components/BottomBar/SongCard.vue

@@ -11,7 +11,7 @@
       <div>
         <div class="title ellip">{{ track.title }}</div>
         <div class="separator no-border"></div>
-        <div class="artists ellip" v-if="track.artists[0] != ''">
+        <div class="artists ellip" v-if="track.artists[0] !== ''">
           <span v-for="artist in putCommas(track.artists)" :key="artist">{{
             artist
           }}</span>

src/components/FolderView/Header.vue

@@ -16,9 +16,8 @@
       <input
         type="text"
         class="search-input"
-        placeholder="Ctrl + F"
+        placeholder="/"
         v-model="query"
-        @keyup.enter="search()"
       />
       <div class="search-icon image"></div>
     </div>
@@ -109,8 +108,7 @@ export default {
 
     border-radius: $small;
     background-color: rgb(24, 22, 22);
-    padding: $small;
-    padding-left: 2.25rem;
+    padding: $small $small $small 2.25rem;
 
     .icon {
       position: absolute;

src/components/LeftSidebar/Navigation.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 
 const menus = [
   {
@@ -71,10 +70,9 @@ const props = defineProps({
 }
 
 .side-nav-container {
-  padding: $small;
   color: #fff;
   margin-bottom: 1rem;
-  padding-top: 10px;
+  padding: 10px $small $small;
   margin-top: 1rem;
   text-transform: capitalize;
 

src/components/PlaylistView/FeaturedArtists.vue

@@ -132,14 +132,14 @@ export default {
   transition: all 0.5s ease-in-out;
 
   &:hover {
-    background-position: 0%;
+    background-position: 0;
   }
 
   p {
     margin-left: 1rem;
     font-size: 1.5rem;
     font-weight: 700;
-    text-shadow: 0px 0px 80px rgb(0, 0, 0);
+    text-shadow: 0 0 80px rgb(0, 0, 0);
   }
 }
 </style>

src/components/PlaylistView/Header.vue

@@ -40,7 +40,7 @@
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
     border-radius: $smaller;
-    box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.479);
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.479);
 
     @include phone-only {
       // border: solid;
@@ -64,12 +64,11 @@
     height: 10rem;
     bottom: $small;
     left: $small;
-    padding: $small;
     display: flex;
     flex-direction: row;
     align-items: flex-end;
-    padding-bottom: 3.5rem;
-    box-shadow: 0px 0px 1.5rem rgba(0, 0, 0, 0.658);
+    padding: $small $small 3.5rem;
+    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
 
     @include phone-only {
       width: calc(100% - 1rem);

src/components/RightSideBar/Main.vue

@@ -2,14 +2,14 @@
   <div class="r-sidebar">
     <div class="grid">
       <div class="r-content border">
-        <div class="r-dash" v-show="current_tab == tabs.home">
+        <div class="r-dash" v-show="current_tab === tabs.home">
           <DashBoard />
         </div>
-        <div class="r-search" v-show="current_tab == tabs.search">
+        <div class="r-search" v-show="current_tab === tabs.search">
           <Search />
         </div>
 
-        <div class="r-queue" v-show="current_tab == tabs.queue">
+        <div class="r-queue" v-show="current_tab === tabs.queue">
           <UpNext />
         </div>
       </div>

src/components/RightSideBar/Tabs.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="r-tabs">
     <div v-for="tab in props.tabs"
-    @click="changeTab(tab)"
-    :key="tab"
-      class="image t-item"
-      :class="{ active_tab: props.current_tab == tab }, `${tab}`"
+         @click="changeTab(tab)"
+         :key="tab"
+         class="image t-item"
+         :class="{ active_tab: props.current_tab === tab }, `${tab}`"
     ></div>
     <div>
     </div>
   </div>
 </template>
 
-<script setup>import { onMounted } from 'vue';
+<script setup>
 
 const props = defineProps({
   current_tab: String,
@@ -21,7 +21,7 @@ const props = defineProps({
 const emit = defineEmits(['changeTab'])
 
 function changeTab(tab) {
-  if (tab == props.current_tab) return;
+  if (tab === props.current_tab) return;
 
   emit('changeTab', tab)
 }
@@ -41,8 +41,7 @@ function changeTab(tab) {
     width: 100%;
     height: 2.45rem;
     background-size: 1.5rem;
-    border-radius: 0;
-      border-radius: $small 0 0 $small;
+    border-radius: $small 0 0 $small;
 
     &:hover {
       background-color: rgba(128, 128, 128, 0.281);

src/components/Search.vue

@@ -39,7 +39,7 @@
           v-if="
           !artists.artists.length &&
           !tracks.tracks.length &&
-          !albums.albums.length && query.length != 0
+          !albums.albums.length && query.length !== 0
         "
           class="no-res"
       >
@@ -47,7 +47,7 @@
           No results for <span class="highlight rounded">{{ query }}</span>
         </div>
       </div>
-      <div v-else-if="query.length == 0" class="no-res">
+      <div v-else-if="query.length === 0" class="no-res">
         <div class="no-res-text">Find your music 🔍😀</div>
       </div>
     </div>
@@ -123,14 +123,14 @@ export default {
     }
 
     watch(query, (new_query) => {
-      if (query.value == "" || query.value == "  " || query.value.length < 2) {
+      if (query.value === "" || query.value === "  " || query.value.length < 2) {
         albums.albums = [];
         artists.artists = [];
         tracks.tracks = [];
 
         return;
       }
-      ;
+
 
       searchMusic(new_query).then((res) => {
         albums.albums = res.albums.albums;

src/components/shared/ArtistCard.vue

@@ -36,13 +36,14 @@ export default {
     height: 7em;
     border-radius: 50%;
     margin-bottom: $small;
-    background: url("../../assets/images/null.webp");
     background-size: 7rem 7rem;
+    background: url("../../assets/images/null.webp");
+    background-size: 100% 100%;
     background-repeat: no-repeat;
-    background-position: center;
+    background-position: top;
     transition: all 0.5s ease-in-out;
     border: solid 1px rgba(5, 5, 5, 0.055);
-    box-shadow: 0px 0px 80px rgb(0, 0, 0);
+    box-shadow: 0 0 80px rgb(0, 0, 0);
   }
 
   &:hover {

src/components/shared/SongItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr class="songlist-item" :class="{ current: current.track_id == song.track_id }">
+  <tr class="songlist-item" :class="{ current: current.track_id === song.track_id }">
     <td class="index">{{ index }}</td>
     <td class="flex" @click="emitUpdate(song)">
       <div
@@ -8,7 +8,7 @@
       >
         <div
           class="now-playing-track image"
-          v-if="current.track_id == song.track_id"
+          v-if="current.track_id === song.track_id"
           :class="{ active: is_playing, not_active: !is_playing }"
         ></div>
       </div>
@@ -22,7 +22,7 @@
       </div>
     </td>
     <td class="song-artists">
-      <div class="ellip" v-if="song.artists[0] != ''">
+      <div class="ellip" v-if="song.artists[0] !== ''">
         <span
           class="artist"
           v-for="artist in putCommas(song.artists)"

src/components/shared/TrackItem.vue

@@ -3,7 +3,7 @@
     class="track-item h-1"
     @click="playThis(props.track)"
     :class="{
-      currentInQueue: current.track_id == props.track.track_id,
+      currentInQueue: current.track_id === props.track.track_id,
     }"
   >
     <div
@@ -14,7 +14,7 @@
     >
       <div
         class="now-playing-track image"
-        v-if="current.track_id == props.track.track_id"
+        v-if="current.track_id === props.track.track_id"
         :class="{ active: is_playing, not_active: !is_playing }"
       ></div>
     </div>
@@ -44,7 +44,7 @@ const putCommas = perks.putCommas;
 const is_playing = ref(playAudio.playing);
 
 const playThis = (song) => {
-  playAudio.playAudio(song.filepath);
+  playAudio.playAudio(song.track_id);
   perks.current.value = song;
 };
 
@@ -58,11 +58,10 @@ const playThis = (song) => {
 .track-item {
   display: flex;
   align-items: center;
-  padding: 0.5rem;
   border-radius: 0.5rem;
   position: relative;
   height: 4rem;
-  padding-left: 4rem;
+  padding: 0.5rem 0.5rem 0.5rem 4rem;
 
   &:hover {
     cursor: pointer;