use tabs to seperate search results

src/components/RightSideBar/Search.vue

@@ -1,152 +1,48 @@
 <template>
   <div class="right-search">
-    <Options />
-    <div class="scrollable rounded" ref="search_thing">
-      <TracksGrid
-        v-if="tracks.tracks.length"
-        :more="tracks.more"
-        :tracks="tracks.tracks"
-        :query="search.query"
-        @loadMore="loadMoreTracks"
-      />
-      <div class="separator no-border" v-if="tracks.tracks.length"></div>
-
-      <AlbumGrid
-        v-if="albums.albums.length"
-        :albums="albums.albums"
-        :more="albums.more"
-        @loadMore="loadMoreAlbums"
-      />
-      <div class="separator no-border" v-if="albums.albums.length"></div>
-      <ArtistGrid
-        v-if="artists.artists.length"
-        :artists="artists.artists"
-        :more="artists.more"
-        @loadMore="loadMoreArtists"
-      />
-      <div
-        v-if="search.query.trim().length === 0"
-        class="no-res border rounded"
-      >
-        <div class="no-res-text">🦋 Find your music</div>
-      </div>
-      <div
-        v-else-if="
-          !artists.artists.length &&
-          !tracks.tracks.length &&
-          !albums.albums.length
-        "
-        class="no-res border rounded"
-      >
-        <div class="no-res-text">
-          No results for
-          <span class="highlight rounded">{{ search.query }}</span>
-        </div>
-      </div>
-    </div>
+    <TabsWrapper>
+      <Tab name="Tracks">
+        <TracksGrid />
+      </Tab>
+      <Tab name="Albums">
+        <AlbumGrid />
+      </Tab>
+      <Tab name="Artists">
+        <ArtistGrid />
+      </Tab>
+    </TabsWrapper>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { reactive, ref } from "@vue/reactivity";
-import state from "../../composables/state";
-import searchMusic from "@/composables/searchMusic.js";
-import useDebouncedRef from "@/composables/useDebouncedRef";
-import AlbumGrid from "@/components/Search/AlbumGrid.vue";
-import ArtistGrid from "@/components/Search/ArtistGrid.vue";
-import TracksGrid from "@/components/Search/TracksGrid.vue";
-import Options from "@/components/Search/Options.vue";
-import loadMore from "../../composables/loadmore";
 import useSearchStore from "../../stores/gsearch";
 import useTabStore from "../../stores/tabs";
-
+import TabsWrapper from "./TabsWrapper.vue";
+import Tab from "./Tab.vue";
+import TracksGrid from "./Search/TracksGrid.vue";
+import AlbumGrid from "./Search/AlbumGrid.vue";
 import "@/assets/css/Search/Search.scss";
+import ArtistGrid from "./Search/ArtistGrid.vue";
 
 const search = useSearchStore();
 const tabs = useTabStore();
 
 const search_thing = ref(null);
 
-const tracks = reactive({
-  tracks: [],
-  more: false,
-});
-
-let albums = reactive({
-  albums: [],
-  more: false,
-});
-
 const artists = reactive({
   artists: [],
   more: false,
 });
 
-function scrollSearchThing() {
-  search_thing.value.scroll({
-    top: search_thing.value.scrollTop + 330,
-    left: 0,
-    behavior: "smooth",
-  });
-}
-
-function loadMoreTracks(start) {
-  scrollSearchThing();
-  loadMore.loadMoreTracks(start).then((response) => {
-    tracks.tracks = [...tracks.tracks, ...response.tracks];
-    tracks.more = response.more;
-  });
-}
-
-function loadMoreAlbums(start) {
-  loadMore.loadMoreAlbums(start).then((response) => {
-    albums.albums = [...albums.albums, ...response.albums];
-    albums.more = response.more;
-  });
-}
-
-function loadMoreArtists(start) {
-  scrollSearchThing();
-  loadMore.loadMoreArtists(start).then((response) => {
-    artists.artists = [...artists.artists, ...response.artists];
-    artists.more = response.more;
-  });
-}
-
-search.$subscribe((mutation, state) => {
-  if (state.query.trim() == "") {
-    tracks.tracks = [];
-    albums.albums = [];
-    artists.artists = [];
-    return;
-  }
-
-  searchMusic(state.query).then((res) => {
-    if (tabs.current !== tabs.tabs.search) {
-      tabs.switchToSearch();
-    }
-
-    albums.albums = res.albums.albums;
-    albums.more = res.albums.more;
-
-    artists.artists = res.artists.artists;
-    artists.more = res.artists.more;
-
-    tracks.tracks = res.tracks.tracks;
-    tracks.more = res.tracks.more;
-  });
-});
 </script>
 
 <style lang="scss">
 .right-search {
   position: relative;
-  display: grid;
-  grid-template-rows: min-content 1fr;
   overflow: hidden;
   width: auto;
   height: 100%;
-  padding: $small $small 0 0;
 
   .no-res {
     text-align: center;

src/components/RightSideBar/Search/AlbumGrid.vue

@@ -1,36 +1,29 @@
 <template>
   <div class="albums-results border">
-    <div class="heading">Albums</div>
     <div class="grid">
-      <AlbumCard v-for="album in albums" :key="album" :album="album" />
+      <AlbumCard
+        v-for="album in search.albums.value"
+        :key="album.image"
+        :album="album"
+      />
     </div>
-    <LoadMore v-if="more" @loadMore="loadMore" />
+    <LoadMore v-if="search.albums.more" @loadMore="loadMore()" />
   </div>
 </template>
 
-<script>
-import AlbumCard from "@/components/shared/AlbumCard.vue";
+<script setup lang="ts">
+import AlbumCard from "../../shared/AlbumCard.vue";
 import LoadMore from "./LoadMore.vue";
+import useSearchStore from "../../../stores/search";
 
-export default {
-  props: ["albums", "more"],
-  components: {
-    AlbumCard,
-    LoadMore,
-  },
-  setup(props, { emit }) {
-    let counter = 0;
+const search = useSearchStore();
 
-    function loadMore() {
-      counter += 6;
-      emit("loadMore", counter);
-    }
+let counter = 0;
 
-    return {
-      loadMore,
-    };
-  },
-};
+function loadMore() {
+  counter += 6;
+  search.loadAlbums(counter);
+}
 </script>
 
 <style lang="scss">

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="artists-results border">
+    <div class="grid">
+      <ArtistCard
+        v-for="artist in search.artists.value"
+        :key="artist.image"
+        :artist="artist"
+      />
+    </div>
+    <LoadMore v-if="search.artists.more" @loadMore="loadMore" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ArtistCard from "../../shared/ArtistCard.vue";
+import LoadMore from "./LoadMore.vue";
+import useSearchStore from "../../../stores/search";
+const search = useSearchStore();
+
+let counter = 0;
+
+function loadMore() {
+  counter += 6;
+  search.loadArtists(counter);
+}
+</script>
+
+<style lang="scss">
+.right-search .artists-results {
+  border-radius: 0.5rem;
+  padding: $small;
+  margin-bottom: $small;
+
+
+  .xartist {
+    background-color: $gray;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.75rem;
+  }
+}
+</style>

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="tracks-results border" v-if="tracks">
-    <div class="heading">Tracks</div>
-    <TransitionGroup class="items" name="list">
+  <div id="tracks-results" v-if="search.tracks.value">
+    <TransitionGroup name="list">
       <TrackItem
-        v-for="track in tracks"
+        v-for="track in search.tracks.value"
         :key="track.trackid"
         :track="track"
         :isPlaying="queue.playing"
@@ -12,45 +11,39 @@
         @PlayThis="updateQueue"
       />
     </TransitionGroup>
-    <LoadMore v-if="more" @loadMore="loadMore" />
+    <LoadMore v-if="search.tracks.more" @loadMore="loadMore" />
   </div>
 </template>
 
 <script setup lang="ts">
 import LoadMore from "./LoadMore.vue";
-import TrackItem from "../shared/TrackItem.vue";
-import useQStore from "../../stores/queue";
-import { Track } from "../../interfaces";
+import TrackItem from "../../shared/TrackItem.vue";
+import useQStore from "../../../stores/queue";
+import { Track } from "../../../interfaces";
+import useSearchStore from "../../../stores/search";
 
 let counter = 0;
 const queue = useQStore();
-
-const props = defineProps<{
-  tracks: Track[];
-  more: boolean;
-  query: string;
-}>();
-
-const emit = defineEmits(["loadMore"]);
+const search = useSearchStore();
 
 function loadMore() {
   counter += 5;
-  console.log("load more", counter);
-  emit("loadMore", counter);
+  search.loadTracks(counter);
 }
 
 function updateQueue(track: Track) {
-  console.log(props.query);
-  queue.playFromSearch(props.query, props.tracks);
+  queue.playFromSearch(search.query, search.tracks.value);
   queue.play(track);
 }
 </script>
 
 <style lang="scss">
-.right-search .tracks-results {
+.right-search #tracks-results {
   border-radius: 0.5rem;
   padding: $small;
-
+  height: 100% !important;
+  overflow: hidden;
+  
   .list-enter-active,
   .list-leave-active {
     transition: all 0.5s ease;

src/components/RightSideBar/SearchInput.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="gsearch-input">
-    <Filters :filters="search.filters" @removeFilter="removeFilter" />
     <div class="input-loader">
       <input
         id="search"
@@ -8,36 +7,16 @@
         v-model="search.query"
         placeholder="Search your library"
         type="text"
-        @keyup.backspace="removeLastFilter"
       />
     </div>
   </div>
 </template>
 
-<script setup>
-import Filters from "../Search/Filters.vue";
-import Loader from "../shared/Loader.vue";
-import useSearchStore from "../../stores/gsearch";
+<script setup lang="ts">
+import useSearchStore from "../../stores/search";
 
 const search = useSearchStore();
 
-function removeFilter(filter) {
-  search.removeFilter(filter);
-}
-
-let counter = 0;
-
-function removeLastFilter() {
-  if (search.query === "") {
-    counter++;
-
-    if (counter > 0) {
-      search.removeLastFilter();
-    }
-  } else {
-    counter = 0;
-  }
-}
 </script>
 
 <style lang="scss">

src/components/RightSideBar/Tab.vue

@@ -0,0 +1,15 @@
+<template>
+  <div v-show="name == selectedTab">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+
+defineProps<{
+  name: string;
+}>();
+
+const selectedTab = inject("currentTab");
+</script>

src/components/RightSideBar/TabsWrapper.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="right-tabs">
+    <div id="tabheaders">
+      <div
+        class="tab rounded"
+        v-for="slot in $slots.default()"
+        :key="slot.key"
+        @click="currentTab = slot.props.name"
+      >
+        {{ slot.props.name }}
+      </div>
+    </div>
+    <div id="tab-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide } from "vue";
+
+const currentTab = ref("Tracks");
+provide("currentTab", currentTab);
+</script>
+
+<style lang="scss">
+#right-tabs {
+  height: 100%;
+  margin-right: $small;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+
+  #tabheaders {
+    border: solid 1px rgb(0, 68, 255);
+    display: flex;
+    gap: $small;
+    margin: $small 0;
+
+    .tab {
+      background-color: $gray3;
+      padding: $small;
+      text-transform: capitalize;
+    }
+  }
+
+  #tab-content {
+    height: 100%;
+    overflow: auto;
+    border-radius: $small;
+    background-color: $gray;
+    // overflow: hidden;
+  }
+}
+</style>

src/components/Search/ArtistGrid.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="artists-results border">
-    <div class="heading">Artists</div>
-    <div class="grid">
-      <ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
-    </div>
-    <LoadMore v-if="more" @loadMore="loadMore" />
-  </div>
-</template>
-
-<script>
-import ArtistCard from "@/components/shared/ArtistCard.vue";
-import LoadMore from "./LoadMore.vue";
-
-export default {
-  props: ["artists", "more"],
-  components: {
-    ArtistCard,
-    LoadMore,
-  },
-  setup(props, { emit }) {
-    let counter = 0;
-
-    function loadMore() {
-      counter += 6;
-      emit("loadMore", counter);
-    }
-
-    return {
-      loadMore,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.right-search .artists-results {
-  border-radius: 0.5rem;
-  padding: $small;
-  margin-bottom: $small;
-
-  .xartist {
-    background-color: $gray;
-  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.75rem;
-  }
-}
-</style>

src/components/shared/ArtistCard.vue

@@ -17,7 +17,7 @@ const imguri = paths.images.artist;
 
 defineProps<{
   artist: any;
-  color: string;
+  color?: string;
 }>();
 
 </script>

src/components/shared/TrackItem.vue

@@ -97,7 +97,6 @@ const playThis = (track: Track) => {
 }
 
 .track-item {
-  width: 26.55rem;
   display: flex;
   align-items: center;
   border-radius: 0.5rem;