Merge pull request #262 from Swiftzerr/main

Added create new playlist option to Add To Playlist context menu

src/renderer/views/components/add-to-playlist.ejs

@@ -1,15 +1,23 @@
 <script type="text/x-template" id="add-to-playlist">
     <template>
-        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
-             @contextmenu.self="app.resetState()">
+        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
             <div class="modal-window">
                 <div class="modal-header">
-                    <div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
+                    <div class="modal-title">{{app.getLz('action.addToPlaylist')}</div>
                     <button class="close-btn" @click="app.resetState()"></button>
                 </div>
                 <div class="modal-content">
-                    <sidebar-playlist :playlist-select="playlistSelect" v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
-                    </sidebar-playlist>
+                    <button class="playlist-item"
+                            @click="app.addSelectedToNewPlaylist()" style="width:100%;">
+                        <div class="icon"><%- include("../svg/plus.svg") %></div>
+                        <div class="name">{{app.getLz('action.createPlaylist')}</div>
+                    </button>
+                    <button class="playlist-item" 
+                    :class="{ focused: playlist.id == focused }"
+                    @click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">
+                        <div class="icon"><%- include("../svg/playlist.svg") %></div>
+                        <div class="name">{{ playlist.attributes.name }}</div>
+                    </button>
                 </div>
                 <div class="modal-search">
                     <div class="search-input-container" style="width:100%;margin: 16px 0;">
@@ -18,11 +26,11 @@
                                ref="searchInput"
                                style="width:100%;"
                                spellcheck="false"
-                               :placeholder="app.getLz('term.search') + '...'"
+                               placeholder="app.getLz('term.search') + '...'"
                                v-model="searchQuery"
                                @input="search()"
                                class="search-input">
-                    </div>
+                    </div>                
                 </div>
             </div>
         </div>

src/renderer/views/svg/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>