fix(desktop): shortcut scope switching logic

Innei · Innei · commit 582303fcbf49 · 2025-05-22T13:40:23.000+08:00
- Replaced the use of `useShortcutScope` with `useConditionalHotkeyScope` in the Modal component for improved hotkey handling.
- Updated the `useSwitchHotkeyScope` hook to maintain the current active scopes using `useLayoutEffect`.
- Modified the SubviewLayout to conditionally enable the Escape key hotkey based on the active scope.

These changes streamline hotkey management and enhance user experience across modal and subview interactions.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/components/ui/modal/stacked/modal.tsx b/apps/desktop/layer/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -30,8 +30,8 @@ import { AppErrorBoundary } from "~/components/common/AppErrorBoundary"
 import { SafeFragment } from "~/components/common/Fragment"
 import { m } from "~/components/common/Motion"
 import { ErrorComponentType } from "~/components/errors/enum"
-import { ElECTRON_CUSTOM_TITLEBAR_HEIGHT } from "~/constants"
-import { useSwitchHotKeyScope } from "~/hooks/common"
+import { ElECTRON_CUSTOM_TITLEBAR_HEIGHT, HotkeyScope } from "~/constants"
+import { useConditionalHotkeyScope } from "~/hooks/common"
 
 import { modalStackAtom } from "./atom"
 import { MODAL_STACK_Z_INDEX, modalMontionConfig } from "./constants"
@@ -192,7 +192,7 @@ export const ModalInternal = memo(function Modal({
     }
   }, [currentIsClosing])
 
-  useShortcutScope()
+  useConditionalHotkeyScope(HotkeyScope.Modal, true)
 
   const modalStyle = resizeableStyle
   const { handleSelectStart, handleDetectSelectEnd, isSelectingRef } = useModalSelect()
@@ -403,16 +403,6 @@ export const ModalInternal = memo(function Modal({
   )
 })
 
-const useShortcutScope = () => {
-  const switchHotkeyScope = useSwitchHotKeyScope()
-  useEffect(() => {
-    switchHotkeyScope("Modal")
-    return () => {
-      switchHotkeyScope("Home")
-    }
-  }, [switchHotkeyScope])
-}
-
 const ModalContext: FC<
   PropsWithChildren & {
     modalContextProps: CurrentModalContentProps
diff --git a/apps/desktop/layer/renderer/src/hooks/common/useSwitchHotkeyScope.ts b/apps/desktop/layer/renderer/src/hooks/common/useSwitchHotkeyScope.ts
@@ -28,6 +28,10 @@ export const useConditionalHotkeyScopeFn = (scope: HotkeyScope, replaceAll = tru
   const { enableScope, disableScope, activeScopes } = useHotkeysContext()
   const currentScopeRef = useRef(activeScopes)
 
+  useLayoutEffect(() => {
+    currentScopeRef.current = activeScopes
+  }, [activeScopes])
+
   return useCallback(() => {
     const currentScope = currentScopeRef.current
     if (replaceAll) {
diff --git a/apps/desktop/layer/renderer/src/modules/app-layout/subview/index.electron.tsx b/apps/desktop/layer/renderer/src/modules/app-layout/subview/index.electron.tsx
@@ -13,6 +13,7 @@ import { NavigationType, Outlet, useLocation, useNavigate, useNavigationType } f
 import { FABContainer, FABPortable } from "~/components/ui/fab"
 import { HotkeyScope } from "~/constants"
 import { useConditionalHotkeyScope } from "~/hooks/common"
+import { useHotkeyScope } from "~/providers/hotkey-provider"
 
 import { useSubViewTitleValue } from "./hooks"
 
@@ -65,7 +66,10 @@ export function SubviewLayout() {
       navigate(-1)
     }
   }
-  useHotkeys("esc", backHandler)
+  const activeScope = useHotkeyScope()
+  useHotkeys("Escape", backHandler, {
+    enabled: activeScope.includes(HotkeyScope.SubLayer),
+  })
   return (
     <div className="relative flex size-full">
       <div
