fix: history rows show the ISO datetime and the age (closes #760)

Home, AddressDetail and AddressToken showed only the relative age, with
the datetime as a tooltip. Each row now shows the datetime and then the
age in parentheses, on a line of its own, through transactionTimeHtml()
in helpers.js, which TransactionDetail also uses. The direction label
moves to its own right-aligned line below. README.md and docs/README.md
describe the new row.

Model: opus-5-5

src/popup/views/addressDetail.js

@@ -12,8 +12,7 @@ const {
     attachCopyHandlers,
     goBack,
     pushCurrentView,
-    isoDate,
-    timeAgo,
+    transactionTimeHtml,
 } = require("./helpers");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { formatAddressTotal, getAddressValue } = require("../../shared/prices");
@@ -236,10 +235,11 @@ function renderTransactions(txs) {
         const nameStr = escapeHtml(title || ensName || "");
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity-50" : "";
-        const ago = escapeHtml(timeAgo(tx.timestamp));
-        const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
-        html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
+        // The time has a line of its own, so a long time or direction label
+        // never pushes the other onto a second line.
+        html += `<div class="text-muted">${transactionTimeHtml(tx.timestamp)}</div>`;
+        html += `<div class="text-right">${dirLabel}${err}</div>`;
         html += txCounterpartyHtml(counterparty, nameStr, amountStr);
         html += `</div>`;
         i++;

src/popup/views/addressToken.js

@@ -18,8 +18,7 @@ const {
     attachCopyHandlers,
     goBack,
     pushCurrentView,
-    isoDate,
-    timeAgo,
+    transactionTimeHtml,
 } = require("./helpers");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { bundledToken, resolveSymbol } = require("../../shared/tokenList");
@@ -329,10 +328,11 @@ function renderTransactions(txs) {
         const nameStr = escapeHtml(title || ensName || "");
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity-50" : "";
-        const ago = escapeHtml(timeAgo(tx.timestamp));
-        const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
-        html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
+        // The time has a line of its own, so a long time or direction label
+        // never pushes the other onto a second line.
+        html += `<div class="text-muted">${transactionTimeHtml(tx.timestamp)}</div>`;
+        html += `<div class="text-right">${dirLabel}${err}</div>`;
         html += txCounterpartyHtml(counterparty, nameStr, amountStr);
         html += `</div>`;
         i++;

src/popup/views/helpers.js

@@ -615,9 +615,8 @@ function formatAddressHtml(address, ensName, maxLen, title) {
     return renderAddressHtml(address, { title, ensName, maxLen });
 }
 
-// A transaction's time as every screen shows it (README, Amounts): the ISO
-// datetime, in UTC when the UTC Timestamps setting is on, and the relative age.
-// Views import these two; they keep no copies.
+// The ISO datetime of a transaction's time, in UTC when the UTC Timestamps
+// setting is on. Views show it through transactionTimeHtml().
 function isoDate(timestamp) {
     const d = new Date(timestamp * 1000);
     const pad = (n) => String(n).padStart(2, "0");
@@ -674,6 +673,15 @@ function timeAgo(timestamp) {
     return years + " year" + (years !== 1 ? "s" : "") + " ago";
 }
 
+// A transaction's time as every screen shows it (README, Amounts): the ISO
+// datetime, then the relative age in parentheses. With copyable set, the
+// datetime is click-to-copy, and the caller attaches the copy handlers.
+function transactionTimeHtml(timestamp, { copyable = false } = {}) {
+    const iso = isoDate(timestamp);
+    const isoHtml = copyable ? copyableHtml(iso) : escapeHtml(iso);
+    return isoHtml + " (" + escapeHtml(timeAgo(timestamp)) + ")";
+}
+
 // Shared external-link icon SVG used across all views.
 const EXT_ICON =
     `<span class="inline-block w-[10px] h-[10px] ml-[4px] align-middle">` +
@@ -869,6 +877,5 @@ module.exports = {
     reviewedNetworkProvider,
     EXT_ICON,
     truncateMiddle,
-    isoDate,
-    timeAgo,
+    transactionTimeHtml,
 };

src/popup/views/home.js

@@ -5,8 +5,7 @@ const {
     balanceLinesForAddress,
     unknownableAmount,
     markTrackedTokensNotFetched,
-    isoDate,
-    timeAgo,
+    transactionTimeHtml,
     addressDotHtml,
     txCounterpartyHtml,
     HISTORY_OFF_TEXT,
@@ -150,10 +149,11 @@ function renderHomeTxList(ctx) {
         const titleStr = title ? escapeHtml(title) : "";
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity-50" : "";
-        const ago = escapeHtml(timeAgo(tx.timestamp));
-        const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
-        html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
+        // The time has a line of its own, so a long time or direction label
+        // never pushes the other onto a second line.
+        html += `<div class="text-muted">${transactionTimeHtml(tx.timestamp)}</div>`;
+        html += `<div class="text-right">${dirLabel}${err}</div>`;
         html += txCounterpartyHtml(counterparty, titleStr, amountStr);
         html += `</div>`;
         i++;

src/popup/views/transactionDetail.js

@@ -10,8 +10,7 @@ const {
     CONTRACT_CREATION_TEXT,
     addressDotHtml,
     escapeHtml,
-    isoDate,
-    timeAgo,
+    transactionTimeHtml,
     renderAddressHtml,
     blockieHtml,
     attachCopyHandlers,
@@ -204,9 +203,9 @@ function render() {
     );
     loadFullTxDetails(tx.hash, tx.chainId);
 
-    const isoStr = isoDate(tx.timestamp);
-    $("tx-detail-time").innerHTML =
-        copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
+    $("tx-detail-time").innerHTML = transactionTimeHtml(tx.timestamp, {
+        copyable: true,
+    });
     $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
     showView("transaction");
     attachCopyHandlers("view-transaction");