From f8922311cbbe1008ee261051eca717630de9354f Mon Sep 17 00:00:00 2001
From: Rotzbua <Rotzbua@users.noreply.github.com>
Date: Tue, 27 Jun 2023 11:21:40 +0200
Subject: [PATCH 1/2] fix(webapp): remove unused dependency

---
 www/webapp/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/www/webapp/package.json b/www/webapp/package.json
index 02a747313..648e031fc 100644
--- a/www/webapp/package.json
+++ b/www/webapp/package.json
@@ -14,7 +14,6 @@
     "@mdi/js": "~7.2.96",
     "axios": "^1.4.0",
     "core-js": "^3.27.1",
-    "javascript-time-ago": "^2.5.9",
     "pinia": "^2.0.30",
     "vue": "~2.7.14",
     "vue-clipboard2": "^0.3.3",

From 84ad7eb34a727001a09a0e3d6a8110000afe4955 Mon Sep 17 00:00:00 2001
From: Rotzbua <Rotzbua@users.noreply.github.com>
Date: Tue, 27 Jun 2023 11:21:40 +0200
Subject: [PATCH 2/2] feat(webapp): use `date-fns` directly

No need for an extra wrapper as dependency.
---
 www/webapp/package.json                     |  2 +-
 www/webapp/src/components/Field/TimeAgo.vue | 24 ++++++++++++++++++---
 www/webapp/src/main.js                      |  2 --
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/www/webapp/package.json b/www/webapp/package.json
index 648e031fc..ea5007562 100644
--- a/www/webapp/package.json
+++ b/www/webapp/package.json
@@ -14,11 +14,11 @@
     "@mdi/js": "~7.2.96",
     "axios": "^1.4.0",
     "core-js": "^3.27.1",
+    "date-fns": "^2.30.0",
     "pinia": "^2.0.30",
     "vue": "~2.7.14",
     "vue-clipboard2": "^0.3.3",
     "vue-router": "~3.6.5",
-    "vue-timeago": "^5.1.3",
     "vuelidate": "^0.7.7",
     "vuetify": "^2.6.13"
   },
diff --git a/www/webapp/src/components/Field/TimeAgo.vue b/www/webapp/src/components/Field/TimeAgo.vue
index 9164fd2ab..3105ad610 100644
--- a/www/webapp/src/components/Field/TimeAgo.vue
+++ b/www/webapp/src/components/Field/TimeAgo.vue
@@ -1,11 +1,15 @@
 <template>
   <div
-          class="my-1 py-5"
-          :title="value"
-  ><timeago v-if="value" :datetime="value"></timeago><span v-else>never</span></div>
+      class="my-1 py-5"
+      :title="value"
+  >
+    <span v-text="formattedValue"></span>
+  </div>
 </template>
 
 <script>
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+
 export default {
   name: 'TimeAgo',
   props: {
@@ -13,7 +17,21 @@ export default {
       default: '',
       type: String,
     },
+    defaultText: {
+      default: 'never',
+      type: String,
+    },
   },
+  computed: {
+    formattedValue() {
+      const inputTime = this.value;
+      if(!inputTime)
+        return this.defaultText
+
+      const parsedTime = new Date(inputTime);
+      return formatDistanceToNow(parsedTime, {addSuffix: true});
+    }
+  }
 };
 </script>
 
diff --git a/www/webapp/src/main.js b/www/webapp/src/main.js
index 431fba889..dd10330a2 100644
--- a/www/webapp/src/main.js
+++ b/www/webapp/src/main.js
@@ -11,7 +11,6 @@ import "@fontsource/roboto/400-italic.css" /* regular-italic */
 import "@fontsource/roboto/500.css" /* medium */
 import "@fontsource/roboto/700.css" /* bold */
 import '@mdi/font/css/materialdesignicons.css'
-import VueTimeago from 'vue-timeago'
 import {createPinia, PiniaVuePlugin} from "pinia";
 
 
@@ -19,7 +18,6 @@ Vue.config.productionTip = false
 VueClipboard.config.autoSetContainer = true
 Vue.use(VueClipboard)
 Vue.use(Vuelidate)
-Vue.use(VueTimeago, {})
 // `Pinia` replaces `vuex` as store.
 Vue.use(PiniaVuePlugin)
 const pinia = createPinia()