From be32a0c1a081f2fba417c35acb8e41f84c2ca336 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 21 Mar 2023 15:36:53 -0500
Subject: [PATCH 1/3] Textarea: add a character counter

---
 CHANGELOG.md                                  |  1 +
 .../components/ui/textarea/textarea.tsx       | 52 ++++++++++++++-----
 .../components/registration-form.tsx          |  4 +-
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e04be802..b8df9bb65 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: Support posts filtering on recent Mastodon versions
 - Reactions: Support custom emoji reactions
 - Compatbility: Support Mastodon v2 timeline filters.
+- UI: added a character counter to some textareas.
 
 ### Changed
 - Posts: truncate Nostr pubkeys in reply mentions.
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index 03ddda81d..b5c252ffb 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,5 +1,9 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Stack from '../stack/stack';
+import Text from '../text/text';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
@@ -28,6 +32,8 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
   isResizeable?: boolean
   /** Textarea theme. */
   theme?: 'default' | 'transparent'
+  /** Whether to display a character counter below the textarea. */
+  withCounter?: boolean
 }
 
 /** Textarea with custom styles. */
@@ -40,8 +46,11 @@ const Textarea = React.forwardRef(({
   maxRows = 10,
   minRows = 1,
   theme = 'default',
+  maxLength,
+  value,
   ...props
 }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
+  const length = value?.length || 0;
   const [rows, setRows] = useState<number>(autoGrow ? 1 : 4);
 
   const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -70,20 +79,35 @@ const Textarea = React.forwardRef(({
   };
 
   return (
-    <textarea
-      {...props}
-      ref={ref}
-      rows={rows}
-      onChange={handleChange}
-      className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm', {
-        'bg-white dark:bg-transparent shadow-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
-          theme === 'default',
-        'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',
-        'font-mono': isCodeEditor,
-        'text-red-600 border-red-600': hasError,
-        'resize-none': !isResizeable,
-      })}
-    />
+    <Stack space={1.5}>
+      <textarea
+        {...props}
+        value={value}
+        ref={ref}
+        rows={rows}
+        onChange={handleChange}
+        className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm', {
+          'bg-white dark:bg-transparent shadow-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+            theme === 'default',
+          'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',
+          'font-mono': isCodeEditor,
+          'text-red-600 border-red-600': hasError,
+          'resize-none': !isResizeable,
+        })}
+      />
+
+      {maxLength && (
+        <div className='mt-1.5 text-right rtl:text-left'>
+          <Text size='xs' theme={maxLength - length < 0 ? 'danger' : 'muted'}>
+            <FormattedMessage
+              id='textarea.counter.label'
+              defaultMessage='{count} characters remaining'
+              values={{ count: maxLength - length }}
+            />
+          </Text>
+        </div>
+      )}
+    </Stack>
   );
 },
 );
diff --git a/app/soapbox/features/auth-login/components/registration-form.tsx b/app/soapbox/features/auth-login/components/registration-form.tsx
index c29dab9a0..dd0bab511 100644
--- a/app/soapbox/features/auth-login/components/registration-form.tsx
+++ b/app/soapbox/features/auth-login/components/registration-form.tsx
@@ -28,6 +28,7 @@ const messages = defineMessages({
   newsletter: { id: 'registration.newsletter', defaultMessage: 'Subscribe to newsletter.' },
   needsConfirmationHeader: { id: 'confirmations.register.needs_confirmation.header', defaultMessage: 'Confirmation needed' },
   needsApprovalHeader: { id: 'confirmations.register.needs_approval.header', defaultMessage: 'Approval needed' },
+  reasonHint: { id: 'registration.reason_hint', defaultMessage: 'This will help us review your application' },
 });
 
 interface IRegistrationForm {
@@ -296,13 +297,14 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
           {needsApproval && (
             <FormGroup
               labelText={<FormattedMessage id='registration.reason' defaultMessage='Why do you want to join?' />}
-              hintText={<FormattedMessage id='registration.reason_hint' defaultMessage='This will help us review your application' />}
             >
               <Textarea
                 name='reason'
+                placeholder={intl.formatMessage(messages.reasonHint)}
                 maxLength={500}
                 onChange={onInputChange}
                 value={params.get('reason', '')}
+                autoGrow
                 required
               />
             </FormGroup>

From ec72ac0db82244e6b6971ae1ee8dd65c841b9417 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 21 Mar 2023 16:09:40 -0500
Subject: [PATCH 2/3] yarn i18n

---
 app/soapbox/locales/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 1be8a0e20..3aab8b323 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -1472,6 +1472,7 @@
   "tabs_bar.profile": "Profile",
   "tabs_bar.search": "Search",
   "tabs_bar.settings": "Settings",
+  "textarea.counter.label": "{count} characters remaining",
   "theme_editor.Reset": "Reset",
   "theme_editor.export": "Export theme",
   "theme_editor.import": "Import theme",

From 7ec51778f8bb52437c55b36e588f5bc57c925d0c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 30 Mar 2023 00:30:27 +0000
Subject: [PATCH 3/3] Apply 1 suggestion(s) to 1 file(s)

---
 app/soapbox/components/ui/textarea/textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index b5c252ffb..2b3f54897 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -97,7 +97,7 @@ const Textarea = React.forwardRef(({
       />
 
       {maxLength && (
-        <div className='mt-1.5 text-right rtl:text-left'>
+        <div className='text-right rtl:text-left'>
           <Text size='xs' theme={maxLength - length < 0 ? 'danger' : 'muted'}>
             <FormattedMessage
               id='textarea.counter.label'