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]) }