@rmdes/indiekit-endpoint-activitypub 2.4.5 → 2.5.0

package/assets/reader-infinite-scroll.js

@@ -1,121 +1,55 @@
 /**
- * Infinite scroll — AlpineJS component for AJAX load-more on the timeline
- * Registers the `apInfiniteScroll` Alpine data component.
+ * Infinite scroll — unified AlpineJS component for AJAX load-more.
+ * Works for both reader timeline and explore view via data attributes.
+ *
+ * Required data attributes on the component element:
+ *   data-cursor        — initial pagination cursor value
+ *   data-api-url       — API endpoint URL (e.g., /activitypub/admin/reader/api/timeline)
+ *   data-cursor-param  — query param name for the cursor (e.g., "before" or "max_id")
+ *   data-cursor-field  — response JSON field for the next cursor (e.g., "before" or "maxId")
+ *   data-timeline-id   — DOM ID of the timeline container to append HTML into
+ *
+ * Optional:
+ *   data-extra-params  — JSON-encoded object of additional query params
+ *   data-hide-pagination — CSS selector of no-JS pagination to hide
  */
 
 document.addEventListener("alpine:init", () => {
   // eslint-disable-next-line no-undef
-  Alpine.data("apExploreScroll", () => ({
+  Alpine.data("apInfiniteScroll", () => ({
     loading: false,
     done: false,
-    maxId: null,
-    instance: "",
-    scope: "local",
-    hashtag: "",
+    cursor: null,
+    apiUrl: "",
+    cursorParam: "before",
+    cursorField: "before",
+    timelineId: "",
+    extraParams: {},
     observer: null,
 
     init() {
       const el = this.$el;
-      this.maxId = el.dataset.maxId || null;
-      this.instance = el.dataset.instance || "";
-      this.scope = el.dataset.scope || "local";
-      this.hashtag = el.dataset.hashtag || "";
-
-      if (!this.maxId) {
-        this.done = true;
-        return;
-      }
-
-      this.observer = new IntersectionObserver(
-        (entries) => {
-          for (const entry of entries) {
-            if (entry.isIntersecting && !this.loading && !this.done) {
-              this.loadMore();
-            }
-          }
-        },
-        { rootMargin: "200px" }
-      );
-
-      if (this.$refs.sentinel) {
-        this.observer.observe(this.$refs.sentinel);
-      }
-    },
-
-    async loadMore() {
-      if (this.loading || this.done || !this.maxId) return;
-
-      this.loading = true;
-
-      const timeline = document.getElementById("ap-explore-timeline");
-      const mountPath = timeline ? timeline.dataset.mountPath : "";
-
-      const params = new URLSearchParams({
-        instance: this.instance,
-        scope: this.scope,
-        max_id: this.maxId,
-      });
-      // Pass hashtag when in hashtag mode so infinite scroll stays on tag timeline
-      if (this.hashtag) {
-        params.set("hashtag", this.hashtag);
-      }
+      this.cursor = el.dataset.cursor || null;
+      this.apiUrl = el.dataset.apiUrl || "";
+      this.cursorParam = el.dataset.cursorParam || "before";
+      this.cursorField = el.dataset.cursorField || "before";
+      this.timelineId = el.dataset.timelineId || "";
 
+      // Parse extra params from JSON data attribute
       try {
-        const res = await fetch(
-          `${mountPath}/admin/reader/api/explore?${params.toString()}`,
-          { headers: { Accept: "application/json" } }
-        );
-
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
-        const data = await res.json();
-
-        if (data.html && timeline) {
-          timeline.insertAdjacentHTML("beforeend", data.html);
-        }
-
-        if (data.maxId) {
-          this.maxId = data.maxId;
-        } else {
-          this.done = true;
-          if (this.observer) this.observer.disconnect();
-        }
-      } catch (err) {
-        console.error("[ap-explore-scroll] load failed:", err.message);
-      } finally {
-        this.loading = false;
+        this.extraParams = JSON.parse(el.dataset.extraParams || "{}");
+      } catch {
+        this.extraParams = {};
       }
-    },
-
-    destroy() {
-      if (this.observer) this.observer.disconnect();
-    },
-  }));
-
-  // eslint-disable-next-line no-undef
-  Alpine.data("apInfiniteScroll", () => ({
-    loading: false,
-    done: false,
-    before: null,
-    tab: "",
-    tag: "",
-    observer: null,
-
-    init() {
-      const el = this.$el;
-      this.before = el.dataset.before || null;
-      this.tab = el.dataset.tab || "";
-      this.tag = el.dataset.tag || "";
 
       // Hide the no-JS pagination fallback now that JS is active
-      const paginationEl =
-        document.getElementById("ap-reader-pagination") ||
-        document.getElementById("ap-tag-pagination");
-      if (paginationEl) {
-        paginationEl.style.display = "none";
+      const hideSel = el.dataset.hidePagination;
+      if (hideSel) {
+        const paginationEl = document.getElementById(hideSel);
+        if (paginationEl) paginationEl.style.display = "none";
       }
 
-      if (!this.before) {
+      if (!this.cursor) {
         this.done = true;
         return;
       }
@@ -129,7 +63,7 @@ document.addEventListener("alpine:init", () => {
             }
           }
         },
-        { rootMargin: "200px" }
+        { rootMargin: "200px" },
       );
 
       if (this.$refs.sentinel) {
@@ -138,36 +72,36 @@ document.addEventListener("alpine:init", () => {
     },
 
     async loadMore() {
-      if (this.loading || this.done || !this.before) return;
+      if (this.loading || this.done || !this.cursor) return;
 
       this.loading = true;
 
-      const timeline = document.getElementById("ap-timeline");
-      const mountPath = timeline ? timeline.dataset.mountPath : "";
-
-      const params = new URLSearchParams({ before: this.before });
-      if (this.tab) params.set("tab", this.tab);
-      if (this.tag) params.set("tag", this.tag);
+      const params = new URLSearchParams({
+        [this.cursorParam]: this.cursor,
+        ...this.extraParams,
+      });
 
       try {
         const res = await fetch(
-          `${mountPath}/admin/reader/api/timeline?${params.toString()}`,
-          { headers: { Accept: "application/json" } }
+          `${this.apiUrl}?${params.toString()}`,
+          { headers: { Accept: "application/json" } },
         );
 
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
         const data = await res.json();
 
+        const timeline = this.timelineId
+          ? document.getElementById(this.timelineId)
+          : null;
+
         if (data.html && timeline) {
-          // Append the returned pre-rendered HTML
           timeline.insertAdjacentHTML("beforeend", data.html);
         }
 
-        if (data.before) {
-          this.before = data.before;
+        if (data[this.cursorField]) {
+          this.cursor = data[this.cursorField];
         } else {
-          // No more items
           this.done = true;
           if (this.observer) this.observer.disconnect();
         }
@@ -178,10 +112,6 @@ document.addEventListener("alpine:init", () => {
       }
     },
 
-    appendItems(/* detail */) {
-      // Custom event hook — not used in this implementation but kept for extensibility
-    },
-
     destroy() {
       if (this.observer) this.observer.disconnect();
     },

package/lib/controllers/api-timeline.js

@@ -4,13 +4,7 @@
 
 import { getTimelineItems, countNewItems, markItemsRead } from "../storage/timeline.js";
 import { getToken, validateToken } from "../csrf.js";
-import {
-  getMutedUrls,
-  getMutedKeywords,
-  getBlockedUrls,
-  getFilterMode,
-} from "../storage/moderation.js";
-import { stripQuoteReferenceHtml } from "../og-unfurl.js";
+import { postProcessItems, applyTabFilter, loadModerationData, renderItemCards } from "../item-processing.js";
 
 export function apiTimelineController(mountPath) {
   return async (request, response, next) => {
@@ -26,7 +20,7 @@ export function apiTimelineController(mountPath) {
       const before = request.query.before;
       const limit = 20;
 
-      // Build storage query options (same logic as readerController)
+      // Build storage query options
       const unread = request.query.unread === "1";
       const options = { before, limit, unread };
 
@@ -45,132 +39,32 @@ export function apiTimelineController(mountPath) {
 
       const result = await getTimelineItems(collections, options);
 
-      // Client-side tab filtering for types not supported by storage
-      let items = result.items;
-      if (!tag) {
-        if (tab === "replies") {
-          items = items.filter((item) => item.inReplyTo);
-        } else if (tab === "media") {
-          items = items.filter(
-            (item) =>
-              (item.photo && item.photo.length > 0) ||
-              (item.video && item.video.length > 0) ||
-              (item.audio && item.audio.length > 0)
-          );
-        }
-      }
+      // Tab filtering for types not supported by storage layer
+      const tabFiltered = tag ? result.items : applyTabFilter(result.items, tab);
 
-      // Apply moderation filters
+      // Shared processing pipeline: moderation, quote stripping, interactions
       const modCollections = {
         ap_muted: application?.collections?.get("ap_muted"),
         ap_blocked: application?.collections?.get("ap_blocked"),
         ap_profile: application?.collections?.get("ap_profile"),
       };
-      const [mutedUrls, mutedKeywords, blockedUrls, filterMode] =
-        await Promise.all([
-          getMutedUrls(modCollections),
-          getMutedKeywords(modCollections),
-          getBlockedUrls(modCollections),
-          getFilterMode(modCollections),
-        ]);
-      const blockedSet = new Set(blockedUrls);
-      const mutedSet = new Set(mutedUrls);
-
-      if (blockedSet.size > 0 || mutedSet.size > 0 || mutedKeywords.length > 0) {
-        items = items.filter((item) => {
-          if (item.author?.url && blockedSet.has(item.author.url)) {
-            return false;
-          }
-
-          const isMutedActor = item.author?.url && mutedSet.has(item.author.url);
-          let matchedKeyword = null;
-          if (mutedKeywords.length > 0) {
-            const searchable = [item.content?.text, item.name, item.summary]
-              .filter(Boolean)
-              .join(" ")
-              .toLowerCase();
-            if (searchable) {
-              matchedKeyword = mutedKeywords.find((kw) =>
-                searchable.includes(kw.toLowerCase())
-              );
-            }
-          }
-
-          if (isMutedActor || matchedKeyword) {
-            if (filterMode === "warn") {
-              item._moderated = true;
-              item._moderationReason = isMutedActor ? "muted_account" : "muted_keyword";
-              if (matchedKeyword) item._moderationKeyword = matchedKeyword;
-              return true;
-            }
-            return false;
-          }
-
-          return true;
-        });
-      }
-
-      // Get interaction state
-      const interactionsCol = application?.collections?.get("ap_interactions");
-      const interactionMap = {};
-
-      if (interactionsCol) {
-        const lookupUrls = new Set();
-        const objectUrlToUid = new Map();
-        for (const item of items) {
-          const uid = item.uid;
-          const displayUrl = item.url || item.originalUrl;
-          if (uid) { lookupUrls.add(uid); objectUrlToUid.set(uid, uid); }
-          if (displayUrl) { lookupUrls.add(displayUrl); objectUrlToUid.set(displayUrl, uid || displayUrl); }
-        }
-        if (lookupUrls.size > 0) {
-          const interactions = await interactionsCol
-            .find({ objectUrl: { $in: [...lookupUrls] } })
-            .toArray();
-          for (const interaction of interactions) {
-            const key = objectUrlToUid.get(interaction.objectUrl) || interaction.objectUrl;
-            if (!interactionMap[key]) interactionMap[key] = {};
-            interactionMap[key][interaction.type] = true;
-          }
-        }
-      }
+      const moderation = await loadModerationData(modCollections);
 
-      // Strip "RE:" paragraphs from items that have quote embeds
-      for (const item of items) {
-        const quoteRef = item.quoteUrl || item.quote?.url || item.quote?.uid;
-        if (item.quote && quoteRef && item.content?.html) {
-          item.content.html = stripQuoteReferenceHtml(item.content.html, quoteRef);
-        }
-      }
+      const { items, interactionMap } = await postProcessItems(tabFiltered, {
+        moderation,
+        interactionsCol: application?.collections?.get("ap_interactions"),
+      });
 
       const csrfToken = getToken(request.session);
-
-      // Render each card server-side using the same Nunjucks template
-      // Merge response.locals so that i18n (__), mountPath, etc. are available
-      const templateData = {
+      const html = await renderItemCards(items, request, {
         ...response.locals,
         mountPath,
         csrfToken,
         interactionMap,
-      };
-
-      const htmlParts = await Promise.all(
-        items.map((item) => {
-          return new Promise((resolve, reject) => {
-            request.app.render(
-              "partials/ap-item-card.njk",
-              { ...templateData, item },
-              (err, html) => {
-                if (err) reject(err);
-                else resolve(html);
-              }
-            );
-          });
-        })
-      );
+      });
 
       response.json({
-        html: htmlParts.join(""),
+        html,
         before: result.before,
       });
     } catch (error) {

package/lib/controllers/explore.js

@@ -8,7 +8,7 @@
 import { searchInstances, checkInstanceTimeline, getPopularAccounts } from "../fedidb.js";
 import { getToken } from "../csrf.js";
 import { validateInstance, validateHashtag, mapMastodonStatusToItem } from "./explore-utils.js";
-import { stripQuoteReferenceHtml } from "../og-unfurl.js";
+import { postProcessItems, renderItemCards } from "../item-processing.js";
 
 const FETCH_TIMEOUT_MS = 10_000;
 const MAX_RESULTS = 20;
@@ -16,6 +16,57 @@ const MAX_RESULTS = 20;
 // Re-export validateInstance for backward compatibility (used by tabs.js, index.js)
 export { validateInstance } from "./explore-utils.js";
 
+/**
+ * Fetch statuses from a remote Mastodon-compatible instance.
+ *
+ * @param {string} instance - Validated hostname
+ * @param {object} options
+ * @param {string} [options.scope] - "local" or "federated"
+ * @param {string} [options.hashtag] - Validated hashtag (no #)
+ * @param {string} [options.maxId] - Pagination cursor
+ * @param {number} [options.limit] - Max results
+ * @returns {Promise<{ items: Array, nextMaxId: string|null }>}
+ */
+export async function fetchMastodonTimeline(instance, { scope = "local", hashtag, maxId, limit = MAX_RESULTS } = {}) {
+  const isLocal = scope === "local";
+  let apiUrl;
+  if (hashtag) {
+    apiUrl = new URL(`https://${instance}/api/v1/timelines/tag/${encodeURIComponent(hashtag)}`);
+  } else {
+    apiUrl = new URL(`https://${instance}/api/v1/timelines/public`);
+  }
+  apiUrl.searchParams.set("local", isLocal ? "true" : "false");
+  apiUrl.searchParams.set("limit", String(limit));
+  if (maxId) apiUrl.searchParams.set("max_id", maxId);
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+  const fetchRes = await fetch(apiUrl.toString(), {
+    headers: { Accept: "application/json" },
+    signal: controller.signal,
+  });
+  clearTimeout(timeoutId);
+
+  if (!fetchRes.ok) {
+    throw new Error(`Remote instance returned HTTP ${fetchRes.status}`);
+  }
+
+  const statuses = await fetchRes.json();
+  if (!Array.isArray(statuses)) {
+    throw new Error("Unexpected API response format");
+  }
+
+  const items = statuses.map((s) => mapMastodonStatusToItem(s, instance));
+
+  const nextMaxId =
+    statuses.length === limit && statuses.length > 0
+      ? statuses[statuses.length - 1].id || null
+      : null;
+
+  return { items, nextMaxId };
+}
+
 export function exploreController(mountPath) {
   return async (request, response, next) => {
     try {
@@ -60,58 +111,15 @@ export function exploreController(mountPath) {
         });
       }
 
-      // Build API URL: hashtag timeline or public timeline
-      const isLocal = scope === "local";
-      let apiUrl;
-      if (hashtag) {
-        apiUrl = new URL(`https://${instance}/api/v1/timelines/tag/${encodeURIComponent(hashtag)}`);
-        apiUrl.searchParams.set("local", isLocal ? "true" : "false");
-      } else {
-        apiUrl = new URL(`https://${instance}/api/v1/timelines/public`);
-        apiUrl.searchParams.set("local", isLocal ? "true" : "false");
-      }
-      apiUrl.searchParams.set("limit", String(MAX_RESULTS));
-      if (maxId) apiUrl.searchParams.set("max_id", maxId);
-
       let items = [];
       let nextMaxId = null;
       let error = null;
 
       try {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-
-        const fetchRes = await fetch(apiUrl.toString(), {
-          headers: { Accept: "application/json" },
-          signal: controller.signal,
-        });
-        clearTimeout(timeoutId);
-
-        if (!fetchRes.ok) {
-          throw new Error(`Remote instance returned HTTP ${fetchRes.status}`);
-        }
-
-        const statuses = await fetchRes.json();
-
-        if (!Array.isArray(statuses)) {
-          throw new Error("Unexpected API response format");
-        }
-
-        items = statuses.map((s) => mapMastodonStatusToItem(s, instance));
-
-        // Strip "RE:" paragraphs from items that have quote embeds
-        for (const item of items) {
-          const quoteRef = item.quoteUrl || item.quote?.url || item.quote?.uid;
-          if (item.quote && quoteRef && item.content?.html) {
-            item.content.html = stripQuoteReferenceHtml(item.content.html, quoteRef);
-          }
-        }
-
-        // Get next max_id from last item for pagination
-        if (statuses.length === MAX_RESULTS && statuses.length > 0) {
-          const last = statuses[statuses.length - 1];
-          nextMaxId = last.id || null;
-        }
+        const result = await fetchMastodonTimeline(instance, { scope, hashtag, maxId });
+        const processed = await postProcessItems(result.items);
+        items = processed.items;
+        nextMaxId = result.nextMaxId;
       } catch (fetchError) {
         const msg = fetchError.name === "AbortError"
           ? response.locals.__("activitypub.reader.explore.timeout")
@@ -130,7 +138,6 @@ export function exploreController(mountPath) {
         error,
         mountPath,
         csrfToken,
-        // Pass empty interactionMap — explore posts are not in our DB
         interactionMap: {},
       });
     } catch (error) {
@@ -157,81 +164,18 @@ export function exploreApiController(mountPath) {
         return response.status(400).json({ error: "Invalid instance" });
       }
 
-      // Build API URL: hashtag timeline or public timeline
-      const isLocal = scope === "local";
-      let apiUrl;
-      if (hashtag) {
-        apiUrl = new URL(`https://${instance}/api/v1/timelines/tag/${encodeURIComponent(hashtag)}`);
-        apiUrl.searchParams.set("local", isLocal ? "true" : "false");
-      } else {
-        apiUrl = new URL(`https://${instance}/api/v1/timelines/public`);
-        apiUrl.searchParams.set("local", isLocal ? "true" : "false");
-      }
-      apiUrl.searchParams.set("limit", String(MAX_RESULTS));
-      if (maxId) apiUrl.searchParams.set("max_id", maxId);
-
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+      const { items: rawItems, nextMaxId } = await fetchMastodonTimeline(instance, { scope, hashtag, maxId });
+      const { items } = await postProcessItems(rawItems);
 
-      const fetchRes = await fetch(apiUrl.toString(), {
-        headers: { Accept: "application/json" },
-        signal: controller.signal,
-      });
-      clearTimeout(timeoutId);
-
-      if (!fetchRes.ok) {
-        return response.status(502).json({ error: `Remote returned ${fetchRes.status}` });
-      }
-
-      const statuses = await fetchRes.json();
-      if (!Array.isArray(statuses)) {
-        return response.status(502).json({ error: "Unexpected API response" });
-      }
-
-      const items = statuses.map((s) => mapMastodonStatusToItem(s, instance));
-
-      // Strip "RE:" paragraphs from items that have quote embeds
-      for (const item of items) {
-        const quoteRef = item.quoteUrl || item.quote?.url || item.quote?.uid;
-        if (item.quote && quoteRef && item.content?.html) {
-          item.content.html = stripQuoteReferenceHtml(item.content.html, quoteRef);
-        }
-      }
-
-      let nextMaxId = null;
-      if (statuses.length === MAX_RESULTS && statuses.length > 0) {
-        const last = statuses[statuses.length - 1];
-        nextMaxId = last.id || null;
-      }
-
-      // Render each card server-side
       const csrfToken = getToken(request.session);
-      const templateData = {
+      const html = await renderItemCards(items, request, {
         ...response.locals,
         mountPath,
         csrfToken,
         interactionMap: {},
-      };
-
-      const htmlParts = await Promise.all(
-        items.map((item) => {
-          return new Promise((resolve, reject) => {
-            request.app.render(
-              "partials/ap-item-card.njk",
-              { ...templateData, item },
-              (err, html) => {
-                if (err) reject(err);
-                else resolve(html);
-              }
-            );
-          });
-        })
-      );
-
-      response.json({
-        html: htmlParts.join(""),
-        maxId: nextMaxId,
       });
+
+      response.json({ html, maxId: nextMaxId });
     } catch (error) {
       next(error);
     }

package/lib/controllers/hashtag-explore.js

@@ -18,7 +18,7 @@
 
 import { validateHashtag, mapMastodonStatusToItem } from "./explore-utils.js";
 import { getToken } from "../csrf.js";
-import { stripQuoteReferenceHtml } from "../og-unfurl.js";
+import { postProcessItems, renderItemCards } from "../item-processing.js";
 
 const FETCH_TIMEOUT_MS = 10_000;
 const PAGE_SIZE = 20;
@@ -180,47 +180,26 @@ export function hashtagExploreApiController(mountPath) {
       const pageItems = dedupedItems.slice(0, PAGE_SIZE);
 
       // Map to timeline item format
-      const items = pageItems.map(({ status, domain }) =>
+      const rawItems = pageItems.map(({ status, domain }) =>
         mapMastodonStatusToItem(status, domain)
       );
 
-      // Strip "RE:" paragraphs from items that have quote embeds
-      for (const item of items) {
-        const quoteRef = item.quoteUrl || item.quote?.url || item.quote?.uid;
-        if (item.quote && quoteRef && item.content?.html) {
-          item.content.html = stripQuoteReferenceHtml(item.content.html, quoteRef);
-        }
-      }
+      // Shared processing pipeline (quote stripping, etc.)
+      const { items } = await postProcessItems(rawItems);
 
       // Render HTML AFTER merge/dedup/paginate (don't waste CPU on discarded items)
       const csrfToken = getToken(request.session);
-      const templateData = {
+      const html = await renderItemCards(items, request, {
         ...response.locals,
         mountPath,
         csrfToken,
         interactionMap: {},
-      };
-
-      const htmlParts = await Promise.all(
-        items.map(
-          (item) =>
-            new Promise((resolve, reject) => {
-              request.app.render(
-                "partials/ap-item-card.njk",
-                { ...templateData, item },
-                (err, html) => {
-                  if (err) reject(err);
-                  else resolve(html);
-                }
-              );
-            })
-        )
-      );
+      });
 
       const instanceLabels = instanceTabs.map((t) => t.domain);
 
       response.json({
-        html: htmlParts.join(""),
+        html,
         cursors: updatedCursors,
         sources,
         instancesQueried: instanceTabs.length,

package/lib/controllers/reader.js

@@ -12,14 +12,8 @@ import {
   deleteNotification,
 } from "../storage/notifications.js";
 import { getToken, validateToken } from "../csrf.js";
-import {
-  getMutedUrls,
-  getMutedKeywords,
-  getBlockedUrls,
-  getFilterMode,
-} from "../storage/moderation.js";
 import { getFollowedTags } from "../storage/followed-tags.js";
-import { stripQuoteReferenceHtml } from "../og-unfurl.js";
+import { postProcessItems, applyTabFilter, loadModerationData } from "../item-processing.js";
 
 // Re-export controllers from split modules for backward compatibility
 export {
@@ -55,7 +49,7 @@ export function readerController(mountPath) {
       // Build query options
       const options = { before, after, limit, unread };
 
-      // Tab filtering
+      // Tab filtering at storage level
       if (tab === "notes") {
         options.type = "note";
         options.excludeReplies = true;
@@ -68,82 +62,21 @@ export function readerController(mountPath) {
       // Get timeline items
       const result = await getTimelineItems(collections, options);
 
-      // Apply client-side filtering for tabs not supported by storage layer
-      let items = result.items;
-      if (tab === "replies") {
-        items = items.filter((item) => item.inReplyTo);
-      } else if (tab === "media") {
-        items = items.filter(
-          (item) =>
-            (item.photo && item.photo.length > 0) ||
-            (item.video && item.video.length > 0) ||
-            (item.audio && item.audio.length > 0),
-        );
-      }
+      // Tab filtering for types not supported by storage layer
+      const tabFiltered = applyTabFilter(result.items, tab);
 
-      // Apply moderation filters (muted actors, keywords, blocked actors)
+      // Load moderation data + interactions, apply shared pipeline
       const modCollections = {
         ap_muted: application?.collections?.get("ap_muted"),
         ap_blocked: application?.collections?.get("ap_blocked"),
         ap_profile: application?.collections?.get("ap_profile"),
       };
-      const [mutedUrls, mutedKeywords, blockedUrls, filterMode] =
-        await Promise.all([
-          getMutedUrls(modCollections),
-          getMutedKeywords(modCollections),
-          getBlockedUrls(modCollections),
-          getFilterMode(modCollections),
-        ]);
-      const blockedSet = new Set(blockedUrls);
-      const mutedSet = new Set(mutedUrls);
-
-      if (blockedSet.size > 0 || mutedSet.size > 0 || mutedKeywords.length > 0) {
-        items = items.filter((item) => {
-          // Blocked actors are ALWAYS hidden
-          if (item.author?.url && blockedSet.has(item.author.url)) {
-            return false;
-          }
-
-          // Check muted actor
-          const isMutedActor =
-            item.author?.url && mutedSet.has(item.author.url);
-
-          // Check muted keywords against content, title, and summary
-          let matchedKeyword = null;
-          if (mutedKeywords.length > 0) {
-            const searchable = [
-              item.content?.text,
-              item.name,
-              item.summary,
-            ]
-              .filter(Boolean)
-              .join(" ")
-              .toLowerCase();
-            if (searchable) {
-              matchedKeyword = mutedKeywords.find((kw) =>
-                searchable.includes(kw.toLowerCase()),
-              );
-            }
-          }
-
-          if (isMutedActor || matchedKeyword) {
-            if (filterMode === "warn") {
-              // Mark for content warning instead of hiding
-              item._moderated = true;
-              item._moderationReason = isMutedActor
-                ? "muted_account"
-                : "muted_keyword";
-              if (matchedKeyword) {
-                item._moderationKeyword = matchedKeyword;
-              }
-              return true;
-            }
-            return false;
-          }
-
-          return true;
-        });
-      }
+      const moderation = await loadModerationData(modCollections);
+
+      const { items, interactionMap } = await postProcessItems(tabFiltered, {
+        moderation,
+        interactionsCol: application?.collections?.get("ap_interactions"),
+      });
 
       // Get unread notification count for badge + unread timeline count for toggle
       const [unreadCount, unreadTimelineCount] = await Promise.all([
@@ -151,60 +84,6 @@ export function readerController(mountPath) {
         countUnreadItems(collections),
       ]);
 
-      // Get interaction state for liked/boosted indicators
-      // Interactions are keyed by canonical AP uid (new) or display url (legacy).
-      // Query by both, normalize map keys to uid for template lookup.
-      const interactionsCol =
-        application?.collections?.get("ap_interactions");
-      const interactionMap = {};
-
-      if (interactionsCol) {
-        const lookupUrls = new Set();
-        const objectUrlToUid = new Map();
-
-        for (const item of items) {
-          const uid = item.uid;
-          const displayUrl = item.url || item.originalUrl;
-
-          if (uid) {
-            lookupUrls.add(uid);
-            objectUrlToUid.set(uid, uid);
-          }
-
-          if (displayUrl) {
-            lookupUrls.add(displayUrl);
-            objectUrlToUid.set(displayUrl, uid || displayUrl);
-          }
-        }
-
-        if (lookupUrls.size > 0) {
-          const interactions = await interactionsCol
-            .find({ objectUrl: { $in: [...lookupUrls] } })
-            .toArray();
-
-          for (const interaction of interactions) {
-            // Normalize to uid so template can look up by itemUid
-            const key =
-              objectUrlToUid.get(interaction.objectUrl) ||
-              interaction.objectUrl;
-
-            if (!interactionMap[key]) {
-              interactionMap[key] = {};
-            }
-
-            interactionMap[key][interaction.type] = true;
-          }
-        }
-      }
-
-      // Strip "RE:" paragraphs from items that have quote embeds
-      for (const item of items) {
-        const quoteRef = item.quoteUrl || item.quote?.url || item.quote?.uid;
-        if (item.quote && quoteRef && item.content?.html) {
-          item.content.html = stripQuoteReferenceHtml(item.content.html, quoteRef);
-        }
-      }
-
       // CSRF token for interaction forms
       const csrfToken = getToken(request.session);
 

package/lib/controllers/tag-timeline.js

@@ -4,12 +4,7 @@
 
 import { getTimelineItems } from "../storage/timeline.js";
 import { getToken } from "../csrf.js";
-import {
-  getMutedUrls,
-  getMutedKeywords,
-  getBlockedUrls,
-  getFilterMode,
-} from "../storage/moderation.js";
+import { postProcessItems, loadModerationData } from "../item-processing.js";
 
 export function tagTimelineController(mountPath) {
   return async (request, response, next) => {
@@ -36,88 +31,21 @@ export function tagTimelineController(mountPath) {
 
       // Get timeline items filtered by tag
       const result = await getTimelineItems(collections, { before, after, limit, tag });
-      let items = result.items;
 
-      // Apply moderation filters (same as main reader)
+      // Shared processing pipeline: moderation, quote stripping, interactions
       const modCollections = {
         ap_muted: application?.collections?.get("ap_muted"),
         ap_blocked: application?.collections?.get("ap_blocked"),
         ap_profile: application?.collections?.get("ap_profile"),
       };
-      const [mutedUrls, mutedKeywords, blockedUrls, filterMode] =
-        await Promise.all([
-          getMutedUrls(modCollections),
-          getMutedKeywords(modCollections),
-          getBlockedUrls(modCollections),
-          getFilterMode(modCollections),
-        ]);
-      const blockedSet = new Set(blockedUrls);
-      const mutedSet = new Set(mutedUrls);
+      const moderation = await loadModerationData(modCollections);
 
-      if (blockedSet.size > 0 || mutedSet.size > 0 || mutedKeywords.length > 0) {
-        items = items.filter((item) => {
-          if (item.author?.url && blockedSet.has(item.author.url)) {
-            return false;
-          }
-
-          const isMutedActor = item.author?.url && mutedSet.has(item.author.url);
-
-          let matchedKeyword = null;
-          if (mutedKeywords.length > 0) {
-            const searchable = [item.content?.text, item.name, item.summary]
-              .filter(Boolean)
-              .join(" ")
-              .toLowerCase();
-            if (searchable) {
-              matchedKeyword = mutedKeywords.find((kw) =>
-                searchable.includes(kw.toLowerCase())
-              );
-            }
-          }
-
-          if (isMutedActor || matchedKeyword) {
-            if (filterMode === "warn") {
-              item._moderated = true;
-              item._moderationReason = isMutedActor ? "muted_account" : "muted_keyword";
-              if (matchedKeyword) item._moderationKeyword = matchedKeyword;
-              return true;
-            }
-            return false;
-          }
-
-          return true;
-        });
-      }
-
-      // Get interaction state for liked/boosted indicators
-      const interactionsCol = application?.collections?.get("ap_interactions");
-      const interactionMap = {};
-
-      if (interactionsCol) {
-        const lookupUrls = new Set();
-        const objectUrlToUid = new Map();
-
-        for (const item of items) {
-          const uid = item.uid;
-          const displayUrl = item.url || item.originalUrl;
-          if (uid) { lookupUrls.add(uid); objectUrlToUid.set(uid, uid); }
-          if (displayUrl) { lookupUrls.add(displayUrl); objectUrlToUid.set(displayUrl, uid || displayUrl); }
-        }
-
-        if (lookupUrls.size > 0) {
-          const interactions = await interactionsCol
-            .find({ objectUrl: { $in: [...lookupUrls] } })
-            .toArray();
-
-          for (const interaction of interactions) {
-            const key = objectUrlToUid.get(interaction.objectUrl) || interaction.objectUrl;
-            if (!interactionMap[key]) interactionMap[key] = {};
-            interactionMap[key][interaction.type] = true;
-          }
-        }
-      }
+      const { items, interactionMap } = await postProcessItems(result.items, {
+        moderation,
+        interactionsCol: application?.collections?.get("ap_interactions"),
+      });
 
-      // Check if this hashtag is followed (Task 7 will populate ap_followed_tags)
+      // Check if this hashtag is followed
       const followedTagsCol = application?.collections?.get("ap_followed_tags");
       let isFollowed = false;
       if (followedTagsCol) {

package/lib/item-processing.js

@@ -0,0 +1,226 @@
+/**
+ * Shared item processing pipeline for the ActivityPub reader.
+ *
+ * Both the reader (inbox-sourced items) and explore (Mastodon API items)
+ * flow through these functions. This ensures every enhancement (emoji,
+ * quote stripping, moderation, etc.) is implemented once.
+ */
+
+import { stripQuoteReferenceHtml } from "./og-unfurl.js";
+
+/**
+ * Post-process timeline items for rendering.
+ * Called after items are loaded from any source (MongoDB or Mastodon API).
+ *
+ * @param {Array} items - Timeline items (from DB or Mastodon API mapping)
+ * @param {object} [options]
+ * @param {object} [options.moderation] - { mutedUrls, mutedKeywords, blockedUrls, filterMode }
+ * @param {object} [options.interactionsCol] - MongoDB collection for interaction state
+ * @returns {Promise<{ items: Array, interactionMap: object }>}
+ */
+export async function postProcessItems(items, options = {}) {
+  // 1. Moderation filters (muted actors, keywords, blocked actors)
+  if (options.moderation) {
+    items = applyModerationFilters(items, options.moderation);
+  }
+
+  // 2. Strip "RE:" paragraphs from items with quote embeds
+  stripQuoteReferences(items);
+
+  // 3. Build interaction map (likes/boosts) — empty when no collection
+  const interactionMap = options.interactionsCol
+    ? await buildInteractionMap(items, options.interactionsCol)
+    : {};
+
+  return { items, interactionMap };
+}
+
+/**
+ * Apply moderation filters to items.
+ * Blocked actors are always hidden. Muted actors/keywords are hidden or
+ * marked with a content warning depending on filterMode.
+ *
+ * @param {Array} items
+ * @param {object} moderation
+ * @param {string[]} moderation.mutedUrls
+ * @param {string[]} moderation.mutedKeywords
+ * @param {string[]} moderation.blockedUrls
+ * @param {string} moderation.filterMode - "hide" or "warn"
+ * @returns {Array}
+ */
+export function applyModerationFilters(items, { mutedUrls, mutedKeywords, blockedUrls, filterMode }) {
+  const blockedSet = new Set(blockedUrls);
+  const mutedSet = new Set(mutedUrls);
+
+  if (blockedSet.size === 0 && mutedSet.size === 0 && mutedKeywords.length === 0) {
+    return items;
+  }
+
+  return items.filter((item) => {
+    // Blocked actors are ALWAYS hidden
+    if (item.author?.url && blockedSet.has(item.author.url)) {
+      return false;
+    }
+
+    // Check muted actor
+    const isMutedActor = item.author?.url && mutedSet.has(item.author.url);
+
+    // Check muted keywords against content, title, and summary
+    let matchedKeyword = null;
+    if (mutedKeywords.length > 0) {
+      const searchable = [item.content?.text, item.name, item.summary]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      if (searchable) {
+        matchedKeyword = mutedKeywords.find((kw) =>
+          searchable.includes(kw.toLowerCase()),
+        );
+      }
+    }
+
+    if (isMutedActor || matchedKeyword) {
+      if (filterMode === "warn") {
+        // Mark for content warning instead of hiding
+        item._moderated = true;
+        item._moderationReason = isMutedActor ? "muted_account" : "muted_keyword";
+        if (matchedKeyword) {
+          item._moderationKeyword = matchedKeyword;
+        }
+        return true;
+      }
+      return false;
+    }
+
+    return true;
+  });
+}
+
+/**
+ * Strip "RE:" quote reference paragraphs from items that have quote embeds.
+ * Mutates items in place.
+ *
+ * @param {Array} items
+ */
+export function stripQuoteReferences(items) {
+  for (const item of items) {
+    const quoteRef = item.quoteUrl || item.quote?.url || item.quote?.uid;
+    if (item.quote && quoteRef && item.content?.html) {
+      item.content.html = stripQuoteReferenceHtml(item.content.html, quoteRef);
+    }
+  }
+}
+
+/**
+ * Build interaction map (likes/boosts) for template rendering.
+ * Returns { [uid]: { like: true, boost: true } }.
+ *
+ * @param {Array} items
+ * @param {object} interactionsCol - MongoDB collection
+ * @returns {Promise<object>}
+ */
+export async function buildInteractionMap(items, interactionsCol) {
+  const interactionMap = {};
+  const lookupUrls = new Set();
+  const objectUrlToUid = new Map();
+
+  for (const item of items) {
+    const uid = item.uid;
+    const displayUrl = item.url || item.originalUrl;
+
+    if (uid) {
+      lookupUrls.add(uid);
+      objectUrlToUid.set(uid, uid);
+    }
+    if (displayUrl) {
+      lookupUrls.add(displayUrl);
+      objectUrlToUid.set(displayUrl, uid || displayUrl);
+    }
+  }
+
+  if (lookupUrls.size === 0) return interactionMap;
+
+  const interactions = await interactionsCol
+    .find({ objectUrl: { $in: [...lookupUrls] } })
+    .toArray();
+
+  for (const interaction of interactions) {
+    const key = objectUrlToUid.get(interaction.objectUrl) || interaction.objectUrl;
+    if (!interactionMap[key]) interactionMap[key] = {};
+    interactionMap[key][interaction.type] = true;
+  }
+
+  return interactionMap;
+}
+
+/**
+ * Filter items by tab type (reader-specific).
+ *
+ * @param {Array} items
+ * @param {string} tab - "notes", "articles", "boosts", "replies", "media", "all"
+ * @returns {Array}
+ */
+export function applyTabFilter(items, tab) {
+  if (tab === "replies") {
+    return items.filter((item) => item.inReplyTo);
+  }
+  if (tab === "media") {
+    return items.filter(
+      (item) =>
+        (item.photo && item.photo.length > 0) ||
+        (item.video && item.video.length > 0) ||
+        (item.audio && item.audio.length > 0),
+    );
+  }
+  return items;
+}
+
+/**
+ * Render items to HTML using ap-item-card.njk.
+ * Used by all API endpoints that return pre-rendered card HTML.
+ *
+ * @param {Array} items
+ * @param {object} request - Express request (for app.render)
+ * @param {object} templateData - Merged template context (locals, mountPath, csrfToken, interactionMap)
+ * @returns {Promise<string>}
+ */
+export async function renderItemCards(items, request, templateData) {
+  const htmlParts = await Promise.all(
+    items.map(
+      (item) =>
+        new Promise((resolve, reject) => {
+          request.app.render(
+            "partials/ap-item-card.njk",
+            { ...templateData, item },
+            (err, html) => {
+              if (err) reject(err);
+              else resolve(html);
+            },
+          );
+        }),
+    ),
+  );
+  return htmlParts.join("");
+}
+
+/**
+ * Load moderation data from MongoDB collections.
+ * Convenience wrapper to reduce boilerplate in controllers.
+ *
+ * @param {object} modCollections - { ap_muted, ap_blocked, ap_profile }
+ * @returns {Promise<object>} moderation data for postProcessItems()
+ */
+export async function loadModerationData(modCollections) {
+  // Dynamic import to avoid circular dependency
+  const { getMutedUrls, getMutedKeywords, getBlockedUrls, getFilterMode } =
+    await import("./storage/moderation.js");
+
+  const [mutedUrls, mutedKeywords, blockedUrls, filterMode] = await Promise.all([
+    getMutedUrls(modCollections),
+    getMutedKeywords(modCollections),
+    getBlockedUrls(modCollections),
+    getFilterMode(modCollections),
+  ]);
+
+  return { mutedUrls, mutedKeywords, blockedUrls, filterMode };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
   "keywords": [
     "indiekit",

package/views/activitypub-explore.njk

@@ -247,11 +247,13 @@
           {% if maxId %}
             <div class="ap-load-more"
               id="ap-explore-load-more"
-              data-max-id="{{ maxId }}"
-              data-instance="{{ instance }}"
-              data-scope="{{ scope }}"
-              data-hashtag="{{ hashtag }}"
-              x-data="apExploreScroll()"
+              data-cursor="{{ maxId }}"
+              data-api-url="{{ mountPath }}/admin/reader/api/explore"
+              data-cursor-param="max_id"
+              data-cursor-field="maxId"
+              data-timeline-id="ap-explore-timeline"
+              data-extra-params='{{ { instance: instance, scope: scope, hashtag: hashtag } | dump }}'
+              x-data="apInfiniteScroll()"
               x-init="init()">
               <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
               <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">

package/views/activitypub-reader.njk

@@ -140,12 +140,15 @@
     {% if before %}
       <div class="ap-load-more"
         id="ap-load-more"
-        data-before="{{ before }}"
-        data-tab="{{ tab }}"
-        data-tag=""
+        data-cursor="{{ before }}"
+        data-api-url="{{ mountPath }}/admin/reader/api/timeline"
+        data-cursor-param="before"
+        data-cursor-field="before"
+        data-timeline-id="ap-timeline"
+        data-extra-params='{{ { tab: tab } | dump }}'
+        data-hide-pagination="ap-reader-pagination"
         x-data="apInfiniteScroll()"
-        x-init="init()"
-        @ap-append-items.window="appendItems($event.detail)">
+        x-init="init()">
         <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
         <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
           <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>

package/views/activitypub-tag-timeline.njk

@@ -36,6 +36,7 @@
   {# Timeline items #}
   {% if items.length > 0 %}
     <div class="ap-timeline"
+      id="ap-timeline"
       data-mount-path="{{ mountPath }}"
       data-tag="{{ hashtag }}"
       data-before="{{ before if before else '' }}">
@@ -64,12 +65,15 @@
     {% if before %}
       <div class="ap-load-more"
         id="ap-load-more"
-        data-before="{{ before }}"
-        data-tab=""
-        data-tag="{{ hashtag }}"
+        data-cursor="{{ before }}"
+        data-api-url="{{ mountPath }}/admin/reader/api/timeline"
+        data-cursor-param="before"
+        data-cursor-field="before"
+        data-timeline-id="ap-timeline"
+        data-extra-params='{{ { tag: hashtag } | dump }}'
+        data-hide-pagination="ap-tag-pagination"
         x-data="apInfiniteScroll()"
-        x-init="init()"
-        @ap-append-items.window="appendItems($event.detail)">
+        x-init="init()">
         <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
         <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
           <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>