search: Add global hotkey to focus search (#168)

* search: Add keyboard navigation to results

After searching for a string, the user can navigate results by pressing up/down arrows.

* search: Add global hotkey to focus search

* Commit from GitHub Actions (Applying autofixes)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

www/components/core/Search.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import fuzzysort from "fuzzysort";
 import { ReactElement, useEffect, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import { Index, Result, Results, search } from "@/lib/searchDescriptor";
 
@@ -86,6 +87,10 @@ function Match({ result }: MatchProps): ReactElement {
 export const Search = ({ descriptors }: SearchParams) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [results, setResults] = useState<Results | null>(null);
+  useHotkeys("/", (event) => {
+    event.preventDefault();
+    document.getElementById("Search_Input")?.focus();
+  });
 
   useEffect(() => {
     // TODO: debounce this

www/package.json

@@ -19,6 +19,7 @@
     "next": "^14.1.1",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
+    "react-hotkeys-hook": "^4.5.0",
     "react-router-dom": "^6.22.1",
     "react-syntax-highlighter": "^15.5.0",
     "swr": "^1.3.0"