@ozdao/martyrs 0.2.602 → 0.2.603

package/dist/martyrs/src/modules/music/music.client.js

@@ -6,19 +6,20 @@ import * as playlists from "./store/playlists.js";
 import * as search from "./store/search.js";
 import * as tracks from "./store/tracks.js";
 import addRoutes from "../core/views/router/addRoutes.js";
-import { getRoutes } from "./music.router.js";
-import _sfc_main$c from "./components/layouts/MusicBottomPlayer.vue.js";
-import _sfc_main$9 from "./components/pages/Album.vue.js";
-import _sfc_main$a from "./components/pages/Artist.vue.js";
-import _sfc_main$b from "./components/pages/MusicHome.vue.js";
-import _sfc_main$6 from "./components/pages/MusicLibrary.vue.js";
-import _sfc_main$5 from "./components/pages/TrackCreate.vue.js";
-import _sfc_main$8 from "./components/pages/Playlist.vue.js";
+import { getRoutes } from "./router/music.router.js";
+import _sfc_main$d from "./components/layouts/MusicBottomPlayer.vue.js";
+import _sfc_main$a from "./components/pages/Album.vue.js";
+import _sfc_main$b from "./components/pages/Artist.vue.js";
+import _sfc_main$c from "./components/pages/MusicHome.vue.js";
+import _sfc_main$7 from "./components/pages/MusicLibrary.vue.js";
+import _sfc_main$6 from "./components/pages/TrackCreate.vue.js";
+import _sfc_main$9 from "./components/pages/Playlist.vue.js";
 import SearchResults from "./components/pages/SearchResults.vue.js";
-import _sfc_main$7 from "./components/pages/Track.vue.js";
+import _sfc_main$8 from "./components/pages/Track.vue.js";
 import MusicPlayer from "./components/player/MusicPlayer.vue.js";
 import TrackProgress from "./components/player/TrackProgress.vue.js";
 import VolumeControl from "./components/player/VolumeControl.vue.js";
+import _sfc_main$5 from "./components/sections/PopularTracks.vue.js";
 import AlbumCard from "./components/cards/AlbumCard.vue.js";
 import ArtistCard from "./components/cards/ArtistCard.vue.js";
 import PlaylistCard from "./components/cards/PlaylistCard.vue.js";
@@ -74,20 +75,22 @@ const ModuleMusic = {
     },
     components: {
       // Layouts
-      MusicBottomPlayer: _sfc_main$c,
+      MusicBottomPlayer: _sfc_main$d,
       // Pages
-      MusicHome: _sfc_main$b,
+      MusicHome: _sfc_main$c,
       SearchResults,
-      Artist: _sfc_main$a,
-      Album: _sfc_main$9,
-      Playlist: _sfc_main$8,
-      Track: _sfc_main$7,
-      MusicLibrary: _sfc_main$6,
-      TrackCreate: _sfc_main$5,
+      Artist: _sfc_main$b,
+      Album: _sfc_main$a,
+      Playlist: _sfc_main$9,
+      Track: _sfc_main$8,
+      MusicLibrary: _sfc_main$7,
+      TrackCreate: _sfc_main$6,
       // Player Components
       MusicPlayer,
       TrackProgress,
       VolumeControl,
+      // Sections
+      PopularTracks: _sfc_main$5,
       // Cards
       TrackListCard: _sfc_main$4,
       AlbumCard,
@@ -103,23 +106,24 @@ const ModuleMusic = {
   }
 };
 export {
-  _sfc_main$9 as Album,
+  _sfc_main$a as Album,
   AlbumCard,
   _sfc_main$2 as AlbumForm,
-  _sfc_main$a as Artist,
+  _sfc_main$b as Artist,
   ArtistCard,
   _sfc_main$3 as ArtistForm,
-  _sfc_main$c as MusicBottomPlayer,
-  _sfc_main$b as MusicHome,
-  _sfc_main$6 as MusicLibrary,
+  _sfc_main$d as MusicBottomPlayer,
+  _sfc_main$c as MusicHome,
+  _sfc_main$7 as MusicLibrary,
   MusicPlayer,
-  _sfc_main$8 as Playlist,
+  _sfc_main$9 as Playlist,
   PlaylistCard,
   _sfc_main$1 as PlaylistForm,
+  _sfc_main$5 as PopularTracks,
   SearchForm,
   SearchResults,
-  _sfc_main$7 as Track,
-  _sfc_main$5 as TrackCreate,
+  _sfc_main$8 as Track,
+  _sfc_main$6 as TrackCreate,
   _sfc_main as TrackForm,
   _sfc_main$4 as TrackListCard,
   TrackProgress,

package/dist/martyrs/src/modules/music/music.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"music.client.js","sources":["../../../../../src/modules/music/music.client.js"],"sourcesContent":["// Store modules\nimport * as storeAlbums from './store/albums.js';\nimport * as storeArtists from './store/artists.js';\nimport * as storeGenres from './store/genres.js';\nimport * as storePlayer from './store/player.js';\nimport * as storePlaylists from './store/playlists.js';\nimport * as storeSearch from './store/search.js';\nimport * as storeTracks from './store/tracks.js';\n\n// Router\nimport addRoutes from '@martyrs/src/modules/core/views/router/addRoutes.js';\nimport { getRoutes } from './music.router.js';\n\n// Layouts\nimport MusicBottomPlayer from './components/layouts/MusicBottomPlayer.vue';\n\n// Pages\nimport Album from './components/pages/Album.vue';\nimport Artist from './components/pages/Artist.vue';\nimport MusicHome from './components/pages/MusicHome.vue';\nimport MusicLibrary from './components/pages/MusicLibrary.vue';\nimport TrackCreate from './components/pages/TrackCreate.vue';\nimport Playlist from './components/pages/Playlist.vue';\nimport SearchResults from './components/pages/SearchResults.vue';\nimport Track from './components/pages/Track.vue';\n\n// Components - Player\nimport MusicPlayer from './components/player/MusicPlayer.vue';\nimport TrackProgress from './components/player/TrackProgress.vue';\nimport VolumeControl from './components/player/VolumeControl.vue';\n\n// Components - Cards\nimport AlbumCard from './components/cards/AlbumCard.vue';\nimport ArtistCard from './components/cards/ArtistCard.vue';\nimport PlaylistCard from './components/cards/PlaylistCard.vue';\nimport TrackListCard from './components/cards/TrackListCard.vue';\n\n\n// Components - Forms\nimport ArtistForm from './components/forms/ArtistForm.vue';\nimport AlbumForm from './components/forms/AlbumForm.vue';\nimport PlaylistForm from './components/forms/PlaylistForm.vue';\nimport SearchForm from './components/forms/SearchForm.vue';\nimport TrackForm from './components/forms/TrackForm.vue';\n\n// WebSocket integration for streaming\nimport wsManager from '@martyrs/src/modules/core/views/classes/ws.manager.js';\n\n/**\n * Initialize Music module on client-side\n * @param {Object} app - Vue app instance\n * @param {Object} store - Global store instance\n * @param {Object} router - Vue router instance\n * @param {Object} config - Configuration options\n * @param {Object} options - Additional options\n */\nfunction initializeMusic(app, store, router, config, options = {}) {\n  const routes = getRoutes(options);\n  routes.forEach(({ parentName, config }) => {\n    addRoutes(router, { ...config, parentName });\n  });\n\n  // Register store modules\n  store.addStore('tracks', storeTracks);\n  store.addStore('playlists', storePlaylists);\n  store.addStore('albums', storeAlbums);\n  store.addStore('artists', storeArtists);\n  store.addStore('genres', storeGenres);\n  store.addStore('player', storePlayer);\n  store.addStore('search', storeSearch);\n\n  // Set up WebSocket subscription for music streaming\n  if (options.enableStreaming !== false && app.config.globalProperties.WSS_URL) {\n    wsManager.initialize({\n      wsUrl: process.env.WSS_URL,\n      maxReconnectAttempts: 10,\n      reconnectDelay: 2000,\n    });\n\n    // Subscribe to music streaming module when authenticated\n    if (options.userId) {\n      wsManager\n        .connect(options.userId)\n        .then(() => {\n          wsManager.subscribeModule('music-streaming');\n        })\n        .catch(err => {\n          console.error('Failed to connect to WebSocket for music streaming:', err);\n        });\n    }\n  }\n\n  // Register global components if needed\n  app.component('MusicPlayer', MusicPlayer);\n}\n\n// Module export\nconst ModuleMusic = {\n  initialize: initializeMusic,\n  views: {\n    store: {\n      storeTracks,\n      storePlaylists,\n      storeAlbums,\n      storeArtists,\n      storeGenres,\n      storePlayer,\n      storeSearch,\n    },\n    router: {\n      getRoutes,\n    },\n    components: {\n      // Layouts\n      MusicBottomPlayer,\n      // Pages\n      MusicHome,\n      SearchResults,\n      Artist,\n      Album,\n      Playlist,\n      Track,\n      MusicLibrary,\n      TrackCreate,\n      // Player Components\n      MusicPlayer,\n      TrackProgress,\n      VolumeControl,\n      // Cards\n      TrackListCard,\n      AlbumCard,\n      PlaylistCard,\n      ArtistCard,\n      // Forms\n      ArtistForm,\n      AlbumForm,\n      PlaylistForm,\n      SearchForm,\n      TrackForm,\n    },\n  },\n};\n\n// Named exports for direct component imports\nexport {\n  AlbumCard,\n  Album,\n  ArtistCard,\n  Artist,\n  // Pages\n  MusicHome,\n  // Layout\n  MusicBottomPlayer,\n  MusicLibrary,\n  // Player Components\n  MusicPlayer,\n  TrackCreate,\n  PlaylistCard,\n  Playlist,\n  // Forms\n  ArtistForm,\n  AlbumForm,\n  PlaylistForm,\n  SearchForm,\n  SearchResults,\n  // Cards\n  TrackListCard,\n  Track,\n  TrackForm,\n  TrackProgress,\n  VolumeControl,\n  // Router\n  getRoutes,\n  storeAlbums,\n  storeArtists,\n  storeGenres,\n  storePlayer,\n  storePlaylists,\n  storeSearch,\n  // Store modules\n  storeTracks,\n};\n\n// Default export\nexport default ModuleMusic;\n"],"names":["config","storeTracks","storePlaylists","storeAlbums","storeArtists","storeGenres","storePlayer","storeSearch","MusicBottomPlayer","MusicHome","Artist","Album","Playlist","Track","MusicLibrary","TrackCreate","TrackListCard","ArtistForm","AlbumForm","PlaylistForm","TrackForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAS,gBAAgB,KAAK,OAAO,QAAQ,QAAQ,UAAU,IAAI;AACjE,QAAM,SAAS,UAAU,OAAO;AAChC,SAAO,QAAQ,CAAC,EAAE,YAAY,QAAAA,QAAM,MAAO;AACzC,cAAU,QAAQ,EAAE,GAAGA,SAAQ,WAAU,CAAE;AAAA,EAC7C,CAAC;AAGD,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,aAAaC,SAAc;AAC1C,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,WAAWC,OAAY;AACtC,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,UAAUC,MAAW;AAGpC,MAAI,QAAQ,oBAAoB,SAAS,IAAI,OAAO,iBAAiB,SAAS;AAC5E,cAAU,WAAW;AAAA,MACnB,OAAO,QAAQ,IAAI;AAAA,MACnB,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,IACtB,CAAK;AAGD,QAAI,QAAQ,QAAQ;AAClB,gBACG,QAAQ,QAAQ,MAAM,EACtB,KAAK,MAAM;AACV,kBAAU,gBAAgB,iBAAiB;AAAA,MAC7C,CAAC,EACA,MAAM,SAAO;AACZ,gBAAQ,MAAM,uDAAuD,GAAG;AAAA,MAC1E,CAAC;AAAA,IACL;AAAA,EACF;AAGA,MAAI,UAAU,eAAe,WAAW;AAC1C;AAGK,MAAC,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,OAAO;AAAA,MACX,aAAMN;AAAAA,MACN,gBAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,cAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,aAAMC;AAAAA,IACN;AAAA,IACI,QAAQ;AAAA,MACN;AAAA,IACN;AAAA,IACI,YAAY;AAAA;AAAA,MAEhB,mBAAMC;AAAAA;AAAAA,MAEN,WAAMC;AAAAA,MACA;AAAA,MACN,QAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,UAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,cAAMC;AAAAA,MACN,aAAMC;AAAAA;AAAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEN,eAAMC;AAAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEN,YAAMC;AAAAA,MACN,WAAMC;AAAAA,MACN,cAAMC;AAAAA,MACA;AAAA,MACN,WAAMC;AAAAA,IACN;AAAA,EACA;AACA;"}
+{"version":3,"file":"music.client.js","sources":["../../../../../src/modules/music/music.client.js"],"sourcesContent":["// Store modules\nimport * as storeAlbums from './store/albums.js';\nimport * as storeArtists from './store/artists.js';\nimport * as storeGenres from './store/genres.js';\nimport * as storePlayer from './store/player.js';\nimport * as storePlaylists from './store/playlists.js';\nimport * as storeSearch from './store/search.js';\nimport * as storeTracks from './store/tracks.js';\n\n// Router\nimport addRoutes from '@martyrs/src/modules/core/views/router/addRoutes.js';\nimport { getRoutes } from './router/music.router.js';\n\n// Layouts\nimport MusicBottomPlayer from './components/layouts/MusicBottomPlayer.vue';\n\n// Pages\nimport Album from './components/pages/Album.vue';\nimport Artist from './components/pages/Artist.vue';\nimport MusicHome from './components/pages/MusicHome.vue';\nimport MusicLibrary from './components/pages/MusicLibrary.vue';\nimport TrackCreate from './components/pages/TrackCreate.vue';\nimport Playlist from './components/pages/Playlist.vue';\nimport SearchResults from './components/pages/SearchResults.vue';\nimport Track from './components/pages/Track.vue';\n\n// Components - Player\nimport MusicPlayer from './components/player/MusicPlayer.vue';\nimport TrackProgress from './components/player/TrackProgress.vue';\nimport VolumeControl from './components/player/VolumeControl.vue';\n\n// Components - Sections\nimport PopularTracks from './components/sections/PopularTracks.vue';\n\n// Components - Cards\nimport AlbumCard from './components/cards/AlbumCard.vue';\nimport ArtistCard from './components/cards/ArtistCard.vue';\nimport PlaylistCard from './components/cards/PlaylistCard.vue';\nimport TrackListCard from './components/cards/TrackListCard.vue';\n\n\n// Components - Forms\nimport ArtistForm from './components/forms/ArtistForm.vue';\nimport AlbumForm from './components/forms/AlbumForm.vue';\nimport PlaylistForm from './components/forms/PlaylistForm.vue';\nimport SearchForm from './components/forms/SearchForm.vue';\nimport TrackForm from './components/forms/TrackForm.vue';\n\n// WebSocket integration for streaming\nimport wsManager from '@martyrs/src/modules/core/views/classes/ws.manager.js';\n\n/**\n * Initialize Music module on client-side\n * @param {Object} app - Vue app instance\n * @param {Object} store - Global store instance\n * @param {Object} router - Vue router instance\n * @param {Object} config - Configuration options\n * @param {Object} options - Additional options\n */\nfunction initializeMusic(app, store, router, config, options = {}) {\n  const routes = getRoutes(options);\n  routes.forEach(({ parentName, config }) => {\n    addRoutes(router, { ...config, parentName });\n  });\n\n  // Register store modules\n  store.addStore('tracks', storeTracks);\n  store.addStore('playlists', storePlaylists);\n  store.addStore('albums', storeAlbums);\n  store.addStore('artists', storeArtists);\n  store.addStore('genres', storeGenres);\n  store.addStore('player', storePlayer);\n  store.addStore('search', storeSearch);\n\n  // Set up WebSocket subscription for music streaming\n  if (options.enableStreaming !== false && app.config.globalProperties.WSS_URL) {\n    wsManager.initialize({\n      wsUrl: process.env.WSS_URL,\n      maxReconnectAttempts: 10,\n      reconnectDelay: 2000,\n    });\n\n    // Subscribe to music streaming module when authenticated\n    if (options.userId) {\n      wsManager\n        .connect(options.userId)\n        .then(() => {\n          wsManager.subscribeModule('music-streaming');\n        })\n        .catch(err => {\n          console.error('Failed to connect to WebSocket for music streaming:', err);\n        });\n    }\n  }\n\n  // Register global components if needed\n  app.component('MusicPlayer', MusicPlayer);\n}\n\n// Module export\nconst ModuleMusic = {\n  initialize: initializeMusic,\n  views: {\n    store: {\n      storeTracks,\n      storePlaylists,\n      storeAlbums,\n      storeArtists,\n      storeGenres,\n      storePlayer,\n      storeSearch,\n    },\n    router: {\n      getRoutes,\n    },\n    components: {\n      // Layouts\n      MusicBottomPlayer,\n      // Pages\n      MusicHome,\n      SearchResults,\n      Artist,\n      Album,\n      Playlist,\n      Track,\n      MusicLibrary,\n      TrackCreate,\n      // Player Components\n      MusicPlayer,\n      TrackProgress,\n      VolumeControl,\n      // Sections\n      PopularTracks,\n      // Cards\n      TrackListCard,\n      AlbumCard,\n      PlaylistCard,\n      ArtistCard,\n      // Forms\n      ArtistForm,\n      AlbumForm,\n      PlaylistForm,\n      SearchForm,\n      TrackForm,\n    },\n  },\n};\n\n// Named exports for direct component imports\nexport {\n  AlbumCard,\n  Album,\n  ArtistCard,\n  Artist,\n  // Sections\n  PopularTracks,\n  // Pages\n  MusicHome,\n  // Layout\n  MusicBottomPlayer,\n  MusicLibrary,\n  // Player Components\n  MusicPlayer,\n  TrackCreate,\n  PlaylistCard,\n  Playlist,\n  // Forms\n  ArtistForm,\n  AlbumForm,\n  PlaylistForm,\n  SearchForm,\n  SearchResults,\n  // Cards\n  TrackListCard,\n  Track,\n  TrackForm,\n  TrackProgress,\n  VolumeControl,\n  // Router\n  getRoutes,\n  storeAlbums,\n  storeArtists,\n  storeGenres,\n  storePlayer,\n  storePlaylists,\n  storeSearch,\n  // Store modules\n  storeTracks,\n};\n\n// Default export\nexport default ModuleMusic;\n"],"names":["config","storeTracks","storePlaylists","storeAlbums","storeArtists","storeGenres","storePlayer","storeSearch","MusicBottomPlayer","MusicHome","Artist","Album","Playlist","Track","MusicLibrary","TrackCreate","PopularTracks","TrackListCard","ArtistForm","AlbumForm","PlaylistForm","TrackForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,SAAS,gBAAgB,KAAK,OAAO,QAAQ,QAAQ,UAAU,IAAI;AACjE,QAAM,SAAS,UAAU,OAAO;AAChC,SAAO,QAAQ,CAAC,EAAE,YAAY,QAAAA,QAAM,MAAO;AACzC,cAAU,QAAQ,EAAE,GAAGA,SAAQ,WAAU,CAAE;AAAA,EAC7C,CAAC;AAGD,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,aAAaC,SAAc;AAC1C,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,WAAWC,OAAY;AACtC,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,UAAUC,MAAW;AAGpC,MAAI,QAAQ,oBAAoB,SAAS,IAAI,OAAO,iBAAiB,SAAS;AAC5E,cAAU,WAAW;AAAA,MACnB,OAAO,QAAQ,IAAI;AAAA,MACnB,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,IACtB,CAAK;AAGD,QAAI,QAAQ,QAAQ;AAClB,gBACG,QAAQ,QAAQ,MAAM,EACtB,KAAK,MAAM;AACV,kBAAU,gBAAgB,iBAAiB;AAAA,MAC7C,CAAC,EACA,MAAM,SAAO;AACZ,gBAAQ,MAAM,uDAAuD,GAAG;AAAA,MAC1E,CAAC;AAAA,IACL;AAAA,EACF;AAGA,MAAI,UAAU,eAAe,WAAW;AAC1C;AAGK,MAAC,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,OAAO;AAAA,MACX,aAAMN;AAAAA,MACN,gBAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,cAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,aAAMC;AAAAA,IACN;AAAA,IACI,QAAQ;AAAA,MACN;AAAA,IACN;AAAA,IACI,YAAY;AAAA;AAAA,MAEhB,mBAAMC;AAAAA;AAAAA,MAEN,WAAMC;AAAAA,MACA;AAAA,MACN,QAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,UAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,cAAMC;AAAAA,MACN,aAAMC;AAAAA;AAAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEN,eAAMC;AAAAA;AAAAA,MAEN,eAAMC;AAAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEN,YAAMC;AAAAA,MACN,WAAMC;AAAAA,MACN,cAAMC;AAAAA,MACA;AAAA,MACN,WAAMC;AAAAA,IACN;AAAA,EACA;AACA;"}

package/dist/martyrs/src/modules/music/{music.router.js → router/music.router.js}

@@ -1,4 +1,4 @@
-import _sfc_main from "./components/layouts/MusicBottomPlayer.vue.js";
+import _sfc_main from "../components/layouts/MusicBottomPlayer.vue.js";
 function createArtistRoutes() {
   return [
     {
@@ -6,7 +6,7 @@ function createArtistRoutes() {
       name: "artist-create",
       component: () => import(
         /* webpackChunkName: 'music-artist-create' */
-        "./components/pages/ArtistCreate.vue.js"
+        "../components/pages/ArtistCreate.vue.js"
       ),
       meta: {
         title: "Create Artist",
@@ -18,7 +18,7 @@ function createArtistRoutes() {
       name: "artist-edit",
       component: () => import(
         /* webpackChunkName: 'music-artist-edit' */
-        "./components/pages/ArtistEdit.vue.js"
+        "../components/pages/ArtistEdit.vue.js"
       ),
       props: true,
       meta: {
@@ -31,7 +31,7 @@ function createArtistRoutes() {
       name: "artist",
       component: () => import(
         /* webpackChunkName: 'music-artist' */
-        "./components/pages/Artist.vue.js"
+        "../components/pages/Artist.vue.js"
       ),
       props: true,
       meta: {
@@ -47,7 +47,7 @@ function createAlbumRoutes() {
       name: "album-create",
       component: () => import(
         /* webpackChunkName: 'music-album-create' */
-        "./components/pages/AlbumCreate.vue.js"
+        "../components/pages/AlbumCreate.vue.js"
       ),
       meta: {
         title: "Create Album",
@@ -59,7 +59,7 @@ function createAlbumRoutes() {
       name: "album-edit",
       component: () => import(
         /* webpackChunkName: 'music-album-edit' */
-        "./components/pages/AlbumEdit.vue.js"
+        "../components/pages/AlbumEdit.vue.js"
       ),
       props: true,
       meta: {
@@ -72,7 +72,7 @@ function createAlbumRoutes() {
       name: "album",
       component: () => import(
         /* webpackChunkName: 'music-album' */
-        "./components/pages/Album.vue.js"
+        "../components/pages/Album.vue.js"
       ),
       props: true,
       meta: {
@@ -88,7 +88,7 @@ function createTrackRoutes() {
       name: "track-create",
       component: () => import(
         /* webpackChunkName: 'music-track-create' */
-        "./components/pages/TrackCreate.vue.js"
+        "../components/pages/TrackCreate.vue.js"
       ),
       meta: {
         title: "Create Track",
@@ -100,7 +100,7 @@ function createTrackRoutes() {
       name: "track-edit",
       component: () => import(
         /* webpackChunkName: 'music-track-edit' */
-        "./components/pages/TrackEdit.vue.js"
+        "../components/pages/TrackEdit.vue.js"
       ),
       props: true,
       meta: {
@@ -113,7 +113,7 @@ function createTrackRoutes() {
       name: "track",
       component: () => import(
         /* webpackChunkName: 'music-track' */
-        "./components/pages/Track.vue.js"
+        "../components/pages/Track.vue.js"
       ),
       props: true,
       meta: {
@@ -129,7 +129,7 @@ function createPlaylistRoutes() {
       name: "playlist-create",
       component: () => import(
         /* webpackChunkName: 'music-playlist-create' */
-        "./components/pages/PlaylistCreate.vue.js"
+        "../components/pages/PlaylistCreate.vue.js"
       ),
       meta: {
         title: "Create Playlist",
@@ -141,7 +141,7 @@ function createPlaylistRoutes() {
       name: "playlist-edit",
       component: () => import(
         /* webpackChunkName: 'music-playlist-edit' */
-        "./components/pages/PlaylistEdit.vue.js"
+        "../components/pages/PlaylistEdit.vue.js"
       ),
       props: true,
       meta: {
@@ -154,7 +154,7 @@ function createPlaylistRoutes() {
       name: "playlist",
       component: () => import(
         /* webpackChunkName: 'music-playlist' */
-        "./components/pages/Playlist.vue.js"
+        "../components/pages/Playlist.vue.js"
       ),
       props: true,
       meta: {
@@ -170,7 +170,7 @@ function buildMusicRoutes() {
       name: "music-home",
       component: () => import(
         /* webpackChunkName: 'music-home' */
-        "./components/pages/MusicHome.vue.js"
+        "../components/pages/MusicHome.vue.js"
       ),
       meta: {
         title: "Music Home"
@@ -181,7 +181,7 @@ function buildMusicRoutes() {
       name: "music-search",
       component: () => import(
         /* webpackChunkName: 'music-search' */
-        "./components/pages/SearchResults.vue.js"
+        "../components/pages/SearchResults.vue.js"
       ),
       meta: {
         title: "Search Music"
@@ -192,7 +192,7 @@ function buildMusicRoutes() {
       name: "music-library",
       component: () => import(
         /* webpackChunkName: 'music-library' */
-        "./components/pages/MusicLibrary.vue.js"
+        "../components/pages/MusicLibrary.vue.js"
       ),
       meta: {
         title: "My Library",

package/dist/martyrs/src/modules/music/router/music.router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"music.router.js","sources":["../../../../../../src/modules/music/router/music.router.js"],"sourcesContent":["import PlayerMusic from  '../components/layouts/MusicBottomPlayer.vue'\n\n\nfunction createArtistRoutes() {\n  return [\n    {\n      path: 'artists/create',\n      name: 'artist-create',\n      component: () => import(/* webpackChunkName: 'music-artist-create' */ '../components/pages/ArtistCreate.vue'),\n      meta: {\n        title: 'Create Artist',\n        requiresAuth: true,\n      },\n    },\n    {\n      path: 'artists/:url/edit',\n      name: 'artist-edit',\n      component: () => import(/* webpackChunkName: 'music-artist-edit' */ '../components/pages/ArtistEdit.vue'),\n      props: true,\n      meta: {\n        title: 'Edit Artist',\n        requiresAuth: true,\n      },\n    },\n    {\n      path: 'artists/:url',\n      name: 'artist',\n      component: () => import(/* webpackChunkName: 'music-artist' */ '../components/pages/Artist.vue'),\n      props: true,\n      meta: {\n        title: 'Artist',\n      },\n    },\n  ];\n}\n\nfunction createAlbumRoutes() {\n  return [\n    {\n      path: 'albums/create',\n      name: 'album-create',\n      component: () => import(/* webpackChunkName: 'music-album-create' */ '../components/pages/AlbumCreate.vue'),\n      meta: {\n        title: 'Create Album',\n        requiresAuth: true,\n      },\n    },\n    {\n      path: 'albums/:url/edit',\n      name: 'album-edit',\n      component: () => import(/* webpackChunkName: 'music-album-edit' */ '../components/pages/AlbumEdit.vue'),\n      props: true,\n      meta: {\n        title: 'Edit Album',\n        requiresAuth: true,\n      },\n    },\n    {\n      path: 'albums/:url',\n      name: 'album',\n      component: () => import(/* webpackChunkName: 'music-album' */ '../components/pages/Album.vue'),\n      props: true,\n      meta: {\n        title: 'Album',\n      },\n    },\n  ];\n}\n\nfunction createTrackRoutes() {\n  return [\n    {\n      path: 'tracks/create',\n      name: 'track-create',\n      component: () => import(/* webpackChunkName: 'music-track-create' */ '../components/pages/TrackCreate.vue'),\n      meta: {\n        title: 'Create Track',\n        requiresAuth: true,\n      },\n    },\n    {\n      path: 'tracks/:url/edit',\n      name: 'track-edit',\n      component: () => import(/* webpackChunkName: 'music-track-edit' */ '../components/pages/TrackEdit.vue'),\n      props: true,\n      meta: {\n        title: 'Edit Track',\n        requiresAuth: true,\n      },\n    },\n    {\n      path: 'tracks/:url',\n      name: 'track',\n      component: () => import(/* webpackChunkName: 'music-track' */ '../components/pages/Track.vue'),\n      props: true,\n      meta: {\n        title: 'Track',\n      },\n    },\n  ];\n}\n\nfunction createPlaylistRoutes() {\n  return [\n    {\n      path: 'playlists/create',\n      name: 'playlist-create',\n      component: () => import(/* webpackChunkName: 'music-playlist-create' */ '../components/pages/PlaylistCreate.vue'),\n      meta: {\n        title: 'Create Playlist',\n        requiresAuth: true,\n      },\n    },\n    {\n      path: 'playlists/:url/edit',\n      name: 'playlist-edit',\n      component: () => import(/* webpackChunkName: 'music-playlist-edit' */ '../components/pages/PlaylistEdit.vue'),\n      props: true,\n      meta: {\n        title: 'Edit Playlist',\n        requiresAuth: true,\n      },\n    },\n    {\n      path: 'playlists/:url',\n      name: 'playlist',\n      component: () => import(/* webpackChunkName: 'music-playlist' */ '../components/pages/Playlist.vue'),\n      props: true,\n      meta: {\n        title: 'Playlist',\n      },\n    },\n  ];\n}\n\nfunction buildMusicRoutes() {\n  return [\n    {\n      path: '',\n      name: 'music-home',\n      component: () => import(/* webpackChunkName: 'music-home' */ '../components/pages/MusicHome.vue'),\n      meta: {\n        title: 'Music Home',\n      },\n    },\n    {\n      path: 'search',\n      name: 'music-search',\n      component: () => import(/* webpackChunkName: 'music-search' */ '../components/pages/SearchResults.vue'),\n      meta: {\n        title: 'Search Music',\n      },\n    },\n    {\n      path: 'library',\n      name: 'music-library',\n      component: () => import(/* webpackChunkName: 'music-library' */ '../components/pages/MusicLibrary.vue'),\n      meta: {\n        title: 'My Library',\n        requiresAuth: true,\n      },\n    },\n    ...createArtistRoutes(),\n    ...createAlbumRoutes(),\n    ...createTrackRoutes(),\n    ...createPlaylistRoutes(),\n  ];\n}\n\nexport function getRoutes(options = {}) {\n  const route = options.route || 'Home';\n  const routes = [];\n\n  routes.push({\n    parentName: route,\n    config: {\n      basePath: options.basePath || 'music',\n      meta: {\n        player: PlayerMusic,\n      },\n      routes: buildMusicRoutes(options),\n    },\n  });\n\n  return routes;\n}\n\nexport default { getRoutes };\n"],"names":["PlayerMusic"],"mappings":"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"}

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

@@ -1,31 +1,27 @@
-import { inject, ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, unref, createCommentVNode, toDisplayString, withCtx, Fragment, renderList, createBlock, createTextVNode } from "vue";
+import { inject, ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, createCommentVNode, createTextVNode } from "vue";
 import { useRouter } from "vue-router";
 import _sfc_main$2 from "../../../../components/Popup/Popup.vue.js";
+import Button from "../../../../components/Button/Button.vue2.js";
 import NotificationItem from "../blocks/NotificationItem.vue.js";
 import { state } from "../../../auth/views/store/auth.js";
 import _sfc_main$1 from "../../../icons/entities/IconBell.vue.js";
 /* empty css                       */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "notification-badge-container" };
-const _hoisted_2 = ["aria-label"];
+const _hoisted_2 = { class: "cols-1 gap-thin o-y-scroll" };
 const _hoisted_3 = {
-  key: 0,
-  class: "button-counter flex flex-center"
-};
-const _hoisted_4 = { class: "cols-1 gap-thin o-y-scroll" };
-const _hoisted_5 = {
   key: 0,
   class: "notifications-loading"
 };
-const _hoisted_6 = {
+const _hoisted_4 = {
   key: 1,
   class: "notifications-empty"
 };
-const _hoisted_7 = {
+const _hoisted_5 = {
   key: 2,
   class: "flex-column flex gap-thin"
 };
-const _hoisted_8 = { class: "flex-nowrap flex gap-thin" };
+const _hoisted_6 = { class: "flex-nowrap flex gap-thin" };
 const _sfc_main = {
   __name: "NotificationBadge",
   props: {
@@ -79,19 +75,22 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("button", {
-          class: "i-medium notification-button",
-          onClick: toggleNotifications,
-          "aria-label": unref(unreadCount) > 0 ? `${unref(unreadCount)} unread notifications` : "No unread notifications"
-        }, [
-          createVNode(_sfc_main$1, {
-            class: "notification-icon i-medium",
-            fill: __props.fill
-          }, null, 8, ["fill"]),
-          unref(unreadCount) > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            createElementVNode("span", null, toDisplayString(unref(unreadCount) > 99 ? "99+" : unref(unreadCount)), 1)
-          ])) : createCommentVNode("", true)
-        ], 8, _hoisted_2),
+        createVNode(Button, {
+          class: "pd-zero bg-transparent",
+          "aria-label": unref(unreadCount) > 0 ? `${unref(unreadCount)} unread notifications` : "No unread notifications",
+          submit: () => toggleNotifications(),
+          counter: unref(unreadCount) > 0 ? unref(unreadCount) > 99 ? "99+" : unref(unreadCount) : null,
+          showSucces: false,
+          showLoader: false
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$1, {
+              class: "notification-icon i-medium",
+              fill: __props.fill
+            }, null, 8, ["fill"])
+          ]),
+          _: 1
+        }, 8, ["aria-label", "submit", "counter"]),
         createVNode(_sfc_main$2, {
           title: "Notifications",
           onClosePopup: closeNotifications,
@@ -100,8 +99,8 @@ const _sfc_main = {
           class: "bg-white h-min-100 w-100 w-max-30r pd-medium"
         }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_4, [
-              unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_5, " Loading... ")) : unref(notifications).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_6, " No notifications ")) : (openBlock(), createElementBlock("div", _hoisted_7, [
+            createElementVNode("div", _hoisted_2, [
+              unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_3, " Loading... ")) : unref(notifications).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, " No notifications ")) : (openBlock(), createElementBlock("div", _hoisted_5, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(recentNotifications.value, (notification) => {
                   return openBlock(), createBlock(NotificationItem, {
                     key: notification._id,
@@ -109,7 +108,7 @@ const _sfc_main = {
                     onClick: ($event) => handleNotificationClick(notification)
                   }, null, 8, ["notification", "onClick"]);
                 }), 128)),
-                createElementVNode("div", _hoisted_8, [
+                createElementVNode("div", _hoisted_6, [
                   unref(unreadCount) > 0 ? (openBlock(), createElementBlock("button", {
                     key: 0,
                     class: "w-100 bg-second t-white radius-small button",
@@ -135,7 +134,7 @@ const _sfc_main = {
     };
   }
 };
-const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bea4263c"]]);
+const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c5966e8d"]]);
 export {
   NotificationBadge as default
 };

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

@@ -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=\"`/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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=\"pd-zero bg-transparent\"\n      :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n      :submit=\"() => toggleNotifications()\"\n      :counter=\"unreadCount > 0 ? (unreadCount > 99 ? '99+' : unreadCount) : null\"\n      :showSucces=\"false\"\n      :showLoader=\"false\"\n    >\n      <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\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';\nimport Button from '@martyrs/src/components/Button/Button.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-icon {\n  font-size: 1.4rem;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,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

@@ -1,21 +1,25 @@
-import { inject, reactive, ref, computed, onMounted, createElementBlock, openBlock, createElementVNode, unref, createVNode, Fragment, renderList, toDisplayString, createBlock, createCommentVNode, withCtx, createTextVNode } from "vue";
+import { inject, reactive, ref, computed, onMounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, normalizeClass, toDisplayString, Fragment, unref, renderList, createBlock, 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 Button from "../../../../components/Button/Button.vue2.js";
 import Loader from "../../../../components/Loader/Loader.vue2.js";
-const _hoisted_1 = {
+const _hoisted_1 = { class: "bg-light radius-small pd-small mn-b-small" };
+const _hoisted_2 = { class: "flex flex-v-center flex-between" };
+const _hoisted_3 = { class: "flex flex-v-center gap-small" };
+const _hoisted_4 = { class: "flex-column flex gap-micro" };
+const _hoisted_5 = {
   key: 0,
   class: "pd-large t-center t-transp"
 };
-const _hoisted_2 = {
+const _hoisted_6 = {
   key: 1,
   class: "gap-thin flex-column flex"
 };
-const _hoisted_3 = { class: "flex w-100 flex-v-center gap-small mn-r-small" };
-const _hoisted_4 = { class: "h4" };
-const _hoisted_5 = { class: "flex-column flex gap-micro" };
-const _hoisted_6 = { class: "fw-medium lh-1" };
-const _hoisted_7 = { class: "p-small t-transp lh-1" };
-const _hoisted_8 = { class: "flex flex-end gap-small mn-t-thin" };
+const _hoisted_7 = { class: "flex w-100 flex-v-center gap-small mn-r-small" };
+const _hoisted_8 = { class: "h4" };
+const _hoisted_9 = { class: "flex-column flex gap-micro" };
+const _hoisted_10 = { class: "fw-medium" };
+const _hoisted_11 = { class: "p-small t-transp" };
+const _hoisted_12 = { class: "flex flex-end gap-small mn-t-thin" };
 const _sfc_main = {
   __name: "NotificationPreferences",
   setup(__props) {
@@ -23,11 +27,44 @@ const _sfc_main = {
       preferences: storePreferences,
       loading,
       getPreferences,
-      updatePreferences
+      updatePreferences,
+      registerWebPush
     } = inject("useNotifications")();
     const preferences = reactive({ ...storePreferences.value });
     const originalPreferences = ref({});
     const saving = ref(false);
+    const pushPermission = ref(typeof window !== "undefined" && "Notification" in window ? Notification.permission : "default");
+    const pushEnabled = ref(pushPermission.value === "granted");
+    const pushStatusText = computed(() => {
+      if (pushPermission.value === "denied") return "Blocked by browser. Allow in site settings";
+      if (pushEnabled.value && pushPermission.value === "granted") return "Notifications are enabled";
+      return "Enable to receive push notifications";
+    });
+    const pushStatusClass = computed(() => {
+      if (pushPermission.value === "denied") return "t-red";
+      if (pushEnabled.value && pushPermission.value === "granted") return "t-green";
+      return "t-transp";
+    });
+    const togglePush = async (value) => {
+      if (value) {
+        try {
+          const permission = await Notification.requestPermission();
+          pushPermission.value = permission;
+          if (permission === "granted") {
+            pushEnabled.value = true;
+            registerWebPush().catch((err) => console.error("Web push registration error:", err));
+          } else {
+            pushEnabled.value = false;
+          }
+        } catch (error) {
+          console.error("Push permission error:", error);
+          pushPermission.value = Notification.permission;
+          pushEnabled.value = false;
+        }
+      } else {
+        pushEnabled.value = false;
+      }
+    };
     const hasChanges = computed(() => {
       return Object.keys(preferences).some(
         (key) => preferences[key] !== originalPreferences.value[key]
@@ -115,55 +152,77 @@ const _sfc_main = {
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _cache[1] || (_cache[1] = createElementVNode("p", { class: "t-transp mn-b-small" }, "Choose how you want to receive notifications", -1)),
-        unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createVNode(Loader)
-        ])) : (openBlock(), createElementBlock("div", _hoisted_2, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(preferences, (enabled, channelType) => {
-            return openBlock(), createElementBlock("div", {
-              key: channelType,
-              class: "flex flex-v-center flex-between bg-light radius-small pd-small"
-            }, [
-              createElementVNode("div", _hoisted_3, [
-                createElementVNode("div", _hoisted_4, toDisplayString(getChannelIcon(channelType)), 1),
-                createElementVNode("div", _hoisted_5, [
-                  createElementVNode("p", _hoisted_6, toDisplayString(getChannelName(channelType)), 1),
-                  createElementVNode("p", _hoisted_7, toDisplayString(getChannelDescription(channelType)), 1)
-                ])
-              ]),
-              createVNode(_sfc_main$1, {
-                mode: "switch",
-                radio: enabled,
-                "onUpdate:radio": ($event) => updatePreference(channelType, $event),
-                class: "flex-shrink-0"
-              }, null, 8, ["radio", "onUpdate:radio"])
-            ]);
-          }), 128)),
-          createElementVNode("div", _hoisted_8, [
-            hasChanges.value ? (openBlock(), createBlock(_sfc_main$2, {
-              key: 0,
-              submit: resetChanges,
-              showLoader: false,
-              showSucces: false,
-              class: "bg-white t-dark"
-            }, {
-              default: withCtx(() => _cache[0] || (_cache[0] = [
-                createTextVNode(" Cancel ")
-              ])),
-              _: 1
-            })) : createCommentVNode("", true),
-            createVNode(_sfc_main$2, {
-              submit: savePreferences,
-              validation: !hasChanges.value || saving.value,
-              class: "bg-main t-white"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(saving.value ? "Saving..." : "Save Changes"), 1)
-              ]),
-              _: 1
-            }, 8, ["validation"])
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, [
+              _cache[1] || (_cache[1] = createElementVNode("div", { class: "h4" }, "🔔", -1)),
+              createElementVNode("div", _hoisted_4, [
+                _cache[0] || (_cache[0] = createElementVNode("p", { class: "fw-medium" }, "Push Notifications", -1)),
+                createElementVNode("p", {
+                  class: normalizeClass(["p-small", pushStatusClass.value])
+                }, toDisplayString(pushStatusText.value), 3)
+              ])
+            ]),
+            createVNode(_sfc_main$1, {
+              mode: "switch",
+              radio: pushEnabled.value,
+              disabled: pushPermission.value === "denied",
+              "onUpdate:radio": togglePush,
+              class: "flex-shrink-0"
+            }, null, 8, ["radio", "disabled"])
           ])
-        ]))
+        ]),
+        pushEnabled.value && pushPermission.value === "granted" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _cache[3] || (_cache[3] = createElementVNode("p", { class: "t-transp mn-b-small" }, "Choose how you want to receive notifications", -1)),
+          unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(Loader)
+          ])) : (openBlock(), createElementBlock("div", _hoisted_6, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(preferences, (enabled, channelType) => {
+              return openBlock(), createElementBlock("div", {
+                key: channelType,
+                class: "flex flex-v-center flex-between bg-light radius-small pd-small"
+              }, [
+                createElementVNode("div", _hoisted_7, [
+                  createElementVNode("div", _hoisted_8, toDisplayString(getChannelIcon(channelType)), 1),
+                  createElementVNode("div", _hoisted_9, [
+                    createElementVNode("p", _hoisted_10, toDisplayString(getChannelName(channelType)), 1),
+                    createElementVNode("p", _hoisted_11, toDisplayString(getChannelDescription(channelType)), 1)
+                  ])
+                ]),
+                createVNode(_sfc_main$1, {
+                  mode: "switch",
+                  radio: enabled,
+                  "onUpdate:radio": ($event) => updatePreference(channelType, $event),
+                  class: "flex-shrink-0"
+                }, null, 8, ["radio", "onUpdate:radio"])
+              ]);
+            }), 128)),
+            createElementVNode("div", _hoisted_12, [
+              hasChanges.value ? (openBlock(), createBlock(Button, {
+                key: 0,
+                submit: resetChanges,
+                showLoader: false,
+                showSucces: false,
+                class: "bg-white t-dark"
+              }, {
+                default: withCtx(() => _cache[2] || (_cache[2] = [
+                  createTextVNode(" Cancel ")
+                ])),
+                _: 1
+              })) : createCommentVNode("", true),
+              createVNode(Button, {
+                submit: savePreferences,
+                validation: !hasChanges.value || saving.value,
+                class: "bg-main t-white"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(saving.value ? "Saving..." : "Save Changes"), 1)
+                ]),
+                _: 1
+              }, 8, ["validation"])
+            ])
+          ]))
+        ], 64)) : createCommentVNode("", true)
       ]);
     };
   }