From dd80d49989060f8bcc859ef85eee4eaf4c023c0c Mon Sep 17 00:00:00 2001
From: Cooldude2606 <25043174+Cooldude2606@users.noreply.github.com>
Date: Sun, 31 May 2026 03:52:42 +0100
Subject: [PATCH] Add viewable changelog
---
packages/web_ui/global.d.ts | 5 ++
packages/web_ui/package.json | 1 +
.../web_ui/src/components/ChangeLogModal.tsx | 63 +++++++++++++++++++
packages/web_ui/src/components/SiteLayout.tsx | 13 ++--
packages/web_ui/webpack.common.js | 4 ++
pnpm-workspace.yaml | 1 +
6 files changed, 81 insertions(+), 6 deletions(-)
create mode 100644 packages/web_ui/src/components/ChangeLogModal.tsx
diff --git a/packages/web_ui/global.d.ts b/packages/web_ui/global.d.ts
index 9ab63040..39e6ec20 100644
--- a/packages/web_ui/global.d.ts
+++ b/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;
diff --git a/packages/web_ui/package.json b/packages/web_ui/package.json
index 514da6d6..769e221f 100644
--- a/packages/web_ui/package.json
+++ b/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",
diff --git a/packages/web_ui/src/components/ChangeLogModal.tsx b/packages/web_ui/src/components/ChangeLogModal.tsx
new file mode 100644
index 00000000..b1d08b32
--- /dev/null
+++ b/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(//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 (
+ <>
+
+ setOpen(true)}
+ >
+ {children}
+
+
+
+ setOpen(false)}
+ footer={null}
+ width={800}
+ >
+
+
+ {cleanedChangelog}
+
+
+
+
+ );
+}
diff --git a/packages/web_ui/src/components/SiteLayout.tsx b/packages/web_ui/src/components/SiteLayout.tsx
index f430f801..62ee2ab4 100644
--- a/packages/web_ui/src/components/SiteLayout.tsx
+++ b/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["items"][number];
@@ -145,7 +146,7 @@ export default function SiteLayout() {
Clusterio
- {webUiPackage.version}
+