try adding playlists list to context menu - unsuccsessfully

src/components/FolderView/Header.vue

@@ -8,7 +8,7 @@
       <div class="text">
         <div class="icon image"></div>
         <div class="ellip">
-          {{ path.split("/").splice(-1) + "" }}
+          {{ path.split("/").splice(-2).join("") }}
         </div>
       </div>
     </div>

src/components/Notification.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="new-notification rounded" v-if="store.visible">
+    <div>{{ store.text }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNotificationStore } from "../stores/notification";
+const store = useNotificationStore();
+</script>
+<style lang="scss">
+.new-notification {
+  position: fixed;
+  z-index: 2000;
+  width: 25rem;
+  bottom: 2rem;
+  padding: $small;
+  left: 50%;
+  translate: -50%;
+  background-color: rgb(5, 62, 168);
+  display: grid;
+  place-items: center;
+
+  .link {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+}
+</style>

src/components/modal.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="new-playlist-modal" v-if="modal.visible">
+    <div class="bg" @click="modal.hideModal"></div>
+    <div class="m-content rounded">
+      <div class="heading">{{ modal.title }}</div>
+      <div class="cancel image" @click="modal.hideModal"></div>
+      <NewPlaylist
+        v-if="modal.component == modal.options.newPlaylist"
+        @hideModal="hideModal"
+        @title="title"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useModalStore from "../stores/modal";
+import NewPlaylist from "./modals/NewPlaylist.vue";
+
+const modal = useModalStore();
+
+/**
+ * Sets the modal title
+ * @param title
+ */
+function title(title: string) {
+  modal.setTitle(title);
+}
+
+/**
+ * Handle the emit to hide the modal
+ */
+function hideModal() {
+  modal.hideModal();
+}
+</script>
+
+<style lang="scss">
+.new-playlist-modal {
+  position: fixed;
+  z-index: 2000;
+  height: 100vh;
+  width: 100vw;
+  display: grid;
+  place-items: center;
+
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(12, 12, 12, 0.767);
+  }
+
+  .m-content {
+    width: 30rem;
+    background-color: $black;
+    padding: 1rem;
+    position: relative;
+
+    .cancel {
+      width: 2rem;
+      height: 2rem;
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      background-image: url("../assets/icons/plus.svg");
+      transform: rotate(45deg);
+
+      &:hover {
+        cursor: pointer;
+        transform: rotate(135deg);
+      }
+    }
+
+    
+  }
+}
+</style>

src/components/modals/NewPlaylist.vue

@@ -0,0 +1,69 @@
+<template>
+  <form @submit="create" class="new-p-form">
+    <label for="name">Playlist name</label>
+    <br />
+    <input
+      type="text"
+      class="rounded"
+      name="name"
+      id="modal-playlist-name-input"
+    />
+    <br />
+    <input type="submit" class="rounded" value="Create" />
+  </form>
+</template>
+
+<script setup lang="ts">
+import { createNewPlaylist } from "../../composables/playlists";
+
+const emit = defineEmits<{
+  (e: "title", title: string): void;
+  (e: "hideModal"): void;
+}>();
+
+emit("title", "New Playlist");
+
+function create(e: Event) {
+  e.preventDefault();
+  const name = (e.target as HTMLFormElement).elements["name"].value;
+
+  if (name.trim()) {
+    createNewPlaylist(name).then(() => emit("hideModal"));
+  }
+}
+</script>
+
+<style lang="scss">
+.new-p-form {
+  grid-gap: 1rem;
+  margin-top: 1rem;
+
+  label {
+    font-size: 0.9rem;
+    color: $gray1;
+  }
+
+  input[type="text"] {
+    margin: $small 0;
+    border: 2px solid $gray3;
+    background-color: transparent;
+    color: #fff;
+    width: 100%;
+    padding: 0.5rem;
+    font-size: 1rem;
+    outline: none;
+  }
+
+  input[type="submit"] {
+    margin: $small 0;
+    background-color: $accent;
+    color: #fff;
+    width: 7rem;
+    padding: 0.75rem;
+    font-size: 1rem;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  }
+}
+</style>

src/components/shared/SongItem.vue

@@ -64,18 +64,27 @@
 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";
 import { Track } from "../../interfaces.js";
 
 const contextStore = useContextStore();
+const modalStore = useModalStore();
+const playlistStore = usePlaylistStore();
+
 const context_on = ref(false);
 
 const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
-  contextStore.showContextMenu(e, trackContext(props.song));
+  contextStore.showContextMenu(
+    e,
+    trackContext(props.song, modalStore)
+  );
   context_on.value = true;
 
   contextStore.$subscribe((mutation, state) => {