Merge branch 'master' into api-hidden

.github/workflows/e2e-test.yml

@@ -66,3 +66,38 @@ jobs:
           name: desktop-client-test-results
           path: packages/desktop-client/test-results/
           retention-days: 30
+      - uses: actions-ecosystem/action-add-labels@v1
+        if: failure()
+        with:
+          labels: ':red_circle: VRT failing'
+      - uses: actions-ecosystem/action-remove-labels@v1
+        if: success()
+        with:
+          labels: ':red_circle: VRT failing'
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: VRT
+      - name: Create comment if failed
+        if: failure()
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            :wave: Looks like VRT (visual regression tests) are failing in this PR. This indicates a problem in the app. It could be either a bug in this PR or a visual change introduced by changing something.
+
+            To fix this: please follow [these instructions](https://github.com/actualbudget/actual/blob/master/packages/desktop-client/README.md#visual-regression) and review the output of the failing CI job to see the generated screenshots.
+
+            We look forward to reviewing this PR once all the CI jobs have passed successfully!
+          edit-mode: replace
+      - name: Update comment when CI job passes
+        if: success() && steps.fc.outputs.comment-id != ''
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          body: The VRT tests have passed! Thank you!
+          edit-mode: replace

packages/desktop-client/package.json

@@ -25,7 +25,6 @@
     "@types/react-dom": "^18.2.1",
     "@types/react-modal": "^3.16.0",
     "@types/react-redux": "^7.1.25",
-    "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^9.0.2",
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "@use-gesture/react": "^10.3.0",

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

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import type { Theme } from 'loot-core/src/types/prefs';
 
 import { useActions } from '../hooks/useActions';
 import MoonStars from '../icons/v2/MoonStars';
 import Sun from '../icons/v2/Sun';
+import System from '../icons/v2/System';
 import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, useTheme } from '../style';
+import { type CSSProperties, themeOptions, useTheme } from '../style';
 
 import Button from './common/Button';
+import Menu from './common/Menu';
+import { Tooltip } from './tooltips';
 
 type ThemeSelectorProps = {
   style?: CSSProperties;
@@ -15,24 +20,41 @@ type ThemeSelectorProps = {
 export function ThemeSelector({ style }: ThemeSelectorProps) {
   const theme = useTheme();
   const { saveGlobalPrefs } = useActions();
+  const [menuOpen, setMenuOpen] = useState(false);
 
   const { isNarrowWidth } = useResponsive();
 
+  const themeIcons = { light: Sun, dark: MoonStars, auto: System } as const;
+
+  async function onMenuSelect(newTheme: string) {
+    setMenuOpen(false);
+
+    saveGlobalPrefs({
+      theme: newTheme as Theme,
+    });
+  }
+
+  const Icon = themeIcons?.[theme] || Sun;
+
   return isNarrowWidth ? null : (
     <Button
       type="bare"
       aria-label="Switch theme"
-      onClick={() => {
-        saveGlobalPrefs({
-          theme: theme === 'dark' ? 'light' : 'dark',
-        });
-      }}
+      onClick={() => setMenuOpen(true)}
       style={style}
     >
-      {theme === 'light' ? (
-        <MoonStars style={{ width: 15, height: 15, color: 'inherit' }} />
-      ) : (
-        <Sun style={{ width: 15, height: 15, color: 'inherit' }} />
+      <Icon style={{ width: 13, height: 13, color: 'inherit' }} />
+      {menuOpen && (
+        <Tooltip
+          position="bottom-right"
+          style={{ padding: 0 }}
+          onClose={() => setMenuOpen(false)}
+        >
+          <Menu
+            onMenuSelect={onMenuSelect}
+            items={themeOptions.map(([name, text]) => ({ name, text }))}
+          />
+        </Tooltip>
       )}
     </Button>
   );

packages/desktop-client/src/components/common/Modal.tsx

@@ -23,7 +23,7 @@ export type ModalProps = {
   isHidden?: boolean;
   children: ReactNode | (() => ReactNode);
   size?: { width?: number; height?: number };
-  padding?: number;
+  padding?: CSSProperties['padding'];
   showHeader?: boolean;
   showTitle?: boolean;
   showClose?: boolean;
@@ -93,6 +93,7 @@ const Modal = ({
           backgroundColor: 'transparent',
           padding: 0,
           pointerEvents: 'auto',
+          margin: '0 10px',
           ...contentStyle,
         },
         overlay: {

packages/desktop-client/src/components/common/Select.tsx

@@ -19,6 +19,7 @@ type SelectProps<Value extends string> = {
   style?: CSSProperties;
   wrapperStyle?: CSSProperties;
   line?: number;
+  disabled?: boolean;
   disabledKeys?: Value[];
 };
 
@@ -46,6 +47,7 @@ export default function Select<Value extends string>({
   style,
   wrapperStyle,
   line,
+  disabled,
   disabledKeys = [],
 }: SelectProps<Value>) {
   const arrowSize = 7;
@@ -55,6 +57,7 @@ export default function Select<Value extends string>({
     <ListboxInput
       value={value}
       onChange={onChange}
+      disabled={disabled}
       style={{
         color: bare ? 'inherit' : theme.formInputText,
         backgroundColor: bare ? 'transparent' : theme.cardBackground,

packages/desktop-client/src/components/reports/ChooseGraph.tsx

@@ -26,7 +26,8 @@ type ChooseGraphProps = {
   setScrollWidth: (value: number) => void;
   months: Month[];
 };
-export function ChooseGraph({
+
+function ChooseGraph({
   data,
   mode,
   graphType,
@@ -37,6 +38,8 @@ export function ChooseGraph({
   setScrollWidth,
   months,
 }: ChooseGraphProps) {
+  const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
+
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
   };
@@ -55,7 +58,7 @@ export function ChooseGraph({
       <AreaGraph
         style={{ flexGrow: 1 }}
         data={data}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
@@ -65,7 +68,7 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
@@ -78,7 +81,7 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
@@ -106,7 +109,7 @@ export function ChooseGraph({
             data={data}
             empty={showEmpty}
             monthsCount={months.length}
-            balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+            balanceTypeOp={balanceTypeOp}
             mode={mode}
             groupBy={groupBy}
           />
@@ -117,10 +120,12 @@ export function ChooseGraph({
           scrollWidth={scrollWidth}
           data={data}
           mode={mode}
-          balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+          balanceTypeOp={balanceTypeOp}
           monthsCount={months.length}
         />
       </View>
     );
   }
 }
+
+export default ChooseGraph;

packages/desktop-client/src/components/reports/ModeButton.tsx

@@ -0,0 +1,39 @@
+import React, { type MouseEventHandler, type ReactNode } from 'react';
+
+import { type CSSProperties, theme } from '../../style';
+import Button from '../common/Button';
+
+type ModeButtonProps = {
+  selected: boolean;
+  children: ReactNode;
+  style: CSSProperties;
+  onSelect: MouseEventHandler<HTMLButtonElement>;
+};
+
+function ModeButton({ selected, children, style, onSelect }: ModeButtonProps) {
+  return (
+    <Button
+      type="bare"
+      style={{
+        padding: '5px 10px',
+        backgroundColor: theme.menuBackground,
+        marginRight: 5,
+        fontSize: 'inherit',
+        ...(selected && {
+          backgroundColor: theme.buttonPrimaryBackground,
+          color: theme.buttonPrimaryText,
+          ':hover': {
+            backgroundColor: theme.buttonPrimaryBackgroundHover,
+            color: theme.buttonPrimaryTextHover,
+          },
+        }),
+        ...style,
+      }}
+      onClick={onSelect}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export default ModeButton;

packages/desktop-client/src/components/reports/ReportLegend.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { theme, styles } from '../../style';
+import Text from '../common/Text';
+import View from '../common/View';
+
+type ReportLegendProps = {
+  legend: Array<{ name: string; color: string }>;
+  groupBy: string;
+};
+
+function ReportLegend({ legend, groupBy }: ReportLegendProps) {
+  return (
+    <View
+      style={{
+        backgroundColor: theme.pageBackground,
+        alignItems: 'center',
+        flex: 1,
+        overflowY: 'auto',
+      }}
+    >
+      <Text
+        style={{
+          ...styles.largeText,
+          alignItems: 'center',
+          marginBottom: 2,
+          fontWeight: 400,
+          paddingTop: 10,
+        }}
+      >
+        {groupBy}
+      </Text>
+      <View>
+        {legend.map(item => {
+          return (
+            <View
+              key={item.name}
+              style={{
+                padding: 10,
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <View
+                style={{
+                  marginRight: 5,
+                  borderRadius: 1000,
+                  width: 14,
+                  height: 14,
+                  backgroundColor: item.color,
+                }}
+              />
+              <Text
+                style={{
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
+                  flexShrink: 0,
+                }}
+              >
+                {item.name}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+export default ReportLegend;

packages/desktop-client/src/components/reports/ReportSidebar.js

@@ -3,7 +3,6 @@ import React from 'react';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { theme } from '../../style';
-import Button from '../common/Button';
 import Select from '../common/Select';
 import Text from '../common/Text';
 import View from '../common/View';
@@ -17,34 +16,9 @@ import {
   getFullRange,
   validateRange,
 } from './Header';
+import ModeButton from './ModeButton';
 import { ReportOptions } from './ReportOptions';
 
-function ModeButton({ selected, children, style, onSelect }) {
-  return (
-    <Button
-      type="bare"
-      style={{
-        padding: '5px 10px',
-        backgroundColor: theme.menuBackground,
-        marginRight: 5,
-        fontSize: 'inherit',
-        ...(selected && {
-          backgroundColor: theme.buttonPrimaryBackground,
-          color: theme.buttonPrimaryText,
-          ':hover': {
-            backgroundColor: theme.buttonPrimaryBackgroundHover,
-            color: theme.buttonPrimaryTextHover,
-          },
-        }),
-        ...style,
-      }}
-      onClick={onSelect}
-    >
-      {children}
-    </Button>
-  );
-}
-
 export function ReportSidebar({
   startDate,
   endDate,