rewrite tracks page of the search view

src/views/SearchView/albums.vue

@@ -13,18 +13,4 @@ import AlbumCard from "@/components/shared/AlbumCard.vue";
 import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
-</script>
-
-<style lang="scss">
-.search-albums-view.grid-page {
-  // max-height: 100%;
-  // display: grid;
-  // grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  // gap: 1.75rem 0;
-
-  // padding-bottom: 4rem;
-  padding-right: $small;
-
-  overflow: auto;
-}
-</style>
+</script>

src/views/SearchView/main.vue

@@ -1,19 +1,5 @@
 <template>
-  <div class="search-view content-page">
-    <div class="tabs">
-      <button
-        v-for="page in pages"
-        :class="{ 'btn-active': page === $route.params.page }"
-        @click="
-          () => {
-            $router.push({ name: Routes.search, params: { page: page } });
-            search.switchTab(page);
-          }
-        "
-      >
-        {{ page }}
-      </button>
-    </div>
+  <div class="search-view content-page" style="padding-right: 0;">
     <div ref="page" class="page no-scroll" v-auto-animate>
       <component :is="component" />
     </div>
@@ -152,23 +138,10 @@ onMounted(() => {
   height: calc(100% - 1rem);
   display: grid;
   gap: 1rem;
-  grid-template-rows: max-content 1fr;
+  grid-template-rows: 1fr max-content;
 
   margin-right: -0.75rem;
 
-  .tabs {
-    width: fit-content;
-    display: flex;
-    gap: 1rem;
-
-    & > * {
-      background-color: $gray4;
-      padding: $small 1rem;
-      border-radius: $small;
-      text-transform: capitalize;
-    }
-  }
-
   .page.no-scroll {
     overflow-x: visible;
   }
@@ -181,6 +154,7 @@ onMounted(() => {
 
     padding-bottom: 4rem;
     overflow: auto;
+    padding-right: $medium;
   }
 
   button.load-more {

src/views/SearchView/tracks.vue

@@ -1,19 +1,32 @@
 <template>
   <div class="search-tracks-view">
-    <div class="no-scroll">
-      <Layout
-        :no_header="true"
-        :tracks="search.tracks.value"
-        @playFromPage="playFromSearch"
-      />
+    <div
+      :class="{ isSmall, isMedium }"
+      style="height: 100%"
+    >
+      <RecycleScroller
+        id="songlist-scroller"
+        style="height: 100%"
+        :items="search.tracks.value.map((track) => ({ track, id: Math.random() }))"
+        :item-size="64"
+        key-field="id"
+        v-slot="{ item, index }"
+      >
+        <SongItem
+          :track="item.track"
+          :index="index + 1"
+          @playThis="playFromSearch(index)"
+        />
+      </RecycleScroller>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Layout from "@/layouts/HeaderAndVList.vue";
 import useQueueStore from "@/stores/queue";
 import useSearchStore from "@/stores/search";
+import { isMedium, isSmall } from "@/stores/content-width";
+import SongItem from "@/components/shared/SongItem.vue";
 
 const search = useSearchStore();
 const queue = useQueueStore();
@@ -32,13 +45,9 @@ function playFromSearch(index: number) {
     height: 100%;
   }
 
-  .header-list-layout {
-    width: 100%;
-  }
-
-  button {
-    width: fit-content;
-    margin: 0 auto;
+  #songlist-scroller{
+    padding-right: 1rem;
+    padding-left: 0;
   }
 }
 </style>