From 4f9e9e7a14fa16c669ab12b80df68ddb865c7cd6 Mon Sep 17 00:00:00 2001
From: xmflsct <me@xmflsct.com>
Date: Tue, 16 May 2023 22:12:25 +0200
Subject: [PATCH] Show avatar in actioned statement

---
 src/components/Timeline/Shared/Actioned.tsx | 35 ++++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/Timeline/Shared/Actioned.tsx b/src/components/Timeline/Shared/Actioned.tsx
index efe54d1a..a0fb206e 100644
--- a/src/components/Timeline/Shared/Actioned.tsx
+++ b/src/components/Timeline/Shared/Actioned.tsx
@@ -10,6 +10,7 @@ import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, StyleSheet, View } from 'react-native'
 import StatusContext from './Context'
+import GracefullyImage from '@components/GracefullyImage'
 
 export interface Props {
   action: Mastodon.Notification['type'] | 'reblog' | 'pinned'
@@ -39,6 +40,25 @@ const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest })
   )
 
   const onPress = () => navigation.push('Tab-Shared-Account', { account })
+  const miniAvatar = (
+    <GracefullyImage
+      sources={{
+        default: { uri: account.avatar },
+        static: { uri: account.avatar_static }
+      }}
+      dimension={{
+        width: StyleConstants.Avatar.XS / 1.5,
+        height: StyleConstants.Avatar.XS / 1.5
+      }}
+      style={{
+        borderRadius: 99,
+        overflow: 'hidden',
+        marginRight: StyleConstants.Spacing.S
+      }}
+      dim
+      withoutTransition
+    />
+  )
 
   const children = () => {
     switch (action) {
@@ -63,7 +83,8 @@ const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest })
               color={iconColor}
               style={styles.icon}
             />
-            <Pressable onPress={onPress}>
+            <Pressable onPress={onPress} style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {miniAvatar}
               {content(t('shared.actioned.favourite', { name }))}
             </Pressable>
           </>
@@ -77,7 +98,8 @@ const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest })
               color={iconColor}
               style={styles.icon}
             />
-            <Pressable onPress={onPress}>
+            <Pressable onPress={onPress} style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {miniAvatar}
               {content(t('shared.actioned.follow', { name }))}
             </Pressable>
           </>
@@ -91,7 +113,8 @@ const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest })
               color={iconColor}
               style={styles.icon}
             />
-            <Pressable onPress={onPress}>
+            <Pressable onPress={onPress} style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {miniAvatar}
               {content(t('shared.actioned.follow_request', { name }))}
             </Pressable>
           </>
@@ -118,7 +141,8 @@ const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest })
               color={iconColor}
               style={styles.icon}
             />
-            <Pressable onPress={onPress}>
+            <Pressable onPress={onPress} style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {!myself ? miniAvatar : null}
               {content(
                 isNotification
                   ? t('shared.actioned.reblog.notification', { name })
@@ -138,7 +162,8 @@ const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest })
               color={iconColor}
               style={styles.icon}
             />
-            <Pressable onPress={onPress}>
+            <Pressable onPress={onPress} style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {miniAvatar}
               {content(t('shared.actioned.status', { name }))}
             </Pressable>
           </>