From fca1bccda3ca943ee12dd32a92fb82e5426552b8 Mon Sep 17 00:00:00 2001
From: NickFR <20896232+nmathey@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:00:53 +1100
Subject: [PATCH] [WIP] Translation:
 desktop-client/src/components/budget/BudgetTotals.tsx (#3367)

* i18 translation

* realease note

* translate 'arial-label' text

* translate 'text'

* fixing 'text' translation

* <Trans> component for HTML tag

* Lint

---------

Co-authored-by: Julian Dominguez-Schatz <julian.dominguezschatz@gmail.com>
---
 .../src/components/budget/BudgetTotals.tsx         | 14 +++++++++-----
 upcoming-release-notes/3367.md                     |  6 ++++++
 2 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 upcoming-release-notes/3367.md

diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.tsx b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
index 65c2dff9abf..fa3e348b28f 100644
--- a/packages/desktop-client/src/components/budget/BudgetTotals.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
@@ -1,4 +1,5 @@
 import React, { type ComponentProps, memo, useRef, useState } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
 
 import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { theme, styles } from '../../style';
@@ -23,6 +24,7 @@ export const BudgetTotals = memo(function BudgetTotals({
   expandAllCategories,
   collapseAllCategories,
 }: BudgetTotalsProps) {
+  const { t } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
 
@@ -54,11 +56,13 @@ export const BudgetTotals = memo(function BudgetTotals({
           WebkitUserSelect: 'none',
         }}
       >
-        <View style={{ flexGrow: '1' }}>Category</View>
+        <View style={{ flexGrow: '1' }}>
+          <Trans>Category</Trans>
+        </View>
         <Button
           ref={triggerRef}
           variant="bare"
-          aria-label="Menu"
+          aria-label={t('Menu')}
           onPress={() => setMenuOpen(true)}
           style={{ color: 'currentColor', padding: 3 }}
         >
@@ -89,15 +93,15 @@ export const BudgetTotals = memo(function BudgetTotals({
             items={[
               {
                 name: 'toggle-visibility',
-                text: 'Toggle hidden categories',
+                text: t('Toggle hidden categories'),
               },
               {
                 name: 'expandAllCategories',
-                text: 'Expand all',
+                text: t('Expand all'),
               },
               {
                 name: 'collapseAllCategories',
-                text: 'Collapse all',
+                text: t('Collapse all'),
               },
             ]}
           />
diff --git a/upcoming-release-notes/3367.md b/upcoming-release-notes/3367.md
new file mode 100644
index 00000000000..4e17cc73221
--- /dev/null
+++ b/upcoming-release-notes/3367.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [nmathey]
+---
+
+Support translations in Translation support for desktop-client/src/components/budget/BudgetTotals.tsx