prevent type coercion

- remove unused imports
- minor refactors and cleanups

src/views/AlbumView.vue

@@ -19,7 +19,7 @@
 import { useRoute } from "vue-router";
 import { onMounted } from "@vue/runtime-core";
 import { onUnmounted } from "@vue/runtime-core";
-import { watch, ref } from "vue";
+import { watch } from "vue";
 import Header from "../components/AlbumView/Header.vue";
 import AlbumBio from "../components/AlbumView/AlbumBio.vue";
 
@@ -42,7 +42,7 @@ export default {
     watch(
       () => route.params,
       () => {
-        if (route.name == "AlbumView") {
+        if (route.name === "AlbumView") {
           routeLoader.toAlbum(route.params.album, route.params.artist);
         }
       }

src/views/FolderView.vue

@@ -1,26 +1,26 @@
 <template>
-  <div id="f-view-parent" class="card-dark">
+  <div id="f-view-parent" class="border rounded card-dark">
     <div class="fixed">
-      <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
+      <Header :path="path" :first_song="songs[0]" @search="updateQueryString"/>
     </div>
     <div id="scrollable" ref="scrollable">
-      <FolderList :folders="folders" />
+      <FolderList :folders="folders"/>
       <div class="separator" v-if="folders.length && songs.length"></div>
-      <SongList :songs="songs" />
+      <SongList :songs="songs"/>
     </div>
   </div>
 </template>
 
 <script>
-import { computed, ref } from "@vue/reactivity";
-import { useRoute } from "vue-router";
+import {computed, ref} from "@vue/reactivity";
+import {useRoute} from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import Header from "@/components/FolderView/Header.vue";
 
 import getTracksAndDirs from "../composables/getFiles.js";
-import { onMounted, watch } from "@vue/runtime-core";
+import {onMounted, watch} from "@vue/runtime-core";
 import state from "@/composables/state.js";
 
 export default {
@@ -46,9 +46,9 @@ export default {
       if (query.value.length > 1) {
         for (let i = 0; i < song_list.value.length; i++) {
           if (
-            song_list.value[i].title
-              .toLowerCase()
-              .includes(query.value.toLowerCase())
+              song_list.value[i].title
+                  .toLowerCase()
+                  .includes(query.value.toLowerCase())
           ) {
             songs_.push(song_list.value[i]);
           }
@@ -66,9 +66,9 @@ export default {
       if (query.value.length > 1) {
         for (let i = 0; i < folders_list.value.length; i++) {
           if (
-            folders_list.value[i].name
-              .toLowerCase()
-              .includes(query.value.toLowerCase())
+              folders_list.value[i].name
+                  .toLowerCase()
+                  .includes(query.value.toLowerCase())
           ) {
             folders_.push(folders_list.value[i]);
           }
@@ -84,19 +84,19 @@ export default {
       const getDirData = (path) => {
         state.loading.value = true;
         getTracksAndDirs(path)
-          .then((data) => {
-            scrollable.value.scrollTop = 0;
+            .then((data) => {
+              scrollable.value.scrollTop = 0;
 
-            state.folder_song_list.value = data.songs;
-            state.folder_list.value = data.folders;
+              state.folder_song_list.value = data.songs;
+              state.folder_list.value = data.folders;
 
-            state.loading.value = false;
-          })
-          .then(() => {
-            setTimeout(() => {
-              query.value = "";
-            }, 100);
-          });
+              state.loading.value = false;
+            })
+            .then(() => {
+              setTimeout(() => {
+                query.value = "";
+              }, 100);
+            });
       };
 
       getDirData(path.value);
@@ -130,7 +130,7 @@ export default {
   position: relative;
   padding: 4rem $small 0 $small;
   overflow: hidden;
-  margin: 0;
+  margin: $small;
 }
 
 #f-view-parent .fixed {