@ozdao/martyrs 0.2.564 → 0.2.566

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

@@ -13,14 +13,14 @@
     </div>
     
     <!-- Album Content -->
-    <div v-if="album" class="album-content cols-2-fit-content mobile:cols-1 gap-big">
+    <div v-if="album" class="album-content cols-2 mobile:cols-1 gap-big">
       <!-- Left Column - Cover & Stats -->
       <div class="pos-sticky pos-t-0 mobile:pos-relative album-cover-section">
         <!-- Cover -->
         <Media 
           :url="album.coverArt || '/logo/logo-placeholder.jpg'"
           :alt="album.title"
-          class="aspect-1x1 w-100 w-max-30r mn-b-small radius-medium o-hidden"
+          class="aspect-1x1 w-100  mn-b-small radius-medium o-hidden"
         />
         <!-- Quick Stats -->
         <div class="stats-grid grid cols-2 gap-small">
@@ -51,67 +51,7 @@
         <h1 class="h1 mn-b-medium">{{ album.title }}</h1>
 
         <!-- Action Buttons -->
-        <div class="flex gap-small mn-b-medium">
-          <Button
-            @click="playAlbum"
-            color="primary"
-            size="medium"
-            class="flex-1 t-white bg-black radius-thin flex-center gap-thin"
-          >
-            <IconPlay fill="rgb(var(--white))" class="i-medium" />
-            Play All
-          </Button>
-
-          <Button
-            @click="shufflePlay"
-            color="primary"
-            size="medium"
-            class="flex-1 bg-light radius-thin flex-center gap-thin"
-          >
-            <IconShuffle class="i-medium" />
-            Shuffle
-          </Button>
-
-          <Button
-            @click="toggleFavorite"
-            color="primary"
-            size="medium"
-            class="flex-1 bg-light radius-thin flex-center gap-thin"
-          >
-            <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'" />
-            {{isFavorite ? 'Liked' : 'Like'}}
-          </Button>
-
-          <Dropdown :label="{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }" v-model="showDropdown" class="relative">
-            <template #trigger>
-              <Button color="transp" size="medium" class="w-3r h-3r radius-full">
-                <IconEllipsis class="w-1-25r h-1-25r" />
-              </Button>
-            </template>
-            <template #default>
-              <div class="dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin">
-                <Button @click="addToQueue" color="transp" size="small" class="w-100 justify-start">
-                  Add to Queue
-                </Button>
-                <Button @click="copyLink" color="transp" size="small" class="w-100 justify-start">
-                  Copy Link
-                </Button>
-                <Button @click="addToPlaylist" color="transp" size="small" class="w-100 justify-start">
-                  Add to Playlist
-                </Button>
-                <template v-if="isOwner">
-                  <hr class="mn-v-thin border-dark-transp-10" />
-                  <Button @click="editAlbum" color="transp" size="small" class="w-100 justify-start">
-                    Edit Album
-                  </Button>
-                  <Button @click="deleteAlbum" color="danger" size="small" class="w-100 justify-start">
-                    Delete Album
-                  </Button>
-                </template>
-              </div>
-            </template>
-          </Dropdown>
-        </div>
+        <ActionButtons :buttons="actionButtons" />
 
         <!-- Artists Cards -->
         <div class="artists-section mn-b-medium">
@@ -239,7 +179,7 @@
       <div  class="flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide"
       >
         <li v-for="relatedAlbum in moreAlbums"  :key="album._id" class="flex-none scroll-snap-align-start">
-          <AlbumCard :album="relatedAlbum" class="w-min-15r transition-cubic-in-out" />
+          <AlbumCard :album="relatedAlbum" class="w-15r transition-cubic-in-out" />
         </li>
       </div>
     </section>
@@ -267,6 +207,7 @@ import IconDisc from '@martyrs/src/modules/icons/entities/IconMusic.vue';
 import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';
 
 // Components
+import ActionButtons from '../blocks/ActionButtons.vue';
 import TrackListCard from '../cards/TrackListCard.vue';
 import AlbumCard from '../cards/AlbumCard.vue';
 import ArtistCardSmall from '../cards/ArtistCardSmall.vue';
@@ -285,7 +226,6 @@ const emits = defineEmits(['page-loading', 'page-loaded']);
 // State
 const hasLoaded = ref(false);
 const isFavorite = ref(false);
-const showDropdown = ref(false);
 const followedArtists = ref([]);
 const moreAlbums = ref([]);
 
@@ -307,6 +247,51 @@ const totalDuration = computed(() => {
   return formatDuration(totalSeconds);
 });
 
+const actionButtons = computed(() => {
+  const buttons = [
+    {
+      type: 'button',
+      class: 't-white bg-black',
+      icon: IconPlay,
+      iconFill: 'rgb(var(--white))',
+      text: 'Play All',
+      action: playAlbum
+    },
+    {
+      type: 'button',
+      class: 'bg-light',
+      icon: IconShuffle,
+      text: 'Shuffle',
+      action: shufflePlay
+    },
+    {
+      type: 'button',
+      class: 'bg-light',
+      icon: IconLike,
+      iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',
+      text: isFavorite.value ? 'Liked' : 'Like',
+      action: toggleFavorite
+    },
+    {
+      type: 'dropdown',
+      items: [
+        { text: 'Add to Queue', action: addToQueue },
+        { text: 'Copy Link', action: copyLink },
+        { text: 'Add to Playlist', action: addToPlaylist }
+      ]
+    }
+  ];
+
+  if (isOwner.value) {
+    const items = buttons[3].items;
+    items.push({ separator: true });
+    items.push({ text: 'Edit Album', action: editAlbum });
+    items.push({ text: 'Delete Album', action: deleteAlbum, color: 'danger' });
+  }
+
+  return buttons;
+});
+
 // Format helpers
 const formatDate = (dateString) => {
   if (!dateString) return 'Unknown';
@@ -373,10 +358,14 @@ const addToQueue = () => {
     albumTracks.value.forEach(track => {
       playerActions.addToQueue(track);
     });
-    showDropdown.value = false;
   }
 };
 
+const addToPlaylist = () => {
+  // TODO: Implement add to playlist
+  console.log('Add album to playlist');
+};
+
 const editAlbum = () => {
   router.push({ name: 'album-edit', params: { url: album.value.url } });
 };
@@ -394,7 +383,6 @@ const deleteAlbum = async () => {
 
 const copyLink = () => {
   navigator.clipboard.writeText(window.location.href);
-  showDropdown.value = false;
 };
 
 // Data fetching

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

@@ -41,7 +41,7 @@
         class="flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide"
       >
           <li v-for="album in items" :key="album._id" class="flex-none scroll-snap-align-start">
-            <AlbumCard :album="album" class="w-min-15r transition-cubic-in-out" />
+            <AlbumCard :album="album" class="w-15r transition-cubic-in-out" />
           </li>
 
       </Feed>
@@ -79,9 +79,9 @@
           horizontal: true
         }"
         v-slot="{ items }"
-        class="gap-zero"
+        class="gap-zero bg-light radius-medium o-hidden"
       >
-        <div class="bg-light radius-medium o-hidden">
+        <div class="">
           <TrackListCard
             v-for="(track, index) in items"
             :key="track._id"
@@ -169,9 +169,7 @@
         v-slot="{ items }"
         class="cols-6 mobile:cols-3 gap-small"
       >
-        <li class="flex-child-default w-100" v-for="artist in items" :key="artist._id">
-          <ArtistCard :artist="artist" class="hover-scale-1 flex-child-default transition-cubic-in-out" />
-        </li>
+        <ArtistCard v-for="artist in items" :key="artist._id" :artist="artist" class="hover-scale-1 transition-cubic-in-out" />
       </Feed>
     </section>
   </div>

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

@@ -7,9 +7,9 @@
     </div>
     
     <!-- Playlist Content -->
-    <div v-if="playlist" class="playlist-content cols-2-fit-content mobile:cols-1 gap-big">
+    <div v-if="playlist" class="playlist-content cols-2 mobile:cols-1 gap-big">
       <!-- Left Column - Cover & Stats -->
-      <div class="pos-sticky w-max-30r pos-t-0 mobile:pos-relative playlist-cover-section">
+      <div class="pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section">
         <!-- Cover -->
         <div class="cover-container relative mn-b-medium radius-big overflow-hidden shadow-big">
           <Media 
@@ -51,67 +51,7 @@
         <h1 class="h1 mn-b-medium">{{ playlist.title }}</h1>
 
         <!-- Action Buttons -->
-        <div class="flex gap-small mn-b-medium">
-          <Button
-            @click="playPlaylist"
-            color="primary"
-            size="medium"
-            class="flex-1 t-white bg-black radius-thin flex-center gap-thin"
-          >
-            <IconPlay fill="rgb(var(--white))" class="i-medium" />
-            Play All
-          </Button>
-
-          <Button
-            @click="shufflePlay"
-            color="primary"
-            size="medium"
-            class="flex-1   bg-light radius-thin flex-center gap-thin"
-          >
-            <IconShuffle class="i-medium" />
-            Shuffle
-          </Button>
-
-          <Button
-            @click="toggleFollow"
-            color="primary"
-            size="medium"
-            class="flex-1  bg-light radius-thin flex-center gap-thin"
-          >
-            {{isFollowing ? 'Follow' : 'Unfollow'}}
-          </Button>
-
-          
-          <Dropdown :label="{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }" v-model="showDropdown" class="relative">
-            <template #trigger>
-              <Button color="transp" size="medium" class="w-3r h-3r radius-full">
-                <IconEllipsis class="w-1-25r h-1-25r" />
-              </Button>
-            </template>
-            <template #default>
-              <div class="dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin">
-                <Button @click="addToQueue" color="transp" size="small" class="w-100 t-nowrap justify-start">
-                  Add to Queue
-                </Button>
-                <Button @click="copyLink" color="transp" size="small" class="w-100 t-nowrap  justify-start">
-                  Copy Link
-                </Button>
-                <template v-if="isOwner || isCollaborator">
-                  <hr class="mn-v-thin border-dark-transp-10" />
-                  <Button @click="editPlaylist" color="transp" size="small" class="w-100 t-nowrap  justify-start">
-                    Edit Playlist
-                  </Button>
-                  <Button v-if="isOwner" @click="toggleCollaborative" color="transp" size="small" class="t-nowrap  w-100 justify-start">
-                    {{ playlist.isCollaborative ? 'Make Private' : 'Make Collaborative' }}
-                  </Button>
-                  <Button v-if="isOwner" @click="deletePlaylist" color="danger" size="small" class="t-nowrap  w-100 justify-start">
-                    Delete Playlist
-                  </Button>
-                </template>
-              </div>
-            </template>
-          </Dropdown>
-        </div>
+        <ActionButtons :buttons="actionButtons" />
 
         <div class="artists-section mn-b-medium">
           <h3 class="t-medium mn-b-small">Created by</h3>
@@ -349,6 +289,7 @@ import IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';
 import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';
 
 // Components
+import ActionButtons from '../blocks/ActionButtons.vue';
 import TrackListCard from '../cards/TrackListCard.vue';
 import PlaylistCard from '../cards/PlaylistCard.vue';
 import PlaylistForm from '../forms/PlaylistForm.vue';
@@ -372,7 +313,6 @@ const emits = defineEmits(['page-loading', 'page-loaded']);
 // State
 const hasLoaded = ref(false);
 const isFollowing = ref(false);
-const showDropdown = ref(false);
 const showEditModal = ref(false);
 const showDeleteModal = ref(false);
 const followedUsers = ref([]);
@@ -407,6 +347,62 @@ const totalDuration = computed(() => {
   return formatDuration(totalSeconds);
 });
 
+const actionButtons = computed(() => {
+  const buttons = [
+    {
+      type: 'button',
+      class: 't-white bg-black',
+      icon: IconPlay,
+      iconFill: 'rgb(var(--white))',
+      text: 'Play All',
+      action: playPlaylist
+    },
+    {
+      type: 'button',
+      class: 'bg-light',
+      icon: IconShuffle,
+      text: 'Shuffle',
+      action: shufflePlay
+    },
+    {
+      type: 'button',
+      class: 'bg-light',
+      icon: null,
+      text: isFollowing.value ? 'Unfollow' : 'Follow',
+      action: toggleFollow
+    },
+    {
+      type: 'dropdown',
+      items: [
+        { text: 'Add to Queue', action: addToQueue, class: 't-nowrap' },
+        { text: 'Copy Link', action: copyLink, class: 't-nowrap' }
+      ]
+    }
+  ];
+
+  if (isOwner.value || isCollaborator.value) {
+    const items = buttons[3].items;
+    items.push({ separator: true });
+    items.push({ text: 'Edit Playlist', action: editPlaylist, class: 't-nowrap' });
+
+    if (isOwner.value) {
+      items.push({
+        text: playlist.value?.isCollaborative ? 'Make Private' : 'Make Collaborative',
+        action: toggleCollaborative,
+        class: 't-nowrap'
+      });
+      items.push({
+        text: 'Delete Playlist',
+        action: deletePlaylist,
+        color: 'danger',
+        class: 't-nowrap'
+      });
+    }
+  }
+
+  return buttons;
+});
+
 // Helper functions
 const getOwnerData = (playlist) => {
   if (!playlist) return null;
@@ -521,13 +517,11 @@ const addToQueue = () => {
     playlistTracks.value.forEach(track => {
       playerActions.addToQueue(track);
     });
-    showDropdown.value = false;
   }
 };
 
 const editPlaylist = () => {
   showEditModal.value = true;
-  showDropdown.value = false;
 };
 
 const toggleCollaborative = async () => {
@@ -536,9 +530,8 @@ const toggleCollaborative = async () => {
       _id: playlist.value._id,
       isCollaborative: !playlist.value.isCollaborative
     };
-    
+
     await playlistsActions.updatePlaylist(updatedData);
-    showDropdown.value = false;
   } catch (error) {
     console.error('Error updating playlist:', error);
   }
@@ -546,7 +539,6 @@ const toggleCollaborative = async () => {
 
 const deletePlaylist = () => {
   showDeleteModal.value = true;
-  showDropdown.value = false;
 };
 
 const confirmDelete = async () => {
@@ -576,7 +568,6 @@ const removeTrack = async (trackId) => {
 
 const copyLink = () => {
   navigator.clipboard.writeText(window.location.href);
-  showDropdown.value = false;
 };
 
 const handlePlaylistUpdated = () => {

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

@@ -13,7 +13,7 @@
     </div>
 
     <!-- Track Content -->
-    <div v-if="track" class="track-content cols-2-fit-content mobile:cols-1 gap-big">
+    <div v-if="track" class="track-content cols-2 mobile:cols-1 gap-big">
       <!-- Left Column - Cover & Stats -->
       <div class="pos-sticky pos-t-0 mobile:pos-relative track-cover-section">
         <!-- Cover with Play Overlay -->
@@ -62,78 +62,18 @@
         <!-- Track Title -->
         <h1 class="h1 mn-b-medium">{{ track.title }}</h1>
         <!-- Action Buttons -->
-        <div class="flex gap-small mn-b-medium">
-          <Button
-            @click="playTrack"
-            color="primary"
-            size="medium"
-            class="flex-1 t-white bg-black radius-thin flex-center gap-thin"
-          >
-            <IconPlay v-if="!isPlaying" fill="rgb(var(--white))" class="i-medium" />
-            <IconPause v-else fill="rgb(var(--white))" class="i-medium" />
-            {{ !isPlaying ? 'Play' : 'Pause'}}
-          </Button>
-
-          <Button
-            @click="addToQueue"
-            color="primary"
-            size="medium"
-            class="flex-1 bg-light radius-thin flex-center gap-thin"
-          >
-            <IconAdd class="i-medium" />
-            Add to Queue
-          </Button>
-
-          <Button
-            @click="toggleFavorite"
-            color="primary"
-            size="medium"
-            class="flex-1 bg-light radius-thin flex-center gap-thin"
-          >
-            <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'" />
-            {{isFavorite ? 'Liked' : 'Like'}}
-          </Button>
-
-          <Dropdown :label="{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }" v-model="showDropdown" class="relative">
-            <template #trigger>
-              <Button color="transp" size="medium" class="w-3r h-3r radius-full">
-                <IconEllipsis class="w-1-25r h-1-25r" />
-              </Button>
-            </template>
-            <template #default>
-              <div class="dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin">
-                <Button @click="showAddToPlaylistModal = true" color="transp" size="small" class="w-100 justify-start">
-                  Add to Playlist
-                </Button>
-                <Button @click="copyLink" color="transp" size="small" class="w-100 justify-start">
-                  Copy Link
-                </Button>
-                <template v-if="isOwner">
-                  <hr class="mn-v-thin border-dark-transp-10" />
-                  <Button @click="editTrack" color="transp" size="small" class="w-100 justify-start">
-                    Edit Track
-                  </Button>
-                  <Button @click="deleteTrack" color="danger" size="small" class="w-100 justify-start">
-                    Delete Track
-                  </Button>
-                </template>
-              </div>
-            </template>
-          </Dropdown>
-        </div>
+        <ActionButtons :buttons="actionButtons" />
 
         <!-- Artist Card -->
         <div class="artists-section mn-b-medium">
           <h3 class="t-medium mn-b-small" v-if="track.artist">Artist</h3>
-          <div class="flex flex-column gap-small">
-            <ArtistCardSmall 
-              :key="track.artist._id"
-              :artist="track.artist"
-              :is-following="isFollowingArtist"
-              :show-follow-button="!isOwner"
-              @toggle-follow="toggleFollowArtist"
-            />
-          </div>
+          <ArtistCardSmall 
+            :key="track.artist._id"
+            :artist="track.artist"
+            :is-following="isFollowingArtist"
+            :show-follow-button="!isOwner"
+            @toggle-follow="toggleFollowArtist"
+          />
         </div>
 
         <!-- Metadata Cards -->
@@ -302,6 +242,7 @@ import IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';
 import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';
 
 // Components
+import ActionButtons from '../blocks/ActionButtons.vue';
 import TrackListCard from '../cards/TrackListCard.vue';
 import ArtistCardSmall from '../cards/ArtistCardSmall.vue';
 // import PlaylistSelector from '../forms/PlaylistSelector.vue';
@@ -321,7 +262,6 @@ const emits = defineEmits(['page-loading', 'page-loaded']);
 
 // State
 const hasLoaded = ref(false);
-const showDropdown = ref(false);
 const showAddToPlaylistModal = ref(false);
 const isFavorite = ref(false);
 const isFollowingArtist = ref(false);
@@ -338,6 +278,50 @@ const isOwner = computed(() => {
   return track.value?.owner?.target === authState.user?._id;
 });
 
+const actionButtons = computed(() => {
+  const buttons = [
+    {
+      type: 'button',
+      class: 't-white bg-black',
+      icon: isPlaying.value ? IconPause : IconPlay,
+      iconFill: 'rgb(var(--white))',
+      text: isPlaying.value ? 'Pause' : 'Play',
+      action: playTrack
+    },
+    {
+      type: 'button',
+      class: 'bg-light',
+      icon: IconAdd,
+      text: 'Add to Queue',
+      action: addToQueue
+    },
+    {
+      type: 'button',
+      class: 'bg-light',
+      icon: IconLike,
+      iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',
+      text: isFavorite.value ? 'Liked' : 'Like',
+      action: toggleFavorite
+    },
+    {
+      type: 'dropdown',
+      items: [
+        { text: 'Add to Playlist', action: () => showAddToPlaylistModal.value = true },
+        { text: 'Copy Link', action: copyLink }
+      ]
+    }
+  ];
+
+  if (isOwner.value) {
+    const items = buttons[3].items;
+    items.push({ separator: true });
+    items.push({ text: 'Edit Track', action: editTrack });
+    items.push({ text: 'Delete Track', action: deleteTrack, color: 'danger' });
+  }
+
+  return buttons;
+});
+
 // Format helpers
 const formatDuration = (seconds) => {
   if (!seconds) return '0:00';
@@ -410,7 +394,6 @@ const deleteTrack = async () => {
 
 const copyLink = () => {
   navigator.clipboard.writeText(window.location.href);
-  showDropdown.value = false;
 };
 
 // Data fetching