diff --git a/packages/desktop-client/src/components/mobile/accounts/Account.jsx b/packages/desktop-client/src/components/mobile/accounts/Account.jsx index 8a16a294c0e43cdf04bb96ea0ce8bbd308ea44e3..25c0bd4b17f0bd76fd2c47ca8bdf23e17638f7a1 100644 --- a/packages/desktop-client/src/components/mobile/accounts/Account.jsx +++ b/packages/desktop-client/src/components/mobile/accounts/Account.jsx @@ -21,6 +21,7 @@ import { import { useAccounts } from '../../../hooks/useAccounts'; import { useCategories } from '../../../hooks/useCategories'; import { useDateFormat } from '../../../hooks/useDateFormat'; +import { useFailedAccounts } from '../../../hooks/useFailedAccounts'; import { useLocalPref } from '../../../hooks/useLocalPref'; import { useLocalPrefs } from '../../../hooks/useLocalPrefs'; import { useNavigate } from '../../../hooks/useNavigate'; @@ -77,6 +78,9 @@ export function Account(props) { const accounts = useAccounts(); const payees = usePayees(); + const failedAccounts = useFailedAccounts(); + const syncingAccountIds = useSelector(state => state.account.accountsSyncing); + const navigate = useNavigate(); const [transactions, setTransactions] = useState([]); const [isSearching, setIsSearching] = useState(false); @@ -238,6 +242,8 @@ export function Account(props) { {...state} key={numberFormat + hideFraction} account={account} + pending={syncingAccountIds.includes(account.id)} + failed={failedAccounts && failedAccounts.has(account.id)} accounts={accounts} categories={categories.list} payees={state.payees} diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx index 2a45e9910bad4288c798440b4a6e9097a9ecaa7f..b73909fd337bae126f03fb64ea4b8d23436817c0 100644 --- a/packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx +++ b/packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx @@ -62,6 +62,8 @@ function TransactionSearchInput({ accountName, onSearch }) { export function AccountDetails({ account, + pending, + failed, prependTransactions, transactions, accounts, @@ -86,7 +88,34 @@ export function AccountDetails({ return ( <Page - title={account.name} + title={ + !account.bankId ? ( + account.name + ) : ( + <View + style={{ + flexDirection: 'row', + }} + > + <div + style={{ + margin: 'auto', + marginRight: 3, + width: 8, + height: 8, + borderRadius: 8, + backgroundColor: pending + ? theme.sidebarItemBackgroundPending + : failed + ? theme.sidebarItemBackgroundFailed + : theme.sidebarItemBackgroundPositive, + transition: 'transform .3s', + }} + /> + {account.name} + </View> + ) + } headerLeftContent={<MobileBackButton />} headerRightContent={ <ButtonLink diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx index 02df449b09372bbdc84e061a6376d4f7a5c5809c..9f75e6d9ba1b4050cbab49eb5506d7115af87fc2 100644 --- a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx +++ b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx @@ -6,6 +6,7 @@ import * as queries from 'loot-core/src/client/queries'; import { useAccounts } from '../../../hooks/useAccounts'; import { useCategories } from '../../../hooks/useCategories'; +import { useFailedAccounts } from '../../../hooks/useFailedAccounts'; import { useLocalPref } from '../../../hooks/useLocalPref'; import { useNavigate } from '../../../hooks/useNavigate'; import { useSetThemeColor } from '../../../hooks/useSetThemeColor'; @@ -54,7 +55,15 @@ function AccountHeader({ name, amount, style = {} }) { ); } -function AccountCard({ account, updated, getBalanceQuery, onSelect }) { +function AccountCard({ + account, + updated, + connected, + pending, + failed, + getBalanceQuery, + onSelect, +}) { return ( <View style={{ @@ -94,6 +103,22 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) { alignItems: 'center', }} > + {account.bankId && ( + <View + style={{ + backgroundColor: pending + ? theme.sidebarItemBackgroundPending + : failed + ? theme.sidebarItemBackgroundFailed + : theme.sidebarItemBackgroundPositive, + marginRight: '8px', + width: 8, + height: 8, + borderRadius: 8, + opacity: connected ? 1 : 0, + }} + /> + )} <TextOneLine style={{ ...styles.text, @@ -106,17 +131,6 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) { > {account.name} </TextOneLine> - {account.bankId && ( - <View - style={{ - backgroundColor: theme.noticeBackgroundDark, - marginLeft: '-23px', - width: 8, - height: 8, - borderRadius: 8, - }} - /> - )} </View> </View> <CellValue @@ -153,6 +167,8 @@ function AccountList({ onSelectAccount, onSync, }) { + const failedAccounts = useFailedAccounts(); + const syncingAccountIds = useSelector(state => state.account.accountsSyncing); const budgetedAccounts = accounts.filter(account => account.offbudget === 0); const offbudgetAccounts = accounts.filter(account => account.offbudget === 1); const noBackgroundColorStyle = { @@ -194,7 +210,10 @@ function AccountList({ <AccountCard account={acct} key={acct.id} - updated={updatedAccounts.includes(acct.id)} + updated={updatedAccounts && updatedAccounts.includes(acct.id)} + connected={!!acct.bank} + pending={syncingAccountIds.includes(acct.id)} + failed={failedAccounts && failedAccounts.has(acct.id)} getBalanceQuery={getBalanceQuery} onSelect={onSelectAccount} /> @@ -211,7 +230,10 @@ function AccountList({ <AccountCard account={acct} key={acct.id} - updated={updatedAccounts.includes(acct.id)} + updated={updatedAccounts && updatedAccounts.includes(acct.id)} + connected={!!acct.bank} + pending={syncingAccountIds.includes(acct.id)} + failed={failedAccounts && failedAccounts.has(acct.id)} getBalanceQuery={getBalanceQuery} onSelect={onSelectAccount} /> diff --git a/upcoming-release-notes/2476.md b/upcoming-release-notes/2476.md new file mode 100644 index 0000000000000000000000000000000000000000..bbc8cf67ff3accab6bbc3e4d9b0c72f9add11f8f --- /dev/null +++ b/upcoming-release-notes/2476.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [psybers] +--- + +Show account sync indicators when viewing accounts on mobile. \ No newline at end of file