adding styling and other things basic like constants for electron

packages/desktop/src/app.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import ReactDOM from "react-dom/client";
 
-const root = ReactDOM.createRoot(document.body as HTMLElement);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
     <React.StrictMode>

packages/desktop/src/electron/constants.ts

@@ -0,0 +1,33 @@
+// NOTE: DO NOT ADD ANY ELECTRON RELATED TYPESCRIPT HERE...KEEP IT ONLY TYPESCRIPT OTHERWISE
+// THE RENDERER WONT BE ABLE TO ACCESS THIS AS IT WILL THINK ITS PART OF MAIN PROCESS SINCE RENDERER CAN'T ACCESS NODE STUFF
+// SINCE IT's NOT A NODE PROCESS
+
+enum Channels {
+  ACTIVATE_LOG_IN = 'ACTIVATE_LOG_IN',
+  GOOGLE_AUTH_TOKENS = 'GOOGLE_AUTH_TOKENS',
+  RESIZE_WINDOW = 'RESIZE_WINDOW',
+  ON_WINDOW_BLUR = 'ON_WINDOW_BLUR',
+  ON_WINDOW_FOCUS = 'ON_WINDOW_FOCUS',
+}
+
+export enum STORE_ITEMS {
+  AUTH_SESSION_JWT = 'AUTH_SESSION_JWT',
+}
+
+export type Dimensions = { height: number; width: number };
+
+export interface DimensionChangeRequest {
+  setAlwaysOnTop: boolean;
+  setPosition?: 'topRight' | 'center';
+  dimensions: Dimensions;
+  addDimensions: boolean;
+}
+
+export const DEFAULT_APP_PRESET: Dimensions = { height: 750, width: 1210 };
+
+export const OVERLAY_ONLY_INITIAL_PRESET: Dimensions = {
+  height: 50,
+  width: 325,
+};
+
+export default Channels;

packages/desktop/src/electron/global.d.ts

@@ -0,0 +1,22 @@
+import { Dimensions, DimensionChangeRequest } from "./constants";
+import { electronAPI } from "./preload";
+
+export {};
+declare global {
+  interface Window {
+    electronAPI: {
+      auth: {
+        initiateLogin(): void;
+      };
+      store: {
+        get(val: STORE_ITEMS): Promise<any>;
+        set(property: STORE_ITEMS, val: any): void;
+      };
+      window: {
+        resizeWindow(dimensionChangeRequest: DimensionChangeRequest): void;
+      };
+      on(channel: Channels, func: any): void;
+      once(channel: Channels, func: any): void;
+    };
+  }
+}

packages/desktop/src/electron/preload.ts

@@ -0,0 +1,48 @@
+import Channels, { Dimensions, STORE_ITEMS } from './constants';
+import { contextBridge, ipcRenderer } from 'electron';
+
+const electronAPI = {
+  auth: {
+    initiateLogin() {
+      ipcRenderer.send(Channels.ACTIVATE_LOG_IN);
+    },
+  },
+  store: {
+    get(val: STORE_ITEMS) {
+      return ipcRenderer.invoke('electron-store-get', val);
+    },
+    set(property: STORE_ITEMS, val: any) {
+      ipcRenderer.send('electron-store-set', property, val);
+    },
+    // Other method you want to add like has(), reset(), etc.
+  },
+
+  window: {
+    resizeWindow(newDimensions: Dimensions) {
+      ipcRenderer.send(Channels.RESIZE_WINDOW, newDimensions);
+    },
+  },
+
+  on(channel: Channels, func: any) {
+    const validChannels = ['ipc-example'];
+    // if (validChannels.includes(channel)) {
+    //   // Deliberately strip event as it includes `sender`
+    //   ipcRenderer.on(channel, (event, ...args) => func(...args));
+    // }
+
+    ipcRenderer.on(channel, (event, ...args) => func(...args));
+  },
+  once(channel: Channels, func: any) {
+    // const validChannels = ["ipc-example"];
+    // if (validChannels.includes(channel)) {
+    //   // Deliberately strip event as it includes `sender`
+    //   ipcRenderer.once(channel, (event, ...args) => func(...args));
+    // }
+
+    ipcRenderer.once(channel, (event, ...args) => func(...args));
+  },
+};
+
+contextBridge.exposeInMainWorld('electronAPI', electronAPI);
+
+export default electronAPI;

packages/desktop/src/index.css

@@ -1,7 +1,15 @@
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+  display: flex;
-    Arial, sans-serif;
+  flex-direction: column;
-  margin: auto;
+  flex: 1;
-  max-width: 38rem;
+
-  padding: 2rem;
+  background: #00000000;
+}
+
+#root {
+  height: inherit;
+  width: inherit;
+  display: flex;
+  padding: 0 !important;
+  font-family: 'IBM Plex Sans', sans-serif;
 }

packages/desktop/src/index.html

@@ -2,11 +2,17 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Hello World!</title>
 
+    <title>Nirvana</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <h1>💖 Hello World!</h1>
+    <div id="root"></div>
-    <p>Welcome to static html file before being replaced by react.</p>
   </body>
 </html>

packages/desktop/src/index.ts

@@ -1,4 +1,5 @@
 import { app, BrowserWindow } from 'electron';
+import { DEFAULT_APP_PRESET } from './electron/constants';
 // This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
 // 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).
@@ -11,17 +12,17 @@ if (require('electron-squirrel-startup')) {
 }
 
 const createWindow = (): void => {
+ 
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    height: 600,
+    ...DEFAULT_APP_PRESET,
-    width: 800,
   });
 
   // and load the index.html of the app.
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
   // Open the DevTools.
-  mainWindow.webContents.openDevTools();
+  mainWindow.webContents.openDevTools({"mode": "detach"});
 };
 
 // This method will be called when Electron has finished