Batch recent activity six at a time

assets/static/activity.js

@@ -0,0 +1,34 @@
+(() => {
+  for (const feed of document.querySelectorAll("[data-activity-feed]")) {
+    const items = [...feed.querySelectorAll("[data-activity-item]")];
+    const batchSize = Number.parseInt(feed.dataset.batchSize || "6", 10);
+    const controls = feed.parentElement.querySelector("[data-activity-controls]");
+    const status = controls?.querySelector("[data-activity-status]");
+    const button = controls?.querySelector("[data-activity-more]");
+
+    if (!controls || !status || !button || items.length <= batchSize) continue;
+
+    let visibleCount = Math.min(batchSize, items.length);
+
+    const render = () => {
+      for (const [index, item] of items.entries()) {
+        item.hidden = index >= visibleCount;
+      }
+
+      const remaining = items.length - visibleCount;
+      status.textContent = `Showing ${visibleCount} of ${items.length} recent activity items.`;
+      button.disabled = remaining === 0;
+      button.textContent = remaining
+        ? `Show ${Math.min(batchSize, remaining)} more`
+        : "All activity shown";
+      controls.hidden = false;
+    };
+
+    button.addEventListener("click", () => {
+      visibleCount = Math.min(visibleCount + batchSize, items.length);
+      render();
+    });
+
+    render();
+  }
+})();