feat(www): new command menu (#28346)

Replace www command menu with the new one.

apps/www/components/CommandMenu/CommandMenu.tsx

@@ -0,0 +1,23 @@
+import { CommandHeader, CommandInput, CommandList, CommandMenu } from 'ui-patterns/CommandMenu'
+import { useChangelogCommand } from 'ui-patterns/CommandMenu/prepackaged/Changelog'
+import { useDocsAiCommands } from 'ui-patterns/CommandMenu/prepackaged/DocsAi'
+import { useDocsSearchCommands } from 'ui-patterns/CommandMenu/prepackaged/DocsSearch'
+import { useSupportCommands } from 'ui-patterns/CommandMenu/prepackaged/Support'
+import { useThemeSwitcherCommands } from 'ui-patterns/CommandMenu/prepackaged/ThemeSwitcher'
+
+export default function WwwCommandMenuEager() {
+  useDocsSearchCommands()
+  useDocsAiCommands()
+  useChangelogCommand()
+  useSupportCommands()
+  useThemeSwitcherCommands()
+
+  return (
+    <CommandMenu>
+      <CommandHeader>
+        <CommandInput />
+      </CommandHeader>
+      <CommandList />
+    </CommandMenu>
+  )
+}

apps/www/components/CommandMenu/index.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+import { useCommandMenuInitiated } from 'ui-patterns/CommandMenu'
+
+const LazyCommandMenu = dynamic(() => import('./CommandMenu'), { ssr: false })
+
+export function WwwCommandMenu() {
+  const isInitiated = useCommandMenuInitiated()
+  return isInitiated && <LazyCommandMenu />
+}

apps/www/pages/_app.tsx

@@ -10,13 +10,14 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { PortalToast, themes } from 'ui'
-import { CommandMenuProvider } from 'ui-patterns/Cmdk'
+import { CommandProvider } from 'ui-patterns/CommandMenu'
 import { useConsent } from 'ui-patterns/ConsentToast'
 
 import MetaFaviconsPagesRouter, {
   DEFAULT_FAVICON_ROUTE,
   DEFAULT_FAVICON_THEME_COLOR,
 } from 'common/MetaFavicons/pages-router'
+import { WwwCommandMenu } from '~/components/CommandMenu'
 import { API_URL, APP_NAME, DEFAULT_META_DESCRIPTION } from '~/lib/constants'
 import { post } from '~/lib/fetchWrapper'
 import supabase from '~/lib/supabase'
@@ -124,10 +125,11 @@ export default function App({ Component, pageProps }: AppProps) {
             disableTransitionOnChange
             forcedTheme={forceDarkMode ? 'dark' : undefined}
           >
-            <CommandMenuProvider site="website">
+            <CommandProvider>
               <PortalToast />
               <Component {...pageProps} />
-            </CommandMenuProvider>
+              <WwwCommandMenu />
+            </CommandProvider>
           </ThemeProvider>
         </AuthProvider>
       </SessionContextProvider>

apps/www/pages/support.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
 import Typed from 'typed.js'
 import { Button, ButtonProps, cn, IconCommand, IconSearch } from 'ui'
-import { SearchButton } from 'ui-patterns/Cmdk'
+import { CommandMenuTrigger } from 'ui-patterns/CommandMenu'
 
 import DefaultLayout from '~/components/Layouts/Default'
 import Panel from '~/components/Panel'
@@ -53,9 +53,12 @@ const Index = () => {
               {data.hero.h1}
             </h1>
             <p className="h1 tracking-[-1px]">{data.hero.title}</p>
-            <SearchButton className="mx-auto w-full max-w-lg">
-              <div
+            <CommandMenuTrigger>
+              <button
                 className="
+                  mx-auto
+                  w-full
+                  max-w-lg
                   flex
                   px-3
                   py-3
@@ -82,8 +85,8 @@ const Index = () => {
                     <span className="text-[12px]">K</span>
                   </div>
                 </div>
-              </div>
-            </SearchButton>
+              </button>
+            </CommandMenuTrigger>
           </SectionContainer>
         </div>
         <SectionContainer className="text grid gap-5 md:grid-cols-2 xl:grid-cols-3 max-w-7xl !pb-8">

packages/ui-patterns/CommandMenu/prepackaged/shared/constants.ts

@@ -1,3 +1,3 @@
-const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
 
 export { BASE_PATH }