use songitem component on search page track items

src/components/RightSideBar/Search/Main.vue

@@ -2,7 +2,7 @@
   <div class="right-search">
     <TabsWrapper>
       <Tab name="tracks">
-        <TracksGrid />
+        <TracksGrid :isOnSearchPage="isOnSearchPage" />
       </Tab>
       <Tab name="albums">
         <ArtistGrid :album_grid="true" />
@@ -19,6 +19,10 @@ import ArtistGrid from "./ArtistGrid.vue";
 import Tab from "./Tab.vue";
 import TabsWrapper from "./TabsWrapper.vue";
 import TracksGrid from "./TracksGrid.vue";
+
+const props = defineProps<{
+  isOnSearchPage?: boolean;
+}>();
 </script>
 
 <style lang="scss">
@@ -36,7 +40,6 @@ import TracksGrid from "./TracksGrid.vue";
     color: $white;
   }
 
-
   .input {
     display: flex;
     align-items: center;

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,16 +1,28 @@
 <template>
   <div id="tracks-results">
-    <TransitionGroup name="list"  v-if="search.tracks.value.length">
-      <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)"
-      />
-    </TransitionGroup>
+    <div v-if="search.tracks.value.length">
+      <div v-if="use_song_item">
+        <SongItem
+          v-for="track 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>
+    </div>
     <div v-else class="t-center"><h5>🤷</h5></div>
     <LoadMore v-if="search.tracks.more" :loader="search.loadTracks" />
   </div>
@@ -18,7 +30,8 @@
 
 <script setup lang="ts">
 import LoadMore from "./LoadMore.vue";
-import TrackItem from "../../shared/TrackItem.vue";
+import TrackItem from "@/components/shared/TrackItem.vue";
+import SongItem from "@/components/shared/SongItem.vue";
 import useQStore from "../../../stores/queue";
 import useSearchStore from "../../../stores/search";
 
@@ -29,22 +42,21 @@ function updateQueue(index: number) {
   queue.playFromSearch(search.query, search.tracks.value);
   queue.play(index);
 }
+
+const props = defineProps<{
+  isOnSearchPage?: boolean;
+}>();
+
+let use_song_item: boolean = false;
+
+if (props.isOnSearchPage) {
+  use_song_item = true;
+}
 </script>
 
 <style lang="scss">
 .right-search #tracks-results {
   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>