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",

patches/@tanstack__redact@0.0.12.patch

@@ -0,0 +1,213 @@
+diff --git a/dist/dom/dispatcher.js b/dist/dom/dispatcher.js
+index c130c58e9c549caed9e0a9ea0d0afdd2edb12913..3f0c88fae664b270095ba38079c90c14d19149e2 100644
+--- a/dist/dom/dispatcher.js
++++ b/dist/dom/dispatcher.js
+@@ -185,33 +185,69 @@ function makeDispatcherImpl() {
+     useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+       const fiber = getCurrentFiber();
+       const hook = nextHook();
++      const store = hook.queue ?? {
++        getSnapshot,
++        getServerSnapshot
++      };
++      hook.queue = store;
++      store.getSnapshot = getSnapshot;
++      store.getServerSnapshot = getServerSnapshot;
+       const root = fiber.root ?? findRootFromFiber(fiber);
+       const isHydrating = Boolean(root?.hydrating);
+       const value = isHydrating && getServerSnapshot ? getServerSnapshot() : getSnapshot();
+       hook.state = value;
+-      if (hook.cleanup == null) {
+-        const forceUpdate = () => {
+-          let next;
+-          try {
+-            next = getSnapshot();
+-          } catch {
+-            scheduleUpdate(fiber);
+-            return;
+-          }
+-          if (!Object.is(hook.state, next)) {
+-            hook.state = next;
+-            scheduleUpdate(fiber);
++      const deps = [subscribe];
++      if (hook.deps === void 0 || !depsEqual(hook.deps, deps)) {
++        hook.deps = deps;
++        const effect = {
++          tag: "layout",
++          deps,
++          destroy: void 0,
++          create: () => {
++            if (hook.cleanup) {
++              try {
++                hook.cleanup();
++              } catch {
++              }
++              if (fiber.cleanups) {
++                const i = fiber.cleanups.indexOf(hook.cleanup);
++                if (i >= 0) fiber.cleanups.splice(i, 1);
++              }
++              hook.cleanup = null;
++            }
++            let unsubscribed = false;
++            const cleanup = () => {
++              unsubscribed = true;
++              if (typeof unsubscribe === "function") {
++                unsubscribe();
++              }
++            };
++            const forceUpdate = () => {
++              if (unsubscribed || fiber.unmounted) {
++                return;
++              }
++              let next;
++              try {
++                next = store.getSnapshot();
++              } catch {
++                scheduleUpdate(fiber);
++                return;
++              }
++              if (!Object.is(hook.state, next)) {
++                hook.state = next;
++                scheduleUpdate(fiber);
++              }
++            };
++            const unsubscribe = subscribe(forceUpdate);
++            if (isHydrating && store.getServerSnapshot) {
++              queueMicrotask(() => queueMicrotask(forceUpdate));
++            }
++            forceUpdate();
++            hook.cleanup = cleanup;
++            return cleanup;
+           }
+         };
+-        const unsubscribe = subscribe(forceUpdate);
+-        hook.cleanup = unsubscribe;
+-        if (typeof unsubscribe === "function") {
+-          fiber.cleanups ||= [];
+-          fiber.cleanups.push(unsubscribe);
+-        }
+-        if (isHydrating && getServerSnapshot) {
+-          queueMicrotask(() => queueMicrotask(forceUpdate));
+-        }
++        enqueueEffect(fiber, effect);
+       }
+       return value;
+     },
+diff --git a/src/dom/dispatcher.ts b/src/dom/dispatcher.ts
+index 2701ec903e2d5f42ee52e01c7222883f15790e43..eb91f1d4cb7d286a0e9d4e950cf34e0122275826 100644
+--- a/src/dom/dispatcher.ts
++++ b/src/dom/dispatcher.ts
+@@ -226,6 +226,16 @@ function makeDispatcherImpl() {
+     ): T {
+       const fiber = getCurrentFiber()
+       const hook = nextHook()
++      const store: {
++        getSnapshot: () => T
++        getServerSnapshot?: () => T
++      } = hook.queue ?? {
++        getSnapshot,
++        getServerSnapshot,
++      }
++      hook.queue = store
++      store.getSnapshot = getSnapshot
++      store.getServerSnapshot = getServerSnapshot
+
+       // During hydration, use the server snapshot (if provided) so the tree
+       // matches the SSR output. Components like TanStack Router's ClientOnly
+@@ -238,37 +248,67 @@ function makeDispatcherImpl() {
+         isHydrating && getServerSnapshot ? getServerSnapshot() : getSnapshot()
+       hook.state = value
+
+-      if (hook.cleanup == null) {
+-        const forceUpdate = () => {
+-          let next: T
+-          try {
+-            next = getSnapshot()
+-          } catch {
+-            scheduleUpdate(fiber)
+-            return
+-          }
+-          if (!Object.is(hook.state, next)) {
+-            hook.state = next
+-            scheduleUpdate(fiber)
+-          }
+-        }
+-        const unsubscribe = subscribe(forceUpdate)
+-        hook.cleanup = unsubscribe
+-        // Register with fiber so unmountFiber runs it. Without this, the store
+-        // keeps holding forceUpdate and every store update schedules an already-
+-        // unmounted fiber — its rerender walks stale .parent pointers and mounts
+-        // zombie DOM into the old parent.
+-        if (typeof unsubscribe === 'function') {
+-          fiber.cleanups ||= []
+-          fiber.cleanups.push(unsubscribe)
+-        }
++      const deps = [subscribe]
++      if (hook.deps === undefined || !depsEqual(hook.deps, deps)) {
++        hook.deps = deps
++        const effect: Effect = {
++          tag: 'layout',
++          deps,
++          destroy: undefined,
++          create: () => {
++            if (hook.cleanup) {
++              try {
++                hook.cleanup()
++              } catch {
++                // ignore cleanup failures
++              }
++              if (fiber.cleanups) {
++                const i = fiber.cleanups.indexOf(hook.cleanup)
++                if (i >= 0) fiber.cleanups.splice(i, 1)
++              }
++              hook.cleanup = null
++            }
++
++            let unsubscribed = false
++            const cleanup = () => {
++              unsubscribed = true
++              if (typeof unsubscribe === 'function') {
++                unsubscribe()
++              }
++            }
++            const forceUpdate = () => {
++              if (unsubscribed || fiber.unmounted) {
++                return
++              }
++
++              let next: T
++              try {
++                next = store.getSnapshot()
++              } catch {
++                scheduleUpdate(fiber)
++                return
++              }
++
++              if (!Object.is(hook.state, next)) {
++                hook.state = next
++                scheduleUpdate(fiber)
++              }
++            }
++            const unsubscribe = subscribe(forceUpdate)
++
++            // If we served the server snapshot, run a post-hydration check so
++            // components like `useHydrated()` flip from false → true after the
++            // initial render commits. Queued late so hydration finishes first.
++            if (isHydrating && store.getServerSnapshot) {
++              queueMicrotask(() => queueMicrotask(forceUpdate))
++            }
+
+-        // If we served the server snapshot, run a post-hydration check so
+-        // components like `useHydrated()` flip from false → true after the
+-        // initial render commits. Queued late so hydration finishes first.
+-        if (isHydrating && getServerSnapshot) {
+-          queueMicrotask(() => queueMicrotask(forceUpdate))
++            forceUpdate()
++            hook.cleanup = cleanup
++            return cleanup
++          },
+         }
++        enqueueEffect(fiber, effect)
+       }
+       return value
+     },

pnpm-workspace.yaml

@@ -26,3 +26,6 @@ allowBuilds:
   # sentry
   '@sentry/cli': false
   '@fingerprintjs/fingerprintjs-pro-react': false
+
+patchedDependencies:
+  '@tanstack/redact@0.0.12': patches/@tanstack__redact@0.0.12.patch

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