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

src/components/shared/ArtistCard.vue

@@ -32,7 +32,6 @@ defineProps<{
   border-radius: 0.75rem;
   display: grid;
   justify-content: center;
-  cursor: pointer;
 
   .artist-image {
     width: 100%;

src/components/shared/ArtistName.vue

@@ -1,13 +1,13 @@
 <template>
-  <div v-tooltip="returnArtists()" style="width: auto;">
-    <div class="ellip" v-if="artists[0] !== '' && artists.length > 1">
+  <div v-tooltip="returnArtists()" style="width: auto">
+    <div class="ellip" v-if="artists[0] === '' && artists.length === 1">
+      <span>{{ albumartist }}</span>
+    </div>
+    <div class="ellip" v-else>
       <span v-for="artist in putCommas(artists)" :key="artist">{{
         artist
       }}</span>
     </div>
-    <div class="ellip" v-else>
-      <span>{{ albumartist }}</span>
-    </div>
   </div>
 </template>
 

src/components/shared/Input.vue

@@ -0,0 +1,59 @@
+<template>
+  <input
+    type="search"
+    class="header-input rounded-sm pad-sm"
+    placeholder="search here"
+    v-model.trim="source"
+    id="page-search"
+  />
+</template>
+
+<script setup lang="ts">
+import usePStore from "@/stores/pages/playlist";
+import useFolderStore from "@/stores/pages/folder";
+import useAlbumStore from "@/stores/pages/album";
+
+import { storeToRefs } from "pinia";
+import { Routes } from "@/composables/enums";
+
+const { query: playlistQuery } = storeToRefs(usePStore());
+const { query: folderQuery } = storeToRefs(useFolderStore());
+const { query: albumQuery } = storeToRefs(useAlbumStore());
+
+const props = defineProps<{
+  page: Routes | string;
+}>();
+
+function getRef() {
+  switch (props.page) {
+    case Routes.playlist:
+      return playlistQuery;
+
+    case Routes.folder:
+      return folderQuery;
+
+    case Routes.album:
+      return albumQuery;
+
+    default:
+      return null;
+  }
+}
+
+const source = getRef();
+</script>
+
+<style lang="scss">
+.header-input {
+  background-color: $gray3;
+  outline: none;
+  border: none;
+  color: inherit;
+  font-size: 1rem;
+  z-index: 200;
+
+  &:focus {
+    outline: solid;
+  }
+}
+</style>

src/components/shared/SongItem.vue

@@ -5,7 +5,9 @@
     @dblclick="emitUpdate(track)"
     @contextmenu.prevent="showMenu"
   >
-    <div class="index t-center ellip">{{ index }}</div>
+    <div class="index t-center ellip">
+      {{ index }}
+    </div>
     <div class="flex">
       <div @click="emitUpdate(track)" class="thumbnail">
         <img
@@ -54,6 +56,7 @@
       class="options-icon circular"
       :class="{ options_button_clicked }"
       @click.stop="showMenu"
+      @dblclick.stop="() => {}"
     >
       <OptionSvg />
     </div>
@@ -79,17 +82,17 @@ const artisttitle = ref<HTMLElement | null>(null);
 
 const props = defineProps<{
   track: Track;
-  index?: number;
+  index: number;
   isPlaying: Boolean;
   isCurrent: Boolean;
 }>();
 
 const emit = defineEmits<{
-  (e: "updateQueue"): void;
+  (e: "playThis"): void;
 }>();
 
 function emitUpdate(track: Track) {
-  emit("updateQueue");
+  emit("playThis");
 }
 
 function showMenu(e: Event) {
@@ -118,7 +121,7 @@ function showMenu(e: Event) {
 
   .song-album {
     max-width: max-content;
-    cursor: pointer;
+    cursor: pointer !important;
 
     &:hover {
       text-decoration: underline;
@@ -128,10 +131,6 @@ function showMenu(e: Event) {
   .song-artists {
     width: fit-content;
     max-width: 100%;
-
-    .artist {
-      cursor: pointer;
-    }
   }
 
   .index {
@@ -158,7 +157,6 @@ function showMenu(e: Event) {
 
     svg {
       transition: all 0.2s ease-in;
-      // transform: rotate(90deg);
       stroke: $track-btn-svg;
 
       circle {
@@ -196,10 +194,6 @@ function showMenu(e: Event) {
       left: $small;
       top: $small;
     }
-
-    .title {
-      cursor: pointer;
-    }
   }
 
   td {

src/components/shared/TrackItem.vue

@@ -24,14 +24,7 @@
       </div>
       <hr />
       <div class="artist">
-        <div class="ellip" v-if="track.artists[0] !== ''">
-          <span v-for="artist in putCommas(track.artists)" :key="artist">{{
-            artist
-          }}</span>
-        </div>
-        <div class="ellip" v-else>
-          <span>{{ track.albumartist }}</span>
-        </div>
+        <ArtistName :artists="track.artists" :albumartist="track.albumartist" />
       </div>
     </div>
     <div
@@ -47,12 +40,12 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { paths } from "@/config";
-import { putCommas } from "@/utils";
-import { Track } from "@/interfaces";
+import DelSvg from "@/assets/icons/delete.svg";
 import { showTrackContextMenu as showContext } from "@/composables/context";
-import DelSvg from "@/assets/icons/plus.svg";
+import { paths } from "@/config";
+import { Track } from "@/interfaces";
 import useQueueStore from "@/stores/queue";
+import ArtistName from "./ArtistName.vue";
 
 const props = defineProps<{
   track: Track;
@@ -70,11 +63,11 @@ function showMenu(e: Event) {
 }
 
 const emit = defineEmits<{
-  (e: "PlayThis"): void;
+  (e: "playThis"): void;
 }>();
 
 const playThis = (track: Track) => {
-  emit("PlayThis");
+  emit("playThis");
 };
 </script>
 
@@ -103,7 +96,7 @@ const playThis = (track: Track) => {
   .remove-track {
     opacity: 0;
     transition: all 0.25s ease;
-    transform: translateX(1rem) rotate(45deg);
+    transform: scale(0.75) translateY(1rem);
 
     &:hover {
       opacity: 1 !important;
@@ -113,10 +106,9 @@ const playThis = (track: Track) => {
   &:hover {
     .remove-track {
       opacity: 0.5;
-      transform: translateX(0) rotate(45deg);
+      transform: scale(1) translateY(0);
     }
 
-    cursor: pointer;
     background: linear-gradient(37deg, $gray4, $gray3, $gray3);
   }
 
@@ -146,6 +138,7 @@ const playThis = (track: Track) => {
   .artist {
     font-size: small;
     opacity: 0.67;
+    width: fit-content;
   }
 }
 </style>