Groupchats feature branch (#10181)

Co-authored-by: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/dms/dialogs/NewChatDialog.tsx

@@ -3,13 +3,14 @@ import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
 import {logger} from '#/logger'
+import {useCreateGroupChat} from '#/state/queries/messages/create-group-chat'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
 import {FAB} from '#/view/com/util/fab/FAB'
 import {useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {SearchablePeopleList} from '#/components/dialogs/SearchablePeopleList'
 import {InitiateChatFlow} from '#/components/dms/InitiateChatFlow'
-import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {MessagePlus_Stroke2_Corner0_Rounded as NewChatIcon} from '#/components/icons/Message'
 import * as Toast from '#/components/Toast'
 import {useAnalytics} from '#/analytics'
 
@@ -38,12 +39,28 @@ export function NewChat({
     },
     onError: error => {
       logger.error('Failed to create chat', {safeMessage: error})
-      Toast.show(l`An issue occurred starting the chat`, {
+      Toast.show(l`An issue occurred starting the chat, please try again`, {
         type: 'error',
       })
     },
   })
 
+  const {mutate: createGroupChat} = useCreateGroupChat({
+    onSuccess: data => {
+      onNewChat(data.convo.id)
+      ax.metric('groupchat:create', {logContext: 'NewChatDialog'})
+    },
+    onError: error => {
+      logger.error('Failed to create groupchat', {safeMessage: error})
+      Toast.show(
+        l`An issue occurred creating the group chat, please try again`,
+        {
+          type: 'error',
+        },
+      )
+    },
+  })
+
   const onCreateChat = useCallback(
     (did: string) => {
       control.close(() => createChat([did]))
@@ -52,10 +69,12 @@ export function NewChat({
   )
 
   const onCreateGroupChat = useCallback(
-    (_dids: string[], _groupName: string) => {
-      control.close()
+    (members: string[], name: string) => {
+      control.close(() => {
+        createGroupChat({members, name})
+      })
     },
-    [control],
+    [control, createGroupChat],
   )
 
   const onPress = useCallback(() => {
@@ -74,7 +93,7 @@ export function NewChat({
       <FAB
         testID="newChatFAB"
         onPress={wrappedOnPress}
-        icon={<Plus size="lg" fill={t.palette.white} />}
+        icon={<NewChatIcon size="lg" fill={t.palette.white} />}
         accessibilityRole="button"
         accessibilityLabel={l`New chat`}
         accessibilityHint=""