feat(preferences): allow disable hotkeys (supabase#39573)

charislam · joshenlim · web-flow · commit 3eb7da776666 · 2025-10-17T08:09:38.000-04:00
* feat(preferences): allow disable hotkeys

Add a section in /account/me for disabling hotkeys. Only added one
hotkey for now (Cmd + E for toggling editor side panel) but we can add
more with the same pattern.

* refactor: remove default export on ProjectLayout

* feat(hotkeys): allow toggling of command menu and ai assistant hotkeys

* Nit

* PRettier lint

---------

Co-authored-by: Joshen Lim &lt;joshenlimek@gmail.com&gt;
diff --git a/apps/studio/components/interfaces/Account/Preferences/HotkeySettings.tsx b/apps/studio/components/interfaces/Account/Preferences/HotkeySettings.tsx
@@ -0,0 +1,68 @@
+import { LOCAL_STORAGE_KEYS } from 'common'
+import Panel from 'components/ui/Panel'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
+import { KeyboardShortcut, Toggle } from 'ui'
+
+export const HotkeySettings = () => {
+  const [inlineEditorEnabled, setInlineEditorEnabled] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.HOTKEY_INLINE_EDITOR,
+    true
+  )
+  const [commandMenuEnabled, setCommandMenuEnabled] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.HOTKEY_COMMAND_MENU,
+    true
+  )
+  const [aiAssistantEnabled, setAiAssistantEnabled] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.HOTKEY_AI_ASSISTANT,
+    true
+  )
+
+  return (
+    <Panel
+      title={
+        <div>
+          <h5 id="keyboard-shortcuts">Keyboard shortcuts</h5>
+          <p className="text-sm text-foreground-lighter">
+            Choose which shortcuts stay active while working in the dashboard
+          </p>
+        </div>
+      }
+    >
+      <Panel.Content className="space-y-3">
+        <Toggle
+          checked={commandMenuEnabled}
+          onChange={() => setCommandMenuEnabled(!commandMenuEnabled)}
+          label={
+            <div className="flex items-center gap-x-2">
+              <KeyboardShortcut keys={['Meta', 'k']} />
+              <span>Command menu</span>
+            </div>
+          }
+          descriptionText="Toggles the global command menu."
+        />
+        <Toggle
+          checked={aiAssistantEnabled}
+          onChange={() => setAiAssistantEnabled(!aiAssistantEnabled)}
+          label={
+            <div className="flex items-center gap-x-2">
+              <KeyboardShortcut keys={['Meta', 'i']} />
+              <span>AI Assistant</span>
+            </div>
+          }
+          descriptionText="Toggles the AI Assistant panel."
+        />
+        <Toggle
+          checked={inlineEditorEnabled}
+          onChange={() => setInlineEditorEnabled(!inlineEditorEnabled)}
+          label={
+            <div className="flex items-center gap-x-2">
+              <KeyboardShortcut keys={['Meta', 'e']} />
+              <span>Inline SQL Editor</span>
+            </div>
+          }
+          descriptionText="Toggles the inline SQL editor in a side panel"
+        />
+      </Panel.Content>
+    </Panel>
+  )
+}
diff --git a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsLayout.tsx b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsLayout.tsx
@@ -5,7 +5,7 @@ import { useIsAdvisorRulesEnabled } from 'components/interfaces/App/FeaturePrevi
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import { generateAdvisorsMenu } from './AdvisorsMenu.utils'
 
 export interface AdvisorsLayoutProps {
diff --git a/apps/studio/components/layouts/AppLayout/AssistantButton.tsx b/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
@@ -1,10 +1,15 @@
+import { LOCAL_STORAGE_KEYS } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
-import { AiIconAnimation } from 'ui'
-import { KeyboardShortcut } from 'ui'
+import { AiIconAnimation, KeyboardShortcut } from 'ui'
 
 export const AssistantButton = () => {
   const snap = useAiAssistantStateSnapshot()
+  const [isAIAssistantHotkeyEnabled] = useLocalStorageQuery<boolean>(
+    LOCAL_STORAGE_KEYS.HOTKEY_AI_ASSISTANT,
+    true
+  )
 
   return (
     <ButtonTooltip
@@ -20,7 +25,7 @@ export const AssistantButton = () => {
           text: (
             <div className="flex items-center gap-4">
               <span>AI Assistant</span>
-              <KeyboardShortcut keys={['Meta', 'i']} />
+              {isAIAssistantHotkeyEnabled && <KeyboardShortcut keys={['Meta', 'i']} />}
             </div>
           ),
         },
diff --git a/apps/studio/components/layouts/AppLayout/InlineEditorButton.tsx b/apps/studio/components/layouts/AppLayout/InlineEditorButton.tsx
@@ -2,7 +2,13 @@ import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { SqlEditor } from 'icons'
 import { KeyboardShortcut } from 'ui'
 
-export const InlineEditorButton = ({ onClick }: { onClick: () => void }) => {
+export const InlineEditorButton = ({
+  onClick,
+  showShortcut = true,
+}: {
+  onClick: () => void
+  showShortcut?: boolean
+}) => {
   return (
     <ButtonTooltip
       type="text"
@@ -15,7 +21,7 @@ export const InlineEditorButton = ({ onClick }: { onClick: () => void }) => {
           text: (
             <div className="flex items-center gap-4">
               <span>SQL Editor</span>
-              <KeyboardShortcut keys={['Meta', 'e']} />
+              {showShortcut && <KeyboardShortcut keys={['Meta', 'e']} />}
             </div>
           ),
         },
diff --git a/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx b/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx
@@ -6,7 +6,7 @@ import { ProductMenu } from 'components/ui/ProductMenu'
 import { useAuthConfigPrefetch } from 'data/auth/auth-config-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import { generateAuthMenu } from './AuthLayout.utils'
 import { useFlag } from 'common'
 
diff --git a/apps/studio/components/layouts/BranchLayout/BranchLayout.tsx b/apps/studio/components/layouts/BranchLayout/BranchLayout.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'common'
 import { GitHubStatus } from 'components/interfaces/Settings/Integrations/GithubIntegration/GitHubStatus'
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import { generateBranchMenu } from './BranchLayout.utils'
 
 const BranchProductMenu = () => {
diff --git a/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx b/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx
@@ -9,7 +9,7 @@ import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import { generateDatabaseMenu } from './DatabaseMenu.utils'
 
 export interface DatabaseLayoutProps {
diff --git a/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx b/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx
@@ -10,7 +10,7 @@ import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
 import { PROJECT_STATUS } from 'lib/constants'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import { generateDocsMenu } from './DocsLayout.utils'
 
 function DocsLayout({ title, children }: { title: string; children: ReactElement }) {
diff --git a/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx b/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx
@@ -27,7 +27,7 @@ import {
   Separator,
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import EdgeFunctionsLayout from './EdgeFunctionsLayout'
 
 interface EdgeFunctionDetailsLayoutProps {
diff --git a/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionsLayout.tsx b/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionsLayout.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react'
 import { useParams } from 'common'
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 
 const EdgeFunctionsProductMenu = () => {
   const { ref: projectRef = 'default' } = useParams()
diff --git a/apps/studio/components/layouts/Integrations/layout.tsx b/apps/studio/components/layouts/Integrations/layout.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'
 
 import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
-import ProjectLayout from 'components/layouts/ProjectLayout/ProjectLayout'
+import { ProjectLayout } from 'components/layouts/ProjectLayout/ProjectLayout'
 import AlertError from 'components/ui/AlertError'
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
diff --git a/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx b/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx
@@ -5,7 +5,7 @@ import { PropsWithChildren } from 'react'
 import NoPermission from 'components/ui/NoPermission'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import { LogsSidebarMenuV2 } from './LogsSidebarMenuV2'
 
 interface LogsLayoutProps {
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -3,7 +3,7 @@ import { ChevronLeft } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode, useMemo, useState } from 'react'
 
-import { useParams } from 'common'
+import { LOCAL_STORAGE_KEYS, useParams } from 'common'
 import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { Connect } from 'components/interfaces/Connect/Connect'
 import { LocalDropdown } from 'components/interfaces/LocalDropdown'
@@ -16,6 +16,7 @@ import { ProjectDropdown } from 'components/layouts/AppLayout/ProjectDropdown'
 import EditorPanel from 'components/ui/EditorPanel/EditorPanel'
 import { getResourcesExceededLimitsOrg } from 'components/ui/OveragesBanner/OveragesBanner.utils'
 import { useOrgUsageQuery } from 'data/usage/org-usage-query'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useHotKey } from 'hooks/ui/useHotKey'
@@ -74,12 +75,19 @@ const LayoutHeader = ({
   const isAccountPage = router.pathname.startsWith('/account')
 
   const [showEditorPanel, setShowEditorPanel] = useState(false)
+
+  const [inlineEditorHotkeyEnabled] = useLocalStorageQuery<boolean>(
+    LOCAL_STORAGE_KEYS.HOTKEY_INLINE_EDITOR,
+    true
+  )
+
   useHotKey(
     () => {
       if (projectRef) setShowEditorPanel(!showEditorPanel)
     },
     'e',
-    [showEditorPanel, projectRef]
+    [showEditorPanel, projectRef],
+    { enabled: inlineEditorHotkeyEnabled }
   )
 
   // We only want to query the org usage and check for possible over-ages for plans without usage billing enabled (free or pro with spend cap)
@@ -225,7 +233,10 @@ const LayoutHeader = ({
                   <AnimatePresence initial={false}>
                     {!!projectRef && (
                       <>
-                        <InlineEditorButton onClick={() => setShowEditorPanel(true)} />
+                        <InlineEditorButton
+                          onClick={() => setShowEditorPanel(true)}
+                          showShortcut={inlineEditorHotkeyEnabled}
+                        />
                         <AssistantButton />
                       </>
                     )}
@@ -240,7 +251,10 @@ const LayoutHeader = ({
                   <AnimatePresence initial={false}>
                     {!!projectRef && (
                       <>
-                        <InlineEditorButton onClick={() => setShowEditorPanel(true)} />
+                        <InlineEditorButton
+                          onClick={() => setShowEditorPanel(true)}
+                          showShortcut={inlineEditorHotkeyEnabled}
+                        />
                         <AssistantButton />
                       </>
                     )}
@@ -252,7 +266,11 @@ const LayoutHeader = ({
           </div>
         </div>
       </header>
-      <EditorPanel open={showEditorPanel} onClose={() => setShowEditorPanel(false)} />
+      <EditorPanel
+        open={showEditorPanel}
+        onClose={() => setShowEditorPanel(false)}
+        isInlineEditorHotkeyEnabled={inlineEditorHotkeyEnabled}
+      />
     </>
   )
 }
diff --git a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -3,13 +3,14 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { forwardRef, Fragment, PropsWithChildren, ReactNode, useEffect, useState } from 'react'
 
-import { useParams } from 'common'
+import { LOCAL_STORAGE_KEYS, useParams } from 'common'
 import { CreateBranchModal } from 'components/interfaces/BranchManagement/CreateBranchModal'
 import ProjectAPIDocs from 'components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
 import { AIAssistant } from 'components/ui/AIAssistantPanel/AIAssistant'
 import { Loading } from 'components/ui/Loading'
 import { ResourceExhaustionWarningBanner } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
 import { useCustomContent } from 'hooks/custom-content/useCustomContent'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
@@ -71,7 +72,7 @@ export interface ProjectLayoutProps {
   productMenuClassName?: string
 }
 
-const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayoutProps>>(
+export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayoutProps>>(
   (
     {
       title,
@@ -91,14 +92,19 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
     const [isClient, setIsClient] = useState(false)
     const { data: selectedOrganization } = useSelectedOrganizationQuery()
     const { data: selectedProject } = useSelectedProjectQuery()
-
     const { mobileMenuOpen, showSidebar, setMobileMenuOpen } = useAppStateSnapshot()
     const aiSnap = useAiAssistantStateSnapshot()
+    const [isAiAssistantHotkeyEnabled] = useLocalStorageQuery<boolean>(
+      LOCAL_STORAGE_KEYS.HOTKEY_AI_ASSISTANT,
+      true
+    )
 
     const { appTitle } = useCustomContent(['app:title'])
     const titleSuffix = appTitle || 'Supabase'
 
-    useHotKey(() => aiSnap.toggleAssistant(), 'i', [aiSnap])
+    useHotKey(() => aiSnap.toggleAssistant(), 'i', [aiSnap], {
+      enabled: isAiAssistantHotkeyEnabled,
+    })
 
     const editor = useEditorType()
     const forceShowProductMenu = editor === undefined
@@ -262,8 +268,6 @@ ProjectLayout.displayName = 'ProjectLayout'
 
 export const ProjectLayoutWithAuth = withAuth(ProjectLayout)
 
-export default ProjectLayout
-
 interface MenuBarWrapperProps {
   isLoading: boolean
   isBlocking?: boolean
diff --git a/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx b/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx
@@ -8,7 +8,7 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
 import { IS_PLATFORM } from 'lib/constants'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import { generateSettingsMenu } from './SettingsMenu.utils'
 
 interface SettingsLayoutProps {
diff --git a/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx b/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react'
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import { generateRealtimeMenu } from './RealtimeMenu.utils'
 
 export interface RealtimeLayoutProps {
diff --git a/apps/studio/components/layouts/ReportsLayout/ReportsLayout.tsx b/apps/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { UnknownInterface } from 'components/ui/UnknownInterface'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 import ReportsMenu from './ReportsMenu'
 
 interface ReportsLayoutProps {
diff --git a/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx b/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx
@@ -7,7 +7,7 @@ import { useSelectedBucket } from 'components/interfaces/Storage/StorageExplorer
 import { StorageMenu } from 'components/interfaces/Storage/StorageMenu'
 import { StorageMenuV2 } from 'components/interfaces/Storage/StorageMenuV2'
 import { withAuth } from 'hooks/misc/withAuth'
-import ProjectLayout from '../ProjectLayout/ProjectLayout'
+import { ProjectLayout } from '../ProjectLayout/ProjectLayout'
 
 export interface StorageLayoutProps {
   title: string
diff --git a/apps/studio/components/ui/AIEditor/index.tsx b/apps/studio/components/ui/AIEditor/index.tsx
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
diff --git a/apps/studio/hooks/ui/useHotKey.ts b/apps/studio/hooks/ui/useHotKey.ts
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
diff --git a/apps/studio/pages/account/me.tsx b/apps/studio/pages/account/me.tsx
diff --git a/apps/studio/pages/project/[ref]/logs/index.tsx b/apps/studio/pages/project/[ref]/logs/index.tsx
diff --git a/packages/common/constants/local-storage.ts b/packages/common/constants/local-storage.ts
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandProvider.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandProvider.tsx
diff --git a/packages/ui/src/components/KeyboardShortcut/KeyboardShortcut.tsx b/packages/ui/src/components/KeyboardShortcut/KeyboardShortcut.tsx
