pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 21:15:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

feat(app): add keyboard hint in the account switcher (#3425)

Browse Source
This commit is contained in:
omster authored and GitHub committed 2026-10-12 16:48:10 +02:00
1 parent b4fc1241ae
commit 49eb8cdd81
2 files changed
+37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.module.css
+12
View File
@@ -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;
fluxer_app/src/features/auth/components/accounts/account_switcher_modal/AccountSwitcherOverlay.tsx
+25
View File
@@ -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 (
<div
className={styles.shortcutTitle}
data-flx="auth.accounts.account-switcher-modal.account-switcher-overlay.account-switcher-shortcut-hint.shortcut-title"
>
<KeybindHint
combo={combo}
data-flx="auth.accounts.account-switcher-modal.account-switcher-overlay.account-switcher-shortcut-hint.keybind-hint"
/>
</div>
);
});
function AccountSwitcherStage({
accounts,
authContent,
@@ -73,6 +97,7 @@ function AccountSwitcherStage({
className={flxElementClassName(styles.accountsStage)}
data-flx="auth.accounts.account-switcher-modal.account-switcher-overlay.account-switcher-stage.accounts-stage"
>
<AccountSwitcherShortcutHint data-flx="auth.accounts.account-switcher-modal.account-switcher-overlay.account-switcher-stage.account-switcher-shortcut-hint" />
{accounts.length === 0 ? (
<flx-auth-account-switcher-overlay-empty
className={flxElementClassName(styles.noAccounts)}