rebuild search route with custom pages for tracks, album, and artists

src/components/LeftSidebar/Navigation.vue

@@ -57,7 +57,7 @@ const menus = [
   {
     name: "search",
     route_name: Routes.search,
-    params: { page: "top" },
+    params: { page: "tracks" },
     icon: SearchSvg,
   },
   {

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="artists-results" v-auto-animate>
     <div
-      v-auto-animate
       class="search-results-grid"
       v-if="album_grid == true && search.albums.value.length"
     >
       <AlbumCard v-for="a in search.albums.value" :key="a.albumid" :album="a" />
     </div>
     <div
-      v-auto-animate
       class="search-results-grid"
       v-else-if="!album_grid && search.artists.value.length"
     >

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tracks-results" class="noscroll">
-    <div v-if="search.tracks.value.length" v-auto-animate>
+    <div v-if="search.tracks.value.length">
       <TrackComponent
         v-for="(track, index) in search.tracks.value"
         :key="track.trackid"
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 
 import SongItem from "@/components/shared/SongItem.vue";
 import TrackItem from "@/components/shared/TrackItem.vue";
@@ -51,4 +51,8 @@ let use_song_item: boolean = false;
 if (props.isOnSearchPage) {
   use_song_item = true;
 }
+
+onMounted(() => {
+  search.switchTab("tracks");
+});
 </script>

src/components/nav/Titles/Folder.vue

@@ -36,7 +36,7 @@
 import SearchInput from "@/components/shared/NavSearchInput.vue";
 import { Routes } from "@/composables/enums";
 import { subPath } from "@/interfaces";
-import { focusElem } from "@/utils";
+import { focusElemByClass } from "@/utils";
 import { onUpdated } from "vue";
 
 defineProps<{
@@ -44,7 +44,7 @@ defineProps<{
 }>();
 
 onUpdated(() => {
-  focusElem("inthisfolder");
+  focusElemByClass("inthisfolder");
 });
 </script>
 

src/components/shared/AlbumCard.vue

@@ -30,6 +30,7 @@ defineProps<{
   gap: $small;
   padding: $medium;
   border-radius: 1rem;
+  height: fit-content;
 
   &:hover {
     background-color: $gray4;

src/components/shared/ArtistCard.vue

@@ -32,6 +32,7 @@ defineProps<{
   padding: 1.2rem 1rem !important;
   font-size: 0.9rem;
   font-weight: bolder;
+  height: fit-content;
 
   &:hover {
     background-color: $gray4;