add comments to some store functions

- some refactors to modals

server/app/functions.py

@@ -74,7 +74,7 @@ def fetch_artist_images():
 
     artists = []
 
-    for song in tqdm(api.DB_TRACKS, desc="Gathering artists"):
+    for song in tqdm(api.DB_TRACKS, desc="Finding artists"):
         this_artists = song["artists"].split(", ")
 
         for artist in this_artists:

src/assets/css/_variables.scss

@@ -24,15 +24,16 @@ $gray3: rgb(72, 72, 74);
 $gray4: rgb(58, 58, 60);
 $gray5: rgb(44, 44, 46);
 
-$red: #fa4f55;
+
-$blue: #0960ef;
+$red: #FF453A;
+$blue: #0A84FF;
 $green: rgb(20, 160, 55);
 $yellow: rgb(255, 214, 10);
 $orange: rgb(255, 159, 10);
 $pink: rgb(255, 55, 95);
-$purple: rgb(191, 90, 242);
+$purple: #bf5af2;
 $brown: rgb(172, 142, 104);
-$indigo: rgb(94, 92, 230);
+$indigo: #5E5CE6;
 $teal: rgb(64, 200, 224);
 
 // 60 30 10

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 />
+    <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) => {
+    createNewPlaylist(name, props.track).then((status) => {
-      if (status) {
       emit("hideModal");
-      }
+
+      if (!status.success) return;
+
+      if (route.name !== "Playlists") return;
+
+      setTimeout(() => {
+        playlistStore.addPlaylist(status.playlist);
+      }, 600);
     });
   } else {
-    new Notification(
+    new Notification("Playlist name can't be empty", NotifType.Error);
-      "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;
+    background-color: rgba(40, 132, 252, 0.884) !important;
-    color: #fff;
+    color: $white;
-    width: 7rem;
+    padding: $small 1rem;
-    padding: 0.75rem;
     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>
+    <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%;

src/composables/playlists.ts

@@ -7,7 +7,10 @@ import state from "./state";
  * @param playlist_name The name of the playlist to create.
  */
 async function createNewPlaylist(playlist_name: string, track?: Track) {
-  let status = false;
+  let status = {
+    success: false,
+    playlist: <Playlist>{},
+  };
 
   await axios
     .post(state.settings.uri + "/playlist/new", {
@@ -22,7 +25,8 @@ async function createNewPlaylist(playlist_name: string, track?: Track) {
         }, 1000);
       }
 
-      status = true;
+      status.success = true;
+      status.playlist = res.data.playlist;
     })
     .catch((err) => {
       if (err.response.status == 409) {

src/stores/album.ts

@@ -14,6 +14,12 @@ export default defineStore("album", {
     bio: null,
   }),
   actions: {
+    /**
+     * Fetches a single album information, artists and its tracks from the server
+     * using the title and album-artist of the album.
+     * @param title title of the album
+     * @param albumartist artist of the album
+     */
     async fetchTracksAndArtists(title: string, albumartist: string) {
       const tracks = await getAlbumTracks(title, albumartist);
       const artists = await getAlbumArtists(title, albumartist);
@@ -22,6 +28,11 @@ export default defineStore("album", {
       this.info = tracks.info;
       this.artists = artists;
     },
+    /**
+     * Fetches the album bio from the server
+     * @param title title of the album
+     * @param albumartist artist of the album
+     */
     fetchBio(title: string, albumartist: string) {
       this.bio = null;
       getAlbumBio(title, albumartist).then((bio) => {

src/stores/modal.ts

@@ -19,9 +19,13 @@ export default defineStore("newModal", {
       this.component = modalOption;
       this.visible = true;
     },
-    showNewPlaylistModal(track: Track) {
+    showNewPlaylistModal(track?: Track) {
       this.component = ModalOptions.newPlaylist;
+
+      if (track) {
         this.props.track = track;
+      }
+      
       this.visible = true;
     },
     showEditPlaylistModal(playlist: Playlist) {

src/stores/p.ptracks.ts

@@ -8,11 +8,21 @@ export default defineStore("playlist-tracks", {
     tracks: <Track[]>[],
   }),
   actions: {
+    /**
+     * Fetches a single playlist information, and its tracks from the server
+     * @param playlistid The id of the playlist to fetch
+     */
     async fetchAll(playlistid: string) {
       const playlist = await getPlaylist(playlistid);
+
       this.info = playlist.info;
       this.tracks = playlist.tracks;
     },
+    /**
+     * Updates the playlist header info. This is used when the playlist is
+     * updated.
+     * @param info Playlist info
+     */
     updatePInfo(info: Playlist) {
       this.info = info;
     },

src/stores/playlists.ts

@@ -7,10 +7,22 @@ export default defineStore("playlists", {
     playlists: <Playlist[]>[],
   }),
   actions: {
+    /**
+     * Fetch all playlists from the server
+     */
     async fetchAll() {
       const playlists = await getAllPlaylists();
 
       this.playlists = playlists;
     },
+    /**
+     * Adds a single playlist to the store
+     * @param playlist Playlist to add to the store
+     * @returns void
+     */
+    addPlaylist(playlist: Playlist) {
+      // add at the beginning
+      this.playlists.unshift(playlist);
+    },
   },
 });