chore: add CMDK into studio and docs

apps/docs/components/Navigation/NavBar.tsx

@@ -3,12 +3,12 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FC, useEffect, useState } from 'react'
-import { IconCommand, IconMenu, IconMoon, IconSearch, IconSun, Listbox } from 'ui'
+import { IconCommand, IconMenu, IconMoon, IconSearch, IconSun, Listbox, SearchButton } from 'ui'
 import { REFERENCES } from './Navigation.constants'
 
 import { getPageType } from '~/lib/helpers'
 
-import SearchButton from '../Search/SearchButton'
+// import SearchButton from '../Search/SearchButton'
 
 const NavBar: FC = () => {
   const { isDarkMode, toggleTheme } = useTheme()

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

@@ -3,12 +3,21 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FC, useEffect, useState } from 'react'
-import { Button, IconCommand, IconMenu, IconMoon, IconSearch, IconSun, Listbox } from 'ui'
+import {
+  Button,
+  IconCommand,
+  IconMenu,
+  IconMoon,
+  IconSearch,
+  IconSun,
+  Listbox,
+  SearchButton,
+} from 'ui'
 import { REFERENCES } from '~/components/Navigation/Navigation.constants'
 
 import { getPageType } from '~/lib/helpers'
 
-import SearchButton from './../../Search/SearchButton'
+// import SearchButton from './../../Search/SearchButton'
 
 const TopNavBar: FC = () => {
   const { isDarkMode, toggleTheme } = useTheme()

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

@@ -3,12 +3,12 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FC, useEffect, useState } from 'react'
-import { Button, IconCommand, IconGitHub, IconMoon, IconSearch, IconSun } from 'ui'
+import { Button, IconCommand, IconGitHub, IconMoon, IconSearch, IconSun, SearchButton } from 'ui'
 import { REFERENCES } from '~/components/Navigation/Navigation.constants'
 
 import { getPageType } from '~/lib/helpers'
 
-import SearchButton from '~/components/Search/SearchButton'
+// import SearchButton from '~/components/Search/SearchButton'
 
 const TopNavBarRef: FC = () => {
   const { isDarkMode, toggleTheme } = useTheme()

apps/docs/pages/_app.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from 'common/Providers'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { AppPropsWithLayout } from 'types'
-// import { CommandMenuProvider } from 'ui'
+import { CommandMenuProvider } from 'ui'
 import Favicons from '~/components/Favicons'
 import SearchProvider from '~/components/Search/SearchProvider'
 import SiteLayout from '~/layouts/SiteLayout'
@@ -67,24 +67,24 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       {IS_PLATFORM || LOCAL_SUPABASE ? (
         <SessionContextProvider supabaseClient={supabase}>
           <ThemeProvider>
-            <SearchProvider>
-              {/* <CommandMenuProvider site="docs"> */}
+            {/* <SearchProvider> */}
+            <CommandMenuProvider site="docs">
               <SiteLayout>
                 <Component {...pageProps} />
               </SiteLayout>
-              {/* </CommandMenuProvider> */}
-            </SearchProvider>
+            </CommandMenuProvider>
+            {/* </SearchProvider> */}
           </ThemeProvider>
         </SessionContextProvider>
       ) : (
         <ThemeProvider>
-          <SearchProvider>
-            {/* <CommandMenuProvider site="docs"> */}
+          {/* <SearchProvider> */}
+          <CommandMenuProvider site="docs">
             <SiteLayout>
               <Component {...pageProps} />
             </SiteLayout>
-            {/* </CommandMenuProvider> */}
-          </SearchProvider>
+          </CommandMenuProvider>
+          {/* </SearchProvider> */}
         </ThemeProvider>
       )}
     </>

packages/ui/index.tsx

@@ -56,7 +56,7 @@ export * from './src/components/Upload'
 export * from './src/components/Form'
 
 // CMD+K
-// export * from './src/components/Command'
+export * from './src/components/Command'
 
 // config
 

packages/ui/src/components/Command/Command.icons.tsx

@@ -6,7 +6,7 @@ export const AiIcon = () => (
     viewBox="0 0 24 24"
     strokeWidth="1.5"
     stroke="currentColor"
-    className="w-6 h-6 text-purple-900"
+    className="w-6 h-6 text-brand-900"
   >
     <path
       strokeLinecap="round"
@@ -19,12 +19,12 @@ export const AiIcon = () => (
 export const AiIconChat = () => (
   <div
     className="w-7 h-7
-    bg-gradient-to-r from-purple-900 to-purple-800
+    bg-gradient-to-r from-brand-900 to-brand-800
 
-    ring-purple-600
+    ring-brand-600
     ring-1
 
-    rounded-md border border-purple-400 flex items-center justify-center
+    rounded-md border border-brand-400 flex items-center justify-center
     shadow-sm
     "
   >

packages/ui/src/components/Command/CommandMenu.tsx

@@ -130,7 +130,7 @@ const CommandMenu = () => {
                   forceMount
                 >
                   <AiIcon />
-                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-900 to-purple-1100">
+                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-900 to-brand-1100">
                     Ask Supabase AI
                     {search ? (
                       <>

studio/pages/_app.tsx

@@ -40,7 +40,7 @@ import { PortalToast, RouteValidationWrapper, AppBannerWrapper } from 'component
 import PageTelemetry from 'components/ui/PageTelemetry'
 import FlagProvider from 'components/ui/Flag/FlagProvider'
 import useAutoAuthRedirect from 'hooks/misc/useAutoAuthRedirect'
-// import CommandMenuProvider from 'ui/src/components/Command/CommandMenuProvider'
+import CommandMenuProvider from 'ui/src/components/Command/CommandMenuProvider'
 import { TooltipProvider } from '@radix-ui/react-tooltip'
 
 dayjs.extend(customParseFormat)
@@ -118,9 +118,9 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                 <TooltipProvider>
                   <RouteValidationWrapper>
                     <AppBannerWrapper>
-                      {/* <CommandMenuProvider site="studio"> */}
-                      {getLayout(<Component {...pageProps} />)}
-                      {/* </CommandMenuProvider> */}
+                      <CommandMenuProvider site="studio">
+                        {getLayout(<Component {...pageProps} />)}
+                      </CommandMenuProvider>
                     </AppBannerWrapper>
                   </RouteValidationWrapper>
                 </TooltipProvider>