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,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]" />
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
-      <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)}
-      />
 
-      <button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
+      <div className="flex flex-row items-center bg-slate-800 h-20">
-        flow state
+        <Logo type={LogoType.small} className="scale-[0.4]" />
-      </button>
+        <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"]}>
+        <button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
-        <span className="relative mx-5">
+          flow state
-          <img
+        </button>
-            src={user.picture}
+
-            className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
+        <Dropdown overlay={ProfileMenu} trigger={["click"]}>
-            alt="cannot find"
+          <span className="relative mx-5">
-          />
+            <img
-          <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+              src={user.picture}
-        </span>
+              className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
-      </Dropdown>
+              alt="cannot find"
-    </div>
+            />
+            <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+          </span>
+        </Dropdown>
+      </div>
+    </>
   );
 }