diff --git a/fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.module.css b/fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.module.css index 8ca7bdc02..2ab344450 100644 --- a/fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.module.css +++ b/fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.module.css @@ -59,10 +59,22 @@ } .accountsStage { + position: relative; min-width: 0; pointer-events: none; } +.shortcutTitle { + position: absolute; + bottom: 100%; + left: 0; + display: flex; + width: 100%; + justify-content: center; + padding-bottom: 0.625rem; + pointer-events: none; +} + .authStage { display: flex; min-width: 0; diff --git a/fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.tsx b/fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.tsx index bee370212..220a0c110 100644 --- a/fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.tsx +++ b/fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.tsx @@ -1,5 +1,6 @@ // SPDX-License-Identifier: AGPL-3.0-or-later +import Accessibility from '@app/features/accessibility/state/Accessibility'; import {AccountProfilePicker} from '@app/features/auth/components/accounts/account_switcher_modal/AccountProfilePicker'; import { type AccountSwitcherContentView, @@ -7,9 +8,11 @@ import { } from '@app/features/auth/components/accounts/account_switcher_modal/AccountSwitcherModalTypes'; import styles from '@app/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.module.css'; import {AccountSwitcherViewTransition} from '@app/features/auth/components/accounts/account_switcher_modal/AccountSwitcherViewTransition'; +import Keybind, {type KeybindCommand} from '@app/features/input/state/InputKeybind'; import type {Account} from '@app/features/platform/state/AuthSession'; import FocusRingScope from '@app/features/ui/focus_ring/FocusRingScope'; import {usePrefersReducedMotion} from '@app/features/ui/hooks/usePrefersReducedMotion'; +import {KeybindHint} from '@app/features/ui/keybind_hint/KeybindHint'; import {AnimeButton, type AnimeTarget, createAnimeFlxElement} from '@app/features/ui/motion/AnimeElement'; import LayerManager, {LayerType} from '@app/features/ui/state/LayerManager'; import {getZIndexForStack} from '@app/features/ui/state/Modal'; @@ -18,12 +21,15 @@ import {isDesktop} from '@app/features/ui/utils/NativeUtils'; import {flxElementClassName} from '@app/lib/react'; import {msg} from '@lingui/core/macro'; import {Trans, useLingui} from '@lingui/react/macro'; +import {observer} from 'mobx-react-lite'; import type React from 'react'; import {useCallback, useContext, useEffect, useId, useRef} from 'react'; const AccountSwitcherAnimatedRoot = createAnimeFlxElement('flx-auth-account-switcher-overlay'); const AccountSwitcherAnimatedShell = createAnimeFlxElement('flx-auth-account-switcher-overlay-shell'); +const SYSTEM_OPEN_ACCOUNT_SWITCHER_ACTION: KeybindCommand = 'system_open_account_switcher'; + const CLOSE_ACCOUNT_SWITCHER_DESCRIPTOR = msg({ message: 'Close account switcher', comment: 'Accessible label for closing the account switcher overlay.', @@ -48,6 +54,24 @@ interface AccountSwitcherStageProps { readonly view: AccountSwitcherContentView; } +const AccountSwitcherShortcutHint = observer(function AccountSwitcherShortcutHint(): React.ReactElement | null { + const {combo} = Keybind.getByAction(SYSTEM_OPEN_ACCOUNT_SWITCHER_ACTION); + if (Accessibility.hideKeyboardHints || (!combo.key && !combo.code)) { + return null; + } + return ( +