diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx index c39baf367..27028c056 100644 --- a/src/components/AccountList.tsx +++ b/src/components/AccountList.tsx @@ -24,20 +24,27 @@ import {useActorStatus} from '#/features/liveNow' import {useHiddenAccountsElsewhere} from '#/storage/hooks/hidden-accounts-elsewhere' export function AccountList({ + accounts: accountsProp, onSelectAccount, onSelectOther, otherLabel, pendingDid, + selectedDid, + showAddAccount = true, }: { + accounts?: SessionAccount[] onSelectAccount: (account: SessionAccount) => void onSelectOther: () => void otherLabel?: string pendingDid: string | null + selectedDid?: string | null + showAddAccount?: boolean }) { - const {currentAccount, accounts} = useSession() + const {currentAccount, accounts: sessionAccounts} = useSession() const t = useTheme() const {_} = useLingui() const enableSquareButtons = useEnableSquareButtons() + const accounts = accountsProp ?? sessionAccounts const [, , hiddenDidsSet] = useHiddenAccountsElsewhere() const {data: profiles} = useProfilesQuery({ handles: accounts.map(acc => acc.did), @@ -65,45 +72,50 @@ export function AccountList({ profile={profiles?.profiles.find(p => p.did === account.did)} account={account} onSelect={onSelectAccount} - isCurrentAccount={account.did === currentAccount?.did} + isCurrentAccount={ + account.did === (selectedDid ?? currentAccount?.did) + } isPendingAccount={account.did === pendingDid} /> ))} - + )} + + ) : null} ) } diff --git a/src/components/EphemeralAccountSwitcher.tsx b/src/components/EphemeralAccountSwitcher.tsx new file mode 100644 index 000000000..95740bb5a --- /dev/null +++ b/src/components/EphemeralAccountSwitcher.tsx @@ -0,0 +1,104 @@ +import {useMemo} from 'react' +import {type AppBskyActorDefs} from '@atproto/api' +import {useLingui} from '@lingui/react/macro' + +import {useProfileQuery, useProfilesQuery} from '#/state/queries/profile' +import {type SessionAccount, useSession} from '#/state/session' +import {SwitchMenuItems} from '#/view/shell/desktop/LeftNav' +import {useDialogControl} from '#/components/Dialog' +import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount' +import * as Menu from '#/components/Menu' +import {type TriggerChildProps} from '#/components/Menu/types' +import * as Prompt from '#/components/Prompt' +import {IS_WEB_TOUCH_DEVICE} from '#/env' + +type AccountListItem = { + account: SessionAccount + profile?: AppBskyActorDefs.ProfileViewDetailed +} + +export function EphemeralAccountSwitcher({ + selectedDid, + title, + onSelectAccount, + renderTrigger, +}: { + selectedDid: string + title: string + onSelectAccount: (account: SessionAccount) => void + renderTrigger: (args: { + currentProfile?: AppBskyActorDefs.ProfileViewDetailed + triggerProps: TriggerChildProps['props'] + }) => React.ReactNode +}) { + const {t: l} = useLingui() + const {accounts} = useSession() + const {data: currentProfile} = useProfileQuery({did: selectedDid}) + const {data} = useProfilesQuery({ + handles: accounts.map(acc => acc.did), + }) + const control = useDialogControl() + const signOutPromptControl = Prompt.usePromptControl() + const profiles = data?.profiles + + const switcherAccounts = useMemo( + () => + accounts + .filter(account => account.did !== selectedDid) + .map(account => ({ + account, + profile: profiles?.find(p => p.did === account.did), + })), + [accounts, profiles, selectedDid], + ) + + if (IS_WEB_TOUCH_DEVICE) { + return ( + <> + {renderTrigger({ + currentProfile, + triggerProps: { + ref: null, + onPress: control.open, + onFocus: () => {}, + onBlur: () => {}, + onPressIn: () => {}, + onPressOut: () => {}, + accessibilityLabel: l`Switch accounts`, + accessibilityRole: 'button', + }, + })} + item.account)} + pendingDid={null} + selectedDid={selectedDid} + title={title} + showAddAccount={false} + onSelectAccount={onSelectAccount} + /> + + ) + } + + return ( + + + {({props}) => + renderTrigger({ + currentProfile, + triggerProps: props, + }) + } + + + + ) +} diff --git a/src/components/PetAccountAlert.tsx b/src/components/PetAccountAlert.tsx index 7f65d78ef..53d4fc383 100644 --- a/src/components/PetAccountAlert.tsx +++ b/src/components/PetAccountAlert.tsx @@ -23,8 +23,8 @@ export function PetAccountAlert({ const isSelf = profile.did === currentAccount?.did const description = isSelf - ? l`You have marked this account as a pet account. You can remove it at any time from your account settings.` - : l`This account has been marked as a pet account by its owner.` + ? l`You have marked this account as a pet. You can remove this label at any time from your account settings.` + : l`This account has been marked as a pet by its owner.` return ( diff --git a/src/components/dialogs/SwitchAccount.tsx b/src/components/dialogs/SwitchAccount.tsx index 2dc550a7c..28e565603 100644 --- a/src/components/dialogs/SwitchAccount.tsx +++ b/src/components/dialogs/SwitchAccount.tsx @@ -14,8 +14,24 @@ import {Text} from '../Typography' export function SwitchAccountDialog({ control, + accounts, + title, + pendingDid: pendingDidProp, + selectedDid, + otherLabel, + showAddAccount = true, + onSelectAccount: onSelectAccountProp, + onSelectOther: onSelectOtherProp, }: { control: Dialog.DialogControlProps + accounts?: SessionAccount[] + title?: string + pendingDid?: string | null + selectedDid?: string | null + otherLabel?: string + showAddAccount?: boolean + onSelectAccount?: (account: SessionAccount) => void + onSelectOther?: () => void }) { const {_} = useLingui() const {currentAccount} = useSession() @@ -24,6 +40,12 @@ export function SwitchAccountDialog({ const onSelectAccount = useCallback( (account: SessionAccount) => { + if (onSelectAccountProp) { + control.close(() => { + onSelectAccountProp(account) + }) + return + } if (account.did !== currentAccount?.did) { control.close(() => { onPressSwitchAccount(account, 'SwitchAccount') @@ -32,14 +54,20 @@ export function SwitchAccountDialog({ control.close() } }, - [currentAccount, control, onPressSwitchAccount], + [control, currentAccount, onPressSwitchAccount, onSelectAccountProp], ) const onPressAddAccount = useCallback(() => { + if (onSelectOtherProp) { + control.close(() => { + onSelectOtherProp() + }) + return + } control.close(() => { setShowLoggedOut(true) }) - }, [setShowLoggedOut, control]) + }, [control, onSelectOtherProp, setShowLoggedOut]) return ( @@ -47,14 +75,17 @@ export function SwitchAccountDialog({ - Switch account + {title ?? Switch account} diff --git a/src/screens/Settings/RunesSettings/BadgesSettings.tsx b/src/screens/Settings/RunesSettings/BadgesSettings.tsx index 718ad4d6d..0c50a6474 100644 --- a/src/screens/Settings/RunesSettings/BadgesSettings.tsx +++ b/src/screens/Settings/RunesSettings/BadgesSettings.tsx @@ -325,7 +325,7 @@ function TrustedVerifiersSection() { onPress={onToggleExpanded}> - {`Trusted Verifiers`} + {`Trusted verifiers`} {!isExpanded && ( @@ -387,7 +387,7 @@ function TrustedVerifiersSection() { + void }) { - const {accounts} = useSession() const {t: l} = useLingui() - const {data: currentProfile} = useProfileQuery({did: activeAccountDid}) const richtext = post.richtext const isTextOnly = !post.embed.link && !post.embed.quote && !post.embed.media const forceMinHeight = IS_WEB && isTextOnly && isActive @@ -1488,7 +1484,6 @@ let ComposerPost = memo(function ComposerPost({ : l`Add another post` : l`Anything but skeet` const discardPromptControl = Prompt.usePromptControl() - const signOutPromptControl = Prompt.usePromptControl() const enableSquareButtons = useEnableSquareButtons() @@ -1547,18 +1542,6 @@ let ComposerPost = memo(function ComposerPost({ [post.id, onSelectVideo, onImageAdd, l], ) - const {data} = useProfilesQuery({ - handles: accounts.map(acc => acc.did), - }) - const profiles = data?.profiles - - const allAccounts = accounts - .filter(account => account.did !== activeAccountDid) - .map(account => ({ - account, - profile: profiles?.find(p => p.did === account.did), - })) - useHideKeyboardOnBackground() return ( @@ -1571,37 +1554,28 @@ let ComposerPost = memo(function ComposerPost({ isTextOnly && isLastPost && IS_NATIVE && a.flex_grow, ]}> - - - {({props}) => ( - - )} - - { - setActiveAccountDid(account.did)} - /> - } - + setActiveAccountDid(account.did)} + renderTrigger={({currentProfile, triggerProps}) => ( + + )} + /> void }) { const {_} = useLingui() @@ -254,6 +258,8 @@ export function SwitchMenuItems({ ) showExtraButtons = showExtraButtons ?? true + showAddAccount = showAddAccount ?? true + const hasFooterItems = showExtraButtons || showAddAccount const onAddAnotherAccount = () => { setShowLoggedOut(true) @@ -266,7 +272,7 @@ export function SwitchMenuItems({ <> - Switch account + {title ?? Switch account} {sortedAccounts.map(other => ( ))} - + {hasFooterItems ? : null} )} {showExtraButtons ? : undefined} - - - - Add another account - - + {showAddAccount ? ( + + + + Add another account + + + ) : null} {showExtraButtons ? (