feat(main): add main menu

src/main/components/menu.ts

@@ -1,8 +1,13 @@
 import type { MenuItemConstructorOptions } from 'electron'
 import { Menu, BrowserWindow } from 'electron'
 
-export const createPopupMenu = (template: MenuItemConstructorOptions[]) => {
+export const createMenu = (template: MenuItemConstructorOptions[]) => {
   const menu = Menu.buildFromTemplate(template)
+  return menu
+}
+
+export const createPopupMenu = (template: MenuItemConstructorOptions[]) => {
+  const menu = createMenu(template)
   menu.popup({ window: BrowserWindow.getFocusedWindow()! })
 
   return menu

src/main/index.ts

@@ -1,11 +1,13 @@
-import { app, BrowserWindow, ipcMain } from 'electron'
+import { app, BrowserWindow, ipcMain, Menu } from 'electron'
 import path from 'path'
 import os from 'os'
 import { store } from './store'
 import { ApiServer } from './services/api/server'
 import { createDb } from './services/db'
 import { debounce } from 'lodash'
 import { subscribeToChannels } from './services/ipc'
+import { mainMenu } from './menu/main'
+import { subscribeToDialog } from './services/ipc/dialog'
 
 const isDev = process.env.NODE_ENV === 'development'
 
@@ -30,6 +32,8 @@ function createWindow () {
     }
   })
 
+  Menu.setApplicationMenu(mainMenu)
+
   if (isDev) {
     const rendererPort = process.argv[2]
     mainWindow.loadURL(`http://localhost:${rendererPort}`)

src/main/menu/main.ts

@@ -0,0 +1,109 @@
+import { createMenu } from '../components/menu'
+import type { MenuItemConstructorOptions } from 'electron'
+import { app, BrowserWindow } from 'electron'
+import { version, author } from '../../../package.json'
+
+const isDev = process.env.NODE_ENV === 'development'
+const isMac = process.platform === 'darwin'
+const year = new Date().getFullYear()
+
+if (isMac) {
+  app.setAboutPanelOptions({
+    applicationName: 'massCode',
+    applicationVersion: version,
+    version,
+    copyright: `${author.name}\n https://masscode.io \n©2019-${year}`
+  })
+}
+
+const appMenuCommon: Record<
+'preferences' | 'quit',
+MenuItemConstructorOptions
+> = {
+  preferences: {
+    label: 'Preferences',
+    accelerator: 'CommandOrControl+,',
+    click: () => {
+      console.log('ss')
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:preferences'
+      )
+    }
+  },
+  quit: {
+    label: 'Quit massCode',
+    role: 'quit'
+  }
+}
+
+const appMenuMac: MenuItemConstructorOptions[] = [
+  {
+    label: 'About massCode',
+    click: () => {
+      app.showAboutPanel()
+    }
+  },
+  {
+    type: 'separator'
+  },
+  {
+    ...appMenuCommon.preferences
+  },
+  {
+    type: 'separator'
+  },
+  {
+    label: 'Hide massCode',
+    role: 'hide'
+  },
+  {
+    label: 'Hide Others',
+    role: 'hideOthers'
+  },
+  {
+    label: 'Show All',
+    role: 'unhide'
+  },
+  {
+    type: 'separator'
+  },
+  {
+    ...appMenuCommon.quit
+  }
+]
+
+const appMenu: MenuItemConstructorOptions[] = [
+  { ...appMenuCommon.preferences },
+  { ...appMenuCommon.quit }
+]
+
+const helpMenu: MenuItemConstructorOptions[] = [
+  {
+    label: 'Toogle Dev tools',
+    role: 'toggleDevTools'
+  }
+]
+
+if (isDev) {
+  helpMenu.push({
+    label: 'Reload',
+    role: 'reload'
+  })
+}
+
+const menuItems: MenuItemConstructorOptions[] = [
+  {
+    label: 'massCode',
+    submenu: isMac ? appMenuMac : appMenu
+  },
+  {
+    label: 'Edit',
+    role: 'editMenu'
+  },
+  {
+    label: 'Help',
+    submenu: helpMenu
+  }
+]
+
+export const mainMenu = createMenu(menuItems)