Changed playlist description to prefer small and standard/large description on more press (Prevents cluttered look)

Changed playlist folder icon to reflect current UI design. (Removed alternative button in v-if and just added check in icon and click)
Fixed playlist name checking, now tries for curatorName

src/renderer/style.less

@@ -2281,8 +2281,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       }
 
       .playlist-artist {
-        font-weight: 500;
+        font-size: 20px;
-        font-size: 1.6rem;
         margin-bottom: 6px;
         margin-right: 6px;
         flex-shrink: unset;

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

@@ -1,33 +1,18 @@
 <script type="text/x-template" id="sidebar-playlist">
     <div class="sidebar-playlist" :key="item.id">
-        <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-if="item.type != 'library-playlist-folders'"
+        <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id"
-                :class="{'active': $root.page.includes(item.id)}"
+                :class="item.type != 'library-playlist-folders' ? {'active': $root.page.includes(item.id)} : [{'folder-button-active': folderOpened}, isPlaylistSelected]"
                 @contextmenu="playlistContextMenu($event, item.id)"
                 @dragstart="startDrag($event, item)"
                 @dragover="dragOver"
                 @drop="onDrop"
                 :href="item.href"
-                @click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
+                @click='item.type != "library-playlist-folders" ? openPlaylist(item) : getPlaylistChildren(item)'>
             <template v-if="!renaming">
                 <div class="sidebar-icon" v-html="icon"></div> {{ 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]"
-                @contextmenu="playlistContextMenu($event, item.id)"
-                @dragstart="startDrag($event, item)"
-                @dragover="dragOver"
-                @drop="onDrop"
-                :href="item.href"
-                @click='getPlaylistChildren(item)'>
-            <span v-if="!folderOpened">📁</span>
-            <span v-else>📂</span>
-            <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">
                 <sidebar-playlist v-for="item in children" :item="item" :key="item.id"></sidebar-playlist>
@@ -58,7 +43,11 @@
             }
         },
         async mounted() {
+            if (this.item.type !== "library-playlist-folders") {
                 this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
+            } else {
+                this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
+            }
         },
         methods: {
             rename() {
@@ -181,6 +170,11 @@
                 evt.dataTransfer.effectAllowed = 'move'
                 evt.dataTransfer.setData('text/plain', JSON.stringify(this.item))
             },
+            openPlaylist(item) {
+                this.$root.appRoute(`playlist_` + item.id);
+                this.$root.showingPlaylist = [];
+                this.$root.getPlaylistFromID(this.$root.page.substring(9))
+            },
             getPlaylistChildren(item) {
                 let self = this
                 this.children = []

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

@@ -36,13 +36,13 @@
                                                                                    @change="editPlaylist"
                                                                                    @keydown.enter="editPlaylist"/></div>
                             <div class="playlist-artist item-navigate"
-                                 v-if="data.attributes && data.attributes.artistName"
+                                 v-if="getArtistName(data) != ''"
-                                 @click="if(data.attributes && data.attributes.artistName){ app.searchAndNavigate(data,'artist')}">
+                                 @click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
-                                {{data.attributes ? (data.attributes.artistName ?? '') :''}}
+                                {{getArtistName(data)}}
                             </div>
-                            <div class="playlist-desc" v-if="data.attributes.editorialNotes">
+                            <div class="playlist-desc" v-if="getDescription(data) != ''">
                                 <div class="content"
-                                     v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
+                                     v-html="getDescription(data)"></div>
                                 <button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">
                                     More
                                 </button>
@@ -161,6 +161,34 @@
                     }
                 })
             },
+            getDescription(data) {
+                console.log(data.attributes)
+                if (data.attributes.editorialNotes) {
+                    if (data.attributes.editorialNotes.hasOwnProperty('short')) {
+                        return data.attributes.editorialNotes.short
+                    } else if (data.attributes.editorialNotes.hasOwnProperty('standard')) {
+                        return data.attributes.editorialNotes.standard
+                    }
+                } else if (data.attributes.description) {
+                    if (data.attributes.description.hasOwnProperty('short')) {
+                        return data.attributes.description.short
+                    } else if (data.attributes.description.hasOwnProperty('standard')) {
+                        return data.attributes.description.standard
+                    }
+                }
+                return ''
+            },
+            getArtistName(data) {
+                if (data.attributes.artistName) {
+                    return data.attributes.artistName
+                } else if (data.attributes.artist) {
+                    return data.attributes.artist.attributes.name
+                } else if (data.attributes.curatorName) {
+                    return data.attributes.curatorName
+                } else {
+                    return ""
+                }
+            },
             async isInLibrary() {
                 if (this.data.type && !this.data.type.includes("library")) {
                     // please keep using vars here