Add AI dock drawer

package.json

@@ -29,6 +29,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@fingerprintjs/fingerprintjs-pro-react": "^2.7.1",
     "@floating-ui/react": "^0.27.19",
     "@kapaai/react-sdk": "^0.9.10",
     "@modelcontextprotocol/sdk": "^1.29.0",
@@ -131,7 +132,7 @@
     "@tanstack/devtools-vite": "^0.7.0",
     "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-query-devtools": "^5.100.11",
-    "@tanstack/redact": "^0.0.12",
+    "@tanstack/redact": "^0.0.14",
     "@types/hast": "^3.0.4",
     "@types/node": "^25.5.0",
     "@types/pg": "^8.20.0",

src/components/AppDevtools.tsx

@@ -8,6 +8,9 @@ export function AppDevtools() {
 
   return (
     <TanStackDevtools
+      config={{
+        customTrigger: <span className="hidden" aria-hidden="true" />,
+      }}
       plugins={[
         {
           name: 'TanStack Query',

src/components/DocsLayout.tsx

@@ -857,7 +857,16 @@ export function DocsLayout({
     const groupContent = (
       <>
         {group.collapsible ? (
-          <summary className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label">
+          <summary
+            className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label"
+            onClick={(event) => {
+              event.preventDefault()
+              setOpenGroups((prev) => ({
+                ...prev,
+                [groupKey]: !(prev[groupKey] ?? false),
+              }))
+            }}
+          >
             {group.label}
           </summary>
         ) : (
@@ -1013,14 +1022,6 @@ export function DocsLayout({
         key={`group-${i}`}
         className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
         open={openGroups[groupKey] ?? false}
-        onToggle={(event) => {
-          const nextOpen = event.currentTarget.open
-          setOpenGroups((prev) =>
-            prev[groupKey] === nextOpen
-              ? prev
-              : { ...prev, [groupKey]: nextOpen },
-          )
-        }}
       >
         {groupContent}
       </details>

src/components/Dropdown.tsx

@@ -21,6 +21,9 @@ type DropdownContentProps = {
   align?: 'start' | 'center' | 'end'
   sideOffset?: number
   portal?: boolean
+  onFocus?: React.FocusEventHandler<HTMLDivElement>
+  onPointerEnter?: React.PointerEventHandler<HTMLDivElement>
+  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>
 }
 
 type DropdownItemProps = {
@@ -65,11 +68,17 @@ export function DropdownContent({
   align = 'end',
   sideOffset = 6,
   portal = true,
+  onFocus,
+  onPointerEnter,
+  onPointerLeave,
 }: DropdownContentProps) {
   const content = (
     <DropdownMenu.Content
       align={align}
       sideOffset={sideOffset}
+      onFocus={onFocus}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
       className={twMerge(
         'dropdown-content z-[1200] min-w-48 rounded-lg p-1.5',
         'border border-gray-200 dark:border-gray-700',

src/components/Navbar.tsx

@@ -8,6 +8,9 @@ const LazyNavbarAuthControls = React.lazy(() =>
     default: m.NavbarAuthControls,
   })),
 )
+const LazyAiDock = React.lazy(() =>
+  import('./SearchModal').then((m) => ({ default: m.AiDock })),
+)
 import { NavbarCartButton } from './NavbarCartButton'
 import { Link, useLocation, useMatches } from '@tanstack/react-router'
 import { NetlifyImage } from './NetlifyImage'
@@ -29,9 +32,10 @@ import {
   Sparkles,
 } from 'lucide-react'
 import { ThemeToggle } from './ThemeToggle'
-import { SearchButton } from './SearchButton'
+import { AiDockButton, SearchButton } from './SearchButton'
 import { libraries, SIDEBAR_LIBRARY_IDS, type LibrarySlim } from '~/libraries'
 import { useClickOutside } from '~/hooks/useClickOutside'
+import { useSearchContext } from '~/contexts/SearchContext'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import {
   Dropdown,
@@ -137,6 +141,27 @@ const MobileCard = ({
   </Card>
 )
 
+function AiDockMount() {
+  const { isAiDockOpen } = useSearchContext()
+  const [hasActivated, setHasActivated] = React.useState(isAiDockOpen)
+
+  React.useEffect(() => {
+    if (isAiDockOpen) {
+      setHasActivated(true)
+    }
+  }, [isAiDockOpen])
+
+  if (!hasActivated && !isAiDockOpen) {
+    return null
+  }
+
+  return (
+    <React.Suspense fallback={null}>
+      <LazyAiDock />
+    </React.Suspense>
+  )
+}
+
 export function Navbar({ children }: { children: React.ReactNode }) {
   const matches = useMatches()
 
@@ -265,11 +290,12 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       </div>
       <div className="flex items-center gap-1.5 sm:gap-2">
         <div className="hidden min-[750px]:block">{socialLinks}</div>
+        <ThemeToggle />
         <div className="hidden sm:block">
-          <SearchButton />
+          <SearchButton iconOnly />
         </div>
-        <ThemeToggle />
         <NavbarCartButton />
+        <AiDockButton />
         <div className="flex items-center gap-2">
           {canLoadAuthControls ? (
             <React.Suspense fallback={loginButtonFallback}>
@@ -747,6 +773,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           {children}
         </div>
       </div>
+      <AiDockMount />
     </>
   )
 }

src/components/SearchButton.tsx

@@ -2,27 +2,133 @@ import * as React from 'react'
 import { Command, Search } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { Button } from '~/ui'
+import { useSearchContext } from '~/contexts/SearchContext'
 
 interface SearchButtonProps {
   className?: string
-  children?: React.ReactNode
+  iconOnly?: boolean
 }
 
-export function SearchButton({ className }: SearchButtonProps) {
+function AiGlyph() {
+  return (
+    <span className="relative flex h-5 w-5 items-center justify-center">
+      <span className="text-xs font-black leading-none tracking-normal">
+        AI
+      </span>
+    </span>
+  )
+}
+
+export function SearchButton({
+  className,
+  iconOnly = false,
+}: SearchButtonProps) {
+  const { openSearch } = useSearchContext()
+
   return (
     <Button
       type="button"
-      data-search-trigger
+      data-search-trigger="true"
+      onClick={openSearch}
+      aria-label="Search TanStack docs"
       aria-haspopup="dialog"
-      variant="ghost"
-      size="xs"
-      className={twMerge('gap-2 bg-gray-500/5 dark:bg-gray-500/30', className)}
+      variant={iconOnly ? 'icon' : 'ghost'}
+      color="gray"
+      size={iconOnly ? 'icon-sm' : 'xs'}
+      title="Search"
+      className={twMerge(
+        iconOnly
+          ? 'h-7 w-7 rounded-md p-0'
+          : 'gap-2 bg-gray-500/5 dark:bg-gray-500/30',
+        className,
+      )}
     >
       <Search className="w-3.5 h-3.5" />
-      <span>Search...</span>
-      <div className="flex items-center bg-gray-500/10 dark:bg-gray-500/30 rounded px-1 py-0.5 gap-0.5 text-[10px] whitespace-nowrap">
-        <Command className="w-2.5 h-2.5" /> K
-      </div>
+      {iconOnly ? (
+        <span className="sr-only">Search</span>
+      ) : (
+        <>
+          <span>Search...</span>
+          <div className="flex items-center bg-gray-500/10 dark:bg-gray-500/30 rounded px-1 py-0.5 gap-0.5 text-[10px] whitespace-nowrap">
+            <Command className="w-2.5 h-2.5" /> K
+          </div>
+        </>
+      )}
+    </Button>
+  )
+}
+
+export function AiDockButton({ className }: { className?: string }) {
+  const {
+    cancelAiDockHoverClose,
+    closeAiDock,
+    isAiDockDirty,
+    isAiDockOpen,
+    openAiDock,
+    scheduleAiDockHoverClose,
+  } = useSearchContext()
+  const openedByHoverRef = React.useRef(false)
+
+  const handlePointerEnter = (event: React.PointerEvent<HTMLButtonElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    cancelAiDockHoverClose()
+
+    if (isAiDockDirty && !isAiDockOpen) {
+      openedByHoverRef.current = true
+      openAiDock()
+    }
+  }
+
+  const handlePointerLeave = (event: React.PointerEvent<HTMLButtonElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    openedByHoverRef.current = false
+
+    if (isAiDockDirty) {
+      scheduleAiDockHoverClose()
+    }
+  }
+
+  const handleClick = () => {
+    if (openedByHoverRef.current) {
+      openedByHoverRef.current = false
+      return
+    }
+
+    if (isAiDockOpen) {
+      closeAiDock()
+      return
+    }
+
+    openAiDock()
+  }
+
+  return (
+    <Button
+      type="button"
+      onClick={handleClick}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      aria-label={isAiDockOpen ? 'Close AI panel' : 'Open AI panel'}
+      aria-haspopup="dialog"
+      aria-pressed={isAiDockOpen}
+      variant="ghost"
+      size="icon-sm"
+      title="Ask AI"
+      className={twMerge(
+        'h-7 w-8 rounded-md p-0 bg-gray-500/5 dark:bg-gray-500/30',
+        isAiDockOpen &&
+          'bg-cyan-500/10 text-cyan-700 dark:bg-cyan-400/15 dark:text-cyan-300 border-cyan-500/20 dark:border-cyan-300/20',
+        className,
+      )}
+    >
+      <AiGlyph />
+      <span className="sr-only">Ask AI</span>
     </Button>
   )
 }