Translation: desktop-client/components/autocomplete (#3275)

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

@@ -5,6 +5,7 @@ import React, {
   type ComponentPropsWithoutRef,
   type ReactElement,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { css } from 'glamor';
 
@@ -44,6 +45,7 @@ function AccountList({
   renderAccountItemGroupHeader = defaultRenderAccountItemGroupHeader,
   renderAccountItem = defaultRenderAccountItem,
 }: AccountListProps) {
+  const { t } = useTranslation();
   let lastItem = null;
 
   return (
@@ -63,10 +65,10 @@ function AccountList({
 
           const group = `${
             item.closed
-              ? 'Closed Accounts'
+              ? t('Closed Accounts')
               : item.offbudget
-                ? 'Off Budget'
-                : 'For Budget'
+                ? t('Off Budget')
+                : t('For Budget')
           }`;
 
           lastItem = item;

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

@@ -9,6 +9,7 @@ import React, {
   type ReactElement,
   useCallback,
 } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { css } from 'glamor';
 
@@ -71,6 +72,7 @@ function CategoryList({
   showHiddenItems,
   showBalances,
 }: CategoryListProps) {
+  const { t } = useTranslation();
   let lastGroup: string | undefined | null = null;
 
   const filteredItems = useMemo(
@@ -101,7 +103,7 @@ function CategoryList({
           }
 
           const showGroup = item.cat_group !== lastGroup;
-          const groupName = `${item.group?.name}${item.group?.hidden ? ' (hidden)' : ''}`;
+          const groupName = `${item.group?.name}${item.group?.hidden ? ' ' + t('(hidden)') : ''}`;
           lastGroup = item.cat_group;
           return (
             <Fragment key={item.id}>
@@ -339,7 +341,7 @@ function SplitTransactionButton({
           <SvgSplit width={10} height={10} style={{ marginRight: 5 }} />
         )}
       </Text>
-      Split Transaction
+      <Trans>Split Transaction</Trans>
     </View>
   );
 }
@@ -368,6 +370,7 @@ function CategoryItem({
   showBalances,
   ...props
 }: CategoryItemProps) {
+  const { t } = useTranslation();
   const { isNarrowWidth } = useResponsive();
   const narrowStyle = isNarrowWidth
     ? {
@@ -416,7 +419,7 @@ function CategoryItem({
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
         <TextOneLine>
           {item.name}
-          {item.hidden ? ' (hidden)' : null}
+          {item.hidden ? ' ' + t('(hidden)') : null}
         </TextOneLine>
         <TextOneLine
           style={{

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

@@ -1,4 +1,5 @@
 import React, { type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { theme } from '../../style/theme';
 import { View } from '../common/View';
@@ -16,6 +17,7 @@ export function FilterList<T extends { id: string; name: string }>({
   highlightedIndex: number;
   embedded?: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <View>
       <View
@@ -25,7 +27,7 @@ export function FilterList<T extends { id: string; name: string }>({
           ...(!embedded && { maxHeight: 175 }),
         }}
       >
-        <ItemHeader title="Saved Filters" type="filter" />
+        <ItemHeader title={t('Saved Filters')} type="filter" />
         {items.map((item, idx) => {
           return [
             <div

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

@@ -10,6 +10,7 @@ import React, {
   type ComponentPropsWithoutRef,
   type ReactElement,
 } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { css } from 'glamor';
@@ -158,6 +159,8 @@ function PayeeList({
   renderPayeeItem = defaultRenderPayeeItem,
   footer,
 }: PayeeListProps) {
+  const { t } = useTranslation();
+
   let createNew = null;
   items = [...items];
 
@@ -195,11 +198,11 @@ function PayeeList({
           let title;
 
           if (itemType === 'common_payee' && lastType !== itemType) {
-            title = 'Suggested Payees';
+            title = t('Suggested Payees');
           } else if (itemType === 'payee' && lastType !== itemType) {
-            title = 'Payees';
+            title = t('Payees');
           } else if (itemType === 'account' && lastType !== itemType) {
-            title = 'Transfer To/From';
+            title = t('Transfer To/From');
           }
           const showMoreMessage =
             idx === items.length - 1 && items.length > 100;
@@ -230,7 +233,7 @@ function PayeeList({
                     textAlign: 'center',
                   }}
                 >
-                  More payees are available, search to find them
+                  <Trans>More payees are available, search to find them</Trans>
                 </div>
               )}
             </Fragment>
@@ -445,12 +448,12 @@ export function PayeeAutocomplete({
                     setFocusTransferPayees(!focusTransferPayees);
                   }}
                 >
-                  Make Transfer
+                  <Trans>Make Transfer</Trans>
                 </Button>
               )}
               {showManagePayees && (
                 <Button type="menu" onClick={() => onManagePayees()}>
-                  Manage Payees
+                  <Trans>Manage Payees</Trans>
                 </Button>
               )}
             </AutocompleteFooter>
@@ -520,7 +523,7 @@ export function CreatePayeeButton({
           style={{ marginRight: 5, display: 'inline-block' }}
         />
       )}
-      Create Payee “{payeeName}”
+      <Trans>Create Payee “{{ payeeName }}”</Trans>
     </View>
   );
 }

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

@@ -1,4 +1,5 @@
 import React, { Fragment, type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { theme } from '../../style/theme';
 import { View } from '../common/View';
@@ -16,6 +17,7 @@ export function ReportList<T extends { id: string; name: string }>({
   highlightedIndex: number;
   embedded?: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <View>
       <View
@@ -25,7 +27,7 @@ export function ReportList<T extends { id: string; name: string }>({
           ...(!embedded && { maxHeight: 175 }),
         }}
       >
-        <Fragment>{ItemHeader({ title: 'Saved Reports' })}</Fragment>
+        <Fragment>{ItemHeader({ title: t('Saved Reports') })}</Fragment>
         {items.map((item, idx) => {
           return [
             <div

upcoming-release-notes/3275.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Support translations in desktop-client/components/autocomplete.