feat: support vim keybinding navigation between entry content and timeline

Innei · Innei · commit c2d8ffaa19f5 · 2025-05-13T22:35:26.000+08:00
Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/components/ui/background/WindowUnderBlur.tsx b/apps/desktop/layer/renderer/src/components/ui/background/WindowUnderBlur.tsx
@@ -1,4 +1,4 @@
-import { Focusable } from "@follow/components/common/Focusable.js"
+import { Focusable } from "@follow/components/common/Focusable/index.js"
 import { SYSTEM_CAN_UNDER_BLUR_WINDOW } from "@follow/shared/constants"
 import { cn } from "@follow/utils/utils"
 
diff --git a/apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx b/apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx
@@ -1,4 +1,4 @@
-import { Focusable } from "@follow/components/common/Focusable.js"
+import { Focusable } from "@follow/components/common/Focusable/index.js"
 import { Spring } from "@follow/components/constants/spring.js"
 import { ActionButton, MotionButtonBase } from "@follow/components/ui/button/index.js"
 import type { HTMLMediaState } from "@follow/hooks"
diff --git a/apps/desktop/layer/renderer/src/modules/command/commands/id.ts b/apps/desktop/layer/renderer/src/modules/command/commands/id.ts
@@ -46,11 +46,13 @@ export const COMMAND_ID = {
   },
   layout: {
     toggleTimelineColumn: "layout:toggle-timeline-column",
+    focusToTimeline: "layout:focus-to-timeline",
   },
   timeline: {
     switchToNext: "timeline:switch-to-next",
     switchToPrevious: "timeline:switch-to-previous",
     refetch: "timeline:refetch",
+    enter: "timeline:enter",
   },
   entryRender: {
     scrollDown: "entry-render:scroll-down",
diff --git a/apps/desktop/layer/renderer/src/modules/command/commands/layout.tsx b/apps/desktop/layer/renderer/src/modules/command/commands/layout.tsx
@@ -1,9 +1,17 @@
+import { EventBus } from "@follow/utils/event-bus"
+
 import { setTimelineColumnShow } from "~/atoms/sidebar"
 
 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 {
+    "layout:focus-to-timeline": never
+  }
+}
+
 export const useRegisterLayoutCommands = () => {
   useRegisterCommandEffect([
     {
@@ -13,6 +21,13 @@ export const useRegisterLayoutCommands = () => {
         setTimelineColumnShow((show) => !show)
       },
     },
+    {
+      id: COMMAND_ID.layout.focusToTimeline,
+      label: "Focus to timeline",
+      run: () => {
+        EventBus.dispatch(COMMAND_ID.layout.focusToTimeline)
+      },
+    },
   ])
 }
 
@@ -21,4 +36,9 @@ export type ToggleTimelineColumnCommand = Command<{
   fn: () => void
 }>
 
-export type LayoutCommand = ToggleTimelineColumnCommand
+export type FocusToTimelineCommand = Command<{
+  id: typeof COMMAND_ID.layout.focusToTimeline
+  fn: () => void
+}>
+
+export type LayoutCommand = ToggleTimelineColumnCommand | FocusToTimelineCommand
diff --git a/apps/desktop/layer/renderer/src/modules/command/commands/timeline.tsx b/apps/desktop/layer/renderer/src/modules/command/commands/timeline.tsx
@@ -9,6 +9,7 @@ declare module "@follow/utils/event-bus" {
     "timeline:switch-to-next": never
     "timeline:switch-to-previous": never
     "timeline:refetch": never
+    "timeline:enter": never
   }
 }
 export const useRegisterTimelineCommand = () => {
@@ -35,6 +36,13 @@ export const useRegisterTimelineCommand = () => {
         EventBus.dispatch("timeline:refetch")
       },
     },
+    {
+      id: COMMAND_ID.timeline.enter,
+      label: "Enter Selected Entry",
+      run: () => {
+        EventBus.dispatch("timeline:enter")
+      },
+    },
   ])
 }
 
@@ -53,7 +61,13 @@ export type RefetchTimelineCommand = Command<{
   fn: () => void
 }>
 
+export type EnterTimelineCommand = Command<{
+  id: typeof COMMAND_ID.timeline.enter
+  fn: () => void
+}>
+
 export type TimelineCommand =
   | SwitchToNextTimelineCommand
   | SwitchToPreviousTimelineCommand
   | RefetchTimelineCommand
+  | EnterTimelineCommand
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/EntryColumnShortcutHandler.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/EntryColumnShortcutHandler.tsx
@@ -1,17 +1,19 @@
+import { useFocusable, useFocusActions } from "@follow/components/common/Focusable/hooks.js"
+import { useScrollViewElement } from "@follow/components/ui/scroll-area/hooks.js"
 import { useRefValue } from "@follow/hooks"
+import { nextFrame } from "@follow/utils/dom"
 import { EventBus } from "@follow/utils/event-bus"
 import type { FC } from "react"
-import { memo, useEffect, useLayoutEffect, useState } from "react"
+import { memo, useEffect } from "react"
 
-import { useMainContainerElement } from "~/atoms/dom"
 import { HotkeyScope } from "~/constants"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteEntryId } from "~/hooks/biz/useRouteParams"
 import { useConditionalHotkeyScope } from "~/hooks/common"
 import { useHotkeyScope } from "~/providers/hotkey-provider"
 
 import { COMMAND_ID } from "../command/commands/id"
-import { useCommandBinding } from "../command/hooks/use-register-hotkey"
+import { useCommandBinding, useCommandHotkey } from "../command/hooks/use-register-hotkey"
 
 export const EntryColumnShortcutHandler: FC<{
   refetch: () => void
@@ -40,6 +42,12 @@ export const EntryColumnShortcutHandler: FC<{
     when,
   })
 
+  useCommandHotkey({
+    commandId: COMMAND_ID.timeline.enter,
+    shortcut: "Enter",
+    when,
+  })
+
   const currentEntryIdRef = useRefValue(useRouteEntryId())
   const navigate = useNavigateEntry()
 
@@ -82,32 +90,18 @@ export const EntryColumnShortcutHandler: FC<{
     })
   }, [refetch])
 
-  const $mainContainer = useMainContainerElement()
-  const [isFocusIn, setIsFocusIn] = useState(false)
+  const $scrollArea = useScrollViewElement()
+  const { highlightBoundary } = useFocusActions()
+  useEffect(() => {
+    return EventBus.subscribe(COMMAND_ID.layout.focusToTimeline, () => {
+      $scrollArea?.focus()
+      nextFrame(highlightBoundary)
+    })
+  }, [$scrollArea, highlightBoundary])
 
-  useConditionalHotkeyScope(HotkeyScope.Timeline, isFocusIn, true)
+  const isFocusIn = useFocusable()
 
-  // Enable arrow key navigation shortcuts only when focus is on entryContent or entryList,
-  // entryList shortcuts should not be triggered in the feed col
-  useLayoutEffect(() => {
-    if (!$mainContainer) return
-    const handler = () => {
-      const target = document.activeElement
-
-      const isFocusIn = $mainContainer.contains(target) || $mainContainer === target
-
-      setIsFocusIn(isFocusIn)
-    }
-
-    handler()
-    // NOTE: focusin event will bubble to the document
-    document.addEventListener("focusin", handler)
-    document.addEventListener("focusout", handler)
-    return () => {
-      document.removeEventListener("focusin", handler)
-      document.removeEventListener("focusout", handler)
-    }
-  }, [$mainContainer])
+  useConditionalHotkeyScope(HotkeyScope.Timeline, isFocusIn, true)
 
   return null
 })
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/index.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/index.tsx
@@ -1,3 +1,4 @@
+import { Focusable } from "@follow/components/common/Focusable/index.js"
 import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { FeedViewType, views } from "@follow/constants"
 import { useTitle } from "@follow/hooks"
@@ -116,7 +117,7 @@ function EntryColumnImpl() {
 
   const ListComponent = views[view]!.gridMode ? EntryColumnGrid : EntryList
   return (
-    <div
+    <Focusable
       data-hide-in-print
       className="@container relative flex h-full flex-1 flex-col"
       onClick={
@@ -164,7 +165,7 @@ function EntryColumnImpl() {
           />
         )}
       </EntryColumnWrapper>
-    </div>
+    </Focusable>
   )
 }
 
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
@@ -1,10 +1,14 @@
-import { Focusable, useFocusable } from "@follow/components/common/Focusable.js"
+import {
+  Focusable,
+  useFocusable,
+  useFocusActions,
+} from "@follow/components/common/Focusable/index.js"
 import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.js"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
 import type { FeedViewType } from "@follow/constants"
 import { useTitle } from "@follow/hooks"
 import type { FeedModel, InboxModel } from "@follow/models/types"
-import { stopPropagation } from "@follow/utils/dom"
+import { nextFrame, stopPropagation } from "@follow/utils/dom"
 import { EventBus } from "@follow/utils/event-bus"
 import { springScrollTo } from "@follow/utils/scroller"
 import { cn, combineCleanupFunctions } from "@follow/utils/utils"
@@ -35,7 +39,7 @@ import { useFeedById } from "~/store/feed"
 import { useInboxById } from "~/store/inbox"
 
 import { COMMAND_ID } from "../command/commands/id"
-import { useCommandBinding } from "../command/hooks/use-register-hotkey"
+import { useCommandBinding, useCommandHotkey } from "../command/hooks/use-register-hotkey"
 import { EntryContentHTMLRenderer } from "../renderer/html"
 import { AISummary } from "./AISummary"
 import { EntryTimelineSidebar } from "./components/EntryTimelineSidebar"
@@ -136,9 +140,9 @@ export const EntryContent: Component<EntryContentProps> = ({
         onFocus={() => setIsUserInteraction(true)}
       >
         <RegisterCommands
-          entryId={entry.entries.id}
           scrollerRef={scrollerRef}
           isUserInteraction={isUserInteraction}
+          setIsUserInteraction={setIsUserInteraction}
         />
         <EntryTimelineSidebar entryId={entry.entries.id} />
         <EntryScrollArea className={className} scrollerRef={scrollerRef}>
@@ -299,10 +303,11 @@ const Renderer: React.FC<{
 const RegisterCommands = ({
   scrollerRef,
   isUserInteraction,
+  setIsUserInteraction,
 }: {
-  entryId: string
   scrollerRef: React.RefObject<HTMLDivElement | null>
   isUserInteraction: boolean
+  setIsUserInteraction: (isUserInteraction: boolean) => void
 }) => {
   const containerFocused = useFocusable()
   useConditionalHotkeyScope(HotkeyScope.EntryRender, isUserInteraction && containerFocused, true)
@@ -330,26 +335,43 @@ const RegisterCommands = ({
     when,
   })
 
-  useEffect(() => {
-    return EventBus.subscribe(COMMAND_ID.entryRender.scrollUp, () => {
-      const currentScroll = scrollerRef.current?.scrollTop
-      const delta = window.innerHeight
+  useCommandHotkey({
+    commandId: COMMAND_ID.layout.focusToTimeline,
+    when,
+    shortcut: "Backspace",
+  })
 
-      if (typeof currentScroll === "number" && delta) {
-        springScrollTo(currentScroll - delta, scrollerRef.current!)
-      }
-    })
-  }, [scrollerRef])
+  const { highlightBoundary } = useFocusActions()
 
   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])
+    return combineCleanupFunctions(
+      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!)
+        }
+      }),
+
+      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!)
+        }
+      }),
+      EventBus.subscribe(COMMAND_ID.timeline.enter, () => {
+        const $scroller = scrollerRef.current
+        if ($scroller) {
+          springScrollTo(0, $scroller)
+          $scroller.focus()
+          nextFrame(highlightBoundary)
+          setIsUserInteraction(true)
+        }
+      }),
+    )
+  }, [highlightBoundary, scrollerRef, setIsUserInteraction])
 
   return null
 }
diff --git a/apps/desktop/layer/renderer/src/modules/player/corner-player.tsx b/apps/desktop/layer/renderer/src/modules/player/corner-player.tsx
@@ -1,4 +1,4 @@
-import { useFocusable } from "@follow/components/common/Focusable.js"
+import { useFocusable } from "@follow/components/common/Focusable/index.js"
 import { Spring } from "@follow/components/constants/spring.js"
 import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@follow/components/ui/tooltip/index.jsx"
diff --git a/packages/internal/components/src/common/Focusable/Focusable.tsx b/packages/internal/components/src/common/Focusable/Focusable.tsx
@@ -1,9 +1,9 @@
-import { createContext, use, useImperativeHandle, useRef, useState } from "react"
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react"
 import { useEventListener } from "usehooks-ts"
 
-// const
-const FocusableContext = createContext(false)
-const FocusTargetRefContext = createContext<React.RefObject<HTMLElement | undefined>>(null!)
+import { FocusableContext, FocusActionsContext, FocusTargetRefContext } from "./context"
+import { highlightElement } from "./utils"
+
 export const Focusable: Component<
   React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 > = ({ ref, ...props }) => {
@@ -13,33 +13,35 @@ export const Focusable: Component<
 
   const containerRef = useRef<HTMLDivElement>(null)
   useImperativeHandle(ref, () => containerRef.current!)
+
+  const highlightBoundary = useCallback(() => {
+    if (!isFocusWithIn) return
+    const element = containerRef.current
+    if (!element) return
+
+    highlightElement(element)
+  }, [isFocusWithIn])
+
   useEventListener("focusin", (e) => {
     if (containerRef.current?.contains(e.target as Node)) {
       setIsFocusWithIn(true)
+      focusTargetRef.current = e.target as HTMLElement
+      if (import.meta.env.DEV) {
+        highlightElement(containerRef.current!)
+      }
     } else {
       setIsFocusWithIn(false)
+      focusTargetRef.current = undefined
     }
   })
 
-  // useEventListener("focusout", (e) => {
-  //   if (!containerRef.current?.contains(e.target as Node)) {
-  //     setIsFocusWithIn(false)
-  //   }
-  // })
-
   return (
     <FocusableContext value={isFocusWithIn}>
       <FocusTargetRefContext value={focusTargetRef}>
-        <div tabIndex={-1} role="region" ref={containerRef} {...rest} />
+        <FocusActionsContext value={useMemo(() => ({ highlightBoundary }), [highlightBoundary])}>
+          <div tabIndex={-1} role="region" ref={containerRef} {...rest} />
+        </FocusActionsContext>
       </FocusTargetRefContext>
     </FocusableContext>
   )
 }
-
-export const useFocusable = () => {
-  return use(FocusableContext)
-}
-
-export const useFocusTargetRef = () => {
-  return use(FocusTargetRefContext)
-}
diff --git a/packages/internal/components/src/common/Focusable/context.ts b/packages/internal/components/src/common/Focusable/context.ts
@@ -0,0 +1,7 @@
+import { createContext } from "react"
+
+export const FocusableContext = createContext(false)
+export const FocusTargetRefContext = createContext<React.RefObject<HTMLElement | undefined>>(null!)
+export const FocusActionsContext = createContext<{
+  highlightBoundary: () => void
+}>(null!)
diff --git a/packages/internal/components/src/common/Focusable/hooks.ts b/packages/internal/components/src/common/Focusable/hooks.ts
diff --git a/packages/internal/components/src/common/Focusable/index.ts b/packages/internal/components/src/common/Focusable/index.ts
diff --git a/packages/internal/components/src/common/Focusable/utils.ts b/packages/internal/components/src/common/Focusable/utils.ts
diff --git a/packages/internal/components/src/ui/button/action-button.tsx b/packages/internal/components/src/ui/button/action-button.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Focusable } from "@follow/components/common/Focusable.js"`
	`1`	`+import { Focusable } from "@follow/components/common/Focusable/index.js"`
`2`	`2`	`import { SYSTEM_CAN_UNDER_BLUR_WINDOW } from "@follow/shared/constants"`
`3`	`3`	`import { cn } from "@follow/utils/utils"`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { useFocusable } from "@follow/components/common/Focusable.js"`
	`1`	`+import { useFocusable } from "@follow/components/common/Focusable/index.js"`
`2`	`2`	`import { Spring } from "@follow/components/constants/spring.js"`
`3`	`3`	`import { useMobile } from "@follow/components/hooks/useMobile.js"`
`4`	`4`	`import { Tooltip, TooltipContent, TooltipTrigger } from "@follow/components/ui/tooltip/index.jsx"`