Show the last bank sync in plain language instead of timestamp (#4523)

* use relative time strings for last bank sync

* note

packages/desktop-client/src/components/banksync/AccountRow.tsx

@@ -3,20 +3,13 @@ import { Trans } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 
-import { format } from 'loot-core/src/shared/months';
+import { tsToRelativeTime } from 'loot-core/shared/util';
 import { type AccountEntity } from 'loot-core/src/types/models';
 
-import { useDateFormat } from '../../hooks/useDateFormat';
+import { useGlobalPref } from '../../hooks/useGlobalPref';
 import { theme } from '../../style';
 import { Row, Cell } from '../table';
 
-const tsToString = (ts: string | null, dateFormat: string) => {
-  if (!ts) return 'Unknown';
-
-  const parsed = new Date(parseInt(ts, 10));
-  return `${format(parsed, dateFormat)} ${format(parsed, 'HH:mm:ss')}`;
-};
-
 type AccountRowProps = {
   account: AccountEntity;
   hovered: boolean;
@@ -28,9 +21,11 @@ export const AccountRow = memo(
   ({ account, hovered, onHover, onAction }: AccountRowProps) => {
     const backgroundFocus = hovered;
 
-    const dateFormat = useDateFormat() || 'MM/dd/yyyy';
+    const [language = 'en-US'] = useGlobalPref('language');
 
-    const lastSync = tsToString(account.last_sync, dateFormat);
+    const lastSync = tsToRelativeTime(account.last_sync, language, {
+      capitalize: true,
+    });
 
     return (
       <Row

packages/loot-core/src/shared/util.ts

@@ -487,7 +487,13 @@ export function sortByKey<T>(arr: T[], key: keyof T): T[] {
 
 // Date utilities
 
-export function tsToRelativeTime(ts: string | null, language: string): string {
+export function tsToRelativeTime(
+  ts: string | null,
+  language: string,
+  options: {
+    capitalize: boolean;
+  } = { capitalize: false },
+): string {
   if (!ts) return 'Unknown';
 
   const parsed = new Date(parseInt(ts, 10));
@@ -495,5 +501,11 @@ export function tsToRelativeTime(ts: string | null, language: string): string {
     locales[language.replace('-', '') as keyof typeof locales] ??
     locales['enUS'];
 
-  return formatDistanceToNow(parsed, { addSuffix: true, locale });
+  let distance = formatDistanceToNow(parsed, { addSuffix: true, locale });
+
+  if (options.capitalize) {
+    distance = distance.charAt(0).toUpperCase() + distance.slice(1);
+  }
+
+  return distance;
 }

upcoming-release-notes/4523.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [matt-fidd]
+---
+
+Show the last bank sync in plain language instead of timestamp