Plug-in entries in sub-menu

src/i18n/en_US.jsonc

@@ -156,6 +156,8 @@
   "term.top": "Top",
   "term.version": "Version",
   "term.noVideos": "No videos found.",
+  "term.plugin": "Plug-in",
+  "term.pluginMenu": "Plug-in Menu",
   
   // Home
   "home.title": "Home",

src/main/base/browserwindow.ts

@@ -55,6 +55,7 @@ export class BrowserWindow {
                 "components/sidebar-playlist",
                 "components/spatial-properties",
                 "components/audio-settings",
+                "components/plugin-menu",
                 "components/audio-controls",
                 "components/qrcode-modal",
                 "components/equalizer",

src/renderer/index.js

@@ -25,6 +25,7 @@ const CiderFrontAPI = {
     },
     AddMenuEntry(entry) {
         app.pluginMenuEntries.push(entry)
+        app.pluginInstalled = true
     }
 }
 
@@ -76,6 +77,7 @@ const app = new Vue({
         platform: "",
         mk: {},
         quickPlayQuery: "",
+        pluginInstalled: false,
         pluginMenuEntries: [],
         lz: ipcRenderer.sendSync("get-i18n", "en_US"),
         lzListing: ipcRenderer.sendSync("get-i18n-listing"),
@@ -247,6 +249,7 @@ const app = new Vue({
             qrcode: false,
             equalizer: false,
             audioSettings: false,
+            pluginMenu: false,
             audioControls: false,
             showPlaylist: false,
         },

src/renderer/less/helpers.less

@@ -226,6 +226,7 @@
       }
 
       .name {
+        position: relative;
       }
 
       &:hover {

src/renderer/views/app/panels.ejs

@@ -22,6 +22,9 @@
 <transition name="modal">
     <audio-settings v-if="modals.audioSettings"></audio-settings>
 </transition>
+<transition name="modal">
+    <plugin-menu v-if="modals.pluginMenu"></plugin-menu>
+</transition>
 <transition name="modal">
     <eq-view v-if="modals.equalizer"></eq-view>
 </transition>

src/renderer/views/app/sidebar.ejs

@@ -101,6 +101,11 @@
                     <span class="usermenu-item-icon"><%- include("../svg/headphones.svg") %></span>
                     <span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
                 </button>
+                <button class="usermenu-item" v-if="pluginInstalled" 
+                        @click="modals.pluginMenu = true">
+                    <span class="usermenu-item-icon"><%- include("../svg/grid.svg") %></span>
+                    <span class="usermenu-item-name">{{$root.getLz('term.plugin')}}</span>
+                </button>
                 <button class="usermenu-item" @click="appRoute('about')">
                     <span class="usermenu-item-icon"><%- include("../svg/info.svg") %></span>
                     <span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
@@ -114,9 +119,6 @@
                             style="right:2.5px;"><%- include("../svg/log-out.svg") %></span>
                     <span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
                 </button>
-                <button class="usermenu-item" @click="entry.onClick()" v-for="entry in pluginMenuEntries">
-                    {{ entry.name }}
-                </button>
             </div>
         </div>
     </transition>

src/renderer/views/components/plugin-menu.ejs

@@ -0,0 +1,37 @@
+<script type="text/x-template" id="plugin-menu">
+  <!--template-->
+      <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">{{$root.getLz('term.pluginMenu')}}</div>
+                  <button class="close-btn" @click="app.resetState()"></button>
+              </div>
+              <div class="modal-content">
+                <button class="playlist-item" @click="entry.onClick(); closeMenu();" v-for="entry in app.pluginMenuEntries">
+                  <span class="icon"><%- include("../svg/grid.svg") %></span>
+                  <span class="name" style="top: 1px;">{{ entry.name }}</span>
+                </button>
+              </div>
+          </div>
+      </div>
+  <!--template-->
+</script>
+
+<script>
+  Vue.component('plugin-menu', {
+      template: '#plugin-menu',
+      data: function () {
+          return {
+              app: this.$root,
+          }
+      },
+      props: {},
+      mounted() {},
+      methods: {
+          closeMenu() {
+              app.modals.pluginMenu = false
+          },
+          },
+      }
+  );
+</script>

src/renderer/views/svg/grid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>