more

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

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { PropsWithChildren, useCallback, useEffect, useRef } from 'react'
+import { PropsWithChildren, useEffect, useRef } from 'react'
 import {
   sidebarManagerState,
   useRegisterSidebar,
@@ -12,8 +12,7 @@ export const SIDEBAR_KEYS = {
 } as const
 
 export const LayoutSidebarProvider = ({ children }: PropsWithChildren) => {
-  const assistantComponent = useCallback(() => <AIAssistant />, [])
-  useRegisterSidebar(SIDEBAR_KEYS.AI_ASSISTANT, assistantComponent, {}, 'i')
+  useRegisterSidebar(SIDEBAR_KEYS.AI_ASSISTANT, () => <AIAssistant />, {}, 'i')
 
   const router = useRouter()
   const { sidebars } = useSidebarManagerSnapshot()

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

@@ -155,44 +155,35 @@ export const useRegisterSidebar = (
   handlers: SidebarHandlers = {},
   hotKey?: string
 ) => {
-  const { onOpen, onClose } = handlers
-  const { registerSidebar, unregisterSidebar, toggleSidebar } = sidebarManagerState
   const [isSidebarHotkeyEnabled] = useLocalStorageQuery<boolean>(
     LOCAL_STORAGE_KEYS.HOTKEY_SIDEBAR(id),
     true
   )
 
   useEffect(() => {
-    registerSidebar(id, component, { onOpen, onClose })
+    const { registerSidebar, unregisterSidebar } = sidebarManagerState
 
-    function hotKeyHandler(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === hotKey && !e.altKey && !e.shiftKey) {
-        toggleSidebar(id)
-      }
-    }
-
-    if (hotKey && isSidebarHotkeyEnabled) {
-      window.addEventListener('keydown', hotKeyHandler)
-    }
-    if (!isSidebarHotkeyEnabled) {
-      window.removeEventListener('keydown', hotKeyHandler)
-    }
+    registerSidebar(id, component, handlers)
 
     return () => {
       unregisterSidebar(id)
-      if (hotKey && isSidebarHotkeyEnabled) {
+    }
+  }, [id])
+
+  useEffect(() => {
+    if (!hotKey) return
+
+    function hotKeyHandler(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === hotKey && !e.altKey && !e.shiftKey) {
+        sidebarManagerState.toggleSidebar(id)
+      }
+    }
+
+    if (isSidebarHotkeyEnabled) {
+      window.addEventListener('keydown', hotKeyHandler)
+      return () => {
         window.removeEventListener('keydown', hotKeyHandler)
       }
     }
-  }, [
-    component,
-    hotKey,
-    id,
-    isSidebarHotkeyEnabled,
-    onClose,
-    onOpen,
-    registerSidebar,
-    unregisterSidebar,
-    toggleSidebar,
-  ])
+  }, [id, hotKey, isSidebarHotkeyEnabled])
 }