@ozdao/martyrs 0.2.470 → 0.2.472

package/src/modules/globals/views/components/partials/Navigation.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 
 import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'
 
@@ -8,6 +8,7 @@ import * as globals from '@martyrs/src/modules/globals/views/store/globals'
 import * as auth from '@martyrs/src/modules/auth/views/store/auth'
 
 const router = useRouter()
+const route = useRoute()
 
 import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'
 import Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue'
@@ -60,11 +61,11 @@ const isSectionExpanded = (title) => {
   return expandedSections.value.includes(title)
 }
 
-watch(() => props.stateSidebar, (newValue) => {
-  if (!newValue) {
-    expandedSections.value = []
-  }
-})
+// watch(() => props.stateSidebar, (newValue) => {
+//   if (!newValue) {
+//     expandedSections.value = []
+//   }
+// })
 
 // Process route functions with globals and auth data
 const processRoute = (route) => {
@@ -119,10 +120,10 @@ const processRoute = (route) => {
         >
         <button
           class="transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center"
-          @click="item.route ? (isPhone ? (stateSidebar = false) : null, $route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : null) : null"
+          @click="item.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : null) : null"
           :class="[
               horizontal ? 'pd-thin' : '',
-              item.route && $route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
+              item.route && route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
               theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
             ]"
         >
@@ -172,11 +173,11 @@ const processRoute = (route) => {
             <li v-for="subItem in item.subItems" :key="subItem.title">
               
               <a 
-               @click="subItem.route ? (isPhone ? (stateSidebar = false) : null, $route.path !== processRoute(subItem.route) ? router.push(processRoute(subItem.route)) : null) : null"
+               @click="subItem.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(subItem.route) ? router.push(processRoute(subItem.route)) : null) : null"
                 href="#" 
                 class="transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
                 :class="[
-                  subItem.route && $route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
+                  subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
                     theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
                     ]"
               >

package/src/modules/globals/views/utils/vue-app-renderer.js

@@ -25,11 +25,15 @@ export function renderAndMountApp({ createApp }) {
       store.setInitialState(initialState);
     }
 
-    if (initialState && initialState.auth && initialState.auth.user) {
-      setAuthToken(initialState.auth.user.accessToken);
+    console.log('auth', initialState.auth)
+    if (initialState?.auth?.access?.token) {
+      setAuthToken(initialState.auth.access.token);
     } else {
+      store.auth.actions.resetState();
+      // await store.auth.removeCookie('user');
       await store.auth.actions.logout()
     }
+
    // app.config.globalProperties.$i18n.locale = router.currentRoute.value.params.locale
    // app.config.globalProperties.$i18n.locale = router.currentRoute.value.params.locale
     // If user browser locae supported then change locale
@@ -69,24 +73,11 @@ export async function render({ url, cookies, createApp }) {
   if (cookies.user) {  
     user = JSON.parse(cookies.user)
   }
-  
-  let auth = null
 
   if (user) {
     await store.auth.actions.initialize(user)
   } else {
-    // сделать вызов initial state и reset state
-    store.auth.state.user = {
-      _id: undefined,
-      username: '',
-      email: '',
-      phone: '',
-      password: '1',
-      passwordRepeat: ''
-    }
-
-    store.auth.state.access = { roles: null, token: null, status: false }
-    store.auth.state.accesses = []
+    store.auth.actions.resetState();
   }
 
   const html = await renderToString(app, sharedContext);

package/src/modules/icons/entities/IconMusic.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
+		<path :fill="fill" :class="$attrs.class" d="M40.4192 33.6535H40.4231C44.2049 33.6535 47.2716 36.7242 47.2716 40.506C47.2716 44.2917 44.2049 47.3584 40.4192 47.3584C36.6374 47.3584 33.5667 44.2917 33.5667 40.506C33.5667 36.7362 36.6136 33.6774 40.3794 33.6575L40.3913 33.6535H40.3953L40.4192 33.6535ZM56.0983 44.5582H56.1063C57.0835 44.5582 58.0607 44.9316 58.8035 45.6784L68.8299 55.7049C69.4417 56.3166 69.4417 57.3057 68.8339 57.9215H68.8299C68.5241 58.2274 68.1228 58.3783 67.7217 58.3783C67.3244 58.3783 66.9312 58.2313 66.6253 57.9334H66.6174L66.6134 57.9215L56.5909 47.899V47.895C56.4559 47.76 56.2771 47.6925 56.0984 47.6925C55.9315 47.6925 55.7647 47.752 55.6336 47.8752L41.3171 62.1876C41.0112 62.4935 40.61 62.6484 40.2088 62.6484C39.8077 62.6484 39.4104 62.4935 39.1045 62.1916V62.1955L39.1006 62.1876C38.4888 61.5759 38.4888 60.5828 39.1006 59.971L40.9954 58.0761V57.9768L38.8582 55.8396C38.7232 55.7045 38.5484 55.633 38.3696 55.633C38.2028 55.633 38.0359 55.6926 37.9048 55.8158L37.9485 55.8277L37.9009 55.8158L29.3602 64.3564C29.0543 64.6623 28.6491 64.8173 28.2479 64.8173C27.8586 64.8173 27.4613 64.6663 27.1594 64.3763H27.1555L27.1396 64.3565C26.5278 63.7447 26.5278 62.7516 27.1396 62.1398L35.6644 53.619L35.6684 53.611H35.6723C36.3993 52.8881 37.3447 52.5186 38.2981 52.5028H38.314C38.3299 52.4988 38.3537 52.4988 38.3696 52.4988C39.3468 52.4988 40.328 52.8722 41.0748 53.6191L43.212 55.7563L43.3114 55.7602L53.3974 45.6742C54.1283 44.9473 55.0777 44.5739 56.0351 44.5619H56.051H56.047C56.0669 44.5579 56.0825 44.5582 56.0983 44.5582ZM52.6543 8.00019V8.00416H52.6384C52.2967 8.00416 51.9512 8.04786 51.6016 8.13922L7.01895 20.0842C7.00703 20.0882 6.99511 20.0921 6.98319 20.0961L6.97922 20.1001C4.83012 20.696 3.56291 22.9165 4.13891 25.0735L14.0818 62.1837C14.5704 64.0031 16.219 65.2028 18.0146 65.2028C18.1417 65.2028 18.2688 65.1988 18.3959 65.1869L18.4038 29.5066C18.4038 25.975 21.2203 23.099 24.732 23.0037L24.7399 23.0077C24.7955 23.0037 24.8511 22.9998 24.9067 22.9998V23.0037H59.8L56.5903 11.0191C56.1017 9.19968 54.4537 8.00019 52.6543 8.00019ZM24.9071 25.4356H24.8912H24.8713H24.8673C22.6348 25.4595 20.8354 27.2749 20.8354 29.5074V67.9243C20.8354 70.1727 22.6587 71.996 24.9071 72H71.067C73.3154 71.996 75.1348 70.1727 75.1388 67.9243V29.5074C75.1348 27.259 73.3154 25.4356 71.067 25.4356H24.9071Z"/>
+	</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/icons/navigation/IconCheck.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/icons/navigation/IconHeart.vue

@@ -0,0 +1,26 @@
+<template>
+	<svg 
+		width="26"
+		height="26" 
+		viewBox="0 0 26 26" 
+		fill="none" 
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path 
+			:fill="fill"
+			fill-rule="evenodd" 
+			clip-rule="evenodd" 
+			d="M12.9996 10.8L22.8994 0.900244L25.0993 3.1002L15.1995 13L25.0993 22.8998L22.8994 25.0998L12.9996 15.2L3.09976 25.0998L0.899801 22.8998L10.7996 13L0.899801 3.1002L3.09976 0.900244L12.9996 10.8Z"/>
+	</svg>
+</template>
+
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>
+

package/src/modules/icons/navigation/IconPause.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/icons/navigation/IconPlay.vue

@@ -0,0 +1,17 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
+	  <path :fill="fill" d="M25.2765 9.37509L29.0265 5.93759C30.589 4.53134 32.9327 4.68759 34.339 6.25009L63.2453 37.8126C64.339 39.0626 64.339 40.9376 63.2453 42.1876L34.339 73.7501C32.9327 75.3126 30.589 75.4689 29.0265 74.0626L25.2765 70.6251C23.714 69.3751 23.5577 66.8751 24.964 65.4689L48.4015 40.0001L24.964 14.5313C23.5577 13.1251 23.714 10.6251 25.2765 9.37509Z"/>
+	</svg>
+</template>
+
+
+<script>
+	export default {
+	  props: {
+	    fill: {
+	      type: String,
+	      default: 'rgb(var(--black)'
+	    }
+	  }
+	}
+</script>

package/src/modules/icons/navigation/IconRefresh.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/icons/navigation/IconShuffle.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/icons/navigation/IconVolume.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/music/components/SidebarMusic.vue

@@ -0,0 +1,156 @@
+<!-- components/navigation/MusicSidebar.vue -->
+<template>
+  <Sidebar 
+    :stateSidebar="stateSidebar"
+    :theme="'dark'"
+    :width="'w-15r'"
+    :widthHidden="'w-3r'"
+    @closeSidebar="$emit('closeSidebar')"
+    class="flex-child-shrink-0"
+  >
+    <div class="pd-thin">
+      <div class="music-logo mn-b-medium">
+        <h3 class="t-white mn-b-small">Music</h3>
+      </div>
+      
+      <nav class="music-nav mn-b-medium">
+        <ul class="flex flex-column gap-small">
+          <li>
+            <router-link :to="{ name: 'music-home' }" 
+              class="flex-v-center flex gap-small pd-thin radius-small" 
+              :class="$route.name === 'music-home' ? 'bg-dark' : 'hover-bg-dark'"
+            >
+              <IconHome class="i-medium" :fill="$route.name === 'music-home' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+              <span class="t-medium" :class="$route.name === 'music-home' ? 't-main' : 't-white'">Home</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'music-search' }" 
+              class="flex-v-center flex gap-small pd-thin radius-small"
+              :class="$route.name === 'music-search' ? 'bg-dark' : 'hover-bg-dark'"
+            >
+              <IconSearch class="i-medium" :fill="$route.name === 'music-search' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+              <span class="t-medium" :class="$route.name === 'music-search' ? 't-main' : 't-white'">Search</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'music-library' }" 
+              class="flex-v-center flex gap-small pd-thin radius-small"
+              :class="$route.name === 'music-library' ? 'bg-dark' : 'hover-bg-dark'"
+            >
+              <IconLibrary class="i-medium" :fill="$route.name === 'music-library' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+              <span class="t-medium" :class="$route.name === 'music-library' ? 't-main' : 't-white'">Your Library</span>
+            </router-link>
+          </li>
+        </ul>
+      </nav>
+      
+      <div class="music-playlists" v-if="isAuthenticated">
+        <div class="flex-between flex mn-b-small">
+          <h4 class="t-grey t-medium">YOUR PLAYLISTS</h4>
+          <Button 
+            @click="showCreatePlaylistModal = true" 
+            class="bg-transparent cursor-pointer pd-micro radius-small hover-bg-dark"
+            :showLoader="false"
+            :showSucces="false"
+          >
+            <IconPlus class="i-small" fill="rgb(var(--white))"/>
+          </Button>
+        </div>
+        
+        <Feed
+          v-if="userPlaylists.length"
+          class="mn-t-thin"
+          :skeleton="{
+            hide: true
+          }"
+          :states="{
+            empty: {
+              title: 'No playlists yet',
+              description: 'Create your first playlist to see it here'
+            }
+          }"
+          :items="userPlaylists"
+        >
+          <template #default="{ items }">
+            <li v-for="playlist in items" :key="playlist._id" class="mn-b-thin">
+              <router-link 
+                :to="{ name: 'playlist-detail', params: { url: playlist.url } }" 
+                class="t-white t-truncate d-block pd-thin radius-small hover-bg-dark"
+                :class="$route.params.url === playlist.url ? 'bg-dark t-main' : ''"
+              >
+                {{ playlist.title }}
+              </router-link>
+            </li>
+          </template>
+        </Feed>
+      </div>
+    </div>
+    
+    <!-- Create Playlist Modal -->
+    <Popup 
+      v-if="showCreatePlaylistModal" 
+      @close-popup="showCreatePlaylistModal = false" 
+      class="bg-dark pd-small w-m-25r radius-medium t-white"
+    >
+      <h3 class="mn-b-medium">Create Playlist</h3>
+      <PlaylistForm @created="onPlaylistCreated" />
+    </Popup>
+  </Sidebar>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+// Import components from Martyrs framework
+import Sidebar from '@martyrs/src/modules/globals/views/components/partials/Sidebar.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
+import PlaylistForm from '../forms/PlaylistForm.vue';
+
+// Icons 
+import IconHome from '@martyrs/src/modules/icons/navigation/IconHome.vue';
+import IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';
+import IconLibrary from '@martyrs/src/modules/icons/entities/IconFolder.vue';
+import IconPlus from '@martyrs/src/modules/icons/navigation/IconPlus.vue';
+
+// Store
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
+import { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';
+
+const props = defineProps({
+  stateSidebar: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['closeSidebar']);
+
+const router = useRouter();
+const showCreatePlaylistModal = ref(false);
+
+// Auth computed property
+const isAuthenticated = computed(() => {
+  return authState.access.status === true;
+});
+
+// User playlists
+const userPlaylists = computed(() => {
+  return playlistsState.userPlaylists;
+});
+
+const onPlaylistCreated = (playlist) => {
+  showCreatePlaylistModal.value = false;
+  router.push({ name: 'playlist-detail', params: { url: playlist.url } });
+};
+
+// Fetch user playlists on component mount
+onMounted(async () => {
+  if (isAuthenticated.value && authState.user) {
+    await playlistsActions.fetchUserPlaylists();
+  }
+});
+</script>

package/src/modules/music/components/cards/AlbumCard.vue

@@ -0,0 +1,107 @@
+<!-- components/cards/AlbumCard.vue -->
+<template>
+  <router-link 
+    :to="{ name: 'album-detail', params: { url: album.url } }" 
+    class="album-card d-block radius-small o-hidden"
+  >
+    <div class="album-cover pos-relative">
+      <Media 
+        :url="album.coverUrl || '/assets/placeholder-album.jpg'" 
+        class="w-100 aspect-1x1 object-fit-cover"
+      />
+      <div class="album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out">
+        <Button 
+          @click.stop="playAlbum(album)" 
+          class="play-button bg-main radius-round flex-center flex aspect-1x1"
+          :showLoader="false"
+          :showSucces="false"
+        >
+          <IconPlay class="i-small" fill="rgb(var(--black))" />
+        </Button>
+      </div>
+    </div>
+    <div class="album-info pd-small bg-dark-transp-20">
+      <h3 class="t-white t-medium t-truncate">{{ album.title }}</h3>
+      <p class="t-grey t-small t-truncate">{{ albumInfo }}</p>
+    </div>
+  </router-link>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
+
+// Import player store & albums store
+import { actions as playerActions } from '../../store/player.js';
+import { state as albumsState, actions as albumsActions } from '../../store/albums.js';
+
+const props = defineProps({
+  album: {
+    type: Object,
+    required: true
+  }
+});
+
+// Computed properties
+const albumInfo = computed(() => {
+  const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : '';
+  let artistName = 'Unknown Artist';
+  
+  if (props.album.artist?.name) {
+    artistName = props.album.artist.name;
+  } else if (typeof props.album.artist === 'string') {
+    artistName = props.album.artist;
+  }
+  
+  return releaseYear ? `${artistName} • ${releaseYear}` : artistName;
+});
+
+// Methods
+const playAlbum = async (album) => {
+  // If album tracks are already loaded in state, use those
+  if (albumsState.currentAlbum && albumsState.currentAlbum._id === album._id && albumsState.currentAlbumTracks.length > 0) {
+    playerActions.setQueue(albumsState.currentAlbumTracks);
+    return;
+  }
+  
+  // Otherwise fetch tracks for this album
+  const tracks = await albumsActions.fetchAlbumTracks(album._id);
+  
+  if (tracks && tracks.length > 0) {
+    playerActions.setQueue(tracks);
+  }
+};
+</script>
+
+<style scoped>
+.album-card {
+  transition: transform 0.3s ease;
+}
+
+.album-card:hover {
+  transform: translateY(-5px);
+}
+
+.album-overlay {
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.album-card:hover .album-overlay {
+  opacity: 1;
+}
+
+.play-button {
+  width: 48px;
+  height: 48px;
+  transform: scale(0.8);
+  transition: transform 0.3s ease;
+}
+
+.album-card:hover .play-button {
+  transform: scale(1);
+}
+</style>

package/src/modules/music/components/cards/ArtistCard.vue

@@ -0,0 +1,37 @@
+<!-- components/cards/ArtistCard.vue -->
+<template>
+  <router-link 
+    :to="{ name: 'artist-detail', params: { url: artist.url } }" 
+    class="artist-card d-block text-center"
+  >
+    <div class="artist-photo mn-b-small">
+      <Media 
+        :url="artist.photoUrl || '/assets/placeholder-artist.jpg'" 
+        class="w-100 aspect-1x1 object-fit-cover radius-round"
+      />
+    </div>
+    <h3 class="t-white t-medium t-truncate">{{ artist.name }}</h3>
+    <p class="t-grey t-small">Artist</p>
+  </router-link>
+</template>
+
+<script setup>
+import Media from '@martyrs/src/components/Media/Media.vue';
+
+const props = defineProps({
+  artist: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+.artist-card {
+  transition: transform 0.3s ease;
+}
+
+.artist-card:hover {
+  transform: translateY(-5px);
+}
+</style>