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

Add full member list to settings

Browse Source
This commit is contained in:
Samuel Newman
2026-04-24 15:38:57 +03:00
parent 263474a0b9
commit 180008c7d5
5 changed files with 152 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Messages/ConversationSettings/Member.tsx
+24 -8
View File
@@ -11,9 +11,11 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useSession} from '#/state/session'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme, web} from '#/alf'
import {type ConvoWithDetails} from '#/components/dms/util'
import {
type ConvoWithDetails,
type GroupConvoMember,
} from '#/components/dms/util'
import {Text} from '#/components/Typography'
import type * as bsky from '#/types/bsky'
import {MemberMenu} from './MemberMenu'
import {StatusBadge} from './StatusBadge'
import {SubtleHoverWrapper} from './SubtleHoverWrapper'
@@ -25,7 +27,7 @@ export function Member({
isOwner,
}: {
convo: ConvoWithDetails
profile: bsky.profile.AnyProfileView
profile: GroupConvoMember
status: 'owner' | 'standard' | 'invited'
isOwner: boolean
}) {
@@ -36,12 +38,10 @@ export function Member({
const profile = useProfileShadow(profileUnshadowed)
const {currentAccount} = useSession()
const moderationOpts = useModerationOpts()
const moderation = moderationOpts
? moderateProfile(profile, moderationOpts)
: undefined
// TODO Render a skeleton here. -dsb
if (!moderation) return null
if (!moderationOpts) return null
const moderation = moderateProfile(profile, moderationOpts)
const isDeletedAccount = profile.handle === 'missing.invalid'
const displayName = isDeletedAccount
@@ -66,6 +66,14 @@ export function Member({
)
}
const joinedReason = profile.kind?.addedBy
? l`Added by ${createSanitizedDisplayName(
profile.kind.addedBy,
true,
moderateProfile(profile.kind.addedBy, moderationOpts).ui('displayName'),
)}`
: `Added by invite link`
return (
<SubtleHoverWrapper>
<View style={[a.flex_row, a.align_center, a.justify_between, a.mx_xl]}>
@@ -94,6 +102,14 @@ export function Member({
]}>
{sanitizeHandle(profile.handle, '@')}
</Text>
<Text
style={[
a.text_xs,
{color: t.palette.contrast_500},
web(a.pt_2xs),
]}>
{joinedReason}
</Text>
</View>
</Pressable>
<View>{statusBadge}</View>
src/screens/Messages/ConversationSettings/index.tsx
+78 -37
View File
@@ -11,10 +11,11 @@ import {
type NavigationProp,
} from '#/lib/routes/types'
import {logger} from '#/logger'
import {ConvoProvider, useConvo} from '#/state/messages/convo'
import {ConvoProvider, isConvoActive, useConvo} from '#/state/messages/convo'
import {ConvoStatus} from '#/state/messages/convo/types'
import {useEditGroupChatName} from '#/state/queries/messages/edit-group-chat-name'
import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
import {useListConvoMembersQuery} from '#/state/queries/messages/list-convo-members'
import {useListJoinRequestsQuery} from '#/state/queries/messages/list-join-requests'
import {useMuteConvo} from '#/state/queries/messages/mute-conversation'
import {useSession} from '#/state/session'
@@ -23,7 +24,10 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {AvatarBubbles} from '#/components/AvatarBubbles'
import {Button, type ButtonColor, ButtonIcon} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {type ConvoWithDetails} from '#/components/dms/util'
import {
type ConvoWithDetails,
type GroupConvoMember,
} from '#/components/dms/util'
import {Error} from '#/components/Error'
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeftIcon} from '#/components/icons/ArrowBoxLeft'
import {
@@ -37,11 +41,10 @@ import {EditBig_Stroke2_Corner2_Rounded as EditIcon} from '#/components/icons/Ed
import {Flag_Stroke2_Corner0_Rounded as FlagIcon} from '#/components/icons/Flag'
import {Lock_Stroke2_Corner0_Rounded as LockIcon} from '#/components/icons/Lock'
import * as Layout from '#/components/Layout'
import {Loader} from '#/components/Loader'
import * as Prompt from '#/components/Prompt'
import * as Toast from '#/components/Toast'
import {Text} from '#/components/Typography'
import {IS_NATIVE} from '#/env'
import type * as bsky from '#/types/bsky'
import {InviteLinkDialog} from '../components/InviteLinkDialog'
import {AddMembersLink} from './AddMembersLink'
import {ROW_SPACING} from './constants'
@@ -56,17 +59,14 @@ const dateFormatter = new Intl.DateTimeFormat(undefined, {
})
type Item =
| {
type: 'MEMBERS_AND_REQUESTS'
}
| {
type: 'ADD_MEMBERS_LINK'
}
| {type: 'MEMBERS_AND_REQUESTS'}
| {type: 'ADD_MEMBERS_LINK'}
| {
type: 'CHAT_MEMBER'
profile: bsky.profile.AnyProfileView
profile: GroupConvoMember
status: 'owner' | 'standard' | 'invited'
}
| {type: 'LOADING'}
type Props = NativeStackScreenProps<
CommonNavigatorParams,
@@ -90,36 +90,84 @@ export function MessagesConversationSettingsScreen({route}: Props) {
<Layout.Header.Slot />
</Layout.Header.Outer>
<ConvoProvider key={convoId} convoId={convoId}>
<SettingsInner convoId={convoId} />
<SettingsInner />
</ConvoProvider>
</Layout.Screen>
)
}
function SettingsInner() {
const {t: l} = useLingui()
const convoState = useConvo()
const navigation = useNavigation<NavigationProp>()
if (convoState.status === ConvoStatus.Error) {
return (
<Error
title={l`Something went wrong`}
message={l`We couldn’t load this conversation’s settings`}
onRetry={() => convoState.error.retry()}
sideBorders={false}
/>
)
}
if (!isConvoActive(convoState)) {
return (
<Layout.Content
contentContainerStyle={[a.flex_1, a.align_center, a.justify_center]}>
<Loader size="xl" />
</Layout.Content>
)
}
if (convoState.convo?.kind !== 'group') {
return (
<Error
title={l`Wrong kind of conversation`}
message={l`This screen is only available for group conversations.`}
onGoBack={() => {
if (navigation.canGoBack()) {
navigation.goBack()
} else {
navigation.replace('Messages', {animation: 'pop'})
}
}}
/>
)
}
return <GroupSettings convo={convoState.convo} />
}
function keyExtractor(item: Item) {
return item.type === 'CHAT_MEMBER' ? item.profile.did : item.type
}
function SettingsInner({convoId}: {convoId: string}) {
const {t: l} = useLingui()
function GroupSettings({
convo,
}: {
convo: Extract<ConvoWithDetails, {kind: 'group'}>
}) {
const initialNumToRender = useInitialNumToRender({minItemHeight: 68})
const bottomBarOffset = useBottomBarOffset()
const convoState = useConvo()
const {currentAccount} = useSession()
const convo = convoState.convo
const primaryMember = convo?.primaryMember
const isOwner = !!primaryMember && primaryMember.did === currentAccount?.did
const data: bsky.profile.AnyProfileView[] = convo?.members ?? []
const {data: memberListData = [], isPending} = useListConvoMembersQuery({
convoId: convo.view.id,
placeholderData: convo?.members,
})
// TODO Need this data in order to populate this array. -dsb
const invites: string[] = []
const {data: joinRequestsData, hasNextPage: hasMoreRequests} =
useListJoinRequestsQuery({
convoId,
convoId: convo.view.id,
enabled: isOwner,
})
const requestCount =
@@ -133,7 +181,7 @@ function SettingsInner({convoId}: {convoId: string}) {
type: 'MEMBERS_AND_REQUESTS',
},
...(isOwner ? [{type: 'ADD_MEMBERS_LINK'} as const] : []),
...[...data]
...[...memberListData]
.sort((a, b) => {
const aIsOwner = a.did === primaryMember?.did
const bIsOwner = b.did === primaryMember?.did
@@ -146,7 +194,7 @@ function SettingsInner({convoId}: {convoId: string}) {
.map(
(profile): Item => ({
type: 'CHAT_MEMBER',
profile,
profile: profile as GroupConvoMember,
status:
primaryMember?.did === profile.did
? 'owner'
@@ -155,6 +203,7 @@ function SettingsInner({convoId}: {convoId: string}) {
: 'standard',
}),
),
...(isPending ? [{type: 'LOADING' as const}] : []),
]
function renderItem({item}: {item: Item}) {
@@ -162,7 +211,7 @@ function SettingsInner({convoId}: {convoId: string}) {
case 'MEMBERS_AND_REQUESTS':
return (
<MembersAndRequests
memberCount={data.length}
memberCount={convo.details.memberCount}
requestCount={requestCount}
hasMoreRequests={!!hasMoreRequests}
isOwner={isOwner}
@@ -172,7 +221,7 @@ function SettingsInner({convoId}: {convoId: string}) {
return convo ? (
<AddMembersLink
convo={convo}
members={data.map(profile => profile.did)}
members={memberListData.map(profile => profile.did)}
/>
) : null
case 'CHAT_MEMBER':
@@ -184,22 +233,17 @@ function SettingsInner({convoId}: {convoId: string}) {
isOwner={isOwner}
/>
) : null
case 'LOADING':
return (
<View style={[a.w_full, a.align_center, a.py_2xl]}>
<Loader size="lg" />
</View>
)
default:
return null
}
}
if (convoState.status === ConvoStatus.Error) {
return (
<Error
title={l`Something went wrong`}
message={l`We couldn’t load this conversation’s settings`}
onRetry={() => convoState.error.retry()}
sideBorders={false}
/>
)
}
return (
<List
data={items}
@@ -220,9 +264,6 @@ function SettingsInner({convoId}: {convoId: string}) {
renderItem={renderItem}
sideBorders={false}
windowSize={11}
// TODO Paginate on relatedProfiles. -dsb
onEndReached={() => {}}
onEndReachedThreshold={IS_NATIVE ? 1.5 : 0}
/>
)
}
src/state/messages/convo/index.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export function ConvoProvider({
const [root, id] = getConvoKey(convoId)
return queryClient.getQueryCache().subscribe(event => {
const queryKey = event.query.queryKey as string[]
if (queryKey[0] === root && queryKey[1] === id) {
if (queryKey[0] === root && queryKey[1] === id && !queryKey[2]) {
const data = event.query.state.data as
| ChatBskyConvoDefs.ConvoView
| undefined
src/state/queries/messages/conversation.ts
+1 -1
View File
@@ -16,7 +16,7 @@ import {
RQKEY_ROOT as LIST_CONVOS_KEY,
} from './list-conversations'
const RQKEY_ROOT = 'convo'
export const RQKEY_ROOT = 'convo'
export const RQKEY = (convoId: string) => [RQKEY_ROOT, convoId]
export function useConvoQuery({convoId}: {convoId: string}) {
src/state/queries/messages/list-convo-members.ts
+48
View File
@@ -0,0 +1,48 @@
import {type ChatBskyActorDefs} from '@atproto/api'
import {useQuery} from '@tanstack/react-query'
import {DM_SERVICE_HEADERS} from '#/lib/constants'
import {STALE} from '#/state/queries'
import {useAgent} from '#/state/session'
import {RQKEY_ROOT as GET_CONVOS_KEY} from './conversation'
export const RQKEY_SEGMENT = 'members'
export const RQKEY = (convoId: string) => [
GET_CONVOS_KEY,
convoId,
RQKEY_SEGMENT,
]
// group chat size is 50, so should fetch the whole list in one go
const LIMIT = 50
export function useListConvoMembersQuery({
convoId,
placeholderData,
}: {
convoId: string
placeholderData?: ChatBskyActorDefs.ProfileViewBasic[]
}) {
const agent = useAgent()
return useQuery({
queryKey: RQKEY(convoId),
queryFn: async () => {
const members = []
let cursor
do {
const {data} = await agent.chat.bsky.convo.getConvoMembers(
{convoId, cursor, limit: LIMIT},
{headers: DM_SERVICE_HEADERS},
)
members.push(...data.members)
cursor = data.cursor
} while (cursor)
return members
},
staleTime: STALE.MINUTES.THIRTY,
placeholderData,
})
}