From a2af50791c8de09720397ffbb602930a05c548ba Mon Sep 17 00:00:00 2001
From: Zsolt Dollenstein <zsol.zsol@gmail.com>
Date: Mon, 27 May 2024 20:21:18 +0100
Subject: [PATCH] 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 |  5 +++++
 www/package-lock.json          | 10 ++++++++++
 www/package.json               |  1 +
 3 files changed, 16 insertions(+)

diff --git a/www/components/core/Search.tsx b/www/components/core/Search.tsx
index 7db76d10a..c54eb1250 100644
--- a/www/components/core/Search.tsx
+++ b/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
diff --git a/www/package-lock.json b/www/package-lock.json
index 7f04eef45..02b61a1d5 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -13,6 +13,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"
@@ -9962,6 +9963,15 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hotkeys-hook": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz",
+      "integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==",
+      "peerDependencies": {
+        "react": ">=16.8.1",
+        "react-dom": ">=16.8.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/www/package.json b/www/package.json
index 5392e2667..7382b90fb 100644
--- a/www/package.json
+++ b/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"