diff options
Diffstat (limited to 'src/screens')
| -rw-r--r-- | src/screens/Messages/List/ChatListItem.tsx | 209 | ||||
| -rw-r--r-- | src/screens/Messages/List/index.tsx | 187 |
2 files changed, 212 insertions, 184 deletions
diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/List/ChatListItem.tsx new file mode 100644 index 000000000..13706472f --- /dev/null +++ b/src/screens/Messages/List/ChatListItem.tsx @@ -0,0 +1,209 @@ +import React from 'react' +import {View} from 'react-native' +import {ChatBskyConvoDefs} from '@atproto-labs/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' + +import {NavigationProp} from '#/lib/routes/types' +import {isNative} from '#/platform/detection' +import {useSession} from '#/state/session' +import {TimeElapsed} from '#/view/com/util/TimeElapsed' +import {UserAvatar} from '#/view/com/util/UserAvatar' +import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' +import {Button} from '#/components/Button' +import {ConvoMenu} from '#/components/dms/ConvoMenu' +import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2' +import {useMenuControl} from '#/components/Menu' +import {Text} from '#/components/Typography' + +export function ChatListItem({ + convo, + index, +}: { + convo: ChatBskyConvoDefs.ConvoView + index: number +}) { + const t = useTheme() + const {_} = useLingui() + const {currentAccount} = useSession() + const menuControl = useMenuControl() + const {gtMobile} = useBreakpoints() + + let lastMessage = _(msg`No messages yet`) + let lastMessageSentAt: string | null = null + if (ChatBskyConvoDefs.isMessageView(convo.lastMessage)) { + if (convo.lastMessage.sender?.did === currentAccount?.did) { + lastMessage = _(msg`You: ${convo.lastMessage.text}`) + } else { + lastMessage = convo.lastMessage.text + } + lastMessageSentAt = convo.lastMessage.sentAt + } + if (ChatBskyConvoDefs.isDeletedMessageView(convo.lastMessage)) { + lastMessage = _(msg`Message deleted`) + } + + const otherUser = convo.members.find( + member => member.did !== currentAccount?.did, + ) + + const navigation = useNavigation<NavigationProp>() + const [showActions, setShowActions] = React.useState(false) + + const onMouseEnter = React.useCallback(() => { + setShowActions(true) + }, []) + + const onMouseLeave = React.useCallback(() => { + setShowActions(false) + }, []) + + const onFocus = React.useCallback<React.FocusEventHandler>(e => { + if (e.nativeEvent.relatedTarget == null) return + setShowActions(true) + }, []) + + const onPress = React.useCallback(() => { + navigation.push('MessagesConversation', { + conversation: convo.id, + }) + }, [convo.id, navigation]) + + if (!otherUser) { + return null + } + + return ( + <View + // @ts-expect-error web only + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} + onFocus={onFocus} + onBlur={onMouseLeave}> + <Button + label={otherUser.displayName || otherUser.handle} + onPress={onPress} + style={a.flex_1} + onLongPress={isNative ? menuControl.open : undefined}> + {({hovered, pressed}) => ( + <View + style={[ + a.flex_row, + a.flex_1, + a.px_lg, + a.py_md, + a.gap_md, + (hovered || pressed) && t.atoms.bg_contrast_25, + index === 0 && [a.border_t, a.pt_lg], + t.atoms.border_contrast_low, + ]}> + <UserAvatar avatar={otherUser?.avatar} size={52} /> + <View style={[a.flex_1, a.flex_row, a.align_center]}> + <View style={[a.flex_1]}> + <View + style={[ + a.flex_1, + a.flex_row, + a.align_end, + a.pb_2xs, + web([{marginTop: -2}]), + ]}> + <Text + numberOfLines={1} + style={[{maxWidth: '85%'}, web([a.leading_normal])]}> + <Text style={[a.text_md, t.atoms.text, a.font_bold]}> + {otherUser.displayName || otherUser.handle} + </Text> + </Text> + {lastMessageSentAt && ( + <TimeElapsed timestamp={lastMessageSentAt}> + {({timeElapsed}) => ( + <Text + style={[ + a.text_sm, + web([a.leading_normal, {whiteSpace: 'pre'}]), + t.atoms.text_contrast_medium, + ]}> + {' '} + · {timeElapsed} + </Text> + )} + </TimeElapsed> + )} + {convo.muted && ( + <Text + style={[ + a.text_sm, + web([a.leading_normal, {whiteSpace: 'pre'}]), + t.atoms.text_contrast_medium, + ]}> + {' '} + ·{' '} + <BellStroke + size="xs" + style={t.atoms.text_contrast_medium} + /> + </Text> + )} + </View> + <Text + numberOfLines={1} + style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}> + @{otherUser.handle} + </Text> + <Text + numberOfLines={2} + style={[ + a.text_sm, + a.leading_snug, + convo.unreadCount > 0 + ? a.font_bold + : t.atoms.text_contrast_high, + convo.muted && t.atoms.text_contrast_medium, + ]}> + {lastMessage} + </Text> + </View> + {convo.unreadCount > 0 && ( + <View + style={[ + a.absolute, + a.rounded_full, + { + backgroundColor: convo.muted + ? t.palette.contrast_200 + : t.palette.primary_500, + height: 7, + width: 7, + }, + isNative + ? { + top: 15, + right: 12, + } + : { + top: 0, + right: 0, + }, + ]} + /> + )} + <ConvoMenu + convo={convo} + profile={otherUser} + control={menuControl} + currentScreen="list" + showMarkAsRead={convo.unreadCount > 0} + hideTrigger={isNative} + triggerOpacity={ + !gtMobile || showActions || menuControl.isOpen ? 1 : 0 + } + /> + </View> + </View> + )} + </Button> + </View> + ) +} diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx index b9ce8f251..05559b7d1 100644 --- a/src/screens/Messages/List/index.tsx +++ b/src/screens/Messages/List/index.tsx @@ -3,28 +3,22 @@ import {View} from 'react-native' import {ChatBskyConvoDefs} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' import {sha256} from 'js-sha256' import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' -import {MessagesTabNavigatorParams, NavigationProp} from '#/lib/routes/types' +import {MessagesTabNavigatorParams} from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' -import {isNative} from '#/platform/detection' import {useListConvos} from '#/state/queries/messages/list-converations' -import {useSession} from '#/state/session' import {List} from '#/view/com/util/List' -import {TimeElapsed} from '#/view/com/util/TimeElapsed' -import {UserAvatar} from '#/view/com/util/UserAvatar' import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' import {ScrollView} from '#/view/com/util/Views' -import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {DialogControlProps, useDialogControl} from '#/components/Dialog' -import {ConvoMenu} from '#/components/dms/ConvoMenu' import {NewChat} from '#/components/dms/NewChat' import * as TextField from '#/components/forms/TextField' import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus' @@ -32,10 +26,10 @@ import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' import {Link} from '#/components/Link' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' -import {useMenuControl} from '#/components/Menu' import {Text} from '#/components/Typography' import {ClipClopGate} from '../gate' import {useDmServiceUrlStorage} from '../Temp/useDmServiceUrlStorage' +import {ChatListItem} from './ChatListItem' type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'> @@ -255,181 +249,6 @@ export function MessagesScreen({navigation, route}: Props) { ) } -function ChatListItem({ - convo, - index, -}: { - convo: ChatBskyConvoDefs.ConvoView - index: number -}) { - const t = useTheme() - const {_} = useLingui() - const {currentAccount} = useSession() - const menuControl = useMenuControl() - const {gtMobile} = useBreakpoints() - - let lastMessage = _(msg`No messages yet`) - let lastMessageSentAt: string | null = null - if (ChatBskyConvoDefs.isMessageView(convo.lastMessage)) { - if (convo.lastMessage.sender?.did === currentAccount?.did) { - lastMessage = _(msg`You: ${convo.lastMessage.text}`) - } else { - lastMessage = convo.lastMessage.text - } - lastMessageSentAt = convo.lastMessage.sentAt - } - if (ChatBskyConvoDefs.isDeletedMessageView(convo.lastMessage)) { - lastMessage = _(msg`Message deleted`) - } - - const otherUser = convo.members.find( - member => member.did !== currentAccount?.did, - ) - - const navigation = useNavigation<NavigationProp>() - const [showActions, setShowActions] = React.useState(false) - - const onMouseEnter = React.useCallback(() => { - setShowActions(true) - }, []) - - const onMouseLeave = React.useCallback(() => { - setShowActions(false) - }, []) - - const onFocus = React.useCallback<React.FocusEventHandler>(e => { - if (e.nativeEvent.relatedTarget == null) return - setShowActions(true) - }, []) - - const onPress = React.useCallback(() => { - navigation.push('MessagesConversation', { - conversation: convo.id, - }) - }, [convo.id, navigation]) - - if (!otherUser) { - return null - } - - return ( - <View - // @ts-expect-error web only - onMouseEnter={onMouseEnter} - onMouseLeave={onMouseLeave} - onFocus={onFocus} - onBlur={onMouseLeave}> - <Button - label={otherUser.displayName || otherUser.handle} - onPress={onPress} - style={a.flex_1} - onLongPress={isNative ? menuControl.open : undefined}> - {({hovered, pressed}) => ( - <View - style={[ - a.flex_row, - a.flex_1, - a.px_lg, - a.py_md, - a.gap_md, - (hovered || pressed) && t.atoms.bg_contrast_25, - index === 0 && [a.border_t, a.pt_lg], - t.atoms.border_contrast_low, - ]}> - <UserAvatar avatar={otherUser?.avatar} size={52} /> - <View style={[a.flex_1, a.flex_row, a.align_center]}> - <View style={[a.flex_1]}> - <View - style={[ - a.flex_1, - a.flex_row, - a.align_end, - a.pb_2xs, - web([{marginTop: -2}]), - ]}> - <Text - numberOfLines={1} - style={[{maxWidth: '85%'}, web([a.leading_normal])]}> - <Text style={[a.text_md, t.atoms.text, a.font_bold]}> - {otherUser.displayName || otherUser.handle} - </Text> - </Text> - {lastMessageSentAt && ( - <TimeElapsed timestamp={lastMessageSentAt}> - {({timeElapsed}) => ( - <Text - style={[ - a.text_sm, - web([a.leading_normal]), - t.atoms.text_contrast_medium, - ]}> - {' '} - · {timeElapsed} - </Text> - )} - </TimeElapsed> - )} - </View> - <Text - numberOfLines={1} - style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}> - @{otherUser.handle} - </Text> - <Text - numberOfLines={2} - style={[ - a.text_sm, - a.leading_snug, - convo.unreadCount > 0 - ? a.font_bold - : t.atoms.text_contrast_high, - ]}> - {lastMessage} - </Text> - </View> - {convo.unreadCount > 0 && ( - <View - style={[ - a.absolute, - a.rounded_full, - { - backgroundColor: convo.muted - ? t.palette.contrast_200 - : t.palette.primary_500, - height: 7, - width: 7, - }, - isNative - ? { - top: 15, - right: 12, - } - : { - top: 0, - right: 0, - }, - ]} - /> - )} - <ConvoMenu - convo={convo} - profile={otherUser} - control={menuControl} - currentScreen="list" - showMarkAsRead={convo.unreadCount > 0} - hideTrigger={isNative} - triggerOpacity={ - !gtMobile || showActions || menuControl.isOpen ? 1 : 0 - } - /> - </View> - </View> - )} - </Button> - </View> - ) -} - function DesktopHeader({ newChatControl, onNavigateToSettings, |