feat: show/hide reconciled transactions on mobile (#6896)

* feat: show/hide reconciled transactions on mobile

Resolves #2969

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -150,6 +150,10 @@ function AccountHeader({ account }: { readonly account: AccountEntity }) {
   const [showRunningBalances, setShowRunningBalances] = useSyncedPref(
     `show-balances-${account.id}`,
   );
+  const [hideReconciled, setHideReconciled] = useSyncedPref(
+    `hide-reconciled-${account.id}`,
+  );
+
   const onToggleRunningBalance = useCallback(() => {
     setShowRunningBalances(showRunningBalances === 'true' ? 'false' : 'true');
     dispatch(
@@ -159,6 +163,15 @@ function AccountHeader({ account }: { readonly account: AccountEntity }) {
     );
   }, [showRunningBalances, setShowRunningBalances, dispatch]);
 
+  const onToggleReconciled = useCallback(() => {
+    setHideReconciled(hideReconciled === 'true' ? 'false' : 'true');
+    dispatch(
+      collapseModals({
+        rootModalName: 'account-menu',
+      }),
+    );
+  }, [hideReconciled, setHideReconciled, dispatch]);
+
   const onClick = useCallback(() => {
     dispatch(
       pushModal({
@@ -171,6 +184,7 @@ function AccountHeader({ account }: { readonly account: AccountEntity }) {
             onCloseAccount,
             onReopenAccount,
             onToggleRunningBalance,
+            onToggleReconciled,
           },
         },
       }),
@@ -183,6 +197,7 @@ function AccountHeader({ account }: { readonly account: AccountEntity }) {
     onReopenAccount,
     onSave,
     onToggleRunningBalance,
+    onToggleReconciled,
   ]);
 
   return (

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

@@ -61,6 +61,7 @@ function TransactionListWithPreviews({
   );
 
   const [showRunningBalances] = useSyncedPref(`show-balances-${account.id}`);
+  const [hideReconciled] = useSyncedPref(`hide-reconciled-${account.id}`);
   const [transactionsQuery, setTransactionsQuery] = useState<Query>(
     baseTransactionsQuery(),
   );
@@ -189,10 +190,14 @@ function TransactionListWithPreviews({
     [account],
   );
 
-  const transactionsToDisplay = !isSearching
+  const baseTransactions = !isSearching
     ? // Do not render child transactions in the list, unless searching
       previewTransactions.concat(transactions.filter(t => !t.is_child))
     : transactions;
+  const transactionsToDisplay =
+    hideReconciled === 'true'
+      ? baseTransactions.filter(t => !t.reconciled)
+      : baseTransactions;
 
   return (
     <TransactionListWithBalances

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

@@ -44,6 +44,7 @@ export function AccountMenuModal({
   onEditNotes,
   onClose,
   onToggleRunningBalance,
+  onToggleReconciled,
 }: AccountMenuModalProps) {
   const { t } = useTranslation();
   const account = useAccount(accountId);
@@ -122,6 +123,7 @@ export function AccountMenuModal({
                 onClose={onCloseAccount}
                 onReopen={onReopenAccount}
                 onToggleRunningBalance={onToggleRunningBalance}
+                onToggleReconciled={onToggleReconciled}
               />
             }
             title={
@@ -200,6 +202,7 @@ type AdditionalAccountMenuProps = {
   onClose?: (accountId: string) => void;
   onReopen?: (accountId: string) => void;
   onToggleRunningBalance?: () => void;
+  onToggleReconciled?: () => void;
 };
 
 function AdditionalAccountMenu({
@@ -207,6 +210,7 @@ function AdditionalAccountMenu({
   onClose,
   onReopen,
   onToggleRunningBalance,
+  onToggleReconciled,
 }: AdditionalAccountMenuProps) {
   const { t } = useTranslation();
   const triggerRef = useRef(null);
@@ -221,6 +225,7 @@ function AdditionalAccountMenu({
     ...(item.name === 'close' && { color: theme.errorTextMenu }),
   });
   const [showBalances] = useSyncedPref(`show-balances-${account.id}`);
+  const [hideReconciled] = useSyncedPref(`hide-reconciled-${account.id}`);
 
   return (
     <View>
@@ -253,6 +258,13 @@ function AdditionalAccountMenu({
                     ? t('Hide running balance')
                     : t('Show running balance'),
               },
+              {
+                name: 'toggle-reconciled',
+                text:
+                  hideReconciled !== 'true'
+                    ? t('Hide reconciled transactions')
+                    : t('Show reconciled transactions'),
+              },
               account.closed
                 ? {
                     name: 'reopen',
@@ -279,6 +291,9 @@ function AdditionalAccountMenu({
                 case 'balance':
                   onToggleRunningBalance?.();
                   break;
+                case 'toggle-reconciled':
+                  onToggleReconciled?.();
+                  break;
                 default:
                   throw new Error(`Unrecognized menu option: ${name}`);
               }

packages/desktop-client/src/modals/modalsSlice.ts

@@ -289,6 +289,7 @@ export type Modal =
         onEditNotes: (id: NoteEntity['id']) => void;
         onClose?: () => void;
         onToggleRunningBalance?: () => void;
+        onToggleReconciled?: () => void;
       };
     }
   | {

upcoming-release-notes/6896.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [adastx]
+---
+
+Add option to hide reconciled transactions using the mobile interface