@rmdes/indiekit-endpoint-activitypub 2.4.4 → 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/assets/reader-tabs.js

@@ -366,6 +366,16 @@ document.addEventListener("alpine:init", () => {
       }
     },
 
+    // ── Public load-more method (called by button click) ────────────────────
+
+    loadMoreTab(tab) {
+      if (tab.type === "instance") {
+        this._loadMoreInstanceTab(tab);
+      } else if (tab.type === "hashtag") {
+        this._loadMoreHashtagTab(tab);
+      }
+    },
+
     // ── Infinite scroll for tab panels ───────────────────────────────────────
 
     _setupScrollObserver(tab) {

package/assets/reader.css

@@ -2486,15 +2486,21 @@
 }
 
 .ap-quote-embed__content {
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 6;
   color: var(--color-on-background);
-  display: -webkit-box;
   font-size: var(--font-size-s);
   line-height: 1.5;
+  max-height: calc(1.5em * 6);
   overflow: hidden;
 }
 
+.ap-quote-embed__content a {
+  display: inline;
+}
+
+.ap-quote-embed__content a span {
+  display: inline;
+}
+
 .ap-quote-embed__content p {
   margin: 0 0 var(--space-xs);
 }

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);
     }