Mobile running balance

packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx

@@ -16,6 +16,7 @@ import { View } from '@actual-app/components/view';
 import { listen, send } from 'loot-core/platform/client/fetch';
 import { type Query } from 'loot-core/shared/query';
 import { isPreviewId } from 'loot-core/shared/transactions';
+import { type IntegerAmount } from 'loot-core/shared/util';
 import {
   type AccountEntity,
   type TransactionEntity,
@@ -31,8 +32,9 @@ import { SchedulesProvider } from '@desktop-client/hooks/useCachedSchedules';
 import { useDateFormat } from '@desktop-client/hooks/useDateFormat';
 import { useFailedAccounts } from '@desktop-client/hooks/useFailedAccounts';
 import { useNavigate } from '@desktop-client/hooks/useNavigate';
+import { useTransactions } from '@desktop-client/hooks/usePreviewTransactions';
 import { accountSchedulesQuery } from '@desktop-client/hooks/useSchedules';
-import { useTransactions } from '@desktop-client/hooks/useTransactions';
+import { useSyncedPref } from '@desktop-client/hooks/useSyncedPref';
 import { useTransactionsSearch } from '@desktop-client/hooks/useTransactionsSearch';
 import {
   collapseModals,
@@ -148,6 +150,19 @@ function AccountHeader({ account }: { readonly account: AccountEntity }) {
     dispatch(reopenAccount({ id: account.id }));
   }, [account.id, dispatch]);
 
+  const [showBalances, setBalances] = useSyncedPref(
+    `show-balances-${account.id}`,
+  );
+  const onToggleRunningBalance = useCallback(() => {
+    const newVal = showBalances === 'true' ? 'false' : 'true';
+    setBalances(newVal);
+    dispatch(
+      collapseModals({
+        rootModalName: 'account-menu',
+      }),
+    );
+  }, [showBalances, setBalances, dispatch]);
+
   const onClick = useCallback(() => {
     dispatch(
       pushModal({
@@ -159,6 +174,7 @@ function AccountHeader({ account }: { readonly account: AccountEntity }) {
             onEditNotes,
             onCloseAccount,
             onReopenAccount,
+            onToggleRunningBalance,
           },
         },
       }),
@@ -170,6 +186,7 @@ function AccountHeader({ account }: { readonly account: AccountEntity }) {
     onEditNotes,
     onReopenAccount,
     onSave,
+    onToggleRunningBalance,
   ]);
 
   return (
@@ -241,39 +258,73 @@ function TransactionListWithPreviews({
   readonly accountName: AccountEntity['name'] | string;
 }) {
   const { t } = useTranslation();
+  const dateFormat = useDateFormat() || 'MM/dd/yyyy';
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const onRefresh = useCallback(() => {
+    if (accountId) {
+      dispatch(syncAndDownload({ accountId }));
+    }
+  }, [accountId, dispatch]);
+
   const baseTransactionsQuery = useCallback(
     () =>
       queries.transactions(accountId).options({ splits: 'all' }).select('*'),
     [accountId],
   );
 
+  const runningBalancesQuery = useCallback(
+    () =>
+      queries
+        .transactions(accountId)
+        .options({ splits: 'none' })
+        .select({ balance: { $sumOver: '$amount' } }),
+    [accountId],
+  );
+
+  const [showBalances] = useSyncedPref(`show-balances-${accountId}`);
   const [transactionsQuery, setTransactionsQuery] = useState<Query>(
     baseTransactionsQuery(),
   );
+  const [balancesQuery] = useState<Query>(runningBalancesQuery);
   const {
     transactions,
+    runningBalances,
     isLoading: isTransactionsLoading,
     reload: reloadTransactions,
     isLoadingMore,
     loadMore: loadMoreTransactions,
   } = useTransactions({
     query: transactionsQuery,
+    runningBalanceQuery: balancesQuery,
+    options: {
+      calculateRunningBalances: true,
+    },
   });
 
-  const { previewTransactions, isLoading: isPreviewTransactionsLoading } =
-    useAccountPreviewTransactions({
-      accountId: account?.id,
-    });
+  const { isSearching, search: onSearch } = useTransactionsSearch({
+    updateQuery: setTransactionsQuery,
+    resetQuery: () => setTransactionsQuery(baseTransactionsQuery()),
+    dateFormat,
+  });
 
-  const dateFormat = useDateFormat() || 'MM/dd/yyyy';
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const {
+    previewTransactions,
+    runningBalances: previewRunningBalances,
+    isLoading: isPreviewTransactionsLoading,
+  } = useAccountPreviewTransactions({
+    accountId: account?.id,
+  });
 
-  const onRefresh = useCallback(() => {
-    if (accountId) {
-      dispatch(syncAndDownload({ accountId }));
-    }
-  }, [accountId, dispatch]);
+  const allBalances = useMemo(
+    () =>
+      new Map<TransactionEntity['id'], IntegerAmount>([
+        ...previewRunningBalances,
+        ...runningBalances,
+      ]),
+    [runningBalances, previewRunningBalances],
+  );
 
   useEffect(() => {
     if (accountId) {
@@ -296,12 +347,6 @@ function TransactionListWithPreviews({
     });
   }, [dispatch, reloadTransactions]);
 
-  const { isSearching, search: onSearch } = useTransactionsSearch({
-    updateQuery: setTransactionsQuery,
-    resetQuery: () => setTransactionsQuery(baseTransactionsQuery()),
-    dateFormat,
-  });
-
   const onOpenTransaction = useCallback(
     (transaction: TransactionEntity) => {
       if (!isPreviewId(transaction.id)) {
@@ -370,6 +415,8 @@ function TransactionListWithPreviews({
       balance={balanceQueries.balance}
       balanceCleared={balanceQueries.cleared}
       balanceUncleared={balanceQueries.uncleared}
+      runningBalances={allBalances}
+      showBalances={isSearching ? false : showBalances === 'true'}
       isLoadingMore={isLoadingMore}
       onLoadMore={loadMoreTransactions}
       searchPlaceholder={t('Search {{accountName}}', { accountName })}

packages/desktop-client/src/components/mobile/budget/CategoryTransactions.tsx

@@ -154,6 +154,7 @@ function TransactionListWithPreviews({
       balance={balance}
       balanceCleared={balanceCleared}
       balanceUncleared={balanceUncleared}
+      runningBalances={undefined}
       searchPlaceholder={`Search ${category.name}`}
       onSearch={onSearch}
       isLoadingMore={isLoadingMore}

packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx

@@ -32,7 +32,11 @@ import { View } from '@actual-app/components/view';
 import * as monthUtils from 'loot-core/shared/months';
 import { isPreviewId } from 'loot-core/shared/transactions';
 import { validForTransfer } from 'loot-core/shared/transfer';
-import { groupById, integerToCurrency } from 'loot-core/shared/util';
+import {
+  groupById,
+  type IntegerAmount,
+  integerToCurrency,
+} from 'loot-core/shared/util';
 import {
   type AccountEntity,
   type TransactionEntity,
@@ -84,6 +88,8 @@ function Loading({ style, 'aria-label': ariaLabel }: LoadingProps) {
 type TransactionListProps = {
   isLoading: boolean;
   transactions: readonly TransactionEntity[];
+  showBalances?: boolean;
+  runningBalances?: Map<TransactionEntity['id'], IntegerAmount>;
   onOpenTransaction?: (transaction: TransactionEntity) => void;
   isLoadingMore: boolean;
   onLoadMore: () => void;
@@ -93,6 +99,8 @@ type TransactionListProps = {
 export function TransactionList({
   isLoading,
   transactions,
+  showBalances,
+  runningBalances,
   onOpenTransaction,
   isLoadingMore,
   onLoadMore,
@@ -198,10 +206,13 @@ export function TransactionList({
                 t => !isPreviewId(t.id) || !t.is_child,
               )}
               addIdAndValue
+              dependencies={[transactions, showBalances, runningBalances]}
             >
               {transaction => (
                 <TransactionListItem
                   key={transaction.id}
+                  showBalance={showBalances}
+                  balance={runningBalances?.get(transaction.id)}
                   value={transaction}
                   onPress={trans => onTransactionPress(trans)}
                   onLongPress={trans => onTransactionPress(trans, true)}

packages/desktop-client/src/components/mobile/transactions/TransactionListItem.tsx

@@ -30,15 +30,18 @@ import {
 } from '@react-aria/interactions';
 
 import { isPreviewId } from 'loot-core/shared/transactions';
-import { integerToCurrency } from 'loot-core/shared/util';
+import { type IntegerAmount, integerToCurrency } from 'loot-core/shared/util';
 import {
   type AccountEntity,
   type TransactionEntity,
 } from 'loot-core/types/models';
 
 import { lookupName, Status } from './TransactionEdit';
 
-import { makeAmountFullStyle } from '@desktop-client/components/budget/util';
+import {
+  makeAmountFullStyle,
+  makeBalanceAmountStyle,
+} from '@desktop-client/components/budget/util';
 import { useAccount } from '@desktop-client/hooks/useAccount';
 import { useCachedSchedules } from '@desktop-client/hooks/useCachedSchedules';
 import { useCategories } from '@desktop-client/hooks/useCategories';
@@ -73,11 +76,15 @@ const getScheduleIconStyle = ({ isPreview }: { isPreview: boolean }) => ({
 type TransactionListItemProps = ComponentPropsWithoutRef<
   typeof ListBoxItem<TransactionEntity>
 > & {
+  showBalance?: boolean;
+  balance?: IntegerAmount;
   onPress: (transaction: TransactionEntity) => void;
   onLongPress: (transaction: TransactionEntity) => void;
 };
 
 export function TransactionListItem({
+  showBalance,
+  balance,
   onPress,
   onLongPress,
   ...props
@@ -282,7 +289,7 @@ export function TransactionListItem({
                   </TextOneLine>
                 )}
               </View>
-              <View style={{ justifyContent: 'center' }}>
+              <View style={{ textAlign: 'right' }}>
                 <Text
                   style={{
                     ...textStyle,
@@ -291,6 +298,17 @@ export function TransactionListItem({
                 >
                   {integerToCurrency(amount)}
                 </Text>
+                {showBalance && (
+                  <Text
+                    style={{
+                      fontSize: 11,
+                      fontWeight: '400',
+                      ...makeBalanceAmountStyle(balance || 0),
+                    }}
+                  >
+                    {integerToCurrency(balance || 0)}
+                  </Text>
+                )}
               </View>
             </View>
           </Button>

packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx

@@ -6,6 +6,7 @@ import { styles } from '@actual-app/components/styles';
 import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
 
+import { type IntegerAmount } from 'loot-core/shared/util';
 import {
   type AccountEntity,
   type TransactionEntity,
@@ -86,6 +87,8 @@ type TransactionListWithBalancesProps = {
   balanceUncleared?:
     | Binding<'category', 'balanceUncleared'>
     | Binding<'account', 'balanceUncleared'>;
+  showBalances?: boolean;
+  runningBalances?: Map<TransactionEntity['id'], IntegerAmount>;
   searchPlaceholder: string;
   onSearch: (searchText: string) => void;
   isLoadingMore: boolean;
@@ -101,6 +104,8 @@ export function TransactionListWithBalances({
   balance,
   balanceCleared,
   balanceUncleared,
+  showBalances,
+  runningBalances,
   searchPlaceholder = 'Search...',
   onSearch,
   isLoadingMore,
@@ -148,6 +153,8 @@ export function TransactionListWithBalances({
           <TransactionList
             isLoading={isLoading}
             transactions={transactions}
+            showBalances={showBalances}
+            runningBalances={runningBalances}
             isLoadingMore={isLoadingMore}
             onLoadMore={onLoadMore}
             onOpenTransaction={onOpenTransaction}

packages/desktop-client/src/components/modals/AccountMenuModal.tsx

@@ -33,6 +33,7 @@ import { validateAccountName } from '@desktop-client/components/util/accountVali
 import { useAccount } from '@desktop-client/hooks/useAccount';
 import { useAccounts } from '@desktop-client/hooks/useAccounts';
 import { useNotes } from '@desktop-client/hooks/useNotes';
+import { useSyncedPref } from '@desktop-client/hooks/useSyncedPref';
 import { type Modal as ModalType } from '@desktop-client/modals/modalsSlice';
 
 type AccountMenuModalProps = Extract<
@@ -47,6 +48,7 @@ export function AccountMenuModal({
   onReopenAccount,
   onEditNotes,
   onClose,
+  onToggleRunningBalance,
 }: AccountMenuModalProps) {
   const { t } = useTranslation();
   const account = useAccount(accountId);
@@ -124,6 +126,7 @@ export function AccountMenuModal({
                 account={account}
                 onClose={onCloseAccount}
                 onReopen={onReopenAccount}
+                onToggleRunningBalance={onToggleRunningBalance}
               />
             }
             title={
@@ -158,7 +161,7 @@ export function AccountMenuModal({
                 notes={
                   originalNotes && originalNotes.length > 0
                     ? originalNotes
-                    : 'No notes'
+                    : t('No notes')
                 }
                 editable={false}
                 focused={false}
@@ -201,12 +204,14 @@ type AdditionalAccountMenuProps = {
   account: AccountEntity;
   onClose?: (accountId: string) => void;
   onReopen?: (accountId: string) => void;
+  onToggleRunningBalance?: () => void;
 };
 
 function AdditionalAccountMenu({
   account,
   onClose,
   onReopen,
+  onToggleRunningBalance,
 }: AdditionalAccountMenuProps) {
   const { t } = useTranslation();
   const triggerRef = useRef(null);
@@ -220,6 +225,7 @@ function AdditionalAccountMenu({
     ...itemStyle,
     ...(item.name === 'close' && { color: theme.errorTextMenu }),
   });
+  const [showBalances] = useSyncedPref(`show-balances-${account.id}`);
 
   return (
     <View>
@@ -245,6 +251,13 @@ function AdditionalAccountMenu({
           <Menu
             getItemStyle={getItemStyle}
             items={[
+              {
+                name: 'balance',
+                text:
+                  showBalances === 'true'
+                    ? t('Hide running balance')
+                    : t('Show running balance'),
+              },
               account.closed
                 ? {
                     name: 'reopen',
@@ -268,6 +281,9 @@ function AdditionalAccountMenu({
                 case 'reopen':
                   onReopen?.(account.id);
                   break;
+                case 'balance':
+                  onToggleRunningBalance?.();
+                  break;
                 default:
                   throw new Error(`Unrecognized menu option: ${name}`);
               }