fix albumView using watch function

- other minor changes to almost all files

src/views/AlbumView.vue

@@ -10,7 +10,7 @@
     <div class="separator" id="av-sep"></div>
     <FeaturedArtists :artists="artists" />
     <div class="separator" id="av-sep"></div>
-    <AlbumBio :bio="bio" v-if="bio"/>
+    <AlbumBio :bio="bio" v-if="bio" />
     <div class="separator" id="av-sep"></div>
   </div>
 </template>
@@ -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 Header from "../components/AlbumView/Header.vue";
 import AlbumBio from "../components/AlbumView/AlbumBio.vue";
 
@@ -27,7 +27,7 @@ import SongList from "../components/FolderView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
 import state from "@/composables/state.js";
-import routeLoader from "@/composables/routeLoader.js"
+import routeLoader from "@/composables/routeLoader.js";
 
 export default {
   components: {
@@ -38,13 +38,16 @@ export default {
   },
   setup() {
     const route = useRoute();
-    const title = route.params.album;
-    const album_artists = route.params.artist;
+
+    watch(
+      () => route.params,
+      () => {
+        routeLoader.toAlbum(route.params.album, route.params.artist);
+      }
+    );
 
     onMounted(() => {
-      if (!state.album_song_list.value.length) {
-        routeLoader.toAlbum(title, album_artists);
-      }
+        routeLoader.toAlbum(route.params.album, route.params.artist);
     });
 
     onUnmounted(() => {
@@ -69,7 +72,7 @@ export default {
   height: calc(100% - 1rem);
   overflow: auto;
   margin-top: $small;
-
+  scrollbar-width: none;
   .songs {
     padding: $small;
     background-color: $card-dark;
@@ -83,4 +86,4 @@ export default {
     border: none;
   }
 }
-</style>
+</style>

src/views/FolderView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <Header :path="path" :first_song="songs[0]" @search="filterSongs" />
+      <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
@@ -19,7 +19,7 @@ import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import Header from "@/components/FolderView/Header.vue";
 
-import getData from "../composables/getFiles.js";
+import getTracksAndDirs from "../composables/getFiles.js";
 import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 
@@ -34,16 +34,16 @@ export default {
     const path = ref(route.params.path);
 
     const song_list = ref(state.folder_song_list);
-    const folders = ref(state.folder_list);
+    const folders_list = ref(state.folder_list);
 
     const scrollable = ref(null);
 
-    const query = ref('');
+    const query = ref("");
 
     const songs = computed(() => {
       const songs_ = [];
 
-      if (query.value.length > 2) {
+      if (query.value.length > 1) {
         for (let i = 0; i < song_list.value.length; i++) {
           if (
             song_list.value[i].title
@@ -60,37 +60,62 @@ export default {
       }
     });
 
+    const folders = computed(() => {
+      const folders_ = [];
+
+      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_.push(folders_list.value[i]);
+          }
+        }
+
+        return folders_;
+      } else {
+        return folders_list.value;
+      }
+    });
+
     onMounted(() => {
-      const getPathFolders = (path, last_id) => {
+      const getDirData = (path) => {
         state.loading.value = true;
-        getData(path, last_id).then((data) => {
-          scrollable.value.scrollTop = 0;
+        getTracksAndDirs(path)
+          .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;
-        });
+            state.loading.value = false;
+          })
+          .then(() => {
+            setTimeout(() => {
+              query.value = "";
+            }, 100);
+          });
       };
 
-      getPathFolders(path.value);
+      getDirData(path.value);
 
       watch(route, (new_route) => {
-        state.search_query.value = "";
         path.value = new_route.params.path;
 
         if (!path.value) return;
 
-        getPathFolders(path.value);
+        getDirData(path.value);
       });
     });
 
-    function filterSongs(value) {
+    function updateQueryString(value) {
       query.value = value;
     }
 
     return {
-      filterSongs,
+      updateQueryString,
       songs,
       folders,
       path,
@@ -129,4 +154,4 @@ export default {
     }
   }
 }
-</style>
+</style>