sidebar move up

apps/studio/components/layouts/DefaultLayout.tsx

@@ -12,6 +12,7 @@ import { SidebarProvider } from 'ui'
 import { LayoutHeader } from './ProjectLayout/LayoutHeader'
 import MobileNavigationBar from './ProjectLayout/NavigationBar/MobileNavigationBar'
 import { ProjectContextProvider } from './ProjectLayout/ProjectContext'
+import { LayoutSidebarProvider } from './ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 
 export interface DefaultLayoutProps {
   headerTitle?: string
@@ -55,29 +56,31 @@ const DefaultLayout = ({
   return (
     <SidebarProvider defaultOpen={false}>
       <ProjectContextProvider projectRef={ref}>
-        <AppBannerContextProvider>
-          <div className="flex flex-col h-screen w-screen">
-            {/* Top Banner */}
-            <AppBannerWrapper />
-            <div className="flex-shrink-0">
-              <MobileNavigationBar hideMobileMenu={hideMobileMenu} />
-              <LayoutHeader
-                showProductMenu={showProductMenu}
-                headerTitle={headerTitle}
-                backToDashboardURL={
-                  router.pathname.startsWith('/account') ? backToDashboardURL : undefined
-                }
-              />
+        <LayoutSidebarProvider>
+          <AppBannerContextProvider>
+            <div className="flex flex-col h-screen w-screen">
+              {/* Top Banner */}
+              <AppBannerWrapper />
+              <div className="flex-shrink-0">
+                <MobileNavigationBar hideMobileMenu={hideMobileMenu} />
+                <LayoutHeader
+                  showProductMenu={showProductMenu}
+                  headerTitle={headerTitle}
+                  backToDashboardURL={
+                    router.pathname.startsWith('/account') ? backToDashboardURL : undefined
+                  }
+                />
+              </div>
+              {/* Main Content Area */}
+              <div className="flex flex-1 w-full overflow-y-hidden">
+                {/* Sidebar - Only show for project pages, not account pages */}
+                {!router.pathname.startsWith('/account') && <Sidebar />}
+                {/* Main Content */}
+                <div className="flex-grow h-full overflow-y-auto">{children}</div>
+              </div>
             </div>
-            {/* Main Content Area */}
-            <div className="flex flex-1 w-full overflow-y-hidden">
-              {/* Sidebar - Only show for project pages, not account pages */}
-              {!router.pathname.startsWith('/account') && <Sidebar />}
-              {/* Main Content */}
-              <div className="flex-grow h-full overflow-y-auto">{children}</div>
-            </div>
-          </div>
-        </AppBannerContextProvider>
+          </AppBannerContextProvider>
+        </LayoutSidebarProvider>
       </ProjectContextProvider>
     </SidebarProvider>
   )

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

@@ -70,7 +70,6 @@ const LayoutHeader = ({
   const { data: selectedOrganization } = useSelectedOrganizationQuery()
   const { setMobileMenuOpen } = useAppStateSnapshot()
   const gitlessBranching = useIsBranching2Enabled()
-  const { toggleSidebar } = useSidebarManagerSnapshot()
 
   const isAccountPage = router.pathname.startsWith('/account')
 

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

@@ -21,7 +21,6 @@ import { useEditorType } from '../editors/EditorsLayout.hooks'
 import BuildingState from './BuildingState'
 import ConnectingState from './ConnectingState'
 import { LayoutSidebar } from './LayoutSidebar'
-import { LayoutSidebarProvider } from './LayoutSidebar/LayoutSidebarProvider'
 import { LoadingState } from './LoadingState'
 import { ProjectPausedState } from './PausedState/ProjectPausedState'
 import { PauseFailedState } from './PauseFailedState'
@@ -216,9 +215,7 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
                     )}
                   </main>
                 </ResizablePanel>
-                <LayoutSidebarProvider>
-                  <LayoutSidebar />
-                </LayoutSidebarProvider>
+                <LayoutSidebar />
               </ResizablePanelGroup>
             </ResizablePanel>
           </ResizablePanelGroup>

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

@@ -151,12 +151,16 @@ export const useRegisterSidebar = (
   )
 
   useEffect(() => {
-    const { registerSidebar, unregisterSidebar } = sidebarManagerState
+    const { registerSidebar, unregisterSidebar, sidebars } = sidebarManagerState
 
-    registerSidebar(id, component, handlers)
+    if (!sidebars[id]) {
+      registerSidebar(id, component, handlers)
+    }
 
     return () => {
-      unregisterSidebar(id)
+      if (sidebars[id]) {
+        unregisterSidebar(id)
+      }
     }
   }, [id])