From 8132703860b005f753f18da6c75ddc5f5a0ad4f5 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Mon, 1 Jun 2026 23:16:26 +0700 Subject: [PATCH 01/15] Make Copilot switching discoverable with a dedicated Switch button Replace the implicit avatar/name press affordance on the Accounts header with an explicit Switch button in the slot previously held by the Status emoji picker. The avatar and name are no longer pressable, the Copilot access tooltip now anchors to the Switch button, and the Status entry is removed from the Accounts header (it already lives on the Profile page). --- src/components/AccountSwitcher.tsx | 117 +++++++++------------ src/pages/settings/InitialSettingsPage.tsx | 31 ------ 2 files changed, 50 insertions(+), 98 deletions(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index ae451830defe..15f68ec6e268 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -4,12 +4,10 @@ import React, {useRef, useState} from 'react'; import {View} from 'react-native'; import useConfirmModal from '@hooks/useConfirmModal'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; -import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate'; @@ -26,11 +24,10 @@ import {isTrackingSelector} from '@src/selectors/GPSDraftDetails'; import type {PersonalDetails} from '@src/types/onyx'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import Avatar from './Avatar'; -import Icon from './Icon'; +import Button from './Button'; import {ModalActions} from './Modal/Global/ModalContext'; import type {PopoverMenuItem} from './PopoverMenu'; import PopoverMenu from './PopoverMenu'; -import {PressableWithFeedback} from './Pressable'; import {useProductTrainingContext} from './ProductTrainingContext'; import Text from './Text'; import Tooltip from './Tooltip'; @@ -42,10 +39,8 @@ type AccountSwitcherProps = { }; function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { - const icons = useMemoizedLazyExpensifyIcons(['CaretUpDown', 'Checkmark']); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const styles = useThemeStyles(); - const theme = useTheme(); const {localeCompare, translate, formatPhoneNumber} = useLocalize(); const {isOffline} = useNetwork(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -60,7 +55,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID); const [gpsDraftDetails] = useOnyx(ONYXKEYS.GPS_DRAFT_DETAILS); - const buttonRef = useRef(null); + const buttonRef = useRef(null); const {windowHeight} = useWindowDimensions(); const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false); @@ -223,71 +218,59 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { return ( <> - - - - - - - {doesDisplayNameContainEmojis ? ( - - - - ) : ( - - {formatPhoneNumber(displayName)} - - )} - {!!canSwitchAccounts && ( - - - - )} - + + + + + {doesDisplayNameContainEmojis ? ( + + + + ) : ( - {Str.removeSMSDomain(currentUserPersonalDetails?.login ?? '')} + {formatPhoneNumber(displayName)} - {!!isDebugModeEnabled && ( - - AccountID: {accountID} - - )} - + )} + + {Str.removeSMSDomain(currentUserPersonalDetails?.login ?? '')} + + {!!isDebugModeEnabled && ( + + AccountID: {accountID} + + )} - - + + {!!canSwitchAccounts && ( + +