Improve wallet transaction display

web/index.html

@@ -221,7 +221,7 @@
 
     .wallet-header {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto auto auto;
+      grid-template-columns: minmax(0, 1fr) auto auto;
       align-items: center;
       gap: 24px;
       width: 100%;
@@ -281,13 +281,6 @@
       font-weight: 650;
     }
 
-    .wallet-chevron {
-      width: 20px;
-      color: var(--muted);
-      text-align: center;
-      font-size: 18px;
-    }
-
     .wallet-content {
       padding: 0 18px 18px;
       border-top: 1px solid var(--border);
@@ -1081,6 +1074,38 @@
       }
     }
 
+    function formatDateDateOnly(timestamp) {
+      const value = Number(timestamp);
+
+      if (!Number.isFinite(value)) {
+        return 'Unknown';
+      }
+
+      const date = new Date(value * 1000);
+
+      if (Number.isNaN(date.getTime())) {
+        return 'Unknown';
+      }
+
+      const pad = (number) => String(number).padStart(2, '0');
+      const year = date.getFullYear();
+      const shortYear = String(year).slice(-2);
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+
+      switch (dateFormat) {
+        case 'DD.MM.YYYY HH:MM':
+        case 'DD.MM.YY HH:MM':
+          return `${day}.${month}.${dateFormat.includes('YYYY') ? year : shortYear}`;
+        case 'YYYY-MM-DD HH:MM':
+          return `${year}-${month}-${day}`;
+        case 'MM/DD/YY HH:MM':
+          return `${month}/${day}/${shortYear}`;
+        default:
+          return `${day}.${month}.${shortYear}`;
+      }
+    }
+
     function formatSyncAge(date) {
       if (!date) {
         return 'Not synced';
@@ -1401,9 +1426,7 @@
       const lastActivity = getTransactionDateForLatest(wallet, latest);
 
       const lastActivityText = lastActivity
-        ? formatDate(lastActivity)
-        : latest
-          ? `Block ${latest.height}`
+        ? formatDateDateOnly(lastActivity)
         : 'No activity';
 
       return `
@@ -1442,10 +1465,6 @@
                 ${escapeHtml(lastActivityText)}
               </div>
             </div>
-
-            <div class="wallet-chevron">
-              ${expanded ? 'v' : '>'}
-            </div>
           </button>
 
           ${
@@ -1485,11 +1504,7 @@
       return `
         <div class="wallet-content">
           <div class="transactions-header">
-            <h3>Transactions</h3>
-
-            <span class="muted">
-              ${transactionCount}
-            </span>
+            <h3>Transactions (${transactionCount})</h3>
           </div>
 
           ${
@@ -1524,10 +1539,7 @@
 
       const dateText = timestamp
         ? formatDate(timestamp)
-        : transaction.height === null ||
-            transaction.height === undefined
-          ? 'Pending'
-          : `Block ${transaction.height}`;
+        : 'Loading...';
 
       const directionLabel =
         display.direction === 'sent' ? 'Sent' : 'Received';
@@ -1754,33 +1766,23 @@
       const transactions =
         getWalletTransactions(wallet);
 
-      /*
-       * Only the latest transaction is loaded
-       * immediately. The remaining transactions
-       * are fetched when the user opens them.
-       *
-       * This keeps a wallet with many transactions
-       * from creating dozens of Fulcrum requests
-       * just by opening it.
-       */
-
       if (!transactions.length) {
         return;
       }
 
-      const latest =
-        transactions[0];
-
-      if (
-        !getTransactionFromCache(
-          latest.txid,
-        )
-      ) {
-        await loadTransaction(
-          latest.txid,
+      /*
+       * Load transaction details in parallel so the
+       * list can populate dates and amounts without
+       * requiring the user to open each transaction.
+       *
+       * Cached transactions are skipped by loadTransaction().
+       */
+      await Promise.all(
+        transactions.map((transaction) =>
+          loadTransaction(transaction.txid),
+        ),
       );
     }
-    }
 
     async function loadTransaction(
       txid,