Search bar quality of life improvements

frontend/components/Search/SearchBar.jsx

@@ -1,12 +1,17 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
 import { Search2Icon } from "@chakra-ui/icons";
+import { useSearchFocus } from "./useSearchFocus";
 
 const SearchBar = ({
   onChange,
   placeholder = "Search by Class, Instructor, or Department",
+  autofocus = false,
 }) => {
   const [search, setSearch] = useState("");
+  const inputRef = useRef(null);
+
+  useSearchFocus(inputRef, autofocus);
 
   const handleChange = (e) => {
     setSearch(e.target.value);
@@ -19,6 +24,7 @@ const SearchBar = ({
         <Search2Icon color={"black"} />
       </InputLeftElement>
       <Input
+        ref={inputRef}
         type={"text"}
         value={search}
         onChange={handleChange}

frontend/components/Search/useSearchFocus.jsx

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import { useToast } from "@chakra-ui/react";
+
+export const useSearchFocus = (inputRef, autofocus = false) => {
+  const toast = useToast();
+  useEffect(() => {
+    if (autofocus) {
+      inputRef.current?.focus();
+    }
+  }, [autofocus, inputRef]);
+
+  useEffect(() => {
+    let toastShown = false;
+    const handleKeyDown = (e) => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+
+      const active = document.activeElement;
+      const isTyping =
+        active &&
+        (active.tagName === "INPUT" ||
+          active.tagName === "TEXTAREA" ||
+          active.isContentEditable);
+      if (isTyping) return;
+
+      if (e.key === "/") {
+        e.preventDefault();
+        inputRef.current?.focus();
+        return;
+      }
+
+      const isAlphanumeric = e.key.length === 1 && /[a-zA-Z0-9]/.test(e.key);
+      if (isAlphanumeric && !toastShown) {
+        toastShown = true;
+
+        toast({
+          title: 'Press "/" to search',
+          status: "info",
+          duration: 5000,
+          variant: "subtle",
+          isClosable: true,
+          position: "bottom-right",
+          containerStyle: {
+            color: "#3182ce",
+          },
+        });
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [inputRef, toast]);
+};

frontend/pages/index.jsx

@@ -83,6 +83,7 @@ const Home = () => {
             <SearchBar
               placeholder={search || undefined}
               onChange={handleChange}
+              autofocus
             />
           </Box>
           <Collapse in={showPage} animateOpacity>