Files
firefrost-services/docs/code-bridge/requests/REQ-2026-04-14-version-ui-matrix.md
2026-04-14 16:02:47 +00:00

4.3 KiB

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:

<% 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:

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 💙🔥❄️