Chore: add searchbar shortcut indicator (#6548)

* chore: add searchbar shortcut indicator

* style: add searchbar shortcut indicator styles

* style: add font to shortcut indicator

* refactor: replace let with const

* style: add font-family to kbd element

Author: lucianmurmurache

components/Common/Search/index.module.css

@@ -23,3 +23,12 @@
     top-[8px]
     size-5;
 }
+
+.shortcutIndicator {
+  @apply invisible
+    absolute
+    right-2
+    ml-2
+    md:visible
+    [&>kbd]:font-ibm-plex-mono;
+}

components/Common/Search/index.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from 'next-intl';
 import { useState, type FC } from 'react';
 
 import { WithSearchBox } from '@/components/Common/Search/States/WithSearchBox';
+import { useDetectOS } from '@/hooks';
 import { useKeyboardCommands } from '@/hooks/react-client';
 
 import styles from './index.module.css';
@@ -27,6 +28,10 @@ export const SearchButton: FC = () => {
     }
   });
 
+  const { os } = useDetectOS();
+
+  const osCommandKey = os === 'MAC' ? '⌘' : 'Ctrl';
+
   return (
     <>
       <button
@@ -37,6 +42,9 @@ export const SearchButton: FC = () => {
         <MagnifyingGlassIcon className={styles.magnifyingGlassIcon} />
 
         {t('components.search.searchBox.placeholder')}
+        <span title={`${osCommandKey} K`} className={styles.shortcutIndicator}>
+          <kbd>{osCommandKey} K</kbd>
+        </span>
       </button>
 
       {isOpen ? <WithSearchBox onClose={closeSearchBox} /> : null}