UserAvatarWithPresence: Don't ask caller to specify isMuted

Instead, grab that information from Redux inside this component.

This actually fixes a few spots where we were failing to show an
avatar as muted:
- The lightbox header, where it shows the message sender
- The ChatScreen header for a 1:1 PM
- The list of selected users in the user picker (UserPickerCard)

Author: chrisbobbe

src/common/UserAvatarWithPresence.js

@@ -8,6 +8,7 @@ import UserAvatar from './UserAvatar';
 import PresenceStatusIndicator from './PresenceStatusIndicator';
 import { tryGetUserForId } from '../users/userSelectors';
 import { useSelector } from '../react-redux';
+import { getMutedUsers } from '../directSelectors';
 
 const styles = createStyleSheet({
   status: {
@@ -21,7 +22,6 @@ type Props = $ReadOnly<{|
   userId: UserId,
   size: number,
   onPress?: () => void,
-  isMuted?: boolean,
 |}>;
 
 /**
@@ -32,9 +32,11 @@ type Props = $ReadOnly<{|
  * @prop [onPress]
  */
 export default function UserAvatarWithPresence(props: Props): Node {
-  const { userId, isMuted, size, onPress } = props;
+  const { userId, size, onPress } = props;
 
   const user = useSelector(state => tryGetUserForId(state, userId));
+  const isMuted = useSelector(getMutedUsers).has(userId);
+
   if (!user) {
     // This condition really does happen, because UserItem can be passed a fake
     // pseudo-user by PeopleAutocomplete, to represent `@all` or `@everyone`.

src/title/TitleGroup.js

@@ -5,7 +5,7 @@ import type { Node } from 'react';
 import { View } from 'react-native';
 
 import { useSelector } from '../react-redux';
-import { getMutedUsers, getOwnUserId } from '../selectors';
+import { getOwnUserId } from '../selectors';
 import { pmUiRecipientsFromKeyRecipients, type PmKeyRecipients } from '../utils/recipient';
 import styles, { createStyleSheet } from '../styles';
 import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
@@ -23,7 +23,6 @@ const componentStyles = createStyleSheet({
 
 export default function TitleGroup(props: Props): Node {
   const { recipients } = props;
-  const mutedUsers = useSelector(getMutedUsers);
   const ownUserId = useSelector(getOwnUserId);
   const userIds = pmUiRecipientsFromKeyRecipients(recipients, ownUserId);
   const navigation = useNavigation();
@@ -38,7 +37,6 @@ export default function TitleGroup(props: Props): Node {
             }}
             size={32}
             userId={userId}
-            isMuted={mutedUsers.has(userId)}
           />
         </View>
       ))}

src/users/UserItem.js

@@ -100,7 +100,6 @@ export function UserItemRaw<
           // At size medium, keep just big enough for a 48px touch target.
           size={size === 'large' ? 48 : 32}
           userId={user.user_id}
-          isMuted={isMuted}
           onPress={onPress && handlePress}
         />
         <View style={styles.textWrapper}>