Implement fuzzy page search using fuse.js (#86)

src/views/FolderView.vue

@@ -24,7 +24,11 @@
 
 <script setup lang="ts">
 import { ref } from "@vue/reactivity";
-import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
+import {
+  onBeforeRouteLeave,
+  onBeforeRouteUpdate,
+  RouteLocationNormalized,
+} from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
@@ -47,24 +51,27 @@ function getFolderName(route: RouteLocationNormalized) {
 }
 
 function playFromPage(index: number) {
-  queue.playFromFolder(folder.path, folder.tracks);
+  queue.playFromFolder(folder.path, folder.allTracks);
   queue.play(index);
 }
 
 onBeforeRouteUpdate((to, from) => {
-  if (isSameRoute(to, from)) return;
-
   loader.startLoading();
   folder
     .fetchAll(to.params.path as string)
 
     .then(() => {
       scrollable.value.scrollTop = 0;
+      folder.resetQuery();
     })
     .then(() => {
       loader.stopLoading();
     });
 });
+
+onBeforeRouteLeave(() => {
+  setTimeout(() => folder.resetQuery(), 500);
+});
 </script>
 
 <style lang="scss">