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

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

@@ -6,6 +6,7 @@
     "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/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/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/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;

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

@@ -6,17 +6,18 @@ import { useLocation } from 'react-router-dom';
 
 import { useToggle } from 'usehooks-ts';
 
+import { openDocsForCurrentPage } from 'loot-core/client/actions';
 import { pushModal } from 'loot-core/client/actions/modals';
 
+import { useFeatureFlag } from '../hooks/useFeatureFlag';
 import { SvgHelp } from '../icons/v2/Help';
-import { openUrl } from '../util/router-tools';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';
 import { Popover } from './common/Popover';
 import { SpaceBetween } from './common/SpaceBetween';
 
-type HelpMenuItem = 'docs' | 'keyboard-shortcuts';
+type HelpMenuItem = 'docs' | 'keyboard-shortcuts' | 'goal-templates';
 
 type HelpButtonProps = {
   onPress?: () => void;
@@ -45,27 +46,8 @@ const HelpButton = forwardRef<HTMLButtonElement, HelpButtonProps>(
 
 HelpButton.displayName = 'HelpButton';
 
-const getPageDocs = (page: string) => {
-  switch (page) {
-    case '/budget':
-      return 'https://actualbudget.org/docs/getting-started/envelope-budgeting';
-    case '/reports':
-      return 'https://actualbudget.org/docs/reports/';
-    case '/schedules':
-      return 'https://actualbudget.org/docs/schedules';
-    case '/payees':
-      return 'https://actualbudget.org/docs/transactions/payees';
-    case '/rules':
-      return 'https://actualbudget.org/docs/budgeting/rules';
-    case '/settings':
-      return 'https://actualbudget.org/docs/settings';
-    default:
-      // All pages under /accounts, plus any missing pages
-      return 'https://actualbudget.org/docs';
-  }
-};
-
 export const HelpMenu = () => {
+  const showGoalTemplates = useFeatureFlag('goalTemplatesEnabled');
   const { t } = useTranslation();
   const [isMenuOpen, toggleMenuOpen, setMenuOpen] = useToggle();
   const menuButtonRef = useRef(null);
@@ -76,11 +58,14 @@ export const HelpMenu = () => {
   const handleItemSelect = (item: HelpMenuItem) => {
     switch (item) {
       case 'docs':
-        openUrl(getPageDocs(page));
+        dispatch(openDocsForCurrentPage());
         break;
       case 'keyboard-shortcuts':
         dispatch(pushModal('keyboard-shortcuts'));
         break;
+      case 'goal-templates':
+        dispatch(pushModal('goal-templates'));
+        break;
     }
   };
 
@@ -98,7 +83,7 @@ export const HelpMenu = () => {
         onOpenChange={() => setMenuOpen(false)}
       >
         <Menu
-          onMenuSelect={item => {
+          onMenuSelect={(item: HelpMenuItem) => {
             setMenuOpen(false);
             handleItemSelect(item);
           }}
@@ -108,6 +93,9 @@ export const HelpMenu = () => {
               text: t('Documentation'),
             },
             { name: 'keyboard-shortcuts', text: t('Keyboard shortcuts') },
+            ...(showGoalTemplates && page === '/budget'
+              ? [{ name: 'goal-templates', text: t('Goal templates') }]
+              : []),
           ]}
         />
       </Popover>

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

@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { type State } from 'loot-core/src/client/state-types';
 
 import { useActions } from '../hooks/useActions';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, styles } from '../style';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';

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

@@ -117,17 +117,14 @@ export function ManageRules({
   const { list: categories } = useCategories();
   const payees = usePayees();
   const accounts = useAccounts();
-  const state = {
-    payees,
-    accounts,
-    schedules,
-  };
   const filterData = useMemo(
     () => ({
-      ...state,
+      payees,
+      accounts,
+      schedules,
       categories,
     }),
-    [state, categories],
+    [payees, accounts, schedules, categories],
   );
 
   const filteredRules = useMemo(

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

@@ -35,6 +35,7 @@ import { EnvelopeBudgetMonthMenuModal } from './modals/EnvelopeBudgetMonthMenuMo
 import { EnvelopeBudgetSummaryModal } from './modals/EnvelopeBudgetSummaryModal';
 import { EnvelopeToBudgetMenuModal } from './modals/EnvelopeToBudgetMenuModal';
 import { FixEncryptionKeyModal } from './modals/FixEncryptionKeyModal';
+import { GoalTemplateModal } from './modals/GoalTemplateModal';
 import { GoCardlessExternalMsgModal } from './modals/GoCardlessExternalMsgModal';
 import { GoCardlessInitialiseModal } from './modals/GoCardlessInitialiseModal';
 import { HoldBufferModal } from './modals/HoldBufferModal';
@@ -83,6 +84,9 @@ export function Modals() {
   const modals = modalStack
     .map(({ name, options }) => {
       switch (name) {
+        case 'goal-templates':
+          return budgetId ? <GoalTemplateModal key={name} /> : null;
+
         case 'keyboard-shortcuts':
           // don't show the hotkey help modal when a budget is not open
           return budgetId ? <KeyboardShortcutModal key={name} /> : null;

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

@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, type CSSProperties } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import remarkGfm from 'remark-gfm';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
 import { Text } from './common/Text';
@@ -110,22 +110,22 @@ export function Notes({
   return editable ? (
     <textarea
       ref={textAreaRef}
-      className={`${css({
+      className={css({
         border: '1px solid ' + theme.buttonNormalBorder,
         padding: 7,
         ...(!isNarrowWidth && { minWidth: 350, minHeight: 120 }),
         outline: 'none',
         backgroundColor: theme.tableBackground,
         color: theme.tableText,
         ...getStyle?.(editable),
-      })}`}
+      })}
       value={notes || ''}
       onChange={e => onChange?.(e.target.value)}
       onBlur={e => onBlur?.(e.target.value)}
       placeholder="Notes (markdown supported)"
     />
   ) : (
-    <Text {...markdownStyles} style={{ ...getStyle?.(editable) }}>
+    <Text className={css([markdownStyles, getStyle?.(editable)])}>
       <ReactMarkdown remarkPlugins={remarkPlugins} linkTarget="_blank">
         {notes}
       </ReactMarkdown>

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

@@ -1,10 +1,16 @@
-import React, { useEffect, useRef, useState, type ComponentProps } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+} from 'react';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { useNotes } from '../hooks/useNotes';
 import { SvgCustomNotesPaper } from '../icons/v2';
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 
 import { Button } from './common/Button2';
 import { Popover } from './common/Popover';

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

@@ -4,10 +4,11 @@ import React, {
   useEffect,
   useMemo,
   type SetStateAction,
+  type CSSProperties,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { removeNotification } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
@@ -16,7 +17,7 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
 import { useResponsive } from '../ResponsiveProvider';
-import { styles, theme, type CSSProperties } from '../style';
+import { styles, theme } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button2';
 import { Link } from './common/Link';
@@ -202,29 +203,27 @@ function Notification({
                 onRemove();
                 setLoading(false);
               }}
-              className={String(
-                css({
-                  backgroundColor: 'transparent',
-                  border: `1px solid ${
-                    positive
-                      ? theme.noticeBorder
-                      : error
-                        ? theme.errorBorder
-                        : theme.warningBorder
-                  }`,
-                  color: 'currentColor',
-                  ...styles.mediumText,
-                  flexShrink: 0,
-                  '&[data-hovered], &[data-pressed]': {
-                    backgroundColor: positive
-                      ? theme.noticeBackground
-                      : error
-                        ? theme.errorBackground
-                        : theme.warningBackground,
-                  },
-                  ...narrowStyle,
-                }),
-              )}
+              className={css({
+                backgroundColor: 'transparent',
+                border: `1px solid ${
+                  positive
+                    ? theme.noticeBorder
+                    : error
+                      ? theme.errorBorder
+                      : theme.warningBorder
+                }`,
+                color: 'currentColor',
+                ...styles.mediumText,
+                flexShrink: 0,
+                '&[data-hovered], &[data-pressed]': {
+                  backgroundColor: positive
+                    ? theme.noticeBackground
+                    : error
+                      ? theme.errorBackground
+                      : theme.warningBackground,
+                },
+                ...narrowStyle,
+              })}
             >
               {button.title}
             </ButtonWithLoading>

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

@@ -1,7 +1,7 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, styles } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';