Merge branch 'master' of https://github.com/actualbudget/actual

.github/workflows/update-vrt.yml

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

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/api",
-  "version": "24.10.1",
+  "version": "24.11.0",
   "license": "MIT",
   "description": "An API for Actual",
   "engines": {

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

@@ -30,7 +30,7 @@ test.describe.parallel('Reports', () => {
   test('loads net worth and cash flow reports', async () => {
     const reports = await reportsPage.getAvailableReportList();
 
-    expect(reports).toEqual(['Net Worth', 'Cash Flow']);
+    expect(reports).toEqual(['Net Worth', 'Cash Flow', 'Monthly Spending']);
     await expect(page).toMatchThemeScreenshots();
   });
 

packages/desktop-client/globals.d.ts

@@ -1,2 +1,9 @@
+import { type CSSObject } from '@emotion/css/dist/declarations/src/create-instance';
+
 // Allow images to be imported
 declare module '*.png';
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-empty-object-type
+  interface CSSProperties extends CSSObject {}
+}

packages/desktop-client/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@actual-app/web",
-  "version": "24.10.1",
+  "version": "24.11.0",
   "license": "MIT",
   "files": [
     "build"
   ],
   "devDependencies": {
+    "@emotion/css": "^11.13.4",
     "@fontsource/redacted-script": "^5.0.21",
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.41.1",
@@ -36,7 +37,6 @@
     "debounce": "^1.2.1",
     "downshift": "7.6.2",
     "focus-visible": "^4.1.5",
-    "glamor": "^2.20.40",
     "i18next": "^23.11.5",
     "i18next-parser": "^9.0.0",
     "i18next-resources-to-backend": "^1.2.1",

packages/desktop-client/src/browser-preload.browser.js

@@ -1,4 +1,5 @@
 import { initBackend as initSQLBackend } from 'absurd-sql/dist/indexeddb-main-thread';
+import { registerSW } from 'virtual:pwa-register';
 
 import * as Platform from 'loot-core/src/client/platform';
 
@@ -39,6 +40,19 @@ function createBackendWorker() {
 
 createBackendWorker();
 
+let isUpdateReadyForDownload = false;
+let markUpdateReadyForDownload;
+const isUpdateReadyForDownloadPromise = new Promise(resolve => {
+  markUpdateReadyForDownload = () => {
+    isUpdateReadyForDownload = true;
+    resolve(true);
+  };
+});
+const updateSW = registerSW({
+  immediate: true,
+  onNeedRefresh: markUpdateReadyForDownload,
+});
+
 global.Actual = {
   IS_DEV,
   ACTUAL_VERSION,
@@ -140,7 +154,14 @@ global.Actual = {
     window.open(url, '_blank');
   },
   onEventFromMain: () => {},
-  applyAppUpdate: () => {},
+  isUpdateReadyForDownload: () => isUpdateReadyForDownload,
+  waitForUpdateReadyForDownload: () => isUpdateReadyForDownloadPromise,
+  applyAppUpdate: async () => {
+    updateSW();
+
+    // Wait for the app to reload
+    await new Promise(() => {});
+  },
   updateAppMenu: () => {},
 
   ipcConnect: () => {},
@@ -184,10 +205,5 @@ document.addEventListener('keydown', e => {
         window.__actionsForMenu.undo();
       }
     }
-  } else if (e.key === '?') {
-    if (inputFocused(e)) {
-      return;
-    }
-    window.__actionsForMenu.pushModal('keyboard-shortcuts');
   }
 });

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

@@ -1,10 +1,9 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { keyframes } from 'glamor';
+import { keyframes } from '@emotion/css';
 
 import { SvgRefresh } from '../icons/v1';
-import { type CSSProperties } from '../style';
 
 import { View } from './common/View';
 

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

@@ -28,7 +28,6 @@ import {
 
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
-import { ResponsiveProvider } from '../ResponsiveProvider';
 import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 
@@ -40,6 +39,7 @@ import { FatalError } from './FatalError';
 import { FinancesApp } from './FinancesApp';
 import { ManagementApp } from './manager/ManagementApp';
 import { Modals } from './Modals';
+import { ResponsiveProvider } from './responsive/ResponsiveProvider';
 import { ScrollProvider } from './ScrollProvider';
 import { SidebarProvider } from './sidebar/SidebarProvider';
 import { UpdateNotification } from './UpdateNotification';
@@ -51,8 +51,20 @@ function AppInner() {
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
   const dispatch = useDispatch();
 
+  const maybeUpdate = async <T,>(cb?: () => T): Promise<T> => {
+    if (global.Actual.isUpdateReadyForDownload()) {
+      dispatch(
+        setAppState({
+          loadingText: t('Downloading and applying update...'),
+        }),
+      );
+      await global.Actual.applyAppUpdate();
+    }
+    return cb?.();
+  };
+
   async function init() {
-    const socketName = await global.Actual.getServerSocket();
+    const socketName = await maybeUpdate(() => global.Actual.getServerSocket());
 
     dispatch(
       setAppState({
@@ -86,14 +98,16 @@ function AppInner() {
           loadingText: t('Retrieving remote files...'),
         }),
       );
-      send('get-remote-files').then(files => {
-        if (files) {
-          const remoteFile = files.find(f => f.fileId === cloudFileId);
-          if (remoteFile && remoteFile.deleted) {
-            dispatch(closeBudget());
-          }
+
+      const files = await send('get-remote-files');
+      if (files) {
+        const remoteFile = files.find(f => f.fileId === cloudFileId);
+        if (remoteFile && remoteFile.deleted) {
+          dispatch(closeBudget());
         }
-      });
+      }
+
+      await maybeUpdate();
     }
   }
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { theme } from '../style';
@@ -33,7 +33,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) {
         transitions((style, item) => (
           <animated.div key={item} style={style}>
             <View
-              className={`${css({
+              className={css({
                 position: 'absolute',
                 top: 0,
                 left: 0,
@@ -42,7 +42,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) {
                 paddingTop: 200,
                 color: theme.pageText,
                 alignItems: 'center',
-              })}`}
+              })}
             >
               <Block style={{ marginBottom: 20, fontSize: 18 }}>
                 {loadingText}

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

@@ -18,7 +18,6 @@ import { useAccounts } from '../hooks/useAccounts';
 import { useLocalPref } from '../hooks/useLocalPref';
 import { useMetaThemeColor } from '../hooks/useMetaThemeColor';
 import { useNavigate } from '../hooks/useNavigate';
-import { useResponsive } from '../ResponsiveProvider';
 import { theme } from '../style';
 import { getIsOutdated, getLatestVersion } from '../util/versions';
 
@@ -34,6 +33,7 @@ import { ManagePayeesPage } from './payees/ManagePayeesPage';
 import { Reports } from './reports';
 import { LoadingIndicator } from './reports/LoadingIndicator';
 import { NarrowAlternate, WideComponent } from './responsive';
+import { useResponsive } from './responsive/ResponsiveProvider';
 import { Settings } from './settings';
 import { FloatableSidebar } from './sidebar';
 import { Titlebar } from './Titlebar';
@@ -100,6 +100,29 @@ export function FinancesApp() {
     }, 100);
   }, []);
 
+  useEffect(() => {
+    async function run() {
+      await global.Actual.waitForUpdateReadyForDownload();
+      dispatch(
+        addNotification({
+          type: 'message',
+          title: t('A new version of Actual is available!'),
+          message: t('Click the button below to reload and apply the update.'),
+          sticky: true,
+          id: 'update-reload-notification',
+          button: {
+            title: t('Update now'),
+            action: async () => {
+              await global.Actual.applyAppUpdate();
+            },
+          },
+        }),
+      );
+    }
+
+    run();
+  }, []);
+
   useEffect(() => {
     async function run() {
       const latestVersion = await getLatestVersion();

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

@@ -6,12 +6,11 @@ import {
   type Ref,
   type MutableRefObject,
   type UIEvent,
+  type CSSProperties,
 } from 'react';
 
 import memoizeOne from 'memoize-one';
 
-import { type CSSProperties } from '../style';
-
 import { View } from './common/View';
 
 const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;