feat: version display + issues board

Version: CalVer + git hash shown in top-right corner of main page. Built via Docker ARG BUILD_VERSION at build time. Served via /api-version. Issues Board: shared notepad window for tracking issues with plugin, overlord, nav files, macros. Stored in openissues.json on server. - GET/POST/DELETE /issues endpoints - Draggable window matching Chat/Radar pattern - Category tags (plugin, overlord, nav, macro, other) with colors - Add/resolve issues through the UI Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 12:53:06 +02:00 · 2026-04-09 12:53:06 +02:00 · 38ca6ead12
commit 38ca6ead12
parent c4856dc701
5 changed files with 258 additions and 1 deletions
--- a/static/script.js
+++ b/static/script.js
@ -4117,3 +4117,126 @@ function compassDir(angleDeg) {
  const dirs = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
  return dirs[Math.round(a / 45) % 8];
 }
+
+// ─── Version Display ────────────────────────────────────────────
+
+fetch('/api-version').then(r => r.json()).then(d => {
+  const el = document.getElementById('versionDisplay');
+  if (el) el.textContent = 'v' + d.version;
+}).catch(() => {});
+
+// ─── Issues Board ───────────────────────────────────────────────
+
+const ISSUE_CATEGORIES = {
+  plugin: { label: 'Plugin', color: '#8844cc' },
+  overlord: { label: 'Overlord', color: '#4488cc' },
+  nav: { label: 'Nav', color: '#44aa44' },
+  macro: { label: 'Macro', color: '#cc8844' },
+  other: { label: 'Other', color: '#888888' },
+};
+
+function showIssuesWindow() {
+  const { win, content, isNew } = createWindow(
+    'issuesWindow', 'Issues Board', 'issues-window'
+  );
+
+  if (!isNew) {
+    refreshIssuesList(win);
+    return;
+  }
+
+  win.style.width = '500px';
+  win.style.height = '450px';
+
+  // Issues list container
+  const listDiv = document.createElement('div');
+  listDiv.className = 'issues-list';
+  content.appendChild(listDiv);
+  win._issuesList = listDiv;
+
+  // Add issue form
+  const form = document.createElement('div');
+  form.className = 'issues-form';
+  form.innerHTML = `
+    <div style="display:flex;gap:4px;margin-bottom:4px;">
+      <input type="text" id="issueTitle" placeholder="Issue title..." style="flex:1;padding:3px 6px;font-size:0.8rem;border:1px solid #555;background:#2a2a2a;color:#ddd;">
+      <select id="issueCategory" style="padding:3px;font-size:0.75rem;border:1px solid #555;background:#2a2a2a;color:#ddd;">
+        <option value="plugin">Plugin</option>
+        <option value="overlord">Overlord</option>
+        <option value="nav">Nav</option>
+        <option value="macro">Macro</option>
+        <option value="other">Other</option>
+      </select>
+    </div>
+    <div style="display:flex;gap:4px;">
+      <textarea id="issueDescription" placeholder="Description (optional)..." rows="2" style="flex:1;padding:3px 6px;font-size:0.75rem;border:1px solid #555;background:#2a2a2a;color:#ddd;resize:vertical;"></textarea>
+      <button id="issueAddBtn" style="padding:4px 12px;background:#4a80c0;color:#fff;border:1px solid #336699;cursor:pointer;font-size:0.75rem;align-self:flex-end;">Add</button>
+    </div>
+  `;
+  content.appendChild(form);
+
+  // Add button handler
+  form.querySelector('#issueAddBtn').addEventListener('click', async () => {
+    const title = document.getElementById('issueTitle').value.trim();
+    const desc = document.getElementById('issueDescription').value.trim();
+    const cat = document.getElementById('issueCategory').value;
+    if (!title) return;
+
+    await fetch('/issues', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title, description: desc, category: cat, author: 'User' })
+    });
+    document.getElementById('issueTitle').value = '';
+    document.getElementById('issueDescription').value = '';
+    refreshIssuesList(win);
+  });
+
+  refreshIssuesList(win);
+}
+
+async function refreshIssuesList(win) {
+  const listDiv = win._issuesList;
+  if (!listDiv) return;
+
+  try {
+    const resp = await fetch('/issues');
+    const data = await resp.json();
+    const issues = data.issues || [];
+
+    if (issues.length === 0) {
+      listDiv.innerHTML = '<div style="padding:10px;color:#888;text-align:center;font-size:0.8rem;">No open issues</div>';
+      return;
+    }
+
+    listDiv.innerHTML = '';
+    issues.forEach(issue => {
+      const cat = ISSUE_CATEGORIES[issue.category] || ISSUE_CATEGORIES.other;
+      const date = issue.created ? new Date(issue.created).toLocaleDateString('sv-SE') : '';
+
+      const row = document.createElement('div');
+      row.className = 'issue-row';
+      row.innerHTML = `
+        <div style="display:flex;align-items:center;gap:6px;">
+          <span class="issue-category" style="background:${cat.color}">${cat.label}</span>
+          <strong style="font-size:0.8rem;color:#ddd;">${issue.title}</strong>
+          <span style="margin-left:auto;color:#666;font-size:0.65rem;">${date}</span>
+        </div>
+        ${issue.description ? `<div style="color:#aaa;font-size:0.75rem;margin-top:2px;padding-left:4px;">${issue.description}</div>` : ''}
+      `;
+
+      const resolveBtn = document.createElement('button');
+      resolveBtn.textContent = '✓ Resolve';
+      resolveBtn.className = 'issue-resolve-btn';
+      resolveBtn.addEventListener('click', async () => {
+        await fetch(`/issues/${issue.id}`, { method: 'DELETE' });
+        refreshIssuesList(win);
+      });
+      row.querySelector('div').appendChild(resolveBtn);
+
+      listDiv.appendChild(row);
+    });
+  } catch (err) {
+    listDiv.innerHTML = '<div style="padding:10px;color:#c44;font-size:0.8rem;">Failed to load issues</div>';
+  }
+}