diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx
index 958037beeb1..5d46eea1a3c 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx
+++ b/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(() => , [])
- useRegisterSidebar(SIDEBAR_KEYS.AI_ASSISTANT, assistantComponent, {}, 'i')
+ useRegisterSidebar(SIDEBAR_KEYS.AI_ASSISTANT, () => , {}, 'i')
const router = useRouter()
const { sidebars } = useSidebarManagerSnapshot()
diff --git a/apps/studio/state/sidebar-manager-state.tsx b/apps/studio/state/sidebar-manager-state.tsx
index 54a88121dac..308bbd4d891 100644
--- a/apps/studio/state/sidebar-manager-state.tsx
+++ b/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(
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])
}