From ffe6d04d75f88536856ec7789d06c91f324ab017 Mon Sep 17 00:00:00 2001
From: Tom Hempel <tom.hempel2001@gmail.com>
Date: Wed, 3 Jun 2026 17:37:28 +0200
Subject: [PATCH] Refactor activity log UI

---
 website/css/style.css   | 55 ++++++++++++++++++++++++++++++++---------
 website/js/pages/dev.js | 25 +++++++++----------
 2 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/website/css/style.css b/website/css/style.css
index 60bd1de..2fec998 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -327,29 +327,51 @@ code {
 .badge-activity-app_change { background: var(--badge-in-progress-bg); color: var(--badge-in-progress-fg); }
 .badge-activity-web_change { background: var(--badge-supervisor-bg); color: var(--badge-supervisor-fg); }
 .badge-activity-web_export { background: var(--badge-admin-bg); color: var(--badge-admin-fg); }
+.badge-activity-api_error   { background: var(--badge-archived-bg); color: var(--badge-archived-fg); }
 .activity-log-card .table-wrapper { max-height: 420px; overflow: auto; }
+.activity-log-card .filter-bar label {
+    margin: 0;
+    line-height: 1.2;
+}
 .activity-log-detail {
     font-size: 0.8rem;
     max-width: 280px;
     word-break: break-word;
 }
+table.data-table.activity-log-table th,
+table.data-table.activity-log-table td {
+    vertical-align: top;
+    line-height: 1.45;
+}
+table.data-table.activity-log-table .activity-log-col-time,
+table.data-table.activity-log-table .activity-log-col-meta {
+    white-space: nowrap;
+}
+table.data-table.activity-log-table .activity-log-col-kind {
+    white-space: nowrap;
+}
+table.data-table.activity-log-table .activity-log-col-route code {
+    display: inline-block;
+    max-width: 12rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+table.data-table.activity-log-table code {
+    font-size: 0.8rem;
+    line-height: 1.45;
+    vertical-align: top;
+}
+table.data-table.activity-log-table .badge {
+    vertical-align: top;
+}
 .activity-log-changes-cell {
     min-width: 220px;
     max-width: 420px;
-    vertical-align: top;
 }
 .activity-log-subject,
 .activity-log-actor {
     font-size: 0.85rem;
-    vertical-align: top;
-}
-.activity-log-ip {
-    font-size: 0.8rem;
-    white-space: nowrap;
-    vertical-align: top;
-}
-.activity-log-ip code {
-    font-size: 0.78rem;
 }
 .activity-log-subject strong,
 .activity-log-actor strong {
@@ -360,6 +382,12 @@ code {
     color: var(--text-secondary);
     font-size: 0.78rem;
 }
+.activity-log-error {
+    margin-top: 6px;
+    font-size: 0.8rem;
+    color: var(--danger);
+    line-height: 1.35;
+}
 .activity-change-raw {
     font-size: 0.72rem;
     color: var(--text-secondary);
@@ -376,14 +404,17 @@ code {
     text-align: left;
     font-weight: 600;
     color: var(--text-secondary);
-    padding: 2px 10px 2px 0;
+    padding: 3px 10px 3px 0;
     vertical-align: top;
     white-space: nowrap;
+    line-height: 1.45;
 }
 .activity-changes-table td {
-    padding: 2px 0;
+    padding: 3px 0;
     word-break: break-word;
     color: var(--text);
+    vertical-align: top;
+    line-height: 1.45;
 }
 .activity-changes-table tr + tr th,
 .activity-changes-table tr + tr td {
diff --git a/website/js/pages/dev.js b/website/js/pages/dev.js
index be67724..83c597c 100644
--- a/website/js/pages/dev.js
+++ b/website/js/pages/dev.js
@@ -91,7 +91,6 @@ export function devPage() {
                             <th>Subject</th>
                             <th>Method</th>
                             <th>Route</th>
-                            <th>IP</th>
                             <th>Status</th>
                             <th>Duration</th>
                             <th>Values</th>
@@ -99,7 +98,7 @@ export function devPage() {
                         </tr>
                     </thead>
                     <tbody id="activityLogBody">
-                        <tr><td colspan="10" style="text-align:center;color:var(--text-secondary);padding:20px">Loading…</td></tr>
+                        <tr><td colspan="9" style="text-align:center;color:var(--text-secondary);padding:20px">Loading…</td></tr>
                     </tbody>
                 </table>
             </div>
@@ -297,7 +296,7 @@ async function loadActivityLog() {
 
     const date = document.getElementById('activityLogDate')?.value || new Date().toISOString().slice(0, 10);
     const activity = document.getElementById('activityLogKind')?.value || '';
-    tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;padding:20px">Loading…</td></tr>';
+    tbody.innerHTML = '<tr><td colspan="9" style="text-align:center;padding:20px">Loading…</td></tr>';
 
     try {
         const q = new URLSearchParams({ date, limit: '300' });
@@ -317,7 +316,7 @@ async function loadActivityLog() {
         }
 
         if (!entries.length) {
-            tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;color:var(--text-secondary);padding:24px">No activity recorded</td></tr>';
+            tbody.innerHTML = '<tr><td colspan="9" style="text-align:center;color:var(--text-secondary);padding:24px">No activity recorded</td></tr>';
             return;
         }
 
@@ -332,26 +331,24 @@ async function loadActivityLog() {
             const dur = e.duration_ms != null ? `${e.duration_ms} ms` : '—';
             const subject = formatActivitySubject(e);
             const performedBy = formatActivityPerformer(e);
-            const ip = (e.ip && String(e.ip).trim()) ? String(e.ip).trim() : '—';
             const errPart = e.error
-                ? `<div class="error-text" style="margin-top:6px;font-size:.8rem">${escHtml(e.error)}</div>`
+                ? `<div class="activity-log-error">${escHtml(e.error)}</div>`
                 : '';
             return `<tr>
-                <td>${escHtml(time)}</td>
-                <td><span class="badge ${badgeClass}">${escHtml(label)}</span></td>
+                <td class="activity-log-col-time">${escHtml(time)}</td>
+                <td class="activity-log-col-kind"><span class="badge ${badgeClass}">${escHtml(label)}</span></td>
                 <td class="activity-log-subject">${subject}</td>
-                <td><code>${escHtml(e.method || '')}</code></td>
-                <td><code>${escHtml(e.route || '')}</code></td>
-                <td class="activity-log-ip"><code>${escHtml(ip)}</code></td>
-                <td class="${statusClass}">${escHtml(status)}</td>
-                <td>${escHtml(dur)}</td>
+                <td class="activity-log-col-meta"><code>${escHtml(e.method || '')}</code></td>
+                <td class="activity-log-col-route"><code>${escHtml(e.route || '')}</code></td>
+                <td class="activity-log-col-meta ${statusClass}">${escHtml(status)}</td>
+                <td class="activity-log-col-meta">${escHtml(dur)}</td>
                 <td class="activity-log-changes-cell">${renderActivityChanges(e.changes)}</td>
                 <td class="activity-log-actor">${performedBy}${errPart}</td>
             </tr>`;
         }).join('');
     } catch (err) {
         if (meta) meta.textContent = '';
-        tbody.innerHTML = `<tr><td colspan="10" class="error-text" style="padding:16px">${escHtml(err.message)}</td></tr>`;
+        tbody.innerHTML = `<tr><td colspan="9" class="error-text" style="padding:16px">${escHtml(err.message)}</td></tr>`;
     }
 }