Force react-error-overlay to 6.0.9 to fix error

2022-08-12 00:26:56 -04:00
446 changed files with 87521 additions and 27751 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -0,0 +1,121 @@
+default_config: &default_config
+  environment:
+    SENTRY_ORG: shift-reset-llc
+    SENTRY_PROJECT: actual
+    YARN_CACHE_FOLDER: ~/.cache/yarn
+    CSC_LINK: ~/windows-shift-reset-llc.p12
+
+cached_files: &cached_files
+  paths:
+    - ~/.cache/yarn
+    - node_modules
+    - ./packages/desktop-electron/node_modules
+    - ./packages/loot-core/node_modules
+    - ./mobile/node_modules
+    - ./import-ynab4/node_modules
+    - ./api/node_modules
+    - ./node-libofx/node_modules
+    - ./loot-design/node_modules
+    - ./desktop-client/node_modules
+  key: v3-dependencies-{{ checksum "yarn.lock" }}
+
+version_tag_only: &version_tag_only
+  filters:
+    branches:
+      ignore: /.*/
+    tags:
+      only: /^\d+\.\d+\.\d+$/
+
+version: 2.1
+
+orbs:
+  win: circleci/windows@2.2.0
+
+jobs:
+  test:
+    <<: *default_config
+
+    docker:
+      - image: circleci/node:16.15.0
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - v3-dependencies-{{ checksum "yarn.lock" }}
+
+      - run: yarn install --pure-lockfile
+
+      - save_cache:
+          <<: *cached_files
+
+      - run: yarn test
+
+  build_windows:
+    <<: *default_config
+
+    executor:
+      name: win/default
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      - run:
+          command: npm install -g @sentry/cli --unsafe-perm
+          shell: bash
+
+      - run:
+          command: echo $WINDOWS_CERT | base64 --decode >> ${HOME}/windows-shift-reset-llc.p12
+          shell: bash
+
+      - run:
+          command: yarn install --pure-lockfile
+          shell: bash
+
+      - run:
+          command: ./bin/package --release --version ${CIRCLE_TAG}
+          shell: bash
+
+  build_linux:
+    <<: *default_config
+
+    docker:
+      - image: circleci/node:16.15.0
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - v3-dependencies-{{ checksum "yarn.lock" }}
+
+      - run: yarn install --pure-lockfile
+
+      - run: sudo npm install -g @sentry/cli --unsafe-perm
+
+      - run: ./bin/package --release --version ${CIRCLE_TAG}
+
+workflows:
+  version: 2
+  test:
+    jobs:
+      - test
+  build_version:
+    jobs:
+      - test:
+          <<: *version_tag_only
+      - build_windows:
+          <<: *version_tag_only
+          requires:
+            - test
+      - build_linux:
+          <<: *version_tag_only
+          requires:
+            - test
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,39 +0,0 @@
-module.exports = {
-  plugins: ['prettier', 'import'],
-  extends: ['react-app'],
-  rules: {
-    'prettier/prettier': 'error',
-    'no-unused-vars': 'off',
-    'no-loop-func': 'off',
-    'no-restricted-globals': 'off',
-
-    'import/no-useless-path-segments': 'error',
-    'import/order': [
-      'error',
-      {
-        alphabetize: {
-          caseInsensitive: true,
-          order: 'asc'
-        },
-        groups: [
-          'builtin', // Built-in types are first
-          'external',
-          ['sibling', 'parent'], // Then sibling and parent types. They can be mingled together
-          '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']
-      }
-    ]
-  }
-};
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@ -1,77 +0,0 @@
-name: Bug Report
-description: File a bug report also known as an issue or problem.
-title: '[Bug]: '
-labels: ['bug', 'needs triage']
-body:
-  - type: markdown
-    id: intro-md
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report! Please ensure you provide as much information as asked to better assist in confirming and identifying a fix for the bug report.
-  - type: dropdown
-    id: existing-issue
-    attributes:
-      label: 'Verified issue does not already exist?'
-      description: 'Please search to see if an issue already exists for the issue you encountered.'
-      options:
-        - 'I have searched and found no existing issue'
-    validations:
-      required: true
-  - type: textarea
-    id: what-happened
-    attributes:
-      label: What happened?
-      description: Also tell us, what did you expect to happen?
-      placeholder: Tell us what you see!
-      value: 'A bug happened!'
-    validations:
-      required: true
-  - type: textarea
-    id: errors-received
-    attributes:
-      label: 'What error did you receive?'
-      description: 'If you received an error or a message on the screen, please provide that here.'
-    validations:
-      required: false
-  - type: markdown
-    id: env-info
-    attributes:
-      value: '## Environment Details'
-  - type: dropdown
-    id: hosting
-    attributes:
-      label: Where are you hosting Actual?
-      description: Where are you running your instance of Actual from?
-      options:
-        - Locally via Yarn
-        - Docker
-        - Fly.io
-        - NAS
-        - Other
-    validations:
-      required: false
-  - type: dropdown
-    id: browsers
-    attributes:
-      label: What browsers are you seeing the problem on?
-      multiple: true
-      options:
-        - Firefox
-        - Chrome
-        - Safari
-        - Microsoft Edge
-        - Other
-  - type: dropdown
-    id: operating-system
-    attributes:
-      label: Operating System
-      description: What operating system are you using?
-      options:
-        - Windows 11
-        - Windows 10
-        - Mac OSX
-        - Linux
-        - Mobile Device
-        - Other
-    validations:
-      required: false
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -1,5 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Feature Request?
-    url: https://github.com/actualbudget/actual/discussions/new?category=ideas
-    about: Website is hosted via GitHub Discussions under actualbudget/actual
--- a/.github/actions/setup/action.yml
+++ b/.github/actions/setup/action.yml
@ -6,7 +6,7 @@ runs:
    - name: Install node
      uses: actions/setup-node@v1
      with:
-        node-version: 16.15.0
+        node-version: 16
    - name: Cache
      uses: actions/cache@v2
      id: cache
--- a/.github/workflows/opened-issues-triage.yml
+++ b/.github/workflows/opened-issues-triage.yml
@ -1,14 +0,0 @@
-name: Mark new issue for triage
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  needs-triage:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions-ecosystem/action-add-labels@v1
-        with:
-          labels: needs triage
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@ -1,22 +0,0 @@
-name: Close inactive issues
-on:
-  schedule:
-    - cron: "30 1 * * *"
-
-jobs:
-  close-issues:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-    steps:
-      - uses: actions/stale@v5
-        with:
-          days-before-issue-stale: 90
-          days-before-issue-close: -1
-          stale-issue-label: "stale"
-          stale-issue-message: "🚧🚨 This issue is being marked as stale due to 90 days of inactivity. 🚧🚨"
-          days-before-pr-stale: -1
-          days-before-pr-close: -1
-          only-labels: 'needs triage'
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -1,18 +0,0 @@
-name: Test
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches: '*'
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Set up environment
-        uses: ./.github/actions/setup
-      - name: Test
-        run: yarn test
--- a/.gitignore
+++ b/.gitignore
@ -20,12 +20,3 @@ bundle.mobile.js.map
 export-2020-01-10.csv

 **/*.log
-
-# Yarn
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -1,4 +0,0 @@
-{
-    "singleQuote": true,
-    "trailingComma": "none"
-}
--- a/.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+++ b/.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
--- a/.yarn/releases/yarn-3.2.0.cjs
+++ b/.yarn/releases/yarn-3.2.0.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -1,7 +0,0 @@
-nodeLinker: node-modules
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
--- a/README.md
+++ b/README.md
@ -1,39 +1,72 @@
-## Getting Started
+This is the source code for [Actual](https://actualbudget.com), a local-first personal finance tool. It is 100% free and open-source.

-Actual is a local-first personal finance tool. It is 100% free and open-source, written in NodeJS, it has a synchronization element so that all your changes can move between devices without any heavy lifting.
+If you are only interested in running the latest version, you don't need this repo. You can get the latest version through npm.

-If you are interested in contributing, or want to know how development works, see [CONTRIBUTING.md](https://github.com/actualbudget/actual/blob/master/CONTRIBUTING.md) we would love to have you.
+More docs are available in the [docs](https://github.com/actualbudget/actual/tree/master/docs) folder.

-Want to say thanks? Click the ⭐ at the top of the page.
+If you are interested in contributing, or want to know how development works, see [CONTRIBUTING.md](https://github.com/actualbudget/actual/blob/master/CONTRIBUTING.md)

-## Key Links
-
-* Actual [discord](https://discord.gg/pRYNYr4W5A) community.
-* Actual [Community Documentation](https://actualbudget.github.io/docs)
+Join the [discord](https://discord.gg/pRYNYr4W5A)!

 ## 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.
-
-**Please Note:** While the Actual repository holds source code for the mobile applications that were supported when Actual was closed source, these are no longer supported on the Open Source version of Actual.
-
 ### The easy way: using a server (recommended)

 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.

-You can get up and running quickly and easily by following our [Running Actual Locally Guide](https://actualbudget.github.io/docs/Installing/Local/your-own-machine)
+```
+git clone https://github.com/actualbudget/actual-server.git
+cd actual-server
+yarn install
+yarn start
+```

-## Documentation
+Navigate to https://localhost:5006 in your browser and you will see Actual.

-We have a wide range of documentation on how to use Actual, this is all available in our [Community Documentation](https://actualbudget.github.io/docs), this includes topics on Budgeting, Account Management, Tips & Tricks and some documentation for developers.
+You should deploy the server somewhere so you can access your data from anywhere. See instructions on the [actual-server](https://github.com/actualbudget/actual-server) repo.
+
+### Without a server
+
+This will give you a fully local web app without a server. This npm package is the `packages/desktop-client` package in this repo built for production:
+
+```
+yarn add @actual-app/web
+```
+
+Now you need to serve the files in `node_modules/@actual-app/web/build`. One way to do it:
+
+```
+cd node_modules/@actual-app/web/build
+npx http-server .
+```
+
+Navigate to http://localhost:8080 and you should see Actual.
+
+## Building
+
+If you want to build the latest version, see [releasing.md](https://github.com/actualbudget/actual/blob/master/docs/releasing.md). It provides instructions for building this code into the same artifacts that come from npm.
+
+## Run locally
+
+Both the electron and web app can started with a single command. When running in development, it will store data in a `data` directory in the root of the `actual` directory.
+
+First, make sure to run `yarn install` to install all dependencies.
+
+In the root of the project:
+
+```
+yarn start            # Run the electron app
+yarn start:browser    # Run the web app
+```

 ## Code structure

-The Actual app is split up into a few packages:
+The app is split up into a few packages:

 * loot-core - The core application that runs on any platform
 * loot-design - The generic design components that make up the UI
 * desktop-client - The desktop UI
 * desktop-electron - The desktop app
+* mobile - The mobile app

-More information on the project structure is available in our [community documentation](https://actualbudget.github.io/docs/Developers/project-layout).
+More docs are available in the [docs](https://github.com/actualbudget/actual/tree/master/docs) folder.
--- a/bin/package
+++ b/bin/package
@ -80,14 +80,27 @@ if [[ $CI != true && "$OSTYPE" == "darwin"* ]]; then
    yarn lint
 fi

-yarn patch-package
+./node_modules/.bin/patch-package

-yarn workspace mobile patch-package
+(
+  cd packages/loot-design;
+  ../../node_modules/.bin/patch-package
+)

-yarn workspace loot-core build:node
+(
+  cd packages/mobile;
+  ../../node_modules/.bin/patch-package
+)

-yarn workspace @actual-app/web build
+(
+  cd packages/loot-core;
+  NODE_ENV=production yarn build:node
+)

+(
+  cd packages/desktop-client;
+  yarn build
+)

 rm -fr packages/desktop-electron/client-build
 cp -r packages/desktop-client/build packages/desktop-electron/client-build
--- a/bin/package-browser
+++ b/bin/package-browser
@ -56,8 +56,19 @@ if [ $CI != true ]; then
    yarn lint
 fi

-ACTUAL_RELEASE_TYPE=$RELEASE yarn workspace loot-core build:browser
+(
+  cd packages/loot-design;
+  ../../node_modules/.bin/patch-package
+)

-REACT_APP_RELEASE_TYPE=$RELEASE yarn workspace @actual-app/web build:browser
+(
+  cd packages/loot-core;
+  ACTUAL_RELEASE_TYPE=$RELEASE yarn build:browser
+)
+
+(
+  cd packages/desktop-client;
+  REACT_APP_RELEASE_TYPE=$RELEASE yarn build:browser
+)

 echo "packages/desktop-client/build"
--- a/docs/API.md
+++ b/docs/API.md
@ -0,0 +1,20 @@
+
+Previous docs for the API are [here](https://actualbudget.com/docs/developers/using-the-API/). The API is currently being improved. Previously, the API connected to an existing running instance of Actual. Now the API is bundled and fully isolated, capable of running all of Actual itself. Setting up the API is different because of this.
+
+You need to call `init` and pass it the directory where your files live. Call `load-budget` to load the file you want to work on. After that, you can use the same API as before.
+
+Example:
+
+```js
+let actual = require('@actual-app/api');
+
+await actual.init({
+  config: {
+    dataDir: join(__dirname, 'user-files')
+  }
+});
+
+await actual.internal.send('load-budget', { id: 'My-Finances' });
+
+await actual.getAccounts();
+```
--- a/docs/releasing.md
+++ b/docs/releasing.md
@ -0,0 +1,44 @@
+# How to cut a release
+
+In the open-source version of Actual, all updates go through npm. There are two libraries:
+
+* `@actual-app/api`: The API for the underlying functionality. This includes the entire backend of Actual, meant to be used with node.
+* `@actual-app/web`: A web build that will serve the app with a web frontend. This includes both the frontend and backend of Actual. It includes the backend as well because it's built to be used as a Web Worker.
+
+Both the API and web libraries are versioned together. This may change in the future, but because the web library also brings along its own backend it's easier to maintain a single version for now. That makes it clear which version the backend is regardless of library.
+
+## Releasing `@actual-app/api`
+
+This generates a bundle for the API:
+
+```
+cd packages/loot-core
+yarn build:api
+```
+
+The built files live in `lib-dist`, so we need to copy them to the API package:
+
+```
+cp lib-dist/bundle.api* ../api/app
+```
+
+Next, bump the version on package.json. Finally, publish it:
+
+```
+npm publish
+```
+
+## Releasing `@actual-app/web`
+
+In the root of `actual` (not just `desktop-client`), run this:
+
+```
+./bin/package-browser
+```
+
+This will compile both the backend and the frontend into a single directory in `packages/desktop-client/build`. This directory is all the files that need to be published. After bumping the version, publish `desktop-client`:
+
+```
+cd packages/desktop-client
+npm publish
+```
--- a/jest-babel-transformer-esm.js
+++ b/jest-babel-transformer-esm.js
@ -0,0 +1,24 @@
+const { join, resolve } = require('path');
+const { createTransformer } = require('babel-jest');
+const packagePath = resolve('./');
+
+const packageGlob = join(packagePath, 'packages/*');
+
+module.exports = createTransformer({
+  babelrcRoots: packageGlob,
+
+  // TODO: This is awful and a mess and we should fix it.
+  //
+  // Forcing this on allows certain packages in node_modules to be
+  // exported as ESM, which jest usually errors on. node_modules are
+  // usually not transformed, but you can allowlist one in the
+  // `jest.config.js` for your project like this:
+  //
+  // transformIgnorePatterns: [
+  //   '/node_modules/(?!absurd-sql)'
+  // ],
+  //
+  // Without this explicit plugin, even though Jest transforms the
+  // module it won't recognize ESM
+  plugins: ['@babel/plugin-transform-modules-commonjs']
+});
--- a/jest-babel-transformer.js
+++ b/jest-babel-transformer.js
@ -0,0 +1,9 @@
+const { join, resolve } = require('path');
+const { createTransformer } = require('babel-jest');
+const packagePath = resolve('./');
+
+const packageGlob = join(packagePath, 'packages/*');
+
+module.exports = createTransformer({
+  babelrcRoots: packageGlob
+});
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,8 @@
+module.exports = {
+  projects: [
+    '<rootDir>/packages/loot-core',
+    '<rootDir>/packages/loot-core/jest.web.config.js',
+    '<rootDir>/packages/loot-design',
+    '<rootDir>/packages/loot-design/jest.rn.config.js'
+  ]
+};
--- a/package.json
+++ b/package.json
@ -15,39 +15,75 @@
  "workspaces": {
    "packages": [
      "packages/*"
+    ],
+    "nohoist": [
+      "**/better-sqlite3",
+      "**/better-sqlite3/**",
+      "mobile/react-native",
+      "mobile/react-native-*",
+      "mobile/rn-fetch-blob",
+      "mobile/**/event-target-shim",
+      "mobile/@sentry/react-native",
+      "mobile/nodejs-mobile-react-native",
+      "**/mobile/nodejs-mobile-react-native/**",
+      "**/@react-native-community/**",
+      "**/@react-navigation/**",
+      "mobile/react-navigation",
+      "mobile/react-navigation-tabs",
+      "mobile/rn-snoopy",
+      "mobile/rn-snoopy/**",
+      "mobile/detox",
+      "mobile/detox/**",
+      "mobile/jsc-android",
+      "mobile/jsc-android/**",
+      "**/react-native-web",
+      "**/react-native-web/**",
+      "**/@sentry/cli"
    ]
  },
  "scripts": {
-    "start": "npm-run-all --parallel 'start:desktop-*'",
-    "start:desktop-node": "yarn workspace loot-core watch:node",
-    "start:desktop-client": "yarn workspace @actual-app/web watch",
-    "start:desktop-electron": "yarn workspace Actual watch",
-    "start:browser": "npm-run-all --parallel 'start:browser-*'",
-    "start:browser-backend": "yarn workspace loot-core watch:browser",
-    "start:browser-frontend": "yarn workspace @actual-app/web start:browser",
-    "test": "yarn workspaces foreach --parallel --verbose run test",
-    "test:debug": "yarn workspaces foreach --verbose run test",
+    "start": "npm-run-all --parallel start:desktop-*",
+    "start:desktop-node": "cd packages/loot-core && yarn watch:node",
+    "start:desktop-client": "cd packages/desktop-client && yarn watch",
+    "start:desktop-electron": "cd packages/desktop-electron && yarn watch",
+    "start:browser": "npm-run-all --parallel start:browser-*",
+    "start:browser-backend": "cd packages/loot-core && yarn watch:browser",
+    "start:browser-frontend": "cd packages/desktop-client && yarn start:browser",
+    "test": "./node_modules/.bin/jest --maxWorkers=4",
+    "test:debug": "node ./node_modules/.bin/jest --runInBand --useStderr",
+    "test:debug-brk": "node --inspect-brk ./node_modules/.bin/jest --runInBand",
    "rebuild-electron": "./node_modules/.bin/electron-rebuild -f -m ./packages/loot-core",
-    "rebuild-node": "yarn workspace loot-core rebuild",
-    "lint": "yarn workspaces foreach --verbose run lint",
+    "rebuild-node": "cd packages/loot-core && npm rebuild",
+    "lint": "cd packages/loot-core && yarn lint",
    "postinstall": "rm -rf ./packages/loot-design/node_modules/react && rm -rf ./packages/mobile/node_modules/react && rm -rf ./node_modules/react-native && patch-package"
  },
  "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.18.2",
    "cross-env": "^5.1.5",
    "husky": "^3.0.4",
    "npm-run-all": "^4.1.3",
-    "patch-package": "^6.1.2",
    "prettier": "^1.18.1",
    "pretty-quick": "^1.11.1",
    "shelljs": "^0.8.2",
    "source-map-support": "^0.5.21"
  },
+  "eslintConfig": {
+    "extends": "react-app",
+    "rules": {
+      "no-unused-vars": "off",
+      "no-loop-func": "off",
+      "no-restricted-globals": "off"
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "none"
+  },
  "resolutions": {
    "@babel/preset-env": "^7.15.1",
    "@babel/core": "^7.15.1",
    "@babel/runtime": "^7.15.1",
    "@babel/helper-plugin-utils": "^7.14.5",
    "react-error-overlay": "6.0.9"
-  },
-  "packageManager": "yarn@3.2.0"
+  }
 }
--- a/packages/api/.gitignore
+++ b/packages/api/.gitignore
@ -1 +0,0 @@
-app/bundle.api.js*
--- a/packages/api/app/bundle.api.js
+++ b/packages/api/app/bundle.api.js
--- a/packages/api/app/bundle.api.js.map
+++ b/packages/api/app/bundle.api.js.map
--- a/packages/api/index.js
+++ b/packages/api/index.js
@ -1,7 +1,8 @@
 let bundle = require('./app/bundle.api.js');
-let injected = require('./injected');
 let methods = require('./methods');
 let utils = require('./utils');
+
+let injected = require('./injected');
 let actualApp;

 async function init({ budgetId, config } = {}) {
--- a/packages/api/package.json
+++ b/packages/api/package.json
@ -1,18 +1,9 @@
 {
  "name": "@actual-app/api",
-  "version": "4.1.5",
+  "version": "4.0.2",
  "license": "MIT",
  "description": "An API for Actual",
  "main": "index.js",
-  "files": [
-    "app",
-    "default-db.sqlite",
-    "index.js",
-    "injected.js",
-    "methods.js",
-    "migrations",
-    "utils.js"
-  ],
  "dependencies": {
    "better-sqlite3": "^7.5.0",
    "node-fetch": "^1.6.3",
--- a/packages/api/utils.js
+++ b/packages/api/utils.js
@ -1,5 +1,5 @@
 function amountToInteger(n) {
-  return Math.round(n * 100);
+  return Math.round(n * 100) | 0;
 }

 function integerToAmount(n) {
--- a/packages/desktop-client/config/webpack.config.js
+++ b/packages/desktop-client/config/webpack.config.js
@ -518,10 +518,6 @@ module.exports = function(webpackEnv) {
      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
      // You can remove this if you don't use Moment.js:
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      // 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 webpack.IgnorePlugin(/moment$/, /pikaday$/),
      !(isEnvDevelopment || process.env.PERF_BUILD) &&
        new webpack.IgnorePlugin(/perf-deets\/frontend/),
      // Generate a service worker script that will precache, and keep up to date,
--- a/packages/desktop-client/package.json
+++ b/packages/desktop-client/package.json
@ -1,6 +1,6 @@
 {
  "name": "@actual-app/web",
-  "version": "22.12.03",
+  "version": "4.0.2",
  "license": "MIT",
  "files": [
    "build"
@ -14,6 +14,7 @@
    "@reactions/component": "^2.0.2",
    "@sentry/browser": "6.12.0",
    "@svgr/webpack": "2.4.1",
+    "add": "^2.0.6",
    "babel-eslint": "9.0.0",
    "babel-loader": "8.0.4",
    "babel-preset-jwl-app": "6.1.12",
@ -22,7 +23,6 @@
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "codemirror": "^5.37.0",
-    "cross-env": "^7.0.3",
    "css-loader": "1.0.0",
    "date-fns": "2.0.0-alpha.27",
    "debounce": "^1.2.0",
@ -32,9 +32,8 @@
    "eslint-config-react-app": "3.0.5",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "7.11.1",
    "file-loader": "2.0.0",
    "focus-visible": "^4.1.1",
@ -42,8 +41,10 @@
    "fs-extra": "7.0.0",
    "glamor": "^2.20.40",
    "html-webpack-plugin": "4.0.0-alpha.2",
+    "http-client": "^4.3.1",
    "identity-obj-proxy": "3.0.0",
    "load-js": "^3.0.3",
+    "lodash.memoize": "^4.1.2",
    "mini-css-extract-plugin": "0.4.3",
    "mitt": "^1.1.2",
    "optimize-css-assets-webpack-plugin": "5.0.1",
@ -54,6 +55,7 @@
    "postcss-preset-env": "6.3.1",
    "postcss-safe-parser": "4.0.1",
    "prop-types": "15.6.0",
+    "raven-js": "^3.21.0",
    "react": "16.13.1",
    "react-addons-shallow-compare": "^15.6.0",
    "react-app-polyfill": "^0.1.3",
@ -73,6 +75,7 @@
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "terser-webpack-plugin": "1.1.0",
+    "url-loader": "1.1.1",
    "victory": "^0.26.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.11.0",
@ -82,11 +85,10 @@
  },
  "scripts": {
    "start": "cross-env PORT=3001 node scripts/start.js",
-    "start:browser": "cross-env ./bin/watch-browser",
+    "start:browser": "./bin/watch-browser",
    "watch": "cross-env PORT=3001 node scripts/start.js",
    "build": "cross-env INLINE_RUNTIME_CHUNK=false node scripts/build.js",
-    "build:browser": "cross-env ./bin/build-browser",
-    "lint": "eslint src"
+    "build:browser": "./bin/build-browser"
  },
  "browserslist": [
    "electron 3.0"
--- a/packages/desktop-client/public/data-file-index.txt
+++ b/packages/desktop-client/public/data-file-index.txt
@ -1,5 +1,4 @@
 default-db.sqlite
-migrations/.force-copy-windows
 migrations/1548957970627_remove-db-version.sql
 migrations/1550601598648_payees.sql
 migrations/1555786194328_remove_category_group_unique.sql
@ -15,3 +14,4 @@ migrations/1615745967948_meta.sql
 migrations/1616167010796_accounts_order.sql
 migrations/1618975177358_schedules.sql
 migrations/1632571489012_remove_cache.js
+migrations/.force-copy-windows
--- a/packages/desktop-client/src/components/AnimatedRefresh.js
+++ b/packages/desktop-client/src/components/AnimatedRefresh.js
@ -1,7 +1,5 @@
 import React from 'react';
-
 import { css } from 'glamor';
-
 import { View } from 'loot-design/src/components/common';
 import Refresh from 'loot-design/src/svg/v1/Refresh';

--- a/packages/desktop-client/src/components/App.js
+++ b/packages/desktop-client/src/components/App.js
@ -1,22 +1,19 @@
 import React from 'react';
 import { connect } from 'react-redux';
-
 import { css } from 'glamor';
-
 import * as actions from 'loot-core/src/client/actions';
 import {
  init as initConnection,
  send
 } from 'loot-core/src/platform/client/fetch';
-import { styles, hasHiddenScrollbars } from 'loot-design/src/style';
-
 import installPolyfills from '../polyfills';
-import AppBackground from './AppBackground';
+import { styles, hasHiddenScrollbars } from 'loot-design/src/style';
 import FatalError from './FatalError';
-import FinancesApp from './FinancesApp';
 import ManagementApp from './manager/ManagementApp';
-import MobileWebMessage from './MobileWebMessage';
+import FinancesApp from './FinancesApp';
+import AppBackground from './AppBackground';
 import UpdateNotification from './UpdateNotification';
+import MobileWebMessage from './MobileWebMessage';

 class App extends React.Component {
  state = {
--- a/packages/desktop-client/src/components/AppBackground.js
+++ b/packages/desktop-client/src/components/AppBackground.js
@ -1,12 +1,9 @@
-import React from 'react';
-
-import { css } from 'glamor';
-
+import React, { useState } from 'react';
 import { View, Block } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
-import AnimatedLoading from 'loot-design/src/svg/v1/AnimatedLoading';
-
+import { css } from 'glamor';
 import Background from './Background';
+import AnimatedLoading from 'loot-design/src/svg/v1/AnimatedLoading';
+import { colors } from 'loot-design/src/style';

 function AppBackground({ initializing, loadingText }) {
  return (
--- a/packages/desktop-client/src/components/Background.js
+++ b/packages/desktop-client/src/components/Background.js
@ -1,5 +1,4 @@
 import React from 'react';
-
 import { css } from 'glamor';

 import BG from './manager/bg.svg';
--- a/packages/desktop-client/src/components/BankSyncStatus.js
+++ b/packages/desktop-client/src/components/BankSyncStatus.js
@ -1,11 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
-
 import * as actions from 'loot-core/src/client/actions';
 import { View, Text } from 'loot-design/src/components/common';
 import { colors, styles } from 'loot-design/src/style';
-
 import AnimatedRefresh from './AnimatedRefresh';

 function BankSyncStatus({ accountsSyncing }) {
--- a/packages/desktop-client/src/components/Box.js
+++ b/packages/desktop-client/src/components/Box.js
@ -9,18 +9,14 @@ function getFlex(flex) {
 }

 function Box({ flex, children, direction, style }) {
-  return (
-    <div
+  return <div
      style={{
        ...style,
        flex: getFlex(flex),
        display: 'flex',
        flexDirection: direction || 'column'
      }}
-    >
-      {children}
-    </div>
-  );
+    >{children}</div>;
 }

 export default Box;
--- a/packages/desktop-client/src/components/Debugger.js
+++ b/packages/desktop-client/src/components/Debugger.js
@ -1,19 +1,18 @@
 import React from 'react';
-
-import CodeMirror from 'codemirror';
-
-import * as spreadsheet from 'loot-core/src/client/sheetql/spreadsheet';
+import PropTypes from 'prop-types';
 import {
  send,
  init as initConnection
 } from 'loot-core/src/platform/client/fetch';
+import * as spreadsheet from 'loot-core/src/client/sheetql/spreadsheet';
+import CodeMirror from 'codemirror';
 import {
  View,
  Button,
  Input,
  InlineField
 } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
+import { styles, colors } from 'loot-design/src/style';

 require('codemirror/lib/codemirror.css');
 require('codemirror/theme/monokai.css');
@ -207,7 +206,7 @@ class Debugger extends React.Component {
                  height: 10,
                  backgroundColor: '#303030',
                  marginRight: 10,
-                  borderRadius: 10
+                  borderRadius: 10,
                }}
              />
              <Button onClick={this.toggleRecord} style={{ marginRight: 10 }}>
--- a/packages/desktop-client/src/components/FatalError.js
+++ b/packages/desktop-client/src/components/FatalError.js
@ -1,5 +1,4 @@
 import React from 'react';
-
 import {
  View,
  Stack,
@ -100,9 +99,7 @@ class FatalError extends React.Component {
              .
            </P>
            <P>
-              <Button onClick={() => window.Actual.relaunch()}>
-                {buttonText}
-              </Button>
+              <Button onClick={() => window.Actual.relaunch()}>{buttonText}</Button>
            </P>
            <P isLast={true} style={{ fontSize: 11 }}>
              <Link
--- a/packages/desktop-client/src/components/FinancesApp.js
+++ b/packages/desktop-client/src/components/FinancesApp.js
@ -1,41 +1,40 @@
 import React, { useMemo } from 'react';
+import { Router, Route, Redirect, Switch, useLocation } from 'react-router-dom';
+import { createBrowserHistory } from 'history';
+import { connect } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import Backend from 'react-dnd-html5-backend';
-import { connect } from 'react-redux';
-import { Router, Route, Redirect, Switch, useLocation } from 'react-router-dom';
-
-import { createBrowserHistory } from 'history';
 import hotkeys from 'hotkeys-js';
-
 import * as actions from 'loot-core/src/client/actions';
-import { AccountsProvider } from 'loot-core/src/client/data-hooks/accounts';
-import { PayeesProvider } from 'loot-core/src/client/data-hooks/payees';
 import { SpreadsheetProvider } from 'loot-core/src/client/SpreadsheetProvider';
 import checkForUpgradeNotifications from 'loot-core/src/client/upgrade-notifications';
-import * as undo from 'loot-core/src/platform/client/undo';
-import { BudgetMonthCountProvider } from 'loot-design/src/components/budget/BudgetMonthCountContext';
-import { View } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
-
-import { getLocationState, makeLocationState } from '../util/location-state';
-import Account from './accounts/Account';
-import { ActiveLocationProvider } from './ActiveLocation';
+import { View } from 'loot-design/src/components/common';
 import BankSyncStatus from './BankSyncStatus';
-import Budget from './budget';
-import FloatableSidebar, { SidebarProvider } from './FloatableSidebar';
-import GlobalKeys from './GlobalKeys';
-import Modals from './Modals';
-import Notifications from './Notifications';
+import { BudgetMonthCountProvider } from 'loot-design/src/components/budget/BudgetMonthCountContext';
+import * as undo from 'loot-core/src/platform/client/undo';
 import { PageTypeProvider } from './Page';
+import { getLocationState } from '../util/location-state';
+import { ActiveLocationProvider } from './ActiveLocation';
+import { makeLocationState } from '../util/location-state';
+import { PayeesProvider } from 'loot-core/src/client/data-hooks/payees';
+import { AccountsProvider } from 'loot-core/src/client/data-hooks/accounts';
+
+import Titlebar, { TitlebarProvider } from './Titlebar';
+import FloatableSidebar, { SidebarProvider } from './FloatableSidebar';
+import Account from './accounts/Account';
+import Budget from './budget';
 import Reports from './reports';
 import Schedules from './schedules';
-import DiscoverSchedules from './schedules/DiscoverSchedules';
 import EditSchedule from './schedules/EditSchedule';
 import LinkSchedule from './schedules/LinkSchedule';
+import DiscoverSchedules from './schedules/DiscoverSchedules';
 import PostsOfflineNotification from './schedules/PostsOfflineNotification';
-import Settings from './Settings';
-import Titlebar, { TitlebarProvider } from './Titlebar';
 import FixSplitsTool from './tools/FixSplitsTool';
+import Settings from './Settings';
+import Modals from './Modals';
+import Notifications from './Notifications';
+import GlobalKeys from './GlobalKeys';
 // import Debugger from './Debugger';

 function URLBar() {
@ -278,4 +277,7 @@ function FinancesAppWithContext(props) {
  );
 }

-export default connect(null, actions)(FinancesAppWithContext);
+export default connect(
+  null,
+  actions
+)(FinancesAppWithContext);
--- a/packages/desktop-client/src/components/FloatableSidebar.js
+++ b/packages/desktop-client/src/components/FloatableSidebar.js
@ -1,9 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-
 import mitt from 'mitt';
-
 import * as actions from 'loot-core/src/client/actions';
 import { View } from 'loot-design/src/components/common';
 import { SIDEBAR_WIDTH } from 'loot-design/src/components/sidebar';
--- a/packages/desktop-client/src/components/GlobalKeys.js
+++ b/packages/desktop-client/src/components/GlobalKeys.js
@ -1,6 +1,5 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-
 import Platform from 'loot-core/src/client/platform';

 class GlobalKeys extends React.Component {
--- a/packages/desktop-client/src/components/LoggedInUser.js
+++ b/packages/desktop-client/src/components/LoggedInUser.js
@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-
 import * as actions from 'loot-core/src/client/actions';
+import { send } from 'loot-core/src/platform/client/fetch';
 import {
  View,
  Text,
@ -11,6 +11,7 @@ import {
  Menu
 } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+import ExclamationSolid from 'loot-design/src/svg/v1/ExclamationSolid';

 function LoggedInUser({
  history,
--- a/packages/desktop-client/src/components/MobileWebMessage.js
+++ b/packages/desktop-client/src/components/MobileWebMessage.js
@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-
 import {
  View,
  Text,
--- a/packages/desktop-client/src/components/Modals.js
+++ b/packages/desktop-client/src/components/Modals.js
@ -1,31 +1,30 @@
 import React from 'react';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
-
-import Component from '@reactions/component';
 import { createLocation } from 'history';
-import { bindActionCreators } from 'redux';
-
+import Component from '@reactions/component';
 import * as actions from 'loot-core/src/client/actions';
 import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
-import CloseAccount from 'loot-design/src/components/modals/CloseAccount';
-import ConfigureLinkedAccounts from 'loot-design/src/components/modals/ConfigureLinkedAccounts';
-import CreateLocalAccount from 'loot-design/src/components/modals/CreateLocalAccount';
-import EditField from 'loot-design/src/components/modals/EditField';
-import ImportTransactions from 'loot-design/src/components/modals/ImportTransactions';
-import LoadBackup from 'loot-design/src/components/modals/LoadBackup';
-import PlaidExternalMsg from 'loot-design/src/components/modals/PlaidExternalMsg';
-import SelectLinkedAccounts from 'loot-design/src/components/modals/SelectLinkedAccounts';
+import { getModalRoute } from '../util';

-import ConfirmCategoryDelete from './modals/ConfirmCategoryDelete';
 import CreateAccount from './modals/CreateAccount';
-import CreateEncryptionKey from './modals/CreateEncryptionKey';
-import EditRule from './modals/EditRule';
-import FixEncryptionKey from './modals/FixEncryptionKey';
-import ManageRules from './modals/ManageRules';
-import MergeUnusedPayees from './modals/MergeUnusedPayees';
-import WelcomeScreen from './modals/WelcomeScreen';
+import CreateLocalAccount from 'loot-design/src/components/modals/CreateLocalAccount';
+import CloseAccount from 'loot-design/src/components/modals/CloseAccount';
+import SelectLinkedAccounts from 'loot-design/src/components/modals/SelectLinkedAccounts';
+import ConfigureLinkedAccounts from 'loot-design/src/components/modals/ConfigureLinkedAccounts';
+import LoadBackup from 'loot-design/src/components/modals/LoadBackup';
 import ManagePayeesWithData from './payees/ManagePayeesWithData';
+import ManageRules from './modals/ManageRules';
+import EditRule from './modals/EditRule';
+import MergeUnusedPayees from './modals/MergeUnusedPayees';
+import PlaidExternalMsg from 'loot-design/src/components/modals/PlaidExternalMsg';
+import ConfirmCategoryDelete from './modals/ConfirmCategoryDelete';
+import WelcomeScreen from './modals/WelcomeScreen';
+import ImportTransactions from 'loot-design/src/components/modals/ImportTransactions';
+import CreateEncryptionKey from './modals/CreateEncryptionKey';
+import FixEncryptionKey from './modals/FixEncryptionKey';
+import EditField from 'loot-design/src/components/modals/EditField';

 function Modals({
  history,
--- a/packages/desktop-client/src/components/Notifications.js
+++ b/packages/desktop-client/src/components/Notifications.js
@ -1,8 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { connect } from 'react-redux';
-
 import { bindActionCreators } from 'redux';
-
+import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
 import {
  View,
@ -12,9 +10,9 @@ import {
  Stack,
  ExternalLink
 } from 'loot-design/src/components/common';
-import { styles, colors } from 'loot-design/src/style';
 import Delete from 'loot-design/src/svg/Delete';
 import Loading from 'loot-design/src/svg/v1/AnimatedLoading';
+import { styles, colors } from 'loot-design/src/style';

 function compileMessage(message, actions, setLoading, onRemove) {
  return (
--- a/packages/desktop-client/src/components/Page.js
+++ b/packages/desktop-client/src/components/Page.js
@ -1,8 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-
 import { Modal, View, Text } from 'loot-design/src/components/common';
-import { styles } from 'loot-design/src/style';
+import { colors, styles } from 'loot-design/src/style';

 let PageTypeContext = React.createContext({ type: 'page' });

--- a/packages/desktop-client/src/components/Settings.js
+++ b/packages/desktop-client/src/components/Settings.js
@ -1,23 +1,28 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { Route, Switch, Redirect } from 'react-router-dom';
-
 import { css } from 'glamor';
-
+import { Route, Switch, Redirect } from 'react-router-dom';
 import * as actions from 'loot-core/src/client/actions';
-import Platform from 'loot-core/src/client/platform';
-import { send, listen } from 'loot-core/src/platform/client/fetch';
-import { numberFormats } from 'loot-core/src/shared/util';
-import { Information } from 'loot-design/src/components/alerts';
 import {
  View,
  Text,
  Button,
+  ButtonLink,
  ButtonWithLoading,
-  AnchorLink
+  AnchorLink,
+  Link,
+  Input
 } from 'loot-design/src/components/common';
+import { send, listen } from 'loot-core/src/platform/client/fetch';
+import { numberFormats } from 'loot-core/src/shared/util';
 import { styles, colors } from 'loot-design/src/style';
+import { Information, Warning, Error } from 'loot-design/src/components/alerts';
+import Checkmark from 'loot-design/src/svg/v1/Checkmark';
+import CheveronDown from 'loot-design/src/svg/v1/CheveronDown';
 import ExpandArrow from 'loot-design/src/svg/ExpandArrow';
+import ExclamationSolid from 'loot-design/src/svg/v1/ExclamationSolid';
+import Platform from 'loot-core/src/client/platform';

 import useServerVersion from '../hooks/useServerVersion';

--- a/packages/desktop-client/src/components/SidebarWithData.js
+++ b/packages/desktop-client/src/components/SidebarWithData.js
@ -1,20 +1,21 @@
 import React, { useState, useEffect } from 'react';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-
-import { bindActionCreators } from 'redux';
-
-import * as actions from 'loot-core/src/client/actions';
-import * as queries from 'loot-core/src/client/queries';
+import { select } from 'glamor';
+import lively from '@jlongster/lively';
 import { send } from 'loot-core/src/platform/client/fetch';
+import { styles, colors } from 'loot-design/src/style';
 import {
  Button,
  Input,
  InitialFocus,
+  View,
  Text
 } from 'loot-design/src/components/common';
 import { Sidebar } from 'loot-design/src/components/sidebar';
-import { styles, colors } from 'loot-design/src/style';
+import * as actions from 'loot-core/src/client/actions';
+import * as queries from 'loot-core/src/client/queries';

 function EditableBudgetName({ prefs, savePrefs }) {
  const [editing, setEditing] = useState(false);
--- a/packages/desktop-client/src/components/SpreadsheetInterface.js
+++ b/packages/desktop-client/src/components/SpreadsheetInterface.js
@ -1,7 +1,6 @@
-import React from 'react';
-
-import { View } from 'loot-design/src/components/common';
+import React, { Component } from 'react';
 import Cell from 'loot-design/src/components/spreadsheet/Cell';
+import { View } from 'loot-design/src/components/common';

 function SpreadsheetInterface() {
  return (
--- a/packages/desktop-client/src/components/SyncNotifications.js
+++ b/packages/desktop-client/src/components/SyncNotifications.js
@ -1,3 +1,13 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  Stack,
+  Button,
+  ButtonWithLoading
+} from 'loot-design/src/components/common';
+import { colors } from 'loot-design/src/style';
+
 export function RepairSyncNotification() {}

 // TODO: sync button shouldn't show error status if it's a local file
--- a/packages/desktop-client/src/components/Titlebar.js
+++ b/packages/desktop-client/src/components/Titlebar.js
@ -1,11 +1,17 @@
-import React, { useState, useEffect, useRef, useContext } from 'react';
-import { connect } from 'react-redux';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useContext
+} from 'react';
 import { Switch, Route, withRouter } from 'react-router-dom';
-
+import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
 import { listen } from 'loot-core/src/platform/client/fetch';
+import Platform from 'loot-core/src/client/platform';
+import { colors } from 'loot-design/src/style';
 import {
  View,
  Text,
@ -16,17 +22,15 @@ import {
  P
 } from 'loot-design/src/components/common';
 import SheetValue from 'loot-design/src/components/spreadsheet/SheetValue';
-import { colors } from 'loot-design/src/style';
-import ArrowLeft from 'loot-design/src/svg/v1/ArrowLeft';
-import AlertTriangle from 'loot-design/src/svg/v2/AlertTriangle';
+import { MonthCountSelector } from './budget/MonthCountSelector';
 import ArrowButtonRight1 from 'loot-design/src/svg/v2/ArrowButtonRight1';
 import NavigationMenu from 'loot-design/src/svg/v2/NavigationMenu';
-
+import ArrowLeft from 'loot-design/src/svg/v1/ArrowLeft';
+import AlertTriangle from 'loot-design/src/svg/v2/AlertTriangle';
 import AccountSyncCheck from './accounts/AccountSyncCheck';
-import AnimatedRefresh from './AnimatedRefresh';
-import { MonthCountSelector } from './budget/MonthCountSelector';
-import { useSidebar } from './FloatableSidebar';
 import LoggedInUser from './LoggedInUser';
+import AnimatedRefresh from './AnimatedRefresh';
+import { useSidebar } from './FloatableSidebar';

 export let TitlebarContext = React.createContext();

--- a/packages/desktop-client/src/components/Tutorial.js
+++ b/packages/desktop-client/src/components/Tutorial.js
@ -1,23 +1,24 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { connect } from 'react-redux';
-
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
-
+import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-
+import { View } from 'loot-design/src/components/common';
+import { colors } from 'loot-design/src/style';
+import Intro from './tutorial/Intro';
+import BudgetSummary from './tutorial/BudgetSummary';
 import BudgetCategories from './tutorial/BudgetCategories';
 import BudgetInitial from './tutorial/BudgetInitial';
-import BudgetNewIncome from './tutorial/BudgetNewIncome';
-import BudgetNextMonth from './tutorial/BudgetNextMonth';
-import BudgetSummary from './tutorial/BudgetSummary';
-import CategoryBalance from './tutorial/CategoryBalance';
-import Final from './tutorial/Final';
-import Intro from './tutorial/Intro';
-import Overspending from './tutorial/Overspending';
 import TransactionAdd from './tutorial/TransactionAdd';
 import TransactionEnter from './tutorial/TransactionEnter';
+import TransactionFinalize from './tutorial/TransactionFinalize';
+import BudgetNewIncome from './tutorial/BudgetNewIncome';
+import CategoryBalance from './tutorial/CategoryBalance';
+import Overspending from './tutorial/Overspending';
+import BudgetNextMonth from './tutorial/BudgetNextMonth';
+import DeleteTransactions from './tutorial/DeleteTransactions';
+import Final from './tutorial/Final';

 function generatePath(innerRect, outerRect) {
  const i = innerRect;
--- a/packages/desktop-client/src/components/TutorialPoints.js
+++ b/packages/desktop-client/src/components/TutorialPoints.js
@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-
 import PropTypes from 'prop-types';
+import lively from '@jlongster/lively';

 class Tutorial extends React.Component {
  static childContextTypes = {
--- a/packages/desktop-client/src/components/UpdateNotification.js
+++ b/packages/desktop-client/src/components/UpdateNotification.js
@ -1,10 +1,14 @@
 import React from 'react';
-import { connect } from 'react-redux';
-
 import { bindActionCreators } from 'redux';
-
+import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import { View, Text, Link, Button } from 'loot-design/src/components/common';
+import {
+  View,
+  Text,
+  Block,
+  Link,
+  Button
+} from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 import Close from 'loot-design/src/svg/v1/Close';

--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@ -1,28 +1,29 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { Redirect, useParams, useHistory, useLocation } from 'react-router-dom';
-
-import { debounce } from 'debounce';
+import React, {
+  useState,
+  useLayoutEffect,
+  useEffect,
+  useRef,
+  useMemo,
+  useReducer,
+  useCallback
+} from 'react';
 import { bindActionCreators } from 'redux';
-
-import * as actions from 'loot-core/src/client/actions';
+import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import {
-  SchedulesProvider,
-  useCachedSchedules
-} from 'loot-core/src/client/data-hooks/schedules';
-import * as queries from 'loot-core/src/client/queries';
-import q, { runQuery, pagedQuery } from 'loot-core/src/client/query-helpers';
+  Redirect,
+  withRouter,
+  useParams,
+  useHistory,
+  useLocation
+} from 'react-router-dom';
+import { css } from 'glamor';
+import Modal from 'react-modal';
+import Component from '@reactions/component';
+import { debounce } from 'debounce';
+import SpreadsheetContext from 'loot-design/src/components/spreadsheet/SpreadsheetContext';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
-import {
-  deleteTransaction,
-  updateTransaction,
-  ungroupTransactions
-} from 'loot-core/src/shared/transactions';
-import {
-  currencyToInteger,
-  applyChanges,
-  groupById
-} from 'loot-core/src/shared/util';
+import * as actions from 'loot-core/src/client/actions';
 import {
  View,
  Text,
@ -32,40 +33,63 @@ import {
  InitialFocus,
  Tooltip,
  Menu,
+  Block,
  Stack
 } from 'loot-design/src/components/common';
-import { KeyHandlers } from 'loot-design/src/components/KeyHandlers';
-import NotesButton from 'loot-design/src/components/NotesButton';
-import CellValue from 'loot-design/src/components/spreadsheet/CellValue';
-import format from 'loot-design/src/components/spreadsheet/format';
-import useSheetValue from 'loot-design/src/components/spreadsheet/useSheetValue';
-import { SelectedItemsButton } from 'loot-design/src/components/table';
 import {
-  SelectedProviderWithItems,
-  useSelectedItems
-} from 'loot-design/src/components/useSelected';
-import { styles, colors } from 'loot-design/src/style';
-import Add from 'loot-design/src/svg/v1/Add';
-import Loading from 'loot-design/src/svg/v1/AnimatedLoading';
+  currencyToInteger,
+  applyChanges,
+  groupById
+} from 'loot-core/src/shared/util';
+import * as monthUtils from 'loot-core/src/shared/months';
+import TutorialPoint from 'loot-design/src/components/TutorialPoint';
 import DotsHorizontalTriple from 'loot-design/src/svg/v1/DotsHorizontalTriple';
-import ArrowButtonRight1 from 'loot-design/src/svg/v2/ArrowButtonRight1';
-import ArrowsExpand3 from 'loot-design/src/svg/v2/ArrowsExpand3';
-import ArrowsShrink3 from 'loot-design/src/svg/v2/ArrowsShrink3';
-import CheckCircle1 from 'loot-design/src/svg/v2/CheckCircle1';
-import DownloadThickBottom from 'loot-design/src/svg/v2/DownloadThickBottom';
 import Pencil1 from 'loot-design/src/svg/v2/Pencil1';
 import SearchAlternate from 'loot-design/src/svg/v2/SearchAlternate';
-
-import { authorizeBank } from '../../plaid';
-import { useActiveLocation } from '../ActiveLocation';
+import DownloadThickBottom from 'loot-design/src/svg/v2/DownloadThickBottom';
 import AnimatedRefresh from '../AnimatedRefresh';
-import { FilterButton, AppliedFilters } from './Filters';
-import TransactionList from './TransactionList';
+import Add from 'loot-design/src/svg/v1/Add';
+import format from 'loot-design/src/components/spreadsheet/format';
+import useSheetValue from 'loot-design/src/components/spreadsheet/useSheetValue';
+import CellValue from 'loot-design/src/components/spreadsheet/CellValue';
+import ArrowButtonRight1 from 'loot-design/src/svg/v2/ArrowButtonRight1';
+import CheveronDown from 'loot-design/src/svg/v1/CheveronDown';
+import CheckCircle1 from 'loot-design/src/svg/v2/CheckCircle1';
+import Loading from 'loot-design/src/svg/v1/AnimatedLoading';
+import ArrowsExpand3 from 'loot-design/src/svg/v2/ArrowsExpand3';
+import ArrowsShrink3 from 'loot-design/src/svg/v2/ArrowsShrink3';
+import * as queries from 'loot-core/src/client/queries';
+import q, { runQuery, pagedQuery } from 'loot-core/src/client/query-helpers';
+import { queryContext } from 'loot-core/src/client/query-hooks';
+import { SelectedItemsButton } from 'loot-design/src/components/table';
+import { Query } from 'loot-core/src/shared/query';
+import * as aql from 'loot-core/src/client/query-helpers';
+import {
+  deleteTransaction,
+  updateTransaction,
+  ungroupTransactions
+} from 'loot-core/src/shared/transactions';
 import {
  SplitsExpandedProvider,
  useSplitsExpanded,
  isPreviewId
 } from './TransactionsTable';
+import { styles, colors } from 'loot-design/src/style';
+import TransactionList from './TransactionList';
+import { authorizeBank } from '../../plaid';
+import {
+  SelectedProviderWithItems,
+  useSelectedItems
+} from 'loot-design/src/components/useSelected';
+import { keys } from 'loot-design/src/util/keys';
+import { KeyHandlers } from 'loot-design/src/components/KeyHandlers';
+import { FilterButton, AppliedFilters } from './Filters';
+import {
+  SchedulesProvider,
+  useCachedSchedules
+} from 'loot-core/src/client/data-hooks/schedules';
+import { getPayeesById } from 'loot-core/src/client/reducers/queries';
+import { useActiveLocation } from '../ActiveLocation';

 function EmptyMessage({ onAdd }) {
  return (
@ -107,7 +131,6 @@ function EmptyMessage({ onAdd }) {
 function ReconcilingMessage({ balanceQuery, targetBalance, onDone }) {
  let cleared = useSheetValue({
    name: balanceQuery.name + '-cleared',
-    value: 0,
    query: balanceQuery.query.filter({ cleared: true })
  });
  let targetDiff = targetBalance - cleared;
@ -619,7 +642,7 @@ const AccountHeader = React.memo(
    let searchInput = useRef(null);
    let splitsExpanded = useSplitsExpanded();

-    let canSync = syncEnabled && account && account.account_id;
+    let canSync = syncEnabled && (account && account.account_id);
    if (!account) {
      // All accounts - check for any syncable account
      canSync = !!accounts.find(account => !!account.account_id);
@ -671,46 +694,30 @@ const AccountHeader = React.memo(
                  />
                </InitialFocus>
              ) : isNameEditable ? (
-                <View
+                <Button
+                  bare
                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    '& .hover-visible': {
-                      opacity: 0,
-                      transition: 'opacity .25s'
-                    },
-                    '&:hover .hover-visible': {
-                      opacity: 1
-                    }
+                    fontSize: 25,
+                    fontWeight: 500,
+                    marginLeft: -5,
+                    marginTop: -5,
+                    backgroundColor: 'transparent',
+                    '& svg': { display: 'none' },
+                    '&:hover svg': { display: 'unset' }
                  }}
+                  onClick={() => onExposeName(true)}
                >
-                  <View
-                    style={{
-                      fontSize: 25,
-                      fontWeight: 500,
-                      marginRight: 5,
-                      marginBottom: 5
-                    }}
-                  >
-                    {accountName}
-                  </View>
+                  {accountName}

-                  <NotesButton id={`account-${account.id}`} />
-                  <Button
-                    bare
-                    className="hover-visible"
-                    onClick={() => onExposeName(true)}
-                  >
-                    <Pencil1
-                      style={{
-                        width: 11,
-                        height: 11,
-                        color: colors.n8
-                      }}
-                    />
-                  </Button>
-                </View>
+                  <Pencil1
+                    style={{
+                      width: 11,
+                      height: 11,
+                      marginLeft: 5,
+                      color: colors.n4
+                    }}
+                  />
+                </Button>
              ) : (
                <View
                  style={{ fontSize: 25, fontWeight: 500, marginBottom: 5 }}
@ -1694,9 +1701,9 @@ class AccountInternal extends React.PureComponent {
                    }
                    showAccount={
                      !accountId ||
-                      accountId === 'offbudget' ||
-                      accountId === 'budgeted' ||
-                      accountId === 'uncategorized'
+                      (accountId === 'offbudget' ||
+                        accountId === 'budgeted' ||
+                        accountId === 'uncategorized')
                    }
                    isAdding={this.state.isAdding}
                    isNew={this.isNew}
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
+++ b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
@ -1,11 +1,10 @@
 import React, { useState } from 'react';
+import { Route, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-
 import * as actions from 'loot-core/src/client/actions';
-import { View, Button, Tooltip } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
+import { View, Text, Button, Tooltip } from 'loot-design/src/components/common';
 import ExclamationOutline from 'loot-design/src/svg/v1/ExclamationOutline';
-
+import { colors } from 'loot-design/src/style';
 import { reauthorizeBank } from '../../plaid';

 function getErrorMessage(type, code) {
--- a/packages/desktop-client/src/components/accounts/Filters.js
+++ b/packages/desktop-client/src/components/accounts/Filters.js
@ -1,15 +1,24 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react';
 import { useSelector } from 'react-redux';
-
+import scopeTab from 'react-modal/lib/helpers/scopeTab';
 import {
  parse as parseDate,
  format as formatDate,
  isValid as isDateValid
 } from 'date-fns';
-import scopeTab from 'react-modal/lib/helpers/scopeTab';
-
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getMonthYearFormat } from 'loot-core/src/shared/months';
+import { titleFirst } from 'loot-core/src/shared/util';
+import {
+  View,
+  Text,
+  Tooltip,
+  Stack,
+  Button,
+  InitialFocus,
+  Menu,
+  CustomSelect
+} from 'loot-design/src/components/common';
 import {
  mapField,
  friendlyOp,
@ -20,22 +29,11 @@ import {
  FIELD_TYPES,
  TYPE_INFO
 } from 'loot-core/src/shared/rules';
-import { titleFirst } from 'loot-core/src/shared/util';
-import {
-  View,
-  Text,
-  Tooltip,
-  Stack,
-  Button,
-  Menu,
-  CustomSelect
-} from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
 import DeleteIcon from 'loot-design/src/svg/Delete';
 import SettingsSliderAlternate from 'loot-design/src/svg/v2/SettingsSliderAlternate';
-
-import { Value } from '../modals/ManageRules';
 import GenericInput from '../util/GenericInput';
+import { Value } from '../modals/ManageRules';
+import { styles, colors } from 'loot-design/src/style';

 let filterFields = [
  'date',
@ -151,11 +149,7 @@ function ConfigureField({ field, op, value, dispatch, onApply }) {
                      ['amount-outflow', 'Amount (outflow)']
                    ]
                  : field === 'date'
-                  ? [
-                      ['date', 'Date'],
-                      ['month', 'Month'],
-                      ['year', 'Year']
-                    ]
+                  ? [['date', 'Date'], ['month', 'Month'], ['year', 'Year']]
                  : null
              }
              value={subfield}
--- a/packages/desktop-client/src/components/accounts/SimpleTransactionsTable.js
+++ b/packages/desktop-client/src/components/accounts/SimpleTransactionsTable.js
@ -1,17 +1,11 @@
 import React, { useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-
 import {
  format as formatDate,
+  parse as parseDate,
  parseISO,
  isValid as isDateValid
 } from 'date-fns';
-
-import {
-  getAccountsById,
-  getCategoriesById
-} from 'loot-core/src/client/reducers/queries';
-import { integerToCurrency } from 'loot-core/src/shared/util';
 import {
  Table,
  Row,
@ -23,9 +17,18 @@ import {
  useSelectedItems,
  useSelectedDispatch
 } from 'loot-design/src/components/useSelected';
-import { styles } from 'loot-design/src/style';
+import {
+  integerToAmount,
+  amountToInteger,
+  integerToCurrency
+} from 'loot-core/src/shared/util';
+import {
+  getAccountsById,
+  getPayeesById,
+  getCategoriesById
+} from 'loot-core/src/client/reducers/queries';
 import ArrowsSynchronize from 'loot-design/src/svg/v2/ArrowsSynchronize';
-
+import { styles } from 'loot-design/src/style';
 import DisplayId from '../util/DisplayId';

 function serializeTransaction(transaction, dateFormat) {
--- a/packages/desktop-client/src/components/accounts/TransactionList.js
+++ b/packages/desktop-client/src/components/accounts/TransactionList.js
@ -1,7 +1,13 @@
-import React, { useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import React, {
+  useRef,
+  useEffect,
+  useCallback,
+  useLayoutEffect,
+  useMemo
+} from 'react';
 import { useDispatch } from 'react-redux';
-
-import { send } from 'loot-core/src/platform/client/fetch';
+import { TransactionTable } from './TransactionsTable';
+import lively from '@jlongster/lively';
 import {
  splitTransaction,
  updateTransaction,
@ -9,10 +15,9 @@ import {
  realizeTempTransactions,
  applyTransactionDiff
 } from 'loot-core/src/shared/transactions';
+import { send } from 'loot-core/src/platform/client/fetch';
+import { pushModal } from 'loot-core/src/client/actions/modals';
 import { getChangedValues, applyChanges } from 'loot-core/src/shared/util';
-
-import { TransactionTable } from './TransactionsTable';
-
 const uuid = require('loot-core/src/platform/uuid');

 // When data changes, there are two ways to update the UI:
--- a/packages/desktop-client/src/components/accounts/TransactionsTable.js
+++ b/packages/desktop-client/src/components/accounts/TransactionsTable.js
@ -5,42 +5,58 @@ import React, {
  useCallback,
  useLayoutEffect,
  useEffect,
+  useImperativeHandle,
  useContext,
  useReducer
 } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-
 import {
  format as formatDate,
+  parse as parseDate,
  parseISO,
  isValid as isDateValid
 } from 'date-fns';
-
-import { useCachedSchedules } from 'loot-core/src/client/data-hooks/schedules';
+import q, { runQuery } from 'loot-core/src/client/query-helpers';
+import {
+  View,
+  Text,
+  Stack,
+  Tooltip,
+  Button
+} from 'loot-design/src/components/common';
+import CategoryAutocomplete from 'loot-design/src/components/CategorySelect';
+import PayeeAutocomplete from 'loot-design/src/components/PayeeAutocomplete';
+import AccountAutocomplete from 'loot-design/src/components/AccountAutocomplete';
+import DateSelect from 'loot-design/src/components/DateSelect';
+import RightArrow2 from 'loot-design/src/svg/RightArrow2';
+import LeftArrow2 from 'loot-design/src/svg/LeftArrow2';
+import Hyperlink2 from 'loot-design/src/svg/v2/Hyperlink2';
+import DeleteIcon from 'loot-design/src/svg/Delete';
+import CheveronDown from 'loot-design/src/svg/v1/CheveronDown';
+import CalendarIcon from 'loot-design/src/svg/v2/Calendar';
+import ArrowsSynchronize from 'loot-design/src/svg/v2/ArrowsSynchronize';
+import {
+  integerToCurrency,
+  amountToInteger,
+  applyChanges,
+  debugMemoFailure,
+  titleFirst
+} from 'loot-core/src/shared/util';
+import evalArithmetic from 'loot-core/src/shared/arithmetic';
 import {
  getAccountsById,
  getPayeesById,
  getCategoriesById
 } from 'loot-core/src/client/reducers/queries';
-import evalArithmetic from 'loot-core/src/shared/arithmetic';
-import { currentDay } from 'loot-core/src/shared/months';
-import { getScheduledAmount } from 'loot-core/src/shared/schedules';
+import { currentDay, dayFromDate, addDays } from 'loot-core/src/shared/months';
 import {
  splitTransaction,
  updateTransaction,
  deleteTransaction,
-  addSplitTransaction
+  addSplitTransaction,
+  ungroupTransaction
 } from 'loot-core/src/shared/transactions';
-import {
-  integerToCurrency,
-  amountToInteger,
-  titleFirst
-} from 'loot-core/src/shared/util';
-import AccountAutocomplete from 'loot-design/src/components/AccountAutocomplete';
-import CategoryAutocomplete from 'loot-design/src/components/CategorySelect';
-import { View, Text, Tooltip, Button } from 'loot-design/src/components/common';
-import DateSelect from 'loot-design/src/components/DateSelect';
-import PayeeAutocomplete from 'loot-design/src/components/PayeeAutocomplete';
+import { styles, colors } from 'loot-design/src/style';
 import {
  Cell,
  Field,
@ -51,22 +67,18 @@ import {
  CustomCell,
  CellButton,
  useTableNavigator,
-  Table
+  Table,
+  ROW_HEIGHT
 } from 'loot-design/src/components/table';
-import { useMergedRefs } from 'loot-design/src/components/useMergedRefs';
 import {
  useSelectedDispatch,
  useSelectedItems
 } from 'loot-design/src/components/useSelected';
-import { styles, colors } from 'loot-design/src/style';
-import LeftArrow2 from 'loot-design/src/svg/LeftArrow2';
-import RightArrow2 from 'loot-design/src/svg/RightArrow2';
-import CheveronDown from 'loot-design/src/svg/v1/CheveronDown';
-import ArrowsSynchronize from 'loot-design/src/svg/v2/ArrowsSynchronize';
-import CalendarIcon from 'loot-design/src/svg/v2/Calendar';
-import Hyperlink2 from 'loot-design/src/svg/v2/Hyperlink2';
-
+import { keys } from 'loot-design/src/util/keys';
+import { useMergedRefs } from 'loot-design/src/components/useMergedRefs';
 import { getStatusProps } from '../schedules/StatusBadge';
+import { useCachedSchedules } from 'loot-core/src/client/data-hooks/schedules';
+import { getScheduledAmount } from 'loot-core/src/shared/schedules';

 let TABLE_BACKGROUND_COLOR = colors.n11;

@ -336,7 +348,7 @@ function StatusCell({
        ? colors.y5
        : selected
        ? colors.b7
-        : colors.n7
+        : colors.n6
  };

  function onSelect() {
@ -362,8 +374,7 @@ function StatusCell({
            ':focus': {
              border: '1px solid ' + props.color,
              boxShadow: `0 1px 2px ${props.color}`
-            },
-            cursor: isClearedField ? 'pointer' : 'default'
+            }
          },

          isChild && { visibility: 'hidden' }
@ -1638,8 +1649,7 @@ export let TransactionTable = React.forwardRef((props, ref) => {
            onAddSplit(lastTransaction.id);
          } else if (
            (newNavigator.focusedField === 'debit' ||
-              newNavigator.focusedField === 'credit' ||
-              newNavigator.focusedField === 'cleared') &&
+              newNavigator.focusedField === 'credit') &&
            newNavigator.editingId === lastTransaction.id &&
            (!isSplit || !lastTransaction.error)
          ) {
--- a/packages/desktop-client/src/components/accounts/TransactionsTable.test.js
+++ b/packages/desktop-client/src/components/accounts/TransactionsTable.test.js
@ -1,27 +1,15 @@
 import React from 'react';
-
-import { render, fireEvent } from '@testing-library/react';
-import { format as formatDate, parse as parseDate } from 'date-fns';
 import { act } from 'react-dom/test-utils';
-
+import { render, fireEvent } from '@testing-library/react';
+import { debugDOM } from 'loot-core/src/mocks/util';
+import { format as formatDate, parse as parseDate } from 'date-fns';
+import { integerToCurrency } from 'loot-core/src/shared/util';
+import { initServer } from 'loot-core/src/platform/client/fetch';
 import {
  generateTransaction,
  generateAccount,
-  generateCategoryGroups,
-  TestProvider
+  generateCategoryGroups
 } from 'loot-core/src/mocks';
-import { initServer } from 'loot-core/src/platform/client/fetch';
-import {
-  addSplitTransaction,
-  realizeTempTransactions,
-  splitTransaction,
-  updateTransaction
-} from 'loot-core/src/shared';
-import { integerToCurrency } from 'loot-core/src/shared/util';
-import { SelectedProviderWithItems } from 'loot-design/src/components';
-
-import { SplitsExpandedProvider, TransactionTable } from './TransactionsTable';
-
 const uuid = require('loot-core/src/platform/uuid');

 const accounts = [generateAccount('Bank of America')];
--- a/packages/desktop-client/src/components/budget/MonthCountSelector.js
+++ b/packages/desktop-client/src/components/budget/MonthCountSelector.js
@ -1,8 +1,7 @@
-import React from 'react';
-
+import React, { useState, useLayoutEffect } from 'react';
+import { styles, colors } from 'loot-design/src/style';
+import { View, Text } from 'loot-design/src/components/common';
 import { useBudgetMonthCount } from 'loot-design/src/components/budget/BudgetMonthCountContext';
-import { View } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
 import CalendarIcon from 'loot-design/src/svg/v2/Calendar';

 function Calendar({ color, onClick }) {
--- a/packages/desktop-client/src/components/budget/budget-sheets-old.js
+++ b/packages/desktop-client/src/components/budget/budget-sheets-old.js
@ -1,7 +1,3 @@
-import React from 'react';
-
-/* eslint-disable */
-
 function BudgetSheetHeader({ row }) {
  return (
    <Row style={{ zIndex: 200, backgroundColor: colors.grey1, marginLeft: 20 }}>
--- a/packages/desktop-client/src/components/budget/index.js
+++ b/packages/desktop-client/src/components/budget/index.js
@ -1,8 +1,25 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useEffect, useContext, useMemo } from 'react';
 import { connect } from 'react-redux';
-
+import { withRouter } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import memoizeOne from 'memoize-one';
 import * as actions from 'loot-core/src/client/actions';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
+import * as monthUtils from 'loot-core/src/shared/months';
+import { getValidMonthBounds } from 'loot-design/src/components/budget/MonthsContext';
+import { TitlebarContext } from '../Titlebar';
+
+import * as rollover from 'loot-design/src/components/budget/rollover/rollover-components';
+import { RolloverContext } from 'loot-design/src/components/budget/rollover/RolloverContext';
+
+import * as report from 'loot-design/src/components/budget/report/components';
+import { ReportProvider } from 'loot-design/src/components/budget/report/ReportContext';
+
+import DynamicBudgetTable from 'loot-design/src/components/budget/DynamicBudgetTable';
+import SpreadsheetContext from 'loot-design/src/components/spreadsheet/SpreadsheetContext';
+import { View } from 'loot-design/src/components/common';
+import { styles, colors } from 'loot-design/src/style';
 import {
  addCategory,
  updateCategory,
@ -13,18 +30,6 @@ import {
  updateGroup,
  deleteGroup
 } from 'loot-core/src/shared/categories.js';
-import * as monthUtils from 'loot-core/src/shared/months';
-import DynamicBudgetTable from 'loot-design/src/components/budget/DynamicBudgetTable';
-import { getValidMonthBounds } from 'loot-design/src/components/budget/MonthsContext';
-import * as report from 'loot-design/src/components/budget/report/components';
-import { ReportProvider } from 'loot-design/src/components/budget/report/ReportContext';
-import * as rollover from 'loot-design/src/components/budget/rollover/rollover-components';
-import { RolloverContext } from 'loot-design/src/components/budget/rollover/RolloverContext';
-import { View } from 'loot-design/src/components/common';
-import SpreadsheetContext from 'loot-design/src/components/spreadsheet/SpreadsheetContext';
-import { styles } from 'loot-design/src/style';
-
-import { TitlebarContext } from '../Titlebar';

 let _initialBudgetMonth = null;

--- a/packages/desktop-client/src/components/debug/index.js
+++ b/packages/desktop-client/src/components/debug/index.js
@ -1,7 +1,5 @@
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { send } from 'loot-core/src/platform/client/fetch';

 const Container = styled.div`
--- a/packages/desktop-client/src/components/manager/ConfigServer.js
+++ b/packages/desktop-client/src/components/manager/ConfigServer.js
@ -1,18 +1,23 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-
-import { signOut, loggedIn } from 'loot-core/src/client/actions/user';
-import { send } from 'loot-core/src/platform/client/fetch';
+import * as actions from 'loot-core/src/client/actions';
 import {
  View,
  Text,
  Button,
  ButtonWithLoading
 } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
-
-import { Title, Input } from './subscribe/common';
+import { colors, styles } from 'loot-design/src/style';
+import { signOut, loggedIn } from 'loot-core/src/client/actions/user';
+import { send } from 'loot-core/src/platform/client/fetch';
+import {
+  useBootstrapped,
+  Title,
+  Input,
+  Link,
+  ExternalLink
+} from './subscribe/common';

 export default function ConfigServer() {
  let dispatch = useDispatch();
--- a/packages/desktop-client/src/components/manager/ManagementApp.js
+++ b/packages/desktop-client/src/components/manager/ManagementApp.js
@ -1,23 +1,22 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Switch, Redirect, Router, Route } from 'react-router-dom';
-
 import { createBrowserHistory } from 'history';
-
+import { Switch, Redirect, Router, Route } from 'react-router-dom';
+import { send } from 'loot-core/src/platform/client/fetch';
 import * as actions from 'loot-core/src/client/actions';
 import { View, Text } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
-
-import useServerVersion from '../../hooks/useServerVersion';
+import ServerURL from './ServerURL';
 import LoggedInUser from '../LoggedInUser';
 import Notifications from '../Notifications';
-import ConfigServer from './ConfigServer';
+
 import Modals from './Modals';
-import ServerURL from './ServerURL';
-import Bootstrap from './subscribe/Bootstrap';
-import ChangePassword from './subscribe/ChangePassword';
-import Error from './subscribe/Error';
 import Login from './subscribe/Login';
+import Bootstrap from './subscribe/Bootstrap';
+import Error from './subscribe/Error';
+import ChangePassword from './subscribe/ChangePassword';
+import ConfigServer from './ConfigServer';
+import useServerVersion from '../../hooks/useServerVersion';

 function Version() {
  const version = useServerVersion();
@ -231,14 +230,17 @@ class ManagementApp extends React.Component {
  }
 }

-export default connect(state => {
-  let { modalStack } = state.modals;
+export default connect(
+  state => {
+    let { modalStack } = state.modals;

-  return {
-    files: state.budgets.allFiles,
-    userData: state.user.data,
-    managerHasInitialized: state.app.managerHasInitialized,
-    loadingText: state.app.loadingText,
-    currentModals: modalStack.map(modal => modal.name)
-  };
-}, actions)(ManagementApp);
+    return {
+      files: state.budgets.allFiles,
+      userData: state.user.data,
+      managerHasInitialized: state.app.managerHasInitialized,
+      loadingText: state.app.loadingText,
+      currentModals: modalStack.map(modal => modal.name)
+    };
+  },
+  actions
+)(ManagementApp);
--- a/packages/desktop-client/src/components/manager/Modals.js
+++ b/packages/desktop-client/src/components/manager/Modals.js
@ -1,22 +1,20 @@
 import React from 'react';
-import { connect } from 'react-redux';
-
-import Component from '@reactions/component';
 import { bindActionCreators } from 'redux';
-
-import * as actions from 'loot-core/src/client/actions';
+import { connect } from 'react-redux';
+import Component from '@reactions/component';
 import { send } from 'loot-core/src/platform/client/fetch';
+import * as actions from 'loot-core/src/client/actions';
 import { View } from 'loot-design/src/components/common';
 import BudgetList from 'loot-design/src/components/manager/BudgetList';
-import DeleteFile from 'loot-design/src/components/manager/DeleteFile';
+import LoadBackup from 'loot-design/src/components/modals/LoadBackup';
 import Import from 'loot-design/src/components/manager/Import';
-import ImportActual from 'loot-design/src/components/manager/ImportActual';
 import ImportYNAB4 from 'loot-design/src/components/manager/ImportYNAB4';
 import ImportYNAB5 from 'loot-design/src/components/manager/ImportYNAB5';
-import LoadBackup from 'loot-design/src/components/modals/LoadBackup';
-
+import ImportActual from 'loot-design/src/components/manager/ImportActual';
+import DeleteFile from 'loot-design/src/components/manager/DeleteFile';
 import CreateEncryptionKey from '../modals/CreateEncryptionKey';
 import FixEncryptionKey from '../modals/FixEncryptionKey';
+import { colors } from 'loot-design/src/style';

 function Modals({
  modalStack,
--- a/packages/desktop-client/src/components/manager/ServerURL.js
+++ b/packages/desktop-client/src/components/manager/ServerURL.js
@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
-
+import {
+  View,
+  Text,
+  AnchorLink,
+  Button
+} from 'loot-design/src/components/common';
 import { send } from 'loot-core/src/platform/client/fetch';
-import { View, Text, AnchorLink } from 'loot-design/src/components/common';

 export default function ServerURL() {
  let [url, setUrl] = useState(null);
--- a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.js
+++ b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.js
@ -1,15 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-
-import { createBudget } from 'loot-core/src/client/actions/budgets';
-import { loggedIn } from 'loot-core/src/client/actions/user';
-import { send } from 'loot-core/src/platform/client/fetch';
+import * as actions from 'loot-core/src/client/actions';
 import { View, Text, Button } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
-
-import { useBootstrapped, Title } from './common';
+import { colors, styles } from 'loot-design/src/style';
+import { loggedIn } from 'loot-core/src/client/actions/user';
+import { createBudget } from 'loot-core/src/client/actions/budgets';
+import { send } from 'loot-core/src/platform/client/fetch';
 import { ConfirmPasswordForm } from './ConfirmPasswordForm';
+import { useBootstrapped, Title, Input, Link, ExternalLink } from './common';

 export default function Bootstrap() {
  let dispatch = useDispatch();
--- a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.js
+++ b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.js
@ -1,13 +1,19 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-
+import * as actions from 'loot-core/src/client/actions';
+import {
+  View,
+  Text,
+  Button,
+  ButtonWithLoading
+} from 'loot-design/src/components/common';
+import { colors, styles } from 'loot-design/src/style';
+import { loggedIn } from 'loot-core/src/client/actions/user';
+import { createBudget } from 'loot-core/src/client/actions/budgets';
 import { send } from 'loot-core/src/platform/client/fetch';
-import { View, Text, Button } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
-
-import { Title } from './common';
 import { ConfirmPasswordForm } from './ConfirmPasswordForm';
+import { useBootstrapped, Title, Input, Link, ExternalLink } from './common';

 export default function ChangePassword() {
  let dispatch = useDispatch();
--- a/packages/desktop-client/src/components/manager/subscribe/ConfirmPasswordForm.js
+++ b/packages/desktop-client/src/components/manager/subscribe/ConfirmPasswordForm.js
@ -1,7 +1,9 @@
 import React, { useState } from 'react';
-
-import { View, ButtonWithLoading } from 'loot-design/src/components/common';
-
+import {
+  View,
+  Button,
+  ButtonWithLoading
+} from 'loot-design/src/components/common';
 import { Input } from './common';

 export function ConfirmPasswordForm({ buttons, onSetPassword, onError }) {
@ -45,7 +47,6 @@ export function ConfirmPasswordForm({ buttons, onSetPassword, onError }) {
        type={showPassword ? 'text' : 'password'}
        value={password1}
        onChange={e => setPassword1(e.target.value)}
-        onEnter={onSubmit}
      />
      <Input
        placeholder="Confirm password"
@ -53,7 +54,6 @@ export function ConfirmPasswordForm({ buttons, onSetPassword, onError }) {
        value={password2}
        onChange={e => setPassword2(e.target.value)}
        style={{ marginTop: 10 }}
-        onEnter={onSubmit}
      />

      <View
@ -69,7 +69,10 @@ export function ConfirmPasswordForm({ buttons, onSetPassword, onError }) {
        </label>
        <View style={{ flex: 1 }} />
        {buttons}
-        <ButtonWithLoading primary loading={loading}>
+        <ButtonWithLoading
+          primary
+          loading={loading}
+        >
          OK
        </ButtonWithLoading>
      </View>
--- a/packages/desktop-client/src/components/manager/subscribe/Error.js
+++ b/packages/desktop-client/src/components/manager/subscribe/Error.js
@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-
-import { View, Text, Button } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
+import {
+  View,
+  Text,
+  Button,
+  ButtonWithLoading
+} from 'loot-design/src/components/common';
+import { colors, styles } from 'loot-design/src/style';

 function getErrorMessage(reason) {
  switch (reason) {
--- a/packages/desktop-client/src/components/manager/subscribe/Login.js
+++ b/packages/desktop-client/src/components/manager/subscribe/Login.js
@ -1,19 +1,18 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-
-import { createBudget } from 'loot-core/src/client/actions/budgets';
-import { loggedIn } from 'loot-core/src/client/actions/user';
-import { send } from 'loot-core/src/platform/client/fetch';
+import * as actions from 'loot-core/src/client/actions';
 import {
  View,
  Text,
  Button,
  ButtonWithLoading
 } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
-
-import { useBootstrapped, Title, Input } from './common';
+import { colors, styles } from 'loot-design/src/style';
+import { loggedIn } from 'loot-core/src/client/actions/user';
+import { createBudget } from 'loot-core/src/client/actions/budgets';
+import { send } from 'loot-core/src/platform/client/fetch';
+import { useBootstrapped, Title, Input, Link, ExternalLink } from './common';

 export default function Login() {
  let dispatch = useDispatch();
--- a/packages/desktop-client/src/components/manager/subscribe/common.js
+++ b/packages/desktop-client/src/components/manager/subscribe/common.js
@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-
-import { send } from 'loot-core/src/platform/client/fetch';
 import {
+  AnchorLink,
  Text,
  Button,
+  ButtonLink,
  Input as BaseInput
 } from 'loot-design/src/components/common';
 import { colors, styles } from 'loot-design/src/style';
+import { send } from 'loot-core/src/platform/client/fetch';

 // There are two URLs that dance with each other: `/login` and
 // `/bootstrap`. Both of these URLs check the state of the the server
--- a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
+++ b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
@ -1,14 +1,14 @@
 import React from 'react';
-
-import { NativeCategorySelect } from 'loot-design/src/components/CategorySelect';
 import {
  View,
  Text,
  Block,
  Modal,
-  Button
+  Button,
+  Select
 } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+import { NativeCategorySelect } from 'loot-design/src/components/CategorySelect';

 class ConfirmCategoryDelete extends React.Component {
  state = { transferCategory: null, error: null };
--- a/packages/desktop-client/src/components/modals/CreateAccount.js
+++ b/packages/desktop-client/src/components/modals/CreateAccount.js
@ -1,12 +1,17 @@
 import React from 'react';
-import { connect } from 'react-redux';
-
 import { bindActionCreators } from 'redux';
-
+import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import { View, Text, Modal, Button } from 'loot-design/src/components/common';
+import { send } from 'loot-core/src/platform/client/fetch';
+import {
+  View,
+  Text,
+  Modal,
+  Button,
+  Strong,
+  P
+} from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
-
 import { authorizeBank } from '../../plaid';

 class CreateAccount extends React.Component {
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
@ -1,13 +1,11 @@
 import React, { useState } from 'react';
-
 import { css } from 'glamor';
-
-import { send } from 'loot-core/src/platform/client/fetch';
-import { getCreateKeyError } from 'loot-core/src/shared/errors';
 import {
  View,
  Text,
+  Stack,
  Modal,
+  Button,
  ButtonWithLoading,
  ExternalLink,
  P,
@ -15,7 +13,9 @@ import {
  Input,
  InitialFocus
 } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
+import { send } from 'loot-core/src/platform/client/fetch';
+import { styles, colors } from 'loot-design/src/style';
+import { getCreateKeyError } from 'loot-core/src/shared/errors';

 export default function CreateEncryptionKey({
  modalProps,
--- a/packages/desktop-client/src/components/modals/EditRule.js
+++ b/packages/desktop-client/src/components/modals/EditRule.js
@ -1,14 +1,31 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { bindActionCreators } from 'redux';
 import { useDispatch, useSelector } from 'react-redux';
-
 import {
  initiallyLoadPayees,
  setUndoEnabled
 } from 'loot-core/src/client/actions/queries';
-import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
+import * as undo from 'loot-core/src/platform/client/undo';
 import q, { runQuery } from 'loot-core/src/client/query-helpers';
-import { send } from 'loot-core/src/platform/client/fetch';
-import * as monthUtils from 'loot-core/src/shared/months';
+import {
+  View,
+  Text,
+  Modal,
+  Button,
+  Select,
+  Stack,
+  Input,
+  CustomSelect,
+  Tooltip
+} from 'loot-design/src/components/common';
+import GenericInput from '../util/GenericInput';
+import { keys } from 'loot-design/src/util/keys';
+import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
+import { getStatus } from 'loot-core/src/shared/schedules';
+import { colors, styles } from 'loot-design/src/style';
+import SubtractIcon from 'loot-design/src/svg/Subtract';
+import AddIcon from 'loot-design/src/svg/Add';
+import InformationOutline from 'loot-design/src/svg/v1/InformationOutline';
 import {
  mapField,
  friendlyOp,
@ -19,33 +36,20 @@ import {
  FIELD_TYPES,
  TYPE_INFO
 } from 'loot-core/src/shared/rules';
+import useSelected, {
+  SelectedProvider
+} from 'loot-design/src/components/useSelected';
+import SimpleTransactionsTable from '../accounts/SimpleTransactionsTable';
+import { StatusBadge } from '../schedules/StatusBadge';
+import DisplayId from '../util/DisplayId';
+import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
 import {
  integerToCurrency,
  integerToAmount,
  amountToInteger
 } from 'loot-core/src/shared/util';
-import {
-  View,
-  Text,
-  Modal,
-  Button,
-  Stack,
-  CustomSelect,
-  Tooltip
-} from 'loot-design/src/components/common';
-import useSelected, {
-  SelectedProvider
-} from 'loot-design/src/components/useSelected';
-import { colors } from 'loot-design/src/style';
-import AddIcon from 'loot-design/src/svg/Add';
-import SubtractIcon from 'loot-design/src/svg/Subtract';
-import InformationOutline from 'loot-design/src/svg/v1/InformationOutline';
-
-import SimpleTransactionsTable from '../accounts/SimpleTransactionsTable';
-import { StatusBadge } from '../schedules/StatusBadge';
+import * as monthUtils from 'loot-core/src/shared/months';
 import { BetweenAmountInput } from '../util/AmountInput';
-import DisplayId from '../util/DisplayId';
-import GenericInput from '../util/GenericInput';

 function updateValue(array, value, update) {
  return array.map(v => (v === value ? update() : v));
--- a/packages/desktop-client/src/components/modals/FixEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/FixEncryptionKey.js
@ -1,7 +1,4 @@
 import React, { useState } from 'react';
-
-import { send } from 'loot-core/src/platform/client/fetch';
-import { getTestKeyError } from 'loot-core/src/shared/errors';
 import {
  View,
  Text,
@ -14,7 +11,9 @@ import {
  InitialFocus,
  ExternalLink
 } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
+import { send } from 'loot-core/src/platform/client/fetch';
+import { styles, colors } from 'loot-design/src/style';
+import { getTestKeyError } from 'loot-core/src/shared/errors';

 export default function FixEncryptionKey({
  modalProps,
--- a/packages/desktop-client/src/components/modals/ManageRules.js
+++ b/packages/desktop-client/src/components/modals/ManageRules.js
@ -1,23 +1,19 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  useImperativeHandle
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
-import { format as formatDate, parseISO } from 'date-fns';
 import { css } from 'glamor';
-
-import { pushModal } from 'loot-core/src/client/actions/modals';
+import { format as formatDate, parseISO } from 'date-fns';
+import * as undo from 'loot-core/src/platform/client/undo';
+import * as actions from 'loot-core/src/client/actions';
 import { initiallyLoadPayees } from 'loot-core/src/client/actions/queries';
 import q from 'loot-core/src/client/query-helpers';
 import { liveQueryContext } from 'loot-core/src/client/query-hooks';
-import { getPayeesById } from 'loot-core/src/client/reducers/queries';
-import { send } from 'loot-core/src/platform/client/fetch';
-import * as undo from 'loot-core/src/platform/client/undo';
-import { getMonthYearFormat } from 'loot-core/src/shared/months';
-import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
-import {
-  extractScheduleConds,
-  getRecurringDescription
-} from 'loot-core/src/shared/schedules';
-import { integerToCurrency } from 'loot-core/src/shared/util';
 import {
  View,
  Text,
@ -40,8 +36,20 @@ import useSelected, {
  useSelectedItems,
  SelectedProvider
 } from 'loot-design/src/components/useSelected';
-import { colors } from 'loot-design/src/style';
+import { integerToCurrency } from 'loot-core/src/shared/util';
+import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
+import { pushModal } from 'loot-core/src/client/actions/modals';
+import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
 import ArrowRight from 'loot-design/src/svg/RightArrow2';
+import InformationOutline from 'loot-design/src/svg/v1/InformationOutline';
+import ExpandArrow from 'loot-design/src/svg/ExpandArrow';
+import { colors, styles } from 'loot-design/src/style';
+import { dayFromDate, getMonthYearFormat } from 'loot-core/src/shared/months';
+import {
+  extractScheduleConds,
+  getRecurringDescription
+} from 'loot-core/src/shared/schedules';
+import { getPayeesById } from 'loot-core/src/client/reducers/queries';

 let SchedulesQuery = liveQueryContext(q('schedules').select('*'));

@ -238,9 +246,9 @@ function ScheduleValue({ value }) {
      field="rule"
      data={schedules}
      describe={s => {
-        let payeeId = s._payee;
-        return payeeId
-          ? `${byId[payeeId].name} (${s.next_date})`
+        let { payee } = extractScheduleConds(s._conditions);
+        return payee
+          ? `${byId[payee.value].name} (${s.next_date})`
          : `Next: ${s.next_date}`;
      }}
    />
--- a/packages/desktop-client/src/components/modals/MergeUnusedPayees.js
+++ b/packages/desktop-client/src/components/modals/MergeUnusedPayees.js
@ -1,18 +1,18 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
-import { replaceModal } from 'loot-core/src/client/actions/modals';
-import { send } from 'loot-core/src/platform/client/fetch';
-import { Information } from 'loot-design/src/components/alerts';
 import {
  View,
  Text,
  Modal,
  ModalButtons,
  Button,
-  P
+  P,
+  Stack
 } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
+import { Information } from 'loot-design/src/components/alerts';
+import { colors, styles } from 'loot-design/src/style';
+import { send } from 'loot-core/src/platform/client/fetch';
+import { replaceModal } from 'loot-core/src/client/actions/modals';

 let highlightStyle = { color: colors.p5 };

--- a/packages/desktop-client/src/components/modals/WelcomeScreen.js
+++ b/packages/desktop-client/src/components/modals/WelcomeScreen.js
@ -1,10 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
-
 import * as actions from 'loot-core/src/client/actions';
 import {
  View,
+  Text,
  Modal,
+  Button,
  P,
  ExternalLink
 } from 'loot-design/src/components/common';
@ -69,4 +70,7 @@ function WelcomeScreen({ modalProps, actions }) {
  );
 }

-export default connect(null, actions)(WelcomeScreen);
+export default connect(
+  null,
+  actions
+)(WelcomeScreen);
--- a/packages/desktop-client/src/components/payees/ManagePayeesWithData.js
+++ b/packages/desktop-client/src/components/payees/ManagePayeesWithData.js
@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-
 import * as actions from 'loot-core/src/client/actions';
-import { send, listen } from 'loot-core/src/platform/client/fetch';
 import * as undo from 'loot-core/src/platform/client/undo';
-import { applyChanges } from 'loot-core/src/shared/util';
+import uuid from 'loot-core/src/platform/uuid';
+import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
 import { ManagePayees } from 'loot-design/src/components/payees';
+import { applyChanges } from 'loot-core/src/shared/util';

 function ManagePayeesWithData({
  history,
--- a/packages/desktop-client/src/components/reports/CashFlow.js
+++ b/packages/desktop-client/src/components/reports/CashFlow.js
@ -1,10 +1,5 @@
 import React, { useState, useEffect } from 'react';
-
 import * as d from 'date-fns';
-
-import { send } from 'loot-core/src/platform/client/fetch';
-import * as monthUtils from 'loot-core/src/shared/months';
-import { integerToCurrency } from 'loot-core/src/shared/util';
 import {
  View,
  Text,
@ -12,14 +7,18 @@ import {
  P,
  AlignedText
 } from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
-
-import Change from './Change';
-import { cashFlowByDate } from './graphs/cash-flow-spreadsheet';
-import CashFlowGraph from './graphs/CashFlowGraph';
+import { styles } from 'loot-design/src/style';
+import { send } from 'loot-core/src/platform/client/fetch';
+import * as monthUtils from 'loot-core/src/shared/months';
+import { integerToCurrency } from 'loot-core/src/shared/util';
+import { fromDateRepr } from './util';
 import Header from './Header';
+import Change from './Change';
+import CashFlowGraph from './graphs/CashFlowGraph';
+import { cashFlowByDate } from './graphs/cash-flow-spreadsheet';
 import useReport from './useReport';
 import { useArgsMemo } from './util';
+import { colors } from 'loot-design/src/style';

 function CashFlow() {
  const [earliestMonth, setEarliestMonth] = useState(null);
--- a/packages/desktop-client/src/components/reports/Change.js
+++ b/packages/desktop-client/src/components/reports/Change.js
@ -1,8 +1,8 @@
 import React from 'react';
-
+import { styles } from 'loot-design/src/style';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { Block } from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style'

 function Change({ amount, style }) {
  return (
--- a/packages/desktop-client/src/components/reports/Container.js
+++ b/packages/desktop-client/src/components/reports/Container.js
@ -1,7 +1,6 @@
 import React from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
-
 import { View } from 'loot-design/src/components/common';
+import AutoSizer from 'react-virtualized-auto-sizer';

 class Container extends React.Component {
  render() {
--- a/packages/desktop-client/src/components/reports/DateRange.js
+++ b/packages/desktop-client/src/components/reports/DateRange.js
@ -1,9 +1,7 @@
 import React from 'react';
-
 import * as d from 'date-fns';
-
-import { Block } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+import { Block } from 'loot-design/src/components/common';

 function DateRange({ start, end }) {
  start = d.parseISO(start);
--- a/packages/desktop-client/src/components/reports/Header.js
+++ b/packages/desktop-client/src/components/reports/Header.js
@ -1,13 +1,13 @@
 import React from 'react';
-
-import * as monthUtils from 'loot-core/src/shared/months';
+import { colors, styles } from 'loot-design/src/style';
 import {
  View,
  Select,
+  Link,
  Button,
  ButtonLink
 } from 'loot-design/src/components/common';
-import { styles } from 'loot-design/src/style';
+import * as monthUtils from 'loot-core/src/shared/months';
 import ArrowLeft from 'loot-design/src/svg/v1/ArrowLeft';

 function validateStart(allMonths, start, end) {
--- a/packages/desktop-client/src/components/reports/NetWorth.js
+++ b/packages/desktop-client/src/components/reports/NetWorth.js
@ -1,22 +1,20 @@
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
-
-import * as d from 'date-fns';
 import { bindActionCreators } from 'redux';
-
+import { connect } from 'react-redux';
+import * as d from 'date-fns';
 import * as actions from 'loot-core/src/client/actions';
-import { send } from 'loot-core/src/platform/client/fetch';
-import * as monthUtils from 'loot-core/src/shared/months';
-import { integerToCurrency } from 'loot-core/src/shared/util';
 import { View, P } from 'loot-design/src/components/common';
 import { styles } from 'loot-design/src/style';
-
-import Change from './Change';
+import * as monthUtils from 'loot-core/src/shared/months';
+import { integerToCurrency } from 'loot-core/src/shared/util';
+import { send } from 'loot-core/src/platform/client/fetch';
+import Header from './Header';
+import { fromDateRepr } from './util';
+import useReport from './useReport';
 import netWorthSpreadsheet from './graphs/net-worth-spreadsheet';
 import NetWorthGraph from './graphs/NetWorthGraph';
-import Header from './Header';
-import useReport from './useReport';
-import { fromDateRepr, useArgsMemo } from './util';
+import Change from './Change';
+import { useArgsMemo } from './util';

 function NetWorth({ accounts }) {
  const [earliestMonth, setEarliestMonth] = useState(null);
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@ -1,25 +1,22 @@
 import React from 'react';
-import { connect } from 'react-redux';
-
 import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import { VictoryBar, VictoryGroup, VictoryVoronoiContainer } from 'victory';
-
 import * as actions from 'loot-core/src/client/actions';
-import * as monthUtils from 'loot-core/src/shared/months';
-import { integerToCurrency } from 'loot-core/src/shared/util';
 import { View, Block, AnchorLink } from 'loot-design/src/components/common';
 import { colors, styles } from 'loot-design/src/style';
-
-import Change from './Change';
+import * as monthUtils from 'loot-core/src/shared/months';
+import { integerToCurrency } from 'loot-core/src/shared/util';
+import { useArgsMemo } from './util';
 import theme from './chart-theme';
 import Container from './Container';
-import DateRange from './DateRange';
-import { simpleCashFlow } from './graphs/cash-flow-spreadsheet';
-import netWorthSpreadsheet from './graphs/net-worth-spreadsheet';
-import NetWorthGraph from './graphs/NetWorthGraph';
 import Tooltip from './Tooltip';
 import useReport from './useReport';
-import { useArgsMemo } from './util';
+import netWorthSpreadsheet from './graphs/net-worth-spreadsheet';
+import { simpleCashFlow } from './graphs/cash-flow-spreadsheet';
+import NetWorthGraph from './graphs/NetWorthGraph';
+import Change from './Change';
+import DateRange from './DateRange';

 function Card({ flex, to, style, children }) {
  const containerProps = { flex, margin: 15 };
@ -113,10 +110,7 @@ function CashFlowCard() {
  const end = monthUtils.currentDay();
  const start = monthUtils.currentMonth() + '-01';

-  const data = useReport(
-    'cash_flow_simple',
-    useArgsMemo(simpleCashFlow)(start, end)
-  );
+  const data = useReport('cash_flow_simple', useArgsMemo(simpleCashFlow)(start, end));
  if (!data) {
    return null;
  }
@ -224,9 +218,9 @@ function CashFlowCard() {
 function Overview({ accounts }) {
  return (
    <View
-      style={[
-        styles.page,
-        { paddingLeft: 40, paddingRight: 40, minWidth: 700 }
+    style={[
+      styles.page,
+      { paddingLeft: 40, paddingRight: 40, minWidth: 700 }
      ]}
    >
      <View
--- a/packages/desktop-client/src/components/reports/Tooltip.js
+++ b/packages/desktop-client/src/components/reports/Tooltip.js
@ -1,9 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-import { css, before } from 'glamor';
 import { VictoryTooltip } from 'victory';
-
+import { css, before } from 'glamor';
 import { colors } from 'loot-design/src/style';

 class Tooltip extends React.Component {
--- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.js
+++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.js
@ -1,6 +1,4 @@
 import React from 'react';
-
-import * as d from 'date-fns';
 import {
  VictoryChart,
  VictoryBar,
@ -9,12 +7,11 @@ import {
  VictoryVoronoiContainer,
  VictoryGroup
 } from 'victory';
-
-import { colors } from 'loot-design/src/style';
-
-import theme from '../chart-theme';
+import * as d from 'date-fns';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
+import theme from '../chart-theme';
+import { colors } from 'loot-design/src/style';

 function CashFlowGraph({ style, start, end, graphData, isConcise, compact }) {
  return (
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.js
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.js
@ -1,6 +1,4 @@
 import React from 'react';
-
-import * as d from 'date-fns';
 import {
  VictoryChart,
  VictoryBar,
@ -9,10 +7,10 @@ import {
  VictoryVoronoiContainer,
  VictoryGroup
 } from 'victory';
-
-import theme from '../chart-theme';
+import * as d from 'date-fns';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
+import theme from '../chart-theme';

 function Area({ start, end, data, style, scale, range }) {
  const zero = scale.y(0);
--- a/packages/desktop-client/src/components/reports/graphs/cash-flow-spreadsheet.js
+++ b/packages/desktop-client/src/components/reports/graphs/cash-flow-spreadsheet.js
@ -1,12 +1,9 @@
 import React from 'react';
-
-import * as d from 'date-fns';
-
-import q from 'loot-core/src/client/query-helpers';
 import * as monthUtils from 'loot-core/src/shared/months';
-import { integerToCurrency, integerToAmount } from 'loot-core/src/shared/util';
+import * as d from 'date-fns';
 import { AlignedText } from 'loot-design/src/components/common';
-
+import { integerToCurrency, integerToAmount } from 'loot-core/src/shared/util';
+import q from 'loot-core/src/client/query-helpers';
 import { fromDateRepr, fromDateReprToDay, runAll, index } from '../util';

 export function simpleCashFlow(start, end) {
--- a/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.js
+++ b/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.js
@ -1,17 +1,15 @@
 import React from 'react';
-
-import * as d from 'date-fns';
-
-import q, { runQuery } from 'loot-core/src/client/query-helpers';
+import { mergeObjects, flattenArray } from 'loot-core/src/shared/util';
 import * as monthUtils from 'loot-core/src/shared/months';
+import * as d from 'date-fns';
+import { AlignedText } from 'loot-design/src/components/common';
+import q, { runQuery } from 'loot-core/src/client/query-helpers';
 import {
  integerToCurrency,
  integerToAmount,
  amountToInteger
 } from 'loot-core/src/shared/util';
-import { AlignedText } from 'loot-design/src/components/common';
-
-import { index } from '../util';
+import { fromDateRepr, runAll, index } from '../util';

 export default function createSpreadsheet(start, end, accounts) {
  return async (spreadsheet, setData) => {
--- a/packages/desktop-client/src/components/reports/index.js
+++ b/packages/desktop-client/src/components/reports/index.js
@ -1,11 +1,9 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-
 import { View } from 'loot-design/src/components/common';
-
-import CashFlow from './CashFlow';
-import NetWorth from './NetWorth';
 import Overview from './Overview';
+import NetWorth from './NetWorth';
+import CashFlow from './CashFlow';

 class Reports extends React.Component {
  render() {
--- a/packages/desktop-client/src/components/reports/util.js
+++ b/packages/desktop-client/src/components/reports/util.js
@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-
-import { runQuery } from 'loot-core/src/client/query-helpers';
+import q, { runQuery } from 'loot-core/src/client/query-helpers';

 export function useArgsMemo(func) {
  return (...args) => {
--- a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
+++ b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
@ -1,12 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { useLocation, useHistory } from 'react-router-dom';
-
-import Platform from 'loot-core/src/client/platform';
 import q, { runQuery } from 'loot-core/src/client/query-helpers';
+import Platform from 'loot-core/src/client/platform';
+import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
 import { send } from 'loot-core/src/platform/client/fetch';
-import { getRecurringDescription } from 'loot-core/src/shared/schedules';
 import {
  View,
+  Text,
  Stack,
  Button,
  ButtonWithLoading,
@ -17,18 +18,19 @@ import {
  TableHeader,
  Row,
  Field,
+  Cell,
  SelectCell
 } from 'loot-design/src/components/table';
+import { getRecurringDescription } from 'loot-core/src/shared/schedules';
+import { colors, styles } from 'loot-design/src/style';
 import useSelected, {
  useSelectedDispatch,
  useSelectedItems,
  SelectedProvider
 } from 'loot-design/src/components/useSelected';
-import { colors } from 'loot-design/src/style';
-
 import { Page } from '../Page';
-import DisplayId from '../util/DisplayId';
 import { ScheduleAmountCell } from './SchedulesTable';
+import DisplayId from '../util/DisplayId';

 let ROW_HEIGHT = 43;

--- a/Show more
+++ b/Show more