feat(desktop): implement electron menu plugin for handling menu actions

apps/desktop/src/main/config/menu.ts

@@ -2,7 +2,6 @@ import type { MenuItem, MenuItemConstructorOptions } from 'electron'
 import type { Lang } from 'mqttx'
 import { app, BrowserWindow, Menu, shell } from 'electron'
 import Store from 'electron-store'
-import { installCLI } from '../installCLI'
 import menuLabels from './menuLabels'
 
 // FIXME: https://github.com/sindresorhus/electron-store/issues/276
@@ -50,8 +49,7 @@ function getMenuTemplate(win: BrowserWindow, lang?: Lang) {
       {
         label: labels.installCLI,
         click: () => {
-          // TODO: Need to move the logic for displaying the installation status of CLI to the global scope, not just the settings page
-          installCLI()
+          win.webContents.send('menu-clicked', 'installCLI')
         },
       },
       { type: 'separator' },
@@ -75,7 +73,7 @@ function getMenuTemplate(win: BrowserWindow, lang?: Lang) {
           accelerator: 'CmdOrCtrl+N',
           click: () => {
             // TODO: implement new connection
-            win.webContents.send('menu-clicked', 'newConnections')
+            win.webContents.send('menu-clicked', 'newConnection')
           },
         },
         {

apps/desktop/src/preload/index.d.ts

@@ -18,6 +18,10 @@ declare global {
         get: <T = any>(key: string) => Promise<T>
         set: (key: string, value: any) => Promise<void>
       }
+      onMenuClicked: (callback: (
+        event: Electron.IpcRendererEvent,
+        type: 'about' | 'preferences' | 'checkForUpdate' | 'installCLI' | 'newConnection' | 'newWindow'
+      ) => void) => void
     }
   }
 }

apps/desktop/src/preload/index.ts

@@ -19,6 +19,9 @@ const api: Window['api'] = {
     get: key => ipcRenderer.invoke('store-send', { action: 'get', key }),
     set: (key, value) => ipcRenderer.invoke('store-send', { action: 'set', key, value }),
   },
+  onMenuClicked: callback => ipcRenderer.on('menu-clicked', (event, type) => {
+    callback(event, type)
+  }),
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

apps/desktop/src/renderer/src/main.ts

@@ -6,6 +6,7 @@ import { monacoEnvironment } from '@mqttx/ui'
 import { i18n } from '@mqttx/ui/i18n'
 
 import App from './App.vue'
+import { createElectronMenuPlugin } from './plugins/electronMenu'
 import { router } from './router'
 import '@mqttx/ui/styles.scss'
 import './assets/scss/main.scss'
@@ -15,10 +16,11 @@ monacoEnvironment()
 // Create Vue
 const app = createApp(App)
 const pinia = createPinia()
+const electronMenuPlugin = createElectronMenuPlugin()
 
 app.provide<PlatformType>('platformType', 'desktop')
 
-app.use(router).use(pinia)
+app.use(router).use(pinia).use(electronMenuPlugin)
 
 initTables().then(() => {
   const { settings } = useSettingsService()

apps/desktop/src/renderer/src/plugins/electronMenu.ts

@@ -0,0 +1,34 @@
+import type { App } from 'vue'
+
+export function createElectronMenuPlugin() {
+  return {
+    install(app: App) {
+      window.api.onMenuClicked((_event, type) => {
+        const router = app.config.globalProperties.$router
+        switch (type) {
+          case 'about':
+            router.push('/about')
+            break
+          case 'preferences':
+            router.push('/settings')
+            break
+          case 'checkForUpdate':
+            window.forceCheck = true
+            window.api.checkForUpdates()
+            break
+          case 'installCLI':
+            window.api.installCLI()
+            break
+          case 'newConnection':
+            router.push('/connections/0?oper=new')
+            break
+          case 'newWindow':
+            // TODO: implement new window
+            break
+          default:
+            console.error(`Unknown menu type: ${type}`)
+        }
+      })
+    },
+  }
+}