Add changelog popup

app/index.css

@@ -835,14 +835,6 @@ textarea {
   margin-bottom: 12px;
 }
 
-.chart-properties ul .label {
-  font-weight: bold;
-}
-
-.chart-properties ul > *:last-child {
-  flex: 1;
-}
-
 div.inlineEdit[contenteditable="true"] {
   min-width: 8px;
   text-align: right;
@@ -3148,3 +3140,24 @@ input[type="color"] {
   border-radius: 5px;
   overflow: hidden;
 }
+
+.markdown-container {
+  background-color: var(--secondary-bg);
+  border: 1px solid var(--secondary-border);
+  border-radius: 5px 5px 0 0;
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+  padding: 15px;
+}
+
+.markdown-container hr {
+  border: 1px solid var(--secondary-border);
+  margin: 5px 0px;
+}
+
+.markdown-container ul {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 30px;
+}

app/src/App.ts

@@ -24,6 +24,7 @@ import { AppUpdatePopup } from "./gui/popup/update/AppUpdatePopup"
 import { CoreUpdatePopup } from "./gui/popup/update/CoreUpdatePopup"
 import { OfflineUpdatePopup } from "./gui/popup/update/OfflineUpdatePopup"
 import { DebugWidget } from "./gui/widget/DebugWidget"
+import { ChangelogWindow } from "./gui/window/ChangelogWindow"
 import { DirectoryWindow } from "./gui/window/DirectoryWindow"
 import { InitialWindow } from "./gui/window/InitialWindow"
 import { WindowManager } from "./gui/window/WindowManager"
@@ -55,7 +56,7 @@ declare global {
   }
 }
 
-interface Version {
+interface AppVersion {
   version: string
   type: string
   date: number
@@ -68,6 +69,12 @@ interface Version {
   changelog: string[]
 }
 
+interface CoreVersion {
+  version: string
+  date: number
+  changelog: string
+}
+
 export class App {
   options = Options
   events = EventHandler
@@ -465,7 +472,7 @@ export class App {
     } else if (process.platform == "linux") os = "linux"
     fetch("/smeditor/assets/app/versions.json")
       .then(data => data.json())
-      .then((versions: Version[]) => {
+      .then((versions: AppVersion[]) => {
         versions = versions.sort((a, b) => {
           if (BUILD_TYPES[a.type] != BUILD_TYPES[b.type])
             return BUILD_TYPES[b.type] - BUILD_TYPES[a.type]
@@ -478,7 +485,7 @@ export class App {
         ) {
           AppUpdatePopup.open(
             version.version,
-            version.downloads[os as keyof Version["downloads"]]
+            version.downloads[os as keyof AppVersion["downloads"]]
           )
         }
       })
@@ -495,6 +502,21 @@ export class App {
         console.log("Offline use ready")
       },
     })
+    fetch("/smeditor/assets/app/changelog.json")
+      .then(data => data.json())
+      .then((versions: CoreVersion[]) => {
+        const version = versions[0]
+        const localVersion = localStorage.getItem("coreVersion")
+        if (localVersion !== null && semver.lt(localVersion, version.version)) {
+          this.windowManager.openWindow(
+            new ChangelogWindow(this, {
+              version: version.version,
+              markdown: version.changelog,
+            })
+          )
+        }
+        localStorage.setItem("coreVersion", version.version)
+      })
   }
 }
 

app/src/gui/window/ChangelogWindow.ts

@@ -0,0 +1,57 @@
+import markdownit from "markdown-it"
+import { App } from "../../App"
+import { Window } from "./Window"
+
+interface ChangelogOptions {
+  version: string
+  markdown: string
+}
+
+export class ChangelogWindow extends Window {
+  app: App
+  opt: ChangelogOptions
+
+  constructor(app: App, options: ChangelogOptions) {
+    super({
+      title: "Changelog",
+      width: 600,
+      height: 500,
+      win_id: "changelog",
+    })
+    this.app = app
+    this.opt = options
+    this.initView()
+  }
+
+  initView(): void {
+    this.viewElement.replaceChildren()
+    const padding = document.createElement("div")
+    padding.classList.add("padding")
+
+    const mdContainer = document.createElement("div")
+    mdContainer.classList.add("markdown-container")
+
+    const result = markdownit().render(
+      `# ${this.opt.version}\n---\n` + this.opt.markdown
+    )
+
+    mdContainer.innerHTML = result
+
+    padding.appendChild(mdContainer)
+
+    const menu_options = document.createElement("div")
+    menu_options.classList.add("menu-options")
+    menu_options.style.justifyContent = "flex-end"
+
+    const okButton = document.createElement("button")
+    okButton.innerText = "Close"
+    okButton.onclick = () => {
+      this.closeWindow()
+    }
+    okButton.classList.add("confirm")
+    menu_options.append(okButton)
+
+    padding.appendChild(menu_options)
+    this.viewElement.appendChild(padding)
+  }
+}