adding preload for the talking back and forth

packages/desktop/src/app.tsx

@@ -6,13 +6,16 @@ import Terminal from './components/Terminal';
 
 import { SnackbarProvider } from 'notistack';
 import { NirvanaTheme } from './mui/NirvanaTheme';
+import { ElectronProvider } from './providers/ElectronProvider';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
     <ThemeProvider theme={NirvanaTheme}>
       <SnackbarProvider maxSnack={3}>
-        <Terminal />
+        <ElectronProvider>
+          <Terminal />
+        </ElectronProvider>
       </SnackbarProvider>
     </ThemeProvider>
   </React.StrictMode>,

packages/desktop/src/components/Terminal.tsx

@@ -65,7 +65,7 @@ export default function Terminal() {
             justifyContent={'flex-start'}
             alignItems={'center'}
             sx={{
-              '-webkit-app-region': 'drag',
+              WebkitAppRegion: 'drag',
               cursor: 'pointer',
             }}
           >
@@ -202,7 +202,7 @@ export default function Terminal() {
             px: 2,
             borderBottom: '1px solid',
             borderBottomColor: blueGrey[100],
-            '-webkit-app-region': 'drag',
+            WebkitAppRegion: 'drag',
             cursor: 'pointer',
           }}
           alignItems={'center'}

packages/desktop/src/index.ts

@@ -4,6 +4,7 @@ import { DEFAULT_APP_PRESET } from './electron/constants';
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
+declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require('electron-squirrel-startup')) {
@@ -12,10 +13,12 @@ if (require('electron-squirrel-startup')) {
 }
 
 const createWindow = (): void => {
- 
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     ...DEFAULT_APP_PRESET,
+    webPreferences: {
+      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+    },
     // titleBarStyle: "hiddenInset",
     frame: false,
     roundedCorners: true,
@@ -25,7 +28,7 @@ const createWindow = (): void => {
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
   // Open the DevTools.
-  mainWindow.webContents.openDevTools({"mode": "detach"});
+  mainWindow.webContents.openDevTools({ mode: 'detach' });
 };
 
 // This method will be called when Electron has finished

packages/desktop/src/providers/ElectronProvider.tsx

@@ -0,0 +1,92 @@
+import React, { useContext, useEffect, useState, useCallback } from 'react';
+import Channels, { DEFAULT_APP_PRESET, Dimensions } from '../electron/constants';
+
+interface IElectronProvider {
+  // pass handlers and current dimensions?
+  desktopMode: DesktopMode;
+
+  handleToggleDesktopMode?: () => void;
+
+  isWindowFocused: boolean;
+}
+
+type DesktopMode = 'overlayOnly' | 'mainApp';
+
+const ElectronContext = React.createContext<IElectronProvider>({
+  desktopMode: 'mainApp',
+
+  isWindowFocused: false,
+});
+
+export function ElectronProvider({ children }: { children: React.ReactNode }) {
+  const [desktopMode, setDesktopMode] = useState<DesktopMode>('mainApp');
+  const [isWindowFocused, setIsWindowFocused] = useState<boolean>(false);
+
+  // handle all window resizing logic
+  useEffect(() => {
+    // add dimensions if it's not overlay only mode
+    let finalDimensions: Dimensions = { height: 0, width: 0 };
+    let finalPosition: 'center' | 'topRight';
+    let stayOnTop: boolean;
+
+    if (desktopMode === 'mainApp') {
+      stayOnTop = false;
+      finalDimensions = DEFAULT_APP_PRESET;
+      finalPosition = 'center';
+    } else if (desktopMode === 'overlayOnly') {
+      stayOnTop = true;
+      finalDimensions = {
+        height: 273,
+        width: 350,
+      };
+      finalPosition = 'topRight';
+    }
+
+    // send the final dimensions to main process
+    window.electronAPI.window.resizeWindow({
+      setAlwaysOnTop: stayOnTop,
+      dimensions: {
+        height: finalDimensions.height,
+        width: finalDimensions.width,
+      },
+      setPosition: finalPosition,
+      addDimensions: false,
+    });
+  }, [desktopMode]);
+
+  // handle window focus and unfocus
+  useEffect(() => {
+    window.electronAPI.on(Channels.ON_WINDOW_BLUR, () => {
+      console.log(
+        'window blurring now, should be always on top and then ill tell main process to change dimensions',
+      );
+      setIsWindowFocused(false);
+
+      // TODO: testing mode... uncomment both instructions below
+      // setDesktopMode('overlayOnly');
+
+      // todo: make sure that if I am toggle broadcasted into a line, then don't deselect selected line
+      // the overlay should be showing selected line if I am broadcasting toggled into it as well as of course all other toggle tuned ones
+      // setSelectedLineId(null);
+    });
+
+    window.electronAPI.on(Channels.ON_WINDOW_FOCUS, () => {
+      console.log('window focusing now');
+      setIsWindowFocused(true);
+    });
+  }, [setDesktopMode, setIsWindowFocused]);
+
+  const handleToggleDesktopMode = useCallback(() => {
+    setDesktopMode((prevMode) => (prevMode === 'mainApp' ? 'overlayOnly' : 'mainApp'));
+  }, [setDesktopMode]);
+
+  return (
+    <ElectronContext.Provider value={{ desktopMode, handleToggleDesktopMode, isWindowFocused }}>
+      {children}
+    </ElectronContext.Provider>
+  );
+}
+
+export default function useElectron() {
+  return useContext(ElectronContext);
+}