🔖 (25.3.1) (#4497)

* fix negative amount parsing (#4489)

* fix negative amount parsing

* note

* Remove used release notes

* Empty commit to bump ci

* Fix number input on mobile with hidden decimals (#4503)

* Fix number input on mobile with hidden decimals

* Add release notes

* Remove used release notes

* Empty commit to bump ci

* Bump non-server versions

* Bump sync-server

---------

Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.eslintignore

@@ -1,30 +0,0 @@
-packages/api/app/bundle.api.js
-packages/api/dist
-packages/api/migrations
-
-packages/crdt/dist
-
-packages/desktop-client/bundle.browser.js
-packages/desktop-client/build/
-packages/desktop-client/build-stats/
-packages/desktop-client/public/kcab/
-packages/desktop-client/public/data/
-packages/desktop-client/**/node_modules/*
-packages/desktop-client/node_modules/
-packages/desktop-client/src/icons/**/*
-packages/desktop-client/test-results/
-
-packages/desktop-electron/client-build/
-packages/desktop-electron/dist/
-
-packages/import-ynab4/**/node_modules/*
-
-packages/import-ynab5/**/node_modules/*
-
-packages/loot-core/**/node_modules/*
-packages/loot-core/**/lib-dist/*
-packages/loot-core/**/proto/*
-
-packages/node-libofx/libofx.*.js
-packages/node-libofx/libofx/
-packages/node-libofx/OpenSP-*/

.eslintrc.js

@@ -1,275 +0,0 @@
-/* eslint-disable rulesdir/typography */
-const path = require('path');
-
-const rulesDirPlugin = require('eslint-plugin-rulesdir');
-rulesDirPlugin.RULES_DIR = path.join(
-  __dirname,
-  'packages',
-  'eslint-plugin-actual',
-  'lib',
-  'rules',
-);
-
-const ruleFCMsg =
-  'Type the props argument and let TS infer or use ComponentType for a component prop';
-
-const restrictedImportPatterns = [
-  {
-    group: ['*.api', '*.web', '*.electron'],
-    message: 'Don’t directly reference imports from other platforms',
-  },
-  {
-    group: ['uuid'],
-    importNames: ['*'],
-    message: "Use `import { v4 as uuidv4 } from 'uuid'` instead",
-  },
-];
-
-const restrictedImportColors = [
-  {
-    group: ['**/style', '**/colors'],
-    importNames: ['colors'],
-    message: 'Please use themes instead of colors',
-  },
-];
-
-module.exports = {
-  plugins: ['prettier', 'import', 'rulesdir', '@typescript-eslint'],
-  extends: [
-    'react-app',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { project: [path.join(__dirname, './tsconfig.json')] },
-  reportUnusedDisableDirectives: true,
-  rules: {
-    'prettier/prettier': 'warn',
-
-    // Note: base rule explicitly disabled in favor of the TS one
-    'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': [
-      'warn',
-      {
-        args: 'none',
-        varsIgnorePattern: '^_',
-        ignoreRestSiblings: true,
-      },
-    ],
-
-    curly: ['warn', 'multi-line', 'consistent'],
-
-    'no-restricted-globals': ['warn'].concat(
-      require('confusing-browser-globals').filter(g => g !== 'self'),
-    ),
-
-    'react/jsx-no-useless-fragment': 'warn',
-    'react/self-closing-comp': 'warn',
-    'react/no-unstable-nested-components': [
-      'warn',
-      { allowAsProps: true, customValidators: ['formatter'] },
-    ],
-
-    'rulesdir/typography': 'warn',
-    'rulesdir/prefer-if-statement': 'warn',
-
-    // https://github.com/eslint/eslint/issues/16954
-    // https://github.com/eslint/eslint/issues/16953
-    'no-loop-func': 'off',
-
-    // Do don't need this as we're using TypeScript
-    'react/prop-types': 'off',
-
-    // TODO: re-enable these rules
-    'react-hooks/exhaustive-deps': 'off',
-    'react/no-children-prop': 'off',
-    'react/display-name': 'off',
-    'react/react-in-jsx-scope': 'off',
-    // 'react-hooks/exhaustive-deps': [
-    //   'warn',
-    //   {
-    //     additionalHooks: 'useLiveQuery',
-    //   },
-    // ],
-
-    'no-var': 'warn',
-    'object-shorthand': ['warn', 'properties'],
-
-    'import/extensions': [
-      'warn',
-      'never',
-      {
-        json: 'always',
-      },
-    ],
-    'import/no-useless-path-segments': 'warn',
-    'import/no-duplicates': ['warn', { 'prefer-inline': true }],
-    'import/no-unused-modules': ['warn', { unusedExports: true }],
-    'import/order': [
-      'warn',
-      {
-        alphabetize: {
-          caseInsensitive: true,
-          order: 'asc',
-        },
-        groups: [
-          'builtin', // Built-in types are first
-          'external',
-          'parent',
-          'sibling',
-          'index', // Then the index file
-        ],
-        'newlines-between': 'always',
-        pathGroups: [
-          // Enforce that React (and react-related packages) is the first import
-          { group: 'builtin', pattern: 'react?(-*)', position: 'before' },
-          // Separate imports from Actual from "real" external imports
-          {
-            group: 'external',
-            pattern: 'loot-{core,design}/**/*',
-            position: 'after',
-          },
-        ],
-        pathGroupsExcludedImportTypes: ['react'],
-      },
-    ],
-
-    'no-restricted-syntax': [
-      'warn',
-      {
-        // forbid React.* as they are legacy https://twitter.com/dan_abramov/status/1308739731551858689
-        selector:
-          ":matches(MemberExpression[object.name='React'], TSQualifiedName[left.name='React'])",
-        message:
-          'Using default React import is discouraged, please use named exports directly instead.',
-      },
-      {
-        // forbid <a> in favor of <LinkButton> or <ExternalLink>
-        selector: 'JSXOpeningElement[name.name="a"]',
-        message:
-          'Using <a> is discouraged, please use <LinkButton> or <ExternalLink> instead.',
-      },
-    ],
-    'no-restricted-imports': [
-      'warn',
-      { patterns: [...restrictedImportPatterns, ...restrictedImportColors] },
-    ],
-
-    // Rules disable during TS migration
-    '@typescript-eslint/no-var-requires': 'off',
-    'prefer-const': 'off',
-    'prefer-spread': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-  },
-  overrides: [
-    {
-      files: ['.eslintrc.js', './**/.eslintrc.js'],
-      parserOptions: { project: null },
-      rules: {
-        '@typescript-eslint/consistent-type-exports': 'off',
-      },
-    },
-    {
-      files: [
-        './packages/desktop-client/**/*.{ts,tsx}',
-        './packages/loot-core/src/client/**/*.{ts,tsx}',
-      ],
-      rules: {
-        // enforce type over interface
-        '@typescript-eslint/consistent-type-definitions': ['warn', 'type'],
-        // enforce import type
-        '@typescript-eslint/consistent-type-imports': [
-          'warn',
-          { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
-        ],
-        '@typescript-eslint/ban-types': [
-          'warn',
-          {
-            types: {
-              // forbid FC as superflous
-              FunctionComponent: { message: ruleFCMsg },
-              FC: { message: ruleFCMsg },
-            },
-            extendDefaults: true,
-          },
-        ],
-      },
-    },
-    {
-      files: ['./packages/loot-core/src/**/*'],
-      rules: {
-        'no-restricted-imports': [
-          'warn',
-          {
-            patterns: [
-              ...restrictedImportPatterns,
-              {
-                group: ['loot-core/**'],
-                message:
-                  'Please use relative imports in loot-core instead of importing from `loot-core/*`',
-              },
-            ],
-          },
-        ],
-      },
-    },
-    {
-      files: [
-        'packages/loot-core/src/types/**/*',
-        'packages/loot-core/src/client/state-types/**/*',
-        '**/icons/**/*',
-        '**/{mocks,__mocks__}/**/*',
-        // can't correctly resolve usages
-        '**/*.{testing,electron,browser,web,api}.ts',
-      ],
-      rules: { 'import/no-unused-modules': 'off' },
-    },
-    {
-      files: [
-        './packages/desktop-client/src/style/index.*',
-        './packages/desktop-client/src/style/palette.*',
-      ],
-      rules: {
-        'no-restricted-imports': ['off', { patterns: restrictedImportColors }],
-      },
-    },
-    // TODO: Remove this override once we addressed all warnings and enable the rule globally.
-    {
-      files: [
-        './packages/api/*',
-        './packages/api/app/**/*',
-        './packages/crdt/**/*',
-        './packages/desktop-client/src/*',
-        // './packages/desktop-client/src/components/**/*',
-        './packages/desktop-client/src/hooks/**/*',
-        './packages/desktop-client/src/icons/**/*',
-        './packages/desktop-client/src/style/**/*',
-        './packages/desktop-client/src/types/**/*',
-        './packages/desktop-client/src/util/**/*',
-        './packages/desktop-electron/**/*',
-        './packages/eslint-plugin-actual/**/*',
-        './packages/loot-core/*',
-        './packages/loot-core/src/client/**/*',
-        './packages/loot-core/src/mocks/**/*',
-        './packages/loot-core/src/platform/**/*',
-        // './packages/loot-core/src/server/**/*',
-        './packages/loot-core/src/shared/**/*',
-        './packages/loot-core/src/types/**/*',
-        './packages/loot-core/webpack/**/*',
-      ],
-      rules: {
-        'prefer-const': 'warn',
-      },
-    },
-  ],
-  settings: {
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
-    },
-    'import/resolver': {
-      typescript: {
-        alwaysTryTypes: true,
-      },
-    },
-  },
-};

.gitattributes

@@ -16,4 +16,4 @@ yarn.lock text eol=lf
 
 # Denote all files that are truly binary and should not be modified.
 *.png binary
-*.jpg binary
+*.jpg binary

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -8,6 +8,13 @@ body:
     attributes:
       value: |
         Thanks for taking the time to fill out this bug report! Please ensure you provide as much information as possible to better assist in confirming and identifying a fix for the bug.
+  - type: markdown
+    id: intro-md
+    attributes:
+      value: |
+        **IMPORTANT:** we use GitHub Issues only for BUG REPORTS and FEATURE REQUESTS. If you are looking for help/support - please reach out to the [community on Discord](https://discord.gg/pRYNYr4W5A). All non-bug and non-feature-request issues will be closed.
+
+        **Bank-sync problems (SimpleFin / GoCardless)?** Reach out via the [community Discord](https://discord.gg/pRYNYr4W5A) first and open an issue only if the community deems the issue to be a legitimate bug in Actual.
   - type: checkboxes
     id: existing-issue
     attributes:
@@ -28,12 +35,13 @@ body:
     validations:
       required: true
   - type: textarea
-    id: errors-received
+    id: reproduction
     attributes:
-      label: 'What error did you receive?'
-      description: 'If you received an error or a message on the screen, please provide that here.'
+      label: How can we reproduce the issue?
+      description: Please give step-by-step instructions on how to reproduce the issue. In most cases this might also require uploading a sample budget/import file.
+      value: 'How can we reproduce the issue?'
     validations:
-      required: false
+      required: true
   - type: markdown
     id: env-info
     attributes:
@@ -47,6 +55,7 @@ body:
         - Locally via Yarn
         - Docker
         - Fly.io
+        - Pikapods
         - NAS
         - Desktop App (Electron)
         - Other

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1,11 @@
 blank_issues_enabled: false
+contact_links:
+  - name: Bank-sync issues
+    url: https://discord.gg/pRYNYr4W5A
+    about: Is bank-sync not working? Returning too much or too few information? Reach out to the community on Discord.
+  - name: Support
+    url: https://discord.gg/pRYNYr4W5A
+    about: Need help with something? Having troubles setting up? Or perhaps issues using the API? Reach out to the community on Discord.
+  - name: Translations
+    url: https://hosted.weblate.org/projects/actualbudget/actual/
+    about: Found a string that needs a better translation? Add your suggestion or upvote an existing one in Weblate.

.github/actions/bump-package-versions

@@ -0,0 +1,30 @@
+#!/bin/bash
+set -euo pipefail
+
+if [ "$#" -gt 0 ]; then
+    version="${1#v}"
+else
+    version=""
+fi
+
+files_to_bump=(
+    packages/api/package.json
+    packages/desktop-client/package.json
+    packages/desktop-electron/package.json
+)
+
+for file in "${files_to_bump[@]}"; do
+    if [ -z "$version" ]; then
+        # version format: YY.MM.patch
+        # logic: if before the 25th, bump patch, else set minor/major to next month
+        version="$(jq -r .version "$file" | perl -e '($y,$m,$p)=split/\./,<>;$d=(localtime)[3];$d>25?($p=0,++$m,$m>12&&($m=1,++$y)):$p++;print"$y.$m.$p\n"')"
+        if [ -z "$version" ]; then
+            echo "Error: Failed to calculate new version" >&2
+            exit 1
+        fi
+    fi
+
+    echo "Bumping $file to version $version"
+    jq '.version = "'"$version"'"' "$file" > "$file.tmp"
+    mv "$file.tmp" "$file"
+done

.github/actions/setup/action.yml

@@ -1,19 +1,44 @@
 name: Setup
 
+inputs:
+  working-directory:
+    description: 'Working directory to run in, default .'
+    required: false
+    default: '.'
+  download-translations:
+    description: 'Whether to download translations as part of setup, default true'
+    required: false
+    default: 'true'
+
 runs:
   using: composite
   steps:
     - name: Install node
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: 18.16.0
+    - name: Install yarn
+      run: npm install -g yarn
+      shell: bash
+      if: ${{ env.ACT }}
     - name: Cache
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       id: cache
       with:
-        path: '**/node_modules'
-        key: yarn-v1-${{ runner.os }}-${{ hashFiles('.nvmrc') }}-${{ hashFiles('**/yarn.lock') }}
+        path: ${{ format('{0}/**/node_modules', inputs.working-directory) }}
+        key: yarn-v1-${{ runner.os }}-${{ hashFiles(format('{0}/.nvmrc', inputs.working-directory)) }}-${{ hashFiles(format('{0}/**/yarn.lock', inputs.working-directory)) }}
     - name: Install
+      working-directory: ${{ inputs.working-directory }}
       run: yarn --immutable
       shell: bash
       if: steps.cache.outputs.cache-hit != 'true'
+    - name: Download translations
+      uses: actions/checkout@v4
+      with:
+        repository: actualbudget/translations
+        path: ${{ inputs.working-directory }}/packages/desktop-client/locale
+      if: ${{ inputs.download-translations == 'true' }}
+    - name: Remove untranslated languages
+      run: packages/desktop-client/bin/remove-untranslated-languages
+      shell: bash
+      if: ${{ inputs.download-translations == 'true' }}

.github/workflows/build.yml

@@ -21,7 +21,7 @@ jobs:
   api:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Build API
@@ -29,7 +29,7 @@ jobs:
       - name: Create package tgz
         run: cd packages/api && yarn pack && mv package.tgz actual-api.tgz
       - name: Upload Build
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: actual-api
           path: packages/api/actual-api.tgz
@@ -37,7 +37,7 @@ jobs:
   crdt:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Build CRDT
@@ -45,7 +45,7 @@ jobs:
       - name: Create package tgz
         run: cd packages/crdt && yarn pack && mv package.tgz actual-crdt.tgz
       - name: Upload Build
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: actual-crdt
           path: packages/crdt/actual-crdt.tgz
@@ -53,18 +53,32 @@ jobs:
   web:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Build Web
         run: ./bin/package-browser
       - name: Upload Build
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: actual-web
           path: packages/desktop-client/build
       - name: Upload Build Stats
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: build-stats
           path: packages/desktop-client/build-stats
+
+  server:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Server
+        run: cd packages/sync-server && yarn build
+      - name: Upload Build
+        uses: actions/upload-artifact@v4
+        with:
+          name: sync-server
+          path: packages/sync-server/build

.github/workflows/check.yml

@@ -14,7 +14,7 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Lint
@@ -22,7 +22,7 @@ jobs:
   typecheck:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Typecheck
@@ -30,7 +30,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Test
@@ -40,8 +40,8 @@ jobs:
     if: github.event_name == 'pull_request'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '19'
       - name: Check migrations

.github/workflows/codeql.yml

@@ -22,14 +22,14 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: javascript
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3
         with:
           category: '/language:javascript'

.github/workflows/docker-edge.yml

@@ -0,0 +1,90 @@
+name: Build Edge Docker Image
+
+# Edge Docker images are built for every commit, and daily
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'packages/sync-server/**'
+  pull_request:
+    branches:
+      - master
+    paths:
+      - 'packages/sync-server/**'
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  packages: write
+
+env:
+  IMAGES: |
+    actualbudget/actual-server
+    ghcr.io/actualbudget/actual-server
+    ghcr.io/actualbudget/actual
+
+  # Creates the following tags:
+  # - actual-server:edge
+  TAGS: |
+    type=edge,value=edge
+    type=sha
+
+jobs:
+  build:
+    if: ${{ github.event.repository.fork == false }}
+    name: Build Docker image
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        os: [ubuntu, alpine]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          # Push to both Docker Hub and Github Container Registry
+          images: ${{ env.IMAGES }}
+          flavor: ${{ matrix.os != 'ubuntu' && format('suffix=-{0}', matrix.os) || '' }}
+          tags: ${{ env.TAGS }}
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        if: github.event_name != 'pull_request'
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        if: github.event_name != 'pull_request'
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Download artifacts
+        run: ./packages/sync-server/docker/download-artifacts.sh
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          file: packages/sync-server/docker/edge-${{ matrix.os }}.Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7${{ matrix.os == 'alpine' && ',linux/arm/v6' || '' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          build-args: |
+            GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}

.github/workflows/docker-release.yml

@@ -0,0 +1,89 @@
+name: Build Stable Docker Image
+
+# Stable Docker images are built for every new tag
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+    paths-ignore:
+      - README.md
+      - LICENSE.txt
+
+env:
+  IMAGES: |
+    actualbudget/actual-server
+    ghcr.io/actualbudget/actual-server
+    ghcr.io/actualbudget/actual
+
+  # Creates the following tags:
+  # - actual-server:latest (see docker/metadata-action flavor inputs, below)
+  # - actual-server:1.3
+  # - actual-server:1.3.7
+  # - actual-server:sha-90dd603
+  TAGS: |
+    type=semver,pattern={{version}}
+
+jobs:
+  build:
+    name: Build Docker image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          # Push to both Docker Hub and Github Container Registry
+          images: ${{ env.IMAGES }}
+          # Automatically update :latest
+          flavor: latest=true
+          tags: ${{ env.TAGS }}
+
+      - name: Docker meta for Alpine image
+        id: alpine-meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGES }}
+          # Automatically update :latest
+          flavor: |
+            latest=true
+            suffix=-alpine,onlatest=true
+          tags: ${{ env.TAGS }}
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push ubuntu image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          file: packages/sync-server/docker/stable-ubuntu.Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          tags: ${{ steps.meta.outputs.tags }}
+
+      - name: Build and push alpine image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          file: packages/sync-server/docker/stable-alpine.Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+          tags: ${{ steps.alpine-meta.outputs.tags }}

.github/workflows/e2e-test.yml

@@ -1,6 +1,7 @@
 name: E2E Tests
 
-on: [pull_request]
+on:
+  pull_request:
 
 env:
   GITHUB_PR_NUMBER: ${{github.event.pull_request.number}}
@@ -16,7 +17,7 @@ jobs:
     outputs:
       netlify_url: ${{ steps.netlify.outputs.url }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Wait for Netlify build to finish
@@ -31,38 +32,40 @@ jobs:
     needs: netlify
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.37.0-jammy
+      image: mcr.microsoft.com/playwright:v1.41.1-jammy
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Run E2E Tests on Netlify URL
         run: yarn e2e
         env:
           E2E_START_URL: ${{ needs.netlify.outputs.netlify_url }}
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: desktop-client-test-results
           path: packages/desktop-client/test-results/
           retention-days: 30
+          overwrite: true
   vrt:
     name: Visual regression
     needs: netlify
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.37.0-jammy
+      image: mcr.microsoft.com/playwright:v1.41.1-jammy
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Run VRT Tests on Netlify URL
         run: yarn vrt
         env:
           E2E_START_URL: ${{ needs.netlify.outputs.netlify_url }}
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: desktop-client-test-results
           path: packages/desktop-client/test-results/
           retention-days: 30
+          overwrite: true

.github/workflows/electron-master.yml

@@ -0,0 +1,89 @@
+name: Electron Master
+
+defaults:
+  run:
+    shell: bash
+
+env:
+  CI: true
+
+on:
+  push:
+    tags:
+      - v**
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  build:
+    # this is so the assets can be added to the release
+    permissions:
+      contents: write
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          - windows-latest
+          - macos-latest
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v4
+      - if: ${{ startsWith(matrix.os, 'windows') }}
+        run: pip.exe install setuptools
+      - if: ${{ ! startsWith(matrix.os, 'windows') }}
+        run: |
+          mkdir .venv
+          python3 -m venv .venv
+          source .venv/bin/activate
+          python3 -m pip install setuptools
+      - if: ${{ startsWith(matrix.os, 'ubuntu') }}
+        run: |
+          sudo apt-get update
+          sudo apt-get install flatpak -y
+          sudo apt-get install flatpak-builder -y
+          sudo flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
+          sudo flatpak install org.freedesktop.Sdk/x86_64/23.08 -y
+          sudo flatpak install org.freedesktop.Platform/x86_64/23.08 -y
+          sudo flatpak install org.electronjs.Electron2.BaseApp/x86_64/23.08 -y
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Electron for Mac
+        if: ${{ startsWith(matrix.os, 'macos') }}
+        run: ./bin/package-electron
+        env:
+          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+          CSC_LINK: ${{ secrets.CSC_LINK }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+      - name: Build Electron
+        if: ${{ ! startsWith(matrix.os, 'macos') }}
+        run: ./bin/package-electron
+      - name: Upload Build
+        uses: actions/upload-artifact@v4
+        with:
+          name: actual-electron-${{ matrix.os }}
+          path: |
+            packages/desktop-electron/dist/*.dmg
+            packages/desktop-electron/dist/*.exe
+            !packages/desktop-electron/dist/Actual-windows.exe
+            packages/desktop-electron/dist/*.AppImage
+            packages/desktop-electron/dist/*.flatpak
+      - name: Upload Windows Store Build
+        if: ${{ startsWith(matrix.os, 'windows') }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: actual-electron-${{ matrix.os }}-appx
+          path: |
+            packages/desktop-electron/dist/*.appx
+      - name: Add to Release
+        uses: softprops/action-gh-release@v2
+        with:
+          draft: true
+          files: |
+            packages/desktop-electron/dist/*.dmg
+            packages/desktop-electron/dist/*.exe
+            !packages/desktop-electron/dist/Actual-windows.exe
+            packages/desktop-electron/dist/*.AppImage
+            packages/desktop-electron/dist/*.flatpak

.github/workflows/electron-pr.yml

@@ -0,0 +1,65 @@
+name: Electron
+
+defaults:
+  run:
+    shell: bash
+
+env:
+  CI: true
+
+on:
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          - windows-latest
+          - macos-latest
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v4
+      - if: ${{ startsWith(matrix.os, 'windows') }}
+        run: pip.exe install setuptools
+      - if: ${{ ! startsWith(matrix.os, 'windows') }}
+        run: |
+          mkdir .venv
+          python3 -m venv .venv
+          source .venv/bin/activate
+          python3 -m pip install setuptools
+      - if: ${{ startsWith(matrix.os, 'ubuntu') }}
+        run: |
+          sudo apt-get update
+          sudo apt-get install flatpak -y
+          sudo apt-get install flatpak-builder -y
+          sudo flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
+          sudo flatpak install org.freedesktop.Sdk/x86_64/23.08 -y
+          sudo flatpak install org.freedesktop.Platform/x86_64/23.08 -y
+          sudo flatpak install org.electronjs.Electron2.BaseApp/x86_64/23.08 -y
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Electron
+        run: ./bin/package-electron
+      - name: Upload Build
+        uses: actions/upload-artifact@v4
+        with:
+          name: actual-electron-${{ matrix.os }}
+          path: |
+            packages/desktop-electron/dist/*.dmg
+            packages/desktop-electron/dist/*.exe
+            !packages/desktop-electron/dist/Actual-windows.exe
+            packages/desktop-electron/dist/*.AppImage
+            packages/desktop-electron/dist/*.flatpak
+      - name: Upload Windows Store Build
+        if: ${{ startsWith(matrix.os, 'windows') }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: actual-electron-${{ matrix.os }}-appx
+          path: |
+            packages/desktop-electron/dist/*.appx

.github/workflows/electron.yml

@@ -1,46 +0,0 @@
-name: Electron
-
-defaults:
-  run:
-    shell: bash
-
-env:
-  CI: true
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        os:
-          - ubuntu-latest
-          - windows-latest
-          - macos-latest
-    runs-on: ${{ matrix.os }}
-    steps:
-      - uses: actions/checkout@v3
-      - if: ${{ startsWith(matrix.os, 'windows') }}
-        run: pip.exe install setuptools
-      - if: ${{ ! startsWith(matrix.os, 'windows') }}
-        run: python3 -m pip install setuptools
-      - name: Set up environment
-        uses: ./.github/actions/setup
-      - name: Build Electron
-        run: ./bin/package-electron
-      - name: Upload Build
-        uses: actions/upload-artifact@v3
-        with:
-          name: actual-electron-${{ matrix.os }}
-          path: |
-            packages/desktop-electron/dist/*.dmg
-            packages/desktop-electron/dist/*.exe
-            packages/desktop-electron/dist/*.AppImage

.github/workflows/generate-release-pr.yml

@@ -0,0 +1,35 @@
+name: Generate release PR
+
+on:
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: 'Commit or branch to release'
+        required: true
+        default: 'master'
+      version:
+        description: 'Version number for the release (optional)'
+        required: false
+        default: ''
+
+jobs:
+  generate-release-pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.ref }}
+      - name: Bump package versions
+        id: bump_package_versions
+        shell: bash
+        run: |
+          .github/actions/bump-package-versions ${{ github.event.inputs.version }}
+          echo "version=$(jq -r .version packages/desktop-client/package.json)" > $GITHUB_OUTPUT
+      - name: Create PR
+        uses: peter-evans/create-pull-request@v7
+        with:
+          commit-message: '🔖 (${{ steps.bump_package_versions.outputs.version }})'
+          title: '🔖 (${{ steps.bump_package_versions.outputs.version }})'
+          body: 'Generated by [generate-release-pr.yml](../tree/master/.github/workflows/generate-release-pr.yml)'
+          branch: 'release/v${{ steps.bump_package_versions.outputs.version }}'

.github/workflows/i18n-string-extract-master.yml

@@ -0,0 +1,87 @@
+name: Extract and upload i18n strings
+
+on:
+  schedule:
+    # 4am UTC
+    - cron: "0 4 * * *"
+  workflow_dispatch:
+
+jobs:
+  extract-and-upload-i18n-strings:
+    runs-on: ubuntu-latest
+    if: github.repository == 'actualbudget/actual'
+    steps:
+      - name: Check out main repository
+        uses: actions/checkout@v4
+        with:
+          path: actual
+      - name: Set up environment
+        uses: ./actual/.github/actions/setup
+        with:
+          working-directory: actual
+          download-translations: false  # As we'll manually clone instead
+      - name: Configure Git config
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+      - name: Configure i18n client
+        run: |
+          pip install wlc
+
+      - name: Lock translations
+        run: |
+          wlc \
+            --url https://hosted.weblate.org/api/ \
+            --key "${{ secrets.WEBLATE_API_KEY_CI_STRINGS }}" \
+            lock \
+            actualbudget/actual
+
+      - name: Update VCS with latest translations
+        run: |
+          wlc \
+            --url https://hosted.weblate.org/api/ \
+            --key "${{ secrets.WEBLATE_API_KEY_CI_STRINGS }}" \
+            push \
+            actualbudget/actual
+      - name: Check out updated translations
+        uses: actions/checkout@v4
+        with:
+          ssh-key: ${{ secrets.STRING_IMPORT_DEPLOY_KEY }}
+          repository: actualbudget/translations
+          path: translations
+      - name: Generate i18n strings
+        working-directory: actual
+        run: |
+          mkdir -p packages/desktop-client/locale/
+          cp ../translations/en.json packages/desktop-client/locale/
+          yarn generate:i18n
+          if [[ ! -f packages/desktop-client/locale/en.json ]]; then
+            echo "File packages/desktop-client/locale/en.json not found. Ensure the file was generated correctly."
+            exit 1
+          fi
+      - name: Check in new i18n strings
+        working-directory: translations
+        run: |
+          cp ../actual/packages/desktop-client/locale/en.json .
+          git add .
+          if git commit -m "Update source strings"; then
+            git push
+          else
+            echo "No changes to commit"
+          fi
+      - name: Update Weblate with latest translations
+        run: |
+          wlc \
+            --url https://hosted.weblate.org/api/ \
+            --key "${{ secrets.WEBLATE_API_KEY_CI_STRINGS }}" \
+            pull \
+            actualbudget/actual
+
+      - name: Unlock translations
+        if: always()  # Clean up even on failure
+        run: |
+          wlc \
+            --url https://hosted.weblate.org/api/ \
+            --key "${{ secrets.WEBLATE_API_KEY_CI_STRINGS }}" \
+            unlock \
+            actualbudget/actual

.github/workflows/issues-feature-implemented.yml

@@ -24,8 +24,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       # This is not a security concern because we have approved & merged the PR
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '19'
       - name: Handle feature requests

.github/workflows/netlify-release.yml

@@ -0,0 +1,43 @@
+name: Deploy Netlify Release
+
+defaults:
+  run:
+    shell: bash
+
+env:
+  CI: true
+
+on:
+  push:
+    tags:
+      - v**
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Repository Checkout
+        uses: actions/checkout@v4
+    
+      - name: Set up environment
+        uses: ./.github/actions/setup
+    
+      - name: Install Netlify
+        run: npm install netlify-cli@17.10.1 -g
+    
+      - name: Build Actual
+        run: ./bin/package-browser
+
+      - name: Deploy to Netlify
+        id: netlify_deploy
+        run: |
+          netlify deploy \
+            --dir packages/desktop-client/build \
+            --site ${{ secrets.NETLIFY_SITE_ID }} \
+            --auth ${{ secrets.NETLIFY_API_TOKEN }} \
+            --filter @actual-app/web \
+            --prod

.github/workflows/release-notes.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Check release notes
         if: startsWith(github.head_ref, 'release/') == false
         uses: actualbudget/actions/release-notes/check@main

.github/workflows/size-compare.yml

@@ -13,6 +13,9 @@ name: Compare Sizes
 
 on:
   pull_request_target:
+    paths:
+      - 'packages/**'
+      - '!packages/sync-server/**'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -25,7 +28,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Wait for ${{github.base_ref}} build to succeed
-        uses: fountainhead/action-wait-for-check@v1.1.0
+        uses: fountainhead/action-wait-for-check@v1.2.0
         id: master-build
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -33,7 +36,7 @@ jobs:
           ref: ${{github.base_ref}}
 
       - name: Wait for PR build to succeed
-        uses: fountainhead/action-wait-for-check@v1.1.0
+        uses: fountainhead/action-wait-for-check@v1.2.0
         id: wait-for-build
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -46,7 +49,7 @@ jobs:
           echo "Build failed on PR branch or ${{github.base_ref}}"
           exit 1
       - name: Download build artifact from ${{github.base_ref}}
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v6
         id: pr-build
         with:
           branch: ${{github.base_ref}}
@@ -55,25 +58,30 @@ jobs:
           path: base
 
       - name: Download build artifact from PR
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v6
         with:
           pr: ${{github.event.pull_request.number}}
           workflow: build.yml
           name: build-stats
           path: head
+          allow_forks: true
 
       - name: Strip content hashes from stats files
         run: |
+          sed -i -E 's/index\.[0-9a-zA-Z_-]{8,}\./index./g' ./head/web-stats.json
+          sed -i -E 's/\.[0-9a-zA-Z_-]{8,}\.chunk\././g' ./head/web-stats.json
           sed -i -E 's/\.[0-9a-f]{8,}\././g' ./head/*.json
+          sed -i -E 's/index\.[0-9a-zA-Z_-]{8,}\./index./g' ./base/web-stats.json
+          sed -i -E 's/\.[0-9a-zA-Z_-]{8,}\.chunk\././g' ./base/web-stats.json
           sed -i -E 's/\.[0-9a-f]{8,}\././g' ./base/*.json
-      - uses: github/webpack-bundlesize-compare-action@v1.8.2
+      - uses: twk3/rollup-size-compare-action@v1.1.1
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          current-stats-json-path: ./head/desktop-client-stats.json
-          base-stats-json-path: ./base/desktop-client-stats.json
+          current-stats-json-path: ./head/web-stats.json
+          base-stats-json-path: ./base/web-stats.json
           title: desktop-client
 
-      - uses: github/webpack-bundlesize-compare-action@v1.8.2
+      - uses: github/webpack-bundlesize-compare-action@v2.1.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           current-stats-json-path: ./head/loot-core-stats.json

.github/workflows/stale.yml

@@ -7,10 +7,20 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v8
+      - uses: actions/stale@v9
         with:
           stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
           close-pr-message: 'This PR was closed because it has been stalled for 5 days with no activity.'
           days-before-stale: 30
           days-before-close: 5
           days-before-issue-stale: -1
+  stale-wip:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-pr-message: ':wave: Hi! It looks like this PR has not had any changes for a week now. Would you like someone to review this PR? If so - please remove the "[WIP]" prefix from the PR title. That will let the community know that this PR is open for a review.'
+          days-before-stale: 7
+          any-of-labels: ':construction: WIP'
+          days-before-close: -1
+          days-before-issue-stale: -1

.github/workflows/update-vrt.yml

@@ -0,0 +1,115 @@
+name: /update-vrt
+on:
+  issue_comment:
+    types: [ created ]
+
+permissions:
+  pull-requests: read
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.issue.number }}-${{ contains(github.event.comment.body, '/update-vrt') }}
+  cancel-in-progress: true
+
+jobs:
+  update-vrt:
+    name: Update VRT
+    runs-on: ubuntu-latest
+    if: |
+      github.event.issue.pull_request &&
+      contains(github.event.comment.body, '/update-vrt')
+    container:
+      image: mcr.microsoft.com/playwright:v1.41.1-jammy
+    steps:
+      - name: Get PR branch
+#        Until https://github.com/xt0rted/pull-request-comment-branch/issues/322 is resolved we use the forked version
+        uses: gotson/pull-request-comment-branch@head-repo-owner-dist
+        id: comment-branch
+      - uses: actions/checkout@v4
+        with:
+          repository: ${{ steps.comment-branch.outputs.head_owner }}/${{ steps.comment-branch.outputs.head_repo }}
+          ref: ${{ steps.comment-branch.outputs.head_ref }}
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Wait for Netlify build to finish
+        id: netlify
+        env:
+          COMMIT_SHA: ${{ steps.comment-branch.outputs.head_sha }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: ./.github/actions/netlify-wait-for-build
+      - name: Run VRT Tests on Netlify URL
+        run: yarn vrt --update-snapshots
+        env:
+          E2E_START_URL: ${{ steps.netlify.outputs.url }}
+      - name: Create patch
+        run: |
+          git config --system --add safe.directory "*"
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git reset
+          git add "**/*.png"
+          if git diff --staged --quiet; then
+            echo "No changes to commit"
+            exit 0
+          fi
+          git commit -m "Update VRT"
+          git format-patch -1 HEAD --stdout > Update-VRT.patch
+      - uses: actions/upload-artifact@v4
+        with:
+          name: patch
+          path: Update-VRT.patch
+
+  push-patch:
+    runs-on: ubuntu-latest
+    needs: update-vrt
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Get PR branch
+        #        Until https://github.com/xt0rted/pull-request-comment-branch/issues/322 is resolved we use the forked version
+        uses: gotson/pull-request-comment-branch@head-repo-owner-dist
+        id: comment-branch
+      - uses: actions/checkout@v4
+        with:
+          repository: ${{ steps.comment-branch.outputs.head_owner }}/${{ steps.comment-branch.outputs.head_repo }}
+          ref: ${{ steps.comment-branch.outputs.head_ref }}
+      - uses: actions/download-artifact@v4
+        continue-on-error: true
+        with:
+          name: patch
+      - name: Apply patch and push
+        env:
+          BRANCH_NAME: ${{ steps.comment-branch.outputs.head_ref }}
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git apply Update-VRT.patch
+          git add "**/*.png"
+          if git diff --staged --quiet; then
+            echo "No changes to commit"
+            exit 0
+          fi
+          git commit -m "Update VRT"
+          git push origin HEAD:${BRANCH_NAME}
+      - name: Add finished reaction
+        uses: dkershner6/reaction-action@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commentId: ${{ github.event.comment.id }}
+          reaction: "rocket"
+
+  add-starting-reaction:
+    runs-on: ubuntu-latest
+    if: |
+      github.event.issue.pull_request &&
+      contains(github.event.comment.body, '/update-vrt')
+    permissions:
+      pull-requests: write
+    steps:
+      - name: React to comment
+        uses: dkershner6/reaction-action@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commentId: ${{ github.event.comment.id }}
+          reaction: "+1"

.gitignore

@@ -1,28 +1,34 @@
+# Sample Data
 /data/*
 !data/.gitkeep
 /data2
+Actual-*
+**/xcuserdata/*
+export-2020-01-10.csv
+
+# Secrets
+.secret-tokens
+
+# MacOS
+.DS_Store
+
+# Logs
+**/*.log
+
+# JavaScript
+node_modules
 packages/api/dist
+packages/api/@types
 packages/crdt/dist
 packages/desktop-electron/client-build
+packages/desktop-electron/build
 packages/desktop-electron/.electron-symbols
 packages/desktop-electron/dist
 packages/desktop-electron/loot-core
-node_modules
-.DS_Store
-lerna-debug.log
-Actual-*
-.#*
-**/xcuserdata/*
-.secret-tokens
 bundle.desktop.js
 bundle.desktop.js.map
 bundle.mobile.js
 bundle.mobile.js.map
-export-2020-01-10.csv
-.idea
-.vscode
-
-**/*.log
 
 # Yarn
 .pnp.*
@@ -35,3 +41,15 @@ export-2020-01-10.csv
 
 # VSCode
 .vscode
+
+# IntelliJ IDEA
+.idea
+
+# Misc
+.#*
+
+# Local Netlify folder
+.netlify
+
+# build output
+package.tgz

.husky/pre-commit

@@ -0,0 +1 @@
+yarn lint-staged

.secret-tokens.example

@@ -0,0 +1,2 @@
+export APPLE_ID=example@email.com
+export APPLE_APP_SPECIFIC_PASSWORD=password

.yarnrc.yml

@@ -2,6 +2,8 @@ compressionLevel: mixed
 
 enableGlobalCache: false
 
+enableTransparentWorkspaces: false
+
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

README.md

@@ -14,22 +14,40 @@ Want to say thanks? Click the ⭐ at the top of the page.
 
 - Actual [discord](https://discord.gg/pRYNYr4W5A) community.
 - Actual [Community Documentation](https://actualbudget.org/docs)
+- [Frequently asked questions](https://actualbudget.org/docs/faq)
 
 ## Installation
 
-If you are only interested in running the latest version and not contributing to the source code, you don't need to clone this repo. You can get the latest version through npm.
+There are four ways to deploy Actual:
 
-### The easy way: using a server (recommended)
+1. One-click deployment [via PikaPods](https://www.pikapods.com/pods?run=actual) (~1.40 $/month) - recommended for non-technical users
+1. Managed hosting [via Fly.io](https://actualbudget.org/docs/install/fly) (~1.50 $/month)
+1. Self-hosted by using [a Docker image](https://actualbudget.org/docs/install/docker)
+1. Local-only apps - [downloadable Windows, Mac and Linux apps](https://actualbudget.org/download/) you can run on your device
 
-The easiest way to get Actual running is to use the [actual-server](https://github.com/actualbudget/actual-server) project. That is the server for syncing changes across devices, and it comes with the latest version of Actual. The server will provide both the web project and a server for syncing.
+Learn more in the [installation instructions docs](https://actualbudget.org/docs/install/).
 
-You can get up and running quickly and easily by following our [Running Actual Locally Guide](https://actualbudget.org/docs/install/local)
+## Ready to Start Budgeting?
+
+Read about [Envelope budgeting](https://actualbudget.org/docs/getting-started/envelope-budgeting) to know more about the idea behind Actual Budget.
+
+### Are you new to budgeting or want to start fresh?
+
+Check out the community's [Starting Fresh](https://actualbudget.org/docs/getting-started/starting-fresh) guide so you can quickly get up and running!
+
+### Are you migrating from other budgeting apps?
+
+Check out the community's [Migration](https://actualbudget.org/docs/migration/) guide to start jumping on the Actual Budget train!
 
 ## Documentation
 
 We have a wide range of documentation on how to use Actual, this is all available in our [Community Documentation](https://actualbudget.org/docs), this includes topics on Budgeting, Account Management, Tips & Tricks and some documentation for developers.
 
-## Code structure
+## Contributing
+
+Actual is a community driven product. Learn more about [contributing to Actual](https://actualbudget.org/docs/contributing/).
+
+### Code structure
 
 The Actual app is split up into a few packages:
 
@@ -39,15 +57,23 @@ The Actual app is split up into a few packages:
 
 More information on the project structure is available in our [community documentation](https://actualbudget.org/docs/contributing/project-details).
 
-## Feature Requests
+### Feature Requests
 
 Current feature requests can be seen [here](https://github.com/actualbudget/actual/issues?q=is%3Aissue+label%3A%22needs+votes%22+sort%3Areactions-%2B1-desc).
 Vote for your favorite requests by reacting :+1: to the top comment of the request.
 
 To add new feature requests, open a new Issue of the "Feature Request" type.
 
+### Translation
+
+Make Actual Budget accessible to more people by helping with the [Internationalization](https://actualbudget.org/docs/contributing/i18n/) of Actual. We are using a crowd sourcing tool to manage the translations, see our [Weblate Project](https://hosted.weblate.org/projects/actualbudget/). Weblate proudly supports open-source software projects through their [Libre plan](https://weblate.org/en/hosting/#libre). 
+
+## Repo Activity
+
+![Alt](https://repobeats.axiom.co/api/embed/e20537dd8b74956f86736726ccfbc6f0565bec22.svg 'Repobeats analytics image')
+
 ## Sponsors
 
-Thanks to our wonderful sponsors who make Actual budget possible!
+Thanks to our wonderful sponsors who make Actual Budget possible!
 
 <a href="https://www.netlify.com"> <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Deploys by Netlify" /> </a>

bin/docker-start

@@ -10,4 +10,4 @@ if [ ! -d "node_modules" ] || [ "$(ls -A node_modules)" = "" ]; then
     yarn
 fi
 
-yarn start:browser
+BROWSER=0 yarn start:browser

bin/package-browser

@@ -4,6 +4,15 @@ ROOT=`dirname $0`
 
 cd "$ROOT/.."
 
+echo "Updating translations..."
+if ! [ -d packages/desktop-client/locale ]; then
+    git clone https://github.com/actualbudget/translations packages/desktop-client/locale
+fi
+pushd packages/desktop-client/locale > /dev/null
+git pull
+popd > /dev/null
+packages/desktop-client/bin/remove-untranslated-languages
+
 yarn workspace loot-core build:browser
 yarn workspace @actual-app/web build:browser
 

bin/package-electron

@@ -3,7 +3,6 @@
 
 ROOT=`dirname $0`
 RELEASE=""
-RELEASE_NOTES="" # TODO: figure out automation for release notes when we start publishing electron versions
 CI=${CI:-false}
 
 cd "$ROOT/.."
@@ -35,11 +34,19 @@ if [ "$OSTYPE" == "msys" ]; then
     fi
 fi
 
-yarn rebuild-electron
-
 yarn workspace loot-core build:node
 
-yarn workspace @actual-app/web build
+# Get translations
+echo "Updating translations..."
+if ! [ -d packages/desktop-client/locale ]; then
+    git clone https://github.com/actualbudget/translations packages/desktop-client/locale
+fi
+pushd packages/desktop-client/locale > /dev/null
+git pull
+popd > /dev/null
+packages/desktop-client/bin/remove-untranslated-languages
+
+yarn workspace @actual-app/web build --mode=desktop # electron specific build
 
 yarn workspace desktop-electron update-client
 
@@ -47,16 +54,14 @@ yarn workspace desktop-electron update-client
     cd packages/desktop-electron;
     yarn clean;
 
-    export npm_config_better_sqlite3_binary_host="https://static.actualbudget.com/prebuild/better-sqlite3"
-
     if [ "$RELEASE" == "production" ]; then
         if [ -f ../../.secret-tokens ]; then
             source ../../.secret-tokens
         fi
-        yarn build --publish always -c.releaseInfo.releaseNotes="$RELEASE_NOTES" --arm64 --x64
+        yarn build
 
-        echo "\nCreated release with release notes \"$RELEASE_NOTES\""
+        echo "\nCreated release"
     else
-        SKIP_NOTARIZATION=true yarn build --publish never --x64
+        SKIP_NOTARIZATION=true yarn build
     fi
 )

bin/run-vrt

@@ -0,0 +1,32 @@
+#!/bin/sh
+
+# See here for more information: https://github.com/actualbudget/actual/tree/master/packages/desktop-client#visual-regression
+
+if [ ! -d "node_modules" ] || [ "$(ls -A node_modules)" = "" ]; then
+    yarn
+fi
+
+E2E_START_URL="${E2E_START_URL:-https://localhost:3001}"
+VRT_ARGS=""
+
+# Loop through all arguments
+while [ $# -gt 0 ]; do
+    key="$1"
+    case $key in
+        --e2e-start-url)
+            E2E_START_URL="$2"
+            shift
+            ;;
+        *)
+            VRT_ARGS="$VRT_ARGS $1"
+            ;;
+    esac
+    shift
+done
+
+echo "Running VRT tests with the following parameters:"
+echo "E2E_START_URL: $E2E_START_URL"
+echo "VRT_ARGS: $VRT_ARGS"
+
+MSYS_NO_PATHCONV=1 docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash \
+  -c "E2E_START_URL=$E2E_START_URL yarn vrt $VRT_ARGS"

docker-compose.yml

@@ -8,6 +8,8 @@ services:
   actual-development:
     build: .
     image: actual-development
+    environment:
+      - HTTPS
     ports:
       - '3001:3001'
     volumes:

eslint.config.mjs

@@ -0,0 +1,841 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import globals from 'globals';
+
+import pluginImport from 'eslint-plugin-import';
+import pluginJSXA11y from 'eslint-plugin-jsx-a11y';
+import pluginPrettier from 'eslint-plugin-prettier/recommended';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import pluginRulesDir from 'eslint-plugin-rulesdir';
+import pluginTypescript from 'typescript-eslint';
+
+import tsParser from '@typescript-eslint/parser';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+pluginRulesDir.RULES_DIR = path.join(
+  __dirname,
+  'packages',
+  'eslint-plugin-actual',
+  'lib',
+  'rules',
+);
+
+const confusingBrowserGlobals = [
+  // https://github.com/facebook/create-react-app/tree/main/packages/confusing-browser-globals
+  'addEventListener',
+  'blur',
+  'close',
+  'closed',
+  'confirm',
+  'defaultStatus',
+  'defaultstatus',
+  'event',
+  'external',
+  'find',
+  'focus',
+  'frameElement',
+  'frames',
+  'history',
+  'innerHeight',
+  'innerWidth',
+  'length',
+  'location',
+  'locationbar',
+  'menubar',
+  'moveBy',
+  'moveTo',
+  'name',
+  'onblur',
+  'onerror',
+  'onfocus',
+  'onload',
+  'onresize',
+  'onunload',
+  'open',
+  'opener',
+  'opera',
+  'outerHeight',
+  'outerWidth',
+  'pageXOffset',
+  'pageYOffset',
+  'parent',
+  'print',
+  'removeEventListener',
+  'resizeBy',
+  'resizeTo',
+  'screen',
+  'screenLeft',
+  'screenTop',
+  'screenX',
+  'screenY',
+  'scroll',
+  'scrollbars',
+  'scrollBy',
+  'scrollTo',
+  'scrollX',
+  'scrollY',
+  'status',
+  'statusbar',
+  'stop',
+  'toolbar',
+  'top',
+];
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    ignores: [
+      'packages/api/app/bundle.api.js',
+      'packages/api/dist',
+      'packages/api/@types',
+      'packages/api/migrations',
+      'packages/crdt/dist',
+      'packages/desktop-client/bundle.browser.js',
+      'packages/desktop-client/build/',
+      'packages/desktop-client/build-electron/',
+      'packages/desktop-client/build-stats/',
+      'packages/desktop-client/public/kcab/',
+      'packages/desktop-client/public/data/',
+      'packages/desktop-client/**/node_modules/*',
+      'packages/desktop-client/node_modules/',
+      'packages/desktop-client/src/icons/**/*',
+      'packages/desktop-client/test-results/',
+      'packages/desktop-client/playwright-report/',
+      'packages/desktop-electron/client-build/',
+      'packages/desktop-electron/build/',
+      'packages/desktop-electron/dist/',
+      'packages/import-ynab4/**/node_modules/*',
+      'packages/import-ynab5/**/node_modules/*',
+      'packages/loot-core/**/node_modules/*',
+      'packages/loot-core/**/lib-dist/*',
+      'packages/loot-core/**/proto/*',
+      '.yarn/*',
+      '.github/*',
+    ],
+  },
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.commonjs,
+        ...globals.jest,
+        ...globals.node,
+        globalThis: false,
+        vi: true,
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+
+      'import/resolver': {
+        typescript: {
+          alwaysTryTypes: true,
+        },
+      },
+    },
+  },
+  pluginReact.configs.flat.recommended,
+  pluginReact.configs.flat['jsx-runtime'],
+  pluginPrettier,
+  ...pluginTypescript.configs.recommended,
+  pluginImport.flatConfigs.recommended,
+  {
+    plugins: {
+      'react-hooks': pluginReactHooks,
+      'jsx-a11y': pluginJSXA11y,
+      rulesdir: pluginRulesDir,
+    },
+  },
+  {
+    files: ['**/*.{js,ts,jsx,tsx}'],
+    rules: {
+      // http://eslint.org/docs/rules/
+      'array-callback-return': 'warn',
+
+      'default-case': [
+        'warn',
+        {
+          commentPattern: '^no default$',
+        },
+      ],
+
+      curly: ['warn', 'multi-line', 'consistent'],
+      'dot-location': ['warn', 'property'],
+      eqeqeq: ['warn', 'smart'],
+      'new-parens': 'warn',
+      'no-array-constructor': 'warn',
+      'no-caller': 'warn',
+      'no-cond-assign': ['warn', 'except-parens'],
+      'no-const-assign': 'warn',
+      'no-control-regex': 'warn',
+      'no-delete-var': 'warn',
+      'no-dupe-args': 'warn',
+      'no-dupe-class-members': 'warn',
+      'no-dupe-keys': 'warn',
+      'no-duplicate-case': 'warn',
+      'no-empty-character-class': 'warn',
+      'no-empty-pattern': 'warn',
+      'no-eval': 'warn',
+      'no-ex-assign': 'warn',
+      'no-extend-native': 'warn',
+      'no-extra-bind': 'warn',
+      'no-extra-label': 'warn',
+      'no-fallthrough': 'warn',
+      'no-func-assign': 'warn',
+      'no-implied-eval': 'warn',
+      'no-invalid-regexp': 'warn',
+      'no-iterator': 'warn',
+      'no-label-var': 'warn',
+
+      'no-labels': [
+        'warn',
+        {
+          allowLoop: true,
+          allowSwitch: false,
+        },
+      ],
+
+      'no-lone-blocks': 'warn',
+
+      'no-mixed-operators': [
+        'warn',
+        {
+          groups: [
+            ['&', '|', '^', '~', '<<', '>>', '>>>'],
+            ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
+            ['&&', '||'],
+            ['in', 'instanceof'],
+          ],
+
+          allowSamePrecedence: false,
+        },
+      ],
+
+      'no-multi-str': 'warn',
+      'no-global-assign': 'warn',
+      'no-unsafe-negation': 'warn',
+      'no-new-func': 'warn',
+      'no-new-object': 'warn',
+      'no-new-symbol': 'warn',
+      'no-new-wrappers': 'warn',
+      'no-obj-calls': 'warn',
+      'no-octal': 'warn',
+      'no-octal-escape': 'warn',
+      'no-redeclare': 'warn',
+      'no-regex-spaces': 'warn',
+      'no-script-url': 'warn',
+      'no-self-assign': 'warn',
+      'no-self-compare': 'warn',
+      'no-sequences': 'warn',
+      'no-shadow-restricted-names': 'warn',
+      'no-sparse-arrays': 'warn',
+      'no-template-curly-in-string': 'warn',
+      'no-this-before-super': 'warn',
+      'no-throw-literal': 'warn',
+      'no-undef': 'error',
+      'no-unreachable': 'warn',
+
+      'no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+          allowTaggedTemplates: true,
+        },
+      ],
+
+      'no-unused-labels': 'warn',
+
+      'no-use-before-define': [
+        'warn',
+        {
+          functions: false,
+          classes: false,
+          variables: false,
+        },
+      ],
+
+      'no-useless-computed-key': 'warn',
+      'no-useless-concat': 'warn',
+      'no-useless-constructor': 'warn',
+      'no-useless-escape': 'warn',
+
+      'no-useless-rename': [
+        'warn',
+        {
+          ignoreDestructuring: false,
+          ignoreImport: false,
+          ignoreExport: false,
+        },
+      ],
+
+      'no-with': 'warn',
+      'no-whitespace-before-property': 'warn',
+
+      'require-yield': 'warn',
+      'rest-spread-spacing': ['warn', 'never'],
+      strict: ['warn', 'never'],
+      'unicode-bom': ['warn', 'never'],
+      'use-isnan': 'warn',
+      'valid-typeof': 'warn',
+
+      'no-restricted-properties': [
+        'error',
+        {
+          object: 'require',
+          property: 'ensure',
+          message:
+            'Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting',
+        },
+        {
+          object: 'System',
+          property: 'import',
+          message:
+            'Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting',
+        },
+      ],
+
+      'getter-return': 'warn',
+
+      // https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules
+      'import/first': 'error',
+      'import/no-amd': 'error',
+      'import/no-anonymous-default-export': 'warn',
+      'import/no-webpack-loader-syntax': 'error',
+      'import/extensions': [
+        'warn',
+        'never',
+        {
+          json: 'always',
+        },
+      ],
+      'import/no-useless-path-segments': 'warn',
+      'import/no-duplicates': [
+        'warn',
+        {
+          'prefer-inline': true,
+        },
+      ],
+      'import/order': [
+        'warn',
+        {
+          alphabetize: {
+            caseInsensitive: true,
+            order: 'asc',
+          },
+
+          groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
+          'newlines-between': 'always',
+
+          pathGroups: [
+            {
+              // Enforce that React (and react-related packages) is the first import
+              group: 'builtin',
+              pattern: 'react?(-*)',
+              position: 'before',
+            },
+            {
+              // Separate imports from Actual from "real" external imports
+              group: 'external',
+              pattern: 'loot-{core,design}/**/*',
+              position: 'after',
+            },
+          ],
+
+          pathGroupsExcludedImportTypes: ['react'],
+        },
+      ],
+
+      // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
+      'react/forbid-foreign-prop-types': [
+        'warn',
+        {
+          allowInPropTypes: true,
+        },
+      ],
+      'react/jsx-no-comment-textnodes': 'warn',
+      'react/jsx-no-duplicate-props': 'warn',
+      'react/jsx-no-target-blank': 'warn',
+      'react/jsx-no-undef': 'error',
+      'react/jsx-pascal-case': [
+        'warn',
+        {
+          allowAllCaps: true,
+          ignore: [],
+        },
+      ],
+      'react/no-danger-with-children': 'warn',
+      // Disabled because of undesirable warnings
+      // See https://github.com/facebook/create-react-app/issues/5204 for
+      // blockers until its re-enabled
+      // 'react/no-deprecated': 'warn',
+      'react/no-direct-mutation-state': 'warn',
+      'react/no-is-mounted': 'warn',
+      'react/no-typos': 'error',
+      'react/require-render-return': 'error',
+      'react/style-prop-object': 'warn',
+      'react/jsx-no-useless-fragment': 'warn',
+      'react/self-closing-comp': 'warn',
+      'react/jsx-filename-extension': [
+        'warn',
+        {
+          extensions: ['.jsx', '.tsx'],
+          allow: 'as-needed',
+        },
+      ],
+      'react/no-unstable-nested-components': [
+        'warn',
+        {
+          allowAsProps: true,
+          customValidators: ['formatter'],
+        },
+      ],
+      // Don't need this as we're using TypeScript
+      'react/prop-types': 'off',
+
+      // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
+      'jsx-a11y/alt-text': 'warn',
+      'jsx-a11y/anchor-has-content': 'warn',
+      'jsx-a11y/anchor-is-valid': [
+        'warn',
+        {
+          aspects: ['noHref', 'invalidHref'],
+        },
+      ],
+      'jsx-a11y/aria-activedescendant-has-tabindex': 'warn',
+      'jsx-a11y/aria-props': 'warn',
+      'jsx-a11y/aria-proptypes': 'warn',
+      'jsx-a11y/aria-role': [
+        'warn',
+        {
+          ignoreNonDOM: true,
+        },
+      ],
+      'jsx-a11y/aria-unsupported-elements': 'warn',
+      'jsx-a11y/heading-has-content': 'warn',
+      'jsx-a11y/iframe-has-title': 'warn',
+      'jsx-a11y/img-redundant-alt': 'warn',
+      'jsx-a11y/no-access-key': 'warn',
+      'jsx-a11y/no-distracting-elements': 'warn',
+      'jsx-a11y/no-redundant-roles': 'warn',
+      'jsx-a11y/role-has-required-aria-props': 'warn',
+      'jsx-a11y/role-supports-aria-props': 'warn',
+      'jsx-a11y/scope': 'warn',
+
+      // https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': [
+        'warn',
+        {
+          additionalHooks: '(useQuery)',
+        },
+      ],
+
+      'rulesdir/typography': 'warn',
+      'rulesdir/prefer-if-statement': 'warn',
+
+      // Note: base rule explicitly disabled in favor of the TS one
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          varsIgnorePattern: '^(_|React)',
+          ignoreRestSiblings: true,
+          caughtErrors: 'none',
+        },
+      ],
+
+      'no-restricted-globals': ['warn', ...confusingBrowserGlobals],
+
+      // https://github.com/eslint/eslint/issues/16954
+      // https://github.com/eslint/eslint/issues/16953
+      'no-loop-func': 'off',
+
+      // TODO: re-enable these rules
+      'react/react-in-jsx-scope': 'off',
+      'no-var': 'warn',
+      'react/jsx-curly-brace-presence': 'warn',
+      'object-shorthand': ['warn', 'properties'],
+
+      'no-restricted-syntax': [
+        'warn',
+        {
+          // forbid React.* as they are legacy https://twitter.com/dan_abramov/status/1308739731551858689
+          selector:
+            ":matches(MemberExpression[object.name='React'], TSQualifiedName[left.name='React'])",
+          message:
+            'Using default React import is discouraged, please use named exports directly instead.',
+        },
+        {
+          // forbid <a> in favor of <Link>
+          selector: 'JSXOpeningElement[name.name="a"]',
+          message: 'Using <a> is discouraged, please use <Link> instead.',
+        },
+      ],
+
+      'no-restricted-imports': [
+        'warn',
+        {
+          patterns: [
+            {
+              group: ['*.api', '*.web', '*.electron'],
+              message: "Don't directly reference imports from other platforms",
+            },
+            {
+              group: ['uuid'],
+              importNames: ['*'],
+              message: "Use `import { v4 as uuidv4 } from 'uuid'` instead",
+            },
+            {
+              group: ['**/style', '**/colors'],
+              importNames: ['colors'],
+              message: 'Please use themes instead of colors',
+            },
+          ],
+        },
+      ],
+
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          'ts-ignore': 'allow-with-description',
+        },
+      ],
+
+      // Rules disabled during TS migration
+      '@typescript-eslint/no-var-requires': 'off',
+      'prefer-const': 'warn',
+      'prefer-spread': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-require-imports': 'off',
+      'import/no-default-export': 'warn',
+    },
+  },
+  {
+    files: ['**/*.ts?(x)'],
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2018,
+      sourceType: 'module',
+
+      parserOptions: {
+        project: [path.join(__dirname, './tsconfig.json')],
+        ecmaFeatures: {
+          jsx: true,
+        },
+
+        // typescript-eslint specific options
+        warnOnUnsupportedTypeScriptVersion: true,
+      },
+    },
+
+    // If adding a typescript-eslint version of an existing ESLint rule,
+    // make sure to disable the ESLint rule here.
+    rules: {
+      // TypeScript's `noFallthroughCasesInSwitch` option is more robust (#6906)
+      'default-case': 'off',
+      // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/291)
+      'no-dupe-class-members': 'off',
+      // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/477)
+      'no-undef': 'off',
+
+      // Add TypeScript specific rules (and turn off ESLint equivalents)
+      '@typescript-eslint/consistent-type-assertions': 'warn',
+      'no-array-constructor': 'off',
+      '@typescript-eslint/no-array-constructor': 'warn',
+      'no-redeclare': 'off',
+      '@typescript-eslint/no-redeclare': 'warn',
+      'no-use-before-define': 'off',
+
+      '@typescript-eslint/no-use-before-define': [
+        'warn',
+        {
+          functions: false,
+          classes: false,
+          variables: false,
+          typedefs: false,
+        },
+      ],
+
+      'no-unused-expressions': 'off',
+
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+          allowTaggedTemplates: true,
+        },
+      ],
+
+      'no-useless-constructor': 'off',
+      '@typescript-eslint/no-useless-constructor': 'warn',
+    },
+  },
+  {
+    files: [
+      'packages/desktop-client/**/*.{ts,tsx}',
+      'packages/loot-core/src/client/**/*.{ts,tsx}',
+    ],
+    rules: {
+      // enforce import type
+      '@typescript-eslint/consistent-type-imports': [
+        'warn',
+        {
+          prefer: 'type-imports',
+          fixStyle: 'inline-type-imports',
+        },
+      ],
+
+      '@typescript-eslint/no-restricted-types': [
+        'warn',
+        {
+          types: {
+            // forbid FC as superflous
+            FunctionComponent: {
+              message:
+                'Type the props argument and let TS infer or use ComponentType for a component prop',
+            },
+
+            FC: {
+              message:
+                'Type the props argument and let TS infer or use ComponentType for a component prop',
+            },
+          },
+        },
+      ],
+    },
+  },
+  {
+    files: ['packages/desktop-client/**/*'],
+    ignores: ['packages/desktop-client/src/hooks/useNavigate.{ts,tsx}'],
+
+    rules: {
+      'no-restricted-imports': [
+        'warn',
+        {
+          paths: [
+            {
+              name: 'react-router-dom',
+              importNames: ['useNavigate'],
+              message:
+                "Please import Actual's useNavigate() hook from `src/hooks` instead.",
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: ['packages/desktop-client/**/*', 'packages/loot-core/**/*'],
+    ignores: ['packages/desktop-client/src/redux/index.{ts,tsx}'],
+
+    rules: {
+      'no-restricted-imports': [
+        'warn',
+        {
+          paths: [
+            {
+              name: 'react-redux',
+              importNames: ['useDispatch'],
+              message:
+                "Please import Actual's useDispatch() hook from `src/redux` instead.",
+            },
+            {
+              name: 'react-redux',
+              importNames: ['useSelector'],
+              message:
+                "Please import Actual's useSelector() hook from `src/redux` instead.",
+            },
+            {
+              name: 'react-redux',
+              importNames: ['useStore'],
+              message:
+                "Please import Actual's useStore() hook from `src/redux` instead.",
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: ['packages/loot-core/src/**/*'],
+    rules: {
+      'no-restricted-imports': [
+        'warn',
+        {
+          patterns: [
+            {
+              group: ['*.api', '*.web', '*.electron'],
+              message: "Don't directly reference imports from other platforms",
+            },
+            {
+              group: ['uuid'],
+              importNames: ['*'],
+              message: "Use `import { v4 as uuidv4 } from 'uuid'` instead",
+            },
+            {
+              group: ['loot-core/**'],
+              message:
+                'Please use relative imports in loot-core instead of importing from `loot-core/*`',
+            },
+            {
+              group: ['@actual-app/web/*'],
+              message: 'Please do not import `@actual-app/web` in `loot-core`',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: [
+      'packages/loot-core/src/types/**/*',
+      'packages/loot-core/src/client/state-types/**/*',
+      '**/icons/**/*',
+      '**/{mocks,__mocks__}/**/*',
+      // can't correctly resolve usages
+      '**/*.{testing,electron,browser,web,api}.ts',
+    ],
+
+    rules: {
+      'import/no-unused-modules': 'off',
+    },
+  },
+  {
+    files: [
+      'packages/desktop-client/src/style/index.*',
+      'packages/desktop-client/src/style/palette.*',
+    ],
+
+    rules: {
+      'no-restricted-imports': [
+        'off',
+        {
+          patterns: [
+            {
+              group: ['**/style', '**/colors'],
+              importNames: ['colors'],
+              message: 'Please use themes instead of colors',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: ['packages/api/migrations/*', 'packages/loot-core/migrations/*'],
+
+    rules: {
+      'import/no-default-export': 'off',
+    },
+  },
+  {
+    files: ['packages/api/index.ts'],
+    rules: {
+      'import/no-unresolved': 'off',
+    },
+  },
+  {},
+  {
+    // TODO: fix the issues in these files
+    files: [
+      'packages/desktop-client/src/components/accounts/Account.jsx',
+      'packages/desktop-client/src/components/accounts/MobileAccount.jsx',
+      'packages/desktop-client/src/components/accounts/MobileAccounts.jsx',
+      'packages/desktop-client/src/components/budget/BudgetCategories.jsx',
+      'packages/desktop-client/src/components/budget/BudgetSummaries.tsx',
+      'packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx',
+      'packages/desktop-client/src/components/budget/index.tsx',
+      'packages/desktop-client/src/components/budget/MobileBudget.tsx',
+      'packages/desktop-client/src/components/budget/envelope/HoldMenu.tsx',
+      'packages/desktop-client/src/components/budget/envelope/TransferMenu.tsx',
+      'packages/component-library/src/Menu.tsx',
+      'packages/desktop-client/src/components/FinancesApp.tsx',
+      'packages/desktop-client/src/components/GlobalKeys.ts',
+      'packages/desktop-client/src/components/LoggedInUser.tsx',
+      'packages/desktop-client/src/components/manager/ManagementApp.jsx',
+      'packages/desktop-client/src/components/manager/subscribe/common.tsx',
+      'packages/desktop-client/src/components/ManageRules.tsx',
+      'packages/desktop-client/src/components/mobile/MobileAmountInput.jsx',
+      'packages/desktop-client/src/components/mobile/MobileNavTabs.tsx',
+      'packages/desktop-client/src/components/Modals.tsx',
+      'packages/desktop-client/src/components/modals/EditRule.jsx',
+      'packages/desktop-client/src/components/modals/ImportTransactions.jsx',
+      'packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx',
+      'packages/desktop-client/src/components/Notifications.tsx',
+      'packages/desktop-client/src/components/payees/ManagePayees.jsx',
+      'packages/desktop-client/src/components/payees/ManagePayeesWithData.jsx',
+      'packages/desktop-client/src/components/payees/PayeeTable.tsx',
+      'packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx',
+      'packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx',
+      'packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx',
+      'packages/desktop-client/src/components/reports/reports/CustomReport.jsx',
+      'packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx',
+      'packages/desktop-client/src/components/reports/SaveReportName.tsx',
+      'packages/desktop-client/src/components/reports/useReport.ts',
+      'packages/desktop-client/src/components/schedules/ScheduleDetails.jsx',
+      'packages/desktop-client/src/components/schedules/SchedulesTable.tsx',
+      'packages/desktop-client/src/components/select/DateSelect.tsx',
+      'packages/desktop-client/src/components/sidebar/Tools.tsx',
+      'packages/desktop-client/src/components/sort.tsx',
+      'packages/desktop-client/src/components/spreadsheet/useSheetValue.ts',
+    ],
+
+    rules: {
+      'react-hooks/exhaustive-deps': 'off',
+    },
+  },
+  {
+    files: [
+      'eslint.config.mjs',
+      '**/*.test.js',
+      '**/*.test.ts',
+      '**/*.test.jsx',
+      '**/*.test.tsx',
+      '**/*.spec.js',
+    ],
+
+    rules: {
+      'rulesdir/typography': 'off',
+    },
+  },
+  {
+    files: [
+      'packages/desktop-client/**/*.{ts,tsx}',
+      'packages/loot-core/src/client/**/*.{ts,tsx}',
+    ],
+    ignores: ['**/**/globals.d.ts'],
+    rules: {
+      // enforce type over interface
+      '@typescript-eslint/consistent-type-definitions': ['warn', 'type'],
+    },
+  },
+  {
+    files: ['packages/sync-server/**/*'],
+    // TODO: fix the issues in these files
+    rules: {
+      'import/extensions': 'off',
+      'rulesdir/typography': 'off',
+    },
+  },
+  {
+    files: ['packages/sync-server/src/app-gocardless/banks/*.js'],
+    rules: {
+      'import/no-anonymous-default-export': 'off',
+      'import/no-default-export': 'off',
+      // can be re-enabled after https://github.com/actualbudget/actual/pull/4253
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+];

package.json

@@ -19,6 +19,9 @@
   },
   "scripts": {
     "start": "yarn start:browser",
+    "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",
@@ -30,37 +33,54 @@
     "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",
     "vrt": "yarn workspaces foreach --all --parallel --verbose run vrt",
+    "vrt:docker": "./bin/run-vrt",
     "rebuild-electron": "./node_modules/.bin/electron-rebuild -f -m ./packages/loot-core",
     "rebuild-node": "yarn workspace loot-core rebuild",
     "lint": "eslint . --max-warnings 0",
     "lint:verbose": "DEBUG=eslint:cli-engine eslint . --max-warnings 0",
-    "typecheck": "yarn tsc",
-    "jq": "./node_modules/node-jq/bin/jq"
+    "install:server": "yarn workspaces focus @actual-app/sync-server --production",
+    "typecheck": "yarn tsc && tsc-strict",
+    "jq": "./node_modules/node-jq/bin/jq",
+    "prepare": "husky"
   },
   "devDependencies": {
+    "@typescript-eslint/parser": "^8.18.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.37.0",
-    "eslint-config-react-app": "7.0.1",
-    "eslint-import-resolver-typescript": "3.5.5",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-rulesdir": "^0.2.2",
+    "globals": "^15.13.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.9",
     "node-jq": "^4.0.1",
-    "npm-run-all": "^4.1.3",
-    "prettier": "2.8.2",
-    "react-refresh": "^0.14.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.4.2",
     "source-map-support": "^0.5.21",
-    "typescript": "^5.0.2"
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.18.1",
+    "typescript-strict-plugin": "^2.4.4"
+  },
+  "resolutions": {
+    "rollup": "4.9.4"
   },
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "yarn@4.0.1",
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,md,json}": "prettier --write"
+  },
+  "packageManager": "yarn@4.3.1",
   "browserslist": [
     "electron 24.0",
     "defaults"

packages/api/.gitignore

@@ -2,3 +2,4 @@ app/bundle.api.js*
 app/stats.json
 migrations
 default-db.sqlite
+mocks/budgets/**/*

packages/api/__snapshots__/methods.test.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`API setup and teardown successfully loads budget 1`] = `
+Array [
+  "2016-10",
+  "2016-11",
+  "2016-12",
+  "2017-01",
+  "2017-02",
+  "2017-03",
+  "2017-04",
+  "2017-05",
+  "2017-06",
+  "2017-07",
+  "2017-08",
+  "2017-09",
+  "2017-10",
+  "2017-11",
+  "2017-12",
+]
+`;

packages/api/app/query.js

@@ -99,6 +99,6 @@ class Query {
   }
 }
 
-export default function q(table) {
+export function q(table) {
   return new Query({ table });
 }

packages/api/index.js

@@ -1,40 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-
-// eslint-disable-next-line import/extensions
-import * as bundle from './app/bundle.api.js';
-import * as injected from './injected';
-import { validateNodeVersion } from './validateNodeVersion';
-
-let actualApp;
-export const internal = bundle.lib;
-
-// DEPRECATED: remove the next line in @actual-app/api v7
-export * as methods from './methods';
-
-export * from './methods';
-export * as utils from './utils';
-
-export async function init(config = {}) {
-  if (actualApp) {
-    return;
-  }
-
-  validateNodeVersion();
-
-  global.fetch = (...args) =>
-    import('node-fetch').then(({ default: fetch }) => fetch(...args));
-
-  await bundle.init(config);
-  actualApp = bundle.lib;
-
-  injected.override(bundle.lib.send);
-  return bundle.lib;
-}
-
-export async function shutdown() {
-  if (actualApp) {
-    await actualApp.send('sync');
-    await actualApp.send('close-budget');
-    actualApp = null;
-  }
-}

packages/api/index.ts

@@ -0,0 +1,49 @@
+import type {
+  RequestInfo as FetchInfo,
+  RequestInit as FetchInit,
+} from 'node-fetch';
+
+// loot-core types
+import type { InitConfig } from 'loot-core/server/main';
+
+// @ts-ignore: bundle not available until we build it
+// eslint-disable-next-line import/extensions
+import * as bundle from './app/bundle.api.js';
+import * as injected from './injected';
+import { validateNodeVersion } from './validateNodeVersion';
+
+let actualApp: null | typeof bundle.lib;
+export const internal = bundle.lib;
+
+export * from './methods';
+export * as utils from './utils';
+
+export async function init(config: InitConfig = {}) {
+  if (actualApp) {
+    return;
+  }
+
+  validateNodeVersion();
+
+  if (!globalThis.fetch) {
+    globalThis.fetch = (url: URL | RequestInfo, init?: RequestInit) => {
+      return import('node-fetch').then(({ default: fetch }) =>
+        fetch(url as unknown as FetchInfo, init as unknown as FetchInit),
+      ) as unknown as Promise<Response>;
+    };
+  }
+
+  await bundle.init(config);
+  actualApp = bundle.lib;
+
+  injected.override(bundle.lib.send);
+  return bundle.lib;
+}
+
+export async function shutdown() {
+  if (actualApp) {
+    await actualApp.send('sync');
+    await actualApp.send('close-budget');
+    actualApp = null;
+  }
+}

packages/api/jest.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  moduleFileExtensions: [
+    'testing.js',
+    'testing.ts',
+    'api.js',
+    'api.ts',
+    'api.tsx',
+    'electron.js',
+    'electron.ts',
+    'mjs',
+    'js',
+    'ts',
+    'tsx',
+    'json',
+  ],
+  testEnvironment: 'node',
+  testPathIgnorePatterns: ['/node_modules/'],
+  watchPathIgnorePatterns: ['<rootDir>/mocks/budgets/'],
+  setupFilesAfterEnv: ['<rootDir>/../loot-core/src/mocks/setup.ts'],
+  transformIgnorePatterns: ['/node_modules/'],
+  transform: {
+    '^.+\\.(t|j)sx?$': '@swc/jest',
+  },
+};

packages/api/methods.js

@@ -1,164 +0,0 @@
-import * as injected from './injected';
-
-export { default as q } from './app/query';
-
-function send(name, args) {
-  return injected.send(name, args);
-}
-
-export async function runImport(name, func) {
-  await send('api/start-import', { budgetName: name });
-  try {
-    await func();
-  } catch (e) {
-    await send('api/abort-import');
-    throw e;
-  }
-  await send('api/finish-import');
-}
-
-export async function loadBudget(budgetId) {
-  return send('api/load-budget', { id: budgetId });
-}
-
-export async function downloadBudget(syncId, { password } = {}) {
-  return send('api/download-budget', { syncId, password });
-}
-
-export async function sync() {
-  return send('api/sync');
-}
-
-export async function batchBudgetUpdates(func) {
-  await send('api/batch-budget-start');
-  try {
-    await func();
-  } finally {
-    await send('api/batch-budget-end');
-  }
-}
-
-export function runQuery(query) {
-  return send('api/query', { query: query.serialize() });
-}
-
-export function getBudgetMonths() {
-  return send('api/budget-months');
-}
-
-export function getBudgetMonth(month) {
-  return send('api/budget-month', { month });
-}
-
-export function setBudgetAmount(month, categoryId, value) {
-  return send('api/budget-set-amount', { month, categoryId, amount: value });
-}
-
-export function setBudgetCarryover(month, categoryId, flag) {
-  return send('api/budget-set-carryover', { month, categoryId, flag });
-}
-
-export function addTransactions(
-  accountId,
-  transactions,
-  { learnCategories = false, runTransfers = false } = {},
-) {
-  return send('api/transactions-add', {
-    accountId,
-    transactions,
-    learnCategories,
-    runTransfers,
-  });
-}
-
-export function importTransactions(accountId, transactions) {
-  return send('api/transactions-import', { accountId, transactions });
-}
-
-export function getTransactions(accountId, startDate, endDate) {
-  return send('api/transactions-get', { accountId, startDate, endDate });
-}
-
-export function filterTransactions(accountId, text) {
-  return send('api/transactions-filter', { accountId, text });
-}
-
-export function updateTransaction(id, fields) {
-  return send('api/transaction-update', { id, fields });
-}
-
-export function deleteTransaction(id) {
-  return send('api/transaction-delete', { id });
-}
-
-export function getAccounts() {
-  return send('api/accounts-get');
-}
-
-export function createAccount(account, initialBalance) {
-  return send('api/account-create', { account, initialBalance });
-}
-
-export function updateAccount(id, fields) {
-  return send('api/account-update', { id, fields });
-}
-
-export function closeAccount(id, transferAccountId, transferCategoryId) {
-  return send('api/account-close', {
-    id,
-    transferAccountId,
-    transferCategoryId,
-  });
-}
-
-export function reopenAccount(id) {
-  return send('api/account-reopen', { id });
-}
-
-export function deleteAccount(id) {
-  return send('api/account-delete', { id });
-}
-
-export function createCategoryGroup(group) {
-  return send('api/category-group-create', { group });
-}
-
-export function updateCategoryGroup(id, fields) {
-  return send('api/category-group-update', { id, fields });
-}
-
-export function deleteCategoryGroup(id, transferCategoryId) {
-  return send('api/category-group-delete', { id, transferCategoryId });
-}
-
-export function getCategories() {
-  return send('api/categories-get', { grouped: false });
-}
-
-export function createCategory(category) {
-  return send('api/category-create', { category });
-}
-
-export function updateCategory(id, fields) {
-  return send('api/category-update', { id, fields });
-}
-
-export function deleteCategory(id, transferCategoryId) {
-  return send('api/category-delete', { id, transferCategoryId });
-}
-
-export function getPayees() {
-  return send('api/payees-get');
-}
-
-export function createPayee(payee) {
-  return send('api/payee-create', { payee });
-}
-
-export function updatePayee(id, fields) {
-  return send('api/payee-update', { id, fields });
-}
-
-export function deletePayee(id) {
-  return send('api/payee-delete', { id });
-}

packages/api/methods.test.ts

@@ -0,0 +1,657 @@
+// @ts-strict-ignore
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+import * as api from './index';
+
+const budgetName = 'test-budget';
+
+beforeEach(async () => {
+  // we need real datetime if we are going to mix new timestamps with our mock data
+  global.restoreDateNow();
+
+  const budgetPath = path.join(__dirname, '/mocks/budgets/', budgetName);
+  await fs.rm(budgetPath, { force: true, recursive: true });
+
+  await createTestBudget('default-budget-template', budgetName);
+  await api.init({
+    dataDir: path.join(__dirname, '/mocks/budgets/'),
+  });
+});
+
+afterEach(async () => {
+  global.currentMonth = null;
+  await api.shutdown();
+});
+
+async function createTestBudget(templateName: string, name: string) {
+  const templatePath = path.join(
+    __dirname,
+    '/../loot-core/src/mocks/files',
+    templateName,
+  );
+  const budgetPath = path.join(__dirname, '/mocks/budgets/', name);
+
+  await fs.mkdir(budgetPath);
+  await fs.copyFile(
+    path.join(templatePath, 'metadata.json'),
+    path.join(budgetPath, 'metadata.json'),
+  );
+  await fs.copyFile(
+    path.join(templatePath, 'db.sqlite'),
+    path.join(budgetPath, 'db.sqlite'),
+  );
+}
+
+describe('API setup and teardown', () => {
+  // apis: loadBudget, getBudgetMonths
+  test('successfully loads budget', async () => {
+    await expect(api.loadBudget(budgetName)).resolves.toBeUndefined();
+
+    await expect(api.getBudgetMonths()).resolves.toMatchSnapshot();
+  });
+});
+
+describe('API CRUD operations', () => {
+  beforeEach(async () => {
+    // load test budget
+    await api.loadBudget(budgetName);
+  });
+
+  // api: getBudgets
+  test('getBudgets', async () => {
+    const budgets = await api.getBudgets();
+    expect(budgets).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: 'test-budget',
+          name: 'Default Test Db',
+        }),
+      ]),
+    );
+  });
+
+  // apis: getCategoryGroups, createCategoryGroup, updateCategoryGroup, deleteCategoryGroup
+  test('CategoryGroups: successfully update category groups', async () => {
+    const month = '2023-10';
+    global.currentMonth = month;
+
+    // get existing category groups
+    const groups = await api.getCategoryGroups();
+    expect(groups).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          hidden: false,
+          id: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+          is_income: false,
+          name: 'Usual Expenses',
+        }),
+        expect.objectContaining({
+          hidden: false,
+          id: 'a137772f-cf2f-4089-9432-822d2ddc1466',
+          is_income: false,
+          name: 'Investments and Savings',
+        }),
+        expect.objectContaining({
+          hidden: false,
+          id: '2E1F5BDB-209B-43F9-AF2C-3CE28E380C00',
+          is_income: true,
+          name: 'Income',
+        }),
+      ]),
+    );
+
+    // create our test category group
+    const mainGroupId = await api.createCategoryGroup({
+      name: 'test-group',
+    });
+
+    let budgetMonth = await api.getBudgetMonth(month);
+    expect(budgetMonth.categoryGroups).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: mainGroupId,
+        }),
+      ]),
+    );
+
+    // update group
+    await api.updateCategoryGroup(mainGroupId, {
+      name: 'update-tests',
+    });
+
+    budgetMonth = await api.getBudgetMonth(month);
+    expect(budgetMonth.categoryGroups).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: mainGroupId,
+        }),
+      ]),
+    );
+
+    // delete group
+    await api.deleteCategoryGroup(mainGroupId);
+
+    budgetMonth = await api.getBudgetMonth(month);
+    expect(budgetMonth.categoryGroups).toEqual(
+      expect.arrayContaining([
+        expect.not.objectContaining({
+          id: mainGroupId,
+        }),
+      ]),
+    );
+  });
+
+  // apis: createCategory, getCategories, updateCategory, deleteCategory
+  test('Categories: successfully update categories', async () => {
+    const month = '2023-10';
+    global.currentMonth = month;
+
+    // create our test category group
+    const mainGroupId = await api.createCategoryGroup({
+      name: 'test-group',
+    });
+    const secondaryGroupId = await api.createCategoryGroup({
+      name: 'test-secondary-group',
+    });
+    const categoryId = await api.createCategory({
+      name: 'test-budget',
+      group_id: mainGroupId,
+    });
+    const categoryIdHidden = await api.createCategory({
+      name: 'test-budget-hidden',
+      group_id: mainGroupId,
+      hidden: true,
+    });
+
+    let categories = await api.getCategories();
+    expect(categories).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: categoryId,
+          name: 'test-budget',
+          hidden: false,
+          group_id: mainGroupId,
+        }),
+        expect.objectContaining({
+          id: categoryIdHidden,
+          name: 'test-budget-hidden',
+          hidden: true,
+          group_id: mainGroupId,
+        }),
+      ]),
+    );
+
+    // update/move category
+    await api.updateCategory(categoryId, {
+      name: 'updated-budget',
+      group_id: secondaryGroupId,
+    });
+
+    await api.updateCategory(categoryIdHidden, {
+      name: 'updated-budget-hidden',
+      group_id: secondaryGroupId,
+      hidden: false,
+    });
+
+    categories = await api.getCategories();
+    expect(categories).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: categoryId,
+          name: 'updated-budget',
+          hidden: false,
+          group_id: secondaryGroupId,
+        }),
+        expect.objectContaining({
+          id: categoryIdHidden,
+          name: 'updated-budget-hidden',
+          hidden: false,
+          group_id: secondaryGroupId,
+        }),
+      ]),
+    );
+
+    // delete categories
+    await api.deleteCategory(categoryId);
+
+    expect(categories).toEqual(
+      expect.arrayContaining([
+        expect.not.objectContaining({
+          id: categoryId,
+        }),
+      ]),
+    );
+  });
+
+  // apis: setBudgetAmount, setBudgetCarryover, getBudgetMonth
+  test('Budgets: successfully update budgets', async () => {
+    const month = '2023-10';
+    global.currentMonth = month;
+
+    // create some new categories to test with
+    const groupId = await api.createCategoryGroup({
+      name: 'tests',
+    });
+    const categoryId = await api.createCategory({
+      name: 'test-budget',
+      group_id: groupId,
+    });
+
+    await api.setBudgetAmount(month, categoryId, 100);
+    await api.setBudgetCarryover(month, categoryId, true);
+
+    const budgetMonth = await api.getBudgetMonth(month);
+    expect(budgetMonth.categoryGroups).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: groupId,
+          categories: expect.arrayContaining([
+            expect.objectContaining({
+              id: categoryId,
+              budgeted: 100,
+              carryover: true,
+            }),
+          ]),
+        }),
+      ]),
+    );
+  });
+
+  //apis: createAccount, getAccounts, updateAccount, closeAccount, deleteAccount, reopenAccount, getAccountBalance
+  test('Accounts: successfully complete account operators', async () => {
+    const accountId1 = await api.createAccount(
+      { name: 'test-account1', offbudget: true },
+      1000,
+    );
+    const accountId2 = await api.createAccount({ name: 'test-account2' }, 0);
+    let accounts = await api.getAccounts();
+
+    // accounts successfully created
+    expect(accounts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: accountId1,
+          name: 'test-account1',
+          offbudget: true,
+        }),
+        expect.objectContaining({ id: accountId2, name: 'test-account2' }),
+      ]),
+    );
+
+    expect(await api.getAccountBalance(accountId1)).toEqual(1000);
+    expect(await api.getAccountBalance(accountId2)).toEqual(0);
+
+    await api.updateAccount(accountId1, { offbudget: false });
+    await api.closeAccount(accountId1, accountId2, null);
+    await api.deleteAccount(accountId2);
+
+    // accounts successfully updated, and one of them deleted
+    accounts = await api.getAccounts();
+    expect(accounts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: accountId1,
+          name: 'test-account1',
+          closed: true,
+          offbudget: false,
+        }),
+        expect.not.objectContaining({ id: accountId2 }),
+      ]),
+    );
+
+    await api.reopenAccount(accountId1);
+
+    // the non-deleted account is reopened
+    accounts = await api.getAccounts();
+    expect(accounts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: accountId1,
+          name: 'test-account1',
+          closed: false,
+        }),
+      ]),
+    );
+  });
+
+  // apis: createPayee, getPayees, updatePayee, deletePayee
+  test('Payees: successfully update payees', async () => {
+    const payeeId1 = await api.createPayee({ name: 'test-payee1' });
+    const payeeId2 = await api.createPayee({ name: 'test-payee2' });
+    let payees = await api.getPayees();
+
+    // payees successfully created
+    expect(payees).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: payeeId1,
+          name: 'test-payee1',
+        }),
+        expect.objectContaining({
+          id: payeeId2,
+          name: 'test-payee2',
+        }),
+      ]),
+    );
+
+    await api.updatePayee(payeeId1, { name: 'test-updated-payee' });
+    await api.deletePayee(payeeId2);
+
+    // confirm update and delete were successful
+    payees = await api.getPayees();
+    expect(payees).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: payeeId1,
+          name: 'test-updated-payee',
+        }),
+        expect.not.objectContaining({
+          name: 'test-payee1',
+        }),
+        expect.not.objectContaining({
+          id: payeeId2,
+        }),
+      ]),
+    );
+  });
+
+  // apis: getRules, getPayeeRules, createRule, updateRule, deleteRule
+  test('Rules: successfully update rules', async () => {
+    await api.createPayee({ name: 'test-payee' });
+    await api.createPayee({ name: 'test-payee2' });
+
+    // create our test rules
+    const rule = await api.createRule({
+      stage: 'pre',
+      conditionsOp: 'and',
+      conditions: [
+        {
+          field: 'payee',
+          op: 'is',
+          value: 'test-payee',
+        },
+      ],
+      actions: [
+        {
+          op: 'set',
+          field: 'category',
+          value: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+        },
+      ],
+    });
+    const rule2 = await api.createRule({
+      stage: 'pre',
+      conditionsOp: 'and',
+      conditions: [
+        {
+          field: 'payee',
+          op: 'is',
+          value: 'test-payee2',
+        },
+      ],
+      actions: [
+        {
+          op: 'set',
+          field: 'category',
+          value: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+        },
+      ],
+    });
+
+    // get existing rules
+    const rules = await api.getRules();
+    expect(rules).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          actions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'category',
+              op: 'set',
+              type: 'id',
+              value: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+            }),
+          ]),
+          conditions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'payee',
+              op: 'is',
+              type: 'id',
+              value: 'test-payee2',
+            }),
+          ]),
+          conditionsOp: 'and',
+          id: rule2.id,
+          stage: 'pre',
+        }),
+        expect.objectContaining({
+          actions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'category',
+              op: 'set',
+              type: 'id',
+              value: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+            }),
+          ]),
+          conditions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'payee',
+              op: 'is',
+              type: 'id',
+              value: 'test-payee',
+            }),
+          ]),
+          conditionsOp: 'and',
+          id: rule.id,
+          stage: 'pre',
+        }),
+      ]),
+    );
+
+    // get by payee
+    expect(await api.getPayeeRules('test-payee')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          actions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'category',
+              op: 'set',
+              type: 'id',
+              value: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+            }),
+          ]),
+          conditions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'payee',
+              op: 'is',
+              type: 'id',
+              value: 'test-payee',
+            }),
+          ]),
+          conditionsOp: 'and',
+          id: rule.id,
+          stage: 'pre',
+        }),
+      ]),
+    );
+
+    expect(await api.getPayeeRules('test-payee2')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          actions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'category',
+              op: 'set',
+              type: 'id',
+              value: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+            }),
+          ]),
+          conditions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'payee',
+              op: 'is',
+              type: 'id',
+              value: 'test-payee2',
+            }),
+          ]),
+          conditionsOp: 'and',
+          id: rule2.id,
+          stage: 'pre',
+        }),
+      ]),
+    );
+
+    // update one rule
+    const updatedRule = {
+      ...rule,
+      stage: 'post',
+      conditionsOp: 'or',
+    };
+    expect(await api.updateRule(updatedRule)).toEqual(updatedRule);
+
+    expect(await api.getRules()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          actions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'category',
+              op: 'set',
+              type: 'id',
+              value: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+            }),
+          ]),
+          conditions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'payee',
+              op: 'is',
+              type: 'id',
+              value: 'test-payee',
+            }),
+          ]),
+          conditionsOp: 'or',
+          id: rule.id,
+          stage: 'post',
+        }),
+        expect.objectContaining({
+          actions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'category',
+              op: 'set',
+              type: 'id',
+              value: 'fc3825fd-b982-4b72-b768-5b30844cf832',
+            }),
+          ]),
+          conditions: expect.arrayContaining([
+            expect.objectContaining({
+              field: 'payee',
+              op: 'is',
+              type: 'id',
+              value: 'test-payee2',
+            }),
+          ]),
+          conditionsOp: 'and',
+          id: rule2.id,
+          stage: 'pre',
+        }),
+      ]),
+    );
+
+    // delete rules
+    await api.deleteRule(rules[1].id);
+    expect(await api.getRules()).toHaveLength(1);
+
+    await api.deleteRule(rules[0].id);
+    expect(await api.getRules()).toHaveLength(0);
+  });
+
+  // apis: addTransactions, getTransactions, importTransactions, updateTransaction, deleteTransaction
+  test('Transactions: successfully update transactions', async () => {
+    const accountId = await api.createAccount({ name: 'test-account' }, 0);
+
+    let newTransaction = [
+      { date: '2023-11-03', imported_id: '11', amount: 100, notes: 'notes' },
+      { date: '2023-11-03', imported_id: '12', amount: 100, notes: '' },
+    ];
+
+    const addResult = await api.addTransactions(accountId, newTransaction, {
+      learnCategories: true,
+      runTransfers: true,
+    });
+    expect(addResult).toBe('ok');
+
+    expect(await api.getAccountBalance(accountId)).toEqual(200);
+    expect(
+      await api.getAccountBalance(accountId, new Date(2023, 10, 2)),
+    ).toEqual(0);
+
+    // confirm added transactions exist
+    let transactions = await api.getTransactions(
+      accountId,
+      '2023-11-01',
+      '2023-11-30',
+    );
+    expect(transactions).toEqual(
+      expect.arrayContaining(
+        newTransaction.map(trans => expect.objectContaining(trans)),
+      ),
+    );
+    expect(transactions).toHaveLength(2);
+
+    newTransaction = [
+      { date: '2023-12-03', imported_id: '11', amount: 100, notes: 'notes' },
+      { date: '2023-12-03', imported_id: '12', amount: 100, notes: 'notes' },
+      { date: '2023-12-03', imported_id: '22', amount: 200, notes: '' },
+    ];
+
+    const reconciled = await api.importTransactions(accountId, newTransaction);
+
+    // Expect it to reconcile and to have updated one of the previous transactions
+    expect(reconciled.added).toHaveLength(1);
+    expect(reconciled.updated).toHaveLength(1);
+
+    // confirm imported transactions exist
+    transactions = await api.getTransactions(
+      accountId,
+      '2023-12-01',
+      '2023-12-31',
+    );
+    expect(transactions).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ imported_id: '22', amount: 200 }),
+      ]),
+    );
+    expect(transactions).toHaveLength(1);
+
+    // confirm imported transactions update perfomed
+    transactions = await api.getTransactions(
+      accountId,
+      '2023-11-01',
+      '2023-11-30',
+    );
+    expect(transactions).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ notes: 'notes', amount: 100 }),
+      ]),
+    );
+    expect(transactions).toHaveLength(2);
+
+    const idToUpdate = reconciled.added[0];
+    const idToDelete = reconciled.updated[0];
+    await api.updateTransaction(idToUpdate, { amount: 500 });
+    await api.deleteTransaction(idToDelete);
+
+    // confirm updates and deletions work
+    transactions = await api.getTransactions(
+      accountId,
+      '2023-12-01',
+      '2023-12-31',
+    );
+    expect(transactions).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ id: idToUpdate, amount: 500 }),
+        expect.not.objectContaining({ id: idToDelete }),
+      ]),
+    );
+    expect(transactions).toHaveLength(1);
+  });
+});

packages/api/methods.ts

@@ -0,0 +1,232 @@
+// @ts-strict-ignore
+import type { Handlers } from 'loot-core/types/handlers';
+
+import * as injected from './injected';
+
+export { q } from './app/query';
+
+function send<K extends keyof Handlers, T extends Handlers[K]>(
+  name: K,
+  args?: Parameters<T>[0],
+): Promise<Awaited<ReturnType<T>>> {
+  return injected.send(name, args);
+}
+
+export async function runImport(name, func) {
+  await send('api/start-import', { budgetName: name });
+  try {
+    await func();
+  } catch (e) {
+    await send('api/abort-import');
+    throw e;
+  }
+  await send('api/finish-import');
+}
+
+export async function loadBudget(budgetId) {
+  return send('api/load-budget', { id: budgetId });
+}
+
+export async function downloadBudget(syncId, { password }: { password? } = {}) {
+  return send('api/download-budget', { syncId, password });
+}
+
+export async function getBudgets() {
+  return send('api/get-budgets');
+}
+
+export async function sync() {
+  return send('api/sync');
+}
+
+export async function runBankSync(args?: { accountId: string }) {
+  return send('api/bank-sync', args);
+}
+
+export async function batchBudgetUpdates(func) {
+  await send('api/batch-budget-start');
+  try {
+    await func();
+  } finally {
+    await send('api/batch-budget-end');
+  }
+}
+
+export function runQuery(query) {
+  return send('api/query', { query: query.serialize() });
+}
+
+export function getBudgetMonths() {
+  return send('api/budget-months');
+}
+
+export function getBudgetMonth(month) {
+  return send('api/budget-month', { month });
+}
+
+export function setBudgetAmount(month, categoryId, value) {
+  return send('api/budget-set-amount', { month, categoryId, amount: value });
+}
+
+export function setBudgetCarryover(month, categoryId, flag) {
+  return send('api/budget-set-carryover', { month, categoryId, flag });
+}
+
+export function addTransactions(
+  accountId,
+  transactions,
+  { learnCategories = false, runTransfers = false } = {},
+) {
+  return send('api/transactions-add', {
+    accountId,
+    transactions,
+    learnCategories,
+    runTransfers,
+  });
+}
+
+export interface ImportTransactionsOpts {
+  defaultCleared?: boolean;
+}
+
+export function importTransactions(
+  accountId,
+  transactions,
+  opts: ImportTransactionsOpts = {
+    defaultCleared: true,
+  },
+) {
+  return send('api/transactions-import', {
+    accountId,
+    transactions,
+    opts,
+  });
+}
+
+export function getTransactions(accountId, startDate, endDate) {
+  return send('api/transactions-get', { accountId, startDate, endDate });
+}
+
+export function updateTransaction(id, fields) {
+  return send('api/transaction-update', { id, fields });
+}
+
+export function deleteTransaction(id) {
+  return send('api/transaction-delete', { id });
+}
+
+export function getAccounts() {
+  return send('api/accounts-get');
+}
+
+export function createAccount(account, initialBalance?) {
+  return send('api/account-create', { account, initialBalance });
+}
+
+export function updateAccount(id, fields) {
+  return send('api/account-update', { id, fields });
+}
+
+export function closeAccount(id, transferAccountId?, transferCategoryId?) {
+  return send('api/account-close', {
+    id,
+    transferAccountId,
+    transferCategoryId,
+  });
+}
+
+export function reopenAccount(id) {
+  return send('api/account-reopen', { id });
+}
+
+export function deleteAccount(id) {
+  return send('api/account-delete', { id });
+}
+
+export function getAccountBalance(id, cutoff?) {
+  return send('api/account-balance', { id, cutoff });
+}
+
+export function getCategoryGroups() {
+  return send('api/category-groups-get');
+}
+
+export function createCategoryGroup(group) {
+  return send('api/category-group-create', { group });
+}
+
+export function updateCategoryGroup(id, fields) {
+  return send('api/category-group-update', { id, fields });
+}
+
+export function deleteCategoryGroup(id, transferCategoryId?) {
+  return send('api/category-group-delete', { id, transferCategoryId });
+}
+
+export function getCategories() {
+  return send('api/categories-get', { grouped: false });
+}
+
+export function createCategory(category) {
+  return send('api/category-create', { category });
+}
+
+export function updateCategory(id, fields) {
+  return send('api/category-update', { id, fields });
+}
+
+export function deleteCategory(id, transferCategoryId?) {
+  return send('api/category-delete', { id, transferCategoryId });
+}
+
+export function getCommonPayees() {
+  return send('api/common-payees-get');
+}
+
+export function getPayees() {
+  return send('api/payees-get');
+}
+
+export function createPayee(payee) {
+  return send('api/payee-create', { payee });
+}
+
+export function updatePayee(id, fields) {
+  return send('api/payee-update', { id, fields });
+}
+
+export function deletePayee(id) {
+  return send('api/payee-delete', { id });
+}
+
+export function mergePayees(targetId, mergeIds) {
+  return send('api/payees-merge', { targetId, mergeIds });
+}
+
+export function getRules() {
+  return send('api/rules-get');
+}
+
+export function getPayeeRules(id) {
+  return send('api/payee-rules-get', { id });
+}
+
+export function createRule(rule) {
+  return send('api/rule-create', { rule });
+}
+
+export function updateRule(rule) {
+  return send('api/rule-update', { rule });
+}
+
+export function deleteRule(id: string) {
+  return send('api/rule-delete', id);
+}
+
+export function holdBudgetForNextMonth(month, amount) {
+  return send('api/budget-hold-for-next-month', { month, amount });
+}
+
+export function resetBudgetHold(month) {
+  return send('api/budget-reset-hold', { month });
+}

packages/api/package.json

@@ -1,31 +1,40 @@
 {
   "name": "@actual-app/api",
-  "version": "6.3.0",
+  "version": "25.3.1",
   "license": "MIT",
   "description": "An API for Actual",
   "engines": {
     "node": ">=18.12.0"
   },
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "@types/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "@types"
   ],
   "scripts": {
     "build:app": "yarn workspace loot-core build:api",
-    "build:node": "tsc --p tsconfig.dist.json",
+    "build:node": "tsc --p tsconfig.dist.json && tsc-alias -p tsconfig.dist.json",
     "build:migrations": "cp migrations/*.sql dist/migrations",
     "build:default-db": "cp default-db.sqlite dist/",
-    "build": "rm -rf dist && yarn run build:app && yarn run build:node && yarn run build:migrations && yarn run build:default-db"
+    "build": "yarn run clean && yarn run build:app && yarn run build:node && yarn run build:migrations && yarn run build:default-db",
+    "test": "yarn run build:app && jest -c jest.config.js",
+    "clean": "rm -rf dist @types"
   },
   "dependencies": {
-    "better-sqlite3": "^9.1.1",
+    "@actual-app/crdt": "workspace:^",
+    "better-sqlite3": "^11.7.0",
     "compare-versions": "^6.1.0",
     "node-fetch": "^3.3.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@swc/core": "^1.5.3",
+    "@swc/jest": "^0.2.36",
+    "@types/jest": "^27.5.2",
     "@types/uuid": "^9.0.2",
-    "typescript": "^5.0.2"
+    "jest": "^27.5.1",
+    "tsc-alias": "^1.8.8",
+    "typescript": "^5.5.4"
   }
 }

packages/api/tsconfig.dist.json

@@ -3,13 +3,17 @@
   "compilerOptions": {
     // Using ES2021 because that’s the newest version where
     // the latest Node 16.x release supports all of the features
-    "target": "es2021",
+    "target": "ES2021",
     "module": "CommonJS",
-    "moduleResolution": "Node16",
+    "moduleResolution": "node10",
     "noEmit": false,
     "declaration": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "declarationDir": "@types",
+    "paths": {
+      "loot-core/*": ["./@types/loot-core/*"]
+    }
   },
   "include": ["."],
-  "exclude": ["dist"]
+  "exclude": ["**/node_modules/*", "dist", "@types"]
 }

packages/component-library/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@actual-app/components",
+  "version": "0.0.1",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.2"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.13.4",
+    "react-aria-components": "^1.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "18.2.0"
+  },
+  "exports": {
+    "./icons/*": "./src/icons/*.tsx",
+    "./aligned-text": "./src/AlignedText.tsx",
+    "./block": "./src/Block.tsx",
+    "./button": "./src/Button.tsx",
+    "./card": "./src/Card.tsx",
+    "./form-error": "./src/FormError.tsx",
+    "./initial-focus": "./src/InitialFocus.ts",
+    "./inline-field": "./src/InlineField.tsx",
+    "./label": "./src/Label.tsx",
+    "./menu": "./src/Menu.tsx",
+    "./paragraph": "./src/Paragraph.tsx",
+    "./popover": "./src/Popover.tsx",
+    "./space-between": "./src/SpaceBetween.tsx",
+    "./stack": "./src/Stack.tsx",
+    "./styles": "./src/styles.ts",
+    "./text": "./src/Text.tsx",
+    "./text-one-line": "./src/TextOneLine.tsx",
+    "./theme": "./src/theme.ts",
+    "./tokens": "./src/tokens.ts",
+    "./toggle": "./src/Toggle.tsx",
+    "./tooltip": "./src/Tooltip.tsx",
+    "./view": "./src/View.tsx"
+  }
+}

packages/component-library/src/AlignedText.tsx

@@ -1,19 +1,17 @@
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode, type CSSProperties } from 'react';
 
-import { type CSSProperties } from '../../style';
-
-import Block from './Block';
-import View from './View';
+import { Block } from './Block';
+import { View } from './View';
 
 type AlignedTextProps = ComponentProps<typeof View> & {
-  left;
-  right;
+  left: ReactNode;
+  right: ReactNode;
   style?: CSSProperties;
   leftStyle?: CSSProperties;
   rightStyle?: CSSProperties;
   truncate?: 'left' | 'right';
 };
-export default function AlignedText({
+export function AlignedText({
   left,
   right,
   style,

packages/component-library/src/Block.tsx

@@ -0,0 +1,17 @@
+import { type HTMLProps, type Ref } from 'react';
+
+import { css, cx } from '@emotion/css';
+
+import { type CSSProperties } from './styles';
+
+type BlockProps = HTMLProps<HTMLDivElement> & {
+  innerRef?: Ref<HTMLDivElement>;
+  style?: CSSProperties;
+};
+
+export function Block(props: BlockProps) {
+  const { className = '', style, innerRef, ...restProps } = props;
+  return (
+    <div {...restProps} ref={innerRef} className={cx(className, css(style))} />
+  );
+}

packages/component-library/src/Button.tsx

@@ -0,0 +1,238 @@
+import React, {
+  forwardRef,
+  useMemo,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
+import { Button as ReactAriaButton } from 'react-aria-components';
+
+import { css } from '@emotion/css';
+
+import { AnimatedLoading } from './icons/AnimatedLoading';
+import { styles } from './styles';
+import { theme } from './theme';
+import { View } from './View';
+
+const backgroundColor: {
+  [key in ButtonVariant | `${ButtonVariant}Disabled`]?: string;
+} = {
+  normal: theme.buttonNormalBackground,
+  normalDisabled: theme.buttonNormalDisabledBackground,
+  primary: theme.buttonPrimaryBackground,
+  primaryDisabled: theme.buttonPrimaryDisabledBackground,
+  bare: theme.buttonBareBackground,
+  bareDisabled: theme.buttonBareDisabledBackground,
+  menu: theme.buttonMenuBackground,
+  menuSelected: theme.buttonMenuSelectedBackground,
+};
+
+const backgroundColorHover: Record<
+  ButtonVariant | `${ButtonVariant}Disabled`,
+  CSSProperties['backgroundColor']
+> = {
+  normal: theme.buttonNormalBackgroundHover,
+  primary: theme.buttonPrimaryBackgroundHover,
+  bare: theme.buttonBareBackgroundHover,
+  menu: theme.buttonMenuBackgroundHover,
+  menuSelected: theme.buttonMenuSelectedBackgroundHover,
+  normalDisabled: 'transparent',
+  primaryDisabled: 'transparent',
+  bareDisabled: 'transparent',
+  menuDisabled: 'transparent',
+  menuSelectedDisabled: 'transparent',
+};
+
+const borderColor: {
+  [key in
+    | ButtonVariant
+    | `${ButtonVariant}Disabled`]?: CSSProperties['borderColor'];
+} = {
+  normal: theme.buttonNormalBorder,
+  normalDisabled: theme.buttonNormalDisabledBorder,
+  primary: theme.buttonPrimaryBorder,
+  primaryDisabled: theme.buttonPrimaryDisabledBorder,
+  menu: theme.buttonMenuBorder,
+  menuSelected: theme.buttonMenuSelectedBorder,
+};
+
+const textColor: {
+  [key in ButtonVariant | `${ButtonVariant}Disabled`]?: CSSProperties['color'];
+} = {
+  normal: theme.buttonNormalText,
+  normalDisabled: theme.buttonNormalDisabledText,
+  primary: theme.buttonPrimaryText,
+  primaryDisabled: theme.buttonPrimaryDisabledText,
+  bare: theme.buttonBareText,
+  bareDisabled: theme.buttonBareDisabledText,
+  menu: theme.buttonMenuText,
+  menuSelected: theme.buttonMenuSelectedText,
+};
+
+const textColorHover: {
+  [key in ButtonVariant]?: string;
+} = {
+  normal: theme.buttonNormalTextHover,
+  primary: theme.buttonPrimaryTextHover,
+  bare: theme.buttonBareTextHover,
+  menu: theme.buttonMenuTextHover,
+  menuSelected: theme.buttonMenuSelectedTextHover,
+};
+
+const _getBorder = (
+  variant: ButtonVariant,
+  variantWithDisabled: keyof typeof borderColor,
+): string => {
+  switch (variant) {
+    case 'bare':
+      return 'none';
+
+    default:
+      return '1px solid ' + borderColor[variantWithDisabled];
+  }
+};
+
+const _getPadding = (variant: ButtonVariant): string => {
+  switch (variant) {
+    case 'bare':
+      return '5px';
+    default:
+      return '5px 10px';
+  }
+};
+
+const _getHoveredStyles = (variant: ButtonVariant): CSSProperties => ({
+  ...(variant !== 'bare' && styles.shadow),
+  backgroundColor: backgroundColorHover[variant],
+  color: textColorHover[variant],
+  cursor: 'pointer',
+});
+
+const _getActiveStyles = (
+  variant: ButtonVariant,
+  bounce: boolean,
+): CSSProperties => {
+  switch (variant) {
+    case 'bare':
+      return { backgroundColor: theme.buttonBareBackgroundActive };
+    default:
+      return {
+        transform: bounce ? 'translateY(1px)' : undefined,
+        boxShadow: `0 1px 4px 0 ${
+          variant === 'primary'
+            ? theme.buttonPrimaryShadow
+            : theme.buttonNormalShadow
+        }`,
+        transition: 'none',
+      };
+  }
+};
+
+type ButtonProps = ComponentPropsWithoutRef<typeof ReactAriaButton> & {
+  variant?: ButtonVariant;
+  bounce?: boolean;
+  children?: ReactNode;
+};
+
+type ButtonVariant = 'normal' | 'primary' | 'bare' | 'menu' | 'menuSelected';
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { children, variant = 'normal', bounce = true, ...restProps } = props;
+
+    const variantWithDisabled: ButtonVariant | `${ButtonVariant}Disabled` =
+      props.isDisabled ? `${variant}Disabled` : variant;
+
+    const defaultButtonClassName: string = useMemo(
+      () =>
+        String(
+          css({
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            padding: _getPadding(variant),
+            margin: 0,
+            overflow: 'hidden',
+            display: 'flex',
+            borderRadius: 4,
+            backgroundColor: backgroundColor[variantWithDisabled],
+            border: _getBorder(variant, variantWithDisabled),
+            color: textColor[variantWithDisabled],
+            transition: 'box-shadow .25s',
+            WebkitAppRegion: 'no-drag',
+            ...styles.smallText,
+            '&[data-hovered]': _getHoveredStyles(variant),
+            '&[data-pressed]': _getActiveStyles(variant, bounce),
+          }),
+        ),
+      [bounce, variant, variantWithDisabled],
+    );
+
+    const className = restProps.className;
+
+    return (
+      <ReactAriaButton
+        ref={ref}
+        {...restProps}
+        className={
+          typeof className === 'function'
+            ? renderProps =>
+                `${defaultButtonClassName} ${className(renderProps)}`
+            : `${defaultButtonClassName} ${className || ''}`
+        }
+      >
+        {children}
+      </ReactAriaButton>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+type ButtonWithLoadingProps = ButtonProps & {
+  isLoading?: boolean;
+};
+
+export const ButtonWithLoading = forwardRef<
+  HTMLButtonElement,
+  ButtonWithLoadingProps
+>((props, ref) => {
+  const { isLoading, children, style, ...buttonProps } = props;
+  return (
+    <Button
+      {...buttonProps}
+      ref={ref}
+      style={buttonRenderProps => ({
+        position: 'relative',
+        ...(typeof style === 'function' ? style(buttonRenderProps) : style),
+      })}
+    >
+      {isLoading && (
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <AnimatedLoading style={{ width: 20, height: 20 }} />
+        </View>
+      )}
+      <View
+        style={{
+          opacity: isLoading ? 0 : 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}
+      >
+        {children}
+      </View>
+    </Button>
+  );
+});
+
+ButtonWithLoading.displayName = 'ButtonWithLoading';

packages/component-library/src/Card.tsx

@@ -1,12 +1,11 @@
 import { type ComponentProps, forwardRef } from 'react';
 
-import { theme } from '../../style';
-
-import View from './View';
+import { theme } from './theme';
+import { View } from './View';
 
 type CardProps = ComponentProps<typeof View>;
 
-const Card = forwardRef<HTMLDivElement, CardProps>(
+export const Card = forwardRef<HTMLDivElement, CardProps>(
   ({ children, ...props }, ref) => {
     return (
       <View
@@ -36,4 +35,4 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
   },
 );
 
-export default Card;
+Card.displayName = 'Card';

packages/component-library/src/FormError.tsx

@@ -0,0 +1,14 @@
+import { type ReactNode, type CSSProperties } from 'react';
+
+import { View } from './View';
+
+type FormErrorProps = {
+  style?: CSSProperties;
+  children?: ReactNode;
+};
+
+export function FormError({ style, children }: FormErrorProps) {
+  return (
+    <View style={{ color: 'red', fontSize: 13, ...style }}>{children}</View>
+  );
+}

packages/component-library/src/InitialFocus.ts

@@ -0,0 +1,36 @@
+import {
+  type ReactElement,
+  type Ref,
+  cloneElement,
+  useEffect,
+  useRef,
+} from 'react';
+
+type InitialFocusProps = {
+  children:
+    | ReactElement<{ inputRef: Ref<HTMLInputElement> }>
+    | ((node: Ref<HTMLInputElement>) => ReactElement);
+};
+
+export function InitialFocus({ children }: InitialFocusProps) {
+  const node = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (node.current) {
+      // This is needed to avoid a strange interaction with
+      // `ScopeTab`, which doesn't allow it to be focused at first for
+      // some reason. Need to look into it.
+      setTimeout(() => {
+        if (node.current) {
+          node.current.focus();
+          node.current.setSelectionRange(0, 10000);
+        }
+      }, 0);
+    }
+  }, []);
+
+  if (typeof children === 'function') {
+    return children(node);
+  }
+  return cloneElement(children, { inputRef: node });
+}

packages/component-library/src/InlineField.tsx

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type InlineFieldProps = {
   label: ReactNode;
@@ -12,7 +12,7 @@ type InlineFieldProps = {
   style?: CSSProperties;
 };
 
-export default function InlineField({
+export function InlineField({
   label,
   labelWidth,
   children,
@@ -21,7 +21,7 @@ export default function InlineField({
 }: InlineFieldProps) {
   return (
     <label
-      className={`${css(
+      className={css([
         {
           display: 'flex',
           flexDirection: 'row',
@@ -30,7 +30,7 @@ export default function InlineField({
           width,
         },
         style,
-      )}`}
+      ])}
     >
       <div
         style={{

packages/component-library/src/Label.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type ReactNode, type CSSProperties } from 'react';
+
+import { styles } from './styles';
+import { Text } from './Text';
+import { theme } from './theme';
+
+type LabelProps = {
+  title: ReactNode;
+  style?: CSSProperties;
+};
+
+export const Label = forwardRef<HTMLSpanElement, LabelProps>(
+  ({ title, style }: LabelProps, ref) => {
+    return (
+      <Text
+        ref={ref}
+        style={{
+          ...styles.text,
+          color: theme.tableRowHeaderText,
+          textAlign: 'right',
+          fontSize: 14,
+          marginBottom: 2,
+          ...style,
+        }}
+      >
+        {title}
+      </Text>
+    );
+  },
+);
+
+Label.displayName = 'Label';

packages/component-library/src/Menu.tsx

@@ -0,0 +1,241 @@
+import {
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentType,
+  type SVGProps,
+  type CSSProperties,
+} from 'react';
+
+import { Text } from './Text';
+import { theme } from './theme';
+import { Toggle } from './Toggle';
+import { View } from './View';
+
+const MenuLine: unique symbol = Symbol('menu-line');
+const MenuLabel: unique symbol = Symbol('menu-label');
+Menu.line = MenuLine;
+Menu.label = MenuLabel;
+
+type KeybindingProps = {
+  keyName: ReactNode;
+};
+
+function Keybinding({ keyName }: KeybindingProps) {
+  return (
+    <Text style={{ fontSize: 10, color: theme.menuKeybindingText }}>
+      {keyName}
+    </Text>
+  );
+}
+
+export type MenuItemObject<NameType, Type extends string | symbol = string> = {
+  type?: Type;
+  name: NameType;
+  disabled?: boolean;
+  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+  iconSize?: number;
+  text: string;
+  key?: string;
+  toggle?: boolean;
+  tooltip?: string;
+};
+
+export type MenuItem<NameType = string> =
+  | MenuItemObject<NameType>
+  | MenuItemObject<string, typeof Menu.label>
+  | typeof Menu.line;
+
+function isLabel<T>(
+  item: MenuItemObject<T> | MenuItemObject<string, typeof Menu.label>,
+): item is MenuItemObject<string, typeof Menu.label> {
+  return item.type === Menu.label;
+}
+
+type MenuProps<NameType> = {
+  header?: ReactNode;
+  footer?: ReactNode;
+  items: Array<MenuItem<NameType>>;
+  onMenuSelect?: (itemName: NameType) => void;
+  style?: CSSProperties;
+  className?: string;
+  getItemStyle?: (item: MenuItemObject<NameType>) => CSSProperties;
+};
+
+export function Menu<const NameType = string>({
+  header,
+  footer,
+  items: allItems,
+  onMenuSelect,
+  style,
+  className,
+  getItemStyle,
+}: MenuProps<NameType>) {
+  const elRef = useRef<HTMLDivElement>(null);
+  const items = allItems.filter(x => x);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    const el = elRef.current;
+    el?.focus();
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      const filteredItems = items.filter(
+        item => item && item !== Menu.line && item.type !== Menu.label,
+      );
+      const currentIndex = filteredItems.indexOf(items[hoveredIndex || 0]);
+
+      const transformIndex = (idx: number) => items.indexOf(filteredItems[idx]);
+
+      switch (e.key) {
+        case 'ArrowUp':
+          e.preventDefault();
+          setHoveredIndex(
+            hoveredIndex === null
+              ? 0
+              : transformIndex(Math.max(currentIndex - 1, 0)),
+          );
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          setHoveredIndex(
+            hoveredIndex === null
+              ? 0
+              : transformIndex(
+                  Math.min(currentIndex + 1, filteredItems.length - 1),
+                ),
+          );
+          break;
+        case 'Enter':
+          e.preventDefault();
+          const item = items[hoveredIndex || 0];
+          if (hoveredIndex !== null && item !== Menu.line && !isLabel(item)) {
+            onMenuSelect?.(item.name);
+          }
+          break;
+        default:
+      }
+    };
+
+    el?.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      el?.removeEventListener('keydown', onKeyDown);
+    };
+  }, [hoveredIndex]);
+
+  return (
+    <View
+      className={className}
+      style={{ outline: 'none', borderRadius: 4, overflow: 'hidden', ...style }}
+      tabIndex={1}
+      innerRef={elRef}
+    >
+      {header}
+      {items.map((item, idx) => {
+        if (item === Menu.line) {
+          return (
+            <View key={idx} style={{ margin: '3px 0px' }}>
+              <View style={{ borderTop: '1px solid ' + theme.menuBorder }} />
+            </View>
+          );
+        } else if (isLabel(item)) {
+          return (
+            <Text
+              key={idx}
+              style={{
+                color: theme.menuItemTextHeader,
+                fontSize: 11,
+                lineHeight: '1em',
+                textTransform: 'uppercase',
+                margin: '3px 9px',
+                marginTop: 5,
+              }}
+            >
+              {item.name}
+            </Text>
+          );
+        }
+
+        const Icon = item.icon;
+
+        return (
+          <View
+            role="button"
+            key={String(item.name)}
+            style={{
+              cursor: 'default',
+              padding: 10,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+              color: theme.menuItemText,
+              ...(item.disabled && { color: theme.buttonBareDisabledText }),
+              ...(!item.disabled &&
+                hoveredIndex === idx && {
+                  backgroundColor: theme.menuItemBackgroundHover,
+                  color: theme.menuItemTextHover,
+                }),
+              ...(!isLabel(item) && getItemStyle?.(item)),
+            }}
+            onPointerEnter={() => setHoveredIndex(idx)}
+            onPointerLeave={() => setHoveredIndex(null)}
+            onPointerUp={e => {
+              e.stopPropagation();
+
+              if (
+                !item.disabled &&
+                item.toggle === undefined &&
+                !isLabel(item)
+              ) {
+                onMenuSelect?.(item.name);
+              }
+            }}
+          >
+            {/* Force it to line up evenly */}
+            {item.toggle === undefined ? (
+              <>
+                {Icon && (
+                  <Icon
+                    width={item.iconSize || 10}
+                    height={item.iconSize || 10}
+                    style={{ marginRight: 7, width: item.iconSize || 10 }}
+                  />
+                )}
+                <Text title={item.tooltip}>{item.text}</Text>
+                <View style={{ flex: 1 }} />
+              </>
+            ) : (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  flex: 1,
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <label htmlFor={String(item.name)} title={item.tooltip}>
+                  {item.text}
+                </label>
+                <Toggle
+                  id={String(item.name)}
+                  isOn={item.toggle}
+                  style={{ marginLeft: 5 }}
+                  onToggle={() =>
+                    !item.disabled &&
+                    !isLabel(item) &&
+                    item.toggle !== undefined &&
+                    onMenuSelect?.(item.name)
+                  }
+                />
+              </View>
+            )}
+            {item.key && <Keybinding keyName={item.key} />}
+          </View>
+        );
+      })}
+      {footer}
+    </View>
+  );
+}

packages/component-library/src/Paragraph.tsx

@@ -0,0 +1,32 @@
+import { type HTMLProps } from 'react';
+
+import { css } from '@emotion/css';
+
+import { type CSSProperties } from './styles';
+
+type ParagraphProps = HTMLProps<HTMLDivElement> & {
+  style?: CSSProperties;
+  isLast?: boolean;
+};
+
+export function Paragraph({
+  style,
+  isLast,
+  children,
+  ...props
+}: ParagraphProps) {
+  return (
+    <div
+      {...props}
+      className={css([
+        !isLast && { marginBottom: 15 },
+        style,
+        {
+          lineHeight: '1.5em',
+        },
+      ])}
+    >
+      {children}
+    </div>
+  );
+}

packages/component-library/src/Popover.tsx

@@ -0,0 +1,57 @@
+import { type ComponentProps, useCallback, useEffect, useRef } from 'react';
+import { Popover as ReactAriaPopover } from 'react-aria-components';
+
+import { css } from '@emotion/css';
+
+import { styles } from './styles';
+
+type PopoverProps = ComponentProps<typeof ReactAriaPopover>;
+
+export const Popover = ({
+  style = {},
+  shouldCloseOnInteractOutside,
+  ...props
+}: PopoverProps) => {
+  const ref = useRef<HTMLElement>(null);
+
+  const handleFocus = useCallback(
+    (e: FocusEvent) => {
+      if (!ref.current?.contains(e.relatedTarget as Node)) {
+        props.onOpenChange?.(false);
+      }
+    },
+    [props],
+  );
+
+  useEffect(() => {
+    if (!props.isNonModal) return;
+    if (props.isOpen) {
+      ref.current?.addEventListener('focusout', handleFocus);
+    } else {
+      ref.current?.removeEventListener('focusout', handleFocus);
+    }
+  }, [handleFocus, props.isNonModal, props.isOpen]);
+
+  return (
+    <ReactAriaPopover
+      ref={ref}
+      placement="bottom end"
+      offset={1}
+      className={css({
+        ...styles.tooltip,
+        ...styles.lightScrollbar,
+        padding: 0,
+        userSelect: 'none',
+        ...style,
+      })}
+      shouldCloseOnInteractOutside={element => {
+        if (shouldCloseOnInteractOutside) {
+          return shouldCloseOnInteractOutside(element);
+        }
+
+        return true;
+      }}
+      {...props}
+    />
+  );
+};

packages/component-library/src/SpaceBetween.tsx

@@ -0,0 +1,31 @@
+import React, { type CSSProperties, type ReactNode } from 'react';
+
+import { View } from './View';
+
+type SpaceBetweenProps = {
+  direction?: 'horizontal' | 'vertical';
+  gap?: number;
+  style?: CSSProperties;
+  children: ReactNode;
+};
+
+export const SpaceBetween = ({
+  direction = 'horizontal',
+  gap = 15,
+  style,
+  children,
+}: SpaceBetweenProps) => {
+  return (
+    <View
+      style={{
+        flexWrap: 'wrap',
+        flexDirection: direction === 'horizontal' ? 'row' : 'column',
+        alignItems: 'center',
+        gap,
+        ...style,
+      }}
+    >
+      {children}
+    </View>
+  );
+};

packages/component-library/src/Stack.tsx

@@ -0,0 +1,98 @@
+// @ts-strict-ignore
+import React, {
+  Children,
+  type ComponentProps,
+  Fragment,
+  cloneElement,
+  forwardRef,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
+
+import { Text } from './Text';
+import { View } from './View';
+
+function getChildren(key, children) {
+  return Children.toArray(children).reduce(
+    (list, child) => {
+      if (child) {
+        if (
+          typeof child === 'object' &&
+          'type' in child &&
+          child.type === Fragment
+        ) {
+          return list.concat(getChildren(child.key, child.props.children));
+        }
+        list.push({ key: key + child['key'], child });
+        return list;
+      }
+      return list;
+    },
+    [] as Array<{ key: string; child: ReactNode }>,
+  );
+}
+
+type StackProps = ComponentProps<typeof View> & {
+  direction?: CSSProperties['flexDirection'];
+  align?: string;
+  justify?: string;
+  spacing?: number;
+  debug?: boolean;
+};
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      direction = 'column',
+      align,
+      justify,
+      spacing = 3,
+      children,
+      debug,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const isReversed = direction.endsWith('reverse');
+    const isHorizontal = direction.startsWith('row');
+    const validChildren = getChildren('', children);
+
+    return (
+      <View
+        style={{
+          flexDirection: direction,
+          alignItems: align,
+          justifyContent: justify,
+          ...style,
+        }}
+        innerRef={ref}
+        {...props}
+      >
+        {validChildren.map(({ key, child }, index) => {
+          const isLastChild = validChildren.length === index + 1;
+
+          let marginProp;
+          if (isHorizontal) {
+            marginProp = isReversed ? 'marginLeft' : 'marginRight';
+          } else {
+            marginProp = isReversed ? 'marginTop' : 'marginBottom';
+          }
+
+          return cloneElement(
+            typeof child === 'string' ? <Text>{child}</Text> : child,
+            {
+              key,
+              style: {
+                ...(debug && { borderWidth: 1, borderColor: 'red' }),
+                ...(isLastChild ? null : { [marginProp]: spacing * 5 }),
+                ...(child.props ? child.props.style : null),
+              },
+            },
+          );
+        })}
+      </View>
+    );
+  },
+);
+
+Stack.displayName = 'Stack';

packages/component-library/src/Text.tsx

@@ -0,0 +1,30 @@
+import React, {
+  type HTMLProps,
+  type Ref,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+
+import { css, cx } from '@emotion/css';
+
+import { type CSSProperties } from './styles';
+
+type TextProps = HTMLProps<HTMLSpanElement> & {
+  innerRef?: Ref<HTMLSpanElement>;
+  className?: string;
+  children?: ReactNode;
+  style?: CSSProperties;
+};
+
+export const Text = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
+  const { className = '', style, innerRef, ...restProps } = props;
+  return (
+    <span
+      {...restProps}
+      ref={innerRef ?? ref}
+      className={cx(className, css(style))}
+    />
+  );
+});
+
+Text.displayName = 'Text';

packages/component-library/src/TextOneLine.tsx

@@ -1,10 +1,10 @@
 import { type ComponentProps } from 'react';
 
-import Text from './Text';
+import { Text } from './Text';
 
 type TextOneLineProps = ComponentProps<typeof Text>;
 
-export default function TextOneLine({ children, ...props }: TextOneLineProps) {
+export function TextOneLine({ children, ...props }: TextOneLineProps) {
   return (
     <Text
       {...props}

packages/component-library/src/Toggle.tsx

@@ -0,0 +1,88 @@
+import React, { type CSSProperties } from 'react';
+
+import { css } from '@emotion/css';
+
+import { theme } from './theme';
+import { View } from './View';
+
+type ToggleProps = {
+  id: string;
+  isOn: boolean;
+  isDisabled?: boolean;
+  onToggle?: (isOn: boolean) => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export const Toggle = ({
+  id,
+  isOn,
+  isDisabled = false,
+  onToggle,
+  className,
+  style,
+}: ToggleProps) => {
+  return (
+    <View style={style} className={className}>
+      <input
+        id={id}
+        checked={isOn}
+        disabled={isDisabled}
+        onChange={e => onToggle?.(e.target.checked)}
+        className={css({
+          height: 0,
+          width: 0,
+          visibility: 'hidden',
+        })}
+        type="checkbox"
+      />
+      <label
+        data-toggle-container
+        data-on={isOn}
+        className={String(
+          css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            cursor: 'pointer',
+            width: '32px',
+            height: '16px',
+            borderRadius: '100px',
+            position: 'relative',
+            transition: 'background-color .2s',
+            backgroundColor: isOn
+              ? theme.checkboxToggleBackgroundSelected
+              : theme.checkboxToggleBackground,
+          }),
+        )}
+        htmlFor={id}
+      >
+        <span
+          data-toggle
+          data-on={isOn}
+          className={css(
+            {
+              // eslint-disable-next-line rulesdir/typography
+              content: '" "',
+              position: 'absolute',
+              top: '2px',
+              left: '2px',
+              width: '12px',
+              height: '12px',
+              borderRadius: '100px',
+              transition: '0.2s',
+              boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
+              backgroundColor: isDisabled
+                ? theme.checkboxToggleDisabled
+                : '#fff',
+            },
+            isOn && {
+              left: 'calc(100% - 2px)',
+              transform: 'translateX(-100%)',
+            },
+          )}
+        />
+      </label>
+    </View>
+  );
+};

packages/component-library/src/Tooltip.tsx

@@ -0,0 +1,71 @@
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components';
+
+import { styles } from './styles';
+import { View } from './View';
+
+type TooltipProps = Partial<ComponentProps<typeof AriaTooltip>> & {
+  children: ReactNode;
+  content: ReactNode;
+  triggerProps?: Partial<ComponentProps<typeof TooltipTrigger>>;
+};
+
+export const Tooltip = ({
+  children,
+  content,
+  triggerProps = {},
+  ...props
+}: TooltipProps) => {
+  const triggerRef = useRef(null);
+  const [isHovered, setIsHover] = useState(false);
+
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const handlePointerEnter = useCallback(() => {
+    const timeout = setTimeout(() => {
+      setIsHover(true);
+    }, triggerProps.delay ?? 300);
+
+    hoverTimeoutRef.current = timeout;
+  }, [triggerProps.delay]);
+
+  const handlePointerLeave = useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+
+    setIsHover(false);
+  }, []);
+
+  // Force closing the tooltip whenever the disablement state changes
+  useEffect(() => {
+    setIsHover(false);
+  }, [triggerProps.isDisabled]);
+
+  return (
+    <View
+      style={{ minHeight: 'auto', flexShrink: 0, maxWidth: '100%' }}
+      ref={triggerRef}
+      onMouseEnter={handlePointerEnter}
+      onMouseLeave={handlePointerLeave}
+    >
+      <TooltipTrigger
+        isOpen={isHovered && !triggerProps.isDisabled}
+        {...triggerProps}
+      >
+        {children}
+
+        <AriaTooltip triggerRef={triggerRef} style={styles.tooltip} {...props}>
+          {content}
+        </AriaTooltip>
+      </TooltipTrigger>
+    </View>
+  );
+};

packages/component-library/src/View.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef, type HTMLProps, type Ref } from 'react';
+
+import { css, cx } from '@emotion/css';
+
+import { type CSSProperties } from './styles';
+
+type ViewProps = HTMLProps<HTMLDivElement> & {
+  className?: string;
+  style?: CSSProperties;
+  nativeStyle?: CSSProperties;
+  innerRef?: Ref<HTMLDivElement>;
+};
+
+export const View = forwardRef<HTMLDivElement, ViewProps>((props, ref) => {
+  // The default styles are special-cased and pulled out into static
+  // styles, and hardcode the class name here. View is used almost
+  // everywhere and we can avoid any perf penalty that glamor would
+  // incur.
+
+  const { className = '', style, nativeStyle, innerRef, ...restProps } = props;
+  return (
+    <div
+      {...restProps}
+      ref={innerRef ?? ref}
+      style={nativeStyle}
+      className={cx('view', className, css(style))}
+    />
+  );
+});
+
+View.displayName = 'View';

packages/component-library/src/icons/AnimatedLoading.tsx

@@ -0,0 +1,26 @@
+import React, { type SVGProps } from 'react';
+
+import { css, keyframes } from '@emotion/css';
+
+import { SvgLoading } from './Loading';
+
+const rotation = keyframes({
+  '0%': { transform: 'rotate(-90deg)' },
+  '100%': { transform: 'rotate(666deg)' },
+});
+
+export function AnimatedLoading(props: SVGProps<SVGSVGElement>) {
+  return (
+    <span
+      className={css({
+        animationName: rotation,
+        animationDuration: '1.6s',
+        animationTimingFunction: 'cubic-bezier(0.17, 0.67, 0.83, 0.67)',
+        animationIterationCount: 'infinite',
+        lineHeight: 0,
+      })}
+    >
+      <SvgLoading {...props} />
+    </span>
+  );
+}

packages/component-library/src/icons/Loading.tsx

@@ -0,0 +1,33 @@
+import React, { type SVGProps, useState } from 'react';
+
+export const SvgLoading = (props: SVGProps<SVGSVGElement>) => {
+  const { color = 'currentColor' } = props;
+  const [gradientId] = useState('gradient-' + Math.random());
+
+  return (
+    <svg {...props} viewBox="0 0 38 38" style={{ ...props.style }}>
+      <defs>
+        <linearGradient
+          x1="8.042%"
+          y1="0%"
+          x2="65.682%"
+          y2="23.865%"
+          id={gradientId}
+        >
+          <stop stopColor={color} stopOpacity={0} offset="0%" />
+          <stop stopColor={color} stopOpacity={0.631} offset="63.146%" />
+          <stop stopColor={color} offset="100%" />
+        </linearGradient>
+      </defs>
+      <g transform="translate(1 2)" fill="none" fillRule="evenodd">
+        <path
+          d="M36 18c0-9.94-8.06-18-18-18"
+          stroke={'url(#' + gradientId + ')'}
+          strokeWidth={2}
+          fill="none"
+        />
+        <circle fill={color} cx={36} cy={18} r={1} />
+      </g>
+    </svg>
+  );
+};

packages/component-library/src/styles.ts

@@ -0,0 +1,157 @@
+import { keyframes } from '@emotion/css';
+
+import { theme } from './theme';
+import { tokens } from './tokens';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CSSProperties = Record<string, any>;
+
+const MOBILE_MIN_HEIGHT = 40;
+
+const shadowLarge = {
+  boxShadow: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const styles: Record<string, any> = {
+  incomeHeaderHeight: 70,
+  cardShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+  monthRightPadding: 5,
+  menuBorderRadius: 4,
+  mobileMinHeight: MOBILE_MIN_HEIGHT,
+  mobileMenuItem: {
+    fontSize: 17,
+    fontWeight: 400,
+    paddingTop: 8,
+    paddingBottom: 8,
+    height: MOBILE_MIN_HEIGHT,
+    minHeight: MOBILE_MIN_HEIGHT,
+  },
+  mobileEditingPadding: 12,
+  altMenuMaxHeight: 250,
+  altMenuText: {
+    fontSize: 13,
+  },
+  altMenuHeaderText: {
+    fontSize: 13,
+    fontWeight: 700,
+  },
+  veryLargeText: {
+    fontSize: 30,
+    fontWeight: 600,
+  },
+  largeText: {
+    fontSize: 20,
+    fontWeight: 700,
+    letterSpacing: 0.5,
+  },
+  mediumText: {
+    fontSize: 15,
+    fontWeight: 500,
+  },
+  smallText: {
+    fontSize: 13,
+  },
+  verySmallText: {
+    fontSize: 12,
+  },
+  tinyText: {
+    fontSize: 10,
+  },
+  page: {
+    flex: 1,
+    '@media (max-height: 550px)': {
+      minHeight: 700, // ensure we can scroll on small screens
+    },
+    paddingTop: 8, // height of the titlebar
+    [`@media (min-width: ${tokens.breakpoint_small})`]: {
+      paddingTop: 36,
+    },
+  },
+  pageContent: {
+    paddingLeft: 2,
+    paddingRight: 2,
+    [`@media (min-width: ${tokens.breakpoint_small})`]: {
+      paddingLeft: 20,
+      paddingRight: 20,
+    },
+  },
+  settingsPageContent: {
+    padding: 20,
+    [`@media (min-width: ${tokens.breakpoint_small})`]: {
+      padding: 'inherit',
+    },
+  },
+  staticText: {
+    cursor: 'default',
+    userSelect: 'none',
+  },
+  shadow: {
+    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.1)',
+  },
+  shadowLarge,
+  tnum: {
+    // eslint-disable-next-line rulesdir/typography
+    fontFeatureSettings: '"tnum"',
+  },
+  notFixed: { fontFeatureSettings: '' },
+  text: {
+    fontSize: 16,
+    // lineHeight: 22.4 // TODO: This seems like trouble, but what's the right value?
+  },
+  delayedFadeIn: {
+    animationName: keyframes({
+      '0%': { opacity: 0 },
+      '100%': { opacity: 1 },
+    }),
+    animationDuration: '1s',
+    animationFillMode: 'both',
+    animationDelay: '0.5s',
+  },
+  underlinedText: {
+    borderBottom: `2px solid`,
+  },
+  noTapHighlight: {
+    WebkitTapHighlightColor: 'transparent',
+    ':focus': {
+      outline: 'none',
+    },
+  },
+  lineClamp: (lines: number) => {
+    return {
+      display: '-webkit-box',
+      WebkitLineClamp: lines,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'break-word',
+    };
+  },
+  tooltip: {
+    padding: 5,
+    ...shadowLarge,
+    borderWidth: 2,
+    borderRadius: 4,
+    borderStyle: 'solid',
+    borderColor: theme.tooltipBorder,
+    backgroundColor: theme.tooltipBackground,
+    color: theme.tooltipText,
+    overflow: 'auto',
+  },
+  popover: {
+    border: 'none',
+    backgroundColor: theme.menuBackground,
+    color: theme.menuItemText,
+  },
+  // Dynamically set
+  horizontalScrollbar: null as CSSProperties | null,
+  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/component-library/src/theme.ts

@@ -0,0 +1,203 @@
+export const theme = {
+  pageBackground: 'var(--color-pageBackground)',
+  pageBackgroundModalActive: 'var(--color-pageBackgroundModalActive)',
+  pageBackgroundTopLeft: 'var(--color-pageBackgroundTopLeft)',
+  pageBackgroundBottomRight: 'var(--color-pageBackgroundBottomRight)',
+  pageBackgroundLineTop: 'var(--color-pageBackgroundLineTop)',
+  pageBackgroundLineMid: 'var(--color-pageBackgroundLineMid)',
+  pageBackgroundLineBottom: 'var(--color-pageBackgroundLineBottom)',
+  pageText: 'var(--color-pageText)',
+  pageTextLight: 'var(--color-pageTextLight)',
+  pageTextSubdued: 'var(--color-pageTextSubdued)',
+  pageTextDark: 'var(--color-pageTextDark)',
+  pageTextPositive: 'var(--color-pageTextPositive)',
+  pageTextLink: 'var(--color-pageTextLink)',
+  pageTextLinkLight: 'var(--color-pageTextLinkLight)',
+  cardBackground: 'var(--color-cardBackground)',
+  cardBorder: 'var(--color-cardBorder)',
+  cardShadow: 'var(--color-cardShadow)',
+  tableBackground: 'var(--color-tableBackground)',
+  tableRowBackgroundHover: 'var(--color-tableRowBackgroundHover)',
+  tableText: 'var(--color-tableText)',
+  tableTextLight: 'var(--color-tableTextLight)',
+  tableTextSubdued: 'var(--color-tableTextSubdued)',
+  tableTextSelected: 'var(--color-tableTextSelected)',
+  tableTextHover: 'var(--color-tableTextHover)',
+  tableTextInactive: 'var(--color-tableTextInactive)',
+  tableHeaderText: 'var(--color-tableHeaderText)',
+  tableHeaderBackground: 'var(--color-tableHeaderBackground)',
+  tableBorder: 'var(--color-tableBorder)',
+  tableBorderSelected: 'var(--color-tableBorderSelected)',
+  tableBorderHover: 'var(--color-tableBorderHover)',
+  tableBorderSeparator: 'var(--color-tableBorderSeparator)',
+  tableRowBackgroundHighlight: 'var(--color-tableRowBackgroundHighlight)',
+  tableRowBackgroundHighlightText:
+    'var(--color-tableRowBackgroundHighlightText)',
+  tableRowHeaderBackground: 'var(--color-tableRowHeaderBackground)',
+  tableRowHeaderText: 'var(--color-tableRowHeaderText)',
+  sidebarBackground: 'var(--color-sidebarBackground)',
+  sidebarItemBackgroundPending: 'var(--color-sidebarItemBackgroundPending)',
+  sidebarItemBackgroundPositive: 'var(--color-sidebarItemBackgroundPositive)',
+  sidebarItemBackgroundFailed: 'var(--color-sidebarItemBackgroundFailed)',
+  sidebarItemAccentSelected: 'var(--color-sidebarItemAccentSelected)',
+  sidebarItemBackgroundHover: 'var(--color-sidebarItemBackgroundHover)',
+  sidebarItemText: 'var(--color-sidebarItemText)',
+  sidebarItemTextSelected: 'var(--color-sidebarItemTextSelected)',
+  menuBackground: 'var(--color-menuBackground)',
+  menuItemBackground: 'var(--color-menuItemBackground)',
+  menuItemBackgroundHover: 'var(--color-menuItemBackgroundHover)',
+  menuItemText: 'var(--color-menuItemText)',
+  menuItemTextHover: 'var(--color-menuItemTextHover)',
+  menuItemTextSelected: 'var(--color-menuItemTextSelected)',
+  menuItemTextHeader: 'var(--color-menuItemTextHeader)',
+  menuBorder: 'var(--color-menuBorder)',
+  menuBorderHover: 'var(--color-menuBorderHover)',
+  menuKeybindingText: 'var(--color-menuKeybindingText)',
+  menuAutoCompleteBackground: 'var(--color-menuAutoCompleteBackground)',
+  menuAutoCompleteBackgroundHover:
+    'var(--color-menuAutoCompleteBackgroundHover)',
+  menuAutoCompleteText: 'var(--color-menuAutoCompleteText)',
+  menuAutoCompleteTextHover: 'var(--color-menuAutoCompleteTextHover)',
+  menuAutoCompleteTextHeader: 'var(--color-menuAutoCompleteTextHeader)',
+  menuAutoCompleteItemTextHover: 'var(--color-menuAutoCompleteItemTextHover)',
+  menuAutoCompleteItemText: 'var(--color-menuAutoCompleteItemText)',
+  modalBackground: 'var(--color-modalBackground)',
+  modalBorder: 'var(--color-modalBorder)',
+  mobileHeaderBackground: 'var(--color-mobileHeaderBackground)',
+  mobileHeaderText: 'var(--color-mobileHeaderText)',
+  mobileHeaderTextSubdued: 'var(--color-mobileHeaderTextSubdued)',
+  mobileHeaderTextHover: 'var(--color-mobileHeaderTextHover)',
+  mobilePageBackground: 'var(--color-mobilePageBackground)',
+  mobileNavBackground: 'var(--color-mobileNavBackground)',
+  mobileNavItem: 'var(--color-mobileNavItem)',
+  mobileNavItemSelected: 'var(--color-mobileNavItemSelected)',
+  mobileAccountShadow: 'var(--color-mobileAccountShadow)',
+  mobileAccountText: 'var(--color-mobileAccountText)',
+  mobileTransactionSelected: 'var(--color-mobileTransactionSelected)',
+  mobileViewTheme: 'var(--color-mobileViewTheme)',
+  mobileConfigServerViewTheme: 'var(--color-mobileConfigServerViewTheme)',
+  markdownNormal: 'var(--color-markdownNormal)',
+  markdownDark: 'var(--color-markdownDark)',
+  markdownLight: 'var(--color-markdownLight)',
+  buttonMenuText: 'var(--color-buttonMenuText)',
+  buttonMenuTextHover: 'var(--color-buttonMenuTextHover)',
+  buttonMenuBackground: 'var(--color-buttonMenuBackground)',
+  buttonMenuBackgroundHover: 'var(--color-buttonMenuBackgroundHover)',
+  buttonMenuBorder: 'var(--color-buttonMenuBorder)',
+  buttonMenuSelectedText: 'var(--color-buttonMenuSelectedText)',
+  buttonMenuSelectedTextHover: 'var(--color-buttonMenuSelectedTextHover)',
+  buttonMenuSelectedBackground: 'var(--color-buttonMenuSelectedBackground)',
+  buttonMenuSelectedBackgroundHover:
+    'var(--color-buttonMenuSelectedBackgroundHover)',
+  buttonMenuSelectedBorder: 'var(--color-buttonMenuSelectedBorder)',
+  buttonPrimaryText: 'var(--color-buttonPrimaryText)',
+  buttonPrimaryTextHover: 'var(--color-buttonPrimaryTextHover)',
+  buttonPrimaryBackground: 'var(--color-buttonPrimaryBackground)',
+  buttonPrimaryBackgroundHover: 'var(--color-buttonPrimaryBackgroundHover)',
+  buttonPrimaryBorder: 'var(--color-buttonPrimaryBorder)',
+  buttonPrimaryShadow: 'var(--color-buttonPrimaryShadow)',
+  buttonPrimaryDisabledText: 'var(--color-buttonPrimaryDisabledText)',
+  buttonPrimaryDisabledBackground:
+    'var(--color-buttonPrimaryDisabledBackground)',
+  buttonPrimaryDisabledBorder: 'var(--color-buttonPrimaryDisabledBorder)',
+  buttonNormalText: 'var(--color-buttonNormalText)',
+  buttonNormalTextHover: 'var(--color-buttonNormalTextHover)',
+  buttonNormalBackground: 'var(--color-buttonNormalBackground)',
+  buttonNormalBackgroundHover: 'var(--color-buttonNormalBackgroundHover)',
+  buttonNormalBorder: 'var(--color-buttonNormalBorder)',
+  buttonNormalShadow: 'var(--color-buttonNormalShadow)',
+  buttonNormalSelectedText: 'var(--color-buttonNormalSelectedText)',
+  buttonNormalSelectedBackground: 'var(--color-buttonNormalSelectedBackground)',
+  buttonNormalDisabledText: 'var(--color-buttonNormalDisabledText)',
+  buttonNormalDisabledBackground: 'var(--color-buttonNormalDisabledBackground)',
+  buttonNormalDisabledBorder: 'var(--color-buttonNormalDisabledBorder)',
+  buttonBareText: 'var(--color-buttonBareText)',
+  buttonBareTextHover: 'var(--color-buttonBareTextHover)',
+  buttonBareBackground: 'var(--color-buttonBareBackground)',
+  buttonBareBackgroundHover: 'var(--color-buttonBareBackgroundHover)',
+  buttonBareBackgroundActive: 'var(--color-buttonBareBackgroundActive)',
+  buttonBareDisabledText: 'var(--color-buttonBareDisabledText)',
+  buttonBareDisabledBackground: 'var(--color-buttonBareDisabledBackground)',
+  calendarText: 'var(--color-calendarText)',
+  calendarBackground: 'var(--color-calendarBackground)',
+  calendarItemText: 'var(--color-calendarItemText)',
+  calendarItemBackground: 'var(--color-calendarItemBackground)',
+  calendarSelectedBackground: 'var(--color-calendarSelectedBackground)',
+  noticeBackground: 'var(--color-noticeBackground)',
+  noticeBackgroundLight: 'var(--color-noticeBackgroundLight)',
+  noticeBackgroundDark: 'var(--color-noticeBackgroundDark)',
+  noticeText: 'var(--color-noticeText)',
+  noticeTextLight: 'var(--color-noticeTextLight)',
+  noticeTextDark: 'var(--color-noticeTextDark)',
+  noticeTextMenu: 'var(--color-noticeTextMenu)',
+  noticeTextMenuHover: 'var(--color-noticeTextMenuHover)',
+  noticeBorder: 'var(--color-noticeBorder)',
+  warningBackground: 'var(--color-warningBackground)',
+  warningText: 'var(--color-warningText)',
+  warningTextLight: 'var(--color-warningTextLight)',
+  warningTextDark: 'var(--color-warningTextDark)',
+  warningBorder: 'var(--color-warningBorder)',
+  errorBackground: 'var(--color-errorBackground)',
+  errorText: 'var(--color-errorText)',
+  errorTextDark: 'var(--color-errorTextDark)',
+  errorTextDarker: 'var(--color-errorTextDarker)',
+  errorTextMenu: 'var(--color-errorTextMenu)',
+  errorBorder: 'var(--color-errorBorder)',
+  upcomingBackground: 'var(--color-upcomingBackground)',
+  upcomingText: 'var(--color-upcomingText)',
+  upcomingBorder: 'var(--color-upcomingBorder)',
+  formLabelText: 'var(--color-formLabelText)',
+  formLabelBackground: 'var(--color-formLabelBackground)',
+  formInputBackground: 'var(--color-formInputBackground)',
+  formInputBackgroundSelected: 'var(--color-formInputBackgroundSelected)',
+  formInputBackgroundSelection: 'var(--color-formInputBackgroundSelection)',
+  formInputBorder: 'var(--color-formInputBorder)',
+  formInputTextReadOnlySelection: 'var(--color-formInputTextReadOnlySelection)',
+  formInputBorderSelected: 'var(--color-formInputBorderSelected)',
+  formInputText: 'var(--color-formInputText)',
+  formInputTextSelected: 'var(--color-formInputTextSelected)',
+  formInputTextPlaceholder: 'var(--color-formInputTextPlaceholder)',
+  formInputTextPlaceholderSelected:
+    'var(--color-formInputTextPlaceholderSelected)',
+  formInputTextSelection: 'var(--color-formInputTextSelection)',
+  formInputShadowSelected: 'var(--color-formInputShadowSelected)',
+  formInputTextHighlight: 'var(--color-formInputTextHighlight)',
+  checkboxText: 'var(--color-checkboxText)',
+  checkboxBackgroundSelected: 'var(--color-checkboxBackgroundSelected)',
+  checkboxBorderSelected: 'var(--color-checkboxBorderSelected)',
+  checkboxShadowSelected: 'var(--color-checkboxShadowSelected)',
+  checkboxToggleBackground: 'var(--color-checkboxToggleBackground)',
+  checkboxToggleBackgroundSelected:
+    'var(--color-checkboxToggleBackgroundSelected)',
+  checkboxToggleDisabled: 'var(--color-checkboxToggleDisabled)',
+  pillBackground: 'var(--color-pillBackground)',
+  pillBackgroundLight: 'var(--color-pillBackgroundLight)',
+  pillText: 'var(--color-pillText)',
+  pillTextHighlighted: 'var(--color-pillTextHighlighted)',
+  pillBorder: 'var(--color-pillBorder)',
+  pillBorderDark: 'var(--color-pillBorderDark)',
+  pillBackgroundSelected: 'var(--color-pillBackgroundSelected)',
+  pillTextSelected: 'var(--color-pillTextSelected)',
+  pillBorderSelected: 'var(--color-pillBorderSelected)',
+  pillTextSubdued: 'var(--color-pillTextSubdued)',
+  reportsRed: 'var(--color-reportsRed)',
+  reportsBlue: 'var(--color-reportsBlue)',
+  reportsGreen: 'var(--color-reportsGreen)',
+  reportsGray: 'var(--color-reportsGray)',
+  reportsLabel: 'var(--color-reportsLabel)',
+  reportsInnerLabel: 'var(--color-reportsInnerLabel)',
+  noteTagBackground: 'var(--color-noteTagBackground)',
+  noteTagBackgroundHover: 'var(--color-noteTagBackgroundHover)',
+  noteTagText: 'var(--color-noteTagText)',
+  budgetOtherMonth: 'var(--color-budgetOtherMonth)',
+  budgetCurrentMonth: 'var(--color-budgetCurrentMonth)',
+  budgetHeaderOtherMonth: 'var(--color-budgetHeaderOtherMonth)',
+  budgetHeaderCurrentMonth: 'var(--color-budgetHeaderCurrentMonth)',
+  floatingActionBarBackground: 'var(--color-floatingActionBarBackground)',
+  floatingActionBarBorder: 'var(--color-floatingActionBarBorder)',
+  floatingActionBarText: 'var(--color-floatingActionBarText)',
+  tooltipText: 'var(--color-tooltipText)',
+  tooltipBackground: 'var(--color-tooltipBackground)',
+  tooltipBorder: 'var(--color-tooltipBorder)',
+  calendarCellBackground: 'var(--color-calendarCellBackground)',
+};

packages/component-library/src/tokens.ts

@@ -0,0 +1,35 @@
+enum BreakpointNames {
+  small = 'small',
+  medium = 'medium',
+  wide = 'wide',
+}
+
+type NumericBreakpoints = {
+  [key in BreakpointNames]: number;
+};
+
+export const breakpoints: NumericBreakpoints = {
+  small: 512,
+  medium: 730,
+  wide: 1100,
+};
+
+type BreakpointsPx = {
+  [B in keyof NumericBreakpoints as `breakpoint_${B}`]: string;
+};
+
+// Provide the same breakpoints in a form usable by CSS media queries
+// {
+//   breakpoint_small: '512px',
+//   breakpoint_medium: '740px',
+//   breakpoint_wide: '1100px',
+// }
+export const tokens: BreakpointsPx = Object.entries(
+  breakpoints,
+).reduce<BreakpointsPx>(
+  (acc, [key, val]) => ({
+    ...acc,
+    [`breakpoint_${key}`]: `${val}px`,
+  }),
+  {} as BreakpointsPx,
+);

packages/crdt/package.json

@@ -17,15 +17,15 @@
   "dependencies": {
     "google-protobuf": "^3.12.0-rc.1",
     "murmurhash": "^2.0.1",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@swc/core": "^1.3.82",
-    "@swc/jest": "^0.2.29",
-    "@types/jest": "^27.5.0",
+    "@swc/core": "^1.5.3",
+    "@swc/jest": "^0.2.36",
+    "@types/jest": "^27.5.2",
     "@types/uuid": "^9.0.2",
-    "jest": "^27.0.0",
+    "jest": "^27.5.1",
     "ts-protoc-gen": "^0.15.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.5.4"
   }
 }

packages/crdt/src/crdt/merkle.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as merkle from './merkle';
 import { Timestamp } from './timestamp';
 

packages/crdt/src/crdt/merkle.ts

@@ -93,7 +93,7 @@ export function diff(trie1: TrieNode, trie2: TrieNode): number | null {
     const keys = [...keyset.values()];
     keys.sort();
 
-    let diffkey = null;
+    let diffkey: null | '0' | '1' | '2' = null;
 
     // Traverse down the trie through keys that aren't the same. We
     // traverse down the keys in order. Stop in two cases: either one
@@ -134,6 +134,7 @@ export function diff(trie1: TrieNode, trie2: TrieNode): number | null {
     node2 = node2[diffkey] || emptyTrie();
   }
 
+  // eslint-disable-next-line no-unreachable
   return null;
 }
 

packages/crdt/src/crdt/timestamp.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Timestamp } from './timestamp';
 
 describe('Timestamp', function () {

packages/crdt/src/crdt/timestamp.ts

@@ -154,7 +154,7 @@ export class Timestamp {
   /**
    * maximum timestamp
    */
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   static max = Timestamp.parse(
     '9999-12-31T23:59:59.999Z-FFFF-FFFFFFFFFFFFFFFF',
   )!;
@@ -267,10 +267,10 @@ export class Timestamp {
       lNew === lOld && lNew === lMsg
         ? Math.max(cOld, cMsg) + 1
         : lNew === lOld
-        ? cOld + 1
-        : lNew === lMsg
-        ? cMsg + 1
-        : 0;
+          ? cOld + 1
+          : lNew === lMsg
+            ? cMsg + 1
+            : 0;
 
     // check the result for drift and counter overflow
     if (lNew - phys > config.maxDrift) {
@@ -294,7 +294,7 @@ export class Timestamp {
   /**
    * zero/minimum timestamp
    */
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   static zero = Timestamp.parse(
     '1970-01-01T00:00:00.000Z-0000-0000000000000000',
   )!;

packages/crdt/tsconfig.dist.json

@@ -3,8 +3,9 @@
   "compilerOptions": {
     // Using ES2021 because that’s the newest version where
     // the latest Node 16.x release supports all of the features
-    "target": "es2021",
+    "target": "ES2021",
     "module": "CommonJS",
+    "moduleResolution": "node10",
     "noEmit": false,
     "declaration": true,
     "strict": true,

packages/desktop-client/.gitignore

@@ -6,18 +6,25 @@ node_modules
 # testing
 coverage
 test-results
+playwright-report
 
 # production
 build
+build-electron
 build-stats
+stats.json
 
 # misc
 .DS_Store
 .env
 npm-debug.log
+.swc
 
 *kcab.*
 public/kcab
 public/data
 public/data-file-index.txt
 public/*.wasm
+
+# translations
+locale/

packages/desktop-client/README.md

@@ -32,31 +32,64 @@ Prerequisites:
 
 #### Running against the local server
 
-First start the dev server:
+First start a dev instance:
 
 ```sh
 HTTPS=true yarn start
 ```
-Next, navigate to the root of your project folder, run the standartised docker container, and launch the visual regression tests from within it.
+
+or using the dev container:
+```
+HTTPS=true docker compose up --build
+```
+
+Note the network IP address and port the dev instance is listening on.
+
+Next, navigate to the root of your project folder, run the standardized docker container, and launch the visual regression tests from within it.
+
+Run via yarn:
+
+```sh
+# By default, this connects to https://localhost:3001
+yarn vrt:docker
+
+    # To use a different ip and port:
+    yarn vrt:docker --e2e-start-url https://ip:port
+
+    # To update snapshots, use the following command:
+    yarn vrt:docker --e2e-start-url https://ip:port --update-snapshots
+```
+
+Run manually:
 
 ```sh
 # Run docker container
-docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.37.0-jammy /bin/bash
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash
 
-    # If you recieve an error such as "docker: invalid reference format", please instead use the following command:
-    docker run --rm --network host -v ${pwd}:/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.37.0-jammy /bin/bash
+    # If you receive an error such as "docker: invalid reference format", please instead use the following command:
+    docker run --rm --network host -v ${pwd}:/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash
 
-# Run the VRT tests: important - they MUST be ran against a HTTPS server
-E2E_START_URL=https://192.168.0.178:3001 yarn vrt
+# Once inside the docker container, run the VRT tests: important - they MUST be ran against a HTTPS server.
+# Use the ip and port noted earlier
+E2E_START_URL=https://ip:port yarn vrt
 
     # To update snapshots, use the following command:
-    E2E_START_URL=https://192.168.0.178:3001 yarn vrt --update-snapshots
+    E2E_START_URL=https://ip:port yarn vrt --update-snapshots
 ```
 
 #### Running against a remote server
 
 You can also run the tests against a remote server by passing the URL:
 
+Run in standardized docker container:
+```sh
+E2E_START_URL=https://my-remote-server.com yarn vrt:docker
+
+    # Or pass in server URL as argument
+    yarn vrt:docker --e2e-start-url https://my-remote-server.com
+```
+
+Run locally:
 ```sh
 E2E_START_URL=https://my-remote-server.com yarn vrt
 ```

packages/desktop-client/bin/build-browser

@@ -8,7 +8,6 @@ echo "Building the browser..."
 rm -fr build
 
 export IS_GENERIC_BROWSER=1
-export INLINE_RUNTIME_CHUNK=false
 export REACT_APP_BACKEND_WORKER_HASH=`ls "$ROOT"/../public/kcab/kcab.worker.*.js |  sed 's/.*kcab\.worker\.\(.*\)\.js/\1/'`
 
 yarn build
@@ -16,4 +15,4 @@ yarn build
 rm -fr build-stats
 mkdir build-stats
 mv build/kcab/stats.json build-stats/loot-core-stats.json
-mv build/stats.json build-stats/desktop-client-stats.json
+mv ./stats.json build-stats/web-stats.json

packages/desktop-client/bin/remove-untranslated-languages

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+// Local path to the cloned translations repository
+const localRepoPath = './packages/desktop-client/locale';
+
+// Compare JSON files and delete incomplete ones
+const processTranslations = () => {
+  try {
+    const files = fs.readdirSync(localRepoPath);
+    const enJsonPath = path.join(localRepoPath, 'en.json');
+
+    if (!fs.existsSync(enJsonPath)) {
+      throw new Error('en.json not found in the repository.');
+    }
+
+    const enJson = JSON.parse(fs.readFileSync(enJsonPath, 'utf8'));
+    const enKeysCount = Object.keys(enJson).length;
+
+    console.log(`en.json has ${enKeysCount} keys.`);
+
+    files.forEach((file) => {
+      if (file === 'en.json' || path.extname(file) !== '.json') return;
+
+      if (file.startsWith('en-')) {
+        console.log(`Keeping ${file} as it's an English language.`);
+        return;
+      }
+
+      const filePath = path.join(localRepoPath, file);
+      const jsonData = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+      const fileKeysCount = Object.keys(jsonData).length;
+
+      // Calculate the percentage of keys present compared to en.json
+      const percentage = (fileKeysCount / enKeysCount) * 100;
+      console.log(`${file} has ${fileKeysCount} keys (${percentage.toFixed(2)}%).`);
+
+      if (percentage < 50) {
+        fs.unlinkSync(filePath);
+        console.log(`Deleted ${file} due to insufficient keys.`);
+      } else {
+        console.log(`Keeping ${file}.`);
+      }
+    });
+
+    console.log('Processing completed.');
+  } catch (error) {
+    console.error(`Error: ${error.message}`);
+  }
+};
+
+processTranslations();

packages/desktop-client/craco.config.ts

@@ -1,116 +0,0 @@
-const path = require('path');
-
-const {
-  loaderByName,
-  removeLoaders,
-  addAfterLoader,
-  addPlugins,
-} = require('@craco/craco');
-const chokidar = require('chokidar');
-const TerserPlugin = require('terser-webpack-plugin');
-const { IgnorePlugin } = require('webpack');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-if (process.env.CI) {
-  process.env.DISABLE_ESLINT_PLUGIN = 'true';
-}
-
-// Forward Netlify env variables
-if (process.env.REVIEW_ID) {
-  process.env.REACT_APP_REVIEW_ID = process.env.REVIEW_ID;
-}
-
-module.exports = {
-  webpack: {
-    configure: (webpackConfig, { env, paths }) => {
-      webpackConfig.mode =
-        process.env.NODE_ENV === 'development' ? 'development' : 'production';
-
-      // swc-loader
-      addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
-        test: /\.m?[tj]sx?$/,
-        exclude: /node_modules/,
-        loader: require.resolve('swc-loader'),
-      });
-
-      // remove the babel loaders
-      removeLoaders(webpackConfig, loaderByName('babel-loader'));
-
-      addPlugins(webpackConfig, [
-        new BundleAnalyzerPlugin({
-          analyzerMode: 'disabled',
-          generateStatsFile: true,
-        }),
-        // Pikaday throws a warning if Moment.js is not installed however it doesn't
-        // actually require it to be installed. As we don't use Moment.js ourselves
-        // then we can just silence this warning.
-        new IgnorePlugin({
-          contextRegExp: /pikaday$/,
-          resourceRegExp: /moment$/,
-        }),
-      ]);
-
-      webpackConfig.resolve.extensions = [
-        '.web.js',
-        '.web.jsx',
-        '.web.ts',
-        '.web.tsx',
-        '.js',
-        '.jsx',
-        '.ts',
-        '.tsx',
-        ...webpackConfig.resolve.extensions,
-      ];
-
-      if (process.env.IS_GENERIC_BROWSER) {
-        webpackConfig.resolve.extensions = [
-          '.browser.js',
-          '.browser.jsx',
-          '.browser.ts',
-          '.browser.tsx',
-          ...webpackConfig.resolve.extensions,
-        ];
-      }
-
-      webpackConfig.optimization = {
-        ...webpackConfig.optimization,
-        minimize:
-          process.env.CI === 'true' || process.env.NODE_ENV !== 'development',
-        minimizer: [
-          new TerserPlugin({
-            minify: TerserPlugin.swcMinify,
-            // `terserOptions` options will be passed to `swc` (`@swc/core`)
-            // Link to options - https://swc.rs/docs/config-js-minify
-            terserOptions: {
-              compress: false,
-              mangle: true,
-            },
-          }),
-        ],
-      };
-
-      return webpackConfig;
-    },
-  },
-  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
-    devServerConfig.onBeforeSetupMiddleware = server => {
-      chokidar
-        .watch([
-          path.resolve('../loot-core/lib-dist/*.js'),
-          path.resolve('../loot-core/lib-dist/browser/*.js'),
-        ])
-        .on('all', function () {
-          for (const ws of server.webSocketServer.clients) {
-            ws.send(JSON.stringify({ type: 'static-changed' }));
-          }
-        });
-    };
-    devServerConfig.headers = {
-      ...devServerConfig.headers,
-      'Cross-Origin-Opener-Policy': 'same-origin',
-      'Cross-Origin-Embedder-Policy': 'require-corp',
-    };
-
-    return devServerConfig;
-  },
-};

packages/desktop-client/e2e/accounts.mobile.test.ts

@@ -0,0 +1,65 @@
+import { type Page } from '@playwright/test';
+
+import { expect, test } from './fixtures';
+import { ConfigurationPage } from './page-models/configuration-page';
+import { MobileNavigation } from './page-models/mobile-navigation';
+
+test.describe('Mobile Accounts', () => {
+  let page: Page;
+  let navigation: MobileNavigation;
+  let configurationPage: ConfigurationPage;
+
+  test.beforeEach(async ({ browser }) => {
+    page = await browser.newPage();
+    navigation = new MobileNavigation(page);
+    configurationPage = new ConfigurationPage(page);
+
+    await page.setViewportSize({
+      width: 350,
+      height: 600,
+    });
+    await page.goto('/');
+    await configurationPage.createTestFile();
+  });
+
+  test.afterEach(async () => {
+    await page.close();
+  });
+
+  test('opens the accounts page and asserts on balances', async () => {
+    const accountsPage = await navigation.goToAccountsPage();
+    await accountsPage.waitFor();
+
+    const account = await accountsPage.getNthAccount(1);
+
+    await expect(account.name).toHaveText('Ally Savings');
+    await expect(account.balance).toHaveText('7,653.00');
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('opens individual account page and checks that filtering is working', async () => {
+    const accountsPage = await navigation.goToAccountsPage();
+    await accountsPage.waitFor();
+
+    const accountPage = await accountsPage.openNthAccount(0);
+    await accountPage.waitFor();
+
+    await expect(accountPage.heading).toHaveText('Bank of America');
+    await expect(accountPage.transactionList).toBeVisible();
+    await expect(await accountPage.getBalance()).toBeGreaterThan(0);
+    await expect(accountPage.noTransactionsMessage).not.toBeVisible();
+    await expect(page).toMatchThemeScreenshots();
+
+    await accountPage.searchByText('nothing should be found');
+    await expect(accountPage.noTransactionsMessage).toBeVisible();
+    await expect(accountPage.transactions).toHaveCount(0);
+    await expect(page).toMatchThemeScreenshots();
+
+    await accountPage.clearSearch();
+    await expect(accountPage.transactions).not.toHaveCount(0);
+
+    await accountPage.searchByText('Kroger');
+    await expect(accountPage.transactions).not.toHaveCount(0);
+    await expect(page).toMatchThemeScreenshots();
+  });
+});

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

@@ -1,53 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { ConfigurationPage } from './page-models/configuration-page';
-import { Navigation } from './page-models/navigation';
-
-test.describe('Accounts', () => {
-  let page;
-  let navigation;
-  let configurationPage;
-
-  test.beforeAll(async ({ browser }) => {
-    page = await browser.newPage();
-    navigation = new Navigation(page);
-    configurationPage = new ConfigurationPage(page);
-
-    await page.goto('/');
-    await configurationPage.createTestFile();
-  });
-
-  test.afterAll(async () => {
-    await page.close();
-  });
-
-  test('creates a new account and views the initial balance transaction', async () => {
-    const accountPage = await navigation.createAccount({
-      name: 'New Account',
-      offBudget: false,
-      balance: 100,
-    });
-
-    const transaction = accountPage.getNthTransaction(0);
-    await expect(transaction.payee).toHaveText('Starting Balance');
-    await expect(transaction.notes).toHaveText('');
-    await expect(transaction.category).toHaveText('Starting Balances');
-    await expect(transaction.debit).toHaveText('');
-    await expect(transaction.credit).toHaveText('100.00');
-    await expect(page).toMatchThemeScreenshots();
-  });
-
-  test('closes an account', async () => {
-    const accountPage = await navigation.goToAccountPage('Roth IRA');
-
-    await expect(accountPage.accountName).toHaveText('Roth IRA');
-
-    const modal = await accountPage.clickCloseAccount();
-    await modal.selectTransferAccount('Vanguard 401k');
-    await expect(page).toMatchThemeScreenshots();
-    await modal.closeAccount();
-
-    await expect(accountPage.accountName).toHaveText('Closed: Roth IRA');
-    await expect(page).toMatchThemeScreenshots();
-  });
-});