fix: update shortcut key bindings and improve sorting utility

Innei · Innei · commit e5e474b987c8 · 2025-06-04T20:16:40.000+08:00
- Changed the shortcut for toggling Zen mode to use "Shift+$mod+Z".
- Removed redundant sorting functions from SettingShortcuts and moved sorting logic to utils.
- Enhanced the sorting utility for shortcut keys to ensure consistent ordering of modifier keys.
- Updated GlobalHotkeysProvider to utilize the new sorting logic and added a check for normal layer focus.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/modules/command/hooks/use-command-binding.ts b/apps/desktop/layer/renderer/src/modules/command/hooks/use-command-binding.ts
@@ -14,7 +14,7 @@ export const defaultCommandShortcuts = {
   // Layout commands
   [COMMAND_ID.layout.toggleSubscriptionColumn]: transformShortcut("$mod+B"),
   [COMMAND_ID.layout.toggleWideMode]: transformShortcut("$mod+["),
-  [COMMAND_ID.layout.toggleZenMode]: transformShortcut("$mod+Shift+Z"),
+  [COMMAND_ID.layout.toggleZenMode]: transformShortcut("Shift+$mod+Z"),
 
   // Subscription commands
   [COMMAND_ID.subscription.markAllAsRead]: transformShortcut("Shift+$mod+A"),
diff --git a/apps/desktop/layer/renderer/src/modules/command/shortcuts/SettingShortcuts.tsx b/apps/desktop/layer/renderer/src/modules/command/shortcuts/SettingShortcuts.tsx
@@ -3,7 +3,7 @@ import { Button } from "@follow/components/ui/button/index.js"
 import { KbdCombined } from "@follow/components/ui/kbd/Kbd.js"
 import { RootPortal } from "@follow/components/ui/portal/index.js"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@follow/components/ui/tooltip/index.js"
-import { cn } from "@follow/utils/utils"
+import { cn, sortShortcutKeys } from "@follow/utils/utils"
 import type { FC, RefObject, SVGProps } from "react"
 import { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -372,27 +372,6 @@ const MODIFIER_KEYS_SET = new Set<string>(Object.values(MODIFIER_KEYS_MAP))
 
 const F_KEY_REGEX = /^F(?:[1-9]|1[0-2])$/
 
-function getKeySortValue(key: string): number {
-  if (key === MODIFIER_KEYS_MAP.Meta) return 0
-  if (key === MODIFIER_KEYS_MAP.Control) return 1
-  if (key === MODIFIER_KEYS_MAP.Alt) return 2
-  if (key === MODIFIER_KEYS_MAP.Shift) return 3
-  if (F_KEY_REGEX.test(key)) return 4
-  return 5
-}
-
-function sortShortcutKeys(keys: string[]): string[] {
-  return [...keys].sort((a, b) => {
-    const sortValueA = getKeySortValue(a)
-    const sortValueB = getKeySortValue(b)
-    if (sortValueA !== sortValueB) {
-      return sortValueA - sortValueB
-    }
-
-    return a.localeCompare(b)
-  })
-}
-
 const useShortcutRecorder = () => {
   const [currentKeys, setCurrentKeys] = useState<string[]>([])
 
@@ -414,11 +393,10 @@ const useShortcutRecorder = () => {
 
       const pressedKeysSet = new Set<string>()
 
-      // 添加修饰键
+      if (shiftKey) pressedKeysSet.add(MODIFIER_KEYS_MAP.Shift)
       if (metaKey) pressedKeysSet.add(MODIFIER_KEYS_MAP.Meta)
       if (ctrlKey) pressedKeysSet.add(MODIFIER_KEYS_MAP.Control)
       if (altKey) pressedKeysSet.add(MODIFIER_KEYS_MAP.Alt)
-      if (shiftKey) pressedKeysSet.add(MODIFIER_KEYS_MAP.Shift)
 
       // If mainKeyPressed (from event.key) is not a modifier key, add it as the main key.
       // If mainKeyPressed is a modifier key (e.g., user only pressed Shift key, event.key is "Shift"),
diff --git a/apps/desktop/layer/renderer/src/providers/global-hotkeys-provider.tsx b/apps/desktop/layer/renderer/src/providers/global-hotkeys-provider.tsx
@@ -1,3 +1,4 @@
+import { useGlobalFocusableScopeSelector } from "@follow/components/common/Focusable/hooks.js"
 import { highlightElement } from "@follow/components/common/Focusable/utils.js"
 import {
   checkIsEditableElement,
@@ -9,6 +10,7 @@ import { useEffect } from "react"
 import { tinykeys } from "tinykeys"
 import { useEventListener } from "usehooks-ts"
 
+import { FocusablePresets } from "~/components/common/Focusable"
 import { COMMAND_ID } from "~/modules/command/commands/id"
 import { useRunCommandFn } from "~/modules/command/hooks/use-command"
 import { useCommandBinding, useCommandShortcuts } from "~/modules/command/hooks/use-command-binding"
@@ -32,6 +34,7 @@ export const GlobalHotkeysProvider = () => {
   const commandShortcuts = useCommandShortcuts()
 
   const runCommandFn = useRunCommandFn()
+  const isNormalLayer = useGlobalFocusableScopeSelector(FocusablePresets.isNotFloatingLayerScope)
   useEffect(() => {
     const preHandler = (e: Event) => {
       stopPropagation(e)
@@ -44,11 +47,12 @@ export const GlobalHotkeysProvider = () => {
         highlightElement(document.activeElement as HTMLElement)
       },
       [commandShortcuts[COMMAND_ID.layout.toggleZenMode]]: (e) => {
+        if (!isNormalLayer) return
         preHandler(e)
         runCommandFn(COMMAND_ID.layout.toggleZenMode, [])()
       },
     })
-  }, [commandShortcuts, runCommandFn])
+  }, [commandShortcuts, runCommandFn, isNormalLayer])
 
   return null
 }
diff --git a/packages/internal/utils/src/utils.ts b/packages/internal/utils/src/utils.ts
@@ -353,6 +353,31 @@ export function transformShortcut(shortcut: string, platform: OS = getOS()): str
   return shortcut.replace("$mod", "Ctrl")
 }
 
+const F_KEY_REGEX = /^F(?:[1-9]|1[0-2])$/
+
+function getKeySortValue(key: string): number {
+  const order = ["Shift", "Ctrl", "Meta", "Alt"]
+
+  if (order.includes(key)) {
+    return order.indexOf(key)
+  }
+
+  if (F_KEY_REGEX.test(key)) return 4
+  return 5
+}
+
+export function sortShortcutKeys(keys: string[]): string[] {
+  return [...keys].sort((a, b) => {
+    const sortValueA = getKeySortValue(a)
+    const sortValueB = getKeySortValue(b)
+    if (sortValueA !== sortValueB) {
+      return sortValueA - sortValueB
+    }
+
+    return a.localeCompare(b)
+  })
+}
+
 // time like 1:30:00
 export const formatTimeToSeconds = (time?: string | number) => {
   if (typeof time === "number" || time === undefined) {
