Fix sidebar param (#40973)

fix sidebar param

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

@@ -35,7 +35,7 @@ export const AIAssistantOption = ({ projectRef, organizationSlug }: AIAssistantO
   }, [projectRef, organizationSlug, sendEvent])
 
   // If no specific project selected, use the wildcard route
-  const aiLink = `/project/${projectRef !== NO_PROJECT_MARKER ? projectRef : '_'}?aiAssistantPanelOpen=true&slug=${organizationSlug}`
+  const aiLink = `/project/${projectRef !== NO_PROJECT_MARKER ? projectRef : '_'}?sidebar=ai-assistant&slug=${organizationSlug}`
 
   if (!organizationSlug || organizationSlug === NO_ORG_MARKER) return null
 

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

@@ -1,12 +1,12 @@
+import { AdvisorPanel } from 'components/ui/AdvisorPanel/AdvisorPanel'
+import { AIAssistant } from 'components/ui/AIAssistantPanel/AIAssistant'
+import { EditorPanel } from 'components/ui/EditorPanel/EditorPanel'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 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'
-import { AdvisorPanel } from 'components/ui/AdvisorPanel/AdvisorPanel'
-import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
-import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 
 export const SIDEBAR_KEYS = {
   AI_ASSISTANT: 'ai-assistant',

apps/studio/state/sidebar-manager-state.tsx

@@ -1,7 +1,7 @@
 import { LOCAL_STORAGE_KEYS } from 'common/constants'
 import useLatest from 'hooks/misc/useLatest'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
-import { ReactNode, useEffect, useRef } from 'react'
+import { ReactNode, useEffect } from 'react'
 import { proxy, snapshot, useSnapshot } from 'valtio'
 
 type SidebarHandlers = {
@@ -17,6 +17,7 @@ type ManagedSidebar = SidebarHandlers & {
 type SidebarManagerData = {
   sidebars: Partial<Record<string, ManagedSidebar>>
   activeSidebar: ManagedSidebar | undefined
+  pendingSidebarOpen: string | undefined
 }
 
 type SidebarManagerState = SidebarManagerData & {
@@ -36,6 +37,7 @@ type SidebarManagerState = SidebarManagerData & {
 const INITIAL_SIDEBAR_MANAGER_DATA: SidebarManagerData = {
   sidebars: {},
   activeSidebar: undefined,
+  pendingSidebarOpen: undefined,
 }
 
 const createSidebarManagerState = () => {
@@ -52,6 +54,12 @@ const createSidebarManagerState = () => {
         component,
         ...handlers,
       }
+
+      // If this sidebar was pending to be opened, open it now
+      if (state.pendingSidebarOpen === id) {
+        state.pendingSidebarOpen = undefined
+        state.openSidebar(id)
+      }
     },
 
     unregisterSidebar(id: string) {
@@ -60,6 +68,11 @@ const createSidebarManagerState = () => {
 
       delete state.sidebars[id]
 
+      // Clear pending open if this sidebar was pending
+      if (state.pendingSidebarOpen === id) {
+        state.pendingSidebarOpen = undefined
+      }
+
       if (state.activeSidebar?.id === id) {
         state.activeSidebar = undefined
         panel.onClose?.()
@@ -69,10 +82,14 @@ const createSidebarManagerState = () => {
     openSidebar(id: string) {
       const panel = state.sidebars[id]
       if (!panel) {
-        console.warn(`Sidebar "${id}" is not registered. Register it before opening.`)
+        // Queue the request - sidebar will be opened when it gets registered
+        state.pendingSidebarOpen = id
         return
       }
 
+      // Clear any pending request since we're opening a sidebar now
+      state.pendingSidebarOpen = undefined
+
       if (state.activeSidebar?.id === id) {
         return
       }

apps/www/pages/assistant.tsx

@@ -682,7 +682,7 @@ function Assistant() {
                 <div className="min-h-12 flex items-center gap-x-2">
                   {!isUserLoading && (
                     <Button type="primary" size="medium" asChild>
-                      <Link href="/dashboard/project/_?aiAssistantPanelOpen=true">
+                      <Link href="/dashboard/project/_?sidebar=ai-assistant">
                         {isLoggedIn ? 'Dashboard' : 'Start your project'}
                       </Link>
                     </Button>