acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Update presentation of chat requests (#10417)

Browse Source
This commit is contained in:
DS Boyce
2026-05-08 12:05:05 -07:00
committed by GitHub
parent c8e4815837
commit a889a1b081
5 changed files with 160 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Messages/components/RequestButtons.tsx
+64 -70
View File
@@ -1,8 +1,6 @@
import {useCallback} from 'react'
import {type ChatBskyActorDefs, ChatBskyConvoDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {StackActions, useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
@@ -16,7 +14,6 @@ import {
unstableCacheProfileView,
useProfileBlockMutationQueue,
} from '#/state/queries/profile'
import {atoms as a} from '#/alf'
import {
Button,
ButtonIcon,
@@ -29,6 +26,8 @@ import {
useEmailDialogControl,
} from '#/components/dialogs/EmailDialog'
import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
import {CircleX_Stroke2_Corner0_Rounded} from '#/components/icons/CircleX'
import {Flag_Stroke2_Corner0_Rounded as FlagIcon} from '#/components/icons/Flag'
import {PersonX_Stroke2_Corner0_Rounded as PersonXIcon} from '#/components/icons/Person'
@@ -40,20 +39,22 @@ import * as Toast from '#/components/Toast'
export function RejectMenu({
convo,
profile,
size = 'tiny',
size = 'small',
color = 'secondary',
label,
icon = false,
showDeleteConvo,
currentScreen,
...props
}: Omit<ButtonProps, 'onPress' | 'children' | 'label'> & {
label?: string
icon?: boolean
convo: ChatBskyConvoDefs.ConvoView
profile: ChatBskyActorDefs.ProfileViewBasic
showDeleteConvo?: boolean
currentScreen: 'list' | 'conversation'
}) {
const {_} = useLingui()
const {t: l} = useLingui()
const shadowedProfile = useProfileShadow(profile)
const navigation = useNavigation<NavigationProp>()
const queryClient = useQueryClient()
@@ -66,12 +67,10 @@ export function RejectMenu({
},
onError: () => {
Toast.show(
_(
msg({
context: 'toast',
message: 'Failed to delete chat',
}),
),
l({
context: 'toast',
message: 'Failed to delete chat',
}),
{
type: 'error',
},
@@ -82,35 +81,31 @@ export function RejectMenu({
const onPressDelete = useCallback(() => {
Toast.show(
_(
msg({
context: 'toast',
message: 'Chat deleted',
}),
),
l({
context: 'toast',
message: 'Chat deleted',
}),
{
type: 'success',
},
)
leaveConvo()
}, [leaveConvo, _])
}, [leaveConvo, l])
const onPressBlock = useCallback(() => {
Toast.show(
_(
msg({
context: 'toast',
message: 'Account blocked',
}),
),
l({
context: 'toast',
message: 'Account blocked',
}),
{
type: 'success',
},
)
// block and also delete convo
queueBlock()
void queueBlock()
leaveConvo()
}, [queueBlock, leaveConvo, _])
}, [queueBlock, leaveConvo, l])
const reportControl = useDialogControl()
const blockOrDeleteControl = useDialogControl()
@@ -122,15 +117,15 @@ export function RejectMenu({
return (
<>
<Menu.Root>
<Menu.Trigger label={_(msg`Reject chat request`)}>
<Menu.Trigger label={l`Reject chat request`}>
{({props: triggerProps}) => (
<Button
{...triggerProps}
{...props}
label={triggerProps.accessibilityLabel}
style={[a.flex_1]}
color={color}
size={size}>
{icon ? <ButtonIcon icon={FlagIcon} /> : null}
<ButtonText>
{label || (
<Trans comment="Reject a chat request, this opens a menu with options">
@@ -144,27 +139,25 @@ export function RejectMenu({
<Menu.Outer showCancel>
<Menu.Group>
{showDeleteConvo && (
<Menu.Item
label={_(msg`Delete conversation`)}
onPress={onPressDelete}>
<Menu.Item label={l`Delete conversation`} onPress={onPressDelete}>
<Menu.ItemText>
<Trans>Delete conversation</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={CircleX_Stroke2_Corner0_Rounded} />
</Menu.Item>
)}
<Menu.Item label={_(msg`Block account`)} onPress={onPressBlock}>
<Menu.Item label={l`Block account`} onPress={onPressBlock}>
<Menu.ItemText>
<Trans>Block account</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={PersonXIcon} />
</Menu.Item>
{/* note: last message will almost certainly be defined, since you can't
delete messages for other people andit's impossible for a convo on this
delete messages for other people and it's impossible for a convo on this
screen to have a message sent by you */}
{lastMessage && (
<Menu.Item
label={_(msg`Report conversation`)}
label={l`Report conversation`}
onPress={reportControl.open}>
<Menu.ItemText>
<Trans>Report conversation</Trans>
@@ -210,19 +203,21 @@ export function RejectMenu({
export function AcceptChatButton({
convo,
size = 'tiny',
color = 'secondary_inverted',
size = 'small',
color = 'primary',
label,
icon = false,
currentScreen,
onAcceptConvo,
...props
}: Omit<ButtonProps, 'onPress' | 'children' | 'label'> & {
label?: string
icon?: boolean
convo: ChatBskyConvoDefs.ConvoView
onAcceptConvo?: () => void
currentScreen: 'list' | 'conversation'
}) {
const {_} = useLingui()
const {t: l} = useLingui()
const queryClient = useQueryClient()
const navigation = useNavigation<NavigationProp>()
const {needsEmailVerification} = useEmail()
@@ -245,12 +240,10 @@ export function AcceptChatButton({
// automatically. The only difference is that when they back out of the convo (without sending a message), the conversation will be rejected.
// the list will still have this chat in it -sfn
Toast.show(
_(
msg({
context: 'toast',
message: 'Failed to accept chat',
}),
),
l({
context: 'toast',
message: 'Failed to accept chat',
}),
{
type: 'error',
},
@@ -274,38 +267,43 @@ export function AcceptChatButton({
}
}, [acceptConvo, needsEmailVerification, emailDialogControl])
let Icon: React.ReactNode = null
if (isPending) {
Icon = <ButtonIcon icon={Loader} />
} else if (icon) {
Icon = <ButtonIcon icon={CheckIcon} />
}
return (
<Button
{...props}
label={label || _(msg`Accept chat request`)}
label={label || l`Accept chat request`}
size={size}
color={color}
style={a.flex_1}
onPress={onPressAccept}>
{isPending ? (
<ButtonIcon icon={Loader} />
) : (
<ButtonText>
{label || <Trans comment="Accept a chat request">Accept</Trans>}
</ButtonText>
)}
{Icon}
<ButtonText>
{label || <Trans comment="Accept a chat request">Accept</Trans>}
</ButtonText>
</Button>
)
}
export function DeleteChatButton({
convo,
size = 'tiny',
size = 'small',
color = 'secondary',
label,
icon = false,
currentScreen,
...props
}: Omit<ButtonProps, 'children' | 'label'> & {
label?: string
icon?: boolean
convo: ChatBskyConvoDefs.ConvoView
currentScreen: 'list' | 'conversation'
}) {
const {_} = useLingui()
const {t: l} = useLingui()
const navigation = useNavigation<NavigationProp>()
const {mutate: leaveConvo} = useLeaveConvo(convo.id, {
@@ -316,12 +314,10 @@ export function DeleteChatButton({
},
onError: () => {
Toast.show(
_(
msg({
context: 'toast',
message: 'Failed to delete chat',
}),
),
l({
context: 'toast',
message: 'Failed to delete chat',
}),
{
type: 'error',
},
@@ -331,27 +327,25 @@ export function DeleteChatButton({
const onPressDelete = useCallback(() => {
Toast.show(
_(
msg({
context: 'toast',
message: 'Chat deleted',
}),
),
l({
context: 'toast',
message: 'Chat deleted',
}),
{
type: 'success',
},
)
leaveConvo()
}, [leaveConvo, _])
}, [leaveConvo, l])
return (
<Button
label={label || _(msg`Delete chat`)}
label={label || l`Delete chat`}
size={size}
color={color}
style={a.flex_1}
onPress={onPressDelete}
{...props}>
{icon ? <ButtonIcon icon={LeaveIcon} /> : null}
<ButtonText>{label || <Trans>Delete chat</Trans>}</ButtonText>
</Button>
)