fix: much better changelog menu

changelog.md

@@ -123,4 +123,5 @@
 
 ## 0.1.0
 
-- Added support for arrow keys to skip forward or backward (currently only by fixed 10 second interval)
+- **Features:**
+  - Added support for arrow keys to skip forward or backward (currently only by fixed 10 second interval)

src/dialogs/dialogs.css

@@ -2,19 +2,19 @@
 #bytm-cfg-dialog-bg,
 #bytm-cfg-menu-bg
 {
-  --bytm-dialog-height-max: 900px;
-  --bytm-dialog-width-max: 1000px;
-  --bytm-menu-height-max: 900px;
-  --bytm-menu-width-max: 1000px;
+  --bytm-dialog-height-max: 800px;
+  --bytm-dialog-width-max: 1150px;
+  --bytm-menu-height-max: 800px;
+  --bytm-menu-width-max: 1150px;
 }
 
 #bytm-changelog-dialog-bg,
 #bytm-changelog-menu-bg
 {
   --bytm-dialog-height-max: 800px;
-  --bytm-dialog-width-max: 800px;
+  --bytm-dialog-width-max: 900px;
   --bytm-menu-height-max: 800px;
-  --bytm-menu-width-max: 800px;
+  --bytm-menu-width-max: 900px;
 }
 
 #bytm-export-dialog-bg, #bytm-import-dialog-bg,

src/menu/menu_old.css

@@ -33,6 +33,11 @@
   background-color: var(--bytm-menu-bg);
 }
 
+.bytm-menu.top-aligned {
+  top: 0;
+  transform: translate(-50%, 40px);
+}
+
 .bytm-menu-body {
   padding: 20px;
 }
@@ -310,6 +315,22 @@
   overflow-y: auto;
 }
 
+.bytm-changelog-version-details:not(:first-of-type) {
+  margin-top: 15px;
+}
+
+.bytm-changelog-version-details summary h2 {
+  display: inline-block;
+}
+
+.bytm-changelog-version-details summary {
+  cursor: pointer;
+}
+
+.bytm-changelog-version-details summary::marker {
+  font-size: 2rem;
+}
+
 #bytm-export-menu-textarea, #bytm-import-menu-textarea {
   width: 100%;
   height: 150px;

src/menu/menu_old.ts

@@ -2,7 +2,7 @@ import { compress, decompress, debounce, isScrollable } from "@sv443-network/use
 import { defaultConfig, getFeatures, migrations, saveFeatures, setDefaultFeatures } from "../config";
 import { buildNumber, compressionFormat, host, mode, scriptInfo } from "../constants";
 import { featInfo, disableBeforeUnload } from "../features/index";
-import { error, getResourceUrl, info, log, resourceToHTMLString, warn, getLocale, hasKey, initTranslations, setLocale, t, parseMarkdown, getChangelogMd, compressionSupported } from "../utils";
+import { error, getResourceUrl, info, log, resourceToHTMLString, warn, getLocale, hasKey, initTranslations, setLocale, t, compressionSupported, getChangelogHtmlWithDetails } from "../utils";
 import { formatVersion } from "../config";
 import { emitSiteEvent, siteEvents } from "../siteEvents";
 import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types";
@@ -1262,7 +1262,7 @@ async function addChangelogMenu() {
 
   const menuContainer = document.createElement("div");
   menuContainer.ariaLabel = menuContainer.title = ""; // prevent bg title from propagating downwards
-  menuContainer.classList.add("bytm-menu");
+  menuContainer.classList.add("bytm-menu", "top-aligned");
   menuContainer.id = "bytm-changelog-menu";
 
   //#SECTION title bar
@@ -1299,16 +1299,6 @@ async function addChangelogMenu() {
 
   //#SECTION body
 
-  const getChangelogHtml = (async () => {
-    try {
-      const changelogMd = await getChangelogMd();
-      return await parseMarkdown(changelogMd);
-    }
-    catch(err) {
-      return `Error: ${err}`;
-    }
-  });
-
   const menuBodyElem = document.createElement("div");
   menuBodyElem.id = "bytm-changelog-menu-body";
   menuBodyElem.classList.add("bytm-menu-body");
@@ -1316,7 +1306,7 @@ async function addChangelogMenu() {
   const textElem = document.createElement("div");
   textElem.id = "bytm-changelog-menu-text";
   textElem.classList.add("bytm-markdown-container");
-  textElem.innerHTML = await getChangelogHtml();
+  textElem.innerHTML = await getChangelogHtmlWithDetails();
 
   //#SECTION finalize
 

src/utils/misc.ts

@@ -130,3 +130,33 @@ export function parseMarkdown(md: string) {
 export async function getChangelogMd() {
   return await (await fetchAdvanced(await getResourceUrl("doc-changelog"))).text();
 }
+
+/** Returns the changelog as HTML with a details element for each version */
+export async function getChangelogHtmlWithDetails() {
+  try {
+    const changelogMd = await getChangelogMd();
+    let changelogHtml = await parseMarkdown(changelogMd);
+
+    const getVerId = (verStr: string) => verStr.trim().replace(/[._#\s-]/g, "");
+
+    changelogHtml = changelogHtml.replace(/<div\s+class="split">\s*<\/div>\s*\n?\s*<br(\s\/)?>/gm, "</details>\n<br>\n<details class=\"bytm-changelog-version-details\">");
+
+    console.log("changelogHtml", changelogHtml);
+
+    const h2Matches = Array.from(changelogHtml.matchAll(/<h2(\s+id=".+")?>([\d\w\s.]+)<\/h2>/gm));
+    for(const match of h2Matches) {
+      const [fullMatch, , verStr] = match;
+      const verId = getVerId(verStr);
+      const h2Elem = `<h2 id="${verId}">${verStr}</h2>`;
+      const summaryElem = `<summary tab-index="0">${h2Elem}</summary>`;
+      changelogHtml = changelogHtml.replace(fullMatch, `${summaryElem}`);
+    }
+
+    changelogHtml = `<details class="bytm-changelog-version-details">${changelogHtml}</details>`;
+
+    return changelogHtml;
+  }
+  catch(err) {
+    return `Error: ${err}`;
+  }
+}