add comments to some store functions

- some refactors to modals

src/components/modals/NewPlaylist.vue

@@ -9,19 +9,25 @@
       id="modal-playlist-name-input"
     />
     <br />
-    <input type="submit" class="rounded" value="Create" />
+    <div class="submit">
+      <input type="submit" class="rounded" value="Create" />
+    </div>
   </form>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { createNewPlaylist } from "../../composables/playlists";
 import { Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
+import usePlaylistStore from "../../stores/playlists";
 
 const props = defineProps<{
-  track: Track;
+  track?: Track;
 }>();
+const route = useRoute();
+const playlistStore = usePlaylistStore();
 
 onMounted(() => {
   document.getElementById("modal-playlist-name-input").focus();
@@ -34,21 +40,29 @@ const emit = defineEmits<{
 
 emit("title", "New Playlist");
 
+/**
+ * Create a new playlist. If this modal is called with a track,
+ * add the track to the new playlist.
+ * @param e Event
+ */
 function create(e: Event) {
   e.preventDefault();
   const name = (e.target as HTMLFormElement).elements["name"].value;
 
   if (name.trim()) {
-    createNewPlaylist(name, props.track).then((status: boolean) => {
-      if (status) {
-        emit("hideModal");
-      }
+    createNewPlaylist(name, props.track).then((status) => {
+      emit("hideModal");
+
+      if (!status.success) return;
+
+      if (route.name !== "Playlists") return;
+
+      setTimeout(() => {
+        playlistStore.addPlaylist(status.playlist);
+      }, 600);
     });
   } else {
-    new Notification(
-      "Playlist name can't be empty",
-      NotifType.Error
-    );
+    new Notification("Playlist name can't be empty", NotifType.Error);
   }
 }
 </script>
@@ -74,16 +88,24 @@ function create(e: Event) {
     outline: none;
   }
 
+  .submit {
+    display: flex;
+    justify-content: flex-end;
+  }
+
   input[type="submit"] {
     margin: $small 0;
-    background-color: $accent;
-    color: #fff;
-    width: 7rem;
-    padding: 0.75rem;
+    background-color: rgba(40, 132, 252, 0.884) !important;
+    color: $white;
+    padding: $small 1rem;
     font-size: 1rem;
-    border: none;
+    border: solid 2px transparent !important;
     outline: none;
     cursor: pointer;
+
+    &:focus {
+      border: 2px solid $gray1 !important;
+    }
   }
 }
 </style>