acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Create global keyboard shortcut handler (#10145)

Browse Source
This commit is contained in:
DS Boyce
2026-04-03 10:06:51 -07:00
committed by GitHub
parent e0ea778e58
commit cca3326b21
16 changed files with 257 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -199,6 +199,7 @@
"react": "19.1.0",
"react-compiler-runtime": "^19.1.0-rc.1",
"react-dom": "19.1.0",
"react-hotkeys-hook": "5.2.4",
"react-image-crop": "^11.0.7",
"react-is": "19",
"react-keyed-flatten-children": "^5.0.0",
src/App.native.tsx
+13 -14
View File
@@ -11,8 +11,7 @@ import {
import * as ScreenOrientation from 'expo-screen-orientation'
import * as SplashScreen from 'expo-splash-screen'
import * as SystemUI from 'expo-system-ui'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import * as Sentry from '@sentry/react-native'
import {Provider as HideBottomBarBorderProvider} from '#/lib/hooks/useHideBottomBarBorder'
@@ -89,9 +88,9 @@ import {Splash} from '#/Splash'
import {BottomSheetProvider} from '../modules/bottom-sheet'
import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
SplashScreen.preventAutoHideAsync()
void SplashScreen.preventAutoHideAsync()
if (IS_IOS) {
SystemUI.setBackgroundColorAsync('black')
void SystemUI.setBackgroundColorAsync('black')
}
if (IS_ANDROID) {
// iOS is handled by the config plugin -sfn
@@ -105,17 +104,17 @@ if (IS_ANDROID) {
/**
* Begin geolocation ASAP
*/
Geo.resolve()
prefetchAgeAssuranceConfig()
prefetchLiveEvents()
prefetchAppConfig()
void Geo.resolve()
void prefetchAgeAssuranceConfig()
void prefetchLiveEvents()
void prefetchAppConfig()
function InnerApp() {
const [isReady, setIsReady] = useState(false)
const {currentAccount} = useSession()
const {resumeSession} = useSessionApi()
const theme = useColorModeTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const hasCheckedReferrer = useStarterPackEntry()
// init
@@ -134,16 +133,16 @@ function InnerApp() {
}
}
const account = readLastActiveAccount()
onLaunch(account)
void onLaunch(account)
}, [resumeSession])
useEffect(() => {
return listenSessionDropped(() => {
Toast.show(_(msg`Sorry! Your session expired. Please sign in again.`), {
Toast.show(l`Sorry! Your session expired. Please sign in again.`, {
type: 'info',
})
})
}, [_])
}, [l])
return (
<Alf theme={theme}>
@@ -220,8 +219,8 @@ function App() {
const [isReady, setReady] = useState(false)
useEffect(() => {
Promise.all([initPersistedState(), Geo.resolve(), setupDeviceId]).then(() =>
setReady(true),
void Promise.all([initPersistedState(), Geo.resolve(), setupDeviceId]).then(
() => setReady(true),
)
}, [])
src/App.web.tsx
+17 -15
View File
@@ -5,10 +5,10 @@ import './style.css'
import {Fragment, useEffect, useState} from 'react'
import {KeyboardProvider as KeyboardControllerProvider} from 'react-native-keyboard-controller'
import {SafeAreaProvider} from 'react-native-safe-area-context'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import * as Sentry from '@sentry/react-native'
import {Provider as HotkeysProvider} from '#/lib/hotkeys'
import {QueryProvider} from '#/lib/react-query'
import {ThemeProvider} from '#/lib/ThemeContext'
import {Provider as TranslateOnDeviceProvider} from '#/lib/translation'
@@ -82,17 +82,17 @@ import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottom
/**
* Begin geolocation ASAP
*/
Geo.resolve()
prefetchAgeAssuranceConfig()
prefetchLiveEvents()
prefetchAppConfig()
void Geo.resolve()
void prefetchAgeAssuranceConfig()
void prefetchLiveEvents()
void prefetchAppConfig()
function InnerApp() {
const [isReady, setIsReady] = useState(false)
const {currentAccount} = useSession()
const {resumeSession} = useSessionApi()
const theme = useColorModeTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const hasCheckedReferrer = useStarterPackEntry()
// init
@@ -105,22 +105,22 @@ function InnerApp() {
await features.init
}
} catch (e) {
logger.error(`session: resumeSession failed`, {message: e})
logger.error('session: resumeSession failed', {message: e})
} finally {
setIsReady(true)
}
}
const account = readLastActiveAccount()
onLaunch(account)
void onLaunch(account)
}, [resumeSession])
useEffect(() => {
return listenSessionDropped(() => {
Toast.show(_(msg`Sorry! Your session expired. Please sign in again.`), {
Toast.show(l`Sorry! Your session expired. Please sign in again.`, {
type: 'info',
})
})
}, [_])
}, [l])
return (
<Alf theme={theme}>
@@ -156,8 +156,10 @@ function InnerApp() {
<HideBottomBarBorderProvider>
<IntentDialogProvider>
<TranslateOnDeviceProvider>
<Shell />
<ToastOutlet />
<HotkeysProvider>
<Shell />
<ToastOutlet />
</HotkeysProvider>
</TranslateOnDeviceProvider>
</IntentDialogProvider>
</HideBottomBarBorderProvider>
@@ -195,8 +197,8 @@ function App() {
const [isReady, setReady] = useState(false)
useEffect(() => {
Promise.all([initPersistedState(), Geo.resolve(), setupDeviceId]).then(() =>
setReady(true),
void Promise.all([initPersistedState(), Geo.resolve(), setupDeviceId]).then(
() => setReady(true),
)
}, [])
src/components/forms/SearchInput.tsx
+79 -62
View File
@@ -1,8 +1,9 @@
import {forwardRef} from 'react'
import {useEffect, useRef} from 'react'
import {type TextInput, View} from 'react-native'
import {useLingui} from '@lingui/react/macro'
import {HITSLOP_10} from '#/lib/constants'
import {listenFocusSearch} from '#/state/events'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import * as TextField from '#/components/forms/TextField'
@@ -10,73 +11,89 @@ import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
import {IS_NATIVE} from '#/env'
type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
type Props = Omit<TextField.InputProps, 'label'> & {
label?: TextField.InputProps['label']
/**
* Called when the user presses the (X) button
*/
onClearText?: () => void
hotkey?: boolean
ref?: React.RefObject<TextInput | null>
}
export const SearchInput = forwardRef<TextInput, SearchInputProps>(
function SearchInput({value, label, onClearText, ...rest}, ref) {
const t = useTheme()
const {t: l} = useLingui()
const showClear = value && value.length > 0
export function SearchInput({
value,
label,
onClearText,
hotkey,
ref,
...rest
}: Props) {
const t = useTheme()
const {t: l} = useLingui()
const showClear = value && value.length > 0
const internalRef = useRef<TextInput>(null)
const inputRef = ref ?? internalRef
return (
<View style={[a.w_full, a.relative]}>
<TextField.Root>
<TextField.Icon icon={MagnifyingGlassIcon} />
<TextField.Input
inputRef={ref}
label={label || l`Search`}
value={value}
placeholder={l`Search`}
returnKeyType="search"
keyboardAppearance={t.scheme}
selectTextOnFocus={IS_NATIVE}
autoFocus={false}
accessibilityRole="search"
autoCorrect={false}
autoComplete="off"
autoCapitalize="none"
style={[
showClear
? {
paddingRight: 24,
}
: {},
]}
{...rest}
/>
</TextField.Root>
useEffect(() => {
if (!hotkey) return
return listenFocusSearch(() => {
inputRef.current?.focus()
})
}, [hotkey, inputRef])
{showClear && (
<View
style={[
a.absolute,
a.z_20,
a.my_auto,
a.inset_0,
a.justify_center,
a.pr_sm,
{left: 'auto'},
]}>
<Button
testID="searchTextInputClearBtn"
onPress={onClearText}
label={l`Clear search query`}
hitSlop={HITSLOP_10}
size="tiny"
shape="round"
variant="ghost"
color="secondary">
<ButtonIcon icon={X} size="xs" />
</Button>
</View>
)}
</View>
)
},
)
return (
<View style={[a.w_full, a.relative]}>
<TextField.Root>
<TextField.Icon icon={MagnifyingGlassIcon} />
<TextField.Input
inputRef={inputRef}
label={label || l`Search`}
value={value}
placeholder={l`Search`}
returnKeyType="search"
keyboardAppearance={t.scheme}
selectTextOnFocus={IS_NATIVE}
autoFocus={false}
accessibilityRole="search"
autoCorrect={false}
autoComplete="off"
autoCapitalize="none"
style={[
showClear
? {
paddingRight: 24,
}
: {},
]}
{...rest}
/>
</TextField.Root>
{showClear && (
<View
style={[
a.absolute,
a.z_20,
a.my_auto,
a.inset_0,
a.justify_center,
a.pr_sm,
{left: 'auto'},
]}>
<Button
testID="searchTextInputClearBtn"
onPress={onClearText}
label={l`Clear search query`}
hitSlop={HITSLOP_10}
size="tiny"
shape="round"
variant="ghost"
color="secondary">
<ButtonIcon icon={X} size="xs" />
</Button>
</View>
)}
</View>
)
}
src/lib/hotkeys/index.tsx
+76
View File
@@ -0,0 +1,76 @@
import React from 'react'
import {useLingui} from '@lingui/react/macro'
import {
HotkeysProvider,
useHotkeys,
useHotkeysContext,
} from 'react-hotkeys-hook'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {emitFocusSearch} from '#/state/events'
import {useSession} from '#/state/session'
enum Hotkeys {
OPEN_COMPOSER = 'n',
FOCUS_SEARCH = 'slash',
}
export function Provider({children}: React.PropsWithChildren<unknown>) {
return (
<HotkeysProvider initiallyActiveScopes={['global']}>
<KeyboardShortcuts>{children}</KeyboardShortcuts>
</HotkeysProvider>
)
}
export {useHotkeysContext}
function KeyboardShortcuts({children}: React.PropsWithChildren<unknown>) {
useKeyboardShortcuts()
return children
}
function useKeyboardShortcuts() {
const {openComposer} = useOpenComposer()
const {hasSession} = useSession()
const {t: l} = useLingui()
const shouldIgnore = (requiresSession: boolean = false) => {
if (requiresSession && !hasSession) {
return true
}
return false
}
const handleKey = (
callback: () => void,
options?: {requiresSession?: boolean},
) => {
if (shouldIgnore(options?.requiresSession)) {
return
}
callback()
}
useHotkeys(
Hotkeys.OPEN_COMPOSER,
() =>
handleKey(
() => {
openComposer({logContext: 'Other'})
},
{
requiresSession: true,
},
),
{scopes: ['global'], description: l`Compose new post`},
[openComposer],
)
useHotkeys(Hotkeys.FOCUS_SEARCH, () => handleKey(emitFocusSearch), {
scopes: ['global'],
preventDefault: true,
description: l`Focus the search field`,
})
}
src/screens/Search/Shell.tsx
+1
View File
@@ -380,6 +380,7 @@ export function SearchScreenShell({
inputPlaceholder ?? l`Search for posts, users, or feeds`
}
hitSlop={{...HITSLOP_20, top: 0}}
hotkey={true}
/>
</View>
{showAutocomplete && (
src/state/dialogs/index.tsx
+18 -8
View File
@@ -7,6 +7,7 @@ import {
useState,
} from 'react'
import {useHotkeysContext} from '#/lib/hotkeys'
import {type DialogControlRefProps} from '#/components/Dialog'
import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
import {IS_WEB} from '#/env'
@@ -62,6 +63,7 @@ export function useDialogFullyExpandedCountContext() {
export function Provider({children}: React.PropsWithChildren<{}>) {
const [fullyExpandedCount, setFullyExpandedCount] = useState(0)
const {disableScope, enableScope} = useHotkeysContext()
const activeDialogs = useRef<
Map<string, React.MutableRefObject<DialogControlRefProps>>
@@ -77,18 +79,26 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
return openDialogs.current.size > 0
} else {
BottomSheetNativeComponent.dismissAll()
void BottomSheetNativeComponent.dismissAll()
return false
}
}, [])
const setDialogIsOpen = useCallback((id: string, isOpen: boolean) => {
if (isOpen) {
openDialogs.current.add(id)
} else {
openDialogs.current.delete(id)
}
}, [])
const setDialogIsOpen = useCallback(
(id: string, isOpen: boolean) => {
if (isOpen) {
openDialogs.current.add(id)
} else {
openDialogs.current.delete(id)
}
if (openDialogs.current.size > 0) {
disableScope('global')
} else {
enableScope('global')
}
},
[disableScope, enableScope],
)
const context = useMemo<IDialogContext>(
() => ({
src/state/events.ts
+8
View File
@@ -45,3 +45,11 @@ export function listenPostCreated(fn: () => void): UnlistenFn {
emitter.on('post-created', fn)
return () => emitter.off('post-created', fn)
}
export function emitFocusSearch() {
emitter.emit('focus-search')
}
export function listenFocusSearch(fn: () => void): UnlistenFn {
emitter.on('focus-search', fn)
return () => emitter.off('focus-search', fn)
}
src/state/lightbox.tsx
+11 -1
View File
@@ -1,7 +1,8 @@
import {createContext, useContext, useMemo, useState} from 'react'
import {createContext, useContext, useEffect, useMemo, useState} from 'react'
import {nanoid} from 'nanoid/non-secure'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {useHotkeysContext} from '#/lib/hotkeys'
import {type ImageSource} from '#/view/com/lightbox/ImageViewing/@types'
export type Lightbox = {
@@ -28,6 +29,15 @@ LightboxControlContext.displayName = 'LightboxControlContext'
export function Provider({children}: React.PropsWithChildren<{}>) {
const [activeLightbox, setActiveLightbox] = useState<Lightbox | null>(null)
const {disableScope, enableScope} = useHotkeysContext()
useEffect(() => {
if (activeLightbox) {
disableScope('global')
} else {
enableScope('global')
}
}, [activeLightbox, disableScope, enableScope])
const openLightbox = useNonReactiveCallback(
(lightbox: Omit<Lightbox, 'id'>) => {
src/state/modals/index.tsx
+11 -1
View File
@@ -1,6 +1,7 @@
import {createContext, useContext, useMemo, useState} from 'react'
import {createContext, useContext, useEffect, useMemo, useState} from 'react'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {useHotkeysContext} from '#/lib/hotkeys'
export interface UserAddRemoveListsModal {
name: 'user-add-remove-lists'
@@ -47,6 +48,15 @@ ModalControlContext.displayName = 'ModalControlContext'
export function Provider({children}: React.PropsWithChildren<{}>) {
const [activeModals, setActiveModals] = useState<Modal[]>([])
const {disableScope, enableScope} = useHotkeysContext()
useEffect(() => {
if (activeModals.length > 0) {
disableScope('global')
} else {
enableScope('global')
}
}, [activeModals.length, disableScope, enableScope])
const openModal = useNonReactiveCallback((modal: Modal) => {
setActiveModals(modals => [...modals, modal])
src/state/shell/composer/useComposerKeyboardShortcut.tsx
-77
View File
@@ -1,77 +0,0 @@
import {useEffect} from 'react'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {useDialogStateContext} from '#/state/dialogs'
import {useLightbox} from '#/state/lightbox'
import {useModals} from '#/state/modals'
import {useSession} from '#/state/session'
import {useIsDrawerOpen} from '#/state/shell/drawer-open'
/**
* Based on {@link https://github.com/jaywcjlove/hotkeys-js/blob/b0038773f3b902574f22af747f3bb003a850f1da/src/index.js#L51C1-L64C2}
*/
function shouldIgnore(event: KeyboardEvent) {
const target: any = event.target || event.srcElement
if (!target) return false
const {tagName} = target
if (!tagName) return false
const isInput =
tagName === 'INPUT' &&
![
'checkbox',
'radio',
'range',
'button',
'file',
'reset',
'submit',
'color',
].includes(target.type)
// ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
if (
target.isContentEditable ||
((isInput || tagName === 'TEXTAREA' || tagName === 'SELECT') &&
!target.readOnly)
) {
return true
}
return false
}
export function useComposerKeyboardShortcut() {
const {openComposer} = useOpenComposer()
const {openDialogs} = useDialogStateContext()
const {isModalActive} = useModals()
const {activeLightbox} = useLightbox()
const isDrawerOpen = useIsDrawerOpen()
const {hasSession} = useSession()
useEffect(() => {
if (!hasSession) {
return
}
function handler(event: KeyboardEvent) {
if (shouldIgnore(event)) return
if (
openDialogs?.current.size > 0 ||
isModalActive ||
activeLightbox ||
isDrawerOpen
)
return
if (event.key === 'n' || event.key === 'N') {
openComposer({logContext: 'Other'})
}
}
document.addEventListener('keydown', handler)
return () => document.removeEventListener('keydown', handler)
}, [
openComposer,
isModalActive,
openDialogs,
activeLightbox,
isDrawerOpen,
hasSession,
])
}
src/state/shell/drawer-open.tsx
+15 -1
View File
@@ -1,5 +1,7 @@
import {createContext, useContext, useState} from 'react'
import {useHotkeysContext} from '#/lib/hotkeys'
type StateContext = boolean
type SetContext = (v: boolean) => void
@@ -10,10 +12,22 @@ setContext.displayName = 'DrawerOpenSetContext'
export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = useState(false)
const {disableScope, enableScope} = useHotkeysContext()
const setDrawerOpen = (open: boolean) => {
if (open) {
disableScope('global')
} else {
enableScope('global')
}
setState(open)
}
return (
<stateContext.Provider value={state}>
<setContext.Provider value={setState}>{children}</setContext.Provider>
<setContext.Provider value={setDrawerOpen}>
{children}
</setContext.Provider>
</stateContext.Provider>
)
}
src/view/shell/desktop/LeftNav.tsx
+1 -1
View File
@@ -580,7 +580,7 @@ function ComposeBtn() {
style={[a.rounded_full]}>
<ButtonIcon icon={EditBig} position="left" />
<ButtonText>
<Trans context="action">New Post</Trans>
<Trans context="action">New post</Trans>
</ButtonText>
</Button>
</View>
src/view/shell/desktop/Search.tsx
+1
View File
@@ -105,6 +105,7 @@ export function DesktopSearch() {
onChangeText={onChangeText}
onClearText={onPressCancelSearch}
onSubmitEditing={onSubmit}
hotkey={true}
/>
{tQuery !== '' && isActive && moderationOpts && (
<View
src/view/shell/index.web.tsx
-2
View File
@@ -9,7 +9,6 @@ import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
import {type NavigationProp} from '#/lib/routes/types'
import {useSession} from '#/state/session'
import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
import {useCloseAllActiveElements} from '#/state/util'
import {Lightbox} from '#/view/com/lightbox/Lightbox'
import {ModalsContainer} from '#/view/com/modals/Modal'
@@ -45,7 +44,6 @@ function ShellInner() {
const {state: policyUpdateState} = usePolicyUpdateContext()
const welcomeModalControl = useWelcomeModal()
useComposerKeyboardShortcut()
useIntentHandler()
useEffect(() => {
yarn.lock
+5
View File
@@ -13846,6 +13846,11 @@ react-freeze@^1.0.0:
resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
react-hotkeys-hook@5.2.4:
version "5.2.4"
resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-5.2.4.tgz#45ad54d78823b2a929963d482aff98efad0530f2"
integrity sha512-BgKg+A1+TawkYluh5Bo4cTmcgMN5L29uhJbDUQdHwPX+qgXRjIPYU5kIDHyxnAwCkCBiu9V5OpB2mpyeluVF2A==
react-image-crop@^11.0.7:
version "11.0.7"
resolved "https://registry.yarnpkg.com/react-image-crop/-/react-image-crop-11.0.7.tgz#25f3d37ccbb65a05d19d23b4740a5912835c741e"