Refactor dashboard static assets into ES modules (#674, #675, #676, #677)

[Raven062]

Summary

Refactor dashboard static assets into ES modules (#674, #675, #676, #677)

What was solved

#674 — Dashboard: switch dashboard.js from an IIFE to an ES module entry point

Convert static/dashboard.js from an IIFE with a DOMContentLoaded guard into an ES module entry point (main.js) loaded via <script type="module">, using const/let throughout, while preserving all existing dashboard behavior and the no-API-key-in-URL/log/console guarantee.

Addressed:

• Changed: static/dashboard.html
• Convert static/dashboard.js into an ES module entry point (main.js) loaded with <script type="module">
• Remove the IIFE wrapper and the DOMContentLoaded guard
• Use const/let throughout instead of var

#675 — Dashboard: extract the API client into api.js

Extract the dashboard's inline api() fetch helper (static/dashboard.js:96) into a dedicated static/api.js ES module exposing async per-endpoint functions (listPayments, getPayment, listDeliveries, redeliver) that always target /v1/... paths, then update static/dashboard.js to import and use them.

Addressed:

• Changed: static/api.js, static/api.js
• Create static/api.js with async functions per endpoint: listPayments, getPayment, listDeliveries, redeliver
• Move the existing fetch/auth-header/error handling logic from api() in static/dashboard.js:96 into the new module
• All requests must use /v1/... paths

#676 — Dashboard: extract DOM helpers into dom.js

Extract the dashboard DOM helper functions $, el, show, clear, and setError from static/dashboard.js into a new static/dom.js module, then update all call sites (including the dashboard HTML script loading and any other static JS modules that use these helpers) to consume the new module. This is a mechanical refactor scoped to the dashboard frontend assets, part of the larger #627 effort.

Addressed:

• Changed: static/dom.js, static/dom.js, static/dom.js, static/dashboard.html
• Create static/dom.js containing the $, el, show, clear, and setError helpers
• Update all call sites in static/dashboard.js (and any other static JS that references these helpers) to use the extracted module
• Preserve existing behavior and public surface of the dashboard — no feature removal or stubbing

#677 — Dashboard: extract formatting helpers into format.js

Extract the pure formatting helpers fmtTime, shortId, and pillClass from the dashboard code into a new DOM-free static/format.js module, then update all call sites (primarily static/dashboard.js) to consume them from the new module. This is a refactor-only change scoped to the dashboard frontend, enabling unit testing of these helpers via the existing static/tests/format.test.js harness.

Addressed:

• Changed: static/format.js, static/format.js
• Create static/format.js containing fmtTime, shortId, and pillClass with no DOM access (pure functions only)
• Update all call sites of these helpers (notably in static/dashboard.js) to import/use them from format.js
• Keep behavior identical so the dashboard works in current Chrome, Firefox and Safari at desktop and mobile widths

Changes

• static/dashboard.html (modify)
• static/api.js (create)
• static/dom.js (create)
• static/format.js (modify)

Approach

1. Dashboard: switch dashboard.js from an IIFE to an ES module entry point #674 — Dashboard: switch dashboard.js from an IIFE to an ES module entry point (Changed: static/dashboard.html)
2. Dashboard: extract the API client into api.js #675 — Dashboard: extract the API client into api.js (Changed: static/api.js, static/api.js)
3. Dashboard: extract DOM helpers into dom.js #676 — Dashboard: extract DOM helpers into dom.js (Changed: static/dom.js, static/dom.js, static/dom.js, static/dashboard.html)
4. Dashboard: extract formatting helpers into format.js #677 — Dashboard: extract formatting helpers into format.js (Changed: static/format.js, static/format.js)

Issues

Closes #674
Closes #675
Closes #676
Closes #677

[drips-wave]

@Raven062 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits