🌍 improve translation strings - part 1 (#4041)

packages/desktop-client/e2e/page-models/navigation.js

@@ -58,7 +58,7 @@ export class Navigation {
   async createAccount(data) {
     await this.page.getByRole('button', { name: 'Add account' }).click();
     await this.page
-      .getByRole('button', { name: 'Create local account' })
+      .getByRole('button', { name: 'Create a local account' })
       .click();
 
     // Fill the form

packages/desktop-client/src/components/App.tsx

@@ -134,7 +134,7 @@ function AppInner() {
         id: 'login-expired',
         title: t('Login expired'),
         sticky: true,
-        message: t('Login expired, please login again.'),
+        message: t('Login expired, please log in again.'),
         button: {
           title: t('Go to login'),
           action: signOut,

packages/desktop-client/src/components/LoggedInUser.tsx

@@ -6,6 +6,7 @@ import { useLocation } from 'react-router-dom';
 import { closeBudget, getUserData, signOut } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
 import { type RemoteFile, type SyncedLocalFile } from 'loot-core/types/file';
+import { type TransObjectLiteral } from 'loot-core/types/util';
 
 import { useAuth } from '../auth/AuthProvider';
 import { Permissions } from '../auth/types';
@@ -205,9 +206,14 @@ export function LoggedInUser({
         userData?.displayName &&
         !hasSyncedPrefs && (
           <small>
+            (
             <Trans>
-              (logged in as: <span>{userData?.displayName}</span>)
+              logged in as:{' '}
+              <span>
+                {{ userName: userData?.displayName } as TransObjectLiteral}
+              </span>
             </Trans>
+            )
           </small>
         )}
       {!loading &&
@@ -216,13 +222,16 @@ export function LoggedInUser({
         userData?.displayName &&
         hasSyncedPrefs && (
           <small>
+            (
             <Trans>
-              (logged in as:{' '}
+              logged in as:{' '}
               <span>
-                <PrivacyFilter>{userData?.displayName}</PrivacyFilter>
+                <PrivacyFilter>
+                  {{ userName: userData?.displayName } as TransObjectLiteral}
+                </PrivacyFilter>
               </span>
-              )
             </Trans>
+            )
           </small>
         )}
 

packages/desktop-client/src/components/Modals.tsx

@@ -302,7 +302,7 @@ export function Modals() {
                 />
               )}
               inputPlaceholder={t('Category name')}
-              buttonText="Add"
+              buttonText={t('Add')}
               onValidate={options.onValidate}
               onSubmit={options.onSubmit}
             />

packages/desktop-client/src/components/accounts/AccountSyncCheck.tsx

@@ -68,7 +68,7 @@ function useErrorMessage() {
 
     return (
       <Trans>
-        An internal error occurred. Try to login again, or get{' '}
+        An internal error occurred. Try to log in again, or get{' '}
         <Link variant="external" to="https://actualbudget.org/contact/">
           in touch
         </Link>{' '}

packages/desktop-client/src/components/admin/UserAccess/UserAccess.tsx

@@ -163,15 +163,15 @@ function UserAccessContent({
         >
           <Text>
             <Trans>
-              Determine which users can view and manage your budgets..{' '}
-              <Link
-                variant="external"
-                to="https://actualbudget.org/docs/budgeting/users-access/"
-                linkColor="muted"
-              >
-                Learn more
-              </Link>
-            </Trans>
+              Determine which users can view and manage your budgets
+            </Trans>{' '}
+            <Link
+              variant="external"
+              to="https://actualbudget.org/docs/budgeting/users-access/"
+              linkColor="muted"
+            >
+              <Trans>Learn more</Trans>
+            </Link>
           </Text>
         </View>
         <View style={{ flex: 1 }} />

packages/desktop-client/src/components/admin/UserDirectory/UserDirectory.tsx

@@ -46,7 +46,7 @@ function useGetUserDirectoryErrors() {
       case 'unauthorized':
         return t('You are not logged in.');
       case 'token-expired':
-        return t('Login expired, please login again.');
+        return t('Login expired, please log in again.');
       case 'user-cant-be-empty':
         return t(
           'Please enter a value for the username; the field cannot be empty.',
@@ -232,15 +232,15 @@ function UserDirectoryContent({
             <Text>
               <Trans>
                 Manage and view users who can create new budgets or be invited
-                to access existing ones.{' '}
-                <Link
-                  variant="external"
-                  to="https://actualbudget.org/docs/budgeting/users/"
-                  linkColor="muted"
-                >
-                  Learn more
-                </Link>
-              </Trans>
+                to access existing ones.
+              </Trans>{' '}
+              <Link
+                variant="external"
+                to="https://actualbudget.org/docs/budgeting/users/"
+                linkColor="muted"
+              >
+                <Trans>Learn more</Trans>
+              </Link>
             </Text>
           </View>
           <View style={{ flex: 1 }} />
@@ -282,7 +282,7 @@ function UserDirectoryContent({
           <Stack direction="row" align="center" justify="flex-end" spacing={2}>
             {selectedInst.items.size > 0 && (
               <Button onPress={onDeleteSelected}>
-                <Trans> Delete {selectedInst.items.size} users </Trans>
+                <Trans>Delete {{ count: selectedInst.items.size }} users</Trans>
               </Button>
             )}
             <Button variant="primary" onPress={onAddUser}>

packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx

@@ -454,12 +454,12 @@ export function PayeeAutocomplete({
                     setFocusTransferPayees(!focusTransferPayees);
                   }}
                 >
-                  <Trans>Make Transfer</Trans>
+                  <Trans>Make transfer</Trans>
                 </Button>
               )}
               {showManagePayees && (
                 <Button type="menu" onClick={() => onManagePayees()}>
-                  <Trans>Manage Payees</Trans>
+                  <Trans>Manage payees</Trans>
                 </Button>
               )}
             </AutocompleteFooter>

packages/desktop-client/src/components/budget/IncomeHeader.tsx

@@ -25,7 +25,7 @@ export function IncomeHeader({
         }}
       >
         <Button onPress={onShowNewGroup} style={{ fontSize: 12, margin: 10 }}>
-          <Trans>Add Group</Trans>
+          <Trans>Add group</Trans>
         </Button>
       </View>
       <RenderMonths

packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx

@@ -29,7 +29,7 @@ export function ChangePassword() {
       case 'network-failure':
         return 'Unable to contact the server';
       default:
-        return 'Internal server error';
+        return 'Internal error';
     }
   }
 

packages/desktop-client/src/components/manager/subscribe/OpenIdForm.tsx

@@ -74,7 +74,7 @@ export function OpenIdForm({
             addNotification({
               type: 'error',
               id: 'error',
-              title: t('Error getting openid config'),
+              title: t('Error getting OpenID config'),
               sticky: true,
               message: config.error,
             });

packages/desktop-client/src/components/manager/subscribe/common.tsx

@@ -18,7 +18,7 @@ import {
 // and make sure the user is looking at the right page. For example,
 // it doesn't make sense to show the login page if the server doesn't
 // have any accounts yet. It also doesn't make sense to show the
-// bootstrap page if the server already has been setup with a
+// bootstrap page if the server already has been set up with a
 // password. Both pages will redirect to the other depending on state;
 // they will also potentially redirect to other pages which do *not*
 // do any checks.

packages/desktop-client/src/components/modals/CloseAccountModal.tsx

@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import React, { type FormEvent, useState, type CSSProperties } from 'react';
 import { Form } from 'react-aria-components';
-import { useTranslation } from 'react-i18next'; // Import useTranslation
+import { useTranslation, Trans } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import {
@@ -11,6 +11,7 @@ import {
 } from 'loot-core/client/actions';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { type AccountEntity } from 'loot-core/src/types/models';
+import { type TransObjectLiteral } from 'loot-core/types/util';
 
 import { useAccounts } from '../../hooks/useAccounts';
 import { useCategories } from '../../hooks/useCategories';
@@ -119,17 +120,26 @@ export function CloseAccountModal({
           />
           <View>
             <Paragraph>
-              {t('Are you sure you want to close ')}
-              <strong>{account.name}</strong>?{' '}
+              <Trans>
+                Are you sure you want to close{' '}
+                <strong>
+                  {{ accountName: account.name } as TransObjectLiteral}
+                </strong>
+                ?{' '}
+              </Trans>
               {canDelete ? (
                 <span>
-                  This account has no transactions so it will be permanently
-                  deleted.
+                  <Trans>
+                    This account has no transactions so it will be permanently
+                    deleted.
+                  </Trans>
                 </span>
               ) : (
                 <span>
-                  This account has transactions so we can’t permanently delete
-                  it.
+                  <Trans>
+                    This account has transactions so we can’t permanently delete
+                    it.
+                  </Trans>
                 </span>
               )}
             </Paragraph>
@@ -142,10 +152,18 @@ export function CloseAccountModal({
               {balance !== 0 && (
                 <View>
                   <Paragraph>
-                    This account has a balance of{' '}
-                    <strong>{integerToCurrency(balance)}</strong>. To close this
-                    account, select a different account to transfer this balance
-                    to:
+                    <Trans>
+                      This account has a balance of{' '}
+                      <strong>
+                        {
+                          {
+                            balance: integerToCurrency(balance),
+                          } as TransObjectLiteral
+                        }
+                      </strong>
+                      . To close this account, select a different account to
+                      transfer this balance to:
+                    </Trans>
                   </Paragraph>
 
                   <View style={{ marginBottom: 15 }}>
@@ -176,16 +194,18 @@ export function CloseAccountModal({
 
                   {transferError && (
                     <FormError style={{ marginBottom: 15 }}>
-                      {t('Transfer is required')}
+                      <Trans>Transfer is required</Trans>
                     </FormError>
                   )}
 
                   {needsCategory(account, transferAccountId, accounts) && (
                     <View style={{ marginBottom: 15 }}>
                       <Paragraph>
-                        Since you are transferring the balance from an on budget
-                        account to an off budget account, this transaction must
-                        be categorized. Select a category:
+                        <Trans>
+                          Since you are transferring the balance from an on
+                          budget account to an off budget account, this
+                          transaction must be categorized. Select a category:
+                        </Trans>
                       </Paragraph>
 
                       <CategoryAutocomplete
@@ -213,7 +233,9 @@ export function CloseAccountModal({
                       />
 
                       {categoryError && (
-                        <FormError>{t('Category is required')}</FormError>
+                        <FormError>
+                          <Trans>Category is required</Trans>
+                        </FormError>
                       )}
                     </View>
                   )}
@@ -223,22 +245,24 @@ export function CloseAccountModal({
               {!canDelete && (
                 <View style={{ marginBottom: 15 }}>
                   <Text style={{ fontSize: 12 }}>
-                    {t('You can also')}{' '}
-                    <Link
-                      variant="text"
-                      onClick={() => {
-                        setLoading(true);
+                    <Trans>
+                      You can also{' '}
+                      <Link
+                        variant="text"
+                        onClick={() => {
+                          setLoading(true);
 
-                        dispatch(forceCloseAccount(account.id));
-                        close();
-                      }}
-                      style={{ color: theme.errorText }}
-                    >
-                      {t('force close')}
-                    </Link>{' '}
-                    the account which will delete it and all its transactions
-                    permanently. Doing so may change your budget unexpectedly
-                    since money in it may vanish.
+                          dispatch(forceCloseAccount(account.id));
+                          close();
+                        }}
+                        style={{ color: theme.errorText }}
+                      >
+                        force close
+                      </Link>{' '}
+                      the account which will delete it and all its transactions
+                      permanently. Doing so may change your budget unexpectedly
+                      since money in it may vanish.
+                    </Trans>
                   </Text>
                 </View>
               )}
@@ -256,7 +280,7 @@ export function CloseAccountModal({
                   }}
                   onPress={close}
                 >
-                  {t('Cancel')}
+                  <Trans>Cancel</Trans>
                 </Button>
                 <Button
                   type="submit"
@@ -265,7 +289,7 @@ export function CloseAccountModal({
                     height: isNarrowWidth ? styles.mobileMinHeight : undefined,
                   }}
                 >
-                  {t('Close Account')}
+                  <Trans>Close Account</Trans>
                 </Button>
               </View>
             </Form>