From 60dac1ea6c09de37baf66c106d9b06f433d97db2 Mon Sep 17 00:00:00 2001
From: avik-ch <181900631+avik-ch@users.noreply.github.com>
Date: Sat, 23 May 2026 23:01:58 -0500
Subject: [PATCH 1/3] Add autofocus to searchbox on homepage

---
 frontend/components/Search/SearchBar.jsx | 11 ++++++++++-
 frontend/pages/index.jsx                 |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Search/SearchBar.jsx b/frontend/components/Search/SearchBar.jsx
index 4055de2..3a24447 100644
--- a/frontend/components/Search/SearchBar.jsx
+++ b/frontend/components/Search/SearchBar.jsx
@@ -1,12 +1,20 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
 import { Search2Icon } from "@chakra-ui/icons";
 
 const SearchBar = ({
   onChange,
   placeholder = "Search by Class, Instructor, or Department",
+  autofocus = false,
 }) => {
   const [search, setSearch] = useState("");
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (autofocus) {
+      inputRef.current?.focus();
+    }
+  }, [autofocus]);
 
   const handleChange = (e) => {
     setSearch(e.target.value);
@@ -19,6 +27,7 @@ const SearchBar = ({
         <Search2Icon color={"black"} />
       </InputLeftElement>
       <Input
+        ref={inputRef}
         type={"text"}
         value={search}
         onChange={handleChange}
diff --git a/frontend/pages/index.jsx b/frontend/pages/index.jsx
index 511525b..1d87842 100644
--- a/frontend/pages/index.jsx
+++ b/frontend/pages/index.jsx
@@ -83,6 +83,7 @@ const Home = () => {
             <SearchBar
               placeholder={search || undefined}
               onChange={handleChange}
+              autofocus
             />
           </Box>
           <Collapse in={showPage} animateOpacity>

From 465f4ab86a7f754a6d015c06549fd6bdbb9bc681 Mon Sep 17 00:00:00 2001
From: avik-ch <181900631+avik-ch@users.noreply.github.com>
Date: Sun, 24 May 2026 01:25:43 -0500
Subject: [PATCH 2/3] Add shortcut to jump to search box

Move hooks to separate file

Fix linting error
---
 frontend/components/Search/SearchBar.jsx      |  9 ++--
 frontend/components/Search/useSearchFocus.jsx | 54 +++++++++++++++++++
 2 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 frontend/components/Search/useSearchFocus.jsx

diff --git a/frontend/components/Search/SearchBar.jsx b/frontend/components/Search/SearchBar.jsx
index 3a24447..4f0d4e1 100644
--- a/frontend/components/Search/SearchBar.jsx
+++ b/frontend/components/Search/SearchBar.jsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect, useRef } 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,
@@ -10,11 +11,7 @@ const SearchBar = ({
   const [search, setSearch] = useState("");
   const inputRef = useRef(null);
 
-  useEffect(() => {
-    if (autofocus) {
-      inputRef.current?.focus();
-    }
-  }, [autofocus]);
+  useSearchFocus(inputRef, autofocus);
 
   const handleChange = (e) => {
     setSearch(e.target.value);
diff --git a/frontend/components/Search/useSearchFocus.jsx b/frontend/components/Search/useSearchFocus.jsx
new file mode 100644
index 0000000..f6ccbe1
--- /dev/null
+++ b/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]);
+}

From da3fabc761284cd8de6c67fbebef67bc02177ee2 Mon Sep 17 00:00:00 2001
From: avik-ch <181900631+avik-ch@users.noreply.github.com>
Date: Tue, 7 Jul 2026 23:19:57 -0500
Subject: [PATCH 3/3] Fix linter error

---
 frontend/components/Search/useSearchFocus.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/Search/useSearchFocus.jsx b/frontend/components/Search/useSearchFocus.jsx
index f6ccbe1..6591887 100644
--- a/frontend/components/Search/useSearchFocus.jsx
+++ b/frontend/components/Search/useSearchFocus.jsx
@@ -51,4 +51,4 @@ export const useSearchFocus = (inputRef, autofocus = false) => {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [inputRef, toast]);
-}
+};