feat(client-electron): add help menu

marcincichocki · May 30, 2021 · a89355a · a89355a
1 parent 9adec4e
commit a89355a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/configs/webpack.config.main.ts b/configs/webpack.config.main.ts
@@ -1,5 +1,5 @@
 import { join } from 'path';
-import webpack from 'webpack';
+import webpack, { EnvironmentPlugin } from 'webpack';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 
 export const config: webpack.Configuration = {
@@ -23,4 +23,11 @@ export const config: webpack.Configuration = {
       },
     ],
   },
+  plugins: [
+    new EnvironmentPlugin([
+      'npm_package_version',
+      'npm_package_homepage',
+      'npm_package_bugs_url',
+    ]),
+  ],
 };
diff --git a/src/client-electron/main/index.ts b/src/client-electron/main/index.ts
@@ -1,4 +1,11 @@
-import { app, globalShortcut, ipcMain as ipc } from 'electron';
+import {
+  app,
+  globalShortcut,
+  ipcMain as ipc,
+  Menu,
+  MenuItemConstructorOptions,
+  shell,
+} from 'electron';
 import { Store } from './store';
 import { createBrowserWindows } from './windows';
 
@@ -31,6 +38,30 @@ async function main() {
     }
   });
 
+  ipc.on('show-help-menu', () => {
+    const template: MenuItemConstructorOptions[] = [
+      {
+        label: 'Homepage',
+        click() {
+          shell.openExternal(process.env.npm_package_homepage);
+        },
+      },
+      { type: 'separator' },
+      {
+        label: 'Report bug',
+        click() {
+          shell.openExternal(process.env.npm_package_bugs_url);
+        },
+      },
+    ];
+
+    const menu = Menu.buildFromTemplate(template);
+
+    menu.popup({
+      window: renderer,
+    });
+  });
+
   ipc.on('renderer:key-bind-change', (e, keyBind) => {
     globalShortcut.unregisterAll();
     globalShortcut.register(keyBind, onWorkerSolve);

diff --git a/src/client-electron/renderer/components/TitleBar.tsx b/src/client-electron/renderer/components/TitleBar.tsx
@@ -30,6 +30,13 @@ const CloseIcon = () => (
   </StyledSvg>
 );
 
+const MenuIcon = () => (
+  <StyledSvg>
+    <path fill="currentColor" d="M5.707 7l4.95 4.95-.707.707L5 7.707z" />
+    <path fill="currentColor" d="M14.9 7.707l-4.95 4.95-.707-.708L14.193 7z" />
+  </StyledSvg>
+);
+
 const StyledTitleBar = styled.nav`
   position: absolute;
   top: 0;
@@ -66,6 +73,9 @@ const IconButton = styled.button<{ close?: boolean }>`
 
 export const TitleBar = memo(() => (
   <StyledTitleBar>
+    <IconButton onClick={() => ipc.send('show-help-menu')}>
+      <MenuIcon></MenuIcon>
+    </IconButton>
     <IconButton onClick={() => ipc.send('app-minimize')}>
       <MinimizeIcon />
     </IconButton>