[pull] master from supabase:master

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

@@ -6,7 +6,7 @@ import { KeyboardShortcut, Toggle } from 'ui'
 
 export const HotkeySettings = () => {
   const [inlineEditorEnabled, setInlineEditorEnabled] = useLocalStorageQuery(
-    LOCAL_STORAGE_KEYS.HOTKEY_INLINE_EDITOR,
+    LOCAL_STORAGE_KEYS.HOTKEY_SIDEBAR(SIDEBAR_KEYS.EDITOR_PANEL),
     true
   )
   const [commandMenuEnabled, setCommandMenuEnabled] = useLocalStorageQuery(

apps/studio/components/interfaces/Support/SubjectAndSuggestionsInfo.tsx

@@ -54,7 +54,7 @@ interface GitHubDiscussionSuggestionProps {
 function GitHubDiscussionSuggestion({ subject }: GitHubDiscussionSuggestionProps) {
   return (
     <p className="flex items-center gap-x-1 text-foreground-lighter text-sm">
-      <span>Check our </span>
+      Check our
       <Link
         key="gh-discussions"
         href={`https://github.com/orgs/supabase/discussions?discussions_q=${subject}`}
@@ -65,7 +65,7 @@ function GitHubDiscussionSuggestion({ subject }: GitHubDiscussionSuggestionProps
         GitHub discussions
         <ExternalLink size={14} strokeWidth={2} />
       </Link>
-      <span> for a quick answer</span>
+      for a quick answer
     </p>
   )
 }

apps/studio/components/interfaces/Support/SupportFormPage.tsx

@@ -23,8 +23,8 @@ import type { SupportFormValues } from './SupportForm.schema'
 import {
   createInitialSupportFormState,
   type SupportFormActions,
-  type SupportFormState,
   supportFormReducer,
+  type SupportFormState,
 } from './SupportForm.state'
 import { SupportFormV2 } from './SupportFormV2'
 import { useSupportForm } from './useSupportForm'
@@ -125,7 +125,7 @@ function SupportFormHeader() {
       <div className="flex items-center gap-x-3">
         <Button asChild type="default" icon={<Wrench />}>
           <Link
-            href={`${DOCS_URL}/guides/platform/troubleshooting`}
+            href={`${DOCS_URL}/guides/troubleshooting?products=platform`}
             target="_blank"
             rel="noreferrer"
           >

apps/studio/components/layouts/ProjectLayout/ConnectingState.tsx

@@ -91,7 +91,7 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
                 </Button>
                 <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
                   <Link
-                    href={`${DOCS_URL}/guides/platform/troubleshooting#unable-to-connect-to-your-supabase-project`}
+                    href={`${DOCS_URL}/guides/troubleshooting?products=platform#unable-to-connect-to-your-supabase-project`}
                     className="translate-y-[1px]"
                   >
                     Troubleshooting

apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx

@@ -10,6 +10,7 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
+import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import {
   AiIconAnimation,
   Button,
@@ -21,7 +22,6 @@ import {
   Popover_Shadcn_,
 } from 'ui'
 import { SIDEBAR_KEYS } from '../LayoutSidebar/LayoutSidebarProvider'
-import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 
 export const HelpPopover = () => {
   const router = useRouter()
@@ -102,7 +102,7 @@ export const HelpPopover = () => {
             )}
             <ButtonGroupItem size="tiny" icon={<Wrench strokeWidth={1.5} size={14} />} asChild>
               <a
-                href={`${DOCS_URL}/guides/platform/troubleshooting`}
+                href={`${DOCS_URL}/guides/troubleshooting?products=platform`}
                 target="_blank"
                 rel="noreferrer"
               >

apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -1,7 +1,7 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronLeft } from 'lucide-react'
 import Link from 'next/link'
-import { ReactNode, useMemo, useState } from 'react'
+import { ReactNode, useMemo } from 'react'
 
 import { LOCAL_STORAGE_KEYS, useParams } from 'common'
 import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
@@ -13,17 +13,17 @@ import { BranchDropdown } from 'components/layouts/AppLayout/BranchDropdown'
 import { InlineEditorButton } from 'components/layouts/AppLayout/InlineEditorButton'
 import { OrganizationDropdown } from 'components/layouts/AppLayout/OrganizationDropdown'
 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'
 import { IS_PLATFORM } from 'lib/constants'
 import { useRouter } from 'next/router'
 import { useAppStateSnapshot } from 'state/app-state'
+import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import { Badge, cn } from 'ui'
+import { SIDEBAR_KEYS } from '../LayoutSidebar/LayoutSidebarProvider'
 import { BreadcrumbsView } from './BreadcrumbsView'
 import { FeedbackDropdown } from './FeedbackDropdown/FeedbackDropdown'
 import { HelpPopover } from './HelpPopover'
@@ -71,25 +71,14 @@ const LayoutHeader = ({
   const { data: selectedOrganization } = useSelectedOrganizationQuery()
   const { setMobileMenuOpen } = useAppStateSnapshot()
   const gitlessBranching = useIsBranching2Enabled()
+  const { toggleSidebar } = useSidebarManagerSnapshot()
 
   const isAccountPage = router.pathname.startsWith('/account')
-
-  const [showEditorPanel, setShowEditorPanel] = useState(false)
-
   const [inlineEditorHotkeyEnabled] = useLocalStorageQuery<boolean>(
-    LOCAL_STORAGE_KEYS.HOTKEY_INLINE_EDITOR,
+    LOCAL_STORAGE_KEYS.HOTKEY_SIDEBAR(SIDEBAR_KEYS.EDITOR_PANEL),
     true
   )
 
-  useHotKey(
-    () => {
-      if (projectRef) setShowEditorPanel(!showEditorPanel)
-    },
-    'e',
-    [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)
   const { data: orgUsage } = useOrgUsageQuery(
     { orgSlug: selectedOrganization?.slug },
@@ -234,7 +223,7 @@ const LayoutHeader = ({
                     {!!projectRef && (
                       <>
                         <InlineEditorButton
-                          onClick={() => setShowEditorPanel(true)}
+                          onClick={() => toggleSidebar(SIDEBAR_KEYS.EDITOR_PANEL)}
                           showShortcut={inlineEditorHotkeyEnabled}
                         />
                         <AssistantButton />
@@ -252,7 +241,7 @@ const LayoutHeader = ({
                     {!!projectRef && (
                       <>
                         <InlineEditorButton
-                          onClick={() => setShowEditorPanel(true)}
+                          onClick={() => toggleSidebar(SIDEBAR_KEYS.EDITOR_PANEL)}
                           showShortcut={inlineEditorHotkeyEnabled}
                         />
                         <AssistantButton />
@@ -266,11 +255,6 @@ const LayoutHeader = ({
           </div>
         </div>
       </header>
-      <EditorPanel
-        open={showEditorPanel}
-        onClose={() => setShowEditorPanel(false)}
-        isInlineEditorHotkeyEnabled={inlineEditorHotkeyEnabled}
-      />
     </>
   )
 }

apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx

@@ -2,13 +2,16 @@ import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect } from 'react'
 import { useRegisterSidebar, useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import { AIAssistant } from 'components/ui/AIAssistantPanel/AIAssistant'
+import { EditorPanel } from 'components/ui/EditorPanel/EditorPanel'
 
 export const SIDEBAR_KEYS = {
   AI_ASSISTANT: 'ai-assistant',
+  EDITOR_PANEL: 'editor-panel',
 } as const
 
 export const LayoutSidebarProvider = ({ children }: PropsWithChildren) => {
   useRegisterSidebar(SIDEBAR_KEYS.AI_ASSISTANT, () => <AIAssistant />, {}, 'i')
+  useRegisterSidebar(SIDEBAR_KEYS.EDITOR_PANEL, () => <EditorPanel />, {}, 'e')
 
   const router = useRouter()
   const { openSidebar } = useSidebarManagerSnapshot()