From b48d256ec4973fd84a119edc3eaf7c30143c4153 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Thu, 22 Aug 2024 11:23:23 -0500
Subject: [PATCH] Translation: desktop-client/components/sidebar (#3302)
---
.../src/components/sidebar/Accounts.tsx | 14 +++++++++-----
.../src/components/sidebar/Sidebar.tsx | 19 +++++++++++--------
.../src/components/sidebar/ToggleButton.tsx | 4 +++-
.../src/components/sidebar/Tools.tsx | 8 +++++---
upcoming-release-notes/3302.md | 6 ++++++
5 files changed, 34 insertions(+), 17 deletions(-)
create mode 100644 upcoming-release-notes/3302.md
diff --git a/packages/desktop-client/src/components/sidebar/Accounts.tsx b/packages/desktop-client/src/components/sidebar/Accounts.tsx
index 398a7aae9..93ea82d1f 100644
--- a/packages/desktop-client/src/components/sidebar/Accounts.tsx
+++ b/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,7 +64,7 @@ export function Accounts({
return (
<View>
<Account
- name="All accounts"
+ name={t('All accounts')}
to="/accounts"
query={queries.allAccountBalance()}
style={{ fontWeight, marginTop: 15 }}
@@ -70,7 +72,7 @@ export function Accounts({
{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>
);
diff --git a/packages/desktop-client/src/components/sidebar/Sidebar.tsx b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
index 687410eee..7ea8c47f5 100644
--- a/packages/desktop-client/src/components/sidebar/Sidebar.tsx
+++ b/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>
diff --git a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
index bf7c79f5d..e7fddb159 100644
--- a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
+++ b/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 }}
>
diff --git a/packages/desktop-client/src/components/sidebar/Tools.tsx b/packages/desktop-client/src/components/sidebar/Tools.tsx
index 1b6b2c239..28ea8734f 100644
--- a/packages/desktop-client/src/components/sidebar/Tools.tsx
+++ b/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}
diff --git a/upcoming-release-notes/3302.md b/upcoming-release-notes/3302.md
new file mode 100644
index 000000000..cf5de6fcd
--- /dev/null
+++ b/upcoming-release-notes/3302.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Support translations in desktop-client/components/sidebar.
--
GitLab