playlist folders can now be opened

added sidebar-playlist component

src/renderer/index.js

@@ -619,7 +619,24 @@ const app = new Vue({
         async refreshPlaylists() {
             let self = this
             this.apiCall('https://api.music.apple.com/v1/me/library/playlist-folders/p.playlistsroot/children/', res => {
+                console.log(res)
                 self.playlists.listing = res.data
+                self.playlists.listing.forEach(playlist => {
+                    if(playlist.type === "library-playlist-folders") {
+                        self.mk.api.library.playlistFolderChildren(playlist.id).then(children => {
+                            playlist.children = children
+                        })
+                    }
+                })
+                self.playlists.listing.sort((a, b) => {
+                    if (a.type === "library-playlist-folders" && b.type !== "library-playlist-folders") {
+                        return -1
+                    } else if (a.type !== "library-playlist-folders" && b.type === "library-playlist-folders") {
+                        return 1
+                    } else {
+                        return 0
+                    }
+                })
             })
         },
         playlistHeaderContextMenu(event) {
@@ -1706,6 +1723,24 @@ const app = new Vue({
                 this.getMadeForYou(attempt + 1)
             }
         },
+        createPlaylistFolder(name = "New Folder") {
+            this.mk.api.v3.music(
+                "/v1/me/library/playlist-folders/",
+                {},
+                {
+                    fetchOptions: {
+                        method: "POST",
+                        body: JSON.stringify({
+                            attributes: {name: name}
+                        })
+                    }
+                }
+            ).then(()=>{
+                setTimeout(() => {
+                    app.refreshPlaylists()
+                }, 3000)
+            })
+        },
         unauthorize() {
             this.mk.unauthorize()
         },

src/renderer/style.less

@@ -1646,6 +1646,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Cider */
 
+.sidebar-playlist {
+  .folder-button-active {
+    background: rgb(255 255 255 / 12%);
+  }
+  .folder-body {
+    background: #ffffff0a;
+    border-radius: 10px;
+    padding: 1px 6px;
+  }
+}
+
 .modal-fullscreen {
   display: flex;
   justify-content: center;

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

@@ -0,0 +1,52 @@
+<script type="text/x-template" id="sidebar-playlist">
+    <div class="sidebar-playlist">
+        <button class="app-sidebar-item" :key="item.id" v-if="item.type != 'library-playlist-folders'"
+                @contextmenu="$root.playlistContextMenu($event, item.id)"
+                @dragover="()=>{}"
+                :href="item.href"
+                @click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
+            {{ item.attributes.name }}
+        </button>
+        <button class="app-sidebar-item" :key="item.id" v-else
+                :class="{'folder-button-active': folderOpened}"
+                @contextmenu="$root.playlistContextMenu($event, item.id)"
+                @dragover="()=>{}"
+                :href="item.href"
+                @click='toggleFolder'>
+            <span v-if="!folderOpened">📁</span>
+            <span v-else>📂</span>
+            {{ item.attributes.name }}
+        </button>
+        <div class="folder-body" v-if="item.type === 'library-playlist-folders' && folderOpened">
+            <button class="app-sidebar-item" v-for="child in item.children" :key="child.id" v-if="child.type != 'library-playlist-folders'"
+                    @contextmenu="$root.playlistContextMenu($event, child.id)"
+                    @dragover="()=>{}"
+                    :href="child.href"
+                    @click='$root.appRoute(`playlist_` + child.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
+                {{ child.attributes.name }}
+            </button>
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('sidebar-playlist', {
+        template: '#sidebar-playlist',
+        props: {
+            item: {
+                type: Object,
+                required: true
+            }
+        },
+        data: function () {
+            return {
+                folderOpened: false
+            }
+        },
+        methods: {
+            toggleFolder() {
+                this.folderOpened = !this.folderOpened;
+            }
+        }
+    });
+</script>

src/renderer/views/main.ejs

@@ -183,14 +183,7 @@
                         <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
                             Playlists
                         </div>
-                        <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
+                        <sidebar-playlist v-for="item in playlists.listing" :item="item"></sidebar-playlist>
-                                v-if="item.attributes.name"
-                                @contextmenu="playlistContextMenu($event, item.id)"
-                                @dragover="()=>{}"
-                                :href="item.href"
-                                @click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(page.substring(9))'>
-                            {{ item.attributes.name }}
-                        </button>
                     </div>
                     <transition name="wpfade">
                         <div class="usermenu-container" v-if="chrome.menuOpened">
@@ -557,6 +550,8 @@
     </button>
 </script>
 
+<!-- Playlist Listing -->
+<%- include('components/sidebar-playlist') %>
 <!-- Spatial Properties -->
 <%- include('components/spatial-properties') %>
 <!-- Add to playlist -->