feat: keep setup and flow screen separate

src/main/index.ts

@@ -7,7 +7,7 @@ import log from 'electron-log/main';
 import fixPath from 'fix-path';
 import { appRouter } from './api/root';
 import { killProcess } from './python';
-import { spawnFlowWindow } from './windows';
+import { spawnSetupWindow } from './windows';
 
 fixPath();
 
@@ -37,12 +37,12 @@ app.whenReady().then(async () => {
 
   createIPCHandler({ router: appRouter });
 
-  await spawnFlowWindow();
+  await spawnSetupWindow();
 
   app.on('activate', function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) spawnFlowWindow();
+    if (BrowserWindow.getAllWindows().length === 0) spawnSetupWindow();
   });
 });
 

src/main/windows.ts

@@ -10,6 +10,7 @@ import log from 'electron-log/main';
 let blocksLibraryWindow: BrowserWindow | null = null;
 let controlWindow: BrowserWindow | null = null;
 let flowWindow: BrowserWindow | null = null;
+let setupWindow: BrowserWindow | null = null;
 
 export async function spawnFlowWindow(): Promise<void> {
   if (flowWindow) {
@@ -51,9 +52,9 @@ export async function spawnFlowWindow(): Promise<void> {
   // HMR for renderer base on electron-vite cli.
   // Load the remote URL for development or the local html file for production.
   if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    flowWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '#/setup');
+    flowWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '#/flow');
   } else {
-    flowWindow.loadFile(join(__dirname, '../renderer/index.html'), { hash: 'setup' });
+    flowWindow.loadFile(join(__dirname, '../renderer/index.html'), { hash: 'flow' });
   }
 
   app.on('before-quit', () => {
@@ -229,3 +230,75 @@ export async function spawnControlWindow(): Promise<void> {
     controlWindow = null;
   });
 }
+
+export async function spawnSetupWindow(): Promise<void> {
+  if (setupWindow) {
+    if (setupWindow.isMinimized()) setupWindow.restore();
+    setupWindow.focus();
+    return;
+  }
+
+  // Create the browser window.
+  setupWindow = new BrowserWindow({
+    width: 900,
+    height: 670,
+    show: false,
+    autoHideMenuBar: true,
+    titleBarStyle: 'hidden',
+    backgroundColor: nativeTheme.shouldUseDarkColors ? '#000000' : '#ffffff',
+    trafficLightPosition: {
+      x: 15,
+      y: 15 // macOS traffic lights seem to be 14px in diameter. If you want them vertically centered, set this to `titlebar_height / 2 - 7`.
+    },
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  });
+
+  setupWindow.on('ready-to-show', () => {
+    if (setupWindow) {
+      setupWindow.show();
+    }
+  });
+
+  setupWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url);
+    return { action: 'deny' };
+  });
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    setupWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '#/setup');
+  } else {
+    setupWindow.loadFile(join(__dirname, '../renderer/index.html'), { hash: 'setup' });
+  }
+
+  const logListener = (event): void => {
+    if (setupWindow) {
+      if (!setupWindow.isDestroyed()) {
+        setupWindow.webContents.send('status-bar-logging', event);
+      } else {
+        log.error("Can't send message to statusBar: mainWindow is destroyed");
+      }
+    }
+  };
+
+  ipcMain.on('status-bar-logging', logListener);
+
+  app.on('window-all-closed', () => {
+    ipcMain.removeListener('status-bar-logging', logListener);
+  });
+
+  app.on('before-quit', () => {
+    if (setupWindow) {
+      setupWindow.removeAllListeners('close');
+    }
+  });
+
+  setupWindow.on('closed', () => {
+    setupWindow = null;
+  });
+}

src/renderer/src/main.tsx

@@ -3,17 +3,17 @@ import './styles/index.css';
 import './styles/reactflow.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Root from './routes/root/Root';
-import Index from './routes/index/Index';
+import Setup from './routes/index/Index';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
 import Flow from './routes/flow/Flow';
 import Library from './routes/library/Library';
-import Home from './routes/home/Home';
 import { ipcLink } from 'electron-trpc/renderer';
 import { createTRPCProxyClient } from '@trpc/client';
 import type { AppRouter } from 'src/main/api/root.d';
 import Control from './routes/control/Control';
 
 const queryClient = new QueryClient();
+
 export const trpcClient = createTRPCProxyClient<AppRouter>({
   links: [ipcLink()]
 });
@@ -24,18 +24,12 @@ const router = createHashRouter([
     element: <Root />, // should contain all the providers
     children: [
       {
-        path: '/',
-        element: <Home />, // this is a layout that has the header and status bar footer
-        children: [
-          {
-            path: '/setup',
-            element: <Index />
-          },
-          {
-            path: '/flow',
-            element: <Flow />
-          }
-        ]
+        path: '/flow',
+        element: <Flow />
+      },
+      {
+        path: '/setup',
+        element: <Setup />
       },
       {
         path: '/control',

src/renderer/src/routes/flow/Flow.tsx

@@ -1,11 +1,18 @@
 import FlowCanvas from '@/components/flow/FlowCanvas';
+import Header from '@/components/root/Header';
+import StatusBar from '@/components/root/StatusBar';
+import { version } from '../../../../../package.json';
 
 const Flow = (): JSX.Element => {
   return (
-    <div className="main-content flex bg-muted py-4">
-      <div className="px-2"></div>
-      <FlowCanvas />
-      <div className="px-2"></div>
+    <div className="h-screen bg-muted">
+      <Header title={`Control Panel ${version}`} />
+      <div className="main-content flex bg-muted py-4">
+        <div className="px-2"></div>
+        <FlowCanvas />
+        <div className="px-2"></div>
+      </div>
+      <StatusBar />
     </div>
   );
 };

src/renderer/src/routes/index/Index.tsx

@@ -13,11 +13,10 @@ import {
 } from '@/components/ui/AlertDialog';
 import { Button } from '@/components/ui/Button';
 import { useLifecycleStore } from '@/stores/lifecycle';
-import { useNavigate } from 'react-router-dom';
 import { isPackaged } from '@/utils/build';
 import { trpcClient } from '@/main';
 
-const Index = (): JSX.Element => {
+const Setup = (): JSX.Element => {
   const captainReady = useLifecycleStore((state) => state.captainReady);
 
   const [setupStatuses, setSetupStatuses] = useState<SetupStatus[]>([
@@ -48,7 +47,6 @@ const Index = (): JSX.Element => {
   const [errorDesc, setErrorDesc] = useState<string>('');
   const [errorActionName, setErrorActionName] = useState<string>('');
   const [needRestart, setNeedRestart] = useState<boolean>(false);
-  const navigate = useNavigate();
 
   const checkPythonInstallation = async (): Promise<void> => {
     try {
@@ -233,7 +231,8 @@ const Index = (): JSX.Element => {
 
   useEffect(() => {
     if (captainReady) {
-      navigate('/flow');
+      console.log('LOOOOL');
+      trpcClient.spawnFlowWindow.mutate();
     }
   }, [captainReady]);
 
@@ -288,4 +287,4 @@ const Index = (): JSX.Element => {
   );
 };
 
-export default Index;
+export default Setup;