feat(shortcuts): add toggle folder collapse shortcut and command

Innei · Innei · commit b42c53fdd502 · 2025-05-15T22:16:11.000+08:00
- Introduced a new keyboard shortcut for toggling folder collapse with the key "Z".
- Updated command IDs to include the new toggleFolderCollapse command.
- Enhanced the subscription command registration to handle the new toggle functionality.
- Updated localization files to include the new shortcut description.

These changes improve user navigation and interaction with subscription folders in the application.

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
@@ -33,6 +33,10 @@ const shortcutConfigs = {
       name: tShortcuts("keys.subscriptions.previousSubscription"),
       key: "K, ArrowUp",
     },
+    toggleFolderCollapse: {
+      name: tShortcuts("keys.subscriptions.toggleFolderCollapse"),
+      key: "Z",
+    },
   },
   layout: {
     toggleSidebar: {
diff --git a/apps/desktop/layer/renderer/src/modules/command/commands/id.ts b/apps/desktop/layer/renderer/src/modules/command/commands/id.ts
@@ -73,5 +73,7 @@ export const COMMAND_ID = {
 
     nextSubscription: "subscription:next",
     previousSubscription: "subscription:previous",
+
+    toggleFolderCollapse: "subscription:toggle-folder-collapse",
   },
 } 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
@@ -17,6 +17,7 @@ declare module "@follow/utils/event-bus" {
 
     "subscription:next": never
     "subscription:previous": never
+    "subscription:toggle-folder-collapse": never
   }
 }
 const LABEL_PREFIX = "Subscription"
@@ -92,6 +93,13 @@ export const useRegisterSubscriptionCommands = () => {
         EventBus.dispatch(COMMAND_ID.subscription.previousSubscription)
       },
     },
+    {
+      id: COMMAND_ID.subscription.toggleFolderCollapse,
+      label: `${LABEL_PREFIX}: Toggle Folder Collapse`,
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.subscription.toggleFolderCollapse)
+      },
+    },
   ])
 }
 
@@ -145,6 +153,11 @@ type PreviousSubscriptionCommand = Command<{
   fn: () => void
 }>
 
+type ToggleFolderCollapseCommand = Command<{
+  id: typeof COMMAND_ID.subscription.toggleFolderCollapse
+  fn: () => void
+}>
+
 export type SubscriptionCommand =
   | SwitchTabToNextCommand
   | SwitchTabToPreviousCommand
@@ -156,3 +169,4 @@ export type SubscriptionCommand =
   | SwitchTabToNotificationCommand
   | NextSubscriptionCommand
   | PreviousSubscriptionCommand
+  | ToggleFolderCollapseCommand
diff --git a/apps/desktop/layer/renderer/src/modules/command/hooks/use-command-shortcut.ts b/apps/desktop/layer/renderer/src/modules/command/hooks/use-command-shortcut.ts
@@ -30,6 +30,8 @@ const defaultCommandShortcuts = {
 
   [COMMAND_ID.entryRender.nextEntry]: shortcuts.entry.nextEntry.key,
   [COMMAND_ID.entryRender.previousEntry]: shortcuts.entry.previousEntry.key,
+
+  [COMMAND_ID.subscription.toggleFolderCollapse]: shortcuts.subscriptions.toggleFolderCollapse.key,
 } as const
 
 export type BindingCommandId = keyof typeof defaultCommandShortcuts
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/FeedCategory.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/FeedCategory.tsx
@@ -289,6 +289,7 @@ function FeedCategoryImpl({ data: ids, view, categoryOpenStateData }: FeedCatego
         >
           <div className="flex w-full min-w-0 items-center" onDoubleClick={toggleCategoryOpenState}>
             <button
+              data-type="collapse"
               type="button"
               onClick={toggleCategoryOpenState}
               data-state={open ? "open" : "close"}
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/FeedList.electron.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/FeedList.electron.tsx
@@ -11,7 +11,7 @@ import { cn, combineCleanupFunctions, isKeyForMultiSelectPressed } from "@follow
 import { memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import Selecto from "react-selecto"
-import { useEventListener } from "usehooks-ts"
+import { useEventCallback, useEventListener } from "usehooks-ts"
 
 import { useRouteParams } from "~/hooks/biz/useRouteParams"
 import { useAuthQuery } from "~/hooks/common"
@@ -298,6 +298,8 @@ FeedListImpl.displayName = "FeedListImpl"
 
 export const FeedList = memo(FeedListImpl)
 
+const FeedCategoryPrefix = "feed-category-"
+
 const useRegisterCommand = () => {
   const isFocus = useFocusable()
   const focusableContainerRef = useFocusableContainerRef()
@@ -319,15 +321,29 @@ const useRegisterCommand = () => {
     shortcut: "Enter",
   })
 
+  useCommandBinding({
+    commandId: COMMAND_ID.subscription.toggleFolderCollapse,
+    when: isFocus,
+  })
+
+  const getCurrentActiveSubscriptionElement = useEventCallback(() => {
+    const container = focusableContainerRef.current
+    if (!container) return
+
+    const allSubscriptions = Array.from(container.querySelectorAll("[data-sub]"))
+    if (allSubscriptions.length === 0) return
+
+    const currentActive = container.querySelector("[data-active=true]")
+
+    return [currentActive as HTMLElement | null, allSubscriptions] as const
+  })
+
   useEffect(() => {
     const handleSubscriptionNavigation = (direction: "next" | "previous") => {
-      const container = focusableContainerRef.current
-      if (!container) return
+      const result = getCurrentActiveSubscriptionElement()
+      if (!result) return
 
-      const allSubscriptions = Array.from(container.querySelectorAll("[data-sub]"))
-      if (allSubscriptions.length === 0) return
-
-      const currentActive = container.querySelector("[data-active=true]")
+      const [currentActive, allSubscriptions] = result
 
       if (!currentActive) {
         // If no active item, select first or last based on direction
@@ -348,7 +364,7 @@ const useRegisterCommand = () => {
       const targetElement = allSubscriptions[targetIndex] as HTMLElement | null
 
       // Cleanup selected feed
-      const targetIsCategoryOrFolder = targetElement?.dataset.sub?.startsWith("feed-category-")
+      const targetIsCategoryOrFolder = targetElement?.dataset.sub?.startsWith(FeedCategoryPrefix)
       if (targetIsCategoryOrFolder) {
         setSelectedFeedIds([])
       }
@@ -368,6 +384,17 @@ const useRegisterCommand = () => {
           focusActions.highlightBoundary()
         })
       }),
+      EventBus.subscribe(COMMAND_ID.subscription.toggleFolderCollapse, () => {
+        const result = getCurrentActiveSubscriptionElement()
+        if (!result) return
+
+        const [currentActive] = result
+
+        if (currentActive?.dataset.sub?.startsWith(FeedCategoryPrefix)) {
+          setSelectedFeedIds([])
+          ;(currentActive.querySelector('[data-type="collapse"]') as HTMLElement | null)?.click()
+        }
+      }),
     )
-  }, [focusableContainerRef, focusActions])
+  }, [focusableContainerRef, focusActions, getCurrentActiveSubscriptionElement])
 }
diff --git a/locales/shortcuts/en.json b/locales/shortcuts/en.json
@@ -28,6 +28,7 @@
   "keys.subscriptions.switchNextView": "Switch to Next View",
   "keys.subscriptions.switchPreviousView": "Switch to Previous View",
   "keys.subscriptions.switchToView": "Switch to View",
+  "keys.subscriptions.toggleFolderCollapse": "Toggle Folder Collapse",
   "keys.type.audio": "audio",
   "keys.type.entries": "entries",
   "keys.type.entry": "entry",

Original file line number	Diff line number	Diff line change
`@@ -289,6 +289,7 @@ function FeedCategoryImpl({ data: ids, view, categoryOpenStateData }: FeedCatego`
`289`	`289`	`>`
`290`	`290`	`<div className="flex w-full min-w-0 items-center" onDoubleClick={toggleCategoryOpenState}>`
`291`	`291`	`<button`
	`292`	`+ data-type="collapse"`
`292`	`293`	`type="button"`
`293`	`294`	`onClick={toggleCategoryOpenState}`
`294`	`295`	`data-state={open ? "open" : "close"}`