Merge branch 'master' into matiss/harden-types

package.json

@@ -57,9 +57,6 @@
     "source-map-support": "^0.5.21",
     "typescript": "^5.0.2"
   },
-  "resolutions": {
-    "react-error-overlay": "6.0.9"
-  },
   "engines": {
     "node": ">=18.0.0"
   },

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

@@ -274,6 +274,9 @@ function FinancesApp() {
                     </WideNotSupported>
                   }
                 />
+
+                {/* redirect all other traffic to the budget page */}
+                <Route path="/*" element={<Navigate to="/budget" replace />} />
               </Routes>
 
               <Modals />

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

@@ -27,8 +27,8 @@ import AccountSyncCheck from './accounts/AccountSyncCheck';
 import AnimatedRefresh from './AnimatedRefresh';
 import { MonthCountSelector } from './budget/MonthCountSelector';
 import Button, { ButtonWithLoading } from './common/Button';
-import ButtonLink from './common/ButtonLink';
 import ExternalLink from './common/ExternalLink';
+import Link from './common/Link';
 import Paragraph from './common/Paragraph';
 import Text from './common/Text';
 import View from './common/View';
@@ -69,15 +69,16 @@ function UncategorizedButton() {
   let count = useSheetValue(queries.uncategorizedCount());
   return (
     count !== 0 && (
-      <ButtonLink
+      <Link
+        variant="button"
         type="bare"
         to="/accounts/uncategorized"
         style={{
           color: theme.errorText,
         }}
       >
         {count} uncategorized {count === 1 ? 'transaction' : 'transactions'}
-      </ButtonLink>
+      </Link>
     )
   );
 }

packages/desktop-client/src/components/accounts/MobileAccountDetails.js

@@ -1,6 +1,5 @@
 import React, { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import { useActions } from '../../hooks/useActions';
 import Add from '../../icons/v1/Add';
@@ -12,6 +11,7 @@ import InputWithContent from '../common/InputWithContent';
 import Label from '../common/Label';
 import Text from '../common/Text';
 import View from '../common/View';
+import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
 import { TransactionList } from '../transactions/MobileTransaction';
 

packages/desktop-client/src/components/accounts/MobileAccounts.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import * as queries from 'loot-core/src/client/queries';
 
@@ -14,6 +13,7 @@ import Text from '../common/Text';
 import TextOneLine from '../common/TextOneLine';
 import View from '../common/View';
 import { Page } from '../Page';
+import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
 
 function AccountHeader({ name, amount, style = {} }) {

packages/desktop-client/src/components/budget/BudgetMonthCountContext.tsx

@@ -0,0 +1,35 @@
+import React, {
+  createContext,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  useContext,
+  useState,
+} from 'react';
+
+type BudgetMonthCountContextValue = {
+  displayMax: number;
+  setDisplayMax: Dispatch<SetStateAction<number>>;
+};
+
+let BudgetMonthCountContext = createContext<BudgetMonthCountContextValue>(null);
+
+type BudgetMonthCountProviderProps = {
+  children: ReactNode;
+};
+
+export function BudgetMonthCountProvider({
+  children,
+}: BudgetMonthCountProviderProps) {
+  let [displayMax, setDisplayMax] = useState(1);
+
+  return (
+    <BudgetMonthCountContext.Provider value={{ displayMax, setDisplayMax }}>
+      {children}
+    </BudgetMonthCountContext.Provider>
+  );
+}
+
+export function useBudgetMonthCount() {
+  return useContext(BudgetMonthCountContext);
+}

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

@@ -0,0 +1,84 @@
+import React, { type ReactNode, type ComponentProps } from 'react';
+import { NavLink, useMatch, useNavigate } from 'react-router-dom';
+
+import { css } from 'glamor';
+
+import { type CSSProperties, styles } from '../../style';
+
+import Button from './Button';
+
+type ButtonLinkProps = ComponentProps<typeof Button> & {
+  to: string;
+  activeStyle?: CSSProperties;
+};
+
+type AnchorLinkProps = {
+  to: string;
+  style?: CSSProperties;
+  activeStyle?: CSSProperties;
+  children?: ReactNode;
+};
+
+const ButtonLink = ({
+  to,
+  style,
+  activeStyle,
+  onClick,
+  ...props
+}: ButtonLinkProps) => {
+  const navigate = useNavigate();
+  const match = useMatch({ path: to });
+
+  const handleClick = e => {
+    onClick?.(e);
+    navigate(to);
+  };
+
+  return (
+    <Button
+      style={{
+        ...style,
+        ...(match ? activeStyle : {}),
+      }}
+      activeStyle={activeStyle}
+      {...props}
+      onClick={handleClick}
+    />
+  );
+};
+
+const AnchorLink = ({ to, style, activeStyle, children }: AnchorLinkProps) => {
+  const match = useMatch({ path: to });
+
+  return (
+    <NavLink
+      to={to}
+      className={`${css([
+        styles.smallText,
+        style,
+        match ? activeStyle : null,
+      ])}`}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+type LinkProps =
+  | ({
+      variant: 'button';
+    } & ButtonLinkProps)
+  | ({ variant?: 'anchor' } & AnchorLinkProps);
+
+export default function Link({ variant = 'anchor', ...props }: LinkProps) {
+  switch (variant) {
+    case 'anchor':
+      return <AnchorLink {...props} />;
+
+    case 'button':
+      return <ButtonLink {...props} />;
+
+    default:
+      throw new Error(`Unrecognised link type: ${variant}`);
+  }
+}

packages/desktop-client/src/components/manager/ServerURL.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import AnchorLink from '../common/AnchorLink';
+import Link from '../common/Link';
 import Text from '../common/Text';
 import View from '../common/View';
 import { useServerURL } from '../ServerContext';
@@ -30,9 +30,9 @@ export default function ServerURL() {
           <strong>No server configured</strong>
         )}
       </Text>
-      <AnchorLink to="/config-server" style={{ marginLeft: 15 }}>
+      <Link to="/config-server" style={{ marginLeft: 15 }}>
         Change
-      </AnchorLink>
+      </Link>
     </View>
   );
 }

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

@@ -43,7 +43,6 @@ export default function NetWorth() {
     [start, end, accounts, filters, conditionsOp],
   );
   const data = useReport('net_worth', params);
-
   useEffect(() => {
     async function run() {
       const trans = await send('get-earliest-transaction');
@@ -133,6 +132,9 @@ export default function NetWorth() {
           start={start}
           end={end}
           graphData={data.graphData}
+          domain={{
+            y: [data.lowestNetWorth * 0.99, data.highestNetWorth * 1.01],
+          }}
         />
 
         <View style={{ marginTop: 30 }}>

packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx

@@ -21,8 +21,16 @@ type NetWorthGraphProps = {
   style?: CSSProperties;
   graphData;
   compact: boolean;
+  domain?: {
+    y?: [number, number];
+  };
 };
-function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
+function NetWorthGraph({
+  style,
+  graphData,
+  compact,
+  domain,
+}: NetWorthGraphProps) {
   const Chart = compact ? VictoryGroup : VictoryChart;
 
   return (
@@ -38,6 +46,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
             scale={{ x: 'time', y: 'linear' }}
             theme={chartTheme}
             domainPadding={{ x: 0, y: 10 }}
+            domain={domain}
             width={width}
             height={height}
             containerComponent={

packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx

@@ -93,6 +93,8 @@ function recalculate(data, start, end) {
   let hasNegative = false;
   let startNetWorth = 0;
   let endNetWorth = 0;
+  let lowestNetWorth = null;
+  let highestNetWorth = null;
 
   const graphData = months.reduce((arr, month, idx) => {
     let debt = 0;
@@ -140,6 +142,15 @@ function recalculate(data, start, end) {
     endNetWorth = total;
 
     arr.push({ x, y: integerToAmount(total), premadeLabel: label });
+
+    arr.forEach(item => {
+      if (item.y < lowestNetWorth || lowestNetWorth === null) {
+        lowestNetWorth = item.y;
+      }
+      if (item.y > highestNetWorth || highestNetWorth === null) {
+        highestNetWorth = item.y;
+      }
+    });
     return arr;
   }, []);
 
@@ -152,5 +163,7 @@ function recalculate(data, start, end) {
     },
     netWorth: endNetWorth,
     totalChange: endNetWorth - startNetWorth,
+    lowestNetWorth,
+    highestNetWorth,
   };
 }

packages/desktop-client/src/components/responsive/PullToRefresh.tsx

@@ -0,0 +1,28 @@
+import React, { type ComponentProps } from 'react';
+import BasePullToRefresh from 'react-simple-pull-to-refresh';
+
+import { css } from 'glamor';
+
+type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;
+
+export default function PullToRefresh(props: PullToRefreshProps) {
+  return (
+    <div style={{ overflow: 'auto' }}>
+      <BasePullToRefresh
+        pullDownThreshold={80}
+        resistance={2}
+        className={String(
+          css({
+            '& .ptr__pull-down': {
+              textAlign: 'center',
+            },
+            '& .ptr__children': {
+              overflow: 'hidden auto',
+            },
+          }),
+        )}
+        {...props}
+      />
+    </div>
+  );
+}