Add hotkey to focus search bar

package.json

@@ -33,6 +33,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
+    "react-hotkeys-hook": "^4.5.1",
     "react-resizable-panels": "^2.1.1",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.2",

src/app/page.tsx

@@ -43,7 +43,9 @@ export default function Home() {
                     />
                 </div>
                 <div className="w-full flex flex-row mt-4">
-                    <SearchBar />
+                    <SearchBar
+                        autoFocus={true}
+                    />
                 </div>
             </div>
         </div>

src/app/searchBar.tsx

@@ -14,11 +14,14 @@ import { cva } from "class-variance-authority";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { useHotkeys } from 'react-hotkeys-hook'
+import { useRef } from "react";
 
 interface SearchBarProps {
     className?: string;
     size?: "default" | "sm";
     defaultQuery?: string;
+    autoFocus?: boolean;
 }
 
 const formSchema = z.object({
@@ -44,7 +47,15 @@ export const SearchBar = ({
     className,
     size,
     defaultQuery,
+    autoFocus,
 }: SearchBarProps) => {
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    useHotkeys('/', (event) => {
+        event.preventDefault();
+        inputRef.current?.focus();
+    });
+
     const router = useRouter();
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -73,6 +84,8 @@ export const SearchBar = ({
                                     placeholder="Search..."
                                     className={cn(searchBarVariants({ size, className }))}
                                     {...field}
+                                    ref={inputRef}
+                                    autoFocus={autoFocus ?? false}
                                 />
                             </FormControl>
                             <FormMessage />

yarn.lock

@@ -2889,6 +2889,11 @@ react-hook-form@^7.53.0:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
   integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
 
+react-hotkeys-hook@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.5.1.tgz#990260ecc7e5a431414148a93b02a2f1a9707897"
+  integrity sha512-scAEJOh3Irm0g95NIn6+tQVf/OICCjsQsC9NBHfQws/Vxw4sfq1tDQut5fhTEvPraXhu/sHxRd9lOtxzyYuNAg==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"