diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx index 169e7b84fe..b2ce622da3 100644 --- a/src/components/AccountList.tsx +++ b/src/components/AccountList.tsx @@ -1,5 +1,5 @@ import React, {useCallback} from 'react' -import {View} from 'react-native' +import {StyleProp, View, ViewStyle} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -16,10 +16,14 @@ export function AccountList({ onSelectAccount, onSelectOther, otherLabel, + excludeCurrent, + style, }: { onSelectAccount: (account: SessionAccount) => void onSelectOther: () => void otherLabel?: string + excludeCurrent?: boolean + style?: StyleProp }) { const {isSwitchingAccounts, currentAccount, accounts} = useSession() const t = useTheme() @@ -29,6 +33,10 @@ export function AccountList({ onSelectOther() }, [onSelectOther]) + const filteredAccounts = excludeCurrent + ? accounts.filter(account => account.did !== currentAccount?.did) + : accounts + return ( - {accounts.map(account => ( + {filteredAccounts.map(account => ( { - if (account.did === currentAccount?.did) { - control.close() - } else { - onPressSwitchAccount(account, 'SwitchAccount') - } - }, - [currentAccount, control, onPressSwitchAccount], - ) - - const onPressAddAccount = useCallback(() => { - setShowLoggedOut(true) - closeAllActiveElements() - }, [setShowLoggedOut, closeAllActiveElements]) - - return ( - - - - - - - Switch Account - - - - - - - ) -} diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index 64d482128d..14f9d46943 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -50,7 +50,6 @@ function HomeHeaderLayoutDesktopAndTablet({ - - - - - {IS_DEV && false && ( - - - - )} - {hasSession && ( - - - - )} {children} @@ -90,7 +47,7 @@ const styles = StyleSheet.create({ }, topBar: { flexDirection: 'row', - justifyContent: 'space-between', + justifyContent: 'space-around', alignItems: 'center', paddingHorizontal: 18, paddingVertical: 8, diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index df831c1432..e6f6e78066 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -42,12 +42,12 @@ import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' import {useAnalytics} from 'lib/analytics/analytics' import * as AppInfo from 'lib/app-info' -import {FEEDBACK_FORM_URL, HELP_DESK_URL, STATUS_PAGE_URL} from 'lib/constants' +import {STATUS_PAGE_URL} from 'lib/constants' import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' import {useCustomPalette} from 'lib/hooks/useCustomPalette' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {HandIcon, HashtagIcon, ListIcon} from 'lib/icons' +import {HandIcon, HashtagIcon} from 'lib/icons' import {makeProfileLink} from 'lib/routes/links' import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types' @@ -61,7 +61,6 @@ import {Text} from 'view/com/util/text/Text' import * as Toast from 'view/com/util/Toast' import {UserAvatar} from 'view/com/util/UserAvatar' import {ScrollView} from 'view/com/util/Views' -import {atoms as a, useThemeName} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' import {navigate, resetToTab} from '#/Navigation' @@ -271,10 +270,6 @@ export function SettingsScreen({}: Props) { navigation.navigate('SavedFeeds') }, [navigation]) - const onPressLists = React.useCallback(() => { - navigation.navigate('Lists') - }, [navigation]) - const onPressAccessibilitySettings = React.useCallback(() => { navigation.navigate('AccessibilitySettings') }, [navigation]) @@ -320,66 +315,6 @@ export function SettingsScreen({}: Props) { scrollIndicatorInsets={{right: 1}} // @ts-ignore web only -prf dataSet={{'stable-gutters': 1}}> - - navigation.navigate('Moderation') - } - accessibilityRole="button" - accessibilityLabel={_(msg`Moderation settings`)} - accessibilityHint={_(msg`Opens moderation settings`)}> - - - - - Moderation - - - - - - - - My Saved Feeds - - - - - - - - My Lists - - - {currentAccount ? ( @@ -624,6 +559,46 @@ export function SettingsScreen({}: Props) { Languages + navigation.navigate('Moderation') + } + accessibilityRole="button" + accessibilityLabel={_(msg`Moderation settings`)} + accessibilityHint={_(msg`Opens moderation settings`)}> + + + + + Moderation + + + + + + + + My Saved Feeds + + @@ -964,88 +939,6 @@ function EmailConfirmationNotice() { ) } -function FeedbackAndHelp() { - const themeName = useThemeName() - const pal = usePalette('default') - const {_} = useLingui() - const {track} = useAnalytics() - const {currentAccount} = useSession() - - const onPressFeedback = React.useCallback(() => { - track('Menu:FeedbackClicked') - Linking.openURL( - FEEDBACK_FORM_URL({ - email: currentAccount?.email, - handle: currentAccount?.handle, - }), - ) - }, [track, currentAccount]) - - const onPressHelp = React.useCallback(() => { - track('Menu:HelpClicked') - Linking.openURL(HELP_DESK_URL) - }, [track]) - - return ( - - - - - Feedback - - - - - Help - - - - ) -} - const styles = StyleSheet.create({ dimmed: { opacity: 0.5, diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 4caff6c4d9..7abbd50162 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -8,7 +8,6 @@ import {BottomTabBarProps} from '@react-navigation/bottom-tabs' import {StackActions} from '@react-navigation/native' import {useAnalytics} from '#/lib/analytics/analytics' -import {useHaptics} from '#/lib/haptics' import {useDedupe} from '#/lib/hooks/useDedupe' import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode' import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState' @@ -38,8 +37,8 @@ import {UserAvatar} from '#/view/com/util/UserAvatar' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' import {useDialogControl} from '#/components/Dialog' -import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount' import {styles} from './BottomBarStyles' +import {ProfileMenuDialog} from '../profile-menu' type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds' @@ -58,8 +57,7 @@ export function BottomBar({navigation}: BottomTabBarProps) { const {requestSwitchToAccount} = useLoggedOutViewControls() const closeAllActiveElements = useCloseAllActiveElements() const dedupe = useDedupe() - const accountSwitchControl = useDialogControl() - const playHaptic = useHaptics() + const profileMenuControl = useDialogControl() const showSignIn = React.useCallback(() => { closeAllActiveElements() @@ -101,17 +99,12 @@ export function BottomBar({navigation}: BottomTabBarProps) { [onPressTab], ) const onPressProfile = React.useCallback(() => { - onPressTab('MyProfile') - }, [onPressTab]) - - const onLongPressProfile = React.useCallback(() => { - playHaptic() - accountSwitchControl.open() - }, [accountSwitchControl, playHaptic]) + profileMenuControl.open() + }, [profileMenuControl]) return ( <> - + } onPress={onPressProfile} - onLongPress={onLongPressProfile} accessibilityRole="tab" accessibilityLabel={_(msg`Profile`)} accessibilityHint="" diff --git a/src/view/shell/profile-menu/index.tsx b/src/view/shell/profile-menu/index.tsx new file mode 100644 index 0000000000..558a329c44 --- /dev/null +++ b/src/view/shell/profile-menu/index.tsx @@ -0,0 +1,263 @@ +import React, {useCallback} from 'react' +import {Linking, View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' + +import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants' +import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher' +import {useProfileQuery} from '#/state/queries/profile' +import {type SessionAccount, useSession, useSessionApi} from '#/state/session' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {useCloseAllActiveElements} from '#/state/util' +import {NavigationProp} from 'lib/routes/types' +import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {UserAvatar} from '#/view/com/util/UserAvatar' +import {atoms as a, useTheme} from '#/alf' +import {AccountList} from '#/components/AccountList' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsGear} from '#/components/icons/Gear' +import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' +import {RaisingHande4Finger_Stroke2_Corner0_Rounded as RaisingHand} from '#/components/icons/RaisingHand' +import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight' +import {Text} from '#/components/Typography' +import {resetToTab} from '#/Navigation' + +export function ProfileMenuDialog({ + control, + onPressTab, +}: { + control: Dialog.DialogControlProps + onPressTab: (tab: 'MyProfile') => void +}) { + const {_} = useLingui() + const t = useTheme() + const {currentAccount} = useSession() + const {logout} = useSessionApi() + const {onPressSwitchAccount} = useAccountSwitcher() + const {setShowLoggedOut} = useLoggedOutViewControls() + const navigation = useNavigation() + const closeAllActiveElements = useCloseAllActiveElements() + + const onPressProfile = useCallback(() => { + control.close() + onPressTab('MyProfile') + }, [control, onPressTab]) + + const onPressLink = useCallback( + (screen: 'Lists' | 'Moderation' | 'Settings') => { + control.close() + navigation.navigate(screen) + }, + [control, navigation], + ) + + const onSelectAccount = useCallback( + (account: SessionAccount) => { + if (account.did === currentAccount?.did) { + control.close() + } else { + onPressSwitchAccount(account, 'SwitchAccount') + } + }, + [currentAccount, control, onPressSwitchAccount], + ) + + const onPressAddAccount = useCallback(() => { + setShowLoggedOut(true) + closeAllActiveElements() + }, [setShowLoggedOut, closeAllActiveElements]) + + const onPressSignOut = useCallback(() => { + logout('Settings') + resetToTab('HomeTab') + closeAllActiveElements() + }, [logout, closeAllActiveElements]) + + const onPressFeedback = React.useCallback(() => { + Linking.openURL( + FEEDBACK_FORM_URL({ + email: currentAccount?.email, + handle: currentAccount?.handle, + }), + ) + }, [currentAccount]) + + const onPressHelp = React.useCallback(() => { + Linking.openURL(HELP_DESK_URL) + }, []) + + return ( + + + + + + + + + + + + + + + + + + + + Accounts + + + + + + + + + + + + + + + + + ) +} + +function ProfileCard({onPress}: {onPress: () => void}) { + const t = useTheme() + const {currentAccount} = useSession() + const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did}) + const {_} = useLingui() + const size = 48 + + return ( + + {!isLoading && profile ? ( + + ) : ( + + + + )} + + ) +}