feat: add search keyboard shortcut based on the current platform (#3267)

packages/ui/src/hooks/useSearchShortcut.jsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import { getOS } from '@/utils/genericHelper'
+
+const isMac = getOS() === 'macos'
+
+const useSearchShorcut = (inputRef) => {
+    useEffect(() => {
+        const component = inputRef.current
+        const handleKeyDown = (event) => {
+            if ((isMac && event.metaKey && event.key === 'f') || (!isMac && event.ctrlKey && event.key === 'f')) {
+                event.preventDefault()
+                component.focus()
+            }
+        }
+
+        const handleInputEscape = (event) => {
+            if (event.key === 'Escape') component.blur()
+        }
+
+        inputRef.current.addEventListener('keydown', handleInputEscape)
+        document.addEventListener('keydown', handleKeyDown)
+
+        return () => {
+            component.addEventListener('keydown', handleInputEscape)
+            document.removeEventListener('keydown', handleKeyDown)
+        }
+    })
+}
+
+export default useSearchShorcut

packages/ui/src/layout/MainLayout/ViewHeader.jsx

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types'
+import { useRef } from 'react'
 
 // material-ui
 import { IconButton, Box, OutlinedInput, Toolbar, Typography } from '@mui/material'
@@ -8,6 +9,8 @@ import { StyledFab } from '@/ui-component/button/StyledFab'
 // icons
 import { IconSearch, IconArrowLeft, IconEdit } from '@tabler/icons-react'
 
+import useSearchShorcut from '@/hooks/useSearchShortcut'
+
 const ViewHeader = ({
     children,
     filters = null,
@@ -22,6 +25,8 @@ const ViewHeader = ({
     onEdit
 }) => {
     const theme = useTheme()
+    const searchInputRef = useRef()
+    useSearchShorcut(searchInputRef)
 
     return (
         <Box sx={{ flexGrow: 1, py: 1.25, width: '100%' }}>
@@ -85,6 +90,7 @@ const ViewHeader = ({
                 <Box sx={{ height: 40, display: 'flex', alignItems: 'center', gap: 1 }}>
                     {search && (
                         <OutlinedInput
+                            inputRef={searchInputRef}
                             size='small'
                             sx={{
                                 width: '280px',