@ozdao/martyrs 0.2.494 → 0.2.496

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

@@ -24,9 +24,9 @@ const _hoisted_6 = { class: "w-15r h-15r radius-medium o-hidden mn-r-medium bs-b
 const _hoisted_7 = ["src"];
 const _hoisted_8 = {
   key: 1,
-  class: "w-100 h-100 bg-white flex-center flex"
+  class: "w-100 h-100 bg-black flex-center flex"
 };
-const _hoisted_9 = { class: "h1" };
+const _hoisted_9 = { class: "h1 t-white" };
 const _hoisted_10 = { class: "mobile:t-center" };
 const _hoisted_11 = { class: "flex-v-center flex-nowrap flex mn-b-small mobile:flex-center" };
 const _hoisted_12 = { class: "h1 mn-r-small" };
@@ -77,7 +77,7 @@ const _hoisted_35 = { class: "p-medium t-truncate" };
 const _hoisted_36 = { class: "p-small t-transp" };
 const _hoisted_37 = {
   key: 1,
-  class: "bg-light pd-medium radius-medium"
+  class: "bg-light pd-medium mn-b-medium radius-medium"
 };
 const _hoisted_38 = { class: "cols-1 gap-small" };
 const _hoisted_39 = ["onClick"];
@@ -188,7 +188,7 @@ const _sfc_main = {
             style: vue.normalizeStyle(artist.value.coverUrl ? `background-image: url(${_ctx.FILE_SERVER_URL + artist.value.coverUrl}); background-size: cover; background-position: center;` : "")
           }, [
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small", artist.value.coverUrl ? "bg-black-transp-50" : "bg-black"])
+              class: vue.normalizeClass(["pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small", artist.value.coverUrl ? "bg-black-transp-50" : "bg-dark"])
             }, null, 2),
             isOwner.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
               vue.createVNode(Button.default, {
@@ -218,7 +218,7 @@ const _sfc_main = {
               vue.createElementVNode("div", _hoisted_6, [
                 artist.value.photoUrl ? (vue.openBlock(), vue.createElementBlock("img", {
                   key: 0,
-                  src: _ctx.FILE_SERVER_URL + artist.value.photoUrl,
+                  src: _ctx.FILE_SERVER_URL + (artist.value.photoUrl || "/logo/logo-placeholder.jpg"),
                   alt: "Artist photo",
                   class: "w-100 h-100 object-fit-cover"
                 }, null, 8, _hoisted_7)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [

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

@@ -1 +1 @@
-{"version":3,"file":"Artist.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Artist.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 pos-relative\">\n  \n    <!-- Artist not found -->\n    <div v-if=\"hasLoaded && !artist\" class=\"flex-center flex-column flex pd-extra\">\n      <h2 class=\"h2 mn-b-medium\">Artist Not Found</h2>\n      <p class=\"p-medium t-transp mn-b-medium\">The artist you are looking for doesn't exist or may have been removed.</p>\n      <Button\n        :submit=\"() => router.push({ name: 'music-home' })\"\n        class=\"bg-main \"\n        :showSucces=\"false\"\n        :showLoader=\"false\"\n      >\n        Back to Music\n      </Button>\n    </div>\n    \n    <!-- Artist content -->\n    <div v-if=\"artist\">\n      <!-- Cover image -->\n      <div \n        class=\"w-100 t-white h-50vh pos-relative\"\n        :style=\"artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''\"\n      >\n        <div class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small\" :class=\"artist.coverUrl ? 'bg-black-transp-50' : 'bg-black'\"></div>\n        \n        <!-- Artist actions for edit/manage -->\n        <div v-if=\"isOwner\" class=\"pos-absolute pos-t-medium pos-r-medium z-index-1\">\n          <Button\n            @click=\"router.push({ name: 'artist-edit', params: { url: artist.url } })\"\n            class=\"bg-main  mn-r-small\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Edit Artist\n          </Button>\n          \n          <Button\n            @click=\"router.push({ name: 'artist-manage-content', params: { artistId: artist._id } })\"\n            class=\"bg-white t-black\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Manage Content\n          </Button>\n        </div>\n        \n        <!-- Artist profile info -->\n        <div class=\"flex-v-center t-white  pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center\">\n          <div class=\"w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium\">\n            <img\n              v-if=\"artist.photoUrl\"\n              :src=\"FILE_SERVER_URL + artist.photoUrl\"\n              alt=\"Artist photo\"\n              class=\"w-100 h-100 object-fit-cover\"\n            />\n            <div v-else class=\"w-100 h-100 bg-white flex-center flex\">\n              <span class=\"h1\">{{ artist?.name?.[0] || 'A' }}</span>\n            </div>\n          </div>\n          \n          <div class=\" mobile:t-center\">\n            <div class=\"flex-v-center flex-nowrap flex mn-b-small mobile:flex-center\">\n              <h1 class=\"h1 mn-r-small\">{{ artist.name }}</h1>\n              <span v-if=\"artist.isVerified\" class=\"bg-main-nano pd-micro radius-small\">\n                ✓ Verified\n              </span>\n            </div>\n            \n            <p v-if=\"artist.location\" class=\"p-medium mn-b-small\">{{ artist.location }}</p>\n            \n            <!-- Social media links -->\n            <div class=\"flex flex-nowrap gap-small mobile:flex-center\">\n              <a \n                v-if=\"artist.socials.telegram\" \n                :href=\"`https://t.me/${artist.socials.telegram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>T</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.twitter\" \n                :href=\"`https://twitter.com/${artist.socials.twitter}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>𝕏</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.instagram\" \n                :href=\"`https://instagram.com/${artist.socials.instagram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>I</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.facebook\" \n                :href=\"`https://facebook.com/${artist.socials.facebook}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>F</span>\n              </a>\n              \n              <a \n                v-if=\"artist.website\" \n                :href=\"artist.website\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>W</span>\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Main content -->\n      <div class=\"pd-medium\">\n        <div class=\"cols-2-1_2 gap-medium mobile:cols-1\">\n          <!-- Left column - Bio and details -->\n          <div>\n            <div class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-small\">Biography</h2>\n              <p v-if=\"artist.bio\" class=\"p-medium\">{{ artist.bio }}</p>\n              <p v-else class=\"p-medium t-transp\">No biography available for this artist.</p>\n            </div>\n            \n            <!-- Genres -->\n            <div v-if=\"genres.length > 0\" class=\"bg-light pd-medium radius-medium\">\n              <h2 class=\"h3 mn-b-small\">Genres</h2>\n              <div class=\"flex flex-wrap gap-small\">\n                <span \n                  v-for=\"genre in genres\" \n                  :key=\"genre._id\"\n                  class=\"bg-white pd-thin radius-medium\"\n                >\n                  {{ genre.name }}\n                </span>\n              </div>\n            </div>\n          </div>\n          \n          <!-- Right column - Discography -->\n          <div>\n            <!-- Albums section -->\n            <div v-if=\"discography.albums.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Albums</h2>\n              \n              <div class=\"cols-2 gap-small mobile:cols-1\">\n                <div\n                  v-for=\"album in discography.albums\"\n                  :key=\"album._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"router.push({ name: 'album', params: { url: album.url } })\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"album.coverUrl\"\n                      :src=\"FILE_SERVER_URL + album.coverUrl\"\n                      alt=\"Album cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>A</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ album.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(album.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.albums.length > 4\"\n                @click=\"router.push({ name: 'artist-albums', params: { artistId: artist._id } })\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Albums\n              </Button>\n            </div>\n            \n            <!-- Singles section -->\n            <div v-if=\"discography.singles.length > 0\" class=\"bg-light pd-medium radius-medium\">\n              <h2 class=\"h3 mn-b-medium\">Singles & EPs</h2>\n              \n              <div class=\"cols-1 gap-small\">\n                <div\n                  v-for=\"single in discography.singles\"\n                  :key=\"single._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"router.push({ name: 'track', params: { url: single.url } })\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"single.coverUrl\"\n                      :src=\"FILE_SERVER_URL + single.coverUrl\"\n                      alt=\"Single cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>S</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ single.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(single.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.singles.length > 5\"\n                @click=\"router.push({ name: 'artist-singles', params: { artistId: artist._id } })\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Singles & EPs\n              </Button>\n            </div>\n            \n            <!-- Popular Tracks Section -->\n            <div v-if=\"artistTracks.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Popular Tracks</h2>\n              \n              <div class=\"bg-white radius-medium o-hidden\">\n                <TrackListCard\n                  v-for=\"(track, index) in artistTracks\"\n                  :key=\"track._id\"\n                  :track=\"track\"\n                  :index=\"index\"\n                  :showAlbum=\"true\"\n                  :showCover=\"true\"\n                />\n              </div>\n            </div>\n            \n            <!-- No discography yet -->\n            <div \n              v-if=\"discography.albums.length === 0 && discography.singles.length === 0\" \n              class=\"bg-light pd-medium radius-medium t-center\"\n            >\n              <p class=\"p-medium mn-b-small\">No releases yet</p>\n              <p class=\"p-small t-transp\">This artist hasn't released any albums or singles yet.</p>\n              \n              <Button\n                v-if=\"isOwner\"\n                @click=\"router.push({ name: 'release-create', query: { artistId: artist._id } })\"\n                class=\"mn-t-medium bg-main \"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                Add Release\n              </Button>\n            </div>\n          </div>\n        </div>\n        \n        <!-- Related Artists -->\n        <div v-if=\"relatedArtists.length > 0\" class=\"mn-t-medium\">\n          <h2 class=\"h3 mn-b-medium\">Fans Also Like</h2>\n          \n          <div class=\"cols-5 gap-medium mobile:cols-2\">\n            <div\n              v-for=\"relatedArtist in relatedArtists\"\n              :key=\"relatedArtist._id\"\n              class=\"t-center cursor-pointer\"\n              @click=\"router.push({ name: 'artist', params: { url: relatedArtist.url } })\"\n            >\n              <div class=\"w-100 aspect-1x1 radius-medium o-hidden mn-b-small\">\n                <img\n                  v-if=\"relatedArtist.photoUrl\"\n                  :src=\"FILE_SERVER_URL + relatedArtist.photoUrl\"\n                  alt=\"Artist photo\"\n                  class=\"w-100 h-100 object-fit-cover\"\n                />\n                <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                  <span>{{ relatedArtist?.name?.[0] || 'A' }}</span>\n                </div>\n              </div>\n              \n              <p class=\"p-medium t-truncate\">{{ relatedArtist.name }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\n// import * as genreStore from '../../store/genres'; // Assuming you have a genre store\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\nconst { formatDate } = useGlobalMixins();\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst genres = ref([]);\nconst hasLoaded = ref(false);\n\n// Computed\nconst artist = computed(() => {\n  return artistsStore.state.currentArtist;\n});\n\nconst discography = computed(() => {\n  return artistsStore.state.discography;\n});\n\nconst relatedArtists = computed(() => {\n  return artistsStore.state.relatedArtists;\n});\n\nconst artistTracks = computed(() => {\n  return artistsStore.state.discography.tracks || [];\n});\n\nconst isOwner = computed(() => {\n  if (!artist.value || !auth.state.user._id) return false;\n  \n  // Check if current user is the creator of the artist\n  return artist.value.creator?.target?._id === auth.state.user._id;\n});\n\n// Clear current artist state\nartistsStore.state.currentArtist = null;\n// Clear discography state\nartistsStore.state.discography = {\n  albums: [],\n  singles: [],\n  tracks: []\n};\nartistsStore.state.relatedArtists = [];\n\n// Methods\nconst fetchArtist = async () => {\n  try {\n    // Get URL from route params\n    const url = route.params.url;\n    if (!url) {\n      throw new Error('Artist URL is required');\n    }\n    \n    await artistsStore.actions.fetchArtistByUrl(url);\n  } catch (error) {\n    console.error('Error fetching artist:', error);\n    globals.actions.setError({\n      message: 'Failed to load artist'\n    });\n  }\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchArtist();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>"],"names":["useGlobalMixins","useRouter","useRoute","ref","computed","artistsStore.state","auth.state","artistsStore.actions","globals.actions","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8TA,UAAM,EAAE,WAAU,IAAKA,uBAAe;AAGtC,UAAM,SAASC,UAAAA,UAAS;AACxB,UAAM,QAAQC,UAAAA,SAAQ;AAGtB,UAAM,QAAQ;AAGd,UAAM,SAASC,IAAAA,IAAI,EAAE;AACrB,UAAM,YAAYA,IAAAA,IAAI,KAAK;AAG3B,UAAM,SAASC,IAAAA,SAAS,MAAM;AAC5B,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,cAAcD,IAAAA,SAAS,MAAM;AACjC,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,iBAAiBD,IAAAA,SAAS,MAAM;AACpC,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,eAAeD,IAAAA,SAAS,MAAM;AAClC,aAAOC,QAAAA,MAAmB,YAAY,UAAU,CAAA;AAAA,IAClD,CAAC;AAED,UAAM,UAAUD,IAAAA,SAAS,MAAM;AAC7B,UAAI,CAAC,OAAO,SAAS,CAACE,KAAAA,MAAW,KAAK,IAAK,QAAO;AAGlD,aAAO,OAAO,MAAM,SAAS,QAAQ,QAAQA,KAAAA,MAAW,KAAK;AAAA,IAC/D,CAAC;AAGDD,YAAAA,MAAmB,gBAAgB;AAEnCA,YAAAA,MAAmB,cAAc;AAAA,MAC/B,QAAQ,CAAA;AAAA,MACR,SAAS,CAAA;AAAA,MACT,QAAQ,CAAA;AAAA,IACV;AACAA,YAAAA,MAAmB,iBAAiB,CAAA;AAGpC,UAAM,cAAc,YAAY;AAC9B,UAAI;AAEF,cAAM,MAAM,MAAM,OAAO;AACzB,YAAI,CAAC,KAAK;AACR,gBAAM,IAAI,MAAM,wBAAwB;AAAA,QAC1C;AAEA,cAAME,QAAAA,QAAqB,iBAAiB,GAAG;AAAA,MACjD,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7CC,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAGAC,QAAAA,UAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,YAAW;AAEjB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Artist.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Artist.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 pos-relative\">\n  \n    <!-- Artist not found -->\n    <div v-if=\"hasLoaded && !artist\" class=\"flex-center flex-column flex pd-extra\">\n      <h2 class=\"h2 mn-b-medium\">Artist Not Found</h2>\n      <p class=\"p-medium t-transp mn-b-medium\">The artist you are looking for doesn't exist or may have been removed.</p>\n      <Button\n        :submit=\"() => router.push({ name: 'music-home' })\"\n        class=\"bg-main \"\n        :showSucces=\"false\"\n        :showLoader=\"false\"\n      >\n        Back to Music\n      </Button>\n    </div>\n    \n    <!-- Artist content -->\n    <div v-if=\"artist\">\n      <!-- Cover image -->\n      <div \n        class=\"w-100 t-white h-50vh pos-relative\"\n        :style=\"artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''\"\n      >\n        <div class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small\" :class=\"artist.coverUrl ? 'bg-black-transp-50' : 'bg-dark'\"></div>\n        \n        <!-- Artist actions for edit/manage -->\n        <div v-if=\"isOwner\" class=\"pos-absolute pos-t-medium pos-r-medium z-index-1\">\n          <Button\n            @click=\"router.push({ name: 'artist-edit', params: { url: artist.url } })\"\n            class=\"bg-main  mn-r-small\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Edit Artist\n          </Button>\n          \n          <Button\n            @click=\"router.push({ name: 'artist-manage-content', params: { artistId: artist._id } })\"\n            class=\"bg-white t-black\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Manage Content\n          </Button>\n        </div>\n        \n        <!-- Artist profile info -->\n        <div class=\"flex-v-center t-white  pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center\">\n          <div class=\"w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium\">\n            <img\n              v-if=\"artist.photoUrl\"\n              :src=\"FILE_SERVER_URL + (artist.photoUrl  || '/logo/logo-placeholder.jpg')\"\n              alt=\"Artist photo\"\n              class=\"w-100 h-100 object-fit-cover\"\n            />\n            <div v-else class=\"w-100 h-100 bg-black flex-center flex\">\n              <span class=\"h1 t-white\">{{ artist?.name?.[0] || 'A' }}</span>\n            </div>\n          </div>\n          \n          <div class=\" mobile:t-center\">\n            <div class=\"flex-v-center flex-nowrap flex mn-b-small mobile:flex-center\">\n              <h1 class=\"h1 mn-r-small\">{{ artist.name }}</h1>\n              <span v-if=\"artist.isVerified\" class=\"bg-main-nano pd-micro radius-small\">\n                ✓ Verified\n              </span>\n            </div>\n            \n            <p v-if=\"artist.location\" class=\"p-medium mn-b-small\">{{ artist.location }}</p>\n            \n            <!-- Social media links -->\n            <div class=\"flex flex-nowrap gap-small mobile:flex-center\">\n              <a \n                v-if=\"artist.socials.telegram\" \n                :href=\"`https://t.me/${artist.socials.telegram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>T</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.twitter\" \n                :href=\"`https://twitter.com/${artist.socials.twitter}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>𝕏</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.instagram\" \n                :href=\"`https://instagram.com/${artist.socials.instagram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>I</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.facebook\" \n                :href=\"`https://facebook.com/${artist.socials.facebook}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>F</span>\n              </a>\n              \n              <a \n                v-if=\"artist.website\" \n                :href=\"artist.website\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>W</span>\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Main content -->\n      <div class=\"pd-medium\">\n        <div class=\"cols-2-1_2 gap-medium mobile:cols-1\">\n          <!-- Left column - Bio and details -->\n          <div>\n            <div class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-small\">Biography</h2>\n              <p v-if=\"artist.bio\" class=\"p-medium\">{{ artist.bio }}</p>\n              <p v-else class=\"p-medium t-transp\">No biography available for this artist.</p>\n            </div>\n            \n            <!-- Genres -->\n            <div v-if=\"genres.length > 0\" class=\"bg-light pd-medium radius-medium\">\n              <h2 class=\"h3 mn-b-small\">Genres</h2>\n              <div class=\"flex flex-wrap gap-small\">\n                <span \n                  v-for=\"genre in genres\" \n                  :key=\"genre._id\"\n                  class=\"bg-white pd-thin radius-medium\"\n                >\n                  {{ genre.name }}\n                </span>\n              </div>\n            </div>\n          </div>\n          \n          <!-- Right column - Discography -->\n          <div>\n            <!-- Albums section -->\n            <div v-if=\"discography.albums.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Albums</h2>\n              \n              <div class=\"cols-2 gap-small mobile:cols-1\">\n                <div\n                  v-for=\"album in discography.albums\"\n                  :key=\"album._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"router.push({ name: 'album', params: { url: album.url } })\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"album.coverUrl\"\n                      :src=\"FILE_SERVER_URL + album.coverUrl\"\n                      alt=\"Album cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>A</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ album.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(album.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.albums.length > 4\"\n                @click=\"router.push({ name: 'artist-albums', params: { artistId: artist._id } })\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Albums\n              </Button>\n            </div>\n            \n            <!-- Singles section -->\n            <div v-if=\"discography.singles.length > 0\" class=\"bg-light pd-medium mn-b-medium radius-medium\">\n              <h2 class=\"h3 mn-b-medium\">Singles & EPs</h2>\n              \n              <div class=\"cols-1 gap-small\">\n                <div\n                  v-for=\"single in discography.singles\"\n                  :key=\"single._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"router.push({ name: 'track', params: { url: single.url } })\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"single.coverUrl\"\n                      :src=\"FILE_SERVER_URL + single.coverUrl\"\n                      alt=\"Single cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>S</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ single.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(single.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.singles.length > 5\"\n                @click=\"router.push({ name: 'artist-singles', params: { artistId: artist._id } })\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Singles & EPs\n              </Button>\n            </div>\n            \n            <!-- Popular Tracks Section -->\n            <div v-if=\"artistTracks.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Popular Tracks</h2>\n              \n              <div class=\"bg-white radius-medium o-hidden\">\n                <TrackListCard\n                  v-for=\"(track, index) in artistTracks\"\n                  :key=\"track._id\"\n                  :track=\"track\"\n                  :index=\"index\"\n                  :showAlbum=\"true\"\n                  :showCover=\"true\"\n                />\n              </div>\n            </div>\n            \n            <!-- No discography yet -->\n            <div \n              v-if=\"discography.albums.length === 0 && discography.singles.length === 0\" \n              class=\"bg-light pd-medium radius-medium t-center\"\n            >\n              <p class=\"p-medium mn-b-small\">No releases yet</p>\n              <p class=\"p-small t-transp\">This artist hasn't released any albums or singles yet.</p>\n              \n              <Button\n                v-if=\"isOwner\"\n                @click=\"router.push({ name: 'release-create', query: { artistId: artist._id } })\"\n                class=\"mn-t-medium bg-main \"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                Add Release\n              </Button>\n            </div>\n          </div>\n        </div>\n        \n        <!-- Related Artists -->\n        <div v-if=\"relatedArtists.length > 0\" class=\"mn-t-medium\">\n          <h2 class=\"h3 mn-b-medium\">Fans Also Like</h2>\n          \n          <div class=\"cols-5 gap-medium mobile:cols-2\">\n            <div\n              v-for=\"relatedArtist in relatedArtists\"\n              :key=\"relatedArtist._id\"\n              class=\"t-center cursor-pointer\"\n              @click=\"router.push({ name: 'artist', params: { url: relatedArtist.url } })\"\n            >\n              <div class=\"w-100 aspect-1x1 radius-medium o-hidden mn-b-small\">\n                <img\n                  v-if=\"relatedArtist.photoUrl\"\n                  :src=\"FILE_SERVER_URL + relatedArtist.photoUrl\"\n                  alt=\"Artist photo\"\n                  class=\"w-100 h-100 object-fit-cover\"\n                />\n                <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                  <span>{{ relatedArtist?.name?.[0] || 'A' }}</span>\n                </div>\n              </div>\n              \n              <p class=\"p-medium t-truncate\">{{ relatedArtist.name }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\n// import * as genreStore from '../../store/genres'; // Assuming you have a genre store\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\nconst { formatDate } = useGlobalMixins();\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst genres = ref([]);\nconst hasLoaded = ref(false);\n\n// Computed\nconst artist = computed(() => {\n  return artistsStore.state.currentArtist;\n});\n\nconst discography = computed(() => {\n  return artistsStore.state.discography;\n});\n\nconst relatedArtists = computed(() => {\n  return artistsStore.state.relatedArtists;\n});\n\nconst artistTracks = computed(() => {\n  return artistsStore.state.discography.tracks || [];\n});\n\nconst isOwner = computed(() => {\n  if (!artist.value || !auth.state.user._id) return false;\n  \n  // Check if current user is the creator of the artist\n  return artist.value.creator?.target?._id === auth.state.user._id;\n});\n\n// Clear current artist state\nartistsStore.state.currentArtist = null;\n// Clear discography state\nartistsStore.state.discography = {\n  albums: [],\n  singles: [],\n  tracks: []\n};\nartistsStore.state.relatedArtists = [];\n\n// Methods\nconst fetchArtist = async () => {\n  try {\n    // Get URL from route params\n    const url = route.params.url;\n    if (!url) {\n      throw new Error('Artist URL is required');\n    }\n    \n    await artistsStore.actions.fetchArtistByUrl(url);\n  } catch (error) {\n    console.error('Error fetching artist:', error);\n    globals.actions.setError({\n      message: 'Failed to load artist'\n    });\n  }\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchArtist();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>"],"names":["useGlobalMixins","useRouter","useRoute","ref","computed","artistsStore.state","auth.state","artistsStore.actions","globals.actions","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8TA,UAAM,EAAE,WAAU,IAAKA,uBAAe;AAGtC,UAAM,SAASC,UAAAA,UAAS;AACxB,UAAM,QAAQC,UAAAA,SAAQ;AAGtB,UAAM,QAAQ;AAGd,UAAM,SAASC,IAAAA,IAAI,EAAE;AACrB,UAAM,YAAYA,IAAAA,IAAI,KAAK;AAG3B,UAAM,SAASC,IAAAA,SAAS,MAAM;AAC5B,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,cAAcD,IAAAA,SAAS,MAAM;AACjC,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,iBAAiBD,IAAAA,SAAS,MAAM;AACpC,aAAOC,QAAAA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,eAAeD,IAAAA,SAAS,MAAM;AAClC,aAAOC,QAAAA,MAAmB,YAAY,UAAU,CAAA;AAAA,IAClD,CAAC;AAED,UAAM,UAAUD,IAAAA,SAAS,MAAM;AAC7B,UAAI,CAAC,OAAO,SAAS,CAACE,KAAAA,MAAW,KAAK,IAAK,QAAO;AAGlD,aAAO,OAAO,MAAM,SAAS,QAAQ,QAAQA,KAAAA,MAAW,KAAK;AAAA,IAC/D,CAAC;AAGDD,YAAAA,MAAmB,gBAAgB;AAEnCA,YAAAA,MAAmB,cAAc;AAAA,MAC/B,QAAQ,CAAA;AAAA,MACR,SAAS,CAAA;AAAA,MACT,QAAQ,CAAA;AAAA,IACV;AACAA,YAAAA,MAAmB,iBAAiB,CAAA;AAGpC,UAAM,cAAc,YAAY;AAC9B,UAAI;AAEF,cAAM,MAAM,MAAM,OAAO;AACzB,YAAI,CAAC,KAAK;AACR,gBAAM,IAAI,MAAM,wBAAwB;AAAA,QAC1C;AAEA,cAAME,QAAAA,QAAqB,iBAAiB,GAAG;AAAA,MACjD,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7CC,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAGAC,QAAAA,UAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,YAAW;AAEjB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -22,9 +22,9 @@ const _hoisted_6 = { class: "w-15r h-15r radius-medium o-hidden mn-r-medium bs-b
 const _hoisted_7 = ["src"];
 const _hoisted_8 = {
   key: 1,
-  class: "w-100 h-100 bg-white flex-center flex"
+  class: "w-100 h-100 bg-black flex-center flex"
 };
-const _hoisted_9 = { class: "h1" };
+const _hoisted_9 = { class: "h1 t-white" };
 const _hoisted_10 = { class: "mobile:t-center" };
 const _hoisted_11 = { class: "flex-v-center flex-nowrap flex mn-b-small mobile:flex-center" };
 const _hoisted_12 = { class: "h1 mn-r-small" };
@@ -75,7 +75,7 @@ const _hoisted_35 = { class: "p-medium t-truncate" };
 const _hoisted_36 = { class: "p-small t-transp" };
 const _hoisted_37 = {
   key: 1,
-  class: "bg-light pd-medium radius-medium"
+  class: "bg-light pd-medium mn-b-medium radius-medium"
 };
 const _hoisted_38 = { class: "cols-1 gap-small" };
 const _hoisted_39 = ["onClick"];
@@ -186,7 +186,7 @@ const _sfc_main = {
             style: normalizeStyle(artist.value.coverUrl ? `background-image: url(${_ctx.FILE_SERVER_URL + artist.value.coverUrl}); background-size: cover; background-position: center;` : "")
           }, [
             createElementVNode("div", {
-              class: normalizeClass(["pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small", artist.value.coverUrl ? "bg-black-transp-50" : "bg-black"])
+              class: normalizeClass(["pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small", artist.value.coverUrl ? "bg-black-transp-50" : "bg-dark"])
             }, null, 2),
             isOwner.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
               createVNode(_sfc_main$1, {
@@ -216,7 +216,7 @@ const _sfc_main = {
               createElementVNode("div", _hoisted_6, [
                 artist.value.photoUrl ? (openBlock(), createElementBlock("img", {
                   key: 0,
-                  src: _ctx.FILE_SERVER_URL + artist.value.photoUrl,
+                  src: _ctx.FILE_SERVER_URL + (artist.value.photoUrl || "/logo/logo-placeholder.jpg"),
                   alt: "Artist photo",
                   class: "w-100 h-100 object-fit-cover"
                 }, null, 8, _hoisted_7)) : (openBlock(), createElementBlock("div", _hoisted_8, [

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

@@ -1 +1 @@
-{"version":3,"file":"Artist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Artist.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 pos-relative\">\n  \n    <!-- Artist not found -->\n    <div v-if=\"hasLoaded && !artist\" class=\"flex-center flex-column flex pd-extra\">\n      <h2 class=\"h2 mn-b-medium\">Artist Not Found</h2>\n      <p class=\"p-medium t-transp mn-b-medium\">The artist you are looking for doesn't exist or may have been removed.</p>\n      <Button\n        :submit=\"() => router.push({ name: 'music-home' })\"\n        class=\"bg-main \"\n        :showSucces=\"false\"\n        :showLoader=\"false\"\n      >\n        Back to Music\n      </Button>\n    </div>\n    \n    <!-- Artist content -->\n    <div v-if=\"artist\">\n      <!-- Cover image -->\n      <div \n        class=\"w-100 t-white h-50vh pos-relative\"\n        :style=\"artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''\"\n      >\n        <div class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small\" :class=\"artist.coverUrl ? 'bg-black-transp-50' : 'bg-black'\"></div>\n        \n        <!-- Artist actions for edit/manage -->\n        <div v-if=\"isOwner\" class=\"pos-absolute pos-t-medium pos-r-medium z-index-1\">\n          <Button\n            @click=\"router.push({ name: 'artist-edit', params: { url: artist.url } })\"\n            class=\"bg-main  mn-r-small\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Edit Artist\n          </Button>\n          \n          <Button\n            @click=\"router.push({ name: 'artist-manage-content', params: { artistId: artist._id } })\"\n            class=\"bg-white t-black\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Manage Content\n          </Button>\n        </div>\n        \n        <!-- Artist profile info -->\n        <div class=\"flex-v-center t-white  pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center\">\n          <div class=\"w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium\">\n            <img\n              v-if=\"artist.photoUrl\"\n              :src=\"FILE_SERVER_URL + artist.photoUrl\"\n              alt=\"Artist photo\"\n              class=\"w-100 h-100 object-fit-cover\"\n            />\n            <div v-else class=\"w-100 h-100 bg-white flex-center flex\">\n              <span class=\"h1\">{{ artist?.name?.[0] || 'A' }}</span>\n            </div>\n          </div>\n          \n          <div class=\" mobile:t-center\">\n            <div class=\"flex-v-center flex-nowrap flex mn-b-small mobile:flex-center\">\n              <h1 class=\"h1 mn-r-small\">{{ artist.name }}</h1>\n              <span v-if=\"artist.isVerified\" class=\"bg-main-nano pd-micro radius-small\">\n                ✓ Verified\n              </span>\n            </div>\n            \n            <p v-if=\"artist.location\" class=\"p-medium mn-b-small\">{{ artist.location }}</p>\n            \n            <!-- Social media links -->\n            <div class=\"flex flex-nowrap gap-small mobile:flex-center\">\n              <a \n                v-if=\"artist.socials.telegram\" \n                :href=\"`https://t.me/${artist.socials.telegram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>T</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.twitter\" \n                :href=\"`https://twitter.com/${artist.socials.twitter}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>𝕏</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.instagram\" \n                :href=\"`https://instagram.com/${artist.socials.instagram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>I</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.facebook\" \n                :href=\"`https://facebook.com/${artist.socials.facebook}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>F</span>\n              </a>\n              \n              <a \n                v-if=\"artist.website\" \n                :href=\"artist.website\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>W</span>\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Main content -->\n      <div class=\"pd-medium\">\n        <div class=\"cols-2-1_2 gap-medium mobile:cols-1\">\n          <!-- Left column - Bio and details -->\n          <div>\n            <div class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-small\">Biography</h2>\n              <p v-if=\"artist.bio\" class=\"p-medium\">{{ artist.bio }}</p>\n              <p v-else class=\"p-medium t-transp\">No biography available for this artist.</p>\n            </div>\n            \n            <!-- Genres -->\n            <div v-if=\"genres.length > 0\" class=\"bg-light pd-medium radius-medium\">\n              <h2 class=\"h3 mn-b-small\">Genres</h2>\n              <div class=\"flex flex-wrap gap-small\">\n                <span \n                  v-for=\"genre in genres\" \n                  :key=\"genre._id\"\n                  class=\"bg-white pd-thin radius-medium\"\n                >\n                  {{ genre.name }}\n                </span>\n              </div>\n            </div>\n          </div>\n          \n          <!-- Right column - Discography -->\n          <div>\n            <!-- Albums section -->\n            <div v-if=\"discography.albums.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Albums</h2>\n              \n              <div class=\"cols-2 gap-small mobile:cols-1\">\n                <div\n                  v-for=\"album in discography.albums\"\n                  :key=\"album._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"router.push({ name: 'album', params: { url: album.url } })\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"album.coverUrl\"\n                      :src=\"FILE_SERVER_URL + album.coverUrl\"\n                      alt=\"Album cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>A</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ album.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(album.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.albums.length > 4\"\n                @click=\"router.push({ name: 'artist-albums', params: { artistId: artist._id } })\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Albums\n              </Button>\n            </div>\n            \n            <!-- Singles section -->\n            <div v-if=\"discography.singles.length > 0\" class=\"bg-light pd-medium radius-medium\">\n              <h2 class=\"h3 mn-b-medium\">Singles & EPs</h2>\n              \n              <div class=\"cols-1 gap-small\">\n                <div\n                  v-for=\"single in discography.singles\"\n                  :key=\"single._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"router.push({ name: 'track', params: { url: single.url } })\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"single.coverUrl\"\n                      :src=\"FILE_SERVER_URL + single.coverUrl\"\n                      alt=\"Single cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>S</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ single.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(single.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.singles.length > 5\"\n                @click=\"router.push({ name: 'artist-singles', params: { artistId: artist._id } })\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Singles & EPs\n              </Button>\n            </div>\n            \n            <!-- Popular Tracks Section -->\n            <div v-if=\"artistTracks.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Popular Tracks</h2>\n              \n              <div class=\"bg-white radius-medium o-hidden\">\n                <TrackListCard\n                  v-for=\"(track, index) in artistTracks\"\n                  :key=\"track._id\"\n                  :track=\"track\"\n                  :index=\"index\"\n                  :showAlbum=\"true\"\n                  :showCover=\"true\"\n                />\n              </div>\n            </div>\n            \n            <!-- No discography yet -->\n            <div \n              v-if=\"discography.albums.length === 0 && discography.singles.length === 0\" \n              class=\"bg-light pd-medium radius-medium t-center\"\n            >\n              <p class=\"p-medium mn-b-small\">No releases yet</p>\n              <p class=\"p-small t-transp\">This artist hasn't released any albums or singles yet.</p>\n              \n              <Button\n                v-if=\"isOwner\"\n                @click=\"router.push({ name: 'release-create', query: { artistId: artist._id } })\"\n                class=\"mn-t-medium bg-main \"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                Add Release\n              </Button>\n            </div>\n          </div>\n        </div>\n        \n        <!-- Related Artists -->\n        <div v-if=\"relatedArtists.length > 0\" class=\"mn-t-medium\">\n          <h2 class=\"h3 mn-b-medium\">Fans Also Like</h2>\n          \n          <div class=\"cols-5 gap-medium mobile:cols-2\">\n            <div\n              v-for=\"relatedArtist in relatedArtists\"\n              :key=\"relatedArtist._id\"\n              class=\"t-center cursor-pointer\"\n              @click=\"router.push({ name: 'artist', params: { url: relatedArtist.url } })\"\n            >\n              <div class=\"w-100 aspect-1x1 radius-medium o-hidden mn-b-small\">\n                <img\n                  v-if=\"relatedArtist.photoUrl\"\n                  :src=\"FILE_SERVER_URL + relatedArtist.photoUrl\"\n                  alt=\"Artist photo\"\n                  class=\"w-100 h-100 object-fit-cover\"\n                />\n                <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                  <span>{{ relatedArtist?.name?.[0] || 'A' }}</span>\n                </div>\n              </div>\n              \n              <p class=\"p-medium t-truncate\">{{ relatedArtist.name }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\n// import * as genreStore from '../../store/genres'; // Assuming you have a genre store\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\nconst { formatDate } = useGlobalMixins();\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst genres = ref([]);\nconst hasLoaded = ref(false);\n\n// Computed\nconst artist = computed(() => {\n  return artistsStore.state.currentArtist;\n});\n\nconst discography = computed(() => {\n  return artistsStore.state.discography;\n});\n\nconst relatedArtists = computed(() => {\n  return artistsStore.state.relatedArtists;\n});\n\nconst artistTracks = computed(() => {\n  return artistsStore.state.discography.tracks || [];\n});\n\nconst isOwner = computed(() => {\n  if (!artist.value || !auth.state.user._id) return false;\n  \n  // Check if current user is the creator of the artist\n  return artist.value.creator?.target?._id === auth.state.user._id;\n});\n\n// Clear current artist state\nartistsStore.state.currentArtist = null;\n// Clear discography state\nartistsStore.state.discography = {\n  albums: [],\n  singles: [],\n  tracks: []\n};\nartistsStore.state.relatedArtists = [];\n\n// Methods\nconst fetchArtist = async () => {\n  try {\n    // Get URL from route params\n    const url = route.params.url;\n    if (!url) {\n      throw new Error('Artist URL is required');\n    }\n    \n    await artistsStore.actions.fetchArtistByUrl(url);\n  } catch (error) {\n    console.error('Error fetching artist:', error);\n    globals.actions.setError({\n      message: 'Failed to load artist'\n    });\n  }\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchArtist();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>"],"names":["artistsStore.state","auth.state","artistsStore.actions","globals.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8TA,UAAM,EAAE,WAAU,IAAK,gBAAe;AAGtC,UAAM,SAAS,UAAS;AACxB,UAAM,QAAQ,SAAQ;AAGtB,UAAM,QAAQ;AAGd,UAAM,SAAS,IAAI,EAAE;AACrB,UAAM,YAAY,IAAI,KAAK;AAG3B,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOA,MAAmB,YAAY,UAAU,CAAA;AAAA,IAClD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,UAAI,CAAC,OAAO,SAAS,CAACC,QAAW,KAAK,IAAK,QAAO;AAGlD,aAAO,OAAO,MAAM,SAAS,QAAQ,QAAQA,QAAW,KAAK;AAAA,IAC/D,CAAC;AAGDD,UAAmB,gBAAgB;AAEnCA,UAAmB,cAAc;AAAA,MAC/B,QAAQ,CAAA;AAAA,MACR,SAAS,CAAA;AAAA,MACT,QAAQ,CAAA;AAAA,IACV;AACAA,UAAmB,iBAAiB,CAAA;AAGpC,UAAM,cAAc,YAAY;AAC9B,UAAI;AAEF,cAAM,MAAM,MAAM,OAAO;AACzB,YAAI,CAAC,KAAK;AACR,gBAAM,IAAI,MAAM,wBAAwB;AAAA,QAC1C;AAEA,cAAME,QAAqB,iBAAiB,GAAG;AAAA,MACjD,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7CC,kBAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAGA,cAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,YAAW;AAEjB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Artist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Artist.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 pos-relative\">\n  \n    <!-- Artist not found -->\n    <div v-if=\"hasLoaded && !artist\" class=\"flex-center flex-column flex pd-extra\">\n      <h2 class=\"h2 mn-b-medium\">Artist Not Found</h2>\n      <p class=\"p-medium t-transp mn-b-medium\">The artist you are looking for doesn't exist or may have been removed.</p>\n      <Button\n        :submit=\"() => router.push({ name: 'music-home' })\"\n        class=\"bg-main \"\n        :showSucces=\"false\"\n        :showLoader=\"false\"\n      >\n        Back to Music\n      </Button>\n    </div>\n    \n    <!-- Artist content -->\n    <div v-if=\"artist\">\n      <!-- Cover image -->\n      <div \n        class=\"w-100 t-white h-50vh pos-relative\"\n        :style=\"artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''\"\n      >\n        <div class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small\" :class=\"artist.coverUrl ? 'bg-black-transp-50' : 'bg-dark'\"></div>\n        \n        <!-- Artist actions for edit/manage -->\n        <div v-if=\"isOwner\" class=\"pos-absolute pos-t-medium pos-r-medium z-index-1\">\n          <Button\n            @click=\"router.push({ name: 'artist-edit', params: { url: artist.url } })\"\n            class=\"bg-main  mn-r-small\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Edit Artist\n          </Button>\n          \n          <Button\n            @click=\"router.push({ name: 'artist-manage-content', params: { artistId: artist._id } })\"\n            class=\"bg-white t-black\"\n            :showSucces=\"false\"\n            :showLoader=\"false\"\n          >\n            Manage Content\n          </Button>\n        </div>\n        \n        <!-- Artist profile info -->\n        <div class=\"flex-v-center t-white  pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center\">\n          <div class=\"w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium\">\n            <img\n              v-if=\"artist.photoUrl\"\n              :src=\"FILE_SERVER_URL + (artist.photoUrl  || '/logo/logo-placeholder.jpg')\"\n              alt=\"Artist photo\"\n              class=\"w-100 h-100 object-fit-cover\"\n            />\n            <div v-else class=\"w-100 h-100 bg-black flex-center flex\">\n              <span class=\"h1 t-white\">{{ artist?.name?.[0] || 'A' }}</span>\n            </div>\n          </div>\n          \n          <div class=\" mobile:t-center\">\n            <div class=\"flex-v-center flex-nowrap flex mn-b-small mobile:flex-center\">\n              <h1 class=\"h1 mn-r-small\">{{ artist.name }}</h1>\n              <span v-if=\"artist.isVerified\" class=\"bg-main-nano pd-micro radius-small\">\n                ✓ Verified\n              </span>\n            </div>\n            \n            <p v-if=\"artist.location\" class=\"p-medium mn-b-small\">{{ artist.location }}</p>\n            \n            <!-- Social media links -->\n            <div class=\"flex flex-nowrap gap-small mobile:flex-center\">\n              <a \n                v-if=\"artist.socials.telegram\" \n                :href=\"`https://t.me/${artist.socials.telegram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>T</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.twitter\" \n                :href=\"`https://twitter.com/${artist.socials.twitter}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>𝕏</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.instagram\" \n                :href=\"`https://instagram.com/${artist.socials.instagram}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>I</span>\n              </a>\n              \n              <a \n                v-if=\"artist.socials.facebook\" \n                :href=\"`https://facebook.com/${artist.socials.facebook}`\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>F</span>\n              </a>\n              \n              <a \n                v-if=\"artist.website\" \n                :href=\"artist.website\" \n                target=\"_blank\"\n                class=\"bg-white t-black flex-center flex w-2r h-2r radius-extra\"\n              >\n                <span>W</span>\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Main content -->\n      <div class=\"pd-medium\">\n        <div class=\"cols-2-1_2 gap-medium mobile:cols-1\">\n          <!-- Left column - Bio and details -->\n          <div>\n            <div class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-small\">Biography</h2>\n              <p v-if=\"artist.bio\" class=\"p-medium\">{{ artist.bio }}</p>\n              <p v-else class=\"p-medium t-transp\">No biography available for this artist.</p>\n            </div>\n            \n            <!-- Genres -->\n            <div v-if=\"genres.length > 0\" class=\"bg-light pd-medium radius-medium\">\n              <h2 class=\"h3 mn-b-small\">Genres</h2>\n              <div class=\"flex flex-wrap gap-small\">\n                <span \n                  v-for=\"genre in genres\" \n                  :key=\"genre._id\"\n                  class=\"bg-white pd-thin radius-medium\"\n                >\n                  {{ genre.name }}\n                </span>\n              </div>\n            </div>\n          </div>\n          \n          <!-- Right column - Discography -->\n          <div>\n            <!-- Albums section -->\n            <div v-if=\"discography.albums.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Albums</h2>\n              \n              <div class=\"cols-2 gap-small mobile:cols-1\">\n                <div\n                  v-for=\"album in discography.albums\"\n                  :key=\"album._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"router.push({ name: 'album', params: { url: album.url } })\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"album.coverUrl\"\n                      :src=\"FILE_SERVER_URL + album.coverUrl\"\n                      alt=\"Album cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>A</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ album.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(album.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.albums.length > 4\"\n                @click=\"router.push({ name: 'artist-albums', params: { artistId: artist._id } })\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Albums\n              </Button>\n            </div>\n            \n            <!-- Singles section -->\n            <div v-if=\"discography.singles.length > 0\" class=\"bg-light pd-medium mn-b-medium radius-medium\">\n              <h2 class=\"h3 mn-b-medium\">Singles & EPs</h2>\n              \n              <div class=\"cols-1 gap-small\">\n                <div\n                  v-for=\"single in discography.singles\"\n                  :key=\"single._id\"\n                  class=\"bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white\"\n                  @click=\"router.push({ name: 'track', params: { url: single.url } })\"\n                >\n                  <div class=\"w-3r h-3r radius-small o-hidden mn-r-small\">\n                    <img\n                      v-if=\"single.coverUrl\"\n                      :src=\"FILE_SERVER_URL + single.coverUrl\"\n                      alt=\"Single cover\"\n                      class=\"w-100 h-100 object-fit-cover\"\n                    />\n                    <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                      <span>S</span>\n                    </div>\n                  </div>\n                  \n                  <div class=\"w-100 o-hidden\">\n                    <p class=\"p-medium t-truncate\">{{ single.title }}</p>\n                    <p class=\"p-small t-transp\">{{ formatDate(single.releaseDate) }}</p>\n                  </div>\n                </div>\n              </div>\n              \n              <Button\n                v-if=\"discography.singles.length > 5\"\n                @click=\"router.push({ name: 'artist-singles', params: { artistId: artist._id } })\"\n                class=\"mn-t-small w-100 bg-white t-black\"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                View All Singles & EPs\n              </Button>\n            </div>\n            \n            <!-- Popular Tracks Section -->\n            <div v-if=\"artistTracks.length > 0\" class=\"bg-light pd-medium radius-medium mn-b-medium\">\n              <h2 class=\"h3 mn-b-medium\">Popular Tracks</h2>\n              \n              <div class=\"bg-white radius-medium o-hidden\">\n                <TrackListCard\n                  v-for=\"(track, index) in artistTracks\"\n                  :key=\"track._id\"\n                  :track=\"track\"\n                  :index=\"index\"\n                  :showAlbum=\"true\"\n                  :showCover=\"true\"\n                />\n              </div>\n            </div>\n            \n            <!-- No discography yet -->\n            <div \n              v-if=\"discography.albums.length === 0 && discography.singles.length === 0\" \n              class=\"bg-light pd-medium radius-medium t-center\"\n            >\n              <p class=\"p-medium mn-b-small\">No releases yet</p>\n              <p class=\"p-small t-transp\">This artist hasn't released any albums or singles yet.</p>\n              \n              <Button\n                v-if=\"isOwner\"\n                @click=\"router.push({ name: 'release-create', query: { artistId: artist._id } })\"\n                class=\"mn-t-medium bg-main \"\n                :showSucces=\"false\"\n                :showLoader=\"false\"\n              >\n                Add Release\n              </Button>\n            </div>\n          </div>\n        </div>\n        \n        <!-- Related Artists -->\n        <div v-if=\"relatedArtists.length > 0\" class=\"mn-t-medium\">\n          <h2 class=\"h3 mn-b-medium\">Fans Also Like</h2>\n          \n          <div class=\"cols-5 gap-medium mobile:cols-2\">\n            <div\n              v-for=\"relatedArtist in relatedArtists\"\n              :key=\"relatedArtist._id\"\n              class=\"t-center cursor-pointer\"\n              @click=\"router.push({ name: 'artist', params: { url: relatedArtist.url } })\"\n            >\n              <div class=\"w-100 aspect-1x1 radius-medium o-hidden mn-b-small\">\n                <img\n                  v-if=\"relatedArtist.photoUrl\"\n                  :src=\"FILE_SERVER_URL + relatedArtist.photoUrl\"\n                  alt=\"Artist photo\"\n                  class=\"w-100 h-100 object-fit-cover\"\n                />\n                <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n                  <span>{{ relatedArtist?.name?.[0] || 'A' }}</span>\n                </div>\n              </div>\n              \n              <p class=\"p-medium t-truncate\">{{ relatedArtist.name }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\n// import * as genreStore from '../../store/genres'; // Assuming you have a genre store\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\n// Import mixins\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\nconst { formatDate } = useGlobalMixins();\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst genres = ref([]);\nconst hasLoaded = ref(false);\n\n// Computed\nconst artist = computed(() => {\n  return artistsStore.state.currentArtist;\n});\n\nconst discography = computed(() => {\n  return artistsStore.state.discography;\n});\n\nconst relatedArtists = computed(() => {\n  return artistsStore.state.relatedArtists;\n});\n\nconst artistTracks = computed(() => {\n  return artistsStore.state.discography.tracks || [];\n});\n\nconst isOwner = computed(() => {\n  if (!artist.value || !auth.state.user._id) return false;\n  \n  // Check if current user is the creator of the artist\n  return artist.value.creator?.target?._id === auth.state.user._id;\n});\n\n// Clear current artist state\nartistsStore.state.currentArtist = null;\n// Clear discography state\nartistsStore.state.discography = {\n  albums: [],\n  singles: [],\n  tracks: []\n};\nartistsStore.state.relatedArtists = [];\n\n// Methods\nconst fetchArtist = async () => {\n  try {\n    // Get URL from route params\n    const url = route.params.url;\n    if (!url) {\n      throw new Error('Artist URL is required');\n    }\n    \n    await artistsStore.actions.fetchArtistByUrl(url);\n  } catch (error) {\n    console.error('Error fetching artist:', error);\n    globals.actions.setError({\n      message: 'Failed to load artist'\n    });\n  }\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchArtist();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>"],"names":["artistsStore.state","auth.state","artistsStore.actions","globals.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8TA,UAAM,EAAE,WAAU,IAAK,gBAAe;AAGtC,UAAM,SAAS,UAAS;AACxB,UAAM,QAAQ,SAAQ;AAGtB,UAAM,QAAQ;AAGd,UAAM,SAAS,IAAI,EAAE;AACrB,UAAM,YAAY,IAAI,KAAK;AAG3B,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAOA,MAAmB;AAAA,IAC5B,CAAC;AAED,UAAM,eAAe,SAAS,MAAM;AAClC,aAAOA,MAAmB,YAAY,UAAU,CAAA;AAAA,IAClD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,UAAI,CAAC,OAAO,SAAS,CAACC,QAAW,KAAK,IAAK,QAAO;AAGlD,aAAO,OAAO,MAAM,SAAS,QAAQ,QAAQA,QAAW,KAAK;AAAA,IAC/D,CAAC;AAGDD,UAAmB,gBAAgB;AAEnCA,UAAmB,cAAc;AAAA,MAC/B,QAAQ,CAAA;AAAA,MACR,SAAS,CAAA;AAAA,MACT,QAAQ,CAAA;AAAA,IACV;AACAA,UAAmB,iBAAiB,CAAA;AAGpC,UAAM,cAAc,YAAY;AAC9B,UAAI;AAEF,cAAM,MAAM,MAAM,OAAO;AACzB,YAAI,CAAC,KAAK;AACR,gBAAM,IAAI,MAAM,wBAAwB;AAAA,QAC1C;AAEA,cAAME,QAAqB,iBAAiB,GAAG;AAAA,MACjD,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7CC,kBAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAGA,cAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,YAAW;AAEjB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -58,7 +58,7 @@ const _sfc_main = {
                 key: tab.id,
                 onClick: ($event) => activeTab.value = tab.id,
                 class: vue.normalizeClass([[
-                  activeTab.value === tab.id ? "bg-white t-black" : "bg-dark-transp-50  hover-bg-dark"
+                  activeTab.value === tab.id ? "bg-white t-black" : "bg-white-transp-50  hover-bg-white"
                 ], "radius-extra pd-small"]),
                 showLoader: false,
                 showSucces: false
@@ -96,7 +96,7 @@ const _sfc_main = {
               empty: {
                 title: "No playlists yet",
                 description: "Create your first playlist to see it here",
-                class: "pd-big bg-dark-transp-10 radius-medium"
+                class: "pd-big bg-white-transp-10 radius-medium"
               }
             },
             class: "gap-medium"
@@ -138,7 +138,7 @@ const _sfc_main = {
               empty: {
                 title: "No albums yet",
                 description: "Upload your first album to see it here",
-                class: "pd-big bg-dark-transp-10 radius-medium"
+                class: "pd-big bg-white-transp-10 radius-medium"
               }
             },
             class: "gap-medium"
@@ -180,7 +180,7 @@ const _sfc_main = {
               empty: {
                 title: "No artists yet",
                 description: "Create your first artist profile to see it here",
-                class: "pd-big bg-dark-transp-10 radius-medium"
+                class: "pd-big bg-white-transp-10 radius-medium"
               }
             },
             class: "gap-medium"
@@ -222,7 +222,7 @@ const _sfc_main = {
               empty: {
                 title: "No tracks yet",
                 description: "Upload your first track to see it here",
-                class: "pd-big bg-dark-transp-10 radius-medium"
+                class: "pd-big bg-white-transp-10 radius-medium"
               }
             },
             class: "gap-medium"

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

@@ -1 +1 @@
-{"version":3,"file":"MusicLibrary.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/MusicLibrary.vue"],"sourcesContent":["<!-- components/pages/MusicLibrary.vue -->\n<template>\n  <div class=\"music-library-page\">\n    <h1 class=\" mn-b-medium\">Your Library</h1>\n    \n    <!-- Filter Tabs -->\n    <div class=\"library-tabs mn-b-medium\">\n      <div class=\"flex gap-small\">\n        <Button \n          v-for=\"tab in tabs\"\n          :key=\"tab.id\"\n          @click=\"activeTab = tab.id\"\n          :class=\"[\n            activeTab === tab.id ? '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          {{ tab.label }}\n        </Button>\n      </div>\n    </div>\n    \n    <!-- Playlists Tab -->\n    <div v-if=\"activeTab === 'playlists'\" class=\"playlists-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Playlists</h2>\n        <Button \n          @click=\"$router.push({ name: 'playlist-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Playlist\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => playlistsActions.fetchPlaylists(options),\n          state: playlistsState\n        }\"\n        :options=\"{ creator: authState.user._id  }\"\n        :states=\"{\n          empty: {\n            title: 'No playlists yet',\n            description: 'Create your first playlist to see it here',\n            class: 'pd-big bg-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <PlaylistCard\n            v-for=\"playlist in items\"\n            :key=\"playlist._id\"\n            :playlist=\"playlist\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Albums Tab -->\n    <div v-if=\"activeTab === 'albums'\" class=\"albums-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Albums</h2>\n        <Button \n          @click=\"$router.push({ name: 'album-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Album\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => albumsActions.fetchAlbums({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: albumsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No albums yet',\n            description: 'Upload your first album to see it here',\n            class: 'pd-big bg-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <AlbumCard\n            v-for=\"album in items\"\n            :key=\"album._id\"\n            :album=\"album\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Artists Tab -->\n    <div v-if=\"activeTab === 'artists'\" class=\"artists-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Artists</h2>\n        <Button \n          @click=\"$router.push({ name: 'artist-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Artist\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => artistsActions.fetchArtists({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: artistsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No artists yet',\n            description: 'Create your first artist profile to see it here',\n            class: 'pd-big bg-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <ArtistCard\n            v-for=\"artist in items\"\n            :key=\"artist._id\"\n            :artist=\"artist\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Tracks Tab -->\n    <div v-if=\"activeTab === 'tracks'\" class=\"tracks-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Tracks</h2>\n        <Button \n          @click=\"$router.push({ name: 'track-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Upload Track\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => tracksActions.fetchTracks({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: tracksState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No tracks yet',\n            description: 'Upload your first track to see it here',\n            class: 'pd-big bg-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </div>\n    \n      </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.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';\n\n// Import store modules\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { state as artistsState, actions as artistsActions } from '../../store/artists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\n\nconst router = useRouter();\n\n// State\nconst activeTab = ref('playlists');\n\n// Tabs configuration\nconst tabs = [\n  { id: 'playlists', label: 'Playlists' },\n  { id: 'albums', label: 'Albums' },\n  { id: 'artists', label: 'Artists' },\n  { id: 'tracks', label: 'Tracks' }\n];\n\n</script>"],"names":["useRouter","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgNeA,cAAAA,UAAS;AAGxB,UAAM,YAAYC,IAAAA,IAAI,WAAW;AAGjC,UAAM,OAAO;AAAA,MACX,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MusicLibrary.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/MusicLibrary.vue"],"sourcesContent":["<!-- components/pages/MusicLibrary.vue -->\n<template>\n  <div class=\"music-library-page\">\n    <h1 class=\" mn-b-medium\">Your Library</h1>\n    \n    <!-- Filter Tabs -->\n    <div class=\"library-tabs mn-b-medium\">\n      <div class=\"flex gap-small\">\n        <Button \n          v-for=\"tab in tabs\"\n          :key=\"tab.id\"\n          @click=\"activeTab = tab.id\"\n          :class=\"[\n            activeTab === tab.id ? 'bg-white t-black' : 'bg-white-transp-50  hover-bg-white',\n          ]\"\n          class=\"radius-extra pd-small\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          {{ tab.label }}\n        </Button>\n      </div>\n    </div>\n    \n    <!-- Playlists Tab -->\n    <div v-if=\"activeTab === 'playlists'\" class=\"playlists-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Playlists</h2>\n        <Button \n          @click=\"$router.push({ name: 'playlist-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Playlist\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => playlistsActions.fetchPlaylists(options),\n          state: playlistsState\n        }\"\n        :options=\"{ creator: authState.user._id  }\"\n        :states=\"{\n          empty: {\n            title: 'No playlists yet',\n            description: 'Create your first playlist to see it here',\n            class: 'pd-big bg-white-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <PlaylistCard\n            v-for=\"playlist in items\"\n            :key=\"playlist._id\"\n            :playlist=\"playlist\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Albums Tab -->\n    <div v-if=\"activeTab === 'albums'\" class=\"albums-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Albums</h2>\n        <Button \n          @click=\"$router.push({ name: 'album-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Album\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => albumsActions.fetchAlbums({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: albumsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No albums yet',\n            description: 'Upload your first album to see it here',\n            class: 'pd-big bg-white-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <AlbumCard\n            v-for=\"album in items\"\n            :key=\"album._id\"\n            :album=\"album\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Artists Tab -->\n    <div v-if=\"activeTab === 'artists'\" class=\"artists-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Artists</h2>\n        <Button \n          @click=\"$router.push({ name: 'artist-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Artist\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => artistsActions.fetchArtists({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: artistsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No artists yet',\n            description: 'Create your first artist profile to see it here',\n            class: 'pd-big bg-white-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <ArtistCard\n            v-for=\"artist in items\"\n            :key=\"artist._id\"\n            :artist=\"artist\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Tracks Tab -->\n    <div v-if=\"activeTab === 'tracks'\" class=\"tracks-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Tracks</h2>\n        <Button \n          @click=\"$router.push({ name: 'track-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Upload Track\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => tracksActions.fetchTracks({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: tracksState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No tracks yet',\n            description: 'Upload your first track to see it here',\n            class: 'pd-big bg-white-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </div>\n    \n      </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.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';\n\n// Import store modules\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { state as artistsState, actions as artistsActions } from '../../store/artists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\n\nconst router = useRouter();\n\n// State\nconst activeTab = ref('playlists');\n\n// Tabs configuration\nconst tabs = [\n  { id: 'playlists', label: 'Playlists' },\n  { id: 'albums', label: 'Albums' },\n  { id: 'artists', label: 'Artists' },\n  { id: 'tracks', label: 'Tracks' }\n];\n\n</script>"],"names":["useRouter","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgNeA,cAAAA,UAAS;AAGxB,UAAM,YAAYC,IAAAA,IAAI,WAAW;AAGjC,UAAM,OAAO;AAAA,MACX,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -56,7 +56,7 @@ const _sfc_main = {
                 key: tab.id,
                 onClick: ($event) => activeTab.value = tab.id,
                 class: normalizeClass([[
-                  activeTab.value === tab.id ? "bg-white t-black" : "bg-dark-transp-50  hover-bg-dark"
+                  activeTab.value === tab.id ? "bg-white t-black" : "bg-white-transp-50  hover-bg-white"
                 ], "radius-extra pd-small"]),
                 showLoader: false,
                 showSucces: false
@@ -94,7 +94,7 @@ const _sfc_main = {
               empty: {
                 title: "No playlists yet",
                 description: "Create your first playlist to see it here",
-                class: "pd-big bg-dark-transp-10 radius-medium"
+                class: "pd-big bg-white-transp-10 radius-medium"
               }
             },
             class: "gap-medium"
@@ -136,7 +136,7 @@ const _sfc_main = {
               empty: {
                 title: "No albums yet",
                 description: "Upload your first album to see it here",
-                class: "pd-big bg-dark-transp-10 radius-medium"
+                class: "pd-big bg-white-transp-10 radius-medium"
               }
             },
             class: "gap-medium"
@@ -178,7 +178,7 @@ const _sfc_main = {
               empty: {
                 title: "No artists yet",
                 description: "Create your first artist profile to see it here",
-                class: "pd-big bg-dark-transp-10 radius-medium"
+                class: "pd-big bg-white-transp-10 radius-medium"
               }
             },
             class: "gap-medium"
@@ -220,7 +220,7 @@ const _sfc_main = {
               empty: {
                 title: "No tracks yet",
                 description: "Upload your first track to see it here",
-                class: "pd-big bg-dark-transp-10 radius-medium"
+                class: "pd-big bg-white-transp-10 radius-medium"
               }
             },
             class: "gap-medium"

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

@@ -1 +1 @@
-{"version":3,"file":"MusicLibrary.vue.js","sources":["../../../../../../../src/modules/music/components/pages/MusicLibrary.vue"],"sourcesContent":["<!-- components/pages/MusicLibrary.vue -->\n<template>\n  <div class=\"music-library-page\">\n    <h1 class=\" mn-b-medium\">Your Library</h1>\n    \n    <!-- Filter Tabs -->\n    <div class=\"library-tabs mn-b-medium\">\n      <div class=\"flex gap-small\">\n        <Button \n          v-for=\"tab in tabs\"\n          :key=\"tab.id\"\n          @click=\"activeTab = tab.id\"\n          :class=\"[\n            activeTab === tab.id ? '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          {{ tab.label }}\n        </Button>\n      </div>\n    </div>\n    \n    <!-- Playlists Tab -->\n    <div v-if=\"activeTab === 'playlists'\" class=\"playlists-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Playlists</h2>\n        <Button \n          @click=\"$router.push({ name: 'playlist-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Playlist\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => playlistsActions.fetchPlaylists(options),\n          state: playlistsState\n        }\"\n        :options=\"{ creator: authState.user._id  }\"\n        :states=\"{\n          empty: {\n            title: 'No playlists yet',\n            description: 'Create your first playlist to see it here',\n            class: 'pd-big bg-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <PlaylistCard\n            v-for=\"playlist in items\"\n            :key=\"playlist._id\"\n            :playlist=\"playlist\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Albums Tab -->\n    <div v-if=\"activeTab === 'albums'\" class=\"albums-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Albums</h2>\n        <Button \n          @click=\"$router.push({ name: 'album-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Album\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => albumsActions.fetchAlbums({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: albumsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No albums yet',\n            description: 'Upload your first album to see it here',\n            class: 'pd-big bg-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <AlbumCard\n            v-for=\"album in items\"\n            :key=\"album._id\"\n            :album=\"album\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Artists Tab -->\n    <div v-if=\"activeTab === 'artists'\" class=\"artists-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Artists</h2>\n        <Button \n          @click=\"$router.push({ name: 'artist-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Artist\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => artistsActions.fetchArtists({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: artistsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No artists yet',\n            description: 'Create your first artist profile to see it here',\n            class: 'pd-big bg-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <ArtistCard\n            v-for=\"artist in items\"\n            :key=\"artist._id\"\n            :artist=\"artist\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Tracks Tab -->\n    <div v-if=\"activeTab === 'tracks'\" class=\"tracks-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Tracks</h2>\n        <Button \n          @click=\"$router.push({ name: 'track-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Upload Track\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => tracksActions.fetchTracks({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: tracksState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No tracks yet',\n            description: 'Upload your first track to see it here',\n            class: 'pd-big bg-dark-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </div>\n    \n      </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.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';\n\n// Import store modules\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { state as artistsState, actions as artistsActions } from '../../store/artists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\n\nconst router = useRouter();\n\n// State\nconst activeTab = ref('playlists');\n\n// Tabs configuration\nconst tabs = [\n  { id: 'playlists', label: 'Playlists' },\n  { id: 'albums', label: 'Albums' },\n  { id: 'artists', label: 'Artists' },\n  { id: 'tracks', label: 'Tracks' }\n];\n\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgNe,cAAS;AAGxB,UAAM,YAAY,IAAI,WAAW;AAGjC,UAAM,OAAO;AAAA,MACX,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MusicLibrary.vue.js","sources":["../../../../../../../src/modules/music/components/pages/MusicLibrary.vue"],"sourcesContent":["<!-- components/pages/MusicLibrary.vue -->\n<template>\n  <div class=\"music-library-page\">\n    <h1 class=\" mn-b-medium\">Your Library</h1>\n    \n    <!-- Filter Tabs -->\n    <div class=\"library-tabs mn-b-medium\">\n      <div class=\"flex gap-small\">\n        <Button \n          v-for=\"tab in tabs\"\n          :key=\"tab.id\"\n          @click=\"activeTab = tab.id\"\n          :class=\"[\n            activeTab === tab.id ? 'bg-white t-black' : 'bg-white-transp-50  hover-bg-white',\n          ]\"\n          class=\"radius-extra pd-small\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          {{ tab.label }}\n        </Button>\n      </div>\n    </div>\n    \n    <!-- Playlists Tab -->\n    <div v-if=\"activeTab === 'playlists'\" class=\"playlists-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Playlists</h2>\n        <Button \n          @click=\"$router.push({ name: 'playlist-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Playlist\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => playlistsActions.fetchPlaylists(options),\n          state: playlistsState\n        }\"\n        :options=\"{ creator: authState.user._id  }\"\n        :states=\"{\n          empty: {\n            title: 'No playlists yet',\n            description: 'Create your first playlist to see it here',\n            class: 'pd-big bg-white-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <PlaylistCard\n            v-for=\"playlist in items\"\n            :key=\"playlist._id\"\n            :playlist=\"playlist\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Albums Tab -->\n    <div v-if=\"activeTab === 'albums'\" class=\"albums-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Albums</h2>\n        <Button \n          @click=\"$router.push({ name: 'album-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Album\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => albumsActions.fetchAlbums({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: albumsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No albums yet',\n            description: 'Upload your first album to see it here',\n            class: 'pd-big bg-white-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <AlbumCard\n            v-for=\"album in items\"\n            :key=\"album._id\"\n            :album=\"album\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Artists Tab -->\n    <div v-if=\"activeTab === 'artists'\" class=\"artists-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Artists</h2>\n        <Button \n          @click=\"$router.push({ name: 'artist-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Create Artist\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => artistsActions.fetchArtists({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: artistsState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No artists yet',\n            description: 'Create your first artist profile to see it here',\n            class: 'pd-big bg-white-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <ArtistCard\n            v-for=\"artist in items\"\n            :key=\"artist._id\"\n            :artist=\"artist\"\n            class=\"w-100\"\n          />\n        </template>\n      </Feed>\n    </div>\n    \n    <!-- Tracks Tab -->\n    <div v-if=\"activeTab === 'tracks'\" class=\"tracks-tab\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Your Tracks</h2>\n        <Button \n          @click=\"$router.push({ name: 'track-create' })\"\n          class=\"bg-main  radius-small pd-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Upload Track\n        </Button>\n      </div>\n      \n      <Feed\n        :store=\"{\n          read: (options) => tracksActions.fetchTracks({ ...options, owner: { type: 'user', target: authState.user._id } }),\n          state: tracksState\n        }\"\n        :options=\"{ owner: { type: 'user', target: authState.user._id } }\"\n        :states=\"{\n          empty: {\n            title: 'No tracks yet',\n            description: 'Upload your first track to see it here',\n            class: 'pd-big bg-white-transp-10 radius-medium'\n          }\n        }\"\n        class=\"gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </div>\n    \n      </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { useRouter } from 'vue-router';\nimport Feed from '@martyrs/src/components/Feed/Feed.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';\n\n// Import store modules\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { state as artistsState, actions as artistsActions } from '../../store/artists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\n\nconst router = useRouter();\n\n// State\nconst activeTab = ref('playlists');\n\n// Tabs configuration\nconst tabs = [\n  { id: 'playlists', label: 'Playlists' },\n  { id: 'albums', label: 'Albums' },\n  { id: 'artists', label: 'Artists' },\n  { id: 'tracks', label: 'Tracks' }\n];\n\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgNe,cAAS;AAGxB,UAAM,YAAY,IAAI,WAAW;AAGjC,UAAM,OAAO;AAAA,MACX,EAAE,IAAI,aAAa,OAAO,YAAW;AAAA,MACrC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,MAC/B,EAAE,IAAI,WAAW,OAAO,UAAS;AAAA,MACjC,EAAE,IAAI,UAAU,OAAO,SAAQ;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}