feat(ui): show the history in an activity view

static/app.js

@@ -93,7 +93,7 @@ async function refreshMissingBadge() {
 
 // ---- navigation ----
 // the view lives in the hash so reload, back button and links keep it
-const VIEWS = ["search", "missing", "imported", "import", "settings"];
+const VIEWS = ["search", "missing", "imported", "import", "activity", "settings"];
 
 function showView() {
   const hash = location.hash.slice(1);
@@ -101,6 +101,7 @@ function showView() {
   $$("nav button[data-view]").forEach((b) => b.classList.toggle("active", b.dataset.view === name));
   $$("main > section").forEach((s) => (s.hidden = s.id !== "view-" + name));
   if (name === "missing" || name === "imported") loadRequests(name);
+  if (name === "activity") loadHistory();
   if (name === "settings") loadLibraries().catch((err) => toast(err.message, true));
 }
 
@@ -622,6 +623,39 @@ $("#imported-search").addEventListener("input", () => renderRequests("imported")
 
 $("#missing-bulk-delete").addEventListener("click", () => bulkDeleteRequests("missing"));
 
+// ---- activity ----
+let historyRows = [];
+const HISTORY_STATE = { imported: "done", appended: "done", failed: "failed" };
+
+async function loadHistory() {
+  try {
+    historyRows = await api("/api/history");
+  } catch (err) {
+    toast(err.message, true);
+  }
+  renderHistory();
+}
+
+function renderHistory() {
+  const tbody = $("#history-table tbody");
+  if (!historyRows.length) {
+    tbody.innerHTML = `<tr><td colspan="4" class="muted">${t("common.nothingHere")}</td></tr>`;
+    return;
+  }
+  const locale = lang === "de" ? "de-DE" : "en-GB";
+  tbody.innerHTML = historyRows
+    .map((h) => {
+      const where = h.message || (h.source && h.dest ? `${h.source} → ${h.dest}` : h.dest || h.source);
+      return `<tr>
+        <td class="state">${esc(new Date(h.at).toLocaleString(locale))}</td>
+        <td class="state ${HISTORY_STATE[h.event] || ""}">${esc(t("history." + h.event))}</td>
+        <td>${esc(h.title)} <span class="tag fmt">${esc(h.media_type)}</span></td>
+        <td class="muted mono">${esc(where)}</td>
+      </tr>`;
+    })
+    .join("");
+}
+
 // ---- request detail dialog ----
 let detailRequest = null;
 
@@ -1758,6 +1792,7 @@ function onLangChange() {
   renderSearchResults();
   renderRequests("missing");
   renderRequests("imported");
+  renderHistory();
   if (libraries.length) loadLibraries();
   const editId = $("#lib-form").dataset.editId;
   editId ? startLibraryEdit(parseInt(editId)) : endLibraryEdit();