added some icons to context menus

src/renderer/assets/feather/heart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

src/renderer/assets/feather/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>

src/renderer/assets/feather/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

src/renderer/assets/feather/share-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>

src/renderer/assets/feather/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>

src/renderer/assets/feather/thumbs-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>

src/renderer/assets/feather/thumbs-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>

src/renderer/assets/feather/x-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

src/renderer/index.js

@@ -5,7 +5,7 @@ var CiderContextMenu = {
     Menu: function (event) {
         this.items = []
     },
-    Create(event, menudata) {
+    async Create(event, menudata) {
         var menuBackground = document.createElement("div");
         var menu = document.createElement("div");
         menu.classList.add("context-menu-body");
@@ -52,7 +52,10 @@ var CiderContextMenu = {
             }
             item.tabIndex = 0
             item.classList.add("context-menu-item")
-            item.innerHTML = menudata.items[i].name
+            if(menudata.items[i]["icon"]) {
+                item.innerHTML += `<div class="sidebar-icon">${await app.getSvgIcon(menudata.items[i]["icon"])}</div>`
+            }
+            item.innerHTML += menudata.items[i].name
             item.onclick = menudata.items[i].action
             menu.appendChild(item)
         }
@@ -2797,12 +2800,14 @@ const app = new Vue({
                 normal: {
                     items: [
                         {
+                            "icon": "./assets/feather/list.svg",
                             "name": "Add to Playlist...",
                             "action": function () {
                                 app.promptAddToPlaylist()
                             }
                         },
                         {
+                            "icon": "./assets/feather/plus.svg",
                             "id": "addToLibrary",
                             "name": "Add to Library...",
                             "disabled": false,
@@ -2812,6 +2817,7 @@ const app = new Vue({
                             }
                         },
                         {
+                            "icon": "./assets/feather/heart.svg",
                             "id": "love",
                             "name": "Love",
                             "disabled": true,
@@ -2820,6 +2826,7 @@ const app = new Vue({
                             }
                         },
                         {
+                            "icon": "./assets/feather/x-circle.svg",
                             "id": "unlove",
                             "name": "Unlove",
                             "disabled": true,
@@ -2828,6 +2835,7 @@ const app = new Vue({
                             }
                         },
                         {
+                            "icon": "./assets/feather/thumbs-down.svg",
                             "id": "dislike",
                             "name": "Dislike",
                             "disabled": true,
@@ -2836,6 +2844,7 @@ const app = new Vue({
                             }
                         },
                         {
+                            "icon": "./assets/feather/x-circle.svg",
                             "id": "undo_dislike",
                             "name": "Undo dislike",
                             "disabled": true,
@@ -2844,6 +2853,7 @@ const app = new Vue({
                             }
                         },
                         {
+                            "icon": "./assets/feather/radio.svg",
                             "name": "Start Radio",
                             "action": function () {
                                 app.mk.setStationQueue({song: item_id}).then(() => {

src/renderer/style.less

@@ -578,7 +578,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
   .context-menu-item {
     background: transparent;
-    display: block;
+    display: flex;
     width: 100%;
     text-align: left;
     color: #eee;

src/renderer/views/components/mediaitem-list-item.ejs

@@ -247,20 +247,12 @@
                     normal: {
                         items: [
                             {
+                                "icon": "./assets/feather/list.svg",
                                 "name": "Add to Playlist...",
                                 "action": function () {
                                     app.promptAddToPlaylist()
                                 }
                             },
-                            {
-                                "name": "Start Radio",
-                                "action": function () {
-                                    app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
-                                        app.mk.play()
-                                        app.selectedMediaItems = []
-                                    })
-                                }
-                            },
                             {
                                 "name": "Play Next",
                                 "action": function () {
@@ -278,6 +270,17 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/radio.svg",
+                                "name": "Start Radio",
+                                "action": function () {
+                                    app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
+                                        app.mk.play()
+                                        app.selectedMediaItems = []
+                                    })
+                                }
+                            },
+                            {
+                                "icon": "./assets/feather/heart.svg",
                                 "id": "love",
                                 "name": "Love",
                                 "disabled": true,
@@ -286,6 +289,7 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/x-circle.svg",
                                 "id": "unlove",
                                 "name": "Unlove",
                                 "disabled": true,
@@ -294,6 +298,7 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/thumbs-down.svg",
                                 "id": "dislike",
                                 "name": "Dislike",
                                 "disabled": true,
@@ -302,6 +307,7 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/x-circle.svg",
                                 "id": "undo_dislike",
                                 "name": "Undo dislike",
                                 "disabled": true,
@@ -310,18 +316,21 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/user.svg",
                                 "name": "Go to Artist",
                                 "action": function () {
                                     app.searchAndNavigate(self.item, 'artist')
                                 }
                             },
                             {
+                                "icon": "./assets/feather/disc.svg",
                                 "name": "Go to Album",
                                 "action": function () {
                                     app.searchAndNavigate(self.item, 'album')
                                 }
                             },
                             {
+                                "icon": "./assets/feather/share.svg",
                                 "name": "Share",
                                 "action": function () {
                                     self.app.copyToClipboard(self.item.attributes.url)

src/renderer/views/components/mediaitem-square.ejs

@@ -304,6 +304,14 @@
                     },
                     normal: {
                         items: [
+                            {
+                                "icon": "./assets/feather/list.svg",
+                                "id": "addToPlaylist",
+                                "name": "Add to Playlist...",
+                                "action": function () {
+                                    app.promptAddToPlaylist()
+                                }
+                            },
                             {
                                 "name": "Play Next",
                                 "action": function () {
@@ -321,13 +329,7 @@
                                 }
                             },
                             {
-                                "id": "addToPlaylist",
+                                "icon": "./assets/feather/plus.svg",
-                                "name": "Add to Playlist...",
-                                "action": function () {
-                                    app.promptAddToPlaylist()
-                                }
-                            },
-                            {
                                 "name": (this.addedToLibrary) ? "Remove from Library..." : "Add to Library...",
                                 "action": async function () {
                                     let item_id = self.item.attributes.playParams.id ?? self.item.id;
@@ -345,6 +347,7 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/heart.svg",
                                 "id": "love",
                                 "name": "Love",
                                 "disabled": true,
@@ -353,6 +356,7 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/x-circle.svg",
                                 "id": "unlove",
                                 "name": "Unlove",
                                 "disabled": true,
@@ -361,6 +365,7 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/thumbs-down.svg",
                                 "id": "dislike",
                                 "name": "Dislike",
                                 "disabled": true,
@@ -369,6 +374,7 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/x-circle.svg",
                                 "id": "undo_dislike",
                                 "name": "Undo dislike",
                                 "disabled": true,
@@ -377,6 +383,7 @@
                                 }
                             },
                             {
+                                "icon": "./assets/feather/share.svg",
                                 "name": "Share",
                                 "action": function () {
                                     self.app.copyToClipboard(self.item.attributes.url)