fix loadmore counter not resetting

- store load more counter in search store

src/assets/css/global.scss

@@ -21,8 +21,6 @@ body {
   image-rendering: -webkit-optimize-contrast;
 }
 
-
-
 .heading {
   font-size: 2rem;
   font-weight: bold;
@@ -87,9 +85,10 @@ a {
   }
 }
 
-.gsearch-input {
+#gsearch-input {
   grid-area: search-input;
-  border-left: solid 1px $gray3;
+  // border-left: solid 1px $gray3;
+  // border-bottom: 1px solid $gray3;
 }
 
 .topnav {

src/components/RightSideBar/Main.vue

@@ -20,10 +20,9 @@
 <script setup lang="ts">
 import Search from "./Search/Main.vue";
 import UpNext from "./Queue.vue";
-import Main from "./Home/Main.vue";
+import DashBoard from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";
-// import Search from "./Searchh.vue";
-const DashBoard = Main;
+
 const tabs = useTabStore();
 </script>
 
@@ -31,7 +30,7 @@ const tabs = useTabStore();
 .r-sidebar {
   width: 29em;
   background-color: rgba(4, 12, 34, 0.103);
-  padding: 0 0 0 $small;
+  padding: 0 $small;
 
   @include phone-only {
     display: none;

src/components/RightSideBar/Queue.vue

@@ -33,7 +33,6 @@ function playThis(track: Track) {
 
 <style lang="scss">
 .up-next {
-  padding: $small $small 0 0;
   overflow: hidden;
   height: 100%;
 

src/components/RightSideBar/Search/AlbumGrid.vue

@@ -3,7 +3,7 @@
     <div class="grid">
       <AlbumCard
         v-for="album in search.albums.value"
-        :key="album.image"
+        :key="`${album.artist}-${album.title}`"
         :album="album"
       />
     </div>
@@ -18,11 +18,9 @@ import useSearchStore from "../../../stores/search";
 
 const search = useSearchStore();
 
-let counter = 0;
-
 function loadMore() {
-  counter += 6;
-  search.loadAlbums(counter);
+  search.updateLoadCounter("albums", 6);
+  search.loadAlbums(search.loadCounter.albums);
 }
 </script>
 

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -5,6 +5,7 @@
         v-for="artist in search.artists.value"
         :key="artist.image"
         :artist="artist"
+        :alt="true"
       />
     </div>
     <LoadMore v-if="search.artists.more" @loadMore="loadMore" />
@@ -17,11 +18,9 @@ import LoadMore from "./LoadMore.vue";
 import useSearchStore from "../../../stores/search";
 const search = useSearchStore();
 
-let counter = 0;
-
 function loadMore() {
-  counter += 6;
-  search.loadArtists(counter);
+  search.updateLoadCounter("artists", 6);
+  search.loadArtists(search.loadCounter.artists);
 }
 </script>
 
@@ -31,7 +30,6 @@ function loadMore() {
   padding: $small;
   margin-bottom: $small;
 
-
   .xartist {
     background-color: $gray;
   }

src/components/RightSideBar/Search/TracksGrid.vue

@@ -22,13 +22,12 @@ import useQStore from "../../../stores/queue";
 import { Track } from "../../../interfaces";
 import useSearchStore from "../../../stores/search";
 
-let counter = 0;
 const queue = useQStore();
 const search = useSearchStore();
 
 function loadMore() {
-  counter += 5;
-  search.loadTracks(counter);
+    search.updateLoadCounter("tracks", 5);
+  search.loadTracks(search.loadCounter.tracks);
 }
 
 function updateQueue(track: Track) {

src/components/shared/ArtistCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="xartist" :style="{ backgroundColor: `#${color}` }">
+  <div class="xartist" :class="{ _is_on_sidebar: alt }">
     <div
       class="artist-image image border-sm"
       :style="{ backgroundImage: `url('${imguri + artist.image}')` }"
@@ -11,15 +11,15 @@
 </template>
 
 <script setup lang="ts">
+import { Artist } from "@/interfaces";
 import { paths } from "../../config";
 
 const imguri = paths.images.artist;
 
 defineProps<{
-  artist: any;
-  color?: string;
+  artist: Artist;
+  alt?: boolean;
 }>();
-
 </script>
 
 <style lang="scss">
@@ -65,4 +65,8 @@ defineProps<{
     max-width: 7rem;
   }
 }
+
+._is_on_sidebar {
+  background-color: $gray4 !important;
+}
 </style>

src/composables/usePlayFrom.ts

@@ -4,7 +4,6 @@ import useFStore from "@/stores/pages/folder";
 import usePStore from "@/stores/pages/playlist";
 import useQStore from "@/stores/queue";
 
-
 const queue = useQStore;
 const folder = useFStore;
 const album = useAStore;

src/stores/search.ts

@@ -29,6 +29,11 @@ function scrollOnLoad() {
 export default defineStore("search", () => {
   const query = useDebouncedRef(null, 600);
   const currentTab = ref("tracks");
+  const loadCounter = reactive({
+    tracks: 0,
+    albums: 0,
+    artists: 0,
+  });
 
   const tracks = reactive({
     query: "",
@@ -118,9 +123,27 @@ export default defineStore("search", () => {
       .then(() => scrollOnLoad());
   }
 
+  function updateLoadCounter(type: string, value: number) {
+    switch (type) {
+      case "tracks":
+        loadCounter.tracks += value;
+        break;
+      case "albums":
+        loadCounter.albums += value;
+        break;
+      case "artists":
+        loadCounter.artists += value;
+        break;
+    }
+  }
+
   watch(
     () => query.value,
     (newQuery) => {
+      for (const key in loadCounter) {
+        loadCounter[key] = 0;
+      }
+
       const tabs = useTabStore();
 
       if (tabs.current !== "search") {
@@ -183,6 +206,8 @@ export default defineStore("search", () => {
     artists,
     query,
     currentTab,
+    loadCounter,
+    updateLoadCounter,
     loadTracks,
     loadAlbums,
     loadArtists,