[Chat] Enforce limits for group size (#10753)

src/components/dms/AddMembersFlow.tsx

@@ -11,6 +11,7 @@ import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
+import {useChatActorStatusQuery} from '#/state/queries/messages/get-status'
 import {useListConvoMembersQuery} from '#/state/queries/messages/list-convo-members'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useSession} from '#/state/session'
@@ -141,6 +142,15 @@ export function AddMembersFlow({
     [memberListData],
   )
 
+  const {data: chatStatus} = useChatActorStatusQuery()
+  const groupMemberLimit = chatStatus?.groupMemberLimit
+  // The existing members (including the viewer) already occupy slots, so the
+  // number of people that can still be added is whatever's left.
+  const remainingSlots =
+    groupMemberLimit !== undefined
+      ? Math.max(0, groupMemberLimit - memberListData.length)
+      : undefined
+
   const [{groupChatDids, groupChatProfiles}, dispatch] = useReducer(reducer, {
     groupChatDids: [],
     groupChatProfiles: [],
@@ -471,6 +481,7 @@ export function AddMembersFlow({
       values={groupChatDids}
       onChange={setGroupChatMembers}
       type="checkbox"
+      maxSelections={remainingSlots}
       label={l`Add group chat members`}
       style={web([a.contents])}>
       <Dialog.InnerFlatList