Refine account switching

src/components/AccountButton.tsx

@@ -1,9 +1,13 @@
 import { useNavigation } from '@react-navigation/native'
 import { ReadableAccountType, setAccount } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import Button from './Button'
+import { Pressable } from 'react-native'
+import GracefullyImage from './GracefullyImage'
 import haptics from './haptics'
+import Icon from './Icon'
+import CustomText from './Text'
 
 interface Props {
   account: ReadableAccountType
@@ -11,26 +15,56 @@ interface Props {
 }
 
 const AccountButton: React.FC<Props> = ({ account, additionalActions }) => {
+  const { colors } = useTheme()
   const navigation = useNavigation()
 
   return (
-    <Button
-      type='text'
-      selected={account.active}
+    <Pressable
       style={{
-        marginBottom: StyleConstants.Spacing.M,
-        marginRight: StyleConstants.Spacing.M
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: StyleConstants.Spacing.S,
+        paddingHorizontal: StyleConstants.Spacing.S * 1.5,
+        borderColor: account.active ? colors.blue : colors.border,
+        borderWidth: 1,
+        borderRadius: 99,
+        marginBottom: StyleConstants.Spacing.S
       }}
-      content={account.acct}
-      onPress={() => {
+      onPress={async () => {
+        await setAccount(account.key)
         haptics('Light')
-        setAccount(account.key)
         navigation.goBack()
         if (additionalActions) {
           additionalActions()
         }
       }}
-    />
+    >
+      <GracefullyImage
+        uri={{ original: account.avatar_static }}
+        dimension={{
+          width: StyleConstants.Font.Size.L,
+          height: StyleConstants.Font.Size.L
+        }}
+        style={{ borderRadius: StyleConstants.Font.Size.L / 2, overflow: 'hidden' }}
+      />
+      <CustomText
+        fontStyle='M'
+        fontWeight={account.active ? 'Bold' : 'Normal'}
+        style={{
+          color: account.active ? colors.blue : colors.primaryDefault,
+          marginLeft: StyleConstants.Spacing.S
+        }}
+        children={account.acct}
+      />
+      {account.active ? (
+        <Icon
+          name='check'
+          size={StyleConstants.Font.Size.L}
+          color={colors.blue}
+          style={{ marginLeft: StyleConstants.Spacing.S }}
+        />
+      ) : null}
+    </Pressable>
   )
 }
 

src/screens/AccountSelection.tsx

@@ -92,7 +92,7 @@ const ScreenAccountSelection = ({
   const { colors } = useTheme()
   const { t } = useTranslation('screenAccountSelection')
 
-  const accounts = getReadableAccounts(true)
+  const accounts = getReadableAccounts()
 
   return (
     <ScrollView
@@ -129,7 +129,7 @@ const ScreenAccountSelection = ({
             return (
               <AccountButton
                 key={index}
-                account={account}
+                account={{ ...account, active: false }}
                 additionalActions={() =>
                   navigationRef.navigate('Screen-Compose', {
                     type: 'share',

src/utils/storage/actions.ts

@@ -323,27 +323,30 @@ export const removeAccount = async (account: string, warning: boolean = true) =>
 }
 
 export type ReadableAccountType = {
+  avatar_static: string
   acct: string
   key: string
   active: boolean
 }
-export const getReadableAccounts = (withoutActive: boolean = false): ReadableAccountType[] => {
-  const accountActive = !withoutActive && getGlobalStorage.string('account.active')
-  const accounts = getGlobalStorage.object('accounts')?.sort((a, b) => a.localeCompare(b))
-  !withoutActive &&
-    accounts?.splice(
-      accounts.findIndex(a => a === accountActive),
-      1
-    )
-  !withoutActive && accounts?.unshift(accountActive || '')
+export const getReadableAccounts = (): ReadableAccountType[] => {
+  const accountActive = getGlobalStorage.string('account.active')
+  const accounts = getGlobalStorage.object('accounts')
+
   return (
     accounts?.map(account => {
       const details = getAccountDetails(
-        ['auth.account.acct', 'auth.account.domain', 'auth.domain', 'auth.account.id'],
+        [
+          'auth.account.avatar_static',
+          'auth.account.acct',
+          'auth.account.domain',
+          'auth.domain',
+          'auth.account.id'
+        ],
         account
       )
       if (details) {
         return {
+          avatar_static: details['auth.account.avatar_static'],
           acct: `@${details['auth.account.acct']}@${details['auth.account.domain']}`,
           key: generateAccountKey({
             domain: details['auth.domain'],
@@ -352,7 +355,7 @@ export const getReadableAccounts = (withoutActive: boolean = false): ReadableAcc
           active: account === accountActive
         }
       } else {
-        return { acct: '', key: '', active: false }
+        return { avatar_static: '', acct: '', key: '', active: false }
       }
     }) || []
   ).filter(a => a.acct.length)