Add a keybind for the docs search dialog

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}

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 */}