✨ Add input focus with keyboard (#896)

src/__tests__/__snapshots__/pages.spec.js.snap

@@ -507,14 +507,24 @@ exports[`Pages Index should render the page 1`] = `
       <div
         className="container"
       >
-        <input
-          className="searchInput"
-          name="searchInput"
-          onChange={[Function]}
-          placeholder="Search your gitmoji..."
-          type="text"
-          value=""
-        />
+        <div
+          className="inputWrapper"
+        >
+          <input
+            className="searchInput"
+            name="searchInput"
+            onChange={[Function]}
+            placeholder="Search your gitmoji..."
+            type="text"
+            value=""
+          />
+          <kbd
+            className="kbd"
+          >
+            Ctrl
+             K
+          </kbd>
+        </div>
         <div
           className="container"
         >

src/components/GitmojiList/Toolbar/index.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { type Element } from 'react'
+import React, { type Element, useEffect, useRef } from 'react'
 
 import ListModeSelector from './ListModeSelector'
 import styles from './styles.module.css'
@@ -11,22 +11,59 @@ type Props = {
   setSearchInput: Function,
 }
 
-const Toolbar = (props: Props): Element<'div'> => (
-  <div className={styles.container}>
-    <input
-      className={styles.searchInput}
-      name="searchInput"
-      onChange={(event) => props.setSearchInput(event.target.value)}
-      placeholder="Search your gitmoji..."
-      type="text"
-      value={props.searchInput}
-    />
-
-    <ListModeSelector
-      isListMode={props.isListMode}
-      setIsListMode={props.setIsListMode}
-    />
-  </div>
-)
+const isMacOs = () => {
+  if (typeof window !== 'undefined') {
+    return window.navigator.platform.toUpperCase().indexOf('MAC') >= 0
+  }
+}
+
+const Toolbar = (props: Props): Element<'div'> => {
+  const searchInputRef = useRef(null)
+
+  useEffect(() => {
+    const keyboardEventListener = (event: KeyboardEvent) => {
+      const searchInput = searchInputRef.current
+      if (
+        searchInput &&
+        (event.ctrlKey || event.metaKey) &&
+        event.key === 'k'
+      ) {
+        event.preventDefault()
+        searchInput.focus()
+      }
+    }
+
+    if (typeof window !== 'undefined') {
+      document.addEventListener('keydown', keyboardEventListener, false)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', keyboardEventListener, false)
+    }
+  }, [])
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.inputWrapper}>
+        <input
+          className={styles.searchInput}
+          ref={searchInputRef}
+          name="searchInput"
+          onChange={(event) => props.setSearchInput(event.target.value)}
+          placeholder="Search your gitmoji..."
+          type="text"
+          value={props.searchInput}
+        />
+
+        <kbd className={styles.kbd}>{isMacOs() ? '⌘' : 'Ctrl'} K</kbd>
+      </div>
+
+      <ListModeSelector
+        isListMode={props.isListMode}
+        setIsListMode={props.setIsListMode}
+      />
+    </div>
+  )
+}
 
 export default Toolbar

src/components/GitmojiList/Toolbar/styles.module.css

@@ -6,21 +6,57 @@
   margin-top: 1.5rem;
 }
 
-.searchInput {
+.inputWrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
   border-radius: 4px;
   border: 0;
   box-shadow: 0 2px 4px 0 var(--cardShadow);
-  flex: 1;
+  margin-right: 1rem;
+  background-color: var(--cardBackground);
+}
+
+.inputWrapper:focus-within {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.searchInput {
+  background-color: transparent;
+  border: none;
+  flex-grow: 1;
   font-size: 1rem;
   padding: 1rem;
-  margin-right: 1rem;
+}
+
+.searchInput:focus-visible {
+  outline: none;
+}
+
+.searchInput:focus {
+  outline: none;
+}
+
+.kbd {
+  right: 0;
+  align-items: center;
+  border-radius: 3px;
+  border: solid 1px #999;
+  color: #595959;
+  display: flex;
+  font-family: system-ui;
+  margin-right: 0.5rem;
+  padding: 0.25rem 0.5rem;
 }
 
 @media (prefers-color-scheme: dark) {
   .searchInput {
-    background-color: var(--cardBackground);
     color: var(--text);
   }
+
+  .kbd {
+    color: #b8b8b8;
+  }
 }
 
 @media (max-width: 430px) {
@@ -33,4 +69,8 @@
     flex-direction: column-reverse;
     align-items: stretch;
   }
+
+  .kbd {
+    display: none;
+  }
 }

src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap

@@ -11,14 +11,24 @@ exports[`GitmojiList when is list mode should render the component 1`] = `
     <div
       className="container"
     >
-      <input
-        className="searchInput"
-        name="searchInput"
-        onChange={[Function]}
-        placeholder="Search your gitmoji..."
-        type="text"
-        value=""
-      />
+      <div
+        className="inputWrapper"
+      >
+        <input
+          className="searchInput"
+          name="searchInput"
+          onChange={[Function]}
+          placeholder="Search your gitmoji..."
+          type="text"
+          value=""
+        />
+        <kbd
+          className="kbd"
+        >
+          Ctrl
+           K
+        </kbd>
+      </div>
       <div
         className="container"
       >
@@ -311,14 +321,24 @@ exports[`GitmojiList when is not list mode should render the component 1`] = `
     <div
       className="container"
     >
-      <input
-        className="searchInput"
-        name="searchInput"
-        onChange={[Function]}
-        placeholder="Search your gitmoji..."
-        type="text"
-        value=""
-      />
+      <div
+        className="inputWrapper"
+      >
+        <input
+          className="searchInput"
+          name="searchInput"
+          onChange={[Function]}
+          placeholder="Search your gitmoji..."
+          type="text"
+          value=""
+        />
+        <kbd
+          className="kbd"
+        >
+          Ctrl
+           K
+        </kbd>
+      </div>
       <div
         className="container"
       >