redesign sidebar search load more buttons to match search page

src/assets/scss/Global/basic.scss

@@ -142,3 +142,9 @@ button {
 .no-select {
   user-select: none;
 }
+
+.load_disabled {
+  pointer-events: all;
+  background: $gray5 !important;
+  opacity: 1;
+}

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -19,13 +19,15 @@
     </div>
     <div v-else class="t-center"><h5>💔 No results 💔</h5></div>
     <LoadMore
-      v-if="album_grid && search.albums.more"
+      v-if="search.albums.value.length || search.artists.value.length"
-      :loader="search.loadAlbums"
+      :loader="album_grid ? search.loadAlbums : search.loadArtists"
+      :can_load_more="album_grid ? search.albums.more : search.artists.more"
     />
-    <LoadMore
+    <!-- <LoadMore
-      v-if="!album_grid && search.artists.more"
+      v-if="!album_grid"
       :loader="search.loadArtists"
-    />
+      :can_load_more="search.artists.more"
+    /> -->
   </div>
 </template>
 
@@ -53,5 +55,7 @@ defineProps<{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
   gap: 0.75rem;
+  min-height: 10rem;
+  padding-bottom: $small;
 }
 </style>

src/components/RightSideBar/Search/LoadMore.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="morexx">
-    <button class="btn" @click.prevent="loader()">
+    <button
-      <div class="text">Load More</div>
+      @click.prevent="loader()"
+      :class="{
+        load_disabled: !can_load_more,
+      }"
+    >
+      <div class="text">Load More {{ can_load_more }}</div>
     </button>
   </div>
 </template>
@@ -9,9 +14,8 @@
 <script setup lang="ts">
 defineProps<{
   loader: () => void;
+  can_load_more: boolean;
 }>();
-
-
 </script>
 
 <style lang="scss">
@@ -19,9 +23,14 @@ defineProps<{
   display: grid;
   place-items: center;
   margin-top: $small;
+  background-color: red;
 
   button {
     padding: 0 1rem !important;
+    width: calc(100% + 2rem);
+    border-radius: 0;
+    height: 3rem;
+    background: $darkestblue;
   }
 }
 </style>

src/components/RightSideBar/Search/Tab.vue

@@ -1,7 +1,5 @@
 <template>
-  <div style="height: 100%">
   <component :is="getComponent()?.component" v-bind="getComponent()?.props" />
-  </div>
 </template>
 
 <script setup lang="ts">

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -52,7 +52,6 @@ const emit = defineEmits<{
   height: 100%;
   overflow: scroll;
   overflow-x: hidden;
-  padding-bottom: 1rem;
 }
 
 #right-tabs.tabContent {

src/components/RightSideBar/Search/TracksGrid.vue

@@ -15,7 +15,11 @@
       />
     </div>
     <div v-else class="t-center"><h5>💔 No results 💔</h5></div>
-    <LoadMore v-if="search.tracks.more" :loader="search.loadTracks" />
+    <LoadMore
+      :loader="search.loadTracks"
+      :can_load_more="search.tracks.more"
+      v-if="search.tracks.value.length"
+    />
   </div>
 </template>
 
@@ -58,3 +62,9 @@ onMounted(() => {
   search.switchTab("tracks");
 });
 </script>
+
+<style lang="scss">
+#tracks-results .morexx {
+  margin-top: 1rem;
+}
+</style>

src/views/SearchView/main.vue

@@ -6,7 +6,7 @@
     <button
       v-if="$route.params.page !== 'tracks'"
       class="load-more"
-      :class="{ 'btn-disabled': !canLoadMore }"
+      :class="{ load_disabled: !canLoadMore }"
       @click="canLoadMore && loadMore()"
     >
       Load more
@@ -143,14 +143,8 @@ onMounted(() => {
     width: calc(100% + 1.25rem);
     border-radius: 0;
     background: $darkestblue;
-    // margin: 0 auto;
-    // margin-bottom: 1rem;
-  }
-
-  .btn-disabled {
-    pointer-events: all;
-    background: $gray !important;
-    opacity: 1;
   }
 }
+
+
 </style>