fix(desktop): add highlight boundary condition

Innei · Innei · commit f52cf91d9b2a · 2025-05-22T13:13:47.000+08:00
- Updated EventBus dispatch calls in layout commands to include a highlightBoundary parameter for better focus control.
- Modified EntryItemWrapper to dispatch focus command with highlightBoundary set to false after a timeout.
- Adjusted GlobalHotkeysProvider to dispatch focus commands with highlightBoundary set to true for improved user experience.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/modules/command/commands/layout.tsx b/apps/desktop/layer/renderer/src/modules/command/commands/layout.tsx
@@ -7,11 +7,14 @@ import { useRegisterCommandEffect } from "../hooks/use-register-command"
 import type { Command } from "../types"
 import { COMMAND_ID } from "./id"
 
+interface FocusEvent {
+  highlightBoundary: boolean
+}
 declare module "@follow/utils/event-bus" {
   interface EventBusMap {
-    "layout:focus-to-timeline": never
-    "layout:focus-to-subscription": never
-    "layout:focus-to-entry-render": never
+    "layout:focus-to-timeline": FocusEvent
+    "layout:focus-to-subscription": FocusEvent
+    "layout:focus-to-entry-render": FocusEvent
   }
 }
 
@@ -28,21 +31,21 @@ export const useRegisterLayoutCommands = () => {
       id: COMMAND_ID.layout.focusToTimeline,
       label: "Focus to timeline",
       run: () => {
-        EventBus.dispatch(COMMAND_ID.layout.focusToTimeline)
+        EventBus.dispatch(COMMAND_ID.layout.focusToTimeline, { highlightBoundary: true })
       },
     },
     {
       id: COMMAND_ID.layout.focusToSubscription,
       label: "Focus to subscription",
       run: () => {
-        EventBus.dispatch(COMMAND_ID.layout.focusToSubscription)
+        EventBus.dispatch(COMMAND_ID.layout.focusToSubscription, { highlightBoundary: true })
       },
     },
     {
       id: COMMAND_ID.layout.focusToEntryRender,
       label: "Enter Selected Entry",
       run: () => {
-        EventBus.dispatch(COMMAND_ID.layout.focusToEntryRender)
+        EventBus.dispatch(COMMAND_ID.layout.focusToEntryRender, { highlightBoundary: true })
       },
     },
     {
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
@@ -77,7 +77,10 @@ export const EntryItemWrapper: FC<
         entryId: entry.entries.id,
       })
 
-      setTimeout(() => EventBus.dispatch(COMMAND_ID.layout.focusToEntryRender), 60)
+      setTimeout(
+        () => EventBus.dispatch(COMMAND_ID.layout.focusToEntryRender, { highlightBoundary: false }),
+        60,
+      )
     },
     [asRead, entry.entries.id, entry.feedId, navigate],
   )
diff --git a/apps/desktop/layer/renderer/src/providers/global-hotkeys-provider.tsx b/apps/desktop/layer/renderer/src/providers/global-hotkeys-provider.tsx
@@ -42,7 +42,7 @@ export const GlobalHotkeysProvider = () => {
       activeScopes[0] === HotkeyScope.Home &&
       e.target === document.body
     ) {
-      EventBus.dispatch(COMMAND_ID.layout.focusToTimeline)
+      EventBus.dispatch(COMMAND_ID.layout.focusToTimeline, { highlightBoundary: true })
     }
   })
   // Re force to sidebar focusable
@@ -53,7 +53,7 @@ export const GlobalHotkeysProvider = () => {
       activeScopes.length === 1 &&
       activeScopes[0] === HotkeyScope.Home
     ) {
-      EventBus.dispatch(COMMAND_ID.layout.focusToTimeline)
+      EventBus.dispatch(COMMAND_ID.layout.focusToTimeline, { highlightBoundary: true })
     }
   })
 
diff --git a/packages/internal/utils/src/event-bus.ts b/packages/internal/utils/src/event-bus.ts
@@ -11,11 +11,18 @@ class EventBusEvent extends Event {
     super(EventBusEvent.type)
   }
 }
+
+type IDispatcher<E> = <T extends keyof E>(
+  ...args: E[T] extends never ? [event: T] : [event: T, data: E[T]]
+) => void
 type AnyObject = Record<string, any>
 class EventBusStatic<E extends AnyObject> {
-  dispatch<T extends keyof E>(event: T, data: E[T]): void
-  dispatch<T extends keyof E>(event: T): void
-  dispatch<T extends keyof E>(event: T, data?: E[T]) {
+  constructor() {
+    this.dispatch = this.dispatch.bind(this)
+    this.subscribe = this.subscribe.bind(this)
+    this.unsubscribe = this.unsubscribe.bind(this)
+  }
+  dispatch: IDispatcher<E> = <T extends keyof E>(event: T, data?: E[T]) => {
     window.dispatchEvent(new EventBusEvent(event as string, data))
   }
 
