feat: command menu v2

apps/docs/components/CommandMenu/CommandMenu.tsx

@@ -0,0 +1,30 @@
+import { 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'
+import { useQuickstartCommands } from './Quickstarts'
+import { useDocsNavCommands } from '../Navigation/Navigation.commands'
+
+const DocsCommandMenu = () => {
+  useDocsSearchCommands({
+    modify: (command) => ({ ...command, forceMount: true }),
+    options: { forceMountSection: true },
+  })
+  useDocsAiCommands({ modify: (command) => ({ ...command, forceMount: true }) })
+  useDocsNavCommands()
+  useQuickstartCommands()
+  useSupportCommands()
+  useChangelogCommand()
+  useThemeSwitcherCommands()
+
+  return (
+    <CommandMenu>
+      <CommandInput />
+      <CommandList />
+    </CommandMenu>
+  )
+}
+
+export { DocsCommandMenu as default }

apps/docs/components/CommandMenu/Quickstarts.tsx

@@ -0,0 +1,58 @@
+import { ArrowRight } from 'lucide-react'
+import { useRegisterCommands } from 'ui-patterns/CommandMenu'
+
+interface Quickstart {
+  label: string
+  url: `/${string}`
+}
+
+const quickstarts = [
+  {
+    label: 'React',
+    url: '/guides/getting-started/quickstarts/reactjs',
+  },
+  {
+    label: 'Next.js',
+    url: '/guides/getting-started/quickstarts/nextjs',
+  },
+  {
+    label: 'Nuxt.js',
+    url: '/guides/getting-started/quickstarts/nuxtjs',
+  },
+  {
+    label: 'Flutter',
+    url: '/guides/getting-started/quickstarts/flutter',
+  },
+  {
+    label: 'Kotlin',
+    url: '/guides/getting-started/quickstarts/android',
+  },
+  {
+    label: 'SvelteKit',
+    url: '/guides/getting-started/quickstarts/sveltekit',
+  },
+  {
+    label: 'SolidJS',
+    url: '/guides/getting-started/quickstarts/solidjs',
+  },
+  {
+    label: 'Vue',
+    url: '/guides/getting-started/quickstarts/vue',
+  },
+] as Quickstart[]
+
+const useQuickstartCommands = () => {
+  useRegisterCommands(
+    'Quick starts',
+    quickstarts.map(({ label, url }) => ({
+      id: label,
+      name: `Get started with ${label}`,
+      route: url,
+      defaultHidden: true,
+      value: `Quick starts: Get started with ${label}`,
+      icon: () => <ArrowRight />,
+    }))
+  )
+}
+
+export { useQuickstartCommands }

apps/docs/components/CommandMenu/index.tsx

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

apps/docs/components/Navigation/Navigation.commands.tsx

@@ -0,0 +1,151 @@
+import { ArrowRight } from 'lucide-react'
+import { ICommand, useRegisterCommands } from 'ui-patterns/CommandMenu'
+
+const navCommands = [
+  {
+    id: 'nav-getting-started',
+    name: 'Go to Getting Started',
+    route: '/guides/getting-started',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-database',
+    name: 'Go to Database',
+    route: '/guides/database/overview',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-auth',
+    name: 'Go to Auth',
+    route: '/guides/auth',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-storage',
+    name: 'Go to Storage',
+    route: '/guides/storage',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-functions',
+    name: 'Go to Functions',
+    route: '/guides/functions',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-realtime',
+    name: 'Go to Realtime',
+    route: '/guides/realtime',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ai',
+    name: 'Go to AI & Vectors',
+    route: '/guides/ai',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-rest',
+    name: 'Go to REST API',
+    route: '/guides/api',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-graphql',
+    name: 'Go to GraphQL',
+    route: '/guides/graphql',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-local-cli',
+    name: 'Go to Local Dev / CLI',
+    route: '/guides/cli',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-platform',
+    name: 'Go to Platform',
+    route: '/guides/platform',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-self-hosting',
+    name: 'Go to Self-Hosting',
+    route: '/guides/self-hosting',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ref-javascript',
+    name: 'Go to JavaScript reference',
+    value: 'Reference, API, SDK: Go to JavaScript reference (JS)',
+    route: '/reference/javascript/introduction',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ref-dart',
+    name: 'Go to Dart reference',
+    value: 'Reference, API, SDK: Go to Dart reference (Flutter)',
+    route: '/reference/dart/introduction',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ref-python',
+    name: 'Go to Python reference',
+    value: 'Reference, API, SDK: Go to Python reference',
+    route: '/reference/python/introduction',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ref-csharp',
+    name: 'Go to C# reference',
+    value: 'Reference, API, SDK: Go to C# reference',
+    route: '/reference/csharp/introduction',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ref-swift',
+    name: 'Go to Swift reference',
+    value: 'Reference, API, SDK: Go to Swift reference',
+    route: '/reference/swift/introduction',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ref-kotlin',
+    name: 'Go to Kotlin reference',
+    value: 'Reference, API, SDK: Go to Kotlin reference',
+    route: '/reference/kotlin/introduction',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ref-cli',
+    name: 'Go to CLI reference',
+    value: 'Reference, API, SDK: Go to CLI reference',
+    route: '/reference/cli/introduction',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-ref-api',
+    name: 'Go to Management API reference',
+    value: 'Reference, API, SDK: Go to Management API reference',
+    route: '/reference/api/introduction',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-resources',
+    name: 'Go to Guides & Examples',
+    route: '/guides/resources',
+    icon: () => <ArrowRight />,
+  },
+  {
+    id: 'nav-integrations',
+    name: 'Go to Integrations',
+    route: 'https://supabase.com/partners/integrations',
+    icon: () => <ArrowRight />,
+  },
+] satisfies ICommand[]
+
+const useDocsNavCommands = () => {
+  useRegisterCommands('Go to', navCommands)
+}
+
+export { useDocsNavCommands }

apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

@@ -2,15 +2,20 @@ import { useTheme } from 'next-themes'
 import Image from 'next/legacy/image'
 import Link from 'next/link'
 import { FC } from 'react'
-import { Button, IconCommand, IconGitHub, IconSearch } from 'ui'
-import { SearchButton } from 'ui-patterns/Cmdk'
+
 import { useIsLoggedIn, useIsUserLoading } from 'common'
+import { Button, IconCommand, IconGitHub, IconSearch } from 'ui'
+
+import { useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
 import { ThemeToggle } from 'ui-patterns/ThemeToggle'
 
 const TopNavBar: FC = () => {
+  const { resolvedTheme } = useTheme()
+
   const isLoggedIn = useIsLoggedIn()
   const isUserLoading = useIsUserLoading()
-  const { resolvedTheme } = useTheme()
+
+  const setCommandMenuOpen = useSetCommandMenuOpen()
 
   return (
     <nav
@@ -36,7 +41,10 @@ const TopNavBar: FC = () => {
         </div>
 
         <div className="flex items-center gap-6">
-          <SearchButton className="md:w-full lg:w-96 order-2 lg:order-1">
+          <button
+            onClick={() => setCommandMenuOpen(true)}
+            className="md:w-full lg:w-96 order-2 lg:order-1"
+          >
             <div
               className="
               flex
@@ -67,7 +75,7 @@ const TopNavBar: FC = () => {
                 </div>
               </div>
             </div>
-          </SearchButton>
+          </button>
         </div>
         <div className="hidden lg:flex grow items-center justify-end gap-3">
           <Button type="text" asChild>

apps/docs/pages/_app.tsx

@@ -9,7 +9,7 @@ import MetaFaviconsPagesRouter from 'common/MetaFavicons/pages-router'
 import Head from 'next/head'
 import { PortalToast } from 'ui'
 import { PromoToast } from 'ui-patterns/PromoToast'
-import { CommandMenuProvider } from 'ui-patterns/Cmdk'
+import { CommandProvider } from 'ui-patterns/CommandMenu'
 import { AuthContainer } from '~/features/auth/auth.client'
 import { QueryClientProvider } from '~/features/data/queryClient.client'
 import { ShortcutPreviewBuild } from '~/features/envs/staging.client'
@@ -18,6 +18,7 @@ import { ThemeSandbox } from '~/features/ui/theme.client'
 import { ScrollRestoration } from '~/features/ui/helpers.scroll.client'
 import SiteLayout from '~/layouts/SiteLayout'
 import type { AppPropsWithLayout } from '~/types'
+import { DocsCommandMenu } from '~/components/CommandMenu'
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   return (
@@ -31,16 +32,17 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
           <PageTelemetry />
           <ScrollRestoration />
           <ThemeProvider defaultTheme="system" enableSystem disableTransitionOnChange>
-            <CommandMenuProvider site="docs">
+            <CommandProvider>
               <div className="h-screen flex flex-col">
                 <SiteLayout>
                   <PortalToast />
                   <PromoToast />
                   <Component {...pageProps} />
+                  <DocsCommandMenu />
                 </SiteLayout>
                 <ThemeSandbox />
               </div>
-            </CommandMenuProvider>
+            </CommandProvider>
           </ThemeProvider>
         </AuthContainer>
       </QueryClientProvider>