playlist folders can now be renamed and created, folders and playlists names can now be edited with context menu

src/renderer/index.js

@@ -658,17 +658,51 @@ const app = new Vue({
                         action: () => {
                             this.newPlaylist()
                         }
+                    },
+                    {
+                        name: "New Playlist Folder",
+                        action: () => {
+                            this.newPlaylistFolder()
+                        }
                     }
                 ]
             }
             CiderContextMenu.Create(event, menu)
         },
-        async editPlaylist(id, name = "New Playlist") {
+        async editPlaylistFolder(id, name = "New Playlist") {
             let self = this
-            await app.mk.api.library.editPlaylist(id, {name: name}).then(res => {
+            this.mk.api.v3.music(
+                `/v1/me/library/playlist-folders/${id}`,
+                {},
+                {
+                    fetchOptions: {
+                        method: "PATCH",
+                        body: JSON.stringify({
+                            attributes: {name: name}
+                        })
+                    }
+                }
+            ).then(res => {
                 self.refreshPlaylists()
             })
         },
+        async editPlaylist(id, name = "New Playlist") {
+            let self = this
+            this.mk.api.v3.music(
+                `/v1/me/library/playlists/${id}`,
+                {},
+                {
+                    fetchOptions: {
+                        method: "PATCH",
+                        body: JSON.stringify({
+                            attributes: {name: name}
+                        })
+                    }
+                }
+            ).then(res => {
+                    self.refreshPlaylists()
+                })
+        },
         copyToClipboard(str) {
             navigator.clipboard.writeText(str)
         },
@@ -1718,7 +1752,8 @@ const app = new Vue({
                 this.getMadeForYou(attempt + 1)
             }
         },
-        createPlaylistFolder(name = "New Folder") {
+        newPlaylistFolder(name = "New Folder") {
+            let self = this
             this.mk.api.v3.music(
                 "/v1/me/library/playlist-folders/",
                 {},
@@ -1730,10 +1765,20 @@ const app = new Vue({
                         })
                     }
                 }
-            ).then(() => {
+            ).then((res) => {
+                let playlist = (res.data.data[0])
+                self.playlists.listing.push({
+                    id: playlist.id,
+                    attributes: {
+                        name: playlist.attributes.name
+                    },
+                    type: "library-playlist-folders",
+                    parent: "p.playlistsroot"
+                })
+                self.sortPlaylists()
                 setTimeout(() => {
                     app.refreshPlaylists()
-                }, 3000)
+                }, 13000)
             })
         },
         unauthorize() {

src/renderer/views/components/sidebar-playlist.ejs

@@ -8,7 +8,10 @@
                 @drop="onDrop"
                 :href="item.href"
                 @click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
-            {{ item.attributes.name }}
+            <template v-if="!renaming">
+                {{ item.attributes.name }}
+            </template>
+            <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
         </button>
         <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-else
                 :class="[{'folder-button-active': folderOpened}, isPlaylistSelected]"
@@ -20,7 +23,10 @@
                 @click='getPlaylistChildren(item)'>
             <span v-if="!folderOpened">📁</span>
             <span v-else>📂</span>
-            {{ item.attributes.name }}
+            <template v-if="!renaming">
+                {{ item.attributes.name }}
+            </template>
+            <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
         </button>
         <div class="folder-body" v-if="item.type === 'library-playlist-folders' && folderOpened">
             <template v-if="children.length != 0">
@@ -46,10 +52,20 @@
             return {
                 folderOpened: false,
                 children: [],
-                playlistRoot: "p.playlistsroot"
+                playlistRoot: "p.playlistsroot",
+                renaming: false
             }
         },
         methods: {
+            rename() {
+                this.renaming = false
+
+                if(this.item.type === "library-playlist-folders") {
+                    this.$root.editPlaylistFolder(this.item.id, this.item.attributes.name)
+                }else{
+                    this.$root.editPlaylist(this.item.id, this.item.attributes.name)
+                }
+            },
             async getChildren() {
                 let self = this
                 this.children = []
@@ -106,6 +122,16 @@
                                 setTimeout(()=>{self.getChildren()}, 2000)
                             }
                         },
+                        "rename": {
+                            name: "Rename",
+                            action: () => {
+                                this.renaming = true
+                                setTimeout(()=>{
+                                    document.querySelector(".pl-rename-field").focus()
+                                    document.querySelector(".pl-rename-field").select()
+                                }, 100)
+                            }
+                        },
                         "deleteFromPlaylist": {
                             name: "Delete from library",
                             action: () => {

src/renderer/views/pages/cider-playlist.ejs

@@ -173,7 +173,12 @@
                 }
             },
             editPlaylist() {
-                app.editPlaylist(this.data.id, this.data.attributes.name);
+                this.app.editPlaylist(this.data.id, this.data.attributes.name);
+                this.app.playlists.listing.forEach(playlist => {
+                    if (playlist.id == this.data.id) {
+                        playlist.attributes.name = this.data.attributes.name
+                    }
+                })
                 this.nameEditing = false
             },
             addToLibrary(id) {