fix fuzzy search: FuseTrackOptions

+ reduce width required to hide sidebar automatically
+ move ArtistAlbumsFetcher.vue to components folder
+ escape ALT button in keyboard shortcuts
+ use elem.dispatchEvent to toggle page search

src/components/AlbumView/GenreBanner.vue

@@ -36,10 +36,11 @@ onMounted(async () => {
 .genres-banner.nocontrast {
   color: $black;
 }
+
 .genres-banner {
   display: flex;
   gap: 1rem;
-  margin-top: 1rem;
+  margin-top: 2rem;
   font-size: 0.9rem;
   padding-left: $medium;
   text-transform: capitalize;

src/components/shared/NavSearchInput.vue

@@ -2,6 +2,7 @@
   <div class="header-input-wrapper rounded-sm" :class="{ showInput: clicked }">
     <button
       class="search-btn circular"
+      id="page-search-trigger"
       :class="{ 'btn-active': clicked }"
       @click="handleFocus"
     >

src/components/shared/SongItem.vue

@@ -21,8 +21,15 @@
         ></div>
       </div>
       <div v-tooltip class="song-title">
-        <div class="title ellip" @click.prevent="emitUpdate" ref="artisttitle">
-          {{ track.title }}
+        <div class="with-flag">
+          <span
+            class="title ellip"
+            @click.prevent="emitUpdate"
+            ref="artisttitle"
+          >
+            {{ track.title }}
+          </span>
+          <span v-if="(track.bitrate > 1024)" class="master-flag"><b>M</b> </span>
         </div>
         <div class="isSmallArtists" style="display: none">
           <ArtistName
@@ -71,7 +78,6 @@ import HeartSvg from "@/assets/icons/heart.svg";
 import OptionSvg from "@/assets/icons/more.svg";
 import ArtistName from "./ArtistName.vue";
 
-const context_on = ref(false);
 const imguri = paths.images.thumb.small;
 const context_menu_showing = ref(false);
 
@@ -110,7 +116,27 @@ function showMenu(e: MouseEvent) {
   padding-left: $small;
 
   .song-title {
+    .with-flag {
+      display: flex;
+      align-items: center;
+    }
+
+    .master-flag {
+      font-size: 10px;
+      margin-left: $smaller;
+      background-color: rgba(184, 108, 21, 0.281);
+      color: rgb(255, 153, 0);
+      padding: 2px 5px;
+      border-radius: 5px;
+      opacity: .75;
+    }
+
     cursor: pointer;
+    // outline: solid 1px;
+
+    .title {
+      margin-bottom: 2px;
+    }
   }
 
   &:hover {

src/composables/enums.ts

@@ -43,8 +43,8 @@ export const FuseTrackOptions = {
   keys: [
     { name: "title", weight: 1 },
     { name: "album", weight: 0.7 },
-    { name: "artists", weight: 0.5 },
-    { name: "albumartists", weight: 0.25 },
+    { name: "artist.name", weight: 0.5 },
+    { name: "albumartist", weight: 0.25 },
   ],
 };
 

src/composables/useBreakpoints.ts

@@ -1,7 +1,7 @@
 import { useBreakpoints } from "@vueuse/core";
 
 const breakpoints = useBreakpoints({
-  xl: 1536,
+  xl: 1280,
   xxl: 1720,
 });
 

src/composables/useKeyboard.ts

@@ -3,15 +3,20 @@ import useQStore from "@/stores/queue";
 let key_down_fired = false;
 
 function focusPageSearchBox() {
-  const elem = document.getElementById("page-search") as HTMLInputElement;
-
-  elem.focus();
+  const elem = document.getElementById(
+    "page-search-trigger"
+  ) as HTMLButtonElement;
+  if (elem) {
+    elem.dispatchEvent(new MouseEvent("click", { bubbles: false }));
+  }
 }
 
 export default function (queue: typeof useQStore) {
   const q = queue();
   window.addEventListener("keydown", (e: KeyboardEvent) => {
     const target = e.target as HTMLElement;
+    // if alt is pressed, don't do anything
+    if (e.altKey) return;
     let ctrlKey = e.ctrlKey;
 
     function FocusedOnInput(target: HTMLElement) {

src/interfaces.ts

@@ -15,7 +15,7 @@ export interface Track extends AlbumDisc {
   folder?: string;
   filepath?: string;
   duration?: number;
-  bitrate?: number;
+  bitrate: number;
   genre?: string;
   image: string;
   track: number;

src/utils/useFuse.ts

@@ -1,5 +1,4 @@
 import { useFuse } from "@vueuse/integrations/useFuse";
-import { Ref } from "vue";
 
 /**
  * Fuzzy search using Fuse.js

src/views/AlbumView/index.vue

@@ -22,11 +22,7 @@
 
 <script setup lang="ts">
 import { computed } from "@vue/reactivity";
-import {
-  onBeforeRouteLeave,
-  onBeforeRouteUpdate,
-  RouteLocationNormalized,
-} from "vue-router";
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
 import { Track } from "@/interfaces";
 import { createTrackProps } from "@/utils";
@@ -74,7 +70,7 @@ class songItem {
 const genreBanner: ScrollerItem = {
   id: "genre-banner",
   component: GenreBanner,
-  size: 64,
+  size: 80,
 };
 
 function getSongItems() {

src/views/ArtistView/Main.vue

@@ -36,9 +36,9 @@ import Header from "@/components/ArtistView/Header.vue";
 import TopTracks from "@/components/ArtistView/TopTracks.vue";
 import useArtistPageStore from "@/stores/pages/artist";
 import ArtistAlbums from "@/components/AlbumView/ArtistAlbums.vue";
-import ArtistAlbumsFetcher from "./ArtistAlbumsFetcher.vue";
+import ArtistAlbumsFetcher from "@/components/ArtistView/ArtistAlbumsFetcher.vue";
 import { computed } from "vue";
-import { onBeforeRouteUpdate } from "vue-router";
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
 const store = useArtistPageStore();
 
@@ -86,9 +86,14 @@ const scrollerItems = computed(() => {
 });
 
 onBeforeRouteUpdate(async (to) => {
-
   await store.getData(to.params.hash as string);
 });
+
+onBeforeRouteLeave(async () => {
+  setTimeout(() => {
+    store.resetAlbums();
+  }, 400);
+});
 </script>
 
 <style lang="scss">