Merge branch 'feature/dayjs' into develop

package.json

@@ -14,8 +14,8 @@
     "bootstrap-icons": "^1.9.1",
     "bootstrap5-tags": "^1.6.1",
     "color-hash": "^2.0.2",
+    "dayjs": "^1.11.10",
     "modern-screenshot": "^4.4.30",
-    "moment": "^2.29.4",
     "prismjs": "^1.29.0",
     "rapidoc": "^9.3.4",
     "timezones-list": "^3.0.3",

server/ui-src/components/ListMessages.vue

@@ -1,7 +1,7 @@
 <script>
 import { mailbox } from '../stores/mailbox'
 import CommonMixins from '../mixins/CommonMixins'
-import moment from 'moment'
+import dayjs from 'dayjs'
 
 export default {
 	mixins: [
@@ -19,32 +19,26 @@ export default {
 	},
 
 	mounted() {
-		moment.updateLocale('en', {
-			relativeTime: {
-				future: "in %s",
-				past: "%s ago",
-				s: 'seconds',
-				ss: '%d secs',
-				m: "a minute",
-				mm: "%d mins",
-				h: "an hour",
-				hh: "%d hours",
-				d: "a day",
-				dd: "%d days",
-				w: "a week",
-				ww: "%d weeks",
-				M: "a month",
-				MM: "%d months",
-				y: "a year",
-				yy: "%d years"
-			}
-		})
+		let relativeTime = require('dayjs/plugin/relativeTime')
+		dayjs.extend(relativeTime)
+		this.refreshUI()
 	},
 
 	methods: {
+		refreshUI: function () {
+			let self = this
+			window.setTimeout(
+				() => {
+					self.$forceUpdate()
+					self.refreshUI()
+				},
+				30000
+			)
+		},
+
 		getRelativeCreated: function (message) {
 			let d = new Date(message.Created)
-			return moment(d).fromNow().toString()
+			return dayjs(d).fromNow()
 		},
 
 		getPrimaryEmailTo: function (message) {
@@ -112,7 +106,8 @@ export default {
 <template>
 	<template v-if="mailbox.messages && mailbox.messages.length">
 		<div class="list-group my-2">
-			<RouterLink v-for="message in mailbox.messages" :to="'/view/' + message.ID" :key="message.ID" :id="message.ID"
+			<RouterLink v-for="message in mailbox.messages" :to="'/view/' + message.ID" :key="message.ID"
+				:id="message.ID"
 				class="row gx-1 message d-flex small list-group-item list-group-item-action border-start-0 border-end-0"
 				:class="message.Read ? 'read' : '', isSelected(message.ID) ? 'selected' : ''"
 				v-on:click.ctrl="toggleSelected($event, message.ID)" v-on:click.shift="selectRange($event, message.ID)">
@@ -123,15 +118,15 @@ export default {
 					</div>
 					<div class="text-truncate d-lg-none privacy">
 						<span v-if="message.From" :title="'From: ' + message.From.Address">{{
-							message.From.Name ?
-							message.From.Name : message.From.Address
-						}}</span>
+		message.From.Name ?
+			message.From.Name : message.From.Address
+	}}</span>
 					</div>
 					<div class="text-truncate d-none d-lg-block privacy">
 						<b v-if="message.From" :title="'From: ' + message.From.Address">{{
-							message.From.Name ?
-							message.From.Name : message.From.Address
-						}}</b>
+		message.From.Name ?
+			message.From.Name : message.From.Address
+	}}</b>
 					</div>
 					<div class="d-none d-lg-block text-truncate text-muted small privacy">
 						{{ getPrimaryEmailTo(message) }}

server/ui-src/mixins/CommonMixins.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import ColorHash from 'color-hash'
 import { Modal, Offcanvas } from 'bootstrap'
 
@@ -45,11 +45,11 @@ export default {
 		},
 
 		messageDate: function (d) {
-			return moment(d).format('ddd, D MMM YYYY, h:mm a')
+			return dayjs(d).format('ddd, D MMM YYYY, h:mm a')
 		},
 
 		secondsToRelative: function (d) {
-			return moment().subtract(d, 'seconds').fromNow()
+			return dayjs().subtract(d, 'seconds').fromNow()
 		},
 
 		tagEncodeURI: function (tag) {