Fix #737

fastlane/metadata/en-US/release_notes.txt

@@ -1,2 +1,3 @@
 Enjoy toooting! This version includes following improvements and fixes:
+- Long press avatar in tab bar to quickly switch to another account
 - Fix poll notifications wrongly greyed out

fastlane/metadata/zh-Hans/release_notes.txt

@@ -1,2 +1,3 @@
 tooot-ing愉快！此版本包括以下改进和修复：
+- 长按底部菜单头像快速切换账户
 - 修复投票通知显示

src/screens/Tabs/Me/Root/Logout.tsx

@@ -1,7 +1,6 @@
 import Button from '@components/Button'
 import haptics from '@components/haptics'
 import { removeAccount, useGlobalStorage } from '@utils/storage/actions'
-import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
@@ -15,11 +14,6 @@ const Logout: React.FC = () => {
     <Button
       type='text'
       content={t('screenTabs:me.root.logout.button')}
-      style={{
-        marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2,
-        marginTop: StyleConstants.Spacing.Global.PagePadding,
-        marginBottom: StyleConstants.Spacing.Global.PagePadding * 2
-      }}
       destructive
       onPress={() =>
         Alert.alert(
@@ -43,6 +37,7 @@ const Logout: React.FC = () => {
           ]
         )
       }
+      style={{ flex: 1 }}
     />
   )
 }

src/screens/Tabs/Me/Root/Switch.tsx

@@ -1,6 +1,5 @@
 import Button from '@components/Button'
 import { useNavigation } from '@react-navigation/native'
-import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -12,11 +11,8 @@ const AccountInformationSwitch: React.FC = () => {
     <Button
       type='text'
       content={t('me.stacks.switch.name')}
-      style={{
-        marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2,
-        marginTop: StyleConstants.Spacing.Global.PagePadding
-      }}
       onPress={() => navigation.navigate('Tab-Me-Switch')}
+      style={{ flex: 1 }}
     />
   )
 }

src/screens/Tabs/Me/Root/index.tsx

@@ -9,7 +9,9 @@ import AccountContext from '@screens/Tabs/Shared/Account/Context'
 import AccountNav from '@screens/Tabs/Shared/Account/Nav'
 import { useProfileQuery } from '@utils/queryHooks/profile'
 import { useGlobalStorage } from '@utils/storage/actions'
+import { StyleConstants } from '@utils/styles/constants'
 import React, { useRef } from 'react'
+import { View } from 'react-native'
 import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'
 
 const TabMeRoot: React.FC = () => {
@@ -39,8 +41,20 @@ const TabMeRoot: React.FC = () => {
         {accountActive ? <MyInfo /> : <ComponentInstance />}
         {accountActive ? <Collections /> : null}
         <Settings />
-        {accountActive ? <AccountInformationSwitch /> : null}
-        {accountActive ? <Logout /> : null}
+        {accountActive ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
+              marginTop: StyleConstants.Spacing.S,
+              marginBottom: StyleConstants.Spacing.XL,
+              gap: StyleConstants.Spacing.M
+            }}
+          >
+            <Logout />
+            <AccountInformationSwitch />
+          </View>
+        ) : null}
       </Animated.ScrollView>
     </AccountContext.Provider>
   )

src/screens/Tabs/index.tsx

@@ -1,12 +1,20 @@
 import GracefullyImage from '@components/GracefullyImage'
-import haptics from '@components/haptics'
 import Icon from '@components/Icon'
+import haptics from '@components/haptics'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { ScreenTabsStackParamList } from '@utils/navigation/navigators'
-import { getGlobalStorage, useAccountStorage, useGlobalStorage } from '@utils/storage/actions'
+import {
+  getGlobalStorage,
+  getReadableAccounts,
+  setAccount,
+  useAccountStorage,
+  useGlobalStorage
+} from '@utils/storage/actions'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import { Platform, View } from 'react-native'
+import * as ContextMenu from 'zeego/context-menu'
 import TabLocal from './Local'
 import TabMe from './Me'
 import TabNotifications from './Notifications'
@@ -50,19 +58,70 @@ const ScreenTabs = () => {
               return <Icon name='bell' size={size} color={color} />
             case 'Tab-Me':
               return (
-                <View key={avatarStatic} style={{ flexDirection: 'row', alignItems: 'center' }}>
-                  <GracefullyImage
-                    sources={{ default: { uri: avatarStatic } }}
-                    dimension={{ width: size, height: size }}
-                    style={{
-                      borderRadius: 99,
-                      overflow: 'hidden',
-                      borderWidth: focused ? 2 : 0,
-                      borderColor: focused ? colors.primaryDefault : color
-                    }}
-                  />
-                  <Icon name='more-vertical' size={size / 1.5} color={colors.secondary} />
-                </View>
+                <>
+                  <ContextMenu.Root onOpenChange={() => haptics('Light')}>
+                    <ContextMenu.Trigger>
+                      <View
+                        key={avatarStatic}
+                        style={{ flexDirection: 'row', alignItems: 'center' }}
+                      >
+                        <GracefullyImage
+                          sources={{ default: { uri: avatarStatic } }}
+                          dimension={{ width: size, height: size }}
+                          style={{
+                            borderRadius: 99,
+                            overflow: 'hidden',
+                            borderWidth: focused ? 2 : 0,
+                            borderColor: focused ? colors.primaryDefault : color
+                          }}
+                        />
+                        <Icon name='more-vertical' size={size / 1.5} color={colors.secondary} />
+                      </View>
+                    </ContextMenu.Trigger>
+
+                    <ContextMenu.Content>
+                      <ContextMenu.Preview preferredCommitStyle='pop'>
+                        {() => (
+                          <View
+                            key={avatarStatic}
+                            style={{
+                              flexDirection: 'row',
+                              alignItems: 'center',
+                              padding: StyleConstants.Spacing.M
+                            }}
+                          >
+                            <GracefullyImage
+                              sources={{ default: { uri: avatarStatic } }}
+                              dimension={{ width: size, height: size }}
+                              style={{
+                                borderRadius: 99,
+                                overflow: 'hidden',
+                                borderWidth: 2,
+                                borderColor: colors.primaryDefault
+                              }}
+                            />
+                          </View>
+                        )}
+                      </ContextMenu.Preview>
+
+                      {getReadableAccounts().map(account => (
+                        <ContextMenu.CheckboxItem
+                          key={account.key}
+                          value={account.active ? 'on' : 'off'}
+                          disabled={account.active}
+                          onValueChange={async () => {
+                            if (!account.active) {
+                              await setAccount(account.key)
+                              haptics('Light')
+                            }
+                          }}
+                        >
+                          <ContextMenu.ItemTitle children={account.acct} />
+                        </ContextMenu.CheckboxItem>
+                      ))}
+                    </ContextMenu.Content>
+                  </ContextMenu.Root>
+                </>
               )
             default:
               return <Icon name='alert-octagon' size={size} color={color} />
@@ -88,13 +147,13 @@ const ScreenTabs = () => {
       <Tab.Screen
         name='Tab-Me'
         component={TabMe}
-        listeners={({ navigation }) => ({
-          tabLongPress: () => {
-            haptics('Light')
-            navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })
-            navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
-          }
-        })}
+        // listeners={({ navigation }) => ({
+        //   tabLongPress: () => {
+        //     haptics('Light')
+        //     navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })
+        //     navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
+        //   }
+        // })}
       />
     </Tab.Navigator>
   )

src/screens/index.tsx

@@ -19,12 +19,11 @@ import { useInstanceQuery } from '@utils/queryHooks/instance'
 import { usePreferencesQuery } from '@utils/queryHooks/preferences'
 import { useProfileQuery } from '@utils/queryHooks/profile'
 import { useFollowedTagsQuery } from '@utils/queryHooks/tags'
-import { setAccount, setGlobalStorage, useGlobalStorage } from '@utils/storage/actions'
+import { setGlobalStorage, useGlobalStorage } from '@utils/storage/actions'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { themes } from '@utils/styles/themes'
-import * as Linking from 'expo-linking'
 import { addScreenshotListener } from 'expo-screen-capture'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { IntlProvider } from 'react-intl'
 import { Alert, Platform, StatusBar } from 'react-native'

src/utils/storage/actions.ts

@@ -248,7 +248,6 @@ export const setAccount = async (account: string) => {
   storage.account = temp
   setGlobalStorage('account.active', account)
   await queryClient.resetQueries()
-  queryClient.clear()
 
   await apiGeneral<Mastodon.Account>({
     method: 'get',