actualbudget · jfdoming · Feb 19, 2025 · Feb 19, 2025 · Feb 19, 2025 · Feb 19, 2025
diff --git a/packages/desktop-client/src/components/accounts/Account.tsx b/packages/desktop-client/src/components/accounts/Account.tsx
@@ -1881,7 +1881,7 @@ class AccountInternal extends PureComponent<
                           fontStyle: 'italic',
                         }}
                       >
-                        No transactions
+                        <Trans>No transactions</Trans>
                       </View>
                     ) : null
                   }

diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -124,12 +124,12 @@ export function SidebarCategory({
               setMenuOpen(false);
             }}
             items={[
-              { name: 'rename', text: 'Rename' },
+              { name: 'rename', text: t('Rename') },
               !categoryGroup?.hidden && {
                 name: 'toggle-visibility',
-                text: category.hidden ? 'Show' : 'Hide',
+                text: category.hidden ? t('Show') : t('Hide'),
               },
-              { name: 'delete', text: 'Delete' },
+              { name: 'delete', text: t('Delete') },
             ]}
           />
         </Popover>

diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx
@@ -1,4 +1,5 @@
 import React, { type CSSProperties } from 'react';
+import { Trans } from 'react-i18next';
 
 import { AlignedText } from '@actual-app/components/aligned-text';
 import { Block } from '@actual-app/components/block';
@@ -120,10 +121,20 @@ export function TotalsList({ prevMonthName, style }: TotalsListProps) {
       </View>
 
       <View>
-        <Block>Available funds</Block>
-        <Block>Overspent in {prevMonthName}</Block>
-        <Block>Budgeted</Block>
-        <Block>For next month</Block>
+        <Trans>
+          <Block>Available funds</Block>
+        </Trans>
+
+        <Block>
+          <Trans>Overspent in {{ prevMonthName }}</Trans>
+        </Block>
+
+        <Trans>
+          <Block>Budgeted</Block>
+        </Trans>
+        <Trans>
+          <Block>For next month</Block>
+        </Trans>
       </View>
     </View>
   );

diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
 import { useSpring, animated, config } from 'react-spring';
 
@@ -37,6 +38,7 @@ const HIDDEN_Y = TOTAL_HEIGHT;
 export const MOBILE_NAV_HEIGHT = ROW_HEIGHT + PILL_HEIGHT;
 
 export function MobileNavTabs() {
+  const { t } = useTranslation();
   const { isNarrowWidth } = useResponsive();
   const [navbarState, setNavbarState] = useState<'default' | 'open' | 'hidden'>(
     'default',
@@ -90,49 +92,49 @@ export function MobileNavTabs() {
 
   const navTabs = [
     {
-      name: 'Budget',
+      name: t('Budget'),
       path: '/budget',
       style: navTabStyle,
       Icon: SvgWallet,
     },
     {
-      name: 'Transaction',
+      name: t('Transaction'),
       path: '/transactions/new',
       style: navTabStyle,
       Icon: SvgAdd,
     },
     {
-      name: 'Accounts',
+      name: t('Accounts'),
       path: '/accounts',
       style: navTabStyle,
       Icon: SvgPiggyBank,
     },
     {
-      name: 'Reports',
+      name: t('Reports'),
       path: '/reports',
       style: navTabStyle,
       Icon: SvgReports,
     },
     {
-      name: 'Schedules (Soon)',
+      name: t('Schedules (Soon)'),
       path: '/schedules/soon',
       style: navTabStyle,
       Icon: SvgCalendar,
     },
     {
-      name: 'Payees (Soon)',
+      name: t('Payees (Soon)'),
       path: '/payees/soon',
       style: navTabStyle,
       Icon: SvgStoreFront,
     },
     {
-      name: 'Rules (Soon)',
+      name: t('Rules (Soon)'),
       path: '/rules/soon',
       style: navTabStyle,
       Icon: SvgTuning,
     },
     {
-      name: 'Settings',
+      name: t('Settings'),
       path: '/settings',
       style: navTabStyle,
       Icon: SvgCog,

diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 import { styles } from '@actual-app/components/styles';
@@ -230,6 +231,7 @@ function TransactionListWithPreviews({
     | 'uncategorized';
   readonly accountName: AccountEntity['name'] | string;
 }) {
+  const { t } = useTranslation();
   const baseTransactionsQuery = useCallback(
     () =>
       queries.transactions(accountId).options({ splits: 'none' }).select('*'),
@@ -340,7 +342,7 @@ function TransactionListWithPreviews({
       balanceUncleared={balanceQueries.uncleared}
       isLoadingMore={isLoadingMore}
       onLoadMore={loadMoreTransactions}
-      searchPlaceholder={`Search ${accountName}`}
+      searchPlaceholder={`${t('Search')} ${accountName}`}
       onSearch={onSearch}
       onOpenTransaction={onOpenTransaction}
       onRefresh={onRefresh}

diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.tsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.tsx
@@ -77,7 +77,7 @@ function AccountHeader<SheetFieldName extends SheetFields<'account'>>({
           }}
           data-testid="name"
         >
-          {name}
+          {t(name)}
         </Text>
         <SvgCheveronRight
           style={{

diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -488,7 +488,13 @@ const ExpenseCategory = memo(function ExpenseCategory({
           });
           dispatch(collapseModals(`${modalBudgetType}-balance-menu`));
           showUndoNotification({
-            message: `Covered ${category.name} overspending from ${categoriesById[fromCategoryId].name}.`,
+            message: t(
+              `Covered {{toCategoryName}} overspending from {{fromCategoryName}}.`,
+              {
+                toCategoryName: category.name,
+                fromCategoryName: categoriesById[fromCategoryId].name,
+              },
+            ),
           });
         },
       }),
@@ -502,6 +508,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
     month,
     onBudgetAction,
     showUndoNotification,
+    t,
   ]);
 
   const onOpenBalanceMenu = useCallback(() => {

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -7,7 +7,7 @@ import React, {
   useMemo,
   useCallback,
 } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
 
 import { styles } from '@actual-app/components/styles';
@@ -236,7 +236,7 @@ function Footer({
               marginLeft: 6,
             }}
           >
-            Select account
+            <Trans>Select account</Trans>
           </Text>
         </Button>
       ) : isAdding ? (
@@ -254,7 +254,7 @@ function Footer({
               marginLeft: 5,
             }}
           >
-            Add transaction
+            <Trans>Add transaction</Trans>
           </Text>
         </Button>
       ) : (
@@ -750,8 +750,8 @@ const TransactionEditInner = memo(function TransactionEditInner({
           title={
             transaction.payee == null
               ? isAdding
-                ? 'New Transaction'
-                : 'Transaction'
+                ? t('New Transaction')
+                : t('Transaction')
               : title
           }
           leftContent={<MobileBackButton />}

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx
@@ -7,7 +7,7 @@ import React, {
   type CSSProperties,
 } from 'react';
 import { ListBox, Section, Header, Collection } from 'react-aria-components';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 import { Menu, type MenuItemObject } from '@actual-app/components/menu';
@@ -149,7 +149,9 @@ export function TransactionList({
               backgroundColor: theme.mobilePageBackground,
             }}
           >
-            <Text style={{ fontSize: 15 }}>No transactions</Text>
+            <Text style={{ fontSize: 15 }}>
+              <Trans>No transactions</Trans>
+            </Text>
           </View>
         )}
         items={sections}

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListItem.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListItem.tsx
@@ -4,6 +4,7 @@ import React, {
 } from 'react';
 import { mergeProps } from 'react-aria';
 import { ListBoxItem } from 'react-aria-components';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 import { styles } from '@actual-app/components/styles';
@@ -50,6 +51,7 @@ export function TransactionListItem({
   onLongPress,
   ...props
 }: TransactionListItemProps) {
+  const { t } = useTranslation();
   const { list: categories } = useCategories();
 
   const { value: transaction } = props;
@@ -186,7 +188,7 @@ export function TransactionListItem({
                       }),
                     }}
                   >
-                    {prettyPayee || '(No payee)'}
+                    {prettyPayee || t('(No payee)')}
                   </TextOneLine>
                 </View>
                 {isPreview ? (

diff --git a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
@@ -116,7 +116,9 @@ export function CategoryMenuModal({
               }}
             >
               <Notes
-                notes={originalNotes?.length > 0 ? originalNotes : 'No notes'}
+                notes={
+                  originalNotes?.length > 0 ? originalNotes : t('No notes')
+                }
                 editable={false}
                 focused={false}
                 getStyle={() => ({
@@ -199,14 +201,14 @@ function AdditionalCategoryMenu({
             items={[
               !categoryGroup?.hidden && {
                 name: 'toggleVisibility',
-                text: category.hidden ? 'Show' : 'Hide',
+                text: category.hidden ? t('Show') : t('Hide'),
                 icon: category.hidden ? SvgViewShow : SvgViewHide,
                 iconSize: 16,
               },
               !categoryGroup?.hidden && Menu.line,
               {
                 name: 'delete',
-                text: 'Delete',
+                text: t('Delete'),
                 icon: SvgTrash,
                 iconSize: 15,
               },

diff --git a/packages/desktop-client/src/components/modals/CreateLocalAccountModal.tsx b/packages/desktop-client/src/components/modals/CreateLocalAccountModal.tsx
@@ -86,7 +86,7 @@ export function CreateLocalAccountModal() {
           />
           <View>
             <Form onSubmit={onSubmit}>
-              <InlineField label="Name" width="100%">
+              <InlineField label={t('Name')} width="100%">
                 <InitialFocus>
                   <Input
                     name="name"
@@ -161,7 +161,7 @@ export function CreateLocalAccountModal() {
                 </View>
               </View>
 
-              <InlineField label="Balance" width="100%">
+              <InlineField label={t('Balance')} width="100%">
                 <Input
                   name="balance"
                   inputMode="decimal"

diff --git a/packages/desktop-client/src/components/modals/manager/ImportModal.tsx b/packages/desktop-client/src/components/modals/manager/ImportModal.tsx
@@ -67,8 +67,10 @@ export function ImportModal() {
             )}
 
             <Text style={{ marginBottom: 15 }}>
-              Select an app to import from, and we’ll guide you through the
-              process.
+              <Trans>
+                Select an app to import from, and we’ll guide you through the
+                process.
+              </Trans>
             </Text>
 
             <Button style={itemStyle} onPress={() => onSelectType('ynab4')}>

diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.tsx b/packages/desktop-client/src/components/reports/ReportSidebar.tsx
@@ -381,21 +381,23 @@ export function ReportSidebar({
               items={[
                 {
                   name: 'include-current-interval',
-                  text:
-                    'Include current ' +
-                    (
+                  text: t('Include current {{reportOptionRangeType}}', {
+                    reportOptionRangeType: (
                       ReportOptions.dateRangeType.get(
                         customReportItems.dateRange,
                       ) || ''
                     ).toLowerCase(),
-                  tooltip:
-                    'Include current ' +
-                    (
-                      ReportOptions.dateRangeType.get(
-                        customReportItems.dateRange,
-                      ) || ''
-                    ).toLowerCase() +
-                    ' in live range',
+                  }),
+                  tooltip: t(
+                    'Include current {{reportOptionRangeType}} in live range',
+                    {
+                      reportOptionRangeType: (
+                        ReportOptions.dateRangeType.get(
+                          customReportItems.dateRange,
+                        ) || ''
+                      ).toLowerCase(),
+                    },
+                  ),
                   toggle: customReportItems.includeCurrentInterval,
                   disabled:
                     customReportItems.isDateStatic ||
@@ -405,26 +407,26 @@ export function ReportSidebar({
                 },
                 {
                   name: 'show-hidden-categories',
-                  text: 'Show hidden categories',
-                  tooltip: 'Show hidden categories',
+                  text: t('Show hidden categories'),
+                  tooltip: t('Show hidden categories'),
                   toggle: customReportItems.showHiddenCategories,
                 },
                 {
                   name: 'show-empty-items',
-                  text: 'Show empty rows',
-                  tooltip: 'Show rows that are zero or blank',
+                  text: t('Show empty rows'),
+                  tooltip: t('Show rows that are zero or blank'),
                   toggle: customReportItems.showEmpty,
                 },
                 {
                   name: 'show-off-budget',
-                  text: 'Show off budget',
-                  tooltip: 'Show off budget accounts',
+                  text: t('Show off budget'),
+                  tooltip: t('Show off budget accounts'),
                   toggle: customReportItems.showOffBudget,
                 },
                 {
                   name: 'show-uncategorized',
-                  text: 'Show uncategorized',
-                  tooltip: 'Show uncategorized transactions',
+                  text: t('Show uncategorized'),
+                  tooltip: t('Show uncategorized transactions'),
                   toggle: customReportItems.showUncategorized,
                 },
               ]}