adding styling and other things basic like constants for electron

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;