Update date markers vith vue instead of jQuery.

client/components/App.vue

@@ -93,6 +93,8 @@
 </template>
 
 <script>
+const moment = require("moment");
+
 import {throttle} from "lodash";
 
 import NetworkList from "./NetworkList.vue";
@@ -116,12 +118,26 @@ export default {
 		}, 100);
 
 		window.addEventListener("resize", this.debouncedResize, {passive: true});
+
+		// Emit a daychange event every time the day changes so date markers know when to update themselves
+		const emitDayChange = () => {
+			this.$root.$emit("daychange");
+			// This should always be 24h later but re-computing exact value just in case
+			this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
+		};
+
+		this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
 	},
 	beforeDestroy() {
 		window.removeEventListener("resize", this.debouncedResize);
+		clearTimeout(this.dayChangeTimeout);
 	},
 	methods: {
 		isPublic: () => document.body.classList.contains("public"),
+		msUntilNextDay() {
+			// Compute how many milliseconds are remaining until the next day starts
+			return moment().add(1, "day").startOf("day") - moment();
+		},
 	},
 };
 </script>

client/components/DateMarker.vue

@@ -0,0 +1,38 @@
+<template>
+	<div
+		:data-time="message.time"
+		:aria-label="message.time | localedate"
+		class="date-marker-container tooltipped tooltipped-s">
+		<div class="date-marker">
+			<span
+				:data-label="message.time | friendlydate"
+				class="date-marker-text" />
+		</div>
+	</div>
+</template>
+
+<script>
+const moment = require("moment");
+
+export default {
+	name: "DateMarker",
+	props: {
+		message: Object,
+	},
+	mounted() {
+		const hoursPassed = moment.duration(moment().diff(moment(this.message.time))).asHours();
+
+		if (hoursPassed < 48) {
+			this.$root.$on("daychange", this.dayChange);
+		}
+	},
+	beforeDestroy() {
+		this.$root.$off("daychange", this.dayChange);
+	},
+	methods: {
+		dayChange() {
+			this.$forceUpdate();
+		},
+	},
+};
+</script>

client/components/MessageList.vue

@@ -19,18 +19,10 @@
 			aria-relevant="additions"
 			@copy="onCopy">
 			<template v-for="(message, id) in condensedMessages">
-				<div
+				<DateMarker
 					v-if="shouldDisplayDateMarker(message, id)"
 					:key="message.id + '-date'"
-					:data-time="message.time"
+					:message="message" />
-					:aria-label="message.time | localedate"
-					class="date-marker-container tooltipped tooltipped-s">
-					<div class="date-marker">
-						<span
-							:data-label="message.time | friendlydate"
-							class="date-marker-text" />
-					</div>
-				</div>
 				<div
 					v-if="shouldDisplayUnreadMarker(id)"
 					:key="message.id + '-unread'"
@@ -78,12 +70,14 @@ const clipboard = require("../js/clipboard");
 import socket from "../js/socket";
 import Message from "./Message.vue";
 import MessageCondensed from "./MessageCondensed.vue";
+import DateMarker from "./DateMarker.vue";
 
 export default {
 	name: "MessageList",
 	components: {
 		Message,
 		MessageCondensed,
+		DateMarker,
 	},
 	props: {
 		settings: Object,

client/js/lounge.js

@@ -2,7 +2,6 @@
 
 // vendor libraries
 const $ = require("jquery");
-const moment = require("moment");
 
 // our libraries
 const socket = require("./socket");
@@ -12,7 +11,6 @@ const {vueApp, findChannel} = require("./vue");
 window.vueMounted = () => {
 	require("./socket-events");
 	const slideoutMenu = require("./slideout");
-	const templates = require("../views");
 	const contextMenuFactory = require("./contextMenuFactory");
 	const storage = require("./localStorage");
 	const utils = require("./utils");
@@ -211,26 +209,6 @@ window.vueMounted = () => {
 		utils.synchronizeNotifiedState();
 	});
 
-	// Compute how many milliseconds are remaining until the next day starts
-	function msUntilNextDay() {
-		return moment().add(1, "day").startOf("day") - moment();
-	}
-
-	// Go through all Today/Yesterday date markers in the DOM and recompute their
-	// labels. When done, restart the timer for the next day.
-	function updateDateMarkers() {
-		$(".date-marker-text[data-label='Today'], .date-marker-text[data-label='Yesterday']")
-			.closest(".date-marker-container")
-			.each(function() {
-				$(this).replaceWith(templates.date_marker({time: $(this).data("time")}));
-			});
-
-		// This should always be 24h later but re-computing exact value just in case
-		setTimeout(updateDateMarkers, msUntilNextDay());
-	}
-
-	setTimeout(updateDateMarkers, msUntilNextDay());
-
 	window.addEventListener("popstate", (e) => {
 		const {state} = e;