use songitem component on search page track items

src/components/AlbumView/Header.vue

@@ -40,8 +40,11 @@
         />
       </div>
     </div>
-    <div class="rounded shadow-lg bigimg">
+    <div
-      <img :src="imguri.thumb + album.image" />
+      class="rounded shadow-lg image bigimg"
+      :style="{ backgroundImage: `url(${imguri.thumb + album.image})` }"
+    >
+      <!-- <img :src="imguri.thumb + album.image" /> -->
     </div>
   </div>
 </template>
@@ -92,7 +95,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
 <style lang="scss">
 .a-header {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr max-content;
   gap: 1rem;
   padding: 1rem;
   height: 100% !important;
@@ -102,13 +105,15 @@ useVisibility(albumheaderthing, handleVisibilityState);
 
   .bigimg {
     height: 100%;
-    word-break: break-all;
+    width: 16rem;
     overflow: hidden;
 
     img {
-      width: 100%;
+      height: 100%;
       aspect-ratio: 1;
+
       object-fit: cover;
+      object-position: bottom;
     }
   }
 

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">
+    <div v-if="search.tracks.value.length">
-      <TrackItem
+      <div v-if="use_song_item">
-        v-for="(track, index) in search.tracks.value"
+        <SongItem
-        :key="track?.trackid"
+          v-for="track in search.tracks.value"
-        :track="track"
+          :key="track.trackid"
-        :isPlaying="queue.playing"
+          :isCurrent="queue.currentid == track.trackid"
-        :isCurrent="queue.currentid == track.trackid"
+          :isHighlighted="false"
-        :isSearchTrack="true"
+          :isPlaying="queue.playing"
-        @PlayThis="updateQueue(index)"
+          :track="track"
-      />
+        />
-    </TransitionGroup>
+      </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>

src/stores/search.ts

@@ -89,7 +89,7 @@ export default defineStore("search", () => {
   }
 
   function loadTracks() {
-    loadCounter.tracks += 6;
+    loadCounter.tracks += 12;
 
     loadMoreTracks(loadCounter.tracks)
       .then((res) => {
@@ -100,7 +100,7 @@ export default defineStore("search", () => {
   }
 
   function loadAlbums() {
-    loadCounter.albums += 6;
+    loadCounter.albums += 12;
 
     loadMoreAlbums(loadCounter.albums)
       .then((res) => {
@@ -115,7 +115,7 @@ export default defineStore("search", () => {
   }
 
   function loadArtists() {
-    loadCounter.artists += 6;
+    loadCounter.artists += 12;
 
     loadMoreArtists(loadCounter.artists)
       .then((res) => {
@@ -186,8 +186,6 @@ export default defineStore("search", () => {
     currentTab.value = tab;
   }
 
-  setTimeout(() => {}, 3000);
-
   return {
     tracks,
     albums,

src/views/Search.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="search-view">
     <div class="scrollable">
-      <Main />
+      <Main :isOnSearchPage="true" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 import Main from "@/components/RightSideBar/Search/Main.vue";
 </script>