Translation: desktop-client/components/sidebar

packages/desktop-client/src/components/sidebar/Accounts.tsx

@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import * as queries from 'loot-core/src/client/queries';
@@ -31,6 +32,7 @@ export function Accounts({
   onToggleClosedAccounts,
   onReorder,
 }: AccountsProps) {
+  const { t } = useTranslation();
   const [isDragging, setIsDragging] = useState(false);
   const failedAccounts = useFailedAccounts();
   const updatedAccounts = useUpdatedAccounts();
@@ -62,15 +64,15 @@ export function Accounts({
   return (
     <View>
       <Account
-        name="All accounts"
+        name={t('All accounts')}
         to="/accounts"
         query={queries.allAccountBalance()}
         style={{ fontWeight, marginTop: 15 }}
       />
 
       {budgetedAccounts.length > 0 && (
         <Account
-          name="For budget"
+          name={t('For budget')}
           to="/accounts/budgeted"
           query={queries.budgetedAccountBalance()}
           style={{
@@ -100,7 +102,7 @@ export function Accounts({
 
       {offbudgetAccounts.length > 0 && (
         <Account
-          name="Off budget"
+          name={t('Off budget')}
           to="/accounts/offbudget"
           query={queries.offbudgetAccountBalance()}
           style={{
@@ -131,7 +133,9 @@ export function Accounts({
       {closedAccounts.length > 0 && (
         <SecondaryItem
           style={{ marginTop: 15 }}
-          title={'Closed accounts' + (showClosedAccounts ? '' : '...')}
+          title={
+            showClosedAccounts ? t('Closed accounts') : t('Closed accounts...')
+          }
           onClick={onToggleClosedAccounts}
           bold
         />
@@ -157,7 +161,7 @@ export function Accounts({
         }}
         onClick={onAddAccount}
         Icon={SvgAdd}
-        title="Add account"
+        title={t('Add account')}
       />
     </View>
   );

packages/desktop-client/src/components/sidebar/Sidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { Resizable } from 're-resizable';
@@ -38,6 +39,7 @@ import { Tools } from './Tools';
 export function Sidebar() {
   const hasWindowButtons = !Platform.isBrowser && Platform.OS === 'mac';
 
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const sidebar = useSidebar();
   const accounts = useAccounts();
@@ -149,10 +151,10 @@ export function Sidebar() {
         </View>
 
         <View style={{ overflow: 'auto' }}>
-          <Item title="Budget" Icon={SvgWallet} to="/budget" />
-          <Item title="Reports" Icon={SvgReports} to="/reports" />
+          <Item title={t('Budget')} Icon={SvgWallet} to="/budget" />
+          <Item title={t('Reports')} Icon={SvgReports} to="/reports" />
 
-          <Item title="Schedules" Icon={SvgCalendar} to="/schedules" />
+          <Item title={t('Schedules')} Icon={SvgCalendar} to="/schedules" />
 
           <Tools />
 
@@ -177,6 +179,7 @@ export function Sidebar() {
 }
 
 function EditableBudgetName() {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [budgetName, setBudgetNamePref] = useMetadataPref('budgetName');
@@ -205,10 +208,10 @@ function EditableBudgetName() {
   }
 
   const items = [
-    { name: 'rename', text: 'Rename budget' },
-    { name: 'settings', text: 'Settings' },
-    ...(Platform.isBrowser ? [{ name: 'help', text: 'Help' }] : []),
-    { name: 'close', text: 'Close file' },
+    { name: 'rename', text: t('Rename budget') },
+    { name: 'settings', text: t('Settings') },
+    ...(Platform.isBrowser ? [{ name: 'help', text: t('Help') }] : []),
+    { name: 'close', text: t('Close file') },
   ];
 
   if (editing) {
@@ -250,7 +253,7 @@ function EditableBudgetName() {
         onPress={() => setMenuOpen(true)}
       >
         <Text style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
-          {budgetName || 'A budget has no name'}
+          {budgetName || t('A budget has no name')}
         </Text>
         <SvgExpandArrow width={7} height={7} style={{ marginLeft: 5 }} />
       </Button>

packages/desktop-client/src/components/sidebar/ToggleButton.tsx

@@ -1,4 +1,5 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { SvgPin } from '../../icons/v1';
 import { SvgArrowButtonLeft1 } from '../../icons/v2';
@@ -17,11 +18,12 @@ export function ToggleButton({
   isFloating,
   onFloat,
 }: ToggleButtonProps) {
+  const { t } = useTranslation();
   return (
     <View className="float" style={{ ...style, flexShrink: 0 }}>
       <Button
         variant="bare"
-        aria-label={`${isFloating ? 'Pin' : 'Unpin'} sidebar`}
+        aria-label={isFloating ? t('Pin sidebar') : t('Unpin sidebar')}
         onPress={onFloat}
         style={{ color: theme.buttonMenuBorder }}
       >

packages/desktop-client/src/components/sidebar/Tools.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
 import {
@@ -14,6 +15,7 @@ import { Item } from './Item';
 import { SecondaryItem } from './SecondaryItem';
 
 export function Tools() {
+  const { t } = useTranslation();
   const [isOpen, setOpen] = useState(false);
   const onToggle = useCallback(() => setOpen(open => !open), []);
   const location = useLocation();
@@ -40,19 +42,19 @@ export function Tools() {
       {isOpen && (
         <>
           <SecondaryItem
-            title="Payees"
+            title={t('Payees')}
             Icon={SvgStoreFront}
             to="/payees"
             indent={15}
           />
           <SecondaryItem
-            title="Rules"
+            title={t('Rules')}
             Icon={SvgTuning}
             to="/rules"
             indent={15}
           />
           <SecondaryItem
-            title="Settings"
+            title={t('Settings')}
             Icon={SvgCog}
             to="/settings"
             indent={15}

upcoming-release-notes/3302.md

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