@ozdao/martyrs 0.2.571 → 0.2.574

package/dist/martyrs/src/modules/music/components/forms/TrackForm.vue.js

@@ -18,34 +18,34 @@ import { state } from "../../../auth/views/store/auth.js";
 const _hoisted_1 = { class: "pd-medium" };
 const _hoisted_2 = { class: "h2 mn-b-medium" };
 const _hoisted_3 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_4 = { class: "cols-2-fit-content mobile:cols-1 gap-regular" };
+const _hoisted_4 = { class: "cols-[fit-content(100%)_1fr] mobile:cols-1 gap-regular" };
 const _hoisted_5 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_6 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_7 = { class: "t-medium" };
+const _hoisted_7 = { class: "fw-medium" };
 const _hoisted_8 = ["onClick"];
 const _hoisted_9 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_10 = { class: "w-100" };
-const _hoisted_11 = { class: "t-medium" };
+const _hoisted_11 = { class: "fw-medium" };
 const _hoisted_12 = {
   key: 0,
   class: "t-small t-transp"
 };
 const _hoisted_13 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_14 = { class: "t-medium" };
+const _hoisted_14 = { class: "fw-medium" };
 const _hoisted_15 = ["onClick"];
 const _hoisted_16 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_17 = { class: "w-100" };
-const _hoisted_18 = { class: "t-medium" };
+const _hoisted_18 = { class: "fw-medium" };
 const _hoisted_19 = {
   key: 0,
   class: "t-small t-transp"
 };
 const _hoisted_20 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_21 = { class: "t-medium" };
+const _hoisted_21 = { class: "fw-medium" };
 const _hoisted_22 = ["onClick"];
 const _hoisted_23 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_24 = { class: "w-100" };
-const _hoisted_25 = { class: "t-medium" };
+const _hoisted_25 = { class: "fw-medium" };
 const _hoisted_26 = {
   key: 0,
   class: "t-small t-transp"
@@ -338,7 +338,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -346,7 +346,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_7, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_8)
@@ -403,7 +403,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -411,7 +411,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_14, toDisplayString(item?.title || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_15)
@@ -468,7 +468,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -476,7 +476,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_21, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_22)

package/dist/martyrs/src/modules/music/components/forms/TrackForm.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/TrackForm.vue"],"sourcesContent":["<!-- components/forms/TrackForm.vue -->\n<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Track' : 'Upload Track' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\n       <!-- Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Media</h3>\n        \n        <div class=\"cols-2-fit-content mobile:cols-1 gap-regular\">\n          <!-- Track Cover -->\n          <div>\n            <p class=\"p-medium mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"form.coverUrl\"\n              uploadPath=\"tracks/covers\"\n              class=\"aspect-1x1 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Audio File -->\n          <div>\n            <p class=\"p-medium mn-b-small\">Audio File</p>\n            <Upload\n              v-model:field=\"form.fileUrl\"\n              @file-change=\"(url) => form.fileUrl = url\"\n              type=\"file\"\n              uploadPath=\"tracks/audio\"\n              class=\"w-100 h-15r bg-white radius-small pd-small\"\n              :validation=\"validationErrors.fileUrl\"\n            />\n          </div>\n        </div>\n      </div>\n      \n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Track Title -->\n        <Field\n          v-model:field=\"form.title\"\n          label=\"Track Title\"\n          placeholder=\"Enter track title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"form.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the track title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n\n        <!-- Artist Selection -->\n       \n\n     \n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"form.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.releaseDate\"\n        />\n      \n        <!-- Duration -->\n        <Field\n          v-model:field=\"form.duration\"\n          label=\"Duration (seconds)\"\n          type=\"number\"\n          placeholder=\"Track duration in seconds\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>  \n\n         <Block title=\"Artist\">\n          <BlockMultiselect\n            v-model=\"form.artists\"\n            placeholder=\"Search artists...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n            :store=\"{\n              read: (options) => artistsActions.fetchArtists(options),\n              state: artistsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No artists found',\n                description: 'Try different search terms or create a new artist',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.name\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected artist slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.name || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Artist item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.name }}</p>\n                  <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n\n         <!-- Album Selection -->\n        <Block title=\"Album (Optional)\">\n          <BlockMultiselect\n            v-model=\"form.albums\"\n            placeholder=\"Search albums...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, title: item.title })\"\n            :store=\"{\n              read: (options) => albumsActions.fetchAlbums(options),\n              state: albumsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No albums found',\n                description: 'Try different search terms or create a new album',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.title\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected album slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.title || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Album item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.title }}</p>\n                  <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"form.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresActions.fetchGenres(options),\n            state: genresState\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Selected genres slot -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Genre item slot -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Content Settings Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Content Settings</h3>\n        \n        <Checkbox\n          v-model:checkbox=\"form.isExplicit\"\n          label=\"Explicit Content\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:checkbox=\"form.isPublic\"\n          label=\"Public Track\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n     \n      \n      <!-- Additional Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Additional Information</h3>\n        \n        <!-- Lyrics -->\n        <Field\n          v-model:field=\"form.lyrics\"\n          label=\"Lyrics (Optional)\"\n          type=\"textarea\"\n          placeholder=\"Enter track lyrics\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"form.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Uploaded!'\n          }\"\n        >\n          {{ editMode ? 'Update Track' : 'Upload Track' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Upload from '@martyrs/src/components/Upload/Upload.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as tracksStore from '../../store/tracks';\nimport * as artistsStore from '../../store/artists';\nimport * as albumsStore from '../../store/albums';\nimport * as genresStore from '../../store/genres';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Store states and actions\nconst { state: artistsState, actions: artistsActions } = artistsStore;\nconst { state: albumsState, actions: albumsActions } = albumsStore;\nconst { state: genresState, actions: genresActions } = genresStore;\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\nconst emit = defineEmits(['uploaded']);\n\n// State\nconst form = reactive({\n  title: '',\n  artists: [],\n  albums: [],\n  genres: [],\n  duration: 0,\n  fileUrl: '',\n  coverUrl: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  isExplicit: false,\n  isPublic: true,\n  lyrics: '',\n  url: '',\n  status: 'draft'\n});\n\nconst validationErrors = reactive({\n  title: false,\n  fileUrl: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in track title to auto-generate URL\nwatch(() => form.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    form.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => form.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(form.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\nconst fetchTrack = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedTrack = await tracksStore.actions.fetchTrackByUrl(props.url);\n    \n    if (!fetchedTrack) {\n      store.core.actions.setError({\n        message: 'Track not found'\n      });\n      return;\n    }\n    \n    // Update local track data\n    Object.assign(form, {\n      title: fetchedTrack.title || '',\n      artists: fetchedTrack.artist ? [fetchedTrack.artist] : [],\n      albums: fetchedTrack.album ? [fetchedTrack.album] : [],\n      genres: fetchedTrack.genres || [],\n      duration: fetchedTrack.duration || 0,\n      fileUrl: fetchedTrack.fileUrl || '',\n      coverUrl: fetchedTrack.coverUrl || '',\n      releaseDate: fetchedTrack.releaseDate ? new Date(fetchedTrack.releaseDate).toISOString().split('T')[0] : '',\n      isExplicit: fetchedTrack.isExplicit || false,\n      isPublic: fetchedTrack.isPublic !== false,\n      lyrics: fetchedTrack.lyrics || '',\n      url: fetchedTrack.url || '',\n      status: fetchedTrack.status || 'draft',\n      _id: fetchedTrack._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching track:', error);\n    store.core.actions.setError({\n      message: 'Failed to load track details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!form.title.trim()) {\n    validationErrors.title = {\n      message: 'Track title is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.title = false;\n  }\n  \n  // Validate file URL\n  if (!form.fileUrl) {\n    validationErrors.fileUrl = {\n      message: 'Audio file is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.fileUrl = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    console.log('=== FORM DATA DEBUG ===');\n    console.log('form.artists:', form.artists);\n    console.log('form.albums:', form.albums);\n    console.log('form.albums.length:', form.albums.length);\n    console.log('form.albums[0]:', form.albums[0]);\n    console.log('form.albums[0]?._id:', form.albums[0]?._id);\n    \n    // Prepare data for submission\n    const formData = {\n      ...form,\n      artist: form.artists.length > 0 ? (form.artists[0]._id || form.artists[0]) : null,\n      album: form.albums && form.albums._id ? form.albums._id : null,\n      genre: form.genres.map(genre => genre._id || genre)\n    };\n    \n    // Remove the original arrays/objects to avoid conflicts\n    delete formData.artists;\n    delete formData.albums;\n    delete formData.genres;\n    \n    console.log('formData after preparation:', formData);\n    console.log('formData.album:', formData.album);\n    console.log('typeof formData.album:', typeof formData.album);\n    \n    // Add ownership data if creating new track\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await tracksStore.actions.updateTrack(formData);\n    } else {\n      result = await tracksStore.actions.createTrack(formData);\n    }\n    \n    // Navigate to track detail page\n    setTimeout(() => {\n      router.push({\n        name: 'track',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving track:', error);\n    store.core.actions.setError({\n      message: 'Failed to save track'\n    });\n  }\n};\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  store.core.actions.setError({\n    message: 'Error uploading file'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchTrack();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>\n"],"names":["artistsStore","albumsStore","genresStore","tracksStore.actions","auth.state"],"mappings":"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"}
+{"version":3,"file":"TrackForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/TrackForm.vue"],"sourcesContent":["<!-- components/forms/TrackForm.vue -->\n<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Track' : 'Upload Track' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\n       <!-- Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Media</h3>\n        \n        <div class=\"cols-[fit-content(100%)_1fr] mobile:cols-1 gap-regular\">\n          <!-- Track Cover -->\n          <div>\n            <p class=\"p-medium mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"form.coverUrl\"\n              uploadPath=\"tracks/covers\"\n              class=\"aspect-1x1 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Audio File -->\n          <div>\n            <p class=\"p-medium mn-b-small\">Audio File</p>\n            <Upload\n              v-model:field=\"form.fileUrl\"\n              @file-change=\"(url) => form.fileUrl = url\"\n              type=\"file\"\n              uploadPath=\"tracks/audio\"\n              class=\"w-100 h-15r bg-white radius-small pd-small\"\n              :validation=\"validationErrors.fileUrl\"\n            />\n          </div>\n        </div>\n      </div>\n      \n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Track Title -->\n        <Field\n          v-model:field=\"form.title\"\n          label=\"Track Title\"\n          placeholder=\"Enter track title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"form.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the track title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n\n        <!-- Artist Selection -->\n       \n\n     \n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"form.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.releaseDate\"\n        />\n      \n        <!-- Duration -->\n        <Field\n          v-model:field=\"form.duration\"\n          label=\"Duration (seconds)\"\n          type=\"number\"\n          placeholder=\"Track duration in seconds\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>  \n\n         <Block title=\"Artist\">\n          <BlockMultiselect\n            v-model=\"form.artists\"\n            placeholder=\"Search artists...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n            :store=\"{\n              read: (options) => artistsActions.fetchArtists(options),\n              state: artistsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No artists found',\n                description: 'Try different search terms or create a new artist',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.name\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover:bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected artist slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"fw-medium\">{{ item?.name || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Artist item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"fw-medium\">{{ item.name }}</p>\n                  <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n\n         <!-- Album Selection -->\n        <Block title=\"Album (Optional)\">\n          <BlockMultiselect\n            v-model=\"form.albums\"\n            placeholder=\"Search albums...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, title: item.title })\"\n            :store=\"{\n              read: (options) => albumsActions.fetchAlbums(options),\n              state: albumsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No albums found',\n                description: 'Try different search terms or create a new album',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.title\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover:bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected album slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"fw-medium\">{{ item?.title || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Album item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"fw-medium\">{{ item.title }}</p>\n                  <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"form.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresActions.fetchGenres(options),\n            state: genresState\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover:bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Selected genres slot -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"fw-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Genre item slot -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"fw-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Content Settings Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Content Settings</h3>\n        \n        <Checkbox\n          v-model:checkbox=\"form.isExplicit\"\n          label=\"Explicit Content\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:checkbox=\"form.isPublic\"\n          label=\"Public Track\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n     \n      \n      <!-- Additional Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Additional Information</h3>\n        \n        <!-- Lyrics -->\n        <Field\n          v-model:field=\"form.lyrics\"\n          label=\"Lyrics (Optional)\"\n          type=\"textarea\"\n          placeholder=\"Enter track lyrics\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"form.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Uploaded!'\n          }\"\n        >\n          {{ editMode ? 'Update Track' : 'Upload Track' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Upload from '@martyrs/src/components/Upload/Upload.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as tracksStore from '../../store/tracks';\nimport * as artistsStore from '../../store/artists';\nimport * as albumsStore from '../../store/albums';\nimport * as genresStore from '../../store/genres';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Store states and actions\nconst { state: artistsState, actions: artistsActions } = artistsStore;\nconst { state: albumsState, actions: albumsActions } = albumsStore;\nconst { state: genresState, actions: genresActions } = genresStore;\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\nconst emit = defineEmits(['uploaded']);\n\n// State\nconst form = reactive({\n  title: '',\n  artists: [],\n  albums: [],\n  genres: [],\n  duration: 0,\n  fileUrl: '',\n  coverUrl: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  isExplicit: false,\n  isPublic: true,\n  lyrics: '',\n  url: '',\n  status: 'draft'\n});\n\nconst validationErrors = reactive({\n  title: false,\n  fileUrl: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in track title to auto-generate URL\nwatch(() => form.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    form.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => form.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(form.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\nconst fetchTrack = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedTrack = await tracksStore.actions.fetchTrackByUrl(props.url);\n    \n    if (!fetchedTrack) {\n      store.core.actions.setError({\n        message: 'Track not found'\n      });\n      return;\n    }\n    \n    // Update local track data\n    Object.assign(form, {\n      title: fetchedTrack.title || '',\n      artists: fetchedTrack.artist ? [fetchedTrack.artist] : [],\n      albums: fetchedTrack.album ? [fetchedTrack.album] : [],\n      genres: fetchedTrack.genres || [],\n      duration: fetchedTrack.duration || 0,\n      fileUrl: fetchedTrack.fileUrl || '',\n      coverUrl: fetchedTrack.coverUrl || '',\n      releaseDate: fetchedTrack.releaseDate ? new Date(fetchedTrack.releaseDate).toISOString().split('T')[0] : '',\n      isExplicit: fetchedTrack.isExplicit || false,\n      isPublic: fetchedTrack.isPublic !== false,\n      lyrics: fetchedTrack.lyrics || '',\n      url: fetchedTrack.url || '',\n      status: fetchedTrack.status || 'draft',\n      _id: fetchedTrack._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching track:', error);\n    store.core.actions.setError({\n      message: 'Failed to load track details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!form.title.trim()) {\n    validationErrors.title = {\n      message: 'Track title is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.title = false;\n  }\n  \n  // Validate file URL\n  if (!form.fileUrl) {\n    validationErrors.fileUrl = {\n      message: 'Audio file is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.fileUrl = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    console.log('=== FORM DATA DEBUG ===');\n    console.log('form.artists:', form.artists);\n    console.log('form.albums:', form.albums);\n    console.log('form.albums.length:', form.albums.length);\n    console.log('form.albums[0]:', form.albums[0]);\n    console.log('form.albums[0]?._id:', form.albums[0]?._id);\n    \n    // Prepare data for submission\n    const formData = {\n      ...form,\n      artist: form.artists.length > 0 ? (form.artists[0]._id || form.artists[0]) : null,\n      album: form.albums && form.albums._id ? form.albums._id : null,\n      genre: form.genres.map(genre => genre._id || genre)\n    };\n    \n    // Remove the original arrays/objects to avoid conflicts\n    delete formData.artists;\n    delete formData.albums;\n    delete formData.genres;\n    \n    console.log('formData after preparation:', formData);\n    console.log('formData.album:', formData.album);\n    console.log('typeof formData.album:', typeof formData.album);\n    \n    // Add ownership data if creating new track\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await tracksStore.actions.updateTrack(formData);\n    } else {\n      result = await tracksStore.actions.createTrack(formData);\n    }\n    \n    // Navigate to track detail page\n    setTimeout(() => {\n      router.push({\n        name: 'track',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving track:', error);\n    store.core.actions.setError({\n      message: 'Failed to save track'\n    });\n  }\n};\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  store.core.actions.setError({\n    message: 'Error uploading file'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchTrack();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>\n"],"names":["artistsStore","albumsStore","genresStore","tracksStore.actions","auth.state"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, Fragment, renderList, createBlock, withCtx, createTextVNode } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import Loader from "../../../../components/Loader/Loader.vue.js";
+import Loader from "../../../../components/Loader/Loader.vue2.js";
 /* empty css                                       */
 import Media from "../../../../components/Media/Media.vue.js";
 /* empty css                                            */
@@ -33,37 +33,37 @@ const _hoisted_4 = {
   class: "album-content cols-2 mobile:cols-1 gap-big"
 };
 const _hoisted_5 = { class: "pos-sticky pos-t-0 mobile:pos-relative album-cover-section" };
-const _hoisted_6 = { class: "stats-grid grid cols-2 gap-small" };
+const _hoisted_6 = { class: "stats-grid d-grid cols-2 mobile:cols-1 gap-small" };
 const _hoisted_7 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
 const _hoisted_8 = { class: "mn-b-thin" };
 const _hoisted_9 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
 const _hoisted_10 = { class: "mn-b-thin" };
 const _hoisted_11 = { class: "album-details-section" };
 const _hoisted_12 = { class: "flex items-center gap-small mn-b-small" };
-const _hoisted_13 = { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" };
+const _hoisted_13 = { class: "bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase" };
 const _hoisted_14 = {
   key: 0,
-  class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
+  class: "bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase"
 };
 const _hoisted_15 = { class: "h1 mn-b-medium" };
 const _hoisted_16 = { class: "artists-section mn-b-medium" };
 const _hoisted_17 = {
   key: 0,
-  class: "t-medium mn-b-small"
+  class: "fw-medium mn-b-small"
 };
 const _hoisted_18 = { class: "flex flex-column gap-small" };
-const _hoisted_19 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_19 = { class: "metadata-grid d-grid cols-2 mobile:cols-1 gap-small mn-b-medium" };
 const _hoisted_20 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_21 = { class: "t-medium" };
+const _hoisted_21 = { class: "fw-medium" };
 const _hoisted_22 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_23 = { class: "t-medium" };
+const _hoisted_23 = { class: "fw-medium" };
 const _hoisted_24 = {
   key: 0,
   class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular"
 };
-const _hoisted_25 = { class: "t-medium" };
+const _hoisted_25 = { class: "fw-medium" };
 const _hoisted_26 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_27 = { class: "t-medium" };
+const _hoisted_27 = { class: "fw-medium" };
 const _hoisted_28 = {
   key: 0,
   class: "tags-section mn-b-medium"
@@ -79,7 +79,7 @@ const _hoisted_32 = {
   class: "more-albums-section mn-t-big"
 };
 const _hoisted_33 = { class: "flex justify-between items-center mn-b-medium" };
-const _hoisted_34 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide" };
+const _hoisted_34 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-x-contain scroll-smooth scroll-snap-x-mandatory scroll-hide" };
 const _sfc_main = {
   __name: "Album",
   emits: ["page-loading", "page-loaded"],
@@ -251,7 +251,7 @@ const _sfc_main = {
         ])) : createCommentVNode("", true),
         hasLoaded.value && !album.value ? (openBlock(), createElementBlock("div", _hoisted_3, _cache[0] || (_cache[0] = [
           createElementVNode("h2", { class: "" }, "Album not found", -1),
-          createElementVNode("p", { class: "t-transp t-medium" }, "The album you're looking for doesn't exist or has been removed.", -1)
+          createElementVNode("p", { class: "t-transp fw-medium" }, "The album you're looking for doesn't exist or has been removed.", -1)
         ]))) : createCommentVNode("", true),
         album.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
           createElementVNode("div", _hoisted_5, [
@@ -292,31 +292,31 @@ const _sfc_main = {
                 }), 128))
               ])
             ]),
-            _cache[8] || (_cache[8] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
+            _cache[8] || (_cache[8] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Metadata", -1)),
             createElementVNode("div", _hoisted_19, [
               createElementVNode("div", _hoisted_20, [
-                createVNode(_sfc_main$5, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$5, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[3] || (_cache[3] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
                   createElementVNode("div", _hoisted_21, toDisplayString(formatDate(album.value.releaseDate)), 1)
                 ])
               ]),
               createElementVNode("div", _hoisted_22, [
-                createVNode(IconTime, { class: "i-medium t-primary" }),
+                createVNode(IconTime, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[4] || (_cache[4] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
                   createElementVNode("div", _hoisted_23, toDisplayString(totalDuration.value), 1)
                 ])
               ]),
               album.value.label ? (openBlock(), createElementBlock("div", _hoisted_24, [
-                createVNode(_sfc_main$6, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$6, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[5] || (_cache[5] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Label", -1)),
                   createElementVNode("div", _hoisted_25, toDisplayString(album.value.label), 1)
                 ])
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_26, [
-                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$7, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[6] || (_cache[6] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
                   createElementVNode("div", _hoisted_27, toDisplayString(album.value.isPublic ? "Public" : "Private"), 1)
@@ -324,18 +324,18 @@ const _sfc_main = {
               ])
             ]),
             album.value.genres && album.value.genres.length || album.value.tags && album.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_28, [
-              _cache[7] || (_cache[7] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
+              _cache[7] || (_cache[7] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Genres & Tags", -1)),
               createElementVNode("div", _hoisted_29, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(album.value.genres, (genre) => {
                   return openBlock(), createElementBlock("span", {
                     key: genre,
-                    class: "tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer"
+                    class: "tag bg-main fw-medium pd-thin radius-thin t-small cursor-pointer"
                   }, toDisplayString(genre), 1);
                 }), 128)),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(album.value.tags, (tag) => {
                   return openBlock(), createElementBlock("span", {
                     key: tag,
-                    class: "tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
+                    class: "tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
                   }, " #" + toDisplayString(tag), 1);
                 }), 128))
               ])
@@ -381,7 +381,7 @@ const _sfc_main = {
             album.value.artists && album.value.artists[0] ? (openBlock(), createBlock(_component_router_link, {
               key: 0,
               to: { name: "artist", params: { url: album.value.artists[0].url } },
-              class: "t-primary hover-opacity"
+              class: "t-main hover:opacity-70"
             }, {
               default: withCtx(() => _cache[10] || (_cache[10] = [
                 createTextVNode(" See all ")
@@ -393,11 +393,11 @@ const _sfc_main = {
             (openBlock(true), createElementBlock(Fragment, null, renderList(moreAlbums.value, (relatedAlbum) => {
               return openBlock(), createElementBlock("li", {
                 key: album.value._id,
-                class: "flex-none scroll-snap-align-start"
+                class: "flex-none scroll-snap-start"
               }, [
                 createVNode(AlbumCard, {
                   album: relatedAlbum,
-                  class: "w-15r transition-cubic-in-out"
+                  class: "w-15r ease-cubic-in-out"
                 }, null, 8, ["album"])
               ]);
             }), 128))

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

@@ -1 +1 @@
-{"version":3,"file":"Album.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Album.vue"],"sourcesContent":["<!-- components/pages/Album.vue -->\n<template>\n  <div class=\"album-page pd-small\">\n    <!-- Loading -->\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n    \n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !album\" class=\"t-center pd-big\">\n      <h2 class=\"\">Album not found</h2>\n      <p class=\"t-transp t-medium\">The album you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <!-- Album Content -->\n    <div v-if=\"album\" class=\"album-content cols-2 mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky pos-t-0 mobile:pos-relative album-cover-section\">\n        <!-- Cover -->\n        <Media \n          :url=\"album.coverArt || '/logo/logo-placeholder.jpg'\"\n          :alt=\"album.title\"\n          class=\"aspect-1x1 w-100  mn-b-small radius-medium o-hidden\"\n        />\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ album.totalTracks || 0 }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Tracks</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(album.views) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Views</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Album Details -->\n      <div class=\"album-details-section\">\n        <!-- Album Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n          <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            {{ album.type }}\n          </span>\n          <span v-if=\"album.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Published\n          </span>\n        </div>\n\n        <!-- Album Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ album.title }}</h1>\n\n        <!-- Action Buttons -->\n        <ActionButtons :buttons=\"actionButtons\" />\n\n        <!-- Artists Cards -->\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\" v-if=\"album.artists\">Artists</h3>\n          <div class=\"flex flex-column gap-small\">\n            <ArtistCardSmall \n              v-for=\"artist in album.artists\" \n              :key=\"artist._id\"\n              :artist=\"artist\"\n              :is-following=\"followedArtists.includes(artist._id)\"\n              :show-follow-button=\"!isOwner\"\n              @toggle-follow=\"toggleFollowArtist\"\n            />\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n          <!-- Release Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconCalendar class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Released</div>\n              <div class=\"t-medium \">{{ formatDate(album.releaseDate) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconClock class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ totalDuration }}</div>\n            </div>\n          </div>\n\n          <!-- Label -->\n          <div v-if=\"album.label\" class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconDisc class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Label</div>\n              <div class=\"t-medium \">{{ album.label }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconEye class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ album.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Genres & Tags -->\n        <div v-if=\"(album.genres && album.genres.length) || (album.tags && album.tags.length)\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Genres & Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"genre in album.genres\" \n              :key=\"genre\"\n              class=\"tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer\"\n            >\n              {{ genre }}\n            </span>\n            <span \n              v-for=\"tag in album.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Album Tracks -->\n    <section v-if=\"!isLoading && album && albumTracks.length\" class=\"tracks-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n      <Feed\n        :store=\"{\n          read: () => Promise.resolve(albumTracks),\n          state: { isLoading: false }\n        }\"\n        :external=\"true\"\n        :items=\"albumTracks\"\n        :states=\"{\n          empty: {\n            title: 'No tracks in album',\n            description: 'This album appears to be empty',\n            class: 'pd-medium t-center'\n          }\n        }\"\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 + 1\"\n              :showAlbum=\"false\"\n              :showCover=\"false\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- More from Artists -->\n    <section v-if=\"!isLoading && album && moreAlbums.length\" class=\"more-albums-section mn-t-big\">\n      <div class=\"flex justify-between items-center mn-b-medium\">\n        <h2 class=\"h2\">More Albums</h2>\n        <router-link \n          v-if=\"album.artists && album.artists[0]\"\n          :to=\"{ name: 'artist', params: { url: album.artists[0].url } }\" \n          class=\"t-primary hover-opacity\"\n        >\n          See all\n        </router-link>\n      </div>\n      <div  class=\"flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide\"\n      >\n        <li v-for=\"relatedAlbum in moreAlbums\"  :key=\"album._id\" class=\"flex-none scroll-snap-align-start\">\n          <AlbumCard :album=\"relatedAlbum\" class=\"w-15r transition-cubic-in-out\" />\n        </li>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconDisc from '@martyrs/src/modules/icons/entities/IconMusic.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport ActionButtons from '../blocks/ActionButtons.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFavorite = ref(false);\nconst followedArtists = ref([]);\nconst moreAlbums = ref([]);\n\n// Clear state\nalbumsState.currentAlbum = null;\nalbumsState.currentAlbumTracks = [];\n\n// Computed\nconst album = computed(() => albumsState.currentAlbum);\nconst albumTracks = computed(() => albumsState.currentAlbumTracks || []);\n\nconst isOwner = computed(() => {\n  return album.value?.owner?.target === authState.user?._id;\n});\n\nconst totalDuration = computed(() => {\n  if (!albumTracks.value.length) return '0:00';\n  const totalSeconds = albumTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);\n  return formatDuration(totalSeconds);\n});\n\nconst actionButtons = computed(() => {\n  const buttons = [\n    {\n      type: 'button',\n      class: 't-white bg-black',\n      icon: IconPlay,\n      iconFill: 'rgb(var(--white))',\n      text: 'Play All',\n      action: playAlbum\n    },\n    {\n      type: 'button',\n      class: 'bg-light',\n      icon: IconShuffle,\n      text: 'Shuffle',\n      action: shufflePlay\n    },\n    {\n      type: 'button',\n      class: 'bg-light',\n      icon: IconLike,\n      iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',\n      text: isFavorite.value ? 'Liked' : 'Like',\n      action: toggleFavorite\n    },\n    {\n      type: 'dropdown',\n      items: [\n        { text: 'Add to Queue', action: addToQueue },\n        { text: 'Copy Link', action: copyLink },\n        { text: 'Add to Playlist', action: addToPlaylist }\n      ]\n    }\n  ];\n\n  if (isOwner.value) {\n    const items = buttons[3].items;\n    items.push({ separator: true });\n    items.push({ text: 'Edit Album', action: editAlbum });\n    items.push({ text: 'Delete Album', action: deleteAlbum, color: 'danger' });\n  }\n\n  return buttons;\n});\n\n// Format helpers\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playAlbum = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    playerActions.setQueue(albumTracks.value);\n  }\n};\n\nconst shufflePlay = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    const shuffled = [...albumTracks.value].sort(() => Math.random() - 0.5);\n    playerActions.setQueue(shuffled);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = (artistId) => {\n  const index = followedArtists.value.indexOf(artistId);\n  if (index > -1) {\n    followedArtists.value.splice(index, 1);\n  } else {\n    followedArtists.value.push(artistId);\n  }\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (albumTracks.value.length > 0) {\n    albumTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n  }\n};\n\nconst addToPlaylist = () => {\n  // TODO: Implement add to playlist\n  console.log('Add album to playlist');\n};\n\nconst editAlbum = () => {\n  router.push({ name: 'album-edit', params: { url: album.value.url } });\n};\n\nconst deleteAlbum = async () => {\n  if (confirm('Are you sure you want to delete this album?')) {\n    try {\n      await albumsActions.deleteAlbum(album.value._id);\n      router.push({ name: 'music-library' });\n    } catch (error) {\n      console.error('Failed to delete album:', error);\n    }\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n};\n\n// Data fetching\nconst fetchAlbumData = async () => {\n  try {\n    await albumsActions.fetchAlbumByUrl(route.params.url);\n    \n    // Fetch more albums from the same artists\n    if (album.value?.artists?.length) {\n      const artistIds = album.value.artists.map(a => a._id);\n      const albums = await albumsActions.fetchAlbums({\n        artist: { $in: artistIds },\n        status: 'published',\n        isPublic: true,\n        limit: 6\n      });\n      \n      // Filter out current album\n      moreAlbums.value = albums.filter(a => a._id !== album.value._id).slice(0, 5);\n    }\n  } catch (error) {\n    console.error('Error fetching album data:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchAlbumData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["albumsState","authState","IconPlay","IconShuffle","IconLike","playerActions","albumsActions"],"mappings":"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"}
+{"version":3,"file":"Album.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Album.vue"],"sourcesContent":["<!-- components/pages/Album.vue -->\n<template>\n  <div class=\"album-page pd-small\">\n    <!-- Loading -->\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n    \n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !album\" class=\"t-center pd-big\">\n      <h2 class=\"\">Album not found</h2>\n      <p class=\"t-transp fw-medium\">The album you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <!-- Album Content -->\n    <div v-if=\"album\" class=\"album-content cols-2 mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky pos-t-0 mobile:pos-relative album-cover-section\">\n        <!-- Cover -->\n        <Media \n          :url=\"album.coverArt || '/logo/logo-placeholder.jpg'\"\n          :alt=\"album.title\"\n          class=\"aspect-1x1 w-100  mn-b-small radius-medium o-hidden\"\n        />\n        <!-- Quick Stats -->\n        <div class=\"stats-grid d-grid cols-2 mobile:cols-1 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ album.totalTracks || 0 }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Tracks</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(album.views) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Views</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Album Details -->\n      <div class=\"album-details-section\">\n        <!-- Album Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n          <span class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            {{ album.type }}\n          </span>\n          <span v-if=\"album.status === 'published'\" class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Published\n          </span>\n        </div>\n\n        <!-- Album Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ album.title }}</h1>\n\n        <!-- Action Buttons -->\n        <ActionButtons :buttons=\"actionButtons\" />\n\n        <!-- Artists Cards -->\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"fw-medium mn-b-small\" v-if=\"album.artists\">Artists</h3>\n          <div class=\"flex flex-column gap-small\">\n            <ArtistCardSmall \n              v-for=\"artist in album.artists\" \n              :key=\"artist._id\"\n              :artist=\"artist\"\n              :is-following=\"followedArtists.includes(artist._id)\"\n              :show-follow-button=\"!isOwner\"\n              @toggle-follow=\"toggleFollowArtist\"\n            />\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"fw-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid d-grid cols-2 mobile:cols-1 gap-small mn-b-medium\">\n          <!-- Release Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconCalendar class=\"i-medium t-main\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Released</div>\n              <div class=\"fw-medium \">{{ formatDate(album.releaseDate) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconClock class=\"i-medium t-main\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"fw-medium \">{{ totalDuration }}</div>\n            </div>\n          </div>\n\n          <!-- Label -->\n          <div v-if=\"album.label\" class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconDisc class=\"i-medium t-main\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Label</div>\n              <div class=\"fw-medium \">{{ album.label }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconEye class=\"i-medium t-main\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"fw-medium \">{{ album.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Genres & Tags -->\n        <div v-if=\"(album.genres && album.genres.length) || (album.tags && album.tags.length)\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"fw-medium mn-b-small\">Genres & Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"genre in album.genres\" \n              :key=\"genre\"\n              class=\"tag bg-main fw-medium pd-thin radius-thin t-small cursor-pointer\"\n            >\n              {{ genre }}\n            </span>\n            <span \n              v-for=\"tag in album.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer\"\n            >\n              #{{ tag }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Album Tracks -->\n    <section v-if=\"!isLoading && album && albumTracks.length\" class=\"tracks-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n      <Feed\n        :store=\"{\n          read: () => Promise.resolve(albumTracks),\n          state: { isLoading: false }\n        }\"\n        :external=\"true\"\n        :items=\"albumTracks\"\n        :states=\"{\n          empty: {\n            title: 'No tracks in album',\n            description: 'This album appears to be empty',\n            class: 'pd-medium t-center'\n          }\n        }\"\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 + 1\"\n              :showAlbum=\"false\"\n              :showCover=\"false\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- More from Artists -->\n    <section v-if=\"!isLoading && album && moreAlbums.length\" class=\"more-albums-section mn-t-big\">\n      <div class=\"flex justify-between items-center mn-b-medium\">\n        <h2 class=\"h2\">More Albums</h2>\n        <router-link \n          v-if=\"album.artists && album.artists[0]\"\n          :to=\"{ name: 'artist', params: { url: album.artists[0].url } }\" \n          class=\"t-main hover:opacity-70\"\n        >\n          See all\n        </router-link>\n      </div>\n      <div  class=\"flex flex-nowrap gap-small o-x-scroll overscroll-x-contain scroll-smooth scroll-snap-x-mandatory scroll-hide\"\n      >\n        <li v-for=\"relatedAlbum in moreAlbums\"  :key=\"album._id\" class=\"flex-none scroll-snap-start\">\n          <AlbumCard :album=\"relatedAlbum\" class=\"w-15r ease-cubic-in-out\" />\n        </li>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconDisc from '@martyrs/src/modules/icons/entities/IconMusic.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport ActionButtons from '../blocks/ActionButtons.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFavorite = ref(false);\nconst followedArtists = ref([]);\nconst moreAlbums = ref([]);\n\n// Clear state\nalbumsState.currentAlbum = null;\nalbumsState.currentAlbumTracks = [];\n\n// Computed\nconst album = computed(() => albumsState.currentAlbum);\nconst albumTracks = computed(() => albumsState.currentAlbumTracks || []);\n\nconst isOwner = computed(() => {\n  return album.value?.owner?.target === authState.user?._id;\n});\n\nconst totalDuration = computed(() => {\n  if (!albumTracks.value.length) return '0:00';\n  const totalSeconds = albumTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);\n  return formatDuration(totalSeconds);\n});\n\nconst actionButtons = computed(() => {\n  const buttons = [\n    {\n      type: 'button',\n      class: 't-white bg-black',\n      icon: IconPlay,\n      iconFill: 'rgb(var(--white))',\n      text: 'Play All',\n      action: playAlbum\n    },\n    {\n      type: 'button',\n      class: 'bg-light',\n      icon: IconShuffle,\n      text: 'Shuffle',\n      action: shufflePlay\n    },\n    {\n      type: 'button',\n      class: 'bg-light',\n      icon: IconLike,\n      iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',\n      text: isFavorite.value ? 'Liked' : 'Like',\n      action: toggleFavorite\n    },\n    {\n      type: 'dropdown',\n      items: [\n        { text: 'Add to Queue', action: addToQueue },\n        { text: 'Copy Link', action: copyLink },\n        { text: 'Add to Playlist', action: addToPlaylist }\n      ]\n    }\n  ];\n\n  if (isOwner.value) {\n    const items = buttons[3].items;\n    items.push({ separator: true });\n    items.push({ text: 'Edit Album', action: editAlbum });\n    items.push({ text: 'Delete Album', action: deleteAlbum, color: 'danger' });\n  }\n\n  return buttons;\n});\n\n// Format helpers\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playAlbum = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    playerActions.setQueue(albumTracks.value);\n  }\n};\n\nconst shufflePlay = () => {\n  if (albumTracks.value && albumTracks.value.length > 0) {\n    const shuffled = [...albumTracks.value].sort(() => Math.random() - 0.5);\n    playerActions.setQueue(shuffled);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = (artistId) => {\n  const index = followedArtists.value.indexOf(artistId);\n  if (index > -1) {\n    followedArtists.value.splice(index, 1);\n  } else {\n    followedArtists.value.push(artistId);\n  }\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (albumTracks.value.length > 0) {\n    albumTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n  }\n};\n\nconst addToPlaylist = () => {\n  // TODO: Implement add to playlist\n  console.log('Add album to playlist');\n};\n\nconst editAlbum = () => {\n  router.push({ name: 'album-edit', params: { url: album.value.url } });\n};\n\nconst deleteAlbum = async () => {\n  if (confirm('Are you sure you want to delete this album?')) {\n    try {\n      await albumsActions.deleteAlbum(album.value._id);\n      router.push({ name: 'music-library' });\n    } catch (error) {\n      console.error('Failed to delete album:', error);\n    }\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n};\n\n// Data fetching\nconst fetchAlbumData = async () => {\n  try {\n    await albumsActions.fetchAlbumByUrl(route.params.url);\n    \n    // Fetch more albums from the same artists\n    if (album.value?.artists?.length) {\n      const artistIds = album.value.artists.map(a => a._id);\n      const albums = await albumsActions.fetchAlbums({\n        artist: { $in: artistIds },\n        status: 'published',\n        isPublic: true,\n        limit: 6\n      });\n      \n      // Filter out current album\n      moreAlbums.value = albums.filter(a => a._id !== album.value._id).slice(0, 5);\n    }\n  } catch (error) {\n    console.error('Error fetching album data:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchAlbumData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["albumsState","authState","IconPlay","IconShuffle","IconLike","playerActions","albumsActions"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { ref, computed, onMounted, createElementBlock, openBlock, createCommentVNode, createElementVNode, createVNode, unref, withCtx, createTextVNode, normalizeStyle, normalizeClass, toDisplayString, Fragment, renderList, createBlock } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
-/* empty css                                        */
+/* empty css                                       */
 import _sfc_main$2 from "../cards/TrackListCard.vue.js";
 import { state, actions } from "../../store/artists.js";
 import { state as state$1 } from "../../../auth/views/store/auth.js";
@@ -15,7 +15,7 @@ const _hoisted_2 = {
 const _hoisted_3 = { key: 1 };
 const _hoisted_4 = {
   key: 0,
-  class: "pos-absolute pos-t-medium pos-r-medium z-index-1"
+  class: "pos-absolute pos-t-small pos-r-small z-index-1"
 };
 const _hoisted_5 = { 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" };
 const _hoisted_6 = { class: "w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium" };
@@ -43,7 +43,7 @@ const _hoisted_18 = ["href"];
 const _hoisted_19 = ["href"];
 const _hoisted_20 = ["href"];
 const _hoisted_21 = { class: "pd-medium" };
-const _hoisted_22 = { class: "cols-2-1_2 gap-regular mobile:cols-1" };
+const _hoisted_22 = { class: "cols-[1fr_2fr] gap-regular mobile:cols-1" };
 const _hoisted_23 = { class: "bg-light pd-medium radius-medium mn-b-medium" };
 const _hoisted_24 = {
   key: 0,
@@ -71,7 +71,7 @@ const _hoisted_33 = {
   class: "w-100 h-100 bg-light flex-center flex"
 };
 const _hoisted_34 = { class: "w-100 o-hidden" };
-const _hoisted_35 = { class: "p-regular t-truncate" };
+const _hoisted_35 = { class: "p-regular truncate" };
 const _hoisted_36 = { class: "p-small t-transp" };
 const _hoisted_37 = {
   key: 1,
@@ -86,7 +86,7 @@ const _hoisted_42 = {
   class: "w-100 h-100 bg-light flex-center flex"
 };
 const _hoisted_43 = { class: "w-100 o-hidden" };
-const _hoisted_44 = { class: "p-regular t-truncate" };
+const _hoisted_44 = { class: "p-regular truncate" };
 const _hoisted_45 = { class: "p-small t-transp" };
 const _hoisted_46 = {
   key: 2,
@@ -109,7 +109,7 @@ const _hoisted_54 = {
   key: 1,
   class: "w-100 h-100 bg-light flex-center flex"
 };
-const _hoisted_55 = { class: "p-regular t-truncate" };
+const _hoisted_55 = { class: "p-regular truncate" };
 const _sfc_main = {
   __name: "Artist",
   emits: ["page-loading", "page-loaded"],
@@ -301,7 +301,7 @@ const _sfc_main = {
                     (openBlock(true), createElementBlock(Fragment, null, renderList(discography.value.albums, (album) => {
                       return openBlock(), createElementBlock("div", {
                         key: album._id,
-                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white",
+                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover:bg-white",
                         onClick: ($event) => unref(router).push({ name: "album", params: { url: album.url } })
                       }, [
                         createElementVNode("div", _hoisted_31, [
@@ -340,7 +340,7 @@ const _sfc_main = {
                     (openBlock(true), createElementBlock(Fragment, null, renderList(discography.value.singles, (single) => {
                       return openBlock(), createElementBlock("div", {
                         key: single._id,
-                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white",
+                        class: "bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover:bg-white",
                         onClick: ($event) => unref(router).push({ name: "track", params: { url: single.url } })
                       }, [
                         createElementVNode("div", _hoisted_40, [