BREAK EVERYTHING

- some broken edits

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="albums-results border">
+    <div class="grid">
+      <PCard
+        v-for="album in search.albums.value"
+        :key="`${album.artist}-${album.title}`"
+        :album="album"
+      />
+    </div>
+    <LoadMore v-if="search.albums.more" @loadMore="loadMore()" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import PCard from "../../playlists/PlaylistCard.vue";
+import LoadMore from "./LoadMore.vue";
+import useSearchStore from "../../../stores/search";
+
+const search = useSearchStore();
+
+function loadMore() {
+  search.updateLoadCounter("albums");
+  search.loadAlbums(search.loadCounter.albums);
+}
+</script>
+
+<style lang="scss">
+.right-search .albums-results {
+  border-radius: 0.5rem;
+  margin-top: $small;
+  padding: $small;
+  overflow-x: hidden;
+
+  .result-item:hover {
+    background-color: $gray4;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+}
+</style>

src/components/playlists/PlaylistCard.vue

@@ -4,9 +4,6 @@
     :playlist="props.playlist"
     class="p-card rounded"
   >
-    <div class="drop">
-      <Option :color="'#48484a'" />
-    </div>
     <div
       class="image p-image rounded shadow-sm"
       :style="{
@@ -28,12 +25,9 @@
 
 <script setup lang="ts">
 import { Playlist } from "../../interfaces";
-import PlayBtn from "../shared/PlayBtn.vue";
-import Option from "../shared/Option.vue";
 import { paths } from "../../config";
 
-const imguri = paths.images.playlist
-
+const imguri = paths.images.playlist;
 
 const props = defineProps<{
   playlist: Playlist;

src/composables/searchMusic.ts

@@ -43,7 +43,7 @@ async function searchTracks(query: string) {
   }
 
   const data = await res.json();
-  console.log(data)
+  console.log(data);
 
   return data;
 }
@@ -105,3 +105,6 @@ export {
   loadMoreAlbums,
   loadMoreArtists,
 };
+
+// TODO:
+// Rewrite this module using `useAxios` hook

src/stores/search.ts

@@ -1,6 +1,6 @@
 import { ref, reactive } from "@vue/reactivity";
 import { defineStore } from "pinia";
-import { AlbumInfo, Artist, Track } from "../interfaces";
+import { AlbumInfo, Artist, Playlist, Track } from "../interfaces";
 import {
   searchTracks,
   searchAlbums,
@@ -33,6 +33,7 @@ export default defineStore("search", () => {
     tracks: 0,
     albums: 0,
     artists: 0,
+    playlists: 0,
   });
 
   const tracks = reactive({
@@ -53,6 +54,12 @@ export default defineStore("search", () => {
     more: false,
   });
 
+  const playlists = reactive({
+    query: "",
+    value: <Playlist[]>[],
+    more: false,
+  });
+
   /**
    * Searches for tracks, albums and artists
    * @param newquery query to search for
@@ -123,7 +130,9 @@ export default defineStore("search", () => {
       .then(() => scrollOnLoad());
   }
 
-  function updateLoadCounter(type: string) {
+  type loadType = "tracks" | "albums" | "artists" | "playlists";
+
+  function updateLoadCounter(type: loadType) {
     switch (type) {
       case "tracks":
         loadCounter.tracks += 6;
@@ -204,6 +213,7 @@ export default defineStore("search", () => {
     tracks,
     albums,
     artists,
+    playlists,
     query,
     currentTab,
     loadCounter,