Merge branch 'main' into candidate

fastlane/metadata/en-US/release_notes.txt

@@ -1,6 +1,7 @@
 Enjoy toooting! This version includes following improvements and fixes:
 - Auto fetch remote content in conversations!
 - Remember last read position in timeline!
+- Follow a user with other logged in accounts
 - Allowing adding more context of reports
 - Option to disable autoplay gif
 - Hide boosts from users

fastlane/metadata/zh-Hans/release_notes.txt

@@ -1,6 +1,7 @@
 toooting愉快！此版本包括以下改进和修复：
 - 主动获取对话的远程内容
 - 自动加载上次我的关注的阅读位置
+- 用其它已登陆的账户关注用户
 - 可添加举报细节
 - 新增暂停自动播放gif动画选项
 - 隐藏用户的转嘟

src/components/AccountButton.tsx

@@ -1,44 +1,30 @@
 import { useNavigation } from '@react-navigation/native'
-import { generateAccountKey, getAccountDetails, setAccount } from '@utils/storage/actions'
+import { ReadableAccountType, setAccount } from '@utils/storage/actions'
-import { StorageGlobal } from '@utils/storage/global'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import Button from './Button'
 import haptics from './haptics'
 
 interface Props {
-  account: NonNullable<StorageGlobal['accounts']>[number]
+  account: ReadableAccountType
-  selected?: boolean
   additionalActions?: () => void
 }
 
-const AccountButton: React.FC<Props> = ({ account, selected = false, additionalActions }) => {
+const AccountButton: React.FC<Props> = ({ account, additionalActions }) => {
   const navigation = useNavigation()
-  const accountDetails = getAccountDetails(
-    ['auth.domain', 'auth.account.acct', 'auth.account.domain', 'auth.account.id'],
-    account
-  )
-  if (!accountDetails) return null
 
   return (
     <Button
       type='text'
-      selected={selected}
+      selected={account.active}
       style={{
         marginBottom: StyleConstants.Spacing.M,
         marginRight: StyleConstants.Spacing.M
       }}
-      content={`@${accountDetails['auth.account.acct']}@${accountDetails['auth.account.domain']}${
+      content={account.acct}
-        selected ? ' ✓' : ''
-      }`}
       onPress={() => {
         haptics('Light')
-        setAccount(
+        setAccount(account.key)
-          generateAccountKey({
-            domain: accountDetails['auth.domain'],
-            id: accountDetails['auth.account.id']
-          })
-        )
         navigation.goBack()
         if (additionalActions) {
           additionalActions()

src/components/Button.tsx

@@ -97,7 +97,7 @@ const Button: React.FC<Props> = ({
                 fontSize: StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1),
                 opacity: loading ? 0 : 1
               }}
-              fontWeight={fontBold ? 'Bold' : 'Normal'}
+              fontWeight={fontBold || selected ? 'Bold' : 'Normal'}
               children={content}
               testID='text'
             />
@@ -125,7 +125,7 @@ const Button: React.FC<Props> = ({
           borderRadius: 100,
           justifyContent: 'center',
           alignItems: 'center',
-          borderWidth: overlay ? 0 : 1,
+          borderWidth: overlay ? 0 : selected ? 1.5 : 1,
           borderColor: mainColor(),
           backgroundColor: overlay ? colors.backgroundOverlayInvert : colors.backgroundDefault,
           paddingVertical: StyleConstants.Spacing[spacing],

src/components/Instance/index.tsx

@@ -13,6 +13,7 @@ import { StorageAccount } from '@utils/storage/account'
 import {
   generateAccountKey,
   getGlobalStorage,
+  setAccount,
   setAccountStorage,
   setGlobalStorage
 } from '@utils/storage/actions'
@@ -95,7 +96,10 @@ const ComponentInstance: React.FC<Props> = ({
             scopes: ['read', 'write', 'follow', 'push'],
             redirectUri,
             code: promptResult.params.code,
-            extraParams: { grant_type: 'authorization_code' }
+            extraParams: {
+              grant_type: 'authorization_code',
+              ...(request.codeVerifier && { code_verifier: request.codeVerifier })
+            }
           },
           { tokenEndpoint: `https://${variables.domain}/oauth/token` }
         )
@@ -175,12 +179,11 @@ const ComponentInstance: React.FC<Props> = ({
           })),
           accountKey
         )
-        storage.account = new MMKV({ id: accountKey })
 
         if (!account) {
           setGlobalStorage('accounts', accounts?.concat([accountKey]))
         }
-        setGlobalStorage('account.active', accountKey)
+        setAccount(accountKey)
 
         goBack && navigation.goBack()
       }

src/components/Message.tsx

@@ -106,7 +106,7 @@ const Message = React.forwardRef<FlashMessage>((_, ref) => {
         ...StyleConstants.FontStyle.S
       }}
       // @ts-ignore
-      textProps={{ numberOfLines: 2 }}
+      textProps={{ numberOfLines: 3 }}
     />
   )
 })

src/components/Timeline/Default.tsx

@@ -192,16 +192,48 @@ const TimelineDefault: React.FC<Props> = ({
             </ContextMenu.Trigger>
 
             <ContextMenu.Content>
-              {[mShare, mStatus, mInstance].map((type, i) => (
+              {[mShare, mStatus, mInstance].map((menu, i) => (
                 <Fragment key={i}>
-                  {type.map((mGroup, index) => (
+                  {menu.map((group, index) => (
                     <ContextMenu.Group key={index}>
-                      {mGroup.map(menu => (
+                      {group.map(item => {
-                        <ContextMenu.Item key={menu.key} {...menu.item}>
+                        switch (item.type) {
-                          <ContextMenu.ItemTitle children={menu.title} />
+                          case 'item':
-                          <ContextMenu.ItemIcon ios={{ name: menu.icon }} />
+                            return (
-                        </ContextMenu.Item>
+                              <ContextMenu.Item key={item.key} {...item.props}>
-                      ))}
+                                <ContextMenu.ItemTitle children={item.title} />
+                                {item.icon ? (
+                                  <ContextMenu.ItemIcon ios={{ name: item.icon }} />
+                                ) : null}
+                              </ContextMenu.Item>
+                            )
+                          case 'sub':
+                            return (
+                              // @ts-ignore
+                              <ContextMenu.Sub key={item.key}>
+                                <ContextMenu.SubTrigger
+                                  key={item.trigger.key}
+                                  {...item.trigger.props}
+                                >
+                                  <ContextMenu.ItemTitle children={item.trigger.title} />
+                                  {item.trigger.icon ? (
+                                    <ContextMenu.ItemIcon ios={{ name: item.trigger.icon }} />
+                                  ) : null}
+                                </ContextMenu.SubTrigger>
+                                <ContextMenu.SubContent>
+                                  {item.items.map(sub => (
+                                    <ContextMenu.Item key={sub.key} {...sub.props}>
+                                      <ContextMenu.ItemTitle children={sub.title} />
+                                      {sub.icon ? (
+                                        <ContextMenu.ItemIcon ios={{ name: sub.icon }} />
+                                      ) : null}
+                                    </ContextMenu.Item>
+                                  ))}
+                                </ContextMenu.SubContent>
+                              </ContextMenu.Sub>
+                            )
+                        }
+                      })}
                     </ContextMenu.Group>
                   ))}
                 </Fragment>

src/components/Timeline/Notifications.tsx

@@ -162,16 +162,43 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
         </ContextMenu.Trigger>
 
         <ContextMenu.Content>
-          {[mShare, mStatus, mInstance].map((type, i) => (
+          {[mShare, mStatus, mInstance].map((menu, i) => (
             <Fragment key={i}>
-              {type.map((mGroup, index) => (
+              {menu.map((group, index) => (
                 <ContextMenu.Group key={index}>
-                  {mGroup.map(menu => (
+                  {group.map(item => {
-                    <ContextMenu.Item key={menu.key} {...menu.item}>
+                    switch (item.type) {
-                      <ContextMenu.ItemTitle children={menu.title} />
+                      case 'item':
-                      <ContextMenu.ItemIcon ios={{ name: menu.icon }} />
+                        return (
-                    </ContextMenu.Item>
+                          <ContextMenu.Item key={item.key} {...item.props}>
-                  ))}
+                            <ContextMenu.ItemTitle children={item.title} />
+                            {item.icon ? <ContextMenu.ItemIcon ios={{ name: item.icon }} /> : null}
+                          </ContextMenu.Item>
+                        )
+                      case 'sub':
+                        return (
+                          // @ts-ignore
+                          <ContextMenu.Sub key={item.key}>
+                            <ContextMenu.SubTrigger key={item.trigger.key} {...item.trigger.props}>
+                              <ContextMenu.ItemTitle children={item.trigger.title} />
+                              {item.trigger.icon ? (
+                                <ContextMenu.ItemIcon ios={{ name: item.trigger.icon }} />
+                              ) : null}
+                            </ContextMenu.SubTrigger>
+                            <ContextMenu.SubContent>
+                              {item.items.map(sub => (
+                                <ContextMenu.Item key={sub.key} {...sub.props}>
+                                  <ContextMenu.ItemTitle children={sub.title} />
+                                  {sub.icon ? (
+                                    <ContextMenu.ItemIcon ios={{ name: sub.icon }} />
+                                  ) : null}
+                                </ContextMenu.Item>
+                              ))}
+                            </ContextMenu.SubContent>
+                          </ContextMenu.Sub>
+                        )
+                    }
+                  })}
                 </ContextMenu.Group>
               ))}
             </Fragment>

src/components/Timeline/Shared/Actions.tsx

@@ -28,7 +28,7 @@ const TimelineActions: React.FC = () => {
   const navigationState = useNavState()
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { t } = useTranslation(['common', 'componentTimeline'])
-  const { colors, theme } = useTheme()
+  const { colors } = useTheme()
   const iconColor = colors.secondary
 
   const queryClient = useQueryClient()
@@ -56,7 +56,6 @@ const TimelineActions: React.FC = () => {
     onError: (err: any, params) => {
       const correctParam = params as MutationVarsTimelineUpdateStatusProperty
       displayMessage({
-        theme,
         type: 'error',
         message: t('common:message.error.message', {
           function: t(

src/components/Timeline/Shared/HeaderAndroid.tsx

@@ -10,8 +10,7 @@ import * as DropdownMenu from 'zeego/dropdown-menu'
 import StatusContext from './Context'
 
 const TimelineHeaderAndroid: React.FC = () => {
-  const { queryKey, status, disableDetails, disableOnPress, rawContent } =
+  const { queryKey, status, disableDetails, disableOnPress, rawContent } = useContext(StatusContext)
-    useContext(StatusContext)
 
   if (Platform.OS !== 'android' || !status || disableDetails || disableOnPress) return null
 
@@ -52,16 +51,48 @@ const TimelineHeaderAndroid: React.FC = () => {
           </DropdownMenu.Trigger>
 
           <DropdownMenu.Content>
-            {[mShare, mAccount, mStatus].map((type, i) => (
+            {[mShare, mAccount, mStatus].map((menu, i) => (
               <Fragment key={i}>
-                {type.map((mGroup, index) => (
+                {menu.map((group, index) => (
                   <DropdownMenu.Group key={index}>
-                    {mGroup.map(menu => (
+                    {group.map(item => {
-                      <DropdownMenu.Item key={menu.key} {...menu.item}>
+                      switch (item.type) {
-                        <DropdownMenu.ItemTitle children={menu.title} />
+                        case 'item':
-                        <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                          return (
-                      </DropdownMenu.Item>
+                            <DropdownMenu.Item key={item.key} {...item.props}>
-                    ))}
+                              <DropdownMenu.ItemTitle children={item.title} />
+                              {item.icon ? (
+                                <DropdownMenu.ItemIcon ios={{ name: item.icon }} />
+                              ) : null}
+                            </DropdownMenu.Item>
+                          )
+                        case 'sub':
+                          return (
+                            // @ts-ignore
+                            <DropdownMenu.Sub key={item.key}>
+                              <DropdownMenu.SubTrigger
+                                key={item.trigger.key}
+                                {...item.trigger.props}
+                              >
+                                <DropdownMenu.ItemTitle children={item.trigger.title} />
+                                {item.trigger.icon ? (
+                                  <DropdownMenu.ItemIcon ios={{ name: item.trigger.icon }} />
+                                ) : null}
+                              </DropdownMenu.SubTrigger>
+                              <DropdownMenu.SubContent>
+                                {item.items.map(sub => (
+                                  <DropdownMenu.Item key={sub.key} {...sub.props}>
+                                    <DropdownMenu.ItemTitle children={sub.title} />
+                                    {sub.icon ? (
+                                      <DropdownMenu.ItemIcon ios={{ name: sub.icon }} />
+                                    ) : null}
+                                  </DropdownMenu.Item>
+                                ))}
+                              </DropdownMenu.SubContent>
+                            </DropdownMenu.Sub>
+                          )
+                      }
+                    })}
                   </DropdownMenu.Group>
                 ))}
               </Fragment>

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -17,8 +17,7 @@ import HeaderSharedReplies from './HeaderShared/Replies'
 import HeaderSharedVisibility from './HeaderShared/Visibility'
 
 const TimelineHeaderDefault: React.FC = () => {
-  const { queryKey, status, disableDetails, rawContent, isRemote } =
+  const { queryKey, status, disableDetails, rawContent, isRemote } = useContext(StatusContext)
-    useContext(StatusContext)
   if (!status) return null
 
   const { colors } = useTheme()
@@ -88,16 +87,48 @@ const TimelineHeaderDefault: React.FC = () => {
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Content>
-              {[mShare, mAccount, mStatus].map((type, i) => (
+              {[mShare, mAccount, mStatus].map((menu, i) => (
                 <Fragment key={i}>
-                  {type.map((mGroup, index) => (
+                  {menu.map((group, index) => (
                     <DropdownMenu.Group key={index}>
-                      {mGroup.map(menu => (
+                      {group.map(item => {
-                        <DropdownMenu.Item key={menu.key} {...menu.item}>
+                        switch (item.type) {
-                          <DropdownMenu.ItemTitle children={menu.title} />
+                          case 'item':
-                          <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                            return (
-                        </DropdownMenu.Item>
+                              <DropdownMenu.Item key={item.key} {...item.props}>
-                      ))}
+                                <DropdownMenu.ItemTitle children={item.title} />
+                                {item.icon ? (
+                                  <DropdownMenu.ItemIcon ios={{ name: item.icon }} />
+                                ) : null}
+                              </DropdownMenu.Item>
+                            )
+                          case 'sub':
+                            return (
+                              // @ts-ignore
+                              <DropdownMenu.Sub key={item}>
+                                <DropdownMenu.SubTrigger
+                                  key={item.trigger.key}
+                                  {...item.trigger.props}
+                                >
+                                  <DropdownMenu.ItemTitle children={item.trigger.title} />
+                                  {item.trigger.icon ? (
+                                    <DropdownMenu.ItemIcon ios={{ name: item.trigger.icon }} />
+                                  ) : null}
+                                </DropdownMenu.SubTrigger>
+                                <DropdownMenu.SubContent>
+                                  {item.items.map(sub => (
+                                    <DropdownMenu.Item key={sub.key} {...sub.props}>
+                                      <DropdownMenu.ItemTitle children={sub.title} />
+                                      {sub.icon ? (
+                                        <DropdownMenu.ItemIcon ios={{ name: sub.icon }} />
+                                      ) : null}
+                                    </DropdownMenu.Item>
+                                  ))}
+                                </DropdownMenu.SubContent>
+                              </DropdownMenu.Sub>
+                            )
+                        }
+                      })}
                     </DropdownMenu.Group>
                   ))}
                 </Fragment>

src/components/Timeline/Shared/HeaderNotification.tsx

@@ -88,16 +88,50 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
                   </DropdownMenu.Trigger>
 
                   <DropdownMenu.Content>
-                    {[mShare, mStatus, mAccount, mInstance].map((type, i) => (
+                    {[mShare, mStatus, mAccount, mInstance].map((menu, i) => (
                       <Fragment key={i}>
-                        {type.map((mGroup, index) => (
+                        {menu.map((group, index) => (
                           <DropdownMenu.Group key={index}>
-                            {mGroup.map(menu => (
+                            {group.map(item => {
-                              <DropdownMenu.Item key={menu.key} {...menu.item}>
+                              switch (item.type) {
-                                <DropdownMenu.ItemTitle children={menu.title} />
+                                case 'item':
-                                <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                                  return (
-                              </DropdownMenu.Item>
+                                    <DropdownMenu.Item key={item.key} {...item.props}>
-                            ))}
+                                      <DropdownMenu.ItemTitle children={item.title} />
+                                      {item.icon ? (
+                                        <DropdownMenu.ItemIcon ios={{ name: item.icon }} />
+                                      ) : null}
+                                    </DropdownMenu.Item>
+                                  )
+                                case 'sub':
+                                  return (
+                                    // @ts-ignore
+                                    <DropdownMenu.Sub key={item.key}>
+                                      <DropdownMenu.SubTrigger
+                                        key={item.trigger.key}
+                                        {...item.trigger.props}
+                                      >
+                                        <DropdownMenu.ItemTitle children={item.trigger.title} />
+                                        {item.trigger.icon ? (
+                                          <DropdownMenu.ItemIcon
+                                            ios={{ name: item.trigger.icon }}
+                                          />
+                                        ) : null}
+                                      </DropdownMenu.SubTrigger>
+                                      <DropdownMenu.SubContent>
+                                        {item.items.map(sub => (
+                                          <DropdownMenu.Item key={sub.key} {...sub.props}>
+                                            <DropdownMenu.ItemTitle children={sub.title} />
+                                            {sub.icon ? (
+                                              <DropdownMenu.ItemIcon ios={{ name: sub.icon }} />
+                                            ) : null}
+                                          </DropdownMenu.Item>
+                                        ))}
+                                      </DropdownMenu.SubContent>
+                                    </DropdownMenu.Sub>
+                                  )
+                              }
+                            })}
                           </DropdownMenu.Group>
                         ))}
                       </Fragment>

src/components/contextMenu/account.ts

@@ -3,6 +3,7 @@ import { displayMessage } from '@components/Message'
 import { useNavigation } from '@react-navigation/native'
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { useQueryClient } from '@tanstack/react-query'
+import apiInstance from '@utils/api/instance'
 import { TabSharedStackParamList, useNavState } from '@utils/navigation/navigators'
 import { useAccountQuery } from '@utils/queryHooks/account'
 import {
@@ -14,7 +15,7 @@ import {
   MutationVarsTimelineUpdateAccountProperty,
   useTimelineMutation
 } from '@utils/queryHooks/timeline'
-import { useAccountStorage } from '@utils/storage/actions'
+import { getAccountStorage, getReadableAccounts, useAccountStorage } from '@utils/storage/actions'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform } from 'react-native'
@@ -29,13 +30,13 @@ const menuAccount = ({
   openChange: boolean
   account?: Partial<Mastodon.Account> & Pick<Mastodon.Account, 'id' | 'username' | 'acct' | 'url'>
   status?: Mastodon.Status
-}): ContextMenu[][] => {
+}): ContextMenu => {
   const navigation =
     useNavigation<NativeStackNavigationProp<TabSharedStackParamList, any, undefined>>()
   const navState = useNavState()
   const { t } = useTranslation(['common', 'componentContextMenu', 'componentRelationship'])
 
-  const menus: ContextMenu[][] = [[]]
+  const menus: ContextMenu = [[]]
 
   const [enabled, setEnabled] = useState(openChange)
   useEffect(() => {
@@ -135,8 +136,9 @@ const menuAccount = ({
 
   if (!ownAccount && Platform.OS !== 'android' && type !== 'account') {
     menus[0].push({
+      type: 'item',
       key: 'account-following',
-      item: {
+      props: {
         onSelect: () =>
           data &&
           actualAccount &&
@@ -165,8 +167,9 @@ const menuAccount = ({
 
   if (!ownAccount) {
     menus[0].push({
+      type: 'item',
       key: 'account-list',
-      item: {
+      props: {
         onSelect: () => navigation.navigate('Tab-Shared-Account-In-Lists', { account }),
         disabled: Platform.OS !== 'android' ? !data || !isFetched : false,
         destructive: false,
@@ -176,8 +179,9 @@ const menuAccount = ({
       icon: 'checklist'
     })
     menus[0].push({
+      type: 'item',
       key: 'account-show-boosts',
-      item: {
+      props: {
         onSelect: () =>
           actualAccount &&
           relationshipMutation.mutate({
@@ -196,8 +200,9 @@ const menuAccount = ({
       icon: data?.showing_reblogs ? 'rectangle.on.rectangle.slash' : 'rectangle.on.rectangle'
     })
     menus[0].push({
+      type: 'item',
       key: 'account-mute',
-      item: {
+      props: {
         onSelect: () =>
           actualAccount &&
           timelineMutation.mutate({
@@ -216,58 +221,139 @@ const menuAccount = ({
       icon: data?.muting ? 'eye' : 'eye.slash'
     })
 
+    const followAs = () => {
+      if (type !== 'account') return
+      const accounts = getReadableAccounts()
+      menus[0].push({
+        type: 'sub',
+        key: 'account-follow-as',
+        trigger: {
+          key: 'account-follow-as',
+          props: { destructive: false, disabled: false, hidden: !accounts.length },
+          title: t('componentContextMenu:account.followAs.trigger'),
+          icon: 'person.badge.plus'
+        },
+        items: accounts.map(a => ({
+          key: `account-${a.key}`,
+          props: {
+            onSelect: async () => {
+              const lookup = await apiInstance<Mastodon.Account>({
+                account: a.key,
+                method: 'get',
+                url: 'accounts/lookup',
+                params: {
+                  acct:
+                    account.acct === account.username
+                      ? `${account.acct}@${getAccountStorage.string('auth.account.domain')}`
+                      : account.acct
+                }
+              }).then(res => res.body)
+              await apiInstance({
+                account: a.key,
+                method: 'post',
+                url: `accounts/${lookup.id}/follow`
+              })
+                .then(() =>
+                  displayMessage({
+                    type: 'success',
+                    message: t('componentContextMenu:account.followAs.succeed', {
+                      context: account.locked ? 'locked' : 'default',
+                      defaultValue: 'default',
+                      target: account.acct,
+                      source: a.acct
+                    })
+                  })
+                )
+                .catch(err =>
+                  displayMessage({
+                    type: 'error',
+                    message: t('common:message.error.message', {
+                      function: t('componentContextMenu:account.followAs.failed')
+                    }),
+                    ...(err.status &&
+                      typeof err.status === 'number' &&
+                      err.data &&
+                      err.data.error &&
+                      typeof err.data.error === 'string' && {
+                        description: err.data.error
+                      })
+                  })
+                )
+            },
+            disabled: false,
+            destructive: false,
+            hidden: a.active
+          },
+          title: a.acct
+        }))
+      })
+    }
+    followAs()
+
     menus.push([
       {
-        key: 'account-block',
+        type: 'sub',
-        item: {
+        key: 'account-block-report',
-          onSelect: () =>
+        trigger: {
-            Alert.alert(
+          key: 'account-block-report',
-              t('componentContextMenu:account.block.alert.title', {
+          props: { destructive: true, disabled: false, hidden: false },
-                username: actualAccount?.username
+          title: t('componentContextMenu:account.blockReport'),
-              }),
+          icon: 'hand.raised'
-              undefined,
-              [
-                {
-                  text: t('common:buttons.confirm'),
-                  style: 'destructive',
-                  onPress: () =>
-                    actualAccount &&
-                    timelineMutation.mutate({
-                      type: 'updateAccountProperty',
-                      id: actualAccount.id,
-                      payload: { property: 'block', currentValue: data?.blocking }
-                    })
-                },
-                {
-                  text: t('common:buttons.cancel')
-                }
-              ]
-            ),
-          disabled: Platform.OS !== 'android' ? !data || !isFetched : false,
-          destructive: !data?.blocking,
-          hidden: false
         },
-        title: t('componentContextMenu:account.block.action', {
+        items: [
-          defaultValue: 'false',
+          {
-          context: (data?.blocking || false).toString()
+            key: 'account-block',
-        }),
+            props: {
-        icon: data?.blocking ? 'checkmark.circle' : 'xmark.circle'
+              onSelect: () =>
-      },
+                Alert.alert(
-      {
+                  t('componentContextMenu:account.block.alert.title', {
-        key: 'account-reports',
+                    username: actualAccount?.username
-        item: {
+                  }),
-          onSelect: () =>
+                  undefined,
-            actualAccount &&
+                  [
-            navigation.navigate('Tab-Shared-Report', {
+                    {
-              account: actualAccount,
+                      text: t('common:buttons.confirm'),
-              status
+                      style: 'destructive',
+                      onPress: () =>
+                        actualAccount &&
+                        timelineMutation.mutate({
+                          type: 'updateAccountProperty',
+                          id: actualAccount.id,
+                          payload: { property: 'block', currentValue: data?.blocking }
+                        })
+                    },
+                    {
+                      text: t('common:buttons.cancel')
+                    }
+                  ]
+                ),
+              disabled: Platform.OS !== 'android' ? !data || !isFetched : false,
+              destructive: !data?.blocking,
+              hidden: false
+            },
+            title: t('componentContextMenu:account.block.action', {
+              defaultValue: 'false',
+              context: (data?.blocking || false).toString()
             }),
-          disabled: Platform.OS !== 'android' ? !data || !isFetched : false,
+            icon: data?.blocking ? 'checkmark.circle' : 'xmark.circle'
-          destructive: true,
+          },
-          hidden: false
+          {
-        },
+            key: 'account-reports',
-        title: t('componentContextMenu:account.reports.action'),
+            props: {
-        icon: 'flag'
+              onSelect: () =>
+                actualAccount &&
+                navigation.navigate('Tab-Shared-Report', {
+                  account: actualAccount,
+                  status
+                }),
+              disabled: Platform.OS !== 'android' ? !data || !isFetched : false,
+              destructive: true,
+              hidden: false
+            },
+            title: t('componentContextMenu:account.reports.action'),
+            icon: 'flag'
+          }
+        ]
       }
     ])
   }

src/components/contextMenu/at.ts

@@ -3,51 +3,51 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { RootStackParamList, useNavState } from '@utils/navigation/navigators'
 import { useTranslation } from 'react-i18next'
 
-const menuAt = ({ account }: { account: Mastodon.Account }): ContextMenu[][] => {
+const menuAt = ({ account }: { account: Mastodon.Account }): ContextMenu => {
   const { t } = useTranslation('componentContextMenu')
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>()
   const navigationState = useNavState()
 
-  const menus: ContextMenu[][] = []
+  return [
-
+    [
-  menus.push([
+      {
-    {
+        type: 'item',
-      key: 'at-direct',
+        key: 'at-direct',
-      item: {
+        props: {
-        onSelect: () =>
+          onSelect: () =>
-          navigation.navigate('Screen-Compose', {
+            navigation.navigate('Screen-Compose', {
-            type: 'conversation',
+              type: 'conversation',
-            accts: [account.acct],
+              accts: [account.acct],
-            visibility: 'direct',
+              visibility: 'direct',
-            navigationState
+              navigationState
-          }),
+            }),
-        disabled: false,
+          disabled: false,
-        destructive: false,
+          destructive: false,
-        hidden: false
+          hidden: false
+        },
+        title: t('at.direct'),
+        icon: 'envelope'
       },
-      title: t('at.direct'),
+      {
-      icon: 'envelope'
+        type: 'item',
-    },
+        key: 'at-public',
-    {
+        props: {
-      key: 'at-public',
+          onSelect: () =>
-      item: {
+            navigation.navigate('Screen-Compose', {
-        onSelect: () =>
+              type: 'conversation',
-          navigation.navigate('Screen-Compose', {
+              accts: [account.acct],
-            type: 'conversation',
+              visibility: 'public',
-            accts: [account.acct],
+              navigationState
-            visibility: 'public',
+            }),
-            navigationState
+          disabled: false,
-          }),
+          destructive: false,
-        disabled: false,
+          hidden: false
-        destructive: false,
+        },
-        hidden: false
+        title: t('at.public'),
-      },
+        icon: 'at'
-      title: t('at.public'),
+      }
-      icon: 'at'
+    ]
-    }
+  ]
-  ])
-
-  return menus
 }
 
 export default menuAt

src/components/contextMenu/index.d.ts

@@ -1,6 +1,53 @@
-type ContextMenu = {
+// type ContextMenu = (
+//   | {
+//       type: 'group'
+//       key: string
+//       items: ContextMenuItem[]
+//     }
+//   | {
+//       type: 'sub'
+//       key: string
+//       trigger: {
+//         key: string
+//         props: {
+//           disabled: boolean
+//           destructive: boolean
+//           hidden: boolean
+//         }
+//         title: string
+//         icon?: string
+//       }
+//       items: ContextMenuItem[]
+//     }
+// )[]
+
+type ContextMenu = (ContextMenuItem | ContextMenuSub)[][]
+
+type ContextMenuItem = {
+  type: 'item'
   key: string
-  item: { onSelect: () => void; disabled: boolean; destructive: boolean; hidden: boolean }
+  props: {
+    onSelect: () => void
+    disabled: boolean
+    destructive: boolean
+    hidden: boolean
+  }
   title: string
-  icon: string
+  icon?: string
+}
+
+type ContextMenuSub = {
+  type: 'sub'
+  key: string
+  trigger: {
+    key: string
+    props: {
+      disabled: boolean
+      destructive: boolean
+      hidden: boolean
+    }
+    title: string
+    icon?: string
+  }
+  items: Omit<ContextMenuItem, 'type'>[]
 }

src/components/contextMenu/instance.ts

@@ -12,7 +12,7 @@ const menuInstance = ({
 }: {
   status?: Mastodon.Status
   queryKey?: QueryKeyTimeline
-}): ContextMenu[][] => {
+}): ContextMenu => {
   if (!status || !queryKey) return []
 
   const { t } = useTranslation(['common', 'componentContextMenu'])
@@ -30,15 +30,16 @@ const menuInstance = ({
     }
   })
 
-  const menus: ContextMenu[][] = []
+  const menus: ContextMenu = []
 
   const instance = parse(status.uri).hostname
 
   if (instance !== getAccountStorage.string('auth.domain')) {
     menus.push([
       {
+        type: 'item',
         key: 'instance-block',
-        item: {
+        props: {
           onSelect: () =>
             Alert.alert(
               t('componentContextMenu:instance.block.alert.title', { instance }),

src/components/contextMenu/share.ts

@@ -15,18 +15,19 @@ const menuShare = (
         type: 'account'
         url?: string
       }
-): ContextMenu[][] => {
+): ContextMenu => {
   if (params.type === 'status' && params.visibility === 'direct') return []
 
   const { t } = useTranslation('componentContextMenu')
 
-  const menus: ContextMenu[][] = [[]]
+  const menus: ContextMenu = [[]]
 
   if (params.url) {
     const url = params.url
     menus[0].push({
+      type: 'item',
       key: 'share',
-      item: {
+      props: {
         onSelect: () => {
           switch (Platform.OS) {
             case 'ios':
@@ -47,8 +48,9 @@ const menuShare = (
   }
   if (params.type === 'status')
     menus[0].push({
+      type: 'item',
       key: 'copy',
-      item: {
+      props: {
         onSelect: () => {
           Clipboard.setString(params.rawContent?.current.join(`\n\n`) || '')
           displayMessage({ type: 'success', message: t(`copy.succeed`) })

src/components/contextMenu/status.ts

@@ -21,7 +21,7 @@ const menuStatus = ({
 }: {
   status?: Mastodon.Status
   queryKey?: QueryKeyTimeline
-}): ContextMenu[][] => {
+}): ContextMenu => {
   if (!status || !queryKey) return []
 
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList, 'Screen-Tabs'>>()
@@ -55,7 +55,7 @@ const menuStatus = ({
     }
   })
 
-  const menus: ContextMenu[][] = []
+  const menus: ContextMenu = []
 
   const [accountId] = useAccountStorage.string('auth.account.id')
   const ownAccount = accountId === status.account?.id
@@ -64,8 +64,9 @@ const menuStatus = ({
 
   menus.push([
     {
+      type: 'item',
       key: 'status-edit',
-      item: {
+      props: {
         onSelect: async () => {
           let replyToStatus: Mastodon.Status | undefined = undefined
           if (status.in_reply_to_id) {
@@ -102,8 +103,9 @@ const menuStatus = ({
       icon: 'square.and.pencil'
     },
     {
+      type: 'item',
       key: 'status-delete-edit',
-      item: {
+      props: {
         onSelect: () =>
           Alert.alert(
             t('componentContextMenu:status.deleteEdit.alert.title'),
@@ -145,8 +147,9 @@ const menuStatus = ({
       icon: 'pencil.and.outline'
     },
     {
+      type: 'item',
       key: 'status-delete',
-      item: {
+      props: {
         onSelect: () =>
           Alert.alert(
             t('componentContextMenu:status.delete.alert.title'),
@@ -176,8 +179,9 @@ const menuStatus = ({
 
   menus.push([
     {
+      type: 'item',
       key: 'status-mute',
-      item: {
+      props: {
         onSelect: () =>
           mutation.mutate({
             type: 'updateStatusProperty',
@@ -198,8 +202,9 @@ const menuStatus = ({
       icon: status.muted ? 'speaker' : 'speaker.slash'
     },
     {
+      type: 'item',
       key: 'status-pin',
-      item: {
+      props: {
         onSelect: () =>
           // Also note that reblogs cannot be pinned.
           mutation.mutate({

src/i18n/ca/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Silencia l'usuari",
       "action_true": "Deixa de silenciar l'usuari"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Bloqueja l'usuari",
       "action_true": "Deixa de bloquejar l'usuari",

src/i18n/cs/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "",
       "action_true": ""
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "",
       "action_true": "",

src/i18n/de/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Profil stummschalten",
       "action_true": "Stummschaltung des Nutzers aufheben"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Nutzer blockieren",
       "action_true": "User entblocken",

src/i18n/el/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Σίγαση χρήστη",
       "action_true": "Κατάργηση σίγασης χρήστη"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Αποκλεισμός χρήστη",
       "action_true": "Κατάργηση αποκλεισμού χρήστη",

src/i18n/en/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Mute user",
       "action_true": "Unmute user"
     },
+    "followAs": {
+      "trigger": "Follow as...",
+      "succeed_default": "Now following @{{target}} with @{{source}}",
+      "succeed_locked": "Sent follow request to @{{target}} with {{source}}, pending approval",
+      "failed": "Follow as"
+    },
+    "blockReport": "Block and report...",
     "block": {
       "action_false": "Block user",
       "action_true": "Unblock user",

src/i18n/es/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Silenciar usuario",
       "action_true": "Dejar de silenciar al usuario"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Bloquear usuario",
       "action_true": "Desbloquear usuario",

src/i18n/fr/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Rendre muet l'utilisateur",
       "action_true": "Rendre la parole"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Bloquer l'utilisateur",
       "action_true": "Débloquer l'utilisateur",

src/i18n/it/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Muta utente",
       "action_true": "Riattiva utente"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Blocca utente",
       "action_true": "Sblocca utente",

src/i18n/ja/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "ユーザーをミュート",
       "action_true": "ユーザーのミュートを解除"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "ユーザーをブロック",
       "action_true": "ユーザーのブロックを解除",

src/i18n/ko/components/contextMenu.json

@@ -6,26 +6,33 @@
       "action_false": "사용자 팔로우",
       "action_true": "사용자 팔로우 해제"
     },
-    "inLists": "",
+    "inLists": "사용자를 포함한 리스트",
     "showBoosts": {
-      "action_false": "",
+      "action_false": "사용자의 부스트 보이기",
-      "action_true": ""
+      "action_true": "사용자의 부스트 숨기기"
     },
     "mute": {
       "action_false": "사용자 뮤트",
       "action_true": "사용자 뮤트 해제"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "사용자 차단",
       "action_true": "사용자 차단 해제",
       "alert": {
-        "title": ""
+        "title": "정말 @{{username}} 사용자를 차단할까요?"
       }
     },
     "reports": {
       "action": "사용자 신고 및 차단",
       "alert": {
-        "title": ""
+        "title": "정말 @{{username}} 사용자를 차단하고 신고할까요?"
       }
     }
   },

src/i18n/ko/components/timeline.json

@@ -15,8 +15,8 @@
     "message": "마지막 읽음"
   },
   "refresh": {
-    "fetchPreviousPage": "여기부터 더 새로운",
+    "fetchPreviousPage": "이 시점에 이어서 불러오기",
-    "refetch": "가장 최신으로"
+    "refetch": "최신 내용 불러오기"
   },
   "shared": {
     "actioned": {
@@ -83,7 +83,7 @@
         "text": "불러오기 오류",
         "button": "원격 링크 시도"
       },
-      "altText": ""
+      "altText": "대체 텍스트"
     },
     "avatar": {
       "accessibilityLabel": "{{name}}의 아바타",
@@ -116,14 +116,14 @@
             "accessibilityHint": "사용자 계정"
           }
         },
-        "application": "",
+        "application": "{{application}}으로 툿",
         "edited": {
           "accessibilityLabel": "툿 수정됨"
         },
         "muted": {
           "accessibilityLabel": "툿 음소거됨"
         },
-        "replies": "",
+        "replies": "답장 <0 />",
         "visibility": {
           "direct": {
             "accessibilityLabel": "툿이 개인 메시지에요"

src/i18n/ko/screens/compose.json

@@ -140,7 +140,7 @@
     },
     "editAttachment": {
       "header": {
-        "title": "첨부파일 편집",
+        "title": "첨부 파일 편집",
         "right": {
           "accessibilityLabel": "첨부 파일 편집 저장",
           "failed": {
@@ -152,7 +152,7 @@
       "content": {
         "altText": {
           "heading": "시각장애인을 위한 미디어 설명",
-          "placeholder": "미디어에 alt-text라고도 하는 설명을 추가하여 시각 장애가 있는 사람들을 포함하여 더 많은 사람들이 액세스할 수 있도록 할 수 있어요. \n\n좋은 설명은 간결하지만 미디어에 있는 내용을 정확하게 제시하여 컨텍스트를 파악할 수 있는 것이에요."
+          "placeholder": "미디어에 '대체 텍스트'라고도 하는 설명을 추가하여, 시각 장애가 있는 사람들을 포함해 더 많은 사람들이 접근하도록 할 수 있어요.\n\n좋은 설명은 간결하지만, 미디어의 내용을 정확하게 표현하여 문맥을 파악할 수 있는 것이에요."
         },
         "imageFocus": "포커스 원을 드래그하여 포커스 포인트를 업데이트할 수 있어요"
       }

src/i18n/ko/screens/tabs.json

@@ -266,7 +266,7 @@
         "heading": "다크 테마",
         "options": {
           "lighter": "기본값",
-          "darker": ""
+          "darker": "완전히 검게"
         }
       },
       "browser": {
@@ -277,7 +277,7 @@
         }
       },
       "autoplayGifv": {
-        "heading": ""
+        "heading": "타임라인의 GIF 파일 자동 재생"
       },
       "feedback": {
         "heading": "기능 제안"
@@ -330,22 +330,22 @@
       "name": "수정 이력"
     },
     "report": {
-      "name": "",
+      "name": "@{{acct}} 신고",
-      "report": "",
+      "report": "신고",
       "forward": {
-        "heading": ""
+        "heading": "원격 인스턴스 {{instance}}에도 익명으로 전달"
       },
       "reasons": {
-        "heading": "",
+        "heading": "이 계정에 어떤 문제가 있나요?",
-        "spam": "",
+        "spam": "스팸입니다",
-        "other": "",
+        "other": "다른 문제가 있습니다",
-        "violation": ""
+        "violation": "서버 규칙을 위반합니다"
       },
       "comment": {
-        "heading": ""
+        "heading": "그 밖에 추가로 작성할 내용이 있나요?"
       },
       "violatedRules": {
-        "heading": ""
+        "heading": "서버 규칙 위반 내용"
       }
     },
     "search": {
@@ -378,7 +378,7 @@
     "toot": {
       "name": "대화",
       "remoteFetch": {
-        "title": "",
+        "title": "원격 컨텐츠를 포함",
         "message": ""
       }
     },

src/i18n/nl/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Gebruiker dempen",
       "action_true": "Dempen opheffen voor gebruiker"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Gebruiker blokkeren",
       "action_true": "Gebruiker deblokkeren",

src/i18n/pl/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Wycisz użytkownika",
       "action_true": "Wyłącz wyciszenie"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Zablokuj użytkownika",
       "action_true": "Odblokuj użytkownika",

src/i18n/pt_BR/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Silenciar usuário",
       "action_true": "Desativar o silêncio do usuário"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Bloquear usuário",
       "action_true": "Desbloquear usuário",

src/i18n/ru/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "",
       "action_true": ""
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "",
       "action_true": "",

src/i18n/sv/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Tysta användare",
       "action_true": "Sluta tysta användare"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Blockera användare",
       "action_true": "Avblockera användare",

src/i18n/uk/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Заглушити користувача",
       "action_true": "Зняти заглушення з користувача"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Заблокувати користувача",
       "action_true": "Розблокувати користувача",

src/i18n/vi/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "Ẩn người này",
       "action_true": "Bỏ ẩn người dùng"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "Chặn người này",
       "action_true": "Bỏ chặn người dùng",

src/i18n/zh-Hans/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "静音用户",
       "action_true": "取消静音用户"
     },
+    "followAs": {
+      "trigger": "关注…",
+      "succeed_default": "{{source}} 正在关注 {{target}}",
+      "succeed_locked": "已从 {{source}} 发送关注请求至 {{target}}，等待通过",
+      "failed": "用其它账户关注"
+    },
+    "blockReport": "屏蔽与举报…",
     "block": {
       "action_false": "屏蔽用户",
       "action_true": "取消屏蔽用户",

src/i18n/zh-Hant/components/contextMenu.json

@@ -15,6 +15,13 @@
       "action_false": "靜音使用者",
       "action_true": "解除靜音使用者"
     },
+    "followAs": {
+      "trigger": "",
+      "succeed_default": "",
+      "succeed_locked": "",
+      "failed": ""
+    },
+    "blockReport": "",
     "block": {
       "action_false": "封鎖使用者",
       "action_true": "解除封鎖使用者",

src/screens/AccountSelection.tsx

@@ -2,7 +2,7 @@ import AccountButton from '@components/AccountButton'
 import CustomText from '@components/Text'
 import navigationRef from '@utils/navigation/navigationRef'
 import { RootStackScreenProps } from '@utils/navigation/navigators'
-import { getGlobalStorage } from '@utils/storage/actions'
+import { getReadableAccounts } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import * as VideoThumbnails from 'expo-video-thumbnails'
@@ -92,7 +92,7 @@ const ScreenAccountSelection = ({
   const { colors } = useTheme()
   const { t } = useTranslation('screenAccountSelection')
 
-  const accounts = getGlobalStorage.object('accounts')
+  const accounts = getReadableAccounts()
 
   return (
     <ScrollView
@@ -125,24 +125,20 @@ const ScreenAccountSelection = ({
             marginTop: StyleConstants.Spacing.M
           }}
         >
-          {accounts &&
+          {accounts.map((account, index) => {
-            accounts
+            return (
-              .slice()
+              <AccountButton
-              .sort((a, b) => a.localeCompare(b))
+                key={index}
-              .map((account, index) => {
+                account={account}
-                return (
+                additionalActions={() =>
-                  <AccountButton
+                  navigationRef.navigate('Screen-Compose', {
-                    key={index}
+                    type: 'share',
-                    account={account}
+                    ...share
-                    additionalActions={() =>
+                  })
-                      navigationRef.navigate('Screen-Compose', {
+                }
-                        type: 'share',
+              />
-                        ...share
+            )
-                      })
+          })}
-                    }
-                  />
-                )
-              })}
         </View>
       </View>
     </ScrollView>

src/screens/Tabs/Me/Switch.tsx

@@ -1,7 +1,7 @@
 import AccountButton from '@components/AccountButton'
 import ComponentInstance from '@components/Instance'
 import CustomText from '@components/Text'
-import { getGlobalStorage } from '@utils/storage/actions'
+import { getReadableAccounts } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useRef } from 'react'
@@ -12,8 +12,7 @@ import { ScrollView } from 'react-native-gesture-handler'
 const TabMeSwitch: React.FC = () => {
   const { t } = useTranslation('screenTabs')
   const { colors } = useTheme()
-  const accounts = getGlobalStorage.object('accounts')
+  const accounts = getReadableAccounts()
-  const accountActive = getGlobalStorage.string('account.active')
 
   const scrollViewRef = useRef<ScrollView>(null)
   useEffect(() => {
@@ -71,19 +70,9 @@ const TabMeSwitch: React.FC = () => {
               marginTop: StyleConstants.Spacing.M
             }}
           >
-            {accounts &&
+            {accounts.map((account, index) => {
-              accounts
+              return <AccountButton key={index} account={account} />
-                .slice()
+            })}
-                .sort((a, b) => a.localeCompare(b))
-                .map((account, index) => {
-                  return (
-                    <AccountButton
-                      key={index}
-                      account={account}
-                      selected={account === accountActive}
-                    />
-                  )
-                })}
           </View>
         </View>
       </ScrollView>

src/screens/Tabs/Shared/Account/Context.tsx

@@ -2,6 +2,7 @@ import { createContext } from 'react'
 
 type AccountContextType = {
   account?: Mastodon.Account
+  relationship?: Mastodon.Relationship
   pageMe?: boolean
 }
 const AccountContext = createContext<AccountContextType>({} as AccountContextType)

src/screens/Tabs/Shared/Account/Information.tsx

@@ -1,4 +1,3 @@
-import { useRoute } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
@@ -11,16 +10,19 @@ import AccountInformationCreated from './Information/Created'
 import AccountInformationFields from './Information/Fields'
 import AccountInformationName from './Information/Name'
 import AccountInformationNote from './Information/Note'
+import AccountInformationPrivateNote from './Information/PrivateNotes'
 import AccountInformationStats from './Information/Stats'
 
 const AccountInformation: React.FC = () => {
   const { colors } = useTheme()
 
-  const { name } = useRoute()
-  const myInfo = name !== 'Tab-Shared-Account'
-
   return (
-    <View style={styles.base}>
+    <View
+      style={{
+        marginTop: -StyleConstants.Avatar.L / 2,
+        padding: StyleConstants.Spacing.Global.PagePadding
+      }}
+    >
       <Placeholder
         Animation={props => (
           <Fade {...props} style={{ backgroundColor: colors.shimmerHighlight }} />
@@ -35,6 +37,8 @@ const AccountInformation: React.FC = () => {
 
         <AccountInformationAccount />
 
+        <AccountInformationPrivateNote />
+
         <AccountInformationFields />
 
         <AccountInformationNote />

src/screens/Tabs/Shared/Account/Information/Account.tsx

@@ -1,6 +1,5 @@
 import Icon from '@components/Icon'
 import CustomText from '@components/Text'
-import { useRelationshipQuery } from '@utils/queryHooks/relationship'
 import { getAccountStorage, useAccountStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -11,7 +10,7 @@ import { PlaceholderLine } from 'rn-placeholder'
 import AccountContext from '../Context'
 
 const AccountInformationAccount: React.FC = () => {
-  const { account, pageMe } = useContext(AccountContext)
+  const { account, relationship, pageMe } = useContext(AccountContext)
 
   const { t } = useTranslation('screenTabs')
   const { colors } = useTheme()
@@ -19,8 +18,6 @@ const AccountInformationAccount: React.FC = () => {
   const [acct] = useAccountStorage.string('auth.account.acct')
   const domain = getAccountStorage.string('auth.account.domain')
 
-  const { data: relationship } = useRelationshipQuery({ id: account?.id })
-
   const localInstance = account?.acct.includes('@') ? account?.acct.includes(`@${domain}`) : true
 
   if (account || pageMe) {

src/screens/Tabs/Shared/Account/Information/Actions.tsx

@@ -2,7 +2,6 @@ import Button from '@components/Button'
 import menuAt from '@components/contextMenu/at'
 import { RelationshipOutgoing } from '@components/Relationship'
 import { useNavigation } from '@react-navigation/native'
-import { useRelationshipQuery } from '@utils/queryHooks/relationship'
 import { useAccountStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import React, { useContext } from 'react'
@@ -12,7 +11,7 @@ import * as DropdownMenu from 'zeego/dropdown-menu'
 import AccountContext from '../Context'
 
 const AccountInformationActions: React.FC = () => {
-  const { account, pageMe } = useContext(AccountContext)
+  const { account, relationship, pageMe } = useContext(AccountContext)
 
   if (!account || account.suspended) {
     return null
@@ -50,13 +49,12 @@ const AccountInformationActions: React.FC = () => {
   const [accountId] = useAccountStorage.string('auth.account.id')
   const ownAccount = account?.id === accountId
 
-  const query = useRelationshipQuery({ id: account.id })
   const mAt = menuAt({ account })
 
   if (!ownAccount && account) {
     return (
       <View style={styles.base}>
-        {query.data && !query.data.blocked_by ? (
+        {relationship && !relationship.blocked_by ? (
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
               <Button
@@ -69,14 +67,41 @@ const AccountInformationActions: React.FC = () => {
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Content>
-              {mAt.map((mGroup, index) => (
+              {mAt.map((group, index) => (
                 <DropdownMenu.Group key={index}>
-                  {mGroup.map(menu => (
+                  {group.map(item => {
-                    <DropdownMenu.Item key={menu.key} {...menu.item}>
+                    switch (item.type) {
-                      <DropdownMenu.ItemTitle children={menu.title} />
+                      case 'item':
-                      <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                        return (
-                    </DropdownMenu.Item>
+                          <DropdownMenu.Item key={item.key} {...item.props}>
-                  ))}
+                            <DropdownMenu.ItemTitle children={item.title} />
+                            {item.icon ? <DropdownMenu.ItemIcon ios={{ name: item.icon }} /> : null}
+                          </DropdownMenu.Item>
+                        )
+                      case 'sub':
+                        return (
+                          // @ts-ignore
+                          <DropdownMenu.Sub key={item.key}>
+                            <DropdownMenu.SubTrigger key={item.trigger.key} {...item.trigger.props}>
+                              <DropdownMenu.ItemTitle children={item.trigger.title} />
+                              {item.trigger.icon ? (
+                                <DropdownMenu.ItemIcon ios={{ name: item.trigger.icon }} />
+                              ) : null}
+                            </DropdownMenu.SubTrigger>
+                            <DropdownMenu.SubContent>
+                              {item.items.map(sub => (
+                                <DropdownMenu.Item key={sub.key} {...sub.props}>
+                                  <DropdownMenu.ItemTitle children={sub.title} />
+                                  {sub.icon ? (
+                                    <DropdownMenu.ItemIcon ios={{ name: sub.icon }} />
+                                  ) : null}
+                                </DropdownMenu.Item>
+                              ))}
+                            </DropdownMenu.SubContent>
+                          </DropdownMenu.Sub>
+                        )
+                    }
+                  })}
                 </DropdownMenu.Group>
               ))}
             </DropdownMenu.Content>

src/screens/Tabs/Shared/Account/Information/PrivateNotes.tsx

@@ -0,0 +1,28 @@
+import { ParseHTML } from '@components/Parse'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useContext } from 'react'
+import { View } from 'react-native'
+import AccountContext from '../Context'
+
+const AccountInformationPrivateNote: React.FC = () => {
+  const { relationship, pageMe } = useContext(AccountContext)
+  if (pageMe) return null
+
+  const { colors } = useTheme()
+
+  return relationship?.note ? (
+    <View
+      style={{
+        marginBottom: StyleConstants.Spacing.L,
+        borderLeftColor: colors.border,
+        borderLeftWidth: StyleConstants.Spacing.XS,
+        paddingLeft: StyleConstants.Spacing.S
+      }}
+    >
+      <ParseHTML content={relationship.note} size={'S'} selectable numberOfLines={2} />
+    </View>
+  ) : null
+}
+
+export default AccountInformationPrivateNote

src/screens/Tabs/Shared/Account/index.tsx

@@ -7,6 +7,7 @@ import SegmentedControl from '@react-native-community/segmented-control'
 import { useQueryClient } from '@tanstack/react-query'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { useAccountQuery } from '@utils/queryHooks/account'
+import { useRelationshipQuery } from '@utils/queryHooks/relationship'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -51,6 +52,10 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
       onError: () => navigation.goBack()
     }
   })
+  const { data: dataRelationship } = useRelationshipQuery({
+    id: account._remote ? data?.id : account.id,
+    options: { enabled: account._remote ? !!data?.id : true }
+  })
 
   const queryClient = useQueryClient()
   const [queryKey, setQueryKey] = useState<QueryKeyTimeline>([
@@ -89,16 +94,48 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Content>
-              {[mShare, mAccount].map((type, i) => (
+              {[mShare, mAccount].map((menu, i) => (
                 <Fragment key={i}>
-                  {type.map((mGroup, index) => (
+                  {menu.map((group, index) => (
                     <DropdownMenu.Group key={index}>
-                      {mGroup.map(menu => (
+                      {group.map(item => {
-                        <DropdownMenu.Item key={menu.key} {...menu.item}>
+                        switch (item.type) {
-                          <DropdownMenu.ItemTitle children={menu.title} />
+                          case 'item':
-                          <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                            return (
-                        </DropdownMenu.Item>
+                              <DropdownMenu.Item key={item.key} {...item.props}>
-                      ))}
+                                <DropdownMenu.ItemTitle children={item.title} />
+                                {item.icon ? (
+                                  <DropdownMenu.ItemIcon ios={{ name: item.icon }} />
+                                ) : null}
+                              </DropdownMenu.Item>
+                            )
+                          case 'sub':
+                            return (
+                              // @ts-ignore
+                              <DropdownMenu.Sub key={item.key}>
+                                <DropdownMenu.SubTrigger
+                                  key={item.trigger.key}
+                                  {...item.trigger.props}
+                                >
+                                  <DropdownMenu.ItemTitle children={item.trigger.title} />
+                                  {item.trigger.icon ? (
+                                    <DropdownMenu.ItemIcon ios={{ name: item.trigger.icon }} />
+                                  ) : null}
+                                </DropdownMenu.SubTrigger>
+                                <DropdownMenu.SubContent>
+                                  {item.items.map(sub => (
+                                    <DropdownMenu.Item key={sub.key} {...sub.props}>
+                                      <DropdownMenu.ItemTitle children={sub.title} />
+                                      {sub.icon ? (
+                                        <DropdownMenu.ItemIcon ios={{ name: sub.icon }} />
+                                      ) : null}
+                                    </DropdownMenu.Item>
+                                  ))}
+                                </DropdownMenu.SubContent>
+                              </DropdownMenu.Sub>
+                            )
+                        }
+                      })}
                     </DropdownMenu.Group>
                   ))}
                 </Fragment>
@@ -191,7 +228,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
   }, [segment, dataUpdatedAt, mode])
 
   return (
-    <AccountContext.Provider value={{ account: data }}>
+    <AccountContext.Provider value={{ account: data, relationship: dataRelationship }}>
       <AccountNav scrollY={scrollY} />
 
       {data?.suspended ? (

src/utils/api/general.ts

@@ -21,14 +21,14 @@ const apiGeneral = async <T = unknown>({
   body
 }: Params): Promise<PagedResponse<T>> => {
   console.log(
-    ctx.bgGreen.bold(' API general ') +
+    ctx.bgMagenta.bold(' General ') +
       ' ' +
       domain +
       ' ' +
       method +
-      ctx.green(' -> ') +
+      ctx.magenta(' -> ') +
       `/${url}` +
-      (params ? ctx.green(' -> ') : ''),
+      (params ? ctx.magenta(' -> ') : ''),
     params ? params : ''
   )
 

src/utils/api/helpers/index.ts

@@ -27,9 +27,9 @@ const handleError =
 
     if (error?.response) {
       if (config?.captureResponse) {
+        Sentry.setTag('error_status', error.response.status)
         Sentry.setContext('Error response', {
           data: error.response.data,
-          status: error.response.status,
           headers: error.response.headers
         })
       }

src/utils/api/instance.ts

@@ -1,8 +1,10 @@
 import { getAccountDetails } from '@utils/storage/actions'
+import { StorageGlobal } from '@utils/storage/global'
 import axios, { AxiosRequestConfig } from 'axios'
 import { ctx, handleError, PagedResponse, parseHeaderLinks, userAgent } from './helpers'
 
 export type Params = {
+  account?: StorageGlobal['account.active']
   method: 'get' | 'post' | 'put' | 'delete' | 'patch'
   version?: 'v1' | 'v2'
   url: string
@@ -15,6 +17,7 @@ export type Params = {
 }
 
 const apiInstance = async <T = unknown>({
+  account,
   method,
   version = 'v1',
   url,
@@ -23,7 +26,7 @@ const apiInstance = async <T = unknown>({
   body,
   extras
 }: Params): Promise<PagedResponse<T>> => {
-  const accountDetails = getAccountDetails(['auth.domain', 'auth.token'])
+  const accountDetails = getAccountDetails(['auth.domain', 'auth.token'], account)
   if (!accountDetails) {
     console.warn(ctx.bgRed.white.bold(' API instance '), 'No account detail available')
     return Promise.reject()
@@ -35,9 +38,9 @@ const apiInstance = async <T = unknown>({
   }
 
   console.log(
-    ctx.bgGreen.bold(' API instance '),
+    ctx.bgBlue.bold(' Instance '),
     accountDetails['auth.domain'],
-    method + ctx.green(' -> ') + `/${url}` + (params ? ctx.green(' -> ') : ''),
+    method + ctx.blue(' -> ') + `/${url}` + (params ? ctx.blue(' -> ') : ''),
     params ? params : ''
   )
 

src/utils/api/tooot.ts

@@ -26,7 +26,7 @@ const apiTooot = async <T = unknown>({
   body
 }: Params): Promise<{ body: T }> => {
   console.log(
-    ctx.bgGreen.bold(' API tooot ') +
+    ctx.bgGreen.bold(' tooot ') +
       ' ' +
       method +
       ctx.green(' -> ') +

src/utils/push/useConnect.ts

@@ -96,7 +96,7 @@ const pushUseConnect = () => {
   )
 
   useEffect(() => {
-    Sentry.setContext('Push', { expoToken, pushEnabledCount })
+    Sentry.setTags({ expoToken, pushEnabledCount })
 
     if (expoToken && pushEnabledCount) {
       connectQuery.refetch()

src/utils/startup/log.ts

@@ -6,9 +6,9 @@ const log = (type: 'log' | 'warn' | 'error', func: string, message: string) => {
   switch (type) {
     case 'log':
       console.log(
-        ctx.bgBlue.white.bold(' Start up ') +
+        ctx.bgGrey.white.bold(' Start up ') +
           ' ' +
-          ctx.bgBlueBright.black(` ${func} `) +
+          ctx.bgGrey.black(` ${func} `) +
           ' ' +
           message
       )

src/utils/startup/timezone.ts

@@ -4,8 +4,10 @@ import log from './log'
 const timezone = () => {
   log('log', 'Timezone', Localization.getCalendars()[0].timeZone || 'unknown')
   if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
-    // @ts-ignore
+    try {
-    Intl.DateTimeFormat.__setDefaultTimeZone(Localization.getCalendars()[0].timeZone)
+      // @ts-ignore
+      Intl.DateTimeFormat.__setDefaultTimeZone(Intl.DateTimeFormat.__setDefaultTimeZone('xxx'))
+    } catch {}
   }
 }
 

src/utils/storage/actions.ts

@@ -228,6 +228,41 @@ export const setAccount = async (account: string) => {
   queryClient.clear()
 }
 
+export type ReadableAccountType = {
+  acct: string
+  key: string
+  active: boolean
+}
+export const getReadableAccounts = (): ReadableAccountType[] => {
+  const accountActive = getGlobalStorage.string('account.active')
+  const accounts = getGlobalStorage.object('accounts')?.sort((a, b) => a.localeCompare(b))
+  accounts?.splice(
+    accounts.findIndex(a => a === accountActive),
+    1
+  )
+  accounts?.unshift(accountActive || '')
+  return (
+    accounts?.map(account => {
+      const details = getAccountDetails(
+        ['auth.account.acct', 'auth.account.domain', 'auth.domain', 'auth.account.id'],
+        account
+      )
+      if (details) {
+        return {
+          acct: `@${details['auth.account.acct']}@${details['auth.account.domain']}`,
+          key: generateAccountKey({
+            domain: details['auth.domain'],
+            id: details['auth.account.id']
+          }),
+          active: account === accountActive
+        }
+      } else {
+        return { acct: '', key: '', active: false }
+      }
+    }) || []
+  ).filter(a => a.acct.length)
+}
+
 export const removeAccount = async (account: string) => {
   const currAccounts: NonNullable<StorageGlobal['accounts']> = JSON.parse(
     storage.global.getString('accounts') || '[]'