🔷 refactor context menu to accept context src

🔷 add a getCurrentDate function to get formatted date

src/components/FolderView/SongList.vue

@@ -25,7 +25,6 @@
         <div class="text">Nothing down here 😑</div>
       </div>
     </div>
-    <div v-else ref="songtitle"></div>
   </div>
 </template>
 

src/components/PlaylistView/Header.vue

@@ -12,6 +12,7 @@
       <div class="info">
         <div class="btns">
           <PlayBtnRect :source="playSources.playlist" />
+          <Option @showDropdown="showDropdown" :src="context.src" />
         </div>
         <div class="duration">
           <span v-if="props.info.count == 0">No Tracks</span>
@@ -37,11 +38,15 @@
 </template>
 
 <script setup lang="ts">
-import { playSources } from "../../composables/enums";
+import { playSources, ContextSrc } from "../../composables/enums";
 import { Playlist } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import useModalStore from "../../stores/modal";
+import Option from "../shared/Option.vue";
+import pContext from "../../contexts/playlist";
+import useContextStore from "../../stores/context";
 
+const context = useContextStore();
 const modal = useModalStore();
 
 const props = defineProps<{
@@ -51,6 +56,10 @@ const props = defineProps<{
 function editPlaylist() {
   modal.showEditPlaylistModal(props.info);
 }
+
+function showDropdown(e: any) {
+  context.showContextMenu(e, pContext(), ContextSrc.PHeader);
+}
 </script>
 
 <style lang="scss">
@@ -63,6 +72,7 @@ function editPlaylist() {
   border-radius: 0.75rem;
   color: $white;
   background-color: transparent;
+  z-index: 0;
 
   .gradient {
     position: absolute;
@@ -160,6 +170,8 @@ function editPlaylist() {
 
     .btns {
       margin-top: $small;
+      display: flex;
+      gap: $small;
     }
   }
 }

src/components/contextMenu.vue

@@ -12,6 +12,7 @@
         'context-many-kids': context.hasManyChildren(),
       },
     ]"
+    id="context-menu"
     :style="{
       left: context.x + 'px',
       top: context.y + 'px',
@@ -56,7 +57,6 @@ const context = useContextStore();
   top: 0;
   left: 0;
   width: 12rem;
-  height: min-content;
   z-index: 10;
   transform: scale(0);
 

src/components/shared/SongItem.vue

@@ -67,6 +67,7 @@
 import perks from "../../composables/perks.js";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
+import { ContextSrc } from "../../composables/enums";
 
 import { ref } from "vue";
 import trackContext from "../../contexts/track_context";
@@ -80,7 +81,9 @@ const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
-  contextStore.showContextMenu(e, trackContext(props.song, modalStore));
+  const menus = trackContext(props.song, modalStore);
+
+  contextStore.showContextMenu(e, menus, ContextSrc.Track);
   context_on.value = true;
 
   contextStore.$subscribe((mutation, state) => {

src/components/shared/TrackItem.vue

@@ -39,6 +39,7 @@ import { ref } from "vue";
 import perks from "../../composables/perks";
 import trackContext from "../../contexts/track_context";
 import { Track } from "../../interfaces";
+import { ContextSrc } from "../../composables/enums";
 
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
@@ -58,7 +59,9 @@ const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
-  contextStore.showContextMenu(e, trackContext(props.track, modalStore));
+  const menus = trackContext(props.track, modalStore);
+
+  contextStore.showContextMenu(e, menus, ContextSrc.Track);
   context_on.value = true;
 
   contextStore.$subscribe((mutation, state) => {