Delete upcoming-release-notes/5174.md

My Monzo bank appears to return 'name' through the GoCardless getDetails and getMetadata calls, but the value in the getMetadata response is an empty string! Merging metadata values over detail values therefore risks losing values, that are useful to have & to present to the user.

To solve this, we can make getDetailedAccount smarter about merging the two objects. We could swap the object splattening around so details has priority over metadata, but I'm not at all confident there won't be other banks doing strange things with additional properties that might suffer similar bugs in the reverse scenario.

Instead, we loop through all keys in both objects and construct a new merged object, continuing to prioritise metadata over details but changing it to a truthy-based comparison (with the `||` operator).

Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk>

.cursor/rules/pull-request.mdc

@@ -0,0 +1,24 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+Before pushing code changes or opening a pull request, follow these steps:
+
+1. Check if your branch already has a changelog file in the "upcoming-release-notes" folder.
+2. If there is no changelog file for your branch:
+   a. Find the number of the most recent (highest-numbered) open issue or pull request on GitHub.
+   b. Increment that number by 1. Use this as the filename for your new changelog file.
+   c. Create a new markdown file in the "upcoming-release-notes" folder with the following format:
+
+```
+---
+category: Features OR Maintenance OR Enhancements OR Bugfix
+authors: [$GithubUsername]
+---
+
+$Description
+```
+
+3. Commit the new changelog file.
+4. Proceed with your push or pull request.

.cursor/rules/typescript.mdc

@@ -0,0 +1,32 @@
+---
+description: 
+globs: *.ts,*.tsx
+alwaysApply: false
+---
+
+You are an expert in TypeScript and React.
+
+Code Style and Structure
+
+- Write concise, technical TypeScript code.
+- Use functional and declarative programming patterns; avoid classes.
+- Prefer iteration and modularization over code duplication.
+- Use descriptive variable names with auxiliary verbs (e.g., isLoaded, hasError).
+- Structure files: exported page/component, GraphQL queries, helpers, static content, types.
+
+Naming Conventions
+
+- Favor named exports for components and utilities.
+
+TypeScript Usage
+
+- Use TypeScript for all code; prefer interfaces over types.
+- Avoid enums; use objects or maps instead.
+- Avoid using `any` or `unknown` unless absolutely necessary. Look for type definitions in the codebase instead.
+- Avoid type assertions with `as` or `!`; prefer using `satisfies`.
+
+Syntax and Formatting
+
+- Use the "function" keyword for pure functions.
+- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
+- Use declarative JSX, keeping JSX minimal and readable.

.cursor/rules/unit-tests.mdc

@@ -0,0 +1,14 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+Vitest test runner is used for unit tests.
+
+When running unit tests, always include the flag `--watch=false` to prevent watch mode.
+
+To run unit tests for a specific package in the monorepo, use the following command:
+
+`yarn workspace <workspaceNameFromPackageJson> run test <pathToTest>`
+
+Recommendation: Minimize the number of dependencies you mock. The fewer dependencies you mock, the better.

.devcontainer/devcontainer.json

@@ -1,14 +1,11 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-docker-compose
 {
-	"name": "Actual development",
-	"dockerComposeFile": [
-		"../docker-compose.yml",
-		"docker-compose.yml"
-	],
-	// Alternatively:
-	// "image": "mcr.microsoft.com/devcontainers/typescript-node:0-16",
-	"service": "actual-development",
-	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
-	"postCreateCommand": "yarn install"
+  "name": "Actual development",
+  "dockerComposeFile": ["../docker-compose.yml", "docker-compose.yml"],
+  // Alternatively:
+  // "image": "mcr.microsoft.com/devcontainers/typescript-node:0-16",
+  "service": "actual-development",
+  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+  "postCreateCommand": "yarn install"
 }

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,7 +1,7 @@
 name: Bug Report
 description: File a bug report also known as an issue or problem.
 title: '[Bug]: '
-labels: ['bug']
+labels: ['needs triage', 'bug']
 body:
   - type: markdown
     id: intro-md

.github/PULL_REQUEST_TEMPLATE.md

@@ -1 +1 @@
-<!-- Thank you for submitting a pull request! Make sure to follow the instructions to write release notes for your PR — it should only take a minute or two: https://github.com/actualbudget/docs#writing-good-release-notes -->
+<!-- Thank you for submitting a pull request! Make sure to follow the instructions to write release notes for your PR — it should only take a minute or two: https://github.com/actualbudget/docs#writing-good-release-notes. Try running yarn generate:release-notes *before* pushing your PR for an interactive experience. -->

.github/actions/bump-package-versions

@@ -1,19 +1,46 @@
 #!/bin/bash
 set -euo pipefail
 
-version="${1#v}"
+if [ "$#" -gt 0 ]; then
+    version="${1#v}"
+else
+    version=""
+fi
 
 files_to_bump=(
     packages/api/package.json
     packages/desktop-client/package.json
     packages/desktop-electron/package.json
+    packages/sync-server/package.json
 )
 
 for file in "${files_to_bump[@]}"; do
     if [ -z "$version" ]; then
         # version format: YY.MM.patch
-        # logic: if before the 25th, bump patch, else set minor/major to next month
-        version="$(jq -r .version "$file" | perl -e '($y,$m,$p)=split/\./,<>;$d=(localtime)[3];$d>25?($p=0,++$m,$m>12&&($m=1,++$y)):$p++;print"$y.$m.$p\n"')"
+        version="$(jq -r .version "$file" | perl -e '
+            ($y,$m,$p)=split(/\./,<>);
+            ($sec,$min,$hour,$day,$mon,$year)=localtime();
+            $year -= 100;  # Perl year starts at 1900
+            $mon++;  # Adjust 0-indexed month to 1-indexed
+            if ($y == $year && $m == $mon) {
+                if ($day <= 25) {
+                    # Patch release for the current month
+                    $p++;
+                } else {
+                    # Use next month for a new release period
+                    $p = 0;
+                    $m++;
+                    $m > 12 && ($m=1, $y++);
+                }
+            } else {
+                # Use the current date for a new release period
+                $y = $year;
+                $m = $mon;
+                $p = 0;
+            }
+            print "$y.$m.$p\n";
+        ')"
+
         if [ -z "$version" ]; then
             echo "Error: Failed to calculate new version" >&2
             exit 1

.github/actions/get-next-package-version.js

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+
+// This script is used in GitHub Actions to get the next version based on the current package.json version.
+// It supports three types of versioning: nightly, hotfix, and monthly.
+
+const { parseArgs } = require('node:util');
+const fs = require('node:fs');
+
+const args = process.argv;
+
+const options = {
+  'package-json': {
+    type: 'string',
+    short: 'p',
+  },
+  type: {
+    type: 'string', // nightly, hotfix, monthly
+    short: 't',
+  },
+};
+
+const { values } = parseArgs({
+  args,
+  options,
+  allowPositionals: true,
+});
+
+if (!values['package-json']) {
+  console.error(
+    'Please specify the path to package.json using --package-json or -p option.',
+  );
+  process.exit(1);
+}
+
+try {
+  const packageJsonPath = values['package-json'];
+
+  // Read and parse package.json
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const currentVersion = packageJson.version;
+
+  // Parse year and month from version (e.g. 25.5.1 -> year=2025, month=5)
+  const versionParts = currentVersion.split('.');
+  const versionYear = parseInt(versionParts[0]);
+  const versionMonth = parseInt(versionParts[1]);
+  const versionHotfix = parseInt(versionParts[2]);
+
+  // Create date and add 1 month
+  const versionDate = new Date(2000 + versionYear, versionMonth - 1, 1); // month is 0-indexed
+  const nextVersionMonthDate = new Date(
+    versionDate.getFullYear(),
+    versionDate.getMonth() + 1,
+    1,
+  );
+
+  // Format back to YY.M format
+  const nextVersionYear = nextVersionMonthDate
+    .getFullYear()
+    .toString()
+    .slice(-2);
+  const nextVersionMonth = nextVersionMonthDate.getMonth() + 1; // Convert back to 1-indexed
+
+  // Get current date string
+  const currentDate = new Date()
+    .toISOString()
+    .split('T')[0]
+    .replaceAll('-', '');
+
+  switch (values.type) {
+    case 'nightly': {
+      const newVersion = `${nextVersionYear}.${nextVersionMonth}.0-nightly.${currentDate}`;
+      process.stdout.write(newVersion); // return the new version to stdout
+      process.exit();
+    }
+    case 'hotfix': {
+      const bugfixVersion = `${versionYear}.${versionMonth}.${versionHotfix + 1}`;
+      process.stdout.write(bugfixVersion); // return the bugfix version to stdout
+      process.exit();
+    }
+    case 'monthly': {
+      const stableVersion = `${nextVersionYear}.${nextVersionMonth}.0`;
+      process.stdout.write(stableVersion); // return the stable version to stdout
+      process.exit();
+    }
+    default:
+      console.error(
+        'Invalid type specified. Use "nightly", "hotfix", or "monthly".',
+      );
+      process.exit(1);
+  }
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

.github/actions/setup/action.yml

@@ -16,17 +16,21 @@ runs:
     - name: Install node
       uses: actions/setup-node@v4
       with:
-        node-version: 18.16.0
+        node-version: 20
     - name: Install yarn
       run: npm install -g yarn
       shell: bash
       if: ${{ env.ACT }}
+    - name: Get Node version
+      id: get-node
+      run: echo "version=$(node -v)" >> "$GITHUB_OUTPUT"
+      shell: bash
     - name: Cache
       uses: actions/cache@v4
       id: cache
       with:
         path: ${{ format('{0}/**/node_modules', inputs.working-directory) }}
-        key: yarn-v1-${{ runner.os }}-${{ hashFiles(format('{0}/.nvmrc', inputs.working-directory)) }}-${{ hashFiles(format('{0}/**/yarn.lock', inputs.working-directory)) }}
+        key: yarn-v1-${{ runner.os }}-${{ steps.get-node.outputs.version }}-${{ hashFiles(format('{0}/**/yarn.lock', inputs.working-directory)) }}
     - name: Install
       working-directory: ${{ inputs.working-directory }}
       run: yarn --immutable

.github/scripts/count-points.mjs

@@ -0,0 +1,350 @@
+import { Octokit } from '@octokit/rest';
+import { minimatch } from 'minimatch';
+
+/** Repository-specific configuration for points calculation */
+const REPOSITORY_CONFIG = new Map([
+  [
+    'actual',
+    {
+      POINTS_PER_ISSUE_TRIAGE_ACTION: 1,
+      POINTS_PER_ISSUE_CLOSING_ACTION: 1,
+      POINTS_PER_RELEASE_PR: 0,
+      PR_REVIEW_POINT_TIERS: [
+        { minChanges: 1000, points: 6 },
+        { minChanges: 100, points: 4 },
+        { minChanges: 0, points: 2 },
+      ],
+      EXCLUDED_FILES: [
+        'yarn.lock',
+        '.yarn/**/*',
+        'packages/component-library/src/icons/**/*',
+        'release-notes/**/*',
+      ],
+    },
+  ],
+  [
+    'docs',
+    {
+      POINTS_PER_ISSUE_TRIAGE_ACTION: 1,
+      POINTS_PER_ISSUE_CLOSING_ACTION: 1,
+      POINTS_PER_RELEASE_PR: 4,
+      PR_REVIEW_POINT_TIERS: [
+        { minChanges: 1000, points: 6 },
+        { minChanges: 100, points: 4 },
+        { minChanges: 0, points: 2 },
+      ],
+      EXCLUDED_FILES: ['yarn.lock', '.yarn/**/*'],
+    },
+  ],
+]);
+
+/**
+ * Get the start and end dates for the last month.
+ * @returns {Object} An object containing the start and end dates.
+ */
+function getLastMonthDates() {
+  // Get data relating to the last month
+  const now = new Date();
+  const firstDayOfLastMonth = new Date(
+    now.getFullYear(),
+    now.getMonth() - 1,
+    1,
+  );
+  const since = process.env.START_DATE
+    ? new Date(process.env.START_DATE)
+    : firstDayOfLastMonth;
+
+  // Calculate the end of the month for the since date
+  const until = new Date(
+    since.getFullYear(),
+    since.getMonth() + 1,
+    0,
+    23,
+    59,
+    59,
+    999,
+  );
+
+  return { since, until };
+}
+
+/**
+ * Used for calculating the monthly points each core contributor has earned.
+ * These are used for payouts depending.
+ * @param {string} repo - The repository to analyze ('actual' or 'docs')
+ * @returns {number} The total points earned for the repository
+ */
+async function countContributorPoints(repo) {
+  const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
+  const owner = 'actualbudget';
+  const config = REPOSITORY_CONFIG.get(repo);
+
+  const { since, until } = getLastMonthDates();
+
+  // Get organization members
+  const { data: orgMembers } = await octokit.orgs.listMembers({
+    org: owner,
+  });
+  const orgMemberLogins = new Set(orgMembers.map(member => member.login));
+
+  // Initialize stats map with all org members
+  const stats = new Map(
+    Array.from(orgMemberLogins).map(login => [
+      login,
+      {
+        reviews: [], // Will store objects with PR number and points
+        labelRemovals: [],
+        issueClosings: [],
+        points: 0,
+      },
+    ]),
+  );
+
+  // Helper function to print statistics
+  const printStats = (title, getValue, formatLine) => {
+    console.log(`\n${title}:`);
+    console.log('='.repeat(title.length + 1));
+
+    const entries = Array.from(stats.entries())
+      .map(([user, userStats]) => [user, getValue(userStats)])
+      .filter(([, count]) => count > 0)
+      .sort((a, b) => b[1] - a[1]);
+
+    if (entries.length === 0) {
+      console.log(`No ${title.toLowerCase()} found in the last month.`);
+    } else {
+      entries.forEach(([user, count]) => {
+        console.log(formatLine(user, count));
+      });
+    }
+  };
+
+  // Get all PRs using search
+  const searchQuery = `repo:${owner}/${repo} is:pr is:merged merged:${since.toISOString()}..${until.toISOString()}`;
+  const recentPRs = await octokit.paginate(
+    octokit.search.issuesAndPullRequests,
+    {
+      q: searchQuery,
+      per_page: 100,
+      advanced_search: true,
+    },
+    response => response.data,
+  );
+
+  // Get reviews and PR details for each PR
+  for (const pr of recentPRs) {
+    const { data: reviews } = await octokit.pulls.listReviews({
+      owner,
+      repo,
+      pull_number: pr.number,
+    });
+
+    // Get list of modified files
+    const { data: modifiedFiles } = await octokit.pulls.listFiles({
+      owner,
+      repo,
+      pull_number: pr.number,
+    });
+
+    // Calculate points based on PR size, excluding specified files
+    const totalChanges = modifiedFiles
+      .filter(
+        file =>
+          !config.EXCLUDED_FILES.some(pattern =>
+            minimatch(file.filename, pattern),
+          ),
+      )
+      .reduce((sum, file) => sum + file.additions + file.deletions, 0);
+
+    // Check if this is a release PR
+    const isReleasePR = pr.title.match(/^🔖 \(\d+\.\d+\.\d+\)/);
+
+    // Calculate points for reviewers based on PR size
+    const prPoints = config.PR_REVIEW_POINT_TIERS.find(
+      tier => totalChanges > tier.minChanges,
+    ).points;
+
+    // Add points to the reviewers
+    const uniqueReviewers = new Set();
+    reviews
+      .filter(
+        review =>
+          stats.has(review.user?.login) &&
+          review.state === 'APPROVED' &&
+          !uniqueReviewers.has(review.user?.login),
+      )
+      .forEach(({ user: { login: reviewer } }) => {
+        uniqueReviewers.add(reviewer);
+        const userStats = stats.get(reviewer);
+        userStats.reviews.push({ pr: pr.number.toString(), points: prPoints });
+        userStats.points += prPoints;
+      });
+
+    // Award points to the PR creator if it's a release PR
+    if (isReleasePR && stats.has(pr.user.login)) {
+      const creatorStats = stats.get(pr.user.login);
+      creatorStats.reviews.push({
+        pr: pr.number.toString(),
+        points: config.POINTS_PER_RELEASE_PR,
+        isReleaseCreator: true,
+      });
+      creatorStats.points += config.POINTS_PER_RELEASE_PR;
+    }
+  }
+
+  // Get all issues with label events in the last month
+  const issues = await octokit.paginate(
+    octokit.issues.listForRepo,
+    {
+      owner,
+      repo,
+      state: 'all',
+      sort: 'updated',
+      direction: 'desc',
+      per_page: 100,
+      since: since.toISOString(),
+    },
+    (response, done) =>
+      response.data.filter(issue => new Date(issue.updated_at) <= until),
+  );
+
+  // Get label events for each issue
+  for (const issue of issues) {
+    const { data: events } = await octokit.issues.listEventsForTimeline({
+      owner,
+      repo,
+      issue_number: issue.number,
+    });
+
+    // Process events
+    events
+      .filter(
+        event =>
+          new Date(event.created_at) > since &&
+          new Date(event.created_at) <= until &&
+          stats.has(event.actor?.login),
+      )
+      .forEach(event => {
+        if (
+          event.event === 'unlabeled' &&
+          event.label &&
+          event.label.name.toLowerCase() === 'needs triage'
+        ) {
+          const remover = event.actor.login;
+          const userStats = stats.get(remover);
+          userStats.labelRemovals.push(issue.number.toString());
+          userStats.points += config.POINTS_PER_ISSUE_TRIAGE_ACTION;
+        }
+
+        if (event.event === 'closed') {
+          const closer = event.actor.login;
+          const userStats = stats.get(closer);
+          userStats.issueClosings.push(issue.number.toString());
+          userStats.points += config.POINTS_PER_ISSUE_CLOSING_ACTION;
+        }
+      });
+  }
+
+  // Print all statistics
+  printStats(
+    `PR Review Statistics (${repo})`,
+    stats => stats.reviews.length,
+    (user, count) =>
+      `${user}: ${count} (PRs: ${stats
+        .get(user)
+        .reviews.map(r => {
+          if (r.isReleaseCreator) {
+            return `#${r.pr} (${r.points}pts - Release Creator)`;
+          }
+          return `#${r.pr} (${r.points}pts)`;
+        })
+        .join(', ')})`,
+  );
+  printStats(
+    `"Needs Triage" Label Removal Statistics (${repo})`,
+    stats => stats.labelRemovals.length,
+    (user, count) =>
+      `${user}: ${count} (Issues: ${stats.get(user).labelRemovals.join(', ')})`,
+  );
+  printStats(
+    `Issue Closing Statistics (${repo})`,
+    stats => stats.issueClosings.length,
+    (user, count) =>
+      `${user}: ${count} (Issues: ${stats.get(user).issueClosings.join(', ')})`,
+  );
+
+  // Print points summary
+  printStats(
+    `Points Summary (${repo})`,
+    stats => stats.points,
+    (user, userPoints) => `${user}: ${userPoints}`,
+  );
+
+  // Calculate and print total points
+  const totalPoints = Array.from(stats.values()).reduce(
+    (sum, userStats) => sum + userStats.points,
+    0,
+  );
+  console.log(`\nTotal points earned for ${repo}: ${totalPoints}`);
+
+  // Return the points
+  return new Map(
+    Array.from(stats.entries()).map(([login, userStats]) => [
+      login,
+      userStats.points,
+    ]),
+  );
+}
+
+/**
+ * Calculate the points for both repositories and print cumulative results
+ */
+async function calculateCumulativePoints() {
+  // Get stats for each repository
+  const repoPointsResults = await Promise.all(
+    Array.from(REPOSITORY_CONFIG.keys()).map(countContributorPoints),
+  );
+
+  // Calculate cumulative stats
+  const cumulativeStats = new Map(repoPointsResults[0]);
+
+  // Combine stats from all repositories
+  for (let i = 1; i < repoPointsResults.length; i++) {
+    for (const [login, points] of repoPointsResults[i].entries()) {
+      if (!cumulativeStats.has(login)) {
+        cumulativeStats.set(login, 0);
+      }
+
+      cumulativeStats.set(login, cumulativeStats.get(login) + points);
+    }
+  }
+
+  // Print cumulative statistics
+  console.log('\n\nCUMULATIVE STATISTICS ACROSS ALL REPOSITORIES');
+  console.log('='.repeat(50));
+
+  console.log('\nCumulative Points Summary:');
+  console.log('='.repeat('Cumulative Points Summary'.length + 1));
+
+  const entries = Array.from(cumulativeStats.entries())
+    .filter(([, count]) => count > 0)
+    .sort((a, b) => b[1] - a[1]);
+
+  if (entries.length === 0) {
+    console.log('No cumulative points summary found.');
+  } else {
+    entries.forEach(([user, points]) => {
+      console.log(`${user}: ${points}`);
+    });
+  }
+
+  // Calculate and print total cumulative points
+  const totalCumulativePoints = Array.from(cumulativeStats.values()).reduce(
+    (sum, points) => sum + points,
+    0,
+  );
+  console.log('\nTotal cumulative points earned: ' + totalCumulativePoints);
+}
+
+// Run the calculations
+calculateCumulativePoints().catch(console.error);

.github/workflows/autofix.yml

@@ -0,0 +1,23 @@
+name: autofix.ci
+
+defaults:
+  run:
+    shell: bash
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+
+permissions:
+  contents: read
+
+jobs:
+  autofix:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Format code
+        run: yarn lint:fix
+      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27

.github/workflows/build.yml

@@ -57,7 +57,7 @@ jobs:
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Build Web
-        run: ./bin/package-browser
+        run: yarn build:browser
       - name: Upload Build
         uses: actions/upload-artifact@v4
         with:
@@ -76,7 +76,7 @@ jobs:
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Build Server
-        run: cd packages/sync-server && yarn build
+        run: yarn workspace @actual-app/sync-server build
       - name: Upload Build
         uses: actions/upload-artifact@v4
         with:

.github/workflows/check.yml

@@ -27,6 +27,16 @@ jobs:
         uses: ./.github/actions/setup
       - name: Typecheck
         run: yarn typecheck
+  validate-cli:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Web
+        run: yarn build:server
+      - name: Check that the built CLI works
+        run: node packages/sync-server/build/bin/actual-server.js --version
   test:
     runs-on: ubuntu-latest
     steps:
@@ -43,6 +53,6 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '19'
+          node-version: 20
       - name: Check migrations
         run: node ./.github/actions/check-migrations.js

.github/workflows/count-points.yml

@@ -0,0 +1,26 @@
+name: Count points
+
+on:
+  schedule:
+    # Run at 00:00 on the first day of every month
+    - cron: '0 0 1 * *'
+  workflow_dispatch:
+    inputs:
+      startDate:
+        description: 'Start date for point counter (YYYY-MM-DD)'
+        required: true
+        type: string
+
+jobs:
+  count-points:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Count points
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          START_DATE: ${{ inputs.startDate }}
+        run: node .github/scripts/count-points.mjs

.github/workflows/docker-edge.yml

@@ -24,6 +24,7 @@ env:
   IMAGES: |
     actualbudget/actual-server
     ghcr.io/actualbudget/actual-server
+    ghcr.io/actualbudget/actual
 
   # Creates the following tags:
   # - actual-server:edge
@@ -33,6 +34,7 @@ env:
 
 jobs:
   build:
+    if: ${{ github.event.repository.fork == false }}
     name: Build Docker image
     runs-on: ubuntu-latest
     strategy:
@@ -71,17 +73,36 @@ jobs:
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Download artifacts
-        run: ./packages/sync-server/docker/download-artifacts.sh
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      # Building outside of the docker image allows us to build once and push to multiple platforms
+      # This is faster and avoids yarn memory issues
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Web
+        run: yarn build:server
 
-      - name: Build and push image
+      - name: Build image for testing
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: false
+          load: true
+          file: packages/sync-server/docker/${{ matrix.os }}.Dockerfile
+          tags: actualbudget/actual-server-testing
+
+      - name: Test that the docker image boots
+        run: |
+          docker run --detach --network=host actualbudget/actual-server-testing
+          sleep 5
+          curl --fail -sS -LI -w '%{http_code}\n' --retry 10 --retry-delay 1 --retry-connrefused localhost:5006
+
+      # This will use the cache from the earlier build step and not rebuild the image
+      # https://docs.docker.com/build/ci/github-actions/test-before-push/
+      - name: Build and push images
         uses: docker/build-push-action@v5
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}
-          file: packages/sync-server/docker/edge-${{ matrix.os }}.Dockerfile
+          file: packages/sync-server/docker/${{ matrix.os }}.Dockerfile
           platforms: linux/amd64,linux/arm64,linux/arm/v7${{ matrix.os == 'alpine' && ',linux/arm/v6' || '' }}
           tags: ${{ steps.meta.outputs.tags }}
           build-args: |

.github/workflows/docker-release.yml

@@ -13,6 +13,7 @@ env:
   IMAGES: |
     actualbudget/actual-server
     ghcr.io/actualbudget/actual-server
+    ghcr.io/actualbudget/actual
 
   # Creates the following tags:
   # - actual-server:latest (see docker/metadata-action flavor inputs, below)
@@ -69,12 +70,19 @@ jobs:
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
+      # Building outside of the docker image allows us to build once and push to multiple platforms
+      # This is faster and avoids yarn memory issues
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Web
+        run: yarn build:server
+
       - name: Build and push ubuntu image
         uses: docker/build-push-action@v5
         with:
           context: .
           push: true
-          file: packages/sync-server/docker/stable-ubuntu.Dockerfile
+          file: packages/sync-server/docker/ubuntu.Dockerfile
           platforms: linux/amd64,linux/arm64,linux/arm/v7
           tags: ${{ steps.meta.outputs.tags }}
 
@@ -83,6 +91,6 @@ jobs:
         with:
           context: .
           push: true
-          file: packages/sync-server/docker/stable-alpine.Dockerfile
+          file: packages/sync-server/docker/alpine.Dockerfile
           platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
           tags: ${{ steps.alpine-meta.outputs.tags }}

.github/workflows/e2e-test.yml

@@ -32,7 +32,7 @@ jobs:
     needs: netlify
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.41.1-jammy
+      image: mcr.microsoft.com/playwright:v1.52.0-jammy
     steps:
       - uses: actions/checkout@v4
       - name: Set up environment
@@ -48,12 +48,33 @@ jobs:
           path: packages/desktop-client/test-results/
           retention-days: 30
           overwrite: true
+
+  functional-desktop-app:
+    name: Functional Desktop App
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.52.0-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Run Desktop app E2E Tests
+        run: |
+          xvfb-run --auto-servernum --server-args="-screen 0 1920x1080x24" -- yarn e2e:desktop
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: desktop-app-test-results
+          path: packages/desktop-electron/e2e/test-results/
+          retention-days: 30
+          overwrite: true
+
   vrt:
     name: Visual regression
     needs: netlify
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.41.1-jammy
+      image: mcr.microsoft.com/playwright:v1.52.0-jammy
     steps:
       - uses: actions/checkout@v4
       - name: Set up environment

.github/workflows/electron-master.yml

@@ -77,13 +77,68 @@ jobs:
           name: actual-electron-${{ matrix.os }}-appx
           path: |
             packages/desktop-electron/dist/*.appx
-      - name: Add to Release
+      - name: Process release version
+        id: process_version
+        run: |
+          echo "version=${GITHUB_REF_NAME#v}" >> "$GITHUB_OUTPUT"
+      - name: Add to new release
         uses: softprops/action-gh-release@v2
         with:
           draft: true
+          body: |
+            :link: [View release notes](https://actualbudget.org/blog/release-${{ steps.process_version.outputs.version }})
+
+            ## Desktop releases
+            Please note: Microsoft store updates can sometimes lag behind the main release by a couple of days while they verify the new version.
+
+            <a href="https://apps.microsoft.com/detail/9p2hmlhsdbrm?cid=Github+Releases&mode=direct">
+              <img src="https://get.microsoft.com/images/en-us%20dark.svg" width="200"/>
+            </a>
           files: |
             packages/desktop-electron/dist/*.dmg
             packages/desktop-electron/dist/*.exe
             !packages/desktop-electron/dist/Actual-windows.exe
             packages/desktop-electron/dist/*.AppImage
             packages/desktop-electron/dist/*.flatpak
+
+  publish-microsoft-store:
+    needs: build
+    runs-on: windows-latest
+    if: ${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+    steps:
+      - name: Install StoreBroker
+        shell: powershell
+        run: |
+          Install-Module -Name StoreBroker -AcceptLicense -Force -Scope CurrentUser -Verbose
+
+      - name: Download Microsoft Store artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: actual-electron-windows-latest-appx
+
+      - name: Submit to Microsoft Store
+        shell: powershell
+        run: |
+          # Disable telemetry
+          $global:SBDisableTelemetry = $true
+
+          # Authenticate against the store
+          $pass = ConvertTo-SecureString -String '${{ secrets.MICROSOFT_STORE_CLIENT_SECRET }}' -AsPlainText -Force
+          $cred = New-Object -TypeName System.Management.Automation.PSCredential -ArgumentList ${{ secrets.MICROSOFT_STORE_CLIENT_ID }},$pass
+          Set-StoreBrokerAuthentication -TenantId '${{ secrets.MICROSOFT_STORE_TENANT_ID }}' -Credential $cred
+
+          # Zip and create metadata files
+          $artifacts = Get-ChildItem -Path . -Filter *.appx | Select-Object -ExpandProperty FullName
+          New-StoreBrokerConfigFile -Path "$PWD/config.json" -AppId ${{ secrets.MICROSOFT_STORE_PRODUCT_ID }}
+          New-SubmissionPackage -ConfigPath "$PWD/config.json" -DisableAutoPackageNameFormatting -AppxPath $artifacts -OutPath "$PWD" -OutName submission
+
+          # Submit the app
+          # See https://github.com/microsoft/StoreBroker/blob/master/Documentation/USAGE.md#the-easy-way
+          Update-ApplicationSubmission `
+            -AppId ${{ secrets.MICROSOFT_STORE_PRODUCT_ID }} `
+            -SubmissionDataPath "submission.json" `
+            -PackagePath "submission.zip" `
+            -ReplacePackages `
+            -NoStatus `
+            -AutoCommit `
+            -Force

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

@@ -3,7 +3,7 @@ name: Extract and upload i18n strings
 on:
   schedule:
     # 4am UTC
-    - cron: "0 4 * * *"
+    - cron: '0 4 * * *'
   workflow_dispatch:
 
 jobs:
@@ -19,7 +19,7 @@ jobs:
         uses: ./actual/.github/actions/setup
         with:
           working-directory: actual
-          download-translations: false  # As we'll manually clone instead
+          download-translations: false # As we'll manually clone instead
       - name: Configure Git config
         run: |
           git config --global user.name "github-actions[bot]"
@@ -78,7 +78,7 @@ jobs:
             actualbudget/actual
 
       - name: Unlock translations
-        if: always()  # Clean up even on failure
+        if: always() # Clean up even on failure
         run: |
           wlc \
             --url https://hosted.weblate.org/api/ \

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

@@ -27,7 +27,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '19'
+          node-version: 20
       - name: Handle feature requests
         run: node .github/actions/handle-feature-requests.js
         env:

.github/workflows/netlify-release.yml

@@ -22,15 +22,15 @@ jobs:
     steps:
       - name: Repository Checkout
         uses: actions/checkout@v4
-    
+
       - name: Set up environment
         uses: ./.github/actions/setup
-    
+
       - name: Install Netlify
         run: npm install netlify-cli@17.10.1 -g
-    
+
       - name: Build Actual
-        run: ./bin/package-browser
+        run: yarn build:browser
 
       - name: Deploy to Netlify
         id: netlify_deploy
@@ -40,4 +40,4 @@ jobs:
             --site ${{ secrets.NETLIFY_SITE_ID }} \
             --auth ${{ secrets.NETLIFY_API_TOKEN }} \
             --filter @actual-app/web \
-            --prod
+            --prod

.github/workflows/publish-nightly-npm-packages.yml

@@ -0,0 +1,94 @@
+name: Publish nightly npm packages
+
+# Nightly npm packages are built daily
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+jobs:
+  build-and-pack:
+    runs-on: ubuntu-latest
+    name: Build and pack npm packages
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up environment
+        uses: ./.github/actions/setup
+
+      - name: Update package versions
+        run: |
+          # Get new nightly versions
+          NEW_WEB_VERSION=$(node ./.github/actions/get-next-package-version.js --package-json ./packages/desktop-client/package.json --type nightly)
+          NEW_SYNC_VERSION=$(node ./.github/actions/get-next-package-version.js --package-json ./packages/sync-server/package.json --type nightly)
+          NEW_API_VERSION=$(node ./.github/actions/get-next-package-version.js --package-json ./packages/api/package.json --type nightly)
+
+          # Set package versions
+          npm version $NEW_WEB_VERSION --no-git-tag-version --workspace=@actual-app/web --no-workspaces-update
+          npm version $NEW_SYNC_VERSION --no-git-tag-version --workspace=@actual-app/sync-server --no-workspaces-update
+          npm version $NEW_API_VERSION --no-git-tag-version --workspace=@actual-app/api --no-workspaces-update
+
+      - name: Yarn install
+        run: |
+          yarn install
+
+      - name: Build Server & Web
+        run: yarn build:server
+
+      - name: Pack the web and server packages
+        run: |
+          yarn workspace @actual-app/web pack --filename @actual-app/web.tgz
+          yarn workspace @actual-app/sync-server pack --filename @actual-app/sync-server.tgz
+
+      - name: Build API
+        run: yarn build:api
+
+      - name: Pack the api package
+        run: |
+          yarn workspace @actual-app/api pack --filename @actual-app/api.tgz
+
+      - name: Upload package artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: npm-packages
+          path: |
+            packages/desktop-client/@actual-app/web.tgz
+            packages/sync-server/@actual-app/sync-server.tgz
+            packages/api/@actual-app/api.tgz
+
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish Nightly npm packages
+    needs: build-and-pack
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Download the artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: npm-packages
+
+      - name: Setup node and npm registry
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Publish Web
+        run: |
+          npm publish desktop-client/@actual-app/web.tgz --access public --tag nightly
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish Sync-Server
+        run: |
+          npm publish sync-server/@actual-app/sync-server.tgz --access public --tag nightly
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish API
+        run: |
+          npm publish api/@actual-app/api.tgz --access public --tag nightly
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/publish-npm-packages.yml

@@ -0,0 +1,78 @@
+name: Publish npm packages
+
+# # Npm packages are published for every new tag
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  build-and-pack:
+    runs-on: ubuntu-latest
+    name: Build and pack npm packages
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up environment
+        uses: ./.github/actions/setup
+
+      - name: Build Web
+        run: yarn build:server
+
+      - name: Pack the web and server packages
+        run: |
+          yarn workspace @actual-app/web pack --filename @actual-app/web.tgz
+          yarn workspace @actual-app/sync-server pack --filename @actual-app/sync-server.tgz
+
+      - name: Build API
+        run: yarn build:api
+
+      - name: Pack the api package
+        run: |
+          yarn workspace @actual-app/api pack --filename @actual-app/api.tgz
+
+      - name: Upload package artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: npm-packages
+          path: |
+            packages/desktop-client/@actual-app/web.tgz
+            packages/sync-server/@actual-app/sync-server.tgz
+            packages/api/@actual-app/api.tgz
+
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish npm packages
+    needs: build-and-pack
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Download the artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: npm-packages
+
+      - name: Setup node and npm registry
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Publish Web
+        run: |
+          npm publish desktop-client/@actual-app/web.tgz --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish Sync-Server
+        run: |
+          npm publish sync-server/@actual-app/sync-server.tgz --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish API
+        run: |
+          npm publish api/@actual-app/api.tgz --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/stale.yml

@@ -2,6 +2,7 @@ name: 'Close stale PRs'
 on:
   schedule:
     - cron: '30 1 * * *'
+  workflow_dispatch: # Allow manual triggering
 
 jobs:
   stale:
@@ -24,3 +25,18 @@ jobs:
           any-of-labels: ':construction: WIP'
           days-before-close: -1
           days-before-issue-stale: -1
+
+  stale-needs-info:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-issue-label: 'needs info'
+          days-before-stale: -1
+          days-before-close: 7
+          close-issue-message: 'This issue has been automatically closed because there have been no comments for 7 days after the "needs info" label was added. If you still need help, please feel free to reopen the issue with the requested information.'
+          remove-stale-when-updated: false
+          stale-pr-message: '' # Disable PR processing
+          close-pr-message: '' # Disable PR processing
+          days-before-pr-stale: -1 # Disable PR processing
+          days-before-pr-close: -1 # Disable PR processing

.github/workflows/update-vrt.yml

@@ -1,7 +1,7 @@
 name: /update-vrt
 on:
   issue_comment:
-    types: [ created ]
+    types: [created]
 
 permissions:
   pull-requests: read
@@ -19,10 +19,10 @@ jobs:
       github.event.issue.pull_request &&
       contains(github.event.comment.body, '/update-vrt')
     container:
-      image: mcr.microsoft.com/playwright:v1.41.1-jammy
+      image: mcr.microsoft.com/playwright:v1.52.0-jammy
     steps:
       - name: Get PR branch
-#        Until https://github.com/xt0rted/pull-request-comment-branch/issues/322 is resolved we use the forked version
+        #        Until https://github.com/xt0rted/pull-request-comment-branch/issues/322 is resolved we use the forked version
         uses: gotson/pull-request-comment-branch@head-repo-owner-dist
         id: comment-branch
       - uses: actions/checkout@v4
@@ -31,6 +31,10 @@ jobs:
           ref: ${{ steps.comment-branch.outputs.head_ref }}
       - name: Set up environment
         uses: ./.github/actions/setup
+      - name: Run VRT Tests on Desktop app
+        continue-on-error: true
+        run: |
+          xvfb-run --auto-servernum --server-args="-screen 0 1920x1080x24" -- yarn e2e:desktop --update-snapshots
       - name: Wait for Netlify build to finish
         id: netlify
         env:
@@ -97,7 +101,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           commentId: ${{ github.event.comment.id }}
-          reaction: "rocket"
+          reaction: 'rocket'
 
   add-starting-reaction:
     runs-on: ubuntu-latest
@@ -112,4 +116,4 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           commentId: ${{ github.event.comment.id }}
-          reaction: "+1"
+          reaction: '+1'

.gitignore

@@ -3,6 +3,7 @@
 !data/.gitkeep
 /data2
 Actual-*
+!actual-server.js
 **/xcuserdata/*
 export-2020-01-10.csv
 
@@ -53,3 +54,9 @@ bundle.mobile.js.map
 
 # build output
 package.tgz
+
+# Fly.io configuration
+fly.toml
+
+# TypeScript cache
+build/

.nvmrc

@@ -1 +1 @@
-v18.16.0
+v20/*

.prettierignore

@@ -1 +1,29 @@
 sync_pb.*
+packages/api/app/bundle.api.js
+packages/api/app/stats.json
+packages/api/dist
+packages/api/@types
+packages/api/migrations
+packages/crdt/dist
+packages/component-library/src/icons/**/*
+packages/desktop-client/bundle.browser.js
+packages/desktop-client/build/
+packages/desktop-client/locale/
+packages/desktop-client/build-electron/
+packages/desktop-client/build-stats/
+packages/desktop-client/public/kcab/
+packages/desktop-client/public/data/
+packages/desktop-client/**/node_modules/*
+packages/desktop-client/node_modules/
+packages/desktop-client/test-results/
+packages/desktop-client/playwright-report/
+packages/desktop-electron/client-build/
+packages/desktop-electron/build/
+packages/desktop-electron/dist/
+packages/import-ynab4/**/node_modules/*
+packages/import-ynab5/**/node_modules/*
+packages/loot-core/**/node_modules/*
+packages/loot-core/**/lib-dist/*
+packages/loot-core/**/proto/*
+.yarn/*
+upcoming-release-notes/*

.yarn/patches/adm-zip-npm-0.5.16-4556fea098.patch

@@ -0,0 +1,10 @@
+diff --git a/methods/inflater.js b/methods/inflater.js
+index 8769e66e82b25541aba80b1ac6429199c9a8179f..1d4402402f0e1aaf64062c1f004c3d6e6fe93e76 100644
+--- a/methods/inflater.js
++++ b/methods/inflater.js
+@@ -1,4 +1,4 @@
+-const version = +(process.versions ? process.versions.node : "").split(".")[0] || 0;
++const version = +(process?.versions?.node ?? "").split(".")[0] || 0;
+ 
+ module.exports = function (/*Buffer*/ inbuf, /*number*/ expectedLength) {
+     var zlib = require("zlib");

.yarnrc.yml

@@ -6,4 +6,4 @@ enableTransparentWorkspaces: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.9.1.cjs

Dockerfile

@@ -5,7 +5,7 @@
 # you are doing.
 ###################################################
 
-FROM node:18-bullseye as dev
+FROM node:20-bullseye as dev
 RUN apt-get update -y && apt-get upgrade -y && apt-get install -y openssl
 WORKDIR /app
 CMD ["sh", "./bin/docker-start"]

README.md

@@ -66,7 +66,11 @@ To add new feature requests, open a new Issue of the "Feature Request" type.
 
 ### Translation
 
-Make Actual Budget accessible to more people by helping with the [Internationalization](https://actualbudget.org/docs/contributing/i18n/) of Actual. We are using a crowd sourcing tool to manage the translations, see our [Weblate Project](https://hosted.weblate.org/projects/actualbudget/). Weblate proudly supports open-source software projects through their [Libre plan](https://weblate.org/en/hosting/#libre). 
+Make Actual Budget accessible to more people by helping with the [Internationalization](https://actualbudget.org/docs/contributing/i18n/) of Actual. We are using a crowd sourcing tool to manage the translations, see our [Weblate Project](https://hosted.weblate.org/projects/actualbudget/). Weblate proudly supports open-source software projects through their [Libre plan](https://weblate.org/en/hosting/#libre).
+
+<a href="https://hosted.weblate.org/engage/actualbudget/">
+<img src="https://hosted.weblate.org/widget/actualbudget/actual/287x66-grey.png" alt="Translation status" />
+</a>
 
 ## Repo Activity
 

bin/package-browser

@@ -9,6 +9,7 @@ if ! [ -d packages/desktop-client/locale ]; then
     git clone https://github.com/actualbudget/translations packages/desktop-client/locale
 fi
 pushd packages/desktop-client/locale > /dev/null
+git checkout .
 git pull
 popd > /dev/null
 packages/desktop-client/bin/remove-untranslated-languages

bin/package-electron

@@ -6,8 +6,8 @@ RELEASE=""
 CI=${CI:-false}
 
 cd "$ROOT/.."
-
 POSITIONAL=()
+SKIP_EXE_BUILD=false
 while [[ $# -gt 0 ]]; do
   key="$1"
 
@@ -16,26 +16,19 @@ while [[ $# -gt 0 ]]; do
       RELEASE="production"
       shift
       ;;
+      --skip-exe-build)
+      SKIP_EXE_BUILD=true
+      shift
+      ;;
       *)
       POSITIONAL+=("$1")
       shift
       ;;
   esac
 done
+
 set -- "${POSITIONAL[@]}"
 
-if [ "$OSTYPE" == "msys" ]; then
-    if [ $CI != true ]; then
-        read -s -p "Windows certificate password: " -r CSC_KEY_PASSWORD
-        export CSC_KEY_PASSWORD
-    elif [ -n "$CIRCLE_TAG" ]; then
-        # We only want to run this on CircleCI as Github doesn't have the CSC_KEY_PASSWORD secret set.
-        certutil -f -p ${CSC_KEY_PASSWORD} -importPfx ~/windows-shift-reset-llc.p12
-    fi
-fi
-
-yarn workspace loot-core build:node
-
 # Get translations
 echo "Updating translations..."
 if ! [ -d packages/desktop-client/locale ]; then
@@ -46,22 +39,34 @@ git pull
 popd > /dev/null
 packages/desktop-client/bin/remove-untranslated-languages
 
+yarn workspace loot-core build:node
 yarn workspace @actual-app/web build --mode=desktop # electron specific build
 
+# required for running the sync-server server
+yarn workspace loot-core build:browser
+yarn workspace @actual-app/web build:browser
+yarn workspace @actual-app/sync-server build
+
 yarn workspace desktop-electron update-client
 
 (
     cd packages/desktop-electron;
     yarn clean;
 
-    if [ "$RELEASE" == "production" ]; then
-        if [ -f ../../.secret-tokens ]; then
-            source ../../.secret-tokens
-        fi
-        yarn build
-
-        echo "\nCreated release"
+    if [ $SKIP_EXE_BUILD == true ]; then
+        echo "Building the dist"
+        yarn build:dist
+        echo "Skipping exe build"
     else
-        SKIP_NOTARIZATION=true yarn build
+      if [ "$RELEASE" == "production" ]; then
+          if [ -f ../../.secret-tokens ]; then
+              source ../../.secret-tokens
+          fi
+          yarn build
+
+          echo "Created release"
+      else
+          SKIP_NOTARIZATION=true yarn build
+      fi
     fi
 )

bin/release-note-generator.ts

@@ -0,0 +1,182 @@
+import { exec } from 'node:child_process';
+import { existsSync, writeFile } from 'node:fs';
+import { exit } from 'node:process';
+
+import prompts from 'prompts';
+
+async function run() {
+  const username = await execAsync(
+    // eslint-disable-next-line rulesdir/typography
+    "gh api user --jq '.login'",
+    'To avoid having to enter your username, consider installing the official GitHub CLI (https://github.com/cli/cli) and logging in with `gh auth login`.',
+  );
+  const activePr = await getActivePr(username);
+  if (activePr) {
+    console.log(
+      `Found potentially matching PR ${activePr.number}: ${activePr.title}`,
+    );
+  }
+  const initialPrNumber = activePr?.number ?? (await getNextPrNumber());
+
+  const result = await prompts([
+    {
+      name: 'githubUsername',
+      message: 'Comma-separated GitHub username(s)',
+      type: 'text',
+      initial: username,
+    },
+    {
+      name: 'pullRequestNumber',
+      message: 'PR Number',
+      type: 'number',
+      initial: initialPrNumber,
+    },
+    {
+      name: 'releaseNoteType',
+      message: 'Release Note Type',
+      type: 'select',
+      choices: [
+        { title: '✨ Features', value: 'Features' },
+        { title: '👍 Enhancements', value: 'Enhancements' },
+        { title: '🐛 Bugfix', value: 'Bugfix' },
+        { title: '⚙️  Maintenance', value: 'Maintenance' },
+      ],
+    },
+    {
+      name: 'oneLineSummary',
+      message: 'Brief Summary',
+      type: 'text',
+      initial: activePr?.title,
+    },
+  ]);
+
+  if (
+    !result.githubUsername ||
+    !result.oneLineSummary ||
+    !result.releaseNoteType ||
+    !result.pullRequestNumber
+  ) {
+    console.log('All questions must be answered. Exiting');
+    exit(1);
+  }
+
+  const fileContents = getFileContents(
+    result.releaseNoteType,
+    result.githubUsername,
+    result.oneLineSummary,
+  );
+  const prNumber = result.pullRequestNumber;
+
+  const filepath = `./upcoming-release-notes/${prNumber}.md`;
+  if (existsSync(filepath)) {
+    const { confirm } = await prompts({
+      name: 'confirm',
+      type: 'confirm',
+      message: `This will overwrite the existing release note ${filepath} Are you sure?`,
+    });
+    if (!confirm) {
+      console.log('Exiting');
+      exit(1);
+    }
+  }
+
+  writeFile(filepath, fileContents, err => {
+    if (err) {
+      console.error('Failed to write release note file:', err);
+      exit(1);
+    } else {
+      console.log(`Release note generated successfully: ${filepath}`);
+    }
+  });
+}
+
+// makes an attempt to find an existing open PR from <username>:<branch>
+async function getActivePr(
+  username: string,
+): Promise<{ number: number; title: string } | undefined> {
+  if (!username) {
+    return undefined;
+  }
+  const branchName = await execAsync('git rev-parse --abbrev-ref HEAD');
+  if (!branchName) {
+    return undefined;
+  }
+  const forkHead = `${username}:${branchName}`;
+  return getPrNumberFromHead(forkHead);
+}
+
+async function getPrNumberFromHead(
+  head: string,
+): Promise<{ number: number; title: string } | undefined> {
+  try {
+    // head is a weird query parameter in this API call. If nothing matches, it
+    // will return as if the head query parameter doesn't exist. To get around
+    // this, we make the page size 2 and only return the number if the length.
+    const resp = await fetch(
+      'https://api.github.com/repos/actualbudget/actual/pulls?state=open&per_page=2&head=' +
+        head,
+    );
+    if (!resp.ok) {
+      console.warn('error fetching from github pulls api:', resp.status);
+      return undefined;
+    }
+    const ghResponse = await resp.json();
+    if (ghResponse?.length === 1) {
+      return ghResponse[0];
+    } else {
+      return undefined;
+    }
+  } catch (e) {
+    console.warn('error fetching from github pulls api:', e);
+  }
+}
+
+async function getNextPrNumber(): Promise<number> {
+  try {
+    const resp = await fetch(
+      'https://api.github.com/repos/actualbudget/actual/issues?state=all&per_page=1',
+    );
+    if (!resp.ok) {
+      throw new Error(`API responded with status: ${resp.status}`);
+    }
+    const ghResponse = await resp.json();
+    const latestPrNumber = ghResponse?.[0]?.number;
+    if (!latestPrNumber) {
+      console.error(
+        'Could not find latest issue number in GitHub API response',
+        ghResponse,
+      );
+      exit(1);
+    }
+    return latestPrNumber + 1;
+  } catch (error) {
+    console.error('Failed to fetch next PR number:', error);
+    exit(1);
+  }
+}
+
+function getFileContents(type: string, username: string, summary: string) {
+  return `---
+category: ${type}
+authors: [${username}]
+---
+
+${summary}
+`;
+}
+
+// simple exec that fails silently and returns an empty string on failure
+async function execAsync(cmd: string, errorLog?: string): Promise<string> {
+  return new Promise<string>(res => {
+    exec(cmd, (error, stdout) => {
+      if (error) {
+        console.log(errorLog);
+        res('');
+      } else {
+        res(stdout.trim());
+      }
+    });
+  });
+}
+
+run();

bin/run-vrt

@@ -28,5 +28,5 @@ echo "Running VRT tests with the following parameters:"
 echo "E2E_START_URL: $E2E_START_URL"
 echo "VRT_ARGS: $VRT_ARGS"
 
-MSYS_NO_PATHCONV=1 docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash \
+MSYS_NO_PATHCONV=1 docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.52.0-jammy /bin/bash \
   -c "E2E_START_URL=$E2E_START_URL yarn vrt $VRT_ARGS"

docker-compose.yml

@@ -15,4 +15,3 @@ services:
     volumes:
       - '.:/app'
     restart: 'no'
-

eslint.config.mjs

@@ -5,11 +5,11 @@ import globals from 'globals';
 
 import pluginImport from 'eslint-plugin-import';
 import pluginJSXA11y from 'eslint-plugin-jsx-a11y';
-import pluginPrettier from 'eslint-plugin-prettier/recommended';
 import pluginReact from 'eslint-plugin-react';
 import pluginReactHooks from 'eslint-plugin-react-hooks';
 import pluginRulesDir from 'eslint-plugin-rulesdir';
 import pluginTypescript from 'typescript-eslint';
+import pluginTypescriptPaths from 'eslint-plugin-typescript-paths';
 
 import tsParser from '@typescript-eslint/parser';
 
@@ -85,15 +85,16 @@ const confusingBrowserGlobals = [
   'top',
 ];
 
-/** @type {import('eslint').Linter.Config[]} */
-export default [
+export default pluginTypescript.config(
   {
     ignores: [
       'packages/api/app/bundle.api.js',
+      'packages/api/app/stats.json',
       'packages/api/dist',
       'packages/api/@types',
       'packages/api/migrations',
       'packages/crdt/dist',
+      'packages/component-library/src/icons/**/*',
       'packages/desktop-client/bundle.browser.js',
       'packages/desktop-client/build/',
       'packages/desktop-client/build-electron/',
@@ -102,21 +103,39 @@ export default [
       'packages/desktop-client/public/data/',
       'packages/desktop-client/**/node_modules/*',
       'packages/desktop-client/node_modules/',
-      'packages/desktop-client/src/icons/**/*',
       'packages/desktop-client/test-results/',
       'packages/desktop-client/playwright-report/',
       'packages/desktop-electron/client-build/',
       'packages/desktop-electron/build/',
       'packages/desktop-electron/dist/',
-      'packages/import-ynab4/**/node_modules/*',
-      'packages/import-ynab5/**/node_modules/*',
       'packages/loot-core/**/node_modules/*',
       'packages/loot-core/**/lib-dist/*',
       'packages/loot-core/**/proto/*',
+      'packages/sync-server/build/',
       '.yarn/*',
       '.github/*',
     ],
   },
+  {
+    // Temporary until the sync-server is migrated to TypeScript
+    files: [
+      'packages/sync-server/**/*.spec.{js,jsx}',
+      'packages/sync-server/**/*.test.{js,jsx}',
+    ],
+    languageOptions: {
+      globals: {
+        vi: true,
+        describe: true,
+        expect: true,
+        it: true,
+        beforeAll: true,
+        beforeEach: true,
+        afterAll: true,
+        afterEach: true,
+        test: true,
+      },
+    },
+  },
   {
     linterOptions: {
       reportUnusedDisableDirectives: true,
@@ -125,7 +144,6 @@ export default [
       globals: {
         ...globals.browser,
         ...globals.commonjs,
-        ...globals.jest,
         ...globals.node,
         globalThis: false,
         vi: true,
@@ -145,14 +163,14 @@ export default [
   },
   pluginReact.configs.flat.recommended,
   pluginReact.configs.flat['jsx-runtime'],
-  pluginPrettier,
-  ...pluginTypescript.configs.recommended,
+  pluginTypescript.configs.recommended,
   pluginImport.flatConfigs.recommended,
   {
     plugins: {
       'react-hooks': pluginReactHooks,
       'jsx-a11y': pluginJSXA11y,
       rulesdir: pluginRulesDir,
+      'typescript-paths': pluginTypescriptPaths,
     },
   },
   {
@@ -485,6 +503,32 @@ export default [
       'no-restricted-imports': [
         'warn',
         {
+          paths: [
+            {
+              name: 'react-router-dom',
+              importNames: ['useNavigate'],
+              message:
+                "Please import Actual's useNavigate() hook from `src/hooks` instead.",
+            },
+            {
+              name: 'react-redux',
+              importNames: ['useDispatch'],
+              message:
+                "Please import Actual's useDispatch() hook from `src/redux` instead.",
+            },
+            {
+              name: 'react-redux',
+              importNames: ['useSelector'],
+              message:
+                "Please import Actual's useSelector() hook from `src/redux` instead.",
+            },
+            {
+              name: 'react-redux',
+              importNames: ['useStore'],
+              message:
+                "Please import Actual's useStore() hook from `src/redux` instead.",
+            },
+          ],
           patterns: [
             {
               group: ['*.api', '*.web', '*.electron'],
@@ -500,6 +544,10 @@ export default [
               importNames: ['colors'],
               message: 'Please use themes instead of colors',
             },
+            {
+              group: ['@actual-app/web/*'],
+              message: 'Please do not import `@actual-app/web` in `loot-core`',
+            },
           ],
         },
       ],
@@ -521,7 +569,7 @@ export default [
     },
   },
   {
-    files: ['**/*.ts?(x)'],
+    files: ['**/*.{ts,tsx}'],
 
     languageOptions: {
       parser: tsParser,
@@ -529,7 +577,7 @@ export default [
       sourceType: 'module',
 
       parserOptions: {
-        project: [path.join(__dirname, './tsconfig.json')],
+        projectService: true,
         ecmaFeatures: {
           jsx: true,
         },
@@ -549,6 +597,13 @@ export default [
       // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/477)
       'no-undef': 'off',
 
+      // TypeScript already handles these (https://typescript-eslint.io/troubleshooting/typed-linting/performance/#eslint-plugin-import)
+      'import/named': 'off',
+      'import/namespace': 'off',
+      'import/default': 'off',
+      'import/no-named-as-default-member': 'off',
+      'import/no-unresolved': 'off',
+
       // Add TypeScript specific rules (and turn off ESLint equivalents)
       '@typescript-eslint/consistent-type-assertions': 'warn',
       'no-array-constructor': 'off',
@@ -582,6 +637,16 @@ export default [
       '@typescript-eslint/no-useless-constructor': 'warn',
     },
   },
+  {
+    files: ['packages/desktop-client/**/*.{js,ts,jsx,tsx}'],
+    rules: {
+      'typescript-paths/absolute-parent-import': [
+        'error',
+        { preferPathOverBaseUrl: true },
+      ],
+      'typescript-paths/absolute-import': ['error', { enableAlias: false }],
+    },
+  },
   {
     files: [
       'packages/desktop-client/**/*.{ts,tsx}',
@@ -616,88 +681,6 @@ export default [
       ],
     },
   },
-  {
-    files: ['packages/desktop-client/**/*'],
-    ignores: ['packages/desktop-client/src/hooks/useNavigate.{ts,tsx}'],
-
-    rules: {
-      'no-restricted-imports': [
-        'warn',
-        {
-          paths: [
-            {
-              name: 'react-router-dom',
-              importNames: ['useNavigate'],
-              message:
-                "Please import Actual's useNavigate() hook from `src/hooks` instead.",
-            },
-          ],
-        },
-      ],
-    },
-  },
-  {
-    files: ['packages/desktop-client/**/*', 'packages/loot-core/**/*'],
-    ignores: ['packages/desktop-client/src/redux/index.{ts,tsx}'],
-
-    rules: {
-      'no-restricted-imports': [
-        'warn',
-        {
-          paths: [
-            {
-              name: 'react-redux',
-              importNames: ['useDispatch'],
-              message:
-                "Please import Actual's useDispatch() hook from `src/redux` instead.",
-            },
-            {
-              name: 'react-redux',
-              importNames: ['useSelector'],
-              message:
-                "Please import Actual's useSelector() hook from `src/redux` instead.",
-            },
-            {
-              name: 'react-redux',
-              importNames: ['useStore'],
-              message:
-                "Please import Actual's useStore() hook from `src/redux` instead.",
-            },
-          ],
-        },
-      ],
-    },
-  },
-  {
-    files: ['packages/loot-core/src/**/*'],
-    rules: {
-      'no-restricted-imports': [
-        'warn',
-        {
-          patterns: [
-            {
-              group: ['*.api', '*.web', '*.electron'],
-              message: "Don't directly reference imports from other platforms",
-            },
-            {
-              group: ['uuid'],
-              importNames: ['*'],
-              message: "Use `import { v4 as uuidv4 } from 'uuid'` instead",
-            },
-            {
-              group: ['loot-core/**'],
-              message:
-                'Please use relative imports in loot-core instead of importing from `loot-core/*`',
-            },
-            {
-              group: ['@actual-app/web/*'],
-              message: 'Please do not import `@actual-app/web` in `loot-core`',
-            },
-          ],
-        },
-      ],
-    },
-  },
   {
     files: [
       'packages/loot-core/src/types/**/*',
@@ -712,27 +695,6 @@ export default [
       'import/no-unused-modules': 'off',
     },
   },
-  {
-    files: [
-      'packages/desktop-client/src/style/index.*',
-      'packages/desktop-client/src/style/palette.*',
-    ],
-
-    rules: {
-      'no-restricted-imports': [
-        'off',
-        {
-          patterns: [
-            {
-              group: ['**/style', '**/colors'],
-              importNames: ['colors'],
-              message: 'Please use themes instead of colors',
-            },
-          ],
-        },
-      ],
-    },
-  },
   {
     files: ['packages/api/migrations/*', 'packages/loot-core/migrations/*'],
 
@@ -746,6 +708,16 @@ export default [
       'import/no-unresolved': 'off',
     },
   },
+
+  // Allow configuring vitest with default exports (recommended as per vitest docs)
+  {
+    files: ['**/vitest.config.ts', '**/vitest.web.config.ts'],
+    rules: {
+      'import/no-anonymous-default-export': 'off',
+      'import/no-default-export': 'off',
+    },
+  },
+
   {},
   {
     // TODO: fix the issues in these files
@@ -789,7 +761,6 @@ export default [
       'packages/desktop-client/src/components/select/DateSelect.tsx',
       'packages/desktop-client/src/components/sidebar/Tools.tsx',
       'packages/desktop-client/src/components/sort.tsx',
-      'packages/desktop-client/src/components/spreadsheet/useSheetValue.ts',
     ],
 
     rules: {
@@ -838,4 +809,4 @@ export default [
       '@typescript-eslint/no-unused-vars': 'off',
     },
   },
-];
+);

package.json

@@ -22,65 +22,81 @@
     "start:server": "yarn workspace @actual-app/sync-server start",
     "start:server-monitor": "yarn workspace @actual-app/sync-server start-monitor",
     "start:server-dev": "NODE_ENV=development BROWSER_OPEN=localhost:5006 yarn npm-run-all --parallel 'start:server-monitor' 'start'",
-    "start:desktop": "yarn rebuild-electron && npm-run-all --parallel 'start:desktop-*'",
+    "start:desktop": "yarn desktop-dependencies && npm-run-all --parallel 'start:desktop-*'",
+    "desktop-dependencies": "yarn rebuild-electron && yarn workspace loot-core build:browser",
     "start:desktop-node": "yarn workspace loot-core watch:node",
     "start:desktop-client": "yarn workspace @actual-app/web watch",
+    "start:desktop-server-client": "yarn workspace @actual-app/web build:browser",
     "start:desktop-electron": "yarn workspace desktop-electron watch",
-    "start:electron": "yarn start:desktop",
     "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",
+    "build:server": "yarn build:browser && yarn workspace @actual-app/sync-server build",
     "build:browser": "./bin/package-browser",
     "build:desktop": "./bin/package-electron",
     "build:api": "yarn workspace @actual-app/api build",
     "generate:i18n": "yarn workspace @actual-app/web generate:i18n",
+    "generate:release-notes": "ts-node ./bin/release-note-generator.ts",
     "test": "yarn workspaces foreach --all --parallel --verbose run test",
     "test:debug": "yarn workspaces foreach --all --verbose run test",
-    "e2e": "yarn workspaces foreach --all --parallel --verbose run e2e",
+    "e2e": "yarn workspaces foreach --all --exclude desktop-electron --parallel --verbose run e2e",
+    "e2e:desktop": "yarn build:desktop --skip-exe-build && yarn workspace desktop-electron e2e",
     "vrt": "yarn workspaces foreach --all --parallel --verbose run vrt",
     "vrt:docker": "./bin/run-vrt",
     "rebuild-electron": "./node_modules/.bin/electron-rebuild -f -m ./packages/loot-core",
     "rebuild-node": "yarn workspace loot-core rebuild",
-    "lint": "eslint . --max-warnings 0",
-    "lint:verbose": "DEBUG=eslint:cli-engine eslint . --max-warnings 0",
+    "lint": "prettier --check . && eslint . --max-warnings 0",
+    "lint:fix": "prettier --check --write . && eslint . --max-warnings 0 --fix",
     "install:server": "yarn workspaces focus @actual-app/sync-server --production",
-    "typecheck": "yarn tsc && tsc-strict",
+    "typecheck": "yarn tsc --incremental && tsc-strict",
     "jq": "./node_modules/node-jq/bin/jq",
     "prepare": "husky"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^8.18.1",
+    "@octokit/rest": "^22.0.0",
+    "@types/node": "^22.15.18",
+    "@types/prompts": "^2.4.9",
+    "@typescript-eslint/parser": "^8.32.1",
     "cross-env": "^7.0.3",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-typescript": "^4.3.5",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-rulesdir": "^0.2.2",
-    "globals": "^15.13.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.9",
-    "node-jq": "^4.0.1",
+    "eslint-plugin-typescript-paths": "^0.0.33",
+    "globals": "^15.15.0",
+    "html-to-image": "^1.11.13",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.2",
+    "minimatch": "^10.0.3",
+    "node-jq": "^6.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
+    "prompts": "^2.4.2",
     "source-map-support": "^0.5.21",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.18.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.1",
     "typescript-strict-plugin": "^2.4.4"
   },
   "resolutions": {
-    "rollup": "4.9.4"
+    "rollup": "4.40.1",
+    "socks": ">=2.8.3"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20",
+    "yarn": "^4.9.1"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,md,json}": "prettier --write"
+    "*.{js,mjs,jsx,ts,tsx,md,json,yml}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   },
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.9.1",
   "browserslist": [
     "electron 24.0",
     "defaults"

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

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`API setup and teardown successfully loads budget 1`] = `
-Array [
+exports[`API setup and teardown > successfully loads budget 1`] = `
+[
   "2016-10",
   "2016-11",
   "2016-12",

packages/api/jest.config.js

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

packages/api/methods.test.ts

@@ -6,10 +6,9 @@ import * as api from './index';
 
 const budgetName = 'test-budget';
 
-beforeEach(async () => {
-  // we need real datetime if we are going to mix new timestamps with our mock data
-  global.restoreDateNow();
+global.IS_TESTING = true;
 
+beforeEach(async () => {
   const budgetPath = path.join(__dirname, '/mocks/budgets/', budgetName);
   await fs.rm(budgetPath, { force: true, recursive: true });
 
@@ -569,8 +568,20 @@ describe('API CRUD operations', () => {
     const accountId = await api.createAccount({ name: 'test-account' }, 0);
 
     let newTransaction = [
-      { date: '2023-11-03', imported_id: '11', amount: 100, notes: 'notes' },
-      { date: '2023-11-03', imported_id: '12', amount: 100, notes: '' },
+      {
+        account: accountId,
+        date: '2023-11-03',
+        imported_id: '11',
+        amount: 100,
+        notes: 'notes',
+      },
+      {
+        account: accountId,
+        date: '2023-11-03',
+        imported_id: '12',
+        amount: 100,
+        notes: '',
+      },
     ];
 
     const addResult = await api.addTransactions(accountId, newTransaction, {
@@ -598,9 +609,27 @@ describe('API CRUD operations', () => {
     expect(transactions).toHaveLength(2);
 
     newTransaction = [
-      { date: '2023-12-03', imported_id: '11', amount: 100, notes: 'notes' },
-      { date: '2023-12-03', imported_id: '12', amount: 100, notes: 'notes' },
-      { date: '2023-12-03', imported_id: '22', amount: 200, notes: '' },
+      {
+        account: accountId,
+        date: '2023-12-03',
+        imported_id: '11',
+        amount: 100,
+        notes: 'notes',
+      },
+      {
+        account: accountId,
+        date: '2023-12-03',
+        imported_id: '12',
+        amount: 100,
+        notes: 'notes',
+      },
+      {
+        account: accountId,
+        date: '2023-12-03',
+        imported_id: '22',
+        amount: 200,
+        notes: '',
+      },
     ];
 
     const reconciled = await api.importTransactions(accountId, newTransaction);
@@ -654,4 +683,60 @@ describe('API CRUD operations', () => {
     );
     expect(transactions).toHaveLength(1);
   });
+
+  test('Transactions: import notes are preserved when importing', async () => {
+    const accountId = await api.createAccount({ name: 'test-account' }, 0);
+
+    // Test with notes
+    const transactionsWithNotes = [
+      {
+        date: '2023-11-03',
+        imported_id: '11',
+        amount: 100,
+        notes: 'test note',
+      },
+    ];
+
+    const addResultWithNotes = await api.addTransactions(
+      accountId,
+      transactionsWithNotes,
+      {
+        learnCategories: true,
+        runTransfers: true,
+      },
+    );
+    expect(addResultWithNotes).toBe('ok');
+
+    let transactions = await api.getTransactions(
+      accountId,
+      '2023-11-01',
+      '2023-11-30',
+    );
+    expect(transactions[0].notes).toBe('test note');
+
+    // Clear transactions
+    await api.deleteTransaction(transactions[0].id);
+
+    // Test without notes
+    const transactionsWithoutNotes = [
+      { date: '2023-11-03', imported_id: '11', amount: 100, notes: null },
+    ];
+
+    const addResultWithoutNotes = await api.addTransactions(
+      accountId,
+      transactionsWithoutNotes,
+      {
+        learnCategories: true,
+        runTransfers: true,
+      },
+    );
+    expect(addResultWithoutNotes).toBe('ok');
+
+    transactions = await api.getTransactions(
+      accountId,
+      '2023-11-01',
+      '2023-11-30',
+    );
+    expect(transactions[0].notes).toBeNull();
+  });
 });

packages/api/methods.ts

@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import type { Handlers } from 'loot-core/types/handlers';
+import type { ImportTransactionEntity } from 'loot-core/types/models/import-transaction';
 
 import * as injected from './injected';
 
@@ -52,10 +53,18 @@ export async function batchBudgetUpdates(func) {
   }
 }
 
+/**
+ * @deprecated Please use `aqlQuery` instead.
+ * This function will be removed in a future release.
+ */
 export function runQuery(query) {
   return send('api/query', { query: query.serialize() });
 }
 
+export function aqlQuery(query) {
+  return send('api/query', { query: query.serialize() });
+}
+
 export function getBudgetMonths() {
   return send('api/budget-months');
 }
@@ -90,8 +99,8 @@ export interface ImportTransactionsOpts {
 }
 
 export function importTransactions(
-  accountId,
-  transactions,
+  accountId: string,
+  transactions: ImportTransactionEntity[],
   opts: ImportTransactionsOpts = {
     defaultCleared: true,
   },

packages/api/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@actual-app/api",
-  "version": "25.2.1",
+  "version": "25.6.1",
   "license": "MIT",
   "description": "An API for Actual",
   "engines": {
-    "node": ">=18.12.0"
+    "node": ">=20"
   },
   "main": "dist/index.js",
   "types": "@types/index.d.ts",
@@ -14,27 +14,24 @@
   ],
   "scripts": {
     "build:app": "yarn workspace loot-core build:api",
+    "build:crdt": "yarn workspace @actual-app/crdt build",
     "build:node": "tsc --p tsconfig.dist.json && tsc-alias -p tsconfig.dist.json",
     "build:migrations": "cp migrations/*.sql dist/migrations",
     "build:default-db": "cp default-db.sqlite dist/",
     "build": "yarn run clean && yarn run build:app && yarn run build:node && yarn run build:migrations && yarn run build:default-db",
-    "test": "yarn run build:app && jest -c jest.config.js",
+    "test": "yarn run build:app && yarn run build:crdt && vitest",
     "clean": "rm -rf dist @types"
   },
   "dependencies": {
     "@actual-app/crdt": "workspace:^",
-    "better-sqlite3": "^11.7.0",
-    "compare-versions": "^6.1.0",
+    "better-sqlite3": "^11.10.0",
+    "compare-versions": "^6.1.1",
     "node-fetch": "^3.3.2",
-    "uuid": "^9.0.1"
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@swc/core": "^1.5.3",
-    "@swc/jest": "^0.2.36",
-    "@types/jest": "^27.5.2",
-    "@types/uuid": "^9.0.2",
-    "jest": "^27.5.1",
-    "tsc-alias": "^1.8.8",
-    "typescript": "^5.5.4"
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.3"
   }
 }

packages/api/tsconfig.dist.json

@@ -15,5 +15,5 @@
     }
   },
   "include": ["."],
-  "exclude": ["**/node_modules/*", "dist", "@types"]
+  "exclude": ["**/node_modules/*", "dist", "@types", "*.test.ts"]
 }

packages/api/vitest.config.ts

@@ -0,0 +1,9 @@
+export default {
+  test: {
+    globals: true,
+    onConsoleLog(log: string, type: 'stdout' | 'stderr'): boolean | void {
+      // print only console.error
+      return type === 'stderr';
+    },
+  },
+};

packages/component-library/package.json

@@ -3,18 +3,29 @@
   "version": "0.0.1",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=18.2"
+    "react": ">=18.2",
+    "react-dom": ">=18.2"
   },
   "dependencies": {
-    "@emotion/css": "^11.13.4",
-    "react-aria-components": "^1.4.1"
+    "@emotion/css": "^11.13.5",
+    "react-aria-components": "^1.8.0",
+    "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "react": "18.2.0"
+    "@svgr/cli": "^8.1.0",
+    "@types/react": "^19.1.4",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "vitest": "^3.1.3"
   },
   "exports": {
-    "./icons/*": "./src/icons/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./icons/logo": "./src/icons/logo/index.ts",
+    "./icons/v0": "./src/icons/v0/index.ts",
+    "./icons/v1": "./src/icons/v1/index.ts",
+    "./icons/v2": "./src/icons/v2/index.ts",
+    "./icons/AnimatedLoading": "./src/icons/AnimatedLoading.tsx",
+    "./icons/Loading": "./src/icons/Loading.tsx",
     "./aligned-text": "./src/AlignedText.tsx",
     "./block": "./src/Block.tsx",
     "./button": "./src/Button.tsx",
@@ -22,10 +33,12 @@
     "./form-error": "./src/FormError.tsx",
     "./initial-focus": "./src/InitialFocus.ts",
     "./inline-field": "./src/InlineField.tsx",
+    "./input": "./src/Input.tsx",
     "./label": "./src/Label.tsx",
     "./menu": "./src/Menu.tsx",
     "./paragraph": "./src/Paragraph.tsx",
     "./popover": "./src/Popover.tsx",
+    "./select": "./src/Select.tsx",
     "./space-between": "./src/SpaceBetween.tsx",
     "./stack": "./src/Stack.tsx",
     "./styles": "./src/styles.ts",
@@ -36,5 +49,10 @@
     "./toggle": "./src/Toggle.tsx",
     "./tooltip": "./src/Tooltip.tsx",
     "./view": "./src/View.tsx"
+  },
+  "scripts": {
+    "generate:icons": "rm src/icons/*/*.tsx; cd src/icons && svgr --template template.ts --index-template index-template.ts --typescript --expand-props start -d . .",
+    "test": "npm-run-all -cp 'test:*'",
+    "test:web": "ENV=web vitest -c vitest.web.config.ts"
   }
 }

packages/component-library/src/Button.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { Button as ReactAriaButton } from 'react-aria-components';
 
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 
 import { AnimatedLoading } from './icons/AnimatedLoading';
 import { styles } from './styles';
@@ -145,26 +145,24 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const defaultButtonClassName: string = useMemo(
       () =>
-        String(
-          css({
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            padding: _getPadding(variant),
-            margin: 0,
-            overflow: 'hidden',
-            display: 'flex',
-            borderRadius: 4,
-            backgroundColor: backgroundColor[variantWithDisabled],
-            border: _getBorder(variant, variantWithDisabled),
-            color: textColor[variantWithDisabled],
-            transition: 'box-shadow .25s',
-            WebkitAppRegion: 'no-drag',
-            ...styles.smallText,
-            '&[data-hovered]': _getHoveredStyles(variant),
-            '&[data-pressed]': _getActiveStyles(variant, bounce),
-          }),
-        ),
+        css({
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          padding: _getPadding(variant),
+          margin: 0,
+          overflow: 'hidden',
+          display: 'flex',
+          borderRadius: 4,
+          backgroundColor: backgroundColor[variantWithDisabled],
+          border: _getBorder(variant, variantWithDisabled),
+          color: textColor[variantWithDisabled],
+          transition: 'box-shadow .25s',
+          WebkitAppRegion: 'no-drag',
+          ...styles.smallText,
+          '&[data-hovered]': _getHoveredStyles(variant),
+          '&[data-pressed]': _getActiveStyles(variant, bounce),
+        }),
       [bounce, variant, variantWithDisabled],
     );
 
@@ -176,9 +174,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...restProps}
         className={
           typeof className === 'function'
-            ? renderProps =>
-                `${defaultButtonClassName} ${className(renderProps)}`
-            : `${defaultButtonClassName} ${className || ''}`
+            ? renderProps => cx(defaultButtonClassName, className(renderProps))
+            : cx(defaultButtonClassName, className)
         }
       >
         {children}

packages/component-library/src/InitialFocus.ts

@@ -1,36 +1,59 @@
 import {
-  type ReactElement,
-  type Ref,
+  Children,
   cloneElement,
+  isValidElement,
+  type ReactElement,
+  Ref,
   useEffect,
   useRef,
 } from 'react';
 
-type InitialFocusProps = {
-  children:
-    | ReactElement<{ inputRef: Ref<HTMLInputElement> }>
-    | ((node: Ref<HTMLInputElement>) => ReactElement);
+type InitialFocusProps<T extends HTMLElement> = {
+  /**
+   * The child element to focus when the component mounts. This can be either a single React element or a function that returns a React element.
+   */
+  children: ReactElement<{ ref: Ref<T> }> | ((ref: Ref<T>) => ReactElement);
 };
 
-export function InitialFocus({ children }: InitialFocusProps) {
-  const node = useRef<HTMLInputElement>(null);
+/**
+ * InitialFocus sets focus on its child element
+ * when it mounts.
+ * @param {Object} props - The component props.
+ * @param {ReactElement | function} props.children - A single React element or a function that returns a React element.
+ */
+export function InitialFocus<T extends HTMLElement = HTMLElement>({
+  children,
+}: InitialFocusProps<T>) {
+  const ref = useRef<T | null>(null);
 
   useEffect(() => {
-    if (node.current) {
+    if (ref.current) {
       // This is needed to avoid a strange interaction with
       // `ScopeTab`, which doesn't allow it to be focused at first for
       // some reason. Need to look into it.
       setTimeout(() => {
-        if (node.current) {
-          node.current.focus();
-          node.current.setSelectionRange(0, 10000);
+        if (ref.current) {
+          ref.current.focus();
+          if (
+            ref.current instanceof HTMLInputElement ||
+            ref.current instanceof HTMLTextAreaElement
+          ) {
+            ref.current.setSelectionRange(0, 10000);
+          }
         }
       }, 0);
     }
   }, []);
 
   if (typeof children === 'function') {
-    return children(node);
+    return children(ref);
   }
-  return cloneElement(children, { inputRef: node });
+
+  const child = Children.only(children);
+  if (isValidElement(child)) {
+    return cloneElement(child, { ref });
+  }
+  throw new Error(
+    'InitialFocus expects a single valid React element as its child.',
+  );
 }

packages/component-library/src/InitialFocus.web.test.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { forwardRef, Ref } from 'react';
+
+import { render } from '@testing-library/react';
+
+import { InitialFocus } from './InitialFocus';
+import { View } from './View';
+
+describe('InitialFocus', () => {
+  it('should focus a text input', async () => {
+    const component = render(
+      <View>
+        <InitialFocus>
+          <input type="text" title="focused" />
+        </InitialFocus>
+        <input type="text" title="unfocused" />
+      </View>,
+    );
+
+    // This is needed bc of the `setTimeout` in the `InitialFocus` component.
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const input = component.getByTitle('focused') as HTMLInputElement;
+    const unfocusedInput = component.getByTitle(
+      'unfocused',
+    ) as HTMLInputElement;
+    expect(document.activeElement).toBe(input);
+    expect(document.activeElement).not.toBe(unfocusedInput);
+  });
+
+  it('should focus a textarea', async () => {
+    const component = render(
+      <View>
+        <InitialFocus>
+          <textarea title="focused" />
+        </InitialFocus>
+        <textarea title="unfocused" />
+      </View>,
+    );
+
+    // This is needed bc of the `setTimeout` in the `InitialFocus` component.
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const textarea = component.getByTitle('focused') as HTMLTextAreaElement;
+    const unfocusedTextarea = component.getByTitle(
+      'unfocused',
+    ) as HTMLTextAreaElement;
+    expect(document.activeElement).toBe(textarea);
+    expect(document.activeElement).not.toBe(unfocusedTextarea);
+  });
+
+  it('should select text in an input', async () => {
+    const component = render(
+      <View>
+        <InitialFocus>
+          <input type="text" title="focused" defaultValue="Hello World" />
+        </InitialFocus>
+        <input type="text" title="unfocused" />
+      </View>,
+    );
+
+    // This is needed bc of the `setTimeout` in the `InitialFocus` component.
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const input = component.getByTitle('focused') as HTMLInputElement;
+    expect(document.activeElement).toBe(input);
+    expect(input.selectionStart).toBe(0);
+    expect(input.selectionEnd).toBe(11); // Length of "Hello World"
+  });
+
+  it('should focus a button', async () => {
+    const component = render(
+      <View>
+        <InitialFocus>
+          <button title="focused">Click me</button>
+        </InitialFocus>
+        <button title="unfocused">Do not click me</button>
+      </View>,
+    );
+
+    // This is needed bc of the `setTimeout` in the `InitialFocus` component.
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const button = component.getByTitle('focused') as HTMLButtonElement;
+    const unfocusedButton = component.getByTitle(
+      'unfocused',
+    ) as HTMLButtonElement;
+    expect(document.activeElement).toBe(button);
+    expect(document.activeElement).not.toBe(unfocusedButton);
+  });
+
+  it('should focus a custom component with ref forwarding', async () => {
+    const CustomInput = forwardRef<HTMLInputElement>((props, ref) => (
+      <input type="text" ref={ref} {...props} title="focused" />
+    ));
+    CustomInput.displayName = 'CustomInput';
+
+    const component = render(
+      <View>
+        <InitialFocus>
+          {node => <CustomInput ref={node as Ref<HTMLInputElement>} />}
+        </InitialFocus>
+        <input type="text" title="unfocused" />
+      </View>,
+    );
+
+    // This is needed bc of the `setTimeout` in the `InitialFocus` component.
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const input = component.getByTitle('focused') as HTMLInputElement;
+    const unfocusedInput = component.getByTitle(
+      'unfocused',
+    ) as HTMLInputElement;
+    expect(document.activeElement).toBe(input);
+    expect(document.activeElement).not.toBe(unfocusedInput);
+  });
+});

packages/component-library/src/Input.tsx

@@ -0,0 +1,118 @@
+import React, {
+  ChangeEvent,
+  ComponentPropsWithRef,
+  type KeyboardEvent,
+  type FocusEvent,
+} from 'react';
+import { Input as ReactAriaInput } from 'react-aria-components';
+
+import { css, cx } from '@emotion/css';
+
+import { useResponsive } from './hooks/useResponsive';
+import { styles } from './styles';
+import { theme } from './theme';
+
+export const baseInputStyle = {
+  outline: 0,
+  backgroundColor: theme.tableBackground,
+  color: theme.formInputText,
+  margin: 0,
+  padding: 5,
+  borderRadius: 4,
+  border: '1px solid ' + theme.formInputBorder,
+};
+
+const defaultInputClassName = css({
+  ...baseInputStyle,
+  color: theme.formInputText,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  flexShrink: 0,
+  '&[data-focused]': {
+    border: '1px solid ' + theme.formInputBorderSelected,
+    boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
+  },
+  '&[data-disabled]': {
+    color: theme.formInputTextPlaceholder,
+  },
+  '::placeholder': { color: theme.formInputTextPlaceholder },
+  ...styles.smallText,
+});
+
+export type InputProps = ComponentPropsWithRef<typeof ReactAriaInput> & {
+  onEnter?: (value: string, event: KeyboardEvent<HTMLInputElement>) => void;
+  onEscape?: (value: string, event: KeyboardEvent<HTMLInputElement>) => void;
+  onChangeValue?: (
+    newValue: string,
+    event: ChangeEvent<HTMLInputElement>,
+  ) => void;
+  onUpdate?: (newValue: string, event: FocusEvent<HTMLInputElement>) => void;
+};
+
+export function Input({
+  ref,
+  onEnter,
+  onEscape,
+  onChangeValue,
+  onUpdate,
+  className,
+  ...props
+}: InputProps) {
+  return (
+    <ReactAriaInput
+      ref={ref}
+      className={
+        typeof className === 'function'
+          ? renderProps => cx(defaultInputClassName, className(renderProps))
+          : cx(defaultInputClassName, className)
+      }
+      {...props}
+      onKeyUp={e => {
+        props.onKeyUp?.(e);
+
+        if (e.key === 'Enter' && onEnter) {
+          onEnter(e.currentTarget.value, e);
+        }
+
+        if (e.key === 'Escape' && onEscape) {
+          onEscape(e.currentTarget.value, e);
+        }
+      }}
+      onBlur={e => {
+        onUpdate?.(e.currentTarget.value, e);
+        props.onBlur?.(e);
+      }}
+      onChange={e => {
+        onChangeValue?.(e.currentTarget.value, e);
+        props.onChange?.(e);
+      }}
+    />
+  );
+}
+
+const defaultBigInputClassName = css({
+  padding: 10,
+  fontSize: 15,
+  border: 'none',
+  ...styles.shadow,
+  '&[data-focused]': { border: 'none', ...styles.shadow },
+});
+
+export function BigInput({ className, ...props }: InputProps) {
+  return (
+    <Input
+      {...props}
+      className={
+        typeof className === 'function'
+          ? renderProps => cx(defaultBigInputClassName, className(renderProps))
+          : cx(defaultBigInputClassName, className)
+      }
+    />
+  );
+}
+
+export function ResponsiveInput(props: InputProps) {
+  const { isNarrowWidth } = useResponsive();
+
+  return isNarrowWidth ? <BigInput {...props} /> : <Input {...props} />;
+}

packages/component-library/src/Menu.tsx

@@ -3,11 +3,13 @@ import {
   useEffect,
   useRef,
   useState,
+  type ComponentProps,
   type ComponentType,
   type SVGProps,
   type CSSProperties,
 } from 'react';
 
+import { Button } from './Button';
 import { Text } from './Text';
 import { theme } from './theme';
 import { Toggle } from './Toggle';
@@ -61,6 +63,7 @@ type MenuProps<NameType> = {
   style?: CSSProperties;
   className?: string;
   getItemStyle?: (item: MenuItemObject<NameType>) => CSSProperties;
+  slot?: ComponentProps<typeof Button>['slot'];
 };
 
 export function Menu<const NameType = string>({
@@ -71,6 +74,7 @@ export function Menu<const NameType = string>({
   style,
   className,
   getItemStyle,
+  slot,
 }: MenuProps<NameType>) {
   const elRef = useRef<HTMLDivElement>(null);
   const items = allItems.filter(x => x);
@@ -161,9 +165,10 @@ export function Menu<const NameType = string>({
         const Icon = item.icon;
 
         return (
-          <View
-            role="button"
+          <Button
             key={String(item.name)}
+            variant="bare"
+            slot={slot}
             style={{
               cursor: 'default',
               padding: 10,
@@ -179,11 +184,9 @@ export function Menu<const NameType = string>({
                 }),
               ...(!isLabel(item) && getItemStyle?.(item)),
             }}
-            onPointerEnter={() => setHoveredIndex(idx)}
-            onPointerLeave={() => setHoveredIndex(null)}
-            onPointerUp={e => {
-              e.stopPropagation();
-
+            onHoverStart={() => setHoveredIndex(idx)}
+            onHoverEnd={() => setHoveredIndex(null)}
+            onPress={() => {
               if (
                 !item.disabled &&
                 item.toggle === undefined &&
@@ -232,7 +235,7 @@ export function Menu<const NameType = string>({
               </View>
             )}
             {item.key && <Keybinding keyName={item.key} />}
-          </View>
+          </Button>
         );
       })}
       {footer}

packages/component-library/src/Select.tsx

@@ -1,11 +1,10 @@
 import { useRef, useState, type CSSProperties } from 'react';
 
-import { Button } from '@actual-app/components/button';
-import { Menu } from '@actual-app/components/menu';
-import { Popover } from '@actual-app/components/popover';
-import { View } from '@actual-app/components/view';
-
-import { SvgExpandArrow } from '../../icons/v0';
+import { Button } from './Button';
+import { SvgExpandArrow } from './icons/v0';
+import { Menu } from './Menu';
+import { Popover } from './Popover';
+import { View } from './View';
 
 function isValueOption<Value>(
   option: readonly [Value, string] | typeof Menu.line,

packages/component-library/src/Stack.tsx

@@ -21,7 +21,14 @@ function getChildren(key, children) {
           'type' in child &&
           child.type === Fragment
         ) {
-          return list.concat(getChildren(child.key, child.props.children));
+          return list.concat(
+            getChildren(
+              child.key,
+              typeof child.props === 'object' && 'children' in child.props
+                ? child.props.children
+                : [],
+            ),
+          );
         }
         list.push({ key: key + child['key'], child });
         return list;

packages/component-library/src/Tooltip.tsx

@@ -26,7 +26,7 @@ export const Tooltip = ({
   const triggerRef = useRef(null);
   const [isHovered, setIsHover] = useState(false);
 
-  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
   const handlePointerEnter = useCallback(() => {
     const timeout = setTimeout(() => {

packages/component-library/src/hooks/useResponsive.ts

@@ -0,0 +1,23 @@
+import { useWindowSize } from 'usehooks-ts';
+
+import { breakpoints } from '../tokens';
+
+export function useResponsive() {
+  const { height, width } = useWindowSize({
+    debounceDelay: 250,
+  });
+
+  // Possible view modes: narrow, small, medium, wide
+  // To check if we're at least small width, check !isNarrowWidth
+  return {
+    // atLeastMediumWidth is provided to avoid checking (isMediumWidth || isWideWidth)
+    atLeastMediumWidth: width >= breakpoints.medium,
+    isNarrowWidth: width < breakpoints.small,
+    isSmallWidth: width >= breakpoints.small && width < breakpoints.medium,
+    isMediumWidth: width >= breakpoints.medium && width < breakpoints.wide,
+    // No atLeastWideWidth because that's identical to isWideWidth
+    isWideWidth: width >= breakpoints.wide,
+    height,
+    width,
+  };
+}

packages/component-library/src/icons/index-template.ts

@@ -6,8 +6,8 @@ function indexTemplate(filePaths) {
     const basename = path.basename(filePath, path.extname(filePath));
     const exportName = `Svg${basename}`;
     return `export { ${exportName} } from './${basename}'`;
-  })
+  });
   return exportEntries.join('\n');
 }
 
-module.exports = indexTemplate
+module.exports = indexTemplate;

packages/component-library/src/icons/template.ts

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-const template = ({ imports, interfaces, componentName, props, jsx }, { tpl }) => {
+const tmpl = ({ imports, interfaces, componentName, props, jsx }, { tpl }) => {
   return tpl`
 ${imports};
 
@@ -8,7 +8,7 @@ ${interfaces};
 export const ${componentName} = (${props}) => (
   ${jsx}
 );
-`
-}
+`;
+};
 
-module.exports = template
+module.exports = tmpl;