From c469b2d5cfd5ad6bd488417676ecd08af825e12e Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 21 Apr 2024 20:15:41 -0400
Subject: [PATCH] Add a keybind for the docs search dialog

---
 .../app/(pages)/docs/[[...slug]]/layout.tsx   |  2 +-
 .../components/docs/search/search-dialog.tsx  | 20 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx b/Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx
index 0bae1f2..42d7010 100644
--- a/Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx
+++ b/Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx
@@ -24,7 +24,7 @@ const DocumentationLayout = ({
         "/"
     ); // The active slug of this page
     return (
-        <section className="min-h-screen py-28 flex justify-center">
+        <section className="min-h-screen py-32 pb-52 flex justify-center">
             <div className="flex flex-wrap gap-32 divide-x-2">
                 <Sidebar activeSlug={activeSlug} />
                 {children}
diff --git a/Frontend/src/app/components/docs/search/search-dialog.tsx b/Frontend/src/app/components/docs/search/search-dialog.tsx
index 3c97ee1..4c051c9 100644
--- a/Frontend/src/app/components/docs/search/search-dialog.tsx
+++ b/Frontend/src/app/components/docs/search/search-dialog.tsx
@@ -38,6 +38,18 @@ const QuickSearchDialog = (): ReactElement => {
         }
     }, [results]);
 
+    // Listen for CTRL + K keybinds to open this dialog
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent): void => {
+            if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+                event.preventDefault();
+                setOpen((open: boolean) => !open);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, []);
+
     // Render the contents
     return (
         <>
@@ -52,12 +64,18 @@ const QuickSearchDialog = (): ReactElement => {
                 </div>
 
                 <Input
-                    className="pl-10"
+                    className="pl-10 cursor-pointer"
                     type="search"
                     name="search"
                     placeholder="Quick search..."
                     readOnly
                 />
+
+                <div className="absolute top-1.5 right-3">
+                    <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+                        <span className="text-xs">⌘</span>K
+                    </kbd>
+                </div>
             </div>
 
             {/* Dialog */}