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).

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;

src/components/SharedComponents/MentionTextInput.tsx

@@ -153,6 +153,7 @@ const MentionTextInput = ( {
                     countText=""
                     onPress={( ) => handleSelectUser( item )}
                     accessibilityLabel={t( "Select-user" )}
+                    iconVariant="mention"
                   />
                 </View>
               ) )}

src/components/UserList/UserList.tsx

@@ -62,7 +62,6 @@ const UserList = ( {
           }
         }}
         accessibilityLabel={accessibilityLabel}
-        iconVariant="medium"
       />
     );
   };

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">

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];
   }