npm - @ozdao/martyrs - Versions diffs - 0.2.582 → 0.2.584 - Mend

@ozdao/martyrs 0.2.582 → 0.2.584

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

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

@@ -2,9 +2,9 @@ import { reactive, ref, watch, onMounted, createElementBlock, openBlock, createE
 import { useRouter, useRoute } from "vue-router";
 import Field from "../../../../components/Field/Field.vue.js";
 import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
-import _sfc_main$4 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$4 from "../../../../components/Button/Button.vue2.js";
 import _sfc_main$3 from "../../../../components/Checkbox/Checkbox.vue.js";
-import Select from "../../../../components/Select/Select.vue2.js";
+import Select from "../../../../components/Select/Select.vue.js";
 import UploadImage from "../../../../components/UploadImage/UploadImage.vue.js";
 import Upload from "../../../../components/Upload/Upload.vue2.js";
 import _sfc_main$2 from "../../../icons/navigation/IconCross.vue.js";

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

@@ -1,7 +1,7 @@
 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";
-/* empty css                                        */
+/* empty css                                       */
 import Media from "../../../../components/Media/Media.vue.js";
 /* empty css                                            */
 import _sfc_main$8 from "../../../../components/Feed/Feed.vue.js";

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

@@ -1,6 +1,6 @@
 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.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 /* empty css                                        */
 import _sfc_main$2 from "../cards/TrackListCard.vue.js";
 import { state, actions } from "../../store/artists.js";

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

@@ -5,7 +5,7 @@ import _sfc_main$3 from "../cards/TrackListCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
 import ArtistCard from "../cards/ArtistCard.vue.js";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import { state } from "../../../auth/views/store/auth.js";
 import { state as state$1, actions } from "../../store/playlists.js";
 import { state as state$2, actions as actions$1 } from "../../store/albums.js";

package/dist/martyrs/src/modules/music/components/pages/Playlist.vue.js CHANGED Viewed

@@ -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 _sfc_main$9 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$9 from "../../../../components/Button/Button.vue2.js";
 /* empty css                                        */
 import Media from "../../../../components/Media/Media.vue.js";
 /* empty css                                            */
@@ -154,26 +154,26 @@ const _sfc_main = {
         {
           type: "dropdown",
           items: [
-            { text: "Add to Queue", action: addToQueue, class: "t-nowrap" },
-            { text: "Copy Link", action: copyLink, class: "t-nowrap" }
+            { text: "Add to Queue", action: addToQueue, class: "ws-nowrap" },
+            { text: "Copy Link", action: copyLink, class: "ws-nowrap" }
           ]
         }
       ];
       if (isOwner.value || isCollaborator.value) {
         const items = buttons[3].items;
         items.push({ separator: true });
-        items.push({ text: "Edit Playlist", action: editPlaylist, class: "t-nowrap" });
+        items.push({ text: "Edit Playlist", action: editPlaylist, class: "ws-nowrap" });
         if (isOwner.value) {
           items.push({
             text: playlist.value?.isCollaborative ? "Make Private" : "Make Collaborative",
             action: toggleCollaborative,
-            class: "t-nowrap"
+            class: "ws-nowrap"
           });
           items.push({
             text: "Delete Playlist",
             action: deletePlaylist,
             color: "danger",
-            class: "t-nowrap"
+            class: "ws-nowrap"
           });
         }
       }

package/dist/martyrs/src/modules/music/components/pages/Playlist.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Playlist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<template>\n <div class=\"playlist-page pd-small\">\n <!-- Not Found -->\n <div v-if=\"hasLoaded && !playlist\" class=\"t-center pd-big\">\n <h2 class=\"\">Playlist not found</h2>\n <p class=\"t-transp fw-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n </div>\n \n <!-- Playlist Content -->\n <div v-if=\"playlist\" class=\"playlist-content cols-2 mobile:cols-1 gap-big\">\n <!-- Left Column - Cover & Stats -->\n <div class=\"pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section\">\n <!-- Cover -->\n <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n <Media \n :url=\"playlist.coverUrl \|\| '/assets/placeholder-playlist.jpg'\"\n :alt=\"playlist.title\"\n class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n />\n </div>\n\n <!-- Quick Stats -->\n <div class=\"stats-grid d-grid cols-2 gap-small\">\n <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n <div class=\" mn-b-thin\">{{ playlistTracks.length }}</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(playlist.followers \|\| 0) }}</div>\n <div class=\"t-small t-transp t-uppercase\">Followers</div>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Playlist Details -->\n <div class=\"playlist-details-section\">\n <!-- Playlist 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 Playlist\n </span>\n <span v-if=\"playlist.isCollaborative\" class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n Collaborative\n </span>\n <span v-if=\"playlist.status === 'published'\" class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n Published\n </span>\n </div>\n\n <!-- Playlist Title -->\n <h1 class=\"h1 mn-b-medium\">{{ playlist.title }}</h1>\n\n <!-- Action Buttons -->\n <ActionButtons :buttons=\"actionButtons\" />\n\n <div class=\"artists-section mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">Created by</h3>\n <div class=\"flex flex-column gap-small\">\n <ArtistCardSmall \n :artist=\"{\n _id: playlist.creator.target,\n to: { name: 'User Profile', params: { _id: playlist.creator.target } },\n photoUrl: null,\n name: playlist.creator.target,\n isVerified: false\n }\"\n :is-following=\"followedUsers.includes(playlist.creator.target)\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowUser(playlist.creator.target)\"\n />\n </div>\n </div>\n\n <!-- Collaborators -->\n <div v-if=\"playlist.collaborators && playlist.collaborators.length > 0\" class=\"collaborators-section mn-b-big\">\n <h3 class=\"fw-medium mn-b-small\">Collaborators</h3>\n <div class=\"flex flex-wrap gap-small\">\n <div \n v-for=\"collaborator in playlist.collaborators\"\n :key=\"collaborator._id \|\| collaborator\"\n class=\"collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin\"\n >\n <Media \n v-if=\"collaborator.photoUrl\"\n :url=\"collaborator.photoUrl\"\n class=\"i-medium radius-full object-cover\"\n />\n <span class=\"t-small\">{{ collaborator.name \|\| collaborator.profile?.name \|\| 'User' }}</span>\n </div>\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 gap-small mn-b-medium\">\n <!-- Created 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\">Created</div>\n <div class=\"fw-medium \">{{ formatDate(playlist.createdAt) }}</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 <!-- Updated Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n <IconRefresh class=\"i-medium t-main\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Updated</div>\n <div class=\"fw-medium \">{{ formatDate(playlist.updatedAt) }}</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 \">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>\n </div>\n </div>\n </div>\n\n <!-- Tags -->\n <div v-if=\"playlist.tags && playlist.tags.length\" class=\"tags-section mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">Tags</h3>\n <div class=\"flex gap-thin flex-wrap\">\n <span \n v-for=\"tag in playlist.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\n <!-- Description -->\n <div v-if=\"playlist.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">About</h3>\n <p class=\"t-transp\">{{ playlist.description }}</p>\n </div>\n </div>\n </div>\n\n <!-- Playlist Tracks -->\n <section v-if=\"!isLoading && playlist && playlistTracks.length\" class=\"tracks-section mn-t-big\">\n <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n <Feed\n :store=\"{\n read: () => Promise.resolve(playlistTracks),\n state: { isLoading: false }\n }\"\n :external=\"true\"\n :items=\"playlistTracks\"\n :states=\"{\n empty: {\n title: 'No tracks in playlist',\n description: 'Add some tracks to get started',\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=\"true\"\n :showCover=\"true\"\n :canRemove=\"isOwner \|\| isCollaborator\"\n @remove=\"() => removeTrack(track._id)\"\n />\n </div>\n </template>\n </Feed>\n </section>\n\n <!-- Empty State -->\n <section v-else-if=\"!isLoading && playlist && !playlistTracks.length\" class=\"empty-section mn-t-big\">\n <div class=\"empty-tracks t-center pd-big bg-light radius-medium\">\n <h3 class=\" mn-b-small\">This playlist is empty</h3>\n <p class=\"t-transp fw-medium mn-b-medium\">Add some tracks to get started</p>\n \n <Button \n v-if=\"isOwner \|\| isCollaborator\"\n @click=\"$router.push({ name: 'music-search' })\"\n color=\"primary\"\n size=\"medium\"\n >\n Find Tracks\n </Button>\n </div>\n </section>\n\n <!-- More Playlists -->\n <section v-if=\"!isLoading && playlist && morePlaylists.length\" class=\"more-playlists-section mn-t-big\">\n <div class=\"flex justify-between items-center mn-b-medium\">\n <h2 class=\"h2\">More Playlists</h2>\n <router-link \n v-if=\"playlist.creator\"\n :to=\"getOwnerProfileLink(playlist.creator)\" \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 <li v-for=\"relatedPlaylist in morePlaylists\" :key=\"relatedPlaylist._id\" class=\"flex-none scroll-snap-start\">\n <PlaylistCard :playlist=\"relatedPlaylist\" class=\"w-min-15r ease-cubic-in-out\" />\n </li>\n </div>\n </section>\n\n <!-- Edit Playlist Modal -->\n <Popup \n :isPopupOpen=\"showEditModal && (isOwner \|\| isCollaborator)\"\n @close-popup=\"showEditModal = false\" \n class=\"bg-white pd-medium w-m-30r radius-medium\"\n >\n <PlaylistForm \n :editMode=\"true\"\n :url=\"playlist.url\"\n @cancel=\"showEditModal = false\"\n @updated=\"handlePlaylistUpdated\"\n />\n </Popup>\n\n <!-- Delete Confirmation Modal -->\n <Popup \n :isPopupOpen=\"showDeleteModal\"\n @close-popup=\"showDeleteModal = false\" \n class=\"bg-white pd-medium w-m-25r radius-medium\"\n >\n <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n <p class=\"t-transp mn-b-medium\">Are you sure you want to delete \"{{ playlist.title }}\"? This action cannot be undone.</p>\n \n <div class=\"flex justify-end gap-small\">\n <Button \n @click=\"showDeleteModal = false\"\n color=\"transp\"\n size=\"medium\"\n >\n Cancel\n </Button>\n \n <Button \n @click=\"confirmDelete\"\n color=\"danger\"\n size=\"medium\"\n >\n Delete Playlist\n </Button>\n </div>\n </Popup>\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';\nimport Popup from '@martyrs/src/components/Popup/Popup.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 IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.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 PlaylistCard from '../cards/PlaylistCard.vue';\nimport PlaylistForm from '../forms/PlaylistForm.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\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 isFollowing = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\nconst followedUsers = ref([]);\nconst morePlaylists = ref([]);\n\n// Clear state\nplaylistsState.currentPlaylist = null;\nplaylistsState.currentPlaylistTracks = [];\n\n// Computed\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks \|\| []);\n\nconst isOwner = computed(() => {\n if (!playlist.value \|\| !authState.user) return false;\n \n const ownerId = playlist.value.owner?.target?._id \|\| playlist.value.owner?.target;\n return ownerId === authState.user._id;\n});\n\nconst isCollaborator = computed(() => {\n if (!playlist.value \|\| !authState.user) return false;\n \n return playlist.value.collaborators?.some(collab => \n (collab._id \|\| collab) === authState.user._id\n );\n});\n\nconst totalDuration = computed(() => {\n if (!playlistTracks.value.length) return '0:00';\n const totalSeconds = playlistTracks.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: playPlaylist\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: null,\n text: isFollowing.value ? 'Unfollow' : 'Follow',\n action: toggleFollow\n },\n {\n type: 'dropdown',\n items: [\n { text: 'Add to Queue', action: addToQueue, class: 't-nowrap' },\n { text: 'Copy Link', action: copyLink, class: 't-nowrap' }\n ]\n }\n ];\n\n if (isOwner.value \|\| isCollaborator.value) {\n const items = buttons[3].items;\n items.push({ separator: true });\n items.push({ text: 'Edit Playlist', action: editPlaylist, class: 't-nowrap' });\n\n if (isOwner.value) {\n items.push({\n text: playlist.value?.isCollaborative ? 'Make Private' : 'Make Collaborative',\n action: toggleCollaborative,\n class: 't-nowrap'\n });\n items.push({\n text: 'Delete Playlist',\n action: deletePlaylist,\n color: 'danger',\n class: 't-nowrap'\n });\n }\n }\n\n return buttons;\n});\n\n// Helper functions\nconst getOwnerData = (playlist) => {\n if (!playlist) return null;\n const owner = playlist.creator?.target \|\| playlist.owner?.target;\n return typeof owner === 'object' ? owner : null;\n};\n\nconst getOwnerId = (playlist) => {\n if (!playlist) return null;\n const owner = playlist.creator?.target \|\| playlist.owner?.target;\n return typeof owner === 'object' ? owner._id : owner;\n};\n\nconst getPlaylistOwnerName = (playlist) => {\n if (!playlist) return 'Unknown';\n \n const owner = getOwnerData(playlist);\n if (owner) {\n return owner.profile?.name \|\| owner.name \|\| 'Unknown';\n }\n \n return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n if (!owner \|\| !owner.target) return { name: 'music-home' };\n \n const targetId = typeof owner.target === 'object' ? owner.target._id : owner.target;\n \n if (owner.type === 'user' \|\| owner.type === 'User') {\n return { name: 'User Profile', params: { _id: targetId } };\n } else if (owner.type === 'organization' \|\| owner.type === 'Organization') {\n return { name: 'Organizatio', params: { _id: targetId } };\n }\n \n return { name: 'music-home' };\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 playPlaylist = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n playerActions.setQueue(playlistTracks.value);\n }\n};\n\nconst shufflePlay = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);\n playerActions.setQueue(shuffled);\n }\n};\n\nconst toggleFollow = async () => {\n isFollowing.value = !isFollowing.value;\n // TODO: Implement actual following\n try {\n if (isFollowing.value) {\n await playlistsActions.followPlaylist(playlist.value._id);\n } else {\n await playlistsActions.unfollowPlaylist(playlist.value._id);\n }\n } catch (error) {\n console.error('Error toggling follow:', error);\n isFollowing.value = !isFollowing.value; // Revert on error\n }\n};\n\nconst toggleFollowUser = (userId) => {\n const index = followedUsers.value.indexOf(userId);\n if (index > -1) {\n followedUsers.value.splice(index, 1);\n } else {\n followedUsers.value.push(userId);\n }\n // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n playlistTracks.value.forEach(track => {\n playerActions.addToQueue(track);\n });\n }\n};\n\nconst editPlaylist = () => {\n showEditModal.value = true;\n};\n\nconst toggleCollaborative = async () => {\n try {\n const updatedData = {\n _id: playlist.value._id,\n isCollaborative: !playlist.value.isCollaborative\n };\n\n await playlistsActions.updatePlaylist(updatedData);\n } catch (error) {\n console.error('Error updating playlist:', error);\n }\n};\n\nconst deletePlaylist = () => {\n showDeleteModal.value = true;\n};\n\nconst confirmDelete = async () => {\n try {\n await playlistsActions.deletePlaylist(playlist.value._id);\n router.push({ name: 'music-library' });\n } catch (error) {\n console.error('Error deleting playlist:', error);\n store.core.actions.setError({\n message: 'Failed to delete playlist'\n });\n }\n};\n\nconst removeTrack = async (trackId) => {\n try {\n await playlistsActions.removeTrackFromPlaylist(playlist.value._id, trackId);\n // Refresh playlist data\n await fetchPlaylistData();\n } catch (error) {\n console.error('Error removing track:', error);\n store.core.actions.setError({\n message: 'Failed to remove track'\n });\n }\n};\n\nconst copyLink = () => {\n navigator.clipboard.writeText(window.location.href);\n};\n\nconst handlePlaylistUpdated = () => {\n showEditModal.value = false;\n fetchPlaylistData();\n};\n\n// Data fetching\nconst fetchPlaylistData = async () => {\n try {\n await playlistsActions.fetchPlaylistByUrl(route.params.url);\n \n // Check if following\n if (authState.user && playlist.value) {\n // TODO: Check if user is following this playlist\n }\n \n // Fetch more playlists from the same creator\n if (playlist.value?.creator?.target) {\n const creatorId = typeof playlist.value.creator.target === 'object' \n ? playlist.value.creator.target._id \n : playlist.value.creator.target;\n \n const playlists = await playlistsActions.fetchPlaylists({\n 'creator.target': creatorId,\n isPublic: true,\n limit: 6\n });\n \n // Filter out current playlist\n morePlaylists.value = playlists.filter(p => p._id !== playlist.value._id).slice(0, 5);\n }\n } catch (error) {\n console.error('Error fetching playlist data:', error);\n }\n};\n\n// Lifecycle\nonMounted(async () => {\n emits('page-loading');\n \n await fetchPlaylistData();\n \n hasLoaded.value = true;\n emits('page-loaded');\n});\n</script>\n"],"names":["playlistsState","authState","IconPlay","IconShuffle","playerActions","playlistsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgTA,UAAM,QAAQ,SAAQ;AAEtB,UAAM,QAAQ,SAAQ;AACtB,UAAM,SAAS,UAAS;AAGxB,UAAM,QAAQ;AAGd,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,cAAc,IAAI,KAAK;AAC7B,UAAM,gBAAgB,IAAI,KAAK;AAC/B,UAAM,kBAAkB,IAAI,KAAK;AACjC,UAAM,gBAAgB,IAAI,EAAE;AAC5B,UAAM,gBAAgB,IAAI,EAAE;AAG5BA,UAAe,kBAAkB;AACjCA,UAAe,wBAAwB,CAAA;AAGvC,UAAM,WAAW,SAAS,MAAMA,MAAe,eAAe;AAC9D,UAAM,iBAAiB,SAAS,MAAMA,MAAe,yBAAyB,CAAA,CAAE;AAEhF,UAAM,UAAU,SAAS,MAAM;AAC7B,UAAI,CAAC,SAAS,SAAS,CAACC,QAAU,KAAM,QAAO;AAE/C,YAAM,UAAU,SAAS,MAAM,OAAO,QAAQ,OAAO,SAAS,MAAM,OAAO;AAC3E,aAAO,YAAYA,QAAU,KAAK;AAAA,IACpC,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,UAAI,CAAC,SAAS,SAAS,CAACA,QAAU,KAAM,QAAO;AAE/C,aAAO,SAAS,MAAM,eAAe;AAAA,QAAK,aACvC,OAAO,OAAO,YAAYA,QAAU,KAAK;AAAA,MAC9C;AAAA,IACA,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,UAAI,CAAC,eAAe,MAAM,OAAQ,QAAO;AACzC,YAAM,eAAe,eAAe,MAAM,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,YAAY,IAAI,CAAC;AAC/F,aAAO,eAAe,YAAY;AAAA,IACpC,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,YAAM,UAAU;AAAA,QACd;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAMC;AAAAA,UACN,UAAU;AAAA,UACV,MAAM;AAAA,UACN,QAAQ;AAAA,QACd;AAAA,QACI;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAMC;AAAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,QACd;AAAA,QACI;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAM;AAAA,UACN,MAAM,YAAY,QAAQ,aAAa;AAAA,UACvC,QAAQ;AAAA,QACd;AAAA,QACI;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,YACL,EAAE,MAAM,gBAAgB,QAAQ,YAAY,OAAO,WAAU;AAAA,YAC7D,EAAE,MAAM,aAAa,QAAQ,UAAU,OAAO,WAAU;AAAA,UAChE;AAAA,QACA;AAAA,MACA;AAEE,UAAI,QAAQ,SAAS,eAAe,OAAO;AACzC,cAAM,QAAQ,QAAQ,CAAC,EAAE;AACzB,cAAM,KAAK,EAAE,WAAW,KAAI,CAAE;AAC9B,cAAM,KAAK,EAAE,MAAM,iBAAiB,QAAQ,cAAc,OAAO,YAAY;AAE7E,YAAI,QAAQ,OAAO;AACjB,gBAAM,KAAK;AAAA,YACT,MAAM,SAAS,OAAO,kBAAkB,iBAAiB;AAAA,YACzD,QAAQ;AAAA,YACR,OAAO;AAAA,UACf,CAAO;AACD,gBAAM,KAAK;AAAA,YACT,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,OAAO;AAAA,UACf,CAAO;AAAA,QACH;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AA0BD,UAAM,sBAAsB,CAAC,UAAU;AACrC,UAAI,CAAC,SAAS,CAAC,MAAM,OAAQ,QAAO,EAAE,MAAM,aAAY;AAExD,YAAM,WAAW,OAAO,MAAM,WAAW,WAAW,MAAM,OAAO,MAAM,MAAM;AAE9E,UAAI,MAAM,SAAS,UAAU,MAAM,SAAS,QAAQ;AACjD,eAAO,EAAE,MAAM,gBAAgB,QAAQ,EAAE,KAAK,WAAU;AAAA,MAC1D,WAAW,MAAM,SAAS,kBAAkB,MAAM,SAAS,gBAAgB;AACzE,eAAO,EAAE,MAAM,eAAe,QAAQ,EAAE,KAAK,WAAU;AAAA,MACzD;AAEA,aAAO,EAAE,MAAM,aAAY;AAAA,IAC7B;AAGA,UAAM,aAAa,CAAC,eAAe;AACjC,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,IAAI,KAAK,UAAU,EAAE,mBAAmB,SAAS;AAAA,QACtD,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACT,CAAG;AAAA,IACH;AAEA,UAAM,iBAAiB,CAAC,YAAY;AAClC,UAAI,CAAC,QAAS,QAAO;AACrB,YAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AACnC,YAAM,IAAI,KAAK,MAAO,UAAU,OAAQ,EAAE;AAC1C,YAAM,IAAI,KAAK,MAAM,UAAU,EAAE;AAEjC,UAAI,IAAI,GAAG;AACT,eAAO,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,MAC/E;AACA,aAAO,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC9C;AAEA,UAAM,eAAe,CAAC,QAAQ;AAC5B,UAAI,CAAC,IAAK,QAAO;AACjB,UAAI,OAAO,KAAS;AAClB,gBAAQ,MAAM,KAAS,QAAQ,CAAC,IAAI;AAAA,MACtC,WAAW,OAAO,KAAM;AACtB,gBAAQ,MAAM,KAAM,QAAQ,CAAC,IAAI;AAAA,MACnC;AACA,aAAO,IAAI,SAAQ;AAAA,IACrB;AAGA,UAAM,eAAe,MAAM;AACzB,UAAI,eAAe,SAAS,eAAe,MAAM,SAAS,GAAG;AAC3DC,gBAAc,SAAS,eAAe,KAAK;AAAA,MAC7C;AAAA,IACF;AAEA,UAAM,cAAc,MAAM;AACxB,UAAI,eAAe,SAAS,eAAe,MAAM,SAAS,GAAG;AAC3D,cAAM,WAAW,CAAC,GAAG,eAAe,KAAK,EAAE,KAAK,MAAM,KAAK,OAAM,IAAK,GAAG;AACzEA,gBAAc,SAAS,QAAQ;AAAA,MACjC;AAAA,IACF;AAEA,UAAM,eAAe,YAAY;AAC/B,kBAAY,QAAQ,CAAC,YAAY;AAEjC,UAAI;AACF,YAAI,YAAY,OAAO;AACrB,gBAAMC,UAAiB,eAAe,SAAS,MAAM,GAAG;AAAA,QAC1D,OAAO;AACL,gBAAMA,UAAiB,iBAAiB,SAAS,MAAM,GAAG;AAAA,QAC5D;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7C,oBAAY,QAAQ,CAAC,YAAY;AAAA,MACnC;AAAA,IACF;AAEA,UAAM,mBAAmB,CAAC,WAAW;AACnC,YAAM,QAAQ,cAAc,MAAM,QAAQ,MAAM;AAChD,UAAI,QAAQ,IAAI;AACd,sBAAc,MAAM,OAAO,OAAO,CAAC;AAAA,MACrC,OAAO;AACL,sBAAc,MAAM,KAAK,MAAM;AAAA,MACjC;AAAA,IAEF;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,eAAe,SAAS,eAAe,MAAM,SAAS,GAAG;AAC3D,uBAAe,MAAM,QAAQ,WAAS;AACpCD,kBAAc,WAAW,KAAK;AAAA,QAChC,CAAC;AAAA,MACH;AAAA,IACF;AAEA,UAAM,eAAe,MAAM;AACzB,oBAAc,QAAQ;AAAA,IACxB;AAEA,UAAM,sBAAsB,YAAY;AACtC,UAAI;AACF,cAAM,cAAc;AAAA,UAClB,KAAK,SAAS,MAAM;AAAA,UACpB,iBAAiB,CAAC,SAAS,MAAM;AAAA,QACvC;AAEI,cAAMC,UAAiB,eAAe,WAAW;AAAA,MACnD,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAAA,MACjD;AAAA,IACF;AAEA,UAAM,iBAAiB,MAAM;AAC3B,sBAAgB,QAAQ;AAAA,IAC1B;AAEA,UAAM,gBAAgB,YAAY;AAChC,UAAI;AACF,cAAMA,UAAiB,eAAe,SAAS,MAAM,GAAG;AACxD,eAAO,KAAK,EAAE,MAAM,gBAAe,CAAE;AAAA,MACvC,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAC/C,cAAM,KAAK,QAAQ,SAAS;AAAA,UAC1B,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAEA,UAAM,cAAc,OAAO,YAAY;AACrC,UAAI;AACF,cAAMA,UAAiB,wBAAwB,SAAS,MAAM,KAAK,OAAO;AAE1E,cAAM,kBAAiB;AAAA,MACzB,SAAS,OAAO;AACd,gBAAQ,MAAM,yBAAyB,KAAK;AAC5C,cAAM,KAAK,QAAQ,SAAS;AAAA,UAC1B,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAEA,UAAM,WAAW,MAAM;AACrB,gBAAU,UAAU,UAAU,OAAO,SAAS,IAAI;AAAA,IACpD;AAEA,UAAM,wBAAwB,MAAM;AAClC,oBAAc,QAAQ;AACtB,wBAAiB;AAAA,IACnB;AAGA,UAAM,oBAAoB,YAAY;AACpC,UAAI;AACF,cAAMA,UAAiB,mBAAmB,MAAM,OAAO,GAAG;AAG1D,YAAIJ,QAAU,QAAQ,SAAS,OAAO;AAAA,QAEtC;AAGA,YAAI,SAAS,OAAO,SAAS,QAAQ;AACnC,gBAAM,YAAY,OAAO,SAAS,MAAM,QAAQ,WAAW,WACvD,SAAS,MAAM,QAAQ,OAAO,MAC9B,SAAS,MAAM,QAAQ;AAE3B,gBAAM,YAAY,MAAMI,UAAiB,eAAe;AAAA,YACtD,kBAAkB;AAAA,YAClB,UAAU;AAAA,YACV,OAAO;AAAA,UACf,CAAO;AAGD,wBAAc,QAAQ,UAAU,OAAO,OAAK,EAAE,QAAQ,SAAS,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC;AAAA,QACtF;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,iCAAiC,KAAK;AAAA,MACtD;AAAA,IACF;AAGA,cAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,kBAAiB;AAEvB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"Playlist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<template>\n <div class=\"playlist-page pd-small\">\n <!-- Not Found -->\n <div v-if=\"hasLoaded && !playlist\" class=\"t-center pd-big\">\n <h2 class=\"\">Playlist not found</h2>\n <p class=\"t-transp fw-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n </div>\n \n <!-- Playlist Content -->\n <div v-if=\"playlist\" class=\"playlist-content cols-2 mobile:cols-1 gap-big\">\n <!-- Left Column - Cover & Stats -->\n <div class=\"pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section\">\n <!-- Cover -->\n <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n <Media \n :url=\"playlist.coverUrl \|\| '/assets/placeholder-playlist.jpg'\"\n :alt=\"playlist.title\"\n class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n />\n </div>\n\n <!-- Quick Stats -->\n <div class=\"stats-grid d-grid cols-2 gap-small\">\n <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n <div class=\" mn-b-thin\">{{ playlistTracks.length }}</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(playlist.followers \|\| 0) }}</div>\n <div class=\"t-small t-transp t-uppercase\">Followers</div>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Playlist Details -->\n <div class=\"playlist-details-section\">\n <!-- Playlist 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 Playlist\n </span>\n <span v-if=\"playlist.isCollaborative\" class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n Collaborative\n </span>\n <span v-if=\"playlist.status === 'published'\" class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n Published\n </span>\n </div>\n\n <!-- Playlist Title -->\n <h1 class=\"h1 mn-b-medium\">{{ playlist.title }}</h1>\n\n <!-- Action Buttons -->\n <ActionButtons :buttons=\"actionButtons\" />\n\n <div class=\"artists-section mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">Created by</h3>\n <div class=\"flex flex-column gap-small\">\n <ArtistCardSmall \n :artist=\"{\n _id: playlist.creator.target,\n to: { name: 'User Profile', params: { _id: playlist.creator.target } },\n photoUrl: null,\n name: playlist.creator.target,\n isVerified: false\n }\"\n :is-following=\"followedUsers.includes(playlist.creator.target)\"\n :show-follow-button=\"!isOwner\"\n @toggle-follow=\"toggleFollowUser(playlist.creator.target)\"\n />\n </div>\n </div>\n\n <!-- Collaborators -->\n <div v-if=\"playlist.collaborators && playlist.collaborators.length > 0\" class=\"collaborators-section mn-b-big\">\n <h3 class=\"fw-medium mn-b-small\">Collaborators</h3>\n <div class=\"flex flex-wrap gap-small\">\n <div \n v-for=\"collaborator in playlist.collaborators\"\n :key=\"collaborator._id \|\| collaborator\"\n class=\"collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin\"\n >\n <Media \n v-if=\"collaborator.photoUrl\"\n :url=\"collaborator.photoUrl\"\n class=\"i-medium radius-full object-cover\"\n />\n <span class=\"t-small\">{{ collaborator.name \|\| collaborator.profile?.name \|\| 'User' }}</span>\n </div>\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 gap-small mn-b-medium\">\n <!-- Created 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\">Created</div>\n <div class=\"fw-medium \">{{ formatDate(playlist.createdAt) }}</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 <!-- Updated Date -->\n <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n <IconRefresh class=\"i-medium t-main\" />\n <div>\n <div class=\"t-small t-transp t-uppercase\">Updated</div>\n <div class=\"fw-medium \">{{ formatDate(playlist.updatedAt) }}</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 \">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>\n </div>\n </div>\n </div>\n\n <!-- Tags -->\n <div v-if=\"playlist.tags && playlist.tags.length\" class=\"tags-section mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">Tags</h3>\n <div class=\"flex gap-thin flex-wrap\">\n <span \n v-for=\"tag in playlist.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\n <!-- Description -->\n <div v-if=\"playlist.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n <h3 class=\"fw-medium mn-b-small\">About</h3>\n <p class=\"t-transp\">{{ playlist.description }}</p>\n </div>\n </div>\n </div>\n\n <!-- Playlist Tracks -->\n <section v-if=\"!isLoading && playlist && playlistTracks.length\" class=\"tracks-section mn-t-big\">\n <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n <Feed\n :store=\"{\n read: () => Promise.resolve(playlistTracks),\n state: { isLoading: false }\n }\"\n :external=\"true\"\n :items=\"playlistTracks\"\n :states=\"{\n empty: {\n title: 'No tracks in playlist',\n description: 'Add some tracks to get started',\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=\"true\"\n :showCover=\"true\"\n :canRemove=\"isOwner \|\| isCollaborator\"\n @remove=\"() => removeTrack(track._id)\"\n />\n </div>\n </template>\n </Feed>\n </section>\n\n <!-- Empty State -->\n <section v-else-if=\"!isLoading && playlist && !playlistTracks.length\" class=\"empty-section mn-t-big\">\n <div class=\"empty-tracks t-center pd-big bg-light radius-medium\">\n <h3 class=\" mn-b-small\">This playlist is empty</h3>\n <p class=\"t-transp fw-medium mn-b-medium\">Add some tracks to get started</p>\n \n <Button \n v-if=\"isOwner \|\| isCollaborator\"\n @click=\"$router.push({ name: 'music-search' })\"\n color=\"primary\"\n size=\"medium\"\n >\n Find Tracks\n </Button>\n </div>\n </section>\n\n <!-- More Playlists -->\n <section v-if=\"!isLoading && playlist && morePlaylists.length\" class=\"more-playlists-section mn-t-big\">\n <div class=\"flex justify-between items-center mn-b-medium\">\n <h2 class=\"h2\">More Playlists</h2>\n <router-link \n v-if=\"playlist.creator\"\n :to=\"getOwnerProfileLink(playlist.creator)\" \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 <li v-for=\"relatedPlaylist in morePlaylists\" :key=\"relatedPlaylist._id\" class=\"flex-none scroll-snap-start\">\n <PlaylistCard :playlist=\"relatedPlaylist\" class=\"w-min-15r ease-cubic-in-out\" />\n </li>\n </div>\n </section>\n\n <!-- Edit Playlist Modal -->\n <Popup \n :isPopupOpen=\"showEditModal && (isOwner \|\| isCollaborator)\"\n @close-popup=\"showEditModal = false\" \n class=\"bg-white pd-medium w-m-30r radius-medium\"\n >\n <PlaylistForm \n :editMode=\"true\"\n :url=\"playlist.url\"\n @cancel=\"showEditModal = false\"\n @updated=\"handlePlaylistUpdated\"\n />\n </Popup>\n\n <!-- Delete Confirmation Modal -->\n <Popup \n :isPopupOpen=\"showDeleteModal\"\n @close-popup=\"showDeleteModal = false\" \n class=\"bg-white pd-medium w-m-25r radius-medium\"\n >\n <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n <p class=\"t-transp mn-b-medium\">Are you sure you want to delete \"{{ playlist.title }}\"? This action cannot be undone.</p>\n \n <div class=\"flex justify-end gap-small\">\n <Button \n @click=\"showDeleteModal = false\"\n color=\"transp\"\n size=\"medium\"\n >\n Cancel\n </Button>\n \n <Button \n @click=\"confirmDelete\"\n color=\"danger\"\n size=\"medium\"\n >\n Delete Playlist\n </Button>\n </div>\n </Popup>\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';\nimport Popup from '@martyrs/src/components/Popup/Popup.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 IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.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 PlaylistCard from '../cards/PlaylistCard.vue';\nimport PlaylistForm from '../forms/PlaylistForm.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\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 isFollowing = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\nconst followedUsers = ref([]);\nconst morePlaylists = ref([]);\n\n// Clear state\nplaylistsState.currentPlaylist = null;\nplaylistsState.currentPlaylistTracks = [];\n\n// Computed\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks \|\| []);\n\nconst isOwner = computed(() => {\n if (!playlist.value \|\| !authState.user) return false;\n \n const ownerId = playlist.value.owner?.target?._id \|\| playlist.value.owner?.target;\n return ownerId === authState.user._id;\n});\n\nconst isCollaborator = computed(() => {\n if (!playlist.value \|\| !authState.user) return false;\n \n return playlist.value.collaborators?.some(collab => \n (collab._id \|\| collab) === authState.user._id\n );\n});\n\nconst totalDuration = computed(() => {\n if (!playlistTracks.value.length) return '0:00';\n const totalSeconds = playlistTracks.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: playPlaylist\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: null,\n text: isFollowing.value ? 'Unfollow' : 'Follow',\n action: toggleFollow\n },\n {\n type: 'dropdown',\n items: [\n { text: 'Add to Queue', action: addToQueue, class: 'ws-nowrap' },\n { text: 'Copy Link', action: copyLink, class: 'ws-nowrap' }\n ]\n }\n ];\n\n if (isOwner.value \|\| isCollaborator.value) {\n const items = buttons[3].items;\n items.push({ separator: true });\n items.push({ text: 'Edit Playlist', action: editPlaylist, class: 'ws-nowrap' });\n\n if (isOwner.value) {\n items.push({\n text: playlist.value?.isCollaborative ? 'Make Private' : 'Make Collaborative',\n action: toggleCollaborative,\n class: 'ws-nowrap'\n });\n items.push({\n text: 'Delete Playlist',\n action: deletePlaylist,\n color: 'danger',\n class: 'ws-nowrap'\n });\n }\n }\n\n return buttons;\n});\n\n// Helper functions\nconst getOwnerData = (playlist) => {\n if (!playlist) return null;\n const owner = playlist.creator?.target \|\| playlist.owner?.target;\n return typeof owner === 'object' ? owner : null;\n};\n\nconst getOwnerId = (playlist) => {\n if (!playlist) return null;\n const owner = playlist.creator?.target \|\| playlist.owner?.target;\n return typeof owner === 'object' ? owner._id : owner;\n};\n\nconst getPlaylistOwnerName = (playlist) => {\n if (!playlist) return 'Unknown';\n \n const owner = getOwnerData(playlist);\n if (owner) {\n return owner.profile?.name \|\| owner.name \|\| 'Unknown';\n }\n \n return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n if (!owner \|\| !owner.target) return { name: 'music-home' };\n \n const targetId = typeof owner.target === 'object' ? owner.target._id : owner.target;\n \n if (owner.type === 'user' \|\| owner.type === 'User') {\n return { name: 'User Profile', params: { _id: targetId } };\n } else if (owner.type === 'organization' \|\| owner.type === 'Organization') {\n return { name: 'Organizatio', params: { _id: targetId } };\n }\n \n return { name: 'music-home' };\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 playPlaylist = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n playerActions.setQueue(playlistTracks.value);\n }\n};\n\nconst shufflePlay = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);\n playerActions.setQueue(shuffled);\n }\n};\n\nconst toggleFollow = async () => {\n isFollowing.value = !isFollowing.value;\n // TODO: Implement actual following\n try {\n if (isFollowing.value) {\n await playlistsActions.followPlaylist(playlist.value._id);\n } else {\n await playlistsActions.unfollowPlaylist(playlist.value._id);\n }\n } catch (error) {\n console.error('Error toggling follow:', error);\n isFollowing.value = !isFollowing.value; // Revert on error\n }\n};\n\nconst toggleFollowUser = (userId) => {\n const index = followedUsers.value.indexOf(userId);\n if (index > -1) {\n followedUsers.value.splice(index, 1);\n } else {\n followedUsers.value.push(userId);\n }\n // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n if (playlistTracks.value && playlistTracks.value.length > 0) {\n playlistTracks.value.forEach(track => {\n playerActions.addToQueue(track);\n });\n }\n};\n\nconst editPlaylist = () => {\n showEditModal.value = true;\n};\n\nconst toggleCollaborative = async () => {\n try {\n const updatedData = {\n _id: playlist.value._id,\n isCollaborative: !playlist.value.isCollaborative\n };\n\n await playlistsActions.updatePlaylist(updatedData);\n } catch (error) {\n console.error('Error updating playlist:', error);\n }\n};\n\nconst deletePlaylist = () => {\n showDeleteModal.value = true;\n};\n\nconst confirmDelete = async () => {\n try {\n await playlistsActions.deletePlaylist(playlist.value._id);\n router.push({ name: 'music-library' });\n } catch (error) {\n console.error('Error deleting playlist:', error);\n store.core.actions.setError({\n message: 'Failed to delete playlist'\n });\n }\n};\n\nconst removeTrack = async (trackId) => {\n try {\n await playlistsActions.removeTrackFromPlaylist(playlist.value._id, trackId);\n // Refresh playlist data\n await fetchPlaylistData();\n } catch (error) {\n console.error('Error removing track:', error);\n store.core.actions.setError({\n message: 'Failed to remove track'\n });\n }\n};\n\nconst copyLink = () => {\n navigator.clipboard.writeText(window.location.href);\n};\n\nconst handlePlaylistUpdated = () => {\n showEditModal.value = false;\n fetchPlaylistData();\n};\n\n// Data fetching\nconst fetchPlaylistData = async () => {\n try {\n await playlistsActions.fetchPlaylistByUrl(route.params.url);\n \n // Check if following\n if (authState.user && playlist.value) {\n // TODO: Check if user is following this playlist\n }\n \n // Fetch more playlists from the same creator\n if (playlist.value?.creator?.target) {\n const creatorId = typeof playlist.value.creator.target === 'object' \n ? playlist.value.creator.target._id \n : playlist.value.creator.target;\n \n const playlists = await playlistsActions.fetchPlaylists({\n 'creator.target': creatorId,\n isPublic: true,\n limit: 6\n });\n \n // Filter out current playlist\n morePlaylists.value = playlists.filter(p => p._id !== playlist.value._id).slice(0, 5);\n }\n } catch (error) {\n console.error('Error fetching playlist data:', error);\n }\n};\n\n// Lifecycle\nonMounted(async () => {\n emits('page-loading');\n \n await fetchPlaylistData();\n \n hasLoaded.value = true;\n emits('page-loaded');\n});\n</script>\n"],"names":["playlistsState","authState","IconPlay","IconShuffle","playerActions","playlistsActions"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ import _sfc_main$3 from "../cards/TrackListCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
 import ArtistCard from "../cards/ArtistCard.vue.js";
-import _sfc_main$2 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$2 from "../../../../components/Button/Button.vue2.js";
 import Loader from "../../../../components/Loader/Loader.vue.js";
 import { state, actions } from "../../store/search.js";
 /* empty css                   */

package/dist/martyrs/src/modules/music/components/pages/Track.vue.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { computed, ref, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createBlock, createVNode, createElementVNode, withCtx, toDisplayString, Fragment, renderList } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import _sfc_main$5 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$5 from "../../../../components/Button/Button.vue2.js";
 import Loader from "../../../../components/Loader/Loader.vue.js";
 import Media from "../../../../components/Media/Media.vue.js";
 /* empty css                                            */

package/dist/martyrs/src/modules/music/components/pages/TrackCreate.vue.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { createElementBlock, openBlock, createVNode } from "vue";
 import { useRouter } from "vue-router";
 /* empty css                                        */
-/* empty css                                        */
+/* empty css                                       */
 import _sfc_main$1 from "../forms/TrackForm.vue.js";
 const _hoisted_1 = { class: "track-create-page" };
 const _sfc_main = {

package/dist/martyrs/src/modules/music/components/player/FullscreenPlayer.vue.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ref, onMounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, unref, normalizeStyle, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode } from "vue";
 import _imports_0 from "./tonar.png.js";
-import { r as cu } from "../../../../../dist/main-vq1_XpmQ.js";
+import { r as cu } from "../../../../../dist/main-fmp55tJF.js";
 import _sfc_main$1 from "../../../icons/navigation/IconLike.vue.js";
 import _sfc_main$2 from "../../../icons/entities/IconEvents.vue.js";
 import _sfc_main$3 from "../cards/TrackListCard.vue.js";

package/dist/martyrs/src/modules/music/components/player/MusicPlayer.vue.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, createBlock, createCommentVNode, toDisplayString, unref, normalizeClass, withModifiers, withCtx } from "vue";
 import Media from "../../../../components/Media/Media.vue.js";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import TrackProgress from "./TrackProgress.vue.js";
 import VolumeControl from "./VolumeControl.vue.js";
 import PlayerControls from "./PlayerControls.vue.js";

package/dist/martyrs/src/modules/music/components/player/PlayerControls.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { createElementBlock, openBlock, createVNode, normalizeClass, unref, withCtx, createElementVNode } from "vue";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import IconPrevious from "../../../icons/navigation/IconChevronLeft.vue.js";
 import IconNext from "../../../icons/navigation/IconChevronRight.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconShuffle.vue.js";

package/dist/martyrs/src/modules/music/components/player/VolumeControl.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ref, computed, createElementBlock, openBlock, createVNode, createElementVNode, unref, withCtx, createBlock, normalizeStyle } from "vue";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import _sfc_main$2 from "../../../icons/navigation/IconMute.vue.js";
 import _sfc_main$3 from "../../../icons/navigation/IconUnMute.vue.js";
 import { state, actions } from "../../store/player.js";

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.js CHANGED Viewed

@@ -117,14 +117,14 @@ const _sfc_main = {
                   }, " Mark all read ")) : createCommentVNode("", true),
                   createVNode(_component_router_link, {
                     class: "w-100 bg-black t-white radius-small button",
-                    to: "/notifications",
+                    to: `/users/${state.user?._id}/notifications`,
                     onClick: closeNotifications
                   }, {
                     default: withCtx(() => _cache[1] || (_cache[1] = [
                       createTextVNode(" View all ")
                     ])),
                     _: 1
-                  })
+                  }, 8, ["to"])
                 ])
               ]))
             ])
@@ -135,7 +135,7 @@ const _sfc_main = {
     };
   }
 };
-const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ce5c73ba"]]);
+const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bea4263c"]]);
 export {
   NotificationBadge as default
 };

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationBadge.vue.js","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n <div class=\"notification-badge-container\">\n <button \n class=\"i-medium notification-button\"\n @click=\"toggleNotifications\"\n :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n >\n <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n <div \n v-if=\"unreadCount > 0\" \n class=\"button-counter flex flex-center\"\n >\n <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>\n </div>\n </button>\n \n <Popup\n title=\"Notifications\"\n @close-popup=\"closeNotifications\"\n :isPopupOpen=\"isOpen\"\n align=\"center right\"\n class=\"bg-white h-min-100 w-100 w-max-30r pd-medium\"\n >\n <div class=\"cols-1 gap-thin o-y-scroll\">\n <div v-if=\"loading\" class=\"notifications-loading\">\n Loading...\n </div>\n \n <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n No notifications\n </div>\n \n <div v-else class=\"flex-column flex gap-thin\">\n <notification-item \n v-for=\"notification in recentNotifications\" \n :key=\"notification._id\" \n :notification=\"notification\"\n @click=\"handleNotificationClick(notification)\"\n />\n\n <div class=\"flex-nowrap flex gap-thin\">\n <button \n v-if=\"unreadCount > 0\"\n class=\"w-100 bg-second t-white radius-small button\" \n @click=\"markAllAsRead\"\n >\n Mark all read\n </button>\n\n <router-link class=\"w-100 bg-black t-white radius-small button\" to=\"/notifications\" @click=\"closeNotifications\">\n View all \n </router-link>\n </div>\n\n </div>\n\n </div>\n </Popup>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n maxNotifications: {\n type: Number,\n default: 10\n },\n fill: {\n type: String,\n default: 'rgb(var(--white))'\n }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\n\n// Check if notifications module is loaded, provide fallback if not\nconst useNotifications = inject('useNotifications', () => ({\n notifications: ref([]),\n unreadCount: ref(0),\n loading: ref(false),\n markAllAsRead: () => {},\n getNotifications: () => {}\n}));\n\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = useNotifications();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n return notifications.value\n .slice()\n .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n isOpen.value = !isOpen.value;\n};\n\nconst closeNotifications = () => {\n isOpen.value = false;\n};\n\nconst handleNotificationClick = (notification) => {\n isOpen.value = false;\n \n if (notification._id) {\n // Handle in store\n actions.handleNotificationAction({\n notificationId: notification._id,\n ...notification.metadata\n });\n }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n // Load notifications when component mounts\n const userId = auth.state.user._id;\n if (userId) {\n getNotifications(userId);\n }\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n position: relative;\n display: inline-block;\n}\n\n.notification-button {\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n font-size: 1.2rem;\n}\n\n.notification-icon {\n font-size: 1.4rem;\n}\n\n.button-counter {\n position: absolute;\n right: -8px;\n bottom: -8px;\n background: rgb(var(--fourth));\n color: rgb(var(--white));\n height: 16px;\n border-radius: 16px;\n width: 16px;\n font-weight: 500;\n text-align: center;\n line-height: 16px;\n font-size: 10px;\n}\n\n\n.notifications-loading,\n.notifications-empty {\n padding: 24px;\n text-align: center;\n color: rgb(var(--texfw-light));\n}\n</style>"],"names":["auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAYC,cAAS;AAGxB,UAAM,mBAAmB,OAAO,oBAAoB,OAAO;AAAA,MACzD,eAAe,IAAI,EAAE;AAAA,MACrB,aAAa,IAAI,CAAC;AAAA,MAClB,SAAS,IAAI,KAAK;AAAA,MAClB,eAAe,MAAM;AAAA,MAAC;AAAA,MACtB,kBAAkB,MAAM;AAAA,MAAC;AAAA,IAC3B,EAAE;AAEF,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,iBAAgB,IAAK,iBAAgB;AAGjG,UAAM,SAAS,IAAI,KAAK;AAGxB,UAAM,sBAAsB,SAAS,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAAA,IACzB;AAEA,UAAM,qBAAqB,MAAM;AAC/B,aAAO,QAAQ;AAAA,IACjB;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACH;AAAA,IACF;AAGA,cAAU,MAAM;AAEd,YAAM,SAASA,MAAW,KAAK;AAC/B,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAAA,MACzB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NotificationBadge.vue.js","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n <div class=\"notification-badge-container\">\n <button \n class=\"i-medium notification-button\"\n @click=\"toggleNotifications\"\n :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n >\n <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n <div \n v-if=\"unreadCount > 0\" \n class=\"button-counter flex flex-center\"\n >\n <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>\n </div>\n </button>\n \n <Popup\n title=\"Notifications\"\n @close-popup=\"closeNotifications\"\n :isPopupOpen=\"isOpen\"\n align=\"center right\"\n class=\"bg-white h-min-100 w-100 w-max-30r pd-medium\"\n >\n <div class=\"cols-1 gap-thin o-y-scroll\">\n <div v-if=\"loading\" class=\"notifications-loading\">\n Loading...\n </div>\n \n <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n No notifications\n </div>\n \n <div v-else class=\"flex-column flex gap-thin\">\n <notification-item \n v-for=\"notification in recentNotifications\" \n :key=\"notification._id\" \n :notification=\"notification\"\n @click=\"handleNotificationClick(notification)\"\n />\n\n <div class=\"flex-nowrap flex gap-thin\">\n <button \n v-if=\"unreadCount > 0\"\n class=\"w-100 bg-second t-white radius-small button\" \n @click=\"markAllAsRead\"\n >\n Mark all read\n </button>\n\n <router-link class=\"w-100 bg-black t-white radius-small button\" :to=\"`/users/${auth.state.user?._id}/notifications`\" @click=\"closeNotifications\">\n View all \n </router-link>\n </div>\n\n </div>\n\n </div>\n </Popup>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n maxNotifications: {\n type: Number,\n default: 10\n },\n fill: {\n type: String,\n default: 'rgb(var(--white))'\n }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\n\n// Check if notifications module is loaded, provide fallback if not\nconst useNotifications = inject('useNotifications', () => ({\n notifications: ref([]),\n unreadCount: ref(0),\n loading: ref(false),\n markAllAsRead: () => {},\n getNotifications: () => {}\n}));\n\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = useNotifications();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n return notifications.value\n .slice()\n .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n isOpen.value = !isOpen.value;\n};\n\nconst closeNotifications = () => {\n isOpen.value = false;\n};\n\nconst handleNotificationClick = (notification) => {\n isOpen.value = false;\n \n if (notification._id) {\n // Handle in store\n actions.handleNotificationAction({\n notificationId: notification._id,\n ...notification.metadata\n });\n }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n // Load notifications when component mounts\n const userId = auth.state.user._id;\n if (userId) {\n getNotifications(userId);\n }\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n position: relative;\n display: inline-block;\n}\n\n.notification-button {\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n font-size: 1.2rem;\n}\n\n.notification-icon {\n font-size: 1.4rem;\n}\n\n.button-counter {\n position: absolute;\n right: -8px;\n bottom: -8px;\n background: rgb(var(--fourth));\n color: rgb(var(--white));\n height: 16px;\n border-radius: 16px;\n width: 16px;\n font-weight: 500;\n text-align: center;\n line-height: 16px;\n font-size: 10px;\n}\n\n\n.notifications-loading,\n.notifications-empty {\n padding: 24px;\n text-align: center;\n color: rgb(var(--texfw-light));\n}\n</style>"],"names":["auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAYC,cAAS;AAGxB,UAAM,mBAAmB,OAAO,oBAAoB,OAAO;AAAA,MACzD,eAAe,IAAI,EAAE;AAAA,MACrB,aAAa,IAAI,CAAC;AAAA,MAClB,SAAS,IAAI,KAAK;AAAA,MAClB,eAAe,MAAM;AAAA,MAAC;AAAA,MACtB,kBAAkB,MAAM;AAAA,MAAC;AAAA,IAC3B,EAAE;AAEF,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,iBAAgB,IAAK,iBAAgB;AAGjG,UAAM,SAAS,IAAI,KAAK;AAGxB,UAAM,sBAAsB,SAAS,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAAA,IACzB;AAEA,UAAM,qBAAqB,MAAM;AAC/B,aAAO,QAAQ;AAAA,IACjB;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACH;AAAA,IACF;AAGA,cAAU,MAAM;AAEd,YAAM,SAASA,MAAW,KAAK;AAC/B,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAAA,MACzB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/notifications/components/sections/NotificationPreferences.vue.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { inject, reactive, ref, computed, onMounted, createElementBlock, openBlock, createElementVNode, unref, createVNode, Fragment, renderList, toDisplayString, createBlock, createCommentVNode, withCtx, createTextVNode } from "vue";
 import _sfc_main$1 from "../../../../components/Checkbox/Checkbox.vue.js";
-import _sfc_main$2 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$2 from "../../../../components/Button/Button.vue2.js";
 import Loader from "../../../../components/Loader/Loader.vue.js";
 const _hoisted_1 = {
   key: 0,