fix(desktop): add highlight boundary condition

- 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 <tukon479@gmail.com>
This commit is contained in:
Innei 2025-05-22 13:13:47 +08:00
parent 9f011216e8
commit f52cf91d9b
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
4 changed files with 25 additions and 12 deletions

View File

@ -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 })
},
},
{

View File

@ -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],
)

View File

@ -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 })
}
})

View File

@ -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))
}