merge

bin/package-electron

@@ -34,8 +34,6 @@ if [ "$OSTYPE" == "msys" ]; then
     fi
 fi
 
-yarn rebuild-electron
-
 yarn workspace loot-core build:node
 
 yarn workspace @actual-app/web build --mode=desktop

package.json

@@ -30,6 +30,7 @@
     "build:browser": "./bin/package-browser",
     "build:desktop": "./bin/package-electron",
     "build:api": "yarn workspace @actual-app/api build",
+    "generate:i18n": "yarn workspace @actual-app/web generate:i18n",
     "test": "yarn workspaces foreach --all --parallel --verbose run test",
     "test:debug": "yarn workspaces foreach --all --verbose run test",
     "e2e": "yarn workspaces foreach --all --parallel --verbose run e2e",

packages/desktop-client/e2e/page-models/account-page.js

@@ -31,17 +31,29 @@ export class AccountPage {
   }
 
   /**
-   * Create a single transaction
+   * Enter details of a transaction
    */
-  async createSingleTransaction(transaction) {
+  async enterSingleTransaction(transaction) {
     await this.addNewTransactionButton.click();
-
     await this._fillTransactionFields(this.newTransactionRow, transaction);
+  }
 
+  /**
+   * Finish adding a transaction
+   */
+  async addEnteredTransaction() {
     await this.addTransactionButton.click();
     await this.cancelTransactionButton.click();
   }
 
+  /**
+   * Create a single transaction
+   */
+  async createSingleTransaction(transaction) {
+    await this.enterSingleTransaction(transaction);
+    await this.addEnteredTransaction();
+  }
+
   /**
    * Create split transactions
    */
@@ -82,6 +94,15 @@ export class AccountPage {
    */
   getNthTransaction(index) {
     const row = this.transactionTableRow.nth(index);
+
+    return this._getTransactionDetails(row);
+  }
+
+  getEnteredTransaction() {
+    return this._getTransactionDetails(this.newTransactionRow);
+  }
+
+  _getTransactionDetails(row) {
     const account = row.getByTestId('account');
 
     return {

packages/desktop-client/e2e/transactions.test.js

@@ -141,4 +141,26 @@ test.describe('Transactions', () => {
     await expect(thirdTransaction.credit).toHaveText('');
     await expect(page).toMatchThemeScreenshots();
   });
+
+  test('creates a transfer test transaction', async () => {
+    await accountPage.enterSingleTransaction({
+      payee: 'Bank of America',
+      notes: 'Notes field',
+      debit: '12.34',
+    });
+
+    let transaction = accountPage.getEnteredTransaction();
+    await expect(transaction.category.locator('input')).toHaveValue('Transfer');
+    await expect(page).toMatchThemeScreenshots();
+
+    await accountPage.addEnteredTransaction();
+
+    transaction = accountPage.getNthTransaction(0);
+    await expect(transaction.payee).toHaveText('Bank of America');
+    await expect(transaction.notes).toHaveText('Notes field');
+    await expect(transaction.category).toHaveText('Transfer');
+    await expect(transaction.debit).toHaveText('12.34');
+    await expect(transaction.credit).toHaveText('');
+    await expect(page).toMatchThemeScreenshots();
+  });
 });

packages/desktop-client/i18next-parser.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  input: ['src/**/*.{js,jsx,ts,tsx}', '../loot-core/src/**/*.{js,jsx,ts,tsx}'],
+  output: 'src/locale/$LOCALE.json',
+  locales: ['en'],
+  sort: true,
+  keySeparator: false,
+  namespaceSeparator: false,
+  defaultValue: (locale, ns, key, value) => {
+    if (locale === 'en') {
+      return value || key;
+    }
+    return '';
+  },
+};

packages/desktop-client/package.json

@@ -39,6 +39,9 @@
     "downshift": "7.6.2",
     "focus-visible": "^4.1.5",
     "glamor": "^2.20.40",
+    "i18next": "^23.11.5",
+    "i18next-parser": "^9.0.0",
+    "i18next-resources-to-backend": "^1.2.1",
     "inter-ui": "^3.19.3",
     "jest": "^27.5.1",
     "jest-watch-typeahead": "^2.2.2",
@@ -49,12 +52,14 @@
     "promise-retry": "^2.0.1",
     "re-resizable": "^6.9.17",
     "react": "18.2.0",
+    "react-aria": "^3.33.1",
     "react-aria-components": "^1.2.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.12",
     "react-hotkeys-hook": "^4.5.0",
+    "react-i18next": "^14.1.2",
     "react-markdown": "^8.0.7",
     "react-modal": "3.16.1",
     "react-redux": "7.2.9",
@@ -86,6 +91,7 @@
     "build": "vite build",
     "build:browser": "cross-env ./bin/build-browser",
     "generate:icons": "rm src/icons/*/*.tsx; cd src/icons && svgr --template template.ts --index-template index-template.ts --typescript --expand-props start -d . .",
+    "generate:i18n": "i18next",
     "test": "vitest",
     "e2e": "npx playwright test --browser=chromium",
     "vrt": "cross-env VRT=true npx playwright test --browser=chromium"

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

@@ -6,6 +6,7 @@ import {
   type FallbackProps,
 } from 'react-error-boundary';
 import { HotkeysProvider } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
@@ -22,7 +23,7 @@ import {
   send,
 } from 'loot-core/src/platform/client/fetch';
 
-import { useLocalPref } from '../hooks/useLocalPref';
+import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
 import { ResponsiveProvider } from '../ResponsiveProvider';
 import { styles, hasHiddenScrollbars, ThemeStyle } from '../style';
@@ -41,6 +42,7 @@ type AppInnerProps = {
 };
 
 function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
+  const { t } = useTranslation();
   const [initializing, setInitializing] = useState(true);
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
   const loadingText = useSelector((state: State) => state.app.loadingText);
@@ -51,34 +53,36 @@ function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
 
     dispatch(
       setAppState({
-        loadingText: 'Initializing the connection to the local database...',
+        loadingText: t('Initializing the connection to the local database...'),
       }),
     );
     await initConnection(socketName);
 
     // Load any global prefs
     dispatch(
       setAppState({
-        loadingText: 'Loading global preferences...',
+        loadingText: t('Loading global preferences...'),
       }),
     );
     await dispatch(loadGlobalPrefs());
 
     // Open the last opened budget, if any
     dispatch(
       setAppState({
-        loadingText: 'Opening last budget...',
+        loadingText: t('Opening last budget...'),
       }),
     );
     const budgetId = await send('get-last-opened-backup');
     if (budgetId) {
-      await dispatch(loadBudget(budgetId, 'Loading the last budget file...'));
+      await dispatch(
+        loadBudget(budgetId, t('Loading the last budget file...')),
+      );
 
       // Check to see if this file has been remotely deleted (but
       // don't block on this in case they are offline or something)
       dispatch(
         setAppState({
-          loadingText: 'Retrieving remote files...',
+          loadingText: t('Retrieving remote files...'),
         }),
       );
       send('get-remote-files').then(files => {
@@ -137,8 +141,8 @@ function ErrorFallback({ error }: FallbackProps) {
 }
 
 export function App() {
-  const [budgetId] = useLocalPref('id');
-  const [cloudFileId] = useLocalPref('cloudFileId');
+  const [budgetId] = useMetadataPref('id');
+  const [cloudFileId] = useMetadataPref('cloudFileId');
   const [hiddenScrollbars, setHiddenScrollbars] = useState(
     hasHiddenScrollbars(),
   );

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

@@ -157,6 +157,7 @@ export function Modals() {
           return (
             <ConfirmTransactionDelete
               key={name}
+              message={options.message}
               onConfirm={options.onConfirm}
             />
           );
@@ -341,6 +342,8 @@ export function Modals() {
               key={name}
               transactionIds={options?.transactionIds}
               getTransaction={options?.getTransaction}
+              accountName={options?.accountName}
+              onScheduleLinked={options?.onScheduleLinked}
             />
           );
 

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

@@ -5,12 +5,12 @@ import React, {
   useMemo,
   type SetStateAction,
 } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { removeNotification } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
 import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
 
-import { useActions } from '../hooks/useActions';
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
 import { useResponsive } from '../ResponsiveProvider';
@@ -120,6 +120,11 @@ function Notification({
     [message, messageActions],
   );
 
+  const { isNarrowWidth } = useResponsive();
+  const narrowStyle: CSSProperties = isNarrowWidth
+    ? { minHeight: styles.mobileMinHeight }
+    : {};
+
   return (
     <View
       style={{
@@ -133,10 +138,11 @@ function Notification({
     >
       <Stack
         align="center"
+        justify="space-between"
         direction="row"
         style={{
           padding: '14px 14px',
-          fontSize: 14,
+          ...styles.mediumText,
           backgroundColor: positive
             ? theme.noticeBackgroundLight
             : error
@@ -156,7 +162,15 @@ function Notification({
       >
         <Stack align="flex-start">
           {title && (
-            <View style={{ fontWeight: 700, marginBottom: 10 }}>{title}</View>
+            <View
+              style={{
+                ...styles.mediumText,
+                fontWeight: 700,
+                marginBottom: 10,
+              }}
+            >
+              {title}
+            </View>
           )}
           <View>{processedMessage}</View>
           {pre
@@ -196,7 +210,7 @@ function Notification({
                       : theme.warningBorder
                 }`,
                 color: 'currentColor',
-                fontSize: 14,
+                ...styles.mediumText,
                 flexShrink: 0,
                 ...(isHovered || isPressed
                   ? {
@@ -207,22 +221,21 @@ function Notification({
                           : theme.warningBackground,
                     }
                   : {}),
+                ...narrowStyle,
               })}
             >
               {button.title}
             </ButtonWithLoading>
           )}
         </Stack>
-        {sticky && (
-          <Button
-            variant="bare"
-            aria-label="Close"
-            style={{ flexShrink: 0, color: 'currentColor' }}
-            onPress={onRemove}
-          >
-            <SvgDelete style={{ width: 9, height: 9, color: 'currentColor' }} />
-          </Button>
-        )}
+        <Button
+          variant="bare"
+          aria-label="Close"
+          style={{ flexShrink: 0, color: 'currentColor' }}
+          onPress={onRemove}
+        >
+          <SvgDelete style={{ width: 9, height: 9, color: 'currentColor' }} />
+        </Button>
       </Stack>
       {overlayLoading && (
         <View
@@ -247,18 +260,22 @@ function Notification({
 }
 
 export function Notifications({ style }: { style?: CSSProperties }) {
-  const { removeNotification } = useActions();
+  const dispatch = useDispatch();
   const { isNarrowWidth } = useResponsive();
   const notifications = useSelector(
     (state: State) => state.notifications.notifications,
   );
+  const notificationInset = useSelector(
+    (state: State) => state.notifications.inset,
+  );
   return (
     <View
       style={{
         position: 'fixed',
-        bottom: 20,
-        right: 13,
-        left: isNarrowWidth ? 13 : undefined,
+        bottom: notificationInset?.bottom || 20,
+        top: notificationInset?.top,
+        right: notificationInset?.right || 13,
+        left: notificationInset?.left || (isNarrowWidth ? 13 : undefined),
         zIndex: 10000,
         ...style,
       }}
@@ -271,7 +288,7 @@ export function Notifications({ style }: { style?: CSSProperties }) {
             if (note.onClose) {
               note.onClose();
             }
-            removeNotification(note.id);
+            dispatch(removeNotification(note.id));
           }}
         />
       ))}

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

@@ -9,8 +9,9 @@ import { isDevelopmentEnvironment } from 'loot-core/src/shared/environment';
 
 import { useActions } from '../hooks/useActions';
 import { useGlobalPref } from '../hooks/useGlobalPref';
-import { useLocalPref } from '../hooks/useLocalPref';
+import { useMetadataPref } from '../hooks/useMetadataPref';
 import { useNavigate } from '../hooks/useNavigate';
+import { useSyncedPref } from '../hooks/useSyncedPref';
 import { SvgArrowLeft } from '../icons/v1';
 import {
   SvgAlertTriangle,
@@ -60,7 +61,7 @@ type PrivacyButtonProps = {
 
 function PrivacyButton({ style }: PrivacyButtonProps) {
   const [isPrivacyEnabled, setPrivacyEnabledPref] =
-    useLocalPref('isPrivacyEnabled');
+    useSyncedPref('isPrivacyEnabled');
 
   const privacyIconStyle = { width: 15, height: 15 };
 
@@ -97,7 +98,7 @@ type SyncButtonProps = {
   isMobile?: boolean;
 };
 function SyncButton({ style, isMobile = false }: SyncButtonProps) {
-  const [cloudFileId] = useLocalPref('cloudFileId');
+  const [cloudFileId] = useMetadataPref('cloudFileId');
   const { sync } = useActions();
 
   const [syncing, setSyncing] = useState(false);