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

src/components/RightSideBar/Home/Recommendation.vue

@@ -60,7 +60,6 @@ const songs = [
 
     &:hover {
       background-color: #3a39393d;
-      cursor: pointer;
     }
   }
 }

src/components/RightSideBar/Queue.vue

@@ -10,10 +10,11 @@
         v-for="(t, index) in queue.tracklist"
         :key="index"
         :track="t"
-        :index="index + 1"
+        :index="index"
         :isPlaying="queue.playing"
         :isHighlighted="false"
         :isCurrent="index === queue.currentindex"
+        :isQueueTrack="true"
         @PlayThis="playFromQueue(index)"
       />
     </div>

src/components/RightSideBar/Queue/playingFrom.vue

@@ -1,150 +0,0 @@
-<template>
-  <div id="playing-from" class="bg-primary rounded" @click="goTo">
-    <div class="h">
-      <div class="icon image" :class="from.icon"></div>
-      Playing from
-    </div>
-    <div class="name">
-      <div id="to">
-        {{ from.text }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { FromOptions } from "@/composables/enums";
-import {
-fromAlbum, fromFolder, fromPlaylist,
-fromSearch
-} from "@/interfaces";
-import { computed } from "@vue/reactivity";
-import { useRouter } from "vue-router";
-
-const props = defineProps<{
-  from: fromFolder | fromAlbum | fromPlaylist | fromSearch;
-}>();
-
-interface from {
-  icon: string;
-  text: string;
-}
-
-const from = computed((): from => {
-  switch (props.from.type) {
-    case undefined:
-      return {
-        icon: "album",
-        text: "Welcome to Alice",
-      };
-    case FromOptions.folder:
-      return {
-        icon: "folder",
-        text: props.from.name,
-      };
-    case FromOptions.album:
-      return {
-        icon: "album",
-        text: `${props.from.name} - ${props.from.albumartist}`,
-      };
-    case FromOptions.playlist:
-      return {
-        icon: "playlist",
-        text: props.from.name,
-      };
-    case FromOptions.search:
-      return {
-        icon: "search",
-        text: `Search results for: "${props.from.query}"`,
-      };
-  }
-});
-
-const router = useRouter();
-
-function goToAlbum(from: fromAlbum) {
-  router.push({
-    name: "AlbumView",
-    params: {
-      hash: from.hash,
-    },
-  });
-}
-
-function goToFolder(from: fromFolder) {
-  router.push({
-    name: "FolderView",
-    params: {
-      path: from.path,
-    },
-  });
-}
-
-function goToPlaylist(from: fromPlaylist) {
-  router.push({
-    name: "PlaylistView",
-    params: {
-      pid: from.playlistid,
-    },
-  });
-}
-
-function goTo() {
-  switch (props.from.type) {
-    case FromOptions.folder:
-      goToFolder(props.from);
-      break;
-    case FromOptions.album:
-      goToAlbum(props.from);
-      break;
-    case FromOptions.playlist:
-      goToPlaylist(props.from);
-      break;
-  }
-}
-</script>
-
-<style lang="scss">
-#playing-from {
-  background-size: 120%;
-  padding: 0.75rem;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s ease;
-  background-color: $black;
-
-  &:hover {
-    background-position: -4rem;
-  }
-
-  .name {
-    font-weight: bolder;
-  }
-
-  .h {
-    font-size: 0.9rem;
-    margin-bottom: $small;
-    display: flex;
-    align-items: center;
-    gap: $small;
-    color: rgba(255, 255, 255, 0.849);
-
-    .icon {
-      height: 1.25rem;
-      width: 1.25rem;
-    }
-
-    .folder {
-      background-image: url("../../../assets/icons/folder.fill.svg") !important;
-    }
-
-    .album {
-      background-image: url("../../../assets/icons/album.svg") !important;
-    }
-
-    .playlist {
-      background-image: url("../../../assets/icons/playlist.svg") !important;
-    }
-  }
-}
-</style>

src/components/RightSideBar/Queue/upNext.vue

@@ -50,7 +50,6 @@ function showMenu(e: Event) {
   gap: 1rem;
   padding: 1rem;
   width: 100%;
-  cursor: pointer;
 
   &:hover {
     background-color: $gray4;

src/components/RightSideBar/Search/TracksGrid.vue

@@ -8,7 +8,8 @@
         :isHighlighted="false"
         :isPlaying="queue.playing"
         :track="track"
-        @PlayThis="updateQueue(index)"
+        @playThis="updateQueue(index)"
+        :index="index + 1"
       />
     </div>
     <div v-else class="t-center"><h5>🤷</h5></div>
@@ -17,12 +18,13 @@
 </template>
 
 <script setup lang="ts">
+  import { computed } from "vue";
+  
 import LoadMore from "./LoadMore.vue";
 import TrackItem from "@/components/shared/TrackItem.vue";
 import SongItem from "@/components/shared/SongItem.vue";
-import useQStore from "../../../stores/queue";
-import useSearchStore from "../../../stores/search";
-import { computed } from "vue";
+import useQStore from "@/stores/queue";
+import useSearchStore from "@/stores/search";
 
 const queue = useQStore();
 const search = useSearchStore();