refactor: show electron dev tools

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -105,23 +105,19 @@ function NavigationMenu(props: NavigationMenuProps) {
             >
               <IoLockClosedOutline />
               Editor
-              <IoArrowUp className={style.linkIcon} />
             </Link>
             <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
               <IoLockClosedOutline />
               Cuesheet
-              <IoArrowUp className={style.linkIcon} />
             </ClientLink>
             <ClientLink to='op' current={location.pathname === '/op'}>
               <IoLockClosedOutline />
               Operator
-              <IoArrowUp className={style.linkIcon} />
             </ClientLink>
             <hr className={style.separator} />
             {navigatorConstants.map((route) => (
               <ClientLink key={route.url} to={route.url} current={location.pathname === `/${route.url}`}>
                 {route.label}
-                <IoArrowUp className={style.linkIcon} />
               </ClientLink>
             ))}
           </DrawerBody>
@@ -147,6 +143,7 @@ function ClientLink(props: PropsWithChildren<ClientLinkProps>) {
     return (
       <button className={classes} tabIndex={0} onClick={(event) => handleLinks(event, to)}>
         {children}
+        <IoArrowUp className={style.linkIcon} />
       </button>
     );
   }

apps/client/src/common/hooks/useElectronEvent.ts

@@ -1,11 +1,31 @@
-export default function useElectronEvent() {
-  const isElectron = window?.process?.type === 'renderer';
+import { useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
-  const sendToElectron = (channel: string, args?: string | Record<string, unknown>) => {
-    if (isElectron) {
-      window?.ipcRenderer.send(channel, args);
+const isElectron = window.process?.type === 'renderer';
+const ipcRenderer = isElectron ? window.require('electron').ipcRenderer : null;
+
+export default function useElectronEvent() {
+  const navigate = useNavigate();
+
+  const sendToElectron = useCallback((channel: string, args?: string | Record<string, unknown>) => {
+    if (isElectron && ipcRenderer) {
+      ipcRenderer.send(channel, args);
     }
-  };
+  }, []);
+
+  // listen to requests to change the editor location
+  useEffect(() => {
+    if (isElectron) {
+      ipcRenderer.on('request-editor-location', (_event: unknown, location: string) => {
+        navigate(location, { relative: 'route' });
+      });
+    }
+
+    // Clean the listener after the component is dismounted
+    return () => {
+      ipcRenderer?.removeAllListeners();
+    };
+  }, [navigate]);
 
   return { isElectron, sendToElectron };
 }

apps/electron/src/main.js

@@ -113,6 +113,14 @@ function escalateError(error) {
   dialog.showErrorBox('An unrecoverable error occurred', error);
 }
 
+/**
+ * Allows electron to ask react app redirect
+ * @param string location
+ */
+function redirectWindow(location) {
+  win.webContents.send('request-editor-location', location);
+}
+
 // Ensure there isn't another instance of the app running already
 const lock = app.requestSingleInstanceLock();
 if (!lock) {
@@ -182,14 +190,8 @@ app.whenReady().then(() => {
     .then((port) => {
       const clientUrl = getClientUrl(port);
       const serverUrl = getServerUrl(port);
-      const menu = getApplicationMenu(
-        askToQuit,
-        clientUrl,
-        serverUrl,
-        (path) => {
-          win.loadURL(`${clientUrl}/${path}`);
-        },
-        (url) => win.webContents.downloadURL(url),
+      const menu = getApplicationMenu(askToQuit, clientUrl, serverUrl, redirectWindow, (url) =>
+        win.webContents.downloadURL(url),
       );
       Menu.setApplicationMenu(menu);
 

apps/electron/src/menu/applicationMenu.js

@@ -4,6 +4,7 @@ const {
   linkToGitHub,
   linkToDocs,
   linkToDiscord,
+  isProduction,
   isMac,
   releaseTag,
   projectsPath,
@@ -30,6 +31,7 @@ function getApplicationMenu(askToQuit, clientUrl, serverUrl, redirectWindow, dow
     makeViewMenu(clientUrl),
     makeSettingsMenu(redirectWindow),
     makeHelpMenu(redirectWindow),
+    ...(isProduction ? [] : [{ label: 'Dev', submenu: [{ role: 'toggleDevTools' }] }]),
   ];
   return Menu.buildFromTemplate(template);
 }
@@ -79,15 +81,15 @@ function makeFileMenu(serverUrl, redirectWindow, download) {
     submenu: [
       {
         label: 'New project...',
-        click: () => redirectWindow('settings=project__manage&create=true'),
+        click: () => redirectWindow('/editor?settings=project__manage&create=true'),
       },
       {
         label: 'Edit project info',
-        click: () => redirectWindow('editor?settings=project__data'),
+        click: () => redirectWindow('/editor?settings=project__data'),
       },
       {
         label: 'Manage projects...',
-        click: () => redirectWindow('editor?settings=project__manage'),
+        click: () => redirectWindow('/editor?settings=project__manage'),
       },
       {
         label: 'Download project',
@@ -156,29 +158,91 @@ function makeSettingsMenu(redirectWindow) {
     label: 'Settings',
     submenu: [
       {
-        label: 'Open settings',
+        label: 'Open Settings',
         accelerator: 'CommandOrControl+,',
-        click: () => redirectWindow('editor?settings=project'),
+        click: () => redirectWindow('/editor?settings=project'),
       },
       {
-        label: 'App settings',
-        click: () => redirectWindow('editor?settings=general'),
+        label: 'Project',
+        submenu: [
+          {
+            label: 'Project data',
+            click: () => redirectWindow('/editor?settings=project__data'),
+          },
+          {
+            label: 'Manage projects',
+            click: () => redirectWindow('/editor?settings=project__manage'),
+          },
+        ],
       },
       {
-        label: 'Editor settings',
-        click: () => redirectWindow('editor?settings=general__editor'),
+        label: 'App Settings',
+        submenu: [
+          {
+            label: 'General settings',
+            click: () => redirectWindow('/editor?settings=general__settings'),
+          },
+          {
+            label: 'Editor settings',
+            click: () => redirectWindow('/editor?settings=general__editor'),
+          },
+          {
+            label: 'View settings',
+            click: () => redirectWindow('/editor?settings=general__view'),
+          },
+        ],
       },
       {
-        label: 'View settings',
-        click: () => redirectWindow('editor?settings=general__view'),
+        label: 'Feature Settings',
+        submenu: [
+          {
+            label: 'Custom fields',
+            click: () => redirectWindow('/editor?settings=feature_settings__custom'),
+          },
+          {
+            label: 'URL presets',
+            click: () => redirectWindow('/editor?settings=feature_settings__urlpresets'),
+          },
+        ],
+      },
+      {
+        label: 'Data Sources',
+        submenu: [
+          {
+            label: 'Import spreadsheet',
+            click: () => redirectWindow('/editor?settings=sources__xlsx'),
+          },
+          {
+            label: 'Sync with Google Sheet',
+            click: () => redirectWindow('/editor?settings=sources__gsheet'),
+          },
+        ],
       },
       {
         label: 'Integrations',
-        click: () => redirectWindow('editor?settings=integrations'),
+        submenu: [
+          {
+            label: 'OSC settings',
+            click: () => redirectWindow('/editor?settings=integrations__osc'),
+          },
+          {
+            label: 'HTTP settings',
+            click: () => redirectWindow('/editor?settings=integrations__http'),
+          },
+        ],
       },
       {
         label: 'Network',
-        click: () => redirectWindow('editor?settings=network'),
+        submenu: [
+          {
+            label: 'Event log',
+            click: () => redirectWindow('/editor?settings=network__log'),
+          },
+          {
+            label: 'Manage cleints',
+            click: () => redirectWindow('/editor?settings=network__clients'),
+          },
+        ],
       },
     ],
   };
@@ -195,7 +259,7 @@ function makeHelpMenu(redirectWindow) {
     submenu: [
       {
         label: `Ontime ${releaseTag}`,
-        click: () => redirectWindow('editor?settings=about'),
+        click: () => redirectWindow('/editor?settings=about'),
       },
       {
         type: 'separator',