modify queue page to use the correct track component

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,24 +1,14 @@
 <template>
   <div id="tracks-results">
     <div v-if="search.tracks.value.length">
-      <div v-if="use_song_item">
-        <SongItem
-          v-for="track in search.tracks.value"
+      <div>
+        <TrackComponent
+          v-for="(track, index) in search.tracks.value"
           :key="track.trackid"
           :isCurrent="queue.currentid == track.trackid"
           :isHighlighted="false"
           :isPlaying="queue.playing"
           :track="track"
-        />
-      </div>
-      <div v-else>
-        <TrackItem
-          v-for="(track, index) in search.tracks.value"
-          :key="track.trackid"
-          :track="track"
-          :isPlaying="queue.playing"
-          :isCurrent="queue.currentid == track.trackid"
-          :isSearchTrack="true"
           @PlayThis="updateQueue(index)"
         />
       </div>
@@ -34,6 +24,7 @@ import TrackItem from "@/components/shared/TrackItem.vue";
 import SongItem from "@/components/shared/SongItem.vue";
 import useQStore from "../../../stores/queue";
 import useSearchStore from "../../../stores/search";
+import { computed } from "vue";
 
 const queue = useQStore();
 const search = useSearchStore();
@@ -47,6 +38,14 @@ const props = defineProps<{
   isOnSearchPage?: boolean;
 }>();
 
+const TrackComponent = computed(() => {
+  if (props.isOnSearchPage) {
+    return SongItem;
+  }
+
+  return TrackItem;
+});
+
 let use_song_item: boolean = false;
 
 if (props.isOnSearchPage) {