diff --git a/native/avatars/avatar.react.js b/native/avatars/avatar.react.js --- a/native/avatars/avatar.react.js +++ b/native/avatars/avatar.react.js @@ -6,7 +6,6 @@ import type { ResolvedClientAvatar } from 'lib/types/avatar-types.js'; import Multimedia from '../media/multimedia.react.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; type Props = { +avatarInfo: ResolvedClientAvatar, @@ -16,8 +15,6 @@ function Avatar(props: Props): React.Node { const { avatarInfo, size } = props; - const shouldRenderAvatars = useShouldRenderAvatars(); - const containerSizeStyle = React.useMemo(() => { if (size === 'micro') { return styles.micro; @@ -78,7 +75,7 @@ emojiSizeStyle, ]); - return shouldRenderAvatars ? avatar : null; + return avatar; } const styles = StyleSheet.create({ diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js --- a/native/chat/chat-thread-list-item.react.js +++ b/native/chat/chat-thread-list-item.react.js @@ -15,12 +15,10 @@ import SwipeableThread from './swipeable-thread.react.js'; import ThreadAvatar from '../avatars/thread-avatar.react.js'; import Button from '../components/button.react.js'; -import ColorSplotch from '../components/color-splotch.react.js'; import { SingleLine } from '../components/single-line.react.js'; import ThreadAncestorsLabel from '../components/thread-ancestors-label.react.js'; import UnreadDot from '../components/unread-dot.react.js'; import { useColors, useStyles } from '../themes/colors.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; type Props = { +data: ChatThreadItem, @@ -118,15 +116,6 @@ ]); const resolvedThreadInfo = useResolvedThreadInfo(data.threadInfo); - const shouldRenderAvatars = useShouldRenderAvatars(); - - const avatar = React.useMemo(() => { - if (!shouldRenderAvatars) { - return ; - } - - return ; - }, [data.threadInfo, shouldRenderAvatars]); return ( <> @@ -145,10 +134,12 @@ style={styles.container} > - + - {avatar} + + + @@ -182,7 +173,7 @@ justifyContent: 'space-between', alignItems: 'center', }, - colorSplotch: { + avatarContainer: { marginLeft: 6, marginBottom: 12, }, diff --git a/native/chat/composed-message-width.js b/native/chat/composed-message-width.js --- a/native/chat/composed-message-width.js +++ b/native/chat/composed-message-width.js @@ -2,7 +2,6 @@ import { avatarOffset } from './chat-constants.js'; import { useSelector } from '../redux/redux-utils.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; function useMessageListScreenWidth(): number { return useSelector(state => { @@ -14,13 +13,8 @@ // Keep sorta synced with styles.alignment/styles.messageBox in ComposedMessage function useComposedMessageMaxWidth(): number { const messageListScreenWidth = useMessageListScreenWidth(); - const shouldRenderAvatars = useShouldRenderAvatars(); - if (shouldRenderAvatars) { - return (messageListScreenWidth - 24 - avatarOffset) * 0.8; - } - - return (messageListScreenWidth - 24) * 0.8; + return (messageListScreenWidth - 24 - avatarOffset) * 0.8; } export { useMessageListScreenWidth, useComposedMessageMaxWidth }; diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js --- a/native/chat/composed-message.react.js +++ b/native/chat/composed-message.react.js @@ -33,7 +33,6 @@ import { type Colors, useColors } from '../themes/colors.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; import { type AnimatedStyleObj, AnimatedView } from '../types/styles.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; /* eslint-disable import/no-named-as-default-member */ const { Node } = Animated; @@ -59,7 +58,6 @@ // withInputState +inputState: ?InputState, +navigateToSidebar: () => mixed, - +shouldRenderAvatars: boolean, +editedMessageStyle: AnimatedStyleObj, }; class ComposedMessage extends React.PureComponent { @@ -78,7 +76,6 @@ navigateToSidebar, contentAndHeaderOpacity, deliveryIconOpacity, - shouldRenderAvatars, editedMessageStyle, ...viewProps } = this.props; @@ -138,13 +135,13 @@ : undefined; let avatar; - if (!isViewer && item.endsCluster && shouldRenderAvatars) { + if (!isViewer && item.endsCluster) { avatar = ( ); - } else if (!isViewer && shouldRenderAvatars) { + } else if (!isViewer) { avatar = ; } @@ -204,7 +201,6 @@ threadInfo={item.threadCreatedFromMessage} reactions={item.reactions} positioning={positioning} - shouldRenderAvatars={shouldRenderAvatars} label={label} /> ); @@ -302,7 +298,6 @@ const navigateToSidebar = useNavigateToSidebar(props.item); const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item); const deliveryIconOpacity = useDeliveryIconOpacity(props.item); - const shouldRenderAvatars = useShouldRenderAvatars(); const progress = useDerivedValue(() => { const isThisThread = inputState?.editState.editedMessage?.threadID === @@ -332,7 +327,6 @@ navigateToSidebar={navigateToSidebar} contentAndHeaderOpacity={contentAndHeaderOpacity} deliveryIconOpacity={deliveryIconOpacity} - shouldRenderAvatars={shouldRenderAvatars} editedMessageStyle={editedMessageStyle} /> ); diff --git a/native/chat/inline-engagement.react.js b/native/chat/inline-engagement.react.js --- a/native/chat/inline-engagement.react.js +++ b/native/chat/inline-engagement.react.js @@ -36,17 +36,9 @@ +disabled?: boolean, +positioning?: 'left' | 'right', +label?: ?string, - +shouldRenderAvatars?: boolean, }; function InlineEngagement(props: Props): React.Node { - const { - disabled = false, - reactions, - threadInfo, - positioning, - shouldRenderAvatars, - label, - } = props; + const { disabled = false, reactions, threadInfo, positioning, label } = props; const repliesText = useInlineEngagementText(threadInfo); const navigateToThread = useNavigateToThread(); @@ -158,9 +150,6 @@ } else { inlineEngagementPositionStyle.push(styles.rightInlineEngagement); } - if (shouldRenderAvatars) { - inlineEngagementPositionStyle.push({ marginLeft: avatarOffset }); - } let body; if (isLeft) { @@ -216,6 +205,7 @@ marginBottom: inlineEngagementStyle.marginBottom, marginTop: inlineEngagementStyle.marginTop, alignItems: 'center', + marginLeft: avatarOffset, }, icon: { color: 'inlineEngagementLabel', diff --git a/native/chat/message-header.react.js b/native/chat/message-header.react.js --- a/native/chat/message-header.react.js +++ b/native/chat/message-header.react.js @@ -13,7 +13,6 @@ import { MessageListRouteName } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; type Props = { +item: ChatMessageInfoItemWithHeight, @@ -31,8 +30,6 @@ const shouldShowUsername = !isViewer && (modalDisplay || item.startsCluster); const stringForUser = useStringForUser(shouldShowUsername ? creator : null); - const shouldRenderAvatars = useShouldRenderAvatars(); - let authorName = null; if (stringForUser) { const style = [styles.authorName]; @@ -40,12 +37,6 @@ style.push(styles.modal); } - if (shouldRenderAvatars) { - style.push({ marginLeft: 12 + avatarOffset }); - } else { - style.push({ marginLeft: 12 }); - } - authorName = {stringForUser}; } @@ -95,6 +86,7 @@ marginRight: 7, paddingHorizontal: 12, paddingVertical: 4, + marginLeft: 12 + avatarOffset, }, modal: { // high contrast framed against OverlayNavigator-dimmed background diff --git a/native/chat/message-list-header-title.react.js b/native/chat/message-list-header-title.react.js --- a/native/chat/message-list-header-title.react.js +++ b/native/chat/message-list-header-title.react.js @@ -16,7 +16,6 @@ import Button from '../components/button.react.js'; import { ThreadSettingsRouteName } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; type BaseProps = { +threadInfo: ThreadInfo, @@ -29,7 +28,6 @@ ...BaseProps, +styles: typeof unboundStyles, +title: string, - +shouldRenderAvatars: boolean, }; class MessageListHeaderTitle extends React.PureComponent { render() { @@ -40,12 +38,11 @@ areSettingsEnabled, styles, title, - shouldRenderAvatars, ...rest } = this.props; let avatar; - if (!isSearchEmpty && shouldRenderAvatars) { + if (!isSearchEmpty) { avatar = ( @@ -98,22 +95,13 @@ ) { const styles = useStyles(unboundStyles); - const shouldRenderAvatars = useShouldRenderAvatars(); - const { uiName } = useResolvedThreadInfo(props.threadInfo); const { isSearchEmpty } = props; const title = isSearchEmpty ? 'New Message' : uiName; - return ( - - ); + return ; }); export default ConnectedMessageListHeaderTitle; diff --git a/native/chat/message-reactions-modal.react.js b/native/chat/message-reactions-modal.react.js --- a/native/chat/message-reactions-modal.react.js +++ b/native/chat/message-reactions-modal.react.js @@ -14,7 +14,6 @@ import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; import { useColors, useStyles } from '../themes/colors.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; export type MessageReactionsModalParams = { +reactions: ReactionInfo, @@ -38,28 +37,17 @@ const reactionsListData = useMessageReactionsList(reactions); - const shouldRenderAvatars = useShouldRenderAvatars(); - const marginLeftStyle = React.useMemo( - () => ({ - marginLeft: shouldRenderAvatars ? 8 : 0, - }), - [shouldRenderAvatars], - ); - const renderItem = React.useCallback( ({ item }) => ( - - {item.username} - + {item.username} {item.reaction} ), [ - marginLeftStyle, styles.reactionsListReactionText, styles.reactionsListRowContainer, styles.reactionsListUserInfoContainer, @@ -141,6 +129,7 @@ reactionsListUsernameText: { color: 'modalForegroundLabel', fontSize: 18, + marginLeft: 8, }, reactionsListReactionText: { fontSize: 18, diff --git a/native/chat/message-tooltip-button-avatar.react.js b/native/chat/message-tooltip-button-avatar.react.js --- a/native/chat/message-tooltip-button-avatar.react.js +++ b/native/chat/message-tooltip-button-avatar.react.js @@ -6,7 +6,6 @@ import { avatarOffset } from './chat-constants.js'; import UserAvatar from '../avatars/user-avatar.react.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; type Props = { +item: ChatMessageInfoItemWithHeight, @@ -15,9 +14,7 @@ function MessageTooltipButtonAvatar(props: Props): React.Node { const { item } = props; - const shouldRenderAvatars = useShouldRenderAvatars(); - - if (item.messageInfo.creator.isViewer || !shouldRenderAvatars) { + if (item.messageInfo.creator.isViewer) { return null; } return ( diff --git a/native/chat/settings/thread-settings-child-thread.react.js b/native/chat/settings/thread-settings-child-thread.react.js --- a/native/chat/settings/thread-settings-child-thread.react.js +++ b/native/chat/settings/thread-settings-child-thread.react.js @@ -10,7 +10,6 @@ import ThreadIcon from '../../components/thread-icon.react.js'; import ThreadPill from '../../components/thread-pill.react.js'; import { useColors, useStyles } from '../../themes/colors.js'; -import { useShouldRenderAvatars } from '../../utils/avatar-utils.js'; import { useNavigateToThread } from '../message-list-types.js'; type Props = { @@ -29,26 +28,15 @@ const styles = useStyles(unboundStyles); const colors = useColors(); - const shouldRenderAvatars = useShouldRenderAvatars(); - - const avatar = React.useMemo(() => { - if (!shouldRenderAvatars) { - return null; - } - return ( - - - - ); - }, [shouldRenderAvatars, styles.avatarContainer, threadInfo]); - const firstItem = props.firstListItem ? null : styles.topBorder; const lastItem = props.lastListItem ? styles.lastButton : null; return ( ); diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js --- a/native/chat/settings/thread-settings.react.js +++ b/native/chat/settings/thread-settings.react.js @@ -95,7 +95,6 @@ } from '../../themes/colors.js'; import type { VerticalBounds } from '../../types/layout-types.js'; import type { ViewStyle } from '../../types/styles.js'; -import { useShouldRenderAvatars } from '../../utils/avatar-utils.js'; import type { ChatNavigationProp } from '../chat.react.js'; const itemPageLength = 5; @@ -254,7 +253,6 @@ // withKeyboardState +keyboardState: ?KeyboardState, +canPromoteSidebar: boolean, - +shouldRenderAvatars: boolean, }; type State = { +numMembersShowing: number, @@ -356,25 +354,23 @@ const canChangeColor = canEditThreadColor && canStartEditing; const listData: ChatSettingsItem[] = []; - if (this.props.shouldRenderAvatars) { - listData.push({ - itemType: 'header', - key: 'avatarHeader', - title: 'Channel Avatar', - categoryType: 'unpadded', - }); - listData.push({ - itemType: 'avatar', - key: 'avatar', - threadInfo, - canChangeSettings: canChangeAvatar, - }); - listData.push({ - itemType: 'footer', - key: 'avatarFooter', - categoryType: 'outline', - }); - } + listData.push({ + itemType: 'header', + key: 'avatarHeader', + title: 'Channel Avatar', + categoryType: 'unpadded', + }); + listData.push({ + itemType: 'avatar', + key: 'avatar', + threadInfo, + canChangeSettings: canChangeAvatar, + }); + listData.push({ + itemType: 'footer', + key: 'avatarFooter', + categoryType: 'outline', + }); listData.push({ itemType: 'header', @@ -1241,7 +1237,6 @@ const overlayContext = React.useContext(OverlayContext); const keyboardState = React.useContext(KeyboardContext); const { canPromoteSidebar } = usePromoteSidebar(threadInfo); - const shouldRenderAvatars = useShouldRenderAvatars(); return ( ); }); diff --git a/native/chat/typeahead-tooltip.react.js b/native/chat/typeahead-tooltip.react.js --- a/native/chat/typeahead-tooltip.react.js +++ b/native/chat/typeahead-tooltip.react.js @@ -14,7 +14,6 @@ import UserAvatar from '../avatars/user-avatar.react.js'; import Button from '../components/button.react.js'; import { useStyles } from '../themes/colors.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; export type TypeaheadTooltipProps = { +text: string, @@ -31,19 +30,10 @@ focusAndUpdateTextAndSelection, } = props; - const shouldRenderAvatars = useShouldRenderAvatars(); - const { textBeforeAtSymbol, usernamePrefix } = matchedStrings; const styles = useStyles(unboundStyles); - const marginLeftStyle = React.useMemo( - () => ({ - marginLeft: shouldRenderAvatars ? 8 : 0, - }), - [shouldRenderAvatars], - ); - const renderTypeaheadButton = React.useCallback( ({ item }: { item: RelativeMemberInfo, ... }) => { const onPress = () => { @@ -63,7 +53,7 @@ return ( @@ -72,7 +62,6 @@ [ styles.button, styles.buttonLabel, - marginLeftStyle, textBeforeAtSymbol, text, usernamePrefix, @@ -156,6 +145,7 @@ color: 'white', fontSize: 16, fontWeight: '400', + marginLeft: 8, }, }; diff --git a/native/components/thread-list-thread.react.js b/native/components/thread-list-thread.react.js --- a/native/components/thread-list-thread.react.js +++ b/native/components/thread-list-thread.react.js @@ -6,12 +6,10 @@ import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; import Button from './button.react.js'; -import ColorSplotch from './color-splotch.react.js'; import { SingleLine } from './single-line.react.js'; import ThreadAvatar from '../avatars/thread-avatar.react.js'; import { type Colors, useStyles, useColors } from '../themes/colors.js'; import type { ViewStyle, TextStyle } from '../types/styles.js'; -import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; type SharedProps = { +onSelect: (threadID: string) => void, @@ -25,7 +23,6 @@ type Props = { ...SharedProps, +threadInfo: ResolvedThreadInfo, - +shouldRenderAvatars: boolean, +colors: Colors, +styles: typeof unboundStyles, }; @@ -33,13 +30,6 @@ render() { const { modalIosHighlightUnderlay: underlayColor } = this.props.colors; - let avatar; - if (this.props.shouldRenderAvatars) { - avatar = ; - } else { - avatar = ; - } - return (