@ozdao/martyrs 0.2.492 → 0.2.494

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

@@ -1,19 +1,16 @@
 import { ref, computed, onMounted, watch, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, createCommentVNode, Fragment, renderList, normalizeClass, withCtx, createTextVNode, toDisplayString, createBlock, normalizeStyle } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import SearchForm from "../forms/SearchForm.vue.js";
-import _sfc_main$2 from "../../../../components/Feed/Feed.vue.js";
-import TrackCard from "../cards/TrackCard.vue.js";
+import _sfc_main$1 from "../../../globals/views/components/blocks/BlockSearch.vue.js";
+import _sfc_main$3 from "../cards/TrackListCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
 import ArtistCard from "../cards/ArtistCard.vue.js";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$2 from "../../../../components/Button/Button.vue.js";
 import Loader from "../../../../components/Loader/Loader.vue2.js";
-import Media from "../../../../components/Media/Media.vue.js";
-import { state, computed as computed$1, actions } from "../../store/search.js";
-import { actions as actions$1 } from "../../store/player.js";
+import { state, actions } from "../../store/search.js";
 /* empty css                   */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-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,
@@ -45,52 +42,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) {
@@ -108,77 +86,35 @@ const _sfc_main = {
     ];
     const isLoading = computed(() => state.isLoading);
     const searchError = computed(() => state.error);
-    const hasResults = computed(() => computed$1.hasResults());
+    const hasResults = computed(() => {
+      return trackResults.value.length > 0 || artistResults.value.length > 0 || albumResults.value.length > 0 || playlistResults.value.length > 0 || genreResults.value.length > 0;
+    });
     const trackResults = computed(() => state.results.tracks || []);
     const artistResults = computed(() => state.results.artists || []);
     const albumResults = computed(() => state.results.albums || []);
     const playlistResults = computed(() => state.results.playlists || []);
     const genreResults = computed(() => state.results.genres || []);
-    const topResult = 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
-      });
-      actions.search(query);
+      if (query.trim()) {
+        router.push({
+          name: "music-search",
+          query: { q: query },
+          replace: true
+        });
+        actions.search(query);
+      } else {
+        router.push({
+          name: "music-search",
+          replace: true
+        });
+        actions.clearSearch();
+      }
     };
     const setActiveFilter = (filter) => {
       activeFilter.value = filter;
       actions.setFilter(filter);
     };
-    const playTopResult = () => {
-      if (!topResult.value) return;
-      const { type, item } = topResult.value;
-      switch (type) {
-        case "track":
-          actions$1.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)",
@@ -211,19 +147,19 @@ const _sfc_main = {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
           _cache[5] || (_cache[5] = createElementVNode("h1", { class: "mn-b-small" }, "Search", -1)),
-          createVNode(SearchForm, {
-            initialQuery: searchQuery.value,
-            onSearch: handleSearch,
+          createVNode(_sfc_main$1, {
             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 ? (openBlock(), createElementBlock("div", _hoisted_3, [
             (openBlock(), createElementBlock(Fragment, null, renderList(searchFilters, (filter) => {
-              return createVNode(_sfc_main$1, {
+              return createVNode(_sfc_main$2, {
                 key: filter.id,
                 onClick: ($event) => setActiveFilter(filter.id),
                 class: 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
@@ -242,197 +178,135 @@ const _sfc_main = {
           createElementVNode("p", _hoisted_6, toDisplayString(searchError.value), 1)
         ])) : !searchQuery.value ? (openBlock(), createElementBlock("div", _hoisted_7, _cache[6] || (_cache[6] = [
           createElementVNode("h2", { class: "mn-b-small" }, "Search for music", -1),
-          createElementVNode("p", { class: "t-grey t-medium" }, "Find your favorite songs, artists, albums, and playlists", -1)
+          createElementVNode("p", { class: "t-transp t-medium" }, "Find your favorite songs, artists, albums, and playlists", -1)
         ]))) : !hasResults.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
           createElementVNode("h2", _hoisted_9, 'No results found for "' + toDisplayString(searchQuery.value) + '"', 1),
-          _cache[7] || (_cache[7] = createElementVNode("p", { class: "t-grey t-medium" }, "Please try different keywords or check your spelling", -1))
+          _cache[7] || (_cache[7] = createElementVNode("p", { class: "t-transp t-medium" }, "Please try different keywords or check your spelling", -1))
         ])) : (openBlock(), createElementBlock("div", _hoisted_10, [
-          activeFilter.value === "all" ? (openBlock(), createElementBlock("section", _hoisted_11, [
-            _cache[12] || (_cache[12] = createElementVNode("h2", { class: "mn-b-small" }, "Top Result", -1)),
+          (activeFilter.value === "all" || activeFilter.value === "tracks") && trackResults.value.length > 0 ? (openBlock(), createElementBlock("section", _hoisted_11, [
             createElementVNode("div", _hoisted_12, [
-              topResult.value.type === "artist" ? (openBlock(), createElementBlock("div", _hoisted_13, [
-                createElementVNode("div", _hoisted_14, [
-                  createVNode(Media, {
-                    url: topResult.value.item.photoUrl || "/assets/placeholder-artist.jpg",
-                    class: "w-10r h-10r object-fit-cover radius-round"
-                  }, null, 8, ["url"])
-                ]),
-                createElementVNode("h3", _hoisted_15, toDisplayString(topResult.value.item.name), 1),
-                _cache[9] || (_cache[9] = createElementVNode("p", { class: "t-grey" }, "Artist", -1)),
-                createVNode(_sfc_main$1, {
-                  onClick: playTopResult,
-                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
-                  showLoader: false,
-                  showSucces: false
-                }, {
-                  default: withCtx(() => _cache[8] || (_cache[8] = [
-                    createTextVNode(" PLAY ")
-                  ])),
-                  _: 1
-                })
-              ])) : topResult.value.type === "album" ? (openBlock(), createElementBlock("div", _hoisted_16, [
-                createElementVNode("div", _hoisted_17, [
-                  createVNode(Media, {
-                    url: topResult.value.item.coverUrl || "/assets/placeholder-album.jpg",
-                    class: "w-10r h-10r object-fit-cover radius-small"
-                  }, null, 8, ["url"])
-                ]),
-                createElementVNode("h3", _hoisted_18, toDisplayString(topResult.value.item.title), 1),
-                createElementVNode("p", _hoisted_19, "Album • " + toDisplayString(getArtistName(topResult.value.item)), 1),
-                createVNode(_sfc_main$1, {
-                  onClick: playTopResult,
-                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
-                  showLoader: false,
-                  showSucces: false
-                }, {
-                  default: withCtx(() => _cache[10] || (_cache[10] = [
-                    createTextVNode(" PLAY ")
-                  ])),
-                  _: 1
-                })
-              ])) : topResult.value.type === "playlist" ? (openBlock(), createElementBlock("div", _hoisted_20, [
-                createElementVNode("div", _hoisted_21, [
-                  createVNode(Media, {
-                    url: topResult.value.item.coverUrl || "/assets/placeholder-playlist.jpg",
-                    class: "w-10r h-10r object-fit-cover radius-small"
-                  }, null, 8, ["url"])
-                ]),
-                createElementVNode("h3", _hoisted_22, toDisplayString(topResult.value.item.title), 1),
-                createElementVNode("p", _hoisted_23, "Playlist • " + toDisplayString(getPlaylistOwner(topResult.value.item)), 1),
-                createVNode(_sfc_main$1, {
-                  onClick: playTopResult,
-                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
-                  showLoader: false,
-                  showSucces: false
-                }, {
-                  default: withCtx(() => _cache[11] || (_cache[11] = [
-                    createTextVNode(" PLAY ")
-                  ])),
-                  _: 1
-                })
-              ])) : createCommentVNode("", true)
+              _cache[9] || (_cache[9] = createElementVNode("h2", { class: "" }, "Songs", -1)),
+              trackResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
+                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: withCtx(() => _cache[8] || (_cache[8] = [
+                  createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_13, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(activeFilter.value === "all" ? trackResults.value.slice(0, 5) : trackResults.value, (track, index) => {
+                return openBlock(), createBlock(_sfc_main$3, {
+                  key: track._id,
+                  track,
+                  index,
+                  showAlbum: true,
+                  showCover: true
+                }, null, 8, ["track", "index"]);
+              }), 128))
             ])
           ])) : createCommentVNode("", true),
-          activeFilter.value === "all" || activeFilter.value === "tracks" ? (openBlock(), createElementBlock("section", _hoisted_24, [
-            _cache[14] || (_cache[14] = createElementVNode("h2", { class: "mn-b-small" }, "Songs", -1)),
-            createVNode(_sfc_main$2, {
-              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: withCtx(({ items }) => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track) => {
-                  return openBlock(), createBlock(TrackCard, {
-                    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" ? (openBlock(), createBlock(_sfc_main$1, {
-              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: withCtx(() => _cache[13] || (_cache[13] = [
-                createTextVNode(" See all songs ")
-              ])),
-              _: 1
-            })) : createCommentVNode("", true)
-          ])) : createCommentVNode("", true),
-          activeFilter.value === "all" || activeFilter.value === "artists" ? (openBlock(), createElementBlock("section", _hoisted_25, [
-            _cache[16] || (_cache[16] = createElementVNode("h2", { class: "mn-b-small" }, "Artists", -1)),
-            createElementVNode("div", _hoisted_26, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(artistResults.value.slice(0, activeFilter.value === "all" ? 6 : artistResults.value.length), (artist) => {
+          (activeFilter.value === "all" || activeFilter.value === "artists") && artistResults.value.length > 0 ? (openBlock(), createElementBlock("section", _hoisted_14, [
+            createElementVNode("div", _hoisted_15, [
+              _cache[11] || (_cache[11] = createElementVNode("h2", { class: "" }, "Artists", -1)),
+              artistResults.value.length > 6 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
+                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: withCtx(() => _cache[10] || (_cache[10] = [
+                  createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_16, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(activeFilter.value === "all" ? artistResults.value.slice(0, 6) : artistResults.value, (artist) => {
                 return openBlock(), createElementBlock("div", {
                   key: artist._id
                 }, [
                   createVNode(ArtistCard, { artist }, null, 8, ["artist"])
                 ]);
               }), 128))
-            ]),
-            artistResults.value.length > 6 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
-              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: withCtx(() => _cache[15] || (_cache[15] = [
-                createTextVNode(" See all artists ")
-              ])),
-              _: 1
-            })) : createCommentVNode("", true)
+            ])
           ])) : createCommentVNode("", true),
-          activeFilter.value === "all" || activeFilter.value === "albums" ? (openBlock(), createElementBlock("section", _hoisted_27, [
-            _cache[18] || (_cache[18] = createElementVNode("h2", { class: "mn-b-small" }, "Albums", -1)),
-            createElementVNode("div", _hoisted_28, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(albumResults.value.slice(0, activeFilter.value === "all" ? 5 : albumResults.value.length), (album) => {
+          (activeFilter.value === "all" || activeFilter.value === "albums") && albumResults.value.length > 0 ? (openBlock(), createElementBlock("section", _hoisted_17, [
+            createElementVNode("div", _hoisted_18, [
+              _cache[13] || (_cache[13] = createElementVNode("h2", { class: "" }, "Albums", -1)),
+              albumResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
+                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: withCtx(() => _cache[12] || (_cache[12] = [
+                  createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_19, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(activeFilter.value === "all" ? albumResults.value.slice(0, 5) : albumResults.value, (album) => {
                 return openBlock(), createElementBlock("div", {
                   key: album._id
                 }, [
                   createVNode(AlbumCard, { album }, null, 8, ["album"])
                 ]);
               }), 128))
-            ]),
-            albumResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
-              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: withCtx(() => _cache[17] || (_cache[17] = [
-                createTextVNode(" See all albums ")
-              ])),
-              _: 1
-            })) : createCommentVNode("", true)
+            ])
           ])) : createCommentVNode("", true),
-          activeFilter.value === "all" || activeFilter.value === "playlists" ? (openBlock(), createElementBlock("section", _hoisted_29, [
-            _cache[20] || (_cache[20] = createElementVNode("h2", { class: "mn-b-small" }, "Playlists", -1)),
-            createElementVNode("div", _hoisted_30, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(playlistResults.value.slice(0, activeFilter.value === "all" ? 5 : playlistResults.value.length), (playlist) => {
+          (activeFilter.value === "all" || activeFilter.value === "playlists") && playlistResults.value.length > 0 ? (openBlock(), createElementBlock("section", _hoisted_20, [
+            createElementVNode("div", _hoisted_21, [
+              _cache[15] || (_cache[15] = createElementVNode("h2", { class: "" }, "Playlists", -1)),
+              playlistResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
+                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: withCtx(() => _cache[14] || (_cache[14] = [
+                  createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_22, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(activeFilter.value === "all" ? playlistResults.value.slice(0, 5) : playlistResults.value, (playlist) => {
                 return openBlock(), createElementBlock("div", {
                   key: playlist._id
                 }, [
                   createVNode(PlaylistCard, { playlist }, null, 8, ["playlist"])
                 ]);
               }), 128))
-            ]),
-            playlistResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
-              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: withCtx(() => _cache[19] || (_cache[19] = [
-                createTextVNode(" See all playlists ")
-              ])),
-              _: 1
-            })) : createCommentVNode("", true)
+            ])
           ])) : createCommentVNode("", true),
-          (activeFilter.value === "all" || activeFilter.value === "genres") && genreResults.value.length > 0 ? (openBlock(), createElementBlock("section", _hoisted_31, [
-            _cache[22] || (_cache[22] = createElementVNode("h2", { class: "mn-b-small" }, "Genres", -1)),
-            createElementVNode("div", _hoisted_32, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(genreResults.value.slice(0, activeFilter.value === "all" ? 4 : genreResults.value.length), (genre) => {
+          (activeFilter.value === "all" || activeFilter.value === "genres") && genreResults.value.length > 0 ? (openBlock(), createElementBlock("section", _hoisted_23, [
+            createElementVNode("div", _hoisted_24, [
+              _cache[17] || (_cache[17] = createElementVNode("h2", { class: "" }, "Genres", -1)),
+              genreResults.value.length > 4 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$2, {
+                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: withCtx(() => _cache[16] || (_cache[16] = [
+                  createTextVNode(" See all ")
+                ])),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_25, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(activeFilter.value === "all" ? genreResults.value.slice(0, 4) : genreResults.value, (genre) => {
                 return openBlock(), createBlock(_component_router_link, {
                   key: genre._id,
                   to: { name: "genre-detail", params: { url: genre.url } },
@@ -442,31 +316,19 @@ const _sfc_main = {
                   })
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("h3", _hoisted_33, toDisplayString(genre.name), 1)
+                    createElementVNode("h3", _hoisted_26, toDisplayString(genre.name), 1)
                   ]),
                   _: 2
                 }, 1032, ["to", "style"]);
               }), 128))
-            ]),
-            genreResults.value.length > 4 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
-              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: withCtx(() => _cache[21] || (_cache[21] = [
-                createTextVNode(" See all genres ")
-              ])),
-              _: 1
-            })) : createCommentVNode("", true)
+            ])
           ])) : createCommentVNode("", true)
         ]))
       ]);
     };
   }
 };
-const SearchResults = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d2f0de62"]]);
+const SearchResults = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-464383f0"]]);
 export {
   SearchResults as default
 };