major redesign: move to rounded and extra spaceous UI

+ fix `play next` bug
+ add new folder banner image
+ add new now playing component
+ move to gray4 for accent color
+ increase image sizes, for clean UI

src/stores/modal.ts

@@ -2,41 +2,36 @@ import { defineStore } from "pinia";
 import { Playlist, Track } from "../interfaces";
 
 enum ModalOptions {
-  newPlaylist = "newPlaylist",
-  updatePlaylist = "editPlaylist",
-  welcome = "welcome",
+  newPlaylist,
+  updatePlaylist,
+  welcome,
 }
 
 export default defineStore("newModal", {
   state: () => ({
     title: "",
     options: ModalOptions,
-    component: "",
+    component: <any>null,
     props: <any>{},
     visible: false,
   }),
   actions: {
-    showModal(modalOption: string) {
+    showModal(modalOption: ModalOptions) {
       this.component = modalOption;
       this.visible = true;
     },
     showNewPlaylistModal(track?: Track) {
-      this.component = ModalOptions.newPlaylist;
-
       if (track) {
         this.props.track = track;
       }
-
-      this.visible = true;
+      this.showModal(ModalOptions.newPlaylist);
     },
     showEditPlaylistModal(playlist: Playlist) {
-      this.component = ModalOptions.updatePlaylist;
       this.props = playlist;
-      this.visible = true;
+      this.showModal(ModalOptions.updatePlaylist);
     },
     showWelcomeModal() {
-      this.component = ModalOptions.welcome;
-      this.visible = true;
+      this.showModal(ModalOptions.welcome);
     },
     hideModal() {
       this.visible = false;

src/stores/queue.ts

@@ -240,19 +240,25 @@ export default defineStore("Queue", {
     },
     playTrackNext(track: Track) {
       const Toast = useNotifStore();
+
+      const nextindex = this.current + 1;
+      const next: Track = this.tracklist[nextindex];
+
+      // if track is already next, skip
+      if (next?.trackid === track.trackid) {
+        Toast.showNotification("Track is already queued", NotifType.Info);
+        return;
+      }
+
+      // if tracklist is empty or current track is last, push track
+      // else insert track after current track
       if (this.current == this.tracklist.length - 1) {
         this.tracklist.push(track);
       } else {
-        const nextindex = this.current + 1;
-        const next: Track = this.tracklist[nextindex];
-
-        if (next.trackid === track.trackid) {
-          Toast.showNotification("Track is already queued", NotifType.Info);
-          return;
-        }
+        this.tracklist.splice(this.current + 1, 0, track);
       }
 
-      this.tracklist.splice(this.current + 1, 0, track);
+      // save queue
       this.updateNext(this.current);
       Toast.showNotification(
         `Added ${track.title} to queue`,