From 8b4390681bc57c7ee9811fc11b60af64331d53fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 14:09:28 +0100
Subject: [PATCH 1/4] Make some strings localizable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/sidebar-menu.tsx       |  3 +-
 .../components/password-reset-confirm.tsx     |  5 ++--
 .../features/chats/components/chat-window.tsx |  8 +++++-
 .../features/developers/settings-store.tsx    |  3 +-
 .../features/onboarding/steps/bio-step.tsx    | 13 ++++++---
 .../steps/cover-photo-selection-step.tsx      |  6 +++-
 .../onboarding/steps/display-name-step.tsx    | 17 ++++++++---
 .../public-layout/components/header.tsx       |  3 +-
 .../ui/components/modals/boost-modal.tsx      |  2 +-
 .../ui/components/modals/verify-sms-modal.tsx |  2 +-
 .../features/verification/registration.tsx    | 28 ++++++-------------
 .../verification/steps/age-verification.tsx   | 16 ++++++++---
 .../verification/steps/email-verification.tsx |  7 +++--
 .../verification/steps/sms-verification.tsx   | 11 +++++---
 .../features/verification/waitlist-page.tsx   | 15 ++++++----
 15 files changed, 88 insertions(+), 51 deletions(-)

diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index 466e5ca16..21703caa0 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -38,6 +38,7 @@ const messages = defineMessages({
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
 });
 
 interface ISidebarLink {
@@ -148,7 +149,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
         onClick={handleClose}
       >
         <IconButton
-          title='close'
+          title={intl.formatMessage(messages.close)}
           onClick={handleClose}
           src={require('@tabler/icons/x.svg')}
           ref={closeButtonRef}
diff --git a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
index fb20ab06d..f0a4d1c31 100644
--- a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
+++ b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
@@ -11,6 +11,7 @@ const token = new URLSearchParams(window.location.search).get('reset_password_to
 
 const messages = defineMessages({
   resetPasswordFail: { id: 'reset_password.fail', defaultMessage: 'Expired token, please try again.' },
+  passwordPlaceholder: { id: 'reset_password.password.placeholder', defaultMessage: 'Placeholder' },
 });
 
 const Statuses = {
@@ -66,11 +67,11 @@ const PasswordResetConfirm = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Password' errors={renderErrors()}>
+          <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
             <Input
               type='password'
               name='password'
-              placeholder='Password'
+              placeholder={intl.formatMessage(messages.passwordPlaceholder)}
               onChange={onChange}
               required
             />
diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-window.tsx
index 3bcb83165..9808dce3f 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-window.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import {
@@ -18,6 +19,10 @@ import ChatBox from './chat-box';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
+const messages = defineMessages({
+  close: { id: 'chat_window.close', defaultMessage: 'Close chat' },
+});
+
 type WindowState = 'open' | 'minimized';
 
 const getChat = makeGetChat();
@@ -33,6 +38,7 @@ interface IChatWindow {
 
 /** Floating desktop chat window. */
 const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
+  const intl = useIntl();
   const dispatch = useAppDispatch();
 
   const displayFqn = useAppSelector(getDisplayFqn);
@@ -98,7 +104,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
           @{getAcct(account, displayFqn)}
         </button>
         <div className='pane__close'>
-          <IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
+          <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.close)} onClick={handleChatClose(chat.id)} />
         </div>
       </HStack>
       <div className='pane__content'>
diff --git a/app/soapbox/features/developers/settings-store.tsx b/app/soapbox/features/developers/settings-store.tsx
index cfddc637e..521ed0dab 100644
--- a/app/soapbox/features/developers/settings-store.tsx
+++ b/app/soapbox/features/developers/settings-store.tsx
@@ -29,6 +29,7 @@ const isJSONValid = (text: any): boolean => {
 
 const messages = defineMessages({
   heading: { id: 'column.settings_store', defaultMessage: 'Settings store' },
+  advanced: { id: 'developers.settings_store.advanced', defaultMessage: 'Advanced settings' },
   hint: { id: 'developers.settings_store.hint', defaultMessage: 'It is possible to directly edit your user settings here. BE CAREFUL! Editing this section can break your account, and you will only be able to recover through the API.' },
 });
 
@@ -98,7 +99,7 @@ const SettingsStore: React.FC = () => {
       </Form>
 
       <CardHeader>
-        <CardTitle title='Advanced settings' />
+        <CardTitle title={intl.formatMessage(messages.advanced)} />
       </CardHeader>
 
       <List>
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index bed69ecbc..77205b001 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -9,7 +9,12 @@ import { useOwnAccount } from 'soapbox/hooks';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  bioPlaceholder: { id: 'onboarding.bio.placeholder', defaultMessage: 'Tell the world a little about yourself…' },
+});
+
 const BioStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   const account = useOwnAccount();
@@ -56,13 +61,13 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
           <Stack space={5}>
             <div className='sm:pt-10 sm:w-2/3 mx-auto'>
               <FormGroup
-                hintText='Max 500 characters'
-                labelText='Bio'
+                hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
+                labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
                 errors={errors}
               >
                 <Textarea
                   onChange={(event) => setValue(event.target.value)}
-                  placeholder='Tell the world a little about yourself…'
+                  placeholder={intl.formatMessage(messages.bioPlaceholder)}
                   value={value}
                   maxLength={500}
                 />
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index ee0ffa0eb..e753a935b 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -138,7 +138,11 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
               <Stack justifyContent='center' space={2}>
                 <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? 'Saving…' : 'Next'}
+                  {isSubmitting ? (
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+                  ) : (
+                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+                  )}
                 </Button>
 
                 {isDisabled && (
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index d833fdc52..25dd49ba6 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -9,7 +9,12 @@ import { useOwnAccount } from 'soapbox/hooks';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
+});
+
 const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   const account = useOwnAccount();
@@ -68,12 +73,12 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
             <Stack space={5}>
               <FormGroup
                 hintText={hintText}
-                labelText='Display name'
+                labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
                 errors={errors}
               >
                 <Input
                   onChange={(event) => setValue(event.target.value)}
-                  placeholder='Eg. John Smith'
+                  placeholder={intl.formatMessage(messages.usernamePlaceholder)}
                   type='text'
                   value={value}
                   maxLength={30}
@@ -88,7 +93,11 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
                   disabled={isDisabled || isSubmitting}
                   onClick={handleSubmit}
                 >
-                  {isSubmitting ? 'Saving…' : 'Next'}
+                  {isSubmitting ? (
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+                  ) : (
+                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+                  )}
                 </Button>
 
                 <Button block theme='tertiary' type='button' onClick={onNext}>
diff --git a/app/soapbox/features/public-layout/components/header.tsx b/app/soapbox/features/public-layout/components/header.tsx
index 053711afd..ea276797e 100644
--- a/app/soapbox/features/public-layout/components/header.tsx
+++ b/app/soapbox/features/public-layout/components/header.tsx
@@ -15,6 +15,7 @@ import Sonar from './sonar';
 import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
+  menu: { id: 'header.menu.title', defaultMessage: 'Open menu' },
   home: { id: 'header.home.label', defaultMessage: 'Home' },
   login: { id: 'header.login.label', defaultMessage: 'Log in' },
   register: { id: 'header.register.label', defaultMessage: 'Register' },
@@ -79,7 +80,7 @@ const Header = () => {
             </div>
 
             <IconButton
-              title='Open Menu'
+              title={intl.formatMessage(messages.menu)}
               src={require('@tabler/icons/menu-2.svg')}
               onClick={open}
               className='md:hidden mr-4 bg-transparent text-gray-700 dark:text-gray-600 hover:text-gray-600'
diff --git a/app/soapbox/features/ui/components/modals/boost-modal.tsx b/app/soapbox/features/ui/components/modals/boost-modal.tsx
index 3a09be5c3..22fe18e8a 100644
--- a/app/soapbox/features/ui/components/modals/boost-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/boost-modal.tsx
@@ -30,7 +30,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
 
   return (
     <Modal
-      title='Repost?'
+      title={<FormattedMessage id='boost_modal.title' defaultMessage='Repost?' />}
       confirmationAction={handleReblog}
       confirmationText={intl.formatMessage(buttonText)}
     >
diff --git a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
index 6441e8763..8df59b777 100644
--- a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
@@ -150,7 +150,7 @@ const VerifySmsModal: React.FC<IVerifySmsModal> = ({ onClose }) => {
         );
       case Statuses.READY:
         return (
-          <FormGroup labelText='Phone Number'>
+          <FormGroup labelText={<FormattedMessage id='sms_verification.phone.label' defaultMessage='Phone Number' />}>
             <PhoneInput
               value={phone}
               onChange={onChange}
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index e409f3beb..4d6edbc6d 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -16,22 +16,12 @@ import PasswordIndicator from './components/password-indicator';
 import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
-  success: {
-    id: 'registrations.success',
-    defaultMessage: 'Welcome to {siteTitle}!',
-  },
-  usernameHint: {
-    id: 'registrations.username.hint',
-    defaultMessage: 'May only contain A-Z, 0-9, and underscores',
-  },
-  usernameTaken: {
-    id: 'registrations.unprocessable_entity',
-    defaultMessage: 'This username has already been taken.',
-  },
-  error: {
-    id: 'registrations.error',
-    defaultMessage: 'Failed to register your account.',
-  },
+  success: { id: 'registrations.success', defaultMessage: 'Welcome to {siteTitle}!' },
+  usernameLabel: { id: 'registrations.username.label', defaultMessage: 'Your username' },
+  usernameHint: { id: 'registrations.username.hint', defaultMessage: 'May only contain A-Z, 0-9, and underscores', },
+  usernameTaken: { id: 'registrations.unprocessable_entity', defaultMessage: 'This username has already been taken.' },
+  passwordLabel: { id: 'registrations.password.label', defaultMessage: 'Password' },
+  error: { id: 'registrations.error', defaultMessage: 'Failed to register your account.' },
 });
 
 const initialState = {
@@ -108,7 +98,7 @@ const Registration = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto space-y-4'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Your username' hintText={intl.formatMessage(messages.usernameHint)}>
+          <FormGroup labelText={intl.formatMessage(messages.usernameLabel)} hintText={intl.formatMessage(messages.usernameHint)}>
             <Input
               name='username'
               type='text'
@@ -120,7 +110,7 @@ const Registration = () => {
             />
           </FormGroup>
 
-          <FormGroup labelText='Password'>
+          <FormGroup labelText={intl.formatMessage(messages.passwordLabel)}>
             <Input
               name='password'
               type='password'
@@ -140,7 +130,7 @@ const Registration = () => {
               type='submit'
               disabled={isLoading || !hasValidPassword}
             >
-              Register
+              <FormattedMessage id='header.register.label' defaultMessage='Register' />
             </Button>
 
             {(links.get('termsOfService') && links.get('privacyPolicy')) ? (
diff --git a/app/soapbox/features/verification/steps/age-verification.tsx b/app/soapbox/features/verification/steps/age-verification.tsx
index 84283f4b4..bb35ffe40 100644
--- a/app/soapbox/features/verification/steps/age-verification.tsx
+++ b/app/soapbox/features/verification/steps/age-verification.tsx
@@ -61,13 +61,21 @@ const AgeVerification = () => {
           <Datepicker onChange={onChange} />
 
           <Text theme='muted' size='sm'>
-            {siteTitle} requires users to be at least {ageMinimum} years old to
-            access its platform. Anyone under the age of {ageMinimum} years old
-            cannot access this platform.
+            <FormattedMessage
+              id='age_verification.body'
+              defaultMessage='{siteTitle} requires users to be at least {ageMinimum} years old to access its platform. Anyone under the age of {ageMinimum} years old cannot access this platform.'
+              values={{
+                siteTitle,
+                ageMinimum,
+              }}
+            />
+
           </Text>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index 98c11b829..a83483616 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -13,6 +13,7 @@ const messages = defineMessages({
   verificationFail: { id: 'email_verification.fail', defaultMessage: 'Failed to request email verification.' },
   verificationFailTakenAlert: { id: 'email_verifilcation.exists', defaultMessage: 'This email has already been taken.' },
   verificationFailTaken: { id: 'email_verification.taken', defaultMessage: 'is taken' },
+  emailLabel: { id: 'email_verification.email.label', defaultMessage: 'E-mail address' },
 });
 
 const Statuses = {
@@ -122,7 +123,7 @@ const EmailVerification = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Email Address' errors={errors}>
+          <FormGroup labelText={intl.formatMessage(messages.emailLabel)} errors={errors}>
             <Input
               type='email'
               value={email}
@@ -134,7 +135,9 @@ const EmailVerification = () => {
           </FormGroup>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/steps/sms-verification.tsx b/app/soapbox/features/verification/steps/sms-verification.tsx
index 7337c706d..efe0a5ffc 100644
--- a/app/soapbox/features/verification/steps/sms-verification.tsx
+++ b/app/soapbox/features/verification/steps/sms-verification.tsx
@@ -13,6 +13,7 @@ const messages = defineMessages({
   verificationSuccess: { id: 'sms_verification.success', defaultMessage: 'A verification code has been sent to your phone number.' },
   verificationFail: { id: 'sms_verification.fail', defaultMessage: 'Failed to send SMS message to your phone number.' },
   verificationExpired: { id: 'sms_verification.expired', defaultMessage: 'Your SMS token has expired.' },
+  phoneLabel: { id: 'sms_verification.phone.label', defaultMessage: 'Phone number' },
 });
 
 const Statuses = {
@@ -98,7 +99,7 @@ const SmsVerification = () => {
 
         <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto space-y-4'>
           <Text theme='muted' size='sm' align='center'>
-            We sent you a 6-digit code via SMS. Enter it below.
+            <FormattedMessage id='sms_verification.sent.body' defaultMessage='We sent you a 6-digit code via SMS. Enter it below.' />
           </Text>
 
           <OtpInput
@@ -120,7 +121,7 @@ const SmsVerification = () => {
               onClick={resendVerificationCode}
               disabled={requestedAnother}
             >
-              Resend verification code?
+              <FormattedMessage id='sms_verification.sent.actions.resend' defaultMessage='Resend verification code?' />
             </Button>
           </div>
         </div>
@@ -138,7 +139,7 @@ const SmsVerification = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Phone Number'>
+          <FormGroup labelText={intl.formatMessage(messages.phoneLabel)}>
             <PhoneInput
               value={phone}
               onChange={onChange}
@@ -147,7 +148,9 @@ const SmsVerification = () => {
           </FormGroup>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/waitlist-page.tsx b/app/soapbox/features/verification/waitlist-page.tsx
index 1ae44817c..ebfe6a00d 100644
--- a/app/soapbox/features/verification/waitlist-page.tsx
+++ b/app/soapbox/features/verification/waitlist-page.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -42,7 +43,7 @@ const WaitlistPage = (/* { account } */) => {
 
             <div className='absolute inset-y-0 right-0 flex items-center pr-2'>
               <Button onClick={onClickLogOut} theme='primary' to='/logout'>
-                Sign out
+                <FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' />
               </Button>
             </div>
           </div>
@@ -55,13 +56,17 @@ const WaitlistPage = (/* { account } */) => {
 
               <Stack space={2}>
                 <Text size='lg' theme='muted' align='center' weight='medium'>
-                  Welcome back to {title}! You were previously placed on our
-                  waitlist. Please verify your phone number to receive
-                  immediate access to your account!
+                  <FormattedMessage
+                    id='waitlist.body'
+                    defaultMessage='Welcome back to {title}! You were previously placed on our waitlist. Please verify your phone number to receive immediate access to your account!'
+                    values={{ title }}
+                  />
                 </Text>
 
                 <div className='text-center'>
-                  <Button onClick={openVerifySmsModal} theme='primary'>Verify phone number</Button>
+                  <Button onClick={openVerifySmsModal} theme='primary'>
+                    <FormattedMessage id='waitlist.actions.verify_number' defaultMessage='Verify phone number' />
+                  </Button>
                 </div>
               </Stack>
             </Stack>

From 34aee08a0932e4b8ea04479136afdfce601b2269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 16:00:54 +0100
Subject: [PATCH 2/4] Make more strings localizable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/account/components/header.tsx  |  3 ++-
 .../onboarding/steps/avatar-selection-step.tsx      |  8 ++++++--
 app/soapbox/features/onboarding/steps/bio-step.tsx  |  3 ++-
 .../onboarding/steps/cover-photo-selection-step.tsx | 13 +++++++++----
 .../features/onboarding/steps/display-name-step.tsx |  3 ++-
 app/soapbox/features/verification/registration.tsx  |  2 +-
 .../steps/__tests__/email-verification.test.tsx     |  4 ++--
 app/soapbox/locales/en.json                         |  4 ++--
 8 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 48c1eff8f..af6e3d079 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -67,6 +67,7 @@ const messages = defineMessages({
   userEndorsed: { id: 'account.endorse.success', defaultMessage: 'You are now featuring @{acct} on your profile' },
   userUnendorsed: { id: 'account.unendorse.success', defaultMessage: 'You are no longer featuring @{acct}' },
   profileExternal: { id: 'account.profile_external', defaultMessage: 'View profile on {domain}' },
+  header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
 });
 
 interface IHeader {
@@ -556,7 +557,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
             <a href={account.header} onClick={handleHeaderClick} target='_blank'>
               <StillImage
                 src={account.header}
-                alt='Profile Header'
+                alt={intl.formatMessage(messages.header)}
               />
             </a>
           )}
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 936b59a51..f5f9f7274 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -1,6 +1,6 @@
 import classNames from 'clsx';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -11,6 +11,10 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
+});
+
 /** Default avatar filenames from various backends */
 const DEFAULT_AVATARS = [
   '/avatars/original/missing.png', // Mastodon
@@ -64,7 +68,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           dispatch(snackbar.error((error.response.data as any).error.replace('Validation failed: ', '')));
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
     }).catch(console.error);
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index 77205b001..38ec425ad 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -11,6 +11,7 @@ import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
   bioPlaceholder: { id: 'onboarding.bio.placeholder', defaultMessage: 'Tell the world a little about yourself…' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
 const BioStep = ({ onNext }: { onNext: () => void }) => {
@@ -37,7 +38,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           setErrors([(error.response.data as any).error.replace('Validation failed: ', '')]);
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
   };
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index e753a935b..e1a9c5f30 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -1,6 +1,6 @@
 import classNames from 'clsx';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -12,6 +12,11 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
+});
+
 /** Default header filenames from various backends */
 const DEFAULT_HEADERS = [
   '/headers/original/missing.png', // Mastodon
@@ -24,6 +29,7 @@ const isDefaultHeader = (url: string) => {
 };
 
 const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const account = useOwnAccount();
 
@@ -65,7 +71,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           dispatch(snackbar.error((error.response.data as any).error.replace('Validation failed: ', '')));
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
     }).catch(console.error);
@@ -90,7 +96,6 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
           <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
             <Stack space={10}>
               <div className='border border-solid border-gray-200 dark:border-gray-800 rounded-lg'>
-                {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
                 <div
                   role='button'
                   className='relative h-24 bg-gray-200 dark:bg-gray-800 rounded-t-md flex items-center justify-center'
@@ -98,7 +103,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   {selectedFile || account?.header && (
                     <StillImage
                       src={selectedFile || account.header}
-                      alt='Profile Header'
+                      alt={intl.formatMessage(messages.header)}
                       className='absolute inset-0 object-cover rounded-t-md'
                     />
                   )}
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index 25dd49ba6..5d2e101b2 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -11,6 +11,7 @@ import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
   usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
 const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
@@ -48,7 +49,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           setErrors([(error.response.data as any).error.replace('Validation failed: ', '')]);
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
   };
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index 4d6edbc6d..6539ca8c8 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -18,7 +18,7 @@ import type { AxiosError } from 'axios';
 const messages = defineMessages({
   success: { id: 'registrations.success', defaultMessage: 'Welcome to {siteTitle}!' },
   usernameLabel: { id: 'registrations.username.label', defaultMessage: 'Your username' },
-  usernameHint: { id: 'registrations.username.hint', defaultMessage: 'May only contain A-Z, 0-9, and underscores', },
+  usernameHint: { id: 'registrations.username.hint', defaultMessage: 'May only contain A-Z, 0-9, and underscores' },
   usernameTaken: { id: 'registrations.unprocessable_entity', defaultMessage: 'This username has already been taken.' },
   passwordLabel: { id: 'registrations.password.label', defaultMessage: 'Password' },
   error: { id: 'registrations.error', defaultMessage: 'Failed to register your account.' },
diff --git a/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx b/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
index 9e05686b7..fc9131b97 100644
--- a/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
+++ b/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
@@ -23,7 +23,7 @@ describe('<EmailVerification />', () => {
     it('successfully submits', async() => {
       render(<EmailVerification />);
 
-      await userEvent.type(screen.getByLabelText('Email Address'), 'foo@bar.com{enter}');
+      await userEvent.type(screen.getByLabelText('E-mail address'), 'foo@bar.com{enter}');
 
       await waitFor(() => {
         fireEvent.submit(
@@ -50,7 +50,7 @@ describe('<EmailVerification />', () => {
     it('renders errors', async() => {
       render(<EmailVerification />);
 
-      await userEvent.type(screen.getByLabelText('Email Address'), 'foo@bar.com{enter}');
+      await userEvent.type(screen.getByLabelText('E-mail address'), 'foo@bar.com{enter}');
 
       await waitFor(() => {
         fireEvent.submit(
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index b7c280137..bac5c3ea6 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -432,7 +432,7 @@
   "emoji_button.objects": "Objects",
   "emoji_button.people": "People",
   "emoji_button.recent": "Frequently used",
-  "emoji_button.search": "Search...",
+  "emoji_button.search": "Search…",
   "emoji_button.search_results": "Search results",
   "emoji_button.symbols": "Symbols",
   "emoji_button.travel": "Travel & Places",
@@ -1071,7 +1071,7 @@
   "upload_form.description": "Describe for the visually impaired",
   "upload_form.preview": "Preview",
   "upload_form.undo": "Delete",
-  "upload_progress.label": "Uploading...",
+  "upload_progress.label": "Uploading…",
   "video.close": "Close video",
   "video.download": "Download file",
   "video.exit_fullscreen": "Exit full screen",

From 954524892919b26350d6b387d0c2b74e168c8980 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 26 Nov 2022 09:34:13 -0600
Subject: [PATCH 3/4] Fix chat list styles Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1221

---
 app/soapbox/features/chats/components/chat.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index c180160e3..7c595c33f 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -33,9 +33,9 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
   return (
     <div className='account'>
       <button className='floating-link' onClick={() => onClick(chat)} />
-      <HStack key={account.id} space={3} className='relative'>
-        <Avatar src={account.avatar} size={36} />
-        <Stack>
+      <HStack key={account.id} space={3} className='relative overflow-hidden'>
+        <Avatar className='flex-none' src={account.avatar} size={36} />
+        <Stack className='overflow-hidden'>
           <DisplayName account={account} withSuffix={false} />
           {attachment && (
             <Icon
@@ -49,6 +49,7 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
               size='sm'
               className='chat__last-message'
               dangerouslySetInnerHTML={{ __html: parsedContent }}
+              truncate
             />
           ) : attachment && (
             <span

From ed22df7a514192af477606b40f0e6ffd482c40b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 16:50:53 +0100
Subject: [PATCH 4/4] Update tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/ui/components/modals/verify-sms-modal.tsx      | 2 +-
 .../verification/steps/__tests__/sms-verification.test.tsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
index 8df59b777..ee45e4947 100644
--- a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
@@ -150,7 +150,7 @@ const VerifySmsModal: React.FC<IVerifySmsModal> = ({ onClose }) => {
         );
       case Statuses.READY:
         return (
-          <FormGroup labelText={<FormattedMessage id='sms_verification.phone.label' defaultMessage='Phone Number' />}>
+          <FormGroup labelText={<FormattedMessage id='sms_verification.phone.label' defaultMessage='Phone number' />}>
             <PhoneInput
               value={phone}
               onChange={onChange}
diff --git a/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx b/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
index 26add4f4f..6cdba4104 100644
--- a/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
+++ b/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
@@ -26,7 +26,7 @@ describe('<SmsVerification />', () => {
 
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {
@@ -53,7 +53,7 @@ describe('<SmsVerification />', () => {
 
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {
@@ -87,7 +87,7 @@ describe('<SmsVerification />', () => {
     it('renders errors', async() => {
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {