feat: enhance shortcut management and command registration

Innei · Innei · commit 1d9507842ea0 · 2025-05-12T22:21:20.000+08:00
- Introduced new macro functions for shortcut localization, improving the handling of shortcut keys.
- Updated shortcut configurations to utilize the new macro functions, ensuring consistency in key naming.
- Refactored command registration to include new entry navigation commands, enhancing user interaction.
- Improved hotkey management by adding support for new entry scrolling commands.

This update aims to streamline shortcut handling and improve overall user experience in navigation.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/constants/shortcuts.ts b/apps/desktop/layer/renderer/src/constants/shortcuts.ts
@@ -10,69 +10,69 @@ type Shortcuts = Record<
 const shortcutConfigs = {
   feeds: {
     add: {
-      name: "keys.feeds.add",
+      name: tShortcuts("keys.feeds.add"),
       key: "Meta+T",
     },
     switchToView: {
-      name: "keys.feeds.switchToView",
+      name: tShortcuts("keys.feeds.switchToView"),
       key: "1, 2, 3, 4, 5, 6",
     },
     switchNextView: {
-      name: "keys.feeds.switchNextView",
+      name: tShortcuts("keys.feeds.switchNextView"),
       key: "Tab, ArrowRight",
     },
     switchPreviousView: {
-      name: "keys.feeds.switchPreviousView",
+      name: tShortcuts("keys.feeds.switchPreviousView"),
       key: "Shift+Tab, ArrowLeft",
     },
   },
   layout: {
     toggleSidebar: {
-      name: "keys.layout.toggleSidebar",
+      name: tShortcuts("keys.layout.toggleSidebar"),
       key: "Meta+B, [",
     },
     showShortcuts: {
-      name: "keys.layout.showShortcuts",
+      name: tShortcuts("keys.layout.showShortcuts"),
       key: "H",
     },
     toggleWideMode: {
-      name: "keys.layout.toggleWideMode",
+      name: tShortcuts("keys.layout.toggleWideMode"),
       key: "Meta+[",
     },
     zenMode: {
-      name: "keys.layout.zenMode",
+      name: tShortcuts("keys.layout.zenMode"),
       key: "Ctrl+Shift+Z",
     },
   },
   entries: {
     refetch: {
-      name: "keys.entries.refetch",
+      name: tShortcuts("keys.entries.refetch"),
       key: "R",
     },
     previous: {
-      name: "keys.entries.previous",
-      key: "K, Up",
+      name: tShortcuts("keys.entries.previous"),
+      key: "K, ArrowUp",
     },
     next: {
-      name: "keys.entries.next",
-      key: "J, Down",
+      name: tShortcuts("keys.entries.next"),
+      key: "J, ArrowDown",
     },
     markAllAsRead: {
-      name: "keys.entries.markAllAsRead",
+      name: tShortcuts("keys.entries.markAllAsRead"),
       key: "Shift+Meta+A",
     },
     toggleUnreadOnly: {
-      name: "keys.entries.toggleUnreadOnly",
+      name: tShortcuts("keys.entries.toggleUnreadOnly"),
       key: "U",
     },
   },
   entry: {
     toggleRead: {
-      name: "keys.entry.toggleRead",
+      name: tShortcuts("keys.entry.toggleRead"),
       key: "M",
     },
     toggleStarred: {
-      name: "keys.entry.toggleStarred",
+      name: tShortcuts("keys.entry.toggleStarred"),
       key: "S",
     },
     openInBrowser: {
@@ -81,43 +81,51 @@ const shortcutConfigs = {
       extra: "Double Click",
     },
     tts: {
-      name: "keys.entry.tts",
+      name: tShortcuts("keys.entry.tts"),
       key: "Shift+Meta+V",
     },
     copyLink: {
-      name: "keys.entry.copyLink",
+      name: tShortcuts("keys.entry.copyLink"),
       key: "Shift+Meta+C",
     },
     copyTitle: {
-      name: "keys.entry.copyTitle",
+      name: tShortcuts("keys.entry.copyTitle"),
       key: "Shift+Meta+B",
     },
     tip: {
-      name: "keys.entry.tip",
+      name: tShortcuts("keys.entry.tip"),
       key: "Shift+Meta+T",
     },
     share: {
-      name: "keys.entry.share",
+      name: tShortcuts("keys.entry.share"),
       key: "Meta+Alt+S",
     },
     scrollUp: {
-      name: "keys.entry.scrollUp",
+      name: tShortcuts("keys.entry.scrollUp"),
       key: "K",
     },
     scrollDown: {
-      name: "keys.entry.scrollDown",
+      name: tShortcuts("keys.entry.scrollDown"),
       key: "J",
     },
+    nextEntry: {
+      name: tShortcuts("keys.entries.next"),
+      key: "L, ArrowRight",
+    },
+    previousEntry: {
+      name: tShortcuts("keys.entries.previous"),
+      key: "H, ArrowLeft",
+    },
   },
   audio: {
     "play/pause": {
-      name: "keys.audio.playPause",
+      name: tShortcuts("keys.audio.playPause"),
       key: "Space",
     },
   },
   misc: {
     quickSearch: {
-      name: "keys.misc.quickSearch",
+      name: tShortcuts("keys.misc.quickSearch"),
       key: "Meta+K",
     },
   },
diff --git a/apps/desktop/layer/renderer/src/global.d.ts b/apps/desktop/layer/renderer/src/global.d.ts
@@ -34,6 +34,21 @@ declare global {
   export type I18nKeys = OmitStringType<Parameters<typeof t>[0]>
   export type I18nKeysForSettings = OmitStringType<Parameters<typeof settingsT>[0]>
   export type I18nKeysForShortcuts = OmitStringType<Parameters<typeof shortcutsT>[0]>
+
+  // MACROS
+
+  /**
+   * This function is a macro, will replace in the build stage.
+   */
+  export function tShortcuts(key: I18nKeysForShortcuts): I18nKeysForShortcuts
+  /**
+   * This function is a macro, will replace in the build stage.
+   */
+  export function tSettings(key: I18nKeysForSettings): I18nKeysForSettings
+  /**
+   * This function is a macro, will replace in the build stage.
+   */
+  export function t_(key: I18nKeys): I18nKeys
 }
 
 export {}
diff --git a/apps/desktop/layer/renderer/src/modules/command/hooks/use-register-hotkey.ts b/apps/desktop/layer/renderer/src/modules/command/hooks/use-register-hotkey.ts
@@ -33,6 +33,7 @@ export const useCommandHotkey = <T extends FollowCommandId>({
     shortcuts.forEach((key) => {
       keyMap[key] = (event) => {
         event.preventDefault()
+        event.stopPropagation()
 
         const command = getCommand(commandId)
         if (!command) return
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx
@@ -100,48 +100,12 @@ export const EntryContent: Component<EntryContentProps> = ({
   })
 
   const isInPeekModal = useInPeekModal()
-  const [isUserInteraction, setIsUserInteraction] = React.useState(false)
-
-  useConditionalHotkeyScope(HotkeyScope.EntryRender, isUserInteraction, true)
 
-  const activeScope = useHotkeyScope()
-
-  useCommandHotkey({
-    shortcut: shortcuts.entry.scrollUp.key,
-    commandId: COMMAND_ID.entryRender.scrollUp,
-    when: activeScope.includes(HotkeyScope.EntryRender),
-  })
-
-  useCommandHotkey({
-    shortcut: shortcuts.entry.scrollDown.key,
-    commandId: COMMAND_ID.entryRender.scrollDown,
-    when: activeScope.includes(HotkeyScope.EntryRender),
+  const { setIsUserInteraction } = useRegisterCommands({
+    entryId,
+    scrollerRef,
   })
 
-  useEffect(() => {
-    return EventBus.subscribe(COMMAND_ID.entryRender.scrollUp, () => {
-      const currentScroll = scrollerRef.current?.scrollTop
-      const delta = window.innerHeight
-
-      if (typeof currentScroll === "number" && delta) {
-        springScrollTo(currentScroll - delta, scrollerRef.current!)
-      }
-    })
-  }, [])
-
-  useEffect(() => {
-    return EventBus.subscribe(COMMAND_ID.entryRender.scrollDown, () => {
-      const currentScroll = scrollerRef.current?.scrollTop
-      const delta = window.innerHeight
-      if (typeof currentScroll === "number" && delta) {
-        springScrollTo(currentScroll + delta, scrollerRef.current!)
-      }
-    })
-  }, [])
-
-  useEffect(() => {
-    return () => setIsUserInteraction(false)
-  }, [entryId])
   if (!entry) return null
 
   const entryContent = isInReadabilityMode
@@ -321,3 +285,71 @@ const Renderer: React.FC<{
     </EntryContentHTMLRenderer>
   )
 })
+
+const useRegisterCommands = ({
+  entryId,
+  scrollerRef,
+}: {
+  entryId: string
+  scrollerRef: React.RefObject<HTMLDivElement | null>
+}) => {
+  const [isUserInteraction, setIsUserInteraction] = React.useState(false)
+  useConditionalHotkeyScope(HotkeyScope.EntryRender, isUserInteraction, true)
+
+  const activeScope = useHotkeyScope()
+  const when = activeScope.includes(HotkeyScope.EntryRender)
+
+  useCommandHotkey({
+    shortcut: shortcuts.entry.scrollUp.key,
+    commandId: COMMAND_ID.entryRender.scrollUp,
+    when,
+  })
+
+  useCommandHotkey({
+    shortcut: shortcuts.entry.scrollDown.key,
+    commandId: COMMAND_ID.entryRender.scrollDown,
+    when,
+  })
+
+  useCommandHotkey({
+    shortcut: shortcuts.entry.nextEntry.key,
+    commandId: COMMAND_ID.timeline.switchToNext,
+
+    when,
+  })
+
+  useCommandHotkey({
+    shortcut: shortcuts.entry.previousEntry.key,
+    commandId: COMMAND_ID.timeline.switchToPrevious,
+    when,
+  })
+
+  useEffect(() => {
+    return EventBus.subscribe(COMMAND_ID.entryRender.scrollUp, () => {
+      const currentScroll = scrollerRef.current?.scrollTop
+      const delta = window.innerHeight
+
+      if (typeof currentScroll === "number" && delta) {
+        springScrollTo(currentScroll - delta, scrollerRef.current!)
+      }
+    })
+  }, [scrollerRef])
+
+  useEffect(() => {
+    return EventBus.subscribe(COMMAND_ID.entryRender.scrollDown, () => {
+      const currentScroll = scrollerRef.current?.scrollTop
+      const delta = window.innerHeight
+      if (typeof currentScroll === "number" && delta) {
+        springScrollTo(currentScroll + delta, scrollerRef.current!)
+      }
+    })
+  }, [scrollerRef])
+
+  useEffect(() => {
+    return () => setIsUserInteraction(false)
+  }, [entryId])
+
+  return {
+    setIsUserInteraction,
+  }
+}
diff --git a/apps/desktop/plugins/vite/ast.ts b/apps/desktop/plugins/vite/ast.ts
@@ -2,5 +2,7 @@ import { RemoveWrapperFunction } from "unplugin-ast/transformers"
 import AST from "unplugin-ast/vite"
 
 export const astPlugin = AST({
-  transformer: [RemoveWrapperFunction(["tw", "defineSettingPageData"])],
+  transformer: [
+    RemoveWrapperFunction(["tw", "defineSettingPageData", "t_", "tShortcuts", "tSettings"]),
+  ],
 })
diff --git a/packages/internal/components/src/ui/kbd/Kbd.tsx b/packages/internal/components/src/ui/kbd/Kbd.tsx
@@ -10,6 +10,10 @@ const SharedKeys = {
   pageup: "PageUp",
   pagedown: "PageDown",
   tab: "Tab",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→",
 }
 const SpecialKeys = {
   Windows: {
