rewrite tracks page of the search view

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>