@ozdao/martyrs 0.2.565 → 0.2.566

package/src/modules/core/views/components/layouts/Client.vue

@@ -13,7 +13,7 @@
   	}"
 	>
 		<transition name="moveFromTop" appear>
-			<Loader v-if="!page || store.core.state.loading" class="pos-fixed"/>
+			<Loader v-if="!page || store.core.state.loading" :centered="true" class="pos-fixed"/>
 		</transition>
 
 	  <transition 

package/src/modules/events/events.client.js

@@ -14,6 +14,7 @@ import EditEvent from './components/pages/EditEvent.vue';
 import Event from './components/pages/Event.vue';
 import EventsPage from './components/pages/Events.vue';
 import FeaturedEvents from './components/sections/FeaturedEvents.vue';
+import EventsHot from './components/sections/EventsHot.vue';
 import Feed from './components/sections/Feed.vue';
 import List from './components/sections/List.vue';
 
@@ -44,6 +45,7 @@ const ModuleEvents = {
       Feed,
       List,
       FeaturedEvents,
+      EventsHot,
       // Layouts
       EventsLayout,
       // Pages
@@ -64,6 +66,7 @@ export {
   EventsLayout,
   EventsPage,
   FeaturedEvents,
+  EventsHot,
   Feed,
   initializeEvents,
   List,

package/src/modules/music/components/blocks/ActionButtons.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex gap-small mn-b-medium">
+    <template v-for="(button, index) in buttons" :key="index">
+      <!-- Regular button -->
+      <Button
+        v-if="button.type !== 'dropdown'"
+        :class="['flex-1 radius-thin flex-center gap-thin', button.class]"
+        @click="button.action"
+      >
+        <component
+          v-if="button.icon"
+          :is="button.icon"
+          :fill="button.iconFill"
+          class="i-medium"
+        />
+        {{ button.text }}
+      </Button>
+
+      <!-- Dropdown button -->
+      <Dropdown
+        v-else
+        :label="{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }"
+        v-model="dropdownOpen"
+        class="relative"
+      >
+        <template #trigger>
+          <Button color="transp" size="medium" class="w-3r h-3r radius-full">
+            <IconEllipsis class="i-medium" />
+          </Button>
+        </template>
+        <template #default>
+          <div class="dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin">
+            <template v-for="(item, idx) in button.items" :key="idx">
+              <hr v-if="item.separator" class="mn-v-thin border-dark-transp-10" />
+              <Button
+                v-else
+                @click="handleDropdownClick(item.action)"
+                :color="item.color || 'transp'"
+                size="small"
+                class="w-100 justify-start"
+                :class="item.class"
+              >
+                {{ item.text }}
+              </Button>
+            </template>
+          </div>
+        </template>
+      </Dropdown>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';
+import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
+
+const props = defineProps({
+  buttons: {
+    type: Array,
+    required: true
+  }
+});
+
+const dropdownOpen = ref(false);
+
+const handleDropdownClick = (action) => {
+  if (action) {
+    action();
+  }
+  dropdownOpen.value = false;
+};
+</script>

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

@@ -21,7 +21,7 @@
       </div>
     </div>
     <div class="album-info pd-medium bg-light">
-      <h3 class="mn-b-thin t-medium t-truncate">{{ album.title }}</h3>
+      <h3 class="mn-b-thin t-medium  t-truncate" style="height: 1.50rem">{{ album.title }}</h3>
       <p class="t-transp t-small t-truncate">{{ albumInfo }}</p>
     </div>
   </router-link>

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

@@ -1,9 +1,11 @@
 <!-- components/cards/ArtistCard.vue -->
 <template>
-  <div class="artist-card bg-light pd-medium radius-medium flex flex-center gap-big">
-    <router-link 
-      :to="artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to"
-      class="flex flex-v-center gap-thin flex-1 hover-opacity"
+  <router-link
+   :to="artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to"
+    class="artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-1 hover-opacity"
+  >
+    <div
+     class="flex flex-nowrap flex-v-center gap-thin"
     >
       <div class="artist-avatar">
         <Media 
@@ -24,7 +26,7 @@
         </div>
         <span class="t-small t-transp">{{ artistType }}</span>
       </div>
-    </router-link>
+    </div>
 
     <Button 
       v-if="showFollowButton"
@@ -35,7 +37,7 @@
     >
       {{ isFollowing ? 'Following' : 'Follow' }}
     </Button>
-  </div>
+  </router-link>
 </template>
 
 <script setup>

package/src/modules/music/components/layouts/MusicBottomPlayer.vue

@@ -1,17 +1,107 @@
 <!-- components/layouts/MusicBottomPlayer.vue -->
 <template>
-  <MusicPlayer v-if="currentTrack" class="pos-absolute pos-b-0 w-100" />
+  <div>
+    <MusicPlayer v-if="currentTrack && !showFullPlayer" class="pos-absolute pos-b-0 w-100" />
+
+    <BottomSheet
+      v-if="showFullPlayer"
+      :show="showFullPlayer"
+      @toggle="playerActions.toggleFullPlayer()"
+    >
+      <FullscreenPlayer />
+    </BottomSheet>
+  </div>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import MusicPlayer from '../player/MusicPlayer.vue';
+import FullscreenPlayer from '../player/FullscreenPlayer.vue';
+import BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';
 
 // Import store modules
-import { state as playerState } from '../../store/player.js';
+import { state as playerState, actions as playerActions } from '../../store/player.js';
+
+const route = useRoute();
 
 // Current track from player store
 const currentTrack = computed(() => {
   return playerState.currentTrack;
 });
-</script>
+
+// Fullscreen player state
+const showFullPlayer = computed(() => {
+  return playerState.showFullPlayer;
+});
+
+// Close fullscreen player on route change
+watch(() => route.path, () => {
+  if (playerState.showFullPlayer) {
+    playerActions.toggleFullPlayer();
+  }
+});
+</script>
+
+<style>
+/* Shared control button styles for both players */
+.control-btn {
+  background: none;
+  border: none;
+  color: rgb(var(--grey));
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.control-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.control-btn.primary {
+  background: rgb(var(--second));
+  color: rgb(var(--white));
+  width: 32px;
+  height: 32px;
+}
+
+.play-icon {
+  width: 14px;
+  height: 14px;
+  fill: rgb(var(--white));
+}
+
+.control-btn.primary:hover {
+  background: rgb(var(--second));
+  transform: scale(1.06);
+}
+
+.control-btn.secondary:hover {
+  color: rgb(var(--white));
+  background: rgba(var(--black),0.1);
+}
+
+.control-btn.secondary:hover .control-icon {
+  fill: rgb(var(--white));
+}
+
+.control-btn.active {
+  color: rgb(var(--main));
+  background: rgba(var(--second),0.1);
+}
+
+.control-btn.active .control-icon {
+  fill: rgb(var(--main));
+}
+
+.control-btn.active:hover {
+  color: rgb(var(--main));
+  opacity: 0.8;
+  background: rgba(var(--second),0.2);
+}
+</style>

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 = () => {