bridge: REQ — version UI in matrix body for Code

2026-04-14 16:02:47 +00:00
parent 6856762a6b
commit 34aca32835
1 changed files with 98 additions and 0 deletions
--- a/docs/code-bridge/requests/REQ-2026-04-14-version-ui-matrix.md
+++ b/docs/code-bridge/requests/REQ-2026-04-14-version-ui-matrix.md
@@ -0,0 +1,98 @@
+# Code Request — Version UI in Server Matrix Body
+
+**Filed by:** Chronicler #88
+**Date:** 2026-04-14
+**Priority:** Medium
+**Context:** Pre-launch, defer until stable
+
+---
+
+## Background
+
+Chronicler #88 added modpack version tracking infrastructure today:
+- `current_version` column on `server_config`
+- `server_version_history` table (version, who, when)
+- `POST /admin/servers/:id/set-version` route
+- `GET /admin/servers/:id/version-history` route
+- Helper JS functions `saveVersion()`, `toggleVersionForm()`, `hideVersionForm()` in `servers/index.ejs`
+
+The UI addition to `_matrix_body.ejs` kept breaking EJS due to single quotes
+inside ternary expressions inside HTML attributes. The file was reverted to
+clean state. This task is to add the version UI properly.
+
+---
+
+## What To Add
+
+At the bottom of each server card in `_matrix_body.ejs` (there are TWO loops —
+TX1 and NC1), add a version display section BEFORE the closing `</div>`.
+
+The tricky part: avoid single quotes inside `<%= %>` tags that are inside
+HTML attributes. Use a local variable assignment instead:
+
+```ejs
+<% var currentVersion = config && config.current_version ? config.current_version : null; %>
+<div class="px-4 pb-4" style="border-top:1px solid #333;padding-top:10px;margin-top:4px;">
+    <div style="font-size:10px;color:#666;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;">📦 Installed Version</div>
+    <div style="display:flex;gap:6px;align-items:center;" id="version-display-<%= server.identifier %>">
+        <span style="font-size:13px;font-weight:600;color:<%= currentVersion ? '#4ade80' : '#555' %>;" id="version-text-<%= server.identifier %>">
+            <%= currentVersion || 'Not set' %>
+        </span>
+        <button id="version-edit-btn-<%= server.identifier %>"
+                onclick="toggleVersionForm('<%= server.identifier %>')"
+                style="font-size:10px;background:#333;border:1px solid #555;color:#aaa;padding:2px 8px;border-radius:4px;cursor:pointer;">
+            ✏️ Edit
+        </button>
+    </div>
+    <div id="version-form-<%= server.identifier %>" style="display:none;margin-top:6px;">
+        <div style="display:flex;gap:6px;align-items:center;">
+            <input type="text" id="version-input-<%= server.identifier %>"
+                   placeholder="e.g. 1.4.2"
+                   style="font-size:12px;background:#1a1a1a;border:1px solid #555;color:#e0e0e0;padding:4px 8px;border-radius:4px;width:140px;" />
+            <button onclick="saveVersion('<%= server.identifier %>')"
+                    style="font-size:11px;background:#2563eb;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Save</button>
+            <button onclick="hideVersionForm('<%= server.identifier %>')"
+                    style="font-size:11px;background:#333;border:1px solid #555;color:#aaa;padding:4px 8px;border-radius:4px;cursor:pointer;">Cancel</button>
+        </div>
+        <div id="version-result-<%= server.identifier %>" style="margin-top:4px;font-size:11px;"></div>
+        <div style="margin-top:6px;">
+            <button hx-get="/admin/servers/<%= server.identifier %>/version-history"
+                    hx-target="#version-history-<%= server.identifier %>"
+                    hx-swap="innerHTML"
+                    style="font-size:10px;background:transparent;border:none;color:#555;cursor:pointer;padding:0;text-decoration:underline;">View history</button>
+        </div>
+        <div id="version-history-<%= server.identifier %>" style="margin-top:4px;background:#1a1a1a;border-radius:4px;padding:4px;"></div>
+    </div>
+</div>
+```
+
+---
+
+## Key Rule
+
+**Never put single quotes inside `<%= %>` tags that are inside HTML attribute values.**
+Use `<% var x = ...; %>` to assign first, then `<%= x %>` in the attribute.
+
+---
+
+## Validation
+
+After adding, run this on the Dev Panel to verify EJS compiles:
+```bash
+cd /opt/mod-builds/firefrost-services/services/arbiter-3.0
+node -e "const ejs = require('ejs'); const fs = require('fs'); try { ejs.compile(fs.readFileSync('src/views/admin/servers/_matrix_body.ejs', 'utf8')); console.log('EJS OK'); } catch(e) { console.log('ERROR:', e.message); }"
+```
+
+Must print `EJS OK` before committing.
+
+---
+
+## Files To Edit
+
+- `services/arbiter-3.0/src/views/admin/servers/_matrix_body.ejs`
+
+Do NOT touch `_server_card.ejs` or `index.ejs` — those are fine.
+
+---
+
+**Fire + Frost + Foundation** 💙🔥❄️