From dac49f779a7abc0aca13f16c6a65313e7203df86 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sun, 20 Mar 2022 17:58:09 -0400
Subject: [PATCH] shortcut for starting seach

---
 .../src/pages/Home/conversations/index.tsx    | 14 +---
 .../desktop/src/pages/Home/header/index.tsx   | 64 ++++++++++++-------
 2 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/packages/desktop/src/pages/Home/conversations/index.tsx b/packages/desktop/src/pages/Home/conversations/index.tsx
index e8f1b53..10d4333 100644
--- a/packages/desktop/src/pages/Home/conversations/index.tsx
+++ b/packages/desktop/src/pages/Home/conversations/index.tsx
@@ -1,9 +1,4 @@
-import {
-  Add,
-  CardGiftcardRounded,
-  ContactsRounded,
-  LinkRounded,
-} from "@mui/icons-material";
+import { Add, LinkRounded } from "@mui/icons-material";
 
 import { FaVolumeUp } from "react-icons/fa";
 
@@ -21,17 +16,10 @@ export default function Conversations() {
     <>
       {/* actions navbar */}
       <div className="flex justify-end mx-10 mt-5 space-x-3">
-        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
-          <ContactsRounded className="text-slate-100" fontSize="small" />
-        </span>
-
         <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
           <LinkRounded className="text-slate-100" fontSize="small" />
         </span>
 
-        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
-          <CardGiftcardRounded className="text-pink-100" fontSize="small" />
-        </span>
         <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
           <Add className="text-slate-100" fontSize="small" />
         </span>
diff --git a/packages/desktop/src/pages/Home/header/index.tsx b/packages/desktop/src/pages/Home/header/index.tsx
index 1c3b89f..b31988c 100644
--- a/packages/desktop/src/pages/Home/header/index.tsx
+++ b/packages/desktop/src/pages/Home/header/index.tsx
@@ -3,13 +3,17 @@ import { Dropdown, Menu } from "antd";
 import Logo, { LogoType } from "../../../components/Logo";
 import { useRecoilState, useSetRecoilState } from "recoil";
 
+import { GlobalHotKeys } from "react-hotkeys";
 import { STORE_ITEMS } from "../../../electron/constants";
 import { useGetUserDetails } from "../../../controller/index";
+import { useRef } from "react";
 
 export default function Header() {
   const { data: user, isLoading } = useGetUserDetails();
   const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
 
+  const inputRef = useRef(null);
+
   const setAuthTokens = useSetRecoilState($authTokens);
 
   if (isLoading) {
@@ -29,30 +33,46 @@ export default function Header() {
     </Menu>
   );
 
+  // hot keys for selecting search
+  const handleSearch = () => {
+    if (inputRef?.current) {
+      inputRef?.current?.focus();
+      setSearchQuery("");
+    }
+  };
+
+  const keyMap = { START_SEARCH: "/" };
+  const handlers = { START_SEARCH: handleSearch };
+
   return (
-    <div className="flex flex-row items-center bg-slate-800 h-20">
-      <Logo type={LogoType.small} className="scale-[0.4]" />
-      <input
-        placeholder="type / to search"
-        className="placeholder:text-slate-400 bg-transparent outline-none text-slate-100"
-        value={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
-      />
+    <>
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
 
-      <button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
-        flow state
-      </button>
+      <div className="flex flex-row items-center bg-slate-800 h-20">
+        <Logo type={LogoType.small} className="scale-[0.4]" />
+        <input
+          ref={inputRef}
+          placeholder="type / to search"
+          className="placeholder:text-slate-400 bg-transparent outline-none text-slate-100"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
 
-      <Dropdown overlay={ProfileMenu} trigger={["click"]}>
-        <span className="relative mx-5">
-          <img
-            src={user.picture}
-            className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
-            alt="cannot find"
-          />
-          <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
-        </span>
-      </Dropdown>
-    </div>
+        <button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
+          flow state
+        </button>
+
+        <Dropdown overlay={ProfileMenu} trigger={["click"]}>
+          <span className="relative mx-5">
+            <img
+              src={user.picture}
+              className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
+              alt="cannot find"
+            />
+            <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+          </span>
+        </Dropdown>
+      </div>
+    </>
   );
 }