Merge branch 'main' into candidate

2023-01-08 18:12:34 +01:00 · 2023-01-08 18:12:34 +01:00 · c4e94c6f5a
parent a60fb546d8 43c0447418
commit c4e94c6f5a
56 changed files with 822 additions and 286 deletions
--- a/fastlane/metadata/en-US/release_notes.txt
+++ b/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
--- a/fastlane/metadata/zh-Hans/release_notes.txt
+++ b/fastlane/metadata/zh-Hans/release_notes.txt
@ -1,6 +1,7 @@
 toooting愉快！此版本包括以下改进和修复：
 - 主动获取对话的远程内容
 - 自动加载上次我的关注的阅读位置
+- 用其它已登陆的账户关注用户
 - 可添加举报细节
 - 新增暂停自动播放gif动画选项
 - 隐藏用户的转嘟
--- a/src/components/AccountButton.tsx
+++ b/src/components/AccountButton.tsx
@ -1,44 +1,30 @@
 import { useNavigation } from '@react-navigation/native'
-import { generateAccountKey, getAccountDetails, setAccount } from '@utils/storage/actions'
-import { StorageGlobal } from '@utils/storage/global'
+import { ReadableAccountType, setAccount } from '@utils/storage/actions'
 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]
-  selected?: boolean
+  account: ReadableAccountType
  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']}${
-        selected ? ' ✓' : ''
-      }`}
+      content={account.acct}
      onPress={() => {
        haptics('Light')
-        setAccount(
-          generateAccountKey({
-            domain: accountDetails['auth.domain'],
-            id: accountDetails['auth.account.id']
-          })
-        )
+        setAccount(account.key)
        navigation.goBack()
        if (additionalActions) {
          additionalActions()
--- a/src/components/Button.tsx
+++ b/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],
--- a/src/components/Instance/index.tsx
+++ b/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()
      }
--- a/src/components/Message.tsx
+++ b/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 }}
    />
  )
 })
--- a/src/components/Timeline/Default.tsx
+++ b/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 => (
-                        <ContextMenu.Item key={menu.key} {...menu.item}>
-                          <ContextMenu.ItemTitle children={menu.title} />
-                          <ContextMenu.ItemIcon ios={{ name: menu.icon }} />
+                      {group.map(item => {
+                        switch (item.type) {
+                          case 'item':
+                            return (
+                              <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>
--- a/src/components/Timeline/Notifications.tsx
+++ b/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 => (
-                    <ContextMenu.Item key={menu.key} {...menu.item}>
-                      <ContextMenu.ItemTitle children={menu.title} />
-                      <ContextMenu.ItemIcon ios={{ name: menu.icon }} />
+                  {group.map(item => {
+                    switch (item.type) {
+                      case 'item':
+                        return (
+                          <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>
--- a/src/components/Timeline/Shared/Actions.tsx
+++ b/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(
--- a/src/components/Timeline/Shared/HeaderAndroid.tsx
+++ b/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 } =
-    useContext(StatusContext)
+  const { queryKey, status, disableDetails, disableOnPress, rawContent } = 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 => (
-                      <DropdownMenu.Item key={menu.key} {...menu.item}>
-                        <DropdownMenu.ItemTitle children={menu.title} />
-                        <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                    {group.map(item => {
+                      switch (item.type) {
+                        case 'item':
+                          return (
+                            <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>
--- a/src/components/Timeline/Shared/HeaderDefault.tsx
+++ b/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 } =
-    useContext(StatusContext)
+  const { queryKey, status, disableDetails, rawContent, isRemote } = 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 => (
-                        <DropdownMenu.Item key={menu.key} {...menu.item}>
-                          <DropdownMenu.ItemTitle children={menu.title} />
-                          <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                      {group.map(item => {
+                        switch (item.type) {
+                          case 'item':
+                            return (
+                              <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>
--- a/src/components/Timeline/Shared/HeaderNotification.tsx
+++ b/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 => (
-                              <DropdownMenu.Item key={menu.key} {...menu.item}>
-                                <DropdownMenu.ItemTitle children={menu.title} />
-                                <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                            {group.map(item => {
+                              switch (item.type) {
+                                case 'item':
+                                  return (
+                                    <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>
--- a/src/components/contextMenu/account.ts
+++ b/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,10 +221,89 @@ 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([
+      {
+        type: 'sub',
+        key: 'account-block-report',
+        trigger: {
+          key: 'account-block-report',
+          props: { destructive: true, disabled: false, hidden: false },
+          title: t('componentContextMenu:account.blockReport'),
+          icon: 'hand.raised'
+        },
+        items: [
          {
            key: 'account-block',
-        item: {
+            props: {
              onSelect: () =>
                Alert.alert(
                  t('componentContextMenu:account.block.alert.title', {
@ -255,7 +339,7 @@ const menuAccount = ({
          },
          {
            key: 'account-reports',
-        item: {
+            props: {
              onSelect: () =>
                actualAccount &&
                navigation.navigate('Tab-Shared-Report', {
@ -269,6 +353,8 @@ const menuAccount = ({
            title: t('componentContextMenu:account.reports.action'),
            icon: 'flag'
          }
+        ]
+      }
    ])
  }

--- a/src/components/contextMenu/at.ts
+++ b/src/components/contextMenu/at.ts
@ -3,17 +3,17 @@ 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[][] = []
-
-  menus.push([
+  return [
+    [
      {
+        type: 'item',
        key: 'at-direct',
-      item: {
+        props: {
          onSelect: () =>
            navigation.navigate('Screen-Compose', {
              type: 'conversation',
@ -29,8 +29,9 @@ const menuAt = ({ account }: { account: Mastodon.Account }): ContextMenu[][] =>
        icon: 'envelope'
      },
      {
+        type: 'item',
        key: 'at-public',
-      item: {
+        props: {
          onSelect: () =>
            navigation.navigate('Screen-Compose', {
              type: 'conversation',
@ -45,9 +46,8 @@ const menuAt = ({ account }: { account: Mastodon.Account }): ContextMenu[][] =>
        title: t('at.public'),
        icon: 'at'
      }
-  ])
-
-  return menus
+    ]
+  ]
 }

 export default menuAt
--- a/src/components/contextMenu/index.d.ts
+++ b/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 }
-  title: string
-  icon: string
+  props: {
+    onSelect: () => void
+    disabled: boolean
+    destructive: boolean
+    hidden: boolean
+  }
+  title: 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'>[]
 }
--- a/src/components/contextMenu/instance.ts
+++ b/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 }),
--- a/src/components/contextMenu/share.ts
+++ b/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`) })
--- a/src/components/contextMenu/status.ts
+++ b/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({
--- a/src/i18n/ca/components/contextMenu.json
+++ b/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",
--- a/src/i18n/cs/components/contextMenu.json
+++ b/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": "",
--- a/src/i18n/de/components/contextMenu.json
+++ b/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",
--- a/src/i18n/el/components/contextMenu.json
+++ b/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": "Κατάργηση αποκλεισμού χρήστη",
--- a/src/i18n/en/components/contextMenu.json
+++ b/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",
--- a/src/i18n/es/components/contextMenu.json
+++ b/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",
--- a/src/i18n/fr/components/contextMenu.json
+++ b/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",
--- a/src/i18n/it/components/contextMenu.json
+++ b/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",
--- a/src/i18n/ja/components/contextMenu.json
+++ b/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": "ユーザーのブロックを解除",
--- a/src/i18n/ko/components/contextMenu.json
+++ b/src/i18n/ko/components/contextMenu.json
@ -6,26 +6,33 @@
      "action_false": "사용자 팔로우",
      "action_true": "사용자 팔로우 해제"
    },
-    "inLists": "",
+    "inLists": "사용자를 포함한 리스트",
    "showBoosts": {
-      "action_false": "",
-      "action_true": ""
+      "action_false": "사용자의 부스트 보이기",
+      "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}} 사용자를 차단하고 신고할까요?"
      }
    }
  },
--- a/src/i18n/ko/components/timeline.json
+++ b/src/i18n/ko/components/timeline.json
@ -15,8 +15,8 @@
    "message": "마지막 읽음"
  },
  "refresh": {
-    "fetchPreviousPage": "여기부터 더 새로운",
-    "refetch": "가장 최신으로"
+    "fetchPreviousPage": "이 시점에 이어서 불러오기",
+    "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": "툿이 개인 메시지에요"
--- a/src/i18n/ko/screens/compose.json
+++ b/src/i18n/ko/screens/compose.json
@ -152,7 +152,7 @@
      "content": {
        "altText": {
          "heading": "시각장애인을 위한 미디어 설명",
-          "placeholder": "미디어에 alt-text라고도 하는 설명을 추가하여 시각 장애가 있는 사람들을 포함하여 더 많은 사람들이 액세스할 수 있도록 할 수 있어요. \n\n좋은 설명은 간결하지만 미디어에 있는 내용을 정확하게 제시하여 컨텍스트를 파악할 수 있는 것이에요."
+          "placeholder": "미디어에 '대체 텍스트'라고도 하는 설명을 추가하여, 시각 장애가 있는 사람들을 포함해 더 많은 사람들이 접근하도록 할 수 있어요.\n\n좋은 설명은 간결하지만, 미디어의 내용을 정확하게 표현하여 문맥을 파악할 수 있는 것이에요."
        },
        "imageFocus": "포커스 원을 드래그하여 포커스 포인트를 업데이트할 수 있어요"
      }
--- a/src/i18n/ko/screens/tabs.json
+++ b/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": "",
-      "report": "",
+      "name": "@{{acct}} 신고",
+      "report": "신고",
      "forward": {
-        "heading": ""
+        "heading": "원격 인스턴스 {{instance}}에도 익명으로 전달"
      },
      "reasons": {
-        "heading": "",
-        "spam": "",
-        "other": "",
-        "violation": ""
+        "heading": "이 계정에 어떤 문제가 있나요?",
+        "spam": "스팸입니다",
+        "other": "다른 문제가 있습니다",
+        "violation": "서버 규칙을 위반합니다"
      },
      "comment": {
-        "heading": ""
+        "heading": "그 밖에 추가로 작성할 내용이 있나요?"
      },
      "violatedRules": {
-        "heading": ""
+        "heading": "서버 규칙 위반 내용"
      }
    },
    "search": {
@ -378,7 +378,7 @@
    "toot": {
      "name": "대화",
      "remoteFetch": {
-        "title": "",
+        "title": "원격 컨텐츠를 포함",
        "message": ""
      }
    },
--- a/src/i18n/nl/components/contextMenu.json
+++ b/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",
--- a/src/i18n/pl/components/contextMenu.json
+++ b/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",
--- a/src/i18n/pt_BR/components/contextMenu.json
+++ b/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",
--- a/src/i18n/ru/components/contextMenu.json
+++ b/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": "",
--- a/src/i18n/sv/components/contextMenu.json
+++ b/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",
--- a/src/i18n/uk/components/contextMenu.json
+++ b/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": "Розблокувати користувача",
--- a/src/i18n/vi/components/contextMenu.json
+++ b/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": "Bỏ chặn người dùng",
--- a/src/i18n/zh-Hans/components/contextMenu.json
+++ b/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": "取消屏蔽用户",
--- a/src/i18n/zh-Hant/components/contextMenu.json
+++ b/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": "解除封鎖使用者",
--- a/src/screens/AccountSelection.tsx
+++ b/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,11 +125,7 @@ const ScreenAccountSelection = ({
            marginTop: StyleConstants.Spacing.M
          }}
        >
-          {accounts &&
-            accounts
-              .slice()
-              .sort((a, b) => a.localeCompare(b))
-              .map((account, index) => {
+          {accounts.map((account, index) => {
            return (
              <AccountButton
                key={index}
--- a/src/screens/Tabs/Me/Switch.tsx
+++ b/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 accountActive = getGlobalStorage.string('account.active')
+  const accounts = getReadableAccounts()

  const scrollViewRef = useRef<ScrollView>(null)
  useEffect(() => {
@ -71,18 +70,8 @@ const TabMeSwitch: React.FC = () => {
              marginTop: StyleConstants.Spacing.M
            }}
          >
-            {accounts &&
-              accounts
-                .slice()
-                .sort((a, b) => a.localeCompare(b))
-                .map((account, index) => {
-                  return (
-                    <AccountButton
-                      key={index}
-                      account={account}
-                      selected={account === accountActive}
-                    />
-                  )
+            {accounts.map((account, index) => {
+              return <AccountButton key={index} account={account} />
            })}
          </View>
        </View>
--- a/src/screens/Tabs/Shared/Account/Context.tsx
+++ b/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)
--- a/src/screens/Tabs/Shared/Account/Information.tsx
+++ b/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 />
--- a/src/screens/Tabs/Shared/Account/Information/Account.tsx
+++ b/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) {
--- a/src/screens/Tabs/Shared/Account/Information/Actions.tsx
+++ b/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 => (
-                    <DropdownMenu.Item key={menu.key} {...menu.item}>
-                      <DropdownMenu.ItemTitle children={menu.title} />
-                      <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                  {group.map(item => {
+                    switch (item.type) {
+                      case 'item':
+                        return (
+                          <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>
--- a/src/screens/Tabs/Shared/Account/Information/PrivateNotes.tsx
+++ b/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
--- a/src/screens/Tabs/Shared/Account/index.tsx
+++ b/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 => (
-                        <DropdownMenu.Item key={menu.key} {...menu.item}>
-                          <DropdownMenu.ItemTitle children={menu.title} />
-                          <DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
+                      {group.map(item => {
+                        switch (item.type) {
+                          case 'item':
+                            return (
+                              <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 ? (
--- a/src/utils/api/general.ts
+++ b/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 : ''
  )

--- a/src/utils/api/helpers/index.ts
+++ b/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
        })
      }
--- a/src/utils/api/instance.ts
+++ b/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 : ''
  )

--- a/src/utils/api/tooot.ts
+++ b/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(' -> ') +
--- a/src/utils/push/useConnect.ts
+++ b/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()
--- a/src/utils/startup/log.ts
+++ b/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
      )
--- a/src/utils/startup/timezone.ts
+++ b/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) {
+    try {
      // @ts-ignore
-    Intl.DateTimeFormat.__setDefaultTimeZone(Localization.getCalendars()[0].timeZone)
+      Intl.DateTimeFormat.__setDefaultTimeZone(Intl.DateTimeFormat.__setDefaultTimeZone('xxx'))
+    } catch {}
  }
 }

--- a/src/utils/storage/actions.ts
+++ b/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') || '[]'