adding hot keys for escape

packages/desktop/package.json

@@ -109,6 +109,7 @@
     "mongodb": "^4.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hotkeys": "^2.0.0",
     "react-icons": "^4.3.1",
     "react-query": "^3.34.16",
     "recoil": "^0.6.1"

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

@@ -9,6 +9,7 @@ import {
 import { $selectedConversation } from "../../../controller/recoil";
 import { Dimensions } from "../../../electron/constants";
 import { FaWindowClose } from "react-icons/fa";
+import { GlobalHotKeys } from "react-hotkeys";
 import { RelationshipState } from "@nirvana/core/models/relationship.model";
 import UpdateRelationshipStateRequest from "@nirvana/core/requests/updateRelationshipState.request";
 import moment from "moment";
@@ -124,34 +125,48 @@ export default function SelectedConversation() {
     }
   };
 
+  // hot keys for closing this window
+  const handleClose = () => {
+    setSelectedConvo(null);
+  };
+  const keyMap = { CLOSE_SELECTED_CONVO: "esc" };
+  const handlers = { CLOSE_SELECTED_CONVO: handleClose };
+
   return (
-    <div className="bg-slate-800 flex-1 flex flex-col relative">
-      {/* close marker */}
-      <FaWindowClose className="text-slate-400 hover:text-white hover:scale-110 absolute top-0 right-0 m-1" />
+    <>
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
 
-      {/* top header/profile information */}
-      <span className="flex flex-row justify-start items-center p-2">
-        <img
-          className="rounded"
-          src={convoDetailsResponse.contactUser.picture}
+      <div className="bg-slate-800 flex-1 flex flex-col relative">
+        {/* close marker */}
+        <FaWindowClose
+          onClick={handleClose}
+          className="text-slate-400 text-xl hover:text-slate-200 hover:scale-110 absolute top-0 right-0 m-1 cursor-pointer"
         />
-        <span className="flex flex-col items-start pl-2">
-          <span className="flex flex-row space-x-2">
-            <span className="text-white font-semibold text-lg">
-              {convoDetailsResponse.contactUser.name}
-            </span>
-            <span className="text-emerald-500 text-sm">
-              {convoDetailsResponse.contactUser.status}
+
+        {/* top header/profile information */}
+        <span className="flex flex-row justify-start items-center p-2">
+          <img
+            className="rounded"
+            src={convoDetailsResponse.contactUser.picture}
+          />
+          <span className="flex flex-col items-start pl-2">
+            <span className="flex flex-row space-x-2">
+              <span className="text-white font-semibold text-lg">
+                {convoDetailsResponse.contactUser.name}
+              </span>
+              <span className="text-emerald-500 text-sm">
+                {convoDetailsResponse.contactUser.status}
+              </span>
             </span>
+
+            <span className="text-slate-300 text-sm">{`joined ${moment(
+              convoDetailsResponse.contactUser.createdDate
+            ).fromNow()}`}</span>
           </span>
-
-          <span className="text-slate-300 text-sm">{`joined ${moment(
-            convoDetailsResponse.contactUser.createdDate
-          ).fromNow()}`}</span>
         </span>
-      </span>
 
-      {renderMainContent()}
-    </div>
+        {renderMainContent()}
+      </div>
+    </>
   );
 }

yarn.lock

@@ -6113,7 +6113,7 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6603,6 +6603,13 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-hotkeys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
+  integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==
+  dependencies:
+    prop-types "^15.6.1"
+
 react-icons@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"