selecting conversation and expanding the window nicely

packages/desktop/src/electron/constants.ts

@@ -4,10 +4,22 @@
 enum Channels {
   ACTIVATE_LOG_IN = "ACTIVATE_LOG_IN",
   AUTH_TOKENS = "AUTH_TOKENS",
+  RESIZE_WINDOW = "RESIZE_WINDOW",
 }
 
 export enum STORE_ITEMS {
   AUTH_TOKENS = "AUTH_TOKENS",
 }
 
+export const Dimensions = {
+  default: {
+    height: 600,
+    width: 500,
+  },
+  selectedConvo: {
+    height: 600,
+    width: 900,
+  },
+};
+
 export default Channels;

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

@@ -8,9 +8,12 @@ declare global {
         initiateLogin(): void;
       };
       store: {
-        get(val: STORE_ITEMS): any;
+        get(val: STORE_ITEMS): Promise<any>;
         set(property: STORE_ITEMS, val: any): void;
       };
+      window: {
+        resizeWindow(newDimensions: { width: number; height: number }): void;
+      };
       on(channel: Channels, func: any): void;
       once(channel: Channels, func: any): void;
     };

packages/desktop/src/electron/preload.ts

@@ -19,6 +19,12 @@ const electronAPI = {
     // Other method you want to add like has(), reset(), etc.
   },
 
+  window: {
+    resizeWindow(newDimensions: { width: number; height: number }) {
+      ipcRenderer.send(Channels.RESIZE_WINDOW, newDimensions);
+    },
+  },
+
   on(channel: Channels, func: any) {
     const validChannels = ["ipc-example"];
     // if (validChannels.includes(channel)) {

packages/desktop/src/index.ts

@@ -1,6 +1,6 @@
 import { BrowserWindow, app, ipcMain } from "electron";
+import Channels, { Dimensions } from "./electron/constants";
 
-import Channels from "./electron/constants";
 import { handleLogin } from "./electron/handleLogin";
 import store from "./electron/store";
 
@@ -23,8 +23,7 @@ export let browserWindow: BrowserWindow;
 const createWindow = (): void => {
   // Create the browser window.
   browserWindow = new BrowserWindow({
-    height: 900,
+    ...Dimensions.default,
-    width: 900,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       sandbox: true,
@@ -51,7 +50,7 @@ app
       await handleLogin();
     });
 
-    // IPC listener
+    // access storage/cookies
     ipcMain.on("electron-store-set", async (event, key, val) => {
       store.set(key, val);
     });
@@ -59,6 +58,13 @@ app
       const result = await store.get(val);
       return result;
     });
+
+    // dynamically changing the window bounds
+    ipcMain.on(Channels.RESIZE_WINDOW, (event, arg) => {
+      const { width, height } = arg;
+
+      browserWindow.setSize(width, height, true);
+    });
   });
 
 // Quit when all windows are closed, except on macOS. There, it's common

packages/desktop/src/pages/Home/search/index.tsx

@@ -54,6 +54,7 @@ export default function Search() {
   const renderUserRow = (user: User) => {
     return (
       <span
+        key={user.googleId}
         onClick={() => selectContact(user.googleId)}
         className="border-t border-t-slate-500 py-5 flex flex-row justify-start 
       items-center w-full hover:bg-slate-600 cursor-pointer group"

packages/desktop/src/pages/Home/selectedConversation/index.tsx

@@ -1,4 +1,6 @@
 import { $selectedConversation } from "../../../controller/recoil";
+import { Dimensions } from "../../../electron/constants";
+import { useEffect } from "react";
 import { useRecoilState } from "recoil";
 
 export default function SelectedConversation() {
@@ -15,6 +17,21 @@ export default function SelectedConversation() {
    * all messages between me and them
    */
 
+  useEffect(() => {
+    // if selected, then change the bounds of this window as well
+    if (selectedConvo) {
+      window.electronAPI.window.resizeWindow(Dimensions.selectedConvo);
+    } else {
+      // change bounds back
+      window.electronAPI.window.resizeWindow(Dimensions.default);
+    }
+  }, [selectedConvo]);
+
+  // if no convo selected, don't show this
+  if (!selectedConvo) {
+    return <></>;
+  }
+
   return (
     <div className="bg-slate-800 flex-1">this is the selected conversation</div>
   );