Add max character count to Chat composer

app/soapbox/components/ui/hstack/hstack.tsx

@@ -14,6 +14,7 @@ const alignItemsOptions = {
   bottom: 'items-end',
   center: 'items-center',
   start: 'items-start',
+  stretch: 'items-stretch',
 };
 
 const spaces = {

app/soapbox/features/chats/components/chat-composer.tsx

@@ -40,8 +40,12 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
 
   const isBlocked = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocked_by']));
   const isBlocking = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocking']));
+  const maxCharacterCount = useAppSelector((state) => state.instance.getIn(['configuration', 'chats', 'max_characters']) as number);
 
-  const isSubmitDisabled = disabled || value.length === 0;
+  const isOverCharacterLimit = maxCharacterCount && value?.length > maxCharacterCount;
+  const isSubmitDisabled = disabled || isOverCharacterLimit || value.length === 0;
+
+  const overLimitText = maxCharacterCount ? maxCharacterCount - value?.length : '';
 
   const handleUnblockUser = () => {
     dispatch(openModal('CONFIRM', {
@@ -75,7 +79,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
 
   return (
     <div className='mt-auto pt-4 px-4 shadow-3xl'>
-      <HStack alignItems='center' justifyContent='between' space={4}>
+      <HStack alignItems='stretch' justifyContent='between' space={4}>
         <Stack grow>
           <Textarea
             autoFocus
@@ -91,13 +95,19 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
           />
         </Stack>
 
-        <IconButton
-          src={require('assets/icons/airplane.svg')}
-          iconClassName='w-5 h-5'
-          className='text-primary-500'
-          disabled={isSubmitDisabled}
-          onClick={onSubmit}
-        />
+        <Stack space={2} justifyContent='end' alignItems='center' className='w-10 mb-1.5'>
+          {isOverCharacterLimit ? (
+            <Text size='sm' theme='danger'>{overLimitText}</Text>
+          ) : null}
+
+          <IconButton
+            src={require('assets/icons/airplane.svg')}
+            iconClassName='w-5 h-5'
+            className='text-primary-500'
+            disabled={isSubmitDisabled}
+            onClick={onSubmit}
+          />
+        </Stack>
       </HStack>
 
       <HStack alignItems='center' className='h-5' space={1}>

app/soapbox/normalizers/__tests__/instance.test.ts

@@ -9,6 +9,9 @@ describe('normalizeInstance()', () => {
       contact_account: {},
       configuration: {
         media_attachments: {},
+        chats: {
+          max_characters: 500,
+        },
         polls: {
           max_options: 4,
           max_characters_per_option: 25,

app/soapbox/normalizers/instance.ts

@@ -21,6 +21,9 @@ export const InstanceRecord = ImmutableRecord({
   contact_account: ImmutableMap<string, any>(),
   configuration: ImmutableMap<string, any>({
     media_attachments: ImmutableMap<string, any>(),
+    chats: ImmutableMap<string, number>({
+      max_characters: 500,
+    }),
     polls: ImmutableMap<string, number>({
       max_options: 4,
       max_characters_per_option: 25,

app/soapbox/reducers/__tests__/instance.test.ts

@@ -12,6 +12,9 @@ describe('instance reducer', () => {
     const expected = {
       description_limit: 1500,
       configuration: {
+        chats: {
+          max_characters: 500,
+        },
         statuses: {
           max_characters: 500,
           max_media_attachments: 4,