From d2ae2cd6bf5796510017ba9a9074e2a58cec8bc5 Mon Sep 17 00:00:00 2001
From: Johannes Klein <johannes.t.klein@gmail.com>
Date: Fri, 27 Mar 2026 21:45:36 +0100
Subject: [PATCH] Mob 1254 use smaller user photos when displaying them in the
 app (#3458)

* Add helper methods to get other sizes of user photos

* InlineUserBase has either 32 or 22px size so thumb should be enough

* Those sizes were not returned by the API

* Make medium default for UserListItem

As it was before

* Remove large size; is never used

* Only request small photo for small UserListItem

Autocomplete mentions for example.

* Did not end up using this

* Restore mention autocomplete size of 40

This puts the mention autocomplete icon size back to 40 but also keeps the default size of medium for all other places we use a UserListItem (e.g. in Explore Filters).
---
 .../SharedComponents/InlineUser/InlineUserBase.tsx |  2 +-
 .../SharedComponents/MentionTextInput.tsx          |  1 +
 src/components/UserList/UserList.tsx               |  1 -
 src/components/UserList/UserListItem.tsx           | 14 ++++----------
 src/realmModels/User.ts                            |  4 ++++
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/SharedComponents/InlineUser/InlineUserBase.tsx b/src/components/SharedComponents/InlineUser/InlineUserBase.tsx
index ad0b00459..a57de6afe 100644
--- a/src/components/SharedComponents/InlineUser/InlineUserBase.tsx
+++ b/src/components/SharedComponents/InlineUser/InlineUserBase.tsx
@@ -33,7 +33,7 @@ const InlineUserBase = ( {
   useBigIcon = false,
 }: Props ) => {
   const navigation = useNavigation();
-  const userImgUri = User.uri( user );
+  const userImgUri = User.thumbUri( user );
   const userHandle = user?.login;
   const currentUser = useCurrentUser();
   const isCurrentUser = user?.id === currentUser?.id;
diff --git a/src/components/SharedComponents/MentionTextInput.tsx b/src/components/SharedComponents/MentionTextInput.tsx
index 398ccb8fe..3252d531c 100644
--- a/src/components/SharedComponents/MentionTextInput.tsx
+++ b/src/components/SharedComponents/MentionTextInput.tsx
@@ -153,6 +153,7 @@ const MentionTextInput = ( {
                     countText=""
                     onPress={( ) => handleSelectUser( item )}
                     accessibilityLabel={t( "Select-user" )}
+                    iconVariant="mention"
                   />
                 </View>
               ) )}
diff --git a/src/components/UserList/UserList.tsx b/src/components/UserList/UserList.tsx
index 5a52fd950..26f87c245 100644
--- a/src/components/UserList/UserList.tsx
+++ b/src/components/UserList/UserList.tsx
@@ -62,7 +62,6 @@ const UserList = ( {
           }
         }}
         accessibilityLabel={accessibilityLabel}
-        iconVariant="medium"
       />
     );
   };
diff --git a/src/components/UserList/UserListItem.tsx b/src/components/UserList/UserListItem.tsx
index e217d7fa4..7b8a2ef07 100644
--- a/src/components/UserList/UserListItem.tsx
+++ b/src/components/UserList/UserListItem.tsx
@@ -9,7 +9,7 @@ import React from "react";
 import User from "realmModels/User";
 import { useTranslation } from "sharedHooks";
 
-type IconVariant = "small" | "medium" | "large";
+type IconVariant = "mention" | "medium";
 
 interface Props {
   item: object;
@@ -21,9 +21,8 @@ interface Props {
 }
 
 const ICON_VARIANT_SIZE: Record<IconVariant, number> = {
-  small: 22,
+  mention: 40,
   medium: 62,
-  large: 134,
 };
 
 const UserListItem = ( {
@@ -32,13 +31,10 @@ const UserListItem = ( {
   onPress,
   accessibilityLabel: accessibilityLabelProp,
   pressable = true,
-  iconVariant,
+  iconVariant = "medium",
 }: Props ) => {
   const { t } = useTranslation( );
   const user = item?.user;
-  const fallbackIconSize = iconVariant
-    ? ICON_VARIANT_SIZE[iconVariant]
-    : 40;
 
   const UserListItemContainer = pressable
     ? ( { children } ) => (
@@ -70,15 +66,13 @@ const UserListItem = ( {
           ? (
             <UserIcon
               uri={User.uri( user )}
-              small={iconVariant === "small"}
               medium={iconVariant === "medium"}
-              large={iconVariant === "large"}
             />
           )
           : (
             <INatIcon
               name="person"
-              size={fallbackIconSize}
+              size={ICON_VARIANT_SIZE[iconVariant]}
             />
           )}
         <View className="ml-3 shrink">
diff --git a/src/realmModels/User.ts b/src/realmModels/User.ts
index 8f61f31cc..de9f93c2d 100644
--- a/src/realmModels/User.ts
+++ b/src/realmModels/User.ts
@@ -35,6 +35,10 @@ class User extends Realm.Object {
     return iconUrl?.replace( "staticdev", "static" );
   }
 
+  static thumbUri( user?: RealmUser | ApiUser ) {
+    return User.uri( user )?.replace( "medium", "thumb" );
+  }
+
   static currentUser( realm: Realm ) {
     return realm.objects( "User" ).filtered( "signedIn == true" )[0];
   }