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(null); + + const onSearch = useCallback(() => { + enqueueSnackbar('search focused'); + if (searchRef?.current) searchRef.current.focus(); + }, []); + + useKey('Tab', onSearch); + return ( - +