Merge branch 'feature/dayjs' into develop

package-lock.json

@@ -13,8 +13,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",
@@ -1324,6 +1324,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -1941,14 +1946,6 @@
       "resolved": "https://registry.npmjs.org/modern-screenshot/-/modern-screenshot-4.4.39.tgz",
       "integrity": "sha512-p+I4yLZUDnoJMa5zoi+71nLQmoLQ6WRU4W8vZu1BZk2PlIYOz5mGnj9/7t2lGWKYeOr4zo6pajhY0/9TS5Zcdw=="
     },
-    "node_modules/moment": {
-      "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/nan": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",

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', {
+		let relativeTime = require('dayjs/plugin/relativeTime')
-			relativeTime: {
+		dayjs.extend(relativeTime)
-				future: "in %s",
+		this.refreshUI()
-				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"
-			}
-		})
 	},
 
 	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.Name : message.From.Address
+			message.From.Name : message.From.Address
-						}}</span>
+	}}</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.Name : message.From.Address
+			message.From.Name : message.From.Address
-						}}</b>
+	}}</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) {