feat: add shortcut text hint to the search field (#3269)

* feat: add shortcut text hint to the search field

* fix: search box width to fit the shortcut hint text

* fix: error when not running on Mac due to an undefined `os` variable

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

@@ -10,6 +10,12 @@ import { StyledFab } from '@/ui-component/button/StyledFab'
 import { IconSearch, IconArrowLeft, IconEdit } from '@tabler/icons-react'
 
 import useSearchShorcut from '@/hooks/useSearchShortcut'
+import { getOS } from '@/utils/genericHelper'
+
+const os = getOS()
+const isMac = os === 'macos'
+const isDesktop = isMac || os === 'windows' || os === 'linux'
+const keyboardShortcut = isMac ? '[ ⌘ + F ]' : '[ Ctrl + F ]'
 
 const ViewHeader = ({
     children,
@@ -93,7 +99,7 @@ const ViewHeader = ({
                             inputRef={searchInputRef}
                             size='small'
                             sx={{
-                                width: '280px',
+                                width: '325px',
                                 height: '100%',
                                 display: { xs: 'none', sm: 'flex' },
                                 borderRadius: 2,
@@ -103,7 +109,7 @@ const ViewHeader = ({
                                 }
                             }}
                             variant='outlined'
-                            placeholder={searchPlaceholder}
+                            placeholder={`${searchPlaceholder} ${isDesktop ? keyboardShortcut : ''}`}
                             onChange={onSearchChange}
                             startAdornment={
                                 <Box