Improve status mini card

src/components/Instance/index.tsx

@@ -146,7 +146,8 @@ const ComponentInstance: React.FC<Props> = ({
               borderBottomWidth: 1,
               ...StyleConstants.FontStyle.M,
               color: colors.primaryDefault,
-              borderBottomColor: instanceQuery.isError ? colors.red : colors.border
+              borderBottomColor: instanceQuery.isError ? colors.red : colors.border,
+              ...(Platform.OS === 'android' && { paddingRight: 0 })
             }}
             editable={false}
             defaultValue='https://'
@@ -158,7 +159,8 @@ const ComponentInstance: React.FC<Props> = ({
               ...StyleConstants.FontStyle.M,
               marginRight: StyleConstants.Spacing.M,
               color: colors.primaryDefault,
-              borderBottomColor: instanceQuery.isError ? colors.red : colors.border
+              borderBottomColor: instanceQuery.isError ? colors.red : colors.border,
+              ...(Platform.OS === 'android' && { paddingLeft: 0 })
             }}
             onChangeText={debounce(text => setDomain(text.replace(/^http(s)?\:\/\//i, '')), 1000, {
               trailing: true

src/components/Parse/Emojis.tsx

@@ -21,13 +21,7 @@ export interface Props {
 }
 
 const ParseEmojis = React.memo(
-  ({
+  ({ content, emojis, size = 'M', adaptiveSize = false, fontBold = false }: Props) => {
-    content,
-    emojis,
-    size = 'M',
-    adaptiveSize = false,
-    fontBold = false
-  }: Props) => {
     const { reduceMotionEnabled } = useAccessibility()
 
     const adaptiveFontsize = useSelector(getSettingsFontsize)
@@ -51,22 +45,13 @@ const ParseEmojis = React.memo(
         image: {
           width: adaptedFontsize,
           height: adaptedFontsize,
-          ...(Platform.OS === 'ios'
+          ...(Platform.OS === 'android' && { transform: [{ translateY: 2 }] })
-            ? {
-                transform: [{ translateY: -2 }]
-              }
-            : {
-                transform: [{ translateY: 1 }]
-              })
         }
       })
     }, [theme, adaptiveFontsize])
 
     return (
-      <CustomText
+      <CustomText style={styles.text} fontWeight={fontBold ? 'Bold' : undefined}>
-        style={styles.text}
-        fontWeight={fontBold ? 'Bold' : undefined}
-      >
         {emojis ? (
           content
             .split(regexEmoji)
@@ -78,11 +63,7 @@ const ParseEmojis = React.memo(
                   return emojiShortcode === `:${emoji.shortcode}:`
                 })
                 if (emojiIndex === -1) {
-                  return (
+                  return <CustomText key={emojiShortcode + i}>{emojiShortcode}</CustomText>
-                    <CustomText key={emojiShortcode + i}>
-                      {emojiShortcode}
-                    </CustomText>
-                  )
                 } else {
                   const uri = reduceMotionEnabled
                     ? emojis[emojiIndex].static_url

src/components/Parse/HTML.tsx

@@ -10,6 +10,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { isEqual } from 'lodash'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, View } from 'react-native'
@@ -133,13 +134,8 @@ const renderNode = ({
                 name='ExternalLink'
                 size={adaptedFontsize}
                 style={{
-                  ...(Platform.OS === 'ios'
+                  marginLeft: StyleConstants.Spacing.XS,
-                    ? {
+                  ...(Platform.OS === 'android' && { transform: [{ translateY: 2 }] })
-                        transform: [{ translateY: -2 }]
-                      }
-                    : {
-                        transform: [{ translateY: 1 }]
-                      })
                 }}
               />
             ) : null}
@@ -320,7 +316,7 @@ const ParseHTML = React.memo(
       />
     )
   },
-  (prev, next) => prev.content === next.content
+  (prev, next) => prev.content === next.content && isEqual(prev.emojis, next.emojis)
 )
 
 export default ParseHTML

src/components/Timeline/Default.tsx

@@ -70,9 +70,11 @@ const TimelineDefault: React.FC<Props> = ({
 
   const mainStyle: StyleProp<ViewStyle> = {
     flex: 1,
-    padding: StyleConstants.Spacing.Global.PagePadding,
+    padding: disableDetails
+      ? StyleConstants.Spacing.Global.PagePadding / 1.5
+      : StyleConstants.Spacing.Global.PagePadding,
     backgroundColor: colors.backgroundDefault,
-    paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding : 0
+    paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding / 1.5 : 0,
   }
   const main = () => (
     <>
@@ -82,7 +84,13 @@ const TimelineDefault: React.FC<Props> = ({
         <TimelineActioned action='pinned' />
       ) : null}
 
-      <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          ...(disableDetails && { alignItems: 'flex-start', overflow: 'hidden' })
+        }}
+      >
         <TimelineAvatar />
         <TimelineHeaderDefault />
       </View>
@@ -90,7 +98,11 @@ const TimelineDefault: React.FC<Props> = ({
       <View
         style={{
           paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
-          paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+          paddingLeft: highlighted
+            ? 0
+            : (disableDetails ? StyleConstants.Avatar.XS : StyleConstants.Avatar.M) +
+              StyleConstants.Spacing.S,
+          ...(disableDetails && { marginTop: -StyleConstants.Spacing.S })
         }}
       >
         <TimelineContent setSpoilerExpanded={setSpoilerExpanded} />

src/components/Timeline/Shared/Avatar.tsx

@@ -12,7 +12,7 @@ export interface Props {
 }
 
 const TimelineAvatar: React.FC<Props> = ({ account }) => {
-  const { status, highlighted, disableOnPress } = useContext(StatusContext)
+  const { status, highlighted, disableDetails, disableOnPress } = useContext(StatusContext)
   const actualAccount = account || status?.account
   if (!actualAccount) return null
 
@@ -33,10 +33,17 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
         !disableOnPress && navigation.push('Tab-Shared-Account', { account: actualAccount })
       }
       uri={{ original: actualAccount.avatar, static: actualAccount.avatar_static }}
-      dimension={{
+      dimension={
-        width: StyleConstants.Avatar.M,
+        disableDetails
-        height: StyleConstants.Avatar.M
+          ? {
-      }}
+              width: StyleConstants.Avatar.XS,
+              height: StyleConstants.Avatar.XS
+            }
+          : {
+              width: StyleConstants.Avatar.M,
+              height: StyleConstants.Avatar.M
+            }
+      }
       style={{
         borderRadius: StyleConstants.Avatar.M,
         overflow: 'hidden',

src/components/Timeline/Shared/Card.tsx

@@ -10,7 +10,7 @@ import { useStatusQuery } from '@utils/queryHooks/status'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useEffect, useState } from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Pressable, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import TimelineDefault from '../Default'
 import StatusContext from './Context'
@@ -187,7 +187,10 @@ const TimelineCard: React.FC = () => {
       style={{
         flex: 1,
         flexDirection: 'row',
-        minHeight: isAccount && foundAccount ? undefined : StyleConstants.Font.LineHeight.M * 5,
+        minHeight:
+          (isStatus && foundStatus) || (isAccount && foundAccount)
+            ? undefined
+            : StyleConstants.Font.LineHeight.M * 5,
         marginTop: StyleConstants.Spacing.M,
         borderWidth: StyleSheet.hairlineWidth,
         borderRadius: StyleConstants.Spacing.S,

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -42,14 +42,20 @@ const TimelineHeaderDefault: React.FC = () => {
 
   return (
     <View style={{ flex: 1, flexDirection: 'row' }}>
-      <View style={{ flex: 7 }}>
+      <View
+        style={{
+          flex: 7,
+          ...(disableDetails && { flexDirection: 'row' })
+        }}
+      >
         <HeaderSharedAccount account={status.account} />
         <View
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            marginTop: StyleConstants.Spacing.XS,
+            ...(disableDetails
-            marginBottom: StyleConstants.Spacing.S
+              ? { marginLeft: StyleConstants.Spacing.S }
+              : { marginTop: StyleConstants.Spacing.XS, marginBottom: StyleConstants.Spacing.S })
           }}
         >
           <HeaderSharedCreated

src/screens/Compose/Root/Footer/Reply.tsx

@@ -16,7 +16,6 @@ const ComposeReply: React.FC = () => {
       style={{
         flex: 1,
         flexDirection: 'row',
-        minHeight: StyleConstants.Font.LineHeight.M * 5,
         borderWidth: StyleSheet.hairlineWidth,
         borderRadius: StyleConstants.Spacing.S,
         overflow: 'hidden',

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

@@ -83,15 +83,6 @@ const TabMeListEdit: React.FC<TabMeStackScreenProps<'Tab-Me-List-Edit'>> = ({
   useEffect(() => {
     navigation.setOptions({
       title: params.type === 'add' ? t('me.stacks.listAdd.name') : t('me.stacks.listEdit.name'),
-      ...(Platform.OS === 'android' && {
-        headerCenter: () => (
-          <HeaderCenter
-            content={
-              params.type === 'add' ? t('me.stacks.listAdd.name') : t('me.stacks.listEdit.name')
-            }
-          />
-        )
-      }),
       headerLeft: () => (
         <HeaderLeft
           content='X'

src/screens/Tabs/Me/Profile.tsx

@@ -1,10 +1,7 @@
 import { HeaderCenter, HeaderLeft } from '@components/Header'
 import { Message } from '@components/Message'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import {
+import { TabMeProfileStackParamList, TabMeStackScreenProps } from '@utils/navigation/navigators'
-  TabMeProfileStackParamList,
-  TabMeStackScreenProps
-} from '@utils/navigation/navigators'
 import React, { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { KeyboardAvoidingView, Platform } from 'react-native'
@@ -16,9 +13,7 @@ import TabMeProfileRoot from './Profile/Root'
 
 const Stack = createNativeStackNavigator<TabMeProfileStackParamList>()
 
-const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({
+const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({ navigation }) => {
-  navigation
-}) => {
   const { t } = useTranslation('screenTabs')
   const messageRef = useRef<FlashMessage>(null)
 
@@ -32,82 +27,37 @@ const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({
           name='Tab-Me-Profile-Root'
           options={{
             title: t('me.stacks.profile.name'),
-            ...(Platform.OS === 'android' && {
-              headerCenter: () => (
-                <HeaderCenter content={t('me.stacks.profile.name')} />
-              )
-            }),
             headerLeft: () => (
-              <HeaderLeft
+              <HeaderLeft content='ChevronDown' onPress={() => navigation.goBack()} />
-                content='ChevronDown'
-                onPress={() => navigation.goBack()}
-              />
             )
           }}
         >
           {({ route, navigation }) => (
-            <TabMeProfileRoot
+            <TabMeProfileRoot messageRef={messageRef} route={route} navigation={navigation} />
-              messageRef={messageRef}
-              route={route}
-              navigation={navigation}
-            />
           )}
         </Stack.Screen>
         <Stack.Screen
           name='Tab-Me-Profile-Name'
-          options={{
+          options={{ title: t('me.stacks.profileName.name') }}
-            title: t('me.stacks.profileName.name'),
-            ...(Platform.OS === 'android' && {
-              headerCenter: () => (
-                <HeaderCenter content={t('me.stacks.profileName.name')} />
-              )
-            })
-          }}
         >
           {({ route, navigation }) => (
-            <TabMeProfileName
+            <TabMeProfileName messageRef={messageRef} route={route} navigation={navigation} />
-              messageRef={messageRef}
-              route={route}
-              navigation={navigation}
-            />
           )}
         </Stack.Screen>
         <Stack.Screen
           name='Tab-Me-Profile-Note'
-          options={{
+          options={{ title: t('me.stacks.profileNote.name') }}
-            title: t('me.stacks.profileNote.name'),
-            ...(Platform.OS === 'android' && {
-              headerCenter: () => (
-                <HeaderCenter content={t('me.stacks.profileNote.name')} />
-              )
-            })
-          }}
         >
           {({ route, navigation }) => (
-            <TabMeProfileNote
+            <TabMeProfileNote messageRef={messageRef} route={route} navigation={navigation} />
-              messageRef={messageRef}
-              route={route}
-              navigation={navigation}
-            />
           )}
         </Stack.Screen>
         <Stack.Screen
           name='Tab-Me-Profile-Fields'
-          options={{
+          options={{ title: t('me.stacks.profileFields.name') }}
-            title: t('me.stacks.profileFields.name'),
-            ...(Platform.OS === 'android' && {
-              headerCenter: () => (
-                <HeaderCenter content={t('me.stacks.profileFields.name')} />
-              )
-            })
-          }}
         >
           {({ route, navigation }) => (
-            <TabMeProfileFields
+            <TabMeProfileFields messageRef={messageRef} route={route} navigation={navigation} />
-              messageRef={messageRef}
-              route={route}
-              navigation={navigation}
-            />
           )}
         </Stack.Screen>
       </Stack.Navigator>

src/utils/styles/constants.ts

@@ -21,5 +21,5 @@ export const StyleConstants = {
     Global: { PagePadding: Base * 4 }
   },
 
-  Avatar: { S: 40, M: 48, L: 96 }
+  Avatar: { XS: 32, S: 40, M: 48, L: 96 }
 }