@ozdao/martyrs 0.2.485 → 0.2.487

package/src/modules/music/components/pages/MusicLibrary.vue

@@ -1,7 +1,7 @@
 <!-- components/pages/MusicLibrary.vue -->
 <template>
   <div class="music-library-page">
-    <h1 class="t-white mn-b-medium">Your Library</h1>
+    <h1 class=" mn-b-medium">Your Library</h1>
     
     <!-- Filter Tabs -->
     <div class="library-tabs mn-b-medium">
@@ -11,7 +11,7 @@
           :key="tab.id"
           @click="activeTab = tab.id"
           :class="[
-            activeTab === tab.id ? 'bg-white t-black' : 'bg-dark-transp-50 t-white hover-bg-dark',
+            activeTab === tab.id ? 'bg-white t-black' : 'bg-dark-transp-50  hover-bg-dark',
           ]"
           class="radius-extra pd-small"
           :showLoader="false" 
@@ -22,18 +22,13 @@
       </div>
     </div>
     
-    <!-- Content based on active tab -->
-    <div v-if="isLoading" class="flex-center flex pd-big">
-      <Loader />
-    </div>
-    
     <!-- Playlists Tab -->
-    <div v-else-if="activeTab === 'playlists'" class="playlists-tab">
+    <div v-if="activeTab === 'playlists'" class="playlists-tab">
       <div class="flex-between flex mn-b-small">
-        <h2 class="t-white">Your Playlists</h2>
+        <h2 class="">Your Playlists</h2>
         <Button 
-          @click="showCreatePlaylistModal = true"
-          class="bg-main t-white radius-small pd-small hover-scale-1"
+          @click="$router.push({ name: 'playlist-create' })"
+          class="bg-main  radius-small pd-small hover-scale-1"
           :showLoader="false" 
           :showSucces="false"
         >
@@ -41,50 +36,119 @@
         </Button>
       </div>
       
-      <div v-if="userPlaylists.length === 0" class="empty-state t-center pd-big bg-dark-transp-10 radius-medium">
-        <h3 class="t-white mn-b-small">No playlists yet</h3>
-        <p class="t-grey t-medium">Create your first playlist to see it here</p>
-      </div>
-      
-      <PlaylistList v-else :playlists="userPlaylists" />
+      <Feed
+        :store="{
+          read: (options) => playlistsActions.fetchPlaylists({ ...options, owner: { type: 'user', target: authState.user._id } }),
+          state: playlistsState
+        }"
+        :options="{ owner: { type: 'user', target: authState.user._id } }"
+        :states="{
+          empty: {
+            title: 'No playlists yet',
+            description: 'Create your first playlist to see it here',
+            class: 'pd-big bg-dark-transp-10 radius-medium'
+          }
+        }"
+        class="gap-medium"
+      >
+        <template #default="{ items }">
+          <PlaylistCard
+            v-for="playlist in items"
+            :key="playlist._id"
+            :playlist="playlist"
+            class="w-100"
+          />
+        </template>
+      </Feed>
     </div>
     
     <!-- Albums Tab -->
-    <div v-else-if="activeTab === 'albums'" class="albums-tab">
+    <div v-if="activeTab === 'albums'" class="albums-tab">
       <div class="flex-between flex mn-b-small">
-        <h2 class="t-white">Your Albums</h2>
-      </div>
-      
-      <div v-if="userAlbums.length === 0" class="empty-state t-center pd-big bg-dark-transp-10 radius-medium">
-        <h3 class="t-white mn-b-small">No albums yet</h3>
-        <p class="t-grey t-medium">Upload your first album to see it here</p>
+        <h2 class="">Your Albums</h2>
+        <Button 
+          @click="$router.push({ name: 'album-create' })"
+          class="bg-main  radius-small pd-small hover-scale-1"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          Create Album
+        </Button>
       </div>
       
-      <AlbumList v-else :albums="userAlbums" />
+      <Feed
+        :store="{
+          read: (options) => albumsActions.fetchAlbums({ ...options, owner: { type: 'user', target: authState.user._id } }),
+          state: albumsState
+        }"
+        :options="{ owner: { type: 'user', target: authState.user._id } }"
+        :states="{
+          empty: {
+            title: 'No albums yet',
+            description: 'Upload your first album to see it here',
+            class: 'pd-big bg-dark-transp-10 radius-medium'
+          }
+        }"
+        class="gap-medium"
+      >
+        <template #default="{ items }">
+          <AlbumCard
+            v-for="album in items"
+            :key="album._id"
+            :album="album"
+            class="w-100"
+          />
+        </template>
+      </Feed>
     </div>
     
     <!-- Artists Tab -->
-    <div v-else-if="activeTab === 'artists'" class="artists-tab">
-      <ArtistManager/>
-      <!-- <div class="flex-between flex mn-b-small">
-        <h2 class="t-white">Your Artists</h2>
-      </div>
-      
-      <div v-if="userArtists.length === 0" class="empty-state t-center pd-big bg-dark-transp-10 radius-medium">
-        <h3 class="t-white mn-b-small">No artists yet</h3>
-        <p class="t-grey t-medium">Create your first artist profile to see it here</p>
+    <div v-if="activeTab === 'artists'" class="artists-tab">
+      <div class="flex-between flex mn-b-small">
+        <h2 class="">Your Artists</h2>
+        <Button 
+          @click="$router.push({ name: 'artist-create' })"
+          class="bg-main  radius-small pd-small hover-scale-1"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          Create Artist
+        </Button>
       </div>
       
-      <ArtistList v-else :artists="userArtists" /> -->
+      <Feed
+        :store="{
+          read: (options) => artistsActions.fetchArtists({ ...options, owner: { type: 'user', target: authState.user._id } }),
+          state: artistsState
+        }"
+        :options="{ owner: { type: 'user', target: authState.user._id } }"
+        :states="{
+          empty: {
+            title: 'No artists yet',
+            description: 'Create your first artist profile to see it here',
+            class: 'pd-big bg-dark-transp-10 radius-medium'
+          }
+        }"
+        class="gap-medium"
+      >
+        <template #default="{ items }">
+          <ArtistCard
+            v-for="artist in items"
+            :key="artist._id"
+            :artist="artist"
+            class="w-100"
+          />
+        </template>
+      </Feed>
     </div>
     
     <!-- Tracks Tab -->
-    <div v-else-if="activeTab === 'tracks'" class="tracks-tab">
+    <div v-if="activeTab === 'tracks'" class="tracks-tab">
       <div class="flex-between flex mn-b-small">
-        <h2 class="t-white">Your Tracks</h2>
+        <h2 class="">Your Tracks</h2>
         <Button 
-          @click="$router.push({ name: 'music-upload' })"
-          class="bg-main t-white radius-small pd-small hover-scale-1"
+          @click="$router.push({ name: 'track-create' })"
+          class="bg-main  radius-small pd-small hover-scale-1"
           :showLoader="false" 
           :showSucces="false"
         >
@@ -92,44 +156,46 @@
         </Button>
       </div>
       
-      <div v-if="userTracks.length === 0" class="empty-state t-center pd-big bg-dark-transp-10 radius-medium">
-        <h3 class="t-white mn-b-small">No tracks yet</h3>
-        <p class="t-grey t-medium">Upload your first track to see it here</p>
-      </div>
-      
-      <TrackList 
-        v-else
-        :tracks="userTracks"
-        :showAlbum="true" 
-        :showCover="true"
-        class="bg-dark-transp-10 radius-medium o-hidden"
-      />
+      <Feed
+        :store="{
+          read: (options) => tracksActions.fetchTracks({ ...options, owner: { type: 'user', target: authState.user._id } }),
+          state: tracksState
+        }"
+        :options="{ owner: { type: 'user', target: authState.user._id } }"
+        :states="{
+          empty: {
+            title: 'No tracks yet',
+            description: 'Upload your first track to see it here',
+            class: 'pd-big bg-dark-transp-10 radius-medium'
+          }
+        }"
+        class="gap-medium"
+      >
+        <template #default="{ items }">
+          <TrackCard
+            v-for="track in items"
+            :key="track._id"
+            :track="track"
+            :showAlbum="true"
+            :showCover="true"
+            class="w-100 bg-dark-transp-10 radius-medium"
+          />
+        </template>
+      </Feed>
     </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" @cancel="showCreatePlaylistModal = false" />
-    </Popup>
-  </div>
+      </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import TrackList from '../lists/TrackList.vue';
-import AlbumList from '../lists/AlbumList.vue';
-import PlaylistList from '../lists/PlaylistList.vue';
-import ArtistList from '../lists/ArtistList.vue';
-import ArtistManager from '../pages/ArtistManager.vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
+import TrackCard from '../cards/TrackCard.vue';
+import AlbumCard from '../cards/AlbumCard.vue';
+import PlaylistCard from '../cards/PlaylistCard.vue';
+import ArtistCard from '../cards/ArtistCard.vue';
 import Button from '@martyrs/src/components/Button/Button.vue';
-import Loader from '@martyrs/src/components/Loader/Loader.vue';
-import Popup from '@martyrs/src/components/Popup/Popup.vue';
-import PlaylistForm from '../forms/PlaylistForm.vue';
 
 // Import store modules
 import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
@@ -141,9 +207,7 @@ import { state as tracksState, actions as tracksActions } from '../../store/trac
 const router = useRouter();
 
 // State
-const isLoading = ref(true);
 const activeTab = ref('playlists');
-const showCreatePlaylistModal = ref(false);
 
 // Tabs configuration
 const tabs = [
@@ -153,37 +217,4 @@ const tabs = [
   { id: 'tracks', label: 'Tracks' }
 ];
 
-// Computed
-const userPlaylists = ref([]);
-const userAlbums = ref([]);
-const userArtists = ref([]);
-const userTracks = ref([]);
-
-// Methods
-const fetchLibraryData = async () => {
-  isLoading.value = true;
-  
-  try {
-    if (!authState.user || !authState.user._id) {
-      router.push({ name: 'Sign In', query: { redirect: router.currentRoute.value.fullPath } });
-      return;
-    }
-    
-    // Fetch user's content
-    await tracksActions.fetchUserTracks(authState.user._id).then(tracks => userTracks.value = tracks || []);
-  } catch (error) {
-    console.error('Error fetching library data:', error);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const onPlaylistCreated = (playlist) => {
-  userPlaylists.value.unshift(playlist);
-  showCreatePlaylistModal.value = false;
-  router.push({ name: 'playlist-detail', params: { url: playlist.url } });
-};
-
-// Fetch library data when component mounts
-onMounted(fetchLibraryData);
 </script>

package/src/modules/music/components/pages/{PlaylistDetail.vue → Playlist.vue}

@@ -1,12 +1,12 @@
-<!-- components/pages/PlaylistDetail.vue -->
+<!-- components/pages/Playlist.vue -->
 <template>
-  <div class="playlist-detail-page">
+  <div class="playlist-page">
     <div v-if="isLoading" class="w-100 h-25r flex-center flex">
       <Loader />
     </div>
     
     <div v-else-if="!playlist" class="t-center pd-big">
-      <h2 class="t-white">Playlist not found</h2>
+      <h2 class="">Playlist not found</h2>
       <p class="t-grey t-medium">The playlist you're looking for doesn't exist or has been removed.</p>
     </div>
     
@@ -21,8 +21,8 @@
         </div>
         
         <div class="playlist-info">
-          <div class="t-small t-uppercase t-white">Playlist</div>
-          <h1 class="t-white">{{ playlist.title }}</h1>
+          <div class="t-small t-uppercase ">Playlist</div>
+          <h1 class="">{{ playlist.title }}</h1>
           
           <div v-if="playlist.description" class="playlist-description t-grey mn-t-thin mn-b-small">
             {{ playlist.description }}
@@ -32,11 +32,11 @@
             <router-link 
               v-if="playlist.owner && playlist.owner.target"
               :to="getOwnerProfileLink(playlist.owner)"
-              class="t-white t-medium hover-t-main"
+              class=" t-medium hover-t-main"
             >
               {{ getPlaylistOwnerName(playlist) }}
             </router-link>
-            <span v-else class="t-white t-medium">{{ getPlaylistOwnerName(playlist) }}</span>
+            <span v-else class=" t-medium">{{ getPlaylistOwnerName(playlist) }}</span>
             
             <span class="t-grey mn-l-small mn-r-small">•</span>
             
@@ -81,7 +81,7 @@
               <li v-if="isOwner" class="mn-b-thin">
                 <Button 
                   @click="editPlaylist"
-                  class="bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small"
+                  class="bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small"
                   :showLoader="false" 
                   :showSucces="false"
                 >
@@ -91,7 +91,7 @@
               <li class="mn-b-thin">
                 <Button 
                   @click="addToQueue"
-                  class="bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small"
+                  class="bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small"
                   :showLoader="false" 
                   :showSucces="false"
                 >
@@ -101,7 +101,7 @@
               <li v-if="isOwner" class="mn-b-thin">
                 <Button 
                   @click="toggleCollaborative"
-                  class="bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small"
+                  class="bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small"
                   :showLoader="false" 
                   :showSucces="false"
                 >
@@ -121,7 +121,7 @@
               <li>
                 <Button 
                   @click="copyLink"
-                  class="bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small"
+                  class="bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small"
                   :showLoader="false" 
                   :showSucces="false"
                 >
@@ -136,13 +136,13 @@
       <!-- Playlist Tracks -->
       <div class="playlist-tracks">
         <div v-if="playlistTracks.length === 0" class="empty-tracks t-center pd-big bg-dark-transp-10 radius-medium">
-          <h3 class="t-white mn-b-small">This playlist is empty</h3>
+          <h3 class=" mn-b-small">This playlist is empty</h3>
           <p class="t-grey t-medium">Add some tracks to get started</p>
           
           <Button 
             v-if="isOwner || isCollaborator"
             @click="$router.push({ name: 'music-search' })"
-            class="bg-main t-white radius-small pd-small mn-t-medium hover-scale-1"
+            class="bg-main  radius-small pd-small mn-t-medium hover-scale-1"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -150,69 +150,90 @@
           </Button>
         </div>
         
-        <TrackList 
+        <Feed
           v-else
-          :tracks="playlistTracks"
-          :showAlbum="true" 
-          :showCover="true"
-          class="bg-dark-transp-10 radius-medium o-hidden"
-        />
+          :store="{
+            read: () => Promise.resolve(playlistTracks),
+            state: { isLoading: false }
+          }"
+          :external="true"
+          :items="playlistTracks"
+          :states="{
+            empty: {
+              title: 'No tracks in playlist',
+              description: 'Add some tracks to get started',
+              class: 'pd-medium bg-dark-transp-10 radius-medium'
+            }
+          }"
+          class="gap-thin"
+        >
+          <template #default="{ items }">
+            <TrackCard
+              v-for="track in items"
+              :key="track._id"
+              :track="track"
+              :showAlbum="true"
+              :showCover="true"
+              class="w-100 bg-dark-transp-10 radius-medium"
+            />
+          </template>
+        </Feed>
       </div>
       
       <!-- Edit Playlist Modal -->
       <Popup 
         v-if="showEditModal && isOwner" 
         @close-popup="showEditModal = false" 
-        class="bg-dark pd-small w-m-25r radius-medium t-white"
+        class="bg-dark pd-small w-m-25r radius-medium "
       >
         <h3 class="mn-b-medium">Edit Playlist</h3>
         
         <form @submit.prevent="updatePlaylist">
           <div class="form-group mn-b-medium">
-            <label for="title" class="t-white t-medium mn-b-thin d-block">Playlist Name</label>
+            <label for="title" class=" t-medium mn-b-thin d-block">Playlist Name</label>
             <Field 
               v-model:field="editForm.title"
               id="title"
               type="text"
               placeholder="Playlist Name"
               :validation="validationErrors.title"
-              class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+              class="w-100 pd-small bg-dark-transp-25 radius-small "
             />
           </div>
           
           <div class="form-group mn-b-medium">
-            <label for="description" class="t-white t-medium mn-b-thin d-block">Description</label>
+            <label for="description" class=" t-medium mn-b-thin d-block">Description</label>
             <Field 
               v-model:field="editForm.description"
               id="description"
               type="textarea"
               placeholder="Add an optional description"
-              class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+              class="w-100 pd-small bg-dark-transp-25 radius-small "
             />
           </div>
           
           <div class="form-group mn-b-medium">
-            <label class="t-white t-medium mn-b-thin d-block">Privacy</label>
+            <label class=" t-medium mn-b-thin d-block">Privacy</label>
             <div class="flex gap-small">
               <Radio 
                 v-model:radio="editForm.isPublic"
                 :value="true"
                 name="privacy"
                 label="Public"
-                class="t-white"
+                class=""
               />
               <Radio 
                 v-model:radio="editForm.isPublic"
                 :value="false"
                 name="privacy"
                 label="Private"
-                class="t-white"
+                class=""
               />
             </div>
           </div>
           
           <div class="form-group mn-b-medium">
-            <label class="t-white t-medium mn-b-thin d-block">Cover Image</label>
+            <label class=" t-medium mn-b-thin d-block">Cover Image</label>
             <div class="playlist-cover-upload flex gap-medium">
               <div class="playlist-cover-preview bg-dark-transp-25 radius-small o-hidden">
                 <Media 
@@ -237,7 +258,7 @@
             <Button 
               @click="showEditModal = false"
               type="button"
-              class="bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark"
+              class="bg-dark-transp-25  pd-small radius-small mn-r-small hover-bg-dark"
               :showLoader="false" 
               :showSucces="false"
             >
@@ -246,7 +267,7 @@
             
             <Button 
               type="submit"
-              class="bg-main t-white pd-small radius-small hover-scale-1"
+              class="bg-main  pd-small radius-small hover-scale-1"
               :submit="updatePlaylist"
               :showLoader="true" 
               :showSucces="true"
@@ -262,7 +283,7 @@
       <Popup 
         v-if="showDeleteModal" 
         @close-popup="showDeleteModal = false" 
-        class="bg-dark pd-small w-m-25r radius-medium t-white"
+        class="bg-dark pd-small w-m-25r radius-medium "
       >
         <h3 class="mn-b-medium">Delete Playlist</h3>
         <p class="t-grey mn-b-medium">Are you sure you want to delete this playlist? This action cannot be undone.</p>
@@ -270,7 +291,7 @@
         <div class="t-right">
           <Button 
             @click="showDeleteModal = false"
-            class="bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark"
+            class="bg-dark-transp-25  pd-small radius-small mn-r-small hover-bg-dark"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -279,7 +300,7 @@
           
           <Button 
             @click="confirmDelete"
-            class="bg-fourth t-white pd-small radius-small hover-scale-1"
+            class="bg-fourth  pd-small radius-small hover-scale-1"
             :showLoader="true" 
             :showSucces="true"
           >
@@ -294,7 +315,8 @@
 <script setup>
 import { ref, computed, reactive, onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import TrackList from '../lists/TrackList.vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
+import TrackCard from '../cards/TrackCard.vue';
 import Button from '@martyrs/src/components/Button/Button.vue';
 import Loader from '@martyrs/src/components/Loader/Loader.vue';
 import Media from '@martyrs/src/components/Media/Media.vue';

package/src/modules/music/components/pages/PlaylistCreate.vue

@@ -0,0 +1,7 @@
+<template>
+  <PlaylistForm :editMode="false" />
+</template>
+
+<script setup>
+import PlaylistForm from '../forms/PlaylistForm.vue';
+</script>

package/src/modules/music/components/pages/PlaylistEdit.vue

@@ -0,0 +1,14 @@
+<template>
+  <PlaylistForm :editMode="true" :url="url" />
+</template>
+
+<script setup>
+import PlaylistForm from '../forms/PlaylistForm.vue';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  }
+});
+</script>