From 8d9182eb440fed5f1b68736c00d5faff5baf775f Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 21 Nov 2022 12:21:02 -0500
Subject: [PATCH] Add max character count to Chat composer

---
 app/soapbox/components/ui/hstack/hstack.tsx   |  1 +
 .../chats/components/chat-composer.tsx        | 28 +++++++++++++------
 .../normalizers/__tests__/instance.test.ts    |  3 ++
 app/soapbox/normalizers/instance.ts           |  3 ++
 .../reducers/__tests__/instance.test.ts       |  3 ++
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index 996ccd64d..eee5b3706 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/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 = {
diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index d5510f9fd..e39d48e2c 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/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}>
diff --git a/app/soapbox/normalizers/__tests__/instance.test.ts b/app/soapbox/normalizers/__tests__/instance.test.ts
index 87088b30d..24b0231d8 100644
--- a/app/soapbox/normalizers/__tests__/instance.test.ts
+++ b/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,
diff --git a/app/soapbox/normalizers/instance.ts b/app/soapbox/normalizers/instance.ts
index 7a33343f7..e7933b080 100644
--- a/app/soapbox/normalizers/instance.ts
+++ b/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,
diff --git a/app/soapbox/reducers/__tests__/instance.test.ts b/app/soapbox/reducers/__tests__/instance.test.ts
index 8357d6851..b2edcd1dd 100644
--- a/app/soapbox/reducers/__tests__/instance.test.ts
+++ b/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,