From 8e30669bb4c99af6a42274ba1b8299ed10c48f23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Humberto=20Rodr=C3=ADguez=20A=2E?=
 <rhumbertgz@users.noreply.github.com>
Date: Fri, 27 Sep 2024 14:48:33 +0200
Subject: [PATCH] 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 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/layout/MainLayout/ViewHeader.jsx b/packages/ui/src/layout/MainLayout/ViewHeader.jsx
index 47120d66010..91d4a8ff870 100644
--- a/packages/ui/src/layout/MainLayout/ViewHeader.jsx
+++ b/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