[client] minor refactors

src/components/Notification.vue

@@ -1,30 +1,47 @@
 <template>
-  <div
-    class="new-notif rounded"
-    :class="{ 'notif-error': notif.type == NotificationType.Error }"
-    v-if="notif.visible"
-  >
-    <div>{{ notif.text }}</div>
+  <div class="toasts" v-if="notifStore.notifs">
+    <div
+      class="new-notif rounded"
+      :class="[
+        { 'notif-error': notif.type == NotifType.Error },
+        {
+          'notif-info': notif.type == NotifType.Info,
+        },
+      ]"
+      v-for="notif in notifStore.notifs"
+    >
+      <div>{{ notif.text }}</div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useNotificationStore, NotificationType } from "../stores/notification";
+import { useNotifStore, NotifType } from "../stores/notification";
 
-const notif = useNotificationStore();
+const notifStore = useNotifStore();
 </script>
 <style lang="scss">
-.new-notif {
+.toasts {
   position: fixed;
-  z-index: 2000;
-  width: 25rem;
   bottom: 2rem;
-  padding: $small;
   left: 50%;
   translate: -50%;
-  background-color: rgb(5, 62, 168);
+  z-index: 100;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: $small;
+}
+
+.new-notif {
+  width: 20rem;
+  height: 3.5rem;
+  bottom: 2rem;
+  padding: $small;
+  background-color: $green;
   display: grid;
   place-items: center;
+  align-items: center;
+  box-shadow: 0px 0px 2rem rgb(0, 0, 0);
 
   .link {
     font-weight: bold;
@@ -35,4 +52,8 @@ const notif = useNotificationStore();
 .notif-error {
   background-color: $red;
 }
+
+.notif-info {
+  background-color: $gray2;
+}
 </style>

src/components/contextMenu.vue

@@ -32,6 +32,7 @@
           class="context-item"
           v-for="child in option.children"
           :key="child"
+          :class="[{ critical: child.critical }, child.type]"
           @click="child.action()"
         >
           <div class="label ellip">
@@ -56,11 +57,11 @@ const context = useContextStore();
   left: 0;
   width: 12rem;
   height: min-content;
-  z-index: 100000 !important;
+  z-index: 10;
   transform: scale(0);
 
   padding: $small;
-  background: $gray3;
+  background: $context;
   transform-origin: top left;
   font-size: 0.875rem;
 
@@ -74,6 +75,7 @@ const context = useContextStore();
     border-radius: $small;
     color: rgb(255, 255, 255);
     position: relative;
+    text-transform: capitalize;
 
     .more {
       height: 1.5rem;
@@ -90,7 +92,7 @@ const context = useContextStore();
       max-height: 21.25rem;
 
       padding: $small !important;
-      background: $gray3;
+      background-color: $context;
       transform: scale(0);
       transform-origin: left;
     }
@@ -173,7 +175,6 @@ const context = useContextStore();
 
 .context-normalizedY {
   .context-item > .children {
-    bottom: -0.5rem;
     transform-origin: bottom right;
   }
 }

src/components/modals/NewPlaylist.vue

@@ -16,6 +16,12 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { createNewPlaylist } from "../../composables/playlists";
+import { Track } from "../../interfaces";
+import { Notification, NotifType } from "../../stores/notification";
+
+const props = defineProps<{
+  track: Track;
+}>();
 
 onMounted(() => {
   document.getElementById("modal-playlist-name-input").focus();
@@ -33,7 +39,16 @@ function create(e: Event) {
   const name = (e.target as HTMLFormElement).elements["name"].value;
 
   if (name.trim()) {
-    createNewPlaylist(name).then(() => emit("hideModal"));
+    createNewPlaylist(name, props.track).then((status: boolean) => {
+      if (status) {
+        emit("hideModal");
+      }
+    });
+  } else {
+    new Notification(
+      "A Playlist name can not be empty",
+      NotifType.Error
+    );
   }
 }
 </script>

src/components/shared/SongItem.vue

@@ -65,7 +65,6 @@ import perks from "../../composables/perks.js";
 import state from "../../composables/state";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
-import usePlaylistStore from "../../stores/playlists";
 
 import { ref } from "vue";
 import trackContext from "../../contexts/track_context";
@@ -73,7 +72,6 @@ import { Track } from "../../interfaces.js";
 
 const contextStore = useContextStore();
 const modalStore = useModalStore();
-const playlistStore = usePlaylistStore();
 
 const context_on = ref(false);