feat: Add custom menubar

The menu is populated reactive from the store with no caching.
This doesn't seem to cause any performance problems so far.

Currently the menu is electron-specific.
In the future, we'll need a more runtime-independent way to build the
menu.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

3 files changed, 173 insertions, 1 deletions

diff --git a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
index 089e63a..5062da0 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
@@ -178,6 +178,10 @@ export default class ElectronServiceView implements ServiceView {
     this.browserView.webContents.stop();
   }
 
+  toggleDeveloperTools(): void {
+    this.browserView.webContents.toggleDevTools();
+  }
+
   setBounds(bounds: BrowserViewBounds): void {
     this.browserView.setBounds(bounds);
   }
diff --git a/packages/main/src/infrastructure/electron/impl/electronShell.ts b/packages/main/src/infrastructure/electron/impl/electronShell.ts
index 0e8c0c1..be1cbe3 100644
--- a/packages/main/src/infrastructure/electron/impl/electronShell.ts
+++ b/packages/main/src/infrastructure/electron/impl/electronShell.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { shell } from 'electron';
+import { app, shell } from 'electron';
 import { getLogger } from 'loglevel';
 
 import type MainEnv from '../../../stores/MainEnv';
@@ -31,6 +31,9 @@ const electronShell: MainEnv = {
       log.error('Failed to open', url, 'in external program', error);
     });
   },
+  openAboutDialog(): void {
+    app.showAboutPanel();
+  },
 };
 
 export default electronShell;
diff --git a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
new file mode 100644
index 0000000..5166719
--- /dev/null
+++ b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
@@ -0,0 +1,165 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Menu, MenuItemConstructorOptions } from 'electron';
+import { autorun } from 'mobx';
+import { addDisposer } from 'mobx-state-tree';
+
+import type MainStore from '../../../stores/MainStore';
+
+export default function setApplicationMenu(
+  store: MainStore,
+  devMode: boolean,
+  isMac: boolean,
+): void {
+  const dispose = autorun(() => {
+    const { settings, shared, visibleService } = store;
+    const { showLocationBar, selectedService } = settings;
+    const { canSwitchServices, services } = shared;
+
+    const template: MenuItemConstructorOptions[] = [
+      ...(isMac ? ([{ role: 'appMenu' }] as MenuItemConstructorOptions[]) : []),
+      { role: 'fileMenu' },
+      { role: 'editMenu' },
+      {
+        role: 'viewMenu',
+        submenu: [
+          {
+            label: 'Show Location Bar',
+            accelerator: 'CommandOrControl+Shift+L',
+            type: 'checkbox',
+            checked: showLocationBar,
+            click() {
+              settings.toggleLocationBar();
+            },
+          },
+          { type: 'separator' },
+          {
+            label: 'Reload',
+            accelerator: 'CommandOrControl+R',
+            enabled: selectedService !== undefined,
+            click() {
+              selectedService?.reload(false);
+            },
+          },
+          {
+            label: 'Force Reload',
+            accelerator: 'CommandOrControl+Shift+R',
+            enabled: selectedService !== undefined,
+            click() {
+              selectedService?.reload(true);
+            },
+          },
+          {
+            label: 'Toggle Developer Tools',
+            accelerator: 'CommandOrControl+Shift+I',
+            enabled: visibleService !== undefined,
+            click() {
+              visibleService?.toggleDeveloperTools();
+            },
+          },
+          { type: 'separator' },
+          ...(devMode
+            ? ([
+                {
+                  role: 'forceReload',
+                  label: 'Reload Sophie',
+                  accelerator: 'CommandOrControl+Shift+Alt+R',
+                },
+                {
+                  role: 'toggleDevTools',
+                  label: 'Toggle Sophie Developer Tools',
+                  accelerator: 'CommandOrControl+Shift+Alt+I',
+                },
+                { type: 'separator' },
+              ] as MenuItemConstructorOptions[])
+            : []),
+          { role: 'togglefullscreen' },
+        ],
+      },
+      {
+        label: 'Services',
+        submenu: [
+          {
+            label: 'Next Service',
+            accelerator: 'CommandOrControl+Tab',
+            enabled: canSwitchServices,
+            click() {
+              shared.activateNextService();
+            },
+          },
+          {
+            label: 'Previous Service',
+            accelerator: 'CommandOrControl+Shift+Tab',
+            enabled: canSwitchServices,
+            click() {
+              shared.activatePreviousService();
+            },
+          },
+          ...(services.length > 0
+            ? ([
+                { type: 'separator' },
+                ...services.map(
+                  (service, index): MenuItemConstructorOptions => ({
+                    label: service.config.name,
+                    type: 'radio',
+                    ...(index < 9
+                      ? {
+                          accelerator: `CommandOrControl+${index + 1}`,
+                        }
+                      : {}),
+                    checked: selectedService === service,
+                    click() {
+                      settings.setSelectedService(service);
+                    },
+                  }),
+                ),
+              ] as MenuItemConstructorOptions[])
+            : []),
+        ],
+      },
+      { role: 'windowMenu' },
+      {
+        role: 'help',
+        submenu: [
+          {
+            label: 'Gitlab',
+            click() {
+              store.openWebpageInBrowser();
+            },
+          },
+          ...(isMac
+            ? []
+            : ([
+                {
+                  role: 'about',
+                  click() {
+                    store.openAboutDialog();
+                  },
+                },
+              ] as MenuItemConstructorOptions[])),
+        ],
+      },
+    ];
+    const menu = Menu.buildFromTemplate(template);
+    Menu.setApplicationMenu(menu);
+  });
+  addDisposer(store, dispose);
+}