refactor(search): replace Kbd with custom SearchKbd component (#2501)

Author: ComputelessComputer

apps/web/src/components/search.tsx

@@ -18,9 +18,24 @@ import {
   CommandItem,
   CommandList,
 } from "@hypr/ui/components/ui/command";
-import { Kbd } from "@hypr/ui/components/ui/kbd";
 import { cn } from "@hypr/utils";
 
+function SearchKbd({ children }: { children: React.ReactNode }) {
+  return (
+    <kbd
+      className={cn([
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded px-1 font-mono text-xs font-medium",
+        "border border-neutral-300",
+        "bg-linear-to-b from-white to-neutral-100",
+        "text-neutral-400",
+        "shadow-[0_1px_0_0_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
+      ])}
+    >
+      {children}
+    </kbd>
+  );
+}
+
 interface SearchResult {
   url: string;
   meta: {
@@ -46,7 +61,6 @@ interface PagefindInstance {
   search: (query: string) => Promise<{ results: PagefindSearchResult[] }>;
 }
 
-// Context for shared search palette state
 const SearchPaletteContext = createContext<{
   open: boolean;
   setOpen: (open: boolean) => void;
@@ -67,7 +81,6 @@ export function SearchPaletteProvider({
 }) {
   const [open, setOpen] = useState(false);
 
-  // Single global Cmd+K handler
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -112,16 +125,7 @@ export function SearchTrigger({
       >
         <SearchIcon size={16} className="text-neutral-400" />
         <span className="flex-1 text-left">Search docs...</span>
-        <Kbd
-          className={cn([
-            "hidden sm:inline-flex",
-            "transition-all duration-100",
-            "group-hover:-translate-y-0.5 group-hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
-            "group-active:translate-y-0.5 group-active:shadow-none",
-          ])}
-        >
-          ⌘ K
-        </Kbd>
+        <SearchKbd>⌘ K</SearchKbd>
       </button>
     );
   }
@@ -157,16 +161,7 @@ export function SearchTrigger({
         ])}
       >
         <SearchIcon size={16} />
-        <Kbd
-          className={cn([
-            "hidden sm:inline-flex",
-            "transition-all duration-100",
-            "group-hover:-translate-y-0.5 group-hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
-            "group-active:translate-y-0.5 group-active:shadow-none",
-          ])}
-        >
-          ⌘ K
-        </Kbd>
+        <SearchKbd>⌘ K</SearchKbd>
       </button>
     );
   }
@@ -186,7 +181,7 @@ export function SearchTrigger({
     >
       <SearchIcon size={14} className="text-neutral-400" />
       <span className="hidden lg:inline">Search</span>
-      <Kbd className="hidden lg:inline-flex">⌘ K</Kbd>
+      <SearchKbd>⌘ K</SearchKbd>
     </button>
   );
 }
@@ -307,7 +302,7 @@ function SearchCommandPalette({
 
   return createPortal(
     <div
-      className="fixed inset-x-0 top-[69px] bottom-0 z-9999 backdrop-blur-sm"
+      className="fixed inset-x-0 top-17.25 bottom-0 z-9999 backdrop-blur-sm"
       onClick={() => onOpenChange(false)}
     >
       <div className="absolute left-1/2 top-[10%] -translate-x-1/2 w-full max-w-xl px-4">
@@ -326,7 +321,7 @@ function SearchCommandPalette({
               onValueChange={setQuery}
             />
             <div className="border-t border-neutral-100" />
-            <CommandList className="max-h-[400px] px-1">
+            <CommandList className="max-h-100 px-1">
               {isLoading && (
                 <div className="py-6 text-center text-sm text-neutral-500">
                   Searching...