feat: toggle banking matching aside

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React, { Suspense } from 'react';
+import * as R from 'ramda';
 import { Spinner } from '@blueprintjs/core';
 
 import '@/style/pages/CashFlow/AccountTransactions/List.scss';
@@ -16,14 +17,18 @@ import { AccountTransactionsProgressBar } from './components';
 import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs';
 import { AppShell } from '@/components/AppShell/AppShell';
 import { CategorizeTransactionAside } from '../CategorizeTransactionAside/CategorizeTransactionAside';
+import { withBanking } from '../withBanking';
 
 /**
  * Account transactions list.
  */
-function AccountTransactionsList() {
+function AccountTransactionsListRoot({
+  // #withBanking
+  openMatchingTransactionAside,
+}) {
   return (
     <AccountTransactionsProvider>
-      <AppShell>
+      <AppShell hideAside={!openMatchingTransactionAside}>
         <AppShell.Main>
           <AccountTransactionsActionsBar />
           <AccountTransactionsDetailsBar />
@@ -46,7 +51,14 @@ function AccountTransactionsList() {
   );
 }
 
-export default AccountTransactionsList;
+export default R.compose(
+  withBanking(
+    ({ selectedUncategorizedTransactionId, openMatchingTransactionAside }) => ({
+      selectedUncategorizedTransactionId,
+      openMatchingTransactionAside,
+    }),
+  ),
+)(AccountTransactionsListRoot);
 
 const AccountsTransactionsAll = React.lazy(
   () => import('./AccountsTransactionsAll'),