From 0e28c1889b34a5e9c2c6ea930f6b2bd92b4e711a Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Fri, 27 May 2022 23:18:13 -0500
Subject: [PATCH] nice search functionality

---
 .../src/components/KeyboardShortcutLabel.tsx       |  2 +-
 packages/desktop/src/components/Terminal.tsx       | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/desktop/src/components/KeyboardShortcutLabel.tsx b/packages/desktop/src/components/KeyboardShortcutLabel.tsx
index aee2772..d540a3f 100644
--- a/packages/desktop/src/components/KeyboardShortcutLabel.tsx
+++ b/packages/desktop/src/components/KeyboardShortcutLabel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, styled, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { blueGrey } from '@mui/material/colors';
 
 export default function KeyboardShortcutLabel({ label }: { label: string }) {
diff --git a/packages/desktop/src/components/Terminal.tsx b/packages/desktop/src/components/Terminal.tsx
index dc15b8e..1a20313 100644
--- a/packages/desktop/src/components/Terminal.tsx
+++ b/packages/desktop/src/components/Terminal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { Container } from '@mui/system';
 import { Avatar, Box, Grid, Input, Stack, Typography } from '@mui/material';
@@ -7,10 +7,20 @@ import { blueGrey } from '@mui/material/colors';
 import { FiSearch } from 'react-icons/fi';
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import { useSnackbar } from 'notistack';
+import { useKey } from 'react-use';
 
 export default function Terminal() {
   const { enqueueSnackbar } = useSnackbar();
 
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const onSearch = useCallback(() => {
+    enqueueSnackbar('search focused');
+    if (searchRef?.current) searchRef.current.focus();
+  }, []);
+
+  useKey('Tab', onSearch);
+
   return (
     <Grid container spacing={0}>
       <Grid
@@ -56,7 +66,7 @@ export default function Terminal() {
           >
             <FiSearch style={{ color: blueGrey[500] }} />
 
-            <Input placeholder={'Find or start a conversation'} />
+            <Input placeholder={'Find or start a conversation'} inputRef={searchRef} />
 
             <KeyboardShortcutLabel label="tab" />
           </Stack>