nice search functionality

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 }) {

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>