Add viewable changelog

packages/web_ui/global.d.ts

@@ -3,6 +3,11 @@ declare module "*.png" {
 	export default value;
 }
 
+declare module "*.md" {
+	const value: string;
+	export default value;
+}
+
 declare const webRoot: string;
 declare const staticRoot: string;
 

packages/web_ui/package.json

@@ -37,6 +37,7 @@
 		"rc-field-form": "^1.37.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-markdown": "catalog:",
 		"react-router-dom": "^6.29.0",
 		"stream-browserify": "^3.0.0",
 		"style-loader": "^3.3.3",

packages/web_ui/src/components/ChangeLogModal.tsx

@@ -0,0 +1,63 @@
+import React, { useState, ReactNode } from "react";
+import { Modal, Tooltip } from "antd";
+import ReactMarkdown from "react-markdown";
+
+import webUiPackage from "../../package.json";
+import changelog from "../../../../CHANGELOG.md";
+
+const cleanedChangelog = changelog
+	.replace(/<!--[\s\S]*?-->/g, "") // remove comments
+	.replace(/^#\s+Changelog\s*\n?/i, ""); // remove top-level title
+
+type Props = {
+	/** Optional tooltip text */
+	tooltip?: string;
+	/** Optional class for the clickable wrapper */
+	className?: string;
+	/** Custom clickable content */
+	children?: ReactNode;
+};
+
+/**
+ * Displays a clickable element which opens a modal containing the changelog.
+ * Defaults to showing the current version if no children are provided.
+ */
+export default function ChangeLogModal({
+	tooltip = "View changelog",
+	className = "site-version",
+	children = webUiPackage.version,
+}: Props) {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Tooltip
+				title={tooltip}
+				placement="bottom"
+				align={{ offset: [0, -10] }}
+			>
+				<span
+					className={className}
+					style={{ cursor: "pointer" }}
+					onClick={() => setOpen(true)}
+				>
+					{children}
+				</span>
+			</Tooltip>
+
+			<Modal
+				title="Changelog"
+				open={open}
+				onCancel={() => setOpen(false)}
+				footer={null}
+				width={800}
+			>
+				<div style={{ maxHeight: "70vh", overflow: "auto" }}>
+					<ReactMarkdown>
+						{cleanedChangelog}
+					</ReactMarkdown>
+				</div>
+			</Modal>
+		</>
+	);
+}

packages/web_ui/src/components/SiteLayout.tsx

@@ -1,18 +1,19 @@
 import React, { Fragment, useContext, useEffect, useState } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { Button, Dropdown, Layout, Menu, MenuProps, Tooltip } from "antd";
-import UserOutlined from "@ant-design/icons/UserOutlined";
-import webUiPackage from "../../package.json";
+import { UserOutlined, DownloadOutlined } from "@ant-design/icons";
 
-import { useAccount } from "../model/account";
 import ErrorBoundary from "./ErrorBoundary";
 import ErrorPage from "./ErrorPage";
 import ControlContext from "./ControlContext";
+import ChangeLogModal from "./ChangeLogModal";
+
 import { pages } from "../pages";
-import { DraggingContext } from "../model/is_dragging";
 import { saveJson } from "../util/save_file";
+import { useAccount } from "../model/account";
+import { DraggingContext } from "../model/is_dragging";
+
 import { ControlConfig } from "@clusterio/lib";
-import { DownloadOutlined } from "@ant-design/icons";
 
 type MenuItem = Required<MenuProps>["items"][number];
 
@@ -145,7 +146,7 @@ export default function SiteLayout() {
 			<Header className="header">
 				<div className="site-logo" />
 				<span className="site-name">Clusterio</span>
-				<span className="site-version">{webUiPackage.version}</span>
+				<ChangeLogModal />
 				<Menu
 					theme="dark"
 					mode="horizontal"

packages/web_ui/webpack.common.js

@@ -114,6 +114,10 @@ module.exports = (env = {}, argv = {}) => ({
 				test: /\.png$/,
 				type: "asset/resource",
 			},
+			{
+				test: /\.md$/,
+				type: "asset/source",
+			},
 		],
 	},
 	resolve: {

pnpm-workspace.yaml

@@ -22,6 +22,7 @@ catalog:
   jszip: ^3.10.1
   react: ^18.2.0
   react-dom: ^18.2.0
+  react-markdown: ^10.1.0
   react-router-dom: ^6.29.0
   set-blocking: ^2.0.0
   typescript: ^5.7.3