shortcut for starting seach

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

@@ -1,9 +1,4 @@
-import {
+import { Add, LinkRounded } from "@mui/icons-material";
-  Add,
-  CardGiftcardRounded,
-  ContactsRounded,
-  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>

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,10 +33,25 @@ 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 (
+    <>
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
+
       <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}
@@ -54,5 +73,6 @@ export default function Header() {
           </span>
         </Dropdown>
       </div>
+    </>
   );
 }