Merge branch 'master' into reportsOrganization

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

@@ -5,7 +5,6 @@ import {
   Route,
   Routes,
   Navigate,
-  NavLink,
   useNavigate,
   BrowserRouter,
   useLocation,
@@ -21,12 +20,8 @@ import checkForUpdateNotification from 'loot-core/src/client/update-notification
 import * as undo from 'loot-core/src/platform/client/undo';
 
 import { useActions } from '../hooks/useActions';
-import Add from '../icons/v1/Add';
-import Cog from '../icons/v1/Cog';
-import PiggyBank from '../icons/v1/PiggyBank';
-import Wallet from '../icons/v1/Wallet';
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, styles } from '../style';
+import { theme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 import { getIsOutdated, getLatestVersion } from '../util/versions';
 
@@ -35,11 +30,13 @@ import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext';
 import View from './common/View';
 import GlobalKeys from './GlobalKeys';
 import { ManageRulesPage } from './ManageRulesPage';
+import MobileNavTabs from './mobile/MobileNavTabs';
 import Modals from './Modals';
 import Notifications from './Notifications';
 import { ManagePayeesPage } from './payees/ManagePayeesPage';
 import Reports from './reports';
 import { NarrowAlternate, WideComponent } from './responsive';
+import ScrollProvider from './ScrollProvider';
 import Settings from './settings';
 import FloatableSidebar, { SidebarProvider } from './sidebar';
 import Titlebar, { TitlebarProvider } from './Titlebar';
@@ -73,48 +70,6 @@ function WideNotSupported({ children, redirectTo = '/budget' }) {
   return isNarrowWidth ? children : null;
 }
 
-function NavTab({ icon: TabIcon, name, path }) {
-  return (
-    <NavLink
-      to={path}
-      style={({ isActive }) => ({
-        alignItems: 'center',
-        color: isActive ? theme.mobileNavItemSelected : theme.mobileNavItem,
-        display: 'flex',
-        flexDirection: 'column',
-        textDecoration: 'none',
-      })}
-    >
-      <TabIcon width={22} height={22} style={{ marginBottom: '5px' }} />
-      {name}
-    </NavLink>
-  );
-}
-
-function MobileNavTabs() {
-  const { isNarrowWidth } = useResponsive();
-  return (
-    <div
-      style={{
-        backgroundColor: theme.mobileNavBackground,
-        borderTop: `1px solid ${theme.menuBorder}`,
-        bottom: 0,
-        ...styles.shadow,
-        display: isNarrowWidth ? 'flex' : 'none',
-        height: '80px',
-        justifyContent: 'space-around',
-        paddingTop: 10,
-        width: '100%',
-      }}
-    >
-      <NavTab name="Budget" path="/budget" icon={Wallet} />
-      <NavTab name="Accounts" path="/accounts" icon={PiggyBank} />
-      <NavTab name="Transaction" path="/transactions/new" icon={Add} />
-      <NavTab name="Settings" path="/settings" icon={Cog} />
-    </div>
-  );
-}
-
 function RouterBehaviors({ getAccounts }) {
   let navigate = useNavigate();
   useEffect(() => {
@@ -305,7 +260,9 @@ export default function FinancesAppWithContext() {
           <BudgetMonthCountProvider>
             <PayeesProvider>
               <AccountsProvider>
-                <DndProvider backend={Backend}>{app}</DndProvider>
+                <DndProvider backend={Backend}>
+                  <ScrollProvider>{app}</ScrollProvider>
+                </DndProvider>
               </AccountsProvider>
             </PayeesProvider>
           </BudgetMonthCountProvider>

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

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import * as Platform from 'loot-core/src/client/platform';
 
+import useNavigate from '../hooks/useNavigate';
+
 export default function GlobalKeys() {
   let navigate = useNavigate();
   useEffect(() => {

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

@@ -1,4 +1,11 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  type SetStateAction,
+  type Dispatch,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { pushModal } from 'loot-core/src/client/actions/modals';
@@ -7,6 +14,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import * as undo from 'loot-core/src/platform/client/undo';
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
 import { describeSchedule } from 'loot-core/src/shared/schedules';
+import { type RuleEntity } from 'loot-core/src/types/models';
 
 import useCategories from '../hooks/useCategories';
 import useSelected, { SelectedProvider } from '../hooks/useSelected';
@@ -76,7 +84,17 @@ function ruleToString(rule, data) {
   );
 }
 
-function ManageRulesContent({ isModal, payeeId, setLoading }) {
+type ManageRulesContentProps = {
+  isModal: boolean;
+  payeeId: string | null;
+  setLoading?: Dispatch<SetStateAction<boolean>>;
+};
+
+function ManageRulesContent({
+  isModal,
+  payeeId,
+  setLoading,
+}: ManageRulesContentProps) {
   let [allRules, setAllRules] = useState(null);
   let [rules, setRules] = useState(null);
   let [filter, setFilter] = useState('');
@@ -191,7 +209,7 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
   }, []);
 
   function onCreateRule() {
-    let rule = {
+    let rule: RuleEntity = {
       stage: null,
       conditionsOp: 'and',
       conditions: [
@@ -314,11 +332,17 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
   );
 }
 
+type ManageRulesProps = {
+  isModal: boolean;
+  payeeId: string | null;
+  setLoading?: Dispatch<SetStateAction<boolean>>;
+};
+
 export default function ManageRules({
   isModal,
   payeeId,
   setLoading = () => {},
-}) {
+}: ManageRulesProps) {
   return (
     <SchedulesQuery.Provider>
       <ManageRulesContent

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

@@ -0,0 +1,54 @@
+import React, {
+  type ReactNode,
+  createContext,
+  useState,
+  useContext,
+  useEffect,
+} from 'react';
+
+import debounce from 'debounce';
+
+type IScrollContext = {
+  scrollY: number | undefined;
+  isBottomReached: boolean;
+};
+
+const ScrollContext = createContext<IScrollContext | undefined>(undefined);
+
+type ScrollProviderProps = {
+  children?: ReactNode;
+};
+
+export default function ScrollProvider({ children }: ScrollProviderProps) {
+  const [scrollY, setScrollY] = useState(undefined);
+  const [isBottomReached, setIsBottomReached] = useState(false);
+
+  useEffect(() => {
+    const listenToScroll = debounce(e => {
+      setScrollY(e.target?.scrollTop || 0);
+      setIsBottomReached(
+        e.target?.scrollHeight - e.target?.scrollTop <= e.target?.clientHeight,
+      );
+    }, 20);
+
+    window.addEventListener('scroll', listenToScroll, {
+      capture: true,
+      passive: true,
+    });
+    return () =>
+      window.removeEventListener('scroll', listenToScroll, {
+        capture: true,
+      });
+  }, []);
+
+  return (
+    <ScrollContext.Provider
+      value={{ scrollY, isBottomReached }}
+      children={children}
+    />
+  );
+}
+
+export function useScroll(): IScrollContext {
+  return useContext(ScrollContext);
+}

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

@@ -7,14 +7,15 @@ import React, {
   type ReactNode,
 } from 'react';
 import { useSelector } from 'react-redux';
-import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router-dom';
 
 import * as Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
 import { listen } from 'loot-core/src/platform/client/fetch';
 
 import { useActions } from '../hooks/useActions';
 import useFeatureFlag from '../hooks/useFeatureFlag';
+import useNavigate from '../hooks/useNavigate';
 import ArrowLeft from '../icons/v1/ArrowLeft';
 import AlertTriangle from '../icons/v2/AlertTriangle';
 import SvgEye from '../icons/v2/Eye';

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import debounce from 'debounce';
 import memoizeOne from 'memoize-one';
@@ -20,6 +20,7 @@ import {
 } from 'loot-core/src/shared/transactions';
 
 import useCategories from '../../hooks/useCategories';
+import useNavigate from '../../hooks/useNavigate';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { theme } from '../../style';
 

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 
 import * as queries from 'loot-core/src/client/queries';
 
 import { useActions } from '../../hooks/useActions';
 import useCategories from '../../hooks/useCategories';
+import useNavigate from '../../hooks/useNavigate';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { theme, styles } from '../../style';
 import Button from '../common/Button';

packages/desktop-client/src/components/budget/index.js

@@ -7,7 +7,7 @@ import React, {
   useRef,
 } from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation, useMatch, useNavigate } from 'react-router-dom';
+import { useLocation, useMatch } from 'react-router-dom';
 
 import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
@@ -26,6 +26,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { useActions } from '../../hooks/useActions';
 import useCategories from '../../hooks/useCategories';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
+import useNavigate from '../../hooks/useNavigate';
 import { styles } from '../../style';
 import View from '../common/View';
 import { TitlebarContext } from '../Titlebar';

packages/desktop-client/src/components/budget/util.js → packages/desktop-client/src/components/budget/util.ts

@@ -1,6 +1,9 @@
+import { type CategoryGroupEntity } from 'loot-core/src/types/models';
+
 import { styles, theme } from '../../style';
+import { type DropPosition } from '../sort';
 
-export function addToBeBudgetedGroup(groups) {
+export function addToBeBudgetedGroup(groups: CategoryGroupEntity[]) {
   return [
     {
       id: 'to-be-budgeted',
@@ -11,20 +14,20 @@ export function addToBeBudgetedGroup(groups) {
   ];
 }
 
-export function separateGroups(categoryGroups) {
+export function separateGroups(categoryGroups: CategoryGroupEntity[]) {
   return [
     categoryGroups.filter(g => !g.is_income),
     categoryGroups.find(g => g.is_income),
   ];
 }
 
-export function makeAmountGrey(value) {
+export function makeAmountGrey(value: number | string) {
   return value === 0 || value === '0' || value === ''
     ? { color: theme.altMenuItemText }
     : null;
 }
 
-export function makeAmountStyle(value) {
+export function makeAmountStyle(value: number) {
   const greyed = makeAmountGrey(value);
   if (greyed) {
     return greyed;
@@ -35,7 +38,7 @@ export function makeAmountStyle(value) {
   }
 }
 
-export function makeAmountFullStyle(value) {
+export function makeAmountFullStyle(value: number) {
   return {
     color:
       value < 0
@@ -46,7 +49,11 @@ export function makeAmountFullStyle(value) {
   };
 }
 
-export function findSortDown(arr, pos, targetId) {
+export function findSortDown(
+  arr: CategoryGroupEntity[],
+  pos: DropPosition,
+  targetId: string,
+) {
   if (pos === 'top') {
     return { targetId };
   } else {
@@ -66,7 +73,11 @@ export function findSortDown(arr, pos, targetId) {
   }
 }
 
-export function findSortUp(arr, pos, targetId) {
+export function findSortUp(
+  arr: CategoryGroupEntity[],
+  pos: DropPosition,
+  targetId: string,
+) {
   if (pos === 'bottom') {
     return { targetId };
   } else {

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

@@ -1,6 +1,7 @@
 import React, { type ComponentProps } from 'react';
-import { useMatch, useNavigate } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 
+import useNavigate from '../../hooks/useNavigate';
 import { type CSSProperties } from '../../style';
 
 import Button from './Button';

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

@@ -1,8 +1,9 @@
 import React, { type ReactNode, type ComponentProps } from 'react';
-import { NavLink, useMatch, useNavigate } from 'react-router-dom';
+import { NavLink, useMatch } from 'react-router-dom';
 
 import { css } from 'glamor';
 
+import useNavigate from '../../hooks/useNavigate';
 import { type CSSProperties, styles } from '../../style';
 
 import Button from './Button';

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

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import {
   isNonProductionEnvironment,
   isElectron,
 } from 'loot-core/src/shared/environment';
 
 import { useActions } from '../../hooks/useActions';
+import useNavigate from '../../hooks/useNavigate';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { theme } from '../../style';
 import Button, { ButtonWithLoading } from '../common/Button';