remove highlight track mechanism

-
I found out that it's very annoying
-

src/components/FolderView/SongList.vue

@@ -23,7 +23,6 @@
         @updateQueue="updateQueue"
         :isPlaying="queue.playing"
         :isCurrent="queue.currentid == track.trackid"
-        :isHighlighted="($route.query.highlight as string) == track.hash"
       />
     </div>
     <div class="copyright" v-if="copyright && copyright()">
@@ -38,8 +37,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUpdated, ref } from "vue";
+import { ref } from "vue";
-import { onBeforeRouteUpdate, useRoute } from "vue-router";
+import { useRoute } from "vue-router";
 import { useElementSize } from "@vueuse/core";
 
 import SongItem from "../shared/SongItem.vue";
@@ -48,7 +47,6 @@ import { Routes } from "@/composables/enums";
 import { Track } from "@/interfaces";
 import useAlbumStore from "@/stores/pages/album";
 import useQStore from "@/stores/queue";
-import { focusElem } from "@/utils";
 import { computed } from "@vue/reactivity";
 
 const queue = useQStore();
@@ -66,7 +64,6 @@ const props = defineProps<{
 
 const route = useRoute();
 const routename = route.name as string;
-const highlightid = ref(route.query.highlight as string | null);
 
 const tracklistElem = ref<HTMLElement | null>(null);
 const { width, height } = useElementSize(tracklistElem);
@@ -79,38 +76,6 @@ const brk = {
 const isSmall = computed(() => width.value < brk.sm);
 const isMedium = computed(() => width.value > brk.sm && width.value < brk.md);
 
-function highlightTrack(t_hash: string) {
-  focusElem(`track-${t_hash}`, 500, "center");
-}
-
-function resetHighlight() {
-  setTimeout(() => {
-    highlightid.value = null;
-  }, 1000);
-}
-
-onBeforeRouteUpdate(async (to, from) => {
-  const h_hash = to.query.highlight as string;
-  highlightid.value = h_hash as string;
-
-  if (h_hash) {
-    highlightTrack(h_hash);
-  }
-});
-
-onUpdated(() => {
-  if (highlightid.value) {
-    highlightTrack(highlightid.value);
-    resetHighlight();
-  }
-});
-
-onMounted(() => {
-  if (highlightid.value) {
-    highlightTrack(highlightid.value);
-    resetHighlight();
-  }
-});
 /**
  * Plays a clicked track and updates the queue
  *

src/components/PlaylistsList/PlaylistCard.vue

@@ -54,8 +54,8 @@ const props = defineProps<{
     top: 0;
     background-image: linear-gradient(
       to top,
-      rgba(22, 22, 22, 0.507),
+      rgba(0, 0, 0, 0.753),
-      transparent 50%
+      transparent 60%
     );
     height: 100%;
     width: 100%;

src/components/shared/SongItem.vue

@@ -1,14 +1,7 @@
 <template>
   <div
     class="songlist-item"
-    :class="[
+    :class="[{ current: isCurrent }, { contexton: context_on }]"
-      { current: isCurrent },
-      { contexton: context_on },
-      {
-        highlighted: isHighlighted,
-      },
-    ]"
-    v-bind:class="`track-${track.hash}`"
     @dblclick="emitUpdate(track)"
     @contextmenu.prevent="showMenu"
   >
@@ -31,7 +24,7 @@
         <div class="title ellip" @click="emitUpdate(track)">
           {{ track.title }}
         </div>
-        <div class="isSmallArtists" style="display: none;">
+        <div class="isSmallArtists" style="display: none">
           <ArtistName
             :artists="track.artists"
             :albumartist="track.albumartist"
@@ -86,7 +79,6 @@ const props = defineProps<{
   index?: number;
   isPlaying: Boolean;
   isCurrent: Boolean;
-  isHighlighted: Boolean;
 }>();
 
 const emit = defineEmits<{

src/contexts/track_context.ts

@@ -5,7 +5,8 @@ import { Option } from "../interfaces";
 import Router from "../router";
 
 import {
-  addTrackToPlaylist, getAllPlaylists
+  addTrackToPlaylist,
+  getAllPlaylists,
 } from "../composables/fetch/playlists";
 
 import useModalStore from "../stores/modal";
@@ -92,7 +93,6 @@ export default async (
       Router.push({
         name: "FolderView",
         params: { path: track.folder },
-        query: { highlight: track.hash },
       });
     },
     icon: "folder",