feat: enhance subscription command handling and shortcuts

Innei · Innei · commit 75a0520faa44 · 2025-05-12T21:58:16.000+08:00
- Added new subscription commands for switching between tabs, improving user navigation.
- Updated hotkeys for switching views to utilize the new commands, enhancing user experience.
- Refactored command manager to include subscription commands, ensuring better integration.
- Updated localization for new shortcuts to provide clear user guidance.

This update aims to streamline subscription navigation and improve overall usability.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/constants/hotkeys.ts b/apps/desktop/layer/renderer/src/constants/hotkeys.ts
@@ -7,4 +7,5 @@ export enum HotkeyScope {
   // Atom Scope
   Timeline = "timeline",
   EntryRender = "entry-render",
+  SubscriptionList = "subscription-list",
 }
diff --git a/apps/desktop/layer/renderer/src/constants/shortcuts.ts b/apps/desktop/layer/renderer/src/constants/shortcuts.ts
@@ -17,9 +17,13 @@ const shortcutConfigs = {
       name: "keys.feeds.switchToView",
       key: "1, 2, 3, 4, 5, 6",
     },
-    switchBetweenViews: {
-      name: "keys.feeds.switchBetweenViews",
-      key: "Tab, Left, Right",
+    switchNextView: {
+      name: "keys.feeds.switchNextView",
+      key: "Tab, ArrowRight",
+    },
+    switchPreviousView: {
+      name: "keys.feeds.switchPreviousView",
+      key: "Shift+Tab, ArrowLeft",
     },
   },
   layout: {
diff --git a/apps/desktop/layer/renderer/src/modules/command/command-manager.ts b/apps/desktop/layer/renderer/src/modules/command/command-manager.ts
@@ -5,6 +5,7 @@ import { useRegisterIntegrationCommands } from "./commands/integration"
 import { useRegisterLayoutCommands } from "./commands/layout"
 import { useRegisterListCommands } from "./commands/list"
 import { useRegisterSettingsCommands } from "./commands/settings"
+import { useRegisterSubscriptionCommands } from "./commands/subscription"
 import { useRegisterTimelineCommand } from "./commands/timeline"
 
 export const FollowCommandManager = () => {
@@ -16,5 +17,6 @@ export const FollowCommandManager = () => {
   useRegisterLayoutCommands()
   useRegisterTimelineCommand()
   useRegisterEntryRenderCommand()
+  useRegisterSubscriptionCommands()
   return null
 }
diff --git a/apps/desktop/layer/renderer/src/modules/command/commands/id.ts b/apps/desktop/layer/renderer/src/modules/command/commands/id.ts
@@ -56,4 +56,14 @@ export const COMMAND_ID = {
     scrollDown: "entry-render:scroll-down",
     scrollUp: "entry-render:scroll-up",
   },
+  subscription: {
+    switchTabToNext: "subscription:switch-tab-to-next",
+    switchTabToPrevious: "subscription:switch-tab-to-previous",
+    switchTabToArticle: "subscription:switch-tab-to-article",
+    switchTabToSocial: "subscription:switch-tab-to-social",
+    switchTabToPicture: "subscription:switch-tab-to-picture",
+    switchTabToVideo: "subscription:switch-tab-to-video",
+    switchTabToAudio: "subscription:switch-tab-to-audio",
+    switchTabToNotification: "subscription:switch-tab-to-notification",
+  },
 } as const
diff --git a/apps/desktop/layer/renderer/src/modules/command/commands/subscription.tsx b/apps/desktop/layer/renderer/src/modules/command/commands/subscription.tsx
@@ -0,0 +1,129 @@
+import { EventBus } from "@follow/utils/event-bus"
+
+import { useRegisterCommandEffect } from "../hooks/use-register-command"
+import type { Command } from "../types"
+import { COMMAND_ID } from "./id"
+
+declare module "@follow/utils/event-bus" {
+  interface EventBusMap {
+    "subscription:switch-tab-to-next": never
+    "subscription:switch-tab-to-previous": never
+    "subscription:switch-tab-to-article": never
+    "subscription:switch-tab-to-social": never
+    "subscription:switch-tab-to-picture": never
+    "subscription:switch-tab-to-video": never
+    "subscription:switch-tab-to-audio": never
+    "subscription:switch-tab-to-notification": never
+  }
+}
+const LABEL_PREFIX = "Subscription"
+export const useRegisterSubscriptionCommands = () => {
+  useRegisterCommandEffect([
+    {
+      id: COMMAND_ID.subscription.switchTabToNext,
+      label: `${LABEL_PREFIX}: Switch to next tab`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.switchTabToNext)
+      },
+    },
+    {
+      id: COMMAND_ID.subscription.switchTabToPrevious,
+      label: `${LABEL_PREFIX}: Switch to previous tab`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.switchTabToPrevious)
+      },
+    },
+    {
+      id: COMMAND_ID.subscription.switchTabToArticle,
+      label: `${LABEL_PREFIX}: Switch to article tab`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.switchTabToArticle)
+      },
+    },
+    {
+      id: COMMAND_ID.subscription.switchTabToSocial,
+      label: `${LABEL_PREFIX}: Switch to social tab`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.switchTabToSocial)
+      },
+    },
+    {
+      id: COMMAND_ID.subscription.switchTabToPicture,
+      label: `${LABEL_PREFIX}: Switch to picture tab`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.switchTabToPicture)
+      },
+    },
+    {
+      id: COMMAND_ID.subscription.switchTabToVideo,
+      label: `${LABEL_PREFIX}: Switch to video tab`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.switchTabToVideo)
+      },
+    },
+    {
+      id: COMMAND_ID.subscription.switchTabToAudio,
+      label: `${LABEL_PREFIX}: Switch to audio tab`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.switchTabToAudio)
+      },
+    },
+    {
+      id: COMMAND_ID.subscription.switchTabToNotification,
+      label: `${LABEL_PREFIX}: Switch to notification tab`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.switchTabToNotification)
+      },
+    },
+  ])
+}
+
+type SwitchTabToNextCommand = Command<{
+  id: typeof COMMAND_ID.subscription.switchTabToNext
+  fn: () => void
+}>
+
+type SwitchTabToPreviousCommand = Command<{
+  id: typeof COMMAND_ID.subscription.switchTabToPrevious
+  fn: () => void
+}>
+
+type SwitchTabToArticleCommand = Command<{
+  id: typeof COMMAND_ID.subscription.switchTabToArticle
+  fn: () => void
+}>
+
+type SwitchTabToSocialCommand = Command<{
+  id: typeof COMMAND_ID.subscription.switchTabToSocial
+  fn: () => void
+}>
+
+type SwitchTabToPictureCommand = Command<{
+  id: typeof COMMAND_ID.subscription.switchTabToPicture
+  fn: () => void
+}>
+
+type SwitchTabToVideoCommand = Command<{
+  id: typeof COMMAND_ID.subscription.switchTabToVideo
+  fn: () => void
+}>
+
+type SwitchTabToAudioCommand = Command<{
+  id: typeof COMMAND_ID.subscription.switchTabToAudio
+  fn: () => void
+}>
+
+type SwitchTabToNotificationCommand = Command<{
+  id: typeof COMMAND_ID.subscription.switchTabToNotification
+  fn: () => void
+}>
+
+export type SubscriptionCommand =
+  | SwitchTabToNextCommand
+  | SwitchTabToPreviousCommand
+  | SwitchTabToArticleCommand
+  | SwitchTabToSocialCommand
+  | SwitchTabToPictureCommand
+  | SwitchTabToVideoCommand
+  | SwitchTabToAudioCommand
+  | SwitchTabToNotificationCommand
diff --git a/apps/desktop/layer/renderer/src/modules/command/commands/types.ts b/apps/desktop/layer/renderer/src/modules/command/commands/types.ts
@@ -6,6 +6,7 @@ import type { GlobalCommand } from "./global"
 import type { IntegrationCommand } from "./integration"
 import type { LayoutCommand } from "./layout"
 import type { SettingsCommand } from "./settings"
+import type { SubscriptionCommand } from "./subscription"
 import type { TimelineCommand } from "./timeline"
 
 export type BasicCommand =
@@ -16,3 +17,4 @@ export type BasicCommand =
   | LayoutCommand
   | TimelineCommand
   | EntryRenderCommand
+  | SubscriptionCommand
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/EntryColumnShortcutHandler.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/EntryColumnShortcutHandler.tsx
@@ -47,7 +47,7 @@ export const EntryColumnShortcutHandler: FC<{
   const currentEntryIdRef = useRefValue(useRouteEntryId())
   const navigate = useNavigateEntry()
   useEffect(() => {
-    return EventBus.subscribe("timeline:switch-to-next", () => {
+    return EventBus.subscribe(COMMAND_ID.timeline.switchToNext, () => {
       const data = dataRef.current
       const currentActiveEntryIndex = data.indexOf(currentEntryIdRef.current || "")
 
@@ -63,7 +63,7 @@ export const EntryColumnShortcutHandler: FC<{
   }, [currentEntryIdRef, dataRef, handleScrollTo, navigate])
 
   useEffect(() => {
-    return EventBus.subscribe("timeline:switch-to-previous", () => {
+    return EventBus.subscribe(COMMAND_ID.timeline.switchToPrevious, () => {
       const data = dataRef.current
       const currentActiveEntryIndex = data.indexOf(currentEntryIdRef.current || "")
 
@@ -80,7 +80,7 @@ export const EntryColumnShortcutHandler: FC<{
   }, [currentEntryIdRef, dataRef, handleScrollTo, navigate])
 
   useEffect(() => {
-    return EventBus.subscribe("timeline:refetch", () => {
+    return EventBus.subscribe(COMMAND_ID.timeline.refetch, () => {
       refetch()
     })
   }, [refetch])
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/index.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/index.tsx
@@ -4,13 +4,13 @@ import { Routes } from "@follow/constants"
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import { useRegisterGlobalContext } from "@follow/shared/bridge"
 import { ELECTRON_BUILD } from "@follow/shared/constants"
+import { EventBus } from "@follow/utils/event-bus"
 import { clamp, cn } from "@follow/utils/utils"
 import { useWheel } from "@use-gesture/react"
 import { Lethargy } from "lethargy"
 import { AnimatePresence, m } from "motion/react"
 import type { FC, PropsWithChildren } from "react"
 import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"
-import { isHotkeyPressed, useHotkeys } from "react-hotkeys-hook"
 import { useLocation } from "react-router"
 
 import { useRootContainerElement } from "~/atoms/dom"
@@ -22,8 +22,12 @@ import { navigateEntry, useBackHome } from "~/hooks/biz/useNavigateEntry"
 import { useReduceMotion } from "~/hooks/biz/useReduceMotion"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 import { useTimelineList } from "~/hooks/biz/useTimelineList"
+import { useConditionalHotkeyScope } from "~/hooks/common"
+import { useHotkeyScope } from "~/providers/hotkey-provider"
 
 import { WindowUnderBlur } from "../../components/ui/background"
+import { COMMAND_ID } from "../command/commands/id"
+import { useCommandHotkey } from "../command/hooks/use-register-hotkey"
 import { getSelectedFeedIds, resetSelectedFeedIds, setSelectedFeedIds } from "./atom"
 import { useShouldFreeUpSpace } from "./hook"
 import { TimelineColumnHeader } from "./TimelineColumnHeader"
@@ -86,25 +90,6 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam
     { target: carouselRef },
   )
 
-  useHotkeys(
-    shortcuts.feeds.switchBetweenViews.key,
-    (e) => {
-      e.preventDefault()
-      if (isHotkeyPressed("Left")) {
-        setActive((_, i) => {
-          if (i === 0) {
-            return timelineList.at(-1)!
-          } else {
-            return timelineList[i - 1]!
-          }
-        })
-      } else {
-        setActive((_, i) => timelineList[(i + 1) % timelineList.length]!)
-      }
-    },
-    { scopes: HotkeyScope.Home },
-  )
-
   useRegisterGlobalContext("goToDiscover", () => {
     window.router.navigate(Routes.Discover)
   })
@@ -121,9 +106,17 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam
   const feedColumnShow = useTimelineColumnShow()
   const rootContainerElement = useRootContainerElement()
 
+  const { setIsFocus } = useRegisterCommands({ setActive, timelineList })
+
   return (
     <WindowUnderBlur
       data-hide-in-print
+      onFocus={useCallback(() => {
+        setIsFocus(true)
+      }, [setIsFocus])}
+      onBlur={useCallback(() => {
+        setIsFocus(false)
+      }, [setIsFocus])}
       className={cn(
         "relative flex h-full flex-col pt-2.5",
 
@@ -241,3 +234,45 @@ const SwipeWrapper: FC<{ active: string; children: React.JSX.Element[] }> = memo
     )
   },
 )
+
+const useRegisterCommands = ({
+  setActive,
+  timelineList,
+}: {
+  setActive: (args: string | ((prev: string | undefined, index: number) => string)) => void
+  timelineList: string[]
+}) => {
+  const activeScope = useHotkeyScope()
+  const when =
+    activeScope.includes(HotkeyScope.SubscriptionList) || activeScope.includes(HotkeyScope.Timeline)
+  useCommandHotkey({
+    commandId: COMMAND_ID.subscription.switchTabToNext,
+    shortcut: shortcuts.feeds.switchNextView.key,
+    when,
+  })
+
+  useCommandHotkey({
+    commandId: COMMAND_ID.subscription.switchTabToPrevious,
+    shortcut: shortcuts.feeds.switchPreviousView.key,
+    when,
+  })
+
+  useEffect(() => {
+    return EventBus.subscribe(COMMAND_ID.subscription.switchTabToNext, () => {
+      setActive((_, i) => timelineList[(i + 1) % timelineList.length]!)
+    })
+  }, [activeScope, setActive, timelineList])
+
+  useEffect(() => {
+    return EventBus.subscribe(COMMAND_ID.subscription.switchTabToPrevious, () => {
+      setActive((_, i) => timelineList[(i - 1 + timelineList.length) % timelineList.length]!)
+    })
+  }, [activeScope, setActive, timelineList])
+
+  const [isFocus, setIsFocus] = useState(false)
+
+  useConditionalHotkeyScope(HotkeyScope.SubscriptionList, isFocus, true)
+  return {
+    setIsFocus,
+  }
+}
diff --git a/locales/shortcuts/en.json b/locales/shortcuts/en.json
@@ -18,6 +18,8 @@
   "keys.entry.tts": "Play TTS",
   "keys.feeds.add": "Add Subscription",
   "keys.feeds.switchBetweenViews": "Switch Between Views",
+  "keys.feeds.switchNextView": "Switch to Next View",
+  "keys.feeds.switchPreviousView": "Switch to Previous View",
   "keys.feeds.switchToView": "Switch to View",
   "keys.layout.showShortcuts": "Show/Hide Shortcuts",
   "keys.layout.toggleSidebar": "Show/Hide Feed Sidebar",

Original file line number	Diff line number	Diff line change
`@@ -7,4 +7,5 @@ export enum HotkeyScope {`
`7`	`7`	`// Atom Scope`
`8`	`8`	`Timeline = "timeline",`
`9`	`9`	`EntryRender = "entry-render",`
	`10`	`+ SubscriptionList = "subscription-list",`
`10`	`11`	`}`