feat: Added changelog

src/index.html

@@ -199,6 +199,7 @@
   <!-- Status Bar -->
   <div id="status-bar">
     <span class="status-bar-item" id="status-bar-version">Argus</span>
+    <button id="btn-changelog" class="status-bar-btn">Changelog</button>
     <span class="status-bar-item" id="privilege-status">unprivileged</span>
   </div>
 
@@ -212,6 +213,16 @@
       <div id="traceroute-output" class="traceroute-output"></div>
     </div>
   </div>
+  <!-- Changelog Modal -->
+  <div id="changelog-modal" class="modal-overlay">
+    <div class="modal-panel" style="width: 700px;">
+      <div class="modal-header">
+        <span class="modal-title">Changelog</span>
+        <button id="changelog-close" class="modal-close">&times;</button>
+      </div>
+      <div id="changelog-content" class="changelog-content"></div>
+    </div>
+  </div>
   <!-- Context Menu -->
   <div id="context-menu" class="context-menu" hidden>
     <button class="ctx-item" data-action="copy-ip">Copy IP</button>

src/main.js

@@ -1022,6 +1022,42 @@ var updater = (() => {
 
   return { init };
 })();
+var changelog = (() => {
+  var modal = function() { return document.getElementById('changelog-modal'); };
+  var loaded = false;
+
+  async function open() {
+    modal().classList.add('visible');
+    if (!loaded) {
+      try {
+        var html = await invoke('get_changelog');
+        document.getElementById('changelog-content').innerHTML = html;
+        loaded = true;
+      } catch (err) {
+        document.getElementById('changelog-content').textContent = 'Failed to load changelog.';
+      }
+    }
+  }
+
+  function close() {
+    modal().classList.remove('visible');
+  }
+
+  function init() {
+    document.getElementById('btn-changelog').addEventListener('click', open);
+    document.getElementById('changelog-close').addEventListener('click', close);
+
+    modal().addEventListener('click', function(e) {
+      if (e.target === modal()) close();
+    });
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && modal().classList.contains('visible')) close();
+    });
+  }
+
+  return { init };
+})();
 window.addEventListener('DOMContentLoaded', () => {
   // Tab switching
   document.querySelectorAll('.tab').forEach((tab) => {
@@ -1054,6 +1090,7 @@ window.addEventListener('DOMContentLoaded', () => {
   nmapTab.init();
   monitorTab.init();
   updater.init();
+  changelog.init();
   document.getElementById('btn-export-all').addEventListener('click', exporter.csvAll);
   document.getElementById('btn-export-up').addEventListener('click', exporter.csvUp);
   console.log('[Argus] Ready');

src/styles.css

@@ -1259,4 +1259,66 @@ body {
   font-size: 11px;
   color: var(--text-muted);
   margin-top: 4px;
+}
+
+/* ===== Changelog ===== */
+
+.changelog-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--text-primary);
+  max-height: 70vh;
+}
+
+.changelog-content h1 {
+  font-size: 20px;
+  color: var(--cyan);
+  margin: 0 0 16px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.changelog-content h2 {
+  font-size: 16px;
+  color: var(--cyan);
+  margin: 24px 0 12px 0;
+}
+
+.changelog-content h3 {
+  font-size: 14px;
+  color: var(--text-primary);
+  margin: 16px 0 8px 0;
+}
+
+.changelog-content ul {
+  padding-left: 20px;
+  margin: 8px 0;
+}
+
+.changelog-content li {
+  margin: 4px 0;
+  color: var(--text-secondary);
+}
+
+.changelog-content code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 2px 5px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--cyan);
+}
+
+.changelog-content a {
+  color: var(--cyan);
+  text-decoration: none;
+}
+
+.changelog-content a:hover {
+  text-decoration: underline;
 }