Implement changelog in Vue.

client/components/Windows/Changelog.vue

@@ -4,21 +4,32 @@
 			<SidebarToggle />
 		</div>
 		<div class="container">
-			<a id="back-to-help" href="#" data-target="Help">« Help</a>
+			<a id="back-to-help" href="#" data-target="#help" data-component="Help">« Help</a>
 
-			<template v-if="version">
+			<template
-				<h1 class="title">Release notes for {{ version }}</h1>
+				v-if="
+					$store.state.versionData &&
+						$store.state.versionData.current &&
+						$store.state.versionData.current.version
+				"
+			>
+				<h1 class="title">
+					Release notes for {{ $store.state.versionData.current.version }}
+				</h1>
 
-				<template v-if="changelog">
+				<template v-if="$store.state.versionData.current.changelog">
 					<h3>Introduction</h3>
-					<div class="changelog-text">{{ changelog }}</div>
+					<div
+						class="changelog-text"
+						v-html="$store.state.versionData.current.changelog"
+					></div>
 				</template>
 				<template v-else>
 					<p>Unable to retrieve releases from GitHub.</p>
 					<p>
 						<a
 							:href="
-								`https://github.com/thelounge/thelounge/releases/tag/v${version}`
+								`https://github.com/thelounge/thelounge/releases/tag/v${$root.serverConfiguration.version}`
 							"
 							target="_blank"
 							rel="noopener"
@@ -40,6 +51,10 @@ export default {
 	components: {
 		SidebarToggle,
 	},
-	mounted() {},
+	mounted() {
+		if (!this.$store.state.versionData) {
+			socket.emit("changelog");
+		}
+	},
 };
 </script>

client/components/Windows/Help.vue

@@ -11,7 +11,8 @@
 					v{{ $root.serverConfiguration.version }} (<a
 						id="view-changelog"
 						href="#"
-						data-target="Changelog"
+						data-target="#changelog"
+						data-component="Changelog"
 						>release notes</a
 					>)
 				</small>

client/js/lounge.js

@@ -171,8 +171,7 @@ window.vueMounted = () => {
 	};
 
 	sidebar.on("click", ".chan, button", openWindow);
-	$("#help").on("click", "#view-changelog, #back-to-help", openWindow);
+	$("#windows").on("click", "#view-changelog, #back-to-help", openWindow);
-	$("#changelog").on("click", "#back-to-help", openWindow);
 
 	$(document).on("visibilitychange focus click", () => {
 		utils.synchronizeNotifiedState();