From 5b3b0553d6f28681770c3e00fae209e8436ae677 Mon Sep 17 00:00:00 2001
From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com>
Date: Tue, 15 Nov 2022 16:13:50 +0000
Subject: [PATCH 001/215] changed the get user js code snippet

---
 studio/components/to-be-cleaned/Docs/Snippets.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/to-be-cleaned/Docs/Snippets.js b/studio/components/to-be-cleaned/Docs/Snippets.js
index 937780e7059..77e09510960 100644
--- a/studio/components/to-be-cleaned/Docs/Snippets.js
+++ b/studio/components/to-be-cleaned/Docs/Snippets.js
@@ -660,7 +660,7 @@ curl -X GET '${endpoint}/auth/v1/user' \\
     js: {
       language: 'js',
       code: `
-const user = supabase.auth.user()
+const { data: { user } } = await supabase.auth.getUser()
 `,
     },
   }),

From 9e82c045084c0848c28e402cba734a54a350cd14 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 16 Nov 2022 12:36:37 +0000
Subject: [PATCH 002/215] chore: Hide the settings page on self-hosted / CLI

---
 studio/next.config.js | 228 +++++++++++++++++++++++-------------------
 1 file changed, 127 insertions(+), 101 deletions(-)

diff --git a/studio/next.config.js b/studio/next.config.js
index 0684e797af3..3ac852ca38c 100644
--- a/studio/next.config.js
+++ b/studio/next.config.js
@@ -12,105 +12,132 @@ const withTM = require('next-transpile-modules')(['ui', 'common'])
 // https://nextjs.org/docs/api-reference/next.config.js/introduction
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
+const IS_PLATFORM = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
+
+// Fixes the issue with the user having direct URL access to these pages in non-platform environments,
+// by redirecting to the respective available page.
+const nonPlatformRedirects = [
+  {
+    source: '/project/:ref/auth/providers',
+    destination: '/project/:ref/auth/users',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/auth/templates',
+    destination: '/project/:ref/auth/users',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/auth/url-configuration',
+    destination: '/project/:ref/auth/users',
+    permanent: true,
+  },
+]
+
+const generalRedirects = [
+  {
+    source: '/',
+    destination: '/sign-in',
+    permanent: false,
+  },
+  {
+    source: '/register',
+    destination: '/sign-up',
+    permanent: false,
+  },
+  {
+    source: '/signup',
+    destination: '/sign-up',
+    permanent: false,
+  },
+  {
+    source: '/signin',
+    destination: '/sign-in',
+    permanent: false,
+  },
+  {
+    source: '/login',
+    destination: '/sign-in',
+    permanent: false,
+  },
+  {
+    source: '/log-in',
+    destination: '/sign-in',
+    permanent: false,
+  },
+  {
+    source: '/project/:ref/auth',
+    destination: '/project/:ref/auth/users',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/database',
+    destination: '/project/:ref/database/tables',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/storage',
+    destination: '/project/:ref/storage/buckets',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/settings',
+    destination: '/project/:ref/settings/general',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/auth/settings',
+    destination: '/project/:ref/auth/users',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/settings/billing',
+    destination: '/project/:ref/settings/billing/subscription',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/database/postgres-logs',
+    destination: '/project/:ref/logs/postgres-logs',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/database/postgrest-logs',
+    destination: '/project/:ref/logs/postgrest-logs',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/database/pgbouncer-logs',
+    destination: '/project/:ref/logs/pgbouncer-logs',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/database/realtime-logs',
+    destination: '/project/:ref/logs/realtime-logs',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/storage/logs',
+    destination: '/project/:ref/logs/storage-logs',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/auth/logs',
+    destination: '/project/:ref/logs/auth-logs',
+    permanent: true,
+  },
+  {
+    source: '/project/:ref/logs-explorer',
+    destination: '/project/:ref/logs/explorer',
+    permanent: true,
+  },
+]
+
 const nextConfig = {
   async redirects() {
-    return [
-      {
-        source: '/',
-        destination: '/sign-in',
-        permanent: false,
-      },
-      {
-        source: '/register',
-        destination: '/sign-up',
-        permanent: false,
-      },
-      {
-        source: '/signup',
-        destination: '/sign-up',
-        permanent: false,
-      },
-      {
-        source: '/signin',
-        destination: '/sign-in',
-        permanent: false,
-      },
-      {
-        source: '/login',
-        destination: '/sign-in',
-        permanent: false,
-      },
-      {
-        source: '/log-in',
-        destination: '/sign-in',
-        permanent: false,
-      },
-      {
-        source: '/project/:ref/auth',
-        destination: '/project/:ref/auth/users',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/database',
-        destination: '/project/:ref/database/tables',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/storage',
-        destination: '/project/:ref/storage/buckets',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/settings',
-        destination: '/project/:ref/settings/general',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/auth/settings',
-        destination: '/project/:ref/auth/users',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/settings/billing',
-        destination: '/project/:ref/settings/billing/subscription',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/database/postgres-logs',
-        destination: '/project/:ref/logs/postgres-logs',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/database/postgrest-logs',
-        destination: '/project/:ref/logs/postgrest-logs',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/database/pgbouncer-logs',
-        destination: '/project/:ref/logs/pgbouncer-logs',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/database/realtime-logs',
-        destination: '/project/:ref/logs/realtime-logs',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/storage/logs',
-        destination: '/project/:ref/logs/storage-logs',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/auth/logs',
-        destination: '/project/:ref/logs/auth-logs',
-        permanent: true,
-      },
-      {
-        source: '/project/:ref/logs-explorer',
-        destination: '/project/:ref/logs/explorer',
-        permanent: true,
-      },
-    ]
+    if (!IS_PLATFORM) {
+      return [...nonPlatformRedirects, ...generalRedirects]
+    }
+    return generalRedirects
   },
   async headers() {
     return [
@@ -162,7 +189,6 @@ const sentryWebpackPluginOptions = {
 
 // Make sure adding Sentry options is the last code to run before exporting, to
 // ensure that your source maps include changes from all other Webpack plugins
-module.exports =
-  process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
-    ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
-    : withPlugins([withTM()], nextConfig)
+module.exports = IS_PLATFORM
+  ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
+  : withPlugins([withTM()], nextConfig)

From 3dbdc58ef8652f1478ce567a6405dcde4dbcc35a Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Thu, 17 Nov 2022 06:21:20 +0000
Subject: [PATCH 003/215] chore: disables permanent route caching

---
 studio/next.config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/studio/next.config.js b/studio/next.config.js
index 3ac852ca38c..fa3c8265c0a 100644
--- a/studio/next.config.js
+++ b/studio/next.config.js
@@ -20,17 +20,17 @@ const nonPlatformRedirects = [
   {
     source: '/project/:ref/auth/providers',
     destination: '/project/:ref/auth/users',
-    permanent: true,
+    permanent: false,
   },
   {
     source: '/project/:ref/auth/templates',
     destination: '/project/:ref/auth/users',
-    permanent: true,
+    permanent: false,
   },
   {
     source: '/project/:ref/auth/url-configuration',
     destination: '/project/:ref/auth/users',
-    permanent: true,
+    permanent: false,
   },
 ]
 

From ec50e28c927b3d1a87d61e2ac1b9e2a70d226762 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Thu, 24 Nov 2022 05:34:36 +0000
Subject: [PATCH 004/215] chore: updates page banning logic

---
 studio/hooks/misc/withAuth.tsx |  14 +-
 studio/next.config.js          | 228 +++++++++++++++------------------
 2 files changed, 112 insertions(+), 130 deletions(-)

diff --git a/studio/hooks/misc/withAuth.tsx b/studio/hooks/misc/withAuth.tsx
index bd0bfc2e287..4ce144da02b 100644
--- a/studio/hooks/misc/withAuth.tsx
+++ b/studio/hooks/misc/withAuth.tsx
@@ -8,7 +8,13 @@ import { useProfile, useStore, usePermissions } from 'hooks'
 import Error500 from '../../pages/500'
 import { NextPageWithLayout } from 'types'
 
-const PLATFORM_ONLY_PAGES = ['reports', 'settings']
+const PLATFORM_ONLY_PAGES = [
+  'reports',
+  'settings',
+  'auth/providers',
+  'auth/templates',
+  'auth/url-configuration',
+]
 
 export function withAuth<T>(
   WrappedComponent: ComponentType<T> | NextPageWithLayout<T, T>,
@@ -23,7 +29,7 @@ export function withAuth<T>(
 
     const { ref, slug } = router.query
     const { app, ui } = rootStore
-    const page = router.pathname.split('/')[3]
+    const page = router.pathname.split('/').slice(3).join('/')
 
     const redirectTo = options?.redirectTo ?? defaultRedirectTo(ref)
     const redirectIfFound = options?.redirectIfFound
@@ -37,7 +43,9 @@ export function withAuth<T>(
       mutate: mutatePermissions,
     } = usePermissions(profile, returning)
 
-    const isAccessingBlockedPage = !IS_PLATFORM && PLATFORM_ONLY_PAGES.includes(page)
+    const isAccessingBlockedPage =
+      !IS_PLATFORM &&
+      PLATFORM_ONLY_PAGES.some((platformOnlyPage) => page.startsWith(platformOnlyPage))
     const isRedirecting =
       isAccessingBlockedPage ||
       checkRedirectTo(isLoading, router, profile, error, redirectTo, redirectIfFound)
diff --git a/studio/next.config.js b/studio/next.config.js
index fa3c8265c0a..0684e797af3 100644
--- a/studio/next.config.js
+++ b/studio/next.config.js
@@ -12,132 +12,105 @@ const withTM = require('next-transpile-modules')(['ui', 'common'])
 // https://nextjs.org/docs/api-reference/next.config.js/introduction
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-const IS_PLATFORM = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
-
-// Fixes the issue with the user having direct URL access to these pages in non-platform environments,
-// by redirecting to the respective available page.
-const nonPlatformRedirects = [
-  {
-    source: '/project/:ref/auth/providers',
-    destination: '/project/:ref/auth/users',
-    permanent: false,
-  },
-  {
-    source: '/project/:ref/auth/templates',
-    destination: '/project/:ref/auth/users',
-    permanent: false,
-  },
-  {
-    source: '/project/:ref/auth/url-configuration',
-    destination: '/project/:ref/auth/users',
-    permanent: false,
-  },
-]
-
-const generalRedirects = [
-  {
-    source: '/',
-    destination: '/sign-in',
-    permanent: false,
-  },
-  {
-    source: '/register',
-    destination: '/sign-up',
-    permanent: false,
-  },
-  {
-    source: '/signup',
-    destination: '/sign-up',
-    permanent: false,
-  },
-  {
-    source: '/signin',
-    destination: '/sign-in',
-    permanent: false,
-  },
-  {
-    source: '/login',
-    destination: '/sign-in',
-    permanent: false,
-  },
-  {
-    source: '/log-in',
-    destination: '/sign-in',
-    permanent: false,
-  },
-  {
-    source: '/project/:ref/auth',
-    destination: '/project/:ref/auth/users',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/database',
-    destination: '/project/:ref/database/tables',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/storage',
-    destination: '/project/:ref/storage/buckets',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/settings',
-    destination: '/project/:ref/settings/general',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/auth/settings',
-    destination: '/project/:ref/auth/users',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/settings/billing',
-    destination: '/project/:ref/settings/billing/subscription',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/database/postgres-logs',
-    destination: '/project/:ref/logs/postgres-logs',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/database/postgrest-logs',
-    destination: '/project/:ref/logs/postgrest-logs',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/database/pgbouncer-logs',
-    destination: '/project/:ref/logs/pgbouncer-logs',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/database/realtime-logs',
-    destination: '/project/:ref/logs/realtime-logs',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/storage/logs',
-    destination: '/project/:ref/logs/storage-logs',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/auth/logs',
-    destination: '/project/:ref/logs/auth-logs',
-    permanent: true,
-  },
-  {
-    source: '/project/:ref/logs-explorer',
-    destination: '/project/:ref/logs/explorer',
-    permanent: true,
-  },
-]
-
 const nextConfig = {
   async redirects() {
-    if (!IS_PLATFORM) {
-      return [...nonPlatformRedirects, ...generalRedirects]
-    }
-    return generalRedirects
+    return [
+      {
+        source: '/',
+        destination: '/sign-in',
+        permanent: false,
+      },
+      {
+        source: '/register',
+        destination: '/sign-up',
+        permanent: false,
+      },
+      {
+        source: '/signup',
+        destination: '/sign-up',
+        permanent: false,
+      },
+      {
+        source: '/signin',
+        destination: '/sign-in',
+        permanent: false,
+      },
+      {
+        source: '/login',
+        destination: '/sign-in',
+        permanent: false,
+      },
+      {
+        source: '/log-in',
+        destination: '/sign-in',
+        permanent: false,
+      },
+      {
+        source: '/project/:ref/auth',
+        destination: '/project/:ref/auth/users',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/database',
+        destination: '/project/:ref/database/tables',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/storage',
+        destination: '/project/:ref/storage/buckets',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/settings',
+        destination: '/project/:ref/settings/general',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/auth/settings',
+        destination: '/project/:ref/auth/users',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/settings/billing',
+        destination: '/project/:ref/settings/billing/subscription',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/database/postgres-logs',
+        destination: '/project/:ref/logs/postgres-logs',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/database/postgrest-logs',
+        destination: '/project/:ref/logs/postgrest-logs',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/database/pgbouncer-logs',
+        destination: '/project/:ref/logs/pgbouncer-logs',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/database/realtime-logs',
+        destination: '/project/:ref/logs/realtime-logs',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/storage/logs',
+        destination: '/project/:ref/logs/storage-logs',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/auth/logs',
+        destination: '/project/:ref/logs/auth-logs',
+        permanent: true,
+      },
+      {
+        source: '/project/:ref/logs-explorer',
+        destination: '/project/:ref/logs/explorer',
+        permanent: true,
+      },
+    ]
   },
   async headers() {
     return [
@@ -189,6 +162,7 @@ const sentryWebpackPluginOptions = {
 
 // Make sure adding Sentry options is the last code to run before exporting, to
 // ensure that your source maps include changes from all other Webpack plugins
-module.exports = IS_PLATFORM
-  ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
-  : withPlugins([withTM()], nextConfig)
+module.exports =
+  process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
+    ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
+    : withPlugins([withTM()], nextConfig)

From faf9252253c5c4223da616456bd9146a000d3459 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 7 Dec 2022 08:18:06 +0000
Subject: [PATCH 005/215] fix: row click event trigger on menu item click

---
 .../to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js  | 4 ++++
 studio/localStores/storageExplorer/StorageExplorerStore.js    | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
index ebf400f1ea1..efc6aa48d98 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
@@ -307,6 +307,10 @@ const FileExplorerRow = ({
           className={`flex items-center justify-end ${
             view === STORAGE_VIEWS.LIST ? 'flex-grow' : 'w-[10%]'
           }`}
+          onClick={(event) =>
+            // Stops click event from this div, to resolve an issue with menu item's click event triggering unexpected row select
+            event.stopPropagation()
+          }
         >
           {item.status === STORAGE_ROW_STATUS.LOADING ? (
             <IconLoader
diff --git a/studio/localStores/storageExplorer/StorageExplorerStore.js b/studio/localStores/storageExplorer/StorageExplorerStore.js
index f3bcfd79a4b..deff03b454e 100644
--- a/studio/localStores/storageExplorer/StorageExplorerStore.js
+++ b/studio/localStores/storageExplorer/StorageExplorerStore.js
@@ -1176,7 +1176,7 @@ class StorageExplorerStore {
     const files = await this.getAllItemsAlongFolder(folder)
     await this.deleteFiles(files, isDeleteFolder)
 
-    const isFolderOpen = this.openedFolders[this.openedFolders.length - 1].name === folder.name
+    const isFolderOpen = this.openedFolders[this.openedFolders.length - 1]?.name === folder.name
     if (isFolderOpen) {
       this.popColumnAtIndex(folder.columnIndex)
       this.popOpenedFoldersAtIndex(folder.columnIndex - 1)

From 6bc027997de7748c4d95cb65705fa1aef71ac021 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 14 Dec 2022 01:39:57 +0800
Subject: [PATCH 006/215] start using react.memo to stop re-renders

---
 .../Navigation/NavigationMenu/HomeMenu.tsx    | 10 ++---
 .../NavigationMenu/NavigationMenu.tsx         | 37 +++++++++++++------
 .../NavigationMenuGuideList.tsx               | 23 +++++-------
 3 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
index a769976a8a4..8101690b2f4 100644
--- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
@@ -1,8 +1,7 @@
+import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useMenuLevelId } from '~/hooks/useMenuState'
-import { useTheme } from 'common/Providers'
 
 const home = [
   [
@@ -106,8 +105,7 @@ const home = [
   ],
 ]
 
-const NavigationMenuHome = () => {
-  const level = useMenuLevelId()
+const NavigationMenuHome = ({ active }) => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
@@ -115,9 +113,7 @@ const NavigationMenuHome = () => {
     <div
       className={[
         'transition-all duration-150 ease-out',
-        level === 'home' || !level
-          ? 'opacity-100 ml-0 delay-150'
-          : 'opacity-0 -ml-8 invisible absolute',
+        active ? 'opacity-100 ml-0 delay-150' : 'opacity-0 -ml-8 invisible absolute',
       ].join(' ')}
     >
       <ul className="relative w-full flex flex-col gap-4">
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 5a945b965c5..e997936f5f2 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { memo, useEffect } from 'react'
-import { menuState } from '~/hooks/useMenuState'
+import { menuState, useMenuLevelId } from '~/hooks/useMenuState'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
 // @ts-expect-error
@@ -153,20 +153,33 @@ const SideNav = () => {
     }
   }, [router.events])
 
+  const level = useMenuLevelId()
+
+  const isHomeActive = 'home' === level
+  const isGettingStartedActive = 'gettingstarted' === level
+  const isDatabaseActive = 'database' === level
+  const isFunctionsActive = 'functions' === level
+  const isRealtimeActive = 'realtime' === level
+  const isStorageActive = 'storage' === level
+  const isPlatformActive = 'platform' === level
+  const isResourcesActive = 'resources' === level
+  const isIntegrationsActive = 'integrations' === level
+  const isReferenceActive = 'reference' === level
+
   return (
     <div className="flex relative">
       {/* // main menu */}
-      <NavigationMenuHome />
-      <NavigationMenuGuideList id={'gettingstarted'} />
-      <NavigationMenuGuideList id={'database'} />
-      <NavigationMenuGuideList id={'auth'} />
-      <NavigationMenuGuideList id={'functions'} />
-      <NavigationMenuGuideList id={'realtime'} />
-      <NavigationMenuGuideList id={'storage'} />
-      <NavigationMenuGuideList id={'platform'} />
-      <NavigationMenuGuideList id={'resources'} />
-      <NavigationMenuGuideList id={'integrations'} />
-      <NavigationMenuGuideList id={'reference'} />
+      <NavigationMenuHome active={isHomeActive} />
+      <NavigationMenuGuideList id={'gettingstarted'} active={isGettingStartedActive} />
+      <NavigationMenuGuideList id={'database'} active={isDatabaseActive} />
+      <NavigationMenuGuideList id={'auth'} active={isDatabaseActive} />
+      <NavigationMenuGuideList id={'functions'} active={isFunctionsActive} />
+      <NavigationMenuGuideList id={'realtime'} active={isRealtimeActive} />
+      <NavigationMenuGuideList id={'storage'} active={isStorageActive} />
+      <NavigationMenuGuideList id={'platform'} active={isPlatformActive} />
+      <NavigationMenuGuideList id={'resources'} active={isResourcesActive} />
+      <NavigationMenuGuideList id={'integrations'} active={isIntegrationsActive} />
+      <NavigationMenuGuideList id={'reference'} active={isReferenceActive} />
       {/* // Client Libs */}
       <NavigationMenuRefList
         key={'reference-js-menu'}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 40e03fa6184..2180e345af8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -1,32 +1,27 @@
-import * as Accordion from '@radix-ui/react-accordion'
 import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { IconChevronLeft } from '~/../../packages/ui'
-import { useMenuLevelId } from '~/hooks/useMenuState'
 import * as NavItems from './NavigationMenu.constants'
+import * as Accordion from '@radix-ui/react-accordion'
 
 interface Props {
   id: string
-  setMenuLevelId?: any
+  active: boolean
 }
-const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
+const NavigationMenuGuideList: React.FC<Props> = ({ id, active }) => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
   const menu = NavItems[id]
 
-  //console.log(id, 'url is:', menu.url)
-
   // get url
   const url = router.asPath
   // remove the end of the url if a deep link
   const firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/')
 
-  const level = useMenuLevelId()
-
   return (
     <Accordion.Root
       collapsible
@@ -36,12 +31,12 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
       className={[
         'transition-all ml-8 duration-150 ease-out',
         // enabled
-        level === id && 'opacity-100 ml-0 delay-150',
-        level === 'home' && 'ml-12',
+        active && 'opacity-100 ml-0 delay-150',
+        // level === 'home' && 'ml-12',
 
         // disabled
-        level !== 'home' && level !== id ? '-ml-8' : '',
-        level !== id ? 'opacity-0 invisible absolute' : '',
+        // level !== 'home' && level !== id ? '-ml-8' : '',
+        active ? 'opacity-0 invisible absolute' : '',
       ].join(' ')}
     >
       <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
@@ -83,7 +78,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
                     : 'hover:text-brand-900 text-scale-1200',
                 ].join(' ')}
               >
-                {menu.title ?? level}
+                {menu.title ?? id}
               </span>
             </div>
           </a>
@@ -228,4 +223,4 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
   )
 }
 
-export default NavigationMenuGuideList
+export default React.memo(NavigationMenuGuideList)

From 948132c4068d6039a8d7b2eeacf79e6461ffc0a2 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 14 Dec 2022 01:47:41 +0800
Subject: [PATCH 007/215] do same with red docs

---
 .../NavigationMenu/NavigationMenu.tsx         | 22 ++++++++++++++++++-
 .../NavigationMenuGuideList.tsx               |  2 +-
 .../NavigationMenu/NavigationMenuRefList.tsx  | 10 +++++----
 apps/docs/hooks/useMenuState.ts               |  2 +-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index e997936f5f2..db10c1d02b0 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -158,6 +158,7 @@ const SideNav = () => {
   const isHomeActive = 'home' === level
   const isGettingStartedActive = 'gettingstarted' === level
   const isDatabaseActive = 'database' === level
+  const isAuthActive = 'auth' === level
   const isFunctionsActive = 'functions' === level
   const isRealtimeActive = 'realtime' === level
   const isStorageActive = 'storage' === level
@@ -166,13 +167,23 @@ const SideNav = () => {
   const isIntegrationsActive = 'integrations' === level
   const isReferenceActive = 'reference' === level
 
+  const isReference_Javascript_V1 = 'reference_javascript_v1' === level
+  const isReference_Javascript_V2 = 'reference_javascript_v2' === level
+  const isReference_Dart_V0 = 'reference_dart_v0' === level
+  const isReference_Dart_V1 = 'reference_dart_v1' === level
+  const isReference_Cli = 'reference_cli' === level
+  const isReference_Api = 'reference_api' === level
+  const isReference_Self_Hosting_Auth = 'reference_self_hosting_auth' === level
+  const isReference_Self_Hosting_Storage = 'reference_self_hosting_storage' === level
+  const isReference_Self_Hosting_Realtime = 'reference_self_hosting_realtime' === level
+
   return (
     <div className="flex relative">
       {/* // main menu */}
       <NavigationMenuHome active={isHomeActive} />
       <NavigationMenuGuideList id={'gettingstarted'} active={isGettingStartedActive} />
       <NavigationMenuGuideList id={'database'} active={isDatabaseActive} />
-      <NavigationMenuGuideList id={'auth'} active={isDatabaseActive} />
+      <NavigationMenuGuideList id={'auth'} active={isAuthActive} />
       <NavigationMenuGuideList id={'functions'} active={isFunctionsActive} />
       <NavigationMenuGuideList id={'realtime'} active={isRealtimeActive} />
       <NavigationMenuGuideList id={'storage'} active={isStorageActive} />
@@ -184,6 +195,7 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-js-menu'}
         id={'reference_javascript_v1'}
+        active={isReference_Javascript_V1}
         commonSections={libCommonSections}
         lib="javascript"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_js_v1)}
@@ -191,6 +203,7 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-js-menu'}
         id={'reference_javascript_v2'}
+        active={isReference_Javascript_V2}
         commonSections={libCommonSections}
         lib="javascript"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_js_v2)}
@@ -198,6 +211,7 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-dart-menu'}
         id={'reference_dart_v0'}
+        active={isReference_Dart_V0}
         commonSections={libCommonSections}
         lib="dart"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v0)}
@@ -205,6 +219,7 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-dart-menu'}
         id={'reference_dart_v1'}
+        active={isReference_Dart_V1}
         commonSections={libCommonSections}
         lib="dart"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v1)}
@@ -213,12 +228,14 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-cli-menu'}
         id={'reference_cli'}
+        active={isReference_Cli}
         commonSections={cliCommonSections}
         lib="cli"
       />
       <NavigationMenuRefList
         key={'reference-api-menu'}
         id={'reference_api'}
+        active={isReference_Api}
         commonSections={apiCommonSections}
         lib="api"
       />
@@ -226,18 +243,21 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-self-hosting-auth-menu'}
         id={'reference_self_hosting_auth'}
+        active={isReference_Self_Hosting_Auth}
         commonSections={authServerCommonSections}
         lib="self-hosting-auth"
       />
       <NavigationMenuRefList
         key={'reference-self-hosting-storage-menu'}
         id={'reference_self_hosting_storage'}
+        active={isReference_Self_Hosting_Storage}
         commonSections={storageServerCommonSections}
         lib="self-hosting-storage"
       />
       <NavigationMenuRefList
         key={'reference-self-hosting-realtime-menu'}
         id={'reference_self_hosting_realtime'}
+        active={isReference_Self_Hosting_Realtime}
         commonSections={realtimeServerCommonSections}
         lib="self-hosting-auth"
       />
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 2180e345af8..d680ecc3dcb 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -36,7 +36,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, active }) => {
 
         // disabled
         // level !== 'home' && level !== id ? '-ml-8' : '',
-        active ? 'opacity-0 invisible absolute' : '',
+        !active ? 'opacity-0 invisible absolute' : '',
       ].join(' ')}
     >
       <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index e2db35f487a..908c55ee475 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -80,6 +80,7 @@ interface INavigationMenuRefList {
   // the keys of menu items that are allowed to be shown on the side menu
   // if undefined, we show all the menu items
   allowedClientKeys?: string[]
+  active: boolean
 }
 
 const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
@@ -87,6 +88,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
   lib,
   commonSections,
   allowedClientKeys,
+  active,
 }) => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
@@ -150,12 +152,12 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
       className={[
         'transition-all ml-8 duration-150 ease-out',
         // enabled
-        level === id && 'opacity-100 ml-0 delay-150 h-auto',
+        active && 'opacity-100 ml-0 delay-150 h-auto',
         // move menu back to margin-left
-        level === 'home' && 'ml-12',
+        // level === 'home' && 'ml-12',
         // disabled
-        level !== 'home' && level !== id ? '-ml-8' : '',
-        level !== id ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
+        // level !== 'home' && level !== id ? '-ml-8' : '',
+        !active ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
       ].join(' ')}
     >
       <div className={'w-full flex flex-col gap-0 sticky top-8'}>
diff --git a/apps/docs/hooks/useMenuState.ts b/apps/docs/hooks/useMenuState.ts
index 760796e1244..52977307542 100644
--- a/apps/docs/hooks/useMenuState.ts
+++ b/apps/docs/hooks/useMenuState.ts
@@ -7,7 +7,7 @@ export const menuState = proxy({
   setMenuActiveRefId: (value) => {
     menuState.menuActiveRefId = value
   },
-  menuLevelId: '',
+  menuLevelId: 'home',
   setMenuLevelId: (value) => {
     menuState.menuMobileOpen = false
     menuState.menuLevelId = value

From 8812985ec43059bd56108e0f3c19b72429f08fc6 Mon Sep 17 00:00:00 2001
From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com>
Date: Wed, 14 Dec 2022 14:13:24 +0000
Subject: [PATCH 008/215] added in example description

---
 apps/docs/components/reference/RefFunctionSection.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index a31c52af992..18c753a52ef 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -203,6 +203,16 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                                   .replace('js', '')
                                   .replace('ts', ''))}
                           </CodeBlock>
+
+                          {example.description && (
+                            <div className="bg-scale-300 prose px-4 py-2 rounded-md">
+                              <h5 className="text-sm m-0 text-scale-1100">Example Notes</h5>
+                              <ReactMarkdown className="text-sm">
+                                {example.description}
+                              </ReactMarkdown>
+                            </div>
+                          )}
+
                           {response && (
                             <RefDetailCollapse
                               id={`${example.id}-${exampleIndex}-response`}

From 9bad9a7f0e6e3f57dafe7d5822860fd7f77e4388 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 15 Dec 2022 01:13:32 +0800
Subject: [PATCH 009/215] more optimizing

---
 .../NavigationMenu/NavigationMenu.tsx         |  32 +-
 .../NavigationMenuGuideList.tsx               | 192 +----------
 .../NavigationMenuGuideListItems.tsx          | 201 ++++++++++++
 .../NavigationMenu/NavigationMenuRefList.tsx  | 263 +--------------
 .../NavigationMenuRefListItems.tsx            | 299 ++++++++++++++++++
 apps/docs/layouts/SiteLayout.tsx              |  12 +-
 6 files changed, 538 insertions(+), 461 deletions(-)
 create mode 100644 apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
 create mode 100644 apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index db10c1d02b0..e40f2e99e53 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -192,14 +192,14 @@ const SideNav = () => {
       <NavigationMenuGuideList id={'integrations'} active={isIntegrationsActive} />
       <NavigationMenuGuideList id={'reference'} active={isReferenceActive} />
       {/* // Client Libs */}
-      <NavigationMenuRefList
+      {/* <NavigationMenuRefList
         key={'reference-js-menu'}
         id={'reference_javascript_v1'}
         active={isReference_Javascript_V1}
         commonSections={libCommonSections}
         lib="javascript"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_js_v1)}
-      />
+      /> */}
       <NavigationMenuRefList
         key={'reference-js-menu'}
         id={'reference_javascript_v2'}
@@ -208,59 +208,59 @@ const SideNav = () => {
         lib="javascript"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_js_v2)}
       />
-      <NavigationMenuRefList
+      {/* <NavigationMenuRefList
         key={'reference-dart-menu'}
         id={'reference_dart_v0'}
         active={isReference_Dart_V0}
         commonSections={libCommonSections}
         lib="dart"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v0)}
-      />
-      <NavigationMenuRefList
+      /> */}
+      {/* <NavigationMenuRefList
         key={'reference-dart-menu'}
         id={'reference_dart_v1'}
         active={isReference_Dart_V1}
         commonSections={libCommonSections}
         lib="dart"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v1)}
-      />
+      /> */}
       {/* // Tools */}
-      <NavigationMenuRefList
+      {/* <NavigationMenuRefList
         key={'reference-cli-menu'}
         id={'reference_cli'}
         active={isReference_Cli}
         commonSections={cliCommonSections}
         lib="cli"
-      />
-      <NavigationMenuRefList
+      /> */}
+      {/* <NavigationMenuRefList
         key={'reference-api-menu'}
         id={'reference_api'}
         active={isReference_Api}
         commonSections={apiCommonSections}
         lib="api"
-      />
+      /> */}
       {/* // Self Hosting Server */}
-      <NavigationMenuRefList
+      {/* <NavigationMenuRefList
         key={'reference-self-hosting-auth-menu'}
         id={'reference_self_hosting_auth'}
         active={isReference_Self_Hosting_Auth}
         commonSections={authServerCommonSections}
         lib="self-hosting-auth"
-      />
-      <NavigationMenuRefList
+      /> */}
+      {/* <NavigationMenuRefList
         key={'reference-self-hosting-storage-menu'}
         id={'reference_self_hosting_storage'}
         active={isReference_Self_Hosting_Storage}
         commonSections={storageServerCommonSections}
         lib="self-hosting-storage"
-      />
-      <NavigationMenuRefList
+      /> */}
+      {/* <NavigationMenuRefList
         key={'reference-self-hosting-realtime-menu'}
         id={'reference_self_hosting_realtime'}
         active={isReference_Self_Hosting_Realtime}
         commonSections={realtimeServerCommonSections}
         lib="self-hosting-auth"
-      />
+      /> */}
     </div>
   )
 }
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index d680ecc3dcb..2800ff25557 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -1,11 +1,7 @@
-import { useTheme } from 'common/Providers'
-import Image from 'next/image'
-import Link from 'next/link'
+import * as Accordion from '@radix-ui/react-accordion'
 import { useRouter } from 'next/router'
 import React from 'react'
-import { IconChevronLeft } from '~/../../packages/ui'
-import * as NavItems from './NavigationMenu.constants'
-import * as Accordion from '@radix-ui/react-accordion'
+import NavigationMenuGuideListItems from './NavigationMenuGuideListItems'
 
 interface Props {
   id: string
@@ -13,9 +9,6 @@ interface Props {
 }
 const NavigationMenuGuideList: React.FC<Props> = ({ id, active }) => {
   const router = useRouter()
-  const { isDarkMode } = useTheme()
-
-  const menu = NavItems[id]
 
   // get url
   const url = router.asPath
@@ -39,186 +32,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, active }) => {
         !active ? 'opacity-0 invisible absolute' : '',
       ].join(' ')}
     >
-      <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
-        <Link href={`${menu.parent ?? '/'}`} passHref>
-          <a
-            className={[
-              'flex items-center gap-1 text-xs group mb-3',
-              'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
-            ].join(' ')}
-          >
-            <div className="relative w-2">
-              <div className="transition-all ease-out ml-0 group-hover:-ml-1">
-                <IconChevronLeft size={10} strokeWidth={3} />
-              </div>
-            </div>
-            <span>Back to Home</span>
-          </a>
-        </Link>
-
-        <Link href={menu.url ?? ''} passHref>
-          <a>
-            <div className="flex items-center gap-3 my-3">
-              <Image
-                alt={menu.icon}
-                width={15}
-                height={15}
-                src={
-                  `${router.basePath}` +
-                  `/img/icons/menu/${menu.icon}${isDarkMode ? '' : '-light'}.svg`
-                }
-              />
-              {/* </div> */}
-              <span
-                className={[
-                  ' ',
-                  !menu.title && 'capitalize',
-                  menu.url === router.pathname
-                    ? 'text-brand-900'
-                    : 'hover:text-brand-900 text-scale-1200',
-                ].join(' ')}
-              >
-                {menu.title ?? id}
-              </span>
-            </div>
-          </a>
-        </Link>
-
-        {menu.items.map((x, index) => {
-          // console.log('1st type of link?', x.items && x.items.length > 0)
-          // console.log()
-          return (
-            <div key={x.url}>
-              {x.items && x.items.length > 0 ? (
-                <div>
-                  {x.items.map((subItem, subItemIndex) => {
-                    // console.log('subitem', { subItem })
-                    // console.log('router', router)
-                    //console.log('subitem url', subItem.url)
-                    let subItemMenuOpen = false
-
-                    if (router.asPath.includes(subItem.url)) {
-                      subItemMenuOpen = true
-                    }
-
-                    const LinkContainer = (props) => {
-                      return (
-                        <Link href={props.url} passHref>
-                          <a className={props.className}>{props.children}</a>
-                        </Link>
-                      )
-                    }
-
-                    return (
-                      <>
-                        {subItemIndex === 0 && (
-                          <>
-                            <div className="h-px w-full bg-green-500 my-3"></div>
-                            <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
-                              {x.name}
-                            </span>
-                          </>
-                        )}
-                        <Accordion.Item key={subItem.label} value={subItem.url}>
-                          <li key={subItem.name}>
-                            <LinkContainer
-                              url={subItem.url}
-                              className={[
-                                'flex items-center gap-2',
-                                'cursor-pointer transition text-sm',
-                                subItem.url === router.pathname
-                                  ? 'text-brand-900'
-                                  : 'hover:text-brand-900 text-scale-1000',
-                              ].join(' ')}
-                              parent={subItem.parent}
-                            >
-                              {subItem.icon && (
-                                <Image
-                                  alt={subItem.name + router.basePath}
-                                  src={
-                                    `${router.basePath}` +
-                                    `${subItem.icon}${!isDarkMode ? '-light' : ''}.svg`
-                                  }
-                                  width={15}
-                                  height={15}
-                                />
-                              )}
-                              {subItem.name}
-                            </LinkContainer>
-                          </li>
-
-                          {subItem.items && subItem.items.length > 0 && (
-                            <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2">
-                              {subItem.items.map((subSubItem, subSubItemIndex) => {
-                                return (
-                                  <li key={subItem.name}>
-                                    <Link href={`${subSubItem.url}`} passHref>
-                                      <a
-                                        className={[
-                                          'cursor-pointer transition text-sm',
-                                          subSubItem.url === router.pathname
-                                            ? 'text-brand-900'
-                                            : 'hover:text-brand-900 text-scale-1000',
-                                        ].join(' ')}
-                                      >
-                                        {subSubItem.name}
-                                      </a>
-                                    </Link>
-                                  </li>
-                                )
-                              })}
-                            </Accordion.Content>
-                          )}
-                        </Accordion.Item>
-                      </>
-                    )
-                  })}
-                </div>
-              ) : (
-                <>
-                  <li>
-                    <Link href={`${x.url}`} passHref>
-                      <a
-                        className={[
-                          'cursor-pointer transition text-sm',
-                          x.url === router.pathname
-                            ? 'text-brand-900'
-                            : 'hover:text-brand-900 text-scale-1000',
-                        ].join(' ')}
-                      >
-                        {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
-                        {x.name}
-                      </a>
-                    </Link>
-                  </li>
-                </>
-              )}
-            </div>
-          )
-        })}
-        {menu.extras && (
-          <>
-            <div className="h-px w-full bg-green-500 my-3"></div>
-            <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider mb-2">
-              Resources
-            </span>
-          </>
-        )}
-        {menu.extras?.map((x) => {
-          return (
-            <div key={x.name}>
-              <li>
-                <Link href={`${x.href}`} passHref>
-                  <a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">
-                    {x.icon && <img className="w-4" src={`${router.basePath}${x.icon}`} />}
-                    {x.name}
-                  </a>
-                </Link>
-              </li>
-            </div>
-          )
-        })}
-      </ul>
+      <NavigationMenuGuideListItems id={id} />
     </Accordion.Root>
   )
 }
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
new file mode 100644
index 00000000000..ebcc68d1a75
--- /dev/null
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -0,0 +1,201 @@
+import { useTheme } from 'common/Providers'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React from 'react'
+import { IconChevronLeft } from '~/../../packages/ui'
+import * as NavItems from './NavigationMenu.constants'
+import * as Accordion from '@radix-ui/react-accordion'
+
+const Content = ({ id }) => {
+  const router = useRouter()
+  const { isDarkMode } = useTheme()
+
+  const menu = NavItems[id]
+
+  return (
+    <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
+      {console.log(id && 'GUIDE MENU id changed')}
+      <Link href={`${menu.parent ?? '/'}`} passHref>
+        <a
+          className={[
+            'flex items-center gap-1 text-xs group mb-3',
+            'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+          ].join(' ')}
+        >
+          <div className="relative w-2">
+            <div className="transition-all ease-out ml-0 group-hover:-ml-1">
+              <IconChevronLeft size={10} strokeWidth={3} />
+            </div>
+          </div>
+          <span>Back to Home</span>
+        </a>
+      </Link>
+
+      <Link href={menu.url ?? ''} passHref>
+        <a>
+          <div className="flex items-center gap-3 my-3">
+            <Image
+              alt={menu.icon}
+              width={15}
+              height={15}
+              src={
+                `${router.basePath}` +
+                `/img/icons/menu/${menu.icon}${isDarkMode ? '' : '-light'}.svg`
+              }
+            />
+            {/* </div> */}
+            <span
+              className={[
+                ' ',
+                !menu.title && 'capitalize',
+                menu.url === router.pathname
+                  ? 'text-brand-900'
+                  : 'hover:text-brand-900 text-scale-1200',
+              ].join(' ')}
+            >
+              {menu.title ?? id}
+            </span>
+          </div>
+        </a>
+      </Link>
+
+      {menu.items.map((x, index) => {
+        // console.log('1st type of link?', x.items && x.items.length > 0)
+        // console.log()
+        return (
+          <div key={x.url}>
+            {x.items && x.items.length > 0 ? (
+              <div>
+                {x.items.map((subItem, subItemIndex) => {
+                  // console.log('subitem', { subItem })
+                  // console.log('router', router)
+                  //console.log('subitem url', subItem.url)
+                  let subItemMenuOpen = false
+
+                  if (router.asPath.includes(subItem.url)) {
+                    subItemMenuOpen = true
+                  }
+
+                  const LinkContainer = (props) => {
+                    return (
+                      <Link href={props.url} passHref>
+                        <a className={props.className}>{props.children}</a>
+                      </Link>
+                    )
+                  }
+
+                  return (
+                    <>
+                      {subItemIndex === 0 && (
+                        <>
+                          <div className="h-px w-full bg-green-500 my-3"></div>
+                          <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
+                            {x.name}
+                          </span>
+                        </>
+                      )}
+                      <Accordion.Item key={subItem.label} value={subItem.url}>
+                        <li key={subItem.name}>
+                          <LinkContainer
+                            url={subItem.url}
+                            className={[
+                              'flex items-center gap-2',
+                              'cursor-pointer transition text-sm',
+                              subItem.url === router.pathname
+                                ? 'text-brand-900'
+                                : 'hover:text-brand-900 text-scale-1000',
+                            ].join(' ')}
+                            parent={subItem.parent}
+                          >
+                            {subItem.icon && (
+                              <Image
+                                alt={subItem.name + router.basePath}
+                                src={
+                                  `${router.basePath}` +
+                                  `${subItem.icon}${!isDarkMode ? '-light' : ''}.svg`
+                                }
+                                width={15}
+                                height={15}
+                              />
+                            )}
+                            {subItem.name}
+                          </LinkContainer>
+                        </li>
+
+                        {subItem.items && subItem.items.length > 0 && (
+                          <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2">
+                            {subItem.items.map((subSubItem, subSubItemIndex) => {
+                              return (
+                                <li key={subItem.name}>
+                                  <Link href={`${subSubItem.url}`} passHref>
+                                    <a
+                                      className={[
+                                        'cursor-pointer transition text-sm',
+                                        subSubItem.url === router.pathname
+                                          ? 'text-brand-900'
+                                          : 'hover:text-brand-900 text-scale-1000',
+                                      ].join(' ')}
+                                    >
+                                      {subSubItem.name}
+                                    </a>
+                                  </Link>
+                                </li>
+                              )
+                            })}
+                          </Accordion.Content>
+                        )}
+                      </Accordion.Item>
+                    </>
+                  )
+                })}
+              </div>
+            ) : (
+              <>
+                <li>
+                  <Link href={`${x.url}`} passHref>
+                    <a
+                      className={[
+                        'cursor-pointer transition text-sm',
+                        x.url === router.pathname
+                          ? 'text-brand-900'
+                          : 'hover:text-brand-900 text-scale-1000',
+                      ].join(' ')}
+                    >
+                      {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
+                      {x.name}
+                    </a>
+                  </Link>
+                </li>
+              </>
+            )}
+          </div>
+        )
+      })}
+      {menu.extras && (
+        <>
+          <div className="h-px w-full bg-green-500 my-3"></div>
+          <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider mb-2">
+            Resources
+          </span>
+        </>
+      )}
+      {menu.extras?.map((x) => {
+        return (
+          <div key={x.name}>
+            <li>
+              <Link href={`${x.href}`} passHref>
+                <a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">
+                  {x.icon && <img className="w-4" src={`${router.basePath}${x.icon}`} />}
+                  {x.name}
+                </a>
+              </Link>
+            </li>
+          </div>
+        )
+      })}
+    </ul>
+  )
+}
+
+export default React.memo(Content)
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index 908c55ee475..b1ae0480dfd 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -13,64 +13,9 @@ import { useTheme } from 'common/Providers'
 import RevVersionDropdown from '~/components/RefVersionDropdown'
 import { useMenuActiveRefId, useMenuLevelId } from '~/hooks/useMenuState'
 import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
+import NavigationMenuRefListItems from './NavigationMenuRefListItems'
 
-const FunctionLink = ({
-  title,
-  id,
-  icon,
-  library,
-  slug,
-}: {
-  title: string
-  name?: string
-  id: string
-  icon?: string
-  product?: string
-  library: string
-  slug: string
-}) => {
-  const router = useRouter()
-  const activeAccordianItem = useMenuActiveRefId()
-
-  // check if we're on a versioned page
-  let version = ''
-  if (router.asPath.includes('v1')) {
-    version = 'v1'
-  }
-
-  if (router.asPath.includes('v0')) {
-    version = 'v0'
-  }
-
-  const active = activeAccordianItem === id
-  return (
-    <li key={id} className="function-link-item">
-      <Link href={`/reference/${library}/${version ? version + '/' : ''}${slug}`} passHref>
-        <a
-          className={[
-            'cursor-pointer transition text-sm hover:text-brand-900 flex gap-3',
-            active ? 'text-brand-900' : 'text-scale-1000',
-          ].join(' ')}
-        >
-          {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
-          {title}
-        </a>
-      </Link>
-    </li>
-  )
-}
-
-const SideMenuTitle = ({ title }: { title: string }) => {
-  return (
-    <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider mb-3">
-      {title}
-    </span>
-  )
-}
-
-const Divider = () => {
-  return <div className="h-px w-full bg-blackA-300 dark:bg-whiteA-300 my-3"></div>
-}
+import React from 'react'
 
 interface INavigationMenuRefList {
   id: RefIdOptions
@@ -90,62 +35,10 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
   allowedClientKeys,
   active,
 }) => {
-  const router = useRouter()
-  const { isDarkMode } = useTheme()
-
-  let sections = commonSections
-
-  const allowedKeys = allowedClientKeys
-
-  if (!sections) console.error('no common sections imported')
-
-  const menu = NavItems[id]
-
-  const databaseFunctions = find(sections, { title: 'Database' })
-    ? find(sections, { title: 'Database' }).items
-    : []
-
-  const authFunctions = find(sections, { title: 'Auth' })
-    ? find(sections, { title: 'Auth' }).items
-    : []
-
-  const filterIds =
-    databaseFunctions.length > 0
-      ? find(databaseFunctions, {
-          id: 'using-filters',
-        }) &&
-        find(databaseFunctions, {
-          id: 'using-filters',
-        })
-          .items.filter((x) => allowedKeys.includes(x.id))
-          .map((x) => x.id)
-      : []
-  const modifierIds =
-    databaseFunctions.length > 0
-      ? find(databaseFunctions, {
-          id: 'using-modifiers',
-        }) &&
-        find(databaseFunctions, {
-          id: 'using-modifiers',
-        })
-          .items.filter((x) => allowedKeys.includes(x.id))
-          .map((x) => x.id)
-      : []
-
-  const authServerIds =
-    databaseFunctions.length > 0
-      ? find(authFunctions, {
-          id: 'admin-api',
-        }) &&
-        find(authFunctions, {
-          id: 'admin-api',
-        }).items.map((x) => x.id)
-      : []
-
   // console.log(filterIds)
   // console.log(modifierIds)
 
-  const level = useMenuLevelId()
+  // const level = useMenuLevelId()
 
   return (
     <div
@@ -160,150 +53,14 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
         !active ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
       ].join(' ')}
     >
-      <div className={'w-full flex flex-col gap-0 sticky top-8'}>
-        <Link href="/" passHref>
-          <a
-            className={[
-              'flex items-center gap-1 text-xs group mb-3',
-              'text-base transition-all duration-200 text-scale-1100 hover:text-brand-1200 hover:cursor-pointer ',
-            ].join(' ')}
-          >
-            <div className="relative w-2">
-              <div className="transition-all ease-out ml-0 group-hover:-ml-1">
-                <IconChevronLeft size={10} strokeWidth={3} />
-              </div>
-            </div>
-            <span>Back to Main Menu</span>
-          </a>
-        </Link>
-
-        <div className="flex items-center gap-3 my-3">
-          <Image
-            alt={id}
-            width={24}
-            height={24}
-            src={`${router.basePath}/img/icons/menu/${menu.icon}${isDarkMode ? '' : '-light'}.svg`}
-            className="rounded"
-          />
-          <span className={['text-base text-brand-1200 ', !menu.title && 'capitalize'].join(' ')}>
-            {menu.title}
-          </span>
-          <RevVersionDropdown />
-        </div>
-        {/* )} */}
-
-        <ul className="function-link-list">
-          {sections.map((fn: any, fnIndex) => {
-            //
-            // check if the link is allowed to be displayed
-            function isFuncNotInLibraryOrVersion(id, type) {
-              if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
-                /*
-                 * Remove this menu link from side bar, as it does not exist for either
-                 * this language, or for this lib version
-                 *
-                 * */
-                return true
-              } else {
-                return false
-              }
-            }
-
-            // run allow check
-            if (isFuncNotInLibraryOrVersion(fn.id, fn.type)) {
-              return <></>
-            }
-
-            const RenderLink = (props) => {
-              const activeAccordianItem = useMenuActiveRefId()
-              let active = false
-
-              const isFilter =
-                filterIds && filterIds.length > 0 && filterIds.includes(activeAccordianItem)
-              const isModifier =
-                modifierIds && modifierIds.length > 0 && modifierIds.includes(activeAccordianItem)
-              const isAuthServer =
-                authServerIds &&
-                authServerIds.length > 0 &&
-                authServerIds.includes(activeAccordianItem)
-
-              if (
-                (isFilter && !isModifier && !isAuthServer && props.id === 'using-filters') ||
-                (activeAccordianItem === 'using-filters' && props.id === 'using-filters')
-              ) {
-                active = true
-              } else if (
-                (isModifier && !isFilter && !isAuthServer && props.id === 'using-modifiers') ||
-                (activeAccordianItem === 'using-modifiers' && props.id === 'using-modifiers')
-              ) {
-                active = true
-              } else if (
-                (isAuthServer && !isFilter && !isModifier && props.id === 'admin-api') ||
-                (activeAccordianItem === 'admin-api' && props.id === 'admin-api')
-              ) {
-                active = true
-              } else {
-                active = false
-              }
-
-              return (
-                <Accordion.Root
-                  collapsible
-                  key={props.id + '-accordian-root-for-func-' + fnIndex}
-                  type="single"
-                  value={active ? props.id : ''}
-                >
-                  <Accordion.Item key={props.id + '-accordian-item'} value={props.id}>
-                    <FunctionLink {...props} library={lib} />
-                    <Accordion.Content
-                      key={props.id + '-sub-items-accordion-container'}
-                      className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2"
-                    >
-                      {props.items &&
-                        props.items
-                          .filter((item) => allowedKeys.includes(item.id))
-                          .map((item) => {
-                            return <FunctionLink {...item} library={lib} />
-                          })}
-                    </Accordion.Content>
-                  </Accordion.Item>
-                </Accordion.Root>
-              )
-            }
-
-            // handle subtitles with subitems
-            if (!fn.id) {
-              return (
-                <>
-                  <Divider />
-                  <SideMenuTitle title={fn.title} />
-                  {fn.items &&
-                    fn.items
-                      //.filter((item) => item.libs && item.libs.includes(lib))
-                      .map((item) => {
-                        // run allow check
-                        if (isFuncNotInLibraryOrVersion(item.id, item.type)) return <></>
-                        return <RenderLink {...item} library={menu.title} />
-                      })}
-                </>
-              )
-            } else {
-              // handle normal links
-              return (
-                <>
-                  <RenderLink {...fn} library={menu.title} />
-                  {fn.items &&
-                    fn.items
-                      //.filter((item) => item.libs.includes(lib))
-                      .map((item) => <RenderLink {...item} library={menu.title} />)}
-                </>
-              )
-            }
-          })}
-        </ul>
-      </div>
+      <NavigationMenuRefListItems
+        id={id}
+        lib={lib}
+        commonSections={commonSections}
+        allowedClientKeys={allowedClientKeys}
+      />
     </div>
   )
 }
 
-export default NavigationMenuRefList
+export default React.memo(NavigationMenuRefList)
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
new file mode 100644
index 00000000000..bda02438afc
--- /dev/null
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -0,0 +1,299 @@
+import * as Accordion from '@radix-ui/react-accordion'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { IconChevronLeft } from 'ui'
+import * as NavItems from './NavigationMenu.constants'
+
+import { find } from 'lodash'
+import Image from 'next/image'
+import { useTheme } from 'common/Providers'
+
+import RevVersionDropdown from '~/components/RefVersionDropdown'
+// import { useMenuActiveRefId } from '~/hooks/useMenuState'
+import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
+
+import React from 'react'
+
+const FunctionLink = ({
+  title,
+  id,
+  icon,
+  library,
+  slug,
+}: {
+  title: string
+  name?: string
+  id: string
+  icon?: string
+  product?: string
+  library: string
+  slug: string
+}) => {
+  const router = useRouter()
+  const activeAccordianItem = '1' // useMenuActiveRefId()
+
+  // check if we're on a versioned page
+  let version = ''
+  if (router.asPath.includes('v1')) {
+    version = 'v1'
+  }
+
+  if (router.asPath.includes('v0')) {
+    version = 'v0'
+  }
+
+  const active = activeAccordianItem === id
+  return (
+    <li key={id} className="function-link-item">
+      <Link href={`/reference/${library}/${version ? version + '/' : ''}${slug}`} passHref>
+        <a
+          className={[
+            'cursor-pointer transition text-sm hover:text-brand-900 flex gap-3',
+            active ? 'text-brand-900' : 'text-scale-1000',
+          ].join(' ')}
+        >
+          {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
+          {title}
+        </a>
+      </Link>
+    </li>
+  )
+}
+
+const SideMenuTitle = ({ title }: { title: string }) => {
+  return (
+    <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider mb-3">
+      {title}
+    </span>
+  )
+}
+
+const Divider = () => {
+  return <div className="h-px w-full bg-blackA-300 dark:bg-whiteA-300 my-3"></div>
+}
+
+interface INavigationMenuRefList {
+  id: RefIdOptions
+  lib: RefKeyOptions
+  commonSections: any[] // to do type up
+
+  // the keys of menu items that are allowed to be shown on the side menu
+  // if undefined, we show all the menu items
+  allowedClientKeys?: string[]
+}
+
+const Content: React.FC<INavigationMenuRefList> = ({
+  id,
+  lib,
+  commonSections,
+  allowedClientKeys,
+}) => {
+  const router = useRouter()
+  const { isDarkMode } = useTheme()
+
+  console.log(
+    id && 'id changed',
+    lib && 'lib changed',
+    commonSections && 'commonSections changed',
+    allowedClientKeys && 'allowedClientKeys changed'
+  )
+
+  let sections = commonSections
+
+  const allowedKeys = allowedClientKeys
+
+  if (!sections) console.error('no common sections imported')
+
+  const menu = NavItems[id]
+
+  const databaseFunctions = find(sections, { title: 'Database' })
+    ? find(sections, { title: 'Database' }).items
+    : []
+
+  const authFunctions = find(sections, { title: 'Auth' })
+    ? find(sections, { title: 'Auth' }).items
+    : []
+
+  const filterIds =
+    databaseFunctions.length > 0
+      ? find(databaseFunctions, {
+          id: 'using-filters',
+        }) &&
+        find(databaseFunctions, {
+          id: 'using-filters',
+        })
+          .items.filter((x) => allowedKeys.includes(x.id))
+          .map((x) => x.id)
+      : []
+  const modifierIds =
+    databaseFunctions.length > 0
+      ? find(databaseFunctions, {
+          id: 'using-modifiers',
+        }) &&
+        find(databaseFunctions, {
+          id: 'using-modifiers',
+        })
+          .items.filter((x) => allowedKeys.includes(x.id))
+          .map((x) => x.id)
+      : []
+
+  const authServerIds =
+    databaseFunctions.length > 0
+      ? find(authFunctions, {
+          id: 'admin-api',
+        }) &&
+        find(authFunctions, {
+          id: 'admin-api',
+        }).items.map((x) => x.id)
+      : []
+
+  // console.log(filterIds)
+  // console.log(modifierIds)
+
+  return (
+    <div className={'w-full flex flex-col gap-0 sticky top-8'}>
+      <Link href="/" passHref>
+        <a
+          className={[
+            'flex items-center gap-1 text-xs group mb-3',
+            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-1200 hover:cursor-pointer ',
+          ].join(' ')}
+        >
+          <div className="relative w-2">
+            <div className="transition-all ease-out ml-0 group-hover:-ml-1">
+              <IconChevronLeft size={10} strokeWidth={3} />
+            </div>
+          </div>
+          <span>Back to Main Menu</span>
+        </a>
+      </Link>
+
+      <div className="flex items-center gap-3 my-3">
+        <Image
+          alt={id}
+          width={24}
+          height={24}
+          src={`${router.basePath}/img/icons/menu/${menu.icon}${isDarkMode ? '' : '-light'}.svg`}
+          className="rounded"
+        />
+        <span className={['text-base text-brand-1200 ', !menu.title && 'capitalize'].join(' ')}>
+          {menu.title}
+        </span>
+        <RevVersionDropdown />
+      </div>
+      {/* )} */}
+
+      <ul className="function-link-list">
+        {sections.map((fn: any, fnIndex) => {
+          //
+          // check if the link is allowed to be displayed
+          function isFuncNotInLibraryOrVersion(id, type) {
+            if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
+              /*
+               * Remove this menu link from side bar, as it does not exist for either
+               * this language, or for this lib version
+               *
+               * */
+              return true
+            } else {
+              return false
+            }
+          }
+
+          // run allow check
+          if (isFuncNotInLibraryOrVersion(fn.id, fn.type)) {
+            return <></>
+          }
+
+          const RenderLink = (props) => {
+            const activeAccordianItem = 'using-filters' // useMenuActiveRefId()
+            let active = false
+
+            const isFilter =
+              filterIds && filterIds.length > 0 && filterIds.includes(activeAccordianItem)
+            const isModifier =
+              modifierIds && modifierIds.length > 0 && modifierIds.includes(activeAccordianItem)
+            const isAuthServer =
+              authServerIds &&
+              authServerIds.length > 0 &&
+              authServerIds.includes(activeAccordianItem)
+
+            if (
+              (isFilter && !isModifier && !isAuthServer && props.id === 'using-filters') ||
+              (activeAccordianItem === 'using-filters' && props.id === 'using-filters')
+            ) {
+              active = true
+            } else if (
+              (isModifier && !isFilter && !isAuthServer && props.id === 'using-modifiers') ||
+              (activeAccordianItem === 'using-modifiers' && props.id === 'using-modifiers')
+            ) {
+              active = true
+            } else if (
+              (isAuthServer && !isFilter && !isModifier && props.id === 'admin-api') ||
+              (activeAccordianItem === 'admin-api' && props.id === 'admin-api')
+            ) {
+              active = true
+            } else {
+              active = false
+            }
+
+            return (
+              <Accordion.Root
+                collapsible
+                key={props.id + '-accordian-root-for-func-' + fnIndex}
+                type="single"
+                value={active ? props.id : ''}
+              >
+                <Accordion.Item key={props.id + '-accordian-item'} value={props.id}>
+                  <FunctionLink {...props} library={lib} />
+                  <Accordion.Content
+                    key={props.id + '-sub-items-accordion-container'}
+                    className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2"
+                  >
+                    {props.items &&
+                      props.items
+                        .filter((item) => allowedKeys.includes(item.id))
+                        .map((item) => {
+                          return <FunctionLink {...item} library={lib} />
+                        })}
+                  </Accordion.Content>
+                </Accordion.Item>
+              </Accordion.Root>
+            )
+          }
+
+          // handle subtitles with subitems
+          if (!fn.id) {
+            return (
+              <>
+                <Divider />
+                <SideMenuTitle title={fn.title} />
+                {fn.items &&
+                  fn.items
+                    //.filter((item) => item.libs && item.libs.includes(lib))
+                    .map((item) => {
+                      // run allow check
+                      if (isFuncNotInLibraryOrVersion(item.id, item.type)) return <></>
+                      return <RenderLink {...item} library={menu.title} />
+                    })}
+              </>
+            )
+          } else {
+            // handle normal links
+            return (
+              <>
+                <RenderLink {...fn} library={menu.title} />
+                {fn.items &&
+                  fn.items
+                    //.filter((item) => item.libs.includes(lib))
+                    .map((item) => <RenderLink {...item} library={menu.title} />)}
+              </>
+            )
+          }
+        })}
+      </ul>
+    </div>
+  )
+}
+
+export default React.memo(Content)
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index c6ef90060d3..43caab8c0e9 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -7,7 +7,11 @@ import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
 
 import FooterHelpCallout from '~/components/FooterHelpCallout'
 
-import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
+import {
+  menuState,
+  // useMenuLevelId,
+  // useMenuMobileOpen
+} from '~/hooks/useMenuState'
 import { useEffect } from 'react'
 
 const SiteRefLayout = ({ children }) => {
@@ -23,8 +27,10 @@ const SiteRefLayout = ({ children }) => {
     }
   }, [])
 
-  const menuLevel = useMenuLevelId()
-  const mobileMenuOpen = useMenuMobileOpen()
+  const menuLevel = 'home'
+  // useMenuLevelId()
+  const mobileMenuOpen = false
+  // useMenuMobileOpen()
 
   const levelsData = {
     home: {

From 0b91ccc9f57a2ed0000a416e29db6ed1a6ee2a4d Mon Sep 17 00:00:00 2001
From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com>
Date: Wed, 14 Dec 2022 19:58:30 +0000
Subject: [PATCH 010/215] supabase js v2 yml removed jsx from descriptions

---
 spec/supabase_js_v2.yml | 3081 +--------------------------------------
 1 file changed, 11 insertions(+), 3070 deletions(-)

diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml
index 8899420a2ce..0a3a70f5483 100644
--- a/spec/supabase_js_v2.yml
+++ b/spec/supabase_js_v2.yml
@@ -1049,96 +1049,7 @@ functions:
           If you're in a situation where your tables are **NOT** directly
           related, but instead are joined by a _join table_, you can still use
           the `select()` method to query the related data. The join table needs
-          to have the foreign keys as part of its composite primary key.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text
-              );
-            create table
-              teams (
-                id int8 primary key,
-                name text
-              );
-            -- join table
-            create table
-              users_teams (
-                user_id int8 not null references users,
-                team_id int8 not null references teams,
-                -- both foreign keys must be part of a composite primary key
-                primary key (user_id, team_id)
-              );
-
-            insert into
-              users (id, name)
-            values
-              (1, 'Kiran'),
-              (2, 'Evan');
-            insert into
-              teams (id, name)
-            values
-              (1, 'Green'),
-              (2, 'Blue');
-            insert into
-              users_teams (user_id, team_id)
-            values
-              (1, 1),
-              (1, 2),
-              (2, 2);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .select(`
-                name,
-                teams (
-                  name
-                )
-              `)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Kiran",
-                  "teams": [
-                    {
-                      "name": "Green"
-                    },
-                    {
-                      "name": "Blue"
-                    }
-                  ]
-                },
-                {
-                  "name": "Evan",
-                  "teams": [
-                    {
-                      "name": "Blue"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
+          to have the foreign keys as part of its composite primary key.              
         hideCodeBlock: true
       - id: query-the-same-foreign-table-multiple-times
         name: Query the same foreign table multiple times
@@ -1198,69 +1109,6 @@ functions:
           If you need to query the same foreign table twice, use the name of the
           joined column to identify which join to use. You can also give each
           column an alias.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (id int8 primary key, name text);
-
-            create table
-              messages (
-                sender_id int8 not null references users,
-                receiver_id int8 not null references users,
-                content text
-              );
-
-            insert into
-              users (id, name)
-            values
-              (1, 'Kiran'),
-              (2, 'Evan');
-
-            insert into
-              messages (sender_id, receiver_id, content)
-            values
-              (1, 2, '👋');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('messages')
-              .select(`
-                content,
-                from:sender_id(name),
-                to:receiver_id(name)
-              `)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "content": "👋",
-                  "from": {
-                    "name": "Kiran"
-                  },
-                  "to": {
-                    "name": "Evan"
-                  }
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
       - id: filtering-through-foreign-tables
         name: Filtering through foreign tables
@@ -1314,90 +1162,7 @@ functions:
         description: |
           If the filter on a foreign table's column is not satisfied, the foreign
           table returns `[]` or `null` but the parent table is not filtered out.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Germany'),
-              (2, 'Indonesia');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 2, 'Bali'),
-              (2, 1, 'Munich');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('cities')
-              .select('name, countries(*)')
-              .eq('countries.name', 'Estonia')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Bali",
-                  "countries": null
-                },
-                {
-                  "name": "Munich",
-                  "countries": null
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          If you want to filter out the parent table rows, use the `!inner` hint:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('cities')
-              .select('name, countries!inner(*)')
-              .eq('countries.name', 'Estonia')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
+          If you want to filter out the parent table rows, use the `!inner` hint
         hideCodeBlock: true
       - id: querying-with-count-option
         name: Querying with count option
@@ -1430,46 +1195,7 @@ functions:
           ```
         description: |
           You can get the number of rows by using the
-          [count](/docs/reference/javascript/select#parameters) option. For
-          example, to get the table count without returning all rows:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { count, error } = await supabase
-              .from('countries')
-              .select('*', { count: 'exact', head: true })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "count": 3,
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
+          [count](/docs/reference/javascript/select#parameters) option.
         hideCodeBlock: true
       - id: querying-json-data
         name: Querying JSON data
@@ -1516,55 +1242,6 @@ functions:
           [JSON](/docs/guides/database/json) columns. Postgres offers some
           [operators](/docs/guides/database/json#query-the-jsonb-data) for
           querying JSON data.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text,
-                address jsonb
-              );
-
-            insert into
-              users (id, name, address)
-            values
-              (1, 'Avdotya', '{"city":"Saint Petersburg"}');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-          ```ts
-          const { data, error } = await supabase
-            .from('users')
-            .select(`
-              id, name,
-              address->city
-            `)
-          ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Avdotya",
-                  "city": "Saint Petersburg"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
 
   - id: insert
@@ -1598,63 +1275,6 @@ functions:
             "statusText": "Created"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { error } = await supabase
-              .from('countries')
-              .insert({ id: 1, name: 'Denmark' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Denmark"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: create-a-record-and-return-it
@@ -1685,43 +1305,6 @@ functions:
             "statusText": "Created"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .insert({ id: 1, name: 'Denmark' })
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Denmark"
-                }
-              ],
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
       - id: bulk-create
         name: Bulk create
@@ -1756,68 +1339,6 @@ functions:
         description: |
           A bulk create operation is handled in a single transaction.
           If any of the inserts fail, none of the rows are inserted.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { error } = await supabase
-              .from('countries')
-              .insert([
-                { id: 1, name: 'Nepal' },
-                { id: 1, name: 'Vietnam' },
-              ])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "error": {
-                "code": "23505",
-                "details": "Key (id)=(1) already exists.",
-                "hint": null,
-                "message": "duplicate key value violates unique constraint \"countries_pkey\""
-              },
-              "status": 409,
-              "statusText": "Conflict"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
 
   - id: update
@@ -1853,70 +1374,6 @@ functions:
             "statusText": "No Content"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Taiwan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { error } = await supabase
-              .from('countries')
-              .update({ name: 'Australia' })
-              .eq('id', 1)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 204,
-              "statusText": "No Content"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Australia"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: update-a-record-and-return-it
@@ -1953,49 +1410,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Taiwan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .update({ name: 'Australia' })
-              .eq('id', 1)
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Australia"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
       - id: updating-json-data
         name: Updating JSON data
@@ -2047,65 +1461,7 @@ functions:
         description: |
           Postgres offers some
           [operators](/docs/guides/database/json#query-the-jsonb-data) for
-          working with JSON data.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text,
-                address jsonb
-              );
-
-            insert into
-              users (id, name, address)
-            values
-              (1, 'Michael', '{ "postcode": 90210 }');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .update({
-                address: {
-                  street: 'Melrose Place',
-                  postcode: 90210
-                }
-              })
-              .eq('address->postcode', 90210)
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Michael",
-                  "address": {
-                    "street": "Melrose Place",
-                    "postcode": 90210
-                  }
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          Currently, it is only possible to update the entire JSON document.
+          working with JSON data. Currently, it is only possible to update the entire JSON document.
         hideCodeBlock: true
   - id: upsert
     title: 'Upsert data: upsert()'
@@ -2146,48 +1502,6 @@ functions:
             "statusText": "Created"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .upsert({ id: 1, name: 'Albania' })
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Albania"
-                }
-              ],
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: bulk-upsert-your-data
@@ -2230,55 +1544,6 @@ functions:
             "statusText": "Created"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .upsert([
-                { id: 1, name: 'Albania' },
-                { id: 2, name: 'Algeria' },
-              ])
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Albania"
-                },
-                {
-                  "id": 2,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
       - id: upserting-into-tables-with-constraints
         name: Upserting into tables with constraints
@@ -2322,90 +1587,8 @@ functions:
           (primary key) column to determine conflicts. If there is no existing
           row with the same `id`, `upsert()` inserts a new row, which
           will fail in this case as there is already a row with `handle` `"saoirse"`.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 generated by default as identity primary key,
-                handle text not null unique,
-                display_name text
-              );
-
-            insert into
-              users (id, handle, display_name)
-            values
-              (1, 'saoirse', null);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .upsert({ id: 42, handle: 'saoirse', display_name: 'Saoirse' })
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "error": {
-                "code": "23505",
-                "details": "Key (handle)=(saoirse) already exists.",
-                "hint": null,
-                "message": "duplicate key value violates unique constraint \"users_handle_key\""
-              },
-              "status": 409,
-              "statusText": "Conflict"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
           Using the `onConflict` option, you can instruct `upsert()` to use
-          another column with a unique constraint to determine conflicts:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            await supabase
-              .from('users')
-              .upsert(
-                { id: 42, handle: 'saoirse', display_name: 'Saoirse' },
-                { onConflict: 'handle' },
-              )
-            const { data, error } = await supabase
-              .from('users')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 42,
-                  "handle": "saoirse",
-                  "display_name": "Saoirse"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
+          another column with a unique constraint to determine conflicts.
         hideCodeBlock: true
 
   - id: delete
@@ -2446,65 +1629,6 @@ functions:
             "statusText": "No Content"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Spain');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { error } = await supabase
-              .from('countries')
-              .delete()
-              .eq('id', 1)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 204,
-              "statusText": "No Content"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
 
@@ -2542,36 +1666,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create function hello_world() returns text as $$
-              select 'Hello world';
-            $$ language sql;
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase.rpc('hello_world')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": "Hello world",
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: call-a-postgres-function-with-arguments
@@ -2595,36 +1689,6 @@ functions:
               "statusText": "OK"
             }
             ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create function echo(say text) returns text as $$
-              select say;
-            $$ language sql;
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase.rpc('echo', { say: '👋' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": "👋",
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
       - id: bulk-processing
         name: Bulk processing
@@ -2652,41 +1716,7 @@ functions:
           }
           ```
         description: |
-          You can process large payloads by passing in an array as an argument:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create function add_one_each(arr int[]) returns int[] as $$
-              select array_agg(n + 1) from unnest(arr) as n;
-            $$ language sql;
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase.rpc('add_one_each', { arr: [1, 2, 3] })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                2,
-                3,
-                4
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
+          You can process large payloads by passing in an array as an argument.
         hideCodeBlock: true
       - id: call-a-postgres-function-with-filters
         name: Call a Postgres function with filters
@@ -2728,51 +1758,6 @@ functions:
           Postgres functions that return tables can also be combined with
           [Filters](/docs/reference/javascript/using-filters) and
           [Modifiers](/docs/reference/javascript/using-modifiers).
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'France'),
-              (2, 'United Kingdom');
-
-            create function list_stored_countries() returns setof countries as $$
-              select * from countries;
-            $$ language sql;
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .rpc('list_stored_countries')
-              .eq('id', 1)
-              .single()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": {
-                "id": 1,
-                "name": "France"
-              },
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
 
   - id: using-filters
@@ -2900,56 +1885,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-            <TabPanel id="schema" label="Schema">
-
-              ```sql
-              create table
-                users (
-                  id int8 primary key,
-                  name text,
-                  address jsonb
-                );
-
-              insert into
-                users (id, name, address)
-              values
-                (1, 'Michael', '{ "postcode": 90210 }'),
-                (2, 'Jane', null);
-              ```
-
-            </TabPanel>
-            <TabPanel id="js" label="JavaScript">
-
-              ```ts
-              const { data, error } = await supabase
-                .from('users')
-                .select()
-                .eq('address->postcode', 90210)
-              ```
-
-            </TabPanel>
-            <TabPanel id="result" label="Result">
-
-              ```json
-              {
-                "data": [
-                  {
-                    "id": 1,
-                    "name": "Michael",
-                    "address": {
-                      "postcode": 90210
-                    }
-                  }
-                ],
-                "status": 200,
-                "statusText": "OK"
-              }
-              ```
-
-            </TabPanel>
-          </Tabs>
       - id: filter-foreign-tables
         name: Filter Foreign Tables
         code: |
@@ -3006,70 +1941,7 @@ functions:
             ```
         description: |
           You can filter on foreign tables in your `select()` query using dot
-          notation:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-            <TabPanel id="schema" label="Schema">
-
-              ```sql
-              create table
-                countries (id int8 primary key, name text);
-              create table
-                cities (
-                  id int8 primary key,
-                  country_id int8 not null references countries,
-                  name text
-                );
-
-              insert into
-                countries (id, name)
-              values
-                (1, 'Germany'),
-                (2, 'Indonesia');
-              insert into
-                cities (id, country_id, name)
-              values
-                (1, 2, 'Bali'),
-                (2, 1, 'Munich');
-              ```
-
-            </TabPanel>
-            <TabPanel id="js" label="JavaScript">
-
-              ```ts
-              const { data, error } = await supabase
-                .from('countries')
-                .select(`
-                  name,
-                  cities!inner (
-                    name
-                  )
-                `)
-                .eq('cities.name', 'Bali')
-              ```
-
-            </TabPanel>
-            <TabPanel id="result" label="Result">
-
-              ```json
-              {
-                "data": [
-                  {
-                    "name": "Indonesia",
-                    "cities": [
-                      {
-                        "name": "Bali"
-                      }
-                    ]
-                  }
-                ],
-                "status": 200,
-                "statusText": "OK"
-              }
-              ```
-
-            </TabPanel>
-          </Tabs>
+          notation.
   ######## TODO CHECK FILTER YAML ERRORS ########
   - id: eq
     title: eq()
@@ -3110,50 +1982,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .eq('name', 'Albania')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: neq
@@ -3199,54 +2027,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .neq('name', 'Albania')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                },
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: gt
@@ -3288,50 +2068,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .gt('id', 2)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: gte
@@ -3377,54 +2113,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .gte('id', 2)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                },
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: lt
@@ -3466,50 +2154,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .lt('id', 2)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: lte
@@ -3555,54 +2199,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .lte('id', 2)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                },
-                {
-                  "id": 2,
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: like
@@ -3633,50 +2229,6 @@ functions:
             ```
         response: |
 
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .like('name', '%Alba%')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: ilike
@@ -3718,50 +2270,6 @@ functions:
               "statusText": "OK"
             }
             ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .like('name', '%alba%')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: is
@@ -3803,81 +2311,10 @@ functions:
           }
           ```
         description: |
-          Using the `eq()` filter doesn't work when filtering for `null`:
+          Using the `eq()` filter doesn't work when filtering for `null`.
 
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
+          Instead, you need to use `is()`.
 
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'null'),
-              (2, null);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .eq('name', null)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "null"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          Instead, you need to use `is()`:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .is('name', null)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": null
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: in
@@ -3923,54 +2360,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .in('name', ['Albania', 'Algeria'])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                },
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: contains
@@ -4014,52 +2403,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              issues (
-                id int8 primary key,
-                title text,
-                tags text[]
-              );
-
-            insert into
-              issues (id, title, tags)
-            values
-              (1, 'Cache invalidation is not working', array['is:open', 'severity:high', 'priority:low']),
-              (2, 'Use better names', array['is:open', 'severity:low', 'priority:medium']);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('issues')
-              .select('title')
-              .contains('tags', ['is:open', 'severity:high'])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "title": "Cache invalidation is not working"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: on-range-columns
@@ -4106,54 +2449,6 @@ functions:
           types](https://www.postgresql.org/docs/current/rangetypes.html). You
           can filter on range columns using the string representation of range
           values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .contains('during', '[2000-01-01 13:00, 2000-01-01 13:30)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
       - id: on-jsonb-columns
         name: On `jsonb` columns
@@ -4192,52 +2487,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text,
-                address jsonb
-              );
-
-            insert into
-              users (id, name, address)
-            values
-              (1, 'Michael', '{ "postcode": 90210, "street": "Melrose Place" }'),
-              (2, 'Jane', '{}');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .select('name')
-              .contains('address', { postcode: 90210 })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Michael"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
 
   - id: contained-by
@@ -4281,52 +2530,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              classes (
-                id int8 primary key,
-                name text,
-                days text[]
-              );
-
-            insert into
-              classes (id, name, days)
-            values
-              (1, 'Chemistry', array['monday', 'friday']),
-              (2, 'History', array['monday', 'wednesday', 'thursday']);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('classes')
-              .select('name')
-              .containedBy('days', ['monday', 'tuesday', 'wednesday', 'friday'])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Chemistry"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: on-range-columns
@@ -4373,54 +2576,6 @@ functions:
           types](https://www.postgresql.org/docs/current/rangetypes.html). You
           can filter on range columns using the string representation of range
           values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .containedBy('during', '[2000-01-01 00:00, 2000-01-01 23:59)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
       - id: on-jsonb-columns
         name: On `jsonb` columns
@@ -4459,52 +2614,6 @@ functions:
               "statusText": "OK"
             }
             ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text,
-                address jsonb
-              );
-
-            insert into
-              users (id, name, address)
-            values
-              (1, 'Michael', '{ "postcode": 90210, "street": "Melrose Place" }'),
-              (2, 'Jane', '{}');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .select('name')
-              .containedBy('address', {})
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Jane"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
 
   - id: range-gt
@@ -4555,54 +2664,6 @@ functions:
           types](https://www.postgresql.org/docs/current/rangetypes.html). You
           can filter on range columns using the string representation of range
           values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeGt('during', '[2000-01-02 08:00, 2000-01-02 09:00)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "room_name": "Topaz",
-                  "during": "[\"2000-01-02 09:00:00\",\"2000-01-02 10:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
 
@@ -4654,54 +2715,6 @@ functions:
           types](https://www.postgresql.org/docs/current/rangetypes.html). You
           can filter on range columns using the string representation of range
           values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeGte('during', '[2000-01-02 08:30, 2000-01-02 09:30)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "room_name": "Topaz",
-                  "during": "[\"2000-01-02 09:00:00\",\"2000-01-02 10:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
 
@@ -4753,54 +2766,6 @@ functions:
           types](https://www.postgresql.org/docs/current/rangetypes.html). You
           can filter on range columns using the string representation of range
           values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeLt('during', '[2000-01-01 15:00, 2000-01-01 16:00)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: range-lte
@@ -4851,54 +2816,6 @@ functions:
           types](https://www.postgresql.org/docs/current/rangetypes.html). You
           can filter on range columns using the string representation of range
           values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeLte('during', '[2000-01-01 14:00, 2000-01-01 16:00)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
 
@@ -4950,54 +2867,6 @@ functions:
           types](https://www.postgresql.org/docs/current/rangetypes.html). You
           can filter on range columns using the string representation of range
           values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeAdjacent('during', '[2000-01-01 12:00, 2000-01-01 13:00)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
 
@@ -5042,52 +2911,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              issues (
-                id int8 primary key,
-                title text,
-                tags text[]
-              );
-
-            insert into
-              issues (id, title, tags)
-            values
-              (1, 'Cache invalidation is not working', array['is:open', 'severity:high', 'priority:low']),
-              (2, 'Use better names', array['is:open', 'severity:low', 'priority:medium']);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('issues')
-              .select('title')
-              .overlaps('tags', ['is:closed', 'severity:high'])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "title": "Cache invalidation is not working"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: on-range-columns
@@ -5134,54 +2957,6 @@ functions:
           types](https://www.postgresql.org/docs/current/rangetypes.html). You
           can filter on range columns using the string representation of range
           values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .overlaps('during', '[2000-01-01 12:45, 2000-01-01 13:15)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
   # TODO: schema & result
   - id: text-search
@@ -5288,49 +3063,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .match({ id: 2, name: 'Albania' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: not
@@ -5378,49 +3110,6 @@ functions:
               "statusText": "OK"
             }
             ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'null'),
-              (2, null);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .not('name', 'is', null)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "null"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: or
@@ -5471,52 +3160,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .or('id.eq.2,name.eq.Algeria')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Albania"
-                },
-                {
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: use-or-with-and
@@ -5553,50 +3196,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .or('id.gt.3,and(id.eq.1,name.eq.Afghanistan)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Afghanistan"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
       - id: use-or-on-foreign-tables
         name: Use `or` on foreign tables
@@ -5652,69 +3251,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Germany'),
-              (2, 'Indonesia');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 2, 'Bali'),
-              (2, 1, 'Munich');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities!inner (
-                  name
-                )
-              `)
-              .or('country_id.eq.1,name.eq.Beijing', { foreignTable: 'cities' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Germany",
-                  "cities": [
-                    {
-                      "name": "Munich"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
 
   - id: filter
@@ -5763,50 +3299,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .filter('name', 'in', '("Algeria","Japan")')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: on-a-foreign-table
@@ -5863,69 +3355,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Germany'),
-              (2, 'Indonesia');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 2, 'Bali'),
-              (2, 1, 'Munich');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities!inner (
-                  name
-                )
-              `)
-              .filter('cities.name', 'eq', 'Bali')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Indonesia",
-                  "cities": [
-                    {
-                      "name": "Bali"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
   - id: using-modifiers
     title: Using Modifiers
@@ -5976,70 +3405,6 @@ functions:
             "statusText": "Created"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .upsert({ id: 1, name: 'Albania' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .upsert({ id: 1, name: 'Algeria' })
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: order
@@ -6089,58 +3454,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .order('name', { ascending: false })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                },
-                {
-                  "id": 2,
-                  "name": "Albania"
-                },
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: on-a-foreign-table
@@ -6207,76 +3520,6 @@ functions:
         description: |
           Ordering on foreign tables doesn't affect the ordering of
           the parent table.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'United States'),
-              (2, 'Vanuatu');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 1, 'Atlanta'),
-              (2, 1, 'New York City');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities (
-                  name
-                )
-              `)
-              .order('name', { foreignTable: 'cities', ascending: false })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "United States",
-                  "cities": [
-                    {
-                      "name": "New York City"
-                    },
-                    {
-                      "name": "Atlanta"
-                    }
-                  ]
-                },
-                {
-                  "name": "Vanuatu",
-                  "cities": []
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
 
   - id: limit
@@ -6317,49 +3560,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .limit(1)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Afghanistan"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
       - id: on-a-foreign-table
@@ -6415,68 +3615,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'United States');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 1, 'Atlanta'),
-              (2, 1, 'New York City');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities (
-                  name
-                )
-              `)
-              .limit(1, { foreignTable: 'cities' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "United States",
-                  "cities": [
-                    {
-                      "name": "Atlanta"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
   - id: range
     title: range()
@@ -6519,52 +3657,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .range(0, 1)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Afghanistan"
-                },
-                {
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: abort-signal
@@ -6606,38 +3698,8 @@ functions:
             }
             ```
         description: |
-          You can use an [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to abort requests. Note that `status` and `statusText` don't mean anything for aborted requests as the request wasn't fulfilled.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const ac = new AbortController()
-            ac.abort()
-            const { data, error } = await supabase
-              .from('very_big_table')
-              .select()
-              .abortSignal(ac.signal)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "error": {
-                "message": "FetchError: The user aborted a request.",
-                "details": "",
-                "hint": "",
-                "code": ""
-              },
-              "status": 400,
-              "statusText": "Bad Request"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
+          You can use an [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to abort requests. 
+          Note that `status` and `statusText` don't mean anything for aborted requests as the request wasn't fulfilled.
         hideCodeBlock: true
         isSpotlight: true
   - id: single
@@ -6677,48 +3739,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .limit(1)
-              .single()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": {
-                "name": "Afghanistan"
-              },
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: maybe-single
@@ -6755,45 +3775,6 @@ functions:
             "statusText": "OK"
           }
           ```
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .eq('name', 'Singapore')
-              .maybeSingle()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
   - id: csv
@@ -6832,45 +3813,6 @@ functions:
           ```
         description: |
           By default, the data is returned in JSON format, but can also be returned as Comma Separated Values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .csv()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": "id,name\n1,Afghanistan\n2,Albania\n3,Algeria",
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
         hideCodeBlock: true
         isSpotlight: true
 
@@ -6969,7 +3911,6 @@ functions:
     examples:
       - id: basic-invocation
         name: Basic invocation
-        description:
         isSpotlight: true
         code: |
           ```js

From 73b0c16057c80dc4ce2805fe56773c1947230fad Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 16 Dec 2022 10:16:26 -0330
Subject: [PATCH 011/215] Cleanup and add social icons

---
 .../docs/components/Footer/DarkModeToggle.tsx |  45 ---
 apps/docs/components/Footer/index.tsx         | 133 --------
 apps/docs/components/FooterHelpCallout.tsx    |  14 +-
 apps/docs/components/Navigation/Footer.tsx    |  31 ++
 .../NavigationMenu/TopNavBarRef.tsx           |  28 +-
 .../reference/RefSectionHandler.tsx           |  14 +-
 apps/docs/layouts/Default.tsx                 |  94 -----
 apps/docs/layouts/SiteLayout.tsx              |  32 +-
 apps/docs/layouts/SiteRefLayout.tsx           | 321 ------------------
 apps/docs/layouts/guides/index.tsx            |   2 +-
 apps/docs/pages/[...slug].tsx                 |  74 ----
 11 files changed, 60 insertions(+), 728 deletions(-)
 delete mode 100644 apps/docs/components/Footer/DarkModeToggle.tsx
 delete mode 100644 apps/docs/components/Footer/index.tsx
 create mode 100644 apps/docs/components/Navigation/Footer.tsx
 delete mode 100644 apps/docs/layouts/Default.tsx
 delete mode 100644 apps/docs/layouts/SiteRefLayout.tsx
 delete mode 100644 apps/docs/pages/[...slug].tsx

diff --git a/apps/docs/components/Footer/DarkModeToggle.tsx b/apps/docs/components/Footer/DarkModeToggle.tsx
deleted file mode 100644
index 04f9d225854..00000000000
--- a/apps/docs/components/Footer/DarkModeToggle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useTheme } from 'common/Providers'
-import { IconSun, IconMoon } from '@supabase/ui'
-
-function DarkModeToggle() {
-  const { isDarkMode, toggleTheme } = useTheme()
-
-  const toggleDarkMode = () => {
-    localStorage.setItem('supabaseDarkMode', (!isDarkMode).toString())
-    toggleTheme()
-
-    const key = localStorage.getItem('supabaseDarkMode')
-    document.documentElement.className = key === 'true' ? 'dark' : ''
-  }
-
-  return (
-    <div className="flex items-center">
-      <IconSun className="text-scale-900" strokeWidth={2} />
-      <button
-        type="button"
-        aria-pressed="false"
-        className={`
-                relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent
-                transition-colors duration-200 ease-in-out focus:outline-none ${
-                  isDarkMode ? 'bg-scale-500' : 'bg-scale-900'
-                } mx-5
-              `}
-        onClick={() => toggleDarkMode()}
-      >
-        <span className="sr-only">Toggle Themes</span>
-        <span
-          aria-hidden="true"
-          className={`
-                  ${
-                    isDarkMode ? 'translate-x-5' : 'translate-x-0'
-                  } dark:bg-scale-300 inline-block h-5 w-5
-                  transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out
-                `}
-        />
-      </button>
-      <IconMoon className="text-scale-900" strokeWidth={2} />
-    </div>
-  )
-}
-
-export default DarkModeToggle
diff --git a/apps/docs/components/Footer/index.tsx b/apps/docs/components/Footer/index.tsx
deleted file mode 100644
index 01424c906f5..00000000000
--- a/apps/docs/components/Footer/index.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Badge } from 'ui'
-import Link from 'next/link'
-import Image from 'next/image'
-import FooterLinks from 'data/footer.json'
-import DarkModeToggle from './DarkModeToggle'
-import { useTheme } from 'common/Providers'
-import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
-import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
-
-const Footer = () => {
-  const { isDarkMode } = useTheme()
-
-  return (
-    <footer
-      className="border-scale-500 dark:border-scale-600 border-t"
-      aria-labelledby="footerHeading"
-    >
-      <h2 id="footerHeading" className="sr-only">
-        Footer
-      </h2>
-      <div className="sm:py-18 container relative mx-auto px-6 py-16 md:py-24 lg:px-16 lg:py-24 xl:px-20">
-        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-          <div className="space-y-8 xl:col-span-1">
-            <Link href="#" as="/">
-              <a className="w-40">
-                <Image
-                  src={isDarkMode ? supabaseLogoWordmarkDark : supabaseLogoWordmarkLight}
-                  width={160}
-                  height={30}
-                  alt="Supabase"
-                />
-              </a>
-            </Link>
-            <div className="flex space-x-5">
-              <a
-                href="https://twitter.com/supabase"
-                className="text-scale-900 hover:text-scale-1200 transition"
-              >
-                <span className="sr-only">Twitter</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
-                </svg>
-              </a>
-
-              <a
-                href="https://github.com/supabase"
-                className="text-scale-900 hover:text-scale-1200 transition"
-              >
-                <span className="sr-only">GitHub</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path
-                    fillRule="evenodd"
-                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </a>
-
-              <a
-                href="https://discord.supabase.com/"
-                className="text-scale-900 hover:text-scale-1200 transition"
-              >
-                <span className="sr-only">Discord</span>
-                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 71 55" aria-hidden="true">
-                  <path
-                    fillRule="evenodd"
-                    d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </a>
-
-              <a
-                href="https://youtube.com/c/supabase"
-                className="text-scale-900 hover:text-scale-1200 transition"
-              >
-                <span className="sr-only">Youtube</span>
-                <svg
-                  className="h-6 w-6"
-                  fill="currentColor"
-                  viewBox="0 0 576 512"
-                  aria-hidden="true"
-                >
-                  <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
-                </svg>
-              </a>
-            </div>
-          </div>
-          <div className="mt-12 grid grid-cols-1 gap-8 xl:col-span-2 xl:mt-0">
-            <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
-              {FooterLinks.map((segment: any) => {
-                return (
-                  <div key={`footer_${segment.title}`}>
-                    <h6 className="text-scale-1200 overwrite text-base">{segment.title}</h6>
-                    <ul className="mt-4 space-y-2">
-                      {segment.links.map((link: any, idx: number) => (
-                        <li key={`${segment.title}_link_${idx}`}>
-                          <a
-                            href={link.url}
-                            className={`text-sm transition-colors ${
-                              link.url
-                                ? 'text-scale-1100 hover:text-scale-1200 '
-                                : 'text-scale-900 hover:text-scale-900'
-                            } `}
-                          >
-                            {link.text}
-                            {!link.url && (
-                              <div className="ml-2 inline text-xs xl:ml-0 xl:block 2xl:ml-2 2xl:inline">
-                                <Badge color="scale" size="small">
-                                  Coming soon
-                                </Badge>
-                              </div>
-                            )}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-        <div className="border-scale-500 dark:border-scale-600 mt-32 flex justify-between border-t pt-8">
-          <small className="small">&copy; Supabase Inc</small>
-          <DarkModeToggle />
-        </div>
-      </div>
-    </footer>
-  )
-}
-
-export default Footer
diff --git a/apps/docs/components/FooterHelpCallout.tsx b/apps/docs/components/FooterHelpCallout.tsx
index 82f1a03c683..2eb6421dc4c 100644
--- a/apps/docs/components/FooterHelpCallout.tsx
+++ b/apps/docs/components/FooterHelpCallout.tsx
@@ -1,11 +1,13 @@
 const FooterHelpCallout = () => {
   return (
-    <div className="min-w-full px-8 py-6 prose bg-scale-300 dark:bg-whiteA-200 rounded">
-      <h5 className="text-sm m-0 text-scale-1100">Need some help?</h5>
-      <p className="m-0 text-sm text-scale-900">
-        Not to worry, our specialist engineers are here to help. Submit a support ticket through the{' '}
-        <a href="https://app.supabase.com/support/new">Dashboard</a>.
-      </p>
+    <div className="mt-32">
+      <div className="min-w-full px-8 py-6 prose bg-scale-300 dark:bg-whiteA-200 rounded">
+        <h5 className="text-sm m-0 text-scale-1100">Need some help?</h5>
+        <p className="m-0 text-sm text-scale-900">
+          Not to worry, our specialist engineers are here to help. Submit a support ticket through
+          the <a href="https://app.supabase.com/support/new">Dashboard</a>.
+        </p>
+      </div>
     </div>
   )
 }
diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
new file mode 100644
index 00000000000..1c91cef7360
--- /dev/null
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -0,0 +1,31 @@
+import Link from 'next/link'
+
+const Footer = () => {
+  return (
+    <div>
+      <hr className="border-scale-400  mt-8"></hr>
+      <div className="flex flex-col lg:flex-row gap-3 mt-6">
+        <span className="text-xs text-scale-900">Supabase 2022</span>
+        <span className="text-xs text-scale-900">—</span>
+        <Link href="/handbook/contributing">
+          <a className="text-xs text-scale-800 hover:underline">Contributing</a>
+        </Link>
+        <Link href="https://supabase.com/changelog">
+          <a className="text-xs text-scale-800 hover:underline">Changelog</a>
+        </Link>
+
+        <Link href="https://github.com/supabase/supabase/blob/master/DEVELOPERS.md">
+          <a className="text-xs text-scale-800 hover:underline">Author Styleguide</a>
+        </Link>
+        <Link href="https://supabase.com/docs/oss">
+          <a className="text-xs text-scale-800 hover:underline">Open Source</a>
+        </Link>
+        <Link href="https://supabase.com/supasquad">
+          <a className="text-xs text-scale-800 hover:underline">SupaSquad</a>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default Footer
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index 6fcae17712d..d5a706d6cb2 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -2,19 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FC, useEffect, useState } from 'react'
-import {
-  Badge,
-  Button,
-  Dropdown,
-  IconCommand,
-  IconMenu,
-  IconMessageSquare,
-  IconMoon,
-  IconSearch,
-  IconSun,
-  Input,
-  Listbox,
-} from 'ui'
+import { Button, IconCommand, IconGitHub, IconMoon, IconSearch, IconSun } from 'ui'
 import { SearchButton } from '~/components/DocSearch'
 import { REFERENCES } from '~/components/Navigation/Navigation.constants'
 import { useTheme } from 'common/Providers'
@@ -134,7 +122,7 @@ const TopNavBarRef: FC = () => {
             target="_blank"
             rel="noreferrer noopener"
           >
-            Main site
+            Supabase.com
           </Button>
           <Button
             type="text"
@@ -146,6 +134,18 @@ const TopNavBarRef: FC = () => {
           >
             Dashboard
           </Button>
+          <ul className="flex items-center">
+            <Button
+              type="text"
+              as="a"
+              // @ts-ignore
+              href="https://github.com/supabase/supabase"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <IconGitHub size={16} />
+            </Button>
+          </ul>
           <ul className="flex items-center">
             <li className="px-4">
               <div className="cursor-pointer" onClick={toggleDarkMode}>
diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx
index cca2e834ac9..75476287461 100644
--- a/apps/docs/components/reference/RefSectionHandler.tsx
+++ b/apps/docs/components/reference/RefSectionHandler.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react'
 import components from '~/components'
 import RefEducationSection from '~/components/reference/RefEducationSection'
 import RefFunctionSection from '~/components/reference/RefFunctionSection'
-import OldLayout from '~/layouts/Default'
+
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
 import ApiOperationSection from './ApiOperationSection'
 import CliCommandSection from './CLICommandSection'
@@ -34,18 +34,6 @@ const RefSectionHandler = (props) => {
     }
   })
 
-  /*
-   * handle old ref pages
-   */
-  if (!isNewDocs) {
-    return (
-      // @ts-ignore
-      <OldLayout meta={props.pageProps.meta} toc={props.pageProps.toc}>
-        <MDXRemote {...props.pageProps.content} components={components} />
-      </OldLayout>
-    )
-  }
-
   return (
     <RefSubLayout>
       {props.sections.map((x) => {
diff --git a/apps/docs/layouts/Default.tsx b/apps/docs/layouts/Default.tsx
deleted file mode 100644
index 515f73b89ac..00000000000
--- a/apps/docs/layouts/Default.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useEffect, FC } from 'react'
-import { NextSeo } from 'next-seo'
-import NavBar from '../components/Navigation/NavBar'
-import SideBar from '../components/Navigation/SideBar'
-import Footer from '../components/Footer'
-import TableOfContents from '~/components/TableOfContents'
-import { menuItems } from '~/components/Navigation/Navigation.constants'
-import { useRouter } from 'next/router'
-import { getPageType } from '~/lib/helpers'
-
-interface Props {
-  meta: { title: string; description?: string; hide_table_of_contents?: boolean }
-  children: any
-  toc?: any
-  menuItems?: any
-  currentPage?: string
-}
-
-const Layout: FC<Props> = ({ meta, children, toc }) => {
-  const { asPath } = useRouter()
-
-  useEffect(() => {
-    const key = localStorage.getItem('supabaseDarkMode')
-    if (!key) {
-      // Default to dark mode if no preference config
-      document.documentElement.className = 'dark'
-    } else {
-      document.documentElement.className = key === 'true' ? 'dark' : ''
-    }
-  }, [])
-
-  const hasTableOfContents =
-    toc !== undefined && toc.json.filter((item) => item.lvl !== 1 && item.lvl <= 3).length > 0
-
-  const pageType = getPageType(asPath)
-
-  console.log('Default, pageType', pageType)
-
-  return (
-    <>
-      <NextSeo
-        title={`${meta?.title} | Supabase`}
-        description={meta?.description ? meta?.description : meta?.title}
-        openGraph={{
-          title: meta?.title,
-          description: meta?.description,
-          url: `https://supabase.com/docs/${asPath}`,
-          images: [
-            {
-              url: `https://supabase.com/docs/img/supabase-og-image.png`,
-            },
-          ],
-        }}
-      />
-
-      <main>
-        <NavBar />
-        <div className="flex w-full flex-row">
-          <SideBar menuItems={menuItems[pageType]} />
-          <div className="main-content-pane docs-width grid md:grid-cols-12 gap-4 justify-between p-4 pb-8 w-full">
-            <div
-              className={`${
-                meta?.hide_table_of_contents || !hasTableOfContents
-                  ? 'col-span-12 xl:col-start-2 xl:col-span-10 2xl:col-start-3 2xl:col-span-8'
-                  : 'col-span-12 lg:col-span-9'
-              } py-2 lg:py-4 px-2 lg:px-8 mx-auto`}
-            >
-              <article
-                className={`${
-                  meta?.hide_table_of_contents || !hasTableOfContents ? 'xl:min-w-[880px]' : ''
-                } doc-content-container prose dark:prose-dark dark:bg-scale-200 width-full mt-8 2xl:max-w-[880px]`}
-              >
-                {children}
-              </article>
-            </div>
-            {hasTableOfContents && !meta?.hide_table_of_contents && (
-              <div
-                className={[
-                  'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
-                  'thin-scrollbar overflow-y-auto sticky hidden xl:block md:col-span-3 px-2',
-                ].join(' ')}
-              >
-                <TableOfContents toc={toc} />
-              </div>
-            )}
-          </div>
-        </div>
-        <Footer />
-      </main>
-    </>
-  )
-}
-
-export default Layout
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 9feac530869..ff33da8f987 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -9,8 +9,9 @@ import FooterHelpCallout from '~/components/FooterHelpCallout'
 
 import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
 import { useEffect } from 'react'
+import Footer from '~/components/Navigation/Footer'
 
-const SiteRefLayout = ({ children }) => {
+const SiteLayout = ({ children }) => {
   const { isDarkMode } = useTheme()
 
   useEffect(() => {
@@ -270,31 +271,8 @@ const SiteRefLayout = ({ children }) => {
             </div>
             <div className="grow px-5 max-w-7xl mx-auto py-16">
               {children}
-
-              <div className="mt-32">
-                <FooterHelpCallout />
-              </div>
-              <hr className="border-scale-400  mt-8"></hr>
-              <div className="flex flex-col lg:flex-row gap-3 mt-6">
-                <span className="text-xs text-scale-900">Supabase 2022</span>
-                <span className="text-xs text-scale-900">—</span>
-                <Link href="/handbook/contributing">
-                  <a className="text-xs text-scale-800 hover:underline">Contributing</a>
-                </Link>
-                <Link href="https://supabase.com/changelog">
-                  <a className="text-xs text-scale-800 hover:underline">Changelog</a>
-                </Link>
-
-                <Link href="https://github.com/supabase/supabase/blob/master/DEVELOPERS.md">
-                  <a className="text-xs text-scale-800 hover:underline">Author Styleguide</a>
-                </Link>
-                <Link href="https://supabase.com/docs/oss">
-                  <a className="text-xs text-scale-800 hover:underline">Open Source</a>
-                </Link>
-                <Link href="https://supabase.com/supasquad">
-                  <a className="text-xs text-scale-800 hover:underline">SupaSquad</a>
-                </Link>
-              </div>
+              <FooterHelpCallout />
+              <Footer />
             </div>
 
             <div
@@ -317,4 +295,4 @@ const SiteRefLayout = ({ children }) => {
   )
 }
 
-export default SiteRefLayout
+export default SiteLayout
diff --git a/apps/docs/layouts/SiteRefLayout.tsx b/apps/docs/layouts/SiteRefLayout.tsx
deleted file mode 100644
index 930daa4d684..00000000000
--- a/apps/docs/layouts/SiteRefLayout.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-import { useTheme } from 'common/Providers'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
-import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
-
-import FooterHelpCallout from '~/components/FooterHelpCallout'
-
-import { menuState } from '~/hooks/useMenuState'
-import { useEffect } from 'react'
-
-const SiteRefLayout = ({ children }) => {
-  const { isDarkMode } = useTheme()
-
-  useEffect(() => {
-    const key = localStorage.getItem('supabaseDarkMode')
-    if (!key) {
-      // Default to dark mode if no preference config
-      document.documentElement.className = 'dark'
-    } else {
-      document.documentElement.className = key === 'true' ? 'dark' : ''
-    }
-  }, [])
-
-  const menuLevel = 'home'
-  // useMenuLevelId()
-  const mobileMenuOpen = false
-
-  const levelsData = {
-    home: {
-      icon: '/docs/img/icons/menu/home',
-      name: 'Home',
-    },
-    gettingstarted: {
-      icon: '/docs/img/icons/menu/getting-started',
-      name: 'Getting Started',
-    },
-    database: {
-      icon: '/docs/img/icons/menu/database',
-      name: 'Database',
-    },
-    auth: {
-      icon: '/docs/img/icons/menu/auth',
-      name: 'Auth',
-    },
-    functions: {
-      icon: '/docs/img/icons/menu/functions',
-      name: 'Functions',
-    },
-    realtime: {
-      icon: '/docs/img/icons/menu/realtime',
-      name: 'Realtime',
-    },
-    storage: {
-      icon: '/docs/img/icons/menu/storage',
-      name: 'Storage',
-    },
-    platform: {
-      icon: '/docs/img/icons/menu/platform',
-      name: 'Platform',
-    },
-    resources: {
-      icon: '/docs/img/icons/menu/resources',
-      name: 'Resources',
-    },
-    integrations: {
-      icon: '/docs/img/icons/menu/integrations',
-      name: 'Integrations',
-    },
-    reference_javascript_v1: {
-      icon: '/docs/img/icons/menu/reference-javascript',
-      name: 'Javascript Reference v1.0',
-    },
-    reference_javascript_v2: {
-      icon: '/docs/img/icons/menu/reference-javascript',
-      name: 'Javascript Reference v2.0',
-    },
-    reference_dart_v0: {
-      icon: '/docs/img/icons/menu/reference-dart',
-      name: 'Dart Reference v0.0',
-    },
-    reference_dart_v1: {
-      icon: '/docs/img/icons/menu/reference-dart',
-      name: 'Dart Reference v0.0',
-    },
-    reference_cli: {
-      icon: '/docs/img/icons/menu/reference-cli',
-      name: 'CLI Reference',
-    },
-    reference_api: {
-      icon: '/docs/img/icons/menu/reference-api',
-      name: 'Management API Reference',
-    },
-    reference_self_hosting_auth: {
-      icon: '/docs/img/icons/menu/reference-auth',
-      name: 'Auth Server Reference',
-    },
-    reference_self_hosting_storage: {
-      icon: '/docs/img/icons/menu/reference-storage',
-      name: 'Storage Server Reference',
-    },
-    reference_self_hosting_realtime: {
-      icon: '/docs/img/icons/menu/reference-realtime',
-      name: 'Realtime Server Reference',
-    },
-  }
-
-  return (
-    <main>
-      {/* <img
-          src={`${router.basePath}/img/gradient-bg.png`}
-          className="absolute left-0 w-[520px] top-0 -z-1 pointer-events-none"
-        /> */}
-
-      <div className="flex flex-row h-screen">
-        <div
-          className={[
-            'hidden', // experiment hidden
-            'transition-all',
-            'top-0',
-            'relative',
-            'h-screen w-[420px]',
-            'z-10',
-            'lg:flex flex-col ml-0',
-          ].join(' ')}
-        >
-          <div
-            className={[
-              'top-0',
-              'relative',
-              'w-auto',
-              'z-10',
-
-              'border-r overflow-auto h-screen',
-              'backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300',
-              'flex flex-col',
-            ].join(' ')}
-          >
-            <div className="top-0 sticky z-10">
-              <div>
-                <div>
-                  <div
-                    className={[
-                      'hidden md:flex md:height-auto',
-                      'pt-8 bg-scale-200 flex-col gap-8',
-                    ].join(' ')}
-                  >
-                    <Link href="/">
-                      <a className="px-10 flex items-center gap-2">
-                        <Image
-                          className="cursor-pointer"
-                          src={isDarkMode ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
-                          width={96}
-                          height={24}
-                          alt="Supabase Logo"
-                        />
-                        <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
-                      </a>
-                    </Link>
-                    {/* {router.asPath.includes('/reference/') && <RefSwitcher />} */}
-                  </div>
-                  <div className="h-4 bg-scale-200 w-full"></div>
-                  <div className="bg-gradient-to-b from-scale-200 to-transparent h-4 w-full"></div>
-                </div>
-              </div>
-            </div>
-            <div className={['pb-10 px-5 md:px-10 md:flex'].join(' ')}>
-              <NavigationMenu />
-            </div>
-          </div>
-        </div>
-        <div
-          // #docs-content-container is used by layout to scroll to top
-          id="docs-content-container"
-          className={[
-            'w-full h-screen transition-all ease-out',
-            mobileMenuOpen ? 'overflow-hidden' : 'overflow-auto',
-          ].join(' ')}
-        >
-          <div className="flex flex-col relative">
-            {/* <NavigationMenu /> */}
-            <div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
-              <TopNavBarRef />
-            </div>
-            <div
-              className={[
-                'sticky transition-all top-0',
-                'z-10',
-                'backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300',
-              ].join(' ')}
-            >
-              <div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
-                <div
-                  className={[
-                    'transition-all ease-out z-10',
-                    'top-0',
-                    mobileMenuOpen && 'absolute',
-                    'flex items-center h-[40px]',
-                    mobileMenuOpen ? 'gap-0' : 'gap-3',
-                  ].join(' ')}
-                >
-                  <button
-                    className={['mr-2', mobileMenuOpen && 'mt-0.5'].join(' ')}
-                    onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
-                  >
-                    <div
-                      className={[
-                        'space-y-1 group cursor-pointer relative',
-                        mobileMenuOpen ? 'w-4 h-4' : 'w-4 h-[8px]',
-                      ].join(' ')}
-                    >
-                      <span
-                        className={[
-                          'transition-all ease-out block w-4 h-px bg-scale-900 group-hover:bg-scale-1200',
-                          !mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]',
-                        ].join(' ')}
-                      ></span>
-                      <span
-                        className={[
-                          'transition-all ease-out block h-px bg-scale-900 group-hover:bg-scale-1200',
-                          !mobileMenuOpen
-                            ? 'w-3 group-hover:w-4'
-                            : 'absolute w-4 -rotate-45 top-[2px]',
-                        ].join(' ')}
-                      ></span>
-                    </div>
-                  </button>
-                  <div className={[].join(' ')}>
-                    <img
-                      src={
-                        menuLevel
-                          ? levelsData[menuLevel].icon + '.svg'
-                          : levelsData['home'].icon + '.svg'
-                      }
-                      className={[
-                        'transition-all duration-200',
-                        mobileMenuOpen ? 'invisible w-0 h-0' : 'w-4 h-4',
-                      ].join(' ')}
-                    />
-                  </div>
-                  <span
-                    className={[
-                      'transition-all duration-200',
-                      'text-scale-1200',
-                      mobileMenuOpen ? 'text-xs' : 'text-sm',
-                    ].join(' ')}
-                  >
-                    {mobileMenuOpen
-                      ? 'Close'
-                      : menuLevel
-                      ? levelsData[menuLevel].name
-                      : levelsData['home'].name}
-                  </span>
-                </div>
-                <div
-                  className={[
-                    'transition-all ease-out duration-200',
-                    'absolute left-0 right-0 h-screen',
-                    'px-5 pl-5 py-16',
-                    'top-[0px]',
-                    'bg-scale-200',
-                    mobileMenuOpen
-                      ? 'overflow-y-auto opacity-100 left-[0px] visible'
-                      : 'left-[-40px] h-0 opacity-0 invisible',
-                  ].join(' ')}
-                >
-                  <NavigationMenu />
-                </div>
-              </div>
-            </div>
-            <div className="grow px-5 max-w-7xl mx-auto py-16">
-              {children}
-
-              <div className="mt-32">
-                <FooterHelpCallout />
-              </div>
-              <hr className="border-scale-400  mt-8"></hr>
-              <div className="flex flex-col lg:flex-row gap-3 mt-6">
-                <span className="text-xs text-scale-900">Supabase 2022</span>
-                <span className="text-xs text-scale-900">—</span>
-                <Link href="/handbook/contributing">
-                  <a className="text-xs text-scale-800 hover:underline">Contributing</a>
-                </Link>
-                <Link href="https://supabase.com/changelog">
-                  <a className="text-xs text-scale-800 hover:underline">Changelog</a>
-                </Link>
-
-                <Link href="https://github.com/supabase/supabase/blob/master/DEVELOPERS.md">
-                  <a className="text-xs text-scale-800 hover:underline">Author Styleguide</a>
-                </Link>
-                <Link href="https://supabase.com/docs/oss">
-                  <a className="text-xs text-scale-800 hover:underline">Open Source</a>
-                </Link>
-                <Link href="https://supabase.com/supasquad">
-                  <a className="text-xs text-scale-800 hover:underline">SupaSquad</a>
-                </Link>
-              </div>
-            </div>
-
-            <div
-              className={[
-                // 'top-0 left-0',
-                'hidden', // experiment hidden
-                'h-full',
-                'left-0',
-                'right-0',
-                'z-10',
-                'backdrop-blur-sm backdrop-filter bg-white-1200 dark:bg-blackA-600',
-                mobileMenuOpen ? 'absolute MOBILE-MENU-OPEN' : 'hidden h-0 MOBILE-MENU-CLOSED',
-              ].join(' ')}
-              onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
-            ></div>
-          </div>
-        </div>
-      </div>
-    </main>
-  )
-}
-
-export default SiteRefLayout
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 10ccfed870d..25b26b3fec7 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -76,7 +76,7 @@ const Layout: FC<Props> = (props) => {
         }}
       />
 
-      <div className={['grid grid-cols-12 relative'].join(' ')}>
+      <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
         <div
           className={[
             'relative',
diff --git a/apps/docs/pages/[...slug].tsx b/apps/docs/pages/[...slug].tsx
deleted file mode 100644
index 6b34513a155..00000000000
--- a/apps/docs/pages/[...slug].tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import toc from 'markdown-toc'
-import { MDXRemote } from 'next-mdx-remote'
-import { serialize } from 'next-mdx-remote/serialize'
-import components from '../components/index'
-import NewLayout from '~/layouts/DefaultGuideLayout'
-
-import Layout from '~/layouts/Default'
-import { getAllDocs, getDocsBySlug } from '../lib/docs'
-
-interface Meta {
-  id: string
-  title: string
-  sidebar_label: string
-  hide_table_of_contents: boolean
-}
-
-interface Props {
-  meta: Meta
-  content: any
-  toc: any
-}
-const isNewDocs = process.env.NEXT_PUBLIC_NEW_DOCS === 'true'
-
-export default function Doc({ meta, content, toc }: Props) {
-  return (
-    // @ts-ignore
-    <>
-      {Object.entries(meta).length > 0 || !isNewDocs ? (
-        <Layout meta={meta} toc={toc}>
-          <MDXRemote {...content} components={components} />
-        </Layout>
-      ) : (
-        <NewLayout meta={meta} toc={toc}>
-          <MDXRemote {...content} components={components} />
-        </NewLayout>
-      )}
-    </>
-  )
-}
-
-export async function getStaticProps({ params }: { params: { slug: string[] } }) {
-  let slug
-  if (params.slug.length > 1) {
-    slug = `docs/${params.slug.join('/')}`
-  } else {
-    slug = `docs/${params.slug[0]}`
-  }
-
-  let doc = getDocsBySlug(slug)
-  const content = await serialize(doc.content || '')
-
-  return {
-    props: {
-      ...doc,
-      content,
-      toc: toc(doc.content, { maxdepth: 1, firsth1: false }),
-    },
-  }
-}
-
-export function getStaticPaths() {
-  let docs = getAllDocs()
-
-  return {
-    paths: docs.map(() => {
-      return {
-        params: {
-          slug: docs.map((d) => d.slug),
-        },
-      }
-    }),
-    fallback: 'blocking',
-  }
-}

From ada65274973f4b2f8508e8a14f13839ee03611d4 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 16 Dec 2022 10:53:01 -0330
Subject: [PATCH 012/215] Add footer icons

---
 apps/docs/components/Navigation/Footer.tsx    |  59 ++++---
 apps/docs/data/footer.json                    | 152 +-----------------
 .../public/img/icons/discord-icon-outline.svg |   1 +
 apps/docs/public/img/icons/discord-icon.svg   |  19 ++-
 4 files changed, 56 insertions(+), 175 deletions(-)
 create mode 100644 apps/docs/public/img/icons/discord-icon-outline.svg

diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 1c91cef7360..808faca43d3 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -1,28 +1,49 @@
+import Image from 'next/image'
 import Link from 'next/link'
+import { Button, IconGitHub, IconTwitter } from '~/../../packages/ui'
+import footerData from '~/data/footer.json'
 
 const Footer = () => {
   return (
     <div>
       <hr className="border-scale-400  mt-8"></hr>
-      <div className="flex flex-col lg:flex-row gap-3 mt-6">
-        <span className="text-xs text-scale-900">Supabase 2022</span>
-        <span className="text-xs text-scale-900">—</span>
-        <Link href="/handbook/contributing">
-          <a className="text-xs text-scale-800 hover:underline">Contributing</a>
-        </Link>
-        <Link href="https://supabase.com/changelog">
-          <a className="text-xs text-scale-800 hover:underline">Changelog</a>
-        </Link>
-
-        <Link href="https://github.com/supabase/supabase/blob/master/DEVELOPERS.md">
-          <a className="text-xs text-scale-800 hover:underline">Author Styleguide</a>
-        </Link>
-        <Link href="https://supabase.com/docs/oss">
-          <a className="text-xs text-scale-800 hover:underline">Open Source</a>
-        </Link>
-        <Link href="https://supabase.com/supasquad">
-          <a className="text-xs text-scale-800 hover:underline">SupaSquad</a>
-        </Link>
+      <div className="flex gap-4 items-center mt-6 justify-between">
+        <div className="flex flex-col lg:flex-row gap-3 ">
+          <span className="text-xs text-scale-900">Supabase 2022</span>
+          <span className="text-xs text-scale-900">—</span>
+          {footerData.map((item) => (
+            <Link href={item.url}>
+              <a className="text-xs text-scale-800 hover:underline">{item.title}</a>
+            </Link>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            type="text"
+            as="a"
+            // @ts-ignore
+            href="https://twitter.com/supabase"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <IconTwitter size={16} />
+          </Button>
+          <Button
+            type="text"
+            as="a"
+            // @ts-ignore
+            href="https://discord.supabase.com/"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <Image
+              alt="Discord"
+              width={16}
+              height={13}
+              src="/docs/img/icons/discord-icon-outline.svg"
+            />
+          </Button>
+        </div>
       </div>
     </div>
   )
diff --git a/apps/docs/data/footer.json b/apps/docs/data/footer.json
index 3d3286890c4..1a703f19a96 100644
--- a/apps/docs/data/footer.json
+++ b/apps/docs/data/footer.json
@@ -1,150 +1,10 @@
 [
+  { "title": "Contributing", "url": "/handbook/contributing" },
+  { "title": "Changelog", "url": "https://supabase.com/changelog" },
   {
-    "title": "Product",
-    "links": [
-      {
-        "text": "Database",
-        "url": "/database"
-      },
-      {
-        "text": "Auth",
-        "url": "/auth"
-      },
-      {
-        "text": "Functions",
-        "url": "/edge-functions"
-      },
-      {
-        "text": "Realtime",
-        "url": "/realtime"
-      },
-      {
-        "text": "Storage",
-        "url": "/storage"
-      },
-      {
-        "text": "Pricing",
-        "url": "/pricing"
-      },
-      {
-        "text": "Beta",
-        "url": "/beta"
-      }
-    ]
+    "title": "Author Styleguide",
+    "url": "https://github.com/supabase/supabase/blob/master/DEVELOPERS.md"
   },
-  {
-    "title": "Resources",
-    "links": [
-      {
-        "text": "Support",
-        "url": "/support"
-      },
-      {
-        "text": "System Status",
-        "url": "https://status.supabase.com/"
-      },
-      {
-        "text": "Integrations",
-        "url": "/partners/integrations"
-      },
-      {
-        "text": "Experts",
-        "url": "/partners/experts"
-      },
-      {
-        "text": "Brand Assets / Logos",
-        "url": "/brand-assets"
-      },
-      {
-        "text": "DPA",
-        "url": "/legal/dpa"
-      },
-      {
-        "text": "SOC2",
-        "url": "/legal/soc2"
-      }
-    ]
-  },
-  {
-    "title": "Developers",
-    "links": [
-      {
-        "text": "Documentation",
-        "url": "/docs"
-      },
-      {
-        "text": "API Reference",
-        "url": "/docs/reference"
-      },
-      {
-        "text": "Changelog",
-        "url": "/changelog"
-      },
-      {
-        "text": "Contributing",
-        "url": "/docs/handbook/contributing"
-      },
-      {
-        "text": "Open Source",
-        "url": "/docs/oss"
-      },
-      {
-        "text": "SupaSquad",
-        "url": "/supasquad"
-      },
-      {
-        "text": "DevTo",
-        "url": "https://dev.to/supabase"
-      },
-      {
-        "text": "RSS",
-        "url": "/rss.xml"
-      }
-    ]
-  },
-  {
-    "title": "Company",
-    "links": [
-      {
-        "text": "Blog",
-        "url": "/blog"
-      },
-      {
-        "text": "Careers",
-        "url": "https://about.supabase.com/careers"
-      },
-      {
-        "text": "Company",
-        "url": "/company"
-      },
-      {
-        "text": "Terms of Service",
-        "url": "/docs/company/terms"
-      },
-      {
-        "text": "Privacy Policy",
-        "url": "/docs/company/privacy"
-      },
-      {
-        "text": "Acceptable Use Policy",
-        "url": "/docs/company/aup"
-      },
-      {
-        "text": "Service Level Agreement",
-        "url": "/docs/company/sla"
-      },
-      {
-        "text": "Humans.txt",
-        "url": "/humans.txt"
-      },
-      {
-        "text": "Lawyers.txt",
-        "url": "/lawyers.txt"
-      },
-      {
-        "text": "Security.txt",
-        "url": "/.well-known/security.txt"
-      }
-    ]
-  }
+  { "title": "Open Source", "url": "https://supabase.com/docs/oss" },
+  { "title": "SupaSquad", "url": "https://supabase.com/supasquad" }
 ]
diff --git a/apps/docs/public/img/icons/discord-icon-outline.svg b/apps/docs/public/img/icons/discord-icon-outline.svg
new file mode 100644
index 00000000000..be8b9d4efcb
--- /dev/null
+++ b/apps/docs/public/img/icons/discord-icon-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73" height="57"><path fill="none" fill-rule="nonzero" stroke="#444" stroke-width="5" d="M61.104 5.898a58.55 58.55 0 0 0-14.451-4.483.22.22 0 0 0-.233.11 40.784 40.784 0 0 0-1.8 3.697c-5.456-.817-10.886-.817-16.23 0-.485-1.164-1.201-2.587-1.828-3.697a.228.228 0 0 0-.233-.11 58.386 58.386 0 0 0-14.451 4.483.207.207 0 0 0-.096.082C2.578 19.73.056 33.144 1.293 46.39a.244.244 0 0 0 .093.167c6.073 4.46 11.955 7.167 17.729 8.962a.23.23 0 0 0 .249-.082 42.08 42.08 0 0 0 3.627-5.9.225.225 0 0 0-.123-.312 38.772 38.772 0 0 1-5.539-2.64.228.228 0 0 1-.022-.378c.372-.279.744-.569 1.1-.862a.22.22 0 0 1 .23-.03c11.619 5.304 24.198 5.304 35.68 0a.219.219 0 0 1 .233.027c.356.293.728.586 1.103.865a.228.228 0 0 1-.02.378 36.384 36.384 0 0 1-5.54 2.637.227.227 0 0 0-.121.315 47.249 47.249 0 0 0 3.624 5.897.225.225 0 0 0 .249.085c5.801-1.795 11.684-4.503 17.757-8.962a.228.228 0 0 0 .092-.164c1.48-15.315-2.48-28.618-10.497-40.412a.18.18 0 0 0-.093-.084ZM24.726 38.325c-3.498 0-6.38-3.211-6.38-7.156 0-3.944 2.826-7.156 6.38-7.156 3.582 0 6.437 3.24 6.38 7.156 0 3.945-2.826 7.156-6.38 7.156Zm23.592 0c-3.498 0-6.38-3.211-6.38-7.156 0-3.944 2.826-7.156 6.38-7.156 3.582 0 6.436 3.24 6.38 7.156 0 3.945-2.798 7.156-6.38 7.156Z"/></svg>
\ No newline at end of file
diff --git a/apps/docs/public/img/icons/discord-icon.svg b/apps/docs/public/img/icons/discord-icon.svg
index 3efe1ec110f..f8f9cebc2ee 100644
--- a/apps/docs/public/img/icons/discord-icon.svg
+++ b/apps/docs/public/img/icons/discord-icon.svg
@@ -1,10 +1,9 @@
-<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#5865F2"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="71" height="55" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="75px" height="59px" viewBox="0 0 75 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>discord-icon</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="discord-icon" transform="translate(2.000000, 2.411745)" fill-rule="nonzero" stroke="#636262" stroke-width="3">
+            <path d="M60.1044999,4.48605546 C55.5791999,2.40965546 50.7264999,0.879855461 45.6526999,0.00367546142 C45.5602999,-0.0132345386 45.4679999,0.0290244614 45.4203999,0.113544461 C44.7962999,1.22355546 44.1049999,2.67165546 43.6208999,3.80985546 C38.1636999,2.99285546 32.7344999,2.99285546 27.3891999,3.80985546 C26.9049999,2.64635546 26.1885999,1.22355546 25.5616999,0.113544461 C25.5140999,0.0318444614 25.4217999,-0.0104145386 25.3293999,0.00367546142 C20.2583999,0.877055461 15.4056999,2.40685546 10.8775999,4.48605546 C10.8383999,4.50295546 10.8047999,4.53115546 10.7824999,4.56775546 C1.57794989,18.3191555 -0.94356111,31.7325555 0.29340789,44.9796555 C0.29900489,45.0444555 0.33538589,45.1064555 0.38576089,45.1458555 C6.45865989,49.6056555 12.3412999,52.3131555 18.1146999,54.1077555 C18.2070999,54.1359555 18.3049999,54.1021555 18.3637999,54.0260555 C19.7294999,52.1610555 20.9468999,50.1945555 21.9906999,48.1265555 C22.0522999,48.0054555 21.9934999,47.8617555 21.8675999,47.8138555 C19.9365999,47.0813555 18.0978999,46.1882555 16.3291999,45.1740555 C16.1892999,45.0923555 16.1780999,44.8922555 16.3067999,44.7964555 C16.6789999,44.5175555 17.0512999,44.2273555 17.4066999,43.9343555 C17.4709999,43.8808555 17.5605999,43.8695555 17.6361999,43.9033555 C29.2557999,49.2084555 41.8353999,49.2084555 53.3178999,43.9033555 C53.3934999,43.8667555 53.4830999,43.8780555 53.5501999,43.9315555 C53.9056999,44.2245555 54.2778999,44.5175555 54.6528999,44.7964555 C54.7815999,44.8922555 54.7731999,45.0923555 54.6332999,45.1740555 C52.8645999,46.2079555 51.0258999,47.0813555 49.0920999,47.8110555 C48.9661999,47.8589555 48.9101999,48.0054555 48.9717999,48.1265555 C50.0379999,50.1916555 51.2553999,52.1581555 52.5958999,54.0232555 C52.6518999,54.1021555 52.7525999,54.1359555 52.8449999,54.1077555 C58.6463999,52.3131555 64.5289999,49.6056555 70.6018999,45.1458555 C70.6550999,45.1064555 70.6886999,45.0472555 70.6942999,44.9824555 C72.1746999,29.6673555 68.2146999,16.3639555 60.1967999,4.57055546 C60.1771999,4.53115546 60.1436999,4.50295546 60.1044999,4.48605546 Z M23.7258999,36.9135555 C20.2275999,36.9135555 17.3450999,33.7018555 17.3450999,29.7575555 C17.3450999,25.8132555 20.1716999,22.6015555 23.7258999,22.6015555 C27.3079999,22.6015555 30.1625999,25.8414555 30.1065999,29.7575555 C30.1065999,33.7018555 27.2799999,36.9135555 23.7258999,36.9135555 Z M47.3177999,36.9135555 C43.8195999,36.9135555 40.9370999,33.7018555 40.9370999,29.7575555 C40.9370999,25.8132555 43.7635999,22.6015555 47.3177999,22.6015555 C50.8999999,22.6015555 53.7544999,25.8414555 53.6985999,29.7575555 C53.6985999,33.7018555 50.8999999,36.9135555 47.3177999,36.9135555 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

From c3976eddce431b77a365468387381c86392909f7 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 16 Dec 2022 10:57:09 -0330
Subject: [PATCH 013/215] Fix build error

---
 .../docs/layouts/tutorials/TutorialLayout.tsx |   1 -
 apps/docs/public/sitemap.xml                  | 386 +++++++++---------
 2 files changed, 193 insertions(+), 194 deletions(-)

diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index b49391425b2..fc1a2fa8ea9 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -2,7 +2,6 @@ import { MDXProvider } from '@mdx-js/react'
 import Head from 'next/head'
 import { FC, useEffect, useState } from 'react'
 import components from '~/components'
-import Footer from '~/components/Footer'
 import SideBar from '~/components/Navigation/SideBar'
 import TableOfContents from '~/components/TableOfContents'
 
diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml
index 8989c166fdb..3c10bb5889d 100644
--- a/apps/docs/public/sitemap.xml
+++ b/apps/docs/public/sitemap.xml
@@ -24,30 +24,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/handbook/contributing</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/handbook/introduction</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/reference/index</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/tutorials/nextjs</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/api</loc>
     <changefreq>weekly</changefreq>
@@ -114,6 +90,18 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/handbook/contributing</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/handbook/introduction</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/new/auth</loc>
     <changefreq>weekly</changefreq>
@@ -121,31 +109,13 @@
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-deep-dive-jwts</loc>
+    <loc>https://supabase.com/docs/reference/index</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-gotrue</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-policies</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security</loc>
+    <loc>https://supabase.com/docs/tutorials/nextjs</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
@@ -156,6 +126,78 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/auth-captcha</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/auth-email-templates</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/auth-email</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/auth-helpers</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/auth-magic-link</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/auth-mfa</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/managing-user-data</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/overview</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/phone-login</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/row-level-security</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/server-side-rendering</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/social-login</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/database/arrays</loc>
     <changefreq>weekly</changefreq>
@@ -246,78 +288,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/auth-captcha</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/auth-email-templates</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/auth-email</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/auth-helpers</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/auth-magic-link</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/auth-mfa</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/managing-user-data</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/overview</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/phone-login</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/row-level-security</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/server-side-rendering</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/social-login</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/functions/auth</loc>
     <changefreq>weekly</changefreq>
@@ -588,6 +558,24 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/glossary</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/self-hosting</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/supabase-cli</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/storage/access-control</loc>
     <changefreq>weekly</changefreq>
@@ -619,55 +607,31 @@
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/resources/glossary</loc>
+    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-deep-dive-jwts</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/resources/self-hosting</loc>
+    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/resources/supabase-cli</loc>
+    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-gotrue</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/http</loc>
+    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-policies</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/pgcron</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/pgnet</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/pgtap</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/plv8</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/uuid-ossp</loc>
+    <loc>https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
@@ -720,30 +684,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/getting-started/quickstarts/nextjs</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/getting-started/quickstarts/reactjs</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/functions/examples/og-image</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/auth/social-login/auth-apple</loc>
     <changefreq>weekly</changefreq>
@@ -846,6 +786,66 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/http</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/pgcron</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/pgnet</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/pgtap</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/plv8</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/uuid-ossp</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/functions/examples/og-image</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/getting-started/quickstarts/nextjs</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/getting-started/quickstarts/reactjs</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/getting-started/tutorials/with-angular</loc>
     <changefreq>weekly</changefreq>
@@ -930,24 +930,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/platform/sso/azure</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/platform/sso/gsuite</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/platform/sso/okta</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/firebase-auth</loc>
     <changefreq>weekly</changefreq>
@@ -972,6 +954,30 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/platform/sso/azure</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/platform/sso/gsuite</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/platform/sso/okta</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/self-hosting/docker</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/resources/supabase-cli/local-development</loc>
     <changefreq>weekly</changefreq>
@@ -984,12 +990,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/resources/self-hosting/docker</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/reference/javascript/initializing</loc>
     <changefreq>weekly</changefreq>

From b18cb383d999f81d9b0d1dea6fa093bfb10d9f0d Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 16 Dec 2022 11:09:47 -0330
Subject: [PATCH 014/215] Add theme switcher to icon

---
 apps/docs/components/Navigation/Footer.tsx    |  16 +--
 .../public/img/icons/discord-icon-outline.svg |   1 -
 apps/docs/public/sitemap.xml                  | 100 +++++++++---------
 3 files changed, 60 insertions(+), 57 deletions(-)
 delete mode 100644 apps/docs/public/img/icons/discord-icon-outline.svg

diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 808faca43d3..3d85d66b3cb 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -2,8 +2,10 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { Button, IconGitHub, IconTwitter } from '~/../../packages/ui'
 import footerData from '~/data/footer.json'
+import { useTheme } from 'common/Providers'
 
 const Footer = () => {
+  const { isDarkMode } = useTheme()
   return (
     <div>
       <hr className="border-scale-400  mt-8"></hr>
@@ -36,12 +38,14 @@ const Footer = () => {
             target="_blank"
             rel="noreferrer noopener"
           >
-            <Image
-              alt="Discord"
-              width={16}
-              height={13}
-              src="/docs/img/icons/discord-icon-outline.svg"
-            />
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16">
+              <path
+                fill="none"
+                fill-rule="nonzero"
+                stroke={`${isDarkMode ? '#fff' : '#333'}`}
+                d="M16.238 2.16a14.628 14.628 0 0 0-3.664-1.159.055.055 0 0 0-.059.028c-.158.288-.333.662-.456.957a13.432 13.432 0 0 0-4.115 0 9.76 9.76 0 0 0-.464-.957.057.057 0 0 0-.058-.028 14.587 14.587 0 0 0-3.664 1.16.053.053 0 0 0-.024.02C1.4 5.74.76 9.21 1.074 12.637c.002.017.011.033.024.043a14.813 14.813 0 0 0 4.494 2.318.058.058 0 0 0 .064-.02c.346-.483.654-.992.92-1.527a.059.059 0 0 0-.032-.08c-.49-.19-.956-.421-1.404-.684a.06.06 0 0 1-.006-.097c.094-.072.189-.148.279-.223a.055.055 0 0 1 .058-.008c2.946 1.372 6.135 1.372 9.046 0a.055.055 0 0 1 .06.007 7.2 7.2 0 0 0 .279.224.06.06 0 0 1-.005.097 9.143 9.143 0 0 1-1.405.683.06.06 0 0 0-.03.081c.27.534.578 1.043.918 1.526.014.02.04.029.063.021A14.763 14.763 0 0 0 18.9 12.68a.06.06 0 0 0 .023-.042c.376-3.962-.628-7.404-2.66-10.455a.046.046 0 0 0-.024-.021Zm-9.223 8.39c-.887 0-1.618-.831-1.618-1.852 0-1.02.717-1.851 1.618-1.851.908 0 1.632.838 1.618 1.851 0 1.02-.717 1.851-1.618 1.851Zm5.981 0c-.887 0-1.618-.831-1.618-1.852 0-1.02.717-1.851 1.618-1.851.908 0 1.632.838 1.618 1.851 0 1.02-.71 1.851-1.618 1.851Z"
+              />
+            </svg>
           </Button>
         </div>
       </div>
diff --git a/apps/docs/public/img/icons/discord-icon-outline.svg b/apps/docs/public/img/icons/discord-icon-outline.svg
deleted file mode 100644
index be8b9d4efcb..00000000000
--- a/apps/docs/public/img/icons/discord-icon-outline.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="73" height="57"><path fill="none" fill-rule="nonzero" stroke="#444" stroke-width="5" d="M61.104 5.898a58.55 58.55 0 0 0-14.451-4.483.22.22 0 0 0-.233.11 40.784 40.784 0 0 0-1.8 3.697c-5.456-.817-10.886-.817-16.23 0-.485-1.164-1.201-2.587-1.828-3.697a.228.228 0 0 0-.233-.11 58.386 58.386 0 0 0-14.451 4.483.207.207 0 0 0-.096.082C2.578 19.73.056 33.144 1.293 46.39a.244.244 0 0 0 .093.167c6.073 4.46 11.955 7.167 17.729 8.962a.23.23 0 0 0 .249-.082 42.08 42.08 0 0 0 3.627-5.9.225.225 0 0 0-.123-.312 38.772 38.772 0 0 1-5.539-2.64.228.228 0 0 1-.022-.378c.372-.279.744-.569 1.1-.862a.22.22 0 0 1 .23-.03c11.619 5.304 24.198 5.304 35.68 0a.219.219 0 0 1 .233.027c.356.293.728.586 1.103.865a.228.228 0 0 1-.02.378 36.384 36.384 0 0 1-5.54 2.637.227.227 0 0 0-.121.315 47.249 47.249 0 0 0 3.624 5.897.225.225 0 0 0 .249.085c5.801-1.795 11.684-4.503 17.757-8.962a.228.228 0 0 0 .092-.164c1.48-15.315-2.48-28.618-10.497-40.412a.18.18 0 0 0-.093-.084ZM24.726 38.325c-3.498 0-6.38-3.211-6.38-7.156 0-3.944 2.826-7.156 6.38-7.156 3.582 0 6.437 3.24 6.38 7.156 0 3.945-2.826 7.156-6.38 7.156Zm23.592 0c-3.498 0-6.38-3.211-6.38-7.156 0-3.944 2.826-7.156 6.38-7.156 3.582 0 6.436 3.24 6.38 7.156 0 3.945-2.798 7.156-6.38 7.156Z"/></svg>
\ No newline at end of file
diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml
index 3c10bb5889d..f189599255f 100644
--- a/apps/docs/public/sitemap.xml
+++ b/apps/docs/public/sitemap.xml
@@ -103,13 +103,13 @@
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/new/auth</loc>
+    <loc>https://supabase.com/docs/reference/index</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/reference/index</loc>
+    <loc>https://supabase.com/docs/new/auth</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
@@ -822,12 +822,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/functions/examples/og-image</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/getting-started/quickstarts/nextjs</loc>
     <changefreq>weekly</changefreq>
@@ -846,6 +840,54 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/functions/examples/og-image</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/platform/sso/azure</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/platform/sso/gsuite</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/platform/sso/okta</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/firebase-auth</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/firebase-storage</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/firestore-data</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/heroku</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/getting-started/tutorials/with-angular</loc>
     <changefreq>weekly</changefreq>
@@ -930,48 +972,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/firebase-auth</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/firebase-storage</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/firestore-data</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/heroku</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/platform/sso/azure</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/platform/sso/gsuite</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/platform/sso/okta</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/resources/self-hosting/docker</loc>
     <changefreq>weekly</changefreq>

From bd2bd2c52f00caa0d9d7ab1c7029aa2684556c4a Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 16 Dec 2022 15:35:47 -0330
Subject: [PATCH 015/215] Add NextSEO to refdocs crawler files

---
 apps/docs/components/reference/RefSEO.tsx     | 25 +++++++++++++
 apps/docs/layouts/ref/RefSubLayout.tsx        | 36 ++++++++++++-------
 .../reference/dart/crawlers/[...slug].tsx     | 21 +++++++----
 .../reference/dart/v0/crawlers/[...slug].tsx  | 20 +++++++----
 .../javascript/crawlers/[...slug].tsx         | 21 +++++++----
 .../javascript/v1/crawlers/[...slug].tsx      | 22 ++++++++----
 6 files changed, 107 insertions(+), 38 deletions(-)
 create mode 100644 apps/docs/components/reference/RefSEO.tsx

diff --git a/apps/docs/components/reference/RefSEO.tsx b/apps/docs/components/reference/RefSEO.tsx
new file mode 100644
index 00000000000..237ecec3f15
--- /dev/null
+++ b/apps/docs/components/reference/RefSEO.tsx
@@ -0,0 +1,25 @@
+import { NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+
+function RefSEO({ title }) {
+  const router = useRouter()
+
+  const path = router.asPath.replace('crawlers/', '')
+
+  return (
+    <NextSeo
+      title={title}
+      openGraph={{
+        title,
+        url: `https://supabase.com/docs${path}`,
+        images: [
+          {
+            url: `https://supabase.com/docs/img/supabase-og-image.png`,
+          },
+        ],
+      }}
+    />
+  )
+}
+
+export default RefSEO
diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index 26e1c612515..3357e427ed1 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -4,6 +4,7 @@ import { highlightSelectedNavItem } from '~/components/CustomHTMLElements/Custom
 import { useRouter } from 'next/router'
 import { useNavigationMenuContext } from '~/components/Navigation/NavigationMenu/NavigationMenu.Context'
 import { menuState } from '~/hooks/useMenuState'
+import Image from 'next/image'
 
 interface ISectionContainer {
   id: string
@@ -77,8 +78,13 @@ const Section: FC<ISectionContainer> = (props) => {
 
 const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
   const router = useRouter()
+
   const { setActiveRefItem } = useNavigationMenuContext()
 
+  // we're serving search bots a different file (/crawlers/[...slug])
+  // and need to modify content to suit that
+  const isCrawlerPage = router.route.includes('/crawlers/[...slug]')
+
   const { ref } = useInView({
     threshold: 1,
     rootMargin: '30% 0% -35% 0px',
@@ -99,21 +105,25 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
     <div className={['flex items-center gap-3 not-prose', icon && 'mb-8'].join(' ')}>
       {icon && (
         <div className="w-8 h-8 bg-brand-500 rounded flex items-center justify-center">
-          <img className="w-6 h-6" src={`${icon}.svg`} />
+          <Image width={16} height={16} alt={icon} src={`${icon}.svg`} />
         </div>
       )}
-      <h2
-        ref={ref}
-        id={props.slug}
-        data-ref-id={props.id}
-        className={[
-          'text-2xl font-medium text-scale-1200 scroll-mt-24',
-          !icon && 'mb-8',
-          props.monoFont && 'font-mono',
-        ].join(' ')}
-      >
-        {props.title && <span className="max-w-xl">{props.title}</span>}
-      </h2>
+      {isCrawlerPage ? (
+        <h1>{props.title}</h1>
+      ) : (
+        <h2
+          ref={ref}
+          id={props.slug}
+          data-ref-id={props.id}
+          className={[
+            'text-2xl font-medium text-scale-1200 scroll-mt-24',
+            !icon && 'mb-8',
+            props.monoFont && 'font-mono',
+          ].join(' ')}
+        >
+          {props.title && <span className="max-w-xl">{props.title}</span>}
+        </h2>
+      )}
     </div>
   )
 }
diff --git a/apps/docs/pages/reference/dart/crawlers/[...slug].tsx b/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
index afdc202a05f..c12f3cabbf2 100644
--- a/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
+import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
 
@@ -15,13 +16,21 @@ export default function JSReference(props) {
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
 
+  const pageTitle = filteredSection[0]?.title
+    ? `${filteredSection[0]?.title} | Supabase`
+    : 'Supabase'
+
   return (
-    <RefSectionHandler
-      sections={filteredSection}
-      spec={spec}
-      typeSpec={typeSpec}
-      pageProps={props}
-    />
+    <>
+      <RefSEO title={pageTitle} />
+
+      <RefSectionHandler
+        sections={filteredSection}
+        spec={spec}
+        typeSpec={typeSpec}
+        pageProps={props}
+      />
+    </>
   )
 }
 
diff --git a/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx b/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
index 3ef20b302fe..2e67a5b5c8e 100644
--- a/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
+import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
 
@@ -15,13 +16,20 @@ export default function JSReference(props) {
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
 
+  const pageTitle = filteredSection[0]?.title
+    ? `${filteredSection[0]?.title} | Supabase`
+    : 'Supabase'
   return (
-    <RefSectionHandler
-      sections={filteredSection}
-      spec={spec}
-      typeSpec={typeSpec}
-      pageProps={props}
-    />
+    <>
+      <RefSEO title={pageTitle} />
+
+      <RefSectionHandler
+        sections={filteredSection}
+        spec={spec}
+        typeSpec={typeSpec}
+        pageProps={props}
+      />
+    </>
   )
 }
 
diff --git a/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx b/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
index bd631d0e07e..2e6e0b271a9 100644
--- a/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
+import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
 
@@ -15,13 +16,21 @@ export default function JSReference(props) {
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
 
+  const pageTitle = filteredSection[0]?.title
+    ? `${filteredSection[0]?.title} | Supabase`
+    : 'Supabase'
+
   return (
-    <RefSectionHandler
-      sections={filteredSection}
-      spec={spec}
-      typeSpec={typeSpec}
-      pageProps={props}
-    />
+    <>
+      <RefSEO title={pageTitle} />
+
+      <RefSectionHandler
+        sections={filteredSection}
+        spec={spec}
+        typeSpec={typeSpec}
+        pageProps={props}
+      />
+    </>
   )
 }
 
diff --git a/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx b/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
index d1aa3ec92ee..bbb38f4598a 100644
--- a/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
@@ -7,7 +7,7 @@ import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
-
+import RefSEO from '~/components/reference/RefSEO'
 const sections = flattenSections(clientLibsCommonSections)
 
 export default function JSReference(props) {
@@ -15,13 +15,21 @@ export default function JSReference(props) {
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
 
+  const pageTitle = filteredSection[0]?.title
+    ? `${filteredSection[0]?.title} | Supabase`
+    : 'Supabase'
+
   return (
-    <RefSectionHandler
-      sections={filteredSection}
-      spec={spec}
-      typeSpec={typeSpec}
-      pageProps={props}
-    />
+    <>
+      <RefSEO title={pageTitle} />
+
+      <RefSectionHandler
+        sections={filteredSection}
+        spec={spec}
+        typeSpec={typeSpec}
+        pageProps={props}
+      />
+    </>
   )
 }
 

From f8f0998cea42c7fe176a35ce48ef3f18db3bc565 Mon Sep 17 00:00:00 2001
From: Div Arora <darora@users.noreply.github.com>
Date: Sat, 17 Dec 2022 14:48:24 +0800
Subject: [PATCH 016/215] Update custom-domains.mdx

---
 apps/docs/pages/guides/platform/custom-domains.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/docs/pages/guides/platform/custom-domains.mdx b/apps/docs/pages/guides/platform/custom-domains.mdx
index 01249cf5455..5c0023dff2c 100644
--- a/apps/docs/pages/guides/platform/custom-domains.mdx
+++ b/apps/docs/pages/guides/platform/custom-domains.mdx
@@ -145,6 +145,8 @@ As with the final activation stage of the process for setting up a vanity subdom
 
 Edge functions do not honor the custom domain or the vanity subdomain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
 
+A Supabase project can-at this time-use either a Custom Domain, or a Vanity Subdomain, but not both.
+
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page

From ee3cbc512703d4e19cc444fcdd2cb27551677046 Mon Sep 17 00:00:00 2001
From: Magnus Jensen <magnushjensen.mail@gmail.com>
Date: Sun, 18 Dec 2022 11:56:59 +0000
Subject: [PATCH 017/215] docs(readme): add storage-java to library list

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4c35921e1a5..4a6e2f223da 100644
--- a/README.md
+++ b/README.md
@@ -142,7 +142,7 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
     <td>-</td>
     <td><a href="https://github.com/supabase-community/gotrue-java" target="_blank" rel="noopener noreferrer">gotrue-java</a></td>
     <td>-</td>
-    <td>-</td>
+    <td><a href="https://github.com/supabase-community/storage-java" target="_blanke" rel="noopener noreferrer">storage-java</a></td>
     <td>-</td>
   </tr>
   <tr>

From 08583a66d7da3e197f7eaa985a74c30cffb9ec43 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Mon, 19 Dec 2022 16:50:54 +0800
Subject: [PATCH 018/215] chore: start moving self hosted docs

---
 .../Navigation/NavigationMenu/HomeMenu.tsx    |  6 +++++
 .../NavigationMenu.constants.ts               | 26 +++++++------------
 .../NavigationMenu/NavigationMenu.tsx         |  4 +++
 .../NavigationMenuGuideList.tsx               |  1 -
 apps/docs/layouts/SiteLayout.tsx              |  4 +++
 .../guides/{resources => }/self-hosting.mdx   |  0
 .../{resources => }/self-hosting/docker.mdx   |  0
 7 files changed, 24 insertions(+), 17 deletions(-)
 rename apps/docs/pages/guides/{resources => }/self-hosting.mdx (100%)
 rename apps/docs/pages/guides/{resources => }/self-hosting/docker.mdx (100%)

diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
index a769976a8a4..399c1acb045 100644
--- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
@@ -64,6 +64,12 @@ const home = [
       href: '/guides/resources',
       level: 'resources',
     },
+    {
+      label: 'Self Hosting',
+      icon: '/img/icons/menu/platform',
+      href: '/guides/self-hosting',
+      level: 'self_hosting',
+    },
     {
       label: 'Integrations',
       icon: '/img/icons/menu/integrations',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 6a210a4cf67..76dde34d35f 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -570,13 +570,16 @@ export const resources = {
         },
       ],
     },
-    {
-      name: 'Self-Hosting',
-      items: [
-        { name: 'Overview', url: '/guides/resources/self-hosting', items: [] },
-        { name: 'Docker', url: '/guides/resources/self-hosting/docker', items: [] },
-      ],
-    },
+  ],
+}
+
+export const self_hosting = {
+  title: 'Self-Hosting',
+  icon: 'resources',
+  url: '/guides/self-hosting',
+  items: [
+    { name: 'Overview', url: '/guides/self-hosting', items: [] },
+    { name: 'Self-Hosting with Docker', url: '/guides/self-hosting/docker', items: [] },
     {
       name: 'Self-Hosting Reference',
       items: [
@@ -603,15 +606,6 @@ export const resources = {
   ],
 }
 
-export const selfHosting = {
-  label: 'Self-Hosting',
-  url: '/guides/self-hosting',
-  items: [
-    { name: 'Overview', url: '/guides/hosting/overview', items: [] },
-    { name: 'Docker', url: '/guides/hosting/docker', items: [] },
-  ],
-}
-
 export const migrate = {
   label: 'Migrate to Supabase',
   url: '/guides/migrate',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 5a945b965c5..b8ea7efeab4 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -104,6 +104,9 @@ const SideNav = () => {
       case url.includes(`/docs/guides/resources`) && url:
         menuState.setMenuLevelId('resources')
         break
+      case url.includes(`/docs/guides/self-hosting`) && url:
+        menuState.setMenuLevelId('self_hosting')
+        break
       case url.includes(`/docs/guides/integrations`) && url:
         menuState.setMenuLevelId('integrations')
         break
@@ -166,6 +169,7 @@ const SideNav = () => {
       <NavigationMenuGuideList id={'platform'} />
       <NavigationMenuGuideList id={'resources'} />
       <NavigationMenuGuideList id={'integrations'} />
+      <NavigationMenuGuideList id={'self_hosting'} />
       <NavigationMenuGuideList id={'reference'} />
       {/* // Client Libs */}
       <NavigationMenuRefList
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 40e03fa6184..6b110bd5687 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -73,7 +73,6 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
                   `/img/icons/menu/${menu.icon}${isDarkMode ? '' : '-light'}.svg`
                 }
               />
-              {/* </div> */}
               <span
                 className={[
                   ' ',
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 9feac530869..5b96537c5b8 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -63,6 +63,10 @@ const SiteRefLayout = ({ children }) => {
       icon: '/docs/img/icons/menu/resources',
       name: 'Resources',
     },
+    self_hosting: {
+      icon: '/docs/img/icons/menu/self-hosting',
+      name: 'Self Hosting',
+    },
     integrations: {
       icon: '/docs/img/icons/menu/integrations',
       name: 'Integrations',
diff --git a/apps/docs/pages/guides/resources/self-hosting.mdx b/apps/docs/pages/guides/self-hosting.mdx
similarity index 100%
rename from apps/docs/pages/guides/resources/self-hosting.mdx
rename to apps/docs/pages/guides/self-hosting.mdx
diff --git a/apps/docs/pages/guides/resources/self-hosting/docker.mdx b/apps/docs/pages/guides/self-hosting/docker.mdx
similarity index 100%
rename from apps/docs/pages/guides/resources/self-hosting/docker.mdx
rename to apps/docs/pages/guides/self-hosting/docker.mdx

From 73305752fbebbd1a1c381cca0e68d83e0c249a62 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Mon, 19 Dec 2022 17:52:55 +0800
Subject: [PATCH 019/215] start adding config files

---
 .../NavigationMenu.constants.ts               | 15 ++++++++
 apps/docs/lib/mdx/getConfig.tsx               | 20 ++++++++++
 .../pages/guides/self-hosting/auth/config.mdx | 38 +++++++++++++++++++
 .../guides/self-hosting/realtime/config.mdx   | 38 +++++++++++++++++++
 .../guides/self-hosting/storage/config.mdx    | 38 +++++++++++++++++++
 5 files changed, 149 insertions(+)
 create mode 100644 apps/docs/lib/mdx/getConfig.tsx
 create mode 100644 apps/docs/pages/guides/self-hosting/auth/config.mdx
 create mode 100644 apps/docs/pages/guides/self-hosting/realtime/config.mdx
 create mode 100644 apps/docs/pages/guides/self-hosting/storage/config.mdx

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 76dde34d35f..df2471910ee 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -589,18 +589,33 @@ export const self_hosting = {
           icon: '/img/icons/menu/reference-auth',
           items: [],
         },
+        {
+          name: 'Auth Server Config',
+          url: '/guides/self-hosting/auth/config',
+          items: [],
+        },
         {
           name: 'Storage Server',
           url: '/reference/self-hosting-storage/introduction',
           icon: '/img/icons/menu/reference-storage',
           items: [],
         },
+        {
+          name: 'Storage Server Config',
+          url: '/guides/self-hosting/storage/config',
+          items: [],
+        },
         {
           name: 'Realtime Server',
           url: '/reference/self-hosting-realtime/introduction',
           icon: '/img/icons/menu/reference-realtime',
           items: [],
         },
+        {
+          name: 'Realtime Server Config',
+          url: '/guides/self-hosting/realtime/config',
+          items: [],
+        },
       ],
     },
   ],
diff --git a/apps/docs/lib/mdx/getConfig.tsx b/apps/docs/lib/mdx/getConfig.tsx
new file mode 100644
index 00000000000..8a014486212
--- /dev/null
+++ b/apps/docs/lib/mdx/getConfig.tsx
@@ -0,0 +1,20 @@
+// @ts-expect-error
+import specStorageV0 from '~/../../spec/storage_v0_config.yaml' assert { type: 'yml' }
+// @ts-expect-error
+import specRealtimeV0 from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
+// @ts-expect-error
+import specAuthV1 from '~/../../spec/gotrue_v1_config.yaml' assert { type: 'yml' }
+
+function getStorageConfigV0() {
+  return { ...specStorageV0 }
+}
+
+function getRealtimeConfigV0() {
+  return { ...specRealtimeV0 }
+}
+
+function getAuthConfigV1() {
+  return { ...specAuthV1 }
+}
+
+export { getStorageConfigV0, getRealtimeConfigV0, getAuthConfigV1 }
diff --git a/apps/docs/pages/guides/self-hosting/auth/config.mdx b/apps/docs/pages/guides/self-hosting/auth/config.mdx
new file mode 100644
index 00000000000..0e894114c65
--- /dev/null
+++ b/apps/docs/pages/guides/self-hosting/auth/config.mdx
@@ -0,0 +1,38 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getAuthConfigV1 } from '~/lib/mdx/getConfig'
+import Param from '~/components/Params'
+
+export const spec = getAuthConfigV1()
+
+export const meta = {
+  title: 'Auth Self-hosting Config',
+  description: 'How to configure and deploy Supabase.',
+}
+
+<div>{spec.info.description}</div>
+
+<div>
+{spec.info.tags.map(tag => {
+    return (
+        <>
+            <h2 className="text-scale-1200">{tag.title}</h2>
+            <p className="text-scale-1000">{tag.description}</p>
+            <div className="not-prose">
+            <h5 className="text-base text-scale-1200 mb-3">Parameters</h5>
+            <ul>
+                {spec.parameters.filter(param => param.tags.includes(tag.id)).map((param) => {
+                    return <Param name={param.title} type={param.type} description={param.description} required={param.required} />
+                })}
+
+            </ul>
+            </div>
+        </>
+    )
+
+})}
+
+</div>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/self-hosting/realtime/config.mdx b/apps/docs/pages/guides/self-hosting/realtime/config.mdx
new file mode 100644
index 00000000000..a52dc2c111a
--- /dev/null
+++ b/apps/docs/pages/guides/self-hosting/realtime/config.mdx
@@ -0,0 +1,38 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getRealtimeConfigV0 } from '~/lib/mdx/getConfig'
+import Param from '~/components/Params'
+
+export const spec = getRealtimeConfigV0()
+
+export const meta = {
+  title: 'Realtime Self-hosting Config',
+  description: 'How to configure and deploy Supabase.',
+}
+
+<div>{spec.info.description}</div>
+
+<div>
+{spec.info.tags.map(tag => {
+    return (
+        <>
+            <h2 className="text-scale-1200">{tag.title}</h2>
+            <p className="text-scale-1000">{tag.description}</p>
+            <div className="not-prose">
+            <h5 className="text-base text-scale-1200 mb-3">Parameters</h5>
+            <ul>
+                {spec.parameters.filter(param => param.tags.includes(tag.id)).map((param) => {
+                    return <Param name={param.title} type={param.type} description={param.description} required={param.required} />
+                })}
+
+            </ul>
+            </div>
+        </>
+    )
+
+})}
+
+</div>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/self-hosting/storage/config.mdx b/apps/docs/pages/guides/self-hosting/storage/config.mdx
new file mode 100644
index 00000000000..a2e12665551
--- /dev/null
+++ b/apps/docs/pages/guides/self-hosting/storage/config.mdx
@@ -0,0 +1,38 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getStorageConfigV0 } from '~/lib/mdx/getConfig'
+import Param from '~/components/Params'
+
+export const spec = getStorageConfigV0()
+
+export const meta = {
+  title: 'Storage Self-hosting Config',
+  description: 'How to configure and deploy Supabase.',
+}
+
+<div>{spec.info.description}</div>
+
+<div>
+{spec.info.tags.map(tag => {
+    return (
+        <>
+            <h2 className="text-scale-1200">{tag.title}</h2>
+            <p className="text-scale-1000">{tag.description}</p>
+            <div className="not-prose">
+            <h5 className="text-base text-scale-1200 mb-3">Parameters</h5>
+            <ul>
+                {spec.parameters.filter(param => param.tags.includes(tag.id)).map((param) => {
+                    return <Param name={param.title} type={param.type} description={param.description} required={param.required} />
+                })}
+
+            </ul>
+            </div>
+        </>
+    )
+
+})}
+
+</div>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page

From e91d3b697d97ffbc4d8c5929d328bfb032c11b84 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Mon, 19 Dec 2022 11:54:03 -0800
Subject: [PATCH 020/215] Update copy

---
 .../components/Navigation/NavigationMenu/HomeMenu.tsx  |  2 +-
 .../NavigationMenu/NavigationMenu.constants.ts         |  2 +-
 apps/docs/layouts/SiteLayout.tsx                       |  2 +-
 apps/docs/pages/guides/resources.mdx                   | 10 ----------
 apps/docs/pages/guides/self-hosting.mdx                |  6 ++----
 apps/docs/pages/guides/self-hosting/docker.mdx         |  6 ++----
 6 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
index 399c1acb045..e6f5e8ea4be 100644
--- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
@@ -65,7 +65,7 @@ const home = [
       level: 'resources',
     },
     {
-      label: 'Self Hosting',
+      label: 'Self-Hosting',
       icon: '/img/icons/menu/platform',
       href: '/guides/self-hosting',
       level: 'self_hosting',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index df2471910ee..4b2bcc4efdd 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -581,7 +581,7 @@ export const self_hosting = {
     { name: 'Overview', url: '/guides/self-hosting', items: [] },
     { name: 'Self-Hosting with Docker', url: '/guides/self-hosting/docker', items: [] },
     {
-      name: 'Self-Hosting Reference',
+      name: 'Reference',
       items: [
         {
           name: 'Auth Server',
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 5b96537c5b8..701a6f6e445 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -65,7 +65,7 @@ const SiteRefLayout = ({ children }) => {
     },
     self_hosting: {
       icon: '/docs/img/icons/menu/self-hosting',
-      name: 'Self Hosting',
+      name: 'Self-Hosting',
     },
     integrations: {
       icon: '/docs/img/icons/menu/integrations',
diff --git a/apps/docs/pages/guides/resources.mdx b/apps/docs/pages/guides/resources.mdx
index 65774f5b504..b1b139020d3 100644
--- a/apps/docs/pages/guides/resources.mdx
+++ b/apps/docs/pages/guides/resources.mdx
@@ -76,16 +76,6 @@ export const meta = {
 
   </div>
 
-  <div>
-
-    ### Self-Hosting Supabase
-
-    We're happy to host your next big thing, but we also make it easy to host Supabase on your own. We use Docker to help make setup as painless as possible.
-
-[Learn more](/docs/guides/resources/self-hosting)
-
-  </div>
-
 </div>
 
 {/* end of container */}
diff --git a/apps/docs/pages/guides/self-hosting.mdx b/apps/docs/pages/guides/self-hosting.mdx
index 51e618c4d31..02db71f0b8e 100644
--- a/apps/docs/pages/guides/self-hosting.mdx
+++ b/apps/docs/pages/guides/self-hosting.mdx
@@ -1,10 +1,8 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'overview',
-  title: 'Self Hosting',
-  sidebar_label: 'Overview',
-  description: 'Getting started with Self Hosting.',
+  title: 'Self-Hosting',
+  description: 'Getting started with self-hosting Supabase.',
 }
 
 There are several ways to use Supabase:
diff --git a/apps/docs/pages/guides/self-hosting/docker.mdx b/apps/docs/pages/guides/self-hosting/docker.mdx
index ab14e78b0eb..1155f0e68da 100644
--- a/apps/docs/pages/guides/self-hosting/docker.mdx
+++ b/apps/docs/pages/guides/self-hosting/docker.mdx
@@ -1,10 +1,8 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'docker',
-  title: 'Self-hosting with Docker',
-  description: 'How to configure and deploy Supabase.',
-  sidebar_label: 'Docker',
+  title: 'Self-Hosting with Docker',
+  description: 'Learn how to configure and deploy Supabase with Docker.',
 }
 
 Docker is the easiest way to get started with self-hosted Supabase.

From 6a6e848fa2f50f1b9c99698a7a388b05a27ca64f Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Mon, 19 Dec 2022 11:58:59 -0800
Subject: [PATCH 021/215] Update redirects

---
 apps/www/lib/redirects.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index fd7ee2335d9..09317c8a31f 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -542,9 +542,9 @@ module.exports = [
     destination: '/docs/guides/platform',
   },
   {
-    permanent: false,
-    source: '/docs/guides/self-hosting',
-    destination: '/docs/guides/hosting/overview',
+    permanent: true,
+    source: '/docs/guides/self-hosting/overview',
+    destination: '/docs/guides/self-hosting',
   },
   {
     permanent: true,
@@ -1800,12 +1800,22 @@ module.exports = [
   {
     permanent: true,
     source: '/docs/guides/hosting/overview',
-    destination: '/docs/guides/resources/self-hosting',
+    destination: '/docs/guides/self-hosting',
   },
   {
     permanent: true,
     source: '/docs/guides/hosting/docker',
-    destination: '/docs/guides/resources/self-hosting/docker',
+    destination: '/docs/guides/self-hosting/docker',
+  },
+  {
+    permanent: true,
+    source: '/docs/guides/resources/self-hosting',
+    destination: '/docs/guides/self-hosting',
+  },
+  {
+    permanent: true,
+    source: '/docs/guides/resources/self-hosting/docker',
+    destination: '/docs/guides/self-hosting/docker',
   },
   {
     permanent: true,

From a90473eace5a4b95f9bbb1724ccd588c5e2d3f67 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Mon, 19 Dec 2022 12:18:30 -0800
Subject: [PATCH 022/215] Update landing page

---
 apps/docs/pages/index.mdx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index a47df32ed83..5a7e2f17b28 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -144,7 +144,7 @@ export const meta = {
           key={product.title}
           passHref
         >
-          <a className={'col-span-12 md:col-span-4'}>
+          <a className={'col-span-12 md:col-span-6'}>
             <GlassPanel {...product} background={false} showIconBg={true}>
               {product.description}
             </GlassPanel>
@@ -243,6 +243,7 @@ export const apis = [
     hasLightIcon: true,
     href: 'reference/javascript/introduction',
     description: 'Official client libraries for JavaScript and TypeScript.',
+    span: 'col-span-12 md:col-span-6',
   },
   {
     title: 'Flutter Client Library',
@@ -250,6 +251,7 @@ export const apis = [
     hasLightIcon: true,
     href: 'reference/dart/introduction',
     description: 'Official client libraries for Flutter and Dart.',
+    span: 'col-span-12 md:col-span-6',
   },
   {
     title: 'Management API',
@@ -257,6 +259,7 @@ export const apis = [
     hasLightIcon: true,
     href: 'reference/api/introduction',
     description: 'Manage your Supabase projects and organizations programmatically.',
+    span: 'col-span-12 md:col-span-6',
   },
   {
     title: 'Supabase CLI',
@@ -265,6 +268,7 @@ export const apis = [
     href: 'reference/cli/introduction',
     description:
       'Use the CLI to develop your project locally, manage database migrations, and deploy to the Supabase Platform or self-host.',
+    span: 'col-span-12 md:col-span-6',
   },
   {
     title: 'Self-Hosting Auth',
@@ -307,6 +311,13 @@ export const platform = [
     href: 'guides/resources',
     description: 'View examples, curated content from the community, migration guides, and more.',
   },
+  {
+    title: 'Self-Hosting Supabase',
+    icon: '/docs/img/icons/menu/platform',
+    hasLightIcon: true,
+    href: 'guides/self-hosting',
+    description: 'Learn how to self-host Supabase and deploy to your own infrastructure.',
+  },
   {
     // header: '/docs/img/cards/sample-card-header-2.svg',
     title: 'Integrations',

From 328201e254bd1392f5d77299cd587aa858986c46 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Mon, 19 Dec 2022 12:41:55 -0800
Subject: [PATCH 023/215] Update nav

---
 .../NavigationMenu.constants.ts               | 51 +++++++------------
 1 file changed, 17 insertions(+), 34 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 4b2bcc4efdd..b5b21af6420 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -581,41 +581,24 @@ export const self_hosting = {
     { name: 'Overview', url: '/guides/self-hosting', items: [] },
     { name: 'Self-Hosting with Docker', url: '/guides/self-hosting/docker', items: [] },
     {
-      name: 'Reference',
+      name: 'Auth Server',
       items: [
-        {
-          name: 'Auth Server',
-          url: '/reference/self-hosting-auth/introduction',
-          icon: '/img/icons/menu/reference-auth',
-          items: [],
-        },
-        {
-          name: 'Auth Server Config',
-          url: '/guides/self-hosting/auth/config',
-          items: [],
-        },
-        {
-          name: 'Storage Server',
-          url: '/reference/self-hosting-storage/introduction',
-          icon: '/img/icons/menu/reference-storage',
-          items: [],
-        },
-        {
-          name: 'Storage Server Config',
-          url: '/guides/self-hosting/storage/config',
-          items: [],
-        },
-        {
-          name: 'Realtime Server',
-          url: '/reference/self-hosting-realtime/introduction',
-          icon: '/img/icons/menu/reference-realtime',
-          items: [],
-        },
-        {
-          name: 'Realtime Server Config',
-          url: '/guides/self-hosting/realtime/config',
-          items: [],
-        },
+        { name: 'Reference', url: '/reference/self-hosting-auth/introduction', items: [] },
+        { name: 'Configuration', url: '/guides/self-hosting/auth/config', items: [] },
+      ],
+    },
+    {
+      name: 'Storage Server',
+      items: [
+        { name: 'Reference', url: '/reference/self-hosting-storage/introduction', items: [] },
+        { name: 'Configuration', url: '/guides/self-hosting/storage/config', items: [] },
+      ],
+    },
+    {
+      name: 'Realtime Server',
+      items: [
+        { name: 'Reference', url: '/reference/self-hosting-realtime/introduction', items: [] },
+        { name: 'Configuration', url: '/guides/self-hosting/realtime/config', items: [] },
       ],
     },
   ],

From bb930ca451b42cc2644bca44f28ec0d31a37dea5 Mon Sep 17 00:00:00 2001
From: dng <danny@supabase.io>
Date: Mon, 19 Dec 2022 12:57:55 -0800
Subject: [PATCH 024/215] Update
 apps/docs/pages/guides/platform/custom-domains.mdx

---
 apps/docs/pages/guides/platform/custom-domains.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/platform/custom-domains.mdx b/apps/docs/pages/guides/platform/custom-domains.mdx
index 5c0023dff2c..d44be132976 100644
--- a/apps/docs/pages/guides/platform/custom-domains.mdx
+++ b/apps/docs/pages/guides/platform/custom-domains.mdx
@@ -145,7 +145,7 @@ As with the final activation stage of the process for setting up a vanity subdom
 
 Edge functions do not honor the custom domain or the vanity subdomain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
 
-A Supabase project can-at this time-use either a Custom Domain, or a Vanity Subdomain, but not both.
+A Supabase project can-at this time-use either a Custom Domain or a Vanity Subdomain, but not both.
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 

From 9948463e894b2e4b7d5327adc0ba5d32f37a4136 Mon Sep 17 00:00:00 2001
From: dng <danny@supabase.io>
Date: Mon, 19 Dec 2022 13:06:26 -0800
Subject: [PATCH 025/215] Update
 apps/docs/pages/guides/platform/custom-domains.mdx

---
 apps/docs/pages/guides/platform/custom-domains.mdx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/docs/pages/guides/platform/custom-domains.mdx b/apps/docs/pages/guides/platform/custom-domains.mdx
index d44be132976..13fedb8e525 100644
--- a/apps/docs/pages/guides/platform/custom-domains.mdx
+++ b/apps/docs/pages/guides/platform/custom-domains.mdx
@@ -143,9 +143,8 @@ As with the final activation stage of the process for setting up a vanity subdom
 
 ## Limitations
 
-Edge functions do not honor the custom domain or the vanity subdomain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
-
-A Supabase project can-at this time-use either a Custom Domain or a Vanity Subdomain, but not both.
+- Edge functions do not honor the custom domain or the vanity subdomain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
+- A Supabase project can—at this time—use either a Custom Domain or a Vanity Subdomain, but not both.
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 

From 6bfe68890f58be54f4b982ba0af7d7aa70c4514c Mon Sep 17 00:00:00 2001
From: Andrew Smith <a.smith@silentworks.co.uk>
Date: Mon, 19 Dec 2022 23:06:37 +0000
Subject: [PATCH 026/215] Update video link for flutter flow getting started

---
 apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx b/apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx
index 7e84894bfb6..b0c7f395dc8 100644
--- a/apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx
+++ b/apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx
@@ -36,7 +36,7 @@ An integration between FlutterFlow and Supabase has been long awaited by the com
 
 This is just the beginning of our integration with FlutterFlow. We're working closely with the FlutterFlow team to deliver more features!
 
-Watch John from the FlutterFlow team demonstrate how you can [get started with FlutterFlow and Supabase](https://youtu.be/TmViZsWEBY0).
+Watch John from the FlutterFlow team demonstrate how you can [get started with FlutterFlow and Supabase](https://youtu.be/hw9Q-NjASbU).
 
 ### OneSignal
 

From c040366fdce6ad2bf35c4a42f3ac221c977ac3f0 Mon Sep 17 00:00:00 2001
From: Bo Lu <lv.patrick@gmail.com>
Date: Tue, 20 Dec 2022 10:59:16 +1100
Subject: [PATCH 027/215] fix broken links

---
 apps/docs/pages/guides/resources/self-hosting/docker.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/docs/pages/guides/resources/self-hosting/docker.mdx b/apps/docs/pages/guides/resources/self-hosting/docker.mdx
index ab14e78b0eb..e3dfed50ca7 100644
--- a/apps/docs/pages/guides/resources/self-hosting/docker.mdx
+++ b/apps/docs/pages/guides/resources/self-hosting/docker.mdx
@@ -42,11 +42,11 @@ Now visit [http://localhost:3000](http://localhost:3000) to start using Supabase
 
 While we provided you with some example secrets for getting started, you should NEVER deploy your Supabase setup using the defaults we have provided.
 
-Please follow these steps to secure your Docker setup. We [strongly recommend](../../guides/hosting/overview#managing-your-secrets) using a secrets manager when deploying to production.
+Please follow these steps to secure your Docker setup. We [strongly recommend](../self-hosting#managing-your-secrets) using a secrets manager when deploying to production.
 
 ### Generate API Keys
 
-Use your `JWT_SECRET` to generate a `anon` and `service` API keys using the [JWT generator](../../guides/hosting/overview#api-keys).
+Use your `JWT_SECRET` to generate a `anon` and `service` API keys using the [JWT generator](../self-hosting#api-keys).
 
 Replace the values in these files:
 
@@ -72,7 +72,7 @@ The Docker setup doesn't include a management database for managing users and lo
 
 ## Configuration
 
-Each system can be [configured](../../guides/hosting/overview#configuration) to suit your particular use-case.
+Each system can be [configured](../self-hosting#configuration) to suit your particular use-case.
 
 To keep the setup simple, we made some choices that may not be optimal for production:
 
@@ -82,7 +82,7 @@ To keep the setup simple, we made some choices that may not be optimal for produ
 
 ### Using an external database
 
-We strongly [recommend](../../guides/hosting/overview#managing-your-database) that you decouple your database from `docker-compose` before deploying.
+We strongly [recommend](../self-hosting#managing-your-database) that you decouple your database from `docker-compose` before deploying.
 The middleware will run with any PostgreSQL database that has logical replication enabled. The following environment variables should be updated
 in the `.env` file to point to your external database:
 

From eaf0a39c2a3724fb8f8192c43ef63df9f609a98a Mon Sep 17 00:00:00 2001
From: dng <danny@supabase.io>
Date: Mon, 19 Dec 2022 16:21:10 -0800
Subject: [PATCH 028/215] Apply suggestions from code review

---
 apps/docs/pages/guides/resources/self-hosting/docker.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/docs/pages/guides/resources/self-hosting/docker.mdx b/apps/docs/pages/guides/resources/self-hosting/docker.mdx
index e3dfed50ca7..066e8ae0efd 100644
--- a/apps/docs/pages/guides/resources/self-hosting/docker.mdx
+++ b/apps/docs/pages/guides/resources/self-hosting/docker.mdx
@@ -42,7 +42,7 @@ Now visit [http://localhost:3000](http://localhost:3000) to start using Supabase
 
 While we provided you with some example secrets for getting started, you should NEVER deploy your Supabase setup using the defaults we have provided.
 
-Please follow these steps to secure your Docker setup. We [strongly recommend](../self-hosting#managing-your-secrets) using a secrets manager when deploying to production.
+Follow these steps to secure your Docker setup. We strongly recommend using a [secrets manager](../self-hosting#managing-your-secrets) when deploying to production.
 
 ### Generate API Keys
 
@@ -82,7 +82,7 @@ To keep the setup simple, we made some choices that may not be optimal for produ
 
 ### Using an external database
 
-We strongly [recommend](../self-hosting#managing-your-database) that you decouple your database from `docker-compose` before deploying.
+We strongly recommend [decoupling your database](../self-hosting#managing-your-database) from `docker-compose` before deploying.
 The middleware will run with any PostgreSQL database that has logical replication enabled. The following environment variables should be updated
 in the `.env` file to point to your external database:
 

From 7f676b285212a74b7d170cd31608636473538ea2 Mon Sep 17 00:00:00 2001
From: Michael Esteban <mickel13@gmail.com>
Date: Tue, 20 Dec 2022 11:22:55 +1000
Subject: [PATCH 029/215] docs: fix missing nextjs auth imports

---
 apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index d0e74b82999..76e169c2271 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -83,9 +83,9 @@ Wrap your `pages/_app.js` component with the `SessionContextProvider` component:
 ```jsx title=pages/_app.js
 import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
 import { SessionContextProvider } from '@supabase/auth-helpers-react'
+import { useState } from 'react'
 
 function MyApp({ Component, pageProps }) {
-  const router = useRouter()
   // Create a new supabase browser client on every first render.
   const [supabaseClient] = useState(() => createBrowserSupabaseClient())
 
@@ -108,6 +108,7 @@ Wrap your `pages/_app.tsx` component with the `SessionContextProvider` component
 ```tsx lines=2,8 title=pages/_app.tsx
 import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
 import { SessionContextProvider, Session } from '@supabase/auth-helpers-react'
+import { useState } from 'react'
 
 function MyApp({
   Component,

From fe1325c715ae3f684dd0df008369149a8598b729 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 09:48:54 +0800
Subject: [PATCH 030/215] fix link

---
 apps/docs/pages/guides/self-hosting.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/self-hosting.mdx b/apps/docs/pages/guides/self-hosting.mdx
index 02db71f0b8e..1c99b9765d9 100644
--- a/apps/docs/pages/guides/self-hosting.mdx
+++ b/apps/docs/pages/guides/self-hosting.mdx
@@ -8,7 +8,7 @@ export const meta = {
 There are several ways to use Supabase:
 
 - [Supabase Cloud](https://app.supabase.com): you don't need to deploy anything. We will manage and scale your infrastructure.
-- [Docker](../../guides/hosting/docker): deploy to your own infrastructure.
+- [Docker](/docs/guides/self-hosting/docker): deploy to your own infrastructure.
 - Kubernetes: coming soon.
 
 ## Architecture

From dc7e615e4159b6f19f153f228efbd4c731be3c87 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 11:22:36 +0800
Subject: [PATCH 031/215] chore: use next/image for images in articles

---
 apps/docs/components/index.tsx |  8 ++++++++
 apps/docs/styles/main.scss     | 26 ++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index c5a5aa3752a..cdfa36060b5 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -29,6 +29,7 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo
 
 import Options from '~/components/Options'
 import Param from '~/components/Params'
+import Image from 'next/image'
 
 const components = {
   Admonition,
@@ -73,6 +74,13 @@ const components = {
   CliGlobalFlagsHandler: () => <CliGlobalFlagsHandler />,
   Options,
   Param,
+  img: (props: any) => {
+    return (
+      <span className={['next-image--dynamic-fill'].join(' ')}>
+        <Image {...props} className={['rounded-md border'].join(' ')} layout="fill" />
+      </span>
+    )
+  },
 }
 
 export default components
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index db00f8c12e2..4d051a837ad 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -253,3 +253,29 @@ div[role='tablist'] {
     max-width: 620px;
   }
 }
+
+/*
+* sets the image in @Next/Image components
+* to respect the height of the content
+*
+*/
+.next-image--dynamic-fill {
+  width: 100%;
+  grid-column: 1 / -1;
+}
+.next-image--dynamic-fill > span {
+  position: relative !important;
+}
+.next-image--dynamic-fill img {
+  object-fit: contain;
+  width: 100% !important;
+  position: relative !important;
+  height: unset !important;
+}
+
+.line-clamp {
+  display: -webkit-box;
+  margin: 0 auto;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}

From 53cb175272825c2c33353b1692c61c26663f5006 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 11:24:45 +0800
Subject: [PATCH 032/215] Update main.scss

---
 apps/docs/styles/main.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index 4d051a837ad..ea1f9b78324 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -272,10 +272,3 @@ div[role='tablist'] {
   position: relative !important;
   height: unset !important;
 }
-
-.line-clamp {
-  display: -webkit-box;
-  margin: 0 auto;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}

From aca0307df5e8a1fcfe1b3bdaaf00668ced2b0d2e Mon Sep 17 00:00:00 2001
From: Qiao Han <qiao@supabase.io>
Date: Tue, 20 Dec 2022 11:57:49 +0800
Subject: [PATCH 033/215] chore: update cli spec to 1.27.0

---
 spec/cli_v1_commands.yaml | 105 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 104 insertions(+), 1 deletion(-)

diff --git a/spec/cli_v1_commands.yaml b/spec/cli_v1_commands.yaml
index e0799ffd7c0..2688659f24b 100644
--- a/spec/cli_v1_commands.yaml
+++ b/spec/cli_v1_commands.yaml
@@ -58,6 +58,11 @@ commands:
     usage: supabase vanity-subdomains get
     subcommands: []
     flags:
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
       - id: project-ref
         name: --project-ref <string>
         description: Project ref of the Supabase project.
@@ -72,6 +77,11 @@ commands:
     usage: supabase vanity-subdomains delete
     subcommands: []
     flags:
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
       - id: project-ref
         name: --project-ref <string>
         description: Project ref of the Supabase project.
@@ -89,6 +99,11 @@ commands:
         description: |
           The desired vanity subdomain to use for your Supabase project.
         default_value: ''
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
       - id: project-ref
         name: --project-ref <string>
         description: Project ref of the Supabase project.
@@ -111,6 +126,11 @@ commands:
         description: |
           The desired vanity subdomain to use for your Supabase project.
         default_value: ''
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
       - id: project-ref
         name: --project-ref <string>
         description: Project ref of the Supabase project.
@@ -372,6 +392,11 @@ commands:
         name: --db-allow-cidr <strings>
         description: CIDR to allow DB connections from.
         default_value: '[]'
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
       - id: project-ref
         name: --project-ref <string>
         description: Project ref of the Supabase project.
@@ -384,6 +409,63 @@ commands:
     usage: supabase network-restrictions get
     subcommands: []
     flags:
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-network-bans
+    title: supabase network-bans
+    summary: Manage network bans
+    description: |-
+      Network bans are IPs that get temporarily blocked if their traffic pattern looks abusive (e.g. multiple failed auth attempts).
+
+      The subcommands help you view the current bans, and unblock IPs if desired.
+    tags:
+      - management-api
+    links: []
+    subcommands:
+      - supabase-network-bans-get
+      - supabase-network-bans-remove
+    flags: []
+  - id: supabase-network-bans-remove
+    title: supabase network-bans remove
+    summary: Remove a network ban
+    tags: []
+    links: []
+    usage: supabase network-bans remove [flags]
+    subcommands: []
+    flags:
+      - id: db-unban-ip
+        name: --db-unban-ip <strings>
+        description: IP to allow DB connections from.
+        default_value: '[]'
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-network-bans-get
+    title: supabase network-bans get
+    summary: Get the current network bans
+    tags: []
+    links: []
+    usage: supabase network-bans get
+    subcommands: []
+    flags:
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
       - id: project-ref
         name: --project-ref <string>
         description: Project ref of the Supabase project.
@@ -407,6 +489,10 @@ commands:
     usage: supabase migration repair <version> [flags]
     subcommands: []
     flags:
+      - id: password
+        name: -p, --password <string>
+        description: Password to your remote Postgres database.
+        default_value: ''
       - id: status
         name: --status <[ applied | reverted ]>
         description: Version status to update.
@@ -722,6 +808,7 @@ commands:
     links: []
     subcommands:
       - supabase-db-diff
+      - supabase-db-dump
       - supabase-db-lint
       - supabase-db-push
       - supabase-db-remote
@@ -804,6 +891,22 @@ commands:
         name: -s, --schema <strings>
         description: List of schema to include.
         default_value: '[public]'
+  - id: supabase-db-dump
+    title: supabase db dump
+    summary: Dumps schemas from the remote database
+    tags: []
+    links: []
+    usage: supabase db dump [flags]
+    subcommands: []
+    flags:
+      - id: file
+        name: -f, --file <string>
+        description: File path to save the dumped schema.
+        default_value: ''
+      - id: password
+        name: -p, --password <string>
+        description: Password to your remote Postgres database.
+        default_value: ''
   - id: supabase-db-diff
     title: supabase db diff
     summary: Diffs the local database for schema changes
@@ -814,7 +917,7 @@ commands:
     flags:
       - id: file
         name: -f, --file <string>
-        description: Saves schema diff to a file.
+        description: Saves schema diff to a new migration file.
         default_value: ''
       - id: linked
         name: --linked

From e21b269982e6010a434b0ca273bc54e5704ffda5 Mon Sep 17 00:00:00 2001
From: Qiao Han <qiao@supabase.io>
Date: Tue, 20 Dec 2022 11:58:18 +0800
Subject: [PATCH 034/215] chore: add new sections and reorganize

---
 spec/common-cli-sections.json | 261 +++++++++++++++++++---------------
 1 file changed, 145 insertions(+), 116 deletions(-)

diff --git a/spec/common-cli-sections.json b/spec/common-cli-sections.json
index 9ce2b34c7e0..4481a05bacf 100644
--- a/spec/common-cli-sections.json
+++ b/spec/common-cli-sections.json
@@ -17,33 +17,9 @@
     "title": "general",
     "items": [
       {
-        "id": "supabase-test",
-        "title": "supabase test",
-        "slug": "supabase-test",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-test-db",
-        "title": "supabase test db",
-        "slug": "supabase-test-db",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-stop",
-        "title": "supabase stop",
-        "slug": "supabase-stop",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-status",
-        "title": "supabase status",
-        "slug": "supabase-status",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-start",
-        "title": "supabase start",
-        "slug": "supabase-start",
+        "id": "supabase-init",
+        "title": "supabase init",
+        "slug": "supabase-init",
         "type": "cli-command"
       },
       {
@@ -59,9 +35,33 @@
         "type": "cli-command"
       },
       {
-        "id": "supabase-init",
-        "title": "supabase init",
-        "slug": "supabase-init",
+        "id": "supabase-start",
+        "title": "supabase start",
+        "slug": "supabase-start",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-stop",
+        "title": "supabase stop",
+        "slug": "supabase-stop",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-status",
+        "title": "supabase status",
+        "slug": "supabase-status",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-test",
+        "title": "supabase test",
+        "slug": "supabase-test",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-test-db",
+        "title": "supabase test db",
+        "slug": "supabase-test-db",
         "type": "cli-command"
       },
       {
@@ -88,12 +88,36 @@
     "title": "Database",
     "items": [
       { "id": "supabase-db", "title": "supabase db", "slug": "supabase-db", "type": "cli-command" },
+      {
+        "id": "supabase-db-dump",
+        "title": "supabase db dump",
+        "slug": "supabase-db-dump",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-db-push",
+        "title": "supabase db push",
+        "slug": "supabase-db-push",
+        "type": "cli-command"
+      },
       {
         "id": "supabase-db-reset",
         "title": "supabase db reset",
         "slug": "supabase-db-reset",
         "type": "cli-command"
       },
+      {
+        "id": "supabase-db-diff",
+        "title": "supabase db diff",
+        "slug": "supabase-db-diff",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-db-lint",
+        "title": "supabase db lint",
+        "slug": "supabase-db-lint",
+        "type": "cli-command"
+      },
       {
         "id": "supabase-db-remote",
         "title": "supabase db remote",
@@ -105,24 +129,6 @@
         "title": "supabase db remote commit",
         "slug": "supabase-db-remote-commit",
         "type": "cli-command"
-      },
-      {
-        "id": "supabase-db-push",
-        "title": "supabase db push",
-        "slug": "supabase-db-push",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-db-lint",
-        "title": "supabase db lint",
-        "slug": "supabase-db-lint",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-db-diff",
-        "title": "supabase db diff",
-        "slug": "supabase-db-diff",
-        "type": "cli-command"
       }
     ]
   },
@@ -155,35 +161,6 @@
       }
     ]
   },
-  {
-    "title": "secrets",
-    "items": [
-      {
-        "id": "supabase-secrets",
-        "title": "supabase secrets",
-        "slug": "supabase-secrets",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-secrets-unset",
-        "title": "supabase secrets unset",
-        "slug": "supabase-secrets-unset",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-secrets-set",
-        "title": "supabase secrets set",
-        "slug": "supabase-secrets-set",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-secrets-list",
-        "title": "supabase secrets list",
-        "slug": "supabase-secrets-list",
-        "type": "cli-command"
-      }
-    ]
-  },
   {
     "title": "projects",
     "items": [
@@ -193,17 +170,17 @@
         "slug": "supabase-projects",
         "type": "cli-command"
       },
-      {
-        "id": "supabase-projects-list",
-        "title": "supabase projects list",
-        "slug": "supabase-projects-list",
-        "type": "cli-command"
-      },
       {
         "id": "supabase-projects-create",
         "title": "supabase projects create",
         "slug": "supabase-projects-create",
         "type": "cli-command"
+      },
+      {
+        "id": "supabase-projects-list",
+        "title": "supabase projects list",
+        "slug": "supabase-projects-list",
+        "type": "cli-command"
       }
     ]
   },
@@ -233,18 +210,18 @@
         "slug": "supabase-functions",
         "type": "cli-command"
       },
-      {
-        "id": "supabase-functions-serve",
-        "title": "supabase functions serve",
-        "slug": "supabase-functions-serve",
-        "type": "cli-command"
-      },
       {
         "id": "supabase-functions-new",
         "title": "supabase functions new",
         "slug": "supabase-functions-new",
         "type": "cli-command"
       },
+      {
+        "id": "supabase-functions-serve",
+        "title": "supabase functions serve",
+        "slug": "supabase-functions-serve",
+        "type": "cli-command"
+      },
       {
         "id": "supabase-functions-deploy",
         "title": "supabase functions deploy",
@@ -259,6 +236,35 @@
       }
     ]
   },
+  {
+    "title": "secrets",
+    "items": [
+      {
+        "id": "supabase-secrets",
+        "title": "supabase secrets",
+        "slug": "supabase-secrets",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-secrets-set",
+        "title": "supabase secrets set",
+        "slug": "supabase-secrets-set",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-secrets-list",
+        "title": "supabase secrets list",
+        "slug": "supabase-secrets-list",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-secrets-unset",
+        "title": "supabase secrets unset",
+        "slug": "supabase-secrets-unset",
+        "type": "cli-command"
+      }
+    ]
+  },
   {
     "title": "Domains",
     "items": [
@@ -269,21 +275,9 @@
         "type": "cli-command"
       },
       {
-        "id": "supabase-domains-reverify",
-        "title": "supabase domains reverify",
-        "slug": "supabase-domains-reverify",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-domains-get",
-        "title": "supabase domains get",
-        "slug": "supabase-domains-get",
-        "type": "cli-command"
-      },
-      {
-        "id": "supabase-domains-delete",
-        "title": "supabase domains delete",
-        "slug": "supabase-domains-delete",
+        "id": "supabase-domains-activate",
+        "title": "supabase domains activate",
+        "slug": "supabase-domains-activate",
         "type": "cli-command"
       },
       {
@@ -293,9 +287,21 @@
         "type": "cli-command"
       },
       {
-        "id": "supabase-domains-activate",
-        "title": "supabase domains activate",
-        "slug": "supabase-domains-activate",
+        "id": "supabase-domains-get",
+        "title": "supabase domains get",
+        "slug": "supabase-domains-get",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-domains-reverify",
+        "title": "supabase domains reverify",
+        "slug": "supabase-domains-reverify",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-domains-delete",
+        "title": "supabase domains delete",
+        "slug": "supabase-domains-delete",
         "type": "cli-command"
       }
     ]
@@ -309,28 +315,51 @@
         "slug": "supabase-vanity-subdomains",
         "type": "cli-command"
       },
-      {
-        "id": "supabase-vanity-subdomains-check-availability",
-        "title": "supabase vanity-subdomains check-availability",
-        "slug": "supabase-vanity-subdomains-check-availability",
-        "type": "cli-command"
-      },
       {
         "id": "supabase-vanity-subdomains-activate",
         "title": "supabase vanity-subdomains activate",
         "slug": "supabase-vanity-subdomains-activate",
         "type": "cli-command"
       },
+      {
+        "id": "supabase-vanity-subdomains-get",
+        "title": "supabase vanity-subdomains get",
+        "slug": "supabase-vanity-subdomains-get",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-vanity-subdomains-check-availability",
+        "title": "supabase vanity-subdomains check-availability",
+        "slug": "supabase-vanity-subdomains-check-availability",
+        "type": "cli-command"
+      },
       {
         "id": "supabase-vanity-subdomains-delete",
         "title": "supabase vanity-subdomains delete",
         "slug": "supabase-vanity-subdomains-delete",
         "type": "cli-command"
+      }
+    ]
+  },
+  {
+    "title": "Network Bans",
+    "items": [
+      {
+        "id": "supabase-network-bans",
+        "title": "supabase network-bans",
+        "slug": "supabase-network-bans",
+        "type": "cli-command"
       },
       {
-        "id": "supabase-vanity-subdomains-get",
-        "title": "supabase vanity-subdomains get",
-        "slug": "supabase-vanity-subdomains-get",
+        "id": "supabase-network-bans-get",
+        "title": "supabase network-bans get",
+        "slug": "supabase-network-bans-get",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-network-bans-remove",
+        "title": "supabase network-bans remove",
+        "slug": "supabase-network-bans-remove",
         "type": "cli-command"
       }
     ]

From 68752eabb2b49f15f005f90b251f3fb474e4b60f Mon Sep 17 00:00:00 2001
From: Qiao Han <qiao@supabase.io>
Date: Tue, 20 Dec 2022 12:00:30 +0800
Subject: [PATCH 035/215] chore: bump spec version

---
 spec/cli_v1_commands.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/cli_v1_commands.yaml b/spec/cli_v1_commands.yaml
index 2688659f24b..fabffeb3733 100644
--- a/spec/cli_v1_commands.yaml
+++ b/spec/cli_v1_commands.yaml
@@ -1,7 +1,7 @@
 clispec: '001'
 info:
   id: cli
-  version: 1.24.0
+  version: 1.27.0
   title: Supabase CLI
   language: sh
   source: https://github.com/supabase/cli

From 08da4652ed561d222dc51a172669baaa20b44003 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 12:26:32 +0800
Subject: [PATCH 036/215] move spec generation stuff

---
 apps/docs/components/DocSearch.tsx            |  8 ++++--
 .../NavigationMenu/NavigationMenu.tsx         | 26 +++++++++----------
 .../NavigationMenu/NavigationMenuRefList.tsx  | 23 +++-------------
 .../NavigationMenuRefListItems.tsx            | 11 ++++----
 apps/docs/lib/refGenerator/helpers.ts         | 21 +++++++++++++++
 5 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/apps/docs/components/DocSearch.tsx b/apps/docs/components/DocSearch.tsx
index d8bde374580..38c48a75396 100644
--- a/apps/docs/components/DocSearch.tsx
+++ b/apps/docs/components/DocSearch.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, createContext, useContext, useEffect } from 'react'
+import { useState, useCallback, useRef, createContext, useContext, useEffect, memo } from 'react'
 import { createPortal } from 'react-dom'
 import Link from 'next/link'
 import Head from 'next/head'
@@ -16,7 +16,7 @@ const APP_ID = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID
 
 const SearchContext = createContext(null)
 
-export function SearchProvider({ children }: any) {
+function SearchProviderContent({ children }: any) {
   const router = useRouter()
   const [isOpen, setIsOpen] = useState(false)
   const [initialQuery, setInitialQuery] = useState(null)
@@ -114,6 +114,10 @@ export function SearchProvider({ children }: any) {
   )
 }
 
+const SearchProvider = memo(SearchProviderContent)
+
+export { SearchProvider }
+
 // @ts-ignore
 function Hit({ hit, children }) {
   return (
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index e40f2e99e53..ba106fdb574 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -22,7 +22,7 @@ import { flattenSections } from '~/lib/helpers'
 import NavigationMenuHome from './HomeMenu'
 
 // Filter libCommonSections for just the relevant sections in the current library
-function generateAllowedClientLibKeys(sections, spec) {
+export function generateAllowedClientLibKeys(sections, spec) {
   // Filter parent sections first
 
   const specIds = spec.functions.map((func) => {
@@ -198,7 +198,7 @@ const SideNav = () => {
         active={isReference_Javascript_V1}
         commonSections={libCommonSections}
         lib="javascript"
-        allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_js_v1)}
+        spec={spec_js_v1}
       /> */}
       <NavigationMenuRefList
         key={'reference-js-menu'}
@@ -206,7 +206,7 @@ const SideNav = () => {
         active={isReference_Javascript_V2}
         commonSections={libCommonSections}
         lib="javascript"
-        allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_js_v2)}
+        spec={spec_js_v2}
       />
       {/* <NavigationMenuRefList
         key={'reference-dart-menu'}
@@ -214,15 +214,15 @@ const SideNav = () => {
         active={isReference_Dart_V0}
         commonSections={libCommonSections}
         lib="dart"
-        allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v0)}
-      /> */}
-      {/* <NavigationMenuRefList
+        spec={spec_dart_v0}
+      />
+      <NavigationMenuRefList
         key={'reference-dart-menu'}
         id={'reference_dart_v1'}
         active={isReference_Dart_V1}
         commonSections={libCommonSections}
         lib="dart"
-        allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v1)}
+        spec={spec_dart_v1}
       /> */}
       {/* // Tools */}
       {/* <NavigationMenuRefList
@@ -231,8 +231,8 @@ const SideNav = () => {
         active={isReference_Cli}
         commonSections={cliCommonSections}
         lib="cli"
-      /> */}
-      {/* <NavigationMenuRefList
+      />
+      <NavigationMenuRefList
         key={'reference-api-menu'}
         id={'reference_api'}
         active={isReference_Api}
@@ -246,15 +246,15 @@ const SideNav = () => {
         active={isReference_Self_Hosting_Auth}
         commonSections={authServerCommonSections}
         lib="self-hosting-auth"
-      /> */}
-      {/* <NavigationMenuRefList
+      />
+      <NavigationMenuRefList
         key={'reference-self-hosting-storage-menu'}
         id={'reference_self_hosting_storage'}
         active={isReference_Self_Hosting_Storage}
         commonSections={storageServerCommonSections}
         lib="self-hosting-storage"
-      /> */}
-      {/* <NavigationMenuRefList
+      />
+      <NavigationMenuRefList
         key={'reference-self-hosting-realtime-menu'}
         id={'reference_self_hosting_realtime'}
         active={isReference_Self_Hosting_Realtime}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index b1ae0480dfd..fe594465a2d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -1,17 +1,5 @@
-import * as Accordion from '@radix-ui/react-accordion'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { IconChevronLeft } from 'ui'
-import * as NavItems from './NavigationMenu.constants'
-
-import { find } from 'lodash'
-import Image from 'next/image'
-import { useTheme } from 'common/Providers'
-
 // import apiCommonSections from '~/../../spec/common-client-libs-sections.json'
 
-import RevVersionDropdown from '~/components/RefVersionDropdown'
-import { useMenuActiveRefId, useMenuLevelId } from '~/hooks/useMenuState'
 import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
 import NavigationMenuRefListItems from './NavigationMenuRefListItems'
 
@@ -26,14 +14,16 @@ interface INavigationMenuRefList {
   // if undefined, we show all the menu items
   allowedClientKeys?: string[]
   active: boolean
+  spec?: any
 }
 
 const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
   id,
   lib,
   commonSections,
-  allowedClientKeys,
+
   active,
+  spec,
 }) => {
   // console.log(filterIds)
   // console.log(modifierIds)
@@ -53,12 +43,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
         !active ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
       ].join(' ')}
     >
-      <NavigationMenuRefListItems
-        id={id}
-        lib={lib}
-        commonSections={commonSections}
-        allowedClientKeys={allowedClientKeys}
-      />
+      <NavigationMenuRefListItems id={id} lib={lib} commonSections={commonSections} spec={spec} />
     </div>
   )
 }
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index bda02438afc..a0d45213e4f 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -13,6 +13,7 @@ import RevVersionDropdown from '~/components/RefVersionDropdown'
 import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
 
 import React from 'react'
+import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers'
 
 const FunctionLink = ({
   title,
@@ -80,17 +81,15 @@ interface INavigationMenuRefList {
   // the keys of menu items that are allowed to be shown on the side menu
   // if undefined, we show all the menu items
   allowedClientKeys?: string[]
+  spec?: any
 }
 
-const Content: React.FC<INavigationMenuRefList> = ({
-  id,
-  lib,
-  commonSections,
-  allowedClientKeys,
-}) => {
+const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, spec }) => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
+  const allowedClientKeys = spec ? generateAllowedClientLibKeys(commonSections, spec) : undefined
+
   console.log(
     id && 'id changed',
     lib && 'lib changed',
diff --git a/apps/docs/lib/refGenerator/helpers.ts b/apps/docs/lib/refGenerator/helpers.ts
index ed8f18f5e4e..db1bccd25dc 100644
--- a/apps/docs/lib/refGenerator/helpers.ts
+++ b/apps/docs/lib/refGenerator/helpers.ts
@@ -2,6 +2,7 @@ import { TsDoc } from '~/generator/legacy/definitions'
 
 import { values, mapValues } from 'lodash'
 import { OpenAPIV3 } from 'openapi-types'
+import { flattenSections } from '../helpers'
 
 export function extractTsDocNode(nodeToFind: string, definition: any) {
   const nodePath = nodeToFind.split('.')
@@ -283,3 +284,23 @@ export const toArrayWithKey = (obj: object, keyAs: string) =>
       return value
     })
   )
+
+export function generateAllowedClientLibKeys(sections, spec) {
+  // Filter parent sections first
+
+  const specIds = spec.functions.map((func) => {
+    return func.id
+  })
+
+  const newShape = flattenSections(sections).filter((section) => {
+    if (specIds.includes(section.id)) {
+      return section
+    }
+  })
+
+  const final = newShape.map((func) => {
+    return func.id
+  })
+
+  return final
+}

From 4ac91ac5d8794060b383e8f57efce61d8c7170d0 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 12:29:53 +0800
Subject: [PATCH 037/215] fix build

---
 .../Navigation/NavigationMenu/NavigationMenuRefListItems.tsx    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index a0d45213e4f..071af515bf6 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -224,11 +224,13 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
               active = true
             } else if (
               (isModifier && !isFilter && !isAuthServer && props.id === 'using-modifiers') ||
+              // @ts-expect-error // REMOVE TODO
               (activeAccordianItem === 'using-modifiers' && props.id === 'using-modifiers')
             ) {
               active = true
             } else if (
               (isAuthServer && !isFilter && !isModifier && props.id === 'admin-api') ||
+              // @ts-expect-error // REMOVE TODO
               (activeAccordianItem === 'admin-api' && props.id === 'admin-api')
             ) {
               active = true

From d3635bfc37884c2912cb470dd6aa606ad621ea79 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 19 Dec 2022 11:37:49 +0700
Subject: [PATCH 038/215] Add helper to ignore browser dev console errors

---
 studio/sentry.client.config.js | 62 ++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/studio/sentry.client.config.js b/studio/sentry.client.config.js
index e9cd23945b2..68e03a3eca5 100644
--- a/studio/sentry.client.config.js
+++ b/studio/sentry.client.config.js
@@ -34,6 +34,7 @@ Sentry.init({
     // Ref: https://stackoverflow.com/questions/72437786/chrome-evalerror-possible-side-effect-in-debug
     'Possible side-effect in debug-evaluate',
   ],
+  beforeSend: (event) => filterConsoleErrors(event),
 })
 
 // replace dynamic query param with a template text
@@ -61,3 +62,64 @@ function standardiseRouterUrl(url) {
 
   return finalUrl
 }
+
+// Ignore dev console errors getting incorrectly thrown to sentry (Chrome specific)
+// https://github.com/getsentry/sentry-javascript/issues/5179#issuecomment-1206343862
+function filterConsoleErrors(event) {
+  const originalException = event.exception?.values?.[0]
+
+  // Console errors appear to always bubble up to `window.onerror` and to be unhandled. So if,
+  // we don't have the original exception or the mechanism looks different, we can early return the event.
+  // (Note, this might change depending on the used framework, so feel free to remove this check.)
+  if (
+    !originalException ||
+    !originalException.mechanism ||
+    originalException.mechanism.type !== 'onerror' ||
+    originalException.mechanism.handled
+  ) {
+    return event
+  }
+
+  const stackFrames = originalException.stacktrace?.frames
+  const errorType = originalException.type?.toLowerCase()
+
+  // If we don't have any information on error type or stacktrace, we have no information about the error
+  // this is unlikely to happen but it doesn't appear to happen in console errors.
+  // Hence, we can early return here as well.
+  if (!stackFrames || !errorType) {
+    return event
+  }
+
+  // For simple console errors (e.g. users just typing a statement they want evaluated)
+  // the stacktrace will only have one frame.
+  // This condition will not catch errors that would be thrown if users type in multi-line
+  // statements. For example, if they define a multi-line function.
+  // You can try experimenting with this number but there's little guarantee that the other
+  // conditions will work. Nevertheless, the checks below also work with multi-frame stacktraces.
+  const hasShortStackTrace = stackFrames.length <= 2
+  if (hasShortStackTrace && isSuspiciousError(errorType) && hasSuspiciousFrames(stackFrames)) {
+    console.warn('Dropping error due to suspicious stack frames.')
+    return null
+  }
+
+  return event
+}
+
+function isSuspiciousError(errorType) {
+  return ['syntaxerror', 'referenceerror', 'typeerror'].includes(errorType)
+}
+
+function hasSuspiciousFrames(stackFrames) {
+  const allSuspicious = stackFrames.every(isSuspiciousFrame)
+
+  // Certain type errors will include the thrown error message as the second stack frame,
+  // but the first will still follow the suspicious pattern.
+  const firstSuspicious = stackFrames.length === 2 && isSuspiciousFrame(stackFrames[0])
+
+  return allSuspicious || firstSuspicious
+}
+
+function isSuspiciousFrame(frame) {
+  const url = window.location.href
+  return frame.function === '?' && (frame.filename === '<anonymous>' || frame.filename === url)
+}

From 0946eaefda69e38da0b1a408596973dc31842c06 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 19 Dec 2022 11:43:59 +0700
Subject: [PATCH 039/215] Ignore org slug href error

---
 studio/sentry.client.config.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/studio/sentry.client.config.js b/studio/sentry.client.config.js
index 68e03a3eca5..3a7831dbf6c 100644
--- a/studio/sentry.client.config.js
+++ b/studio/sentry.client.config.js
@@ -33,12 +33,17 @@ Sentry.init({
     // [Joshen] This is a chrome specific error, fix is out in chromium, pending chrome update
     // Ref: https://stackoverflow.com/questions/72437786/chrome-evalerror-possible-side-effect-in-debug
     'Possible side-effect in debug-evaluate',
+    // [Joshen] This event started occuring after our fix in the org dropdown by reading the slug from
+    // the URL params instead of the store, but we cannot repro locally, staging nor on prod
+    // Safe to ignore since it's not a user-facing issue + we've not received any user feedback/report about it
+    // Ref: https://github.com/supabase/supabase/pull/9729
+    'The provided `href` (/org/[slug]/settings) value is missing query values (slug)',
   ],
   beforeSend: (event) => filterConsoleErrors(event),
 })
 
-// replace dynamic query param with a template text
-// support grouping sentry transaction
+// Replace dynamic query param with a template text
+// Support grouping sentry transaction
 function standardiseRouterUrl(url) {
   let finalUrl = url
 

From 1e8b42b8a5639fe4bb29e5794dc62ef221727c3e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 19 Dec 2022 11:50:16 +0700
Subject: [PATCH 040/215] Add one more ignore to sentry

---
 studio/sentry.client.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/studio/sentry.client.config.js b/studio/sentry.client.config.js
index 3a7831dbf6c..6ba94419d11 100644
--- a/studio/sentry.client.config.js
+++ b/studio/sentry.client.config.js
@@ -26,6 +26,7 @@ Sentry.init({
     'ResizeObserver',
     'Non-Error exception captured',
     'Non-Error promise rejection',
+    '[object Event]',
     // [Joshen] We currently use stripe-js for customers to save their credit card data
     // I'm unable to reproduce this error on local, staging nor prod across chrome, safari or firefox
     // Based on https://github.com/stripe/stripe-js/issues/26, it seems like this error is safe to ignore,

From 51ec11d3c843dcee70dd12925f3ad2e3bc3c454c Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 19 Dec 2022 14:20:09 +0700
Subject: [PATCH 041/215] Fix
 https://sentry.io/organizations/supabase/issues/3663157841

---
 studio/components/layouts/StorageLayout/StorageLayout.tsx  | 2 +-
 studio/localStores/storageExplorer/StorageExplorerStore.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/studio/components/layouts/StorageLayout/StorageLayout.tsx b/studio/components/layouts/StorageLayout/StorageLayout.tsx
index 6f6c3a13491..031a5935c33 100644
--- a/studio/components/layouts/StorageLayout/StorageLayout.tsx
+++ b/studio/components/layouts/StorageLayout/StorageLayout.tsx
@@ -67,7 +67,7 @@ const StorageLayout: FC<Props> = ({ title, children }) => {
 
   const onSelectCreateBucket = async (bucketName: string, isPublic: boolean) => {
     const bucket = await createBucket(bucketName, isPublic)
-    if (bucket.name) router.push(`/project/${ref}/storage/buckets/${bucket.name}`)
+    if (bucket !== undefined) router.push(`/project/${ref}/storage/buckets/${bucket.name}`)
   }
 
   const onSelectDeleteBucket = async (bucket: any) => {
diff --git a/studio/localStores/storageExplorer/StorageExplorerStore.js b/studio/localStores/storageExplorer/StorageExplorerStore.js
index 9980b30e17b..def4f9bc121 100644
--- a/studio/localStores/storageExplorer/StorageExplorerStore.js
+++ b/studio/localStores/storageExplorer/StorageExplorerStore.js
@@ -466,7 +466,8 @@ class StorageExplorerStore {
         message: error.message,
         category: 'error',
       })
-      return this.closeCreateBucketModal()
+      this.closeCreateBucketModal()
+      return undefined
     }
 
     await this.fetchBuckets()

From 36c87ed0efd5b9c0284a57ee10e599e426626e7d Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 19 Dec 2022 14:25:31 +0700
Subject: [PATCH 042/215] Add guard in ProjectContentStore
 loadRecentLogSqlSnippets

---
 studio/stores/project/ProjectContentStore.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/studio/stores/project/ProjectContentStore.ts b/studio/stores/project/ProjectContentStore.ts
index 13d35d18297..cb77c532021 100644
--- a/studio/stores/project/ProjectContentStore.ts
+++ b/studio/stores/project/ProjectContentStore.ts
@@ -178,9 +178,9 @@ export default class ProjectContentStore implements IProjectContentStore {
   }
 
   loadRecentLogSqlSnippets() {
-    if (typeof window === 'undefined') return
+    if (typeof window === 'undefined' || !window.localStorage) return
     this.recentLogSqlSnippets = JSON.parse(
-      (window as any).localStorage.getItem(this.recentLogSqlKey) || '[]'
+      window.localStorage.getItem(this.recentLogSqlKey) || '[]'
     )
   }
 

From 7510eeb0f04fd803a8c63e3a1edbadd598e56245 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 19 Dec 2022 14:30:09 +0700
Subject: [PATCH 043/215] Add guard in database/tables

---
 studio/pages/project/[ref]/database/tables.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/studio/pages/project/[ref]/database/tables.tsx b/studio/pages/project/[ref]/database/tables.tsx
index e7750e36de0..5bdec6ce3d8 100644
--- a/studio/pages/project/[ref]/database/tables.tsx
+++ b/studio/pages/project/[ref]/database/tables.tsx
@@ -63,6 +63,8 @@ const DatabaseTables: NextPageWithLayout = () => {
   }
 
   const onColumnUpdated = async () => {
+    if (selectedTable === undefined) return
+
     const updatedTable = await meta.tables.loadById(selectedTable.id)
     setSelectedTable(updatedTable)
   }

From f9756b1a8e442666219935fa6290ed5b8bd1fb89 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 19 Dec 2022 17:19:39 +0700
Subject: [PATCH 044/215] Update micro add on

---
 studio/components/interfaces/Billing/AddOns/AddOns.utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Billing/AddOns/AddOns.utils.ts b/studio/components/interfaces/Billing/AddOns/AddOns.utils.ts
index 093065f6d4c..6ecb12c6576 100644
--- a/studio/components/interfaces/Billing/AddOns/AddOns.utils.ts
+++ b/studio/components/interfaces/Billing/AddOns/AddOns.utils.ts
@@ -33,7 +33,7 @@ export const formatComputeSizes = (addons: SubscriptionAddon[]) => {
     metadata: {
       default_price_id: undefined,
       supabase_prod_id: 'addon_instance_micro',
-      features: '2 CPUs • 1GB memory • 2,085Mbps Disk IO',
+      features: '2-core ARM (shared) • 1GB memory • 2,085Mbps Disk IO',
     },
     prices: [
       {

From 5312b8bcc5d6d17ddafdd82fc1a8426296b59845 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 20 Dec 2022 11:49:57 +0700
Subject: [PATCH 045/215] Add docs to compute add ons and improve scroll width
 of add ons

---
 .../Billing/AddOns/ComputeSizeSelection.tsx   |  25 ++-
 .../interfaces/Billing/EnterpriseUpdate.tsx   |   9 +-
 .../interfaces/Billing/ProUpgrade.tsx         | 177 +++++++++---------
 3 files changed, 112 insertions(+), 99 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx b/studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx
index 1b5262cc216..080b518db15 100644
--- a/studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx
+++ b/studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import { Badge, Button, Radio } from 'ui'
+import { Badge, Button, IconExternalLink, Radio } from 'ui'
 
 import { useFlag, useParams } from 'hooks'
 import { getProductPrice } from '../Billing.utils'
@@ -25,14 +25,23 @@ const ComputeSizeSelection: FC<Props> = ({
 
   return (
     <div className="space-y-4">
-      <div>
-        <div className="flex items-center space-x-2">
-          <h4 className="text-lg">Database add-ons</h4>
-          <Badge color="green">Optional</Badge>
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center space-x-2">
+            <h4 className="text-lg">Compute add-ons</h4>
+            <Badge color="green">Optional</Badge>
+          </div>
+          <p className="text-sm text-scale-1100">
+            Choose the database instance size that best fits your needs
+          </p>
         </div>
-        <p className="text-sm text-scale-1100">
-          Choose the database instance size that best fits your needs
-        </p>
+        <Link href="https://supabase.com/docs/guides/platform/compute-add-ons">
+          <a target="_blank">
+            <Button type="default" icon={<IconExternalLink strokeWidth={1.5} />}>
+              About compute add-ons
+            </Button>
+          </a>
+        </Link>
       </div>
       {addonUpdateDisabled ? (
         <DisabledWarningDueToIncident title="Updating database add-ons is currently disabled" />
diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index 1755c1dc42e..bf98cd7e4aa 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -184,12 +184,15 @@ const EnterpriseUpdate: FC<Props> = ({
         enterTo="transform opacity-100 translate-x-0"
         className="flex w-full items-start justify-between"
       >
-        <div className="2xl:min-w-5xl mx-auto mt-10 px-32">
+        <div className="flex-grow mt-10">
           <div className="relative space-y-4">
             <div className="space-y-8">
-              <h4 className="text-scale-900 text-lg">Change your project's subscription</h4>
+              <div className="space-y-4 2xl:min-w-5xl mx-auto px-32">
+                <h4 className="text-lg text-scale-900 !mb-8">Change your project's subscription</h4>
+              </div>
+
               <div
-                className="space-y-8 overflow-scroll pb-8"
+                className="space-y-8 overflow-y-auto pb-8 2xl:min-w-5xl mx-auto px-32"
                 style={{ height: 'calc(100vh - 6.4rem - 57px)' }}
               >
                 <h3 className="text-xl">
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index 2a9f6134004..7fe2e78c578 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -201,100 +201,101 @@ const ProUpgrade: FC<Props> = ({
         enterTo="transform opacity-100 translate-x-0"
         className="flex w-full items-start justify-between"
       >
-        <div className="2xl:min-w-5xl mx-auto mt-10 px-32">
+        <div className="flex-grow mt-10">
           <div className="relative space-y-4">
-            <BackButton onClick={() => onSelectBack()} />
-            <div className="space-y-8">
-              <h4 className="text-lg text-scale-900">Change your project's subscription</h4>
-              <div
-                className="space-y-8 overflow-scroll pb-8"
-                style={{ height: 'calc(100vh - 9rem - 57px)' }}
-              >
-                <div className="space-y-2">
-                  {!isManagingProSubscription ? (
-                    <>
-                      <h3 className="text-xl">
-                        Welcome to <span className="text-brand-900">Pro</span>
-                      </h3>
-                      <p className="text-base text-scale-1100">
-                        Your new subscription will begin immediately after payment
-                      </p>
-                    </>
-                  ) : (
-                    <>
-                      <h3 className="text-3xl">
-                        Managing your <span className="text-brand-900">Pro</span> plan
-                      </h3>
-                      {/* <p className="text-base text-scale-1100">
+            <div className="space-y-4 2xl:min-w-5xl mx-auto px-32">
+              <BackButton onClick={() => onSelectBack()} />
+              <h4 className="text-lg text-scale-900 !mb-8">Change your project's subscription</h4>
+            </div>
+
+            <div
+              className="space-y-8 overflow-y-auto pb-8 2xl:min-w-5xl mx-auto px-32"
+              style={{ height: 'calc(100vh - 9rem - 57px)' }}
+            >
+              <div className="space-y-2">
+                {!isManagingProSubscription ? (
+                  <>
+                    <h3 className="text-xl">
+                      Welcome to <span className="text-brand-900">Pro</span>
+                    </h3>
+                    <p className="text-base text-scale-1100">
+                      Your new subscription will begin immediately after payment
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <h3 className="text-3xl">
+                      Managing your <span className="text-brand-900">Pro</span> plan
+                    </h3>
+                    {/* <p className="text-base text-scale-1100">
                         Your billing cycle will reset after payment
                       </p> */}
-                    </>
-                  )}
-                </div>
-                <div className="flex items-center justify-between gap-16 rounded border border-panel-border-light border-panel-border-dark bg-panel-body-light px-6 py-4 drop-shadow-sm dark:bg-panel-body-dark">
-                  <div>
-                    <div className="flex items-center space-x-2">
-                      <p>Enable spend cap</p>
-                      <IconHelpCircle
-                        size={16}
-                        strokeWidth={1.5}
-                        className="cursor-pointer opacity-50 transition hover:opacity-100"
-                        onClick={() => setShowSpendCapHelperModal(true)}
-                      />
-                    </div>
-                    <p className="text-sm text-scale-1100">
-                      If enabled, additional resources will not be charged on a per-usage basis
-                    </p>
-                  </div>
-                  <Toggle
-                    checked={isSpendCapEnabled}
-                    onChange={() => setIsSpendCapEnabled(!isSpendCapEnabled)}
-                  />
-                </div>
-                {projectRegion !== 'af-south-1' && (
-                  <>
-                    {currentAddons.supportPlan !== undefined && (
-                      <>
-                        <Divider light />
-                        <SupportPlan currentOption={currentAddons.supportPlan} />
-                      </>
-                    )}
-                    {isCustomDomainsEnabled && customDomainOptions.length > 0 && (
-                      <>
-                        <Divider light />
-                        <CustomDomainSelection
-                          options={customDomainOptions}
-                          currentOption={
-                            isManagingProSubscription ? currentAddons.customDomains : undefined
-                          }
-                          selectedOption={selectedAddons.customDomains}
-                          onSelectOption={setSelectedCustomDomainOption}
-                        />
-                      </>
-                    )}
-                    {isPITRSelfServeEnabled && pitrDurationOptions.length > 0 && (
-                      <>
-                        <Divider light />
-                        <PITRDurationSelection
-                          pitrDurationOptions={pitrDurationOptions}
-                          currentPitrDuration={
-                            isManagingProSubscription ? currentAddons.pitrDuration : undefined
-                          }
-                          selectedPitrDuration={selectedAddons.pitrDuration}
-                          onSelectOption={setSelectedPITRDuration}
-                        />
-                      </>
-                    )}
-                    <Divider light />
-                    <ComputeSizeSelection
-                      computeSizes={computeSizes || []}
-                      currentComputeSize={currentAddons.computeSize}
-                      selectedComputeSize={selectedAddons.computeSize}
-                      onSelectOption={setSelectedComputeSize}
-                    />
                   </>
                 )}
               </div>
+              <div className="flex items-center justify-between gap-16 rounded border border-panel-border-light border-panel-border-dark bg-panel-body-light px-6 py-4 drop-shadow-sm dark:bg-panel-body-dark">
+                <div>
+                  <div className="flex items-center space-x-2">
+                    <p>Enable spend cap</p>
+                    <IconHelpCircle
+                      size={16}
+                      strokeWidth={1.5}
+                      className="cursor-pointer opacity-50 transition hover:opacity-100"
+                      onClick={() => setShowSpendCapHelperModal(true)}
+                    />
+                  </div>
+                  <p className="text-sm text-scale-1100">
+                    If enabled, additional resources will not be charged on a per-usage basis
+                  </p>
+                </div>
+                <Toggle
+                  checked={isSpendCapEnabled}
+                  onChange={() => setIsSpendCapEnabled(!isSpendCapEnabled)}
+                />
+              </div>
+              {projectRegion !== 'af-south-1' && (
+                <>
+                  {currentAddons.supportPlan !== undefined && (
+                    <>
+                      <Divider light />
+                      <SupportPlan currentOption={currentAddons.supportPlan} />
+                    </>
+                  )}
+                  {isCustomDomainsEnabled && customDomainOptions.length > 0 && (
+                    <>
+                      <Divider light />
+                      <CustomDomainSelection
+                        options={customDomainOptions}
+                        currentOption={
+                          isManagingProSubscription ? currentAddons.customDomains : undefined
+                        }
+                        selectedOption={selectedAddons.customDomains}
+                        onSelectOption={setSelectedCustomDomainOption}
+                      />
+                    </>
+                  )}
+                  {isPITRSelfServeEnabled && pitrDurationOptions.length > 0 && (
+                    <>
+                      <Divider light />
+                      <PITRDurationSelection
+                        pitrDurationOptions={pitrDurationOptions}
+                        currentPitrDuration={
+                          isManagingProSubscription ? currentAddons.pitrDuration : undefined
+                        }
+                        selectedPitrDuration={selectedAddons.pitrDuration}
+                        onSelectOption={setSelectedPITRDuration}
+                      />
+                    </>
+                  )}
+                  <Divider light />
+                  <ComputeSizeSelection
+                    computeSizes={computeSizes || []}
+                    currentComputeSize={currentAddons.computeSize}
+                    selectedComputeSize={selectedAddons.computeSize}
+                    onSelectOption={setSelectedComputeSize}
+                  />
+                </>
+              )}
             </div>
           </div>
         </div>

From 9a2f6c534faaae4772bd2ec6aef48088dc22dd90 Mon Sep 17 00:00:00 2001
From: Inian <inian1234@gmail.com>
Date: Thu, 15 Dec 2022 17:24:19 +0800
Subject: [PATCH 046/215] chore: get secrets from secrets manager

---
 package-lock.json              | 229 +++++++++++++++++++++++++++++++++
 studio/internals/getSecrets.js |  35 +++++
 studio/package.json            |   2 +
 3 files changed, 266 insertions(+)
 create mode 100644 studio/internals/getSecrets.js

diff --git a/package-lock.json b/package-lock.json
index f0df444fb07..5f6dcf98766 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11822,6 +11822,80 @@
         "npm": ">=5"
       }
     },
+    "node_modules/aws-sdk": {
+      "version": "2.1275.0",
+      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1275.0.tgz",
+      "integrity": "sha512-GP7oS0BTh012pAMnNSVVQQrhfubeLH2moLUQQiuk9cPrqQYeP74BU3nnALM30CoFNzX+DwLanOeFU+KMfUGLHg==",
+      "dev": true,
+      "dependencies": {
+        "buffer": "4.9.2",
+        "events": "1.1.1",
+        "ieee754": "1.1.13",
+        "jmespath": "0.16.0",
+        "querystring": "0.2.0",
+        "sax": "1.2.1",
+        "url": "0.10.3",
+        "util": "^0.12.4",
+        "uuid": "8.0.0",
+        "xml2js": "0.4.19"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/aws-sdk/node_modules/events": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "integrity": "sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/aws-sdk/node_modules/ieee754": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
+      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
+      "dev": true
+    },
+    "node_modules/aws-sdk/node_modules/punycode": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
+      "dev": true
+    },
+    "node_modules/aws-sdk/node_modules/url": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
+      "integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      }
+    },
+    "node_modules/aws-sdk/node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
+    "node_modules/aws-sdk/node_modules/uuid": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz",
+      "integrity": "sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/axe-core": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz",
@@ -20160,6 +20234,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -22379,6 +22468,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jmespath": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
+      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/join-component": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/join-component/-/join-component-1.1.0.tgz",
@@ -32401,6 +32499,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/sax": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
+      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
+      "dev": true
+    },
     "node_modules/saxes": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -36895,6 +36999,25 @@
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
       "dev": true
     },
+    "node_modules/xml2js": {
+      "version": "0.4.19",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
+      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
+      "dev": true,
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~9.0.1"
+      }
+    },
+    "node_modules/xmlbuilder": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+      "integrity": "sha512-7YXTQc3P2l9+0rjaUbLwMKRhtmwg1M1eDf6nag7urC7pIPYLD9W/jmzQ4ptRSUbodw5S0jfoGTflLemQibSpeQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
@@ -37522,6 +37645,7 @@
         "@types/uuid": "^8.3.4",
         "@types/zxcvbn": "^4.4.1",
         "autoprefixer": "10.4.2",
+        "aws-sdk": "^2.1275.0",
         "babel-loader": "^8.2.3",
         "common": "*",
         "config": "*",
@@ -46055,6 +46179,73 @@
         "awesome-imperative-promise": "^1.0.1"
       }
     },
+    "aws-sdk": {
+      "version": "2.1275.0",
+      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1275.0.tgz",
+      "integrity": "sha512-GP7oS0BTh012pAMnNSVVQQrhfubeLH2moLUQQiuk9cPrqQYeP74BU3nnALM30CoFNzX+DwLanOeFU+KMfUGLHg==",
+      "dev": true,
+      "requires": {
+        "buffer": "4.9.2",
+        "events": "1.1.1",
+        "ieee754": "1.1.13",
+        "jmespath": "0.16.0",
+        "querystring": "0.2.0",
+        "sax": "1.2.1",
+        "url": "0.10.3",
+        "util": "^0.12.4",
+        "uuid": "8.0.0",
+        "xml2js": "0.4.19"
+      },
+      "dependencies": {
+        "events": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+          "integrity": "sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==",
+          "dev": true
+        },
+        "ieee754": {
+          "version": "1.1.13",
+          "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
+          "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
+          "dev": true
+        },
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
+          "dev": true
+        },
+        "url": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
+          "integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
+          "dev": true,
+          "requires": {
+            "punycode": "1.3.2",
+            "querystring": "0.2.0"
+          }
+        },
+        "util": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+          "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "is-arguments": "^1.0.4",
+            "is-generator-function": "^1.0.7",
+            "is-typed-array": "^1.1.3",
+            "which-typed-array": "^1.1.2"
+          }
+        },
+        "uuid": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz",
+          "integrity": "sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==",
+          "dev": true
+        }
+      }
+    },
     "axe-core": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz",
@@ -53030,6 +53221,15 @@
       "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
       "dev": true
     },
+    "is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -54820,6 +55020,12 @@
         }
       }
     },
+    "jmespath": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
+      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
+      "dev": true
+    },
     "join-component": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/join-component/-/join-component-1.1.0.tgz",
@@ -62150,6 +62356,12 @@
         "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
+    "sax": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
+      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
+      "dev": true
+    },
     "saxes": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -63095,6 +63307,7 @@
         "analytics-node": "^3.5.0",
         "autoprefixer": "10.4.2",
         "awesome-debounce-promise": "^2.1.0",
+        "aws-sdk": "^2.1275.0",
         "babel-loader": "^8.2.3",
         "blueimp-md5": "^2.19.0",
         "clipboard": "^2.0.8",
@@ -66375,6 +66588,22 @@
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
       "dev": true
     },
+    "xml2js": {
+      "version": "0.4.19",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
+      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
+      "dev": true,
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~9.0.1"
+      }
+    },
+    "xmlbuilder": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+      "integrity": "sha512-7YXTQc3P2l9+0rjaUbLwMKRhtmwg1M1eDf6nag7urC7pIPYLD9W/jmzQ4ptRSUbodw5S0jfoGTflLemQibSpeQ==",
+      "dev": true
+    },
     "xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
diff --git a/studio/internals/getSecrets.js b/studio/internals/getSecrets.js
new file mode 100644
index 00000000000..11eeb892f5c
--- /dev/null
+++ b/studio/internals/getSecrets.js
@@ -0,0 +1,35 @@
+// for internal supabase use only
+const fs = require('fs/promises')
+const AWS = require('aws-sdk')
+
+const secretName = 'local/studio'
+const region = 'ap-southeast-2'
+
+const getSecrets = async (name, region) => {
+  try {
+    AWS.config.update({ region })
+    const secretsmanager = new AWS.SecretsManager()
+
+    const data = await secretsmanager
+      .getSecretValue({
+        SecretId: name,
+      })
+      .promise()
+
+    if (!data.SecretString) {
+      throw new Error('Secrets not found')
+    }
+    return JSON.parse(data.SecretString)
+  } catch (err) {
+    console.log('Error getting secrets', err)
+  }
+}
+
+// gets secrets from secrets manager and writes it to .env.local file
+getSecrets(secretName, region).then(async (secrets) => {
+  let secretContent = ''
+  for (const [secretKey, secretValue] of Object.entries(secrets)) {
+    secretContent += `${secretKey}=${secretValue}\n`
+  }
+  await fs.writeFile('.env.local', secretContent.trim())
+})
diff --git a/studio/package.json b/studio/package.json
index 959d303802f..bf108ae4eda 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 8082",
+    "dev:secrets:pull": "AWS_PROFILE=supabase-dev node internals/getSecrets.js",
     "build": "next build",
     "start": "next start",
     "test": "jest",
@@ -126,6 +127,7 @@
     "@types/uuid": "^8.3.4",
     "@types/zxcvbn": "^4.4.1",
     "autoprefixer": "10.4.2",
+    "aws-sdk": "^2.1275.0",
     "babel-loader": "^8.2.3",
     "common": "*",
     "config": "*",

From 16c604621d8afdb5b9cccf4f42df5677759bed6c Mon Sep 17 00:00:00 2001
From: Inian <inian1234@gmail.com>
Date: Thu, 15 Dec 2022 17:51:55 +0800
Subject: [PATCH 047/215] escape secrets

---
 studio/internals/getSecrets.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/internals/getSecrets.js b/studio/internals/getSecrets.js
index 11eeb892f5c..9f1e4524f77 100644
--- a/studio/internals/getSecrets.js
+++ b/studio/internals/getSecrets.js
@@ -29,7 +29,7 @@ const getSecrets = async (name, region) => {
 getSecrets(secretName, region).then(async (secrets) => {
   let secretContent = ''
   for (const [secretKey, secretValue] of Object.entries(secrets)) {
-    secretContent += `${secretKey}=${secretValue}\n`
+    secretContent += `${secretKey}="${secretValue}"\n`
   }
   await fs.writeFile('.env.local', secretContent.trim())
 })

From 4efbfc57daac11fab0192517b1c013a03e1b9c1e Mon Sep 17 00:00:00 2001
From: Inian <inian1234@gmail.com>
Date: Thu, 15 Dec 2022 18:27:54 +0800
Subject: [PATCH 048/215] Update README.md

---
 studio/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/studio/README.md b/studio/README.md
index 7dd002c04c3..4b9929f4a48 100644
--- a/studio/README.md
+++ b/studio/README.md
@@ -38,6 +38,7 @@ Project settings are managed outside of the Dashboard. If you use docker-compose
 # in /studio
 
 npm i # install dependencies
+npm run dev:secrets:pull # Supabase internal use: if you are working on the platform version of the Studio
 npm run dev # start dev server
 npm run test # run tests
 npm run -- --watch # run tests in watch mode

From c6cd65991dc626c7d1848bc64abc088a5c13255b Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 15:28:22 +0800
Subject: [PATCH 049/215] memo some components

---
 .../NavigationMenuGuideList.tsx               |   2 +-
 .../NavigationMenuGuideListItems.tsx          | 268 ++++++++++--------
 2 files changed, 151 insertions(+), 119 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 2800ff25557..b0a5a9c78e1 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -37,4 +37,4 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, active }) => {
   )
 }
 
-export default React.memo(NavigationMenuGuideList)
+export default NavigationMenuGuideList
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index ebcc68d1a75..ffea5c51f8b 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -7,15 +7,155 @@ import { IconChevronLeft } from '~/../../packages/ui'
 import * as NavItems from './NavigationMenu.constants'
 import * as Accordion from '@radix-ui/react-accordion'
 
-const Content = ({ id }) => {
+interface ImPureProps {
+  // users: Array<User>
+}
+
+const HeaderImage = React.memo(function HeaderImage(props: any) {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
+  return (
+    <Image
+      alt={props.icon}
+      width={15}
+      height={15}
+      src={`${router.basePath}` + `/img/icons/menu/${props.icon}${isDarkMode ? '' : '-light'}.svg`}
+    />
+  )
+})
+
+const HeaderLink = React.memo(function HeaderLink(props: any) {
+  const router = useRouter()
+
+  return (
+    <span
+      className={[
+        ' ',
+        !props.title && 'capitalize',
+        props.url === router.pathname ? 'text-brand-900' : 'hover:text-brand-900 text-scale-1200',
+      ].join(' ')}
+    >
+      {props.title ?? props.id}
+    </span>
+  )
+})
+
+const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) {
+  const router = useRouter()
+  const { isDarkMode } = useTheme()
+
+  let subItemMenuOpen = false
+
+  if (router.asPath.includes(props.subItem.url)) {
+    subItemMenuOpen = true
+  }
+
+  const LinkContainer = (props) => {
+    return (
+      <Link href={props.url} passHref>
+        <a className={props.className}>{props.children}</a>
+      </Link>
+    )
+  }
+
+  return (
+    <>
+      {props.subItemIndex === 0 && (
+        <>
+          <div className="h-px w-full bg-green-500 my-3"></div>
+          <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
+            {props.parent.name}
+          </span>
+        </>
+      )}
+      <Accordion.Item key={props.subItem.label} value={props.subItem.url}>
+        <li key={props.subItem.name}>
+          <LinkContainer
+            url={props.subItem.url}
+            className={[
+              'flex items-center gap-2',
+              'cursor-pointer transition text-sm',
+              props.subItem.url === router.pathname
+                ? 'text-brand-900'
+                : 'hover:text-brand-900 text-scale-1000',
+            ].join(' ')}
+            parent={props.subItem.parent}
+          >
+            {props.subItem.icon && (
+              <Image
+                alt={props.subItem.name + router.basePath}
+                src={
+                  `${router.basePath}` + `${props.subItem.icon}${!isDarkMode ? '-light' : ''}.svg`
+                }
+                width={15}
+                height={15}
+              />
+            )}
+            {props.subItem.name}
+          </LinkContainer>
+        </li>
+
+        {props.subItem.items && props.subItem.items.length > 0 && (
+          <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2">
+            {props.subItem.items.map((subSubItem) => {
+              return (
+                <li key={props.subItem.name}>
+                  <Link href={`${subSubItem.url}`} passHref>
+                    <a
+                      className={[
+                        'cursor-pointer transition text-sm',
+                        subSubItem.url === router.pathname
+                          ? 'text-brand-900'
+                          : 'hover:text-brand-900 text-scale-1000',
+                      ].join(' ')}
+                    >
+                      {subSubItem.name}
+                    </a>
+                  </Link>
+                </li>
+              )
+            })}
+          </Accordion.Content>
+        )}
+      </Accordion.Item>
+    </>
+  )
+})
+
+const ContentLink = React.memo(function ContentLink(props: any) {
+  const router = useRouter()
+
+  return (
+    <li>
+      <Link href={`${props.url}`} passHref>
+        <a
+          className={[
+            'cursor-pointer transition text-sm',
+            props.url === router.pathname
+              ? 'text-brand-900'
+              : 'hover:text-brand-900 text-scale-1000',
+          ].join(' ')}
+        >
+          {props.icon && <img className="w-3" src={`${router.basePath}${props.icon}`} />}
+          {props.name}
+        </a>
+      </Link>
+    </li>
+  )
+})
+
+const Content = (props) => {
+  console.log(props.id, props)
+  const { id } = props
+
   const menu = NavItems[id]
 
   return (
     <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
-      {console.log(id && 'GUIDE MENU id changed')}
+      {/* // */}
+      {console.log(id && `GUIDE MENU ${id} changed`)}
+      {/* // */}
       <Link href={`${menu.parent ?? '/'}`} passHref>
         <a
           className={[
@@ -35,27 +175,8 @@ const Content = ({ id }) => {
       <Link href={menu.url ?? ''} passHref>
         <a>
           <div className="flex items-center gap-3 my-3">
-            <Image
-              alt={menu.icon}
-              width={15}
-              height={15}
-              src={
-                `${router.basePath}` +
-                `/img/icons/menu/${menu.icon}${isDarkMode ? '' : '-light'}.svg`
-              }
-            />
-            {/* </div> */}
-            <span
-              className={[
-                ' ',
-                !menu.title && 'capitalize',
-                menu.url === router.pathname
-                  ? 'text-brand-900'
-                  : 'hover:text-brand-900 text-scale-1200',
-              ].join(' ')}
-            >
-              {menu.title ?? id}
-            </span>
+            <HeaderImage icon={menu.icon} />
+            <HeaderLink title={menu.title} url={menu.url} id={id} />
           </div>
         </a>
       </Link>
@@ -68,106 +189,17 @@ const Content = ({ id }) => {
             {x.items && x.items.length > 0 ? (
               <div>
                 {x.items.map((subItem, subItemIndex) => {
-                  // console.log('subitem', { subItem })
-                  // console.log('router', router)
-                  //console.log('subitem url', subItem.url)
-                  let subItemMenuOpen = false
-
-                  if (router.asPath.includes(subItem.url)) {
-                    subItemMenuOpen = true
-                  }
-
-                  const LinkContainer = (props) => {
-                    return (
-                      <Link href={props.url} passHref>
-                        <a className={props.className}>{props.children}</a>
-                      </Link>
-                    )
-                  }
-
                   return (
-                    <>
-                      {subItemIndex === 0 && (
-                        <>
-                          <div className="h-px w-full bg-green-500 my-3"></div>
-                          <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
-                            {x.name}
-                          </span>
-                        </>
-                      )}
-                      <Accordion.Item key={subItem.label} value={subItem.url}>
-                        <li key={subItem.name}>
-                          <LinkContainer
-                            url={subItem.url}
-                            className={[
-                              'flex items-center gap-2',
-                              'cursor-pointer transition text-sm',
-                              subItem.url === router.pathname
-                                ? 'text-brand-900'
-                                : 'hover:text-brand-900 text-scale-1000',
-                            ].join(' ')}
-                            parent={subItem.parent}
-                          >
-                            {subItem.icon && (
-                              <Image
-                                alt={subItem.name + router.basePath}
-                                src={
-                                  `${router.basePath}` +
-                                  `${subItem.icon}${!isDarkMode ? '-light' : ''}.svg`
-                                }
-                                width={15}
-                                height={15}
-                              />
-                            )}
-                            {subItem.name}
-                          </LinkContainer>
-                        </li>
-
-                        {subItem.items && subItem.items.length > 0 && (
-                          <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2">
-                            {subItem.items.map((subSubItem, subSubItemIndex) => {
-                              return (
-                                <li key={subItem.name}>
-                                  <Link href={`${subSubItem.url}`} passHref>
-                                    <a
-                                      className={[
-                                        'cursor-pointer transition text-sm',
-                                        subSubItem.url === router.pathname
-                                          ? 'text-brand-900'
-                                          : 'hover:text-brand-900 text-scale-1000',
-                                      ].join(' ')}
-                                    >
-                                      {subSubItem.name}
-                                    </a>
-                                  </Link>
-                                </li>
-                              )
-                            })}
-                          </Accordion.Content>
-                        )}
-                      </Accordion.Item>
-                    </>
+                    <ContentAccordionLink
+                      subItem={subItem}
+                      subItemIndex={subItemIndex}
+                      parent={x}
+                    />
                   )
                 })}
               </div>
             ) : (
-              <>
-                <li>
-                  <Link href={`${x.url}`} passHref>
-                    <a
-                      className={[
-                        'cursor-pointer transition text-sm',
-                        x.url === router.pathname
-                          ? 'text-brand-900'
-                          : 'hover:text-brand-900 text-scale-1000',
-                      ].join(' ')}
-                    >
-                      {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
-                      {x.name}
-                    </a>
-                  </Link>
-                </li>
-              </>
+              <ContentLink url={x.url} icon={x.icon} name={x.name} />
             )}
           </div>
         )

From 6149f13c78a756dd48fb1f0ddc0ff0fb66e58513 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 15:31:58 +0800
Subject: [PATCH 050/215] more memo

---
 .../NavigationMenu/NavigationMenu.tsx         | 16 ++++----
 .../NavigationMenu/NavigationMenuRefList.tsx  |  5 ---
 .../NavigationMenuRefListItems.tsx            | 40 ++++++++++++-------
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index ff6adccfad5..fdf9206aaaf 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -195,14 +195,14 @@ const SideNav = () => {
       <NavigationMenuGuideList id={'integrations'} active={isIntegrationsActive} />
       <NavigationMenuGuideList id={'reference'} active={isReferenceActive} />
       {/* // Client Libs */}
-      {/* <NavigationMenuRefList
+      <NavigationMenuRefList
         key={'reference-js-menu'}
         id={'reference_javascript_v1'}
         active={isReference_Javascript_V1}
         commonSections={libCommonSections}
         lib="javascript"
         spec={spec_js_v1}
-      /> */}
+      />
       <NavigationMenuRefList
         key={'reference-js-menu'}
         id={'reference_javascript_v2'}
@@ -211,7 +211,7 @@ const SideNav = () => {
         lib="javascript"
         spec={spec_js_v2}
       />
-      {/* <NavigationMenuRefList
+      <NavigationMenuRefList
         key={'reference-dart-menu'}
         id={'reference_dart_v0'}
         active={isReference_Dart_V0}
@@ -226,9 +226,9 @@ const SideNav = () => {
         commonSections={libCommonSections}
         lib="dart"
         spec={spec_dart_v1}
-      /> */}
+      />
       {/* // Tools */}
-      {/* <NavigationMenuRefList
+      <NavigationMenuRefList
         key={'reference-cli-menu'}
         id={'reference_cli'}
         active={isReference_Cli}
@@ -241,9 +241,9 @@ const SideNav = () => {
         active={isReference_Api}
         commonSections={apiCommonSections}
         lib="api"
-      /> */}
+      />
       {/* // Self Hosting Server */}
-      {/* <NavigationMenuRefList
+      <NavigationMenuRefList
         key={'reference-self-hosting-auth-menu'}
         id={'reference_self_hosting_auth'}
         active={isReference_Self_Hosting_Auth}
@@ -263,7 +263,7 @@ const SideNav = () => {
         active={isReference_Self_Hosting_Realtime}
         commonSections={realtimeServerCommonSections}
         lib="self-hosting-auth"
-      /> */}
+      />
     </div>
   )
 }
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index fe594465a2d..206a50d2230 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -25,11 +25,6 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
   active,
   spec,
 }) => {
-  // console.log(filterIds)
-  // console.log(modifierIds)
-
-  // const level = useMenuLevelId()
-
   return (
     <div
       className={[
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index 071af515bf6..e7a92db08a8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -15,6 +15,30 @@ import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
 import React from 'react'
 import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers'
 
+const HeaderImage = React.memo(function HeaderImage(props: any) {
+  const router = useRouter()
+  const { isDarkMode } = useTheme()
+
+  return (
+    <Image
+      alt={props.icon}
+      width={15}
+      height={15}
+      src={`${router.basePath}` + `/img/icons/menu/${props.icon}${isDarkMode ? '' : '-light'}.svg`}
+    />
+  )
+})
+
+const HeaderLink = React.memo(function HeaderLink(props: any) {
+  const router = useRouter()
+
+  return (
+    <span className={['text-base text-brand-1200 ', !props.title && 'capitalize'].join(' ')}>
+      {props.title ?? props.id}
+    </span>
+  )
+})
+
 const FunctionLink = ({
   title,
   id,
@@ -85,9 +109,6 @@ interface INavigationMenuRefList {
 }
 
 const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, spec }) => {
-  const router = useRouter()
-  const { isDarkMode } = useTheme()
-
   const allowedClientKeys = spec ? generateAllowedClientLibKeys(commonSections, spec) : undefined
 
   console.log(
@@ -168,19 +189,10 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
       </Link>
 
       <div className="flex items-center gap-3 my-3">
-        <Image
-          alt={id}
-          width={24}
-          height={24}
-          src={`${router.basePath}/img/icons/menu/${menu.icon}${isDarkMode ? '' : '-light'}.svg`}
-          className="rounded"
-        />
-        <span className={['text-base text-brand-1200 ', !menu.title && 'capitalize'].join(' ')}>
-          {menu.title}
-        </span>
+        <HeaderImage icon={menu.icon} />
+        <HeaderLink title={menu.title} url={menu.url} id={id} />
         <RevVersionDropdown />
       </div>
-      {/* )} */}
 
       <ul className="function-link-list">
         {sections.map((fn: any, fnIndex) => {

From 04710ace212f16b28ea46e3be8b9159f504c296a Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 15:32:33 +0800
Subject: [PATCH 051/215] Update NavigationMenuGuideListItems.tsx

---
 .../Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index ffea5c51f8b..6481d5e5e61 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -146,7 +146,6 @@ const ContentLink = React.memo(function ContentLink(props: any) {
 })
 
 const Content = (props) => {
-  console.log(props.id, props)
   const { id } = props
 
   const menu = NavItems[id]

From 351a337081c70256517ebfcf409633f6b9bd67da Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 15:33:46 +0800
Subject: [PATCH 052/215] remove extras list

---
 .../NavigationMenu/NavigationMenuCliList.tsx  | 22 ---------------
 .../NavigationMenuGuideListItems.tsx          | 27 -------------------
 2 files changed, 49 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
index 782544c57cd..e4a7eb5c8f7 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
@@ -140,28 +140,6 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
 
           <Divider />
         </ul>
-        {menu.extras && (
-          <>
-            <Divider />{' '}
-            <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider mb-2">
-              Resources
-            </span>
-          </>
-        )}
-        {menu.extras?.map((x) => {
-          return (
-            <div key={x.name}>
-              <li>
-                <Link href={`${x.href}`} passHref>
-                  <a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">
-                    {x.icon && <img className="w-4" src={`${router.basePath}${x.icon}`} />}
-                    {x.name}
-                  </a>
-                </Link>
-              </li>
-            </div>
-          )
-        })}
       </div>
     </div>
   )
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index 6481d5e5e61..f298683984d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -152,9 +152,6 @@ const Content = (props) => {
 
   return (
     <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
-      {/* // */}
-      {console.log(id && `GUIDE MENU ${id} changed`)}
-      {/* // */}
       <Link href={`${menu.parent ?? '/'}`} passHref>
         <a
           className={[
@@ -181,8 +178,6 @@ const Content = (props) => {
       </Link>
 
       {menu.items.map((x, index) => {
-        // console.log('1st type of link?', x.items && x.items.length > 0)
-        // console.log()
         return (
           <div key={x.url}>
             {x.items && x.items.length > 0 ? (
@@ -203,28 +198,6 @@ const Content = (props) => {
           </div>
         )
       })}
-      {menu.extras && (
-        <>
-          <div className="h-px w-full bg-green-500 my-3"></div>
-          <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider mb-2">
-            Resources
-          </span>
-        </>
-      )}
-      {menu.extras?.map((x) => {
-        return (
-          <div key={x.name}>
-            <li>
-              <Link href={`${x.href}`} passHref>
-                <a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">
-                  {x.icon && <img className="w-4" src={`${router.basePath}${x.icon}`} />}
-                  {x.name}
-                </a>
-              </Link>
-            </li>
-          </div>
-        )
-      })}
     </ul>
   )
 }

From 59d93e958484c1a0af0efba97259f9fd58e16890 Mon Sep 17 00:00:00 2001
From: Kang Ming <kang.ming1996@gmail.com>
Date: Fri, 16 Dec 2022 18:54:55 -0800
Subject: [PATCH 053/215] fix: add rate_limit_sms_sent config

---
 studio/components/interfaces/Auth/Auth.types.ts     |  1 +
 studio/pages/api/auth/[ref]/config.ts               |  1 +
 .../AuthProviders/AuthProvidersFormValidation.tsx   | 13 +++++++++++++
 studio/stores/jsonSchema/auth_gotrue_config.json    |  8 ++++++++
 4 files changed, 23 insertions(+)

diff --git a/studio/components/interfaces/Auth/Auth.types.ts b/studio/components/interfaces/Auth/Auth.types.ts
index 9837f672b7e..aebf5e91076 100644
--- a/studio/components/interfaces/Auth/Auth.types.ts
+++ b/studio/components/interfaces/Auth/Auth.types.ts
@@ -111,6 +111,7 @@ export interface AuthConfig {
   OPERATOR_TOKEN: string | null
   PASSWORD_MIN_LENGTH: number
   RATE_LIMIT_EMAIL_SENT: number
+  RATE_LIMIT_SMS_SENT: number
   RATE_LIMIT_HEADER: string | null
   RATE_LIMIT_TOKEN_REFRESH: number
   RATE_LIMIT_VERIFY: number
diff --git a/studio/pages/api/auth/[ref]/config.ts b/studio/pages/api/auth/[ref]/config.ts
index 540bc005430..d7f62b2de4d 100644
--- a/studio/pages/api/auth/[ref]/config.ts
+++ b/studio/pages/api/auth/[ref]/config.ts
@@ -140,6 +140,7 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => {
     SECURITY_CAPTCHA_SECRET: null,
     SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: '10',
     RATE_LIMIT_EMAIL_SENT: 0,
+    RATE_LIMIT_SMS_SENT: 0,
     MAILER_SECURE_EMAIL_CHANGE_ENABLED: true,
     SMS_MESSAGEBIRD_ACCESS_KEY: null,
     SMS_MESSAGEBIRD_ORIGINATOR: null,
diff --git a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
index d1a2a1cccbf..aa06d1771c3 100644
--- a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
+++ b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
@@ -73,6 +73,11 @@ const PROVIDER_PHONE = {
         { label: 'Vonage', value: 'vonage', icon: 'vonage-icon.svg' },
       ],
     },
+    RATE_LIMIT_SMS_SENT: {
+      type: 'number',
+      title: 'Rate limit for sending SMS messages',
+      description: 'How many SMS messages can be sent per hour',
+    },
 
     // Twilio
     SMS_TWILIO_ACCOUNT_SID: {
@@ -1342,6 +1347,14 @@ export const OLD = {
       maximum: 32767,
       multipleof: 1,
     },
+    RATE_LIMIT_SMS_SENT: {
+      title: 'Rate limit',
+      type: 'number',
+      help: 'Maximum number of SMS-es sent per hour (Default: 30, Max: 32,767)',
+      minimum: 1,
+      maximum: 32767,
+      multipleof: 1,
+    },
     MAILER_SECURE_EMAIL_CHANGE_ENABLED: {
       title: 'Double confirm email changes',
       type: 'boolean',
diff --git a/studio/stores/jsonSchema/auth_gotrue_config.json b/studio/stores/jsonSchema/auth_gotrue_config.json
index 09e5bb3d4ed..a0d00a3deb2 100644
--- a/studio/stores/jsonSchema/auth_gotrue_config.json
+++ b/studio/stores/jsonSchema/auth_gotrue_config.json
@@ -348,6 +348,14 @@
       "maximum": 32767,
       "multipleof": 1
     },
+    "RATE_LIMIT_SMS_SENT": {
+      "title": "Rate limit",
+      "type": "number",
+      "help": "Maximum number of SMS messages sent per hour (Default: 30, Max: 32,767)",
+      "minimum": 1,
+      "maximum": 32767,
+      "multipleof": 1
+    },
     "MAILER_SECURE_EMAIL_CHANGE_ENABLED": {
       "title": "Double confirm email changes",
       "type": "boolean",

From 07921918fc7af474a4644e88ba62eb47eedae80e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 20 Dec 2022 08:12:27 +0000
Subject: [PATCH 054/215] chore(deps): bump undici and miniflare

Bumps [undici](https://github.com/nodejs/undici) and [miniflare](https://github.com/cloudflare/miniflare/tree/HEAD/packages/miniflare). These dependencies needed to be updated together.

Updates `undici` from 5.5.1 to 5.9.1
- [Release notes](https://github.com/nodejs/undici/releases)
- [Commits](https://github.com/nodejs/undici/compare/v5.5.1...v5.9.1)

Updates `miniflare` from 2.5.1 to 2.11.0
- [Release notes](https://github.com/cloudflare/miniflare/releases)
- [Changelog](https://github.com/cloudflare/miniflare/blob/master/docs/CHANGELOG.md)
- [Commits](https://github.com/cloudflare/miniflare/commits/v2.11.0/packages/miniflare)

---
updated-dependencies:
- dependency-name: undici
  dependency-type: indirect
- dependency-name: miniflare
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .../package-lock.json                         | 1049 +++++++++++++----
 1 file changed, 812 insertions(+), 237 deletions(-)

diff --git a/examples/caching/with-cloudflare-workers-kv/package-lock.json b/examples/caching/with-cloudflare-workers-kv/package-lock.json
index f4c473270b7..a38f4405af4 100644
--- a/examples/caching/with-cloudflare-workers-kv/package-lock.json
+++ b/examples/caching/with-cloudflare-workers-kv/package-lock.json
@@ -54,217 +54,258 @@
       "dev": true
     },
     "node_modules/@miniflare/cache": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/cache/-/cache-2.5.1.tgz",
-      "integrity": "sha512-qH5PC4zb7mHdQHlcaOuP0KUXuRbNSuB/HU7gpoeplV8J6CgNJGceVmQCZVZLycgDKZtAlhyGE1gkpJmeW7GCyw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/cache/-/cache-2.11.0.tgz",
+      "integrity": "sha512-L/kc9AzidPwFuk2fwHpAEePi0kNBk6FWUq3ln+9beRCDrPEpfVrDRFpNleF1NFZz5//oeVMuo8F0IVUQGzR7+Q==",
       "dev": true,
       "dependencies": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
         "http-cache-semantics": "^4.1.0",
-        "undici": "5.5.1"
+        "undici": "5.9.1"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/cli-parser": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/cli-parser/-/cli-parser-2.5.1.tgz",
-      "integrity": "sha512-itlMDe9jwO806mkNkg3G70QYoG9YQHW6V10AF9L5b8J4LYt/V78uCEJSwNnCpL7zfKrScRPtDfXZxhrFzMXiUw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/cli-parser/-/cli-parser-2.11.0.tgz",
+      "integrity": "sha512-JUmyRzEGAS6CouvXJwBh8p44onfw3KRpfq5JGXEuHModOGjTp6li7PQyCTNPV2Hv/7StAXWnTFGXeAqyDHuTig==",
       "dev": true,
       "dependencies": {
-        "@miniflare/shared": "2.5.1",
+        "@miniflare/shared": "2.11.0",
         "kleur": "^4.1.4"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/core": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/core/-/core-2.5.1.tgz",
-      "integrity": "sha512-0oEBLV5AM3xxs6TS+7/fn4MSGNBfhUFVv41R8uc72H1a89+kBfRoz+xYI2RnJ3Yo+we66UgU3fXdG+R2KyESlQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-UFMFiCG0co36VpZkgFrSBnrxo71uf1x+cjlzzJi3khmMyDlnLu4RuIQsAqvKbYom6fi3G9Q8lTgM7JuOXFyjhw==",
       "dev": true,
       "dependencies": {
         "@iarna/toml": "^2.2.5",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/watcher": "2.5.1",
+        "@miniflare/queues": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/watcher": "2.11.0",
         "busboy": "^1.6.0",
         "dotenv": "^10.0.0",
         "kleur": "^4.1.4",
         "set-cookie-parser": "^2.4.8",
-        "undici": "5.5.1",
+        "undici": "5.9.1",
         "urlpattern-polyfill": "^4.0.3"
       },
+      "engines": {
+        "node": ">=16.13"
+      }
+    },
+    "node_modules/@miniflare/d1": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/d1/-/d1-2.11.0.tgz",
+      "integrity": "sha512-aDdBVQZ2C0Zs3+Y9ZbRctmuQxozPfpumwJ/6NG6fBadANvune/hW7ddEoxyteIEU9W3IgzVj8s4by4VvasX90A==",
+      "dev": true,
+      "dependencies": {
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0"
+      },
       "engines": {
         "node": ">=16.7"
       }
     },
     "node_modules/@miniflare/durable-objects": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/durable-objects/-/durable-objects-2.5.1.tgz",
-      "integrity": "sha512-AZEGSA9LMA6vBzwADAzr81RBSWYlMfa/cDHnHaFL31w4mQwMUcqXOvemoqe6sTSq1KI0TTtvYbxPt0Lui8tEPw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/durable-objects/-/durable-objects-2.11.0.tgz",
+      "integrity": "sha512-0cKJaMgraTEU1b4kqK8cjD2oTeOjA6QU3Y+lWiZT/k1PMHZULovrSFnjii7qZ8npf4VHSIN6XYPxhyxRyEM65Q==",
       "dev": true,
       "dependencies": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/storage-memory": "2.5.1",
-        "undici": "5.5.1"
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/storage-memory": "2.11.0",
+        "undici": "5.9.1"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/html-rewriter": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/html-rewriter/-/html-rewriter-2.5.1.tgz",
-      "integrity": "sha512-fdO1qme8ukucejRz5yXJN/F4B9qEDRbBLPOEG94zwx8bHGGIo5VX15+J6oHubhjifLwzNuvOcg16Bu5dyR1KxQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/html-rewriter/-/html-rewriter-2.11.0.tgz",
+      "integrity": "sha512-olTqmuYTHnoTNtiA0vjQ/ixRfbwgPzDrAUbtXDCYW45VFbHfDVJrJGZX3Jg0HpSlxy86Zclle1SUxGbVDzxsBg==",
       "dev": true,
       "dependencies": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
         "html-rewriter-wasm": "^0.4.1",
-        "undici": "5.5.1"
+        "undici": "5.9.1"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/http-server": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/http-server/-/http-server-2.5.1.tgz",
-      "integrity": "sha512-K+VoBU0LN8/oku/JWLEyX8wrp9fiaTC8/dosbY/6VWizyIrgQze16uD21GnK5+NBtbCAtLRryS5dZ3PnhiTR1w==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/http-server/-/http-server-2.11.0.tgz",
+      "integrity": "sha512-sMLcrDFzqqAvnQmAUH0hRTo8sBjW79VZYfnIH5FAGSGcKX6kdAGs9RStdYZ4CftQCBAEQScX0KBsMx5FwJRe9Q==",
       "dev": true,
       "dependencies": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/web-sockets": "2.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/web-sockets": "2.11.0",
         "kleur": "^4.1.4",
         "selfsigned": "^2.0.0",
-        "undici": "5.5.1",
+        "undici": "5.9.1",
         "ws": "^8.2.2",
         "youch": "^2.2.2"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/kv": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/kv/-/kv-2.5.1.tgz",
-      "integrity": "sha512-ODTUqI7on3egHluBpFHifO0a9QFQUZscciASWKxGOt8VDp1vp0vIfU9ykQZrdZYFVeSKNVlUNqNQx+NMYZ6gIg==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/kv/-/kv-2.11.0.tgz",
+      "integrity": "sha512-3m9dL2HBBN170V1JvwjjucR5zl4G3mlcsV6C1E7A2wLl2Z2TWvIx/tSY9hrhkD96dFnejwJ9qmPMbXMMuynhjg==",
       "dev": true,
       "dependencies": {
-        "@miniflare/shared": "2.5.1"
+        "@miniflare/shared": "2.11.0"
+      },
+      "engines": {
+        "node": ">=16.13"
+      }
+    },
+    "node_modules/@miniflare/queues": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/queues/-/queues-2.11.0.tgz",
+      "integrity": "sha512-fLHjdrNLKhn0LZM/aii/9GsAttFd+lWlGzK8HOg1R0vhfKBwEub4zntjMmOfFbDm1ntc21tdMK7n3ldUphwh5w==",
+      "dev": true,
+      "dependencies": {
+        "@miniflare/shared": "2.11.0"
       },
       "engines": {
         "node": ">=16.7"
       }
     },
+    "node_modules/@miniflare/r2": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/r2/-/r2-2.11.0.tgz",
+      "integrity": "sha512-MKuyJ/gGNsK3eWbGdygvozqcyaZhM3C6NGHvoaZwH503dwN569j5DpatTWiHGFeDeSu64VqcIsGehz05GDUaag==",
+      "dev": true,
+      "dependencies": {
+        "@miniflare/shared": "2.11.0",
+        "undici": "5.9.1"
+      },
+      "engines": {
+        "node": ">=16.13"
+      }
+    },
     "node_modules/@miniflare/runner-vm": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/runner-vm/-/runner-vm-2.5.1.tgz",
-      "integrity": "sha512-7U7BPgzaikwWkAMonlmyy4lDpW1H7mqHFr7NdK9kA6BbXZ2GY6uro69QsGw0c4Y/vyKBodKiqXAq53iGdM3Kug==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/runner-vm/-/runner-vm-2.11.0.tgz",
+      "integrity": "sha512-bkVSuvCf5+VylqN8lTiLxIYqYcKFbl+BywZGwGQndPC/3wh42J00mM0jw4hRbvXgwuBhlUyCVpEXtYlftFFT/g==",
       "dev": true,
       "dependencies": {
-        "@miniflare/shared": "2.5.1"
+        "@miniflare/shared": "2.11.0"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/scheduler": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/scheduler/-/scheduler-2.5.1.tgz",
-      "integrity": "sha512-ybho5Kg3Cfl4E0JleKAbiv/RTA+/PVqH6Y/PuCH2oowSM7qeAvFkrwiRvxtN7BuAl+5lsGyVxFe4gL+weXohEw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/scheduler/-/scheduler-2.11.0.tgz",
+      "integrity": "sha512-DPdzINhdWeS99eIicGoluMsD4pLTTAWNQbgCv3CTwgdKA3dxdvMSCkNqZzQLiALzvk9+rSfj46FlH++HE7o7/w==",
       "dev": true,
       "dependencies": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
         "cron-schedule": "^3.0.4"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/shared": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/shared/-/shared-2.5.1.tgz",
-      "integrity": "sha512-DObgqbFml3qetIBtZa8fNqkBqUH9XtI6rdrWtTYVrx0rzKsd5PDf6gdMoxy7v1rr9zBAipKJxrcBqlEgjPl53Q==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/shared/-/shared-2.11.0.tgz",
+      "integrity": "sha512-fWMqq3ZkWAg+k7CnyzMV/rZHugwn+/JxvVzCxrtvxzwotTN547THlOxgZe8JAP23U9BiTxOfpTfnLvFEjAmegw==",
       "dev": true,
       "dependencies": {
-        "ignore": "^5.1.8",
-        "kleur": "^4.1.4"
+        "@types/better-sqlite3": "^7.6.0",
+        "kleur": "^4.1.4",
+        "npx-import": "^1.1.3",
+        "picomatch": "^2.3.1"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/sites": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/sites/-/sites-2.5.1.tgz",
-      "integrity": "sha512-7V/fAzR50LYgMcOfoCaoppqBCjagBpGWFbZgMyJi/Hj4oVlSIzxo+424hzdjitNzikCpv+AryF9tXfy9j6qiOg==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/sites/-/sites-2.11.0.tgz",
+      "integrity": "sha512-qbefKdWZUJgsdLf+kCw03sn3h/92LZgJAbkOpP6bCrfWkXlJ37EQXO4KWdhn4Ghc7A6GwU1s1I/mdB64B3AewQ==",
       "dev": true,
       "dependencies": {
-        "@miniflare/kv": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/storage-file": "2.5.1"
+        "@miniflare/kv": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/storage-file": "2.11.0"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/storage-file": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/storage-file/-/storage-file-2.5.1.tgz",
-      "integrity": "sha512-o12KFXgc1M0nHD98mrA/IqwBsJ6KYLWH9NaTwqLhxhpGz/KSo5kWb7z/vrz2I/Rk2XR/gHSYQm2XR9XE6IJCdA==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/storage-file/-/storage-file-2.11.0.tgz",
+      "integrity": "sha512-beWF/lTX74x7AiaSB+xQxywPSNdhtEKvqDkRui8eOJ5kqN2o4UaleLKQGgqmCw3WyHRIsckV7If1qpbNiLtWMw==",
       "dev": true,
       "dependencies": {
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/storage-memory": "2.5.1"
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/storage-memory": "2.11.0"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/storage-memory": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/storage-memory/-/storage-memory-2.5.1.tgz",
-      "integrity": "sha512-LIdBEFcwY7yLCeowO34p5bajRsvU1XuQjXIqcgfiCVt1+qa3D0seELTpW1NSFEJzxulVtu/KsScEug9GipEt7A==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/storage-memory/-/storage-memory-2.11.0.tgz",
+      "integrity": "sha512-s0AhPww7fq/Jz80NbPb+ffhcVRKnfPi7H1dHTRTre2Ud23EVJjAWl2gat42x8NOT/Fu3/o/7A72DWQQJqfO98A==",
       "dev": true,
       "dependencies": {
-        "@miniflare/shared": "2.5.1"
+        "@miniflare/shared": "2.11.0"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/watcher": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/watcher/-/watcher-2.5.1.tgz",
-      "integrity": "sha512-8oOdgWA7CZ7uIAwbjqSrhDnuQXRJqd9e3yDHsMa91E/jkC/GDmlt5SJh6VEMlNDtBGWd661IpVErZf7injI52w==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/watcher/-/watcher-2.11.0.tgz",
+      "integrity": "sha512-RUfjz2iYcsQXLcGySemJl98CJ2iierbWsPGWZhIVZI+NNhROkEy77g/Q+lvP2ATwexG3/dUSfdJ3P8aH+sI4Ig==",
       "dev": true,
       "dependencies": {
-        "@miniflare/shared": "2.5.1"
+        "@miniflare/shared": "2.11.0"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@miniflare/web-sockets": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/web-sockets/-/web-sockets-2.5.1.tgz",
-      "integrity": "sha512-GyXHoDAI5LDF87rmD+d0cSoN7Xs2pCYjSyUR6Vf6exkS4CN6F/Rtr8vIM5+om9kRkS6qxAyOYjWeEqBOjLm/og==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/web-sockets/-/web-sockets-2.11.0.tgz",
+      "integrity": "sha512-NC8RKrmxrO0hZmwpzn5g4hPGA2VblnFTIBobmWoxuK95eW49zfs7dtE/PyFs+blsGv3CjTIjHVSQ782K+C6HFA==",
       "dev": true,
       "dependencies": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "undici": "5.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "undici": "5.9.1",
         "ws": "^8.2.2"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       }
     },
     "node_modules/@supabase/functions-js": {
@@ -320,6 +361,21 @@
         "@supabase/storage-js": "^1.7.2"
       }
     },
+    "node_modules/@types/better-sqlite3": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/@types/better-sqlite3/-/better-sqlite3-7.6.3.tgz",
+      "integrity": "sha512-YS64N9SNDT/NAvou3QNdzAu3E2om/W/0dhORimtPGLef+zSK5l1vDzfsWb4xgXOgfhtOI5ZDTRxnvRPb22AIVQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "18.11.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.17.tgz",
+      "integrity": "sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==",
+      "dev": true
+    },
     "node_modules/@types/phoenix": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.4.tgz",
@@ -355,6 +411,15 @@
         "node": ">=6.14.2"
       }
     },
+    "node_modules/builtins": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
+      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.0.0"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -390,6 +455,20 @@
         "node-fetch": "2.6.7"
       }
     },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/d": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
@@ -822,6 +901,29 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
+    "node_modules/execa": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-6.1.0.tgz",
+      "integrity": "sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.1",
+        "human-signals": "^3.0.1",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^3.0.7",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
     "node_modules/ext": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
@@ -849,6 +951,18 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/html-rewriter-wasm": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/html-rewriter-wasm/-/html-rewriter-wasm-0.4.1.tgz",
@@ -861,13 +975,25 @@
       "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
       "dev": true
     },
-    "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+    "node_modules/human-signals": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
+      "integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==",
       "dev": true,
       "engines": {
-        "node": ">= 4"
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-typedarray": {
@@ -875,6 +1001,12 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
     "node_modules/itty-router": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/itty-router/-/itty-router-2.6.1.tgz",
@@ -894,6 +1026,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -903,6 +1047,12 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
     "node_modules/mime": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
@@ -915,39 +1065,54 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/miniflare": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-2.5.1.tgz",
-      "integrity": "sha512-PT56C/j7U6n7WDxnIUHu0d8EY/gedPRsta2b+LsrIHGZPSkxAcPzf2DgbbPU7obv0C4hT9H0GL1fWpWtr2SbDQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-2.11.0.tgz",
+      "integrity": "sha512-QA18I1VQXdCo4nBtPJUcUDxW8c9xbc5ex5F61jwhkGVOISSnYdEheolESmjr8MYk28xwi0XD1ozS4rLaTONd+w==",
       "dev": true,
       "dependencies": {
-        "@miniflare/cache": "2.5.1",
-        "@miniflare/cli-parser": "2.5.1",
-        "@miniflare/core": "2.5.1",
-        "@miniflare/durable-objects": "2.5.1",
-        "@miniflare/html-rewriter": "2.5.1",
-        "@miniflare/http-server": "2.5.1",
-        "@miniflare/kv": "2.5.1",
-        "@miniflare/runner-vm": "2.5.1",
-        "@miniflare/scheduler": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/sites": "2.5.1",
-        "@miniflare/storage-file": "2.5.1",
-        "@miniflare/storage-memory": "2.5.1",
-        "@miniflare/web-sockets": "2.5.1",
+        "@miniflare/cache": "2.11.0",
+        "@miniflare/cli-parser": "2.11.0",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/d1": "2.11.0",
+        "@miniflare/durable-objects": "2.11.0",
+        "@miniflare/html-rewriter": "2.11.0",
+        "@miniflare/http-server": "2.11.0",
+        "@miniflare/kv": "2.11.0",
+        "@miniflare/queues": "2.11.0",
+        "@miniflare/r2": "2.11.0",
+        "@miniflare/runner-vm": "2.11.0",
+        "@miniflare/scheduler": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/sites": "2.11.0",
+        "@miniflare/storage-file": "2.11.0",
+        "@miniflare/storage-memory": "2.11.0",
+        "@miniflare/web-sockets": "2.11.0",
         "kleur": "^4.1.4",
         "semiver": "^1.1.0",
         "source-map-support": "^0.5.20",
-        "undici": "5.5.1"
+        "undici": "5.9.1"
       },
       "bin": {
         "miniflare": "bootstrap.js"
       },
       "engines": {
-        "node": ">=16.7"
+        "node": ">=16.13"
       },
       "peerDependencies": {
-        "@miniflare/storage-redis": "2.5.1",
+        "@miniflare/storage-redis": "2.11.0",
         "cron-schedule": "^3.0.4",
         "ioredis": "^4.27.9"
       },
@@ -1032,12 +1197,93 @@
         "node-gyp-build-test": "build-test.js"
       }
     },
+    "node_modules/npm-run-path": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npx-import": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/npx-import/-/npx-import-1.1.4.tgz",
+      "integrity": "sha512-3ShymTWOgqGyNlh5lMJAejLuIv3W1K3fbI5Ewc6YErZU3Sp0PqsNs8UIU1O8z5+KVl/Du5ag56Gza9vdorGEoA==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^6.1.0",
+        "parse-package-name": "^1.0.0",
+        "semver": "^7.3.7",
+        "validate-npm-package-name": "^4.0.0"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-package-name": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-package-name/-/parse-package-name-1.0.0.tgz",
+      "integrity": "sha512-kBeTUtcj+SkyfaW4+KBe0HtsloBJ/mKTPoxpVdA57GZiPerREsUWJOhVj9anXweFiJkm5y8FG1sxFZkZ0SN6wg==",
+      "dev": true
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
       "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
       "dev": true
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/rollup-plugin-inject": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-inject/-/rollup-plugin-inject-3.0.2.tgz",
@@ -1089,10 +1335,52 @@
         "node": ">=6"
       }
     },
+    "node_modules/semver": {
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/set-cookie-parser": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz",
-      "integrity": "sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
+      "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
+      "dev": true
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
     "node_modules/source-map": {
@@ -1138,6 +1426,18 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -1157,9 +1457,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.5.1.tgz",
-      "integrity": "sha512-MEvryPLf18HvlCbLSzCW0U00IMftKGI5udnjrQbC5D4P0Hodwffhv+iGfWuJwg16Y/TK11ZFK8i+BPVW2z/eAw==",
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.9.1.tgz",
+      "integrity": "sha512-6fB3a+SNnWEm4CJbgo0/CWR8RGcOCQP68SF4X0mxtYTq2VNN8T88NYrWVBAeSX+zb7bny2dx2iYhP3XHi00omg==",
       "dev": true,
       "engines": {
         "node": ">=12.18"
@@ -1183,6 +1483,18 @@
         "node": ">=6.14.2"
       }
     },
+    "node_modules/validate-npm-package-name": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
+      "integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
+      "dev": true,
+      "dependencies": {
+        "builtins": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -1213,6 +1525,21 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/wrangler": {
       "version": "2.0.16",
       "resolved": "https://registry.npmjs.org/wrangler/-/wrangler-2.0.16.tgz",
@@ -1243,9 +1570,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
-      "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -1277,6 +1604,12 @@
         "node": ">=0.10.32"
       }
     },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/youch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/youch/-/youch-2.2.2.tgz",
@@ -1324,171 +1657,203 @@
       "dev": true
     },
     "@miniflare/cache": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/cache/-/cache-2.5.1.tgz",
-      "integrity": "sha512-qH5PC4zb7mHdQHlcaOuP0KUXuRbNSuB/HU7gpoeplV8J6CgNJGceVmQCZVZLycgDKZtAlhyGE1gkpJmeW7GCyw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/cache/-/cache-2.11.0.tgz",
+      "integrity": "sha512-L/kc9AzidPwFuk2fwHpAEePi0kNBk6FWUq3ln+9beRCDrPEpfVrDRFpNleF1NFZz5//oeVMuo8F0IVUQGzR7+Q==",
       "dev": true,
       "requires": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
         "http-cache-semantics": "^4.1.0",
-        "undici": "5.5.1"
+        "undici": "5.9.1"
       }
     },
     "@miniflare/cli-parser": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/cli-parser/-/cli-parser-2.5.1.tgz",
-      "integrity": "sha512-itlMDe9jwO806mkNkg3G70QYoG9YQHW6V10AF9L5b8J4LYt/V78uCEJSwNnCpL7zfKrScRPtDfXZxhrFzMXiUw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/cli-parser/-/cli-parser-2.11.0.tgz",
+      "integrity": "sha512-JUmyRzEGAS6CouvXJwBh8p44onfw3KRpfq5JGXEuHModOGjTp6li7PQyCTNPV2Hv/7StAXWnTFGXeAqyDHuTig==",
       "dev": true,
       "requires": {
-        "@miniflare/shared": "2.5.1",
+        "@miniflare/shared": "2.11.0",
         "kleur": "^4.1.4"
       }
     },
     "@miniflare/core": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/core/-/core-2.5.1.tgz",
-      "integrity": "sha512-0oEBLV5AM3xxs6TS+7/fn4MSGNBfhUFVv41R8uc72H1a89+kBfRoz+xYI2RnJ3Yo+we66UgU3fXdG+R2KyESlQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-UFMFiCG0co36VpZkgFrSBnrxo71uf1x+cjlzzJi3khmMyDlnLu4RuIQsAqvKbYom6fi3G9Q8lTgM7JuOXFyjhw==",
       "dev": true,
       "requires": {
         "@iarna/toml": "^2.2.5",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/watcher": "2.5.1",
+        "@miniflare/queues": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/watcher": "2.11.0",
         "busboy": "^1.6.0",
         "dotenv": "^10.0.0",
         "kleur": "^4.1.4",
         "set-cookie-parser": "^2.4.8",
-        "undici": "5.5.1",
+        "undici": "5.9.1",
         "urlpattern-polyfill": "^4.0.3"
       }
     },
-    "@miniflare/durable-objects": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/durable-objects/-/durable-objects-2.5.1.tgz",
-      "integrity": "sha512-AZEGSA9LMA6vBzwADAzr81RBSWYlMfa/cDHnHaFL31w4mQwMUcqXOvemoqe6sTSq1KI0TTtvYbxPt0Lui8tEPw==",
+    "@miniflare/d1": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/d1/-/d1-2.11.0.tgz",
+      "integrity": "sha512-aDdBVQZ2C0Zs3+Y9ZbRctmuQxozPfpumwJ/6NG6fBadANvune/hW7ddEoxyteIEU9W3IgzVj8s4by4VvasX90A==",
       "dev": true,
       "requires": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/storage-memory": "2.5.1",
-        "undici": "5.5.1"
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0"
+      }
+    },
+    "@miniflare/durable-objects": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/durable-objects/-/durable-objects-2.11.0.tgz",
+      "integrity": "sha512-0cKJaMgraTEU1b4kqK8cjD2oTeOjA6QU3Y+lWiZT/k1PMHZULovrSFnjii7qZ8npf4VHSIN6XYPxhyxRyEM65Q==",
+      "dev": true,
+      "requires": {
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/storage-memory": "2.11.0",
+        "undici": "5.9.1"
       }
     },
     "@miniflare/html-rewriter": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/html-rewriter/-/html-rewriter-2.5.1.tgz",
-      "integrity": "sha512-fdO1qme8ukucejRz5yXJN/F4B9qEDRbBLPOEG94zwx8bHGGIo5VX15+J6oHubhjifLwzNuvOcg16Bu5dyR1KxQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/html-rewriter/-/html-rewriter-2.11.0.tgz",
+      "integrity": "sha512-olTqmuYTHnoTNtiA0vjQ/ixRfbwgPzDrAUbtXDCYW45VFbHfDVJrJGZX3Jg0HpSlxy86Zclle1SUxGbVDzxsBg==",
       "dev": true,
       "requires": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
         "html-rewriter-wasm": "^0.4.1",
-        "undici": "5.5.1"
+        "undici": "5.9.1"
       }
     },
     "@miniflare/http-server": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/http-server/-/http-server-2.5.1.tgz",
-      "integrity": "sha512-K+VoBU0LN8/oku/JWLEyX8wrp9fiaTC8/dosbY/6VWizyIrgQze16uD21GnK5+NBtbCAtLRryS5dZ3PnhiTR1w==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/http-server/-/http-server-2.11.0.tgz",
+      "integrity": "sha512-sMLcrDFzqqAvnQmAUH0hRTo8sBjW79VZYfnIH5FAGSGcKX6kdAGs9RStdYZ4CftQCBAEQScX0KBsMx5FwJRe9Q==",
       "dev": true,
       "requires": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/web-sockets": "2.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/web-sockets": "2.11.0",
         "kleur": "^4.1.4",
         "selfsigned": "^2.0.0",
-        "undici": "5.5.1",
+        "undici": "5.9.1",
         "ws": "^8.2.2",
         "youch": "^2.2.2"
       }
     },
     "@miniflare/kv": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/kv/-/kv-2.5.1.tgz",
-      "integrity": "sha512-ODTUqI7on3egHluBpFHifO0a9QFQUZscciASWKxGOt8VDp1vp0vIfU9ykQZrdZYFVeSKNVlUNqNQx+NMYZ6gIg==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/kv/-/kv-2.11.0.tgz",
+      "integrity": "sha512-3m9dL2HBBN170V1JvwjjucR5zl4G3mlcsV6C1E7A2wLl2Z2TWvIx/tSY9hrhkD96dFnejwJ9qmPMbXMMuynhjg==",
       "dev": true,
       "requires": {
-        "@miniflare/shared": "2.5.1"
+        "@miniflare/shared": "2.11.0"
+      }
+    },
+    "@miniflare/queues": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/queues/-/queues-2.11.0.tgz",
+      "integrity": "sha512-fLHjdrNLKhn0LZM/aii/9GsAttFd+lWlGzK8HOg1R0vhfKBwEub4zntjMmOfFbDm1ntc21tdMK7n3ldUphwh5w==",
+      "dev": true,
+      "requires": {
+        "@miniflare/shared": "2.11.0"
+      }
+    },
+    "@miniflare/r2": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/r2/-/r2-2.11.0.tgz",
+      "integrity": "sha512-MKuyJ/gGNsK3eWbGdygvozqcyaZhM3C6NGHvoaZwH503dwN569j5DpatTWiHGFeDeSu64VqcIsGehz05GDUaag==",
+      "dev": true,
+      "requires": {
+        "@miniflare/shared": "2.11.0",
+        "undici": "5.9.1"
       }
     },
     "@miniflare/runner-vm": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/runner-vm/-/runner-vm-2.5.1.tgz",
-      "integrity": "sha512-7U7BPgzaikwWkAMonlmyy4lDpW1H7mqHFr7NdK9kA6BbXZ2GY6uro69QsGw0c4Y/vyKBodKiqXAq53iGdM3Kug==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/runner-vm/-/runner-vm-2.11.0.tgz",
+      "integrity": "sha512-bkVSuvCf5+VylqN8lTiLxIYqYcKFbl+BywZGwGQndPC/3wh42J00mM0jw4hRbvXgwuBhlUyCVpEXtYlftFFT/g==",
       "dev": true,
       "requires": {
-        "@miniflare/shared": "2.5.1"
+        "@miniflare/shared": "2.11.0"
       }
     },
     "@miniflare/scheduler": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/scheduler/-/scheduler-2.5.1.tgz",
-      "integrity": "sha512-ybho5Kg3Cfl4E0JleKAbiv/RTA+/PVqH6Y/PuCH2oowSM7qeAvFkrwiRvxtN7BuAl+5lsGyVxFe4gL+weXohEw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/scheduler/-/scheduler-2.11.0.tgz",
+      "integrity": "sha512-DPdzINhdWeS99eIicGoluMsD4pLTTAWNQbgCv3CTwgdKA3dxdvMSCkNqZzQLiALzvk9+rSfj46FlH++HE7o7/w==",
       "dev": true,
       "requires": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
         "cron-schedule": "^3.0.4"
       }
     },
     "@miniflare/shared": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/shared/-/shared-2.5.1.tgz",
-      "integrity": "sha512-DObgqbFml3qetIBtZa8fNqkBqUH9XtI6rdrWtTYVrx0rzKsd5PDf6gdMoxy7v1rr9zBAipKJxrcBqlEgjPl53Q==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/shared/-/shared-2.11.0.tgz",
+      "integrity": "sha512-fWMqq3ZkWAg+k7CnyzMV/rZHugwn+/JxvVzCxrtvxzwotTN547THlOxgZe8JAP23U9BiTxOfpTfnLvFEjAmegw==",
       "dev": true,
       "requires": {
-        "ignore": "^5.1.8",
-        "kleur": "^4.1.4"
+        "@types/better-sqlite3": "^7.6.0",
+        "kleur": "^4.1.4",
+        "npx-import": "^1.1.3",
+        "picomatch": "^2.3.1"
       }
     },
     "@miniflare/sites": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/sites/-/sites-2.5.1.tgz",
-      "integrity": "sha512-7V/fAzR50LYgMcOfoCaoppqBCjagBpGWFbZgMyJi/Hj4oVlSIzxo+424hzdjitNzikCpv+AryF9tXfy9j6qiOg==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/sites/-/sites-2.11.0.tgz",
+      "integrity": "sha512-qbefKdWZUJgsdLf+kCw03sn3h/92LZgJAbkOpP6bCrfWkXlJ37EQXO4KWdhn4Ghc7A6GwU1s1I/mdB64B3AewQ==",
       "dev": true,
       "requires": {
-        "@miniflare/kv": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/storage-file": "2.5.1"
+        "@miniflare/kv": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/storage-file": "2.11.0"
       }
     },
     "@miniflare/storage-file": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/storage-file/-/storage-file-2.5.1.tgz",
-      "integrity": "sha512-o12KFXgc1M0nHD98mrA/IqwBsJ6KYLWH9NaTwqLhxhpGz/KSo5kWb7z/vrz2I/Rk2XR/gHSYQm2XR9XE6IJCdA==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/storage-file/-/storage-file-2.11.0.tgz",
+      "integrity": "sha512-beWF/lTX74x7AiaSB+xQxywPSNdhtEKvqDkRui8eOJ5kqN2o4UaleLKQGgqmCw3WyHRIsckV7If1qpbNiLtWMw==",
       "dev": true,
       "requires": {
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/storage-memory": "2.5.1"
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/storage-memory": "2.11.0"
       }
     },
     "@miniflare/storage-memory": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/storage-memory/-/storage-memory-2.5.1.tgz",
-      "integrity": "sha512-LIdBEFcwY7yLCeowO34p5bajRsvU1XuQjXIqcgfiCVt1+qa3D0seELTpW1NSFEJzxulVtu/KsScEug9GipEt7A==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/storage-memory/-/storage-memory-2.11.0.tgz",
+      "integrity": "sha512-s0AhPww7fq/Jz80NbPb+ffhcVRKnfPi7H1dHTRTre2Ud23EVJjAWl2gat42x8NOT/Fu3/o/7A72DWQQJqfO98A==",
       "dev": true,
       "requires": {
-        "@miniflare/shared": "2.5.1"
+        "@miniflare/shared": "2.11.0"
       }
     },
     "@miniflare/watcher": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/watcher/-/watcher-2.5.1.tgz",
-      "integrity": "sha512-8oOdgWA7CZ7uIAwbjqSrhDnuQXRJqd9e3yDHsMa91E/jkC/GDmlt5SJh6VEMlNDtBGWd661IpVErZf7injI52w==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/watcher/-/watcher-2.11.0.tgz",
+      "integrity": "sha512-RUfjz2iYcsQXLcGySemJl98CJ2iierbWsPGWZhIVZI+NNhROkEy77g/Q+lvP2ATwexG3/dUSfdJ3P8aH+sI4Ig==",
       "dev": true,
       "requires": {
-        "@miniflare/shared": "2.5.1"
+        "@miniflare/shared": "2.11.0"
       }
     },
     "@miniflare/web-sockets": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@miniflare/web-sockets/-/web-sockets-2.5.1.tgz",
-      "integrity": "sha512-GyXHoDAI5LDF87rmD+d0cSoN7Xs2pCYjSyUR6Vf6exkS4CN6F/Rtr8vIM5+om9kRkS6qxAyOYjWeEqBOjLm/og==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@miniflare/web-sockets/-/web-sockets-2.11.0.tgz",
+      "integrity": "sha512-NC8RKrmxrO0hZmwpzn5g4hPGA2VblnFTIBobmWoxuK95eW49zfs7dtE/PyFs+blsGv3CjTIjHVSQ782K+C6HFA==",
       "dev": true,
       "requires": {
-        "@miniflare/core": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "undici": "5.5.1",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "undici": "5.9.1",
         "ws": "^8.2.2"
       }
     },
@@ -1545,6 +1910,21 @@
         "@supabase/storage-js": "^1.7.2"
       }
     },
+    "@types/better-sqlite3": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/@types/better-sqlite3/-/better-sqlite3-7.6.3.tgz",
+      "integrity": "sha512-YS64N9SNDT/NAvou3QNdzAu3E2om/W/0dhORimtPGLef+zSK5l1vDzfsWb4xgXOgfhtOI5ZDTRxnvRPb22AIVQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/node": {
+      "version": "18.11.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.17.tgz",
+      "integrity": "sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==",
+      "dev": true
+    },
     "@types/phoenix": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.4.tgz",
@@ -1576,6 +1956,15 @@
         "node-gyp-build": "^4.3.0"
       }
     },
+    "builtins": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
+      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+      "dev": true,
+      "requires": {
+        "semver": "^7.0.0"
+      }
+    },
     "busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1605,6 +1994,17 @@
         "node-fetch": "2.6.7"
       }
     },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
     "d": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
@@ -1837,6 +2237,23 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
+    "execa": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-6.1.0.tgz",
+      "integrity": "sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.1",
+        "human-signals": "^3.0.1",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^3.0.7",
+        "strip-final-newline": "^3.0.0"
+      }
+    },
     "ext": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
@@ -1859,6 +2276,12 @@
       "dev": true,
       "optional": true
     },
+    "get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true
+    },
     "html-rewriter-wasm": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/html-rewriter-wasm/-/html-rewriter-wasm-0.4.1.tgz",
@@ -1871,10 +2294,16 @@
       "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
       "dev": true
     },
-    "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+    "human-signals": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
+      "integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==",
+      "dev": true
+    },
+    "is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
       "dev": true
     },
     "is-typedarray": {
@@ -1882,6 +2311,12 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
     "itty-router": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/itty-router/-/itty-router-2.6.1.tgz",
@@ -1898,6 +2333,15 @@
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
       "dev": true
     },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
     "magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -1907,36 +2351,51 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
     "mime": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
       "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
       "dev": true
     },
+    "mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true
+    },
     "miniflare": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-2.5.1.tgz",
-      "integrity": "sha512-PT56C/j7U6n7WDxnIUHu0d8EY/gedPRsta2b+LsrIHGZPSkxAcPzf2DgbbPU7obv0C4hT9H0GL1fWpWtr2SbDQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-2.11.0.tgz",
+      "integrity": "sha512-QA18I1VQXdCo4nBtPJUcUDxW8c9xbc5ex5F61jwhkGVOISSnYdEheolESmjr8MYk28xwi0XD1ozS4rLaTONd+w==",
       "dev": true,
       "requires": {
-        "@miniflare/cache": "2.5.1",
-        "@miniflare/cli-parser": "2.5.1",
-        "@miniflare/core": "2.5.1",
-        "@miniflare/durable-objects": "2.5.1",
-        "@miniflare/html-rewriter": "2.5.1",
-        "@miniflare/http-server": "2.5.1",
-        "@miniflare/kv": "2.5.1",
-        "@miniflare/runner-vm": "2.5.1",
-        "@miniflare/scheduler": "2.5.1",
-        "@miniflare/shared": "2.5.1",
-        "@miniflare/sites": "2.5.1",
-        "@miniflare/storage-file": "2.5.1",
-        "@miniflare/storage-memory": "2.5.1",
-        "@miniflare/web-sockets": "2.5.1",
+        "@miniflare/cache": "2.11.0",
+        "@miniflare/cli-parser": "2.11.0",
+        "@miniflare/core": "2.11.0",
+        "@miniflare/d1": "2.11.0",
+        "@miniflare/durable-objects": "2.11.0",
+        "@miniflare/html-rewriter": "2.11.0",
+        "@miniflare/http-server": "2.11.0",
+        "@miniflare/kv": "2.11.0",
+        "@miniflare/queues": "2.11.0",
+        "@miniflare/r2": "2.11.0",
+        "@miniflare/runner-vm": "2.11.0",
+        "@miniflare/scheduler": "2.11.0",
+        "@miniflare/shared": "2.11.0",
+        "@miniflare/sites": "2.11.0",
+        "@miniflare/storage-file": "2.11.0",
+        "@miniflare/storage-memory": "2.11.0",
+        "@miniflare/web-sockets": "2.11.0",
         "kleur": "^4.1.4",
         "semiver": "^1.1.0",
         "source-map-support": "^0.5.20",
-        "undici": "5.5.1"
+        "undici": "5.9.1"
       }
     },
     "ms": {
@@ -1980,12 +2439,68 @@
       "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.5.0.tgz",
       "integrity": "sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg=="
     },
+    "npm-run-path": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "dev": true,
+      "requires": {
+        "path-key": "^4.0.0"
+      },
+      "dependencies": {
+        "path-key": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+          "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+          "dev": true
+        }
+      }
+    },
+    "npx-import": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/npx-import/-/npx-import-1.1.4.tgz",
+      "integrity": "sha512-3ShymTWOgqGyNlh5lMJAejLuIv3W1K3fbI5Ewc6YErZU3Sp0PqsNs8UIU1O8z5+KVl/Du5ag56Gza9vdorGEoA==",
+      "dev": true,
+      "requires": {
+        "execa": "^6.1.0",
+        "parse-package-name": "^1.0.0",
+        "semver": "^7.3.7",
+        "validate-npm-package-name": "^4.0.0"
+      }
+    },
+    "onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^4.0.0"
+      }
+    },
+    "parse-package-name": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-package-name/-/parse-package-name-1.0.0.tgz",
+      "integrity": "sha512-kBeTUtcj+SkyfaW4+KBe0HtsloBJ/mKTPoxpVdA57GZiPerREsUWJOhVj9anXweFiJkm5y8FG1sxFZkZ0SN6wg==",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
     "path-to-regexp": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
       "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
       "dev": true
     },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
     "rollup-plugin-inject": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-inject/-/rollup-plugin-inject-3.0.2.tgz",
@@ -2030,10 +2545,40 @@
       "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==",
       "dev": true
     },
+    "semver": {
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^6.0.0"
+      }
+    },
     "set-cookie-parser": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz",
-      "integrity": "sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
+      "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
+      "dev": true
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
     "source-map": {
@@ -2070,6 +2615,12 @@
       "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
       "dev": true
     },
+    "strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -2089,9 +2640,9 @@
       }
     },
     "undici": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.5.1.tgz",
-      "integrity": "sha512-MEvryPLf18HvlCbLSzCW0U00IMftKGI5udnjrQbC5D4P0Hodwffhv+iGfWuJwg16Y/TK11ZFK8i+BPVW2z/eAw==",
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.9.1.tgz",
+      "integrity": "sha512-6fB3a+SNnWEm4CJbgo0/CWR8RGcOCQP68SF4X0mxtYTq2VNN8T88NYrWVBAeSX+zb7bny2dx2iYhP3XHi00omg==",
       "dev": true
     },
     "urlpattern-polyfill": {
@@ -2108,6 +2659,15 @@
         "node-gyp-build": "^4.3.0"
       }
     },
+    "validate-npm-package-name": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
+      "integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
+      "dev": true,
+      "requires": {
+        "builtins": "^5.0.0"
+      }
+    },
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -2135,6 +2695,15 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
     "wrangler": {
       "version": "2.0.16",
       "resolved": "https://registry.npmjs.org/wrangler/-/wrangler-2.0.16.tgz",
@@ -2156,9 +2725,9 @@
       }
     },
     "ws": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
-      "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
       "dev": true,
       "requires": {}
     },
@@ -2173,6 +2742,12 @@
       "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
       "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug=="
     },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "youch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/youch/-/youch-2.2.2.tgz",

From c9809c4e8b2801dd010842943b45e0023e505cfb Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 16:38:55 +0800
Subject: [PATCH 055/215] Update NavigationMenuRefListItems.tsx

---
 .../NavigationMenu/NavigationMenuRefListItems.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index e7a92db08a8..148ebfe3372 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -9,7 +9,7 @@ import Image from 'next/image'
 import { useTheme } from 'common/Providers'
 
 import RevVersionDropdown from '~/components/RefVersionDropdown'
-// import { useMenuActiveRefId } from '~/hooks/useMenuState'
+import { useMenuActiveRefId } from '~/hooks/useMenuState'
 import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
 
 import React from 'react'
@@ -39,7 +39,7 @@ const HeaderLink = React.memo(function HeaderLink(props: any) {
   )
 })
 
-const FunctionLink = ({
+const FunctionLink = React.memo(function FunctionLink({
   title,
   id,
   icon,
@@ -53,9 +53,9 @@ const FunctionLink = ({
   product?: string
   library: string
   slug: string
-}) => {
+}) {
   const router = useRouter()
-  const activeAccordianItem = '1' // useMenuActiveRefId()
+  const activeAccordianItem = useMenuActiveRefId()
 
   // check if we're on a versioned page
   let version = ''
@@ -83,7 +83,7 @@ const FunctionLink = ({
       </Link>
     </li>
   )
-}
+})
 
 const SideMenuTitle = ({ title }: { title: string }) => {
   return (

From 89d47a470f7d134a9d3295feb57cf268b9d315dd Mon Sep 17 00:00:00 2001
From: Div Arora <root@darora.com>
Date: Tue, 20 Dec 2022 15:29:48 +0800
Subject: [PATCH 056/215] fix: typo in CC issues categories

---
 studio/components/interfaces/Support/Support.constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Support/Support.constants.ts b/studio/components/interfaces/Support/Support.constants.ts
index b0f1ca4134d..60e60efcfa2 100644
--- a/studio/components/interfaces/Support/Support.constants.ts
+++ b/studio/components/interfaces/Support/Support.constants.ts
@@ -32,7 +32,7 @@ export const CATEGORY_OPTIONS = [
   {
     value: 'Billing',
     label: 'Billing',
-    description: 'Issues with credit card charges | invoices | overcharing',
+    description: 'Issues with credit card charges | invoices | overcharging',
     query: undefined,
   },
   {

From 12be52bd3b5d0d45088df48451091167559ce787 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 08:10:39 +0100
Subject: [PATCH 057/215] chore: remove storageImageResize flag

---
 studio/components/interfaces/Reports/Reports.tsx   |  8 ++------
 .../Settings/ProjectUsageBars/ProjectUsageBars.tsx | 14 ++------------
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/studio/components/interfaces/Reports/Reports.tsx b/studio/components/interfaces/Reports/Reports.tsx
index c5b02f5b596..5fb1630fa29 100644
--- a/studio/components/interfaces/Reports/Reports.tsx
+++ b/studio/components/interfaces/Reports/Reports.tsx
@@ -17,7 +17,7 @@ import {
 } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { checkPermissions, useFlag, useStore } from 'hooks'
+import { checkPermissions, useStore } from 'hooks'
 import { uuidv4 } from 'lib/helpers'
 import { METRIC_CATEGORIES, METRICS, TIME_PERIODS_REPORTS } from 'lib/constants'
 import { useProjectContentStore } from 'stores/projectContentStore'
@@ -263,10 +263,6 @@ const Reports = () => {
     })
   }
 
-  // Filter out total_storage_image_render_count if feature flag is not enabled
-  const storageImageResizeEnabled = useFlag('storageImageResize')
-  let metrics = METRICS.filter(it => it.key !== 'total_storage_image_render_count' || storageImageResizeEnabled);
-
   const MetricOptions = () => {
     return (
       <>
@@ -277,7 +273,7 @@ const Reports = () => {
                 isNested
                 overlay={
                   <>
-                    {metrics.filter((metric) => metric?.category?.key === cat.key).map((metric) => {
+                    {METRICS.filter((metric) => metric?.category?.key === cat.key).map((metric) => {
                       return (
                         <Dropdown.Checkbox
                           key={metric.key}
diff --git a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
index fc5916d3596..cd06e465b3d 100644
--- a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
+++ b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect } from 'react'
 import { Badge, Button, IconAlertCircle, Loading } from 'ui'
 
-import { useStore, useProjectUsage, useFlag } from 'hooks'
+import { useStore, useProjectUsage } from 'hooks'
 import { formatBytes } from 'lib/helpers'
 import { PRICING_TIER_PRODUCT_IDS, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
 import SparkBar from 'components/ui/SparkBar'
@@ -56,21 +56,11 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
     )
   }
 
-  const storageImageResizeEnabled = useFlag('storageImageResize')
-
-  // Filter out storage_image_render_count if feature flag is not enabled
-  const usageBasedProducts = USAGE_BASED_PRODUCTS.map((usageBasedProduct) => ({
-    ...usageBasedProduct,
-    features: usageBasedProduct.features.filter(
-      (it) => it.key !== 'storage_image_render_count' || storageImageResizeEnabled
-    ),
-  }))
-
   return (
     <Loading active={isLoading}>
       {usage && (
         <div>
-          {usageBasedProducts.map((product) => {
+          {USAGE_BASED_PRODUCTS.map((product) => {
             const isExceededUsage =
               showUsageExceedMessage &&
               product.features

From 3fb9c6ba826895b09a124d1bc508fc9e3913bc72 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 3 Dec 2022 02:53:26 +0000
Subject: [PATCH 058/215] chore(deps): bump decode-uri-component

Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2.
- [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases)
- [Commits](https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.2)

---
updated-dependencies:
- dependency-name: decode-uri-component
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .../nuxtjs-user-management/package-lock.json         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/user-management/nuxtjs-user-management/package-lock.json b/examples/user-management/nuxtjs-user-management/package-lock.json
index 9d71565dd1e..b56ae56ac2e 100644
--- a/examples/user-management/nuxtjs-user-management/package-lock.json
+++ b/examples/user-management/nuxtjs-user-management/package-lock.json
@@ -5135,9 +5135,9 @@
       }
     },
     "node_modules/decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
       "engines": {
         "node": ">=0.10"
       }
@@ -17870,9 +17870,9 @@
       }
     },
     "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
     },
     "deepmerge": {
       "version": "4.2.2",

From 246782efde9e61ab7d4f648d9ca9f3bb1d0eb876 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 3 Dec 2022 02:53:31 +0000
Subject: [PATCH 059/215] chore(deps): bump decode-uri-component

Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2.
- [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases)
- [Commits](https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.2)

---
updated-dependencies:
- dependency-name: decode-uri-component
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .../react-user-management/package-lock.json          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/user-management/react-user-management/package-lock.json b/examples/user-management/react-user-management/package-lock.json
index bfbb8adf04f..534a7c7ab75 100644
--- a/examples/user-management/react-user-management/package-lock.json
+++ b/examples/user-management/react-user-management/package-lock.json
@@ -6397,9 +6397,9 @@
       "integrity": "sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw=="
     },
     "node_modules/decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
       "engines": {
         "node": ">=0.10"
       }
@@ -26699,9 +26699,9 @@
       "integrity": "sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw=="
     },
     "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
     },
     "dedent": {
       "version": "0.7.0",

From b85c08478ba5dfd3877c0ff6d09abf50ca7e1f4c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 3 Dec 2022 02:53:32 +0000
Subject: [PATCH 060/215] chore(deps): bump decode-uri-component

Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2.
- [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases)
- [Commits](https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.2)

---
updated-dependencies:
- dependency-name: decode-uri-component
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .../expo-user-management/package-lock.json           | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/user-management/expo-user-management/package-lock.json b/examples/user-management/expo-user-management/package-lock.json
index cf092799d1f..cd37665857e 100644
--- a/examples/user-management/expo-user-management/package-lock.json
+++ b/examples/user-management/expo-user-management/package-lock.json
@@ -7486,9 +7486,9 @@
       }
     },
     "node_modules/decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
       "engines": {
         "node": ">=0.10"
       }
@@ -25876,9 +25876,9 @@
       "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
     },
     "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og=="
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
     },
     "deep-equal": {
       "version": "1.1.1",

From 58a203c5114eebc579f68fbc29545edf16635e63 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 3 Dec 2022 02:53:41 +0000
Subject: [PATCH 061/215] chore(deps): bump decode-uri-component from 0.2.0 to
 0.2.2 in /about

Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2.
- [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases)
- [Commits](https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.2)

---
updated-dependencies:
- dependency-name: decode-uri-component
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 about/package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/about/package-lock.json b/about/package-lock.json
index 546a81ba1e7..4ec443b7240 100644
--- a/about/package-lock.json
+++ b/about/package-lock.json
@@ -5158,9 +5158,9 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
     "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
     },
     "decompress-response": {
       "version": "3.3.0",

From f1dad51f6903bedf7d1e74d49109fc5afb9ad652 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 20 Dec 2022 19:02:01 +0800
Subject: [PATCH 062/215] fix issue with accodions open

---
 .../NavigationMenuRefListItems.tsx            | 144 ++++++++------
 spec/common-client-libs-sections.json         | 188 +++++++++---------
 2 files changed, 175 insertions(+), 157 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index 148ebfe3372..2f1c8c64e02 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -85,6 +85,65 @@ const FunctionLink = React.memo(function FunctionLink({
   )
 })
 
+const RenderLink = React.memo(function RenderLink(props: any) {
+  const activeAccordianItem = useMenuActiveRefId()
+  let active = false
+
+  const isFilter = props.filterIds?.includes(activeAccordianItem)
+  const isModifier = props.modifierIds?.includes(activeAccordianItem)
+  const isAuthServer = props.authServerIds?.includes(activeAccordianItem)
+
+  if (
+    (isFilter && props.id === 'using-filters') ||
+    (activeAccordianItem === 'using-filters' && props.id === 'using-filters')
+  ) {
+    active = true
+  } else if (
+    (isModifier && props.id === 'using-modifiers') ||
+    (activeAccordianItem === 'using-modifiers' && props.id === 'using-modifiers')
+  ) {
+    active = true
+  } else if (
+    (isAuthServer && props.id === 'admin-api') ||
+    (activeAccordianItem === 'admin-api' && props.id === 'admin-api')
+  ) {
+    active = true
+  } else {
+    active = false
+  }
+
+  return (
+    <Accordion.Root
+      collapsible
+      key={props.id + '-accordian-root-for-func-' + props.index}
+      type="single"
+      value={active ? props.id : ''}
+    >
+      <Accordion.Item key={props.id + '-accordian-item'} value={props.id}>
+        <FunctionLink library={props.lib} title={props.title} id={props.id} slug={props.slug} />
+        <Accordion.Content
+          key={props.id + '-sub-items-accordion-container'}
+          className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2"
+        >
+          {props.items &&
+            props.items
+              .filter((item) => props.allowedKeys.includes(item.id))
+              .map((item) => {
+                return (
+                  <FunctionLink
+                    library={props.lib}
+                    title={item.title}
+                    id={item.id}
+                    slug={item.slug}
+                  />
+                )
+              })}
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  )
+})
+
 const SideMenuTitle = ({ title }: { title: string }) => {
   return (
     <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider mb-3">
@@ -216,65 +275,6 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
             return <></>
           }
 
-          const RenderLink = (props) => {
-            const activeAccordianItem = 'using-filters' // useMenuActiveRefId()
-            let active = false
-
-            const isFilter =
-              filterIds && filterIds.length > 0 && filterIds.includes(activeAccordianItem)
-            const isModifier =
-              modifierIds && modifierIds.length > 0 && modifierIds.includes(activeAccordianItem)
-            const isAuthServer =
-              authServerIds &&
-              authServerIds.length > 0 &&
-              authServerIds.includes(activeAccordianItem)
-
-            if (
-              (isFilter && !isModifier && !isAuthServer && props.id === 'using-filters') ||
-              (activeAccordianItem === 'using-filters' && props.id === 'using-filters')
-            ) {
-              active = true
-            } else if (
-              (isModifier && !isFilter && !isAuthServer && props.id === 'using-modifiers') ||
-              // @ts-expect-error // REMOVE TODO
-              (activeAccordianItem === 'using-modifiers' && props.id === 'using-modifiers')
-            ) {
-              active = true
-            } else if (
-              (isAuthServer && !isFilter && !isModifier && props.id === 'admin-api') ||
-              // @ts-expect-error // REMOVE TODO
-              (activeAccordianItem === 'admin-api' && props.id === 'admin-api')
-            ) {
-              active = true
-            } else {
-              active = false
-            }
-
-            return (
-              <Accordion.Root
-                collapsible
-                key={props.id + '-accordian-root-for-func-' + fnIndex}
-                type="single"
-                value={active ? props.id : ''}
-              >
-                <Accordion.Item key={props.id + '-accordian-item'} value={props.id}>
-                  <FunctionLink {...props} library={lib} />
-                  <Accordion.Content
-                    key={props.id + '-sub-items-accordion-container'}
-                    className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2"
-                  >
-                    {props.items &&
-                      props.items
-                        .filter((item) => allowedKeys.includes(item.id))
-                        .map((item) => {
-                          return <FunctionLink {...item} library={lib} />
-                        })}
-                  </Accordion.Content>
-                </Accordion.Item>
-              </Accordion.Root>
-            )
-          }
-
           // handle subtitles with subitems
           if (!fn.id) {
             return (
@@ -287,7 +287,18 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
                     .map((item) => {
                       // run allow check
                       if (isFuncNotInLibraryOrVersion(item.id, item.type)) return <></>
-                      return <RenderLink {...item} library={menu.title} />
+                      return (
+                        <RenderLink
+                          {...item}
+                          library={menu.title}
+                          index={fnIndex}
+                          modifierIds={modifierIds}
+                          filterIds={filterIds}
+                          authServerIds={authServerIds}
+                          lib={lib}
+                          allowedKeys={allowedKeys}
+                        />
+                      )
                     })}
               </>
             )
@@ -299,7 +310,18 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
                 {fn.items &&
                   fn.items
                     //.filter((item) => item.libs.includes(lib))
-                    .map((item) => <RenderLink {...item} library={menu.title} />)}
+                    .map((item) => (
+                      <RenderLink
+                        {...item}
+                        library={menu.title}
+                        index={fnIndex}
+                        modifierIds={modifierIds}
+                        filterIds={filterIds}
+                        authServerIds={authServerIds}
+                        lib={lib}
+                        allowedKeys={allowedKeys}
+                      />
+                    ))}
               </>
             )
           }
diff --git a/spec/common-client-libs-sections.json b/spec/common-client-libs-sections.json
index f1afe0b46b5..d80a1e8b3fb 100644
--- a/spec/common-client-libs-sections.json
+++ b/spec/common-client-libs-sections.json
@@ -616,107 +616,103 @@
         "product": "auth",
         "type": "function",
         "libs": ["js"]
-      }
-    ]
-  },
-  {
-    "title": "Auth Admin",
-    "libs": ["js", "js_v1"],
-    "items": [
+      },
       {
         "id": "admin-api",
-        "title": "Overview",
+        "title": "Auth Admin",
         "slug": "admin-api",
         "libs": ["js", "js_v1"],
-        "type": "function"
-      },
-      {
-        "id": "get-user-by-id",
-        "title": "Retrieve a user",
-        "slug": "auth-admin-getuserbyid",
-        "product": "auth-admin",
         "type": "function",
-        "libs": ["js"]
-      },
-      {
-        "id": "list-users",
-        "title": "List all users",
-        "slug": "auth-admin-listusers",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js", "js_v1"]
-      },
-      {
-        "id": "create-user",
-        "title": "Create a user",
-        "slug": "auth-admin-createuser",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js", "js_v1"]
-      },
-      {
-        "id": "delete-user",
-        "title": "Delete a user",
-        "slug": "auth-admin-deleteuser",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js", "js_v1"]
-      },
-      {
-        "id": "invite-user-by-email",
-        "title": "Send an email invite link",
-        "slug": "auth-admin-inviteuserbyemail",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js", "js_v1"]
-      },
-      {
-        "id": "reset-password-for-email",
-        "title": "Send a password reset request",
-        "slug": "auth-admin-resetpasswordforemail",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js"]
-      },
-      {
-        "id": "generate-link",
-        "title": "Generate an email link",
-        "slug": "auth-admin-generatelink",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js"]
-      },
-      {
-        "id": "send-mobile-otp",
-        "title": "Send a one-time passcode",
-        "slug": "auth-api-sendmobileotp",
-        "product": "auth-server",
-        "type": "function",
-        "libs": ["js_v1"]
-      },
-      {
-        "id": "update-user-by-id",
-        "title": "Update a user",
-        "slug": "auth-admin-updateuserbyid",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js", "js_v1"]
-      },
-      {
-        "id": "mfa-list-factors",
-        "title": "List all factors for a user",
-        "slug": "auth-admin-mfa-listfactors",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js"]
-      },
-      {
-        "id": "mfa-delete-factor",
-        "title": "Delete a factor for a user",
-        "slug": "auth-admin-mfa-deletefactor",
-        "product": "auth-admin",
-        "type": "function",
-        "libs": ["js"]
+        "items": [
+          {
+            "id": "get-user-by-id",
+            "title": "Retrieve a user",
+            "slug": "auth-admin-getuserbyid",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js"]
+          },
+          {
+            "id": "list-users",
+            "title": "List all users",
+            "slug": "auth-admin-listusers",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js", "js_v1"]
+          },
+          {
+            "id": "create-user",
+            "title": "Create a user",
+            "slug": "auth-admin-createuser",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js", "js_v1"]
+          },
+          {
+            "id": "delete-user",
+            "title": "Delete a user",
+            "slug": "auth-admin-deleteuser",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js", "js_v1"]
+          },
+          {
+            "id": "invite-user-by-email",
+            "title": "Send an email invite link",
+            "slug": "auth-admin-inviteuserbyemail",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js", "js_v1"]
+          },
+          {
+            "id": "reset-password-for-email",
+            "title": "Send a password reset request",
+            "slug": "auth-admin-resetpasswordforemail",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js"]
+          },
+          {
+            "id": "generate-link",
+            "title": "Generate an email link",
+            "slug": "auth-admin-generatelink",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js"]
+          },
+          {
+            "id": "send-mobile-otp",
+            "title": "Send a one-time passcode",
+            "slug": "auth-api-sendmobileotp",
+            "product": "auth-server",
+            "type": "function",
+            "libs": ["js_v1"]
+          },
+          {
+            "id": "update-user-by-id",
+            "title": "Update a user",
+            "slug": "auth-admin-updateuserbyid",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js", "js_v1"]
+          },
+          {
+            "id": "mfa-list-factors",
+            "title": "List all factors for a user",
+            "slug": "auth-admin-mfa-listfactors",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js"]
+          },
+          {
+            "id": "mfa-delete-factor",
+            "title": "Delete a factor for a user",
+            "slug": "auth-admin-mfa-deletefactor",
+            "product": "auth-admin",
+            "type": "function",
+            "libs": ["js"]
+          }
+        ]
       }
     ]
   },

From 5ccb85196f2d4da66d104cee18ad31ef348550ca Mon Sep 17 00:00:00 2001
From: winwangqi <winwangqi@live.cn>
Date: Tue, 20 Dec 2022 20:16:50 +0800
Subject: [PATCH 063/215] fix: POSTGRES_PASSWORD key (#10573)

Fix POSTGRES_PASSWORD key, consistent with /docker/.env.example POSTGRES_PASSWORD
---
 docker/volumes/db/roles.sql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker/volumes/db/roles.sql b/docker/volumes/db/roles.sql
index b369bf5af99..a592043ee5b 100644
--- a/docker/volumes/db/roles.sql
+++ b/docker/volumes/db/roles.sql
@@ -1,5 +1,5 @@
 -- NOTE: change to your own passwords for production environments
-\set pgpass `echo "$PGPASSWORD"`
+\set pgpass `echo "$POSTGRES_PASSWORD"`
 
 ALTER USER authenticator WITH PASSWORD :'pgpass';
 ALTER USER pgbouncer WITH PASSWORD :'pgpass';

From 59d92e1c20c31dba622deb4f900156aab9b41893 Mon Sep 17 00:00:00 2001
From: hallidayo <22655069+Hallidayo@users.noreply.github.com>
Date: Tue, 20 Dec 2022 12:21:41 +0000
Subject: [PATCH 064/215] fix: docs - made ilike change (#11119)

made ilike change
---
 spec/supabase_js_v2.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml
index 6bc7533f139..309fe559544 100644
--- a/spec/supabase_js_v2.yml
+++ b/spec/supabase_js_v2.yml
@@ -3704,7 +3704,7 @@ functions:
           const { data, error } = await supabase
             .from('countries')
             .select()
-            .like('name', '%alba%')
+            .ilike('name', '%alba%')
           ```
         data:
           sql: |

From a58f37ab606b2e2cc5c6c69176ba9f2a9c10b2f5 Mon Sep 17 00:00:00 2001
From: hallidayo <22655069+Hallidayo@users.noreply.github.com>
Date: Tue, 20 Dec 2022 12:22:47 +0000
Subject: [PATCH 065/215] fix: docs - integration icons (#11120)

changed to next image and change width/height
---
 apps/docs/pages/guides/integrations.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/integrations.mdx b/apps/docs/pages/guides/integrations.mdx
index f4167b280a1..60e06333e2c 100644
--- a/apps/docs/pages/guides/integrations.mdx
+++ b/apps/docs/pages/guides/integrations.mdx
@@ -1,5 +1,6 @@
 import Layout from '~/layouts/DefaultLayout'
 import Link from 'next/link'
+import Image from 'next/image'
 import { GlassPanel } from 'ui'
 import { integrations } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
 
@@ -20,7 +21,7 @@ Explore a variety of integrations from Supabase partners. Need a different integ
             <GlassPanel
               title={integration.name}
               background={false}
-              icon={<img className="w-10 h-10 rounded" src={`/docs/img/integrations/logos/${integration.name.toLowerCase()}_logo.png`}/>}
+              icon={<Image height={40} width={40} className="rounded" src={`/docs/img/integrations/logos/${integration.name.toLowerCase()}_logo.png`}/>}
             >
               {integration.description}
 

From 3d53962e975941e3e247a908e29e45332abdf67b Mon Sep 17 00:00:00 2001
From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com>
Date: Tue, 20 Dec 2022 14:02:39 +0000
Subject: [PATCH 066/215] changed column name place holders and added tips

---
 .../ColumnEditor/ColumnEditor.tsx             |  2 ++
 .../SidePanelEditor/TableEditor/Column.tsx    |  2 +-
 .../TableEditor/ColumnManagement.tsx          | 23 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index 86b44263d1f..f2cb7dcd35a 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -190,6 +190,8 @@ const ColumnEditor: FC<Props> = ({
           <Input
             label="Name"
             type="text"
+            descriptionText="Recommended to use lowercase and use an underscore to seperate words e.g. column_name"
+            placeholder='column_name'
             error={errors.name}
             value={columnFields?.name ?? ''}
             onChange={(event: any) => onUpdateField({ name: event.target.value })}
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index f435ec8964b..4939942cfa7 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -71,7 +71,7 @@ const Column: FC<Props> = ({
             size="small"
             title={column.name}
             disabled={hasImportContent}
-            placeholder="Column name"
+            placeholder="column_name"
             className={`table-editor-columns-input bg-white dark:bg-transparent lg:gap-0 ${
               hasImportContent ? 'opacity-50' : ''
             } rounded-md`}
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
index 270980835a6..d3d305ec315 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
@@ -197,8 +197,29 @@ const ColumnManagement: FC<Props> = ({
           <div className="flex w-full px-3">
             {/* Drag handle */}
             {isNewRecord && <div className="w-[5%]" />}
-            <div className="w-[25%]">
+            <div className="w-[25%] flex items-center space-x-2">
               <h5 className="text-xs text-scale-900">Name</h5>
+              <Tooltip.Root delayDuration={0}>
+                <Tooltip.Trigger>
+                  <h5 className="text-xs text-scale-900">
+                    <IconHelpCircle size={15} strokeWidth={1.5} />
+                  </h5>
+                </Tooltip.Trigger>
+                <Tooltip.Content side="bottom">
+                  <Tooltip.Arrow className="radix-tooltip-arrow" />
+                  <div
+                    className={[
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                      'border border-scale-200 ', //border
+                    ].join(' ')}
+                  >
+                    <span className="text-xs text-scale-1200">
+                      Recommended to use lowercase and use an underscore to seperate words e.g.
+                      column_name
+                    </span>
+                  </div>
+                </Tooltip.Content>
+              </Tooltip.Root>
             </div>
             <div className="w-[25%]">
               <h5 className="text-xs text-scale-900">Type</h5>

From ca225c61fb1211202bdb979209dea6d0c30173ab Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 20 Dec 2022 10:45:49 -0330
Subject: [PATCH 067/215] Update
 studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx

---
 .../SidePanelEditor/ColumnEditor/ColumnEditor.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index f2cb7dcd35a..f2d8aab8204 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -190,7 +190,7 @@ const ColumnEditor: FC<Props> = ({
           <Input
             label="Name"
             type="text"
-            descriptionText="Recommended to use lowercase and use an underscore to seperate words e.g. column_name"
+            descriptionText="Recommended to use lowercase and use an underscore to separate words e.g. column_name"
             placeholder='column_name'
             error={errors.name}
             value={columnFields?.name ?? ''}

From f2d96e7f491b45f503203105da8364285c1acb07 Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Tue, 20 Dec 2022 15:43:46 +0000
Subject: [PATCH 068/215] small spelling fixes

---
 .../SidePanelEditor/TableEditor/ColumnManagement.tsx        | 6 +++---
 studio/sentry.client.config.js                              | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
index d3d305ec315..61f8e127f80 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
@@ -142,8 +142,8 @@ const ColumnManagement: FC<Props> = ({
 
   return (
     <>
-      <div className="table-editor-columns w-full space-y-4">
-        <div className="flex w-full items-center justify-between">
+      <div className="w-full space-y-4 table-editor-columns">
+        <div className="flex items-center justify-between w-full">
           <h5>Columns</h5>
           {isNewRecord && (
             <>
@@ -214,7 +214,7 @@ const ColumnManagement: FC<Props> = ({
                     ].join(' ')}
                   >
                     <span className="text-xs text-scale-1200">
-                      Recommended to use lowercase and use an underscore to seperate words e.g.
+                      Recommended to use lowercase and use an underscore to separate words e.g.
                       column_name
                     </span>
                   </div>
diff --git a/studio/sentry.client.config.js b/studio/sentry.client.config.js
index 6ba94419d11..ccda8e0e31f 100644
--- a/studio/sentry.client.config.js
+++ b/studio/sentry.client.config.js
@@ -34,7 +34,7 @@ Sentry.init({
     // [Joshen] This is a chrome specific error, fix is out in chromium, pending chrome update
     // Ref: https://stackoverflow.com/questions/72437786/chrome-evalerror-possible-side-effect-in-debug
     'Possible side-effect in debug-evaluate',
-    // [Joshen] This event started occuring after our fix in the org dropdown by reading the slug from
+    // [Joshen] This event started occurring after our fix in the org dropdown by reading the slug from
     // the URL params instead of the store, but we cannot repro locally, staging nor on prod
     // Safe to ignore since it's not a user-facing issue + we've not received any user feedback/report about it
     // Ref: https://github.com/supabase/supabase/pull/9729

From 4a2a7ea13c228511dd7e6d33de3d2c4d51ebb07b Mon Sep 17 00:00:00 2001
From: 0xflotus <0xflotus@gmail.com>
Date: Tue, 20 Dec 2022 17:23:54 +0100
Subject: [PATCH 069/215] fix: small error in blogpost

---
 apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx b/apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx
index 1e25e3c1534..f8435ebed42 100644
--- a/apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx
+++ b/apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx
@@ -20,7 +20,7 @@ That's a wrap on Supabase Launch Week Day 6. Here's everything we shipped in one
 
 For a developer tool, documentation is more than a resource - it's part of the product. For the past two years at Supabase, this part of our product hasn't been great. Our new docs, built with Next.js, feature a completely new design, better navigation, and the promise of a fully-integrated experience.
 
-- Read the [announcememt](/blog/new-supabase-docs-built-with-nextjs)
+- Read the [announcement](/blog/new-supabase-docs-built-with-nextjs)
 - Watch the [recap on YouTube](https://www.youtube.com/watch?v=Q1Amk6iDlF8)
 - Check out [the new docs](https://supabase.com/docs)
 

From c71119ae31d569a5e0f90f8a36b5b5a02c08ba8e Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 20 Dec 2022 17:27:48 -0330
Subject: [PATCH 070/215] Delete dupe 404 page

---
 apps/docs/pages/404.tsx | 52 -----------------------------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 apps/docs/pages/404.tsx

diff --git a/apps/docs/pages/404.tsx b/apps/docs/pages/404.tsx
deleted file mode 100644
index 71b9bb5f6f5..00000000000
--- a/apps/docs/pages/404.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { Button } from 'ui'
-import Head from 'next/head'
-
-export default function Custom404() {
-  const [show404, setShow404] = useState<boolean>(false)
-
-  useEffect(() => {
-    setTimeout(() => {
-      setShow404(true)
-    }, 500)
-  }, [])
-
-  return (
-    <>
-      <Head>
-        <title>404 | Supabase</title>
-      </Head>
-      <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
-        <div className="absolute">
-          <h1
-            className={`text-scale-1200 select-none text-[14rem] opacity-[5%] filter transition duration-200 sm:text-[18rem] lg:text-[28rem] ${
-              show404 ? 'blur-sm' : 'blur-none'
-            }`}
-          >
-            404
-          </h1>
-        </div>
-        <div
-          className={`flex flex-col items-center justify-center space-y-6 transition ${
-            show404 ? 'opacity-100' : 'opacity-0'
-          }`}
-        >
-          <div className="text-scale-1200 flex w-[320px] flex-col items-center justify-center space-y-3">
-            <h1 className="m-2 text-2xl">Looking for something?</h1>
-            <p className="text-center text-sm">
-              We could not find the page that you are looking for!
-            </p>
-          </div>
-          <div className="flex items-center space-x-4">
-            <Link href="/">
-              <Button as="a" size="small" className="text-white">
-                Head back
-              </Button>
-            </Link>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

From f5716a75ce3396b4a093b9b3f2069ca5b598e567 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 20 Dec 2022 17:28:14 -0330
Subject: [PATCH 071/215] Fixes unique keys warning

---
 apps/docs/components/Navigation/Footer.tsx                 | 4 ++--
 .../docs/components/Navigation/NavigationMenu/HomeMenu.tsx | 4 ++--
 .../Navigation/NavigationMenu/NavigationMenu.tsx           | 4 ++--
 spec/common-self-hosting-storage-sections.json             | 7 -------
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 3d85d66b3cb..cbbb215e7a6 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -14,7 +14,7 @@ const Footer = () => {
           <span className="text-xs text-scale-900">Supabase 2022</span>
           <span className="text-xs text-scale-900">—</span>
           {footerData.map((item) => (
-            <Link href={item.url}>
+            <Link href={item.url} key={item.url}>
               <a className="text-xs text-scale-800 hover:underline">{item.title}</a>
             </Link>
           ))}
@@ -41,7 +41,7 @@ const Footer = () => {
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16">
               <path
                 fill="none"
-                fill-rule="nonzero"
+                fillRule="nonzero"
                 stroke={`${isDarkMode ? '#fff' : '#333'}`}
                 d="M16.238 2.16a14.628 14.628 0 0 0-3.664-1.159.055.055 0 0 0-.059.028c-.158.288-.333.662-.456.957a13.432 13.432 0 0 0-4.115 0 9.76 9.76 0 0 0-.464-.957.057.057 0 0 0-.058-.028 14.587 14.587 0 0 0-3.664 1.16.053.053 0 0 0-.024.02C1.4 5.74.76 9.21 1.074 12.637c.002.017.011.033.024.043a14.813 14.813 0 0 0 4.494 2.318.058.058 0 0 0 .064-.02c.346-.483.654-.992.92-1.527a.059.059 0 0 0-.032-.08c-.49-.19-.956-.421-1.404-.684a.06.06 0 0 1-.006-.097c.094-.072.189-.148.279-.223a.055.055 0 0 1 .058-.008c2.946 1.372 6.135 1.372 9.046 0a.055.055 0 0 1 .06.007 7.2 7.2 0 0 0 .279.224.06.06 0 0 1-.005.097 9.143 9.143 0 0 1-1.405.683.06.06 0 0 0-.03.081c.27.534.578 1.043.918 1.526.014.02.04.029.063.021A14.763 14.763 0 0 0 18.9 12.68a.06.06 0 0 0 .023-.042c.376-3.962-.628-7.404-2.66-10.455a.046.046 0 0 0-.024-.021Zm-9.223 8.39c-.887 0-1.618-.831-1.618-1.852 0-1.02.717-1.851 1.618-1.851.908 0 1.632.838 1.618 1.851 0 1.02-.717 1.851-1.618 1.851Zm5.981 0c-.887 0-1.618-.831-1.618-1.852 0-1.02.717-1.851 1.618-1.851.908 0 1.632.838 1.618 1.851 0 1.02-.71 1.851-1.618 1.851Z"
               />
diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
index e6f5e8ea4be..d4167720768 100644
--- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
@@ -129,7 +129,7 @@ const NavigationMenuHome = () => {
       <ul className="relative w-full flex flex-col gap-4">
         {home.map((section, sectionIndex) => {
           return (
-            <>
+            <div key={`section-container-${sectionIndex}-border`}>
               {sectionIndex !== 0 && (
                 <div
                   className="h-px w-full bg-blackA-300 dark:bg-whiteA-300"
@@ -176,7 +176,7 @@ const NavigationMenuHome = () => {
                   })}
                 </div>
               </div>
-            </>
+            </div>
           )
         })}
       </ul>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index b8ea7efeab4..96bb2416bcf 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -173,7 +173,7 @@ const SideNav = () => {
       <NavigationMenuGuideList id={'reference'} />
       {/* // Client Libs */}
       <NavigationMenuRefList
-        key={'reference-js-menu'}
+        key={'reference-js-menu-v1'}
         id={'reference_javascript_v1'}
         commonSections={libCommonSections}
         lib="javascript"
@@ -194,7 +194,7 @@ const SideNav = () => {
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v0)}
       />
       <NavigationMenuRefList
-        key={'reference-dart-menu'}
+        key={'reference-dart-menu-v1'}
         id={'reference_dart_v1'}
         commonSections={libCommonSections}
         lib="dart"
diff --git a/spec/common-self-hosting-storage-sections.json b/spec/common-self-hosting-storage-sections.json
index 323772b2a6a..cdcd9bcf537 100644
--- a/spec/common-self-hosting-storage-sections.json
+++ b/spec/common-self-hosting-storage-sections.json
@@ -135,13 +135,6 @@
         "summary": "Retrieve object info",
         "type": "operation"
       },
-      {
-        "id": "retrieve-object-info",
-        "title": "Retrieve object info",
-        "slug": "retrieve-object-info",
-        "summary": "Retrieve object info",
-        "type": "operation"
-      },
       {
         "id": "copies-an-object",
         "title": "Copies an object",

From 9decf4f01e6f93dc606c077c12b3b6e7256ef8f3 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 20 Dec 2022 17:28:30 -0330
Subject: [PATCH 072/215] Exclude Edit this Page button

---
 apps/docs/layouts/guides/index.tsx | 30 ++++++++++++++++++------------
 apps/docs/pages/index.mdx          |  2 +-
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 25b26b3fec7..e3b64828a60 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -31,10 +31,11 @@ const Layout: FC<Props> = (props) => {
   const [tocList, setTocList] = useState([])
 
   const { asPath } = useRouter()
-  const page = getPageType(asPath)
 
   const router = useRouter()
 
+  const EDIT_BUTTON_EXCLUDE_LIST = ['/404']
+
   useEffect(() => {
     if (hash && tocList.length > 0) {
       highlightSelectedTocItem(hash as string)
@@ -100,18 +101,23 @@ const Layout: FC<Props> = (props) => {
             )}
             <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-8"></div>
             <MDXProvider components={components}>{props.children}</MDXProvider>
-            <div className="mt-16 not-prose">
-              <div>
-                <Link
-                  href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
-                  passHref
-                >
-                  <a className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200">
-                    Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
-                  </a>
-                </Link>
+
+            {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
+              <></>
+            ) : (
+              <div className="mt-16 not-prose">
+                <div>
+                  <Link
+                    href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
+                    passHref
+                  >
+                    <a className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200">
+                      Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
+                    </a>
+                  </Link>
+                </div>
               </div>
-            </div>
+            )}
           </article>
         </div>
         {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 5a7e2f17b28..9921286f50c 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -30,7 +30,7 @@ export const meta = {
     ">
     <div className="col-span-12 lg:col-span-7 flex flex-col gap-6">
       <img className="hidden lg:visible absolute right-0 top-0 w-[500px]" src="/docs/img/cards/dark.png" />
-      <div classNam="">
+      <div className="">
         <h3 className="text-2xl m-0 mb-3">Getting Started</h3>
 
         Discover how to set up a database to an app making queries in just a few minutes.

From 8ef8d1ec648ae01f99f0294a7750c26f883cafa0 Mon Sep 17 00:00:00 2001
From: Fabian Buchenberger <37747351+ffabss@users.noreply.github.com>
Date: Tue, 20 Dec 2022 21:51:39 +0000
Subject: [PATCH 073/215] fix broken self-host/docker link in documentation

---
 apps/docs/pages/guides/self-hosting.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/self-hosting.mdx b/apps/docs/pages/guides/self-hosting.mdx
index 1c99b9765d9..950432a3803 100644
--- a/apps/docs/pages/guides/self-hosting.mdx
+++ b/apps/docs/pages/guides/self-hosting.mdx
@@ -149,7 +149,7 @@ We realize that database migrations are difficult, and this is one of the proble
 
 While Supabase officially supports Docker, we have several other deployment strategies managed by the community:
 
-- [supabase-docker](../../guides/hosting/docker) (Official)
+- [supabase-docker](./docker) (Official)
 - [supabase-kubernetes](https://github.com/supabase-community/supabase-kubernetes) (Unofficial)
 - [supabase-terraform](https://github.com/supabase-community/supabase-terraform) (Unofficial)
 - [supabase-traefik](https://github.com/supabase-community/supabase-traefik) (Unofficial)

From f9d46684c4aee6dd4f0b202e2a52e014cef54ef1 Mon Sep 17 00:00:00 2001
From: dng <danny@supabase.io>
Date: Tue, 20 Dec 2022 14:07:49 -0800
Subject: [PATCH 074/215] Update apps/docs/pages/guides/self-hosting.mdx

---
 apps/docs/pages/guides/self-hosting.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/self-hosting.mdx b/apps/docs/pages/guides/self-hosting.mdx
index 950432a3803..3092dd9cf45 100644
--- a/apps/docs/pages/guides/self-hosting.mdx
+++ b/apps/docs/pages/guides/self-hosting.mdx
@@ -149,7 +149,7 @@ We realize that database migrations are difficult, and this is one of the proble
 
 While Supabase officially supports Docker, we have several other deployment strategies managed by the community:
 
-- [supabase-docker](./docker) (Official)
+- [supabase-docker](/docs/guides/self-hosting/docker) (Official)
 - [supabase-kubernetes](https://github.com/supabase-community/supabase-kubernetes) (Unofficial)
 - [supabase-terraform](https://github.com/supabase-community/supabase-terraform) (Unofficial)
 - [supabase-traefik](https://github.com/supabase-community/supabase-traefik) (Unofficial)

From b5b1a58d408f7e0935196c3e32a0d1c04bf5e339 Mon Sep 17 00:00:00 2001
From: dng <danny@supabase.io>
Date: Tue, 20 Dec 2022 14:13:40 -0800
Subject: [PATCH 075/215] Clean up docs callout

---
 apps/docs/pages/guides/integrations/weweb.mdx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/docs/pages/guides/integrations/weweb.mdx b/apps/docs/pages/guides/integrations/weweb.mdx
index 93ddbd5f2bc..c65a695400e 100644
--- a/apps/docs/pages/guides/integrations/weweb.mdx
+++ b/apps/docs/pages/guides/integrations/weweb.mdx
@@ -39,12 +39,7 @@ Once you have added both to WeWeb, you will have the option to enable realtime t
 
 **🚨 Warning 🚨**
 
-> Realtime is disabled by default in Supabase for better database performance and security. Learn more about [realtime functionalities](https://supabase.com/docs/guides/database#realtime) in our documentation.
-> Member
-> @awalias awalias 16 days ago
-> might just wanna change these ones to be relative but otherwise looks great 👍
-
-@EWMAs Reply...
+> Realtime is disabled by default in Supabase for better database performance and security. Learn more about [realtime functionalities](/docs/guides/realtime).
 
 ## Step 2: GET Data from Supabase
 

From 10235c32b210f7261ea6009d350505862c0d1f09 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Tue, 20 Dec 2022 14:41:45 -0800
Subject: [PATCH 076/215] Add code block language for syntax highlighting

---
 .../pages/guides/integrations/authsignal.mdx  | 340 ++++++++----------
 1 file changed, 154 insertions(+), 186 deletions(-)

diff --git a/apps/docs/pages/guides/integrations/authsignal.mdx b/apps/docs/pages/guides/integrations/authsignal.mdx
index 250b822b483..65d83b22d01 100644
--- a/apps/docs/pages/guides/integrations/authsignal.mdx
+++ b/apps/docs/pages/guides/integrations/authsignal.mdx
@@ -61,7 +61,7 @@ cd supabase-authsignal-example
 
 Create a `.env.local` file and enter the following values:
 
-```
+```sh
 NEXT_PUBLIC_SUPABASE_URL=get-from-supabase-dashboard
 NEXT_PUBLIC_SUPABASE_ANON_KEY=get-from-supabase-dashboard
 AUTHSIGNAL_SECRET=get-from-authsignal-dashboard
@@ -84,19 +84,19 @@ npm run dev
 
 Install the Supabase client and Auth helpers for Next.js:
 
-```
+```bash
 npm install @supabase/supabase-js @supabase/auth-helpers-nextjs
 ```
 
 Install the Authsignal Node.js client:
 
-```
+```bash
 npm install @authsignal/node
 ```
 
 Finally install 2 packages to help encrypt and serialize session data in cookies:
 
-```
+```bash
 npm install @hapi/iron cookie
 npm install --save-dev @types/cookie
 ```
@@ -105,18 +105,18 @@ npm install --save-dev @types/cookie
 
 Add the following code to `/lib/authsignal.ts`:
 
-```
-import { Authsignal } from "@authsignal/node";
+```ts
+import { Authsignal } from '@authsignal/node'
 
-const secret = process.env.AUTHSIGNAL_SECRET;
+const secret = process.env.AUTHSIGNAL_SECRET
 
 if (!secret) {
-  throw new Error("AUTHSIGNAL_SECRET is undefined");
+  throw new Error('AUTHSIGNAL_SECRET is undefined')
 }
 
-const redirectUrl = "http://localhost:3000/api/callback";
+const redirectUrl = 'http://localhost:3000/api/callback'
 
-export const authsignal = new Authsignal({ secret, redirectUrl });
+export const authsignal = new Authsignal({ secret, redirectUrl })
 ```
 
 The `redirectUrl` here is a Next.js API route which Authsignal will redirect back to after an MFA challenge. We'll implement this below.
@@ -131,83 +131,72 @@ Next we will add some helper functions for managing cookies:
 
 Add the following code to `/lib/cookies.ts`:
 
-```
-import Iron from "@hapi/iron";
-import { Session } from "@supabase/supabase-js";
-import { parse, serialize } from "cookie";
-import { NextApiRequest, NextApiResponse } from "next";
+```ts
+import Iron from '@hapi/iron'
+import { Session } from '@supabase/supabase-js'
+import { parse, serialize } from 'cookie'
+import { NextApiRequest, NextApiResponse } from 'next'
 
 export async function setTempCookie(session: Session, res: NextApiResponse) {
-  const token = await Iron.seal(session, TEMP_TOKEN_SECRET, Iron.defaults);
+  const token = await Iron.seal(session, TEMP_TOKEN_SECRET, Iron.defaults)
 
   const cookie = serialize(TEMP_COOKIE, token, {
     maxAge: session.expires_in,
     httpOnly: true,
-    secure: process.env.NODE_ENV === "production",
-    path: "/",
-    sameSite: "lax",
-  });
+    secure: process.env.NODE_ENV === 'production',
+    path: '/',
+    sameSite: 'lax',
+  })
 
-  res.setHeader("Set-Cookie", cookie);
+  res.setHeader('Set-Cookie', cookie)
 }
 
-export async function getSessionFromTempCookie(
-  req: NextApiRequest
-): Promise<Session | undefined> {
-  const cookie = req.headers.cookie as string;
+export async function getSessionFromTempCookie(req: NextApiRequest): Promise<Session | undefined> {
+  const cookie = req.headers.cookie as string
 
-  const cookies = parse(cookie ?? "");
+  const cookies = parse(cookie ?? '')
 
-  const tempCookie = cookies[TEMP_COOKIE];
+  const tempCookie = cookies[TEMP_COOKIE]
 
   if (!tempCookie) {
-    return undefined;
+    return undefined
   }
 
-  const session = await Iron.unseal(
-    tempCookie,
-    TEMP_TOKEN_SECRET,
-    Iron.defaults
-  );
+  const session = await Iron.unseal(tempCookie, TEMP_TOKEN_SECRET, Iron.defaults)
 
-  return session;
+  return session
 }
 
 export function setAuthCookie(session: Session, res: NextApiResponse) {
-  const { access_token, refresh_token, expires_in } = session;
+  const { access_token, refresh_token, expires_in } = session
 
   const authCookies = [
     { name: ACCESS_TOKEN_COOKIE, value: access_token },
-    refresh_token
-      ? { name: REFRESH_TOKEN_COOKIE, value: refresh_token }
-      : undefined,
+    refresh_token ? { name: REFRESH_TOKEN_COOKIE, value: refresh_token } : undefined,
   ]
     .filter(isDefined)
     .map(({ name, value }) =>
       serialize(name, value, {
         maxAge: expires_in,
         httpOnly: true,
-        secure: process.env.NODE_ENV === "production",
-        path: "/",
-        sameSite: "lax",
+        secure: process.env.NODE_ENV === 'production',
+        path: '/',
+        sameSite: 'lax',
       })
-    );
+    )
 
   // Also clear the temp cookie
-  const updatedCookies = [
-    ...authCookies,
-    serialize(TEMP_COOKIE, "", { maxAge: -1, path: "/" }),
-  ];
+  const updatedCookies = [...authCookies, serialize(TEMP_COOKIE, '', { maxAge: -1, path: '/' })]
 
-  res.setHeader("Set-Cookie", updatedCookies);
+  res.setHeader('Set-Cookie', updatedCookies)
 }
 
-const isDefined = <T>(value: T | undefined): value is T => !!value;
+const isDefined = <T>(value: T | undefined): value is T => !!value
 
-const TEMP_TOKEN_SECRET = process.env.TEMP_TOKEN_SECRET!;
-const TEMP_COOKIE = "as-mfa-cookie";
-const ACCESS_TOKEN_COOKIE = "sb-access-token";
-const REFRESH_TOKEN_COOKIE = "sb-refresh-token";
+const TEMP_TOKEN_SECRET = process.env.TEMP_TOKEN_SECRET!
+const TEMP_COOKIE = 'as-mfa-cookie'
+const ACCESS_TOKEN_COOKIE = 'sb-access-token'
+const REFRESH_TOKEN_COOKIE = 'sb-refresh-token'
 ```
 
 ## Step 7: Building the UI
@@ -216,34 +205,34 @@ We will add some form components for signing in and signing up as well as a basi
 
 Add the following code to `/pages/sign-up.tsx`:
 
-```
-import Link from "next/link";
-import { useRouter } from "next/router";
+```ts
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 export default function SignUpPage() {
-  const router = useRouter();
+  const router = useRouter()
 
   return (
     <main>
       <form
         onSubmit={async (e) => {
-          e.preventDefault();
+          e.preventDefault()
 
           const target = e.target as typeof e.target & {
-            email: { value: string };
-            password: { value: string };
-          };
+            email: { value: string }
+            password: { value: string }
+          }
 
-          const email = target.email.value;
-          const password = target.password.value;
+          const email = target.email.value
+          const password = target.password.value
 
-          await fetch("/api/sign-up", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
+          await fetch('/api/sign-up', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ email, password }),
-          }).then((res) => res.json());
+          }).then((res) => res.json())
 
-          router.push("/");
+          router.push('/')
         }}
       >
         <label htmlFor="email">Email</label>
@@ -253,49 +242,49 @@ export default function SignUpPage() {
         <button type="submit">Sign up</button>
       </form>
       <div>
-        {"Already have an account? "}
+        {'Already have an account? '}
         <Link href="sign-in">
           <a>Sign in</a>
         </Link>
       </div>
     </main>
-  );
+  )
 }
 ```
 
 Then add the following code to `/pages/sign-in.tsx`:
 
-```
-import Link from "next/link";
-import { useRouter } from "next/router";
+```ts
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 export default function SignInPage() {
-  const router = useRouter();
+  const router = useRouter()
 
   return (
     <main>
       <form
         onSubmit={async (e) => {
-          e.preventDefault();
+          e.preventDefault()
 
           const target = e.target as typeof e.target & {
-            email: { value: string };
-            password: { value: string };
-          };
+            email: { value: string }
+            password: { value: string }
+          }
 
-          const email = target.email.value;
-          const password = target.password.value;
+          const email = target.email.value
+          const password = target.password.value
 
-          const { state, mfaUrl } = await fetch("/api/sign-in", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
+          const { state, mfaUrl } = await fetch('/api/sign-in', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ email, password }),
-          }).then((res) => res.json());
+          }).then((res) => res.json())
 
-          if (state === "CHALLENGE_REQUIRED") {
-            window.location.href = mfaUrl;
+          if (state === 'CHALLENGE_REQUIRED') {
+            window.location.href = mfaUrl
           } else {
-            router.push("/");
+            router.push('/')
           }
         }}
       >
@@ -312,38 +301,38 @@ export default function SignInPage() {
         </Link>
       </div>
     </main>
-  );
+  )
 }
 ```
 
 Now we will use Supabase's `withPageAuth` wrapper around `getServerSideProps` to make the home page require authentication via SSR. Replace the existing code in `/pages/index.tsx` with the following:
 
-```
-import { getUser, User, withPageAuth } from "@supabase/auth-helpers-nextjs";
-import { GetServerSideProps } from "next";
-import { useRouter } from "next/router";
-import { authsignal } from "../lib/authsignal";
+```ts
+import { getUser, User, withPageAuth } from '@supabase/auth-helpers-nextjs'
+import { GetServerSideProps } from 'next'
+import { useRouter } from 'next/router'
+import { authsignal } from '../lib/authsignal'
 
 interface Props {
-  user: User;
-  isEnrolled: boolean;
+  user: User
+  isEnrolled: boolean
 }
 
 export const getServerSideProps: GetServerSideProps<Props> = withPageAuth({
-  redirectTo: "/sign-in",
+  redirectTo: '/sign-in',
   async getServerSideProps(ctx) {
-    const { user } = await getUser(ctx);
+    const { user } = await getUser(ctx)
 
-    const { isEnrolled } = await authsignal.getUser({userId: user.id});
+    const { isEnrolled } = await authsignal.getUser({ userId: user.id })
 
     return {
       props: { user, isEnrolled },
-    };
+    }
   },
-});
+})
 
 export default function HomePage({ user, isEnrolled }: Props) {
-  const router = useRouter();
+  const router = useRouter()
 
   return (
     <main>
@@ -351,29 +340,29 @@ export default function HomePage({ user, isEnrolled }: Props) {
         <div> Signed in as: {user?.email}</div>
         <button
           onClick={async (e) => {
-            e.preventDefault();
+            e.preventDefault()
 
-            const { mfaUrl } = await fetch("/api/mfa", {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
+            const { mfaUrl } = await fetch('/api/mfa', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({ isEnrolled }),
-            }).then((res) => res.json());
+            }).then((res) => res.json())
 
-            window.location.href = mfaUrl;
+            window.location.href = mfaUrl
           }}
         >
-          {isEnrolled ? "Manage MFA settings" : "Set up MFA"}
+          {isEnrolled ? 'Manage MFA settings' : 'Set up MFA'}
         </button>
-        <button onClick={() => router.push("/api/sign-out")}>Sign out</button>
+        <button onClick={() => router.push('/api/sign-out')}>Sign out</button>
       </section>
     </main>
-  );
+  )
 }
 ```
 
 Optional: To make things look a bit nicer, you can add the following to `/styles/globals.css`:
 
-```
+```css
 main {
   min-height: 100vh;
   display: flex;
@@ -435,113 +424,95 @@ Now we'll replace the existing api routes in `/pages/api/` with 5 new routes:
 
 Add the following code to `/pages/api/sign-in.ts`:
 
-```
-import { supabaseClient } from "@supabase/auth-helpers-nextjs";
-import { NextApiRequest, NextApiResponse } from "next";
-import { authsignal } from "../../lib/authsignal";
-import { setAuthCookie, setTempCookie } from "../../lib/cookies";
+```ts
+import { supabaseClient } from '@supabase/auth-helpers-nextjs'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { authsignal } from '../../lib/authsignal'
+import { setAuthCookie, setTempCookie } from '../../lib/cookies'
 
-export default async function signIn(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { email, password } = req.body;
+export default async function signIn(req: NextApiRequest, res: NextApiResponse) {
+  const { email, password } = req.body
 
-  const { data, error } = await supabaseClient.auth.api.signInWithEmail(
-    email,
-    password
-  );
+  const { data, error } = await supabaseClient.auth.api.signInWithEmail(email, password)
 
   if (error || !data?.user) {
-    return res.send({ error });
+    return res.send({ error })
   }
 
   const { state, url: mfaUrl } = await authsignal.track({
-    action: "signIn",
+    action: 'signIn',
     userId: data.user.id,
-  });
+  })
 
-  if (state === "CHALLENGE_REQUIRED") {
-    await setTempCookie(data, res);
+  if (state === 'CHALLENGE_REQUIRED') {
+    await setTempCookie(data, res)
   } else {
-    setAuthCookie(data, res);
+    setAuthCookie(data, res)
   }
 
-  res.send({ state, mfaUrl });
+  res.send({ state, mfaUrl })
 }
 ```
 
 Then to handle new sign-ups add the following to `/pages/api/sign-up.ts`:
 
-```
-import { supabaseClient } from "@supabase/auth-helpers-nextjs";
-import { Session } from "@supabase/supabase-js";
-import { NextApiRequest, NextApiResponse } from "next";
-import { setAuthCookie } from "../../lib/cookies";
+```ts
+import { supabaseClient } from '@supabase/auth-helpers-nextjs'
+import { Session } from '@supabase/supabase-js'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { setAuthCookie } from '../../lib/cookies'
 
-export default async function signUp(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { email, password } = req.body;
+export default async function signUp(req: NextApiRequest, res: NextApiResponse) {
+  const { email, password } = req.body
 
-  const { data, error } = await supabaseClient.auth.api.signUpWithEmail(
-    email,
-    password
-  );
+  const { data, error } = await supabaseClient.auth.api.signUpWithEmail(email, password)
 
   if (error || !isSession(data)) {
-    res.send({ error });
+    res.send({ error })
   } else {
-    setAuthCookie(data, res);
-    res.send({ data });
+    setAuthCookie(data, res)
+    res.send({ data })
   }
 }
 
-const isSession = (data: any): data is Session => !!data?.access_token;
+const isSession = (data: any): data is Session => !!data?.access_token
 ```
 
 To clear the auth cookies on sign-out add the following to `/pages/api/sign-out.ts`:
 
-```
-import { supabaseClient } from "@supabase/auth-helpers-nextjs";
-import { NextApiRequest, NextApiResponse } from "next";
+```ts
+import { supabaseClient } from '@supabase/auth-helpers-nextjs'
+import { NextApiRequest, NextApiResponse } from 'next'
 
-export default async function signOut(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  supabaseClient.auth.api.deleteAuthCookie(req, res, { redirectTo: "/sign-in" });
+export default async function signOut(req: NextApiRequest, res: NextApiResponse) {
+  supabaseClient.auth.api.deleteAuthCookie(req, res, { redirectTo: '/sign-in' })
 }
 ```
 
 To handle the user's actions to set up MFA or manage their existing MFA settings, add the following to `/pages/api/mfa.ts`:
 
-```
-import { getUser, withApiAuth } from "@supabase/auth-helpers-nextjs";
-import { NextApiRequest, NextApiResponse } from "next";
-import { authsignal } from "../../lib/authsignal";
+```ts
+import { getUser, withApiAuth } from '@supabase/auth-helpers-nextjs'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { authsignal } from '../../lib/authsignal'
 
-export default withApiAuth(async function mfa(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  if (req.method !== "POST") {
-    return res.status(405).send({ message: "Only POST requests allowed" });
+export default withApiAuth(async function mfa(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') {
+    return res.status(405).send({ message: 'Only POST requests allowed' })
   }
 
-  const { user } = await getUser({ req, res });
+  const { user } = await getUser({ req, res })
 
-  const { isEnrolled } = req.body;
+  const { isEnrolled } = req.body
 
   const { url: mfaUrl } = await authsignal.track({
-    action: isEnrolled ? "manageSettings" : "enroll",
+    action: isEnrolled ? 'manageSettings' : 'enroll',
     userId: user.id,
     redirectToSettings: isEnrolled,
-  });
+  })
 
-  res.send({ mfaUrl });
-});
+  res.send({ mfaUrl })
+})
 ```
 
 Because the user should be authenticated with Supabase to set up or manage MFA, we can use Supabase's `withApiAuth` wrapper to protect this route.
@@ -550,28 +521,25 @@ The `redirectToSettings` param specifies whether the user should be redirected t
 
 Finally we need a route to handle the redirect back from Authsignal after an MFA challenge. Add the following to `/pages/api/callback.ts`:
 
-```
-import { NextApiRequest, NextApiResponse } from "next";
-import { authsignal } from "../../lib/authsignal";
-import { getSessionFromTempCookie, setAuthCookie } from "../../lib/cookies";
+```ts
+import { NextApiRequest, NextApiResponse } from 'next'
+import { authsignal } from '../../lib/authsignal'
+import { getSessionFromTempCookie, setAuthCookie } from '../../lib/cookies'
 
-export default async function callback(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const token = req.query.token as string;
+export default async function callback(req: NextApiRequest, res: NextApiResponse) {
+  const token = req.query.token as string
 
-  const { success } = await authsignal.validateChallenge({ token });
+  const { success } = await authsignal.validateChallenge({ token })
 
   if (success) {
-    const session = await getSessionFromTempCookie(req);
+    const session = await getSessionFromTempCookie(req)
 
     if (session) {
-      setAuthCookie(session, res);
+      setAuthCookie(session, res)
     }
   }
 
-  res.redirect("/");
+  res.redirect('/')
 }
 ```
 

From efbd726b12ab0fcb89ebe030bc9c50a9b3a87934 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Tue, 20 Dec 2022 14:42:08 -0800
Subject: [PATCH 077/215] Allow images from raw.githubusercontent.com

---
 apps/docs/next.config.mjs | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
index 9762c179622..bf98d6d34fd 100644
--- a/apps/docs/next.config.mjs
+++ b/apps/docs/next.config.mjs
@@ -48,7 +48,12 @@ const nextConfig = {
   basePath: '/docs',
   images: {
     dangerouslyAllowSVG: true,
-    domains: ['avatars.githubusercontent.com', 'github.com', 'user-images.githubusercontent.com'],
+    domains: [
+      'avatars.githubusercontent.com',
+      'github.com',
+      'user-images.githubusercontent.com',
+      'raw.githubusercontent.com',
+    ],
   },
   experimental: {
     mdxRs: true,

From ec7dc6dd7e5ebe0bf60654324906a33a525f402f Mon Sep 17 00:00:00 2001
From: ethicnology <ethicnology@pm.me>
Date: Wed, 21 Dec 2022 00:22:58 +0100
Subject: [PATCH 078/215] fix: deprecated docker-compose in favour of compose
 v2

---
 apps/docs/pages/faq.mdx                               | 2 +-
 apps/docs/pages/guides/self-hosting/docker.mdx        | 6 +++---
 apps/www/_blog/2020-07-10-alpha-launch-postmortem.mdx | 8 ++++----
 apps/www/_blog/2021-03-31-supabase-cli.mdx            | 2 +-
 docker/docker-compose.yml                             | 8 ++++----
 package.json                                          | 8 ++++----
 studio/README.md                                      | 4 ++--
 tests/package.json                                    | 4 ++--
 8 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/apps/docs/pages/faq.mdx b/apps/docs/pages/faq.mdx
index eced1e89829..66c0c120969 100644
--- a/apps/docs/pages/faq.mdx
+++ b/apps/docs/pages/faq.mdx
@@ -16,7 +16,7 @@ Self-hosting Supabase is free. If you wish to use our cloud-platform, we provide
 
 ### How do I host Supabase?
 
-You can use the docker-compose script [here](https://github.com/supabase/supabase/tree/master/docker), and find detailed instructions [here](/docs/guides/hosting/overview).
+You can use the docker compose script [here](https://github.com/supabase/supabase/tree/master/docker), and find detailed instructions [here](/docs/guides/hosting/overview).
 
 Supabase is an amalgamation of open source tools. Some of these tools are made by Supabase (like our [Realtime Server](https://github.com/supabase/realtime)), some we support directly (like [PostgREST](http://postgrest.org/en/v7.0.0/)), and some are third-party tools (like [KonSupabase is an amalgamation open sourceg](https://github.com/Kong/kong)).
 
diff --git a/apps/docs/pages/guides/self-hosting/docker.mdx b/apps/docs/pages/guides/self-hosting/docker.mdx
index 08da99ae31c..0a32049889b 100644
--- a/apps/docs/pages/guides/self-hosting/docker.mdx
+++ b/apps/docs/pages/guides/self-hosting/docker.mdx
@@ -11,7 +11,7 @@ Docker is the easiest way to get started with self-hosted Supabase.
 
 You need the following installed in your system:
 
-- [Docker](https://docs.docker.com/engine/install/) and [docker-compose](https://docs.docker.com/compose/install/)
+- [Docker](https://docs.docker.com/engine/install/) and [docker compose](https://docs.docker.com/compose/install/)
 - [Git](https://git-scm.com/downloads)
 
 ## Quick Start
@@ -31,7 +31,7 @@ cd supabase/docker
 cp .env.example .env
 
 # Start
-docker-compose up
+docker compose up
 ```
 
 Now visit [http://localhost:3000](http://localhost:3000) to start using Supabase Studio.
@@ -97,7 +97,7 @@ Once you have done this, you can safely comment out the `db` section of the `doc
 
 ### Setting database's `log_min_messages`
 
-By default, `docker-compose` sets the database's `log_min_messages` configuration to `fatal` to prevent redundant logs generated by Realtime.
+By default, `docker compose` sets the database's `log_min_messages` configuration to `fatal` to prevent redundant logs generated by Realtime.
 However, you might miss important log messages such as database errors. Configure `log_min_messages` based on your needs.
 
 ### File storage backend on macOS
diff --git a/apps/www/_blog/2020-07-10-alpha-launch-postmortem.mdx b/apps/www/_blog/2020-07-10-alpha-launch-postmortem.mdx
index 61bb85d236e..f0186212be6 100644
--- a/apps/www/_blog/2020-07-10-alpha-launch-postmortem.mdx
+++ b/apps/www/_blog/2020-07-10-alpha-launch-postmortem.mdx
@@ -37,13 +37,13 @@ GitHub stars rocketed for our two main repos, [supabase](https://github.com/supa
 
 Here are the things that survived well.
 
-### Middleware: docker-compose up
+### Middleware: docker compose up
 
-This was the most surprising survivor. Our middleware was served from a single Ubuntu server with 4 CPUs and 8GB of RAM. This server was running our middleware using `docker-compose up`:
+This was the most surprising survivor. Our middleware was served from a single Ubuntu server with 4 CPUs and 8GB of RAM. This server was running our middleware using `docker compose up`:
 
-![This image shows in middleware architecture. We used docker-compose to pull up 5 open source tools: Kong, Realtime, PostgREST, PG-API, and PG-BOSS.](/images/blog/supabase-middleware-docker.png)
+![This image shows in middleware architecture. We used docker compose to pull up 5 open source tools: Kong, Realtime, PostgREST, PG-API, and PG-BOSS.](/images/blog/supabase-middleware-docker.png)
 
-In case you're wondering why any sane company would use that in production, it's because we weren't planning to launch - the HackerNews post was created by an early GitHub follower, while we were alpha testing, and it was too scary to migrate the middleware while it was servicing the thundering herd. All Supabase projects use the same middleware stack (sans docker-compose), so I guess this counts as as a successful load test.
+In case you're wondering why any sane company would use that in production, it's because we weren't planning to launch - the HackerNews post was created by an early GitHub follower, while we were alpha testing, and it was too scary to migrate the middleware while it was servicing the thundering herd. All Supabase projects use the same middleware stack (without docker compose), so I guess this counts as a successful load test.
 
 We have since migrated our middleware to multiple ECS clusters, globally load-balanced using AWS's [Global Accelerator](https://aws.amazon.com/global-accelerator/).
 
diff --git a/apps/www/_blog/2021-03-31-supabase-cli.mdx b/apps/www/_blog/2021-03-31-supabase-cli.mdx
index b24682700de..ea8d4c94ed8 100644
--- a/apps/www/_blog/2021-03-31-supabase-cli.mdx
+++ b/apps/www/_blog/2021-03-31-supabase-cli.mdx
@@ -217,7 +217,7 @@ Also check `kong.yml` inside the `kong` directory where you'll see how all the s
 Once you're all set, you can start the stack by running:
 
 ```bash
-docker-compose up
+docker compose up
 ```
 
 Head over to the [Self Hosting Docs](/docs/guides/self-hosting) for a more complete walk through, it also includes several [one-click deploys](/docs/guides/self-hosting#one-click-deploys), so you can easily deploy into your own cloud hosting provider.
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 70da7c553bd..659c501cde3 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -1,8 +1,8 @@
 # Usage
-#   Start:          docker-compose up
-#   With helpers:   docker-compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up
-#   Stop:           docker-compose down
-#   Destroy:        docker-compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml down -v --remove-orphans
+#   Start:          docker compose up
+#   With helpers:   docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up
+#   Stop:           docker compose down
+#   Destroy:        docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml down -v --remove-orphans
 
 version: "3.8"
 
diff --git a/package.json b/package.json
index 4a605d28309..bf893aa1978 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,10 @@
     "dev:www": "turbo run dev --filter=www --parallel",
     "lint": "turbo run lint",
     "format": "prettier --write \"apps/**/*.{js,jsx,ts,tsx,css,md,json}\"",
-    "docker:dev": "cd docker && docker-compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up --renew-anon-volumes",
-    "docker:up": "cd docker && docker-compose up",
-    "docker:down": "cd docker && docker-compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml down --remove-orphans",
-    "docker:remove": "cd docker && docker-compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml rm -vfs",
+    "docker:dev": "cd docker && docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up --renew-anon-volumes",
+    "docker:up": "cd docker && docker compose up",
+    "docker:down": "cd docker && docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml down --remove-orphans",
+    "docker:remove": "cd docker && docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml rm -vfs",
     "test": "jest",
     "test:studio": "turbo run test --filter=studio",
     "perf:kong": "ab -t 5 -c 20 -T application/json http://localhost:8000/",
diff --git a/studio/README.md b/studio/README.md
index 4b9929f4a48..2c4fda0ba60 100644
--- a/studio/README.md
+++ b/studio/README.md
@@ -19,7 +19,7 @@ As such, the features exposed on Studio for existing deployments are limited to
 
 ## Managing Project Settings
 
-Project settings are managed outside of the Dashboard. If you use docker-compose, you should manage the settings in your docker-compose file. If you're deploying Supabase to your own cloud, you should store your secrets and env vars in a vault or secrets manager.
+Project settings are managed outside of the Dashboard. If you use docker compose, you should manage the settings in your docker-compose file. If you're deploying Supabase to your own cloud, you should store your secrets and env vars in a vault or secrets manager.
 
 ## How to contribute?
 
@@ -51,7 +51,7 @@ Follow the [self-hosting guide](https://supabase.com/docs/guides/hosting/docker)
 ```
 cd ..
 cd docker
-docker-compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up
+docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up
 ```
 
 Once you've got that set up, update `.env` in the studio folder with the corresponding values.
diff --git a/tests/package.json b/tests/package.json
index 1633462bdbc..4f6b77c6c84 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "description": "These tests can be run with Docker.",
   "scripts": {
-    "docker:up": "cd ../docker && ENABLE_EMAIL_AUTOCONFIRM=true docker-compose --env-file ./.env -f docker-compose.yml -f dev/docker-compose.dev.yml up -d",
-    "docker:down": "cd ../docker && docker-compose --env-file ./.env -f docker-compose.yml -f dev/docker-compose.dev.yml down",
+    "docker:up": "cd ../docker && ENABLE_EMAIL_AUTOCONFIRM=true docker compose --env-file ./.env -f docker-compose.yml -f dev/docker-compose.dev.yml up -d",
+    "docker:down": "cd ../docker && docker compose --env-file ./.env -f docker-compose.yml -f dev/docker-compose.dev.yml down",
     "test": "jest",
     "test:local": "jest --testNamePattern '^((?!\\[skip-local\\]).)*$' --testPathPattern '^((?!realtime).)*$' --detectOpenHandles",
     "test:stage": "jest --testNamePattern '^((?!\\[skip-stage\\]).)*$' --detectOpenHandles",

From d36cc5de2601494cfc4e008bc0a674ee4071709e Mon Sep 17 00:00:00 2001
From: Long Hoang <long@mindworker.de>
Date: Wed, 21 Dec 2022 10:13:20 +0700
Subject: [PATCH 079/215] Remove currently happening

---
 apps/www/pages/launch-week/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index 225de69fcb0..d9248069b7c 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -38,7 +38,7 @@ export default function launchweek() {
   const { isDarkMode } = useTheme()
   const title = 'Launch Week 6'
   const description = 'Supabase Launch Week 6 | 12-18 Dec 2022'
-  const liveDay = 'Friday'
+  const liveDay = null
 
   const [supabase] = useState(() =>
     createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)

From eab07390b72e1b79f7747dea7b317ce2d309b0ea Mon Sep 17 00:00:00 2001
From: Long Hoang <long@mindworker.de>
Date: Wed, 21 Dec 2022 10:26:35 +0700
Subject: [PATCH 080/215] Remove jump to current day on launchweek page

---
 apps/www/pages/launch-week/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index d9248069b7c..7888948b8c7 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -219,11 +219,6 @@ export default function launchweek() {
             )}
           ></div>
         </div>
-        <a className="flex items-center justify-center mb-20" href="#currentDay">
-          <div className="border border-slate-600 text-black dark:text-white text-sm rounded-full bg-slate-400 px-2 py-1 hover:bg-slate-600">
-            Jump to current day
-          </div>
-        </a>
         {process.env.NEXT_PUBLIC_LW_STARTED && (
           <>
             <SectionContainer className="!py-0 ">

From 06d5476f2544bbfb8b1570935d532659c102db0c Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 21 Dec 2022 12:19:21 +0800
Subject: [PATCH 081/215] remove memo

---
 apps/docs/components/DocSearch.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/docs/components/DocSearch.tsx b/apps/docs/components/DocSearch.tsx
index 19e1c85be8b..1738200c85d 100644
--- a/apps/docs/components/DocSearch.tsx
+++ b/apps/docs/components/DocSearch.tsx
@@ -16,7 +16,7 @@ const APP_ID = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID
 
 const SearchContext = createContext(null)
 
-function SearchProviderContent({ children }: any) {
+export function SearchProvider({ children }: any) {
   const router = useRouter()
   const [isOpen, setIsOpen] = useState(false)
   const [initialQuery, setInitialQuery] = useState(null)
@@ -115,10 +115,6 @@ function SearchProviderContent({ children }: any) {
   )
 }
 
-const SearchProvider = memo(SearchProviderContent)
-
-export { SearchProvider }
-
 // @ts-ignore
 function Hit({ hit, children }) {
   return (

From 9bb3f4f310014e7cc2bfb020eef6d06fc68f5868 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 21 Dec 2022 12:28:07 +0800
Subject: [PATCH 082/215] remove console logs

---
 apps/docs/components/DocSearch.tsx                     |  2 +-
 .../NavigationMenu/NavigationMenuRefListItems.tsx      | 10 ----------
 apps/docs/layouts/ref/RefSubLayout.tsx                 |  2 --
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/apps/docs/components/DocSearch.tsx b/apps/docs/components/DocSearch.tsx
index 1738200c85d..7ff1a5ece2a 100644
--- a/apps/docs/components/DocSearch.tsx
+++ b/apps/docs/components/DocSearch.tsx
@@ -84,7 +84,7 @@ export function SearchProvider({ children }: any) {
             hitComponent={Hit}
             transformItems={(items) => {
               return items.map((item, index) => {
-                console.log('item', item)
+                // console.log('item', item)
                 // We transform the absolute URL into a relative URL to
                 // leverage Next's preloading.
                 const a = document.createElement('a')
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index 2f1c8c64e02..dc309823ad7 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -170,13 +170,6 @@ interface INavigationMenuRefList {
 const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, spec }) => {
   const allowedClientKeys = spec ? generateAllowedClientLibKeys(commonSections, spec) : undefined
 
-  console.log(
-    id && 'id changed',
-    lib && 'lib changed',
-    commonSections && 'commonSections changed',
-    allowedClientKeys && 'allowedClientKeys changed'
-  )
-
   let sections = commonSections
 
   const allowedKeys = allowedClientKeys
@@ -226,9 +219,6 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
         }).items.map((x) => x.id)
       : []
 
-  // console.log(filterIds)
-  // console.log(modifierIds)
-
   return (
     <div className={'w-full flex flex-col gap-0 sticky top-8'}>
       <Link href="/" passHref>
diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index 3357e427ed1..84305bb4c00 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -55,7 +55,6 @@ const RefSubLayout: FC<RefSubLayoutType> & RefSubLayoutSubComponents = (props) =
 }
 
 const Section: FC<ISectionContainer> = (props) => {
-  // console.log({ props })
   return (
     <article
       key={props.id}
@@ -149,7 +148,6 @@ const EducationRow: FC<IEducationRow> = (props) => {
 }
 
 const EducationSection: FC<IEducationSection> = ({ icon, hideTitle = false, ...props }) => {
-  // console.log({ props })
   return (
     <article
       key={props.id}

From 2b567a9888c5d4fbfb27902a4ada9c70a2647b6b Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 21 Dec 2022 13:27:15 +0800
Subject: [PATCH 083/215] mobile menu updates

---
 apps/docs/layouts/SiteLayout.tsx | 582 +++++++++++++++++--------------
 apps/docs/pages/_app.tsx         |   1 -
 2 files changed, 315 insertions(+), 268 deletions(-)

diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 45f734e61ca..8d8a116c7ad 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -7,16 +7,310 @@ import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
 
 import FooterHelpCallout from '~/components/FooterHelpCallout'
 
-import {
-  menuState,
-  // useMenuLevelId,
-  // useMenuMobileOpen
-} from '~/hooks/useMenuState'
-import { useEffect } from 'react'
+import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
+import { memo, useEffect } from 'react'
 import Footer from '~/components/Navigation/Footer'
 
-const SiteLayout = ({ children }) => {
+const levelsData = {
+  home: {
+    icon: '/docs/img/icons/menu/home',
+    name: 'Home',
+  },
+  gettingstarted: {
+    icon: '/docs/img/icons/menu/getting-started',
+    name: 'Getting Started',
+  },
+  database: {
+    icon: '/docs/img/icons/menu/database',
+    name: 'Database',
+  },
+  auth: {
+    icon: '/docs/img/icons/menu/auth',
+    name: 'Auth',
+  },
+  functions: {
+    icon: '/docs/img/icons/menu/functions',
+    name: 'Functions',
+  },
+  realtime: {
+    icon: '/docs/img/icons/menu/realtime',
+    name: 'Realtime',
+  },
+  storage: {
+    icon: '/docs/img/icons/menu/storage',
+    name: 'Storage',
+  },
+  platform: {
+    icon: '/docs/img/icons/menu/platform',
+    name: 'Platform',
+  },
+  resources: {
+    icon: '/docs/img/icons/menu/resources',
+    name: 'Resources',
+  },
+  self_hosting: {
+    icon: '/docs/img/icons/menu/self-hosting',
+    name: 'Self-Hosting',
+  },
+  integrations: {
+    icon: '/docs/img/icons/menu/integrations',
+    name: 'Integrations',
+  },
+  reference_javascript_v1: {
+    icon: '/docs/img/icons/menu/reference-javascript',
+    name: 'Javascript Reference v1.0',
+  },
+  reference_javascript_v2: {
+    icon: '/docs/img/icons/menu/reference-javascript',
+    name: 'Javascript Reference v2.0',
+  },
+  reference_dart_v0: {
+    icon: '/docs/img/icons/menu/reference-dart',
+    name: 'Dart Reference v0.0',
+  },
+  reference_dart_v1: {
+    icon: '/docs/img/icons/menu/reference-dart',
+    name: 'Dart Reference v0.0',
+  },
+  reference_cli: {
+    icon: '/docs/img/icons/menu/reference-cli',
+    name: 'CLI Reference',
+  },
+  reference_api: {
+    icon: '/docs/img/icons/menu/reference-api',
+    name: 'Management API Reference',
+  },
+  reference_self_hosting_auth: {
+    icon: '/docs/img/icons/menu/reference-auth',
+    name: 'Auth Server Reference',
+  },
+  reference_self_hosting_storage: {
+    icon: '/docs/img/icons/menu/reference-storage',
+    name: 'Storage Server Reference',
+  },
+  reference_self_hosting_realtime: {
+    icon: '/docs/img/icons/menu/reference-realtime',
+    name: 'Realtime Server Reference',
+  },
+}
+
+const MobileHeader = memo(function MobileHeader() {
+  const mobileMenuOpen = useMenuMobileOpen()
+  const menuLevel = useMenuLevelId()
+
+  return (
+    <div
+      className={[
+        'transition-all ease-out z-10',
+        'top-0',
+        mobileMenuOpen && 'absolute',
+        'flex items-center h-[40px]',
+        mobileMenuOpen ? 'gap-0' : 'gap-3',
+      ].join(' ')}
+    >
+      <button
+        className={['mr-2', mobileMenuOpen && 'mt-0.5'].join(' ')}
+        onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
+      >
+        <div
+          className={[
+            'space-y-1 group cursor-pointer relative',
+            mobileMenuOpen ? 'w-4 h-4' : 'w-4 h-[8px]',
+          ].join(' ')}
+        >
+          <span
+            className={[
+              'transition-all ease-out block w-4 h-px bg-scale-900 group-hover:bg-scale-1200',
+              !mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]',
+            ].join(' ')}
+          ></span>
+          <span
+            className={[
+              'transition-all ease-out block h-px bg-scale-900 group-hover:bg-scale-1200',
+              !mobileMenuOpen ? 'w-3 group-hover:w-4' : 'absolute w-4 -rotate-45 top-[2px]',
+            ].join(' ')}
+          ></span>
+        </div>
+      </button>
+      <div className={[].join(' ')}>
+        <img
+          src={menuLevel ? levelsData[menuLevel].icon + '.svg' : levelsData['home'].icon + '.svg'}
+          className={[
+            'transition-all duration-200',
+            mobileMenuOpen ? 'invisible w-0 h-0' : 'w-4 h-4',
+          ].join(' ')}
+        />
+      </div>
+      <span
+        className={[
+          'transition-all duration-200',
+          'text-scale-1200',
+          mobileMenuOpen ? 'text-xs' : 'text-sm',
+        ].join(' ')}
+      >
+        {mobileMenuOpen
+          ? 'Close'
+          : menuLevel
+          ? levelsData[menuLevel].name
+          : levelsData['home'].name}
+      </span>
+    </div>
+  )
+})
+
+const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
+  const mobileMenuOpen = useMenuMobileOpen()
+  return (
+    <div
+      className={[
+        'hidden',
+        'h-full',
+        'left-0',
+        'right-0',
+        'z-10',
+        'backdrop-blur-sm backdrop-filter bg-white-1200 dark:bg-blackA-600',
+        mobileMenuOpen ? 'absolute h-full w-full' : 'hidden h-0',
+      ].join(' ')}
+      onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
+    ></div>
+  )
+})
+
+// const SideMenu = memo(function SideMenu() {
+//   const mobileMenuOpen = useMenuMobileOpen()
+
+//   return (
+//     <div
+//       className={[
+//         'transition-all ease-out duration-200',
+//         'absolute left-0 right-0 h-screen',
+//         'px-5 pl-5 py-16',
+//         'top-[0px]',
+//         'bg-scale-200',
+//         mobileMenuOpen
+//           ? 'overflow-y-auto opacity-100 left-[0px] visible'
+//           : 'left-[-40px] h-0 opacity-0 invisible',
+//       ].join(' ')}
+//     >
+//       <NavigationMenu />
+//     </div>
+//   )
+// })
+
+const SideMenu = memo(function SideMenu() {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  return (
+    <div
+      className={[
+        'transition-all ease-out duration-200',
+        'absolute left-0 right-0 h-screen',
+        'px-5 pl-5 py-16',
+        'top-[0px]',
+        'bg-scale-200',
+        // mobileMenuOpen
+        //   ? 'overflow-y-auto opacity-100 left-[0px] visible z-50'
+        //   : 'left-[-40px] h-0 opacity-0 invisible',
+        'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-8 lg:flex',
+        'lg:opacity-100 lg:visible',
+      ].join(' ')}
+    >
+      <NavigationMenu />
+    </div>
+  )
+})
+
+const HeaderLogo = memo(function HeaderLogo() {
   const { isDarkMode } = useTheme()
+  return (
+    <Link href="/">
+      <a className="px-10 flex items-center gap-2">
+        <Image
+          className="cursor-pointer"
+          src={isDarkMode ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
+          width={96}
+          height={24}
+          alt="Supabase Logo"
+        />
+        <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
+      </a>
+    </Link>
+  )
+})
+
+const Container = memo(function Container(props) {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  return (
+    <div
+      // #docs-content-container is used by layout to scroll to top
+      id="docs-content-container"
+      className={[
+        // 'overflow-x-auto',
+        'w-full h-screen transition-all ease-out',
+        'absolute lg:relative',
+        mobileMenuOpen ? 'ml-[75%] overflow-hidden' : 'overflow-auto',
+        // desktop override any margin styles
+        'lg:ml-0',
+      ].join(' ')}
+    >
+      <div className="flex flex-col relative">{props.children}</div>
+    </div>
+  )
+})
+
+const NavContainer = memo(function NavContainer() {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  return (
+    <div
+      className={[
+        // 'hidden',
+        'absolute lg:relative',
+        mobileMenuOpen ? 'w-[75%] left-0' : 'w-0 -left-[280px]',
+        'lg:w-[420px] !lg:left-0',
+        // desktop override any left styles
+        'lg:left-0',
+        'transition-all',
+        'top-0',
+        'h-screen',
+        'flex flex-col ml-0',
+      ].join(' ')}
+    >
+      <div
+        className={[
+          'top-0',
+          'relative',
+          'w-auto',
+          'border-r overflow-auto h-screen',
+          'backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300',
+          'flex flex-col',
+        ].join(' ')}
+      >
+        <div className="top-0 sticky z-10">
+          <div>
+            <div>
+              <div
+                className={[
+                  'hidden lg:flex lg:height-auto',
+                  'pt-8 bg-scale-200 flex-col gap-8',
+                ].join(' ')}
+              >
+                <HeaderLogo />
+              </div>
+              <div className="h-4 bg-scale-200 w-full"></div>
+              <div className="bg-gradient-to-b from-scale-200 to-transparent h-4 w-full"></div>
+            </div>
+          </div>
+        </div>
+        <SideMenu />
+      </div>
+    </div>
+  )
+})
+
+const SiteLayout = ({ children }) => {
+  // const mobileMenuOpen = useMenuMobileOpen()
 
   useEffect(() => {
     const key = localStorage.getItem('supabaseDarkMode')
@@ -28,278 +322,32 @@ const SiteLayout = ({ children }) => {
     }
   }, [])
 
-  const menuLevel = 'home'
-  // useMenuLevelId()
-  const mobileMenuOpen = false
-  // useMenuMobileOpen()
-
-  const levelsData = {
-    home: {
-      icon: '/docs/img/icons/menu/home',
-      name: 'Home',
-    },
-    gettingstarted: {
-      icon: '/docs/img/icons/menu/getting-started',
-      name: 'Getting Started',
-    },
-    database: {
-      icon: '/docs/img/icons/menu/database',
-      name: 'Database',
-    },
-    auth: {
-      icon: '/docs/img/icons/menu/auth',
-      name: 'Auth',
-    },
-    functions: {
-      icon: '/docs/img/icons/menu/functions',
-      name: 'Functions',
-    },
-    realtime: {
-      icon: '/docs/img/icons/menu/realtime',
-      name: 'Realtime',
-    },
-    storage: {
-      icon: '/docs/img/icons/menu/storage',
-      name: 'Storage',
-    },
-    platform: {
-      icon: '/docs/img/icons/menu/platform',
-      name: 'Platform',
-    },
-    resources: {
-      icon: '/docs/img/icons/menu/resources',
-      name: 'Resources',
-    },
-    self_hosting: {
-      icon: '/docs/img/icons/menu/self-hosting',
-      name: 'Self-Hosting',
-    },
-    integrations: {
-      icon: '/docs/img/icons/menu/integrations',
-      name: 'Integrations',
-    },
-    reference_javascript_v1: {
-      icon: '/docs/img/icons/menu/reference-javascript',
-      name: 'Javascript Reference v1.0',
-    },
-    reference_javascript_v2: {
-      icon: '/docs/img/icons/menu/reference-javascript',
-      name: 'Javascript Reference v2.0',
-    },
-    reference_dart_v0: {
-      icon: '/docs/img/icons/menu/reference-dart',
-      name: 'Dart Reference v0.0',
-    },
-    reference_dart_v1: {
-      icon: '/docs/img/icons/menu/reference-dart',
-      name: 'Dart Reference v0.0',
-    },
-    reference_cli: {
-      icon: '/docs/img/icons/menu/reference-cli',
-      name: 'CLI Reference',
-    },
-    reference_api: {
-      icon: '/docs/img/icons/menu/reference-api',
-      name: 'Management API Reference',
-    },
-    reference_self_hosting_auth: {
-      icon: '/docs/img/icons/menu/reference-auth',
-      name: 'Auth Server Reference',
-    },
-    reference_self_hosting_storage: {
-      icon: '/docs/img/icons/menu/reference-storage',
-      name: 'Storage Server Reference',
-    },
-    reference_self_hosting_realtime: {
-      icon: '/docs/img/icons/menu/reference-realtime',
-      name: 'Realtime Server Reference',
-    },
-  }
-
   return (
     <main>
-      {/* <img
-          src={`${router.basePath}/img/gradient-bg.png`}
-          className="absolute left-0 w-[520px] top-0 -z-1 pointer-events-none"
-        /> */}
-
       <div className="flex flex-row h-screen">
-        <div
-          className={[
-            'hidden', // experiment hidden
-            'transition-all',
-            'top-0',
-            'relative',
-            'h-screen w-[420px]',
-            'z-10',
-            'lg:flex flex-col ml-0',
-          ].join(' ')}
-        >
+        <NavContainer />
+        <Container>
+          <div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
+            <TopNavBarRef />
+          </div>
           <div
             className={[
-              'top-0',
-              'relative',
-              'w-auto',
+              'sticky transition-all top-0',
               'z-10',
-
-              'border-r overflow-auto h-screen',
               'backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300',
-              'flex flex-col',
             ].join(' ')}
           >
-            <div className="top-0 sticky z-10">
-              <div>
-                <div>
-                  <div
-                    className={[
-                      'hidden md:flex md:height-auto',
-                      'pt-8 bg-scale-200 flex-col gap-8',
-                    ].join(' ')}
-                  >
-                    <Link href="/">
-                      <a className="px-10 flex items-center gap-2">
-                        <Image
-                          className="cursor-pointer"
-                          src={isDarkMode ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
-                          width={96}
-                          height={24}
-                          alt="Supabase Logo"
-                        />
-                        <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
-                      </a>
-                    </Link>
-                    {/* {router.asPath.includes('/reference/') && <RefSwitcher />} */}
-                  </div>
-                  <div className="h-4 bg-scale-200 w-full"></div>
-                  <div className="bg-gradient-to-b from-scale-200 to-transparent h-4 w-full"></div>
-                </div>
-              </div>
-            </div>
-            <div className={['pb-10 px-5 md:px-10 md:flex'].join(' ')}>
-              <NavigationMenu />
+            <div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
+              <MobileHeader />
             </div>
           </div>
-        </div>
-        <div
-          // #docs-content-container is used by layout to scroll to top
-          id="docs-content-container"
-          className={[
-            'w-full h-screen transition-all ease-out',
-            mobileMenuOpen ? 'overflow-hidden' : 'overflow-auto',
-          ].join(' ')}
-        >
-          <div className="flex flex-col relative">
-            {/* <NavigationMenu /> */}
-            <div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
-              <TopNavBarRef />
-            </div>
-            <div
-              className={[
-                'sticky transition-all top-0',
-                'z-10',
-                'backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300',
-              ].join(' ')}
-            >
-              <div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
-                <div
-                  className={[
-                    'transition-all ease-out z-10',
-                    'top-0',
-                    mobileMenuOpen && 'absolute',
-                    'flex items-center h-[40px]',
-                    mobileMenuOpen ? 'gap-0' : 'gap-3',
-                  ].join(' ')}
-                >
-                  <button
-                    className={['mr-2', mobileMenuOpen && 'mt-0.5'].join(' ')}
-                    onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
-                  >
-                    <div
-                      className={[
-                        'space-y-1 group cursor-pointer relative',
-                        mobileMenuOpen ? 'w-4 h-4' : 'w-4 h-[8px]',
-                      ].join(' ')}
-                    >
-                      <span
-                        className={[
-                          'transition-all ease-out block w-4 h-px bg-scale-900 group-hover:bg-scale-1200',
-                          !mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]',
-                        ].join(' ')}
-                      ></span>
-                      <span
-                        className={[
-                          'transition-all ease-out block h-px bg-scale-900 group-hover:bg-scale-1200',
-                          !mobileMenuOpen
-                            ? 'w-3 group-hover:w-4'
-                            : 'absolute w-4 -rotate-45 top-[2px]',
-                        ].join(' ')}
-                      ></span>
-                    </div>
-                  </button>
-                  <div className={[].join(' ')}>
-                    <img
-                      src={
-                        menuLevel
-                          ? levelsData[menuLevel].icon + '.svg'
-                          : levelsData['home'].icon + '.svg'
-                      }
-                      className={[
-                        'transition-all duration-200',
-                        mobileMenuOpen ? 'invisible w-0 h-0' : 'w-4 h-4',
-                      ].join(' ')}
-                    />
-                  </div>
-                  <span
-                    className={[
-                      'transition-all duration-200',
-                      'text-scale-1200',
-                      mobileMenuOpen ? 'text-xs' : 'text-sm',
-                    ].join(' ')}
-                  >
-                    {mobileMenuOpen
-                      ? 'Close'
-                      : menuLevel
-                      ? levelsData[menuLevel].name
-                      : levelsData['home'].name}
-                  </span>
-                </div>
-                <div
-                  className={[
-                    'transition-all ease-out duration-200',
-                    'absolute left-0 right-0 h-screen',
-                    'px-5 pl-5 py-16',
-                    'top-[0px]',
-                    'bg-scale-200',
-                    mobileMenuOpen
-                      ? 'overflow-y-auto opacity-100 left-[0px] visible'
-                      : 'left-[-40px] h-0 opacity-0 invisible',
-                  ].join(' ')}
-                >
-                  <NavigationMenu />
-                </div>
-              </div>
-            </div>
-            <div className="grow px-5 max-w-7xl mx-auto py-16">
-              {children}
-              <FooterHelpCallout />
-              <Footer />
-            </div>
-
-            <div
-              className={[
-                // 'top-0 left-0',
-                'hidden', // experiment hidden
-                'h-full',
-                'left-0',
-                'right-0',
-                'z-10',
-                'backdrop-blur-sm backdrop-filter bg-white-1200 dark:bg-blackA-600',
-                mobileMenuOpen ? 'absolute MOBILE-MENU-OPEN' : 'hidden h-0 MOBILE-MENU-CLOSED',
-              ].join(' ')}
-              onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
-            ></div>
+          <div className="grow px-5 max-w-7xl mx-auto py-16">
+            {children}
+            <FooterHelpCallout />
+            <Footer />
           </div>
-        </div>
+          <MobileMenuBackdrop />
+        </Container>
       </div>
     </main>
   )
diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index 52a0b995643..0736cff9c2b 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -13,7 +13,6 @@ import '../styles/main.scss?v=1.0.0'
 import '../styles/new-docs.scss'
 import '../styles/prism-okaidia.scss'
 import { post } from '~/lib/fetchWrappers'
-import { menuState } from '~/hooks/useMenuState'
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const router = useRouter()

From 13c070e81d17735731f30cfbbeabc80233821b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Thu, 15 Dec 2022 14:36:17 +0100
Subject: [PATCH 084/215] feat(hCaptcha): captcha for subscription/payment
 method changes

---
 .../AddNewPaymentMethodModal.tsx              | 49 ++++++++++++++++---
 .../interfaces/Billing/Billing.utils.ts       |  4 +-
 .../interfaces/Billing/EnterpriseUpdate.tsx   | 31 ++++++++++--
 .../Billing/ExitSurvey/ExitSurvey.tsx         | 30 ++++++++++--
 .../PaymentSummaryPanel.tsx                   |  9 +++-
 .../interfaces/Billing/ProUpgrade.tsx         | 32 ++++++++++--
 6 files changed, 135 insertions(+), 20 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 8e8e7e865b6..7808f106114 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { IconLoader, Modal } from 'ui'
 import { loadStripe } from '@stripe/stripe-js'
 import { Elements } from '@stripe/react-stripe-js'
@@ -7,6 +7,7 @@ import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, STRIPE_PUBLIC_KEY } from 'lib/constants'
 import AddPaymentMethodForm from './AddPaymentMethodForm'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
 
 interface Props {
   visible: boolean
@@ -20,18 +21,38 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   const { ui } = useStore()
   const [intent, setIntent] = useState<any>()
 
-  useEffect(() => {
-    if (visible) {
-      setupIntent()
-    }
-  }, [visible])
+  const [captchaLoaded, setCaptchaLoaded] = useState(false)
 
-  const setupIntent = async () => {
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null)
+  const captchaRef = useRef<HCaptcha>(null)
+
+  useEffect(() => {
+    if (visible && captchaLoaded) {
+      let token = captchaToken
+      if (!token) {
+        captchaRef.current?.execute({ async: true }).then((captchaResponse) => {
+          return setupIntent(captchaResponse?.response ?? undefined)
+        })
+      }
+    }
+  }, [visible, captchaLoaded])
+
+  const onCaptchaLoaded = () => {
+    setCaptchaLoaded(true)
+  }
+
+  const setupIntent = async (hcaptchaToken: string | undefined) => {
     setIntent(undefined)
+
     const orgSlug = ui.selectedOrganization?.slug ?? ''
-    const intent = await post(`${API_URL}/organizations/${orgSlug}/payments/setup-intent`, {})
+    const intent = await post(`${API_URL}/organizations/${orgSlug}/payments/setup-intent`, {
+      hcaptchaToken,
+    })
 
     if (intent.error) {
+      setCaptchaToken(null)
+      captchaRef.current?.resetCaptcha()
+
       return ui.setNotification({
         category: 'error',
         message: intent.error.message,
@@ -56,6 +77,18 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       onCancel={onCancel}
       className="PAYMENT"
     >
+      <HCaptcha
+        ref={captchaRef}
+        sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+        size="invisible"
+        onLoad={onCaptchaLoaded}
+        onVerify={(token) => {
+          setCaptchaToken(token)
+        }}
+        onExpire={() => {
+          setCaptchaToken(null)
+        }}
+      />
       <div className="space-y-4 py-4">
         {intent !== undefined ? (
           <Elements stripe={stripePromise} options={options}>
diff --git a/studio/components/interfaces/Billing/Billing.utils.ts b/studio/components/interfaces/Billing/Billing.utils.ts
index 84e1e448694..67f98f93e7b 100644
--- a/studio/components/interfaces/Billing/Billing.utils.ts
+++ b/studio/components/interfaces/Billing/Billing.utils.ts
@@ -52,7 +52,8 @@ export const formSubscriptionUpdatePayload = (
   },
   nonChangeableAddons: SubscriptionAddon[],
   selectedPaymentMethod: string,
-  region: string
+  region: string,
+  hcaptchaToken: string | undefined
 ) => {
   const { computeSize, pitrDuration, customDomains } = selectedAddons
 
@@ -78,6 +79,7 @@ export const formSubscriptionUpdatePayload = (
     addons,
     proration_date,
     payment_method: selectedPaymentMethod,
+    hcaptchaToken
   }
 }
 
diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index bf98cd7e4aa..430b8dfcc68 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react'
+import { FC, useState, useEffect, useRef } from 'react'
 import { useRouter } from 'next/router'
 import { Transition } from '@headlessui/react'
 
@@ -6,6 +6,7 @@ import { useStore, useFlag } from 'hooks'
 import { getURL } from 'lib/helpers'
 import { post, patch } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
 
 import Divider from 'components/ui/Divider'
 import { SubscriptionAddon } from './AddOns/AddOns.types'
@@ -45,6 +46,9 @@ const EnterpriseUpdate: FC<Props> = ({
   const isCustomDomainsEnabled = useFlag('customDomains')
   const isPITRSelfServeEnabled = useFlag('pitrSelfServe')
 
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null)
+  const captchaRef = useRef<HCaptcha>(null)
+
   const projectId = ui.selectedProject?.id ?? -1
   const projectRef = ui.selectedProject?.ref ?? 'default'
   const projectRegion = ui.selectedProject?.region ?? ''
@@ -110,7 +114,8 @@ const EnterpriseUpdate: FC<Props> = ({
         selectedAddons,
         nonChangeableAddons,
         selectedPaymentMethodId,
-        projectRegion
+        projectRegion,
+        undefined
       ),
       tier: currentSubscription.tier.price_id,
     }
@@ -129,6 +134,12 @@ const EnterpriseUpdate: FC<Props> = ({
 
   // Last todo to support enterprise billing on dashboard + E2E test
   const onConfirmPayment = async () => {
+    let token = captchaToken
+    if (!token) {
+      const captchaResponse = await captchaRef.current?.execute({ async: true })
+      token = captchaResponse?.response ?? null
+    }
+
     const payload = {
       ...formSubscriptionUpdatePayload(
         currentSubscription,
@@ -136,7 +147,8 @@ const EnterpriseUpdate: FC<Props> = ({
         selectedAddons,
         nonChangeableAddons,
         selectedPaymentMethodId,
-        projectRegion
+        projectRegion,
+        token ?? undefined
       ),
       tier: currentSubscription.tier.price_id,
     }
@@ -273,6 +285,19 @@ const EnterpriseUpdate: FC<Props> = ({
               setShowAddPaymentMethodModal(true)
             }}
             onConfirmPayment={onConfirmPayment}
+            captcha={
+              <HCaptcha
+                ref={captchaRef}
+                sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+                size="invisible"
+                onVerify={(token) => {
+                  setCaptchaToken(token)
+                }}
+                onExpire={() => {
+                  setCaptchaToken(null)
+                }}
+              />
+            }
           />
         </div>
       </Transition>
diff --git a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
index c1838f7c233..7d7a02e26b1 100644
--- a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+++ b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
@@ -11,6 +11,7 @@ import { CANCELLATION_REASONS } from '../Billing.constants'
 import { UpdateSuccess } from '../'
 import { SubscriptionPreview } from '../Billing.types'
 import { StripeSubscription } from 'components/interfaces/Billing'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
 
 interface Props {
   freeTier: any
@@ -24,6 +25,9 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
   const projectId = ui.selectedProject?.id ?? -1
   const projectRef = ui.selectedProject?.ref
 
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null)
+  const captchaRef = useRef<HCaptcha>(null)
+
   const formRef = useRef<any>()
 
   const initialValues = { message: '' }
@@ -99,6 +103,12 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
   const downgradeProject = async (values?: any) => {
     const downgradeMessage = values?.message ?? message
 
+    let token = captchaToken
+    if (!token) {
+      const captchaResponse = await captchaRef.current?.execute({ async: true })
+      token = captchaResponse?.response ?? null
+    }
+
     try {
       setIsSubmitting(true)
 
@@ -110,6 +120,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         tier,
         addons,
         proration_date,
+        hcaptchaToken: token ?? undefined
       })
 
       if (res?.error) {
@@ -139,9 +150,9 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
       }
       const feedbackRes = await post(`${API_URL}/feedback/downgrade`, {
         projectRef,
-	reasons: selectedReasons.reduce((a, b) => `${a}- ${b}\n`, ''),
-	additionalFeedback: downgradeMessage,
-	exitAction: 'downgrade',
+        reasons: selectedReasons.reduce((a, b) => `${a}- ${b}\n`, ''),
+        additionalFeedback: downgradeMessage,
+        exitAction: 'downgrade',
       })
       if (feedbackRes.error) throw feedbackRes.error
     } catch (error: any) {
@@ -245,6 +256,19 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
                       credits
                     </p>
                   </div>
+                  <div className="self-center">
+                    <HCaptcha
+                      ref={captchaRef}
+                      sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+                      size="invisible"
+                      onVerify={(token) => {
+                        setCaptchaToken(token)
+                      }}
+                      onExpire={() => {
+                        setCaptchaToken(null)
+                      }}
+                    />
+                  </div>
                 </div>
               )}
             </Form>
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
index 078d2a067d2..9e0db842011 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useRef, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { Listbox, IconLoader, Button, IconPlus, IconAlertCircle, IconCreditCard } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -44,6 +44,8 @@ interface Props {
   onSelectAddNewPaymentMethod: () => void
   onConfirmPayment: () => void
   isSubmitting: boolean
+
+  captcha: React.ReactNode
 }
 
 // Use case of this panel is actually only for upgrading from Free to Pro
@@ -72,6 +74,7 @@ const PaymentSummaryPanel: FC<Props> = ({
   onSelectAddNewPaymentMethod,
   onConfirmPayment,
   isSubmitting,
+  captcha,
 }) => {
   const { ui } = useStore()
   const projectRegion = ui.selectedProject?.region
@@ -120,7 +123,7 @@ const PaymentSummaryPanel: FC<Props> = ({
     ).toFixed(2)
   }
 
-  const validateOrder = () => {
+  const validateOrder = async () => {
     const error = validateSubscriptionUpdatePayload(selectedAddons)
     if (error) {
       return ui.setNotification({
@@ -382,6 +385,8 @@ const PaymentSummaryPanel: FC<Props> = ({
           )}
         </div>
 
+        <div className="self-center">{captcha}</div>
+
         <div className="flex items-center justify-end">
           <Tooltip.Root delayDuration={0}>
             <Tooltip.Trigger className="w-full">
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index 7fe2e78c578..68ff40f839e 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { Transition } from '@headlessui/react'
 import { useRouter } from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
@@ -29,6 +29,7 @@ import {
 } from './AddOns/AddOns.utils'
 import BackButton from 'components/ui/BackButton'
 import SupportPlan from './AddOns/SupportPlan'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
 
 // Do not allow compute size changes for af-south-1
 
@@ -52,6 +53,9 @@ const ProUpgrade: FC<Props> = ({
   const isCustomDomainsEnabled = useFlag('customDomains')
   const isPITRSelfServeEnabled = useFlag('pitrSelfServe')
 
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null)
+  const captchaRef = useRef<HCaptcha>(null)
+
   const { addons } = products
   const computeSizes = formatComputeSizes(addons)
   const pitrDurationOptions = formatPITROptions(addons)
@@ -133,7 +137,8 @@ const ProUpgrade: FC<Props> = ({
       selectedAddons,
       nonChangeableAddons,
       selectedPaymentMethodId,
-      projectRegion
+      projectRegion,
+      undefined
     )
 
     setIsRefreshingPreview(true)
@@ -149,13 +154,19 @@ const ProUpgrade: FC<Props> = ({
   }
 
   const onConfirmPayment = async () => {
+    let token = captchaToken
+    if (!token) {
+      const captchaResponse = await captchaRef.current?.execute({ async: true })
+      token = captchaResponse?.response ?? null
+    }
     const payload = formSubscriptionUpdatePayload(
       currentSubscription,
       selectedTier,
       selectedAddons,
       nonChangeableAddons,
       selectedPaymentMethodId,
-      projectRegion
+      projectRegion,
+      token ?? undefined,
     )
 
     setIsSubmitting(true)
@@ -165,6 +176,8 @@ const ProUpgrade: FC<Props> = ({
         category: 'error',
         message: `Failed to update subscription: ${res?.error?.message}`,
       })
+      setCaptchaToken(null)
+      captchaRef.current?.resetCaptcha()
     } else {
       if (isChangingComputeSize) {
         app.onProjectStatusUpdated(projectId, PROJECT_STATUS.RESTORING)
@@ -320,6 +333,19 @@ const ProUpgrade: FC<Props> = ({
             }}
             onConfirmPayment={onConfirmPayment}
             isSubmitting={isSubmitting}
+            captcha={
+              <HCaptcha
+                ref={captchaRef}
+                sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+                size="invisible"
+                onVerify={(token) => {
+                  setCaptchaToken(token)
+                }}
+                onExpire={() => {
+                  setCaptchaToken(null)
+                }}
+              />
+            }
           />
         </div>
       </Transition>

From faf962fd92d42f12301e86be1571271ef0de00cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Thu, 15 Dec 2022 18:28:33 +0100
Subject: [PATCH 085/215] slightly improve handling

---
 .../AddNewPaymentMethodModal.tsx                | 17 +++++++++++------
 .../interfaces/Billing/EnterpriseUpdate.tsx     |  2 ++
 .../Billing/ExitSurvey/ExitSurvey.tsx           |  4 +++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 7808f106114..cb355ba8f29 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -27,14 +27,19 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   const captchaRef = useRef<HCaptcha>(null)
 
   useEffect(() => {
-    if (visible && captchaLoaded) {
-      let token = captchaToken
-      if (!token) {
-        captchaRef.current?.execute({ async: true }).then((captchaResponse) => {
-          return setupIntent(captchaResponse?.response ?? undefined)
-        })
+    const loadPaymentForm = async () => {
+      if (visible && captchaLoaded) {
+        let token = captchaToken
+        if (!token) {
+          const captchaResponse = await captchaRef.current?.execute({ async: true })
+          token = captchaResponse?.response ?? null
+        }
+
+        await setupIntent(token ?? undefined)
       }
     }
+
+    loadPaymentForm()
   }, [visible, captchaLoaded])
 
   const onCaptchaLoaded = () => {
diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index 430b8dfcc68..8ea5ff543da 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -156,6 +156,8 @@ const EnterpriseUpdate: FC<Props> = ({
     setIsSubmitting(true)
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
     if (res?.error) {
+      setCaptchaToken(null)
+      captchaRef.current?.resetCaptcha()
       ui.setNotification({
         category: 'error',
         message: `Failed to update subscription: ${res?.error?.message}`,
diff --git a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
index 7d7a02e26b1..7144a13c948 100644
--- a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+++ b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
@@ -120,10 +120,12 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         tier,
         addons,
         proration_date,
-        hcaptchaToken: token ?? undefined
+        hcaptchaToken: token ?? undefined,
       })
 
       if (res?.error) {
+        setCaptchaToken(null)
+        captchaRef.current?.resetCaptcha()
         return ui.setNotification({
           category: 'error',
           message: `Failed to cancel subscription: ${res?.error?.message}`,

From ba5fa484484427fea6c6ddb0225c2e46bbc7b728 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 08:50:41 +0100
Subject: [PATCH 086/215] reset captcha

---
 .../AddNewPaymentMethodModal.tsx                     | 12 ++++++++----
 .../interfaces/Billing/EnterpriseUpdate.tsx          |  9 +++++++--
 .../interfaces/Billing/ExitSurvey/ExitSurvey.tsx     |  9 +++++++--
 studio/components/interfaces/Billing/ProUpgrade.tsx  | 12 +++++++++---
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index cb355ba8f29..edda104deb6 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -46,6 +46,11 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     setCaptchaLoaded(true)
   }
 
+  const resetCaptcha = () => {
+    setCaptchaToken(null)
+    captchaRef.current?.resetCaptcha()
+  }
+
   const setupIntent = async (hcaptchaToken: string | undefined) => {
     setIntent(undefined)
 
@@ -54,10 +59,9 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       hcaptchaToken,
     })
 
-    if (intent.error) {
-      setCaptchaToken(null)
-      captchaRef.current?.resetCaptcha()
+    resetCaptcha()
 
+    if (intent.error) {
       return ui.setNotification({
         category: 'error',
         message: intent.error.message,
@@ -65,7 +69,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       })
     }
 
-    setIntent(intent)
+    captchaRef.current?.resetCaptcha()
   }
 
   const options = {
diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index 8ea5ff543da..77b10ab0809 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -132,6 +132,11 @@ const EnterpriseUpdate: FC<Props> = ({
     setIsRefreshingPreview(false)
   }
 
+  const resetCaptcha = () => {
+    setCaptchaToken(null)
+    captchaRef.current?.resetCaptcha()
+  }
+
   // Last todo to support enterprise billing on dashboard + E2E test
   const onConfirmPayment = async () => {
     let token = captchaToken
@@ -155,9 +160,9 @@ const EnterpriseUpdate: FC<Props> = ({
 
     setIsSubmitting(true)
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
+    resetCaptcha()
+
     if (res?.error) {
-      setCaptchaToken(null)
-      captchaRef.current?.resetCaptcha()
       ui.setNotification({
         category: 'error',
         message: `Failed to update subscription: ${res?.error?.message}`,
diff --git a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
index 7144a13c948..52ad8ea889e 100644
--- a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+++ b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
@@ -100,6 +100,11 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
     }
   }
 
+  const resetCaptcha = () => {
+    setCaptchaToken(null)
+    captchaRef.current?.resetCaptcha()
+  }
+
   const downgradeProject = async (values?: any) => {
     const downgradeMessage = values?.message ?? message
 
@@ -123,9 +128,9 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         hcaptchaToken: token ?? undefined,
       })
 
+      resetCaptcha()
+
       if (res?.error) {
-        setCaptchaToken(null)
-        captchaRef.current?.resetCaptcha()
         return ui.setNotification({
           category: 'error',
           message: `Failed to cancel subscription: ${res?.error?.message}`,
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index 68ff40f839e..f299c2308ce 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -153,6 +153,11 @@ const ProUpgrade: FC<Props> = ({
     setIsRefreshingPreview(false)
   }
 
+  const resetCaptcha = () => {
+    setCaptchaToken(null)
+    captchaRef.current?.resetCaptcha()
+  }
+
   const onConfirmPayment = async () => {
     let token = captchaToken
     if (!token) {
@@ -166,18 +171,19 @@ const ProUpgrade: FC<Props> = ({
       nonChangeableAddons,
       selectedPaymentMethodId,
       projectRegion,
-      token ?? undefined,
+      token ?? undefined
     )
 
     setIsSubmitting(true)
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
+
+    resetCaptcha()
+
     if (res?.error) {
       ui.setNotification({
         category: 'error',
         message: `Failed to update subscription: ${res?.error?.message}`,
       })
-      setCaptchaToken(null)
-      captchaRef.current?.resetCaptcha()
     } else {
       if (isChangingComputeSize) {
         app.onProjectStatusUpdated(projectId, PROJECT_STATUS.RESTORING)

From 00b94fdc1f9bfea478f3ec808902525451309d0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 10:03:44 +0100
Subject: [PATCH 087/215] payment method modal

---
 .../AddNewPaymentMethodModal.tsx              | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index edda104deb6..9da33e2f215 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -36,6 +36,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
         }
 
         await setupIntent(token ?? undefined)
+        resetCaptcha()
       }
     }
 
@@ -59,17 +60,15 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       hcaptchaToken,
     })
 
-    resetCaptcha()
-
     if (intent.error) {
       return ui.setNotification({
         category: 'error',
         message: intent.error.message,
         error: intent.error,
       })
+    } else {
+      setIntent(intent)
     }
-
-    captchaRef.current?.resetCaptcha()
   }
 
   const options = {
@@ -77,15 +76,9 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     appearance: { theme: 'night', labels: 'floating' },
   } as any
 
+  // Needs to be re-rendered properly for hCaptcha to work seamlessly
   return (
-    <Modal
-      hideFooter
-      size="medium"
-      visible={visible}
-      header="Add new payment method"
-      onCancel={onCancel}
-      className="PAYMENT"
-    >
+    <>
       <HCaptcha
         ref={captchaRef}
         sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
@@ -98,18 +91,27 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
           setCaptchaToken(null)
         }}
       />
-      <div className="space-y-4 py-4">
-        {intent !== undefined ? (
-          <Elements stripe={stripePromise} options={options}>
-            <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onCancel} />
-          </Elements>
-        ) : (
-          <div className="flex w-full items-center justify-center py-20">
-            <IconLoader size={16} className="animate-spin" />
-          </div>
-        )}
-      </div>
-    </Modal>
+      <Modal
+        hideFooter
+        size="medium"
+        visible={visible}
+        header="Add new payment method"
+        onCancel={onCancel}
+        className="PAYMENT"
+      >
+        <div className="space-y-4 py-4">
+          {intent !== undefined ? (
+            <Elements stripe={stripePromise} options={options}>
+              <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onCancel} />
+            </Elements>
+          ) : (
+            <div className="flex w-full items-center justify-center py-20">
+              <IconLoader size={16} className="animate-spin" />
+            </div>
+          )}
+        </div>
+      </Modal>
+    </>
   )
 }
 

From 5d213e9b53bbcd6205e3136aee5e730e084012f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 10:21:14 +0100
Subject: [PATCH 088/215] log captcha error for debuggability

---
 .../AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 9da33e2f215..5b23757d3c0 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -76,7 +76,6 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     appearance: { theme: 'night', labels: 'floating' },
   } as any
 
-  // Needs to be re-rendered properly for hCaptcha to work seamlessly
   return (
     <>
       <HCaptcha
@@ -84,6 +83,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
         sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
         size="invisible"
         onLoad={onCaptchaLoaded}
+        onError={(err) => console.error(err)}
         onVerify={(token) => {
           setCaptchaToken(token)
         }}

From ceb5e9b4f80309aa805e392b384f20f63ce9e52d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 13:00:30 +0100
Subject: [PATCH 089/215] try to fix hcaptcha in modal

---
 .../AddNewPaymentMethodModal.tsx              | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 5b23757d3c0..e28d65ec9fd 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef, useState } from 'react'
+import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { IconLoader, Modal } from 'ui'
 import { loadStripe } from '@stripe/stripe-js'
 import { Elements } from '@stripe/react-stripe-js'
@@ -24,32 +24,41 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   const [captchaLoaded, setCaptchaLoaded] = useState(false)
 
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
-  const captchaRef = useRef<HCaptcha>(null)
+  const [captchaRef, setCaptchaRef] = useState<HCaptcha | null>(null)
+
+  const captchaRefCallback = useCallback((node) => {
+    setCaptchaRef(node)
+  }, [])
 
   useEffect(() => {
     const loadPaymentForm = async () => {
-      if (visible && captchaLoaded) {
+      if (visible && captchaLoaded && captchaRef) {
+        console.log('load payment form', { visible, captchaLoaded })
         let token = captchaToken
         if (!token) {
-          const captchaResponse = await captchaRef.current?.execute({ async: true })
+          const captchaResponse = await captchaRef.execute({ async: true })
           token = captchaResponse?.response ?? null
         }
 
+        console.log('Setting up intent', { token })
+
         await setupIntent(token ?? undefined)
         resetCaptcha()
       }
     }
 
     loadPaymentForm()
-  }, [visible, captchaLoaded])
+  }, [visible, captchaLoaded, captchaRef])
 
   const onCaptchaLoaded = () => {
+    console.log('on captcha loaded')
     setCaptchaLoaded(true)
   }
 
   const resetCaptcha = () => {
+    console.log('Resetting  captcha')
     setCaptchaToken(null)
-    captchaRef.current?.resetCaptcha()
+    captchaRef?.resetCaptcha()
   }
 
   const setupIntent = async (hcaptchaToken: string | undefined) => {
@@ -77,9 +86,16 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   } as any
 
   return (
-    <>
+    <Modal
+      hideFooter
+      size="medium"
+      visible={visible}
+      header="Add new payment method"
+      onCancel={onCancel}
+      className="PAYMENT"
+    >
       <HCaptcha
-        ref={captchaRef}
+        ref={captchaRefCallback}
         sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
         size="invisible"
         onLoad={onCaptchaLoaded}
@@ -91,27 +107,18 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
           setCaptchaToken(null)
         }}
       />
-      <Modal
-        hideFooter
-        size="medium"
-        visible={visible}
-        header="Add new payment method"
-        onCancel={onCancel}
-        className="PAYMENT"
-      >
-        <div className="space-y-4 py-4">
-          {intent !== undefined ? (
-            <Elements stripe={stripePromise} options={options}>
-              <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onCancel} />
-            </Elements>
-          ) : (
-            <div className="flex w-full items-center justify-center py-20">
-              <IconLoader size={16} className="animate-spin" />
-            </div>
-          )}
-        </div>
-      </Modal>
-    </>
+      <div className="space-y-4 py-4">
+        {intent !== undefined ? (
+          <Elements stripe={stripePromise} options={options}>
+            <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onCancel} />
+          </Elements>
+        ) : (
+          <div className="flex w-full items-center justify-center py-20">
+            <IconLoader size={16} className="animate-spin" />
+          </div>
+        )}
+      </div>
+    </Modal>
   )
 }
 

From 5939182bc938026e732fa1cb9a54de7c1a4c106b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 13:14:59 +0100
Subject: [PATCH 090/215] help me

---
 .../AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index e28d65ec9fd..ff7700e1f0e 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -27,13 +27,14 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   const [captchaRef, setCaptchaRef] = useState<HCaptcha | null>(null)
 
   const captchaRefCallback = useCallback((node) => {
+    console.log({ node })
     setCaptchaRef(node)
   }, [])
 
   useEffect(() => {
     const loadPaymentForm = async () => {
+      console.log('load payment form', { visible, captchaLoaded, captchaRef })
       if (visible && captchaLoaded && captchaRef) {
-        console.log('load payment form', { visible, captchaLoaded })
         let token = captchaToken
         if (!token) {
           const captchaResponse = await captchaRef.execute({ async: true })

From 861cf7899b6aa62a75707468f6fd913758822669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 13:37:15 +0100
Subject: [PATCH 091/215] render only on visible

---
 .../AddNewPaymentMethodModal.tsx              | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index ff7700e1f0e..8fdcc6ef764 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -34,7 +34,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   useEffect(() => {
     const loadPaymentForm = async () => {
       console.log('load payment form', { visible, captchaLoaded, captchaRef })
-      if (visible && captchaLoaded && captchaRef) {
+      if (visible && captchaRef && captchaLoaded) {
         let token = captchaToken
         if (!token) {
           const captchaResponse = await captchaRef.execute({ async: true })
@@ -49,7 +49,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     }
 
     loadPaymentForm()
-  }, [visible, captchaLoaded, captchaRef])
+  }, [visible, captchaRef, captchaLoaded])
 
   const onCaptchaLoaded = () => {
     console.log('on captcha loaded')
@@ -95,19 +95,21 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       onCancel={onCancel}
       className="PAYMENT"
     >
-      <HCaptcha
-        ref={captchaRefCallback}
-        sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
-        size="invisible"
-        onLoad={onCaptchaLoaded}
-        onError={(err) => console.error(err)}
-        onVerify={(token) => {
-          setCaptchaToken(token)
-        }}
-        onExpire={() => {
-          setCaptchaToken(null)
-        }}
-      />
+      {visible && (
+        <HCaptcha
+          ref={captchaRefCallback}
+          sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+          size="invisible"
+          onError={(err) => console.error(err)}
+          onLoad={() => onCaptchaLoaded()}
+          onVerify={(token) => {
+            setCaptchaToken(token)
+          }}
+          onExpire={() => {
+            setCaptchaToken(null)
+          }}
+        />
+      )}
       <div className="space-y-4 py-4">
         {intent !== undefined ? (
           <Elements stripe={stripePromise} options={options}>

From 427fb8c56edc39647848d26e4b9a9dd0bc1e47b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 13:57:28 +0100
Subject: [PATCH 092/215] jesus take the wheel

---
 .../AddNewPaymentMethodModal.tsx              | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 8fdcc6ef764..d40e165c652 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -27,10 +27,14 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   const [captchaRef, setCaptchaRef] = useState<HCaptcha | null>(null)
 
   const captchaRefCallback = useCallback((node) => {
-    console.log({ node })
     setCaptchaRef(node)
   }, [])
 
+  useEffect(() => {
+    setCaptchaLoaded(true)
+    // @ts-ignore
+  }, [window.hcaptcha])
+
   useEffect(() => {
     const loadPaymentForm = async () => {
       console.log('load payment form', { visible, captchaLoaded, captchaRef })
@@ -51,11 +55,6 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     loadPaymentForm()
   }, [visible, captchaRef, captchaLoaded])
 
-  const onCaptchaLoaded = () => {
-    console.log('on captcha loaded')
-    setCaptchaLoaded(true)
-  }
-
   const resetCaptcha = () => {
     console.log('Resetting  captcha')
     setCaptchaToken(null)
@@ -86,30 +85,31 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     appearance: { theme: 'night', labels: 'floating' },
   } as any
 
+  const onLocalCancel = () => {
+    setIntent(undefined)
+    return onCancel()
+  }
+
   return (
     <Modal
       hideFooter
       size="medium"
       visible={visible}
       header="Add new payment method"
-      onCancel={onCancel}
+      onCancel={onLocalCancel}
       className="PAYMENT"
     >
-      {visible && (
-        <HCaptcha
-          ref={captchaRefCallback}
-          sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
-          size="invisible"
-          onError={(err) => console.error(err)}
-          onLoad={() => onCaptchaLoaded()}
-          onVerify={(token) => {
-            setCaptchaToken(token)
-          }}
-          onExpire={() => {
-            setCaptchaToken(null)
-          }}
-        />
-      )}
+      <HCaptcha
+        ref={captchaRefCallback}
+        sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+        size="invisible"
+        onVerify={(token) => {
+          setCaptchaToken(token)
+        }}
+        onExpire={() => {
+          setCaptchaToken(null)
+        }}
+      />
       <div className="space-y-4 py-4">
         {intent !== undefined ? (
           <Elements stripe={stripePromise} options={options}>

From 52548ec10416ab22e5f8c3619427655bd0f79db5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 14:10:04 +0100
Subject: [PATCH 093/215] pain

---
 .../AddNewPaymentMethodModal.tsx                    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index d40e165c652..0883d871175 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -30,6 +30,13 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     setCaptchaRef(node)
   }, [])
 
+  /**
+   * We want to load the Stripe payment elements only after successfully verifying captcha.
+   * To execute hCaptcha when displaying the modal, we need to ensure hCaptcha is actually loaded.
+   * The `onLoad` method from hCaptcha is only executed ONCE for the entire application, so we cannot listen to it.
+   * One way to find out if hCaptcha has been initialized, is checking `window.hcaptcha`. When checking via window,
+   * we know if the hCaptcha has been initialized from a different part of the app or through this component.
+   */
   useEffect(() => {
     setCaptchaLoaded(true)
     // @ts-ignore
@@ -37,7 +44,6 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
 
   useEffect(() => {
     const loadPaymentForm = async () => {
-      console.log('load payment form', { visible, captchaLoaded, captchaRef })
       if (visible && captchaRef && captchaLoaded) {
         let token = captchaToken
         if (!token) {
@@ -45,8 +51,6 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
           token = captchaResponse?.response ?? null
         }
 
-        console.log('Setting up intent', { token })
-
         await setupIntent(token ?? undefined)
         resetCaptcha()
       }
@@ -56,7 +60,6 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   }, [visible, captchaRef, captchaLoaded])
 
   const resetCaptcha = () => {
-    console.log('Resetting  captcha')
     setCaptchaToken(null)
     captchaRef?.resetCaptcha()
   }
@@ -113,7 +116,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       <div className="space-y-4 py-4">
         {intent !== undefined ? (
           <Elements stripe={stripePromise} options={options}>
-            <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onCancel} />
+            <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onLocalCancel} />
           </Elements>
         ) : (
           <div className="flex w-full items-center justify-center py-20">

From 284ce90b1767524dbada3d2fb49f7d0ace7010fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 14:32:16 +0100
Subject: [PATCH 094/215] move captcha outside of modal

---
 .../AddNewPaymentMethodModal.tsx              | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 0883d871175..065027c7847 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -94,14 +94,9 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   }
 
   return (
-    <Modal
-      hideFooter
-      size="medium"
-      visible={visible}
-      header="Add new payment method"
-      onCancel={onLocalCancel}
-      className="PAYMENT"
-    >
+    // We cant display the hCaptcha in the modal, as the modal auto-closes when clicking the captcha
+    // So we only show the modal if the captcha has been executed successfully (intent loaded)
+    <>
       <HCaptcha
         ref={captchaRefCallback}
         sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
@@ -113,18 +108,22 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
           setCaptchaToken(null)
         }}
       />
-      <div className="space-y-4 py-4">
-        {intent !== undefined ? (
+
+      <Modal
+        hideFooter
+        size="medium"
+        visible={visible && intent !== undefined}
+        header="Add new payment method"
+        onCancel={onLocalCancel}
+        className="PAYMENT"
+      >
+        <div className="space-y-4 py-4">
           <Elements stripe={stripePromise} options={options}>
             <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onLocalCancel} />
           </Elements>
-        ) : (
-          <div className="flex w-full items-center justify-center py-20">
-            <IconLoader size={16} className="animate-spin" />
-          </div>
-        )}
-      </div>
-    </Modal>
+        </div>
+      </Modal>
+    </>
   )
 }
 

From cd8d8713e67b0cf09e7fb768757b1223774d87c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 14:42:54 +0100
Subject: [PATCH 095/215] log open/close

---
 .../AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 065027c7847..59a11d8c36d 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -104,6 +104,8 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
         onVerify={(token) => {
           setCaptchaToken(token)
         }}
+        onClose={() => console.log('onclose')}
+        onOpen={() => console.log('onopen')}
         onExpire={() => {
           setCaptchaToken(null)
         }}

From 5fc41f27a17a03561e0b78bbbcbdae1834153f5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 14:50:17 +0100
Subject: [PATCH 096/215] is this it

---
 .../AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 59a11d8c36d..5f18c9dff3b 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -104,8 +104,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
         onVerify={(token) => {
           setCaptchaToken(token)
         }}
-        onClose={() => console.log('onclose')}
-        onOpen={() => console.log('onopen')}
+        onClose={onLocalCancel}
         onExpire={() => {
           setCaptchaToken(null)
         }}

From 47216df6d0401bc6d47997f20f0aca2f770c2a62 Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Tue, 20 Dec 2022 14:26:42 +0000
Subject: [PATCH 097/215] adds hcaptcha loaded store

---
 package-lock.json                             | 61 +++++++++++++++++++
 .../AddNewPaymentMethodModal.tsx              | 23 ++-----
 studio/package.json                           |  1 +
 studio/pages/_app.tsx                         |  2 +
 studio/stores/hcaptcha-loaded-store.tsx       | 31 ++++++++++
 5 files changed, 101 insertions(+), 17 deletions(-)
 create mode 100644 studio/stores/hcaptcha-loaded-store.tsx

diff --git a/package-lock.json b/package-lock.json
index 5f6dcf98766..938bb21e236 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37607,6 +37607,7 @@
         "uniforms-bootstrap4": "^3.6.2",
         "uniforms-bridge-json-schema": "^3.6.2",
         "uuid": "^8.3.2",
+        "valtio": "^1.7.6",
         "yup": "^0.32.11",
         "yup-password": "^0.2.2",
         "zxcvbn": "^4.4.2"
@@ -37829,6 +37830,11 @@
       "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-9.3.1.tgz",
       "integrity": "sha512-/Yvsd2D7miYB4HLJ3hOOS0+vnowQpaT75FsHzr/y5M9P4q9bwa7RcbW2YdH6KZBn8ceLbKGnHxMZ1CHliGHUFw=="
     },
+    "studio/node_modules/proxy-compare": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.3.0.tgz",
+      "integrity": "sha512-c3L2CcAi7f7pvlD0D7xsF+2CQIW8C3HaYx2Pfgq8eA4HAl3GAH6/dVYsyBbYF/0XJs2ziGLrzmz5fmzPm6A0pQ=="
+    },
     "studio/node_modules/react-resize-detector": {
       "version": "6.7.8",
       "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-6.7.8.tgz",
@@ -37889,6 +37895,46 @@
         "node": ">=4.2.0"
       }
     },
+    "studio/node_modules/valtio": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.7.6.tgz",
+      "integrity": "sha512-zsGrCCYOIpy8egQxftduFyJusF/BMu3CganhHKUOE/I6t6V6yA1MDfZZkrYoWYCGkC3rSBYcIHEEsoYQM9lV2w==",
+      "dependencies": {
+        "proxy-compare": "2.3.0",
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@babel/helper-module-imports": ">=7.12",
+        "@babel/types": ">=7.13",
+        "aslemammad-vite-plugin-macro": ">=1.0.0-alpha.1",
+        "babel-plugin-macros": ">=3.0",
+        "react": ">=16.8",
+        "vite": ">=2.8.6"
+      },
+      "peerDependenciesMeta": {
+        "@babel/helper-module-imports": {
+          "optional": true
+        },
+        "@babel/types": {
+          "optional": true
+        },
+        "aslemammad-vite-plugin-macro": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "studio/node_modules/webpack-bundle-analyzer": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.3.0.tgz",
@@ -63371,6 +63417,7 @@
         "uniforms-bootstrap4": "^3.6.2",
         "uniforms-bridge-json-schema": "^3.6.2",
         "uuid": "^8.3.2",
+        "valtio": "*",
         "yup": "^0.32.11",
         "yup-password": "^0.2.2",
         "zxcvbn": "^4.4.2"
@@ -63521,6 +63568,11 @@
           "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-9.3.1.tgz",
           "integrity": "sha512-/Yvsd2D7miYB4HLJ3hOOS0+vnowQpaT75FsHzr/y5M9P4q9bwa7RcbW2YdH6KZBn8ceLbKGnHxMZ1CHliGHUFw=="
         },
+        "proxy-compare": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.3.0.tgz",
+          "integrity": "sha512-c3L2CcAi7f7pvlD0D7xsF+2CQIW8C3HaYx2Pfgq8eA4HAl3GAH6/dVYsyBbYF/0XJs2ziGLrzmz5fmzPm6A0pQ=="
+        },
         "react-resize-detector": {
           "version": "6.7.8",
           "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-6.7.8.tgz",
@@ -63564,6 +63616,15 @@
           "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
           "dev": true
         },
+        "valtio": {
+          "version": "1.7.6",
+          "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.7.6.tgz",
+          "integrity": "sha512-zsGrCCYOIpy8egQxftduFyJusF/BMu3CganhHKUOE/I6t6V6yA1MDfZZkrYoWYCGkC3rSBYcIHEEsoYQM9lV2w==",
+          "requires": {
+            "proxy-compare": "2.3.0",
+            "use-sync-external-store": "1.2.0"
+          }
+        },
         "webpack-bundle-analyzer": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.3.0.tgz",
diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 5f18c9dff3b..0f553810bc3 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -1,13 +1,14 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react'
-import { IconLoader, Modal } from 'ui'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { loadStripe } from '@stripe/stripe-js'
 import { Elements } from '@stripe/react-stripe-js'
+import { FC, useCallback, useEffect, useState } from 'react'
 
+import { Modal } from 'ui'
 import { useStore } from 'hooks'
+import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
 import { post } from 'lib/common/fetch'
 import { API_URL, STRIPE_PUBLIC_KEY } from 'lib/constants'
 import AddPaymentMethodForm from './AddPaymentMethodForm'
-import HCaptcha from '@hcaptcha/react-hcaptcha'
 
 interface Props {
   visible: boolean
@@ -21,7 +22,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   const { ui } = useStore()
   const [intent, setIntent] = useState<any>()
 
-  const [captchaLoaded, setCaptchaLoaded] = useState(false)
+  const captchaLoaded = useIsHCaptchaLoaded()
 
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const [captchaRef, setCaptchaRef] = useState<HCaptcha | null>(null)
@@ -30,18 +31,6 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     setCaptchaRef(node)
   }, [])
 
-  /**
-   * We want to load the Stripe payment elements only after successfully verifying captcha.
-   * To execute hCaptcha when displaying the modal, we need to ensure hCaptcha is actually loaded.
-   * The `onLoad` method from hCaptcha is only executed ONCE for the entire application, so we cannot listen to it.
-   * One way to find out if hCaptcha has been initialized, is checking `window.hcaptcha`. When checking via window,
-   * we know if the hCaptcha has been initialized from a different part of the app or through this component.
-   */
-  useEffect(() => {
-    setCaptchaLoaded(true)
-    // @ts-ignore
-  }, [window.hcaptcha])
-
   useEffect(() => {
     const loadPaymentForm = async () => {
       if (visible && captchaRef && captchaLoaded) {
@@ -118,7 +107,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
         onCancel={onLocalCancel}
         className="PAYMENT"
       >
-        <div className="space-y-4 py-4">
+        <div className="py-4 space-y-4">
           <Elements stripe={stripePromise} options={options}>
             <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onLocalCancel} />
           </Elements>
diff --git a/studio/package.json b/studio/package.json
index bf108ae4eda..7a39cefd0d6 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -89,6 +89,7 @@
     "uniforms-bootstrap4": "^3.6.2",
     "uniforms-bridge-json-schema": "^3.6.2",
     "uuid": "^8.3.2",
+    "valtio": "^1.7.6",
     "yup": "^0.32.11",
     "yup-password": "^0.2.2",
     "zxcvbn": "^4.4.2"
diff --git a/studio/pages/_app.tsx b/studio/pages/_app.tsx
index cd16894f14d..e77baa71827 100644
--- a/studio/pages/_app.tsx
+++ b/studio/pages/_app.tsx
@@ -27,6 +27,7 @@ import { useEffect, useState } from 'react'
 import { Hydrate, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RootStore } from 'stores'
+import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store'
 import { StoreProvider } from 'hooks'
 import { GOTRUE_ERRORS } from 'lib/constants'
 import { auth } from 'lib/gotrue'
@@ -115,6 +116,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
               </RouteValidationWrapper>
             </PageTelemetry>
 
+            <HCaptchaLoadedStore />
             <PortalToast />
             <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
           </FlagProvider>
diff --git a/studio/stores/hcaptcha-loaded-store.tsx b/studio/stores/hcaptcha-loaded-store.tsx
new file mode 100644
index 00000000000..008053d20b0
--- /dev/null
+++ b/studio/stores/hcaptcha-loaded-store.tsx
@@ -0,0 +1,31 @@
+import HCaptcha from '@hcaptcha/react-hcaptcha'
+import { proxy, useSnapshot } from 'valtio'
+
+const hCaptchaLoadedStoreState = proxy({
+  loaded: false,
+  setLoaded() {
+    hCaptchaLoadedStoreState.loaded = true
+  },
+})
+
+export const useIsHCaptchaLoaded = () => {
+  const snap = useSnapshot(hCaptchaLoadedStoreState)
+
+  return snap.loaded
+}
+
+const HCaptchaLoadedStore = () => {
+  const onLoad = () => {
+    hCaptchaLoadedStoreState.setLoaded()
+  }
+
+  return (
+    <HCaptcha
+      sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+      size="invisible"
+      onLoad={onLoad}
+    />
+  )
+}
+
+export default HCaptchaLoadedStore

From 773403b4ab6d6011f91ac1d228045504f1d5ee95 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 11:39:39 +0700
Subject: [PATCH 098/215] Change loading logic for when hcaptcha is involved in
 payment summary panel

---
 package-lock.json                                   |  2 +-
 studio/components/interfaces/Billing/ProUpgrade.tsx | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 938bb21e236..d002b6210bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63417,7 +63417,7 @@
         "uniforms-bootstrap4": "^3.6.2",
         "uniforms-bridge-json-schema": "^3.6.2",
         "uuid": "^8.3.2",
-        "valtio": "*",
+        "valtio": "^1.7.6",
         "yup": "^0.32.11",
         "yup-password": "^0.2.2",
         "zxcvbn": "^4.4.2"
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index f299c2308ce..2b3357df770 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -159,11 +159,16 @@ const ProUpgrade: FC<Props> = ({
   }
 
   const onConfirmPayment = async () => {
-    let token = captchaToken
+    setIsSubmitting(true)
+
+    const token =
+      captchaToken ?? (await captchaRef.current?.execute({ async: true }))?.response ?? undefined
+
     if (!token) {
-      const captchaResponse = await captchaRef.current?.execute({ async: true })
-      token = captchaResponse?.response ?? null
+      setIsSubmitting(false)
+      return
     }
+
     const payload = formSubscriptionUpdatePayload(
       currentSubscription,
       selectedTier,
@@ -173,8 +178,6 @@ const ProUpgrade: FC<Props> = ({
       projectRegion,
       token ?? undefined
     )
-
-    setIsSubmitting(true)
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
 
     resetCaptcha()

From ebed18fcfe8f0a537a7f3bd6f091990d57322282 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 11:40:35 +0700
Subject: [PATCH 099/215] Change loading logic for when hcaptcha is involved in
 payment summary panel enterprise

---
 .../interfaces/Billing/EnterpriseUpdate.tsx          | 12 +++++++-----
 studio/components/interfaces/Billing/ProUpgrade.tsx  |  1 -
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index 77b10ab0809..ed599f91aa2 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -139,10 +139,14 @@ const EnterpriseUpdate: FC<Props> = ({
 
   // Last todo to support enterprise billing on dashboard + E2E test
   const onConfirmPayment = async () => {
-    let token = captchaToken
+    setIsSubmitting(true)
+
+    const token =
+      captchaToken ?? (await captchaRef.current?.execute({ async: true }))?.response ?? undefined
+
     if (!token) {
-      const captchaResponse = await captchaRef.current?.execute({ async: true })
-      token = captchaResponse?.response ?? null
+      setIsSubmitting(false)
+      return
     }
 
     const payload = {
@@ -157,8 +161,6 @@ const EnterpriseUpdate: FC<Props> = ({
       ),
       tier: currentSubscription.tier.price_id,
     }
-
-    setIsSubmitting(true)
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
     resetCaptcha()
 
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index 2b3357df770..a1a75ddc465 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -179,7 +179,6 @@ const ProUpgrade: FC<Props> = ({
       token ?? undefined
     )
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
-
     resetCaptcha()
 
     if (res?.error) {

From a436163c96e51e17b810573b8e2e5df76f09da06 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 11:59:28 +0700
Subject: [PATCH 100/215] Add console log

---
 studio/components/interfaces/Billing/ProUpgrade.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index a1a75ddc465..e4eae47af07 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -164,6 +164,8 @@ const ProUpgrade: FC<Props> = ({
     const token =
       captchaToken ?? (await captchaRef.current?.execute({ async: true }))?.response ?? undefined
 
+    console.log('confirm', { token })
+
     if (!token) {
       setIsSubmitting(false)
       return

From b57fc12da86da9385b05b823a1b3e3cf73199961 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 12:09:00 +0700
Subject: [PATCH 101/215] Add more logs

---
 .../components/interfaces/Billing/ProUpgrade.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index e4eae47af07..d30584ef87c 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -160,17 +160,21 @@ const ProUpgrade: FC<Props> = ({
 
   const onConfirmPayment = async () => {
     setIsSubmitting(true)
+    let token = captchaToken
 
-    const token =
-      captchaToken ?? (await captchaRef.current?.execute({ async: true }))?.response ?? undefined
-
-    console.log('confirm', { token })
-
-    if (!token) {
+    try {
+      if (!token) {
+        const captchaResponse = await captchaRef.current?.execute({ async: true })
+        token = captchaResponse?.response ?? null
+      }
+    } catch (error) {
+      console.log('ERRORR', error)
       setIsSubmitting(false)
       return
     }
 
+    console.log('TOKEN', { token })
+
     const payload = formSubscriptionUpdatePayload(
       currentSubscription,
       selectedTier,

From 0d5c1556a61d0a9a250e70113c2adda3be69113e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 12:42:34 +0700
Subject: [PATCH 102/215] Fix hcaptcha loading for proupgrade and enterprise
 update

---
 .../interfaces/Billing/EnterpriseUpdate.tsx           | 11 +++++++----
 studio/components/interfaces/Billing/ProUpgrade.tsx   |  3 ---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index ed599f91aa2..078cd190f42 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -140,11 +140,14 @@ const EnterpriseUpdate: FC<Props> = ({
   // Last todo to support enterprise billing on dashboard + E2E test
   const onConfirmPayment = async () => {
     setIsSubmitting(true)
+    let token = captchaToken
 
-    const token =
-      captchaToken ?? (await captchaRef.current?.execute({ async: true }))?.response ?? undefined
-
-    if (!token) {
+    try {
+      if (!token) {
+        const captchaResponse = await captchaRef.current?.execute({ async: true })
+        token = captchaResponse?.response ?? null
+      }
+    } catch (error) {
       setIsSubmitting(false)
       return
     }
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index d30584ef87c..e7f246d8b27 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -168,13 +168,10 @@ const ProUpgrade: FC<Props> = ({
         token = captchaResponse?.response ?? null
       }
     } catch (error) {
-      console.log('ERRORR', error)
       setIsSubmitting(false)
       return
     }
 
-    console.log('TOKEN', { token })
-
     const payload = formSubscriptionUpdatePayload(
       currentSubscription,
       selectedTier,

From cdbc41440568560cbbc8ee80bbb16f5e491b5df3 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 13:01:39 +0700
Subject: [PATCH 103/215] Update ext survey hcaptcha

---
 .../AddNewPaymentMethodModal.tsx              | 11 +++++--
 .../Billing/ExitSurvey/ExitSurvey.tsx         | 29 ++++++++++++-------
 .../[ref]/settings/billing/update/free.tsx    |  2 +-
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 0f553810bc3..f8c52edd2eb 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -35,9 +35,14 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     const loadPaymentForm = async () => {
       if (visible && captchaRef && captchaLoaded) {
         let token = captchaToken
-        if (!token) {
-          const captchaResponse = await captchaRef.execute({ async: true })
-          token = captchaResponse?.response ?? null
+
+        try {
+          if (!token) {
+            const captchaResponse = await captchaRef.execute({ async: true })
+            token = captchaResponse?.response ?? null
+          }
+        } catch (error) {
+          return
         }
 
         await setupIntent(token ?? undefined)
diff --git a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
index 52ad8ea889e..35232ef2b7f 100644
--- a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+++ b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
@@ -25,8 +25,8 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
   const projectId = ui.selectedProject?.id ?? -1
   const projectRef = ui.selectedProject?.ref
 
-  const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const captchaRef = useRef<HCaptcha>(null)
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null)
 
   const formRef = useRef<any>()
 
@@ -92,11 +92,24 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
       })
     }
 
+    setIsSubmitting(true)
+    let token = captchaToken
+
+    try {
+      if (!token) {
+        const captchaResponse = await captchaRef.current?.execute({ async: true })
+        token = captchaResponse?.response ?? null
+      }
+    } catch (error) {
+      setIsSubmitting(false)
+      return
+    }
+
     if (willChangeComputeSize) {
       setMessage(values.message)
       return setShowConfirmModal(true)
     } else {
-      downgradeProject(values)
+      downgradeProject(values, token as string)
     }
   }
 
@@ -105,15 +118,9 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
     captchaRef.current?.resetCaptcha()
   }
 
-  const downgradeProject = async (values?: any) => {
+  const downgradeProject = async (values?: any, hcaptchaToken?: string) => {
     const downgradeMessage = values?.message ?? message
 
-    let token = captchaToken
-    if (!token) {
-      const captchaResponse = await captchaRef.current?.execute({ async: true })
-      token = captchaResponse?.response ?? null
-    }
-
     try {
       setIsSubmitting(true)
 
@@ -125,7 +132,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         tier,
         addons,
         proration_date,
-        hcaptchaToken: token ?? undefined,
+        hcaptchaToken: captchaToken ?? hcaptchaToken,
       })
 
       resetCaptcha()
@@ -191,7 +198,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         enterFrom="transform opacity-0 translate-x-10"
         enterTo="transform opacity-100 translate-x-0"
       >
-        <div className="w-4/5 space-y-8">
+        <div className="w-full xl:w-4/5 space-y-8">
           <div ref={formRef} className="relative">
             <div className="absolute top-[2px] -left-24">
               <Button type="text" icon={<IconArrowLeft />} onClick={onSelectBack}>
diff --git a/studio/pages/project/[ref]/settings/billing/update/free.tsx b/studio/pages/project/[ref]/settings/billing/update/free.tsx
index 0410229614d..ba62f0cd89f 100644
--- a/studio/pages/project/[ref]/settings/billing/update/free.tsx
+++ b/studio/pages/project/[ref]/settings/billing/update/free.tsx
@@ -80,7 +80,7 @@ const BillingUpdateFree: NextPageWithLayout = () => {
     )
 
   return (
-    <div className="mx-auto my-10 max-w-5xl">
+    <div className="mx-auto my-10 max-w-5xl px-32 xl:px-0">
       <ExitSurvey
         freeTier={freeTier}
         subscription={subscription}

From ad300dfd3b000f0291fe6ff4182a1ec69ec16fa5 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 13:26:34 +0700
Subject: [PATCH 104/215] Fix wrong logic for showing confirmation downgrade to
 free instance change

---
 .../interfaces/Billing/ExitSurvey/ExitSurvey.tsx     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
index 35232ef2b7f..439f5edc6f3 100644
--- a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+++ b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
@@ -42,7 +42,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
   const [subscriptionPreview, setSubscriptionPreview] = useState<SubscriptionPreview>()
 
   // Anything above a micro instance size will involve a change in compute size
-  const willChangeComputeSize = (subscription?.addons ?? []).length > 0
+  // as downgrading back to free will bring the project back to micro
   const currentComputeSize = subscription?.addons.find((option) =>
     option.supabase_prod_id.includes('addon_instance')
   )
@@ -63,7 +63,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
     }
   }
 
-  const getDowngradeSuccessMessage = () => {
+  const getDowngradeRefundMessage = () => {
     return `A total of $${returnedAmount} will be refunded as credits on ${billingDate.toLocaleDateString(
       'en-US',
       {
@@ -105,7 +105,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
       return
     }
 
-    if (willChangeComputeSize) {
+    if (currentComputeSize !== undefined) {
       setMessage(values.message)
       return setShowConfirmModal(true)
     } else {
@@ -144,11 +144,11 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
           error: res.error,
         })
       } else {
-        if (willChangeComputeSize) {
+        if (currentComputeSize !== undefined) {
           app.onProjectStatusUpdated(projectId, PROJECT_STATUS.RESTORING)
           ui.setNotification({
             category: 'info',
-            message: getDowngradeSuccessMessage(),
+            message: getDowngradeRefundMessage(),
             duration: 8000,
           })
           ui.setNotification({
@@ -184,7 +184,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
       <UpdateSuccess
         projectRef={projectRef || ''}
         title="Your project has been updated"
-        message={getDowngradeSuccessMessage()}
+        message={getDowngradeRefundMessage()}
       />
     )
   }

From 63d5bc0cf49305c93df7ed6386bc3e57d5fda7ed Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 20 Dec 2022 17:27:48 -0330
Subject: [PATCH 105/215] Delete dupe 404 page

---
 apps/docs/pages/404.tsx | 52 -----------------------------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 apps/docs/pages/404.tsx

diff --git a/apps/docs/pages/404.tsx b/apps/docs/pages/404.tsx
deleted file mode 100644
index 71b9bb5f6f5..00000000000
--- a/apps/docs/pages/404.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { Button } from 'ui'
-import Head from 'next/head'
-
-export default function Custom404() {
-  const [show404, setShow404] = useState<boolean>(false)
-
-  useEffect(() => {
-    setTimeout(() => {
-      setShow404(true)
-    }, 500)
-  }, [])
-
-  return (
-    <>
-      <Head>
-        <title>404 | Supabase</title>
-      </Head>
-      <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
-        <div className="absolute">
-          <h1
-            className={`text-scale-1200 select-none text-[14rem] opacity-[5%] filter transition duration-200 sm:text-[18rem] lg:text-[28rem] ${
-              show404 ? 'blur-sm' : 'blur-none'
-            }`}
-          >
-            404
-          </h1>
-        </div>
-        <div
-          className={`flex flex-col items-center justify-center space-y-6 transition ${
-            show404 ? 'opacity-100' : 'opacity-0'
-          }`}
-        >
-          <div className="text-scale-1200 flex w-[320px] flex-col items-center justify-center space-y-3">
-            <h1 className="m-2 text-2xl">Looking for something?</h1>
-            <p className="text-center text-sm">
-              We could not find the page that you are looking for!
-            </p>
-          </div>
-          <div className="flex items-center space-x-4">
-            <Link href="/">
-              <Button as="a" size="small" className="text-white">
-                Head back
-              </Button>
-            </Link>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

From 6ed0299844d8b3d3caad7e60dfd18c8eba0a5c55 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 20 Dec 2022 17:28:14 -0330
Subject: [PATCH 106/215] Fixes unique keys warning

---
 apps/docs/components/Navigation/Footer.tsx                 | 4 ++--
 .../docs/components/Navigation/NavigationMenu/HomeMenu.tsx | 4 ++--
 .../Navigation/NavigationMenu/NavigationMenu.tsx           | 4 ++--
 spec/common-self-hosting-storage-sections.json             | 7 -------
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 3d85d66b3cb..cbbb215e7a6 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -14,7 +14,7 @@ const Footer = () => {
           <span className="text-xs text-scale-900">Supabase 2022</span>
           <span className="text-xs text-scale-900">—</span>
           {footerData.map((item) => (
-            <Link href={item.url}>
+            <Link href={item.url} key={item.url}>
               <a className="text-xs text-scale-800 hover:underline">{item.title}</a>
             </Link>
           ))}
@@ -41,7 +41,7 @@ const Footer = () => {
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16">
               <path
                 fill="none"
-                fill-rule="nonzero"
+                fillRule="nonzero"
                 stroke={`${isDarkMode ? '#fff' : '#333'}`}
                 d="M16.238 2.16a14.628 14.628 0 0 0-3.664-1.159.055.055 0 0 0-.059.028c-.158.288-.333.662-.456.957a13.432 13.432 0 0 0-4.115 0 9.76 9.76 0 0 0-.464-.957.057.057 0 0 0-.058-.028 14.587 14.587 0 0 0-3.664 1.16.053.053 0 0 0-.024.02C1.4 5.74.76 9.21 1.074 12.637c.002.017.011.033.024.043a14.813 14.813 0 0 0 4.494 2.318.058.058 0 0 0 .064-.02c.346-.483.654-.992.92-1.527a.059.059 0 0 0-.032-.08c-.49-.19-.956-.421-1.404-.684a.06.06 0 0 1-.006-.097c.094-.072.189-.148.279-.223a.055.055 0 0 1 .058-.008c2.946 1.372 6.135 1.372 9.046 0a.055.055 0 0 1 .06.007 7.2 7.2 0 0 0 .279.224.06.06 0 0 1-.005.097 9.143 9.143 0 0 1-1.405.683.06.06 0 0 0-.03.081c.27.534.578 1.043.918 1.526.014.02.04.029.063.021A14.763 14.763 0 0 0 18.9 12.68a.06.06 0 0 0 .023-.042c.376-3.962-.628-7.404-2.66-10.455a.046.046 0 0 0-.024-.021Zm-9.223 8.39c-.887 0-1.618-.831-1.618-1.852 0-1.02.717-1.851 1.618-1.851.908 0 1.632.838 1.618 1.851 0 1.02-.717 1.851-1.618 1.851Zm5.981 0c-.887 0-1.618-.831-1.618-1.852 0-1.02.717-1.851 1.618-1.851.908 0 1.632.838 1.618 1.851 0 1.02-.71 1.851-1.618 1.851Z"
               />
diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
index e6f5e8ea4be..d4167720768 100644
--- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
@@ -129,7 +129,7 @@ const NavigationMenuHome = () => {
       <ul className="relative w-full flex flex-col gap-4">
         {home.map((section, sectionIndex) => {
           return (
-            <>
+            <div key={`section-container-${sectionIndex}-border`}>
               {sectionIndex !== 0 && (
                 <div
                   className="h-px w-full bg-blackA-300 dark:bg-whiteA-300"
@@ -176,7 +176,7 @@ const NavigationMenuHome = () => {
                   })}
                 </div>
               </div>
-            </>
+            </div>
           )
         })}
       </ul>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index b8ea7efeab4..96bb2416bcf 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -173,7 +173,7 @@ const SideNav = () => {
       <NavigationMenuGuideList id={'reference'} />
       {/* // Client Libs */}
       <NavigationMenuRefList
-        key={'reference-js-menu'}
+        key={'reference-js-menu-v1'}
         id={'reference_javascript_v1'}
         commonSections={libCommonSections}
         lib="javascript"
@@ -194,7 +194,7 @@ const SideNav = () => {
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v0)}
       />
       <NavigationMenuRefList
-        key={'reference-dart-menu'}
+        key={'reference-dart-menu-v1'}
         id={'reference_dart_v1'}
         commonSections={libCommonSections}
         lib="dart"
diff --git a/spec/common-self-hosting-storage-sections.json b/spec/common-self-hosting-storage-sections.json
index 323772b2a6a..cdcd9bcf537 100644
--- a/spec/common-self-hosting-storage-sections.json
+++ b/spec/common-self-hosting-storage-sections.json
@@ -135,13 +135,6 @@
         "summary": "Retrieve object info",
         "type": "operation"
       },
-      {
-        "id": "retrieve-object-info",
-        "title": "Retrieve object info",
-        "slug": "retrieve-object-info",
-        "summary": "Retrieve object info",
-        "type": "operation"
-      },
       {
         "id": "copies-an-object",
         "title": "Copies an object",

From ef7020f527b13b73bb175a0f9a371e1d64a3e7d3 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 20 Dec 2022 17:28:30 -0330
Subject: [PATCH 107/215] Exclude Edit this Page button

---
 apps/docs/layouts/guides/index.tsx | 30 ++++++++++++++++++------------
 apps/docs/pages/index.mdx          |  2 +-
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 25b26b3fec7..e3b64828a60 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -31,10 +31,11 @@ const Layout: FC<Props> = (props) => {
   const [tocList, setTocList] = useState([])
 
   const { asPath } = useRouter()
-  const page = getPageType(asPath)
 
   const router = useRouter()
 
+  const EDIT_BUTTON_EXCLUDE_LIST = ['/404']
+
   useEffect(() => {
     if (hash && tocList.length > 0) {
       highlightSelectedTocItem(hash as string)
@@ -100,18 +101,23 @@ const Layout: FC<Props> = (props) => {
             )}
             <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-8"></div>
             <MDXProvider components={components}>{props.children}</MDXProvider>
-            <div className="mt-16 not-prose">
-              <div>
-                <Link
-                  href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
-                  passHref
-                >
-                  <a className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200">
-                    Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
-                  </a>
-                </Link>
+
+            {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
+              <></>
+            ) : (
+              <div className="mt-16 not-prose">
+                <div>
+                  <Link
+                    href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
+                    passHref
+                  >
+                    <a className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200">
+                      Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
+                    </a>
+                  </Link>
+                </div>
               </div>
-            </div>
+            )}
           </article>
         </div>
         {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 5a7e2f17b28..9921286f50c 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -30,7 +30,7 @@ export const meta = {
     ">
     <div className="col-span-12 lg:col-span-7 flex flex-col gap-6">
       <img className="hidden lg:visible absolute right-0 top-0 w-[500px]" src="/docs/img/cards/dark.png" />
-      <div classNam="">
+      <div className="">
         <h3 className="text-2xl m-0 mb-3">Getting Started</h3>
 
         Discover how to set up a database to an app making queries in just a few minutes.

From 728cb7b86aa4baeac47e59f81602095cac7c15d4 Mon Sep 17 00:00:00 2001
From: Long Hoang <long@mindworker.de>
Date: Wed, 21 Dec 2022 11:48:26 +0700
Subject: [PATCH 108/215] Update link to new careers page

---
 apps/docs/public/humans.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt
index 95817e22f6d..a403c683c7c 100644
--- a/apps/docs/public/humans.txt
+++ b/apps/docs/public/humans.txt
@@ -60,7 +60,7 @@ ____________
 
 JOBS
 
-If you are interested in working with us check out the open roles here: https://about.supabase.com/careers
+If you are interested in working with us check out the open roles here: https://supabase.com/careers
 
 ___________
 

From a5632d5d7317df86feefeb9fd54ec7dcd9e3e1b1 Mon Sep 17 00:00:00 2001
From: Long Hoang <long@mindworker.de>
Date: Wed, 21 Dec 2022 11:48:43 +0700
Subject: [PATCH 109/215] Add Long to humans.txt

---
 apps/docs/public/humans.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt
index a403c683c7c..2231880862b 100644
--- a/apps/docs/public/humans.txt
+++ b/apps/docs/public/humans.txt
@@ -34,6 +34,7 @@ Kevin Grüneberg
 Lakshmipathi G
 Laura C
 Leo T
+Long Hoang
 Margarita Sandomirskaia
 Marijana Šimag
 Mark Burggraf

From 70aac81cec8c3c97861b64c0e5edfc676c2e7663 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Tue, 20 Dec 2022 16:55:35 -0800
Subject: [PATCH 110/215] Update Developers links

---
 apps/www/data/Developers.json | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/apps/www/data/Developers.json b/apps/www/data/Developers.json
index a29460f0c5b..df449e784ab 100644
--- a/apps/www/data/Developers.json
+++ b/apps/www/data/Developers.json
@@ -1,26 +1,20 @@
 [
   {
     "text": "Documentation",
-    "description": "Everything you need that makes it simple to get started.",
+    "description": "Everything you need to start building with Supabase.",
     "url": "/docs",
     "icon": "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
   },
   {
-    "text": "API reference",
-    "description": "Examples and references for using API libraries.",
-    "url": "/docs/client/supabase-client",
-    "icon": "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-  },
-  {
-    "text": "Guides",
-    "description": "Examples and references for using Supabase.",
-    "url": "/docs/",
+    "text": "Changelog",
+    "description": "See the latest updates and product improvements.",
+    "url": "/changelog",
     "icon": "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
   },
   {
     "text": "Careers",
     "description": "Join the Supabase team and get involved.",
-    "url": "https://supabase.com/careers",
+    "url": "/careers",
     "icon": "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
   }
 ]

From 70b66c916f177090976f9b0677c64ea02b60ba15 Mon Sep 17 00:00:00 2001
From: dng <danny@supabase.io>
Date: Tue, 20 Dec 2022 16:29:56 -0800
Subject: [PATCH 111/215] Remove redirect

---
 apps/www/lib/redirects.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index 09317c8a31f..ff18f604298 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -1787,16 +1787,6 @@ module.exports = [
     source: '/docs/guides/with-ionic-angular',
     destination: '/docs/guides/getting-started/tutorials/with-ionic-angular',
   },
-  {
-    permanent: true,
-    source: '/docs/guides/examples',
-    destination: '/docs/guides/resources/examples',
-  },
-  {
-    permanent: true,
-    source: '/docs/guides/examples',
-    destination: '/docs/guides/resources/examples',
-  },
   {
     permanent: true,
     source: '/docs/guides/hosting/overview',

From 32a3ec5f7e856e7dd190debdd348af975c00dfc3 Mon Sep 17 00:00:00 2001
From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com>
Date: Tue, 20 Dec 2022 16:39:27 +0000
Subject: [PATCH 112/215] added on delete cascade

---
 studio/components/interfaces/SQLEditor/SQLEditor.constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/SQLEditor/SQLEditor.constants.ts b/studio/components/interfaces/SQLEditor/SQLEditor.constants.ts
index 63ec9612ed2..de1990ca96b 100644
--- a/studio/components/interfaces/SQLEditor/SQLEditor.constants.ts
+++ b/studio/components/interfaces/SQLEditor/SQLEditor.constants.ts
@@ -812,7 +812,7 @@ create publication supabase_realtime
     sql: `
 -- Create a table for public profiles
 create table profiles (
-  id uuid references auth.users not null primary key,
+  id uuid references auth.users on delete cascade not null primary key,
   updated_at timestamp with time zone,
   username text unique,
   full_name text,

From 16c7c42c5a6b2367f82efd35bd7f93dddd202b40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauricio=20Ordo=C3=B1ez?= <maurial593@gmail.com>
Date: Wed, 21 Dec 2022 04:18:19 -0500
Subject: [PATCH 113/215] Update README.es.md

---
 i18n/README.es.md | 139 ++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 128 insertions(+), 11 deletions(-)

diff --git a/i18n/README.es.md b/i18n/README.es.md
index a653d1b2492..602393663a2 100644
--- a/i18n/README.es.md
+++ b/i18n/README.es.md
@@ -71,17 +71,134 @@ Supabase es una [plataforma alojada](https://app.supabase.com). Te puedes regist
 
 Nuestra librería de cliente es modular. Cada sub-librería es una implementación independiente para cada sistema externo. Esta es una de las formas de apoyar las herramientas existentes.
 
-- **`supabase-{lang}`**: Combina librerías y agrega mejoras.
-  - `postgrest-{lang}`: Librería de cliente para trabajar con [PostgREST](https://github.com/postgrest/postgrest)
-  - `realtime-{lang}`: Librería de cliente para trabajar con [Realtime](https://github.com/supabase/realtime)
-  - `gotrue-{lang}`: Librería de cliente para trabajar con [GoTrue](https://github.com/netlify/gotrue)
-
-| Repositorio           | Oficial                                          | Comunidad                                                                                                                                                                                                                  |
-| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js)  | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Flutter`](https://github.com/supabase/supabase-flutter) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust`                                          |
-| `postgrest-{lang}`    | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
-| `realtime-{lang}`     | [`JS`](https://github.com/supabase/realtime-js)  | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust`                                                |
-| `gotrue-{lang}`       | [`JS`](https://github.com/supabase/gotrue-js)    | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust`                                                      |
+<table style="table-layout:fixed; white-space: nowrap;">
+  <tr>
+    <th>Lenguaje</th>
+    <th>Cliente</th>
+    <th colspan="5">Característica - Clientes (incluido en el cliente de Supabase)</th>
+  </tr>
+  <tr>
+    <th></th>
+    <th>Supabase</th>
+    <th><a href="https://github.com/postgrest/postgrest" target="_blank" rel="noopener noreferrer">PostgREST</a></th>
+    <th><a href="https://github.com/supabase/gotrue" target="_blank" rel="noopener noreferrer">GoTrue</a></th>
+    <th><a href="https://github.com/supabase/realtime" target="_blank" rel="noopener noreferrer">Realtime</a></th>
+    <th><a href="https://github.com/supabase/storage-api" target="_blank" rel="noopener noreferrer">Storage</a></th>
+    <th>Functions</th>
+  </tr>
+  <!-- TEMPLATE FOR NEW ROW -->
+  <!-- START ROW
+  <tr>
+    <td>lang</td>
+    <td><a href="https://github.com/supabase-community/supabase-lang" target="_blank" rel="noopener noreferrer">supabase-lang</a></td>
+    <td><a href="https://github.com/supabase-community/postgrest-lang" target="_blank" rel="noopener noreferrer">postgrest-lang</a></td>
+    <td><a href="https://github.com/supabase-community/gotrue-lang" target="_blank" rel="noopener noreferrer">gotrue-lang</a></td>
+    <td><a href="https://github.com/supabase-community/realtime-lang" target="_blank" rel="noopener noreferrer">realtime-lang</a></td>
+    <td><a href="https://github.com/supabase-community/storage-lang" target="_blank" rel="noopener noreferrer">storage-lang</a></td>
+  </tr>
+  END ROW -->
+  <th colspan="7">⚡️ Oficial ⚡️</th>
+  <tr>
+    <td>JavaScript (TypeScript)</td>
+    <td><a href="https://github.com/supabase/supabase-js" target="_blank" rel="noopener noreferrer">supabase-js</a></td>
+    <td><a href="https://github.com/supabase/postgrest-js" target="_blank" rel="noopener noreferrer">postgrest-js</a></td>
+    <td><a href="https://github.com/supabase/gotrue-js" target="_blank" rel="noopener noreferrer">gotrue-js</a></td>
+    <td><a href="https://github.com/supabase/realtime-js" target="_blank" rel="noopener noreferrer">realtime-js</a></td>
+    <td><a href="https://github.com/supabase/storage-js" target="_blank" rel="noopener noreferrer">storage-js</a></td>
+    <td><a href="https://github.com/supabase/functions-js" target="_blank" rel="noopener noreferrer">functions-js</a></td>
+  </tr>
+    <tr>
+    <td>Flutter</td>
+    <td><a href="https://github.com/supabase/supabase-flutter" target="_blank" rel="noopener noreferrer">supabase-flutter</a></td>
+    <td><a href="https://github.com/supabase/postgrest-dart" target="_blank" rel="noopener noreferrer">postgrest-dart</a></td>
+    <td><a href="https://github.com/supabase/gotrue-dart" target="_blank" rel="noopener noreferrer">gotrue-dart</a></td>
+    <td><a href="https://github.com/supabase/realtime-dart" target="_blank" rel="noopener noreferrer">realtime-dart</a></td>
+    <td><a href="https://github.com/supabase/storage-dart" target="_blank" rel="noopener noreferrer">storage-dart</a></td>
+    <td><a href="https://github.com/supabase/functions-dart" target="_blank" rel="noopener noreferrer">functions-dart</a></td>
+  </tr>
+  <th colspan="7">💚 Comunidad 💚</th>
+  <tr>
+    <td>C#</td>
+    <td><a href="https://github.com/supabase-community/supabase-csharp" target="_blank" rel="noopener noreferrer">supabase-csharp</a></td>
+    <td><a href="https://github.com/supabase-community/postgrest-csharp" target="_blank" rel="noopener noreferrer">postgrest-csharp</a></td>
+    <td><a href="https://github.com/supabase-community/gotrue-csharp" target="_blank" rel="noopener noreferrer">gotrue-csharp</a></td>
+    <td><a href="https://github.com/supabase-community/realtime-csharp" target="_blank" rel="noopener noreferrer">realtime-csharp</a></td>
+    <td><a href="https://github.com/supabase-community/storage-csharp" target="_blank" rel="noopener noreferrer">storage-csharp</a></td>
+    <td><a href="https://github.com/supabase-community/functions-csharp" target="_blank" rel="noopener noreferrer">functions-csharp</a></td>
+  </tr>
+  <tr>
+    <td>Go</td>
+    <td>-</td>
+    <td><a href="https://github.com/supabase-community/postgrest-go" target="_blank" rel="noopener noreferrer">postgrest-go</a></td>
+    <td><a href="https://github.com/supabase-community/gotrue-go" target="_blank" rel="noopener noreferrer">gotrue-go</a></td>
+    <td>-</td>
+    <td><a href="https://github.com/supabase-community/storage-go" target="_blank" rel="noopener noreferrer">storage-go</a></td>
+    <td><a href="https://github.com/supabase-community/functions-go" target="_blank" rel="noopener noreferrer">functions-go</a></td>
+  </tr>
+  <tr>
+    <td>Java</td>
+    <td>-</td>
+    <td>-</td>
+    <td><a href="https://github.com/supabase-community/gotrue-java" target="_blank" rel="noopener noreferrer">gotrue-java</a></td>
+    <td>-</td>
+    <td><a href="https://github.com/supabase-community/storage-java" target="_blanke" rel="noopener noreferrer">storage-java</a></td>
+    <td>-</td>
+  </tr>
+  <tr>
+    <td>Kotlin</td>
+    <td><a href="https://github.com/supabase-community/supabase-kt" target="_blank" rel="noopener noreferrer">supabase-kt</a></td>
+    <td><a href="https://github.com/supabase-community/postgrest-kt" target="_blank" rel="noopener noreferrer">postgrest-kt</a></td>
+    <td><a href="https://github.com/supabase-community/gotrue-kt" target="_blank" rel="noopener noreferrer">gotrue-kt</a></td>
+    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Realtime" target="_blank" rel="noopener noreferrer">realtime-kt</a></td>
+    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Storage" target="_blank" rel="noopener noreferrer">storage-kt</a></td>
+    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Functions" target="_blank" rel="noopener noreferrer">functions-kt</a></td>
+  </tr>
+  <tr>
+    <td>Python</td>
+    <td><a href="https://github.com/supabase-community/supabase-py" target="_blank" rel="noopener noreferrer">supabase-py</a></td>
+    <td><a href="https://github.com/supabase-community/postgrest-py" target="_blank" rel="noopener noreferrer">postgrest-py</a></td>
+    <td><a href="https://github.com/supabase-community/gotrue-py" target="_blank" rel="noopener noreferrer">gotrue-py</a></td>
+    <td><a href="https://github.com/supabase-community/realtime-py" target="_blank" rel="noopener noreferrer">realtime-py</a></td>
+    <td><a href="https://github.com/supabase-community/storage-py" target="_blank" rel="noopener noreferrer">storage-py</a></td>
+    <td><a href="https://github.com/supabase-community/functions-py" target="_blank" rel="noopener noreferrer">functions-py</a></td>
+  </tr>
+  <tr>
+    <td>Ruby</td>
+    <td><a href="https://github.com/supabase-community/supabase-rb" target="_blank" rel="noopener noreferrer">supabase-rb</a></td>
+    <td><a href="https://github.com/supabase-community/postgrest-rb" target="_blank" rel="noopener noreferrer">postgrest-rb</a></td>
+    <td>-</td>
+    <td>-</td>
+    <td>-</td>
+    <td>-</td>
+  </tr>
+  <tr>
+    <td>Rust</td>
+    <td>-</td>
+    <td><a href="https://github.com/supabase-community/postgrest-rs" target="_blank" rel="noopener noreferrer">postgrest-rs</a></td>
+    <td>-</td>
+    <td>-</td>
+    <td>-</td>
+    <td>-</td>
+  </tr>
+  <tr>
+    <td>Swift</td>
+    <td><a href="https://github.com/supabase-community/supabase-swift" target="_blank" rel="noopener noreferrer">supabase-swift</a></td>
+    <td><a href="https://github.com/supabase-community/postgrest-swift" target="_blank" rel="noopener noreferrer">postgrest-swift</a></td>
+    <td><a href="https://github.com/supabase-community/gotrue-swift" target="_blank" rel="noopener noreferrer">gotrue-swift</a></td>
+    <td><a href="https://github.com/supabase-community/realtime-swift" target="_blank" rel="noopener noreferrer">realtime-swift</a></td>
+    <td><a href="https://github.com/supabase-community/storage-swift" target="_blank" rel="noopener noreferrer">storage-swift</a></td>
+    <td><a href="https://github.com/supabase-community/functions-swift" target="_blank" rel="noopener noreferrer">functions-swift</a></td>
+  </tr>
+  <tr>
+    <td>Godot Engine (GDScript)</td>
+    <td><a href="https://github.com/supabase-community/godot-engine.supabase" target="_blank" rel="noopener noreferrer">supabase-gdscript</a></td>
+    <td><a href="https://github.com/supabase-community/postgrest-gdscript" target="_blank" rel="noopener noreferrer">postgrest-gdscript</a></td>
+    <td><a href="https://github.com/supabase-community/gotrue-gdscript" target="_blank" rel="noopener noreferrer">gotrue-gdscript</a></td>
+    <td><a href="https://github.com/supabase-community/realtime-gdscript" target="_blank" rel="noopener noreferrer">realtime-gdscript</a></td>
+    <td><a href="https://github.com/supabase-community/storage-gdscript" target="_blank" rel="noopener noreferrer">storage-gdscript</a></td>
+    <td><a href="https://github.com/supabase-community/functions-gdscript" target="_blank" rel="noopener noreferrer">functions-gdscript</a></td>
+  </tr>
+</table>
 
 <!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
 <!--- Keep only the link to the list of translation files-->

From eb6cffb09aa7e3ba1dc3ebcb112a2300644cd48f Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 16:35:42 +0700
Subject: [PATCH 114/215] Hide schemas with pg_ prefix

---
 studio/stores/pgmeta/MetaStore.ts     | 1 -
 studio/stores/pgmeta/SchemaStore.ts   | 8 ++++++++
 studio/stores/pgmeta/TriggersStore.ts | 4 ++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/studio/stores/pgmeta/MetaStore.ts b/studio/stores/pgmeta/MetaStore.ts
index a8ed860a318..eef317f1397 100644
--- a/studio/stores/pgmeta/MetaStore.ts
+++ b/studio/stores/pgmeta/MetaStore.ts
@@ -154,7 +154,6 @@ export default class MetaStore implements IMetaStore {
     'extensions',
     'information_schema',
     'net',
-    'pg_catalog',
     'pgsodium',
     'pgsodium_masks',
     'pgbouncer',
diff --git a/studio/stores/pgmeta/SchemaStore.ts b/studio/stores/pgmeta/SchemaStore.ts
index 7a0082db225..1fd1ff89ac5 100644
--- a/studio/stores/pgmeta/SchemaStore.ts
+++ b/studio/stores/pgmeta/SchemaStore.ts
@@ -27,6 +27,14 @@ export default class SchemaStore extends PostgresMetaInterface<PostgresSchema> {
     this.views = []
   }
 
+  // Dashboard to hide schemas with pg_ prefix
+  list(filter: any) {
+    const schemasFilter = (schema: PostgresSchema) =>
+      !schema.name.startsWith('pg_') && (typeof filter === 'function' ? filter(schema) : true)
+
+    return super.list(schemasFilter)
+  }
+
   async loadViews(schema: string) {
     const query = `
       select schemaname as schema, viewname as name from pg_catalog.pg_views
diff --git a/studio/stores/pgmeta/TriggersStore.ts b/studio/stores/pgmeta/TriggersStore.ts
index 4d83608c885..91631e94f7f 100644
--- a/studio/stores/pgmeta/TriggersStore.ts
+++ b/studio/stores/pgmeta/TriggersStore.ts
@@ -20,8 +20,8 @@ export default class TriggersStore extends PostgresMetaInterface<any> {
    */
   list(filter: any) {
     const triggersFilter = (h: any) =>
-      h.function_schema != 'supabase_functions' &&
-      h.schema != 'net' &&
+      h.function_schema !== 'supabase_functions' &&
+      h.schema !== 'net' &&
       (typeof filter === 'function' ? filter(h) : true)
 
     return super.list(triggersFilter)

From 91f43c783faf43d09f0d2af40c68adef8c8064a8 Mon Sep 17 00:00:00 2001
From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com>
Date: Wed, 21 Dec 2022 10:37:18 +0000
Subject: [PATCH 115/215] changed url links in js and dart

---
 spec/supabase_dart_v1.yml | 6 +++---
 spec/supabase_js_v2.yml   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/spec/supabase_dart_v1.yml b/spec/supabase_dart_v1.yml
index 073ec4d6f10..304d6988077 100644
--- a/spec/supabase_dart_v1.yml
+++ b/spec/supabase_dart_v1.yml
@@ -21,13 +21,13 @@ functions:
     description: |
       Creates a new user.
     notes: |
-      - By default, the user needs to verify their email address before logging in. To turn this off, disable **Confirm email** in [your project](https://app.supabase.com/project/_/auth/settings).
+      - By default, the user needs to verify their email address before logging in. To turn this off, disable **Confirm email** in [your project](https://app.supabase.com/project/_/auth/providers).
       - **Confirm email** determines if users need to confirm their email address after signing up.
         - If **Confirm email** is enabled, a `user` is returned but `session` is null.
         - If **Confirm email** is disabled, both a `user` and a `session` are returned.
-      - When the user confirms their email address, they are redirected to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url) by default. You can modify your `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/settings).
+      - When the user confirms their email address, they are redirected to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url) by default. You can modify your `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/url-configuration).
       - If signUp() is called for an existing confirmed user:
-          - If **Confirm email** is enabled in [your project](https://app.supabase.com/project/_/auth/settings), an obfuscated/fake user object is returned.
+          - If **Confirm email** is enabled in [your project](https://app.supabase.com/project/_/auth/providers), an obfuscated/fake user object is returned.
           - If **Confirm email** is disabled, the error message, `User already registered` is returned.
     examples:
       - id: sign-up
diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml
index 6bc7533f139..8d13fe5346f 100644
--- a/spec/supabase_js_v2.yml
+++ b/spec/supabase_js_v2.yml
@@ -136,13 +136,13 @@ functions:
     title: 'signUp()'
     $ref: '@supabase/gotrue-js.GoTrueClient.signUp'
     notes: |
-      - By default, the user needs to verify their email address before logging in. To turn this off, disable **Confirm email** in [your project](https://app.supabase.com/project/_/auth/settings).
+      - By default, the user needs to verify their email address before logging in. To turn this off, disable **Confirm email** in [your project](https://app.supabase.com/project/_/auth/providers).
       - **Confirm email** determines if users need to confirm their email address after signing up.
         - If **Confirm email** is enabled, a `user` is returned but `session` is null.
         - If **Confirm email** is disabled, both a `user` and a `session` are returned.
-      - When the user confirms their email address, they are redirected to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url) by default. You can modify your `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/settings).
+      - When the user confirms their email address, they are redirected to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url) by default. You can modify your `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/url-configuration).
       - If signUp() is called for an existing confirmed user:
-          - If **Confirm email** is enabled in [your project](https://app.supabase.com/project/_/auth/settings), an obfuscated/fake user object is returned.
+          - If **Confirm email** is enabled in [your project](https://app.supabase.com/project/_/auth/providers), an obfuscated/fake user object is returned.
           - If **Confirm email** is disabled, the error message, `User already registered` is returned.
       - To fetch the currently logged-in user, refer to [`getUser()`](/docs/reference/javascript/auth-getuser).
     examples:

From d8bc12f9d6edb67f798c04fdc97db402a4229401 Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Wed, 21 Dec 2022 11:50:14 +0000
Subject: [PATCH 116/215] fix: pro upgrade show captcha before confirm modal

---
 .../PaymentSummaryPanel.tsx                   | 16 ++++++++-----
 .../interfaces/Billing/ProUpgrade.tsx         | 24 +++++++++++--------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
index 9e0db842011..8f648296f80 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
@@ -42,6 +42,7 @@ interface Props {
   isLoadingPaymentMethods: boolean
   onSelectPaymentMethod: (method: any) => void
   onSelectAddNewPaymentMethod: () => void
+  beforeConfirmPayment?: () => Promise<void>
   onConfirmPayment: () => void
   isSubmitting: boolean
 
@@ -72,6 +73,7 @@ const PaymentSummaryPanel: FC<Props> = ({
   isLoadingPaymentMethods,
   onSelectPaymentMethod,
   onSelectAddNewPaymentMethod,
+  beforeConfirmPayment,
   onConfirmPayment,
   isSubmitting,
   captcha,
@@ -132,6 +134,8 @@ const PaymentSummaryPanel: FC<Props> = ({
         message: error,
       })
     } else {
+      await beforeConfirmPayment?.()
+
       isChangingComputeSize || (isChangingPITRDuration && selectedPITRDays === 0)
         ? setShowConfirmModal(true)
         : onConfirmPayment()
@@ -141,7 +145,7 @@ const PaymentSummaryPanel: FC<Props> = ({
   return (
     <>
       <div
-        className="w-full space-y-8 border-l bg-panel-body-light px-6 py-10 dark:bg-panel-body-dark lg:px-12 overflow-y-auto"
+        className="w-full px-6 py-10 space-y-8 overflow-y-auto border-l bg-panel-body-light dark:bg-panel-body-dark lg:px-12"
         style={{ height: 'calc(100vh - 57px)' }}
       >
         <p>Payment Summary</p>
@@ -296,7 +300,7 @@ const PaymentSummaryPanel: FC<Props> = ({
           </div>
         )}
 
-        <div className="h-px w-full bg-scale-600" />
+        <div className="w-full h-px bg-scale-600" />
 
         <PaymentTotal
           subscriptionPreview={subscriptionPreview}
@@ -308,12 +312,12 @@ const PaymentSummaryPanel: FC<Props> = ({
         <div className="space-y-2">
           <p className="text-sm">Select payment method</p>
           {isLoadingPaymentMethods ? (
-            <div className="flex items-center space-x-4 rounded-md border border-scale-700 bg-scale-400 px-4 py-2">
+            <div className="flex items-center px-4 py-2 space-x-4 border rounded-md border-scale-700 bg-scale-400">
               <IconLoader className="animate-spin" size={14} />
               <p className="text-sm text-scale-1100">Retrieving payment methods</p>
             </div>
           ) : paymentMethods.length === 0 ? (
-            <div className="flex items-center justify-between rounded-md border border-dashed bg-scale-100 px-4 py-2">
+            <div className="flex items-center justify-between px-4 py-2 border border-dashed rounded-md bg-scale-100">
               <div className="flex items-center space-x-4 text-scale-1100">
                 <IconAlertCircle size={16} strokeWidth={1.5} />
                 <p className="text-sm">No saved payment methods</p>
@@ -373,11 +377,11 @@ const PaymentSummaryPanel: FC<Props> = ({
                 )
               })}
               <div
-                className="group flex cursor-pointer items-center space-x-2 py-2 px-3 transition hover:bg-scale-500"
+                className="flex items-center px-3 py-2 space-x-2 transition cursor-pointer group hover:bg-scale-500"
                 onClick={onSelectAddNewPaymentMethod}
               >
                 <IconPlus size={16} />
-                <p className="text-scale-1000 transition group-hover:text-scale-1200">
+                <p className="transition text-scale-1000 group-hover:text-scale-1200">
                   Add new payment method
                 </p>
               </div>
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index e7f246d8b27..9f3ef740bcc 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -158,7 +158,7 @@ const ProUpgrade: FC<Props> = ({
     captchaRef.current?.resetCaptcha()
   }
 
-  const onConfirmPayment = async () => {
+  const beforeConfirmPayment = async () => {
     setIsSubmitting(true)
     let token = captchaToken
 
@@ -166,12 +166,15 @@ const ProUpgrade: FC<Props> = ({
       if (!token) {
         const captchaResponse = await captchaRef.current?.execute({ async: true })
         token = captchaResponse?.response ?? null
+        setCaptchaToken(token)
       }
     } catch (error) {
       setIsSubmitting(false)
       return
     }
+  }
 
+  const onConfirmPayment = async () => {
     const payload = formSubscriptionUpdatePayload(
       currentSubscription,
       selectedTier,
@@ -179,7 +182,7 @@ const ProUpgrade: FC<Props> = ({
       nonChangeableAddons,
       selectedPaymentMethodId,
       projectRegion,
-      token ?? undefined
+      captchaToken ?? undefined
     )
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
     resetCaptcha()
@@ -223,17 +226,17 @@ const ProUpgrade: FC<Props> = ({
         enter="transition ease-out duration-300"
         enterFrom="transform opacity-0 translate-x-10"
         enterTo="transform opacity-100 translate-x-0"
-        className="flex w-full items-start justify-between"
+        className="flex items-start justify-between w-full"
       >
         <div className="flex-grow mt-10">
           <div className="relative space-y-4">
-            <div className="space-y-4 2xl:min-w-5xl mx-auto px-32">
+            <div className="px-32 mx-auto space-y-4 2xl:min-w-5xl">
               <BackButton onClick={() => onSelectBack()} />
               <h4 className="text-lg text-scale-900 !mb-8">Change your project's subscription</h4>
             </div>
 
             <div
-              className="space-y-8 overflow-y-auto pb-8 2xl:min-w-5xl mx-auto px-32"
+              className="px-32 pb-8 mx-auto space-y-8 overflow-y-auto 2xl:min-w-5xl"
               style={{ height: 'calc(100vh - 9rem - 57px)' }}
             >
               <div className="space-y-2">
@@ -257,14 +260,14 @@ const ProUpgrade: FC<Props> = ({
                   </>
                 )}
               </div>
-              <div className="flex items-center justify-between gap-16 rounded border border-panel-border-light border-panel-border-dark bg-panel-body-light px-6 py-4 drop-shadow-sm dark:bg-panel-body-dark">
+              <div className="flex items-center justify-between gap-16 px-6 py-4 border rounded border-panel-border-light border-panel-border-dark bg-panel-body-light drop-shadow-sm dark:bg-panel-body-dark">
                 <div>
                   <div className="flex items-center space-x-2">
                     <p>Enable spend cap</p>
                     <IconHelpCircle
                       size={16}
                       strokeWidth={1.5}
-                      className="cursor-pointer opacity-50 transition hover:opacity-100"
+                      className="transition opacity-50 cursor-pointer hover:opacity-100"
                       onClick={() => setShowSpendCapHelperModal(true)}
                     />
                   </div>
@@ -342,6 +345,7 @@ const ProUpgrade: FC<Props> = ({
             onSelectAddNewPaymentMethod={() => {
               setShowAddPaymentMethodModal(true)
             }}
+            beforeConfirmPayment={beforeConfirmPayment}
             onConfirmPayment={onConfirmPayment}
             isSubmitting={isSubmitting}
             captcha={
@@ -375,7 +379,7 @@ const ProUpgrade: FC<Props> = ({
         header="Enabling spend cap"
         onCancel={() => setShowSpendCapHelperModal(false)}
       >
-        <div className="space-y-4 py-4">
+        <div className="py-4 space-y-4">
           <Modal.Content>
             <div className="space-y-4">
               <p className="text-sm">
@@ -390,7 +394,7 @@ const ProUpgrade: FC<Props> = ({
               </p>
               {/* Maybe instead of a table, show something more interactive like a spend cap playground */}
               {/* Maybe ideate this in Figma first but this is good enough for now */}
-              <div className="rounded border border-scale-600 bg-scale-500">
+              <div className="border rounded border-scale-600 bg-scale-500">
                 <div className="flex items-center px-4 pt-2 pb-1">
                   <p className="w-[50%] text-sm text-scale-1100">Item</p>
                   <p className="w-[25%] text-sm text-scale-1100">Limit</p>
@@ -417,7 +421,7 @@ const ProUpgrade: FC<Props> = ({
                           <IconHelpCircle
                             size={16}
                             strokeWidth={1.5}
-                            className="cursor-pointer opacity-50 transition hover:opacity-100"
+                            className="transition opacity-50 cursor-pointer hover:opacity-100"
                           />
                         </Tooltip.Trigger>
                         <Tooltip.Content side="bottom">

From 4b765fd1250379ac1cf47def855b8293fe4633af Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 21:30:18 +0700
Subject: [PATCH 117/215] Fix hcaptcha for upgrading instance

---
 .../interfaces/Billing/EnterpriseUpdate.tsx   | 19 +++++++++++++++++++
 .../PaymentSummaryPanel.tsx                   | 17 +++++++++++------
 .../interfaces/Billing/ProUpgrade.tsx         |  6 ++++--
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index 078cd190f42..697060a6340 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -137,6 +137,24 @@ const EnterpriseUpdate: FC<Props> = ({
     captchaRef.current?.resetCaptcha()
   }
 
+  const beforeConfirmPayment = async (): Promise<boolean> => {
+    setIsSubmitting(true)
+    let token = captchaToken
+
+    try {
+      if (!token) {
+        const captchaResponse = await captchaRef.current?.execute({ async: true })
+        token = captchaResponse?.response ?? null
+        setCaptchaToken(token)
+      }
+    } catch (error) {
+      setIsSubmitting(false)
+      return false
+    }
+
+    return true
+  }
+
   // Last todo to support enterprise billing on dashboard + E2E test
   const onConfirmPayment = async () => {
     setIsSubmitting(true)
@@ -296,6 +314,7 @@ const EnterpriseUpdate: FC<Props> = ({
             onSelectAddNewPaymentMethod={() => {
               setShowAddPaymentMethodModal(true)
             }}
+            beforeConfirmPayment={beforeConfirmPayment}
             onConfirmPayment={onConfirmPayment}
             captcha={
               <HCaptcha
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
index 8f648296f80..8deab10c609 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
@@ -42,7 +42,7 @@ interface Props {
   isLoadingPaymentMethods: boolean
   onSelectPaymentMethod: (method: any) => void
   onSelectAddNewPaymentMethod: () => void
-  beforeConfirmPayment?: () => Promise<void>
+  beforeConfirmPayment: () => Promise<boolean>
   onConfirmPayment: () => void
   isSubmitting: boolean
 
@@ -134,11 +134,16 @@ const PaymentSummaryPanel: FC<Props> = ({
         message: error,
       })
     } else {
-      await beforeConfirmPayment?.()
-
-      isChangingComputeSize || (isChangingPITRDuration && selectedPITRDays === 0)
-        ? setShowConfirmModal(true)
-        : onConfirmPayment()
+      // [Joshen] We're validating captcha before subsequent actions as there's an issue
+      // with the hcaptcha overlay and the modal component, such that clicking on the hcaptcha closes
+      // both the hcaptcha overlay and the modal. Need to figure that out first, then we can validate
+      // the hcaptcha within onConfirmPayment()
+      const hasValidCaptcha = await beforeConfirmPayment()
+      if (hasValidCaptcha) {
+        isChangingComputeSize || (isChangingPITRDuration && selectedPITRDays === 0)
+          ? setShowConfirmModal(true)
+          : onConfirmPayment()
+      }
     }
   }
 
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index 9f3ef740bcc..58434629eb8 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -158,7 +158,7 @@ const ProUpgrade: FC<Props> = ({
     captchaRef.current?.resetCaptcha()
   }
 
-  const beforeConfirmPayment = async () => {
+  const beforeConfirmPayment = async (): Promise<boolean> => {
     setIsSubmitting(true)
     let token = captchaToken
 
@@ -170,8 +170,10 @@ const ProUpgrade: FC<Props> = ({
       }
     } catch (error) {
       setIsSubmitting(false)
-      return
+      return false
     }
+
+    return true
   }
 
   const onConfirmPayment = async () => {

From 4b391ae42691348c344781da96902815f5da631f Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 21:44:01 +0700
Subject: [PATCH 118/215] Fix submitting state

---
 studio/components/interfaces/Billing/EnterpriseUpdate.tsx | 1 +
 studio/components/interfaces/Billing/ProUpgrade.tsx       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index 697060a6340..254d83275c7 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -152,6 +152,7 @@ const EnterpriseUpdate: FC<Props> = ({
       return false
     }
 
+    setIsSubmitting(false)
     return true
   }
 
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index 58434629eb8..2f05f9a8844 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -173,6 +173,7 @@ const ProUpgrade: FC<Props> = ({
       return false
     }
 
+    setIsSubmitting(false)
     return true
   }
 

From b40e6216aba6ec03574318b23a45b7648333e529 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 21 Dec 2022 16:49:34 +0700
Subject: [PATCH 119/215] Fix storage side bar text overflow

---
 studio/components/layouts/StorageLayout/StorageMenu.tsx   | 6 ++++--
 .../Storage/StorageExplorer/FileExplorerHeader.js         | 3 ++-
 studio/components/ui/ProductMenu/ProductMenuItem.tsx      | 8 ++++----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/studio/components/layouts/StorageLayout/StorageMenu.tsx b/studio/components/layouts/StorageLayout/StorageMenu.tsx
index dc41cdacb64..2889292f42f 100644
--- a/studio/components/layouts/StorageLayout/StorageMenu.tsx
+++ b/studio/components/layouts/StorageLayout/StorageMenu.tsx
@@ -122,8 +122,10 @@ const BucketRow = ({
     <ProductMenuItem
       key={bucket.id}
       name={
-        <div className="flex items-center space-x-2">
-          <p>{bucket.name}</p>
+        <div className="flex items-center justify-between space-x-2 truncate w-full">
+          <p className="truncate" title={bucket.name}>
+            {bucket.name}
+          </p>
           {bucket.public && <Badge color="yellow">Public</Badge>}
         </div>
       }
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
index 139a0be29cb..ad57ec629c1 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
@@ -34,7 +34,7 @@ const HeaderPathEdit = ({ loading, breadcrumbs, togglePathEdit }) => {
         </div>
       ) : (
         <div className="flex cursor-pointer items-center">
-          <p className="ml-3 text-sm">{breadcrumbs[breadcrumbs.length - 1] || ''}</p>
+          <p className="ml-3 text-sm truncate">{breadcrumbs[breadcrumbs.length - 1] || ''}</p>
           <div className="ml-3 flex items-center space-x-2 opacity-0 transition group-hover:opacity-100">
             <Button type="text" icon={<IconEdit2 />}>
               Navigate
@@ -224,6 +224,7 @@ const FileExplorerHeader = ({
               autoFocus
               key="pathSet"
               type="text"
+              size="small"
               value={pathString}
               onChange={onUpdatePathString}
               placeholder="e.g Parent Folder/Child Folder"
diff --git a/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/studio/components/ui/ProductMenu/ProductMenuItem.tsx
index 49c57997a3c..82808c4c391 100644
--- a/studio/components/ui/ProductMenu/ProductMenuItem.tsx
+++ b/studio/components/ui/ProductMenu/ProductMenuItem.tsx
@@ -31,16 +31,16 @@ const ProductMenuItem: FC<Props> = ({
 }) => {
   const menuItem = (
     <Menu.Item icon={icon} rounded active={isActive} onClick={onClick}>
-      <div className="flex w-full items-center justify-between">
-        <span
+      <div className="flex w-full items-center justify-between gap-1">
+        <div
           title={hoverText ? hoverText : typeof name === 'string' ? name : ''}
-          className={'flex items-center gap-2 truncate ' + textClassName}
+          className={'flex items-center gap-2 truncate w-full ' + textClassName}
         >
           {name}{' '}
           {label !== undefined && (
             <span className="text-orange-800 text-xs font-normal">{label}</span>
           )}
-        </span>
+        </div>
         {action}
       </div>
     </Menu.Item>

From 7f3b0f5a24e5ce8bf1585ad70eafb5d9fcc486fb Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 21 Dec 2022 11:48:30 -0330
Subject: [PATCH 120/215] Fix sidebar spacing

---
 apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
index d4167720768..ccad3bb7505 100644
--- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useMenuLevelId } from '~/hooks/useMenuState'
 import { useTheme } from 'common/Providers'
+import { Fragment } from 'react'
 
 const home = [
   [
@@ -129,7 +130,7 @@ const NavigationMenuHome = () => {
       <ul className="relative w-full flex flex-col gap-4">
         {home.map((section, sectionIndex) => {
           return (
-            <div key={`section-container-${sectionIndex}-border`}>
+            <Fragment key={`section-container-${sectionIndex}-border`}>
               {sectionIndex !== 0 && (
                 <div
                   className="h-px w-full bg-blackA-300 dark:bg-whiteA-300"
@@ -176,7 +177,7 @@ const NavigationMenuHome = () => {
                   })}
                 </div>
               </div>
-            </div>
+            </Fragment>
           )
         })}
       </ul>

From 36f4b192385396cdf3437066919d4aef92672983 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 21 Dec 2022 16:26:16 -0330
Subject: [PATCH 121/215] Rename component so it matches filename

---
 apps/docs/layouts/SiteLayout.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 9c73280091d..ac46ec931fc 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -170,7 +170,7 @@ const SiteLayout = ({ children }) => {
               </div>
             </div>
             <div className={['pb-10 px-5 md:px-10 md:flex'].join(' ')}>
-              <NavigationMenu />
+              <NavigationMenu context="side" />
             </div>
           </div>
         </div>
@@ -183,7 +183,6 @@ const SiteLayout = ({ children }) => {
           ].join(' ')}
         >
           <div className="flex flex-col relative">
-            {/* <NavigationMenu /> */}
             <div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
               <TopNavBarRef />
             </div>
@@ -269,7 +268,7 @@ const SiteLayout = ({ children }) => {
                       : 'left-[-40px] h-0 opacity-0 invisible',
                   ].join(' ')}
                 >
-                  <NavigationMenu />
+                  <NavigationMenu context="mobile" />
                 </div>
               </div>
             </div>

From 5aa0f828ef0d3cd3b0687f510acbc5c784b47316 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 21 Dec 2022 16:26:54 -0330
Subject: [PATCH 122/215] Pass a menu context to avoid dupe key warnings

---
 .../NavigationMenu/NavigationMenu.tsx         | 26 +++++++++----------
 .../NavigationMenuGuideList.tsx               | 25 +++++++++---------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 96bb2416bcf..c579eb68707 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -62,7 +62,7 @@ export type RefKeyOptions =
   | 'self-hosting-storage'
   | 'self-hosting-realtime'
 
-const SideNav = () => {
+const NavigationMenu = ({ context }) => {
   const router = useRouter()
 
   let version = ''
@@ -160,17 +160,17 @@ const SideNav = () => {
     <div className="flex relative">
       {/* // main menu */}
       <NavigationMenuHome />
-      <NavigationMenuGuideList id={'gettingstarted'} />
-      <NavigationMenuGuideList id={'database'} />
-      <NavigationMenuGuideList id={'auth'} />
-      <NavigationMenuGuideList id={'functions'} />
-      <NavigationMenuGuideList id={'realtime'} />
-      <NavigationMenuGuideList id={'storage'} />
-      <NavigationMenuGuideList id={'platform'} />
-      <NavigationMenuGuideList id={'resources'} />
-      <NavigationMenuGuideList id={'integrations'} />
-      <NavigationMenuGuideList id={'self_hosting'} />
-      <NavigationMenuGuideList id={'reference'} />
+      <NavigationMenuGuideList id={'gettingstarted'} context={context} />
+      <NavigationMenuGuideList id={'database'} context={context} />
+      <NavigationMenuGuideList id={'auth'} context={context} />
+      <NavigationMenuGuideList id={'functions'} context={context} />
+      <NavigationMenuGuideList id={'realtime'} context={context} />
+      <NavigationMenuGuideList id={'storage'} context={context} />
+      <NavigationMenuGuideList id={'platform'} context={context} />
+      <NavigationMenuGuideList id={'resources'} context={context} />
+      <NavigationMenuGuideList id={'integrations'} context={context} />
+      <NavigationMenuGuideList id={'self_hosting'} context={context} />
+      <NavigationMenuGuideList id={'reference'} context={context} />
       {/* // Client Libs */}
       <NavigationMenuRefList
         key={'reference-js-menu-v1'}
@@ -236,4 +236,4 @@ const SideNav = () => {
   )
 }
 
-export default memo(SideNav)
+export default memo(NavigationMenu)
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 6b110bd5687..d5f97f50e6c 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -3,7 +3,7 @@ import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { Fragment } from 'react'
 import { IconChevronLeft } from '~/../../packages/ui'
 import { useMenuLevelId } from '~/hooks/useMenuState'
 import * as NavItems from './NavigationMenu.constants'
@@ -11,8 +11,9 @@ import * as NavItems from './NavigationMenu.constants'
 interface Props {
   id: string
   setMenuLevelId?: any
+  context: 'side' | 'mobile'
 }
-const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
+const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId, context }) => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
@@ -30,7 +31,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
   return (
     <Accordion.Root
       collapsible
-      key={id}
+      key={id + context}
       type="single"
       value={firstLevelRoute}
       className={[
@@ -92,7 +93,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
           // console.log('1st type of link?', x.items && x.items.length > 0)
           // console.log()
           return (
-            <div key={x.url}>
+            <div key={x.name + context}>
               {x.items && x.items.length > 0 ? (
                 <div>
                   {x.items.map((subItem, subItemIndex) => {
@@ -114,7 +115,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
                     }
 
                     return (
-                      <>
+                      <Fragment key={x.name + context + subItemIndex}>
                         {subItemIndex === 0 && (
                           <>
                             <div className="h-px w-full bg-green-500 my-3"></div>
@@ -123,8 +124,8 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
                             </span>
                           </>
                         )}
-                        <Accordion.Item key={subItem.label} value={subItem.url}>
-                          <li key={subItem.name}>
+                        <Accordion.Item key={subItem.label + context} value={subItem.url}>
+                          <li key={subItem.name + context}>
                             <LinkContainer
                               url={subItem.url}
                               className={[
@@ -155,7 +156,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
                             <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2">
                               {subItem.items.map((subSubItem, subSubItemIndex) => {
                                 return (
-                                  <li key={subItem.name}>
+                                  <li key={subItem.name + context}>
                                     <Link href={`${subSubItem.url}`} passHref>
                                       <a
                                         className={[
@@ -174,12 +175,12 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
                             </Accordion.Content>
                           )}
                         </Accordion.Item>
-                      </>
+                      </Fragment>
                     )
                   })}
                 </div>
               ) : (
-                <>
+                <Fragment key={x.url + context}>
                   <li>
                     <Link href={`${x.url}`} passHref>
                       <a
@@ -195,7 +196,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
                       </a>
                     </Link>
                   </li>
-                </>
+                </Fragment>
               )}
             </div>
           )
@@ -210,7 +211,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
         )}
         {menu.extras?.map((x) => {
           return (
-            <div key={x.name}>
+            <div key={x.name + context}>
               <li>
                 <Link href={`${x.href}`} passHref>
                   <a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">

From 40139296c2856ba06328d62f1b5297c4ecf4b3f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:12:07 +0000
Subject: [PATCH 123/215] LW6 internal linking.

---
 .../_blog/2022-12-09-launch-week-6-hackathon.mdx    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/apps/www/_blog/2022-12-09-launch-week-6-hackathon.mdx b/apps/www/_blog/2022-12-09-launch-week-6-hackathon.mdx
index 212e9cce132..5401d567ae6 100644
--- a/apps/www/_blog/2022-12-09-launch-week-6-hackathon.mdx
+++ b/apps/www/_blog/2022-12-09-launch-week-6-hackathon.mdx
@@ -113,3 +113,16 @@ Don't forget to checkout the new feature's being announced as part of [Launch We
 - Any intellectual property developed during the hackathon will belong to the team that developed it. We expect that each team will have an agreement between themselves regarding the IP, but this is not required
 - By making a submission you grant Supabase permission to use screenshots, code-snippets and/or links to your project or content of your README on our Twitter, blog, website, email updates, and in the Supabase discord server. Supabase does not make any claims over your IP.
 - $1500 prize will be paid by making a GitHub sponsorship to the winning repo, $500/month for 3 months. The goal here is to create a sustainable project that will be continue to be maintained for the duration of the sponsorship period (and hopefully beyond :) )
+
+## More Launch Week 6
+
+- [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
+- [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
+- [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)
+

From 92e0798d707e209e05f5cf565a1de8e7f5de44ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:13:13 +0000
Subject: [PATCH 124/215] Add LW6 links.

---
 apps/www/_blog/2022-12-10-postgres-crdt.mdx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/www/_blog/2022-12-10-postgres-crdt.mdx b/apps/www/_blog/2022-12-10-postgres-crdt.mdx
index 066544d0003..143a356fee7 100644
--- a/apps/www/_blog/2022-12-10-postgres-crdt.mdx
+++ b/apps/www/_blog/2022-12-10-postgres-crdt.mdx
@@ -145,3 +145,15 @@ We're likely to discover more (no doubt from a few friendly HN comments).
 ## Next steps
 
 If you want to help with `pg_crdt` the best way is to get involved in the GitHub repo. We have enabled [Discussions](https://github.com/supabase/pg_crdt/discussions) for any and all ideas. If you have experience with CRDTs and you like this approach, don't hesitate to contact one of the team.
+
+## More Launch Week 6
+
+- [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
+- [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
+- [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From 475dad2ae42b4587c81a4e3d1f2adb4be64420fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:14:03 +0000
Subject: [PATCH 125/215] Add LW6 links.

---
 ...022-12-12-new-supabase-docs-built-with-nextjs.mdx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2022-12-12-new-supabase-docs-built-with-nextjs.mdx b/apps/www/_blog/2022-12-12-new-supabase-docs-built-with-nextjs.mdx
index 41f8ef5ac1e..9f725b9ab84 100644
--- a/apps/www/_blog/2022-12-12-new-supabase-docs-built-with-nextjs.mdx
+++ b/apps/www/_blog/2022-12-12-new-supabase-docs-built-with-nextjs.mdx
@@ -94,6 +94,12 @@ Docs are more than just the tech behind them. The goal of docs is to give you, t
 
 ## More Launch Week 6
 
-- [Launch Week 6 Hackathon](https://supabase.com/blog/launch-week-6-hackathon)
-- [Who We Hire at Supabase](https://supabase.com/blog/who-we-hire)
-- [pg_crdt - an experimental CRDT extension for Postgres](https://supabase.com/blog/postgres-crdt)
+- [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
+- [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)
+

From 2df59cd798d9fedd4ca4f6d2c5dc8623843f0b2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:15:22 +0000
Subject: [PATCH 126/215] Add LW6 links.

---
 .../2022-12-13-storage-image-resizing-smart-cdn.mdx  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx b/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
index 00f68ff0f90..2bd558fc1b5 100644
--- a/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
+++ b/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
@@ -205,3 +205,15 @@ A few features to look out for in the future:
 - Check out the Docs for [Image Resizing](https://supabase.com/docs/guides/storage/image-transformations).
 - Check out the Docs for the [Storage CDN](https://supabase.com/docs/guides/storage/cdn).
 - Get Started today with the [JavaScript](https://supabase.com/docs/reference/javascript/storage-from-download) and [Dart](https://supabase.com/docs/reference/dart/storage-from-list) client libraries.
+
+## More Launch Week 6
+
+- [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
+- [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
+- [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From c809bfbf148a41a15fdd26523beddf4df558f39c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:15:44 +0000
Subject: [PATCH 127/215] REmoved a link.

---
 apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx b/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
index 2bd558fc1b5..deb677996d5 100644
--- a/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
+++ b/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
@@ -209,7 +209,6 @@ A few features to look out for in the future:
 ## More Launch Week 6
 
 - [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
-- [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
 - [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
 - [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
 - [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)

From b00e107228f7412f99f2be7b806b7f11ea6955cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:17:30 +0000
Subject: [PATCH 128/215] Add LW6 links.

---
 apps/www/_blog/2022-12-14-mfa-auth-via-rls.mdx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2022-12-14-mfa-auth-via-rls.mdx b/apps/www/_blog/2022-12-14-mfa-auth-via-rls.mdx
index b2b4cbedff0..bfb8e02b25d 100644
--- a/apps/www/_blog/2022-12-14-mfa-auth-via-rls.mdx
+++ b/apps/www/_blog/2022-12-14-mfa-auth-via-rls.mdx
@@ -128,10 +128,14 @@ For starters, we are looking to support WebAuthn and FIDO2 compliant devices suc
 
 We are grateful to our early MFA users for the support and feedback provided throughout this period. In particular, we would like to thank [Fabian Beer](https://madebyfabian.com), [Cogram](https://www.cogram.com), and [Happl](https://happl.com) whose detailed feedback helped to shape our implementation. We would also like to specially thank the community behind the [pquerna/otp](https://github.com/pquerna/otp) and [ajstarks/svgo](https://github.com/ajstarks/svgo) libraries - their work is indispensable to this implementation.
 
+
 ## More Launch Week 6
 
 - [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
 - [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
-- [Launch Week 6 Hackathon](https://supabase.com/blog/launch-week-6-hackathon)
-- [Who We Hire at Supabase](https://supabase.com/blog/who-we-hire)
-- [pg_crdt - an experimental CRDT extension for Postgres](https://supabase.com/blog/postgres-crdt)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From a5f0ada501d14fb412d1d4b968a4fa45a6601b1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:18:03 +0000
Subject: [PATCH 129/215] Add LW6 links.

---
 .../2022-12-15-postgres-foreign-data-wrappers-rust.mdx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2022-12-15-postgres-foreign-data-wrappers-rust.mdx b/apps/www/_blog/2022-12-15-postgres-foreign-data-wrappers-rust.mdx
index c746fd61ba4..62147a24dd0 100644
--- a/apps/www/_blog/2022-12-15-postgres-foreign-data-wrappers-rust.mdx
+++ b/apps/www/_blog/2022-12-15-postgres-foreign-data-wrappers-rust.mdx
@@ -259,6 +259,8 @@ If you're interested in getting involved or building your own Wrapper, don't hes
 - [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
 - [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
 - [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
-- [Launch Week 6 Hackathon](https://supabase.com/blog/launch-week-6-hackathon)
-- [Who We Hire at Supabase](https://supabase.com/blog/who-we-hire)
-- [pg_crdt - an experimental CRDT extension for Postgres](https://supabase.com/blog/postgres-crdt)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From 81a4fd2b487964c0beb1829915d3eba76a5c00df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:18:41 +0000
Subject: [PATCH 130/215] Add LW6 links.

---
 apps/www/_blog/2022-12-16-custom-domain-names.mdx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2022-12-16-custom-domain-names.mdx b/apps/www/_blog/2022-12-16-custom-domain-names.mdx
index 014255f71a8..79ca54ad805 100644
--- a/apps/www/_blog/2022-12-16-custom-domain-names.mdx
+++ b/apps/www/_blog/2022-12-16-custom-domain-names.mdx
@@ -62,6 +62,8 @@ We're working hard to fix these limitations, so stay tuned for future updates.
 - [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
 - [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
 - [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
-- [Launch Week 6 Hackathon](https://supabase.com/blog/launch-week-6-hackathon)
-- [Who We Hire at Supabase](https://supabase.com/blog/who-we-hire)
-- [pg_crdt - an experimental CRDT extension for Postgres](https://supabase.com/blog/postgres-crdt)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From 784a11d2b057e2ab8775b6e8819edb73624e50e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:19:11 +0000
Subject: [PATCH 131/215] Add LW6 links.

---
 apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx b/apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx
index b0c7f395dc8..81cbbfdf6d7 100644
--- a/apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx
+++ b/apps/www/_blog/2022-12-16-launch-week-6-community-day.mdx
@@ -237,4 +237,7 @@ We plan to continue our open and collaborative trend. There are many companies w
 - [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
 - [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
 - [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
-- [Who We Hire at Supabase](https://supabase.com/blog/who-we-hire)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From fc89afeb9213b86c9ba75a3211e94d1f1ff0111a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:19:40 +0000
Subject: [PATCH 132/215] Add LW6 links.

---
 apps/www/_blog/2022-12-16-new-in-postgres-15.mdx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/www/_blog/2022-12-16-new-in-postgres-15.mdx b/apps/www/_blog/2022-12-16-new-in-postgres-15.mdx
index d1b158b5a47..6eb78cee729 100644
--- a/apps/www/_blog/2022-12-16-new-in-postgres-15.mdx
+++ b/apps/www/_blog/2022-12-16-new-in-postgres-15.mdx
@@ -68,3 +68,15 @@ Before choosing to upgrade, don't forget to check the list of rare cases that ne
 - If you're self-hosting, upgrading between major PostgreSQL is easily done with [pg_upgrade](https://www.postgresql.org/docs/current/pgupgrade.html) utility or a set of recommended practices in the [official docs](https://www.postgresql.org/docs/current/upgrading.html).
 - If you're starting a new project on Supabase, you'll already be on PG15.
 - If you want to upgrade an existing project, check out our [Upgrading](https://supabase.com/docs/guides/platform/migrating-and-upgrading-projects#upgrade-your-project) documentation.
+
+## More Launch Week 6
+
+- [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
+- [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
+- [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From d77d306f2fa82804da56c89c87790af3b1febf0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:20:29 +0000
Subject: [PATCH 133/215] Add LW6 links.

---
 apps/www/_blog/2022-12-16-pg-graphql-v1.mdx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2022-12-16-pg-graphql-v1.mdx b/apps/www/_blog/2022-12-16-pg-graphql-v1.mdx
index 30c6c59d777..d72dcdfd1d4 100644
--- a/apps/www/_blog/2022-12-16-pg-graphql-v1.mdx
+++ b/apps/www/_blog/2022-12-16-pg-graphql-v1.mdx
@@ -98,6 +98,9 @@ Longer term we look forward to experimenting with more ambitions features like a
 - [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
 - [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
 - [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
-- [Launch Week 6 Hackathon](https://supabase.com/blog/launch-week-6-hackathon)
-- [Who We Hire at Supabase](https://supabase.com/blog/who-we-hire)
-- [pg_crdt - an experimental CRDT extension for Postgres](https://supabase.com/blog/postgres-crdt)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From 57bdacc0939f4ef305de7ef67797841dcb0c6702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:20:54 +0000
Subject: [PATCH 134/215] Add LW6 links.

---
 .../_blog/2022-12-16-postgres-point-in-time-recovery.mdx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2022-12-16-postgres-point-in-time-recovery.mdx b/apps/www/_blog/2022-12-16-postgres-point-in-time-recovery.mdx
index 243adfdb0e1..3e9007dbe0b 100644
--- a/apps/www/_blog/2022-12-16-postgres-point-in-time-recovery.mdx
+++ b/apps/www/_blog/2022-12-16-postgres-point-in-time-recovery.mdx
@@ -45,6 +45,8 @@ Enabling Point in Time Recovery could be done [in the Dashboard](https://app.sup
 - [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
 - [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
 - [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
-- [Launch Week 6 Hackathon](https://supabase.com/blog/launch-week-6-hackathon)
-- [Who We Hire at Supabase](https://supabase.com/blog/who-we-hire)
-- [pg_crdt - an experimental CRDT extension for Postgres](https://supabase.com/blog/postgres-crdt)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From b33df9021828b2ed7ac65c74dd67d3b5ed1f7ea8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:21:22 +0000
Subject: [PATCH 135/215] Add LW6 links.

---
 .../www/_blog/2022-12-16-postgrest-11-prerelease.mdx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/www/_blog/2022-12-16-postgrest-11-prerelease.mdx b/apps/www/_blog/2022-12-16-postgrest-11-prerelease.mdx
index bbef228a26d..138a576eefc 100644
--- a/apps/www/_blog/2022-12-16-postgrest-11-prerelease.mdx
+++ b/apps/www/_blog/2022-12-16-postgrest-11-prerelease.mdx
@@ -224,3 +224,15 @@ $ supabase start
 ```
 
 Please try it and report any bugs, suggestions or ideas!
+
+## More Launch Week 6
+
+- [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
+- [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
+- [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Day 5: Supabase Vault is now in Beta](https://supabase.com/blog/vault-now-in-beta)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From 00bf19b5dd19d570a2c09168c3a7678245f070a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Nu=C3=B1ez=20Dosio?= <ramiro@supabase.io>
Date: Wed, 21 Dec 2022 20:21:58 +0000
Subject: [PATCH 136/215] Add LW6 links.

---
 apps/www/_blog/2022-12-16-vault-now-in-beta.mdx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/www/_blog/2022-12-16-vault-now-in-beta.mdx b/apps/www/_blog/2022-12-16-vault-now-in-beta.mdx
index 3d1418be10d..141e75ed838 100644
--- a/apps/www/_blog/2022-12-16-vault-now-in-beta.mdx
+++ b/apps/www/_blog/2022-12-16-vault-now-in-beta.mdx
@@ -91,6 +91,8 @@ You'll see the Vault appear in the Dashboard over the next month. If you want to
 - [Day 1: New Supabase Docs, built with Next.js](https://supabase.com/blog/new-supabase-docs-built-with-nextjs)
 - [Day 2: Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
 - [Day 3: Multi-factor Authentication via Row Level Security Enforcement](https://supabase.com/blog/mfa-auth-via-rls)
-- [Launch Week 6 Hackathon](https://supabase.com/blog/launch-week-6-hackathon)
-- [Who We Hire at Supabase](https://supabase.com/blog/who-we-hire)
-- [pg_crdt - an experimental CRDT extension for Postgres](https://supabase.com/blog/postgres-crdt)
+- [Day 4: Supabase Wrappers, a Postgres FDW framework written in Rust](https://supabase.com/blog/postgres-foreign-data-wrappers-rust)
+- [Community Day](https://supabase.com/blog/launch-week-6-community-day)
+- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
+- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
+- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)

From 82d7eaed40952777d258cb4636aadcf6743f2db1 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 21 Dec 2022 17:08:06 -0330
Subject: [PATCH 137/215] More cleanup and key passing

---
 .../NavigationMenuGuideList.tsx               | 19 ++++-
 .../NavigationMenu/NavigationMenuRefList.tsx  | 79 +++++++------------
 .../reference/RefFunctionSection.tsx          | 21 ++---
 3 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index d5f97f50e6c..32bacbe94b8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -191,7 +191,15 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId, context
                             : 'hover:text-brand-900 text-scale-1000',
                         ].join(' ')}
                       >
-                        {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
+                        {x.icon && (
+                          <Image
+                            width={12}
+                            height={12}
+                            alt={x.icon}
+                            src={`${router.basePath}${x.icon}`}
+                          />
+                        )}
+
                         {x.name}
                       </a>
                     </Link>
@@ -215,7 +223,14 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId, context
               <li>
                 <Link href={`${x.href}`} passHref>
                   <a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">
-                    {x.icon && <img className="w-4" src={`${router.basePath}${x.icon}`} />}
+                    {x.icon && (
+                      <Image
+                        width={15}
+                        height={15}
+                        alt={x.icon}
+                        src={`${router.basePath}${x.icon}`}
+                      />
+                    )}
                     {x.name}
                   </a>
                 </Link>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index e2db35f487a..377973897a7 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -8,11 +8,11 @@ import { find } from 'lodash'
 import Image from 'next/image'
 import { useTheme } from 'common/Providers'
 
-// import apiCommonSections from '~/../../spec/common-client-libs-sections.json'
-
 import RevVersionDropdown from '~/components/RefVersionDropdown'
 import { useMenuActiveRefId, useMenuLevelId } from '~/hooks/useMenuState'
 import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
+import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils'
+import { Fragment } from 'react'
 
 const FunctionLink = ({
   title,
@@ -140,9 +140,6 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
         }).items.map((x) => x.id)
       : []
 
-  // console.log(filterIds)
-  // console.log(modifierIds)
-
   const level = useMenuLevelId()
 
   return (
@@ -192,24 +189,8 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
 
         <ul className="function-link-list">
           {sections.map((fn: any, fnIndex) => {
-            //
-            // check if the link is allowed to be displayed
-            function isFuncNotInLibraryOrVersion(id, type) {
-              if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
-                /*
-                 * Remove this menu link from side bar, as it does not exist for either
-                 * this language, or for this lib version
-                 *
-                 * */
-                return true
-              } else {
-                return false
-              }
-            }
-
-            // run allow check
-            if (isFuncNotInLibraryOrVersion(fn.id, fn.type)) {
-              return <></>
+            if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) {
+              return
             }
 
             const RenderLink = (props) => {
@@ -261,7 +242,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
                         props.items
                           .filter((item) => allowedKeys.includes(item.id))
                           .map((item) => {
-                            return <FunctionLink {...item} library={lib} />
+                            return <FunctionLink {...item} library={lib} key={item.id} />
                           })}
                     </Accordion.Content>
                   </Accordion.Item>
@@ -269,34 +250,28 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
               )
             }
 
-            // handle subtitles with subitems
-            if (!fn.id) {
-              return (
-                <>
-                  <Divider />
-                  <SideMenuTitle title={fn.title} />
-                  {fn.items &&
-                    fn.items
-                      //.filter((item) => item.libs && item.libs.includes(lib))
-                      .map((item) => {
-                        // run allow check
-                        if (isFuncNotInLibraryOrVersion(item.id, item.type)) return <></>
-                        return <RenderLink {...item} library={menu.title} />
-                      })}
-                </>
-              )
-            } else {
-              // handle normal links
-              return (
-                <>
-                  <RenderLink {...fn} library={menu.title} />
-                  {fn.items &&
-                    fn.items
-                      //.filter((item) => item.libs.includes(lib))
-                      .map((item) => <RenderLink {...item} library={menu.title} />)}
-                </>
-              )
-            }
+            return fn.id ? (
+              <Fragment key={fn.id}>
+                <RenderLink {...fn} library={menu.title} key={menu.title} />
+                {fn.items &&
+                  fn.items.map((item) => (
+                    <RenderLink {...item} library={menu.title} key={menu.title} />
+                  ))}
+              </Fragment>
+            ) : (
+              <Fragment key={fn.title}>
+                <Divider />
+                <SideMenuTitle title={fn.title} />
+                {fn.items &&
+                  fn.items.map((item, i) =>
+                    isFuncNotInLibraryOrVersion(item.id, item.type, allowedKeys) ? (
+                      <Fragment key={item.id + i}></Fragment>
+                    ) : (
+                      <RenderLink {...item} library={menu.title} key={item.id + i} />
+                    )
+                  )}
+              </Fragment>
+            )
           })}
         </ul>
       </div>
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index a31c52af992..32002c389bc 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -9,6 +9,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout'
 import { extractTsDocNode, generateParameters } from '~/lib/refGenerator/helpers'
 
 import RefDetailCollapse from '~/components/reference/RefDetailCollapse'
+import { Fragment } from 'react'
 
 interface ICommonFunc {
   id: string
@@ -32,11 +33,6 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
   // gracefully return nothing if function does not exist
   if (!item) return <></>
 
-  if (item && !item['$ref']) {
-    //console.warn('🚩 issue with $ref in:', item.id)
-  }
-
-  // console.log(item)
   const hasTsRef = item['$ref'] || null
 
   const tsDefinition =
@@ -89,25 +85,29 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                     })
 
                     const paramItem = overide?.length > 0 ? overide[0] : param
-
                     return (
-                      <Param {...paramItem}>
+                      <Param {...paramItem} key={param.name}>
                         {paramItem.subContent && (
                           <div className="mt-3">
                             <Options>
                               {param.subContent.map((param) => {
                                 return (
-                                  <>
+                                  <Fragment key={param.name + 'subcontent'}>
                                     <Options.Option {...param}>
                                       {param.subContent && (
                                         <Options>
                                           {param.subContent.map((param) => {
-                                            return <Options.Option {...param} />
+                                            return (
+                                              <Options.Option
+                                                {...param}
+                                                key={param.name + 'subcontent-option'}
+                                              />
+                                            )
                                           })}
                                         </Options>
                                       )}
                                     </Options.Option>
-                                  </>
+                                  </Fragment>
                                 )
                               })}
                             </Options>
@@ -150,6 +150,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                       return (
                         <Tabs.Panel
                           id={example.id}
+                          key={example.id}
                           label={example.name}
                           className="flex flex-col gap-3"
                         >

From eba225523acfec46be9cafdfdf6d8be8f546a06a Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 21 Dec 2022 17:19:08 -0330
Subject: [PATCH 138/215] More keys

---
 .../NavigationMenu/NavigationMenu.utils.ts      |  6 ++++++
 .../components/reference/RefSectionHandler.tsx  | 17 +++++++++++++----
 apps/docs/layouts/ref/RefSubLayout.tsx          |  6 ++----
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts
new file mode 100644
index 00000000000..ad3d100450f
--- /dev/null
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts
@@ -0,0 +1,6 @@
+// check if the link is allowed to be displayed
+export function isFuncNotInLibraryOrVersion(id, type, allowedKeys) {
+  if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
+    return true
+  }
+}
diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx
index 75476287461..d54e5d616bb 100644
--- a/apps/docs/components/reference/RefSectionHandler.tsx
+++ b/apps/docs/components/reference/RefSectionHandler.tsx
@@ -36,16 +36,17 @@ const RefSectionHandler = (props) => {
 
   return (
     <RefSubLayout>
-      {props.sections.map((x) => {
+      {props.sections.map((x, i) => {
         switch (x.type) {
           case 'markdown':
             const markdownData = props.pageProps.docs.find((doc) => doc.id === x.id)
 
-            return <RefEducationSection item={x} markdownContent={markdownData} />
+            return <RefEducationSection key={x.id + i} item={x} markdownContent={markdownData} />
             break
           case 'function':
             return (
               <RefFunctionSection
+                key={x.id + i}
                 funcData={x}
                 commonFuncData={x}
                 spec={props.spec}
@@ -53,13 +54,21 @@ const RefSectionHandler = (props) => {
               />
             )
           case 'cli-command':
-            return <CliCommandSection funcData={x} commonFuncData={x} />
+            return <CliCommandSection key={x.id + i} funcData={x} commonFuncData={x} />
             break
           case 'operation':
-            return <ApiOperationSection funcData={x} commonFuncData={x} spec={props.spec} />
+            return (
+              <ApiOperationSection
+                key={x.id + i}
+                funcData={x}
+                commonFuncData={x}
+                spec={props.spec}
+              />
+            )
           default:
             return (
               <RefFunctionSection
+                key={x.id + i}
                 funcData={x}
                 commonFuncData={x}
                 spec={props.spec}
diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index 3357e427ed1..fb3668fc594 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -55,10 +55,9 @@ const RefSubLayout: FC<RefSubLayoutType> & RefSubLayoutSubComponents = (props) =
 }
 
 const Section: FC<ISectionContainer> = (props) => {
-  // console.log({ props })
   return (
     <article
-      key={props.id}
+      key={props.id + 'section'}
       className={[
         props.singleColumn ? 'prose dark:prose-dark w-full' : 'w-full',
         'py-16 lg:py-32 first:pt-8 last:pb-8',
@@ -149,10 +148,9 @@ const EducationRow: FC<IEducationRow> = (props) => {
 }
 
 const EducationSection: FC<IEducationSection> = ({ icon, hideTitle = false, ...props }) => {
-  // console.log({ props })
   return (
     <article
-      key={props.id}
+      key={props.id + 'education'}
       className={'prose dark:prose-dark max-w-none py-16 lg:py-32 first:pt-8 last:pb-8'}
     >
       {!hideTitle && <StickyHeader {...props} icon={icon} />}

From 1c60f4077c2df5cc67dd62467ef0f5253506de70 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Wed, 21 Dec 2022 14:04:59 -0800
Subject: [PATCH 139/215] Update Dashboard Auth links

---
 apps/docs/pages/guides/auth/overview.mdx             |  2 +-
 .../2022-08-03-supabase-beta-update-july-2022.mdx    |  2 +-
 spec/examples/examples.yml                           | 12 ++++++------
 spec/supabase_dart_v1.yml                            |  4 ++--
 spec/supabase_js_v1.yml                              |  2 +-
 spec/supabase_js_v2.yml                              |  2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/docs/pages/guides/auth/overview.mdx b/apps/docs/pages/guides/auth/overview.mdx
index 85b1fdc96da..97044096e13 100644
--- a/apps/docs/pages/guides/auth/overview.mdx
+++ b/apps/docs/pages/guides/auth/overview.mdx
@@ -55,7 +55,7 @@ You can enable third-party providers with the click of a button by navigating to
 
 ### Redirect URLs and wildcards
 
-When using third-party providers, the [Supabase client library](/docs/reference/javascript/auth-signinwithoauth#sign-in-using-a-third-party-provider-with-redirect) redirects the user to the provider. When the third-party provider successfully authenticates the user, the provider redirects the user to the Supabase Auth callback URL where they are further redirected to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or [add additional redirect URLs](https://app.supabase.com/project/_/auth/settings).
+When using third-party providers, the [Supabase client library](/docs/reference/javascript/auth-signinwithoauth#sign-in-using-a-third-party-provider-with-redirect) redirects the user to the provider. When the third-party provider successfully authenticates the user, the provider redirects the user to the Supabase Auth callback URL where they are further redirected to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional [redirect URLs](https://app.supabase.com/project/_/auth/url-configuration).
 
 You can use wildcard match patterns to support preview URLs from providers like Netlify and Vercel. See the [full list of supported patterns](https://pkg.go.dev/github.com/gobwas/glob#Compile). Use [this tool](https://www.digitalocean.com/community/tools/glob?comments=true&glob=http%3A%2F%2Flocalhost%3A3000%2F%2A%2A&matches=false&tests=http%3A%2F%2Flocalhost%3A3000&tests=http%3A%2F%2Flocalhost%3A3000%2F&tests=http%3A%2F%2Flocalhost%3A3000%2F%3Ftest%3Dtest&tests=http%3A%2F%2Flocalhost%3A3000%2Ftest-test%3Ftest%3Dtest&tests=http%3A%2F%2Flocalhost%3A3000%2Ftest%2Ftest%3Ftest%3Dtest) to test your patterns.
 
diff --git a/apps/www/_blog/2022-08-03-supabase-beta-update-july-2022.mdx b/apps/www/_blog/2022-08-03-supabase-beta-update-july-2022.mdx
index 2330e5f8703..5f7812d4c91 100644
--- a/apps/www/_blog/2022-08-03-supabase-beta-update-july-2022.mdx
+++ b/apps/www/_blog/2022-08-03-supabase-beta-update-july-2022.mdx
@@ -48,7 +48,7 @@ The new hCpatcha integration allows you to implement captcha functionality for a
 
 ![supabase-updated-settings-ui-dashboard](/images/blog/2022-july/auth-config.jpeg)
 
-We've started updating our settings UI, starting with the Auth settings. You'll now see updated UI for setting up your Auth providers, Email templates and SMTP config. [Auth settings](https://app.supabase.com/project/_/auth/settings)
+We've started updating our settings UI, starting with the Auth settings. You'll now see updated UI for setting up your [Auth providers](https://app.supabase.com/project/_/auth/providers), [Email templates](https://app.supabase.com/project/_/auth/templates), and [SMTP config](https://app.supabase.com/project/_/auth/url-configuration).
 
 ## Quick product announcements
 
diff --git a/spec/examples/examples.yml b/spec/examples/examples.yml
index d2bc4403b6e..393fc81e279 100644
--- a/spec/examples/examples.yml
+++ b/spec/examples/examples.yml
@@ -114,13 +114,13 @@ functions:
     title: 'signUp()'
     $ref: '@supabase/gotrue-js.GoTrueClient.signUp'
     notes: |
-      - By default, the user needs to verify their email address before logging in. To turn this off, disable **Confirm email** in [your project](https://app.supabase.com/project/_/auth/settings).
+      - By default, the user needs to verify their email address before logging in. To turn this off, disable **Confirm email** in [your project](https://app.supabase.com/project/_/auth/providers).
       - **Confirm email** determines if users need to confirm their email address after signing up.
         - If **Confirm email** is enabled, a `user` is returned but `session` is null.
         - If **Confirm email** is disabled, both a `user` and a `session` are returned.
-      - When the user confirms their email address, they are redirected to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url) by default. You can modify your `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/settings).
+      - By default, when the user confirms their email address, they are redirected to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url). You can modify your `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/url-configuration).
       - If signUp() is called for an existing confirmed user:
-          - If **Confirm email** is enabled in [your project](https://app.supabase.com/project/_/auth/settings), an obfuscated/fake user object is returned.
+          - If **Confirm email** is enabled in [your project](https://app.supabase.com/project/_/auth/providers), an obfuscated/fake user object is returned.
           - If **Confirm email** is disabled, the error message, `User already registered` is returned.
       - To fetch the currently logged-in user, refer to [`getUser()`](/docs/reference/javascript/auth-getuser).
     examples:
@@ -192,7 +192,7 @@ functions:
       - This method is used for passwordless sign-ins where a OTP is sent to the user's email or phone number.
       - If you're using an email, you can configure whether you want the user to receive a magiclink or a OTP.
       - If you're using phone, you can configure whether you want the user to receive a OTP.
-      - The magic link's destination URL is determined by the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional redirect urls in [your project](https://app.supabase.com/project/_/auth/settings).
+      - The magic link's destination URL is determined by the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/url-configuration).
     examples:
       - id: sign-in-with-email.
         name: Sign in with email.
@@ -236,7 +236,7 @@ functions:
         isSpotlight: false
         description: |
           When the third-party provider successfully authenticates the user, the provider will redirect the user to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url). It does not redirect the user immediately after invoking this method.
-          You can modify the `SITE_URL` or add additional redirect urls in [your project](https://app.supabase.com/project/_/auth/settings).
+          You can modify the `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/url-configuration).
         js: |
           ```js
           const { data, error } = await supabase.auth.signInWithOAuth({
@@ -334,7 +334,7 @@ functions:
     notes: |
       - In order to use the `updateUser()` method, the user needs to be signed in first.
       - By Default, email updates sends a confirmation link to both the user's current and new email.
-      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/settings).
+      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/providers).
     examples:
       - id: update-the-email-for-an-authenticated-user
         name: Update the email for an authenticated user
diff --git a/spec/supabase_dart_v1.yml b/spec/supabase_dart_v1.yml
index 304d6988077..9c61cc1ee20 100644
--- a/spec/supabase_dart_v1.yml
+++ b/spec/supabase_dart_v1.yml
@@ -85,7 +85,7 @@ functions:
       - This method is used for passwordless sign-ins where a OTP is sent to the user's email or phone number.
       - If you're using an email, you can configure whether you want the user to receive a magiclink or a OTP.
       - If you're using phone, you can configure whether you want the user to receive a OTP.
-      - The magic link's destination URL is determined by the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional redirect urls in [your project](https://app.supabase.com/project/_/auth/settings).
+      - The magic link's destination URL is determined by the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional redirect urls in [your project](https://app.supabase.com/project/_/auth/url-configuration).
     examples:
       - id: sign-in-with-email
         name: Sign in with email.
@@ -229,7 +229,7 @@ functions:
     notes: |
       - In order to use the `updateUser()` method, the user needs to be signed in first.
       - By Default, email updates sends a confirmation link to both the user's current and new email.
-      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/settings).
+      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/providers).
     examples:
       - id: update-the-email-for-an-authenticated-user
         name: Update the email for an authenticated user
diff --git a/spec/supabase_js_v1.yml b/spec/supabase_js_v1.yml
index b56b1390eac..810e46d2036 100644
--- a/spec/supabase_js_v1.yml
+++ b/spec/supabase_js_v1.yml
@@ -285,7 +285,7 @@ functions:
     $ref: '@supabase/gotrue-js.GoTrueClient.update'
     notes: |
       User email: By Default, email updates sends a confirmation link to both the user's current and new email.
-      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/settings).
+      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/providers).
 
       User metadata: It's generally better to store user data in a table within your public schema (i.e., `public.users`).
       Use the `update()` method if you have data which rarely changes or is specific only to the logged in user.
diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml
index df9973635a4..7b4af1c9e81 100644
--- a/spec/supabase_js_v2.yml
+++ b/spec/supabase_js_v2.yml
@@ -360,7 +360,7 @@ functions:
     notes: |
       - In order to use the `updateUser()` method, the user needs to be signed in first.
       - By Default, email updates sends a confirmation link to both the user's current and new email.
-      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/settings).
+      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/providers).
     examples:
       - id: update-the-email-for-an-authenticated-user
         name: Update the email for an authenticated user

From 560b8009b6dbedbe24870d42be3df4fba6e0626e Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Wed, 21 Dec 2022 14:06:21 -0800
Subject: [PATCH 140/215] Delete old spec files

---
 spec/cli_v1_commands--old.yaml |  882 ------
 spec/supabase_dart_v0--old.yml | 2183 -------------
 spec/supabase_dart_v1--old.yml | 2280 --------------
 spec/supabase_js_v1--old.yml   | 2533 ---------------
 spec/supabase_js_v2--old.yml   | 5390 --------------------------------
 5 files changed, 13268 deletions(-)
 delete mode 100644 spec/cli_v1_commands--old.yaml
 delete mode 100644 spec/supabase_dart_v0--old.yml
 delete mode 100644 spec/supabase_dart_v1--old.yml
 delete mode 100644 spec/supabase_js_v1--old.yml
 delete mode 100644 spec/supabase_js_v2--old.yml

diff --git a/spec/cli_v1_commands--old.yaml b/spec/cli_v1_commands--old.yaml
deleted file mode 100644
index d7af310d127..00000000000
--- a/spec/cli_v1_commands--old.yaml
+++ /dev/null
@@ -1,882 +0,0 @@
-clispec: '001'
-info:
-  id: cli
-  version: 1.11.3
-  title: Supabase CLI
-  language: sh
-  source: https://github.com/supabase/cli
-  bugs: https://github.com/supabase/cli/issues
-  spec: https://github.com/supabase/supabase.tools/cli_spec/lib.yaml
-  description: |
-    Supabase CLI provides you with tools to develop your application locally, and deploy your application to the Supabase platform.
-  options: |-
-    ```sh
-          --debug            output debug logs to stderr
-          --experimental     enable experimental features
-      -h, --help             help for supabase
-          --workdir string   path to a Supabase project directory
-    ```
-  tags:
-    - id: local-dev
-      title: Local Development
-    - id: management-api
-      title: Management APIs
-    - id: other-commands
-      title: Additional Commands
-commands:
-  - id: supabase-test
-    title: supabase test
-    summary: Run tests on local Supabase containers
-    tags:
-      - local-dev
-    links: []
-    subcommands:
-      - supabase-test-db
-    options: |-
-      ```sh
-        -h, --help   help for test
-      ```
-  - id: supabase-test-db
-    title: supabase test db
-    summary: Tests local database with pgTAP
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase test db [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for db
-      ```
-  - id: supabase-stop
-    title: supabase stop
-    summary: Stop all local Supabase containers
-    tags:
-      - local-dev
-    links: []
-    usage: |-
-      ```sh
-      supabase stop [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-            --backup   Backs up the current database before stopping.
-        -h, --help     help for stop
-      ```
-  - id: supabase-status
-    title: supabase status
-    summary: Show status of local Supabase containers
-    tags:
-      - local-dev
-    links: []
-    usage: |-
-      ```sh
-      supabase status [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for status
-      ```
-  - id: supabase-start
-    title: supabase start
-    summary: Start containers for Supabase local development
-    tags:
-      - local-dev
-    links: []
-    usage: |-
-      ```sh
-      supabase start [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for start
-      ```
-  - id: supabase-secrets
-    title: supabase secrets
-    summary: Manage Supabase secrets
-    tags:
-      - management-api
-    links: []
-    subcommands:
-      - supabase-secrets-list
-      - supabase-secrets-set
-      - supabase-secrets-unset
-    options: |-
-      ```sh
-        -h, --help   help for secrets
-      ```
-  - id: supabase-secrets-unset
-    title: supabase secrets unset
-    summary: Unset a secret(s) on Supabase
-    description: Unset a secret(s) from the linked Supabase project.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase secrets unset <NAME> ... [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for unset
-      ```
-  - id: supabase-secrets-set
-    title: supabase secrets set
-    summary: Set a secret(s) on Supabase
-    description: Set a secret(s) to the linked Supabase project.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase secrets set [flags] <NAME=VALUE> ...
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-            --env-file string   Read secrets from a .env file.
-        -h, --help              help for set
-      ```
-  - id: supabase-secrets-list
-    title: supabase secrets list
-    summary: List all secrets on Supabase
-    description: List all secrets in the linked project.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase secrets list [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for list
-      ```
-  - id: supabase-projects
-    title: supabase projects
-    summary: Manage Supabase projects
-    tags:
-      - management-api
-    links: []
-    subcommands:
-      - supabase-projects-create
-      - supabase-projects-list
-    options: |-
-      ```sh
-        -h, --help   help for projects
-      ```
-  - id: supabase-projects-list
-    title: supabase projects list
-    summary: List all Supabase projects
-    description: List all Supabase projects the logged-in user can access.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase projects list [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for list
-      ```
-  - id: supabase-projects-create
-    title: supabase projects create
-    summary: Create a project on Supabase
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase projects create <project name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-            --db-password string   Database password of the project.
-        -h, --help                 help for create
-        -i, --interactive          Enables interactive mode.
-            --org-id string        Organization ID to create the project in.
-            --plan string          Select a plan that suits your needs. (default "free")
-            --region string        Select a region close to you for the best performance.
-      ```
-  - id: supabase-orgs
-    title: supabase orgs
-    summary: Manage Supabase organizations
-    tags:
-      - management-api
-    links: []
-    subcommands:
-      - supabase-orgs-list
-    options: |-
-      ```sh
-        -h, --help   help for orgs
-      ```
-  - id: supabase-orgs-list
-    title: supabase orgs list
-    summary: List all organizations
-    description: List all organizations the logged-in user belongs.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase orgs list [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for list
-      ```
-  - id: supabase-migration
-    title: supabase migration
-    summary: Manage database migration scripts
-    tags:
-      - local-dev
-    links: []
-    subcommands:
-      - supabase-migration-list
-      - supabase-migration-new
-    options: |-
-      ```sh
-        -h, --help   help for migration
-      ```
-  - id: supabase-migration-new
-    title: supabase migration new
-    summary: Create an empty migration script
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase migration new <migration name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for new
-      ```
-  - id: supabase-migration-list
-    title: supabase migration list
-    summary: List local and remote migrations
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase migration list [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help              help for list
-        -p, --password string   Password to your remote Postgres database.
-      ```
-  - id: supabase-login
-    title: supabase login
-    summary: Authenticate using an access token
-    tags:
-      - local-dev
-    links: []
-    usage: |-
-      ```sh
-      supabase login [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for login
-      ```
-  - id: supabase-link
-    title: supabase link
-    summary: Link to a Supabase project
-    tags:
-      - local-dev
-    links: []
-    usage: |-
-      ```sh
-      supabase link [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help                 help for link
-        -p, --password string      Password to your remote Postgres database.
-            --project-ref string   Project ref of the Supabase project.
-      ```
-  - id: supabase-init
-    title: supabase init
-    summary: Initialize a local project
-    tags:
-      - local-dev
-    links: []
-    usage: |-
-      ```sh
-      supabase init [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for init
-      ```
-  - id: supabase-gen
-    title: supabase gen
-    summary: Run code generation tools
-    tags:
-      - local-dev
-    links: []
-    subcommands:
-      - supabase-gen-types
-    options: |-
-      ```sh
-        -h, --help   help for gen
-      ```
-  - id: supabase-gen-types
-    title: supabase gen types
-    summary: Generate types from Postgres schema
-    tags: []
-    links: []
-    subcommands:
-      - supabase-gen-types-typescript
-    options: |-
-      ```sh
-        -h, --help   help for types
-      ```
-  - id: supabase-gen-types-typescript
-    title: supabase gen types typescript
-    summary: Generate types for TypeScript
-    description: |
-      Generate types for TypeScript. Must specify one of --local, --linked, --project-id, or --db-url
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase gen types typescript [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-            --db-url string        Generate types from a database url.
-        -h, --help                 help for typescript
-            --linked               Generate types from the linked project.
-            --local                Generate types from the local dev database.
-            --project-id string    Generate types from a project ID.
-            --schema stringArray   Schemas to generate types for.
-      ```
-  - id: supabase-functions
-    title: supabase functions
-    summary: Manage Supabase Edge functions
-    tags:
-      - management-api
-    links: []
-    subcommands:
-      - supabase-functions-delete
-      - supabase-functions-deploy
-      - supabase-functions-new
-      - supabase-functions-serve
-    options: |-
-      ```sh
-        -h, --help   help for functions
-      ```
-  - id: supabase-functions-serve
-    title: supabase functions serve
-    summary: Serve a Function locally
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase functions serve <Function name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-            --env-file string   Path to an env file to be populated to the Function environment.
-        -h, --help              help for serve
-            --no-verify-jwt     Disable JWT verification for the Function.
-      ```
-  - id: supabase-functions-new
-    title: supabase functions new
-    summary: Create a new Function locally
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase functions new <Function name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for new
-      ```
-  - id: supabase-functions-deploy
-    title: supabase functions deploy
-    summary: Deploy a Function to Supabase
-    description: Deploy a Function to the linked Supabase project.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase functions deploy <Function name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help                 help for deploy
-            --no-verify-jwt        Disable JWT verification for the Function.
-            --project-ref string   Project ref of the Supabase project.
-      ```
-  - id: supabase-functions-delete
-    title: supabase functions delete
-    summary: Delete a Function from Supabase
-    description: |
-      Delete a Function from the linked Supabase project. This does NOT remove the Function locally.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase functions delete <Function name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help                 help for delete
-            --project-ref string   Project ref of the Supabase project.
-      ```
-  - id: supabase-domains
-    title: supabase domains
-    summary: Manage custom domain names for Supabase projects
-    tags:
-      - management-api
-    links: []
-    subcommands:
-      - supabase-domains-activate
-      - supabase-domains-create
-      - supabase-domains-delete
-      - supabase-domains-get
-      - supabase-domains-reverify
-    options: |-
-      ```sh
-        -h, --help                 help for domains
-            --include-raw-output   Include raw output (useful for debugging).
-            --project-ref string   Project ref of the Supabase project.
-      ```
-  - id: supabase-domains-reverify
-    title: supabase domains reverify
-    summary: Re-verify the custom hostname config for your project.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase domains reverify [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for reverify
-      ```
-  - id: supabase-domains-get
-    title: supabase domains get
-    summary: Get the current custom hostname config.
-    description: |
-      Retrieve the custom hostname config for your project, as stored in the Supabase platform.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase domains get [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for get
-      ```
-  - id: supabase-domains-delete
-    title: supabase domains delete
-    summary: Deletes the custom hostname config for your project.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase domains delete [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for delete
-      ```
-  - id: supabase-domains-create
-    title: supabase domains create
-    summary: Create a custom hostname.
-    description: |-
-      Create a custom hostname for your Supabase project.
-
-      Expects your custom hostname to have a CNAME record to your Supabase project's subdomain.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase domains create [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-            --custom-hostname string   The custom hostname to use for your Supabase project.
-        -h, --help                     help for create
-      ```
-  - id: supabase-domains-activate
-    title: supabase domains activate
-    summary: Activate the custom hostname for a project.
-    description: |-
-      Activates the custom hostname configuration for a project.
-
-      This reconfigures your Supabase project to respond to requests on your custom hostname.
-      After the custom hostname is activated, your project's auth services will no longer function on the Supabase-provisioned subdomain.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase domains activate [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for activate
-      ```
-  - id: supabase-db
-    title: supabase db
-    summary: Manage local Postgres databases
-    tags:
-      - local-dev
-    links: []
-    subcommands:
-      - supabase-db-branch
-      - supabase-db-diff
-      - supabase-db-lint
-      - supabase-db-push
-      - supabase-db-remote
-      - supabase-db-reset
-    options: |-
-      ```sh
-        -h, --help   help for db
-      ```
-  - id: supabase-db-reset
-    title: supabase db reset
-    summary: Resets the local database to current migrations
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db reset [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for reset
-      ```
-  - id: supabase-db-remote
-    title: supabase db remote
-    summary: Manage remote databases
-    tags: []
-    links: []
-    subcommands:
-      - supabase-db-remote-changes
-      - supabase-db-remote-commit
-    options: |-
-      ```sh
-        -h, --help              help for remote
-        -p, --password string   Password to your remote Postgres database.
-      ```
-  - id: supabase-db-remote-commit
-    title: supabase db remote commit
-    summary: Commit remote changes as a new migration
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db remote commit [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for commit
-      ```
-  - id: supabase-db-remote-changes
-    title: supabase db remote changes
-    summary: Show changes on the remote database
-    description: Show changes on the remote database since last migration.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db remote changes [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for changes
-      ```
-  - id: supabase-db-push
-    title: supabase db push
-    summary: Push new migrations to the remote database
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db push [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-            --dry-run           Print the migrations that would be applied, but don't actually apply them.
-        -h, --help              help for push
-        -p, --password string   Password to your remote Postgres database.
-      ```
-  - id: supabase-db-lint
-    title: supabase db lint
-    summary: Checks local database for typing error
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db lint [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help             help for lint
-            --level string     Error level to emit. (default "warning")
-        -s, --schema strings   List of schema to include. (default [public])
-      ```
-  - id: supabase-db-diff
-    title: supabase db diff
-    summary: Diffs the local database for schema changes
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db diff [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -f, --file string      Saves schema diff to a file.
-        -h, --help             help for diff
-            --linked           Diffs local schema against linked project.
-        -s, --schema strings   List of schema to include. (default [public])
-            --use-migra        Use migra to generate schema diff.
-      ```
-  - id: supabase-db-branch
-    title: supabase db branch
-    summary: Manage local database branches
-    description: |
-      Manage local database branches. Each branch is associated with a separate local database. Forking remote databases is NOT supported.
-    tags: []
-    links: []
-    subcommands:
-      - supabase-db-branch-create
-      - supabase-db-branch-delete
-      - supabase-db-branch-list
-      - supabase-db-branch-switch
-    options: |-
-      ```sh
-        -h, --help   help for branch
-      ```
-  - id: supabase-db-branch-switch
-    title: supabase db branch switch
-    summary: Switch the active branch
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db branch switch <branch name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for switch
-      ```
-  - id: supabase-db-branch-list
-    title: supabase db branch list
-    summary: List branches
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db branch list [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for list
-      ```
-  - id: supabase-db-branch-delete
-    title: supabase db branch delete
-    summary: Delete a branch
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db branch delete <branch name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for delete
-      ```
-  - id: supabase-db-branch-create
-    title: supabase db branch create
-    summary: Create a branch
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase db branch create <branch name> [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help   help for create
-      ```
-  - id: supabase-completion
-    title: supabase completion
-    summary: Generate the autocompletion script for the specified shell
-    description: |
-      Generate the autocompletion script for supabase for the specified shell.
-      See each sub-command's help for details on how to use the generated script.
-    tags:
-      - other-commands
-    links: []
-    subcommands:
-      - supabase-completion-bash
-      - supabase-completion-fish
-      - supabase-completion-powershell
-      - supabase-completion-zsh
-    options: |-
-      ```sh
-        -h, --help   help for completion
-      ```
-  - id: supabase-completion-zsh
-    title: supabase completion zsh
-    summary: Generate the autocompletion script for zsh
-    description: |
-      Generate the autocompletion script for the zsh shell.
-
-      If shell completion is not already enabled in your environment you will need
-      to enable it.  You can execute the following once:
-
-          echo "autoload -U compinit; compinit" >> ~/.zshrc
-
-      To load completions in your current shell session:
-
-          source <(supabase completion zsh); compdef _supabase supabase
-
-      To load completions for every new session, execute once:
-
-      #### Linux:
-
-          supabase completion zsh > "${fpath[1]}/_supabase"
-
-      #### macOS:
-
-          supabase completion zsh > $(brew --prefix)/share/zsh/site-functions/_supabase
-
-      You will need to start a new shell for this setup to take effect.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase completion zsh [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help              help for zsh
-            --no-descriptions   disable completion descriptions
-      ```
-  - id: supabase-completion-powershell
-    title: supabase completion powershell
-    summary: Generate the autocompletion script for powershell
-    description: |
-      Generate the autocompletion script for powershell.
-
-      To load completions in your current shell session:
-
-          supabase completion powershell | Out-String | Invoke-Expression
-
-      To load completions for every new session, add the output of the above command
-      to your powershell profile.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase completion powershell [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help              help for powershell
-            --no-descriptions   disable completion descriptions
-      ```
-  - id: supabase-completion-fish
-    title: supabase completion fish
-    summary: Generate the autocompletion script for fish
-    description: |
-      Generate the autocompletion script for the fish shell.
-
-      To load completions in your current shell session:
-
-          supabase completion fish | source
-
-      To load completions for every new session, execute once:
-
-          supabase completion fish > ~/.config/fish/completions/supabase.fish
-
-      You will need to start a new shell for this setup to take effect.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase completion fish [flags]
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help              help for fish
-            --no-descriptions   disable completion descriptions
-      ```
-  - id: supabase-completion-bash
-    title: supabase completion bash
-    summary: Generate the autocompletion script for bash
-    description: |
-      Generate the autocompletion script for the bash shell.
-
-      This script depends on the 'bash-completion' package.
-      If it is not installed already, you can install it via your OS's package manager.
-
-      To load completions in your current shell session:
-
-          source <(supabase completion bash)
-
-      To load completions for every new session, execute once:
-
-      #### Linux:
-
-          supabase completion bash > /etc/bash_completion.d/supabase
-
-      #### macOS:
-
-          supabase completion bash > $(brew --prefix)/etc/bash_completion.d/supabase
-
-      You will need to start a new shell for this setup to take effect.
-    tags: []
-    links: []
-    usage: |-
-      ```sh
-      supabase completion bash
-      ```
-    subcommands: []
-    options: |-
-      ```sh
-        -h, --help              help for bash
-            --no-descriptions   disable completion descriptions
-      ```
diff --git a/spec/supabase_dart_v0--old.yml b/spec/supabase_dart_v0--old.yml
deleted file mode 100644
index 90dab81a758..00000000000
--- a/spec/supabase_dart_v0--old.yml
+++ /dev/null
@@ -1,2183 +0,0 @@
-openref: 0.1
-
-info:
-  id: reference/dart
-  title: Getting started
-  description: |
-
-    Supabase Dart.
-
-  definition: ../../spec/enrichments/tsdoc_v1/combined.json
-  slugPrefix: '/'
-  specUrl: https://github.com/supabase/supabase/edit/master/spec/supabase_dart_v0.yml
-  libraries:
-    - name: 'Dart'
-      id: 'dart'
-      version: '0.0.1'
-
-pages:
-  Installing:
-    description: |
-      ## Dart
-
-      Dart libraries are built and supported by the community. 
-
-      ```bash
-      dart pub add supabase
-      ```
-
-      Find the source code on [GitHub](https://github.com/supabase/supabase-dart).
-
-      ## Flutter 
-
-      For Flutter project, you can use [supabase_flutter](https://github.com/supabase/supabase-flutter).
-
-      ```bash
-      flutter pub add supabase_flutter
-      ```
-
-      `supabase_flutter` plugin uses `supabase` plugin internally, and it adds some Flutter specific functionality such as handling deeplinks coming back from magic link verifications.
-      If you are creating a Flutter application, we recommend using `supabase_flutter` instead of `supabase`. 
-
-      For the most part `supabase_flutter` shares the same API as `supabase` with few exceptions such as initialization or OAuth sign in.
-
-  Initializing:
-    description: |
-      ## Dart
-      You can initialize a new Supabase client using the `SupabaseClient()` method.
-
-      The Supabase client is your entrypoint to the rest of the Supabase functionality
-      and is the easiest way to interact with everything we offer within the Supabase ecosystem.
-
-
-      ## Flutter
-
-      For `supabase_flutter`, you will be using the static `initialize()` method on `Supabase` class.
-
-    examples:
-      - name: Dart SupabaseClient()
-        dart: |
-          ```dart
-          final supabase = SupabaseClient('https://xyzcompany.supabase.co', 'public-anon-key');
-          ```
-      - name: Flutter initialize()
-        dart: |
-          ```dart title="main.dart"
-          Future<void> main() async {
-            await Supabase.initialize(url: 'https://xyzcompany.supabase.co', anonKey: 'public-anon-key');
-            runApp(MyApp());
-          }
-          ```
-
-  auth.signUp():
-    description: |
-      Creates a new user.
-    notes: |
-      - By default, the user will need to verify their email address before logging in. If you would like to change this, you can disable "Email Confirmations" by going to Authentication -> Settings on [app.supabase.com](https://app.supabase.com)
-      - If "Email Confirmations" is turned on, a user is returned but session will be null
-      - If "Email Confirmations" is turned off, both a `user` and a `session` will be returned
-      - When the user confirms their email address, they will be redirected to localhost:3000 by default. To change this, you can go to Authentication -> Settings on [app.supabase.com](https://app.supabase.com)
-    examples:
-      - name: Sign up.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.auth.signUp('example@email.com',　'example-password');
-
-          final user = res.data?.user;
-          final error = res.error;
-          ```
-      - name: Sign up with third-party providers.
-        hideCodeBlock: true
-        description: |
-          If you are using Flutter, you can sign up with OAuth providers using the [`signInWithProvider()`](/docs/reference/dart/v0/auth-signinwithprovider) method available on `supabase_flutter`.
-
-  auth.signIn():
-    description: |
-      Log in an existing user, or login via a third-party provider.
-    notes: |
-      - A user can sign up via email, phone number.
-      - If you provide `email` without a `password`, the user will be sent a magic link.
-      - The magic link's destination URL is determined by the SITE_URL config variable. To change this, you can go to Authentication -> Settings on [app.supabase.com](https://app.supabase.com)
-      - Similarly, if you provide `phone` without a `password`, the user will be sent a one time password. 
-      - If you are looking to sign users in with OAuth in Flutter apps, go to [`signInWithProvider()`](/docs/reference/dart/v0/auth-signinwithprovider).
-    examples:
-      - name: Sign in with email.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.auth.signIn(email: 'example@email.com', password: 'example-password');
-
-          final user = res.data?.user;
-          final error = res.error;
-          ```
-      - name: Sign in with magic link.
-        description: If email is provided, but no password is provided, the user will be sent a "magic link" to their email address, which they can click to open your application with a valid session. By default, a given user can only request a Magic Link once every 60 seconds.
-        dart: |
-          ```dart
-          final res = await supabase.auth.signIn(email: 'example@email.com');
-
-          final error = res.error;
-          ```
-      - name: Get OAuth sign in URL.
-        description: |
-          Passing provider parameter to `signIn()` will return a URL to sign your user in via OAuth. 
-          If you are looking to sign in a user via OAuth on Flutter app, go to [`signInWithProvider()`](/docs/reference/dart/v0/auth-signinwithprovider).
-        dart: |
-          ```dart
-          final res = await supabase.auth.signIn(provider: Provider.github);
-
-          final url = res.data?.url;
-          final error = res.error;
-          ```
-  auth.signInWithProvider():
-    description: |
-      Signs the user in using third party OAuth providers.
-    notes: |
-      - `auth.signInWithProvider()` is only available on `supabase_flutter`
-      - It will open the browser to the relevant login page.
-    examples:
-      - name: Sign in with provider.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.auth.signInWithProvider(Provider.github);
-
-          final error = res.error;
-          ```
-      - name: With `redirectTo`
-        description: |
-          Specify the redirect link to bring back the user via deeplink.
-          Note that `redirectTo` should be null for Flutter Web.
-        dart: |
-          ```dart
-          final res = await supabase.auth.signInWithProvider(
-            Provider.github,
-            options: AuthOptions(
-                redirectTo: kIsWeb
-                    ? null
-                    : 'io.supabase.flutter://reset-callback/'),
-          );
-
-          final error = res.error;
-          ```
-      - name: With scopes
-        description: |
-          If you need additional data from an OAuth provider, you can include a space-separated list of scopes in your request to get back an OAuth provider token.
-          You may also need to specify the scopes in the provider's OAuth app settings, depending on the provider.
-        dart: |
-          ```dart
-          const { user, session, error } = await supabase.auth.signIn({
-            provider: 'github'
-          }, {
-            scopes: 'repo gist notifications'
-          })
-          const oAuthToken = session.provider_token // use to access provider API
-          ```
-  auth.signOut():
-    description: |
-      Signs out the current user, if there is a logged in user.
-    examples:
-      - name: Sign out
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.auth.signOut();
-
-          final error = res.error;
-          ```
-
-  auth.session():
-    description: |
-      Returns the session data, if there is an active session.
-    examples:
-      - name: Get the session data
-        isSpotlight: true
-        dart: |
-          ```dart
-          final session = supabase.auth.session();
-          ```
-
-  auth.user():
-    description: |
-      Returns the user data, if there is a logged in user.
-    examples:
-      - name: Get the logged in user
-        isSpotlight: true
-        dart: |
-          ```dart
-          final user = supabase.auth.user();
-          ```
-
-  auth.update():
-    description: |
-      Updates user data, if there is a logged in user.
-    notes: |
-      It's generally better to store user data in a table inside your public schema (i.e. `public.users`). 
-      Use the `update()` method if you have data which rarely changes or is specific only to the logged in user.
-    examples:
-      - name: Update a user's metadata.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.auth.update(
-            UserAttributes(data: {'hello': 'world'})
-          );
-
-          final error = res.error;
-          ```
-
-  auth.onAuthStateChange():
-    description: |
-      Receive a notification every time an auth event happens.
-    examples:
-      - name: Listen to auth changes
-        isSpotlight: true
-        dart: |
-          ```dart
-          final subscription = supabase.auth.onAuthStateChange((event, session) {
-            print(session?.user?.id);
-            // handle auth state change
-          });
-          ```
-
-  Reset Password (Email):
-    description: |
-      Sends a reset request to an email address.
-    notes: |
-      Sends a reset request to an email address.
-
-      When the user clicks the reset link in the email they will be forwarded to:
-
-      `<SITE_URL>#access_token=x&refresh_token=y&expires_in=z&token_type=bearer&type=recovery`
-
-      Your app must detect `type=recovery` in the fragment and display a password reset form to the user.
-
-      You should then use the access_token in the url and new password to update the user as follows:
-
-      ```dart
-      final res = await supabase.auth.api.updateUser(
-        accessToken,
-        UserAttributes(password: 'NEW_PASSWORD'),
-      );
-      ```
-    examples:
-      - name: Reset password
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.auth.api.resetPasswordForEmail('user@example.com');
-
-          final error = res.error;
-          ```
-      - name: Reset password for Flutter
-        isSpotlight: true
-        dart: |
-          You can pass `redirectTo` to open the app via deeplink when user opens the password reset email. 
-          ```dart
-          final res = await supabase.auth.api.resetPasswordForEmail(
-            'user@example.com',
-            options: AuthOptions(redirectTo: kIsWeb
-                ? null
-                : 'io.supabase.flutter://reset-callback/'),
-          );
-
-          final error = res.error;
-          ```
-  invoke():
-    title: 'invoke()'
-    description: |
-      Invokes a Supabase Function. See the [guide](/docs/guides/functions) for details on writing Functions.
-    notes: |
-      - Requires an Authorization header.
-      - Invoke params generally match the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) spec.
-    examples:
-      - name: Basic invocation.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabaseClient.functions.invoke('hello', body: {'foo': 'baa'});
-          final data = res.data;
-          final error = res.error;
-          ```
-      - name: Specifying response type.
-        description: |
-          By default, `invoke()` will parse the response as JSON. You can parse the response in the following formats: `json`, `blob`, `text`, and `arrayBuffer`.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabaseClient.functions.invoke(
-            'hello',
-            body: {'foo': 'baa'},
-            responseType: ResponseType.text,
-          );
-          final data = res.data;
-          final error = res.error;
-          ```
-      - name: Parsing custom headers.
-        description: |
-          Any `headers` will be passed through to the function. A common pattern is to pass a logged-in user's JWT token as an Authorization header.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabaseClient.functions.invoke(
-            'hello',
-            body: {'foo': 'baa'},
-            headers: {
-              'Authorization': 'Bearer ${supabase.auth.session()?.access_token}'
-            },
-          );
-          ```
-  select():
-    description: |
-      Performs vertical filtering with SELECT.
-    title: 'Fetch data: select()'
-    notes: |
-      - By default, Supabase projects will return a maximum of 1,000 rows. This setting can be changed in Project API Settings. It's recommended that you keep it low to limit the payload size of accidental or malicious requests. You can use `range()` queries to paginate through your data.
-      - `select()` can be combined with [Modifiers](/docs/reference/dart/using-modifiers)
-      - `select()` can be combined with [Filters](/docs/reference/dart/using-filters)
-      - If using the Supabase hosted platform `apikey` is technically a reserved keyword, since the API gateway will pluck it out for authentication. [It should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
-    examples:
-      - name: Getting your data
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select()
-            .execute();
-
-          final data = res.data;
-          final error = res.error;
-          ```
-      - name: Selecting specific columns
-        description: You can select specific fields from your tables.
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name')
-            .execute();
-          ```
-      - name: Query foreign tables
-        description: If your database has relationships, you can query related tables too.
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('''
-              name,
-              cities (
-                name
-              )
-            ''')
-            .execute();
-          ```
-      - name: Query the same foreign table multiple times
-        description: |
-          Sometimes you will need to query the same foreign table twice. 
-          In this case, you can use the name of the joined column to identify 
-          which join you intend to use. For convenience, you can also give an 
-          alias for each column. For example, if we had a shop of products, 
-          and we wanted to get the supplier and the purchaser at the same time 
-          (both in the users) table:
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('products')
-            .select('''
-              id,
-              supplier:supplier_id ( name ),
-              purchaser:purchaser_id ( name )
-            ''')
-            .execute();
-          ```
-      - name: Filtering with inner joins
-        description: |
-          If you want to filter a table based on a child table's values you can use the `!inner()` function. For example, if you wanted 
-          to select all rows in a `message` table which belong to a user with the `username` "Jane":
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('messages')
-            .select('*, users!inner(*)')
-            .eq('users.username', 'Jane')
-            .execute();
-          ```
-      - name: Querying with count option
-        description: |
-          You can get the number of rows by using the count option.
-          Allowed values for count option are [exact](https://postgrest.org/en/stable/api.html#exact-count), [planned](https://postgrest.org/en/stable/api.html#planned-count) and [estimated](https://postgrest.org/en/stable/api.html#estimated-count).
-        dart: |
-          ```dart
-          final res = await supabase
-              .from('cities')
-              .select('name')
-              .execute(count: CountOption.exact);
-
-          final count = res.count;
-          ```
-      - name: Querying JSON data
-        description: |
-          If you have data inside of a JSONB column, you can apply select 
-          and query filters to the data values. Postgres offers a 
-          [number of operators](https://www.postgresql.org/docs/current/functions-json.html) 
-          for querying JSON data. Also see 
-          [PostgREST docs](http://postgrest.org/en/v7.0.0/api.html#json-columns) for more details.
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('users')
-            .select('''
-              id, name,
-              address->street
-            ''')
-            .eq('address->postcode', 90210)
-            .execute();
-          ```
-      - name: Return data as CSV
-        description: |
-          By default the data is returned in JSON format, however you can also request for it to be returned as Comma Separated Values.
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('users')
-            .select()
-            .csv()
-            .execute();
-          ```
-
-  insert():
-    description: |
-      Performs an INSERT into the table.
-    title: 'Create data: insert()'
-    notes: |
-      - By default, every time you run `insert()`, the client library will make a `select` to return the full record.
-      This is convenient, but it can also cause problems if your Policies are not configured to allow the `select` operation. 
-      If you are using Row Level Security and you are encountering problems, try setting the `returning` param to `minimal`.
-    examples:
-      - name: Create a record
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .insert([
-              {'name': 'The Shire', 'country_id': 554}
-            ]).execute();
-          ```
-      - name: Bulk create
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .insert([
-              {'name': 'The Shire', 'country_id': 554},
-              {'name': 'Rohan', 'country_id': 555},
-            ]).execute();
-          ```
-
-  update():
-    description: |
-      Performs an UPDATE on the table.
-    title: 'Modify data: update()'
-    notes: |
-      - `update()` should always be combined with [Filters](/docs/reference/dart/using-filters) to target the item(s) you wish to update.
-    examples:
-      - name: Updating your data
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Middle Earth' })
-            .match({ 'name': 'Auckland' })
-            .execute();
-          ```
-      - name: Updating JSON data
-        description: |
-          Postgres offers a 
-          [number of operators](https://www.postgresql.org/docs/current/functions-json.html) 
-          for working with JSON data. Right now it is only possible to update an entire JSON document, 
-          but we are [working on ideas](https://github.com/PostgREST/postgrest/issues/465) for updating individual keys.
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('users')
-            .update({
-              'address': { 
-                'street': 'Melrose Place',
-                'postcode': 90210
-              }
-            })
-            .eq('address->postcode', 90210)
-            .execute();
-          ```
-
-  upsert():
-    description: |
-      Performs an UPSERT into the table.
-    title: 'Upsert data: upsert()'
-    notes: |
-      - Primary keys should be included in the data payload in order for an update to work correctly. 
-      - Primary keys must be natural, not surrogate. There are however, [workarounds](https://github.com/PostgREST/postgrest/issues/1118) for surrogate primary keys.
-    examples:
-      - name: Upsert your data
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('messages')
-            .upsert({ 'id': 3, 'message': 'foo', 'username': 'supabot' })
-            .execute();
-          ```
-      - name: Upserting into tables with constraints
-        description: |
-          Running the following will cause supabase to upsert data into the `users` table. 
-          If the username 'supabot' already exists, the `onConflict` argument tells supabase to overwrite that row 
-          based on the column passed into `onConflict`.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('users')
-            .upsert({ 'username': 'supabot' }, { 'onConflict': 'username' })
-            .execute();
-          ```
-      - name: Return the exact number of rows
-        description: |
-          Allowed values for count option are `exact`, `planned` and `estimated`.
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('users')
-            .upsert({ 
-                'id': 3,
-                'message': 'foo', 
-                'username': 'supabot' 
-            })
-            .execute(count: CountOption.exact);
-          ```
-
-  delete():
-    description: |
-      Performs a DELETE on the table.
-    title: 'Delete data: delete()'
-    notes: |
-      - `delete()` should always be combined with [Filters](/docs/reference/dart/using-filters) to target the item(s) you wish to delete.
-    examples:
-      - name: Delete records
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .match({ 'id': 666 })
-            .execute();
-          ```
-
-  rpc():
-    title: 'Stored Procedures: rpc()'
-    description: |
-      You can call stored procedures as a "Remote Procedure Call".
-
-      That's a fancy way of saying that you can put some logic into your database then call it from anywhere.
-      It's especially useful when the logic rarely changes - like password resets and updates.
-    examples:
-      - name: Call a stored procedure
-        isSpotlight: true
-        description: This is an example invoking a stored procedure.
-        dart: |
-          ```dart
-          final res = await supabase
-            .rpc('hello_world')
-            .execute();
-          ```
-      - name: With Parameters
-        dart: |
-          ```dart
-          final res = await supabase
-            .rpc('echo_city', params: { 'name': 'The Shire' })
-            .execute();
-          ```
-      - name: With count option
-        description: |
-          You can specify a count option to get the row count along with your data.
-          Allowed values for count option are `exact`, `planned` and `estimated`.
-        dart: |
-          ```dart
-          final res = await supabase
-            .rpc('hello_world')
-            .execute(count: CountOption.exact);
-          ```
-
-  subscribe():
-    description: |
-      Subscribe to realtime changes in your database.
-    title: 'on().subscribe()'
-    notes: |
-      - Realtime is disabled by default for new Projects for better database performance and security. You can turn it on by [managing replication](/docs/guides/api#managing-realtime).
-      - If you want to receive the "previous" data for updates and deletes, you will need to set `REPLICA IDENTITY` to `FULL`, like this: `ALTER TABLE your_table REPLICA IDENTITY FULL;`
-    examples:
-      - name: Listen to all database changes
-        isSpotlight: true
-        dart: |
-          ```dart
-          final mySubscription = supabase
-            .from('countries')
-            .on(SupabaseEventTypes.all, (payload) {
-              // Handle realtime payload
-            })
-            .subscribe();
-          ```
-      - name: Listening to a specific table
-        dart: |
-          ```dart
-          final mySubscription = supabase
-            .from('countries')
-            .on(SupabaseEventTypes.all, (payload) {
-              // Handle realtime payload
-            })
-            .subscribe();
-          ```
-      - name: Listening to inserts
-        dart: |
-          ```dart
-          final mySubscription = supabase
-            .from('countries')
-            .on(SupabaseEventTypes.insert, (payload) {
-              // Handle realtime payload
-            })
-            .subscribe();
-          ```
-      - name: Listening to updates
-        description: |
-          By default, Supabase will send only the updated record. If you want to receive the previous values as well you can 
-          enable full replication for the table you are listening too: 
-
-          ```sql
-          alter table "your_table" replica identity full;
-          ```
-        dart: |
-          ```dart
-          final mySubscription = supabase
-            .from('countries')
-            .on(SupabaseEventTypes.update, (payload) {
-              // Handle realtime payload
-            })
-            .subscribe();
-          ```
-      - name: Listening to deletes
-        description: |
-          By default, Supabase does not send deleted records. If you want to receive the deleted record you can 
-          enable full replication for the table you are listening too: 
-
-          ```sql
-          alter table "your_table" replica identity full;
-          ```
-        dart: |
-          ```dart
-          final mySubscription = supabase
-            .from('countries')
-            .on(SupabaseEventTypes.delete, (payload) {
-              // Handle realtime payload
-            })
-            .subscribe();
-          ```
-      - name: Listening to multiple events
-        description: You can chain listeners if you want to listen to multiple events for each table.
-        dart: |
-          ```dart
-          final mySubscription = supabase
-            .from('countries')
-            .on(SupabaseEventTypes.insert, handleInsert)
-            .on(SupabaseEventTypes.delete, handleDelete)
-            .subscribe();
-          ```
-      - name: Listening to row level changes
-        description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.
-        dart: |
-          ```dart
-          final mySubscription = supabase
-            .from('countries:id=eq.200')
-            .on(SupabaseEventTypes.update, handleRecordUpdated)
-            .subscribe();
-          ```
-
-  removeSubscription():
-    description: |
-      Removes an active subscription and returns the number of open connections.
-    title: 'removeSubscription()'
-    notes: |
-      - Removing subscriptions is a great way to maintain the performance of your project's database. Supabase will automatically handle cleanup 30 seconds after a user is disconnected, but unused subscriptions may cause degradation as more users are simultaneously subscribed.
-    examples:
-      - name: Remove a subscription
-        isSpotlight: true
-        dart: |
-          ```dart
-          supabase.removeSubscription(mySubscription);
-          ```
-
-  getSubscriptions():
-    description: |
-      Returns an array of all your subscriptions.
-    title: 'getSubscriptions()'
-    examples:
-      - name: Get all subscriptions
-        isSpotlight: true
-        dart: |
-          ```dart
-          final subscriptions = supabase.getSubscriptions();
-          ```
-
-  stream():
-    description: |
-      Notifies of data at the queried table.
-    title: 'stream()'
-    notes: |
-      - `stream()` will emit the initial data as well as any further change on the database as `Stream` of `List<Map<String, dynamic>>` by combining Postgrest and Realtime.
-      - Takes a list of primary key columns as its argument.
-    examples:
-      - name: Listening to a specific table
-        isSpotlight: true
-        dart: |
-          ```dart
-          supabase
-            .from('countries')
-            .stream(['id'])
-            .execute();
-          ```
-      - name: Listening to a specific rows within a table
-        description: |
-          You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.
-          This syntax is the as how you can filter data in Realtime
-        dart: |
-          ```dart
-          supabase
-            .from('countries:id=eq.120')
-            .stream(['id'])
-            .execute();
-          ```
-      - name: With `order()`
-        dart: |
-          ```dart
-          supabase
-            .from('countries')
-            .stream(['id'])
-            .order('name', ascending: false)
-            .execute();
-          ```
-      - name: With `limit()`
-        dart: |
-          ```dart
-          supabase
-            .from('countries')
-            .stream(['id'])
-            .order('name', ascending: false)
-            .limit(10)
-            .execute();
-          ```
-
-  storage.listBuckets():
-    description: |
-      Retrieves the details of all Storage buckets within an existing product.
-    title: 'listBuckets()'
-    $ref: '@supabase/storage-js."lib/StorageBucketApi".StorageBucketApi.listBuckets'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` 
-        - `objects` permissions: none
-    examples:
-      - name: List buckets
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .listBuckets()
-          ```
-
-  storage.getBucket():
-    description: |
-      Retrieves the details of an existing Storage bucket.
-    title: 'getBucket()'
-    $ref: '@supabase/storage-js."lib/StorageBucketApi".StorageBucketApi.getBucket'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` 
-        - `objects` permissions: none
-    examples:
-      - name: Get bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .getBucket('avatars')
-          ```
-
-  storage.createBucket():
-    description: |
-      Creates a new Storage bucket
-    title: 'createBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `insert` 
-        - `objects` permissions: none
-    examples:
-      - name: Create bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .createBucket('avatars');
-          ```
-
-  storage.emptyBucket():
-    description: |
-      Removes all objects inside a single bucket.
-    title: 'emptyBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` 
-        - `objects` permissions: `select` and `delete`
-    examples:
-      - name: Empty bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .emptyBucket('avatars');
-          ```
-  storage.updateBucket():
-    description: |
-      Updates a new Storage bucket
-    title: 'updateBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `update`
-        - `objects` permissions: none
-    examples:
-      - name: Update bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .updateBucket('avatars', { public: false });
-          ```
-
-  storage.deleteBucket():
-    description: |
-      Deletes an existing bucket. A bucket can't be deleted with existing objects inside it. You must first `empty()` the bucket.
-    title: 'deleteBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` and `delete`
-        - `objects` permissions: none
-    examples:
-      - name: Delete bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .deleteBucket('avatars');
-          ```
-
-  storage.from.upload():
-    description: |
-      Uploads a file to an existing bucket.
-    title: 'from.upload()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.upload'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `insert`
-    examples:
-      - name: Upload file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final avatarFile = File('path/to/file');
-          final res = await supabase
-            .storage
-            .from('avatars')
-            .upload('public/avatar1.png', avatarFile, fileOptions: FileOptions(
-              cacheControl: '3600',
-              upsert: false
-            ));
-          ```
-
-  storage.from.update():
-    description: |
-      Replaces an existing file at the specified path with a new one.
-    title: 'from.update()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `update` and `select`
-    examples:
-      - name: Update file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final avatarFile = File('path/to/file');
-          final res = await supabase
-            .storage
-            .from('avatars')
-            .update('public/avatar1.png', avatarFile, fileOptions: FileOptions(
-              cacheControl: '3600',
-              upsert: false
-            ));
-          ```
-
-  storage.from.move():
-    description: |
-      Moves an existing file, optionally renaming it at the same time.
-    title: 'from.move()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `update` and `select`
-    examples:
-      - name: Move file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .from('avatars')
-            .move('public/avatar1.png', 'private/avatar2.png');
-          ```
-
-  storage.from.createSignedUrl():
-    description: |
-      Create signed url to download file without requiring permissions. This URL can be valid for a set number of seconds.
-    title: 'from.createSignedUrl()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `select`
-    examples:
-      - name: Create Signed URL
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .from('avatars')
-            .createSignedUrl('avatar1.png', 60);
-
-          final signedURL = res.data;
-          ```
-
-  storage.from.getPublicUrl():
-    description: |
-      Retrieve URLs for assets in public buckets
-    title: 'from.getPublicUrl()'
-    notes: |
-      - The bucket needs to be set to public, either via [updateBucket()](/docs/reference/javascript/storage-updatebucket) or by going to Storage on [app.supabase.com](https://app.supabase.com), clicking the overflow menu on a bucket and choosing "Make public"
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: none
-    examples:
-      - name: Returns the URL for an asset in a public bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = supabase
-            .storage
-            .from('public-bucket')
-            .getPublicUrl('avatar1.png');
-
-          final publicURL = res.data;
-          ```
-
-  storage.from.download():
-    description: |
-      Downloads a file.
-    title: 'from.download()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `select`
-    examples:
-      - name: Download file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .from('avatars')
-            .download('avatar1.png');
-          ```
-
-  storage.from.remove():
-    description: |
-      Deletes files within the same bucket
-    title: 'from.remove()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `delete` and `select`
-    examples:
-      - name: Delete file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .from('avatars')
-            .remove(['avatar1.png']);
-          ```
-
-  storage.from.list():
-    description: |
-      Lists all the files within a bucket.
-    title: 'from.list()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `select`
-    examples:
-      - name: List files in a bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .from('avatars')
-            .list();
-          ```
-  Using Modifiers:
-    description: |
-      Modifiers can be used on `select()` queries. 
-
-      If a Stored Procedure returns a table response, you can also apply modifiers to the `rpc()` function.
-
-  limit():
-    description: |
-      Limits the result with the specified count.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .limit(1)
-            .execute();
-          ```
-      - name: With embedded resources
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, cities(name)')
-            .eq('name', 'United States')
-            .limit(1,  foreignTable: 'cities' )
-            .execute();
-          ```
-
-  order():
-    description: |
-      Orders the result with the specified column.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .order('id',  ascending: false )
-            .execute();
-          ```
-      - name: With embedded resources
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, cities(name)')
-            .eq('name', 'United States')
-            .order('name', foreignTable: 'cities')
-            .execute();
-          ```
-
-  range():
-    description: |
-      Limits the result to rows within the specified range, inclusive.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .range(0,3)
-            .execute();
-          ```
-
-  single():
-    description: |
-      Retrieves only one row from the result. Result must be one row (e.g. using limit), otherwise this will result in an error.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .single()
-            .execute();
-          ```
-
-  Using Filters:
-    description: |
-      Filters can be used on `select()`, `update()`, and `delete()` queries. 
-
-      If a Stored Procedure returns a table response, you can also apply filters.
-
-      ### Applying Filters
-
-      You must apply your filters to the end of your query. For example:
-
-      ```dart
-      final res = await supabase
-        .from('cities')
-        .select('name, country_id')
-        .eq('name', 'The Shire')    // Correct
-        .execute();
-
-      final res = await supabase
-        .from('cities')
-        .eq('name', 'The Shire')    // Incorrect
-        .select('name, country_id')
-        .execute();
-      ```
-
-      ### Chaining
-
-      Filters can be chained together to produce advanced queries. For example:
-
-      ```dart
-      final res = await supabase
-        .from('cities')
-        .select('name, country_id')
-        .gte('population', 1000)
-        .lt('population', 10000)
-        .execute();
-      ```
-
-  .or():
-    description: |
-      Finds all rows satisfying at least one of the filters.
-    notes: |
-      - `.or()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values.
-
-        ```dart
-        .or('id.in.(6,7),arraycol.cs.{"a","b"}')  // Use Postgres list () and 'in' for in_ filter. Array {} and 'cs' for contains.
-        .or('id.in.(${mylist.join(',')}),arraycol.cs.{${mylistArray.join(',')}}')	// You can insert a Dart list for list or array column.
-        .or('id.in.(${mylist.join(',')}),rangecol.cs.(${mylistRange.join(',')}]')	// You can insert a Dart list for list or range column.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .or('id.eq.20,id.eq.30')
-            .execute();
-          ```
-      - name: Use `or` with `and`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .or('id.gt.20,and(name.eq.New Zealand,name.eq.France)')
-            .execute();
-          ```
-      # TODO Not available at the moment, so would have to fix the bug on postgrest-dart first
-      # - name: Use `or` on foreign tables
-      #   isSpotlight: true
-      #   dart: |
-      #     ```dart
-      #     final res = await supabase
-      #       .from('countries')
-      #       .select('id, cities(*)')
-      #       .or('name.eq.Wellington,name.eq.Paris', { foreignTable: "cities" })
-      #     ```
-
-  .not():
-    description: |
-      Finds all rows which doesn't satisfy the filter.
-    notes: |
-      - `.not()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values.
-
-        ```dart
-        .not('name','eq','Paris')
-        .not('arraycol','cs','{"a","b"}') // Use Postgres array {} for array column and 'cs' for contains.
-        .not('rangecol','cs','(1,2]') // Use Postgres range syntax for range column.
-        .not('id','in','(6,7)')  // Use Postgres list () and 'in' for in_ filter.
-        .not('id','in','(${mylist.join(',')})')  // You can insert a Dart list array.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .not('name', 'eq', 'Paris')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .not('name', 'eq', 'Paris')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .not('name', 'eq', 'Paris')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities)
-            .not('name', 'eq', 'Paris')
-            .execute();
-          ```
-
-  .match():
-    description: |
-      Finds all rows whose columns match the specified `query` object.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .match({'name': 'Beijing', 'country_id': 156})
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .match({'name': 'Beijing', 'country_id': 156})
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .match({'name': 'Beijing', 'country_id': 156})
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .match({'name': 'Beijing', 'country_id': 156})
-            .execute();
-          ```
-
-  .eq():
-    description: |
-      Finds all rows whose value on the stated `column` exactly matches the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .eq('name', 'The shire')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .eq('name', 'San Francisco')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .eq('name', 'Mordor')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .eq('name', 'San Francisco')
-            .execute();
-          ```
-
-  .neq():
-    description: |
-      Finds all rows whose value on the stated `column` doesn't match the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .neq('name', 'The shire')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .neq('name', 'San Francisco')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .neq('name', 'Mordor')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .neq('name', 'Lagos')
-            .execute();
-          ```
-
-  .gt():
-    description: |
-      Finds all rows whose value on the stated `column` is greater than the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .gt('country_id', 250)
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .gt('country_id', 250)
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .gt('country_id', 250)
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .gt('country_id', 250)
-            .execute();
-          ```
-
-  .gte():
-    description: |
-      Finds all rows whose value on the stated `column` is greater than or equal to the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .gte('country_id', 250)
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .gte('country_id', 250)
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .gte('country_id', 250)
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .gte('country_id', 250)
-            .execute();
-          ```
-
-  .lt():
-    description: |
-      Finds all rows whose value on the stated `column` is less than the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .lt('country_id', 250)
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .lt('country_id', 250)
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .lt('country_id', 250)
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .lt('country_id', 250)
-            .execute();
-          ```
-
-  .lte():
-    description: |
-      Finds all rows whose value on the stated `column` is less than or equal to the specified `value`.
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.lte'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .lte('country_id', 250)
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .lte('country_id', 250)
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .lte('country_id', 250)
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .lte('country_id', 250)
-            .execute();
-          ```
-
-  .like():
-    description: |
-      Finds all rows whose value in the stated `column` matches the supplied `pattern` (case sensitive).
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.like'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .like('name', '%la%')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .like('name', '%la%')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .like('name', '%la%')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .like('name', '%la%')
-            .execute();
-          ```
-
-  .ilike():
-    description: |
-      Finds all rows whose value in the stated `column` matches the supplied `pattern` (case insensitive).
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .ilike('name', '%la%')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .ilike('name', '%la%')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .ilike('name', '%la%')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .ilike('name', '%la%')
-            .execute();
-          ```
-
-  .is_():
-    description: |
-      A check for exact equality (null, true, false), finds all rows whose value on the stated `column` exactly match the specified `value`.
-
-      `is_` and `in_` filter methods are suffixed with `_` to avoid collisions with reserved keywords.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .is_('name', null)
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .is_('name', null)
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .is_('name', null)
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .is_('name', null)
-            .execute();
-          ```
-
-  .in_():
-    description: |
-      Finds all rows whose value on the stated `column` is found on the specified `values`.
-
-      `is_` and `in_` filter methods are suffixed with `_` to avoid collisions with reserved keywords.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .in_('name', ['Rio de Janeiro', 'San Francisco'])
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .in_('name', ['Rio de Janeiro', 'San Francisco'])
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .in_('name', ['Rio de Janeiro', 'San Francisco'])
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .in_('name', ['Rio de Janeiro', 'San Francisco'])
-            .execute();
-          ```
-
-  .contains():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .contains('main_exports', ['oil'])
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .contains('main_exports', ['oil'])
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .delete()
-            .contains('main_exports', ['oil'])
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_countries')
-            .contains('main_exports', ['oil'])
-            .execute();
-          ```
-
-  .containedBy():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .containedBy('main_exports', ['cars', 'food', 'machine'])
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .containedBy('main_exports', ['orks', 'surveillance', 'evil'])
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .delete()
-            .containedBy('main_exports', ['cars', 'food', 'machine'])
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_countries')
-            .containedBy('main_exports', ['cars', 'food', 'machine'])
-            .execute();
-          ```
-
-  .rangeLt():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeLt('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeLt('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .delete()
-            .rangeLt('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_countries')
-            .rangeLt('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-
-  .rangeGt():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeGt('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeGt('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .delete()
-            .rangeGt('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_countries')
-            .rangeGt('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-
-  .rangeGte():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeGte('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeGte('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .delete()
-            .rangeGte('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_countries')
-            .rangeGte('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-
-  .rangeLte():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.rangeLte'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeLte('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeLte('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .delete()
-            .rangeLte('population_range_millions', '[150, 250]')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_countries')
-            .rangeLte('population_range_millions', [150, 250])
-            .execute();
-          ```
-
-  .rangeAdjacent():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeAdjacent('population_range_millions', '[70, 185]')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeAdjacent('population_range_millions', '[70, 185]')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .delete()
-            .rangeAdjacent('population_range_millions', '[70, 185]')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_countries')
-            .rangeAdjacent('population_range_millions', '[70, 185]')
-            .execute();
-          ```
-
-  .overlaps():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .overlaps('main_exports', ['computers', 'minerals'])
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .overlaps('main_exports', ['computers', 'minerals'])
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('countries')
-            .delete()
-            .overlaps('main_exports', ['computers', 'minerals'])
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_countries')
-            .overlaps('main_exports', ['computers', 'minerals'])
-            .execute();
-          ```
-
-  .textSearch():
-    description: |
-      Finds all rows whose tsvector value on the stated `column` matches to_tsquery(query).
-    examples:
-      - name: Text search
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', "'fat' & 'cat'", 
-              config: 'english' 
-            )
-            .execute();
-          ```
-      - name: Basic normalization
-        description: Uses PostgreSQL's `plainto_tsquery` function.
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', "'fat' & 'cat'",  
-              type: TextSearchType.plain,
-              config: 'english' 
-            )
-            .execute();
-          ```
-      - name: Full normalization
-        description: Uses PostgreSQL's `phraseto_tsquery` function.
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', "'fat' & 'cat'",  
-              type: TextSearchType.phrase,
-              config: 'english' 
-            )
-            .execute();
-          ```
-      - name: Full normalization
-        description: |
-          Uses PostgreSQL's `websearch_to_tsquery` function. 
-          This function will never raise syntax errors, which makes it possible to use raw user-supplied input for search, and can be used 
-          with advanced operators.
-
-          - `unquoted text`: text not inside quote marks will be converted to terms separated by & operators, as if processed by plainto_tsquery.
-          - `"quoted text"`: text inside quote marks will be converted to terms separated by <-> operators, as if processed by phraseto_tsquery.
-          - `OR`: the word “or” will be converted to the | operator.
-          - `-`: a dash will be converted to the ! operator.
-
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', "'fat or cat'",  
-              type: TextSearchType.websearch,
-              config: 'english'
-            )
-            .execute();
-          ```
-
-  .filter():
-    description: |
-      Finds all rows whose `column` satisfies the filter.
-    notes: |
-      - `.filter()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values, so it should only be used as an escape hatch in case other filters don't work.
-        ```dart
-          .filter('arraycol','cs','{"a","b"}') // Use Postgres array {} and 'cs' for contains.
-          .filter('rangecol','cs','(1,2]') // Use Postgres range syntax for range column.
-          .filter('id','in','(6,7)')  // Use Postgres list () and 'in' for in_ filter.
-          .filter('id','cs','{${mylist.join(',')}}')  // You can insert a Dart array list.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .filter('name', 'in', '("Paris","Tokyo")')
-            .execute();
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .filter('name', 'in', '("Paris","Tokyo")')
-            .execute();
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .delete()
-            .filter('name', 'in', '("Paris","Tokyo")')
-            .execute();
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final res = await supabase
-            .rpc('echo_all_cities')
-            .filter('name', 'in', '("Paris","Tokyo")')
-          ```
-      - name: Filter embedded resources
-        dart: |
-          ```dart
-          final res = await supabase
-            .from('cities')
-            .select('name, countries ( name )')
-            .filter('countries.name', 'in', '("France","Japan")')
-            .execute();
-          ```
diff --git a/spec/supabase_dart_v1--old.yml b/spec/supabase_dart_v1--old.yml
deleted file mode 100644
index 6f3ef71a653..00000000000
--- a/spec/supabase_dart_v1--old.yml
+++ /dev/null
@@ -1,2280 +0,0 @@
-openref: 0.1
-
-info:
-  id: reference/dart
-  title: Getting started
-  description: |
-
-    Supabase Dart.
-
-  definition: ../../spec/enrichments/tsdoc_v2/combined.json
-  slugPrefix: '/'
-  specUrl: https://github.com/supabase/supabase/edit/master/spec/supabase_dart_v1.yml
-  libraries:
-    - name: 'Dart'
-      id: 'dart'
-      version: '0.0.1'
-
-pages:
-  auth.signUp():
-    title: 'signUp()'
-    description: |
-      Creates a new user.
-    notes: |
-      - By default, the user needs to verify their email address before logging in. To turn this off, disable **Confirm email** in [your project](https://app.supabase.com/project/_/auth/settings).
-      - **Confirm email** determines if users need to confirm their email address after signing up.
-        - If **Confirm email** is enabled, a `user` is returned but `session` is null.
-        - If **Confirm email** is disabled, both a `user` and a `session` are returned.
-      - When the user confirms their email address, they are redirected to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url) by default. You can modify your `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/settings).
-      - If signUp() is called for an existing confirmed user:
-          - If **Confirm email** is enabled in [your project](https://app.supabase.com/project/_/auth/settings), an obfuscated/fake user object is returned.
-          - If **Confirm email** is disabled, the error message, `User already registered` is returned.
-    examples:
-      - name: Sign up.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final AuthResponse res = await supabase.auth.signUp(
-            email: 'example@email.com',
-            password: 'example-password',
-          );
-          final Session? session = res.session;
-          final User? user = res.user;
-          ```
-      - name: Sign up with third-party providers.
-        hideCodeBlock: true
-        description: |
-          If you are using Flutter, you can sign up with OAuth providers using the [`signInWithOAuth()`](/docs/reference/dart/auth-signinwithoauth) method available on `supabase_flutter`.
-
-  auth.signInWithPassword():
-    title: 'signInWithPassword()'
-    description: |
-      Log in an existing user using email or phone number with password.
-    notes: |
-      - Requires either an email and password or a phone number and password.
-    examples:
-      - name: Sign in with email and password
-        isSpotlight: true
-        dart: |
-          ```dart
-          final AuthResponse res = await supabase.auth.signInWithPassword(
-            email: 'example@email.com',
-            password: 'example-password',
-          );
-          final Session? session = res.session;
-          final User? user = res.user;
-          ```
-      - name: Sign in with phone and password
-        dart: |
-          ```dart
-          final AuthResponse res = await supabase.auth.signInWithPassword(
-            phone: '+13334445555',
-            password: 'example-password',
-          );
-          final Session? session = res.session;
-          final User? user = res.user;
-          ```
-  auth.signInWithOtp():
-    title: 'signInWithOtp()'
-    notes: |
-      - Requires either an email or phone number.
-      - This method is used for passwordless sign-ins where a OTP is sent to the user's email or phone number.
-      - If you're using an email, you can configure whether you want the user to receive a magiclink or a OTP.
-      - If you're using phone, you can configure whether you want the user to receive a OTP.
-      - The magic link's destination URL is determined by the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional redirect urls in [your project](https://app.supabase.com/project/_/auth/settings).
-    examples:
-      - name: Sign in with email.
-        isSpotlight: true
-        description: |
-          The user will be sent an email which contains either a magiclink or a OTP or both. By default, a given user can only request a OTP once every 60 seconds.
-          You can pass `emailRedirectTo` with dynamic link to bring the users back to your app after they click on the magic link.
-        dart: |
-          ```dart
-          await supabase.auth.signInWithOtp(
-            email: 'example@email.com',
-            emailRedirectTo: kIsWeb ? null : 'io.supabase.flutter://signin-callback/',
-          );
-          ```
-      - name: Sign in with SMS OTP.
-        description: The user will be sent a SMS which contains a OTP. By default, a given user can only request a OTP once every 60 seconds.
-        dart: |
-          ```dart
-          await supabase.auth.signInWithOtp(
-            phone: '+13334445555',
-          );
-          ```
-  auth.signInWithOAuth():
-    title: 'signInWithOAuth()'
-    description: |
-      Signs the user in using third party OAuth providers.
-    notes: |
-      - This method is used for signing in using a third-party provider.
-      - Supabase supports many different [third-party providers](https://supabase.com/docs/guides/auth#providers).
-    examples:
-      - name: Sign in using a third-party provider
-        isSpotlight: true
-        dart: |
-          ```dart
-          await supabase.auth.signInWithOAuth(Provider.github);
-          ```
-      - name: With `redirectTo`
-        description: |
-          Specify the redirect link to bring back the user via deeplink.
-          Note that `redirectTo` should be null for Flutter Web.
-        dart: |
-          ```dart
-          await supabase.auth.signInWithOAuth(
-            Provider.github,
-            redirectTo: kIsWeb ? null : 'io.supabase.flutter://reset-callback/',
-          );
-          ```
-      - name: With scopes
-        description: |
-          If you need additional data from an OAuth provider, you can include a space-separated list of scopes in your request to get back an OAuth provider token.
-          You may also need to specify the scopes in the provider's OAuth app settings, depending on the provider.
-        dart: |
-          ```dart
-          await supabase.auth.signInWithOAuth(
-            Provider.github,
-            scopes: 'repo gist notifications'
-          );
-          ...
-          // after user comes back from signin flow
-
-          final Session? session = supabase.auth.currentSession;
-          final String? oAuthToken = session?.providerToken;
-          ```
-  auth.signOut():
-    title: 'signOut()'
-    description: |
-      Signs out the current user, if there is a logged in user.
-    notes: |
-      - In order to use the `signOut()` method, the user needs to be signed in first.
-    examples:
-      - name: Sign out
-        isSpotlight: true
-        dart: |
-          ```dart
-          await supabase.auth.signOut();
-          ```
-  auth.verifyOtp():
-    title: 'verifyOtp()'
-    notes: |
-      - The `verifyOtp` method takes in different verification types. If a phone number is used, the type can either be `sms` or `phone_change`. If an email address is used, the type can be one of the following: `signup`, `magiclink`, `recovery`, `invite` or `email_change`.
-      - The verification type used should be determined based on the corresponding auth method called before `verifyOtp` to sign up / sign-in a user.
-    examples:
-      - name: Verify Sms One-Time Password (OTP)
-        isSpotlight: true
-        dart: |
-          ```dart
-          final AuthResponse res = await supabase.auth.verifyOTP(
-            type: OtpType.sms,
-            token: '111111',
-            phone: '+13334445555',
-          );
-          final Session? session = res.session;
-          final User? user = res.user;
-          ```
-      - name: Verify Signup One-Time Password (OTP)
-        isSpotlight: false
-        dart: |
-          ```dart
-          final AuthResponse res = await supabase.auth.verifyOTP(
-            type: OtpType.signup,
-            token: token,
-            phone: '+13334445555',
-          );
-          final Session? session = res.session;
-          final User? user = res.user;
-          ```
-  auth.currentSession:
-    title: 'currentSession'
-    description: |
-      Returns the session data, if there is an active session.
-    examples:
-      - name: Get the session data
-        isSpotlight: true
-        dart: |
-          ```dart
-          final Session? session = supabase.auth.currentSession;
-          ```
-  auth.currentUser:
-    title: 'currentUser'
-    description: |
-      Returns the user data, if there is a logged in user.
-    examples:
-      - name: Get the logged in user
-        isSpotlight: true
-        dart: |
-          ```dart
-          final User? user = supabase.auth.currentUser;
-          ```
-  auth.updateUser():
-    title: 'updateUser()'
-    description: |
-      Updates user data, if there is a logged in user.
-    notes: |
-      - In order to use the `updateUser()` method, the user needs to be signed in first.
-      - By Default, email updates sends a confirmation link to both the user's current and new email.
-      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/settings).
-    examples:
-      - name: Update the email for an authenticated user
-        description: Sends a "Confirm Email Change" email to the new email address.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final UserResponse res = await supabase.auth.updateUser(
-            UserAttributes(
-              email: 'example@email.com',
-            ),
-          );
-          final User? updatedUser = res.user;
-          ```
-      - name: Update the password for an authenticated user
-        isSpotlight: false
-        dart: |
-          ```dart
-          final UserResponse res = await supabase.auth.updateUser(
-            UserAttributes(
-              password: 'new password',
-            ),
-          );
-          final User? updatedUser = res.user;
-          ```
-      - name: Update the user's metadata
-        isSpotlight: true
-        dart: |
-          ```dart
-          final UserResponse res = await supabase.auth.updateUser(
-            UserAttributes(
-              data: { 'hello': 'world' },
-            ),
-          );
-          final User? updatedUser = res.user;
-          ```
-  auth.onAuthStateChange():
-    title: 'onAuthStateChange()'
-    description: |
-      Receive a notification every time an auth event happens.
-    notes: |
-      - Types of auth events: `AuthChangeEvent.passwordRecovery`, `AuthChangeEvent.signedIn`, `AuthChangeEvent.signedOut`, `AuthChangeEvent.tokenRefreshed`, `AuthChangeEvent.userUpdated`and `AuthChangeEvent.userDeleted`
-    examples:
-      - name: Listen to auth changes
-        isSpotlight: true
-        dart: |
-          ```dart
-          final authSubscription = supabase.auth.onAuthStateChange.listen((data) {
-            final AuthChangeEvent event = data.event;
-            final Session? session = data.session;
-          });
-          ```
-      - name: Listen to a specific event
-        dart: |
-          ```dart
-          final authSubscription = supabase.auth.onAuthStateChange.listen((data) {
-            final AuthChangeEvent event = data.event;
-            if (event == AuthChangeEvent.signedIn) {
-              // handle signIn
-            }
-          });
-          ```
-      - name: Unsubscribe from auth subscription
-        dart: |
-          ```dart
-          final authSubscription = supabase.auth.onAuthStateChange((event, session) {});
-
-          authSubscription.cancel();
-          ```
-  auth.resetPasswordForEmail:
-    title: 'resetPasswordForEmail()'
-    description: |
-      Sends a reset request to an email address.
-    notes: |
-      Sends a password reset request to an email address. When the user clicks the reset link in the email they are redirected back to your application. Prompt the user for a new password and call auth.updateUser():
-
-      ```dart
-      await supabase.auth.resetPasswordForEmail(
-        'sample@email.com',
-        redirectTo: kIsWeb ? null : 'io.supabase.flutter://reset-callback/',
-      );
-      ```
-    examples:
-      - name: Reset password for Flutter
-        isSpotlight: true
-        dart: |
-          `redirectTo` is used to open the app via deeplink when user opens the password reset email. 
-          ```dart
-          await supabase.auth.resetPasswordForEmail(
-            'sample@email.com',
-            redirectTo: kIsWeb ? null : 'io.supabase.flutter://reset-callback/',
-          );
-          ```
-  invoke():
-    title: 'invoke()'
-    description: |
-      Invokes a Supabase Function. See the [guide](/docs/guides/functions) for details on writing Functions.
-    notes: |
-      - Requires an Authorization header.
-      - Invoke params generally match the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) spec.
-    examples:
-      - name: Basic invocation.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.functions.invoke('hello', body: {'foo': 'baa'});
-          final data = res.data;
-          ```
-      - name: Specifying response type.
-        description: |
-          By default, `invoke()` will parse the response as JSON. You can parse the response in the following formats: `json`, `blob`, `text`, and `arrayBuffer`.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.functions.invoke(
-            'hello',
-            body: {'foo': 'baa'},
-            responseType: ResponseType.text,
-          );
-          final data = res.data;
-          ```
-      - name: Parsing custom headers.
-        description: |
-          Any `headers` will be passed through to the function. A common pattern is to pass a logged-in user's JWT token as an Authorization header.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase.functions.invoke(
-            'hello',
-            body: {'foo': 'baa'},
-            headers: {
-              'Authorization': 'Bearer ${supabase.auth.currentSession?.accessToken}'
-            },
-          );
-          ```
-  select():
-    description: |
-      Performs vertical filtering with SELECT.
-    title: 'Fetch data: select()'
-    notes: |
-      - By default, Supabase projects will return a maximum of 1,000 rows. This setting can be changed in Project API Settings. It's recommended that you keep it low to limit the payload size of accidental or malicious requests. You can use `range()` queries to paginate through your data.
-      - `select()` can be combined with [Modifiers](/docs/reference/dart/using-modifiers)
-      - `select()` can be combined with [Filters](/docs/reference/dart/using-filters)
-      - If using the Supabase hosted platform `apikey` is technically a reserved keyword, since the API gateway will pluck it out for authentication. [It should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
-    examples:
-      - name: Getting your data
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name');
-          ```
-      - name: Selecting specific columns
-        description: You can select specific fields from your tables.
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('''
-              name,
-              cities (
-                name
-              )
-            ''');
-          ```
-      - name: Query foreign tables
-        description: If your database has relationships, you can query related tables too.
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('products')
-            .select('''
-              id,
-              supplier:supplier_id ( name ),
-              purchaser:purchaser_id ( name )
-            ''');
-          ```
-      - name: Query the same foreign table multiple times
-        description: |
-          Sometimes you will need to query the same foreign table twice. 
-          In this case, you can use the name of the joined column to identify 
-          which join you intend to use. For convenience, you can also give an 
-          alias for each column. For example, if we had a shop of products, 
-          and we wanted to get the supplier and the purchaser at the same time 
-          (both in the users) table:
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('messages')
-            .select('*, users!inner(*)')
-            .eq('users.username', 'Jane');
-          ```
-      - name: Filtering with inner joins
-        description: |
-          If you want to filter a table based on a child table's values you can use the `!inner()` function. For example, if you wanted 
-          to select all rows in a `message` table which belong to a user with the `username` "Jane":
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('messages')
-            .select('*, users!inner(*)')
-            .eq('users.username', 'Jane');
-          ```
-      - name: Querying with count option
-        description: |
-          You can get the number of rows by using the count option.
-          Allowed values for count option are [exact](https://postgrest.org/en/stable/api.html#exact-count), [planned](https://postgrest.org/en/stable/api.html#planned-count) and [estimated](https://postgrest.org/en/stable/api.html#estimated-count).
-        dart: |
-          ```dart
-          final res = await supabase.from('cities').select(
-                'name',
-                const FetchOptions(
-                  count: CountOption.exact,
-                ),
-              );
-
-          final count = res.count;
-          ```
-      - name: Querying JSON data
-        description: |
-          If you have data inside of a JSONB column, you can apply select 
-          and query filters to the data values. Postgres offers a 
-          [number of operators](https://www.postgresql.org/docs/current/functions-json.html) 
-          for querying JSON data. Also see 
-          [PostgREST docs](http://postgrest.org/en/v7.0.0/api.html#json-columns) for more details.
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('users')
-            .select('''
-              id, name,
-              address->street
-            ''')
-            .eq('address->postcode', 90210);
-          ```
-      - name: Return data as CSV
-        description: |
-          By default the data is returned in JSON format, however you can also request for it to be returned as Comma Separated Values.
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('users')
-            .select()
-            .csv();
-          ```
-
-  insert():
-    description: |
-      Performs an INSERT into the table.
-    title: 'Create data: insert()'
-    examples:
-      - name: Create a record
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-              .from('cities')
-              .insert({'name': 'The Shire', 'country_id': 554});
-          ```
-      - name: Bulk create
-        dart: |
-          ```dart
-          final res = await supabase.from('cities').insert([
-            {'name': 'The Shire', 'country_id': 554},
-            {'name': 'Rohan', 'country_id': 555},
-          ]);
-          ```
-
-  update():
-    description: |
-      Performs an UPDATE on the table.
-    title: 'Modify data: update()'
-    notes: |
-      - `update()` should always be combined with [Filters](/docs/reference/dart/using-filters) to target the item(s) you wish to update.
-    examples:
-      - name: Updating your data
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Middle Earth' })
-            .match({ 'name': 'Auckland' });
-          ```
-      - name: Updating JSON data
-        description: |
-          Postgres offers a 
-          [number of operators](https://www.postgresql.org/docs/current/functions-json.html) 
-          for working with JSON data. Right now it is only possible to update an entire JSON document, 
-          but we are [working on ideas](https://github.com/PostgREST/postgrest/issues/465) for updating individual keys.
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('users')
-            .update({
-              'address': {
-                'street': 'Melrose Place',
-                'postcode': 90210
-              }
-            })
-            .eq('address->postcode', 90210);
-          ```
-
-  upsert():
-    description: |
-      Performs an UPSERT into the table.
-    title: 'Upsert data: upsert()'
-    notes: |
-      - Primary keys should be included in the data payload in order for an update to work correctly. 
-      - Primary keys must be natural, not surrogate. There are however, [workarounds](https://github.com/PostgREST/postgrest/issues/1118) for surrogate primary keys.
-    examples:
-      - name: Upsert your data
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('messages')
-            .upsert({ 'id': 3, 'message': 'foo', 'username': 'supabot' });
-          ```
-      - name: Upserting into tables with constraints
-        description: |
-          Running the following will cause supabase to upsert data into the `users` table. 
-          If the username 'supabot' already exists, the `onConflict` argument tells supabase to overwrite that row 
-          based on the column passed into `onConflict`.
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('users')
-            .upsert({ 'username': 'supabot' }, { 'onConflict': 'username' });
-          ```
-      - name: Return the exact number of rows
-        description: |
-          Allowed values for count option are `exact`, `planned` and `estimated`.
-        dart: |
-          ```dart
-          final res = await supabase.from('users').upsert(
-            {'id': 3, 'message': 'foo', 'username': 'supabot'},
-            options: const FetchOptions(count: CountOption.exact),
-          );
-
-          final data = res.data;
-          final count = res.count;
-          ```
-
-  delete():
-    description: |
-      Performs a DELETE on the table.
-    title: 'Delete data: delete()'
-    notes: |
-      - `delete()` should always be combined with [Filters](/docs/reference/dart/using-filters) to target the item(s) you wish to delete.
-    examples:
-      - name: Delete records
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .match({ 'id': 666 });
-          ```
-
-  rpc():
-    title: 'Stored Procedures: rpc()'
-    description: |
-      You can call stored procedures as a "Remote Procedure Call".
-
-      That's a fancy way of saying that you can put some logic into your database then call it from anywhere.
-      It's especially useful when the logic rarely changes - like password resets and updates.
-    examples:
-      - name: Call a stored procedure
-        isSpotlight: true
-        description: This is an example invoking a stored procedure.
-        dart: |
-          ```dart
-          final data = await supabase
-            .rpc('hello_world');
-          ```
-      - name: With Parameters
-        dart: |
-          ```dart
-          final data = await supabase
-            .rpc('echo_city', params: { 'name': 'The Shire' });
-          ```
-
-  subscribe():
-    description: |
-      Subscribe to realtime changes in your database.
-    title: 'on().subscribe()'
-    notes: |
-      - Realtime is disabled by default for new Projects for better database performance and security. You can turn it on by [managing replication](/docs/guides/api#managing-realtime).
-      - If you want to receive the "previous" data for updates and deletes, you will need to set `REPLICA IDENTITY` to `FULL`, like this: `ALTER TABLE your_table REPLICA IDENTITY FULL;`
-    examples:
-      - name: Listen to all database changes
-        isSpotlight: true
-        dart: |
-          ```dart
-          supabase.channel('*').on(
-            RealtimeListenTypes.postgresChanges,
-            ChannelFilter(event: '*', schema: '*'),
-            (payload, [ref]) {
-              print('Change received: ${payload.toString()}');
-            },
-          ).subscribe();
-          ```
-      - name: Listening to a specific table
-        dart: |
-          ```dart
-          supabase.channel('public:countries').on(
-            RealtimeListenTypes.postgresChanges,
-            ChannelFilter(event: '*', schema: 'public', table: 'countries'),
-            (payload, [ref]) {
-              print('Change received: ${payload.toString()}');
-            },
-          ).subscribe();
-          ```
-      - name: Listening to inserts
-        dart: |
-          ```dart
-          supabase.channel('public:countries').on(
-            RealtimeListenTypes.postgresChanges,
-            ChannelFilter(event: 'INSERT', schema: 'public', table: 'countries'),
-            (payload, [ref]) {
-              print('Change received: ${payload.toString()}');
-            },
-          ).subscribe();
-          ```
-      - name: Listening to updates
-        description: |
-          By default, Supabase will send only the updated record. If you want to receive the previous values as well you can 
-          enable full replication for the table you are listening too: 
-
-          ```sql
-          alter table "your_table" replica identity full;
-          ```
-        dart: |
-          ```dart
-          supabase.channel('public:countries').on(
-            RealtimeListenTypes.postgresChanges,
-            ChannelFilter(event: 'UPDATE', schema: 'public', table: 'countries'),
-            (payload, [ref]) {
-              print('Change received: ${payload.toString()}');
-            },
-          ).subscribe();
-          ```
-      - name: Listening to deletes
-        description: |
-          By default, Supabase does not send deleted records. If you want to receive the deleted record you can 
-          enable full replication for the table you are listening too: 
-
-          ```sql
-          alter table "your_table" replica identity full;
-          ```
-        dart: |
-          ```dart
-          supabase.channel('public:countries').on(
-            RealtimeListenTypes.postgresChanges,
-            ChannelFilter(event: 'DELETE', schema: 'public', table: 'countries'),
-            (payload, [ref]) {
-              print('Change received: ${payload.toString()}');
-            },
-          ).subscribe();
-          ```
-      - name: Listening to multiple events
-        description: You can chain listeners if you want to listen to multiple events for each table.
-        dart: |
-          ```dart
-          supabase.channel('public:countries').on(RealtimeListenTypes.postgresChanges,
-              ChannelFilter(event: 'INSERT', schema: 'public', table: 'countries'),
-              (payload, [ref]) {
-            print('Change received: ${payload.toString()}');
-          }).on(RealtimeListenTypes.postgresChanges,
-              ChannelFilter(event: 'DELETE', schema: 'public', table: 'countries'),
-              (payload, [ref]) {
-            print('Change received: ${payload.toString()}');
-          }).subscribe();
-          ```
-      - name: Listening to row level changes
-        description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.
-        dart: |
-          ```dart
-          supabase.channel('public:countries:id=eq.200').on(
-              RealtimeListenTypes.postgresChanges,
-              ChannelFilter(
-                event: 'UPDATE',
-                schema: 'public',
-                table: 'countries',
-                filter: 'id=eq.200',
-              ), (payload, [ref]) {
-            print('Change received: ${payload.toString()}');
-          }).subscribe();
-          ```
-
-  removeChannel():
-    description: |
-      Unsubscribes and removes Realtime channel from Realtime client.
-    title: 'removeChannel()'
-    notes: |
-      - Removing a channel is a great way to maintain the performance of your project's Realtime service as well as your database if you're listening to Postgres changes. Supabase will automatically handle cleanup 30 seconds after a client is disconnected, but unused channels may cause degradation as more clients are simultaneously subscribed.
-    examples:
-      - name: Remove a channel
-        isSpotlight: true
-        dart: |
-          ```dart
-          final status = await supabase.removeChannel(channel);
-          ```
-
-  removeAllChannels():
-    description: |
-      Unsubscribes and removes all Realtime channels from Realtime client.
-    title: 'removeAllChannels()'
-    notes: |
-      - Removing channels is a great way to maintain the performance of your project's Realtime service as well as your database if you're listening to Postgres changes. Supabase will automatically handle cleanup 30 seconds after a client is disconnected, but unused channels may cause degradation as more clients are simultaneously subscribed.
-    examples:
-      - name: Remove all channels
-        isSpotlight: true
-        dart: |
-          ```dart
-          final statuses = await supabase.removeAllChannels();
-          ```
-
-  getChannels():
-    description: |
-      Returns all Realtime channels.
-    title: 'getChannels()'
-    examples:
-      - name: Get all channels
-        isSpotlight: true
-        dart: |
-          ```dart
-          final channels = supabase.getChannels();
-          ```
-
-  stream():
-    description: |
-      Notifies of data at the queried table.
-    title: 'stream()'
-    notes: |
-      - `stream()` will emit the initial data as well as any further change on the database as `Stream` of `List<Map<String, dynamic>>` by combining Postgrest and Realtime.
-      - Takes a list of primary key columns as its argument.
-    examples:
-      - name: Listening to a specific table
-        isSpotlight: true
-        dart: |
-          ```dart
-          supabase.from('countries')
-            .stream(primaryKey: ['id'])
-            .listen((List<Map<String, dynamic>> data) {
-            // Do something awesome with the data
-          });
-          ```
-      - name: Listening to a specific rows within a table
-        description: |
-          You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.
-          This syntax is the as how you can filter data in Realtime
-        dart: |
-          ```dart
-          supabase.from('countries')
-            .stream(primaryKey: ['id'])
-            .eq('id', '120')
-            .listen((List<Map<String, dynamic>> data) {
-            // Do something awesome with the data
-          });
-          ```
-      - name: With `order()`
-        dart: |
-          ```dart
-          supabase.from('countries')
-            .stream(primaryKey: ['id'])
-            .order('name', ascending: true)
-            .listen((List<Map<String, dynamic>> data) {
-            // Do something awesome with the data
-          });
-          ```
-      - name: With `limit()`
-        dart: |
-          ```dart
-          supabase.from('countries')
-            .stream(primaryKey: ['id'])
-            .order('name', ascending: true)
-            .limit(10)
-            .listen((List<Map<String, dynamic>> data) {
-            // Do something awesome with the data
-          });
-          ```
-      - name: Using `stream()` with `StreamBuilder`
-        description: |
-          When using `stream()` with a `StreamBuilder` within your Flutter application, make sure to store your stream in a variable to prevent refetching upon rebuilding.
-        dart: |
-          ```dart
-          final supabase = Supabase.instance.client;
-
-          class MyWidget extends StatefulWidget {
-            const MyWidget({Key? key}) : super(key: key);
-
-            @override
-            State<MyWidget> createState() => _MyWidgetState();
-          }
-
-          class _MyWidgetState extends State<MyWidget> {
-            // Persist the stream in a local variable to prevent refetching upon rebuilds
-            final _stream = supabase.from('countries').stream(primaryKey: ['id']);
-
-            @override
-            Widget build(BuildContext context) {
-              return StreamBuilder(
-                stream: _stream,
-                builder: (context, snapshot) {
-                  // Return your widget with the data from the snapshot
-                },
-              );
-            }
-          }
-          ```
-
-  storage.listBuckets():
-    description: |
-      Retrieves the details of all Storage buckets within an existing product.
-    title: 'listBuckets()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` 
-        - `objects` permissions: none
-    examples:
-      - name: List buckets
-        isSpotlight: true
-        dart: |
-          ```dart
-          final List<Bucket> buckets = await supabase
-            .storage
-            .listBuckets();
-          ```
-
-  storage.getBucket():
-    description: |
-      Retrieves the details of an existing Storage bucket.
-    title: 'getBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` 
-        - `objects` permissions: none
-    examples:
-      - name: Get bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final Bucket bucket = await supabase
-            .storage
-            .getBucket('avatars');
-          ```
-
-  storage.createBucket():
-    description: |
-      Creates a new Storage bucket
-    title: 'createBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `insert` 
-        - `objects` permissions: none
-    examples:
-      - name: Create bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final String bucketId = await supabase
-            .storage
-            .createBucket('avatars');
-          ```
-
-  storage.emptyBucket():
-    description: |
-      Removes all objects inside a single bucket.
-    title: 'emptyBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` 
-        - `objects` permissions: `select` and `delete`
-    examples:
-      - name: Empty bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final String result = await supabase
-            .storage
-            .emptyBucket('avatars');
-          ```
-  storage.updateBucket():
-    description: |
-      Updates a new Storage bucket
-    title: 'updateBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `update`
-        - `objects` permissions: none
-    examples:
-      - name: Update bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final res = await supabase
-            .storage
-            .updateBucket('avatars', const BucketOptions(public: false));
-          ```
-
-  storage.deleteBucket():
-    description: |
-      Deletes an existing bucket. A bucket can't be deleted with existing objects inside it. You must first `empty()` the bucket.
-    title: 'deleteBucket()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` and `delete`
-        - `objects` permissions: none
-    examples:
-      - name: Delete bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final String result = await supabase
-            .storage
-            .deleteBucket('avatars');
-          ```
-
-  storage.from.upload():
-    description: |
-      Uploads a file to an existing bucket.
-    title: 'from.upload()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `insert`
-    examples:
-      - name: Upload file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final avatarFile = File('path/to/file');
-          final String path = await supabase.storage.from('avatars').upload(
-                'public/avatar1.png',
-                avatarFile,
-                fileOptions: const FileOptions(cacheControl: '3600', upsert: false),
-              );
-          ```
-
-  storage.from.update():
-    description: |
-      Replaces an existing file at the specified path with a new one.
-    title: 'from.update()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `update` and `select`
-    examples:
-      - name: Update file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final avatarFile = File('path/to/local/file');
-          final String path = await supabase.storage.from('avatars').update(
-                'public/avatar1.png',
-                avatarFile,
-                fileOptions: const FileOptions(cacheControl: '3600', upsert: false),
-              );
-          ```
-
-  storage.from.move():
-    description: |
-      Moves an existing file, optionally renaming it at the same time.
-    title: 'from.move()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `update` and `select`
-    examples:
-      - name: Move file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final String result = await supabase
-            .storage
-            .from('avatars')
-            .move('public/avatar1.png', 'private/avatar2.png');
-          ```
-
-  storage.from.createSignedUrl():
-    description: |
-      Create signed url to download file without requiring permissions. This URL can be valid for a set number of seconds.
-    title: 'from.createSignedUrl()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `select`
-    examples:
-      - name: Create Signed URL
-        isSpotlight: true
-        dart: |
-          ```dart
-            final String signedUrl = await supabase
-              .storage
-              .from('avatars')
-              .createSignedUrl('avatar1.png', 60);
-          ```
-
-  storage.from.createSignedUrls():
-    title: 'from.createSignedUrls()'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Create Signed URLs
-        isSpotlight: true
-        dart: |
-          ```dart
-            final List<String> signedUrls = await supabase
-              .storage
-              .from('avatars')
-              .createSignedUrls(['folder/avatar1.png', 'folder/avatar2.png'], 60);
-          ```
-
-  storage.from.getPublicUrl():
-    description: |
-      Retrieve URLs for assets in public buckets
-    title: 'from.getPublicUrl()'
-    notes: |
-      - The bucket needs to be set to public, either via [updateBucket()](/docs/reference/javascript/storage-updatebucket) or by going to Storage on [app.supabase.com](https://app.supabase.com), clicking the overflow menu on a bucket and choosing "Make public"
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: none
-    examples:
-      - name: Returns the URL for an asset in a public bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-            final String publicUrl = supabase
-              .storage
-              .from('public-bucket')
-              .getPublicUrl('avatar1.png');
-          ```
-
-  storage.from.download():
-    description: |
-      Downloads a file.
-    title: 'from.download()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `select`
-    examples:
-      - name: Download file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final Uint8List file = await supabase
-            .storage
-            .from('avatars')
-            .download('avatar1.png');
-          ```
-
-  storage.from.remove():
-    description: |
-      Deletes files within the same bucket
-    title: 'from.remove()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `delete` and `select`
-    examples:
-      - name: Delete file
-        isSpotlight: true
-        dart: |
-          ```dart
-          final List<FileObject> objects = await supabase
-            .storage
-            .from('avatars')
-            .remove(['avatar1.png']);
-          ```
-
-  storage.from.list():
-    description: |
-      Lists all the files within a bucket.
-    title: 'from.list()'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none 
-        - `objects` permissions: `select`
-    examples:
-      - name: List files in a bucket
-        isSpotlight: true
-        dart: |
-          ```dart
-          final List<FileObject> objects = await supabase
-            .storage
-            .from('avatars')
-            .list();
-          ```
-  Using Modifiers:
-    description: |
-      Filters work on the row level—they allow you to return rows that
-      only match certain conditions without changing the shape of the rows.
-      Modifiers are everything that don't fit that definition—allowing you to
-      change the format of the response (e.g., returning a CSV string).
-
-      Modifiers must be specified after filters. Some modifiers only apply for
-      queries that return rows (e.g., `select()` or `rpc()` on a function that
-      returns a table response).
-
-  limit():
-    description: |
-      Limits the result with the specified count.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .limit(1);
-          ```
-      - name: With embedded resources
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, cities(name)')
-            .eq('name', 'United States')
-            .limit(1,  foreignTable: 'cities' );
-          ```
-
-  order():
-    description: |
-      Orders the result with the specified column.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .order('id',  ascending: false );
-          ```
-      - name: With embedded resources
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, cities(name)')
-            .eq('name', 'United States')
-            .order('name', foreignTable: 'cities');
-          ```
-
-  range():
-    description: |
-      Limits the result to rows within the specified range, inclusive.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .range(0,3);
-          ```
-
-  single():
-    description: |
-      Retrieves only one row from the result. Result must be one row (e.g. using limit), otherwise this will result in an error.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .single();
-          ```
-
-  Using Filters:
-    description: |
-      Filters allow you to only return rows that match certain conditions.
-
-      Filters can be used on `select()`, `update()`, and `delete()` queries. 
-
-      If a Database function returns a table response, you can also apply filters.
-
-      ### Applying Filters
-
-      Filters must be applied after any of `select()`, `update()`, `upsert()`,
-      `delete()`, and `rpc()` and before
-      [modifiers](/docs/reference/dart/using-modifiers).
-
-      ```dart
-      final data = await supabase
-        .from('cities')
-        .select('name, country_id')
-        .eq('name', 'The Shire');    // Correct
-
-      final data = await supabase
-        .from('cities')
-        .eq('name', 'The Shire')    // Incorrect
-        .select('name, country_id');
-      ```
-
-      ### Chaining
-
-      Filters can be chained together to produce advanced queries. For example,
-      to query cities with population between 1,000 and 10,000:
-
-      ```dart
-      final data = await supabase
-        .from('cities')
-        .select('name, country_id')
-        .gte('population', 1000)
-        .lt('population', 10000);
-      ```
-
-      ### Conditional Chaining
-
-      Filters can be built up one step at a time and then executed. For example:
-
-      ```dart
-      final filterByName = null;
-      final filterPopLow = 1000;
-      final filterPopHigh = 10000;
-
-      var query = supabase
-        .from('cities')
-        .select('name, country_id');
-
-      if (filterByName != null)  { query = query.eq('name', filterByName); }
-      if (filterPopLow != null)  { query = query.gte('population', filterPopLow); }
-      if (filterPopHigh != null) { query = query.lt('population', filterPopHigh); }
-
-      final data = await query;
-      ```
-
-      ### Filter by values within a JSON column
-
-      <Tabs>
-      <TabItem value="schema" label="Schema">
-
-        ```sql
-        create table
-          users (
-            id int8 primary key,
-            name text,
-            address jsonb
-          );
-
-        insert into
-          users (id, name, address)
-        values
-          (1, 'Michael', '{ "postcode": 90210 }'),
-          (2, 'Jane', null);
-        ```
-
-      </TabItem>
-      <TabItem default value="dart" label="Flutter">
-
-        ```dart
-        final data = await supabase
-          .from('users')
-          .select()
-          .eq('address->postcode', 90210);
-        ```
-
-      </TabItem>
-      <TabItem value="result" label="Result">
-
-        ```json
-        {
-          "data": [
-            {
-              "id": 1,
-              "name": "Michael",
-              "address": {
-                "postcode": 90210
-              }
-            }
-          ],
-          "status": 200,
-          "statusText": "OK"
-        }
-        ```
-
-      </TabItem>
-      </Tabs>
-
-      ### Filter Foreign Tables
-
-      You can filter on foreign tables in your `select()` query using dot
-      notation:
-
-      <Tabs>
-      <TabItem value="schema" label="Schema">
-
-        ```sql
-        create table
-          countries (id int8 primary key, name text);
-        create table
-          cities (
-            id int8 primary key,
-            country_id int8 not null references countries,
-            name text
-          );
-
-        insert into
-          countries (id, name)
-        values
-          (1, 'Germany'),
-          (2, 'Indonesia');
-        insert into
-          cities (id, country_id, name)
-        values
-          (1, 2, 'Bali'),
-          (2, 1, 'Munich');
-        ```
-
-      </TabItem>
-      <TabItem default value="dart" label="Flutter">
-
-        ```dart
-        final data = await supabase
-          .from('countries')
-          .select('''
-            name,
-            cities!inner (
-              name
-            )
-          ''')
-          .eq('cities.name', 'Bali');
-        ```
-
-      </TabItem>
-      <TabItem value="result" label="Result">
-
-        ```json
-        {
-          "data": [
-            {
-              "name": "Indonesia",
-              "cities": [
-                {
-                  "name": "Bali"
-                }
-              ]
-            }
-          ],
-          "status": 200,
-          "statusText": "OK"
-        }
-        ```
-
-      </TabItem>
-      </Tabs>
-
-  .or():
-    description: |
-      Finds all rows satisfying at least one of the filters.
-    notes: |
-      - `.or()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values.
-
-        ```dart
-        .or('id.in.(6,7),arraycol.cs.{"a","b"}')  // Use Postgres list () and 'in' for in_ filter. Array {} and 'cs' for contains.
-        .or('id.in.(${mylist.join(',')}),arraycol.cs.{${mylistArray.join(',')}}')	// You can insert a Dart list for list or array column.
-        .or('id.in.(${mylist.join(',')}),rangecol.cs.(${mylistRange.join(',')}]')	// You can insert a Dart list for list or range column.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .or('id.eq.20,id.eq.30');
-          ```
-      - name: Use `or` with `and`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .or('id.gt.20,and(name.eq.New Zealand,name.eq.France)');
-          ```
-
-  .not():
-    description: |
-      Finds all rows which doesn't satisfy the filter.
-    notes: |
-      - `.not()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values.
-
-        ```dart
-        .not('name','eq','Paris')
-        .not('arraycol','cs','{"a","b"}') // Use Postgres array {} for array column and 'cs' for contains.
-        .not('rangecol','cs','(1,2]') // Use Postgres range syntax for range column.
-        .not('id','in','(6,7)')  // Use Postgres list () and 'in' for in_ filter.
-        .not('id','in','(${mylist.join(',')})')  // You can insert a Dart list array.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .not('name', 'eq', 'Paris');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .not('name', 'eq', 'Paris');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .not('name', 'eq', 'Paris');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities)
-            .not('name', 'eq', 'Paris');
-          ```
-
-  .match():
-    description: |
-      Finds all rows whose columns match the specified `query` object.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .match({'name': 'Beijing', 'country_id': 156});
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .match({'name': 'Beijing', 'country_id': 156});
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .match({'name': 'Beijing', 'country_id': 156});
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .match({'name': 'Beijing', 'country_id': 156});
-          ```
-
-  .eq():
-    description: |
-      Finds all rows whose value on the stated `column` exactly matches the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .eq('name', 'The shire');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .eq('name', 'San Francisco');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .eq('name', 'Mordor');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .eq('name', 'San Francisco');
-          ```
-
-  .neq():
-    description: |
-      Finds all rows whose value on the stated `column` doesn't match the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .neq('name', 'The shire');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .neq('name', 'San Francisco');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .neq('name', 'Mordor');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .neq('name', 'Lagos');
-          ```
-
-  .gt():
-    description: |
-      Finds all rows whose value on the stated `column` is greater than the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .gt('country_id', 250);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .gt('country_id', 250);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .gt('country_id', 250);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .gt('country_id', 250);
-          ```
-
-  .gte():
-    description: |
-      Finds all rows whose value on the stated `column` is greater than or equal to the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .gte('country_id', 250);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .gte('country_id', 250);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .gte('country_id', 250);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .gte('country_id', 250);
-          ```
-
-  .lt():
-    description: |
-      Finds all rows whose value on the stated `column` is less than the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .lt('country_id', 250);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .lt('country_id', 250);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .lt('country_id', 250);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .lt('country_id', 250);
-          ```
-
-  .lte():
-    description: |
-      Finds all rows whose value on the stated `column` is less than or equal to the specified `value`.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .lte('country_id', 250);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .lte('country_id', 250);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .lte('country_id', 250);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .lte('country_id', 250);
-          ```
-
-  .like():
-    description: |
-      Finds all rows whose value in the stated `column` matches the supplied `pattern` (case sensitive).
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .like('name', '%la%');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .like('name', '%la%');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .like('name', '%la%');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .like('name', '%la%');
-          ```
-
-  .ilike():
-    description: |
-      Finds all rows whose value in the stated `column` matches the supplied `pattern` (case insensitive).
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .ilike('name', '%la%');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .ilike('name', '%la%');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .ilike('name', '%la%');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .ilike('name', '%la%');
-          ```
-
-  .is_():
-    description: |
-      A check for exact equality (null, true, false), finds all rows whose value on the stated `column` exactly match the specified `value`.
-
-      `is_` and `in_` filter methods are suffixed with `_` to avoid collisions with reserved keywords.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .is_('name', null);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .is_('name', null);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .is_('name', null);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .is_('name', null);
-          ```
-
-  .in_():
-    description: |
-      Finds all rows whose value on the stated `column` is found on the specified `values`.
-
-      `is_` and `in_` filter methods are suffixed with `_` to avoid collisions with reserved keywords.
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .in_('name', ['Rio de Janeiro', 'San Francisco']);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .in_('name', ['Rio de Janeiro', 'San Francisco']);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .in_('name', ['Rio de Janeiro', 'San Francisco']);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .in_('name', ['Rio de Janeiro', 'San Francisco']);
-          ```
-
-  .contains():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .contains('main_exports', ['oil']);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .contains('main_exports', ['oil']);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .delete()
-            .contains('main_exports', ['oil']);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_countries')
-            .contains('main_exports', ['oil']);
-          ```
-
-  .containedBy():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .containedBy('main_exports', ['cars', 'food', 'machine']);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .containedBy('main_exports', ['orks', 'surveillance', 'evil']);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .delete()
-            .containedBy('main_exports', ['cars', 'food', 'machine']);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_countries')
-            .containedBy('main_exports', ['cars', 'food', 'machine']);
-          ```
-
-  .rangeLt():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeLt('population_range_millions', '[150, 250]');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeLt('population_range_millions', '[150, 250]');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .delete()
-            .rangeLt('population_range_millions', '[150, 250]');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_countries')
-            .rangeLt('population_range_millions', '[150, 250]');
-          ```
-
-  .rangeGt():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeGt('population_range_millions', '[150, 250]');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeGt('population_range_millions', '[150, 250]');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .delete()
-            .rangeGt('population_range_millions', '[150, 250]');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_countries')
-            .rangeGt('population_range_millions', '[150, 250]');
-          ```
-
-  .rangeGte():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeGte('population_range_millions', '[150, 250]');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeGte('population_range_millions', '[150, 250]');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .delete()
-            .rangeGte('population_range_millions', '[150, 250]');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_countries')
-            .rangeGte('population_range_millions', '[150, 250]');
-          ```
-
-  .rangeLte():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeLte('population_range_millions', '[150, 250]');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeLte('population_range_millions', '[150, 250]');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .delete()
-            .rangeLte('population_range_millions', '[150, 250]');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_countries')
-            .rangeLte('population_range_millions', [150, 250]);
-          ```
-
-  .rangeAdjacent():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeAdjacent('population_range_millions', '[70, 185]');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .rangeAdjacent('population_range_millions', '[70, 185]');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .delete()
-            .rangeAdjacent('population_range_millions', '[70, 185]');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_countries')
-            .rangeAdjacent('population_range_millions', '[70, 185]');
-          ```
-
-  .overlaps():
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .overlaps('main_exports', ['computers', 'minerals']);
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .update({ 'name': 'Mordor' })
-            .overlaps('main_exports', ['computers', 'minerals']);
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('countries')
-            .delete()
-            .overlaps('main_exports', ['computers', 'minerals']);
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_countries')
-            .overlaps('main_exports', ['computers', 'minerals']);
-          ```
-
-  .textSearch():
-    description: |
-      Finds all rows whose tsvector value on the stated `column` matches to_tsquery(query).
-    examples:
-      - name: Text search
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', "'fat' & 'cat'", 
-              config: 'english' 
-            );
-          ```
-      - name: Basic normalization
-        description: Uses PostgreSQL's `plainto_tsquery` function.
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', "'fat' & 'cat'",  
-              type: TextSearchType.plain,
-              config: 'english' 
-            );
-          ```
-      - name: Full normalization
-        description: Uses PostgreSQL's `phraseto_tsquery` function.
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', "'fat' & 'cat'",  
-              type: TextSearchType.phrase,
-              config: 'english' 
-            );
-          ```
-      - name: Full normalization
-        description: |
-          Uses PostgreSQL's `websearch_to_tsquery` function. 
-          This function will never raise syntax errors, which makes it possible to use raw user-supplied input for search, and can be used 
-          with advanced operators.
-
-          - `unquoted text`: text not inside quote marks will be converted to terms separated by & operators, as if processed by plainto_tsquery.
-          - `"quoted text"`: text inside quote marks will be converted to terms separated by <-> operators, as if processed by phraseto_tsquery.
-          - `OR`: the word “or” will be converted to the | operator.
-          - `-`: a dash will be converted to the ! operator.
-
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', "'fat or cat'",  
-              type: TextSearchType.websearch,
-              config: 'english'
-            );
-          ```
-
-  .filter():
-    description: |
-      Finds all rows whose `column` satisfies the filter.
-    notes: |
-      - `.filter()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values, so it should only be used as an escape hatch in case other filters don't work.
-        ```dart
-          .filter('arraycol','cs','{"a","b"}') // Use Postgres array {} and 'cs' for contains.
-          .filter('rangecol','cs','(1,2]') // Use Postgres range syntax for range column.
-          .filter('id','in','(6,7)')  // Use Postgres list () and 'in' for in_ filter.
-          .filter('id','cs','{${mylist.join(',')}}')  // You can insert a Dart array list.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .filter('name', 'in', '("Paris","Tokyo")');
-          ```
-      - name: With `update()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .update({ 'name': 'Mordor' })
-            .filter('name', 'in', '("Paris","Tokyo")');
-          ```
-      - name: With `delete()`
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .delete()
-            .filter('name', 'in', '("Paris","Tokyo")');
-          ```
-      - name: With `rpc()`
-        dart: |
-          ```dart
-          // Only valid if the Stored Procedure returns a table type.
-          final data = await supabase
-            .rpc('echo_all_cities')
-            .filter('name', 'in', '("Paris","Tokyo")');
-          ```
-      - name: Filter embedded resources
-        dart: |
-          ```dart
-          final data = await supabase
-            .from('cities')
-            .select('name, countries ( name )')
-            .filter('countries.name', 'in', '("France","Japan")');
-          ```
diff --git a/spec/supabase_js_v1--old.yml b/spec/supabase_js_v1--old.yml
deleted file mode 100644
index 0daa83daa92..00000000000
--- a/spec/supabase_js_v1--old.yml
+++ /dev/null
@@ -1,2533 +0,0 @@
-openref: 0.1
-
-info:
-  id: reference/supabase-js
-  title: Supabase Client
-  description: |
-
-    Supabase JavaScript.
-
-  definition: ../../spec/enrichments/tsdoc_v1/combined.json
-  specUrl: https://github.com/supabase/supabase/edit/master/spec/supabase_js_v1.yml
-  slugPrefix: '/'
-  libraries:
-    - name: 'JavaScript'
-      id: 'js'
-      version: '0.0.1'
-
-pages:
-  auth.signUp():
-    title: 'signUp()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.signUp'
-    notes: |
-      - By default, the user will need to verify their email address before logging in. If you would like to change this, you can disable "Email Confirmations" by going to Authentication -> Settings on [app.supabase.com](https://app.supabase.com)
-      - If "Email Confirmations" is turned on, a `user` is returned but `session` will be null
-      - If "Email Confirmations" is turned off, both a `user` and a `session` will be returned
-      - When the user confirms their email address, they will be redirected to localhost:3000 by default. To change this, you can go to Authentication -> Settings on [app.supabase.com](https://app.supabase.com)
-      - If signUp() is called for an existing confirmed user:
-          - If "Enable email confirmations" is enabled on the "Authentication" -> "Settings" page, an obfuscated / fake user object will be returned.
-          - If "Enable email confirmations" is disabled, an error with a message "User already registered" will be returned.
-      - To check if a user already exists, refer to getUser().
-    examples:
-      - name: Sign up.
-        isSpotlight: true
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signUp({
-            email: 'example@email.com',
-            password: 'example-password',
-          })
-          ```
-      - name: Sign up with additional user meta data.
-        isSpotlight: true
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signUp(
-            {
-              email: 'example@email.com',
-              password: 'example-password',
-            },
-            {
-              data: {
-                first_name: 'John',
-                age: 27,
-              }
-            }
-          )
-          ```
-      - name: Sign up with third-party providers.
-        hideCodeBlock: true
-        description: |
-          You can sign up with OAuth providers using the [`signIn()`](/docs/reference/javascript/v1/auth-signin#sign-in-using-third-party-providers) method.
-      - name: Sign up with Phone.
-        description: |
-          Supabase supports Phone Auth. After a user has verified their number, they can use the [`signIn()`](/docs/reference/javascript/v1/auth-signin#sign-in-using-phone) method.
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signUp({
-            phone: '+13334445555',
-            password: 'some-password',
-          })
-
-          // After receiving an SMS with One Time Password.
-          let { session, error } = await supabase.auth.verifyOTP({
-            phone: '+13334445555',
-            token: '123456',
-          })
-          ```
-
-  auth.signIn():
-    title: 'signIn()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.signIn'
-    notes: |
-      - A user can sign up either via email or OAuth.
-      - If you provide `email` without a `password`, the user will be sent a magic link.
-      - The magic link's destination URL is determined by the SITE_URL config variable. To change this, you can go to Authentication -> Settings on [app.supabase.com](https://app.supabase.com)
-      - Specifying a `provider` will open the browser to the relevant login page.
-    examples:
-      - name: Sign in with email.
-        isSpotlight: true
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signIn({
-            email: 'example@email.com',
-            password: 'example-password',
-          })
-          ```
-      - name: Sign in with magic link.
-        description: If no password is provided, the user will be sent a "magic link" to their email address, which they can click to open your application with a valid session. By default, a given user can only request a Magic Link once every 60 seconds.
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signIn({
-            email: 'example@email.com'
-          })
-          ```
-      - name: Sign in using third-party providers.
-        description: Supabase supports many different [third-party providers](https://supabase.com/docs/guides/auth#providers).
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signIn({
-            // provider can be 'github', 'google', 'gitlab', and more
-            provider: 'github'
-          })
-          ```
-      - name: Sign in with Phone.
-        description: Supabase supports Phone Auth.
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signIn({
-            phone: '+13334445555',
-            password: 'some-password',
-          })
-          ```
-      - name: Sign in with redirect.
-        description: |
-          Note that the `redirectTo` param is only relevant for OAuth logins, where the login flow is managed by
-          the Auth server. If you are using email/phone logins you should set up your own redirects (within the email/sms template).
-
-          Sometimes you want to control where the user is redirected to after they are logged in. Supabase supports this for
-          any URL path on your website (the URL must either be on the same domain as your Site URL [see Auth>Settings in dashboard], or must match one of the Additional Redirect URLs [also in Auth>Settings]).
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signIn({
-            provider: 'github'
-          }, {
-            redirectTo: 'https://example.com/welcome'
-          })
-          ```
-      - name: Sign in with scopes.
-        description: |
-          If you need additional data from an OAuth provider, you can include a space-separated list of scopes in your request to get back an OAuth provider token.
-          You may also need to specify the scopes in the provider's OAuth app settings, depending on the provider.
-        js: |
-          ```js
-          const { user, session, error } = await supabase.auth.signIn({
-            provider: 'github'
-          }, {
-            scopes: 'repo gist notifications'
-          })
-          const oAuthToken = session.provider_token // use to access provider API
-          ```
-      - name: Sign in using a refresh token (e.g. in React Native).
-        description: |
-          If you are completing a sign up or login in a React Native app you can pass the refresh token obtained from the provider to obtain a session.
-        js: |
-          ```js
-          // An example using Expo's `AuthSession`
-          const redirectUri = AuthSession.makeRedirectUri({ useProxy: false });
-          const provider = 'google';
-
-          AuthSession.startAsync({
-            authUrl: `https://MYSUPABASEAPP.supabase.co/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`,
-            returnUrl: redirectUri,
-          }).then(async (response: any) => {
-            if (!response) return;
-            const { user, session, error } = await supabase.auth.signIn({
-              refreshToken: response.params?.refresh_token,
-            });
-          });
-          ```
-
-  auth.signOut():
-    title: 'signOut()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.signOut'
-    examples:
-      - name: Sign out
-        isSpotlight: true
-        js: |
-          ```js
-          const { error } = await supabase.auth.signOut()
-          ```
-
-  auth.session():
-    title: 'session()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.session'
-    examples:
-      - name: Get the session data
-        isSpotlight: true
-        js: |
-          ```js
-          const session = supabase.auth.session()
-          ```
-
-  auth.user():
-    title: 'user()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.user'
-    notes: |
-      This method gets the user object from memory.
-    examples:
-      - name: Get the logged in user
-        isSpotlight: true
-        js: |
-          ```js
-          const user = supabase.auth.user()
-          ```
-
-  auth.update():
-    title: 'update()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.update'
-    notes: |
-      User email: By Default, email updates sends a confirmation link to both the user's current and new email.
-      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/settings).
-
-      User metadata: It's generally better to store user data in a table within your public schema (i.e., `public.users`).
-      Use the `update()` method if you have data which rarely changes or is specific only to the logged in user.
-    examples:
-      - name: Update the email for an authenticated user
-        description: Sends a "Confirm Email Change" email to the new email address.
-        isSpotlight: true
-        js: |
-          ```js
-          const { user, error } = await supabase.auth.update({email: 'new@email.com'})
-          ```
-      - name: Update the password for an authenticated user
-        isSpotlight: true
-        js: |
-          ```js
-          const { user, error } = await supabase.auth.update({password: 'new password'})
-          ```
-      - name: Update the user's metadata
-        isSpotlight: true
-        js: |
-          ```js
-          const { user, error } = await supabase.auth.update({
-            data: { hello: 'world' }
-          })
-          ```
-
-  auth.setAuth():
-    title: 'setAuth()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.setAuth'
-    examples:
-      - name: Basic example.
-        description: This is most useful on server-side functions where you cannot log the user in, but have access to the user's access token.
-        isSpotlight: true
-        js: |
-          ```js
-          function apiFunction(req, res) {
-            // Assuming the access token was sent as a header "X-Supabase-Auth"
-            const { access_token } = req.get('X-Supabase-Auth')
-
-            // You can now use it within a Supabase Client
-            const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key")
-            const { user, error } = supabase.auth.setAuth(access_token)
-
-            // This client will now send requests as this user
-            const { data } = await supabase.from('your_table').select()
-          }
-          ```
-      - name: With Express.
-        isSpotlight: true
-        js: |
-          ```js
-
-          /**
-          * Make a request from the client to your server function
-          */
-          async function makeApiRequest() {
-            const token = newClient.session()?.access_token
-
-            await fetch('https://example.com/withAuth', {
-               method: 'GET',
-               withCredentials: true,
-               credentials: 'include',
-               headers: {
-                'Content-Type': 'application/json',
-                'Authorization': bearer, // Your own auth
-                'X-Supabase-Auth': token, // Set the Supabase user
-               }
-            })
-          }
-
-          /**
-          * Use the Auth token in your server-side function.
-          */
-          async function apiFunction(req, res) {
-            const { access_token } = req.get('X-Supabase-Auth')
-
-            // You can now use it within a Supabase Client
-            const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key")
-            const { user, error } = supabase.auth.setAuth(access_token)
-
-            // This client will now send requests as this user
-            const { data } = await supabase.from('your_table').select()
-          }
-          ```
-
-  auth.onAuthStateChange():
-    title: 'onAuthStateChange()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.onAuthStateChange'
-    examples:
-      - name: Listen to auth changes
-        isSpotlight: true
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            console.log(event, session)
-          })
-          ```
-      - name: Listen to sign in
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'SIGNED_IN') console.log('SIGNED_IN', session)
-          })
-          ```
-      - name: Listen to sign out
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'SIGNED_OUT') console.log('SIGNED_OUT', session)
-          })
-          ```
-      - name: Listen to token refresh
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'TOKEN_REFRESHED') console.log('TOKEN_REFRESHED', session)
-          })
-          ```
-      - name: Listen to user updates
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'USER_UPDATED') console.log('USER_UPDATED', session)
-          })
-          ```
-      - name: Listen to user deleted
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'USER_DELETED') console.log('USER_DELETED', session)
-          })
-          ```
-      - name: Listen to password recovery events
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'PASSWORD_RECOVERY') console.log('PASSWORD_RECOVERY', session)
-          })
-          ```
-  auth.api.getUser():
-    title: 'getUser()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.getUser'
-    notes: |
-      - Fetches the user object from the database instead of local storage.
-      - Note that user() fetches the user object from local storage which might not be the most updated.
-      - Requires the user's access_token.
-    examples:
-      - name: Fetch the user object using the access_token jwt.
-        isSpotlight: true
-        js: |
-          ```js
-          const { user, error } = await supabase.auth.api.getUser(
-            'ACCESS_TOKEN_JWT',
-          )
-          ```
-
-  auth.api.listUsers():
-    title: 'listUsers()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.listUsers'
-    notes: |
-      - Requires a `service_role` key.
-      - This function should be called on a server. Never expose your `service_role` key in the browser.
-    examples:
-      - name: Get a full list of users.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.listUsers()
-          ```
-
-  auth.api.createUser():
-    title: 'createUser()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.createUser'
-    notes: |
-      - Requires a `service_role` key.
-      - This function should be called on a server. Never expose your `service_role` key in the browser.
-      - If you do not provide the `email_confirm` and `phone_confirm` options to this function, both will default to false.
-    examples:
-      - name: Create a new user.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.createUser({
-            email: 'user@email.com',
-            password: 'password',
-            user_metadata: { name: 'Yoda' }
-          })
-          ```
-      - name: Auto-confirm email.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.createUser({
-            email: 'user@email.com',
-            email_confirm: true
-          })
-          ```
-      - name: Auto-confirm phone.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.createUser({
-            phone: '1234567890',
-            phone_confirm: true
-          })
-          ```
-
-  auth.api.deleteUser():
-    title: 'deleteUser()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.deleteUser'
-    notes: |
-      - Requires a `service_role` key.
-      - This function should be called on a server. Never expose your `service_role` key in the browser.
-    examples:
-      - name: Remove a user completely.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.deleteUser(
-            '715ed5db-f090-4b8c-a067-640ecee36aa0'
-          )
-          ```
-
-  auth.api.inviteUserByEmail():
-    title: 'inviteUserByEmail()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.inviteUserByEmail'
-    notes: |
-      - Requires a `service_role` key.
-      - This function should only be called on a server. Never expose your `service_role` key in the browser.
-    examples:
-      - name: Basic example.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth
-            .api
-            .inviteUserByEmail('email@example.com')
-          ```
-
-  auth.api.sendMobileOTP():
-    title: 'sendMobileOTP()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.sendMobileOTP'
-    notes: |
-      - Requires a `service_role` key.
-      - This function should only be called on a server. Never expose your `service_role` key in the browser.
-    examples:
-      - name: Basic example.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth
-            .api
-            .sendMobileOTP('12345879')
-          ```
-
-  auth.api.resetPasswordForEmail():
-    title: 'resetPasswordForEmail()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.resetPasswordForEmail'
-    notes: |
-      Sends a password reset request to an email address.
-      When the user clicks the reset link in the email they are redirected back to your application.
-      Prompt the user for a new password and call `auth.update()`:
-      ```js
-      const { data, error } = await supabase.auth.update({
-        password: new_password,
-      })
-      ```
-    examples:
-      - name: Reset password
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.api.resetPasswordForEmail(
-            'user@email.com'
-          )
-          ```
-      - name: Reset password (React)
-        isSpotlight: true
-        js: |
-          ```js
-          /**
-           * Step 1: Send the user an email to get a password reset token.
-           * This email contains a link which sends the user back to your application.
-           */
-          const { data, error } = await supabase.auth.api.resetPasswordForEmail(
-            'user@email.com'
-          )
-
-          /**
-           * Step 2: Once the user is redirected back to your application,
-           * ask the user to reset their password.
-           */
-          useEffect(() => {
-            supabase.auth.onAuthStateChange(async (event, session) => {
-              if (event == "PASSWORD_RECOVERY") {
-                const newPassword = prompt("What would you like your new password to be?");
-                const { data, error } = await supabase.auth.update({
-                  password: newPassword,
-                })
-
-                if (data) alert("Password updated successfully!")
-                if (error) alert("There was an error updating your password.")
-              }
-            })
-          }, [])
-          ```
-
-  auth.api.generateLink():
-    title: 'generateLink()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.generateLink'
-    notes: |
-      - Requires a `service_role` key.
-      - This function should only be called on a server. Never expose your `service_role` key in the browser.
-    examples:
-      - name: Generate an invite link
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.generateLink(
-            'invite',
-            'email@example.com'
-          )
-          ```
-
-  auth.api.updateUserById():
-    title: 'updateUserById()'
-    $ref: '@supabase/gotrue-js.GoTrueApi.updateUserById'
-    notes: |
-      - Requires a `service_role` key.
-      - This function should only be called on a server. Never expose your `service_role` key in the browser.
-    examples:
-      - name: Updates a user's email.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { email: 'new@email.com' }
-          )
-          ```
-      - name: Updates a user's password.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { password: 'new_password' }
-          )
-          ```
-      - name: Updates a user's metadata.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { user_metadata: { hello: 'world' } }
-          )
-          ```
-      - name: Updates a user's app_metadata.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { app_metadata: { plan: 'trial' } }
-          )
-          ```
-      - name: Confirms a user's email address.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { email_confirm: true }
-          )
-          ```
-      - name: Confirms a user's phone number.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.api.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { phone_confirm: true }
-          )
-          ```
-  invoke():
-    title: 'invoke()'
-    description: |
-      Invokes a Supabase Function.
-    $ref: '@supabase/functions-js.FunctionsClient.invoke'
-    notes: |
-      - Requires an Authorization header.
-      - Invoke params generally match the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) spec.
-    examples:
-      - name: Basic invocation.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.functions.invoke('hello', {
-            body: JSON.stringify({ foo: 'bar' })
-          })
-          ```
-      - name: Specifying response type.
-        description: |
-          By default, `invoke()` will parse the response as JSON. You can parse the response in the following formats: `json`, `blob`, `text`, and `arrayBuffer`.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.functions.invoke('hello', {
-            responseType: 'text',
-            body: JSON.stringify({ foo: 'bar' })
-          })
-          ```
-      - name: Parsing custom headers.
-        description: |
-          You can pass custom headers to your function. Note: supabase-js automatically passes the `Authorization` header with the signed in user's JWT.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.functions.invoke('hello', {
-            headers: {
-              "my-custom-header": 'my-custom-header-value'
-            },
-            body: JSON.stringify({ foo: 'bar' })
-          })
-          ```
-
-  select():
-    title: 'Fetch data: select()'
-    $ref: '@supabase/postgrest-js."lib/PostgrestQueryBuilder".PostgrestQueryBuilder.select'
-    notes: |
-      - By default, Supabase projects will return a maximum of 1,000 rows. This setting can be changed in Project API Settings. It's recommended that you keep it low to limit the payload size of accidental or malicious requests. You can use `range()` queries to paginate through your data.
-      - `select()` can be combined with [Modifiers](/docs/reference/javascript/using-modifiers)
-      - `select()` can be combined with [Filters](/docs/reference/javascript/using-filters)
-      - If using the Supabase hosted platform `apikey` is technically a reserved keyword, since the API gateway will pluck it out for authentication. [It should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
-    examples:
-      - name: Getting your data
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select()
-          ```
-      - name: Selecting specific columns
-        description: You can select specific fields from your tables.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name')
-          ```
-      - name: Query foreign tables
-        description: If your database has foreign key relationships, you can query related tables too.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select(`
-              name,
-              cities (
-                name
-              )
-            `)
-          ```
-        note: |
-          What about join tables
-          If you're in a situation where your tables are **NOT** directly related, but instead are joined by a _join table_,
-          you can still use the `select()` method to query the related data. The PostgREST engine detects the relationship automatically.
-          For more details, [follow the link](https://postgrest.org/en/latest/api.html#embedding-through-join-tables).
-      - name: Query the same foreign table multiple times
-        description: |
-          Sometimes you will need to query the same foreign table twice.
-          In this case, you can use the name of the joined column to identify
-          which join you intend to use. For convenience, you can also give an
-          alias for each column. For example, if we had a shop of products,
-          and we wanted to get the supplier and the purchaser at the same time
-          (both in the users) table:
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('products')
-            .select(`
-              id,
-              supplier:supplier_id ( name ),
-              purchaser:purchaser_id ( name )
-            `)
-          ```
-      - name: Filtering with inner joins
-        description: |
-          If you want to filter a table based on a child table's values you can use the `!inner()` function. For example, if you wanted
-          to select all rows in a `message` table which belong to a user with the `username` "Jane":
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('messages')
-            .select('*, users!inner(*)')
-            .eq('users.username', 'Jane')
-          ```
-      - name: Querying with count option
-        description: |
-          You can get the number of rows by using the count option.
-          Allowed values for count option are `null`, [exact](https://postgrest.org/en/stable/api.html#exact-count), [planned](https://postgrest.org/en/stable/api.html#planned-count) and [estimated](https://postgrest.org/en/stable/api.html#estimated-count).
-        js: |
-          ```js
-          const { data, error, count } = await supabase
-            .from('cities')
-            .select('name', { count: 'exact' }) // if you don't want to return any rows, you can use { count: 'exact', head: true }
-          ```
-      - name: Querying JSON data
-        description: |
-          If you have data inside of a JSONB column, you can apply select
-          and query filters to the data values. Postgres offers a
-          [number of operators](https://www.postgresql.org/docs/current/functions-json.html)
-          for querying JSON data. Also see
-          [PostgREST docs](http://postgrest.org/en/v7.0.0/api.html#json-columns) for more details.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('users')
-            .select(`
-              id, name,
-              address->street
-            `)
-            .eq('address->postcode', 90210)
-          ```
-      - name: Return data as CSV
-        description: |
-          By default the data is returned in JSON format, however you can also request for it to be returned as Comma Separated Values.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('users')
-            .select()
-            .csv()
-          ```
-      - name: Aborting requests in-flight
-        description: |
-          You can use an [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to abort requests. Note that `status` and `statusText` doesn't mean anything for aborted requests, since the request wasn't actually fulfilled.
-        js: |
-          ```js
-          const ac = new AbortController()
-          supabase
-            .from('very_big_table')
-            .select()
-            .abortSignal(ac.signal)
-            .then(console.log)
-          ac.abort()
-          // {
-          //   error: {
-          //     message: 'FetchError: The user aborted a request.',
-          //     details: '',
-          //     hint: '',
-          //     code: ''
-          //   },
-          //   data: null,
-          //   body: null,
-          //   count: null,
-          //   status: 400,
-          //   statusText: 'Bad Request'
-          // }
-          ```
-
-  insert():
-    title: 'Create data: insert()'
-    $ref: '@supabase/postgrest-js."lib/PostgrestQueryBuilder".PostgrestQueryBuilder.insert'
-    notes: |
-      - By default, every time you run `insert()`, the client library will make a `select` to return the full record.
-      This is convenient, but it can also cause problems if your Policies are not configured to allow the `select` operation.
-      If you are using Row Level Security and you are encountering problems, try setting the `returning` param to `minimal`.
-    examples:
-      - name: Create a record
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .insert([
-              { name: 'The Shire', country_id: 554 }
-            ])
-          ```
-      - name: Bulk create
-        description: |
-          When running a bulk create, the operation is handled in a single transaction. If any of the inserts fail, all other operations are
-          rolled back.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .insert([
-              { name: 'The Shire', country_id: 554 },
-              { name: 'Rohan', country_id: 555 },
-            ])
-          ```
-      - name: Upsert
-        description: |
-          For upsert, if set to true, primary key columns would need to be included
-          in the data parameter in order for an update to properly happen. Also, primary keys
-          used must be natural, not surrogate. There are however,
-          [workarounds](https://github.com/PostgREST/postgrest/issues/1118)
-          for surrogate primary keys.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .insert(
-              [
-                { name: 'The Shire', country_id: 554 },
-                { name: 'Rohan', country_id: 555 },
-                { name: 'City by the Bay', country_id:840}
-              ],
-              { upsert: true })
-          ```
-
-  update():
-    title: 'Modify data: update()'
-    $ref: '@supabase/postgrest-js."lib/PostgrestQueryBuilder".PostgrestQueryBuilder.update'
-    notes: |
-      - `update()` should always be combined with [Filters](/docs/reference/javascript/using-filters) to target the item(s) you wish to update.
-    examples:
-      - name: Updating your data
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Middle Earth' })
-            .match({ name: 'Auckland' })
-          ```
-      - name: Updating JSON data
-        description: |
-          Postgres offers a
-          [number of operators](https://www.postgresql.org/docs/current/functions-json.html)
-          for working with JSON data. Right now it is only possible to update an entire JSON document,
-          but we are [working on ideas](https://github.com/PostgREST/postgrest/issues/465) for updating individual keys.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('users')
-            .update(`
-              address: {
-                street: 'Melrose Place',
-                postcode: 90210
-              }
-            `)
-            .eq('address->postcode', 90210)
-          ```
-
-  upsert():
-    title: 'Upsert data: upsert()'
-    $ref: '@supabase/postgrest-js."lib/PostgrestQueryBuilder".PostgrestQueryBuilder.upsert'
-    notes: |
-      - Primary keys should be included in the data payload in order for an update to work correctly.
-      - Primary keys  must be natural, not surrogate. There are however, [workarounds](https://github.com/PostgREST/postgrest/issues/1118) for surrogate primary keys.
-      - If you need to insert new data and update existing data at the same time, use [Postgres triggers](https://github.com/supabase/postgrest-js/issues/173#issuecomment-825124550).
-    examples:
-      - name: Upsert your data
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('messages')
-            .upsert({ id: 3, message: 'foo', username: 'supabot' })
-          ```
-      - name: Bulk Upsert your data
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('messages')
-            .upsert([
-            { id: 3, message: 'foo', username: 'supabot' },
-            { id: 4, message: 'bar', username: 'supabot' }
-            ])
-          ```
-      - name: Upserting into tables with constraints
-        description: |
-          Running the following will cause supabase to upsert data into the `users` table.
-          If the username 'supabot' already exists, the `onConflict` argument tells supabase to overwrite that row
-          based on the column passed into `onConflict`.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('users')
-            .upsert({ username: 'supabot' }, { onConflict: 'username' })
-          ```
-      - name: Return the exact number of rows
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error, count } = await supabase
-            .from('users')
-            .upsert({
-                id: 3, message: 'foo',
-                username: 'supabot'
-            }, {
-              count: 'exact'
-            })
-          ```
-
-  delete():
-    title: 'Delete data: delete()'
-    $ref: '@supabase/postgrest-js."lib/PostgrestQueryBuilder".PostgrestQueryBuilder.delete'
-    notes: |
-      - `delete()` should always be combined with [filters](/docs/reference/javascript/using-filters) to target the item(s) you wish to delete.
-      - If you use `delete()` with filters and you have
-        [RLS](/docs/learn/auth-deep-dive/auth-row-level-security) enabled, only
-        rows visible through `SELECT` policies are deleted. Note that by default
-        no rows are visible, so you need at least one `SELECT`/`ALL` policy that
-        makes the rows visible.
-    examples:
-      - name: Delete records
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .match({ id: 666 })
-          ```
-
-  rpc():
-    title: 'Postgres functions: rpc()'
-    description: |
-      You can call Postgres functions as _Remote Procedure Calls_, logic in your database that you can execute from anywhere.
-      Functions are useful when the logic rarely changes—like for password resets and updates.
-
-      ```sql
-      create or replace function hello_world() returns text as $$
-        select 'Hello world';
-      $$ language sql;
-      ```
-    $ref: '@supabase/postgrest-js."lib/PostgrestRpcBuilder".PostgrestRpcBuilder.rpc'
-    examples:
-      - name: Call a Postgres function without arguments
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .rpc('hello_world')
-          ```
-      - name: Call a Postgres function with arguments
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .rpc('echo_city', { name: 'The Shire' })
-          ```
-      - name: Bulk processing
-        description: You can process large payloads at once using [array parameters](https://postgrest.org/en/stable/api.html#calling-functions-with-array-parameters).
-        js: |
-          ```js
-          const { data, error } = await postgrest
-            .rpc('echo_cities', { names: ['The Shire', 'Mordor'] })
-          ```
-      - name: Call a Postgres function with filters
-        description: |
-          Postgres functions that return tables can also be combined with
-          [Modifiers](/docs/reference/javascript/using-modifiers) and
-          [Filters](/docs/reference/javascript/using-filters).
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .select('name, population')
-            .eq('name', 'The Shire')
-          ```
-      - name: Call a Postgres function with a count option
-        description: |
-          You can specify a count option to get the row count along with your data.
-          Allowed values for count option are `null`, `exact`, `planned` and `estimated`.
-        js: |
-          ```js
-          const { data, error, count } = await supabase
-            .rpc('hello_world', {}, { count: 'exact' })
-          ```
-
-  subscribe():
-    title: 'on().subscribe()'
-    $ref: '@supabase/supabase-js.lib/SupabaseQueryBuilder.SupabaseQueryBuilder.on'
-    notes: |
-      - Realtime is disabled by default for new Projects for better database performance and security. You can turn it on by [managing replication](/docs/guides/api#managing-realtime).
-      - If you want to receive the "previous" data for updates and deletes, you will need to set `REPLICA IDENTITY` to `FULL`, like this: `ALTER TABLE your_table REPLICA IDENTITY FULL;`
-    examples:
-      - name: Listen to all database changes
-        isSpotlight: true
-        js: |
-          ```js
-          const mySubscription = supabase
-            .from('*')
-            .on('*', payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to a specific table
-        js: |
-          ```js
-          const mySubscription = supabase
-            .from('countries')
-            .on('*', payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to inserts
-        js: |
-          ```js
-          const mySubscription = supabase
-            .from('countries')
-            .on('INSERT', payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to updates
-        description: |
-          By default, Supabase will send only the updated record. If you want to receive the previous values as well you can
-          enable full replication for the table you are listening too:
-
-          ```sql
-          alter table "your_table" replica identity full;
-          ```
-        js: |
-          ```js
-          const mySubscription = supabase
-            .from('countries')
-            .on('UPDATE', payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to deletes
-        description: |
-          By default, Supabase does not send deleted records. If you want to receive the deleted record you can
-          enable full replication for the table you are listening too:
-
-          ```sql
-          alter table "your_table" replica identity full;
-          ```
-        js: |
-          ```js
-          const mySubscription = supabase
-            .from('countries')
-            .on('DELETE', payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to multiple events
-        description: You can chain listeners if you want to listen to multiple events for each table.
-        js: |
-          ```js
-          const mySubscription = supabase
-            .from('countries')
-            .on('INSERT', handleRecordInserted)
-            .on('DELETE', handleRecordDeleted)
-            .subscribe()
-          ```
-      - name: Listening to row level changes
-        description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.
-        notes: |
-          - ``eq`` filter works with all database types as under the hood, it's casting both the filter value and the database value to the correct type and then comparing them.
-        js: |
-          ```js
-          const mySubscription = supabase
-            .from('countries:id=eq.200')
-            .on('UPDATE', handleRecordUpdated)
-            .subscribe()
-          ```
-
-  removeSubscription():
-    title: 'removeSubscription()'
-    $ref: '@supabase/supabase-js.index.SupabaseClient.removeSubscription'
-    notes: |
-      - Removing subscriptions is a great way to maintain the performance of your project's database. Supabase will automatically handle cleanup 30 seconds after a user is disconnected, but unused subscriptions may cause degradation as more users are simultaneously subscribed.
-    examples:
-      - name: Remove a subscription
-        isSpotlight: true
-        js: |
-          ```js
-          supabase.removeSubscription(mySubscription)
-          ```
-
-  removeAllSubscriptions():
-    title: 'removeAllSubscriptions()'
-    $ref: '@supabase/supabase-js.index.SupabaseClient.removeAllSubscriptions'
-    notes: |
-      - Removing subscriptions is a great way to maintain the performance of your project's database. Supabase will automatically handle cleanup 30 seconds after a user is disconnected, but unused subscriptions may cause degradation as more users are simultaneously subscribed.
-    examples:
-      - name: Removes all subscriptions
-        isSpotlight: true
-        js: |
-          ```js
-          supabase.removeAllSubscriptions()
-          ```
-
-  getSubscriptions():
-    title: 'getSubscriptions()'
-    $ref: '@supabase/supabase-js.index.SupabaseClient.getSubscriptions'
-    examples:
-      - name: Get all subscriptions
-        isSpotlight: true
-        js: |
-          ```js
-          const subscriptions = supabase.getSubscriptions()
-          ```
-
-  storage.listBuckets():
-    title: 'listBuckets()'
-    $ref: '@supabase/storage-js."lib/StorageBucketApi".StorageBucketApi.listBuckets'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select`
-        - `objects` permissions: none
-    examples:
-      - name: List buckets
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .listBuckets()
-          ```
-
-  storage.getBucket():
-    title: 'getBucket()'
-    $ref: '@supabase/storage-js."lib/StorageBucketApi".StorageBucketApi.getBucket'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select`
-        - `objects` permissions: none
-    examples:
-      - name: Get bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .getBucket('avatars')
-          ```
-
-  storage.createBucket():
-    title: 'createBucket()'
-    $ref: '@supabase/storage-js."lib/StorageBucketApi".StorageBucketApi.createBucket'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `insert`
-        - `objects` permissions: none
-    examples:
-      - name: Create bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .createBucket('avatars', { public: false })
-          ```
-
-  storage.emptyBucket():
-    title: 'emptyBucket()'
-    $ref: '@supabase/storage-js."lib/StorageBucketApi".StorageBucketApi.emptyBucket'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select`
-        - `objects` permissions: `select` and `delete`
-    examples:
-      - name: Empty bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .emptyBucket('avatars')
-          ```
-  storage.updateBucket():
-    title: 'updateBucket()'
-    $ref: '@supabase/storage-js."lib/StorageBucketApi".StorageBucketApi.updateBucket'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `update`
-        - `objects` permissions: none
-    examples:
-      - name: Update bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .updateBucket('avatars', { public: false })
-          ```
-
-  storage.deleteBucket():
-    title: 'deleteBucket()'
-    $ref: '@supabase/storage-js."lib/StorageBucketApi".StorageBucketApi.deleteBucket'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: `select` and `delete`
-        - `objects` permissions: none
-    examples:
-      - name: Delete bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .deleteBucket('avatars')
-          ```
-
-  storage.from.upload():
-    title: 'from.upload()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.upload'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `insert`
-      - For React Native, using either `Blob`, `File` or `FormData` does not work as intended. Upload file using `ArrayBuffer` from base64 file data instead, see example below.
-    examples:
-      - name: Upload file
-        isSpotlight: true
-        js: |
-          ```js
-          const avatarFile = event.target.files[0]
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .upload('public/avatar1.png', avatarFile, {
-              cacheControl: '3600',
-              upsert: false
-            })
-          ```
-      - name: Upload file using `ArrayBuffer` from base64 file data
-        js: |
-          ```js
-          import { decode } from 'base64-arraybuffer'
-
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .upload('public/avatar1.png', decode('base64FileData'), {
-              contentType: 'image/png'
-            })
-          ```
-
-  storage.from.update():
-    title: 'from.update()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.update'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `update` and `select`
-      - For React Native, using either `Blob`, `File` or `FormData` does not work as intended. Update file using `ArrayBuffer` from base64 file data instead, see example below.
-    examples:
-      - name: Update file
-        isSpotlight: true
-        js: |
-          ```js
-          const avatarFile = event.target.files[0]
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .update('public/avatar1.png', avatarFile, {
-              cacheControl: '3600',
-              upsert: false
-            })
-          ```
-      - name: Update file using `ArrayBuffer` from base64 file data
-        js: |
-          ```js
-          import {decode} from 'base64-arraybuffer'
-
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .update('public/avatar1.png', decode('base64FileData'), {
-              contentType: 'image/png'
-            })
-          ```
-
-  storage.from.move():
-    title: 'from.move()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.move'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `update` and `select`
-    examples:
-      - name: Move file
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .move('public/avatar1.png', 'private/avatar2.png')
-          ```
-
-  storage.from.copy():
-    title: 'from.copy()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.copy'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `insert` and `select`
-    examples:
-      - name: Copy file
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .copy('public/avatar1.png', 'private/avatar2.png')
-          ```
-
-  storage.from.createSignedUrl():
-    title: 'from.createSignedUrl()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.createSignedUrl'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `select`
-    examples:
-      - name: Create Signed URL
-        isSpotlight: true
-        js: |
-          ```js
-          const { signedURL, error } = await supabase
-            .storage
-            .from('avatars')
-            .createSignedUrl('folder/avatar1.png', 60)
-          ```
-
-  storage.from.createSignedUrls():
-    title: 'from.createSignedUrls()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.createSignedUrls'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `select`
-    examples:
-      - name: Create Signed URLs
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .createSignedUrls(['folder/avatar1.png', 'folder/avatar2.png'], 60)
-          ```
-
-  storage.from.getPublicUrl():
-    title: 'from.getPublicUrl()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.getPublicUrl'
-    notes: |
-      - The bucket needs to be set to public, either via [updateBucket()](/docs/reference/javascript/storage-updatebucket) or by going to Storage on [app.supabase.com](https://app.supabase.com), clicking the overflow menu on a bucket and choosing "Make public"
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: none
-    examples:
-      - name: Returns the URL for an asset in a public bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { publicURL, error } = supabase
-            .storage
-            .from('public-bucket')
-            .getPublicUrl('folder/avatar1.png')
-          ```
-
-  storage.from.download():
-    title: 'from.download()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.download'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `select`
-    examples:
-      - name: Download file
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .download('folder/avatar1.png')
-          ```
-
-  storage.from.remove():
-    title: 'from.remove()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.remove'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `delete` and `select`
-    examples:
-      - name: Delete file
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .remove(['folder/avatar1.png'])
-          ```
-
-  storage.from.list():
-    title: 'from.list()'
-    $ref: '@supabase/storage-js."lib/StorageFileApi".StorageFileApi.list'
-    notes: |
-      - Policy permissions required:
-        - `buckets` permissions: none
-        - `objects` permissions: `select`
-    examples:
-      - name: List files in a bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .list('folder', {
-              limit: 100,
-              offset: 0,
-              sortBy: { column: 'name', order: 'asc' },
-            })
-          ```
-      - name: Search files in a bucket
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .list('folder', {
-              limit: 100,
-              offset: 0,
-              sortBy: { column: 'name', order: 'asc' },
-              search: 'jon'
-            })
-          ```
-
-  Using Modifiers:
-    description: |
-      Modifiers can be used on `select()` queries.
-
-      If a Postgres function returns a table response, you can also apply modifiers to the `rpc()` function.
-
-  limit():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.limit'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .limit(1)
-          ```
-      - name: With embedded resources
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, cities(name)')
-            .eq('name', 'United States')
-            .limit(1, { foreignTable: 'cities' })
-          ```
-
-  order():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.order'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .order('id', { ascending: false })
-          ```
-      - name: With embedded resources
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, cities(name)')
-            .eq('name', 'United States')
-            .order('name', {foreignTable: 'cities'})
-          ```
-      - name: Ordering multiple columns
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name', 'country_id')
-            .order('country_id', { ascending: false })
-            .order('name', { ascending: false })
-          ```
-  range():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.range'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .range(0,3)
-          ```
-
-  single():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.single'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .limit(1)
-            .single()
-          ```
-
-  maybeSingle():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.maybeSingle'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .eq('name', 'Singapore')
-            .maybeSingle()
-          ```
-
-  Using Filters:
-    description: |
-      Filters can be used on `select()`, `update()`, and `delete()` queries.
-
-      If a Postgres function returns a table response, you can also apply filters.
-
-      ### Applying Filters
-
-      You must apply your filters to the end of your query. For example:
-
-      ```js
-      const { data, error } = await supabase
-        .from('cities')
-        .select('name, country_id')
-        .eq('name', 'The Shire')    // Correct
-
-      const { data, error } = await supabase
-        .from('cities')
-        .eq('name', 'The Shire')    // Incorrect
-        .select('name, country_id')
-      ```
-
-      ### Chaining
-
-      Filters can be chained together to produce advanced queries. For example:
-
-      ```js
-      const { data, error } = await supabase
-        .from('cities')
-        .select('name, country_id')
-        .gte('population', 1000)
-        .lt('population', 10000)
-      ```
-
-      ### Conditional Chaining
-
-      Filters can be built up one step at a time and then executed. For example:
-
-      ```js
-      const filterByName = null
-      const filterPopLow = 1000
-      const filterPopHigh = 10000
-
-      let query = supabase
-        .from('cities')
-        .select('name, country_id')
-
-      if (filterByName)  { query = query.eq('name', filterByName) }
-      if (filterPopLow)  { query = query.gte('population', filterPopLow) }
-      if (filterPopHigh) { query = query.lt('population', filterPopHigh) }
-
-      const { data, error } = await query
-      ```
-
-  .or():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.or'
-    notes: |
-      - `.or()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values.
-
-        ```js
-        .or('id.in.(6,7), arraycol.cs.{"a","b"}')  // Use Postgres list () for in filter. Array {} for array column and 'cs' for contains.
-        .or(`id.in.(${arrList}),arraycol.cs.{${arr}}`)	// You can insert a javascipt array for list or array on array column.
-        .or(`id.in.(${arrList}),rangecol.cs.[${arrRange})`)	// You can insert a javascipt array for list or range on a range column.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .or('id.eq.20,id.eq.30')
-          ```
-      - name: Use `or` with `and`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .or('id.gt.20,and(name.eq.New Zealand,name.eq.France)')
-          ```
-      - name: Use `or` on foreign tables
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('id, cities(*)')
-            .or('name.eq.Wellington,name.eq.Paris', { foreignTable: "cities" })
-          ```
-
-  .not():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.not'
-    notes: |
-      - `.not()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values.
-
-        ```js
-          .not('name','eq','Paris')
-          .not('arraycol','cs','{"a","b"}') // Use Postgres array {} for array column and 'cs' for contains.
-          .not('rangecol','cs','(1,2]') // Use Postgres range syntax for range column.
-          .not('id','in','(6,7)')  // Use Postgres list () for in filter.
-          .not('id','in',`(${arr})`)  // You can insert a javascript array.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .not('name', 'eq', 'Paris')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .not('name', 'eq', 'Paris')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .not('name', 'eq', 'Paris')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .not('name', 'eq', 'Paris')
-          ```
-
-  .match():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.match'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .match({name: 'Beijing', country_id: 156})
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .match({name: 'Beijing', country_id: 156})
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .match({name: 'Beijing', country_id: 156})
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .match({name: 'Beijing', country_id: 156})
-          ```
-
-  .eq():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.eq'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .eq('name', 'The shire')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .eq('name', 'San Francisco')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .eq('name', 'Mordor')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .eq('name', 'San Francisco')
-          ```
-
-  .neq():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.neq'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .neq('name', 'The shire')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .neq('name', 'San Francisco')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .neq('name', 'Mordor')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .neq('name', 'Lagos')
-          ```
-
-  .gt():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.gt'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .gt('country_id', 250)
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .gt('country_id', 250)
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .gt('country_id', 250)
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .gt('country_id', 250)
-          ```
-
-  .gte():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.gte'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .gte('country_id', 250)
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .gte('country_id', 250)
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .gte('country_id', 250)
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .gte('country_id', 250)
-          ```
-
-  .lt():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.lt'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .lt('country_id', 250)
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .lt('country_id', 250)
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .lt('country_id', 250)
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .lt('country_id', 250)
-          ```
-
-  .lte():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.lte'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .lte('country_id', 250)
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .lte('country_id', 250)
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .lte('country_id', 250)
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .lte('country_id', 250)
-          ```
-
-  .like():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.like'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .like('name', '%la%')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .like('name', '%la%')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .like('name', '%la%')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .like('name', '%la%')
-          ```
-
-  .ilike():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.ilike'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .ilike('name', '%la%')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .ilike('name', '%la%')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .ilike('name', '%la%')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .ilike('name', '%la%')
-          ```
-
-  .is():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.is'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .is('name', null)
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .is('name', null)
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .is('name', null)
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .is('name', null)
-          ```
-
-  .in():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.in'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .in('name', ['Rio de Janeiro', 'San Francisco'])
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .in('name', ['Rio de Janeiro', 'San Francisco'])
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .in('name', ['Rio de Janeiro', 'San Francisco'])
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .in('name', ['Rio de Janeiro', 'San Francisco'])
-          ```
-
-  .contains():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.contains'
-    notes: |
-      - `.contains()` can work on array columns or range columns.
-        It is very useful for finding rows where a tag array contains all the values in the filter array.
-
-        ```js
-        .contains('arraycol',["a","b"]) // You can use a javascript array for an array column
-        .contains('arraycol','{"a","b"}') // You can use a string with Postgres array {} for array column.
-        .contains('rangecol','(1,2]') // Use Postgres range syntax for range column.
-        .contains('rangecol',`(${arr}]`) // You can insert an array into a string.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .contains('main_exports', ['oil'])
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .update({ name: 'Mordor' })
-            .contains('main_exports', ['oil'])
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .delete()
-            .contains('main_exports', ['oil'])
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_countries')
-            .contains('main_exports', ['oil'])
-          ```
-
-  .containedBy():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.containedBy'
-    notes: |
-      - `.containedBy()` can work on array columns or range columns.
-
-        ```js
-        .containedBy('arraycol',["a","b"]) // You can use a javascript array for an array column
-        .containedBy('arraycol','{"a","b"}') // You can use a string with Postgres array {} for array column.
-        .containedBy('rangecol','(1,2]') // Use Postgres range syntax for range column.
-        .containedBy('rangecol',`(${arr}]`) // You can insert an array into a string.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .containedBy('main_exports', ['cars', 'food', 'machine'])
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .update({ name: 'Mordor' })
-            .containedBy('main_exports', ['orks', 'surveillance', 'evil'])
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .delete()
-            .containedBy('main_exports', ['cars', 'food', 'machine'])
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_countries')
-            .containedBy('main_exports', ['cars', 'food', 'machine'])
-          ```
-
-  .rangeLt():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.rangeLt'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeLt('population_range_millions', '[150, 250]')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .update({ name: 'Mordor' })
-            .rangeLt('population_range_millions', '[150, 250]')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .delete()
-            .rangeLt('population_range_millions', '[150, 250]')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_countries')
-            .rangeLt('population_range_millions', '[150, 250]')
-          ```
-
-  .rangeGt():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.rangeGt'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeGt('population_range_millions', '[150, 250]')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .update({ name: 'Mordor' })
-            .rangeGt('population_range_millions', '[150, 250]')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .delete()
-            .rangeGt('population_range_millions', '[150, 250]')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_countries')
-            .rangeGt('population_range_millions', '[150, 250]')
-          ```
-
-  .rangeGte():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.rangeGte'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeGte('population_range_millions', '[150, 250]')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .update({ name: 'Mordor' })
-            .rangeGte('population_range_millions', '[150, 250]')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .delete()
-            .rangeGte('population_range_millions', '[150, 250]')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_countries')
-            .rangeGte('population_range_millions', '[150, 250]')
-          ```
-
-  .rangeLte():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.rangeLte'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeLte('population_range_millions', '[150, 250]')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .update({ name: 'Mordor' })
-            .rangeLte('population_range_millions', '[150, 250]')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .delete()
-            .rangeLte('population_range_millions', '[150, 250]')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_countries')
-            .rangeLte('population_range_millions', '[150, 250]')
-          ```
-
-  .rangeAdjacent():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.rangeAdjacent'
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, id, population_range_millions')
-            .rangeAdjacent('population_range_millions', '[70, 185]')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .update({ name: 'Mordor' })
-            .rangeAdjacent('population_range_millions', '[70, 185]')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .delete()
-            .rangeAdjacent('population_range_millions', '[70, 185]')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_countries')
-            .rangeAdjacent('population_range_millions', '[70, 185]')
-          ```
-
-  .overlaps():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.overlaps'
-    notes: |
-      - `.overlaps()` can work on array columns or range columns.
-
-        ```js
-        .overlaps('arraycol',["a","b"]) // You can use a javascript array for an array column
-        .overlaps('arraycol','{"a","b"}') // You can use a string with Postgres array {} for array column.
-        .overlaps('rangecol','(1,2]') // Use Postgres range syntax for range column.
-        .overlaps('rangecol',`(${arr}]`)  // You can insert an array into a string.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name, id, main_exports')
-            .overlaps('main_exports', ['computers', 'minerals'])
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          let countries = await supabase
-            .from('countries')
-            .update({ name: 'Mordor' })
-            .overlaps('main_exports', ['computers', 'minerals'])
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('countries')
-            .delete()
-            .overlaps('main_exports', ['computers', 'minerals'])
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_countries')
-            .overlaps('main_exports', ['computers', 'minerals'])
-          ```
-
-  .textSearch():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.textSearch'
-    examples:
-      - name: Text search
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', `'fat' & 'cat'`, {
-              config: 'english'
-            })
-          ```
-      - name: Basic normalization
-        description: Uses PostgreSQL's `plainto_tsquery` function.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', `'fat' & 'cat'`, {
-              type: 'plain',
-              config: 'english'
-            })
-          ```
-      - name: Full normalization
-        description: Uses PostgreSQL's `phraseto_tsquery` function.
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', `'fat' & 'cat'`, {
-              type: 'phrase',
-              config: 'english'
-            })
-          ```
-      - name: Websearch
-        description: |
-          Uses PostgreSQL's `websearch_to_tsquery` function.
-          This function will never raise syntax errors, which makes it possible to use raw user-supplied input for search, and can be used
-          with advanced operators.
-
-          - `unquoted text`: text not inside quote marks will be converted to terms separated by & operators, as if processed by plainto_tsquery.
-          - `"quoted text"`: text inside quote marks will be converted to terms separated by <-> operators, as if processed by phraseto_tsquery.
-          - `OR`: the word “or” will be converted to the | operator.
-          - `-`: a dash will be converted to the ! operator.
-
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', `'fat or cat'`, {
-              type: 'websearch',
-              config: 'english'
-            })
-          ```
-
-  .filter():
-    $ref: '@supabase/postgrest-js."lib/PostgrestFilterBuilder".PostgrestFilterBuilder.filter'
-    notes: |
-      - `.filter()` expects you to use the raw [PostgREST syntax](https://postgrest.org/en/stable/api.html#horizontal-filtering-rows) for the filter names and values, so it should only be used as an escape hatch in case other filters don't work.
-        ```js
-          .filter('arraycol','cs','{"a","b"}') // Use Postgres array {} for array column and 'cs' for contains.
-          .filter('rangecol','cs','(1,2]') // Use Postgres range syntax for range column.
-          .filter('id','in','(6,7)')  // Use Postgres list () for in filter.
-          .filter('id','in',`(${arr})`)  // You can insert a javascript array.
-        ```
-    examples:
-      - name: With `select()`
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, country_id')
-            .filter('name', 'in', '("Paris","Tokyo")')
-          ```
-      - name: With `update()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .update({ name: 'Mordor' })
-            .filter('name', 'in', '("Paris","Tokyo")')
-          ```
-      - name: With `delete()`
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .delete()
-            .filter('name', 'in', '("Paris","Tokyo")')
-          ```
-      - name: With `rpc()`
-        js: |
-          ```js
-          // Only valid if the Postgres function returns a table type.
-          const { data, error } = await supabase
-            .rpc('echo_all_cities')
-            .filter('name', 'in', '("Paris","Tokyo")')
-          ```
-      - name: Filter embedded resources
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name, countries ( name )')
-            .filter('countries.name', 'in', '("France","Japan")')
-          ```
diff --git a/spec/supabase_js_v2--old.yml b/spec/supabase_js_v2--old.yml
deleted file mode 100644
index f245467e26c..00000000000
--- a/spec/supabase_js_v2--old.yml
+++ /dev/null
@@ -1,5390 +0,0 @@
-openref: 0.1
-
-info:
-  id: reference/supabase-js
-  title: Supabase Client
-  description: |
-
-    Supabase JavaScript.
-
-  definition: ../../spec/enrichments/tsdoc_v2/combined.json
-  specUrl: https://github.com/supabase/supabase/edit/master/spec/supabase_js_v2.yml
-  slugPrefix: '/'
-  libraries:
-    - name: 'JavaScript'
-      id: 'js'
-      version: '0.0.1'
-
-pages:
-  Initializing:
-    $ref: '@supabase/supabase-js.index.SupabaseClient.constructor'
-    description: |
-      You can initialize a new Supabase client using the `createClient()` method.
-
-      The Supabase client is your entrypoint to the rest of the Supabase functionality
-      and is the easiest way to interact with everything we offer within the Supabase ecosystem.
-
-    examples:
-      - name: createClient()
-        js: |
-          ```js
-          import { createClient } from '@supabase/supabase-js'
-
-          // Create a single supabase client for interacting with your database
-          const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
-          ```
-      - name: With additional parameters
-        js: |
-          ```js
-          import { createClient } from '@supabase/supabase-js'
-
-          const options = {
-            db: {
-              schema: 'public',
-            },
-            auth: {
-              autoRefreshToken: true,
-              persistSession: true,
-              detectSessionInUrl: true
-            },
-            global: {
-              headers: { 'x-my-custom-header': 'my-app-name' },
-            },
-          }
-          const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key", options)
-          ```
-      - name: API schemas
-        js: |
-          ```js
-          import { createClient } from '@supabase/supabase-js'
-
-          // Provide a custom schema. Defaults to "public".
-          const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', {
-            db: { schema: 'other_schema' }
-          })
-          ```
-
-          By default the API server points to the `public` schema. You can enable other database schemas within the Dashboard.
-          Go to `Settings > API > Schema` and add the schema which you want to expose to the API.
-
-          Note: each client connection can only access a single schema, so the code above can access the `other_schema` schema but cannot access the `public` schema.
-      - name: Custom `fetch` implementation
-        js: |
-          ```js
-          import { createClient } from '@supabase/supabase-js'
-
-          const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', {
-            global: { fetch: fetch.bind(globalThis) }
-          })
-          ```
-
-          `supabase-js` uses the [`cross-fetch`](https://www.npmjs.com/package/cross-fetch) library to make HTTP requests,
-          but an alternative `fetch` implementation can be provided as an option.
-          This is most useful in environments where `cross-fetch` is not compatible (for instance Cloudflare Workers).
-      - name: React Native options
-        js: |
-          ```js
-          import { createClient } from '@supabase/supabase-js'
-          import AsyncStorage from "@react-native-async-storage/async-storage";
-
-          const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key", {
-            auth: {
-              storage: AsyncStorage,
-              autoRefreshToken: true,
-              persistSession: true,
-              detectSessionInUrl: false,
-            },
-          });
-          ```
-
-          For React Native we recommend using `AsyncStorage` as the storage implementation for Supabase Auth.
-  auth.signUp():
-    title: 'signUp()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.signUp'
-    notes: |
-      - By default, the user needs to verify their email address before logging in. To turn this off, disable **Confirm email** in [your project](https://app.supabase.com/project/_/auth/settings).
-      - **Confirm email** determines if users need to confirm their email address after signing up.
-        - If **Confirm email** is enabled, a `user` is returned but `session` is null.
-        - If **Confirm email** is disabled, both a `user` and a `session` are returned.
-      - When the user confirms their email address, they are redirected to the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url) by default. You can modify your `SITE_URL` or add additional redirect URLs in [your project](https://app.supabase.com/project/_/auth/settings).
-      - If signUp() is called for an existing confirmed user:
-          - If **Confirm email** is enabled in [your project](https://app.supabase.com/project/_/auth/settings), an obfuscated/fake user object is returned.
-          - If **Confirm email** is disabled, the error message, `User already registered` is returned.
-      - To fetch the currently logged-in user, refer to [`getUser()`](/docs/reference/javascript/auth-getuser).
-    examples:
-      - name: Sign up.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signUp({
-            email: 'example@email.com',
-            password: 'example-password',
-          })
-          ```
-      - name: Sign up with additional user metadata.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signUp(
-            {
-              email: 'example@email.com',
-              password: 'example-password',
-              options: {
-                data: {
-                  first_name: 'John',
-                  age: 27,
-                }
-              }
-            }
-          )
-          ```
-  auth.signInWithPassword():
-    title: 'signInWithPassword()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.signInWithPassword'
-    notes: |
-      - Requires either an email and password or a phone number and password.
-    examples:
-      - name: Sign in with email and password
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signInWithPassword({
-            email: 'example@email.com',
-            password: 'example-password',
-          })
-          ```
-      - name: Sign in with phone and password
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signInWithPassword({
-            phone: '+13334445555',
-            password: 'some-password',
-          })
-
-          // After receiving a SMS with a OTP.
-          const { data, error } = await supabase.auth.verifyOtp({
-            phone: '+13334445555',
-            token: '123456',
-          })
-          ```
-  auth.signInWithOtp():
-    title: 'signInWithOtp()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.signInWithOtp'
-    notes: |
-      - Requires either an email or phone number.
-      - This method is used for passwordless sign-ins where a OTP is sent to the user's email or phone number.
-      - If you're using an email, you can configure whether you want the user to receive a magiclink or a OTP.
-      - If you're using phone, you can configure whether you want the user to receive a OTP.
-      - The magic link's destination URL is determined by the [`SITE_URL`](https://supabase.com/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional redirect urls in [your project](https://app.supabase.com/project/_/auth/settings).
-    examples:
-      - name: Sign in with email.
-        isSpotlight: true
-        description: The user will be sent an email which contains either a magiclink or a OTP or both. By default, a given user can only request a OTP once every 60 seconds.
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signInWithOtp({
-            email: 'example@email.com',
-          })
-          ```
-      - name: Sign in with SMS OTP.
-        isSpotlight: false
-        description: The user will be sent a SMS which contains a OTP. By default, a given user can only request a OTP once every 60 seconds.
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signInWithOtp({
-            phone: '+13334445555',
-          })
-          ```
-  auth.signInWithOAuth():
-    title: 'signInWithOAuth()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.signInWithOAuth'
-    notes: |
-      - This method is used for signing in using a third-party provider.
-      - Supabase supports many different [third-party providers](https://supabase.com/docs/guides/auth#providers).
-    examples:
-      - name: Sign in using a third-party provider
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signInWithOAuth({
-            provider: 'github'
-          })
-          ```
-      - name: Sign in using a third-party provider with redirect
-        isSpotlight: false
-        description: |
-          When the third-party provider successfully authenticates the user, the provider redirects the user to the Supabase Auth callback URL where they are further redirected to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](/docs/reference/auth/config#site_url).
-          You can modify the `SITE_URL` or [add additional redirect URLs](https://app.supabase.com/project/_/auth/settings). You can use [wildcard match patterns](/docs/guides/auth#redirect-urls-and-wildcards) to support preview URLs from providers like Netlify and Vercel.
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signInWithOAuth({
-            provider: 'github'
-            options: {
-              redirectTo: 'https://example.com/welcome'
-            }
-          }
-          ```
-      - name: Sign in with scopes
-        isSpotlight: false
-        description: |
-          If you need additional data from an OAuth provider, you can include a space-separated list of scopes in your request to get back an OAuth provider token.
-          You may also need to specify the scopes in the provider's OAuth app settings, depending on the provider. The list of scopes will be documented by the third-party provider you are using and specifying scopes will enable you to use the OAuth provider token to call additional APIs supported by the third-party provider to get more information.
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.signInWithOAuth({
-            provider: 'github'
-            options: {
-              scopes: 'repo gist notifications'
-            }
-          })
-          const oAuthToken = data.session.provider_token // use to access provider API
-          ```
-  auth.signOut():
-    title: 'signOut()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.signOut'
-    notes: |
-      - In order to use the `signOut()` method, the user needs to be signed in first.
-    examples:
-      - name: Sign out
-        isSpotlight: true
-        js: |
-          ```js
-          const { error } = await supabase.auth.signOut()
-          ```
-  auth.verifyOtp():
-    title: 'verifyOtp()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.verifyOtp'
-    notes: |
-      - The `verifyOtp` method takes in different verification types. If a phone number is used, the type can either be `sms` or `phone_change`. If an email address is used, the type can be one of the following: `signup`, `magiclink`, `recovery`, `invite` or `email_change`.
-      - The verification type used should be determined based on the corresponding auth method called before `verifyOtp` to sign up / sign-in a user.
-    examples:
-      - name: Verify Sms One-Time Password (OTP)
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.verifyOtp({ phone, token, type: 'sms'})
-          ```
-      - name: Verify Signup One-Time Password (OTP)
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.verifyOtp({ email, token, type: 'signup'})
-          ```
-  auth.getSession():
-    title: 'getSession()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.getSession'
-    examples:
-      - name: Get the session data
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.getSession()
-          ```
-  auth.getUser():
-    title: 'getUser()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.getUser'
-    notes: |
-      - This method gets the user object from the current session.
-      - Fetches the user object from the database instead of local session.
-    examples:
-      - name: Get the logged in user with the current existing session
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: { user } } = await supabase.auth.getUser()
-          ```
-      - name: Get the logged in user with a custom access token jwt.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: { user } } = await supabase.auth.getUser(jwt)
-          ```
-  auth.updateUser():
-    title: 'updateUser()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.updateUser'
-    notes: |
-      - In order to use the `updateUser()` method, the user needs to be signed in first.
-      - By Default, email updates sends a confirmation link to both the user's current and new email.
-      To only send a confirmation link to the user's new email, disable **Secure email change** in your project's [email auth provider settings](https://app.supabase.com/project/_/auth/settings).
-    examples:
-      - name: Update the email for an authenticated user
-        description: Sends a "Confirm Email Change" email to the new email address.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.updateUser({email: 'new@email.com'})
-          ```
-      - name: Update the password for an authenticated user
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.updateUser({password: 'new password'})
-          ```
-      - name: Update the user's metadata
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.updateUser({
-            data: { hello: 'world' }
-          })
-          ```
-  auth.setSession():
-    title: 'setSession()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.setSession'
-    notes: |
-      - `setSession()` takes in a refresh token and access token to get a new session.
-      - The refresh token can only be used once to obtain a new session.
-      - [Refresh token rotation](/docs/reference/auth/config#refresh_token_rotation_enabled) is enabled by default on all projects to guard against replay attacks.
-      - You can configure the [`REFRESH_TOKEN_REUSE_INTERVAL`](https://supabase.com/docs/reference/auth/config#refresh_token_reuse_interval) which provides a short window in which the same refresh token can be used multiple times in the event of concurrency or offline issues.
-      - If you are using React Native, you will need to install a Buffer polyfill via a library such as [rn-nodeify](https://github.com/tradle/rn-nodeify) to properly use the library.
-    examples:
-      - name: Set the session
-        description: Sets the session data from a `refresh_token` and `access_token` and returns the current session or an error if the tokens are invalid.
-        isSpotlight: true
-        js: |
-          ```js
-            const { data, error } = supabase.auth.setSession({refresh_token, access_token})
-          ```
-  auth.refreshSession():
-    title: 'refreshSession()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.refreshSession'
-    notes: |
-      - This method will refresh the session whether the current one is expired or not.
-      - Both examples destructure `user` and `session` from `data`. This is not required; so `const { data, error } =` is also valid.
-    examples:
-      - name: Refresh session using the current session
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: { user, session }, error } = await supabase.auth.refreshSession()
-          ```
-      - name: Refresh session using a passed-in session
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: { user, session }, error } = await supabase.auth.refreshSession({ refresh_token })
-          ```
-  auth.onAuthStateChange():
-    title: 'onAuthStateChange()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.onAuthStateChange'
-    notes: |
-      - Types of auth events: `SIGNED_IN`, `SIGNED_OUT`, `TOKEN_REFRESHED`, `USER_UPDATED`, `USER_DELETED`, `PASSWORD_RECOVERY`
-    examples:
-      - name: Listen to auth changes
-        isSpotlight: true
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            console.log(event, session)
-          })
-          ```
-      - name: Listen to sign in
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'SIGNED_IN') console.log('SIGNED_IN', session)
-          })
-          ```
-      - name: Listen to sign out
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'SIGNED_OUT') console.log('SIGNED_OUT', session)
-          })
-          ```
-      - name: Listen to token refresh
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'TOKEN_REFRESHED') console.log('TOKEN_REFRESHED', session)
-          })
-          ```
-      - name: Listen to user updates
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'USER_UPDATED') console.log('USER_UPDATED', session)
-          })
-          ```
-      - name: Listen to user deleted
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'USER_DELETED') console.log('USER_DELETED', session)
-          })
-          ```
-      - name: Listen to password recovery events
-        js: |
-          ```js
-          supabase.auth.onAuthStateChange((event, session) => {
-            if (event == 'PASSWORD_RECOVERY') console.log('PASSWORD_RECOVERY', session)
-          })
-          ```
-  Supabase Auth Admin Api:
-    title: 'Overview'
-    notes: |
-      - Any method under the `supabase.auth.admin` namespace requires a `service_role` key.
-      - These methods are considered admin methods and should be called on a trusted server. Never expose your `service_role` key in the browser.
-
-  auth.admin.getUserById():
-    title: 'getUserById()'
-    $ref: '@supabase/gotrue-js.GoTrueAdminApi.getUserById'
-    notes: |
-      - Fetches the user object from the database based on the user's id.
-      - The `getUserById()` method requires the user's id which maps to the `auth.users.id` column.
-    examples:
-      - name: Fetch the user object using the access_token jwt.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.getUserById(1)
-          ```
-
-  auth.admin.listUsers():
-    title: 'listUsers()'
-    $ref: '@supabase/gotrue-js.GoTrueAdminApi.listUsers'
-    examples:
-      - name: Get a full list of users.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: { users }, error } = await supabase.auth.admin.listUsers()
-          ```
-  auth.admin.createUser():
-    title: 'createUser()'
-    $ref: '@supabase/gotrue-js.GoTrueAdminApi.createUser'
-    notes: |
-      - To confirm the user's email address or phone number, set `email_confirm` or `phone_confirm` to true. Both arguments default to false.
-    examples:
-      - name: Create a new user with custom user metadata
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.createUser({
-            email: 'user@email.com',
-            password: 'password',
-            user_metadata: { name: 'Yoda' }
-          })
-          ```
-      - name: Auto-confirm the user's email
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.createUser({
-            email: 'user@email.com',
-            email_confirm: true
-          })
-          ```
-      - name: Auto-confirm the user's phone number
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.createUser({
-            phone: '1234567890',
-            phone_confirm: true
-          })
-          ```
-  auth.admin.deleteUser():
-    title: 'deleteUser()'
-    $ref: '@supabase/gotrue-js.GoTrueAdminApi.deleteUser'
-    notes: |
-      - The `deleteUser()` method requires the user's ID, which maps to the `auth.users.id` column.
-    examples:
-      - name: Removes a user
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.deleteUser(
-            '715ed5db-f090-4b8c-a067-640ecee36aa0'
-          )
-          ```
-
-  auth.admin.inviteUserByEmail():
-    title: 'inviteUserByEmail()'
-    $ref: '@supabase/gotrue-js.GoTrueAdminApi.inviteUserByEmail'
-    notes: |
-      - Sends an invite link to the user's email address.
-    examples:
-      - name: Invite a user
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.inviteUserByEmail('email@example.com')
-          ```
-
-  auth.resetPasswordForEmail():
-    title: 'resetPasswordForEmail()'
-    $ref: '@supabase/gotrue-js.GoTrueClient.resetPasswordForEmail'
-    notes: |
-      Sends a password reset request to an email address.
-      When the user clicks the reset link in the email they are redirected back to your application.
-      Prompt the user for a new password and call `auth.updateUser()`:
-      ```js
-      const { data, error } = await supabase.auth
-        .updateUser({ password: new_password })
-      ```
-    examples:
-      - name: Reset password
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.resetPasswordForEmail(email, {
-            redirectTo: 'https://example.com/update-password',
-          })
-          ```
-      - name: Reset password (React)
-        isSpotlight: true
-        js: |
-          ```js
-          /**
-           * Step 1: Send the user an email to get a password reset token.
-           * This email contains a link which sends the user back to your application.
-           */
-          const { data, error } = await supabase.auth
-            .resetPasswordForEmail('user@email.com')
-
-          /**
-           * Step 2: Once the user is redirected back to your application,
-           * ask the user to reset their password.
-           */
-           useEffect(() => {
-             supabase.auth.onAuthStateChange(async (event, session) => {
-               if (event == "PASSWORD_RECOVERY") {
-                 const newPassword = prompt("What would you like your new password to be?");
-                 const { data, error } = await supabase.auth
-                   .updateUser({ password: newPassword })
-
-                 if (data) alert("Password updated successfully!")
-                 if (error) alert("There was an error updating your password.")
-               }
-             })
-           }, [])
-          ```
-
-  auth.admin.generateLink():
-    title: 'generateLink()'
-    $ref: '@supabase/gotrue-js.GoTrueAdminApi.generateLink'
-    examples:
-      - name: Generate a signup link
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.generateLink({
-            type: 'signup',
-            email: 'email@example.com',
-            options: {
-              'password': 'secret'
-            }
-          })
-          ```
-      - name: Generate an invite link
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.generateLink({
-            type: 'invite',
-            email: 'email@example.com'
-          })
-          ```
-      - name: Generate a magic link
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.generateLink({
-            type: 'magiclink',
-            email: 'email@example.com'
-          })
-          ```
-      - name: Generate a recovery link
-        isSpotlight: false
-        js: |
-          ```js
-          const { data, error } = await supabase.auth.admin.generateLink({
-            type: 'recovery',
-            email: 'email@example.com'
-          })
-          ```
-      - name: Generate links to change current email address
-        isSpotlight: false
-        js: |
-          ```js
-          // generate an email change link to be sent to the current email address
-          const { data, error } = await supabase.auth.admin.generateLink({
-            type: 'email_change_current',
-            email: 'current.email@example.com',
-            newEmail: 'new.email@example.com'
-          })
-
-          // generate an email change link to be sent to the new email address
-          const { data, error } = await supabase.auth.admin.generateLink({
-            type: 'email_change_new',
-            email: 'current.email@example.com',
-            newEmail: 'new.email@example.com'
-          })
-          ```
-
-  auth.admin.updateUserById():
-    title: 'updateUserById()'
-    $ref: '@supabase/gotrue-js.GoTrueAdminApi.updateUserById'
-    examples:
-      - name: Updates a user's email.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.admin.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { email: 'new@email.com' }
-          )
-          ```
-      - name: Updates a user's password.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.admin.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { password: 'new_password' }
-          )
-          ```
-      - name: Updates a user's metadata.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.admin.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { user_metadata: { hello: 'world' } }
-          )
-          ```
-      - name: Updates a user's app_metadata.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.admin.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { app_metadata: { plan: 'trial' } }
-          )
-          ```
-      - name: Confirms a user's email address.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.admin.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { email_confirm: true }
-          )
-          ```
-      - name: Confirms a user's phone number.
-        isSpotlight: false
-        js: |
-          ```js
-          const { data: user, error } = await supabase.auth.admin.updateUserById(
-            '6aa5d0d4-2a9f-4483-b6c8-0cf4c6c98ac4',
-            { phone_confirm: true }
-          )
-          ```
-
-  select():
-    title: 'Fetch data: select()'
-    $ref: '@supabase/postgrest-js.PostgrestQueryBuilder.select'
-    notes: |
-      - By default, Supabase projects return a maximum of 1,000 rows. This setting can be changed in your project's [API settings](https://app.supabase.com/project/_/settings/api). It's recommended that you keep it low to limit the payload size of accidental or malicious requests. You can use `range()` queries to paginate through your data.
-      - `select()` can be combined with [Filters](/docs/reference/javascript/using-filters)
-      - `select()` can be combined with [Modifiers](/docs/reference/javascript/using-modifiers)
-      - `apikey` is a reserved keyword if you're using the [Supabase Platform](/docs/guides/platform) and should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
-    examples:
-      - name: Getting your data
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                },
-                {
-                  "id": 2,
-                  "name": "Albania"
-                },
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-          ```
-      - name: Selecting specific columns
-        description: |
-          You can select specific fields from your tables.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Afghanistan"
-                },
-                {
-                  "name": "Albania"
-                },
-                {
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Query foreign tables
-        description: |
-          If your database has foreign key relationships, you can query related tables too.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Germany'),
-              (2, 'Indonesia');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 2, 'Bali'),
-              (2, 1, 'Munich');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities (
-                  name
-                )
-              `)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Germany",
-                  "cities": [
-                    {
-                      "name": "Munich"
-                    }
-                  ]
-                },
-                {
-                  "name": "Indonesia",
-                  "cities": [
-                    {
-                      "name": "Bali"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Query foreign tables through a join table
-        description: |
-          If you're in a situation where your tables are **NOT** directly
-          related, but instead are joined by a _join table_, you can still use
-          the `select()` method to query the related data. The join table needs
-          to have the foreign keys as part of its composite primary key.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text
-              );
-            create table
-              teams (
-                id int8 primary key,
-                name text
-              );
-            -- join table
-            create table
-              users_teams (
-                user_id int8 not null references users,
-                team_id int8 not null references teams,
-                -- both foreign keys must be part of a composite primary key
-                primary key (user_id, team_id)
-              );
-
-            insert into
-              users (id, name)
-            values
-              (1, 'Kiran'),
-              (2, 'Evan');
-            insert into
-              teams (id, name)
-            values
-              (1, 'Green'),
-              (2, 'Blue');
-            insert into
-              users_teams (user_id, team_id)
-            values
-              (1, 1),
-              (1, 2),
-              (2, 2);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .select(`
-                name,
-                teams (
-                  name
-                )
-              `)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Kiran",
-                  "teams": [
-                    {
-                      "name": "Green"
-                    },
-                    {
-                      "name": "Blue"
-                    }
-                  ]
-                },
-                {
-                  "name": "Evan",
-                  "teams": [
-                    {
-                      "name": "Blue"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Query the same foreign table multiple times
-        description: |
-          If you need to query the same foreign table twice, use the name of the
-          joined column to identify which join to use. You can also give each
-          column an alias.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (id int8 primary key, name text);
-
-            create table
-              messages (
-                sender_id int8 not null references users,
-                receiver_id int8 not null references users,
-                content text
-              );
-
-            insert into
-              users (id, name)
-            values
-              (1, 'Kiran'),
-              (2, 'Evan');
-
-            insert into
-              messages (sender_id, receiver_id, content)
-            values
-              (1, 2, '👋');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('messages')
-              .select(`
-                content,
-                from:sender_id(name),
-                to:receiver_id(name)
-              `)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "content": "👋",
-                  "from": {
-                    "name": "Kiran"
-                  },
-                  "to": {
-                    "name": "Evan"
-                  }
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Filtering through foreign tables
-        description: |
-          If the filter on a foreign table's column is not satisfied, the foreign
-          table returns `[]` or `null` but the parent table is not filtered out.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Germany'),
-              (2, 'Indonesia');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 2, 'Bali'),
-              (2, 1, 'Munich');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('cities')
-              .select('name, countries(*)')
-              .eq('countries.name', 'Estonia')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Bali",
-                  "countries": null
-                },
-                {
-                  "name": "Munich",
-                  "countries": null
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          If you want to filter out the parent table rows, use the `!inner` hint:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('cities')
-              .select('name, countries!inner(*)')
-              .eq('countries.name', 'Estonia')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Querying with count option
-        description: |
-          You can get the number of rows by using the
-          [count](/docs/reference/javascript/select#parameters) option. For
-          example, to get the table count without returning all rows:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { count, error } = await supabase
-              .from('countries')
-              .select('*', { count: 'exact', head: true })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "count": 3,
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Querying JSON data
-        description: |
-          You can select and filter data inside of
-          [JSON](/docs/guides/database/json) columns. Postgres offers some
-          [operators](/docs/guides/database/json#query-the-jsonb-data) for
-          querying JSON data.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text,
-                address jsonb
-              );
-
-            insert into
-              users (id, name, address)
-            values
-              (1, 'Avdotya', '{"city":"Saint Petersburg"}');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-          ```ts
-          const { data, error } = await supabase
-            .from('users')
-            .select(`
-              id, name,
-              address->city
-            `)
-          ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Avdotya",
-                  "city": "Saint Petersburg"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  insert():
-    title: 'Create data: insert()'
-    $ref: '@supabase/postgrest-js.PostgrestQueryBuilder.insert'
-    examples:
-      - name: Create a record
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { error } = await supabase
-              .from('countries')
-              .insert({ id: 1, name: 'Denmark' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Denmark"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { error } = await supabase
-            .from('countries')
-            .insert({ id: 1, name: 'Denmark' })
-          ```
-      - name: Create a record and return it
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .insert({ id: 1, name: 'Denmark' })
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Denmark"
-                }
-              ],
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Bulk create
-        description: |
-          A bulk create operation is handled in a single transaction.
-          If any of the inserts fail, none of the rows are inserted.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { error } = await supabase
-              .from('countries')
-              .insert([
-                { id: 1, name: 'Nepal' },
-                { id: 1, name: 'Vietnam' },
-              ])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "error": {
-                "code": "23505",
-                "details": "Key (id)=(1) already exists.",
-                "hint": null,
-                "message": "duplicate key value violates unique constraint \"countries_pkey\""
-              },
-              "status": 409,
-              "statusText": "Conflict"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  update():
-    title: 'Modify data: update()'
-    $ref: '@supabase/postgrest-js.PostgrestQueryBuilder.update'
-    notes: |
-      - `update()` should always be combined with [Filters](/docs/reference/javascript/using-filters) to target the item(s) you wish to update.
-    examples:
-      - name: Updating your data
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Taiwan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { error } = await supabase
-              .from('countries')
-              .update({ name: 'Australia' })
-              .eq('id', 1)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 204,
-              "statusText": "No Content"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Australia"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { error } = await supabase
-            .from('countries')
-            .update({ name: 'Australia' })
-            .eq('id', 1)
-          ```
-      - name: Update a record and return it
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Taiwan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .update({ name: 'Australia' })
-              .eq('id', 1)
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Australia"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Updating JSON data
-        description: |
-          Postgres offers some
-          [operators](/docs/guides/database/json#query-the-jsonb-data) for
-          working with JSON data.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text,
-                address jsonb
-              );
-
-            insert into
-              users (id, name, address)
-            values
-              (1, 'Michael', '{ "postcode": 90210 }');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .update({
-                address: {
-                  street: 'Melrose Place',
-                  postcode: 90210
-                }
-              })
-              .eq('address->postcode', 90210)
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Michael",
-                  "address": {
-                    "street": "Melrose Place",
-                    "postcode": 90210
-                  }
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          Currently, it is only possible to update the entire JSON document.
-        hideCodeBlock: true
-
-  upsert():
-    title: 'Upsert data: upsert()'
-    $ref: '@supabase/postgrest-js.PostgrestQueryBuilder.upsert'
-    notes: |
-      - Primary keys must be included in `values` to use upsert.
-    examples:
-      - name: Upsert your data
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .upsert({ id: 1, name: 'Albania' })
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Albania"
-                }
-              ],
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .upsert({ id: 1, name: 'Albania' })
-            .select()
-          ```
-      - name: Bulk Upsert your data
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .upsert([
-                { id: 1, name: 'Albania' },
-                { id: 2, name: 'Algeria' },
-              ])
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Albania"
-                },
-                {
-                  "id": 2,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Upserting into tables with constraints
-        description: |
-          In the following query, `upsert()` implicitly uses the `id`
-          (primary key) column to determine conflicts. If there is no existing
-          row with the same `id`, `upsert()` inserts a new row, which
-          will fail in this case as there is already a row with `handle` `"saoirse"`.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 generated by default as identity primary key,
-                handle text not null unique,
-                display_name text
-              );
-
-            insert into
-              users (id, handle, display_name)
-            values
-              (1, 'saoirse', null);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .upsert({ id: 42, handle: 'saoirse', display_name: 'Saoirse' })
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "error": {
-                "code": "23505",
-                "details": "Key (handle)=(saoirse) already exists.",
-                "hint": null,
-                "message": "duplicate key value violates unique constraint \"users_handle_key\""
-              },
-              "status": 409,
-              "statusText": "Conflict"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          Using the `onConflict` option, you can instruct `upsert()` to use
-          another column with a unique constraint to determine conflicts:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            await supabase
-              .from('users')
-              .upsert(
-                { id: 42, handle: 'saoirse', display_name: 'Saoirse' },
-                { onConflict: 'handle' },
-              )
-            const { data, error } = await supabase
-              .from('users')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 42,
-                  "handle": "saoirse",
-                  "display_name": "Saoirse"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  delete():
-    title: 'Delete data: delete()'
-    $ref: '@supabase/postgrest-js.PostgrestQueryBuilder.delete'
-    notes: |
-      - `delete()` should always be combined with [filters](/docs/reference/javascript/using-filters) to target the item(s) you wish to delete.
-      - If you use `delete()` with filters and you have
-        [RLS](/docs/learn/auth-deep-dive/auth-row-level-security) enabled, only
-        rows visible through `SELECT` policies are deleted. Note that by default
-        no rows are visible, so you need at least one `SELECT`/`ALL` policy that
-        makes the rows visible.
-    examples:
-      - name: Delete records
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Spain');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { error } = await supabase
-              .from('countries')
-              .delete()
-              .eq('id', 1)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 204,
-              "statusText": "No Content"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { error } = await supabase
-            .from('countries')
-            .delete()
-            .eq('id', 1)
-          ```
-
-  rpc():
-    title: 'Postgres functions: rpc()'
-    description: |
-      You can call Postgres functions as _Remote Procedure Calls_, logic in your database that you can execute from anywhere.
-      Functions are useful when the logic rarely changes—like for password resets and updates.
-
-      ```sql
-      create or replace function hello_world() returns text as $$
-        select 'Hello world';
-      $$ language sql;
-      ```
-    $ref: '@supabase/postgrest-js.PostgrestClient.rpc'
-    examples:
-      - name: Call a Postgres function without arguments
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create function hello_world() returns text as $$
-              select 'Hello world';
-            $$ language sql;
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase.rpc('hello_world')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": "Hello world",
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase.rpc('hello_world')
-          ```
-      - name: Call a Postgres function with arguments
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create function echo(say text) returns text as $$
-              select say;
-            $$ language sql;
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase.rpc('echo', { say: '👋' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": "👋",
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Bulk processing
-        description: |
-          You can process large payloads by passing in an array as an argument:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create function add_one_each(arr int[]) returns int[] as $$
-              select array_agg(n + 1) from unnest(arr) as n;
-            $$ language sql;
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase.rpc('add_one_each', { arr: [1, 2, 3] })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                2,
-                3,
-                4
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Call a Postgres function with filters
-        description: |
-          Postgres functions that return tables can also be combined with
-          [Filters](/docs/reference/javascript/using-filters) and
-          [Modifiers](/docs/reference/javascript/using-modifiers).
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'France'),
-              (2, 'United Kingdom');
-
-            create function list_stored_countries() returns setof countries as $$
-              select * from countries;
-            $$ language sql;
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .rpc('list_stored_countries')
-              .eq('id', 1)
-              .single()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": {
-                "id": 1,
-                "name": "France"
-              },
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  Using Filters:
-    description: |
-      Filters allow you to only return rows that match certain conditions.
-
-      Filters can be used on `select()`, `update()`, `upsert()`, and `delete()` queries.
-
-      If a Postgres function returns a table response, you can also apply filters.
-
-      ### Applying Filters
-
-      Filters must be applied after any of `select()`, `update()`, `upsert()`,
-      `delete()`, and `rpc()` and before
-      [modifiers](/docs/reference/javascript/using-modifiers).
-
-      ```ts
-      const { data, error } = await supabase
-        .from('cities')
-        .select('name, country_id')
-        .eq('name', 'The Shire')    // Correct
-
-      const { data, error } = await supabase
-        .from('cities')
-        .eq('name', 'The Shire')    // Incorrect
-        .select('name, country_id')
-      ```
-
-      ### Chaining
-
-      Filters can be chained together to produce advanced queries. For example,
-      to query cities with population between 1,000 and 10,000:
-
-      ```ts
-      const { data, error } = await supabase
-        .from('cities')
-        .select('name, country_id')
-        .gte('population', 1000)
-        .lt('population', 10000)
-      ```
-
-      ### Conditional Chaining
-
-      Filters can be built up one step at a time and then executed. For example:
-
-      ```ts
-      const filterByName = null
-      const filterPopLow = 1000
-      const filterPopHigh = 10000
-
-      let query = supabase
-        .from('cities')
-        .select('name, country_id')
-
-      if (filterByName)  { query = query.eq('name', filterByName) }
-      if (filterPopLow)  { query = query.gte('population', filterPopLow) }
-      if (filterPopHigh) { query = query.lt('population', filterPopHigh) }
-
-      const { data, error } = await query
-      ```
-
-      ### Filter by values within a JSON column
-
-      <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-      <TabPanel id="schema" label="Schema">
-
-        ```sql
-        create table
-          users (
-            id int8 primary key,
-            name text,
-            address jsonb
-          );
-
-        insert into
-          users (id, name, address)
-        values
-          (1, 'Michael', '{ "postcode": 90210 }'),
-          (2, 'Jane', null);
-        ```
-
-      </TabPanel>
-      <TabPanel id="js" label="JavaScript">
-
-        ```ts
-        const { data, error } = await supabase
-          .from('users')
-          .select()
-          .eq('address->postcode', 90210)
-        ```
-
-      </TabPanel>
-      <TabPanel id="result" label="Result">
-
-        ```json
-        {
-          "data": [
-            {
-              "id": 1,
-              "name": "Michael",
-              "address": {
-                "postcode": 90210
-              }
-            }
-          ],
-          "status": 200,
-          "statusText": "OK"
-        }
-        ```
-
-      </TabPanel>
-      </Tabs>
-
-      ### Filter Foreign Tables
-
-      You can filter on foreign tables in your `select()` query using dot
-      notation:
-
-      <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-      <TabPanel id="schema" label="Schema">
-
-        ```sql
-        create table
-          countries (id int8 primary key, name text);
-        create table
-          cities (
-            id int8 primary key,
-            country_id int8 not null references countries,
-            name text
-          );
-
-        insert into
-          countries (id, name)
-        values
-          (1, 'Germany'),
-          (2, 'Indonesia');
-        insert into
-          cities (id, country_id, name)
-        values
-          (1, 2, 'Bali'),
-          (2, 1, 'Munich');
-        ```
-
-      </TabPanel>
-      <TabPanel id="js" label="JavaScript">
-
-        ```ts
-        const { data, error } = await supabase
-          .from('countries')
-          .select(`
-            name,
-            cities!inner (
-              name
-            )
-          `)
-          .eq('cities.name', 'Bali')
-        ```
-
-      </TabPanel>
-      <TabPanel id="result" label="Result">
-
-        ```json
-        {
-          "data": [
-            {
-              "name": "Indonesia",
-              "cities": [
-                {
-                  "name": "Bali"
-                }
-              ]
-            }
-          ],
-          "status": 200,
-          "statusText": "OK"
-        }
-        ```
-
-      </TabPanel>
-      </Tabs>
-
-  eq():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.eq'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .eq('name', 'Albania')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .eq('name', 'Albania')
-          ```
-
-  neq():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.neq'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .neq('name', 'Albania')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                },
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .neq('name', 'Albania')
-          ```
-
-  gt():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.gt'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .gt('id', 2)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .gt('id', 2)
-          ```
-
-  gte():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.gte'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .gte('id', 2)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                },
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .gte('id', 2)
-          ```
-
-  lt():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.lt'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .lt('id', 2)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .lt('id', 2)
-          ```
-
-  lte():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.lte'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .lte('id', 2)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                },
-                {
-                  "id": 2,
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .lte('id', 2)
-          ```
-
-  like():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.like'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .like('name', '%Alba%')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .like('name', '%Alba%')
-          ```
-
-  ilike():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.ilike'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .ilike('name', '%alba%')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .ilike('name', '%alba%')
-          ```
-
-  is():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.is'
-    examples:
-      - name: Checking nullness
-        description: |
-          Using the `eq()` filter doesn't work when filtering for `null`:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'null'),
-              (2, null);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .eq('name', null)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "null"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          Instead, you need to use `is()`:
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .is('name', null)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": null
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .is('name', null)
-          ```
-
-  in():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.in'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .in('name', ['Albania', 'Algeria'])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "name": "Albania"
-                },
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .in('name', ['Albania', 'Algeria'])
-          ```
-
-  contains():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.contains'
-    examples:
-      - name: On array columns
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              issues (
-                id int8 primary key,
-                title text,
-                tags text[]
-              );
-
-            insert into
-              issues (id, title, tags)
-            values
-              (1, 'Cache invalidation is not working', array['is:open', 'severity:high', 'priority:low']),
-              (2, 'Use better names', array['is:open', 'severity:low', 'priority:medium']);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('issues')
-              .select('title')
-              .contains('tags', ['is:open', 'severity:high'])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "title": "Cache invalidation is not working"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('users')
-            .select()
-            .contains('name', ['is:online', 'faction:red'])
-          ```
-      - name: On range columns
-        description: |
-          Postgres supports a number of [range
-          types](https://www.postgresql.org/docs/current/rangetypes.html). You
-          can filter on range columns using the string representation of range
-          values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .contains('during', '[2000-01-01 13:00, 2000-01-01 13:30)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: On `jsonb` columns
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text,
-                address jsonb
-              );
-
-            insert into
-              users (id, name, address)
-            values
-              (1, 'Michael', '{ "postcode": 90210, "street": "Melrose Place" }'),
-              (2, 'Jane', '{}');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .select('name')
-              .contains('address', { postcode: 90210 })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Michael"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  containedBy():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.containedBy'
-    examples:
-      - name: On array columns
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              classes (
-                id int8 primary key,
-                name text,
-                days text[]
-              );
-
-            insert into
-              classes (id, name, days)
-            values
-              (1, 'Chemistry', array['monday', 'friday']),
-              (2, 'History', array['monday', 'wednesday', 'thursday']);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('classes')
-              .select('name')
-              .containedBy('days', ['monday', 'tuesday', 'wednesday', 'friday'])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Chemistry"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('classes')
-            .select('name')
-            .containedBy('days', ['monday', 'tuesday', 'wednesday', 'friday'])
-          ```
-      - name: On range columns
-        description: |
-          Postgres supports a number of [range
-          types](https://www.postgresql.org/docs/current/rangetypes.html). You
-          can filter on range columns using the string representation of range
-          values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .containedBy('during', '[2000-01-01 00:00, 2000-01-01 23:59)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: On `jsonb` columns
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              users (
-                id int8 primary key,
-                name text,
-                address jsonb
-              );
-
-            insert into
-              users (id, name, address)
-            values
-              (1, 'Michael', '{ "postcode": 90210, "street": "Melrose Place" }'),
-              (2, 'Jane', '{}');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('users')
-              .select('name')
-              .containedBy('address', {})
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Jane"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  rangeGt():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.rangeGt'
-    examples:
-      - name: With `select()`
-        description: |
-          Postgres supports a number of [range
-          types](https://www.postgresql.org/docs/current/rangetypes.html). You
-          can filter on range columns using the string representation of range
-          values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeGt('during', '[2000-01-02 08:00, 2000-01-02 09:00)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "room_name": "Topaz",
-                  "during": "[\"2000-01-02 09:00:00\",\"2000-01-02 10:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('reservations')
-            .select()
-            .rangeGt('during', '[2000-01-02 08:00, 2000-01-02 09:00)')
-          ```
-
-  rangeGte():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.rangeGte'
-    examples:
-      - name: With `select()`
-        description: |
-          Postgres supports a number of [range
-          types](https://www.postgresql.org/docs/current/rangetypes.html). You
-          can filter on range columns using the string representation of range
-          values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeGte('during', '[2000-01-02 08:30, 2000-01-02 09:30)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 2,
-                  "room_name": "Topaz",
-                  "during": "[\"2000-01-02 09:00:00\",\"2000-01-02 10:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('reservations')
-            .select()
-            .rangeGte('during', '[2000-01-02 08:30, 2000-01-02 09:30)')
-          ```
-
-  rangeLt():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.rangeLt'
-    examples:
-      - name: With `select()`
-        description: |
-          Postgres supports a number of [range
-          types](https://www.postgresql.org/docs/current/rangetypes.html). You
-          can filter on range columns using the string representation of range
-          values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeLt('during', '[2000-01-01 15:00, 2000-01-01 16:00)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('reservations')
-            .select()
-            .rangeLt('during', '[2000-01-01 15:00, 2000-01-01 16:00)')
-          ```
-
-  rangeLte():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.rangeLte'
-    examples:
-      - name: With `select()`
-        description: |
-          Postgres supports a number of [range
-          types](https://www.postgresql.org/docs/current/rangetypes.html). You
-          can filter on range columns using the string representation of range
-          values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeLte('during', '[2000-01-01 14:00, 2000-01-01 16:00)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('reservations')
-            .select()
-            .rangeLte('during', '[2000-01-01 14:00, 2000-01-01 16:00)')
-          ```
-
-  rangeAdjacent():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.rangeAdjacent'
-    examples:
-      - name: With `select()`
-        description: |
-          Postgres supports a number of [range
-          types](https://www.postgresql.org/docs/current/rangetypes.html). You
-          can filter on range columns using the string representation of range
-          values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .rangeAdjacent('during', '[2000-01-01 12:00, 2000-01-01 13:00)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('reservations')
-            .select()
-            .rangeAdjacent('during', '[2000-01-01 12:00, 2000-01-01 13:00)')
-          ```
-
-  overlaps():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.overlaps'
-    examples:
-      - name: On array columns
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              issues (
-                id int8 primary key,
-                title text,
-                tags text[]
-              );
-
-            insert into
-              issues (id, title, tags)
-            values
-              (1, 'Cache invalidation is not working', array['is:open', 'severity:high', 'priority:low']),
-              (2, 'Use better names', array['is:open', 'severity:low', 'priority:medium']);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('issues')
-              .select('title')
-              .overlaps('tags', ['is:closed', 'severity:high'])
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "title": "Cache invalidation is not working"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('issues')
-            .select('title')
-            .overlaps('tags', ['is:closed', 'severity:high'])
-          ```
-      - name: On range columns
-        description: |
-          Postgres supports a number of [range
-          types](https://www.postgresql.org/docs/current/rangetypes.html). You
-          can filter on range columns using the string representation of range
-          values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              reservations (
-                id int8 primary key,
-                room_name text,
-                during tsrange
-              );
-
-            insert into
-              reservations (id, room_name, during)
-            values
-              (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
-              (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('reservations')
-              .select()
-              .overlaps('during', '[2000-01-01 12:45, 2000-01-01 13:15)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "room_name": "Emerald",
-                  "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  # TODO: schema & result
-  textSearch():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.textSearch'
-    notes:
-      - For more information, see [Postgres full text search](/docs/guides/database/full-text-search).
-    examples:
-      - name: Text search
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', `'fat' & 'cat'`, {
-              config: 'english'
-            })
-          ```
-      - name: Basic normalization
-        description: Uses PostgreSQL's `plainto_tsquery` function.
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', `'fat' & 'cat'`, {
-              type: 'plain',
-              config: 'english'
-            })
-          ```
-      - name: Full normalization
-        description: Uses PostgreSQL's `phraseto_tsquery` function.
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', `'fat' & 'cat'`, {
-              type: 'phrase',
-              config: 'english'
-            })
-          ```
-      - name: Websearch
-        description: |
-          Uses PostgreSQL's `websearch_to_tsquery` function.
-          This function will never raise syntax errors, which makes it possible to use raw user-supplied input for search, and can be used
-          with advanced operators.
-
-          - `unquoted text`: text not inside quote marks will be converted to terms separated by & operators, as if processed by plainto_tsquery.
-          - `"quoted text"`: text inside quote marks will be converted to terms separated by <-> operators, as if processed by phraseto_tsquery.
-          - `OR`: the word “or” will be converted to the | operator.
-          - `-`: a dash will be converted to the ! operator.
-
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('quotes')
-            .select('catchphrase')
-            .textSearch('catchphrase', `'fat or cat'`, {
-              type: 'websearch',
-              config: 'english'
-            })
-          ```
-
-  match():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.match'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .match({ id: 2, name: 'Albania' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name')
-            .match({ id: 2, name: 'Albania' })
-          ```
-
-  not():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.not'
-    notes: |
-      not() expects you to use the raw PostgREST syntax for the filter values.
-
-      ```ts
-      .not('id', 'in', '(5,6,7)')  // Use `()` for `in` filter
-      .not('arraycol', 'cs', '{"a","b"}')  // Use `cs` for `contains()`, `{}` for array values
-      ```
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'null'),
-              (2, null);
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .not('name', 'is', null)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "null"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .not('name', 'is', null)
-          ```
-
-  or():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.or'
-    notes: |
-      or() expects you to use the raw PostgREST syntax for the filter names and values.
-
-      ```ts
-      .or('id.in.(5,6,7), arraycol.cs.{"a","b"}')  // Use `()` for `in` filter, `{}` for array values and `cs` for `contains()`.
-      .or('id.in.(5,6,7), arraycol.cd.{"a","b"}')  // Use `cd` for `containedBy()`
-      ```
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .or('id.eq.2,name.eq.Algeria')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Albania"
-                },
-                {
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name')
-            .or('id.eq.2,name.eq.Algeria')
-          ```
-      - name: Use `or` with `and`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .or('id.gt.3,and(id.eq.1,name.eq.Afghanistan)')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Afghanistan"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-      - name: Use `or` on foreign tables
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Germany'),
-              (2, 'Indonesia');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 2, 'Bali'),
-              (2, 1, 'Munich');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities!inner (
-                  name
-                )
-              `)
-              .or('country_id.eq.1,name.eq.Beijing', { foreignTable: 'cities' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Germany",
-                  "cities": [
-                    {
-                      "name": "Munich"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  filter():
-    $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.filter'
-    notes: |
-      filter() expects you to use the raw PostgREST syntax for the filter values.
-
-      ```ts
-      .filter('id', 'in', '(5,6,7)')  // Use `()` for `in` filter
-      .filter('arraycol', 'cs', '{"a","b"}')  // Use `cs` for `contains()`, `{}` for array values
-      ```
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .filter('name', 'in', '("Algeria","Japan")')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .filter('name', 'in', '("Algeria","Japan")')
-          ```
-      - name: On a foreign table
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Germany'),
-              (2, 'Indonesia');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 2, 'Bali'),
-              (2, 1, 'Munich');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities!inner (
-                  name
-                )
-              `)
-              .filter('cities.name', 'eq', 'Bali')
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Indonesia",
-                  "cities": [
-                    {
-                      "name": "Bali"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select(`
-              name,
-              cities!inner (
-                name
-              )
-            `)
-            .filter('cities.name', 'eq', 'Bali')
-          ```
-
-  Using Modifiers:
-    description: |
-      Filters work on the row level—they allows you to return rows that
-      only match certain conditions without changing the shape of the rows.
-      Modifiers are everything that don't fit that definition—allowing you to
-      change the format of the response (e.g., returning a CSV string).
-
-      Modifiers must be specified after filters. Some modifiers only apply for
-      queries that return rows (e.g., `select()` or `rpc()` on a function that
-      returns a table response).
-
-  db.modifiers.select():
-    $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.select'
-    title: select()
-    examples:
-      - name: With `upsert()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .upsert({ id: 1, name: 'Albania' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .upsert({ id: 1, name: 'Algeria' })
-              .select()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 1,
-                  "name": "Algeria"
-                }
-              ],
-              "status": 201,
-              "statusText": "Created"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .upsert({ id: 1, name: 'Algeria' })
-            .select()
-          ```
-
-  order():
-    $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.order'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .order('name', { ascending: false })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "id": 3,
-                  "name": "Algeria"
-                },
-                {
-                  "id": 2,
-                  "name": "Albania"
-                },
-                {
-                  "id": 1,
-                  "name": "Afghanistan"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('cities')
-            .select('name', 'country_id')
-            .order('id', { ascending: false })
-          ```
-      - name: On a foreign table
-        description: |
-          Ordering on foreign tables doesn't affect the ordering of
-          the parent table.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'United States'),
-              (2, 'Vanuatu');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 1, 'Atlanta'),
-              (2, 1, 'New York City');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities (
-                  name
-                )
-              `)
-              .order('name', { foreignTable: 'cities', ascending: false })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "United States",
-                  "cities": [
-                    {
-                      "name": "New York City"
-                    },
-                    {
-                      "name": "Atlanta"
-                    }
-                  ]
-                },
-                {
-                  "name": "Vanuatu",
-                  "cities": []
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  limit():
-    $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.limit'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .limit(1)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Afghanistan"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name')
-            .limit(1)
-          ```
-      - name: On a foreign table
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-            create table
-              cities (
-                id int8 primary key,
-                country_id int8 not null references countries,
-                name text
-              );
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'United States');
-            insert into
-              cities (id, country_id, name)
-            values
-              (1, 1, 'Atlanta'),
-              (2, 1, 'New York City');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select(`
-                name,
-                cities (
-                  name
-                )
-              `)
-              .limit(1, { foreignTable: 'cities' })
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "United States",
-                  "cities": [
-                    {
-                      "name": "Atlanta"
-                    }
-                  ]
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-
-  range():
-    $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.range'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .range(0, 1)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": [
-                {
-                  "name": "Afghanistan"
-                },
-                {
-                  "name": "Albania"
-                }
-              ],
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name')
-            .range(0, 1)
-          ```
-
-  db.abortSignal():
-    $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.abortSignal'
-    title: abortSignal()
-    examples:
-      - name: Aborting requests in-flight
-        description: |
-          You can use an [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to abort requests. Note that `status` and `statusText` don't mean anything for aborted requests as the request wasn't fulfilled.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="js">
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const ac = new AbortController()
-            ac.abort()
-            const { data, error } = await supabase
-              .from('very_big_table')
-              .select()
-              .abortSignal(ac.signal)
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "error": {
-                "message": "FetchError: The user aborted a request.",
-                "details": "",
-                "hint": "",
-                "code": ""
-              },
-              "status": 400,
-              "statusText": "Bad Request"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const ac = new AbortController()
-          ac.abort()
-          const { data, error } = await supabase
-            .from('very_big_table')
-            .select()
-            .abortSignal(ac.signal)
-          ```
-
-  single():
-    $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.single'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select('name')
-              .limit(1)
-              .single()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": {
-                "name": "Afghanistan"
-              },
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select('name')
-            .limit(1)
-            .single()
-          ```
-
-  maybeSingle():
-    $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.maybeSingle'
-    examples:
-      - name: With `select()`
-        description: |
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .eq('name', 'Singapore')
-              .maybeSingle()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .eq('name', 'Singapore')
-            .maybeSingle()
-          ```
-
-  db.csv():
-    $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.csv'
-    title: csv()
-    examples:
-      - name: Return data as CSV
-        description: |
-          By default, the data is returned in JSON format, but can also be returned as Comma Separated Values.
-
-          <Tabs scrollable size="small" type="underlined" defaultActiveId="schema">
-          <TabPanel id="schema" label="Schema">
-
-            ```sql
-            create table
-              countries (id int8 primary key, name text);
-
-            insert into
-              countries (id, name)
-            values
-              (1, 'Afghanistan'),
-              (2, 'Albania'),
-              (3, 'Algeria');
-            ```
-
-          </TabPanel>
-          <TabPanel id="js" label="JavaScript">
-
-            ```ts
-            const { data, error } = await supabase
-              .from('countries')
-              .select()
-              .csv()
-            ```
-
-          </TabPanel>
-          <TabPanel id="result" label="Result">
-
-            ```json
-            {
-              "data": "id,name\n1,Afghanistan\n2,Albania\n3,Algeria",
-              "status": 200,
-              "statusText": "OK"
-            }
-            ```
-
-          </TabPanel>
-          </Tabs>
-        hideCodeBlock: true
-        isSpotlight: true
-        js: |
-          ```ts
-          const { data, error } = await supabase
-            .from('countries')
-            .select()
-            .csv()
-          ```
-
-  # NOTE: Not available on currently deployed PostgREST
-  # db.geojson():
-  #   $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.geojson'
-  #   title: geojson()
-
-  # NOTE: Not available on currently deployed PostgREST
-  # db.explain():
-  #   $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.explain'
-  #   title: explain()
-
-  # NOTE: Not available on currently deployed PostgREST
-  # db.rollback():
-  #   $ref: '@supabase/postgrest-js.PostgrestTransformBuilder.rollback'
-  #   title: rollback()
-  #   examples:
-  #     - name: With `delete()`
-  #       description: |
-  #         <details>
-  #           <summary>Schema</summary>
-
-  #           ```sql
-  #           create table
-  #             countries (id int8 primary key, name text);
-
-  #           insert into
-  #             countries (id, name)
-  #           values
-  #             (1, 'Spain');
-  #           ```
-  #         </details>
-
-  #         ```ts
-  #         const { error } = await supabase
-  #           .from('countries')
-  #           .delete()
-  #           .eq('id', 1)
-  #           .rollback()
-  #         ```
-
-  #         <details>
-  #           <summary>Result</summary>
-
-  #           ```json
-  #           {
-  #             "status": 204,
-  #             "statusText": "No Content"
-  #           }
-  #           ```
-  #         </details>
-
-  #         ```ts
-  #         const { data, error } = await supabase
-  #           .from('countries')
-  #           .select()
-  #         ```
-
-  #         <details>
-  #           <summary>Result</summary>
-
-  #           ```json
-  #           {
-  #             "data": [
-  #               {
-  #                 "id": 1,
-  #                 "name": "Spain"
-  #               }
-  #             ],
-  #             "status": 200,
-  #             "statusText": "OK"
-  #           }
-  #           ```
-  #         </details>
-  #       hideCodeBlock: true
-  #       isSpotlight: true
-  #       js: |
-  #         ```ts
-  #         const { error } = await supabase
-  #           .from('countries')
-  #           .delete()
-  #           .eq('id', 1)
-  #         ```
-
-  invoke():
-    title: 'invoke()'
-    description: |
-      Invoke a Supabase Function.
-    $ref: '@supabase/functions-js.FunctionsClient.invoke'
-    notes: |
-      - Requires an Authorization header.
-      - Invoke params generally match the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) spec.
-      - When you pass in a body to your function, we automatically attach the Content-Type header for `Blob`, `ArrayBuffer`, `File`, `FormData` and `String`. If it doesn't match any of these types we assume the payload is `json`, serialise it and attach the `Content-Type` header as `application/json`. You can override this behaviour by passing in a `Content-Type` header of your own.
-      - Responses are automatically parsed as `json`, `blob` and `form-data` depending on the `Content-Type` header sent by your function. Responses are parsed as `text` by default.
-    examples:
-      - name: Basic invocation.
-        description:
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.functions.invoke('hello', {
-            body: { foo: 'bar' }
-          })
-          ```
-      - name: Error handling.
-        description: |
-          A `FunctionsHttpError` error is returned if your function throws an error, `FunctionsRelayError` if the Supabase Relay has an error processing your function and `FunctionsFetchError` if there is a network error in calling your function.
-        isSpotlight: true
-        js: |
-          ```js
-          import { FunctionsHttpError, FunctionsRelayError, FunctionsFetchError } from "@supabase/supabase-js";
-
-          const { data, error } = await supabase.functions.invoke('hello', {
-            headers: {
-              "my-custom-header": 'my-custom-header-value'
-            },
-            body: { foo: 'bar' }
-          })
-
-          if (error instanceof FunctionsHttpError) {
-            console.log('Function returned an error', error.message)
-          } else if (error instanceof FunctionsRelayError) {
-            console.log('Relay error:', error.message)
-          } else if (error instanceof FunctionsFetchError) {
-            console.log('Fetch error:', error.message)
-          }
-          ```
-      - name: Passing custom headers.
-        description: |
-          You can pass custom headers to your function. Note: supabase-js automatically passes the `Authorization` header with the signed in user's JWT.
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase.functions.invoke('hello', {
-            headers: {
-              "my-custom-header": 'my-custom-header-value'
-            },
-            body: { foo: 'bar' }
-          })
-          ```
-
-  subscribe():
-    title: 'on().subscribe()'
-    $ref: '@supabase/realtime-js.RealtimeChannel.on'
-    notes: |
-      - Realtime is disabled by default for new Projects for better database performance and security. You can turn it on by [managing replication](/docs/guides/api#managing-realtime).
-      - Row level security is not applied to delete statements.
-      - If you want to receive the "previous" data for updates and deletes, you will need to set `REPLICA IDENTITY` to `FULL`, like this: `ALTER TABLE your_table REPLICA IDENTITY FULL;`
-      - When a delete occurs, the contents of old_record will be broadcast to all subscribers to that table so ensure that each table's replica identity only contains information that is safe to expose publicly.
-      - The channel name must exactly match the schema/table/filter you want to listen to separated by colons. See below examples for additional context.
-    examples:
-      - name: Listen to all database changes
-        isSpotlight: true
-        js: |
-          ```js
-          supabase
-            .channel('*')
-            .on('postgres_changes', { event: '*', schema: '*' }, payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to a specific table
-        js: |
-          ```js
-          supabase
-            .channel('public:countries')
-            .on('postgres_changes', { event: '*', schema: 'public', table: 'countries' }, payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to inserts
-        js: |
-          ```js
-          supabase
-            .channel('public:countries')
-            .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'countries' }, payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to updates
-        description: |
-          By default, Supabase will send only the updated record. If you want to receive the previous values as well you can
-          enable full replication for the table you are listening to:
-
-          ```sql
-          alter table "your_table" replica identity full;
-          ```
-        js: |
-          ```js
-          supabase
-            .channel('public:countries')
-            .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'countries' }, payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to deletes
-        description: |
-          By default, Supabase does not send deleted records. If you want to receive the deleted record you can
-          enable full replication for the table you are listening too:
-
-          ```sql
-          alter table "your_table" replica identity full;
-          ```
-        js: |
-          ```js
-          supabase
-            .channel('public:countries')
-            .on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'countries' }, payload => {
-              console.log('Change received!', payload)
-            })
-            .subscribe()
-          ```
-      - name: Listening to multiple events
-        description: You can chain listeners if you want to listen to multiple events for each table.
-        js: |
-          ```js
-          supabase
-            .channel('public:countries')
-            .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'countries' }, handleRecordInserted)
-            .on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'countries' }, handleRecordDeleted)
-            .subscribe()
-          ```
-      - name: Listening to row level changes
-        description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.
-        notes: |
-          - ``eq`` filter works with all database types as under the hood, it's casting both the filter value and the database value to the correct type and then comparing them.
-        js: |
-          ```js
-          supabase
-            .channel('public:countries:id=eq.200')
-            .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'countries', filter: 'id=eq.200' }, handleRecordUpdated)
-            .subscribe()
-          ```
-
-  getChannels():
-    title: 'getChannels()'
-    $ref: '@supabase/supabase-js.index.SupabaseClient.getChannels'
-    examples:
-      - name: Get all channels
-        isSpotlight: true
-        js: |
-          ```js
-          const channels = supabase.getChannels()
-          ```
-
-  removeChannel():
-    title: 'removeChannel()'
-    $ref: '@supabase/supabase-js.index.SupabaseClient.removeChannel'
-    notes: |
-      - Removing a channel is a great way to maintain the performance of your project's Realtime service as well as your database if you're listening to Postgres changes. Supabase will automatically handle cleanup 30 seconds after a client is disconnected, but unused channels may cause degradation as more clients are simultaneously subscribed.
-    examples:
-      - name: Removes a channel
-        isSpotlight: true
-        js: |
-          ```js
-          supabase.removeChannel(myChannel)
-          ```
-
-  removeAllChannels():
-    title: 'removeAllChannels()'
-    $ref: '@supabase/supabase-js.index.SupabaseClient.removeAllChannels'
-    notes: |
-      - Removing channels is a great way to maintain the performance of your project's Realtime service as well as your database if you're listening to Postgres changes. Supabase will automatically handle cleanup 30 seconds after a client is disconnected, but unused channels may cause degradation as more clients are simultaneously subscribed.
-    examples:
-      - name: Remove all channels
-        isSpotlight: true
-        js: |
-          ```js
-          supabase.removeAllChannels()
-          ```
-
-  storage.listBuckets():
-    title: 'listBuckets()'
-    $ref: '@supabase/storage-js.packages/StorageBucketApi.default.listBuckets'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: `select`
-        - `objects` table permissions: none
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: List buckets
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .listBuckets()
-          ```
-
-  storage.getBucket():
-    title: 'getBucket()'
-    $ref: '@supabase/storage-js.packages/StorageBucketApi.default.getBucket'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: `select`
-        - `objects` table permissions: none
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Get bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .getBucket('avatars')
-          ```
-
-  storage.createBucket():
-    title: 'createBucket()'
-    $ref: '@supabase/storage-js.packages/StorageBucketApi.default.createBucket'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: `insert`
-        - `objects` table permissions: none
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Create bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .createBucket('avatars', { public: false })
-          ```
-
-  storage.emptyBucket():
-    title: 'emptyBucket()'
-    $ref: '@supabase/storage-js.packages/StorageBucketApi.default.emptyBucket'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: `select`
-        - `objects` table permissions: `select` and `delete`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Empty bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .emptyBucket('avatars')
-          ```
-  storage.updateBucket():
-    title: 'updateBucket()'
-    $ref: '@supabase/storage-js.packages/StorageBucketApi.default.updateBucket'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: `update`
-        - `objects` table permissions: none
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Update bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .updateBucket('avatars', { public: false })
-          ```
-
-  storage.deleteBucket():
-    title: 'deleteBucket()'
-    $ref: '@supabase/storage-js.packages/StorageBucketApi.default.deleteBucket'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: `select` and `delete`
-        - `objects` table permissions: none
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Delete bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .deleteBucket('avatars')
-          ```
-
-  storage.from.upload():
-    title: 'from.upload()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.upload'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `insert`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-      - For React Native, using either `Blob`, `File` or `FormData` does not work as intended. Upload file using `ArrayBuffer` from base64 file data instead, see example below.
-    examples:
-      - name: Upload file
-        isSpotlight: true
-        js: |
-          ```js
-          const avatarFile = event.target.files[0]
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .upload('public/avatar1.png', avatarFile, {
-              cacheControl: '3600',
-              upsert: false
-            })
-          ```
-      - name: Upload file using `ArrayBuffer` from base64 file data
-        js: |
-          ```js
-          import { decode } from 'base64-arraybuffer'
-
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .upload('public/avatar1.png', decode('base64FileData'), {
-              contentType: 'image/png'
-            })
-          ```
-
-  storage.from.update():
-    title: 'from.update()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.update'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `update` and `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-      - For React Native, using either `Blob`, `File` or `FormData` does not work as intended. Update file using `ArrayBuffer` from base64 file data instead, see example below.
-    examples:
-      - name: Update file
-        isSpotlight: true
-        js: |
-          ```js
-          const avatarFile = event.target.files[0]
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .update('public/avatar1.png', avatarFile, {
-              cacheControl: '3600',
-              upsert: false
-            })
-          ```
-      - name: Update file using `ArrayBuffer` from base64 file data
-        js: |
-          ```js
-          import {decode} from 'base64-arraybuffer'
-
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .update('public/avatar1.png', decode('base64FileData'), {
-              contentType: 'image/png'
-            })
-          ```
-
-  storage.from.move():
-    title: 'from.move()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.move'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `update` and `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Move file
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .move('public/avatar1.png', 'private/avatar2.png')
-          ```
-
-  storage.from.copy():
-    title: 'from.copy()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.copy'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `insert` and `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Copy file
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .copy('public/avatar1.png', 'private/avatar2.png')
-          ```
-
-  storage.from.createSignedUrl():
-    title: 'from.createSignedUrl()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.createSignedUrl'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Create Signed URL
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .createSignedUrl('folder/avatar1.png', 60)
-          ```
-
-  storage.from.createSignedUrls():
-    title: 'from.createSignedUrls()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.createSignedUrls'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Create Signed URLs
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .createSignedUrls(['folder/avatar1.png', 'folder/avatar2.png'], 60)
-          ```
-
-  storage.from.getPublicUrl():
-    title: 'from.getPublicUrl()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.getPublicUrl'
-    notes: |
-      - The bucket needs to be set to public, either via [updateBucket()](/docs/reference/javascript/storage-updatebucket) or by going to Storage on [app.supabase.com](https://app.supabase.com), clicking the overflow menu on a bucket and choosing "Make public"
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: none
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Returns the URL for an asset in a public bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data } = supabase
-            .storage
-            .from('public-bucket')
-            .getPublicUrl('folder/avatar1.png')
-          ```
-
-  storage.from.download():
-    title: 'from.download()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.download'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Download file
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .download('folder/avatar1.png')
-          ```
-
-  storage.from.remove():
-    title: 'from.remove()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.remove'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `delete` and `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: Delete file
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .remove(['folder/avatar1.png'])
-          ```
-
-  storage.from.list():
-    title: 'from.list()'
-    $ref: '@supabase/storage-js.packages/StorageFileApi.default.list'
-    notes: |
-      - RLS policy permissions required:
-        - `buckets` table permissions: none
-        - `objects` table permissions: `select`
-      - Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
-    examples:
-      - name: List files in a bucket
-        isSpotlight: true
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .list('folder', {
-              limit: 100,
-              offset: 0,
-              sortBy: { column: 'name', order: 'asc' },
-            })
-          ```
-      - name: Search files in a bucket
-        js: |
-          ```js
-          const { data, error } = await supabase
-            .storage
-            .from('avatars')
-            .list('folder', {
-              limit: 100,
-              offset: 0,
-              sortBy: { column: 'name', order: 'asc' },
-              search: 'jon'
-            })
-          ```

From 9c1a39a1ef80fad1e0d4150c244371248fc9e23f Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Wed, 21 Dec 2022 14:19:27 -0800
Subject: [PATCH 141/215] Restore cli_v1_commands--old.yaml

---
 spec/cli_v1_commands--old.yaml | 882 +++++++++++++++++++++++++++++++++
 1 file changed, 882 insertions(+)
 create mode 100644 spec/cli_v1_commands--old.yaml

diff --git a/spec/cli_v1_commands--old.yaml b/spec/cli_v1_commands--old.yaml
new file mode 100644
index 00000000000..d7af310d127
--- /dev/null
+++ b/spec/cli_v1_commands--old.yaml
@@ -0,0 +1,882 @@
+clispec: '001'
+info:
+  id: cli
+  version: 1.11.3
+  title: Supabase CLI
+  language: sh
+  source: https://github.com/supabase/cli
+  bugs: https://github.com/supabase/cli/issues
+  spec: https://github.com/supabase/supabase.tools/cli_spec/lib.yaml
+  description: |
+    Supabase CLI provides you with tools to develop your application locally, and deploy your application to the Supabase platform.
+  options: |-
+    ```sh
+          --debug            output debug logs to stderr
+          --experimental     enable experimental features
+      -h, --help             help for supabase
+          --workdir string   path to a Supabase project directory
+    ```
+  tags:
+    - id: local-dev
+      title: Local Development
+    - id: management-api
+      title: Management APIs
+    - id: other-commands
+      title: Additional Commands
+commands:
+  - id: supabase-test
+    title: supabase test
+    summary: Run tests on local Supabase containers
+    tags:
+      - local-dev
+    links: []
+    subcommands:
+      - supabase-test-db
+    options: |-
+      ```sh
+        -h, --help   help for test
+      ```
+  - id: supabase-test-db
+    title: supabase test db
+    summary: Tests local database with pgTAP
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase test db [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for db
+      ```
+  - id: supabase-stop
+    title: supabase stop
+    summary: Stop all local Supabase containers
+    tags:
+      - local-dev
+    links: []
+    usage: |-
+      ```sh
+      supabase stop [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+            --backup   Backs up the current database before stopping.
+        -h, --help     help for stop
+      ```
+  - id: supabase-status
+    title: supabase status
+    summary: Show status of local Supabase containers
+    tags:
+      - local-dev
+    links: []
+    usage: |-
+      ```sh
+      supabase status [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for status
+      ```
+  - id: supabase-start
+    title: supabase start
+    summary: Start containers for Supabase local development
+    tags:
+      - local-dev
+    links: []
+    usage: |-
+      ```sh
+      supabase start [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for start
+      ```
+  - id: supabase-secrets
+    title: supabase secrets
+    summary: Manage Supabase secrets
+    tags:
+      - management-api
+    links: []
+    subcommands:
+      - supabase-secrets-list
+      - supabase-secrets-set
+      - supabase-secrets-unset
+    options: |-
+      ```sh
+        -h, --help   help for secrets
+      ```
+  - id: supabase-secrets-unset
+    title: supabase secrets unset
+    summary: Unset a secret(s) on Supabase
+    description: Unset a secret(s) from the linked Supabase project.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase secrets unset <NAME> ... [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for unset
+      ```
+  - id: supabase-secrets-set
+    title: supabase secrets set
+    summary: Set a secret(s) on Supabase
+    description: Set a secret(s) to the linked Supabase project.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase secrets set [flags] <NAME=VALUE> ...
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+            --env-file string   Read secrets from a .env file.
+        -h, --help              help for set
+      ```
+  - id: supabase-secrets-list
+    title: supabase secrets list
+    summary: List all secrets on Supabase
+    description: List all secrets in the linked project.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase secrets list [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for list
+      ```
+  - id: supabase-projects
+    title: supabase projects
+    summary: Manage Supabase projects
+    tags:
+      - management-api
+    links: []
+    subcommands:
+      - supabase-projects-create
+      - supabase-projects-list
+    options: |-
+      ```sh
+        -h, --help   help for projects
+      ```
+  - id: supabase-projects-list
+    title: supabase projects list
+    summary: List all Supabase projects
+    description: List all Supabase projects the logged-in user can access.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase projects list [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for list
+      ```
+  - id: supabase-projects-create
+    title: supabase projects create
+    summary: Create a project on Supabase
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase projects create <project name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+            --db-password string   Database password of the project.
+        -h, --help                 help for create
+        -i, --interactive          Enables interactive mode.
+            --org-id string        Organization ID to create the project in.
+            --plan string          Select a plan that suits your needs. (default "free")
+            --region string        Select a region close to you for the best performance.
+      ```
+  - id: supabase-orgs
+    title: supabase orgs
+    summary: Manage Supabase organizations
+    tags:
+      - management-api
+    links: []
+    subcommands:
+      - supabase-orgs-list
+    options: |-
+      ```sh
+        -h, --help   help for orgs
+      ```
+  - id: supabase-orgs-list
+    title: supabase orgs list
+    summary: List all organizations
+    description: List all organizations the logged-in user belongs.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase orgs list [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for list
+      ```
+  - id: supabase-migration
+    title: supabase migration
+    summary: Manage database migration scripts
+    tags:
+      - local-dev
+    links: []
+    subcommands:
+      - supabase-migration-list
+      - supabase-migration-new
+    options: |-
+      ```sh
+        -h, --help   help for migration
+      ```
+  - id: supabase-migration-new
+    title: supabase migration new
+    summary: Create an empty migration script
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase migration new <migration name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for new
+      ```
+  - id: supabase-migration-list
+    title: supabase migration list
+    summary: List local and remote migrations
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase migration list [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help              help for list
+        -p, --password string   Password to your remote Postgres database.
+      ```
+  - id: supabase-login
+    title: supabase login
+    summary: Authenticate using an access token
+    tags:
+      - local-dev
+    links: []
+    usage: |-
+      ```sh
+      supabase login [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for login
+      ```
+  - id: supabase-link
+    title: supabase link
+    summary: Link to a Supabase project
+    tags:
+      - local-dev
+    links: []
+    usage: |-
+      ```sh
+      supabase link [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help                 help for link
+        -p, --password string      Password to your remote Postgres database.
+            --project-ref string   Project ref of the Supabase project.
+      ```
+  - id: supabase-init
+    title: supabase init
+    summary: Initialize a local project
+    tags:
+      - local-dev
+    links: []
+    usage: |-
+      ```sh
+      supabase init [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for init
+      ```
+  - id: supabase-gen
+    title: supabase gen
+    summary: Run code generation tools
+    tags:
+      - local-dev
+    links: []
+    subcommands:
+      - supabase-gen-types
+    options: |-
+      ```sh
+        -h, --help   help for gen
+      ```
+  - id: supabase-gen-types
+    title: supabase gen types
+    summary: Generate types from Postgres schema
+    tags: []
+    links: []
+    subcommands:
+      - supabase-gen-types-typescript
+    options: |-
+      ```sh
+        -h, --help   help for types
+      ```
+  - id: supabase-gen-types-typescript
+    title: supabase gen types typescript
+    summary: Generate types for TypeScript
+    description: |
+      Generate types for TypeScript. Must specify one of --local, --linked, --project-id, or --db-url
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase gen types typescript [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+            --db-url string        Generate types from a database url.
+        -h, --help                 help for typescript
+            --linked               Generate types from the linked project.
+            --local                Generate types from the local dev database.
+            --project-id string    Generate types from a project ID.
+            --schema stringArray   Schemas to generate types for.
+      ```
+  - id: supabase-functions
+    title: supabase functions
+    summary: Manage Supabase Edge functions
+    tags:
+      - management-api
+    links: []
+    subcommands:
+      - supabase-functions-delete
+      - supabase-functions-deploy
+      - supabase-functions-new
+      - supabase-functions-serve
+    options: |-
+      ```sh
+        -h, --help   help for functions
+      ```
+  - id: supabase-functions-serve
+    title: supabase functions serve
+    summary: Serve a Function locally
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase functions serve <Function name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+            --env-file string   Path to an env file to be populated to the Function environment.
+        -h, --help              help for serve
+            --no-verify-jwt     Disable JWT verification for the Function.
+      ```
+  - id: supabase-functions-new
+    title: supabase functions new
+    summary: Create a new Function locally
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase functions new <Function name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for new
+      ```
+  - id: supabase-functions-deploy
+    title: supabase functions deploy
+    summary: Deploy a Function to Supabase
+    description: Deploy a Function to the linked Supabase project.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase functions deploy <Function name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help                 help for deploy
+            --no-verify-jwt        Disable JWT verification for the Function.
+            --project-ref string   Project ref of the Supabase project.
+      ```
+  - id: supabase-functions-delete
+    title: supabase functions delete
+    summary: Delete a Function from Supabase
+    description: |
+      Delete a Function from the linked Supabase project. This does NOT remove the Function locally.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase functions delete <Function name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help                 help for delete
+            --project-ref string   Project ref of the Supabase project.
+      ```
+  - id: supabase-domains
+    title: supabase domains
+    summary: Manage custom domain names for Supabase projects
+    tags:
+      - management-api
+    links: []
+    subcommands:
+      - supabase-domains-activate
+      - supabase-domains-create
+      - supabase-domains-delete
+      - supabase-domains-get
+      - supabase-domains-reverify
+    options: |-
+      ```sh
+        -h, --help                 help for domains
+            --include-raw-output   Include raw output (useful for debugging).
+            --project-ref string   Project ref of the Supabase project.
+      ```
+  - id: supabase-domains-reverify
+    title: supabase domains reverify
+    summary: Re-verify the custom hostname config for your project.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase domains reverify [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for reverify
+      ```
+  - id: supabase-domains-get
+    title: supabase domains get
+    summary: Get the current custom hostname config.
+    description: |
+      Retrieve the custom hostname config for your project, as stored in the Supabase platform.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase domains get [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for get
+      ```
+  - id: supabase-domains-delete
+    title: supabase domains delete
+    summary: Deletes the custom hostname config for your project.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase domains delete [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for delete
+      ```
+  - id: supabase-domains-create
+    title: supabase domains create
+    summary: Create a custom hostname.
+    description: |-
+      Create a custom hostname for your Supabase project.
+
+      Expects your custom hostname to have a CNAME record to your Supabase project's subdomain.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase domains create [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+            --custom-hostname string   The custom hostname to use for your Supabase project.
+        -h, --help                     help for create
+      ```
+  - id: supabase-domains-activate
+    title: supabase domains activate
+    summary: Activate the custom hostname for a project.
+    description: |-
+      Activates the custom hostname configuration for a project.
+
+      This reconfigures your Supabase project to respond to requests on your custom hostname.
+      After the custom hostname is activated, your project's auth services will no longer function on the Supabase-provisioned subdomain.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase domains activate [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for activate
+      ```
+  - id: supabase-db
+    title: supabase db
+    summary: Manage local Postgres databases
+    tags:
+      - local-dev
+    links: []
+    subcommands:
+      - supabase-db-branch
+      - supabase-db-diff
+      - supabase-db-lint
+      - supabase-db-push
+      - supabase-db-remote
+      - supabase-db-reset
+    options: |-
+      ```sh
+        -h, --help   help for db
+      ```
+  - id: supabase-db-reset
+    title: supabase db reset
+    summary: Resets the local database to current migrations
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db reset [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for reset
+      ```
+  - id: supabase-db-remote
+    title: supabase db remote
+    summary: Manage remote databases
+    tags: []
+    links: []
+    subcommands:
+      - supabase-db-remote-changes
+      - supabase-db-remote-commit
+    options: |-
+      ```sh
+        -h, --help              help for remote
+        -p, --password string   Password to your remote Postgres database.
+      ```
+  - id: supabase-db-remote-commit
+    title: supabase db remote commit
+    summary: Commit remote changes as a new migration
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db remote commit [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for commit
+      ```
+  - id: supabase-db-remote-changes
+    title: supabase db remote changes
+    summary: Show changes on the remote database
+    description: Show changes on the remote database since last migration.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db remote changes [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for changes
+      ```
+  - id: supabase-db-push
+    title: supabase db push
+    summary: Push new migrations to the remote database
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db push [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+            --dry-run           Print the migrations that would be applied, but don't actually apply them.
+        -h, --help              help for push
+        -p, --password string   Password to your remote Postgres database.
+      ```
+  - id: supabase-db-lint
+    title: supabase db lint
+    summary: Checks local database for typing error
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db lint [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help             help for lint
+            --level string     Error level to emit. (default "warning")
+        -s, --schema strings   List of schema to include. (default [public])
+      ```
+  - id: supabase-db-diff
+    title: supabase db diff
+    summary: Diffs the local database for schema changes
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db diff [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -f, --file string      Saves schema diff to a file.
+        -h, --help             help for diff
+            --linked           Diffs local schema against linked project.
+        -s, --schema strings   List of schema to include. (default [public])
+            --use-migra        Use migra to generate schema diff.
+      ```
+  - id: supabase-db-branch
+    title: supabase db branch
+    summary: Manage local database branches
+    description: |
+      Manage local database branches. Each branch is associated with a separate local database. Forking remote databases is NOT supported.
+    tags: []
+    links: []
+    subcommands:
+      - supabase-db-branch-create
+      - supabase-db-branch-delete
+      - supabase-db-branch-list
+      - supabase-db-branch-switch
+    options: |-
+      ```sh
+        -h, --help   help for branch
+      ```
+  - id: supabase-db-branch-switch
+    title: supabase db branch switch
+    summary: Switch the active branch
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db branch switch <branch name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for switch
+      ```
+  - id: supabase-db-branch-list
+    title: supabase db branch list
+    summary: List branches
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db branch list [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for list
+      ```
+  - id: supabase-db-branch-delete
+    title: supabase db branch delete
+    summary: Delete a branch
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db branch delete <branch name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for delete
+      ```
+  - id: supabase-db-branch-create
+    title: supabase db branch create
+    summary: Create a branch
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase db branch create <branch name> [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help   help for create
+      ```
+  - id: supabase-completion
+    title: supabase completion
+    summary: Generate the autocompletion script for the specified shell
+    description: |
+      Generate the autocompletion script for supabase for the specified shell.
+      See each sub-command's help for details on how to use the generated script.
+    tags:
+      - other-commands
+    links: []
+    subcommands:
+      - supabase-completion-bash
+      - supabase-completion-fish
+      - supabase-completion-powershell
+      - supabase-completion-zsh
+    options: |-
+      ```sh
+        -h, --help   help for completion
+      ```
+  - id: supabase-completion-zsh
+    title: supabase completion zsh
+    summary: Generate the autocompletion script for zsh
+    description: |
+      Generate the autocompletion script for the zsh shell.
+
+      If shell completion is not already enabled in your environment you will need
+      to enable it.  You can execute the following once:
+
+          echo "autoload -U compinit; compinit" >> ~/.zshrc
+
+      To load completions in your current shell session:
+
+          source <(supabase completion zsh); compdef _supabase supabase
+
+      To load completions for every new session, execute once:
+
+      #### Linux:
+
+          supabase completion zsh > "${fpath[1]}/_supabase"
+
+      #### macOS:
+
+          supabase completion zsh > $(brew --prefix)/share/zsh/site-functions/_supabase
+
+      You will need to start a new shell for this setup to take effect.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase completion zsh [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help              help for zsh
+            --no-descriptions   disable completion descriptions
+      ```
+  - id: supabase-completion-powershell
+    title: supabase completion powershell
+    summary: Generate the autocompletion script for powershell
+    description: |
+      Generate the autocompletion script for powershell.
+
+      To load completions in your current shell session:
+
+          supabase completion powershell | Out-String | Invoke-Expression
+
+      To load completions for every new session, add the output of the above command
+      to your powershell profile.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase completion powershell [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help              help for powershell
+            --no-descriptions   disable completion descriptions
+      ```
+  - id: supabase-completion-fish
+    title: supabase completion fish
+    summary: Generate the autocompletion script for fish
+    description: |
+      Generate the autocompletion script for the fish shell.
+
+      To load completions in your current shell session:
+
+          supabase completion fish | source
+
+      To load completions for every new session, execute once:
+
+          supabase completion fish > ~/.config/fish/completions/supabase.fish
+
+      You will need to start a new shell for this setup to take effect.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase completion fish [flags]
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help              help for fish
+            --no-descriptions   disable completion descriptions
+      ```
+  - id: supabase-completion-bash
+    title: supabase completion bash
+    summary: Generate the autocompletion script for bash
+    description: |
+      Generate the autocompletion script for the bash shell.
+
+      This script depends on the 'bash-completion' package.
+      If it is not installed already, you can install it via your OS's package manager.
+
+      To load completions in your current shell session:
+
+          source <(supabase completion bash)
+
+      To load completions for every new session, execute once:
+
+      #### Linux:
+
+          supabase completion bash > /etc/bash_completion.d/supabase
+
+      #### macOS:
+
+          supabase completion bash > $(brew --prefix)/etc/bash_completion.d/supabase
+
+      You will need to start a new shell for this setup to take effect.
+    tags: []
+    links: []
+    usage: |-
+      ```sh
+      supabase completion bash
+      ```
+    subcommands: []
+    options: |-
+      ```sh
+        -h, --help              help for bash
+            --no-descriptions   disable completion descriptions
+      ```

From aacfc1dee63ce07c3665775f380c166629561d97 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 21 Dec 2022 21:12:04 -0330
Subject: [PATCH 142/215] Fix ReactMarkdown expects a string error

---
 .../reference/RefFunctionSection.tsx          |  6 +---
 spec/supabase_js_v2.yml                       | 36 +++++++++----------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index 32002c389bc..a796a7b4aa9 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -60,11 +60,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                 <ReactMarkdown className="text-sm">{item.description}</ReactMarkdown>
               </div>
             )}
-            {/* {functionMarkdownContent && (
-                        <div className="prose">
-                          <MDXRemote {...functionMarkdownContent} components={components} />
-                        </div>
-                      )} */}
+
             {item.notes && (
               <div className="prose">
                 <ReactMarkdown className="text-sm">{item.notes}</ReactMarkdown>
diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml
index 309fe559544..237b0a3b729 100644
--- a/spec/supabase_js_v2.yml
+++ b/spec/supabase_js_v2.yml
@@ -401,7 +401,7 @@ functions:
         isSpotlight: true
         code: |
           ```js
-            const { data, error } = supabase.auth.setSession({ 
+            const { data, error } = supabase.auth.setSession({
               access_token,
               refresh_token
             )
@@ -433,7 +433,7 @@ functions:
     $ref: '@supabase/gotrue-js.GoTrueClient.onAuthStateChange'
     notes: |
       - Types of auth events: `SIGNED_IN`, `SIGNED_OUT`, `TOKEN_REFRESHED`, `USER_UPDATED`, `PASSWORD_RECOVERY`
-      - Currently, `onAuthStateChange()` does not work across tabs. 
+      - Currently, `onAuthStateChange()` does not work across tabs.
       For instance, in the case of a password reset flow, the original tab which requested for the password reset link will not receive the `SIGNED_IN` and `PASSWORD_RECOVERY` event when the user clicks on the link.
 
     examples:
@@ -453,7 +453,7 @@ functions:
           supabase.auth.onAuthStateChange((event, session) => {
             if (event == 'PASSWORD_RECOVERY') {
               console.log('PASSWORD_RECOVERY', session)
-              
+
               // show screen to update user's password
               showPasswordResetScreen(true)
             }
@@ -509,8 +509,8 @@ functions:
         isSpotlight: true
         code: |
           ```js
-          const { data, error } = await supabase.auth.mfa.enroll({ 
-            factorType: 'totp' 
+          const { data, error } = await supabase.auth.mfa.enroll({
+            factorType: 'totp'
           })
 
           // Use the id to create a challenge.
@@ -530,7 +530,7 @@ functions:
         isSpotlight: true
         code: |
           ```js
-          const { data, error } = await supabase.auth.mfa.challenge({ 
+          const { data, error } = await supabase.auth.mfa.challenge({
             factorId: '34e770dd-9ff9-416c-87fa-43b31d7ef225'
           })
           ```
@@ -545,9 +545,9 @@ functions:
         isSpotlight: true
         code: |
           ```js
-          const { data, error } = await supabase.auth.mfa.verify({ 
+          const { data, error } = await supabase.auth.mfa.verify({
             factorId: '34e770dd-9ff9-416c-87fa-43b31d7ef225',
-            challengeId: '4034ae6f-a8ce-4fb5-8ee5-69a5863a7c15', 
+            challengeId: '4034ae6f-a8ce-4fb5-8ee5-69a5863a7c15',
             code: '123456'
           })
           ```
@@ -565,7 +565,7 @@ functions:
           ```js
           const { data, error } = await supabase.auth.mfa.challengeAndVerify({
             factorId: '34e770dd-9ff9-416c-87fa-43b31d7ef225',
-            challengeId: '4034ae6f-a8ce-4fb5-8ee5-69a5863a7c15', 
+            challengeId: '4034ae6f-a8ce-4fb5-8ee5-69a5863a7c15',
             code: '123456'
           })
           ```
@@ -729,18 +729,18 @@ functions:
     title: 'resetPasswordForEmail()'
     $ref: '@supabase/gotrue-js.GoTrueClient.resetPasswordForEmail'
     notes: |
-      - The password reset flow consist of 2 broad steps: (i) Allow the user to login via the password reset link; (ii) Update the user's password. 
-      - The `resetPasswordForEmail()` only sends a password reset link to the user's email. 
+      - The password reset flow consist of 2 broad steps: (i) Allow the user to login via the password reset link; (ii) Update the user's password.
+      - The `resetPasswordForEmail()` only sends a password reset link to the user's email.
       To update the user's password, see [`updateUser()`](/docs/reference/javascript/auth-updateuser).
-      - A `SIGNED_IN` and `PASSWORD_RECOVERY` event will be emitted when the password recovery link is clicked. 
+      - A `SIGNED_IN` and `PASSWORD_RECOVERY` event will be emitted when the password recovery link is clicked.
       You can use [`onAuthStateChange()`](/docs/reference/javascript/auth-onauthstatechange) to listen and invoke a callback function on these events.
       - When the user clicks the reset link in the email they are redirected back to your application.
-      You can configure the URL that the user is redirected to with the `redirectTo` parameter. 
+      You can configure the URL that the user is redirected to with the `redirectTo` parameter.
       See [redirect URLs and wildcards](/docs/guides/auth/overview#redirect-urls-and-wildcards) to add additional redirect URLs to your project.
       - After the user has been redirected successfully, prompt them for a new password and call `updateUser()`:
       ```js
-      const { data, error } = await supabase.auth.updateUser({ 
-        password: new_password 
+      const { data, error } = await supabase.auth.updateUser({
+        password: new_password
       })
       ```
     examples:
@@ -934,10 +934,10 @@ functions:
         isSpotlight: true
         code: |
           ```js
-          const { data, error } = await supabase.auth.admin.mfa.deleteFactor({ 
+          const { data, error } = await supabase.auth.admin.mfa.deleteFactor({
             id: '34e770dd-9ff9-416c-87fa-43b31d7ef225',
             userId: 'a89baba7-b1b7-440f-b4bb-91026967f66b',
-          }) 
+          })
           ```
   - id: select
     title: 'Fetch data: select()'
@@ -5201,7 +5201,7 @@ functions:
   - id: text-search
     title: textSearch()
     $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.textSearch'
-    notes:
+    notes: |
       - For more information, see [Postgres full text search](/docs/guides/database/full-text-search).
     examples:
       - id: text-search

From 5a3e10e67e915ebd3cd3deab9520d18427193d58 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 21 Dec 2022 21:31:05 -0330
Subject: [PATCH 143/215] Fix missing image warnings

---
 .../NavigationMenu.constants.ts               | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index b5b21af6420..a7c634f9ba6 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -14,7 +14,7 @@ export const REFERENCES: References = {
     name: 'supabase-js',
     library: 'supabase-js',
     versions: ['v2', 'v1'],
-    icon: '/docs/img/libraries/javascript-icon.svg',
+    icon: '/img/libraries/javascript-icon',
   },
   dart: {
     name: 'Flutter',
@@ -688,22 +688,22 @@ export const reference = {
           url: '/reference/javascript/start',
           level: 'reference_javascript',
           items: [],
-          icon: 'docs/img/icons/javascript.svg',
+          icon: '/img/icons/menu/reference-javascript',
         },
         {
           name: 'supabase-dart',
           url: '/reference/dart/start',
           level: 'reference_dart',
           items: [],
-          icon: 'docs/img/icons/javascript.svg',
-        },
-        {
-          name: 'supbase-python',
-          url: '/reference/python/start',
-          level: 'reference_python',
-          items: [],
-          icon: 'docs/img/icons/javascript.svg',
+          icon: '/img/icons/menu/reference-dart',
         },
+        // {
+        //   name: 'supbase-python',
+        //   url: '/reference/python/start',
+        //   level: 'reference_python',
+        //   items: [],
+        //   icon: '/img/icons/menu/reference-javascript',
+        // },
       ],
     },
     {
@@ -713,13 +713,13 @@ export const reference = {
           name: 'Supabase CLI',
           url: '/reference/cli/start',
           items: [],
-          icon: 'docs/img/icons/cli-icon.svg',
+          icon: '/img/icons/menu/reference-cli',
         },
         {
           name: 'Management API',
           url: '/reference/javascript',
           items: [],
-          icon: 'docs/img/icons/javascript-icon.svg',
+          icon: '/img/icons/menu/reference-api',
         },
       ],
     },

From c02d0b5074a6981add58fded7d811719ea87f425 Mon Sep 17 00:00:00 2001
From: dng <danny@supabase.io>
Date: Wed, 21 Dec 2022 17:18:16 -0800
Subject: [PATCH 144/215] Fix typo

---
 .../Navigation/NavigationMenu/NavigationMenu.constants.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index a7c634f9ba6..d9837f2ea65 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -698,7 +698,7 @@ export const reference = {
           icon: '/img/icons/menu/reference-dart',
         },
         // {
-        //   name: 'supbase-python',
+        //   name: 'supabase-python',
         //   url: '/reference/python/start',
         //   level: 'reference_python',
         //   items: [],

From df5305eb7c51870b905a185bdcd11c16e481407c Mon Sep 17 00:00:00 2001
From: Vineeth Voruganti <13438633+VVoruganti@users.noreply.github.com>
Date: Wed, 21 Dec 2022 18:07:05 -0800
Subject: [PATCH 145/215] Add missing import to component

On line 138 the component is using a `useState` function call which is a react hook, however no react hook is imported causing an error.
---
 apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
index df4d8171a4d..0a174410282 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
@@ -125,6 +125,7 @@ export default MyApp
 Wrap your `pages/_app.tsx` component with the `SessionContextProvider` component:
 
 ```jsx lines=2,8 title=pages/_app.tsx
+import { useState } from 'react'
 import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
 import { SessionContextProvider, Session } from '@supabase/auth-helpers-react'
 

From 6298d5179b1b36ce3ca4e146d41d7c0135833317 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Wed, 21 Dec 2022 21:25:13 -0500
Subject: [PATCH 146/215] init og image generator

---
 supabase/.gitignore                           |  3 +
 supabase/config.toml                          | 71 +++++++++++++++++++
 .../functions/og-images/component/Docs.tsx    | 56 +++++++++++++++
 supabase/functions/og-images/handler.tsx      | 45 ++++++++++++
 supabase/functions/og-images/index.ts         |  4 ++
 supabase/seed.sql                             |  0
 6 files changed, 179 insertions(+)
 create mode 100644 supabase/.gitignore
 create mode 100644 supabase/config.toml
 create mode 100644 supabase/functions/og-images/component/Docs.tsx
 create mode 100644 supabase/functions/og-images/handler.tsx
 create mode 100644 supabase/functions/og-images/index.ts
 create mode 100644 supabase/seed.sql

diff --git a/supabase/.gitignore b/supabase/.gitignore
new file mode 100644
index 00000000000..773c7c3e0a1
--- /dev/null
+++ b/supabase/.gitignore
@@ -0,0 +1,3 @@
+# Supabase
+.branches
+.temp
diff --git a/supabase/config.toml b/supabase/config.toml
new file mode 100644
index 00000000000..74e1c6daa07
--- /dev/null
+++ b/supabase/config.toml
@@ -0,0 +1,71 @@
+# A string used to distinguish different Supabase projects on the same host. Defaults to the working
+# directory name when running `supabase init`.
+project_id = "supabase"
+
+[api]
+# Port to use for the API URL.
+port = 54321
+# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
+# endpoints. public and storage are always included.
+schemas = []
+# Extra schemas to add to the search_path of every request.
+extra_search_path = ["extensions"]
+# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
+# for accidental or malicious requests.
+max_rows = 1000
+
+[db]
+# Port to use for the local database URL.
+port = 54322
+# The database major version to use. This has to be the same as your remote database's. Run `SHOW
+# server_version;` on the remote database to check.
+major_version = 15
+
+[studio]
+# Port to use for Supabase Studio.
+port = 54323
+
+# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
+# are monitored, and you can view the emails that would have been sent from the web interface.
+[inbucket]
+# Port to use for the email testing server web interface.
+port = 54324
+smtp_port = 54325
+pop3_port = 54326
+
+[storage]
+# The maximum file size allowed (e.g. "5MB", "500KB").
+file_size_limit = "50MiB"
+
+[auth]
+# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
+# in emails.
+site_url = "http://localhost:3000"
+# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
+additional_redirect_urls = ["https://localhost:3000"]
+# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 seconds (one
+# week).
+jwt_expiry = 3600
+# Allow/disallow new user signups to your project.
+enable_signup = true
+
+[auth.email]
+# Allow/disallow new user signups via email to your project.
+enable_signup = true
+# If enabled, a user will be required to confirm any email change on both the old, and new email
+# addresses. If disabled, only the new email is required to confirm.
+double_confirm_changes = true
+# If enabled, users need to confirm their email address before signing in.
+enable_confirmations = false
+
+# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
+# `discord`, `facebook`, `github`, `gitlab`, `google`, `twitch`, `twitter`, `slack`, `spotify`.
+[auth.external.apple]
+enabled = false
+client_id = ""
+secret = ""
+# Overrides the default auth redirectUrl.
+redirect_uri = ""
+# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
+# or any other third-party OIDC providers.
+url = ""
diff --git a/supabase/functions/og-images/component/Docs.tsx b/supabase/functions/og-images/component/Docs.tsx
new file mode 100644
index 00000000000..3bd4dd65d27
--- /dev/null
+++ b/supabase/functions/og-images/component/Docs.tsx
@@ -0,0 +1,56 @@
+import React from 'https://esm.sh/react@18.2.0?deno-std=0.140.0'
+
+type Props = {
+    type?: string | null
+    title: string
+    description: string
+    icon?: string | null
+}
+
+const Docs = (props: Props) => {
+    const { type, title, description, icon } = props
+    
+    return (
+        <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          color: 'white',
+          backgroundColor: '#1c1c1c',
+          backgroundImage: 'url(https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/og-images/gradient.svg)',
+          backgroundRepeat: 'no-repeat',
+        }}
+      >
+        <div tw="flex flex-row items-center justify-center absolute top-[60px] left-[64px]">
+          {icon && (
+            <img src={`https://raw.githubusercontent.com/supabase/supabase/master/apps/docs/public/img/icons/${icon}-icon.svg`} width="50px" height="50px" />
+          )}
+          {type && icon && (
+            <div tw="h-[50px] border-[1px] border-white mx-4"></div>
+          )}
+          {type && (
+            <>
+                <div tw="w-[50px] h-[50px] bg-[#164430] rounded-md flex items-center justify-center">
+                    <img src={`https://raw.githubusercontent.com/supabase/supabase/master/apps/docs/public/img/icons/menu/${type.toLowerCase()}.svg`} width="80%" height="80%" />
+                </div>
+                <span tw="text-[36px] text-[#ededed] ml-[16px]">{type}</span>
+            </>
+          )}
+        </div>
+        <div tw="flex flex-col">
+          <div tw="flex flex-col absolute left-[64px] top-[154px] w-[1072px]">
+            <h1 tw="my-0 mb-2 text-[60px]">{title}</h1>
+            <p tw="my-0 mt-2 text-[40px] text-[#f2fff9] opacity-50">{description}</p>
+          </div>
+          <div tw="flex flex-row items-center justify-center absolute left-[64px] top-[500px]">
+            <img src="https://raw.githubusercontent.com/supabase/supabase/master/packages/common/assets/images/supabase-logo-wordmark--dark.png" width={180} height={34} />
+            <span tw="text-lg font-normal text-[#3ecf8e] ml-2">DOCS</span>
+          </div>
+        </div>
+      </div>
+    )
+}
+
+export default Docs
\ No newline at end of file
diff --git a/supabase/functions/og-images/handler.tsx b/supabase/functions/og-images/handler.tsx
new file mode 100644
index 00000000000..85dfc4cd6e2
--- /dev/null
+++ b/supabase/functions/og-images/handler.tsx
@@ -0,0 +1,45 @@
+import React from 'https://esm.sh/react@18.2.0?deno-std=0.140.0'
+import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts'
+import Docs from './component/Docs.tsx'
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+  'Content-Type': 'application/json'
+}
+
+const options = {
+  width: 1200,
+  height: 600,
+  status: 200,
+  headers: {
+    'content-type': 'image/png',
+    'cache-control': 'public, max-age=31536000, s-maxage=31536000, no-transform, immutable',
+    'cdn-cache-control': 'max-age=31536000',
+  },
+}
+
+export async function handler(req: Request) {
+  const url = new URL(req.url)
+  const site = url.searchParams.get('site')?.toLowerCase() ?? url.searchParams.get('amp;site')?.toLowerCase()
+  const icon = url.searchParams.get('icon')?.toLowerCase() ?? url.searchParams.get('amp;icon')?.toLowerCase()
+  const type = url.searchParams.get('type') ?? url.searchParams.get('amp;type')
+  const title = url.searchParams.get('title') ?? url.searchParams.get('amp;title')
+  const description = url.searchParams.get('description') ?? url.searchParams.get('amp;description')
+
+  if(!site || !title || !description) {
+    return new Response(JSON.stringify({ message: 'missing params' }), {
+      headers: { ...corsHeaders },
+      status: 404,
+    })
+  }
+
+  if (site === 'docs') {
+    return new ImageResponse(( <Docs title={title} description={description} type={type} icon={icon} /> ), { ...options })
+  }
+
+  return new Response(JSON.stringify({error: 'Internal server error'}), {
+    headers: { ...corsHeaders },
+    status: 500
+  })
+}
diff --git a/supabase/functions/og-images/index.ts b/supabase/functions/og-images/index.ts
new file mode 100644
index 00000000000..ebf53f34dce
--- /dev/null
+++ b/supabase/functions/og-images/index.ts
@@ -0,0 +1,4 @@
+import { serve } from 'https://deno.land/std@0.170.0/http/server.ts'
+import { handler } from './handler.tsx'
+
+serve(handler)
diff --git a/supabase/seed.sql b/supabase/seed.sql
new file mode 100644
index 00000000000..e69de29bb2d

From 41a1d98cc25c7a6dda02d342d8fdf9a92417a4ee Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Wed, 21 Dec 2022 21:47:03 -0500
Subject: [PATCH 147/215] Refactor to handle multiple sites

---
 supabase/functions/og-images/handler.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/supabase/functions/og-images/handler.tsx b/supabase/functions/og-images/handler.tsx
index 85dfc4cd6e2..642bc6a94c3 100644
--- a/supabase/functions/og-images/handler.tsx
+++ b/supabase/functions/og-images/handler.tsx
@@ -34,12 +34,16 @@ export async function handler(req: Request) {
     })
   }
 
-  if (site === 'docs') {
-    return new ImageResponse(( <Docs title={title} description={description} type={type} icon={icon} /> ), { ...options })
+  switch (site) {
+    case 'docs':
+      return new ImageResponse(( <Docs title={title} description={description} type={type} icon={icon} /> ), { ...options })
+      break;
+  
+    default:
+      return new Response(JSON.stringify({message: 'site not found'}), {
+        headers: { ...corsHeaders },
+        status: 404,
+      })
+      break;
   }
-
-  return new Response(JSON.stringify({error: 'Internal server error'}), {
-    headers: { ...corsHeaders },
-    status: 500
-  })
 }

From 7651d306f090abfa2aeb390c0a0fce808a1bd69b Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Wed, 21 Dec 2022 22:11:46 -0500
Subject: [PATCH 148/215] init readme

---
 supabase/functions/og-images/README.md | 44 ++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 supabase/functions/og-images/README.md

diff --git a/supabase/functions/og-images/README.md b/supabase/functions/og-images/README.md
new file mode 100644
index 00000000000..38095508e4b
--- /dev/null
+++ b/supabase/functions/og-images/README.md
@@ -0,0 +1,44 @@
+# Open Graph (OG) Image Generator
+
+Generate  OG Images for the sites at supabase.
+
+## How to use
+
+To use the og image generator, you will need to visit the site with the following parameters:
+
+`site`: a string indicating which site you want to generate an image for. Currently, the only available option is docs.
+
+`title`: a string representing the title of the image you want to generate.
+
+`description`: a string representing the description of the image you want to generate.
+
+`type`: a string indicating the type of image you want to generate. This is optional and is only used for the docs site.
+
+`icon`: a string indicating the icon you want to use for the image. This is optional and is only used for the docs site.
+
+If any of these required parameters are missing, you will receive a 404 response with a message indicating that some parameters are missing.
+
+If the site parameter is not recognized, you will receive a 404 response with a message indicating that the site was not found.
+
+If all required parameters are provided and the site is recognized, you will receive an image in the form of a PNG file with the specified title, description, and other optional parameters included. The image will have a width of 1200 pixels and a height of 600 pixels.
+
+Here is an example link that you can use to test the website:
+
+https://www.example.com/image-generator?site=docs&title=Example%20Title&description=Example%20Description&type=Auth&icon=google
+
+This link will generate an image for the docs site with the title "Example Title", the description "Example Description", the Auth type, and the Google icon.
+
+## Run locally
+
+First we need to start supabase using the [supabase cli](https://supabase.com/docs/reference/cli/introduction)
+
+```bash
+supabase start
+```
+
+Then run the function
+```bash
+supabase functions serve og-images
+```
+
+Now we can visit [localhost:54321/functions/v1/og-images/?site=docs&title=Title&description=Description&type=Auth](http://localhost:54321/functions/v1/og-images/?site=docs&title=Title&description=Description&type=Auth) to see your changes localy.
\ No newline at end of file

From e6a3e34ac965722de89e28196b23169296ff6ea2 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:57:55 +0800
Subject: [PATCH 149/215] fix mobile nav

---
 .../NavigationMenu/NavigationMenu.tsx         |  2 +-
 apps/docs/layouts/SiteLayout.tsx              | 41 ++++---------------
 2 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 9e99d968290..e4052fa881e 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -181,7 +181,7 @@ const SideNav = () => {
   const isReference_Self_Hosting_Realtime = 'reference_self_hosting_realtime' === level
 
   return (
-    <div className="flex relative">
+    <div className={['flex relative', 'justify-center lg:justify-start'].join(' ')}>
       {/* // main menu */}
       <NavigationMenuHome active={isHomeActive} />
       <NavigationMenuGuideList id={'gettingstarted'} active={isGettingStartedActive} />
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 8d8a116c7ad..8a9aa181028 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -1,15 +1,14 @@
 import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
 
 import FooterHelpCallout from '~/components/FooterHelpCallout'
 
-import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
 import { memo, useEffect } from 'react'
 import Footer from '~/components/Navigation/Footer'
+import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
 
 const levelsData = {
   home: {
@@ -163,43 +162,21 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
   return (
     <div
       className={[
-        'hidden',
         'h-full',
         'left-0',
         'right-0',
         'z-10',
         'backdrop-blur-sm backdrop-filter bg-white-1200 dark:bg-blackA-600',
-        mobileMenuOpen ? 'absolute h-full w-full' : 'hidden h-0',
+        mobileMenuOpen ? 'absolute h-full w-full top-0 left-0' : 'hidden h-0',
+        // always hide on desktop
+        'lg:hidden',
       ].join(' ')}
       onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
     ></div>
   )
 })
 
-// const SideMenu = memo(function SideMenu() {
-//   const mobileMenuOpen = useMenuMobileOpen()
-
-//   return (
-//     <div
-//       className={[
-//         'transition-all ease-out duration-200',
-//         'absolute left-0 right-0 h-screen',
-//         'px-5 pl-5 py-16',
-//         'top-[0px]',
-//         'bg-scale-200',
-//         mobileMenuOpen
-//           ? 'overflow-y-auto opacity-100 left-[0px] visible'
-//           : 'left-[-40px] h-0 opacity-0 invisible',
-//       ].join(' ')}
-//     >
-//       <NavigationMenu />
-//     </div>
-//   )
-// })
-
 const SideMenu = memo(function SideMenu() {
-  const mobileMenuOpen = useMenuMobileOpen()
-
   return (
     <div
       className={[
@@ -208,9 +185,7 @@ const SideMenu = memo(function SideMenu() {
         'px-5 pl-5 py-16',
         'top-[0px]',
         'bg-scale-200',
-        // mobileMenuOpen
-        //   ? 'overflow-y-auto opacity-100 left-[0px] visible z-50'
-        //   : 'left-[-40px] h-0 opacity-0 invisible',
+        // desktop styles
         'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-8 lg:flex',
         'lg:opacity-100 lg:visible',
       ].join(' ')}
@@ -249,7 +224,9 @@ const Container = memo(function Container(props) {
         // 'overflow-x-auto',
         'w-full h-screen transition-all ease-out',
         'absolute lg:relative',
-        mobileMenuOpen ? 'ml-[75%] overflow-hidden' : 'overflow-auto',
+        mobileMenuOpen
+          ? '!w-auto ml-[75%] sm:ml-[50%] md:ml-[33%] overflow-hidden'
+          : 'overflow-auto',
         // desktop override any margin styles
         'lg:ml-0',
       ].join(' ')}
@@ -267,7 +244,7 @@ const NavContainer = memo(function NavContainer() {
       className={[
         // 'hidden',
         'absolute lg:relative',
-        mobileMenuOpen ? 'w-[75%] left-0' : 'w-0 -left-[280px]',
+        mobileMenuOpen ? 'w-[75%] sm:w-[50%] md:w-[33%] left-0' : 'w-0 -left-[280px]',
         'lg:w-[420px] !lg:left-0',
         // desktop override any left styles
         'lg:left-0',

From eaff262e64bea873196833f7a78c115afccbfa69 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Wed, 21 Dec 2022 23:02:51 -0500
Subject: [PATCH 150/215] use custom font

---
 .../functions/og-images/component/Docs.tsx    |  1 +
 supabase/functions/og-images/handler.tsx      | 32 ++++++++++++-------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/supabase/functions/og-images/component/Docs.tsx b/supabase/functions/og-images/component/Docs.tsx
index 3bd4dd65d27..eef40786d56 100644
--- a/supabase/functions/og-images/component/Docs.tsx
+++ b/supabase/functions/og-images/component/Docs.tsx
@@ -19,6 +19,7 @@ const Docs = (props: Props) => {
           flexDirection: 'column',
           color: 'white',
           backgroundColor: '#1c1c1c',
+          fontFamily: 'Circular',
           backgroundImage: 'url(https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/og-images/gradient.svg)',
           backgroundRepeat: 'no-repeat',
         }}
diff --git a/supabase/functions/og-images/handler.tsx b/supabase/functions/og-images/handler.tsx
index 642bc6a94c3..1e7b9ae98bf 100644
--- a/supabase/functions/og-images/handler.tsx
+++ b/supabase/functions/og-images/handler.tsx
@@ -8,16 +8,10 @@ const corsHeaders = {
   'Content-Type': 'application/json'
 }
 
-const options = {
-  width: 1200,
-  height: 600,
-  status: 200,
-  headers: {
-    'content-type': 'image/png',
-    'cache-control': 'public, max-age=31536000, s-maxage=31536000, no-transform, immutable',
-    'cdn-cache-control': 'max-age=31536000',
-  },
-}
+// Load custom font
+const FONT_URL = 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw6/CircularStd-Book.otf'
+const font = fetch(new URL(FONT_URL, import.meta.url)).then((res) => res.arrayBuffer())
+const fontData = await font
 
 export async function handler(req: Request) {
   const url = new URL(req.url)
@@ -36,7 +30,23 @@ export async function handler(req: Request) {
 
   switch (site) {
     case 'docs':
-      return new ImageResponse(( <Docs title={title} description={description} type={type} icon={icon} /> ), { ...options })
+      return new ImageResponse(( <Docs title={title} description={description} type={type} icon={icon} /> ),
+        {
+          width: 1200,
+          height: 630,
+          fonts: [
+            {
+              name: 'Circular',
+              data: fontData,
+              style: 'normal',
+            },
+          ],
+          headers: {
+            'content-type': 'image/png',
+            'cache-control': 'public, max-age=31536000, s-maxage=31536000, no-transform, immutable',
+            'cdn-cache-control': 'max-age=31536000',
+          },
+        })
       break;
   
     default:

From d939fa988bf26b4b559637c216121a883913aecb Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 22 Dec 2022 12:06:13 +0800
Subject: [PATCH 151/215] fix padding

---
 apps/docs/layouts/SiteLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 8a9aa181028..9aa8c37d9c0 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -186,7 +186,7 @@ const SideMenu = memo(function SideMenu() {
         'top-[0px]',
         'bg-scale-200',
         // desktop styles
-        'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-8 lg:flex',
+        'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
         'lg:opacity-100 lg:visible',
       ].join(' ')}
     >

From c4e37be8c3adac278162cf0af6a6308a8031805b Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 22 Dec 2022 12:20:41 +0800
Subject: [PATCH 152/215] fix linkn

---
 .../Navigation/NavigationMenu/NavigationMenuRefListItems.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index dc309823ad7..fd87508d468 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -296,7 +296,7 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
             // handle normal links
             return (
               <>
-                <RenderLink {...fn} library={menu.title} />
+                <RenderLink {...fn} lib={lib} />
                 {fn.items &&
                   fn.items
                     //.filter((item) => item.libs.includes(lib))

From 8410965410d4ba7ad8331c0e4bf31d3b38d21b85 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 22 Dec 2022 13:27:38 +0800
Subject: [PATCH 153/215] Update NavigationMenu.tsx

---
 .../components/Navigation/NavigationMenu/NavigationMenu.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index e4052fa881e..ad9a190f55b 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -167,6 +167,7 @@ const SideNav = () => {
   const isStorageActive = 'storage' === level
   const isPlatformActive = 'platform' === level
   const isResourcesActive = 'resources' === level
+  const isSelfHosting = 'self_hosting' === level
   const isIntegrationsActive = 'integrations' === level
   const isReferenceActive = 'reference' === level
 
@@ -192,6 +193,7 @@ const SideNav = () => {
       <NavigationMenuGuideList id={'storage'} active={isStorageActive} />
       <NavigationMenuGuideList id={'platform'} active={isPlatformActive} />
       <NavigationMenuGuideList id={'resources'} active={isResourcesActive} />
+      <NavigationMenuGuideList id={'self_hosting'} active={isSelfHosting} />
       <NavigationMenuGuideList id={'integrations'} active={isIntegrationsActive} />
       <NavigationMenuGuideList id={'reference'} active={isReferenceActive} />
       {/* // Client Libs */}

From bc0a03bbf60482010b5d64289a0763971a95c42a Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Thu, 22 Dec 2022 00:33:17 -0500
Subject: [PATCH 154/215] move docs to og generator

---
 apps/docs/layouts/guides/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index e3b64828a60..14a5d08ba33 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -60,6 +60,8 @@ const Layout: FC<Props> = (props) => {
 
   const hasTableOfContents = tocList.length > 0
 
+  const ogPageType = asPath.split('/')[2]
+
   return (
     <>
       <NextSeo
@@ -71,7 +73,7 @@ const Layout: FC<Props> = (props) => {
           url: `https://supabase.com/docs${asPath}`,
           images: [
             {
-              url: `https://supabase.com/docs/img/supabase-og-image.png`,
+              url: `https://obuldanrptloktxcffvn.functions.supabase.co/og-images?site=docs${ogPageType ? `&type=${ogPageType}` : ''}&title=${props.meta?.title}&description=${props.meta?.description}`,
             },
           ],
         }}

From 63fc5826690b304705527109249dd90289fdf362 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Thu, 22 Dec 2022 00:37:10 -0500
Subject: [PATCH 155/215] run prettier

---
 apps/docs/layouts/guides/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 14a5d08ba33..991183239d9 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -73,7 +73,9 @@ const Layout: FC<Props> = (props) => {
           url: `https://supabase.com/docs${asPath}`,
           images: [
             {
-              url: `https://obuldanrptloktxcffvn.functions.supabase.co/og-images?site=docs${ogPageType ? `&type=${ogPageType}` : ''}&title=${props.meta?.title}&description=${props.meta?.description}`,
+              url: `https://obuldanrptloktxcffvn.functions.supabase.co/og-images?site=docs${
+                ogPageType ? `&type=${ogPageType}` : ''
+              }&title=${props.meta?.title}&description=${props.meta?.description}`,
             },
           ],
         }}

From 7515608d01b681c08504e997dcb4b36b852b7cf5 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Thu, 22 Dec 2022 00:41:28 -0500
Subject: [PATCH 156/215] remove supabase cli init

---
 supabase/config.toml | 71 --------------------------------------------
 supabase/seed.sql    |  0
 2 files changed, 71 deletions(-)
 delete mode 100644 supabase/config.toml
 delete mode 100644 supabase/seed.sql

diff --git a/supabase/config.toml b/supabase/config.toml
deleted file mode 100644
index 74e1c6daa07..00000000000
--- a/supabase/config.toml
+++ /dev/null
@@ -1,71 +0,0 @@
-# A string used to distinguish different Supabase projects on the same host. Defaults to the working
-# directory name when running `supabase init`.
-project_id = "supabase"
-
-[api]
-# Port to use for the API URL.
-port = 54321
-# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
-# endpoints. public and storage are always included.
-schemas = []
-# Extra schemas to add to the search_path of every request.
-extra_search_path = ["extensions"]
-# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
-# for accidental or malicious requests.
-max_rows = 1000
-
-[db]
-# Port to use for the local database URL.
-port = 54322
-# The database major version to use. This has to be the same as your remote database's. Run `SHOW
-# server_version;` on the remote database to check.
-major_version = 15
-
-[studio]
-# Port to use for Supabase Studio.
-port = 54323
-
-# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
-# are monitored, and you can view the emails that would have been sent from the web interface.
-[inbucket]
-# Port to use for the email testing server web interface.
-port = 54324
-smtp_port = 54325
-pop3_port = 54326
-
-[storage]
-# The maximum file size allowed (e.g. "5MB", "500KB").
-file_size_limit = "50MiB"
-
-[auth]
-# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
-# in emails.
-site_url = "http://localhost:3000"
-# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
-additional_redirect_urls = ["https://localhost:3000"]
-# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 seconds (one
-# week).
-jwt_expiry = 3600
-# Allow/disallow new user signups to your project.
-enable_signup = true
-
-[auth.email]
-# Allow/disallow new user signups via email to your project.
-enable_signup = true
-# If enabled, a user will be required to confirm any email change on both the old, and new email
-# addresses. If disabled, only the new email is required to confirm.
-double_confirm_changes = true
-# If enabled, users need to confirm their email address before signing in.
-enable_confirmations = false
-
-# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
-# `discord`, `facebook`, `github`, `gitlab`, `google`, `twitch`, `twitter`, `slack`, `spotify`.
-[auth.external.apple]
-enabled = false
-client_id = ""
-secret = ""
-# Overrides the default auth redirectUrl.
-redirect_uri = ""
-# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
-# or any other third-party OIDC providers.
-url = ""
diff --git a/supabase/seed.sql b/supabase/seed.sql
deleted file mode 100644
index e69de29bb2d..00000000000

From 6d7461271d8ecb1acd494503fddeec88d388af69 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Thu, 22 Dec 2022 00:55:45 -0500
Subject: [PATCH 157/215] update og image readme

---
 supabase/functions/og-images/README.md | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/supabase/functions/og-images/README.md b/supabase/functions/og-images/README.md
index 38095508e4b..886b9f69b9e 100644
--- a/supabase/functions/og-images/README.md
+++ b/supabase/functions/og-images/README.md
@@ -6,31 +6,27 @@ Generate  OG Images for the sites at supabase.
 
 To use the og image generator, you will need to visit the site with the following parameters:
 
-`site`: a string indicating which site you want to generate an image for. Currently, the only available option is docs.
+`site`: indicating which site you want to generate an image for. Currently, the only available option is docs.
 
-`title`: a string representing the title of the image you want to generate.
+`title`: representing the title of the image you want to generate.
 
-`description`: a string representing the description of the image you want to generate.
+`description`: representing the description of the image you want to generate.
 
-`type`: a string indicating the type of image you want to generate. This is optional and is only used for the docs site.
+`type` (optional): indicating the type of image you want to generate. This is optional and is only used for the docs site.
 
-`icon`: a string indicating the icon you want to use for the image. This is optional and is only used for the docs site.
+`icon` (optional): indicating the icon you want to use for the image. This is optional and is only used for the docs site.
 
-If any of these required parameters are missing, you will receive a 404 response with a message indicating that some parameters are missing.
-
-If the site parameter is not recognized, you will receive a 404 response with a message indicating that the site was not found.
-
-If all required parameters are provided and the site is recognized, you will receive an image in the form of a PNG file with the specified title, description, and other optional parameters included. The image will have a width of 1200 pixels and a height of 600 pixels.
+If any of the required parameters are missing, you will receive a 404 response with a message indicating that some parameters are missing. If the site parameter is not recognized, you will receive a 404 response with a message indicating that the site was not found.
 
 Here is an example link that you can use to test the website:
 
-https://www.example.com/image-generator?site=docs&title=Example%20Title&description=Example%20Description&type=Auth&icon=google
+https://obuldanrptloktxcffvn.functions.supabase.co/og-images?site=docs&title=Example%20Title&description=Example%20Description&type=Auth&icon=google
 
 This link will generate an image for the docs site with the title "Example Title", the description "Example Description", the Auth type, and the Google icon.
 
 ## Run locally
 
-First we need to start supabase using the [supabase cli](https://supabase.com/docs/reference/cli/introduction)
+First we need to start up supabase using the [supabase cli](https://supabase.com/docs/reference/cli/introduction)
 
 ```bash
 supabase start
@@ -41,4 +37,4 @@ Then run the function
 supabase functions serve og-images
 ```
 
-Now we can visit [localhost:54321/functions/v1/og-images/?site=docs&title=Title&description=Description&type=Auth](http://localhost:54321/functions/v1/og-images/?site=docs&title=Title&description=Description&type=Auth) to see your changes localy.
\ No newline at end of file
+Now we can visit [localhost:54321/functions/v1/og-images/?site=docs&title=Title&description=Description&type=Auth](http://localhost:54321/functions/v1/og-images/?site=docs&title=Title&description=Description&type=Auth) to see your changes localy.

From de3287e47f8e9a0edc02901103741072552c6146 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Thu, 22 Dec 2022 01:03:31 -0500
Subject: [PATCH 158/215] encode the title and description

---
 apps/docs/layouts/guides/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 991183239d9..0c79c49e05c 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -75,7 +75,7 @@ const Layout: FC<Props> = (props) => {
             {
               url: `https://obuldanrptloktxcffvn.functions.supabase.co/og-images?site=docs${
                 ogPageType ? `&type=${ogPageType}` : ''
-              }&title=${props.meta?.title}&description=${props.meta?.description}`,
+              }&title=${encodeURIComponent(props.meta?.title)}&description=${encodeURIComponent(props.meta?.description)}`,
             },
           ],
         }}

From d24b3ba0c40f486f7d8c9478bcf5830a5652b932 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Thu, 22 Dec 2022 01:04:17 -0500
Subject: [PATCH 159/215] run prettier

---
 apps/docs/layouts/guides/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 0c79c49e05c..07ec7929195 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -75,7 +75,9 @@ const Layout: FC<Props> = (props) => {
             {
               url: `https://obuldanrptloktxcffvn.functions.supabase.co/og-images?site=docs${
                 ogPageType ? `&type=${ogPageType}` : ''
-              }&title=${encodeURIComponent(props.meta?.title)}&description=${encodeURIComponent(props.meta?.description)}`,
+              }&title=${encodeURIComponent(props.meta?.title)}&description=${encodeURIComponent(
+                props.meta?.description
+              )}`,
             },
           ],
         }}

From a6b6e6bf2bbf24f2c908a1147266e9d57ac6d703 Mon Sep 17 00:00:00 2001
From: egor-romanov <58992960+egor-romanov@users.noreply.github.com>
Date: Thu, 22 Dec 2022 09:08:57 +0300
Subject: [PATCH 160/215] add step using "shadow databases" to prisma guide
 (#11169)

* add step using "shadow databases" to prisma guide

*Co-authored-by: dng <danny@supabase.io>
---
 .../docs/pages/guides/integrations/prisma.mdx | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/apps/docs/pages/guides/integrations/prisma.mdx b/apps/docs/pages/guides/integrations/prisma.mdx
index 7334621d910..6a80e95fee6 100644
--- a/apps/docs/pages/guides/integrations/prisma.mdx
+++ b/apps/docs/pages/guides/integrations/prisma.mdx
@@ -63,21 +63,38 @@ This project comes with TypeScript configured and has the following structure.
 
 ### Configuring the project to use PostgreSQL
 
-Go ahead and delete the `prisma/dev.db` file because we will be switching to PostgreSQL.
-Next, inside the `prisma/.env` file, update the value of the `DATABASE_URL` variable to the connection string you got in **step 1**. The URL might look as follows:
+By default, Prisma migrations will try to drop the `postgres` database, which can lead to conflicts with Supabase databases. For this scenario, use [Prisma Shadow Databases](https://www.prisma.io/docs/concepts/components/prisma-migrate/shadow-database#cloud-hosted-shadow-databases-must-be-created-manually).
 
-```env
-# prisma/.env
-postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:5432/postgres
+Create a shadow database in your PostgreSQL server within the same Supabase project using the `psql` CLI and the `DATABASE_URL` from the previous steps (or use the local database).
+
+```bash
+psql postgresql://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.red:5432
 ```
 
-Finally, inside your `schema.prisma` file, change the `provider` from “sqlite” to `“postgresql”`.
+After you connect to your project's PostgreSQL instance, create another database (e.g., `postgres_shadow`):
+
+```bash
+postgres=> CREATE DATABASE postgres_shadow;
+postgres=> exit
+```
+
+Go ahead and delete the `prisma/dev.db` file because we will be switching to PostgreSQL.
+In the `.env` file, update `DATABASE_URL` and `SHADOW_DATABASE_URL` to the connection string from **step 1**. The `.env` file should look like:
+
+```env
+# .env
+DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:5432/postgres"
+SHADOW_DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:5432/postgres_shadow"
+```
+
+In the `schema.prisma` file, change the `provider` from "sqlite" to `"postgresql"` and add the `shadowDatabaseUrl` property.
 This is what your `schema.prisma` file should look like:
 
 ```go
 datasource db {
   provider = “postgresql”
   url      = env(“DATABASE_URL”)
+  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
 }
 generator client {
   provider = “prisma-client-js”
@@ -124,11 +141,12 @@ This will create a `prisma/migrations` folder inside your `prisma` directory and
 If you’re working in a serverless environment (for example Node.js functions hosted on AWS Lambda, Vercel or Netlify Functions), you need to set up [connection pooling](https://www.prisma.io/docs/guides/performance-and-optimization/connection-management#serverless-environments-faas) using a tool like [PgBouncer](https://www.pgbouncer.org/). That’s because every function invocation may result in a [new connection to the database](https://www.prisma.io/docs/guides/performance-and-optimization/connection-management#the-serverless-challenge). Supabase [supports connection management using PgBouncer](https://supabase.io/blog/2021/04/02/supabase-pgbouncer#what-is-connection-pooling) and are enabled by default.
 Go to the **Database** page from the sidebar in the Supabase dashboard and navigate to **connection pool** settings
 ![Connection pool settings](/docs/img/guides/integrations/prisma/w0oowg8vq435ob5c3gf0.png)
-When running migrations you need to use the non pooled connection URL (like the one we used in **step 1**). However, when deploying your app, you’ll use the pooled connection URL and add the `?pgbouncer=true` flag to the PostgreSQL connection URL. To minimize the number of concurrent connections, setting the `connection_limit` to `1` is also recommended. So the URL might look as follows:
+When migrating, you need to use the non-pooled connection URL (like the one used in **step 1**). However, when deploying your app, use the pooled connection URL and add the `?pgbouncer=true` flag to the PostgreSQL connection URL. It's also recommended to minimize the number of concurrent connections by setting the `connection_limit` to `1`. The `.env` file should look like:
 
 ```env
-# prisma/.env
-postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:6543/postgres?pgbouncer=true&connection_limit=1
+# .env
+DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:6543/postgres?pgbouncer=true&connection_limit=1"
+SHADOW_DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:5432/postgres_shadow"
 ```
 
 Prisma Migrate uses database transactions to check out the current state of the database and the migrations table. However, the Migration Engine is designed to use a single connection to the database, and does not support connection pooling with PgBouncer. If you attempt to run Prisma Migrate commands in any environment that uses PgBouncer for connection pooling, you might see the following error:

From c5901320d096895bc7532db09371355d881c7055 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 22 Dec 2022 16:35:32 +0800
Subject: [PATCH 161/215] Update index.mdx

---
 apps/docs/pages/index.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 9921286f50c..17bc30954ec 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -11,9 +11,9 @@ export const meta = {
 
 <h2 className="text-base max-w-xl m-0">
   Supabase is an open source Firebase alternative providing all the backend features you need to
-  build a product. [Learn more](/docs/architecture) about Supabase, start with the
-  [tutorials](/docs/guides/getting-started#tutorials), or dive straight into the different products
-  and APIs.
+  build a product. [Learn more](/docs/guides/getting-started/architecture) about Supabase, start
+  with the [tutorials](/docs/guides/getting-started#tutorials), or dive straight into the different
+  products and APIs.
 </h2>
 
 {/* start container */}

From 94e97a455217d87fa8de2223fd0a752fb815c8af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Thu, 22 Dec 2022 13:17:23 +0100
Subject: [PATCH 162/215] chore: do not send captcha token for subscription
 endpoint (#11200)

---
 studio/components/interfaces/Billing/Billing.utils.ts       | 6 ++----
 studio/components/interfaces/Billing/EnterpriseUpdate.tsx   | 6 ++----
 .../components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx | 5 ++---
 studio/components/interfaces/Billing/ProUpgrade.tsx         | 6 ++----
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/studio/components/interfaces/Billing/Billing.utils.ts b/studio/components/interfaces/Billing/Billing.utils.ts
index 67f98f93e7b..4bad6ed40a7 100644
--- a/studio/components/interfaces/Billing/Billing.utils.ts
+++ b/studio/components/interfaces/Billing/Billing.utils.ts
@@ -52,8 +52,7 @@ export const formSubscriptionUpdatePayload = (
   },
   nonChangeableAddons: SubscriptionAddon[],
   selectedPaymentMethod: string,
-  region: string,
-  hcaptchaToken: string | undefined
+  region: string
 ) => {
   const { computeSize, pitrDuration, customDomains } = selectedAddons
 
@@ -78,8 +77,7 @@ export const formSubscriptionUpdatePayload = (
     ...(tierPriceId && { tier: tierPriceId.id }),
     addons,
     proration_date,
-    payment_method: selectedPaymentMethod,
-    hcaptchaToken
+    payment_method: selectedPaymentMethod
   }
 }
 
diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
index 254d83275c7..969b5d58993 100644
--- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
+++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx
@@ -114,8 +114,7 @@ const EnterpriseUpdate: FC<Props> = ({
         selectedAddons,
         nonChangeableAddons,
         selectedPaymentMethodId,
-        projectRegion,
-        undefined
+        projectRegion
       ),
       tier: currentSubscription.tier.price_id,
     }
@@ -178,8 +177,7 @@ const EnterpriseUpdate: FC<Props> = ({
         selectedAddons,
         nonChangeableAddons,
         selectedPaymentMethodId,
-        projectRegion,
-        token ?? undefined
+        projectRegion
       ),
       tier: currentSubscription.tier.price_id,
     }
diff --git a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
index 439f5edc6f3..9cda2b5aa30 100644
--- a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+++ b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
@@ -109,7 +109,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
       setMessage(values.message)
       return setShowConfirmModal(true)
     } else {
-      downgradeProject(values, token as string)
+      downgradeProject(values)
     }
   }
 
@@ -118,7 +118,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
     captchaRef.current?.resetCaptcha()
   }
 
-  const downgradeProject = async (values?: any, hcaptchaToken?: string) => {
+  const downgradeProject = async (values?: any) => {
     const downgradeMessage = values?.message ?? message
 
     try {
@@ -132,7 +132,6 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         tier,
         addons,
         proration_date,
-        hcaptchaToken: captchaToken ?? hcaptchaToken,
       })
 
       resetCaptcha()
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index 2f05f9a8844..b4cf2635051 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -137,8 +137,7 @@ const ProUpgrade: FC<Props> = ({
       selectedAddons,
       nonChangeableAddons,
       selectedPaymentMethodId,
-      projectRegion,
-      undefined
+      projectRegion
     )
 
     setIsRefreshingPreview(true)
@@ -184,8 +183,7 @@ const ProUpgrade: FC<Props> = ({
       selectedAddons,
       nonChangeableAddons,
       selectedPaymentMethodId,
-      projectRegion,
-      captchaToken ?? undefined
+      projectRegion
     )
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
     resetCaptcha()

From b58c99189fcaff23c657207440a780ae9170f0ed Mon Sep 17 00:00:00 2001
From: Francisco Mazzoni <francisco@supabase.io>
Date: Thu, 22 Dec 2022 09:42:19 -0300
Subject: [PATCH 163/215] after lw6 first pass

---
 apps/www/pages/launch-week/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index 7888948b8c7..3fc5fb1d0ff 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -1030,7 +1030,7 @@ export default function launchweek() {
         <SectionContainer className="!pt-0 sm:!pb-20 !pb-40">
           <div className="flex flex-col mb-16">
             <Badge className="mb-4 w-fit bg-gradient-to-r from-[#0E3737C2] to-[#67947F] hover:to-[#39617D94] dark:hover:to-[#A6FFD899] text-whiteA-1200 dark:text-black font-normal !py-1 !px-4 dark:from-white dark:via-white dark:to-[#1a7a4c75] bg-slate-1200">
-              Happening all week
+              Submissions Closed
             </Badge>
             <h2 className="text-3xl text-black dark:text-white mb-2">Launch Week Hackathon</h2>
             <p className="text-slate-900 w-[80%] lg:w-[50%]">
@@ -1212,8 +1212,14 @@ export default function launchweek() {
             })}
           </div>
           <div className="flex-1">
-            <Badge className="mb-6 bg-gradient-to-r from-[#0E3737C2] to-[#67947F] hover:to-[#39617D94] dark:hover:to-[#A6FFD899] text-whiteA-1200 dark:text-black font-normal !py-1 !px-4 dark:from-white dark:via-white dark:to-[#1a7a4c75] bg-slate-1200">
-              Currently Happening
+            <Badge
+              className={`!bg-transparent !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] !border-[#4d898c] dark:from-white dark:to-[#DFFFF1] dark:!border-[#DFFFF1] h-fit relative mb-4 ${
+                true
+                  ? 'after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#b6b6b6] dark:text-transparent dark:!border-[#163837] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]'
+                  : ''
+              }`}
+            >
+              Shipped
             </Badge>
             <h2 className="text-3xl dark:text-white mb-2">The Supabase Content Storm</h2>
             <p className="text-slate-900 md:max-w-[80%] mb-16">

From 7d27671e4971b7f9ce244acefdf3ec1b8c389840 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Thu, 22 Dec 2022 10:07:59 -0330
Subject: [PATCH 164/215] More console warnings

---
 .../NavigationMenu/NavigationMenu.tsx         |   2 +-
 .../NavigationMenuGuideListItems.tsx          |  16 ++-
 .../NavigationMenuRefListItems.tsx            | 116 ++++++++----------
 apps/docs/pages/guides/functions.mdx          |   2 +-
 4 files changed, 63 insertions(+), 73 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 8017146442b..cfb4d87b143 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -62,7 +62,7 @@ export type RefKeyOptions =
   | 'self-hosting-storage'
   | 'self-hosting-realtime'
 
-const NavigationMenu = ({ context }) => {
+const NavigationMenu = () => {
   const router = useRouter()
 
   let version = ''
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index f298683984d..e4e73a8e132 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -137,7 +137,14 @@ const ContentLink = React.memo(function ContentLink(props: any) {
               : 'hover:text-brand-900 text-scale-1000',
           ].join(' ')}
         >
-          {props.icon && <img className="w-3" src={`${router.basePath}${props.icon}`} />}
+          {props.icon && (
+            <Image
+              alt={props.icon}
+              width={12}
+              height={12}
+              src={`${router.basePath}${props.icon}`}
+            />
+          )}
           {props.name}
         </a>
       </Link>
@@ -177,14 +184,15 @@ const Content = (props) => {
         </a>
       </Link>
 
-      {menu.items.map((x, index) => {
+      {menu.items.map((x) => {
         return (
-          <div key={x.url}>
+          <div key={x.name}>
             {x.items && x.items.length > 0 ? (
               <div>
                 {x.items.map((subItem, subItemIndex) => {
                   return (
                     <ContentAccordionLink
+                      key={subItem.name}
                       subItem={subItem}
                       subItemIndex={subItemIndex}
                       parent={x}
@@ -193,7 +201,7 @@ const Content = (props) => {
                 })}
               </div>
             ) : (
-              <ContentLink url={x.url} icon={x.icon} name={x.name} />
+              <ContentLink url={x.url} icon={x.icon} name={x.name} key={x.name} />
             )}
           </div>
         )
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index fd87508d468..87a90b82baa 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -12,8 +12,9 @@ import RevVersionDropdown from '~/components/RefVersionDropdown'
 import { useMenuActiveRefId } from '~/hooks/useMenuState'
 import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
 
-import React from 'react'
+import React, { Fragment } from 'react'
 import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers'
+import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils'
 
 const HeaderImage = React.memo(function HeaderImage(props: any) {
   const router = useRouter()
@@ -131,6 +132,7 @@ const RenderLink = React.memo(function RenderLink(props: any) {
               .map((item) => {
                 return (
                   <FunctionLink
+                    key={item.title}
                     library={props.lib}
                     title={item.title}
                     id={item.id}
@@ -245,76 +247,56 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
 
       <ul className="function-link-list">
         {sections.map((fn: any, fnIndex) => {
-          //
-          // check if the link is allowed to be displayed
-          function isFuncNotInLibraryOrVersion(id, type) {
-            if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
-              /*
-               * Remove this menu link from side bar, as it does not exist for either
-               * this language, or for this lib version
-               *
-               * */
-              return true
-            } else {
-              return false
-            }
-          }
-
           // run allow check
-          if (isFuncNotInLibraryOrVersion(fn.id, fn.type)) {
-            return <></>
+          if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) {
+            return <Fragment key={fn.id}></Fragment>
           }
 
           // handle subtitles with subitems
-          if (!fn.id) {
-            return (
-              <>
-                <Divider />
-                <SideMenuTitle title={fn.title} />
-                {fn.items &&
-                  fn.items
-                    //.filter((item) => item.libs && item.libs.includes(lib))
-                    .map((item) => {
-                      // run allow check
-                      if (isFuncNotInLibraryOrVersion(item.id, item.type)) return <></>
-                      return (
-                        <RenderLink
-                          {...item}
-                          library={menu.title}
-                          index={fnIndex}
-                          modifierIds={modifierIds}
-                          filterIds={filterIds}
-                          authServerIds={authServerIds}
-                          lib={lib}
-                          allowedKeys={allowedKeys}
-                        />
-                      )
-                    })}
-              </>
-            )
-          } else {
-            // handle normal links
-            return (
-              <>
-                <RenderLink {...fn} lib={lib} />
-                {fn.items &&
-                  fn.items
-                    //.filter((item) => item.libs.includes(lib))
-                    .map((item) => (
-                      <RenderLink
-                        {...item}
-                        library={menu.title}
-                        index={fnIndex}
-                        modifierIds={modifierIds}
-                        filterIds={filterIds}
-                        authServerIds={authServerIds}
-                        lib={lib}
-                        allowedKeys={allowedKeys}
-                      />
-                    ))}
-              </>
-            )
-          }
+          return fn.id ? (
+            <Fragment key={fn.id}>
+              <RenderLink {...fn} lib={lib} />
+              {fn.items &&
+                fn.items
+                  //.filter((item) => item.libs.includes(lib))
+                  .map((item) => (
+                    <RenderLink
+                      {...item}
+                      library={menu.title}
+                      index={fnIndex}
+                      modifierIds={modifierIds}
+                      filterIds={filterIds}
+                      authServerIds={authServerIds}
+                      lib={lib}
+                      allowedKeys={allowedKeys}
+                    />
+                  ))}
+            </Fragment>
+          ) : (
+            <Fragment key={fn.title}>
+              <Divider />
+              <SideMenuTitle title={fn.title} />
+              {fn.items &&
+                fn.items.map((item, i) => {
+                  // run allow check
+                  if (isFuncNotInLibraryOrVersion(item.id, item.type, allowedKeys))
+                    return <Fragment key={item.id + i}></Fragment>
+                  return (
+                    <RenderLink
+                      {...item}
+                      key={item.id + i}
+                      library={menu.title}
+                      index={fnIndex}
+                      modifierIds={modifierIds}
+                      filterIds={filterIds}
+                      authServerIds={authServerIds}
+                      lib={lib}
+                      allowedKeys={allowedKeys}
+                    />
+                  )
+                })}
+            </Fragment>
+          )
         })}
       </ul>
     </div>
diff --git a/apps/docs/pages/guides/functions.mdx b/apps/docs/pages/guides/functions.mdx
index fdceb0ceea9..9c970cb6bfe 100644
--- a/apps/docs/pages/guides/functions.mdx
+++ b/apps/docs/pages/guides/functions.mdx
@@ -29,7 +29,7 @@ Check out the [Edge Function Examples](https://github.com/supabase/supabase/tree
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
   {examples.map((x) => (
-    <div className="col-span-4">
+    <div className="col-span-4" key={x.href}>
       <Link href={x.href} passHref>
         <a>
           <GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>

From 5322a76451157591b61153930b5b44cdc7b57596 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Tue, 22 Nov 2022 16:37:49 +0800
Subject: [PATCH 165/215] feat: refactor preset reports to use hook for data
 fetching

---
 .../interfaces/Reports/PresetReport.tsx       | 113 ------------------
 .../interfaces/Reports/Reports.constants.ts   |  10 +-
 .../interfaces/Reports/Reports.types.ts       |   5 +
 .../interfaces/Reports/Reports.utils.ts       |   7 --
 .../interfaces/Reports/Reports.utils.tsx      |  86 +++++++++++++
 .../ReportsLayout/ReportsMenu.utils.ts        |   9 +-
 studio/hooks/analytics/useLogsQuery.tsx       |   6 +-
 .../project/[ref]/reports/api-overview.tsx    |  65 ++++++++++
 .../pages/project/[ref]/reports/api-usage.tsx |  18 ---
 9 files changed, 172 insertions(+), 147 deletions(-)
 delete mode 100644 studio/components/interfaces/Reports/PresetReport.tsx
 delete mode 100644 studio/components/interfaces/Reports/Reports.utils.ts
 create mode 100644 studio/components/interfaces/Reports/Reports.utils.tsx
 create mode 100644 studio/pages/project/[ref]/reports/api-overview.tsx
 delete mode 100644 studio/pages/project/[ref]/reports/api-usage.tsx

diff --git a/studio/components/interfaces/Reports/PresetReport.tsx b/studio/components/interfaces/Reports/PresetReport.tsx
deleted file mode 100644
index bcf7ae5ad0d..00000000000
--- a/studio/components/interfaces/Reports/PresetReport.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Button, IconRefreshCw } from 'ui'
-import useLogsQuery from 'hooks/analytics/useLogsQuery'
-import { DatePickerToFrom } from '../Settings/Logs'
-import DatePickers from '../Settings/Logs/Logs.DatePickers'
-import {
-  renderErrorRateChart,
-  renderRequestsPathsTable,
-  renderStatusCodesChart,
-} from './renderers/OverviewRenderers'
-import { PRESET_CONFIG, REPORTS_DATEPICKER_HELPERS } from './Reports.constants'
-import { Presets } from './Reports.types'
-import ReportWidget from './ReportWidget'
-
-interface Props {
-  preset: Presets
-  projectRef: string
-}
-
-const DEFAULT_PARAMS = {
-  iso_timestamp_start: REPORTS_DATEPICKER_HELPERS[0].calcFrom(),
-  iso_timestamp_end: REPORTS_DATEPICKER_HELPERS[0].calcTo(),
-}
-
-const PresetReport: React.FC<Props> = ({ projectRef, preset }) => {
-  const config = PRESET_CONFIG[preset]
-  const [statusCodes, statusCodesHandlers] = useLogsQuery(projectRef, {
-    sql: config.sql.statusCodes,
-    ...DEFAULT_PARAMS,
-  })
-
-  const [requestPaths, requestPathsHandlers] = useLogsQuery(projectRef, {
-    sql: config.sql.requestPaths,
-    ...DEFAULT_PARAMS,
-  })
-
-  const [errorRate, errorRateHandlers] = useLogsQuery(projectRef, {
-    sql: config.sql.errorRate,
-    ...DEFAULT_PARAMS,
-  })
-
-  const handleRefresh = () => {
-    statusCodesHandlers.runQuery()
-    requestPathsHandlers.runQuery()
-    errorRateHandlers.runQuery()
-  }
-  const handleDatepickerChange = ({ to, from }: DatePickerToFrom) => {
-    const newParams = { iso_timestamp_start: from || '', iso_timestamp_end: to || '' }
-    statusCodesHandlers.setParams((prev) => ({ ...prev, ...newParams }))
-    requestPathsHandlers.setParams((prev) => ({ ...prev, ...newParams }))
-    errorRateHandlers.setParams((prev) => ({ ...prev, ...newParams }))
-  }
-  const isLoading = statusCodes.isLoading || requestPaths.isLoading
-
-  return (
-    <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
-      <h1 className="text-2xl text-scale-1200">{config.title}</h1>
-      <div className="flex flex-row justify-between">
-        <DatePickers
-          onChange={handleDatepickerChange}
-          to={statusCodes.params.iso_timestamp_end || ''}
-          from={statusCodes.params.iso_timestamp_end || ''}
-          helpers={REPORTS_DATEPICKER_HELPERS}
-        />
-        <Button
-          type="default"
-          size="tiny"
-          onClick={handleRefresh}
-          disabled={isLoading ? true : false}
-          icon={
-            <IconRefreshCw
-              size="tiny"
-              className={`text-scale-1100 ${isLoading ? 'animate-spin' : ''}`}
-            />
-          }
-        >
-          Refresh
-        </Button>
-      </div>
-
-      <div className="grid  lg:grid-cols-4">
-        <ReportWidget
-          isLoading={isLoading}
-          params={statusCodes.params}
-          className="col-span-4 col-start-1"
-          title="API Status Codes"
-          description="Distribution of API responses by status codes."
-          data={statusCodes.logData}
-          renderer={renderStatusCodesChart}
-        />
-        <ReportWidget
-          isLoading={isLoading}
-          params={errorRate.params}
-          className="col-span-4 col-start-1"
-          title="Error Rate"
-          description="Percentage of API 5XX and 4XX error responses."
-          data={errorRate.logData}
-          renderer={renderErrorRateChart}
-        />
-        <ReportWidget
-          isLoading={isLoading}
-          params={requestPaths.params}
-          className="col-span-4 col-start-1"
-          title="Slow API Requests"
-          description="Most frequently used requests, sorted by total querying time"
-          data={requestPaths.logData}
-          renderer={renderRequestsPathsTable}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default PresetReport
diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index ac4492a7075..e334c0485b8 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import { DatetimeHelper } from '../Settings/Logs'
-import { Presets } from './Reports.types'
+import { PresetConfig, Presets } from './Reports.types'
 
 export const LAYOUT_COLUMN_COUNT = 24
 
@@ -28,7 +28,13 @@ export const REPORTS_DATEPICKER_HELPERS: DatetimeHelper[] = [
   },
 ]
 
-export const PRESET_CONFIG = {
+export const DEFAULT_QUERY_PARAMS = {
+  iso_timestamp_start: REPORTS_DATEPICKER_HELPERS[0].calcFrom(),
+  iso_timestamp_end: REPORTS_DATEPICKER_HELPERS[0].calcTo(),
+}
+
+
+export const PRESET_CONFIG : Record<Presets, PresetConfig> ={
   [Presets.OVERVIEW]: {
     title: '',
     sql: {
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index 1838192894f..3679feeb5ca 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -1,6 +1,11 @@
 export enum Presets {
   OVERVIEW = 'overview',
 }
+
+export interface PresetConfig {
+  title: string
+  sql: Record<string, string>
+}
 export interface StatusCodesDatum {
   timestamp: number
   status_code: number
diff --git a/studio/components/interfaces/Reports/Reports.utils.ts b/studio/components/interfaces/Reports/Reports.utils.ts
deleted file mode 100644
index 12a7d634797..00000000000
--- a/studio/components/interfaces/Reports/Reports.utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-
-/**
- * Converts a query params string to an object
- */
-export const queryParamsToObject = (params: string) => {
-    return Object.fromEntries(new URLSearchParams(params))
-}
\ No newline at end of file
diff --git a/studio/components/interfaces/Reports/Reports.utils.tsx b/studio/components/interfaces/Reports/Reports.utils.tsx
new file mode 100644
index 00000000000..659362a0a9c
--- /dev/null
+++ b/studio/components/interfaces/Reports/Reports.utils.tsx
@@ -0,0 +1,86 @@
+import { IconRefreshCw } from '@supabase/ui'
+import useLogsQuery, { LogsQueryData, LogsQueryHandlers } from 'hooks/analytics/useLogsQuery'
+import React from 'react'
+import { Button } from 'ui'
+import { DatePickerToFrom } from '../Settings/Logs'
+import DatePickers from '../Settings/Logs/Logs.DatePickers'
+import { DEFAULT_QUERY_PARAMS, REPORTS_DATEPICKER_HELPERS } from './Reports.constants'
+import { PresetConfig } from './Reports.types'
+
+/**
+ * Converts a query params string to an object
+ */
+export const queryParamsToObject = (params: string) => {
+  return Object.fromEntries(new URLSearchParams(params))
+}
+
+// generate hooks based on preset config
+type PresetHooks = Record<keyof PresetConfig['sql'], () => [LogsQueryData, LogsQueryHandlers]>
+export const hooksFactory = (projectRef: string, config: PresetConfig) => {
+  const hooks: PresetHooks = Object.entries(config.sql).reduce((acc, [k, sql]) => {
+    return {
+      ...acc,
+      [k]: () =>
+        useLogsQuery(projectRef, {
+          sql,
+          ...DEFAULT_QUERY_PARAMS,
+        }),
+    }
+  }, {})
+  console.log(hooks)
+  return hooks
+}
+
+export const usePresetReport = (data: LogsQueryData[], handlers: LogsQueryHandlers[]) => {
+  const handleRefresh = () => {
+    handlers.forEach((handler) => {
+      handler.runQuery()
+    })
+  }
+  const handleDatepickerChange = ({ to, from }: DatePickerToFrom) => {
+    const newParams = { iso_timestamp_start: from || '', iso_timestamp_end: to || '' }
+
+    handlers.forEach((handler) => {
+      handler.setParams((prev) => ({
+        ...prev,
+        ...newParams,
+      }))
+    })
+  }
+  const isLoading = data.map((datum) => datum.isLoading).some((v) => v)
+  const Layout: React.FC<{title: string}> = ({ title, children }) => (
+    <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
+      <h1 className="text-2xl text-scale-1200">{title}</h1>
+      <div className="flex flex-row justify-between">
+        <DatePickers
+          onChange={handleDatepickerChange}
+          to={data[0].params.iso_timestamp_end || ''}
+          from={data[0].params.iso_timestamp_end || ''}
+          helpers={REPORTS_DATEPICKER_HELPERS}
+        />
+        <Button
+          type="default"
+          size="tiny"
+          onClick={handleRefresh}
+          disabled={isLoading ? true : false}
+          icon={
+            <IconRefreshCw
+              size="tiny"
+              className={`text-scale-1100 ${isLoading ? 'animate-spin' : ''}`}
+            />
+          }
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {children}
+    </div>
+  )
+  return {
+    isLoading,
+    Layout,
+    handleRefresh,
+    handleDatepickerChange,
+  }
+}
diff --git a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
index 28c14e91e92..49c75e4afa9 100644
--- a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
+++ b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
@@ -19,10 +19,11 @@ export const generateReportsMenu = (project?: Project): ProductMenuGroup[] => {
         ...(productReports
           ? [
               {
-                name: 'API usage',
-                key: 'api-usage',
-                url: `/project/${ref}/reports/api-usage`,
-                items: [],
+                name: 'API',
+                key: 'api-overview',
+                url: `/project/${ref}/reports/api-overview`,
+                items: []
+              },
               },
             ]
           : []),
diff --git a/studio/hooks/analytics/useLogsQuery.tsx b/studio/hooks/analytics/useLogsQuery.tsx
index 7b102dbc2d5..48721a081ae 100644
--- a/studio/hooks/analytics/useLogsQuery.tsx
+++ b/studio/hooks/analytics/useLogsQuery.tsx
@@ -8,13 +8,13 @@ import { LogsEndpointParams, Logs, LogData } from 'components/interfaces/Setting
 import { API_URL } from 'lib/constants'
 import useSWR from 'swr'
 import { get } from 'lib/common/fetch'
-interface Data {
+export interface LogsQueryData {
   params: LogsEndpointParams
   isLoading: boolean
   logData: LogData[]
   error: string | Object | null
 }
-interface Handlers {
+export interface LogsQueryHandlers {
   changeQuery: (newQuery?: string) => void
   runQuery: () => void
   setParams: Dispatch<SetStateAction<LogsEndpointParams>>
@@ -23,7 +23,7 @@ interface Handlers {
 const useLogsQuery = (
   projectRef: string,
   initialParams: Partial<LogsEndpointParams> = {}
-): [Data, Handlers] => {
+): [LogsQueryData, LogsQueryHandlers] => {
   const defaultHelper = getDefaultHelper(EXPLORER_DATEPICKER_HELPERS)
   const [params, setParams] = useState<LogsEndpointParams>({
     sql: initialParams?.sql || '',
diff --git a/studio/pages/project/[ref]/reports/api-overview.tsx b/studio/pages/project/[ref]/reports/api-overview.tsx
new file mode 100644
index 00000000000..40ed529d425
--- /dev/null
+++ b/studio/pages/project/[ref]/reports/api-overview.tsx
@@ -0,0 +1,65 @@
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+
+import { NextPageWithLayout } from 'types'
+import { Presets } from 'components/interfaces/Reports/Reports.types'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
+import ReportWidget from 'components/interfaces/Reports/ReportWidget'
+import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
+import {
+  renderErrorRateChart,
+  renderRequestsPathsTable,
+  renderStatusCodesChart,
+} from 'components/interfaces/Reports/renderers/OverviewRenderers'
+
+export const ApiOverviewPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = router.query
+  const config = PRESET_CONFIG[Presets.OVERVIEW]
+  const hooks = hooksFactory(ref as string, config)
+  const [statusCodes, statusCodesHandlers] = hooks.statusCodes()
+  const [errorRate, errorRateHandlers] = hooks.errorRate()
+  const [requestPaths, requestPathsHandlers] = hooks.requestPaths()
+  const { isLoading, Layout } = usePresetReport(
+    [statusCodes, errorRate, requestPaths],
+    [statusCodesHandlers, errorRateHandlers, requestPathsHandlers]
+  )
+  return (
+    <Layout title={config.title}>
+      <div className="grid  lg:grid-cols-4">
+        <ReportWidget
+          isLoading={isLoading}
+          params={statusCodes.params}
+          className="col-span-4 col-start-1"
+          title="API Status Codes"
+          description="Distribution of API responses by status codes."
+          data={statusCodes.logData}
+          renderer={renderStatusCodesChart}
+        />
+        <ReportWidget
+          isLoading={isLoading}
+          params={errorRate.params}
+          className="col-span-4 col-start-1"
+          title="Error Rate"
+          description="Percentage of API 5XX and 4XX error responses."
+          data={errorRate.logData}
+          renderer={renderErrorRateChart}
+        />
+        <ReportWidget
+          isLoading={isLoading}
+          params={requestPaths.params}
+          className="col-span-4 col-start-1"
+          title="Slow API Requests"
+          description="Most frequently used requests, sorted by total querying time"
+          data={requestPaths.logData}
+          renderer={renderRequestsPathsTable}
+        />
+      </div>
+    </Layout>
+  )
+}
+
+ApiOverviewPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+
+export default observer(ApiOverviewPage)
diff --git a/studio/pages/project/[ref]/reports/api-usage.tsx b/studio/pages/project/[ref]/reports/api-usage.tsx
deleted file mode 100644
index 9a027edf251..00000000000
--- a/studio/pages/project/[ref]/reports/api-usage.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
-
-import { NextPageWithLayout } from 'types'
-import PresetReport from 'components/interfaces/Reports/PresetReport'
-import { Presets } from 'components/interfaces/Reports/Reports.types'
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
-
-export const ApiUsagePage: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref } = router.query
-
-  return <PresetReport preset={Presets.OVERVIEW} projectRef={ref as string} />
-}
-
-ApiUsagePage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
-
-export default observer(ApiUsagePage)

From de385d38c91972649ce453e2cd47759764b4c026 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Tue, 22 Nov 2022 17:38:55 +0800
Subject: [PATCH 166/215] feat: add api bots report

---
 .../interfaces/Reports/Reports.constants.ts   | 54 ++++++++++-
 .../interfaces/Reports/Reports.types.ts       |  3 +-
 .../Reports/renderers/ApiBotsRenderers.tsx    | 90 +++++++++++++++++++
 .../ReportsLayout/ReportsMenu.utils.ts        | 15 +++-
 .../ui/ProductMenu/ProductMenuGroup.tsx       |  3 +
 .../pages/project/[ref]/reports/api-bots.tsx  | 51 +++++++++++
 .../project/[ref]/reports/api-overview.tsx    |  2 +-
 7 files changed, 212 insertions(+), 6 deletions(-)
 create mode 100644 studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
 create mode 100644 studio/components/ui/ProductMenu/ProductMenuGroup.tsx
 create mode 100644 studio/pages/project/[ref]/reports/api-bots.tsx

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index e334c0485b8..ea6005b890c 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -35,7 +35,8 @@ export const DEFAULT_QUERY_PARAMS = {
 
 
 export const PRESET_CONFIG : Record<Presets, PresetConfig> ={
-  [Presets.OVERVIEW]: {
+  
+  [Presets.API_OVERVIEW]: {
     title: '',
     sql: {
       statusCodes: `
@@ -95,6 +96,57 @@ ORDER BY
 `,
     },
   },
+  [Presets.API_BOTS]: {
+    title: "API Bots",
+    sql: {
+      userAgents: `
+select
+  h.user_agent as user_agent,
+  cf.asOrganization as request_source,
+  count(f.id) as count
+from
+  edge_logs as f
+  cross join unnest(f.metadata) as m
+  cross join unnest(m.request) as r
+  cross join unnest(r.cf) as cf
+  cross join unnest(r.headers) as h
+group by
+  user_agent,
+  request_source
+order by
+  count desc
+limit 12
+`,
+      botScores:`
+select
+  h.cf_connecting_ip as ip,
+  h.cf_ipcountry as country,
+  h.user_agent as user_agent,
+  r.path as path,
+  b.score as bot_score,
+  b.verifiedBot as bot_verified,
+  count(f.id) as count
+from
+  edge_logs as f
+  cross join unnest(f.metadata) as m
+  cross join unnest(m.request) as r
+  cross join unnest(r.cf) as cf
+  cross join unnest(r.headers) as h
+  cross join unnest(cf.botManagement) as b
+group by
+  ip,
+  country,
+  path,
+  user_agent,
+  bot_score,
+  bot_verified
+order by
+  bot_score desc
+limit 20
+
+      `
+    }
+  }
 }
 
 export const DATETIME_FORMAT = 'MMM D, ha'
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index 3679feeb5ca..359b9bd7569 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -1,5 +1,6 @@
 export enum Presets {
-  OVERVIEW = 'overview',
+  API_OVERVIEW = 'overview',
+  API_BOTS="api_bots"
 }
 
 export interface PresetConfig {
diff --git a/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx b/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
new file mode 100644
index 00000000000..22f47142c32
--- /dev/null
+++ b/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
@@ -0,0 +1,90 @@
+import Table from 'components/to-be-cleaned/Table'
+import { ReportWidgetProps } from '../ReportWidget'
+
+export const renderUserAgents = (
+  props: ReportWidgetProps<{
+    user_agent: string
+    request_source: string
+    count: number
+  }>
+) => {
+  return (
+    <Table
+      containerClassName="max-h-72 w-full overflow-y-auto"
+      className="relative rounded border border-scale-600"
+      head={
+        <>
+          <Table.th className="sticky top-0 z-10">User Agents</Table.th>
+          <Table.th className="sticky top-0 z-10">Request Source</Table.th>
+          <Table.th className="sticky top-0 z-10">Count</Table.th>
+        </>
+      }
+      body={
+        <>
+          {props.data.map((row, index) => {
+            return (
+              <Table.tr key={index}>
+                <Table.td className="max-w-sm lg:max-w-lg" style={{ padding: '0.3rem' }}>
+                  {row.user_agent}
+                </Table.td>
+                <Table.td>{row.request_source}</Table.td>
+                <Table.td style={{ padding: '0.5rem' }} className="align-top text-xs">
+                  {row.count}
+                </Table.td>
+              </Table.tr>
+            )
+          })}
+        </>
+      }
+    />
+  )
+}
+
+export const renderBotScores = (
+  props: ReportWidgetProps<{
+    ip: string
+    country: string
+    user_agent: string
+    path: string
+    bot_score: number
+    bot_verified: boolean
+    count: number
+  }>
+) => {
+  return (
+    <Table
+      containerClassName="max-h-72 w-full overflow-y-auto"
+      className="relative rounded border border-scale-600"
+      head={
+        <>
+          <Table.th className="sticky top-0 z-10">IP (Country)</Table.th>
+          <Table.th className="sticky top-0 z-10">Request Path</Table.th>
+          <Table.th className="sticky top-0 z-10">User Agent</Table.th>
+          <Table.th className="sticky top-0 z-10">Bot Score</Table.th>
+          <Table.th className="sticky top-0 z-10">Is Verified Bot</Table.th>
+          <Table.th className="sticky top-0 z-10">Count</Table.th>
+        </>
+      }
+      body={
+        <>
+          {props.data.map((row, index) => {
+            return (
+              <Table.tr key={index}>
+                <Table.td className="max-w-sm lg:max-w-lg" style={{ padding: '0.3rem' }}>
+                  {row.ip} ({row.country})
+                </Table.td>
+                <Table.td>{row.path}</Table.td>
+                <Table.td className="max-w-xs truncate">{row.user_agent}</Table.td>
+                <Table.td>{row.bot_score}</Table.td>
+                <Table.td>{row.bot_verified ? 'Yes' : 'No'}</Table.td>
+                <Table.td style={{ padding: '0.5rem' }} className="align-top text-xs">
+                  {row.count}
+                </Table.td>
+              </Table.tr>
+            )
+          })}
+        </>
+      }
+    />
+  )
+}
\ No newline at end of file
diff --git a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
index 49c75e4afa9..427476af448 100644
--- a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
+++ b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
@@ -8,7 +8,7 @@ export const generateReportsMenu = (project?: Project): ProductMenuGroup[] => {
 
   return [
     {
-      title: 'Reports',
+      title: '',
       items: [
         {
           name: 'Custom reports',
@@ -16,14 +16,23 @@ export const generateReportsMenu = (project?: Project): ProductMenuGroup[] => {
           url: `/project/${ref}/reports`,
           items: [],
         },
+      ],
+    },
+    {
+      items: [
         ...(productReports
           ? [
               {
-                name: 'API',
+                name: 'API Overview',
                 key: 'api-overview',
                 url: `/project/${ref}/reports/api-overview`,
-                items: []
+                items: [],
               },
+              {
+                name: 'API Bots',
+                key: 'api-bots',
+                url: `/project/${ref}/reports/api-bots`,
+                items: [],
               },
             ]
           : []),
diff --git a/studio/components/ui/ProductMenu/ProductMenuGroup.tsx b/studio/components/ui/ProductMenu/ProductMenuGroup.tsx
new file mode 100644
index 00000000000..96f4ea20ef0
--- /dev/null
+++ b/studio/components/ui/ProductMenu/ProductMenuGroup.tsx
@@ -0,0 +1,3 @@
+const ProductMenuGroup = ()=>{
+    
+}
\ No newline at end of file
diff --git a/studio/pages/project/[ref]/reports/api-bots.tsx b/studio/pages/project/[ref]/reports/api-bots.tsx
new file mode 100644
index 00000000000..40f518ae010
--- /dev/null
+++ b/studio/pages/project/[ref]/reports/api-bots.tsx
@@ -0,0 +1,51 @@
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+
+import { NextPageWithLayout } from 'types'
+import { Presets } from 'components/interfaces/Reports/Reports.types'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
+import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
+import { renderBotScores, renderUserAgents } from 'components/interfaces/Reports/renderers/ApiBotsRenderers'
+import ReportWidget from 'components/interfaces/Reports/ReportWidget'
+
+export const ApiBotsPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = router.query
+  const config = PRESET_CONFIG[Presets.API_BOTS]
+  const hooks = hooksFactory(ref as string, config)
+  const [userAgents, userAgentsHandlers] = hooks.userAgents()
+  const [botScores, botScoresHandlers] = hooks.botScores()
+  const { isLoading, Layout } = usePresetReport(
+    [userAgents, botScores],
+    [userAgentsHandlers, botScoresHandlers]
+  )
+  return (
+    <Layout title={config.title}>
+      <div className="grid  lg:grid-cols-4">
+        <ReportWidget
+          isLoading={isLoading}
+          params={userAgents.params}
+          className="col-span-4 col-start-1"
+          title="Top User Agents"
+          description="The types of user agents using the API and their organization source."
+          data={userAgents.logData}
+          renderer={renderUserAgents}
+        />
+        <ReportWidget
+          isLoading={isLoading}
+          params={botScores.params}
+          className="col-span-4 col-start-1"
+          title="Bot-like API Requests"
+          description="Suspicious bot-like requests, as flagged by Cloudflare"
+          data={botScores.logData}
+          renderer={renderBotScores}
+        />
+      </div>
+    </Layout>
+  )
+}
+
+ApiBotsPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+
+export default observer(ApiBotsPage)
diff --git a/studio/pages/project/[ref]/reports/api-overview.tsx b/studio/pages/project/[ref]/reports/api-overview.tsx
index 40ed529d425..cd211996a34 100644
--- a/studio/pages/project/[ref]/reports/api-overview.tsx
+++ b/studio/pages/project/[ref]/reports/api-overview.tsx
@@ -16,7 +16,7 @@ import {
 export const ApiOverviewPage: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query
-  const config = PRESET_CONFIG[Presets.OVERVIEW]
+  const config = PRESET_CONFIG[Presets.API_OVERVIEW]
   const hooks = hooksFactory(ref as string, config)
   const [statusCodes, statusCodesHandlers] = hooks.statusCodes()
   const [errorRate, errorRateHandlers] = hooks.errorRate()

From de04637d4968895142f9cf4af085b32cb4e6b482 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Tue, 22 Nov 2022 20:04:48 +0800
Subject: [PATCH 167/215] feat: add auth report

---
 .../interfaces/Reports/Reports.constants.ts   | 47 ++++++++++++----
 .../interfaces/Reports/Reports.types.ts       |  3 +-
 .../Reports/renderers/AuthRenderers.tsx       | 47 ++++++++++++++++
 .../ReportsLayout/ReportsMenu.utils.ts        |  6 +++
 studio/pages/project/[ref]/reports/auth.tsx   | 54 +++++++++++++++++++
 5 files changed, 147 insertions(+), 10 deletions(-)
 create mode 100644 studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
 create mode 100644 studio/pages/project/[ref]/reports/auth.tsx

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index ea6005b890c..c2a81041b29 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -33,9 +33,7 @@ export const DEFAULT_QUERY_PARAMS = {
   iso_timestamp_end: REPORTS_DATEPICKER_HELPERS[0].calcTo(),
 }
 
-
-export const PRESET_CONFIG : Record<Presets, PresetConfig> ={
-  
+export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
   [Presets.API_OVERVIEW]: {
     title: '',
     sql: {
@@ -97,7 +95,7 @@ ORDER BY
     },
   },
   [Presets.API_BOTS]: {
-    title: "API Bots",
+    title: 'API Bots',
     sql: {
       userAgents: `
 select
@@ -117,7 +115,7 @@ order by
   count desc
 limit 12
 `,
-      botScores:`
+      botScores: `
 select
   h.cf_connecting_ip as ip,
   h.cf_ipcountry as country,
@@ -143,10 +141,41 @@ group by
 order by
   bot_score desc
 limit 20
-
-      `
-    }
-  }
+      `,
+    },
+  },
+  [Presets.AUTH]: {
+    title: 'Auth',
+    sql: {
+      dailyActiveUsers: `
+select 
+  timestamp_trunc(timestamp, day) as timestamp,
+  count(distinct json_extract(f.event_message, "$.user_id")) as count
+from gotrue_logs f
+cross join unnest(f.metadata) as m
+where json_extract(f.event_message, "$.user_id") is not null
+group by 
+  timestamp
+order by
+  timestamp
+`,
+newUsers: `
+select 
+  TIMESTAMP_TRUNC(f.timestamp, DAY) as timestamp,
+  count(id) as count
+from 
+gotrue_logs f
+  cross join unnest(f.metadata) as m
+where  f.timestamp > "2022-11-20" 
+and m.project = "tzljvicuuxegpzwuwife"
+and JSON_VALUE(f.event_message, "$.path") = "/signup"
+and JSON_VALUE(f.event_message, "$.auth_event.actor_id") is not null
+and JSON_VALUE(f.event_message, "$.auth_event.action") != "user_repeated_signup"
+group by 
+  timestamp
+`
+    },
+  },
 }
 
 export const DATETIME_FORMAT = 'MMM D, ha'
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index 359b9bd7569..5ace186ea57 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -1,6 +1,7 @@
 export enum Presets {
   API_OVERVIEW = 'overview',
-  API_BOTS="api_bots"
+  API_BOTS = 'api_bots',
+  AUTH = 'auth',
 }
 
 export interface PresetConfig {
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
new file mode 100644
index 00000000000..c6a05709fe9
--- /dev/null
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -0,0 +1,47 @@
+import { BarChart } from 'components/to-be-cleaned/Charts/ChartRenderer'
+import { DATETIME_FORMAT } from '../Reports.constants'
+import { ReportWidgetProps } from '../ReportWidget'
+
+export const renderDailyActiveUsers = (
+  props: ReportWidgetProps<{
+    count: number
+    timestamp: string
+  }>
+) => {
+  return (
+    <>
+      <div className="flex w-full flex-col">
+        <BarChart
+          data={props.data}
+          attribute="count"
+          label=""
+          minimalHeader
+          customDateFormat={DATETIME_FORMAT}
+          noDataMessage={'No authenticated users during this time period'}
+        />
+      </div>
+    </>
+  )
+}
+
+export const renderNewUsers = (
+  props: ReportWidgetProps<{
+    count: number
+    timestamp: string
+  }>
+) => {
+  return (
+    <>
+      <div className="flex w-full flex-col">
+        <BarChart
+          data={props.data}
+          attribute="count"
+          label=""
+          minimalHeader
+          customDateFormat={DATETIME_FORMAT}
+          noDataMessage={'No new user signups during this time period'}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
index 427476af448..c120e0fbb64 100644
--- a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
+++ b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
@@ -34,6 +34,12 @@ export const generateReportsMenu = (project?: Project): ProductMenuGroup[] => {
                 url: `/project/${ref}/reports/api-bots`,
                 items: [],
               },
+              {
+                name: 'Auth',
+                key: 'auth',
+                url: `/project/${ref}/reports/auth`,
+                items: [],
+              },
             ]
           : []),
         {
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
new file mode 100644
index 00000000000..2a33a8d6837
--- /dev/null
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -0,0 +1,54 @@
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+
+import { NextPageWithLayout } from 'types'
+import { Presets } from 'components/interfaces/Reports/Reports.types'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
+import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
+import ReportWidget from 'components/interfaces/Reports/ReportWidget'
+import {
+  renderDailyActiveUsers,
+  renderNewUsers,
+} from 'components/interfaces/Reports/renderers/AuthRenderers'
+
+export const ApiBotsPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = router.query
+  const config = PRESET_CONFIG[Presets.AUTH]
+  const hooks = hooksFactory(ref as string, config)
+  const [dailyActiveUsers, dailyActiveUsersHandlers] = hooks.dailyActiveUsers()
+  const [newUsers, newUsersHandlers] = hooks.newUsers()
+  const { isLoading, Layout } = usePresetReport(
+    [dailyActiveUsers, newUsers],
+    [dailyActiveUsersHandlers, newUsersHandlers]
+  )
+  return (
+    <Layout title={config.title}>
+      <div className="grid  lg:grid-cols-4">
+        <ReportWidget
+          isLoading={isLoading}
+          params={dailyActiveUsers.params}
+          className="col-span-4 col-start-1"
+          title="Daily Active Users"
+          description="The daily count of active authenticated users"
+          data={dailyActiveUsers.logData}
+          renderer={renderDailyActiveUsers}
+        />
+        <ReportWidget
+          isLoading={isLoading}
+          params={newUsers.params}
+          className="col-span-4 col-start-1"
+          title="Daily New Users"
+          description="The daily count of new user signups"
+          data={newUsers.logData}
+          renderer={renderNewUsers}
+        />
+      </div>
+    </Layout>
+  )
+}
+
+ApiBotsPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+
+export default observer(ApiBotsPage)

From 31880c2740a4f77a78aa6ad84d769183ef2ed9b5 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 5 Dec 2022 17:52:55 +0800
Subject: [PATCH 168/215] feat: refactored hook generation logic

---
 .../interfaces/Reports/Reports.constants.ts   | 233 ++++++++++--------
 .../interfaces/Reports/Reports.types.ts       |  17 +-
 .../interfaces/Reports/Reports.utils.tsx      |  55 +++--
 studio/hooks/analytics/useDbQuery.tsx         |  37 +++
 .../pages/project/[ref]/reports/api-bots.tsx  |  13 +-
 .../project/[ref]/reports/api-overview.tsx    |  23 +-
 studio/pages/project/[ref]/reports/auth.tsx   |  13 +-
 7 files changed, 237 insertions(+), 154 deletions(-)
 create mode 100644 studio/hooks/analytics/useDbQuery.tsx

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index c2a81041b29..2f99d265a3d 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -36,118 +36,135 @@ export const DEFAULT_QUERY_PARAMS = {
 export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
   [Presets.API_OVERVIEW]: {
     title: '',
-    sql: {
-      statusCodes: `
-  select
-    timestamp_trunc(timestamp, hour) as timestamp,
-    r.status_code as status_code,
-    count(status_code) as count
-  FROM
-    edge_logs
-  CROSS JOIN UNNEST(metadata) AS m
-  CROSS JOIN UNNEST(m.response) AS r
-  GROUP BY
-    timestamp,
-    status_code
-  ORDER BY
-    timestamp ASC`,
-      errorRate: `
-select
-  timestamp_trunc(timestamp, hour) as timestamp,
-  count(timestamp) as count
-FROM
-  edge_logs
-  LEFT JOIN UNNEST(metadata) AS f1 ON TRUE
-  LEFT JOIN UNNEST(f1.response) AS f3 ON TRUE
-WHERE
-  f3.status_code >= 400
-GROUP BY
-  timestamp
-ORDER BY
-  timestamp ASC
-`,
-      requestPaths: `
-  select
-    f2.path as path,
-    f2.search as query_params,
-    f2.method as method,
-    f3.status_code as status_code,
-    avg(f3.origin_time) as avg_origin_time,
-    sum(f3.origin_time) as sum,
-    APPROX_QUANTILES(f3.origin_time, 100) as quantiles,
-    count(timestamp) as count
-  FROM
-    edge_logs
-    LEFT JOIN UNNEST(metadata) AS f1 ON TRUE
-    LEFT JOIN UNNEST(f1.request) AS f2 ON TRUE
-    LEFT JOIN UNNEST(f1.response) AS f3 ON TRUE
-  GROUP BY
-    path,
-    query_params,
-    method,
-    status_code
-  ORDER BY
-    sum DESC,
-    count desc,
-    avg_origin_time DESC
-  LIMIT 50
-`,
+    queries: {
+      statusCodes: {
+        queryType: 'logs',
+        sql: `
+        select
+          timestamp_trunc(timestamp, hour) as timestamp,
+          r.status_code as status_code,
+          count(status_code) as count
+        FROM
+          edge_logs
+        CROSS JOIN UNNEST(metadata) AS m
+        CROSS JOIN UNNEST(m.response) AS r
+        GROUP BY
+          timestamp,
+          status_code
+        ORDER BY
+          timestamp ASC`,
+      },
+      errorRates: {
+        queryType: 'logs',
+        sql: `
+        select
+          timestamp_trunc(timestamp, hour) as timestamp,
+          count(timestamp) as count
+        FROM
+          edge_logs
+          LEFT JOIN UNNEST(metadata) AS f1 ON TRUE
+          LEFT JOIN UNNEST(f1.response) AS f3 ON TRUE
+        WHERE
+          f3.status_code >= 400
+        GROUP BY
+          timestamp
+        ORDER BY
+          timestamp ASC
+        `,
+      },
+      requestPaths: {
+        queryType: 'logs',
+        sql: `
+        select
+          f2.path as path,
+          f2.search as query_params,
+          f2.method as method,
+          f3.status_code as status_code,
+          avg(f3.origin_time) as avg_origin_time,
+          sum(f3.origin_time) as sum,
+          APPROX_QUANTILES(f3.origin_time, 100) as quantiles,
+          count(timestamp) as count
+        FROM
+          edge_logs
+          LEFT JOIN UNNEST(metadata) AS f1 ON TRUE
+          LEFT JOIN UNNEST(f1.request) AS f2 ON TRUE
+          LEFT JOIN UNNEST(f1.response) AS f3 ON TRUE
+        GROUP BY
+          path,
+          query_params,
+          method,
+          status_code
+        ORDER BY
+          sum DESC,
+          count desc,
+          avg_origin_time DESC
+        LIMIT 50
+      `,
+      },
     },
   },
   [Presets.API_BOTS]: {
     title: 'API Bots',
-    sql: {
-      userAgents: `
-select
-  h.user_agent as user_agent,
-  cf.asOrganization as request_source,
-  count(f.id) as count
-from
-  edge_logs as f
-  cross join unnest(f.metadata) as m
-  cross join unnest(m.request) as r
-  cross join unnest(r.cf) as cf
-  cross join unnest(r.headers) as h
-group by
-  user_agent,
-  request_source
-order by
-  count desc
-limit 12
-`,
-      botScores: `
-select
-  h.cf_connecting_ip as ip,
-  h.cf_ipcountry as country,
-  h.user_agent as user_agent,
-  r.path as path,
-  b.score as bot_score,
-  b.verifiedBot as bot_verified,
-  count(f.id) as count
-from
-  edge_logs as f
-  cross join unnest(f.metadata) as m
-  cross join unnest(m.request) as r
-  cross join unnest(r.cf) as cf
-  cross join unnest(r.headers) as h
-  cross join unnest(cf.botManagement) as b
-group by
-  ip,
-  country,
-  path,
-  user_agent,
-  bot_score,
-  bot_verified
-order by
-  bot_score desc
-limit 20
-      `,
+    queries: {
+      userAgents: {
+        queryType: 'logs',
+        sql: `
+        select
+          h.user_agent as user_agent,
+          cf.asOrganization as request_source,
+          count(f.id) as count
+        from
+          edge_logs as f
+          cross join unnest(f.metadata) as m
+          cross join unnest(m.request) as r
+          cross join unnest(r.cf) as cf
+          cross join unnest(r.headers) as h
+        group by
+          user_agent,
+          request_source
+        order by
+          count desc
+        limit 12
+        `,
+      },
+      botScores: {
+        queryType: 'logs',
+        sql: `
+        select
+          h.cf_connecting_ip as ip,
+          h.cf_ipcountry as country,
+          h.user_agent as user_agent,
+          r.path as path,
+          b.score as bot_score,
+          b.verifiedBot as bot_verified,
+          count(f.id) as count
+        from
+          edge_logs as f
+          cross join unnest(f.metadata) as m
+          cross join unnest(m.request) as r
+          cross join unnest(r.cf) as cf
+          cross join unnest(r.headers) as h
+          cross join unnest(cf.botManagement) as b
+        group by
+          ip,
+          country,
+          path,
+          user_agent,
+          bot_score,
+          bot_verified
+        order by
+          bot_score desc
+        limit 20
+              `,
+      },
     },
   },
   [Presets.AUTH]: {
     title: 'Auth',
-    sql: {
-      dailyActiveUsers: `
+    queries: {
+      dailyActiveUsers: {
+        queryType: 'logs',
+        sql: `
 select 
   timestamp_trunc(timestamp, day) as timestamp,
   count(distinct json_extract(f.event_message, "$.user_id")) as count
@@ -159,7 +176,10 @@ group by
 order by
   timestamp
 `,
-newUsers: `
+      },
+      newUsers: {
+        queryType: 'logs',
+        sql: `
 select 
   TIMESTAMP_TRUNC(f.timestamp, DAY) as timestamp,
   count(id) as count
@@ -173,7 +193,8 @@ and JSON_VALUE(f.event_message, "$.auth_event.actor_id") is not null
 and JSON_VALUE(f.event_message, "$.auth_event.action") != "user_repeated_signup"
 group by 
   timestamp
-`
+`,
+      },
     },
   },
 }
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index 5ace186ea57..f86e32ef143 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -4,9 +4,24 @@ export enum Presets {
   AUTH = 'auth',
 }
 
+export interface BaseReportParams {
+  iso_timestamp_start: string
+  iso_timestamp_end: string
+}
+
+export type VariableSql = string | ((params: BaseReportParams) => string)
+
+export type PresetSql = string | VariableSql
+
 export interface PresetConfig {
   title: string
-  sql: Record<string, string>
+  queries: Record<
+    string,
+    {
+      sql: PresetSql
+      queryType: 'logs' | 'db'
+    }
+  >
 }
 export interface StatusCodesDatum {
   timestamp: number
diff --git a/studio/components/interfaces/Reports/Reports.utils.tsx b/studio/components/interfaces/Reports/Reports.utils.tsx
index 659362a0a9c..1f624714b2c 100644
--- a/studio/components/interfaces/Reports/Reports.utils.tsx
+++ b/studio/components/interfaces/Reports/Reports.utils.tsx
@@ -1,4 +1,5 @@
 import { IconRefreshCw } from '@supabase/ui'
+import useDbQuery, { DbQueryData, DbQueryHandler } from 'hooks/analytics/useDbQuery'
 import useLogsQuery, { LogsQueryData, LogsQueryHandlers } from 'hooks/analytics/useLogsQuery'
 import React from 'react'
 import { Button } from 'ui'
@@ -15,23 +16,35 @@ export const queryParamsToObject = (params: string) => {
 }
 
 // generate hooks based on preset config
-type PresetHooks = Record<keyof PresetConfig['sql'], () => [LogsQueryData, LogsQueryHandlers]>
+type PresetHookResult = [LogsQueryData, LogsQueryHandlers]
+type PresetHooks = Record<keyof PresetConfig['queries'], () => PresetHookResult>
 export const hooksFactory = (projectRef: string, config: PresetConfig) => {
-  const hooks: PresetHooks = Object.entries(config.sql).reduce((acc, [k, sql]) => {
-    return {
-      ...acc,
-      [k]: () =>
-        useLogsQuery(projectRef, {
-          sql,
-          ...DEFAULT_QUERY_PARAMS,
-        }),
-    }
-  }, {})
-  console.log(hooks)
+  const hooks: PresetHooks = Object.entries(config.queries).reduce(
+    (acc, [k, { sql, queryType }]) => {
+      if (queryType === 'db') {
+        return {
+          ...acc,
+          [k]: () => useDbQuery(sql),
+        }
+      } else {
+        return {
+          ...acc,
+          [k]: () =>
+            useLogsQuery(projectRef, {
+              sql: sql as string,
+              ...DEFAULT_QUERY_PARAMS,
+            }),
+        }
+      }
+    },
+    {}
+  )
   return hooks
 }
 
-export const usePresetReport = (data: LogsQueryData[], handlers: LogsQueryHandlers[]) => {
+export const usePresetReport = (hooks: PresetHookResult[]) => {
+  const data = hooks.map((h) => h[0])
+  const handlers = hooks.map((h) => h[1])
   const handleRefresh = () => {
     handlers.forEach((handler) => {
       handler.runQuery()
@@ -41,21 +54,23 @@ export const usePresetReport = (data: LogsQueryData[], handlers: LogsQueryHandle
     const newParams = { iso_timestamp_start: from || '', iso_timestamp_end: to || '' }
 
     handlers.forEach((handler) => {
-      handler.setParams((prev) => ({
-        ...prev,
-        ...newParams,
-      }))
+      if (handler.setParams) {
+        handler.setParams((prev) => ({
+          ...prev,
+          ...newParams,
+        }))
+      }
     })
   }
   const isLoading = data.map((datum) => datum.isLoading).some((v) => v)
-  const Layout: React.FC<{title: string}> = ({ title, children }) => (
+  const Layout: React.FC<{ title: string }> = ({ title, children }) => (
     <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
       <h1 className="text-2xl text-scale-1200">{title}</h1>
       <div className="flex flex-row justify-between">
         <DatePickers
           onChange={handleDatepickerChange}
-          to={data[0].params.iso_timestamp_end || ''}
-          from={data[0].params.iso_timestamp_end || ''}
+          to={data[0]?.params?.iso_timestamp_end || ''}
+          from={data[0]?.params?.iso_timestamp_end || ''}
           helpers={REPORTS_DATEPICKER_HELPERS}
         />
         <Button
diff --git a/studio/hooks/analytics/useDbQuery.tsx b/studio/hooks/analytics/useDbQuery.tsx
new file mode 100644
index 00000000000..8bd728de66f
--- /dev/null
+++ b/studio/hooks/analytics/useDbQuery.tsx
@@ -0,0 +1,37 @@
+import { DEFAULT_QUERY_PARAMS } from 'components/interfaces/Reports/Reports.constants'
+import { BaseReportParams, PresetSql } from 'components/interfaces/Reports/Reports.types'
+import { useStore } from 'hooks'
+import useSWR from 'swr'
+import { ResponseError } from 'types'
+
+type QueryResponse = any | { error: ResponseError }
+export interface DbQueryData<T = unknown[]> {
+  data: T
+  params?: never
+  logData?: never
+  isLoading: boolean
+  error: string
+}
+export interface DbQueryHandler {
+  runQuery: () => void
+  setParams?: never
+  changeQuery?: never
+}
+type UseDbQuery<T = unknown[]> = (sql: PresetSql, params?: BaseReportParams) => [DbQueryData<T>, DbQueryHandler]
+const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
+  const { meta } = useStore()
+
+  const resolvedSql = typeof sql === 'function' ? sql(params) : sql
+
+  const {
+    data,
+    error: swrError,
+    isValidating: isLoading,
+    mutate,
+  } = useSWR<QueryResponse>(resolvedSql, meta.query, { revalidateOnFocus: false })
+
+  const error = swrError || data?.error
+  return [{ error, data, isLoading }, { runQuery: () => mutate() }]
+}
+
+export default useDbQuery
diff --git a/studio/pages/project/[ref]/reports/api-bots.tsx b/studio/pages/project/[ref]/reports/api-bots.tsx
index 40f518ae010..5f4198ac55a 100644
--- a/studio/pages/project/[ref]/reports/api-bots.tsx
+++ b/studio/pages/project/[ref]/reports/api-bots.tsx
@@ -14,31 +14,30 @@ export const ApiBotsPage: NextPageWithLayout = () => {
   const { ref } = router.query
   const config = PRESET_CONFIG[Presets.API_BOTS]
   const hooks = hooksFactory(ref as string, config)
-  const [userAgents, userAgentsHandlers] = hooks.userAgents()
-  const [botScores, botScoresHandlers] = hooks.botScores()
+  const userAgents = hooks.userAgents()
+  const botScores = hooks.botScores()
   const { isLoading, Layout } = usePresetReport(
     [userAgents, botScores],
-    [userAgentsHandlers, botScoresHandlers]
   )
   return (
     <Layout title={config.title}>
       <div className="grid  lg:grid-cols-4">
         <ReportWidget
           isLoading={isLoading}
-          params={userAgents.params}
+          params={userAgents[0].params}
           className="col-span-4 col-start-1"
           title="Top User Agents"
           description="The types of user agents using the API and their organization source."
-          data={userAgents.logData}
+          data={userAgents[0].logData}
           renderer={renderUserAgents}
         />
         <ReportWidget
           isLoading={isLoading}
-          params={botScores.params}
+          params={botScores[0].params}
           className="col-span-4 col-start-1"
           title="Bot-like API Requests"
           description="Suspicious bot-like requests, as flagged by Cloudflare"
-          data={botScores.logData}
+          data={botScores[0].logData}
           renderer={renderBotScores}
         />
       </div>
diff --git a/studio/pages/project/[ref]/reports/api-overview.tsx b/studio/pages/project/[ref]/reports/api-overview.tsx
index cd211996a34..7f2881877bb 100644
--- a/studio/pages/project/[ref]/reports/api-overview.tsx
+++ b/studio/pages/project/[ref]/reports/api-overview.tsx
@@ -18,41 +18,38 @@ export const ApiOverviewPage: NextPageWithLayout = () => {
   const { ref } = router.query
   const config = PRESET_CONFIG[Presets.API_OVERVIEW]
   const hooks = hooksFactory(ref as string, config)
-  const [statusCodes, statusCodesHandlers] = hooks.statusCodes()
-  const [errorRate, errorRateHandlers] = hooks.errorRate()
-  const [requestPaths, requestPathsHandlers] = hooks.requestPaths()
-  const { isLoading, Layout } = usePresetReport(
-    [statusCodes, errorRate, requestPaths],
-    [statusCodesHandlers, errorRateHandlers, requestPathsHandlers]
-  )
+  const statusCodes = hooks.statusCodes()
+  const errorRates = hooks.errorRates()
+  const requestPaths = hooks.requestPaths()
+  const { isLoading, Layout } = usePresetReport([statusCodes, errorRates, requestPaths])
   return (
     <Layout title={config.title}>
       <div className="grid  lg:grid-cols-4">
         <ReportWidget
           isLoading={isLoading}
-          params={statusCodes.params}
+          params={statusCodes[0].params}
           className="col-span-4 col-start-1"
           title="API Status Codes"
           description="Distribution of API responses by status codes."
-          data={statusCodes.logData}
+          data={statusCodes[0].logData}
           renderer={renderStatusCodesChart}
         />
         <ReportWidget
           isLoading={isLoading}
-          params={errorRate.params}
+          params={errorRates[0].params}
           className="col-span-4 col-start-1"
           title="Error Rate"
           description="Percentage of API 5XX and 4XX error responses."
-          data={errorRate.logData}
+          data={errorRates[0].logData}
           renderer={renderErrorRateChart}
         />
         <ReportWidget
           isLoading={isLoading}
-          params={requestPaths.params}
+          params={requestPaths[0].params}
           className="col-span-4 col-start-1"
           title="Slow API Requests"
           description="Most frequently used requests, sorted by total querying time"
-          data={requestPaths.logData}
+          data={requestPaths[0].logData}
           renderer={renderRequestsPathsTable}
         />
       </div>
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
index 2a33a8d6837..14b871b51b7 100644
--- a/studio/pages/project/[ref]/reports/auth.tsx
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -17,31 +17,30 @@ export const ApiBotsPage: NextPageWithLayout = () => {
   const { ref } = router.query
   const config = PRESET_CONFIG[Presets.AUTH]
   const hooks = hooksFactory(ref as string, config)
-  const [dailyActiveUsers, dailyActiveUsersHandlers] = hooks.dailyActiveUsers()
-  const [newUsers, newUsersHandlers] = hooks.newUsers()
+  const dailyActiveUsers = hooks.dailyActiveUsers()
+  const newUsers = hooks.newUsers()
   const { isLoading, Layout } = usePresetReport(
     [dailyActiveUsers, newUsers],
-    [dailyActiveUsersHandlers, newUsersHandlers]
   )
   return (
     <Layout title={config.title}>
       <div className="grid  lg:grid-cols-4">
         <ReportWidget
           isLoading={isLoading}
-          params={dailyActiveUsers.params}
+          params={dailyActiveUsers[0].params}
           className="col-span-4 col-start-1"
           title="Daily Active Users"
           description="The daily count of active authenticated users"
-          data={dailyActiveUsers.logData}
+          data={dailyActiveUsers[0].logData}
           renderer={renderDailyActiveUsers}
         />
         <ReportWidget
           isLoading={isLoading}
-          params={newUsers.params}
+          params={newUsers[0].params}
           className="col-span-4 col-start-1"
           title="Daily New Users"
           description="The daily count of new user signups"
-          data={newUsers.logData}
+          data={newUsers[0].logData}
           renderer={renderNewUsers}
         />
       </div>

From 2a7c7871e6fe37dd6260dcd8fa6f1dc4b8227740 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 9 Dec 2022 18:16:08 +0800
Subject: [PATCH 169/215] feat: add cumulative users chart

---
 .../interfaces/Reports/ReportWidget.tsx       |  5 +--
 .../interfaces/Reports/Reports.constants.ts   | 14 ++++++++
 .../interfaces/Reports/Reports.types.ts       | 23 ++++++++++--
 .../interfaces/Reports/Reports.utils.tsx      |  6 ++--
 .../Reports/renderers/AuthRenderers.tsx       | 21 +++++++++++
 studio/hooks/analytics/useDbQuery.tsx         | 36 +++++++++----------
 studio/hooks/analytics/useLogsQuery.tsx       |  1 +
 studio/pages/project/[ref]/reports/auth.tsx   | 24 +++++++++----
 8 files changed, 95 insertions(+), 35 deletions(-)

diff --git a/studio/components/interfaces/Reports/ReportWidget.tsx b/studio/components/interfaces/Reports/ReportWidget.tsx
index 5e66d717734..84d54267af2 100644
--- a/studio/components/interfaces/Reports/ReportWidget.tsx
+++ b/studio/components/interfaces/Reports/ReportWidget.tsx
@@ -2,6 +2,7 @@ import { Button, Dropdown, IconMoreVertical } from 'ui'
 import LoadingOpacity from 'components/ui/LoadingOpacity'
 import Panel from 'components/ui/Panel'
 import { useRouter } from 'next/router'
+import { BaseReportParams } from './Reports.types'
 import { LogsEndpointParams } from '../Settings/Logs'
 
 export interface ReportWidgetProps<T = any> {
@@ -10,7 +11,7 @@ export interface ReportWidgetProps<T = any> {
   description: string
   className?: string
   renderer: (props: ReportWidgetProps) => React.ReactNode
-  params: LogsEndpointParams
+  params: BaseReportParams | LogsEndpointParams
   isLoading: boolean
 }
 
@@ -34,7 +35,7 @@ const ReportWidget: React.FC<ReportWidgetProps> = (props) => {
                     router.push({
                       pathname: `/project/${ref}/logs/explorer`,
                       query: {
-                        q: props.params.sql,
+                        q: props.params?.sql,
                         its: props.params.iso_timestamp_start,
                         ite: props.params.iso_timestamp_end,
                       },
diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 2f99d265a3d..797ee40d311 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -177,6 +177,20 @@ order by
   timestamp
 `,
       },
+      cumulativeUsers: {
+        queryType: 'db',
+        sql: `
+select 
+date_trunc('day', u.created_at) as timestamp,
+count(u.id) as count
+from auth.users as u
+where u.confirmed_at is not null
+group by 
+  timestamp
+order by
+  timestamp desc
+        `,
+      },
       newUsers: {
         queryType: 'logs',
         sql: `
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index f86e32ef143..419303e66af 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -1,13 +1,30 @@
+import { ResponseError } from 'types'
+import { LogsEndpointParams } from '../Settings/Logs'
+import { DEFAULT_QUERY_PARAMS } from './Reports.constants'
+
 export enum Presets {
   API_OVERVIEW = 'overview',
   API_BOTS = 'api_bots',
   AUTH = 'auth',
 }
 
-export interface BaseReportParams {
-  iso_timestamp_start: string
-  iso_timestamp_end: string
+export interface QueryDataBase {
+  isLoading: boolean
+  error: string
 }
+export interface DbQueryData<T = any> extends QueryDataBase {
+  data: T[]
+  params: BaseReportParams
+  logData?: never
+}
+export interface DbQueryHandler {
+  runQuery: () => void
+  setParams?: never
+  changeQuery?: never
+}
+export type MetaQueryResponse = any & { error: ResponseError }
+
+export type BaseReportParams = typeof DEFAULT_QUERY_PARAMS & { sql?: string } & unknown
 
 export type VariableSql = string | ((params: BaseReportParams) => string)
 
diff --git a/studio/components/interfaces/Reports/Reports.utils.tsx b/studio/components/interfaces/Reports/Reports.utils.tsx
index 1f624714b2c..4d07a2686ee 100644
--- a/studio/components/interfaces/Reports/Reports.utils.tsx
+++ b/studio/components/interfaces/Reports/Reports.utils.tsx
@@ -1,12 +1,12 @@
 import { IconRefreshCw } from '@supabase/ui'
-import useDbQuery, { DbQueryData, DbQueryHandler } from 'hooks/analytics/useDbQuery'
+import useDbQuery from 'hooks/analytics/useDbQuery'
 import useLogsQuery, { LogsQueryData, LogsQueryHandlers } from 'hooks/analytics/useLogsQuery'
 import React from 'react'
 import { Button } from 'ui'
 import { DatePickerToFrom } from '../Settings/Logs'
 import DatePickers from '../Settings/Logs/Logs.DatePickers'
 import { DEFAULT_QUERY_PARAMS, REPORTS_DATEPICKER_HELPERS } from './Reports.constants'
-import { PresetConfig } from './Reports.types'
+import { DbQueryData, DbQueryHandler, PresetConfig } from './Reports.types'
 
 /**
  * Converts a query params string to an object
@@ -16,7 +16,7 @@ export const queryParamsToObject = (params: string) => {
 }
 
 // generate hooks based on preset config
-type PresetHookResult = [LogsQueryData, LogsQueryHandlers]
+type PresetHookResult = [LogsQueryData | DbQueryData, LogsQueryHandlers | DbQueryHandler]
 type PresetHooks = Record<keyof PresetConfig['queries'], () => PresetHookResult>
 export const hooksFactory = (projectRef: string, config: PresetConfig) => {
   const hooks: PresetHooks = Object.entries(config.queries).reduce(
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index c6a05709fe9..f719a91f1da 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -1,7 +1,28 @@
 import { BarChart } from 'components/to-be-cleaned/Charts/ChartRenderer'
+import { first } from 'lodash'
 import { DATETIME_FORMAT } from '../Reports.constants'
 import { ReportWidgetProps } from '../ReportWidget'
 
+export const renderCumulativeUsers = (
+  props: ReportWidgetProps<{
+    count: number
+    timestamp: string
+  }>
+) => {
+  const total = props.data?.[0]?.count
+  return (
+    <div className="flex w-full flex-col">
+      <BarChart
+        data={props.data}
+        attribute="count"
+        label="Total users"
+        highlightedValue={total}
+        customDateFormat={DATETIME_FORMAT}
+        noDataMessage={'No confirmed users yet'}
+      />
+    </div>
+  )
+}
 export const renderDailyActiveUsers = (
   props: ReportWidgetProps<{
     count: number
diff --git a/studio/hooks/analytics/useDbQuery.tsx b/studio/hooks/analytics/useDbQuery.tsx
index 8bd728de66f..979f30a1e5d 100644
--- a/studio/hooks/analytics/useDbQuery.tsx
+++ b/studio/hooks/analytics/useDbQuery.tsx
@@ -1,37 +1,33 @@
 import { DEFAULT_QUERY_PARAMS } from 'components/interfaces/Reports/Reports.constants'
-import { BaseReportParams, PresetSql } from 'components/interfaces/Reports/Reports.types'
+import {
+  BaseReportParams,
+  DbQueryData,
+  DbQueryHandler,
+  MetaQueryResponse,
+  PresetSql,
+} from 'components/interfaces/Reports/Reports.types'
 import { useStore } from 'hooks'
 import useSWR from 'swr'
-import { ResponseError } from 'types'
 
-type QueryResponse = any | { error: ResponseError }
-export interface DbQueryData<T = unknown[]> {
-  data: T
-  params?: never
-  logData?: never
-  isLoading: boolean
-  error: string
-}
-export interface DbQueryHandler {
-  runQuery: () => void
-  setParams?: never
-  changeQuery?: never
-}
-type UseDbQuery<T = unknown[]> = (sql: PresetSql, params?: BaseReportParams) => [DbQueryData<T>, DbQueryHandler]
+type UseDbQuery = (sql: PresetSql, params?: BaseReportParams) => [DbQueryData, DbQueryHandler]
 const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
   const { meta } = useStore()
 
   const resolvedSql = typeof sql === 'function' ? sql(params) : sql
-
+  console.log('useDbQuery', 'sql', resolvedSql)
   const {
     data,
     error: swrError,
     isValidating: isLoading,
     mutate,
-  } = useSWR<QueryResponse>(resolvedSql, meta.query, { revalidateOnFocus: false })
+  } = useSWR<MetaQueryResponse>(resolvedSql, async () => await meta.query(resolvedSql), {
+    revalidateOnFocus: false,
+  })
+  console.log('useDbQuery', 'data', data)
+  console.log('useDbQuery', 'isLoading', isLoading)
 
-  const error = swrError || data?.error
-  return [{ error, data, isLoading }, { runQuery: () => mutate() }]
+  const error = swrError || (typeof data === 'object' ? data?.error : '')
+  return [{ error, data, isLoading, params }, { runQuery: () => mutate() }]
 }
 
 export default useDbQuery
diff --git a/studio/hooks/analytics/useLogsQuery.tsx b/studio/hooks/analytics/useLogsQuery.tsx
index 48721a081ae..be58c480c58 100644
--- a/studio/hooks/analytics/useLogsQuery.tsx
+++ b/studio/hooks/analytics/useLogsQuery.tsx
@@ -12,6 +12,7 @@ export interface LogsQueryData {
   params: LogsEndpointParams
   isLoading: boolean
   logData: LogData[]
+  data?: never
   error: string | Object | null
 }
 export interface LogsQueryHandlers {
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
index 14b871b51b7..1d1557f2444 100644
--- a/studio/pages/project/[ref]/reports/auth.tsx
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -10,6 +10,7 @@ import ReportWidget from 'components/interfaces/Reports/ReportWidget'
 import {
   renderDailyActiveUsers,
   renderNewUsers,
+  renderCumulativeUsers,
 } from 'components/interfaces/Reports/renderers/AuthRenderers'
 
 export const ApiBotsPage: NextPageWithLayout = () => {
@@ -19,19 +20,28 @@ export const ApiBotsPage: NextPageWithLayout = () => {
   const hooks = hooksFactory(ref as string, config)
   const dailyActiveUsers = hooks.dailyActiveUsers()
   const newUsers = hooks.newUsers()
-  const { isLoading, Layout } = usePresetReport(
-    [dailyActiveUsers, newUsers],
-  )
+  const cumulativeUsers = hooks.cumulativeUsers()
+
+  const { isLoading, Layout } = usePresetReport([dailyActiveUsers, newUsers, cumulativeUsers])
   return (
     <Layout title={config.title}>
-      <div className="grid  lg:grid-cols-4">
+      <div className="grid  lg:grid-cols-4 gap-4">
+        <ReportWidget
+          isLoading={isLoading}
+          params={cumulativeUsers[0].params}
+          className="col-span-2 col-start-1"
+          title="Users Over Time"
+          description="Daily count of confirmed users"
+          data={cumulativeUsers[0].data!}
+          renderer={renderCumulativeUsers}
+        />
         <ReportWidget
           isLoading={isLoading}
           params={dailyActiveUsers[0].params}
-          className="col-span-4 col-start-1"
+          className="col-span-2 col-start-3"
           title="Daily Active Users"
           description="The daily count of active authenticated users"
-          data={dailyActiveUsers[0].logData}
+          data={dailyActiveUsers[0].logData!}
           renderer={renderDailyActiveUsers}
         />
         <ReportWidget
@@ -40,7 +50,7 @@ export const ApiBotsPage: NextPageWithLayout = () => {
           className="col-span-4 col-start-1"
           title="Daily New Users"
           description="The daily count of new user signups"
-          data={newUsers[0].logData}
+          data={newUsers[0].logData!}
           renderer={renderNewUsers}
         />
       </div>

From dc43b8cbab01463e66834d2f72315d44fd4ac010 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 12 Dec 2022 18:56:05 +0800
Subject: [PATCH 170/215] feat: updated auth queries with db data, updated
 typing, updated auth layout

---
 studio/__mocks__/hooks.js                     |  2 +
 studio/__mocks__/lib/common/fetch.js          |  1 +
 .../interfaces/Reports/Reports.constants.ts   | 30 +++----
 .../Reports/renderers/AuthRenderers.tsx       | 65 +++++++-------
 studio/hooks/analytics/useDbQuery.tsx         |  3 -
 .../pages/project/[ref]/reports/api-bots.tsx  | 10 +--
 .../project/[ref]/reports/api-overview.tsx    | 12 +--
 studio/pages/project/[ref]/reports/auth.tsx   | 28 +++----
 .../components/Reports/PresetReport.test.js   | 84 -------------------
 .../projects/reports/product-reports.test.js  | 55 ++++++++++++
 10 files changed, 126 insertions(+), 164 deletions(-)
 delete mode 100644 studio/tests/components/Reports/PresetReport.test.js
 create mode 100644 studio/tests/pages/projects/reports/product-reports.test.js

diff --git a/studio/__mocks__/hooks.js b/studio/__mocks__/hooks.js
index bfacf3748e5..e6d89720b13 100644
--- a/studio/__mocks__/hooks.js
+++ b/studio/__mocks__/hooks.js
@@ -16,3 +16,5 @@ window.matchMedia = jest.fn().mockReturnValue({
   removeEventListener: jest.fn(),
 })
 export const StoreProvider = StoreProvider
+
+export const withAuth = jest.fn()
\ No newline at end of file
diff --git a/studio/__mocks__/lib/common/fetch.js b/studio/__mocks__/lib/common/fetch.js
index b957643e53b..ab231111a61 100644
--- a/studio/__mocks__/lib/common/fetch.js
+++ b/studio/__mocks__/lib/common/fetch.js
@@ -1 +1,2 @@
 export const get = jest.fn()
+export const post = jest.fn()
diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 797ee40d311..59ef87fd261 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -180,6 +180,18 @@ order by
       cumulativeUsers: {
         queryType: 'db',
         sql: `
+        
+select 
+  date_trunc('day', u.created_at) as timestamp, 
+  sum(count(u.id)) over (order by date_trunc('day', u.created_at)) as count
+from auth.users as u
+group by timestamp
+order by timestamp desc
+        `,
+      },
+      newUsers: {
+        queryType: 'db',
+        sql: `
 select 
 date_trunc('day', u.created_at) as timestamp,
 count(u.id) as count
@@ -189,24 +201,6 @@ group by
   timestamp
 order by
   timestamp desc
-        `,
-      },
-      newUsers: {
-        queryType: 'logs',
-        sql: `
-select 
-  TIMESTAMP_TRUNC(f.timestamp, DAY) as timestamp,
-  count(id) as count
-from 
-gotrue_logs f
-  cross join unnest(f.metadata) as m
-where  f.timestamp > "2022-11-20" 
-and m.project = "tzljvicuuxegpzwuwife"
-and JSON_VALUE(f.event_message, "$.path") = "/signup"
-and JSON_VALUE(f.event_message, "$.auth_event.actor_id") is not null
-and JSON_VALUE(f.event_message, "$.auth_event.action") != "user_repeated_signup"
-group by 
-  timestamp
 `,
       },
     },
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index f719a91f1da..f85ddabeece 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -1,5 +1,4 @@
 import { BarChart } from 'components/to-be-cleaned/Charts/ChartRenderer'
-import { first } from 'lodash'
 import { DATETIME_FORMAT } from '../Reports.constants'
 import { ReportWidgetProps } from '../ReportWidget'
 
@@ -23,27 +22,6 @@ export const renderCumulativeUsers = (
     </div>
   )
 }
-export const renderDailyActiveUsers = (
-  props: ReportWidgetProps<{
-    count: number
-    timestamp: string
-  }>
-) => {
-  return (
-    <>
-      <div className="flex w-full flex-col">
-        <BarChart
-          data={props.data}
-          attribute="count"
-          label=""
-          minimalHeader
-          customDateFormat={DATETIME_FORMAT}
-          noDataMessage={'No authenticated users during this time period'}
-        />
-      </div>
-    </>
-  )
-}
 
 export const renderNewUsers = (
   props: ReportWidgetProps<{
@@ -51,18 +29,37 @@ export const renderNewUsers = (
     timestamp: string
   }>
 ) => {
+  const sum = (props.data || []).reduce((acc, datum) => datum.count + acc, 0)
   return (
-    <>
-      <div className="flex w-full flex-col">
-        <BarChart
-          data={props.data}
-          attribute="count"
-          label=""
-          minimalHeader
-          customDateFormat={DATETIME_FORMAT}
-          noDataMessage={'No new user signups during this time period'}
-        />
-      </div>
-    </>
+    <div className="flex w-full flex-col">
+      <BarChart
+        data={props.data}
+        attribute="count"
+        label="New users"
+        highlightedValue={sum}
+        customDateFormat={DATETIME_FORMAT}
+        noDataMessage={'No new user signups during this time period'}
+      />
+    </div>
+  )
+}
+
+export const renderDailyActiveUsers = (
+  props: ReportWidgetProps<{
+    count: number
+    timestamp: string
+  }>
+) => {
+  return (
+    <div className="flex w-full flex-col">
+      <BarChart
+        data={props.data}
+        attribute="count"
+        label=""
+        minimalHeader
+        customDateFormat={DATETIME_FORMAT}
+        noDataMessage={'No authenticated users during this time period'}
+      />
+    </div>
   )
 }
diff --git a/studio/hooks/analytics/useDbQuery.tsx b/studio/hooks/analytics/useDbQuery.tsx
index 979f30a1e5d..9dbbf902440 100644
--- a/studio/hooks/analytics/useDbQuery.tsx
+++ b/studio/hooks/analytics/useDbQuery.tsx
@@ -14,7 +14,6 @@ const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
   const { meta } = useStore()
 
   const resolvedSql = typeof sql === 'function' ? sql(params) : sql
-  console.log('useDbQuery', 'sql', resolvedSql)
   const {
     data,
     error: swrError,
@@ -23,8 +22,6 @@ const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
   } = useSWR<MetaQueryResponse>(resolvedSql, async () => await meta.query(resolvedSql), {
     revalidateOnFocus: false,
   })
-  console.log('useDbQuery', 'data', data)
-  console.log('useDbQuery', 'isLoading', isLoading)
 
   const error = swrError || (typeof data === 'object' ? data?.error : '')
   return [{ error, data, isLoading, params }, { runQuery: () => mutate() }]
diff --git a/studio/pages/project/[ref]/reports/api-bots.tsx b/studio/pages/project/[ref]/reports/api-bots.tsx
index 5f4198ac55a..5da674c7a09 100644
--- a/studio/pages/project/[ref]/reports/api-bots.tsx
+++ b/studio/pages/project/[ref]/reports/api-bots.tsx
@@ -9,7 +9,7 @@ import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
 import { renderBotScores, renderUserAgents } from 'components/interfaces/Reports/renderers/ApiBotsRenderers'
 import ReportWidget from 'components/interfaces/Reports/ReportWidget'
 
-export const ApiBotsPage: NextPageWithLayout = () => {
+export const ApiBotsReport: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query
   const config = PRESET_CONFIG[Presets.API_BOTS]
@@ -28,7 +28,7 @@ export const ApiBotsPage: NextPageWithLayout = () => {
           className="col-span-4 col-start-1"
           title="Top User Agents"
           description="The types of user agents using the API and their organization source."
-          data={userAgents[0].logData}
+          data={userAgents[0].logData || []}
           renderer={renderUserAgents}
         />
         <ReportWidget
@@ -37,7 +37,7 @@ export const ApiBotsPage: NextPageWithLayout = () => {
           className="col-span-4 col-start-1"
           title="Bot-like API Requests"
           description="Suspicious bot-like requests, as flagged by Cloudflare"
-          data={botScores[0].logData}
+          data={botScores[0].logData || []}
           renderer={renderBotScores}
         />
       </div>
@@ -45,6 +45,6 @@ export const ApiBotsPage: NextPageWithLayout = () => {
   )
 }
 
-ApiBotsPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+ApiBotsReport.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
 
-export default observer(ApiBotsPage)
+export default observer(ApiBotsReport)
diff --git a/studio/pages/project/[ref]/reports/api-overview.tsx b/studio/pages/project/[ref]/reports/api-overview.tsx
index 7f2881877bb..ad9c4d2ecdc 100644
--- a/studio/pages/project/[ref]/reports/api-overview.tsx
+++ b/studio/pages/project/[ref]/reports/api-overview.tsx
@@ -13,7 +13,7 @@ import {
   renderStatusCodesChart,
 } from 'components/interfaces/Reports/renderers/OverviewRenderers'
 
-export const ApiOverviewPage: NextPageWithLayout = () => {
+export const ApiOverviewReport: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query
   const config = PRESET_CONFIG[Presets.API_OVERVIEW]
@@ -31,7 +31,7 @@ export const ApiOverviewPage: NextPageWithLayout = () => {
           className="col-span-4 col-start-1"
           title="API Status Codes"
           description="Distribution of API responses by status codes."
-          data={statusCodes[0].logData}
+          data={statusCodes[0].logData  || []}
           renderer={renderStatusCodesChart}
         />
         <ReportWidget
@@ -40,7 +40,7 @@ export const ApiOverviewPage: NextPageWithLayout = () => {
           className="col-span-4 col-start-1"
           title="Error Rate"
           description="Percentage of API 5XX and 4XX error responses."
-          data={errorRates[0].logData}
+          data={errorRates[0].logData  || []}
           renderer={renderErrorRateChart}
         />
         <ReportWidget
@@ -49,7 +49,7 @@ export const ApiOverviewPage: NextPageWithLayout = () => {
           className="col-span-4 col-start-1"
           title="Slow API Requests"
           description="Most frequently used requests, sorted by total querying time"
-          data={requestPaths[0].logData}
+          data={requestPaths[0].logData || []}
           renderer={renderRequestsPathsTable}
         />
       </div>
@@ -57,6 +57,6 @@ export const ApiOverviewPage: NextPageWithLayout = () => {
   )
 }
 
-ApiOverviewPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+ApiOverviewReport.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
 
-export default observer(ApiOverviewPage)
+export default observer(ApiOverviewReport)
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
index 1d1557f2444..5e6c6781a79 100644
--- a/studio/pages/project/[ref]/reports/auth.tsx
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -13,7 +13,7 @@ import {
   renderCumulativeUsers,
 } from 'components/interfaces/Reports/renderers/AuthRenderers'
 
-export const ApiBotsPage: NextPageWithLayout = () => {
+export const AuthReport: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query
   const config = PRESET_CONFIG[Presets.AUTH]
@@ -31,33 +31,33 @@ export const ApiBotsPage: NextPageWithLayout = () => {
           params={cumulativeUsers[0].params}
           className="col-span-2 col-start-1"
           title="Users Over Time"
-          description="Daily count of confirmed users"
+          description="Cumulative count of confirmed users"
           data={cumulativeUsers[0].data!}
           renderer={renderCumulativeUsers}
         />
         <ReportWidget
           isLoading={isLoading}
-          params={dailyActiveUsers[0].params}
+          params={newUsers[0].params}
           className="col-span-2 col-start-3"
+          title="Daily New Users"
+          description="The daily count of new user signups"
+          data={newUsers[0].data!}
+          renderer={renderNewUsers}
+        />
+        <ReportWidget
+          isLoading={isLoading}
+          params={dailyActiveUsers[0].params}
+          className="col-span-4 col-start-1"
           title="Daily Active Users"
           description="The daily count of active authenticated users"
           data={dailyActiveUsers[0].logData!}
           renderer={renderDailyActiveUsers}
         />
-        <ReportWidget
-          isLoading={isLoading}
-          params={newUsers[0].params}
-          className="col-span-4 col-start-1"
-          title="Daily New Users"
-          description="The daily count of new user signups"
-          data={newUsers[0].logData!}
-          renderer={renderNewUsers}
-        />
       </div>
     </Layout>
   )
 }
 
-ApiBotsPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+AuthReport.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
 
-export default observer(ApiBotsPage)
+export default observer(AuthReport)
diff --git a/studio/tests/components/Reports/PresetReport.test.js b/studio/tests/components/Reports/PresetReport.test.js
deleted file mode 100644
index 7813c376821..00000000000
--- a/studio/tests/components/Reports/PresetReport.test.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
-
-dayjs.extend(utc)
-
-// mock the fetch function
-jest.mock('lib/common/fetch')
-import { get } from 'lib/common/fetch'
-
-// mock mobx
-jest.mock('mobx-react-lite')
-import { observer } from 'mobx-react-lite'
-observer.mockImplementation((v) => v)
-
-// mock the router
-jest.mock('next/router')
-import { useRouter } from 'next/router'
-const defaultRouterMock = () => {
-  const router = jest.fn()
-  router.query = {}
-  router.push = jest.fn()
-  router.pathname = 'logs/path'
-  return router
-}
-useRouter.mockReturnValue(defaultRouterMock())
-// mock usage flags
-jest.mock('components/ui/Flag/Flag')
-import Flag from 'components/ui/Flag/Flag'
-Flag.mockImplementation(({ children }) => <>{children}</>)
-jest.mock('hooks')
-import { useFlag } from 'hooks'
-useFlag.mockReturnValue(true)
-
-import { SWRConfig } from 'swr'
-jest.mock('components/interfaces/Reports/PresetReport')
-import PresetReport from 'components/interfaces/Reports/PresetReport'
-PresetReport.mockImplementation((props) => {
-  const Comp = jest.requireActual('components/interfaces/Reports/PresetReport').default
-  // wrap with SWR to reset the cache each time
-  return (
-    <SWRConfig
-      value={{
-        provider: () => new Map(),
-        shouldRetryOnError: false,
-      }}
-    >
-      <Comp {...props} />
-    </SWRConfig>
-  )
-})
-
-jest.mock('hooks')
-import { useProjectSubscription } from 'hooks'
-useProjectSubscription = jest.fn((ref) => ({
-  subscription: {
-    tier: {
-      supabase_prod_id: 'tier_free',
-    },
-  },
-}))
-
-import { render, fireEvent, waitFor, screen, act } from '@testing-library/react'
-import { Presets } from 'components/interfaces/Reports/Reports.types'
-beforeEach(() => {
-  // reset mocks between tests
-  get.mockReset()
-  useRouter.mockReset()
-  useRouter.mockReturnValue(defaultRouterMock())
-})
-
-test('static elements', async () => {
-  render(<PresetReport preset={Presets.OVERVIEW} />)
-  await screen.findByText(/Last 7 days/)
-  await screen.findAllByText(/Refresh/)
-})
-
-test('changing date range triggers query refresh', async () => {
-  render(<PresetReport preset={Presets.OVERVIEW} />)
-  await waitFor(() => expect(get).toBeCalled())
-  get.mockReset()
-  const refresh = await screen.findByText(/Refresh/)
-  fireEvent.click(refresh)
-  await waitFor(() => expect(get).toBeCalled())
-})
diff --git a/studio/tests/pages/projects/reports/product-reports.test.js b/studio/tests/pages/projects/reports/product-reports.test.js
new file mode 100644
index 00000000000..a30e33c1aea
--- /dev/null
+++ b/studio/tests/pages/projects/reports/product-reports.test.js
@@ -0,0 +1,55 @@
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)
+
+import { get, post } from 'lib/common/fetch'
+
+import { useRouter } from 'next/router'
+import { render } from '../../../helpers'
+import { fireEvent, waitFor, screen } from '@testing-library/react'
+import { ApiOverviewReport } from 'pages/project/[ref]/reports/api-overview'
+import { ApiBotsReport } from 'pages/project/[ref]/reports/api-bots'
+import { AuthReport } from 'pages/project/[ref]/reports/auth'
+
+beforeEach(() => {
+  // reset mocks between tests
+  get.mockReset()
+  useRouter.mockReset()
+  useRouter.mockReturnValue({
+    query: { ref: '123' },
+  })
+  get.mockImplementation(async (url) => {
+    return [{ data: [] }]
+  })
+  post.mockResolvedValue([])
+})
+
+describe.each([
+  { Page: ApiOverviewReport, contains: ['API Overview'] },
+  { Page: ApiBotsReport, contains: ['API Bots'] },
+  { Page: AuthReport, contains: ['Auth'] },
+])('$Page rendering', ({ Page, contains }) => {
+  test(`contains ${contains}`, async () => {
+    render(<Page />)
+
+    contains.forEach((word) => {
+      expect(screen.findByText(word)).resolves.toBeTruthy()
+    })
+  })
+  test('static elements', async () => {
+    render(<Page />)
+    await screen.findByText(/Last 7 days/)
+    await screen.findAllByText(/Refresh/)
+  })
+
+  test('changing date range triggers query refresh', async () => {
+    render(<Page />)
+    await waitFor(() => expect(get).toBeCalled())
+    get.mockReset()
+    const refresh = await screen.findByText(/Refresh/)
+    fireEvent.click(refresh)
+
+    const calls = get.mock.calls.concat(post.mock.calls)
+    expect(calls.length).toBeGreaterThan(0)
+  })
+})

From 2c7890e4f2bde2b69c9c68179571bfe46942172c Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 12 Dec 2022 19:02:08 +0800
Subject: [PATCH 171/215] fix: update querying revalidation to reduce mutliple
 querying

---
 studio/hooks/analytics/useDbQuery.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/studio/hooks/analytics/useDbQuery.tsx b/studio/hooks/analytics/useDbQuery.tsx
index 9dbbf902440..45d9236d4f9 100644
--- a/studio/hooks/analytics/useDbQuery.tsx
+++ b/studio/hooks/analytics/useDbQuery.tsx
@@ -21,6 +21,9 @@ const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
     mutate,
   } = useSWR<MetaQueryResponse>(resolvedSql, async () => await meta.query(resolvedSql), {
     revalidateOnFocus: false,
+    revalidateIfStale: false,
+    revalidateOnReconnect: false,
+    dedupingInterval: 2000,
   })
 
   const error = swrError || (typeof data === 'object' ? data?.error : '')

From 233f023698b93177cd063ecd1e90ad2c034fbcb9 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 12 Dec 2022 20:54:42 +0800
Subject: [PATCH 172/215] feat: fixed auth daily active users query

---
 studio/components/interfaces/Reports/ReportWidget.tsx |  2 +-
 .../interfaces/Reports/Reports.constants.ts           |  9 ++++-----
 .../interfaces/Reports/renderers/AuthRenderers.tsx    |  7 +++++--
 studio/pages/project/[ref]/reports/api-bots.tsx       | 11 ++++++-----
 studio/pages/project/[ref]/reports/api-overview.tsx   |  2 +-
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/studio/components/interfaces/Reports/ReportWidget.tsx b/studio/components/interfaces/Reports/ReportWidget.tsx
index 84d54267af2..09e03029f59 100644
--- a/studio/components/interfaces/Reports/ReportWidget.tsx
+++ b/studio/components/interfaces/Reports/ReportWidget.tsx
@@ -19,7 +19,7 @@ const ReportWidget: React.FC<ReportWidgetProps> = (props) => {
   const router = useRouter()
   const { ref } = router.query
   return (
-    <Panel className={'pb-0 ' + props.className} bodyClassName="h-full" wrapWithLoading={false}>
+    <Panel noMargin className={'pb-0 ' + props.className} bodyClassName="h-full" wrapWithLoading={false}>
       <Panel.Content className="space-y-4">
         <div className="flex flex-row items-start justify-between">
           <div className="gap-2">
diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 59ef87fd261..f4811451e16 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -167,14 +167,13 @@ export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
         sql: `
 select 
   timestamp_trunc(timestamp, day) as timestamp,
-  count(distinct json_extract(f.event_message, "$.user_id")) as count
-from gotrue_logs f
-cross join unnest(f.metadata) as m
-where json_extract(f.event_message, "$.user_id") is not null
+  count(distinct json_value(f.event_message, "$.user_id")) as count
+from auth_logs f
+where json_value(f.event_message, "$.action") = "login"
 group by 
   timestamp
 order by
-  timestamp
+  timestamp desc
 `,
       },
       cumulativeUsers: {
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index f85ddabeece..7fe04969540 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -14,7 +14,7 @@ export const renderCumulativeUsers = (
       <BarChart
         data={props.data}
         attribute="count"
-        label="Total users"
+        label=""
         highlightedValue={total}
         customDateFormat={DATETIME_FORMAT}
         noDataMessage={'No confirmed users yet'}
@@ -35,7 +35,7 @@ export const renderNewUsers = (
       <BarChart
         data={props.data}
         attribute="count"
-        label="New users"
+        label=""
         highlightedValue={sum}
         customDateFormat={DATETIME_FORMAT}
         noDataMessage={'No new user signups during this time period'}
@@ -50,6 +50,8 @@ export const renderDailyActiveUsers = (
     timestamp: string
   }>
 ) => {
+  const last = props.data?.[props.data.length - 1]?.count
+
   return (
     <div className="flex w-full flex-col">
       <BarChart
@@ -57,6 +59,7 @@ export const renderDailyActiveUsers = (
         attribute="count"
         label=""
         minimalHeader
+        highlightedValue={last}
         customDateFormat={DATETIME_FORMAT}
         noDataMessage={'No authenticated users during this time period'}
       />
diff --git a/studio/pages/project/[ref]/reports/api-bots.tsx b/studio/pages/project/[ref]/reports/api-bots.tsx
index 5da674c7a09..3df85b74abf 100644
--- a/studio/pages/project/[ref]/reports/api-bots.tsx
+++ b/studio/pages/project/[ref]/reports/api-bots.tsx
@@ -6,7 +6,10 @@ import { Presets } from 'components/interfaces/Reports/Reports.types'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
 import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
-import { renderBotScores, renderUserAgents } from 'components/interfaces/Reports/renderers/ApiBotsRenderers'
+import {
+  renderBotScores,
+  renderUserAgents,
+} from 'components/interfaces/Reports/renderers/ApiBotsRenderers'
 import ReportWidget from 'components/interfaces/Reports/ReportWidget'
 
 export const ApiBotsReport: NextPageWithLayout = () => {
@@ -16,12 +19,10 @@ export const ApiBotsReport: NextPageWithLayout = () => {
   const hooks = hooksFactory(ref as string, config)
   const userAgents = hooks.userAgents()
   const botScores = hooks.botScores()
-  const { isLoading, Layout } = usePresetReport(
-    [userAgents, botScores],
-  )
+  const { isLoading, Layout } = usePresetReport([userAgents, botScores])
   return (
     <Layout title={config.title}>
-      <div className="grid  lg:grid-cols-4">
+      <div className="grid lg:grid-cols-4 gap-4">
         <ReportWidget
           isLoading={isLoading}
           params={userAgents[0].params}
diff --git a/studio/pages/project/[ref]/reports/api-overview.tsx b/studio/pages/project/[ref]/reports/api-overview.tsx
index ad9c4d2ecdc..2d266dabeaf 100644
--- a/studio/pages/project/[ref]/reports/api-overview.tsx
+++ b/studio/pages/project/[ref]/reports/api-overview.tsx
@@ -24,7 +24,7 @@ export const ApiOverviewReport: NextPageWithLayout = () => {
   const { isLoading, Layout } = usePresetReport([statusCodes, errorRates, requestPaths])
   return (
     <Layout title={config.title}>
-      <div className="grid  lg:grid-cols-4">
+      <div className="grid lg:grid-cols-4 gap-4">
         <ReportWidget
           isLoading={isLoading}
           params={statusCodes[0].params}

From 48f3f9fb120bd89b2b95ccf751a52fae998ec03f Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 12 Dec 2022 20:56:54 +0800
Subject: [PATCH 173/215] fix: add no user agent text

---
 .../interfaces/Reports/renderers/ApiBotsRenderers.tsx     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx b/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
index 22f47142c32..9c92a616dad 100644
--- a/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
@@ -25,7 +25,11 @@ export const renderUserAgents = (
             return (
               <Table.tr key={index}>
                 <Table.td className="max-w-sm lg:max-w-lg" style={{ padding: '0.3rem' }}>
-                  {row.user_agent}
+                  {row.user_agent ? (
+                    row.user_agent
+                  ) : (
+                    <span className="text-scale-1000">No user agent</span>
+                  )}
                 </Table.td>
                 <Table.td>{row.request_source}</Table.td>
                 <Table.td style={{ padding: '0.5rem' }} className="align-top text-xs">
@@ -87,4 +91,4 @@ export const renderBotScores = (
       }
     />
   )
-}
\ No newline at end of file
+}

From 608bb492240ba95b05a520182591151d410d51e3 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 12 Dec 2022 21:55:54 +0800
Subject: [PATCH 174/215] feat: add failed migration counts widget for auth
 report

---
 .../interfaces/Reports/ReportWidget.tsx       | 37 +++++++++++++++++--
 .../interfaces/Reports/Reports.constants.ts   | 10 +++++
 .../interfaces/Reports/Statistic.tsx          | 36 ++++++++++++++++++
 .../Reports/renderers/AuthRenderers.tsx       | 14 ++++++-
 studio/pages/project/[ref]/reports/auth.tsx   | 19 ++++++++--
 5 files changed, 107 insertions(+), 9 deletions(-)
 create mode 100644 studio/components/interfaces/Reports/Statistic.tsx

diff --git a/studio/components/interfaces/Reports/ReportWidget.tsx b/studio/components/interfaces/Reports/ReportWidget.tsx
index 09e03029f59..2594c10c646 100644
--- a/studio/components/interfaces/Reports/ReportWidget.tsx
+++ b/studio/components/interfaces/Reports/ReportWidget.tsx
@@ -4,11 +4,14 @@ import Panel from 'components/ui/Panel'
 import { useRouter } from 'next/router'
 import { BaseReportParams } from './Reports.types'
 import { LogsEndpointParams } from '../Settings/Logs'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { IconHelpCircle } from '@supabase/ui'
 
 export interface ReportWidgetProps<T = any> {
   data: T[]
   title: string
-  description: string
+  description?: string
+  tooltip?: string
   className?: string
   renderer: (props: ReportWidgetProps) => React.ReactNode
   params: BaseReportParams | LogsEndpointParams
@@ -19,11 +22,37 @@ const ReportWidget: React.FC<ReportWidgetProps> = (props) => {
   const router = useRouter()
   const { ref } = router.query
   return (
-    <Panel noMargin className={'pb-0 ' + props.className} bodyClassName="h-full" wrapWithLoading={false}>
+    <Panel
+      noMargin
+      className={'pb-0 ' + props.className}
+      bodyClassName="h-full"
+      wrapWithLoading={false}
+    >
       <Panel.Content className="space-y-4">
         <div className="flex flex-row items-start justify-between">
           <div className="gap-2">
-            <h3>{props.title}</h3>
+            <div className="flex flex-row gap-2">
+
+            <h3 className="w-full h-6">{props.title}</h3>{' '}
+            {props?.tooltip && (
+              <Tooltip.Root delayDuration={0}>
+                <Tooltip.Trigger>
+                  <IconHelpCircle className="text-scale-900" size="tiny" />
+                </Tooltip.Trigger>
+                <Tooltip.Content side="top">
+                  <Tooltip.Arrow className="radix-tooltip-arrow" />
+                  <div
+                    className={[
+                      'rounded bg-scale-100 py-1 px-2 max-w-xs leading-none shadow',
+                      'border border-scale-200',
+                    ].join(' ')}
+                  >
+                    <span className="text-xs text-scale-1200">{props.tooltip}</span>
+                  </div>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
+            </div>
             <p className="text-sm text-scale-1100">{props.description}</p>
           </div>
           <Dropdown
@@ -52,7 +81,7 @@ const ReportWidget: React.FC<ReportWidgetProps> = (props) => {
               title="Actions..."
               as="span"
               type="text"
-              icon={<IconMoreVertical className="text-scale-1100" size="small" />}
+              icon={<IconMoreVertical className="text-scale-1000" size="tiny" />}
             ></Button>
           </Dropdown>
         </div>
diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index f4811451e16..bf67eb7c019 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -162,6 +162,16 @@ export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
   [Presets.AUTH]: {
     title: 'Auth',
     queries: {
+      failedMigrations: {
+        queryType: "logs",
+        sql: `
+select count(f.id)
+from auth_logs
+where json_value(f.event_message, "$.level") = "fatal"
+  and regexp_contains(f.event_message, "error executing migrations") 
+limit 1
+`
+      },
       dailyActiveUsers: {
         queryType: 'logs',
         sql: `
diff --git a/studio/components/interfaces/Reports/Statistic.tsx b/studio/components/interfaces/Reports/Statistic.tsx
new file mode 100644
index 00000000000..9f21c6feefc
--- /dev/null
+++ b/studio/components/interfaces/Reports/Statistic.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+interface Props {
+  value: string | number
+  startingValue?: string | number
+  prefix?: string
+  suffix?: string
+  valueFormatter?: (value: Props['value']) => string
+}
+
+const Statistic: React.FC<Props> = ({ prefix, suffix, value, startingValue }) => {
+  const isNumber = typeof value === 'number' && !Number.isNaN(value)
+  const percentageChange =
+    startingValue && isNumber ? Number(startingValue) / Number(value) - 1 : null
+  return (
+    <div className="w-full">
+      <div className="flex flex-row justify-center">
+        <span>{prefix}</span>
+        <span className="text-3xl text-scale-1200">{value}</span>
+        <span>{suffix}</span>
+      </div>
+      {startingValue && (
+        <div>
+          {isNumber && percentageChange !== null && (
+            <span>
+              {Number(percentageChange * 100).toFixed(1)}
+              {percentageChange > 0 ? 'increase' : 'decrease'}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Statistic
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index 7fe04969540..282e4e09bd6 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -1,7 +1,17 @@
 import { BarChart } from 'components/to-be-cleaned/Charts/ChartRenderer'
 import { DATETIME_FORMAT } from '../Reports.constants'
 import { ReportWidgetProps } from '../ReportWidget'
-
+import Statistic from '../Statistic'
+export const renderFailedMigrations = (
+  props: ReportWidgetProps<{
+    timestamp: string
+    count: number
+  }>
+) => {
+  console.log(props.data)
+  const count = props.data.length === 0 ? 0: props?.data?.[0]?.count
+  return <Statistic value={count} />
+}
 export const renderCumulativeUsers = (
   props: ReportWidgetProps<{
     count: number
@@ -15,6 +25,7 @@ export const renderCumulativeUsers = (
         data={props.data}
         attribute="count"
         label=""
+        minimalHeader
         highlightedValue={total}
         customDateFormat={DATETIME_FORMAT}
         noDataMessage={'No confirmed users yet'}
@@ -36,6 +47,7 @@ export const renderNewUsers = (
         data={props.data}
         attribute="count"
         label=""
+        minimalHeader
         highlightedValue={sum}
         customDateFormat={DATETIME_FORMAT}
         noDataMessage={'No new user signups during this time period'}
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
index 5e6c6781a79..42e22d60ade 100644
--- a/studio/pages/project/[ref]/reports/auth.tsx
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -11,6 +11,7 @@ import {
   renderDailyActiveUsers,
   renderNewUsers,
   renderCumulativeUsers,
+  renderFailedMigrations,
 } from 'components/interfaces/Reports/renderers/AuthRenderers'
 
 export const AuthReport: NextPageWithLayout = () => {
@@ -21,15 +22,25 @@ export const AuthReport: NextPageWithLayout = () => {
   const dailyActiveUsers = hooks.dailyActiveUsers()
   const newUsers = hooks.newUsers()
   const cumulativeUsers = hooks.cumulativeUsers()
+  const failedMigrations = hooks.failedMigrations()
 
   const { isLoading, Layout } = usePresetReport([dailyActiveUsers, newUsers, cumulativeUsers])
   return (
     <Layout title={config.title}>
-      <div className="grid  lg:grid-cols-4 gap-4">
+      <div className="grid  lg:grid-cols-6 gap-4">
+        <ReportWidget
+          isLoading={isLoading}
+          params={failedMigrations[0].params}
+          className="col-span-2 col-start-1"
+          title="Failed GoTrue Migrations"
+          tooltip="Failed migrations may cause issues with user authentication."
+          data={failedMigrations[0].logData!}
+          renderer={renderFailedMigrations}
+        />
         <ReportWidget
           isLoading={isLoading}
           params={cumulativeUsers[0].params}
-          className="col-span-2 col-start-1"
+          className="col-span-3 col-start-1"
           title="Users Over Time"
           description="Cumulative count of confirmed users"
           data={cumulativeUsers[0].data!}
@@ -38,7 +49,7 @@ export const AuthReport: NextPageWithLayout = () => {
         <ReportWidget
           isLoading={isLoading}
           params={newUsers[0].params}
-          className="col-span-2 col-start-3"
+          className="col-span-3 col-start-4"
           title="Daily New Users"
           description="The daily count of new user signups"
           data={newUsers[0].data!}
@@ -47,7 +58,7 @@ export const AuthReport: NextPageWithLayout = () => {
         <ReportWidget
           isLoading={isLoading}
           params={dailyActiveUsers[0].params}
-          className="col-span-4 col-start-1"
+          className="col-span-6 col-start-1"
           title="Daily Active Users"
           description="The daily count of active authenticated users"
           data={dailyActiveUsers[0].logData!}

From ea4b46be2bf22b271364f52f23cb5dad77f140c0 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 12 Dec 2022 21:58:57 +0800
Subject: [PATCH 175/215] chore: remove console.logging

---
 studio/components/interfaces/Reports/renderers/AuthRenderers.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index 282e4e09bd6..0444185508a 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -8,7 +8,6 @@ export const renderFailedMigrations = (
     count: number
   }>
 ) => {
-  console.log(props.data)
   const count = props.data.length === 0 ? 0: props?.data?.[0]?.count
   return <Statistic value={count} />
 }

From b91da2d3bd5af68ceb0baab6bad4dc4d3f8f1f1c Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Wed, 14 Dec 2022 18:52:47 +0800
Subject: [PATCH 176/215] feat: StackedBarChart implementation

---
 .../components/ui/Charts/Charts.constants.ts  |  18 +++
 studio/components/ui/Charts/Charts.types.tsx  |  16 ++-
 studio/components/ui/Charts/Charts.utils.ts   |  38 ------
 studio/components/ui/Charts/Charts.utils.tsx  | 118 ++++++++++++++++
 .../ui/Charts/StackedBarChart.stories.tsx     |  81 +++++++++++
 .../components/ui/Charts/StackedBarChart.tsx  | 129 ++++++++++++++++++
 6 files changed, 360 insertions(+), 40 deletions(-)
 delete mode 100644 studio/components/ui/Charts/Charts.utils.ts
 create mode 100644 studio/components/ui/Charts/Charts.utils.tsx
 create mode 100644 studio/components/ui/Charts/StackedBarChart.stories.tsx
 create mode 100644 studio/components/ui/Charts/StackedBarChart.tsx

diff --git a/studio/components/ui/Charts/Charts.constants.ts b/studio/components/ui/Charts/Charts.constants.ts
index d423e9129e9..f9cff43f861 100644
--- a/studio/components/ui/Charts/Charts.constants.ts
+++ b/studio/components/ui/Charts/Charts.constants.ts
@@ -9,6 +9,24 @@ export const CHART_COLORS = {
   GREEN_2: 'var(--colors-brand6)',
 }
 
+// refer to packages/ui/radix-colors.js for full list of colors
+export const STACK_COLORS = [
+  ['brand', 8],
+  ['mint', 8],
+  ['blue', 8],
+  ['sky', 7],
+  ['bronze', 8],
+  ['violet', 7],
+  ['indigo', 8],
+  ['tomato', 7],
+  ['orange', 8],
+  ['olive', 8],
+].map(([color, n]) => ({
+  lighter: `var(--colors-${color}${(n as number) - 1})`,
+  base: `var(--colors-${color}${n})`,
+  darker: `var(--colors-${color}${(n as number) + 1})`,
+}))
+
 export const USAGE_COLORS = {
   200: 'var(--colors-brand9)',
   201: 'var(--colors-brand8)',
diff --git a/studio/components/ui/Charts/Charts.types.tsx b/studio/components/ui/Charts/Charts.types.tsx
index 239d1f29368..3332fc441ae 100644
--- a/studio/components/ui/Charts/Charts.types.tsx
+++ b/studio/components/ui/Charts/Charts.types.tsx
@@ -1,3 +1,5 @@
+import { AreaProps } from 'recharts'
+
 export interface CommonChartProps<D>
   extends Pick<
     HeaderType<D>,
@@ -9,8 +11,18 @@ export interface CommonChartProps<D>
     | 'minimalHeader'
     | 'displayDateInUtc'
   > {
-  title?: string;
+  title?: string
   className?: string
+  isLoading?: boolean
+  size?: 'small' | 'normal' | 'large'
+}
+
+export interface StackedChartProps<D> extends CommonChartProps<D> {
+  xAxisKey: string
+  xAxisFormatAsDate?: boolean
+  dateFormat?: string
+  yAxisKey: string
+  stackKey: string
 }
 
 export type HeaderType<D> = {
@@ -18,7 +30,7 @@ export type HeaderType<D> = {
   focus: number | null
   format?: string
   highlightedValue?: number | string
-  highlightedLabel?:  string
+  highlightedLabel?: string
   data: D[]
   customDateFormat?: string
   label: string
diff --git a/studio/components/ui/Charts/Charts.utils.ts b/studio/components/ui/Charts/Charts.utils.ts
deleted file mode 100644
index 8683067c1b9..00000000000
--- a/studio/components/ui/Charts/Charts.utils.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-
-/**
- * Auto formats a number to a default precision if it is a float
- * 
- * @example
- * numberFormatter(123)       // "123"
- * numberFormatter(123.123)   // "123.12"
- * numberFormatter(123, 2)    // "123.00"
- */
-export const numberFormatter = (num: number, precision = 2) => isFloat(num) ? precisionFormatter(num, precision) : String(num);
-
-
-/**
- * Tests if a number is a float.
- * 
- * @example
- * isFloat(123)     // false
- * isFloat(123.123)     // true
- */
-export const isFloat = (num: number) => String(num).includes(".")
-
-
-/**
- * Formats a number to a particular precision.
- * 
- * @example
- * precisionFormatter(123, 2)       // "123.00"
- * precisionFormatter(123.123, 2)   // "123.12"
- */
-export const precisionFormatter = (num: number, precision: number): string => {
-  if (isFloat(num)) {
-    const [head, tail] = String(num).split(".")
-    return head + "." + tail.slice(0, precision)
-  } else {
-    // pad int with 0
-    return String(num) + "." + ("0".repeat(precision))
-  }
-}
\ No newline at end of file
diff --git a/studio/components/ui/Charts/Charts.utils.tsx b/studio/components/ui/Charts/Charts.utils.tsx
new file mode 100644
index 00000000000..687603d651e
--- /dev/null
+++ b/studio/components/ui/Charts/Charts.utils.tsx
@@ -0,0 +1,118 @@
+import { DATETIME_FORMAT } from 'components/interfaces/Reports/Reports.constants'
+import dayjs from 'dayjs'
+import React, { useMemo } from 'react'
+import { ResponsiveContainer } from 'recharts'
+import { DateTimeFormats } from './Charts.constants'
+import { CommonChartProps, StackedChartProps } from './Charts.types'
+
+/**
+ * Auto formats a number to a default precision if it is a float
+ *
+ * @example
+ * numberFormatter(123)       // "123"
+ * numberFormatter(123.123)   // "123.12"
+ * numberFormatter(123, 2)    // "123.00"
+ */
+export const numberFormatter = (num: number, precision = 2) =>
+  isFloat(num) ? precisionFormatter(num, precision) : String(num)
+
+/**
+ * Tests if a number is a float.
+ *
+ * @example
+ * isFloat(123)     // false
+ * isFloat(123.123)     // true
+ */
+export const isFloat = (num: number) => String(num).includes('.')
+
+/**
+ * Formats a number to a particular precision.
+ *
+ * @example
+ * precisionFormatter(123, 2)       // "123.00"
+ * precisionFormatter(123.123, 2)   // "123.12"
+ */
+export const precisionFormatter = (num: number, precision: number): string => {
+  if (isFloat(num)) {
+    const [head, tail] = String(num).split('.')
+    return head + '.' + tail.slice(0, precision)
+  } else {
+    // pad int with 0
+    return String(num) + '.' + '0'.repeat(precision)
+  }
+}
+
+export const timestampFormatter = (value: string, format: string= DateTimeFormats.FULL) => dayjs(value).format(format)
+
+/**
+ * Hook to create common wrapping components, perform data transformations
+ * returns a Container component and the minHeight set
+ */
+export const useChartSize = (size: CommonChartProps<any>['size'] = 'normal') => {
+  const minHeight = { small: 120, normal: 160, large: 280 }[size]
+  const Container: React.FC = useMemo(
+    () =>
+      ({ children }) =>
+        (
+          <ResponsiveContainer height={minHeight} minHeight={minHeight} width="100%">
+            {children as JSX.Element}
+          </ResponsiveContainer>
+        ),
+    [size]
+  )
+  return {
+    Container,
+    minHeight,
+  }
+}
+
+/**
+ * Transforms data points into a stacked data structure that can be consumed by recharts
+ */
+export const useStacked = ({
+  data,
+  xAxisKey,
+  yAxisKey,
+  stackKey,
+  variant = 'values',
+}: Pick<StackedChartProps<any>, 'xAxisKey' | 'yAxisKey' | 'stackKey'> & {
+  variant?: 'values' | 'percentages'
+} & Pick<CommonChartProps<Record<string, number>>, 'data'>) => {
+  const stackedData = useMemo(() => {
+    if (!data) return []
+    const mapping = data.reduce((acc, datum) => {
+      const x = datum[xAxisKey]
+      const y = datum[yAxisKey]
+      const s = datum[stackKey]
+      if (!acc[x]) {
+        acc[x] = {}
+      }
+
+      acc[x][s] = y
+      return acc
+    }, {} as Record<string, Record<string, number>>)
+
+    const flattened = Object.entries(mapping).map(([x, sMap]) => {
+      let map = sMap
+      if (variant === 'percentages') {
+        const sum = Object.values(sMap).reduce((acc, value) => acc + value, 0)
+        map = Object.entries(sMap).reduce((acc, [key, value]) => {
+          acc[key] = value !== 0 ? value / sum : 0
+          return acc
+        }, {} as any)
+      }
+      return {
+        ...map,
+        [xAxisKey]: x,
+      }
+    })
+    return flattened
+  }, [JSON.stringify(data)])
+  const dataKeys = useMemo(() => {
+    return Object.keys(stackedData[0] || {})
+      .filter((k) => k !== xAxisKey && k !== yAxisKey)
+      .sort()
+  }, [JSON.stringify(stackedData[0] || {})])
+
+  return { dataKeys, stackedData }
+}
diff --git a/studio/components/ui/Charts/StackedBarChart.stories.tsx b/studio/components/ui/Charts/StackedBarChart.stories.tsx
new file mode 100644
index 00000000000..3f3feabebb3
--- /dev/null
+++ b/studio/components/ui/Charts/StackedBarChart.stories.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import dayjs from 'dayjs'
+import Chart from './StackedBarChart'
+import { StackedChartProps } from './Charts.types'
+import { STACK_COLORS } from './Charts.constants'
+
+export default {
+  title: 'Charts/StackedBarChart',
+} as ComponentMeta<typeof Chart>
+
+const DATA = [290, 430, 649, 422, 321].flatMap((value, index) => [
+  {
+    count: value,
+    level: 'error',
+    timestamp: dayjs().subtract(index, 'day').toISOString(),
+  },
+  {
+    count: value * 2,
+    level: 'info',
+    timestamp: dayjs().subtract(index, 'day').toISOString(),
+  },
+  {
+    count: value * 1.3,
+    level: 'warn',
+    timestamp: dayjs().subtract(index, 'day').toISOString(),
+  },
+])
+
+const PROPS = {
+  title: 'Memory usage',
+  xAxisKey: 'timestamp',
+  yAxisKey: 'count',
+  stackKey: 'level',
+  data: DATA,
+}
+export const StackedBarChart = () => (
+  <div className="flex flex-col gap-4 ">
+    <ExampleName>Stack Colors</ExampleName>
+    <div className="flex flex-row ">
+      {STACK_COLORS.map((c) => (
+        <div className="w-10 h-10" style={{ background: c.base }}></div>
+      ))}
+    </div>
+
+    <ExampleName>Examples</ExampleName>
+    <div className="flex flex-row gap-4 flex-wrap pb-10">
+      {[
+        { title: 'Normal', props: {} },
+        { title: 'No title', props: { title: undefined } },
+        { title: 'Minimal Header', props: { minimalHeader: true } },
+        { title: 'Percentage Bars', props: { variant: 'percentages' as const } },
+        {
+          title: 'Formatter - Auto 2 Precision for floats',
+          props: { data: DATA.map((d) => ({ ...d, count: d.count + 5.12 })) },
+        },
+        { title: 'UTC Dates', props: { displayDateInUtc: true } },
+        { title: 'Custom date format', props: { customDateFormat: 'HH:mm' } },
+        { title: 'Value format (c suffix)', props: { format: 'c' } },
+        { title: 'Minimal Value format', props: { minimalHeader: true, format: 'c' } },
+        { title: 'No data', props: { data: [] } },
+      ].map(({ title, props }) => (
+        <div className="w-72 h-72">
+          <ExampleName>{title}</ExampleName>
+          <div className="w-full h-full mt-4">
+            <Chart {...PROPS} {...props} />
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+)
+
+const ExampleName: React.FC = ({ children }) => (
+  <h1
+    className="font-bold text-scale-
+  1100"
+  >
+    {children}
+  </h1>
+)
diff --git a/studio/components/ui/Charts/StackedBarChart.tsx b/studio/components/ui/Charts/StackedBarChart.tsx
new file mode 100644
index 00000000000..126e1eb2d0c
--- /dev/null
+++ b/studio/components/ui/Charts/StackedBarChart.tsx
@@ -0,0 +1,129 @@
+import dayjs from 'dayjs'
+import { useState } from 'react'
+import { BarChart, Bar, XAxis, Tooltip, Legend, Cell } from 'recharts'
+import ChartHeader from './ChartHeader'
+import { CHART_COLORS, STACK_COLORS, DateTimeFormats } from './Charts.constants'
+import { CommonChartProps, StackedChartProps } from './Charts.types'
+import { timestampFormatter, useChartSize, useStacked } from './Charts.utils'
+import { precisionFormatter } from './Charts.utils'
+import NoDataPlaceholder from './NoDataPlaceholder'
+
+interface Props extends CommonChartProps<any> {
+  xAxisKey: string
+  yAxisKey: string
+  stackKey: string
+  onBarClick?: () => void
+  variant?: 'values' | 'percentages'
+  xAxisFormatAsDate?: boolean
+}
+const StackedBarChart: React.FC<Props> = ({
+  size,
+  data,
+  xAxisKey,
+  stackKey,
+  yAxisKey,
+  customDateFormat = DateTimeFormats.FULL,
+  title,
+  format,
+  minimalHeader = false,
+  onBarClick,
+  variant,
+  xAxisFormatAsDate = true,
+}) => {
+  const { Container } = useChartSize(size)
+  const { dataKeys, stackedData } = useStacked({ data, xAxisKey, stackKey, yAxisKey, variant })
+  const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
+  if (data.length === 0) return <NoDataPlaceholder />
+  return (
+    <div>
+      <ChartHeader
+        title={title}
+        format={format}
+        customDateFormat={customDateFormat}
+        minimalHeader={minimalHeader}
+      />
+      <Container>
+        <BarChart
+          data={stackedData}
+          margin={{
+            top: 20,
+            right: 20,
+            left: 20,
+            bottom: 5,
+          }}
+          className="cursor-pointer overflow-visible"
+          //   mouse hover focusing logic
+          onMouseMove={(e: any) => {
+            console.log(e)
+            if (e.activeTooltipIndex !== focusDataIndex) {
+              setFocusDataIndex(e.activeTooltipIndex)
+            }
+          }}
+          onMouseLeave={() => setFocusDataIndex(null)}
+        >
+          <Legend
+            wrapperStyle={{ top: -8, fontSize: '0.8rem' }}
+            iconSize={8}
+            iconType="circle"
+            // margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
+            verticalAlign="top"
+          />
+
+          <XAxis
+            dataKey={xAxisKey}
+            interval={data.length - 2}
+            angle={0}
+            tick={{ fontSize: '0px' }}
+            axisLine={{ stroke: CHART_COLORS.AXIS }}
+            tickLine={{ stroke: CHART_COLORS.AXIS }}
+          />
+          {/* <YAxis dataKey={yAxisKey} /> */}
+          {/* <Tooltip /> */}
+          {dataKeys.map((datum, stackIndex) => (
+            <Bar
+              key={stackIndex}
+              dataKey={datum}
+              type="monotone"
+              legendType="circle"
+              fill={STACK_COLORS[stackIndex].base}
+              stackId={1}
+              animationDuration={300}
+              maxBarSize={48}
+              className={onBarClick ? 'cursor-pointer' : ''}
+            >
+              {stackedData?.map((_entry: unknown, index: any) => (
+                <Cell
+                  key={`cell-${index}`}
+                  className={`transition-all duration-300`}
+                  opacity={focusDataIndex === index ? 0.85 : 1}
+                />
+              ))}
+            </Bar>
+          ))}
+          <Tooltip
+            labelFormatter={xAxisFormatAsDate ? (label) => timestampFormatter(label) : undefined}
+            formatter={(value: number) => {
+              if (variant === 'percentages') {
+                return precisionFormatter(value * 100, 1) + '%'
+              }
+              return value
+            }}
+            cursor={false}
+            labelClassName="text-white"
+            contentStyle={{ backgroundColor: '#444444', borderColor: '#444444', fontSize: '12px' }}
+            wrapperClassName="bg-gray-600 rounded"
+          />
+        </BarChart>
+      </Container>
+      {/* {console.log(data)} */}
+      {stackedData && stackedData[0] && (
+        <div className="text-scale-900 -mt-5 flex items-center justify-between text-xs">
+          <span>{dayjs(stackedData[0][xAxisKey]).format(customDateFormat)}</span>
+          <span>{dayjs(stackedData[data?.length - 1]?.[xAxisKey]).format(customDateFormat)}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default StackedBarChart

From 4c7160d07f6b172eea2589c66a550063607f9b2e Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Thu, 15 Dec 2022 14:24:21 +0800
Subject: [PATCH 177/215] feat: add utc datetime rendering for StackedBarChart

---
 studio/components/ui/Charts/Charts.utils.tsx  | 21 +++++++++++++-
 .../components/ui/Charts/StackedBarChart.tsx  | 29 ++++++++++++++-----
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/studio/components/ui/Charts/Charts.utils.tsx b/studio/components/ui/Charts/Charts.utils.tsx
index 687603d651e..ea260c5ff57 100644
--- a/studio/components/ui/Charts/Charts.utils.tsx
+++ b/studio/components/ui/Charts/Charts.utils.tsx
@@ -4,6 +4,8 @@ import React, { useMemo } from 'react'
 import { ResponsiveContainer } from 'recharts'
 import { DateTimeFormats } from './Charts.constants'
 import { CommonChartProps, StackedChartProps } from './Charts.types'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)
 
 /**
  * Auto formats a number to a default precision if it is a float
@@ -42,7 +44,24 @@ export const precisionFormatter = (num: number, precision: number): string => {
   }
 }
 
-export const timestampFormatter = (value: string, format: string= DateTimeFormats.FULL) => dayjs(value).format(format)
+/**
+ * Formats a timestamp.
+ * Optionally formats the string to UTC
+ * @param value
+ * @param format
+ * @param utc
+ * @returns
+ */
+export const timestampFormatter = (
+  value: string,
+  format: string = DateTimeFormats.FULL,
+  utc: boolean = false
+) => {
+  if (utc) {
+    return dayjs.utc(value).format(format)
+  }
+  return dayjs(value).format(format)
+}
 
 /**
  * Hook to create common wrapping components, perform data transformations
diff --git a/studio/components/ui/Charts/StackedBarChart.tsx b/studio/components/ui/Charts/StackedBarChart.tsx
index 126e1eb2d0c..be4771fa158 100644
--- a/studio/components/ui/Charts/StackedBarChart.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.tsx
@@ -1,13 +1,11 @@
-import dayjs from 'dayjs'
 import { useState } from 'react'
 import { BarChart, Bar, XAxis, Tooltip, Legend, Cell } from 'recharts'
 import ChartHeader from './ChartHeader'
 import { CHART_COLORS, STACK_COLORS, DateTimeFormats } from './Charts.constants'
-import { CommonChartProps, StackedChartProps } from './Charts.types'
+import { CommonChartProps } from './Charts.types'
 import { timestampFormatter, useChartSize, useStacked } from './Charts.utils'
 import { precisionFormatter } from './Charts.utils'
 import NoDataPlaceholder from './NoDataPlaceholder'
-
 interface Props extends CommonChartProps<any> {
   xAxisKey: string
   yAxisKey: string
@@ -15,6 +13,7 @@ interface Props extends CommonChartProps<any> {
   onBarClick?: () => void
   variant?: 'values' | 'percentages'
   xAxisFormatAsDate?: boolean
+  displayDateInUtc?: boolean
 }
 const StackedBarChart: React.FC<Props> = ({
   size,
@@ -29,6 +28,7 @@ const StackedBarChart: React.FC<Props> = ({
   onBarClick,
   variant,
   xAxisFormatAsDate = true,
+  displayDateInUtc,
 }) => {
   const { Container } = useChartSize(size)
   const { dataKeys, stackedData } = useStacked({ data, xAxisKey, stackKey, yAxisKey, variant })
@@ -101,7 +101,11 @@ const StackedBarChart: React.FC<Props> = ({
             </Bar>
           ))}
           <Tooltip
-            labelFormatter={xAxisFormatAsDate ? (label) => timestampFormatter(label) : undefined}
+            labelFormatter={
+              xAxisFormatAsDate
+                ? (label) => timestampFormatter(label, customDateFormat, displayDateInUtc)
+                : undefined
+            }
             formatter={(value: number) => {
               if (variant === 'percentages') {
                 return precisionFormatter(value * 100, 1) + '%'
@@ -115,11 +119,22 @@ const StackedBarChart: React.FC<Props> = ({
           />
         </BarChart>
       </Container>
-      {/* {console.log(data)} */}
       {stackedData && stackedData[0] && (
         <div className="text-scale-900 -mt-5 flex items-center justify-between text-xs">
-          <span>{dayjs(stackedData[0][xAxisKey]).format(customDateFormat)}</span>
-          <span>{dayjs(stackedData[data?.length - 1]?.[xAxisKey]).format(customDateFormat)}</span>
+          <span>
+            {timestampFormatter(
+              stackedData[0][xAxisKey] as string,
+              customDateFormat,
+              displayDateInUtc
+            )}
+          </span>
+          <span>
+            {timestampFormatter(
+              stackedData[stackedData?.length - 1][xAxisKey] as string,
+              customDateFormat,
+              displayDateInUtc
+            )}
+          </span>
         </div>
       )}
     </div>

From c2116126c8808416a0b016a3c9f12f9deb25a22d Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Thu, 15 Dec 2022 14:26:26 +0800
Subject: [PATCH 178/215] feat: add optoinal legend hiding

---
 .../ui/Charts/StackedBarChart.stories.tsx     |  1 +
 .../components/ui/Charts/StackedBarChart.tsx  | 20 +++++++++----------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/studio/components/ui/Charts/StackedBarChart.stories.tsx b/studio/components/ui/Charts/StackedBarChart.stories.tsx
index 3f3feabebb3..12e12d2c2a6 100644
--- a/studio/components/ui/Charts/StackedBarChart.stories.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.stories.tsx
@@ -49,6 +49,7 @@ export const StackedBarChart = () => (
         { title: 'Normal', props: {} },
         { title: 'No title', props: { title: undefined } },
         { title: 'Minimal Header', props: { minimalHeader: true } },
+        { title: 'Hide Legend', props: { hideLegend: true } },
         { title: 'Percentage Bars', props: { variant: 'percentages' as const } },
         {
           title: 'Formatter - Auto 2 Precision for floats',
diff --git a/studio/components/ui/Charts/StackedBarChart.tsx b/studio/components/ui/Charts/StackedBarChart.tsx
index be4771fa158..0141b85bd2e 100644
--- a/studio/components/ui/Charts/StackedBarChart.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.tsx
@@ -14,6 +14,7 @@ interface Props extends CommonChartProps<any> {
   variant?: 'values' | 'percentages'
   xAxisFormatAsDate?: boolean
   displayDateInUtc?: boolean
+  hideLegend?: boolean
 }
 const StackedBarChart: React.FC<Props> = ({
   size,
@@ -29,6 +30,7 @@ const StackedBarChart: React.FC<Props> = ({
   variant,
   xAxisFormatAsDate = true,
   displayDateInUtc,
+  hideLegend = false,
 }) => {
   const { Container } = useChartSize(size)
   const { dataKeys, stackedData } = useStacked({ data, xAxisKey, stackKey, yAxisKey, variant })
@@ -61,14 +63,14 @@ const StackedBarChart: React.FC<Props> = ({
           }}
           onMouseLeave={() => setFocusDataIndex(null)}
         >
-          <Legend
-            wrapperStyle={{ top: -8, fontSize: '0.8rem' }}
-            iconSize={8}
-            iconType="circle"
-            // margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
-            verticalAlign="top"
-          />
-
+          {!hideLegend && (
+            <Legend
+              wrapperStyle={{ top: -8, fontSize: '0.8rem' }}
+              iconSize={8}
+              iconType="circle"
+              verticalAlign="top"
+            />
+          )}
           <XAxis
             dataKey={xAxisKey}
             interval={data.length - 2}
@@ -77,8 +79,6 @@ const StackedBarChart: React.FC<Props> = ({
             axisLine={{ stroke: CHART_COLORS.AXIS }}
             tickLine={{ stroke: CHART_COLORS.AXIS }}
           />
-          {/* <YAxis dataKey={yAxisKey} /> */}
-          {/* <Tooltip /> */}
           {dataKeys.map((datum, stackIndex) => (
             <Bar
               key={stackIndex}

From 5e2e28d195a3d053cee89d38a5b59813bca60cc2 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Thu, 15 Dec 2022 14:29:27 +0800
Subject: [PATCH 179/215] fix: tweak position of legend

---
 studio/components/ui/Charts/StackedBarChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/ui/Charts/StackedBarChart.tsx b/studio/components/ui/Charts/StackedBarChart.tsx
index 0141b85bd2e..099e96777ae 100644
--- a/studio/components/ui/Charts/StackedBarChart.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.tsx
@@ -65,7 +65,7 @@ const StackedBarChart: React.FC<Props> = ({
         >
           {!hideLegend && (
             <Legend
-              wrapperStyle={{ top: -8, fontSize: '0.8rem' }}
+              wrapperStyle={{ top: -6, fontSize: '0.8rem' }}
               iconSize={8}
               iconType="circle"
               verticalAlign="top"

From 381361641d4850829013b1723dd7b9029f3ff3e0 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Thu, 15 Dec 2022 14:32:31 +0800
Subject: [PATCH 180/215] feat: added tooltip formatting for suffix

---
 studio/components/ui/Charts/StackedBarChart.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/studio/components/ui/Charts/StackedBarChart.tsx b/studio/components/ui/Charts/StackedBarChart.tsx
index 099e96777ae..ed8b0ea51d9 100644
--- a/studio/components/ui/Charts/StackedBarChart.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.tsx
@@ -107,10 +107,12 @@ const StackedBarChart: React.FC<Props> = ({
                 : undefined
             }
             formatter={(value: number) => {
+              let val: string = String(value)
               if (variant === 'percentages') {
-                return precisionFormatter(value * 100, 1) + '%'
+                val = precisionFormatter(value * 100, 1) + '%'
               }
-              return value
+              val += (format || '')
+              return val
             }}
             cursor={false}
             labelClassName="text-white"

From 2d5602067fc773aa537ee76f3882dcf51508b476 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 15:16:37 +0800
Subject: [PATCH 181/215] feat: add value rendering in tooltip alongside
 percentage render, add testing for stacked chart utils

---
 package-lock.json                             | 75 ++++++++++++++++++-
 studio/components/ui/Charts/Charts.utils.tsx  | 39 ++++++----
 .../ui/Charts/StackedBarChart.stories.tsx     |  8 +-
 .../components/ui/Charts/StackedBarChart.tsx  | 31 +++++---
 studio/package.json                           |  5 +-
 .../components/ui/Charts/Charts.utils.test.ts | 60 ++++++++++++---
 6 files changed, 172 insertions(+), 46 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d002b6210bb..2f08bafa685 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9827,6 +9827,36 @@
         "react-dom": "<18.0.0"
       }
     },
+    "node_modules/@testing-library/react-hooks": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
+      "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-error-boundary": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-test-renderer": "^16.9.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-test-renderer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
@@ -29842,6 +29872,22 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
@@ -37621,8 +37667,9 @@
         "@storybook/react": "^6.4.19",
         "@storybook/testing-library": "^0.0.9",
         "@tailwindcss/typography": "^0.5.2",
-        "@testing-library/dom": "^8.11.1",
-        "@testing-library/react": "^12.1.2",
+        "@testing-library/dom": "^8.19.0",
+        "@testing-library/react": "^12.1.5",
+        "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^13.5.0",
         "@types/blueimp-md5": "^2.18.0",
         "@types/crypto-js": "^4.0.2",
@@ -44568,6 +44615,16 @@
         "@types/react-dom": "<18.0.0"
       }
     },
+    "@testing-library/react-hooks": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
+      "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "react-error-boundary": "^3.1.0"
+      }
+    },
     "@testing-library/user-event": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
@@ -60519,6 +60576,15 @@
         }
       }
     },
+    "react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "react-fast-compare": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
@@ -63325,8 +63391,9 @@
         "@tailwindcss/typography": "^0.5.2",
         "@tanstack/react-query": "^4.16.1",
         "@tanstack/react-query-devtools": "^4.16.1",
-        "@testing-library/dom": "^8.11.1",
-        "@testing-library/react": "^12.1.2",
+        "@testing-library/dom": "^8.19.0",
+        "@testing-library/react": "^12.1.5",
+        "@testing-library/react-hooks": "*",
         "@testing-library/user-event": "^13.5.0",
         "@types/blueimp-md5": "^2.18.0",
         "@types/crypto-js": "^4.0.2",
diff --git a/studio/components/ui/Charts/Charts.utils.tsx b/studio/components/ui/Charts/Charts.utils.tsx
index ea260c5ff57..af6c33d77db 100644
--- a/studio/components/ui/Charts/Charts.utils.tsx
+++ b/studio/components/ui/Charts/Charts.utils.tsx
@@ -111,20 +111,10 @@ export const useStacked = ({
       return acc
     }, {} as Record<string, Record<string, number>>)
 
-    const flattened = Object.entries(mapping).map(([x, sMap]) => {
-      let map = sMap
-      if (variant === 'percentages') {
-        const sum = Object.values(sMap).reduce((acc, value) => acc + value, 0)
-        map = Object.entries(sMap).reduce((acc, [key, value]) => {
-          acc[key] = value !== 0 ? value / sum : 0
-          return acc
-        }, {} as any)
-      }
-      return {
-        ...map,
-        [xAxisKey]: x,
-      }
-    })
+    const flattened = Object.entries(mapping).map(([x, sMap]) => ({
+      ...sMap,
+      [xAxisKey]: Number.isNaN(Number(x)) ? x : Number(x),
+    }))
     return flattened
   }, [JSON.stringify(data)])
   const dataKeys = useMemo(() => {
@@ -133,5 +123,24 @@ export const useStacked = ({
       .sort()
   }, [JSON.stringify(stackedData[0] || {})])
 
-  return { dataKeys, stackedData }
+  const percentagesStackedData = useMemo(() => {
+    if (variant !== 'percentages') return
+
+    return stackedData.map((stack) => {
+      const entries = Object.entries(stack) as Array<[string, number]>
+      let map
+      const sum = entries
+        .filter(([key, _value]) => dataKeys.includes(key))
+        .reduce((acc, [_key, value]) => acc + value, 0)
+      map = entries.reduce((acc, [key, value]) => {
+        if (!dataKeys.includes(key)) {
+          return { ...acc, [key]: value }
+        }
+        return { ...acc, [key]: value !== 0 ? value / sum : 0 }
+      }, {} as any)
+      return map
+    })
+  }, [JSON.stringify(stackedData)])
+
+  return { dataKeys, stackedData, percentagesStackedData }
 }
diff --git a/studio/components/ui/Charts/StackedBarChart.stories.tsx b/studio/components/ui/Charts/StackedBarChart.stories.tsx
index 12e12d2c2a6..a6703a51727 100644
--- a/studio/components/ui/Charts/StackedBarChart.stories.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.stories.tsx
@@ -36,10 +36,10 @@ const PROPS = {
 }
 export const StackedBarChart = () => (
   <div className="flex flex-col gap-4 ">
-    <ExampleName>Stack Colors</ExampleName>
+    <ExampleName>Default Stacked Chart Colors</ExampleName>
     <div className="flex flex-row ">
       {STACK_COLORS.map((c) => (
-        <div className="w-10 h-10" style={{ background: c.base }}></div>
+        <div className="w-10 h-10" key={c.base} style={{ background: c.base }}></div>
       ))}
     </div>
 
@@ -51,6 +51,10 @@ export const StackedBarChart = () => (
         { title: 'Minimal Header', props: { minimalHeader: true } },
         { title: 'Hide Legend', props: { hideLegend: true } },
         { title: 'Percentage Bars', props: { variant: 'percentages' as const } },
+        {
+          title: 'Percentage Bars with suffix',
+          props: { variant: 'percentages' as const, format: 'mem' },
+        },
         {
           title: 'Formatter - Auto 2 Precision for floats',
           props: { data: DATA.map((d) => ({ ...d, count: d.count + 5.12 })) },
diff --git a/studio/components/ui/Charts/StackedBarChart.tsx b/studio/components/ui/Charts/StackedBarChart.tsx
index ed8b0ea51d9..8f389778d0b 100644
--- a/studio/components/ui/Charts/StackedBarChart.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { BarChart, Bar, XAxis, Tooltip, Legend, Cell } from 'recharts'
+import { BarChart, Bar, XAxis, Tooltip, Legend, Cell, TooltipProps } from 'recharts'
 import ChartHeader from './ChartHeader'
 import { CHART_COLORS, STACK_COLORS, DateTimeFormats } from './Charts.constants'
 import { CommonChartProps } from './Charts.types'
@@ -33,7 +33,13 @@ const StackedBarChart: React.FC<Props> = ({
   hideLegend = false,
 }) => {
   const { Container } = useChartSize(size)
-  const { dataKeys, stackedData } = useStacked({ data, xAxisKey, stackKey, yAxisKey, variant })
+  const { dataKeys, stackedData, percentagesStackedData } = useStacked({
+    data,
+    xAxisKey,
+    stackKey,
+    yAxisKey,
+    variant,
+  })
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
   if (data.length === 0) return <NoDataPlaceholder />
   return (
@@ -46,7 +52,7 @@ const StackedBarChart: React.FC<Props> = ({
       />
       <Container>
         <BarChart
-          data={stackedData}
+          data={variant === 'percentages' ? percentagesStackedData : stackedData}
           margin={{
             top: 20,
             right: 20,
@@ -56,7 +62,6 @@ const StackedBarChart: React.FC<Props> = ({
           className="cursor-pointer overflow-visible"
           //   mouse hover focusing logic
           onMouseMove={(e: any) => {
-            console.log(e)
             if (e.activeTooltipIndex !== focusDataIndex) {
               setFocusDataIndex(e.activeTooltipIndex)
             }
@@ -106,18 +111,22 @@ const StackedBarChart: React.FC<Props> = ({
                 ? (label) => timestampFormatter(label, customDateFormat, displayDateInUtc)
                 : undefined
             }
-            formatter={(value: number) => {
-              let val: string = String(value)
-              if (variant === 'percentages') {
-                val = precisionFormatter(value * 100, 1) + '%'
+            formatter={(value: number, name: string, props: any) => {
+              const suffix = format || ''
+              if (variant === 'percentages' && percentagesStackedData) {
+                const index = percentagesStackedData.findIndex(
+                  (pStack) => pStack === props.payload!
+                )
+                const val = stackedData[index][name]
+                const percentage = precisionFormatter(value * 100, 1) + '%'
+                return `${percentage} (${val}${suffix})`
               }
-              val += (format || '')
-              return val
+              return String(value) + suffix
             }}
             cursor={false}
             labelClassName="text-white"
             contentStyle={{ backgroundColor: '#444444', borderColor: '#444444', fontSize: '12px' }}
-            wrapperClassName="bg-gray-600 rounded"
+            wrapperClassName="bg-gray-600 rounded min-w-md"
           />
         </BarChart>
       </Container>
diff --git a/studio/package.json b/studio/package.json
index 7a39cefd0d6..547db163b08 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -103,8 +103,9 @@
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
     "@tailwindcss/typography": "^0.5.2",
-    "@testing-library/dom": "^8.11.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/blueimp-md5": "^2.18.0",
     "@types/crypto-js": "^4.0.2",
diff --git a/studio/tests/components/ui/Charts/Charts.utils.test.ts b/studio/tests/components/ui/Charts/Charts.utils.test.ts
index 071f19f02d9..4da9e749668 100644
--- a/studio/tests/components/ui/Charts/Charts.utils.test.ts
+++ b/studio/tests/components/ui/Charts/Charts.utils.test.ts
@@ -1,16 +1,52 @@
-import { isFloat, numberFormatter, precisionFormatter } from "components/ui/Charts/Charts.utils"
+import {
+  isFloat,
+  numberFormatter,
+  precisionFormatter,
+  useStacked,
+} from 'components/ui/Charts/Charts.utils'
+import { renderHook } from '@testing-library/react-hooks'
 
-
-test("isFloat", () => {
-    expect(isFloat(123)).toBe(false)
-    expect(isFloat(123.123)).toBe(true)
+test('isFloat', () => {
+  expect(isFloat(123)).toBe(false)
+  expect(isFloat(123.123)).toBe(true)
 })
-test("numberFormatter", () => {
-    expect(numberFormatter(123)).toBe("123")
-    expect(numberFormatter(123.123)).toBe("123.12")
+test('numberFormatter', () => {
+  expect(numberFormatter(123)).toBe('123')
+  expect(numberFormatter(123.123)).toBe('123.12')
 })
 
-test("precisionFormatter", () => {
-    expect(precisionFormatter(123, 1)).toBe("123.0")
-    expect(precisionFormatter(123.12345, 4)).toBe("123.1234")
-})
\ No newline at end of file
+test('precisionFormatter', () => {
+  expect(precisionFormatter(123, 1)).toBe('123.0')
+  expect(precisionFormatter(123.12345, 4)).toBe('123.1234')
+})
+
+test('useStacked', () => {
+  const { result } = renderHook(() =>
+    useStacked({
+      data: [
+        { label: 'a', x: 1, y: 2 },
+        { label: 'b', x: 1, y: 3 },
+      ] as any,
+      xAxisKey: 'x',
+      yAxisKey: 'y',
+      stackKey: 'label',
+      variant: 'percentages',
+    })
+  )
+  expect(result.current).toMatchObject({
+    stackedData: [
+      {
+        a: 2,
+        b: 3,
+        x: 1,
+      },
+    ],
+    percentagesStackedData: [
+      {
+        a: 2 / 5,
+        b: 3 / 5,
+        x: 1,
+      },
+    ],
+  })
+})

From de105ac4ecf51247a1e90e8e61f5804db95c7fa3 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 15:47:50 +0800
Subject: [PATCH 182/215] feat: add sparkline chart

---
 studio/components/ui/Charts/Charts.utils.tsx  | 11 +++-
 .../ui/Charts/Sparkline.stories.tsx           | 54 +++++++++++++++++++
 studio/components/ui/Charts/Sparkline.tsx     | 46 ++++++++++++++++
 3 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 studio/components/ui/Charts/Sparkline.stories.tsx
 create mode 100644 studio/components/ui/Charts/Sparkline.tsx

diff --git a/studio/components/ui/Charts/Charts.utils.tsx b/studio/components/ui/Charts/Charts.utils.tsx
index af6c33d77db..ce988a2d86b 100644
--- a/studio/components/ui/Charts/Charts.utils.tsx
+++ b/studio/components/ui/Charts/Charts.utils.tsx
@@ -67,8 +67,15 @@ export const timestampFormatter = (
  * Hook to create common wrapping components, perform data transformations
  * returns a Container component and the minHeight set
  */
-export const useChartSize = (size: CommonChartProps<any>['size'] = 'normal') => {
-  const minHeight = { small: 120, normal: 160, large: 280 }[size]
+export const useChartSize = (
+  size: CommonChartProps<any>['size'] = 'normal',
+  sizeMap: {
+    small: number
+    normal: number
+    large: number
+  } = { small: 120, normal: 160, large: 280 }
+) => {
+  const minHeight = sizeMap[size]
   const Container: React.FC = useMemo(
     () =>
       ({ children }) =>
diff --git a/studio/components/ui/Charts/Sparkline.stories.tsx b/studio/components/ui/Charts/Sparkline.stories.tsx
new file mode 100644
index 00000000000..e341ff7b86a
--- /dev/null
+++ b/studio/components/ui/Charts/Sparkline.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import dayjs from 'dayjs'
+import Chart from './Sparkline'
+import { StackedChartProps } from './Charts.types'
+import { STACK_COLORS } from './Charts.constants'
+
+export default {
+  title: 'Charts/Sparkline',
+} as ComponentMeta<typeof Chart>
+
+const DATA = [290, 430, 649, 422, 321].flatMap((value, index) => [
+  {
+    count: value,
+    level: 'error',
+    timestamp: dayjs().subtract(index, 'day').toISOString(),
+  },
+])
+
+const PROPS = {
+  title: 'Memory usage',
+  xAxisKey: 'timestamp',
+  yAxisKey: 'count',
+  data: DATA,
+}
+export const Sparkline = () => (
+  <div className="flex flex-col gap-4 ">
+    <ExampleName>Examples</ExampleName>
+    <div className="flex flex-row gap-4 flex-wrap pb-10">
+      {[
+        { title: 'Small', props: { size: 'small' as const } },
+        { title: 'Normal', props: {} },
+        { title: 'Large', props: { size: 'large' as const } },
+        { title: 'No data', props: { data: [] } },
+      ].map(({ title, props }) => (
+        <div className="w-32 h-72">
+          <ExampleName>{title}</ExampleName>
+          <div className="w-full h-full mt-4">
+            <Chart {...PROPS} {...props} />
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+)
+
+const ExampleName: React.FC = ({ children }) => (
+  <h1
+    className="font-bold text-scale-
+  1100"
+  >
+    {children}
+  </h1>
+)
diff --git a/studio/components/ui/Charts/Sparkline.tsx b/studio/components/ui/Charts/Sparkline.tsx
new file mode 100644
index 00000000000..855a9f86383
--- /dev/null
+++ b/studio/components/ui/Charts/Sparkline.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { LineChart, Bar, XAxis, Tooltip, Legend, Cell, TooltipProps, Line } from 'recharts'
+import ChartHeader from './ChartHeader'
+import { CHART_COLORS, STACK_COLORS, DateTimeFormats } from './Charts.constants'
+import { CommonChartProps } from './Charts.types'
+import { timestampFormatter, useChartSize, useStacked } from './Charts.utils'
+import { precisionFormatter } from './Charts.utils'
+import NoDataPlaceholder from './NoDataPlaceholder'
+interface Props extends CommonChartProps<any> {
+  xAxisKey: string
+  yAxisKey: string
+}
+const Sparkline: React.FC<Props> = ({ size, data, xAxisKey, yAxisKey }) => {
+  const { Container } = useChartSize(size, {
+    small: 50,
+    normal: 90,
+    large: 140,
+  })
+  if (data.length === 0) return null
+  return (
+    <Container>
+      <LineChart
+        data={data}
+        margin={{
+          top: 2,
+          right: 10,
+          left: 10,
+          bottom: 2,
+        }}
+        className="overflow-visible max-w-sm"
+      >
+        <XAxis hide dataKey={xAxisKey} />
+        <Line
+          type="monotone"
+          dataKey={yAxisKey}
+          stroke={CHART_COLORS.GREEN_1}
+          dot={false}
+          animationDuration={600}
+          strokeWidth={1.5}
+        />
+      </LineChart>
+    </Container>
+  )
+}
+
+export default Sparkline

From 7796598897678d7066d91934f88a58b10e9179e0 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 16:36:39 +0800
Subject: [PATCH 183/215] feat: added sign up provider chart, tweaked stacked
 chart colors

---
 .../interfaces/Reports/Reports.constants.ts   | 13 ++++++
 .../Reports/renderers/AuthRenderers.tsx       | 22 +++++++++-
 .../components/ui/Charts/Charts.constants.ts  | 17 ++++----
 .../ui/Charts/StackedBarChart.stories.tsx     |  1 +
 .../components/ui/Charts/StackedBarChart.tsx  | 18 ++++----
 studio/pages/project/[ref]/reports/auth.tsx   | 41 ++++++++++++++-----
 6 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index bf67eb7c019..187bb9a7543 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -162,6 +162,19 @@ export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
   [Presets.AUTH]: {
     title: 'Auth',
     queries: {
+      signUpProviders: {
+        queryType: "db",
+        sql: `
+select 
+  sum(count(u.id)) over (order by date_trunc('day', u.created_at)) as count, 
+  date_trunc('day', u.created_at) as timestamp, 
+  i.provider as provider
+from auth.users u
+join auth.identities as i on u.id = i.user_id
+group by timestamp, provider
+order by timestamp desc
+        `
+      },  
       failedMigrations: {
         queryType: "logs",
         sql: `
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index 0444185508a..f69dcc88e10 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -1,14 +1,34 @@
 import { BarChart } from 'components/to-be-cleaned/Charts/ChartRenderer'
+import StackedBarChart from 'components/ui/Charts/StackedBarChart'
 import { DATETIME_FORMAT } from '../Reports.constants'
 import { ReportWidgetProps } from '../ReportWidget'
 import Statistic from '../Statistic'
+
+export const renderSignUpProviders = (
+  props: ReportWidgetProps<{
+    timestamp: string
+    provider: string
+    count: number
+  }>
+) => {
+  return (
+    <StackedBarChart
+      hideHeader
+      variant="percentages"
+      data={props.data}
+      xAxisKey="timestamp"
+      yAxisKey="count"
+      stackKey="provider"
+    />
+  )
+}
 export const renderFailedMigrations = (
   props: ReportWidgetProps<{
     timestamp: string
     count: number
   }>
 ) => {
-  const count = props.data.length === 0 ? 0: props?.data?.[0]?.count
+  const count = props.data.length === 0 ? 0 : props?.data?.[0]?.count
   return <Statistic value={count} />
 }
 export const renderCumulativeUsers = (
diff --git a/studio/components/ui/Charts/Charts.constants.ts b/studio/components/ui/Charts/Charts.constants.ts
index f9cff43f861..7aa3a6de752 100644
--- a/studio/components/ui/Charts/Charts.constants.ts
+++ b/studio/components/ui/Charts/Charts.constants.ts
@@ -11,16 +11,13 @@ export const CHART_COLORS = {
 
 // refer to packages/ui/radix-colors.js for full list of colors
 export const STACK_COLORS = [
-  ['brand', 8],
-  ['mint', 8],
-  ['blue', 8],
-  ['sky', 7],
-  ['bronze', 8],
-  ['violet', 7],
-  ['indigo', 8],
-  ['tomato', 7],
-  ['orange', 8],
-  ['olive', 8],
+  ['brand', 9],
+  ['mint', 9],
+  ['blue', 9],
+  ['sky', 9],
+  ['lime', 9],
+  ['yellow', 9],
+  ['orange', 9],
 ].map(([color, n]) => ({
   lighter: `var(--colors-${color}${(n as number) - 1})`,
   base: `var(--colors-${color}${n})`,
diff --git a/studio/components/ui/Charts/StackedBarChart.stories.tsx b/studio/components/ui/Charts/StackedBarChart.stories.tsx
index a6703a51727..2e0289aa158 100644
--- a/studio/components/ui/Charts/StackedBarChart.stories.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.stories.tsx
@@ -50,6 +50,7 @@ export const StackedBarChart = () => (
         { title: 'No title', props: { title: undefined } },
         { title: 'Minimal Header', props: { minimalHeader: true } },
         { title: 'Hide Legend', props: { hideLegend: true } },
+        { title: 'Hide header', props: { hideHeader: true } },
         { title: 'Percentage Bars', props: { variant: 'percentages' as const } },
         {
           title: 'Percentage Bars with suffix',
diff --git a/studio/components/ui/Charts/StackedBarChart.tsx b/studio/components/ui/Charts/StackedBarChart.tsx
index 8f389778d0b..df9f6484ce3 100644
--- a/studio/components/ui/Charts/StackedBarChart.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.tsx
@@ -15,6 +15,7 @@ interface Props extends CommonChartProps<any> {
   xAxisFormatAsDate?: boolean
   displayDateInUtc?: boolean
   hideLegend?: boolean
+  hideHeader?: boolean
 }
 const StackedBarChart: React.FC<Props> = ({
   size,
@@ -31,6 +32,7 @@ const StackedBarChart: React.FC<Props> = ({
   xAxisFormatAsDate = true,
   displayDateInUtc,
   hideLegend = false,
+  hideHeader = false,
 }) => {
   const { Container } = useChartSize(size)
   const { dataKeys, stackedData, percentagesStackedData } = useStacked({
@@ -43,13 +45,15 @@ const StackedBarChart: React.FC<Props> = ({
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
   if (data.length === 0) return <NoDataPlaceholder />
   return (
-    <div>
-      <ChartHeader
-        title={title}
-        format={format}
-        customDateFormat={customDateFormat}
-        minimalHeader={minimalHeader}
-      />
+    <div className="w-full">
+      {!hideHeader && (
+        <ChartHeader
+          title={title}
+          format={format}
+          customDateFormat={customDateFormat}
+          minimalHeader={minimalHeader}
+        />
+      )}
       <Container>
         <BarChart
           data={variant === 'percentages' ? percentagesStackedData : stackedData}
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
index 42e22d60ade..0d84ed91ebe 100644
--- a/studio/pages/project/[ref]/reports/auth.tsx
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -12,6 +12,7 @@ import {
   renderNewUsers,
   renderCumulativeUsers,
   renderFailedMigrations,
+  renderSignUpProviders,
 } from 'components/interfaces/Reports/renderers/AuthRenderers'
 
 export const AuthReport: NextPageWithLayout = () => {
@@ -23,20 +24,20 @@ export const AuthReport: NextPageWithLayout = () => {
   const newUsers = hooks.newUsers()
   const cumulativeUsers = hooks.cumulativeUsers()
   const failedMigrations = hooks.failedMigrations()
+  const signUpProviders = hooks.signUpProviders()
 
-  const { isLoading, Layout } = usePresetReport([dailyActiveUsers, newUsers, cumulativeUsers])
+  const { isLoading, Layout } = usePresetReport([
+    dailyActiveUsers,
+    newUsers,
+    cumulativeUsers,
+    failedMigrations,
+    signUpProviders,
+  ])
   return (
     <Layout title={config.title}>
       <div className="grid  lg:grid-cols-6 gap-4">
-        <ReportWidget
-          isLoading={isLoading}
-          params={failedMigrations[0].params}
-          className="col-span-2 col-start-1"
-          title="Failed GoTrue Migrations"
-          tooltip="Failed migrations may cause issues with user authentication."
-          data={failedMigrations[0].logData!}
-          renderer={renderFailedMigrations}
-        />
+        <h2>User Activity</h2>
+
         <ReportWidget
           isLoading={isLoading}
           params={cumulativeUsers[0].params}
@@ -64,6 +65,26 @@ export const AuthReport: NextPageWithLayout = () => {
           data={dailyActiveUsers[0].logData!}
           renderer={renderDailyActiveUsers}
         />
+
+        <ReportWidget
+          isLoading={isLoading}
+          params={signUpProviders[0].params}
+          className="col-span-6 col-start-1"
+          title="Sign Up Providers"
+          description="The breakdown of providers used for user creation"
+          data={signUpProviders[0].data!}
+          renderer={renderSignUpProviders}
+        />
+        <h2>Sever Health</h2>
+        <ReportWidget
+          isLoading={isLoading}
+          params={failedMigrations[0].params}
+          className="col-span-2 col-start-1"
+          title="Failed Migrations"
+          tooltip="Failed GoTrue migrations may cause issues with user authentication."
+          data={failedMigrations[0].logData!}
+          renderer={renderFailedMigrations}
+        />
       </div>
     </Layout>
   )

From 4ac96293a02b2a03d7f25b2034a4f75d3dafb8ef Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 17:25:15 +0800
Subject: [PATCH 184/215] feat: add banned user widget and unverified users
 widget

---
 .../interfaces/Reports/Reports.constants.ts   | 23 ++++++++++++++
 .../interfaces/Reports/Statistic.tsx          | 18 ++++++++++-
 .../Reports/renderers/AuthRenderers.tsx       | 17 ++++++++++
 .../components/ui/Charts/StackedBarChart.tsx  |  2 +-
 studio/pages/project/[ref]/reports/auth.tsx   | 31 +++++++++++++++++--
 5 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 187bb9a7543..e76f48949ac 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -162,6 +162,28 @@ export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
   [Presets.AUTH]: {
     title: 'Auth',
     queries: {
+      bannedUsers: {
+        queryType: "db",
+        sql: `
+select 
+  count(distinct u.id) as count
+from auth.users u
+where u.banned_until is not null and u.banned_until > now()
+limit 1
+        `
+      },  
+      unverifiedUsers: {
+        queryType: "db",
+        sql: `
+select 
+  date_trunc('day', u.created_at) as timestamp,
+  count(distinct u.id) as count
+from auth.users u
+where u.confirmed_at is null
+group by timestamp
+order by timestamp desc
+        `
+      },  
       signUpProviders: {
         queryType: "db",
         sql: `
@@ -207,6 +229,7 @@ select
   date_trunc('day', u.created_at) as timestamp, 
   sum(count(u.id)) over (order by date_trunc('day', u.created_at)) as count
 from auth.users as u
+where u.confirmed_at is not null
 group by timestamp
 order by timestamp desc
         `,
diff --git a/studio/components/interfaces/Reports/Statistic.tsx b/studio/components/interfaces/Reports/Statistic.tsx
index 9f21c6feefc..61c26979c05 100644
--- a/studio/components/interfaces/Reports/Statistic.tsx
+++ b/studio/components/interfaces/Reports/Statistic.tsx
@@ -1,3 +1,4 @@
+import Sparkline from 'components/ui/Charts/Sparkline'
 import React from 'react'
 
 interface Props {
@@ -6,12 +7,24 @@ interface Props {
   prefix?: string
   suffix?: string
   valueFormatter?: (value: Props['value']) => string
+  sparklineData?: Record<string, number>[]
+  sparklineXAxis?: string
+  sparklineYAxis?: string
 }
 
-const Statistic: React.FC<Props> = ({ prefix, suffix, value, startingValue }) => {
+const Statistic: React.FC<Props> = ({
+  prefix,
+  suffix,
+  value,
+  startingValue,
+  sparklineData,
+  sparklineXAxis,
+  sparklineYAxis,
+}) => {
   const isNumber = typeof value === 'number' && !Number.isNaN(value)
   const percentageChange =
     startingValue && isNumber ? Number(startingValue) / Number(value) - 1 : null
+  const showSparkline = sparklineData && sparklineXAxis && sparklineYAxis
   return (
     <div className="w-full">
       <div className="flex flex-row justify-center">
@@ -29,6 +42,9 @@ const Statistic: React.FC<Props> = ({ prefix, suffix, value, startingValue }) =>
           )}
         </div>
       )}
+      {showSparkline && (
+        <Sparkline data={sparklineData} xAxisKey={sparklineXAxis} yAxisKey={sparklineYAxis} />
+      )}
     </div>
   )
 }
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index f69dcc88e10..fbd38fb6c5f 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -4,6 +4,23 @@ import { DATETIME_FORMAT } from '../Reports.constants'
 import { ReportWidgetProps } from '../ReportWidget'
 import Statistic from '../Statistic'
 
+export const renderBannedUsers = (
+  props: ReportWidgetProps<{
+    count: number
+  }>
+) => {
+  const count = props.data.length === 0 ? 0 : props?.data?.[0]?.count
+  return <Statistic value={count} />
+}
+export const renderUnverifiedUsers = (
+  props: ReportWidgetProps<{
+    timestamp: string
+    count: number
+  }>
+) => {
+  const count = props.data.length === 0 ? 0 : props?.data?.[0]?.count
+  return <Statistic value={count} />
+}
 export const renderSignUpProviders = (
   props: ReportWidgetProps<{
     timestamp: string
diff --git a/studio/components/ui/Charts/StackedBarChart.tsx b/studio/components/ui/Charts/StackedBarChart.tsx
index df9f6484ce3..d378cef19a8 100644
--- a/studio/components/ui/Charts/StackedBarChart.tsx
+++ b/studio/components/ui/Charts/StackedBarChart.tsx
@@ -43,7 +43,7 @@ const StackedBarChart: React.FC<Props> = ({
     variant,
   })
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
-  if (data.length === 0) return <NoDataPlaceholder />
+  if (!data || data.length === 0) return <NoDataPlaceholder />
   return (
     <div className="w-full">
       {!hideHeader && (
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
index 0d84ed91ebe..d57839ebf23 100644
--- a/studio/pages/project/[ref]/reports/auth.tsx
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -13,6 +13,8 @@ import {
   renderCumulativeUsers,
   renderFailedMigrations,
   renderSignUpProviders,
+  renderUnverifiedUsers,
+  renderBannedUsers,
 } from 'components/interfaces/Reports/renderers/AuthRenderers'
 
 export const AuthReport: NextPageWithLayout = () => {
@@ -25,6 +27,8 @@ export const AuthReport: NextPageWithLayout = () => {
   const cumulativeUsers = hooks.cumulativeUsers()
   const failedMigrations = hooks.failedMigrations()
   const signUpProviders = hooks.signUpProviders()
+  const unverifiedUsers = hooks.unverifiedUsers()
+  const bannedUsers = hooks.bannedUsers()
 
   const { isLoading, Layout } = usePresetReport([
     dailyActiveUsers,
@@ -32,10 +36,11 @@ export const AuthReport: NextPageWithLayout = () => {
     cumulativeUsers,
     failedMigrations,
     signUpProviders,
+    unverifiedUsers,
   ])
   return (
     <Layout title={config.title}>
-      <div className="grid  lg:grid-cols-6 gap-4">
+      <div className="flex flex-col grid  lg:grid-cols-6 gap-4">
         <h2>User Activity</h2>
 
         <ReportWidget
@@ -69,13 +74,33 @@ export const AuthReport: NextPageWithLayout = () => {
         <ReportWidget
           isLoading={isLoading}
           params={signUpProviders[0].params}
-          className="col-span-6 col-start-1"
+          className="row-span-4 col-span-4 col-start-3"
           title="Sign Up Providers"
           description="The breakdown of providers used for user creation"
           data={signUpProviders[0].data!}
           renderer={renderSignUpProviders}
         />
-        <h2>Sever Health</h2>
+        <ReportWidget
+          isLoading={isLoading}
+          params={unverifiedUsers[0].params}
+          className="row-span-1 col-span-2 col-start-1"
+          title="Unverified Users"
+          tooltip="High number of unverified users may indicate spamming and malicious behavior."
+          data={unverifiedUsers[0].data! || []}
+          renderer={renderUnverifiedUsers}
+        />
+
+        <ReportWidget
+          isLoading={isLoading}
+          params={bannedUsers[0].params}
+          className="row-span-1 col-span-2 col-start-1"
+          title="Banned Users"
+          tooltip="High number of banned users may indicate malicious behavior."
+          data={bannedUsers[0].data! || []}
+          renderer={renderBannedUsers}
+        />
+
+        <h2 className="col-span-full">Sever Health</h2>
         <ReportWidget
           isLoading={isLoading}
           params={failedMigrations[0].params}

From fa3368516aeec29e5200e9ff063c632defb9439c Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 17:29:25 +0800
Subject: [PATCH 185/215] feat: add conditional rendering of sparkline

---
 studio/components/interfaces/Reports/Statistic.tsx     |  4 ++--
 .../interfaces/Reports/renderers/AuthRenderers.tsx     | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/studio/components/interfaces/Reports/Statistic.tsx b/studio/components/interfaces/Reports/Statistic.tsx
index 61c26979c05..e8f534ae003 100644
--- a/studio/components/interfaces/Reports/Statistic.tsx
+++ b/studio/components/interfaces/Reports/Statistic.tsx
@@ -7,7 +7,7 @@ interface Props {
   prefix?: string
   suffix?: string
   valueFormatter?: (value: Props['value']) => string
-  sparklineData?: Record<string, number>[]
+  sparklineData?: any
   sparklineXAxis?: string
   sparklineYAxis?: string
 }
@@ -43,7 +43,7 @@ const Statistic: React.FC<Props> = ({
         </div>
       )}
       {showSparkline && (
-        <Sparkline data={sparklineData} xAxisKey={sparklineXAxis} yAxisKey={sparklineYAxis} />
+        <Sparkline data={sparklineData} xAxisKey={sparklineXAxis} yAxisKey={sparklineYAxis} size="small" />
       )}
     </div>
   )
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index fbd38fb6c5f..f61c26a5674 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -19,7 +19,15 @@ export const renderUnverifiedUsers = (
   }>
 ) => {
   const count = props.data.length === 0 ? 0 : props?.data?.[0]?.count
-  return <Statistic value={count} />
+
+  return (
+    <Statistic
+      value={count}
+      sparklineData={props.data.length >= 3 ? props.data : null}
+      sparklineXAxis="timestamp"
+      sparklineYAxis="count"
+    />
+  )
 }
 export const renderSignUpProviders = (
   props: ReportWidgetProps<{

From fcbc5e88d12ed4922d1d16cc652d88d1319b1295 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 17:35:56 +0800
Subject: [PATCH 186/215] feat: combine bot subreport into API report

---
 studio/tests/pages/projects/reports/product-reports.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/tests/pages/projects/reports/product-reports.test.js b/studio/tests/pages/projects/reports/product-reports.test.js
index a30e33c1aea..885fcbe145a 100644
--- a/studio/tests/pages/projects/reports/product-reports.test.js
+++ b/studio/tests/pages/projects/reports/product-reports.test.js
@@ -7,7 +7,7 @@ import { get, post } from 'lib/common/fetch'
 import { useRouter } from 'next/router'
 import { render } from '../../../helpers'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
-import { ApiOverviewReport } from 'pages/project/[ref]/reports/api-overview'
+import { ApiOverviewReport } from 'pages/project/[ref]/reports/api'
 import { ApiBotsReport } from 'pages/project/[ref]/reports/api-bots'
 import { AuthReport } from 'pages/project/[ref]/reports/auth'
 

From f041bb3644a94898014198f48aa6beae6db81cd5 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 17:37:31 +0800
Subject: [PATCH 187/215] feat: combine bot subreport into API report

---
 .../interfaces/Reports/Reports.constants.ts   |  9 +-
 .../interfaces/Reports/Reports.types.ts       |  4 +-
 .../Reports/renderers/ApiBotsRenderers.tsx    | 94 -------------------
 ...OverviewRenderers.tsx => ApiRenderers.tsx} | 92 ++++++++++++++++++
 .../ReportsLayout/ReportsMenu.utils.ts        | 12 +--
 .../pages/project/[ref]/reports/api-bots.tsx  | 51 ----------
 .../reports/{api-overview.tsx => api.tsx}     | 47 ++++++++--
 .../projects/reports/product-reports.test.js  |  6 +-
 8 files changed, 139 insertions(+), 176 deletions(-)
 delete mode 100644 studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
 rename studio/components/interfaces/Reports/renderers/{OverviewRenderers.tsx => ApiRenderers.tsx} (70%)
 delete mode 100644 studio/pages/project/[ref]/reports/api-bots.tsx
 rename studio/pages/project/[ref]/reports/{api-overview.tsx => api.tsx} (58%)

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index e76f48949ac..456c6c95a8d 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -34,8 +34,8 @@ export const DEFAULT_QUERY_PARAMS = {
 }
 
 export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
-  [Presets.API_OVERVIEW]: {
-    title: '',
+  [Presets.API]: {
+    title: 'API',
     queries: {
       statusCodes: {
         queryType: 'logs',
@@ -101,11 +101,6 @@ export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
         LIMIT 50
       `,
       },
-    },
-  },
-  [Presets.API_BOTS]: {
-    title: 'API Bots',
-    queries: {
       userAgents: {
         queryType: 'logs',
         sql: `
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index 419303e66af..b13d36dd3ba 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -1,10 +1,8 @@
 import { ResponseError } from 'types'
-import { LogsEndpointParams } from '../Settings/Logs'
 import { DEFAULT_QUERY_PARAMS } from './Reports.constants'
 
 export enum Presets {
-  API_OVERVIEW = 'overview',
-  API_BOTS = 'api_bots',
+  API = 'api',
   AUTH = 'auth',
 }
 
diff --git a/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx b/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
deleted file mode 100644
index 9c92a616dad..00000000000
--- a/studio/components/interfaces/Reports/renderers/ApiBotsRenderers.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import Table from 'components/to-be-cleaned/Table'
-import { ReportWidgetProps } from '../ReportWidget'
-
-export const renderUserAgents = (
-  props: ReportWidgetProps<{
-    user_agent: string
-    request_source: string
-    count: number
-  }>
-) => {
-  return (
-    <Table
-      containerClassName="max-h-72 w-full overflow-y-auto"
-      className="relative rounded border border-scale-600"
-      head={
-        <>
-          <Table.th className="sticky top-0 z-10">User Agents</Table.th>
-          <Table.th className="sticky top-0 z-10">Request Source</Table.th>
-          <Table.th className="sticky top-0 z-10">Count</Table.th>
-        </>
-      }
-      body={
-        <>
-          {props.data.map((row, index) => {
-            return (
-              <Table.tr key={index}>
-                <Table.td className="max-w-sm lg:max-w-lg" style={{ padding: '0.3rem' }}>
-                  {row.user_agent ? (
-                    row.user_agent
-                  ) : (
-                    <span className="text-scale-1000">No user agent</span>
-                  )}
-                </Table.td>
-                <Table.td>{row.request_source}</Table.td>
-                <Table.td style={{ padding: '0.5rem' }} className="align-top text-xs">
-                  {row.count}
-                </Table.td>
-              </Table.tr>
-            )
-          })}
-        </>
-      }
-    />
-  )
-}
-
-export const renderBotScores = (
-  props: ReportWidgetProps<{
-    ip: string
-    country: string
-    user_agent: string
-    path: string
-    bot_score: number
-    bot_verified: boolean
-    count: number
-  }>
-) => {
-  return (
-    <Table
-      containerClassName="max-h-72 w-full overflow-y-auto"
-      className="relative rounded border border-scale-600"
-      head={
-        <>
-          <Table.th className="sticky top-0 z-10">IP (Country)</Table.th>
-          <Table.th className="sticky top-0 z-10">Request Path</Table.th>
-          <Table.th className="sticky top-0 z-10">User Agent</Table.th>
-          <Table.th className="sticky top-0 z-10">Bot Score</Table.th>
-          <Table.th className="sticky top-0 z-10">Is Verified Bot</Table.th>
-          <Table.th className="sticky top-0 z-10">Count</Table.th>
-        </>
-      }
-      body={
-        <>
-          {props.data.map((row, index) => {
-            return (
-              <Table.tr key={index}>
-                <Table.td className="max-w-sm lg:max-w-lg" style={{ padding: '0.3rem' }}>
-                  {row.ip} ({row.country})
-                </Table.td>
-                <Table.td>{row.path}</Table.td>
-                <Table.td className="max-w-xs truncate">{row.user_agent}</Table.td>
-                <Table.td>{row.bot_score}</Table.td>
-                <Table.td>{row.bot_verified ? 'Yes' : 'No'}</Table.td>
-                <Table.td style={{ padding: '0.5rem' }} className="align-top text-xs">
-                  {row.count}
-                </Table.td>
-              </Table.tr>
-            )
-          })}
-        </>
-      }
-    />
-  )
-}
diff --git a/studio/components/interfaces/Reports/renderers/OverviewRenderers.tsx b/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
similarity index 70%
rename from studio/components/interfaces/Reports/renderers/OverviewRenderers.tsx
rename to studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
index 2fc2c8eac4e..e6e8156d296 100644
--- a/studio/components/interfaces/Reports/renderers/OverviewRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
@@ -10,6 +10,98 @@ import { PathsDatum, StatusCodesDatum } from '../Reports.types'
 import { queryParamsToObject } from '../Reports.utils'
 import { ReportWidgetProps } from '../ReportWidget'
 
+export const renderUserAgents = (
+  props: ReportWidgetProps<{
+    user_agent: string
+    request_source: string
+    count: number
+  }>
+) => {
+  return (
+    <Table
+      containerClassName="max-h-72 w-full overflow-y-auto"
+      className="relative rounded border border-scale-600"
+      head={
+        <>
+          <Table.th className="sticky top-0 z-10">User Agents</Table.th>
+          <Table.th className="sticky top-0 z-10">Request Source</Table.th>
+          <Table.th className="sticky top-0 z-10">Count</Table.th>
+        </>
+      }
+      body={
+        <>
+          {props.data.map((row, index) => {
+            return (
+              <Table.tr key={index}>
+                <Table.td className="max-w-sm lg:max-w-lg" style={{ padding: '0.3rem' }}>
+                  {row.user_agent ? (
+                    row.user_agent
+                  ) : (
+                    <span className="text-scale-1000">No user agent</span>
+                  )}
+                </Table.td>
+                <Table.td>{row.request_source}</Table.td>
+                <Table.td style={{ padding: '0.5rem' }} className="align-top text-xs">
+                  {row.count}
+                </Table.td>
+              </Table.tr>
+            )
+          })}
+        </>
+      }
+    />
+  )
+}
+
+export const renderBotScores = (
+  props: ReportWidgetProps<{
+    ip: string
+    country: string
+    user_agent: string
+    path: string
+    bot_score: number
+    bot_verified: boolean
+    count: number
+  }>
+) => {
+  return (
+    <Table
+      containerClassName="max-h-72 w-full overflow-y-auto"
+      className="relative rounded border border-scale-600"
+      head={
+        <>
+          <Table.th className="sticky top-0 z-10">IP (Country)</Table.th>
+          <Table.th className="sticky top-0 z-10">Request Path</Table.th>
+          <Table.th className="sticky top-0 z-10">User Agent</Table.th>
+          <Table.th className="sticky top-0 z-10">Bot Score</Table.th>
+          <Table.th className="sticky top-0 z-10">Is Verified Bot</Table.th>
+          <Table.th className="sticky top-0 z-10">Count</Table.th>
+        </>
+      }
+      body={
+        <>
+          {props.data.map((row, index) => {
+            return (
+              <Table.tr key={index}>
+                <Table.td className="max-w-sm lg:max-w-lg" style={{ padding: '0.3rem' }}>
+                  {row.ip} ({row.country})
+                </Table.td>
+                <Table.td>{row.path}</Table.td>
+                <Table.td className="max-w-xs truncate">{row.user_agent}</Table.td>
+                <Table.td>{row.bot_score}</Table.td>
+                <Table.td>{row.bot_verified ? 'Yes' : 'No'}</Table.td>
+                <Table.td style={{ padding: '0.5rem' }} className="align-top text-xs">
+                  {row.count}
+                </Table.td>
+              </Table.tr>
+            )
+          })}
+        </>
+      }
+    />
+  )
+}
+
 export const renderStatusCodesChart = (props: ReportWidgetProps<StatusCodesDatum>) => (
   <StackedAreaChart
     dateFormat={DATETIME_FORMAT}
diff --git a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
index c120e0fbb64..8e6142aaef8 100644
--- a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
+++ b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
@@ -23,15 +23,9 @@ export const generateReportsMenu = (project?: Project): ProductMenuGroup[] => {
         ...(productReports
           ? [
               {
-                name: 'API Overview',
-                key: 'api-overview',
-                url: `/project/${ref}/reports/api-overview`,
-                items: [],
-              },
-              {
-                name: 'API Bots',
-                key: 'api-bots',
-                url: `/project/${ref}/reports/api-bots`,
+                name: 'API',
+                key: 'api',
+                url: `/project/${ref}/reports/api`,
                 items: [],
               },
               {
diff --git a/studio/pages/project/[ref]/reports/api-bots.tsx b/studio/pages/project/[ref]/reports/api-bots.tsx
deleted file mode 100644
index 3df85b74abf..00000000000
--- a/studio/pages/project/[ref]/reports/api-bots.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
-
-import { NextPageWithLayout } from 'types'
-import { Presets } from 'components/interfaces/Reports/Reports.types'
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
-import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
-import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
-import {
-  renderBotScores,
-  renderUserAgents,
-} from 'components/interfaces/Reports/renderers/ApiBotsRenderers'
-import ReportWidget from 'components/interfaces/Reports/ReportWidget'
-
-export const ApiBotsReport: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref } = router.query
-  const config = PRESET_CONFIG[Presets.API_BOTS]
-  const hooks = hooksFactory(ref as string, config)
-  const userAgents = hooks.userAgents()
-  const botScores = hooks.botScores()
-  const { isLoading, Layout } = usePresetReport([userAgents, botScores])
-  return (
-    <Layout title={config.title}>
-      <div className="grid lg:grid-cols-4 gap-4">
-        <ReportWidget
-          isLoading={isLoading}
-          params={userAgents[0].params}
-          className="col-span-4 col-start-1"
-          title="Top User Agents"
-          description="The types of user agents using the API and their organization source."
-          data={userAgents[0].logData || []}
-          renderer={renderUserAgents}
-        />
-        <ReportWidget
-          isLoading={isLoading}
-          params={botScores[0].params}
-          className="col-span-4 col-start-1"
-          title="Bot-like API Requests"
-          description="Suspicious bot-like requests, as flagged by Cloudflare"
-          data={botScores[0].logData || []}
-          renderer={renderBotScores}
-        />
-      </div>
-    </Layout>
-  )
-}
-
-ApiBotsReport.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
-
-export default observer(ApiBotsReport)
diff --git a/studio/pages/project/[ref]/reports/api-overview.tsx b/studio/pages/project/[ref]/reports/api.tsx
similarity index 58%
rename from studio/pages/project/[ref]/reports/api-overview.tsx
rename to studio/pages/project/[ref]/reports/api.tsx
index 2d266dabeaf..1c6257d180b 100644
--- a/studio/pages/project/[ref]/reports/api-overview.tsx
+++ b/studio/pages/project/[ref]/reports/api.tsx
@@ -11,17 +11,27 @@ import {
   renderErrorRateChart,
   renderRequestsPathsTable,
   renderStatusCodesChart,
-} from 'components/interfaces/Reports/renderers/OverviewRenderers'
+  renderBotScores,
+  renderUserAgents
+} from 'components/interfaces/Reports/renderers/ApiRenderers'
 
-export const ApiOverviewReport: NextPageWithLayout = () => {
+export const ApiReport: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query
-  const config = PRESET_CONFIG[Presets.API_OVERVIEW]
+  const config = PRESET_CONFIG[Presets.API]
   const hooks = hooksFactory(ref as string, config)
   const statusCodes = hooks.statusCodes()
   const errorRates = hooks.errorRates()
   const requestPaths = hooks.requestPaths()
-  const { isLoading, Layout } = usePresetReport([statusCodes, errorRates, requestPaths])
+  const userAgents = hooks.userAgents()
+  const botScores = hooks.botScores()
+  const { isLoading, Layout } = usePresetReport([
+    statusCodes,
+    errorRates,
+    requestPaths,
+    userAgents,
+    botScores,
+  ])
   return (
     <Layout title={config.title}>
       <div className="grid lg:grid-cols-4 gap-4">
@@ -31,7 +41,7 @@ export const ApiOverviewReport: NextPageWithLayout = () => {
           className="col-span-4 col-start-1"
           title="API Status Codes"
           description="Distribution of API responses by status codes."
-          data={statusCodes[0].logData  || []}
+          data={statusCodes[0].logData || []}
           renderer={renderStatusCodesChart}
         />
         <ReportWidget
@@ -40,7 +50,7 @@ export const ApiOverviewReport: NextPageWithLayout = () => {
           className="col-span-4 col-start-1"
           title="Error Rate"
           description="Percentage of API 5XX and 4XX error responses."
-          data={errorRates[0].logData  || []}
+          data={errorRates[0].logData || []}
           renderer={renderErrorRateChart}
         />
         <ReportWidget
@@ -52,11 +62,32 @@ export const ApiOverviewReport: NextPageWithLayout = () => {
           data={requestPaths[0].logData || []}
           renderer={renderRequestsPathsTable}
         />
+
+        <h2>Bots</h2>
+
+        <ReportWidget
+          isLoading={isLoading}
+          params={userAgents[0].params}
+          className="col-span-4 col-start-1"
+          title="Top User Agents"
+          description="The types of user agents using the API and their organization source."
+          data={userAgents[0].logData || []}
+          renderer={renderUserAgents}
+        />
+        <ReportWidget
+          isLoading={isLoading}
+          params={botScores[0].params}
+          className="col-span-4 col-start-1"
+          title="Bot-like API Requests"
+          description="Suspicious bot-like requests, as flagged by Cloudflare"
+          data={botScores[0].logData || []}
+          renderer={renderBotScores}
+        />
       </div>
     </Layout>
   )
 }
 
-ApiOverviewReport.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+ApiReport.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
 
-export default observer(ApiOverviewReport)
+export default observer(ApiReport)
diff --git a/studio/tests/pages/projects/reports/product-reports.test.js b/studio/tests/pages/projects/reports/product-reports.test.js
index 885fcbe145a..a82267a2717 100644
--- a/studio/tests/pages/projects/reports/product-reports.test.js
+++ b/studio/tests/pages/projects/reports/product-reports.test.js
@@ -7,8 +7,7 @@ import { get, post } from 'lib/common/fetch'
 import { useRouter } from 'next/router'
 import { render } from '../../../helpers'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
-import { ApiOverviewReport } from 'pages/project/[ref]/reports/api'
-import { ApiBotsReport } from 'pages/project/[ref]/reports/api-bots'
+import { ApiReport } from 'pages/project/[ref]/reports/api'
 import { AuthReport } from 'pages/project/[ref]/reports/auth'
 
 beforeEach(() => {
@@ -25,8 +24,7 @@ beforeEach(() => {
 })
 
 describe.each([
-  { Page: ApiOverviewReport, contains: ['API Overview'] },
-  { Page: ApiBotsReport, contains: ['API Bots'] },
+  { Page: ApiReport, contains: ['API'] },
   { Page: AuthReport, contains: ['Auth'] },
 ])('$Page rendering', ({ Page, contains }) => {
   test(`contains ${contains}`, async () => {

From a66766ece2b204768fd0b4450f20d854d6739d37 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 17:59:32 +0800
Subject: [PATCH 188/215] fix: add db query timestamp filtering

---
 .../interfaces/Reports/Reports.constants.ts   | 17 +++++++-------
 .../interfaces/Reports/Reports.types.ts       | 23 +++++++++----------
 .../interfaces/Reports/Statistic.tsx          |  7 +++++-
 studio/components/ui/Charts/Sparkline.tsx     | 10 +++-----
 4 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 456c6c95a8d..90010822e2e 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -159,7 +159,7 @@ export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
     queries: {
       bannedUsers: {
         queryType: "db",
-        sql: `
+        sql: (_params)=> `
 select 
   count(distinct u.id) as count
 from auth.users u
@@ -169,25 +169,26 @@ limit 1
       },  
       unverifiedUsers: {
         queryType: "db",
-        sql: `
+        sql: (params)=> `
 select 
   date_trunc('day', u.created_at) as timestamp,
   count(distinct u.id) as count
 from auth.users u
-where u.confirmed_at is null
+where u.confirmed_at is null and '${params.iso_timestamp_start}' < u.created_at 
 group by timestamp
 order by timestamp desc
         `
       },  
       signUpProviders: {
         queryType: "db",
-        sql: `
+        sql: (params) => `
 select 
   sum(count(u.id)) over (order by date_trunc('day', u.created_at)) as count, 
   date_trunc('day', u.created_at) as timestamp, 
   i.provider as provider
 from auth.users u
 join auth.identities as i on u.id = i.user_id
+where date_trunc('day', u.created_at) > '${params.iso_timestamp_start}'
 group by timestamp, provider
 order by timestamp desc
         `
@@ -218,25 +219,25 @@ order by
       },
       cumulativeUsers: {
         queryType: 'db',
-        sql: `
+        sql: params => `
         
 select 
   date_trunc('day', u.created_at) as timestamp, 
   sum(count(u.id)) over (order by date_trunc('day', u.created_at)) as count
 from auth.users as u
-where u.confirmed_at is not null
+where u.confirmed_at is not null and date_trunc('day', u.created_at) > '${params.iso_timestamp_start}'
 group by timestamp
 order by timestamp desc
         `,
       },
       newUsers: {
         queryType: 'db',
-        sql: `
+        sql: params => `
 select 
 date_trunc('day', u.created_at) as timestamp,
 count(u.id) as count
 from auth.users as u
-where u.confirmed_at is not null
+where u.confirmed_at is not null and date_trunc('day', u.created_at) > '${params.iso_timestamp_start}'
 group by 
   timestamp
 order by
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index b13d36dd3ba..20c07dd463b 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -23,20 +23,19 @@ export interface DbQueryHandler {
 export type MetaQueryResponse = any & { error: ResponseError }
 
 export type BaseReportParams = typeof DEFAULT_QUERY_PARAMS & { sql?: string } & unknown
-
-export type VariableSql = string | ((params: BaseReportParams) => string)
-
-export type PresetSql = string | VariableSql
-
 export interface PresetConfig {
   title: string
-  queries: Record<
-    string,
-    {
-      sql: PresetSql
-      queryType: 'logs' | 'db'
-    }
-  >
+  queries: Record<string, DbQuery | LogsQuery>
+}
+
+interface DbQuery {
+  queryType: 'db'
+  sql: (params: BaseReportParams) => string
+}
+
+interface LogsQuery {
+  queryType: 'logs'
+  sql: string
 }
 export interface StatusCodesDatum {
   timestamp: number
diff --git a/studio/components/interfaces/Reports/Statistic.tsx b/studio/components/interfaces/Reports/Statistic.tsx
index e8f534ae003..3cc6cd8bdac 100644
--- a/studio/components/interfaces/Reports/Statistic.tsx
+++ b/studio/components/interfaces/Reports/Statistic.tsx
@@ -43,7 +43,12 @@ const Statistic: React.FC<Props> = ({
         </div>
       )}
       {showSparkline && (
-        <Sparkline data={sparklineData} xAxisKey={sparklineXAxis} yAxisKey={sparklineYAxis} size="small" />
+        <Sparkline
+          data={sparklineData}
+          xAxisKey={sparklineXAxis}
+          yAxisKey={sparklineYAxis}
+          size="small"
+        />
       )}
     </div>
   )
diff --git a/studio/components/ui/Charts/Sparkline.tsx b/studio/components/ui/Charts/Sparkline.tsx
index 855a9f86383..c6c2bf1079b 100644
--- a/studio/components/ui/Charts/Sparkline.tsx
+++ b/studio/components/ui/Charts/Sparkline.tsx
@@ -1,11 +1,7 @@
-import { useState } from 'react'
-import { LineChart, Bar, XAxis, Tooltip, Legend, Cell, TooltipProps, Line } from 'recharts'
-import ChartHeader from './ChartHeader'
-import { CHART_COLORS, STACK_COLORS, DateTimeFormats } from './Charts.constants'
+import { LineChart, XAxis, Line } from 'recharts'
+import { CHART_COLORS } from './Charts.constants'
 import { CommonChartProps } from './Charts.types'
-import { timestampFormatter, useChartSize, useStacked } from './Charts.utils'
-import { precisionFormatter } from './Charts.utils'
-import NoDataPlaceholder from './NoDataPlaceholder'
+import { useChartSize } from './Charts.utils'
 interface Props extends CommonChartProps<any> {
   xAxisKey: string
   yAxisKey: string

From 179402ef927dedc68f01a2fb3cb6d24d84327a19 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 16 Dec 2022 18:01:54 +0800
Subject: [PATCH 189/215] fix: remove unused file

---
 studio/components/ui/ProductMenu/ProductMenuGroup.tsx | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 studio/components/ui/ProductMenu/ProductMenuGroup.tsx

diff --git a/studio/components/ui/ProductMenu/ProductMenuGroup.tsx b/studio/components/ui/ProductMenu/ProductMenuGroup.tsx
deleted file mode 100644
index 96f4ea20ef0..00000000000
--- a/studio/components/ui/ProductMenu/ProductMenuGroup.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-const ProductMenuGroup = ()=>{
-    
-}
\ No newline at end of file

From d52154f68654673dfbf0c877c64ef438ea65fc81 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Wed, 21 Dec 2022 21:19:41 +0800
Subject: [PATCH 190/215] chore: fix failing typecheck

---
 studio/components/interfaces/Reports/Reports.types.ts | 6 +++---
 studio/hooks/analytics/useDbQuery.tsx                 | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index 20c07dd463b..0cc81dd470e 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -28,12 +28,12 @@ export interface PresetConfig {
   queries: Record<string, DbQuery | LogsQuery>
 }
 
-interface DbQuery {
+export interface DbQuery {
   queryType: 'db'
-  sql: (params: BaseReportParams) => string
+  sql: string | ((params: BaseReportParams) => string)
 }
 
-interface LogsQuery {
+export interface LogsQuery {
   queryType: 'logs'
   sql: string
 }
diff --git a/studio/hooks/analytics/useDbQuery.tsx b/studio/hooks/analytics/useDbQuery.tsx
index 45d9236d4f9..9c229fb7f83 100644
--- a/studio/hooks/analytics/useDbQuery.tsx
+++ b/studio/hooks/analytics/useDbQuery.tsx
@@ -4,12 +4,12 @@ import {
   DbQueryData,
   DbQueryHandler,
   MetaQueryResponse,
-  PresetSql,
+  DbQuery,
 } from 'components/interfaces/Reports/Reports.types'
 import { useStore } from 'hooks'
 import useSWR from 'swr'
 
-type UseDbQuery = (sql: PresetSql, params?: BaseReportParams) => [DbQueryData, DbQueryHandler]
+type UseDbQuery = (sql: DbQuery['sql'], params?: BaseReportParams) => [DbQueryData, DbQueryHandler]
 const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
   const { meta } = useStore()
 

From f674a35d3df5f494ca1fdccce4538c5a726cad3a Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Wed, 21 Dec 2022 23:04:21 +0800
Subject: [PATCH 191/215] fix: ui fixes for datepicker

---
 .../components/interfaces/Reports/Reports.constants.ts |  7 +++----
 studio/components/interfaces/Reports/Reports.utils.tsx | 10 ++++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 90010822e2e..fedef4cdd7e 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -6,13 +6,12 @@ export const LAYOUT_COLUMN_COUNT = 24
 
 export const REPORTS_DATEPICKER_HELPERS: DatetimeHelper[] = [
   {
-    text: 'Last 7 days',
-    calcFrom: () => dayjs().subtract(7, 'day').startOf('day').toISOString(),
+    text: 'Last day',
     calcTo: () => '',
-    default: true,
+    calcFrom: () => dayjs().subtract(1, 'day').startOf('day').toISOString(),
   },
   {
-    text: 'Last 14 days',
+    text: 'Last 7 days',
     calcFrom: () => dayjs().subtract(7, 'day').startOf('day').toISOString(),
     calcTo: () => '',
   },
diff --git a/studio/components/interfaces/Reports/Reports.utils.tsx b/studio/components/interfaces/Reports/Reports.utils.tsx
index 4d07a2686ee..41e0ee4d975 100644
--- a/studio/components/interfaces/Reports/Reports.utils.tsx
+++ b/studio/components/interfaces/Reports/Reports.utils.tsx
@@ -63,6 +63,12 @@ export const usePresetReport = (hooks: PresetHookResult[]) => {
     })
   }
   const isLoading = data.map((datum) => datum.isLoading).some((v) => v)
+  const helpers = REPORTS_DATEPICKER_HELPERS.map((helper, index) => {
+    if (tier?.key === 'FREE' && index === 0) return { ...helper, default: true }
+    if (tier?.key === 'PRO' && index === 1) return { ...helper, default: true }
+    return { ...helper, default: false }
+  })
+
   const Layout: React.FC<{ title: string }> = ({ title, children }) => (
     <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
       <h1 className="text-2xl text-scale-1200">{title}</h1>
@@ -70,8 +76,8 @@ export const usePresetReport = (hooks: PresetHookResult[]) => {
         <DatePickers
           onChange={handleDatepickerChange}
           to={data[0]?.params?.iso_timestamp_end || ''}
-          from={data[0]?.params?.iso_timestamp_end || ''}
-          helpers={REPORTS_DATEPICKER_HELPERS}
+          from={data[0]?.params?.iso_timestamp_start || ''}
+          helpers={helpers}
         />
         <Button
           type="default"

From d4697f4c5505c41cf75908e7681f7dda873ddac4 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Thu, 22 Dec 2022 01:50:54 +0800
Subject: [PATCH 192/215] feat: revert reports default date range

---
 .../interfaces/Reports/Reports.constants.ts   | 47 +++++++++----------
 .../interfaces/Reports/Reports.utils.tsx      |  7 +--
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index fedef4cdd7e..3713345e5f5 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -5,26 +5,23 @@ import { PresetConfig, Presets } from './Reports.types'
 export const LAYOUT_COLUMN_COUNT = 24
 
 export const REPORTS_DATEPICKER_HELPERS: DatetimeHelper[] = [
-  {
-    text: 'Last day',
-    calcTo: () => '',
-    calcFrom: () => dayjs().subtract(1, 'day').startOf('day').toISOString(),
-  },
   {
     text: 'Last 7 days',
     calcFrom: () => dayjs().subtract(7, 'day').startOf('day').toISOString(),
     calcTo: () => '',
+    default: true,
+  },
+  {
+    text: 'Last 14 days',
+    calcFrom: () => dayjs().subtract(7, 'day').startOf('day').toISOString(),
+    calcTo: () => '',
+    default: true,
   },
   {
     text: 'Last 30 days',
     calcFrom: () => dayjs().subtract(30, 'day').startOf('day').toISOString(),
     calcTo: () => '',
   },
-  {
-    text: 'Last 90 days',
-    calcFrom: () => dayjs().subtract(90, 'day').startOf('day').toISOString(),
-    calcTo: () => '',
-  },
 ]
 
 export const DEFAULT_QUERY_PARAMS = {
@@ -157,18 +154,18 @@ export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
     title: 'Auth',
     queries: {
       bannedUsers: {
-        queryType: "db",
-        sql: (_params)=> `
+        queryType: 'db',
+        sql: (_params) => `
 select 
   count(distinct u.id) as count
 from auth.users u
 where u.banned_until is not null and u.banned_until > now()
 limit 1
-        `
-      },  
+        `,
+      },
       unverifiedUsers: {
-        queryType: "db",
-        sql: (params)=> `
+        queryType: 'db',
+        sql: (params) => `
 select 
   date_trunc('day', u.created_at) as timestamp,
   count(distinct u.id) as count
@@ -176,10 +173,10 @@ from auth.users u
 where u.confirmed_at is null and '${params.iso_timestamp_start}' < u.created_at 
 group by timestamp
 order by timestamp desc
-        `
-      },  
+        `,
+      },
       signUpProviders: {
-        queryType: "db",
+        queryType: 'db',
         sql: (params) => `
 select 
   sum(count(u.id)) over (order by date_trunc('day', u.created_at)) as count, 
@@ -190,17 +187,17 @@ join auth.identities as i on u.id = i.user_id
 where date_trunc('day', u.created_at) > '${params.iso_timestamp_start}'
 group by timestamp, provider
 order by timestamp desc
-        `
-      },  
+        `,
+      },
       failedMigrations: {
-        queryType: "logs",
+        queryType: 'logs',
         sql: `
 select count(f.id)
 from auth_logs
 where json_value(f.event_message, "$.level") = "fatal"
   and regexp_contains(f.event_message, "error executing migrations") 
 limit 1
-`
+`,
       },
       dailyActiveUsers: {
         queryType: 'logs',
@@ -218,7 +215,7 @@ order by
       },
       cumulativeUsers: {
         queryType: 'db',
-        sql: params => `
+        sql: (params) => `
         
 select 
   date_trunc('day', u.created_at) as timestamp, 
@@ -231,7 +228,7 @@ order by timestamp desc
       },
       newUsers: {
         queryType: 'db',
-        sql: params => `
+        sql: (params) => `
 select 
 date_trunc('day', u.created_at) as timestamp,
 count(u.id) as count
diff --git a/studio/components/interfaces/Reports/Reports.utils.tsx b/studio/components/interfaces/Reports/Reports.utils.tsx
index 41e0ee4d975..f0cf2d3e2c4 100644
--- a/studio/components/interfaces/Reports/Reports.utils.tsx
+++ b/studio/components/interfaces/Reports/Reports.utils.tsx
@@ -63,11 +63,6 @@ export const usePresetReport = (hooks: PresetHookResult[]) => {
     })
   }
   const isLoading = data.map((datum) => datum.isLoading).some((v) => v)
-  const helpers = REPORTS_DATEPICKER_HELPERS.map((helper, index) => {
-    if (tier?.key === 'FREE' && index === 0) return { ...helper, default: true }
-    if (tier?.key === 'PRO' && index === 1) return { ...helper, default: true }
-    return { ...helper, default: false }
-  })
 
   const Layout: React.FC<{ title: string }> = ({ title, children }) => (
     <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
@@ -77,7 +72,7 @@ export const usePresetReport = (hooks: PresetHookResult[]) => {
           onChange={handleDatepickerChange}
           to={data[0]?.params?.iso_timestamp_end || ''}
           from={data[0]?.params?.iso_timestamp_start || ''}
-          helpers={helpers}
+          helpers={REPORTS_DATEPICKER_HELPERS}
         />
         <Button
           type="default"

From f15e8604283d932e58e48309743d629831f6246e Mon Sep 17 00:00:00 2001
From: Francisco Mazzoni <francisco@supabase.io>
Date: Thu, 22 Dec 2022 12:31:16 -0300
Subject: [PATCH 193/215] fix badges

---
 apps/www/pages/launch-week/index.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index 3fc5fb1d0ff..c6e3b798330 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -330,7 +330,7 @@ export default function launchweek() {
                         >
                           <div className="flex items-center relative z-10 justify-between flex-col-reverse lg:flex-row lg:justify-start gap-2 text-black dark:text-white">
                             <span>{day1.description}</span>
-                            <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#DFFFF1] dark:border-[#DFFFF1]">
+                            <Badge className="!bg-transparent h-fit lg:ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#DFFFF1] dark:border-[#DFFFF1]">
                               Redesigned
                             </Badge>
                           </div>
@@ -375,7 +375,7 @@ export default function launchweek() {
                           ></div>
                           <div className="flex items-center justify-between flex-col-reverse lg:flex-row lg:justify-start gap-2 text-black dark:text-white">
                             <div>{day2.steps[0].title}</div>
-                            <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                            <Badge className="!bg-transparent h-fit lg:ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                               New
                             </Badge>
                           </div>
@@ -454,7 +454,7 @@ export default function launchweek() {
 
                           <div className="flex items-center justify-between flex-col-reverse lg:flex-row lg:justify-start text-black dark:text-white">
                             <span>{day3.steps[0].title}</span>
-                            <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                            <Badge className="!bg-transparent h-fit lg:ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                               Updated
                             </Badge>
                           </div>
@@ -516,7 +516,7 @@ export default function launchweek() {
                           </div>
                           <div className="flex items-center flex-col-reverse lg:flex-row text-black dark:text-white">
                             <span>{day4.steps[0].title}</span>
-                            <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                            <Badge className="!bg-transparent h-fit lg:ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                               New
                             </Badge>
                           </div>
@@ -585,7 +585,7 @@ export default function launchweek() {
                               <span className="text-black dark:text-white">
                                 {day5.steps[0].title}
                               </span>
-                              <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                              <Badge className="!bg-transparent h-fit lg:ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                                 New
                               </Badge>
                             </div>
@@ -778,7 +778,7 @@ export default function launchweek() {
                               />
                             </div>
                             <div className="flex flex-col items-center gap-2 min-w-[300px]">
-                              <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                              <Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                                 Updated
                               </Badge>
                               <span className="text-black dark:text-white text-center">
@@ -823,7 +823,7 @@ export default function launchweek() {
                               />
                             </div>
                             <div className="flex flex-col items-center gap-2 min-w-[300px]">
-                              <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                              <Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                                 New
                               </Badge>
                               <span className="text-black dark:text-white text-center">
@@ -868,7 +868,7 @@ export default function launchweek() {
                               />
                             </div>
                             <div className="flex flex-col items-center gap-2 min-w-[300px]">
-                              <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                              <Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                                 New
                               </Badge>
                               <span className="text-black dark:text-white text-center">
@@ -913,7 +913,7 @@ export default function launchweek() {
                               />
                             </div>
                             <div className="flex flex-col items-center gap-2 min-w-[300px]">
-                              <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                              <Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                                 Experimental
                               </Badge>
                               <span className="text-black dark:text-white text-center">
@@ -958,7 +958,7 @@ export default function launchweek() {
                               />
                             </div>
                             <div className="flex flex-col items-center gap-2 min-w-[300px]">
-                              <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                              <Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                                 Upgrade
                               </Badge>
                               <span className="text-black dark:text-white text-center">
@@ -1003,7 +1003,7 @@ export default function launchweek() {
                               />
                             </div>
                             <div className="flex flex-col items-center gap-2 min-w-[300px]">
-                              <Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
+                              <Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
                                 Upgrade
                               </Badge>
                               <span className="text-black dark:text-white text-center">
@@ -1029,7 +1029,9 @@ export default function launchweek() {
         <SectionContainer className="!pt-0 sm:!pb-20 !pb-40"></SectionContainer>
         <SectionContainer className="!pt-0 sm:!pb-20 !pb-40">
           <div className="flex flex-col mb-16">
-            <Badge className="mb-4 w-fit bg-gradient-to-r from-[#0E3737C2] to-[#67947F] hover:to-[#39617D94] dark:hover:to-[#A6FFD899] text-whiteA-1200 dark:text-black font-normal !py-1 !px-4 dark:from-white dark:via-white dark:to-[#1a7a4c75] bg-slate-1200">
+            <Badge
+              className={`w-fit !bg-transparent !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] dark:from-white dark:to-[#DFFFF1] h-fit relative mb-4 after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#b6b6b6] dark:text-transparent dark:!border-[#163837] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]`}
+            >
               Submissions Closed
             </Badge>
             <h2 className="text-3xl text-black dark:text-white mb-2">Launch Week Hackathon</h2>

From f3c3d566fc774ce33d9f1ceb1cc2446a32bfab43 Mon Sep 17 00:00:00 2001
From: Francisco Mazzoni <francisco@supabase.io>
Date: Thu, 22 Dec 2022 13:20:51 -0300
Subject: [PATCH 194/215] small badge fix

---
 apps/www/pages/launch-week/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index c6e3b798330..10cddcf4113 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -102,7 +102,7 @@ export default function launchweek() {
             <Badge
               className={`!bg-transparent !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] !border-[#4d898c] dark:from-white dark:to-[#DFFFF1] dark:!border-[#DFFFF1] h-fit relative ${
                 shipped
-                  ? 'after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#b6b6b6] dark:text-transparent dark:!border-[#163837] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]'
+                  ? 'after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#FFFFFF] dark:text-transparent dark:!border-[#163837] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]'
                   : ''
               }`}
             >
@@ -1030,7 +1030,7 @@ export default function launchweek() {
         <SectionContainer className="!pt-0 sm:!pb-20 !pb-40">
           <div className="flex flex-col mb-16">
             <Badge
-              className={`w-fit !bg-transparent !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] dark:from-white dark:to-[#DFFFF1] h-fit relative mb-4 after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#b6b6b6] dark:text-transparent dark:!border-[#163837] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]`}
+              className={`w-fit !bg-transparent !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] dark:from-white dark:to-[#DFFFF1] h-fit relative mb-4 after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#FFFFFF] dark:text-transparent dark:!border-[#163837] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]`}
             >
               Submissions Closed
             </Badge>
@@ -1217,7 +1217,7 @@ export default function launchweek() {
             <Badge
               className={`!bg-transparent !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] !border-[#4d898c] dark:from-white dark:to-[#DFFFF1] dark:!border-[#DFFFF1] h-fit relative mb-4 ${
                 true
-                  ? 'after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#b6b6b6] dark:text-transparent dark:!border-[#163837] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]'
+                  ? 'after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#FFFFFF] dark:text-transparent dark:!border-[#163837] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]'
                   : ''
               }`}
             >

From 2b27b688e6ca0a2d4028eb602f8da646f4973baa Mon Sep 17 00:00:00 2001
From: Chensokheng <52232579+Chensokheng@users.noreply.github.com>
Date: Fri, 23 Dec 2022 00:01:11 +0700
Subject: [PATCH 195/215] fix(docs): change navbar color to dark on dark mode

---
 apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx | 1 +
 apps/docs/layouts/SiteLayout.tsx                                | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index d5a706d6cb2..b1d344b081d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -42,6 +42,7 @@ const TopNavBarRef: FC = () => {
 
     const key = localStorage.getItem('supabaseDarkMode')
     document.documentElement.className = key === 'true' ? 'dark' : ''
+    document.documentElement.style.colorScheme = key === 'true' ? 'dark' : ''
   }
 
   const onSelectVersion = (version: string) => {
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 9aa8c37d9c0..eb017378efd 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -294,8 +294,10 @@ const SiteLayout = ({ children }) => {
     if (!key) {
       // Default to dark mode if no preference config
       document.documentElement.className = 'dark'
+      document.documentElement.style.colorScheme = 'dark'
     } else {
       document.documentElement.className = key === 'true' ? 'dark' : ''
+      document.documentElement.style.colorScheme = key === 'true' ? 'dark' : ''
     }
   }, [])
 

From b2d8e8eb4eebc6878349e9ba2d23e7fe4a49f0ac Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 10:27:34 -0800
Subject: [PATCH 196/215] Update more links

---
 .../resources/supabase-cli/local-development.mdx       |  2 +-
 apps/www/_blog/2021-11-29-community-day-lw3.mdx        |  2 +-
 .../2022-04-20-partner-gallery-works-with-supabase.mdx |  2 +-
 ...ck-consolidate-slackbot-to-consolidate-messages.mdx | 10 +++-------
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/docs/pages/guides/resources/supabase-cli/local-development.mdx b/apps/docs/pages/guides/resources/supabase-cli/local-development.mdx
index 3ff1cb1c82a..90490ae4e55 100644
--- a/apps/docs/pages/guides/resources/supabase-cli/local-development.mdx
+++ b/apps/docs/pages/guides/resources/supabase-cli/local-development.mdx
@@ -54,7 +54,7 @@ git init
 supabase init
 ```
 
-Make sure Docker is running. The [start](/docs/reference/cli/usage#supabase-start) command uses Docker to start the Supabase [services](/docs/architecture).
+Make sure Docker is running. The [start](/docs/reference/cli/usage#supabase-start) command uses Docker to start the Supabase [services](/docs/guides/getting-started/architecture).
 This command may take a while to run if this is the first time using the CLI.
 
 ```bash
diff --git a/apps/www/_blog/2021-11-29-community-day-lw3.mdx b/apps/www/_blog/2021-11-29-community-day-lw3.mdx
index 4ac1ea6ea05..801bfc24217 100644
--- a/apps/www/_blog/2021-11-29-community-day-lw3.mdx
+++ b/apps/www/_blog/2021-11-29-community-day-lw3.mdx
@@ -22,7 +22,7 @@ So let's get cracking, we've got a lot to cover. 🚀
 
 ## Open Source Spotlight: Kong API Gateway
 
-Supabase provides a whole bunch of features that are made up of a [collection of open-source tools](/docs/architecture). To orchestrate these different services and functionalities we use the [Kong API Gateway](https://github.com/Kong/kong).
+Supabase provides a whole bunch of features that are made up of a [collection of open-source tools](/docs/guides/getting-started/architecture). To orchestrate these different services and functionalities we use the [Kong API Gateway](https://github.com/Kong/kong).
 
 As a user of our hosted offering you don't really need to know all this, but we love showcasing the amazing open-source tools that we work with, and so we've invited [Vik Gamov](https://twitter.com/gAmUssA) to give you a little intro to [Kong](https://github.com/Kong/kong):
 
diff --git a/apps/www/_blog/2022-04-20-partner-gallery-works-with-supabase.mdx b/apps/www/_blog/2022-04-20-partner-gallery-works-with-supabase.mdx
index eaea01bbd94..aaf5e4d21b0 100644
--- a/apps/www/_blog/2022-04-20-partner-gallery-works-with-supabase.mdx
+++ b/apps/www/_blog/2022-04-20-partner-gallery-works-with-supabase.mdx
@@ -19,7 +19,7 @@ To keep track of all the great tools and people that “Work With Supabase”, w
 
 ![partner-gallery-screenshot.png](/images/blog/partner-gallery/partner-gallery-screenshot.png)
 
-As with anything at Supabase, the Partner Gallery is built on top of the [Supabase stack](/docs/architecture) and is, of course, open-source. If you’re looking to build a partner gallery yourself, feel free to use our template as a start: [github.com/supabase-community/partner-gallery-example](https://github.com/supabase-community/partner-gallery-example). It’s packed with goodies like [Postgres Full Text Search](/docs/guides/database/full-text-search), `next-image` with Supabase Storage, and sending emails based on an insert trigger with Supabase Edge Functions.
+As with anything at Supabase, the Partner Gallery is built on top of the [Supabase stack](/docs/guides/getting-started/architecture) and is, of course, open-source. If you’re looking to build a partner gallery yourself, feel free to use our template as a start: [github.com/supabase-community/partner-gallery-example](https://github.com/supabase-community/partner-gallery-example). It’s packed with goodies like [Postgres Full Text Search](/docs/guides/database/full-text-search), `next-image` with Supabase Storage, and sending emails based on an insert trigger with Supabase Edge Functions.
 
 # Partner showcase - new integrations and expert services
 
diff --git a/apps/www/_blog/2022-08-09-slack-consolidate-slackbot-to-consolidate-messages.mdx b/apps/www/_blog/2022-08-09-slack-consolidate-slackbot-to-consolidate-messages.mdx
index 2172b0330a7..7581b57e33a 100644
--- a/apps/www/_blog/2022-08-09-slack-consolidate-slackbot-to-consolidate-messages.mdx
+++ b/apps/www/_blog/2022-08-09-slack-consolidate-slackbot-to-consolidate-messages.mdx
@@ -13,7 +13,7 @@ date: '2022-08-09'
 toc_depth: 3
 ---
 
-Supabase is a platform-as-a-service built on top of PostgreSQL and [many other amazing open-source tools](https://supabase.com/docs/architecture). It’s a fantastic option to create data-intensive apps and tooling. Taking advantage of the community-made [Python SDK](https://github.com/supabase-community/supabase-py) and [Slack's Python SDK](https://slack.dev/python-slack-sdk/), you can automate tasks and build apps for several use cases.
+Supabase is a platform-as-a-service built on top of PostgreSQL and [many other amazing open-source tools](https://supabase.com/docs/guides/getting-started/architecture). It’s a fantastic option to create data-intensive apps and tooling. Taking advantage of the community-made [Python SDK](https://github.com/supabase-community/supabase-py) and [Slack's Python SDK](https://slack.dev/python-slack-sdk/), you can automate tasks and build apps for several use cases.
 
 ## Prerequisites
 
@@ -161,9 +161,9 @@ Slack links have the following format:
   https://<span className="text-scale-1200">ORGANIZATION</span>.slack.com/archives/
   <span className="text-scale-1200">channel_id</span>/p<span className="text-scale-1200">message_id</span>
 </span>
-<br/>
+<br />
 <span style={{ color: 'maroon' }}>Organization: subdomain used in Slack</span>
-<br/>
+<br />
 <span style={{ color: 'DarkGreen' }}>Channel ID</span>: It is the string that you'll need to enter
 in slack channels as the channel id e.g C0000ABC02DE
 
@@ -418,7 +418,3 @@ If you have any questions please reach out via [Twitter](https://twitter.com/sup
 - [Python data loading with Supabase](https://supabase.com/blog/loading-data-supabase-python)
 - [Visualizing Supabase Data using Metabase](https://supabase.com/blog/visualizing-supabase-data-using-metabase)
 - [Supabase-py (Database) on Replit](https://replit.com/@Supabase/Supabase-py-Database?v=1)
-
-
-
-

From dc16f8ac8ef67180c42c8f556c7e775bcbee6ae4 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 16:14:22 -0800
Subject: [PATCH 197/215] Add redirect for Zoom auth guide

---
 apps/www/lib/redirects.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index ff18f604298..cd0b30a8080 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -1707,6 +1707,11 @@ module.exports = [
     source: '/docs/guides/auth/auth-workos',
     destination: '/docs/guides/auth/social-login/auth-workos',
   },
+  {
+    permanent: true,
+    source: '/docs/guides/auth/auth-zoom',
+    destination: '/docs/guides/auth/social-login/auth-zoom',
+  },
   {
     permanent: true,
     source: '/docs/guides/database',

From cdde6b1bc3f261e5ab6d12ec23f77eb8fdcbeb9d Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 16:16:23 -0800
Subject: [PATCH 198/215] Fix broken link to estuary.dev

---
 .../pages/guides/integrations/estuary.mdx     | 68 ++++++++++---------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/apps/docs/pages/guides/integrations/estuary.mdx b/apps/docs/pages/guides/integrations/estuary.mdx
index 549f6cbc549..e8287eaff62 100644
--- a/apps/docs/pages/guides/integrations/estuary.mdx
+++ b/apps/docs/pages/guides/integrations/estuary.mdx
@@ -3,62 +3,64 @@ import Layout from '~/layouts/DefaultGuideLayout'
 export const meta = {
   id: 'estuary',
   title: 'Estuary',
-  description: 'Create a real-time data pipeline connecting Firestore and Supabase to make migration simple.',
+  description:
+    'Create a real-time data pipeline connecting Firestore and Supabase to make migration simple.',
 }
 
 Estuary Flow is a platform for creating [real-time data pipelines at scale](https://www.estuary.dev/).
-It combines the intuitive interface of an ELT service with an event-driven runtime and a variety of open-source connectors. 
+It combines the intuitive interface of an ELT service with an event-driven runtime and a variety of open-source connectors.
 
-You can use Flow to migrate your data from Firestore to the Postgres database in your Supabase project. 
+You can use Flow to migrate your data from Firestore to the Postgres database in your Supabase project.
 You do this by building a real-time pipeline that captures data from Firestore and materializes (loads) that data to Postgres.
-Once created, the pipeline backfills all your historical data from Firestore and continues to process new data events in real time. 
+Once created, the pipeline backfills all your historical data from Firestore and continues to process new data events in real time.
 
 ## Prerequisites
 
 Before you begin, you'll need:
 
-* An [Estuary account](go.estuary.dev/sign-up). 
+- An [Estuary account](https://go.estuary.dev/sign-up).
 
-* For your Firestore database:
-   * A Google service account with read access to your Firestore database, via [roles/datastore.viewer](https://cloud.google.com/datastore/docs/access/iam). You can assign this role when you [create the service account](https://cloud.google.com/iam/docs/creating-managing-service-accounts#creating), or [add it to an existing service account](https://cloud.google.com/iam/docs/granting-changing-revoking-access#single-role).
-   * A generated [JSON service account key](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#creating) for the service account.
+- For your Firestore database:
 
-* A Supabase project
+  - A Google service account with read access to your Firestore database, via [roles/datastore.viewer](https://cloud.google.com/datastore/docs/access/iam). You can assign this role when you [create the service account](https://cloud.google.com/iam/docs/creating-managing-service-accounts#creating), or [add it to an existing service account](https://cloud.google.com/iam/docs/granting-changing-revoking-access#single-role).
+  - A generated [JSON service account key](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#creating) for the service account.
+
+- A Supabase project
 
 ## Step 1: Capture your Firestore data
 
-You'll start by creating a **capture**, a task in Flow that connects to your data source system: in this case, Firestore. This process will create one or more data **collections**, backed by a real-time data lake. 
+You'll start by creating a **capture**, a task in Flow that connects to your data source system: in this case, Firestore. This process will create one or more data **collections**, backed by a real-time data lake.
 
 1. Go to the Flow web application at [dashboard.estuary.dev](http://dashboard.estuary.dev) and sign in using the credentials provided by your Estuary account manager.
 
 2. Click the **Captures** tab and choose **New Capture**.
 
-3. Locate and select the **Google Firestore** card. 
+3. Locate and select the **Google Firestore** card.
 
    A form appears with the properties required for a Firestore capture.
 
-4. Set a name for your capture. 
- 
+4. Set a name for your capture.
+
    Click inside the **Name** field to generate a drop-down menu of available **prefixes** and select one (likely, this will be the name of your organization). Append a unique capture name after the `/` to create the full name, for example, `acmeCo/myFirestoreCapture`.
 
 5. Fill out the required properties for Firestore.
 
-   * **Database**: Flow can autodetect the database name, but you may optionally specify it here. This is helpful if the service account used has access to multiple Firebase projects. Your database name usually follows the format `projects/$PROJECTID/databases/(default)`.
-   * **Credentials**: The JSON service account key created per the prerequisites.
+   - **Database**: Flow can autodetect the database name, but you may optionally specify it here. This is helpful if the service account used has access to multiple Firebase projects. Your database name usually follows the format `projects/$PROJECTID/databases/(default)`.
+   - **Credentials**: The JSON service account key created per the prerequisites.
 
 6. Click **Discover Endpoint**.
 
-  Flow uses the provided configuration to initiate a connection with Firestore. It generates a capture specification and details of the collections that it will create, once published.
+Flow uses the provided configuration to initiate a connection with Firestore. It generates a capture specification and details of the collections that it will create, once published.
 
-7. Use the **Specification Editor** to view the [JSON schemas](https://docs.estuary.dev/concepts/schemas/) for each collection and make sure they are formatted correctly for your needs. If they're not, you can edit them. 
+7. Use the **Specification Editor** to view the [JSON schemas](https://docs.estuary.dev/concepts/schemas/) for each collection and make sure they are formatted correctly for your needs. If they're not, you can edit them.
 
 8. Click **Save and publish**.
 
-  You'll see a notification when the capture publishes successfully.
+You'll see a notification when the capture publishes successfully.
 
-  The data currently in your Firestore database has been captured, and future updates to it will be captured continuously.
+The data currently in your Firestore database has been captured, and future updates to it will be captured continuously.
 
-  Click **Materialize Collections** to continue.
+Click **Materialize Collections** to continue.
 
 ## Step 2: Materialize your collections to Postgres
 
@@ -66,35 +68,35 @@ Next, you'll add a Postgres materialization to connect the captured collections
 
 1. On the **Create Materialization** page, search for and select the **PostgreSQL** tile.
 
-  A form appears with the properties required for a Postgres materialization.
+A form appears with the properties required for a Postgres materialization.
 
 2. Choose a unique name for your materialization like you did when naming your capture; for example, `acmeCo/mySupabaseMaterialization`.
 
 3. Fill out the required properties for PostgreSQL. You can find most of these in Supabase by going to the **Settings** section and clicking **Database**.
 
-   * **Address**: Format at `<host>:<port>`.
-   * **User**: Usually, this is `postgres`.
-   * **Password**: The password you set when you created your Supabase project.
+   - **Address**: Format at `<host>:<port>`.
+   - **User**: Usually, this is `postgres`.
+   - **Password**: The password you set when you created your Supabase project.
 
 4. Scroll down to view the **Collection Selector** and fill in the **Table** field for each collection.
 
-  The collections you just created have already been selected, but you must provide names for the tables to which they'll be materialized.
+The collections you just created have already been selected, but you must provide names for the tables to which they'll be materialized.
 
-5. Click **Discover Endpoint**.  
-  
-  Flow uses the provided configuration to initiate a connection to your Supabase Postgres database and generate a specification.
+5. Click **Discover Endpoint**.
 
-6. Click **Save and Publish**. You'll see a notification when the full materialization publishes successfully.  
+Flow uses the provided configuration to initiate a connection to your Supabase Postgres database and generate a specification.
 
-Your Firestore collections are copied to tables in Supabase. As long as you leave the capture and materialation running, any changes to the Firestore data will be reflected in Supabase in milliseconds. 
+6. Click **Save and Publish**. You'll see a notification when the full materialization publishes successfully.
+
+Your Firestore collections are copied to tables in Supabase. As long as you leave the capture and materialation running, any changes to the Firestore data will be reflected in Supabase in milliseconds.
 
 ## Resources
 
 For more information, visit the [Flow docs](https://docs.estuary.dev/). In particular:
 
-   * [Guide to create a Data Flow](https://docs.estuary.dev/guides/create-dataflow/)
-   * [Firestore capture connector](https://docs.estuary.dev/reference/Connectors/capture-connectors/google-firestore/)
-   * [Postgres materializaiton connector](https://docs.estuary.dev/reference/Connectors/materialization-connectors/PostgreSQL/)
+- [Guide to create a Data Flow](https://docs.estuary.dev/guides/create-dataflow/)
+- [Firestore capture connector](https://docs.estuary.dev/reference/Connectors/capture-connectors/google-firestore/)
+- [Postgres materializaiton connector](https://docs.estuary.dev/reference/Connectors/materialization-connectors/PostgreSQL/)
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 

From d22b938755d59382485462708a1d5e6815fe450c Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 16:19:10 -0800
Subject: [PATCH 199/215] Fix link to access control doc

---
 apps/docs/pages/guides/platform/network-restrictions.mdx | 2 +-
 apps/www/lib/redirects.js                                | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/docs/pages/guides/platform/network-restrictions.mdx b/apps/docs/pages/guides/platform/network-restrictions.mdx
index c2286c6a4f5..ce2f320a023 100644
--- a/apps/docs/pages/guides/platform/network-restrictions.mdx
+++ b/apps/docs/pages/guides/platform/network-restrictions.mdx
@@ -20,7 +20,7 @@ To get started:
 
 1. [Install](/docs/guides/cli) the Supabase CLI 1.22.0+.
 1. [Log in](/docs/guides/cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI.
-1. Ensure that you have [Owner or Admin permissions](/docs/guides/hosting/platform/access-control#manage-team-members) for the project that you are enabling network restrictions.
+1. Ensure that you have [Owner or Admin permissions](/docs/guides/platform/access-control#manage-team-members) for the project that you are enabling network restrictions.
 
 ## Check restrictions
 
diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index cd0b30a8080..56951babe70 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -535,12 +535,16 @@ module.exports = [
     source: '/docs/reference/postgres/publications',
     destination: '/docs/guides/database/replication',
   },
-
   {
     permanent: true,
     source: '/docs/guides/hosting/platform',
     destination: '/docs/guides/platform',
   },
+  {
+    permanent: true,
+    source: '/docs/guides/hosting/platform/access-control',
+    destination: '/docs/guides/platform/access-control',
+  },
   {
     permanent: true,
     source: '/docs/guides/self-hosting/overview',

From 60cf5c30ff6075924de9090e205f8db9b1fc1915 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 16:22:47 -0800
Subject: [PATCH 200/215] Fix Docker link

---
 apps/docs/pages/guides/self-hosting.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/self-hosting.mdx b/apps/docs/pages/guides/self-hosting.mdx
index 3092dd9cf45..cdd7b69cc57 100644
--- a/apps/docs/pages/guides/self-hosting.mdx
+++ b/apps/docs/pages/guides/self-hosting.mdx
@@ -72,7 +72,7 @@ For working with JWT and Auth functions.
 
 Supabase creates several default roles in your Postgres database. To restore defaults at any time you can run the commands inside the
 [schema initialization scripts](https://github.com/supabase/postgres/tree/develop/migrations/db/init-scripts). Remember to change your
-[role passwords](./docker#securing-your-setup) before deploying to production environments.
+[role passwords](/docs/guides/self-hosting/docker#securing-your-setup) before deploying to production environments.
 
 ##### `postgres`
 

From 20285a34d9232c17a5dba8fe6ac08b328c77295c Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 16:29:57 -0800
Subject: [PATCH 201/215] Fix link to Chinese translated README

---
 apps/www/_blog/2021-05-03-supabase-beta-april-2021.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/_blog/2021-05-03-supabase-beta-april-2021.mdx b/apps/www/_blog/2021-05-03-supabase-beta-april-2021.mdx
index 7575e01d9b6..e7d3215ca92 100644
--- a/apps/www/_blog/2021-05-03-supabase-beta-april-2021.mdx
+++ b/apps/www/_blog/2021-05-03-supabase-beta-april-2021.mdx
@@ -49,7 +49,7 @@ So today we're shipping Light Mode. Access it in the settings of your [Dashboard
 With the help of the community, we [started internationalizing](https://github.com/supabase/supabase/issues/1341) our main repository:
 
 - [Arabic | العربية](https://github.com/supabase/supabase/blob/master/i18n/README.ar.md)
-- [Chinese / 中文](https://github.com/supabase/supabase/blob/master/i18n/README.cn.md)
+- [Chinese / 中文](https://github.com/supabase/supabase/blob/master/i18n/README.zh-cn.md)
 - [Dutch / Nederlands](https://github.com/supabase/supabase/blob/master/i18n/README.nl.md)
 - [English](https://github.com/supabase/supabase)
 - [French / Français](https://github.com/supabase/supabase/blob/master/i18n/README.fr.md)

From fa6ed5fd71ef400d0607f2ad21cdcc750257afb2 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 16:42:28 -0800
Subject: [PATCH 202/215] Fix links to weweb docs

---
 apps/docs/pages/guides/integrations/weweb.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/docs/pages/guides/integrations/weweb.mdx b/apps/docs/pages/guides/integrations/weweb.mdx
index c65a695400e..85809a457a9 100644
--- a/apps/docs/pages/guides/integrations/weweb.mdx
+++ b/apps/docs/pages/guides/integrations/weweb.mdx
@@ -103,7 +103,7 @@ If we only ask for the data from the `location` field of the `vehicles` table, S
 
 Assuming you were able to fetch data from Supabase in a WeWeb Collection, you'll be able to bind the data from that Collection on your WeWeb pages.
 
-In the example below, we chose to display the car model and mileage in the [Data Grid element](https://docs.weweb.io/data-grid/) that comes out-of-the-box in WeWeb:
+In the example below, we chose to display the car model and mileage in the [Data Grid element](https://docs.weweb.io/add-elements/elements/data-grid.html) that comes out-of-the-box in WeWeb:
 
 ![](https://weweb-changelog.ghost.io/content/images/2022/10/CleanShot-2022-10-21-at-12.31.05@2x.png)
 
@@ -111,7 +111,7 @@ We chose this element because it includes a built-in inline editing mode we'll w
 
 #### 🔥 Pro Tip 🔥
 
-> In WeWeb, you can [bind arrays of data to any Container](https://docs.weweb.io/display-collection-list/). Just bear in mind that the first child of the Container you bind the Collection to will be the repeated item. With that in mind, you might want the first child Element to be another Container with a number of items inside like a title, description, button or image.
+> In WeWeb, you can [bind arrays of data to any Container](https://docs.weweb.io/binding-filtering/display-data.html). Just bear in mind that the first child of the Container you bind the Collection to will be the repeated item. With that in mind, you might want the first child Element to be another Container with a number of items inside like a title, description, button or image.
 
 ## Step 4: Update a record in Supabase
 

From 254f4d4621b2c54a3d6d3a55fca37d73f10c40fe Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 16:45:20 -0800
Subject: [PATCH 203/215] Fix link to Snaplet docs

---
 apps/docs/pages/guides/integrations/snaplet.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/integrations/snaplet.mdx b/apps/docs/pages/guides/integrations/snaplet.mdx
index 6f541f8253b..151b6627035 100644
--- a/apps/docs/pages/guides/integrations/snaplet.mdx
+++ b/apps/docs/pages/guides/integrations/snaplet.mdx
@@ -51,7 +51,7 @@ The password is the same password you used when creating the Supabase project.
 
 ![supabase-connection-db-info](/docs/img/guides/integrations/snaplet/supabase-connection-db-info.png)
 
-You’ll have to confirm providing Snaplet access to your database. Snaplet will prompt you to only provide `read-only` access to your database. Snaplet has a guide in their documentation on how to do so [here](https://docs.snaplet.dev/postgresql/create-read-only-role).
+You’ll have to confirm providing Snaplet access to your database. Snaplet will prompt you to only provide `read-only` access to your database. Snaplet has a guide in their documentation on how to do so [here](https://docs.snaplet.dev/guides/postgresql/#create-read-only-role).
 
 > Note that whatever connection string you provide here will be that of your Data Source – essentially the production database in a real-life scenario
 

From b046bb1cc89d42886d9c8ec37788c7025d2a374e Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Thu, 22 Dec 2022 16:45:40 -0800
Subject: [PATCH 204/215] Fix link to Sequin console

---
 apps/docs/pages/guides/integrations/sequin.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/integrations/sequin.mdx b/apps/docs/pages/guides/integrations/sequin.mdx
index efdb578c775..200ca829ea0 100644
--- a/apps/docs/pages/guides/integrations/sequin.mdx
+++ b/apps/docs/pages/guides/integrations/sequin.mdx
@@ -82,7 +82,7 @@ You'll use this client to query for data in your synced schema.
 ## Resources
 
 - [Sequin](https://sequin.io) official website.
-- [Sequin Console](https://app.sequin.io*).
+- [Sequin Console](https://app.sequin.io).
 - [Sequin](https://docs.sequin.io/welcome) documentation.
 - [Sequin + Supabase + Stripe Tutorial](https://github.com/sequin-io/build-a-saas-with-next-js-supabase-stripe-and-sequin)
 

From 9cee81b3a3dad4f04a00e636db9744d77812a45f Mon Sep 17 00:00:00 2001
From: Wen Bo Xie <wenbo.xie3@gmail.com>
Date: Thu, 22 Dec 2022 16:47:53 -0800
Subject: [PATCH 205/215] chore: update license route from master to main
 branch

---
 apps/docs/pages/getting-started.mdx                             | 2 +-
 apps/docs/pages/guides/getting-started/architecture.mdx         | 2 +-
 .../2022-04-01-supabase-realtime-with-multiplayer-features.mdx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/docs/pages/getting-started.mdx b/apps/docs/pages/getting-started.mdx
index 6313b6cb018..ccb7790f15e 100644
--- a/apps/docs/pages/getting-started.mdx
+++ b/apps/docs/pages/getting-started.mdx
@@ -62,7 +62,7 @@ A scalable websocket engine for managing user Presence, broadcasting messages, a
 
 - Official Docs: [Supabase Realtime docs](/docs/guides/realtime)
 - Source code: [github.com/supabase/realtime](https://github.com/supabase/realtime)
-- License: [Apache 2](https://github.com/supabase/realtime/blob/master/LICENSE)
+- License: [Apache 2](https://github.com/supabase/realtime/blob/main/LICENSE)
 - Language: Elixir
 
 ### Storage API (large file storage)
diff --git a/apps/docs/pages/guides/getting-started/architecture.mdx b/apps/docs/pages/guides/getting-started/architecture.mdx
index 91048898791..c97053b0c54 100644
--- a/apps/docs/pages/guides/getting-started/architecture.mdx
+++ b/apps/docs/pages/guides/getting-started/architecture.mdx
@@ -63,7 +63,7 @@ A scalable websocket engine for managing user Presence, broadcasting messages, a
 
 - Official Docs: [Supabase Realtime docs](/docs/guides/realtime)
 - Source code: [github.com/supabase/realtime](https://github.com/supabase/realtime)
-- License: [Apache 2](https://github.com/supabase/realtime/blob/master/LICENSE)
+- License: [Apache 2](https://github.com/supabase/realtime/blob/main/LICENSE)
 - Language: Elixir
 
 ### Storage API (large file storage)
diff --git a/apps/www/_blog/2022-04-01-supabase-realtime-with-multiplayer-features.mdx b/apps/www/_blog/2022-04-01-supabase-realtime-with-multiplayer-features.mdx
index e86f6423582..63600d109ee 100644
--- a/apps/www/_blog/2022-04-01-supabase-realtime-with-multiplayer-features.mdx
+++ b/apps/www/_blog/2022-04-01-supabase-realtime-with-multiplayer-features.mdx
@@ -76,4 +76,4 @@ Tech stack:
 
 Sign up for the waitlist at [multiplayer.dev](https://multiplayer.dev).
 
-You can follow development in our [open source repository on GitHub](https://github.com/supabase/realtime/tree/multiplayer).
+You can follow development in our [open source repository on GitHub](https://github.com/supabase/realtime/tree/develop).

From d57ce33748d048482e528357fd11d6278ae7b4b8 Mon Sep 17 00:00:00 2001
From: Qiao Han <qiao@supabase.io>
Date: Fri, 23 Dec 2022 10:04:24 +0800
Subject: [PATCH 206/215] fix: pass down postgres config to self-hosted db

---
 docker/docker-compose.yml | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 659c501cde3..c3efd687b65 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -197,9 +197,14 @@ services:
       - log_min_messages=fatal # prevents Realtime polling queries from appearing in logs
     restart: unless-stopped
     ports:
-      - ${POSTGRES_PORT}:5432
+      - ${POSTGRES_PORT}:${POSTGRES_PORT}
     environment:
       POSTGRES_HOST: /var/run/postgresql
+      PGPORT: ${POSTGRES_PORT}
+      POSTGRES_PORT: ${POSTGRES_PORT}
+      PGPASSWORD: ${POSTGRES_PASSWORD}
       POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      PGDATABASE: ${POSTGRES_DB}
+      POSTGRES_DB: ${POSTGRES_DB}
     volumes:
       - ./volumes/db/roles.sql:/docker-entrypoint-initdb.d/roles.sql

From 93f00f5a0fa8f1cb34b5bb1b106f34b2004a2682 Mon Sep 17 00:00:00 2001
From: Qiao Han <qiao@supabase.io>
Date: Fri, 23 Dec 2022 10:22:18 +0800
Subject: [PATCH 207/215] chore: add cli team as code owners for self-hosted

---
 .github/CODEOWNERS | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 57849f5e09a..7e2b99fa05d 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -2,3 +2,4 @@
 /apps/www/ @supabase/frontend
 /apps/docs/ @supabase/docs
 /spec/ @supabase/docs
+/docker/ @supabase/cli

From 60b29b7246d19d7eb59dd46611de2b41a8abbfc7 Mon Sep 17 00:00:00 2001
From: Qiao Han <qiao@supabase.io>
Date: Fri, 23 Dec 2022 10:34:43 +0800
Subject: [PATCH 208/215] chore: comment on passing down pg port

---
 docker/docker-compose.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index c3efd687b65..2eca99b5ab3 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -197,6 +197,7 @@ services:
       - log_min_messages=fatal # prevents Realtime polling queries from appearing in logs
     restart: unless-stopped
     ports:
+      # Pass down internal port because it's set dynamically by other services
       - ${POSTGRES_PORT}:${POSTGRES_PORT}
     environment:
       POSTGRES_HOST: /var/run/postgresql

From 32b8c45e87dd6003caa882947b7d4abf2f712afd Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Fri, 23 Dec 2022 11:57:12 +0800
Subject: [PATCH 209/215] simplify text display

---
 .../components/reference/RefFunctionSection.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index 18c753a52ef..ee681b84082 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -153,6 +153,14 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                           label={example.name}
                           className="flex flex-col gap-3"
                         >
+                          {example.description && (
+                            <div className="prose">
+                              <ReactMarkdown className="text-sm">
+                                {example.description}
+                              </ReactMarkdown>
+                            </div>
+                          )}
+
                           {((tables && tables.length > 0) || sql) && (
                             <RefDetailCollapse
                               id={`${example.id}-${exampleIndex}-data`}
@@ -204,15 +212,6 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                                   .replace('ts', ''))}
                           </CodeBlock>
 
-                          {example.description && (
-                            <div className="bg-scale-300 prose px-4 py-2 rounded-md">
-                              <h5 className="text-sm m-0 text-scale-1100">Example Notes</h5>
-                              <ReactMarkdown className="text-sm">
-                                {example.description}
-                              </ReactMarkdown>
-                            </div>
-                          )}
-
                           {response && (
                             <RefDetailCollapse
                               id={`${example.id}-${exampleIndex}-response`}

From 4b446ec7eede44119461d780d0bbf266930dc897 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 22 Dec 2022 11:07:19 +0700
Subject: [PATCH 210/215] Hide deprecated extensions

---
 .../interfaces/Database/Extensions/Extensions.constants.ts      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/studio/components/interfaces/Database/Extensions/Extensions.constants.ts b/studio/components/interfaces/Database/Extensions/Extensions.constants.ts
index 6d8dfbb1e66..669b441d503 100644
--- a/studio/components/interfaces/Database/Extensions/Extensions.constants.ts
+++ b/studio/components/interfaces/Database/Extensions/Extensions.constants.ts
@@ -12,4 +12,6 @@ export const HIDDEN_EXTENSIONS = [
   'pg_visibility',
   'pgstattuple',
   'supabase_vault',
+  'intagg',
+  'xml2',
 ]

From 8db1749e811455d8372f0812b071f3b81262caf9 Mon Sep 17 00:00:00 2001
From: Qiao Han <qiao@supabase.io>
Date: Fri, 23 Dec 2022 11:22:38 +0800
Subject: [PATCH 211/215] chore: remove connection string from self-hosted
 response

---
 .../AuthSelectionRenderer.tsx                 |  3 +-
 studio/lib/api/apiHelpers.ts                  | 55 -------------------
 studio/package.json                           |  2 -
 studio/pages/api/profile/index.ts             | 14 +----
 studio/pages/api/projects/[ref]/index.ts      | 33 +----------
 5 files changed, 3 insertions(+), 104 deletions(-)

diff --git a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/AuthSelectionRenderer.tsx b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/AuthSelectionRenderer.tsx
index aaeaf7518c8..1155d4aedc6 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/AuthSelectionRenderer.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/AuthSelectionRenderer.tsx
@@ -1,6 +1,5 @@
-import { parse } from 'crypto-js/enc-utf8'
 import { tryParseJson } from 'lib/helpers'
-import { isUnixMicro, PreviewLogData, unixMicroToIsoTimestamp } from '..'
+import { PreviewLogData } from '..'
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
 import {
   jsonSyntaxHighlight,
diff --git a/studio/lib/api/apiHelpers.ts b/studio/lib/api/apiHelpers.ts
index f66452e6a52..a6d23bf77ec 100644
--- a/studio/lib/api/apiHelpers.ts
+++ b/studio/lib/api/apiHelpers.ts
@@ -1,6 +1,4 @@
 import { camelCase, snakeCase } from 'lodash'
-import AES from 'crypto-js/aes'
-import Utf8 from 'crypto-js/enc-utf8'
 import { IS_PLATFORM } from 'lib/constants'
 
 /**
@@ -104,59 +102,6 @@ export const toCamelCase = (object, whitelist = []) => {
   }
 }
 
-/**
- * Decrypts any string using the supabase encryption key
- */
-const decryptString = (stringToDecrypt: string) => {
-  const key = process.env.SUPABASE_ENCRYPTION_KEY
-  if (key) {
-    return AES.decrypt(stringToDecrypt, key).toString(Utf8)
-  } else {
-    return stringToDecrypt
-  }
-}
-
-/**
- * Encrypts any string using the supabase encryption key
- */
-const encryptString = (stringToEncrypt: string) => {
-  const key = process.env.SUPABASE_ENCRYPTION_KEY
-  if (key) {
-    return AES.encrypt(stringToEncrypt, key).toString()
-  } else {
-    return stringToEncrypt
-  }
-}
-
-/**
- * Creates a Postgres connection string using the Supabase master login.
- * Expects the passwords to be encrypted (straight from the DB)
- */
-export const createEncryptedDbConnectionString = ({
-  db_user_supabase,
-  db_pass_supabase,
-  db_dns_name,
-  db_host,
-  db_port,
-  db_name,
-  db_ssl,
-}: {
-  db_user_supabase: string
-  db_host: string
-  db_pass_supabase: string
-  db_dns_name?: String
-  db_port: number
-  db_name: string
-  db_ssl: boolean
-}) => {
-  const host = !db_dns_name ? db_host : db_dns_name // check IP already assigned
-  const unencrypted = decryptString(db_pass_supabase)
-  const value = `postgres://${db_user_supabase}:${unencrypted}@${host}:${db_port}/${db_name}?sslmode=${
-    db_ssl ? 'require' : 'disable'
-  }`
-  return encryptString(value)
-}
-
 /**
  * Moves all Namespaced variables to the root
  *
diff --git a/studio/package.json b/studio/package.json
index 547db163b08..e35239fa471 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -40,7 +40,6 @@
     "common": "*",
     "config": "*",
     "configcat-js": "^5.6.0",
-    "crypto-js": "^4.1.1",
     "dayjs": "^1.11.0",
     "file-saver": "^2.0.5",
     "generate-password": "^1.7.0",
@@ -108,7 +107,6 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/blueimp-md5": "^2.18.0",
-    "@types/crypto-js": "^4.0.2",
     "@types/file-saver": "^2.0.2",
     "@types/json-logic-js": "^1.2.1",
     "@types/lodash": "^4.14.172",
diff --git a/studio/pages/api/profile/index.ts b/studio/pages/api/profile/index.ts
index 6b25f3d3396..4b88292532a 100644
--- a/studio/pages/api/profile/index.ts
+++ b/studio/pages/api/profile/index.ts
@@ -1,8 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 
-import { IS_PLATFORM } from 'lib/constants'
 import apiWrapper from 'lib/api/apiWrapper'
-import { createEncryptedDbConnectionString } from 'lib/api/apiHelpers'
 
 export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
 
@@ -41,17 +39,7 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => {
             cloud_provider: 'localhost',
             status: 'ACTIVE_HEALTHY',
             region: 'local',
-            connectionString: IS_PLATFORM
-              ? createEncryptedDbConnectionString({
-                  db_user_supabase: 'postgres',
-                  db_dns_name: undefined,
-                  db_host: 'localhost',
-                  db_pass_supabase: String(process.env.POSTGRES_PASSWORD),
-                  db_port: 5432,
-                  db_name: 'postgres',
-                  db_ssl: false,
-                })
-              : '',
+            connectionString: '',
           },
         ],
       },
diff --git a/studio/pages/api/projects/[ref]/index.ts b/studio/pages/api/projects/[ref]/index.ts
index 7ae98b66a38..8c83076216c 100644
--- a/studio/pages/api/projects/[ref]/index.ts
+++ b/studio/pages/api/projects/[ref]/index.ts
@@ -27,41 +27,10 @@ const handleGet = async (req: NextApiRequest, res: NextApiResponse) => {
     cloud_provider: 'localhost',
     status: 'ACTIVE_HEALTHY',
     region: 'local',
-    connectionString: createDbConnectionString({
-      db_user_supabase: 'postgres',
-      db_host: 'localhost',
-      db_pass_supabase: process.env.POSTGRES_PASSWORD as string,
-      db_port: 5432,
-      db_name: 'postgres',
-      db_ssl: false,
-    }),
+    connectionString: '',
     kpsVersion: 'kps-v1.0.0',
     restUrl: PROJECT_REST_URL,
   }
 
   return res.status(200).json(response)
 }
-
-/**
- * Creates a Postgres connection string using the Supabase master login.
- * Expects the passwords to be encrypted (straight from the DB)
- */
-const createDbConnectionString = ({
-  db_user_supabase,
-  db_pass_supabase,
-  db_host,
-  db_port,
-  db_name,
-  db_ssl,
-}: {
-  db_user_supabase: string
-  db_host: string
-  db_pass_supabase: string
-  db_port: number
-  db_name: string
-  db_ssl: boolean
-}) => {
-  return `postgres://${db_user_supabase}:${db_pass_supabase}@${db_host}:${db_port}/${db_name}?sslmode=${
-    db_ssl ? 'require' : 'disable'
-  }`
-}

From 4e473315953c06fbac1340f4680588daf88c297f Mon Sep 17 00:00:00 2001
From: Qiao Han <qiao@supabase.io>
Date: Fri, 23 Dec 2022 11:22:57 +0800
Subject: [PATCH 212/215] chore: remove dependency on crypto-js

---
 package-lock.json | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2f08bafa685..a623b4950f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9993,12 +9993,6 @@
         "classnames": "*"
       }
     },
-    "node_modules/@types/crypto-js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz",
-      "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
-      "dev": true
-    },
     "node_modules/@types/d3-color": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-2.0.3.tgz",
@@ -14360,11 +14354,6 @@
         "node": "*"
       }
     },
-    "node_modules/crypto-js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
-      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
-    },
     "node_modules/css-blank-pseudo": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
@@ -37604,7 +37593,6 @@
         "common": "*",
         "config": "*",
         "configcat-js": "^5.6.0",
-        "crypto-js": "^4.1.1",
         "dayjs": "^1.11.0",
         "file-saver": "^2.0.5",
         "generate-password": "^1.7.0",
@@ -37672,7 +37660,6 @@
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^13.5.0",
         "@types/blueimp-md5": "^2.18.0",
-        "@types/crypto-js": "^4.0.2",
         "@types/file-saver": "^2.0.2",
         "@types/json-logic-js": "^1.2.1",
         "@types/lodash": "^4.14.172",
@@ -44750,12 +44737,6 @@
         "classnames": "*"
       }
     },
-    "@types/crypto-js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz",
-      "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
-      "dev": true
-    },
     "@types/d3-color": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-2.0.3.tgz",
@@ -48306,11 +48287,6 @@
         "randomfill": "^1.0.3"
       }
     },
-    "crypto-js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
-      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
-    },
     "css-blank-pseudo": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
@@ -63396,7 +63372,6 @@
         "@testing-library/react-hooks": "*",
         "@testing-library/user-event": "^13.5.0",
         "@types/blueimp-md5": "^2.18.0",
-        "@types/crypto-js": "^4.0.2",
         "@types/file-saver": "^2.0.2",
         "@types/json-logic-js": "^1.2.1",
         "@types/lodash": "^4.14.172",
@@ -63427,7 +63402,6 @@
         "common": "*",
         "config": "*",
         "configcat-js": "^5.6.0",
-        "crypto-js": "^4.1.1",
         "dayjs": "^1.11.0",
         "file-saver": "^2.0.5",
         "generate-password": "^1.7.0",

From 7ae5e415d99501239aeca4345342bade8625c215 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 22 Dec 2022 11:24:10 +0700
Subject: [PATCH 213/215] Update saving indicator for table editor

---
 .../grid/components/header/Header.tsx         |  5 +-
 .../grid/components/header/RefreshButton.tsx  | 49 ++++++++---
 .../grid/components/header/StatusLabel.tsx    | 81 -------------------
 3 files changed, 41 insertions(+), 94 deletions(-)
 delete mode 100644 studio/components/grid/components/header/StatusLabel.tsx

diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index a3042f00fe0..f84f7d50b33 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -41,10 +41,7 @@ const Header: FC<HeaderProps> = ({ sorts, filters, onAddColumn, onAddRow, header
           onAddRow={onAddRow}
         />
       )}
-      <div className="sb-grid-header__inner">
-        {headerActions}
-        <StatusLabel />
-      </div>
+      <div className="sb-grid-header__inner">{headerActions}</div>
     </div>
   )
 }
diff --git a/studio/components/grid/components/header/RefreshButton.tsx b/studio/components/grid/components/header/RefreshButton.tsx
index 518a5f8b721..cea80d66f2e 100644
--- a/studio/components/grid/components/header/RefreshButton.tsx
+++ b/studio/components/grid/components/header/RefreshButton.tsx
@@ -1,5 +1,6 @@
-import { FC, useState } from 'react'
-import { Button, IconRefreshCw } from 'ui'
+import { FC, useState, useEffect } from 'react'
+import { Button, IconRefreshCw, IconCheck } from 'ui'
+import { SupabaseGridQueue } from '../../constants'
 import { Filter, Sort } from 'components/grid/types'
 import { useDispatch, useTrackedState } from 'components/grid/store'
 import { fetchCount, fetchPage } from 'components/grid/utils'
@@ -10,10 +11,34 @@ interface Props {
 }
 
 const RefreshButton: FC<Props> = ({ sorts, filters }) => {
-  const [loading, setLoading] = useState(false)
   const state = useTrackedState()
   const dispatch = useDispatch()
 
+  const [loading, setLoading] = useState(false)
+  const [status, setStatus] = useState<string>()
+
+  useEffect(() => {
+    let isMounted = true
+    let timer: number | null
+
+    SupabaseGridQueue.on('active', () => {
+      if (timer) clearTimeout(timer)
+
+      if (isMounted) setStatus('saving')
+    })
+    SupabaseGridQueue.on('idle', () => {
+      if (timer) clearTimeout(timer)
+      timer = window.setTimeout(() => setStatus(undefined), 2000)
+
+      if (isMounted) setStatus('saved')
+    })
+
+    return () => {
+      isMounted = false
+      if (timer) clearTimeout(timer)
+    }
+  }, [])
+
   async function onClick() {
     setLoading(true)
     await fetchCount(state, dispatch, filters)
@@ -25,14 +50,20 @@ const RefreshButton: FC<Props> = ({ sorts, filters }) => {
     <Button
       type="text"
       icon={
-        <div className="text-scale-1000">
-          <IconRefreshCw strokeWidth={1.5} />
-        </div>
+        !status ? (
+          <IconRefreshCw className="text-scale-1000" strokeWidth={1.5} />
+        ) : status === 'saved' ? (
+          <IconCheck className="text-brand-900" strokeWidth={3} />
+        ) : (
+          <></>
+        )
       }
-      onClick={onClick}
-      loading={loading}
+      onClick={() => {
+        if (!status) onClick()
+      }}
+      loading={loading || status === 'saving'}
     >
-      Refresh
+      {!status ? 'Refresh' : status === 'saved' ? 'Changes saved' : 'Saving changes'}
     </Button>
   )
 }
diff --git a/studio/components/grid/components/header/StatusLabel.tsx b/studio/components/grid/components/header/StatusLabel.tsx
deleted file mode 100644
index 21050e11696..00000000000
--- a/studio/components/grid/components/header/StatusLabel.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useState, FC, useEffect } from 'react'
-import * as Tooltip from '@radix-ui/react-tooltip'
-import { IconLoader, IconCheck } from 'ui'
-import { SupabaseGridQueue } from '../../constants'
-
-interface Props {}
-
-const StatusLabel: FC<Props> = ({}) => {
-  const [status, setStatus] = useState<string>()
-
-  useEffect(() => {
-    let isMounted = true
-    let timer: number | null
-
-    SupabaseGridQueue.on('active', () => {
-      if (timer) clearTimeout(timer)
-
-      if (isMounted) setStatus('saving')
-    })
-    SupabaseGridQueue.on('idle', () => {
-      if (timer) clearTimeout(timer)
-      timer = window.setTimeout(() => setStatus(undefined), 4000)
-
-      if (isMounted) setStatus('saved')
-    })
-
-    return () => {
-      isMounted = false
-      if (timer) clearTimeout(timer)
-    }
-  }, [])
-
-  return (
-    <div className="sb-grid-status-label flex items-center justify-center">
-      {status === 'saving' ? (
-        <Tooltip.Root delayDuration={0}>
-          <Tooltip.Trigger>
-            <IconLoader className="mx-1 animate-spin text-scale-1100" size={14} strokeWidth={2} />
-          </Tooltip.Trigger>
-          <Tooltip.Content side="left">
-            <Tooltip.Arrow className="radix-tooltip-arrow" />
-            <div
-              className={[
-                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
-                'border border-scale-200',
-              ].join(' ')}
-            >
-              <span className="text-xs text-scale-1200">Saving changes...</span>
-            </div>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      ) : status === 'saved' ? (
-        <Tooltip.Root delayDuration={0}>
-          <Tooltip.Trigger>
-            <IconCheck className="mx-1 text-brand-900" size={14} strokeWidth={3} />
-          </Tooltip.Trigger>
-          <Tooltip.Content side="left">
-            <Tooltip.Arrow className="radix-tooltip-arrow" />
-            <div
-              className={[
-                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
-                'border border-scale-200 ',
-              ].join(' ')}
-            >
-              <span className="text-xs text-scale-1200">All changes saved</span>
-            </div>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      ) : (
-        <></>
-      )}
-
-      {!status && (
-        <div className="sb-grid-status-label__no-msg">
-          <div></div>
-        </div>
-      )}
-    </div>
-  )
-}
-export default StatusLabel

From 8f448abe55a3da318daf86cc5e1000b85cda6d38 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 22 Dec 2022 11:24:34 +0700
Subject: [PATCH 214/215] Remove import

---
 studio/components/grid/components/header/Header.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index f84f7d50b33..4ad75e4eaef 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -5,7 +5,6 @@ import { saveAs } from 'file-saver'
 import { useStore } from 'hooks'
 import FilterDropdown from './filter'
 import SortPopover from './sort'
-import StatusLabel from './StatusLabel'
 import RefreshButton from './RefreshButton'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
 import { Sort, Filter } from 'components/grid/types'

From 3743e4574b8f40a83af512caa6699015603946d5 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 23 Dec 2022 14:31:23 +0700
Subject: [PATCH 215/215] Implement optimistic rendering for editing rows in
 the grid itself

---
 .../formatter/ForeignKeyFormatter.tsx           |  2 +-
 studio/components/grid/components/grid/Grid.tsx | 17 +++++++++++------
 .../grid/services/row/SqlRowService.ts          | 14 +++++++++++++-
 studio/components/grid/services/row/index.tsx   |  1 +
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx b/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
index edb9b9084c3..e6abb30516f 100644
--- a/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
+++ b/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
@@ -17,7 +17,7 @@ export const ForeignKeyFormatter = (
     const rowData = deepClone(p.row)
     rowData[p.column.key] = _value
 
-    const { error } = state.rowService!.update(rowData, p.column.key)
+    const { error } = state.rowService!.update(rowData, p.row, p.column.key)
     if (error) {
       if (state.onError) state.onError(error)
     } else {
diff --git a/studio/components/grid/components/grid/Grid.tsx b/studio/components/grid/components/grid/Grid.tsx
index 230e40dabf3..07aee22745b 100644
--- a/studio/components/grid/components/grid/Grid.tsx
+++ b/studio/components/grid/components/grid/Grid.tsx
@@ -41,12 +41,17 @@ export const Grid = memo(
         )
 
         if (changedColumn) {
-          const { error } = state.rowService!.update(rowData, changedColumn, (payload) => {
-            dispatch({
-              type: 'EDIT_ROW',
-              payload,
-            })
-          })
+          const { error } = state.rowService!.update(
+            rowData,
+            originRowData,
+            changedColumn,
+            (payload) => {
+              dispatch({
+                type: 'EDIT_ROW',
+                payload,
+              })
+            }
+          )
           if (error && onErrorFunc) onErrorFunc(error)
         }
       }
diff --git a/studio/components/grid/services/row/SqlRowService.ts b/studio/components/grid/services/row/SqlRowService.ts
index 4e4e7226396..5014d78df00 100644
--- a/studio/components/grid/services/row/SqlRowService.ts
+++ b/studio/components/grid/services/row/SqlRowService.ts
@@ -163,12 +163,21 @@ export class SqlRowService implements IRowService {
     return rows
   }
 
-  update(row: SupaRow, changedColumn?: string, onRowUpdate?: (value: any) => void) {
+  update(
+    row: SupaRow,
+    originalRow: SupaRow,
+    changedColumn?: string,
+    onRowUpdate?: (value: any) => void
+  ) {
     const { primaryKeys, error } = this.getPrimaryKeys()
     if (error) {
       return { error }
     }
     const { idx, ...value } = row
+
+    // Optimistic rendering
+    if (onRowUpdate) onRowUpdate({ row: value, idx })
+
     const matchValues: any = {}
     primaryKeys!.forEach((key) => {
       matchValues[key] = row[key]
@@ -199,6 +208,9 @@ export class SqlRowService implements IRowService {
       if (error) throw error
       if (onRowUpdate) onRowUpdate({ row: data[0], idx })
     }).catch((error) => {
+      const { idx, ...originalRowData } = originalRow
+      // Revert optimistic rendering if any errors
+      if (onRowUpdate) onRowUpdate({ row: originalRowData, idx })
       this.onError(error)
     })
 
diff --git a/studio/components/grid/services/row/index.tsx b/studio/components/grid/services/row/index.tsx
index 3c63b0685a1..fd60208cba0 100644
--- a/studio/components/grid/services/row/index.tsx
+++ b/studio/components/grid/services/row/index.tsx
@@ -28,6 +28,7 @@ export interface IRowService {
 
   update: (
     row: SupaRow,
+    originalRow: SupaRow,
     changedColumn?: string,
     onRowUpdate?: (value: any) => void
   ) => { row?: SupaRow; error?: ServiceError }