[pull] master from supabase:master

apps/docs/components/GuidesSidebar.tsx

@@ -76,7 +76,7 @@ function AiTools({ className }: { className?: string }) {
         <button
           tabIndex={0}
           onClick={copyMarkdown}
-          className="flex items-center gap-1.5 text-xs text-foreground-lighter hover:text-foreground text-left transition-colors"
+          className="flex cursor-pointer items-center gap-1.5 text-xs text-foreground-lighter hover:text-foreground text-left transition-colors"
         >
           {copied ? (
             <Check size={14} strokeWidth={1.5} className="text-brand" />

apps/docs/content/guides/local-development/cli/getting-started.mdx

@@ -29,6 +29,7 @@ The rest of this page writes examples as `supabase <command>`; translate them to
   size="small"
   type="underlined"
   defaultActiveId="npm"
+  queryGroup="platform"
 >
 <TabPanel id="npm" label="npm">
 
@@ -104,6 +105,7 @@ Pre-release CLI builds ship from the development branch (`X.Y.Z-beta.N` versions
   size="small"
   type="underlined"
   defaultActiveId="npm"
+  queryGroup="platform"
 >
 <TabPanel id="npm" label="npm">
 
@@ -160,8 +162,24 @@ When a new [version](https://github.com/supabase/cli/releases) is released, you
   scrollable
   size="small"
   type="underlined"
-  defaultActiveId="macos"
+  defaultActiveId="npm"
+  queryGroup="platform"
 >
+<TabPanel id="npm" label="npm">
+
+If you have installed the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase), you can update it with:
+
+```sh
+npm update supabase --save-dev
+```
+
+Beta channel (`supabase@beta`):
+
+```sh
+npm update supabase@beta --save-dev
+```
+
+</TabPanel>
 <TabPanel id="macos" label="macOS">
 
 ```sh
@@ -202,29 +220,14 @@ Beta channel:
 brew upgrade supabase-beta
 ```
 
-#### Linux package manager
+#### Linux packages
 
 1. Download the latest package from the [Supabase CLI releases page](https://github.com/supabase/cli/releases/latest)
 2. Install the package using the same commands as the [initial installation](#linux-packages):
    - `sudo apk add --allow-untrusted <...>.apk`
    - `sudo dpkg -i <...>.deb`
    - `sudo rpm -i <...>.rpm`
 
-</TabPanel>
-<TabPanel id="npm" label="npm">
-
-If you have installed the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase), you can update it with:
-
-```sh
-npm update supabase --save-dev
-```
-
-Beta channel (`supabase@beta`):
-
-```sh
-npm update supabase@beta --save-dev
-```
-
 </TabPanel>
 </Tabs>
 

apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx

@@ -113,7 +113,7 @@ export function CodeCopyButton({ className, content }: { className?: string; con
             onClick={handleCopy}
             onBlur={resetStatus}
             className={cn(
-              'border rounded-md p-1',
+              'cursor-pointer border rounded-md p-1',
               copied && 'bg-selection',
               'hover:bg-selection transition',
               className
@@ -163,7 +163,7 @@ export function CodeBlockControls({ content }: { content: string }) {
           <button
             tabIndex={0}
             onClick={toggleWrap}
-            className={cn('border rounded-md p-1', 'hover:bg-selection transition')}
+            className={cn('cursor-pointer border rounded-md p-1', 'hover:bg-selection transition')}
             aria-label={isWrapped ? 'Disable word wrap' : 'Enable word wrap'}
           >
             {isWrapped ? (

apps/docs/features/ui/PromptPanel.tsx

@@ -192,7 +192,7 @@ function CopyButton({ label, value }: { label: string; value: string }) {
           setCopied(true)
         })
       }}
-      className="rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-ring"
+      className="cursor-pointer rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-ring"
       aria-label={copied ? `${label} copied` : `Copy ${label}`}
       title={copied ? 'Copied' : 'Copy to clipboard'}
     >

apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx

@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useCallback, useState } from 'react'
-import { useForm, type SubmitHandler } from 'react-hook-form'
+import { useForm, useWatch, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -70,9 +70,9 @@ export const NewScopedTokenSheet = ({
   const track = useTrack()
   const { mutate: createAccessToken, isPending } = useAccessTokenCreateMutation()
 
-  const resourceAccess = form.watch('resourceAccess')
-  const expiresAt = form.watch('expiresAt')
-  const permissionRows = form.watch('permissionRows') || []
+  const resourceAccess = useWatch({ control: form.control, name: 'resourceAccess' })
+  const expiresAt = useWatch({ control: form.control, name: 'expiresAt' })
+  const permissionRows = useWatch({ control: form.control, name: 'permissionRows' }) || []
 
   const onSubmit: SubmitHandler<TokenFormValues> = async (values) => {
     if (!permissionRows || permissionRows.length === 0) {

apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { LOCAL_STORAGE_KEYS, safeLocalStorage } from 'common'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -63,7 +63,7 @@ export const DeleteAccountButton = () => {
     resolver: zodResolver(FormSchema),
     defaultValues: { account: '' },
   })
-  const { account } = form.watch()
+  const account = useWatch({ control: form.control, name: 'account' })
 
   const { mutate: submitSupportTicket, isPending } = useSendSupportTicketMutation({
     onSuccess: () => {

apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -99,7 +99,10 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
     defaultValues,
   })
 
-  const { lint_name, assigned_to, is_disabled } = form.watch()
+  const [lint_name, assigned_to, is_disabled] = useWatch({
+    control: form.control,
+    name: ['lint_name', 'assigned_to', 'is_disabled'],
+  })
 
   const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (values) => {
     if (!projectRef) return console.error('Project ref is required')
@@ -200,7 +203,7 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
                   <Admonition showIcon={false} type="default">
                     {generateRuleDescription({
                       name: lint_name,
-                      disabled: is_disabled,
+                      disabled: is_disabled ?? defaultValues.is_disabled,
                       member: members.find((x) => x.gotrue_id === assigned_to),
                     })}
                   </Admonition>

apps/studio/components/interfaces/Auth/AuditLogsForm.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
@@ -69,7 +69,9 @@ export const AuditLogsForm = () => {
     defaultValues: { AUDIT_LOG_DISABLE_POSTGRES: false },
   })
   const { isDirty } = form.formState
-  const { AUDIT_LOG_DISABLE_POSTGRES: formValueDisablePostgres } = form.watch()
+  const { AUDIT_LOG_DISABLE_POSTGRES: formValueDisablePostgres } = useWatch({
+    control: form.control,
+  })
   const currentlyDisabled = authConfig?.AUDIT_LOG_DISABLE_POSTGRES ?? false
   const isDisabling = !currentlyDisabled && formValueDisablePostgres
 

apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -82,6 +82,10 @@ export const BasicAuthSettingsForm = () => {
     },
   })
   const { isDirty } = form.formState
+  const externalAnonymousUsersEnabled = useWatch({
+    control: form.control,
+    name: 'EXTERNAL_ANONYMOUS_USERS_ENABLED',
+  })
 
   useEffect(() => {
     if (authConfig) {
@@ -250,7 +254,7 @@ export const BasicAuthSettingsForm = () => {
                     )}
                   />
 
-                  {form.watch('EXTERNAL_ANONYMOUS_USERS_ENABLED') && (
+                  {externalAnonymousUsersEnabled && (
                     <Alert
                       className="flex w-full items-center justify-between mt-4"
                       variant="warning"
@@ -291,23 +295,22 @@ export const BasicAuthSettingsForm = () => {
                     </Alert>
                   )}
 
-                  {!authConfig?.SECURITY_CAPTCHA_ENABLED &&
-                    form.watch('EXTERNAL_ANONYMOUS_USERS_ENABLED') && (
-                      <Alert className="mt-4">
-                        <WarningIcon />
-                        <AlertTitle>
-                          We highly recommend{' '}
-                          <InlineLink href={`/project/${projectRef}/auth/protection`}>
-                            enabling captcha
-                          </InlineLink>{' '}
-                          for anonymous sign-ins
-                        </AlertTitle>
-                        <AlertDescription>
-                          This will prevent potential abuse on sign-ins which may bloat your
-                          database and incur costs for monthly active users (MAU)
-                        </AlertDescription>
-                      </Alert>
-                    )}
+                  {!authConfig?.SECURITY_CAPTCHA_ENABLED && externalAnonymousUsersEnabled && (
+                    <Alert className="mt-4">
+                      <WarningIcon />
+                      <AlertTitle>
+                        We highly recommend{' '}
+                        <InlineLink href={`/project/${projectRef}/auth/protection`}>
+                          enabling captcha
+                        </InlineLink>{' '}
+                        for anonymous sign-ins
+                      </AlertTitle>
+                      <AlertDescription>
+                        This will prevent potential abuse on sign-ins which may bloat your database
+                        and incur costs for monthly active users (MAU)
+                      </AlertDescription>
+                    </Alert>
+                  )}
                 </CardContent>
                 <CardContent>
                   <FormField

apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx

@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import type { editor } from 'monaco-editor'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import ReactMarkdown from 'react-markdown'
 import { toast } from 'sonner'
 import {
@@ -199,7 +199,7 @@ export const TemplateEditor = ({ template, isReadOnly = false }: TemplateEditorP
   }
 
   // Check if form values have changed
-  const formValues = form.watch()
+  const formValues = useWatch({ control: form.control })
   const baselineValues = INITIAL_VALUES
   const baselineBodyValue = (authConfig && authConfig[messageSlug]) ?? ''
   const hasCustomTemplate =

apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx

@@ -8,7 +8,7 @@ import {
 import { useParams } from 'common'
 import randomBytes from 'randombytes'
 import { useEffect, useMemo } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -167,7 +167,10 @@ export const CreateHookSheet = ({
   })
 
   const isDirty = form.formState.isDirty
-  const { postgresValues, hookType, selectedType, enabled } = form.watch()
+  const [postgresValues, hookType, selectedType, enabled] = useWatch({
+    control: form.control,
+    name: ['postgresValues', 'hookType', 'selectedType', 'enabled'],
+  })
   const {
     confirmOnClose,
     handleOpenChange,

apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -170,6 +170,7 @@ export const MfaAuthSettingsForm = () => {
     },
   })
   const { reset: resetPhoneForm } = phoneForm
+  const mfaPhoneValue = useWatch({ control: phoneForm.control, name: 'MFA_PHONE' })
 
   const securityForm = useForm<SecurityFormValues>({
     resolver: zodResolver(securitySchema),
@@ -329,8 +330,7 @@ export const MfaAuthSettingsForm = () => {
     )
   }
 
-  const phoneMFAIsEnabled =
-    phoneForm.watch('MFA_PHONE') === 'Enabled' || phoneForm.watch('MFA_PHONE') === 'Verify Enabled'
+  const phoneMFAIsEnabled = mfaPhoneValue === 'Enabled' || mfaPhoneValue === 'Verify Enabled'
   const hasUpgradedPhoneMFA =
     authConfig && !authConfig.MFA_PHONE_VERIFY_ENABLED && phoneMFAIsEnabled
 

apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx

@@ -8,7 +8,7 @@ import { useParams } from 'common'
 import { Storage } from 'icons'
 import { ImageOff, Trash2, X } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -111,6 +111,8 @@ export const CreateOrUpdateOAuthAppSheet = ({
     defaultValues: initialValues,
   })
 
+  const clientType = useWatch({ control: form.control, name: 'client_type' })
+
   const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
 
   const { mutate: createOAuthApp, isPending: isCreating } = useOAuthServerAppCreateMutation({
@@ -481,7 +483,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                   )}
                 />
 
-                {form.watch('client_type') === 'confidential' && (
+                {clientType === 'confidential' && (
                   <FormField
                     control={form.control}
                     name="token_endpoint_auth_method"