Translate calendar related strings

packages/desktop-client/src/components/App.tsx

@@ -27,6 +27,7 @@ import {
 } from 'loot-core/src/platform/client/fetch';
 
 import { useMetadataPref } from '../hooks/useMetadataPref';
+import { useSyncLocale } from '../hooks/useSyncLocale';
 import { installPolyfills } from '../polyfills';
 import { useDispatch, useSelector } from '../redux';
 import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
@@ -160,6 +161,8 @@ function ErrorFallback({ error }: FallbackProps) {
 }
 
 export function App() {
+  useSyncLocale();
+
   const [hiddenScrollbars, setHiddenScrollbars] = useState(
     hasHiddenScrollbars(),
   );

packages/desktop-client/src/components/budget/MonthPicker.tsx

@@ -6,6 +6,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { SvgCalendar } from '../../icons/v2';
+import { useSelector } from '../../redux';
 import { styles, theme } from '../../style';
 import { Link } from '../common/Link';
 import { View } from '../common/View';
@@ -27,6 +28,7 @@ export const MonthPicker = ({
   style,
   onSelect,
 }: MonthPickerProps) => {
+  const locale = useSelector(state => state.app.locale);
   const { t } = useTranslation();
   const [hoverId, setHoverId] = useState(null);
   const [targetMonthCount, setTargetMonthCount] = useState(12);
@@ -101,7 +103,7 @@ export const MonthPicker = ({
           </View>
         </Link>
         {range.map((month, idx) => {
-          const monthName = monthUtils.format(month, 'MMM');
+          const monthName = monthUtils.format(month, 'MMM', locale);
           const selected =
             idx >= firstSelectedIndex && idx <= lastSelectedIndex;
 

packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx

@@ -8,6 +8,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { useUndo } from '../../../../hooks/useUndo';
 import { SvgDotsHorizontalTriple } from '../../../../icons/v1';
 import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2';
+import { useSelector } from '../../../../redux';
 import { theme, styles } from '../../../../style';
 import { Button } from '../../../common/Button2';
 import { Popover } from '../../../common/Popover';
@@ -25,6 +26,7 @@ type BudgetSummaryProps = {
   isGoalTemplatesEnabled?: boolean;
 };
 export function BudgetSummary({ month }: BudgetSummaryProps) {
+  const locale = useSelector(state => state.app.locale);
   const {
     currentMonth,
     summaryCollapsed: collapsed,
@@ -44,13 +46,17 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
     setMenuOpen(false);
   }
 
-  const prevMonthName = monthUtils.format(monthUtils.prevMonth(month), 'MMM');
+  const prevMonthName = monthUtils.format(
+    monthUtils.prevMonth(month),
+    'MMM',
+    locale,
+  );
 
   const ExpandOrCollapseIcon = collapsed
     ? SvgArrowButtonDown1
     : SvgArrowButtonUp1;
 
-  const displayMonth = monthUtils.format(month, 'MMMM ‘yy');
+  const displayMonth = monthUtils.format(month, 'MMMM ‘yy', locale);
   const { t } = useTranslation();
 
   return (
@@ -124,7 +130,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
               currentMonth === month && { fontWeight: 'bold' },
             ])}
           >
-            {monthUtils.format(month, 'MMMM')}
+            {monthUtils.format(month, 'MMMM', locale)}
           </div>
 
           <View

packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx

@@ -9,6 +9,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { useUndo } from '../../../../hooks/useUndo';
 import { SvgDotsHorizontalTriple } from '../../../../icons/v1';
 import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2';
+import { useSelector } from '../../../../redux';
 import { theme, styles } from '../../../../style';
 import { Button } from '../../../common/Button2';
 import { Popover } from '../../../common/Popover';
@@ -27,6 +28,7 @@ type BudgetSummaryProps = {
   month?: string;
 };
 export function BudgetSummary({ month }: BudgetSummaryProps) {
+  const locale = useSelector(state => state.app.locale);
   const { t } = useTranslation();
   const {
     currentMonth,
@@ -51,7 +53,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
     ? SvgArrowButtonDown1
     : SvgArrowButtonUp1;
 
-  const displayMonth = monthUtils.format(month, 'MMMM ‘yy');
+  const displayMonth = monthUtils.format(month, 'MMMM ‘yy', locale);
 
   return (
     <View
@@ -120,7 +122,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
               textDecorationSkip: 'ink',
             })}
           >
-            {monthUtils.format(month, 'MMMM')}
+            {monthUtils.format(month, 'MMMM', locale)}
           </div>
 
           <View

packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx

@@ -30,7 +30,7 @@ import {
   SvgCheveronRight,
 } from '../../../icons/v1';
 import { SvgViewShow } from '../../../icons/v2';
-import { useDispatch } from '../../../redux';
+import { useDispatch, useSelector } from '../../../redux';
 import { theme, styles } from '../../../style';
 import { BalanceWithCarryover } from '../../budget/BalanceWithCarryover';
 import { makeAmountGrey, makeBalanceAmountStyle } from '../../budget/util';
@@ -1973,6 +1973,7 @@ function MonthSelector({
   onPrevMonth,
   onNextMonth,
 }) {
+  const locale = useSelector(state => state.app.locale);
   const { t } = useTranslation();
   const prevEnabled = month > monthBounds.start;
   const nextEnabled = month < monthUtils.subMonths(monthBounds.end, 1);
@@ -2017,7 +2018,7 @@ function MonthSelector({
         data-month={month}
       >
         <Text style={styles.underlinedText}>
-          {monthUtils.format(month, 'MMMM ‘yy')}
+          {monthUtils.format(month, 'MMMM ‘yy', locale)}
         </Text>
       </Button>
       <Button

packages/desktop-client/src/components/mobile/budget/CategoryTransactions.tsx

@@ -17,7 +17,7 @@ import {
 
 import { useDateFormat } from '../../../hooks/useDateFormat';
 import { useNavigate } from '../../../hooks/useNavigate';
-import { useDispatch } from '../../../redux';
+import { useDispatch, useSelector } from '../../../redux';
 import { TextOneLine } from '../../common/TextOneLine';
 import { View } from '../../common/View';
 import { MobilePageHeader, Page } from '../../Page';
@@ -34,6 +34,7 @@ export function CategoryTransactions({
   category,
   month,
 }: CategoryTransactionsProps) {
+  const locale = useSelector(state => state.app.locale);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -108,7 +109,7 @@ export function CategoryTransactions({
             <View>
               <TextOneLine>{category.name}</TextOneLine>
               <TextOneLine>
-                ({monthUtils.format(month, 'MMMM ‘yy')})
+                ({monthUtils.format(month, 'MMMM ‘yy', locale)})
               </TextOneLine>
             </View>
           }

packages/desktop-client/src/components/mobile/budget/index.tsx

@@ -23,7 +23,7 @@ import { useCategories } from '../../../hooks/useCategories';
 import { useLocalPref } from '../../../hooks/useLocalPref';
 import { useSyncedPref } from '../../../hooks/useSyncedPref';
 import { AnimatedLoading } from '../../../icons/AnimatedLoading';
-import { useDispatch } from '../../../redux';
+import { useDispatch, useSelector } from '../../../redux';
 import { theme } from '../../../style';
 import { prewarmMonth } from '../../budget/util';
 import { View } from '../../common/View';
@@ -37,6 +37,7 @@ function isBudgetType(input?: string): input is 'rollover' | 'report' {
 }
 
 export function Budget() {
+  const locale = useSelector(state => state.app.locale);
   const { list: categories, grouped: categoryGroups } = useCategories();
   const [budgetTypePref] = useSyncedPref('budgetType');
   const budgetType = isBudgetType(budgetTypePref) ? budgetTypePref : 'rollover';
@@ -438,12 +439,12 @@ export function Budget() {
       dispatch(
         pushModal('notes', {
           id: `budget-${month}`,
-          name: monthUtils.format(month, 'MMMM ‘yy'),
+          name: monthUtils.format(month, 'MMMM ‘yy', locale),
           onSave: onSaveNotes,
         }),
       );
     },
-    [dispatch, onSaveNotes],
+    [dispatch, onSaveNotes, locale],
   );
 
   const onSwitchBudgetFile = useCallback(() => {

packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx

@@ -28,7 +28,7 @@ import { useUndo } from '../../../hooks/useUndo';
 import { AnimatedLoading } from '../../../icons/AnimatedLoading';
 import { SvgDelete } from '../../../icons/v0';
 import { SvgDotsHorizontalTriple } from '../../../icons/v1';
-import { useDispatch } from '../../../redux';
+import { useDispatch, useSelector } from '../../../redux';
 import { styles, theme } from '../../../style';
 import { Button } from '../../common/Button2';
 import { Menu, type MenuItemObject } from '../../common/Menu';
@@ -79,6 +79,7 @@ export function TransactionList({
   isLoadingMore,
   onLoadMore,
 }: TransactionListProps) {
+  const locale = useSelector(state => state.app.locale);
   const { t } = useTranslation();
   const sections = useMemo(() => {
     // Group by date. We can assume transactions is ordered
@@ -169,7 +170,7 @@ export function TransactionList({
                 zIndex: 10,
               }}
             >
-              {monthUtils.format(section.date, 'MMMM dd, yyyy')}
+              {monthUtils.format(section.date, 'MMMM dd, yyyy', locale)}
             </Header>
             <Collection
               items={section.transactions.filter(

packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx

@@ -10,6 +10,7 @@ import { useNotes } from '../../hooks/useNotes';
 import { useUndo } from '../../hooks/useUndo';
 import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
+import { useSelector } from '../../redux';
 import { styles, theme, type CSSProperties } from '../../style';
 import { BudgetMonthMenu } from '../budget/envelope/budgetsummary/BudgetMonthMenu';
 import { Button } from '../common/Button2';
@@ -28,6 +29,7 @@ export function EnvelopeBudgetMonthMenuModal({
   onBudgetAction,
   onEditNotes,
 }: EnvelopeBudgetMonthMenuModalProps) {
+  const locale = useSelector(state => state.app.locale);
   const originalNotes = useNotes(`budget-${month}`);
   const { showUndoNotification } = useUndo();
 
@@ -56,7 +58,7 @@ export function EnvelopeBudgetMonthMenuModal({
     setShowMore(!showMore);
   };
 
-  const displayMonth = monthUtils.format(month, 'MMMM ‘yy');
+  const displayMonth = monthUtils.format(month, 'MMMM ‘yy', locale);
   const { t } = useTranslation();
 
   return (

packages/desktop-client/src/components/modals/EnvelopeBudgetSummaryModal.tsx

@@ -8,7 +8,7 @@ import { format, sheetForMonth, prevMonth } from 'loot-core/src/shared/months';
 
 import { useCategories } from '../../hooks/useCategories';
 import { useUndo } from '../../hooks/useUndo';
-import { useDispatch } from '../../redux';
+import { useDispatch, useSelector } from '../../redux';
 import { styles } from '../../style';
 import { ToBudgetAmount } from '../budget/envelope/budgetsummary/ToBudgetAmount';
 import { TotalsList } from '../budget/envelope/budgetsummary/TotalsList';
@@ -27,8 +27,9 @@ export function EnvelopeBudgetSummaryModal({
 }: EnvelopeBudgetSummaryModalProps) {
   const { t } = useTranslation();
 
+  const locale = useSelector(state => state.app.locale);
   const dispatch = useDispatch();
-  const prevMonthName = format(prevMonth(month), 'MMM');
+  const prevMonthName = format(prevMonth(month), 'MMM', locale);
   const sheetValue =
     useEnvelopeSheetValue({
       name: envelopeBudget.toBudget,

packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx

@@ -9,6 +9,7 @@ import { useSchedules } from 'loot-core/client/data-hooks/schedules';
 import { format } from 'loot-core/shared/months';
 import { q } from 'loot-core/shared/query';
 
+import { useSelector } from '../../redux';
 import { theme, styles } from '../../style';
 import { Menu } from '../common/Menu';
 import {
@@ -27,6 +28,7 @@ export function ScheduledTransactionMenuModal({
   onSkip,
   onPost,
 }: ScheduledTransactionMenuModalProps) {
+  const locale = useSelector(state => state.app.locale);
   const { t } = useTranslation();
   const defaultMenuItemStyle: CSSProperties = {
     ...styles.mobileMenuItem,
@@ -68,7 +70,7 @@ export function ScheduledTransactionMenuModal({
               {t('Scheduled date')}
             </Text>
             <Text style={{ fontSize: 17, fontWeight: 700 }}>
-              {format(schedule?.next_date || '', 'MMMM dd, yyyy')}
+              {format(schedule?.next_date || '', 'MMMM dd, yyyy', locale)}
             </Text>
           </View>
           <ScheduledTransactionMenu

packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx

@@ -10,6 +10,7 @@ import { useNotes } from '../../hooks/useNotes';
 import { useUndo } from '../../hooks/useUndo';
 import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
+import { useSelector } from '../../redux';
 import { type CSSProperties, styles, theme } from '../../style';
 import { BudgetMonthMenu } from '../budget/tracking/budgetsummary/BudgetMonthMenu';
 import { Button } from '../common/Button2';
@@ -28,6 +29,7 @@ export function TrackingBudgetMonthMenuModal({
   onBudgetAction,
   onEditNotes,
 }: TrackingBudgetMonthMenuModalProps) {
+  const locale = useSelector(state => state.app.locale);
   const { t } = useTranslation();
   const originalNotes = useNotes(`budget-${month}`);
   const { showUndoNotification } = useUndo();
@@ -57,7 +59,7 @@ export function TrackingBudgetMonthMenuModal({
     setShowMore(!showMore);
   };
 
-  const displayMonth = monthUtils.format(month, 'MMMM ‘yy');
+  const displayMonth = monthUtils.format(month, 'MMMM ‘yy', locale);
 
   return (
     <Modal

packages/desktop-client/src/components/reports/DateRange.tsx

@@ -5,6 +5,7 @@ import * as d from 'date-fns';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
+import { useSelector } from '../../redux';
 import { theme } from '../../style';
 import { styles } from '../../style/styles';
 import { Block } from '../common/Block';
@@ -26,6 +27,7 @@ function checkDate(date: string) {
 }
 
 export function DateRange({ start, end, type }: DateRangeProps): ReactElement {
+  const locale = useSelector(state => state.app.locale);
   const checkStart = checkDate(start);
   const checkEnd = checkDate(end);
 
@@ -42,8 +44,8 @@ export function DateRange({ start, end, type }: DateRangeProps): ReactElement {
     );
   }
 
-  const formattedStartDate = d.format(startDate, 'MMM yyyy');
-  const formattedEndDate = d.format(endDate, 'MMM yyyy');
+  const formattedStartDate = d.format(startDate, 'MMM yyyy', { locale });
+  const formattedEndDate = d.format(endDate, 'MMM yyyy', { locale });
   let typeOrFormattedEndDate: string;
 
   if (type && ['budget', 'average'].includes(type)) {
@@ -79,7 +81,7 @@ export function DateRange({ start, end, type }: DateRangeProps): ReactElement {
       </div>
     );
   } else {
-    content = d.format(endDate, 'MMMM yyyy');
+    content = d.format(endDate, 'MMMM yyyy', { locale });
   }
 
   return <Block style={{ color: theme.pageTextSubdued }}>{content}</Block>;

packages/desktop-client/src/components/reports/Header.tsx

@@ -8,6 +8,7 @@ import {
 } from 'loot-core/types/models';
 import { type SyncedPrefs } from 'loot-core/types/prefs';
 
+import { useSelector } from '../../redux';
 import { Button } from '../common/Button2';
 import { Select } from '../common/Select';
 import { SpaceBetween } from '../common/SpaceBetween';
@@ -66,6 +67,7 @@ export function Header({
   onConditionsOpChange,
   children,
 }: HeaderProps) {
+  const locale = useSelector(state => state.app.locale);
   const { t } = useTranslation();
   const { isNarrowWidth } = useResponsive();
   function convertToMonth(
@@ -122,7 +124,7 @@ export function Header({
                 )
               }
               value={start}
-              defaultLabel={monthUtils.format(start, 'MMMM, yyyy')}
+              defaultLabel={monthUtils.format(start, 'MMMM, yyyy', locale)}
               options={allMonths.map(({ name, pretty }) => [name, pretty])}
             />
             <View>{t('to')}</View>