feat(ui): add changelog button and modal, repositioned to header end

steps/index.html

@@ -256,6 +256,10 @@
       <button id="shortcuts-btn" type="button"
         class="bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 border border-blue-300 dark:border-blue-600 shadow-sm hover:bg-blue-200 dark:hover:bg-blue-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all text-center">
         Keyboard<br>Shortcuts
+      </button>
+      <button id="changelog-btn" type="button"
+        class="bg-cyan-100 dark:bg-cyan-700 text-cyan-800 dark:text-cyan-100 border border-cyan-300 dark:border-cyan-600 shadow-sm hover:bg-cyan-200 dark:hover:bg-cyan-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all text-center">
+        What's<br>New?
       </button>
             <button id="theme-toggle" type="button" class="bg-indigo-900 dark:bg-amber-100 text-indigo-100 dark:text-amber-800 border border-indigo-700 dark:border-amber-300 shadow-sm hover:bg-indigo-800 dark:hover:bg-amber-200 active:scale-95 active:shadow-inner flex flex-row items-center gap-2 rounded-lg text-xs px-4 py-3.5 transition-all">
               <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@@ -650,6 +654,27 @@
       <iframe id="codebase-iframe" src="annex/code-base-overview.html" class="flex-grow w-full border-0 rounded-b-2xl" style="min-height: 400px;"></iframe>
       </div>
       </div>
+
+      <!-- CHANGELOG MODAL -->
+      <div id="changelog-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-80 backdrop-blur-sm p-4">
+      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full h-full mx-8 my-4 relative flex flex-col">
+
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-1 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10 rounded-t-2xl">
+        <div class="flex items-center gap-3">
+          <span class="text-3xl">🚀</span>
+          <div>
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Changelog</h2>
+          </div>
+        </div>
+        <button id="changelog-modal-close-btn"
+          class="px-6 py-2 rounded-lg bg-cyan-600 text-white hover:bg-cyan-700 font-semibold text-lg">Close</button>
+      </div>
+
+      <!-- Iframe Content -->
+      <iframe id="changelog-iframe" src="annex/Changelog.html" class="flex-grow w-full border-0 rounded-b-2xl" style="min-height: 400px;"></iframe>
+      </div>
+      </div>
   <div id="modal-container" class="fixed inset-0 z-50 flex items-center justify-center hidden">
     <div id="modal-overlay" class="absolute inset-0 bg-black bg-opacity-50"></div>
     <div id="modal-content"

steps/src/dom.js

@@ -110,6 +110,9 @@ export const guideModalCloseBtn = document.getElementById("guide-modal-close-btn
 export const codebaseBtn = document.getElementById("codebase-btn");
 export const codebaseModal = document.getElementById("codebase-modal");
 export const codebaseModalCloseBtn = document.getElementById("codebase-modal-close-btn");
+export const changelogBtn = document.getElementById("changelog-btn");
+export const changelogModal = document.getElementById("changelog-modal");
+export const changelogModalCloseBtn = document.getElementById("changelog-modal-close-btn");
 export const rangeSlider = document.getElementById("range-slider");
 export const rangeValueDisplay = document.getElementById("range-value-display");
 

steps/src/ui.js

@@ -42,6 +42,9 @@ import {
   codebaseBtn,
   codebaseModal,
   codebaseModalCloseBtn,
+  changelogBtn,
+  changelogModal,
+  changelogModalCloseBtn,
 } from "./dom.js";
 
 function toggleMenu(show) {
@@ -83,6 +86,19 @@ function toggleCodebaseModal(show) {
   }
 }
 
+function toggleChangelogModal(show) {
+  if (show) {
+    changelogModal.classList.remove("hidden");
+    // Reset iframe to ensure it starts at the top
+    const iframe = changelogModal.querySelector("iframe");
+    if (iframe) {
+        iframe.src = iframe.src;
+    }
+  } else {
+    changelogModal.classList.add("hidden");
+  }
+}
+
 function handleColorToggles(e) {
   const colorToggles = [
     toggleSnrColor,
@@ -136,6 +152,18 @@ export function initUIEventListeners() {
         toggleCodebaseModal(false);
     }
   });
+
+  // --- Changelog Modal ---
+  changelogBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    toggleChangelogModal(true);
+  });
+  changelogModalCloseBtn.addEventListener("click", () => toggleChangelogModal(false));
+  changelogModal.addEventListener("click", (e) => {
+    if (e.target === changelogModal) {
+        toggleChangelogModal(false);
+    }
+  });
   
   // Global Key Listener for 'k' and 'ESC'
   document.addEventListener("keydown", (e) => {
@@ -144,12 +172,14 @@ export function initUIEventListeners() {
       const isHidden = shortcutsModal.classList.contains("hidden");
       toggleShortcutsModal(isHidden);
     }
-    // Prioritize closing the guide modal if open, then codebase, then shortcuts
+    // Prioritize closing open modals
     if (e.key === "Escape") {
         if (!guideModal.classList.contains("hidden")) {
             toggleGuideModal(false);
         } else if (!codebaseModal.classList.contains("hidden")) {
             toggleCodebaseModal(false);
+        } else if (!changelogModal.classList.contains("hidden")) {
+            toggleChangelogModal(false);
         } else if (!shortcutsModal.classList.contains("hidden")) {
             toggleShortcutsModal(false);
         }