use tabs to seperate search results

src/components/RightSideBar/Search/TracksGrid.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="tracks-results" v-if="search.tracks.value">
+    <TransitionGroup name="list">
+      <TrackItem
+        v-for="track in search.tracks.value"
+        :key="track.trackid"
+        :track="track"
+        :isPlaying="queue.playing"
+        :isCurrent="queue.current.trackid == track.trackid"
+        :isSearchTrack="true"
+        @PlayThis="updateQueue"
+      />
+    </TransitionGroup>
+    <LoadMore v-if="search.tracks.more" @loadMore="loadMore" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LoadMore from "./LoadMore.vue";
+import TrackItem from "../../shared/TrackItem.vue";
+import useQStore from "../../../stores/queue";
+import { Track } from "../../../interfaces";
+import useSearchStore from "../../../stores/search";
+
+let counter = 0;
+const queue = useQStore();
+const search = useSearchStore();
+
+function loadMore() {
+  counter += 5;
+  search.loadTracks(counter);
+}
+
+function updateQueue(track: Track) {
+  queue.playFromSearch(search.query, search.tracks.value);
+  queue.play(track);
+}
+</script>
+
+<style lang="scss">
+.right-search #tracks-results {
+  border-radius: 0.5rem;
+  padding: $small;
+  height: 100% !important;
+  overflow: hidden;
+  
+  .list-enter-active,
+  .list-leave-active {
+    transition: all 0.5s ease;
+    transition-delay: 0.5s;
+  }
+  .list-enter-from,
+  .list-leave-to {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+}
+</style>