Merge branch 'master' into budget-nohidden

.github/workflows/docker-edge.yml

@@ -33,6 +33,7 @@ env:
 
 jobs:
   build:
+    if: ${{ github.event.repository.fork == false }}
     name: Build Docker image
     runs-on: ubuntu-latest
     strategy:

eslint.config.mjs

@@ -790,20 +790,6 @@ export default [
       'packages/desktop-client/src/components/sidebar/Tools.tsx',
       'packages/desktop-client/src/components/sort.tsx',
       'packages/desktop-client/src/components/spreadsheet/useSheetValue.ts',
-      'packages/desktop-client/src/components/table.tsx',
-      'packages/desktop-client/src/components/Titlebar.tsx',
-      'packages/desktop-client/src/components/transactions/MobileTransaction.jsx',
-      'packages/desktop-client/src/components/transactions/SelectedTransactions.jsx',
-      'packages/desktop-client/src/components/transactions/SimpleTransactionsTable.jsx',
-      'packages/desktop-client/src/components/transactions/TransactionList.jsx',
-      'packages/desktop-client/src/components/transactions/TransactionsTable.jsx',
-      'packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx',
-      'packages/desktop-client/src/hooks/useAccounts.ts',
-      'packages/desktop-client/src/hooks/useCategories.ts',
-      'packages/desktop-client/src/hooks/usePayees.ts',
-      'packages/desktop-client/src/hooks/useProperFocus.tsx',
-      'packages/desktop-client/src/hooks/useSelected.tsx',
-      'packages/loot-core/src/client/query-hooks.tsx',
     ],
 
     rules: {

package.json

@@ -19,7 +19,9 @@
   },
   "scripts": {
     "start": "yarn start:browser",
-    "start:server": "yarn workspace actual-sync start",
+    "start:server": "yarn workspace @actual-app/sync-server start",
+    "start:server-monitor": "yarn workspace @actual-app/sync-server start-monitor",
+    "start:server-dev": "NODE_ENV=development BROWSER_OPEN=localhost:5006 yarn npm-run-all --parallel 'start:server-monitor' 'start'",
     "start:desktop": "yarn rebuild-electron && npm-run-all --parallel 'start:desktop-*'",
     "start:desktop-node": "yarn workspace loot-core watch:node",
     "start:desktop-client": "yarn workspace @actual-app/web watch",
@@ -41,7 +43,7 @@
     "rebuild-node": "yarn workspace loot-core rebuild",
     "lint": "eslint . --max-warnings 0",
     "lint:verbose": "DEBUG=eslint:cli-engine eslint . --max-warnings 0",
-    "install:server": "yarn workspaces focus actual-sync --production",
+    "install:server": "yarn workspaces focus @actual-app/sync-server --production",
     "typecheck": "yarn tsc && tsc-strict",
     "jq": "./node_modules/node-jq/bin/jq",
     "prepare": "husky"

packages/component-library/src/styles.ts

@@ -148,4 +148,10 @@ export const styles: Record<string, any> = {
   lightScrollbar: null as CSSProperties | null,
   darkScrollbar: null as CSSProperties | null,
   scrollbarWidth: null as number | null,
+  editorPill: {
+    color: theme.pillText,
+    backgroundColor: theme.pillBackground,
+    borderRadius: 4,
+    padding: '3px 5px',
+  },
 };

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

@@ -194,7 +194,8 @@ export class AccountPage {
     transaction: TransactionEntry,
   ) {
     if (transaction.debit) {
-      await transactionRow.getByTestId('debit').click();
+      // double click to ensure the content is selected when adding split transactions
+      await transactionRow.getByTestId('debit').dblclick();
       await this.page.keyboard.type(transaction.debit);
       await this.page.keyboard.press('Tab');
     }

packages/desktop-client/package.json

@@ -77,7 +77,7 @@
     "vite": "^5.2.14",
     "vite-plugin-pwa": "^0.20.0",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.6.0",
+    "vitest": "^1.6.1",
     "webpack-bundle-analyzer": "^4.10.1",
     "xml2js": "^0.6.2"
   },

packages/desktop-client/src/auth/ProtectedRoute.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState, type ReactElement } from 'react';
 
+import { View } from '@actual-app/components/view';
+
 import { type RemoteFile, type SyncedLocalFile } from 'loot-core/types/file';
 
-import { View } from '../components/common/View';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { useSelector } from '../redux';
 

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

@@ -1,12 +1,11 @@
 // @ts-strict-ignore
 import React, { type CSSProperties } from 'react';
 
+import { View } from '@actual-app/components/view';
 import { keyframes } from '@emotion/css';
 
 import { SvgRefresh } from '../icons/v1';
 
-import { View } from './common/View';
-
 const spin = keyframes({
   '0%': { transform: 'rotateZ(0deg)' },
   '100%': { transform: 'rotateZ(360deg)' },

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

@@ -11,6 +11,9 @@ import { HotkeysProvider } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
 
+import { styles } from '@actual-app/components/styles';
+import { View } from '@actual-app/components/view';
+
 import {
   addNotification,
   closeBudget,
@@ -25,14 +28,14 @@ import { init as initConnection, send } from 'loot-core/platform/client/fetch';
 
 import { handleGlobalEvents } from '../global-events';
 import { useMetadataPref } from '../hooks/useMetadataPref';
+import { setI18NextLanguage } from '../i18n';
 import { installPolyfills } from '../polyfills';
 import { useDispatch, useSelector, useStore } from '../redux';
-import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
+import { hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 
 import { AppBackground } from './AppBackground';
 import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext';
-import { View } from './common/View';
 import { DevelopmentTopBar } from './DevelopmentTopBar';
 import { FatalError } from './FatalError';
 import { FinancesApp } from './FinancesApp';
@@ -64,6 +67,8 @@ function AppInner() {
     };
 
     async function init() {
+      setI18NextLanguage(null);
+
       const socketName = await maybeUpdate(() =>
         global.Actual.getServerSocket(),
       );

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

@@ -2,12 +2,14 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 import { useTransition, animated } from 'react-spring';
 
+import { styles } from '@actual-app/components/styles';
+import { Text } from '@actual-app/components/text';
+import { View } from '@actual-app/components/view';
+
 import { useSelector } from '../redux';
-import { theme, styles } from '../style';
+import { theme } from '../style';
 
 import { AnimatedRefresh } from './AnimatedRefresh';
-import { Text } from './common/Text';
-import { View } from './common/View';
 
 export function BankSyncStatus() {
   const accountsSyncing = useSelector(state => state.account.accountsSyncing);

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

@@ -1,7 +1,8 @@
+import { View } from '@actual-app/components/view';
+
 import { theme } from '../style';
 
 import { Link } from './common/Link';
-import { View } from './common/View';
 
 export function DevelopmentTopBar() {
   return (

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

@@ -1,12 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { Button } from '@actual-app/components/button';
+import { InitialFocus } from '@actual-app/components/initial-focus';
+import { View } from '@actual-app/components/view';
+
 import { SvgPencil1 } from '../icons/v2';
 import { theme } from '../style';
 
-import { Button } from './common/Button2';
-import { InitialFocus } from './common/InitialFocus';
 import { Input } from './common/Input';
-import { View } from './common/View';
 
 type EditablePageHeaderTitleProps = {
   title: string;

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

@@ -9,6 +9,8 @@ import {
   useHref,
 } from 'react-router-dom';
 
+import { View } from '@actual-app/components/view';
+
 import { addNotification } from 'loot-core/client/actions';
 import { sync } from 'loot-core/client/app/appSlice';
 import * as undo from 'loot-core/platform/client/undo';
@@ -26,7 +28,6 @@ import { getIsOutdated, getLatestVersion } from '../util/versions';
 import { UserAccessPage } from './admin/UserAccess/UserAccessPage';
 import { BankSync } from './banksync';
 import { BankSyncStatus } from './BankSyncStatus';
-import { View } from './common/View';
 import { GlobalKeys } from './GlobalKeys';
 import { ManageRulesPage } from './ManageRulesPage';
 import { Category } from './mobile/budget/Category';

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

@@ -9,10 +9,9 @@ import {
   type CSSProperties,
 } from 'react';
 
+import { View } from '@actual-app/components/view';
 import memoizeOne from 'memoize-one';
 
-import { View } from './common/View';
-
 const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
 
 const defaultItemKey: FixedSizeListProps['itemKey'] = (index: number) => index;

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

@@ -3,6 +3,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
+import { Button } from '@actual-app/components/button';
+import { Menu } from '@actual-app/components/menu';
+import { Popover } from '@actual-app/components/popover';
+import { SpaceBetween } from '@actual-app/components/space-between';
 import { useToggle } from 'usehooks-ts';
 
 import { pushModal } from 'loot-core/client/actions/modals';
@@ -11,11 +15,6 @@ import { useFeatureFlag } from '../hooks/useFeatureFlag';
 import { SvgHelp } from '../icons/v2/Help';
 import { useDispatch } from '../redux';
 
-import { Button } from './common/Button2';
-import { Menu } from './common/Menu';
-import { Popover } from './common/Popover';
-import { SpaceBetween } from './common/SpaceBetween';
-
 const getPageDocs = (page: string) => {
   switch (page) {
     case '/budget':

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

@@ -2,6 +2,13 @@ import React, { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
+import { Button } from '@actual-app/components/button';
+import { Menu } from '@actual-app/components/menu';
+import { Popover } from '@actual-app/components/popover';
+import { styles } from '@actual-app/components/styles';
+import { Text } from '@actual-app/components/text';
+import { View } from '@actual-app/components/view';
+
 import { closeBudget, getUserData, signOut } from 'loot-core/client/actions';
 import { listen } from 'loot-core/platform/client/fetch';
 import { type RemoteFile, type SyncedLocalFile } from 'loot-core/types/file';
@@ -12,13 +19,8 @@ import { Permissions } from '../auth/types';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { useNavigate } from '../hooks/useNavigate';
 import { useSelector, useDispatch } from '../redux';
-import { theme, styles } from '../style';
+import { theme } from '../style';
 
-import { Button } from './common/Button2';
-import { Menu } from './common/Menu';
-import { Popover } from './common/Popover';
-import { Text } from './common/Text';
-import { View } from './common/View';
 import { PrivacyFilter } from './PrivacyFilter';
 import { useMultiuserEnabled, useServerURL } from './ServerContext';
 

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

@@ -9,6 +9,11 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Button } from '@actual-app/components/button';
+import { Stack } from '@actual-app/components/stack';
+import { Text } from '@actual-app/components/text';
+import { View } from '@actual-app/components/view';
+
 import { pushModal } from 'loot-core/client/actions/modals';
 import { useSchedules } from 'loot-core/client/data-hooks/schedules';
 import { initiallyLoadPayees } from 'loot-core/client/queries/queriesSlice';
@@ -27,13 +32,9 @@ import { useSelected, SelectedProvider } from '../hooks/useSelected';
 import { useDispatch } from '../redux';
 import { theme } from '../style';
 
-import { Button } from './common/Button2';
 import { Link } from './common/Link';
 import { Search } from './common/Search';
 import { SimpleTable } from './common/SimpleTable';
-import { Stack } from './common/Stack';
-import { Text } from './common/Text';
-import { View } from './common/View';
 import { RulesHeader } from './rules/RulesHeader';
 import { RulesList } from './rules/RulesList';
 

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

@@ -3,13 +3,13 @@ import React, { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 
+import { Text } from '@actual-app/components/text';
 import { css } from '@emotion/css';
 import remarkGfm from 'remark-gfm';
 
 import { type CSSProperties, theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
-import { Text } from './common/Text';
 import { useResponsive } from './responsive/ResponsiveProvider';
 
 const remarkPlugins = [sequentialNewlinesPlugin, remarkGfm, remarkBreaks];

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

@@ -7,16 +7,17 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Button } from '@actual-app/components/button';
+import { Popover } from '@actual-app/components/popover';
+import { Tooltip } from '@actual-app/components/tooltip';
+import { View } from '@actual-app/components/view';
+
 import { send } from 'loot-core/platform/client/fetch';
 
 import { useNotes } from '../hooks/useNotes';
 import { SvgCustomNotesPaper } from '../icons/v2';
 import { theme } from '../style';
 
-import { Button } from './common/Button2';
-import { Popover } from './common/Popover';
-import { Tooltip } from './common/Tooltip';
-import { View } from './common/View';
 import { Notes } from './Notes';
 
 type NotesButtonProps = {

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

@@ -8,6 +8,11 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Button, ButtonWithLoading } from '@actual-app/components/button';
+import { Stack } from '@actual-app/components/stack';
+import { styles } from '@actual-app/components/styles';
+import { Text } from '@actual-app/components/text';
+import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 
 import { removeNotification } from 'loot-core/client/actions';
@@ -16,13 +21,9 @@ import type { NotificationWithId } from 'loot-core/client/state-types/notificati
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
 import { useSelector, useDispatch } from '../redux';
-import { styles, theme } from '../style';
+import { theme } from '../style';
 
-import { Button, ButtonWithLoading } from './common/Button2';
 import { Link } from './common/Link';
-import { Stack } from './common/Stack';
-import { Text } from './common/Text';
-import { View } from './common/View';
 import { useResponsive } from './responsive/ResponsiveProvider';
 
 function compileMessage(

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

@@ -1,9 +1,11 @@
 import React, { type ReactNode, type CSSProperties } from 'react';
 
-import { theme, styles } from '../style';
+import { styles } from '@actual-app/components/styles';
+import { Text } from '@actual-app/components/text';
+import { View } from '@actual-app/components/view';
+
+import { theme } from '../style';
 
-import { Text } from './common/Text';
-import { View } from './common/View';
 import { useResponsive } from './responsive/ResponsiveProvider';
 
 const HEADER_HEIGHT = 50;

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

@@ -5,11 +5,11 @@ import React, {
   type ReactNode,
 } from 'react';
 
+import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 
 import { usePrivacyMode } from '../hooks/usePrivacyMode';
 
-import { View } from './common/View';
 import { useResponsive } from './responsive/ResponsiveProvider';
 
 type ConditionalPrivacyFilterProps = {