selecting conversation and expanding the window nicely

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>
   );