Fixed #554

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "javascript.inlayHints.functionLikeReturnTypes.enabled": false
-}

demo/statuses.ts

@@ -1,6 +1,7 @@
-const demoStatuses = [
+const demoStatus: Mastodon.Status[] = [
   {
     id: '1',
+    uri: 'https://example.com',
     created_at: new Date().toISOString(),
     sensitive: false,
     visibility: 'public',
@@ -13,7 +14,6 @@ const demoStatuses = [
     bookmarked: false,
     content:
       '<p>Would you like to try out this simple, beautiful and open-source mobile app for Mastodon? 😊</p>',
-    reblog: null,
     application: {
       name: 'tooot',
       website: 'https://tooot.app'
@@ -23,19 +23,31 @@ const demoStatuses = [
       username: 'tooot📱',
       acct: 'tooot@xmflsct.com',
       display_name: 'tooot📱',
-      avatar_static:
+      avatar: 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4',
-        'https://avatars.githubusercontent.com/u/77554750?s=200&v=4'
+      avatar_static: 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4',
+      url: '',
+      header: '',
+      header_static: '',
+      locked: false,
+      discoverable: false,
+      created_at: new Date().toISOString(),
+      last_status_at: new Date().toISOString(),
+      statuses_count: 1,
+      followers_count: 1,
+      following_count: 1,
+      fields: [],
+      bot: false
     },
     media_attachments: [],
     poll: {
       id: '1',
-      expires_at: new Date().setDate(new Date().getDate() + 5),
+      expires_at: new Date().setDate(new Date().getDate() + 5).toString(),
       expired: false,
       multiple: false,
       votes_count: 10,
-      voters_count: null,
+      voters_count: 2,
       voted: false,
-      own_votes: null,
+      own_votes: undefined,
       options: [
         {
           title: 'I would love to!',
@@ -48,11 +60,15 @@ const demoStatuses = [
       ],
       emojis: []
     },
-    mentions: []
+    mentions: [],
+    tags: [],
+    emojis: [],
+    pinned: false
   },
   {
     id: '2',
-    created_at: new Date().setMinutes(new Date().getMinutes() - 2),
+    uri: 'https://example.com',
+    created_at: new Date().setMinutes(new Date().getMinutes() - 2).toString(),
     sensitive: false,
     spoiler_text: '',
     visibility: 'public',
@@ -65,18 +81,26 @@ const demoStatuses = [
     bookmarked: false,
     content:
       '<p>Mastodon is a free and open-source self-hosted social networking service. It allows anyone to host their own server node in the network, and its various separately operated user bases are federated across many different servers. These nodes are referred to as "instances" by Mastodon users.</p>',
-    reblog: null,
+    application: { name: 'Web' },
-    application: {
-      name: 'Web',
-      website: null
-    },
     account: {
       id: '1000',
       username: 'Mastodon',
       acct: 'mastodon',
       display_name: 'Mastodon',
-      avatar_static:
+      avatar: 'https://mastodon.social/apple-touch-icon.png',
-        'https://mastodon.social/apple-touch-icon.png'
+      avatar_static: 'https://mastodon.social/apple-touch-icon.png',
+      url: '',
+      header: '',
+      header_static: '',
+      locked: false,
+      discoverable: false,
+      created_at: new Date().toISOString(),
+      last_status_at: new Date().toISOString(),
+      statuses_count: 1,
+      followers_count: 1,
+      following_count: 1,
+      fields: [],
+      bot: false
     },
     media_attachments: [],
     card: {
@@ -85,18 +109,31 @@ const demoStatuses = [
       description:
         'Mastodon is an open source decentralized social network - by the people for the people. Join the federation and take back control of your social media!',
       type: 'link',
-      image:
+      image: 'https://mastodon.social/apple-touch-icon.png',
-        'https://mastodon.social/apple-touch-icon.png'
+      author_name: '',
+      author_url: '',
+      provider_name: '',
+      provider_url: '',
+      html: '<p></p>',
+      width: 100,
+      height: 100,
+      embed_url: 'https://example.com',
+      blurhash: ''
     },
-    mentions: []
+    mentions: [],
+    tags: [],
+    emojis: [],
+    pinned: false
   },
   {
     id: '3',
-    created_at: '2021-01-24T09:50:00.901Z',
+    uri: '',
+    created_at: new Date().setHours(new Date().getHours() - 1).toString(),
+    sensitive: false,
     spoiler_text: '',
     visibility: 'public',
     replies_count: 2,
-    reblogs_count: null,
+    reblogs_count: 1,
     favourites_count: 3,
     favourited: false,
     reblogged: false,
@@ -104,24 +141,38 @@ const demoStatuses = [
     bookmarked: true,
     content:
       '<p>These servers are connected as a federated social network, allowing users from different servers to interact with each other seamlessly. Once a Mastodon server knows another Mastodon server, it "federates" with the other Mastodon server. Mastodon is a part of the wider Fediverse, allowing its users to also interact with users on different open platforms that support the same protocol, such as PeerTube and Friendica.</p>',
-    reblog: null,
+    application: { name: 'Web' },
-    application: {
-      name: 'Web',
-      website: null
-    },
     account: {
       id: '1001',
       username: 'Fediverse',
       acct: 'fediverse',
       display_name: 'Fediverse',
+      avatar:
+        'https://e7.pngegg.com/pngimages/667/514/png-clipart-mastodon-fediverse-social-media-free-software-logo-social-media-blue-text.png',
       avatar_static:
-        'https://e7.pngegg.com/pngimages/667/514/png-clipart-mastodon-fediverse-social-media-free-software-logo-social-media-blue-text.png'
+        'https://e7.pngegg.com/pngimages/667/514/png-clipart-mastodon-fediverse-social-media-free-software-logo-social-media-blue-text.png',
+      url: '',
+      header: '',
+      header_static: '',
+      locked: false,
+      discoverable: false,
+      created_at: new Date().toISOString(),
+      last_status_at: new Date().toISOString(),
+      statuses_count: 1,
+      followers_count: 1,
+      following_count: 1,
+      fields: [],
+      bot: false
     },
     media_attachments: [],
-    mentions: []
+    mentions: [],
+    tags: [],
+    emojis: [],
+    pinned: false
   },
   {
     id: '4',
+    uri: 'https://example.com',
     created_at: '2021-01-24T08:50:00.901Z',
     sensitive: false,
     visibility: 'public',
@@ -134,7 +185,6 @@ const demoStatuses = [
     bookmarked: false,
     content:
       '<p>tooot is an open source, simple mobile client for Mastodon. Focusing on your connections while being able to explore the Fediverse.</p>',
-    reblog: null,
     application: {
       name: 'tooot',
       website: 'https://tooot.app'
@@ -144,14 +194,30 @@ const demoStatuses = [
       username: 'tooot📱',
       acct: 'tooot@xmflsct.com',
       display_name: 'tooot📱',
-      avatar_static:
+      avatar: 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4',
-        'https://avatars.githubusercontent.com/u/77554750?s=200&v=4'
+      avatar_static: 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4',
+      url: '',
+      header: '',
+      header_static: '',
+      locked: false,
+      discoverable: false,
+      created_at: new Date().toISOString(),
+      last_status_at: new Date().toISOString(),
+      statuses_count: 1,
+      followers_count: 1,
+      following_count: 1,
+      fields: [],
+      bot: false
     },
     media_attachments: [],
-    mentions: []
+    mentions: [],
+    tags: [],
+    emojis: [],
+    pinned: false
   },
   {
     id: '5',
+    uri: 'https://example.com',
     created_at: '2021-01-24T07:50:00.901Z',
     sensitive: false,
     visibility: 'public',
@@ -164,7 +230,6 @@ const demoStatuses = [
     bookmarked: false,
     content:
       '<p>- tooot supports multiple accounts<br />- tooot supports browsing external instance<br />- tooot aims to support multiple languages</p>',
-    reblog: null,
     application: {
       name: 'tooot',
       website: 'https://tooot.app'
@@ -174,12 +239,27 @@ const demoStatuses = [
       username: 'tooot📱',
       acct: 'tooot@xmflsct.com',
       display_name: 'tooot📱',
-      avatar_static:
+      avatar: 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4',
-        'https://avatars.githubusercontent.com/u/77554750?s=200&v=4'
+      avatar_static: 'https://avatars.githubusercontent.com/u/77554750?s=200&v=4',
+      url: '',
+      header: '',
+      header_static: '',
+      locked: false,
+      discoverable: false,
+      created_at: new Date().toISOString(),
+      last_status_at: new Date().toISOString(),
+      statuses_count: 1,
+      followers_count: 1,
+      following_count: 1,
+      fields: [],
+      bot: false
     },
     media_attachments: [],
-    mentions: []
+    mentions: [],
+    tags: [],
+    emojis: [],
+    pinned: false
   }
 ]
 
-export default demoStatuses
+export default demoStatus

src/components/Menu/Row.tsx

@@ -86,9 +86,10 @@ const MenuRow: React.FC<Props> = ({
           >
             <View
               style={{
-                flex: 3,
+                flexGrow: 3,
                 flexDirection: 'row',
-                alignItems: 'center'
+                alignItems: 'center',
+                marginRight: StyleConstants.Spacing.M
               }}
             >
               {iconFront && (

src/i18n/en/components/instance.json

@@ -1,7 +1,7 @@
 {
   "server": {
     "textInput": {
-      "placeholder": "Instance' domain"
+      "placeholder": "Instance's domain"
     },
     "button": "Login",
     "information": {

src/i18n/en/screens/compose.json

@@ -1,13 +1,11 @@
 {
   "heading": {
     "left": {
-      "button": "Cancel",
       "alert": {
         "title": "Cancel editing?",
         "buttons": {
           "save": "Save draft",
-          "delete": "Delete draft",
+          "delete": "Delete draft"
-          "cancel": "Cancel"
         }
       }
     },

src/i18n/en/screens/tabs.json

@@ -4,7 +4,6 @@
       "name": "Following"
     },
     "public": {
-      "name": "",
       "segments": {
         "federated": "Federated",
         "local": "Local",
@@ -13,9 +12,6 @@
     },
     "notifications": {
       "name": "Notifications"
-    },
-    "me": {
-      "name": "About me"
     }
   },
   "common": {
@@ -348,7 +344,7 @@
       "notInLists": "Other lists"
     },
     "attachments": {
-      "name": "<0 /><1>\"s media</1>"
+      "name": "<0 /><1>'s media</1>"
     },
     "hashtag": {
       "follow": "Follow",

src/screens/Compose.tsx

@@ -206,7 +206,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
     () => (
       <HeaderLeft
         type='text'
-        content={t('heading.left.button')}
+        content={t('common:buttons.cancel')}
         onPress={() => {
           if (!composeState.dirty) {
             navigation.goBack()
@@ -229,7 +229,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
                 }
               },
               {
-                text: t('heading.left.alert.buttons.cancel'),
+                text: t('common:buttons.cancel'),
                 style: 'cancel'
               }
             ])
@@ -342,9 +342,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
   )
 
   const headerContent = useMemo(() => {
-    return `${totalTextCount} / ${maxTootChars}${
+    return `${totalTextCount} / ${maxTootChars}`
-      __DEV__ ? ` Dirty: ${composeState.dirty.toString()}` : ''
-    }`
   }, [totalTextCount, maxTootChars, composeState.dirty])
 
   const inputProps: EmojisState['inputProps'] = [

src/screens/Tabs/Me/List/menus.tsx

@@ -32,7 +32,7 @@ export const menuListDelete = ({
   key: 'list-delete',
   onSelect: () =>
     Alert.alert(
-      i18next.t('screenTabs:me.listDelete.confirm.title', { list: params.title.slice(0, 6) }),
+      i18next.t('screenTabs:me.listDelete.confirm.title', { list: params.title.slice(0, 20) }),
       i18next.t('screenTabs:me.listDelete.confirm.message'),
       [
         {

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

@@ -28,10 +28,7 @@ const AccountInformation = React.memo(
       <View style={styles.base}>
         <Placeholder
           Animation={props => (
-            <Fade
+            <Fade {...props} style={{ backgroundColor: colors.shimmerHighlight }} />
-              {...props}
-              style={{ backgroundColor: colors.shimmerHighlight }}
-            />
           )}
         >
           <View style={styles.avatarAndActions}>
@@ -41,7 +38,7 @@ const AccountInformation = React.memo(
 
           <AccountInformationName account={account} />
 
-          <AccountInformationAccount account={account} localInstance={myInfo} />
+          <AccountInformationAccount account={account} />
 
           <AccountInformationFields account={account} myInfo={myInfo} />
 

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

@@ -1,10 +1,7 @@
 import Icon from '@components/Icon'
 import CustomText from '@components/Text'
 import { useRelationshipQuery } from '@utils/queryHooks/relationship'
-import {
+import { getInstanceAccount, getInstanceUri } from '@utils/slices/instancesSlice'
-  getInstanceAccount,
-  getInstanceUri
-} from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
@@ -15,19 +12,12 @@ import { PlaceholderLine } from 'rn-placeholder'
 
 export interface Props {
   account: Mastodon.Account | undefined
-  localInstance: boolean
 }
 
-const AccountInformationAccount: React.FC<Props> = ({
+const AccountInformationAccount: React.FC<Props> = ({ account }) => {
-  account,
-  localInstance
-}) => {
   const { t } = useTranslation('screenTabs')
   const { colors } = useTheme()
-  const instanceAccount = useSelector(
+  const instanceAccount = useSelector(getInstanceAccount, (prev, next) => prev?.acct === next?.acct)
-    getInstanceAccount,
-    (prev, next) => prev?.acct === next?.acct
-  )
   const instanceUri = useSelector(getInstanceUri)
 
   const { data: relationship } = useRelationshipQuery({
@@ -35,6 +25,10 @@ const AccountInformationAccount: React.FC<Props> = ({
     options: { enabled: account !== undefined }
   })
 
+  const localInstance = instanceAccount.acct.includes('@')
+    ? instanceAccount.acct.includes(`@${instanceUri}`)
+    : true
+
   if (account || (localInstance && instanceAccount)) {
     return (
       <View
@@ -54,7 +48,7 @@ const AccountInformationAccount: React.FC<Props> = ({
           ) : null}
           <CustomText
             style={{
-              textDecorationLine: (account?.moved || account?.suspended) ? 'line-through' : undefined
+              textDecorationLine: account?.moved || account?.suspended ? 'line-through' : undefined
             }}
             selectable
           >
@@ -94,7 +88,4 @@ const AccountInformationAccount: React.FC<Props> = ({
   }
 }
 
-export default React.memo(
+export default AccountInformationAccount
-  AccountInformationAccount,
-  (_, next) => next.account === undefined
-)

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

@@ -5,7 +5,7 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 
 export interface Props {
   account: Mastodon.Account | undefined
@@ -13,24 +13,24 @@ export interface Props {
   edit?: boolean
 }
 
-const AccountInformationAvatar: React.FC<Props> = ({
+const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo, edit }) => {
-  account,
+  const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-  myInfo,
-  edit
-}) => {
-  const navigation =
-    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
   return (
     <Pressable
       disabled={!myInfo}
       onPress={() => {
         myInfo && account && navigation.push('Tab-Shared-Account', { account })
       }}
-      style={styles.base}
+      style={{
+        borderRadius: 8,
+        overflow: 'hidden',
+        width: StyleConstants.Avatar.L,
+        height: StyleConstants.Avatar.L
+      }}
     >
       <GracefullyImage
         key={account?.avatar}
-        style={styles.image}
+        style={{ flex: 1 }}
         uri={{ original: account?.avatar, static: account?.avatar_static }}
       />
       {edit ? (
@@ -51,14 +51,4 @@ const AccountInformationAvatar: React.FC<Props> = ({
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    borderRadius: 8,
-    overflow: 'hidden',
-    width: StyleConstants.Avatar.L,
-    height: StyleConstants.Avatar.L
-  },
-  image: { flex: 1 }
-})
-
 export default AccountInformationAvatar

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

@@ -12,59 +12,53 @@ export interface Props {
   hidden?: boolean
 }
 
-const AccountInformationCreated = React.memo(
+const AccountInformationCreated: React.FC<Props> = ({ account, hidden = false }) => {
-  ({ account, hidden = false }: Props) => {
+  if (hidden) {
-    if (hidden) {
+    return null
-      return null
+  }
-    }
 
-    const { i18n } = useTranslation()
+  const { i18n } = useTranslation()
-    const { colors } = useTheme()
+  const { colors } = useTheme()
-    const { t } = useTranslation('screenTabs')
+  const { t } = useTranslation('screenTabs')
 
-    if (account) {
+  if (account) {
-      return (
+    return (
-        <View
+      <View
-          style={{
+        style={{
-            flexDirection: 'row',
+          flexDirection: 'row',
-            alignItems: 'center',
+          alignItems: 'center',
-            borderRadius: 0,
+          borderRadius: 0,
-            marginBottom: StyleConstants.Spacing.M
+          marginBottom: StyleConstants.Spacing.M
-          }}
+        }}
-        >
+      >
-          <Icon
+        <Icon
-            name='Calendar'
+          name='Calendar'
-            size={StyleConstants.Font.Size.S}
+          size={StyleConstants.Font.Size.S}
-            color={colors.secondary}
+          color={colors.secondary}
-            style={{ marginRight: StyleConstants.Spacing.XS }}
+          style={{ marginRight: StyleConstants.Spacing.XS }}
-          />
-          <CustomText fontStyle='S' style={{ color: colors.secondary }}>
-            {t('shared.account.created_at', {
-              date: new Date(account.created_at || '').toLocaleDateString(
-                i18n.language,
-                {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric'
-                }
-              )
-            })}
-          </CustomText>
-        </View>
-      )
-    } else {
-      return (
-        <PlaceholderLine
-          width={StyleConstants.Font.Size.S * 4}
-          height={StyleConstants.Font.LineHeight.S}
-          color={colors.shimmerDefault}
-          noMargin
-          style={{ borderRadius: 0, marginBottom: StyleConstants.Spacing.M }}
         />
-      )
+        <CustomText fontStyle='S' style={{ color: colors.secondary }}>
-    }
+          {t('shared.account.created_at', {
-  },
+            date: new Date(account.created_at || '').toLocaleDateString(i18n.language, {
-  (_, next) => next.account === undefined
+              year: 'numeric',
-)
+              month: 'long',
+              day: 'numeric'
+            })
+          })}
+        </CustomText>
+      </View>
+    )
+  } else {
+    return (
+      <PlaceholderLine
+        width={StyleConstants.Font.Size.S * 4}
+        height={StyleConstants.Font.LineHeight.S}
+        color={colors.shimmerDefault}
+        noMargin
+        style={{ borderRadius: 0, marginBottom: StyleConstants.Spacing.M }}
+      />
+    )
+  }
+}
 
 export default AccountInformationCreated

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

@@ -10,53 +10,50 @@ export interface Props {
   myInfo?: boolean
 }
 
-const AccountInformationFields = React.memo(
+const AccountInformationFields: React.FC<Props> = ({ account, myInfo }) => {
-  ({ account, myInfo }: Props) => {
+  if (account?.suspended || myInfo || !account?.fields || account.fields.length === 0) {
-    if (account?.suspended || myInfo || !account?.fields || account.fields.length === 0) {
+    return null
-      return null
+  }
-    }
 
-    const { colors } = useTheme()
+  const { colors } = useTheme()
 
-    return (
+  return (
-      <View style={[styles.fields, { borderTopColor: colors.border }]}>
+    <View style={[styles.fields, { borderTopColor: colors.border }]}>
-        {account.fields.map((field, index) => (
+      {account.fields.map((field, index) => (
-          <View key={index} style={[styles.field, { borderBottomColor: colors.border }]}>
+        <View key={index} style={[styles.field, { borderBottomColor: colors.border }]}>
-            <View style={[styles.fieldLeft, { borderRightColor: colors.border }]}>
+          <View style={[styles.fieldLeft, { borderRightColor: colors.border }]}>
-              <ParseHTML
+            <ParseHTML
-                content={field.name}
+              content={field.name}
-                size={'S'}
+              size={'S'}
-                emojis={account.emojis}
+              emojis={account.emojis}
-                showFullLink
+              showFullLink
-                numberOfLines={5}
+              numberOfLines={5}
-                selectable
+              selectable
+            />
+            {field.verified_at ? (
+              <Icon
+                name='CheckCircle'
+                size={StyleConstants.Font.Size.M}
+                color={colors.primaryDefault}
+                style={styles.fieldCheck}
               />
-              {field.verified_at ? (
+            ) : null}
-                <Icon
-                  name='CheckCircle'
-                  size={StyleConstants.Font.Size.M}
-                  color={colors.primaryDefault}
-                  style={styles.fieldCheck}
-                />
-              ) : null}
-            </View>
-            <View style={styles.fieldRight}>
-              <ParseHTML
-                content={field.value}
-                size={'S'}
-                emojis={account.emojis}
-                showFullLink
-                numberOfLines={5}
-                selectable
-              />
-            </View>
           </View>
-        ))}
+          <View style={styles.fieldRight}>
-      </View>
+            <ParseHTML
-    )
+              content={field.value}
-  },
+              size={'S'}
-  (_, next) => next.account === undefined
+              emojis={account.emojis}
-)
+              showFullLink
+              numberOfLines={5}
+              selectable
+            />
+          </View>
+        </View>
+      ))}
+    </View>
+  )
+}
 
 const styles = StyleSheet.create({
   fields: {

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

@@ -66,4 +66,4 @@ const AccountInformationName: React.FC<Props> = ({ account }) => {
   )
 }
 
-export default React.memo(AccountInformationName, (_, next) => next.account === undefined)
+export default AccountInformationName

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

@@ -1,45 +1,35 @@
 import { ParseHTML } from '@components/Parse'
 import { StyleConstants } from '@utils/styles/constants'
-import React, { useState } from 'react'
+import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
 
 export interface Props {
   account: Mastodon.Account | undefined
   myInfo?: boolean
 }
 
-const AccountInformationNote = React.memo(
+const AccountInformationNote: React.FC<Props> = ({ account, myInfo }) => {
-  ({ account, myInfo }: Props) => {
+  if (
-    const [note, setNote] = useState(account?.source?.note)
+    account?.suspended ||
-    if (
+    myInfo ||
-      account?.suspended ||
+    !account?.note ||
-      myInfo ||
+    account.note.length === 0 ||
-      !account?.note ||
+    account.note === '<p></p>'
-      account.note.length === 0 ||
+  ) {
-      account.note === '<p></p>'
+    return null
-    ) {
-      return null
-    }
-
-    return (
-      <View style={styles.note}>
-        <ParseHTML
-          content={account.note!}
-          size={'M'}
-          emojis={account.emojis}
-          selectable
-          numberOfLines={999}
-        />
-      </View>
-    )
-  },
-  (_, next) => next.account === undefined
-)
-
-const styles = StyleSheet.create({
-  note: {
-    marginBottom: StyleConstants.Spacing.L
   }
-})
+
+  return (
+    <View style={{ marginBottom: StyleConstants.Spacing.L }}>
+      <ParseHTML
+        content={account.note!}
+        size={'M'}
+        emojis={account.emojis}
+        selectable
+        numberOfLines={999}
+      />
+    </View>
+  )
+}
 
 export default AccountInformationNote

src/screens/Tabs/Shared/AccountInLists.tsx

@@ -39,7 +39,7 @@ const TabSharedAccountInLists: React.FC<
     })
   }, [])
 
-  const listsQuery = useListsQuery({})
+  const listsQuery = useListsQuery()
   const accountInListsQuery = useAccountInListsQuery({ id: account.id })
 
   const sections = [
@@ -48,8 +48,10 @@ const TabSharedAccountInLists: React.FC<
       id: 'out',
       title: t('shared.accountInLists.notInLists'),
       data:
-        listsQuery.data?.filter(
+        listsQuery.data?.filter(({ id }) =>
-          ({ id }) => accountInListsQuery.data?.filter(d => d.id !== id).length
+          accountInListsQuery.data?.length
+            ? accountInListsQuery.data.filter(d => d.id !== id).length
+            : true
         ) || []
     }
   ]

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

@@ -54,7 +54,11 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
                 fontSize: StyleConstants.Font.Size.M,
                 flex: 1,
                 color: colors.primaryDefault,
-                paddingLeft: StyleConstants.Spacing.XS
+                marginLeft: StyleConstants.Spacing.XS,
+                paddingLeft: StyleConstants.Spacing.XS,
+                paddingVertical: StyleConstants.Spacing.XS,
+                borderBottomColor: colors.border,
+                borderBottomWidth: 1
               }}
               autoFocus
               onChangeText={debounce(