Improve federation management UI

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/mixins/relay.ts

@@ -1,6 +1,7 @@
 import { Component, Vue, Ref } from "vue-property-decorator";
 import { ActorType, IActor } from "@/types/actor";
 import { IFollower } from "@/types/actor/follower.model";
+import TimeAgo from "javascript-time-ago";
 
 @Component
 export default class RelayMixin extends Vue {
@@ -12,6 +13,15 @@ export default class RelayMixin extends Vue {
 
   perPage = 10;
 
+  timeAgoInstance: TimeAgo | null = null;
+
+  async mounted() {
+    const localeName = this.$i18n.locale;
+    const locale = await import(`javascript-time-ago/locale/${localeName}`);
+    TimeAgo.addLocale(locale);
+    this.timeAgoInstance = new TimeAgo(localeName);
+  }
+
   toggle(row: object) {
     this.table.toggleDetails(row);
   }
@@ -43,4 +53,11 @@ export default class RelayMixin extends Vue {
       (actor.preferredUsername === "relay" || actor.preferredUsername === actor.domain)
     );
   }
+
+  timeago(dateTime: string): string {
+    if (this.timeAgoInstance != null) {
+      return this.timeAgoInstance.format(new Date(dateTime));
+    }
+    return "";
+  }
 }