Merge branch 'master' into goalProgressBar

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

@@ -78,5 +78,15 @@ test.describe('Schedules', () => {
       'Show completed schedules',
     );
     await expect(page).toHaveScreenshot(screenshotConfig(page));
+
+    // Schedules search shouldn't shrink with many schedules
+    for (let i = 0; i < 15; i++) {
+      await schedulesPage.addNewSchedule({
+        payee: 'Home Depot',
+        account: 'HSBC',
+        amount: 0,
+      });
+    }
+    await expect(page).toHaveScreenshot(screenshotConfig(page));
   });
 });

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/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/Button.tsx

@@ -22,7 +22,7 @@ type ButtonProps = HTMLProps<HTMLButtonElement> & {
   as?: ElementType;
 };
 
-type ButtonType = 'normal' | 'primary' | 'bare';
+type ButtonType = 'normal' | 'primary' | 'bare' | 'link';
 
 const backgroundColor = {
   normal: theme.buttonNormalBackground,
@@ -33,6 +33,7 @@ const backgroundColor = {
   bareDisabled: theme.buttonBareDisabledBackground,
   menu: theme.buttonMenuBackground,
   menuSelected: theme.buttonMenuSelectedBackground,
+  link: theme.buttonBareBackground,
 };
 
 const backgroundColorHover = {
@@ -41,6 +42,7 @@ const backgroundColorHover = {
   bare: theme.buttonBareBackgroundHover,
   menu: theme.buttonMenuBackgroundHover,
   menuSelected: theme.buttonMenuSelectedBackgroundHover,
+  link: theme.buttonBareBackground,
 };
 
 const borderColor = {
@@ -50,6 +52,7 @@ const borderColor = {
   primaryDisabled: theme.buttonPrimaryDisabledBorder,
   menu: theme.buttonMenuBorder,
   menuSelected: theme.buttonMenuSelectedBorder,
+  link: theme.buttonBareBackground,
 };
 
 const textColor = {
@@ -61,6 +64,7 @@ const textColor = {
   bareDisabled: theme.buttonBareDisabledText,
   menu: theme.buttonMenuText,
   menuSelected: theme.buttonMenuSelectedText,
+  link: theme.pageTextLink,
 };
 
 const textColorHover = {
@@ -71,6 +75,55 @@ const textColorHover = {
   menuSelected: theme.buttonMenuSelectedTextHover,
 };
 
+const linkButtonHoverStyles = {
+  textDecoration: 'underline',
+  boxShadow: 'none',
+};
+
+const _getBorder = (type, typeWithDisabled) => {
+  switch (type) {
+    case 'bare':
+    case 'link':
+      return 'none';
+
+    default:
+      return '1px solid ' + borderColor[typeWithDisabled];
+  }
+};
+
+const _getPadding = type => {
+  switch (type) {
+    case 'bare':
+      return '5px';
+    case 'link':
+      return '0';
+    default:
+      return '5px 10px';
+  }
+};
+
+const _getActiveStyles = (type, bounce) => {
+  switch (type) {
+    case 'bare':
+      return { backgroundColor: theme.buttonBareBackgroundActive };
+    case 'link':
+      return {
+        transform: 'none',
+        boxShadow: 'none',
+      };
+    default:
+      return {
+        transform: bounce && 'translateY(1px)',
+        boxShadow: `0 1px 4px 0 ${
+          type === 'primary'
+            ? theme.buttonPrimaryShadow
+            : theme.buttonNormalShadow
+        }`,
+        transition: 'none',
+      };
+  }
+};
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -94,22 +147,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     hoveredStyle = {
       ...(type !== 'bare' && styles.shadow),
+      ...(type === 'link' && linkButtonHoverStyles),
       backgroundColor: backgroundColorHover[type],
       color: color || textColorHover[type],
       ...hoveredStyle,
     };
     activeStyle = {
-      ...(type === 'bare'
-        ? { backgroundColor: theme.buttonBareBackgroundActive }
-        : {
-            transform: bounce && 'translateY(1px)',
-            boxShadow:
-              '0 1px 4px 0 ' +
-              (type === 'primary'
-                ? theme.buttonPrimaryShadow
-                : theme.buttonNormalShadow),
-            transition: 'none',
-          }),
+      ..._getActiveStyles(type, bounce),
       ...activeStyle,
     };
 
@@ -118,14 +162,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       alignItems: 'center',
       justifyContent: 'center',
       flexShrink: 0,
-      padding: type === 'bare' ? '5px' : '5px 10px',
+      padding: _getPadding(type),
       margin: 0,
       overflow: 'hidden',
-      display: 'flex',
+      display: type === 'link' ? 'inline' : 'flex',
       borderRadius: 4,
       backgroundColor: backgroundColor[typeWithDisabled],
-      border:
-        type === 'bare' ? 'none' : '1px solid ' + borderColor[typeWithDisabled],
+      border: _getBorder(type, typeWithDisabled),
       color: color || textColor[typeWithDisabled],
       transition: 'box-shadow .25s',
       WebkitAppRegion: 'no-drag',

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/CashFlow.js

@@ -33,7 +33,7 @@ function CashFlow() {
 
   const [allMonths, setAllMonths] = useState(null);
   const [start, setStart] = useState(
-    monthUtils.subMonths(monthUtils.currentMonth(), 30),
+    monthUtils.subMonths(monthUtils.currentMonth(), 5),
   );
   const [end, setEnd] = useState(monthUtils.currentDay());