@ozdao/martyrs 0.2.492 → 0.2.493

package/dist/martyrs/src/modules/music/components/pages/SearchResults.vue.cjs

@@ -2,20 +2,17 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const SearchForm = require("../forms/SearchForm.vue.cjs");
-const Feed = require("../../../../components/Feed/Feed.vue.cjs");
-const TrackCard = require("../cards/TrackCard.vue.cjs");
+const BlockSearch = require("../../../globals/views/components/blocks/BlockSearch.vue.cjs");
+const TrackListCard = require("../cards/TrackListCard.vue.cjs");
 const AlbumCard = require("../cards/AlbumCard.vue.cjs");
 const PlaylistCard = require("../cards/PlaylistCard.vue.cjs");
 const ArtistCard = require("../cards/ArtistCard.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
-const Media = require("../../../../components/Media/Media.vue.cjs");
 const search = require("../../store/search.cjs");
-const player = require("../../store/player.cjs");
 ;/* empty css                     */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
-const _hoisted_1 = { class: "search-results-page" };
+const _hoisted_1 = { class: "search-results-page pd-medium" };
 const _hoisted_2 = { class: "search-header mn-b-medium" };
 const _hoisted_3 = {
   key: 0,
@@ -47,52 +44,33 @@ const _hoisted_11 = {
   key: 0,
   class: "search-section mn-b-medium"
 };
-const _hoisted_12 = { class: "search-top-result bg-dark-transp-20 radius-medium p-medium" };
-const _hoisted_13 = {
-  key: 0,
-  class: "top-result-artist pd-medium"
-};
-const _hoisted_14 = { class: "top-artist-photo mn-b-medium" };
-const _hoisted_15 = { class: "t-semi" };
-const _hoisted_16 = {
-  key: 1,
-  class: "top-result-album pd-medium"
-};
-const _hoisted_17 = { class: "top-album-cover mn-b-medium" };
-const _hoisted_18 = { class: "t-semi" };
-const _hoisted_19 = { class: "t-grey" };
-const _hoisted_20 = {
-  key: 2,
-  class: "top-result-playlist pd-medium"
-};
-const _hoisted_21 = { class: "top-playlist-cover mn-b-medium" };
-const _hoisted_22 = { class: "t-semi" };
-const _hoisted_23 = { class: "t-grey" };
-const _hoisted_24 = {
+const _hoisted_12 = { class: "flex-between flex mn-b-small" };
+const _hoisted_13 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_14 = {
   key: 1,
   class: "search-section mn-b-medium"
 };
-const _hoisted_25 = {
+const _hoisted_15 = { class: "flex-between flex mn-b-small" };
+const _hoisted_16 = { class: "artists-grid cols-6 mobile:cols-3 gap-small" };
+const _hoisted_17 = {
   key: 2,
   class: "search-section mn-b-medium"
 };
-const _hoisted_26 = { class: "artists-grid cols-6 mobile:cols-3 gap-small" };
-const _hoisted_27 = {
+const _hoisted_18 = { class: "flex-between flex mn-b-small" };
+const _hoisted_19 = { class: "albums-grid cols-5 mobile:cols-2 gap-small" };
+const _hoisted_20 = {
   key: 3,
   class: "search-section mn-b-medium"
 };
-const _hoisted_28 = { class: "albums-grid cols-5 mobile:cols-2 gap-small" };
-const _hoisted_29 = {
+const _hoisted_21 = { class: "flex-between flex mn-b-small" };
+const _hoisted_22 = { class: "playlists-grid cols-5 mobile:cols-2 gap-small" };
+const _hoisted_23 = {
   key: 4,
-  class: "search-section mn-b-medium"
-};
-const _hoisted_30 = { class: "playlists-grid cols-5 mobile:cols-2 gap-small" };
-const _hoisted_31 = {
-  key: 5,
   class: "search-section"
 };
-const _hoisted_32 = { class: "genres-grid cols-4 mobile:cols-2 gap-small" };
-const _hoisted_33 = { class: "" };
+const _hoisted_24 = { class: "flex-between flex mn-b-small" };
+const _hoisted_25 = { class: "genres-grid cols-4 mobile:cols-2 gap-small" };
+const _hoisted_26 = { class: "" };
 const _sfc_main = {
   __name: "SearchResults",
   setup(__props) {
@@ -110,77 +88,35 @@ const _sfc_main = {
     ];
     const isLoading = vue.computed(() => search.state.isLoading);
     const searchError = vue.computed(() => search.state.error);
-    const hasResults = vue.computed(() => search.computed.hasResults());
+    const hasResults = vue.computed(() => {
+      return trackResults.value.length > 0 || artistResults.value.length > 0 || albumResults.value.length > 0 || playlistResults.value.length > 0 || genreResults.value.length > 0;
+    });
     const trackResults = vue.computed(() => search.state.results.tracks || []);
     const artistResults = vue.computed(() => search.state.results.artists || []);
     const albumResults = vue.computed(() => search.state.results.albums || []);
     const playlistResults = vue.computed(() => search.state.results.playlists || []);
     const genreResults = vue.computed(() => search.state.results.genres || []);
-    const topResult = vue.computed(() => {
-      if (artistResults.value.length > 0) {
-        return { type: "artist", item: artistResults.value[0] };
-      } else if (albumResults.value.length > 0) {
-        return { type: "album", item: albumResults.value[0] };
-      } else if (playlistResults.value.length > 0) {
-        return { type: "playlist", item: playlistResults.value[0] };
-      } else if (trackResults.value.length > 0) {
-        return { type: "track", item: trackResults.value[0] };
-      }
-      return null;
-    });
     const handleSearch = (query) => {
       searchQuery.value = query;
-      router.push({
-        name: "music-search",
-        query: { q: query },
-        replace: true
-      });
-      search.actions.search(query);
+      if (query.trim()) {
+        router.push({
+          name: "music-search",
+          query: { q: query },
+          replace: true
+        });
+        search.actions.search(query);
+      } else {
+        router.push({
+          name: "music-search",
+          replace: true
+        });
+        search.actions.clearSearch();
+      }
     };
     const setActiveFilter = (filter) => {
       activeFilter.value = filter;
       search.actions.setFilter(filter);
     };
-    const playTopResult = () => {
-      if (!topResult.value) return;
-      const { type, item } = topResult.value;
-      switch (type) {
-        case "track":
-          player.actions.playTrack(item);
-          break;
-        case "album":
-          router.push({ name: "album", params: { url: item.url } });
-          break;
-        case "playlist":
-          router.push({ name: "playlist", params: { url: item.url } });
-          break;
-        case "artist":
-          router.push({ name: "artist", params: { url: item.url } });
-          break;
-      }
-    };
-    const getArtistName = (item) => {
-      if (!item) return "Unknown Artist";
-      if (item.artist) {
-        if (typeof item.artist === "object") {
-          return item.artist.name || "Unknown Artist";
-        }
-        return item.artist;
-      }
-      return "Unknown Artist";
-    };
-    const getPlaylistOwner = (playlist) => {
-      if (!playlist) return "Unknown";
-      if (playlist.owner?.target) {
-        if (typeof playlist.owner.target === "object") {
-          if (playlist.owner.target.profile?.name) {
-            return playlist.owner.target.profile.name;
-          }
-          return playlist.owner.target.name || "Unknown";
-        }
-      }
-      return "Unknown";
-    };
     const getRandomGradient = () => {
       const colors = [
         "linear-gradient(135deg, #1DB954, #1ED760)",
@@ -213,19 +149,19 @@ const _sfc_main = {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createElementVNode("div", _hoisted_2, [
           _cache[5] || (_cache[5] = vue.createElementVNode("h1", { class: "mn-b-small" }, "Search", -1)),
-          vue.createVNode(SearchForm.default, {
-            initialQuery: searchQuery.value,
-            onSearch: handleSearch,
+          vue.createVNode(BlockSearch.default, {
             placeholder: "What do you want to listen to?",
-            class: "w-m-40r"
-          }, null, 8, ["initialQuery"]),
+            class: "bg-light w-m-40r",
+            onSearch: handleSearch,
+            autofocus: true
+          }),
           searchQuery.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
             (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(searchFilters, (filter) => {
               return vue.createVNode(Button.default, {
                 key: filter.id,
                 onClick: ($event) => setActiveFilter(filter.id),
                 class: vue.normalizeClass([[
-                  filter.id === activeFilter.value ? "bg-white t-black" : "bg-dark-transp-50  hover-bg-dark"
+                  filter.id === activeFilter.value ? "bg-white t-black" : "bg-dark-transp-50 hover-bg-dark"
                 ], "radius-extra pd-small"]),
                 showLoader: false,
                 showSucces: false
@@ -244,197 +180,135 @@ const _sfc_main = {
           vue.createElementVNode("p", _hoisted_6, vue.toDisplayString(searchError.value), 1)
         ])) : !searchQuery.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, _cache[6] || (_cache[6] = [
           vue.createElementVNode("h2", { class: "mn-b-small" }, "Search for music", -1),
-          vue.createElementVNode("p", { class: "t-grey t-medium" }, "Find your favorite songs, artists, albums, and playlists", -1)
+          vue.createElementVNode("p", { class: "t-transp t-medium" }, "Find your favorite songs, artists, albums, and playlists", -1)
         ]))) : !hasResults.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
           vue.createElementVNode("h2", _hoisted_9, 'No results found for "' + vue.toDisplayString(searchQuery.value) + '"', 1),
-          _cache[7] || (_cache[7] = vue.createElementVNode("p", { class: "t-grey t-medium" }, "Please try different keywords or check your spelling", -1))
+          _cache[7] || (_cache[7] = vue.createElementVNode("p", { class: "t-transp t-medium" }, "Please try different keywords or check your spelling", -1))
         ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
-          activeFilter.value === "all" ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_11, [
-            _cache[12] || (_cache[12] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Top Result", -1)),
+          (activeFilter.value === "all" || activeFilter.value === "tracks") && trackResults.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_11, [
             vue.createElementVNode("div", _hoisted_12, [
-              topResult.value.type === "artist" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
-                vue.createElementVNode("div", _hoisted_14, [
-                  vue.createVNode(Media.default, {
-                    url: topResult.value.item.photoUrl || "/assets/placeholder-artist.jpg",
-                    class: "w-10r h-10r object-fit-cover radius-round"
-                  }, null, 8, ["url"])
-                ]),
-                vue.createElementVNode("h3", _hoisted_15, vue.toDisplayString(topResult.value.item.name), 1),
-                _cache[9] || (_cache[9] = vue.createElementVNode("p", { class: "t-grey" }, "Artist", -1)),
-                vue.createVNode(Button.default, {
-                  onClick: playTopResult,
-                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
-                  showLoader: false,
-                  showSucces: false
-                }, {
-                  default: vue.withCtx(() => _cache[8] || (_cache[8] = [
-                    vue.createTextVNode(" PLAY ")
-                  ])),
-                  _: 1
-                })
-              ])) : topResult.value.type === "album" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
-                vue.createElementVNode("div", _hoisted_17, [
-                  vue.createVNode(Media.default, {
-                    url: topResult.value.item.coverUrl || "/assets/placeholder-album.jpg",
-                    class: "w-10r h-10r object-fit-cover radius-small"
-                  }, null, 8, ["url"])
-                ]),
-                vue.createElementVNode("h3", _hoisted_18, vue.toDisplayString(topResult.value.item.title), 1),
-                vue.createElementVNode("p", _hoisted_19, "Album • " + vue.toDisplayString(getArtistName(topResult.value.item)), 1),
-                vue.createVNode(Button.default, {
-                  onClick: playTopResult,
-                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
-                  showLoader: false,
-                  showSucces: false
-                }, {
-                  default: vue.withCtx(() => _cache[10] || (_cache[10] = [
-                    vue.createTextVNode(" PLAY ")
-                  ])),
-                  _: 1
-                })
-              ])) : topResult.value.type === "playlist" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, [
-                vue.createElementVNode("div", _hoisted_21, [
-                  vue.createVNode(Media.default, {
-                    url: topResult.value.item.coverUrl || "/assets/placeholder-playlist.jpg",
-                    class: "w-10r h-10r object-fit-cover radius-small"
-                  }, null, 8, ["url"])
-                ]),
-                vue.createElementVNode("h3", _hoisted_22, vue.toDisplayString(topResult.value.item.title), 1),
-                vue.createElementVNode("p", _hoisted_23, "Playlist • " + vue.toDisplayString(getPlaylistOwner(topResult.value.item)), 1),
-                vue.createVNode(Button.default, {
-                  onClick: playTopResult,
-                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
-                  showLoader: false,
-                  showSucces: false
-                }, {
-                  default: vue.withCtx(() => _cache[11] || (_cache[11] = [
-                    vue.createTextVNode(" PLAY ")
-                  ])),
-                  _: 1
-                })
-              ])) : vue.createCommentVNode("", true)
+              _cache[9] || (_cache[9] = vue.createElementVNode("h2", { class: "" }, "Songs", -1)),
+              trackResults.value.length > 5 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
+                key: 0,
+                onClick: _cache[0] || (_cache[0] = ($event) => setActiveFilter("tracks")),
+                class: "t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => _cache[8] || (_cache[8] = [
+                  vue.createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("div", _hoisted_13, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(activeFilter.value === "all" ? trackResults.value.slice(0, 5) : trackResults.value, (track, index) => {
+                return vue.openBlock(), vue.createBlock(TrackListCard.default, {
+                  key: track._id,
+                  track,
+                  index,
+                  showAlbum: true,
+                  showCover: true
+                }, null, 8, ["track", "index"]);
+              }), 128))
             ])
           ])) : vue.createCommentVNode("", true),
-          activeFilter.value === "all" || activeFilter.value === "tracks" ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_24, [
-            _cache[14] || (_cache[14] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Songs", -1)),
-            vue.createVNode(Feed.default, {
-              store: {
-                read: () => _ctx.Promise.resolve(trackResults.value),
-                state: { isLoading: false }
-              },
-              external: true,
-              items: trackResults.value,
-              states: {
-                empty: {
-                  title: "No tracks found",
-                  description: "Try different search terms",
-                  class: "pd-medium bg-dark-transp-10 radius-medium"
-                }
-              },
-              class: "gap-thin"
-            }, {
-              default: vue.withCtx(({ items }) => [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (track) => {
-                  return vue.openBlock(), vue.createBlock(TrackCard.default, {
-                    key: track._id,
-                    track,
-                    showAlbum: true,
-                    showCover: true,
-                    class: "w-100 bg-dark-transp-10 radius-medium"
-                  }, null, 8, ["track"]);
-                }), 128))
-              ]),
-              _: 1
-            }, 8, ["store", "items"]),
-            trackResults.value.length > 4 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
-              key: 0,
-              onClick: _cache[0] || (_cache[0] = ($event) => setActiveFilter("tracks")),
-              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => _cache[13] || (_cache[13] = [
-                vue.createTextVNode(" See all songs ")
-              ])),
-              _: 1
-            })) : vue.createCommentVNode("", true)
-          ])) : vue.createCommentVNode("", true),
-          activeFilter.value === "all" || activeFilter.value === "artists" ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_25, [
-            _cache[16] || (_cache[16] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Artists", -1)),
-            vue.createElementVNode("div", _hoisted_26, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(artistResults.value.slice(0, activeFilter.value === "all" ? 6 : artistResults.value.length), (artist) => {
+          (activeFilter.value === "all" || activeFilter.value === "artists") && artistResults.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_14, [
+            vue.createElementVNode("div", _hoisted_15, [
+              _cache[11] || (_cache[11] = vue.createElementVNode("h2", { class: "" }, "Artists", -1)),
+              artistResults.value.length > 6 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
+                key: 0,
+                onClick: _cache[1] || (_cache[1] = ($event) => setActiveFilter("artists")),
+                class: "t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => _cache[10] || (_cache[10] = [
+                  vue.createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("div", _hoisted_16, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(activeFilter.value === "all" ? artistResults.value.slice(0, 6) : artistResults.value, (artist) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: artist._id
                 }, [
                   vue.createVNode(ArtistCard.default, { artist }, null, 8, ["artist"])
                 ]);
               }), 128))
-            ]),
-            artistResults.value.length > 6 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
-              key: 0,
-              onClick: _cache[1] || (_cache[1] = ($event) => setActiveFilter("artists")),
-              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => _cache[15] || (_cache[15] = [
-                vue.createTextVNode(" See all artists ")
-              ])),
-              _: 1
-            })) : vue.createCommentVNode("", true)
+            ])
           ])) : vue.createCommentVNode("", true),
-          activeFilter.value === "all" || activeFilter.value === "albums" ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_27, [
-            _cache[18] || (_cache[18] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Albums", -1)),
-            vue.createElementVNode("div", _hoisted_28, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(albumResults.value.slice(0, activeFilter.value === "all" ? 5 : albumResults.value.length), (album) => {
+          (activeFilter.value === "all" || activeFilter.value === "albums") && albumResults.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_17, [
+            vue.createElementVNode("div", _hoisted_18, [
+              _cache[13] || (_cache[13] = vue.createElementVNode("h2", { class: "" }, "Albums", -1)),
+              albumResults.value.length > 5 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
+                key: 0,
+                onClick: _cache[2] || (_cache[2] = ($event) => setActiveFilter("albums")),
+                class: "t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => _cache[12] || (_cache[12] = [
+                  vue.createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("div", _hoisted_19, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(activeFilter.value === "all" ? albumResults.value.slice(0, 5) : albumResults.value, (album) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: album._id
                 }, [
                   vue.createVNode(AlbumCard.default, { album }, null, 8, ["album"])
                 ]);
               }), 128))
-            ]),
-            albumResults.value.length > 5 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
-              key: 0,
-              onClick: _cache[2] || (_cache[2] = ($event) => setActiveFilter("albums")),
-              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => _cache[17] || (_cache[17] = [
-                vue.createTextVNode(" See all albums ")
-              ])),
-              _: 1
-            })) : vue.createCommentVNode("", true)
+            ])
           ])) : vue.createCommentVNode("", true),
-          activeFilter.value === "all" || activeFilter.value === "playlists" ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_29, [
-            _cache[20] || (_cache[20] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Playlists", -1)),
-            vue.createElementVNode("div", _hoisted_30, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(playlistResults.value.slice(0, activeFilter.value === "all" ? 5 : playlistResults.value.length), (playlist) => {
+          (activeFilter.value === "all" || activeFilter.value === "playlists") && playlistResults.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_20, [
+            vue.createElementVNode("div", _hoisted_21, [
+              _cache[15] || (_cache[15] = vue.createElementVNode("h2", { class: "" }, "Playlists", -1)),
+              playlistResults.value.length > 5 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
+                key: 0,
+                onClick: _cache[3] || (_cache[3] = ($event) => setActiveFilter("playlists")),
+                class: "t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => _cache[14] || (_cache[14] = [
+                  vue.createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("div", _hoisted_22, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(activeFilter.value === "all" ? playlistResults.value.slice(0, 5) : playlistResults.value, (playlist) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: playlist._id
                 }, [
                   vue.createVNode(PlaylistCard.default, { playlist }, null, 8, ["playlist"])
                 ]);
               }), 128))
-            ]),
-            playlistResults.value.length > 5 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
-              key: 0,
-              onClick: _cache[3] || (_cache[3] = ($event) => setActiveFilter("playlists")),
-              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => _cache[19] || (_cache[19] = [
-                vue.createTextVNode(" See all playlists ")
-              ])),
-              _: 1
-            })) : vue.createCommentVNode("", true)
+            ])
           ])) : vue.createCommentVNode("", true),
-          (activeFilter.value === "all" || activeFilter.value === "genres") && genreResults.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_31, [
-            _cache[22] || (_cache[22] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Genres", -1)),
-            vue.createElementVNode("div", _hoisted_32, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(genreResults.value.slice(0, activeFilter.value === "all" ? 4 : genreResults.value.length), (genre) => {
+          (activeFilter.value === "all" || activeFilter.value === "genres") && genreResults.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_23, [
+            vue.createElementVNode("div", _hoisted_24, [
+              _cache[17] || (_cache[17] = vue.createElementVNode("h2", { class: "" }, "Genres", -1)),
+              genreResults.value.length > 4 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
+                key: 0,
+                onClick: _cache[4] || (_cache[4] = ($event) => setActiveFilter("genres")),
+                class: "t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => _cache[16] || (_cache[16] = [
+                  vue.createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("div", _hoisted_25, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(activeFilter.value === "all" ? genreResults.value.slice(0, 4) : genreResults.value, (genre) => {
                 return vue.openBlock(), vue.createBlock(_component_router_link, {
                   key: genre._id,
                   to: { name: "genre-detail", params: { url: genre.url } },
@@ -444,30 +318,18 @@ const _sfc_main = {
                   })
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("h3", _hoisted_33, vue.toDisplayString(genre.name), 1)
+                    vue.createElementVNode("h3", _hoisted_26, vue.toDisplayString(genre.name), 1)
                   ]),
                   _: 2
                 }, 1032, ["to", "style"]);
               }), 128))
-            ]),
-            genreResults.value.length > 4 && activeFilter.value === "all" ? (vue.openBlock(), vue.createBlock(Button.default, {
-              key: 0,
-              onClick: _cache[4] || (_cache[4] = ($event) => setActiveFilter("genres")),
-              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => _cache[21] || (_cache[21] = [
-                vue.createTextVNode(" See all genres ")
-              ])),
-              _: 1
-            })) : vue.createCommentVNode("", true)
+            ])
           ])) : vue.createCommentVNode("", true)
         ]))
       ]);
     };
   }
 };
-const SearchResults = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-d2f0de62"]]);
+const SearchResults = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-464383f0"]]);
 exports.default = SearchResults;
 //# sourceMappingURL=SearchResults.vue.cjs.map