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

src/screens/Messages/ConversationSettings/prompts.tsx

@@ -1,10 +1,13 @@
 import {View} from 'react-native'
 import {Trans, useLingui} from '@lingui/react/macro'
 
-import {atoms as a} from '#/alf'
+import {MAX_GROUP_NAME_GRAPHEME_LENGTH} from '#/lib/constants'
+import {isOverMaxGraphemeCount} from '#/lib/strings/helpers'
+import {atoms as a, useTheme} from '#/alf'
 import type * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import * as Prompt from '#/components/Prompt'
+import {Text} from '#/components/Typography'
 
 export function EditNamePrompt({
   control,
@@ -17,8 +20,14 @@ export function EditNamePrompt({
   onChangeText: (value: string) => void
   onConfirm: () => void
 }) {
+  const t = useTheme()
   const {t: l} = useLingui()
 
+  const nameTooLong = isOverMaxGraphemeCount({
+    text: value,
+    maxCount: MAX_GROUP_NAME_GRAPHEME_LENGTH,
+  })
+
   return (
     <Prompt.Outer control={control}>
       <>
@@ -27,7 +36,7 @@ export function EditNamePrompt({
             <Trans>Edit group name</Trans>
           </Prompt.TitleText>
           <View style={[a.my_sm]}>
-            <TextField.Root isInvalid={false}>
+            <TextField.Root isInvalid={nameTooLong}>
               <TextField.Input
                 label={l`Edit group name`}
                 placeholder={l`Group name`}
@@ -38,13 +47,31 @@ export function EditNamePrompt({
                 autoComplete="off"
                 autoCorrect={false}
                 autoFocus
-                onSubmitEditing={onConfirm}
+                onSubmitEditing={nameTooLong ? undefined : onConfirm}
               />
             </TextField.Root>
+            {nameTooLong ? (
+              <Text
+                style={[
+                  a.text_sm,
+                  a.mt_xs,
+                  a.font_semi_bold,
+                  {color: t.palette.negative_400},
+                ]}>
+                <Trans>
+                  Group name is too long. The maximum number of characters is{' '}
+                  {MAX_GROUP_NAME_GRAPHEME_LENGTH}.
+                </Trans>
+              </Text>
+            ) : null}
           </View>
         </Prompt.Content>
         <Prompt.Actions>
-          <Prompt.Action cta={l`Save`} onPress={onConfirm} />
+          <Prompt.Action
+            cta={l`Save`}
+            onPress={onConfirm}
+            disabled={nameTooLong}
+          />
           <Prompt.Cancel />
         </Prompt.Actions>
       </>