From c17cd2852580f4a6bab6f7de5282cb585f0dc02d Mon Sep 17 00:00:00 2001
From: Matt Fiddaman <github@m.fiddaman.uk>
Date: Mon, 3 Mar 2025 21:58:53 +0000
Subject: [PATCH] Show the last bank sync in plain language instead of
 timestamp (#4523)

* use relative time strings for last bank sync

* note
---
 .../src/components/banksync/AccountRow.tsx      | 17 ++++++-----------
 packages/loot-core/src/shared/util.ts           | 16 ++++++++++++++--
 upcoming-release-notes/4523.md                  |  6 ++++++
 3 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 upcoming-release-notes/4523.md

diff --git a/packages/desktop-client/src/components/banksync/AccountRow.tsx b/packages/desktop-client/src/components/banksync/AccountRow.tsx
index e98d2242f9..f0df6fd6f1 100644
--- a/packages/desktop-client/src/components/banksync/AccountRow.tsx
+++ b/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
diff --git a/packages/loot-core/src/shared/util.ts b/packages/loot-core/src/shared/util.ts
index 39bf137bac..3b08370d02 100644
--- a/packages/loot-core/src/shared/util.ts
+++ b/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;
 }
diff --git a/upcoming-release-notes/4523.md b/upcoming-release-notes/4523.md
new file mode 100644
index 0000000000..781ba9a997
--- /dev/null
+++ b/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