Merge remote-tracking branch 'org/master' into plugins-poc

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

@@ -1,11 +1,11 @@
 import React from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import { ManageRules } from './ManageRules';
 import { Page } from './Page';
 
 export function ManageRulesPage() {
+  const { t } = useTranslation();
   return (
     <Page header={t('Rules')}>
       <ManageRules isModal={false} payeeId={null} />

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

@@ -1,9 +1,9 @@
 // @ts-strict-ignore
 import React, { useEffect, useRef, type CSSProperties } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 
 import { css } from '@emotion/css';
-import { t } from 'i18next';
 import remarkGfm from 'remark-gfm';
 
 import { theme } from '../style';
@@ -99,6 +99,7 @@ export function Notes({
   getStyle,
 }: NotesProps) {
   const { isNarrowWidth } = useResponsive();
+  const { t } = useTranslation();
 
   const textAreaRef = useRef<HTMLTextAreaElement>();
 

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

@@ -5,8 +5,7 @@ import React, {
   type ComponentProps,
   type CSSProperties,
 } from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
@@ -36,6 +35,7 @@ export function NotesButton({
   tooltipPosition = 'bottom start',
   style,
 }: NotesButtonProps) {
+  const { t } = useTranslation();
   const triggerRef = useRef(null);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const note = useNotes(id) || '';

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

@@ -6,10 +6,10 @@ import React, {
   type SetStateAction,
   type CSSProperties,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { css } from '@emotion/css';
-import { t } from 'i18next';
 
 import { removeNotification } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
@@ -91,6 +91,7 @@ function Notification({
   notification: NotificationWithId;
   onRemove: () => void;
 }) {
+  const { t } = useTranslation();
   const {
     type,
     title,

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

@@ -1,6 +1,5 @@
 import React, { ReactNode, useEffect, useRef, useState, type CSSProperties } from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import type { Theme } from 'loot-core/src/types/prefs';
 
@@ -25,6 +24,7 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
   const [themeOptionsExtended, setThemeOptionsExtended] = useState(themeOptions);
 
   const { isNarrowWidth } = useResponsive();
+  const { t } = useTranslation();
 
   const baseIcons = {
     light: SvgSun,

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

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, type CSSProperties } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
 import { css } from '@emotion/css';
-import { t } from 'i18next';
 
 import { sync } from 'loot-core/client/actions';
 import * as Platform from 'loot-core/src/client/platform';
@@ -108,6 +108,7 @@ type SyncButtonProps = {
   isMobile?: boolean;
 };
 function SyncButton({ style, isMobile = false }: SyncButtonProps) {
+  const { t } = useTranslation();
   const [cloudFileId] = useMetadataPref('cloudFileId');
   const dispatch = useDispatch();
   const [syncing, setSyncing] = useState(false);
@@ -267,6 +268,7 @@ type TitlebarProps = {
 };
 
 export function Titlebar({ style }: TitlebarProps) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
   const sidebar = useSidebar();

packages/desktop-client/src/components/accounts/AccountSyncCheck.tsx

@@ -1,10 +1,8 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
-import { t } from 'i18next';
-
 import { unlinkAccount } from 'loot-core/client/actions';
 import { type AccountEntity } from 'loot-core/types/models';
 
@@ -17,61 +15,69 @@ import { Link } from '../common/Link';
 import { Popover } from '../common/Popover';
 import { View } from '../common/View';
 
-function getErrorMessage(type: string, code: string) {
-  switch (type.toUpperCase()) {
-    case 'ITEM_ERROR':
-      switch (code.toUpperCase()) {
-        case 'NO_ACCOUNTS':
-          return t(
-            'No open accounts could be found. Did you close the account? If so, unlink the account.',
-          );
-        case 'ITEM_LOGIN_REQUIRED':
-          return t(
-            'Your password or something else has changed with your bank and you need to login again.',
-          );
-        default:
-      }
-      break;
-
-    case 'INVALID_INPUT':
-      switch (code.toUpperCase()) {
-        case 'INVALID_ACCESS_TOKEN':
-          return t('Item is no longer authorized. You need to login again.');
-        default:
-      }
-      break;
-
-    case 'RATE_LIMIT_EXCEEDED':
-      return t('Rate limit exceeded for this item. Please try again later.');
-
-    case 'INVALID_ACCESS_TOKEN':
-      return t(
-        'Your SimpleFIN Access Token is no longer valid. Please reset and generate a new token.',
-      );
-
-    case 'ACCOUNT_NEEDS_ATTENTION':
-      return (
-        <Trans>
-          The account needs your attention at{' '}
-          <Link variant="external" to="https://bridge.simplefin.org/auth/login">
-            SimpleFIN
-          </Link>
-          .
-        </Trans>
-      );
-
-    default:
+function useErrorMessage() {
+  const { t } = useTranslation();
+  function getErrorMessage(type: string, code: string) {
+    switch (type.toUpperCase()) {
+      case 'ITEM_ERROR':
+        switch (code.toUpperCase()) {
+          case 'NO_ACCOUNTS':
+            return t(
+              'No open accounts could be found. Did you close the account? If so, unlink the account.',
+            );
+          case 'ITEM_LOGIN_REQUIRED':
+            return t(
+              'Your password or something else has changed with your bank and you need to login again.',
+            );
+          default:
+        }
+        break;
+
+      case 'INVALID_INPUT':
+        switch (code.toUpperCase()) {
+          case 'INVALID_ACCESS_TOKEN':
+            return t('Item is no longer authorized. You need to login again.');
+          default:
+        }
+        break;
+
+      case 'RATE_LIMIT_EXCEEDED':
+        return t('Rate limit exceeded for this item. Please try again later.');
+
+      case 'INVALID_ACCESS_TOKEN':
+        return t(
+          'Your SimpleFIN Access Token is no longer valid. Please reset and generate a new token.',
+        );
+
+      case 'ACCOUNT_NEEDS_ATTENTION':
+        return (
+          <Trans>
+            The account needs your attention at{' '}
+            <Link
+              variant="external"
+              to="https://bridge.simplefin.org/auth/login"
+            >
+              SimpleFIN
+            </Link>
+            .
+          </Trans>
+        );
+
+      default:
+    }
+
+    return (
+      <Trans>
+        An internal error occurred. Try to login again, or get{' '}
+        <Link variant="external" to="https://actualbudget.org/contact/">
+          in touch
+        </Link>{' '}
+        for support.
+      </Trans>
+    );
   }
 
-  return (
-    <Trans>
-      An internal error occurred. Try to login again, or get{' '}
-      <Link variant="external" to="https://actualbudget.org/contact/">
-        in touch
-      </Link>{' '}
-      for support.
-    </Trans>
-  );
+  return { getErrorMessage };
 }
 
 export function AccountSyncCheck() {
@@ -81,6 +87,7 @@ export function AccountSyncCheck() {
   const { id } = useParams();
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
+  const { getErrorMessage } = useErrorMessage();
 
   const reauth = useCallback(
     (acc: AccountEntity) => {

packages/desktop-client/src/components/common/Modal.tsx

@@ -14,10 +14,10 @@ import {
   Dialog,
 } from 'react-aria-components';
 import { useHotkeysContext } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
 
 import { css } from '@emotion/css';
 import { AutoTextSize } from 'auto-text-size';
-import { t } from 'i18next';
 
 import { useModalState } from '../../hooks/useModalState';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
@@ -54,6 +54,7 @@ export const Modal = ({
   containerProps,
   ...props
 }: ModalProps) => {
+  const { t } = useTranslation();
   const { isNarrowWidth } = useResponsive();
   const { enableScope, disableScope } = useHotkeysContext();
 
@@ -300,6 +301,7 @@ export function ModalHeader({
   title,
   rightContent,
 }: ModalHeaderProps) {
+  const { t } = useTranslation();
   return (
     <View
       role="heading"
@@ -468,6 +470,7 @@ type ModalCloseButtonProps = {
 };
 
 export function ModalCloseButton({ onPress, style }: ModalCloseButtonProps) {
+  const { t } = useTranslation();
   return (
     <Button
       variant="bare"

packages/desktop-client/src/components/mobile/MobileBackButton.tsx

@@ -1,6 +1,5 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import { useNavigate } from '../../hooks/useNavigate';
 import { SvgCheveronLeft } from '../../icons/v1';
@@ -15,6 +14,7 @@ export function MobileBackButton({
   style,
   ...props
 }: MobileBackButtonProps) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   return (
     <Button

packages/desktop-client/src/components/mobile/MobileNavTabs.tsx

@@ -138,10 +138,10 @@ export function MobileNavTabs() {
     <div key={idx} style={navTabStyle} />
   ));
 
-  useScrollListener(({ isScrolling }) => {
-    if (isScrolling('down')) {
+  useScrollListener(({ isScrolling, hasScrolledToEnd }) => {
+    if (isScrolling('down') && !hasScrolledToEnd('up')) {
       hide();
-    } else if (isScrolling('up')) {
+    } else if (isScrolling('up') && !hasScrolledToEnd('down')) {
       openDefault();
     }
   });

packages/desktop-client/src/components/mobile/accounts/Accounts.tsx

@@ -1,8 +1,7 @@
 import React, { type CSSProperties, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { t } from 'i18next';
-
 import { replaceModal, syncAndDownload } from 'loot-core/src/client/actions';
 import * as queries from 'loot-core/src/client/queries';
 import { type AccountEntity } from 'loot-core/types/models';
@@ -163,6 +162,7 @@ function AccountCard({
 }
 
 function EmptyMessage() {
+  const { t } = useTranslation();
   return (
     <View style={{ flex: 1, padding: 30 }}>
       <Text style={styles.text}>
@@ -195,6 +195,7 @@ function AccountList({
   onSelectAccount,
   onSync,
 }: AccountListProps) {
+  const { t } = useTranslation();
   const failedAccounts = useFailedAccounts();
   const syncingAccountIds = useSelector(state => state.account.accountsSyncing);
   const onBudgetAccounts = accounts.filter(account => account.offbudget === 0);