feat: auto load more search track results

src/components/SearchPage/FetchMore.vue

@@ -0,0 +1,12 @@
+<template></template>
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+const props = defineProps<{
+  action: () => void;
+}>();
+
+onMounted(() => {
+  props.action();
+});
+</script>

src/views/SearchView/albums.vue

@@ -13,4 +13,12 @@ import AlbumCard from "@/components/shared/AlbumCard.vue";
 import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
-</script>
+</script>
+
+<style lang="scss">
+.search-albums-view.grid-page {
+  padding-right: $small;
+
+  overflow: auto;
+}
+</style>

src/views/SearchView/main.vue

@@ -15,10 +15,12 @@
 
 <script setup lang="ts">
 import { Routes } from "@/router/routes";
-import useSearchStore from "@/stores/search";
-import { focusElemByClass } from "@/utils";
-import { computed, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import { computed, onMounted, ref } from "vue";
+
+import { focusElemByClass } from "@/utils";
+import useSearchStore from "@/stores/search";
+
 import AlbumPage from "./albums.vue";
 import ArtistPage from "./artists.vue";
 import TracksPage from "./tracks.vue";
@@ -55,7 +57,7 @@ const component = computed(() => {
 
 function loadTracks() {
   search.loadTracks();
-  focusElemByClass("page-bottom-padding", 100);
+  focusElemByClass("track-11", 100);
 }
 
 function getGridRowItemCount() {

src/views/SearchView/tracks.vue

@@ -1,20 +1,17 @@
 <template>
   <div class="search-tracks-view">
-    <div
+    <div :class="{ isSmall, isMedium }" style="height: 100%">
-      :class="{ isSmall, isMedium }"
-      style="height: 100%"
-    >
       <RecycleScroller
         id="songlist-scroller"
         style="height: 100%"
-        :items="search.tracks.value.map((track) => ({ track, id: Math.random() }))"
+        :items="scrollerItems"
         :item-size="64"
         key-field="id"
         v-slot="{ item, index }"
       >
-        <SongItem
+        <component
-          :track="item.track"
+          :is="item.component"
-          :index="index + 1"
+          v-bind="item.props"
           @playThis="playFromSearch(index)"
         />
       </RecycleScroller>
@@ -23,14 +20,44 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "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";
+import FetchMore from "@/components/SearchPage/FetchMore.vue";
 
 const search = useSearchStore();
 const queue = useQueueStore();
 
+interface scrollerItem {
+  id: number;
+  component: typeof SongItem | typeof FetchMore;
+  props: Record<string, any>;
+}
+
+const scrollerItems = computed(() => {
+  const items: scrollerItem[] = search.tracks.value.map((track, index) => ({
+    id: Math.random(),
+    component: SongItem,
+    props: {
+      track,
+      index: index + 1,
+    },
+  }));
+
+  items.push({
+    id: Math.random(),
+    component: FetchMore,
+    props: {
+      action: search.loadTracks,
+    },
+  });
+
+  return items;
+});
+
 function playFromSearch(index: number) {
   queue.playFromSearch(search.query, search.tracks.value);
   queue.play(index);
@@ -45,7 +72,7 @@ function playFromSearch(index: number) {
     height: 100%;
   }
 
-  #songlist-scroller{
+  #songlist-scroller {
     padding-right: 1rem;
     padding-left: 0;
   }