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;