refactor: register modal in electron

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

@@ -4,15 +4,20 @@ import { useNavigate } from 'react-router-dom';
 const isElectron = window.process?.type === 'renderer';
 const ipcRenderer = isElectron ? window.require('electron').ipcRenderer : null;
 
-export default function useElectronEvent() {
+export function useElectronEvent() {
-  const navigate = useNavigate();
-
   const sendToElectron = useCallback((channel: string, args?: string | Record<string, unknown>) => {
     if (isElectron && ipcRenderer) {
       ipcRenderer.send(channel, args);
     }
   }, []);
 
+  return { isElectron, sendToElectron };
+}
+
+export function useElectronListener() {
+  const navigate = useNavigate();
+  const { isElectron } = useElectronEvent();
+
   // listen to requests to change the editor location
   useEffect(() => {
     if (isElectron) {
@@ -25,7 +30,5 @@ export default function useElectronEvent() {
     return () => {
       ipcRenderer?.removeAllListeners();
     };
-  }, [navigate]);
+  }, [isElectron, navigate]);
-
-  return { isElectron, sendToElectron };
 }

apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx

@@ -20,10 +20,10 @@ export default function ManageProjects() {
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const isCreatingProject = searchParams.get('create') === 'true';
+  const isCreatingProject = searchParams.get('new') === 'true';
 
   const handleToggleCreate = () => {
-    searchParams.set('create', isCreatingProject ? 'false' : 'true');
+    searchParams.set('new', isCreatingProject ? 'false' : 'true');
     setSearchParams(searchParams);
   };
 
@@ -53,7 +53,7 @@ export default function ManageProjects() {
   };
 
   const handleCloseForm = () => {
-    searchParams.delete('create');
+    searchParams.delete('new');
     setSearchParams(searchParams);
   };
 

apps/client/src/features/editors/Editor.tsx

@@ -6,6 +6,7 @@ import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
 import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
+import { useElectronListener } from '../../common/hooks/useElectronEvent';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import AppSettings from '../app-settings/AppSettings';
 import useAppSettingsNavigation from '../app-settings/useAppSettingsNavigation';
@@ -26,6 +27,9 @@ export default function Editor() {
 
   useWindowTitle('Editor');
 
+  // we need to register the listener to change the editor location
+  useElectronListener();
+
   // listen to shutdown request from electron process
   useEffect(() => {
     if (window.process?.type === 'renderer') {

apps/electron/src/menu/applicationMenu.js

@@ -81,14 +81,18 @@ function makeFileMenu(serverUrl, redirectWindow, download) {
     submenu: [
       {
         label: 'New project...',
-        click: () => redirectWindow('/editor?settings=project__manage&create=true'),
+        click: () => redirectWindow('/editor?settings=project__manage&new=true'),
       },
       {
-        label: 'Edit project info',
+        label: 'Quick start...',
+        click: () => redirectWindow('/editor?settings=project__create'),
+      },
+      {
+        label: 'Edit project info...',
         click: () => redirectWindow('/editor?settings=project__data'),
       },
       {
-        label: 'Manage projects...',
+        label: 'Manage projects',
         click: () => redirectWindow('/editor?settings=project__manage'),
       },
       {