@ozdao/martyrs 0.2.492 → 0.2.494

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.vue.js","sources":["../../../../../../../src/modules/music/components/pages/SearchResults.vue"],"sourcesContent":["<!-- components/pages/SearchResults.vue -->\n<template>\n  <div class=\"search-results-page\">\n    <div class=\"search-header mn-b-medium\">\n      <h1 class=\" mn-b-small\">Search</h1>\n      \n      <SearchForm \n        :initialQuery=\"searchQuery\"\n        @search=\"handleSearch\"\n        placeholder=\"What do you want to listen to?\"\n        class=\"w-m-40r\"\n      />\n      \n      <div v-if=\"searchQuery\" class=\"search-filters flex gap-small mn-t-medium\">\n        <Button \n          v-for=\"filter in searchFilters\"\n          :key=\"filter.id\"\n          @click=\"setActiveFilter(filter.id)\"\n          :class=\"[\n            filter.id === activeFilter ? 'bg-white t-black' : 'bg-dark-transp-50  hover-bg-dark',\n          ]\"\n          class=\"radius-extra pd-small\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          {{ filter.label }}\n        </Button>\n      </div>\n    </div>\n    \n    <div v-if=\"isLoading\" class=\"search-loading\">\n      <Loader />\n    </div>\n    \n    <div v-else-if=\"searchError\" class=\"search-error t-center pd-big\">\n      <p class=\"t-fourth t-medium\">{{ searchError }}</p>\n    </div>\n    \n    <div v-else-if=\"!searchQuery\" class=\"search-empty t-center pd-big\">\n      <h2 class=\" mn-b-small\">Search for music</h2>\n      <p class=\"t-grey t-medium\">Find your favorite songs, artists, albums, and playlists</p>\n    </div>\n    \n    <div v-else-if=\"!hasResults\" class=\"search-no-results t-center pd-big\">\n      <h2 class=\" mn-b-small\">No results found for \"{{ searchQuery }}\"</h2>\n      <p class=\"t-grey t-medium\">Please try different keywords or check your spelling</p>\n    </div>\n    \n    <div v-else class=\"search-results\">\n      <!-- Top Results Section -->\n      <section v-if=\"activeFilter === 'all'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Top Result</h2>\n        \n        <div class=\"search-top-result bg-dark-transp-20 radius-medium p-medium\">\n          <div v-if=\"topResult.type === 'artist'\" class=\"top-result-artist pd-medium\">\n            <div class=\"top-artist-photo mn-b-medium\">\n              <Media \n                :url=\"topResult.item.photoUrl || '/assets/placeholder-artist.jpg'\" \n                class=\"w-10r h-10r object-fit-cover radius-round\"\n              />\n            </div>\n            <h3 class=\" t-semi\">{{ topResult.item.name }}</h3>\n            <p class=\"t-grey\">Artist</p>\n            <Button \n              @click=\"playTopResult\"\n              class=\"bg-main radius-round pd-small  mn-t-medium hover-scale-1\"\n              :showLoader=\"false\" \n              :showSucces=\"false\"\n            >\n              PLAY\n            </Button>\n          </div>\n          \n          <div v-else-if=\"topResult.type === 'album'\" class=\"top-result-album pd-medium\">\n            <div class=\"top-album-cover mn-b-medium\">\n              <Media \n                :url=\"topResult.item.coverUrl || '/assets/placeholder-album.jpg'\" \n                class=\"w-10r h-10r object-fit-cover radius-small\"\n              />\n            </div>\n            <h3 class=\" t-semi\">{{ topResult.item.title }}</h3>\n            <p class=\"t-grey\">Album • {{ getArtistName(topResult.item) }}</p>\n            <Button \n              @click=\"playTopResult\"\n              class=\"bg-main radius-round pd-small  mn-t-medium hover-scale-1\"\n              :showLoader=\"false\" \n              :showSucces=\"false\"\n            >\n              PLAY\n            </Button>\n          </div>\n          \n          <div v-else-if=\"topResult.type === 'playlist'\" class=\"top-result-playlist pd-medium\">\n            <div class=\"top-playlist-cover mn-b-medium\">\n              <Media \n                :url=\"topResult.item.coverUrl || '/assets/placeholder-playlist.jpg'\" \n                class=\"w-10r h-10r object-fit-cover radius-small\"\n              />\n            </div>\n            <h3 class=\" t-semi\">{{ topResult.item.title }}</h3>\n            <p class=\"t-grey\">Playlist • {{ getPlaylistOwner(topResult.item) }}</p>\n            <Button \n              @click=\"playTopResult\"\n              class=\"bg-main radius-round pd-small  mn-t-medium hover-scale-1\"\n              :showLoader=\"false\" \n              :showSucces=\"false\"\n            >\n              PLAY\n            </Button>\n          </div>\n        </div>\n      </section>\n      \n      <!-- Songs Results -->\n      <section v-if=\"activeFilter === 'all' || activeFilter === 'tracks'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Songs</h2>\n        <Feed\n          :store=\"{\n            read: () => Promise.resolve(trackResults),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"trackResults\"\n          :states=\"{\n            empty: {\n              title: 'No tracks found',\n              description: 'Try different search terms',\n              class: 'pd-medium bg-dark-transp-10 radius-medium'\n            }\n          }\"\n          class=\"gap-thin\"\n        >\n          <template #default=\"{ items }\">\n            <TrackCard\n              v-for=\"track in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n              class=\"w-100 bg-dark-transp-10 radius-medium\"\n            />\n          </template>\n        </Feed>\n        \n        <Button \n          v-if=\"trackResults.length > 4 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('tracks')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all songs\n        </Button>\n      </section>\n      \n      <!-- Artists Results -->\n      <section v-if=\"activeFilter === 'all' || activeFilter === 'artists'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Artists</h2>\n        \n        <div class=\"artists-grid cols-6 mobile:cols-3 gap-small\">\n          <div v-for=\"artist in artistResults.slice(0, activeFilter === 'all' ? 6 : artistResults.length)\" :key=\"artist._id\">\n            <ArtistCard :artist=\"artist\" />\n          </div>\n        </div>\n        \n        <Button \n          v-if=\"artistResults.length > 6 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('artists')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all artists\n        </Button>\n      </section>\n      \n      <!-- Albums Results -->\n      <section v-if=\"activeFilter === 'all' || activeFilter === 'albums'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Albums</h2>\n        \n        <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"album in albumResults.slice(0, activeFilter === 'all' ? 5 : albumResults.length)\" :key=\"album._id\">\n            <AlbumCard :album=\"album\" />\n          </div>\n        </div>\n        \n        <Button \n          v-if=\"albumResults.length > 5 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('albums')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all albums\n        </Button>\n      </section>\n      \n      <!-- Playlists Results -->\n      <section v-if=\"activeFilter === 'all' || activeFilter === 'playlists'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Playlists</h2>\n        \n        <div class=\"playlists-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"playlist in playlistResults.slice(0, activeFilter === 'all' ? 5 : playlistResults.length)\" :key=\"playlist._id\">\n            <PlaylistCard :playlist=\"playlist\" />\n          </div>\n        </div>\n        \n        <Button \n          v-if=\"playlistResults.length > 5 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('playlists')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all playlists\n        </Button>\n      </section>\n      \n      <!-- Genres Results -->\n      <section v-if=\"(activeFilter === 'all' || activeFilter === 'genres') && genreResults.length > 0\" class=\"search-section\">\n        <h2 class=\" mn-b-small\">Genres</h2>\n        \n        <div class=\"genres-grid cols-4 mobile:cols-2 gap-small\">\n          <router-link \n            v-for=\"genre in genreResults.slice(0, activeFilter === 'all' ? 4 : genreResults.length)\" \n            :key=\"genre._id\"\n            :to=\"{ name: 'genre-detail', params: { url: genre.url } }\"\n            class=\"genre-card bg-gradient-color pd-medium radius-medium t-center hover-scale-1 transition-cubic-in-out\"\n            :style=\"{ \n              '--gradient-color': getRandomGradient() \n            }\"\n          >\n            <h3 class=\"\">{{ genre.name }}</h3>\n          </router-link>\n        </div>\n        \n        <Button \n          v-if=\"genreResults.length > 4 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('genres')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all genres\n        </Button>\n      </section>\n    </div>\n  </div>\n  </template>\n\n  <script setup>\n  import { ref, computed, onMounted, watch } from 'vue';\n  import { useRoute, useRouter } from 'vue-router';\n  import SearchForm from '../forms/SearchForm.vue';\n  import Feed from '@martyrs/src/components/Feed/Feed.vue';\n  import TrackCard from '../cards/TrackCard.vue';\n  import AlbumCard from '../cards/AlbumCard.vue';\n  import PlaylistCard from '../cards/PlaylistCard.vue';\n  import ArtistCard from '../cards/ArtistCard.vue';\n  import Button from '@martyrs/src/components/Button/Button.vue';\n  import Loader from '@martyrs/src/components/Loader/Loader.vue';\n  import Media from '@martyrs/src/components/Media/Media.vue';\n\n  // Import search store\n  import { state as searchState, actions as searchActions, computed as searchComputed } from '../../store/search.js';\n  import { actions as playerActions } from '../../store/player.js';\n\n  const route = useRoute();\n  const router = useRouter();\n\n  // State\n  const searchQuery = ref('');\n  const activeFilter = ref('all');\n\n  // Array of search filters\n  const searchFilters = [\n    { id: 'all', label: 'All' },\n    { id: 'tracks', label: 'Songs' },\n    { id: 'artists', label: 'Artists' },\n    { id: 'albums', label: 'Albums' },\n    { id: 'playlists', label: 'Playlists' },\n    { id: 'genres', label: 'Genres' }\n  ];\n\n  // Computed properties\n  const isLoading = computed(() => searchState.isLoading);\n  const searchError = computed(() => searchState.error);\n  const hasResults = computed(() => searchComputed.hasResults());\n\n  const trackResults = computed(() => searchState.results.tracks || []);\n  const artistResults = computed(() => searchState.results.artists || []);\n  const albumResults = computed(() => searchState.results.albums || []);\n  const playlistResults = computed(() => searchState.results.playlists || []);\n  const genreResults = computed(() => searchState.results.genres || []);\n\n  // Top result determination\n  const topResult = computed(() => {\n    // Determine which result to show as top result based on relevance\n    if (artistResults.value.length > 0) {\n      return { type: 'artist', item: artistResults.value[0] };\n    } else if (albumResults.value.length > 0) {\n      return { type: 'album', item: albumResults.value[0] };\n    } else if (playlistResults.value.length > 0) {\n      return { type: 'playlist', item: playlistResults.value[0] };\n    } else if (trackResults.value.length > 0) {\n      return { type: 'track', item: trackResults.value[0] };\n    }\n    return null;\n  });\n\n  // Methods\n  const handleSearch = (query) => {\n    searchQuery.value = query;\n    \n    // Update URL without reloading the page\n    router.push({ \n      name: 'music-search', \n      query: { q: query },\n      replace: true\n    });\n    \n    // Perform search\n    searchActions.search(query);\n  };\n\n  const setActiveFilter = (filter) => {\n    activeFilter.value = filter;\n    searchActions.setFilter(filter);\n  };\n\n  const playTopResult = () => {\n    if (!topResult.value) return;\n    \n    const { type, item } = topResult.value;\n    \n    switch (type) {\n      case 'track':\n        playerActions.playTrack(item);\n        break;\n      case 'album':\n        // Navigate to album page\n        router.push({ name: 'album', params: { url: item.url } });\n        break;\n      case 'playlist':\n        // Navigate to playlist page\n        router.push({ name: 'playlist', params: { url: item.url } });\n        break;\n      case 'artist':\n        // Navigate to artist page\n        router.push({ name: 'artist', params: { url: item.url } });\n        break;\n    }\n  };\n\n  const getArtistName = (item) => {\n    if (!item) return 'Unknown Artist';\n    \n    if (item.artist) {\n      if (typeof item.artist === 'object') {\n        return item.artist.name || 'Unknown Artist';\n      }\n      return item.artist;\n    }\n    return 'Unknown Artist';\n  };\n\n  const getPlaylistOwner = (playlist) => {\n    if (!playlist) return 'Unknown';\n    \n    if (playlist.owner?.target) {\n      if (typeof playlist.owner.target === 'object') {\n        if (playlist.owner.target.profile?.name) {\n          return playlist.owner.target.profile.name;\n        }\n        return playlist.owner.target.name || 'Unknown';\n      }\n    }\n    return 'Unknown';\n  };\n\n  // Generate random gradient for genre cards\n  const getRandomGradient = () => {\n    const colors = [\n      'linear-gradient(135deg, #1DB954, #1ED760)',\n      'linear-gradient(135deg, #FF6B6B, #FFE66D)',\n      'linear-gradient(135deg, #4776E6, #8E54E9)',\n      'linear-gradient(135deg, #FF8008, #FFC837)',\n      'linear-gradient(135deg, #7F00FF, #E100FF)',\n      'linear-gradient(135deg, #11998E, #38EF7D)'\n    ];\n    \n    return colors[Math.floor(Math.random() * colors.length)];\n  };\n\n  // Watch for URL query parameter changes\n  onMounted(() => {\n    const query = route.query.q;\n    if (query) {\n      searchQuery.value = query;\n      searchActions.search(query);\n    }\n  });\n\n  watch(() => route.query.q, (newQuery) => {\n    if (newQuery && newQuery !== searchQuery.value) {\n      searchQuery.value = newQuery;\n      searchActions.search(newQuery);\n    } else if (!newQuery) {\n      searchQuery.value = '';\n      searchActions.clearSearch();\n    }\n  });\n  </script>\n\n  <style scoped>\n  .bg-gradient-color {\n    background: var(--gradient-color, linear-gradient(135deg, #1DB954, #1ED760));\n  }\n  </style>"],"names":["searchState","searchComputed","searchActions","playerActions"],"mappings":"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"}
+{"version":3,"file":"SearchResults.vue.js","sources":["../../../../../../../src/modules/music/components/pages/SearchResults.vue"],"sourcesContent":["<!-- components/pages/SearchResults.vue -->\n<template>\n  <div class=\"search-results-page pd-medium\">\n    <div class=\"search-header mn-b-medium\">\n      <h1 class=\"mn-b-small\">Search</h1>\n      \n      <BlockSearch \n        :placeholder=\"'What do you want to listen to?'\"\n        class=\"bg-light w-m-40r\"\n        @search=\"handleSearch\"\n        :autofocus=\"true\"\n      />\n      \n      <div v-if=\"searchQuery\" class=\"search-filters flex gap-small mn-t-medium\">\n        <Button \n          v-for=\"filter in searchFilters\"\n          :key=\"filter.id\"\n          @click=\"setActiveFilter(filter.id)\"\n          :class=\"[\n            filter.id === activeFilter ? 'bg-white t-black' : 'bg-dark-transp-50 hover-bg-dark',\n          ]\"\n          class=\"radius-extra pd-small\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          {{ filter.label }}\n        </Button>\n      </div>\n    </div>\n    \n    <div v-if=\"isLoading\" class=\"search-loading\">\n      <Loader />\n    </div>\n    \n    <div v-else-if=\"searchError\" class=\"search-error t-center pd-big\">\n      <p class=\"t-fourth t-medium\">{{ searchError }}</p>\n    </div>\n    \n    <div v-else-if=\"!searchQuery\" class=\"search-empty t-center pd-big\">\n      <h2 class=\"mn-b-small\">Search for music</h2>\n      <p class=\"t-transp t-medium\">Find your favorite songs, artists, albums, and playlists</p>\n    </div>\n    \n    <div v-else-if=\"!hasResults\" class=\"search-no-results t-center pd-big\">\n      <h2 class=\"mn-b-small\">No results found for \"{{ searchQuery }}\"</h2>\n      <p class=\"t-transp t-medium\">Please try different keywords or check your spelling</p>\n    </div>\n    \n    <div v-else class=\"search-results\">\n      <!-- Songs Results -->\n      <section v-if=\"(activeFilter === 'all' || activeFilter === 'tracks') && trackResults.length > 0\" class=\"search-section mn-b-medium\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">Songs</h2>\n          <Button \n            v-if=\"trackResults.length > 5 && activeFilter === 'all'\"\n            @click=\"setActiveFilter('tracks')\"\n            class=\"t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            See all\n          </Button>\n        </div>\n        \n        <div class=\"bg-light radius-medium o-hidden\">\n          <TrackListCard\n            v-for=\"(track, index) in (activeFilter === 'all' ? trackResults.slice(0, 5) : trackResults)\"\n            :key=\"track._id\"\n            :track=\"track\"\n            :index=\"index\"\n            :showAlbum=\"true\"\n            :showCover=\"true\"\n          />\n        </div>\n      </section>\n      \n      <!-- Artists Results -->\n      <section v-if=\"(activeFilter === 'all' || activeFilter === 'artists') && artistResults.length > 0\" class=\"search-section mn-b-medium\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">Artists</h2>\n          <Button \n            v-if=\"artistResults.length > 6 && activeFilter === 'all'\"\n            @click=\"setActiveFilter('artists')\"\n            class=\"t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            See all\n          </Button>\n        </div>\n        \n        <div class=\"artists-grid cols-6 mobile:cols-3 gap-small\">\n          <div v-for=\"artist in (activeFilter === 'all' ? artistResults.slice(0, 6) : artistResults)\" :key=\"artist._id\">\n            <ArtistCard :artist=\"artist\" />\n          </div>\n        </div>\n      </section>\n      \n      <!-- Albums Results -->\n      <section v-if=\"(activeFilter === 'all' || activeFilter === 'albums') && albumResults.length > 0\" class=\"search-section mn-b-medium\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">Albums</h2>\n          <Button \n            v-if=\"albumResults.length > 5 && activeFilter === 'all'\"\n            @click=\"setActiveFilter('albums')\"\n            class=\"t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            See all\n          </Button>\n        </div>\n        \n        <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"album in (activeFilter === 'all' ? albumResults.slice(0, 5) : albumResults)\" :key=\"album._id\">\n            <AlbumCard :album=\"album\" />\n          </div>\n        </div>\n      </section>\n      \n      <!-- Playlists Results -->\n      <section v-if=\"(activeFilter === 'all' || activeFilter === 'playlists') && playlistResults.length > 0\" class=\"search-section mn-b-medium\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">Playlists</h2>\n          <Button \n            v-if=\"playlistResults.length > 5 && activeFilter === 'all'\"\n            @click=\"setActiveFilter('playlists')\"\n            class=\"t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            See all\n          </Button>\n        </div>\n        \n        <div class=\"playlists-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"playlist in (activeFilter === 'all' ? playlistResults.slice(0, 5) : playlistResults)\" :key=\"playlist._id\">\n            <PlaylistCard :playlist=\"playlist\" />\n          </div>\n        </div>\n      </section>\n      \n      <!-- Genres Results -->\n      <section v-if=\"(activeFilter === 'all' || activeFilter === 'genres') && genreResults.length > 0\" class=\"search-section\">\n        <div class=\"flex-between flex mn-b-small\">\n          <h2 class=\"\">Genres</h2>\n          <Button \n            v-if=\"genreResults.length > 4 && activeFilter === 'all'\"\n            @click=\"setActiveFilter('genres')\"\n            class=\"t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            See all\n          </Button>\n        </div>\n        \n        <div class=\"genres-grid cols-4 mobile:cols-2 gap-small\">\n          <router-link \n            v-for=\"genre in (activeFilter === 'all' ? genreResults.slice(0, 4) : genreResults)\" \n            :key=\"genre._id\"\n            :to=\"{ name: 'genre-detail', params: { url: genre.url } }\"\n            class=\"genre-card bg-gradient-color pd-medium radius-medium t-center hover-scale-1 transition-cubic-in-out\"\n            :style=\"{ \n              '--gradient-color': getRandomGradient() \n            }\"\n          >\n            <h3 class=\"\">{{ genre.name }}</h3>\n          </router-link>\n        </div>\n      </section>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport ArtistCard from '../cards/ArtistCard.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\n\n// Import search store\nimport { state as searchState, actions as searchActions } from '../../store/search.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// State\nconst searchQuery = ref('');\nconst activeFilter = ref('all');\n\n// Array of search filters\nconst searchFilters = [\n  { id: 'all', label: 'All' },\n  { id: 'tracks', label: 'Songs' },\n  { id: 'artists', label: 'Artists' },\n  { id: 'albums', label: 'Albums' },\n  { id: 'playlists', label: 'Playlists' },\n  { id: 'genres', label: 'Genres' }\n];\n\n// Computed properties\nconst isLoading = computed(() => searchState.isLoading);\nconst searchError = computed(() => searchState.error);\nconst hasResults = computed(() => {\n  return trackResults.value.length > 0 || \n         artistResults.value.length > 0 || \n         albumResults.value.length > 0 || \n         playlistResults.value.length > 0 || \n         genreResults.value.length > 0;\n});\n\nconst trackResults = computed(() => searchState.results.tracks || []);\nconst artistResults = computed(() => searchState.results.artists || []);\nconst albumResults = computed(() => searchState.results.albums || []);\nconst playlistResults = computed(() => searchState.results.playlists || []);\nconst genreResults = computed(() => searchState.results.genres || []);\n\n// Methods\nconst handleSearch = (query) => {\n  searchQuery.value = query;\n  \n  if (query.trim()) {\n    // Update URL without reloading the page\n    router.push({ \n      name: 'music-search', \n      query: { q: query },\n      replace: true\n    });\n    \n    // Perform search\n    searchActions.search(query);\n  } else {\n    // Clear search when query is empty\n    router.push({ \n      name: 'music-search',\n      replace: true\n    });\n    searchActions.clearSearch();\n  }\n};\n\nconst setActiveFilter = (filter) => {\n  activeFilter.value = filter;\n  searchActions.setFilter(filter);\n};\n\n// Generate random gradient for genre cards\nconst getRandomGradient = () => {\n  const colors = [\n    'linear-gradient(135deg, #1DB954, #1ED760)',\n    'linear-gradient(135deg, #FF6B6B, #FFE66D)',\n    'linear-gradient(135deg, #4776E6, #8E54E9)',\n    'linear-gradient(135deg, #FF8008, #FFC837)',\n    'linear-gradient(135deg, #7F00FF, #E100FF)',\n    'linear-gradient(135deg, #11998E, #38EF7D)'\n  ];\n  \n  return colors[Math.floor(Math.random() * colors.length)];\n};\n\n// Watch for URL query parameter changes\nonMounted(() => {\n  const query = route.query.q;\n  if (query) {\n    searchQuery.value = query;\n    searchActions.search(query);\n  }\n});\n\nwatch(() => route.query.q, (newQuery) => {\n  if (newQuery && newQuery !== searchQuery.value) {\n    searchQuery.value = newQuery;\n    searchActions.search(newQuery);\n  } else if (!newQuery) {\n    searchQuery.value = '';\n    searchActions.clearSearch();\n  }\n});\n</script>\n\n<style scoped>\n.bg-gradient-color {\n  background: var(--gradient-color, linear-gradient(135deg, #1DB954, #1ED760));\n}\n</style>"],"names":["searchState","searchActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6LA,UAAM,QAAQ,SAAQ;AACtB,UAAM,SAAS,UAAS;AAGxB,UAAM,cAAc,IAAI,EAAE;AAC1B,UAAM,eAAe,IAAI,KAAK;AAG9B,UAAM,gBAAgB;AAAA,MACpB,EAAE,IAAI,OAAO,OAAO,MAAK;AAAA,MACzB,EAAE,IAAI,UAAU,OAAO,QAAO;AAAA,MAC9B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;AAGA,UAAM,YAAY,SAAS,MAAMA,MAAY,SAAS;AACtD,UAAM,cAAc,SAAS,MAAMA,MAAY,KAAK;AACpD,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,aAAa,MAAM,SAAS,KAC5B,cAAc,MAAM,SAAS,KAC7B,aAAa,MAAM,SAAS,KAC5B,gBAAgB,MAAM,SAAS,KAC/B,aAAa,MAAM,SAAS;AAAA,IACrC,CAAC;AAED,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AACpE,UAAM,gBAAgB,SAAS,MAAMA,MAAY,QAAQ,WAAW,CAAA,CAAE;AACtE,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AACpE,UAAM,kBAAkB,SAAS,MAAMA,MAAY,QAAQ,aAAa,CAAA,CAAE;AAC1E,UAAM,eAAe,SAAS,MAAMA,MAAY,QAAQ,UAAU,CAAA,CAAE;AAGpE,UAAM,eAAe,CAAC,UAAU;AAC9B,kBAAY,QAAQ;AAEpB,UAAI,MAAM,QAAQ;AAEhB,eAAO,KAAK;AAAA,UACV,MAAM;AAAA,UACN,OAAO,EAAE,GAAG,MAAK;AAAA,UACjB,SAAS;AAAA,QACf,CAAK;AAGDC,gBAAc,OAAO,KAAK;AAAA,MAC5B,OAAO;AAEL,eAAO,KAAK;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QACf,CAAK;AACDA,gBAAc,YAAW;AAAA,MAC3B;AAAA,IACF;AAEA,UAAM,kBAAkB,CAAC,WAAW;AAClC,mBAAa,QAAQ;AACrBA,cAAc,UAAU,MAAM;AAAA,IAChC;AAGA,UAAM,oBAAoB,MAAM;AAC9B,YAAM,SAAS;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAEE,aAAO,OAAO,KAAK,MAAM,KAAK,WAAW,OAAO,MAAM,CAAC;AAAA,IACzD;AAGA,cAAU,MAAM;AACd,YAAM,QAAQ,MAAM,MAAM;AAC1B,UAAI,OAAO;AACT,oBAAY,QAAQ;AACpBA,gBAAc,OAAO,KAAK;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,UAAM,MAAM,MAAM,MAAM,GAAG,CAAC,aAAa;AACvC,UAAI,YAAY,aAAa,YAAY,OAAO;AAC9C,oBAAY,QAAQ;AACpBA,gBAAc,OAAO,QAAQ;AAAA,MAC/B,WAAW,CAAC,UAAU;AACpB,oBAAY,QAAQ;AACpBA,gBAAc,YAAW;AAAA,MAC3B;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}