feat(web): add search functionality to docs page with command palette (#2190)

* feat(web): add search functionality to docs page with command palette

- Add SearchTrigger component with command palette (Cmd+K shortcut)
- Add search bar in left sidebar for desktop view
- Add sticky search bar under header for mobile view
- Use pagefind for search functionality
- Integrate with @hypr/ui Command components

Co-Authored-By: [email protected] <[email protected]>

* fix(web): add DialogTitle for accessibility and type=button to search triggers

Co-Authored-By: [email protected] <[email protected]>

* feat(search): refactor search modal to use portal and improve UX

* fix(web): use single SearchPaletteProvider to fix multiple palettes, add auto-focus

Co-Authored-By: [email protected] <[email protected]>

* feat(search): wrap SearchTrigger with SearchPaletteProvider

* feat(search): refactor search trigger with cn utility and add header variant

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>

Author: devin-ai-integration[bot]

apps/web/src/components/header.tsx

@@ -8,7 +8,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 
-import { Search } from "@/components/search";
+import { SearchTrigger } from "@/components/search";
 import { useDocsDrawer } from "@/hooks/use-docs-drawer";
 import { useHandbookDrawer } from "@/hooks/use-handbook-drawer";
 import { getPlatformCTA, usePlatform } from "@/hooks/use-platform";
@@ -79,6 +79,8 @@ export function Header() {
               setIsMenuOpen={setIsMenuOpen}
               docsDrawer={docsDrawer}
               handbookDrawer={handbookDrawer}
+              isDocsPage={isDocsPage}
+              isHandbookPage={isHandbookPage}
             />
           </div>
         </div>
@@ -326,14 +328,8 @@ function DesktopNav({
   platformCTA: ReturnType<typeof getPlatformCTA>;
 }) {
   return (
-    <nav className="hidden sm:flex items-center gap-2">
-      <Search />
-      <Link
-        to="/join-waitlist"
-        className="px-4 h-8 flex items-center text-sm text-neutral-600 hover:text-neutral-800 transition-all hover:underline decoration-dotted"
-      >
-        Get started
-      </Link>
+    <nav className="hidden sm:flex items-center gap-4">
+      <SearchTrigger variant="header" />
       <CTAButton platformCTA={platformCTA} />
     </nav>
   );
@@ -346,17 +342,26 @@ function MobileNav({
   setIsMenuOpen,
   docsDrawer,
   handbookDrawer,
+  isDocsPage,
+  isHandbookPage,
 }: {
   platform: string;
   platformCTA: ReturnType<typeof getPlatformCTA>;
   isMenuOpen: boolean;
   setIsMenuOpen: (open: boolean) => void;
   docsDrawer: ReturnType<typeof useDocsDrawer>;
   handbookDrawer: ReturnType<typeof useHandbookDrawer>;
+  isDocsPage: boolean;
+  isHandbookPage: boolean;
 }) {
+  const hideCTA = isDocsPage || isHandbookPage;
+
   return (
-    <div className="sm:hidden flex items-center gap-2">
-      <CTAButton platformCTA={platformCTA} platform={platform} mobile />
+    <div className="sm:hidden flex items-center gap-3">
+      <SearchTrigger variant="header" />
+      {!hideCTA && (
+        <CTAButton platformCTA={platformCTA} platform={platform} mobile />
+      )}
       <button
         onClick={() => {
           if (!isMenuOpen) {