feature: Show account sync indicators when viewing accounts on mobile (#2476)

* cleanup: Move account sync indicators to the left on mobile

* cleanup: account sync indicators on mobile should show pending/failed syncs

* feature: show account sync indicator when viewing account on mobile

* fix lint issues

* add release note

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}

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

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}
             />

upcoming-release-notes/2476.md

+---
+category: Enhancements
+authors: [psybers]
+---
+
+Show account sync indicators when viewing accounts on mobile.
\ No newline at end of file