From 3c02a75487404e952326f3cf0fdf3f47525fdd32 Mon Sep 17 00:00:00 2001
From: Nico <nicoschmdt@proton.me>
Date: Wed, 15 Apr 2026 19:28:14 -0300
Subject: [PATCH] frontend: use only date-fns to display time for the user

---
 core/frontend/package.json                                | 2 --
 core/frontend/src/components/ethernet/InterfaceCard.vue   | 8 ++------
 .../src/components/version-chooser/VersionCard.vue        | 8 ++------
 3 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/core/frontend/package.json b/core/frontend/package.json
index 072869771d..06f9027812 100644
--- a/core/frontend/package.json
+++ b/core/frontend/package.json
@@ -33,7 +33,6 @@
     "@types/numeral": "^2.0.5",
     "@types/semver": "^7.3.9",
     "@types/semver-stable": "^3.0.0",
-    "@types/timeago": "^1.6.0",
     "@types/uuid": "^9.0.0",
     "ansi_up": "^5.2.1",
     "apexcharts": "^3.36.3",
@@ -51,7 +50,6 @@
     "http-status-codes": "^2.2.0",
     "image-js": "^0.35.3",
     "is-ip": "^5.0.0",
-    "javascript-time-ago": "^2.3.11",
     "jsoneditor": "^9.10.0",
     "lodash": "^4.17.21",
     "marked": "^4.1.1",
diff --git a/core/frontend/src/components/ethernet/InterfaceCard.vue b/core/frontend/src/components/ethernet/InterfaceCard.vue
index e2f59f5edb..6a85ee1358 100644
--- a/core/frontend/src/components/ethernet/InterfaceCard.vue
+++ b/core/frontend/src/components/ethernet/InterfaceCard.vue
@@ -177,8 +177,7 @@
 </template>
 
 <script lang="ts">
-import TimeAgo from 'javascript-time-ago'
-import en from 'javascript-time-ago/locale/en.json'
+import { formatDistanceToNow } from 'date-fns'
 import Vue, { PropType } from 'vue'
 
 import beacon from '@/store/beacon'
@@ -191,9 +190,6 @@ import AddressCreationDialog from './AddressCreationDialog.vue'
 import AddressDeletionDialog from './AddressDeletionDialog.vue'
 import DHCPServerDialog from './DHCPServerDialog.vue'
 
-TimeAgo.addDefaultLocale(en)
-const timeAgo = new TimeAgo('en-US')
-
 export default Vue.extend({
   name: 'InterfaceCard',
   components: {
@@ -375,7 +371,7 @@ export default Vue.extend({
         return 'Expired'
       }
 
-      return timeAgo.format(expiresAt, 'round')
+      return formatDistanceToNow(expiresAt, { addSuffix: true })
     },
     getLeaseExpiryClass(lease: DHCPServerLease): string {
       const now = new Date()
diff --git a/core/frontend/src/components/version-chooser/VersionCard.vue b/core/frontend/src/components/version-chooser/VersionCard.vue
index b5f1c82a53..4a0ccb7485 100644
--- a/core/frontend/src/components/version-chooser/VersionCard.vue
+++ b/core/frontend/src/components/version-chooser/VersionCard.vue
@@ -132,8 +132,7 @@
 </template>
 
 <script lang="ts">
-import TimeAgo from 'javascript-time-ago'
-import en from 'javascript-time-ago/locale/en.json'
+import { formatDistanceToNow } from 'date-fns'
 import Vue, { PropType } from 'vue'
 
 import WarningDialog from '@/components/common/WarningDialog.vue'
@@ -145,9 +144,6 @@ import { DEFAULT_REMOTE_IMAGE, getFactoryVersion } from '@/utils/version_chooser
 
 import SpinningLogo from '../common/SpinningLogo.vue'
 
-TimeAgo.addDefaultLocale(en)
-const timeAgo = new TimeAgo('en-US')
-
 export default Vue.extend({
   name: 'VersionCard',
   components: {
@@ -253,7 +249,7 @@ export default Vue.extend({
   },
   methods: {
     asTimeAgo(value: string) {
-      return timeAgo.format(new Date(Date.parse(value)), 'round')
+      return formatDistanceToNow(new Date(Date.parse(value)), { addSuffix: true })
     },
     shortSha(value: string) {
       if (value === null) {