shortcut for enter to unfocus + slash to focus searchbar

src/components/form/SearchBar.tsx

@@ -1,5 +1,5 @@
 import c from "classnames";
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 
 import { Flare } from "@/components/utils/Flare";
 
@@ -13,7 +13,8 @@ export interface SearchBarProps {
   value: string;
 }
 
-export function SearchBarInput(props: SearchBarProps) {
+export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
+  (props, ref) => {
     const [focused, setFocused] = useState(false);
 
     function setSearch(value: string) {
@@ -46,6 +47,7 @@ export function SearchBarInput(props: SearchBarProps) {
           </div>
 
           <TextInputControl
+            ref={ref}
             onUnFocus={() => {
               setFocused(false);
               props.onUnFocus();
@@ -59,4 +61,5 @@ export function SearchBarInput(props: SearchBarProps) {
         </Flare.Child>
       </Flare.Base>
     );
-}
+  }
+);

src/components/player/hooks/useSlashFocus.ts

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+export function useSlashFocus(ref: React.RefObject<HTMLInputElement>) {
+  useEffect(() => {
+    const listener = (e: KeyboardEvent) => {
+      if (e.key === "/") {
+        if (
+          document.activeElement &&
+          document.activeElement.tagName.toLowerCase() === "input"
+        )
+          return;
+        e.preventDefault();
+        ref.current?.focus();
+      }
+    };
+
+    window.addEventListener("keydown", listener);
+    return () => {
+      window.removeEventListener("keydown", listener);
+    };
+  }, [ref]);
+}

src/components/text-inputs/TextInputControl.tsx

@@ -1,3 +1,5 @@
+import { forwardRef } from "react";
+
 export interface TextInputControlPropsNoLabel {
   onChange?: (data: string) => void;
   onUnFocus?: () => void;
@@ -13,7 +15,12 @@ export interface TextInputControlProps extends TextInputControlPropsNoLabel {
   label?: string;
 }
 
-export function TextInputControl({
+export const TextInputControl = forwardRef<
+  HTMLInputElement,
+  TextInputControlProps
+>(
+  (
+    {
       onChange,
       onUnFocus,
       value,
@@ -23,10 +30,13 @@ export function TextInputControl({
       className,
       placeholder,
       onFocus,
-}: TextInputControlProps) {
+    },
+    ref
+  ) => {
     const input = (
       <input
         type="text"
+        ref={ref}
         className={className}
         placeholder={placeholder}
         onChange={(e) => onChange && onChange(e.target.value)}
@@ -35,6 +45,9 @@ export function TextInputControl({
         autoComplete={autoComplete}
         onBlur={() => onUnFocus && onUnFocus()}
         onFocus={() => onFocus?.()}
+        onKeyDown={(e) =>
+          e.key === "Enter" ? (e.target as HTMLInputElement).blur() : null
+        }
       />
     );
 
@@ -48,4 +61,5 @@ export function TextInputControl({
     }
 
     return input;
-}
+  }
+);

src/pages/parts/home/HeroPart.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import Sticky from "react-sticky-el";
 
 import { SearchBarInput } from "@/components/form/SearchBar";
 import { ThinContainer } from "@/components/layout/ThinContainer";
+import { useSlashFocus } from "@/components/player/hooks/useSlashFocus";
 import { HeroTitle } from "@/components/text/HeroTitle";
 import { useRandomTranslation } from "@/hooks/useRandomTranslation";
 import { useSearchQuery } from "@/hooks/useSearchQuery";
@@ -33,6 +34,9 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
 
   const title = t(`home.titles.${time}`);
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  useSlashFocus(inputRef);
+
   return (
     <ThinContainer>
       <div className="mt-44 space-y-16 text-center">
@@ -48,6 +52,7 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
             onFixedToggle={stickStateChanged}
           >
             <SearchBarInput
+              ref={inputRef}
               onChange={setSearch}
               value={search}
               onUnFocus={setSearchUnFocus}