🌍 improve translation strings - part 2

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

@@ -137,9 +137,9 @@ 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'),
+            title: t('Go to log in'),
             action: () => dispatch(signOut()),
           },
         }),

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

@@ -645,7 +645,7 @@ class AccountInternal extends PureComponent<
       const res = await window.Actual.openFileDialog({
         filters: [
           {
-            name: t('Financial Files'),
+            name: t('Financial files'),
             extensions: ['qif', 'ofx', 'qfx', 'csv', 'tsv', 'xml'],
           },
         ],
@@ -680,7 +680,7 @@ class AccountInternal extends PureComponent<
     window.Actual.saveFile(
       exportedTransactions,
       filename,
-      t('Export Transactions'),
+      t('Export transactions'),
     );
   };
 

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

@@ -5,6 +5,7 @@ import * as queries from 'loot-core/src/client/queries';
 import { type Query } from 'loot-core/src/shared/query';
 import { currencyToInteger } from 'loot-core/src/shared/util';
 import { type AccountEntity } from 'loot-core/types/models';
+import { type TransObjectLiteral } from 'loot-core/types/util';
 
 import { SvgCheckCircle1 } from '../../icons/v2';
 import { styles, theme } from '../../style';
@@ -82,23 +83,27 @@ export function ReconcilingMessage({
           <View style={{ color: theme.tableText }}>
             <Text style={{ fontStyle: 'italic', textAlign: 'center' }}>
               <Trans>
-                Your cleared balance <strong>{clearedBalance}</strong> needs{' '}
-                <strong>{difference}</strong> to match
+                Your cleared balance{' '}
+                <strong>{{ clearedBalance } as TransObjectLiteral}</strong>{' '}
+                needs <strong>{{ difference } as TransObjectLiteral}</strong> to
+                match
                 <br /> your bank&apos;s balance of{' '}
-                <Text style={{ fontWeight: 700 }}>{bankBalance}</Text>
+                <Text style={{ fontWeight: 700 }}>
+                  {{ bankBalance } as TransObjectLiteral}
+                </Text>
               </Trans>
             </Text>
           </View>
         )}
         <View style={{ marginLeft: 15 }}>
           <Button variant="primary" onPress={onDone}>
-            <Trans>Done Reconciling</Trans>
+            <Trans>Done reconciling</Trans>
           </Button>
         </View>
         {targetDiff !== 0 && (
           <View style={{ marginLeft: 15 }}>
             <Button onPress={() => onCreateTransaction(targetDiff)}>
-              <Trans>Create Reconciliation Transaction</Trans>
+              <Trans>Create reconciliation transaction</Trans>
             </Button>
           </View>
         )}

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

@@ -531,7 +531,7 @@ export function CreatePayeeButton({
           style={{ marginRight: 5, display: 'inline-block' }}
         />
       )}
-      <Trans>Create Payee “{{ payeeName }}”</Trans>
+      <Trans>Create payee “{{ payeeName }}”</Trans>
     </View>
   );
 }

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

@@ -5,10 +5,12 @@ import React, {
   type CSSProperties,
   useCallback,
 } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 
 import { css } from '@emotion/css';
 
+import { type TransObjectLiteral } from 'loot-core/types/util';
+
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
 import { theme, styles } from '../../style';
@@ -148,47 +150,86 @@ export function BalanceWithCarryover({
                 <span style={{ fontWeight: 'bold' }}>
                   {getDifferenceToGoal(balanceValue) === 0 ? (
                     <span style={{ color: theme.noticeText }}>
-                      {t('Fully funded')}
+                      <Trans>Fully funded</Trans>
                     </span>
                   ) : getDifferenceToGoal(balanceValue) > 0 ? (
                     <span style={{ color: theme.noticeText }}>
-                      {t('Overfunded ({{amount}})', {
-                        amount: format(
-                          getDifferenceToGoal(balanceValue),
-                          'financial',
-                        ),
-                      })}
+                      <Trans>
+                        Overfunded (
+                        {{
+                          amount: format(
+                            getDifferenceToGoal(balanceValue),
+                            'financial',
+                          ),
+                        }}
+                        )
+                      </Trans>
                     </span>
                   ) : (
                     <span style={{ color: theme.errorText }}>
-                      {t('Underfunded ({{amount}})', {
-                        amount: format(
-                          getDifferenceToGoal(balanceValue),
-                          'financial',
-                        ),
-                      })}
+                      <Trans>
+                        Underfunded (
+                        {{
+                          amount: format(
+                            getDifferenceToGoal(balanceValue),
+                            'financial',
+                          ),
+                        }}
+                        )
+                      </Trans>
                     </span>
                   )}
                 </span>
                 <GoalTooltipRow>
-                  <div>{t('Goal Type:')}</div>
-                  <div>{longGoalValue === 1 ? t('Long') : t('Template')}</div>
+                  <Trans>
+                    <div>Goal Type:</div>
+                    <div>
+                      {
+                        {
+                          type:
+                            longGoalValue === 1
+                              ? t('Long', { context: 'noun' })
+                              : t('Template'),
+                        } as TransObjectLiteral
+                      }
+                    </div>
+                  </Trans>
                 </GoalTooltipRow>
                 <GoalTooltipRow>
-                  <div>{t('Goal:')}</div>
-                  <div>{format(goalValue, 'financial')}</div>
+                  <Trans>
+                    <div>Goal:</div>
+                    <div>
+                      {
+                        {
+                          amount: format(goalValue, 'financial'),
+                        } as TransObjectLiteral
+                      }
+                    </div>
+                  </Trans>
                 </GoalTooltipRow>
                 <GoalTooltipRow>
                   {longGoalValue !== 1 ? (
-                    <>
-                      <div>{t('Budgeted:')}</div>
-                      <div>{format(budgetedValue, 'financial')}</div>
-                    </>
+                    <Trans>
+                      <div>Budgeted:</div>
+                      <div>
+                        {
+                          {
+                            amount: format(budgetedValue, 'financial'),
+                          } as TransObjectLiteral
+                        }
+                      </div>
+                    </Trans>
                   ) : (
-                    <>
-                      <div>{t('Balance:')}</div>
-                      <div>{format(balanceValue, type)}</div>
-                    </>
+                    <Trans>
+                      <div>Balance:</div>
+                      <div>
+                        {
+                          {
+                            amount: format(balanceValue, type),
+                          } as TransObjectLiteral
+                        }
+                      </div>
+                    </Trans>
                   )}
                 </GoalTooltipRow>
               </View>

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

@@ -192,7 +192,7 @@ export function SidebarCategory({
         onBlur={() => onEditName(null)}
         style={{ paddingLeft: 13, ...(isLast && { borderBottomWidth: 0 }) }}
         inputProps={{
-          placeholder: temporary ? t('New Category Name') : '',
+          placeholder: temporary ? t('New category name') : '',
         }}
       />
     </View>

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

@@ -228,7 +228,7 @@ export function SidebarGroup({
         style={{ fontWeight: 600 }}
         inputProps={{
           style: { marginLeft: 20 },
-          placeholder: temporary ? t('New Group Name') : '',
+          placeholder: temporary ? t('New group name') : '',
         }}
       />
     </View>

packages/desktop-client/src/components/budget/envelope/CoverMenu.tsx

@@ -48,7 +48,7 @@ export function CoverMenu({
   return (
     <View style={{ padding: 10 }}>
       <View style={{ marginBottom: 5 }}>
-        <Trans>Cover from category:</Trans>
+        <Trans>Cover from a category:</Trans>
       </View>
 
       <InitialFocus>

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

@@ -177,7 +177,7 @@ function BudgetInner(props: BudgetInnerProps) {
       addNotification({
         type: 'error',
         message: t(
-          'Category ‘{{name}}‘ already exists in group (May be Hidden)',
+          'Category “{{name}}” already exists in group (it may be hidden)',
           { name },
         ),
       }),

packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetTotal.tsx

@@ -4,7 +4,7 @@ import React, {
   type ComponentType,
   type ReactNode,
 } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 import { theme, styles } from '../../../../style';
 import { Text } from '../../../common/Text';
@@ -32,7 +32,6 @@ export function BudgetTotal<
   ProgressComponent,
   style,
 }: BudgetTotalProps<CurrentField, TargetField>) {
-  const { t } = useTranslation();
   return (
     <View
       style={{
@@ -51,14 +50,24 @@ export function BudgetTotal<
         </View>
 
         <Text>
-          <CellValue binding={current} type="financial" />
-          <Text style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}>
-            {' '}
-            {t('of')}{' '}
-            <CellValue binding={target} type="financial">
-              {props => <CellValueText {...props} style={styles.notFixed} />}
-            </CellValue>
-          </Text>
+          <Trans
+            i18nKey="<allocatedAmount /> <italic>of <totalAmount /></italic>"
+            components={{
+              allocatedAmount: <CellValue binding={current} type="financial" />,
+              italic: (
+                <Text
+                  style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}
+                />
+              ),
+              totalAmount: (
+                <CellValue binding={target} type="financial">
+                  {props => (
+                    <CellValueText {...props} style={styles.notFixed} />
+                  )}
+                </CellValue>
+              ),
+            }}
+          />
         </Text>
       </View>
     </View>

packages/desktop-client/src/components/filters/NameFilter.tsx

@@ -50,7 +50,7 @@ export function NameFilter({
           >
             <FormField style={{ flex: 1 }}>
               <FormLabel
-                title={t('Filter Name')}
+                title={t('Filter name')}
                 htmlFor="name-field"
                 style={{ userSelect: 'none' }}
               />

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

@@ -187,7 +187,7 @@ function HeaderLogin({ error }) {
           style={{ fontSize: 15 }}
           to={'/login/password?error=' + error}
         >
-          <Trans>Login with Password</Trans>
+          <Trans>Log in with password</Trans>
         </Link>
       ) : (
         <span>

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

@@ -379,7 +379,7 @@ const openIdProviders: (OpenIdProviderOption | typeof Menu.line)[] = [
             variant="external"
             to="https://docs.goauthentik.io/integrations/services/actual-budget/"
           >
-            <Trans>Configure OAuth2 Provider</Trans>
+            <Trans>Configure OAuth2 provider</Trans>
           </Link>
         </Text>
       ),
@@ -434,7 +434,7 @@ function OpenIdProviderSelector({
 
   return (
     <FormField style={{ flex: 1, marginTop: 20 }}>
-      <FormLabel title={t('OpenID Provider')} htmlFor="provider-selector" />
+      <FormLabel title={t('OpenID provider')} htmlFor="provider-selector" />
       <Select
         options={openIdProviders.map(provider =>
           provider === Menu.line ? Menu.line : [provider.value, provider.label],

packages/desktop-client/src/components/mobile/accounts/Accounts.tsx

@@ -1,5 +1,5 @@
 import React, { type CSSProperties, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 
 import { css } from '@emotion/css';
 
@@ -39,12 +39,13 @@ function AccountHeader<SheetFieldName extends SheetFields<'account'>>({
   amount,
   style = {},
 }: AccountHeaderProps<SheetFieldName>) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   return (
     <Button
       variant="bare"
-      aria-label={`View ${name} transactions`}
+      aria-label={t('View {{name}} transactions', { name })}
       onPress={() => navigate(`/accounts/${id}`)}
       style={{
         flex: 1,
@@ -192,13 +193,14 @@ function AccountCard({
 }
 
 function EmptyMessage() {
-  const { t } = useTranslation();
   return (
     <View style={{ flex: 1, padding: 30 }}>
       <Text style={styles.text}>
-        {t(
-          'For Actual to be useful, you need to add an account. You can link an account to automatically download transactions, or manage it locally yourself.',
-        )}
+        <Trans>
+          For Actual to be useful, you need to <strong>add an account</strong>.
+          You can link an account to automatically download transactions, or
+          manage it locally yourself.
+        </Trans>
       </Text>
     </View>
   );
@@ -255,7 +257,7 @@ function AccountList({
     >
       {accounts.length === 0 && <EmptyMessage />}
       <PullToRefresh onRefresh={onSync}>
-        <View aria-label="Account list" style={{ margin: 10 }}>
+        <View aria-label={t('Account list')} style={{ margin: 10 }}>
           {onBudgetAccounts.length > 0 && (
             <AccountHeader
               id="onbudget"

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

@@ -91,7 +91,7 @@ function BudgetPageMenu({
         },
         {
           name: 'toggle-hidden-categories',
-          text: `${!showHiddenCategories ? t('Show') : t('Hide')} ${t('hidden categories')}`,
+          text: `${!showHiddenCategories ? t('Show hidden categories') : t('Hide hidden categories')}`,
         },
         {
           name: 'switch-budget-file',