add comments to some store functions

- some refactors to modals

src/components/contextMenu.vue

@@ -90,7 +90,7 @@ const context = useContextStore();
       right: -13rem;
       width: 13rem;
       top: -0.5rem;
-      height: 23.5rem;
+      max-height: 23.5rem;
 
       padding: $small !important;
       background-color: $context;

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>

src/components/modals/updatePlaylist.vue

@@ -40,7 +40,9 @@
         }"
       />
     </div>
-    <input type="submit" class="rounded" value="Update" />
+    <div class="submit">
+      <input type="submit" class="rounded" value="Update" />
+    </div>
   </form>
 </template>
 
@@ -113,40 +115,6 @@ function update_playlist(e: Event) {
 
 <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;
-
-    &:focus {
-      border: 2px solid transparent;
-      outline: solid 2px $gray1;
-    }
-  }
-
-  input[type="submit"] {
-    margin: $small 0;
-    background-color: $accent;
-    width: 7rem;
-    padding: 0.75rem;
-    font-size: 1rem;
-    border: none;
-    outline: none;
-    cursor: pointer;
-  }
-
   #upload {
     width: 100%;
     padding: $small;
@@ -184,22 +152,5 @@ function update_playlist(e: Event) {
       outline: solid 2px $gray1;
     }
   }
-
-  .colors {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
-    grid-gap: 0.5rem;
-    margin: 0.5rem 0;
-
-    .color {
-      height: 2.5rem;
-      width: 2.5rem;
-      border-radius: 2rem;
-    }
-
-    .selected {
-      border: 4px solid $white;
-    }
-  }
 }
 </style>

src/components/playlists/NewPlaylistCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="p-card rounded" id="new-playlist-card">
+  <div
+    class="p-card rounded"
+    id="new-playlist-card"
+    @click="Modal.showNewPlaylistModal()"
+  >
     <div class="gradient rounded"></div>
     <div class="plus image p-image"></div>
     <div>New Playlist</div>
@@ -7,6 +11,12 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import useModalStore from "../../stores/modal";
+
+const Modal = useModalStore();
+</script>
+
 <style lang="scss">
 #new-playlist-card {
   display: grid;
@@ -35,10 +45,10 @@
 
   &:hover {
     .gradient {
-      background-size: 300rem;
+      background-size: 29rem;
     }
     .image {
-      transform: rotate(270deg);
+      transform: rotate(180deg);
     }
   }
 }

src/components/playlists/PlaylistCard.vue

@@ -48,8 +48,8 @@ const props = defineProps<{
   width: 100%;
   padding: 0.75rem;
   transition: all 0.25s ease;
-  background-position: -10rem;
   position: relative;
+  background-color: #1c1c1e80;
 
   .p-image {
     min-width: 100%;